@tapcart/mobile-components 0.2.12 → 0.3.0

package/dist/components/ui/image.js

@@ -0,0 +1,318 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react/display-name */
+/* eslint-disable @next/next/no-img-element */
+import * as React from "react";
+/**
+ * Tapcart’s Image component is a wrapper around the HTML image element.
+ * It supports the same props as the HTML `img` element, but automatically
+ * generates the srcSet and sizes attributes for you. For most use cases,
+ * you’ll want to set the `aspectRatio` prop to ensure the image is sized
+ * correctly.
+ *
+ * @remarks
+ * - `decoding` is set to `async` by default.
+ * - `loading` is set to `lazy` by default.
+ * - `alt` will automatically be set to the `altText` from the Storefront API if passed in the `data` prop
+ * - `src` will automatically be set to the `url` from the Storefront API if passed in the `data` prop
+ *
+ * @example
+ * A responsive image with a 4:5 aspect ratio:
+ * ```
+ * <Image
+ *   data={product.featuredImage}
+ *   aspectRatio="4:5"
+ *   sizes="(min-width: 45em) 40vw, 100vw"
+ * />
+ * ```
+ * @example
+ * A fixed size image:
+ * ```
+ * <Image
+ *   data={product.featuredImage}
+ *   width={100}
+ *   height={100}
+ * />
+ * ```
+ *
+ * {@link https://shopify.dev/docs/api/hydrogen-react/components/image}
+ */
+export const Image = React.forwardRef((_a, ref) => {
+    var _b;
+    var { alt, aspectRatio, crop = "center", data, decoding = "async", height = "auto", loader = shopifyLoader, loading = "lazy", sizes, src, srcSetOptions = {
+        intervals: 15,
+        startingWidth: 100,
+        incrementSize: 100,
+        placeholderWidth: 100,
+    }, width = "100%", objectFit = "cover" } = _a, passthroughProps = __rest(_a, ["alt", "aspectRatio", "crop", "data", "decoding", "height", "loader", "loading", "sizes", "src", "srcSetOptions", "width", "objectFit"]);
+    /*
+     * Gets normalized values for width, height from data  prop
+     */
+    const normalizedData = React.useMemo(() => {
+        /* Only use data width if height is also set */
+        const dataWidth = (data === null || data === void 0 ? void 0 : data.width) && (data === null || data === void 0 ? void 0 : data.height) ? data === null || data === void 0 ? void 0 : data.width : undefined;
+        const dataHeight = (data === null || data === void 0 ? void 0 : data.width) && (data === null || data === void 0 ? void 0 : data.height) ? data === null || data === void 0 ? void 0 : data.height : undefined;
+        return {
+            width: dataWidth,
+            height: dataHeight,
+            unitsMatch: Boolean(unitsMatch(dataWidth, dataHeight)),
+        };
+    }, [data]);
+    /*
+     * Gets normalized values for width, height, src, alt, and aspectRatio props
+     * supporting the presence of `data` in addition to flat props.
+     */
+    const normalizedProps = React.useMemo(() => {
+        const nWidthProp = width || "100%";
+        const widthParts = getUnitValueParts(nWidthProp.toString());
+        const nWidth = `${widthParts.number}${widthParts.unit}`;
+        const autoHeight = height === "auto" || height === undefined || height === null;
+        const heightParts = autoHeight
+            ? null
+            : getUnitValueParts(height.toString());
+        const fixedHeight = heightParts
+            ? `${heightParts.number}${heightParts.unit}`
+            : "";
+        const nHeight = autoHeight ? "auto" : fixedHeight;
+        const nSrc = src || (data === null || data === void 0 ? void 0 : data.url);
+        const nAlt = (data === null || data === void 0 ? void 0 : data.altText) && !alt ? data === null || data === void 0 ? void 0 : data.altText : alt || "";
+        const nAspectRatio = aspectRatio
+            ? aspectRatio
+            : normalizedData.unitsMatch
+                ? [
+                    getNormalizedFixedUnit(normalizedData.width),
+                    getNormalizedFixedUnit(normalizedData.height),
+                ].join(":")
+                : undefined;
+        // Map Tapcart properties "fill" and "fit" to CSS object-fit values
+        const nObjectFit = objectFit === "fill"
+            ? "cover"
+            : objectFit === "fit"
+                ? "contain"
+                : objectFit;
+        return {
+            width: nWidth,
+            height: nHeight,
+            src: nSrc,
+            alt: nAlt,
+            aspectRatio: nAspectRatio,
+            objectFit: nObjectFit,
+        };
+    }, [
+        width,
+        height,
+        src,
+        data,
+        alt,
+        aspectRatio,
+        normalizedData,
+        passthroughProps === null || passthroughProps === void 0 ? void 0 : passthroughProps.key,
+    ]);
+    const { intervals, startingWidth, incrementSize, placeholderWidth } = srcSetOptions;
+    /*
+     * This function creates an array of widths to be used in srcSet
+     */
+    const imageWidths = React.useMemo(() => {
+        return generateImageWidths(width, intervals, startingWidth, incrementSize);
+    }, [width, intervals, startingWidth, incrementSize]);
+    const fixedWidth = isFixedWidth(normalizedProps.width);
+    const [isLoaded, setIsLoaded] = React.useState(false);
+    const [hasError, setHasError] = React.useState(false);
+    const handleImageLoad = () => {
+        setIsLoaded(true);
+    };
+    const handleImageError = () => {
+        setHasError(true);
+    };
+    const imgClassName = `opacity-0 transition-opacity duration-500 ease-in-out ${isLoaded ? "opacity-100" : ""}`;
+    const aspectRatioPadding = aspectRatio
+        ? {
+            paddingBottom: `${(parseFloat(aspectRatio.split(":")[1]) /
+                parseFloat(aspectRatio.split(":")[0])) *
+                100}%`,
+        }
+        : { paddingBottom: "100%" };
+    const wrapperStyle = {
+        paddingBottom: !isLoaded ? aspectRatioPadding.paddingBottom : undefined,
+        aspectRatio: (_b = normalizedProps.aspectRatio) === null || _b === void 0 ? void 0 : _b.replace(":", "/"),
+    };
+    return (_jsx("div", Object.assign({ className: "relative w-full bg-stateColors-skeleton ", style: wrapperStyle }, { children: !hasError && normalizedProps.src ? (_jsx("img", Object.assign({ ref: ref, alt: normalizedProps.alt, decoding: decoding, height: normalizedProps.height, loading: loading, src: normalizedProps.src, srcSet: generateSrcSet(normalizedProps.src, generateSizes(imageWidths, normalizedProps.aspectRatio, crop), loader, objectFit === "contain"), width: normalizedProps.width, className: imgClassName, onLoad: handleImageLoad, onError: handleImageError, sizes: sizes, style: {
+                objectFit: normalizedProps.objectFit,
+                maxHeight: "100%",
+                height: "100%",
+            } }, passthroughProps))) : (_jsx("div", { className: "absolute top-0 left-0 w-full h-full bg-stateColors-skeleton " })) })));
+});
+/**
+ * The shopifyLoader function is a simple utility function that takes a src, width,
+ * height, and crop and returns a string that can be used as the src for an image.
+ * It can be used with the Tapcart Image component or with the next/image component.
+ * (or any others that accept equivalent configuration)
+ * @param src - The source URL of the image, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg`
+ * @param width - The width of the image, e.g. `100`
+ * @param height - The height of the image, e.g. `100`
+ * @param crop - The crop of the image, e.g. `center`
+ * @returns A Shopify image URL with the correct query parameters, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=100&height=100&crop=center`
+ *
+ * @example
+ * ```
+ * shopifyLoader({
+ *   src: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',
+ *   width: 100,
+ *   height: 100,
+ *   crop: 'center',
+ * })
+ * ```
+ */
+export function shopifyLoader({ src, width, height, crop, isContained, }) {
+    if (!src) {
+        return "";
+    }
+    const url = new URL(src);
+    if (width && !isContained) {
+        url.searchParams.append("width", Math.round(width).toString());
+    }
+    if (height) {
+        url.searchParams.append("height", Math.round(height).toString());
+    }
+    if (crop && !isContained) {
+        url.searchParams.append("crop", crop);
+    }
+    return url.href;
+}
+/**
+ * Checks whether the width and height share the same unit type
+ * @param width - The width of the image, e.g. 100% | 10px
+ * @param height - The height of the image, e.g. auto | 100px
+ * @returns Whether the width and height share the same unit type (boolean)
+ */
+function unitsMatch(width = "100%", height = "auto") {
+    return (getUnitValueParts(width.toString()).unit ===
+        getUnitValueParts(height.toString()).unit);
+}
+/**
+ * Given a CSS size, returns the unit and number parts of the value
+ * @param value - The CSS size, e.g. 100px
+ * @returns The unit and number parts of the value, e.g. \{unit: 'px', number: 100\}
+ */
+function getUnitValueParts(value) {
+    const unit = value.replace(/[0-9.]/g, "");
+    const number = parseFloat(value.replace(unit, ""));
+    return {
+        unit: unit === "" ? (number === undefined ? "auto" : "px") : unit,
+        number,
+    };
+}
+/**
+ * Given a value, returns the width of the image as an integer in pixels
+ * @param value - The width of the image, e.g. 16px | 1rem | 1em | 16
+ * @returns The width of the image in pixels, e.g. 16, or undefined if the value is not a fixed unit
+ */
+function getNormalizedFixedUnit(value) {
+    if (value === undefined)
+        return;
+    const { unit, number } = getUnitValueParts(value.toString());
+    switch (unit) {
+        case "em":
+        case "rem":
+            return number * 16;
+        case "px":
+        case "":
+            return number;
+        default:
+            return;
+    }
+}
+/**
+ * This function checks whether a width is fixed or not.
+ * @param width - The width of the image, e.g. 100 | '100px' | '100em' | '100rem'
+ * @returns Whether the width is fixed or not
+ */
+function isFixedWidth(width) {
+    const fixedEndings = /\d(px|em|rem)$/;
+    return (typeof width === "number" ||
+        (typeof width === "string" && fixedEndings.test(width)));
+}
+/**
+ * This function generates a srcSet for Shopify images.
+ * @param src - The source URL of the image, e.g. https://cdn.shopify.com/static/sample-images/garnished.jpeg
+ * @param sizesArray - An array of objects containing the `width`, `height`, and `crop` of the image, e.g. [\{width: 200, height: 200, crop: 'center'\}, \{width: 400, height: 400, crop: 'center'\}]
+ * @param loader - A function that takes a Shopify image URL and returns a Shopify image URL with the correct query parameters
+ * @returns A srcSet for Shopify images, e.g. 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=200&height=200&crop=center 200w, https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=400&height=400&crop=center 400w'
+ */
+export function generateSrcSet(src, sizesArray, loader = shopifyLoader, isContained = false) {
+    if (!src)
+        return "";
+    if (!sizesArray || sizesArray.length === 0)
+        return src;
+    const srcSet = sizesArray
+        .map((size, i) => {
+        var _a;
+        return `${loader({
+            src,
+            width: size.width,
+            height: size.height,
+            crop: size.crop,
+            isContained,
+        })} ${sizesArray.length === 3 ? `${i + 1}x` : `${(_a = size.width) !== null && _a !== void 0 ? _a : 0}w`}`;
+    })
+        .join(`, `);
+    return srcSet;
+}
+/**
+ * This function generates an array of sizes for Shopify images, for both fixed and responsive images.
+ * @param width - The CSS width of the image
+ * @param intervals - The number of intervals to generate
+ * @param startingWidth - The starting width of the image
+ * @param incrementSize - The size of each interval
+ * @returns An array of widths
+ */
+export function generateImageWidths(width = "100%", intervals, startingWidth, incrementSize) {
+    const responsive = Array.from({ length: intervals }, (_, i) => i * incrementSize + startingWidth);
+    const fixed = Array.from({ length: 3 }, (_, i) => { var _a; return (i + 1) * ((_a = getNormalizedFixedUnit(width)) !== null && _a !== void 0 ? _a : 0); });
+    return isFixedWidth(width) ? fixed : responsive;
+}
+/**
+ * Simple utility function to convert an aspect ratio CSS string to a decimal, currently only supports values like `1:1`, not `0.5`, or `auto`
+ * @param aspectRatio - The aspect ratio of the image, e.g. `1:1`
+ * @returns The aspect ratio as a number, e.g. `1`
+ *
+ * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio}
+ */
+export function parseAspectRatio(aspectRatio) {
+    if (!aspectRatio)
+        return;
+    const [width, height] = aspectRatio.split(":");
+    return Number(width) / Number(height);
+}
+/**
+ * Generate sizes for Imagery loader
+ * @param imageWidths
+ * @param aspectRatio
+ * @param crop
+ * @returns
+ */
+export function generateSizes(imageWidths, aspectRatio, crop = "center") {
+    if (!imageWidths)
+        return;
+    const sizes = imageWidths.map((width) => {
+        var _a;
+        return ({
+            width,
+            height: aspectRatio
+                ? width / ((_a = parseAspectRatio(aspectRatio)) !== null && _a !== void 0 ? _a : 1)
+                : undefined,
+            crop,
+        });
+    });
+    return sizes;
+}

