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

package/dist/storybook/storybook-static/assets/CustomCheckout.en-BvF7SmOy.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-DnrKlQ76.js";import{C as d,D as c}from"./CustomCheckout.stories-BQkpNbox.js";import"./index-DRjF_FHU.js";import"./iframe-SJLFWhX6.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./useCheckoutContext-CroxIBFh.js";/* empty css              */import"./CheckoutPage-DFb28rrp.js";import"./CustomerInfo-BMTfZ9z3.js";import"./ValidateInput-BMZhq5zE.js";import"./DeliveryAddress-DOxyPw17.js";import"./PaymentMethods-DxorWSOl.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-CckpRGsp.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-CkNSuRJg.js";import{C as d,D as c}from"./CustomCheckout.stories-V2NHLbZo.js";import"./index-DRjF_FHU.js";import"./iframe-DsSsblW_.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./useCheckoutContext-C6u4Rp5U.js";/* empty css              */import"./CheckoutPage-DYMMhAMX.js";import"./CustomerInfo-Cp0u57C5.js";import"./ValidateInput-sZgX3GCF.js";import"./DeliveryAddress-CD42v0od.js";import"./PaymentMethods-BnPZRrAs.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-D80ZpldF.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-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};