@fast-simon/shopify-hydrogen 1.0.4 → 1.0.6

package/dist/esnext/components/Filters/FiltersSkeleton.js

@@ -1,32 +1,32 @@
-import React from 'react';
-export function FastSkeleton() {
-    let rowsSizes = new Array(15);
-    let numOfRowsPerFacetArray = new Array(5);
-    for (let i = 0; i < 5; i++) {
-        numOfRowsPerFacetArray[i] = 0;
-    }
-    const getRandomInt = (min, max) => {
-        min = Math.ceil(min);
-        max = Math.floor(max);
-        return Math.floor(Math.random() * (max - min) + min);
-    };
-    const createItemsWidth = () => {
-        for (let i = 0; i < 15; i++) {
-            rowsSizes[i] = {};
-            for (let j = 0; j < 5; j++) {
-                rowsSizes[i][j] = {
-                    height: j === 0 ? '18px' : '11px',
-                    width: getRandomInt(j === 0 ? 70 : 33, j === 0 ? 100 : 70) + '%'
-                };
-            }
-        }
-    };
-    createItemsWidth();
-    setInterval(createItemsWidth, 1500);
-    return (React.createElement("div", { className: "fs-filters" }, rowsSizes.map(row => {
-        return (React.createElement("div", { className: "fs-vertical-filters-skeleton-section" }, numOfRowsPerFacetArray.map((rowItem, index) => {
-            return (React.createElement("div", { className: "row-skeleton", style: { width: `${row[index].width}`, height: `${row[index].height}` } }));
-        })));
-    })));
-}
-export default FastSkeleton;
+import React from 'react';
+export function FastSkeleton() {
+    let rowsSizes = new Array(15);
+    let numOfRowsPerFacetArray = new Array(5);
+    for (let i = 0; i < 5; i++) {
+        numOfRowsPerFacetArray[i] = 0;
+    }
+    const getRandomInt = (min, max) => {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min) + min);
+    };
+    const createItemsWidth = () => {
+        for (let i = 0; i < 15; i++) {
+            rowsSizes[i] = {};
+            for (let j = 0; j < 5; j++) {
+                rowsSizes[i][j] = {
+                    height: j === 0 ? '18px' : '11px',
+                    width: getRandomInt(j === 0 ? 70 : 33, j === 0 ? 100 : 70) + '%'
+                };
+            }
+        }
+    };
+    createItemsWidth();
+    setInterval(createItemsWidth, 1500);
+    return (React.createElement("div", { className: "fs-filters" }, rowsSizes.map(row => {
+        return (React.createElement("div", { className: "fs-vertical-filters-skeleton-section" }, numOfRowsPerFacetArray.map((rowItem, index) => {
+            return (React.createElement("div", { className: "row-skeleton", style: { width: `${row[index].width}`, height: `${row[index].height}` } }));
+        })));
+    })));
+}
+export default FastSkeleton;

package/dist/esnext/components/Filters/MobileFilters/MobileFilters.client.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-interface Props {
-    children: React.ReactNode;
-}
-export declare function MobileFiltersClient({ children }: Props): React.JSX.Element;
-export {};
+import React from 'react';
+interface Props {
+    children: React.ReactNode;
+}
+export declare function MobileFiltersClient({ children }: Props): React.JSX.Element;
+export {};

package/dist/esnext/components/Filters/MobileFilters/MobileFilters.client.js

@@ -1,20 +1,20 @@
-import React, { useRef, useState } from 'react';
-import { useClickOutside } from "../../../hooks/useClickOutside";
-export function MobileFiltersClient({ children }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [isClosing, setIsClosing] = useState(false);
-    const filtersRef = useRef(null);
-    const onClickOutside = () => {
-        setIsClosing(true);
-        setTimeout(() => {
-            setIsOpen(false);
-            setIsClosing(false);
-        }, 450);
-    };
-    useClickOutside(filtersRef, onClickOutside);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: 'fs-mobile-filters-button', onClick: () => setIsOpen(true) }, "Filters"),
-        isOpen ?
-            React.createElement("div", { className: `fs-mobile-filters-wrapper` },
-                React.createElement("span", { ref: filtersRef, className: isClosing ? 'fs-filters-slider-close' : 'fs-filters-slider-open' }, children)) : null));
-}
+import React, { useRef, useState } from 'react';
+import { useClickOutside } from "../../../hooks/useClickOutside";
+export function MobileFiltersClient({ children }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isClosing, setIsClosing] = useState(false);
+    const filtersRef = useRef(null);
+    const onClickOutside = () => {
+        setIsClosing(true);
+        setTimeout(() => {
+            setIsOpen(false);
+            setIsClosing(false);
+        }, 450);
+    };
+    useClickOutside(filtersRef, onClickOutside);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: 'fs-mobile-filters-button', onClick: () => setIsOpen(true) }, "Filters"),
+        isOpen ?
+            React.createElement("div", { className: `fs-mobile-filters-wrapper` },
+                React.createElement("span", { ref: filtersRef, className: isClosing ? 'fs-filters-slider-close' : 'fs-filters-slider-open' }, children)) : null));
+}

