@wix/vibe-bookings-plugin 0.16.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,124 +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/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="/book-online/service" />;
-  }
-
-  // Service details route component
-  function ServiceDetailsRoute() {
-    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
-    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
-  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} />;
-  }
-
-  // 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 loadServiceListServiceInitialData({});
-    return { servicesListConfig };
-  }
-
-  // Loader for time slot list route
-  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 using params.serviceId */};
-    return { timeSlotListConfig };
-  }
-
-  // Loader for booking form route
-  async function bookingFormLoader() {
-    // 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 };
-  }
+  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="/book-online" />,
+        element: <Navigate to="/booking/locations" />,
       },
       {
+        path: '/booking',
         element: (
           <WixServicesProvider>
-            <Outlet />
+            <Booking.Root bookingServiceConfig={{}}>
+              <Outlet />
+            </Booking.Root>
           </WixServicesProvider>
         ),
-        loader: rootRouteLoader,
         children: [
           {
-            path: '/book-online',
-            element: <ServiceListRoute />,
-          },
-          {
-            path: '/book-online/locations',
-            element: <LocationSelectorRoute />,
+            path: 'locations',
+            element: <LocationSelectorPageRoute servicesPagePath="/booking/services" />,
           },
           {
-            path: '/book-online/service/:serviceId',
-            element: <ServiceDetailsRoute />,
+            path: 'services',
+            element: <ServiceListPageRoute slotsPagePath="/booking/slots" />,
+            loader: serviceListPageRouteLoader,
           },
           {
-            path: '/book-online/time-selection/:serviceId',
-            element: <TimeSlotListRoute />,
+            path: 'slots/:serviceSlug',
+            element: <TimeSlotListPageRoute formPagePath="/booking/form" />,
           },
           {
-            path: '/book-online/booking-form',
-            element: <BookingFormRoute />,
+            path: 'form',
+            element: <BookingFormPageRoute />,
           },
         ],
       },
@@ -3116,42 +3030,38 @@ 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:
- - /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)
+ - /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
@@ -3160,53 +3070,45 @@ The bookings system provides the following components from \`@wix/bookings/compo
 
 1. **ServiceList** - Used for displaying a list of booking services
    - Import: \`import { ServiceList } from '@wix/bookings/components';\`
-   - Used in: Service list page (\`/book-online\` 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/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>\`, \`<Service.Locations>\`
-
-3. **TimeSlotList** - Used for displaying and selecting available time slots for booking
+2. **TimeSlotList** - Used for displaying and selecting available time slots for booking
    - Import: \`import { TimeSlotList } from '@wix/bookings/components';\`
-   - Used in: Service details page for time slot selection
+   - 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>\`
 
-4. **Location** - Used for displaying and selecting booking locations
+3. **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>\`
+   - 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 Service.Locations.LocationRepeater, which automatically provides location context
+   - Note: Location components are used within Booking.Locations.LocationRepeater, which automatically provides location context
 
-5. **BookingForm** - Used for the booking form to complete a reservation
+4. **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
+   - 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 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
+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>
 
@@ -3218,7 +3120,6 @@ IF AND ONLY IF THE USER ASKS FOR A NON ENGLISH LANGUAGE, YOU MUST TRANSLATE THE
 \`\`\`bash
 src/components/bookings/pages/
 ├── ServiceListPage.tsx
-├── ServicePage.tsx
 ├── LocationSelectorPage.tsx
 ├── TimeSlotListPage.tsx
 └── BookingFormPage.tsx
@@ -3237,7 +3138,7 @@ IF THE SITE IS IN ENGLISH OR THE LANGUAGE IS NOT SPECIFIED, YOU MUST NOT READ OR
 <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>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 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>