@gem-sdk/components 2.2.0-staging.31 → 2.2.0

package/dist/esm/product/components/ProductImagesV2/liquid/ProductGalleryCarousel.liquid.js

@@ -6,7 +6,7 @@ import { convertSpacing, getDisplayStyle, getAspectRatio, getSrcImage } from '..
 import { getShapeByLayout, getSettingMinWidthForCarouselItem, getSettingWidthForCarouselItem, getMinHeightByPosition, getSliderPerShowConfig, getAllowDotConfig, getDotStyleConfig, getCarouselVerticalConfigByPosition, checkDisplayGalleryByWidth, getZoomDisplay } from '../common/productGallery.js';
 import { getStyleOfObject } from '../../../helpers/function.js';
 
-const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyLoadImage, ...setting })=>{
+const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
     const getCarouselDisplay = ()=>{
         const isDisplayCarousel = (type, position, device)=>{
             const layout = getResponsiveValueByScreen(position, device);
@@ -86,7 +86,7 @@ const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyLoadImage,
             customLazyload: true,
             style: style,
             className: '!gp-rounded-none gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 gp-cursor-pointer',
-            enableLazyLoadImage
+            enableLazyloadImage
         })}`;
     };
     const aspectRatioToPaddingBottom = ()=>{

package/dist/esm/product/components/ProductImagesV2/liquid/ProductGalleryGrid.liquid.js

@@ -8,7 +8,7 @@ import Model3d from '../../../../image/components/Modal3d.liquid.js';
 import Video from '../../../../image/components/Video.liquid.js';
 import HTML5Embed from '../../../../video/components/HTML5Embed.liquid.js';
 
-const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazyLoadImage, ...setting })=>{
+const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazyloadImage, ...setting })=>{
     const getGridDisplay = ()=>{
         const isDisplayGrid = (type, position, device)=>{
             const layout = getResponsiveValueByScreen(position, device);
@@ -97,7 +97,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             style: style,
             className: '!gp-rounded-none',
             customLazyload: false,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}
       ${setting?.galleryHoverEffect !== 'none' ? `<div class="${cls('zoom-element !gp-max-w-none', getZoomImageClass())}">
           ${NextImage({
@@ -111,7 +111,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             style: style,
             className: '!gp-rounded-none gp-w-full gp-h-full',
             customLazyload: false,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}
           </div>` : ''}
       ${setting?.galleryHoverEffect == 'zoom' && setting?.galleryZoomType == 'glasses' ? `
@@ -294,7 +294,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             },
             className: '!gp-rounded-none',
             customLazyload: false,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}`;
     };
     return template`

package/dist/esm/product/components/ProductImagesV2/liquid/ProductImages.liquid.js

@@ -7,7 +7,7 @@ import { getSettingPreloadData } from '../../../../helpers.js';
 import { getShapeByLayout, sizeSettingDefaultForNewLayout } from '../common/productGallery.js';
 
 const ProductImages = (productImageProps)=>{
-    const { setting, styles, builderProps, style, advanced, rawChildren, pageContext, enableLazyLoadImage } = productImageProps;
+    const { setting, styles, builderProps, style, advanced, rawChildren, pageContext, enableLazyloadImage } = productImageProps;
     const settings = {
         ...setting,
         ...styles
@@ -112,7 +112,7 @@ const ProductImages = (productImageProps)=>{
         builderPropUID: `gp-carousel-${builderProps?.uid}`,
         ...settings,
         children: renderProductBadge(),
-        enableLazyLoadImage
+        enableLazyloadImage
     })}
         ${shouldSkipLiquidRenderForSingleImage(settings?.position, template`
             <div
@@ -128,7 +128,7 @@ const ProductImages = (productImageProps)=>{
               ${ProductGalleryCarousel({
         builderPropUID: `gp-gallery-${builderProps?.uid}`,
         ...settings,
-        enableLazyLoadImage
+        enableLazyloadImage
     })}
             </div>
             ${ProductGalleryGrid({
@@ -138,7 +138,7 @@ const ProductImages = (productImageProps)=>{
         },
         children: renderProductBadge(),
         ...settings,
-        enableLazyLoadImage
+        enableLazyloadImage
     })}
           `)}
       </div>