package/dist/esnext/components/Filters/RemovableTags/RemovableTag.client.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-interface Props {
-    name: string;
-    value: string;
-    onRemove: (name: string, value: string) => void;
-}
-export declare function RemovableTagClient({ name, value, onRemove }: Props): React.JSX.Element;
-export {};
+import React from 'react';
+interface Props {
+    name: string;
+    value: string;
+    onRemove: (name: string, value: string) => void;
+}
+export declare function RemovableTagClient({ name, value, onRemove }: Props): React.JSX.Element;
+export {};

package/dist/esnext/components/Filters/RemovableTags/RemovableTag.client.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import { RejectIcon } from "../../../icons/RejectIcon";
-export function RemovableTagClient({ name, value, onRemove }) {
-    const onRemoveClicked = () => {
-        onRemove(name, value);
-    };
-    return (React.createElement("div", { className: 'fs-removable-tag', onClick: onRemoveClicked },
-        React.createElement("span", { className: "removable-tag-text fs-removable-tag-text" }, value),
-        React.createElement("span", { className: "fs-removable-tag-remove-button", onClick: onRemoveClicked },
-            React.createElement(RejectIcon, { color: "gray" }))));
-}
+import React from 'react';
+import { RejectIcon } from "../../../icons/RejectIcon";
+export function RemovableTagClient({ name, value, onRemove }) {
+    const onRemoveClicked = () => {
+        onRemove(name, value);
+    };
+    return (React.createElement("div", { className: 'fs-removable-tag', onClick: onRemoveClicked },
+        React.createElement("span", { className: "removable-tag-text fs-removable-tag-text" }, value),
+        React.createElement("span", { className: "fs-removable-tag-remove-button", onClick: onRemoveClicked },
+            React.createElement(RejectIcon, { color: "gray" }))));
+}

package/dist/esnext/components/Filters/RemovableTags/RemovableTags.client.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import { RemovableTagsSettings } from "../../../@types/editor";
-interface Props {
-    narrowString?: string;
-    removableTagsSettings: RemovableTagsSettings;
-}
-export declare function RemovableTagsClient({ narrowString, removableTagsSettings }: Props): React.JSX.Element;
-export {};
+import React from 'react';
+import { RemovableTagsSettings } from "../../../@types/editor";
+interface Props {
+    narrowString?: string;
+    removableTagsSettings: RemovableTagsSettings;
+}
+export declare function RemovableTagsClient({ narrowString, removableTagsSettings }: Props): React.JSX.Element;
+export {};

package/dist/esnext/components/Filters/RemovableTags/RemovableTags.client.js

