@gem-sdk/components 2.1.25 → 2.1.27-staging.0

package/dist/esm/product/components/ProductVariants/variants/Dropdown.liquid.js

@@ -14,6 +14,15 @@ const DropdownVariant = ({ variantGroup, blankText, swatchAutoWidth, swatchHeigh
     };
     const appendTypoClass = composeTypographyClassName(optionTypo, optionTypography);
     const appendTypoStyle = composeTypographyStyle(optionTypo, optionTypography);
+    const composeSelectOptionAttrs = `
+    option-data="{{option.name | escape}}"
+    option-value="{{value | escape}}" 
+    data-gp-option-value-id="{{value.id}}" 
+    data-gp-option-available="{{value.available}}"
+    value="{{value | escape}}" 
+    class="option-value-wrapper" 
+    key="{{value | escape}}"
+  `;
     return template /* liquid */ `
     <select
     aria-label={{option.name | escape}}
@@ -69,37 +78,42 @@ const DropdownVariant = ({ variantGroup, blankText, swatchAutoWidth, swatchHeigh
           -%}
           ${isSoldOutMark ? `{%- if option_disabled == true -%}
                     {%- if value == selectedValue -%}
-                      <option disabled ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
+                      <option disabled ${!hasPreSelected ? '' : 'selected'} 
                         option-position="{{option.position}}"
-                        option-value="{{value | escape}}" value="{{value | escape}}" class="option-value-wrapper" key="{{value | escape}}">
+                        ${composeSelectOptionAttrs}>
                           {{value}} 
                       </option>
                     {% else %}
-                        <option disabled option-data="{{option.name | escape}}"
-                        option-value="{{value | escape}}" value="{{value | escape}}" class="option-value-wrapper" key="{{value | escape}}">
+                        <option 
+                        disabled 
+                        ${composeSelectOptionAttrs}>
                           {{value}} 
                         </option>
                     {%- endif -%}
                 {%- else -%}
                 {%- if value == selectedValue -%}
-                  <option ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
-                      option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+                  <option ${!hasPreSelected ? '' : 'selected'}   
+                      option-position="{{option.position}}" 
+                      ${composeSelectOptionAttrs}>
                       {{value}}
                   </option>
                   {% else %}
-                  <option  option-data="{{option.name | escape}}"
-                      option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+                  <option
+                      ${composeSelectOptionAttrs}
+                      option-position="{{option.position}}">
                       {{value}} 
                   </option>
                   {%- endif -%}
                 {%- endif -%}` : `{%- if value == selectedValue -%}
-              <option ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
-                  option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+              <option ${!hasPreSelected ? '' : 'selected'} 
+                  ${composeSelectOptionAttrs}
+                  option-position="{{option.position}}">
                   {{value}} 
               </option>
               {% else %}
-              <option  option-data="{{option.name | escape}}"
-                  option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+              <option
+                  ${composeSelectOptionAttrs}
+                  option-position="{{option.position}}">
                   {{value}} 
               </option>
               {%- endif -%}`}

package/dist/esm/product/components/ProductVariants/variants/DropdownGroup.liquid.js

@@ -1,7 +1,7 @@
 import { makeStyleResponsive, makeWidth, composeTypographyClassName, composeTypographyStyle, template, cls, handleConvertClassColor, getGlobalColorStateClass, getStyleShadowState, makeStyle, getGlobalColorStateStyle, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor, composeRadius, getSingleColorVariable } from '@gem-sdk/core';
-import { getStaticLocale } from '../../../../helpers.js';
+import { renderBlankOption, renderCombineVariants } from './combine/index.js';
 
-const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, optionTextColor, optionRounded, optionShadow, optionHasShadow, optionBorder, optionTransform, hasPreSelected, optionTypo, combineWidth, combineHeight, soldOutStyle })=>{
+const DropdownVariant = ({ price: hasPrice, blankText, optionTypography, optionBgColor, optionTextColor, optionRounded, optionShadow, optionHasShadow, optionBorder, optionTransform, hasPreSelected, optionTypo, combineWidth, combineHeight, soldOutStyle })=>{
     const swatchWidthResponsive = makeStyleResponsive('w', makeWidth(combineWidth));
     const getCustomCSSActiveState = ()=>{
         return makeStyle({
@@ -23,7 +23,6 @@ const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, op
     option-data="{{option.name}}"
     option-type="{{optionType}}"
     class="${cls('gp-truncate gp-bg-auto gp-pl-4 gp-pr-6 gp-outline-none dropdown-option-item', handleConvertClassColor(optionBorder), appendTypoClass, getGlobalColorStateClass('text', optionTextColor), getGlobalColorStateClass('bg', optionBgColor), 'gp-outline-none', 'gp-shadow-none')}"
- 
     style="${{
         ...getStyleShadowState(optionShadow, 'box-shadow', optionHasShadow),
         ...getCustomCSSActiveState(),
@@ -45,40 +44,8 @@ const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, op
         'background-position': 'right 16px center'
     }}"
   >
-  ${!hasPreSelected ? `<option value="blank" selected>${blankText || getStaticLocale('ProductVariants', 'please_select')}</option>` : ''}
-  ${`{%- for variantItem in variants -%}
-      ${isSoldOutMark ? `{%- if variantItem.available == false -%} 
-              {%- if variantItem.id == variant.id -%}
-                    <option origin-price="{{variantItem.price}}" disabled ${!hasPreSelected ? '' : 'selected'} value="{{variantItem.id}}" key="{{variantItem.id}}">
-                    {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''} 
-                    </option>
-              {% else %}
-                    <option origin-price="{{variantItem.price}}" disabled value="{{variantItem.id}}" key="{{variantItem.id}}">
-                    {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
-                    </option>
-              {%- endif -%}
-            {%- else -%} 
-            {%- if variantItem.id == variant.id -%}
-                <option origin-price="{{variantItem.price}}" ${!hasPreSelected ? '' : 'selected'} value="{{variantItem.id}}" key="{{variantItem.id}}">
-                {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''} 
-                </option>
-            {% else %}
-                <option origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}">
-                {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
-                </option>
-            {%- endif -%}
-            {%- endif -%}` : `{%- if variantItem.id == variant.id -%}
-                <option origin-price="{{variantItem.price}}" ${!hasPreSelected ? '' : 'selected'} value="{{variantItem.id}}" key="{{variantItem.id}}">
-                {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
-                </option>
-              {% else %}
-                  <option origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}">
-                  {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
-                  </option>
-              {%- endif -%}`}
-       
-      {%- endfor -%}
-    `}
+  ${renderBlankOption(hasPreSelected, blankText)}
+  ${renderCombineVariants(isSoldOutMark, hasPreSelected, hasPrice)}
   </select>
     `;
 };

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

