@gem-sdk/components 2.1.14 → 2.1.16

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

@@ -5,29 +5,26 @@ 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: hasDiscount ? 1 : 0.2
+            opacity: currentOfferDiscount ? 1 : 0.2
         },
         id: `shopify-text-element-${builderProps?.uid}`,
         "data-product-id": currentProductId,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(Text.default, {
                 setting: {
-                    text: hasDiscount ? message : message?.replace(new RegExp(/\{\{Discount\}\}/, 'gi'), '0%')
+                    text: currentOfferDiscount ? message : message?.replace(new RegExp(/\{\{Discount\}\}/, 'gi'), '0%')
                 },
                 styles: {
                     typo

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

@@ -11,20 +11,14 @@ 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, discountAndShippingFee, ...rowSetting } = setting || {};
+    const { productSetting, productOfferLayout, inlineAlignment, ...rowSetting } = setting || {};
     const { productOfferColumnGap, productOfferVerticalGutter, productOfferWidth, ...rowStyles } = styles || {};
     const productOffers = core.usePageStore((s)=>s.productOffers);
     const publicStoreFrontData = core.usePageStore((s)=>s.publicStoreFrontData);
-    const { isDynamicProduct } = useDynamicProduct.useDynamicProduct();
-    const dynamicDiscountOffer = core.usePageStore((s)=>s.dynamicDiscountOffer);
-    const totalProduct = React.useMemo(()=>isDynamicProduct ? dynamicDiscountOffer?.appliedProductCount : productOffers?.length, [
-        dynamicDiscountOffer?.appliedProductCount,
-        isDynamicProduct,
+    const totalProduct = React.useMemo(()=>productOffers?.length, [
         productOffers?.length
     ]);
     const sortedProductBaseIDs = React.useMemo(()=>{
@@ -50,14 +44,7 @@ const PostPurchaseProductOffer = ({ styles, builderAttrs, builderProps, children
     const products = React.useMemo(()=>core.flattenConnection(productData.data?.products), [
         productData.data?.products
     ]);
-    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 productSortedById = sortedProductBaseIDs?.map((id)=>products?.find((el)=>el?.baseID === id)).filter(Boolean);
     const getStyles = ()=>{
         return {
             ...core.makeStyleResponsive('cg', productOfferColumnGap),

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

@@ -6,7 +6,6 @@ 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();
@@ -14,7 +13,6 @@ 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') {
@@ -55,7 +53,7 @@ const PostPurchaseProductPrice = ({ styles, style, builderAttrs, builderProps, c
             /*#__PURE__*/ jsxRuntime.jsx(Text.default, {
                 styles: styles,
                 setting: {
-                    text: isDynamicProduct ? '$???' : moneyFormatted
+                    text: moneyFormatted
                 },
                 className: core.cls({
                     'gp-money': styles?.priceType === 'regular',

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

@@ -7,7 +7,6 @@ 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();
@@ -22,7 +21,6 @@ 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'];
@@ -35,19 +33,19 @@ const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, b
     }, [
         isShowPrice
     ]);
-    const getMoneyLines = ()=>{
+    const moneyLines = React.useMemo(()=>{
         const data = [];
         if (styles.isShowSubTotalLabel !== false) {
             data.push({
                 title: setting.subTotalLabel,
-                money: isDynamicProduct ? dynamicPrice : subTotalMoneyFormatted,
+                money: subTotalMoneyFormatted,
                 uniqueId: 'subTotalLabel'
             });
         }
         if (styles.isShowDiscountLabel !== false) {
             data.push({
                 title: setting.discountLabel,
-                money: isDynamicProduct && dynamicDiscount && isEnableDynamicDiscount ? dynamicPrice : discount > 0 ? discountMoneyFormatted : 'No discount',
+                money: discount > 0 ? discountMoneyFormatted : 'No discount',
                 uniqueId: 'discountLabel'
             });
         }
@@ -73,11 +71,25 @@ const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, b
         }
         data.push({
             title: setting.totalLabel,
-            money: isDynamicProduct ? dynamicPrice : totalMoneyFormatted,
+            money: 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", {
@@ -128,9 +140,9 @@ const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, b
                                 ...core.makeStyleResponsive('w', width),
                                 gap: itemGap
                             },
-                            children: getMoneyLines().map((item)=>/*#__PURE__*/ jsxRuntime.jsxs(React.Fragment, {
+                            children: moneyLines.map((item)=>/*#__PURE__*/ jsxRuntime.jsxs(React.Fragment, {
                                     children: [
-                                        item.uniqueId === 'totalLabel' && getMoneyLines().length > 1 && /*#__PURE__*/ jsxRuntime.jsx("hr", {}),
+                                        item.uniqueId === 'totalLabel' && moneyLines.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/settings/ProductOffer.js

@@ -184,14 +184,6 @@ 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',
@@ -385,24 +377,6 @@ 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/ProductDescription/common.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var core = require('@gem-sdk/core');
+var _const = require('./const.js');
+
+const getMaxHeightStyleDefault = (setting)=>{
+    let result = {
+        desktop: 'none'
+    };
+    const devices = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    devices.forEach((device)=>{
+        const lineClamp = core.getResponsiveValueByScreen(setting?.lineClamp, device);
+        const hasLineClamp = core.getResponsiveValueByScreen(setting?.hasLineClamp, device);
+        const maxHeight = hasLineClamp && lineClamp ? `${lineClamp * _const.DESCRIPTION_LINE_HEIGHT_DEFAULT}px` : 'none';
+        result = {
+            ...result,
+            [device]: maxHeight
+        };
+    });
+    const style = core.makeStyleResponsive('maxh', result);
+    return style;
+};
+
+exports.getMaxHeightStyleDefault = getMaxHeightStyleDefault;

package/dist/cjs/product/components/ProductDescription/const.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const DESCRIPTION_LINE_HEIGHT_DEFAULT = 21;
+
+exports.DESCRIPTION_LINE_HEIGHT_DEFAULT = DESCRIPTION_LINE_HEIGHT_DEFAULT;

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

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 var React = require('react');
+var common = require('./ProductDescription/common.js');
+var _const = require('./ProductDescription/const.js');
 
 const ProductDescription = ({ setting, builderProps })=>{
     const [open, setOpen] = React.useState(false);
@@ -18,14 +20,18 @@ const ProductDescription = ({ setting, builderProps })=>{
     React.useEffect(()=>{
         const dom = ref.current;
         setOpen(false);
-        if (dom && hasLineClamp && product?.description) {
+        if (!dom) return;
+        const enableShowMore = hasLineClamp && product?.descriptionHtml;
+        if (!enableShowMore) dom.style.maxHeight = 'none';
+        else {
             const value = lineClamp;
             setTimeout(()=>{
                 const scrollHeight = dom?.scrollHeight ?? 0;
                 const clientHeight = dom?.clientHeight ?? 0;
-                const lineHeight = window.getComputedStyle(dom).getPropertyValue('line-height');
-                const lineText = Math.round((scrollHeight ?? 0) / parseInt(lineHeight));
-                const conditionCheckLine = core.isSafari() ? value && value < lineText : clientHeight < scrollHeight;
+                const lineHeight = getLineHeightFromDom();
+                const lineText = Math.round((scrollHeight ?? 0) / lineHeight);
+                dom.style.maxHeight = getMaxHeight(lineHeight);
+                const conditionCheckLine = value && value < lineText || clientHeight < scrollHeight;
                 if (value && conditionCheckLine) {
                     allowShowViewMore(()=>true);
                 } else {
@@ -36,8 +42,19 @@ const ProductDescription = ({ setting, builderProps })=>{
     }, [
         hasLineClamp,
         lineClamp,
-        product?.description
+        product?.description,
+        core.isSafari
     ]);
+    const getLineHeightFromDom = ()=>{
+        if (!ref.current) return _const.DESCRIPTION_LINE_HEIGHT_DEFAULT;
+        const lineHeight = window.getComputedStyle(ref.current).getPropertyValue('line-height');
+        return parseInt(lineHeight);
+    };
+    const getMaxHeight = (lineHeight)=>{
+        if (!hasLineClamp || !lineClamp) return 'auto';
+        if (lineHeight) return `${lineClamp * lineHeight}px`;
+        return 'auto';
+    };
     const Tag = htmlTag === 'html' ? 'div' : 'p';
     const appendTypoClass = core.composeTypographyClassName(setting?.typo, setting?.typography);
     const appendTypoStyle = core.composeTypographyStyle(setting?.typo, setting?.typography);
@@ -54,7 +71,17 @@ const ProductDescription = ({ setting, builderProps })=>{
     }
   `;
     const DescriptionNotFoundString = 'This product does not have a description';
-    const hasDescription = product?.description && product.description?.trim() != '';
+    const noDescriptionHtml = !product?.descriptionHtml;
+    const handleToggleShowMore = ()=>{
+        if (!ref.current) return;
+        const lineHeight = getLineHeightFromDom();
+        if (open) {
+            ref.current.style.maxHeight = getMaxHeight(lineHeight);
+        } else {
+            ref.current.style.maxHeight = 'none';
+        }
+        setOpen((prev)=>!prev);
+    };
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
         children: !product ? null : /*#__PURE__*/ jsxRuntime.jsxs("div", {
             "data-id": builderProps?.uid,
@@ -65,7 +92,7 @@ const ProductDescription = ({ setting, builderProps })=>{
                 /*#__PURE__*/ jsxRuntime.jsx(Tag, {
                     ref: ref,
                     "data-gp-text": true,
-                    className: core.cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, !hasDescription ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', core.getGlobalColorClass('text', setting?.color)),
+                    className: core.cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, noDescriptionHtml ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', core.getGlobalColorClass('text', setting?.color)),
                     style: {
                         ...core.getStyleShadow({
                             value: setting?.textShadow,
@@ -77,10 +104,11 @@ const ProductDescription = ({ setting, builderProps })=>{
                         ...core.makeStyle({
                             tt: setting?.transform
                         }),
-                        ...appendTypoStyle
+                        ...appendTypoStyle,
+                        ...common.getMaxHeightStyleDefault(setting)
                     },
                     dangerouslySetInnerHTML: {
-                        __html: product?.descriptionHtml && hasDescription ? product.descriptionHtml : `${DescriptionNotFoundString}`
+                        __html: product?.descriptionHtml || `${DescriptionNotFoundString}`
                     }
                 }),
                 hasLineClamp && isShowViewMore && /*#__PURE__*/ jsxRuntime.jsxs("button", {
@@ -93,7 +121,7 @@ const ProductDescription = ({ setting, builderProps })=>{
                         ...appendTypoStyle,
                         ...core.getGlobalColorStyle(setting?.showMoreColor)
                     },
-                    onClick: ()=>setOpen((prev)=>!prev),
+                    onClick: handleToggleShowMore,
                     children: [
                         !open ? setting?.viewMoreText : setting?.viewLessText,
                         setting?.enableViewMoreIcon && /*#__PURE__*/ jsxRuntime.jsx("svg", {

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@gem-sdk/core');
 var helpers = require('../../helpers.js');
+var common = require('./ProductDescription/common.js');
 
 const devices = [
     'desktop',
@@ -35,7 +36,8 @@ const ProductDescription = ({ setting, advanced, builderProps })=>{
         ...core.makeStyle({
             tt: setting?.transform
         }),
-        ...appendTypoStyle
+        ...appendTypoStyle,
+        ...common.getMaxHeightStyleDefault(setting)
     };
     const collapseStyle = {
         ...defaultStyle,

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

@@ -1,29 +1,26 @@
 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: hasDiscount ? 1 : 0.2
+            opacity: currentOfferDiscount ? 1 : 0.2
         },
         id: `shopify-text-element-${builderProps?.uid}`,
         "data-product-id": currentProductId,
         children: [
             /*#__PURE__*/ jsx(Text, {
                 setting: {
-                    text: hasDiscount ? message : message?.replace(new RegExp(/\{\{Discount\}\}/, 'gi'), '0%')
+                    text: currentOfferDiscount ? message : message?.replace(new RegExp(/\{\{Discount\}\}/, 'gi'), '0%')
                 },
                 styles: {
                     typo

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

@@ -7,20 +7,14 @@ 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, discountAndShippingFee, ...rowSetting } = setting || {};
+    const { productSetting, productOfferLayout, inlineAlignment, ...rowSetting } = setting || {};
     const { productOfferColumnGap, productOfferVerticalGutter, productOfferWidth, ...rowStyles } = styles || {};
     const productOffers = usePageStore((s)=>s.productOffers);
     const publicStoreFrontData = usePageStore((s)=>s.publicStoreFrontData);
-    const { isDynamicProduct } = useDynamicProduct();
-    const dynamicDiscountOffer = usePageStore((s)=>s.dynamicDiscountOffer);
-    const totalProduct = useMemo(()=>isDynamicProduct ? dynamicDiscountOffer?.appliedProductCount : productOffers?.length, [
-        dynamicDiscountOffer?.appliedProductCount,
-        isDynamicProduct,
+    const totalProduct = useMemo(()=>productOffers?.length, [
         productOffers?.length
     ]);
     const sortedProductBaseIDs = useMemo(()=>{
@@ -46,14 +40,7 @@ const PostPurchaseProductOffer = ({ styles, builderAttrs, builderProps, children
     const products = useMemo(()=>flattenConnection(productData.data?.products), [
         productData.data?.products
     ]);
-    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 productSortedById = sortedProductBaseIDs?.map((id)=>products?.find((el)=>el?.baseID === id)).filter(Boolean);
     const getStyles = ()=>{
         return {
             ...makeStyleResponsive('cg', productOfferColumnGap),

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

@@ -2,7 +2,6 @@ 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();
@@ -10,7 +9,6 @@ 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') {
@@ -51,7 +49,7 @@ const PostPurchaseProductPrice = ({ styles, style, builderAttrs, builderProps, c
             /*#__PURE__*/ jsx(Text, {
                 styles: styles,
                 setting: {
-                    text: isDynamicProduct ? '$???' : moneyFormatted
+                    text: moneyFormatted
                 },
                 className: cls({
                     'gp-money': styles?.priceType === 'regular',

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

@@ -3,7 +3,6 @@ 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();
@@ -18,7 +17,6 @@ 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'];
@@ -31,19 +29,19 @@ const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, b
     }, [
         isShowPrice
     ]);
-    const getMoneyLines = ()=>{
+    const moneyLines = useMemo(()=>{
         const data = [];
         if (styles.isShowSubTotalLabel !== false) {
             data.push({
                 title: setting.subTotalLabel,
-                money: isDynamicProduct ? dynamicPrice : subTotalMoneyFormatted,
+                money: subTotalMoneyFormatted,
                 uniqueId: 'subTotalLabel'
             });
         }
         if (styles.isShowDiscountLabel !== false) {
             data.push({
                 title: setting.discountLabel,
-                money: isDynamicProduct && dynamicDiscount && isEnableDynamicDiscount ? dynamicPrice : discount > 0 ? discountMoneyFormatted : 'No discount',
+                money: discount > 0 ? discountMoneyFormatted : 'No discount',
                 uniqueId: 'discountLabel'
             });
         }
@@ -69,11 +67,25 @@ const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, b
         }
         data.push({
             title: setting.totalLabel,
-            money: isDynamicProduct ? dynamicPrice : totalMoneyFormatted,
+            money: 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", {
@@ -124,9 +136,9 @@ const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, b
                                 ...makeStyleResponsive('w', width),
                                 gap: itemGap
                             },
-                            children: getMoneyLines().map((item)=>/*#__PURE__*/ jsxs(Fragment$1, {
+                            children: moneyLines.map((item)=>/*#__PURE__*/ jsxs(Fragment$1, {
                                     children: [
-                                        item.uniqueId === 'totalLabel' && getMoneyLines().length > 1 && /*#__PURE__*/ jsx("hr", {}),
+                                        item.uniqueId === 'totalLabel' && moneyLines.length > 1 && /*#__PURE__*/ jsx("hr", {}),
                                         /*#__PURE__*/ jsx("div", {
                                             children: /*#__PURE__*/ jsx(MoneyLine, {
                                                 uniqueId: item.uniqueId,

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

@@ -180,14 +180,6 @@ 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',
@@ -381,24 +373,6 @@ 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/ProductDescription/common.js

@@ -0,0 +1,26 @@
+import { getResponsiveValueByScreen, makeStyleResponsive } from '@gem-sdk/core';
+import { DESCRIPTION_LINE_HEIGHT_DEFAULT } from './const.js';
+
+const getMaxHeightStyleDefault = (setting)=>{
+    let result = {
+        desktop: 'none'
+    };
+    const devices = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    devices.forEach((device)=>{
+        const lineClamp = getResponsiveValueByScreen(setting?.lineClamp, device);
+        const hasLineClamp = getResponsiveValueByScreen(setting?.hasLineClamp, device);
+        const maxHeight = hasLineClamp && lineClamp ? `${lineClamp * DESCRIPTION_LINE_HEIGHT_DEFAULT}px` : 'none';
+        result = {
+            ...result,
+            [device]: maxHeight
+        };
+    });
+    const style = makeStyleResponsive('maxh', result);
+    return style;
+};
+
+export { getMaxHeightStyleDefault };

package/dist/esm/product/components/ProductDescription/const.js

@@ -0,0 +1,3 @@
+const DESCRIPTION_LINE_HEIGHT_DEFAULT = 21;
+
+export { DESCRIPTION_LINE_HEIGHT_DEFAULT };

package/dist/esm/product/components/ProductDescription.js

@@ -1,6 +1,8 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useProduct, useCurrentDevice, getResponsiveValueByScreen, isSafari, composeTypographyClassName, composeTypographyStyle, cls, getGlobalColorClass, getStyleShadow, makeStyleResponsive, makeStyle, getGlobalColorStyle } from '@gem-sdk/core';
 import { useState, useRef, useEffect } from 'react';
+import { getMaxHeightStyleDefault } from './ProductDescription/common.js';
+import { DESCRIPTION_LINE_HEIGHT_DEFAULT } from './ProductDescription/const.js';
 
 const ProductDescription = ({ setting, builderProps })=>{
     const [open, setOpen] = useState(false);
@@ -14,14 +16,18 @@ const ProductDescription = ({ setting, builderProps })=>{
     useEffect(()=>{
         const dom = ref.current;
         setOpen(false);
-        if (dom && hasLineClamp && product?.description) {
+        if (!dom) return;
+        const enableShowMore = hasLineClamp && product?.descriptionHtml;
+        if (!enableShowMore) dom.style.maxHeight = 'none';
+        else {
             const value = lineClamp;
             setTimeout(()=>{
                 const scrollHeight = dom?.scrollHeight ?? 0;
                 const clientHeight = dom?.clientHeight ?? 0;
-                const lineHeight = window.getComputedStyle(dom).getPropertyValue('line-height');
-                const lineText = Math.round((scrollHeight ?? 0) / parseInt(lineHeight));
-                const conditionCheckLine = isSafari() ? value && value < lineText : clientHeight < scrollHeight;
+                const lineHeight = getLineHeightFromDom();
+                const lineText = Math.round((scrollHeight ?? 0) / lineHeight);
+                dom.style.maxHeight = getMaxHeight(lineHeight);
+                const conditionCheckLine = value && value < lineText || clientHeight < scrollHeight;
                 if (value && conditionCheckLine) {
                     allowShowViewMore(()=>true);
                 } else {
@@ -32,8 +38,19 @@ const ProductDescription = ({ setting, builderProps })=>{
     }, [
         hasLineClamp,
         lineClamp,
-        product?.description
+        product?.description,
+        isSafari
     ]);
+    const getLineHeightFromDom = ()=>{
+        if (!ref.current) return DESCRIPTION_LINE_HEIGHT_DEFAULT;
+        const lineHeight = window.getComputedStyle(ref.current).getPropertyValue('line-height');
+        return parseInt(lineHeight);
+    };
+    const getMaxHeight = (lineHeight)=>{
+        if (!hasLineClamp || !lineClamp) return 'auto';
+        if (lineHeight) return `${lineClamp * lineHeight}px`;
+        return 'auto';
+    };
     const Tag = htmlTag === 'html' ? 'div' : 'p';
     const appendTypoClass = composeTypographyClassName(setting?.typo, setting?.typography);
     const appendTypoStyle = composeTypographyStyle(setting?.typo, setting?.typography);
@@ -50,7 +67,17 @@ const ProductDescription = ({ setting, builderProps })=>{
     }
   `;
     const DescriptionNotFoundString = 'This product does not have a description';
-    const hasDescription = product?.description && product.description?.trim() != '';
+    const noDescriptionHtml = !product?.descriptionHtml;
+    const handleToggleShowMore = ()=>{
+        if (!ref.current) return;
+        const lineHeight = getLineHeightFromDom();
+        if (open) {
+            ref.current.style.maxHeight = getMaxHeight(lineHeight);
+        } else {
+            ref.current.style.maxHeight = 'none';
+        }
+        setOpen((prev)=>!prev);
+    };
     return /*#__PURE__*/ jsx(Fragment, {
         children: !product ? null : /*#__PURE__*/ jsxs("div", {
             "data-id": builderProps?.uid,
@@ -61,7 +88,7 @@ const ProductDescription = ({ setting, builderProps })=>{
                 /*#__PURE__*/ jsx(Tag, {
                     ref: ref,
                     "data-gp-text": true,
-                    className: cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, !hasDescription ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', getGlobalColorClass('text', setting?.color)),
+                    className: cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, noDescriptionHtml ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', getGlobalColorClass('text', setting?.color)),
                     style: {
                         ...getStyleShadow({
                             value: setting?.textShadow,
@@ -73,10 +100,11 @@ const ProductDescription = ({ setting, builderProps })=>{
                         ...makeStyle({
                             tt: setting?.transform
                         }),
-                        ...appendTypoStyle
+                        ...appendTypoStyle,
+                        ...getMaxHeightStyleDefault(setting)
                     },
                     dangerouslySetInnerHTML: {
-                        __html: product?.descriptionHtml && hasDescription ? product.descriptionHtml : `${DescriptionNotFoundString}`
+                        __html: product?.descriptionHtml || `${DescriptionNotFoundString}`
                     }
                 }),
                 hasLineClamp && isShowViewMore && /*#__PURE__*/ jsxs("button", {
@@ -89,7 +117,7 @@ const ProductDescription = ({ setting, builderProps })=>{
                         ...appendTypoStyle,
                         ...getGlobalColorStyle(setting?.showMoreColor)
                     },
-                    onClick: ()=>setOpen((prev)=>!prev),
+                    onClick: handleToggleShowMore,
                     children: [
                         !open ? setting?.viewMoreText : setting?.viewLessText,
                         setting?.enableViewMoreIcon && /*#__PURE__*/ jsx("svg", {

package/dist/esm/product/components/ProductDescription.liquid.js

@@ -1,5 +1,6 @@
 import { composeTypographyClassName, composeTypographyStyle, getStyleShadow, makeStyleResponsive, getGlobalColorStyle, makeStyle, makeLineClamp, template, cls, getGlobalColorClass, RenderIf, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
 import { getSettingPreloadData } from '../../helpers.js';
+import { getMaxHeightStyleDefault } from './ProductDescription/common.js';
 
 const devices = [
     'desktop',
@@ -31,7 +32,8 @@ const ProductDescription = ({ setting, advanced, builderProps })=>{
         ...makeStyle({
             tt: setting?.transform
         }),
-        ...appendTypoStyle
+        ...appendTypoStyle,
+        ...getMaxHeightStyleDefault(setting)
     };
     const collapseStyle = {
         ...defaultStyle,

package/dist/types/index.d.ts

@@ -4458,7 +4458,6 @@ 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.14",
+  "version": "2.1.16",
   "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.13",
+    "@gem-sdk/core": "2.1.15",
     "@gem-sdk/styles": "2.1.0",
     "@types/react-transition-group": "^4.4.5"
   },

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

@@ -1,127 +0,0 @@
-'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

@@ -1,28 +0,0 @@
-'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/esm/post-purchase/product/constants/ProductOfferPlaceholder.js

@@ -1,125 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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 };