@@ -1,51 +1,51 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { Narrow } from "@fast-simon/utilities";
-import { RemovableTagClient } from "./RemovableTag.client";
-import { useNavigate, useServerProps, useUrl } from "@shopify/hydrogen";
-import { Defaults } from "../../../utils/defaults";
-import { DynamicStyle } from "../../../utils/DynamicStyle";
-export function RemovableTagsClient({ narrowString, removableTagsSettings }) {
-    const [narrow, setNarrow] = useState(Narrow.parseNarrow(narrowString || ''));
-    const [items, setItems] = useState(Object.entries(narrow));
-    //const [size, setSize] = useState(items.reduce((p, [name, values]) => p + values.size, 0)); TODO: use size to show clear all button
-    const url = useUrl();
-    const { setServerProps, serverProps } = useServerProps();
-    const navigation = useNavigate();
-    useEffect(() => {
-        const newNarrow = Narrow.parseNarrow(narrowString || '');
-        setNarrow(narrow);
-        const newItems = Object.entries(newNarrow);
-        setItems(newItems);
-        //setSize(newItems.reduce((p, [name, values]) => p + values.size, 0)) TODO: use size to show clear all button
-    }, [narrowString]);
-    const onRemoveClick = (name, value) => {
-        const newNarrow = Narrow.updateNarrow(Narrow.parseNarrow(narrowString || ''), name, value);
-        setNarrow(newNarrow);
-        setItems(Object.entries(newNarrow));
-        let dumpedNarrow = Narrow.dumpNarrow(newNarrow);
-        url.searchParams.delete('page');
-        if (dumpedNarrow) {
-            url.searchParams.set('filters', dumpedNarrow);
-        }
-        else {
-            url.searchParams.delete('filters');
-        }
-        navigation(url.href);
-        setServerProps(Defaults.fastSimonProps, { ...serverProps?.[Defaults.fastSimonProps], page: 1, narrowString: dumpedNarrow });
-    };
-    const removeNarrow = useCallback(onRemoveClick, [items]);
-    const dynamicStyles = {
-        'border': removableTagsSettings?.border,
-        'box-shadow': removableTagsSettings?.shadow,
-        'border-radius': removableTagsSettings?.borderRadius,
-        'font-family': removableTagsSettings?.font.font,
-        'color': removableTagsSettings?.color,
-        'letter-spacing': removableTagsSettings?.font.letterSpacing,
-        'font-size': removableTagsSettings?.font.fontSize,
-        'font-weight': removableTagsSettings?.font.fontWeight,
-        'background-color': removableTagsSettings?.backgroundColor,
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(DynamicStyle, { styles: dynamicStyles, className: 'fs-removable-tag' }),
-        React.createElement("div", { className: 'fs-removable-tags-container' }, items.map(([name, values]) => Array.from(values).map(value => (React.createElement(RemovableTagClient, { key: `removable_tag_${name}_${value}`, name: name, value: value, onRemove: removeNarrow })))))));
-}
+import React, { useCallback, useEffect, useState } from 'react';
+import { Narrow } from "@fast-simon/utilities";
+import { RemovableTagClient } from "./RemovableTag.client";
+import { useNavigate, useServerProps, useUrl } from "@shopify/hydrogen";
+import { Defaults } from "../../../utils/defaults";
+import { DynamicStyle } from "../../../utils/DynamicStyle";
+export function RemovableTagsClient({ narrowString, removableTagsSettings }) {
+    const [narrow, setNarrow] = useState(Narrow.parseNarrow(narrowString || ''));
+    const [items, setItems] = useState(Object.entries(narrow));
+    //const [size, setSize] = useState(items.reduce((p, [name, values]) => p + values.size, 0)); TODO: use size to show clear all button
+    const url = useUrl();
+    const { setServerProps, serverProps } = useServerProps();
+    const navigation = useNavigate();
+    useEffect(() => {
+        const newNarrow = Narrow.parseNarrow(narrowString || '');
+        setNarrow(narrow);
+        const newItems = Object.entries(newNarrow);
+        setItems(newItems);
+        //setSize(newItems.reduce((p, [name, values]) => p + values.size, 0)) TODO: use size to show clear all button
+    }, [narrowString]);
+    const onRemoveClick = (name, value) => {
+        const newNarrow = Narrow.updateNarrow(Narrow.parseNarrow(narrowString || ''), name, value);
+        setNarrow(newNarrow);
+        setItems(Object.entries(newNarrow));
+        let dumpedNarrow = Narrow.dumpNarrow(newNarrow);
+        url.searchParams.delete('page');
+        if (dumpedNarrow) {
+            url.searchParams.set('filters', dumpedNarrow);
+        }
+        else {
+            url.searchParams.delete('filters');
+        }
+        navigation(url.href);
+        setServerProps(Defaults.fastSimonProps, { ...serverProps?.[Defaults.fastSimonProps], page: 1, narrowString: dumpedNarrow });
+    };
+    const removeNarrow = useCallback(onRemoveClick, [items]);
+    const dynamicStyles = {
+        'border': removableTagsSettings?.border,
+        'box-shadow': removableTagsSettings?.shadow,
+        'border-radius': removableTagsSettings?.borderRadius,
+        'font-family': removableTagsSettings?.font.font,
+        'color': removableTagsSettings?.color,
+        'letter-spacing': removableTagsSettings?.font.letterSpacing,
+        'font-size': removableTagsSettings?.font.fontSize,
+        'font-weight': removableTagsSettings?.font.fontWeight,
+        'background-color': removableTagsSettings?.backgroundColor,
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DynamicStyle, { styles: dynamicStyles, className: 'fs-removable-tag' }),
+        React.createElement("div", { className: 'fs-removable-tags-container' }, items.map(([name, values]) => Array.from(values).map(value => (React.createElement(RemovableTagClient, { key: `removable_tag_${name}_${value}`, name: name, value: value, onRemove: removeNarrow })))))));
+}

