@shopify/shop-minis-react 0.2.7 → 0.3.0

package/dist/_virtual/index4.js

@@ -1,5 +1,5 @@
-var e = { exports: {} };
+var r = {};
 export {
-  e as __module
+  r as __exports
 };
 //# sourceMappingURL=index4.js.map

package/dist/_virtual/index5.js

@@ -1,6 +1,5 @@
-import { __require as r } from "../shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js";
-var i = r();
+var e = { exports: {} };
 export {
-  i as l
+  e as __module
 };
 //# sourceMappingURL=index5.js.map

package/dist/_virtual/index5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/index6.js

@@ -1,5 +1,6 @@
-var r = {};
+import { __require as r } from "../shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js";
+var i = r();
 export {
-  r as __exports
+  i as l
 };
 //# sourceMappingURL=index6.js.map

package/dist/_virtual/index6.js.map

@@ -1 +1 @@
-{"version":3,"file":"index6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/MinisContainer.js

@@ -3,35 +3,35 @@ import { useState as u, useCallback as f, useEffect as p } from "react";
 import { useShopActions as v } from "../internal/useShopActions.js";
 import { injectMocks as y } from "../mocks.js";
 import { ImagePickerProvider as h } from "../providers/ImagePickerProvider.js";
-import { ErrorBoundary as g } from "./ErrorBoundary.js";
+import { ErrorBoundary as E } from "./ErrorBoundary.js";
 y();
 function b({ children: a }) {
-  const [i, n] = u(!1), { reportError: o } = v(), c = f(
-    async (t) => {
+  const [i, o] = u(!1), t = v(), c = f(
+    async (n) => {
       try {
-        await o(t);
+        t && t.reportError && await t.reportError(n);
       } catch (e) {
         console.error("Failed to report error to app:", e);
       }
     },
-    [o]
+    [t]
   );
   return p(() => {
-    const t = () => window.minisSDK ? (n(!0), !0) : !1;
-    if (t())
+    const n = () => window.minisSDK ? (o(!0), !0) : !1;
+    if (n())
       return;
     const e = (d) => {
       const { type: m } = JSON.parse(d.data);
-      m === "MINIS_SDK_READY" && n(!0);
+      m === "MINIS_SDK_READY" && o(!0);
     };
     window.addEventListener("message", e), document.addEventListener("message", e);
     const s = setInterval(() => {
-      t() && clearInterval(s);
+      n() && clearInterval(s);
     }, 100);
     return () => {
       clearInterval(s), window.removeEventListener("message", e), document.removeEventListener("message", e);
     };
-  }, []), i ? /* @__PURE__ */ r(g, { onError: c, children: /* @__PURE__ */ r(h, { children: a }) }) : /* @__PURE__ */ r("div", { className: "h-screen bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ l("div", { className: "text-center", children: [
+  }, []), i ? /* @__PURE__ */ r(E, { onError: c, children: /* @__PURE__ */ r(h, { children: a }) }) : /* @__PURE__ */ r("div", { className: "h-screen bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ l("div", { className: "text-center", children: [
     /* @__PURE__ */ r("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4" }),
     /* @__PURE__ */ r("p", { className: "text-gray-600", children: "Loading..." })
   ] }) });