@@ -0,0 +1,44 @@
+import { getStaticLocale } from '../../../../../helpers.js';
+
+const renderCombineVariants = (isSoldOutMark, hasPreSelected, enablePrice)=>{
+    const hasPrice = enablePrice ? '- {{variantItem.price | money}}' : '';
+    const optionAttrs = 'origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}"';
+    return `${`{%- for variantItem in variants -%}
+    ${isSoldOutMark ? `{%- if variantItem.available == false -%} 
+            {%- if variantItem.id == variant.id -%}
+                  <option origin-price="{{variantItem.price}}" disabled ${hasPreSelected ? 'selected' : ''} value="{{variantItem.id}}" key="{{variantItem.id}}">
+                  {{variantItem.title}} ${hasPrice} : ''} 
+                  </option>
+            {% else %}
+                  <option ${optionAttrs} disabled>
+                  {{variantItem.title}} ${hasPrice}
+                  </option>
+            {%- endif -%}
+          {%- else -%} 
+          {%- if variantItem.id == variant.id -%}
+              <option origin-price="{{variantItem.price}}" ${hasPreSelected ? 'selected' : ''} value="{{variantItem.id}}" key="{{variantItem.id}}">
+              {{variantItem.title}} ${hasPrice} 
+              </option>
+          {% else %}
+              <option ${optionAttrs}>
+              {{variantItem.title}} ${hasPrice}
+              </option>
+          {%- endif -%}
+          {%- endif -%}` : `{%- if variantItem.id == variant.id -%}
+              <option origin-price="{{variantItem.price}}" ${hasPreSelected ? 'selected' : ''} value="{{variantItem.id}}" key="{{variantItem.id}}">
+              {{variantItem.title}} ${hasPrice}
+              </option>
+            {% else %}
+                <option ${optionAttrs}>
+                {{variantItem.title}} ${hasPrice}
+                </option>
+            {%- endif -%}`}
+     
+    {%- endfor -%}
+  `}`;
+};
+const renderBlankOption = (hasPreSelected, blankText)=>{
+    return !hasPreSelected ? `<option value="blank" selected>${blankText || getStaticLocale('ProductVariants', 'please_select')}</option>` : '';
+};
+
+export { renderBlankOption, renderCombineVariants };