package/dist/esnext/components/PageTitle/PageTitle.server.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-interface Props {
-    searchTerm?: string | null;
-    categoryName?: string;
-}
-export declare function PageTitleServer({ searchTerm, categoryName }: Props): React.JSX.Element;
-export {};
+import React from 'react';
+interface Props {
+    searchTerm?: string | null;
+    categoryName?: string;
+}
+export declare function PageTitleServer({ searchTerm, categoryName }: Props): React.JSX.Element;
+export {};

package/dist/esnext/components/PageTitle/PageTitle.server.js

@@ -1,4 +1,4 @@
-import React from 'react';
-export function PageTitleServer({ searchTerm, categoryName }) {
-    return (React.createElement("div", { className: 'fs-page-title' }, searchTerm ? `Search results for ${searchTerm}` : categoryName));
-}
+import React from 'react';
+export function PageTitleServer({ searchTerm, categoryName }) {
+    return (React.createElement("div", { className: 'fs-page-title' }, searchTerm ? `Search results for ${searchTerm}` : categoryName));
+}

package/dist/esnext/components/Pagination/Pagination.client.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
-import { Pagination as PaginationType } from "../../@types/editor";
-interface Props {
-    currentPage: number;
-    paginationSettings: PaginationType;
-    totalPages: number;
-}
-export declare function Pagination({ currentPage, paginationSettings, totalPages }: Props): React.JSX.Element;
-export {};
+import React from 'react';
+import { Pagination as PaginationType } from "../../@types/editor";
+interface Props {
+    currentPage: number;
+    paginationSettings: PaginationType;
+    totalPages: number;
+}
+export declare function Pagination({ currentPage, paginationSettings, totalPages }: Props): React.JSX.Element;
+export {};

package/dist/esnext/components/Pagination/Pagination.client.js