package/dist/components/ui/line-item-text-icons.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface LineItemTextIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    primaryText: string;
+    secondaryText: string;
+    selected?: boolean;
+    showIcon?: boolean;
+    showSecondaryText?: boolean;
+    showChevron?: boolean;
+    onClick?: () => void;
+    className?: string;
+}
+declare const LineItemTextIcon: React.ForwardRefExoticComponent<LineItemTextIconProps & React.RefAttributes<HTMLButtonElement>>;
+export { LineItemTextIcon };
+//# sourceMappingURL=line-item-text-icons.d.ts.map

package/dist/components/ui/line-item-text-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-item-text-icons.d.ts","sourceRoot":"","sources":["../../../components/ui/line-item-text-icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,gBAAgB,iGA0DrB,CAAA;AAID,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/line-item-text-icons.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Text } from "./text";
+import { cn } from "../../lib/utils";
+import { Icon } from "./icon";
+const LineItemTextIcon = React.forwardRef((_a, ref) => {
+    var { primaryText, secondaryText, selected = false, showIcon = true, showSecondaryText = true, showChevron = true, onClick, className } = _a, props = __rest(_a, ["primaryText", "secondaryText", "selected", "showIcon", "showSecondaryText", "showChevron", "onClick", "className"]);
+    return (_jsxs("button", Object.assign({ className: cn("flex flex-row p-4 gap-2 w-full border-b border-coreColors-dividingLines", selected ? "bg-stateColors-skeleton" : "", className), ref: ref, onClick: onClick }, props, { children: [_jsx(Icon, { name: "map-pin", size: "sm", color: "coreColors-secondaryIcon", className: `${showIcon ? "" : "opacity-0"}` }), _jsxs("div", Object.assign({ className: "flex flex-col w-full items-start gap-1 overflow-hidden" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-primaryColor max-w-full truncate" }, { children: primaryText })), _jsx(Text, Object.assign({ type: "body-secondary", className: `text-textColors-secondaryColor line-clamp-2 text-left ${showSecondaryText ? "" : "opacity-0"}` }, { children: secondaryText }))] })), _jsx(Icon, { name: "chevron-right", size: "sm", color: "coreColors-secondaryIcon", className: `my-auto ${showChevron ? "" : "opacity-0"}` })] })));
+});
+LineItemTextIcon.displayName = "LineItemTextIcon";
+export { LineItemTextIcon };

package/dist/components/ui/product-card.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Product } from "app-studio-types";
 type Config = {
     gridLayout?: string;
     productImage?: {
@@ -66,24 +67,6 @@ type TapcartData = {
         };
     };
 };
-export type Product = {
-    variants: {
-        compareAtPrice: {
-            amount: string;
-            currencyCode: string;
-        } | undefined;
-        price: {
-            amount: string;
-            currencyCode: string;
-        };
-    }[];
-    images: {
-        src: string;
-    }[];
-    title: string;
-    tags: string[];
-    availableForSale: boolean;
-};
 export type ProductCardProps = {
     config: Config;
     tapcartData: TapcartData;
@@ -92,7 +75,10 @@ export type ProductCardProps = {
     favorited?: boolean;
     onFavoriteClick?: (event: React.MouseEvent<HTMLButtonElement>, product: Product) => void;
     onQuickAdd?: (event: React.MouseEvent<HTMLButtonElement>, product: Product) => void;
-    openProduct?: (event: React.MouseEvent<HTMLDivElement>, product: Product) => void;
+    openProduct?: (params: {
+        productId: string;
+        variantId?: string;
+    }) => void;
 };
 declare const ProductCard: React.FC<ProductCardProps>;
 export { ProductCard };

package/dist/components/ui/product-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"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"}

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

@@ -4,10 +4,12 @@ import { Badge } from "./badge";
 import { Favorite } from "./favorite";
 import { Button } from "./button";
 import { Text } from "./text";
+import * as React from "react";
 import { Price } from "./price";
 import { Skeleton } from "./skeleton";
 import { cn } from "../../lib/utils";
 import { cva } from "class-variance-authority";
+import { Image } from "./image";
 const aspectScalingVariants = cva("w-full", {
     variants: {
         aspectRatio: {
@@ -16,14 +18,14 @@ const aspectScalingVariants = cva("w-full", {
             "4:5": "aspect-[4/5]",
         },
         scaling: {
-            "fill": "object-cover",
-            "fit": "object-contain",
-        }
+            fill: "object-cover",
+            fit: "object-contain",
+        },
     },
     defaultVariants: {
         aspectRatio: "2:3",
-        scaling: "fill"
-    }
+        scaling: "fill",
+    },
 });
 const productCardBadgeVariants = cva("absolute truncate", {
     variants: {
@@ -61,7 +63,7 @@ const productCardFavoriteVariants = cva("absolute ", {
         showSoldOutBadge: {
             true: "",
             false: "",
-        }
+        },
     },
     compoundVariants: [
         {
@@ -99,22 +101,26 @@ const productCardFavoriteVariants = cva("absolute ", {
     },
 });
 const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFavoriteClick, onQuickAdd, openProduct, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
-    const ProductImage = ({ src }) => {
-        const productImageClasses = cn(aspectScalingVariants({ aspectRatio: tapcartData.theme.productImages.aspectRatio, scaling: tapcartData.theme.productImages.scaling }));
-        if (src) {
-            return (_jsx("img", { className: productImageClasses, src: src }));
-        }
-        else {
-            return (_jsx("div", { className: `${productImageClasses} bg-neutral-300` }));
-        }
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15;
+    const { variants, images, title, tags } = product;
+    // Select the variant that has the lowest price that is available or just the lowest price if none are available
+    let searchVariants = variants.filter((variant) => variant.available);
+    if (searchVariants.length === 0) {
+        searchVariants = variants;
+    }
+    const variant = searchVariants.reduce((lowest, current) => {
+        return current.price.amount < lowest.price.amount ? current : lowest;
+    });
+    const src = ((_a = images[0]) === null || _a === void 0 ? void 0 : _a.url) || "";
+    const [isSelected, setIsSelected] = React.useState(false);
+    const handleFavoriteClick = () => {
+        setIsSelected((prevState) => !prevState);
     };
-    const { variants: [variant], images: [{ src }], title } = product;
-    const iconPosition = ((_a = config.favoritesIcon) === null || _a === void 0 ? void 0 : _a.layoutType) || "below-image-on-right";
+    const iconPosition = ((_b = config.favoritesIcon) === null || _b === void 0 ? void 0 : _b.layoutType) || "below-image-on-right";
     if (isLoading) {
         return (_jsxs("div", Object.assign({ className: "w-1/2 rounded" }, { children: [_jsx(Skeleton, { className: "w-full h-64 rounded" }), _jsx(Skeleton, { className: "h-6 w-1/2 mt-2 rounded" }), _jsx(Skeleton, { className: "h-4 w-full mt-2 rounded" })] })));
     }
-    const productBadgesPDP = (_b = tapcartData === null || tapcartData === void 0 ? void 0 : tapcartData["product-badges"]) === null || _b === void 0 ? void 0 : _b.pdp;
+    const productBadgesPDP = (_c = tapcartData === null || tapcartData === void 0 ? void 0 : tapcartData["product-badges"]) === null || _c === void 0 ? void 0 : _c.pdp;
     const aboveBadgeKeys = Object.keys(productBadgesPDP).filter((key) => key !== "below");
     const aboveBadges = aboveBadgeKeys.flatMap((key) => {
         const badges = productBadgesPDP === null || productBadgesPDP === void 0 ? void 0 : productBadgesPDP[key];
@@ -126,22 +132,69 @@ const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFav
     const aboveBadge = aboveBadges.length ? aboveBadges[0] : null;
     const belowBadges = productBadgesPDP.below;
     const belowBadge = (belowBadges === null || belowBadges === void 0 ? void 0 : belowBadges.length) ? belowBadges[0] : null;
-    const showSoldOutBadge = !product.availableForSale && !((_c = config.quickAdd) === null || _c === void 0 ? void 0 : _c.enabled);
-    return (_jsx("div", Object.assign({ className: `w-1/2` }, { children: _jsxs("div", Object.assign({ className: "w-full" }, { children: [((_d = config.productImage) === null || _d === void 0 ? void 0 : _d.enabled) && (_jsxs("div", Object.assign({ className: "relative w-full overflow-hidden", style: {
+    const showSoldOutBadge = !product.availableForSale && !((_d = config.quickAdd) === null || _d === void 0 ? void 0 : _d.enabled);
+    // Remove Shopify GID info from product id
+    const productId = product.id;
+    const variantId = variant.id;
+    // Prepare Product Open
+    const _openProduct = () => openProduct === null || openProduct === void 0 ? void 0 : openProduct({ productId, variantId });
+    const getImageSizes = (config) => {
+        switch (config.gridLayout) {
+            case "1x1":
+                return "100vw";
+            case "2x2":
+                return "50vw";
+            case "3x3":
+                return "33vw";
+            default:
+                return "100vw";
+        }
+    };
+    const sizes = getImageSizes(config);
+    return (_jsx("div", Object.assign({ className: `w-1/2` }, { children: _jsxs("div", Object.assign({ className: "w-full active:opacity-70", onClick: () => {
+                _openProduct();
+            } }, { children: [((_e = config.productImage) === null || _e === void 0 ? void 0 : _e.enabled) && (_jsxs("div", Object.assign({ className: "relative w-full overflow-hidden", style: {
                         borderTopLeftRadius: `${config.productImage.cornerRadius}px`,
                         borderTopRightRadius: `${config.productImage.cornerRadius}px`,
-                    } }, { children: [_jsx(ProductImage, { src: src }), aboveBadge && product.availableForSale && (_jsx(Badge, Object.assign({ size: "plp-layout", className: cn(productCardBadgeVariants({
+                    } }, { children: [_jsx(Image, { alt: product.title, aspectRatio: (_g = (_f = tapcartData.theme) === null || _f === void 0 ? void 0 : _f.productImages) === null || _g === void 0 ? void 0 : _g.aspectRatio, data: product.featuredImage || product.images[0], sizes: sizes, objectFit: (_j = (_h = tapcartData.theme) === null || _h === void 0 ? void 0 : _h.productImages) === null || _j === void 0 ? void 0 : _j.scaling }), aboveBadge && product.availableForSale && (_jsx(Badge, Object.assign({ size: "plp-layout", className: cn(productCardBadgeVariants({
                                 verticalPosition: aboveBadge.verticalPosition,
                                 horizontalPosition: aboveBadge.horizontalPosition,
                             })), style: {
                                 color: aboveBadge.fontColor,
                                 backgroundColor: aboveBadge.backgroundColor,
-                            }, alignment: aboveBadge.horizontalPosition, cornerRadius: aboveBadge.cornerRadius, icon: aboveBadge.image }, { children: aboveBadge.text }))), showSoldOutBadge && (_jsx(Badge, Object.assign({ size: "plp-layout", className: "absolute left-0 bottom-0 mb-2 bg-stateColors-disabled", alignment: "start", cornerRadius: "rounded", type: "text-only" }, { children: "Sold Out" }))), ((_e = config.favoritesIcon) === null || _e === void 0 ? void 0 : _e.enabled) && iconPosition !== "below-image-on-right" && (_jsx(Favorite, { className: cn(productCardFavoriteVariants({ iconPosition, badgeHorizontalPosition: aboveBadge === null || aboveBadge === void 0 ? void 0 : aboveBadge.horizontalPosition, badgeVerticalPosition: aboveBadge === null || aboveBadge === void 0 ? void 0 : aboveBadge.verticalPosition, showSoldOutBadge })), selected: favorited, onClick: (e) => { onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product); }, icon: ((_g = (_f = config.favoritesIcon) === null || _f === void 0 ? void 0 : _f.icon) === null || _g === void 0 ? void 0 : _g.type) === "internal" ? (_j = (_h = config.favoritesIcon) === null || _h === void 0 ? void 0 : _h.icon) === null || _j === void 0 ? void 0 : _j.url : undefined }))] }))), ((_k = config.quickAdd) === null || _k === void 0 ? void 0 : _k.enabled) && (_jsx(Button, Object.assign({ className: "outline-0", style: {
+                            }, alignment: aboveBadge.horizontalPosition, cornerRadius: aboveBadge.cornerRadius, icon: aboveBadge.image }, { children: aboveBadge.text }))), showSoldOutBadge && (_jsx(Badge, Object.assign({ size: "plp-layout", className: "absolute left-0 bottom-0 mb-2 bg-stateColors-disabled", alignment: "start", cornerRadius: "rounded", type: "text-only" }, { children: "Sold Out" }))), ((_k = config.favoritesIcon) === null || _k === void 0 ? void 0 : _k.enabled) &&
+                            iconPosition !== "below-image-on-right" && (_jsx(Favorite, { className: cn(productCardFavoriteVariants({
+                                iconPosition,
+                                badgeHorizontalPosition: aboveBadge === null || aboveBadge === void 0 ? void 0 : aboveBadge.horizontalPosition,
+                                badgeVerticalPosition: aboveBadge === null || aboveBadge === void 0 ? void 0 : aboveBadge.verticalPosition,
+                                showSoldOutBadge,
+                            })), selected: favorited, onClick: (e) => {
+                                onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
+                            }, icon: ((_m = (_l = config.favoritesIcon) === null || _l === void 0 ? void 0 : _l.icon) === null || _m === void 0 ? void 0 : _m.type) === "internal"
+                                ? (_p = (_o = config.favoritesIcon) === null || _o === void 0 ? void 0 : _o.icon) === null || _p === void 0 ? void 0 : _p.url
+                                : undefined }))] }))), ((_q = config.quickAdd) === null || _q === void 0 ? void 0 : _q.enabled) && (_jsx(Button, Object.assign({ className: "outline-0", style: {
                         borderBottomLeftRadius: `${config.quickAdd.cornerRadius}px`,
                         borderBottomRightRadius: `${config.quickAdd.cornerRadius}px`,
-                    }, labelClassName: cn("outline-0 w-full", { "uppercase": (_l = config.quickAdd) === null || _l === void 0 ? void 0 : _l.uppercase }, { "text-left": ((_m = config.quickAdd) === null || _m === void 0 ? void 0 : _m.textAlignment) === "left" }, { "text-right": ((_o = config.quickAdd) === null || _o === void 0 ? void 0 : _o.textAlignment) === "right" }, { "text-center": ((_p = config.quickAdd) === null || _p === void 0 ? void 0 : _p.textAlignment) === "center" }), labelStyle: { fontSize: (_q = config.quickAdd) === null || _q === void 0 ? void 0 : _q.fontSize }, variant: "quickadd", size: "default", onClick: (e) => {
+                    }, labelClassName: cn("outline-0 w-full", { uppercase: (_r = config.quickAdd) === null || _r === void 0 ? void 0 : _r.uppercase }, { "text-left": ((_s = config.quickAdd) === null || _s === void 0 ? void 0 : _s.textAlignment) === "left" }, { "text-right": ((_t = config.quickAdd) === null || _t === void 0 ? void 0 : _t.textAlignment) === "right" }, { "text-center": ((_u = config.quickAdd) === null || _u === void 0 ? void 0 : _u.textAlignment) === "center" }), labelStyle: { fontSize: (_v = config.quickAdd) === null || _v === void 0 ? void 0 : _v.fontSize }, variant: "quickadd", size: "default", onClick: (e) => {
                         e.stopPropagation();
                         onQuickAdd === null || onQuickAdd === void 0 ? void 0 : onQuickAdd(e, product);
-                    } }, { children: "+ Quick add" }))), _jsxs("div", Object.assign({ className: "w-full flex-col justify-start items-start gap-0 inline-flex" }, { children: [belowBadge && (_jsx("div", Object.assign({ className: cn("mt-2 w-full flex justify-start", { "justify-end": belowBadge.horizontalPosition === "end" }) }, { children: _jsx(Badge, Object.assign({ size: "plp-layout", alignment: belowBadge.horizontalPosition, icon: belowBadge.image, className: cn("truncate", { "rounded": belowBadge.cornerRadius === "rounded" }, { "rounded-none": belowBadge.cornerRadius === "square" }) }, { children: belowBadge.text })) }))), ((_r = config.productTitle) === null || _r === void 0 ? void 0 : _r.enabled) && (_jsx("div", Object.assign({ className: "mt-2 w-full" }, { children: _jsx(Text, Object.assign({ type: "body-secondary", className: cn({ "uppercase": (_s = config.productTitle) === null || _s === void 0 ? void 0 : _s.uppercase }, { "text-left": ((_t = config.productTitle) === null || _t === void 0 ? void 0 : _t.textAlignment) === "left" }, { "text-right": ((_u = config.productTitle) === null || _u === void 0 ? void 0 : _u.textAlignment) === "right" }, { "text-center": ((_v = config.productTitle) === null || _v === void 0 ? void 0 : _v.textAlignment) === "center" }, { "truncate": !((_w = config.productTitle) === null || _w === void 0 ? void 0 : _w.wrapText) }, { "text-wrap": (_x = config.productTitle) === null || _x === void 0 ? void 0 : _x.wrapText }, "text-textColors-productTitle"), style: { fontSize: (_y = config.productTitle) === null || _y === void 0 ? void 0 : _y.fontSize } }, { children: title })) }))), _jsxs("div", Object.assign({ className: cn("flex flex-row w-full gap-2 mt-1 justify-end", { "justify-start": ((_z = config.price) === null || _z === void 0 ? void 0 : _z.textAlignment) === "left" }, { "justify-end": ((_0 = config.price) === null || _0 === void 0 ? void 0 : _0.textAlignment) === "right" }, { "justify-center": ((_1 = config.price) === null || _1 === void 0 ? void 0 : _1.textAlignment) === "center" }) }, { children: [((_2 = config.price) === null || _2 === void 0 ? void 0 : _2.enabled) && (_jsx(Price, { price: parseFloat(variant.price.amount), isSale: !!variant.compareAtPrice && (variant.compareAtPrice && parseFloat((_3 = variant.compareAtPrice) === null || _3 === void 0 ? void 0 : _3.amount) > parseFloat(variant.price.amount)), compareAtPrice: variant.compareAtPrice && parseFloat((_4 = variant.compareAtPrice) === null || _4 === void 0 ? void 0 : _4.amount), currency: tapcartData.currency.code, locale: tapcartData.currency.locale, fontSize: (_5 = config.price) === null || _5 === void 0 ? void 0 : _5.fontSize })), ((_6 = config.favoritesIcon) === null || _6 === void 0 ? void 0 : _6.enabled) && config.favoritesIcon.layoutType === "below-image-on-right" && (_jsx("div", Object.assign({ className: "w-8 h-8 flex items-center justify-center" }, { children: _jsx(Favorite, { selected: favorited, onClick: (e) => { onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product); }, size: "small", icon: ((_8 = (_7 = config.favoritesIcon) === null || _7 === void 0 ? void 0 : _7.icon) === null || _8 === void 0 ? void 0 : _8.type) === "internal" ? (_10 = (_9 = config.favoritesIcon) === null || _9 === void 0 ? void 0 : _9.icon) === null || _10 === void 0 ? void 0 : _10.url : undefined }) })))] }))] }))] })) })));
+                    } }, { children: "+ Quick add" }))), _jsxs("div", Object.assign({ className: "w-full flex-col justify-start items-start gap-0 inline-flex" }, { children: [belowBadge && (_jsx("div", Object.assign({ className: cn("mt-2 w-full flex justify-start", {
+                                "justify-end": belowBadge.horizontalPosition === "end",
+                            }) }, { children: _jsx(Badge, Object.assign({ size: "plp-layout", alignment: belowBadge.horizontalPosition, icon: belowBadge.image, className: cn("truncate", { rounded: belowBadge.cornerRadius === "rounded" }, { "rounded-none": belowBadge.cornerRadius === "square" }) }, { children: belowBadge.text })) }))), ((_w = config.productTitle) === null || _w === void 0 ? void 0 : _w.enabled) && (_jsx("div", Object.assign({ className: "mt-2 w-full" }, { children: _jsx(Text, Object.assign({ type: "body-secondary", className: cn({ uppercase: (_x = config.productTitle) === null || _x === void 0 ? void 0 : _x.uppercase }, {
+                                    "text-left": ((_y = config.productTitle) === null || _y === void 0 ? void 0 : _y.textAlignment) === "left",
+                                }, {
+                                    "text-right": ((_z = config.productTitle) === null || _z === void 0 ? void 0 : _z.textAlignment) === "right",
+                                }, {
+                                    "text-center": ((_0 = config.productTitle) === null || _0 === void 0 ? void 0 : _0.textAlignment) === "center",
+                                }, { truncate: !((_1 = config.productTitle) === null || _1 === void 0 ? void 0 : _1.wrapText) }, { "text-wrap": (_2 = config.productTitle) === null || _2 === void 0 ? void 0 : _2.wrapText }, "text-textColors-productTitle"), style: { fontSize: (_3 = config.productTitle) === null || _3 === void 0 ? void 0 : _3.fontSize } }, { children: title })) }))), _jsxs("div", Object.assign({ className: cn("flex flex-row w-full gap-2 mt-1 justify-end", { "justify-start": ((_4 = config.price) === null || _4 === void 0 ? void 0 : _4.textAlignment) === "left" }, { "justify-end": ((_5 = config.price) === null || _5 === void 0 ? void 0 : _5.textAlignment) === "right" }, { "justify-center": ((_6 = config.price) === null || _6 === void 0 ? void 0 : _6.textAlignment) === "center" }) }, { children: [((_7 = config.price) === null || _7 === void 0 ? void 0 : _7.enabled) && (_jsx(Price, { price: parseFloat(variant.price.amount), isSale: !!variant.compareAtPrice &&
+                                        variant.compareAtPrice &&
+                                        parseFloat((_8 = variant.compareAtPrice) === null || _8 === void 0 ? void 0 : _8.amount) >
+                                            parseFloat(variant.price.amount), compareAtPrice: variant.compareAtPrice &&
+                                        parseFloat((_9 = variant.compareAtPrice) === null || _9 === void 0 ? void 0 : _9.amount), currency: tapcartData.currency.code, locale: tapcartData.currency.locale, fontSize: (_10 = config.price) === null || _10 === void 0 ? void 0 : _10.fontSize })), ((_11 = config.favoritesIcon) === null || _11 === void 0 ? void 0 : _11.enabled) &&
+                                    config.favoritesIcon.layoutType === "below-image-on-right" && (_jsx("div", Object.assign({ className: "w-8 h-8 flex items-center justify-center" }, { children: _jsx(Favorite, { selected: favorited, onClick: (e) => {
+                                            onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
+                                        }, size: "small", icon: ((_13 = (_12 = config.favoritesIcon) === null || _12 === void 0 ? void 0 : _12.icon) === null || _13 === void 0 ? void 0 : _13.type) === "internal"
+                                            ? (_15 = (_14 = config.favoritesIcon) === null || _14 === void 0 ? void 0 : _14.icon) === null || _15 === void 0 ? void 0 : _15.url
+                                            : undefined }) })))] }))] }))] })) })));
 };
 export { ProductCard };

package/dist/components/ui/quantity-picker.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface QuantityPickerProps extends React.HTMLAttributes<HTMLDivElement> {
+    decreaseIcon: string;
+    increaseIcon: string;
+    deleteIcon: string;
+    onDecreaseClick: React.ReactEventHandler;
+    onIncreaseClick: React.ReactEventHandler;
+    value: number;
+    setValue: (_: number) => void;
+    className?: string;
+}
+declare const QuantityPicker: React.ForwardRefExoticComponent<QuantityPickerProps & React.RefAttributes<HTMLDivElement>>;
+export { QuantityPicker };
+//# sourceMappingURL=quantity-picker.d.ts.map

package/dist/components/ui/quantity-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-picker.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAgBD,QAAA,MAAM,cAAc,4FAyCnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/quantity-picker.js

@@ -0,0 +1,23 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Icon } from "./icon";
+const IconButton = ({ icon, handler, className }) => (_jsx("button", Object.assign({ onClick: handler, className: cn("flex items-center justify-center h-8 w-8 bg-stateColors-skeleton outline outline-1 outline-stateColors-skeleton", className) }, { children: _jsx(Icon, { name: icon, size: "sm", color: "coreColors-secondaryIcon" }) })));
+const QuantityPicker = React.forwardRef((_a, ref) => {
+    var { className, decreaseIcon, increaseIcon, deleteIcon, onDecreaseClick, onIncreaseClick, value, setValue } = _a, props = __rest(_a, ["className", "decreaseIcon", "increaseIcon", "deleteIcon", "onDecreaseClick", "onIncreaseClick", "value", "setValue"]);
+    return (_jsxs("div", Object.assign({ className: cn("flex", className), ref: ref }, props, { children: [_jsx(IconButton, { handler: onDecreaseClick, icon: value === 1 ? deleteIcon : decreaseIcon, className: "rounded-tl rounded-bl" }), _jsx("div", Object.assign({ className: "w-12 py-1 flex justify-center bg-coreColors-inputBackground outline outline-1 outline-coreColors-dividingLines text-[15px] font-sfpro-roboto leading-[160%] font-normal text-textColors-primaryColor" }, { children: _jsx("input", { type: "tel", pattern: "[0-9]*", value: value, onBlur: (e) => (e.target.value = value.toString()), onFocus: (e) => (e.target.value = ""), onChange: (e) => setValue(parseInt(e.target.value) || 0), className: "w-8 focus-visible:outline-none text-center" }) })), _jsx(IconButton, { handler: onIncreaseClick, icon: increaseIcon, className: "rounded-tr rounded-br" })] })));
+});
+QuantityPicker.displayName = "QuantityPicker";
+export { QuantityPicker };