@gem-sdk/components 2.1.41 → 2.2.0-staging.28

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

@@ -10,7 +10,7 @@ var common = require('../common/common.js');
 var productGallery = require('../common/productGallery.js');
 var _function = require('../../../helpers/function.js');
 
-const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
+const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyLoadImage, ...setting })=>{
     const getCarouselDisplay = ()=>{
         const isDisplayCarousel = (type, position, device)=>{
             const layout = core.getResponsiveValueByScreen(position, device);
@@ -90,7 +90,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/cjs/product/components/ProductImagesV2/liquid/ProductGalleryGrid.liquid.js

@@ -12,7 +12,7 @@ var Modal3d_liquid = require('../../../../image/components/Modal3d.liquid.js');
 var Video_liquid = require('../../../../image/components/Video.liquid.js');
 var HTML5Embed_liquid = require('../../../../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 = core.getResponsiveValueByScreen(position, device);
@@ -101,7 +101,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             style: style,
             className: '!gp-rounded-none',
             customLazyload: false,
-            enableLazyloadImage
+            enableLazyLoadImage
         })}
       ${setting?.galleryHoverEffect !== 'none' ? `<div class="${core.cls('zoom-element !gp-max-w-none', productFeaturedImage.getZoomImageClass())}">
           ${NextImage_liquid.default({
@@ -115,7 +115,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' ? `
@@ -298,7 +298,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             },
             className: '!gp-rounded-none',
             customLazyload: false,
-            enableLazyloadImage
+            enableLazyLoadImage
         })}`;
     };
     return core.template`

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

@@ -11,7 +11,7 @@ var helpers = require('../../../../helpers.js');
 var productGallery = require('../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
@@ -116,7 +116,7 @@ const ProductImages = (productImageProps)=>{
         builderPropUID: `gp-carousel-${builderProps?.uid}`,
         ...settings,
         children: renderProductBadge(),
-        enableLazyloadImage
+        enableLazyLoadImage
     })}
         ${common.shouldSkipLiquidRenderForSingleImage(settings?.position, core.template`
             <div
@@ -132,7 +132,7 @@ const ProductImages = (productImageProps)=>{
               ${ProductGalleryCarousel_liquid.default({
         builderPropUID: `gp-gallery-${builderProps?.uid}`,
         ...settings,
-        enableLazyloadImage
+        enableLazyLoadImage
     })}
             </div>
             ${ProductGalleryGrid_liquid.default({
@@ -142,7 +142,7 @@ const ProductImages = (productImageProps)=>{
         },
         children: renderProductBadge(),
         ...settings,
-        enableLazyloadImage
+        enableLazyLoadImage
     })}
           `)}
       </div>

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

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

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

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

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

