@clickaroo/checkout-ui 0.0.13-beta → 0.1.1-beta

package/dist/storybook/storybook-static/assets/CustomCheckout.en-adeOUUPd.js

@@ -0,0 +1,211 @@
+import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as s}from"./index-ChEI-nsM.js";import{M as r,C as i}from"./index-Cx4362C8.js";import{C as d,D as c}from"./CustomCheckout.stories-OyfGgjnr.js";import"./index-DRjF_FHU.js";import"./iframe-BZKEX9PA.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./useCheckoutContext-w0N5TNgR.js";/* empty css              */import"./CheckoutPage-C21Znq4d.js";import"./CustomerInfo-CYLNdAoo.js";import"./ValidateInput-C71ymd_w.js";import"./DeliveryAddress-BBT_-q56.js";import"./PaymentMethods-B1IKDQ7d.js";function o(t){const n={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...s(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{of:d,title:"Components/CustomCheckout",name:"CustomCheckout (English)"}),`
+`,e.jsx(n.h1,{id:"customcheckout",children:"CustomCheckout"}),`
+`,e.jsxs(n.p,{children:["While the ",e.jsx(n.code,{children:"CheckoutPage"})," component provides a complete, ready-to-use checkout solution, you may need more control over the layout, styling, or user experience. This guide explains how to build a completely custom checkout flow by using the library's hooks and context, while still leveraging the core functionality."]}),`
+`,e.jsxs(n.p,{children:["The example above demonstrates a fully customized checkout page with custom styling, where we use the library's ",e.jsx(n.code,{children:"PaymentMethods"})," component (which is required) and build custom components for customer information, delivery address, and the submit button."]}),`
+`,e.jsx(i,{of:c}),`
+`,e.jsx(n.h3,{id:"overview",children:"Overview"}),`
+`,e.jsx(n.p,{children:"When building a custom checkout flow, you'll need to:"}),`
+`,e.jsxs(n.ol,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Wrap your components"})," in ",e.jsx(n.code,{children:"CheckoutProvider"})," to access the checkout context"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Use hooks"})," (",e.jsx(n.code,{children:"useCheckoutContext"}),", ",e.jsx(n.code,{children:"useOrderSubmission"}),") to access and update form data"]}),`
+`,e.jsxs(n.li,{children:[e.jsxs(n.strong,{children:["Use the ",e.jsx(n.code,{children:"PaymentMethods"})," component"]})," from the library (required - cannot be customized)"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Update form data"})," through ",e.jsx(n.code,{children:"updateCustomerInfo"})," and ",e.jsx(n.code,{children:"updateDeliveryAddress"})," methods"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Submit orders"})," using the ",e.jsx(n.code,{children:"useOrderSubmission"})," hook"]}),`
+`]}),`
+`,e.jsx(n.h3,{id:"understanding-form-data-structure",children:"Understanding Form Data Structure"}),`
+`,e.jsxs(n.p,{children:["When customizing components, you need to ensure all required fields are updated correctly. The library uses two main data structures: ",e.jsx(n.code,{children:"CustomerInfo"})," and ",e.jsx(n.code,{children:"DeliveryAddress"}),". Understanding these structures is crucial for building custom components that work seamlessly with the checkout flow."]}),`
+`,e.jsx(n.h4,{id:"customerinfo-fields",children:"CustomerInfo Fields"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface CustomerInfo {
+  firstName: string;  // First name (required)
+  lastName: string;   // Last name (required)
+  email: string;      // Email (required, must be valid email format)
+  phone: string;      // Phone (required, E.164 format)
+}
+`})}),`
+`,e.jsx(n.h4,{id:"deliveryaddress-fields",children:"DeliveryAddress Fields"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface DeliveryAddress {
+  country: string;    // Country (required)
+  address: string;    // Street address (required)
+  address2?: string;  // Address line 2 (optional)
+  city: string;       // City (required)
+  state: string;      // State/Province (required)
+  zipCode: string;    // Postal code (required)
+}
+`})}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Important:"})," When customizing components, you must update all required fields through ",e.jsx(n.code,{children:"updateCustomerInfo"})," and ",e.jsx(n.code,{children:"updateDeliveryAddress"}),"."]}),`
+`,e.jsx(n.h3,{id:"using-checkoutprovider",children:"Using CheckoutProvider"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"CheckoutProvider"})," is the foundation of any custom checkout flow. It provides the context and state management needed for all checkout-related functionality. All your custom components must be wrapped within ",e.jsx(n.code,{children:"CheckoutProvider"}),"."]}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"CheckoutProvider"})," props are identical to ",e.jsx(n.code,{children:"CheckoutPage"}),", supporting the following:"]}),`
+`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Required Props:"})}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"cart: CartItem[]"})," - Array of cart items. Each item must include ",e.jsx(n.code,{children:"sku"})," and ",e.jsx(n.code,{children:"offerPricePoint"}),". ",e.jsx(n.strong,{children:"Note:"})," Even for a single product, pass it as an array with one item."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"children: ReactNode"})," - Child components to be wrapped"]}),`
+`]}),`
+`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Optional Props:"})}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onCheckoutInit?: () => void"})," - Callback function triggered when checkout initializes (immediately after component mount)"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"googleApiKey?: string"})," - Google Places API Key for enabling address autocomplete functionality"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onPaymentInfoComplete?: (products: CheckoutCartItem[], totalAmount: number) => void"})," - Callback triggered when payment information is complete"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onOrderSubmit?: (products: CheckoutCartItem[], totalAmount: number) => void"})," - Callback triggered when order is submitted"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onOrderSuccess?: (orderCode: string, tradeCode?: string) => void"})," - Callback triggered when order succeeds"]}),`
+`]}),`
+`,e.jsxs(n.p,{children:["For detailed parameter descriptions, see ",e.jsx(n.a,{href:"./?path=/docs/documentation-usage-guide-checkoutpage--docs",children:"CheckoutPage Documentation"}),"."]}),`
+`,e.jsx(n.h3,{id:"building-custom-components",children:"Building Custom Components"}),`
+`,e.jsx(n.p,{children:"Now let's see how to build custom components step by step. Each component uses hooks to access and update the checkout state."}),`
+`,e.jsx(n.h4,{id:"custom-customer-info-component",children:"Custom Customer Info Component"}),`
+`,e.jsxs(n.p,{children:["Use the ",e.jsx(n.code,{children:"useCheckoutContext"})," hook to access ",e.jsx(n.code,{children:"customerInfo"})," and ",e.jsx(n.code,{children:"updateCustomerInfo"}),":"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useCheckoutContext } from '@clickaroo/checkout-ui';
+
+function CustomCustomerInfo() {
+  const { customerInfo, updateCustomerInfo } = useCheckoutContext();
+
+  return (
+    <div>
+      <input 
+        value={customerInfo.firstName} 
+        onChange={(e) => updateCustomerInfo({ firstName: e.target.value })} 
+        placeholder="First Name"
+      />
+      <input 
+        value={customerInfo.lastName} 
+        onChange={(e) => updateCustomerInfo({ lastName: e.target.value })} 
+        placeholder="Last Name"
+      />
+      <input 
+        type="email" 
+        value={customerInfo.email} 
+        onChange={(e) => updateCustomerInfo({ email: e.target.value })} 
+        placeholder="Email"
+      />
+      <input 
+        type="tel" 
+        value={customerInfo.phone} 
+        onChange={(e) => updateCustomerInfo({ phone: e.target.value })} 
+        placeholder="Phone"
+      />
+    </div>
+  );
+}
+`})}),`
+`,e.jsx(n.h4,{id:"custom-delivery-address-component",children:"Custom Delivery Address Component"}),`
+`,e.jsxs(n.p,{children:["Similarly, use ",e.jsx(n.code,{children:"updateDeliveryAddress"})," to update address information:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useCheckoutContext } from '@clickaroo/checkout-ui';
+
+function CustomDeliveryAddress() {
+  const { deliveryAddress, updateDeliveryAddress } = useCheckoutContext();
+
+  return (
+    <div>
+      <input 
+        value={deliveryAddress.country || ''} 
+        onChange={(e) => updateDeliveryAddress({ country: e.target.value })} 
+        placeholder="Country"
+      />
+      <input 
+        value={deliveryAddress.address || ''} 
+        onChange={(e) => updateDeliveryAddress({ address: e.target.value })} 
+        placeholder="Street Address"
+      />
+      <input 
+        value={deliveryAddress.city || ''} 
+        onChange={(e) => updateDeliveryAddress({ city: e.target.value })} 
+        placeholder="City"
+      />
+      <input 
+        value={deliveryAddress.state || ''} 
+        onChange={(e) => updateDeliveryAddress({ state: e.target.value })} 
+        placeholder="State/Province"
+      />
+      <input 
+        value={deliveryAddress.zipCode || ''} 
+        onChange={(e) => updateDeliveryAddress({ zipCode: e.target.value })} 
+        placeholder="ZIP Code"
+      />
+    </div>
+  );
+}
+`})}),`
+`,e.jsx(n.h4,{id:"custom-submit-button-component",children:"Custom Submit Button Component"}),`
+`,e.jsxs(n.p,{children:["Use ",e.jsx(n.code,{children:"useOrderSubmission"})," hook to handle order submission and ",e.jsx(n.code,{children:"isFormValid()"})," to check form validity:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useCheckoutContext, useOrderSubmission } from '@clickaroo/checkout-ui';
+
+function CustomSubmitButton() {
+  const { isFormValid } = useCheckoutContext();
+  const { isSubmitting, submitOrder } = useOrderSubmission();
+
+  const handleSubmit = async () => {
+    // Always check form validity before submitting
+    if (!isFormValid()) {
+      alert('Please complete all required fields');
+      return;
+    }
+
+    const result = await submitOrder();
+    
+    if (result.success) {
+      console.log('Order successful', result.orderCode);
+      // Handle success (e.g., redirect to success page)
+    } else {
+      console.error('Order failed', result.message);
+      // Handle error (e.g., show error message)
+    }
+  };
+
+  return (
+    <button 
+      onClick={handleSubmit} 
+      disabled={!isFormValid() || isSubmitting}
+    >
+      {isSubmitting ? 'Processing...' : 'Complete Order'}
+    </button>
+  );
+}
+`})}),`
+`,e.jsx(n.h3,{id:"complete-example",children:"Complete Example"}),`
+`,e.jsx(n.p,{children:"Here's a complete example putting it all together:"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { 
+  CheckoutProvider, 
+  PaymentMethods,
+  useCheckoutContext,
+  useOrderSubmission
+} from '@clickaroo/checkout-ui';
+
+// ... (include the custom components above)
+
+function CustomCheckoutPage() {
+  const cart = [
+    {
+      sku: "TEST001",
+      offerPricePoint: "OPP-XXX",
+      title: "Product 1",
+      price: 99.99,
+    },
+  ];
+
+  return (
+    <CheckoutProvider 
+      cart={cart}
+      googleApiKey="YOUR_GOOGLE_API_KEY"
+      onCheckoutInit={() => {
+        console.log('Checkout initialized');
+      }}
+      onPaymentInfoComplete={(products, totalAmount) => {
+        console.log('Payment info complete', products, totalAmount);
+      }}
+      onOrderSubmit={(products, totalAmount) => {
+        console.log('Order submitted', products, totalAmount);
+      }}
+      onOrderSuccess={(orderCode, tradeCode) => {
+        console.log('Order successful', orderCode, tradeCode);
+      }}
+    >
+      <CustomCustomerInfo />
+      <CustomDeliveryAddress />
+      {/* PaymentMethods is required - cannot be customized */}
+      <PaymentMethods />
+      <CustomSubmitButton />
+    </CheckoutProvider>
+  );
+}
+`})}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Key Point:"})," All components must be wrapped in ",e.jsx(n.code,{children:"CheckoutProvider"})]})]})}function A(t={}){const{wrapper:n}={...s(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(o,{...t})}):o(t)}export{A as default};

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

@@ -0,0 +1,6 @@
+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-Dbzt3i55.js";import"./CustomerInfo-CYLNdAoo.js";import"./DeliveryAddress-BBT_-q56.js";import{P as j}from"./PaymentMethods-ro6Dfmcf.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-OyfGgjnr.js

@@ -0,0 +1,6 @@
+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/CustomerInfo-CYLNdAoo.js

@@ -0,0 +1 @@
+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.stories-BBWobZ5V.js

@@ -0,0 +1,9 @@
+import{j as o}from"./jsx-runtime-DiklIkkE.js";import{C as l}from"./CustomerInfo-CYLNdAoo.js";import{C as u,S as p,c as d,D as f}from"./useCheckoutContext-w0N5TNgR.js";import"./index-DRjF_FHU.js";import"./ValidateInput-C71ymd_w.js";d(f);const h=[{sku:"TEST001",offerPricePoint:p.SINGLE}],E={component:l,title:"Components/CustomerInfo",parameters:{docs:{description:{component:"Customer information form component for collecting customer details (first name, last name, email, phone). Requires CheckoutProvider wrapper."}}},decorators:[c=>o.jsx(u,{cart:h,children:o.jsx(c,{})})],argTypes:{showTitle:{description:'Whether to display the title "Customer Information"',control:"boolean",table:{type:{summary:"boolean"},defaultValue:{summary:"true"}}}}},e={args:{showTitle:!0}},r={args:{showTitle:!1}};var t,s,a;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`{
+  args: {
+    showTitle: true
+  }
+}`,...(a=(s=e.parameters)==null?void 0:s.docs)==null?void 0:a.source}}};var n,i,m;r.parameters={...r.parameters,docs:{...(n=r.parameters)==null?void 0:n.docs,source:{originalSource:`{
+  args: {
+    showTitle: false
+  }
+}`,...(m=(i=r.parameters)==null?void 0:i.docs)==null?void 0:m.source}}};const S=["Default","WithoutTitle"];export{e as Default,r as WithoutTitle,S as __namedExportsOrder,E as default};

package/dist/storybook/storybook-static/assets/DeliveryAddress-BBT_-q56.js

@@ -0,0 +1,2 @@
+import{j as t}from"./jsx-runtime-DiklIkkE.js";import{F as W}from"./ValidateInput-C71ymd_w.js";import{r as a,R as O}from"./index-DRjF_FHU.js";import{Z as F,d as P,e as j,s as x,b as z,A as M}from"./useCheckoutContext-w0N5TNgR.js";const R=({label:h,value:u,onChange:l,onBlur:b,onFocus:n,placeholder:C,selectClass:v="",error:y,options:A,schema:g,validateOnChange:T=!1,validateOnBlur:f=!0,onValidationChange:S,...e})=>{const[,s]=a.useState(!1),[i,r]=a.useState(null),d=y||i,m=a.useCallback(o=>{var w;if(!g)return null;try{return g.parse(o),null}catch(L){return L instanceof F&&((w=L.issues[0])==null?void 0:w.message)||"Validation failed"}},[g]),N=a.useCallback(o=>{r(o),S&&S(o)},[S]);return a.useEffect(()=>{if(g&&T){const o=m(u);N(o)}},[u,g,T,m,N]),t.jsxs("div",{className:"relative w-full",children:[t.jsx("label",{className:`text-sm text-[#2A2B35] bg-white px-1 pointer-events-none
+          transition-all duration-200 z-10`,children:h}),t.jsx("div",{className:"relative",children:t.jsxs("select",{value:u,onFocus:o=>{s(!0),n&&n(o)},onBlur:o=>{if(s(!1),g&&f){const w=m(u);N(w)}b&&b(o)},onChange:o=>l(o.target.value),className:`w-full border border-[#e6e6e6] shadow-sm rounded-md p-[0.64rem] pl-3 text-base bg-white transition pr-12 appearance-none cursor-pointer outline-none font-[inherit] ${d?"!border-2 !border-[#df1b41] focus:!border-[#df1b41] !text-[#df1b41] focus:!ring-0 focus:!outline-none":"border-secondary focus:border-[#8AA3D4] focus:shadow-focus focus:!outline-none"} ${v}`,...e,children:[C&&!u&&t.jsx("option",{value:"",disabled:!0,children:C||h}),A.map(o=>t.jsx("option",{value:o.value,children:o.label},o.value))]})}),d&&t.jsx("p",{className:"mt-1 text-sm text-[#df1b41] px-2",children:d})]})};R.__docgenInfo={description:"",methods:[],displayName:"FloatingLabelSelect",props:{label:{required:!0,tsType:{name:"string"},description:""},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:""},onBlur:{required:!1,tsType:{name:"signature",type:"function",raw:"(e: React.FocusEvent<HTMLSelectElement>) => void",signature:{arguments:[{type:{name:"ReactFocusEvent",raw:"React.FocusEvent<HTMLSelectElement>",elements:[{name:"HTMLSelectElement"}]},name:"e"}],return:{name:"void"}}},description:""},onFocus:{required:!1,tsType:{name:"signature",type:"function",raw:"(e: React.FocusEvent<HTMLSelectElement>) => void",signature:{arguments:[{type:{name:"ReactFocusEvent",raw:"React.FocusEvent<HTMLSelectElement>",elements:[{name:"HTMLSelectElement"}]},name:"e"}],return:{name:"void"}}},description:""},placeholder:{required:!1,tsType:{name:"string"},description:""},icon:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},selectClass:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'""',computed:!1}},error:{required:!1,tsType:{name:"string"},description:""},options:{required:!0,tsType:{name:"Array",elements:[{name:"SelectOption"}],raw:"SelectOption[]"},description:""},schema:{required:!1,tsType:{name:"z.ZodSchema",elements:[{name:"string"}],raw:"z.ZodSchema<string>"},description:""},validateOnChange:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},validateOnBlur:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},onValidationChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(error: string | null) => void",signature:{arguments:[{type:{name:"union",raw:"string | null",elements:[{name:"string"},{name:"null"}]},name:"error"}],return:{name:"void"}}},description:""}},composes:["Omit"]};const q="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20116%2015'%20aria-label='Powered%20by%20Google'%20class='wbodi'%20fill='%236c757d'%3e%3cpath%20d='M4.025%203.572c1.612%200%202.655%201.283%202.655%203.27%200%201.974-1.05%203.27-2.655%203.27-.902%200-1.63-.393-1.974-1.06h-.09v3.057H.95V3.68h.96v1.054h.094c.404-.726%201.16-1.166%202.02-1.166zm-.24%205.63c1.16%200%201.852-.884%201.852-2.36%200-1.477-.692-2.362-1.846-2.362-1.14%200-1.86.91-1.86%202.362%200%201.447.72%202.36%201.858%202.36zm7.072.91c-1.798%200-2.912-1.243-2.912-3.27%200-2.033%201.114-3.27%202.912-3.27%201.8%200%202.913%201.237%202.913%203.27%200%202.027-1.114%203.27-2.913%203.27m0-.91c1.196%200%201.87-.866%201.87-2.36%200-1.5-.674-2.362-1.87-2.362-1.195%200-1.87.862-1.87%202.362%200%201.494.675%202.36%201.87%202.36m12.206-5.518H22.05l-1.244%205.05h-.094L19.3%203.684h-.966l-1.412%205.05h-.094l-1.242-5.05h-1.02L16.336%2010h1.02l1.406-4.887h.093L20.268%2010h1.025zm3.632.78c-1.008%200-1.71.737-1.787%201.856h3.48c-.023-1.12-.69-1.857-1.693-1.857zm1.664%203.9h1.004c-.305%201.085-1.277%201.747-2.66%201.747-1.752%200-2.848-1.26-2.848-3.26%200-1.986%201.113-3.275%202.847-3.275%201.705%200%202.742%201.213%202.742%203.176v.387h-4.542v.047c.053%201.248.75%202.04%201.822%202.04.815%200%201.366-.3%201.63-.857zM31.03%2010h1.01V6.086c0-.89.696-1.535%201.657-1.535.2%200%20.563.04.645.06V3.6c-.13-.018-.34-.03-.504-.03-.838%200-1.565.434-1.752%201.05h-.094v-.938h-.96V10zm6.915-5.537c-1.008%200-1.71.738-1.787%201.857h3.48c-.023-1.12-.69-1.857-1.693-1.857m1.664%203.902h1.004c-.304%201.084-1.277%201.746-2.66%201.746-1.752%200-2.848-1.26-2.848-3.26%200-1.986%201.113-3.275%202.847-3.275%201.705%200%202.742%201.213%202.742%203.176v.387h-4.542v.047c.053%201.248.75%202.04%201.822%202.04.815%200%201.366-.3%201.63-.857zm5.01%201.746c-1.62%200-2.658-1.28-2.658-3.265%200-1.98%201.05-3.27%202.654-3.27.878%200%201.622.416%201.98%201.108h.087V1.177h1.008V10h-.96V8.992h-.093c-.4.703-1.15%201.12-2.02%201.12zm.23-5.63c-1.15%200-1.845.89-1.845%202.365s.69%202.36%201.846%202.36c1.15%200%201.858-.9%201.858-2.36%200-1.447-.715-2.362-1.857-2.362zm7.876-3.114h1.024V4.49q.346-.45.827-.69.48-.239%201.043-.237%201.172.001%201.9.806c.49.536.73%201.33.73%202.375q0%201.489-.72%202.473t-1.997.984q-.715%200-1.207-.344-.293-.206-.627-.657v.8h-.97V1.364zm4.02%207.225q.426-.679.426-1.793%200-.99-.425-1.64t-1.25-.65q-.719%200-1.264.532-.541.532-.542%201.757.001.885.224%201.435.416%201.04%201.553%201.04.856%200%201.28-.68zM63.4%203.727h1.167q-.222.603-.99%202.754a145%20145%200%200%201-.96%202.635q-.915%202.402-1.29%202.93-.375.526-1.29.527-.221%200-.342-.017a3%203%200%200%201-.296-.065v-.96q.273.074.4.093.119.018.214.018.292%200%20.43-.093a.9.9%200%200%200%20.232-.237q.03-.05.21-.48.183-.436.264-.646l-2.32-6.457h1.196l1.68%205.11%201.694-5.11zm10.594%201.556V6.87h3.814c-.117.89-.416%201.54-.87%201.998-.557.555-1.427%201.16-2.944%201.16-2.35%200-4.184-1.882-4.184-4.217%200-2.33%201.835-4.214%204.184-4.214a4.07%204.07%200%200%201%202.873%201.135l1.122-1.116C77.04.697%2075.77%200%2073.99%200c-3.218%200-5.923%202.606-5.923%205.805%200%203.2%202.705%205.804%205.923%205.804%201.738%200%203.048-.57%204.073-1.63%201.05-1.044%201.382-2.52%201.382-3.71%200-.365-.028-.707-.087-.99h-5.37zm10.222-1.29c-2.082%200-3.78%201.574-3.78%203.748%200%202.154%201.698%203.747%203.78%203.747S87.998%209.9%2087.998%207.74c0-2.174-1.7-3.748-3.782-3.748zm0%206.018c-1.14%200-2.127-.935-2.127-2.27%200-1.348.982-2.27%202.123-2.27s2.128.922%202.128%202.27c0%201.335-.985%202.27-2.127%202.27zm18.54-5.18h-.06c-.37-.438-1.083-.838-1.985-.838-1.88%200-3.52%201.632-3.52%203.748%200%202.102%201.64%203.747%203.52%203.747.906%200%201.62-.4%201.99-.852h.06v.523c0%201.432-.774%202.2-2.013%202.2-1.012%200-1.64-.723-1.9-1.336l-1.44.593c.414.994%201.51%202.213%203.34%202.213%201.94%200%203.58-1.135%203.58-3.902v-6.74h-1.57v.645zm-1.9%205.18c-1.144%200-2.013-.968-2.013-2.27%200-1.323.87-2.27%202.01-2.27%201.13%200%202.012.967%202.012%202.282.006%201.31-.882%202.258-2.01%202.258zM92.65%203.992c-2.084%200-3.783%201.574-3.783%203.748%200%202.154%201.7%203.747%203.782%203.747%202.08%200%203.78-1.587%203.78-3.747%200-2.174-1.7-3.748-3.78-3.748zm0%206.018c-1.143%200-2.13-.935-2.13-2.27%200-1.348.987-2.27%202.13-2.27%201.14%200%202.126.922%202.126%202.27%200%201.335-.986%202.27-2.127%202.27zM105.622.155h1.628v11.332h-1.628m6.655-1.477c-.843%200-1.44-.38-1.83-1.135l5.04-2.07-.168-.426c-.315-.84-1.275-2.39-3.228-2.39-1.94%200-3.554%201.515-3.554%203.75%200%202.1%201.595%203.744%203.736%203.744%201.725%200%202.724-1.05%203.14-1.658l-1.285-.852c-.428.62-1.01%201.032-1.855%201.032zm-.117-4.612c.668%200%201.24.342%201.427.826l-3.405%201.4c0-1.574%201.122-2.226%201.978-2.226'%3e%3c/path%3e%3c/svg%3e",D=({value:h,onChange:u,onAddressSelect:l,label:b="Address",placeholder:n="Address",apiKey:C,region:v,schema:y,error:A,inputClass:g="w-full",autoComplete:T="shipping address-line1"})=>{const[f,S]=a.useState([]),[e,s]=a.useState(!1),[i,r]=a.useState(),d=a.useRef(null),m=a.useRef(null);a.useEffect(()=>{const c=p=>{m.current&&!m.current.contains(p.target)&&s(!1)};return document.addEventListener("mousedown",c),()=>{document.removeEventListener("mousedown",c)}},[]);const N=a.useCallback(async c=>{if(!c.trim()||!C){S([]),s(!1);return}try{const p=await P(c,C,v,i);S(p.suggestions),r(p.sessionToken),s(!0)}catch(p){console.error("Failed to fetch suggestions:",p),S([])}},[C,v,i]),o=a.useCallback(c=>{const p=c.target.value;u(p),d.current&&clearTimeout(d.current),d.current=setTimeout(()=>{N(p)},300)},[u,N]),w=a.useCallback(async(c,p)=>{p.preventDefault(),p.stopPropagation();try{const B=await j(c.place,v||"US");u(c.address),l&&l(B),s(!1),S([]),r(void 0)}catch(B){console.error("Failed to get address detail:",B),u(c.address),s(!1)}},[u,l,v]),L=a.useCallback(()=>{f.length>0?s(!0):h.trim()&&N(h)},[f.length,h,N]),I=a.useCallback(()=>{s(!1)},[]);return a.useEffect(()=>()=>{d.current&&clearTimeout(d.current)},[]),t.jsxs("div",{className:"relative",ref:m,id:"google-address-suggestion",children:[t.jsx(W,{label:b,placeholder:n,value:h,onChange:o,onFocus:L,inputClass:g,autoComplete:T,schema:y,error:A,...C&&{icon:t.jsxs("svg",{width:"20",height:"20",fill:"none",stroke:"currentColor",strokeWidth:"2",viewBox:"0 0 24 24",children:[t.jsx("circle",{cx:"11",cy:"11",r:"7"}),t.jsx("line",{x1:"16.5",y1:"16.5",x2:"21",y2:"21"})]})}}),e&&f.length>0&&t.jsx("div",{className:"absolute z-50 w-full mt-1 bg-white border border-[#e6e6e6] rounded-md shadow-lg max-h-80 overflow-y-auto",children:t.jsxs("ul",{className:"m-0 p-0 list-none",children:[t.jsxs("li",{className:"px-4 py-3 flex items-center justify-between ml-0",children:[t.jsx("span",{className:"text-[#212529A6] text-sm uppercase",children:"Suggestions"}),t.jsx("button",{type:"button",onClick:I,className:"bg-transparent border-none outline-none text-gray-400 hover:text-gray-600 focus:outline-none","aria-label":"Close suggestions",children:t.jsxs("svg",{width:"16",height:"16",fill:"none",stroke:"currentColor",strokeWidth:"2",viewBox:"0 0 24 24",children:[t.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),t.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]}),f.map(c=>t.jsx("li",{className:"px-4 py-2 hover:bg-gray-100 cursor-pointer transition-colors text-[#212529A6]",onClick:p=>w(c,p),children:c.address},c.id)),t.jsx("li",{className:"px-4 py-2 border-t border-[#e6e6e6] bg-[#f8f9fa] ml-0",children:t.jsx("div",{className:"flex items-center",children:t.jsx("img",{src:q,alt:"Powered by Google",className:"h-5 w-[8rem] fill-[#6c757d] text-md"})})})]})})]})};D.__docgenInfo={description:"",methods:[],displayName:"GoogleSuggestionInput",props:{apiKey:{required:!0,tsType:{name:"string"},description:""},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:""},onAddressSelect:{required:!1,tsType:{name:"signature",type:"function",raw:"(addressData: DeliveryAddress) => void",signature:{arguments:[{type:{name:"z.infer",elements:[{name:"AddressSchema"}],raw:"z.infer<typeof AddressSchema>"},name:"addressData"}],return:{name:"void"}}},description:""},label:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Address"',computed:!1}},placeholder:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Address"',computed:!1}},region:{required:!1,tsType:{name:"string"},description:""},schema:{required:!1,tsType:{name:"z.ZodSchema",elements:[{name:"string"}],raw:"z.ZodSchema<string>"},description:""},error:{required:!1,tsType:{name:"string"},description:""},inputClass:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"w-full"',computed:!1}},autoComplete:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"shipping address-line1"',computed:!1}}}};const E={US:{name:"United States",state:{AL:"Alabama",AK:"Alaska",AS:"American Samoa",AZ:"Arizona",AR:"Arkansas",CA:"California",CO:"Colorado",CT:"Connecticut",DE:"Delaware",DC:"District of Columbia",FM:"Federated States of Micronesia",FL:"Florida",GA:"Georgia",GU:"Guam",HI:"Hawaii",ID:"Idaho",IL:"Illinois",IN:"Indiana",IA:"Iowa",KS:"Kansas",KY:"Kentucky",LA:"Louisiana",ME:"Maine",MH:"Marshall Islands",MD:"Maryland",MA:"Massachusetts",MI:"Michigan",MN:"Minnesota",MS:"Mississippi",MO:"Missouri",MT:"Montana",NE:"Nebraska",NV:"Nevada",NH:"New Hampshire",NJ:"New Jersey",NM:"New Mexico",NY:"New York",NC:"North Carolina",ND:"North Dakota",MP:"Northern Mariana Islands",OH:"Ohio",OK:"Oklahoma",OR:"Oregon",PW:"Palau",PA:"Pennsylvania",PR:"Puerto Rico",RI:"Rhode Island",SC:"South Carolina",SD:"South Dakota",TN:"Tennessee",TX:"Texas",UT:"Utah",VT:"Vermont",VI:"Virgin Islands",VA:"Virginia",WA:"Washington",WV:"West Virginia",WI:"Wisconsin",WY:"Wyoming",AA:"Armed Forces Americas",AE:"Armed Forces Europe",AP:"Armed Forces Pacific"}},AU:{name:"Australia",state:{ACT:"Australian Capital Territory",NSW:"New South Wales",NT:"Northern Territory",QLD:"Queensland",SA:"South Australia",TAS:"Tasmania",VIC:"Victoria",WA:"Western Australia"}},CA:{name:"Canada",state:{AB:"Alberta",BC:"British Columbia",MB:"Manitoba",NB:"New Brunswick",NL:"Newfoundland and Labrador",NT:"Northwest Territories",NS:"Nova Scotia",NU:"Nunavut",ON:"Ontario",PE:"Prince Edward Island",QC:"Quebec",SK:"Saskatchewan",YT:"Yukon"}},NZ:{name:"New Zealand",state:{AUK:"Auckland",BOP:"Bay of Plenty",CAN:"Canterbury",CIT:"Chatham Islands",GIS:"Gisborne",HKB:"Hawke’s Bay",MWT:"Manawatū-Whanganui",MBH:"Marlborough",NSN:"Nelson",NTL:"Northland",OTA:"Otago",STL:"Southland",TKI:"Taranaki",TAS:"Tasman",WKO:"Waikato",WGN:"Wellington",WTC:"West Coast"}},GB:{name:"United Kingdom",state:{BD:"Barking and Dagenham",BE:"Barnet",BNS:"Barnsley",BNES:"Bath and North East Somerset",BDF:"Bedfordshire",BX:"Bexley",BIR:"Birmingham",BBD:"Blackburn with Darwen",BPL:"Blackpool",BOL:"Bolton",BMH:"Bournemouth",BRC:"Bracknell Forest",BRD:"Bradford",BEN:"Brent",BNH:"Brighton and Hove",BRY:"Bromley",BKM:"Buckinghamshire",BUR:"Bury",CLD:"Calderdale",CAM:"Cambridgeshire",CMD:"Camden",CHS:"Cheshire",BST:"City of Bristol",KHL:"City of Kingston upon Hull",LND:"City of London",CON:"Cornwall",COV:"Coventry",CRY:"Croydon",CMA:"Cumbria",DAL:"Darlington",DER:"Derby",DBY:"Derbyshire",DEV:"Devon",DNC:"Doncaster",DOR:"Dorset",DUD:"Dudley",DUR:"Durham",EAL:"Ealing",ERY:"East Riding of Yorkshire",ESX:"East Sussex",ENF:"Enfield",ESS:"Essex",GAT:"Gateshead",GLS:"Gloucestershire",GRE:"Greenwich",HCK:"Hackney",HAL:"Halton",HMF:"Hammersmith and Fulham",HAM:"Hampshire",HRY:"Haringey",HRW:"Harrow",HPL:"Hartlepool",HAV:"Havering",HEF:"Herefordshire",HRT:"Hertfordshire",HIL:"Hillingdon",HNS:"Hounslow",IOW:"Isle of Wight",ISL:"Islington",KEC:"Kensington and Chelsea",KEN:"Kent",KTT:"Kingston upon Thames",KIR:"Kirklees",KWL:"Knowsley",LBH:"Lambeth",LAN:"Lancashire",LDS:"Leeds",LCE:"Leicester",LEC:"Leicestershire",LEW:"Lewisham",LIN:"Lincolnshire",LIV:"Liverpool",LUT:"Luton",MAN:"Manchester",MDW:"Medway",MRT:"Merton",MDB:"Middlesbrough",MIK:"Milton Keynes",NET:"Newcastle upon Tyne",NWM:"Newham",NFK:"Norfolk",NEL:"North East Lincolnshire",NLN:"North Lincolnshire",NSM:"North Somerset",NTY:"North Tyneside",NYK:"North Yorkshire",NTH:"Northamptonshire",NBL:"Northumberland",NGM:"Nottingham",NTT:"Nottinghamshire",OLD:"Oldham",OXF:"Oxfordshire",PTE:"Peterborough",PLY:"Plymouth",POL:"Poole",POR:"Portsmouth",RDG:"Reading",RDB:"Redbridge",RCC:"Redcar and Cleveland",RIC:"Richmond upon Thames",RCH:"Rochdale",ROT:"Rotherham",RUT:"Rutland",SLF:"Salford",SAW:"Sandwell",SFT:"Sefton",SHF:"Sheffield",SHR:"Shropshire",SLG:"Slough",SOL:"Solihull",SOM:"Somerset",SGC:"South Gloucestershire",STY:"South Tyneside",STH:"Southampton",SOS:"Southend-on-Sea",SWK:"Southwark",SHN:"St. Helens",STS:"Staffordshire",SKP:"Stockport",STT:"Stockton-on-Tees",STE:"Stoke-on-Trent",SFK:"Suffolk",SND:"Sunderland",SRY:"Surrey",SUT:"Sutton",SWD:"Swindon",TAM:"Tameside",TFW:"Telford and Wrekin",THR:"Thurrock",TOB:"Torbay",TWH:"Tower Hamlets",TRF:"Trafford",WKF:"Wakefield",WLL:"Walsall",WFT:"Waltham Forest",WND:"Wandsworth",WRT:"Warrington",WAR:"Warwickshire",WBK:"West Berkshire",WSX:"West Sussex",WSM:"Westminster",WGN:"Wigan",WIL:"Wiltshire",WNM:"Windsor and Maidenhead",WRL:"Wirral",WOK:"Wokingham",WLV:"Wolverhampton",WOR:"Worcestershire",YOR:"York"}}},k={US:x().trim().min(1,"Zip code is required").regex(/^\d{5}(-\d{4})?$/,"Invalid US ZIP code"),CA:x().trim().min(1,"Postal code is required").regex(/^[A-Z]\d[A-Z] \d[A-Z]\d$/,"Invalid CA postcode"),AU:x().trim().min(1,"Postcode is required").regex(/^\d{4}$/,"Invalid AU postcode"),NZ:x().trim().min(1,"Postal code is required").regex(/^\d{4}$/,"Invalid NZ postal code"),GB:x().trim().min(1,"Postcode is required").regex(/^[A-Z]{1,2}\d[A-Z\d]? \d[A-Z]{2}$/,"Invalid UK postcode")},H={US:{fields:[{key:"city",type:"input",label:"City",placeholder:"City",autoComplete:"shipping address-level2"},{key:"state",type:"select",label:"State",placeholder:"-- Select --",useStateOptions:!0,autoComplete:"shipping address-level1"},{key:"zipCode",type:"input",label:"Zip Code",placeholder:"Zip Code",autoComplete:"shipping postal-code",validation:k.US}],layout:[{row:["city"]},{row:["state","zipCode"]}]},CA:{fields:[{key:"city",type:"input",label:"City",placeholder:"City",autoComplete:"shipping address-level2"},{key:"state",type:"select",label:"Province",placeholder:"-- Select --",useStateOptions:!0,autoComplete:"shipping address-level1"},{key:"zipCode",type:"input",label:"Postcode",placeholder:"Postcode",autoComplete:"shipping postal-code",validation:k.CA}],layout:[{row:["city"]},{row:["state","zipCode"]}]},AU:{fields:[{key:"city",type:"input",label:"City",placeholder:"City",autoComplete:"shipping address-level2"},{key:"state",type:"select",label:"State / territory",placeholder:"-- Select --",useStateOptions:!0,autoComplete:"shipping address-level1"},{key:"zipCode",type:"input",label:"Postcode",placeholder:"Postcode",autoComplete:"shipping postal-code",validation:k.AU}],layout:[{row:["city"]},{row:["state","zipCode"]}]},NZ:{fields:[{key:"city",type:"input",label:"City",placeholder:"City",autoComplete:"shipping address-level2"},{key:"state",type:"select",label:"Region",placeholder:"-- Select --",useStateOptions:!0,autoComplete:"shipping address-level1"},{key:"zipCode",type:"input",label:"Postcode",placeholder:"Postcode",autoComplete:"shipping postal-code",validation:k.NZ}],layout:[{row:["city"]},{row:["state","zipCode"]}]},GB:{fields:[{key:"city",type:"input",label:"City",placeholder:"City",autoComplete:"shipping address-level2"},{key:"zipCode",type:"input",label:"Postcode",placeholder:"Postcode",autoComplete:"shipping postal-code",validation:k.GB}],layout:[{row:["city"]},{row:["zipCode"]}]}};function K(h){return H[h]||H.US}const V=({showTitle:h=!0})=>{const{deliveryAddress:u,updateDeliveryAddress:l,googleApiKey:b}=z(),{country:n,address:C,address2:v}=u,y=a.useMemo(()=>K(n||"US"),[n]),A=a.useMemo(()=>{const s=E[n||"US"];return Object.entries(s.state).map(([,i])=>({value:i,label:i}))},[n]),g=a.useMemo(()=>Object.entries(E).map(([e,s])=>({value:e,label:s.name})),[]),T=O.useRef(n);a.useEffect(()=>{n||l({country:"US"})},[n,l]),a.useEffect(()=>{const e=T.current,s=n||"US";e&&s&&e!==s&&l({city:"",state:"",zipCode:""}),T.current=s},[n,l]);const f=e=>{const s=u[e.key],i=e.key,r=e.validation||M.shape[i];return e.type==="select"&&e.useStateOptions?t.jsx(R,{label:e.label,placeholder:e.placeholder,value:s,onChange:d=>l({[i]:d}),options:A,autoComplete:e.autoComplete,schema:r},i):t.jsx(W,{label:e.label,placeholder:e.placeholder,value:s,onChange:d=>l({[i]:d.target.value}),inputClass:"w-full",autoComplete:e.autoComplete,schema:r},i)},S=()=>{const e=new Map(y.fields.map(r=>[r.key,r]));if(!y.layout||y.layout.length===0)return y.fields.map(r=>t.jsx("div",{className:"flex-1",children:f(r)},r.key));const s=new Set,i=[];return y.layout.forEach(r=>{const d=r.row.map(m=>e.get(m)).filter(Boolean);d.length>0&&i.push(t.jsx("div",{className:"flex flex-col md:flex-row gap-3",children:d.map(m=>(s.add(m.key),t.jsx("div",{className:"flex-1",children:f(m)},m.key)))},`row-${r.row.join("-")}`))}),y.fields.forEach(r=>{s.has(r.key)||i.push(t.jsx("div",{className:"flex-1",children:f(r)},r.key))}),i};return t.jsxs("div",{className:"w-full",children:[h&&t.jsx("div",{className:"text-lg md:text-2xl mb-5 font-medium",children:"Delivery Address"}),t.jsxs("div",{className:"flex flex-col gap-2 border border-solid border-[#e6e6e6] shadow-sm rounded-md p-4 bg-white",children:[t.jsx(R,{label:"Country",placeholder:"Country",value:n||"US",onChange:e=>l({country:e}),options:g,autoComplete:"shipping country",schema:M.shape.country}),t.jsx(D,{value:C,onChange:e=>l({address:e}),onAddressSelect:e=>{l({address:e.address,address2:e.address2||"",city:e.city||"",state:e.state||"",zipCode:e.zipCode||"",country:e.country||n||"US"})},apiKey:b||"",region:n,schema:M.shape.address,autoComplete:"shipping address-line1"}),t.jsx(W,{label:"Address Line 2",placeholder:"Address Line 2",value:v||"",onChange:e=>l({address2:e.target.value}),inputClass:"w-full",autoComplete:"shipping address-line2",schema:M.shape.address2}),S()]})]})};V.__docgenInfo={description:"",methods:[],displayName:"DeliveryAddress",props:{showTitle:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}}}};export{V as D};

package/dist/storybook/storybook-static/assets/DeliveryAddress.stories-ex4l-pod.js

@@ -0,0 +1,9 @@
+import{j as o}from"./jsx-runtime-DiklIkkE.js";import{D as c}from"./DeliveryAddress-BBT_-q56.js";import{C as m,S as d,c as u,D as f}from"./useCheckoutContext-w0N5TNgR.js";import"./index-DRjF_FHU.js";import"./ValidateInput-C71ymd_w.js";u(f);const g=[{sku:"TEST001",offerPricePoint:d.SINGLE}],D={component:c,title:"Components/DeliveryAddress",parameters:{docs:{description:{component:"Delivery address form component for collecting shipping address information. Supports Google Places autocomplete when googleApiKey is provided. Requires CheckoutProvider wrapper."}}},decorators:[p=>o.jsx(m,{cart:g,googleApiKey:"AIzaSyCtZ0TqBCGRf1OtLwTmJANQ4_sOpTs5x1w",children:o.jsx(p,{})})],argTypes:{showTitle:{description:'Whether to display the title "Delivery Address"',control:"boolean",table:{type:{summary:"boolean"},defaultValue:{summary:"true"}}}}},e={args:{showTitle:!0}},r={args:{showTitle:!1}};var s,t,a;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:`{
+  args: {
+    showTitle: true
+  }
+}`,...(a=(t=e.parameters)==null?void 0:t.docs)==null?void 0:a.source}}};var i,n,l;r.parameters={...r.parameters,docs:{...(i=r.parameters)==null?void 0:i.docs,source:{originalSource:`{
+  args: {
+    showTitle: false
+  }
+}`,...(l=(n=r.parameters)==null?void 0:n.docs)==null?void 0:l.source}}};const P=["Default","WithoutTitle"];export{e as Default,r as WithoutTitle,P as __namedExportsOrder,D as default};

package/dist/storybook/storybook-static/assets/DocsRenderer-CFRXHY34-BIza5p8d.js

@@ -0,0 +1,2 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-ChEI-nsM.js","./index-DRjF_FHU.js"])))=>i.map(i=>d[i]);
+import{_ as c}from"./iframe-BZKEX9PA.js";import{R as e,r as p}from"./index-DRjF_FHU.js";import{H as l,A as u,b as h,D as E}from"./index-Cx4362C8.js";import{renderElement as d,unmountElement as x}from"./react-18-2zMCfgG4.js";import"./jsx-runtime-DiklIkkE.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";var D={code:h,a:u,...l},_=class extends p.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(t){let{showException:r}=this.props;r(t)}render(){let{hasError:t}=this.state,{children:r}=this.props;return t?null:e.createElement(e.Fragment,null,r)}},A=class{constructor(){this.render=async(t,r,n)=>{let s={...D,...r==null?void 0:r.components},a=E;return new Promise((m,i)=>{c(async()=>{const{MDXProvider:o}=await import("./index-ChEI-nsM.js");return{MDXProvider:o}},__vite__mapDeps([0,1]),import.meta.url).then(({MDXProvider:o})=>d(e.createElement(_,{showException:i,key:Math.random()},e.createElement(o,{components:s},e.createElement(a,{context:t,docsParameter:r}))),n)).then(()=>m())})},this.unmount=t=>{x(t)}}};export{A as DocsRenderer,D as defaultComponents};

