@shopify/shop-minis-react
Version:
React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)
301 lines (300 loc) • 7.18 kB
JavaScript
import { jsxs as y, jsx as t, Fragment as S } from "react/jsx-runtime";
import * as P from "react";
import { cva as q } from "../../shop-minis-react/node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
import { useShopNavigation as B } from "../../hooks/navigation/useShopNavigation.js";
import { useSavedProductsActions as M } from "../../hooks/user/useSavedProductsActions.js";
import { ProductReviewStars as U } from "../../internal/components/product-review-stars.js";
import { cn as n } from "../../lib/utils.js";
import { formatMoney as T } from "../../utils/formatMoney.js";
import { Touchable as V } from "../atoms/touchable.js";
import { Card as E, CardContent as G, CardAction as H } from "../ui/card.js";
import { FavoriteButton as J } from "./favorite-button.js";
import { Root as K } from "../../shop-minis-react/node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.js";
const Q = q("", {
variants: {
layout: {
horizontal: "w-full !flex-row items-center gap-3 px-4 py-3",
vertical: "flex-col"
},
discount: {
none: "",
small: "",
large: ""
}
},
defaultVariants: {
layout: "horizontal",
discount: "none"
}
});
function W({
className: e,
layout: o,
discount: r,
asChild: i = !1,
onPress: a,
...c
}) {
return /* @__PURE__ */ t(
V,
{
onClick: a,
whileTap: { opacity: 0.7 },
transition: {
opacity: { type: "tween", duration: 0.08, ease: "easeInOut" }
},
children: /* @__PURE__ */ t(
i ? K : E,
{
className: n(
Q({ layout: o, discount: r }),
"border-0 bg-white rounded-xl shadow-lg shadow-black/10",
e
),
...c
}
)
}
);
}
function X({
className: e,
layout: o = "horizontal",
...r
}) {
return /* @__PURE__ */ t(
"div",
{
"data-slot": "product-link-image",
className: n(
"overflow-hidden rounded-md bg-muted",
o === "horizontal" ? "h-16 w-16 flex-shrink-0" : "aspect-square w-full",
e
),
...r
}
);
}
function Y({
className: e,
layout: o = "horizontal",
...r
}) {
return /* @__PURE__ */ t(
G,
{
className: n(
o === "horizontal" ? "flex-1 min-w-0 space-y-1 px-0 py-0" : "space-y-2",
e
),
...r
}
);
}
function Z({
className: e,
children: o,
...r
}) {
return /* @__PURE__ */ t(
"h3",
{
"data-slot": "product-link-title",
className: n(
"text-sm font-medium leading-tight text-gray-900 truncate overflow-hidden whitespace-nowrap text-ellipsis",
e
),
...r,
children: o
}
);
}
function _({ className: e, ...o }) {
return /* @__PURE__ */ t(
"div",
{
"data-slot": "product-link-price",
className: n("flex items-center gap-2", e),
...o
}
);
}
function $({
className: e,
...o
}) {
return /* @__PURE__ */ t(
"span",
{
"data-slot": "product-link-current-price",
className: n("text-sm font-semibold text-gray-900", e),
...o
}
);
}
function tt({
className: e,
...o
}) {
return /* @__PURE__ */ t(
"span",
{
"data-slot": "product-link-original-price",
className: n("text-sm text-gray-500 line-through", e),
...o
}
);
}
function et({
className: e,
...o
}) {
return /* @__PURE__ */ t(
"span",
{
"data-slot": "product-link-discount-price",
className: n("text-sm font-semibold text-red-600", e),
...o
}
);
}
function ot({ className: e, ...o }) {
return /* @__PURE__ */ t(
"div",
{
"data-slot": "product-link-rating",
className: n("", e),
...o
}
);
}
function rt({
className: e,
hideFavoriteAction: o = !1,
onPress: r,
filled: i = !1,
customAction: a,
...c
}) {
const l = o ? null : /* @__PURE__ */ t(J, { filled: i, onClick: r });
return /* @__PURE__ */ t(
H,
{
className: n("flex-shrink-0 self-center px-0 py-0", e),
...c,
children: /* @__PURE__ */ t(
V,
{
stopPropagation: !0,
onClick: r,
whileTap: { opacity: 0.7, scale: 0.95 },
transition: {
opacity: { type: "tween", duration: 0.08, ease: "easeInOut" },
scale: { type: "tween", duration: 0.08, ease: "easeInOut" }
},
children: a ? /* @__PURE__ */ t(S, { children: a }) : l
}
)
}
);
}
function gt({
product: e,
hideFavoriteAction: o = !1,
onClick: r,
customAction: i,
onCustomActionClick: a,
reviewsDisabled: c = !1
}) {
const { navigateToProduct: l } = B(), { saveProduct: w, unsaveProduct: k } = M(), {
id: s,
title: I,
featuredImage: L,
reviewAnalytics: N,
price: d,
compareAtPrice: u,
isFavorited: A,
selectedVariant: m,
defaultVariantId: p,
shop: f
} = e, [h, b] = P.useState(A), C = N?.averageRating, F = N?.reviewCount, g = d?.amount ? T(d?.amount, d?.currencyCode) : void 0, z = L?.url, j = L?.altText || I, v = u?.amount ? T(u?.amount, u?.currencyCode) : void 0, R = v && v !== g, O = P.useCallback(() => {
l({
productId: s
}), r?.(e);
}, [l, s, r, e]), D = P.useCallback(async () => {
if (i || a) {
a?.();
return;
}
const x = h;
b(!x);
try {
x ? await k({
productId: s,
shopId: f.id,
productVariantId: m?.id || p
}) : await w({
productId: s,
shopId: f.id,
productVariantId: m?.id || p
});
} catch {
b(x);
}
}, [
i,
a,
h,
k,
s,
f.id,
m?.id,
p,
w
]);
return /* @__PURE__ */ y(
W,
{
layout: "horizontal",
discount: R ? "small" : "none",
onPress: O,
children: [
/* @__PURE__ */ t(X, { layout: "horizontal", children: z ? /* @__PURE__ */ t(
"img",
{
src: z,
alt: j,
className: "h-full w-full object-cover"
}
) : /* @__PURE__ */ t("div", { className: "h-full w-full bg-muted flex items-center justify-center text-muted-foreground text-xs", children: "No Image" }) }),
/* @__PURE__ */ y(Y, { layout: "horizontal", children: [
/* @__PURE__ */ t(Z, { children: I }),
C && !c ? /* @__PURE__ */ t(ot, { children: /* @__PURE__ */ t(
U,
{
averageRating: C,
reviewCount: F
}
) }) : null,
/* @__PURE__ */ t(_, { children: R ? /* @__PURE__ */ y(S, { children: [
/* @__PURE__ */ t(et, { children: g }),
/* @__PURE__ */ t(tt, { children: v })
] }) : /* @__PURE__ */ t($, { children: g }) })
] }),
/* @__PURE__ */ t(
rt,
{
filled: h,
onPress: D,
customAction: i,
hideFavoriteAction: o
}
)
]
}
);
}
export {
gt as ProductLink
};
//# sourceMappingURL=product-link.js.map