@wix/vibe-bookings-plugin 0.15.0 → 0.17.0

package/dist/index.cjs

@@ -2949,22 +2949,6 @@ function createDedent(options) {
 }
 
 // src/services/instructions.service.ts
-var getBookingsProviderLayout = () => {
-  return dedent_default`
-  import { Booking } from '@wix/bookings/components';
-
-  const config = {
-    // your bookings service config
-  };
-  
-  export const BookingsProviderLayout = ({ children }: { children: React.ReactNode }) => {
-    return (
-      <Booking.Root bookingServiceConfig={config}>
-        {children}
-      </Booking.Root>
-    );
-  };`;
-};
 var getRouterFileContent = () => {
   return dedent_default`
   import {
@@ -2975,98 +2959,54 @@ var getRouterFileContent = () => {
   } from 'react-router-dom';
 
   // 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 { loadServiceListServiceInitialData } from '@wix/bookings/services';
-  import { useLoaderData, useParams } from 'react-router-dom';
-
-  // Service list route component
-  function ServiceListRoute() {
-    const { servicesListConfig } = useLoaderData<typeof serviceListLoader>();
-    return <ServiceListWrapper servicesListConfig={servicesListConfig} servicePageRoute="/bookings" />;
-  }
-
-  // Service details route component
-  function ServiceDetailsRoute() {
-    const { serviceId } = useParams<{ 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 */}
-    />;
-  }
-
-  // Time slot list route component
-  function TimeSlotListRoute() {
-    const { timeSlotListConfig } = useLoaderData<typeof timeSlotListLoader>();
-    return <TimeSlotListPage config={timeSlotListConfig} />;
-  }
-
-  // Booking form route component
-  function BookingFormRoute() {
-    const { formId, additionalMetadata } = useLoaderData<typeof bookingFormLoader>();
-    return <BookingFormPage formId={formId} additionalMetadata={additionalMetadata} />;
-  }
-
-  // Loader for service list route
-  async function serviceListLoader() {
-    const servicesListConfig = await loadServiceListServiceInitialData({});
-    return { servicesListConfig };
-  }
-
-  // Loader for time slot list route
-  async function timeSlotListLoader() {
-    // Note: Load time slot list config based on service or other criteria
-    const timeSlotListConfig = {/* load time slot list config */};
-    return { timeSlotListConfig };
-  }
-
-  // Loader for booking form route
-  async function bookingFormLoader() {
-    // Note: Get form ID from route params or config
-    const formId = {/* get form ID */};
-    const additionalMetadata = {/* optional: additional metadata */};
-    return { formId, additionalMetadata };
-  }
+  import {
+    ServiceListPageRoute,
+    serviceListPageRouteLoader,
+  } from './bookings/routes/service-list-route';
+  import {
+    TimeSlotListPageRoute,
+  } from './bookings/routes/time-slot-list-route';
+  import {
+    BookingFormPageRoute,
+  } from './bookings/routes/booking-form-route';
+  import {
+    LocationSelectorPageRoute,
+  } from './bookings/routes/location-selector-route';
+  import { Booking } from '@wix/bookings/components';
+  import { WixServicesProvider } from '@/wix-verticals/react-pages/react-router/routes/root';
 
   const router = createBrowserRouter(
     [
       {
         path: '/',
-        element: <Navigate to="/bookings" />,
+        element: <Navigate to="/booking/locations" />,
       },
       {
+        path: '/booking',
         element: (
           <WixServicesProvider>
-            <Outlet />
+            <Booking.Root bookingServiceConfig={{}}>
+              <Outlet />
+            </Booking.Root>
           </WixServicesProvider>
         ),
-        loader: rootRouteLoader,
         children: [
           {
-            path: '/bookings',
-            element: <ServiceListRoute />,
-            loader: serviceListLoader,
+            path: 'locations',
+            element: <LocationSelectorPageRoute servicesPagePath="/booking/services" />,
           },
           {
-            path: '/bookings/:serviceId',
-            element: <ServiceDetailsRoute />,
+            path: 'services',
+            element: <ServiceListPageRoute slotsPagePath="/booking/slots" />,
+            loader: serviceListPageRouteLoader,
           },
           {
-            path: '/bookings/:serviceId/time-slots',
-            element: <TimeSlotListRoute />,
-            loader: timeSlotListLoader,
+            path: 'slots/:serviceSlug',
+            element: <TimeSlotListPageRoute formPagePath="/booking/form" />,
           },
           {
-            path: '/bookings/:serviceId/booking-form',
-            element: <BookingFormRoute />,
-            loader: bookingFormLoader,
+            path: 'form',
+            element: <BookingFormPageRoute />,
           },
         ],
       },
@@ -3079,7 +3019,6 @@ var getRouterFileContent = () => {
   export default function ReactRouterApp() {
     return <RouterProvider router={router} />;
   }
-
 `;
 };
 var getBookingsCodingInstructions = () => dedent_default`
@@ -3091,77 +3030,85 @@ Your tasks for implementing and integrating the Bookings features of the site ar
 
 Integrate the bookings routes into the existing router of the app. There is an example router file. You should not import it directly, but rather use the content of the file as reference for how to implement the router in the app.
 
-## Example Bookings Router File
-
-\`\`\`tsx
-${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)
+ - /booking/locations - a location selection page for choosing the business location (uses Booking.Locations and Location components via LocationSelectorPageRoute)
+ - /booking/services - a service list page displaying all available booking services (uses ServiceList component via ServiceListPageRoute)
+ - /booking/slots/:serviceSlug - a dedicated time slot selection page (uses TimeSlotList component via TimeSlotListPageRoute)
+ - /booking/form - a dedicated booking form page (uses BookingForm component via BookingFormPageRoute)
 
 The routes in the example router file are wrapped with:
 
 \`\`\`tsx
 <WixServicesProvider>
-  ...
-  <Outlet />
+  <Booking.Root bookingServiceConfig={{}}>
+    ...
+    <Outlet />
+  </Booking.Root>
 </WixServicesProvider>
 \`\`\`\
 
 <important_router_notes>
 <strong>MAKE SURE TO WRAP ALL THE ROUTES WITH THE PROVIDERS IN THE ABOVE EXAMPLE ROUTER</strong>
-<strong>WRAP THE MAIN LAYOUT WITH <code><WixServicesProvider>...</WixServicesProvider></code> not only the bookings routes.</strong>
-- Use <code><WixServicesProvider></code> only in the top level router and only once, the same component tree should not include more than one <code><WixServicesProvider></code>.
+<strong>WRAP THE MAIN LAYOUT WITH <code><WixServicesProvider></code> and <code><Booking.Root></code> not only the bookings routes.</strong>
+- Use <code><Booking.Root></code> only in the top level router and only once, the same component tree should not include more than one <code><Booking.Root></code>.
 <strong>ALWAYS IMPLEMENT THE LAYOUT COMPONENTS OF THE SITE, AS A LAYOUT FOR THE SITE, AND WRAP ALL THE ROUTES WITH THAT LAYOUT (INCLUDING THE BOOKINGS ROUTES).</strong>
 </important_router_notes>
 
-The booking components already include proper padding and layout. The \`ServiceListWrapper\` component accepts a \`title\` prop for the page title, and \`ServiceDetails\` includes proper spacing and layout internally.
+The booking components already include proper padding and layout. The \`ServiceListWrapper\` component accepts a \`title\` prop for the page title.
 
 # Layout changes
 The bookings system provides a provider that must be integrated into the site layout.
 
 \`\`\`tsx
-${getBookingsProviderLayout()}
+${getRouterFileContent()}
 \`\`\`
 
 # 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 (\`/booking/services\` route) via \`ServiceListPageRoute\`
    - 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\`
-   - Pattern: \`<Service.Root service={service}>\` wrapping service components
-   - Example: \`<Service.Name>\`, \`<Service.Description>\`, \`<Service.Price>\`, \`<Service.Raw>\`
-
-3. **TimeSlotList** - Used for displaying and selecting available time slots for booking
-   - Import: \`import { TimeSlotList } from '@wix/headless-bookings/react';\`
-   - Used in: Service details page for time slot selection
+2. **TimeSlotList** - Used for displaying and selecting available time slots for booking
+   - Import: \`import { TimeSlotList } from '@wix/bookings/components';\`
+   - Used in: Time selection page (\`/booking/slots/:serviceSlug\` route) via \`TimeSlotListPageRoute\`
    - Pattern: \`<TimeSlotList.Root config={config}>\` → \`<TimeSlotList.TimeSlots>\` → \`<TimeSlotList.TimeSlotRepeater>\`
    - Example: \`<TimeSlotList.TimeSlot.StartDate>\`, \`<TimeSlotList.TimeSlot.Actions.Select>\`
 
+3. **Location** - Used for displaying and selecting booking locations
+   - Import: \`import { Location } from '@wix/bookings/components';\`
+   - Used in: Location selector page (\`/booking/locations\` route) via \`LocationSelectorPageRoute\`
+   - Pattern: Used within \`<Booking.Locations>\` → \`<Booking.Locations.List>\` → \`<Booking.Locations.LocationRepeater>\`
+   - Example: \`<Location.Name>\`, \`<Location.Address>\`, \`<Location.Phone>\`, \`<Location.Email>\`, \`<Location.Actions.Select>\`
+   - Note: Location components are used within Booking.Locations.LocationRepeater, which automatically provides location context
+
 4. **BookingForm** - Used for the booking form to complete a reservation
-   - Import: \`import { BookingForm } from '@wix/headless-bookings/react';\`
-   - Used in: Service details page for completing bookings
+   - Import: \`import { BookingForm } from '@wix/bookings/components';\`
+   - Used in: Booking form page (\`/booking/form\` route) via \`BookingFormPageRoute\`
    - 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 visits the location selection page (\`/booking/locations\`) and selects a business location.
+2. The user is navigated to the service list page (\`/booking/services?locationId={id}\`) and clicks "Book" on a service.
+3. The user is navigated to the time selection page (\`/booking/slots/:serviceSlug\`).
+4. The user selects a time slot and is navigated to the booking form (\`/booking/form\`).
+5. The user fills out the form and confirms the booking.
+6. The user is redirected to the checkout/confirmation.
+
 <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>
 <strong>The components follow the 3-level pattern: Container → List → Repeater for list-based components.</strong>
-<strong>ServiceListWrapper uses ServiceList.Root → ServiceList.Services → ServiceList.ServiceRepeater pattern.</strong>
-<strong>ServiceDetails combines Service.Root, TimeSlotList.Root, and BookingForm.Root for the complete booking flow.</strong>
+<strong>ServiceListPageRoute uses ServiceList.Root → ServiceList.Services → ServiceList.ServiceRepeater pattern via ServiceListWrapper.</strong>
+<strong>TimeSlotListPageRoute uses TimeSlotList.Root → TimeSlotList.TimeSlots → TimeSlotList.TimeSlotRepeater pattern.</strong>
 <strong>All components use semantic color/font classes from the design system (bg-background, text-foreground, font-heading, font-paragraph).</strong>
 </important_component_notes>
 
@@ -3171,9 +3118,9 @@ 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
+├── LocationSelectorPage.tsx
 ├── TimeSlotListPage.tsx
 └── BookingFormPage.tsx
 \`\`\`
@@ -3185,12 +3132,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>booking/slots/:serviceSlug</code> OR OTHER BOOKING ROUTES, ONLY INCLUDE A MENU ITEM TO THE BOOKINGS PAGE <code>/booking/locations</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 +9679,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,