package/dist/components/MinisContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MinisContainer.js","sources":["../../src/components/MinisContainer.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useState} from 'react'\n\nimport {ReportErrorParams} from '@shopify/shop-minis-platform/actions'\n\nimport {useShopActions} from '../internal/useShopActions'\nimport {injectMocks} from '../mocks'\nimport {ImagePickerProvider} from '../providers/ImagePickerProvider'\n\nimport {ErrorBoundary} from './ErrorBoundary'\n\ninjectMocks()\n\nexport function MinisContainer({children}: {children: React.ReactNode}) {\n  const [isSDKReady, setIsSDKReady] = useState(false)\n  const {reportError} = useShopActions()\n\n  const handleError = useCallback(\n    async (params: ReportErrorParams) => {\n      try {\n        await reportError(params)\n      } catch (error) {\n        // If reporting fails, at least log to console\n        console.error('Failed to report error to app:', error)\n      }\n    },\n    [reportError]\n  )\n\n  useEffect(() => {\n    // Function to check if SDK is ready\n    const checkSDKReady = () => {\n      if (window.minisSDK) {\n        setIsSDKReady(true)\n        return true\n      }\n      return false\n    }\n\n    // Check immediately\n    if (checkSDKReady()) {\n      return\n    }\n\n    // If not ready, set up a listener for the MINIS_SDK_READY event\n    const handleSDKReady = (event: any) => {\n      const {type} = JSON.parse(event.data)\n\n      if (type === 'MINIS_SDK_READY') {\n        setIsSDKReady(true)\n      }\n    }\n\n    // Listen for the MINIS_SDK_READY event\n    window.addEventListener('message', handleSDKReady)\n    document.addEventListener('message', handleSDKReady)\n\n    // Also poll for SDK availability as a fallback\n    const pollInterval = setInterval(() => {\n      if (checkSDKReady()) {\n        clearInterval(pollInterval)\n      }\n    }, 100)\n\n    // Cleanup\n    return () => {\n      clearInterval(pollInterval)\n      window.removeEventListener('message', handleSDKReady)\n      document.removeEventListener('message', handleSDKReady)\n    }\n  }, [])\n\n  // Don't render anything until SDK is ready\n  if (!isSDKReady) {\n    return (\n      <div className=\"h-screen bg-gray-50 flex items-center justify-center\">\n        <div className=\"text-center\">\n          <div className=\"animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4\" />\n          <p className=\"text-gray-600\">Loading...</p>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <ErrorBoundary onError={handleError}>\n      <ImagePickerProvider>{children}</ImagePickerProvider>\n    </ErrorBoundary>\n  )\n}\n"],"names":["injectMocks","MinisContainer","children","isSDKReady","setIsSDKReady","useState","reportError","useShopActions","handleError","useCallback","params","error","useEffect","checkSDKReady","handleSDKReady","event","type","pollInterval","ErrorBoundary","jsx","ImagePickerProvider","jsxs"],"mappings":";;;;;;AAUAA,EAAY;AAEI,SAAAC,EAAe,EAAC,UAAAC,KAAwC;AACtE,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,EAAC,aAAAC,EAAW,IAAIC,EAAe,GAE/BC,IAAcC;AAAA,IAClB,OAAOC,MAA8B;AAC/B,UAAA;AACF,cAAMJ,EAAYI,CAAM;AAAA,eACjBC,GAAO;AAEN,gBAAA,MAAM,kCAAkCA,CAAK;AAAA,MAAA;AAAA,IAEzD;AAAA,IACA,CAACL,CAAW;AAAA,EACd;AA8CA,SA5CAM,EAAU,MAAM;AAEd,UAAMC,IAAgB,MAChB,OAAO,YACTT,EAAc,EAAI,GACX,MAEF;AAIT,QAAIS;AACF;AAII,UAAAC,IAAiB,CAACC,MAAe;AACrC,YAAM,EAAC,MAAAC,EAAI,IAAI,KAAK,MAAMD,EAAM,IAAI;AAEpC,MAAIC,MAAS,qBACXZ,EAAc,EAAI;AAAA,IAEtB;AAGO,WAAA,iBAAiB,WAAWU,CAAc,GACxC,SAAA,iBAAiB,WAAWA,CAAc;AAG7C,UAAAG,IAAe,YAAY,MAAM;AACrC,MAAIJ,OACF,cAAcI,CAAY;AAAA,OAE3B,GAAG;AAGN,WAAO,MAAM;AACX,oBAAcA,CAAY,GACnB,OAAA,oBAAoB,WAAWH,CAAc,GAC3C,SAAA,oBAAoB,WAAWA,CAAc;AAAA,IACxD;AAAA,EACF,GAAG,EAAE,GAGAX,sBAYFe,GAAc,EAAA,SAASV,GACtB,UAAC,gBAAAW,EAAAC,GAAA,EAAqB,UAAAlB,GAAS,EACjC,CAAA,sBAZG,OAAI,EAAA,WAAU,wDACb,UAAC,gBAAAmB,EAAA,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,IAAC,gBAAAF,EAAA,OAAA,EAAI,WAAU,4EAA4E,CAAA;AAAA,IAC1F,gBAAAA,EAAA,KAAA,EAAE,WAAU,iBAAgB,UAAU,aAAA,CAAA;AAAA,EAAA,EAAA,CACzC,EACF,CAAA;AASN;"}
+{"version":3,"file":"MinisContainer.js","sources":["../../src/components/MinisContainer.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useState} from 'react'\n\nimport {ReportErrorParams} from '@shopify/shop-minis-platform/actions'\n\nimport {useShopActions} from '../internal/useShopActions'\nimport {injectMocks} from '../mocks'\nimport {ImagePickerProvider} from '../providers/ImagePickerProvider'\n\nimport {ErrorBoundary} from './ErrorBoundary'\n\ninjectMocks()\n\nexport function MinisContainer({children}: {children: React.ReactNode}) {\n  const [isSDKReady, setIsSDKReady] = useState(false)\n  const actions = useShopActions()\n\n  const handleError = useCallback(\n    async (params: ReportErrorParams) => {\n      try {\n        if (actions && actions.reportError) {\n          await actions.reportError(params)\n        }\n      } catch (error) {\n        // If reporting fails, at least log to console\n        console.error('Failed to report error to app:', error)\n      }\n    },\n    [actions]\n  )\n\n  useEffect(() => {\n    // Function to check if SDK is ready\n    const checkSDKReady = () => {\n      if (window.minisSDK) {\n        setIsSDKReady(true)\n        return true\n      }\n      return false\n    }\n\n    // Check immediately\n    if (checkSDKReady()) {\n      return\n    }\n\n    // If not ready, set up a listener for the MINIS_SDK_READY event\n    const handleSDKReady = (event: any) => {\n      const {type} = JSON.parse(event.data)\n\n      if (type === 'MINIS_SDK_READY') {\n        setIsSDKReady(true)\n      }\n    }\n\n    // Listen for the MINIS_SDK_READY event\n    window.addEventListener('message', handleSDKReady)\n    document.addEventListener('message', handleSDKReady)\n\n    // Also poll for SDK availability as a fallback\n    const pollInterval = setInterval(() => {\n      if (checkSDKReady()) {\n        clearInterval(pollInterval)\n      }\n    }, 100)\n\n    // Cleanup\n    return () => {\n      clearInterval(pollInterval)\n      window.removeEventListener('message', handleSDKReady)\n      document.removeEventListener('message', handleSDKReady)\n    }\n  }, [])\n\n  // Don't render anything until SDK is ready\n  if (!isSDKReady) {\n    return (\n      <div className=\"h-screen bg-gray-50 flex items-center justify-center\">\n        <div className=\"text-center\">\n          <div className=\"animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4\" />\n          <p className=\"text-gray-600\">Loading...</p>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <ErrorBoundary onError={handleError}>\n      <ImagePickerProvider>{children}</ImagePickerProvider>\n    </ErrorBoundary>\n  )\n}\n"],"names":["injectMocks","MinisContainer","children","isSDKReady","setIsSDKReady","useState","actions","useShopActions","handleError","useCallback","params","error","useEffect","checkSDKReady","handleSDKReady","event","type","pollInterval","ErrorBoundary","jsx","ImagePickerProvider","jsxs"],"mappings":";;;;;;AAUAA,EAAY;AAEI,SAAAC,EAAe,EAAC,UAAAC,KAAwC;AACtE,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5CC,IAAUC,EAAe,GAEzBC,IAAcC;AAAA,IAClB,OAAOC,MAA8B;AAC/B,UAAA;AACE,QAAAJ,KAAWA,EAAQ,eACf,MAAAA,EAAQ,YAAYI,CAAM;AAAA,eAE3BC,GAAO;AAEN,gBAAA,MAAM,kCAAkCA,CAAK;AAAA,MAAA;AAAA,IAEzD;AAAA,IACA,CAACL,CAAO;AAAA,EACV;AA8CA,SA5CAM,EAAU,MAAM;AAEd,UAAMC,IAAgB,MAChB,OAAO,YACTT,EAAc,EAAI,GACX,MAEF;AAIT,QAAIS;AACF;AAII,UAAAC,IAAiB,CAACC,MAAe;AACrC,YAAM,EAAC,MAAAC,EAAI,IAAI,KAAK,MAAMD,EAAM,IAAI;AAEpC,MAAIC,MAAS,qBACXZ,EAAc,EAAI;AAAA,IAEtB;AAGO,WAAA,iBAAiB,WAAWU,CAAc,GACxC,SAAA,iBAAiB,WAAWA,CAAc;AAG7C,UAAAG,IAAe,YAAY,MAAM;AACrC,MAAIJ,OACF,cAAcI,CAAY;AAAA,OAE3B,GAAG;AAGN,WAAO,MAAM;AACX,oBAAcA,CAAY,GACnB,OAAA,oBAAoB,WAAWH,CAAc,GAC3C,SAAA,oBAAoB,WAAWA,CAAc;AAAA,IACxD;AAAA,EACF,GAAG,EAAE,GAGAX,sBAYFe,GAAc,EAAA,SAASV,GACtB,UAAC,gBAAAW,EAAAC,GAAA,EAAqB,UAAAlB,GAAS,EACjC,CAAA,sBAZG,OAAI,EAAA,WAAU,wDACb,UAAC,gBAAAmB,EAAA,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,IAAC,gBAAAF,EAAA,OAAA,EAAI,WAAU,4EAA4E,CAAA;AAAA,IAC1F,gBAAAA,EAAA,KAAA,EAAE,WAAU,iBAAgB,UAAU,aAAA,CAAA;AAAA,EAAA,EAAA,CACzC,EACF,CAAA;AASN;"}

package/dist/components/atoms/product-variant-price.js

@@ -1,61 +1,54 @@
-import { jsx as n, jsxs as d, Fragment as c } from "react/jsx-runtime";
+import { jsx as n, jsxs as h, Fragment as d } from "react/jsx-runtime";
 import { formatMoney as a } from "../../lib/formatMoney.js";
 import { cn as i } from "../../lib/utils.js";
-function b({
+function N({
   amount: r,
   currencyCode: t,
   compareAtPriceAmount: s,
   compareAtPriceCurrencyCode: o,
   currentPriceClassName: e,
   originalPriceClassName: m,
-  containerClassName: x,
-  className: f
+  className: x
 }) {
   if (!r || !t)
     return null;
-  const g = s && s !== r, l = String(r), h = s ? String(s) : void 0;
-  return /* @__PURE__ */ n(
-    "div",
-    {
-      className: i("flex items-center gap-2", x, f),
-      children: g ? /* @__PURE__ */ d(c, { children: [
-        /* @__PURE__ */ n(
-          "span",
-          {
-            className: i(
-              "text-sm font-semibold text-gray-900",
-              e
-            ),
-            children: a(l, t)
-          }
+  const f = s && s !== r, l = String(r), g = s ? String(s) : void 0;
+  return /* @__PURE__ */ n("div", { className: i("flex items-center gap-2", x), children: f ? /* @__PURE__ */ h(d, { children: [
+    /* @__PURE__ */ n(
+      "span",
+      {
+        className: i(
+          "text-sm font-semibold text-gray-900",
+          e
+        ),
+        children: a(l, t)
+      }
+    ),
+    /* @__PURE__ */ n(
+      "span",
+      {
+        className: i(
+          "text-sm text-gray-500 line-through",
+          m
         ),
-        /* @__PURE__ */ n(
-          "span",
-          {
-            className: i(
-              "text-sm text-gray-500 line-through",
-              m
-            ),
-            children: a(
-              h,
-              o || t
-            )
-          }
+        children: a(
+          g,
+          o || t
         )
-      ] }) : /* @__PURE__ */ n(
-        "span",
-        {
-          className: i(
-            "text-sm font-semibold text-gray-900",
-            e
-          ),
-          children: a(l, t)
-        }
-      )
+      }
+    )
+  ] }) : /* @__PURE__ */ n(
+    "span",
+    {
+      className: i(
+        "text-sm font-semibold text-gray-900",
+        e
+      ),
+      children: a(l, t)
     }
-  );
+  ) });
 }
 export {
-  b as ProductVariantPrice
+  N as ProductVariantPrice
 };
 //# sourceMappingURL=product-variant-price.js.map

package/dist/components/atoms/product-variant-price.js.map

@@ -1 +1 @@
-{"version":3,"file":"product-variant-price.js","sources":["../../../src/components/atoms/product-variant-price.tsx"],"sourcesContent":["import {formatMoney} from '../../lib/formatMoney'\nimport {cn} from '../../lib/utils'\n\nexport interface ProductVariantPriceProps {\n  amount: number | string\n  currencyCode?: string\n  compareAtPriceAmount?: number | string\n  compareAtPriceCurrencyCode?: string\n  currentPriceClassName?: string\n  originalPriceClassName?: string\n  containerClassName?: string\n  className?: string\n}\n\nexport function ProductVariantPrice({\n  amount,\n  currencyCode,\n  compareAtPriceAmount,\n  compareAtPriceCurrencyCode,\n  currentPriceClassName,\n  originalPriceClassName,\n  containerClassName,\n  className,\n}: ProductVariantPriceProps) {\n  if (!amount || !currencyCode) {\n    return null\n  }\n\n  const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount\n\n  const amountStr = String(amount)\n  const compareAtPriceAmountStr = compareAtPriceAmount\n    ? String(compareAtPriceAmount)\n    : undefined\n\n  return (\n    <div\n      className={cn('flex items-center gap-2', containerClassName, className)}\n    >\n      {hasDiscount ? (\n        <>\n          <span\n            className={cn(\n              'text-sm font-semibold text-gray-900',\n              currentPriceClassName\n            )}\n          >\n            {formatMoney(amountStr, currencyCode)}\n          </span>\n          <span\n            className={cn(\n              'text-sm text-gray-500 line-through',\n              originalPriceClassName\n            )}\n          >\n            {formatMoney(\n              compareAtPriceAmountStr!,\n              compareAtPriceCurrencyCode || currencyCode\n            )}\n          </span>\n        </>\n      ) : (\n        <span\n          className={cn(\n            'text-sm font-semibold text-gray-900',\n            currentPriceClassName\n          )}\n        >\n          {formatMoney(amountStr, currencyCode)}\n        </span>\n      )}\n    </div>\n  )\n}\n"],"names":["ProductVariantPrice","amount","currencyCode","compareAtPriceAmount","compareAtPriceCurrencyCode","currentPriceClassName","originalPriceClassName","containerClassName","className","hasDiscount","amountStr","compareAtPriceAmountStr","jsx","cn","jsxs","Fragment","formatMoney"],"mappings":";;;AAcO,SAASA,EAAoB;AAAA,EAClC,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,4BAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,WAAAC;AACF,GAA6B;AACvB,MAAA,CAACP,KAAU,CAACC;AACP,WAAA;AAGH,QAAAO,IAAcN,KAAwBA,MAAyBF,GAE/DS,IAAY,OAAOT,CAAM,GACzBU,IAA0BR,IAC5B,OAAOA,CAAoB,IAC3B;AAGF,SAAA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,2BAA2BN,GAAoBC,CAAS;AAAA,MAErE,cAEG,gBAAAM,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,cACAR;AAAA,YACF;AAAA,YAEC,UAAAW,EAAYN,GAAWR,CAAY;AAAA,UAAA;AAAA,QACtC;AAAA,QACA,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,cACAP;AAAA,YACF;AAAA,YAEC,UAAAU;AAAA,cACCL;AAAA,cACAP,KAA8BF;AAAA,YAAA;AAAA,UAChC;AAAA,QAAA;AAAA,MACF,EAAA,CACF,IAEA,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC;AAAA,YACT;AAAA,YACAR;AAAA,UACF;AAAA,UAEC,UAAAW,EAAYN,GAAWR,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IACtC;AAAA,EAEJ;AAEJ;"}
+{"version":3,"file":"product-variant-price.js","sources":["../../../src/components/atoms/product-variant-price.tsx"],"sourcesContent":["import {formatMoney} from '../../lib/formatMoney'\nimport {cn} from '../../lib/utils'\n\nexport interface ProductVariantPriceProps {\n  amount: number | string\n  currencyCode?: string\n  compareAtPriceAmount?: number | string\n  compareAtPriceCurrencyCode?: string\n  currentPriceClassName?: string\n  originalPriceClassName?: string\n  className?: string\n}\n\nexport function ProductVariantPrice({\n  amount,\n  currencyCode,\n  compareAtPriceAmount,\n  compareAtPriceCurrencyCode,\n  currentPriceClassName,\n  originalPriceClassName,\n  className,\n}: ProductVariantPriceProps) {\n  if (!amount || !currencyCode) {\n    return null\n  }\n\n  const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount\n\n  const amountStr = String(amount)\n  const compareAtPriceAmountStr = compareAtPriceAmount\n    ? String(compareAtPriceAmount)\n    : undefined\n\n  return (\n    <div className={cn('flex items-center gap-2', className)}>\n      {hasDiscount ? (\n        <>\n          <span\n            className={cn(\n              'text-sm font-semibold text-gray-900',\n              currentPriceClassName\n            )}\n          >\n            {formatMoney(amountStr, currencyCode)}\n          </span>\n          <span\n            className={cn(\n              'text-sm text-gray-500 line-through',\n              originalPriceClassName\n            )}\n          >\n            {formatMoney(\n              compareAtPriceAmountStr!,\n              compareAtPriceCurrencyCode || currencyCode\n            )}\n          </span>\n        </>\n      ) : (\n        <span\n          className={cn(\n            'text-sm font-semibold text-gray-900',\n            currentPriceClassName\n          )}\n        >\n          {formatMoney(amountStr, currencyCode)}\n        </span>\n      )}\n    </div>\n  )\n}\n"],"names":["ProductVariantPrice","amount","currencyCode","compareAtPriceAmount","compareAtPriceCurrencyCode","currentPriceClassName","originalPriceClassName","className","hasDiscount","amountStr","compareAtPriceAmountStr","jsx","cn","jsxs","Fragment","formatMoney"],"mappings":";;;AAaO,SAASA,EAAoB;AAAA,EAClC,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,4BAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,WAAAC;AACF,GAA6B;AACvB,MAAA,CAACN,KAAU,CAACC;AACP,WAAA;AAGH,QAAAM,IAAcL,KAAwBA,MAAyBF,GAE/DQ,IAAY,OAAOR,CAAM,GACzBS,IAA0BP,IAC5B,OAAOA,CAAoB,IAC3B;AAGF,SAAA,gBAAAQ,EAAC,SAAI,WAAWC,EAAG,2BAA2BL,CAAS,GACpD,cAEG,gBAAAM,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAP;AAAA,QACF;AAAA,QAEC,UAAAU,EAAYN,GAAWP,CAAY;AAAA,MAAA;AAAA,IACtC;AAAA,IACA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAN;AAAA,QACF;AAAA,QAEC,UAAAS;AAAA,UACCL;AAAA,UACAN,KAA8BF;AAAA,QAAA;AAAA,MAChC;AAAA,IAAA;AAAA,EACF,EAAA,CACF,IAEA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAP;AAAA,MACF;AAAA,MAEC,UAAAU,EAAYN,GAAWP,CAAY;AAAA,IAAA;AAAA,EAAA,GAG1C;AAEJ;"}

package/dist/components/commerce/add-to-cart.js

@@ -1,62 +1,79 @@
-import { jsx as r, jsxs as A } from "react/jsx-runtime";
-import * as m from "react";
-import { useState as T, useCallback as v } from "react";
-import { cn as f } from "../../lib/utils.js";
-import { Button as x } from "../atoms/button.js";
-import { useShopCartActions as C } from "../../hooks/shop/useShopCartActions.js";
-import { useErrorToast as y } from "../../hooks/util/useErrorToast.js";
-import { AnimatePresence as N } from "../../shop-minis-react/node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.js";
-import { motion as k } from "../../shop-minis-react/node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
-import w from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/check.js";
-function P({
-  disabled: o = !1,
-  className: u,
-  size: d = "default",
-  productId: a,
-  productVariantId: i,
-  discountCodes: n
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import * as p from "react";
+import { useState as w, useCallback as y } from "react";
+import { useShopCartActions as k } from "../../internal/useShopCartActions.js";
+import { cn as h } from "../../lib/utils.js";
+import { Button as j } from "../atoms/button.js";
+import { useShopNavigation as E } from "../../hooks/navigation/useShopNavigation.js";
+import { useErrorToast as R } from "../../hooks/util/useErrorToast.js";
+import { AnimatePresence as S } from "../../shop-minis-react/node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.js";
+import { motion as B } from "../../shop-minis-react/node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
+import F from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/check.js";
+function L({
+  disabled: i = !1,
+  className: T,
+  size: v = "default",
+  productVariantId: a,
+  discountCodes: l,
+  product: x
 }) {
-  const { addToCart: c } = C(), [t, s] = T(!1), e = m.useRef(void 0), { showErrorToast: l } = y(), h = v(async () => {
-    if (!(t || o))
-      try {
-        a && i && c({
-          productId: a,
-          productVariantId: i,
-          quantity: 1,
-          discountCodes: n
-        }).then(() => {
-        }).catch(() => {
-          l({ message: "Failed to add to cart" });
-        }), s(!0), e.current && clearTimeout(e.current), e.current = window.setTimeout(() => {
-          s(!1);
-        }, 2e3);
-      } catch (p) {
-        s(!1), console.error("Failed to add to cart:", p);
+  const { addToCart: d } = k(), { navigateToProduct: m } = E(), [t, n] = w(!1), e = p.useRef(void 0), { id: r, referral: s, variants: C } = x ?? {}, u = C?.find(
+    (c) => c.id === a
+  )?.image?.url, { showErrorToast: f } = R(), A = y(async () => {
+    if (!i) {
+      if (r && s) {
+        m({
+          productId: r
+        });
+        return;
       }
+      if (!t)
+        try {
+          r && a && d({
+            productId: r,
+            productVariantId: a,
+            quantity: 1,
+            discountCodes: l,
+            variantImageUrl: u
+          }).then(() => {
+          }).catch(() => {
+            f({ message: "Failed to add to cart" });
+          }), n(!0), e.current && clearTimeout(e.current), e.current = window.setTimeout(() => {
+            n(!1);
+          }, 2e3);
+        } catch (c) {
+          n(!1), console.error("Failed to add to cart:", c);
+        }
+    }
   }, [
+    i,
+    r,
+    s,
     t,
-    o,
-    c,
+    m,
     a,
-    i,
-    n,
-    l
+    d,
+    l,
+    u,
+    f
   ]);
-  return m.useEffect(() => () => {
+  p.useEffect(() => () => {
     e.current && clearTimeout(e.current);
-  }, []), /* @__PURE__ */ r(
-    x,
+  }, []);
+  const N = s ? "View product" : t ? "Added to cart" : "Add to cart";
+  return /* @__PURE__ */ o(
+    j,
     {
-      onClick: h,
-      disabled: o,
-      className: f(
+      onClick: A,
+      disabled: i,
+      className: h(
         "relative overflow-hidden transition-all duration-300",
-        u
+        T
       ),
-      size: d,
-      children: /* @__PURE__ */ A("div", { className: "relative flex items-center justify-center", children: [
-        /* @__PURE__ */ r(N, { children: t && /* @__PURE__ */ r(
-          k.div,
+      size: v,
+      children: /* @__PURE__ */ g("div", { className: "relative flex items-center justify-center", children: [
+        /* @__PURE__ */ o(S, { children: t && /* @__PURE__ */ o(
+          B.div,
           {
             initial: { scale: 0, rotate: -180 },
             animate: { scale: 1, rotate: 0 },
@@ -66,17 +83,17 @@ function P({
               ease: [0.175, 0.885, 0.32, 1.275]
               // bounce effect
             },
-            className: "absolute left-0",
+            className: "absolute left-2",
             style: { x: -8 },
-            children: /* @__PURE__ */ r(w, { className: "size-4" })
+            children: /* @__PURE__ */ o(F, { className: "size-4" })
           }
         ) }),
-        /* @__PURE__ */ r("span", { className: f(t && "pl-5", "transition-all duration-300"), children: t ? "Added to cart" : "Add to cart" })
+        /* @__PURE__ */ o("span", { className: h(t && "pl-5", "transition-all duration-300"), children: N })
       ] })
     }
   );
 }
 export {
-  P as AddToCartButton
+  L as AddToCartButton
 };
 //# sourceMappingURL=add-to-cart.js.map

package/dist/components/commerce/add-to-cart.js.map

@@ -1 +1 @@
-{"version":3,"file":"add-to-cart.js","sources":["../../../src/components/commerce/add-to-cart.tsx"],"sourcesContent":["import * as React from 'react'\nimport {useState, useCallback} from 'react'\n\nimport {CheckIcon} from 'lucide-react'\nimport {motion, AnimatePresence} from 'motion/react'\n\nimport {useErrorToast, useShopCartActions} from '../../hooks'\nimport {cn} from '../../lib/utils'\nimport {Button} from '../atoms/button'\n\ninterface AddToCartButtonProps {\n  disabled?: boolean\n  className?: string\n  size?: 'default' | 'sm' | 'lg'\n  /**\n   * The discount codes to apply to the cart.\n   */\n  discountCodes?: string[]\n  /**\n   * The GID of the product. E.g. `gid://shopify/Product/123`.\n   */\n  productId: string\n  /**\n   * The GID of the product variant. E.g. `gid://shopify/ProductVariant/456`.\n   */\n  productVariantId: string\n}\n\nexport function AddToCartButton({\n  disabled = false,\n  className,\n  size = 'default',\n  productId,\n  productVariantId,\n  discountCodes,\n}: AddToCartButtonProps) {\n  const {addToCart} = useShopCartActions()\n  const [isAdded, setIsAdded] = useState(false)\n  const timeoutRef = React.useRef<number | undefined>(undefined)\n\n  const {showErrorToast} = useErrorToast()\n\n  const handleClick = useCallback(async () => {\n    if (isAdded || disabled) return\n\n    try {\n      // Call the callback if provided\n      if (productId && productVariantId) {\n        // Optimistic update with error toast\n        addToCart({\n          productId,\n          productVariantId,\n          quantity: 1,\n          discountCodes,\n        })\n          .then(() => {})\n          .catch(() => {\n            showErrorToast({message: 'Failed to add to cart'})\n          })\n      }\n\n      // Show success state\n      setIsAdded(true)\n\n      // Clear any existing timeout\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n      }\n\n      // Reset to initial state after delay\n      timeoutRef.current = window.setTimeout(() => {\n        setIsAdded(false)\n      }, 2000)\n    } catch (error) {\n      // Handle error - reset to initial state\n      setIsAdded(false)\n      console.error('Failed to add to cart:', error)\n    }\n  }, [\n    isAdded,\n    disabled,\n    addToCart,\n    productId,\n    productVariantId,\n    discountCodes,\n    showErrorToast,\n  ])\n\n  // Cleanup timeout on unmount\n  React.useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n      }\n    }\n  }, [])\n\n  return (\n    <Button\n      onClick={handleClick}\n      disabled={disabled}\n      className={cn(\n        'relative overflow-hidden transition-all duration-300',\n        className\n      )}\n      size={size}\n    >\n      <div className=\"relative flex items-center justify-center\">\n        <AnimatePresence>\n          {isAdded && (\n            <motion.div\n              initial={{scale: 0, rotate: -180}}\n              animate={{scale: 1, rotate: 0}}\n              exit={{scale: 0, rotate: 180}}\n              transition={{\n                duration: 0.4,\n                ease: [0.175, 0.885, 0.32, 1.275], // bounce effect\n              }}\n              className=\"absolute left-0\"\n              style={{x: -8}}\n            >\n              <CheckIcon className=\"size-4\" />\n            </motion.div>\n          )}\n        </AnimatePresence>\n        <span className={cn(isAdded && 'pl-5', 'transition-all duration-300')}>\n          {isAdded ? 'Added to cart' : 'Add to cart'}\n        </span>\n      </div>\n    </Button>\n  )\n}\n"],"names":["AddToCartButton","disabled","className","size","productId","productVariantId","discountCodes","addToCart","useShopCartActions","isAdded","setIsAdded","useState","timeoutRef","React","showErrorToast","useErrorToast","handleClick","useCallback","error","jsx","Button","cn","jsxs","AnimatePresence","motion","CheckIcon"],"mappings":";;;;;;;;;;AA4BO,SAASA,EAAgB;AAAA,EAC9B,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,eAAAC;AACF,GAAyB;AACjB,QAAA,EAAC,WAAAC,EAAS,IAAIC,EAAmB,GACjC,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAaC,EAAM,OAA2B,MAAS,GAEvD,EAAC,gBAAAC,EAAc,IAAIC,EAAc,GAEjCC,IAAcC,EAAY,YAAY;AAC1C,QAAI,EAAAR,KAAWR;AAEX,UAAA;AAEF,QAAIG,KAAaC,KAELE,EAAA;AAAA,UACR,WAAAH;AAAA,UACA,kBAAAC;AAAA,UACA,UAAU;AAAA,UACV,eAAAC;AAAA,QAAA,CACD,EACE,KAAK,MAAM;AAAA,QAAA,CAAE,EACb,MAAM,MAAM;AACI,UAAAQ,EAAA,EAAC,SAAS,yBAAwB;AAAA,QAAA,CAClD,GAILJ,EAAW,EAAI,GAGXE,EAAW,WACb,aAAaA,EAAW,OAAO,GAItBA,EAAA,UAAU,OAAO,WAAW,MAAM;AAC3C,UAAAF,EAAW,EAAK;AAAA,WACf,GAAI;AAAA,eACAQ,GAAO;AAEd,QAAAR,EAAW,EAAK,GACR,QAAA,MAAM,0BAA0BQ,CAAK;AAAA,MAAA;AAAA,EAC/C,GACC;AAAA,IACDT;AAAA,IACAR;AAAA,IACAM;AAAA,IACAH;AAAA,IACAC;AAAA,IACAC;AAAA,IACAQ;AAAA,EAAA,CACD;AAGD,SAAAD,EAAM,UAAU,MACP,MAAM;AACX,IAAID,EAAW,WACb,aAAaA,EAAW,OAAO;AAAA,EAEnC,GACC,EAAE,GAGH,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASJ;AAAA,MACT,UAAAf;AAAA,MACA,WAAWoB;AAAA,QACT;AAAA,QACAnB;AAAA,MACF;AAAA,MACA,MAAAC;AAAA,MAEA,UAAA,gBAAAmB,EAAC,OAAI,EAAA,WAAU,6CACb,UAAA;AAAA,QAAA,gBAAAH,EAACI,KACE,UACCd,KAAA,gBAAAU;AAAA,UAACK,EAAO;AAAA,UAAP;AAAA,YACC,SAAS,EAAC,OAAO,GAAG,QAAQ,KAAI;AAAA,YAChC,SAAS,EAAC,OAAO,GAAG,QAAQ,EAAC;AAAA,YAC7B,MAAM,EAAC,OAAO,GAAG,QAAQ,IAAG;AAAA,YAC5B,YAAY;AAAA,cACV,UAAU;AAAA,cACV,MAAM,CAAC,OAAO,OAAO,MAAM,KAAK;AAAA;AAAA,YAClC;AAAA,YACA,WAAU;AAAA,YACV,OAAO,EAAC,GAAG,GAAE;AAAA,YAEb,UAAA,gBAAAL,EAACM,GAAU,EAAA,WAAU,SAAS,CAAA;AAAA,UAAA;AAAA,QAAA,GAGpC;AAAA,QACA,gBAAAN,EAAC,QAAK,EAAA,WAAWE,EAAGZ,KAAW,QAAQ,6BAA6B,GACjE,UAAUA,IAAA,kBAAkB,cAC/B,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"add-to-cart.js","sources":["../../../src/components/commerce/add-to-cart.tsx"],"sourcesContent":["import * as React from 'react'\nimport {useState, useCallback} from 'react'\n\nimport {Product} from '@shopify/shop-minis-platform'\nimport {CheckIcon} from 'lucide-react'\nimport {motion, AnimatePresence} from 'motion/react'\n\nimport {useErrorToast, useShopNavigation} from '../../hooks'\nimport {useShopCartActions} from '../../internal/useShopCartActions'\nimport {cn} from '../../lib/utils'\nimport {Button} from '../atoms/button'\n\ninterface AddToCartButtonProps {\n  disabled?: boolean\n  className?: string\n  size?: 'default' | 'sm' | 'lg'\n  /**\n   * The discount codes to apply to the cart.\n   */\n  discountCodes?: string[]\n  /**\n   * The GID of the product variant. E.g. `gid://shopify/ProductVariant/456`.\n   */\n  productVariantId: string\n\n  /**\n   * The product to add to the cart.\n   */\n  product?: Product\n}\n\nexport function AddToCartButton({\n  disabled = false,\n  className,\n  size = 'default',\n  productVariantId,\n  discountCodes,\n  product,\n}: AddToCartButtonProps) {\n  const {addToCart} = useShopCartActions()\n  const {navigateToProduct} = useShopNavigation()\n  const [isAdded, setIsAdded] = useState(false)\n  const timeoutRef = React.useRef<number | undefined>(undefined)\n  const {id, referral, variants} = product ?? {}\n\n  const variantImageUrl = variants?.find(\n    variant => variant.id === productVariantId\n  )?.image?.url\n\n  const {showErrorToast} = useErrorToast()\n\n  const handleClick = useCallback(async () => {\n    if (disabled) return\n\n    if (id && referral) {\n      navigateToProduct({\n        productId: id,\n      })\n\n      return\n    }\n\n    if (isAdded) return\n\n    try {\n      if (id && productVariantId) {\n        addToCart({\n          productId: id,\n          productVariantId,\n          quantity: 1,\n          discountCodes,\n          variantImageUrl,\n        })\n          .then(() => {})\n          .catch(() => {\n            showErrorToast({message: 'Failed to add to cart'})\n          })\n      }\n\n      // Show success state\n      setIsAdded(true)\n\n      // Clear any existing timeout\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n      }\n\n      // Reset to initial state after delay\n      timeoutRef.current = window.setTimeout(() => {\n        setIsAdded(false)\n      }, 2000)\n    } catch (error) {\n      // Handle error - reset to initial state\n      setIsAdded(false)\n      console.error('Failed to add to cart:', error)\n    }\n  }, [\n    disabled,\n    id,\n    referral,\n    isAdded,\n    navigateToProduct,\n    productVariantId,\n    addToCart,\n    discountCodes,\n    variantImageUrl,\n    showErrorToast,\n  ])\n\n  // Cleanup timeout on unmount\n  React.useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n      }\n    }\n  }, [])\n\n  const addToCartText = isAdded ? 'Added to cart' : 'Add to cart'\n  const buttonText = referral ? 'View product' : addToCartText\n\n  return (\n    <Button\n      onClick={handleClick}\n      disabled={disabled}\n      className={cn(\n        'relative overflow-hidden transition-all duration-300',\n        className\n      )}\n      size={size}\n    >\n      <div className=\"relative flex items-center justify-center\">\n        <AnimatePresence>\n          {isAdded && (\n            <motion.div\n              initial={{scale: 0, rotate: -180}}\n              animate={{scale: 1, rotate: 0}}\n              exit={{scale: 0, rotate: 180}}\n              transition={{\n                duration: 0.4,\n                ease: [0.175, 0.885, 0.32, 1.275], // bounce effect\n              }}\n              className=\"absolute left-2\"\n              style={{x: -8}}\n            >\n              <CheckIcon className=\"size-4\" />\n            </motion.div>\n          )}\n        </AnimatePresence>\n        <span className={cn(isAdded && 'pl-5', 'transition-all duration-300')}>\n          {buttonText}\n        </span>\n      </div>\n    </Button>\n  )\n}\n"],"names":["AddToCartButton","disabled","className","size","productVariantId","discountCodes","product","addToCart","useShopCartActions","navigateToProduct","useShopNavigation","isAdded","setIsAdded","useState","timeoutRef","React","id","referral","variants","variantImageUrl","variant","showErrorToast","useErrorToast","handleClick","useCallback","error","buttonText","jsx","Button","cn","jsxs","AnimatePresence","motion","CheckIcon"],"mappings":";;;;;;;;;;;AA+BO,SAASA,EAAgB;AAAA,EAC9B,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,kBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,SAAAC;AACF,GAAyB;AACjB,QAAA,EAAC,WAAAC,EAAS,IAAIC,EAAmB,GACjC,EAAC,mBAAAC,EAAiB,IAAIC,EAAkB,GACxC,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAaC,EAAM,OAA2B,MAAS,GACvD,EAAC,IAAAC,GAAI,UAAAC,GAAU,UAAAC,EAAQ,IAAIZ,KAAW,CAAC,GAEvCa,IAAkBD,GAAU;AAAA,IAChC,CAAAE,MAAWA,EAAQ,OAAOhB;AAAA,KACzB,OAAO,KAEJ,EAAC,gBAAAiB,EAAc,IAAIC,EAAc,GAEjCC,IAAcC,EAAY,YAAY;AAC1C,QAAI,CAAAvB,GAEJ;AAAA,UAAIe,KAAMC,GAAU;AACA,QAAAR,EAAA;AAAA,UAChB,WAAWO;AAAA,QAAA,CACZ;AAED;AAAA,MAAA;AAGF,UAAI,CAAAL;AAEA,YAAA;AACF,UAAIK,KAAMZ,KACEG,EAAA;AAAA,YACR,WAAWS;AAAA,YACX,kBAAAZ;AAAA,YACA,UAAU;AAAA,YACV,eAAAC;AAAA,YACA,iBAAAc;AAAA,UAAA,CACD,EACE,KAAK,MAAM;AAAA,UAAA,CAAE,EACb,MAAM,MAAM;AACI,YAAAE,EAAA,EAAC,SAAS,yBAAwB;AAAA,UAAA,CAClD,GAILT,EAAW,EAAI,GAGXE,EAAW,WACb,aAAaA,EAAW,OAAO,GAItBA,EAAA,UAAU,OAAO,WAAW,MAAM;AAC3C,YAAAF,EAAW,EAAK;AAAA,aACf,GAAI;AAAA,iBACAa,GAAO;AAEd,UAAAb,EAAW,EAAK,GACR,QAAA,MAAM,0BAA0Ba,CAAK;AAAA,QAAA;AAAA;AAAA,EAC/C,GACC;AAAA,IACDxB;AAAA,IACAe;AAAA,IACAC;AAAA,IACAN;AAAA,IACAF;AAAA,IACAL;AAAA,IACAG;AAAA,IACAF;AAAA,IACAc;AAAA,IACAE;AAAA,EAAA,CACD;AAGD,EAAAN,EAAM,UAAU,MACP,MAAM;AACX,IAAID,EAAW,WACb,aAAaA,EAAW,OAAO;AAAA,EAEnC,GACC,EAAE;AAGC,QAAAY,IAAaT,IAAW,iBADRN,IAAU,kBAAkB;AAIhD,SAAA,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASL;AAAA,MACT,UAAAtB;AAAA,MACA,WAAW4B;AAAA,QACT;AAAA,QACA3B;AAAA,MACF;AAAA,MACA,MAAAC;AAAA,MAEA,UAAA,gBAAA2B,EAAC,OAAI,EAAA,WAAU,6CACb,UAAA;AAAA,QAAA,gBAAAH,EAACI,KACE,UACCpB,KAAA,gBAAAgB;AAAA,UAACK,EAAO;AAAA,UAAP;AAAA,YACC,SAAS,EAAC,OAAO,GAAG,QAAQ,KAAI;AAAA,YAChC,SAAS,EAAC,OAAO,GAAG,QAAQ,EAAC;AAAA,YAC7B,MAAM,EAAC,OAAO,GAAG,QAAQ,IAAG;AAAA,YAC5B,YAAY;AAAA,cACV,UAAU;AAAA,cACV,MAAM,CAAC,OAAO,OAAO,MAAM,KAAK;AAAA;AAAA,YAClC;AAAA,YACA,WAAU;AAAA,YACV,OAAO,EAAC,GAAG,GAAE;AAAA,YAEb,UAAA,gBAAAL,EAACM,GAAU,EAAA,WAAU,SAAS,CAAA;AAAA,UAAA;AAAA,QAAA,GAGpC;AAAA,QACA,gBAAAN,EAAC,UAAK,WAAWE,EAAGlB,KAAW,QAAQ,6BAA6B,GACjE,UACHe,EAAA,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/commerce/buy-now.js

@@ -0,0 +1,75 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useState as h, useCallback as d } from "react";
+import { useShopCartActions as w } from "../../internal/useShopCartActions.js";
+import { cn as g } from "../../lib/utils.js";
+import { Button as v } from "../atoms/button.js";
+import { AnimatePresence as P } from "../../shop-minis-react/node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.js";
+import { motion as x } from "../../shop-minis-react/node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
+import { useShopNavigation as B } from "../../hooks/navigation/useShopNavigation.js";
+import { useErrorToast as k } from "../../hooks/util/useErrorToast.js";
+function I({
+  disabled: r = !1,
+  className: f,
+  size: l = "default",
+  productVariantId: i,
+  discountCode: s,
+  product: p
+}) {
+  const { buyProduct: c } = w(), { navigateToProduct: m } = B(), [o, e] = h(!1), { id: t, referral: a } = p ?? {}, { showErrorToast: u } = k(), y = d(async () => {
+    if (!r) {
+      if (t && a) {
+        m({
+          productId: t
+        });
+        return;
+      }
+      if (!o)
+        try {
+          t && i && (e(!0), await c({
+            productId: t,
+            productVariantId: i,
+            quantity: 1,
+            discountCode: s
+          }), e(!1));
+        } catch {
+          u({ message: "Failed to complete purchase" }), e(!1);
+        }
+    }
+  }, [
+    r,
+    t,
+    a,
+    o,
+    m,
+    i,
+    c,
+    s,
+    u
+  ]);
+  return /* @__PURE__ */ n(
+    v,
+    {
+      onClick: y,
+      disabled: r || o,
+      className: g("relative overflow-hidden", f),
+      size: l,
+      "aria-live": "polite",
+      "aria-busy": o,
+      children: /* @__PURE__ */ n(P, { mode: "wait", children: /* @__PURE__ */ n(
+        x.span,
+        {
+          initial: { opacity: 0, y: 10 },
+          animate: { opacity: 1, y: 0 },
+          exit: { opacity: 0, y: -10 },
+          transition: { duration: 0.2 },
+          children: a ? "View product" : "Buy now"
+        },
+        "text"
+      ) })
+    }
+  );
+}
+export {
+  I as BuyNowButton
+};
+//# sourceMappingURL=buy-now.js.map

package/dist/components/commerce/buy-now.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buy-now.js","sources":["../../../src/components/commerce/buy-now.tsx"],"sourcesContent":["import {useState, useCallback} from 'react'\n\nimport {Product} from '@shopify/shop-minis-platform'\nimport {motion, AnimatePresence} from 'motion/react'\n\nimport {useErrorToast, useShopNavigation} from '../../hooks'\nimport {useShopCartActions} from '../../internal/useShopCartActions'\nimport {cn} from '../../lib/utils'\nimport {Button} from '../atoms/button'\n\ninterface BuyNowButtonProps {\n  disabled?: boolean\n  className?: string\n  size?: 'default' | 'sm' | 'lg'\n  /**\n   * The discount code to apply to the purchase.\n   */\n  discountCode?: string\n  /**\n   * The GID of the product variant. E.g. `gid://shopify/ProductVariant/456`.\n   */\n  productVariantId: string\n  /**\n   * The product to buy now.\n   */\n  product?: Product\n}\n\nexport function BuyNowButton({\n  disabled = false,\n  className,\n  size = 'default',\n  productVariantId,\n  discountCode,\n  product,\n}: BuyNowButtonProps) {\n  const {buyProduct} = useShopCartActions()\n  const {navigateToProduct} = useShopNavigation()\n  const [isPurchasing, setIsPurchasing] = useState(false)\n  const {id, referral} = product ?? {}\n\n  const {showErrorToast} = useErrorToast()\n\n  const handleClick = useCallback(async () => {\n    if (disabled) return\n\n    if (id && referral) {\n      navigateToProduct({\n        productId: id,\n      })\n\n      return\n    }\n\n    if (isPurchasing) return\n\n    try {\n      if (id && productVariantId) {\n        setIsPurchasing(true)\n\n        await buyProduct({\n          productId: id,\n          productVariantId,\n          quantity: 1,\n          discountCode,\n        })\n\n        setIsPurchasing(false)\n      }\n    } catch (error) {\n      showErrorToast({message: 'Failed to complete purchase'})\n      setIsPurchasing(false)\n    }\n  }, [\n    disabled,\n    id,\n    referral,\n    isPurchasing,\n    navigateToProduct,\n    productVariantId,\n    buyProduct,\n    discountCode,\n    showErrorToast,\n  ])\n\n  return (\n    <Button\n      onClick={handleClick}\n      disabled={disabled || isPurchasing}\n      className={cn('relative overflow-hidden', className)}\n      size={size}\n      aria-live=\"polite\"\n      aria-busy={isPurchasing}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.span\n          key=\"text\"\n          initial={{opacity: 0, y: 10}}\n          animate={{opacity: 1, y: 0}}\n          exit={{opacity: 0, y: -10}}\n          transition={{duration: 0.2}}\n        >\n          {referral ? 'View product' : 'Buy now'}\n        </motion.span>\n      </AnimatePresence>\n    </Button>\n  )\n}\n"],"names":["BuyNowButton","disabled","className","size","productVariantId","discountCode","product","buyProduct","useShopCartActions","navigateToProduct","useShopNavigation","isPurchasing","setIsPurchasing","useState","id","referral","showErrorToast","useErrorToast","handleClick","useCallback","jsx","Button","cn","AnimatePresence","motion"],"mappings":";;;;;;;;;AA4BO,SAASA,EAAa;AAAA,EAC3B,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AACF,GAAsB;AACd,QAAA,EAAC,YAAAC,EAAU,IAAIC,EAAmB,GAClC,EAAC,mBAAAC,EAAiB,IAAIC,EAAkB,GACxC,CAACC,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAChD,EAAC,IAAAC,GAAI,UAAAC,EAAQ,IAAIT,KAAW,CAAC,GAE7B,EAAC,gBAAAU,EAAc,IAAIC,EAAc,GAEjCC,IAAcC,EAAY,YAAY;AAC1C,QAAI,CAAAlB,GAEJ;AAAA,UAAIa,KAAMC,GAAU;AACA,QAAAN,EAAA;AAAA,UAChB,WAAWK;AAAA,QAAA,CACZ;AAED;AAAA,MAAA;AAGF,UAAI,CAAAH;AAEA,YAAA;AACF,UAAIG,KAAMV,MACRQ,EAAgB,EAAI,GAEpB,MAAML,EAAW;AAAA,YACf,WAAWO;AAAA,YACX,kBAAAV;AAAA,YACA,UAAU;AAAA,YACV,cAAAC;AAAA,UAAA,CACD,GAEDO,EAAgB,EAAK;AAAA,gBAET;AACC,UAAAI,EAAA,EAAC,SAAS,+BAA8B,GACvDJ,EAAgB,EAAK;AAAA,QAAA;AAAA;AAAA,EACvB,GACC;AAAA,IACDX;AAAA,IACAa;AAAA,IACAC;AAAA,IACAJ;AAAA,IACAF;AAAA,IACAL;AAAA,IACAG;AAAA,IACAF;AAAA,IACAW;AAAA,EAAA,CACD;AAGC,SAAA,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASH;AAAA,MACT,UAAUjB,KAAYU;AAAA,MACtB,WAAWW,EAAG,4BAA4BpB,CAAS;AAAA,MACnD,MAAAC;AAAA,MACA,aAAU;AAAA,MACV,aAAWQ;AAAA,MAEX,UAAA,gBAAAS,EAACG,GAAgB,EAAA,MAAK,QACpB,UAAA,gBAAAH;AAAA,QAACI,EAAO;AAAA,QAAP;AAAA,UAEC,SAAS,EAAC,SAAS,GAAG,GAAG,GAAE;AAAA,UAC3B,SAAS,EAAC,SAAS,GAAG,GAAG,EAAC;AAAA,UAC1B,MAAM,EAAC,SAAS,GAAG,GAAG,IAAG;AAAA,UACzB,YAAY,EAAC,UAAU,IAAG;AAAA,UAEzB,cAAW,iBAAiB;AAAA,QAAA;AAAA,QANzB;AAAA,MAAA,EAQR,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/commerce/product-card.js

@@ -1,18 +1,18 @@
 import { jsx as o, jsxs as v } from "react/jsx-runtime";
-import * as F from "react";
-import { useState as A, useCallback as C, useMemo as k, useContext as B } from "react";
-import { useShopNavigation as V } from "../../hooks/navigation/useShopNavigation.js";
-import { useSavedProductsActions as j } from "../../hooks/user/useSavedProductsActions.js";
-import { formatMoney as z } from "../../lib/formatMoney.js";
+import * as N from "react";
+import { useState as A, useCallback as C, useMemo as k, useContext as z } from "react";
+import { useShopNavigation as B } from "../../hooks/navigation/useShopNavigation.js";
+import { useSavedProductsActions as V } from "../../hooks/user/useSavedProductsActions.js";
+import { formatMoney as j } from "../../lib/formatMoney.js";
 import { cn as s } from "../../lib/utils.js";
 import { Image as T } from "../atoms/image.js";
 import { ProductVariantPrice as E } from "../atoms/product-variant-price.js";
 import { Touchable as O } from "../atoms/touchable.js";
 import { Badge as S } from "../ui/badge.js";
 import { FavoriteButton as L } from "./favorite-button.js";
-const b = F.createContext(void 0);
+const b = N.createContext(void 0);
 function u() {
-  const t = B(b);
+  const t = z(b);
   if (!t)
     throw new Error(
       "ProductCard components must be used within a ProductCard provider"
@@ -27,7 +27,7 @@ function M({
     "div",
     {
       className: s(
-        "relative w-full overflow-hidden rounded-xl border-0",
+        "relative size-full overflow-hidden rounded-xl border-0",
         t
       ),
       ...e
@@ -55,10 +55,8 @@ function R({
     {
       "data-slot": "product-card-image-container",
       className: s(
-        // Ensure the product image is stretched to the full size of the container (can't use width/height: 100% because of flex)
-        "flex justify-stretch items-stretch",
         "relative overflow-hidden rounded-xl border border-gray-200",
-        "w-full  aspect-square",
+        "aspect-square",
         r === "compact" ? "min-h-[104px]" : "min-h-[134px]",
         t
       ),
@@ -76,7 +74,8 @@ function q({ className: t, ...e }) {
         alt: d,
         aspectRatio: 1,
         thumbhash: c,
-        className: s("size-full object-cover", t),
+        objectFit: "cover",
+        className: s("size-full", t),
         ...e
       }
     ) : /* @__PURE__ */ o(
@@ -85,7 +84,7 @@ function q({ className: t, ...e }) {
         "data-slot": "product-card-image",
         src: l,
         alt: d,
-        className: s("size-full", t),
+        className: s("size-full object-cover", t),
         ...e
       }
     ),
@@ -179,7 +178,7 @@ function K() {
   const { product: t, selectedProductVariant: e, variant: r } = u();
   if (r !== "priceOverlay") return null;
   const a = e?.price || t.price, n = a?.currencyCode, i = a?.amount;
-  return !n || !i ? null : /* @__PURE__ */ o(w, { position: "top-left", children: z(i, n) });
+  return !n || !i ? null : /* @__PURE__ */ o(w, { position: "top-left", children: j(i, n) });
 }
 function at({
   product: t,
@@ -193,7 +192,7 @@ function at({
   children: p,
   favoriteButtonDisabled: l = !1
 }) {
-  const { navigateToProduct: h } = V(), { saveProduct: g, unsaveProduct: P } = j(), [f, y] = A(t.isFavorited), x = C(() => {
+  const { navigateToProduct: h } = B(), { saveProduct: g, unsaveProduct: P } = V(), [f, y] = A(t.isFavorited), x = C(() => {
     a && (d?.(), h({
       productId: t.id
     }));
@@ -222,7 +221,7 @@ function at({
     g,
     P,
     c
-  ]), N = k(
+  ]), F = k(
     () => ({
       // Core data
       product: t,
@@ -252,7 +251,7 @@ function at({
       l
     ]
   );
-  return /* @__PURE__ */ o(b.Provider, { value: N, children: p ?? /* @__PURE__ */ v(M, { children: [
+  return /* @__PURE__ */ o(b.Provider, { value: F, children: p ?? /* @__PURE__ */ v(M, { children: [
     /* @__PURE__ */ v(R, { children: [
       /* @__PURE__ */ o(q, {}),
       r === "priceOverlay" && /* @__PURE__ */ o(K, {}),