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

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

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

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

@@ -1,107 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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};

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

@@ -1,107 +0,0 @@
-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-CkNSuRJg.js";import{Default as s}from"./PaymentMethods.stories-ChiL9TJn.js";import{D as a}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"./PaymentMethods-BnPZRrAs.js";import"./useCheckoutContext-C6u4Rp5U.js";/* empty css              */import"./CheckoutPage-DYMMhAMX.js";import"./CustomerInfo-Cp0u57C5.js";import"./ValidateInput-sZgX3GCF.js";import"./DeliveryAddress-CD42v0od.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-Dn9xb9YI.js

@@ -1,107 +0,0 @@
-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-DoDFfets.js";import{Default as s}from"./PaymentMethods.stories-6fZvfvMO.js";import{D as a}from"./CustomCheckout.stories-ZCeqtMGJ.js";import"./index-DRjF_FHU.js";import"./iframe-Crv4raYy.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./PaymentMethods-Buladk2O.js";import"./useCheckoutContext-3YTrU8Qh.js";/* empty css              */import"./CheckoutPage-DgZ1RopD.js";import"./CustomerInfo-mKAI6gWW.js";import"./ValidateInput-CXYuXafK.js";import"./DeliveryAddress-DaRy4l-D.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};