Booking form

The booking form is a React 18 app built from src/ into theme/assets/camp-booking.bundle.js, with its dependencies in vendors-booking.bundle.js. It runs only on pages using layout/theme.product.liquid.

Start-up

1. theme.product.liquid renders an empty #camp-booking-root and writes window.theme.campBookingConfig from the ASC - Camp Booking theme settings.

2. src/js/camp-booking.js defines window.startCampBooking.

3. The Book Camp button, .book-camp-cta in theme/snippets/product-atc.liquid, calls it through theme/assets/main-product.js. A start_booking query parameter on the URL calls it on load.

4. startCampBooking loads the Google Maps JavaScript API with the Places library, reads the participant count from #qty, and renders <CampBooking> into the root with:

   {
     ...window.theme.campBookingConfig,
     api: window.theme.api,
     customer: window.Shopify.customer,
   }

5. After 100 milliseconds it adds the active class to the root, which fades the form in.

#qty offers 1 to 10 participants, capped at the variant's stock when inventory is tracked. It is rendered only when the variant is available and In Season is not false.

Components

CampBooking                  src/components/CampBooking.tsx
└─ ParticipantsContext       src/components/ParticipantsContext.tsx
   ├─ StickyTitle            desktop header, close button, Google reviews badge
   └─ BookingBody            hero image
      ├─ MobileTitle
      └─ one per participant, only the current one visible
         ├─ SavedChildrenDropdown   logged-in customers with saved children
         └─ ParticipantDetailsForm  src/components/ParticipantDetails.tsx
            ├─ SchoolAutocomplete   Google Places
            ├─ ClubsAutocomplete    shopify-zoho-integration
            └─ PreviousParticipantButton

Fields and validation

Validation uses react-hook-form with the Zod schema from src/components/models/ParticipantDetailsSchema.tsx, built from the theme settings.

The field key is also the cart line property name. Zoho mapping in asc-api-src-zoho-integration reads those names, so renaming a key is a change in both repositories.

Date of Birth defaults to today, so it fails validation until the parent changes it.

Submitting

1. Each participant step calls updateParticipantDetails. The last step sets readyToSubmit.
2. finalSubmit in CampBooking.tsx builds one cart item per participant, with quantity 1 and the fields as properties. It formats Date of Birth as dd MMMM yyyy and drops the Has … switches, keeping the related text only when its switch was on.
3. If the children were typed rather than chosen from saved children, it starts saving each child to asc-api-membership-pass. The chain of saves is not awaited.
4. It posts the items to {Shopify.routes.root}cart/add.js and sets window.location.href to the cart.

The exact properties are listed in Booking line item properties.

Requests

Saved-children requests send text/plain bodies containing the JSON encoded twice with btoa.

ZOHO_INTEGRATION_API_ENDPOINT and GOOGLE_PLACES_API_KEY are inlined at build time from src/.env. src/js/camp-booking.js also contains the Maps key as a literal in its loader, so a key change needs both updated and a rebuild.

Saved children

The service stores each child as a child metaobject and lists them in the customer metafield children.saved_details. GET …/children returns each child's fields with title-cased names, which SavedChildrenDropdown.tsx maps back to form keys.

A logged-in customer can choose between "Choose from kids" and "Add new kids" for each participant. loadedFromSavedChildren is a single flag for the whole booking that reflects the last choice made. In a booking that mixes saved and new children, either none of the new children are saved, or the saved children are saved again as duplicates, depending on which was chosen last.

Known issues

These were found by reading the code and have not been confirmed against production.

Changing the form

After any change, run the build and commit theme/assets/camp-booking.bundle.js and vendors-booking.bundle.js in the theme repository. See Releasing a change.