@@ -1,43 +1,43 @@
-import React from 'react';
-import { useNavigate, useServerProps, useUrl } from "@shopify/hydrogen";
-import { Defaults } from "../../utils/defaults";
-import { getPageURL } from "./utils";
-import { LeftArrowIcon } from "../../icons/LeftArrowIcon";
-import { RightArrowIcon } from "../../icons/RightArrowIcon";
-export function Pagination({ currentPage, paginationSettings, totalPages }) {
-    const { setServerProps, serverProps } = useServerProps();
-    const navigation = useNavigate();
-    const url = useUrl();
-    const goTo = (event, pageNum) => {
-        event.preventDefault();
-        url.searchParams.set('page', String(pageNum));
-        navigation(url.href);
-        setServerProps(Defaults.fastSimonProps, { ...serverProps?.[Defaults.fastSimonProps], page: pageNum });
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-    };
-    const totalOfPagesArray = [...Array.from(Array(totalPages).keys())].map(i => i + 1);
-    return (React.createElement("div", { className: "pagination-wrapper" },
-        currentPage > 1 ?
-            React.createElement("span", { className: "arrow-button-wrapper", onClick: (event) => goTo(event, currentPage - 1) },
-                React.createElement("a", { className: "arrow-button", href: getPageURL(currentPage - 1, url) },
-                    React.createElement(LeftArrowIcon, null))) : null,
-        React.createElement("span", { className: "center-pages-wrapper" }, totalOfPagesArray.map(pageNumber => {
-            if (pageNumber === 2 && currentPage > 4) {
-                return React.createElement("span", { key: `three-dots-left`, className: "page-number-item three-dots-item" }, "...");
-            }
-            if (pageNumber === currentPage) {
-                return React.createElement("a", { key: `page_num_${pageNumber}`, className: "page-number-item page-number-item-selected", href: getPageURL(pageNumber, url), onClick: (event) => goTo(event, pageNumber) }, pageNumber);
-            }
-            else if (pageNumber === currentPage + 1 || pageNumber === currentPage + 2 || pageNumber === currentPage - 1 || pageNumber === currentPage - 2 || pageNumber === totalPages || pageNumber === 1) {
-                return React.createElement("a", { key: `page_num_${pageNumber}`, className: "page-number-item", href: getPageURL(pageNumber, url), onClick: (event) => goTo(event, pageNumber) }, pageNumber);
-            }
-            if (currentPage < totalPages - 3 && pageNumber === totalPages - 1) {
-                return React.createElement("span", { key: `three-dots-right`, className: "page-number-item three-dots-item" }, "...");
-            }
-            return React.createElement(React.Fragment, null);
-        })),
-        currentPage < totalPages ?
-            React.createElement("span", { className: "arrow-button-wrapper", onClick: (event) => goTo(event, currentPage + 1) },
-                React.createElement("a", { className: "arrow-button", href: getPageURL(currentPage + 1, url) },
-                    React.createElement(RightArrowIcon, null))) : null));
-}
+import React from 'react';
+import { useNavigate, useServerProps, useUrl } from "@shopify/hydrogen";
+import { Defaults } from "../../utils/defaults";
+import { getPageURL } from "./utils";
+import { LeftArrowIcon } from "../../icons/LeftArrowIcon";
+import { RightArrowIcon } from "../../icons/RightArrowIcon";
+export function Pagination({ currentPage, paginationSettings, totalPages }) {
+    const { setServerProps, serverProps } = useServerProps();
+    const navigation = useNavigate();
+    const url = useUrl();
+    const goTo = (event, pageNum) => {
+        event.preventDefault();
+        url.searchParams.set('page', String(pageNum));
+        navigation(url.href);
+        setServerProps(Defaults.fastSimonProps, { ...serverProps?.[Defaults.fastSimonProps], page: pageNum });
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+    const totalOfPagesArray = [...Array.from(Array(totalPages).keys())].map(i => i + 1);
+    return (React.createElement("div", { className: "pagination-wrapper" },
+        currentPage > 1 ?
+            React.createElement("span", { className: "arrow-button-wrapper", onClick: (event) => goTo(event, currentPage - 1) },
+                React.createElement("a", { className: "arrow-button", href: getPageURL(currentPage - 1, url) },
+                    React.createElement(LeftArrowIcon, null))) : null,
+        React.createElement("span", { className: "center-pages-wrapper" }, totalOfPagesArray.map(pageNumber => {
+            if (pageNumber === 2 && currentPage > 4) {
+                return React.createElement("span", { key: `three-dots-left`, className: "page-number-item three-dots-item" }, "...");
+            }
+            if (pageNumber === currentPage) {
+                return React.createElement("a", { key: `page_num_${pageNumber}`, className: "page-number-item page-number-item-selected", href: getPageURL(pageNumber, url), onClick: (event) => goTo(event, pageNumber) }, pageNumber);
+            }
+            else if (pageNumber === currentPage + 1 || pageNumber === currentPage + 2 || pageNumber === currentPage - 1 || pageNumber === currentPage - 2 || pageNumber === totalPages || pageNumber === 1) {
+                return React.createElement("a", { key: `page_num_${pageNumber}`, className: "page-number-item", href: getPageURL(pageNumber, url), onClick: (event) => goTo(event, pageNumber) }, pageNumber);
+            }
+            if (currentPage < totalPages - 3 && pageNumber === totalPages - 1) {
+                return React.createElement("span", { key: `three-dots-right`, className: "page-number-item three-dots-item" }, "...");
+            }
+            return React.createElement(React.Fragment, null);
+        })),
+        currentPage < totalPages ?
+            React.createElement("span", { className: "arrow-button-wrapper", onClick: (event) => goTo(event, currentPage + 1) },
+                React.createElement("a", { className: "arrow-button", href: getPageURL(currentPage + 1, url) },
+                    React.createElement(RightArrowIcon, null))) : null));
+}

package/dist/esnext/components/Pagination/utils.d.ts

@@ -1 +1 @@
-export declare function getPageURL(page: number, url: URL): string;
+export declare function getPageURL(page: number, url: URL): string;

package/dist/esnext/components/Pagination/utils.js

@@ -1,4 +1,4 @@
-export function getPageURL(page, url) {
-    url.searchParams.set('page', String(page));
-    return url.href;
-}
+export function getPageURL(page, url) {
+    url.searchParams.set('page', String(page));
+    return url.href;
+}

package/dist/esnext/components/ProductCard/ProductCard.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-import { ProductSettings } from "../../@types/editor";
-import { ServerProduct } from "../../@types/product";
-interface Props {
-    productData: ServerProduct;
-    productSettings: ProductSettings;
-    index: number;
-}
-export declare function ProductCard({ productData, productSettings, index }: Props): React.JSX.Element;
-export {};
+import React from 'react';
+import { ProductSettings } from "../../@types/editor";
+import { ServerProduct } from "../../@types/product";
+interface Props {
+    productData: ServerProduct;
+    productSettings: ProductSettings;
+    index: number;
+}
+export declare function ProductCard({ productData, productSettings, index }: Props): React.JSX.Element;
+export {};

package/dist/esnext/components/ProductCard/ProductCard.js

@@ -1,31 +1,31 @@
-import React from 'react';
-import { ProductImage } from "./components/ProductImage/ProductImage";
-import { AddToCartClient } from "./components/AddToCart/AddToCart.client";
-import { ProductInfo } from "./components/Info/ProductInfo";
-export function ProductCard({ productData, productSettings, index }) {
-    const shopifyVariantNodes = productData.vra.map(variant => {
-        return {
-            id: `gid://shopify/ProductVariant/${variant[0]}`,
-            priceV2: { amount: productData.p, currencyCode: 'USD' },
-            compareAtPriceV2: null,
-            image: {
-                url: productData.t
-            }
-        };
-    });
-    if (!shopifyVariantNodes.length) {
-        shopifyVariantNodes.push({
-            id: `gid://shopify/ProductVariant/${productData.id}`,
-            priceV2: { amount: productData.p, currencyCode: 'USD' },
-            compareAtPriceV2: null,
-            image: {
-                url: productData.t
-            }
-        });
-    }
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "fs-product-card" },
-            React.createElement(ProductImage, { imageURL: productData.t, redirectURL: productData.u, index: index }),
-            React.createElement(ProductInfo, { productSettings: productSettings, productData: productData }),
-            React.createElement(AddToCartClient, { variantId: String(productData.id), variantNodes: shopifyVariantNodes, addToCartSettings: productSettings.addToCart }))));
-}
+import React from 'react';
+import { ProductImage } from "./components/ProductImage/ProductImage";
+import { AddToCartClient } from "./components/AddToCart/AddToCart.client";
+import { ProductInfo } from "./components/Info/ProductInfo";
+export function ProductCard({ productData, productSettings, index }) {
+    const shopifyVariantNodes = productData.vra.map(variant => {
+        return {
+            id: `gid://shopify/ProductVariant/${variant[0]}`,
+            priceV2: { amount: productData.p, currencyCode: 'USD' },
+            compareAtPriceV2: null,
+            image: {
+                url: productData.t
+            }
+        };
+    });
+    if (!shopifyVariantNodes.length) {
+        shopifyVariantNodes.push({
+            id: `gid://shopify/ProductVariant/${productData.id}`,
+            priceV2: { amount: productData.p, currencyCode: 'USD' },
+            compareAtPriceV2: null,
+            image: {
+                url: productData.t
+            }
+        });
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "fs-product-card" },
+            React.createElement(ProductImage, { imageURL: productData.t, redirectURL: productData.u, index: index }),
+            React.createElement(ProductInfo, { productSettings: productSettings, productData: productData }),
+            React.createElement(AddToCartClient, { variantId: String(productData.id), variantNodes: shopifyVariantNodes, addToCartSettings: productSettings.addToCart }))));
+}

