astro-tractstack 2.3.3 → 2.3.4

package/templates/custom/shopify/CheckoutModal.tsx

@@ -27,6 +27,15 @@ import {
 } 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 =
@@ -102,21 +111,35 @@ 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,
@@ -134,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(
@@ -201,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 ||
@@ -274,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 = `/`;
   };
@@ -405,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.');
@@ -420,53 +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,
-                            }
-                          ),
-                        },
-                        {
-                          key: 'Appointment Mode',
-                          value:
-                            appointmentMode === 'REMOTE'
-                              ? 'Remote'
-                              : 'In Person',
-                        },
-                      ]
-                    : []),
-                ],
-              }
-            : {}),
+          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();
@@ -476,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');
@@ -654,21 +697,55 @@ export default function CheckoutModal({
                     <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

package/templates/custom/shopify/ShopifyCartManager.tsx

@@ -5,12 +5,13 @@ import {
   cartStore,
   modalState,
   transactionTraceId,
-  getCartItemKey,
 } from '@/stores/shopify';
 import { bookingHelpers } from '@/utils/api/bookingHelpers';
 import {
   RESTRICTION_MESSAGES,
   calculateCartDuration,
+  getCartItemKey,
+  isSharedFeeService,
 } from '@/utils/customHelpers';
 import { wouldCartHaveImpossibleRemoteMix } from '@/utils/booking/appointmentMode';
 import type { ResourceNode } from '@/types/compositorTypes';
@@ -27,6 +28,9 @@ export default function ShopifyCartManager({
   brandConfig,
 }: ShopifyCartManagerProps) {
   const queue = useStore(addQueue);
+  const productResources = resources.filter(
+    (r) => r.categorySlug === 'product'
+  );
 
   useEffect(() => {
     if (queue.length > 0) {
@@ -39,19 +43,37 @@ export default function ShopifyCartManager({
         return;
       }
 
-      const key = getCartItemKey(actionItem);
+      const key = getCartItemKey(actionItem, resource, productResources);
       const currentCart = cartStore.get();
       const currentItem = currentCart[key];
-      const currentQty = currentItem?.quantity || 0;
+      const isSharedFeeResource = isSharedFeeService(
+        resource,
+        productResources
+      );
+      const legacySharedKeys = isSharedFeeResource
+        ? Object.keys(currentCart).filter(
+            (cartKey) =>
+              cartKey !== key &&
+              currentCart[cartKey]?.resourceId === actionItem.resourceId
+          )
+        : [];
+      const legacySharedItems = legacySharedKeys
+        .map((cartKey) => currentCart[cartKey])
+        .filter((item): item is CartItemState => !!item);
+      const mergedCurrentItem = currentItem || legacySharedItems[0];
+      const currentQty = isSharedFeeResource
+        ? currentItem?.quantity ||
+          legacySharedItems.reduce((total, item) => total + item.quantity, 0)
+        : currentItem?.quantity || 0;
       const nextCart = { ...currentCart };
 
       if (actionItem.action === 'remove') {
-        const newQty = Math.max(0, currentQty - 1);
+        const newQty = isSharedFeeResource ? 0 : Math.max(0, currentQty - 1);
 
         if (newQty === 0) {
           if (
             resource?.optionsPayload?.needsBooking ||
-            currentItem?.boundResourceId
+            mergedCurrentItem?.boundResourceId
           ) {
             const traceId = transactionTraceId.get();
             if (traceId) {
@@ -59,23 +81,34 @@ export default function ShopifyCartManager({
                 .releaseHold(traceId)
                 .catch((err) =>
                   console.error('Failed to release hold on cart removal:', err)
-                );
+                )
+                .finally(() => {
+                  transactionTraceId.set('');
+                });
             }
           }
           delete nextCart[key];
+          legacySharedKeys.forEach((legacyKey) => {
+            delete nextCart[legacyKey];
+          });
         } else {
           nextCart[key] = {
-            ...currentItem,
+            ...mergedCurrentItem,
             resourceId: actionItem.resourceId,
             quantity: newQty,
           };
         }
 
-        if (currentItem?.boundResourceId || actionItem.boundResourceId) {
+        if (mergedCurrentItem?.boundResourceId || actionItem.boundResourceId) {
           const boundId =
-            currentItem?.boundResourceId || actionItem.boundResourceId;
+            mergedCurrentItem?.boundResourceId || actionItem.boundResourceId;
           if (boundId) {
-            const serviceKey = getCartItemKey({ resourceId: boundId });
+            const boundResource = resources.find((r) => r.id === boundId);
+            const serviceKey = getCartItemKey(
+              { resourceId: boundId },
+              boundResource,
+              productResources
+            );
             const serviceItem = nextCart[serviceKey];
             if (serviceItem) {
               const newServiceQty = Math.max(0, serviceItem.quantity - 1);
@@ -95,27 +128,39 @@ export default function ShopifyCartManager({
         addQueue.set(remaining);
       } else if (actionItem.action === 'add') {
         transactionTraceId.set('');
-        const newQty = currentQty + 1;
+        const newQty = isSharedFeeResource ? 1 : currentQty + 1;
 
         const newItem: CartItemState = {
           resourceId: actionItem.resourceId,
           quantity: newQty,
-          gid: actionItem.gid || currentItem?.gid,
-          variantId: actionItem.variantId || currentItem?.variantId,
+          gid: actionItem.gid || mergedCurrentItem?.gid,
+          variantId: isSharedFeeResource
+            ? undefined
+            : actionItem.variantId || mergedCurrentItem?.variantId,
           variantIdShipped:
-            actionItem.variantIdShipped || currentItem?.variantIdShipped,
+            actionItem.variantIdShipped || mergedCurrentItem?.variantIdShipped,
           variantIdPickup:
-            actionItem.variantIdPickup || currentItem?.variantIdPickup,
+            actionItem.variantIdPickup || mergedCurrentItem?.variantIdPickup,
           boundResourceId:
-            actionItem.boundResourceId || currentItem?.boundResourceId,
+            actionItem.boundResourceId || mergedCurrentItem?.boundResourceId,
         };
 
+        legacySharedKeys.forEach((legacyKey) => {
+          delete nextCart[legacyKey];
+        });
         nextCart[key] = newItem;
 
         if (newItem.boundResourceId) {
-          const serviceKey = getCartItemKey({
-            resourceId: newItem.boundResourceId,
-          });
+          const boundResource = resources.find(
+            (r) => r.id === newItem.boundResourceId
+          );
+          const serviceKey = getCartItemKey(
+            {
+              resourceId: newItem.boundResourceId,
+            },
+            boundResource,
+            productResources
+          );
           const serviceItem = nextCart[serviceKey];
 
           if (serviceItem) {

package/templates/custom/shopify/ShopifyCheckout.tsx

@@ -6,6 +6,7 @@ import {
   CART_STATES,
   isShopifyHandoff,
 } from '@/stores/shopify';
+import { buildShopifyCheckoutLines } from '@/utils/customHelpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface ShopifyCheckoutProps {
@@ -33,32 +34,7 @@ export default function ShopifyCheckout({
       setStatus('PROCESSING');
 
       try {
-        const cartItems = Object.values(cart);
-
-        const lines = cartItems
-          .map((item) => {
-            // Resolve the ResourceNode for this item
-            const resource = resources.find((r) => r.id === item.resourceId);
-
-            if (!resource) {
-              return null;
-            }
-
-            // Use the explicitly sanitized variant ID from the cart state
-            const merchandiseId = item.variantId;
-
-            // If we have no ID, we cannot add this item to the Shopify cart.
-            if (!merchandiseId) return null;
-
-            return {
-              merchandiseId,
-              quantity: item.quantity,
-            };
-          })
-          .filter((line) => line !== null) as Array<{
-          merchandiseId: string;
-          quantity: number;
-        }>;
+        const lines = buildShopifyCheckoutLines(cart, resources);
 
         if (lines.length === 0) {
           throw new Error(

package/templates/custom/shopify/ShopifyProductGrid.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useStore } from '@nanostores/react';
 import { cartStore, addQueue, type CartAction } from '@/stores/shopify';
+import { collectServiceGids } from '@/utils/customHelpers';
 import { getShopifyImage } from '@/utils/helpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
@@ -240,6 +241,13 @@ export default function ShopifyProductGrid({ resources = {}, options }: Props) {
     products = products.filter((p) => p.optionsPayload?.group === group);
   }
 
+  const serviceGids = collectServiceGids(services);
+  products = products.filter((p) => {
+    const gid =
+      typeof p.optionsPayload?.gid === 'string' ? p.optionsPayload.gid : '';
+    return gid === '' || !serviceGids.has(gid);
+  });
+
   if (products.length === 0) return null;
 
   return (

package/templates/custom/shopify/ShopifyServiceList.tsx

@@ -1,10 +1,10 @@
 import { useStore } from '@nanostores/react';
+import { cartStore, addQueue, type CartAction } from '@/stores/shopify';
 import {
-  cartStore,
-  addQueue,
   getCartItemKey,
-  type CartAction,
-} from '@/stores/shopify';
+  getServiceVariantIdFromCanonicalProduct,
+  isSharedFeeService,
+} from '@/utils/customHelpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface Props {
@@ -55,33 +55,17 @@ export default function ShopifyServiceList({ resources = {}, options }: Props) {
     (s) => !boundServiceSlugs.has(s.slug)
   );
 
-  const getServiceVariantId = (resource: ResourceNode): string | undefined => {
-    try {
-      if (resource.optionsPayload?.shopifyData) {
-        const data = JSON.parse(resource.optionsPayload.shopifyData);
-        // Handle both raw product data and simplified product objects
-        const product = data.products?.[0] || data;
-        return product?.variants?.[0]?.id;
-      }
-    } catch (e) {
-      return undefined;
-    }
-    return undefined;
-  };
-
   const handleToggle = (resource: ResourceNode, currentQuantity: number) => {
     const actionType = currentQuantity > 0 ? 'remove' : 'add';
+    const gid =
+      typeof resource.optionsPayload?.gid === 'string'
+        ? resource.optionsPayload.gid
+        : undefined;
 
-    const variantId = getServiceVariantId(resource);
-    let gid: string | undefined;
-
-    try {
-      if (resource.optionsPayload?.shopifyData) {
-        const data = JSON.parse(resource.optionsPayload.shopifyData);
-        const product = data.products?.[0] || data;
-        gid = product?.id;
-      }
-    } catch (e) {}
+    const sharedFee = isSharedFeeService(resource, products);
+    const variantId = sharedFee
+      ? undefined
+      : getServiceVariantIdFromCanonicalProduct(resource, products);
 
     const newAction: CartAction = {
       resourceId: resource.id,
@@ -115,14 +99,20 @@ export default function ShopifyServiceList({ resources = {}, options }: Props) {
         <section className="w-full">
           <div className="space-y-4">
             {displayServices.map((resource) => {
-              const variantId = getServiceVariantId(resource);
-              const key = getCartItemKey({
-                resourceId: resource.id,
-                variantId,
-              });
+              const key = getCartItemKey(
+                { resourceId: resource.id },
+                resource,
+                products
+              );
 
               const cartItem = cart[key];
-              const isSelected = (cartItem?.quantity || 0) > 0;
+              const legacyCartItem = Object.values(cart).find(
+                (item) =>
+                  item.resourceId === resource.id && (item.quantity || 0) > 0
+              );
+              const selectedQuantity =
+                cartItem?.quantity || legacyCartItem?.quantity || 0;
+              const isSelected = selectedQuantity > 0;
               const duration = resource.optionsPayload?.bookingLengthMinutes;
 
               return (
@@ -152,9 +142,7 @@ export default function ShopifyServiceList({ resources = {}, options }: Props) {
 
                   <div className="ml-4 flex-shrink-0">
                     <button
-                      onClick={() =>
-                        handleToggle(resource, cartItem?.quantity || 0)
-                      }
+                      onClick={() => handleToggle(resource, selectedQuantity)}
                       className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
                         isSelected ? 'bg-black' : 'bg-gray-200'
                       }`}

package/templates/src/components/Header.astro

@@ -76,7 +76,7 @@ if (hasShopify) {
       <>
         {slug !== `cart` ? (
           <div class="flex w-full justify-end px-4 py-2 md:px-8">
-            <CartIcon client:only="react" />
+            <CartIcon client:only="react" resources={shopifyResources} />
           </div>
         ) : (
           <CheckoutModal