@@ -4,19 +4,18 @@ var core = require('@gem-sdk/core');
 var React = require('react');
 
 const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, componentUid })=>{
-    const [previousTab, setPreviousTab] = React.useState(activeKey || 1);
-    const { trigger, onListener, interactionListenerLoaded } = core.useInteraction();
+    const { trigger, onListener, interactionListenerLoaded, saveToElementInteractionData, findElementIncludingSelf } = core.useInteraction();
     const mode = core.useEditorMode();
     const changeOpenTabInteraction = (params)=>{
-        const { data, isRollback } = params || {};
-        if (data === undefined && isRollback === undefined) return;
+        const { data, isRollback, element, key } = params || {};
+        if (data === undefined && isRollback) return;
+        const newData = Number(data) + 1;
         if (isRollback) {
-            setActiveKey(previousTab);
-            setPreviousTab(activeTab);
+            setActiveKey(newData);
             return;
         }
-        setPreviousTab(activeTab);
-        setActiveKey(data + 1);
+        saveToElementInteractionData(element, key, String(activeKey));
+        setActiveKey(newData);
     };
     const dispatchEventTabActive = (index)=>{
         trigger({
@@ -37,11 +36,16 @@ 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);
+            changeOpenTabInteraction({
+                ...params,
+                element,
+                key: params?.uniqueStorageKey
+            });
         });
         return ()=>{
             removeListener?.();

package/dist/cjs/text/components/Text.js

@@ -10,7 +10,6 @@ var common = require('./common.js');
 const Text = /*#__PURE__*/ React.forwardRef(({ styles, builderAttrs, style, setting, advanced, builderProps, className, children, ...props }, ref)=>{
     const { text, htmlTag: Element = 'div', options, tagWidth, excludeFlex } = setting ?? {};
     const composeGlobalSize = core.makeGlobalSize(setting?.globalSize);
-    console.log('Text: ', text);
     const mode = core.useEditorMode();
     const getPlaceHolderWhenContentNone = ()=>{
         let classList = '';

package/dist/cjs/third-party/components/AppstleBundlesDiscounts.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
+var ThirdPartyPreview = require('./ThirdPartyPreview.js');
+var AppstleBundlesDiscounts$1 = require('../configs/AppstleBundlesDiscounts.js');
+
+const AppstleBundlesDiscountsContent = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsxRuntime.jsx(ThirdPartyPreview.default, {
+                setting: {
+                    label: 'Appstle℠ Bundles & Discounts',
+                    iconSvg: `<img class="gp-w-[24px] gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppstleBundlesDiscounts$1.default.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const AppstleBundlesDiscounts = ({ setting })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        style: {
+            ...core.makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(AppstleBundlesDiscountsContent, {})
+    });
+};
+
+exports.default = AppstleBundlesDiscounts;

package/dist/cjs/third-party/components/AppstleBundlesDiscounts.liquid.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var thirdParty = require('../helpers/thirdParty.js');
+
+const AppstleBundlesDiscounts = ({ setting, advanced })=>{
+    const { align, appBlockId } = setting ?? {};
+    return thirdParty.getLiquidForAppBlock(appBlockId, align, advanced?.cssClass);
+};
+
+exports.default = AppstleBundlesDiscounts;

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

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

package/dist/cjs/third-party/components/EcomsendBackInStockAlert.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
+var ThirdPartyPreview = require('./ThirdPartyPreview.js');
+var EcomsendBackInStockAlert$1 = require('../configs/EcomsendBackInStockAlert.js');
+
+const EcomsendBackInStockAlertContent = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsxRuntime.jsx(ThirdPartyPreview.default, {
+                setting: {
+                    label: 'EcomSend Back in Stock Alert',
+                    iconSvg: `<img class="gp-w-[24px] gp-border gp-border-[#494949] gp-rounded-[3px]" src="${EcomsendBackInStockAlert$1.default.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const EcomsendBackInStockAlert = ({ setting })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        style: {
+            ...core.makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(EcomsendBackInStockAlertContent, {})
+    });
+};
+
+exports.default = EcomsendBackInStockAlert;

package/dist/cjs/third-party/components/EcomsendBackInStockAlert.liquid.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@gem-sdk/core');
+
+const EcomsendBackInStockAlert = ({ setting, advanced })=>{
+    const { align } = setting ?? {};
+    return core.template`
+  <div
+    class="${advanced?.cssClass}"
+    style="${{
+        ...core.makeStyleResponsive('ta', align)
+    }}"
+  >
+    <div id="sealapps-bis-widget"></div>
+  </div>
+`;
+};
+
+exports.default = EcomsendBackInStockAlert;

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

@@ -6,7 +6,7 @@ var thirdParty = require('../helpers/thirdParty.js');
 
 const RechargeSubscriptions = ({ setting, advanced })=>{
     const { align, appBlockId } = setting ?? {};
-    return thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''}!gp-block`);
+    return thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block`);
 };
 
 exports.default = RechargeSubscriptions;

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

@@ -2,11 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var thirdParty = require('../helpers/thirdParty.js');
 var core = require('@gem-sdk/core');
 
 const Releasit = ({ setting, advanced })=>{
-    const { align } = setting ?? {};
-    return core.template`
+    const { align, version, appBlockId } = setting ?? {};
+    console.log('version', version);
+    return version === 'v2' ? thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''}!gp-block`) : core.template`
     <div
       class="${advanced?.cssClass}"
       style="${{

package/dist/cjs/third-party/configs/AppstleBundlesDiscounts.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var AppConfig = {
+    id: 'appstle-bundles-discounts',
+    label: 'Appstle Bundles & Discounts',
+    logoUrl: 'https://cdn.shopify.com/app-store/listing_images/855ee74552c1cca133c12a4364890912/icon/CO69r8mp0oQDEAE=.png',
+    tag: 'AppstleBundlesDiscounts'
+};
+
+exports.default = AppConfig;

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

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

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

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

package/dist/cjs/third-party/configs/EcomsendBackInStockAlert.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var AppConfig = {
+    id: 'ecomsend-back-in-stock-alert',
+    label: 'EcomSend Back in Stock Alert',
+    logoUrl: 'https://cdn.shopify.com/app-store/listing_images/d4d2bcc6f71dda4f30b09bd429b37065/icon/CLeo2LeKhIsDEAE=.png',
+    tag: 'EcomsendBackInStockAlert'
+};
+
+exports.default = AppConfig;

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

@@ -6,6 +6,14 @@ var dynamic = require('next/dynamic');
 var Loading = require('../common/components/Loading.js');
 require('react/jsx-runtime');
 
+const EcomsendBackInStockAlert = dynamic(()=>Promise.resolve().then(function () { return require('./components/EcomsendBackInStockAlert.js'); }), {
+    ssr: false,
+    loading: Loading.default
+});
+const AppstleBundlesDiscounts = dynamic(()=>Promise.resolve().then(function () { return require('./components/AppstleBundlesDiscounts.js'); }), {
+    ssr: false,
+    loading: Loading.default
+});
 const EstimatedDeliveryDatePlus = dynamic(()=>Promise.resolve().then(function () { return require('./components/EstimatedDeliveryDatePlus.js'); }), {
     ssr: false,
     loading: Loading.default
@@ -463,6 +471,8 @@ const EcoboostifyShoppableReelUgc = dynamic(()=>Promise.resolve().then(function
     loading: Loading.default
 });
 var thirdParty = {
+    EcomsendBackInStockAlert,
+    AppstleBundlesDiscounts,
     EcoboostifyShoppableReelUgc,
     EstimatedDeliveryDatePlus,
     OkendoReviewsLoyalty,

package/dist/cjs/third-party/setting/AppstleBundlesDiscounts.js

@@ -0,0 +1,146 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var AppstleBundlesDiscounts = require('../configs/AppstleBundlesDiscounts.js');
+
+const config = {
+    tag: AppstleBundlesDiscounts.default.tag,
+    label: AppstleBundlesDiscounts.default.label,
+    icon: '<img class="gp-w-[24px] gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/855ee74552c1cca133c12a4364890912/icon/CO69r8mp0oQDEAE=.png">',
+    editorConfigs: {
+        placeholder: {
+            flowTag: [
+                'Product'
+            ]
+        },
+        component: {
+            isThirdParty: true
+        }
+    },
+    presets: [
+        {
+            id: AppstleBundlesDiscounts.default.id,
+            name: {
+                en: AppstleBundlesDiscounts.default.label
+            },
+            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/855ee74552c1cca133c12a4364890912/icon/CO69r8mp0oQDEAE=.png">
+        <span class="preset-item-title">Appstle℠ Bundles & Discounts</span>
+      </div>`
+            },
+            components: [
+                {
+                    tag: AppstleBundlesDiscounts.default.tag
+                }
+            ]
+        }
+    ],
+    settings: [
+        {
+            id: 'setting',
+            controls: [
+                {
+                    id: 'appBlockId',
+                    type: 'input',
+                    default: ''
+                },
+                {
+                    id: 'widgetType',
+                    label: 'Choose widget',
+                    type: 'select',
+                    options: [
+                        {
+                            label: 'Classic Bundle',
+                            value: 'appstle-classic-bundle'
+                        },
+                        {
+                            label: 'Dynamic Bundle',
+                            value: 'appstle-bundle-product-page-build-a-box'
+                        }
+                    ],
+                    default: 'appstle-classic-bundle'
+                },
+                {
+                    id: 'install',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'install',
+                    href: 'https://apps.shopify.com/appstle-bundles?utm_source=gempages',
+                    appName: AppstleBundlesDiscounts.default.label
+                },
+                {
+                    id: 'openApp',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'openApp',
+                    href: '',
+                    appName: AppstleBundlesDiscounts.default.label
+                },
+                {
+                    id: 'align',
+                    label: 'Alignment',
+                    type: 'segment',
+                    options: [
+                        {
+                            label: 'Left',
+                            value: 'left',
+                            type: 'align'
+                        },
+                        {
+                            label: 'Center',
+                            value: 'center',
+                            type: 'align'
+                        },
+                        {
+                            label: 'Right',
+                            value: 'right',
+                            type: 'align'
+                        }
+                    ],
+                    devices: {
+                        desktop: {
+                            default: 'left'
+                        }
+                    }
+                }
+            ]
+        }
+    ],
+    ui: [
+        {
+            type: 'control',
+            setting: {
+                id: 'install'
+            }
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Choose widget'
+            },
+            setting: {
+                id: 'widgetType'
+            }
+        },
+        {
+            type: 'control',
+            setting: {
+                id: 'openApp'
+            }
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Align'
+            },
+            setting: {
+                id: 'align'
+            }
+        }
+    ]
+};
+
+exports.default = config;

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

@@ -7,7 +7,7 @@ var EcoboostifyShoppableReelUgc = require('../configs/EcoboostifyShoppableReelUg
 const config = {
     tag: EcoboostifyShoppableReelUgc.default.tag,
     label: EcoboostifyShoppableReelUgc.default.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/COuT9MaKvosDEAE=.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/CJWKq4vxxIkDEAE=.png">',
     editorConfigs: {
         component: {
             isThirdParty: true
@@ -22,7 +22,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/COuT9MaKvosDEAE=.png">
+        <img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/CJWKq4vxxIkDEAE=.png">
         <span class="preset-item-title">EcoBoostify Shoppable Reel UGC</span>
       </div>`
             },