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

package/dist/storybook/storybook-static/assets/QuickStart.en-B2goyY4Q.js

@@ -1,136 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as t}from"./index-ChEI-nsM.js";import{M as i,C as s}from"./index-CkNSuRJg.js";import{D as c}from"./CheckoutPage.stories-DAo0u2QI.js";import"./index-DRjF_FHU.js";import"./iframe-DsSsblW_.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./useCheckoutContext-C6u4Rp5U.js";import"./CheckoutPage-DYMMhAMX.js";import"./CustomerInfo-Cp0u57C5.js";import"./ValidateInput-sZgX3GCF.js";import"./DeliveryAddress-CD42v0od.js";import"./PaymentMethods-BnPZRrAs.js";function r(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",...t(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Documentation/QuickStart"}),`
-`,e.jsx(n.h1,{id:"overview",children:"Overview"}),`
-`,e.jsxs(n.p,{children:["This component library is designed for the ",e.jsx(n.strong,{children:"checkout page"})," in your e-commerce flow. Here's how it fits into a typical purchase journey:"]}),`
-`,e.jsxs(n.ol,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Product/Landing Page"}),": Users browse products on your product or landing page. You should provide a button or link that navigates users to the checkout page when they're ready to purchase."]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Checkout Page"}),": This is where you integrate this component library. Users can submit their purchase information here."]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Finish Page"}),": After successful payment, redirect users to a finish page to confirm their order completion."]}),`
-`]}),`
-`,e.jsx(n.h1,{id:"quick-start",children:"Quick Start"}),`
-`,e.jsx(n.p,{children:"The checkout component handles the entire checkout process including customer information collection, delivery address management, and payment processing."}),`
-`,e.jsx(n.p,{children:"In this guide, you will learn how to quickly integrate the checkout components into your React application. For more detailed information and advanced usage, check out the Guide section."}),`
-`,e.jsx(n.h3,{id:"installation",children:"Installation"}),`
-`,e.jsx(n.p,{children:"Install using your preferred package manager:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-bash",children:`# pnpm (recommended)
-pnpm add @clickaroo/checkout-ui
-
-# or npm
-npm install @clickaroo/checkout-ui
-
-# or yarn
-yarn add @clickaroo/checkout-ui
-`})}),`
-`,e.jsx(n.h4,{id:"peer-dependencies",children:"Peer Dependencies"}),`
-`,e.jsxs(n.p,{children:["This library requires ",e.jsx(n.code,{children:"react"})," (>= 16.8.0) as peer dependencies."]}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"npm 7+"}),": Will automatically install them"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"npm 6 / pnpm"}),": You may need to install them manually if you see warnings"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"yarn v2+"}),": Will error if they are missing"]}),`
-`]}),`
-`,e.jsx(n.p,{children:"Most React projects already have these installed, so you typically don't need to do anything extra."}),`
-`,e.jsx(n.h3,{id:"token-parameter",children:"Token Parameter"}),`
-`,e.jsxs(n.p,{children:["The component library requires a ",e.jsx(n.code,{children:"clro_token"})," parameter to identify the checkout session. This token should be provided in the URL query parameter when users navigate to the checkout page:"]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{children:`https://your-checkout-page.com?clro_token=YOUR_TOKEN_HERE
-`})}),`
-`,e.jsx(n.p,{children:"The token will be automatically extracted from the URL and stored in localStorage for subsequent requests."}),`
-`,e.jsx(n.h3,{id:"use-checkout-all-in-one",children:"Use Checkout All in One"}),`
-`,e.jsxs(n.p,{children:["The simplest way is to use the ",e.jsx(n.code,{children:"CheckoutPage"})," component directly, which includes the complete checkout flow."]}),`
-`,e.jsx(s,{of:c}),`
-`,e.jsxs(n.blockquote,{children:[`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note"}),": If you need Google address suggestions for the address field, you must provide a ",e.jsx(n.code,{children:"googleApiKey"})," that meets the ",e.jsx(n.a,{href:"https://developers.google.com/maps/documentation/places/web-service/get-api-key?hl=en&setupProd=prerequisites",rel:"nofollow",children:"google places api requirements"}),"."]}),`
-`]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutPage } from '@clickaroo/checkout-ui';
-
-function MyCheckout() {
-  const cart = [
-   {
-      sku: "TEST001",
-      offerPricePoint: "OPP-TEST001",
-    },
-    {
-      sku: "TEST002",
-      offerPricePoint: "OPP-TEST002",
-    },
-  ];
-
-  return <CheckoutPage cart={cart} googleApiKey={YOUR_GOOGLE_API_KEY} />;
-}
-`})}),`
-`,e.jsxs(n.blockquote,{children:[`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Tips"}),`:
-Each object in the `,e.jsx(n.code,{children:"cart"})," array only needs to contain the two required fields: ",e.jsx(n.code,{children:"sku"})," and ",e.jsx(n.code,{children:"offerPricePoint"}),". However, you can also pass other optional product information fields (such as ",e.jsx(n.code,{children:"title"}),", ",e.jsx(n.code,{children:"price"}),", ",e.jsx(n.code,{children:"image"}),", etc.), which will be saved to the order's metadata."]}),`
-`]}),`
-`,e.jsxs(n.p,{children:["You can read more about all the possible configuration options in ",e.jsx(n.a,{href:"./?path=/docs/components-checkoutpage--checkoutpage-english",children:"CheckoutPage Documentation"}),"."]}),`
-`,e.jsx(n.h3,{id:"event-callbacks",children:"Event Callbacks"}),`
-`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"CheckoutPage"})," component provides several event callbacks that allow you to monitor and respond to different stages of the checkout process. These callbacks enable you to track user behavior, handle loading states, and implement custom logic."]}),`
-`,e.jsx(n.p,{children:"Here's a complete example that includes all event callbacks:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutPage } from '@clickaroo/checkout-ui';
-import { useNavigate } from 'react-router-dom'; // or your routing library
-
-function MyCheckout() {
-  const navigate = useNavigate();
-  
-  const cart = [
-    {
-      sku: "TEST001",
-      offerPricePoint: "OPP-TEST001",
-      title: "Product 1",
-      price: 99.99,
-    },
-  ];
-
-  return (
-    <CheckoutPage
-      cart={cart}
-      googleApiKey={YOUR_GOOGLE_API_KEY}
-      onCheckoutInit={() => {
-        console.log('Checkout initialized');
-      }}
-      onPaymentInfoComplete={(cart, totalAmount) => {
-        console.log('Payment info complete');
-      }}
-      onOrderSubmit={(cart, totalAmount) => {
-        console.log('Order submitted');
-      }}
-      onOrderSuccess={(orderCode, tradeCode) => {
-        console.log('Order successful:', orderCode);
-        // Redirect to finish page
-        navigate(\`/finish/\${orderCode}\`);
-      }}
-    />
-  );
-}
-`})}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Key Points:"})}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onCheckoutInit"}),": Triggered when the checkout page loads"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onPaymentInfoComplete"}),": Triggered when the payment form is valid"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onOrderSubmit"}),": Triggered when user clicks submit"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onOrderSuccess"}),": Triggered when order is successfully created"]}),`
-`]}),`
-`,e.jsx(n.h3,{id:"display-order-details-on-finish-page",children:"Display Order Details on Finish Page"}),`
-`,e.jsxs(n.p,{children:["After the user successfully completes the payment and is redirected to the finish page, you can use the ",e.jsx(n.code,{children:"useOrderDetail"})," hook to display order information:"]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useOrderDetail } from '@clickaroo/checkout-ui';
-import { useParams } from 'react-router-dom';
-
-function OrderCompletePage() {
-  const { orderCode } = useParams();
-  const { orderDetail, loading, error } = useOrderDetail(orderCode || '');
-
-  if (loading) return <div>Loading order details...</div>;
-  if (error) return <div>Error: {error}</div>;
-  if (!orderDetail) return <div>Order not found</div>;
-
-  return (
-    <div>
-      <h1>Order Complete!</h1>
-      <p>Order Code: {orderDetail.order_code}</p>
-      <p>Customer Information: {orderDetail.customer.email} {orderDetail.customer.phone}</p>
-      <p>Total: {orderDetail.total_amount}</p>
-      <p>Product Detail: {orderDetail.metadata}</p>
-      {/* Display more order details as needed */}
-    </div>
-  );
-}
-`})}),`
-`,e.jsxs(n.p,{children:["For more advanced usage, check out the ",e.jsx(n.a,{href:"./?path=/docs/documentation-apis--docs",children:"APIs documentation"}),"."]})]})}function b(o={}){const{wrapper:n}={...t(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(r,{...o})}):r(o)}export{b as default};

