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

package/dist/storybook/storybook-static/assets/Guide.en-BRVwtDXj.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-D66ljFJA.js";import{Default as s}from"./PaymentMethods.stories-CcjSRFbb.js";import{D as a}from"./CustomCheckout.stories-BrF5j7zs.js";import"./index-DRjF_FHU.js";import"./iframe-CakT_Hx-.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./PaymentMethods-BFtlMopq.js";import"./useCheckoutContext-C7KjDyWW.js";/* empty css              */import"./CheckoutPage-CDW7SRyI.js";import"./CustomerInfo-CPNuEjrH.js";import"./ValidateInput-BKNagaQv.js";import"./DeliveryAddress-CeuByf4d.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};

package/dist/storybook/storybook-static/assets/Guide.en-Boc44Lax.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-3vMs57rT.js";import{Default as s}from"./PaymentMethods.stories-U-xbCFtF.js";import{D as a}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"./PaymentMethods-DmV3o0ow.js";import"./useCheckoutContext-BW2h13W8.js";/* empty css              */import"./CheckoutPage-DSLcTghb.js";import"./CustomerInfo-DShSrjMR.js";import"./ValidateInput-CECRKp4c.js";import"./DeliveryAddress-DY5lFnTv.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};

package/dist/storybook/storybook-static/assets/Guide.en-CKA244dX.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-DnrKlQ76.js";import{Default as s}from"./PaymentMethods.stories-Dyg3R8Cs.js";import{D as a}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"./PaymentMethods-DxorWSOl.js";import"./useCheckoutContext-CroxIBFh.js";/* empty css              */import"./CheckoutPage-DFb28rrp.js";import"./CustomerInfo-BMTfZ9z3.js";import"./ValidateInput-BMZhq5zE.js";import"./DeliveryAddress-DOxyPw17.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};

package/dist/storybook/storybook-static/assets/Guide.en-CiR7CrYZ.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-LRKEu_dQ.js";import{Default as s}from"./PaymentMethods.stories-pOuLDPwE.js";import{D as a}from"./CustomCheckout.stories-CKQKzMq0.js";import"./index-DRjF_FHU.js";import"./iframe-Ce3kgeV4.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./PaymentMethods-BNEEARzu.js";import"./useCheckoutContext-B8tsk5b5.js";/* empty css              */import"./CheckoutPage-BsnzMxJk.js";import"./CustomerInfo-CTx1dFS3.js";import"./ValidateInput-Cl2O4HCX.js";import"./DeliveryAddress-X81XGbKD.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};

package/dist/storybook/storybook-static/assets/Guide.en-Citkzdg9.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-Bz3Q1Yw_.js";import{Default as s}from"./PaymentMethods.stories-DJpOtGJg.js";import{D as a}from"./CustomCheckout.stories-rMIVoUs4.js";import"./index-DRjF_FHU.js";import"./iframe-eGyOKkka.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./PaymentMethods-CBXk2f9N.js";import"./useCheckoutContext-L3zhltsm.js";/* empty css              */import"./CheckoutPage-DvHYA1Jd.js";import"./CustomerInfo-BqCSWi4I.js";import"./ValidateInput-np1-zwvJ.js";import"./DeliveryAddress-TRtlNz2v.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};