astro-tractstack 2.3.2 → 2.3.3

package/bin/create-tractstack.js

@@ -154,7 +154,7 @@ ${kleur.bold('Examples:')}
     console.log(kleur.red("❌ This doesn't appear to be an Astro project."));
     console.log('Please run this command in the root of your Astro project.\n');
     console.log('To create a new Astro project with TractStack:');
-    console.log(kleur.cyan('pnpm create astro@latest my-tractstack-site'));
+    console.log(kleur.cyan('pnpm create astro@5 my-tractstack-site'));
     console.log(kleur.cyan('cd my-tractstack-site'));
     console.log(kleur.cyan('npx create-tractstack'));
     process.exit(1);
@@ -332,7 +332,7 @@ PUBLIC_ENABLE_BUNNY="${finalResponses.enableBunny ? 'true' : 'false'}"
   try {
     // Install React and Node adapter
     execSync(
-      `${addCommand} react@^19.0.0 react-dom@^19.0.0 @astrojs/react@^4.4.2 @astrojs/node@^9.4.3`,
+      `${addCommand} react@^19.0.0 react-dom@^19.0.0 astro@^5.16.6 @astrojs/react@^4.4.2 @astrojs/node@^9.4.3`,
       { stdio: 'inherit' }
     );
     console.log(kleur.green('✅ React and Node adapter installed'));
@@ -382,7 +382,7 @@ PUBLIC_ENABLE_BUNNY="${finalResponses.enableBunny ? 'true' : 'false'}"
     console.log('Please run manually:');
     console.log(
       kleur.cyan(
-        `${addCommand} react@^19.0.0 react-dom@^19.0.0 @astrojs/react@^4.4.2 @astrojs/node@^9.4.3 @nanostores/react@^1.0.0 nanostores@^1.0.1 @nanostores/persistent ulid@^3.0.1 @ark-ui/react@^5.30.0 @heroicons/react@^2.1.1 @internationalized/date@3.10.0 d3@^7.9.0 d3-sankey@^0.12.3 recharts@^3.1.2 player.js@^0.1.0 tinycolor2@1.6.0 html-to-image@^1.11.13 path-to-regexp@^8.0.0 postcss postcss-selector-parser`
+        `${addCommand} react@^19.0.0 react-dom@^19.0.0 astro@^5.16.6 @astrojs/react@^4.4.2 @astrojs/node@^9.4.3 @nanostores/react@^1.0.0 nanostores@^1.0.1 @nanostores/persistent ulid@^3.0.1 @ark-ui/react@^5.30.0 @heroicons/react@^2.1.1 @internationalized/date@3.10.0 d3@^7.9.0 d3-sankey@^0.12.3 recharts@^3.1.2 player.js@^0.1.0 tinycolor2@1.6.0 html-to-image@^1.11.13 path-to-regexp@^8.0.0 postcss postcss-selector-parser`
       )
     );
     console.log(

package/dist/index.js

@@ -2,13 +2,13 @@ import { fileURLToPath as d } from "node:url";
 import { dirname as i, resolve as l } from "node:path";
 import { existsSync as n, mkdirSync as x, copyFileSync as k, writeFileSync as u } from "node:fs";
 import { resolve as a } from "path";
-function b(t) {
+function g(t) {
   const e = i(d(t));
   return {
     resolve: (...c) => l(e, ...c)
   };
 }
-function g(t, e) {
+function b(t, e) {
   e.info("TractStack configuration applied"), t.enableMultiTenant && e.info("Multi-tenant mode enabled"), t.includeExamples && e.info("Example components will be included");
   const c = process.env.PUBLIC_GO_BACKEND, o = process.env.PUBLIC_TENANTID;
   if (!c)
@@ -747,10 +747,6 @@ async function y(t, e, c) {
       src: t("../templates/src/utils/actions/preParse_Action.ts"),
       dest: "src/utils/actions/preParse_Action.ts"
     },
-    {
-      src: t("../templates/src/utils/actions/preParse_Clicked.ts"),
-      dest: "src/utils/actions/preParse_Clicked.ts"
-    },
     {
       src: t("../templates/src/utils/actions/preParse_Impression.ts"),
       dest: "src/utils/actions/preParse_Impression.ts"
@@ -891,6 +887,14 @@ async function y(t, e, c) {
       src: t("../templates/custom/shopify/cart.astro"),
       dest: "src/pages/cart.astro"
     },
+    {
+      src: t("../templates/src/pages/privacy.astro"),
+      dest: "src/pages/privacy.astro"
+    },
+    {
+      src: t("../templates/src/pages/terms.astro"),
+      dest: "src/pages/terms.astro"
+    },
     {
       src: t("../templates/src/pages/404.astro"),
       dest: "src/pages/404.astro"
@@ -989,6 +993,22 @@ async function y(t, e, c) {
       src: t("../templates/src/pages/api/auth/logout.ts"),
       dest: "src/pages/api/auth/logout.ts"
     },
+    {
+      src: t("../templates/src/pages/api/google/oauth/start.ts"),
+      dest: "src/pages/api/google/oauth/start.ts"
+    },
+    {
+      src: t("../templates/src/pages/api/google/oauth/status.ts"),
+      dest: "src/pages/api/google/oauth/status.ts"
+    },
+    {
+      src: t("../templates/src/pages/api/google/oauth/disconnect.ts"),
+      dest: "src/pages/api/google/oauth/disconnect.ts"
+    },
+    {
+      src: t("../templates/src/pages/api/google/oauth/callback.ts"),
+      dest: "src/pages/api/google/oauth/callback.ts"
+    },
     {
       src: t("../templates/src/pages/api/orphan-analysis.ts"),
       dest: "src/pages/api/orphan-analysis.ts"
@@ -2307,6 +2327,11 @@ async function y(t, e, c) {
       dest: "src/utils/customHelpers.ts",
       protected: !0
     },
+    {
+      src: t("../templates/src/utils/booking/appointmentMode.ts"),
+      dest: "src/utils/booking/appointmentMode.ts",
+      protected: !0
+    },
     {
       src: t("../templates/custom/shopify/ShopifyProductGrid.tsx"),
       dest: "src/custom/shopify/ShopifyProductGrid.tsx",
@@ -2426,12 +2451,12 @@ export default function Placeholder() {
 export const placeholder = "${t}";` : `# TractStack placeholder: ${t}`;
 }
 function P(t = {}) {
-  const { resolve: e } = b(import.meta.url);
+  const { resolve: e } = g(import.meta.url);
   return {
     name: "astro-tractstack",
     hooks: {
       "astro:config:setup": async ({ config: c, updateConfig: o, logger: s }) => {
-        g(t, s);
+        b(t, s);
         const p = t.enableMultiTenant || !1;
         if (s.info(
           `DEBUG: enableMultiTenant = ${p}, process.env.PUBLIC_ENABLE_MULTI_TENANT = ${process.env.PUBLIC_ENABLE_MULTI_TENANT}`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "Astro integration for TractStack - the free web press by At Risk Media",
   "type": "module",
   "main": "dist/index.js",

package/templates/custom/shopify/Cart.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { ulid } from 'ulid';
 import { useStore } from '@nanostores/react';
 import {
@@ -7,14 +7,18 @@ import {
   cartState,
   CART_STATES,
   isShopifyHandoff,
+  preferredAppointmentMode,
   transactionTraceId,
   type CartItemState,
 } from '@/stores/shopify';
 import { getShopifyImage } from '@/utils/helpers';
+import { deriveAppointmentConstraints } from '@/utils/booking/appointmentMode';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface CartProps {
   resources: ResourceNode[];
+  allowRemote?: boolean;
+  remoteOnly?: boolean;
 }
 
 const getCleanVariantTitle = (variant: any) => {
@@ -34,9 +38,14 @@ const getCleanVariantTitle = (variant: any) => {
   return title === 'Default Title' ? '' : title;
 };
 
-export default function Cart({ resources = [] }: CartProps) {
+export default function Cart({
+  resources = [],
+  allowRemote = false,
+  remoteOnly = false,
+}: CartProps) {
   const cart = useStore(cartStore);
   const isHandoff = useStore(isShopifyHandoff);
+  const appointmentMode = useStore(preferredAppointmentMode);
   const [pickupEnabled, setPickupEnabled] = useState(false);
 
   const cartValues = Object.values(cart);
@@ -67,12 +76,34 @@ export default function Cart({ resources = [] }: CartProps) {
     return !!resource?.optionsPayload?.bookingLengthMinutes;
   });
 
+  const appointmentConstraints = useMemo(
+    () =>
+      deriveAppointmentConstraints(cart, resources, {
+        allowRemote,
+        remoteOnly,
+      }),
+    [cart, resources, allowRemote, remoteOnly]
+  );
+  const { effectiveRemoteOnly, remoteAvailable, inPersonAvailable, canRemote } =
+    appointmentConstraints;
+
   const hasPhysicalProductWithPickup = cartValues.some(
     (item) =>
       item.variantIdPickup && item.variantIdPickup !== item.variantIdShipped
   );
 
-  const canPickup = hasService && hasPhysicalProductWithPickup;
+  const canPickup =
+    hasService && hasPhysicalProductWithPickup && appointmentMode !== 'REMOTE';
+
+  useEffect(() => {
+    if (effectiveRemoteOnly) {
+      preferredAppointmentMode.set('REMOTE');
+      return;
+    }
+    if (!canRemote && preferredAppointmentMode.get() === 'REMOTE') {
+      preferredAppointmentMode.set('IN_PERSON');
+    }
+  }, [effectiveRemoteOnly, canRemote]);
 
   useEffect(() => {
     if (canPickup) {
@@ -131,17 +162,55 @@ export default function Cart({ resources = [] }: CartProps) {
     <div className="rounded-lg bg-white shadow">
       <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4">
         <h2 className="text-xl font-bold text-gray-800">Shopping Cart</h2>
-        {canPickup && (
-          <label className="flex items-center space-x-2 text-sm font-bold text-gray-900">
-            <input
-              type="checkbox"
-              checked={pickupEnabled}
-              onChange={(e) => setPickupEnabled(e.target.checked)}
-              className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black"
-            />
-            <span>Pick up at Store</span>
-          </label>
-        )}
+        <div className="flex items-center gap-4">
+          {hasService && remoteAvailable && inPersonAvailable && (
+            <div className="flex flex-col items-end gap-1">
+              <p className="text-xs font-bold uppercase tracking-wide text-gray-500">
+                Appointment Mode
+              </p>
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  onClick={() => preferredAppointmentMode.set('IN_PERSON')}
+                  className={`rounded-md px-3 py-2 text-sm font-bold ${
+                    appointmentMode === 'IN_PERSON'
+                      ? 'bg-black text-white'
+                      : 'border border-gray-300 bg-white text-gray-700'
+                  }`}
+                >
+                  In Person
+                </button>
+                <button
+                  type="button"
+                  onClick={() => preferredAppointmentMode.set('REMOTE')}
+                  className={`rounded-md px-3 py-2 text-sm font-bold ${
+                    appointmentMode === 'REMOTE'
+                      ? 'bg-black text-white'
+                      : 'border border-gray-300 bg-white text-gray-700'
+                  }`}
+                >
+                  Remote
+                </button>
+              </div>
+            </div>
+          )}
+          {hasService && effectiveRemoteOnly && (
+            <p className="text-sm font-bold text-gray-900">
+              Appointment: Remote
+            </p>
+          )}
+          {canPickup && (
+            <label className="flex items-center space-x-2 text-sm font-bold text-gray-900">
+              <input
+                type="checkbox"
+                checked={pickupEnabled}
+                onChange={(e) => setPickupEnabled(e.target.checked)}
+                className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black"
+              />
+              <span>Pick up at Store</span>
+            </label>
+          )}
+        </div>
       </div>
 
       <ul className="divide-y divide-gray-200">

package/templates/custom/shopify/CheckoutModal.tsx

@@ -1,4 +1,11 @@
-import { useState, useEffect, useMemo, type FormEvent } from 'react';
+import {
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+  useCallback,
+  type FormEvent,
+} from 'react';
 import { ulid } from 'ulid';
 import { useStore } from '@nanostores/react';
 import { Dialog } from '@ark-ui/react/dialog';
@@ -9,10 +16,15 @@ import {
   customerDetails,
   setCustomerDetails,
   CART_STATES,
+  preferredAppointmentMode,
   transactionTraceId,
   isShopifyHandoff,
 } from '@/stores/shopify';
 import { bookingHelpers } from '@/utils/api/bookingHelpers';
+import {
+  deriveAppointmentConstraints,
+  pickInitialAppointmentMode,
+} from '@/utils/booking/appointmentMode';
 import { NativeBookingCalendar } from './NativeBookingCalendar';
 import { ProfileStorage } from '@/utils/profileStorage';
 import type { ResourceNode } from '@/types/compositorTypes';
@@ -24,14 +36,19 @@ type CheckoutState =
   | 'SUMMARY'
   | 'PROCESSING'
   | 'SUCCESS';
+type AppointmentMode = 'IN_PERSON' | 'REMOTE';
 
 interface CheckoutModalProps {
   maxLength: number;
+  allowRemote?: boolean;
+  remoteOnly?: boolean;
   resources?: ResourceNode[];
 }
 
 export default function CheckoutModal({
   maxLength,
+  allowRemote = false,
+  remoteOnly = false,
   resources = [],
 }: CheckoutModalProps) {
   const $globalCartState = useStore(cartState);
@@ -57,6 +74,24 @@ export default function CheckoutModal({
     start: Date;
     end: Date;
   } | null>(null);
+  const [appointmentMode, setAppointmentMode] = useState<AppointmentMode>(() =>
+    pickInitialAppointmentMode(
+      deriveAppointmentConstraints(cartStore.get(), resources, {
+        allowRemote,
+        remoteOnly,
+      }),
+      preferredAppointmentMode.get()
+    )
+  );
+  const appointmentModeRef = useRef<AppointmentMode>(
+    pickInitialAppointmentMode(
+      deriveAppointmentConstraints(cartStore.get(), resources, {
+        allowRemote,
+        remoteOnly,
+      }),
+      preferredAppointmentMode.get()
+    )
+  );
   const [error, setError] = useState<string | null>(null);
 
   const isOpen =
@@ -82,6 +117,7 @@ export default function CheckoutModal({
         ...item,
         title: productData?.title || resource?.title || 'Loading...',
         price: variant?.price?.amount || '0.00',
+        resourceNode: resource,
         resource: {
           id: item.resourceId,
           needsBooking:
@@ -111,6 +147,51 @@ export default function CheckoutModal({
     return Math.min(Math.ceil(rawMinutes / 15) * 15, maxLength);
   }, [enrichedCart]);
 
+  const appointmentConstraints = useMemo(
+    () =>
+      deriveAppointmentConstraints($cartItems, resources, {
+        allowRemote,
+        remoteOnly,
+      }),
+    [$cartItems, resources, allowRemote, remoteOnly]
+  );
+
+  const { effectiveRemoteOnly, inPersonAvailable } = appointmentConstraints;
+
+  const remoteAvailable =
+    appointmentConstraints.effectiveRemoteOnly ||
+    (needsBooking &&
+      appointmentConstraints.effectiveAllowRemote &&
+      appointmentConstraints.serviceResources.length > 0 &&
+      appointmentConstraints.allServicesAllowRemote);
+
+  const applyAppointmentMode = useCallback((nextMode: AppointmentMode) => {
+    appointmentModeRef.current = nextMode;
+    setAppointmentMode((currentMode) =>
+      currentMode === nextMode ? currentMode : nextMode
+    );
+    preferredAppointmentMode.set(nextMode);
+  }, []);
+
+  useEffect(() => {
+    if (selectedSlot) {
+      return;
+    }
+    if (effectiveRemoteOnly) {
+      applyAppointmentMode('REMOTE');
+      return;
+    }
+    if (!remoteAvailable && appointmentMode === 'REMOTE') {
+      applyAppointmentMode('IN_PERSON');
+    }
+  }, [
+    effectiveRemoteOnly,
+    remoteAvailable,
+    appointmentMode,
+    selectedSlot,
+    applyAppointmentMode,
+  ]);
+
   useEffect(() => {
     const profile = ProfileStorage.getProfileData();
     if (ProfileStorage.isProfileUnlocked() && profile.email) {
@@ -146,6 +227,36 @@ export default function CheckoutModal({
     }
   }, [$globalCartState, needsBooking, $customer.leadId, internalState]);
 
+  useEffect(() => {
+    if (!isOpen || selectedSlot) {
+      return;
+    }
+
+    if (
+      internalState !== 'IDENTITY_EMAIL' &&
+      internalState !== 'IDENTITY_NEW_USER'
+    ) {
+      return;
+    }
+
+    if (effectiveRemoteOnly) {
+      applyAppointmentMode('REMOTE');
+      return;
+    }
+
+    const next = pickInitialAppointmentMode(
+      appointmentConstraints,
+      preferredAppointmentMode.get()
+    );
+    applyAppointmentMode(next);
+  }, [
+    isOpen,
+    selectedSlot,
+    internalState,
+    appointmentConstraints,
+    applyAppointmentMode,
+  ]);
+
   const handleClose = async () => {
     const redirect = internalState === 'SUCCESS';
     const currentTraceId = transactionTraceId.get();
@@ -249,7 +360,8 @@ export default function CheckoutModal({
         transactionTraceId.get(),
         start.toISOString(),
         end.toISOString(),
-        cartResourceIds
+        cartResourceIds,
+        appointmentModeRef.current
       );
       if (response && (response.success || response.status === 'PENDING')) {
         setInternalState('SUMMARY');
@@ -343,6 +455,13 @@ export default function CheckoutModal({
                             }
                           ),
                         },
+                        {
+                          key: 'Appointment Mode',
+                          value:
+                            appointmentMode === 'REMOTE'
+                              ? 'Remote'
+                              : 'In Person',
+                        },
                       ]
                     : []),
                 ],
@@ -462,13 +581,75 @@ export default function CheckoutModal({
                 </form>
               )}
               {internalState === 'BOOKING' && (
-                <NativeBookingCalendar
-                  totalDurationMinutes={totalDuration}
-                  onSlotSelected={handleSlotSelection}
-                />
+                <div className="space-y-6">
+                  {needsBooking && (inPersonAvailable || remoteAvailable) && (
+                    <div className="rounded-xl border border-gray-200 bg-white p-4">
+                      <p className="text-xs font-bold uppercase tracking-wide text-gray-500">
+                        Appointment Mode
+                      </p>
+                      <div className="mt-3 flex flex-wrap gap-2">
+                        {inPersonAvailable && (
+                          <button
+                            type="button"
+                            onClick={() => {
+                              applyAppointmentMode('IN_PERSON');
+                            }}
+                            className={`rounded-md px-3 py-2 text-sm font-bold ${
+                              appointmentMode === 'IN_PERSON'
+                                ? 'bg-black text-white'
+                                : 'border border-gray-300 bg-white text-gray-700'
+                            }`}
+                          >
+                            In Person
+                          </button>
+                        )}
+                        {remoteAvailable && (
+                          <button
+                            type="button"
+                            onClick={() => {
+                              applyAppointmentMode('REMOTE');
+                            }}
+                            className={`rounded-md px-3 py-2 text-sm font-bold ${
+                              appointmentMode === 'REMOTE'
+                                ? 'bg-black text-white'
+                                : 'border border-gray-300 bg-white text-gray-700'
+                            }`}
+                          >
+                            Remote
+                          </button>
+                        )}
+                      </div>
+                      {effectiveRemoteOnly && (
+                        <p className="mt-2 text-xs font-bold text-gray-500">
+                          Remote mode is required by shop or service settings.
+                        </p>
+                      )}
+                    </div>
+                  )}
+                  <NativeBookingCalendar
+                    totalDurationMinutes={totalDuration}
+                    onSlotSelected={handleSlotSelection}
+                  />
+                </div>
               )}
               {internalState === 'SUMMARY' && (
                 <div className="space-y-6">
+                  {needsBooking && (
+                    <div className="rounded-xl border border-gray-200 bg-white p-4">
+                      <p className="text-xs font-bold uppercase tracking-wide text-gray-500">
+                        Appointment Mode
+                      </p>
+                      <p className="mt-3 text-sm font-bold text-gray-900">
+                        {appointmentMode === 'REMOTE' ? 'Remote' : 'In Person'}
+                      </p>
+                      {effectiveRemoteOnly && (
+                        <p className="mt-2 text-xs font-bold text-gray-500">
+                          Remote mode is required by shop or service settings.
+                        </p>
+                      )}
+                    </div>
+                  )}
+
                   <div className="rounded-xl border border-gray-200 bg-gray-50 p-6">
                     <h3 className="mb-4 font-bold text-gray-900">
                       Order Summary
@@ -492,6 +673,11 @@ export default function CheckoutModal({
                         <p className="text-xs font-bold uppercase text-gray-500">
                           Appointment
                         </p>
+                        <p className="mt-1 text-xs font-bold uppercase tracking-wide text-gray-500">
+                          {appointmentMode === 'REMOTE'
+                            ? 'Remote'
+                            : 'In Person'}
+                        </p>
                         <p className="mt-1 text-sm font-bold text-gray-900">
                           {selectedSlot.start.toLocaleDateString('en-US', {
                             timeZone: shopTimeZone,

package/templates/custom/shopify/ShopifyCartManager.tsx

@@ -12,6 +12,7 @@ import {
   RESTRICTION_MESSAGES,
   calculateCartDuration,
 } from '@/utils/customHelpers';
+import { wouldCartHaveImpossibleRemoteMix } from '@/utils/booking/appointmentMode';
 import type { ResourceNode } from '@/types/compositorTypes';
 import type { CartItemState } from '@/stores/shopify';
 import type { BrandConfigState } from '@/types/tractstack';
@@ -130,54 +131,65 @@ export default function ShopifyCartManager({
           }
         }
 
-        const rawDuration = calculateCartDuration(nextCart, resources);
-
-        const interval = 15;
-        const snappedDuration = Math.ceil(rawDuration / interval) * interval;
-
-        const dynamicMax = brandConfig?.scheduling?.maxLengthMinutes || 180;
-        if (snappedDuration > dynamicMax) {
+        if (wouldCartHaveImpossibleRemoteMix(nextCart, resources)) {
           modalState.set({
             isOpen: true,
             type: 'restriction',
-            title: 'Appointment Length Limit Reached',
-            message: RESTRICTION_MESSAGES.MAX_DURATION(dynamicMax),
+            title: 'Incompatible Booking Modes',
+            message: RESTRICTION_MESSAGES.INCOMPATIBLE_REMOTE,
           });
         } else {
-          cartStore.set(nextCart);
-
-          if (!actionItem.suppressModal) {
-            let targetResource = resource;
-            if (newItem.boundResourceId) {
-              const bound = resources.find(
-                (r) => r.id === newItem.boundResourceId
-              );
-              if (bound) {
-                targetResource = bound;
+          const rawDuration = calculateCartDuration(nextCart, resources);
+
+          const interval = 15;
+          const snappedDuration = Math.ceil(rawDuration / interval) * interval;
+
+          const dynamicMax = brandConfig?.scheduling?.maxLengthMinutes || 180;
+          if (snappedDuration > dynamicMax) {
+            modalState.set({
+              isOpen: true,
+              type: 'restriction',
+              title: 'Appointment Length Limit Reached',
+              message: RESTRICTION_MESSAGES.MAX_DURATION(dynamicMax),
+            });
+          } else {
+            cartStore.set(nextCart);
+
+            if (!actionItem.suppressModal) {
+              let targetResource = resource;
+              if (newItem.boundResourceId) {
+                const bound = resources.find(
+                  (r) => r.id === newItem.boundResourceId
+                );
+                if (bound) {
+                  targetResource = bound;
+                }
               }
-            }
 
-            if (
-              targetResource.categorySlug === 'service' ||
-              targetResource.optionsPayload?.needsBooking
-            ) {
-              modalState.set({
-                isOpen: true,
-                type: 'success',
-                title: 'Booking Required',
-                message: RESTRICTION_MESSAGES.BOOKING(
-                  (
-                    targetResource.optionsPayload?.bookingLengthMinutes || 0
-                  ).toString()
-                ),
-              });
-            } else {
-              modalState.set({
-                isOpen: true,
-                type: 'success',
-                title: 'Added to Cart',
-                message: RESTRICTION_MESSAGES.DEFAULT_ADD(targetResource.title),
-              });
+              if (
+                targetResource.categorySlug === 'service' ||
+                targetResource.optionsPayload?.needsBooking
+              ) {
+                modalState.set({
+                  isOpen: true,
+                  type: 'success',
+                  title: 'Booking Required',
+                  message: RESTRICTION_MESSAGES.BOOKING(
+                    (
+                      targetResource.optionsPayload?.bookingLengthMinutes || 0
+                    ).toString()
+                  ),
+                });
+              } else {
+                modalState.set({
+                  isOpen: true,
+                  type: 'success',
+                  title: 'Added to Cart',
+                  message: RESTRICTION_MESSAGES.DEFAULT_ADD(
+                    targetResource.title
+                  ),
+                });
+              }
             }
           }
         }