@gem-sdk/components 2.1.13-staging.0 → 2.1.13-staging.10

package/dist/cjs/post-purchase/product/components/ProductPrice.js

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 var React = require('react');
 var Text = require('../../text/Text.js');
+var useDynamicProduct = require('../hooks/useDynamicProduct.js');
 
 const PostPurchaseProductPrice = ({ styles, style, builderAttrs, builderProps, children })=>{
     const currentVariant = core.useCurrentVariant();
@@ -13,6 +14,7 @@ const PostPurchaseProductPrice = ({ styles, style, builderAttrs, builderProps, c
     const price = currentVariant?.price ?? 0;
     const salePrice = currentVariant?.salePrice ?? 0;
     const discount = parseFloat(core.shopifyPriceRounding(core.useProductOfferDiscount(), 2));
+    const { isDynamicProduct } = useDynamicProduct.useDynamicProduct();
     const priceShow = React.useMemo(()=>{
         if (!discount) {
             if (styles?.priceType === 'compare') {
@@ -53,7 +55,7 @@ const PostPurchaseProductPrice = ({ styles, style, builderAttrs, builderProps, c
             /*#__PURE__*/ jsxRuntime.jsx(Text.default, {
                 styles: styles,
                 setting: {
-                    text: moneyFormatted
+                    text: isDynamicProduct ? '$???' : moneyFormatted
                 },
                 className: core.cls({
                     'gp-money': styles?.priceType === 'regular',

package/dist/cjs/post-purchase/product/components/ProductPriceBreakdown.js

@@ -7,6 +7,7 @@ var core = require('@gem-sdk/core');
 var React = require('react');
 var helper = require('../../utils/helper.js');
 var MoneyLine = require('./priceBreakdown/MoneyLine.js');
+var useDynamicProduct = require('../hooks/useDynamicProduct.js');
 
 const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, builderAttrs, builderProps, children })=>{
     const currentVariant = core.useCurrentVariant();
@@ -21,6 +22,7 @@ const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, b
     const discountShopifyFormat = core.shopifyPriceRounding(discountWithQuantity, 2);
     const totalMoneyFormatted = core.useFormatMoney(subTotal - parseFloat(discountShopifyFormat), false);
     const currentProductId = currentProduct?.baseID?.replace('gid://shopify/Product/', '');
+    const { isDynamicProduct, dynamicPrice, dynamicDiscount, isEnableDynamicDiscount } = useDynamicProduct.useDynamicProduct();
     const { labelStyle, moneyStyle, spacing, width, align, isShowPrice } = styles;
     const itemGap = React.useMemo(()=>{
         return helper.postPurchaseSpacing[spacing || 'none'];
@@ -33,19 +35,19 @@ const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, b
     }, [
         isShowPrice
     ]);
-    const moneyLines = React.useMemo(()=>{
+    const getMoneyLines = ()=>{
         const data = [];
         if (styles.isShowSubTotalLabel !== false) {
             data.push({
                 title: setting.subTotalLabel,
-                money: subTotalMoneyFormatted,
+                money: isDynamicProduct ? dynamicPrice : subTotalMoneyFormatted,
                 uniqueId: 'subTotalLabel'
             });
         }
         if (styles.isShowDiscountLabel !== false) {
             data.push({
                 title: setting.discountLabel,
-                money: discount > 0 ? discountMoneyFormatted : 'No discount',
+                money: isDynamicProduct && dynamicDiscount && isEnableDynamicDiscount ? dynamicPrice : discount > 0 ? discountMoneyFormatted : 'No discount',
                 uniqueId: 'discountLabel'
             });
         }
@@ -71,25 +73,11 @@ const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, b
         }
         data.push({
             title: setting.totalLabel,
-            money: totalMoneyFormatted,
+            money: isDynamicProduct ? dynamicPrice : totalMoneyFormatted,
             uniqueId: 'totalLabel'
         });
         return data;
-    }, [
-        discount,
-        discountMoneyFormatted,
-        setting.discountLabel,
-        setting.shippingLabel,
-        setting.subTotalLabel,
-        setting.taxesLabel,
-        setting.totalLabel,
-        styles.isShowSubTotalLabel,
-        styles.isShowDiscountLabel,
-        styles.isShowShippingLabel,
-        styles.isShowTaxesLabel,
-        subTotalMoneyFormatted,
-        totalMoneyFormatted
-    ]);
+    };
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs("div", {
@@ -140,9 +128,9 @@ const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, b
                                 ...core.makeStyleResponsive('w', width),
                                 gap: itemGap
                             },
-                            children: moneyLines.map((item)=>/*#__PURE__*/ jsxRuntime.jsxs(React.Fragment, {
+                            children: getMoneyLines().map((item)=>/*#__PURE__*/ jsxRuntime.jsxs(React.Fragment, {
                                     children: [
-                                        item.uniqueId === 'totalLabel' && moneyLines.length > 1 && /*#__PURE__*/ jsxRuntime.jsx("hr", {}),
+                                        item.uniqueId === 'totalLabel' && getMoneyLines().length > 1 && /*#__PURE__*/ jsxRuntime.jsx("hr", {}),
                                         /*#__PURE__*/ jsxRuntime.jsx("div", {
                                             children: /*#__PURE__*/ jsxRuntime.jsx(MoneyLine.default, {
                                                 uniqueId: item.uniqueId,

package/dist/cjs/post-purchase/product/constants/ProductOfferPlaceholder.js

@@ -0,0 +1,127 @@
+'use strict';
+
+const productOfferPlaceholder = {
+    id: '',
+    title: 'Dynamic product',
+    description: 'This is a dynamic product. The actual product will appear here based on your setup',
+    descriptionHtml: '<p class="QN2lPu">This is a dynamic product. The actual product will</p>\n<p class="QN2lPu">appear here based on your setup</p>',
+    createdAt: '2024-07-01T04:19:51.286753Z',
+    handle: 'dynamic-product',
+    averageRating: 0,
+    isStorefront: true,
+    isSample: false,
+    baseID: '',
+    sku: '',
+    options: [
+        {
+            id: '1',
+            name: 'Variant',
+            optionType: '',
+            values: [
+                {
+                    id: '1',
+                    label: 'Variant option',
+                    isDefault: true,
+                    baseID: '1'
+                }
+            ]
+        }
+    ],
+    vendor: '',
+    featuredImage: {
+        id: '542178560626918105',
+        contentType: 'IMAGE',
+        previewImage: '',
+        src: 'https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-312cf60c-d923-4913-9873-66545effe9cc.png',
+        width: 449,
+        height: 449,
+        alt: ''
+    },
+    collections: {
+        edges: [
+            {
+                node: {
+                    id: '502321959132988135',
+                    title: 'Home page'
+                }
+            },
+            {
+                node: {
+                    id: '539286505089204764',
+                    title: 'b'
+                }
+            },
+            {
+                node: {
+                    id: '539286505089401372',
+                    title: 'e'
+                }
+            }
+        ]
+    },
+    tags: [],
+    medias: {
+        edges: [
+            {
+                cursor: 'gqFpzweGNIc/AALZoXYB',
+                node: {
+                    id: '542178560626918105',
+                    contentType: 'IMAGE',
+                    previewImage: '',
+                    src: 'https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-312cf60c-d923-4913-9873-66545effe9cc.png',
+                    width: 449,
+                    height: 449,
+                    alt: ''
+                }
+            }
+        ],
+        pageInfo: {
+            endCursor: 'gqFpzweGNIc/AALZoXYB',
+            hasNextPage: true
+        }
+    },
+    variants: {
+        edges: [
+            {
+                cursor: 'gqFpzwc5ZqRtDAMIoXYC',
+                node: {
+                    id: '520560088328176392',
+                    title: 'Default Title',
+                    barcode: '',
+                    baseID: 'gid://shopify/ProductVariant/49298248925463',
+                    costPrice: 88,
+                    height: 0,
+                    inventoryPolicy: 'DENY',
+                    inventoryQuantity: 211,
+                    inventoryStatus: '',
+                    isDigital: true,
+                    length: 0,
+                    lowInventoryAmount: 0,
+                    manageInventory: false,
+                    mediaId: '0',
+                    platform: 'SHOPIFY',
+                    price: 88,
+                    salePrice: 88,
+                    sku: '',
+                    soldIndividually: false,
+                    weight: 0,
+                    width: 0,
+                    selectedOptions: [
+                        {
+                            name: 'Variant',
+                            value: 'Variant option',
+                            optionType: ''
+                        }
+                    ],
+                    media: undefined
+                }
+            }
+        ],
+        pageInfo: {
+            hasNextPage: false,
+            endCursor: 'gaFpzwc5ZqRtDAMI'
+        }
+    }
+};
+
+exports.productOfferPlaceholder = productOfferPlaceholder;

package/dist/cjs/post-purchase/product/hooks/useDynamicProduct.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var core = require('@gem-sdk/core');
+var React = require('react');
+
+const useDynamicProduct = ()=>{
+    const dynamicDiscountOffer = core.usePageStore((s)=>s.dynamicDiscountOffer);
+    const isDynamicProduct = React.useMemo(()=>{
+        return !!dynamicDiscountOffer;
+    }, [
+        dynamicDiscountOffer
+    ]);
+    // false = No discount
+    const isEnableDynamicDiscount = React.useMemo(()=>{
+        return dynamicDiscountOffer?.isEnabled;
+    }, [
+        dynamicDiscountOffer
+    ]);
+    const dynamicPrice = '$???';
+    return {
+        isDynamicProduct,
+        dynamicPrice,
+        dynamicDiscount: dynamicDiscountOffer,
+        isEnableDynamicDiscount
+    };
+};
+
+exports.useDynamicProduct = useDynamicProduct;

package/dist/cjs/post-purchase/product/settings/ProductOffer.js

@@ -184,6 +184,14 @@ const config = {
                         }
                     }
                 },
+                {
+                    id: 'dynamicOfferQuantity',
+                    type: 'dynamic-offer-quantity',
+                    min: 1,
+                    max: 4,
+                    default: 2,
+                    isOnlyAcceptInteger: true
+                },
                 {
                     id: 'discountAndShippingFee',
                     type: 'discount-and-shipping-fee-product-offer',
@@ -377,6 +385,24 @@ const config = {
             },
             layout: 'vertical'
         },
+        {
+            type: 'group',
+            label: {
+                en: 'Product offers'
+            },
+            controls: [
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Quantity'
+                    },
+                    setting: {
+                        id: 'dynamicOfferQuantity'
+                    }
+                }
+            ],
+            condition: 'false'
+        },
         {
             type: 'control',
             label: {

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

@@ -13,7 +13,7 @@ var NextImage_liquid = require('../../../../image/components/NextImage.liquid.js
 var Video_liquid = require('../../../../image/components/Video.liquid.js');
 var _function = require('../../../helpers/function.js');
 
-const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
+const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoadImage, ...setting })=>{
     const ftAspectRatio = common.getAspectRatio(setting.ftShape);
     const getStyleFeaturedImageDisplay = ()=>{
         return common.getDisplayStyle((device)=>![
@@ -153,7 +153,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
             },
             priority: setting?.preload,
             className: `gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none ${className}`,
-            enableLazyloadImage
+            enableLazyLoadImage
         })}`;
     };
     const renderNoImage = ()=>{
@@ -171,7 +171,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
             },
             priority: setting?.preload,
             className: `gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none`,
-            enableLazyloadImage
+            enableLazyLoadImage
         })}`;
     };
     const getValueFromValueContainUnit = (value)=>{
@@ -398,7 +398,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
                 },
                 className: `gp-w-full featured-image-only !gp-rounded-none`,
                 customLazyload: true,
-                enableLazyloadImage
+                enableLazyLoadImage
             })}
           {%- endif -%}
         `

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/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

@@ -9,7 +9,6 @@ var React = require('react');
 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/AlsoBoughtCbb.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 AlsoBoughtCbb$1 = require('../configs/AlsoBoughtCbb.js');
+
+const AlsoBoughtCbbContent = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsxRuntime.jsx(ThirdPartyPreview.default, {
+                setting: {
+                    label: 'Also Bought • CBB',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AlsoBoughtCbb$1.default.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const AlsoBoughtCbb = ({ setting })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        style: {
+            ...core.makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(AlsoBoughtCbbContent, {})
+    });
+};
+
+exports.default = AlsoBoughtCbb;

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

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

package/dist/cjs/third-party/components/BfSizeChartSizeGuide.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 BfSizeChartSizeGuide$1 = require('../configs/BfSizeChartSizeGuide.js');
+
+const BfSizeChartSizeGuideContent = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsxRuntime.jsx(ThirdPartyPreview.default, {
+                setting: {
+                    label: 'BF Size Chart & Size Guide',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${BfSizeChartSizeGuide$1.default.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const BfSizeChartSizeGuide = ({ setting })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        style: {
+            ...core.makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(BfSizeChartSizeGuideContent, {})
+    });
+};
+
+exports.default = BfSizeChartSizeGuide;

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

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

package/dist/cjs/third-party/components/EssentialAnnouncementBar.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 EssentialAnnouncementBar$1 = require('../configs/EssentialAnnouncementBar.js');
+
+const EssentialAnnouncementBarContent = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsxRuntime.jsx(ThirdPartyPreview.default, {
+                setting: {
+                    label: 'Essential Announcement Bar',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${EssentialAnnouncementBar$1.default.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const EssentialAnnouncementBar = ({ setting })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        style: {
+            ...core.makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(EssentialAnnouncementBarContent, {})
+    });
+};
+
+exports.default = EssentialAnnouncementBar;

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

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

package/dist/cjs/third-party/components/EssentialCountdownTimerBar.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 EssentialCountdownTimerBar$1 = require('../configs/EssentialCountdownTimerBar.js');
+
+const EssentialCountdownTimerBarContent = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsxRuntime.jsx(ThirdPartyPreview.default, {
+                setting: {
+                    label: 'Essential Countdown Timer Bar',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${EssentialCountdownTimerBar$1.default.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const EssentialCountdownTimerBar = ({ setting })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        style: {
+            ...core.makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(EssentialCountdownTimerBarContent, {})
+    });
+};
+
+exports.default = EssentialCountdownTimerBar;