Booking - smbc-digital/form-builder GitHub Wiki

Refer to Stockport Design System for book pattern styling information and reference images

Related

• Appointment Types and Optional resources
• Cancel Appointment
• Confirm Booking

Warning

NOTE: Booking element requires a page with a page-slug of no-appointment-available. This page must exisit with the Pages array for when a appointment type currently has no available appointments within the booking search period, this page is displayed.

Example no-appointment-available json

{
    "Title": "We're sorry, there are no available appointments",
    "PageSlug": "no-appointment-available",
    "DisplayBreadcrumbs": true,
    "HideBackButton": true,
    "Elements": [
        {
            "Type": "H2",
            "Properties": {
                "Text": "Why not?"
            }
        },
        {
            "Type": "p",
            "Properties": {
                "Text": "There are currently no online appointments available."
            }
        },
        {
            "Type": "H2",
            "Properties": {
                "Text": "What you can do next"
            }
        },
        {
            "Type": "p",
            "Properties": {
                "Text": "Please email ##### to book your ####."
            }
        },
        {
            "Type": "link",
            "Properties": {
                "Text": "Go to the homepage",
                "Url": "https://www.stockport.gov.uk",
                "ClassName": "govuk-button"
            }
        }
    ]
}

NOTE: Reservation endpoint requires customer contact details, this implies that there are elements within the forms json which map to customer.firstname, customer.lastname, customer.email additionally customer.address and customer.phone can be supplied but are optional (more info about target mapping).

DSL properties

Property	Type	Required	Default Value	Description
QuestionId	string	✔️	❌	Unique question id allowed charatcers are [a-zA-Z] only
Label	string	✔️	❌	Label associated with the question
BookingProvider	enum	✔️	❌	Only one type of 'Booking provider' can be used on a form. Booking provider used for booking data (Current List of Providers)
AppointmentTypes	Array[AppointmentType]	✔️	❌	Contains a list of objects for each env which contains the UniqueId for Appointment type, the Env and any optional resources.Appointment Types and optional resources info. The response the BookingProvider recieves determins if the appointment is a fullday appointment or requies the time selection to be shown. (Current list of fake ids to test on local)
CheckYourBooking	bool	❌	false	Displays check your booking page after booking date/time selection if enabled
NextAvailableIAG	string	❌	This is the next available appointment	IAG which is displayed when the next available appointment is not within the current month
SearchPeriod	int	❌	12	Specified the Time in months into the future an appointment can be booked. i.e. 3 will allow a search period of this month plus 3 additional months. 0 would allow booking only for this month. The default is 12 months in advance
LabelAsH1	bool	❌	false	Display Label as h1 not a label (if this is set to true, HideTitle in the Page properties should also be set to true)
Warning	string	❌	❌	Warning which appears above the input NOTE: Only use one of Warning, Hint or IAG
Hint	string	❌	❌	Hint which appears above the input NOTE: Only use one of Warning, Hint or IAG
IAG	string	❌	❌	Inset text to appear below the Label. NOTE: Only use one of Warning, Hint or IAG
TargetMapping	string	❌	❌	Used for custom object mapping when creating submit data (more info about target mapping)
CustomValidationMessage	string	❌	❌	Custom validation message to override the default
NoAvailableTimeForBookingType	string	❌	appointments	Custom warning message to override the default 'appointment' text
CustomerAddressId	string	❌	❌	The QuestionId of the element capturing the customer address to be used for the booking. If not provided, no address will be populated in the booking
SummaryLabel	string	❌	❌	Change the label associated with this input on the summary
AutoConfirm	bool	❌	false	Enable form builder to confirm a booking
LimitNextAvailableByDays	int	❌	0	Delay the first available appointment by x days
LimitNextAvailableFromDate	string	❌	❌	The date from which to add the LimitNextAvailableByDays value, can be a hard coded string date or a reference to an earlier question using Tag Parser. Note: if the date question is optional or only on certain journeys, you will need a separate booking page

Booking examples

Json for booking (Date only):

       {
            "Type": "Booking",
            "Properties": {
              "QuestionId": "booking",
              "Label": "Select a date and time",
              "LabelAsH1": true,
              "BookingProvider": "Fake",
              "AppointmentTypes": [
               {
                   "Environment": "env",
                   "AppointmentId":"000000000000-0000-0000-0000-000000000000",
                   "OptionalResources": [ 
                   {
                       "ResourceId": "000000000000-0000-0000-0000-000000000000",
                        "Quantity": 1
                   }]
               }
              ],
              "CheckYourBooking": true,
              "SearchPeriod": 3,
              "CustomerAddressId": "address"
            }
       }

Calendar page (Full day appointment example)

Check your bookingpage (Displayed if CheckYourBooking is true)

Booking Id Sourced from the previous answer

The AppointmentTypes array will need to include 'AppointmentIdKey' field to match the question id to retrieve the element appointment id value.

Property	Type	Required	Default Value	Description
AppointmentIdKey	string	❌	❌	Id to match to Question Id

{
    "Type": "Booking",
    "Properties": {
        "AppointmentTypes": [
            {
                "Environment": "int",
                "AppointmentIdKey": "{questionid}"
            }
        ]
    }
}