@gem-sdk/components 2.1.20 → 2.1.21

package/dist/cjs/marquee/components/MarqueeBase.liquid.js

@@ -46,7 +46,6 @@ const MarqueeBase = ({ style = {}, autoFill = false, play = true, pauseOnHover =
     };
     return core.template`
    <div
-     
       style="${containerStyle()}"
       class="rfm-marquee-container"
     >
@@ -55,35 +54,17 @@ const MarqueeBase = ({ style = {}, autoFill = false, play = true, pauseOnHover =
         style="${marqueeStyle()}"
       >
         <div class="rfm-initial-child-container">
-
-        ${core.template`
-                 <div style="${childStyle()}" class="${`rfm-child`}">
-                 ${children}
-              </div>
-                `}
-        </div>
-         <div class="rfm-child-placeholder">
-        ${core.template`
-                 <div style="${childStyle()}" class="${`rfm-child`}">
-                 ${children}
-              </div>
-                `}
-        </div>
-         <div class="rfm-child-placeholder">
-
-        ${core.template`
-                 <div style="${childStyle()}" class="${`rfm-child`}">
-                 ${children}
-              </div>
-                `}
+          ${core.template`
+            <div style="${childStyle()}" class="${`rfm-child`}">
+              ${children}
+            </div>
+          `}
         </div>
       </div>
-       <div
+      <div
         class="rfm-marquee placeholder-marquee"
         style="${marqueeStyle()}"
-      >
-       
-      </div>
+      ></div>
     </div>
   `;
 };

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

