astro-tractstack 2.3.2 → 2.3.4

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,12 +16,26 @@ 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 {
+  buildShopifyCheckoutLines,
+  getServiceLinkedProduct,
+  getServiceVariantIdFromCanonicalProduct,
+  getSharedFeeChargeLineSummary,
+  hasGidBackedCheckout,
+  isSharedFeeService,
+  parsePrimaryShopifyProductData,
+} from '@/utils/customHelpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 type CheckoutState =
@@ -24,14 +45,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 +83,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 =
@@ -67,21 +111,36 @@ export default function CheckoutModal({
   const enrichedCart = useMemo(() => {
     return Object.values($cartItems).map((item: any) => {
       const resource = resources.find((r) => r.id === item.resourceId);
-      let productData: any = {};
-      if (resource?.optionsPayload?.shopifyData) {
-        try {
-          productData = JSON.parse(resource.optionsPayload.shopifyData);
-        } catch (e) {
-          console.error('Failed to parse Shopify data', item.resourceId);
-        }
-      }
+      const productResources = resources.filter(
+        (r) => r.categorySlug === 'product'
+      );
+      const priceSource =
+        resource?.categorySlug === 'service'
+          ? getServiceLinkedProduct(resource, resources) || resource
+          : resource;
+      const productData = parsePrimaryShopifyProductData(priceSource) || {};
+      const fallbackVariantId =
+        resource?.categorySlug === 'service'
+          ? getServiceVariantIdFromCanonicalProduct(resource, resources)
+          : undefined;
+      const resolvedVariantId = item.variantId || fallbackVariantId;
       const variant = (productData?.variants || []).find(
-        (v: any) => v.id === item.variantId
+        (v: any) => v.id === resolvedVariantId
       );
+      const sharedFeeService =
+        resource?.categorySlug === 'service' &&
+        isSharedFeeService(resource, productResources);
+      const resolvedTitle =
+        resource?.categorySlug === 'service'
+          ? resource.title
+          : productData?.title || resource?.title || 'Loading...';
       return {
         ...item,
-        title: productData?.title || resource?.title || 'Loading...',
+        title: resolvedTitle,
         price: variant?.price?.amount || '0.00',
+        currencyCode: variant?.price?.currencyCode || 'USD',
+        sharedFeeService,
+        resourceNode: resource,
         resource: {
           id: item.resourceId,
           needsBooking:
@@ -98,9 +157,18 @@ export default function CheckoutModal({
     () => enrichedCart.some((item) => item.resource?.needsBooking),
     [enrichedCart]
   );
+  const checkoutLines = useMemo(
+    () => buildShopifyCheckoutLines($cartItems, resources),
+    [$cartItems, resources]
+  );
+  const sharedFeeChargeLine = useMemo(
+    () => getSharedFeeChargeLineSummary($cartItems, resources),
+    [$cartItems, resources]
+  );
   const needsPayment = useMemo(
-    () => enrichedCart.some((item) => !!item.variantId),
-    [enrichedCart]
+    () =>
+      hasGidBackedCheckout($cartItems, resources) || checkoutLines.length > 0,
+    [$cartItems, resources, checkoutLines]
   );
   const totalDuration = useMemo(() => {
     const rawMinutes = enrichedCart.reduce(
@@ -111,6 +179,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) {
@@ -120,6 +233,21 @@ export default function CheckoutModal({
     }
   }, [ProfileStorage.isProfileUnlocked(), $customer.email]);
 
+  useEffect(() => {
+    if (needsBooking) {
+      return;
+    }
+    if (selectedSlot) {
+      setSelectedSlot(null);
+    }
+    if (shopTimeZone) {
+      setShopTimeZone(undefined);
+    }
+    if (internalState === 'BOOKING') {
+      setInternalState('SUMMARY');
+    }
+  }, [needsBooking, selectedSlot, shopTimeZone, internalState]);
+
   useEffect(() => {
     if (
       $globalCartState !== CART_STATES.CHECKOUT ||
@@ -146,6 +274,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();
@@ -163,6 +321,8 @@ export default function CheckoutModal({
     transactionTraceId.set('');
     cartState.set(CART_STATES.READY);
     setInternalState('IDENTITY_EMAIL');
+    setSelectedSlot(null);
+    setShopTimeZone(undefined);
     setError(null);
     if (redirect) window.location.href = `/`;
   };
@@ -249,7 +409,8 @@ export default function CheckoutModal({
         transactionTraceId.get(),
         start.toISOString(),
         end.toISOString(),
-        cartResourceIds
+        cartResourceIds,
+        appointmentModeRef.current
       );
       if (response && (response.success || response.status === 'PENDING')) {
         setInternalState('SUMMARY');
@@ -293,6 +454,8 @@ export default function CheckoutModal({
         );
         if (response && response.success) {
           cartStore.set({});
+          setSelectedSlot(null);
+          setShopTimeZone(undefined);
           setInternalState('SUCCESS');
         } else {
           setError(response?.error || 'Failed to confirm booking.');
@@ -308,46 +471,43 @@ export default function CheckoutModal({
     setError(null);
     setInternalState('PROCESSING');
     try {
+      const lines = buildShopifyCheckoutLines(cartStore.get(), resources);
+      if (lines.length === 0) {
+        throw new Error('No checkout lines available.');
+      }
       const response = await fetch('/api/shopify/createCart', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          lines: enrichedCart
-            .filter((i) => i.variantId)
-            .map((i) => ({
-              merchandiseId: i.variantId,
-              quantity: i.quantity || 1,
-            })),
+          lines,
           email: $customer.email,
-          ...(needsBooking
-            ? {
-                attributes: [
-                  { key: 'bookingId', value: transactionTraceId.get() },
-                  ...(selectedSlot
-                    ? [
-                        {
-                          key: 'Appointment Date',
-                          value: selectedSlot.start.toLocaleDateString(
-                            'en-US',
-                            { timeZone: shopTimeZone }
-                          ),
-                        },
-                        {
-                          key: 'Appointment Time',
-                          value: selectedSlot.start.toLocaleTimeString(
-                            'en-US',
-                            {
-                              hour: '2-digit',
-                              minute: '2-digit',
-                              timeZone: shopTimeZone,
-                            }
-                          ),
-                        },
-                      ]
-                    : []),
-                ],
-              }
-            : {}),
+          attributes: [
+            { key: 'bookingId', value: transactionTraceId.get() },
+            { key: 'leadId', value: $customer.leadId },
+            ...(needsBooking && selectedSlot
+              ? [
+                  {
+                    key: 'Appointment Date',
+                    value: selectedSlot.start.toLocaleDateString('en-US', {
+                      timeZone: shopTimeZone,
+                    }),
+                  },
+                  {
+                    key: 'Appointment Time',
+                    value: selectedSlot.start.toLocaleTimeString('en-US', {
+                      hour: '2-digit',
+                      minute: '2-digit',
+                      timeZone: shopTimeZone,
+                    }),
+                  },
+                  {
+                    key: 'Appointment Mode',
+                    value:
+                      appointmentMode === 'REMOTE' ? 'Remote' : 'In Person',
+                  },
+                ]
+              : []),
+          ],
         }),
       });
       const result = await response.json();
@@ -357,6 +517,8 @@ export default function CheckoutModal({
         isShopifyHandoff.set(true);
         cartStore.set({});
         cartState.set(CART_STATES.READY);
+        setSelectedSlot(null);
+        setShopTimeZone(undefined);
         window.location.href = result.checkoutUrl;
       } else {
         throw new Error('No checkout URL');
@@ -462,36 +624,137 @@ 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
                     </h3>
-                    {enrichedCart.map((item, idx) => (
-                      <div
-                        key={idx}
-                        className="flex justify-between text-sm text-gray-700"
-                      >
-                        <span>{item.title}</span>
+                    {enrichedCart.map((item, idx) => {
+                      if (item.sharedFeeService) {
+                        return (
+                          <div
+                            key={idx}
+                            className="flex justify-between text-sm text-gray-700"
+                          >
+                            <span>
+                              {item.resourceNode?.title || item.title}
+                            </span>
+                          </div>
+                        );
+                      }
+
+                      return (
+                        <div
+                          key={idx}
+                          className="flex justify-between text-sm text-gray-700"
+                        >
+                          <span>{item.title}</span>
+                          <span className="font-bold">
+                            $
+                            {(
+                              parseFloat(item.price) * (item.quantity || 1)
+                            ).toFixed(2)}
+                            {item.currencyCode ? ` ${item.currencyCode}` : ''}
+                          </span>
+                        </div>
+                      );
+                    })}
+                    {sharedFeeChargeLine && (
+                      <div className="mt-2 flex justify-between border-t border-gray-200 pt-2 text-sm text-gray-700">
+                        <div>
+                          <span className="font-bold">
+                            {sharedFeeChargeLine.title}
+                          </span>
+                          {sharedFeeChargeLine.description && (
+                            <p className="text-xs text-gray-500">
+                              {sharedFeeChargeLine.description}
+                            </p>
+                          )}
+                        </div>
                         <span className="font-bold">
-                          $
-                          {(
-                            parseFloat(item.price) * (item.quantity || 1)
-                          ).toFixed(2)}
+                          ${parseFloat(sharedFeeChargeLine.amount).toFixed(2)}{' '}
+                          {sharedFeeChargeLine.currencyCode}
                         </span>
                       </div>
-                    ))}
-                    {selectedSlot && (
+                    )}
+                    {needsBooking && selectedSlot && (
                       <div className="mt-6 border-t border-gray-200 pt-6">
                         <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,