package/dist/esm/product/setting/constant/bundle-layout/horizontalThree.js

@@ -61,6 +61,7 @@ const horizontalThree = [
                         "settings": {
                             "contentType": "text",
                             "displayContent": "SALE {percent_discount}",
+                            "translate": "displayContent",
                             "displayTrigger": [
                                 {
                                     "conditionType": "exact_or_above",

package/dist/esm/product/setting/constant/bundle-layout/horizontalTwo.js

@@ -60,6 +60,7 @@ const horizontalTwo = [
                         "settings": {
                             "contentType": "text",
                             "displayContent": "SALE {percent_discount}",
+                            "translate": "displayContent",
                             "displayTrigger": [
                                 {
                                     "conditionType": "exact_or_above",

package/dist/esm/product/setting/constant/bundle-layout/verticalThree.js

@@ -198,6 +198,7 @@ const verticalThree = [
                         "settings": {
                             "contentType": "text",
                             "displayContent": "SALE {percent_discount}",
+                            "translate": "displayContent",
                             "displayTrigger": [
                                 {
                                     "conditionType": "exact_or_above",

package/dist/esm/product/setting/constant/bundle-layout/verticalTwo.js

@@ -198,6 +198,7 @@ const verticalTwo = [
                         "settings": {
                             "contentType": "text",
                             "displayContent": "SALE {percent_discount}",
+                            "translate": "displayContent",
                             "displayTrigger": [
                                 {
                                     "conditionType": "exact_or_above",

package/dist/esm/stock-counter/components/StockCounter.liquid.js

@@ -1,7 +1,7 @@
 import { composeMemo, composeTypographyV2, composeTypography, genVariable, getShortName, composeTypographyClassName, composeTypographyStyle, template, makeStyleResponsive, makeWidth, makeStyle, getSingleColorVariable, RenderIf, cls, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
 import { CONTINUE_SELLING_WHEN_OUT_OF_STOCK } from '../const.js';
-import { convertSizeToWidth, transformHighlighTag, transformNumberTag } from '../helpers.js';
-import { getDynamicSourceLocales, getSettingPreloadData, getStaticLocale } from '../../helpers.js';
+import { convertSizeToWidth } from '../helpers.js';
+import { getDynamicSourceLocales, getSettingPreloadData } from '../../helpers.js';
 
 const StockCounter = ({ setting, styles, style, advanced, builderProps, pageContext })=>{
     const { fullWidth, width, alignment, typography, typo, color, iconColor, textColor, displayProgressBar, progressBarHeight, roundedBorder, effect } = styles ?? {};
@@ -37,7 +37,8 @@ const StockCounter = ({ setting, styles, style, advanced, builderProps, pageCont
         uid: builderProps?.uid,
         settingId: 'template',
         pageContext,
-        translate
+        translate,
+        isReplaceInventoryQuantity: true
     });
     const outOfStockMessageDisplay = getDynamicSourceLocales({
         val: outOfStockMessage,
@@ -100,10 +101,6 @@ const StockCounter = ({ setting, styles, style, advanced, builderProps, pageCont
     data-id="${builderProps?.uid}"
     data-visible="{{ should_display }}"
     data-policy='{{ variant_policy_list }}'
-    data-template="${templateStringDisplay}"
-    data-out-of-stock-message="${outOfStockMessageDisplay}"
-    data-continue-selling="${continueSellingDisplay}"
-    data-unlimited-quantity-message="${unlimitedQuantityMessageDisplay}"
     gp-setting='${JSON.stringify({
         displayByDefault,
         displayProgressBar,
@@ -143,19 +140,25 @@ const StockCounter = ({ setting, styles, style, advanced, builderProps, pageCont
           >
           ${icon}</div>
             `)}
+            <div class="gp-hidden gp-text-white gp-py-1 gp-px-2 gp-mr-1 gp-inline-block gp-my-[1px] gp-text-g-${mainColor} gp-bg-g-${mainColor}" >
+              <div id="template">{{ section.settings.gg9aeXbilgC_template | replace: '$quantity$', inventory_quantity }}</div>
+              <div id="out-of-stock-message">{{ section.settings.gg9aeXbilgC_outOfStockMessage }}</div>
+              <div id="continue-selling">{{ section.settings.gg9aeXbilgC_continueSelling }}</div>
+              <div id="unlimited-quantity-message">{{ section.settings.gg9aeXbilgC_unlimitedQuantityMessage }}</div>
+            </div>
             <p
               data-slot-type="message"
               class="${appendTypoClass} gp-stock-counter-mark"
               style="${appendTypoStyle}"
             >
               {% if inventory_management == null and inventory_quantity <= 0 %}
-                ${transformHighlighTag(unlimitedQuantityMessageDisplay ?? getStaticLocale('StockCounter', 'let_buy_now'), mainColor)}
+                ${unlimitedQuantityMessageDisplay}
               {% elsif available == false %}
-                ${transformHighlighTag(outOfStockMessageDisplay || '', mainColor)}
+                ${outOfStockMessageDisplay}
               {% elsif available and inventory_policy == '${CONTINUE_SELLING_WHEN_OUT_OF_STOCK.toLowerCase()}' and inventory_quantity <= 0 %}
-                ${transformHighlighTag(continueSellingDisplay || '', mainColor)}
+                ${continueSellingDisplay}
               {% else %}
-                ${transformHighlighTag(transformNumberTag(templateStringDisplay || '', mainColor, `{{ inventory_quantity }}`), mainColor)}
+                ${templateStringDisplay}
               {% endif %}
             </p>
           </div>

package/dist/esm/stock-counter/helpers.js

@@ -31,7 +31,10 @@ const transformNumberTag = (template, stringColor, quantityLeft)=>{
         // Is global style color
         quantityTag = `<span class='gp-text-g-${stringColor}'>$quantity$</span>`;
     }
-    return template.replaceAll(DEFAULT_QUANTITY_TEMPLATE, quantityTag.replace('$quantity$', quantityLeft.toString()));
+    if (quantityLeft) {
+        quantityTag = quantityTag.replace('$quantity$', quantityLeft.toString());
+    }
+    return template.replaceAll(DEFAULT_QUANTITY_TEMPLATE, quantityTag);
 };
 const convertSizeToWidth = (typographyVar)=>{
     const widthObject = {};

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

@@ -1,20 +1,19 @@
 import { useInteraction, useEditorMode } from '@gem-sdk/core';
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 
 const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, componentUid })=>{
-    const [previousTab, setPreviousTab] = useState(activeKey || 1);
-    const { trigger, onListener, interactionListenerLoaded } = useInteraction();
+    const { trigger, onListener, interactionListenerLoaded, saveToElementInteractionData, findElementIncludingSelf } = useInteraction();
     const mode = 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({
@@ -35,11 +34,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/esm/text/components/Text.js

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

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

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

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

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

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

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