@@ -5,26 +5,29 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 var Text = require('../../text/Text.js');
+var useDynamicProduct = require('../hooks/useDynamicProduct.js');
 
 const PostPurchaseProductDiscountTag = ({ setting = {}, styles = {}, style, builderAttrs, builderProps, children })=>{
     const currentProduct = core.useProduct();
     const currentProductId = currentProduct?.baseID?.replace('gid://shopify/Product/', '');
     const currentOfferDiscount = core.useProductOfferDiscount();
+    const { isDynamicProduct, isEnableDynamicDiscount } = useDynamicProduct.useDynamicProduct();
     const { typo } = styles;
     const { message } = setting;
+    const hasDiscount = !!currentOfferDiscount || isDynamicProduct && isEnableDynamicDiscount;
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         ...builderAttrs,
         className: core.cls(builderProps?.uid, 'gp-flex gp-w-full'),
         style: {
             ...style,
-            opacity: currentOfferDiscount ? 1 : 0.2
+            opacity: hasDiscount ? 1 : 0.2
         },
         id: `shopify-text-element-${builderProps?.uid}`,
         "data-product-id": currentProductId,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(Text.default, {
                 setting: {
-                    text: currentOfferDiscount ? message : message?.replace(new RegExp(/\{\{Discount\}\}/, 'gi'), '0%')
+                    text: hasDiscount ? message : message?.replace(new RegExp(/\{\{Discount\}\}/, 'gi'), '0%')
                 },
                 styles: {
                     typo

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

@@ -11,14 +11,20 @@ var Loading = require('../../../common/components/Loading.js');
 var ProductVariant = require('./ProductVariant.js');
 var helper = require('../../utils/helper.js');
 var index = require('../helpers/index.js');
+var ProductOfferPlaceholder = require('../constants/ProductOfferPlaceholder.js');
+var useDynamicProduct = require('../hooks/useDynamicProduct.js');
 
 const PostPurchaseProductOffer = ({ styles, builderAttrs, builderProps, children, setting })=>{
     const mode = core.useEditorMode();
-    const { productSetting, productOfferLayout, inlineAlignment, ...rowSetting } = setting || {};
+    const { productSetting, productOfferLayout, inlineAlignment, discountAndShippingFee, ...rowSetting } = setting || {};
     const { productOfferColumnGap, productOfferVerticalGutter, productOfferWidth, ...rowStyles } = styles || {};
     const productOffers = core.usePageStore((s)=>s.productOffers);
     const publicStoreFrontData = core.usePageStore((s)=>s.publicStoreFrontData);
-    const totalProduct = React.useMemo(()=>productOffers?.length, [
+    const { isDynamicProduct } = useDynamicProduct.useDynamicProduct();
+    const dynamicDiscountOffer = core.usePageStore((s)=>s.dynamicDiscountOffer);
+    const totalProduct = React.useMemo(()=>isDynamicProduct ? dynamicDiscountOffer?.appliedProductCount : productOffers?.length, [
+        dynamicDiscountOffer?.appliedProductCount,
+        isDynamicProduct,
         productOffers?.length
     ]);
     const sortedProductBaseIDs = React.useMemo(()=>{
@@ -44,7 +50,14 @@ const PostPurchaseProductOffer = ({ styles, builderAttrs, builderProps, children
     const products = React.useMemo(()=>core.flattenConnection(productData.data?.products), [
         productData.data?.products
     ]);
-    const productSortedById = sortedProductBaseIDs?.map((id)=>products?.find((el)=>el?.baseID === id)).filter(Boolean);
+    const productSortedById = React.useMemo(()=>{
+        return isDynamicProduct && dynamicDiscountOffer?.appliedProductCount ? Array(dynamicDiscountOffer.appliedProductCount).fill(ProductOfferPlaceholder.productOfferPlaceholder) : sortedProductBaseIDs?.map((id)=>products?.find((el)=>el?.baseID === id)).filter(Boolean);
+    }, [
+        isDynamicProduct,
+        dynamicDiscountOffer?.appliedProductCount,
+        sortedProductBaseIDs,
+        products
+    ]);
     const getStyles = ()=>{
         return {
             ...core.makeStyleResponsive('cg', productOfferColumnGap),

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/jsx/components/ProductFeaturedImageCarousel.js

@@ -20,12 +20,20 @@ const ProductFeaturedImageCarousel = ({ productImages, imgRef, onHandleClick, on
     const { onListener, ref } = core.useInteraction();
     let delayTimeout;
     const mode = core.useEditorMode();
-    const imageActiveIndex = React.useMemo(()=>{
+    const getImageActiveIndex = React.useCallback(()=>{
         const index = productImages?.findIndex((item)=>item.id === featuredImageGlobal?.id);
-        return index;
+        return index ?? 0;
     }, [
-        productImages,
-        featuredImageGlobal
+        featuredImageGlobal?.id,
+        productImages
+    ]);
+    const [imageActiveIndex, setImageActiveIndex] = React.useState(getImageActiveIndex());
+    React.useEffect(()=>{
+        setImageActiveIndex(getImageActiveIndex());
+    }, [
+        featuredImageGlobal,
+        getImageActiveIndex,
+        productImages
     ]);
     const imageActive = React.useMemo(()=>{
         if (productImages?.length) return featuredImageGlobal || productImages?.[0];

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

@@ -9,7 +9,7 @@ var ThirdPartyPreview = require('./ThirdPartyPreview.js');
 const AppConfig = {
     id: 'notify-back-in-stockpreorder',
     label: 'Notify! Back in Stock|PreOrder',
-    logoUrl: 'https://cdn.shopify.com/app-store/listing_images/9216cd5dd17ab1a38de2641bae109159/icon/CNWHjbfSt4MDEAE=.png',
+    logoUrl: 'https://cdn.shopify.com/s/files/1/0643/0497/1949/files/Notify_Me_Logo.png?v=1736234550',
     tag: 'NotifyBackInStockPreOrder'
 };
 const NotifyBackInStockPreOrderContent = ()=>{

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

@@ -7,7 +7,7 @@ var NotifyBackInStockPreOrder = require('../components/NotifyBackInStockPreOrder
 const config = {
     tag: NotifyBackInStockPreOrder.AppConfig.tag,
     label: NotifyBackInStockPreOrder.AppConfig.label,
-    icon: '<img class="gp-w-[24px] gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/9216cd5dd17ab1a38de2641bae109159/icon/CNWHjbfSt4MDEAE=.png">',
+    icon: `<img class="gp-w-[24px] gp-border gp-border-[#494949] gp-rounded-[3px]" src="${NotifyBackInStockPreOrder.AppConfig.logoUrl}">`,
     editorConfigs: {
         placeholder: {
             flowTag: [
@@ -27,7 +27,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/9216cd5dd17ab1a38de2641bae109159/icon/CNWHjbfSt4MDEAE=.png">
+        <img class="w-24 border border-dark-200 rounded-medium" src="${NotifyBackInStockPreOrder.AppConfig.logoUrl}">
         <span class="preset-item-title">Notify! Back in Stock|PreOrder</span>
       </div>`
             },

package/dist/esm/marquee/components/MarqueeBase.liquid.js

@@ -42,7 +42,6 @@ const MarqueeBase = ({ style = {}, autoFill = false, play = true, pauseOnHover =
     };
     return template`
    <div
-     
       style="${containerStyle()}"
       class="rfm-marquee-container"
     >
@@ -51,35 +50,17 @@ const MarqueeBase = ({ style = {}, autoFill = false, play = true, pauseOnHover =
         style="${marqueeStyle()}"
       >
         <div class="rfm-initial-child-container">
-
-        ${template`
-                 <div style="${childStyle()}" class="${`rfm-child`}">
-                 ${children}
-              </div>
-                `}
-        </div>
-         <div class="rfm-child-placeholder">
-        ${template`
-                 <div style="${childStyle()}" class="${`rfm-child`}">
-                 ${children}
-              </div>
-                `}
-        </div>
-         <div class="rfm-child-placeholder">
-
-        ${template`
-                 <div style="${childStyle()}" class="${`rfm-child`}">
-                 ${children}
-              </div>
-                `}
+          ${template`
+            <div style="${childStyle()}" class="${`rfm-child`}">
+              ${children}
+            </div>
+          `}
         </div>
       </div>
-       <div
+      <div
         class="rfm-marquee placeholder-marquee"
         style="${marqueeStyle()}"
-      >
-       
-      </div>
+      ></div>
     </div>
   `;
 };

package/dist/esm/post-purchase/product/components/ProductDiscountTag.js

@@ -1,26 +1,29 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useProduct, useProductOfferDiscount, cls } from '@gem-sdk/core';
 import Text from '../../text/Text.js';
+import { useDynamicProduct } from '../hooks/useDynamicProduct.js';
 
 const PostPurchaseProductDiscountTag = ({ setting = {}, styles = {}, style, builderAttrs, builderProps, children })=>{
     const currentProduct = useProduct();
     const currentProductId = currentProduct?.baseID?.replace('gid://shopify/Product/', '');
     const currentOfferDiscount = useProductOfferDiscount();
+    const { isDynamicProduct, isEnableDynamicDiscount } = useDynamicProduct();
     const { typo } = styles;
     const { message } = setting;
+    const hasDiscount = !!currentOfferDiscount || isDynamicProduct && isEnableDynamicDiscount;
     return /*#__PURE__*/ jsxs("div", {
         ...builderAttrs,
         className: cls(builderProps?.uid, 'gp-flex gp-w-full'),
         style: {
             ...style,
-            opacity: currentOfferDiscount ? 1 : 0.2
+            opacity: hasDiscount ? 1 : 0.2
         },
         id: `shopify-text-element-${builderProps?.uid}`,
         "data-product-id": currentProductId,
         children: [
             /*#__PURE__*/ jsx(Text, {
                 setting: {
-                    text: currentOfferDiscount ? message : message?.replace(new RegExp(/\{\{Discount\}\}/, 'gi'), '0%')
+                    text: hasDiscount ? message : message?.replace(new RegExp(/\{\{Discount\}\}/, 'gi'), '0%')
                 },
                 styles: {
                     typo

package/dist/esm/post-purchase/product/components/ProductOffer.js

@@ -7,14 +7,20 @@ import Loading from '../../../common/components/Loading.js';
 import { DEVICES } from './ProductVariant.js';
 import { postPurchaseViewSpacing } from '../../utils/helper.js';
 import { hasPublicStoreFrontData, createStoreFrontFetcher } from '../helpers/index.js';
+import { productOfferPlaceholder } from '../constants/ProductOfferPlaceholder.js';
+import { useDynamicProduct } from '../hooks/useDynamicProduct.js';
 
 const PostPurchaseProductOffer = ({ styles, builderAttrs, builderProps, children, setting })=>{
     const mode = useEditorMode();
-    const { productSetting, productOfferLayout, inlineAlignment, ...rowSetting } = setting || {};
+    const { productSetting, productOfferLayout, inlineAlignment, discountAndShippingFee, ...rowSetting } = setting || {};
     const { productOfferColumnGap, productOfferVerticalGutter, productOfferWidth, ...rowStyles } = styles || {};
     const productOffers = usePageStore((s)=>s.productOffers);
     const publicStoreFrontData = usePageStore((s)=>s.publicStoreFrontData);
-    const totalProduct = useMemo(()=>productOffers?.length, [
+    const { isDynamicProduct } = useDynamicProduct();
+    const dynamicDiscountOffer = usePageStore((s)=>s.dynamicDiscountOffer);
+    const totalProduct = useMemo(()=>isDynamicProduct ? dynamicDiscountOffer?.appliedProductCount : productOffers?.length, [
+        dynamicDiscountOffer?.appliedProductCount,
+        isDynamicProduct,
         productOffers?.length
     ]);
     const sortedProductBaseIDs = useMemo(()=>{
@@ -40,7 +46,14 @@ const PostPurchaseProductOffer = ({ styles, builderAttrs, builderProps, children
     const products = useMemo(()=>flattenConnection(productData.data?.products), [
         productData.data?.products
     ]);
-    const productSortedById = sortedProductBaseIDs?.map((id)=>products?.find((el)=>el?.baseID === id)).filter(Boolean);
+    const productSortedById = useMemo(()=>{
+        return isDynamicProduct && dynamicDiscountOffer?.appliedProductCount ? Array(dynamicDiscountOffer.appliedProductCount).fill(productOfferPlaceholder) : sortedProductBaseIDs?.map((id)=>products?.find((el)=>el?.baseID === id)).filter(Boolean);
+    }, [
+        isDynamicProduct,
+        dynamicDiscountOffer?.appliedProductCount,
+        sortedProductBaseIDs,
+        products
+    ]);
     const getStyles = ()=>{
         return {
             ...makeStyleResponsive('cg', productOfferColumnGap),

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

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCurrentVariant, useProduct, shopifyPriceRounding, useProductOfferDiscount, useFormatMoney, cls } from '@gem-sdk/core';
 import { useMemo } from 'react';
 import Text from '../../text/Text.js';
+import { useDynamicProduct } from '../hooks/useDynamicProduct.js';
 
 const PostPurchaseProductPrice = ({ styles, style, builderAttrs, builderProps, children })=>{
     const currentVariant = useCurrentVariant();
@@ -9,6 +10,7 @@ const PostPurchaseProductPrice = ({ styles, style, builderAttrs, builderProps, c
     const price = currentVariant?.price ?? 0;
     const salePrice = currentVariant?.salePrice ?? 0;
     const discount = parseFloat(shopifyPriceRounding(useProductOfferDiscount(), 2));
+    const { isDynamicProduct } = useDynamicProduct();
     const priceShow = useMemo(()=>{
         if (!discount) {
             if (styles?.priceType === 'compare') {
@@ -49,7 +51,7 @@ const PostPurchaseProductPrice = ({ styles, style, builderAttrs, builderProps, c
             /*#__PURE__*/ jsx(Text, {
                 styles: styles,
                 setting: {
-                    text: moneyFormatted
+                    text: isDynamicProduct ? '$???' : moneyFormatted
                 },
                 className: cls({
                     'gp-money': styles?.priceType === 'regular',

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

@@ -3,6 +3,7 @@ import { useCurrentVariant, useProduct, useQuantity, useProductOfferDiscount, us
 import { useMemo, useState, useEffect, Fragment as Fragment$1 } from 'react';
 import { postPurchaseSpacing } from '../../utils/helper.js';
 import MoneyLine from './priceBreakdown/MoneyLine.js';
+import { useDynamicProduct } from '../hooks/useDynamicProduct.js';
 
 const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, builderAttrs, builderProps, children })=>{
     const currentVariant = useCurrentVariant();
@@ -17,6 +18,7 @@ const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, b
     const discountShopifyFormat = shopifyPriceRounding(discountWithQuantity, 2);
     const totalMoneyFormatted = useFormatMoney(subTotal - parseFloat(discountShopifyFormat), false);
     const currentProductId = currentProduct?.baseID?.replace('gid://shopify/Product/', '');
+    const { isDynamicProduct, dynamicPrice, dynamicDiscount, isEnableDynamicDiscount } = useDynamicProduct();
     const { labelStyle, moneyStyle, spacing, width, align, isShowPrice } = styles;
     const itemGap = useMemo(()=>{
         return postPurchaseSpacing[spacing || 'none'];
@@ -29,19 +31,19 @@ const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, b
     }, [
         isShowPrice
     ]);
-    const moneyLines = 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'
             });
         }
@@ -67,25 +69,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__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs("div", {
@@ -136,9 +124,9 @@ const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, b
                                 ...makeStyleResponsive('w', width),
                                 gap: itemGap
                             },
-                            children: moneyLines.map((item)=>/*#__PURE__*/ jsxs(Fragment$1, {
+                            children: getMoneyLines().map((item)=>/*#__PURE__*/ jsxs(Fragment$1, {
                                     children: [
-                                        item.uniqueId === 'totalLabel' && moneyLines.length > 1 && /*#__PURE__*/ jsx("hr", {}),
+                                        item.uniqueId === 'totalLabel' && getMoneyLines().length > 1 && /*#__PURE__*/ jsx("hr", {}),
                                         /*#__PURE__*/ jsx("div", {
                                             children: /*#__PURE__*/ jsx(MoneyLine, {
                                                 uniqueId: item.uniqueId,

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

@@ -0,0 +1,125 @@
+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'
+        }
+    }
+};
+
+export { productOfferPlaceholder };

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

@@ -0,0 +1,26 @@
+import { usePageStore } from '@gem-sdk/core';
+import { useMemo } from 'react';
+
+const useDynamicProduct = ()=>{
+    const dynamicDiscountOffer = usePageStore((s)=>s.dynamicDiscountOffer);
+    const isDynamicProduct = useMemo(()=>{
+        return !!dynamicDiscountOffer;
+    }, [
+        dynamicDiscountOffer
+    ]);
+    // false = No discount
+    const isEnableDynamicDiscount = useMemo(()=>{
+        return dynamicDiscountOffer?.isEnabled;
+    }, [
+        dynamicDiscountOffer
+    ]);
+    const dynamicPrice = '$???';
+    return {
+        isDynamicProduct,
+        dynamicPrice,
+        dynamicDiscount: dynamicDiscountOffer,
+        isEnableDynamicDiscount
+    };
+};
+
+export { useDynamicProduct };

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

@@ -180,6 +180,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',
@@ -373,6 +381,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/esm/product/components/ProductImagesV2/jsx/components/ProductFeaturedImageCarousel.js

@@ -6,7 +6,7 @@ import { getAspectRatio } from '../../common/common.js';
 import { checkRenderFeaturedCarousel, getDotSettingByLayout } from '../../common/productFeaturedImage.js';
 import { handleMouseMove, handleMouseOut } from '../../common/hoverAction.js';
 import ProductFeaturedImageOnly from './ProductFeaturedImageOnly.js';
-import { memo, useMemo, useCallback, useEffect, createRef } from 'react';
+import { memo, useCallback, useState, useEffect, useMemo, createRef } from 'react';
 import { handleSetSrcForFeatureProductImage } from '../../../../../image/helpers/getSrcSet.js';
 
 const ProductFeaturedImageCarousel = ({ productImages, imgRef, onHandleClick, onClickArrow, onHandleLoaded, onHandleUpdateActiveIndex, builderPropUID, builderPropsClass, children, parentUid, ...setting })=>{
@@ -16,12 +16,20 @@ const ProductFeaturedImageCarousel = ({ productImages, imgRef, onHandleClick, on
     const { onListener, ref } = useInteraction();
     let delayTimeout;
     const mode = useEditorMode();
-    const imageActiveIndex = useMemo(()=>{
+    const getImageActiveIndex = useCallback(()=>{
         const index = productImages?.findIndex((item)=>item.id === featuredImageGlobal?.id);
-        return index;
+        return index ?? 0;
     }, [
-        productImages,
-        featuredImageGlobal
+        featuredImageGlobal?.id,
+        productImages
+    ]);
+    const [imageActiveIndex, setImageActiveIndex] = useState(getImageActiveIndex());
+    useEffect(()=>{
+        setImageActiveIndex(getImageActiveIndex());
+    }, [
+        featuredImageGlobal,
+        getImageActiveIndex,
+        productImages
     ]);
     const imageActive = useMemo(()=>{
         if (productImages?.length) return featuredImageGlobal || productImages?.[0];

package/dist/esm/third-party/components/NotifyBackInStockPreOrder.js

@@ -5,7 +5,7 @@ import ThirdPartyPreview from './ThirdPartyPreview.js';
 const AppConfig = {
     id: 'notify-back-in-stockpreorder',
     label: 'Notify! Back in Stock|PreOrder',
-    logoUrl: 'https://cdn.shopify.com/app-store/listing_images/9216cd5dd17ab1a38de2641bae109159/icon/CNWHjbfSt4MDEAE=.png',
+    logoUrl: 'https://cdn.shopify.com/s/files/1/0643/0497/1949/files/Notify_Me_Logo.png?v=1736234550',
     tag: 'NotifyBackInStockPreOrder'
 };
 const NotifyBackInStockPreOrderContent = ()=>{

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

@@ -3,7 +3,7 @@ import { AppConfig } from '../components/NotifyBackInStockPreOrder.js';
 const config = {
     tag: AppConfig.tag,
     label: AppConfig.label,
-    icon: '<img class="gp-w-[24px] gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/9216cd5dd17ab1a38de2641bae109159/icon/CNWHjbfSt4MDEAE=.png">',
+    icon: `<img class="gp-w-[24px] gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`,
     editorConfigs: {
         placeholder: {
             flowTag: [
@@ -23,7 +23,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/9216cd5dd17ab1a38de2641bae109159/icon/CNWHjbfSt4MDEAE=.png">
+        <img class="w-24 border border-dark-200 rounded-medium" src="${AppConfig.logoUrl}">
         <span class="preset-item-title">Notify! Back in Stock|PreOrder</span>
       </div>`
             },

package/dist/types/index.d.ts

@@ -4589,6 +4589,7 @@ type ProductOfferSettings = Omit<ProductSetting, 'productSetting'> & {
         productIds?: string[];
     };
     productOfferLayout: ObjectDevices<'1col' | '2col'>;
+    dynamicOfferQuantity?: number;
     discountAndShippingFee?: boolean;
 };
 type ProductOfferStyles = RowProps$1['styles'] & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "2.1.20",
+  "version": "2.1.21",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -21,7 +21,7 @@
     "format": "prettier --write \"./src/**/*.{ts,tsx}\""
   },
   "devDependencies": {
-    "@gem-sdk/core": "2.1.20",
+    "@gem-sdk/core": "2.1.21",
     "@gem-sdk/styles": "2.1.0",
     "@types/react-transition-group": "^4.4.5"
   },