@shopify/shop-minis-react 0.2.9 → 0.3.1

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":"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"}

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;"}