yt-uikit 0.8.23-volume-bundle-variant-init.1 → 0.8.23-volume-bundle-variant-init.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +1 -1
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -3884,7 +3884,7 @@ import*as e from"react";import t,{forwardRef as n,useImperativeHandle as r,useRe
|
|
|
3884
3884
|
scrollbar-width: none;
|
|
3885
3885
|
|
|
3886
3886
|
-ms-overflow-style: none;
|
|
3887
|
-
`,Ff=(e,t)=>{if(!t)return{};for(const n of t)if(n.productId==e)return n;return{}};function Mf({bundle:e,addToCartFunction:n,currentProductId:r}){const s=i((()=>{if(r){const t="gid://shopify/Product/"+r,n=e.products?.some((e=>e.productId===t));return n?t:e.products?.[0]?.productId}return e.products?.[0]?.productId}),[r,e.products]),d=i((()=>Ff(s,e.products)),[s,e.products]),p=o(null),u=o(null),m=o({});document.querySelector("#ProductSelect-product-template"),document.querySelector('form[action="/cart/add"]');const[f,g]=c(0),[x,h]=c(""),y=e.customizations??{},b=!1===y?.general?.showDecimalsInBundlePricing,v=i((()=>d?.productDetails?.tracksInventory??!0),[d?.productDetails?.tracksInventory]),w=a((e=>{if(!v)return 1/0;if(!e)return 0;if(!e.inventoryItem?.tracked)return 1/0;let t=e.inventoryQuantity??0;return t>0?t:"continue"===e.inventoryPolicy?1/0:0}),[v]),C=(i((()=>d?.productDetails?.variants?.edges?.reduce(((e,{node:t})=>w(t)>0?e+1:e),0)),[d,w]),i((()=>Ff(s,e.products)?.id),[s,e.products]));i((()=>C?Ff(s,e.products):void 0),[s,e.products,C]),i((()=>e.products?.some((e=>e.productDetails?.options?.some((e=>e.values.length>1))))||!1),[e.products]),y.volumeBundle;const k=i((()=>e?.volumeTiers||[]),[e?.volumeTiers]),E=k.findIndex((e=>e.isDefault)),[S,T]=c(-1!==E?k[E].tier:k?.[0]?.tier||1),[$,B]=c(d?.productDetails?.variants?.edges?.find((e=>w(e?.node)>0))?.node?.id||d?.productDetails?.variants?.edges?.[0]?.node?.id||""),[z,N]=c({}),[I,D]=c(k.reduce(((e,t,n)=>(e[t.tier-1]=Array.from({length:t.minimumQuantity},(()=>d?.productDetails?.options?.map((e=>e.values[0]))||[])),e)),{})||{}),[_,P]=c(!1),[O,A]=c(window.innerWidth<550),[F,M]=c(null),[R,L]=c(null);o([]);const j=o([]),V=o(S);l((()=>{const e=()=>{A(window.innerWidth<550)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),l((()=>{const e=e=>{F&&j.current[F.index]&&j.current[F.index][F.optionIndex]&&!j.current[F.index][F.optionIndex]?.contains(e.target)&&M(null)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[F]);const W=a((e=>{const t=k.find((t=>t.tier===e));if(!t)return null;const n=t.minimumQuantity,r=d?.productDetails?.variants?.edges||[];for(const e of r){const t=e.node;if(w(t)>=n){const e=t.title.split(" / ");return Array(n).fill(e)}}const o=[],a={},i=[...r].sort(((e,t)=>{const n=w(e.node),r=w(t.node);return n===1/0&&r===1/0?0:n===1/0?-1:r===1/0?1:r-n}));for(let e=0;e<n&&o.length<n;e++){let e=!1;for(const t of i){const n=t.node,r=a[n.id]||0;if(w(n)>r&&n.availableForSale){const t=n.title.split(" / ");o.push(t),a[n.id]=r+1,e=!0;break}}if(!e)return null}return o.length===n?o:null}),[d,k,w]),H=a((e=>{const t=k.find((t=>t.tier===e));if(!t)return!1;const n=t.minimumQuantity,r=d?.productDetails?.variants?.edges||[];let o=0;for(const e of r){const t=w(e.node);if(t===1/0){o=1/0;break}o+=t}return o>=n}),[k,d,w]);l((()=>{const e={},t=d?.productDetails?.variants?.edges?.find((e=>w(e?.node)>0))?.node?.id||d?.productDetails?.variants?.edges?.[0]?.node?.id||"";t&&k.forEach((n=>{e[n.tier]={};for(let r=0;r<n.minimumQuantity;r++)e[n.tier][r]=t})),N(e)}),[d?.id,k?.map((e=>`${e.tier}-${e.minimumQuantity}`)).join("|"),w]),l((()=>{if(!m.current[S]){const e=W(S);if(e){const t=S-1;D((n=>({...n,[t]:e})));const n={};e.forEach(((e,t)=>{const r=e.join(" / "),o=d?.productDetails?.variants?.edges?.find((e=>e.node.title===r))?.node.id||$;n[t]=o})),N((e=>({...e,[S]:n})))}m.current[S]=!0}}),[S,d,$,W]);const q=(e,t)=>e?.productDetails?.variants?.edges?.find((e=>e.node.id===t))?.node,U=a(((e,t,n,r,o)=>{const a=k.find((t=>t.tier===e));if(!a)return!1;const i=a.minimumQuantity,l=[...n];l[r]=o;const c=l.join(" / "),s=d?.productDetails?.variants?.edges?.find((e=>e.node.title===c))?.node;if(!s||0===w(s))return!1;const p={},u=z[e]||{};for(let e=0;e<i;e++){let n;if(e===t)n=s.id;else{const t=u[e]||$,r=q(d,t);if(!r)return!1;n=r.id}p[n]=(p[n]||0)+1}for(const[e,t]of Object.entries(p)){const n=q(d,e),r=w(n);if(r!==1/0&&t>r)return!1}return!0}),[k,d,I,I,z,$,w]),Q=a((e=>{const t=k.find((t=>t.tier===e));if(!t)return!1;const n=t.minimumQuantity,r=e-1,o={};for(let e=0;e<n;e++){const t=(I[r]?.[e]||d.productDetails.options.map((e=>e.values[0]))).join(" / "),n=d?.productDetails?.variants?.edges?.find((e=>e.node.title===t));if(!n)return!1;const a=n.node.id;o[a]=(o[a]||0)+1}for(const[e,t]of Object.entries(o)){const n=q(d,e),r=w(n);if(r!==1/0&&t>r)return!1}return!0}),[k,d,I,w]);l((()=>{g((e=>e+1))}),[z]);const Y=(e,t,n)=>{N((r=>({...r,[e]:{...r[e]||{},[t]:n}})))},G=a((()=>d?.productDetails?.variants?.edges?.find((e=>w(e.node)>0))?.node||d?.productDetails?.variants?.edges?.[0]?.node),[d,w]),Z=a((()=>new URLSearchParams(window.location.search).get("variant")||""),[]);l((()=>{V.current=S}),[S]),l((()=>{R?(L(null),X()):X()}),[S]),l((()=>{if(e){const e=G();if(e)h(e.id),B(e.id);else{const e=d?.productDetails?.variants?.edges?.[0]?.node?.id||"";h(e),B(e)}}}),[e,d,G]);const X=()=>{const e=Z();if(e){const t=d?.productDetails?.variants?.edges?.find((t=>String(t.node.id)==="gid://shopify/ProductVariant/"+String(e)));console.log("handleUrlChange : variantFromUrl",e),console.log("handleUrlChange : variantEdge",t);let n=t?.node;if(n)B(String(n.id)),g((e=>e+1));else{const e=G();e&&(B(String(e.id)),n=e),g((e=>e+1))}if(n){0===w(n)?(L(null),setTimeout((()=>{L({tier:V.current,index:0,optionIndex:0,value:n.title})}),0)):R&&L(null)}}};l((()=>{X();const e=new Event("urlChange");let t=!0;const n=window.history.pushState,r=window.history.replaceState;return window.history.pushState=function(){t&&(n.apply(this,arguments),window.dispatchEvent(e))},window.history.replaceState=function(){t&&(r.apply(this,arguments),window.dispatchEvent(e))},window.addEventListener("urlChange",X),()=>{t=!1,window.removeEventListener("urlChange",X),window.history.pushState=n,window.history.replaceState=r}}),[Z,d?.id,G,w]);const K=t=>{const n=k.find((e=>e.tier===t));if(!n)return{original:0,discounted:0};let r=0,o=0;const a=z[t]||{};for(let e=0;e<n.minimumQuantity;e++){const t=a[e]||$,n=q(d,t);n&&(n.compareAtPrice?r+=Number.parseFloat(n.compareAtPrice):r+=Number.parseFloat(n.price),o+=Number.parseFloat(n.price))}return"percentOff"===e?.discountType?o*=1-n.discountValue/100:"amountOff"===e?.discountType&&(o-=n.discountValue),o<0&&(o=0),{original:r,discounted:o,discountValue:n.discountValue}},J=(e,t,n,r)=>{let o=q(e,t);if(r){const a=z[r]?.[n||0]||t;o=q(e,a)}return o?.image?.url?o.image.url:e.productDetails?.media?.edges[0]?.node?.preview?.image?.url||""};function ee(e){if(e.startsWith("gid://")){const t=e.split("/");return t[t.length-1]}return e}l((()=>{const e=()=>{if("shopify_atc_button"!==y.volumeBundle?.addtoCartMethod&&"06cf02-81.myshopify.com"!==window.ytBundleApp?.storeDomain)return;const e=document.querySelector('form[action="/cart/add"]');if(!e)return;const t=document.querySelector("#Quantity-product-template")||document.querySelector('input[name="quantity"]')||document.querySelector('input[type="number"][min="1"]');let n=1;t&&t.value&&(n=parseInt(t.value,10)||1);const r=k.find((e=>e.tier===S));if(!r)return;e.querySelectorAll('.bundle-input-field, [name^="properties["], [name="id"], [name="quantity"]').forEach((e=>e.remove()));const o=r.minimumQuantity;let a={};const i=Math.max(o,n);if("vertical"===y.volumeBundle.cardStyle){const e=x||$;if(!e)return;a[e]=i}else if(n>o){const e=x||$;if(!e)return;a[e]=i}else{const e=z[r.tier]||{};for(let t=0;t<o;t++){let n=e[t];n||(n=$),n&&(a[n]=(a[n]||0)+1)}}const l=K(r.tier),c=Object.fromEntries(Object.entries(a).map((([e,t])=>[ee(e),Math.round(t)]))),s=(t,n,r="bundle-input-field")=>{const o=document.createElement("input");o.type="hidden",o.name=t,o.value=n,o.className=r,e.appendChild(o)};if(n>o){const e=x||$;e&&s("id",ee(e))}s("properties[_bundle_price]",String(l.original)),s("properties[_bundle_tier]",String(r.tier)),s("properties[_bundle_items]",JSON.stringify(c));let d=0;Object.entries(c).forEach((([e,t])=>{t>0&&(s(`items[${d}][id]`,e),s(`items[${d}][quantity]`,String(t)),d++)})),requestAnimationFrame((()=>{const t=e.querySelector('[type="submit"]'),r=e.querySelector('[name="checkout"]'),a=e.querySelector(".noti-btn-main-wrap"),i=(e,t,n)=>{if(!e)return;e.disabled=t,e.classList.toggle("disabled",t);const r=e.querySelector("[data-add-to-cart-text]")||e.querySelector("span");r&&(r.textContent=n)};n<=o&&(R?(i(t,!0,"Sold out"),i(r,!0,"Sold out"),t&&t.classList.add("btn--sold-out","hidden"),a&&(a.style.display="block",a.classList.remove("hidden"),a.classList.add("block"))):(i(t,!1,"Add to cart"),i(r,!1,"Buy it now"),t&&t.classList.remove("btn--sold-out","hidden"),a&&(a.style.display="none",a.classList.add("hidden"))))}))};e();const t=document.querySelector("#Quantity-product-template")||document.querySelector('input[name="quantity"]')||document.querySelector('input[type="number"][min="1"]');if(t){const n=()=>{requestAnimationFrame((()=>{e()}))};return t.addEventListener("input",n),t.addEventListener("change",n),()=>{t.removeEventListener("input",n),t.removeEventListener("change",n)}}return()=>{}}),[S,JSON.stringify(z),$,y.volumeBundle?.cardStyle,r,x,R]);const te=i((()=>k.find((e=>e.tier===S))),[k,S]),ne=i((()=>te?K(te.tier):null),[te,z,$]),re=i((()=>{if(!te||!ne)return;const e=z[te.tier]||{},t={};for(let n=0;n<te.minimumQuantity;n++){const r=e[n]||$;t[r]=(t[r]||0)+1}return t}),[te?.minimumQuantity,$,z,ne]),oe=i((()=>Object.entries(re??{}).map((([e,t])=>({variantId:e,quantity:t})))),[re]);if(l((()=>{if(!te||!ne)return;const e={tier:S,items:te.minimumQuantity,discountedPrice:ne.discounted,originalPrice:ne.original,variants:oe,productId:d?.id??null,tierMeta:{title:te.title,subtitle:te.subtitle,badgeTitle:te.badgeTitle},productData:d,tierData:te},t=u.current;return t&&JSON.stringify(t)===JSON.stringify(e)?void 0:(p.current&&clearTimeout(p.current),p.current=window.setTimeout((()=>{u.current=e;const t=new CustomEvent("ytBundleTierChange",{detail:e});window.dispatchEvent(t)}),50),()=>{p.current&&clearTimeout(p.current)})}),[S,te?.tier,te?.minimumQuantity,ne?.discounted,ne?.original,d?.id,JSON.stringify(oe)]),l((()=>{if(!$||!te)return;const e=q(d,$);if(!e)return;const t={};for(let e=0;e<te.minimumQuantity;e++)t[e]=$;N((e=>({...e,[S]:{...t}})));const n=e.title.split(" / "),r=Array.from({length:te.minimumQuantity},(()=>[...n]));D((e=>({...e,[S-1]:r})))}),[$,S,d,te]),!n)return t.createElement(t.Fragment,null);const ae=y.volumeBundle?.cardStyle,ie=y.general?.primaryColor,le=y.general?.secondaryColor,ce=y.general.primaryContrastColor,se=y.general.secondaryContrastColor,de="high"===e.cornerRadiusType?"20px":"medium"===e.cornerRadiusType?"6px":"0px",pe="bundles"==e.appName?e.pageHeader?.title:e?.title,ue="bundles"==e.appName?e.pageHeader?.description:e?.subtitle;return l((()=>{Q(S)&&R?.tier===S&&L(null)}),[S,oe,Q,R]),t.createElement(cf,{verticalMargin:y.volumeBundle?.verticalMargin,$backgroundColor:y.volumeBundle?.sectionBackgroundColor,className:"yt-bundle-container"},t.createElement(sf,{className:"yt-bundle-header"},pe&&pe.trim().length>0&&t.createElement(df,{fontSize:y.volumeBundle?.titleFontSize,$backgroundColor:y.volumeBundle?.titleBackgroundColor,textColor:y.volumeBundle?.titleTextColor,className:"yt-bundle-header-title"},pe),t.createElement(pf,{className:"yt-bundle-header-subtitle",fontSize:y.volumeBundle?.subtitleFontSize},ue)),"vertical"===ae?t.createElement("div",{style:{display:"grid",gridTemplateColumns:O||4===k.length?"repeat(2, 1fr)":k.length>4?"repeat(3, 1fr)":`repeat(${k.length}, 1fr)`,justifyItems:"center",gap:O?"10px":"16px",paddingTop:"10px"},className:"yt-bundle-vertical-container"},k.map((n=>{const r=K(n.tier),o=r.original-r.discounted,a=S===n.tier,i=!H(n.tier);return t.createElement(t.Fragment,{key:n.tier},t.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"8px",borderRadius:de||"24px",...a?{border:`2px solid ${ie}`}:{border:`1px solid ${le}`},boxShadow:`6px 6px 0px -1px ${a?ie:le}20`,...n.badgeTitle&&{position:"relative"},zIndex:5,backgroundColor:i?"#f5f5f5":"white",cursor:i?"not-allowed":"pointer",position:"relative",height:"100%",maxHeight:"350px",width:"100%",opacity:i?.6:1},className:"yt-volume-vertical-tier-item "+(a?"yt-volume-vertical-tier-item-active":""),"data-tier":n.tier,"data-discount-value":r.discountValue,"data-discount-type":e?.discountType,"data-minimum-quantity":n.minimumQuantity,"data-original-price":r.original.toFixed(b?0:2),"data-discounted-price":r.discounted.toFixed(b?0:2),onClick:()=>!i&&T(n.tier)},n.badgeTitle&&t.createElement("div",{style:{position:"absolute",top:"-15px",zIndex:-1,left:"0",right:"0",width:"80%",textAlign:"center",margin:"0 auto",fontSize:"10px",clipPath:"polygon(2% 0%, 98% 0%, 100% 100%, 0% 100%)",backgroundColor:a?ie:le,color:a?ce:se,padding:"2px 0",borderRadius:"12px 12px 0px 0px",lineHeight:"normal"},className:a?"yt-volume-vertical-tier-badge-active":"yt-volume-vertical-tier-badge","data-tier":n.tier,"data-badge-title":n.badgeTitle},n.badgeTitle),t.createElement("div",{style:{position:"relative",width:"100%",display:"flex",justifyContent:"center",height:"fit-content"},className:"yt-volume-vertical-tier-save-badge-container"},0!==r.discountValue&&t.createElement(t.Fragment,null,O&&o>0&&!!r?.discountValue&&"Enabled"===y.volumeBundle?.discountBadgeVisibility&&t.createElement("div",{style:{lineHeight:"normal",position:"absolute",right:"5px",top:"8px"}},t.createElement(xf,{primaryBackgroundColorCta:a?ie:le,isSelected:a,style:{height:"fit-content",fontSize:"10px",lineHeight:"normal",color:a?ce:se},className:"yt-volume-vertical-tier-save-badge","data-tier":n.tier,"data-discount-value":r.discountValue,"data-discount-type":e?.discountType}," ","percentOff"===e?.discountType?`${r.discountValue}% Off`:`Save ${jx(y.general.currencySymbol,e.storeCurrencyCode)}${Lx(r.discountValue)}`))),n.imageUrl&&t.createElement("img",{src:Vx(n.imageUrl),style:{objectFit:"cover",aspectRatio:"1/1",width:"100%",maxHeight:"160px",maxWidth:"160px",height:"fit-content",borderTopLeftRadius:de||"24px",borderTopRightRadius:de||"24px"},className:"yt-volume-vertical-tier-badge"})),t.createElement("div",{style:{padding:"8px",paddingTop:"0"}},t.createElement(hf,{style:{display:"flex",width:"100%",gap:"4px"},className:"yt-volume-vertical-details-container"},t.createElement("div",{style:{display:"flex",alignItems:"center",position:"relative",width:"100%"},className:"yt-volume-vertical-details-title-container"},t.createElement(yf,{style:{fontSize:O?"12px":"14px",lineHeight:"normal"},className:"yt-volume-vertical-details-title"},n.title?n.title:t.createElement(t.Fragment,null,"Buy ",n.minimumQuantity,", Get"," ",n.discountValue,"% Off")),!O&&o>0&&!!r?.discountValue&&"Enabled"===y.volumeBundle?.discountBadgeVisibility&&t.createElement(xf,{primaryBackgroundColorCta:a?ie:le,isSelected:a,style:{height:"fit-content",fontSize:"10px",lineHeight:"normal",color:a?ce:se},className:"yt-volume-vertical-tier-save-badge","data-tier":n.tier,"data-discount-value":r.discountValue,"data-discount-type":e?.discountType}," ","percentOff"===e?.discountType?`${r.discountValue}% Off`:`Save ${jx(y.general.currencySymbol,e.storeCurrencyCode)}${Lx(r.discountValue)}`),a&&n.imageUrl&&t.createElement("div",{style:{lineHeight:"normal",position:"absolute",right:"0px"},className:"yt-volume-vertical-tier-selected-check"},t.createElement("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"16px",height:"16px",borderRadius:"50%",backgroundColor:ie,color:ce,padding:"2px"}},t.createElement(ro,{style:{paddingBottom:"1px"},size:20,fontWeight:20})))),t.createElement(bf,{style:{lineHeight:"normal",fontSize:O?"10px":"14px",color:"#666"},className:"yt-volume-vertical-details-subtitle"},n.subtitle?n.subtitle:t.createElement(t.Fragment,null))),H(n.tier)?t.createElement(vf,{style:{textAlign:"left",marginTop:"4px",display:"flex",flexDirection:"row",flexWrap:"wrap",alignItems:"center"},className:"yt-volume-vertical-details-price","data-tier":n.tier,"data-original-price":r.original.toFixed(b?0:2),"data-discounted-price":r.discounted.toFixed(b?0:2),"data-savings":o.toFixed(b?0:2)},t.createElement(wf,{style:{marginLeft:"0",lineHeight:"normal",marginRight:"8px"},className:"yt-volume-vertical-details-price-discount"},jx(y.general.currencySymbol,e.storeCurrencyCode),Lx(r.discounted.toFixed(b?0:2))),o>0?t.createElement(Cf,{style:{lineHeight:"normal"},className:"yt-volume-vertical-details-price-original"},jx(y.general.currencySymbol,e.storeCurrencyCode),Lx(r.original.toFixed(b?0:2))):""):t.createElement("div",{style:{textAlign:"center",color:"#999",fontSize:"14px",fontWeight:"500",padding:"4px 0",lineHeight:"normal"}},"Out of Stock")),a&&!n.imageUrl&&t.createElement("div",{style:{lineHeight:"normal",position:"absolute",right:"10px",bottom:"10px"},className:"yt-volume-vertical-tier-selected-check"},t.createElement("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"16px",height:"16px",borderRadius:"50%",backgroundColor:ie,color:ce,padding:"2px"}},t.createElement(ro,{style:{paddingBottom:"1px"},size:20,fontWeight:20})))))}))):t.createElement(t.Fragment,null,k.map((n=>{const r=K(n.tier),o=r.original-r.discounted,a=!H(n.tier);return t.createElement(t.Fragment,{key:n.tier},n.badgeTitle&&t.createElement(uf,{primaryTextColorCta:ce,primaryBackgroundColorCta:ie,style:{lineHeight:"normal"},className:"yt-volume-horizontal-tier-badge","data-tier":n.tier,"data-badge-title":n.badgeTitle},n.badgeTitle),t.createElement(mf,{cornerRadiusType:e?.cornerRadiusType??"",key:n.tier,primaryBackgroundColorCta:ie??"",isSelected:S===n.tier,onClick:()=>T(n.tier),style:{borderRadius:de,cursor:"pointer",backgroundColor:a?"#f5f5f5":"white",opacity:a?.6:1},className:"yt-volume-horizontal-tier-container "+(S===n.tier?"yt-volume-horizontal-tier-container-active":""),"data-tier":n.tier,"data-discount-value":r.discountValue,"data-discount-type":e?.discountType,"data-minimum-quantity":n.minimumQuantity,"data-original-price":r.original.toFixed(b?0:2),"data-discounted-price":r.discounted.toFixed(b?0:2)},t.createElement(ff,{cornerRadiusType:e?.cornerRadiusType??"",style:{borderRadius:de,borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px"},className:"yt-volume-horizontal-tier-header"},t.createElement(gf,{className:"yt-volume-horizontal-tier-info"},t.createElement($f,{"data-active":S===n.tier,accentColor:ie,className:"yt-volume-horizontal-tier-radio-wrapper"},t.createElement(Bf,{name:"tier",checked:S===n.tier,onChange:()=>!a&&T(n.tier),disabled:a,className:"yt-volume-horizontal-tier-radio-hidden"}),t.createElement(zf,{accentColor:ie,className:"yt-volume-horizontal-tier-radio-custom"})),t.createElement(hf,{className:"yt-volume-horizontal-tier-details"},t.createElement("div",{style:{display:"flex"},className:"yt-volume-horizontal-tier-title-container"},t.createElement(yf,{style:{lineHeight:"normal"},className:"yt-volume-horizontal-tier-title"},n.title?n.title:t.createElement(t.Fragment,null,"Buy ",n.minimumQuantity,", Get"," ",n.discountValue,"% Off")),o>0&&r?.discountValue&&"Enabled"===y.volumeBundle?.discountBadgeVisibility?t.createElement(xf,{primaryBackgroundColorCta:ie,isSelected:S===n.tier,style:{lineHeight:"normal"},className:"yt-volume-horizontal-tier-save-badge","data-tier":n.tier,"data-discount-value":r.discountValue,"data-discount-type":e?.discountType}," ","percentOff"===e?.discountType?`${r.discountValue}% Off`:`Save ${jx(y.general.currencySymbol,e.storeCurrencyCode)}${Lx(r.discountValue)}`):""),t.createElement(bf,{style:{lineHeight:"normal"},className:"yt-volume-horizontal-tier-subtitle"},n.subtitle?n.subtitle:t.createElement(t.Fragment,null)))),H(n.tier)?t.createElement(vf,{style:{lineHeight:"normal"},className:"yt-volume-horizontal-tier-price","data-tier":n.tier,"data-original-price":r.original.toFixed(b?0:2),"data-discounted-price":r.discounted.toFixed(b?0:2),"data-savings":o.toFixed(0)},o>0?t.createElement(Cf,{style:{lineHeight:"normal"},className:"yt-volume-horizontal-tier-original-price"},jx(y.general.currencySymbol,e.storeCurrencyCode),Lx(r.original.toFixed(b?0:2))):"",t.createElement(wf,{className:"yt-volume-horizontal-tier-discounted-price"},jx(y.general.currencySymbol,e.storeCurrencyCode),Lx(r.discounted.toFixed(b?0:2)))):t.createElement("div",{style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",lineHeight:"normal"}},t.createElement("span",{style:{color:"#999",fontSize:"14px",fontWeight:"500"}},"Out of Stock"))),S===n.tier&&t.createElement(kf,{className:"yt-volume-horizontal-tier-product-grid",style:{padding:d.productDetails.variants.edges.length<=1?"0":"10px 15px",gap:d.productDetails.variants.edges.length<=1?"0":"10px"}},Array.from({length:n.minimumQuantity}).map(((r,o)=>{const i=n.tier-1,l=(I[i]||[])[o]||d.productDetails.options?.map((e=>e.values[0]))||[],c=d?.productDetails?.options.some((e=>e.values.length>1));return t.createElement("div",{key:o,style:{display:"flex",gap:"10px",alignItems:"center",position:"relative"},className:"yt-volume-horizontal-tier-product-item"},c&&t.createElement(Nf,{src:Vx(J(d,$,o,n.tier)),alt:d?.productDetails?.title||"Product",className:"yt-volume-horizontal-tier-product-image"}),"auto"===y?.volumeBundle?.variantSelectorType?t.createElement("div",{style:{display:"flex",gap:"8px",flexWrap:"wrap"}},d?.productDetails?.options?.map(((r,s)=>{if(!c)return null;const p=F?.tier===n.tier&&F?.index===o&&F?.optionIndex===s,u=e?.variantOptions?.options?.find((e=>e.name===r.name));let m="";return"color"===u?.type&&(m=u?.values?.find((e=>e.name===l[s]))?.value||""),t.createElement(Pf,{key:s,ref:e=>{j.current[o]||(j.current[o]=[]),j.current[o][s]=e},style:{zIndex:p?1e3:"auto",display:"flex"},isActive:p},t.createElement(Of,{onClick:e=>{e.stopPropagation(),M(p?null:{tier:n.tier,index:o,optionIndex:s})},isActive:p,disabled:a},"color"===u?.type&&m&&t.createElement("div",{className:"yt-fixedBundle-product-card_color-swatch",style:{display:"inline-block",width:20,height:20,borderRadius:"50%",backgroundColor:m||"transparent",border:"1px solid #ddd"}}),l[s],t.createElement(Yr,null)),p&&t.createElement(Af,{style:{zIndex:1001}},r.values.map(((e,r)=>{const c=[...l];c[s]=e;const p=!U(n.tier,o,l,s,e)||a;d.productDetails.variants.edges.find((({node:e})=>e.title===c.join(" / ")));const m=t=>{if(t.preventDefault(),t.stopPropagation(),D((e=>{const t={...e},n=[...t[i]||[]];return n[o]=c,t[i]=n,t})),p){L({tier:S,index:o,optionIndex:s,value:e}),M(null);const t=c.join(" / "),r=d.productDetails.variants.edges.find((e=>e.node.title===t))?.node.id||$;return void Y(n.tier,o,r)}const r=c.join(" / "),a=d.productDetails.variants.edges.find((e=>e.node.title===r))?.node.id||$;Y(n.tier,o,a),M(null)},f=u?.values.find((t=>t.name===e));return"image"===u?.type&&f?.value?t.createElement(If,{key:e,onClick:m,style:{cursor:"pointer"}},t.createElement(Df,{src:f.value,alt:e}),e):"color"===u?.type&&f?.value?t.createElement(If,{key:e,onClick:m,style:{cursor:"pointer"}},t.createElement(_f,{style:{backgroundColor:f.value}}),e):t.createElement(If,{key:e,onClick:m,style:{cursor:"pointer"}},e)}))))}))):t.createElement(Ef,{style:{display:"flex",flexDirection:"column",gap:"5px"},className:"yt-volume-horizontal-tier-variant-selector"},d?.productDetails?.options.map(((r,c)=>{if(!(r.values.length>1))return null;const s=e.variantOptions?.options?.find((e=>e.name===r.name))||null;return t.createElement("div",{key:r.name,style:{width:"100%",display:"flex",flexDirection:"row",gap:"8px",alignItems:"center"},className:"yt-volume-horizontal-tier-variant-option"},t.createElement("div",{style:{display:"flex",flexDirection:"row",alignItems:"center",gap:"8px",flexWrap:"wrap"},className:"yt-volume-horizontal-tier-variant-values"},r.values.map((e=>{const r=l[c]===e,p=!U(n.tier,o,l,c,e)||a,u=s?.values.find((t=>t.name===e)),m=t=>{if(t.preventDefault(),t.stopPropagation(),p)return;const r=[...l];r[c]=e,D((e=>{const t={...e},n=[...t[i]||[]];return n[o]=r,t[i]=n,t}));const a=r.join(" / "),s=d.productDetails.variants.edges.find((e=>e.node.title===a))?.node.id||$;Y(n.tier,o,s)},f={opacity:p?.5:1,cursor:p?"not-allowed":"pointer"};return"color"===s?.type&&u?.value?t.createElement("button",{key:e,onClick:m,style:{...f,borderRadius:"50%",padding:"1px",backgroundColor:"white",border:r?`1px solid ${y.general?.ctaBackgroundColor||"#121212"}`:"1px solid transparent",lineHeight:"normal"},className:"yt-volume-horizontal-tier-variant-color-button",disabled:p},t.createElement("div",{style:{width:r?"24px":"20px",height:r?"24px":"20px",borderRadius:"50%",backgroundColor:u.value,lineHeight:"normal",boxShadow:"rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 2px"}},t.createElement("span",null))):"image"===s?.type&&u?.value?t.createElement("button",{key:e,onClick:m,style:{...f,border:r?`1px solid ${y.general?.ctaBackgroundColor||"#121212"}`:"1px solid #E4E4E4",borderRadius:"100%",backgroundColor:r?"#F7F7F7":"transparent",padding:"0px",width:r?"20px":"18px",height:r?"20px":"18px",overflow:"hidden"},className:"yt-volume-horizontal-tier-variant-image-button",disabled:p},t.createElement("img",{src:u.value,alt:e,style:{width:r?"26px":"24px",height:r?"26px":"24px",objectFit:"cover",borderRadius:"100%",aspectRatio:"1/1"}})):t.createElement(Sf,{key:e,isSelected:r,onClick:m,style:{...f,padding:"4px 8px",border:r?`1px solid ${y.general?.ctaBackgroundColor||"#121212"}`:"1px solid #E4E4E4",borderRadius:"16px",backgroundColor:r?"#F7F7F7":"transparent",color:"#707070",cursor:"pointer",fontSize:"12px",fontWeight:"600",lineHeight:"normal"},className:"yt-volume-horizontal-tier-variant-button-default",disabled:p},e)}))))}))))}))),R&&R.tier===n.tier&&t.createElement("div",{style:{color:ie,textAlign:"center",fontSize:"14px",fontStyle:"normal",fontWeight:"500",lineHeight:"110%",background:`${ie}1A`,padding:"12px",borderBottomLeftRadius:de,borderBottomRightRadius:de}},"There aren’t enough items in our stock for select option, please select smaller bundle.")))}))),e?.showCta&&(!y.volumeBundle?.addtoCartMethod||"shopify_atc_button"!==y.volumeBundle?.addtoCartMethod)&&!("devansh-test123.myshopify.com"===window.ytBundleApp?.storeDomain||"06cf02-81.myshopify.com"===window.ytBundleApp?.storeDomain)&&t.createElement("div",{style:{position:"relative"}},t.createElement(Tf,{bgColor:Q(S)?y.general?.ctaBackgroundColor:"#ccc",textColor:Q(S)?y.general?.ctaTextColor:"#666",border:`1px solid ${Q(S)?y.general?.ctaBorderColor||"#121212":"#999"}`,shadow:y.general.ctaShadowType,padding:y.general?.ctaPadding,width:y.general?.ctaWidth,hoverProperties:{customizeHoverState:!!Q(S)&&y.general?.customizeHoverState,backgroundColor:y.general?.ctaHoverBackgroundColor,textColor:y.general?.ctaHoverTextColor},onClick:async()=>{if(Q(S))try{P(!0);const e=k.find((e=>e.tier===S));if(!e)return;const t={},r=z[e.tier]||{};for(let n=0;n<e.minimumQuantity;n++){const e=r[n]||$;t[e]?t[e].quantity+=1:t[e]={quantity:1}}const o=K(e.tier),a=Array.from({length:e.minimumQuantity},((e,t)=>r[t]||$));n&&await n(o.original,a)}catch(e){console.error("VolumeBundle handleAddToCart error:",e)}finally{P(!1)}else console.error("Selected tier is out of stock")},borderRadius:y.general.ctaBorderRadius??"",disabled:_||!Q(S),className:"yt-volume-add-to-cart-button"},Q(S)?t.createElement(t.Fragment,null,_?t.createElement(Xo,{color:"white",loading:_,size:15,"aria-label":"Loading Spinner","data-testid":"loader"}):t.createElement("div",{style:{display:"flex",flexDirection:"row",gap:"8px",justifyContent:"center",alignItems:"center"}},t.createElement("span",null,y.volumeBundle?.ctaTitle??"Add Bundle to Cart")," ","•",t.createElement("div",{className:"yt-volume-add-to-cart-button-info"},(()=>{const n=K(S);return t.createElement(t.Fragment,null,jx(y.general.currencySymbol,e.storeCurrencyCode),Lx(n.discounted.toFixed(b?0:2))," ",n?.original!==n.discounted&&t.createElement("span",{style:{lineHeight:"normal",textDecoration:"line-through",fontWeight:"550"}},jx(y.general.currencySymbol,e.storeCurrencyCode),Lx(n?.original.toFixed(b?0:2))," "))})()))):t.createElement(t.Fragment,null,"Out of Stock"))))}const Rf=h.div`
|
|
3887
|
+
`,Ff=(e,t)=>{if(!t)return{};for(const n of t)if(n.productId==e)return n;return{}};function Mf({bundle:e,addToCartFunction:n,currentProductId:r}){const s=i((()=>{if(r){const t="gid://shopify/Product/"+r,n=e.products?.some((e=>e.productId===t));return n?t:e.products?.[0]?.productId}return e.products?.[0]?.productId}),[r,e.products]),d=i((()=>Ff(s,e.products)),[s,e.products]),p=o(null),u=o(null),m=o({});document.querySelector("#ProductSelect-product-template"),document.querySelector('form[action="/cart/add"]');const[f,g]=c(0),[x,h]=c(""),y=e.customizations??{},b=!1===y?.general?.showDecimalsInBundlePricing,v=i((()=>d?.productDetails?.tracksInventory??!0),[d?.productDetails?.tracksInventory]),w=a((e=>{if(!v)return 1/0;if(!e)return 0;if(!e.inventoryItem?.tracked)return 1/0;let t=e.inventoryQuantity??0;return t>0?t:"continue"===e.inventoryPolicy?1/0:0}),[v]),C=(i((()=>d?.productDetails?.variants?.edges?.reduce(((e,{node:t})=>w(t)>0?e+1:e),0)),[d,w]),i((()=>Ff(s,e.products)?.id),[s,e.products]));i((()=>C?Ff(s,e.products):void 0),[s,e.products,C]),i((()=>e.products?.some((e=>e.productDetails?.options?.some((e=>e.values.length>1))))||!1),[e.products]),y.volumeBundle;const k=i((()=>e?.volumeTiers||[]),[e?.volumeTiers]),E=k.findIndex((e=>e.isDefault)),[S,T]=c(-1!==E?k[E].tier:k?.[0]?.tier||1),[$,B]=c(d?.productDetails?.variants?.edges?.find((e=>w(e?.node)>0))?.node?.id||d?.productDetails?.variants?.edges?.[0]?.node?.id||""),[z,N]=c({}),[I,D]=c(k.reduce(((e,t,n)=>(e[t.tier-1]=Array.from({length:t.minimumQuantity},(()=>d?.productDetails?.options?.map((e=>e.values[0]))||[])),e)),{})||{}),[_,P]=c(!1),[O,A]=c(window.innerWidth<550),[F,M]=c(null),[R,L]=c(null);o([]);const j=o([]),V=o(S);l((()=>{const e=()=>{A(window.innerWidth<550)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),l((()=>{const e=e=>{F&&j.current[F.index]&&j.current[F.index][F.optionIndex]&&!j.current[F.index][F.optionIndex]?.contains(e.target)&&M(null)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[F]);const W=a((e=>{const t=k.find((t=>t.tier===e));if(!t)return null;const n=t.minimumQuantity,r=d?.productDetails?.variants?.edges||[];for(const e of r){const t=e.node;if(w(t)>=n){const e=t.title.split(" / ");return Array(n).fill(e)}}const o=[],a={},i=[...r].sort(((e,t)=>{const n=w(e.node),r=w(t.node);return n===1/0&&r===1/0?0:n===1/0?-1:r===1/0?1:r-n}));for(let e=0;e<n&&o.length<n;e++){let e=!1;for(const t of i){const n=t.node,r=a[n.id]||0;if(w(n)>r&&n.availableForSale){const t=n.title.split(" / ");o.push(t),a[n.id]=r+1,e=!0;break}}if(!e)return null}return o.length===n?o:null}),[d,k,w]),H=a((e=>{const t=k.find((t=>t.tier===e));if(!t)return!1;const n=t.minimumQuantity,r=d?.productDetails?.variants?.edges||[];let o=0;for(const e of r){const t=w(e.node);if(t===1/0){o=1/0;break}o+=t}return o>=n}),[k,d,w]);l((()=>{const e={},t=d?.productDetails?.variants?.edges?.find((e=>w(e?.node)>0))?.node?.id||d?.productDetails?.variants?.edges?.[0]?.node?.id||"";t&&k.forEach((n=>{e[n.tier]={};for(let r=0;r<n.minimumQuantity;r++)e[n.tier][r]=t})),N(e)}),[d?.id,k?.map((e=>`${e.tier}-${e.minimumQuantity}`)).join("|"),w]),l((()=>{if(!m.current[S]){const e=W(S);if(e){const t=S-1;D((n=>({...n,[t]:e})));const n={};e.forEach(((e,t)=>{const r=e.join(" / "),o=d?.productDetails?.variants?.edges?.find((e=>e.node.title===r))?.node.id||$;n[t]=o})),N((e=>({...e,[S]:n})))}m.current[S]=!0}}),[S,d,$,W]);const q=(e,t)=>e?.productDetails?.variants?.edges?.find((e=>e.node.id===t))?.node,U=a(((e,t,n,r,o)=>{const a=k.find((t=>t.tier===e));if(!a)return!1;const i=a.minimumQuantity,l=[...n];l[r]=o;const c=l.join(" / "),s=d?.productDetails?.variants?.edges?.find((e=>e.node.title===c))?.node;if(!s||0===w(s))return!1;const p={},u=z[e]||{};for(let e=0;e<i;e++){let n;if(e===t)n=s.id;else{const t=u[e]||$,r=q(d,t);if(!r)return!1;n=r.id}p[n]=(p[n]||0)+1}for(const[e,t]of Object.entries(p)){const n=q(d,e),r=w(n);if(r!==1/0&&t>r)return!1}return!0}),[k,d,I,I,z,$,w]),Q=a((e=>{const t=k.find((t=>t.tier===e));if(!t)return!1;const n=t.minimumQuantity,r=e-1,o={};for(let e=0;e<n;e++){const t=(I[r]?.[e]||d.productDetails.options.map((e=>e.values[0]))).join(" / "),n=d?.productDetails?.variants?.edges?.find((e=>e.node.title===t));if(!n)return!1;const a=n.node.id;o[a]=(o[a]||0)+1}for(const[e,t]of Object.entries(o)){const n=q(d,e),r=w(n);if(r!==1/0&&t>r)return!1}return!0}),[k,d,I,w]);l((()=>{g((e=>e+1))}),[z]);const Y=(e,t,n)=>{N((r=>({...r,[e]:{...r[e]||{},[t]:n}})))},G=a((()=>d?.productDetails?.variants?.edges?.find((e=>w(e.node)>0))?.node||d?.productDetails?.variants?.edges?.[0]?.node),[d,w]),Z=a((()=>new URLSearchParams(window.location.search).get("variant")||""),[]);l((()=>{V.current=S}),[S]),l((()=>{R?(L(null),X()):X()}),[S]),l((()=>{if(e){const e=G();if(e)h(e.id),B(e.id);else{const e=d?.productDetails?.variants?.edges?.[0]?.node?.id||"";h(e),B(e)}}}),[e,d,G]);const X=()=>{const e=Z();if(e){const t=d?.productDetails?.variants?.edges?.find((t=>String(t.node.id)==="gid://shopify/ProductVariant/"+String(e)));let n=t?.node;if(n)B(String(n.id)),g((e=>e+1));else{const e=G();e&&(B(String(e.id)),n=e),g((e=>e+1))}if(n){0===w(n)?(L(null),setTimeout((()=>{L({tier:V.current,index:0,optionIndex:0,value:n.title})}),0)):R&&L(null)}}};l((()=>{X();const e=new Event("urlChange");let t=!0;const n=window.history.pushState,r=window.history.replaceState;return window.history.pushState=function(){t&&(n.apply(this,arguments),window.dispatchEvent(e))},window.history.replaceState=function(){t&&(r.apply(this,arguments),window.dispatchEvent(e))},window.addEventListener("urlChange",X),()=>{t=!1,window.removeEventListener("urlChange",X),window.history.pushState=n,window.history.replaceState=r}}),[Z,d?.id,G,w]);const K=t=>{const n=k.find((e=>e.tier===t));if(!n)return{original:0,discounted:0};let r=0,o=0;const a=z[t]||{};for(let e=0;e<n.minimumQuantity;e++){const t=a[e]||$,n=q(d,t);n&&(n.compareAtPrice?r+=Number.parseFloat(n.compareAtPrice):r+=Number.parseFloat(n.price),o+=Number.parseFloat(n.price))}return"percentOff"===e?.discountType?o*=1-n.discountValue/100:"amountOff"===e?.discountType&&(o-=n.discountValue),o<0&&(o=0),{original:r,discounted:o,discountValue:n.discountValue}},J=(e,t,n,r)=>{let o=q(e,t);if(r){const a=z[r]?.[n||0]||t;o=q(e,a)}return o?.image?.url?o.image.url:e.productDetails?.media?.edges[0]?.node?.preview?.image?.url||""};function ee(e){if(e.startsWith("gid://")){const t=e.split("/");return t[t.length-1]}return e}l((()=>{const e=()=>{if("shopify_atc_button"!==y.volumeBundle?.addtoCartMethod&&"06cf02-81.myshopify.com"!==window.ytBundleApp?.storeDomain)return;const e=document.querySelector('form[action="/cart/add"]');if(!e)return;const t=document.querySelector("#Quantity-product-template")||document.querySelector('input[name="quantity"]')||document.querySelector('input[type="number"][min="1"]');let n=1;t&&t.value&&(n=parseInt(t.value,10)||1);const r=k.find((e=>e.tier===S));if(!r)return;e.querySelectorAll('.bundle-input-field, [name^="properties["], [name="id"], [name="quantity"]').forEach((e=>e.remove()));const o=r.minimumQuantity;let a={};const i=Math.max(o,n);if("vertical"===y.volumeBundle.cardStyle){const e=x||$;if(!e)return;a[e]=i}else if(n>o){const e=x||$;if(!e)return;a[e]=i}else{const e=z[r.tier]||{};for(let t=0;t<o;t++){let n=e[t];n||(n=$),n&&(a[n]=(a[n]||0)+1)}}const l=K(r.tier),c=Object.fromEntries(Object.entries(a).map((([e,t])=>[ee(e),Math.round(t)]))),s=(t,n,r="bundle-input-field")=>{const o=document.createElement("input");o.type="hidden",o.name=t,o.value=n,o.className=r,e.appendChild(o)};if(n>o){const e=x||$;e&&s("id",ee(e))}s("properties[_bundle_price]",String(l.original)),s("properties[_bundle_tier]",String(r.tier)),s("properties[_bundle_items]",JSON.stringify(c));let d=0;Object.entries(c).forEach((([e,t])=>{t>0&&(s(`items[${d}][id]`,e),s(`items[${d}][quantity]`,String(t)),d++)})),requestAnimationFrame((()=>{const t=e.querySelector('[type="submit"]'),r=e.querySelector('[name="checkout"]'),a=e.querySelector(".noti-btn-main-wrap"),i=(e,t,n)=>{if(!e)return;e.disabled=t,e.classList.toggle("disabled",t);const r=e.querySelector("[data-add-to-cart-text]")||e.querySelector("span");r&&(r.textContent=n)};n<=o&&(R?(i(t,!0,"Sold out"),i(r,!0,"Sold out"),t&&t.classList.add("btn--sold-out","hidden"),a&&(a.style.display="block",a.classList.remove("hidden"),a.classList.add("block"))):(i(t,!1,"Add to cart"),i(r,!1,"Buy it now"),t&&t.classList.remove("btn--sold-out","hidden"),a&&(a.style.display="none",a.classList.add("hidden"))))}))};e();const t=document.querySelector("#Quantity-product-template")||document.querySelector('input[name="quantity"]')||document.querySelector('input[type="number"][min="1"]');if(t){const n=()=>{requestAnimationFrame((()=>{e()}))};return t.addEventListener("input",n),t.addEventListener("change",n),()=>{t.removeEventListener("input",n),t.removeEventListener("change",n)}}return()=>{}}),[S,JSON.stringify(z),$,y.volumeBundle?.cardStyle,r,x,R]);const te=i((()=>k.find((e=>e.tier===S))),[k,S]),ne=i((()=>te?K(te.tier):null),[te,z,$]),re=i((()=>{if(!te||!ne)return;const e=z[te.tier]||{},t={};for(let n=0;n<te.minimumQuantity;n++){const r=e[n]||$;t[r]=(t[r]||0)+1}return t}),[te?.minimumQuantity,$,z,ne]),oe=i((()=>Object.entries(re??{}).map((([e,t])=>({variantId:e,quantity:t})))),[re]);if(l((()=>{if(!te||!ne)return;const e={tier:S,items:te.minimumQuantity,discountedPrice:ne.discounted,originalPrice:ne.original,variants:oe,productId:d?.id??null,tierMeta:{title:te.title,subtitle:te.subtitle,badgeTitle:te.badgeTitle},productData:d,tierData:te},t=u.current;return t&&JSON.stringify(t)===JSON.stringify(e)?void 0:(p.current&&clearTimeout(p.current),p.current=window.setTimeout((()=>{u.current=e;const t=new CustomEvent("ytBundleTierChange",{detail:e});window.dispatchEvent(t)}),50),()=>{p.current&&clearTimeout(p.current)})}),[S,te?.tier,te?.minimumQuantity,ne?.discounted,ne?.original,d?.id,JSON.stringify(oe)]),l((()=>{if(!$||!d)return;const e=q(d,$);if(!e)return;const t=e.title.split(" / "),n={...z},r={...I};k.forEach((e=>{const o=e.tier-1,a={};for(let t=0;t<e.minimumQuantity;t++)a[t]=$;n[e.tier]=a,r[o]=Array(e.minimumQuantity).fill(t)})),N(n),D(r)}),[$,d?.id,k.length]),!n)return t.createElement(t.Fragment,null);const ae=y.volumeBundle?.cardStyle,ie=y.general?.primaryColor,le=y.general?.secondaryColor,ce=y.general.primaryContrastColor,se=y.general.secondaryContrastColor,de="high"===e.cornerRadiusType?"20px":"medium"===e.cornerRadiusType?"6px":"0px",pe="bundles"==e.appName?e.pageHeader?.title:e?.title,ue="bundles"==e.appName?e.pageHeader?.description:e?.subtitle;return l((()=>{Q(S)&&R?.tier===S&&L(null)}),[S,oe,Q,R]),t.createElement(cf,{verticalMargin:y.volumeBundle?.verticalMargin,$backgroundColor:y.volumeBundle?.sectionBackgroundColor,className:"yt-bundle-container"},t.createElement(sf,{className:"yt-bundle-header"},pe&&pe.trim().length>0&&t.createElement(df,{fontSize:y.volumeBundle?.titleFontSize,$backgroundColor:y.volumeBundle?.titleBackgroundColor,textColor:y.volumeBundle?.titleTextColor,className:"yt-bundle-header-title"},pe),t.createElement(pf,{className:"yt-bundle-header-subtitle",fontSize:y.volumeBundle?.subtitleFontSize},ue)),"vertical"===ae?t.createElement("div",{style:{display:"grid",gridTemplateColumns:O||4===k.length?"repeat(2, 1fr)":k.length>4?"repeat(3, 1fr)":`repeat(${k.length}, 1fr)`,justifyItems:"center",gap:O?"10px":"16px",paddingTop:"10px"},className:"yt-bundle-vertical-container"},k.map((n=>{const r=K(n.tier),o=r.original-r.discounted,a=S===n.tier,i=!H(n.tier);return t.createElement(t.Fragment,{key:n.tier},t.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"8px",borderRadius:de||"24px",...a?{border:`2px solid ${ie}`}:{border:`1px solid ${le}`},boxShadow:`6px 6px 0px -1px ${a?ie:le}20`,...n.badgeTitle&&{position:"relative"},zIndex:5,backgroundColor:i?"#f5f5f5":"white",cursor:i?"not-allowed":"pointer",position:"relative",height:"100%",maxHeight:"350px",width:"100%",opacity:i?.6:1},className:"yt-volume-vertical-tier-item "+(a?"yt-volume-vertical-tier-item-active":""),"data-tier":n.tier,"data-discount-value":r.discountValue,"data-discount-type":e?.discountType,"data-minimum-quantity":n.minimumQuantity,"data-original-price":r.original.toFixed(b?0:2),"data-discounted-price":r.discounted.toFixed(b?0:2),onClick:()=>!i&&T(n.tier)},n.badgeTitle&&t.createElement("div",{style:{position:"absolute",top:"-15px",zIndex:-1,left:"0",right:"0",width:"80%",textAlign:"center",margin:"0 auto",fontSize:"10px",clipPath:"polygon(2% 0%, 98% 0%, 100% 100%, 0% 100%)",backgroundColor:a?ie:le,color:a?ce:se,padding:"2px 0",borderRadius:"12px 12px 0px 0px",lineHeight:"normal"},className:a?"yt-volume-vertical-tier-badge-active":"yt-volume-vertical-tier-badge","data-tier":n.tier,"data-badge-title":n.badgeTitle},n.badgeTitle),t.createElement("div",{style:{position:"relative",width:"100%",display:"flex",justifyContent:"center",height:"fit-content"},className:"yt-volume-vertical-tier-save-badge-container"},0!==r.discountValue&&t.createElement(t.Fragment,null,O&&o>0&&!!r?.discountValue&&"Enabled"===y.volumeBundle?.discountBadgeVisibility&&t.createElement("div",{style:{lineHeight:"normal",position:"absolute",right:"5px",top:"8px"}},t.createElement(xf,{primaryBackgroundColorCta:a?ie:le,isSelected:a,style:{height:"fit-content",fontSize:"10px",lineHeight:"normal",color:a?ce:se},className:"yt-volume-vertical-tier-save-badge","data-tier":n.tier,"data-discount-value":r.discountValue,"data-discount-type":e?.discountType}," ","percentOff"===e?.discountType?`${r.discountValue}% Off`:`Save ${jx(y.general.currencySymbol,e.storeCurrencyCode)}${Lx(r.discountValue)}`))),n.imageUrl&&t.createElement("img",{src:Vx(n.imageUrl),style:{objectFit:"cover",aspectRatio:"1/1",width:"100%",maxHeight:"160px",maxWidth:"160px",height:"fit-content",borderTopLeftRadius:de||"24px",borderTopRightRadius:de||"24px"},className:"yt-volume-vertical-tier-badge"})),t.createElement("div",{style:{padding:"8px",paddingTop:"0"}},t.createElement(hf,{style:{display:"flex",width:"100%",gap:"4px"},className:"yt-volume-vertical-details-container"},t.createElement("div",{style:{display:"flex",alignItems:"center",position:"relative",width:"100%"},className:"yt-volume-vertical-details-title-container"},t.createElement(yf,{style:{fontSize:O?"12px":"14px",lineHeight:"normal"},className:"yt-volume-vertical-details-title"},n.title?n.title:t.createElement(t.Fragment,null,"Buy ",n.minimumQuantity,", Get"," ",n.discountValue,"% Off")),!O&&o>0&&!!r?.discountValue&&"Enabled"===y.volumeBundle?.discountBadgeVisibility&&t.createElement(xf,{primaryBackgroundColorCta:a?ie:le,isSelected:a,style:{height:"fit-content",fontSize:"10px",lineHeight:"normal",color:a?ce:se},className:"yt-volume-vertical-tier-save-badge","data-tier":n.tier,"data-discount-value":r.discountValue,"data-discount-type":e?.discountType}," ","percentOff"===e?.discountType?`${r.discountValue}% Off`:`Save ${jx(y.general.currencySymbol,e.storeCurrencyCode)}${Lx(r.discountValue)}`),a&&n.imageUrl&&t.createElement("div",{style:{lineHeight:"normal",position:"absolute",right:"0px"},className:"yt-volume-vertical-tier-selected-check"},t.createElement("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"16px",height:"16px",borderRadius:"50%",backgroundColor:ie,color:ce,padding:"2px"}},t.createElement(ro,{style:{paddingBottom:"1px"},size:20,fontWeight:20})))),t.createElement(bf,{style:{lineHeight:"normal",fontSize:O?"10px":"14px",color:"#666"},className:"yt-volume-vertical-details-subtitle"},n.subtitle?n.subtitle:t.createElement(t.Fragment,null))),H(n.tier)?t.createElement(vf,{style:{textAlign:"left",marginTop:"4px",display:"flex",flexDirection:"row",flexWrap:"wrap",alignItems:"center"},className:"yt-volume-vertical-details-price","data-tier":n.tier,"data-original-price":r.original.toFixed(b?0:2),"data-discounted-price":r.discounted.toFixed(b?0:2),"data-savings":o.toFixed(b?0:2)},t.createElement(wf,{style:{marginLeft:"0",lineHeight:"normal",marginRight:"8px"},className:"yt-volume-vertical-details-price-discount"},jx(y.general.currencySymbol,e.storeCurrencyCode),Lx(r.discounted.toFixed(b?0:2))),o>0?t.createElement(Cf,{style:{lineHeight:"normal"},className:"yt-volume-vertical-details-price-original"},jx(y.general.currencySymbol,e.storeCurrencyCode),Lx(r.original.toFixed(b?0:2))):""):t.createElement("div",{style:{textAlign:"center",color:"#999",fontSize:"14px",fontWeight:"500",padding:"4px 0",lineHeight:"normal"}},"Out of Stock")),a&&!n.imageUrl&&t.createElement("div",{style:{lineHeight:"normal",position:"absolute",right:"10px",bottom:"10px"},className:"yt-volume-vertical-tier-selected-check"},t.createElement("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"16px",height:"16px",borderRadius:"50%",backgroundColor:ie,color:ce,padding:"2px"}},t.createElement(ro,{style:{paddingBottom:"1px"},size:20,fontWeight:20})))))}))):t.createElement(t.Fragment,null,k.map((n=>{const r=K(n.tier),o=r.original-r.discounted,a=!H(n.tier);return t.createElement(t.Fragment,{key:n.tier},n.badgeTitle&&t.createElement(uf,{primaryTextColorCta:ce,primaryBackgroundColorCta:ie,style:{lineHeight:"normal"},className:"yt-volume-horizontal-tier-badge","data-tier":n.tier,"data-badge-title":n.badgeTitle},n.badgeTitle),t.createElement(mf,{cornerRadiusType:e?.cornerRadiusType??"",key:n.tier,primaryBackgroundColorCta:ie??"",isSelected:S===n.tier,onClick:()=>T(n.tier),style:{borderRadius:de,cursor:"pointer",backgroundColor:a?"#f5f5f5":"white",opacity:a?.6:1},className:"yt-volume-horizontal-tier-container "+(S===n.tier?"yt-volume-horizontal-tier-container-active":""),"data-tier":n.tier,"data-discount-value":r.discountValue,"data-discount-type":e?.discountType,"data-minimum-quantity":n.minimumQuantity,"data-original-price":r.original.toFixed(b?0:2),"data-discounted-price":r.discounted.toFixed(b?0:2)},t.createElement(ff,{cornerRadiusType:e?.cornerRadiusType??"",style:{borderRadius:de,borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px"},className:"yt-volume-horizontal-tier-header"},t.createElement(gf,{className:"yt-volume-horizontal-tier-info"},t.createElement($f,{"data-active":S===n.tier,accentColor:ie,className:"yt-volume-horizontal-tier-radio-wrapper"},t.createElement(Bf,{name:"tier",checked:S===n.tier,onChange:()=>!a&&T(n.tier),disabled:a,className:"yt-volume-horizontal-tier-radio-hidden"}),t.createElement(zf,{accentColor:ie,className:"yt-volume-horizontal-tier-radio-custom"})),t.createElement(hf,{className:"yt-volume-horizontal-tier-details"},t.createElement("div",{style:{display:"flex"},className:"yt-volume-horizontal-tier-title-container"},t.createElement(yf,{style:{lineHeight:"normal"},className:"yt-volume-horizontal-tier-title"},n.title?n.title:t.createElement(t.Fragment,null,"Buy ",n.minimumQuantity,", Get"," ",n.discountValue,"% Off")),o>0&&r?.discountValue&&"Enabled"===y.volumeBundle?.discountBadgeVisibility?t.createElement(xf,{primaryBackgroundColorCta:ie,isSelected:S===n.tier,style:{lineHeight:"normal"},className:"yt-volume-horizontal-tier-save-badge","data-tier":n.tier,"data-discount-value":r.discountValue,"data-discount-type":e?.discountType}," ","percentOff"===e?.discountType?`${r.discountValue}% Off`:`Save ${jx(y.general.currencySymbol,e.storeCurrencyCode)}${Lx(r.discountValue)}`):""),t.createElement(bf,{style:{lineHeight:"normal"},className:"yt-volume-horizontal-tier-subtitle"},n.subtitle?n.subtitle:t.createElement(t.Fragment,null)))),H(n.tier)?t.createElement(vf,{style:{lineHeight:"normal"},className:"yt-volume-horizontal-tier-price","data-tier":n.tier,"data-original-price":r.original.toFixed(b?0:2),"data-discounted-price":r.discounted.toFixed(b?0:2),"data-savings":o.toFixed(0)},o>0?t.createElement(Cf,{style:{lineHeight:"normal"},className:"yt-volume-horizontal-tier-original-price"},jx(y.general.currencySymbol,e.storeCurrencyCode),Lx(r.original.toFixed(b?0:2))):"",t.createElement(wf,{className:"yt-volume-horizontal-tier-discounted-price"},jx(y.general.currencySymbol,e.storeCurrencyCode),Lx(r.discounted.toFixed(b?0:2)))):t.createElement("div",{style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",lineHeight:"normal"}},t.createElement("span",{style:{color:"#999",fontSize:"14px",fontWeight:"500"}},"Out of Stock"))),S===n.tier&&t.createElement(kf,{className:"yt-volume-horizontal-tier-product-grid",style:{padding:d.productDetails.variants.edges.length<=1?"0":"10px 15px",gap:d.productDetails.variants.edges.length<=1?"0":"10px"}},Array.from({length:n.minimumQuantity}).map(((r,o)=>{const i=n.tier-1,l=(I[i]||[])[o]||d.productDetails.options?.map((e=>e.values[0]))||[],c=d?.productDetails?.options.some((e=>e.values.length>1));return t.createElement("div",{key:o,style:{display:"flex",gap:"10px",alignItems:"center",position:"relative"},className:"yt-volume-horizontal-tier-product-item"},c&&t.createElement(Nf,{src:Vx(J(d,$,o,n.tier)),alt:d?.productDetails?.title||"Product",className:"yt-volume-horizontal-tier-product-image"}),"auto"===y?.volumeBundle?.variantSelectorType?t.createElement("div",{style:{display:"flex",gap:"8px",flexWrap:"wrap"}},d?.productDetails?.options?.map(((r,s)=>{if(!c)return null;const p=F?.tier===n.tier&&F?.index===o&&F?.optionIndex===s,u=e?.variantOptions?.options?.find((e=>e.name===r.name));let m="";return"color"===u?.type&&(m=u?.values?.find((e=>e.name===l[s]))?.value||""),t.createElement(Pf,{key:s,ref:e=>{j.current[o]||(j.current[o]=[]),j.current[o][s]=e},style:{zIndex:p?1e3:"auto",display:"flex"},isActive:p},t.createElement(Of,{onClick:e=>{e.stopPropagation(),M(p?null:{tier:n.tier,index:o,optionIndex:s})},isActive:p,disabled:a},"color"===u?.type&&m&&t.createElement("div",{className:"yt-fixedBundle-product-card_color-swatch",style:{display:"inline-block",width:20,height:20,borderRadius:"50%",backgroundColor:m||"transparent",border:"1px solid #ddd"}}),l[s],t.createElement(Yr,null)),p&&t.createElement(Af,{style:{zIndex:1001}},r.values.map(((e,r)=>{const c=[...l];c[s]=e;const p=!U(n.tier,o,l,s,e)||a;d.productDetails.variants.edges.find((({node:e})=>e.title===c.join(" / ")));const m=t=>{if(t.preventDefault(),t.stopPropagation(),D((e=>{const t={...e},n=[...t[i]||[]];return n[o]=c,t[i]=n,t})),p){L({tier:S,index:o,optionIndex:s,value:e}),M(null);const t=c.join(" / "),r=d.productDetails.variants.edges.find((e=>e.node.title===t))?.node.id||$;return void Y(n.tier,o,r)}const r=c.join(" / "),a=d.productDetails.variants.edges.find((e=>e.node.title===r))?.node.id||$;Y(n.tier,o,a),M(null)},f=u?.values.find((t=>t.name===e));return"image"===u?.type&&f?.value?t.createElement(If,{key:e,onClick:m,style:{cursor:"pointer"}},t.createElement(Df,{src:f.value,alt:e}),e):"color"===u?.type&&f?.value?t.createElement(If,{key:e,onClick:m,style:{cursor:"pointer"}},t.createElement(_f,{style:{backgroundColor:f.value}}),e):t.createElement(If,{key:e,onClick:m,style:{cursor:"pointer"}},e)}))))}))):t.createElement(Ef,{style:{display:"flex",flexDirection:"column",gap:"5px"},className:"yt-volume-horizontal-tier-variant-selector"},d?.productDetails?.options.map(((r,c)=>{if(!(r.values.length>1))return null;const s=e.variantOptions?.options?.find((e=>e.name===r.name))||null;return t.createElement("div",{key:r.name,style:{width:"100%",display:"flex",flexDirection:"row",gap:"8px",alignItems:"center"},className:"yt-volume-horizontal-tier-variant-option"},t.createElement("div",{style:{display:"flex",flexDirection:"row",alignItems:"center",gap:"8px",flexWrap:"wrap"},className:"yt-volume-horizontal-tier-variant-values"},r.values.map((e=>{const r=l[c]===e,p=!U(n.tier,o,l,c,e)||a,u=s?.values.find((t=>t.name===e)),m=t=>{if(t.preventDefault(),t.stopPropagation(),p)return;const r=[...l];r[c]=e,D((e=>{const t={...e},n=[...t[i]||[]];return n[o]=r,t[i]=n,t}));const a=r.join(" / "),s=d.productDetails.variants.edges.find((e=>e.node.title===a))?.node.id||$;Y(n.tier,o,s)},f={opacity:p?.5:1,cursor:p?"not-allowed":"pointer"};return"color"===s?.type&&u?.value?t.createElement("button",{key:e,onClick:m,style:{...f,borderRadius:"50%",padding:"1px",backgroundColor:"white",border:r?`1px solid ${y.general?.ctaBackgroundColor||"#121212"}`:"1px solid transparent",lineHeight:"normal"},className:"yt-volume-horizontal-tier-variant-color-button",disabled:p},t.createElement("div",{style:{width:r?"24px":"20px",height:r?"24px":"20px",borderRadius:"50%",backgroundColor:u.value,lineHeight:"normal",boxShadow:"rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 2px"}},t.createElement("span",null))):"image"===s?.type&&u?.value?t.createElement("button",{key:e,onClick:m,style:{...f,border:r?`1px solid ${y.general?.ctaBackgroundColor||"#121212"}`:"1px solid #E4E4E4",borderRadius:"100%",backgroundColor:r?"#F7F7F7":"transparent",padding:"0px",width:r?"20px":"18px",height:r?"20px":"18px",overflow:"hidden"},className:"yt-volume-horizontal-tier-variant-image-button",disabled:p},t.createElement("img",{src:u.value,alt:e,style:{width:r?"26px":"24px",height:r?"26px":"24px",objectFit:"cover",borderRadius:"100%",aspectRatio:"1/1"}})):t.createElement(Sf,{key:e,isSelected:r,onClick:m,style:{...f,padding:"4px 8px",border:r?`1px solid ${y.general?.ctaBackgroundColor||"#121212"}`:"1px solid #E4E4E4",borderRadius:"16px",backgroundColor:r?"#F7F7F7":"transparent",color:"#707070",cursor:"pointer",fontSize:"12px",fontWeight:"600",lineHeight:"normal"},className:"yt-volume-horizontal-tier-variant-button-default",disabled:p},e)}))))}))))}))),R&&R.tier===n.tier&&t.createElement("div",{style:{color:ie,textAlign:"center",fontSize:"14px",fontStyle:"normal",fontWeight:"500",lineHeight:"110%",background:`${ie}1A`,padding:"12px",borderBottomLeftRadius:de,borderBottomRightRadius:de}},"There aren’t enough items in our stock for select option, please select smaller bundle.")))}))),e?.showCta&&(!y.volumeBundle?.addtoCartMethod||"shopify_atc_button"!==y.volumeBundle?.addtoCartMethod)&&!("devansh-test123.myshopify.com"===window.ytBundleApp?.storeDomain||"06cf02-81.myshopify.com"===window.ytBundleApp?.storeDomain)&&t.createElement("div",{style:{position:"relative"}},t.createElement(Tf,{bgColor:Q(S)?y.general?.ctaBackgroundColor:"#ccc",textColor:Q(S)?y.general?.ctaTextColor:"#666",border:`1px solid ${Q(S)?y.general?.ctaBorderColor||"#121212":"#999"}`,shadow:y.general.ctaShadowType,padding:y.general?.ctaPadding,width:y.general?.ctaWidth,hoverProperties:{customizeHoverState:!!Q(S)&&y.general?.customizeHoverState,backgroundColor:y.general?.ctaHoverBackgroundColor,textColor:y.general?.ctaHoverTextColor},onClick:async()=>{if(Q(S))try{P(!0);const e=k.find((e=>e.tier===S));if(!e)return;const t={},r=z[e.tier]||{};for(let n=0;n<e.minimumQuantity;n++){const e=r[n]||$;t[e]?t[e].quantity+=1:t[e]={quantity:1}}const o=K(e.tier),a=Array.from({length:e.minimumQuantity},((e,t)=>r[t]||$));n&&await n(o.original,a)}catch(e){console.error("VolumeBundle handleAddToCart error:",e)}finally{P(!1)}else console.error("Selected tier is out of stock")},borderRadius:y.general.ctaBorderRadius??"",disabled:_||!Q(S),className:"yt-volume-add-to-cart-button"},Q(S)?t.createElement(t.Fragment,null,_?t.createElement(Xo,{color:"white",loading:_,size:15,"aria-label":"Loading Spinner","data-testid":"loader"}):t.createElement("div",{style:{display:"flex",flexDirection:"row",gap:"8px",justifyContent:"center",alignItems:"center"}},t.createElement("span",null,y.volumeBundle?.ctaTitle??"Add Bundle to Cart")," ","•",t.createElement("div",{className:"yt-volume-add-to-cart-button-info"},(()=>{const n=K(S);return t.createElement(t.Fragment,null,jx(y.general.currencySymbol,e.storeCurrencyCode),Lx(n.discounted.toFixed(b?0:2))," ",n?.original!==n.discounted&&t.createElement("span",{style:{lineHeight:"normal",textDecoration:"line-through",fontWeight:"550"}},jx(y.general.currencySymbol,e.storeCurrencyCode),Lx(n?.original.toFixed(b?0:2))," "))})()))):t.createElement(t.Fragment,null,"Out of Stock"))))}const Rf=h.div`
|
|
3888
3888
|
container-type: inline-size;
|
|
3889
3889
|
border-radius: ${e=>e.borderRadius?e.borderRadius:"8px"};
|
|
3890
3890
|
max-width: 800px;
|