package/dist/esnext/components/ProductCard/components/AddToCart/AddToCart.client.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-import { ProductAddToCartSettings } from "../../../../@types/editor";
-interface Props {
-    variantId: string;
-    quantity?: number;
-    variantNodes?: any;
-    addToCartSettings: ProductAddToCartSettings;
-}
-export declare function AddToCartClient({ variantId, quantity, variantNodes, addToCartSettings }: Props): React.JSX.Element;
-export {};
+import React from 'react';
+import { ProductAddToCartSettings } from "../../../../@types/editor";
+interface Props {
+    variantId: string;
+    quantity?: number;
+    variantNodes?: any;
+    addToCartSettings: ProductAddToCartSettings;
+}
+export declare function AddToCartClient({ variantId, quantity, variantNodes, addToCartSettings }: Props): React.JSX.Element;
+export {};

package/dist/esnext/components/ProductCard/components/AddToCart/AddToCart.client.js

@@ -1,23 +1,23 @@
-import React, { useEffect, useState } from 'react';
-import { AddToCartButton, ProductOptionsProvider } from '@shopify/hydrogen';
-import { useCart } from "@shopify/hydrogen";
-import { Spinner } from "../../../../icons/Spinner";
-export function AddToCartClient({ variantId, quantity = 1, variantNodes, addToCartSettings }) {
-    const { status } = useCart();
-    const [addingProduct, setAddingProduct] = useState(false);
-    useEffect(() => {
-        if (status === 'idle') {
-            if (addingProduct) {
-                window.dispatchEvent(new CustomEvent('fs-custom-events-product-added'));
-            }
-            setAddingProduct(false);
-        }
-    }, [status]);
-    const onButtonClick = () => {
-        setAddingProduct(true);
-    };
-    return (React.createElement(ProductOptionsProvider, { data: variantNodes },
-        React.createElement(AddToCartButton, { variantId: variantNodes[0].id, quantity: quantity, accessibleAddingToCartLabel: "Adding item to your cart", onClick: onButtonClick, className: 'fs-product-add-to-cart' }, addingProduct ? React.createElement("div", { className: 'fs-adding-product' },
-            React.createElement(Spinner, { color: addToCartSettings.color }),
-            " Adding...") : React.createElement("div", null, addToCartSettings.text))));
-}
+import React, { useEffect, useState } from 'react';
+import { AddToCartButton, ProductOptionsProvider } from '@shopify/hydrogen';
+import { useCart } from "@shopify/hydrogen";
+import { Spinner } from "../../../../icons/Spinner";
+export function AddToCartClient({ variantId, quantity = 1, variantNodes, addToCartSettings }) {
+    const { status } = useCart();
+    const [addingProduct, setAddingProduct] = useState(false);
+    useEffect(() => {
+        if (status === 'idle') {
+            if (addingProduct) {
+                window.dispatchEvent(new CustomEvent('fs-custom-events-product-added'));
+            }
+            setAddingProduct(false);
+        }
+    }, [status]);
+    const onButtonClick = () => {
+        setAddingProduct(true);
+    };
+    return (React.createElement(ProductOptionsProvider, { data: variantNodes },
+        React.createElement(AddToCartButton, { variantId: variantNodes[0].id, quantity: quantity, accessibleAddingToCartLabel: "Adding item to your cart", onClick: onButtonClick, className: 'fs-product-add-to-cart' }, addingProduct ? React.createElement("div", { className: 'fs-adding-product' },
+            React.createElement(Spinner, { color: addToCartSettings.color }),
+            " Adding...") : React.createElement("div", null, addToCartSettings.text))));
+}

package/dist/esnext/components/ProductCard/components/Compare/Compare.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-interface Props {
-    compare: string;
-}
-export declare function Compare({ compare }: Props): React.JSX.Element;
-export {};
+import React from 'react';
+interface Props {
+    compare: string;
+}
+export declare function Compare({ compare }: Props): React.JSX.Element;
+export {};

package/dist/esnext/components/ProductCard/components/Compare/Compare.js

@@ -1,6 +1,6 @@
-import React from 'react';
-export function Compare({ compare }) {
-    return (React.createElement("div", { className: "fs-product-card-compare" },
-        "$",
-        compare));
-}
+import React from 'react';
+export function Compare({ compare }) {
+    return (React.createElement("div", { className: "fs-product-card-compare" },
+        "$",
+        compare));
+}