yt-uikit 0.8.3 → 0.8.5

package/dist/esm/index.js

@@ -1900,18 +1900,16 @@ 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;
+  margin-top: 6px;
   padding: 6px 12px;
-  border-radius: 5px;
-  border-width: 2px;
-  border-color: lightgray;
-  // box-shadow: 0px 0px 2px 2px rgb(193, 193, 193);
+  ${e=>e.$showBorder?"\n  border-radius: 5px !important;\n  border-width: 2px !important;\n  border-color: lightgray !important;\n  border-style: solid !important;\n  ":"\n  border: none !important;\n  box-shadow: none !important;\n  "}
 `,Vs=x.span`
   display: flex;
   flex-direction: row;
@@ -1933,7 +1931,7 @@ import*as e from"react";import t,{forwardRef as n,useImperativeHandle as r,useRe
   font-size: 12px;
   margin-top: 5px;
   padding: 0 20px;
-`,qs=e=>{if("string"!=typeof e)return e;const t=e.match(/^gid:\/\/shopify\/\w+\/(\d+)$/);return t?t[1]:e};function Us({themeColor:e,id:n,showPrice:r,detail:o,errorText:a,customText:i,showGiftIcon:d,addCartItem:s,removeCartItem:p}){const[u,m]=Kt(Rs),[f,g]=c(null),[h,x]=c(!1),[y,b]=c(null),{setLoading:v}=dn();l((()=>{o?.availableForSale&&x(!0),o?.variants?.nodes&&o?.variants?.nodes.length>0&&g(o?.variants?.nodes[0])}),[o]);const w=f?.price?.amount;return h?t.createElement(Ls,null,t.createElement(js,null,t.createElement(Vs,null,d?t.createElement(pt,{size:24,color:e,style:{height:"24px",width:"24px"}}):null,i||"+ Gift-Wrap",r?t.createElement("span",{style:{color:e}},"₹",Number(w).toFixed(0)):""),t.createElement(Ws,{type:"checkbox",checked:u,onChange:async()=>{try{v(!0,!0),b(null),m(!u),!u&&s&&f?await s(qs(f?.id),1):u&&p&&f&&await p(qs(f?.id),"giftWrap"),v(!1,!1)}catch(e){v(!1,!1),b("Failed to add to cart"),m(u),console.error("Error updating gift wrap:",e)}},$themeColor:e,disabled:!h})),y&&t.createElement(Hs,null,y)):null}const Qs=x.div`
+`,qs=e=>{if("string"!=typeof e)return e;const t=e.match(/^gid:\/\/shopify\/\w+\/(\d+)$/);return t?t[1]:e};function Us({themeColor:e,id:n,showPrice:r,detail:a,errorText:i,customText:d,showGiftIcon:s,addCartItem:p,removeCartItem:u}){const[m,f]=Kt(Rs),[g,h]=c(null),[x,y]=c(!1),[b,v]=c(null),w=o(null),[C,k]=c(!0),{setLoading:E}=dn();l((()=>{a?.availableForSale&&y(!0),a?.variants?.nodes&&a?.variants?.nodes.length>0&&h(a?.variants?.nodes[0])}),[a]),l((()=>{if(w.current){const e=w.current.previousElementSibling;k(!!e)}}),[]);const T=g?.price?.amount;return x?t.createElement(Ls,{ref:w},t.createElement(js,{$showBorder:C},t.createElement(Vs,null,s?t.createElement(pt,{size:24,color:e,style:{height:"24px",width:"24px"}}):null,d||"+ Gift-Wrap",r?t.createElement("span",{style:{color:e}},"₹",Number(T).toFixed(0)):""),t.createElement(Ws,{type:"checkbox",checked:m,onChange:async()=>{try{E(!0,!0),v(null),f(!m),!m&&p&&g?await p(qs(g?.id),1):m&&u&&g&&await u(qs(g?.id),"giftWrap"),E(!1,!1)}catch(e){E(!1,!1),v("Failed to add to cart"),f(m),console.error("Error updating gift wrap:",e)}},$themeColor:e,disabled:!x})),b&&t.createElement(Hs,null,b)):null}const Qs=x.div`
   margin-top: 10px;
   margin-bottom: 5px;
   margin-left: 1rem;

package/package.json

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