@shopify/shop-minis-react
Version:
React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)
76 lines (75 loc) • 2.29 kB
JavaScript
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