astro-tractstack 2.2.10 → 2.3.0

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.1`,
+      `${addCommand} @ark-ui/react@^5.30.0 @heroicons/react@^2.1.1 @internationalized/date@3.10.0 @calcom/embed-react@^1.4.1`,
       {
         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.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 @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`
       )
     );
     console.log(

package/dist/index.js

@@ -21,7 +21,7 @@ function g(t, e) {
     }
   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;
 }
-async function w(t, e, c) {
+async function y(t, e, c) {
   e.info("TractStack: Injecting template files");
   const r = [
     // Core Configuration
@@ -586,6 +586,10 @@ async function w(t, e, c) {
       src: t("../templates/src/stores/resources.ts"),
       dest: "src/stores/resources.ts"
     },
+    {
+      src: t("../templates/src/stores/shopify.ts"),
+      dest: "src/stores/shopify.ts"
+    },
     // Compositor stores
     {
       src: t("../templates/src/stores/nodes.ts"),
@@ -856,8 +860,12 @@ async function w(t, e, c) {
       dest: "src/pages/storykeep.astro"
     },
     {
-      src: t("../templates/src/pages/storykeep/content.astro"),
-      dest: "src/pages/storykeep/content.astro"
+      src: t("../templates/src/pages/storykeep/pages.astro"),
+      dest: "src/pages/storykeep/pages.astro"
+    },
+    {
+      src: t("../templates/src/pages/storykeep/manage.astro"),
+      dest: "src/pages/storykeep/manage.astro"
     },
     {
       src: t("../templates/src/pages/storykeep/branding.astro"),
@@ -867,10 +875,18 @@ async function w(t, e, c) {
       src: t("../templates/src/pages/storykeep/advanced.astro"),
       dest: "src/pages/storykeep/advanced.astro"
     },
+    {
+      src: t("../templates/src/pages/storykeep/shopify.astro"),
+      dest: "src/pages/storykeep/shopify.astro"
+    },
     {
       src: t("../templates/src/pages/maint.astro"),
       dest: "src/pages/maint.astro"
     },
+    {
+      src: t("../templates/custom/shopify/cart.astro"),
+      dest: "src/pages/cart.astro"
+    },
     {
       src: t("../templates/src/pages/404.astro"),
       dest: "src/pages/404.astro"
@@ -887,6 +903,14 @@ async function w(t, e, c) {
       src: t("../templates/src/pages/sitemap.xml.ts"),
       dest: "src/pages/sitemap.xml.ts"
     },
+    {
+      src: t("../templates/src/pages/api/shopify/getProducts.ts"),
+      dest: "src/pages/api/shopify/getProducts.ts"
+    },
+    {
+      src: t("../templates/src/pages/api/shopify/createCart.ts"),
+      dest: "src/pages/api/shopify/createCart.ts"
+    },
     {
       src: t("../templates/src/pages/api/tailwind.ts"),
       dest: "src/pages/api/tailwind.ts"
@@ -1140,6 +1164,12 @@ async function w(t, e, c) {
       ),
       dest: "src/components/storykeep/Dashboard_Advanced.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/storykeep/Dashboard_Shopify.tsx"
+      ),
+      dest: "src/components/storykeep/Dashboard_Shopify.tsx"
+    },
     {
       src: t(
         "../templates/src/components/storykeep/Dashboard_Analytics.tsx"
@@ -1195,6 +1225,12 @@ async function w(t, e, c) {
       ),
       dest: "src/components/storykeep/controls/content/PaneTable.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/storykeep/controls/content/ProductTable.tsx"
+      ),
+      dest: "src/components/storykeep/controls/content/ProductTable.tsx"
+    },
     {
       src: t(
         "../templates/src/components/storykeep/controls/content/ContentBrowser.tsx"
@@ -2159,6 +2195,51 @@ async function w(t, e, c) {
       dest: "src/utils/customHelpers.ts",
       protected: !0
     },
+    {
+      src: t("../templates/custom/shopify/ShopifyProductGrid.tsx"),
+      dest: "src/custom/shopify/ShopifyProductGrid.tsx",
+      protected: !0
+    },
+    {
+      src: t("../templates/custom/shopify/ShopifyServiceList.tsx"),
+      dest: "src/custom/shopify/ShopifyServiceList.tsx",
+      protected: !0
+    },
+    {
+      src: t("../templates/custom/shopify/CartIcon.tsx"),
+      dest: "src/custom/shopify/CartIcon.tsx",
+      protected: !0
+    },
+    {
+      src: t("../templates/custom/shopify/ShopifyCartManager.tsx"),
+      dest: "src/custom/shopify/ShopifyCartManager.tsx",
+      protected: !0
+    },
+    {
+      src: t("../templates/custom/shopify/CartModal.tsx"),
+      dest: "src/custom/shopify/CartModal.tsx",
+      protected: !0
+    },
+    {
+      src: t("../templates/custom/shopify/CheckoutModal.tsx"),
+      dest: "src/custom/shopify/CheckoutModal.tsx",
+      protected: !0
+    },
+    {
+      src: t("../templates/custom/shopify/Cart.tsx"),
+      dest: "src/custom/shopify/Cart.tsx",
+      protected: !0
+    },
+    {
+      src: t("../templates/custom/shopify/CalDotComBooking.tsx"),
+      dest: "src/custom/shopify/CalDotComBooking.tsx",
+      protected: !0
+    },
+    {
+      src: t("../templates/custom/shopify/ShopifyCheckout.tsx"),
+      dest: "src/custom/shopify/ShopifyCheckout.tsx",
+      protected: !0
+    },
     // Example Components (Conditional)
     ...c?.includeExamples ? [
       {
@@ -2213,7 +2294,7 @@ async function w(t, e, c) {
         if (n(s.src))
           k(s.src, s.dest), e.info(`Updated ${s.dest}`);
         else {
-          const m = y(s.dest);
+          const m = w(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}`);
@@ -2222,7 +2303,7 @@ async function w(t, e, c) {
       e.error(`Failed to create ${s.dest}: ${o}`);
     }
 }
-function y(t) {
+function w(t) {
   return t.endsWith(".astro") ? `---
 // TractStack placeholder component
 ---
@@ -2233,7 +2314,7 @@ export default function Placeholder() {
 }` : t.endsWith(".ts") ? `// TractStack placeholder utility
 export const placeholder = "${t}";` : `# TractStack placeholder: ${t}`;
 }
-function C(t = {}) {
+function h(t = {}) {
   const { resolve: e } = b(import.meta.url);
   return {
     name: "astro-tractstack",
@@ -2243,7 +2324,7 @@ function C(t = {}) {
         const p = t.enableMultiTenant || !1;
         if (s.info(
           `DEBUG: enableMultiTenant = ${p}, process.env.PUBLIC_ENABLE_MULTI_TENANT = ${process.env.PUBLIC_ENABLE_MULTI_TENANT}`
-        ), s.info("TractStack: Starting file injection..."), await w(e, s, {
+        ), s.info("TractStack: Starting file injection..."), await y(e, s, {
           includeExamples: t.includeExamples,
           enableMultiTenant: p
         }), s.info("TractStack: File injection complete."), c.output !== "server")
@@ -2315,5 +2396,5 @@ function C(t = {}) {
   };
 }
 export {
-  C as default
+  h as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.2.10",
+  "version": "2.3.0",
   "description": "Astro integration for TractStack - the free web press by At Risk Media",
   "type": "module",
   "main": "dist/index.js",
@@ -24,6 +24,7 @@
     "build": "vite build && tsc -p tsconfig.dts.json",
     "format": "prettier --write .",
     "dev": "vite build --watch",
+    "lint": "prettier --check .",
     "prepublishOnly": "pnpm format && pnpm tsc && pnpm build"
   },
   "keywords": [
@@ -50,6 +51,7 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
+    "@calcom/embed-react": "^1.5.3",
     "kleur": "^4.1.5",
     "prompts": "^2.4.2"
   },

package/templates/custom/minimal/CodeHook.astro

@@ -4,9 +4,12 @@ import ListContent from '@/components/codehooks/ListContent.astro';
 import SearchWidget from '@/components/codehooks/SearchWidget.tsx';
 import BunnyVideoWrapper from '@/components/codehooks/BunnyVideoWrapper.astro';
 import EpinetWrapper from '@/components/codehooks/EpinetWrapper';
+import ShopifyProductGrid from '@/custom/shopify/ShopifyProductGrid';
+import ShopifyServiceList from '@/custom/shopify/ShopifyServiceList';
 import type { FullContentMapItem } from '@/types/tractstack';
 import type { ResourceNode } from '@/types/compositorTypes';
-// import CustomHero from './CustomHero.astro';  // Uncomment to add custom components
+// import CustomHero from './CustomHero.astro';
+// Uncomment to add custom components
 
 export interface Props {
   target: string;
@@ -20,7 +23,7 @@ export interface Props {
   };
 }
 
-const { target, options, fullContentMap /*, resourcesPayload */ } = Astro.props;
+const { target, options, fullContentMap, resourcesPayload = {} } = Astro.props;
 
 export const components = {
   'featured-article': true,
@@ -29,6 +32,8 @@ export const components = {
   'search-widget': true,
   'bunny-video': import.meta.env.PUBLIC_ENABLE_BUNNY === 'true',
   epinet: true,
+  'shopify-product-grid': true,
+  'shopify-service-list': true,
   // "custom-hero": true,  // Uncomment when you create CustomHero.astro
 };
 ---
@@ -43,11 +48,15 @@ export const components = {
   ) : target === 'bunny-video' && import.meta.env.PUBLIC_ENABLE_BUNNY ? (
     <BunnyVideoWrapper options={options} />
   ) : target === 'epinet' ? (
-    <EpinetWrapper fullContentMap={fullContentMap} client:only="react" /> /* 
-  : target === "custom-hero" ? (
+    <EpinetWrapper fullContentMap={fullContentMap} client:only="react" />
+  ) : target === 'shopify-product-grid' ? (
+    <ShopifyProductGrid resources={resourcesPayload} client:only="react" />
+  ) : target === 'shopify-service-list' ? (
+    <ShopifyServiceList resources={resourcesPayload} client:only="react" />
+  ) : (
+    /* : target === "custom-hero" ? (
     <CustomHero />
   ) */
-  ) : (
     <div class="rounded-lg bg-gray-50 p-8 text-center">
       <p class="text-gray-600">CodeHook target "{target}" not found</p>
     </div>

package/templates/custom/shopify/CalDotComBooking.tsx

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+import Cal, { getCalApi } from '@calcom/embed-react';
+
+interface CalDotComBookingProps {
+  calSlug: string;
+  traceId: string;
+  name: string;
+  email: string;
+  onSuccess: () => void;
+}
+
+export default function CalDotComBooking({
+  calSlug,
+  traceId,
+  name,
+  email,
+  onSuccess,
+}: CalDotComBookingProps) {
+  useEffect(() => {
+    (async function () {
+      const cal = await getCalApi();
+      cal('on', {
+        action: 'bookingSuccessful',
+        callback: () => {
+          onSuccess();
+        },
+      });
+    })();
+  }, [onSuccess]);
+
+  return (
+    <Cal
+      calLink={calSlug}
+      style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+      config={{
+        name,
+        email,
+        metadata: {
+          traceId,
+        },
+      }}
+    />
+  );
+}

package/templates/custom/shopify/Cart.tsx

@@ -0,0 +1,345 @@
+import { useState, useEffect } from 'react';
+import { useStore } from '@nanostores/react';
+import {
+  addQueue,
+  cartStore,
+  cartState,
+  CART_STATES,
+  isShopifyHandoff,
+  type CartAction,
+  type CartItemState,
+} from '@/stores/shopify';
+import { getShopifyImage } from '@/utils/helpers';
+import type { ResourceNode } from '@/types/compositorTypes';
+
+interface CartProps {
+  resources: ResourceNode[];
+}
+
+const getCleanVariantTitle = (variant: any) => {
+  if (variant?.selectedOptions) {
+    return variant.selectedOptions
+      .filter((o: any) => o.name !== 'Mode')
+      .map((o: any) => o.value)
+      .join(' / ');
+  }
+  return variant?.title || '';
+};
+
+export default function Cart({ resources = [] }: CartProps) {
+  const cart = useStore(cartStore);
+  const isHandoff = useStore(isShopifyHandoff);
+  const [pickupEnabled, setPickupEnabled] = useState(false);
+
+  const cartValues = Object.values(cart);
+
+  const boundServiceIds = new Set(
+    cartValues
+      .map((item) => item.boundResourceId)
+      .filter((id) => !!id) as string[]
+  );
+
+  const hasServiceBoundProduct = boundServiceIds.size > 0;
+
+  const displayableItems = cartValues.filter(
+    (item) => !boundServiceIds.has(item.resourceId)
+  );
+
+  const groupedItems = displayableItems.reduce(
+    (acc, item) => {
+      if (!acc[item.resourceId]) {
+        acc[item.resourceId] = [];
+      }
+      acc[item.resourceId].push(item);
+      return acc;
+    },
+    {} as Record<string, CartItemState[]>
+  );
+
+  const hasService = cartValues.some((item) => {
+    const resource = resources.find((r) => r.id === item.resourceId);
+    return !!resource?.optionsPayload?.bookingLengthMinutes;
+  });
+
+  const hasPhysicalProductWithPickup = cartValues.some(
+    (item) => !!item.variantIdPickup
+  );
+
+  const canPickup = hasService && hasPhysicalProductWithPickup;
+
+  useEffect(() => {
+    if (hasServiceBoundProduct) {
+      setPickupEnabled(true);
+    } else 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,
+        action,
+        suppressModal: action === 'add' ? true : undefined,
+      });
+    }
+
+    addQueue.set([...addQueue.get(), ...queueUpdates]);
+  };
+
+  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>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <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>
+
+      <ul className="divide-y divide-gray-200">
+        {Object.keys(groupedItems).map((resourceId) => {
+          const items = groupedItems[resourceId];
+          const resource = resources.find((r) => r.id === resourceId);
+          if (!resource || items.length === 0) return null;
+
+          const isService = !!resource.optionsPayload?.bookingLengthMinutes;
+          const serviceDuration = resource.optionsPayload?.bookingLengthMinutes;
+
+          const firstItem = items[0];
+          const boundServiceId = firstItem.boundResourceId;
+          const boundServiceResource = boundServiceId
+            ? resources.find((r) => r.id === boundServiceId)
+            : null;
+
+          const activeVariantIdFirst = isPickupMode
+            ? firstItem.variantIdPickup
+            : firstItem.variantIdShipped;
+          const displayIdFirst =
+            activeVariantIdFirst ||
+            firstItem.variantIdPickup ||
+            firstItem.variantId;
+          const { src, srcSet } = getShopifyImage(
+            resource,
+            '600',
+            displayIdFirst
+          );
+
+          let productData: any = {};
+          try {
+            if (resource.optionsPayload?.shopifyData) {
+              productData = JSON.parse(resource.optionsPayload.shopifyData);
+            }
+          } catch (e) {
+            console.error('Failed to parse Shopify data', resource.id);
+          }
+          const variants = productData?.variants || [];
+
+          return (
+            <li key={resourceId} className="p-6">
+              <div className="flex items-start">
+                {!isService && (
+                  <div className="h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
+                    <img
+                      src={src}
+                      srcSet={srcSet}
+                      alt={resource.title}
+                      className="aspect-square h-full w-full object-cover object-center"
+                      loading="lazy"
+                    />
+                  </div>
+                )}
+                <div className="ml-4 flex-1">
+                  <div className="flex justify-between">
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <h3 className="text-base font-bold text-gray-900">
+                          {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">
+                            {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>
+                      )}
+                      <p className="mt-1 text-sm text-gray-500">
+                        {resource.oneliner}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="mt-4 space-y-4 border-t border-gray-100 pt-4">
+                    {items.map((item) => {
+                      const activeVariantId = isPickupMode
+                        ? item.variantIdPickup
+                        : item.variantIdShipped;
+
+                      const displayId =
+                        activeVariantId ||
+                        item.variantIdPickup ||
+                        item.variantId;
+
+                      let price = '0.00';
+                      let currency = 'USD';
+                      let variantTitle = '';
+
+                      const variant = variants.find(
+                        (v: any) => v.id === displayId
+                      );
+
+                      if (variant) {
+                        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}`}
+                          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>
+                            )}
+                          </div>
+
+                          <div className="flex items-center">
+                            <div className="mr-6 text-right">
+                              <p className="text-sm font-bold text-gray-900">
+                                {price && parseFloat(price) > 0
+                                  ? `${(parseFloat(price) * item.quantity).toFixed(2)} ${currency}`
+                                  : 'No Charge'}
+                              </p>
+                            </div>
+
+                            {isService ? (
+                              <button
+                                onClick={() =>
+                                  addQueue.set([
+                                    ...addQueue.get(),
+                                    {
+                                      resourceId: item.resourceId,
+                                      action: 'remove',
+                                      variantId: item.variantId,
+                                    },
+                                  ])
+                                }
+                                className="rounded-md border border-gray-300 px-3 py-1 text-sm font-bold text-gray-600 hover:bg-gray-100"
+                              >
+                                Remove
+                              </button>
+                            ) : (
+                              <div className="flex items-center rounded-md border border-gray-300">
+                                <button
+                                  onClick={() =>
+                                    dispatchDualAction(item, 'remove')
+                                  }
+                                  className="px-3 py-1 text-gray-600 hover:bg-gray-100"
+                                >
+                                  -
+                                </button>
+                                <span className="border-l border-r border-gray-300 px-3 py-1 text-gray-900">
+                                  {item.quantity}
+                                </span>
+                                <button
+                                  onClick={() =>
+                                    dispatchDualAction(item, 'add')
+                                  }
+                                  className="px-3 py-1 text-gray-600 hover:bg-gray-100"
+                                >
+                                  +
+                                </button>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+
+      <div className="rounded-b-lg border-t border-gray-200 bg-gray-50 px-6 py-6">
+        <div className="flex justify-end">
+          <button
+            className="rounded-lg bg-black px-6 py-3 font-bold text-white transition-colors hover:bg-gray-800"
+            onClick={() => {
+              cartState.set(CART_STATES.CHECKOUT);
+            }}
+          >
+            Proceed to Checkout
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}