astro-tractstack 2.4.0 → 2.4.1

package/dist/index.js

@@ -891,6 +891,14 @@ async function y(t, e, c) {
       src: t("../templates/custom/shopify/cart.astro"),
       dest: "src/pages/cart.astro"
     },
+    {
+      src: t("../templates/custom/shopify/cart-reset.astro"),
+      dest: "src/pages/cart/reset.astro"
+    },
+    {
+      src: t("../templates/custom/shopify/CartReset.tsx"),
+      dest: "src/custom/shopify/CartReset.tsx"
+    },
     {
       src: t("../templates/src/pages/privacy.astro"),
       dest: "src/pages/privacy.astro"

package/package.json

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

package/templates/custom/shopify/CartModal.tsx

@@ -2,6 +2,7 @@ import { useStore } from '@nanostores/react';
 import { Dialog } from '@ark-ui/react/dialog';
 import { Portal } from '@ark-ui/react/portal';
 import { modalState } from '@/stores/shopify';
+import { classNames } from '@/utils/helpers';
 
 export default function CartModal() {
   const state = useStore(modalState);
@@ -20,15 +21,24 @@ export default function CartModal() {
   const isCartPage =
     typeof window !== 'undefined' && window.location.pathname === '/cart';
 
+  const isMaxDurationRestriction =
+    state.type === 'restriction' && state.restrictionReason === 'maxDuration';
+
   return (
     <Dialog.Root
       open={state.isOpen}
+      closeOnInteractOutside={false}
       onOpenChange={(e) => !e.open && handleClose()}
     >
       <Portal>
         <Dialog.Backdrop className="fixed inset-0 z-50 bg-black bg-opacity-75 backdrop-blur-sm" />
         <Dialog.Positioner className="fixed inset-0 z-50 flex items-center justify-center p-4">
-          <Dialog.Content className="w-full max-w-md overflow-hidden rounded-lg bg-white shadow-xl">
+          <Dialog.Content
+            className={classNames(
+              `w-full max-w-md overflow-hidden rounded-lg bg-white shadow-xl`,
+              isMaxDurationRestriction ? 'border-4 border-brand-3' : ''
+            )}
+          >
             <div className="p-6">
               <Dialog.Title className="text-xl font-bold text-gray-900">
                 {state.title}

package/templates/custom/shopify/CartReset.tsx

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import {
+  resetShopifyCommerceState,
+  transactionTraceId,
+} from '@/stores/shopify';
+import { bookingHelpers } from '@/utils/api/bookingHelpers';
+
+export default function CartReset() {
+  useEffect(() => {
+    let cancelled = false;
+
+    const run = async () => {
+      const traceId = transactionTraceId.get();
+      if (traceId) {
+        try {
+          await bookingHelpers.releaseHold(traceId);
+        } catch (err) {
+          console.error('Failed to release hold during cart reset:', err);
+        }
+      }
+
+      if (cancelled) {
+        return;
+      }
+
+      resetShopifyCommerceState();
+      window.location.replace('/cart');
+    };
+
+    void run();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return <p className="text-center text-sm text-gray-600">Resetting cart…</p>;
+}

package/templates/custom/shopify/ShopifyCartManager.tsx

@@ -182,6 +182,7 @@ export default function ShopifyCartManager({
             type: 'restriction',
             title: 'Incompatible Booking Modes',
             message: RESTRICTION_MESSAGES.INCOMPATIBLE_REMOTE,
+            restrictionReason: 'incompatibleRemote',
           });
         } else {
           const rawDuration = calculateCartDuration(nextCart, resources);
@@ -196,6 +197,7 @@ export default function ShopifyCartManager({
               type: 'restriction',
               title: 'Appointment Length Limit Reached',
               message: RESTRICTION_MESSAGES.MAX_DURATION(dynamicMax),
+              restrictionReason: 'maxDuration',
             });
           } else {
             cartStore.set(nextCart);

package/templates/custom/shopify/ShopifyServiceList.tsx

@@ -1,10 +1,12 @@
 import { useStore } from '@nanostores/react';
+import { Switch } from '@ark-ui/react/switch';
 import { cartStore, addQueue, type CartAction } from '@/stores/shopify';
 import {
   getCartItemKey,
   getServiceVariantIdFromCanonicalProduct,
   isSharedFeeService,
 } from '@/custom/shopify/shopifyHelpers';
+import { classNames } from '@/utils/helpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface Props {
@@ -51,12 +53,12 @@ export default function ShopifyServiceList({ resources = [], options }: Props) {
       .filter((s): s is string => !!s)
   );
 
-  const displayServices = services.filter(
-    (s) => !boundServiceSlugs.has(s.slug)
-  );
+  const displayServices = services
+    .filter((s) => !boundServiceSlugs.has(s.slug))
+    .sort((a, b) => a.title.localeCompare(b.title));
 
-  const handleToggle = (resource: ResourceNode, currentQuantity: number) => {
-    const actionType = currentQuantity > 0 ? 'remove' : 'add';
+  const handleCheckedChange = (resource: ResourceNode, checked: boolean) => {
+    const actionType = checked ? 'add' : 'remove';
     const gid =
       typeof resource.optionsPayload?.gid === 'string'
         ? resource.optionsPayload.gid
@@ -116,47 +118,58 @@ export default function ShopifyServiceList({ resources = [], options }: Props) {
               const duration = resource.optionsPayload?.bookingLengthMinutes;
 
               return (
-                <div
+                <Switch.Root
                   key={resource.id}
-                  className={`flex items-center justify-between rounded-lg border p-4 transition-colors ${
-                    isSelected
-                      ? 'border-black bg-gray-50'
-                      : 'border-gray-200 bg-white hover:border-gray-300'
-                  }`}
+                  checked={isSelected}
+                  onCheckedChange={(details) =>
+                    handleCheckedChange(resource, details.checked)
+                  }
+                  className="block w-full"
                 >
-                  <div className="flex-grow">
-                    <div className="flex items-center gap-2">
-                      <h3 className="font-bold text-gray-900">
-                        {resource.title}
-                      </h3>
-                      {duration && (
-                        <span className="inline-flex items-center rounded-sm bg-blue-50 px-2 py-0.5 text-xs font-bold text-blue-700">
-                          {duration} mins
-                        </span>
+                  <div
+                    className={`flex cursor-pointer items-center justify-between rounded-lg border p-4 transition-colors ${
+                      isSelected
+                        ? 'border-black bg-gray-50'
+                        : 'border-gray-200 bg-white hover:border-gray-300'
+                    }`}
+                  >
+                    <Switch.Label className="min-w-0 flex-grow cursor-pointer">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <h3 className="font-bold text-gray-900">
+                          {resource.title}
+                        </h3>
+                        {duration ? (
+                          <span className="inline-flex items-center rounded-sm bg-blue-50 px-2 py-0.5 text-xs font-bold text-blue-700">
+                            {duration} mins
+                          </span>
+                        ) : null}
+                        {isSelected ? (
+                          <span className="inline-flex items-center rounded-sm bg-gray-100 px-2 py-0.5 text-xs font-bold text-gray-800">
+                            In Cart
+                          </span>
+                        ) : null}
+                      </div>
+                      <p className="mt-1 text-sm text-gray-500">
+                        {resource.oneliner}
+                      </p>
+                    </Switch.Label>
+
+                    <Switch.Control
+                      className={classNames(
+                        `relative ml-4 inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none`,
+                        isSelected ? 'bg-brand-5' : 'bg-gray-200'
                       )}
-                    </div>
-                    <p className="mt-1 text-sm text-gray-500">
-                      {resource.oneliner}
-                    </p>
-                  </div>
-
-                  <div className="ml-4 flex-shrink-0">
-                    <button
-                      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'
-                      }`}
-                      role="switch"
-                      aria-checked={isSelected}
                     >
-                      <span
-                        className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                      <Switch.Thumb
+                        className={classNames(
+                          `pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out`,
                           isSelected ? 'translate-x-5' : 'translate-x-0'
-                        }`}
+                        )}
                       />
-                    </button>
+                    </Switch.Control>
+                    <Switch.HiddenInput />
                   </div>
-                </div>
+                </Switch.Root>
               );
             })}
           </div>

package/templates/custom/shopify/cart-reset.astro

@@ -0,0 +1,19 @@
+---
+import Layout from '@/layouts/Layout.astro';
+import CartReset from '@/custom/shopify/CartReset';
+import { getBrandConfig } from '@/utils/api/brandConfig';
+
+const tenantId =
+  Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+
+const brandConfig = await getBrandConfig(tenantId);
+if (!brandConfig.HAS_SHOPIFY) {
+  return Astro.redirect('/storykeep');
+}
+---
+
+<Layout title="Reset Cart" slug="cart">
+  <main class="mx-auto max-w-7xl px-4 py-16 md:px-6 xl:px-8">
+    <CartReset client:only="react" />
+  </main>
+</Layout>

package/templates/src/components/Header.astro

@@ -141,7 +141,7 @@ if (hasShopify) {
   <div
     class="flex flex-row flex-nowrap justify-between bg-mywhite px-4 pb-3 pt-4 shadow-inner md:px-8"
   >
-    <h1 class="truncate text-2xl text-mydarkgrey">{title}</h1>
+    <h1 id="page-title" class="truncate text-2xl text-mydarkgrey">{title}</h1>
     <div class="flex flex-row flex-nowrap items-center gap-x-2">
       {
         !isHome ? (

package/templates/src/pages/codehooks/shopify-product-grid.astro

@@ -16,10 +16,8 @@ const resources = await resolveCodeHookResources(
 );
 ---
 
-<div style="min-height: 400px;">
-  <ShopifyProductGrid
-    options={options}
-    resources={resources}
-    client:only="react"
-  />
-</div>
+<ShopifyProductGrid
+  options={options}
+  resources={resources}
+  client:only="react"
+/>

package/templates/src/pages/codehooks/shopify-service-list.astro

@@ -16,10 +16,8 @@ const resources = await resolveCodeHookResources(
 );
 ---
 
-<div style="min-height: 300px;">
-  <ShopifyServiceList
-    options={options}
-    resources={resources}
-    client:only="react"
-  />
-</div>
+<ShopifyServiceList
+  options={options}
+  resources={resources}
+  client:only="react"
+/>

package/templates/src/stores/shopify.ts

@@ -26,6 +26,7 @@ export const modalState = atom<{
   type: 'success' | 'restriction';
   title: string;
   message: string;
+  restrictionReason?: 'maxDuration' | 'incompatibleRemote';
 }>({
   isOpen: false,
   type: 'success',
@@ -258,16 +259,45 @@ export function setCustomerDetails(details: Partial<CustomerDetails>) {
   });
 }
 
-export function clearCommerceState() {
+const SHOPIFY_PERSISTENCE_KEYS = [
+  'tractstack_shopify_queue',
+  'tractstack_shopify_cart',
+  'tractstack_shopify_queue_state',
+  'tractstack_shopify_cart_state',
+  'tractstack_shopify_trace_id',
+  'tractstack_shopify_appointment_mode',
+  'tractstack_shopify_customer',
+] as const;
+
+export function resetShopifyCommerceState() {
+  addQueue.set([]);
   cartStore.set({});
+  cartState.set(CART_STATES.READY);
+  queueState.set(QUEUE_STATES.READY);
+  transactionTraceId.set('');
+  preferredAppointmentMode.set('IN_PERSON');
   customerDetails.set({
     name: '',
     email: '',
     leadId: '',
   });
-  transactionTraceId.set('');
-  preferredAppointmentMode.set('IN_PERSON');
-  cartState.set(CART_STATES.READY);
+  modalState.set({
+    isOpen: false,
+    type: 'success',
+    title: '',
+    message: '',
+    restrictionReason: undefined,
+  });
+
+  if (typeof localStorage !== 'undefined') {
+    SHOPIFY_PERSISTENCE_KEYS.forEach((key) => {
+      localStorage.removeItem(key);
+    });
+  }
+}
+
+export function clearCommerceState() {
+  resetShopifyCommerceState();
 }
 
 export interface CartKeyParams {

package/utils/inject-files.ts

@@ -900,6 +900,14 @@ export async function injectTemplateFiles(
       src: resolve('../templates/custom/shopify/cart.astro'),
       dest: 'src/pages/cart.astro',
     },
+    {
+      src: resolve('../templates/custom/shopify/cart-reset.astro'),
+      dest: 'src/pages/cart/reset.astro',
+    },
+    {
+      src: resolve('../templates/custom/shopify/CartReset.tsx'),
+      dest: 'src/custom/shopify/CartReset.tsx',
+    },
     {
       src: resolve('../templates/src/pages/privacy.astro'),
       dest: 'src/pages/privacy.astro',