yt-uikit 0.8.23-gift-wrap-product-image.0 → 0.8.23-gift-wrap-product-image.2

package/dist/esm/index.js

@@ -1898,10 +1898,14 @@ import*as e from"react";import t,{forwardRef as n,useImperativeHandle as r,useRe
     color: ${e=>e.tileTextColor||"#374151"} !important;
   }
 `,jd=({themeColor:e,themeTextColor:n,disabledDates:r=[]})=>{const[o,i]=c(!1),[s,d]=un(wn),p=pn(yn),u=t.useRef(null),m=s?new Date(s):null,f=Array.isArray(r)?r:[r],g=a(()=>{const e=new Date;return e.setDate(e.getDate()+1),e},[]),x=a(e=>f.some(t=>t instanceof Date&&(e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate())),[f]),h=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())&&!x(n)},[g,x]);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=h(m);p(t=>t.isDateValid!==e?{...t,isDateValid:e}:t)},[m,h,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())&&!x(n)){const e=s?new Date(s):null;return e&&n.getFullYear()===e.getFullYear()&&n.getMonth()===e.getMonth()&&n.getDate()===e.getDate()?"active-date":"black-date"}}return null},[g,s,x]);return t.createElement("div",{className:"custom-date-picker"},t.createElement("div",{className:"date-display",onClick:()=>i(!o)},t.createElement("span",{style:{fontSize:"12px"}},(b=s?new Date(s):null)?b.toLocaleDateString("en-GB",{day:"2-digit",month:"2-digit",year:"2-digit"}).replace(/\//g,"/"):"Select a date"),t.createElement(A,null)),o&&t.createElement("div",{className:"calendar-container",ref:u},t.createElement(Ld,{onChange:(e,t)=>{e instanceof Date&&!x(e)&&(d(e.toISOString()),i(!1));const n=h(e instanceof Date?e:null);p(e=>e.isDateValid!==n?{...e,isDateValid:n}:e)},value:s?new Date(s):null,className:"custom-calendar",minDate:g(),tileBackgroundColor:e,tileTextColor:n,tileHoverColor:An(e,.2),tileClassName:y,tileDisabled:({date:e,view:t})=>"month"===t&&x(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 Vd=({title:e="Cart Item(s) available in NCR only",backgroundColor:n="#F6EFDD78",tag:r="NCR",postalCodeList:i=[110001,110002,110003,110004,110005],themeColor:s,themeTextColor:d,enableSlotPicker:p,deliveryHeaderTitle:u,deliveryAvailableText:m,deliveryNotAvailableText:f,disabledDates:g})=>{const[x,h]=c(!1),[y,b]=un(Go),[v,w]=un(yn),[C,k]=un(vn),E=dn(bn),S=o(null),T=a(e=>{const t=i.includes(e);h(!t),w(e=>({...e,isPostalCodeValid:t}))},[i,w]);return l(()=>{k("specific")},[]),l(()=>{void 0!==y&&T(y)},[y,T]),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 ${s||"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),h(!1),void w(e=>({...e,isPostalCodeValid:!1}));if(!/^\d+$/.test(t))return;const n=Number(t);b(n),h(!1),w(e=>({...e,isPostalCodeValid:!1})),S.current&&clearTimeout(S.current),S.current=setTimeout(()=>{T(n)},1e3)},onBlur:()=>{S.current&&clearTimeout(S.current),void 0!==y&&T(y)}}),x&&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(jd,{themeColor:s,themeTextColor:d,disabledDates:g})),E&&t.createElement("div",{className:"success-message"},m||"Voila! Local delivery is available")))},Wd=({postalCodeList:e=[110001,110002,110003,110004,110005],themeColor:n,themeTextColor:r,enableSlotPicker:i,disabledDates:s})=>{const[d,p]=c("standard"),[u,m]=c(!1),[f,g]=un(Go),[x,h]=un(yn),[y,b]=un(vn),v=dn(bn),w=o(null),C=a(t=>{const n=e.includes(t);t?(m(!n),h(e=>({...e,isPostalCodeValid:n}))):h(e=>({...e,isPostalCodeValid:!1}))},[e,h]);return l(()=>{b("delhi-ncr"===d?"specific":"standard"),f&&C(f)},[d]),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"===d?"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"===d&&t.createElement(lt,{className:"checkmark"}))),t.createElement("div",{className:"shipment-option "+("delhi-ncr"===d?"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"===d&&t.createElement(lt,{className:"checkmark"})),"delhi-ncr"===d&&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 h(e=>({...e,isPostalCodeValid:!1}));if(!/^\d+$/.test(t))return;const n=Number(t);g(n),m(!1),h(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"),x.isPostalCodeValid&&i&&t.createElement("div",{className:"slot"},t.createElement("label",{className:"slot-label"},"Pick a Selivery Slot"),t.createElement(jd,{themeColor:n,themeTextColor:r,disabledDates:s})),v&&t.createElement("div",{className:"success-message"},"Voila! Local delivery is available"))))},Hd=hn("gift_wrap",!1);hn("gift_wrap_id","");const qd=h.img`
