@gem-sdk/components 12.0.0-staging.50 → 12.0.0-staging.51

package/dist/cjs/product/components/product-button/common/classes.js

@@ -1 +1 @@
-"use strict";const getButtonClasses=({isDisabled:t,isLiquid:s})=>({"gp-cursor-default gp-opacity-30":t,"btn-disabled":t&&s}),getAddToCartButtonClasses=t=>{let{isLiquid:s=!1,isDisabled:e=!1}=t??{};return{...getButtonClasses({isDisabled:e,isLiquid:s}),"gp-button-atc tcustomizer-submit-button":s}},getSoldOutButtonClasses=t=>{let{isLiquid:s=!1}=t??{};return{...getButtonClasses({isDisabled:!0,isLiquid:s}),"gp-button-sold-out":s}},getProductPriceClasses=()=>({"gp-button-price":!0});exports.getAddToCartButtonClasses=getAddToCartButtonClasses,exports.getButtonClasses=getButtonClasses,exports.getProductPriceClasses=getProductPriceClasses,exports.getSoldOutButtonClasses=getSoldOutButtonClasses;
+"use strict";const getButtonClasses=({isDisabled:t,isLiquid:s})=>({"gp-cursor-default gp-opacity-30":t,"btn-disabled":t&&s,"gp-add-to-cart":!s}),getAddToCartButtonClasses=t=>{let{isLiquid:s=!1,isDisabled:e=!1}=t??{};return{...getButtonClasses({isDisabled:e,isLiquid:s}),"gp-button-atc tcustomizer-submit-button":s}},getSoldOutButtonClasses=t=>{let{isLiquid:s=!1}=t??{};return{...getButtonClasses({isDisabled:!0,isLiquid:s}),"gp-button-sold-out":s}},getProductPriceClasses=()=>({"gp-button-price":!0});exports.getAddToCartButtonClasses=getAddToCartButtonClasses,exports.getButtonClasses=getButtonClasses,exports.getProductPriceClasses=getProductPriceClasses,exports.getSoldOutButtonClasses=getSoldOutButtonClasses;

package/dist/cjs/product/components/product-button/hooks/useAddToCart.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core"),React=require("react"),tracking=require("../../../helpers/tracking.js"),useDispatchAfterSubmitEvent=require("./useDispatchAfterSubmitEvent.js"),useCartMessage=require("./useCartMessage.js"),useCartOperations=require("./useCartOperations.js");const useBtnAddToCart=({styles:e,setting:r,builderProps:t})=>{let s=React.useRef(null),{isEditMode:u,isPreviewSharePageMode:a}=core.useRenderMode(),i=core.useProduct(),{currency:c}=core.useCurrency(),{quantity:n}=core.useQuantity(),o=core.useProductProperties(),l=core.useCurrentVariant(),{hasPreSelected:d}=core.useHasPreSelected(),b=core.useStickyStore(e=>e.setStickyVisible),v=core.useProductStore(e=>e.updateIsSubmit),C=useDispatchAfterSubmitEvent.useDispatchAfterSubmitEvent(t?.uid),{showMessage:g,notiComponent:p}=useCartMessage.useCartMessage(e,r),{handleSuccess:f,handleError:k,cartId:S}=useCartOperations.useCartOperations(r,g,C),{isMutating:m,trigger:D}=core.useCreateCart({onSuccess:f,onError:k}),{isMutating:I,trigger:E}=core.useAddToCart({onSuccess:f,onError:k});React.useEffect(()=>{let e=new IntersectionObserver(e=>{let r=e[0];b(r?.isIntersecting)},{threshold:.1}),r=s.current;return s.current&&e.observe(s.current),()=>{r&&e.unobserve(r)}},[b]);let A=React.useCallback(()=>{if(!l?.baseID||!n||!i?.baseID||void 0!==d&&!d||u||a)return;let e=o?.some(e=>e.required&&!e.value);if(v(!0),e)return;let t=o?.filter(e=>!!e.value)?.map(e=>({key:e.key,value:e.value}));tracking.addToCartTracking({quantity:n,currency:c,id:i?.baseID,name:i?.title,brand:i?.vendor,sku:l.sku,price:core.convertDecimalToNumber(l?.price),variant:l.title});let s={quantity:n,attributes:t,variantId:l.baseID};r?.actionEffect!=="buy-now"&&S?E({cartId:S,lines:[s]}):D({items:[s]})},[u,a,S,c,n,o,d,i?.title,i?.vendor,i?.baseID,l?.sku,l?.price,l?.title,l?.baseID,r?.actionEffect,D,E,v]),h=core.useCurrentVariantInStock(),q=m||I,y=l?r?.outOfStockLabel:"Unavailable";return{addToCartRef:s,isLoading:q,isInStock:h,notiComponent:p,outOfStockLabel:y,addToCart:A}};exports.useBtnAddToCart=useBtnAddToCart;
+"use strict";var core=require("@gem-sdk/core"),React=require("react"),tracking=require("../../../helpers/tracking.js"),useDispatchAfterSubmitEvent=require("./useDispatchAfterSubmitEvent.js"),useCartMessage=require("./useCartMessage.js"),useCartOperations=require("./useCartOperations.js");const useBtnAddToCart=({styles:e,setting:r,builderProps:t})=>{let s=React.useRef(null),{isEditMode:u,isPreviewSharePageMode:a}=core.useRenderMode(),i=core.useProduct(),{currency:c}=core.useCurrency(),{quantity:n}=core.useQuantity(),o=core.useProductProperties(),l=core.useCurrentVariant(),{hasPreSelected:d}=core.useHasPreSelected(),b=core.useStickyStore(e=>e.setStickyVisible),v=core.useProductStore(e=>e.updateIsSubmit),C=useDispatchAfterSubmitEvent.useDispatchInteractionEvent(t?.uid),p=useDispatchAfterSubmitEvent.useDispatchCustomEvent({product:i,currentVariant:l,quantity:n}),{showMessage:g,notiComponent:f}=useCartMessage.useCartMessage(e,r),{handleSuccess:k,handleError:S,cartId:m}=useCartOperations.useCartOperations({setting:r,showMessage:g,dispatchInteractionEvent:C,dispatchCustomEvent:p}),{isMutating:D,trigger:I}=core.useCreateCart({onSuccess:k,onError:S}),{isMutating:E,trigger:h}=core.useAddToCart({onSuccess:k,onError:S});React.useEffect(()=>{let e=new IntersectionObserver(e=>{let r=e[0];b(r?.isIntersecting)},{threshold:.1}),r=s.current;return s.current&&e.observe(s.current),()=>{r&&e.unobserve(r)}},[b]);let A=React.useCallback(()=>{if(!l?.baseID||!n||!i?.baseID||void 0!==d&&!d||u||a)return;let e=o?.some(e=>e.required&&!e.value);if(v(!0),e)return;let t=o?.filter(e=>!!e.value)?.map(e=>({key:e.key,value:e.value}));tracking.addToCartTracking({quantity:n,currency:c,id:i?.baseID,name:i?.title,brand:i?.vendor,sku:l.sku,price:core.convertDecimalToNumber(l?.price),variant:l.title});let s={quantity:n,attributes:t,variantId:l.baseID};r?.actionEffect!=="buy-now"&&m?h({cartId:m,lines:[s]}):I({items:[s]})},[u,a,m,c,n,o,d,i?.title,i?.vendor,i?.baseID,l?.sku,l?.price,l?.title,l?.baseID,r?.actionEffect,I,h,v]),q=core.useCurrentVariantInStock(),y=D||E,M=l?r?.outOfStockLabel:"Unavailable";return{addToCartRef:s,isLoading:y,isInStock:q,notiComponent:f,outOfStockLabel:M,addToCart:A}};exports.useBtnAddToCart=useBtnAddToCart;