package/dist/esm/product/components/ProductVariants/variants/combine/index.js

@@ -38,7 +38,7 @@ const renderCombineVariants = (isSoldOutMark, hasPreSelected, enablePrice)=>{
   `}`;
 };
 const renderBlankOption = (hasPreSelected, blankText)=>{
-    return !hasPreSelected ? `<option value="blank" selected>${blankText || getStaticLocale('ProductVariants', 'please_select')}</option>` : '';
+    return !hasPreSelected ? `<option value="blank" selected>${blankText ?? getStaticLocale('ProductVariants', 'please_select')}</option>` : '';
 };
 
 export { renderBlankOption, renderCombineVariants };

package/dist/esm/product/setting/ProductList.js

@@ -814,7 +814,7 @@ const config = {
                     options: {
                         tooltip: {
                             icon: 'info-line-16',
-                            content: 'Note: this might not work properly on Safari for iOS versions below 16',
+                            content: 'Note: this might not work properly on Safari for iOS versions below 17',
                             iconClass: 'text-[#757575] hover:text-[#F9F9F9]'
                         }
                     },

package/dist/esm/tab/hooks/useTabInteraction.js

@@ -1,19 +1,20 @@
 import { useInteraction, useEditorMode } from '@gem-sdk/core';
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, componentUid })=>{
-    const { trigger, onListener, interactionListenerLoaded, saveToElementInteractionData, findElementIncludingSelf } = useInteraction();
+    const [previousTab, setPreviousTab] = useState(activeKey || 1);
+    const { trigger, onListener, interactionListenerLoaded } = useInteraction();
     const mode = useEditorMode();
     const changeOpenTabInteraction = (params)=>{
-        const { data, isRollback, element, key } = params || {};
-        if (data === undefined && isRollback) return;
-        const newData = Number(data) + 1;
+        const { data, isRollback } = params || {};
+        if (data === undefined && isRollback === undefined) return;
         if (isRollback) {
-            setActiveKey(newData);
+            setActiveKey(previousTab);
+            setPreviousTab(activeTab);
             return;
         }
-        saveToElementInteractionData(element, key, String(activeKey));
-        setActiveKey(newData);
+        setPreviousTab(activeTab);
+        setActiveKey(data + 1);
     };
     const dispatchEventTabActive = (index)=>{
         trigger({
@@ -34,16 +35,11 @@ const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, c
             dispatchEventTabActive(activeTab - 1);
         });
         const selector = `[data-id="${componentUid}"]`;
-        const element = findElementIncludingSelf(document, selector);
         const removeListener = onListener({
             event: 'gp:change-open-tab',
             selector
         }, (params)=>{
-            changeOpenTabInteraction({
-                ...params,
-                element,
-                key: params?.uniqueStorageKey
-            });
+            changeOpenTabInteraction(params);
         });
         return ()=>{
             removeListener?.();

package/dist/esm/third-party/components/Bogos/BogosSampleContent.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import BogosConfig from '../../configs/Bogos.js';
 import ThirdPartyPreview from '../ThirdPartyPreview.js';
@@ -9,8 +9,7 @@ const mapWidgetLabel = {
     slider: 'Gift slider',
     message: 'Cart message',
     ['classic-bundle']: 'Classic bundle',
-    ['quantity-break']: 'Quantity break',
-    ['mix-match']: 'Mix and match'
+    ['quantity-break']: 'Quantity break'
 };
 const BogosSampleContent = ({ setting })=>{
     const widgetLabel = setting?.widgetType && mapWidgetLabel[setting.widgetType];
@@ -19,13 +18,15 @@ const BogosSampleContent = ({ setting })=>{
     }, [
         widgetLabel
     ]);
-    return /*#__PURE__*/ jsx("div", {
-        className: "p-2",
-        children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
-            setting: {
-                label,
-                iconSvg: `<img class="gp-w-[24px] border border-[#494949] rounded-[3px]" src="${BogosConfig.logoUrl}">`
-            }
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label,
+                    iconSvg: `<img class="gp-w-[24px] border border-[#494949] rounded-[3px]" src="${BogosConfig.logoUrl}">`
+                }
+            })
         })
     });
 };

