From the Explore Screen, a user can click on a service-related web category to land on the Service Filter Screen, where he can set Service, Facility and Time filters to get the list of services filtered based on his preference.
If no matches found for the applied filters, the following empty-state screen will be shown, from which the user can go back to the Service Filter Screen to adjust the filters accordingly.
Filtered list of services will look like follows,
When a specific info card from the above list is selected, the user will get to see the corresponding service detail page, from which he can select the Quantity , Instructor and add the booking to the shopping cart to proceed with the check out flow.
The payed service booking will get listed on My Bookings and the user will also be prompted to add the booking to his personal calendar on the mobile device.
Info Card Variations
Services with Capacity
Services with Capacity and Facility - Room Info
Settings and Configurations
On the Detail Screen, instructor’s profile image is shown 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 details 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.
QR code passage
To enable the usage of QR codes for service bookings you have to configure the following setting in Backoffice.
The setting is found under “Configuration → Products → Products → “Massage 30min” → Service” tab.
This enables the following functionality in the app: As seen in the screenshots below. Where you click the “Show QR Code” button to open the view in the right picture. Then you have the possibility to close the QR code modal by clicking anywhere on the screen.