package/dist/storybook/storybook-static/assets/DocsRenderer-CFRXHY34-C9sW_L8N.js

@@ -0,0 +1,2 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-ChEI-nsM.js","./index-DRjF_FHU.js"])))=>i.map(i=>d[i]);
+import{_ as c}from"./iframe-CEK4S1D5.js";import{R as e,r as p}from"./index-DRjF_FHU.js";import{H as l,A as u,b as h,D as E}from"./index-j2F2pkp4.js";import{renderElement as d,unmountElement as x}from"./react-18-2zMCfgG4.js";import"./jsx-runtime-DiklIkkE.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";var D={code:h,a:u,...l},_=class extends p.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(t){let{showException:r}=this.props;r(t)}render(){let{hasError:t}=this.state,{children:r}=this.props;return t?null:e.createElement(e.Fragment,null,r)}},A=class{constructor(){this.render=async(t,r,n)=>{let s={...D,...r==null?void 0:r.components},a=E;return new Promise((m,i)=>{c(async()=>{const{MDXProvider:o}=await import("./index-ChEI-nsM.js");return{MDXProvider:o}},__vite__mapDeps([0,1]),import.meta.url).then(({MDXProvider:o})=>d(e.createElement(_,{showException:i,key:Math.random()},e.createElement(o,{components:s},e.createElement(a,{context:t,docsParameter:r}))),n)).then(()=>m())})},this.unmount=t=>{x(t)}}};export{A as DocsRenderer,D as defaultComponents};