package/dist/esm/third-party/components/RechargeSubscriptions.liquid.js

@@ -2,7 +2,7 @@ import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
 
 const RechargeSubscriptions = ({ setting, advanced })=>{
     const { align, appBlockId } = setting ?? {};
-    return getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block`);
+    return getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''}!gp-block`);
 };
 
 export { RechargeSubscriptions as default };

package/dist/esm/third-party/components/Releasit.liquid.js

@@ -1,10 +1,8 @@
-import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
 import { template, makeStyleResponsive } from '@gem-sdk/core';
 
 const Releasit = ({ setting, advanced })=>{
-    const { align, version, appBlockId } = setting ?? {};
-    console.log('version', version);
-    return version === 'v2' ? getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''}!gp-block`) : template`
+    const { align } = setting ?? {};
+    return template`
     <div
       class="${advanced?.cssClass}"
       style="${{

package/dist/esm/third-party/configs/BoldProductOptions.js

@@ -1,7 +1,7 @@
 var BoldProductOptionsConfig = {
     id: 'bold-product-options',
-    label: 'SC Product Options',
-    logoUrl: 'https://cdn.shopify.com/app-store/listing_images/9a0bf1159f79c6ab0660ec422f350445/icon/CP2Uwo_GuYIDEAE=.png',
+    label: 'Bold Product Options',
+    logoUrl: 'https://ucarecdn.com/cae13b55-18b6-416a-a447-c18211d78cfe/-/format/auto/-/preview/3000x3000/-/quality/lighter/Bold%20Product%20Options.png',
     tag: 'BoldProductOptions'
 };
 

package/dist/esm/third-party/configs/EcoboostifyShoppableReelUgc.js

@@ -1,7 +1,7 @@
 var AppConfig = {
     id: 'ecoboostify-shoppable-reel-ugc',
     label: 'EcoBoostify Shoppable Reel UGC',
-    logoUrl: 'https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/CJWKq4vxxIkDEAE=.png',
+    logoUrl: 'https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/COuT9MaKvosDEAE=.png',
     tag: 'EcoboostifyShoppableReelUgc'
 };
 

package/dist/esm/third-party/next.js

@@ -2,11 +2,11 @@ import dynamic from 'next/dynamic';
 import Loading from '../common/components/Loading.js';
 import 'react/jsx-runtime';
 
-const EcomsendBackInStockAlert = dynamic(()=>import('./components/EcomsendBackInStockAlert.js'), {
+const AppstleBundlesDiscounts = dynamic(()=>import('./components/AppstleBundlesDiscounts.js'), {
     ssr: false,
     loading: Loading
 });
-const AppstleBundlesDiscounts = dynamic(()=>import('./components/AppstleBundlesDiscounts.js'), {
+const EcomsendBackInStockAlert = dynamic(()=>import('./components/EcomsendBackInStockAlert.js'), {
     ssr: false,
     loading: Loading
 });
@@ -467,8 +467,8 @@ const EcoboostifyShoppableReelUgc = dynamic(()=>import('./components/Ecoboostify
     loading: Loading
 });
 var thirdParty = {
-    EcomsendBackInStockAlert,
     AppstleBundlesDiscounts,
+    EcomsendBackInStockAlert,
     EcoboostifyShoppableReelUgc,
     EstimatedDeliveryDatePlus,
     OkendoReviewsLoyalty,

package/dist/esm/third-party/setting/EcoboostifyShoppableReelUgc.js

@@ -3,7 +3,7 @@ import AppConfig from '../configs/EcoboostifyShoppableReelUgc.js';
 const config = {
     tag: AppConfig.tag,
     label: AppConfig.label,
-    icon: '<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/CJWKq4vxxIkDEAE=.png">',
+    icon: '<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/COuT9MaKvosDEAE=.png">',
     editorConfigs: {
         component: {
             isThirdParty: true
@@ -18,7 +18,7 @@ const config = {
             hideTextContent: true,
             icon: {
                 desktop: `<div class="w-full flex flex-col items-center">
