@clickaroo/checkout-ui 0.1.5-beta → 0.1.7-beta

package/dist/storybook/storybook-static/assets/CustomCheckout.stories-OyfGgjnr.js

@@ -1,6 +0,0 @@
-import{j as o}from"./jsx-runtime-DiklIkkE.js";import{C as x,S as h,u as m,a as y,c as C,D as v}from"./useCheckoutContext-w0N5TNgR.js";/* empty css              */import{u as S}from"./CheckoutPage-C21Znq4d.js";import"./CustomerInfo-CYLNdAoo.js";import"./DeliveryAddress-BBT_-q56.js";import{P as j}from"./PaymentMethods-B1IKDQ7d.js";import{R as w}from"./index-DRjF_FHU.js";C(v);function z(){const{customerInfo:a,updateCustomerInfo:i}=m(),[e,s]=w.useState({}),t=(r,b)=>{const c=y.safeParse({...a,[r]:b});if(c.success)s(d=>{const l={...d};return delete l[r],l});else{const d=c.error.issues.find(l=>l.path.includes(r));s(d?l=>({...l,[r]:d.message}):l=>{const u={...l};return delete u[r],u})}};return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#9333ea"},children:"✨ Custom Customer Form ✨"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #faf5ff, #fdf2f8)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #e9d5ff",overflow:"hidden"},children:o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 First Name"}),o.jsx("input",{type:"text",value:a.firstName,onChange:r=>{i({firstName:r.target.value}),t("firstName",r.target.value)},onBlur:r=>{t("firstName",r.target.value),r.target.style.borderColor=e.firstName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.firstName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.firstName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter first name"}),e.firstName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.firstName})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 Last Name"}),o.jsx("input",{type:"text",value:a.lastName,onChange:r=>{i({lastName:r.target.value}),t("lastName",r.target.value)},onBlur:r=>{t("lastName",r.target.value),r.target.style.borderColor=e.lastName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.lastName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.lastName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter last name"}),e.lastName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.lastName})]})]}),o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📧 Email"}),o.jsx("input",{type:"email",value:a.email,onChange:r=>{i({email:r.target.value}),t("email",r.target.value)},onBlur:r=>{t("email",r.target.value),r.target.style.borderColor=e.email?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.email?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.email?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"your@email.com"}),e.email&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.email})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📱 Phone"}),o.jsx("input",{type:"tel",value:a.phone,onChange:r=>{i({phone:r.target.value}),t("phone",r.target.value)},onBlur:r=>{t("phone",r.target.value),r.target.style.borderColor=e.phone?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.phone?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.phone?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"+1 234 567 8900"}),e.phone&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.phone})]})]})]})})]})}function k(){const{deliveryAddress:a,updateDeliveryAddress:i}=m();return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#2563eb"},children:"📍 Custom Delivery Address"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #eff6ff, #ecfeff)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #bfdbfe",overflow:"hidden"},children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🌍 Country"}),o.jsx("input",{type:"text",value:a.country,onChange:e=>i({country:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter country"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🏠 Street Address"}),o.jsx("input",{type:"text",value:a.address,onChange:e=>i({address:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter street address"})]}),o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(150px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🏙️ City"}),o.jsx("input",{type:"text",value:a.city,onChange:e=>i({city:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter city"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🗺️ State/Province"}),o.jsx("input",{type:"text",value:a.state,onChange:e=>i({state:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter state"})]})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"📮 Zip Code"}),o.jsx("input",{type:"text",value:a.zipCode,onChange:e=>i({zipCode:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter zip code"})]})]})})]})}function N(){const{isFormValid:a}=m(),{isSubmitting:i,submitOrder:e}=S(),s=async()=>{if(!a()){alert("Please complete all required fields");return}const r=await e();r.success?alert(`Order successful! Order Code: ${r.orderCode}`):alert(r.message)},t=a()&&!i;return o.jsxs("div",{style:{marginTop:"1.5rem"},children:[o.jsx("button",{onClick:s,disabled:!t,style:{width:"100%",padding:"1rem 1.5rem",borderRadius:"0.75rem",fontWeight:"bold",fontSize:"1.125rem",background:t?"linear-gradient(to right, #9333ea, #db2777)":"#9ca3af",color:t?"white":"#374151",cursor:t?"pointer":"not-allowed",border:"none",boxShadow:t?"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)":"none",transition:"all 0.3s",transform:"scale(1)"},onMouseEnter:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #7e22ce, #be185d)",r.currentTarget.style.transform="scale(1.05)")},onMouseLeave:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #9333ea, #db2777)",r.currentTarget.style.transform="scale(1)")},onMouseDown:r=>{t&&(r.currentTarget.style.transform="scale(0.95)")},onMouseUp:r=>{t&&(r.currentTarget.style.transform="scale(1.05)")},children:i?o.jsxs("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:"0.5rem"},children:[o.jsxs("svg",{style:{animation:"spin 1s linear infinite",height:"1.25rem",width:"1.25rem"},xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[o.jsx("circle",{style:{opacity:.25},cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),o.jsx("path",{style:{opacity:.75},fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),"Processing..."]}):"🎉 Complete Order"}),o.jsx("style",{children:`
-        @keyframes spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      `})]})}function E(){const a=[{sku:"TEST001",offerPricePoint:h.SINGLE,title:"Product Title",price:99.99}];return o.jsx(x,{cart:a,children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1.5rem",maxWidth:"42rem",margin:"0 auto",padding:"1rem",width:"100%",boxSizing:"border-box"},children:[o.jsx(z,{}),o.jsx(k,{}),o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#059669"},children:"💳 Payment Methods"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #ecfdf5, #d1fae5)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #86efac",overflow:"hidden"},children:o.jsx(j,{showText:!1})})]}),o.jsx(N,{})]})})}const R={component:E,title:"Components/CustomCheckout",parameters:{layout:"padded",docs:{description:{component:"Example of mixing library components with custom components. Demonstrates how to combine library components like CustomerInfo, DeliveryAddress, and PaymentMethods with custom components for a fully customized checkout experience."}}}},n={};var g,p,f;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:"{}",...(f=(p=n.parameters)==null?void 0:p.docs)==null?void 0:f.source}}};const T=["Default"],M=Object.freeze(Object.defineProperty({__proto__:null,Default:n,__namedExportsOrder:T,default:R},Symbol.toStringTag,{value:"Module"}));export{M as C,n as D};

package/dist/storybook/storybook-static/assets/CustomCheckout.stories-V2NHLbZo.js

@@ -1,6 +0,0 @@
-import{j as o}from"./jsx-runtime-DiklIkkE.js";import{C as x,S as h,u as m,a as y,c as C,D as v}from"./useCheckoutContext-C6u4Rp5U.js";/* empty css              */import{u as S}from"./CheckoutPage-DYMMhAMX.js";import"./CustomerInfo-Cp0u57C5.js";import"./DeliveryAddress-CD42v0od.js";import{P as j}from"./PaymentMethods-BnPZRrAs.js";import{R as w}from"./index-DRjF_FHU.js";C(v);function z(){const{customerInfo:a,updateCustomerInfo:i}=m(),[e,s]=w.useState({}),t=(r,b)=>{const c=y.safeParse({...a,[r]:b});if(c.success)s(d=>{const l={...d};return delete l[r],l});else{const d=c.error.issues.find(l=>l.path.includes(r));s(d?l=>({...l,[r]:d.message}):l=>{const u={...l};return delete u[r],u})}};return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#9333ea"},children:"✨ Custom Customer Form ✨"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #faf5ff, #fdf2f8)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #e9d5ff",overflow:"hidden"},children:o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 First Name"}),o.jsx("input",{type:"text",value:a.firstName,onChange:r=>{i({firstName:r.target.value}),t("firstName",r.target.value)},onBlur:r=>{t("firstName",r.target.value),r.target.style.borderColor=e.firstName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.firstName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.firstName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter first name"}),e.firstName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.firstName})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 Last Name"}),o.jsx("input",{type:"text",value:a.lastName,onChange:r=>{i({lastName:r.target.value}),t("lastName",r.target.value)},onBlur:r=>{t("lastName",r.target.value),r.target.style.borderColor=e.lastName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.lastName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.lastName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter last name"}),e.lastName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.lastName})]})]}),o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📧 Email"}),o.jsx("input",{type:"email",value:a.email,onChange:r=>{i({email:r.target.value}),t("email",r.target.value)},onBlur:r=>{t("email",r.target.value),r.target.style.borderColor=e.email?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.email?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.email?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"your@email.com"}),e.email&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.email})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📱 Phone"}),o.jsx("input",{type:"tel",value:a.phone,onChange:r=>{i({phone:r.target.value}),t("phone",r.target.value)},onBlur:r=>{t("phone",r.target.value),r.target.style.borderColor=e.phone?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.phone?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.phone?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"+1 234 567 8900"}),e.phone&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.phone})]})]})]})})]})}function k(){const{deliveryAddress:a,updateDeliveryAddress:i}=m();return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#2563eb"},children:"📍 Custom Delivery Address"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #eff6ff, #ecfeff)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #bfdbfe",overflow:"hidden"},children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🌍 Country"}),o.jsx("input",{type:"text",value:a.country,onChange:e=>i({country:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter country"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🏠 Street Address"}),o.jsx("input",{type:"text",value:a.address,onChange:e=>i({address:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter street address"})]}),o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(150px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🏙️ City"}),o.jsx("input",{type:"text",value:a.city,onChange:e=>i({city:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter city"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🗺️ State/Province"}),o.jsx("input",{type:"text",value:a.state,onChange:e=>i({state:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter state"})]})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"📮 Zip Code"}),o.jsx("input",{type:"text",value:a.zipCode,onChange:e=>i({zipCode:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter zip code"})]})]})})]})}function N(){const{isFormValid:a}=m(),{isSubmitting:i,submitOrder:e}=S(),s=async()=>{if(!a()){alert("Please complete all required fields");return}const r=await e();r.success?alert(`Order successful! Order Code: ${r.orderCode}`):alert(r.message)},t=a()&&!i;return o.jsxs("div",{style:{marginTop:"1.5rem"},children:[o.jsx("button",{onClick:s,disabled:!t,style:{width:"100%",padding:"1rem 1.5rem",borderRadius:"0.75rem",fontWeight:"bold",fontSize:"1.125rem",background:t?"linear-gradient(to right, #9333ea, #db2777)":"#9ca3af",color:t?"white":"#374151",cursor:t?"pointer":"not-allowed",border:"none",boxShadow:t?"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)":"none",transition:"all 0.3s",transform:"scale(1)"},onMouseEnter:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #7e22ce, #be185d)",r.currentTarget.style.transform="scale(1.05)")},onMouseLeave:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #9333ea, #db2777)",r.currentTarget.style.transform="scale(1)")},onMouseDown:r=>{t&&(r.currentTarget.style.transform="scale(0.95)")},onMouseUp:r=>{t&&(r.currentTarget.style.transform="scale(1.05)")},children:i?o.jsxs("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:"0.5rem"},children:[o.jsxs("svg",{style:{animation:"spin 1s linear infinite",height:"1.25rem",width:"1.25rem"},xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[o.jsx("circle",{style:{opacity:.25},cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),o.jsx("path",{style:{opacity:.75},fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),"Processing..."]}):"🎉 Complete Order"}),o.jsx("style",{children:`
-        @keyframes spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      `})]})}function E(){const a=[{sku:"TEST001",offerPricePoint:h.SINGLE,title:"Product Title",price:99.99}];return o.jsx(x,{cart:a,children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1.5rem",maxWidth:"42rem",margin:"0 auto",padding:"1rem",width:"100%",boxSizing:"border-box"},children:[o.jsx(z,{}),o.jsx(k,{}),o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#059669"},children:"💳 Payment Methods"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #ecfdf5, #d1fae5)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #86efac",overflow:"hidden"},children:o.jsx(j,{showText:!1})})]}),o.jsx(N,{})]})})}const R={component:E,title:"Components/CustomCheckout",parameters:{layout:"padded",docs:{description:{component:"Example of mixing library components with custom components. Demonstrates how to combine library components like CustomerInfo, DeliveryAddress, and PaymentMethods with custom components for a fully customized checkout experience."}}}},n={};var g,p,f;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:"{}",...(f=(p=n.parameters)==null?void 0:p.docs)==null?void 0:f.source}}};const T=["Default"],M=Object.freeze(Object.defineProperty({__proto__:null,Default:n,__namedExportsOrder:T,default:R},Symbol.toStringTag,{value:"Module"}));export{M as C,n as D};

package/dist/storybook/storybook-static/assets/CustomCheckout.stories-ZCeqtMGJ.js

@@ -1,6 +0,0 @@
-import{j as o}from"./jsx-runtime-DiklIkkE.js";import{C as x,S as h,u as m,a as y,c as C,D as v}from"./useCheckoutContext-3YTrU8Qh.js";/* empty css              */import{u as S}from"./CheckoutPage-DgZ1RopD.js";import"./CustomerInfo-mKAI6gWW.js";import"./DeliveryAddress-DaRy4l-D.js";import{P as j}from"./PaymentMethods-Buladk2O.js";import{R as w}from"./index-DRjF_FHU.js";C(v);function z(){const{customerInfo:a,updateCustomerInfo:i}=m(),[e,s]=w.useState({}),t=(r,b)=>{const c=y.safeParse({...a,[r]:b});if(c.success)s(d=>{const l={...d};return delete l[r],l});else{const d=c.error.issues.find(l=>l.path.includes(r));s(d?l=>({...l,[r]:d.message}):l=>{const u={...l};return delete u[r],u})}};return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#9333ea"},children:"✨ Custom Customer Form ✨"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #faf5ff, #fdf2f8)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #e9d5ff",overflow:"hidden"},children:o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 First Name"}),o.jsx("input",{type:"text",value:a.firstName,onChange:r=>{i({firstName:r.target.value}),t("firstName",r.target.value)},onBlur:r=>{t("firstName",r.target.value),r.target.style.borderColor=e.firstName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.firstName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.firstName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter first name"}),e.firstName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.firstName})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 Last Name"}),o.jsx("input",{type:"text",value:a.lastName,onChange:r=>{i({lastName:r.target.value}),t("lastName",r.target.value)},onBlur:r=>{t("lastName",r.target.value),r.target.style.borderColor=e.lastName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.lastName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.lastName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter last name"}),e.lastName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.lastName})]})]}),o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📧 Email"}),o.jsx("input",{type:"email",value:a.email,onChange:r=>{i({email:r.target.value}),t("email",r.target.value)},onBlur:r=>{t("email",r.target.value),r.target.style.borderColor=e.email?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.email?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.email?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"your@email.com"}),e.email&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.email})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📱 Phone"}),o.jsx("input",{type:"tel",value:a.phone,onChange:r=>{i({phone:r.target.value}),t("phone",r.target.value)},onBlur:r=>{t("phone",r.target.value),r.target.style.borderColor=e.phone?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.phone?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.phone?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"+1 234 567 8900"}),e.phone&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.phone})]})]})]})})]})}function k(){const{deliveryAddress:a,updateDeliveryAddress:i}=m();return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#2563eb"},children:"📍 Custom Delivery Address"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #eff6ff, #ecfeff)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #bfdbfe",overflow:"hidden"},children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🌍 Country"}),o.jsx("input",{type:"text",value:a.country,onChange:e=>i({country:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter country"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🏠 Street Address"}),o.jsx("input",{type:"text",value:a.address,onChange:e=>i({address:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter street address"})]}),o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(150px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🏙️ City"}),o.jsx("input",{type:"text",value:a.city,onChange:e=>i({city:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter city"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🗺️ State/Province"}),o.jsx("input",{type:"text",value:a.state,onChange:e=>i({state:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter state"})]})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"📮 Zip Code"}),o.jsx("input",{type:"text",value:a.zipCode,onChange:e=>i({zipCode:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter zip code"})]})]})})]})}function N(){const{isFormValid:a}=m(),{isSubmitting:i,submitOrder:e}=S(),s=async()=>{if(!a()){alert("Please complete all required fields");return}const r=await e();r.success?alert(`Order successful! Order Code: ${r.orderCode}`):alert(r.message)},t=a()&&!i;return o.jsxs("div",{style:{marginTop:"1.5rem"},children:[o.jsx("button",{onClick:s,disabled:!t,style:{width:"100%",padding:"1rem 1.5rem",borderRadius:"0.75rem",fontWeight:"bold",fontSize:"1.125rem",background:t?"linear-gradient(to right, #9333ea, #db2777)":"#9ca3af",color:t?"white":"#374151",cursor:t?"pointer":"not-allowed",border:"none",boxShadow:t?"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)":"none",transition:"all 0.3s",transform:"scale(1)"},onMouseEnter:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #7e22ce, #be185d)",r.currentTarget.style.transform="scale(1.05)")},onMouseLeave:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #9333ea, #db2777)",r.currentTarget.style.transform="scale(1)")},onMouseDown:r=>{t&&(r.currentTarget.style.transform="scale(0.95)")},onMouseUp:r=>{t&&(r.currentTarget.style.transform="scale(1.05)")},children:i?o.jsxs("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:"0.5rem"},children:[o.jsxs("svg",{style:{animation:"spin 1s linear infinite",height:"1.25rem",width:"1.25rem"},xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[o.jsx("circle",{style:{opacity:.25},cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),o.jsx("path",{style:{opacity:.75},fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),"Processing..."]}):"🎉 Complete Order"}),o.jsx("style",{children:`
-        @keyframes spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      `})]})}function E(){const a=[{sku:"TEST001",offerPricePoint:h.SINGLE,title:"Product Title",price:99.99}];return o.jsx(x,{cart:a,children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1.5rem",maxWidth:"42rem",margin:"0 auto",padding:"1rem",width:"100%",boxSizing:"border-box"},children:[o.jsx(z,{}),o.jsx(k,{}),o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#059669"},children:"💳 Payment Methods"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #ecfdf5, #d1fae5)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #86efac",overflow:"hidden"},children:o.jsx(j,{showText:!1})})]}),o.jsx(N,{})]})})}const R={component:E,title:"Components/CustomCheckout",parameters:{layout:"padded",docs:{description:{component:"Example of mixing library components with custom components. Demonstrates how to combine library components like CustomerInfo, DeliveryAddress, and PaymentMethods with custom components for a fully customized checkout experience."}}}},n={};var g,p,f;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:"{}",...(f=(p=n.parameters)==null?void 0:p.docs)==null?void 0:f.source}}};const T=["Default"],M=Object.freeze(Object.defineProperty({__proto__:null,Default:n,__namedExportsOrder:T,default:R},Symbol.toStringTag,{value:"Module"}));export{M as C,n as D};

package/dist/storybook/storybook-static/assets/CustomCheckout.stories-rMIVoUs4.js

@@ -1,6 +0,0 @@
-import{j as o}from"./jsx-runtime-DiklIkkE.js";import{C as x,S as h,u as m,a as y,c as C,D as v}from"./useCheckoutContext-L3zhltsm.js";/* empty css              */import{u as S}from"./CheckoutPage-DvHYA1Jd.js";import"./CustomerInfo-BqCSWi4I.js";import"./DeliveryAddress-TRtlNz2v.js";import{P as j}from"./PaymentMethods-CBXk2f9N.js";import{R as w}from"./index-DRjF_FHU.js";C(v);function z(){const{customerInfo:a,updateCustomerInfo:i}=m(),[e,s]=w.useState({}),t=(r,b)=>{const c=y.safeParse({...a,[r]:b});if(c.success)s(d=>{const l={...d};return delete l[r],l});else{const d=c.error.issues.find(l=>l.path.includes(r));s(d?l=>({...l,[r]:d.message}):l=>{const u={...l};return delete u[r],u})}};return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#9333ea"},children:"✨ Custom Customer Form ✨"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #faf5ff, #fdf2f8)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #e9d5ff",overflow:"hidden"},children:o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 First Name"}),o.jsx("input",{type:"text",value:a.firstName,onChange:r=>{i({firstName:r.target.value}),t("firstName",r.target.value)},onBlur:r=>{t("firstName",r.target.value),r.target.style.borderColor=e.firstName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.firstName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.firstName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter first name"}),e.firstName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.firstName})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 Last Name"}),o.jsx("input",{type:"text",value:a.lastName,onChange:r=>{i({lastName:r.target.value}),t("lastName",r.target.value)},onBlur:r=>{t("lastName",r.target.value),r.target.style.borderColor=e.lastName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.lastName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.lastName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter last name"}),e.lastName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.lastName})]})]}),o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📧 Email"}),o.jsx("input",{type:"email",value:a.email,onChange:r=>{i({email:r.target.value}),t("email",r.target.value)},onBlur:r=>{t("email",r.target.value),r.target.style.borderColor=e.email?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.email?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.email?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"your@email.com"}),e.email&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.email})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📱 Phone"}),o.jsx("input",{type:"tel",value:a.phone,onChange:r=>{i({phone:r.target.value}),t("phone",r.target.value)},onBlur:r=>{t("phone",r.target.value),r.target.style.borderColor=e.phone?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.phone?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.phone?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"+1 234 567 8900"}),e.phone&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.phone})]})]})]})})]})}function k(){const{deliveryAddress:a,updateDeliveryAddress:i}=m();return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#2563eb"},children:"📍 Custom Delivery Address"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #eff6ff, #ecfeff)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #bfdbfe",overflow:"hidden"},children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🌍 Country"}),o.jsx("input",{type:"text",value:a.country,onChange:e=>i({country:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter country"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🏠 Street Address"}),o.jsx("input",{type:"text",value:a.address,onChange:e=>i({address:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter street address"})]}),o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(150px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🏙️ City"}),o.jsx("input",{type:"text",value:a.city,onChange:e=>i({city:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter city"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🗺️ State/Province"}),o.jsx("input",{type:"text",value:a.state,onChange:e=>i({state:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter state"})]})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"📮 Zip Code"}),o.jsx("input",{type:"text",value:a.zipCode,onChange:e=>i({zipCode:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter zip code"})]})]})})]})}function N(){const{isFormValid:a}=m(),{isSubmitting:i,submitOrder:e}=S(),s=async()=>{if(!a()){alert("Please complete all required fields");return}const r=await e();r.success?alert(`Order successful! Order Code: ${r.orderCode}`):alert(r.message)},t=a()&&!i;return o.jsxs("div",{style:{marginTop:"1.5rem"},children:[o.jsx("button",{onClick:s,disabled:!t,style:{width:"100%",padding:"1rem 1.5rem",borderRadius:"0.75rem",fontWeight:"bold",fontSize:"1.125rem",background:t?"linear-gradient(to right, #9333ea, #db2777)":"#9ca3af",color:t?"white":"#374151",cursor:t?"pointer":"not-allowed",border:"none",boxShadow:t?"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)":"none",transition:"all 0.3s",transform:"scale(1)"},onMouseEnter:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #7e22ce, #be185d)",r.currentTarget.style.transform="scale(1.05)")},onMouseLeave:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #9333ea, #db2777)",r.currentTarget.style.transform="scale(1)")},onMouseDown:r=>{t&&(r.currentTarget.style.transform="scale(0.95)")},onMouseUp:r=>{t&&(r.currentTarget.style.transform="scale(1.05)")},children:i?o.jsxs("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:"0.5rem"},children:[o.jsxs("svg",{style:{animation:"spin 1s linear infinite",height:"1.25rem",width:"1.25rem"},xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[o.jsx("circle",{style:{opacity:.25},cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),o.jsx("path",{style:{opacity:.75},fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),"Processing..."]}):"🎉 Complete Order"}),o.jsx("style",{children:`
-        @keyframes spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      `})]})}function E(){const a=[{sku:"TEST001",offerPricePoint:h.SINGLE,title:"Product Title",price:99.99}];return o.jsx(x,{cart:a,children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1.5rem",maxWidth:"42rem",margin:"0 auto",padding:"1rem",width:"100%",boxSizing:"border-box"},children:[o.jsx(z,{}),o.jsx(k,{}),o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#059669"},children:"💳 Payment Methods"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #ecfdf5, #d1fae5)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #86efac",overflow:"hidden"},children:o.jsx(j,{showText:!1})})]}),o.jsx(N,{})]})})}const R={component:E,title:"Components/CustomCheckout",parameters:{layout:"padded",docs:{description:{component:"Example of mixing library components with custom components. Demonstrates how to combine library components like CustomerInfo, DeliveryAddress, and PaymentMethods with custom components for a fully customized checkout experience."}}}},n={};var g,p,f;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:"{}",...(f=(p=n.parameters)==null?void 0:p.docs)==null?void 0:f.source}}};const T=["Default"],M=Object.freeze(Object.defineProperty({__proto__:null,Default:n,__namedExportsOrder:T,default:R},Symbol.toStringTag,{value:"Module"}));export{M as C,n as D};

package/dist/storybook/storybook-static/assets/CustomerInfo-BMTfZ9z3.js

@@ -1 +0,0 @@
-import{j as t}from"./jsx-runtime-DiklIkkE.js";import{F as u}from"./ValidateInput-BMZhq5zE.js";import{f as p,z as L,v as z,h as k,b as j,a as w}from"./useCheckoutContext-CroxIBFh.js";import{r as i}from"./index-DRjF_FHU.js";const S="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1280'%20height='640'%20viewBox='0%200%2010080%205040'%3e%3cdefs%3e%3cclipPath%20id='c1'%3e%3cpath%20d='M0,0H6V3H0z'/%3e%3c/clipPath%3e%3cclipPath%20id='c2'%3e%3cpath%20d='M0,0V1.5H6V3H6zM6,0H3V3H0V3z'/%3e%3c/clipPath%3e%3cpath%20id='Star7'%20d='M0,-360%2069.421398,-144.155019%20281.459334,-224.456329%20155.988466,-35.603349%20350.974048,80.107536%20125.093037,99.758368%20156.198146,324.348792%200,160%20-156.198146,324.348792%20-125.093037,99.758368%20-350.974048,80.107536%20-155.988466,-35.603349%20-281.459334,-224.456329%20-69.421398,-144.155019z'/%3e%3cpath%20id='Star5'%20d='M0,-210%2054.859957,-75.508253%20199.721868,-64.893569%2088.765275,28.841586%20123.434903,169.893569%200,93.333333%20-123.434903,169.893569%20-88.765275,28.841586%20-199.721868,-64.893569%20-54.859957,-75.508253z'/%3e%3c/defs%3e%3cg%20transform='scale(840)'%3e%3crect%20width='12'%20height='6'%20fill='%23012169'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23fff'%20stroke-width='0.6'%20clip-path='url(%23c1)'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23e4002b'%20stroke-width='0.4'%20clip-path='url(%23c2)'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23fff'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23e4002b'%20stroke-width='0.6'/%3e%3c/g%3e%3cg%20fill='%23fff'%3e%3cuse%20id='Comwlth'%20xlink:href='%23Star7'%20transform='translate(2520,%203780)%20scale(2.1)'/%3e%3cuse%20id='αCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='4200'/%3e%3cuse%20id='βCrucis'%20xlink:href='%23Star7'%20x='6300'%20y='2205'/%3e%3cuse%20id='γCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='840'/%3e%3cuse%20id='δCrucis'%20xlink:href='%23Star7'%20x='8680'%20y='1869'/%3e%3cuse%20id='εCrucis'%20xlink:href='%23Star5'%20x='8064'%20y='2730'/%3e%3c/g%3e%3c/svg%3e",_="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='600'%20viewBox='0%200%209600%204800'%3e%3ctitle%3eFlag%20of%20Canada%20(Pantone%20colours)%3c/title%3e%3cpath%20fill='%23d52b1e'%20d='m0%200h2400l99%2099h4602l99-99h2400v4800h-2400l-99-99h-4602l-99%2099H0z'/%3e%3cpath%20fill='%23fff'%20d='m2400%200h4800v4800h-4800zm2490%204430-45-863a95%2095%200%200%201%20111-98l859%20151-116-320a65%2065%200%200%201%2020-73l941-762-212-99a65%2065%200%200%201-34-79l186-572-542%20115a65%2065%200%200%201-73-38l-105-247-423%20454a65%2065%200%200%201-111-57l204-1052-327%20189a65%2065%200%200%201-91-27l-332-652-332%20652a65%2065%200%200%201-91%2027l-327-189%20204%201052a65%2065%200%200%201-111%2057l-423-454-105%20247a65%2065%200%200%201-73%2038l-542-115%20186%20572a65%2065%200%200%201-34%2079l-212%2099%20941%20762a65%2065%200%200%201%2020%2073l-116%20320%20859-151a95%2095%200%200%201%20111%2098l-45%20863z'/%3e%3c/svg%3e",H="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2030'%20width='1200'%20height='600'%3e%3cclipPath%20id='s'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='t'%3e%3cpath%20d='M30,15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z'/%3e%3c/clipPath%3e%3cg%20clip-path='url(%23s)'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'%20fill='%23012169'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20stroke='%23fff'%20stroke-width='6'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20clip-path='url(%23t)'%20stroke='%23C8102E'%20stroke-width='4'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23fff'%20stroke-width='10'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23C8102E'%20stroke-width='6'/%3e%3c/g%3e%3c/svg%3e",E="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20height='600'%20width='1200'%3e%3cdefs%3e%3cclipPath%20id='Canton'%3e%3cpath%20d='M%200,0%20L%20600,0%20L%20600,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='Diagonals'%3e%3cpath%20d='M%200,0%20L%20300,150%20L%200,150%20z%20M%20300,0%20L%20600,0%20L%20300,150%20z%20M%20300,150%20L%20600,150%20L%20600,300%20z%20M%20300,150%20L%20300,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cg%20id='Pentagram'%3e%3cg%20id='Arm'%20transform='translate(0,-0.324925)'%3e%3cpath%20d='M%200,0%20L%200,0.5%20L%201,0%20z'/%3e%3cpath%20d='M%200,0%20L%200,-0.5%20L%201,0%20z'%20transform='rotate(-36,1,0)'/%3e%3c/g%3e%3cuse%20xlink:href='%23Arm'%20transform='scale(-1,1)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)%20scale(-1,1)'/%3e%3c/g%3e%3c/defs%3e%3crect%20fill='%23012169'%20x='0'%20y='0'%20width='1200'%20height='600'/%3e%3cg%20id='Flag_of_the_United_Kingdom'%3e%3cpath%20id='Saint_Andrews_Cross'%20stroke='%23FFF'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3cpath%20id='Saint_Patricks_Cross'%20stroke='%23C8102E'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='40'%20clip-path='url(%23Diagonals)'/%3e%3cg%20id='Saint_Georges_Cross'%3e%3cpath%20stroke='%23FFF'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='100'%20clip-path='url(%23Canton)'/%3e%3cpath%20stroke='%23C8102E'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Southern_Cross'%3e%3cg%20id='Gamma_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20scale(30)'/%3e%3c/g%3e%3cg%20transform='rotate(82,900,240)'%3e%3cg%20id='Delta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20rotate(-82)%20scale(40.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20rotate(-82)%20scale(25)'/%3e%3c/g%3e%3cg%20id='Beta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,380)%20rotate(-82)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,380)%20rotate(-82)%20scale(30)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Alpha_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,480)%20scale(50.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,480)%20scale(35)'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e",U="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1235'%20height='650'%20viewBox='0%200%207410%203900'%3e%3cpath%20d='M0,0h7410v3900H0'%20fill='%23b31942'/%3e%3cpath%20d='M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0'%20stroke='%23FFF'%20stroke-width='300'/%3e%3cpath%20d='M0,0h2964v2100H0'%20fill='%230a3161'/%3e%3cg%20fill='%23FFF'%3e%3cg%20id='s18'%3e%3cg%20id='s9'%3e%3cg%20id='s5'%3e%3cg%20id='s4'%3e%3cpath%20id='s'%20d='M247,90%20317.534230,307.082039%20132.873218,172.917961H361.126782L176.465770,307.082039z'/%3e%3cuse%20xlink:href='%23s'%20y='420'/%3e%3cuse%20xlink:href='%23s'%20y='840'/%3e%3cuse%20xlink:href='%23s'%20y='1260'/%3e%3c/g%3e%3cuse%20xlink:href='%23s'%20y='1680'/%3e%3c/g%3e%3cuse%20xlink:href='%23s4'%20x='247'%20y='210'/%3e%3c/g%3e%3cuse%20xlink:href='%23s9'%20x='494'/%3e%3c/g%3e%3cuse%20xlink:href='%23s18'%20x='988'/%3e%3cuse%20xlink:href='%23s9'%20x='1976'/%3e%3cuse%20xlink:href='%23s5'%20x='2470'/%3e%3c/g%3e%3c/svg%3e",h=[{code:"US",flag:U,dialCode:"+1",name:"United States"},{code:"CA",flag:_,dialCode:"+1",name:"Canada"},{code:"AU",flag:S,dialCode:"+61",name:"Australia"},{code:"NZ",flag:E,dialCode:"+64",name:"New Zealand"},{code:"GB",flag:H,dialCode:"+44",name:"United Kingdom"}],M=({value:s,onChange:c,label:n="Phone Number",placeholder:g="Phone Number",error:x})=>{const[d,m]=i.useState(!1),[a,C]=i.useState(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r))return e.code}return"US"}),l=i.useMemo(()=>p(a.toUpperCase()),[a]);i.useEffect(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r)){a!==e.code&&C(e.code);return}}},[s,a]);const v=i.useMemo(()=>h.find(e=>e.code===a)||h[0],[a]),o=i.useMemo(()=>s.startsWith(l)?s.replace(l,""):s,[s,l]),P=i.useMemo(()=>L.string().trim().min(1,"Phone number is required").refine(e=>{const r=l+e.replace(/[^\d]+/g,"");return z(r,a.toUpperCase())},{message:`Invalid phone number for ${v.name}`}),[l,a]),F=e=>{C(e);const r=p(e.toUpperCase());if(o){const f=o.replace(/[^\d]+/g,""),y=k(f,e.toUpperCase());c(y||r+f)}else c(r)},N=e=>{const r=e.replace(/[^\d]+/g,""),f=k(r,a.toUpperCase());c(f||l+r)},b=t.jsxs("div",{className:"relative flex items-center justify-center border-r border-[#e6e6e6] h-full",style:{minWidth:"70px"},children:[t.jsx("select",{value:a,onChange:e=>F(e.target.value),className:"absolute inset-0 w-full h-full opacity-0 cursor-pointer z-30",style:{fontSize:0},children:h.map(e=>t.jsx("option",{value:e.code,children:e.code},e.code))}),t.jsx("div",{className:"flex items-center justify-center z-20 pointer-events-none",children:t.jsx("img",{src:v.flag,alt:v.name,className:"w-6 h-4 object-cover rounded-sm mr-3"})}),t.jsx("div",{className:"absolute right-2 top-0 bottom-0 flex items-center pointer-events-none z-20",children:t.jsx("svg",{className:"w-3 h-3 text-gray-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]});return t.jsx("div",{className:"w-full",children:t.jsx(u,{type:"tel",label:n,placeholder:g,value:o,onChange:e=>N(e.target.value),onFocus:()=>{m(!0)},onBlur:()=>{m(!1)},inputClass:`w-full ${d||o?"!pl-[110px]":"!pl-[80px]"}`,autoComplete:"shipping tel",schema:P,error:x,prefix:t.jsxs("div",{className:"flex items-center h-full",children:[b,(d||o)&&t.jsx("span",{className:"ml-2 text-base font-family-inherit",children:l})]})})})};M.__docgenInfo={description:"",methods:[],displayName:"PhoneInput",props:{value:{required:!0,tsType:{name:"string"},description:""},onChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(value: string) => void",signature:{arguments:[{type:{name:"string"},name:"value"}],return:{name:"void"}}},description:""},label:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},placeholder:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},error:{required:!1,tsType:{name:"string"},description:""}}};const I=({showTitle:s=!0})=>{const{customerInfo:c,updateCustomerInfo:n}=j(),{firstName:g,lastName:x,email:d,phone:m}=c;return t.jsxs("div",{className:"clickaroo-checkout-ui w-full",children:[s&&t.jsx("div",{className:"text-lg md:text-2xl mb-5 font-medium",children:"Customer Information"}),t.jsxs("div",{className:"border border-solid border-[#e6e6e6] shadow rounded-md p-4 bg-white",children:[t.jsxs("div",{className:"flex flex-col md:flex-row gap-3 mb-2",children:[t.jsx(u,{label:"First Name",placeholder:"First Name",value:g,onChange:a=>n({firstName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping given-name",schema:w.shape.firstName}),t.jsx(u,{label:"Last Name",placeholder:"Last Name",value:x,onChange:a=>n({lastName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping family-name",schema:w.shape.lastName})]}),t.jsx("div",{className:"mb-2",children:t.jsx(u,{label:"Email",placeholder:"Email",value:d,onChange:a=>n({email:a.target.value}),inputClass:"w-full",autoComplete:"shipping email",schema:w.shape.email})}),t.jsx(M,{value:m,onChange:a=>n({phone:a})})]})]})};I.__docgenInfo={description:"",methods:[],displayName:"CustomInfo",props:{showTitle:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}}}};export{I as C};

package/dist/storybook/storybook-static/assets/CustomerInfo-BqCSWi4I.js

@@ -1 +0,0 @@
-import{j as t}from"./jsx-runtime-DiklIkkE.js";import{F as u}from"./ValidateInput-np1-zwvJ.js";import{f as p,z as L,v as z,h as k,b as j,a as w}from"./useCheckoutContext-L3zhltsm.js";import{r as i}from"./index-DRjF_FHU.js";const S="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1280'%20height='640'%20viewBox='0%200%2010080%205040'%3e%3cdefs%3e%3cclipPath%20id='c1'%3e%3cpath%20d='M0,0H6V3H0z'/%3e%3c/clipPath%3e%3cclipPath%20id='c2'%3e%3cpath%20d='M0,0V1.5H6V3H6zM6,0H3V3H0V3z'/%3e%3c/clipPath%3e%3cpath%20id='Star7'%20d='M0,-360%2069.421398,-144.155019%20281.459334,-224.456329%20155.988466,-35.603349%20350.974048,80.107536%20125.093037,99.758368%20156.198146,324.348792%200,160%20-156.198146,324.348792%20-125.093037,99.758368%20-350.974048,80.107536%20-155.988466,-35.603349%20-281.459334,-224.456329%20-69.421398,-144.155019z'/%3e%3cpath%20id='Star5'%20d='M0,-210%2054.859957,-75.508253%20199.721868,-64.893569%2088.765275,28.841586%20123.434903,169.893569%200,93.333333%20-123.434903,169.893569%20-88.765275,28.841586%20-199.721868,-64.893569%20-54.859957,-75.508253z'/%3e%3c/defs%3e%3cg%20transform='scale(840)'%3e%3crect%20width='12'%20height='6'%20fill='%23012169'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23fff'%20stroke-width='0.6'%20clip-path='url(%23c1)'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23e4002b'%20stroke-width='0.4'%20clip-path='url(%23c2)'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23fff'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23e4002b'%20stroke-width='0.6'/%3e%3c/g%3e%3cg%20fill='%23fff'%3e%3cuse%20id='Comwlth'%20xlink:href='%23Star7'%20transform='translate(2520,%203780)%20scale(2.1)'/%3e%3cuse%20id='αCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='4200'/%3e%3cuse%20id='βCrucis'%20xlink:href='%23Star7'%20x='6300'%20y='2205'/%3e%3cuse%20id='γCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='840'/%3e%3cuse%20id='δCrucis'%20xlink:href='%23Star7'%20x='8680'%20y='1869'/%3e%3cuse%20id='εCrucis'%20xlink:href='%23Star5'%20x='8064'%20y='2730'/%3e%3c/g%3e%3c/svg%3e",_="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='600'%20viewBox='0%200%209600%204800'%3e%3ctitle%3eFlag%20of%20Canada%20(Pantone%20colours)%3c/title%3e%3cpath%20fill='%23d52b1e'%20d='m0%200h2400l99%2099h4602l99-99h2400v4800h-2400l-99-99h-4602l-99%2099H0z'/%3e%3cpath%20fill='%23fff'%20d='m2400%200h4800v4800h-4800zm2490%204430-45-863a95%2095%200%200%201%20111-98l859%20151-116-320a65%2065%200%200%201%2020-73l941-762-212-99a65%2065%200%200%201-34-79l186-572-542%20115a65%2065%200%200%201-73-38l-105-247-423%20454a65%2065%200%200%201-111-57l204-1052-327%20189a65%2065%200%200%201-91-27l-332-652-332%20652a65%2065%200%200%201-91%2027l-327-189%20204%201052a65%2065%200%200%201-111%2057l-423-454-105%20247a65%2065%200%200%201-73%2038l-542-115%20186%20572a65%2065%200%200%201-34%2079l-212%2099%20941%20762a65%2065%200%200%201%2020%2073l-116%20320%20859-151a95%2095%200%200%201%20111%2098l-45%20863z'/%3e%3c/svg%3e",H="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2030'%20width='1200'%20height='600'%3e%3cclipPath%20id='s'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='t'%3e%3cpath%20d='M30,15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z'/%3e%3c/clipPath%3e%3cg%20clip-path='url(%23s)'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'%20fill='%23012169'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20stroke='%23fff'%20stroke-width='6'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20clip-path='url(%23t)'%20stroke='%23C8102E'%20stroke-width='4'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23fff'%20stroke-width='10'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23C8102E'%20stroke-width='6'/%3e%3c/g%3e%3c/svg%3e",E="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20height='600'%20width='1200'%3e%3cdefs%3e%3cclipPath%20id='Canton'%3e%3cpath%20d='M%200,0%20L%20600,0%20L%20600,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='Diagonals'%3e%3cpath%20d='M%200,0%20L%20300,150%20L%200,150%20z%20M%20300,0%20L%20600,0%20L%20300,150%20z%20M%20300,150%20L%20600,150%20L%20600,300%20z%20M%20300,150%20L%20300,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cg%20id='Pentagram'%3e%3cg%20id='Arm'%20transform='translate(0,-0.324925)'%3e%3cpath%20d='M%200,0%20L%200,0.5%20L%201,0%20z'/%3e%3cpath%20d='M%200,0%20L%200,-0.5%20L%201,0%20z'%20transform='rotate(-36,1,0)'/%3e%3c/g%3e%3cuse%20xlink:href='%23Arm'%20transform='scale(-1,1)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)%20scale(-1,1)'/%3e%3c/g%3e%3c/defs%3e%3crect%20fill='%23012169'%20x='0'%20y='0'%20width='1200'%20height='600'/%3e%3cg%20id='Flag_of_the_United_Kingdom'%3e%3cpath%20id='Saint_Andrews_Cross'%20stroke='%23FFF'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3cpath%20id='Saint_Patricks_Cross'%20stroke='%23C8102E'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='40'%20clip-path='url(%23Diagonals)'/%3e%3cg%20id='Saint_Georges_Cross'%3e%3cpath%20stroke='%23FFF'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='100'%20clip-path='url(%23Canton)'/%3e%3cpath%20stroke='%23C8102E'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Southern_Cross'%3e%3cg%20id='Gamma_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20scale(30)'/%3e%3c/g%3e%3cg%20transform='rotate(82,900,240)'%3e%3cg%20id='Delta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20rotate(-82)%20scale(40.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20rotate(-82)%20scale(25)'/%3e%3c/g%3e%3cg%20id='Beta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,380)%20rotate(-82)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,380)%20rotate(-82)%20scale(30)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Alpha_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,480)%20scale(50.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,480)%20scale(35)'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e",U="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1235'%20height='650'%20viewBox='0%200%207410%203900'%3e%3cpath%20d='M0,0h7410v3900H0'%20fill='%23b31942'/%3e%3cpath%20d='M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0'%20stroke='%23FFF'%20stroke-width='300'/%3e%3cpath%20d='M0,0h2964v2100H0'%20fill='%230a3161'/%3e%3cg%20fill='%23FFF'%3e%3cg%20id='s18'%3e%3cg%20id='s9'%3e%3cg%20id='s5'%3e%3cg%20id='s4'%3e%3cpath%20id='s'%20d='M247,90%20317.534230,307.082039%20132.873218,172.917961H361.126782L176.465770,307.082039z'/%3e%3cuse%20xlink:href='%23s'%20y='420'/%3e%3cuse%20xlink:href='%23s'%20y='840'/%3e%3cuse%20xlink:href='%23s'%20y='1260'/%3e%3c/g%3e%3cuse%20xlink:href='%23s'%20y='1680'/%3e%3c/g%3e%3cuse%20xlink:href='%23s4'%20x='247'%20y='210'/%3e%3c/g%3e%3cuse%20xlink:href='%23s9'%20x='494'/%3e%3c/g%3e%3cuse%20xlink:href='%23s18'%20x='988'/%3e%3cuse%20xlink:href='%23s9'%20x='1976'/%3e%3cuse%20xlink:href='%23s5'%20x='2470'/%3e%3c/g%3e%3c/svg%3e",h=[{code:"US",flag:U,dialCode:"+1",name:"United States"},{code:"CA",flag:_,dialCode:"+1",name:"Canada"},{code:"AU",flag:S,dialCode:"+61",name:"Australia"},{code:"NZ",flag:E,dialCode:"+64",name:"New Zealand"},{code:"GB",flag:H,dialCode:"+44",name:"United Kingdom"}],M=({value:s,onChange:c,label:n="Phone Number",placeholder:g="Phone Number",error:x})=>{const[d,m]=i.useState(!1),[a,C]=i.useState(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r))return e.code}return"US"}),l=i.useMemo(()=>p(a.toUpperCase()),[a]);i.useEffect(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r)){a!==e.code&&C(e.code);return}}},[s,a]);const v=i.useMemo(()=>h.find(e=>e.code===a)||h[0],[a]),o=i.useMemo(()=>s.startsWith(l)?s.replace(l,""):s,[s,l]),P=i.useMemo(()=>L.string().trim().min(1,"Phone number is required").refine(e=>{const r=l+e.replace(/[^\d]+/g,"");return z(r,a.toUpperCase())},{message:`Invalid phone number for ${v.name}`}),[l,a]),F=e=>{C(e);const r=p(e.toUpperCase());if(o){const f=o.replace(/[^\d]+/g,""),y=k(f,e.toUpperCase());c(y||r+f)}else c(r)},N=e=>{const r=e.replace(/[^\d]+/g,""),f=k(r,a.toUpperCase());c(f||l+r)},b=t.jsxs("div",{className:"relative flex items-center justify-center border-r border-[#e6e6e6] h-full",style:{minWidth:"70px"},children:[t.jsx("select",{value:a,onChange:e=>F(e.target.value),className:"absolute inset-0 w-full h-full opacity-0 cursor-pointer z-30",style:{fontSize:0},children:h.map(e=>t.jsx("option",{value:e.code,children:e.code},e.code))}),t.jsx("div",{className:"flex items-center justify-center z-20 pointer-events-none",children:t.jsx("img",{src:v.flag,alt:v.name,className:"w-6 h-4 object-cover rounded-sm mr-3"})}),t.jsx("div",{className:"absolute right-2 top-0 bottom-0 flex items-center pointer-events-none z-20",children:t.jsx("svg",{className:"w-3 h-3 text-gray-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]});return t.jsx("div",{className:"w-full",children:t.jsx(u,{type:"tel",label:n,placeholder:g,value:o,onChange:e=>N(e.target.value),onFocus:()=>{m(!0)},onBlur:()=>{m(!1)},inputClass:`w-full ${d||o?"!pl-[110px]":"!pl-[80px]"}`,autoComplete:"shipping tel",schema:P,error:x,prefix:t.jsxs("div",{className:"flex items-center h-full",children:[b,(d||o)&&t.jsx("span",{className:"ml-2 text-base font-family-inherit",children:l})]})})})};M.__docgenInfo={description:"",methods:[],displayName:"PhoneInput",props:{value:{required:!0,tsType:{name:"string"},description:""},onChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(value: string) => void",signature:{arguments:[{type:{name:"string"},name:"value"}],return:{name:"void"}}},description:""},label:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},placeholder:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},error:{required:!1,tsType:{name:"string"},description:""}}};const I=({showTitle:s=!0})=>{const{customerInfo:c,updateCustomerInfo:n}=j(),{firstName:g,lastName:x,email:d,phone:m}=c;return t.jsxs("div",{className:"clickaroo-checkout-ui w-full",children:[s&&t.jsx("div",{className:"text-lg md:text-2xl mb-5 font-medium",children:"Customer Information"}),t.jsxs("div",{className:"border border-solid border-[#e6e6e6] shadow rounded-md p-4 bg-white",children:[t.jsxs("div",{className:"flex flex-col md:flex-row gap-3 mb-2",children:[t.jsx(u,{label:"First Name",placeholder:"First Name",value:g,onChange:a=>n({firstName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping given-name",schema:w.shape.firstName}),t.jsx(u,{label:"Last Name",placeholder:"Last Name",value:x,onChange:a=>n({lastName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping family-name",schema:w.shape.lastName})]}),t.jsx("div",{className:"mb-2",children:t.jsx(u,{label:"Email",placeholder:"Email",value:d,onChange:a=>n({email:a.target.value}),inputClass:"w-full",autoComplete:"shipping email",schema:w.shape.email})}),t.jsx(M,{value:m,onChange:a=>n({phone:a})})]})]})};I.__docgenInfo={description:"",methods:[],displayName:"CustomInfo",props:{showTitle:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}}}};export{I as C};

package/dist/storybook/storybook-static/assets/CustomerInfo-BwyY9803.js

@@ -1 +0,0 @@
-import{j as t}from"./jsx-runtime-DiklIkkE.js";import{F as u}from"./ValidateInput-LNzX4jJP.js";import{f as p,z as L,v as z,h as k,b as j,a as w}from"./useCheckoutContext-BXtGY5u3.js";import{r as i}from"./index-DRjF_FHU.js";const S="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1280'%20height='640'%20viewBox='0%200%2010080%205040'%3e%3cdefs%3e%3cclipPath%20id='c1'%3e%3cpath%20d='M0,0H6V3H0z'/%3e%3c/clipPath%3e%3cclipPath%20id='c2'%3e%3cpath%20d='M0,0V1.5H6V3H6zM6,0H3V3H0V3z'/%3e%3c/clipPath%3e%3cpath%20id='Star7'%20d='M0,-360%2069.421398,-144.155019%20281.459334,-224.456329%20155.988466,-35.603349%20350.974048,80.107536%20125.093037,99.758368%20156.198146,324.348792%200,160%20-156.198146,324.348792%20-125.093037,99.758368%20-350.974048,80.107536%20-155.988466,-35.603349%20-281.459334,-224.456329%20-69.421398,-144.155019z'/%3e%3cpath%20id='Star5'%20d='M0,-210%2054.859957,-75.508253%20199.721868,-64.893569%2088.765275,28.841586%20123.434903,169.893569%200,93.333333%20-123.434903,169.893569%20-88.765275,28.841586%20-199.721868,-64.893569%20-54.859957,-75.508253z'/%3e%3c/defs%3e%3cg%20transform='scale(840)'%3e%3crect%20width='12'%20height='6'%20fill='%23012169'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23fff'%20stroke-width='0.6'%20clip-path='url(%23c1)'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23e4002b'%20stroke-width='0.4'%20clip-path='url(%23c2)'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23fff'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23e4002b'%20stroke-width='0.6'/%3e%3c/g%3e%3cg%20fill='%23fff'%3e%3cuse%20id='Comwlth'%20xlink:href='%23Star7'%20transform='translate(2520,%203780)%20scale(2.1)'/%3e%3cuse%20id='αCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='4200'/%3e%3cuse%20id='βCrucis'%20xlink:href='%23Star7'%20x='6300'%20y='2205'/%3e%3cuse%20id='γCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='840'/%3e%3cuse%20id='δCrucis'%20xlink:href='%23Star7'%20x='8680'%20y='1869'/%3e%3cuse%20id='εCrucis'%20xlink:href='%23Star5'%20x='8064'%20y='2730'/%3e%3c/g%3e%3c/svg%3e",_="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='600'%20viewBox='0%200%209600%204800'%3e%3ctitle%3eFlag%20of%20Canada%20(Pantone%20colours)%3c/title%3e%3cpath%20fill='%23d52b1e'%20d='m0%200h2400l99%2099h4602l99-99h2400v4800h-2400l-99-99h-4602l-99%2099H0z'/%3e%3cpath%20fill='%23fff'%20d='m2400%200h4800v4800h-4800zm2490%204430-45-863a95%2095%200%200%201%20111-98l859%20151-116-320a65%2065%200%200%201%2020-73l941-762-212-99a65%2065%200%200%201-34-79l186-572-542%20115a65%2065%200%200%201-73-38l-105-247-423%20454a65%2065%200%200%201-111-57l204-1052-327%20189a65%2065%200%200%201-91-27l-332-652-332%20652a65%2065%200%200%201-91%2027l-327-189%20204%201052a65%2065%200%200%201-111%2057l-423-454-105%20247a65%2065%200%200%201-73%2038l-542-115%20186%20572a65%2065%200%200%201-34%2079l-212%2099%20941%20762a65%2065%200%200%201%2020%2073l-116%20320%20859-151a95%2095%200%200%201%20111%2098l-45%20863z'/%3e%3c/svg%3e",H="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2030'%20width='1200'%20height='600'%3e%3cclipPath%20id='s'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='t'%3e%3cpath%20d='M30,15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z'/%3e%3c/clipPath%3e%3cg%20clip-path='url(%23s)'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'%20fill='%23012169'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20stroke='%23fff'%20stroke-width='6'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20clip-path='url(%23t)'%20stroke='%23C8102E'%20stroke-width='4'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23fff'%20stroke-width='10'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23C8102E'%20stroke-width='6'/%3e%3c/g%3e%3c/svg%3e",E="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20height='600'%20width='1200'%3e%3cdefs%3e%3cclipPath%20id='Canton'%3e%3cpath%20d='M%200,0%20L%20600,0%20L%20600,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='Diagonals'%3e%3cpath%20d='M%200,0%20L%20300,150%20L%200,150%20z%20M%20300,0%20L%20600,0%20L%20300,150%20z%20M%20300,150%20L%20600,150%20L%20600,300%20z%20M%20300,150%20L%20300,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cg%20id='Pentagram'%3e%3cg%20id='Arm'%20transform='translate(0,-0.324925)'%3e%3cpath%20d='M%200,0%20L%200,0.5%20L%201,0%20z'/%3e%3cpath%20d='M%200,0%20L%200,-0.5%20L%201,0%20z'%20transform='rotate(-36,1,0)'/%3e%3c/g%3e%3cuse%20xlink:href='%23Arm'%20transform='scale(-1,1)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)%20scale(-1,1)'/%3e%3c/g%3e%3c/defs%3e%3crect%20fill='%23012169'%20x='0'%20y='0'%20width='1200'%20height='600'/%3e%3cg%20id='Flag_of_the_United_Kingdom'%3e%3cpath%20id='Saint_Andrews_Cross'%20stroke='%23FFF'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3cpath%20id='Saint_Patricks_Cross'%20stroke='%23C8102E'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='40'%20clip-path='url(%23Diagonals)'/%3e%3cg%20id='Saint_Georges_Cross'%3e%3cpath%20stroke='%23FFF'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='100'%20clip-path='url(%23Canton)'/%3e%3cpath%20stroke='%23C8102E'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Southern_Cross'%3e%3cg%20id='Gamma_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20scale(30)'/%3e%3c/g%3e%3cg%20transform='rotate(82,900,240)'%3e%3cg%20id='Delta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20rotate(-82)%20scale(40.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20rotate(-82)%20scale(25)'/%3e%3c/g%3e%3cg%20id='Beta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,380)%20rotate(-82)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,380)%20rotate(-82)%20scale(30)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Alpha_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,480)%20scale(50.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,480)%20scale(35)'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e",U="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1235'%20height='650'%20viewBox='0%200%207410%203900'%3e%3cpath%20d='M0,0h7410v3900H0'%20fill='%23b31942'/%3e%3cpath%20d='M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0'%20stroke='%23FFF'%20stroke-width='300'/%3e%3cpath%20d='M0,0h2964v2100H0'%20fill='%230a3161'/%3e%3cg%20fill='%23FFF'%3e%3cg%20id='s18'%3e%3cg%20id='s9'%3e%3cg%20id='s5'%3e%3cg%20id='s4'%3e%3cpath%20id='s'%20d='M247,90%20317.534230,307.082039%20132.873218,172.917961H361.126782L176.465770,307.082039z'/%3e%3cuse%20xlink:href='%23s'%20y='420'/%3e%3cuse%20xlink:href='%23s'%20y='840'/%3e%3cuse%20xlink:href='%23s'%20y='1260'/%3e%3c/g%3e%3cuse%20xlink:href='%23s'%20y='1680'/%3e%3c/g%3e%3cuse%20xlink:href='%23s4'%20x='247'%20y='210'/%3e%3c/g%3e%3cuse%20xlink:href='%23s9'%20x='494'/%3e%3c/g%3e%3cuse%20xlink:href='%23s18'%20x='988'/%3e%3cuse%20xlink:href='%23s9'%20x='1976'/%3e%3cuse%20xlink:href='%23s5'%20x='2470'/%3e%3c/g%3e%3c/svg%3e",h=[{code:"US",flag:U,dialCode:"+1",name:"United States"},{code:"CA",flag:_,dialCode:"+1",name:"Canada"},{code:"AU",flag:S,dialCode:"+61",name:"Australia"},{code:"NZ",flag:E,dialCode:"+64",name:"New Zealand"},{code:"GB",flag:H,dialCode:"+44",name:"United Kingdom"}],M=({value:s,onChange:c,label:n="Phone Number",placeholder:g="Phone Number",error:x})=>{const[d,m]=i.useState(!1),[a,C]=i.useState(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r))return e.code}return"US"}),l=i.useMemo(()=>p(a.toUpperCase()),[a]);i.useEffect(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r)){a!==e.code&&C(e.code);return}}},[s,a]);const v=i.useMemo(()=>h.find(e=>e.code===a)||h[0],[a]),o=i.useMemo(()=>s.startsWith(l)?s.replace(l,""):s,[s,l]),P=i.useMemo(()=>L.string().trim().min(1,"Phone number is required").refine(e=>{const r=l+e.replace(/[^\d]+/g,"");return z(r,a.toUpperCase())},{message:`Invalid phone number for ${v.name}`}),[l,a]),F=e=>{C(e);const r=p(e.toUpperCase());if(o){const f=o.replace(/[^\d]+/g,""),y=k(f,e.toUpperCase());c(y||r+f)}else c(r)},N=e=>{const r=e.replace(/[^\d]+/g,""),f=k(r,a.toUpperCase());c(f||l+r)},b=t.jsxs("div",{className:"relative flex items-center justify-center border-r border-[#e6e6e6] h-full",style:{minWidth:"70px"},children:[t.jsx("select",{value:a,onChange:e=>F(e.target.value),className:"absolute inset-0 w-full h-full opacity-0 cursor-pointer z-30",style:{fontSize:0},children:h.map(e=>t.jsx("option",{value:e.code,children:e.code},e.code))}),t.jsx("div",{className:"flex items-center justify-center z-20 pointer-events-none",children:t.jsx("img",{src:v.flag,alt:v.name,className:"w-6 h-4 object-cover rounded-sm mr-3"})}),t.jsx("div",{className:"absolute right-2 top-0 bottom-0 flex items-center pointer-events-none z-20",children:t.jsx("svg",{className:"w-3 h-3 text-gray-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]});return t.jsx("div",{className:"w-full",children:t.jsx(u,{type:"tel",label:n,placeholder:g,value:o,onChange:e=>N(e.target.value),onFocus:()=>{m(!0)},onBlur:()=>{m(!1)},inputClass:`w-full ${d||o?"!pl-[110px]":"!pl-[80px]"}`,autoComplete:"shipping tel",schema:P,error:x,prefix:t.jsxs("div",{className:"flex items-center h-full",children:[b,(d||o)&&t.jsx("span",{className:"ml-2 text-base font-family-inherit",children:l})]})})})};M.__docgenInfo={description:"",methods:[],displayName:"PhoneInput",props:{value:{required:!0,tsType:{name:"string"},description:""},onChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(value: string) => void",signature:{arguments:[{type:{name:"string"},name:"value"}],return:{name:"void"}}},description:""},label:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},placeholder:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},error:{required:!1,tsType:{name:"string"},description:""}}};const I=({showTitle:s=!0})=>{const{customerInfo:c,updateCustomerInfo:n}=j(),{firstName:g,lastName:x,email:d,phone:m}=c;return t.jsxs("div",{className:"clickaroo-checkout-ui w-full",children:[s&&t.jsx("div",{className:"text-lg md:text-2xl mb-5 font-medium",children:"Customer Information"}),t.jsxs("div",{className:"border border-solid border-[#e6e6e6] shadow rounded-md p-4 bg-white",children:[t.jsxs("div",{className:"flex flex-col md:flex-row gap-3 mb-2",children:[t.jsx(u,{label:"First Name",placeholder:"First Name",value:g,onChange:a=>n({firstName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping given-name",schema:w.shape.firstName}),t.jsx(u,{label:"Last Name",placeholder:"Last Name",value:x,onChange:a=>n({lastName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping family-name",schema:w.shape.lastName})]}),t.jsx("div",{className:"mb-2",children:t.jsx(u,{label:"Email",placeholder:"Email",value:d,onChange:a=>n({email:a.target.value}),inputClass:"w-full",autoComplete:"shipping email",schema:w.shape.email})}),t.jsx(M,{value:m,onChange:a=>n({phone:a})})]})]})};I.__docgenInfo={description:"",methods:[],displayName:"CustomInfo",props:{showTitle:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}}}};export{I as C};

package/dist/storybook/storybook-static/assets/CustomerInfo-CPNuEjrH.js

@@ -1 +0,0 @@
-import{j as t}from"./jsx-runtime-DiklIkkE.js";import{F as u}from"./ValidateInput-BKNagaQv.js";import{f as p,z as L,v as z,h as k,b as j,a as w}from"./useCheckoutContext-C7KjDyWW.js";import{r as i}from"./index-DRjF_FHU.js";const S="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1280'%20height='640'%20viewBox='0%200%2010080%205040'%3e%3cdefs%3e%3cclipPath%20id='c1'%3e%3cpath%20d='M0,0H6V3H0z'/%3e%3c/clipPath%3e%3cclipPath%20id='c2'%3e%3cpath%20d='M0,0V1.5H6V3H6zM6,0H3V3H0V3z'/%3e%3c/clipPath%3e%3cpath%20id='Star7'%20d='M0,-360%2069.421398,-144.155019%20281.459334,-224.456329%20155.988466,-35.603349%20350.974048,80.107536%20125.093037,99.758368%20156.198146,324.348792%200,160%20-156.198146,324.348792%20-125.093037,99.758368%20-350.974048,80.107536%20-155.988466,-35.603349%20-281.459334,-224.456329%20-69.421398,-144.155019z'/%3e%3cpath%20id='Star5'%20d='M0,-210%2054.859957,-75.508253%20199.721868,-64.893569%2088.765275,28.841586%20123.434903,169.893569%200,93.333333%20-123.434903,169.893569%20-88.765275,28.841586%20-199.721868,-64.893569%20-54.859957,-75.508253z'/%3e%3c/defs%3e%3cg%20transform='scale(840)'%3e%3crect%20width='12'%20height='6'%20fill='%23012169'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23fff'%20stroke-width='0.6'%20clip-path='url(%23c1)'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23e4002b'%20stroke-width='0.4'%20clip-path='url(%23c2)'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23fff'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23e4002b'%20stroke-width='0.6'/%3e%3c/g%3e%3cg%20fill='%23fff'%3e%3cuse%20id='Comwlth'%20xlink:href='%23Star7'%20transform='translate(2520,%203780)%20scale(2.1)'/%3e%3cuse%20id='αCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='4200'/%3e%3cuse%20id='βCrucis'%20xlink:href='%23Star7'%20x='6300'%20y='2205'/%3e%3cuse%20id='γCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='840'/%3e%3cuse%20id='δCrucis'%20xlink:href='%23Star7'%20x='8680'%20y='1869'/%3e%3cuse%20id='εCrucis'%20xlink:href='%23Star5'%20x='8064'%20y='2730'/%3e%3c/g%3e%3c/svg%3e",_="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='600'%20viewBox='0%200%209600%204800'%3e%3ctitle%3eFlag%20of%20Canada%20(Pantone%20colours)%3c/title%3e%3cpath%20fill='%23d52b1e'%20d='m0%200h2400l99%2099h4602l99-99h2400v4800h-2400l-99-99h-4602l-99%2099H0z'/%3e%3cpath%20fill='%23fff'%20d='m2400%200h4800v4800h-4800zm2490%204430-45-863a95%2095%200%200%201%20111-98l859%20151-116-320a65%2065%200%200%201%2020-73l941-762-212-99a65%2065%200%200%201-34-79l186-572-542%20115a65%2065%200%200%201-73-38l-105-247-423%20454a65%2065%200%200%201-111-57l204-1052-327%20189a65%2065%200%200%201-91-27l-332-652-332%20652a65%2065%200%200%201-91%2027l-327-189%20204%201052a65%2065%200%200%201-111%2057l-423-454-105%20247a65%2065%200%200%201-73%2038l-542-115%20186%20572a65%2065%200%200%201-34%2079l-212%2099%20941%20762a65%2065%200%200%201%2020%2073l-116%20320%20859-151a95%2095%200%200%201%20111%2098l-45%20863z'/%3e%3c/svg%3e",H="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2030'%20width='1200'%20height='600'%3e%3cclipPath%20id='s'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='t'%3e%3cpath%20d='M30,15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z'/%3e%3c/clipPath%3e%3cg%20clip-path='url(%23s)'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'%20fill='%23012169'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20stroke='%23fff'%20stroke-width='6'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20clip-path='url(%23t)'%20stroke='%23C8102E'%20stroke-width='4'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23fff'%20stroke-width='10'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23C8102E'%20stroke-width='6'/%3e%3c/g%3e%3c/svg%3e",E="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20height='600'%20width='1200'%3e%3cdefs%3e%3cclipPath%20id='Canton'%3e%3cpath%20d='M%200,0%20L%20600,0%20L%20600,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='Diagonals'%3e%3cpath%20d='M%200,0%20L%20300,150%20L%200,150%20z%20M%20300,0%20L%20600,0%20L%20300,150%20z%20M%20300,150%20L%20600,150%20L%20600,300%20z%20M%20300,150%20L%20300,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cg%20id='Pentagram'%3e%3cg%20id='Arm'%20transform='translate(0,-0.324925)'%3e%3cpath%20d='M%200,0%20L%200,0.5%20L%201,0%20z'/%3e%3cpath%20d='M%200,0%20L%200,-0.5%20L%201,0%20z'%20transform='rotate(-36,1,0)'/%3e%3c/g%3e%3cuse%20xlink:href='%23Arm'%20transform='scale(-1,1)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)%20scale(-1,1)'/%3e%3c/g%3e%3c/defs%3e%3crect%20fill='%23012169'%20x='0'%20y='0'%20width='1200'%20height='600'/%3e%3cg%20id='Flag_of_the_United_Kingdom'%3e%3cpath%20id='Saint_Andrews_Cross'%20stroke='%23FFF'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3cpath%20id='Saint_Patricks_Cross'%20stroke='%23C8102E'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='40'%20clip-path='url(%23Diagonals)'/%3e%3cg%20id='Saint_Georges_Cross'%3e%3cpath%20stroke='%23FFF'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='100'%20clip-path='url(%23Canton)'/%3e%3cpath%20stroke='%23C8102E'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Southern_Cross'%3e%3cg%20id='Gamma_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20scale(30)'/%3e%3c/g%3e%3cg%20transform='rotate(82,900,240)'%3e%3cg%20id='Delta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20rotate(-82)%20scale(40.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20rotate(-82)%20scale(25)'/%3e%3c/g%3e%3cg%20id='Beta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,380)%20rotate(-82)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,380)%20rotate(-82)%20scale(30)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Alpha_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,480)%20scale(50.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,480)%20scale(35)'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e",U="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1235'%20height='650'%20viewBox='0%200%207410%203900'%3e%3cpath%20d='M0,0h7410v3900H0'%20fill='%23b31942'/%3e%3cpath%20d='M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0'%20stroke='%23FFF'%20stroke-width='300'/%3e%3cpath%20d='M0,0h2964v2100H0'%20fill='%230a3161'/%3e%3cg%20fill='%23FFF'%3e%3cg%20id='s18'%3e%3cg%20id='s9'%3e%3cg%20id='s5'%3e%3cg%20id='s4'%3e%3cpath%20id='s'%20d='M247,90%20317.534230,307.082039%20132.873218,172.917961H361.126782L176.465770,307.082039z'/%3e%3cuse%20xlink:href='%23s'%20y='420'/%3e%3cuse%20xlink:href='%23s'%20y='840'/%3e%3cuse%20xlink:href='%23s'%20y='1260'/%3e%3c/g%3e%3cuse%20xlink:href='%23s'%20y='1680'/%3e%3c/g%3e%3cuse%20xlink:href='%23s4'%20x='247'%20y='210'/%3e%3c/g%3e%3cuse%20xlink:href='%23s9'%20x='494'/%3e%3c/g%3e%3cuse%20xlink:href='%23s18'%20x='988'/%3e%3cuse%20xlink:href='%23s9'%20x='1976'/%3e%3cuse%20xlink:href='%23s5'%20x='2470'/%3e%3c/g%3e%3c/svg%3e",h=[{code:"US",flag:U,dialCode:"+1",name:"United States"},{code:"CA",flag:_,dialCode:"+1",name:"Canada"},{code:"AU",flag:S,dialCode:"+61",name:"Australia"},{code:"NZ",flag:E,dialCode:"+64",name:"New Zealand"},{code:"GB",flag:H,dialCode:"+44",name:"United Kingdom"}],M=({value:s,onChange:c,label:n="Phone Number",placeholder:g="Phone Number",error:x})=>{const[d,m]=i.useState(!1),[a,C]=i.useState(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r))return e.code}return"US"}),l=i.useMemo(()=>p(a.toUpperCase()),[a]);i.useEffect(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r)){a!==e.code&&C(e.code);return}}},[s,a]);const v=i.useMemo(()=>h.find(e=>e.code===a)||h[0],[a]),o=i.useMemo(()=>s.startsWith(l)?s.replace(l,""):s,[s,l]),P=i.useMemo(()=>L.string().trim().min(1,"Phone number is required").refine(e=>{const r=l+e.replace(/[^\d]+/g,"");return z(r,a.toUpperCase())},{message:`Invalid phone number for ${v.name}`}),[l,a]),F=e=>{C(e);const r=p(e.toUpperCase());if(o){const f=o.replace(/[^\d]+/g,""),y=k(f,e.toUpperCase());c(y||r+f)}else c(r)},N=e=>{const r=e.replace(/[^\d]+/g,""),f=k(r,a.toUpperCase());c(f||l+r)},b=t.jsxs("div",{className:"relative flex items-center justify-center border-r border-[#e6e6e6] h-full",style:{minWidth:"70px"},children:[t.jsx("select",{value:a,onChange:e=>F(e.target.value),className:"absolute inset-0 w-full h-full opacity-0 cursor-pointer z-30",style:{fontSize:0},children:h.map(e=>t.jsx("option",{value:e.code,children:e.code},e.code))}),t.jsx("div",{className:"flex items-center justify-center z-20 pointer-events-none",children:t.jsx("img",{src:v.flag,alt:v.name,className:"w-6 h-4 object-cover rounded-sm mr-3"})}),t.jsx("div",{className:"absolute right-2 top-0 bottom-0 flex items-center pointer-events-none z-20",children:t.jsx("svg",{className:"w-3 h-3 text-gray-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]});return t.jsx("div",{className:"w-full",children:t.jsx(u,{type:"tel",label:n,placeholder:g,value:o,onChange:e=>N(e.target.value),onFocus:()=>{m(!0)},onBlur:()=>{m(!1)},inputClass:`w-full ${d||o?"!pl-[110px]":"!pl-[80px]"}`,autoComplete:"shipping tel",schema:P,error:x,prefix:t.jsxs("div",{className:"flex items-center h-full",children:[b,(d||o)&&t.jsx("span",{className:"ml-2 text-base font-family-inherit",children:l})]})})})};M.__docgenInfo={description:"",methods:[],displayName:"PhoneInput",props:{value:{required:!0,tsType:{name:"string"},description:""},onChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(value: string) => void",signature:{arguments:[{type:{name:"string"},name:"value"}],return:{name:"void"}}},description:""},label:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},placeholder:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},error:{required:!1,tsType:{name:"string"},description:""}}};const I=({showTitle:s=!0})=>{const{customerInfo:c,updateCustomerInfo:n}=j(),{firstName:g,lastName:x,email:d,phone:m}=c;return t.jsxs("div",{className:"clickaroo-checkout-ui w-full",children:[s&&t.jsx("div",{className:"text-lg md:text-2xl mb-5 font-medium",children:"Customer Information"}),t.jsxs("div",{className:"border border-solid border-[#e6e6e6] shadow rounded-md p-4 bg-white",children:[t.jsxs("div",{className:"flex flex-col md:flex-row gap-3 mb-2",children:[t.jsx(u,{label:"First Name",placeholder:"First Name",value:g,onChange:a=>n({firstName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping given-name",schema:w.shape.firstName}),t.jsx(u,{label:"Last Name",placeholder:"Last Name",value:x,onChange:a=>n({lastName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping family-name",schema:w.shape.lastName})]}),t.jsx("div",{className:"mb-2",children:t.jsx(u,{label:"Email",placeholder:"Email",value:d,onChange:a=>n({email:a.target.value}),inputClass:"w-full",autoComplete:"shipping email",schema:w.shape.email})}),t.jsx(M,{value:m,onChange:a=>n({phone:a})})]})]})};I.__docgenInfo={description:"",methods:[],displayName:"CustomInfo",props:{showTitle:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}}}};export{I as C};

package/dist/storybook/storybook-static/assets/CustomerInfo-CTx1dFS3.js

@@ -1 +0,0 @@
-import{j as t}from"./jsx-runtime-DiklIkkE.js";import{F as u}from"./ValidateInput-Cl2O4HCX.js";import{f as p,z as L,v as z,h as k,b as j,a as w}from"./useCheckoutContext-B8tsk5b5.js";import{r as i}from"./index-DRjF_FHU.js";const S="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1280'%20height='640'%20viewBox='0%200%2010080%205040'%3e%3cdefs%3e%3cclipPath%20id='c1'%3e%3cpath%20d='M0,0H6V3H0z'/%3e%3c/clipPath%3e%3cclipPath%20id='c2'%3e%3cpath%20d='M0,0V1.5H6V3H6zM6,0H3V3H0V3z'/%3e%3c/clipPath%3e%3cpath%20id='Star7'%20d='M0,-360%2069.421398,-144.155019%20281.459334,-224.456329%20155.988466,-35.603349%20350.974048,80.107536%20125.093037,99.758368%20156.198146,324.348792%200,160%20-156.198146,324.348792%20-125.093037,99.758368%20-350.974048,80.107536%20-155.988466,-35.603349%20-281.459334,-224.456329%20-69.421398,-144.155019z'/%3e%3cpath%20id='Star5'%20d='M0,-210%2054.859957,-75.508253%20199.721868,-64.893569%2088.765275,28.841586%20123.434903,169.893569%200,93.333333%20-123.434903,169.893569%20-88.765275,28.841586%20-199.721868,-64.893569%20-54.859957,-75.508253z'/%3e%3c/defs%3e%3cg%20transform='scale(840)'%3e%3crect%20width='12'%20height='6'%20fill='%23012169'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23fff'%20stroke-width='0.6'%20clip-path='url(%23c1)'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23e4002b'%20stroke-width='0.4'%20clip-path='url(%23c2)'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23fff'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23e4002b'%20stroke-width='0.6'/%3e%3c/g%3e%3cg%20fill='%23fff'%3e%3cuse%20id='Comwlth'%20xlink:href='%23Star7'%20transform='translate(2520,%203780)%20scale(2.1)'/%3e%3cuse%20id='αCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='4200'/%3e%3cuse%20id='βCrucis'%20xlink:href='%23Star7'%20x='6300'%20y='2205'/%3e%3cuse%20id='γCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='840'/%3e%3cuse%20id='δCrucis'%20xlink:href='%23Star7'%20x='8680'%20y='1869'/%3e%3cuse%20id='εCrucis'%20xlink:href='%23Star5'%20x='8064'%20y='2730'/%3e%3c/g%3e%3c/svg%3e",_="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='600'%20viewBox='0%200%209600%204800'%3e%3ctitle%3eFlag%20of%20Canada%20(Pantone%20colours)%3c/title%3e%3cpath%20fill='%23d52b1e'%20d='m0%200h2400l99%2099h4602l99-99h2400v4800h-2400l-99-99h-4602l-99%2099H0z'/%3e%3cpath%20fill='%23fff'%20d='m2400%200h4800v4800h-4800zm2490%204430-45-863a95%2095%200%200%201%20111-98l859%20151-116-320a65%2065%200%200%201%2020-73l941-762-212-99a65%2065%200%200%201-34-79l186-572-542%20115a65%2065%200%200%201-73-38l-105-247-423%20454a65%2065%200%200%201-111-57l204-1052-327%20189a65%2065%200%200%201-91-27l-332-652-332%20652a65%2065%200%200%201-91%2027l-327-189%20204%201052a65%2065%200%200%201-111%2057l-423-454-105%20247a65%2065%200%200%201-73%2038l-542-115%20186%20572a65%2065%200%200%201-34%2079l-212%2099%20941%20762a65%2065%200%200%201%2020%2073l-116%20320%20859-151a95%2095%200%200%201%20111%2098l-45%20863z'/%3e%3c/svg%3e",H="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2030'%20width='1200'%20height='600'%3e%3cclipPath%20id='s'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='t'%3e%3cpath%20d='M30,15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z'/%3e%3c/clipPath%3e%3cg%20clip-path='url(%23s)'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'%20fill='%23012169'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20stroke='%23fff'%20stroke-width='6'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20clip-path='url(%23t)'%20stroke='%23C8102E'%20stroke-width='4'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23fff'%20stroke-width='10'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23C8102E'%20stroke-width='6'/%3e%3c/g%3e%3c/svg%3e",E="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20height='600'%20width='1200'%3e%3cdefs%3e%3cclipPath%20id='Canton'%3e%3cpath%20d='M%200,0%20L%20600,0%20L%20600,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='Diagonals'%3e%3cpath%20d='M%200,0%20L%20300,150%20L%200,150%20z%20M%20300,0%20L%20600,0%20L%20300,150%20z%20M%20300,150%20L%20600,150%20L%20600,300%20z%20M%20300,150%20L%20300,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cg%20id='Pentagram'%3e%3cg%20id='Arm'%20transform='translate(0,-0.324925)'%3e%3cpath%20d='M%200,0%20L%200,0.5%20L%201,0%20z'/%3e%3cpath%20d='M%200,0%20L%200,-0.5%20L%201,0%20z'%20transform='rotate(-36,1,0)'/%3e%3c/g%3e%3cuse%20xlink:href='%23Arm'%20transform='scale(-1,1)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)%20scale(-1,1)'/%3e%3c/g%3e%3c/defs%3e%3crect%20fill='%23012169'%20x='0'%20y='0'%20width='1200'%20height='600'/%3e%3cg%20id='Flag_of_the_United_Kingdom'%3e%3cpath%20id='Saint_Andrews_Cross'%20stroke='%23FFF'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3cpath%20id='Saint_Patricks_Cross'%20stroke='%23C8102E'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='40'%20clip-path='url(%23Diagonals)'/%3e%3cg%20id='Saint_Georges_Cross'%3e%3cpath%20stroke='%23FFF'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='100'%20clip-path='url(%23Canton)'/%3e%3cpath%20stroke='%23C8102E'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Southern_Cross'%3e%3cg%20id='Gamma_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20scale(30)'/%3e%3c/g%3e%3cg%20transform='rotate(82,900,240)'%3e%3cg%20id='Delta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20rotate(-82)%20scale(40.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20rotate(-82)%20scale(25)'/%3e%3c/g%3e%3cg%20id='Beta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,380)%20rotate(-82)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,380)%20rotate(-82)%20scale(30)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Alpha_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,480)%20scale(50.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,480)%20scale(35)'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e",U="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1235'%20height='650'%20viewBox='0%200%207410%203900'%3e%3cpath%20d='M0,0h7410v3900H0'%20fill='%23b31942'/%3e%3cpath%20d='M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0'%20stroke='%23FFF'%20stroke-width='300'/%3e%3cpath%20d='M0,0h2964v2100H0'%20fill='%230a3161'/%3e%3cg%20fill='%23FFF'%3e%3cg%20id='s18'%3e%3cg%20id='s9'%3e%3cg%20id='s5'%3e%3cg%20id='s4'%3e%3cpath%20id='s'%20d='M247,90%20317.534230,307.082039%20132.873218,172.917961H361.126782L176.465770,307.082039z'/%3e%3cuse%20xlink:href='%23s'%20y='420'/%3e%3cuse%20xlink:href='%23s'%20y='840'/%3e%3cuse%20xlink:href='%23s'%20y='1260'/%3e%3c/g%3e%3cuse%20xlink:href='%23s'%20y='1680'/%3e%3c/g%3e%3cuse%20xlink:href='%23s4'%20x='247'%20y='210'/%3e%3c/g%3e%3cuse%20xlink:href='%23s9'%20x='494'/%3e%3c/g%3e%3cuse%20xlink:href='%23s18'%20x='988'/%3e%3cuse%20xlink:href='%23s9'%20x='1976'/%3e%3cuse%20xlink:href='%23s5'%20x='2470'/%3e%3c/g%3e%3c/svg%3e",h=[{code:"US",flag:U,dialCode:"+1",name:"United States"},{code:"CA",flag:_,dialCode:"+1",name:"Canada"},{code:"AU",flag:S,dialCode:"+61",name:"Australia"},{code:"NZ",flag:E,dialCode:"+64",name:"New Zealand"},{code:"GB",flag:H,dialCode:"+44",name:"United Kingdom"}],M=({value:s,onChange:c,label:n="Phone Number",placeholder:g="Phone Number",error:x})=>{const[d,m]=i.useState(!1),[a,C]=i.useState(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r))return e.code}return"US"}),l=i.useMemo(()=>p(a.toUpperCase()),[a]);i.useEffect(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r)){a!==e.code&&C(e.code);return}}},[s,a]);const v=i.useMemo(()=>h.find(e=>e.code===a)||h[0],[a]),o=i.useMemo(()=>s.startsWith(l)?s.replace(l,""):s,[s,l]),P=i.useMemo(()=>L.string().trim().min(1,"Phone number is required").refine(e=>{const r=l+e.replace(/[^\d]+/g,"");return z(r,a.toUpperCase())},{message:`Invalid phone number for ${v.name}`}),[l,a]),F=e=>{C(e);const r=p(e.toUpperCase());if(o){const f=o.replace(/[^\d]+/g,""),y=k(f,e.toUpperCase());c(y||r+f)}else c(r)},N=e=>{const r=e.replace(/[^\d]+/g,""),f=k(r,a.toUpperCase());c(f||l+r)},b=t.jsxs("div",{className:"relative flex items-center justify-center border-r border-[#e6e6e6] h-full",style:{minWidth:"70px"},children:[t.jsx("select",{value:a,onChange:e=>F(e.target.value),className:"absolute inset-0 w-full h-full opacity-0 cursor-pointer z-30",style:{fontSize:0},children:h.map(e=>t.jsx("option",{value:e.code,children:e.code},e.code))}),t.jsx("div",{className:"flex items-center justify-center z-20 pointer-events-none",children:t.jsx("img",{src:v.flag,alt:v.name,className:"w-6 h-4 object-cover rounded-sm mr-3"})}),t.jsx("div",{className:"absolute right-2 top-0 bottom-0 flex items-center pointer-events-none z-20",children:t.jsx("svg",{className:"w-3 h-3 text-gray-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]});return t.jsx("div",{className:"w-full",children:t.jsx(u,{type:"tel",label:n,placeholder:g,value:o,onChange:e=>N(e.target.value),onFocus:()=>{m(!0)},onBlur:()=>{m(!1)},inputClass:`w-full ${d||o?"!pl-[110px]":"!pl-[80px]"}`,autoComplete:"shipping tel",schema:P,error:x,prefix:t.jsxs("div",{className:"flex items-center h-full",children:[b,(d||o)&&t.jsx("span",{className:"ml-2 text-base font-family-inherit",children:l})]})})})};M.__docgenInfo={description:"",methods:[],displayName:"PhoneInput",props:{value:{required:!0,tsType:{name:"string"},description:""},onChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(value: string) => void",signature:{arguments:[{type:{name:"string"},name:"value"}],return:{name:"void"}}},description:""},label:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},placeholder:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},error:{required:!1,tsType:{name:"string"},description:""}}};const I=({showTitle:s=!0})=>{const{customerInfo:c,updateCustomerInfo:n}=j(),{firstName:g,lastName:x,email:d,phone:m}=c;return t.jsxs("div",{className:"clickaroo-checkout-ui w-full",children:[s&&t.jsx("div",{className:"text-lg md:text-2xl mb-5 font-medium",children:"Customer Information"}),t.jsxs("div",{className:"border border-solid border-[#e6e6e6] shadow rounded-md p-4 bg-white",children:[t.jsxs("div",{className:"flex flex-col md:flex-row gap-3 mb-2",children:[t.jsx(u,{label:"First Name",placeholder:"First Name",value:g,onChange:a=>n({firstName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping given-name",schema:w.shape.firstName}),t.jsx(u,{label:"Last Name",placeholder:"Last Name",value:x,onChange:a=>n({lastName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping family-name",schema:w.shape.lastName})]}),t.jsx("div",{className:"mb-2",children:t.jsx(u,{label:"Email",placeholder:"Email",value:d,onChange:a=>n({email:a.target.value}),inputClass:"w-full",autoComplete:"shipping email",schema:w.shape.email})}),t.jsx(M,{value:m,onChange:a=>n({phone:a})})]})]})};I.__docgenInfo={description:"",methods:[],displayName:"CustomInfo",props:{showTitle:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}}}};export{I as C};

package/dist/storybook/storybook-static/assets/CustomerInfo-CYLNdAoo.js

@@ -1 +0,0 @@
-import{j as t}from"./jsx-runtime-DiklIkkE.js";import{F as u}from"./ValidateInput-C71ymd_w.js";import{f as p,z as L,v as z,h as k,b as j,a as w}from"./useCheckoutContext-w0N5TNgR.js";import{r as i}from"./index-DRjF_FHU.js";const S="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1280'%20height='640'%20viewBox='0%200%2010080%205040'%3e%3cdefs%3e%3cclipPath%20id='c1'%3e%3cpath%20d='M0,0H6V3H0z'/%3e%3c/clipPath%3e%3cclipPath%20id='c2'%3e%3cpath%20d='M0,0V1.5H6V3H6zM6,0H3V3H0V3z'/%3e%3c/clipPath%3e%3cpath%20id='Star7'%20d='M0,-360%2069.421398,-144.155019%20281.459334,-224.456329%20155.988466,-35.603349%20350.974048,80.107536%20125.093037,99.758368%20156.198146,324.348792%200,160%20-156.198146,324.348792%20-125.093037,99.758368%20-350.974048,80.107536%20-155.988466,-35.603349%20-281.459334,-224.456329%20-69.421398,-144.155019z'/%3e%3cpath%20id='Star5'%20d='M0,-210%2054.859957,-75.508253%20199.721868,-64.893569%2088.765275,28.841586%20123.434903,169.893569%200,93.333333%20-123.434903,169.893569%20-88.765275,28.841586%20-199.721868,-64.893569%20-54.859957,-75.508253z'/%3e%3c/defs%3e%3cg%20transform='scale(840)'%3e%3crect%20width='12'%20height='6'%20fill='%23012169'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23fff'%20stroke-width='0.6'%20clip-path='url(%23c1)'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23e4002b'%20stroke-width='0.4'%20clip-path='url(%23c2)'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23fff'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23e4002b'%20stroke-width='0.6'/%3e%3c/g%3e%3cg%20fill='%23fff'%3e%3cuse%20id='Comwlth'%20xlink:href='%23Star7'%20transform='translate(2520,%203780)%20scale(2.1)'/%3e%3cuse%20id='αCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='4200'/%3e%3cuse%20id='βCrucis'%20xlink:href='%23Star7'%20x='6300'%20y='2205'/%3e%3cuse%20id='γCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='840'/%3e%3cuse%20id='δCrucis'%20xlink:href='%23Star7'%20x='8680'%20y='1869'/%3e%3cuse%20id='εCrucis'%20xlink:href='%23Star5'%20x='8064'%20y='2730'/%3e%3c/g%3e%3c/svg%3e",_="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='600'%20viewBox='0%200%209600%204800'%3e%3ctitle%3eFlag%20of%20Canada%20(Pantone%20colours)%3c/title%3e%3cpath%20fill='%23d52b1e'%20d='m0%200h2400l99%2099h4602l99-99h2400v4800h-2400l-99-99h-4602l-99%2099H0z'/%3e%3cpath%20fill='%23fff'%20d='m2400%200h4800v4800h-4800zm2490%204430-45-863a95%2095%200%200%201%20111-98l859%20151-116-320a65%2065%200%200%201%2020-73l941-762-212-99a65%2065%200%200%201-34-79l186-572-542%20115a65%2065%200%200%201-73-38l-105-247-423%20454a65%2065%200%200%201-111-57l204-1052-327%20189a65%2065%200%200%201-91-27l-332-652-332%20652a65%2065%200%200%201-91%2027l-327-189%20204%201052a65%2065%200%200%201-111%2057l-423-454-105%20247a65%2065%200%200%201-73%2038l-542-115%20186%20572a65%2065%200%200%201-34%2079l-212%2099%20941%20762a65%2065%200%200%201%2020%2073l-116%20320%20859-151a95%2095%200%200%201%20111%2098l-45%20863z'/%3e%3c/svg%3e",H="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2030'%20width='1200'%20height='600'%3e%3cclipPath%20id='s'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='t'%3e%3cpath%20d='M30,15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z'/%3e%3c/clipPath%3e%3cg%20clip-path='url(%23s)'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'%20fill='%23012169'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20stroke='%23fff'%20stroke-width='6'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20clip-path='url(%23t)'%20stroke='%23C8102E'%20stroke-width='4'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23fff'%20stroke-width='10'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23C8102E'%20stroke-width='6'/%3e%3c/g%3e%3c/svg%3e",E="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20height='600'%20width='1200'%3e%3cdefs%3e%3cclipPath%20id='Canton'%3e%3cpath%20d='M%200,0%20L%20600,0%20L%20600,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='Diagonals'%3e%3cpath%20d='M%200,0%20L%20300,150%20L%200,150%20z%20M%20300,0%20L%20600,0%20L%20300,150%20z%20M%20300,150%20L%20600,150%20L%20600,300%20z%20M%20300,150%20L%20300,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cg%20id='Pentagram'%3e%3cg%20id='Arm'%20transform='translate(0,-0.324925)'%3e%3cpath%20d='M%200,0%20L%200,0.5%20L%201,0%20z'/%3e%3cpath%20d='M%200,0%20L%200,-0.5%20L%201,0%20z'%20transform='rotate(-36,1,0)'/%3e%3c/g%3e%3cuse%20xlink:href='%23Arm'%20transform='scale(-1,1)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)%20scale(-1,1)'/%3e%3c/g%3e%3c/defs%3e%3crect%20fill='%23012169'%20x='0'%20y='0'%20width='1200'%20height='600'/%3e%3cg%20id='Flag_of_the_United_Kingdom'%3e%3cpath%20id='Saint_Andrews_Cross'%20stroke='%23FFF'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3cpath%20id='Saint_Patricks_Cross'%20stroke='%23C8102E'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='40'%20clip-path='url(%23Diagonals)'/%3e%3cg%20id='Saint_Georges_Cross'%3e%3cpath%20stroke='%23FFF'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='100'%20clip-path='url(%23Canton)'/%3e%3cpath%20stroke='%23C8102E'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Southern_Cross'%3e%3cg%20id='Gamma_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20scale(30)'/%3e%3c/g%3e%3cg%20transform='rotate(82,900,240)'%3e%3cg%20id='Delta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20rotate(-82)%20scale(40.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20rotate(-82)%20scale(25)'/%3e%3c/g%3e%3cg%20id='Beta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,380)%20rotate(-82)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,380)%20rotate(-82)%20scale(30)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Alpha_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,480)%20scale(50.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,480)%20scale(35)'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e",U="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1235'%20height='650'%20viewBox='0%200%207410%203900'%3e%3cpath%20d='M0,0h7410v3900H0'%20fill='%23b31942'/%3e%3cpath%20d='M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0'%20stroke='%23FFF'%20stroke-width='300'/%3e%3cpath%20d='M0,0h2964v2100H0'%20fill='%230a3161'/%3e%3cg%20fill='%23FFF'%3e%3cg%20id='s18'%3e%3cg%20id='s9'%3e%3cg%20id='s5'%3e%3cg%20id='s4'%3e%3cpath%20id='s'%20d='M247,90%20317.534230,307.082039%20132.873218,172.917961H361.126782L176.465770,307.082039z'/%3e%3cuse%20xlink:href='%23s'%20y='420'/%3e%3cuse%20xlink:href='%23s'%20y='840'/%3e%3cuse%20xlink:href='%23s'%20y='1260'/%3e%3c/g%3e%3cuse%20xlink:href='%23s'%20y='1680'/%3e%3c/g%3e%3cuse%20xlink:href='%23s4'%20x='247'%20y='210'/%3e%3c/g%3e%3cuse%20xlink:href='%23s9'%20x='494'/%3e%3c/g%3e%3cuse%20xlink:href='%23s18'%20x='988'/%3e%3cuse%20xlink:href='%23s9'%20x='1976'/%3e%3cuse%20xlink:href='%23s5'%20x='2470'/%3e%3c/g%3e%3c/svg%3e",h=[{code:"US",flag:U,dialCode:"+1",name:"United States"},{code:"CA",flag:_,dialCode:"+1",name:"Canada"},{code:"AU",flag:S,dialCode:"+61",name:"Australia"},{code:"NZ",flag:E,dialCode:"+64",name:"New Zealand"},{code:"GB",flag:H,dialCode:"+44",name:"United Kingdom"}],M=({value:s,onChange:c,label:n="Phone Number",placeholder:g="Phone Number",error:x})=>{const[d,m]=i.useState(!1),[a,C]=i.useState(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r))return e.code}return"US"}),l=i.useMemo(()=>p(a.toUpperCase()),[a]);i.useEffect(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r)){a!==e.code&&C(e.code);return}}},[s,a]);const v=i.useMemo(()=>h.find(e=>e.code===a)||h[0],[a]),o=i.useMemo(()=>s.startsWith(l)?s.replace(l,""):s,[s,l]),P=i.useMemo(()=>L.string().trim().min(1,"Phone number is required").refine(e=>{const r=l+e.replace(/[^\d]+/g,"");return z(r,a.toUpperCase())},{message:`Invalid phone number for ${v.name}`}),[l,a]),F=e=>{C(e);const r=p(e.toUpperCase());if(o){const f=o.replace(/[^\d]+/g,""),y=k(f,e.toUpperCase());c(y||r+f)}else c(r)},N=e=>{const r=e.replace(/[^\d]+/g,""),f=k(r,a.toUpperCase());c(f||l+r)},b=t.jsxs("div",{className:"relative flex items-center justify-center border-r border-[#e6e6e6] h-full",style:{minWidth:"70px"},children:[t.jsx("select",{value:a,onChange:e=>F(e.target.value),className:"absolute inset-0 w-full h-full opacity-0 cursor-pointer z-30",style:{fontSize:0},children:h.map(e=>t.jsx("option",{value:e.code,children:e.code},e.code))}),t.jsx("div",{className:"flex items-center justify-center z-20 pointer-events-none",children:t.jsx("img",{src:v.flag,alt:v.name,className:"w-6 h-4 object-cover rounded-sm mr-3"})}),t.jsx("div",{className:"absolute right-2 top-0 bottom-0 flex items-center pointer-events-none z-20",children:t.jsx("svg",{className:"w-3 h-3 text-gray-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]});return t.jsx("div",{className:"w-full",children:t.jsx(u,{type:"tel",label:n,placeholder:g,value:o,onChange:e=>N(e.target.value),onFocus:()=>{m(!0)},onBlur:()=>{m(!1)},inputClass:`w-full ${d||o?"!pl-[110px]":"!pl-[80px]"}`,autoComplete:"shipping tel",schema:P,error:x,prefix:t.jsxs("div",{className:"flex items-center h-full",children:[b,(d||o)&&t.jsx("span",{className:"ml-2 text-base font-family-inherit",children:l})]})})})};M.__docgenInfo={description:"",methods:[],displayName:"PhoneInput",props:{value:{required:!0,tsType:{name:"string"},description:""},onChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(value: string) => void",signature:{arguments:[{type:{name:"string"},name:"value"}],return:{name:"void"}}},description:""},label:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},placeholder:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},error:{required:!1,tsType:{name:"string"},description:""}}};const I=({showTitle:s=!0})=>{const{customerInfo:c,updateCustomerInfo:n}=j(),{firstName:g,lastName:x,email:d,phone:m}=c;return t.jsxs("div",{className:"clickaroo-checkout-ui w-full",children:[s&&t.jsx("div",{className:"text-lg md:text-2xl mb-5 font-medium",children:"Customer Information"}),t.jsxs("div",{className:"border border-solid border-[#e6e6e6] shadow rounded-md p-4 bg-white",children:[t.jsxs("div",{className:"flex flex-col md:flex-row gap-3 mb-2",children:[t.jsx(u,{label:"First Name",placeholder:"First Name",value:g,onChange:a=>n({firstName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping given-name",schema:w.shape.firstName}),t.jsx(u,{label:"Last Name",placeholder:"Last Name",value:x,onChange:a=>n({lastName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping family-name",schema:w.shape.lastName})]}),t.jsx("div",{className:"mb-2",children:t.jsx(u,{label:"Email",placeholder:"Email",value:d,onChange:a=>n({email:a.target.value}),inputClass:"w-full",autoComplete:"shipping email",schema:w.shape.email})}),t.jsx(M,{value:m,onChange:a=>n({phone:a})})]})]})};I.__docgenInfo={description:"",methods:[],displayName:"CustomInfo",props:{showTitle:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}}}};export{I as C};

package/dist/storybook/storybook-static/assets/CustomerInfo-CdeZHMcz.js

@@ -1 +0,0 @@
-import{j as t}from"./jsx-runtime-DiklIkkE.js";import{F as u}from"./ValidateInput-C6pnsZFe.js";import{f as p,z as L,v as z,h as k,b as j,a as w}from"./useCheckoutContext-Cyg-MLQs.js";import{r as i}from"./index-DRjF_FHU.js";const S="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1280'%20height='640'%20viewBox='0%200%2010080%205040'%3e%3cdefs%3e%3cclipPath%20id='c1'%3e%3cpath%20d='M0,0H6V3H0z'/%3e%3c/clipPath%3e%3cclipPath%20id='c2'%3e%3cpath%20d='M0,0V1.5H6V3H6zM6,0H3V3H0V3z'/%3e%3c/clipPath%3e%3cpath%20id='Star7'%20d='M0,-360%2069.421398,-144.155019%20281.459334,-224.456329%20155.988466,-35.603349%20350.974048,80.107536%20125.093037,99.758368%20156.198146,324.348792%200,160%20-156.198146,324.348792%20-125.093037,99.758368%20-350.974048,80.107536%20-155.988466,-35.603349%20-281.459334,-224.456329%20-69.421398,-144.155019z'/%3e%3cpath%20id='Star5'%20d='M0,-210%2054.859957,-75.508253%20199.721868,-64.893569%2088.765275,28.841586%20123.434903,169.893569%200,93.333333%20-123.434903,169.893569%20-88.765275,28.841586%20-199.721868,-64.893569%20-54.859957,-75.508253z'/%3e%3c/defs%3e%3cg%20transform='scale(840)'%3e%3crect%20width='12'%20height='6'%20fill='%23012169'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23fff'%20stroke-width='0.6'%20clip-path='url(%23c1)'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23e4002b'%20stroke-width='0.4'%20clip-path='url(%23c2)'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23fff'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23e4002b'%20stroke-width='0.6'/%3e%3c/g%3e%3cg%20fill='%23fff'%3e%3cuse%20id='Comwlth'%20xlink:href='%23Star7'%20transform='translate(2520,%203780)%20scale(2.1)'/%3e%3cuse%20id='αCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='4200'/%3e%3cuse%20id='βCrucis'%20xlink:href='%23Star7'%20x='6300'%20y='2205'/%3e%3cuse%20id='γCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='840'/%3e%3cuse%20id='δCrucis'%20xlink:href='%23Star7'%20x='8680'%20y='1869'/%3e%3cuse%20id='εCrucis'%20xlink:href='%23Star5'%20x='8064'%20y='2730'/%3e%3c/g%3e%3c/svg%3e",_="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='600'%20viewBox='0%200%209600%204800'%3e%3ctitle%3eFlag%20of%20Canada%20(Pantone%20colours)%3c/title%3e%3cpath%20fill='%23d52b1e'%20d='m0%200h2400l99%2099h4602l99-99h2400v4800h-2400l-99-99h-4602l-99%2099H0z'/%3e%3cpath%20fill='%23fff'%20d='m2400%200h4800v4800h-4800zm2490%204430-45-863a95%2095%200%200%201%20111-98l859%20151-116-320a65%2065%200%200%201%2020-73l941-762-212-99a65%2065%200%200%201-34-79l186-572-542%20115a65%2065%200%200%201-73-38l-105-247-423%20454a65%2065%200%200%201-111-57l204-1052-327%20189a65%2065%200%200%201-91-27l-332-652-332%20652a65%2065%200%200%201-91%2027l-327-189%20204%201052a65%2065%200%200%201-111%2057l-423-454-105%20247a65%2065%200%200%201-73%2038l-542-115%20186%20572a65%2065%200%200%201-34%2079l-212%2099%20941%20762a65%2065%200%200%201%2020%2073l-116%20320%20859-151a95%2095%200%200%201%20111%2098l-45%20863z'/%3e%3c/svg%3e",H="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2030'%20width='1200'%20height='600'%3e%3cclipPath%20id='s'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='t'%3e%3cpath%20d='M30,15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z'/%3e%3c/clipPath%3e%3cg%20clip-path='url(%23s)'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'%20fill='%23012169'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20stroke='%23fff'%20stroke-width='6'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20clip-path='url(%23t)'%20stroke='%23C8102E'%20stroke-width='4'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23fff'%20stroke-width='10'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23C8102E'%20stroke-width='6'/%3e%3c/g%3e%3c/svg%3e",E="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20height='600'%20width='1200'%3e%3cdefs%3e%3cclipPath%20id='Canton'%3e%3cpath%20d='M%200,0%20L%20600,0%20L%20600,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='Diagonals'%3e%3cpath%20d='M%200,0%20L%20300,150%20L%200,150%20z%20M%20300,0%20L%20600,0%20L%20300,150%20z%20M%20300,150%20L%20600,150%20L%20600,300%20z%20M%20300,150%20L%20300,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cg%20id='Pentagram'%3e%3cg%20id='Arm'%20transform='translate(0,-0.324925)'%3e%3cpath%20d='M%200,0%20L%200,0.5%20L%201,0%20z'/%3e%3cpath%20d='M%200,0%20L%200,-0.5%20L%201,0%20z'%20transform='rotate(-36,1,0)'/%3e%3c/g%3e%3cuse%20xlink:href='%23Arm'%20transform='scale(-1,1)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)%20scale(-1,1)'/%3e%3c/g%3e%3c/defs%3e%3crect%20fill='%23012169'%20x='0'%20y='0'%20width='1200'%20height='600'/%3e%3cg%20id='Flag_of_the_United_Kingdom'%3e%3cpath%20id='Saint_Andrews_Cross'%20stroke='%23FFF'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3cpath%20id='Saint_Patricks_Cross'%20stroke='%23C8102E'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='40'%20clip-path='url(%23Diagonals)'/%3e%3cg%20id='Saint_Georges_Cross'%3e%3cpath%20stroke='%23FFF'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='100'%20clip-path='url(%23Canton)'/%3e%3cpath%20stroke='%23C8102E'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Southern_Cross'%3e%3cg%20id='Gamma_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20scale(30)'/%3e%3c/g%3e%3cg%20transform='rotate(82,900,240)'%3e%3cg%20id='Delta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20rotate(-82)%20scale(40.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20rotate(-82)%20scale(25)'/%3e%3c/g%3e%3cg%20id='Beta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,380)%20rotate(-82)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,380)%20rotate(-82)%20scale(30)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Alpha_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,480)%20scale(50.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,480)%20scale(35)'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e",U="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1235'%20height='650'%20viewBox='0%200%207410%203900'%3e%3cpath%20d='M0,0h7410v3900H0'%20fill='%23b31942'/%3e%3cpath%20d='M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0'%20stroke='%23FFF'%20stroke-width='300'/%3e%3cpath%20d='M0,0h2964v2100H0'%20fill='%230a3161'/%3e%3cg%20fill='%23FFF'%3e%3cg%20id='s18'%3e%3cg%20id='s9'%3e%3cg%20id='s5'%3e%3cg%20id='s4'%3e%3cpath%20id='s'%20d='M247,90%20317.534230,307.082039%20132.873218,172.917961H361.126782L176.465770,307.082039z'/%3e%3cuse%20xlink:href='%23s'%20y='420'/%3e%3cuse%20xlink:href='%23s'%20y='840'/%3e%3cuse%20xlink:href='%23s'%20y='1260'/%3e%3c/g%3e%3cuse%20xlink:href='%23s'%20y='1680'/%3e%3c/g%3e%3cuse%20xlink:href='%23s4'%20x='247'%20y='210'/%3e%3c/g%3e%3cuse%20xlink:href='%23s9'%20x='494'/%3e%3c/g%3e%3cuse%20xlink:href='%23s18'%20x='988'/%3e%3cuse%20xlink:href='%23s9'%20x='1976'/%3e%3cuse%20xlink:href='%23s5'%20x='2470'/%3e%3c/g%3e%3c/svg%3e",h=[{code:"US",flag:U,dialCode:"+1",name:"United States"},{code:"CA",flag:_,dialCode:"+1",name:"Canada"},{code:"AU",flag:S,dialCode:"+61",name:"Australia"},{code:"NZ",flag:E,dialCode:"+64",name:"New Zealand"},{code:"GB",flag:H,dialCode:"+44",name:"United Kingdom"}],M=({value:s,onChange:c,label:n="Phone Number",placeholder:g="Phone Number",error:x})=>{const[d,m]=i.useState(!1),[a,C]=i.useState(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r))return e.code}return"US"}),l=i.useMemo(()=>p(a.toUpperCase()),[a]);i.useEffect(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r)){a!==e.code&&C(e.code);return}}},[s,a]);const v=i.useMemo(()=>h.find(e=>e.code===a)||h[0],[a]),o=i.useMemo(()=>s.startsWith(l)?s.replace(l,""):s,[s,l]),P=i.useMemo(()=>L.string().trim().min(1,"Phone number is required").refine(e=>{const r=l+e.replace(/[^\d]+/g,"");return z(r,a.toUpperCase())},{message:`Invalid phone number for ${v.name}`}),[l,a]),F=e=>{C(e);const r=p(e.toUpperCase());if(o){const f=o.replace(/[^\d]+/g,""),y=k(f,e.toUpperCase());c(y||r+f)}else c(r)},N=e=>{const r=e.replace(/[^\d]+/g,""),f=k(r,a.toUpperCase());c(f||l+r)},b=t.jsxs("div",{className:"relative flex items-center justify-center border-r border-[#e6e6e6] h-full",style:{minWidth:"70px"},children:[t.jsx("select",{value:a,onChange:e=>F(e.target.value),className:"absolute inset-0 w-full h-full opacity-0 cursor-pointer z-30",style:{fontSize:0},children:h.map(e=>t.jsx("option",{value:e.code,children:e.code},e.code))}),t.jsx("div",{className:"flex items-center justify-center z-20 pointer-events-none",children:t.jsx("img",{src:v.flag,alt:v.name,className:"w-6 h-4 object-cover rounded-sm mr-3"})}),t.jsx("div",{className:"absolute right-2 top-0 bottom-0 flex items-center pointer-events-none z-20",children:t.jsx("svg",{className:"w-3 h-3 text-gray-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]});return t.jsx("div",{className:"w-full",children:t.jsx(u,{type:"tel",label:n,placeholder:g,value:o,onChange:e=>N(e.target.value),onFocus:()=>{m(!0)},onBlur:()=>{m(!1)},inputClass:`w-full ${d||o?"!pl-[110px]":"!pl-[80px]"}`,autoComplete:"shipping tel",schema:P,error:x,prefix:t.jsxs("div",{className:"flex items-center h-full",children:[b,(d||o)&&t.jsx("span",{className:"ml-2 text-base font-family-inherit",children:l})]})})})};M.__docgenInfo={description:"",methods:[],displayName:"PhoneInput",props:{value:{required:!0,tsType:{name:"string"},description:""},onChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(value: string) => void",signature:{arguments:[{type:{name:"string"},name:"value"}],return:{name:"void"}}},description:""},label:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},placeholder:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},error:{required:!1,tsType:{name:"string"},description:""}}};const I=({showTitle:s=!0})=>{const{customerInfo:c,updateCustomerInfo:n}=j(),{firstName:g,lastName:x,email:d,phone:m}=c;return t.jsxs("div",{className:"clickaroo-checkout-ui w-full",children:[s&&t.jsx("div",{className:"text-lg md:text-2xl mb-5 font-medium",children:"Customer Information"}),t.jsxs("div",{className:"border border-solid border-[#e6e6e6] shadow rounded-md p-4 bg-white",children:[t.jsxs("div",{className:"flex flex-col md:flex-row gap-3 mb-2",children:[t.jsx(u,{label:"First Name",placeholder:"First Name",value:g,onChange:a=>n({firstName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping given-name",schema:w.shape.firstName}),t.jsx(u,{label:"Last Name",placeholder:"Last Name",value:x,onChange:a=>n({lastName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping family-name",schema:w.shape.lastName})]}),t.jsx("div",{className:"mb-2",children:t.jsx(u,{label:"Email",placeholder:"Email",value:d,onChange:a=>n({email:a.target.value}),inputClass:"w-full",autoComplete:"shipping email",schema:w.shape.email})}),t.jsx(M,{value:m,onChange:a=>n({phone:a})})]})]})};I.__docgenInfo={description:"",methods:[],displayName:"CustomInfo",props:{showTitle:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}}}};export{I as C};

package/dist/storybook/storybook-static/assets/CustomerInfo-Cp0u57C5.js

@@ -1 +0,0 @@
-import{j as t}from"./jsx-runtime-DiklIkkE.js";import{F as u}from"./ValidateInput-sZgX3GCF.js";import{f as p,z as L,v as z,h as k,b as j,a as w}from"./useCheckoutContext-C6u4Rp5U.js";import{r as i}from"./index-DRjF_FHU.js";const S="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1280'%20height='640'%20viewBox='0%200%2010080%205040'%3e%3cdefs%3e%3cclipPath%20id='c1'%3e%3cpath%20d='M0,0H6V3H0z'/%3e%3c/clipPath%3e%3cclipPath%20id='c2'%3e%3cpath%20d='M0,0V1.5H6V3H6zM6,0H3V3H0V3z'/%3e%3c/clipPath%3e%3cpath%20id='Star7'%20d='M0,-360%2069.421398,-144.155019%20281.459334,-224.456329%20155.988466,-35.603349%20350.974048,80.107536%20125.093037,99.758368%20156.198146,324.348792%200,160%20-156.198146,324.348792%20-125.093037,99.758368%20-350.974048,80.107536%20-155.988466,-35.603349%20-281.459334,-224.456329%20-69.421398,-144.155019z'/%3e%3cpath%20id='Star5'%20d='M0,-210%2054.859957,-75.508253%20199.721868,-64.893569%2088.765275,28.841586%20123.434903,169.893569%200,93.333333%20-123.434903,169.893569%20-88.765275,28.841586%20-199.721868,-64.893569%20-54.859957,-75.508253z'/%3e%3c/defs%3e%3cg%20transform='scale(840)'%3e%3crect%20width='12'%20height='6'%20fill='%23012169'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23fff'%20stroke-width='0.6'%20clip-path='url(%23c1)'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23e4002b'%20stroke-width='0.4'%20clip-path='url(%23c2)'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23fff'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23e4002b'%20stroke-width='0.6'/%3e%3c/g%3e%3cg%20fill='%23fff'%3e%3cuse%20id='Comwlth'%20xlink:href='%23Star7'%20transform='translate(2520,%203780)%20scale(2.1)'/%3e%3cuse%20id='αCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='4200'/%3e%3cuse%20id='βCrucis'%20xlink:href='%23Star7'%20x='6300'%20y='2205'/%3e%3cuse%20id='γCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='840'/%3e%3cuse%20id='δCrucis'%20xlink:href='%23Star7'%20x='8680'%20y='1869'/%3e%3cuse%20id='εCrucis'%20xlink:href='%23Star5'%20x='8064'%20y='2730'/%3e%3c/g%3e%3c/svg%3e",_="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='600'%20viewBox='0%200%209600%204800'%3e%3ctitle%3eFlag%20of%20Canada%20(Pantone%20colours)%3c/title%3e%3cpath%20fill='%23d52b1e'%20d='m0%200h2400l99%2099h4602l99-99h2400v4800h-2400l-99-99h-4602l-99%2099H0z'/%3e%3cpath%20fill='%23fff'%20d='m2400%200h4800v4800h-4800zm2490%204430-45-863a95%2095%200%200%201%20111-98l859%20151-116-320a65%2065%200%200%201%2020-73l941-762-212-99a65%2065%200%200%201-34-79l186-572-542%20115a65%2065%200%200%201-73-38l-105-247-423%20454a65%2065%200%200%201-111-57l204-1052-327%20189a65%2065%200%200%201-91-27l-332-652-332%20652a65%2065%200%200%201-91%2027l-327-189%20204%201052a65%2065%200%200%201-111%2057l-423-454-105%20247a65%2065%200%200%201-73%2038l-542-115%20186%20572a65%2065%200%200%201-34%2079l-212%2099%20941%20762a65%2065%200%200%201%2020%2073l-116%20320%20859-151a95%2095%200%200%201%20111%2098l-45%20863z'/%3e%3c/svg%3e",H="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2030'%20width='1200'%20height='600'%3e%3cclipPath%20id='s'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='t'%3e%3cpath%20d='M30,15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z'/%3e%3c/clipPath%3e%3cg%20clip-path='url(%23s)'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'%20fill='%23012169'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20stroke='%23fff'%20stroke-width='6'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20clip-path='url(%23t)'%20stroke='%23C8102E'%20stroke-width='4'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23fff'%20stroke-width='10'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23C8102E'%20stroke-width='6'/%3e%3c/g%3e%3c/svg%3e",E="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20height='600'%20width='1200'%3e%3cdefs%3e%3cclipPath%20id='Canton'%3e%3cpath%20d='M%200,0%20L%20600,0%20L%20600,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='Diagonals'%3e%3cpath%20d='M%200,0%20L%20300,150%20L%200,150%20z%20M%20300,0%20L%20600,0%20L%20300,150%20z%20M%20300,150%20L%20600,150%20L%20600,300%20z%20M%20300,150%20L%20300,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cg%20id='Pentagram'%3e%3cg%20id='Arm'%20transform='translate(0,-0.324925)'%3e%3cpath%20d='M%200,0%20L%200,0.5%20L%201,0%20z'/%3e%3cpath%20d='M%200,0%20L%200,-0.5%20L%201,0%20z'%20transform='rotate(-36,1,0)'/%3e%3c/g%3e%3cuse%20xlink:href='%23Arm'%20transform='scale(-1,1)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)%20scale(-1,1)'/%3e%3c/g%3e%3c/defs%3e%3crect%20fill='%23012169'%20x='0'%20y='0'%20width='1200'%20height='600'/%3e%3cg%20id='Flag_of_the_United_Kingdom'%3e%3cpath%20id='Saint_Andrews_Cross'%20stroke='%23FFF'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3cpath%20id='Saint_Patricks_Cross'%20stroke='%23C8102E'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='40'%20clip-path='url(%23Diagonals)'/%3e%3cg%20id='Saint_Georges_Cross'%3e%3cpath%20stroke='%23FFF'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='100'%20clip-path='url(%23Canton)'/%3e%3cpath%20stroke='%23C8102E'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Southern_Cross'%3e%3cg%20id='Gamma_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20scale(30)'/%3e%3c/g%3e%3cg%20transform='rotate(82,900,240)'%3e%3cg%20id='Delta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20rotate(-82)%20scale(40.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20rotate(-82)%20scale(25)'/%3e%3c/g%3e%3cg%20id='Beta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,380)%20rotate(-82)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,380)%20rotate(-82)%20scale(30)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Alpha_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,480)%20scale(50.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,480)%20scale(35)'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e",U="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1235'%20height='650'%20viewBox='0%200%207410%203900'%3e%3cpath%20d='M0,0h7410v3900H0'%20fill='%23b31942'/%3e%3cpath%20d='M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0'%20stroke='%23FFF'%20stroke-width='300'/%3e%3cpath%20d='M0,0h2964v2100H0'%20fill='%230a3161'/%3e%3cg%20fill='%23FFF'%3e%3cg%20id='s18'%3e%3cg%20id='s9'%3e%3cg%20id='s5'%3e%3cg%20id='s4'%3e%3cpath%20id='s'%20d='M247,90%20317.534230,307.082039%20132.873218,172.917961H361.126782L176.465770,307.082039z'/%3e%3cuse%20xlink:href='%23s'%20y='420'/%3e%3cuse%20xlink:href='%23s'%20y='840'/%3e%3cuse%20xlink:href='%23s'%20y='1260'/%3e%3c/g%3e%3cuse%20xlink:href='%23s'%20y='1680'/%3e%3c/g%3e%3cuse%20xlink:href='%23s4'%20x='247'%20y='210'/%3e%3c/g%3e%3cuse%20xlink:href='%23s9'%20x='494'/%3e%3c/g%3e%3cuse%20xlink:href='%23s18'%20x='988'/%3e%3cuse%20xlink:href='%23s9'%20x='1976'/%3e%3cuse%20xlink:href='%23s5'%20x='2470'/%3e%3c/g%3e%3c/svg%3e",h=[{code:"US",flag:U,dialCode:"+1",name:"United States"},{code:"CA",flag:_,dialCode:"+1",name:"Canada"},{code:"AU",flag:S,dialCode:"+61",name:"Australia"},{code:"NZ",flag:E,dialCode:"+64",name:"New Zealand"},{code:"GB",flag:H,dialCode:"+44",name:"United Kingdom"}],M=({value:s,onChange:c,label:n="Phone Number",placeholder:g="Phone Number",error:x})=>{const[d,m]=i.useState(!1),[a,C]=i.useState(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r))return e.code}return"US"}),l=i.useMemo(()=>p(a.toUpperCase()),[a]);i.useEffect(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r)){a!==e.code&&C(e.code);return}}},[s,a]);const v=i.useMemo(()=>h.find(e=>e.code===a)||h[0],[a]),o=i.useMemo(()=>s.startsWith(l)?s.replace(l,""):s,[s,l]),P=i.useMemo(()=>L.string().trim().min(1,"Phone number is required").refine(e=>{const r=l+e.replace(/[^\d]+/g,"");return z(r,a.toUpperCase())},{message:`Invalid phone number for ${v.name}`}),[l,a]),F=e=>{C(e);const r=p(e.toUpperCase());if(o){const f=o.replace(/[^\d]+/g,""),y=k(f,e.toUpperCase());c(y||r+f)}else c(r)},N=e=>{const r=e.replace(/[^\d]+/g,""),f=k(r,a.toUpperCase());c(f||l+r)},b=t.jsxs("div",{className:"relative flex items-center justify-center border-r border-[#e6e6e6] h-full",style:{minWidth:"70px"},children:[t.jsx("select",{value:a,onChange:e=>F(e.target.value),className:"absolute inset-0 w-full h-full opacity-0 cursor-pointer z-30",style:{fontSize:0},children:h.map(e=>t.jsx("option",{value:e.code,children:e.code},e.code))}),t.jsx("div",{className:"flex items-center justify-center z-20 pointer-events-none",children:t.jsx("img",{src:v.flag,alt:v.name,className:"w-6 h-4 object-cover rounded-sm mr-3"})}),t.jsx("div",{className:"absolute right-2 top-0 bottom-0 flex items-center pointer-events-none z-20",children:t.jsx("svg",{className:"w-3 h-3 text-gray-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]});return t.jsx("div",{className:"w-full",children:t.jsx(u,{type:"tel",label:n,placeholder:g,value:o,onChange:e=>N(e.target.value),onFocus:()=>{m(!0)},onBlur:()=>{m(!1)},inputClass:`w-full ${d||o?"!pl-[110px]":"!pl-[80px]"}`,autoComplete:"shipping tel",schema:P,error:x,prefix:t.jsxs("div",{className:"flex items-center h-full",children:[b,(d||o)&&t.jsx("span",{className:"ml-2 text-base font-family-inherit",children:l})]})})})};M.__docgenInfo={description:"",methods:[],displayName:"PhoneInput",props:{value:{required:!0,tsType:{name:"string"},description:""},onChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(value: string) => void",signature:{arguments:[{type:{name:"string"},name:"value"}],return:{name:"void"}}},description:""},label:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},placeholder:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},error:{required:!1,tsType:{name:"string"},description:""}}};const I=({showTitle:s=!0})=>{const{customerInfo:c,updateCustomerInfo:n}=j(),{firstName:g,lastName:x,email:d,phone:m}=c;return t.jsxs("div",{className:"clickaroo-checkout-ui w-full",children:[s&&t.jsx("div",{className:"text-lg md:text-2xl mb-5 font-medium",children:"Customer Information"}),t.jsxs("div",{className:"border border-solid border-[#e6e6e6] shadow rounded-md p-4 bg-white",children:[t.jsxs("div",{className:"flex flex-col md:flex-row gap-3 mb-2",children:[t.jsx(u,{label:"First Name",placeholder:"First Name",value:g,onChange:a=>n({firstName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping given-name",schema:w.shape.firstName}),t.jsx(u,{label:"Last Name",placeholder:"Last Name",value:x,onChange:a=>n({lastName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping family-name",schema:w.shape.lastName})]}),t.jsx("div",{className:"mb-2",children:t.jsx(u,{label:"Email",placeholder:"Email",value:d,onChange:a=>n({email:a.target.value}),inputClass:"w-full",autoComplete:"shipping email",schema:w.shape.email})}),t.jsx(M,{value:m,onChange:a=>n({phone:a})})]})]})};I.__docgenInfo={description:"",methods:[],displayName:"CustomInfo",props:{showTitle:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}}}};export{I as C};

package/dist/storybook/storybook-static/assets/CustomerInfo-D3WHpN32.js

@@ -1 +0,0 @@
-import{j as t}from"./jsx-runtime-DiklIkkE.js";import{F as u}from"./ValidateInput-DcnOO9py.js";import{f as p,z as L,v as z,h as k,b as j,a as w}from"./useCheckoutContext-DuJ1Ep0-.js";import{r as i}from"./index-DRjF_FHU.js";const S="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1280'%20height='640'%20viewBox='0%200%2010080%205040'%3e%3cdefs%3e%3cclipPath%20id='c1'%3e%3cpath%20d='M0,0H6V3H0z'/%3e%3c/clipPath%3e%3cclipPath%20id='c2'%3e%3cpath%20d='M0,0V1.5H6V3H6zM6,0H3V3H0V3z'/%3e%3c/clipPath%3e%3cpath%20id='Star7'%20d='M0,-360%2069.421398,-144.155019%20281.459334,-224.456329%20155.988466,-35.603349%20350.974048,80.107536%20125.093037,99.758368%20156.198146,324.348792%200,160%20-156.198146,324.348792%20-125.093037,99.758368%20-350.974048,80.107536%20-155.988466,-35.603349%20-281.459334,-224.456329%20-69.421398,-144.155019z'/%3e%3cpath%20id='Star5'%20d='M0,-210%2054.859957,-75.508253%20199.721868,-64.893569%2088.765275,28.841586%20123.434903,169.893569%200,93.333333%20-123.434903,169.893569%20-88.765275,28.841586%20-199.721868,-64.893569%20-54.859957,-75.508253z'/%3e%3c/defs%3e%3cg%20transform='scale(840)'%3e%3crect%20width='12'%20height='6'%20fill='%23012169'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23fff'%20stroke-width='0.6'%20clip-path='url(%23c1)'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23e4002b'%20stroke-width='0.4'%20clip-path='url(%23c2)'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23fff'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23e4002b'%20stroke-width='0.6'/%3e%3c/g%3e%3cg%20fill='%23fff'%3e%3cuse%20id='Comwlth'%20xlink:href='%23Star7'%20transform='translate(2520,%203780)%20scale(2.1)'/%3e%3cuse%20id='αCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='4200'/%3e%3cuse%20id='βCrucis'%20xlink:href='%23Star7'%20x='6300'%20y='2205'/%3e%3cuse%20id='γCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='840'/%3e%3cuse%20id='δCrucis'%20xlink:href='%23Star7'%20x='8680'%20y='1869'/%3e%3cuse%20id='εCrucis'%20xlink:href='%23Star5'%20x='8064'%20y='2730'/%3e%3c/g%3e%3c/svg%3e",_="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='600'%20viewBox='0%200%209600%204800'%3e%3ctitle%3eFlag%20of%20Canada%20(Pantone%20colours)%3c/title%3e%3cpath%20fill='%23d52b1e'%20d='m0%200h2400l99%2099h4602l99-99h2400v4800h-2400l-99-99h-4602l-99%2099H0z'/%3e%3cpath%20fill='%23fff'%20d='m2400%200h4800v4800h-4800zm2490%204430-45-863a95%2095%200%200%201%20111-98l859%20151-116-320a65%2065%200%200%201%2020-73l941-762-212-99a65%2065%200%200%201-34-79l186-572-542%20115a65%2065%200%200%201-73-38l-105-247-423%20454a65%2065%200%200%201-111-57l204-1052-327%20189a65%2065%200%200%201-91-27l-332-652-332%20652a65%2065%200%200%201-91%2027l-327-189%20204%201052a65%2065%200%200%201-111%2057l-423-454-105%20247a65%2065%200%200%201-73%2038l-542-115%20186%20572a65%2065%200%200%201-34%2079l-212%2099%20941%20762a65%2065%200%200%201%2020%2073l-116%20320%20859-151a95%2095%200%200%201%20111%2098l-45%20863z'/%3e%3c/svg%3e",H="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2030'%20width='1200'%20height='600'%3e%3cclipPath%20id='s'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='t'%3e%3cpath%20d='M30,15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z'/%3e%3c/clipPath%3e%3cg%20clip-path='url(%23s)'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'%20fill='%23012169'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20stroke='%23fff'%20stroke-width='6'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20clip-path='url(%23t)'%20stroke='%23C8102E'%20stroke-width='4'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23fff'%20stroke-width='10'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23C8102E'%20stroke-width='6'/%3e%3c/g%3e%3c/svg%3e",E="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20height='600'%20width='1200'%3e%3cdefs%3e%3cclipPath%20id='Canton'%3e%3cpath%20d='M%200,0%20L%20600,0%20L%20600,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='Diagonals'%3e%3cpath%20d='M%200,0%20L%20300,150%20L%200,150%20z%20M%20300,0%20L%20600,0%20L%20300,150%20z%20M%20300,150%20L%20600,150%20L%20600,300%20z%20M%20300,150%20L%20300,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cg%20id='Pentagram'%3e%3cg%20id='Arm'%20transform='translate(0,-0.324925)'%3e%3cpath%20d='M%200,0%20L%200,0.5%20L%201,0%20z'/%3e%3cpath%20d='M%200,0%20L%200,-0.5%20L%201,0%20z'%20transform='rotate(-36,1,0)'/%3e%3c/g%3e%3cuse%20xlink:href='%23Arm'%20transform='scale(-1,1)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)%20scale(-1,1)'/%3e%3c/g%3e%3c/defs%3e%3crect%20fill='%23012169'%20x='0'%20y='0'%20width='1200'%20height='600'/%3e%3cg%20id='Flag_of_the_United_Kingdom'%3e%3cpath%20id='Saint_Andrews_Cross'%20stroke='%23FFF'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3cpath%20id='Saint_Patricks_Cross'%20stroke='%23C8102E'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='40'%20clip-path='url(%23Diagonals)'/%3e%3cg%20id='Saint_Georges_Cross'%3e%3cpath%20stroke='%23FFF'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='100'%20clip-path='url(%23Canton)'/%3e%3cpath%20stroke='%23C8102E'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Southern_Cross'%3e%3cg%20id='Gamma_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20scale(30)'/%3e%3c/g%3e%3cg%20transform='rotate(82,900,240)'%3e%3cg%20id='Delta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20rotate(-82)%20scale(40.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20rotate(-82)%20scale(25)'/%3e%3c/g%3e%3cg%20id='Beta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,380)%20rotate(-82)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,380)%20rotate(-82)%20scale(30)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Alpha_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,480)%20scale(50.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,480)%20scale(35)'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e",U="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1235'%20height='650'%20viewBox='0%200%207410%203900'%3e%3cpath%20d='M0,0h7410v3900H0'%20fill='%23b31942'/%3e%3cpath%20d='M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0'%20stroke='%23FFF'%20stroke-width='300'/%3e%3cpath%20d='M0,0h2964v2100H0'%20fill='%230a3161'/%3e%3cg%20fill='%23FFF'%3e%3cg%20id='s18'%3e%3cg%20id='s9'%3e%3cg%20id='s5'%3e%3cg%20id='s4'%3e%3cpath%20id='s'%20d='M247,90%20317.534230,307.082039%20132.873218,172.917961H361.126782L176.465770,307.082039z'/%3e%3cuse%20xlink:href='%23s'%20y='420'/%3e%3cuse%20xlink:href='%23s'%20y='840'/%3e%3cuse%20xlink:href='%23s'%20y='1260'/%3e%3c/g%3e%3cuse%20xlink:href='%23s'%20y='1680'/%3e%3c/g%3e%3cuse%20xlink:href='%23s4'%20x='247'%20y='210'/%3e%3c/g%3e%3cuse%20xlink:href='%23s9'%20x='494'/%3e%3c/g%3e%3cuse%20xlink:href='%23s18'%20x='988'/%3e%3cuse%20xlink:href='%23s9'%20x='1976'/%3e%3cuse%20xlink:href='%23s5'%20x='2470'/%3e%3c/g%3e%3c/svg%3e",h=[{code:"US",flag:U,dialCode:"+1",name:"United States"},{code:"CA",flag:_,dialCode:"+1",name:"Canada"},{code:"AU",flag:S,dialCode:"+61",name:"Australia"},{code:"NZ",flag:E,dialCode:"+64",name:"New Zealand"},{code:"GB",flag:H,dialCode:"+44",name:"United Kingdom"}],M=({value:s,onChange:c,label:n="Phone Number",placeholder:g="Phone Number",error:x})=>{const[d,m]=i.useState(!1),[a,C]=i.useState(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r))return e.code}return"US"}),l=i.useMemo(()=>p(a.toUpperCase()),[a]);i.useEffect(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r)){a!==e.code&&C(e.code);return}}},[s,a]);const v=i.useMemo(()=>h.find(e=>e.code===a)||h[0],[a]),o=i.useMemo(()=>s.startsWith(l)?s.replace(l,""):s,[s,l]),P=i.useMemo(()=>L.string().trim().min(1,"Phone number is required").refine(e=>{const r=l+e.replace(/[^\d]+/g,"");return z(r,a.toUpperCase())},{message:`Invalid phone number for ${v.name}`}),[l,a]),F=e=>{C(e);const r=p(e.toUpperCase());if(o){const f=o.replace(/[^\d]+/g,""),y=k(f,e.toUpperCase());c(y||r+f)}else c(r)},N=e=>{const r=e.replace(/[^\d]+/g,""),f=k(r,a.toUpperCase());c(f||l+r)},b=t.jsxs("div",{className:"relative flex items-center justify-center border-r border-[#e6e6e6] h-full",style:{minWidth:"70px"},children:[t.jsx("select",{value:a,onChange:e=>F(e.target.value),className:"absolute inset-0 w-full h-full opacity-0 cursor-pointer z-30",style:{fontSize:0},children:h.map(e=>t.jsx("option",{value:e.code,children:e.code},e.code))}),t.jsx("div",{className:"flex items-center justify-center z-20 pointer-events-none",children:t.jsx("img",{src:v.flag,alt:v.name,className:"w-6 h-4 object-cover rounded-sm mr-3"})}),t.jsx("div",{className:"absolute right-2 top-0 bottom-0 flex items-center pointer-events-none z-20",children:t.jsx("svg",{className:"w-3 h-3 text-gray-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]});return t.jsx("div",{className:"w-full",children:t.jsx(u,{type:"tel",label:n,placeholder:g,value:o,onChange:e=>N(e.target.value),onFocus:()=>{m(!0)},onBlur:()=>{m(!1)},inputClass:`w-full ${d||o?"!pl-[110px]":"!pl-[80px]"}`,autoComplete:"shipping tel",schema:P,error:x,prefix:t.jsxs("div",{className:"flex items-center h-full",children:[b,(d||o)&&t.jsx("span",{className:"ml-2 text-base font-family-inherit",children:l})]})})})};M.__docgenInfo={description:"",methods:[],displayName:"PhoneInput",props:{value:{required:!0,tsType:{name:"string"},description:""},onChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(value: string) => void",signature:{arguments:[{type:{name:"string"},name:"value"}],return:{name:"void"}}},description:""},label:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},placeholder:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},error:{required:!1,tsType:{name:"string"},description:""}}};const I=({showTitle:s=!0})=>{const{customerInfo:c,updateCustomerInfo:n}=j(),{firstName:g,lastName:x,email:d,phone:m}=c;return t.jsxs("div",{className:"clickaroo-checkout-ui w-full",children:[s&&t.jsx("div",{className:"text-lg md:text-2xl mb-5 font-medium",children:"Customer Information"}),t.jsxs("div",{className:"border border-solid border-[#e6e6e6] shadow rounded-md p-4 bg-white",children:[t.jsxs("div",{className:"flex flex-col md:flex-row gap-3 mb-2",children:[t.jsx(u,{label:"First Name",placeholder:"First Name",value:g,onChange:a=>n({firstName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping given-name",schema:w.shape.firstName}),t.jsx(u,{label:"Last Name",placeholder:"Last Name",value:x,onChange:a=>n({lastName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping family-name",schema:w.shape.lastName})]}),t.jsx("div",{className:"mb-2",children:t.jsx(u,{label:"Email",placeholder:"Email",value:d,onChange:a=>n({email:a.target.value}),inputClass:"w-full",autoComplete:"shipping email",schema:w.shape.email})}),t.jsx(M,{value:m,onChange:a=>n({phone:a})})]})]})};I.__docgenInfo={description:"",methods:[],displayName:"CustomInfo",props:{showTitle:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}}}};export{I as C};

package/dist/storybook/storybook-static/assets/CustomerInfo-DShSrjMR.js

@@ -1 +0,0 @@
-import{j as t}from"./jsx-runtime-DiklIkkE.js";import{F as u}from"./ValidateInput-CECRKp4c.js";import{f as p,z as L,v as z,h as k,b as j,a as w}from"./useCheckoutContext-BW2h13W8.js";import{r as i}from"./index-DRjF_FHU.js";const S="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1280'%20height='640'%20viewBox='0%200%2010080%205040'%3e%3cdefs%3e%3cclipPath%20id='c1'%3e%3cpath%20d='M0,0H6V3H0z'/%3e%3c/clipPath%3e%3cclipPath%20id='c2'%3e%3cpath%20d='M0,0V1.5H6V3H6zM6,0H3V3H0V3z'/%3e%3c/clipPath%3e%3cpath%20id='Star7'%20d='M0,-360%2069.421398,-144.155019%20281.459334,-224.456329%20155.988466,-35.603349%20350.974048,80.107536%20125.093037,99.758368%20156.198146,324.348792%200,160%20-156.198146,324.348792%20-125.093037,99.758368%20-350.974048,80.107536%20-155.988466,-35.603349%20-281.459334,-224.456329%20-69.421398,-144.155019z'/%3e%3cpath%20id='Star5'%20d='M0,-210%2054.859957,-75.508253%20199.721868,-64.893569%2088.765275,28.841586%20123.434903,169.893569%200,93.333333%20-123.434903,169.893569%20-88.765275,28.841586%20-199.721868,-64.893569%20-54.859957,-75.508253z'/%3e%3c/defs%3e%3cg%20transform='scale(840)'%3e%3crect%20width='12'%20height='6'%20fill='%23012169'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23fff'%20stroke-width='0.6'%20clip-path='url(%23c1)'/%3e%3cpath%20d='M0,0%206,3M6,0%200,3'%20stroke='%23e4002b'%20stroke-width='0.4'%20clip-path='url(%23c2)'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23fff'/%3e%3cpath%20d='M3,0V3M0,1.5H6'%20stroke='%23e4002b'%20stroke-width='0.6'/%3e%3c/g%3e%3cg%20fill='%23fff'%3e%3cuse%20id='Comwlth'%20xlink:href='%23Star7'%20transform='translate(2520,%203780)%20scale(2.1)'/%3e%3cuse%20id='αCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='4200'/%3e%3cuse%20id='βCrucis'%20xlink:href='%23Star7'%20x='6300'%20y='2205'/%3e%3cuse%20id='γCrucis'%20xlink:href='%23Star7'%20x='7560'%20y='840'/%3e%3cuse%20id='δCrucis'%20xlink:href='%23Star7'%20x='8680'%20y='1869'/%3e%3cuse%20id='εCrucis'%20xlink:href='%23Star5'%20x='8064'%20y='2730'/%3e%3c/g%3e%3c/svg%3e",_="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='600'%20viewBox='0%200%209600%204800'%3e%3ctitle%3eFlag%20of%20Canada%20(Pantone%20colours)%3c/title%3e%3cpath%20fill='%23d52b1e'%20d='m0%200h2400l99%2099h4602l99-99h2400v4800h-2400l-99-99h-4602l-99%2099H0z'/%3e%3cpath%20fill='%23fff'%20d='m2400%200h4800v4800h-4800zm2490%204430-45-863a95%2095%200%200%201%20111-98l859%20151-116-320a65%2065%200%200%201%2020-73l941-762-212-99a65%2065%200%200%201-34-79l186-572-542%20115a65%2065%200%200%201-73-38l-105-247-423%20454a65%2065%200%200%201-111-57l204-1052-327%20189a65%2065%200%200%201-91-27l-332-652-332%20652a65%2065%200%200%201-91%2027l-327-189%20204%201052a65%2065%200%200%201-111%2057l-423-454-105%20247a65%2065%200%200%201-73%2038l-542-115%20186%20572a65%2065%200%200%201-34%2079l-212%2099%20941%20762a65%2065%200%200%201%2020%2073l-116%20320%20859-151a95%2095%200%200%201%20111%2098l-45%20863z'/%3e%3c/svg%3e",H="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2030'%20width='1200'%20height='600'%3e%3cclipPath%20id='s'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='t'%3e%3cpath%20d='M30,15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z'/%3e%3c/clipPath%3e%3cg%20clip-path='url(%23s)'%3e%3cpath%20d='M0,0%20v30%20h60%20v-30%20z'%20fill='%23012169'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20stroke='%23fff'%20stroke-width='6'/%3e%3cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20clip-path='url(%23t)'%20stroke='%23C8102E'%20stroke-width='4'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23fff'%20stroke-width='10'/%3e%3cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23C8102E'%20stroke-width='6'/%3e%3c/g%3e%3c/svg%3e",E="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20height='600'%20width='1200'%3e%3cdefs%3e%3cclipPath%20id='Canton'%3e%3cpath%20d='M%200,0%20L%20600,0%20L%20600,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cclipPath%20id='Diagonals'%3e%3cpath%20d='M%200,0%20L%20300,150%20L%200,150%20z%20M%20300,0%20L%20600,0%20L%20300,150%20z%20M%20300,150%20L%20600,150%20L%20600,300%20z%20M%20300,150%20L%20300,300%20L%200,300%20z'/%3e%3c/clipPath%3e%3cg%20id='Pentagram'%3e%3cg%20id='Arm'%20transform='translate(0,-0.324925)'%3e%3cpath%20d='M%200,0%20L%200,0.5%20L%201,0%20z'/%3e%3cpath%20d='M%200,0%20L%200,-0.5%20L%201,0%20z'%20transform='rotate(-36,1,0)'/%3e%3c/g%3e%3cuse%20xlink:href='%23Arm'%20transform='scale(-1,1)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)'/%3e%3cuse%20xlink:href='%23Arm'%20transform='rotate(-72,0,0)%20scale(-1,1)'/%3e%3c/g%3e%3c/defs%3e%3crect%20fill='%23012169'%20x='0'%20y='0'%20width='1200'%20height='600'/%3e%3cg%20id='Flag_of_the_United_Kingdom'%3e%3cpath%20id='Saint_Andrews_Cross'%20stroke='%23FFF'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3cpath%20id='Saint_Patricks_Cross'%20stroke='%23C8102E'%20d='M%200,0%20L%20600,300%20M%200,300%20L%20600,0'%20stroke-width='40'%20clip-path='url(%23Diagonals)'/%3e%3cg%20id='Saint_Georges_Cross'%3e%3cpath%20stroke='%23FFF'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='100'%20clip-path='url(%23Canton)'/%3e%3cpath%20stroke='%23C8102E'%20d='M%20300,0%20L%20300,300%20M%200,150%20L%20600,150'%20stroke-width='60'%20clip-path='url(%23Canton)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Southern_Cross'%3e%3cg%20id='Gamma_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20scale(30)'/%3e%3c/g%3e%3cg%20transform='rotate(82,900,240)'%3e%3cg%20id='Delta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,120)%20rotate(-82)%20scale(40.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,120)%20rotate(-82)%20scale(25)'/%3e%3c/g%3e%3cg%20id='Beta_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,380)%20rotate(-82)%20scale(45.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,380)%20rotate(-82)%20scale(30)'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Alpha_Crucis'%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23FFF'%20transform='translate(900,480)%20scale(50.4)'/%3e%3cuse%20xlink:href='%23Pentagram'%20fill='%23C8102E'%20transform='translate(900,480)%20scale(35)'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e",U="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1235'%20height='650'%20viewBox='0%200%207410%203900'%3e%3cpath%20d='M0,0h7410v3900H0'%20fill='%23b31942'/%3e%3cpath%20d='M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0'%20stroke='%23FFF'%20stroke-width='300'/%3e%3cpath%20d='M0,0h2964v2100H0'%20fill='%230a3161'/%3e%3cg%20fill='%23FFF'%3e%3cg%20id='s18'%3e%3cg%20id='s9'%3e%3cg%20id='s5'%3e%3cg%20id='s4'%3e%3cpath%20id='s'%20d='M247,90%20317.534230,307.082039%20132.873218,172.917961H361.126782L176.465770,307.082039z'/%3e%3cuse%20xlink:href='%23s'%20y='420'/%3e%3cuse%20xlink:href='%23s'%20y='840'/%3e%3cuse%20xlink:href='%23s'%20y='1260'/%3e%3c/g%3e%3cuse%20xlink:href='%23s'%20y='1680'/%3e%3c/g%3e%3cuse%20xlink:href='%23s4'%20x='247'%20y='210'/%3e%3c/g%3e%3cuse%20xlink:href='%23s9'%20x='494'/%3e%3c/g%3e%3cuse%20xlink:href='%23s18'%20x='988'/%3e%3cuse%20xlink:href='%23s9'%20x='1976'/%3e%3cuse%20xlink:href='%23s5'%20x='2470'/%3e%3c/g%3e%3c/svg%3e",h=[{code:"US",flag:U,dialCode:"+1",name:"United States"},{code:"CA",flag:_,dialCode:"+1",name:"Canada"},{code:"AU",flag:S,dialCode:"+61",name:"Australia"},{code:"NZ",flag:E,dialCode:"+64",name:"New Zealand"},{code:"GB",flag:H,dialCode:"+44",name:"United Kingdom"}],M=({value:s,onChange:c,label:n="Phone Number",placeholder:g="Phone Number",error:x})=>{const[d,m]=i.useState(!1),[a,C]=i.useState(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r))return e.code}return"US"}),l=i.useMemo(()=>p(a.toUpperCase()),[a]);i.useEffect(()=>{if(s)for(const e of h){const r=p(e.code.toUpperCase());if(s.startsWith(r)){a!==e.code&&C(e.code);return}}},[s,a]);const v=i.useMemo(()=>h.find(e=>e.code===a)||h[0],[a]),o=i.useMemo(()=>s.startsWith(l)?s.replace(l,""):s,[s,l]),P=i.useMemo(()=>L.string().trim().min(1,"Phone number is required").refine(e=>{const r=l+e.replace(/[^\d]+/g,"");return z(r,a.toUpperCase())},{message:`Invalid phone number for ${v.name}`}),[l,a]),F=e=>{C(e);const r=p(e.toUpperCase());if(o){const f=o.replace(/[^\d]+/g,""),y=k(f,e.toUpperCase());c(y||r+f)}else c(r)},N=e=>{const r=e.replace(/[^\d]+/g,""),f=k(r,a.toUpperCase());c(f||l+r)},b=t.jsxs("div",{className:"relative flex items-center justify-center border-r border-[#e6e6e6] h-full",style:{minWidth:"70px"},children:[t.jsx("select",{value:a,onChange:e=>F(e.target.value),className:"absolute inset-0 w-full h-full opacity-0 cursor-pointer z-30",style:{fontSize:0},children:h.map(e=>t.jsx("option",{value:e.code,children:e.code},e.code))}),t.jsx("div",{className:"flex items-center justify-center z-20 pointer-events-none",children:t.jsx("img",{src:v.flag,alt:v.name,className:"w-6 h-4 object-cover rounded-sm mr-3"})}),t.jsx("div",{className:"absolute right-2 top-0 bottom-0 flex items-center pointer-events-none z-20",children:t.jsx("svg",{className:"w-3 h-3 text-gray-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]});return t.jsx("div",{className:"w-full",children:t.jsx(u,{type:"tel",label:n,placeholder:g,value:o,onChange:e=>N(e.target.value),onFocus:()=>{m(!0)},onBlur:()=>{m(!1)},inputClass:`w-full ${d||o?"!pl-[110px]":"!pl-[80px]"}`,autoComplete:"shipping tel",schema:P,error:x,prefix:t.jsxs("div",{className:"flex items-center h-full",children:[b,(d||o)&&t.jsx("span",{className:"ml-2 text-base font-family-inherit",children:l})]})})})};M.__docgenInfo={description:"",methods:[],displayName:"PhoneInput",props:{value:{required:!0,tsType:{name:"string"},description:""},onChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(value: string) => void",signature:{arguments:[{type:{name:"string"},name:"value"}],return:{name:"void"}}},description:""},label:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},placeholder:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Phone Number"',computed:!1}},error:{required:!1,tsType:{name:"string"},description:""}}};const I=({showTitle:s=!0})=>{const{customerInfo:c,updateCustomerInfo:n}=j(),{firstName:g,lastName:x,email:d,phone:m}=c;return t.jsxs("div",{className:"clickaroo-checkout-ui w-full",children:[s&&t.jsx("div",{className:"text-lg md:text-2xl mb-5 font-medium",children:"Customer Information"}),t.jsxs("div",{className:"border border-solid border-[#e6e6e6] shadow rounded-md p-4 bg-white",children:[t.jsxs("div",{className:"flex flex-col md:flex-row gap-3 mb-2",children:[t.jsx(u,{label:"First Name",placeholder:"First Name",value:g,onChange:a=>n({firstName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping given-name",schema:w.shape.firstName}),t.jsx(u,{label:"Last Name",placeholder:"Last Name",value:x,onChange:a=>n({lastName:a.target.value}),inputClass:"flex-1",autoComplete:"shipping family-name",schema:w.shape.lastName})]}),t.jsx("div",{className:"mb-2",children:t.jsx(u,{label:"Email",placeholder:"Email",value:d,onChange:a=>n({email:a.target.value}),inputClass:"w-full",autoComplete:"shipping email",schema:w.shape.email})}),t.jsx(M,{value:m,onChange:a=>n({phone:a})})]})]})};I.__docgenInfo={description:"",methods:[],displayName:"CustomInfo",props:{showTitle:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}}}};export{I as C};