package/dist/storybook/storybook-static/assets/Guide.en-C21zCMX7.js

@@ -0,0 +1,107 @@
+import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as r}from"./index-ChEI-nsM.js";import{M as c,C as t,a as d}from"./index-Cx4362C8.js";import{Default as s}from"./PaymentMethods.stories-oiT2EQiz.js";import{D as a}from"./CustomCheckout.stories-OyfGgjnr.js";import"./index-DRjF_FHU.js";import"./iframe-BZKEX9PA.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./PaymentMethods-B1IKDQ7d.js";import"./useCheckoutContext-w0N5TNgR.js";/* empty css              */import"./CheckoutPage-C21Znq4d.js";import"./CustomerInfo-CYLNdAoo.js";import"./ValidateInput-C71ymd_w.js";import"./DeliveryAddress-BBT_-q56.js";function i(o){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(c,{title:"Documentation/Guide"}),`
+`,e.jsx(n.h1,{id:"getting-started-guide",children:"Getting Started Guide"}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"@clickaroo/checkout-ui"})," is a comprehensive checkout page component library designed for React applications, providing a complete checkout flow solution. The library includes core features such as customer information collection, delivery address management, payment method selection, and integrates seamlessly with payment systems."]}),`
+`,e.jsx(n.p,{children:"This guide will walk you through different ways to integrate the checkout components into your React application, from the simplest all-in-one solution to fully customized implementations."}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note"}),": If you're new to this library, we recommend starting with the ",e.jsx(n.a,{href:"./?path=/docs/documentation-quickstart--docs",children:"Quick Start Guide"})," which covers installation, basic usage with ",e.jsx(n.code,{children:"CheckoutPage"}),", and event callbacks."]}),`
+`]}),`
+`,e.jsx(n.h3,{id:"quick-integration-with-checkoutpage",children:"Quick Integration with CheckoutPage"}),`
+`,e.jsxs(n.p,{children:["The simplest way to integrate is using the ",e.jsx(n.code,{children:"CheckoutPage"})," component, which includes the complete checkout flow. With this single component, you can quickly integrate a full-featured checkout experience."]}),`
+`,e.jsxs(n.p,{children:["👉 See the ",e.jsx(n.a,{href:"./?path=/docs/documentation-quickstart--docs#use-checkout-all-in-one",children:"Use Checkout All in One"})," section in the Quick Start Guide for detailed instructions and examples."]}),`
+`,e.jsx(n.h3,{id:"payment-only-integration",children:"Payment-Only Integration"}),`
+`,e.jsxs(n.p,{children:["If you only need payment functionality and have already collected customer and address information elsewhere in your application, you can use the ",e.jsx(n.code,{children:"PaymentMethods"})," component independently."]}),`
+`,e.jsx(t,{of:s}),`
+`,e.jsx(n.h4,{id:"props",children:"Props"}),`
+`,e.jsx(d,{of:s}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutProvider, PaymentMethods } from '@clickaroo/checkout-ui';
+
+function PaymentOnly() {
+  const cart = [
+    {
+      sku: "TEST001",
+      offerPricePoint: "OPP-TEST001",
+    },
+    {
+      sku: "TEST002",
+      offerPricePoint: "OPP-TEST002",
+    },
+  ];
+
+  return (
+    <CheckoutProvider cart={cart}>
+      <PaymentMethods />
+    </CheckoutProvider>
+  );
+}
+`})}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Important Notes:"}),`
+The `,e.jsx(n.code,{children:"PaymentMethods"})," component must be wrapped in a ",e.jsx(n.code,{children:"CheckoutProvider"}),". See ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english#using-checkoutprovider",children:"CheckoutProvider Props"})," for all available configuration options."]}),`
+`,e.jsx(n.p,{children:"To complete the full payment flow (including order submission), you'll need to use the APIs and hooks provided by the library:"}),`
+`,e.jsxs(n.ol,{children:[`
+`,e.jsxs(n.li,{children:["Update customer and address information using ",e.jsx(n.code,{children:"updateCustomerInfo"})," and ",e.jsx(n.code,{children:"updateDeliveryAddress"})," from ",e.jsx(n.code,{children:"useCheckoutContext"})," hook"]}),`
+`,e.jsxs(n.li,{children:["Use the ",e.jsx(n.code,{children:"useOrderSubmission"})," hook to handle order submission"]}),`
+`,e.jsxs(n.li,{children:["Create a custom submit button that calls ",e.jsx(n.code,{children:"submitOrder()"})," from the ",e.jsx(n.code,{children:"useOrderSubmission"})," hook when clicked"]}),`
+`]}),`
+`,e.jsxs(n.p,{children:["For a complete implementation example, see the ",e.jsx(n.a,{href:"./?path=/docs/documentation-apis--docs",children:"APIs documentation"})," section on ",e.jsx(n.code,{children:"useOrderSubmission"}),"."]}),`
+`,e.jsx(n.h3,{id:"custom-checkout",children:"Custom Checkout"}),`
+`,e.jsx(n.p,{children:"You can build a custom checkout page by mixing and matching the library's built-in components with your own custom components. This gives you full control over the layout, styling, and user experience while leveraging the library's functionality."}),`
+`,e.jsx(t,{of:a}),`
+`,e.jsxs(n.p,{children:["You can replace some built-in components with your own custom implementations, but ",e.jsxs(n.strong,{children:[e.jsx(n.code,{children:"PaymentMethods"})," must always be used from the library"]})," as it contains critical payment logic that cannot be customized."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { 
+  CheckoutProvider, 
+  PaymentMethods,
+  useCheckoutContext,
+  useOrderSubmission
+} from '@clickaroo/checkout-ui';
+
+function CustomCheckout() {
+  const cart = [{ sku: "TEST001", offerPricePoint: "OPP-TEST001" }];
+
+  return (
+    // All components must be wrapped in CheckoutProvider
+    <CheckoutProvider cart={cart}>
+      <MyCustomCustomerInfo />
+      <MyCustomDeliveryAddress />
+      <PaymentMethods /> {/* Required - cannot be customized */}
+      <MyCustomSubmitButton />
+    </CheckoutProvider>
+  );
+}
+
+// Use hooks to build custom components
+function MyCustomCustomerInfo() {
+  const { customerInfo, updateCustomerInfo } = useCheckoutContext();
+  // use hook to update form data
+  updateCustomerInfo({ firstName: 'xxx', lastName: 'xxx', ...})
+}
+
+function MyCustomDeliveryAddress() {
+  const { deliveryAddress, updateDeliveryAddress } = useCheckoutContext();
+  // Your custom form implementation
+}
+
+function MyCustomSubmitButton() {
+  const { isFormValid } = useCheckoutContext();
+  // use hook to handle order submission
+  const { isSubmitting, submitOrder } = useOrderSubmission();
+  // Your custom button implementation
+}
+`})}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Important Notes:"}),"  All components must be wrapped in CheckoutProvider. See ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english#using-checkoutprovider",children:"CheckoutProvider Props"})," for all available configuration options."]}),`
+`,e.jsxs(n.p,{children:["For a complete implementation example, see the ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english",children:"CustomCheckout documentation"}),"."]}),`
+`,e.jsx(n.h3,{id:"apis-and-hooks",children:"APIs and Hooks"}),`
+`,e.jsx(n.p,{children:"As mentioned above, the component library provides HTTP APIs and React Hooks for more granular control and advanced use cases."}),`
+`,e.jsx(n.h4,{id:"http-apis",children:"HTTP APIs"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"getPricePointInfo"})})," - Get price point information (supports single or multiple price points)"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"createOrder"})})," - Create an order with the provided order data"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"getOrderDetail"})})," - Get detailed information about an order by order code"]}),`
+`]}),`
+`,e.jsx(n.h4,{id:"react-hooks",children:"React Hooks"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useCheckoutContext"})})," - Access checkout state and update functions (customer info, delivery address, form validation)"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useOrderSubmission"})})," - Handle order submission with loading states and error handling"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useOrderDetail"})})," - Fetch order details"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"usePricePointInfo"})})," - Get price point information"]}),`
+`]}),`
+`,e.jsxs(n.p,{children:["For detailed API documentation and hook usage examples, see the ",e.jsx(n.a,{href:"./?path=/docs/documentation-apis--docs",children:"APIs Documentation"}),"."]})]})}function I(o={}){const{wrapper:n}={...r(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(i,{...o})}):i(o)}export{I as default};