@clickaroo/checkout-ui 0.0.13-beta → 0.1.1-beta

package/dist/storybook/storybook-static/assets/Guide.en-CNP2Y7P4.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-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/PaymentMethods-B1IKDQ7d.js

@@ -0,0 +1,2 @@
+import{j as f}from"./jsx-runtime-DiklIkkE.js";import{b as q,t as _}from"./useCheckoutContext-w0N5TNgR.js";import{r as k,g as Re,R as u}from"./index-DRjF_FHU.js";const W=()=>f.jsx("div",{className:"absolute inset-0 flex items-center justify-center z-10",children:f.jsxs("svg",{className:"animate-spin h-6 w-6 text-black",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",fill:"none",children:[f.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),f.jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]})});W.__docgenInfo={description:"",methods:[],displayName:"Loading"};var V=(r=>(r.OneTime="one-time",r.Subscription="subscription",r))(V||{});const Ie=()=>{const{cart:r,clickarooInfoMap:e,offerPricePoints:t}=q(),n=k.useMemo(()=>r.reduce((o,i)=>{const c=e[i.offerPricePoint];if(!c)return o;const s=H(c);return s&&s.priceInCents>0&&o.push({...i,priceInCents:s.priceInCents,currency:s.currency,quantity:s.quantity,paymentType:c.type==="one_off"?V.OneTime:V.Subscription}),o},[]),[r,e]),a=k.useMemo(()=>{let o=0;return t.forEach(i=>{const c=e[i];if(!c)return;const s=H(c);s&&(o+=s.priceInCents*s.quantity)}),o},[t,e]);return{checkoutProducts:n,totalAmount:a}},H=r=>{if(console.log(r),r.type==="one_off"&&r.one_off)return{priceInCents:r.one_off.price_in_cents||0,currency:r.one_off.currency||"usd",quantity:r.one_off.quantity||1};if(r.type==="subscription_schedules"&&r.subscription_schedules){const e=r.subscription_schedules.find(t=>t.phase===1);if(e)return{priceInCents:e.price_in_cents||0,currency:e.currency||"usd",quantity:e.quantity||1}}return null};var ne={exports:{}},Ae="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",Te=Ae,Ne=Te;function oe(){}function ae(){}ae.resetWarningCache=oe;var Le=function(){function r(n,a,o,i,c,s){if(s!==Ne){var h=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw h.name="Invariant Violation",h}}r.isRequired=r;function e(){return r}var t={array:r,bigint:r,bool:r,func:r,number:r,object:r,string:r,symbol:r,any:r,arrayOf:e,element:r,elementType:r,instanceOf:e,node:r,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e,checkPropTypes:ae,resetWarningCache:oe};return t.PropTypes=t,t};ne.exports=Le();var Me=ne.exports;const l=Re(Me);function X(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);e&&(n=n.filter(function(a){return Object.getOwnPropertyDescriptor(r,a).enumerable})),t.push.apply(t,n)}return t}function Q(r){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?X(Object(t),!0).forEach(function(n){se(r,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):X(Object(t)).forEach(function(n){Object.defineProperty(r,n,Object.getOwnPropertyDescriptor(t,n))})}return r}function U(r){"@babel/helpers - typeof";return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?U=function(e){return typeof e}:U=function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},U(r)}function se(r,e,t){return e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function Ue(r,e){if(r==null)return{};var t={},n=Object.keys(r),a,o;for(o=0;o<n.length;o++)a=n[o],!(e.indexOf(a)>=0)&&(t[a]=r[a]);return t}function We(r,e){if(r==null)return{};var t=Ue(r,e),n,a;if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(r);for(a=0;a<o.length;a++)n=o[a],!(e.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(r,n)&&(t[n]=r[n])}return t}function ie(r,e){return qe(r)||Be(r,e)||Fe(r,e)||De()}function qe(r){if(Array.isArray(r))return r}function Be(r,e){var t=r&&(typeof Symbol<"u"&&r[Symbol.iterator]||r["@@iterator"]);if(t!=null){var n=[],a=!0,o=!1,i,c;try{for(t=t.call(r);!(a=(i=t.next()).done)&&(n.push(i.value),!(e&&n.length===e));a=!0);}catch(s){o=!0,c=s}finally{try{!a&&t.return!=null&&t.return()}finally{if(o)throw c}}return n}}function Fe(r,e){if(r){if(typeof r=="string")return Z(r,e);var t=Object.prototype.toString.call(r).slice(8,-1);if(t==="Object"&&r.constructor&&(t=r.constructor.name),t==="Map"||t==="Set")return Array.from(r);if(t==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return Z(r,e)}}function Z(r,e){(e==null||e>r.length)&&(e=r.length);for(var t=0,n=new Array(e);t<e;t++)n[t]=r[t];return n}function De(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}var C=function(e,t,n){var a=!!n,o=u.useRef(n);u.useEffect(function(){o.current=n},[n]),u.useEffect(function(){if(!a||!e)return function(){};var i=function(){o.current&&o.current.apply(o,arguments)};return e.on(t,i),function(){e.off(t,i)}},[a,t,e,o])},$=function(e){var t=u.useRef(e);return u.useEffect(function(){t.current=e},[e]),t.current},w=function(e){return e!==null&&U(e)==="object"},Ve=function(e){return w(e)&&typeof e.then=="function"},$e=function(e){return w(e)&&typeof e.elements=="function"&&typeof e.createToken=="function"&&typeof e.createPaymentMethod=="function"&&typeof e.confirmCardPayment=="function"},ee="[object Object]",ze=function r(e,t){if(!w(e)||!w(t))return e===t;var n=Array.isArray(e),a=Array.isArray(t);if(n!==a)return!1;var o=Object.prototype.toString.call(e)===ee,i=Object.prototype.toString.call(t)===ee;if(o!==i)return!1;if(!o&&!n)return e===t;var c=Object.keys(e),s=Object.keys(t);if(c.length!==s.length)return!1;for(var h={},v=0;v<c.length;v+=1)h[c[v]]=!0;for(var E=0;E<s.length;E+=1)h[s[E]]=!0;var p=Object.keys(h);if(p.length!==c.length)return!1;var x=e,b=t,y=function(A){return r(x[A],b[A])};return p.every(y)},ce=function(e,t,n){return w(e)?Object.keys(e).reduce(function(a,o){var i=!w(t)||!ze(e[o],t[o]);return n.includes(o)?(i&&console.warn("Unsupported prop change: options.".concat(o," is not a mutable property.")),a):i?Q(Q({},a||{}),{},se({},o,e[o])):a},null):null},ue="Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.",te=function(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:ue;if(e===null||$e(e))return e;throw new Error(t)},Je=function(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:ue;if(Ve(e))return{tag:"async",stripePromise:Promise.resolve(e).then(function(a){return te(a,t)})};var n=te(e,t);return n===null?{tag:"empty"}:{tag:"sync",stripe:n}},Ye=function(e){!e||!e._registerWrapper||!e.registerAppInfo||(e._registerWrapper({name:"react-stripe-js",version:"3.10.0"}),e.registerAppInfo({name:"react-stripe-js",version:"3.10.0",url:"https://stripe.com/docs/stripe-js/react"}))},B=u.createContext(null);B.displayName="ElementsContext";var le=function(e,t){if(!e)throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(t," in an <Elements> provider."));return e},pe=function(e){var t=e.stripe,n=e.options,a=e.children,o=u.useMemo(function(){return Je(t)},[t]),i=u.useState(function(){return{stripe:o.tag==="sync"?o.stripe:null,elements:o.tag==="sync"?o.stripe.elements(n):null}}),c=ie(i,2),s=c[0],h=c[1];u.useEffect(function(){var p=!0,x=function(y){h(function(O){return O.stripe?O:{stripe:y,elements:y.elements(n)}})};return o.tag==="async"&&!s.stripe?o.stripePromise.then(function(b){b&&p&&x(b)}):o.tag==="sync"&&!s.stripe&&x(o.stripe),function(){p=!1}},[o,s,n]);var v=$(t);u.useEffect(function(){v!==null&&v!==t&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.")},[v,t]);var E=$(n);return u.useEffect(function(){if(s.elements){var p=ce(n,E,["clientSecret","fonts"]);p&&s.elements.update(p)}},[n,E,s.elements]),u.useEffect(function(){Ye(s.stripe)},[s.stripe]),u.createElement(B.Provider,{value:s},a)};pe.propTypes={stripe:l.any,options:l.object};var Ke=function(e){var t=u.useContext(B);return le(t,e)},Ge=function(){var e=Ke("calls useElements()"),t=e.elements;return t};l.func.isRequired;var fe=u.createContext(null);fe.displayName="CheckoutSdkContext";var He=function(e,t){if(!e)throw new Error("Could not find CheckoutProvider context; You need to wrap the part of your app that ".concat(t," in an <CheckoutProvider> provider."));return e},Xe=u.createContext(null);Xe.displayName="CheckoutContext";l.any,l.shape({fetchClientSecret:l.func.isRequired,elementsOptions:l.object}).isRequired;var z=function(e){var t=u.useContext(fe),n=u.useContext(B);if(t&&n)throw new Error("You cannot wrap the part of your app that ".concat(e," in both <CheckoutProvider> and <Elements> providers."));return t?He(t,e):le(n,e)},Qe=["mode"],Ze=function(e){return e.charAt(0).toUpperCase()+e.slice(1)},d=function(e,t){var n="".concat(Ze(e),"Element"),a=function(s){var h=s.id,v=s.className,E=s.options,p=E===void 0?{}:E,x=s.onBlur,b=s.onFocus,y=s.onReady,O=s.onChange,A=s.onEscape,ge=s.onClick,Se=s.onLoadError,Ce=s.onLoaderStart,Ee=s.onNetworksChange,be=s.onConfirm,xe=s.onCancel,Pe=s.onShippingAddressChange,je=s.onShippingRateChange,ke=s.onSavedPaymentMethodRemove,_e=s.onSavedPaymentMethodUpdate,T=z("mounts <".concat(n,">")),N="elements"in T?T.elements:null,P="checkoutSdk"in T?T.checkoutSdk:null,we=u.useState(null),J=ie(we,2),g=J[0],Oe=J[1],j=u.useRef(null),F=u.useRef(null);C(g,"blur",x),C(g,"focus",b),C(g,"escape",A),C(g,"click",ge),C(g,"loaderror",Se),C(g,"loaderstart",Ce),C(g,"networkschange",Ee),C(g,"confirm",be),C(g,"cancel",xe),C(g,"shippingaddresschange",Pe),C(g,"shippingratechange",je),C(g,"savedpaymentmethodremove",ke),C(g,"savedpaymentmethodupdate",_e),C(g,"change",O);var D;y&&(e==="expressCheckout"?D=y:D=function(){y(g)}),C(g,"ready",D),u.useLayoutEffect(function(){if(j.current===null&&F.current!==null&&(N||P)){var S=null;if(P)switch(e){case"payment":S=P.createPaymentElement(p);break;case"address":if("mode"in p){var K=p.mode,G=We(p,Qe);if(K==="shipping")S=P.createShippingAddressElement(G);else if(K==="billing")S=P.createBillingAddressElement(G);else throw new Error("Invalid options.mode. mode must be 'billing' or 'shipping'.")}else throw new Error("You must supply options.mode. mode must be 'billing' or 'shipping'.");break;case"expressCheckout":S=P.createExpressCheckoutElement(p);break;case"currencySelector":S=P.createCurrencySelectorElement();break;case"taxId":S=P.createTaxIdElement(p);break;default:throw new Error("Invalid Element type ".concat(n,". You must use either the <PaymentElement />, <AddressElement options={{mode: 'shipping'}} />, <AddressElement options={{mode: 'billing'}} />, or <ExpressCheckoutElement />."))}else N&&(S=N.create(e,p));j.current=S,Oe(S),S&&S.mount(F.current)}},[N,P,p]);var Y=$(p);return u.useEffect(function(){if(j.current){var S=ce(p,Y,["paymentRequest"]);S&&"update"in j.current&&j.current.update(S)}},[p,Y]),u.useLayoutEffect(function(){return function(){if(j.current&&typeof j.current.destroy=="function")try{j.current.destroy(),j.current=null}catch{}}},[]),u.createElement("div",{id:h,className:v,ref:F})},o=function(s){z("mounts <".concat(n,">"));var h=s.id,v=s.className;return u.createElement("div",{id:h,className:v})},i=t?o:a;return i.propTypes={id:l.string,className:l.string,onChange:l.func,onBlur:l.func,onFocus:l.func,onReady:l.func,onEscape:l.func,onClick:l.func,onLoadError:l.func,onLoaderStart:l.func,onNetworksChange:l.func,onConfirm:l.func,onCancel:l.func,onShippingAddressChange:l.func,onShippingRateChange:l.func,onSavedPaymentMethodRemove:l.func,onSavedPaymentMethodUpdate:l.func,options:l.object},i.displayName=n,i.__elementType=e,i},m=typeof window>"u",et=u.createContext(null);et.displayName="EmbeddedCheckoutProviderContext";var tt=function(){var e=z("calls useStripe()"),t=e.stripe;return t};d("auBankAccount",m);d("card",m);d("cardNumber",m);d("cardExpiry",m);d("cardCvc",m);d("fpxBank",m);d("iban",m);d("idealBank",m);d("p24Bank",m);d("epsBank",m);var rt=d("payment",m);d("expressCheckout",m);d("currencySelector",m);d("paymentRequestButton",m);d("linkAuthentication",m);d("address",m);d("shippingAddress",m);d("paymentMethodMessaging",m);d("affirmMessage",m);d("afterpayClearpayMessage",m);d("taxId",m);var de="basil",nt=function(e){return e===3?"v3":e},me="https://js.stripe.com",ot="".concat(me,"/").concat(de,"/stripe.js"),at=/^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/,st=/^https:\/\/js\.stripe\.com\/(v3|[a-z]+)\/stripe\.js(\?.*)?$/;var it=function(e){return at.test(e)||st.test(e)},ct=function(){for(var e=document.querySelectorAll('script[src^="'.concat(me,'"]')),t=0;t<e.length;t++){var n=e[t];if(it(n.src))return n}return null},re=function(e){var t="",n=document.createElement("script");n.src="".concat(ot).concat(t);var a=document.head||document.body;if(!a)throw new Error("Expected document.body not to be null. Stripe.js requires a <body> element.");return a.appendChild(n),n},ut=function(e,t){!e||!e._registerWrapper||e._registerWrapper({name:"stripe-js",version:"7.9.0",startTime:t})},R=null,L=null,M=null,lt=function(e){return function(t){e(new Error("Failed to load Stripe.js",{cause:t}))}},pt=function(e,t){return function(){window.Stripe?e(window.Stripe):t(new Error("Stripe.js not available"))}},ft=function(e){return R!==null?R:(R=new Promise(function(t,n){if(typeof window>"u"||typeof document>"u"){t(null);return}if(window.Stripe){t(window.Stripe);return}try{var a=ct();if(!(a&&e)){if(!a)a=re(e);else if(a&&M!==null&&L!==null){var o;a.removeEventListener("load",M),a.removeEventListener("error",L),(o=a.parentNode)===null||o===void 0||o.removeChild(a),a=re(e)}}M=pt(t,n),L=lt(n),a.addEventListener("load",M),a.addEventListener("error",L)}catch(i){n(i);return}}),R.catch(function(t){return R=null,Promise.reject(t)}))},dt=function(e,t,n){if(e===null)return null;var a=t[0],o=a.match(/^pk_test/),i=nt(e.version),c=de;o&&i!==c&&console.warn("Stripe.js@".concat(i," was loaded on the page, but @stripe/stripe-js@").concat("7.9.0"," expected Stripe.js@").concat(c,". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));var s=e.apply(void 0,t);return ut(s,n),s},I,ve=!1,he=function(){return I||(I=ft(null).catch(function(e){return I=null,Promise.reject(e)}),I)};Promise.resolve().then(function(){return he()}).catch(function(r){ve||console.warn(r)});var mt=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];ve=!0;var a=Date.now();return he().then(function(o){return dt(o,t,a)})};const vt=({onStripeReady:r,checkoutProducts:e,totalAmount:t})=>{const n=tt(),a=Ge(),{setStripeComplete:o,setStripeLoading:i,onPaymentInfoComplete:c}=q(),[s,h]=k.useState(!1);return k.useEffect(()=>{n&&a&&r(n,a)},[n,a,r]),f.jsx(rt,{onLoaderStart:()=>{_("stripe_form_loader_start")},onReady:()=>{i(!1),_("stripe_form_loaded",{success:!0})},onLoadError:v=>{var E;console.error("Payment element load error:",v),i(!1),_("stripe_form_loaded",{success:!1,error:((E=v.error)==null?void 0:E.message)||"Unknown error"})},onChange:({complete:v})=>{o(v),v&&!s&&c&&(h(!0),c(e,t))}})},ye=()=>{var x;const{stripeState:r,clickarooInfoMap:e,offerPricePoints:t,setStripe:n,setStripeElements:a}=q(),o=t[0]?e[t[0]]:null,{checkoutProducts:i,totalAmount:c}=Ie(),s=k.useCallback((b,y)=>{b&&n(b),y&&a(y)},[n,a]),[h]=k.useState(()=>{if(!o)return null;const b=mt(o.payment.data.publishable_key,{stripeAccount:o.payment.data.account_id});return b.then(y=>{y&&_("stripe_sdk_loaded",{success:!0})}).catch(y=>{_("stripe_sdk_loaded",{success:!1,error:(y==null?void 0:y.message)||"Failed to load Stripe SDK"})}),b});if(!o||t.length===0||!h)return f.jsx("div",{className:"flex items-center justify-center h-20",children:f.jsx(W,{})});const v=o.type==="one_off"?"payment":"subscription",E=(x=i[0])==null?void 0:x.currency.toLowerCase(),p=c<=0;return k.useEffect(()=>{p&&_("stripe_form_loaded",{success:!1,error:"Invalid payment amount",totalAmount:c})},[p,c]),p?f.jsx("div",{className:"flex items-center justify-center h-20",children:f.jsx("div",{className:"text-[#df1b41]",children:"Invalid payment amount"})}):f.jsxs("div",{className:"relative",children:[r.isLoading&&f.jsx("div",{className:"absolute inset-0 flex items-center justify-center z-10",children:f.jsx(W,{})}),f.jsx(pe,{stripe:h,options:{mode:v,currency:E,amount:c,payment_method_types:["card"],locale:"en",appearance:{theme:"stripe",variables:{colorPrimary:"#8AA3D4"}}},children:f.jsx(vt,{onStripeReady:s,checkoutProducts:i,totalAmount:c})})]})};ye.__docgenInfo={description:"",methods:[],displayName:"StripePayment"};const ht=({showText:r=!0})=>{const{clickarooInfoMap:e,offerPricePoints:t}=q(),n=t.length>0&&Object.keys(e).length>0&&t.every(a=>e[a]);return f.jsxs("div",{className:"w-full",children:[r&&f.jsxs(f.Fragment,{children:[f.jsx("div",{className:"text-lg md:text-2xl mb-2 font-medium",children:"Payment Methods"}),f.jsx("div",{className:"text-grey text-md mb-5",children:"All transactions are secure encrypted."})]}),n?f.jsx("div",{id:"stripe-payment-element",className:"relative min-h-8",children:f.jsx(ye,{})}):f.jsx("div",{className:"relative flex items-center justify-center h-20",children:f.jsx(W,{})})]})};ht.__docgenInfo={description:"",methods:[],displayName:"PaymentMethods",props:{showText:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}}}};export{ht as P,Ie as u};

package/dist/storybook/storybook-static/assets/PaymentMethods-ro6Dfmcf.js

@@ -0,0 +1,2 @@
+import{j as f}from"./jsx-runtime-DiklIkkE.js";import{b as q,t as I}from"./useCheckoutContext-w0N5TNgR.js";import{r as k,g as Re,R as u}from"./index-DRjF_FHU.js";const W=()=>f.jsx("div",{className:"absolute inset-0 flex items-center justify-center z-10",children:f.jsxs("svg",{className:"animate-spin h-6 w-6 text-black",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",fill:"none",children:[f.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),f.jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]})});W.__docgenInfo={description:"",methods:[],displayName:"Loading"};var V=(r=>(r.OneTime="one-time",r.Subscription="subscription",r))(V||{});const Ie=()=>{const{cart:r,clickarooInfoMap:e,offerPricePoints:t}=q(),n=k.useMemo(()=>r.reduce((o,i)=>{const c=e[i.offerPricePoint];if(!c)return o;const s=H(c);return s&&s.priceInCents>0&&o.push({...i,priceInCents:s.priceInCents,currency:s.currency,quantity:s.quantity,paymentType:c.type==="one_off"?V.OneTime:V.Subscription}),o},[]),[r,e]),a=k.useMemo(()=>{let o=0;return t.forEach(i=>{const c=e[i];if(!c)return;const s=H(c);s&&(o+=s.priceInCents*s.quantity)}),o},[t,e]);return{checkoutProducts:n,totalAmount:a}},H=r=>{if(console.log(r),r.type==="one_off"&&r.one_off)return{priceInCents:r.one_off.price_in_cents||0,currency:r.one_off.currency||"usd",quantity:r.one_off.quantity||1};if(r.type==="subscription_schedules"&&r.subscription_schedules){const e=r.subscription_schedules.find(t=>t.phase===1);if(e)return{priceInCents:e.price_in_cents||0,currency:e.currency||"usd",quantity:e.quantity||1}}return null};var ne={exports:{}},Ae="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",Te=Ae,Ne=Te;function oe(){}function ae(){}ae.resetWarningCache=oe;var Le=function(){function r(n,a,o,i,c,s){if(s!==Ne){var h=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw h.name="Invariant Violation",h}}r.isRequired=r;function e(){return r}var t={array:r,bigint:r,bool:r,func:r,number:r,object:r,string:r,symbol:r,any:r,arrayOf:e,element:r,elementType:r,instanceOf:e,node:r,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e,checkPropTypes:ae,resetWarningCache:oe};return t.PropTypes=t,t};ne.exports=Le();var Me=ne.exports;const l=Re(Me);function X(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);e&&(n=n.filter(function(a){return Object.getOwnPropertyDescriptor(r,a).enumerable})),t.push.apply(t,n)}return t}function Q(r){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?X(Object(t),!0).forEach(function(n){se(r,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):X(Object(t)).forEach(function(n){Object.defineProperty(r,n,Object.getOwnPropertyDescriptor(t,n))})}return r}function U(r){"@babel/helpers - typeof";return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?U=function(e){return typeof e}:U=function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},U(r)}function se(r,e,t){return e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function Ue(r,e){if(r==null)return{};var t={},n=Object.keys(r),a,o;for(o=0;o<n.length;o++)a=n[o],!(e.indexOf(a)>=0)&&(t[a]=r[a]);return t}function We(r,e){if(r==null)return{};var t=Ue(r,e),n,a;if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(r);for(a=0;a<o.length;a++)n=o[a],!(e.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(r,n)&&(t[n]=r[n])}return t}function ie(r,e){return qe(r)||Be(r,e)||Fe(r,e)||De()}function qe(r){if(Array.isArray(r))return r}function Be(r,e){var t=r&&(typeof Symbol<"u"&&r[Symbol.iterator]||r["@@iterator"]);if(t!=null){var n=[],a=!0,o=!1,i,c;try{for(t=t.call(r);!(a=(i=t.next()).done)&&(n.push(i.value),!(e&&n.length===e));a=!0);}catch(s){o=!0,c=s}finally{try{!a&&t.return!=null&&t.return()}finally{if(o)throw c}}return n}}function Fe(r,e){if(r){if(typeof r=="string")return Z(r,e);var t=Object.prototype.toString.call(r).slice(8,-1);if(t==="Object"&&r.constructor&&(t=r.constructor.name),t==="Map"||t==="Set")return Array.from(r);if(t==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return Z(r,e)}}function Z(r,e){(e==null||e>r.length)&&(e=r.length);for(var t=0,n=new Array(e);t<e;t++)n[t]=r[t];return n}function De(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}var C=function(e,t,n){var a=!!n,o=u.useRef(n);u.useEffect(function(){o.current=n},[n]),u.useEffect(function(){if(!a||!e)return function(){};var i=function(){o.current&&o.current.apply(o,arguments)};return e.on(t,i),function(){e.off(t,i)}},[a,t,e,o])},$=function(e){var t=u.useRef(e);return u.useEffect(function(){t.current=e},[e]),t.current},_=function(e){return e!==null&&U(e)==="object"},Ve=function(e){return _(e)&&typeof e.then=="function"},$e=function(e){return _(e)&&typeof e.elements=="function"&&typeof e.createToken=="function"&&typeof e.createPaymentMethod=="function"&&typeof e.confirmCardPayment=="function"},ee="[object Object]",ze=function r(e,t){if(!_(e)||!_(t))return e===t;var n=Array.isArray(e),a=Array.isArray(t);if(n!==a)return!1;var o=Object.prototype.toString.call(e)===ee,i=Object.prototype.toString.call(t)===ee;if(o!==i)return!1;if(!o&&!n)return e===t;var c=Object.keys(e),s=Object.keys(t);if(c.length!==s.length)return!1;for(var h={},v=0;v<c.length;v+=1)h[c[v]]=!0;for(var E=0;E<s.length;E+=1)h[s[E]]=!0;var p=Object.keys(h);if(p.length!==c.length)return!1;var x=e,b=t,y=function(A){return r(x[A],b[A])};return p.every(y)},ce=function(e,t,n){return _(e)?Object.keys(e).reduce(function(a,o){var i=!_(t)||!ze(e[o],t[o]);return n.includes(o)?(i&&console.warn("Unsupported prop change: options.".concat(o," is not a mutable property.")),a):i?Q(Q({},a||{}),{},se({},o,e[o])):a},null):null},ue="Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.",te=function(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:ue;if(e===null||$e(e))return e;throw new Error(t)},Je=function(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:ue;if(Ve(e))return{tag:"async",stripePromise:Promise.resolve(e).then(function(a){return te(a,t)})};var n=te(e,t);return n===null?{tag:"empty"}:{tag:"sync",stripe:n}},Ye=function(e){!e||!e._registerWrapper||!e.registerAppInfo||(e._registerWrapper({name:"react-stripe-js",version:"3.10.0"}),e.registerAppInfo({name:"react-stripe-js",version:"3.10.0",url:"https://stripe.com/docs/stripe-js/react"}))},B=u.createContext(null);B.displayName="ElementsContext";var le=function(e,t){if(!e)throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(t," in an <Elements> provider."));return e},pe=function(e){var t=e.stripe,n=e.options,a=e.children,o=u.useMemo(function(){return Je(t)},[t]),i=u.useState(function(){return{stripe:o.tag==="sync"?o.stripe:null,elements:o.tag==="sync"?o.stripe.elements(n):null}}),c=ie(i,2),s=c[0],h=c[1];u.useEffect(function(){var p=!0,x=function(y){h(function(w){return w.stripe?w:{stripe:y,elements:y.elements(n)}})};return o.tag==="async"&&!s.stripe?o.stripePromise.then(function(b){b&&p&&x(b)}):o.tag==="sync"&&!s.stripe&&x(o.stripe),function(){p=!1}},[o,s,n]);var v=$(t);u.useEffect(function(){v!==null&&v!==t&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.")},[v,t]);var E=$(n);return u.useEffect(function(){if(s.elements){var p=ce(n,E,["clientSecret","fonts"]);p&&s.elements.update(p)}},[n,E,s.elements]),u.useEffect(function(){Ye(s.stripe)},[s.stripe]),u.createElement(B.Provider,{value:s},a)};pe.propTypes={stripe:l.any,options:l.object};var Ke=function(e){var t=u.useContext(B);return le(t,e)},Ge=function(){var e=Ke("calls useElements()"),t=e.elements;return t};l.func.isRequired;var fe=u.createContext(null);fe.displayName="CheckoutSdkContext";var He=function(e,t){if(!e)throw new Error("Could not find CheckoutProvider context; You need to wrap the part of your app that ".concat(t," in an <CheckoutProvider> provider."));return e},Xe=u.createContext(null);Xe.displayName="CheckoutContext";l.any,l.shape({fetchClientSecret:l.func.isRequired,elementsOptions:l.object}).isRequired;var z=function(e){var t=u.useContext(fe),n=u.useContext(B);if(t&&n)throw new Error("You cannot wrap the part of your app that ".concat(e," in both <CheckoutProvider> and <Elements> providers."));return t?He(t,e):le(n,e)},Qe=["mode"],Ze=function(e){return e.charAt(0).toUpperCase()+e.slice(1)},d=function(e,t){var n="".concat(Ze(e),"Element"),a=function(s){var h=s.id,v=s.className,E=s.options,p=E===void 0?{}:E,x=s.onBlur,b=s.onFocus,y=s.onReady,w=s.onChange,A=s.onEscape,ge=s.onClick,Se=s.onLoadError,Ce=s.onLoaderStart,Ee=s.onNetworksChange,be=s.onConfirm,xe=s.onCancel,Pe=s.onShippingAddressChange,je=s.onShippingRateChange,ke=s.onSavedPaymentMethodRemove,_e=s.onSavedPaymentMethodUpdate,T=z("mounts <".concat(n,">")),N="elements"in T?T.elements:null,P="checkoutSdk"in T?T.checkoutSdk:null,we=u.useState(null),J=ie(we,2),g=J[0],Oe=J[1],j=u.useRef(null),F=u.useRef(null);C(g,"blur",x),C(g,"focus",b),C(g,"escape",A),C(g,"click",ge),C(g,"loaderror",Se),C(g,"loaderstart",Ce),C(g,"networkschange",Ee),C(g,"confirm",be),C(g,"cancel",xe),C(g,"shippingaddresschange",Pe),C(g,"shippingratechange",je),C(g,"savedpaymentmethodremove",ke),C(g,"savedpaymentmethodupdate",_e),C(g,"change",w);var D;y&&(e==="expressCheckout"?D=y:D=function(){y(g)}),C(g,"ready",D),u.useLayoutEffect(function(){if(j.current===null&&F.current!==null&&(N||P)){var S=null;if(P)switch(e){case"payment":S=P.createPaymentElement(p);break;case"address":if("mode"in p){var K=p.mode,G=We(p,Qe);if(K==="shipping")S=P.createShippingAddressElement(G);else if(K==="billing")S=P.createBillingAddressElement(G);else throw new Error("Invalid options.mode. mode must be 'billing' or 'shipping'.")}else throw new Error("You must supply options.mode. mode must be 'billing' or 'shipping'.");break;case"expressCheckout":S=P.createExpressCheckoutElement(p);break;case"currencySelector":S=P.createCurrencySelectorElement();break;case"taxId":S=P.createTaxIdElement(p);break;default:throw new Error("Invalid Element type ".concat(n,". You must use either the <PaymentElement />, <AddressElement options={{mode: 'shipping'}} />, <AddressElement options={{mode: 'billing'}} />, or <ExpressCheckoutElement />."))}else N&&(S=N.create(e,p));j.current=S,Oe(S),S&&S.mount(F.current)}},[N,P,p]);var Y=$(p);return u.useEffect(function(){if(j.current){var S=ce(p,Y,["paymentRequest"]);S&&"update"in j.current&&j.current.update(S)}},[p,Y]),u.useLayoutEffect(function(){return function(){if(j.current&&typeof j.current.destroy=="function")try{j.current.destroy(),j.current=null}catch{}}},[]),u.createElement("div",{id:h,className:v,ref:F})},o=function(s){z("mounts <".concat(n,">"));var h=s.id,v=s.className;return u.createElement("div",{id:h,className:v})},i=t?o:a;return i.propTypes={id:l.string,className:l.string,onChange:l.func,onBlur:l.func,onFocus:l.func,onReady:l.func,onEscape:l.func,onClick:l.func,onLoadError:l.func,onLoaderStart:l.func,onNetworksChange:l.func,onConfirm:l.func,onCancel:l.func,onShippingAddressChange:l.func,onShippingRateChange:l.func,onSavedPaymentMethodRemove:l.func,onSavedPaymentMethodUpdate:l.func,options:l.object},i.displayName=n,i.__elementType=e,i},m=typeof window>"u",et=u.createContext(null);et.displayName="EmbeddedCheckoutProviderContext";var tt=function(){var e=z("calls useStripe()"),t=e.stripe;return t};d("auBankAccount",m);d("card",m);d("cardNumber",m);d("cardExpiry",m);d("cardCvc",m);d("fpxBank",m);d("iban",m);d("idealBank",m);d("p24Bank",m);d("epsBank",m);var rt=d("payment",m);d("expressCheckout",m);d("currencySelector",m);d("paymentRequestButton",m);d("linkAuthentication",m);d("address",m);d("shippingAddress",m);d("paymentMethodMessaging",m);d("affirmMessage",m);d("afterpayClearpayMessage",m);d("taxId",m);var de="basil",nt=function(e){return e===3?"v3":e},me="https://js.stripe.com",ot="".concat(me,"/").concat(de,"/stripe.js"),at=/^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/,st=/^https:\/\/js\.stripe\.com\/(v3|[a-z]+)\/stripe\.js(\?.*)?$/;var it=function(e){return at.test(e)||st.test(e)},ct=function(){for(var e=document.querySelectorAll('script[src^="'.concat(me,'"]')),t=0;t<e.length;t++){var n=e[t];if(it(n.src))return n}return null},re=function(e){var t="",n=document.createElement("script");n.src="".concat(ot).concat(t);var a=document.head||document.body;if(!a)throw new Error("Expected document.body not to be null. Stripe.js requires a <body> element.");return a.appendChild(n),n},ut=function(e,t){!e||!e._registerWrapper||e._registerWrapper({name:"stripe-js",version:"7.9.0",startTime:t})},O=null,L=null,M=null,lt=function(e){return function(t){e(new Error("Failed to load Stripe.js",{cause:t}))}},pt=function(e,t){return function(){window.Stripe?e(window.Stripe):t(new Error("Stripe.js not available"))}},ft=function(e){return O!==null?O:(O=new Promise(function(t,n){if(typeof window>"u"||typeof document>"u"){t(null);return}if(window.Stripe){t(window.Stripe);return}try{var a=ct();if(!(a&&e)){if(!a)a=re(e);else if(a&&M!==null&&L!==null){var o;a.removeEventListener("load",M),a.removeEventListener("error",L),(o=a.parentNode)===null||o===void 0||o.removeChild(a),a=re(e)}}M=pt(t,n),L=lt(n),a.addEventListener("load",M),a.addEventListener("error",L)}catch(i){n(i);return}}),O.catch(function(t){return O=null,Promise.reject(t)}))},dt=function(e,t,n){if(e===null)return null;var a=t[0],o=a.match(/^pk_test/),i=nt(e.version),c=de;o&&i!==c&&console.warn("Stripe.js@".concat(i," was loaded on the page, but @stripe/stripe-js@").concat("7.9.0"," expected Stripe.js@").concat(c,". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));var s=e.apply(void 0,t);return ut(s,n),s},R,ve=!1,he=function(){return R||(R=ft(null).catch(function(e){return R=null,Promise.reject(e)}),R)};Promise.resolve().then(function(){return he()}).catch(function(r){ve||console.warn(r)});var mt=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];ve=!0;var a=Date.now();return he().then(function(o){return dt(o,t,a)})};const vt=({onStripeReady:r,checkoutProducts:e,totalAmount:t})=>{const n=tt(),a=Ge(),{setStripeComplete:o,setStripeLoading:i,onPaymentInfoComplete:c}=q(),[s,h]=k.useState(!1);return k.useEffect(()=>{n&&a&&r(n,a)},[n,a,r]),f.jsx(rt,{onReady:()=>{i(!1),I("stripe_form_loaded",{success:!0})},onLoadError:v=>{var E;console.error("Payment element load error:",v),i(!1),I("stripe_form_loaded",{success:!1,error:((E=v.error)==null?void 0:E.message)||"Unknown error"})},onChange:({complete:v})=>{o(v),v&&!s&&c&&(h(!0),c(e,t))}})},ye=()=>{var x;const{stripeState:r,clickarooInfoMap:e,offerPricePoints:t,setStripe:n,setStripeElements:a}=q(),o=t[0]?e[t[0]]:null,{checkoutProducts:i,totalAmount:c}=Ie(),s=k.useCallback((b,y)=>{b&&n(b),y&&a(y)},[n,a]),[h]=k.useState(()=>{if(!o)return null;const b=mt(o.payment.data.publishable_key,{stripeAccount:o.payment.data.account_id});return b.then(y=>{y&&I("stripe_sdk_loaded",{success:!0})}).catch(y=>{I("stripe_sdk_loaded",{success:!1,error:(y==null?void 0:y.message)||"Failed to load Stripe SDK"})}),b});if(!o||t.length===0||!h)return f.jsx("div",{className:"flex items-center justify-center h-20",children:f.jsx(W,{})});const v=o.type==="one_off"?"payment":"subscription",E=(x=i[0])==null?void 0:x.currency.toLowerCase(),p=c<=0;return k.useEffect(()=>{p&&I("stripe_form_loaded",{success:!1,error:"Invalid payment amount",totalAmount:c})},[p,c]),p?f.jsx("div",{className:"flex items-center justify-center h-20",children:f.jsx("div",{className:"text-[#df1b41]",children:"Invalid payment amount"})}):f.jsxs("div",{className:"relative",children:[r.isLoading&&f.jsx("div",{className:"absolute inset-0 flex items-center justify-center z-10",children:f.jsx(W,{})}),f.jsx(pe,{stripe:h,options:{mode:v,currency:E,amount:c,payment_method_types:["card"],locale:"en",appearance:{theme:"stripe",variables:{colorPrimary:"#8AA3D4"}}},children:f.jsx(vt,{onStripeReady:s,checkoutProducts:i,totalAmount:c})})]})};ye.__docgenInfo={description:"",methods:[],displayName:"StripePayment"};const ht=({showText:r=!0})=>{const{clickarooInfoMap:e,offerPricePoints:t}=q(),n=t.length>0&&Object.keys(e).length>0&&t.every(a=>e[a]);return f.jsxs("div",{className:"w-full",children:[r&&f.jsxs(f.Fragment,{children:[f.jsx("div",{className:"text-lg md:text-2xl mb-2 font-medium",children:"Payment Methods"}),f.jsx("div",{className:"text-grey text-md mb-5",children:"All transactions are secure encrypted."})]}),n?f.jsx("div",{id:"stripe-payment-element",className:"relative min-h-8",children:f.jsx(ye,{})}):f.jsx("div",{className:"relative flex items-center justify-center h-20",children:f.jsx(W,{})})]})};ht.__docgenInfo={description:"",methods:[],displayName:"PaymentMethods",props:{showText:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}}}};export{ht as P,Ie as u};

package/dist/storybook/storybook-static/assets/PaymentMethods.stories-BSqcqZV0.js

@@ -0,0 +1,9 @@
+import{j as r}from"./jsx-runtime-DiklIkkE.js";import{P as p}from"./PaymentMethods-ro6Dfmcf.js";import{C as u,S as d,c as l,D as h}from"./useCheckoutContext-w0N5TNgR.js";import"./index-DRjF_FHU.js";l(h);const x=[{sku:"TEST001",offerPricePoint:d.SINGLE}],y={component:p,title:"Components/PaymentMethods",parameters:{docs:{description:{component:"Payment method selection component with Stripe integration. Requires CheckoutProvider wrapper."}}},decorators:[m=>r.jsx(u,{cart:x,children:r.jsx(m,{})})],argTypes:{showText:{description:"Whether to display the title and description text",control:"boolean",table:{type:{summary:"boolean"},defaultValue:{summary:"true"}}}}},e={args:{showText:!0}},t={args:{showText:!1}};var o,s,a;e.parameters={...e.parameters,docs:{...(o=e.parameters)==null?void 0:o.docs,source:{originalSource:`{
+  args: {
+    showText: true
+  }
+}`,...(a=(s=e.parameters)==null?void 0:s.docs)==null?void 0:a.source}}};var n,c,i;t.parameters={...t.parameters,docs:{...(n=t.parameters)==null?void 0:n.docs,source:{originalSource:`{
+  args: {
+    showText: false
+  }
+}`,...(i=(c=t.parameters)==null?void 0:c.docs)==null?void 0:i.source}}};const S=["Default","WithoutText"];export{e as Default,t as WithoutText,S as __namedExportsOrder,y as default};

package/dist/storybook/storybook-static/assets/PaymentMethods.stories-oiT2EQiz.js

@@ -0,0 +1,9 @@
+import{j as r}from"./jsx-runtime-DiklIkkE.js";import{P as p}from"./PaymentMethods-B1IKDQ7d.js";import{C as u,S as d,c as l,D as h}from"./useCheckoutContext-w0N5TNgR.js";import"./index-DRjF_FHU.js";l(h);const x=[{sku:"TEST001",offerPricePoint:d.SINGLE}],y={component:p,title:"Components/PaymentMethods",parameters:{docs:{description:{component:"Payment method selection component with Stripe integration. Requires CheckoutProvider wrapper."}}},decorators:[m=>r.jsx(u,{cart:x,children:r.jsx(m,{})})],argTypes:{showText:{description:"Whether to display the title and description text",control:"boolean",table:{type:{summary:"boolean"},defaultValue:{summary:"true"}}}}},e={args:{showText:!0}},t={args:{showText:!1}};var o,s,a;e.parameters={...e.parameters,docs:{...(o=e.parameters)==null?void 0:o.docs,source:{originalSource:`{
+  args: {
+    showText: true
+  }
+}`,...(a=(s=e.parameters)==null?void 0:s.docs)==null?void 0:a.source}}};var n,c,i;t.parameters={...t.parameters,docs:{...(n=t.parameters)==null?void 0:n.docs,source:{originalSource:`{
+  args: {
+    showText: false
+  }
+}`,...(i=(c=t.parameters)==null?void 0:c.docs)==null?void 0:i.source}}};const S=["Default","WithoutText"];export{e as Default,t as WithoutText,S as __namedExportsOrder,y as default};

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

@@ -0,0 +1,136 @@
+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-C_8MTb_6.js

@@ -0,0 +1,136 @@
+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-j2F2pkp4.js";import{D as c}from"./CheckoutPage.stories-qqNMphqC.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"./useCheckoutContext-w0N5TNgR.js";import"./CheckoutPage-Dbzt3i55.js";import"./CustomerInfo-CYLNdAoo.js";import"./ValidateInput-C71ymd_w.js";import"./DeliveryAddress-BBT_-q56.js";import"./PaymentMethods-ro6Dfmcf.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/ValidateInput-C71ymd_w.js

@@ -0,0 +1,2 @@
+import{j as r}from"./jsx-runtime-DiklIkkE.js";import{r as o,R}from"./index-DRjF_FHU.js";import{Z as j}from"./useCheckoutContext-w0N5TNgR.js";const H=({label:d,value:t,onChange:T,onBlur:p,onFocus:m,type:v="text",placeholder:h,icon:f,prefix:u,inputClass:w="",error:q,schema:n,validateOnChange:g=!1,validateOnBlur:I=!0,onValidationChange:l,...M})=>{const[F,b]=o.useState(!1),[N,L]=o.useState(null),c=q||N,s=o.useCallback(e=>{var i;if(!n)return null;try{return n.parse(e),null}catch(x){return x instanceof j&&((i=x.issues[0])==null?void 0:i.message)||"Validation failed"}},[n]),a=o.useCallback(e=>{L(e),l&&l(e)},[l]),y=R.useRef(t),E=R.useRef(!1);return o.useEffect(()=>{if(n){if(g){const e=s(t);a(e);return}if(E.current){if(t!==y.current&&t){const e=s(t);a(e)}}else{if(t){const e=s(t);a(e)}E.current=!0}y.current=t}},[t,n,g,s,a]),r.jsxs("div",{className:"relative w-full",children:[r.jsx("label",{className:`text-sm text-[#2A2B35] bg-white px-1 pointer-events-none
+          transition-all duration-200 z-10`,children:d}),r.jsxs("div",{className:"relative flex items-center",children:[u&&r.jsx("div",{className:"absolute left-0 top-0 bottom-0 z-10 flex items-center",children:u}),r.jsx("input",{type:v,value:t,onFocus:e=>{b(!0),m&&m(e)},onBlur:e=>{if(b(!1),n&&I){const i=s(t);a(i)}p&&p(e)},onChange:T,placeholder:F?"":h||d,className:`w-full border border-solid border-[#e6e6e6] shadow-sm rounded-md p-[0.64rem] ${u?"pl-20":"pl-3"} text-base bg-white placeholder-custom transition pr-12 appearance-none outline-none font-[inherit] ${c?"!border-2 !border-[#df1b41] focus:!border-[#df1b41] !text-[#df1b41] focus:!ring-0 focus:!outline-none":"border-[#e6e6e6] focus:border-[#8AA3D4] focus:shadow-focus focus:!outline-none"} ${w}`,...M}),f&&r.jsx("span",{className:"absolute right-3 top-0 bottom-0 flex items-center text-black",children:f})]}),c&&r.jsx("p",{className:"mt-1 text-sm text-[#df1b41] px-2",children:c})]})};H.__docgenInfo={description:"",methods:[],displayName:"FloatingLabelInput",props:{label:{required:!0,tsType:{name:"string"},description:""},value:{required:!0,tsType:{name:"string"},description:""},onChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(e: React.ChangeEvent<HTMLInputElement>) => void",signature:{arguments:[{type:{name:"ReactChangeEvent",raw:"React.ChangeEvent<HTMLInputElement>",elements:[{name:"HTMLInputElement"}]},name:"e"}],return:{name:"void"}}},description:""},onBlur:{required:!1,tsType:{name:"signature",type:"function",raw:"(e: React.FocusEvent<HTMLInputElement>) => void",signature:{arguments:[{type:{name:"ReactFocusEvent",raw:"React.FocusEvent<HTMLInputElement>",elements:[{name:"HTMLInputElement"}]},name:"e"}],return:{name:"void"}}},description:""},onFocus:{required:!1,tsType:{name:"signature",type:"function",raw:"(e: React.FocusEvent<HTMLInputElement>) => void",signature:{arguments:[{type:{name:"ReactFocusEvent",raw:"React.FocusEvent<HTMLInputElement>",elements:[{name:"HTMLInputElement"}]},name:"e"}],return:{name:"void"}}},description:""},type:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"text"',computed:!1}},placeholder:{required:!1,tsType:{name:"string"},description:""},icon:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},prefix:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},inputClass:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'""',computed:!1}},error:{required:!1,tsType:{name:"string"},description:""},schema:{required:!1,tsType:{name:"z.ZodSchema",elements:[{name:"string"}],raw:"z.ZodSchema<string>"},description:""},validateOnChange:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},validateOnBlur:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},onValidationChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(error: string | null) => void",signature:{arguments:[{type:{name:"union",raw:"string | null",elements:[{name:"string"},{name:"null"}]},name:"error"}],return:{name:"void"}}},description:""}},composes:["Omit"]};export{H as F};

package/dist/storybook/storybook-static/assets/chunk-XP5HYGXS-BpfKkqn7.js

@@ -0,0 +1 @@
+var u=Object.create,a=Object.defineProperty,s=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyNames,c=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty,l=(e,r)=>function(){return e&&(r=(0,e[o(e)[0]])(e=0)),r},v=(e,r)=>function(){return r||(0,e[o(e)[0]])((r={exports:{}}).exports,r),r.exports},b=(e,r)=>{for(var t in r)a(e,t,{get:r[t],enumerable:!0})},n=(e,r,t,p)=>{if(r&&typeof r=="object"||typeof r=="function")for(let _ of o(r))!O.call(e,_)&&_!==t&&a(e,_,{get:()=>r[_],enumerable:!(p=s(r,_))||p.enumerable});return e},P=(e,r,t)=>(t=e!=null?u(c(e)):{},n(!e||!e.__esModule?a(t,"default",{value:e,enumerable:!0}):t,e)),y=e=>n(a({},"__esModule",{value:!0}),e);export{P as _,v as a,b,l as c,y as d};