astro-tractstack 2.3.0 → 2.3.2

package/README.md

@@ -75,7 +75,7 @@ For more recipes and community guides, visit [FreeWebPress.org](https://FreeWebP
 
 Expanding full-text search to include embedded video transcripts (via BunnyCDN).
 
-- **AI Visual Editor:** Powered by AssemblyAI askLemur to highlight and extract transcript sections.
+- **AI Visual Editor:** Powered by AssemblyAI aai to highlight and extract transcript sections.
 - **Smart Content:** Automated chaptering and descriptions for long-form video.
 - **Video-to-Blog Pipeline:** Transform video highlights into rich, searchable blog pages using the design library.
 

package/bin/create-tractstack.js

@@ -348,7 +348,7 @@ PUBLIC_ENABLE_BUNNY="${finalResponses.enableBunny ? 'true' : 'false'}"
 
     // Install UI components
     execSync(
-      `${addCommand} @ark-ui/react@^5.30.0 @heroicons/react@^2.1.1 @internationalized/date@3.10.0 @calcom/embed-react@^1.4.1`,
+      `${addCommand} @ark-ui/react@^5.30.0 @heroicons/react@^2.1.1 @internationalized/date@3.10.0`,
       {
         stdio: 'inherit',
       }
@@ -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 @calcom/embed-react@^1.4.1 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 @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

@@ -10,7 +10,7 @@ function b(t) {
 }
 function g(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, r = process.env.PUBLIC_TENANTID;
+  const c = process.env.PUBLIC_GO_BACKEND, o = process.env.PUBLIC_TENANTID;
   if (!c)
     e.warn("PUBLIC_GO_BACKEND not set - this will be required at runtime");
   else
@@ -19,11 +19,11 @@ function g(t, e) {
     } catch {
       e.error(`PUBLIC_GO_BACKEND is not a valid URL: ${c}`);
     }
-  return r ? /^[a-zA-Z0-9_-]+$/.test(r) ? e.info(`Tenant ID validated: ${r}`) : e.error(`PUBLIC_TENANTID contains invalid characters: ${r}`) : e.warn("PUBLIC_TENANTID not set - this will be required at runtime"), t;
+  return o ? /^[a-zA-Z0-9_-]+$/.test(o) ? e.info(`Tenant ID validated: ${o}`) : e.error(`PUBLIC_TENANTID contains invalid characters: ${o}`) : e.warn("PUBLIC_TENANTID not set - this will be required at runtime"), t;
 }
 async function y(t, e, c) {
   e.info("TractStack: Injecting template files");
-  const r = [
+  const o = [
     // Core Configuration
     {
       src: t("../templates/env.example"),
@@ -815,6 +815,10 @@ async function y(t, e, c) {
       src: t("../templates/src/utils/api/resourceHelpers.ts"),
       dest: "src/utils/api/resourceHelpers.ts"
     },
+    {
+      src: t("../templates/src/utils/api/bookingHelpers.ts"),
+      dest: "src/utils/api/bookingHelpers.ts"
+    },
     {
       src: t("../templates/src/utils/api/menuHelpers.ts"),
       dest: "src/utils/api/menuHelpers.ts"
@@ -937,6 +941,38 @@ async function y(t, e, c) {
       dest: "src/pages/storykeep/profile.astro"
     },
     // API Routes
+    {
+      src: t("../templates/src/pages/api/booking/list.ts"),
+      dest: "src/pages/api/booking/list.ts"
+    },
+    {
+      src: t("../templates/src/pages/api/booking/metrics.ts"),
+      dest: "src/pages/api/booking/metrics.ts"
+    },
+    {
+      src: t("../templates/src/pages/api/booking/cancel.ts"),
+      dest: "src/pages/api/booking/cancel.ts"
+    },
+    {
+      src: t("../templates/src/pages/api/booking/confirm.ts"),
+      dest: "src/pages/api/booking/confirm.ts"
+    },
+    {
+      src: t("../templates/src/pages/api/booking/release.ts"),
+      dest: "src/pages/api/booking/release.ts"
+    },
+    {
+      src: t("../templates/src/pages/api/booking/availability.ts"),
+      dest: "src/pages/api/booking/availability.ts"
+    },
+    {
+      src: t("../templates/src/pages/api/booking/hold.ts"),
+      dest: "src/pages/api/booking/hold.ts"
+    },
+    {
+      src: t("../templates/src/pages/api/auth/lookup-lead.ts"),
+      dest: "src/pages/api/auth/lookup-lead.ts"
+    },
     {
       src: t("../templates/src/pages/api/auth/profile.ts"),
       dest: "src/pages/api/auth/profile.ts"
@@ -1118,6 +1154,12 @@ async function y(t, e, c) {
       src: t("../templates/src/components/form/brand/SEOSection.tsx"),
       dest: "src/components/form/brand/SEOSection.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/form/shopify/SchedulingSection.tsx"
+      ),
+      dest: "src/components/form/shopify/SchedulingSection.tsx"
+    },
     // Advanced Configuration Components
     {
       src: t(
@@ -1170,6 +1212,72 @@ async function y(t, e, c) {
       ),
       dest: "src/components/storykeep/Dashboard_Shopify.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/storykeep/shopify/ShopifyDashboard.tsx"
+      ),
+      dest: "src/components/storykeep/shopify/ShopifyDashboard.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/storykeep/shopify/ShopifyDashboard_Bookings.tsx"
+      ),
+      dest: "src/components/storykeep/shopify/ShopifyDashboard_Bookings.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/storykeep/shopify/ShopifyDashboard_Schedule.tsx"
+      ),
+      dest: "src/components/storykeep/shopify/ShopifyDashboard_Schedule.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/storykeep/shopify/ShopifyDashboard_Products.tsx"
+      ),
+      dest: "src/components/storykeep/shopify/ShopifyDashboard_Products.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/storykeep/shopify/ShopifyDashboard_Services.tsx"
+      ),
+      dest: "src/components/storykeep/shopify/ShopifyDashboard_Services.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/storykeep/shopify/ShopifyDashboard_Emails.tsx"
+      ),
+      dest: "src/components/storykeep/shopify/ShopifyDashboard_Emails.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/storykeep/email-builder/EmailBuilder.tsx"
+      ),
+      dest: "src/components/storykeep/email-builder/EmailBuilder.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/storykeep/email-builder/Blocks.tsx"
+      ),
+      dest: "src/components/storykeep/email-builder/Blocks.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/storykeep/email-builder/PropertyPanel.tsx"
+      ),
+      dest: "src/components/storykeep/email-builder/PropertyPanel.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/storykeep/email-builder/PreviewModal.tsx"
+      ),
+      dest: "src/components/storykeep/email-builder/PreviewModal.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/storykeep/shopify/ShopifyDashboard_Search.tsx"
+      ),
+      dest: "src/components/storykeep/shopify/ShopifyDashboard_Search.tsx"
+    },
     {
       src: t(
         "../templates/src/components/storykeep/Dashboard_Analytics.tsx"
@@ -2152,6 +2260,10 @@ async function y(t, e, c) {
       src: t("../templates/src/utils/api/setupHelpers.ts"),
       dest: "src/utils/api/setupHelpers.ts"
     },
+    {
+      src: t("../templates/src/utils/api/emailHelpers.ts"),
+      dest: "src/utils/api/emailHelpers.ts"
+    },
     {
       src: t(
         "../templates/src/components/storykeep/widgets/HydrateWizard.tsx"
@@ -2231,13 +2343,13 @@ async function y(t, e, c) {
       protected: !0
     },
     {
-      src: t("../templates/custom/shopify/CalDotComBooking.tsx"),
-      dest: "src/custom/shopify/CalDotComBooking.tsx",
+      src: t("../templates/custom/shopify/ShopifyCheckout.tsx"),
+      dest: "src/custom/shopify/ShopifyCheckout.tsx",
       protected: !0
     },
     {
-      src: t("../templates/custom/shopify/ShopifyCheckout.tsx"),
-      dest: "src/custom/shopify/ShopifyCheckout.tsx",
+      src: t("../templates/custom/shopify/NativeBookingCalendar.tsx"),
+      dest: "src/custom/shopify/NativeBookingCalendar.tsx",
       protected: !0
     },
     // Example Components (Conditional)
@@ -2285,41 +2397,40 @@ async function y(t, e, c) {
       }
     ] : []
   ];
-  for (const s of r)
+  for (const s of o)
     try {
       const p = i(s.dest);
       n(p) || x(p, { recursive: !0 });
-      const o = !s.protected && (s.dest === "tailwind.config.cjs" || s.dest.startsWith("src/components/codehooks/") || s.dest.startsWith("src/components/widgets/") || s.dest.startsWith("src/") || s.dest.startsWith("public/client/") || s.dest === ".gitignore");
-      if (!n(s.dest) || o)
+      const r = !s.protected && (s.dest === "tailwind.config.cjs" || s.dest.startsWith("src/components/codehooks/") || s.dest.startsWith("src/components/widgets/") || s.dest.startsWith("src/") || s.dest.startsWith("public/client/") || s.dest === ".gitignore");
+      if (!n(s.dest) || r)
         if (n(s.src))
           k(s.src, s.dest), e.info(`Updated ${s.dest}`);
         else {
-          const m = w(s.dest);
+          const m = f(s.dest);
           u(s.dest, m), e.info(`Created placeholder ${s.dest}`);
         }
       else s.protected ? e.info(`Protected: ${s.dest} (skipped overwrite)`) : e.info(`Skipped existing ${s.dest}`);
     } catch (p) {
-      const o = p instanceof Error ? p.message : String(p);
-      e.error(`Failed to create ${s.dest}: ${o}`);
+      const r = p instanceof Error ? p.message : String(p);
+      e.error(`Failed to create ${s.dest}: ${r}`);
     }
 }
-function w(t) {
+function f(t) {
   return t.endsWith(".astro") ? `---
 // TractStack placeholder component
 ---
 <div>TractStack placeholder: ${t}</div>` : t.endsWith(".tsx") ? `// TractStack placeholder component
-import React from 'react';
 export default function Placeholder() {
   return <div>TractStack placeholder: ${t}</div>;
 }` : t.endsWith(".ts") ? `// TractStack placeholder utility
 export const placeholder = "${t}";` : `# TractStack placeholder: ${t}`;
 }
-function h(t = {}) {
+function P(t = {}) {
   const { resolve: e } = b(import.meta.url);
   return {
     name: "astro-tractstack",
     hooks: {
-      "astro:config:setup": async ({ config: c, updateConfig: r, logger: s }) => {
+      "astro:config:setup": async ({ config: c, updateConfig: o, logger: s }) => {
         g(t, s);
         const p = t.enableMultiTenant || !1;
         if (s.info(
@@ -2339,7 +2450,7 @@ function h(t = {}) {
           ), new Error(
             "TractStack requires an SSR adapter. Please add @astrojs/node adapter to your astro.config.mjs"
           );
-        r({
+        o({
           vite: {
             define: {
               __TRACTSTACK_VERSION__: JSON.stringify("2.0.0-alpha.1"),
@@ -2396,5 +2507,5 @@ function h(t = {}) {
   };
 }
 export {
-  h as default
+  P as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Astro integration for TractStack - the free web press by At Risk Media",
   "type": "module",
   "main": "dist/index.js",
@@ -61,7 +61,7 @@
     "@heroicons/react": "^2.1.1",
     "@internationalized/date": "^3.10.1",
     "@mhsdesign/jit-browser-tailwindcss": "^0.4.2",
-    "@nanostores/persistent": "^1.2.0",
+    "@nanostores/persistent": "^1.3.3",
     "@nanostores/react": "^1.0.0",
     "@types/d3": "^7.4.3",
     "@types/d3-sankey": "^0.12.5",

package/templates/custom/minimal/CodeHook.astro

@@ -50,9 +50,17 @@ export const components = {
   ) : target === 'epinet' ? (
     <EpinetWrapper fullContentMap={fullContentMap} client:only="react" />
   ) : target === 'shopify-product-grid' ? (
-    <ShopifyProductGrid resources={resourcesPayload} client:only="react" />
+    <ShopifyProductGrid
+      options={options}
+      resources={resourcesPayload}
+      client:only="react"
+    />
   ) : target === 'shopify-service-list' ? (
-    <ShopifyServiceList resources={resourcesPayload} client:only="react" />
+    <ShopifyServiceList
+      options={options}
+      resources={resourcesPayload}
+      client:only="react"
+    />
   ) : (
     /* : target === "custom-hero" ? (
     <CustomHero />

package/templates/custom/shopify/Cart.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { ulid } from 'ulid';
 import { useStore } from '@nanostores/react';
 import {
   addQueue,
@@ -6,7 +7,7 @@ import {
   cartState,
   CART_STATES,
   isShopifyHandoff,
-  type CartAction,
+  transactionTraceId,
   type CartItemState,
 } from '@/stores/shopify';
 import { getShopifyImage } from '@/utils/helpers';
@@ -18,12 +19,19 @@ interface CartProps {
 
 const getCleanVariantTitle = (variant: any) => {
   if (variant?.selectedOptions) {
-    return variant.selectedOptions
-      .filter((o: any) => o.name !== 'Mode')
+    const filtered = variant.selectedOptions
+      .filter(
+        (o: any) =>
+          o.name !== 'Mode' && o.name !== 'Title' && o.value !== 'Default Title'
+      )
       .map((o: any) => o.value)
       .join(' / ');
+
+    return filtered === 'Default Title' ? '' : filtered;
   }
-  return variant?.title || '';
+
+  const title = variant?.title || '';
+  return title === 'Default Title' ? '' : title;
 };
 
 export default function Cart({ resources = [] }: CartProps) {
@@ -39,8 +47,6 @@ export default function Cart({ resources = [] }: CartProps) {
       .filter((id) => !!id) as string[]
   );
 
-  const hasServiceBoundProduct = boundServiceIds.size > 0;
-
   const displayableItems = cartValues.filter(
     (item) => !boundServiceIds.has(item.resourceId)
   );
@@ -62,61 +68,57 @@ export default function Cart({ resources = [] }: CartProps) {
   });
 
   const hasPhysicalProductWithPickup = cartValues.some(
-    (item) => !!item.variantIdPickup
+    (item) =>
+      item.variantIdPickup && item.variantIdPickup !== item.variantIdShipped
   );
 
   const canPickup = hasService && hasPhysicalProductWithPickup;
 
   useEffect(() => {
-    if (hasServiceBoundProduct) {
-      setPickupEnabled(true);
-    } else if (canPickup) {
+    if (canPickup) {
       setPickupEnabled(true);
     } else {
       setPickupEnabled(false);
     }
-  }, [canPickup, hasServiceBoundProduct]);
-
-  const isPickupMode = (canPickup || hasServiceBoundProduct) && pickupEnabled;
-
-  const dispatchDualAction = (
-    item: CartItemState,
-    action: 'add' | 'remove'
-  ) => {
-    const queueUpdates: CartAction[] = [];
-
-    queueUpdates.push({
-      resourceId: item.resourceId,
-      action,
-      variantId: item.variantId,
-      variantIdShipped: item.variantIdShipped,
-      variantIdPickup: item.variantIdPickup,
-      boundResourceId: item.boundResourceId,
-      suppressModal: action === 'add' ? true : undefined,
-    });
-
-    if (item.boundResourceId) {
-      queueUpdates.push({
-        resourceId: item.boundResourceId,
+  }, [canPickup]);
+
+  const isPickupMode = canPickup && pickupEnabled;
+
+  const dispatchAction = (item: CartItemState, action: 'add' | 'remove') => {
+    addQueue.set([
+      ...addQueue.get(),
+      {
+        resourceId: item.resourceId,
         action,
+        variantId: item.variantId,
+        variantIdShipped: item.variantIdShipped,
+        variantIdPickup: item.variantIdPickup,
+        boundResourceId: item.boundResourceId,
         suppressModal: action === 'add' ? true : undefined,
-      });
-    }
-
-    addQueue.set([...addQueue.get(), ...queueUpdates]);
+      },
+    ]);
   };
 
+  if (isHandoff) {
+    return (
+      <div
+        className="fixed inset-0 flex flex-col items-center justify-center bg-black bg-opacity-75 backdrop-blur-md"
+        style={{ zIndex: 9005 }}
+      >
+        <div className="h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-white"></div>
+        <h3 className="mt-4 text-lg font-bold text-white">
+          Finalizing Handoff...
+        </h3>
+        <p className="mt-2 text-sm text-gray-300">
+          Redirecting to Shopify secured payment
+        </p>
+      </div>
+    );
+  }
+
   if (cartValues.length === 0) {
     return (
       <div className="relative">
-        {isHandoff && (
-          <div className="absolute inset-0 z-103 flex flex-col items-center justify-center rounded-lg bg-black bg-opacity-75 backdrop-blur-md">
-            <div className="h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-black"></div>
-            <h3 className="mt-4 text-lg font-bold text-gray-900">
-              Finalizing Handoff...
-            </h3>
-          </div>
-        )}
         <div className="rounded-lg border bg-gray-50 p-8 text-center">
           <h2 className="text-xl font-bold">Your cart is empty</h2>
           <p className="mt-2 text-gray-600">Add some items to get started.</p>
@@ -161,9 +163,10 @@ export default function Cart({ resources = [] }: CartProps) {
             ? firstItem.variantIdPickup
             : firstItem.variantIdShipped;
           const displayIdFirst =
+            firstItem.variantId ||
             activeVariantIdFirst ||
-            firstItem.variantIdPickup ||
-            firstItem.variantId;
+            firstItem.variantIdPickup;
+
           const { src, srcSet } = getShopifyImage(
             resource,
             '600',
@@ -202,16 +205,27 @@ export default function Cart({ resources = [] }: CartProps) {
                           {resource.title}
                         </h3>
                         {isService && (
-                          <span className="inline-flex items-center rounded-full bg-blue-50 px-2 py-0.5 text-xs font-bold text-blue-700">
+                          <span className="inline-flex items-center rounded-sm bg-blue-50 px-2 py-0.5 text-xs font-bold text-blue-700">
                             {serviceDuration} mins
                           </span>
                         )}
                       </div>
+
                       {boundServiceResource && (
-                        <p className="flex items-center text-xs font-bold text-blue-600">
-                          <span className="mr-1 inline-block h-2 w-2 rounded-full bg-blue-500"></span>
-                          Includes Booking: {boundServiceResource.title}
-                        </p>
+                        <div className="mt-2 flex items-center gap-2 rounded-md bg-blue-50 px-3 py-2">
+                          <span className="inline-block h-2 w-2 rounded-full bg-blue-500"></span>
+                          <div>
+                            <p className="text-sm font-bold text-blue-900">
+                              Includes Booking: {boundServiceResource.title}
+                            </p>
+                            <p className="text-xs text-blue-700">
+                              Duration:{' '}
+                              {boundServiceResource.optionsPayload
+                                ?.bookingLengthMinutes || 0}{' '}
+                              mins
+                            </p>
+                          </div>
+                        </div>
                       )}
                       <p className="mt-1 text-sm text-gray-500">
                         {resource.oneliner}
@@ -220,15 +234,15 @@ export default function Cart({ resources = [] }: CartProps) {
                   </div>
 
                   <div className="mt-4 space-y-4 border-t border-gray-100 pt-4">
-                    {items.map((item) => {
+                    {items.map((item, idx) => {
                       const activeVariantId = isPickupMode
                         ? item.variantIdPickup
                         : item.variantIdShipped;
 
                       const displayId =
+                        item.variantId ||
                         activeVariantId ||
-                        item.variantIdPickup ||
-                        item.variantId;
+                        item.variantIdPickup;
 
                       let price = '0.00';
                       let currency = 'USD';
@@ -242,30 +256,31 @@ export default function Cart({ resources = [] }: CartProps) {
                         price = variant.price?.amount || '0.00';
                         currency = variant.price?.currencyCode || 'USD';
                         variantTitle = getCleanVariantTitle(variant);
-                      } else if (variants.length > 0 && !variantTitle) {
-                        const v = variants[0];
-                        price = v.price?.amount || '0.00';
-                        currency = v.price?.currencyCode || 'USD';
-                        variantTitle = getCleanVariantTitle(v);
                       }
 
                       return (
                         <div
-                          key={`${item.resourceId}_${displayId}`}
+                          key={`${item.resourceId}_${displayId}_${idx}`}
                           className="flex items-center justify-between"
                         >
                           <div className="flex items-center gap-2">
-                            <div className="text-sm font-bold text-gray-700">
-                              {variantTitle &&
-                                variantTitle !== 'Default Title' && (
-                                  <span>{variantTitle}</span>
-                                )}
-                            </div>
-                            {isPickupMode && !isService && (
-                              <span className="inline-flex items-center rounded bg-gray-100 px-2 py-0.5 text-xs font-bold text-gray-800">
-                                Store Pickup
-                              </span>
+                            {variantTitle && (
+                              <div className="text-sm font-bold text-gray-700">
+                                <span>{variantTitle}</span>
+                              </div>
                             )}
+                            {isPickupMode &&
+                              !isService &&
+                              (item.variantIdPickup &&
+                              item.variantIdPickup !== item.variantIdShipped ? (
+                                <span className="inline-flex items-center rounded bg-gray-100 px-2 py-0.5 text-xs font-bold text-gray-800">
+                                  Store Pickup
+                                </span>
+                              ) : (
+                                <span className="inline-flex items-center rounded bg-red-50 px-2 py-0.5 text-xs font-bold text-red-700">
+                                  Not available for pickup
+                                </span>
+                              ))}
                           </div>
 
                           <div className="flex items-center">
@@ -296,9 +311,7 @@ export default function Cart({ resources = [] }: CartProps) {
                             ) : (
                               <div className="flex items-center rounded-md border border-gray-300">
                                 <button
-                                  onClick={() =>
-                                    dispatchDualAction(item, 'remove')
-                                  }
+                                  onClick={() => dispatchAction(item, 'remove')}
                                   className="px-3 py-1 text-gray-600 hover:bg-gray-100"
                                 >
                                   -
@@ -307,9 +320,7 @@ export default function Cart({ resources = [] }: CartProps) {
                                   {item.quantity}
                                 </span>
                                 <button
-                                  onClick={() =>
-                                    dispatchDualAction(item, 'add')
-                                  }
+                                  onClick={() => dispatchAction(item, 'add')}
                                   className="px-3 py-1 text-gray-600 hover:bg-gray-100"
                                 >
                                   +
@@ -333,6 +344,33 @@ export default function Cart({ resources = [] }: CartProps) {
           <button
             className="rounded-lg bg-black px-6 py-3 font-bold text-white transition-colors hover:bg-gray-800"
             onClick={() => {
+              const currentCart = cartStore.get();
+              const sanitizedCart = { ...currentCart };
+
+              Object.keys(sanitizedCart).forEach((key) => {
+                const item = { ...sanitizedCart[key] };
+
+                if (
+                  item.variantId &&
+                  !item.variantIdShipped &&
+                  !item.variantIdPickup
+                ) {
+                  sanitizedCart[key] = item;
+                  return;
+                }
+
+                if (isPickupMode && item.variantIdPickup) {
+                  item.variantId = item.variantIdPickup;
+                } else if (!isPickupMode && item.variantIdShipped) {
+                  item.variantId = item.variantIdShipped;
+                }
+
+                sanitizedCart[key] = item;
+              });
+
+              cartStore.set(sanitizedCart);
+              transactionTraceId.set(ulid());
+
               cartState.set(CART_STATES.CHECKOUT);
             }}
           >