package/dist/cjs/product/components/product-button/hooks/useCartOperations.js

@@ -1 +1 @@
-"use strict";var React=require("react"),core=require("@gem-sdk/core");const useCartOperations=(e,r,t)=>{let{openCart:o}=core.useCartUI(),{storefrontToken:c}=core.useStoreFront(),{cartId:s,updateCartId:a}=core.useCartId(),n=React.useCallback((e,r)=>{e?.enableMessage&&r(e.successMessage||"","success"),o()},[o]),u=(e,r)=>{if(!e.checkoutUrl)return;let t=r?`${e.checkoutUrl}?access_token=${r}`:e.checkoutUrl;window.location.href=t},l=e=>{e?.customURL?.link&&("_blank"===e.customURL.target?window.open(e.customURL.link,"_blank"):window.location.href=e.customURL.link)},i=React.useCallback(s=>{let i={"open-cart-drawer":()=>o(),"go-to-url":()=>l(e),"buy-now":()=>u(s,c),"continue-shopping":()=>n(e,r)};e?.actionEffect!=="buy-now"&&a(s.id);let k=i[e?.actionEffect];k&&k(),t()},[e,c,o,r,a,t,n]),k=React.useCallback(t=>{e?.enableMessage&&(t?.[0]?.code==="INVALID"?r(t[0].message||"","error"):r(e.errorMessage||"","error"))},[e,r]);return{cartId:s,handleSuccess:i,handleError:k}};exports.useCartOperations=useCartOperations;
+"use strict";var React=require("react"),core=require("@gem-sdk/core");const useCartOperations=({setting:e,showMessage:r,dispatchInteractionEvent:t,dispatchCustomEvent:o})=>{let{openCart:c}=core.useCartUI(),{storefrontToken:s}=core.useStoreFront(),{cartId:a,updateCartId:n}=core.useCartId(),u=React.useCallback((e,r)=>{e?.enableMessage&&r(e.successMessage||"","success"),c()},[c]),l=(e,r)=>{if(!e.checkoutUrl)return;let t=r?`${e.checkoutUrl}?access_token=${r}`:e.checkoutUrl;window.location.href=t},i=e=>{e?.customURL?.link&&("_blank"===e.customURL.target?window.open(e.customURL.link,"_blank"):window.location.href=e.customURL.link)},k=React.useCallback(a=>{let k={"open-cart-drawer":()=>c(),"go-to-url":()=>i(e),"buy-now":()=>l(a,s),"continue-shopping":()=>u(e,r)};e?.actionEffect!=="buy-now"&&n(a.id);let b=k[e?.actionEffect];b&&b(),t(),o()},[e,s,c,r,n,t,u,o]),b=React.useCallback(t=>{e?.enableMessage&&(t?.[0]?.code==="INVALID"?r(t[0].message||"","error"):r(e.errorMessage||"","error"))},[e,r]);return{cartId:a,handleSuccess:k,handleError:b}};exports.useCartOperations=useCartOperations;

