@gem-sdk/components 3.0.0-pre-production.14 → 3.0.0

package/dist/cjs/post-purchase/text/settings/heading/Heading.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var presetsV2=require("./configs/presets-v2.js"),Text=require("../text/Text.js");const headingConfig={...Text.default,tag:"PostPurchaseHeading",label:"Heading",presets:presetsV2.presetsV2};exports.default=headingConfig;

package/dist/cjs/post-purchase/text/settings/heading/configs/presets-v2.js

@@ -0,0 +1,3 @@
+"use strict";const presetsV2=[{id:"PostPurchaseHeading",name:{en:"Heading"},icon:{desktop:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.6 2.09659C15.6 1.7671 15.8518 1.5 16.1625 1.5H20.4375C20.7482 1.5 21 1.7671 21 2.09659V2.8125C21 3.14199 20.7482 3.40909 20.4375 3.40909H20.4172C20.2902 3.46746 20.1489 3.5 20 3.5H19.2051V20.5H20C20.1489 20.5 20.2902 20.5325 20.4172 20.5909H20.4375C20.7482 20.5909 21 20.858 21 21.1875V21.9034C21 22.2329 20.7482 22.5 20.4375 22.5H16.1625C15.8518 22.5 15.6 22.2329 15.6 21.9034V21.1875C15.6 20.858 15.8518 20.5909 16.1625 20.5909H16.1873C16.3143 20.5325 16.4556 20.5 16.6045 20.5H17.4V12H6.6V20.5H7.39551C7.54441 20.5 7.68571 20.5325 7.81268 20.5909H7.8375C8.14816 20.5909 8.4 20.858 8.4 21.1875V21.9034C8.4 22.2329 8.14816 22.5 7.8375 22.5H3.5625C3.25184 22.5 3 22.2329 3 21.9034V21.1875C3 20.858 3.25184 20.5909 3.5625 20.5909H3.58282C3.7098 20.5325 3.8511 20.5 4 20.5H4.79863L4.79863 3.5H4C3.8511 3.5 3.7098 3.46746 3.58282 3.40909H3.5625C3.25184 3.40909 3 3.14199 3 2.8125V2.09659C3 1.7671 3.25184 1.5 3.5625 1.5H7.8375C8.14816 1.5 8.4 1.7671 8.4 2.09659V2.8125C8.4 3.14199 8.14816 3.40909 7.8375 3.40909H7.81269C7.68571 3.46746 7.54441 3.5 7.39551 3.5H6.6V9.98779H17.4V3.5H16.6045C16.4556 3.5 16.3143 3.46746 16.1873 3.40909H16.1625C15.8518 3.40909 15.6 3.14199 15.6 2.8125V2.09659Z" fill="white"/>
+    </svg>`},components:[{tag:"PostPurchaseHeading",settings:{text:"Your heading text goes here"},styles:{typo:{fontSize:"xlarge",textColor:"default",fontWeight:"bold",textTransform:"none"}},advanced:{blockPadding:"none",inlinePadding:"none"}}]}];exports.presetsV2=presetsV2;

package/dist/cjs/post-purchase/text/settings/text/Text.js

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var settingV2=require("./configs/setting-v2.js"),uiV1=require("./configs/ui-v1.js"),uiV2=require("./configs/ui-v2.js");const config={tag:"PostPurchaseText",label:"Text block",icon:`
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.19448 7H6.59995L10.2944 16.4858H8.55837L7.53884 13.7231H4.25559L3.23606 16.4858H1.5L5.19448 7ZM5.8937 9.30461L4.78109 12.2986H7.00631L5.8937 9.30461ZM13.0014 9.0633C13.3404 8.98396 13.714 8.94562 14.1203 8.94562C14.6354 8.94562 15.1134 9.02321 15.5514 9.18267C16.0081 9.34283 16.3829 9.6099 16.6621 9.98863C16.9537 10.3842 17.0848 10.8908 17.0848 11.477V16.4858H15.501V15.9596L15.4704 15.9848C15.2475 16.1701 14.9804 16.3168 14.6752 16.4294L14.6716 16.4307C14.3527 16.5435 13.9891 16.5961 13.5859 16.5961C12.8234 16.5961 12.1737 16.3941 11.6632 15.9628L11.6619 15.9617C11.1431 15.5184 10.8815 14.9216 10.8815 14.2009C10.8815 13.5177 11.1427 12.952 11.65 12.529C12.1598 12.0996 12.8743 11.9095 13.7476 11.9095H15.4588V11.4965C15.4588 11.096 15.3369 10.8544 15.1311 10.7025C14.8926 10.5265 14.5489 10.422 14.0711 10.422C13.7425 10.422 13.4942 10.4592 13.3154 10.5222C13.1325 10.5883 13.0096 10.671 12.9295 10.759C12.8408 10.8573 12.7807 10.9623 12.7443 11.0752L12.6748 11.291H11.1355L11.1715 10.9367C11.2043 10.6142 11.2985 10.3203 11.4585 10.0619L11.4612 10.0576C11.6238 9.80424 11.8375 9.5961 12.0963 9.43184C12.3587 9.26403 12.662 9.14273 13.0014 9.0633ZM13.7687 13.3339C13.2451 13.3339 12.9423 13.444 12.7857 13.5912C12.6157 13.7511 12.5356 13.9405 12.5356 14.1814C12.5356 14.5079 12.6483 14.7173 12.8701 14.8617C13.1355 15.0345 13.4525 15.1262 13.832 15.1262C14.1616 15.1262 14.4439 15.064 14.6849 14.9475C14.9356 14.8243 15.1231 14.664 15.2579 14.4704L15.2603 14.4671C15.3934 14.2812 15.4588 14.075 15.4588 13.8377V13.3339H13.7687ZM19.9323 8.3429C19.6012 8.3429 19.3328 8.62932 19.3328 8.98264C19.3328 9.33596 19.6012 9.62238 19.9323 9.62238H20.3169V15.7205H19.9323C19.6012 15.7205 19.3328 16.0069 19.3328 16.3603C19.3328 16.7136 19.6012 17 19.9323 17H21.9006C22.2316 17 22.5 16.7136 22.5 16.3603C22.5 16.0069 22.2316 15.7205 21.9006 15.7205H21.5157V9.62238H21.9006C22.2316 9.62238 22.5 9.33596 22.5 8.98264C22.5 8.62932 22.2316 8.3429 21.9006 8.3429H20.9163H19.9323Z" fill="white"/>
+  </svg>
+  `,settings:settingV2.settingV2,ui:uiV1.uiV1,uiV2:uiV2.uiV2,advanced:{},presets:[{id:"PostPurchaseText",name:{en:"Text block"},icon:{desktop:`<svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0.728516 15V13.4961L2.28125 13.2031V2.58789L0.728516 2.29492V0.78125H2.28125H7.39844C8.45964 0.78125 9.36784 0.966797 10.123 1.33789C10.8848 1.70898 11.4674 2.22656 11.8711 2.89062C12.2747 3.54818 12.4766 4.31966 12.4766 5.20508C12.4766 6.09049 12.2747 6.86523 11.8711 7.5293C11.4674 8.18685 10.8848 8.69792 10.123 9.0625C9.36784 9.42708 8.45964 9.60938 7.39844 9.60938H4.74219V13.2031L6.29492 13.4961V15H0.728516ZM4.74219 7.70508H7.39844C8.27083 7.70508 8.92513 7.4707 9.36133 7.00195C9.79753 6.5332 10.0156 5.94076 10.0156 5.22461C10.0156 4.49544 9.79753 3.88997 9.36133 3.4082C8.92513 2.92643 8.27083 2.68555 7.39844 2.68555H4.74219V7.70508Z" fill="#D6D6D6"/>
+        </svg>`},components:[{tag:"PostPurchaseText",advanced:{blockPadding:"none",inlinePadding:"none"}}]}],rootOverride:{styles:{align:"center",width:{desktop:"1200px"}}}};exports.default=config;

package/dist/cjs/post-purchase/text/settings/text/configs/setting-v2.js

@@ -0,0 +1 @@
+"use strict";const settingV2=[{id:"setting",controls:[{id:"textGroup",type:"group",label:"Text",controls:[{id:"text",label:"Content",type:"textarea",default:"Replace this text with your content"}]}]},{id:"style",controls:[{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,devices:{desktop:{default:"100%"},tablet:{default:"100%"},mobile:{default:"100%"}},displayOptions:[{label:"Fit content",value:"Auto",showValue:!0},{label:"Full",value:"100%",showValue:!0}]},{id:"typo",label:"Label",type:"typography-post-purchase",default:{fontSize:"medium",textColor:"default",fontWeight:"normal",textTransform:"none"}},{id:"textAlign",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"text",tooltip:"Align left",iconName:"polaris-text-align-left"},{label:"Center",value:"center",type:"text",tooltip:"Align center",iconName:"polaris-text-align-center"},{label:"Right",value:"right",type:"text",tooltip:"Align right",iconName:"polaris-text-align-right"}],default:"left"},{id:"align",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],default:"left"},{id:"direction",label:"Direction",type:"option:value",options:[{label:"LTR",value:"ltr"},{label:"RTL",value:"rtl"}],default:"ltr"}]}];exports.settingV2=settingV2;

package/dist/cjs/post-purchase/text/settings/text/configs/ui-v1.js

@@ -0,0 +1 @@
+"use strict";const uiV1=[{type:"group",label:{en:"Size"},controls:[{type:"control",label:{en:"Width"},setting:{id:"width"}}]},{type:"group",label:{en:"Text"},controls:[{type:"control",label:{en:"Direction"},setting:{id:"direction"}},{type:"control",label:{en:""},setting:{id:"typo"},layout:"vertical"},{type:"control",setting:{id:"textAlign"},label:{en:"Text align"}}]},{type:"control",label:{en:"Align"},setting:{id:"align"},condition:"width !== '100%'",options:{label:"large"}}];exports.uiV1=uiV1;

package/dist/cjs/post-purchase/text/settings/text/configs/ui-v2.js

@@ -0,0 +1 @@
+"use strict";const uiV2=[{label:{en:"Text"},controls:[{type:"control",label:{en:"Direction"},setting:{id:"direction"},controlChangeTrigger:{settings:[{action:{controlId:"textAlign",newValue:"right",groupType:"style",controlType:"style"},condition:"direction === 'rtl' && textAlign === 'left'",source:["direction","textAlign"]},{action:{controlId:"textAlign",newValue:"left",groupType:"style",controlType:"style"},condition:"direction === 'ltr' && textAlign === 'right'",source:["direction","textAlign"]}],options:{noRecordHistory:!0}}},{type:"control",setting:{id:"typo"},layout:"vertical"},{type:"control",setting:{id:"textAlign"},label:{en:"Align"}}]},{label:{en:"Size"},controls:[{type:"control",label:{en:"Width"},setting:{id:"width"},layout:"horizontal"}]},{controls:[{label:{en:"Align"},conditionEnable:"activeScreenId === 'desktop' ? !(parseInt(width) >= 100 && width?.includes(\"%\")) : (!(parseInt(width) >= 100 && width?.includes(\"%\")) && width !== 'default')",setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"}}]}];exports.uiV2=uiV2;

package/dist/cjs/postPurchaseSetting.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var index=require("./grid/index.js"),index$1=require("./post-purchase/advanced-list/index.js"),index$2=require("./post-purchase/button/index.js"),index$3=require("./post-purchase/callout-banner/index.js"),index$4=require("./post-purchase/countdown-timer/index.js"),index$5=require("./post-purchase/image/index.js"),index$6=require("./post-purchase/line/index.js"),index$7=require("./post-purchase/link/index.js"),index$9=require("./post-purchase/product/index.js"),index$8=require("./post-purchase/text/index.js"),postPurchaseSetting={...index.gridSetting,...index$1.postPurchaseAdvancedListSetting,...index$2.postPurchaseButtonSetting,...index$3.postPurchaseCalloutBoxSetting,...index$4.postPurchaseCountdownTimerSetting,...index$5.postPurchaseImageSetting,...index$6.postPurchaseLineSetting,...index$7.postPurchaseLinkSetting,...index$8.postPurchaseTextSetting,...index$9.postPurchaseProductSetting,...index$8.postPurchaseTextSetting};exports.default=postPurchaseSetting;

package/dist/cjs/product/components/ProductImages.js

@@ -1,284 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@gem-sdk/core');
-var React = require('react');
-var ProductFeaturedImage = require('./ProductImages/ProductFeaturedImage.js');
-var productImage = require('../helpers/product-image.js');
-var common = require('./ProductImages/common/common.js');
-var ProductGalleryCarousel = require('./ProductImages/ProductGalleryCarousel.js');
-var ProductGalleryGrid = require('./ProductImages/ProductGalleryGrid.js');
-var ProductImagesLightBox = require('./ProductImages/ProductImagesLightBox.js');
-var productGallery = require('./ProductImages/common/productGallery.js');
-
-const DEVICES = [
-    'mobile',
-    'tablet',
-    'desktop'
-];
-const getProductGallery = (product)=>{
-    return product?.medias?.edges.map((img)=>{
-        return img?.node;
-    });
-};
-const ProductImages = (productImageProps)=>{
-    const { setting, styles, builderProps, builderAttrs, style, children } = productImageProps;
-    const productFeaturedImageSetting = {
-        ...productImageProps.styles,
-        ...productImageProps.setting
-    };
-    const productGalleryImageSetting = {
-        ...productImageProps.styles,
-        ...productImageProps.setting
-    };
-    const product = core.useProduct();
-    const currentDevice = core.useCurrentDevice();
-    const currentVariant = core.useCurrentVariant();
-    const setProductFeaturedImage = core.useProductStore((s)=>s.setProductFeaturedImage);
-    // State
-    const [openLightBox, setOpenLightBox] = React.useState(false);
-    const [featureImageHeight, setFeatureImageHeight] = React.useState(100);
-    const featureWrapperImage = React.useRef(null);
-    const visibleGallery = core.getResponsiveValueByScreen(setting?.galleryVisible, currentDevice);
-    const visibleFeatureImage = core.getResponsiveValueByScreen(setting?.featureImageVisible, currentDevice);
-    const position = React.useMemo(()=>{
-        return core.getResponsiveValueByScreen(styles?.position, currentDevice);
-    }, [
-        currentDevice,
-        styles?.position
-    ]);
-    const getWidthForGallery = React.useMemo(()=>{
-        return productGallery.getStyleWidthForGallery({
-            galleryVisible: setting?.galleryVisible,
-            featureImageVisible: setting?.featureImageVisible,
-            position: styles?.position,
-            width: styles?.width,
-            widthHorizontalLayout: styles?.widthHorizontalLayout
-        });
-    }, [
-        styles?.position,
-        styles?.width,
-        styles?.widthHorizontalLayout,
-        setting?.galleryVisible,
-        setting?.featureImageVisible
-    ]);
-    const gallery = React.useMemo(()=>{
-        const images = getProductGallery(product);
-        if (!images?.length) return [
-            {
-                id: product?.featuredImage?.id || 'noImageError',
-                src: product?.featuredImage?.src || 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif',
-                width: product?.featuredImage?.width || 480,
-                height: product?.featuredImage?.height || 480
-            }
-        ];
-        return images;
-    }, [
-        product
-    ]);
-    const positionWrapper = React.useMemo(()=>{
-        return common.getStyleAlignment(styles?.align, styles?.position);
-    }, [
-        styles?.position,
-        styles?.align
-    ]);
-    const galleryIndex = React.useMemo(()=>{
-        return gallery.reduce((curr, value, index)=>{
-            if (value) {
-                return {
-                    ...curr,
-                    [value.id]: index
-                };
-            }
-            return curr;
-        }, {});
-    }, [
-        gallery
-    ]);
-    const getGallerySpacing = React.useMemo(()=>{
-        return productGallery.getStyleGallerySpacing(styles?.position, styles?.gallerySpacing);
-    }, [
-        styles?.position,
-        styles?.gallerySpacing
-    ]);
-    const isAddOverFlowClass = React.useMemo(()=>{
-        return common.checkAddOverFlowClass(style);
-    }, [
-        style
-    ]);
-    const getHeightForGallery = React.useMemo(()=>{
-        let result = {};
-        DEVICES.forEach((device)=>{
-            const convertNumber = common.convertUnitToNumber(styles?.height?.[device], 0);
-            const galleryVisible = core.getResponsiveValueByScreen(setting?.galleryVisible, device);
-            const featureImageVisible = core.getResponsiveValueByScreen(setting?.featureImageVisible, device);
-            const position = core.getResponsiveValueByScreen(styles?.position, device);
-            const isHorizontalLayout = (position === 'left' || position === 'right') && galleryVisible && featureImageVisible;
-            if (convertNumber) {
-                if (typeof styles?.height?.[device] === 'number') {
-                    result = {
-                        ...result,
-                        [device]: styles?.height?.[device] + 'px'
-                    };
-                } else if (styles?.height?.[device]?.includes('%')) {
-                    result = {
-                        ...result,
-                        [device]: common.convertUnitToNumber(styles?.height?.[device], featureImageHeight) * featureImageHeight / 100 + 'px'
-                    };
-                } else {
-                    result = {
-                        ...result,
-                        [device]: styles?.height?.[device]
-                    };
-                }
-            } else {
-                result = {
-                    ...result,
-                    [device]: isHorizontalLayout ? featureImageHeight + 'px' : 'auto'
-                };
-            }
-        });
-        return result;
-    }, [
-        featureImageHeight,
-        styles?.height,
-        styles?.position,
-        setting?.featureImageVisible,
-        setting?.galleryVisible
-    ]);
-    const adtHeight = React.useCallback(()=>{
-        return core.makeStyleResponsive('h', core.makeHeight(getHeightForGallery));
-    }, [
-        getHeightForGallery
-    ]);
-    React.useEffect(()=>{
-        if (currentVariant) {
-            const index = galleryIndex[currentVariant?.mediaId] || 0;
-            const fImage = gallery[index] ?? product?.featuredImage;
-            if (fImage) {
-                setProductFeaturedImage(fImage);
-            }
-        }
-    }, [
-        currentVariant,
-        galleryIndex,
-        gallery,
-        product?.featuredImage,
-        setProductFeaturedImage
-    ]);
-    // change feature image when change variant
-    React.useEffect(()=>{
-        let observer = null;
-        if (featureWrapperImage?.current) {
-            observer = new ResizeObserver(()=>{
-                setFeatureImageHeight(featureWrapperImage?.current?.offsetHeight || 0);
-            });
-            observer.observe(featureWrapperImage.current, {});
-        }
-        return ()=>{
-            observer?.disconnect();
-        };
-    }, [
-        setting?.featureImageVisible,
-        currentDevice
-    ]);
-    React.useEffect(()=>{
-        if (setting?.featureImageVisible) {
-            setTimeout(()=>{
-                setFeatureImageHeight(featureWrapperImage?.current?.offsetHeight || 0);
-            }, 100);
-        }
-    }, [
-        setting?.featureImageVisible,
-        currentDevice
-    ]);
-    const handleClickSwitchImage = (imageID)=>{
-        if (!imageID) return;
-        const index = galleryIndex[imageID];
-        if (index !== undefined) {
-            const fImage = gallery[index];
-            if (fImage) {
-                setProductFeaturedImage(fImage);
-            }
-        }
-    };
-    const handleOpenLightBox = (imageID)=>{
-        const isEnableOpenLightBox = setting?.clickEffect == 'popup' || core.getResponsiveValueByScreen(setting?.largeViewInPopup, currentDevice);
-        isEnableOpenLightBox && setOpenLightBox(true);
-        handleClickSwitchImage(imageID);
-    };
-    const handleGalleryClick = (imageID)=>{
-        const isEnableOpenLightBox = core.getResponsiveValueByScreen(setting?.largeViewInPopup, currentDevice);
-        isEnableOpenLightBox && handleOpenLightBox(imageID);
-        handleClickSwitchImage(imageID);
-    };
-    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        ...builderAttrs,
-        className: core.cls(builderProps?.uid, {
-            'gp-overflow-hidden': isAddOverFlowClass
-        }),
-        style: {
-            ...style
-        },
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: core.cls('gp-flex gp-w-full', {
-                    ...productImage.getFlexDirection(productImageProps)
-                }),
-                style: {
-                    ...positionWrapper
-                },
-                children: [
-                    visibleFeatureImage && /*#__PURE__*/ jsxRuntime.jsx(ProductFeaturedImage.default, {
-                        imgRef: featureWrapperImage,
-                        productImages: gallery,
-                        ...productFeaturedImageSetting,
-                        onOpenLightBox: ()=>setOpenLightBox(true)
-                    }),
-                    visibleGallery && gallery.length > 1 && /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: core.cls('gp-product-images-gallery gp-inline-flex gp-h-fit gp-max-w-full', {
-                            'gp-justify-start': styles?.position?.desktop == 'bottom-left',
-                            'tablet:gp-justify-start': styles?.position?.tablet == 'bottom-left',
-                            'mobile:gp-justify-start': styles?.position?.mobile == 'bottom-left',
-                            'gp-justify-center': styles?.position?.desktop == 'bottom-center',
-                            'tablet:gp-justify-center': styles?.position?.tablet == 'bottom-center',
-                            'mobile:gp-justify-center': styles?.position?.mobile == 'bottom-center',
-                            'gp-mx-auto': position == 'bottom-center'
-                        }),
-                        style: {
-                            ...core.makeStyle({
-                                fs: '1.23'
-                            }),
-                            ...getWidthForGallery,
-                            ...getGallerySpacing,
-                            ...adtHeight()
-                        },
-                        children: common.getTypeWidthDevice(setting?.type)[currentDevice] === 'slider' || position === 'left' || position === 'right' ? /*#__PURE__*/ jsxRuntime.jsx(ProductGalleryCarousel.default, {
-                            productImages: gallery,
-                            ...productGalleryImageSetting,
-                            builderPropUID: builderProps?.uid,
-                            onHandleClick: (imageID)=>handleGalleryClick(imageID || '')
-                        }) : /*#__PURE__*/ jsxRuntime.jsx(ProductGalleryGrid.default, {
-                            productImages: gallery,
-                            ...productGalleryImageSetting,
-                            builderPropUID: builderProps?.uid,
-                            onHandleClick: (imageID)=>handleGalleryClick(imageID || '')
-                        })
-                    })
-                ]
-            }),
-            (setting?.clickEffect == 'popup' || core.getResponsiveValueByScreen(setting?.largeViewInPopup, currentDevice)) && /*#__PURE__*/ jsxRuntime.jsx(ProductImagesLightBox.default, {
-                productImages: gallery,
-                builderPropUID: builderProps?.uid,
-                open: openLightBox,
-                onHandleClose: ()=>setOpenLightBox(false),
-                imageRatio: styles?.ftAspectRatio
-            }),
-            children
-        ]
-    });
-};
-
-exports.default = ProductImages;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react"),ProductFeaturedImage=require("./product-images/ProductFeaturedImage.js"),productImage=require("../helpers/product-image.js"),helpers=require("./product-images/common/helpers.js"),ProductGalleryCarousel=require("./product-images/ProductGalleryCarousel.js"),ProductGalleryGrid=require("./product-images/ProductGalleryGrid.js"),ProductImagesLightBox=require("./product-images/ProductImagesLightBox.js"),productGallery=require("./product-images/common/productGallery.js");const DEVICES=["mobile","tablet","desktop"],getProductGallery=e=>e?.medias?.edges.map(e=>e?.node),ProductImages=e=>{let{setting:t,styles:r,builderProps:i,builderAttrs:o,style:s,children:l}=e,a={...e.styles,...e.setting},u={...e.styles,...e.setting},c=core.useProduct(),g=core.useCurrentDevice(),n=core.useCurrentVariant(),d=core.useProductStore(e=>e.setProductFeaturedImage),[p,m]=React.useState(!1),[f,h]=React.useState(100),y=React.useRef(null),b=core.getResponsiveValueByScreen(t?.galleryVisible,g),I=core.getResponsiveValueByScreen(t?.featureImageVisible,g),R=React.useMemo(()=>core.getResponsiveValueByScreen(r?.position,g),[g,r?.position]),j=React.useMemo(()=>productGallery.getStyleWidthForGallery({galleryVisible:t?.galleryVisible,featureImageVisible:t?.featureImageVisible,position:r?.position,width:r?.width,widthHorizontalLayout:r?.widthHorizontalLayout}),[r?.position,r?.width,r?.widthHorizontalLayout,t?.galleryVisible,t?.featureImageVisible]),x=React.useMemo(()=>{let e=getProductGallery(c);return e?.length?e:[{id:c?.featuredImage?.id??"noImageError",src:c?.featuredImage?.src??"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:c?.featuredImage?.width??480,height:c?.featuredImage?.height??480}]},[c]),V=React.useMemo(()=>helpers.getStyleAlignment(r?.align,r?.position),[r?.position,r?.align]),P=React.useMemo(()=>x.reduce((e,t,r)=>t?{...e,[t.id]:r}:e,{}),[x]),v=React.useMemo(()=>productGallery.getStyleGallerySpacing(r?.position,r?.gallerySpacing),[r?.position,r?.gallerySpacing]),S=React.useMemo(()=>helpers.checkAddOverFlowClass(s),[s]),G=React.useMemo(()=>{let e={};return DEVICES.forEach(i=>{let o=helpers.convertUnitToNumber(r?.height?.[i],0),s=core.getResponsiveValueByScreen(t?.galleryVisible,i),l=core.getResponsiveValueByScreen(t?.featureImageVisible,i),a=core.getResponsiveValueByScreen(r?.position,i),u=("left"===a||"right"===a)&&s&&l;e=o?"number"==typeof r?.height?.[i]?{...e,[i]:r?.height?.[i]+"px"}:r?.height?.[i]?.includes("%")?{...e,[i]:helpers.convertUnitToNumber(r?.height?.[i],f)*f/100+"px"}:{...e,[i]:r?.height?.[i]}:{...e,[i]:u?f+"px":"auto"}}),e},[f,r?.height,r?.position,t?.featureImageVisible,t?.galleryVisible]),w=React.useCallback(()=>core.makeStyleResponsive("h",core.makeHeight(G)),[G]);React.useEffect(()=>{if(n){let e=P[n?.mediaId]??0,t=x[e]??c?.featuredImage;t&&d(t)}},[n,P,x,c?.featuredImage,d]),React.useEffect(()=>{let e=null;return y?.current&&(e=new ResizeObserver(()=>{h(y?.current?.offsetHeight??0)})).observe(y.current,{}),()=>{e?.disconnect()}},[t?.featureImageVisible,g]),React.useEffect(()=>{t?.featureImageVisible&&setTimeout(()=>{h(y?.current?.offsetHeight??0)},100)},[t?.featureImageVisible,g]);let k=e=>{if(!e)return;let t=P[e];if(void 0!==t){let e=x[t];e&&d(e)}},B=e=>{let r=t?.clickEffect=="popup"||core.getResponsiveValueByScreen(t?.largeViewInPopup,g);r&&m(!0),k(e)},C=e=>{let r=core.getResponsiveValueByScreen(t?.largeViewInPopup,g);r&&B(e),k(e)};return jsxRuntime.jsxs("div",{...o,className:core.cls(i?.uid,{"gp-overflow-hidden":S}),style:{...s},children:[jsxRuntime.jsxs("div",{className:core.cls("gp-flex gp-w-full",{...productImage.getFlexDirection(e)}),style:{...V},children:[I&&jsxRuntime.jsx(ProductFeaturedImage.default,{imgRef:y,productImages:x,...a,onOpenLightBox:()=>m(!0)}),b&&x.length>1&&jsxRuntime.jsx("div",{className:core.cls("gp-product-images-gallery gp-inline-flex gp-h-fit gp-max-w-full",{"gp-justify-start":r?.position?.desktop=="bottom-left","tablet:gp-justify-start":r?.position?.tablet=="bottom-left","mobile:gp-justify-start":r?.position?.mobile=="bottom-left","gp-justify-center":r?.position?.desktop=="bottom-center","tablet:gp-justify-center":r?.position?.tablet=="bottom-center","mobile:gp-justify-center":r?.position?.mobile=="bottom-center","gp-mx-auto":"bottom-center"==R}),style:{...core.makeStyle({fs:"1.23"}),...j,...v,...w()},children:"slider"===helpers.getTypeWidthDevice(t?.type)[g]||"left"===R||"right"===R?jsxRuntime.jsx(ProductGalleryCarousel.default,{productImages:x,...u,builderPropUID:i?.uid,onHandleClick:e=>C(e||"")}):jsxRuntime.jsx(ProductGalleryGrid.default,{productImages:x,...u,builderPropUID:i?.uid,onHandleClick:e=>C(e||"")})})]}),(t?.clickEffect=="popup"||core.getResponsiveValueByScreen(t?.largeViewInPopup,g))&&jsxRuntime.jsx(ProductImagesLightBox.default,{productImages:x,builderPropUID:i?.uid,open:p,onHandleClose:()=>m(!1),imageRatio:r?.ftAspectRatio}),l]})};exports.default=ProductImages;

package/dist/cjs/product/components/ProductImages.liquid.js

@@ -1,107 +1,35 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@gem-sdk/core');
-var productImage = require('../helpers/product-image.js');
-var common = require('./ProductImages/common/common.js');
-var ProductFeaturedImage_liquid = require('./ProductImages/liquid/ProductFeaturedImage.liquid.js');
-var ProductGalleryCarousel_liquid = require('./ProductImages/liquid/ProductGalleryCarousel.liquid.js');
-var ProductGalleryGrid_liquid = require('./ProductImages/liquid/ProductGalleryGrid.liquid.js');
-var productGallery = require('./ProductImages/common/productGallery.js');
-var helpers = require('../../helpers.js');
-
-const ProductImages = (productImageProps)=>{
-    const { setting, styles, builderProps, style } = productImageProps;
-    const productFeaturedImageSetting = {
-        ...productImageProps.styles,
-        ...productImageProps.setting
-    };
-    const productGalleryImageSetting = {
-        ...productImageProps.styles,
-        ...productImageProps.setting
-    };
-    const getPositionByDevice = (device)=>{
-        return core.getResponsiveValueByScreen(styles?.position, device);
-    };
-    const getGalleryDisplay = ()=>{
-        return common.getDisplayStyle((device)=>!!setting?.galleryVisible && !core.getResponsiveValueByScreen(setting?.galleryVisible, device), 'inline-flex');
-    };
-    const gpData = `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),productImage=require("../helpers/product-image.js"),helpers=require("./product-images/common/helpers.js"),ProductFeaturedImage_liquid=require("./product-images/ProductFeaturedImage.liquid.js"),ProductGalleryCarousel_liquid=require("./product-images/ProductGalleryCarousel.liquid.js"),ProductGalleryGrid_liquid=require("./product-images/ProductGalleryGrid.liquid.js"),productGallery=require("./product-images/common/productGallery.js"),helpers$1=require("../../helpers.js");const ProductImages=e=>{let{setting:t,styles:r,builderProps:i,style:l}=e,s={...e.styles,...e.setting},a={...e.styles,...e.setting},o=e=>core.getResponsiveValueByScreen(r?.position,e),d=()=>helpers.getDisplayStyle(e=>!!t?.galleryVisible&&!core.getResponsiveValueByScreen(t?.galleryVisible,e),"inline-flex"),u=`
     {
-      "id":${JSON.stringify(builderProps?.uid)},
-      "setting":${JSON.stringify(setting)},
-      "styles":${JSON.stringify(styles)},
+      "id":${JSON.stringify(i?.uid)},
+      "setting":${JSON.stringify(t)},
+      "styles":${JSON.stringify(r)},
       "product":{{ product | json | escape }}
     }
-  `;
-    return core.template`
+  `;return core.template`
   {% assign featured_image = product.featured_image %}
   {%- if variant != null and variant.featured_image != null -%}
   {% assign featured_image = variant.featured_image %}
   {%- endif -%}
   <gp-product-images
-    gp-data='${gpData}'
-    style="${{
-        ...style
-    }}"
-    class="${core.cls({
-        'gp-overflow-hidden': common.checkAddOverFlowClass(style)
-    })}"
+    gp-data='${u}'
+    style="${{...l}}"
+    class="${core.cls({"gp-overflow-hidden":helpers.checkAddOverFlowClass(l)})}"
   >
     <div
-        class="${core.cls('gp-flex gp-w-full', {
-        ...productImage.getFlexDirection(productImageProps)
-    })}"
-        style="${{
-        ...common.getStyleAlignment(styles?.align, styles?.position)
-    }}"
+        class="${core.cls("gp-flex gp-w-full",{...productImage.getFlexDirection(e)})}"
+        style="${{...helpers.getStyleAlignment(r?.align,r?.position)}}"
       >
-        ${ProductFeaturedImage_liquid.default({
-        ...productFeaturedImageSetting
-    })}
+        ${ProductFeaturedImage_liquid.default({...s})}
         {%- if product.media.size > 1 -%}
           <div
-            class="${core.cls('gallery-wrapper gp-product-images-gallery gp-inline-flex gp-h-fit gp-max-w-full', {
-        'gp-justify-start': getPositionByDevice('desktop') == 'bottom-left',
-        'tablet:gp-justify-start': getPositionByDevice('tablet') == 'bottom-left',
-        'mobile:gp-justify-start': getPositionByDevice('mobile') == 'bottom-left',
-        'gp-justify-center': getPositionByDevice('desktop') == 'bottom-center',
-        'tablet:gp-justify-center': getPositionByDevice('tablet') == 'bottom-center',
-        'mobile:gp-justify-center': getPositionByDevice('mobile') == 'bottom-center',
-        'gp-mx-auto': getPositionByDevice('desktop') == 'bottom-center',
-        'tablet:gp-mx-auto': getPositionByDevice('tablet') == 'bottom-center',
-        'mobile:gp-mx-auto': getPositionByDevice('mobile') == 'bottom-center'
-    })}"
-            style="${{
-        ...core.makeStyle({
-            fs: '1.23'
-        }),
-        ...getGalleryDisplay(),
-        ...productGallery.getStyleWidthForGallery({
-            galleryVisible: setting?.galleryVisible,
-            featureImageVisible: setting?.featureImageVisible,
-            position: styles?.position,
-            width: styles?.width,
-            widthHorizontalLayout: styles?.widthHorizontalLayout
-        }),
-        ...productGallery.getStyleGallerySpacing(styles?.position, styles?.gallerySpacing)
-    }}"
+            class="${core.cls("gallery-wrapper gp-product-images-gallery gp-inline-flex gp-h-fit gp-max-w-full",{"gp-justify-start":"bottom-left"==o("desktop"),"tablet:gp-justify-start":"bottom-left"==o("tablet"),"mobile:gp-justify-start":"bottom-left"==o("mobile"),"gp-justify-center":"bottom-center"==o("desktop"),"tablet:gp-justify-center":"bottom-center"==o("tablet"),"mobile:gp-justify-center":"bottom-center"==o("mobile"),"gp-mx-auto":"bottom-center"==o("desktop"),"tablet:gp-mx-auto":"bottom-center"==o("tablet"),"mobile:gp-mx-auto":"bottom-center"==o("mobile")})}"
+            style="${{...core.makeStyle({fs:"1.23"}),...d(),...productGallery.getStyleWidthForGallery({galleryVisible:t?.galleryVisible,featureImageVisible:t?.featureImageVisible,position:r?.position,width:r?.width,widthHorizontalLayout:r?.widthHorizontalLayout}),...productGallery.getStyleGallerySpacing(r?.position,r?.gallerySpacing)}}"
           >
-            ${ProductGalleryCarousel_liquid.default({
-        builderPropUID: builderProps?.uid,
-        ...productGalleryImageSetting
-    })}
-            ${ProductGalleryGrid_liquid.default({
-        builderPropUID: builderProps?.uid,
-        ...productGalleryImageSetting
-    })}
+            ${ProductGalleryCarousel_liquid.default({builderPropUID:i?.uid,...a})}
+            ${ProductGalleryGrid_liquid.default({builderPropUID:i?.uid,...a})}
           </div>
         {%- endif -%}
       </div>
   </gp-product-images>
-  ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-product-images.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-product-images.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
-  `;
-};
-
-exports.default = ProductImages;
+  ${core.RenderIf(core.isLocalEnv,`<script ${helpers$1.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-product-images.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers$1.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-product-images.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+  `};exports.default=ProductImages;

package/dist/cjs/product/components/ProductNotFound.js

@@ -1,147 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@gem-sdk/core');
-var React = require('react');
-var ProductNotFoundRelated = require('./ProductNotFoundRelated.js');
-
-const ProductNotFound = ({ collectionHandle, productSrc, relatedTagString, assignProductNoTags, noAssignedProduct, builderAttrs, children })=>{
-    const isInstant = core.usePageType() === 'STATIC';
-    const storefrontToken = core.useShopStore((s)=>s.storefrontToken);
-    const storefrontUrl = core.useShopStore((s)=>s.storefrontUrl);
-    const isCollection = productSrc === 'Collection';
-    const isRelated = productSrc === 'RelatedProduct';
-    const textWarning = React.useMemo(()=>{
-        if (isInstant && !storefrontToken) {
-            return 'We can not get your products from Shopify';
-        }
-        if (isCollection) {
-            if (!collectionHandle) {
-                return 'Have you create collections in your store? We couldn’t find any.';
-            } else {
-                return 'Have you add products to this collection? We couldn’t find any.';
-            }
-        }
-        return 'Have you added products to your store? We couldn’t find any.';
-    }, [
-        isInstant,
-        storefrontToken,
-        isCollection,
-        collectionHandle
-    ]);
-    const textLink = React.useMemo(()=>{
-        if (isCollection) {
-            if (!collectionHandle) {
-                return 'Add collection to Shopify';
-            }
-            return 'Add products to collection';
-        }
-        return `Add products to Shopify`;
-    }, [
-        isCollection,
-        collectionHandle
-    ]);
-    const shopifyLink = React.useMemo(()=>{
-        if (!storefrontUrl) return undefined;
-        const url = new URL(storefrontUrl);
-        if (isCollection) {
-            return `${url.protocol}//${url.host}/admin/collections`;
-        }
-        return `${url.protocol}//${url.host}/admin/products`;
-    }, [
-        isCollection,
-        storefrontUrl
-    ]);
-    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        ...builderAttrs,
-        className: `gp-relative gp-flex gp-h-[98px] gp-flex-col gp-items-center gp-justify-center gp-rounded gp-border-dotted gp-border-[#676767] gp-border ${isRelated ? 'gp-py-16' : ''}`,
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: `gp-flex gp-items-center gp-justify-center ${isRelated ? 'gp-flex-col gp-gap-[7px] gp-py-16' : ''}`,
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx("span", {
-                        className: "gp-mr-2",
-                        children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
-                            xmlns: "http://www.w3.org/2000/svg",
-                            width: "21",
-                            height: "21",
-                            viewBox: "0 0 21 21",
-                            fill: "none",
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx("g", {
-                                    clipPath: "url(#clip0_9546_221079)",
-                                    children: /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                        fillRule: "evenodd",
-                                        clipRule: "evenodd",
-                                        d: "M11.5728 3.86863C11.0976 3.04379 9.90241 3.04379 9.4272 3.86863L1.91575 16.9064C1.44289 17.7271 2.0381 18.75 2.98855 18.75H18.0114C18.9619 18.75 19.5571 17.7271 19.0842 16.9064L11.5728 3.86863ZM10.5 6.43064C10.8452 6.43064 11.125 6.7092 11.125 7.05282V12.6524C11.125 12.996 10.8452 13.2746 10.5 13.2746C10.1548 13.2746 9.875 12.996 9.875 12.6524V7.05282C9.875 6.7092 10.1548 6.43064 10.5 6.43064ZM10.5 14.7678C9.94771 14.7678 9.5 15.2135 9.5 15.7633C9.5 16.3131 9.94771 16.7588 10.5 16.7588C11.0523 16.7588 11.5 16.3131 11.5 15.7633C11.5 15.2135 11.0523 14.7678 10.5 14.7678Z",
-                                        fill: "#494949"
-                                    })
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx("defs", {
-                                    children: /*#__PURE__*/ jsxRuntime.jsx("clipPath", {
-                                        id: "clip0_9546_221079",
-                                        children: /*#__PURE__*/ jsxRuntime.jsx("rect", {
-                                            width: "20",
-                                            height: "21",
-                                            fill: "white",
-                                            transform: "translate(0.5)"
-                                        })
-                                    })
-                                })
-                            ]
-                        })
-                    }),
-                    isRelated ? /*#__PURE__*/ jsxRuntime.jsx(ProductNotFoundRelated.default, {
-                        assignProductNoTags: assignProductNoTags,
-                        relatedTagString: relatedTagString,
-                        noAssignedProduct: noAssignedProduct
-                    }) : /*#__PURE__*/ jsxRuntime.jsx("span", {
-                        className: "gp-text-sm gp-font-normal gp-text-[#212121]",
-                        children: textWarning
-                    })
-                ]
-            }),
-            isInstant ? /*#__PURE__*/ jsxRuntime.jsx("div", {
-                children: storefrontToken ? /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    onClick: ()=>{
-                        if (shopifyLink) {
-                            window.open(shopifyLink, '_blank');
-                        }
-                    },
-                    "aria-hidden": "true",
-                    className: "gp-cursor-pointer gp-text-sm gp-font-medium gp-text-[#3C67FF] gp-no-underline",
-                    children: textLink
-                }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    onClick: ()=>{
-                        window.parent.postMessage('toggleImportProductModal');
-                    },
-                    "aria-hidden": "true",
-                    className: "gp-cursor-pointer gp-text-sm gp-font-medium gp-text-[#3C67FF] gp-no-underline",
-                    children: "Import from Shopify"
-                })
-            }) : isRelated ? null : /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: "gp-text-sm gp-font-normal gp-text-[#212121]",
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx("span", {
-                        "aria-hidden": true,
-                        onClick: ()=>{
-                            if (shopifyLink) {
-                                window.open(shopifyLink, '_blank');
-                            }
-                        },
-                        className: "gp-cursor-pointer gp-font-medium gp-text-[#3C67FF] hover:gp-underline",
-                        children: textLink
-                    }),
-                    ` `,
-                    "or pick another ",
-                    isCollection ? 'collection' : 'product'
-                ]
-            }),
-            core.filterToolbarPreview(children, true)
-        ]
-    });
-};
-
-exports.default = ProductNotFound;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react"),NoDataState=require("../../common/components/NoDataState.js");const ProductNotFound=({collectionHandle:t,productSrc:e,builderAttrs:o,children:r})=>{let n="STATIC"===core.usePageType(),c=core.useShopStore(t=>t.storefrontToken),a=core.useShopStore(t=>t.storefrontUrl),i="Collection"===e,[u,d]=React.useState(""),[s,l]=React.useState("get product"),[p,y]=React.useState("");React.useEffect(()=>{if(i){if(!t){d("We cannot find any collections from your Shopify store. Please try manually syncing the data from Shopify or add a new collection."),l("get collection"),y("collection");return}d("We cannot find any product of this collection from your Shopify store? Please try manually syncing the data from Shopify or add a new product to your collection."),l("get product of collection"),y("product");return}if(n&&!c){y("product"),d("We can not get your products from Shopify");return}y("product"),l("get product"),d("We cannot find any products from your Shopify store. Please try manually syncing the data from Shopify or add a new product.")},[t,i,n,c]);let f=React.useMemo(()=>{if(!a)return;let t=new URL(a);return i?`${t.protocol}//${t.host}/admin/collections`:`${t.protocol}//${t.host}/admin/products`},[i,a]),m=t=>{let e=new CustomEvent("editor:sync-product",{bubbles:!0,detail:{uid:t}});window.dispatchEvent(e)};return jsxRuntime.jsx(NoDataState.default,{elementType:"primary",children:r,builderAttrs:o,title:`Can not ${s} from Shopify`,description:u,primaryBtnTitle:`Add ${p}`,secondaryBtnTitle:"Sync from Shopify",primaryBtnCb:()=>{f&&window.open(f,"_blank")},secondaryBtnCb:()=>m(o?.["data-uid"]??o?.uid)})};exports.default=ProductNotFound;