-        <img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/CJWKq4vxxIkDEAE=.png">
+        <img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/COuT9MaKvosDEAE=.png">
         <span class="preset-item-title">EcoBoostify Shoppable Reel UGC</span>
       </div>`
             },

package/dist/esm/third-party/setting/Releasit.js

@@ -7,11 +7,6 @@ const config = {
     editorConfigs: {
         component: {
             isThirdParty: true
-        },
-        placeholder: {
-            flowTag: [
-                'Product'
-            ]
         }
     },
     presets: [
@@ -40,16 +35,6 @@ const config = {
         {
             id: 'setting',
             controls: [
-                {
-                    id: 'appBlockId',
-                    type: 'input',
-                    default: ''
-                },
-                {
-                    id: 'productHandle',
-                    type: 'input',
-                    default: ''
-                },
                 {
                     id: 'install',
                     type: 'open-link',
@@ -66,38 +51,6 @@ const config = {
                     href: 'https://admin.shopify.com/?redirect=/apps/releasit-cod-order-form',
                     appName: ReleasitConfig.label
                 },
-                {
-                    id: 'version',
-                    label: 'Choose version',
-                    type: 'select',
-                    default: 'v1',
-                    options: [
-                        {
-                            label: 'V1',
-                            value: 'v1'
-                        },
-                        {
-                            label: 'V2',
-                            value: 'v2'
-                        }
-                    ]
-                },
-                {
-                    id: 'widgetTypeV2',
-                    label: 'Choose widget',
-                    type: 'select',
-                    default: 'button-app-block',
-                    options: [
-                        {
-                            label: 'Releasit button',
-                            value: 'button-app-block'
-                        },
-                        {
-                            label: 'Releasit embedded form',
-                            value: 'form-app-block'
-                        }
-                    ]
-                },
                 {
                     id: 'align',
                     label: 'Alignment',
@@ -135,24 +88,14 @@ const config = {
                 id: 'install'
             }
         },
-        {
-            type: 'control',
-            label: {
-                en: 'Choose version'
-            },
-            setting: {
-                id: 'version'
-            }
-        },
         {
             type: 'control',
             label: {
                 en: 'Choose widget'
             },
             setting: {
-                id: 'widgetTypeV2'
-            },
-            condition: 'version === "v2"'
+                id: 'widgetType'
+            }
         },
         {
             type: 'control',

package/dist/esm/third-party/setting/index.js

@@ -112,8 +112,8 @@ import config$1K from './BfSizeChartSizeGuide.js';
 import config$1L from './AlsoBoughtCbb.js';
 import config$1M from './HextomFreeShippingBar.js';
 import config$1N from './EcoboostifyShoppableReelUgc.js';
-import config$1O from './EcomsendBackInStockAlert.js';
-import config$1P from './AppstleBundlesDiscounts.js';
+import config$1O from './AppstleBundlesDiscounts.js';
+import config$1P from './EcomsendBackInStockAlert.js';
 
 var index = {
     HextomCountdownTimerBar: config,
@@ -230,8 +230,8 @@ var index = {
     AlsoBoughtCbb: config$1L,
     HextomFreeShippingBar: config$1M,
     EcoboostifyShoppableReelUgc: config$1N,
-    EcomsendBackInStockAlert: config$1O,
-    AppstleBundlesDiscounts: config$1P
+    AppstleBundlesDiscounts: config$1O,
+    EcomsendBackInStockAlert: config$1P
 };
 
 export { index as default };

package/dist/esm/video/components/HTML5Embed.js

@@ -47,14 +47,14 @@ const HTML5Embed = (props)=>{
             }),
             props.thumbnail && showThumbnail && /*#__PURE__*/ jsxs("div", {
                 role: "presentation",
-                className: "gp-absolute gp-top-0 gp-left-0  gp-w-full gp-h-full",
+                className: "gp-absolute gp-top-0 gp-left-0  gp-w-full",
                 onClick: playVideoAndTurnOffThumbnail,
                 style: props.style,
                 children: [
                     /*#__PURE__*/ jsx("img", {
                         id: "video-thumbnail",
                         src: props.thumbnail,
-                        className: "gp-w-full gp-h-full gp-object-contain gp-thumbnail-video",
+                        className: "gp-w-full gp-h-full gp-object-cover gp-thumbnail-video",
                         alt: "Video Thumbnail"
                     }),
                     /*#__PURE__*/ jsx("button", {

package/dist/esm/video/components/HTML5Embed.liquid.js

@@ -3,7 +3,6 @@ import NextImage from '../../image/components/NextImage.liquid.js';
 import { getSettingPreloadData } from '../../helpers.js';
 
 const HTML5Embed = (props)=>{
-    const { enableLazyLoadImage, pageContext } = props;
     const videoId = `gp-video-${props.uid}`;
     const preloadThumbnail = props.autoplay && props.thumbnail;
     const offLazyVideo = !props.lazy && props.isVideoComponent;
@@ -20,9 +19,7 @@ const HTML5Embed = (props)=>{
                 '--op': 0,
                 '--z': -1,
                 display: 'none'
-            },
-            enableLazyLoadImage,
-            pageContext
+            }
         })}
     ${RenderIf(props.autoplay, `<script>
         document.addEventListener("DOMContentLoaded", (event) => {
@@ -71,14 +68,14 @@ const HTML5Embed = (props)=>{
   </video>
     <div
           style="${props.style}"
-           class="${cls('gp-absolute gp-top-0 gp-left-0  gp-w-full gp-h-full gp-thumbnail-video', {
+           class="${cls('gp-absolute gp-top-0 gp-left-0  gp-w-full gp-thumbnail-video', {
         'gp-hidden': !props.thumbnail || props.autoplay
     })}"
         >
           <img
             id="video-thumbnail"
             src="${props.thumbnail ?? ''}"