package/dist/cjs/product/components/product-button/hooks/useDispatchAfterSubmitEvent.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core"),React=require("react");const useDispatchAfterSubmitEvent=e=>{let{trigger:t}=core.useInteraction();return React.useCallback(()=>{let r=document.querySelector(`[data-id="${e}"]`);if(!r)return;let a=JSON.parse(r?.getAttribute("gp-interaction-after-submit")??"{}");Object.keys(a).length<=0||Object.entries(a).forEach(([a])=>{t({event:"gp:after-submit",selector:`[data-id="${e}"]`,data:Number(a),element:r})})},[e,t])};exports.useDispatchAfterSubmitEvent=useDispatchAfterSubmitEvent;
+"use strict";var core=require("@gem-sdk/core"),React=require("react");const useDispatchInteractionEvent=t=>{let{trigger:e}=core.useInteraction();return React.useCallback(()=>{let a=document.querySelector(`[data-id="${t}"]`);if(!a)return;let s=JSON.parse(a?.getAttribute("gp-interaction-after-submit")??"{}");Object.keys(s).length<=0||Object.entries(s).forEach(([s])=>{e({event:"gp:after-submit",selector:`[data-id="${t}"]`,data:Number(s),element:a})})},[t,e])},useDispatchCustomEvent=({product:t,currentVariant:e,quantity:a})=>React.useCallback(()=>{let s=new CustomEvent("gp:add-to-cart-success",{detail:{data:{product:t,variant:e,quantity:a}}});window.dispatchEvent(s)},[t,e,a]);exports.useDispatchCustomEvent=useDispatchCustomEvent,exports.useDispatchInteractionEvent=useDispatchInteractionEvent;

package/dist/cjs/product/components/product-variants/ProductVariants.liquid.js

