Services on Mobility Web
Please note that this document is a draft and still not finalized.
This page describes the service flow in the mobility web.
View Services
From the Explore Page, a user can click on a service-related web category to land on the web category detail page with a grid view of services.
The user can select from the Region and Facility filters to adjust filters on the services grid view.
By clicking on the ‘BOOK NOW’ button or the ‘See More’ link on a given service info card, the user will be able to get directed to the corresponding service detail page.
The service detail page contains the service description , booking information , service filters, grid view of slots.
Filter Services
From the service detail page, the user should select the required filters to filter the service slots accordingly.
Available filters are,
Region Filter - Already applied based on the selection made in the service grid view page
Facility Filter - Already applied based on the selection made in the service grid view page
Instructor - Empty
Date - Current date and 7 days starting from the current date
Time of Day - By default ‘All Day’
When the user initially visits the page, the above default values will get applied to the filters and the user has the flexibility of changing them. Based on the applied filters , the grid view of slots will get changed. On the grid view, each cell represents a particular slot. For each slot , the price, time and duration are mentioned. By referring to the legend right above the grid view, the users can easily identify the corresponding time of day that a particular slot belongs to.
Purchase a Service
To purchase a service, from the grid view of slots, the user should select a specific slot that would direct the user to the screen below. From here, the user can select product additions if available any , select the required number of slots and confirm the booking that directs the user to the general checkout flow.
Upon clicking on the ‘BOOK NOW’ button, the following screen will be shown,
If the user doesn’t have an account, while trying to checkout the service booking the following message will be shown.
View Service Bookings
The users can view service booking from My Pages > Upcoming Bookings.
Settings and Configurations
On the service detail page, instructor’s profile image is shown in the 'instructor dropdown options' if, mainResourceRequirment.type === 'STAFF
If the profile image is not available, the first letter of the instructor’s name will be shown on a circle avatar.
On the booking confirmation screen, the quantity dropdown is shown only if capacity.length > 0 and the number of available dropdown options depend on availableCapacity of capacity array . If resources are available, then it also depends on resourceId.
The prices of service slots may change based on the time of the day. So that on the services list view, on each info card, the example price is shown for users' reference.