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

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

@@ -1,211 +0,0 @@
-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-CZFGp9Su.js";import{C as d,D as c}from"./CustomCheckout.stories-F2GZKkIG.js";import"./index-DRjF_FHU.js";import"./iframe-PThBYPHV.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./useCheckoutContext-DuJ1Ep0-.js";/* empty css              */import"./CheckoutPage-CrHN6Fcv.js";import"./CustomerInfo-D3WHpN32.js";import"./ValidateInput-DcnOO9py.js";import"./DeliveryAddress-Lfanl1PO.js";import"./PaymentMethods-e9HqQtxN.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.en-adeOUUPd.js

@@ -1,211 +0,0 @@
-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.en-uXQeih6h.js

@@ -1,211 +0,0 @@
-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-3vMs57rT.js";import{C as d,D as c}from"./CustomCheckout.stories-B8CnjGCn.js";import"./index-DRjF_FHU.js";import"./iframe-DWFwLXCc.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./useCheckoutContext-BW2h13W8.js";/* empty css              */import"./CheckoutPage-DSLcTghb.js";import"./CustomerInfo-DShSrjMR.js";import"./ValidateInput-CECRKp4c.js";import"./DeliveryAddress-DY5lFnTv.js";import"./PaymentMethods-DmV3o0ow.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};