@@ -1,5 +1,5 @@
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),Text_liquid=require("../../../text/components/Text.liquid.js"),index_liquid=require("./components/variants/index.liquid.js"),Dropdown_liquid=require("./components/dropdown-swatches/Dropdown.liquid.js"),DropdownGroup_liquid=require("./components/dropdown-group/DropdownGroup.liquid.js"),helpers=require("../../../helpers.js"),mappingVariantStyles=require("./utils/mappingVariantStyles.js"),system=require("@gem-sdk/system"),getAttr=require("./common/main/getAttr.js"),styles=require("./common/main/styles.js"),classes=require("./common/main/classes.js"),getData=require("./common/main/getData.js"),classes$1=require("./common/variants/classes.js"),_function=require("../../helpers/function.js"),styles$1=require("./common/variants/styles.js"),OptionVariantsNewFormat_liquid=require("./OptionVariantsNewFormat.liquid.js"),OptionVariantsOldFormat_liquid=require("./OptionVariantsOldFormat.liquid.js");const DEFAULT_ADVANCED_DISPLAY_SETTING={desktop:!0,tablet:!0,mobile:!0},ProductVariants=e=>{let{builderProps:t,styles:s,setting:i,advanced:a}=e,{align:o,swatchItemWidth:n,dropdownItemWidth:r,swatchSpacing:l,optionTypo:p,marginBottom:d}=s??{},{label:u,optionType:m,showAsSwatches:c,layout:y,hasPreSelected:v}=i??{},g=a?.d??DEFAULT_ADVANCED_DISPLAY_SETTING,{uid:_}=t??{},f="groupOption"===m,q=()=>{let e={};return core.DEVICES.forEach(t=>{let s=core.getResponsiveValueByScreen(n,t);e[t]="auto"===s}),e},$=()=>{let e={};return core.DEVICES.forEach(t=>{e[t]=r?.[t]==="fill"}),e},h=i?.variantPresets?mappingVariantStyles.mappingVariantStyles(i?.variantPresets,s):[],S=h?.map(e=>({...e,presets:{[e.optionType]:e.presets[e.optionType]}})),w={...i,variantPresets:S},L=e=>{let t={"'":"'",'"':"""},s=e;for(let i in t)e.indexOf(i)>=0&&(s=s.replaceAll(i,t[i]));return s},j=()=>i?.variantPresets?.map(e=>`${L(e.optionName)}($2)${e.optionType}`).join("($1)"),O=()=>i?.variantPresets?.filter(e=>!!e?.hide)?.map(e=>e.optionName).join(","),V=({showDropdown:e,isRenderDefault:t,typeOfOption:i})=>core.template`
-    ${system.LiquidFor("value in values",index_liquid.default({id:"{{option.name | escape}}-{{value | escape}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:c,uid:_,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:v?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",typeOfOption:i,activeClass:v?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...s,...w,swatchAutoWidth:q(),optionTypo:p,isRenderDefault:t}))}
+    ${system.LiquidFor("value in values",index_liquid.default({id:"{{option.name | escape | handleize}}-{{value | escape | handleize}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:c,uid:_,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:v?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",typeOfOption:i,activeClass:v?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...s,...w,swatchAutoWidth:q(),optionTypo:p,isRenderDefault:t}))}
       ${system.LiquidIf(e?'type == "dropdown"':"false",Dropdown_liquid.default({...s,...w,swatchAutoWidth:$(),optionTypo:p}))}`,D=i?.variantPresets?.map(e=>({name:L(e.optionName),type:e.optionType})).map(e=>`${e.name}($1)${e.type}`).join("($2)").toString(),A={renderVariantItem:V,variantPresetsLiquid:D??""},b=system.createClass(classes.getVariantOptionGroupClass(o)),P=system.createStyle(styles.getVariantOptionGroupStyle(l,l)),E=getData.getTextVariantTitleData(e,"Liquid"),x=system.createClass(classes$1.getWrapVariantOptionClass(y,o)),N=()=>core.template`
       ${system.Liquid(`{%- assign presets = "${j()}" | split: '($1)' -%}`)}
       ${system.Liquid(`{% assign hiddenPresetOptions = "${O()}" | split: ',' %}`)}
@@ -68,7 +68,7 @@
       <div className="${I}">
         ${DropdownGroup_liquid.default(F)}
       </div>
-    `,G=system.createAttr(getAttr.getAttrs({uid:_,hasPreSelected:v,cssClass:a?.cssClass})),k=system.createStyle(styles.getWrapperStyle(e)),W=system.createClass({"gp-flex gp-flex-col !gp-ml-0":!0}),J=()=>{let e=core.isLocalEnv?"{{ 'gp-product-variant-v7-5.js' | asset_url }}":`${core.baseAssetURL}/assets-v2/gp-product-variant-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${e}" defer="defer"></script>`};return core.template`
+    `,G=system.createAttr(getAttr.getAttrs({uid:_,hasPreSelected:v,cssClass:a?.cssClass})),k=system.createStyle(styles.getWrapperStyle(e)),z=system.createClass({"gp-flex gp-flex-col !gp-ml-0":!0}),W=()=>{let e=core.isLocalEnv?"{{ 'gp-product-variant-v7-5.js' | asset_url }}":`${core.baseAssetURL}/assets-v2/gp-product-variant-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${e}" defer="defer"></script>`};return core.template`
     ${system.Liquid("{%- assign total_combinations = 1 -%}")}
     ${system.LiquidFor("option in product.options_with_values","{%- assign total_combinations = total_combinations | times: option.values.size -%}")}
     <gp-product-variants
@@ -94,12 +94,12 @@
       ${system.Liquid("{%- assign options = product.options_with_values -%}")}
       ${system.Liquid("{%- assign variants = product.variants -%}")}
       ${system.LiquidIf("options.size == 0 or options.size == 1 and variants.size == 1 and variants[0].title == 'Default Title' and variants[0].option1 == 'Default Title'","<div></div>",core.template`<div
-            class="${W}"
+            class="${z}"
             style="${k}"
           >
           ${system.If(f,C(),N())}
         </div>`)}
     </gp-product-variants>
 
-    ${J()}
+    ${W()}
   `};exports.default=ProductVariants;

package/dist/cjs/product/components/product-variants/common/base/attrs.js

@@ -1 +1 @@
-"use strict";const getWrapperAttr=(t,a)=>{let{typeOfOption:e,available:i,optionName:p,optionNameValue:o,isVariantOutStock:n}=t;return"Liquid"===a?{id:"value-wrapper-{{option.name | escape | strip}}-{{value | escape | strip}}","option-data":"{{option.name | escape}}","option-value":"{{value | escape}}","option-position":"{{option.position}}","data-gp-option-available":"{{value.available}}","option-type":`${e||"rectangle_list"}`,"data-disabled":"{%- if option_disabled == true -%} disabled  {%- endif -%}","data-hidden":"true"}:{id:`value-wrapper-${p}-${o}`,"option-data":p||"","option-value":o||"","option-position":1,"data-gp-option-available":!!i,"option-type":`${e||"rectangle_list"}`,"data-disabled":!!n,"data-hidden":"true"}};exports.getWrapperAttr=getWrapperAttr;
+"use strict";const getWrapperAttr=(e,a)=>{let{typeOfOption:t,available:i,optionName:p,optionNameValue:o,isVariantOutStock:n}=e;return"Liquid"===a?{id:"value-wrapper-{{option.name | escape | strip | handleize}}-{{value | escape | strip | handleize}}","option-data":"{{option.name | escape}}","option-value":"{{value | escape}}","option-position":"{{option.position}}","data-gp-option-available":"{{value.available}}","option-type":`${t||"rectangle_list"}`,"data-disabled":"{%- if option_disabled == true -%} disabled  {%- endif -%}","data-hidden":"true"}:{id:`value-wrapper-${p}-${o}`,"option-data":p||"","option-value":o||"","option-position":1,"data-gp-option-available":!!i,"option-type":`${t||"rectangle_list"}`,"data-disabled":!!n,"data-hidden":"true"}};exports.getWrapperAttr=getWrapperAttr;

package/dist/esm/product/components/product-button/common/classes.js

@@ -1 +1 @@
-let getButtonClasses=({isDisabled:t,isLiquid:s})=>({"gp-cursor-default gp-opacity-30":t,"btn-disabled":t&&s}),getAddToCartButtonClasses=t=>{let{isLiquid:s=!1,isDisabled:e=!1}=t??{};return{...getButtonClasses({isDisabled:e,isLiquid:s}),"gp-button-atc tcustomizer-submit-button":s}},getSoldOutButtonClasses=t=>{let{isLiquid:s=!1}=t??{};return{...getButtonClasses({isDisabled:!0,isLiquid:s}),"gp-button-sold-out":s}},getProductPriceClasses=()=>({"gp-button-price":!0});export{getAddToCartButtonClasses,getButtonClasses,getProductPriceClasses,getSoldOutButtonClasses};
+let getButtonClasses=({isDisabled:t,isLiquid:s})=>({"gp-cursor-default gp-opacity-30":t,"btn-disabled":t&&s,"gp-add-to-cart":!s}),getAddToCartButtonClasses=t=>{let{isLiquid:s=!1,isDisabled:e=!1}=t??{};return{...getButtonClasses({isDisabled:e,isLiquid:s}),"gp-button-atc tcustomizer-submit-button":s}},getSoldOutButtonClasses=t=>{let{isLiquid:s=!1}=t??{};return{...getButtonClasses({isDisabled:!0,isLiquid:s}),"gp-button-sold-out":s}},getProductPriceClasses=()=>({"gp-button-price":!0});export{getAddToCartButtonClasses,getButtonClasses,getProductPriceClasses,getSoldOutButtonClasses};

package/dist/esm/product/components/product-button/hooks/useAddToCart.js

@@ -1 +1 @@
-import{useRenderMode as e,useProduct as t,useCurrency as r,useQuantity as i,useProductProperties as s,useCurrentVariant as n,useHasPreSelected as o,useStickyStore as a,useProductStore as u,useCreateCart as l,useAddToCart as c,convertDecimalToNumber as m,useCurrentVariantInStock as b}from"@gem-sdk/core";import{useRef as d,useEffect as f,useCallback as p}from"react";import{addToCartTracking as v}from"../../../helpers/tracking.js";import{useDispatchAfterSubmitEvent as g}from"./useDispatchAfterSubmitEvent.js";import{useCartMessage as I}from"./useCartMessage.js";import{useCartOperations as k}from"./useCartOperations.js";let useBtnAddToCart=({styles:D,setting:S,builderProps:E})=>{let h=d(null),{isEditMode:j,isPreviewSharePageMode:y}=e(),C=t(),{currency:A}=r(),{quantity:M}=i(),O=s(),w=n(),{hasPreSelected:B}=o(),T=a(e=>e.setStickyVisible),q=u(e=>e.updateIsSubmit),x=g(E?.uid),{showMessage:L,notiComponent:U}=I(D,S),{handleSuccess:V,handleError:z,cartId:F}=k(S,L,x),{isMutating:G,trigger:H}=l({onSuccess:V,onError:z}),{isMutating:J,trigger:K}=c({onSuccess:V,onError:z});f(()=>{let e=new IntersectionObserver(e=>{let t=e[0];T(t?.isIntersecting)},{threshold:.1}),t=h.current;return h.current&&e.observe(h.current),()=>{t&&e.unobserve(t)}},[T]);let N=p(()=>{if(!w?.baseID||!M||!C?.baseID||void 0!==B&&!B||j||y)return;let e=O?.some(e=>e.required&&!e.value);if(q(!0),e)return;let t=O?.filter(e=>!!e.value)?.map(e=>({key:e.key,value:e.value}));v({quantity:M,currency:A,id:C?.baseID,name:C?.title,brand:C?.vendor,sku:w.sku,price:m(w?.price),variant:w.title});let r={quantity:M,attributes:t,variantId:w.baseID};S?.actionEffect!=="buy-now"&&F?K({cartId:F,lines:[r]}):H({items:[r]})},[j,y,F,A,M,O,B,C?.title,C?.vendor,C?.baseID,w?.sku,w?.price,w?.title,w?.baseID,S?.actionEffect,H,K,q]),P=b(),Q=G||J,R=w?S?.outOfStockLabel:"Unavailable";return{addToCartRef:h,isLoading:Q,isInStock:P,notiComponent:U,outOfStockLabel:R,addToCart:N}};export{useBtnAddToCart};
+import{useRenderMode as e,useProduct as t,useCurrency as r,useQuantity as i,useProductProperties as s,useCurrentVariant as n,useHasPreSelected as o,useStickyStore as a,useProductStore as u,useCreateCart as l,useAddToCart as c,convertDecimalToNumber as m,useCurrentVariantInStock as b}from"@gem-sdk/core";import{useRef as d,useEffect as f,useCallback as p}from"react";import{addToCartTracking as v}from"../../../helpers/tracking.js";import{useDispatchInteractionEvent as g,useDispatchCustomEvent as I}from"./useDispatchAfterSubmitEvent.js";import{useCartMessage as k}from"./useCartMessage.js";import{useCartOperations as D}from"./useCartOperations.js";let useBtnAddToCart=({styles:S,setting:E,builderProps:h})=>{let j=d(null),{isEditMode:y,isPreviewSharePageMode:C}=e(),A=t(),{currency:M}=r(),{quantity:O}=i(),w=s(),B=n(),{hasPreSelected:T}=o(),q=a(e=>e.setStickyVisible),x=u(e=>e.updateIsSubmit),L=g(h?.uid),U=I({product:A,currentVariant:B,quantity:O}),{showMessage:V,notiComponent:z}=k(S,E),{handleSuccess:F,handleError:G,cartId:H}=D({setting:E,showMessage:V,dispatchInteractionEvent:L,dispatchCustomEvent:U}),{isMutating:J,trigger:K}=l({onSuccess:F,onError:G}),{isMutating:N,trigger:P}=c({onSuccess:F,onError:G});f(()=>{let e=new IntersectionObserver(e=>{let t=e[0];q(t?.isIntersecting)},{threshold:.1}),t=j.current;return j.current&&e.observe(j.current),()=>{t&&e.unobserve(t)}},[q]);let Q=p(()=>{if(!B?.baseID||!O||!A?.baseID||void 0!==T&&!T||y||C)return;let e=w?.some(e=>e.required&&!e.value);if(x(!0),e)return;let t=w?.filter(e=>!!e.value)?.map(e=>({key:e.key,value:e.value}));v({quantity:O,currency:M,id:A?.baseID,name:A?.title,brand:A?.vendor,sku:B.sku,price:m(B?.price),variant:B.title});let r={quantity:O,attributes:t,variantId:B.baseID};E?.actionEffect!=="buy-now"&&H?P({cartId:H,lines:[r]}):K({items:[r]})},[y,C,H,M,O,w,T,A?.title,A?.vendor,A?.baseID,B?.sku,B?.price,B?.title,B?.baseID,E?.actionEffect,K,P,x]),R=b(),W=J||N,X=B?E?.outOfStockLabel:"Unavailable";return{addToCartRef:j,isLoading:W,isInStock:R,notiComponent:z,outOfStockLabel:X,addToCart:Q}};export{useBtnAddToCart};

package/dist/esm/product/components/product-button/hooks/useCartOperations.js

@@ -1 +1 @@
-import{useCallback as e}from"react";import{useCartUI as o,useStoreFront as r,useCartId as t}from"@gem-sdk/core";let useCartOperations=(s,c,n)=>{let{openCart:a}=o(),{storefrontToken:i}=r(),{cartId:l,updateCartId:u}=t(),k=e((e,o)=>{e?.enableMessage&&o(e.successMessage||"","success"),a()},[a]),m=(e,o)=>{if(!e.checkoutUrl)return;let r=o?`${e.checkoutUrl}?access_token=${o}`:e.checkoutUrl;window.location.href=r},f=e=>{e?.customURL?.link&&("_blank"===e.customURL.target?window.open(e.customURL.link,"_blank"):window.location.href=e.customURL.link)},g=e(e=>{let o={"open-cart-drawer":()=>a(),"go-to-url":()=>f(s),"buy-now":()=>m(e,i),"continue-shopping":()=>k(s,c)};s?.actionEffect!=="buy-now"&&u(e.id);let r=o[s?.actionEffect];r&&r(),n()},[s,i,a,c,u,n,k]),p=e(e=>{s?.enableMessage&&(e?.[0]?.code==="INVALID"?c(e[0].message||"","error"):c(s.errorMessage||"","error"))},[s,c]);return{cartId:l,handleSuccess:g,handleError:p}};export{useCartOperations};
+import{useCallback as e}from"react";import{useCartUI as o,useStoreFront as r,useCartId as t}from"@gem-sdk/core";let useCartOperations=({setting:s,showMessage:c,dispatchInteractionEvent:n,dispatchCustomEvent:a})=>{let{openCart:i}=o(),{storefrontToken:l}=r(),{cartId:u,updateCartId:k}=t(),m=e((e,o)=>{e?.enableMessage&&o(e.successMessage||"","success"),i()},[i]),f=(e,o)=>{if(!e.checkoutUrl)return;let r=o?`${e.checkoutUrl}?access_token=${o}`:e.checkoutUrl;window.location.href=r},g=e=>{e?.customURL?.link&&("_blank"===e.customURL.target?window.open(e.customURL.link,"_blank"):window.location.href=e.customURL.link)},p=e(e=>{let o={"open-cart-drawer":()=>i(),"go-to-url":()=>g(s),"buy-now":()=>f(e,l),"continue-shopping":()=>m(s,c)};s?.actionEffect!=="buy-now"&&k(e.id);let r=o[s?.actionEffect];r&&r(),n(),a()},[s,l,i,c,k,n,m,a]),w=e(e=>{s?.enableMessage&&(e?.[0]?.code==="INVALID"?c(e[0].message||"","error"):c(s.errorMessage||"","error"))},[s,c]);return{cartId:u,handleSuccess:p,handleError:w}};export{useCartOperations};

package/dist/esm/product/components/product-button/hooks/useDispatchAfterSubmitEvent.js

@@ -1 +1 @@
-import{useInteraction as t}from"@gem-sdk/core";import{useCallback as e}from"react";let useDispatchAfterSubmitEvent=r=>{let{trigger:i}=t();return e(()=>{let t=document.querySelector(`[data-id="${r}"]`);if(!t)return;let e=JSON.parse(t?.getAttribute("gp-interaction-after-submit")??"{}");Object.keys(e).length<=0||Object.entries(e).forEach(([e])=>{i({event:"gp:after-submit",selector:`[data-id="${r}"]`,data:Number(e),element:t})})},[r,i])};export{useDispatchAfterSubmitEvent};
+import{useInteraction as t}from"@gem-sdk/core";import{useCallback as e}from"react";let useDispatchInteractionEvent=a=>{let{trigger:r}=t();return e(()=>{let t=document.querySelector(`[data-id="${a}"]`);if(!t)return;let e=JSON.parse(t?.getAttribute("gp-interaction-after-submit")??"{}");Object.keys(e).length<=0||Object.entries(e).forEach(([e])=>{r({event:"gp:after-submit",selector:`[data-id="${a}"]`,data:Number(e),element:t})})},[a,r])},useDispatchCustomEvent=({product:t,currentVariant:a,quantity:r})=>e(()=>{let e=new CustomEvent("gp:add-to-cart-success",{detail:{data:{product:t,variant:a,quantity:r}}});window.dispatchEvent(e)},[t,a,r]);export{useDispatchCustomEvent,useDispatchInteractionEvent};

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

@@ -1,8 +1,8 @@
-import{template as e,isLocalEnv as t,baseAssetURL as s,DEVICES as i,getResponsiveValueByScreen as o}from"@gem-sdk/core";import a from"../../../text/components/Text.liquid.js";import n from"./components/variants/index.liquid.js";import r from"./components/dropdown-swatches/Dropdown.liquid.js";import p from"./components/dropdown-group/DropdownGroup.liquid.js";import{getSettingPreloadData as l}from"../../../helpers.js";import{mappingVariantStyles as d}from"./utils/mappingVariantStyles.js";import{createClass as m,createStyle as c,createAttr as u,Liquid as v,LiquidFor as f,LiquidIf as _,If as $}from"@gem-sdk/system";import{getAttrs as g}from"./common/main/getAttr.js";import{getVariantOptionGroupStyle as h,getWrapperStyle as y}from"./common/main/styles.js";import{getVariantOptionGroupClass as j,getWrapDropdownClass as w}from"./common/main/classes.js";import{getTextVariantTitleData as S,getDropdownGroupData as P}from"./common/main/getData.js";import{getWrapVariantOptionClass as b}from"./common/variants/classes.js";import{getStyleOfObject as A}from"../../helpers/function.js";import{getMarginBottomStyle as D}from"./common/variants/styles.js";import{renderOptionValuesNewFormatSwatches as N}from"./OptionVariantsNewFormat.liquid.js";import{renderOptionValuesOld as V}from"./OptionVariantsOldFormat.liquid.js";let DEFAULT_ADVANCED_DISPLAY_SETTING={desktop:!0,tablet:!0,mobile:!0},ProductVariants=E=>{let{builderProps:O,styles:T,setting:x,advanced:q}=E,{align:F,swatchItemWidth:G,dropdownItemWidth:C,swatchSpacing:I,optionTypo:k,marginBottom:L}=T??{},{label:J,optionType:z,showAsSwatches:M,layout:U,hasPreSelected:W}=x??{},R=q?.d??DEFAULT_ADVANCED_DISPLAY_SETTING,{uid:Y}=O??{},H="groupOption"===z,K=()=>{let e={};return i.forEach(t=>{let s=o(G,t);e[t]="auto"===s}),e},Q=()=>{let e={};return i.forEach(t=>{e[t]=C?.[t]==="fill"}),e},B=x?.variantPresets?d(x?.variantPresets,T):[],X=B?.map(e=>({...e,presets:{[e.optionType]:e.presets[e.optionType]}})),Z={...x,variantPresets:X},ee=e=>{let t={"'":"'",'"':"""},s=e;for(let i in t)e.indexOf(i)>=0&&(s=s.replaceAll(i,t[i]));return s},et=()=>x?.variantPresets?.map(e=>`${ee(e.optionName)}($2)${e.optionType}`).join("($1)"),es=()=>x?.variantPresets?.filter(e=>!!e?.hide)?.map(e=>e.optionName).join(","),ei=({showDropdown:t,isRenderDefault:s,typeOfOption:i})=>e`
-    ${f("value in values",n({id:"{{option.name | escape}}-{{value | escape}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:M,uid:Y,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:W?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",typeOfOption:i,activeClass:W?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...T,...Z,swatchAutoWidth:K(),optionTypo:k,isRenderDefault:s}))}
-      ${_(t?'type == "dropdown"':"false",r({...T,...Z,swatchAutoWidth:Q(),optionTypo:k}))}`,eo=x?.variantPresets?.map(e=>({name:ee(e.optionName),type:e.optionType})).map(e=>`${e.name}($1)${e.type}`).join("($2)").toString(),ea={renderVariantItem:ei,variantPresetsLiquid:eo??""},en=m(j(F)),er=c(h(I,I)),ep=S(E,"Liquid"),el=m(b(U,F)),ed=()=>e`
+import{template as e,isLocalEnv as t,baseAssetURL as i,DEVICES as s,getResponsiveValueByScreen as o}from"@gem-sdk/core";import a from"../../../text/components/Text.liquid.js";import n from"./components/variants/index.liquid.js";import r from"./components/dropdown-swatches/Dropdown.liquid.js";import p from"./components/dropdown-group/DropdownGroup.liquid.js";import{getSettingPreloadData as l}from"../../../helpers.js";import{mappingVariantStyles as d}from"./utils/mappingVariantStyles.js";import{createClass as m,createStyle as c,createAttr as u,Liquid as v,LiquidFor as f,LiquidIf as _,If as $}from"@gem-sdk/system";import{getAttrs as g}from"./common/main/getAttr.js";import{getVariantOptionGroupStyle as h,getWrapperStyle as y}from"./common/main/styles.js";import{getVariantOptionGroupClass as j,getWrapDropdownClass as w}from"./common/main/classes.js";import{getTextVariantTitleData as S,getDropdownGroupData as P}from"./common/main/getData.js";import{getWrapVariantOptionClass as b}from"./common/variants/classes.js";import{getStyleOfObject as A}from"../../helpers/function.js";import{getMarginBottomStyle as D}from"./common/variants/styles.js";import{renderOptionValuesNewFormatSwatches as N}from"./OptionVariantsNewFormat.liquid.js";import{renderOptionValuesOld as V}from"./OptionVariantsOldFormat.liquid.js";let DEFAULT_ADVANCED_DISPLAY_SETTING={desktop:!0,tablet:!0,mobile:!0},ProductVariants=E=>{let{builderProps:O,styles:T,setting:x,advanced:q}=E,{align:F,swatchItemWidth:G,dropdownItemWidth:C,swatchSpacing:I,optionTypo:k,marginBottom:z}=T??{},{label:L,optionType:J,showAsSwatches:M,layout:U,hasPreSelected:W}=x??{},R=q?.d??DEFAULT_ADVANCED_DISPLAY_SETTING,{uid:Y}=O??{},H="groupOption"===J,K=()=>{let e={};return s.forEach(t=>{let i=o(G,t);e[t]="auto"===i}),e},Q=()=>{let e={};return s.forEach(t=>{e[t]=C?.[t]==="fill"}),e},B=x?.variantPresets?d(x?.variantPresets,T):[],X=B?.map(e=>({...e,presets:{[e.optionType]:e.presets[e.optionType]}})),Z={...x,variantPresets:X},ee=e=>{let t={"'":"'",'"':"""},i=e;for(let s in t)e.indexOf(s)>=0&&(i=i.replaceAll(s,t[s]));return i},et=()=>x?.variantPresets?.map(e=>`${ee(e.optionName)}($2)${e.optionType}`).join("($1)"),ei=()=>x?.variantPresets?.filter(e=>!!e?.hide)?.map(e=>e.optionName).join(","),es=({showDropdown:t,isRenderDefault:i,typeOfOption:s})=>e`
+    ${f("value in values",n({id:"{{option.name | escape | handleize}}-{{value | escape | handleize}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:M,uid:Y,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:W?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",typeOfOption:s,activeClass:W?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...T,...Z,swatchAutoWidth:K(),optionTypo:k,isRenderDefault:i}))}
+      ${_(t?'type == "dropdown"':"false",r({...T,...Z,swatchAutoWidth:Q(),optionTypo:k}))}`,eo=x?.variantPresets?.map(e=>({name:ee(e.optionName),type:e.optionType})).map(e=>`${e.name}($1)${e.type}`).join("($2)").toString(),ea={renderVariantItem:es,variantPresetsLiquid:eo??""},en=m(j(F)),er=c(h(I,I)),ep=S(E,"Liquid"),el=m(b(U,F)),ed=()=>e`
       ${v(`{%- assign presets = "${et()}" | split: '($1)' -%}`)}
-      ${v(`{% assign hiddenPresetOptions = "${es()}" | split: ',' %}`)}
+      ${v(`{% assign hiddenPresetOptions = "${ei()}" | split: ',' %}`)}
       
       ${v(`{% assign all_option_names = options | map: 'name' %}
       {% assign filtered_options_string = '' %}
@@ -33,7 +33,7 @@ import{template as e,isLocalEnv as t,baseAssetURL as s,DEVICES as i,getResponsiv
         <div
         option-name="{{option.name | escape}}"
         class="${el} ${_("hiddenPresetOptions contains option.name","gp-hidden")}"
-        style="${A(D(L))}${v("{% if forloop.last or option.name == last_option_name %}--mb:0;--mb-mobile:0;--mb-tablet:0;{% endif %}")}"
+        style="${A(D(z))}${v("{% if forloop.last or option.name == last_option_name %}--mb:0;--mb-mobile:0;--mb-tablet:0;{% endif %}")}"
         >
           ${v("{%- assign showVariantClass = 'variant-display' -%}")}
           ${v("{%- assign optionName = option.name  -%}")}
@@ -41,7 +41,7 @@ import{template as e,isLocalEnv as t,baseAssetURL as s,DEVICES as i,getResponsiv
             ${v("{%- assign presetDetail = preset | split: '($2)' -%}")}
             ${_("presetDetail[1] == 'dropdown' and presetDetail[0] == optionName",`${v("{%- assign showVariantClass = '' -%}")} ${v("{%- break -%}")}`)}
           `)}
-          ${$(J,a(ep)," ")}
+          ${$(L,a(ep)," ")}
           <div
               variant-option-name="{{option.name | escape}}"
               class="${en}"
@@ -59,7 +59,7 @@ import{template as e,isLocalEnv as t,baseAssetURL as s,DEVICES as i,getResponsiv
                 {%- endif -%}
               `)}
               ${$(!W,v("{%- assign selectedValue = null -%}"),"")}
-              ${$(M,em(),ei({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
+              ${$(M,em(),es({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
           </div>
       </div>`)}
     `,em=()=>e`
