@wix/vibe-bookings-plugin 0.14.0 → 0.16.0

package/dist/index.cjs

@@ -2976,30 +2976,39 @@ var getRouterFileContent = () => {
 
   // Import route components and loaders
   import { rootRouteLoader, WixServicesProvider } from '@/wix-verticals/react-pages/react-router/routes/root';
-  import { ServiceListWrapper } from '@/components/bookings/ServiceListPage';
-  import { ServiceDetails } from '@/components/bookings/ServiceDetails';
-  import { TimeSlotListPage } from '@/components/bookings/TimeSlotListPage';
-  import { BookingFormPage } from '@/components/bookings/BookingFormPage';
-  import { loadServiceListServiceConfig } from '@wix/bookings/services';
-  import { useLoaderData, useParams } from 'react-router-dom';
+  import { ServiceListWrapper } from '@/components/bookings/pages/ServiceListPage';
+  import { ServiceDetails } from '@/components/bookings/components/service-page/ServiceDetails';
+  import { TimeSlotListPage } from '@/components/bookings/pages/TimeSlotListPage';
+  import { BookingFormPage } from '@/components/bookings/pages/BookingFormPage';
+  import { LocationSelectorPage } from '@/components/bookings/pages/LocationSelectorPage';
+  import { loadServiceListServiceInitialData } from '@wix/bookings/services';
+  import { useLoaderData } from 'react-router-dom';
 
   // Service list route component
   function ServiceListRoute() {
     const { servicesListConfig } = useLoaderData<typeof serviceListLoader>();
-    return <ServiceListWrapper servicesListConfig={servicesListConfig} servicePageRoute="/bookings" />;
+    return <ServiceListWrapper servicesListConfig={servicesListConfig} servicePageRoute="/book-online/service" />;
   }
 
   // Service details route component
   function ServiceDetailsRoute() {
-    const { serviceId } = useParams<{ serviceId: string }>();
+    const { service, timeSlotListConfig, bookingFormId } = useLoaderData<typeof serviceDetailsLoader>();
+    return <ServiceDetails 
+      service={service} 
+      timeSlotListConfig={timeSlotListConfig}
+      bookingFormId={bookingFormId}
+    />;
+  }
+
+  // Loader for service details route
+  async function serviceDetailsLoader({ params }: { params: { serviceId: string } }) {
     // Note: Load service data by serviceId and pass to ServiceDetails
     // ServiceDetails requires a service object from @wix/auto_sdk_bookings_services
     // Optionally load timeSlotListConfig and bookingFormId if needed
-    return <ServiceDetails 
-      service={/* load service by serviceId */} 
-      timeSlotListConfig={/* optional: load time slot list config */}
-      bookingFormId={/* optional: booking form ID */}
-    />;
+    const service = {/* load service by serviceId from params.serviceId */};
+    const timeSlotListConfig = {/* optional: load time slot list config */};
+    const bookingFormId = {/* optional: booking form ID */};
+    return { service, timeSlotListConfig, bookingFormId };
   }
 
   // Time slot list route component
@@ -3014,32 +3023,48 @@ var getRouterFileContent = () => {
     return <BookingFormPage formId={formId} additionalMetadata={additionalMetadata} />;
   }
 
+  // Location selector route component
+  function LocationSelectorRoute() {
+    const { service } = useLoaderData<typeof locationListLoader>();
+    return <LocationSelectorPage service={service} />;
+  }
+
   // Loader for service list route
   async function serviceListLoader() {
-    const servicesListConfig = await loadServiceListServiceConfig({});
+    const servicesListConfig = await loadServiceListServiceInitialData({});
     return { servicesListConfig };
   }
 
   // Loader for time slot list route
-  async function timeSlotListLoader() {
+  async function timeSlotListLoader({ params }: { params: { serviceId: string } }) {
     // Note: Load time slot list config based on service or other criteria
-    const timeSlotListConfig = {/* load time slot list config */};
+    const timeSlotListConfig = {/* load time slot list config using params.serviceId */};
     return { timeSlotListConfig };
   }
 
   // Loader for booking form route
   async function bookingFormLoader() {
-    // Note: Get form ID from route params or config
-    const formId = {/* get form ID */};
+    // Note: Get form ID from route params, context, or config
+    // The booking form route doesn't have serviceId in the path, so load from context or booking service
+    const formId = {/* get form ID from context or booking service */};
     const additionalMetadata = {/* optional: additional metadata */};
     return { formId, additionalMetadata };
   }
 
+  // Loader for location selector route
+  async function locationListLoader({ params }: { params: { serviceId?: string } }) {
+    // Note: Load service data by serviceId - LocationSelectorPage uses Service.Locations
+    // which gets locations from the service object
+    // If serviceId is not in route, load from context or booking service
+    const service = {/* load service by serviceId from params or context */};
+    return { service };
+  }
+
   const router = createBrowserRouter(
     [
       {
         path: '/',
-        element: <Navigate to="/bookings" />,
+        element: <Navigate to="/book-online" />,
       },
       {
         element: (
@@ -3050,23 +3075,24 @@ var getRouterFileContent = () => {
         loader: rootRouteLoader,
         children: [
           {
-            path: '/bookings',
+            path: '/book-online',
             element: <ServiceListRoute />,
-            loader: serviceListLoader,
           },
           {
-            path: '/bookings/:serviceId',
+            path: '/book-online/locations',
+            element: <LocationSelectorRoute />,
+          },
+          {
+            path: '/book-online/service/:serviceId',
             element: <ServiceDetailsRoute />,
           },
           {
-            path: '/bookings/:serviceId/time-slots',
+            path: '/book-online/time-selection/:serviceId',
             element: <TimeSlotListRoute />,
-            loader: timeSlotListLoader,
           },
           {
-            path: '/bookings/:serviceId/booking-form',
+            path: '/book-online/booking-form',
             element: <BookingFormRoute />,
-            loader: bookingFormLoader,
           },
         ],
       },
@@ -3079,7 +3105,6 @@ var getRouterFileContent = () => {
   export default function ReactRouterApp() {
     return <RouterProvider router={router} />;
   }
-
 `;
 };
 var getBookingsCodingInstructions = () => dedent_default`
@@ -3098,10 +3123,11 @@ ${getRouterFileContent()}
 \`\`\`
 
 it includes the following routes:
- - /bookings - a service list page displaying all available booking services (uses ServiceList component via ServiceListWrapper)
- - /bookings/:serviceId - a service details page for a specific booking service (uses Service, TimeSlotList, and BookingForm components via ServiceDetails)
- - /bookings/:serviceId/time-slots - a dedicated time slot selection page (uses TimeSlotList component via TimeSlotListPage)
- - /bookings/:serviceId/booking-form - a dedicated booking form page (uses BookingForm component via BookingFormPage)
+ - /book-online - a service list page displaying all available booking services (uses ServiceList component via ServiceListWrapper)
+ - /book-online/service/:serviceId - a service details page for a specific booking service (uses Service, TimeSlotList, and BookingForm components via ServiceDetails)
+ - /book-online/locations - a location selection page (uses Service.Locations and Location components via LocationSelectorPage)
+ - /book-online/time-selection/:serviceId - a dedicated time slot selection page (uses TimeSlotList component via TimeSlotListPage)
+ - /book-online/booking-form - a dedicated booking form page (uses BookingForm component via BookingFormPage)
 
 The routes in the example router file are wrapped with:
 
@@ -3130,32 +3156,51 @@ ${getBookingsProviderLayout()}
 
 # Available Bookings Components
 
-The bookings system provides the following components from \`@wix/headless-bookings/react\`:
+The bookings system provides the following components from \`@wix/bookings/components\`:
 
 1. **ServiceList** - Used for displaying a list of booking services
    - Import: \`import { ServiceList } from '@wix/bookings/components';\`
-   - Used in: Service list page (\`/bookings\` route) via \`ServiceListWrapper\`
+   - Used in: Service list page (\`/book-online\` route) via \`ServiceListWrapper\`
    - Pattern: \`<ServiceList.Root>\` → \`<ServiceList.Services>\` → \`<ServiceList.ServiceRepeater>\`
    - Example: \`<ServiceList.Root serviceListConfig={config}>\` with \`<ServiceList.ServiceRepeater>\` containing \`<Service.Name>\`, \`<Service.Description>\`, \`<Service.Price>\`
 
 2. **Service** - Used for displaying individual service details
-   - Import: \`import { Service } from '@wix/headless-bookings/react';\`
-   - Used in: Service details page (\`/bookings/:serviceId\` route) via \`ServiceDetails\`
+   - Import: \`import { Service } from '@wix/bookings/components';\`
+   - Used in: Service details page (\`/book-online/service/:serviceId\` route) via \`ServiceDetails\`
    - Pattern: \`<Service.Root service={service}>\` wrapping service components
-   - Example: \`<Service.Name>\`, \`<Service.Description>\`, \`<Service.Price>\`, \`<Service.Raw>\`
+   - Example: \`<Service.Name>\`, \`<Service.Description>\`, \`<Service.Price>\`, \`<Service.Raw>\`, \`<Service.Locations>\`
 
 3. **TimeSlotList** - Used for displaying and selecting available time slots for booking
-   - Import: \`import { TimeSlotList } from '@wix/headless-bookings/react';\`
+   - Import: \`import { TimeSlotList } from '@wix/bookings/components';\`
    - Used in: Service details page for time slot selection
    - Pattern: \`<TimeSlotList.Root config={config}>\` → \`<TimeSlotList.TimeSlots>\` → \`<TimeSlotList.TimeSlotRepeater>\`
    - Example: \`<TimeSlotList.TimeSlot.StartDate>\`, \`<TimeSlotList.TimeSlot.Actions.Select>\`
 
-4. **BookingForm** - Used for the booking form to complete a reservation
-   - Import: \`import { BookingForm } from '@wix/headless-bookings/react';\`
+4. **Location** - Used for displaying and selecting booking locations
+   - Import: \`import { Location } from '@wix/bookings/components';\`
+   - Used in: Location selector page (\`/book-online/locations\` route) via \`LocationSelectorPage\`
+   - Pattern: Used within \`<Service.Locations>\` → \`<Service.Locations.List>\` → \`<Service.Locations.LocationRepeater>\`
+   - Example: \`<Location.Name>\`, \`<Location.Address>\`, \`<Location.Phone>\`, \`<Location.Email>\`, \`<Location.Actions.Select>\`
+   - Note: Location components are used within Service.Locations.LocationRepeater, which automatically provides location context
+
+5. **BookingForm** - Used for the booking form to complete a reservation
+   - Import: \`import { BookingForm } from '@wix/bookings/components';\`
    - Used in: Service details page for completing bookings
    - Pattern: \`<BookingForm.Root formId={formId}>\` with automatic form rendering
    - Example: \`<BookingForm.Root formId="form-id" />\` - renders form fields automatically
 
+## The flow
+
+The flow of the bookings system is as follows:
+1. The user clicks the book now button
+2. If the user has multiple locations, the user selects a location
+3. The user selects a service
+4. The user selects the staff member
+5. The user selects a time slot
+6. The user fills out the booking form
+7. The user confirms the booking
+8. The user is redirected to the checkout page
+
 <important_component_notes>
 <strong>ALL BOOKINGS COMPONENTS ARE ALREADY IMPLEMENTED IN SIMPLIFIED FORM FOLLOWING HEADLESS-COMPONENTS PATTERNS.</strong>
 <strong>DO NOT REIMPLEMENT THESE COMPONENTS - USE THE EXISTING BOOKINGS COMPONENTS AS PROVIDED.</strong>
@@ -3171,9 +3216,10 @@ The bookings system provides the following components from \`@wix/headless-booki
 IF AND ONLY IF THE USER ASKS FOR A NON ENGLISH LANGUAGE, YOU MUST TRANSLATE THE FOLLOWING COMPONENTS:
 
 \`\`\`bash
-src/components/bookings/
+src/components/bookings/pages/
 ├── ServiceListPage.tsx
-├── ServiceDetails.tsx
+├── ServicePage.tsx
+├── LocationSelectorPage.tsx
 ├── TimeSlotListPage.tsx
 └── BookingFormPage.tsx
 \`\`\`
@@ -3185,12 +3231,13 @@ IF THE SITE IS IN ENGLISH OR THE LANGUAGE IS NOT SPECIFIED, YOU MUST NOT READ OR
 # THIRD TASK: CODE THE REST OF THE SITE PAGES
 
 <important_notes>
+<strong>IT IS OF UTMOST IMPORTANCE THAT THE BOOKINGS PROVIDER IS INTEGRATED INTO THE SITE LAYOUT.</strong>
 <strong>ALL BOOKINGS FEATURES ARE ALREADY IMPLEMENTED BY THE BOOKINGS ROUTES, THEY DO NOT INCLUDE HEADER FOOTER OR ANY OTHER LAYOUT COMPONENTS.</strong>
 <strong>THE REST OF THE SITE PAGES SHOULD BE IMPLEMENTED AS USUAL ACCORDING TO THE PLAN AND USER REQUESTS, FOLLOWING THE OTHER INSTRUCTIONS IN THE CONTEXT.</strong>
 <strong>NEVER IMPLEMENT CMS-BASED PAGES LIKE "GALLERY" OR "GALLERY ITEM" OR ANY OTHER CMS BASED PAGES FOR BOOKINGS FEATURES LIKE SERVICES OR ANY OTHER BOOKING FEATURES - ONLY USE THE BOOKINGS ROUTES AND SERVICES TO IMPLEMENT THE BOOKINGS FEATURES !!!</strong>
 <strong>DO NOT IMPLEMENT A "FEATURED SERVICES" OR "FEATURED BOOKINGS" SECTIONS OR PAGES OR TRY TO LINK TO SPECIFIC SERVICES IN ANY PAGE - BECAUSE YOU DO NOT KNOW THE URL FOR THE SERVICES - JUST LINK TO THE BOOKINGS PAGE.</strong>
 <strong>DO NOT USE MOCK DATA FOR SERVICES OR ANY OTHER DATA IN THE HOME PAGE OR ANY OTHER PAGE. ALWAYS LINK TO THE BOOKINGS PAGE.</strong>
-<strong>DO NOT TRY TO GUESS <code>bookings/:serviceId</code> ROUTES, ONLY INCLUDE A MENU ITEM TO THE BOOKINGS PAGE <code>/bookings</code>.</strong>
+<strong>DO NOT TRY TO GUESS <code>book-online/service/:serviceId</code> OR OTHER BOOKING ROUTES, ONLY INCLUDE A MENU ITEM TO THE BOOKINGS PAGE <code>/book-online</code>.</strong>
 <strong>DO NOT IMPLEMENT BOOKINGS SEARCH YOURSELF - NO BOOKINGS SEARCH BAR OR ANY OTHER BOOKINGS SEARCH FEATURES</strong>
 <strong>DO NOT EDIT or READ ANY FILE in <code>./src/wix-verticals/</code> USE EVERYTHING AS IS, ONLY INTEGRATE THE ROUTER!! with the exception of non-english sites, in this case, you are allowed to change the static text to match the new language.</strong>
 </important_notes>
@@ -9731,7 +9778,7 @@ var onServiceCreated2 = createEventModule(onServiceCreated);
 var onServiceDeleted2 = createEventModule(onServiceDeleted);
 var onServiceUpdated2 = createEventModule(onServiceUpdated);
 
-// ../../../node_modules/@wix/auto_sdk_bookings_staff-members/build/es/index.mjs
+// node_modules/@wix/auto_sdk_bookings_staff-members/build/es/index.mjs
 var es_exports2 = {};
 __export(es_exports2, {
   AggregationType: () => AggregationType2,