-            class="gp-w-full gp-h-full gp-object-contain"
+            class="gp-w-full gp-h-full gp-object-cover"
             alt="Video Thumbnail"
           ></img>
           <button

package/dist/esm/video/components/LiteYouTubeEmbed.liquid.js

@@ -3,7 +3,7 @@ import NextImage from '../../image/components/NextImage.liquid.js';
 import { getSettingPreloadData } from '../../helpers.js';
 
 const LiteYouTubeEmbed = (props)=>{
-    const { style, lazy, preload, enableLazyLoadImage, pageContext } = props;
+    const { style, lazy, preload } = props;
     const videoUid = `gp-video-${props.uid}`;
     const videoId = encodeURIComponent(props.id);
     const videoTitle = props.title;
@@ -38,7 +38,7 @@ const LiteYouTubeEmbed = (props)=>{
         data-title="${videoTitle}"
         style="${{
         ...makeStyleResponsive('bgi', {
-            desktop: preload || !enableLazyLoadImage ? `url('${posterUrl}')` : `url('${imagePlaceholder}')`
+            desktop: preload ? `url('${posterUrl}')` : `url('${imagePlaceholder}')`
         }),
         ...style
     }}"
@@ -48,9 +48,7 @@ const LiteYouTubeEmbed = (props)=>{
         src: posterUrl,
         alt: 'Poster',
         className: `gp-invisible gp-w-full gp-h-full gp_lazyforbg`,
-        isDisableAspectStyle: true,
-        enableLazyLoadImage,
-        pageContext
+        isDisableAspectStyle: true
     })}
         <button
           type="button"