@shopify/shop-minis-react
Version:
React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)
100 lines (99 loc) • 3.38 kB
JavaScript
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: 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,
m,
a,
d,
l,
u,
f
]);
p.useEffect(() => () => {
e.current && clearTimeout(e.current);
}, []);
const N = s ? "View product" : t ? "Added to cart" : "Add to cart";
return /* @__PURE__ */ o(
j,
{
onClick: A,
disabled: i,
className: h(
"relative overflow-hidden transition-all duration-300",
T
),
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 },
exit: { scale: 0, rotate: 180 },
transition: {
duration: 0.4,
ease: [0.175, 0.885, 0.32, 1.275]
// bounce effect
},
className: "absolute left-2",
style: { x: -8 },
children: /* @__PURE__ */ o(F, { className: "size-4" })
}
) }),
/* @__PURE__ */ o("span", { className: h(t && "pl-5", "transition-all duration-300"), children: N })
] })
}
);
}
export {
L as AddToCartButton
};
//# sourceMappingURL=add-to-cart.js.map