package/dist/storybook/storybook-static/assets/QuickStart.en-Bj-7Slt2.js

@@ -1,136 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as t}from"./index-ChEI-nsM.js";import{M as i,C as s}from"./index-Cx4362C8.js";import{D as c}from"./CheckoutPage.stories-G0sHl94m.js";import"./index-DRjF_FHU.js";import"./iframe-BZKEX9PA.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./useCheckoutContext-w0N5TNgR.js";import"./CheckoutPage-C21Znq4d.js";import"./CustomerInfo-CYLNdAoo.js";import"./ValidateInput-C71ymd_w.js";import"./DeliveryAddress-BBT_-q56.js";import"./PaymentMethods-B1IKDQ7d.js";function r(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",...t(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Documentation/QuickStart"}),`
-`,e.jsx(n.h1,{id:"overview",children:"Overview"}),`
-`,e.jsxs(n.p,{children:["This component library is designed for the ",e.jsx(n.strong,{children:"checkout page"})," in your e-commerce flow. Here's how it fits into a typical purchase journey:"]}),`
-`,e.jsxs(n.ol,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Product/Landing Page"}),": Users browse products on your product or landing page. You should provide a button or link that navigates users to the checkout page when they're ready to purchase."]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Checkout Page"}),": This is where you integrate this component library. Users can submit their purchase information here."]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Finish Page"}),": After successful payment, redirect users to a finish page to confirm their order completion."]}),`
-`]}),`
-`,e.jsx(n.h1,{id:"quick-start",children:"Quick Start"}),`
-`,e.jsx(n.p,{children:"The checkout component handles the entire checkout process including customer information collection, delivery address management, and payment processing."}),`
-`,e.jsx(n.p,{children:"In this guide, you will learn how to quickly integrate the checkout components into your React application. For more detailed information and advanced usage, check out the Guide section."}),`
-`,e.jsx(n.h3,{id:"installation",children:"Installation"}),`
-`,e.jsx(n.p,{children:"Install using your preferred package manager:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-bash",children:`# pnpm (recommended)
-pnpm add @clickaroo/checkout-ui
-
-# or npm
-npm install @clickaroo/checkout-ui
-
-# or yarn
-yarn add @clickaroo/checkout-ui
-`})}),`
-`,e.jsx(n.h4,{id:"peer-dependencies",children:"Peer Dependencies"}),`
-`,e.jsxs(n.p,{children:["This library requires ",e.jsx(n.code,{children:"react"})," (>= 16.8.0) as peer dependencies."]}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"npm 7+"}),": Will automatically install them"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"npm 6 / pnpm"}),": You may need to install them manually if you see warnings"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"yarn v2+"}),": Will error if they are missing"]}),`
-`]}),`
-`,e.jsx(n.p,{children:"Most React projects already have these installed, so you typically don't need to do anything extra."}),`
-`,e.jsx(n.h3,{id:"token-parameter",children:"Token Parameter"}),`
-`,e.jsxs(n.p,{children:["The component library requires a ",e.jsx(n.code,{children:"clro_token"})," parameter to identify the checkout session. This token should be provided in the URL query parameter when users navigate to the checkout page:"]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{children:`https://your-checkout-page.com?clro_token=YOUR_TOKEN_HERE
-`})}),`
-`,e.jsx(n.p,{children:"The token will be automatically extracted from the URL and stored in localStorage for subsequent requests."}),`
-`,e.jsx(n.h3,{id:"use-checkout-all-in-one",children:"Use Checkout All in One"}),`
-`,e.jsxs(n.p,{children:["The simplest way is to use the ",e.jsx(n.code,{children:"CheckoutPage"})," component directly, which includes the complete checkout flow."]}),`
-`,e.jsx(s,{of:c}),`
-`,e.jsxs(n.blockquote,{children:[`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note"}),": If you need Google address suggestions for the address field, you must provide a ",e.jsx(n.code,{children:"googleApiKey"})," that meets the ",e.jsx(n.a,{href:"https://developers.google.com/maps/documentation/places/web-service/get-api-key?hl=en&setupProd=prerequisites",rel:"nofollow",children:"google places api requirements"}),"."]}),`
-`]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutPage } from '@clickaroo/checkout-ui';
-
-function MyCheckout() {
-  const cart = [
-   {
-      sku: "TEST001",
-      offerPricePoint: "OPP-TEST001",
-    },
-    {
-      sku: "TEST002",
-      offerPricePoint: "OPP-TEST002",
-    },
-  ];
-
-  return <CheckoutPage cart={cart} googleApiKey={YOUR_GOOGLE_API_KEY} />;
-}
-`})}),`
-`,e.jsxs(n.blockquote,{children:[`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Tips"}),`:
-Each object in the `,e.jsx(n.code,{children:"cart"})," array only needs to contain the two required fields: ",e.jsx(n.code,{children:"sku"})," and ",e.jsx(n.code,{children:"offerPricePoint"}),". However, you can also pass other optional product information fields (such as ",e.jsx(n.code,{children:"title"}),", ",e.jsx(n.code,{children:"price"}),", ",e.jsx(n.code,{children:"image"}),", etc.), which will be saved to the order's metadata."]}),`
-`]}),`
-`,e.jsxs(n.p,{children:["You can read more about all the possible configuration options in ",e.jsx(n.a,{href:"./?path=/docs/components-checkoutpage--checkoutpage-english",children:"CheckoutPage Documentation"}),"."]}),`
-`,e.jsx(n.h3,{id:"event-callbacks",children:"Event Callbacks"}),`
-`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"CheckoutPage"})," component provides several event callbacks that allow you to monitor and respond to different stages of the checkout process. These callbacks enable you to track user behavior, handle loading states, and implement custom logic."]}),`
-`,e.jsx(n.p,{children:"Here's a complete example that includes all event callbacks:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutPage } from '@clickaroo/checkout-ui';
-import { useNavigate } from 'react-router-dom'; // or your routing library
-
-function MyCheckout() {
-  const navigate = useNavigate();
-  
-  const cart = [
-    {
-      sku: "TEST001",
-      offerPricePoint: "OPP-TEST001",
-      title: "Product 1",
-      price: 99.99,
-    },
-  ];
-
-  return (
-    <CheckoutPage
-      cart={cart}
-      googleApiKey={YOUR_GOOGLE_API_KEY}
-      onCheckoutInit={() => {
-        console.log('Checkout initialized');
-      }}
-      onPaymentInfoComplete={(cart, totalAmount) => {
-        console.log('Payment info complete');
-      }}
-      onOrderSubmit={(cart, totalAmount) => {
-        console.log('Order submitted');
-      }}
-      onOrderSuccess={(orderCode, tradeCode) => {
-        console.log('Order successful:', orderCode);
-        // Redirect to finish page
-        navigate(\`/finish/\${orderCode}\`);
-      }}
-    />
-  );
-}
-`})}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Key Points:"})}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onCheckoutInit"}),": Triggered when the checkout page loads"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onPaymentInfoComplete"}),": Triggered when the payment form is valid"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onOrderSubmit"}),": Triggered when user clicks submit"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onOrderSuccess"}),": Triggered when order is successfully created"]}),`
-`]}),`
-`,e.jsx(n.h3,{id:"display-order-details-on-finish-page",children:"Display Order Details on Finish Page"}),`
-`,e.jsxs(n.p,{children:["After the user successfully completes the payment and is redirected to the finish page, you can use the ",e.jsx(n.code,{children:"useOrderDetail"})," hook to display order information:"]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useOrderDetail } from '@clickaroo/checkout-ui';
-import { useParams } from 'react-router-dom';
-
-function OrderCompletePage() {
-  const { orderCode } = useParams();
-  const { orderDetail, loading, error } = useOrderDetail(orderCode || '');
-
-  if (loading) return <div>Loading order details...</div>;
-  if (error) return <div>Error: {error}</div>;
-  if (!orderDetail) return <div>Order not found</div>;
-
-  return (
-    <div>
-      <h1>Order Complete!</h1>
-      <p>Order Code: {orderDetail.order_code}</p>
-      <p>Customer Information: {orderDetail.customer.email} {orderDetail.customer.phone}</p>
-      <p>Total: {orderDetail.total_amount}</p>
-      <p>Product Detail: {orderDetail.metadata}</p>
-      {/* Display more order details as needed */}
-    </div>
-  );
-}
-`})}),`
-`,e.jsxs(n.p,{children:["For more advanced usage, check out the ",e.jsx(n.a,{href:"./?path=/docs/documentation-apis--docs",children:"APIs documentation"}),"."]})]})}function b(o={}){const{wrapper:n}={...t(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(r,{...o})}):r(o)}export{b as default};