-  width: 24px;
-  height: 24px;
+  width: 24px !important;
+  height: 24px !important;
+  min-width: 24px !important;
+  min-height: 24px !important;
   object-fit: cover;
   border-radius: 4px;
+  display: block !important;
+  flex-shrink: 0;
 `,Ud=h.div`
   display: flex;
   flex-direction: column;
@@ -1939,7 +1943,7 @@ import*as e from"react";import t,{forwardRef as n,useImperativeHandle as r,useRe
   font-size: 12px;
   margin-top: 5px;
   padding: 0 20px;
-`,Xd=e=>{if("string"!=typeof e)return e;const t=e.match(/^gid:\/\/shopify\/\w+\/(\d+)$/);return t?t[1]:e};function Kd({themeColor:e,id:n,showPrice:r,detail:o,errorText:a,customText:i,showGiftIcon:s,showProductImage:d,addCartItem:p,removeCartItem:u}){const[m,f]=un(Hd),[g,x]=c(null),[h,y]=c(!1),[b,v]=c(null),{setLoading:w}=kn();l(()=>{o?.availableForSale&&y(!0),o?.variants?.nodes&&o?.variants?.nodes.length>0&&x(o?.variants?.nodes[0])},[o]);const C=g?.price?.amount,k=g?.image?.url||o?.featuredImage?.url;return h?t.createElement(Ud,null,t.createElement(Qd,null,t.createElement(Yd,null,d&&k?t.createElement(qd,{src:k,alt:"Gift wrap",className:"yt-cart-gift-wrap-product-image"}):s?t.createElement(pt,{size:24,color:e,style:{height:"24px",width:"24px"}}):null,i||"+ Gift-Wrap",r?t.createElement("span",{style:{color:e}},"₹",Number(C).toFixed(0)):""),t.createElement(Gd,{type:"checkbox",checked:m,onChange:async()=>{try{w(!0,!0),v(null),f(!m),!m&&p&&g?await p(Xd(g?.id),1):m&&u&&g&&await u(Xd(g?.id),"giftWrap"),w(!1,!1)}catch(e){w(!1,!1),v("Failed to add to cart"),f(m),console.error("Error updating gift wrap:",e)}},$themeColor:e,disabled:!h})),b&&t.createElement(Zd,null,b)):null}const Jd=h.div`
+`,Xd=e=>{if("string"!=typeof e)return e;const t=e.match(/^gid:\/\/shopify\/\w+\/(\d+)$/);return t?t[1]:e};function Kd({themeColor:e,id:n,showPrice:r,detail:o,errorText:a,customText:i,showGiftIcon:s,showProductImage:d,addCartItem:p,removeCartItem:u}){const[m,f]=un(Hd),[g,x]=c(null),[h,y]=c(!1),[b,v]=c(null),{setLoading:w}=kn();l(()=>{o?.availableForSale&&y(!0),o?.variants?.nodes&&o?.variants?.nodes.length>0&&x(o?.variants?.nodes[0])},[o]);const C=g?.price?.amount,k=g?.image?.url||o?.featuredImage?.url;return console.log("yt::kit gift wrap showProductImage:",d),h?t.createElement(Ud,null,t.createElement(Qd,null,t.createElement(Yd,null,d&&k?t.createElement(qd,{src:k,alt:"Gift wrap",className:"yt-cart-gift-wrap-product-image"}):s?t.createElement(pt,{size:24,color:e,style:{height:"24px",width:"24px"}}):null,i||"+ Gift-Wrap",r?t.createElement("span",{style:{color:e}},"₹",Number(C).toFixed(0)):""),t.createElement(Gd,{type:"checkbox",checked:m,onChange:async()=>{try{w(!0,!0),v(null),f(!m),!m&&p&&g?await p(Xd(g?.id),1):m&&u&&g&&await u(Xd(g?.id),"giftWrap"),w(!1,!1)}catch(e){w(!1,!1),v("Failed to add to cart"),f(m),console.error("Error updating gift wrap:",e)}},$themeColor:e,disabled:!h})),b&&t.createElement(Zd,null,b)):null}const Jd=h.div`
   margin-top: 10px;
   margin-bottom: 5px;
   margin-left: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-uikit",
-  "version": "0.8.23-gift-wrap-product-image.0",
+  "version": "0.8.23-gift-wrap-product-image.2",
   "description": "YourToken UI Kit",
   "scripts": {
     "rollup": "tsc && rollup -c",