yt-uikit 0.8.2 → 0.8.4

package/dist/esm/components/Cart/Cart.d.ts

@@ -200,7 +200,7 @@ export interface CartProps {
     cartOffersCarousalData?: CartOffersCarousalProps;
     freebieMilestoneData?: freebieMilestoneProps;
     cartOffersCarouselHeight?: number;
-    stickyBarBuyNowFunction?: (event: any) => Promise<any>;
+    stickyBarBuyNowFunction?: (variantId: string, quantity: number) => Promise<void>;
     gstSectionCustomizationData?: GSTSectionCustomizationProps;
     noteSectionTitle?: string;
     checkoutSectionMessage?: string;

package/dist/esm/components/Cart/StickyCart.d.ts

@@ -39,7 +39,7 @@ export type StickyAddToCartProps = {
     cartComponentsCornerType?: "rounded" | "sharp";
     cartComponentsCornerRadius?: number;
     stickyCartCustomizationData?: stickyCartCustomizationDataProps;
-    checkoutFunction?: (event: any) => Promise<any>;
+    checkoutFunction?: (variantId: string, quantity: number) => Promise<void>;
     backgroundColor?: string;
     primaryTextColor?: string;
     comboBundleData?: BundlePayload;

package/dist/esm/index.js

@@ -1900,17 +1900,17 @@ import*as e from"react";import t,{forwardRef as n,useImperativeHandle as r,useRe
 `,Os=({themeColor:e,themeTextColor:n,disabledDates:r=[]})=>{const[o,i]=c(!1),[d,s]=Kt(ln),p=Xt(rn),u=t.useRef(null),m=d?new Date(d):null,f=Array.isArray(r)?r:[r],g=a((()=>{const e=new Date;return e.setDate(e.getDate()+1),e}),[]),h=a((e=>f.some((t=>t instanceof Date&&(e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate())))),[f]),x=a((e=>{if(!e)return!1;const t=g(),n=new Date(e.getFullYear(),e.getMonth(),e.getDate());return n>=new Date(t.getFullYear(),t.getMonth(),t.getDate())&&!h(n)}),[g,h]);l((()=>{const e=e=>{u.current&&!u.current.contains(e.target)&&i(!1)};return o&&document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[o]),l((()=>{const e=x(m);p((t=>t.isDateValid!==e?{...t,isDateValid:e}:t))}),[m,x,p]);const y=a((({date:e,view:t})=>{if("month"===t){const t=g(),n=new Date(e.getFullYear(),e.getMonth(),e.getDate());if(n>=new Date(t.getFullYear(),t.getMonth(),t.getDate())&&!h(n)){const e=d?new Date(d):null;return e&&n.getFullYear()===e.getFullYear()&&n.getMonth()===e.getMonth()&&n.getDate()===e.getDate()?"active-date":"black-date"}}return null}),[g,d,h]);return t.createElement("div",{className:"custom-date-picker"},t.createElement("div",{className:"date-display",onClick:()=>i(!o)},t.createElement("span",{style:{fontSize:"12px"}},(b=d?new Date(d):null)?b.toLocaleDateString("en-GB",{day:"2-digit",month:"2-digit",year:"2-digit"}).replace(/\//g,"/"):"Select a date"),t.createElement(F,null)),o&&t.createElement("div",{className:"calendar-container",ref:u},t.createElement(As,{onChange:(e,t)=>{e instanceof Date&&!h(e)&&(s(e.toISOString()),i(!1));const n=x(e instanceof Date?e:null);p((e=>e.isDateValid!==n?{...e,isDateValid:n}:e))},value:d?new Date(d):null,className:"custom-calendar",minDate:g(),tileBackgroundColor:e,tileTextColor:n,tileHoverColor:Tn(e,.2),tileClassName:y,tileDisabled:({date:e,view:t})=>"month"===t&&h(e)})));var b};q(".shipment-container {\n  font-family: Arial, sans-serif;\n  max-width: 400px;\n  padding: 3px;\n  padding-bottom: 0;\n  background-color: #fff;\n  border-radius: 8px;\n  margin: 8px 1rem;\n}\n\n.shipment-header {\n  background-color: #f6efdd;\n  padding: 4px;\n  border-radius: 0px;\n  margin-bottom: 12px;\n}\n\n.shipment-header-text {\n  color: #ae8846;\n  font-size: 14px;\n  font-weight: 500;\n  text-align: center;\n  margin: 0;\n  line-height: normal;\n}\n\n.shipment-option {\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  padding: 12px;\n  margin-bottom: 8px;\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.shipment-option:hover {\n  background-color: #f9fafb;\n}\n\n.shipment-option.selected {\n  border-color: #ae8846;\n  border-width: 1 1 0 2 px;\n  box-shadow: 0 0 0 1px #ae8846;\n}\n\n.option-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.option-title {\n  font-size: 12px;\n  margin-bottom: 4px;\n  font-weight: 600;\n}\n\n.option-subtitle {\n  color: #6b7280;\n  font-size: 10px;\n}\n\n.checkmark {\n  color: #ae8846;\n  font-size: 20px;\n  font-weight: bold;\n}\n\n.availability-check {\n  margin-top: 8px;\n}\n\n.availability-title {\n  font-size: 12px;\n  color: #374151;\n  margin-bottom: 3px;\n  font-weight: 600;\n}\n\n.availability-input {\n  width: 98%;\n  padding: 2px;\n  border: none;\n  border-bottom: 2px solid #d1d5db;\n  border-radius: 0;\n  font-size: 12px;\n  transition: border-color 0.3s ease;\n  background: none;\n  outline: none;\n  font-weight: 500 !important;\n  box-shadow: none;\n  text-shadow: none;\n}\n\n.availability-input:focus {\n  outline: none;\n  border-color: #ae8846;\n  border: none;\n  border-bottom: 2px solid #000000;\n  border-radius: 0;\n  font-weight: 500 !important;\n  box-shadow: none;\n  text-shadow: none;\n}\n\n.availability-input:hover {\n  outline: none;\n  border-color: #ae8846;\n  border: none;\n  border-bottom: 2px solid #000000;\n  border-radius: 0;\n  font-weight: 500 !important;\n}\n\n.error-message {\n  background-color: #fee2e2;\n  color: #b91c1c;\n  padding: 6px;\n  border-bottom-left-radius: 6px;\n  border-bottom-right-radius: 6px;\n  font-size: 13px;\n  margin-top: 10px;\n  display: flex;\n  align-items: center;\n  margin-bottom: -12px;\n  margin-left: -12px;\n  margin-right: -12px;\n  line-height: normal;\n  justify-content: center;\n  text-align: center;\n}\n\n.error-icon {\n  margin-right: 8px;\n}\n\n.slot {\n  width: 98%;\n  margin-top: 4px;\n  padding: 4px;\n  display: flex;\n  justify-content: space-between;\n  align-items: left;\n  flex-direction: column;\n  border-bottom: 2px solid #e5e7eb;\n}\n\n.slot:focus {\n  outline: none;\n  border-color: #ae8846;\n  border: none;\n  border-bottom: 2px solid #000000;\n  border-radius: 0;\n}\n\n.slot:hover {\n  outline: none;\n  border-color: #ae8846;\n  border: none;\n  border-bottom: 2px solid #000000;\n  border-radius: 0;\n}\n\n.slot-label {\n  font-size: 12px;\n  margin-bottom: 4px;\n  color: #374151;\n  margin-left: -4px;\n  font-weight: 600;\n}\n\n.success-message {\n  background-color: #dcf6ee;\n  color: #307d66;\n  padding: 6px;\n  border-bottom-left-radius: 6px;\n  border-bottom-right-radius: 6px;\n  font-size: 13px;\n  margin-top: 6px;\n  display: flex;\n  align-items: center;\n  margin-bottom: -12px;\n  margin-left: -12px;\n  margin-right: -12px;\n  line-height: normal;\n  justify-content: center;\n}");const Fs=({title:e="Cart Item(s) available in NCR only",backgroundColor:n="#F6EFDD78",tag:r="NCR",postalCodeList:i=[110001,110002,110003,110004,110005],themeColor:d,themeTextColor:s,enableSlotPicker:p,deliveryHeaderTitle:u,deliveryAvailableText:m,deliveryNotAvailableText:f,disabledDates:g})=>{const[h,x]=c(!1),[y,b]=Kt(Lo),[v,w]=Kt(rn),[C,k]=Kt(an),E=Zt(on),T=o(null),S=a((e=>{const t=i.includes(e);x(!t),w((e=>({...e,isPostalCodeValid:t})))}),[i,w]);return l((()=>{k("specific")}),[]),l((()=>{void 0!==y&&S(y)}),[y,S]),l((()=>{!1===p&&w((e=>e.isDateValid?e:{...e,isDateValid:!0}))}),[p,w]),t.createElement("div",null,u&&t.createElement("div",{className:"shipment-header"},t.createElement("h2",{className:"shipment-header-text"},u)),t.createElement("div",{className:"availability-check",style:{border:`2px solid ${d||"black"}`,padding:"12px",borderRadius:"8px",margin:"8px 1rem"}},t.createElement("div",{className:"availability-title"},"Check Shipment Availability"),t.createElement("input",{className:"availability-input",type:"text",placeholder:"Enter Postal Code",value:y||"",onChange:e=>{const t=e.target.value;if(""===t)return b(void 0),x(!1),void w((e=>({...e,isPostalCodeValid:!1})));if(!/^\d+$/.test(t))return;const n=Number(t);b(n),x(!1),w((e=>({...e,isPostalCodeValid:!1}))),T.current&&clearTimeout(T.current),T.current=setTimeout((()=>{S(n)}),1e3)},onBlur:()=>{T.current&&clearTimeout(T.current),void 0!==y&&S(y)}}),h&&t.createElement("div",{className:"error-message"},f||"Cart items aren't available at your address"),v.isPostalCodeValid&&p&&t.createElement("div",{className:"slot"},t.createElement("label",{className:"slot-label"},"Select Delivery Slot"),t.createElement(Os,{themeColor:d,themeTextColor:s,disabledDates:g})),E&&t.createElement("div",{className:"success-message"},m||"Voila! Local delivery is available")))},Ms=({postalCodeList:e=[110001,110002,110003,110004,110005],themeColor:n,themeTextColor:r,enableSlotPicker:i,disabledDates:d})=>{const[s,p]=c("standard"),[u,m]=c(!1),[f,g]=Kt(Lo),[h,x]=Kt(rn),[y,b]=Kt(an),v=Zt(on),w=o(null),C=a((t=>{const n=e.includes(t);t?(m(!n),x((e=>({...e,isPostalCodeValid:n})))):x((e=>({...e,isPostalCodeValid:!1})))}),[e,x]);return l((()=>{b("delhi-ncr"===s?"specific":"standard"),f&&C(f)}),[s]),t.createElement("div",{className:"shipment-container"},t.createElement("div",{className:"shipment-header"},t.createElement("p",{className:"shipment-header-text"},"Cart Item(s) are available for standard shipment")),t.createElement("div",{className:"shipment-option "+("standard"===s?"selected":""),onClick:()=>p("standard")},t.createElement("div",{className:"option-content"},t.createElement("div",{className:"option-text"},t.createElement("div",{className:"option-title"},"Pan India"),t.createElement("div",{className:"option-subtitle"},"7-10 days")),"standard"===s&&t.createElement(lt,{className:"checkmark"}))),t.createElement("div",{className:"shipment-option "+("delhi-ncr"===s?"selected":""),onClick:()=>p("delhi-ncr")},t.createElement("div",{className:"option-content"},t.createElement("div",{className:"option-text"},t.createElement("div",{className:"option-title"},"Delhi NCR"),t.createElement("div",{className:"option-subtitle"},"Single day delivery")),"delhi-ncr"===s&&t.createElement(lt,{className:"checkmark"})),"delhi-ncr"===s&&t.createElement("div",{className:"availability-check"},t.createElement("div",{className:"availability-title"},"Check Product Availability"),t.createElement("input",{className:"availability-input",type:"text",placeholder:"Enter Postal Code",value:f,onChange:e=>{const t=e.target.value;if(""===t)return g(void 0),m(!1),void x((e=>({...e,isPostalCodeValid:!1})));if(!/^\d+$/.test(t))return;const n=Number(t);g(n),m(!1),x((e=>({...e,isPostalCodeValid:!1}))),w.current&&clearTimeout(w.current),w.current=setTimeout((()=>{C(n)}),1e3)},onBlur:()=>{w.current&&clearTimeout(w.current),C(f)}}),u&&t.createElement("div",{className:"error-message"},"Cart items aren't available on your selected pincode for quick shipment"),h.isPostalCodeValid&&i&&t.createElement("div",{className:"slot"},t.createElement("label",{className:"slot-label"},"Pick a Selivery Slot"),t.createElement(Os,{themeColor:n,themeTextColor:r,disabledDates:d})),v&&t.createElement("div",{className:"success-message"},"Voila! Local delivery is available"))))},Rs=nn("gift_wrap",!1);nn("gift_wrap_id","");const Ls=x.div`
   display: flex;
   flex-direction: column;
-  // margin-bottom: 20px;
-  margin: 16px;
+  margin-left: 16px;
+  margin-right: 16px;
 `,js=x.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: fit-content;
   padding: 6px 12px;
-  border-radius: 5px;
-  border-width: 2px;
-  border-color: lightgray;
+  border-radius: 5px !important;
+  border-width: 2px !important;
+  border-color: lightgray !important;
   // box-shadow: 0px 0px 2px 2px rgb(193, 193, 193);
 `,Vs=x.span`
   display: flex;
@@ -2437,7 +2437,7 @@ import*as e from"react";import t,{forwardRef as n,useImperativeHandle as r,useRe
     transform: scale(1.01);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
   }
-`,Up={showPrice:!0,productImage:{id:"",path:""},buyNowCtaTitle:"BUY NOW",desktopBarType:"stretch",showProductName:!0,showBuyNowButton:!1,showProductImage:!0,addToCartCtaTitle:"ADD TO CART",showAddToCartButton:!0,showVariantSelector:!1,productInfoVisibility:!0,excludeProducts:[],showBarOnDesktop:!0,ctaButtonFontSize:18,startsAppearingAtHeight:200,fullyAppearsAtHeight:400},Qp=({showStickyCart:e,product:n,addCartItem:r,onSetLoading:i,themeColor:d,cartData:s,isCartOpen:p,setIsCartOpen:u,ctaButtonBackgroundColor:m,ctaButtonTextColor:f,addToStickyCart:g,cartComponentsCornerType:h,cartComponentsCornerRadius:x,themeTextColor:y,stickyCartCustomizationData:b,checkoutFunction:v,backgroundColor:w,primaryTextColor:C,comboBundleData:k,comboBundleAddToCartFunction:E})=>{const[T,S]=c(""),[$,B]=c(null),[z,I]=c({}),N=Ta(),[D,_]=c(null),P=o(null);l((()=>{const e=e=>{P.current&&!P.current.contains(e.target)&&_(null)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[]);const A=a((()=>k&&"combo"===k.type?k?.products?.[0]?.productDetails?.variants?.edges?.find((e=>e?.node?.availableForSale))?.node:n?.variants?.find((e=>e?.available))),[k,n]),[O,F]=c((()=>{if(!k||"combo"!==k.type)return{};const e={};return k?.products?.forEach(((t,n)=>{const r=t?.productDetails?.variants?.edges?.find((e=>e?.node?.availableForSale))?.node;r&&(e[n]=r.id)})),e})),M=a((e=>{if(!k||"combo"!==k.type)return;const t={};k?.products?.forEach(((n,r)=>{const o=n?.productDetails?.variants?.edges?.find((t=>{const r=t?.node;return n?.productDetails?.options?.every(((t,n)=>{const o=e?.[t?.name],a=r?.title?.split(" / ")?.at(n);return!(!o||!a)&&o.trim().toLowerCase()===a.trim().toLowerCase()}))}));o?.node?.id&&(t[r]=o.node.id)})),Object.keys(t).length>0&&F((e=>({...e,...t})))}),[k]);l((()=>{const e=A();if(e){S(String(e.id)),B(e);const t={};n?.options&&Array.isArray(n.options)&&n.options.forEach(((n,r)=>{const o=`option${r+1}`;e?.[o]&&(t[n?.name]=e[o])})),I(t)}}),[n,A]);const R=a((()=>new URLSearchParams(window.location.search).get("variant")||""),[]),L=()=>{const e=R();if(e){const t=n?.variants?.find((t=>String(t?.id)===String(e)));if(t&&t?.available){S(String(t.id)),B(t);const e={};n?.options?.forEach(((n,r)=>{const o=`option${r+1}`;t?.[o]&&(e[n?.name]=t[o])})),I(e)}else{const e=A();e&&(S(String(e.id)),B(e))}}};l((()=>{L();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",L),()=>{t=!1,window.removeEventListener("urlChange",L),window.history.pushState=n,window.history.replaceState=r}}),[R,n,A,$,T]);const j=o(null),[V,W]=c(1),H=yn(s,s?.currency);l((()=>{(async()=>{try{n&&T&&B(n?.variants?.filter((e=>String(e?.id)===String(T)))[0])}catch(e){console.error("Error getting selected product variant id")}})()}),[n,T]);const{cartLoading:q}=dn(),U=o(null),[Q,G]=c(0);l((()=>{U.current&&G(U.current.offsetWidth)}),[]);const Y=n?.options?.find((e=>e?.name?.toLowerCase()?.includes("color")))?.name,Z=Y?z?.[Y]:null,X=b&&(K=b,0!==Object.keys(K).length||K.constructor!==Object)?b:Up;var K;const{showProductName:J,showPrice:ee,showVariantSelector:te,showBuyNowButton:ne,showAddToCartButton:re,desktopBarType:oe,showProductImage:ae,buyNowCtaTitle:ie,addToCartCtaTitle:le,productInfoVisibility:ce,showBarOnDesktop:de,ctaButtonFontSize:se,startsAppearingAtHeight:pe,fullyAppearsAtHeight:ue,topRibbonText:me}=X,[fe,ge]=c(0),[he,xe]=c(100),[ye,be]=c(!1);if(l((()=>{const e=()=>{const e=window.scrollY;document.documentElement.scrollHeight;const t=pe||200,n=ue||400;if(e>t){const r=Math.min((e-t)/(n-t),1);ge(r),xe(100-100*r)}else ge(0),xe(100)};return window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e)}}),[]),l((()=>{const e=()=>{const e=window.innerWidth<768;be(e||!1!==de)};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[de]),n?.variants?.length<1)return null;const ve=n?.available??!0,we=A(),Ce=k&&"combo"===k.type?k?.products?.[0]?.productDetails?.variants?.edges?.find((e=>e?.node?.id===O?.[0]))?.node?.price:$?.price??we?.price??n?.variants?.[0]?.price;if(0===Number(Ce))return null;if(!e||!ye)return null;if(b?.excludeProducts?.includes(n?.handle))return null;const ke=k&&"combo"===k.type?Object.values(O).length>0:$?.available??!0;return t.createElement(Mp,{className:"yt-sticky-bar-container",$opacity:fe,$translateY:he,$desktopBarType:oe||"stretch"},t.createElement(Rp,{className:"yt-sticky-bar-inner-container",$desktopBarType:oe||"stretch",$themeColor:d,$cornerType:h??"sharp",$cornerRadius:x??20,$themeTextColor:y,$productInfoVisibility:ce,$topRibbonText:me,$backgroundColor:w},ce&&t.createElement(Lp,null,ae&&t.createElement(jp,{className:"yt-sticky-bar-product-image",src:((e,t)=>"string"==typeof e?.featured_image?e.featured_image:e?.featured_image?.src?e.featured_image.src:t?.featured_image)($,n),alt:$?.name}),t.createElement(Vp,{ref:U,className:"yt-sticky-bar-product-details"},J&&t.createElement("div",{style:{display:"flex",alignItems:"center",gap:"8px"}},t.createElement("span",{style:{fontSize:"20px",fontWeight:"500",color:C,display:"-webkit-box",WebkitLineClamp:1,WebkitBoxOrient:"vertical",overflow:"hidden",textOverflow:"ellipsis",lineHeight:"normal"}},`${n?.title}`),Z&&t.createElement("span",{style:{fontSize:"11px",color:"#666",backgroundColor:"#f1f1f1",padding:"2px 6px",borderRadius:"10px",border:"1px solid #ddd"}},Z)),n?.variants?.length>1&&te&&t.createElement(Op,{className:"yt-sticky-bar-option-container",ref:P},n?.options?.map((e=>{const r=N?.options?.find((t=>t.name.trim().toLowerCase()===e.name.trim().toLowerCase())),o=z[e.name],a=D===e.name,i=t=>{((e,t)=>{const r={...z,[e]:t};I(r);const o=n?.variants?.find((e=>n?.options?.every(((t,n)=>{const o=r?.[t?.name],a=e?.[`option${n+1}`];return"string"==typeof o&&"string"==typeof a?o.trim().toLowerCase()===a.trim().toLowerCase():o===a}))));o&&(S(String(o.id)),B(o)),k&&"combo"===k?.type&&M(r)})(e.name,t),_(null)},l=Ea(r,o);return t.createElement("div",{key:e.name,style:{display:"flex",alignItems:"center",gap:"8px"}},t.createElement(Fp,null,e.name),t.createElement(zp,null,t.createElement(Ip,{onClick:()=>{_(a?null:e.name)},className:"yt-sticky-bar-dropdown-button"},"color"===r?.type&&l?.value?t.createElement(_p,{$colorValue:l.value}):"image"===r?.type&&l?.value?t.createElement(Pp,{src:l.value}):null,o,t.createElement(Ap,{size:8,$isOpen:a})),a&&t.createElement(Np,{$backgroundColor:w,className:"yt-sticky-bar-dropdown-panel"},e.values.map((e=>{const n=Ea(r,e);return t.createElement(Dp,{className:"yt-sticky-bar-dropdown-item",key:e,onClick:()=>i(e)},"color"===r?.type&&n?.value?t.createElement(_p,{$colorValue:n.value}):"image"===r?.type&&n?.value?t.createElement(Pp,{src:n.value}):null,e)})))))}))),ee&&t.createElement(t.Fragment,null,$?.compare_at_price&&$?.compare_at_price>$?.price?t.createElement("div",{style:{display:"flex",flexDirection:"row",gap:5,alignItems:"center"}},t.createElement("span",{style:{fontWeight:"500",fontSize:18,color:C},className:"yt-sticky-bar-product-price"},`${H}`,hn($?.price,s?.currency)),t.createElement("span",{style:{textDecoration:"line-through",color:"#6b7280",fontSize:14},className:"yt-sticky-bar-product-compare-price"},`${H}`,hn($?.compare_at_price,s?.currency)),t.createElement("span",{style:{backgroundColor:d??"black",color:y??"white",padding:"3px 9px",fontSize:"12px",borderRadius:"rounded"===h?`${x}px`:"0"},className:"yt-sticky-bar-product-discount"},"Save ",`${H}`,hn($?.compare_at_price-$?.price,s?.currency))):t.createElement(t.Fragment,null,t.createElement("span",{style:{fontWeight:"500",fontSize:18,color:C},className:"yt-sticky-bar-product-price"},`${H}`,hn($?.price,s?.currency)))),t.createElement("span",{style:{color:"#6E747B",fontSize:10},className:"yt-sticky-bar-product-tax-inclusion"},"Inclusive of all taxes"))),ve&&t.createElement(Wp,{className:"yt-sticky-bar-product-line-item-control",$flexDirection:ce?"row":"column"},re&&t.createElement(qp,{ref:j,onClick:async()=>{if(k&&"combo"===k.type){if(!E)return void console.error("[StickyCart.tsx] comboBundleAddToCartFunction is undefined");const e=Object.entries(O);if(0===e.length)return;const t=e.map((([,e])=>e)),n=e.map((([e,t])=>{const n=k?.products?.[Number(e)],r=n?.productDetails?.variants?.edges?.find((e=>e?.node?.id===t))?.node;return r?{variantId:t,price:Number(r?.price),compareAtPrice:Number(r?.compareAtPrice||r?.price)}:null})).filter((e=>null!==e)),r=n.reduce(((e,t)=>e+Math.max(t.compareAtPrice,t.price)),0),o=n.reduce(((e,t)=>e+t.price),0);let a=Math.min(r,o);k?.percentageOff?a=o*(1-k.percentageOff/100):k?.dealAmount?a=k.dealAmount:k?.amountOff&&(a=o-k.amountOff);const i=n.map((({variantId:e,price:t})=>({variantId:e,price:t})));await E(Number(r.toFixed(2)),t,Number(a.toFixed(2)),i)}else g&&await g(String(T)??String(n?.variants[0]?.id),V)},disabled:q.cartLoading||!ke,$bgColor:ke?m:"#d1d5db",$textColor:ke?f:"#6b7280",className:"yt-sticky-add-to-cart-button",$cornerType:h??"sharp",$cornerRadius:x??20,$fontSize:se,style:{cursor:ke?"pointer":"not-allowed",opacity:ke?1:.6}},q.cartLoading?t.createElement(ta,{color:"white",loading:q.cartLoading,size:15}):t.createElement(t.Fragment,null,ke?le??"Add to Cart":"Out of Stock")),ne&&t.createElement(Hp,{onClick:async e=>{try{v&&await v(e)}catch(e){console.error("Error checking out from sticky bar")}},id:"yt-checkout-button",className:"yt-checkout-button",disabled:q.cartLoading||!ke,$bgColor:ke?d:"#d1d5db",$textColor:ke?y:"#6b7280",$cornerType:h??"sharp",$cornerRadius:x??20,$fontSize:se,style:{cursor:ke?"pointer":"not-allowed",opacity:ke?1:.6}},q.cartLoading?t.createElement(ta,{color:"white",loading:q.cartLoading,size:15}):t.createElement(t.Fragment,null,ke?ie??"Buy Now":"Out of Stock")))))},Gp=x.div`
+`,Up={showPrice:!0,productImage:{id:"",path:""},buyNowCtaTitle:"BUY NOW",desktopBarType:"stretch",showProductName:!0,showBuyNowButton:!1,showProductImage:!0,addToCartCtaTitle:"ADD TO CART",showAddToCartButton:!0,showVariantSelector:!1,productInfoVisibility:!0,excludeProducts:[],showBarOnDesktop:!0,ctaButtonFontSize:18,startsAppearingAtHeight:200,fullyAppearsAtHeight:400},Qp=({showStickyCart:e,product:n,addCartItem:r,onSetLoading:i,themeColor:d,cartData:s,isCartOpen:p,setIsCartOpen:u,ctaButtonBackgroundColor:m,ctaButtonTextColor:f,addToStickyCart:g,cartComponentsCornerType:h,cartComponentsCornerRadius:x,themeTextColor:y,stickyCartCustomizationData:b,checkoutFunction:v,backgroundColor:w,primaryTextColor:C,comboBundleData:k,comboBundleAddToCartFunction:E})=>{const[T,S]=c(""),[$,B]=c(null),[z,I]=c({}),N=Ta(),[D,_]=c(null),P=o(null);l((()=>{const e=e=>{P.current&&!P.current.contains(e.target)&&_(null)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[]);const A=a((()=>k&&"combo"===k.type?k?.products?.[0]?.productDetails?.variants?.edges?.find((e=>e?.node?.availableForSale))?.node:n?.variants?.find((e=>e?.available))),[k,n]),[O,F]=c((()=>{if(!k||"combo"!==k.type)return{};const e={};return k?.products?.forEach(((t,n)=>{const r=t?.productDetails?.variants?.edges?.find((e=>e?.node?.availableForSale))?.node;r&&(e[n]=r.id)})),e})),M=a((e=>{if(!k||"combo"!==k.type)return;const t={};k?.products?.forEach(((n,r)=>{const o=n?.productDetails?.variants?.edges?.find((t=>{const r=t?.node;return n?.productDetails?.options?.every(((t,n)=>{const o=e?.[t?.name],a=r?.title?.split(" / ")?.at(n);return!(!o||!a)&&o.trim().toLowerCase()===a.trim().toLowerCase()}))}));o?.node?.id&&(t[r]=o.node.id)})),Object.keys(t).length>0&&F((e=>({...e,...t})))}),[k]);l((()=>{const e=A();if(e){S(String(e.id)),B(e);const t={};n?.options&&Array.isArray(n.options)&&n.options.forEach(((n,r)=>{const o=`option${r+1}`;e?.[o]&&(t[n?.name]=e[o])})),I(t)}}),[n,A]);const R=a((()=>new URLSearchParams(window.location.search).get("variant")||""),[]),L=()=>{const e=R();if(e){const t=n?.variants?.find((t=>String(t?.id)===String(e)));if(t&&t?.available){S(String(t.id)),B(t);const e={};n?.options?.forEach(((n,r)=>{const o=`option${r+1}`;t?.[o]&&(e[n?.name]=t[o])})),I(e)}else{const e=A();e&&(S(String(e.id)),B(e))}}};l((()=>{L();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",L),()=>{t=!1,window.removeEventListener("urlChange",L),window.history.pushState=n,window.history.replaceState=r}}),[R,n,A,$,T]);const j=o(null),[V,W]=c(1),H=yn(s,s?.currency);l((()=>{(async()=>{try{n&&T&&B(n?.variants?.filter((e=>String(e?.id)===String(T)))[0])}catch(e){console.error("Error getting selected product variant id")}})()}),[n,T]);const{cartLoading:q}=dn(),U=o(null),[Q,G]=c(0);l((()=>{U.current&&G(U.current.offsetWidth)}),[]);const Y=n?.options?.find((e=>e?.name?.toLowerCase()?.includes("color")))?.name,Z=Y?z?.[Y]:null,X=b&&(K=b,0!==Object.keys(K).length||K.constructor!==Object)?b:Up;var K;const{showProductName:J,showPrice:ee,showVariantSelector:te,showBuyNowButton:ne,showAddToCartButton:re,desktopBarType:oe,showProductImage:ae,buyNowCtaTitle:ie,addToCartCtaTitle:le,productInfoVisibility:ce,showBarOnDesktop:de,ctaButtonFontSize:se,startsAppearingAtHeight:pe,fullyAppearsAtHeight:ue,topRibbonText:me}=X,[fe,ge]=c(0),[he,xe]=c(100),[ye,be]=c(!1);if(l((()=>{const e=()=>{const e=window.scrollY;document.documentElement.scrollHeight;const t=pe||200,n=ue||400;if(e>t){const r=Math.min((e-t)/(n-t),1);ge(r),xe(100-100*r)}else ge(0),xe(100)};return window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e)}}),[]),l((()=>{const e=()=>{const e=window.innerWidth<768;be(e||!1!==de)};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[de]),n?.variants?.length<1)return null;const ve=n?.available??!0,we=A(),Ce=k&&"combo"===k.type?k?.products?.[0]?.productDetails?.variants?.edges?.find((e=>e?.node?.id===O?.[0]))?.node?.price:$?.price??we?.price??n?.variants?.[0]?.price;if(0===Number(Ce))return null;if(!e||!ye)return null;if(b?.excludeProducts?.includes(n?.handle))return null;const ke=k&&"combo"===k.type?Object.values(O).length>0:$?.available??!0;return t.createElement(Mp,{className:"yt-sticky-bar-container",$opacity:fe,$translateY:he,$desktopBarType:oe||"stretch"},t.createElement(Rp,{className:"yt-sticky-bar-inner-container",$desktopBarType:oe||"stretch",$themeColor:d,$cornerType:h??"sharp",$cornerRadius:x??20,$themeTextColor:y,$productInfoVisibility:ce,$topRibbonText:me,$backgroundColor:w},ce&&t.createElement(Lp,null,ae&&t.createElement(jp,{className:"yt-sticky-bar-product-image",src:((e,t)=>"string"==typeof e?.featured_image?e.featured_image:e?.featured_image?.src?e.featured_image.src:t?.featured_image)($,n),alt:$?.name}),t.createElement(Vp,{ref:U,className:"yt-sticky-bar-product-details"},J&&t.createElement("div",{style:{display:"flex",alignItems:"center",gap:"8px"}},t.createElement("span",{style:{fontSize:"20px",fontWeight:"500",color:C,display:"-webkit-box",WebkitLineClamp:1,WebkitBoxOrient:"vertical",overflow:"hidden",textOverflow:"ellipsis",lineHeight:"normal"}},`${n?.title}`),Z&&t.createElement("span",{style:{fontSize:"11px",color:"#666",backgroundColor:"#f1f1f1",padding:"2px 6px",borderRadius:"10px",border:"1px solid #ddd"}},Z)),n?.variants?.length>1&&te&&t.createElement(Op,{className:"yt-sticky-bar-option-container",ref:P},n?.options?.map((e=>{const r=N?.options?.find((t=>t.name.trim().toLowerCase()===e.name.trim().toLowerCase())),o=z[e.name],a=D===e.name,i=t=>{((e,t)=>{const r={...z,[e]:t};I(r);const o=n?.variants?.find((e=>n?.options?.every(((t,n)=>{const o=r?.[t?.name],a=e?.[`option${n+1}`];return"string"==typeof o&&"string"==typeof a?o.trim().toLowerCase()===a.trim().toLowerCase():o===a}))));o&&(S(String(o.id)),B(o)),k&&"combo"===k?.type&&M(r)})(e.name,t),_(null)},l=Ea(r,o);return t.createElement("div",{key:e.name,style:{display:"flex",alignItems:"center",gap:"8px"}},t.createElement(Fp,null,e.name),t.createElement(zp,null,t.createElement(Ip,{onClick:()=>{_(a?null:e.name)},className:"yt-sticky-bar-dropdown-button"},"color"===r?.type&&l?.value?t.createElement(_p,{$colorValue:l.value}):"image"===r?.type&&l?.value?t.createElement(Pp,{src:l.value}):null,o,t.createElement(Ap,{size:8,$isOpen:a})),a&&t.createElement(Np,{$backgroundColor:w,className:"yt-sticky-bar-dropdown-panel"},e.values.map((e=>{const n=Ea(r,e);return t.createElement(Dp,{className:"yt-sticky-bar-dropdown-item",key:e,onClick:()=>i(e)},"color"===r?.type&&n?.value?t.createElement(_p,{$colorValue:n.value}):"image"===r?.type&&n?.value?t.createElement(Pp,{src:n.value}):null,e)})))))}))),ee&&t.createElement(t.Fragment,null,$?.compare_at_price&&$?.compare_at_price>$?.price?t.createElement("div",{style:{display:"flex",flexDirection:"row",gap:5,alignItems:"center"}},t.createElement("span",{style:{fontWeight:"500",fontSize:18,color:C},className:"yt-sticky-bar-product-price"},`${H}`,hn($?.price,s?.currency)),t.createElement("span",{style:{textDecoration:"line-through",color:"#6b7280",fontSize:14},className:"yt-sticky-bar-product-compare-price"},`${H}`,hn($?.compare_at_price,s?.currency)),t.createElement("span",{style:{backgroundColor:d??"black",color:y??"white",padding:"3px 9px",fontSize:"12px",borderRadius:"rounded"===h?`${x}px`:"0"},className:"yt-sticky-bar-product-discount"},"Save ",`${H}`,hn($?.compare_at_price-$?.price,s?.currency))):t.createElement(t.Fragment,null,t.createElement("span",{style:{fontWeight:"500",fontSize:18,color:C},className:"yt-sticky-bar-product-price"},`${H}`,hn($?.price,s?.currency)))),t.createElement("span",{style:{color:"#6E747B",fontSize:10},className:"yt-sticky-bar-product-tax-inclusion"},"Inclusive of all taxes"))),ve&&t.createElement(Wp,{className:"yt-sticky-bar-product-line-item-control",$flexDirection:ce?"row":"column"},re&&t.createElement(qp,{ref:j,onClick:async()=>{if(k&&"combo"===k.type){if(!E)return void console.error("[StickyCart.tsx] comboBundleAddToCartFunction is undefined");const e=Object.entries(O);if(0===e.length)return;const t=e.map((([,e])=>e)),n=e.map((([e,t])=>{const n=k?.products?.[Number(e)],r=n?.productDetails?.variants?.edges?.find((e=>e?.node?.id===t))?.node;return r?{variantId:t,price:Number(r?.price),compareAtPrice:Number(r?.compareAtPrice||r?.price)}:null})).filter((e=>null!==e)),r=n.reduce(((e,t)=>e+Math.max(t.compareAtPrice,t.price)),0),o=n.reduce(((e,t)=>e+t.price),0);let a=Math.min(r,o);k?.percentageOff?a=o*(1-k.percentageOff/100):k?.dealAmount?a=k.dealAmount:k?.amountOff&&(a=o-k.amountOff);const i=n.map((({variantId:e,price:t})=>({variantId:e,price:t})));await E(Number(r.toFixed(2)),t,Number(a.toFixed(2)),i)}else g&&await g(String(T)??String(n?.variants[0]?.id),V)},disabled:q.cartLoading||!ke,$bgColor:ke?m:"#d1d5db",$textColor:ke?f:"#6b7280",className:"yt-sticky-add-to-cart-button",$cornerType:h??"sharp",$cornerRadius:x??20,$fontSize:se,style:{cursor:ke?"pointer":"not-allowed",opacity:ke?1:.6}},q.cartLoading?t.createElement(ta,{color:"white",loading:q.cartLoading,size:15}):t.createElement(t.Fragment,null,ke?le??"Add to Cart":"Out of Stock")),ne&&t.createElement(Hp,{onClick:async()=>{try{v&&await v(String(T)??String(n?.variants[0]?.id),V)}catch(e){console.error("Error checking out from sticky bar")}},id:"yt-checkout-button",className:"yt-checkout-button",disabled:q.cartLoading||!ke,$bgColor:ke?d:"#d1d5db",$textColor:ke?y:"#6b7280",$cornerType:h??"sharp",$cornerRadius:x??20,$fontSize:se,style:{cursor:ke?"pointer":"not-allowed",opacity:ke?1:.6}},q.cartLoading?t.createElement(ta,{color:"white",loading:q.cartLoading,size:15}):t.createElement(t.Fragment,null,ke?ie??"Buy Now":"Out of Stock")))))},Gp=x.div`
   width: 100%;
   height: 100%;
   display: flex;

package/dist/esm/types/components/Cart/Cart.d.ts

@@ -200,7 +200,7 @@ export interface CartProps {
     cartOffersCarousalData?: CartOffersCarousalProps;
     freebieMilestoneData?: freebieMilestoneProps;
     cartOffersCarouselHeight?: number;
-    stickyBarBuyNowFunction?: (event: any) => Promise<any>;
+    stickyBarBuyNowFunction?: (variantId: string, quantity: number) => Promise<void>;
     gstSectionCustomizationData?: GSTSectionCustomizationProps;
     noteSectionTitle?: string;
     checkoutSectionMessage?: string;

package/dist/esm/types/components/Cart/StickyCart.d.ts

@@ -39,7 +39,7 @@ export type StickyAddToCartProps = {
     cartComponentsCornerType?: "rounded" | "sharp";
     cartComponentsCornerRadius?: number;
     stickyCartCustomizationData?: stickyCartCustomizationDataProps;
-    checkoutFunction?: (event: any) => Promise<any>;
+    checkoutFunction?: (variantId: string, quantity: number) => Promise<void>;
     backgroundColor?: string;
     primaryTextColor?: string;
     comboBundleData?: BundlePayload;

package/dist/index.d.ts

@@ -701,7 +701,7 @@ interface CartProps {
     cartOffersCarousalData?: CartOffersCarousalProps;
     freebieMilestoneData?: freebieMilestoneProps;
     cartOffersCarouselHeight?: number;
-    stickyBarBuyNowFunction?: (event: any) => Promise<any>;
+    stickyBarBuyNowFunction?: (variantId: string, quantity: number) => Promise<void>;
     gstSectionCustomizationData?: GSTSectionCustomizationProps;
     noteSectionTitle?: string;
     checkoutSectionMessage?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-uikit",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "description": "YourToken UI Kit",
   "scripts": {
     "rollup": "tsc && rollup -c",