package/dist/storybook/storybook-static/assets/QuickStart.en-Bz56Z2wW.js

@@ -1,136 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as t}from"./index-ChEI-nsM.js";import{M as i,C as s}from"./index-BlPVJQpb.js";import{D as c}from"./CheckoutPage.stories-BahbUp4O.js";import"./index-DRjF_FHU.js";import"./iframe-CueR_wS4.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./useCheckoutContext-BXtGY5u3.js";import"./CheckoutPage-d8MZfjpI.js";import"./CustomerInfo-BwyY9803.js";import"./ValidateInput-LNzX4jJP.js";import"./DeliveryAddress-QAGxLlLf.js";import"./PaymentMethods-afz1CTO5.js";function r(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",...t(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Documentation/QuickStart"}),`
-`,e.jsx(n.h1,{id:"overview",children:"Overview"}),`
-`,e.jsxs(n.p,{children:["This component library is designed for the ",e.jsx(n.strong,{children:"checkout page"})," in your e-commerce flow. Here's how it fits into a typical purchase journey:"]}),`
-`,e.jsxs(n.ol,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Product/Landing Page"}),": Users browse products on your product or landing page. You should provide a button or link that navigates users to the checkout page when they're ready to purchase."]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Checkout Page"}),": This is where you integrate this component library. Users can submit their purchase information here."]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Finish Page"}),": After successful payment, redirect users to a finish page to confirm their order completion."]}),`
-`]}),`
-`,e.jsx(n.h1,{id:"quick-start",children:"Quick Start"}),`
-`,e.jsx(n.p,{children:"The checkout component handles the entire checkout process including customer information collection, delivery address management, and payment processing."}),`
-`,e.jsx(n.p,{children:"In this guide, you will learn how to quickly integrate the checkout components into your React application. For more detailed information and advanced usage, check out the Guide section."}),`
-`,e.jsx(n.h3,{id:"installation",children:"Installation"}),`
-`,e.jsx(n.p,{children:"Install using your preferred package manager:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-bash",children:`# pnpm (recommended)
-pnpm add @clickaroo/checkout-ui
-
-# or npm
-npm install @clickaroo/checkout-ui
-
-# or yarn
-yarn add @clickaroo/checkout-ui
-`})}),`
-`,e.jsx(n.h4,{id:"peer-dependencies",children:"Peer Dependencies"}),`
-`,e.jsxs(n.p,{children:["This library requires ",e.jsx(n.code,{children:"react"})," (>= 16.8.0) as peer dependencies."]}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"npm 7+"}),": Will automatically install them"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"npm 6 / pnpm"}),": You may need to install them manually if you see warnings"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"yarn v2+"}),": Will error if they are missing"]}),`
-`]}),`
-`,e.jsx(n.p,{children:"Most React projects already have these installed, so you typically don't need to do anything extra."}),`
-`,e.jsx(n.h3,{id:"token-parameter",children:"Token Parameter"}),`
-`,e.jsxs(n.p,{children:["The component library requires a ",e.jsx(n.code,{children:"clro_token"})," parameter to identify the checkout session. This token should be provided in the URL query parameter when users navigate to the checkout page:"]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{children:`https://your-checkout-page.com?clro_token=YOUR_TOKEN_HERE
-`})}),`
-`,e.jsx(n.p,{children:"The token will be automatically extracted from the URL and stored in localStorage for subsequent requests."}),`
-`,e.jsx(n.h3,{id:"use-checkout-all-in-one",children:"Use Checkout All in One"}),`
-`,e.jsxs(n.p,{children:["The simplest way is to use the ",e.jsx(n.code,{children:"CheckoutPage"})," component directly, which includes the complete checkout flow."]}),`
-`,e.jsx(s,{of:c}),`
-`,e.jsxs(n.blockquote,{children:[`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note"}),": If you need Google address suggestions for the address field, you must provide a ",e.jsx(n.code,{children:"googleApiKey"})," that meets the ",e.jsx(n.a,{href:"https://developers.google.com/maps/documentation/places/web-service/get-api-key?hl=en&setupProd=prerequisites",rel:"nofollow",children:"google places api requirements"}),"."]}),`
-`]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutPage } from '@clickaroo/checkout-ui';
-
-function MyCheckout() {
-  const cart = [
-   {
-      sku: "TEST001",
-      offerPricePoint: "OPP-TEST001",
-    },
-    {
-      sku: "TEST002",
-      offerPricePoint: "OPP-TEST002",
-    },
-  ];
-
-  return <CheckoutPage cart={cart} googleApiKey={YOUR_GOOGLE_API_KEY} />;
-}
-`})}),`
-`,e.jsxs(n.blockquote,{children:[`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Tips"}),`:
-Each object in the `,e.jsx(n.code,{children:"cart"})," array only needs to contain the two required fields: ",e.jsx(n.code,{children:"sku"})," and ",e.jsx(n.code,{children:"offerPricePoint"}),". However, you can also pass other optional product information fields (such as ",e.jsx(n.code,{children:"title"}),", ",e.jsx(n.code,{children:"price"}),", ",e.jsx(n.code,{children:"image"}),", etc.), which will be saved to the order's metadata."]}),`
-`]}),`
-`,e.jsxs(n.p,{children:["You can read more about all the possible configuration options in ",e.jsx(n.a,{href:"./?path=/docs/components-checkoutpage--checkoutpage-english",children:"CheckoutPage Documentation"}),"."]}),`
-`,e.jsx(n.h3,{id:"event-callbacks",children:"Event Callbacks"}),`
-`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"CheckoutPage"})," component provides several event callbacks that allow you to monitor and respond to different stages of the checkout process. These callbacks enable you to track user behavior, handle loading states, and implement custom logic."]}),`
-`,e.jsx(n.p,{children:"Here's a complete example that includes all event callbacks:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutPage } from '@clickaroo/checkout-ui';
-import { useNavigate } from 'react-router-dom'; // or your routing library
-
-function MyCheckout() {
-  const navigate = useNavigate();
-  
-  const cart = [
-    {
-      sku: "TEST001",
-      offerPricePoint: "OPP-TEST001",
-      title: "Product 1",
-      price: 99.99,
-    },
-  ];
-
-  return (
-    <CheckoutPage
-      cart={cart}
-      googleApiKey={YOUR_GOOGLE_API_KEY}
-      onCheckoutInit={() => {
-        console.log('Checkout initialized');
-      }}
-      onPaymentInfoComplete={(cart, totalAmount) => {
-        console.log('Payment info complete');
-      }}
-      onOrderSubmit={(cart, totalAmount) => {
-        console.log('Order submitted');
-      }}
-      onOrderSuccess={(orderCode, tradeCode) => {
-        console.log('Order successful:', orderCode);
-        // Redirect to finish page
-        navigate(\`/finish/\${orderCode}\`);
-      }}
-    />
-  );
-}
-`})}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Key Points:"})}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onCheckoutInit"}),": Triggered when the checkout page loads"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onPaymentInfoComplete"}),": Triggered when the payment form is valid"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onOrderSubmit"}),": Triggered when user clicks submit"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onOrderSuccess"}),": Triggered when order is successfully created"]}),`
-`]}),`
-`,e.jsx(n.h3,{id:"display-order-details-on-finish-page",children:"Display Order Details on Finish Page"}),`
-`,e.jsxs(n.p,{children:["After the user successfully completes the payment and is redirected to the finish page, you can use the ",e.jsx(n.code,{children:"useOrderDetail"})," hook to display order information:"]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useOrderDetail } from '@clickaroo/checkout-ui';
-import { useParams } from 'react-router-dom';
-
-function OrderCompletePage() {
-  const { orderCode } = useParams();
-  const { orderDetail, loading, error } = useOrderDetail(orderCode || '');
-
-  if (loading) return <div>Loading order details...</div>;
-  if (error) return <div>Error: {error}</div>;
-  if (!orderDetail) return <div>Order not found</div>;
-
-  return (
-    <div>
-      <h1>Order Complete!</h1>
-      <p>Order Code: {orderDetail.order_code}</p>
-      <p>Customer Information: {orderDetail.customer.email} {orderDetail.customer.phone}</p>
-      <p>Total: {orderDetail.total_amount}</p>
-      <p>Product Detail: {orderDetail.metadata}</p>
-      {/* Display more order details as needed */}
-    </div>
-  );
-}
-`})}),`
-`,e.jsxs(n.p,{children:["For more advanced usage, check out the ",e.jsx(n.a,{href:"./?path=/docs/documentation-apis--docs",children:"APIs documentation"}),"."]})]})}function b(o={}){const{wrapper:n}={...t(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(r,{...o})}):r(o)}export{b as default};