@@ -68,7 +68,7 @@ import{template as e,isLocalEnv as t,baseAssetURL as s,DEVICES as i,getResponsiv
       <div className="${ec}">
         ${p(eu)}
       </div>
-    `,ef=u(g({uid:Y,hasPreSelected:W,cssClass:q?.cssClass})),e_=c(y(E)),e$=m({"gp-flex gp-flex-col !gp-ml-0":!0}),eg=()=>{let e=t?"{{ 'gp-product-variant-v7-5.js' | asset_url }}":`${s}/assets-v2/gp-product-variant-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${l('class="gps-link" delay',"src")}="${e}" defer="defer"></script>`};return e`
+    `,ef=u(g({uid:Y,hasPreSelected:W,cssClass:q?.cssClass})),e_=c(y(E)),e$=m({"gp-flex gp-flex-col !gp-ml-0":!0}),eg=()=>{let e=t?"{{ 'gp-product-variant-v7-5.js' | asset_url }}":`${i}/assets-v2/gp-product-variant-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${l('class="gps-link" delay',"src")}="${e}" defer="defer"></script>`};return e`
     ${v("{%- assign total_combinations = 1 -%}")}
     ${f("option in product.options_with_values","{%- assign total_combinations = total_combinations | times: option.values.size -%}")}
     <gp-product-variants

package/dist/esm/product/components/product-variants/common/base/attrs.js

@@ -1 +1 @@
-let getWrapperAttr=(a,e)=>{let{typeOfOption:t,available:i,optionName:p,optionNameValue:o,isVariantOutStock:n}=a;return"Liquid"===e?{id:"value-wrapper-{{option.name | escape | strip}}-{{value | escape | strip}}","option-data":"{{option.name | escape}}","option-value":"{{value | escape}}","option-position":"{{option.position}}","data-gp-option-available":"{{value.available}}","option-type":`${t||"rectangle_list"}`,"data-disabled":"{%- if option_disabled == true -%} disabled  {%- endif -%}","data-hidden":"true"}:{id:`value-wrapper-${p}-${o}`,"option-data":p||"","option-value":o||"","option-position":1,"data-gp-option-available":!!i,"option-type":`${t||"rectangle_list"}`,"data-disabled":!!n,"data-hidden":"true"}};export{getWrapperAttr};
+let getWrapperAttr=(a,e)=>{let{typeOfOption:t,available:i,optionName:p,optionNameValue:o,isVariantOutStock:n}=a;return"Liquid"===e?{id:"value-wrapper-{{option.name | escape | strip | handleize}}-{{value | escape | strip | handleize}}","option-data":"{{option.name | escape}}","option-value":"{{value | escape}}","option-position":"{{option.position}}","data-gp-option-available":"{{value.available}}","option-type":`${t||"rectangle_list"}`,"data-disabled":"{%- if option_disabled == true -%} disabled  {%- endif -%}","data-hidden":"true"}:{id:`value-wrapper-${p}-${o}`,"option-data":p||"","option-value":o||"","option-position":1,"data-gp-option-available":!!i,"option-type":`${t||"rectangle_list"}`,"data-disabled":!!n,"data-hidden":"true"}};export{getWrapperAttr};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "12.0.0-staging.50",
+  "version": "12.0.0-staging.51",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,9 +25,9 @@
     "i18n:extract": "rollup -c ./scripts/rollup.config.settings.mjs && node ./scripts/translate/extract-texts-to-locales.js && node ./scripts/translate/en-keys-usage.js"
   },
   "devDependencies": {
-    "@gem-sdk/core": "12.0.0-staging.50",
-    "@gem-sdk/styles": "12.0.0-staging.50",
-    "@gem-sdk/system": "12.0.0-staging.50",
+    "@gem-sdk/core": "12.0.0-staging.51",
+    "@gem-sdk/styles": "12.0.0-staging.51",
+    "@gem-sdk/system": "12.0.0-staging.51",
     "@types/react-transition-group": "^4.4.12",
     "tsup": "^8.5.0",
     "postcss-import": "^16.1.1",