package/dist/storybook/storybook-static/assets/QuickStart.en-C1fKNHfm.js

@@ -1,136 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as t}from"./index-ChEI-nsM.js";import{M as i,C as s}from"./index-3vMs57rT.js";import{D as c}from"./CheckoutPage.stories-BRP4VrvR.js";import"./index-DRjF_FHU.js";import"./iframe-DWFwLXCc.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./useCheckoutContext-BW2h13W8.js";import"./CheckoutPage-DSLcTghb.js";import"./CustomerInfo-DShSrjMR.js";import"./ValidateInput-CECRKp4c.js";import"./DeliveryAddress-DY5lFnTv.js";import"./PaymentMethods-DmV3o0ow.js";function r(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",...t(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Documentation/QuickStart"}),`
-`,e.jsx(n.h1,{id:"overview",children:"Overview"}),`
-`,e.jsxs(n.p,{children:["This component library is designed for the ",e.jsx(n.strong,{children:"checkout page"})," in your e-commerce flow. Here's how it fits into a typical purchase journey:"]}),`
-`,e.jsxs(n.ol,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Product/Landing Page"}),": Users browse products on your product or landing page. You should provide a button or link that navigates users to the checkout page when they're ready to purchase."]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Checkout Page"}),": This is where you integrate this component library. Users can submit their purchase information here."]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Finish Page"}),": After successful payment, redirect users to a finish page to confirm their order completion."]}),`
-`]}),`
-`,e.jsx(n.h1,{id:"quick-start",children:"Quick Start"}),`
-`,e.jsx(n.p,{children:"The checkout component handles the entire checkout process including customer information collection, delivery address management, and payment processing."}),`
-`,e.jsx(n.p,{children:"In this guide, you will learn how to quickly integrate the checkout components into your React application. For more detailed information and advanced usage, check out the Guide section."}),`
-`,e.jsx(n.h3,{id:"installation",children:"Installation"}),`
-`,e.jsx(n.p,{children:"Install using your preferred package manager:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-bash",children:`# pnpm (recommended)
-pnpm add @clickaroo/checkout-ui
-
-# or npm
-npm install @clickaroo/checkout-ui
-
-# or yarn
-yarn add @clickaroo/checkout-ui
-`})}),`
-`,e.jsx(n.h4,{id:"peer-dependencies",children:"Peer Dependencies"}),`
-`,e.jsxs(n.p,{children:["This library requires ",e.jsx(n.code,{children:"react"})," (>= 16.8.0) as peer dependencies."]}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"npm 7+"}),": Will automatically install them"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"npm 6 / pnpm"}),": You may need to install them manually if you see warnings"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"yarn v2+"}),": Will error if they are missing"]}),`
-`]}),`
-`,e.jsx(n.p,{children:"Most React projects already have these installed, so you typically don't need to do anything extra."}),`
-`,e.jsx(n.h3,{id:"token-parameter",children:"Token Parameter"}),`
-`,e.jsxs(n.p,{children:["The component library requires a ",e.jsx(n.code,{children:"clro_token"})," parameter to identify the checkout session. This token should be provided in the URL query parameter when users navigate to the checkout page:"]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{children:`https://your-checkout-page.com?clro_token=YOUR_TOKEN_HERE
-`})}),`
-`,e.jsx(n.p,{children:"The token will be automatically extracted from the URL and stored in localStorage for subsequent requests."}),`
-`,e.jsx(n.h3,{id:"use-checkout-all-in-one",children:"Use Checkout All in One"}),`
-`,e.jsxs(n.p,{children:["The simplest way is to use the ",e.jsx(n.code,{children:"CheckoutPage"})," component directly, which includes the complete checkout flow."]}),`
-`,e.jsx(s,{of:c}),`
-`,e.jsxs(n.blockquote,{children:[`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note"}),": If you need Google address suggestions for the address field, you must provide a ",e.jsx(n.code,{children:"googleApiKey"})," that meets the ",e.jsx(n.a,{href:"https://developers.google.com/maps/documentation/places/web-service/get-api-key?hl=en&setupProd=prerequisites",rel:"nofollow",children:"google places api requirements"}),"."]}),`
-`]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutPage } from '@clickaroo/checkout-ui';
-
-function MyCheckout() {
-  const cart = [
-   {
-      sku: "TEST001",
-      offerPricePoint: "OPP-TEST001",
-    },
-    {
-      sku: "TEST002",
-      offerPricePoint: "OPP-TEST002",
-    },
-  ];
-
-  return <CheckoutPage cart={cart} googleApiKey={YOUR_GOOGLE_API_KEY} />;
-}
-`})}),`
-`,e.jsxs(n.blockquote,{children:[`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Tips"}),`:
-Each object in the `,e.jsx(n.code,{children:"cart"})," array only needs to contain the two required fields: ",e.jsx(n.code,{children:"sku"})," and ",e.jsx(n.code,{children:"offerPricePoint"}),". However, you can also pass other optional product information fields (such as ",e.jsx(n.code,{children:"title"}),", ",e.jsx(n.code,{children:"price"}),", ",e.jsx(n.code,{children:"image"}),", etc.), which will be saved to the order's metadata."]}),`
-`]}),`
-`,e.jsxs(n.p,{children:["You can read more about all the possible configuration options in ",e.jsx(n.a,{href:"./?path=/docs/components-checkoutpage--checkoutpage-english",children:"CheckoutPage Documentation"}),"."]}),`
-`,e.jsx(n.h3,{id:"event-callbacks",children:"Event Callbacks"}),`
-`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"CheckoutPage"})," component provides several event callbacks that allow you to monitor and respond to different stages of the checkout process. These callbacks enable you to track user behavior, handle loading states, and implement custom logic."]}),`
-`,e.jsx(n.p,{children:"Here's a complete example that includes all event callbacks:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutPage } from '@clickaroo/checkout-ui';
-import { useNavigate } from 'react-router-dom'; // or your routing library
-
-function MyCheckout() {
-  const navigate = useNavigate();
-  
-  const cart = [
-    {
-      sku: "TEST001",
-      offerPricePoint: "OPP-TEST001",
-      title: "Product 1",
-      price: 99.99,
-    },
-  ];
-
-  return (
-    <CheckoutPage
-      cart={cart}
-      googleApiKey={YOUR_GOOGLE_API_KEY}
-      onCheckoutInit={() => {
-        console.log('Checkout initialized');
-      }}
-      onPaymentInfoComplete={(cart, totalAmount) => {
-        console.log('Payment info complete');
-      }}
-      onOrderSubmit={(cart, totalAmount) => {
-        console.log('Order submitted');
-      }}
-      onOrderSuccess={(orderCode, tradeCode) => {
-        console.log('Order successful:', orderCode);
-        // Redirect to finish page
-        navigate(\`/finish/\${orderCode}\`);
-      }}
-    />
-  );
-}
-`})}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Key Points:"})}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onCheckoutInit"}),": Triggered when the checkout page loads"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onPaymentInfoComplete"}),": Triggered when the payment form is valid"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onOrderSubmit"}),": Triggered when user clicks submit"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onOrderSuccess"}),": Triggered when order is successfully created"]}),`
-`]}),`
-`,e.jsx(n.h3,{id:"display-order-details-on-finish-page",children:"Display Order Details on Finish Page"}),`
-`,e.jsxs(n.p,{children:["After the user successfully completes the payment and is redirected to the finish page, you can use the ",e.jsx(n.code,{children:"useOrderDetail"})," hook to display order information:"]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useOrderDetail } from '@clickaroo/checkout-ui';
-import { useParams } from 'react-router-dom';
-
-function OrderCompletePage() {
-  const { orderCode } = useParams();
-  const { orderDetail, loading, error } = useOrderDetail(orderCode || '');
-
-  if (loading) return <div>Loading order details...</div>;
-  if (error) return <div>Error: {error}</div>;
-  if (!orderDetail) return <div>Order not found</div>;
-
-  return (
-    <div>
-      <h1>Order Complete!</h1>
-      <p>Order Code: {orderDetail.order_code}</p>
-      <p>Customer Information: {orderDetail.customer.email} {orderDetail.customer.phone}</p>
-      <p>Total: {orderDetail.total_amount}</p>
-      <p>Product Detail: {orderDetail.metadata}</p>
-      {/* Display more order details as needed */}
-    </div>
-  );
-}
-`})}),`
-`,e.jsxs(n.p,{children:["For more advanced usage, check out the ",e.jsx(n.a,{href:"./?path=/docs/documentation-apis--docs",children:"APIs documentation"}),"."]})]})}function b(o={}){const{wrapper:n}={...t(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(r,{...o})}):r(o)}export{b as default};