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

package/dist/storybook/storybook-static/assets/APIs.en-nicPQ5AW.js

@@ -1,372 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as s}from"./index-ChEI-nsM.js";import{M as i}from"./index-Bz3Q1Yw_.js";import"./index-DRjF_FHU.js";import"./iframe-eGyOKkka.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";function t(r){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...s(),...r.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Documentation/APIs"}),`
-`,e.jsx(n.h1,{id:"apis-and-hooks",children:"APIs and hooks"}),`
-`,e.jsx(n.p,{children:"This document introduces the HTTP APIs and Hooks provided by the component library for more granular control and custom implementation."}),`
-`,e.jsx(n.h2,{id:"http-api",children:"HTTP API"}),`
-`,e.jsx(n.p,{children:"The component library provides the following HTTP API functions for directly calling order and price point related interfaces."}),`
-`,e.jsx(n.h3,{id:"getpricepointinfo",children:"getPricePointInfo"}),`
-`,e.jsx(n.p,{children:"Get price point information (supports single or multiple price points)."}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Usage Example:"})}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { getPricePointInfo } from '@clickaroo/checkout-ui';
-
-// Get single price point information
-const singleResult = await getPricePointInfo('OPP-XXX');
-
-if (singleResult.success) {
-  console.log('Price point info', singleResult.data);
-  // result.data is a ClickarooInfo object
-} else if (singleResult.error) {
-  console.error('Failed to get price point info', singleResult.error);
-}
-
-// Get multiple price point information
-const multipleResult = await getPricePointInfo([
-  'OPP-XXX',
-  'OPP-YYY',
-]);
-
-if (multipleResult.success) {
-  console.log('Price point info', multipleResult.data);
-  // result.data is an object, key is offerPricePoint, value is the corresponding ClickarooInfo
-  // Example: { 'OPP-XXX': {...}, 'OPP-YYY': {...} }
-} else if (multipleResult.error) {
-  console.error('Failed to get price point info', multipleResult.error);
-}
-`})}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Parameters:"})}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"offerPricePoints: string | string[]"})," - Price point code (single string or string array)"]}),`
-`]}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Return Value:"})}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`{
-  success: boolean;
-  data?: ClickarooInfo | Record<string, ClickarooInfo>;  // Returns ClickarooInfo for single, object for multiple
-  error?: {                                               // Error information
-    message: string;
-    code?: string;
-    details?: unknown;
-  };
-}
-
-interface ClickarooInfo {
-  offer_code: string;                                    // Price point code
-  type: "one_off" | "subscription_schedules";           // Type: one-time purchase or subscription plan
-  payment: {                                             // Payment information
-    type: "stripe";
-    data: {
-      publishable_key: string;                           // Stripe publishable key
-      account_id: string;                                // Stripe account ID
-    };
-  };
-  one_off?: {                                            // One-time purchase info (exists when type is "one_off")
-    price_in_cents: number;                              // Price (in cents)
-    currency: string;                                    // Currency type
-    quantity: number;                                    // Quantity
-  };
-  subscription_schedules?: {                             // Subscription plan info (exists when type is "subscription_schedules")
-    phase: number;                                       // Phase
-    price_in_cents: number;                              // Price (in cents)
-    currency: string;                                    // Currency type
-    quantity: number;                                    // Quantity
-    period: string;                                      // Period
-  }[];
-}
-`})}),`
-`,e.jsx(n.h3,{id:"createorder",children:"createOrder"}),`
-`,e.jsxs(n.p,{children:["Create an order. The function automatically retrieves ",e.jsx(n.code,{children:"clickaroo_token"})," from the URL's ",e.jsx(n.code,{children:"clro_token"})," parameter or ",e.jsx(n.code,{children:"localStorage"}),", no need to pass it manually."]}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Usage Example:"})}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { createOrder } from '@vsl-network/checkout-ui';
-
-const result = await createOrder({
-  customer_info: {
-    name: 'John Doe',
-    email: 'john@example.com',
-    phone: '+1234567890',
-  },
-  shipping_address: {
-    country: 'US',
-    state: 'CA',
-    city: 'San Francisco',
-    address1: '123 Main St',
-    zip: '94102',
-  },
-  payment: {
-    type: 'stripe',
-    data: {
-      confirmation_token_id: 'token-id',
-      payment_method_types: ['card'],
-    },
-  },
-  items: [ 
-    {
-      sku: 'SKU001',
-      price_point_code: 'OPP-XXX',
-    },
-    {
-      sku: 'SKU002',
-      price_point_code: 'OPP-YYY',
-    },
-  ],
-  metadata: {},
-});
-
-if (result.success) {
-  console.log('Order created successfully', result.data);
-} else {
-  console.error('Order creation failed', result.error);
-}
-`})}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Return Value:"})}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`{
-  success: boolean;
-  data?: CreateOrderResponse;
-  error?: {
-    message: string;
-    code?: string;
-    details?: unknown;
-  };
-}
-
-interface CreateOrderResponse {
-  order_code: string;                    // Order code
-  payment_status: OrderPaymentStatus;    // Payment status
-  payment_result: Record<string, unknown>; // Payment result details
-  order_trade_code: string;              // Trade code
-}
-
-enum OrderPaymentStatus {
-  PENDING = 'pending',           // Pending payment
-  PAID = 'paid',                 // Paid
-  PARTIALLY_PAID = 'partially_paid', // Partially paid
-  FAILED = 'failed',             // Payment failed
-}
-`})}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Important Notes:"})}),`
-`,e.jsxs(n.p,{children:["The function automatically retrieves the token from the URL's ",e.jsx(n.code,{children:"clro_token"})," parameter. If not in the URL, it retrieves from ",e.jsx(n.code,{children:"localStorage"}),". Please ensure that the URL contains the ",e.jsx(n.code,{children:"clro_token"})," parameter (e.g., ",e.jsx(n.code,{children:"?clro_token=your-token"}),") before calling ",e.jsx(n.code,{children:"createOrder"}),", or the token has been saved to ",e.jsx(n.code,{children:"localStorage"})," through other means."]}),`
-`,e.jsx(n.h3,{id:"getorderdetail",children:"getOrderDetail"}),`
-`,e.jsx(n.p,{children:"Get order details."}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Usage Example:"})}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { getOrderDetail } from '@vsl-network/checkout-ui';
-
-const result = await getOrderDetail('ORDER-12345');
-
-if (result.success) {
-  console.log('Order details', result.data);
-  console.log('Order code', result.data?.order_code);
-  console.log('Payment status', result.data?.payment_status);
-} else {
-  console.error('Failed to get order details', result.error);
-}
-`})}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Return Value:"})}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`{
-  success: boolean;
-  data?: OrderDetail;
-  error?: {
-    message: string;
-    code?: string;
-    details?: unknown;
-  };
-}
-
-interface OrderDetail {
-  order_code: string;                    // Order code
-  customer: {                            // Customer information
-    customer_code: string;
-    name: string;
-    email: string;
-    phone: string;
-  };
-  shipping_address: {                    // Shipping address
-    zip: string;
-    city: string;
-    state: string;
-    country: string;
-    address1: string;
-    address2?: string;
-  };
-  billing_address: {                     // Billing address
-    zip: string;
-    city: string;
-    state: string;
-    country: string;
-    address1: string;
-    address2?: string;
-  };
-  status: OrderStatus;                   // Order status
-  payment_status: OrderPaymentStatus;    // Payment status
-  refund_status: RefundStatus;           // Refund status
-  fulfillment_status: FulfillmentStatus; // Fulfillment status
-  remark: string;                        // Remark
-  total_amount: string;                  // Total order amount
-  currency: string;                      // Currency type
-  items: Array<{                         // Order item list
-    item_code: string;
-    name: string;
-    quantity: number;
-    price: string;
-    total: string;
-  }>;
-  metadata?: {                           // Order metadata
-    sku?: string;
-    [key: string]: unknown;
-  };
-  created_at: string;                    // Creation time
-  updated_at: string;                    // Update time
-}
-
-enum OrderStatus {
-  PENDING = 'pending',       // Pending
-  CONFIRMED = 'confirmed',   // Confirmed
-  PROCESSING = 'processing', // Processing
-  SHIPPED = 'shipped',       // Shipped
-  DELIVERED = 'delivered',   // Delivered
-  CANCELLED = 'cancelled',   // Cancelled
-}
-
-enum RefundStatus {
-  NO_REFUND = 'no_refund',           // No refund
-  PARTIAL_REFUND = 'partial_refund', // Partial refund
-  FULL_REFUND = 'full_refund',       // Full refund
-}
-
-enum FulfillmentStatus {
-  PENDING = 'pending',       // Pending
-  PROCESSING = 'processing', // Processing
-  SHIPPED = 'shipped',       // Shipped
-  DELIVERED = 'delivered',   // Delivered
-}
-`})}),`
-`,e.jsx(n.h2,{id:"hooks",children:"Hooks"}),`
-`,e.jsx(n.p,{children:"The component library provides the following Hooks for getting state and handling logic in components."}),`
-`,e.jsx(n.h3,{id:"usecheckoutcontext",children:"useCheckoutContext"}),`
-`,e.jsxs(n.p,{children:["Get checkout context data and methods. Must be used inside ",e.jsx(n.code,{children:"CheckoutProvider"}),"."]}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Usage Example:"})}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useCheckoutContext } from '@vsl-network/checkout-ui';
-
-function CustomComponent() {
-  const {
-    customerInfo,           // Customer information
-    deliveryAddress,        // Delivery address
-    products,               // Product list
-    isPaymentComplete,      // Whether payment info is complete (Stripe form validation passed)
-    updateCustomerInfo,     // Update customer information
-    updateDeliveryAddress,  // Update delivery address
-    isFormValid,            // Validate if form is valid
-  } = useCheckoutContext();
-
-  return (
-    <div>
-      <p>Product count: {products.length}</p>
-      <p>Form valid: {isFormValid() ? 'Yes' : 'No'}</p>
-      <p>Payment status: {isPaymentComplete ? 'Complete' : 'Incomplete'}</p>
-    </div>
-  );
-}
-`})}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Return Value Description:"})}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface UseCheckoutContextReturn {
-  customerInfo: CustomerInfo;        // Customer information
-  deliveryAddress: DeliveryAddress;  // Delivery address
-  products: Product[];               // Product list
-  isPaymentComplete: boolean;        // Whether payment info is complete
-  updateCustomerInfo: (info: Partial<CustomerInfo>) => void;
-  updateDeliveryAddress: (address: Partial<DeliveryAddress>) => void;
-  isFormValid: () => boolean;        // Validate if form is valid
-}
-`})}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Notes:"})}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:["This Hook must be used inside ",e.jsx(n.code,{children:"CheckoutProvider"}),", otherwise it will throw an error."]}),`
-`]}),`
-`,e.jsx(n.h3,{id:"useordersubmission",children:"useOrderSubmission"}),`
-`,e.jsx(n.p,{children:"Handle order submission logic, including creating Stripe confirmation tokens and calling the order creation API."}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Usage Example:"})}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useCheckoutContext, useOrderSubmission } from '@vsl-network/checkout-ui';
-
-function CustomSubmitButton() {
-  const { isFormValid } = useCheckoutContext();
-  const { isSubmitting, submitOrder } = useOrderSubmission();
-
-  const handleSubmit = async () => {
-    if (!isFormValid()) {
-      alert('Please fill in all information');
-      return;
-    }
-
-    const result = await submitOrder();
-
-    if (result.success) {
-      console.log('Order successful', result.orderCode, result.tradeCode);
-      // Navigate to success page
-    } else {
-      alert(result.message || 'Order submission failed');
-    }
-  };
-
-  return (
-    <button 
-      onClick={handleSubmit}
-      disabled={isSubmitting || !isFormValid()}
-    >
-      {isSubmitting ? 'Submitting...' : 'Submit Order'}
-    </button>
-  );
-}
-`})}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Return Value Description:"})}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface UseOrderSubmissionReturn {
-  isSubmitting: boolean;  // Whether submitting
-  submitOrder: () => Promise<OrderSubmissionResult>;
-}
-
-interface OrderSubmissionResult {
-  success: boolean;        // Whether successful
-  message: string;         // Message (success or error information)
-  orderCode?: string;      // Order code (when successful)
-  tradeCode?: string;      // Trade code (when successful)
-}
-`})}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Notes:"})}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"submitOrder"})," automatically retrieves all necessary data from ",e.jsx(n.code,{children:"CheckoutContext"})," (customer info, delivery address, product info, etc.)."]}),`
-`,e.jsx(n.h3,{id:"useorderdetail",children:"useOrderDetail"}),`
-`,e.jsx(n.p,{children:"Get order details, supports automatic refresh and error handling."}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Usage Example:"})}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useOrderDetail } from '@vsl-network/checkout-ui';
-
-function OrderDetailPage({ orderCode }: { orderCode: string }) {
-  const { orderDetail, loading, error, refetch } = useOrderDetail(orderCode);
-
-  if (loading) return <div>Loading...</div>;
-  if (error) return <div>Error: {error}</div>;
-  if (!orderDetail) return <div>Order does not exist</div>;
-
-  return (
-    <div>
-      <h1>Order Details</h1>
-      <p>Order Code: {orderDetail.order_code}</p>
-      <p>Status: {orderDetail.status}</p>
-      <p>Payment Status: {orderDetail.payment_status}</p>
-      <p>Total Amount: {orderDetail.total_amount} {orderDetail.currency}</p>
-      {orderDetail.metadata && (
-        <div>
-          <p>Product Title: {orderDetail.metadata.product_title}</p>
-          <p>Product Price: {orderDetail.metadata.current_price}</p>
-        </div>
-      )}
-      <button onClick={refetch}>Refresh</button>
-    </div>
-  );
-}
-`})}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Return Value Description:"})}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface UseOrderDetailReturn {
-  orderDetail: OrderDetail | null;  // Order details
-  loading: boolean;                  // Whether loading
-  error: string | null;              // Error information
-  refetch: () => void;               // Refetch order details
-}
-`})}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Description:"})}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:["The ",e.jsx(n.code,{children:"OrderDetail"})," type definition is the same as the ",e.jsx(n.code,{children:"OrderDetail"})," returned by the ",e.jsx(n.code,{children:"getOrderDetail"})," API. See the API documentation above for details."]}),`
-`]})]})}function h(r={}){const{wrapper:n}={...s(),...r.components};return n?e.jsx(n,{...r,children:e.jsx(t,{...r})}):t(r)}export{h as default};

package/dist/storybook/storybook-static/assets/CheckoutPage-B959BwZO.js

@@ -1,3 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{g as w,b as C,C as v}from"./useCheckoutContext-Cyg-MLQs.js";import{C as N}from"./CustomerInfo-CdeZHMcz.js";import{D as P}from"./DeliveryAddress-zAvEPauR.js";import{u as _,P as O}from"./PaymentMethods-DOuQM2jZ.js";import{r as g}from"./index-DRjF_FHU.js";const k=({message:r="Processing...",show:o})=>o?e.jsxs("div",{className:"fixed inset-0 z-50 flex items-center justify-center",children:[e.jsx("div",{className:"absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"}),e.jsxs("div",{className:"relative z-10 flex flex-col items-center justify-center p-8 bg-white rounded-2xl shadow-2xl max-w-sm mx-4",children:[e.jsxs("div",{className:"relative mb-6",children:[e.jsx("div",{className:"w-16 h-16 border-4 border-gray-200 rounded-full"}),e.jsx("div",{className:"absolute top-0 left-0 w-16 h-16 border-4 border-solid border-blue-500 border-t-transparent rounded-full animate-spin"}),e.jsx("div",{className:"absolute top-1/2 left-1/2 w-2 h-2 bg-blue-500 rounded-full transform -translate-x-1/2 -translate-y-1/2"})]}),e.jsxs("div",{className:"text-center",children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-800 mb-2",children:r}),e.jsx("p",{className:"text-gray-500 text-sm",children:"Please wait while we process your request..."})]}),e.jsxs("div",{className:"flex space-x-1 mt-6",children:[e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce"}),e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{animationDelay:"0.1s"}}),e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{animationDelay:"0.2s"}})]})]})]}):null;k.__docgenInfo={description:"",methods:[],displayName:"FullScreenLoading",props:{message:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Processing..."',computed:!1}},show:{required:!0,tsType:{name:"boolean"},description:""}}};const I=async r=>{try{console.log("Creating order with data:",r);const o=await fetch(`${w()}/orders`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r)}),l=await o.json();return o.ok?(console.log("Order created successfully:",l),{success:!0,data:l}):(console.error("Order creation failed:",l),{success:!1,error:{message:l.message||`HTTP ${o.status}: ${o.statusText}`,code:l.code,details:l}})}catch(o){return console.error("Network error creating order:",o),{success:!1,error:{message:o instanceof Error?o.message:"Network error occurred",details:{originalError:o}}}}};var b=(r=>(r.PENDING="pending",r.PAID="paid",r.PARTIALLY_PAID="partially_paid",r.FAILED="failed",r))(b||{});const S=()=>{const[r,o]=g.useState(!1),l=C(),x=g.useCallback(async(u,c,t)=>{console.log("Creating confirmation token with:",{stripeExists:!!u,elementsExists:!!c});try{console.log("Calling elements.submit()...");const{error:i}=await c.submit();if(i)return console.error("Elements submit error:",i),{error:i.message};console.log("Elements submitted successfully, creating confirmation token...");const{confirmationToken:d,error:n}=await u.createConfirmationToken({elements:c,params:{payment_method_data:{billing_details:{name:`${t.firstName} ${t.lastName}`,email:t.email,phone:t.phone}}}});return n?(console.error("Confirmation token creation error:",n),{error:n.message}):d?(console.log("Confirmation token created successfully:",d.id),{token:d.id}):{error:"Failed to create confirmation token"}}catch(i){return console.error("Error creating confirmation token:",i),{error:"Failed to create confirmation token"}}},[]),h=g.useCallback(u=>{const{customerInfo:c,deliveryAddress:t,clickarooToken:i,cart:d}=l,n=typeof window<"u"?window.location.href:"",f=`${c.firstName} ${c.lastName}`.trim(),p=i&&i.trim()!==""?i:null,a={country:t.country,state:t.state,city:t.city,address1:t.address,zip:t.zipCode};t.address2&&t.address2.trim()!==""&&(a.address2=t.address2);const s={clickaroo_token:p,customer_info:{name:f,email:c.email,phone:c.phone},shipping_address:a,source_url:n,remark:"",metadata:{sub4:typeof window<"u"&&new URLSearchParams(window.location.search).get("sub4")||""},payment:{type:"stripe",data:{confirmation_token_id:u,payment_method_types:["card"]}}};return s.items=d.map(y=>({sku:y.sku,price_point_code:y.offerPricePoint})),s.metadata.products=d,console.log("Built order data:",s),s},[l]),m=g.useCallback(async()=>{var d;const{stripeState:u,customerInfo:c}=l,{stripe:t,elements:i}=u;if(!t||!i)return{success:!1,message:"Payment system not ready"};o(!0);try{console.log("Creating confirmation token...");const{token:n,error:f}=await x(t,i,c);if(f)return console.error("Failed to create confirmation token:",f),{success:!1,message:`Payment processing failed: ${f}`};if(!n)return{success:!1,message:"Failed to get payment token, please try again."};console.log("Confirmation token created successfully:",n);const p=h(n);console.log("Submitting order...");const a=await I(p);if(!a.success)return console.error("Order submission failed:",a.error),{success:!1,message:`Order submission failed: ${((d=a.error)==null?void 0:d.message)||"Unknown error"}`};const{data:s}=a;return console.log("Order submitted successfully:",s),(s==null?void 0:s.payment_status)===b.PAID?{success:!0,message:"🎉 Payment successful!",orderCode:s.order_code,tradeCode:s.order_trade_code}:(s==null?void 0:s.payment_status)===b.PENDING?{success:!1,message:"Payment was not successful. Please try a different payment method or card.",orderCode:s.order_code}:{success:!1,message:`Payment failed, status: ${(s==null?void 0:s.payment_status)||"Unknown"}. Please try again.`,orderCode:s==null?void 0:s.order_code}}catch(n){return console.error("Error occurred during order process:",n),{success:!1,message:"An error occurred during the order process, please try again."}}finally{o(!1)}},[l,x,h]);return{isSubmitting:r,submitOrder:m}},j=()=>{const{isFormValid:r,onOrderSubmit:o,onOrderSuccess:l}=C(),{checkoutProducts:x,totalAmount:h}=_(),{isSubmitting:m,submitOrder:u}=S(),[c,t]=g.useState(""),[i,d]=g.useState(""),[n,f]=g.useState(!1),p=async()=>{if(t(""),d(""),!r()){t("Please fill in all information and make sure it is valid!");return}o==null||o(x,h);const a=await u();if(a.success){f(!0);let s=a.message;a.orderCode&&(s+=`
-Order Number: ${a.orderCode}`),a.tradeCode&&(s+=`
-Transaction ID: ${a.tradeCode}`),d(s),a.orderCode&&(l==null||l(a.orderCode,a.tradeCode))}else t(a.message)};return e.jsxs("div",{className:"clickaroo-checkout-ui w-full flex flex-col items-center",children:[e.jsxs("button",{type:"button",onClick:p,className:`w-full outline-none border-none text-white font-bold text-center text-lg py-5 rounded-md mb-4 transition-all duration-300 relative overflow-hidden ${r()&&!m&&!n?"bg-black hover:opacity-70":n?"bg-green-500 cursor-not-allowed":m?"bg-blue-600 cursor-not-allowed":"bg-gray-400 cursor-not-allowed"}`,disabled:!r()||m||n,children:[m&&e.jsx("div",{className:"absolute inset-0 bg-gradient-to-r from-blue-600 via-blue-500 to-blue-600 bg-[length:200%_100%] animate-[shimmer_2s_ease-in-out_infinite]"}),e.jsx("span",{className:"relative z-10 flex items-center justify-center",children:n?"✓ Order Complete - Redirecting...":m?e.jsxs(e.Fragment,{children:[e.jsxs("svg",{className:"animate-spin -ml-1 mr-3 h-5 w-5 text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.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"})]}),"Processing..."]}):"Complete Order"})]}),i&&e.jsx("div",{className:"w-full mb-4 p-4 bg-green-50 border border-green-200 rounded-lg",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx("div",{className:"flex-shrink-0",children:e.jsx("svg",{className:"h-5 w-5 text-green-400",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}),e.jsx("div",{className:"ml-3",children:e.jsx("p",{className:"text-sm text-green-700 whitespace-pre-line m-0",children:i})}),e.jsx("div",{className:"ml-auto pl-3",children:e.jsx("div",{className:"-mx-1.5 -my-1.5",children:e.jsxs("button",{type:"button",onClick:()=>d(""),className:"border-none inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600",children:[e.jsx("span",{className:"sr-only",children:"Close"}),e.jsx("svg",{className:"h-3 w-3",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})})})]})}),c&&e.jsx("div",{className:"w-full mb-4 p-4 bg-red-50 border border-red-200 rounded-lg",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx("div",{className:"flex-shrink-0",children:e.jsx("svg",{className:"h-5 w-5 text-red-400",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",clipRule:"evenodd"})})}),e.jsx("div",{className:"ml-3",children:e.jsx("p",{className:"text-sm text-red-700 whitespace-pre-line",children:c})}),e.jsx("div",{className:"ml-auto pl-3",children:e.jsx("div",{className:"-mx-1.5 -my-1.5",children:e.jsxs("button",{type:"button",onClick:()=>t(""),className:"inline-flex bg-red-50 rounded-md p-1.5 text-[#df1b41] hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600",children:[e.jsx("span",{className:"sr-only",children:"Close"}),e.jsx("svg",{className:"h-3 w-3",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})})})]})}),e.jsx("div",{className:"flex items-center text-grey text-sm md:text-base",children:e.jsx("span",{className:"text-center",children:"All transactions are SSL secure and encrypted"})}),e.jsx(k,{show:m,message:"Processing Your Order"})]})};j.__docgenInfo={description:"",methods:[],displayName:"SubmitButton"};const L=r=>e.jsx(v,{cart:r.cart,onCheckoutInit:r.onCheckoutInit,onPaymentInfoComplete:r.onPaymentInfoComplete,onOrderSubmit:r.onOrderSubmit,onOrderSuccess:r.onOrderSuccess,googleApiKey:r.googleApiKey,children:e.jsxs("div",{className:"clickaroo-checkout-ui flex flex-col gap-5",children:[e.jsx(O,{}),e.jsx(N,{}),e.jsx(P,{}),e.jsx(j,{})]})});L.__docgenInfo={description:"",methods:[],displayName:"CheckoutPage",props:{cart:{required:!0,tsType:{name:"Array",elements:[{name:"CartItem"}],raw:"CartItem[]"},description:""},onCheckoutInit:{required:!1,tsType:{name:"OnCheckoutInitCallback"},description:""},onPaymentInfoComplete:{required:!1,tsType:{name:"OnPaymentInfoCompleteCallback"},description:""},onOrderSubmit:{required:!1,tsType:{name:"OnOrderSubmitCallback"},description:""},onOrderSuccess:{required:!1,tsType:{name:"OnOrderSuccessCallback"},description:""},googleApiKey:{required:!1,tsType:{name:"string"},description:""}}};export{L as C,S as u};

package/dist/storybook/storybook-static/assets/CheckoutPage-BsnzMxJk.js

@@ -1,3 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{g as w,b as C,C as v}from"./useCheckoutContext-B8tsk5b5.js";import{C as N}from"./CustomerInfo-CTx1dFS3.js";import{D as P}from"./DeliveryAddress-X81XGbKD.js";import{u as _,P as O}from"./PaymentMethods-BNEEARzu.js";import{r as g}from"./index-DRjF_FHU.js";const k=({message:r="Processing...",show:o})=>o?e.jsxs("div",{className:"fixed inset-0 z-50 flex items-center justify-center",children:[e.jsx("div",{className:"absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"}),e.jsxs("div",{className:"relative z-10 flex flex-col items-center justify-center p-8 bg-white rounded-2xl shadow-2xl max-w-sm mx-4",children:[e.jsxs("div",{className:"relative mb-6",children:[e.jsx("div",{className:"w-16 h-16 border-4 border-gray-200 rounded-full"}),e.jsx("div",{className:"absolute top-0 left-0 w-16 h-16 border-4 border-solid border-blue-500 border-t-transparent rounded-full animate-spin"}),e.jsx("div",{className:"absolute top-1/2 left-1/2 w-2 h-2 bg-blue-500 rounded-full transform -translate-x-1/2 -translate-y-1/2"})]}),e.jsxs("div",{className:"text-center",children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-800 mb-2",children:r}),e.jsx("p",{className:"text-gray-500 text-sm",children:"Please wait while we process your request..."})]}),e.jsxs("div",{className:"flex space-x-1 mt-6",children:[e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce"}),e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{animationDelay:"0.1s"}}),e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{animationDelay:"0.2s"}})]})]})]}):null;k.__docgenInfo={description:"",methods:[],displayName:"FullScreenLoading",props:{message:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Processing..."',computed:!1}},show:{required:!0,tsType:{name:"boolean"},description:""}}};const I=async r=>{try{console.log("Creating order with data:",r);const o=await fetch(`${w()}/orders`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r)}),l=await o.json();return o.ok?(console.log("Order created successfully:",l),{success:!0,data:l}):(console.error("Order creation failed:",l),{success:!1,error:{message:l.message||`HTTP ${o.status}: ${o.statusText}`,code:l.code,details:l}})}catch(o){return console.error("Network error creating order:",o),{success:!1,error:{message:o instanceof Error?o.message:"Network error occurred",details:{originalError:o}}}}};var b=(r=>(r.PENDING="pending",r.PAID="paid",r.PARTIALLY_PAID="partially_paid",r.FAILED="failed",r))(b||{});const S=()=>{const[r,o]=g.useState(!1),l=C(),x=g.useCallback(async(u,c,t)=>{console.log("Creating confirmation token with:",{stripeExists:!!u,elementsExists:!!c});try{console.log("Calling elements.submit()...");const{error:i}=await c.submit();if(i)return console.error("Elements submit error:",i),{error:i.message};console.log("Elements submitted successfully, creating confirmation token...");const{confirmationToken:d,error:n}=await u.createConfirmationToken({elements:c,params:{payment_method_data:{billing_details:{name:`${t.firstName} ${t.lastName}`,email:t.email,phone:t.phone}}}});return n?(console.error("Confirmation token creation error:",n),{error:n.message}):d?(console.log("Confirmation token created successfully:",d.id),{token:d.id}):{error:"Failed to create confirmation token"}}catch(i){return console.error("Error creating confirmation token:",i),{error:"Failed to create confirmation token"}}},[]),h=g.useCallback(u=>{const{customerInfo:c,deliveryAddress:t,clickarooToken:i,cart:d}=l,n=typeof window<"u"?window.location.href:"",f=`${c.firstName} ${c.lastName}`.trim(),p=i&&i.trim()!==""?i:null,a={country:t.country,state:t.state,city:t.city,address1:t.address,zip:t.zipCode};t.address2&&t.address2.trim()!==""&&(a.address2=t.address2);const s={clickaroo_token:p,customer_info:{name:f,email:c.email,phone:c.phone},shipping_address:a,source_url:n,remark:"",metadata:{sub4:typeof window<"u"&&new URLSearchParams(window.location.search).get("sub4")||""},payment:{type:"stripe",data:{confirmation_token_id:u,payment_method_types:["card"]}}};return s.items=d.map(y=>({sku:y.sku,price_point_code:y.offerPricePoint})),s.metadata.products=d,console.log("Built order data:",s),s},[l]),m=g.useCallback(async()=>{var d;const{stripeState:u,customerInfo:c}=l,{stripe:t,elements:i}=u;if(!t||!i)return{success:!1,message:"Payment system not ready"};o(!0);try{console.log("Creating confirmation token...");const{token:n,error:f}=await x(t,i,c);if(f)return console.error("Failed to create confirmation token:",f),{success:!1,message:`Payment processing failed: ${f}`};if(!n)return{success:!1,message:"Failed to get payment token, please try again."};console.log("Confirmation token created successfully:",n);const p=h(n);console.log("Submitting order...");const a=await I(p);if(!a.success)return console.error("Order submission failed:",a.error),{success:!1,message:`Order submission failed: ${((d=a.error)==null?void 0:d.message)||"Unknown error"}`};const{data:s}=a;return console.log("Order submitted successfully:",s),(s==null?void 0:s.payment_status)===b.PAID?{success:!0,message:"🎉 Payment successful!",orderCode:s.order_code,tradeCode:s.order_trade_code}:(s==null?void 0:s.payment_status)===b.PENDING?{success:!1,message:"Payment was not successful. Please try a different payment method or card.",orderCode:s.order_code}:{success:!1,message:`Payment failed, status: ${(s==null?void 0:s.payment_status)||"Unknown"}. Please try again.`,orderCode:s==null?void 0:s.order_code}}catch(n){return console.error("Error occurred during order process:",n),{success:!1,message:"An error occurred during the order process, please try again."}}finally{o(!1)}},[l,x,h]);return{isSubmitting:r,submitOrder:m}},j=()=>{const{isFormValid:r,onOrderSubmit:o,onOrderSuccess:l}=C(),{checkoutProducts:x,totalAmount:h}=_(),{isSubmitting:m,submitOrder:u}=S(),[c,t]=g.useState(""),[i,d]=g.useState(""),[n,f]=g.useState(!1),p=async()=>{if(t(""),d(""),!r()){t("Please fill in all information and make sure it is valid!");return}o==null||o(x,h);const a=await u();if(a.success){f(!0);let s=a.message;a.orderCode&&(s+=`
-Order Number: ${a.orderCode}`),a.tradeCode&&(s+=`
-Transaction ID: ${a.tradeCode}`),d(s),a.orderCode&&(l==null||l(a.orderCode,a.tradeCode))}else t(a.message)};return e.jsxs("div",{className:"clickaroo-checkout-ui w-full flex flex-col items-center",children:[e.jsxs("button",{type:"button",onClick:p,className:`w-full outline-none border-none text-white font-bold text-center text-lg py-5 rounded-md mb-4 transition-all duration-300 relative overflow-hidden ${r()&&!m&&!n?"bg-black hover:opacity-70":n?"bg-green-500 cursor-not-allowed":m?"bg-blue-600 cursor-not-allowed":"bg-gray-400 cursor-not-allowed"}`,disabled:!r()||m||n,children:[m&&e.jsx("div",{className:"absolute inset-0 bg-gradient-to-r from-blue-600 via-blue-500 to-blue-600 bg-[length:200%_100%] animate-[shimmer_2s_ease-in-out_infinite]"}),e.jsx("span",{className:"relative z-10 flex items-center justify-center",children:n?"✓ Order Complete - Redirecting...":m?e.jsxs(e.Fragment,{children:[e.jsxs("svg",{className:"animate-spin -ml-1 mr-3 h-5 w-5 text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.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"})]}),"Processing..."]}):"Complete Order"})]}),i&&e.jsx("div",{className:"w-full mb-4 p-4 bg-green-50 border border-green-200 rounded-lg",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx("div",{className:"flex-shrink-0",children:e.jsx("svg",{className:"h-5 w-5 text-green-400",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}),e.jsx("div",{className:"ml-3",children:e.jsx("p",{className:"text-sm text-green-700 whitespace-pre-line m-0",children:i})}),e.jsx("div",{className:"ml-auto pl-3",children:e.jsx("div",{className:"-mx-1.5 -my-1.5",children:e.jsxs("button",{type:"button",onClick:()=>d(""),className:"border-none inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600",children:[e.jsx("span",{className:"sr-only",children:"Close"}),e.jsx("svg",{className:"h-3 w-3",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})})})]})}),c&&e.jsx("div",{className:"w-full mb-4 p-4 bg-red-50 border border-red-200 rounded-lg",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx("div",{className:"flex-shrink-0",children:e.jsx("svg",{className:"h-5 w-5 text-red-400",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",clipRule:"evenodd"})})}),e.jsx("div",{className:"ml-3",children:e.jsx("p",{className:"text-sm text-red-700 whitespace-pre-line",children:c})}),e.jsx("div",{className:"ml-auto pl-3",children:e.jsx("div",{className:"-mx-1.5 -my-1.5",children:e.jsxs("button",{type:"button",onClick:()=>t(""),className:"inline-flex bg-red-50 rounded-md p-1.5 text-[#df1b41] hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600",children:[e.jsx("span",{className:"sr-only",children:"Close"}),e.jsx("svg",{className:"h-3 w-3",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})})})]})}),e.jsx("div",{className:"flex items-center text-grey text-sm md:text-base",children:e.jsx("span",{className:"text-center",children:"All transactions are SSL secure and encrypted"})}),e.jsx(k,{show:m,message:"Processing Your Order"})]})};j.__docgenInfo={description:"",methods:[],displayName:"SubmitButton"};const L=r=>e.jsx(v,{cart:r.cart,onCheckoutInit:r.onCheckoutInit,onPaymentInfoComplete:r.onPaymentInfoComplete,onOrderSubmit:r.onOrderSubmit,onOrderSuccess:r.onOrderSuccess,googleApiKey:r.googleApiKey,children:e.jsxs("div",{className:"clickaroo-checkout-ui flex flex-col gap-5",children:[e.jsx(O,{}),e.jsx(N,{}),e.jsx(P,{}),e.jsx(j,{})]})});L.__docgenInfo={description:"",methods:[],displayName:"CheckoutPage",props:{cart:{required:!0,tsType:{name:"Array",elements:[{name:"CartItem"}],raw:"CartItem[]"},description:""},onCheckoutInit:{required:!1,tsType:{name:"OnCheckoutInitCallback"},description:""},onPaymentInfoComplete:{required:!1,tsType:{name:"OnPaymentInfoCompleteCallback"},description:""},onOrderSubmit:{required:!1,tsType:{name:"OnOrderSubmitCallback"},description:""},onOrderSuccess:{required:!1,tsType:{name:"OnOrderSuccessCallback"},description:""},googleApiKey:{required:!1,tsType:{name:"string"},description:""}}};export{L as C,S as u};

package/dist/storybook/storybook-static/assets/CheckoutPage-C21Znq4d.js

@@ -1,3 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{g as w,b as C,C as v}from"./useCheckoutContext-w0N5TNgR.js";import{C as N}from"./CustomerInfo-CYLNdAoo.js";import{D as P}from"./DeliveryAddress-BBT_-q56.js";import{u as _,P as O}from"./PaymentMethods-B1IKDQ7d.js";import{r as g}from"./index-DRjF_FHU.js";const k=({message:r="Processing...",show:o})=>o?e.jsxs("div",{className:"fixed inset-0 z-50 flex items-center justify-center",children:[e.jsx("div",{className:"absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"}),e.jsxs("div",{className:"relative z-10 flex flex-col items-center justify-center p-8 bg-white rounded-2xl shadow-2xl max-w-sm mx-4",children:[e.jsxs("div",{className:"relative mb-6",children:[e.jsx("div",{className:"w-16 h-16 border-4 border-gray-200 rounded-full"}),e.jsx("div",{className:"absolute top-0 left-0 w-16 h-16 border-4 border-solid border-blue-500 border-t-transparent rounded-full animate-spin"}),e.jsx("div",{className:"absolute top-1/2 left-1/2 w-2 h-2 bg-blue-500 rounded-full transform -translate-x-1/2 -translate-y-1/2"})]}),e.jsxs("div",{className:"text-center",children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-800 mb-2",children:r}),e.jsx("p",{className:"text-gray-500 text-sm",children:"Please wait while we process your request..."})]}),e.jsxs("div",{className:"flex space-x-1 mt-6",children:[e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce"}),e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{animationDelay:"0.1s"}}),e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{animationDelay:"0.2s"}})]})]})]}):null;k.__docgenInfo={description:"",methods:[],displayName:"FullScreenLoading",props:{message:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Processing..."',computed:!1}},show:{required:!0,tsType:{name:"boolean"},description:""}}};const I=async r=>{try{console.log("Creating order with data:",r);const o=await fetch(`${w()}/orders`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r)}),l=await o.json();return o.ok?(console.log("Order created successfully:",l),{success:!0,data:l}):(console.error("Order creation failed:",l),{success:!1,error:{message:l.message||`HTTP ${o.status}: ${o.statusText}`,code:l.code,details:l}})}catch(o){return console.error("Network error creating order:",o),{success:!1,error:{message:o instanceof Error?o.message:"Network error occurred",details:{originalError:o}}}}};var b=(r=>(r.PENDING="pending",r.PAID="paid",r.PARTIALLY_PAID="partially_paid",r.FAILED="failed",r))(b||{});const S=()=>{const[r,o]=g.useState(!1),l=C(),x=g.useCallback(async(u,c,t)=>{console.log("Creating confirmation token with:",{stripeExists:!!u,elementsExists:!!c});try{console.log("Calling elements.submit()...");const{error:i}=await c.submit();if(i)return console.error("Elements submit error:",i),{error:i.message};console.log("Elements submitted successfully, creating confirmation token...");const{confirmationToken:d,error:n}=await u.createConfirmationToken({elements:c,params:{payment_method_data:{billing_details:{name:`${t.firstName} ${t.lastName}`,email:t.email,phone:t.phone}}}});return n?(console.error("Confirmation token creation error:",n),{error:n.message}):d?(console.log("Confirmation token created successfully:",d.id),{token:d.id}):{error:"Failed to create confirmation token"}}catch(i){return console.error("Error creating confirmation token:",i),{error:"Failed to create confirmation token"}}},[]),h=g.useCallback(u=>{const{customerInfo:c,deliveryAddress:t,clickarooToken:i,cart:d}=l,n=typeof window<"u"?window.location.href:"",f=`${c.firstName} ${c.lastName}`.trim(),p=i&&i.trim()!==""?i:null,a={country:t.country,state:t.state,city:t.city,address1:t.address,zip:t.zipCode};t.address2&&t.address2.trim()!==""&&(a.address2=t.address2);const s={clickaroo_token:p,customer_info:{name:f,email:c.email,phone:c.phone},shipping_address:a,source_url:n,remark:"",metadata:{sub4:typeof window<"u"&&new URLSearchParams(window.location.search).get("sub4")||""},payment:{type:"stripe",data:{confirmation_token_id:u,payment_method_types:["card"]}}};return s.items=d.map(y=>({sku:y.sku,price_point_code:y.offerPricePoint})),s.metadata.products=d,console.log("Built order data:",s),s},[l]),m=g.useCallback(async()=>{var d;const{stripeState:u,customerInfo:c}=l,{stripe:t,elements:i}=u;if(!t||!i)return{success:!1,message:"Payment system not ready"};o(!0);try{console.log("Creating confirmation token...");const{token:n,error:f}=await x(t,i,c);if(f)return console.error("Failed to create confirmation token:",f),{success:!1,message:`Payment processing failed: ${f}`};if(!n)return{success:!1,message:"Failed to get payment token, please try again."};console.log("Confirmation token created successfully:",n);const p=h(n);console.log("Submitting order...");const a=await I(p);if(!a.success)return console.error("Order submission failed:",a.error),{success:!1,message:`Order submission failed: ${((d=a.error)==null?void 0:d.message)||"Unknown error"}`};const{data:s}=a;return console.log("Order submitted successfully:",s),(s==null?void 0:s.payment_status)===b.PAID?{success:!0,message:"🎉 Payment successful!",orderCode:s.order_code,tradeCode:s.order_trade_code}:(s==null?void 0:s.payment_status)===b.PENDING?{success:!1,message:"Payment was not successful. Please try a different payment method or card.",orderCode:s.order_code}:{success:!1,message:`Payment failed, status: ${(s==null?void 0:s.payment_status)||"Unknown"}. Please try again.`,orderCode:s==null?void 0:s.order_code}}catch(n){return console.error("Error occurred during order process:",n),{success:!1,message:"An error occurred during the order process, please try again."}}finally{o(!1)}},[l,x,h]);return{isSubmitting:r,submitOrder:m}},j=()=>{const{isFormValid:r,onOrderSubmit:o,onOrderSuccess:l}=C(),{checkoutProducts:x,totalAmount:h}=_(),{isSubmitting:m,submitOrder:u}=S(),[c,t]=g.useState(""),[i,d]=g.useState(""),[n,f]=g.useState(!1),p=async()=>{if(t(""),d(""),!r()){t("Please fill in all information and make sure it is valid!");return}o==null||o(x,h);const a=await u();if(a.success){f(!0);let s=a.message;a.orderCode&&(s+=`
-Order Number: ${a.orderCode}`),a.tradeCode&&(s+=`
-Transaction ID: ${a.tradeCode}`),d(s),a.orderCode&&(l==null||l(a.orderCode,a.tradeCode))}else t(a.message)};return e.jsxs("div",{className:"clickaroo-checkout-ui w-full flex flex-col items-center",children:[e.jsxs("button",{type:"button",onClick:p,className:`w-full outline-none border-none text-white font-bold text-center text-lg py-5 rounded-md mb-4 transition-all duration-300 relative overflow-hidden ${r()&&!m&&!n?"bg-black hover:opacity-70":n?"bg-green-500 cursor-not-allowed":m?"bg-blue-600 cursor-not-allowed":"bg-gray-400 cursor-not-allowed"}`,disabled:!r()||m||n,children:[m&&e.jsx("div",{className:"absolute inset-0 bg-gradient-to-r from-blue-600 via-blue-500 to-blue-600 bg-[length:200%_100%] animate-[shimmer_2s_ease-in-out_infinite]"}),e.jsx("span",{className:"relative z-10 flex items-center justify-center",children:n?"✓ Order Complete - Redirecting...":m?e.jsxs(e.Fragment,{children:[e.jsxs("svg",{className:"animate-spin -ml-1 mr-3 h-5 w-5 text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.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"})]}),"Processing..."]}):"Complete Order"})]}),i&&e.jsx("div",{className:"w-full mb-4 p-4 bg-green-50 border border-green-200 rounded-lg",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx("div",{className:"flex-shrink-0",children:e.jsx("svg",{className:"h-5 w-5 text-green-400",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}),e.jsx("div",{className:"ml-3",children:e.jsx("p",{className:"text-sm text-green-700 whitespace-pre-line m-0",children:i})}),e.jsx("div",{className:"ml-auto pl-3",children:e.jsx("div",{className:"-mx-1.5 -my-1.5",children:e.jsxs("button",{type:"button",onClick:()=>d(""),className:"border-none inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600",children:[e.jsx("span",{className:"sr-only",children:"Close"}),e.jsx("svg",{className:"h-3 w-3",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})})})]})}),c&&e.jsx("div",{className:"w-full mb-4 p-4 bg-red-50 border border-red-200 rounded-lg",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx("div",{className:"flex-shrink-0",children:e.jsx("svg",{className:"h-5 w-5 text-red-400",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",clipRule:"evenodd"})})}),e.jsx("div",{className:"ml-3",children:e.jsx("p",{className:"text-sm text-red-700 whitespace-pre-line",children:c})}),e.jsx("div",{className:"ml-auto pl-3",children:e.jsx("div",{className:"-mx-1.5 -my-1.5",children:e.jsxs("button",{type:"button",onClick:()=>t(""),className:"inline-flex bg-red-50 rounded-md p-1.5 text-[#df1b41] hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600",children:[e.jsx("span",{className:"sr-only",children:"Close"}),e.jsx("svg",{className:"h-3 w-3",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})})})]})}),e.jsx("div",{className:"flex items-center text-grey text-sm md:text-base",children:e.jsx("span",{className:"text-center",children:"All transactions are SSL secure and encrypted"})}),e.jsx(k,{show:m,message:"Processing Your Order"})]})};j.__docgenInfo={description:"",methods:[],displayName:"SubmitButton"};const L=r=>e.jsx(v,{cart:r.cart,onCheckoutInit:r.onCheckoutInit,onPaymentInfoComplete:r.onPaymentInfoComplete,onOrderSubmit:r.onOrderSubmit,onOrderSuccess:r.onOrderSuccess,googleApiKey:r.googleApiKey,children:e.jsxs("div",{className:"clickaroo-checkout-ui flex flex-col gap-5",children:[e.jsx(O,{}),e.jsx(N,{}),e.jsx(P,{}),e.jsx(j,{})]})});L.__docgenInfo={description:"",methods:[],displayName:"CheckoutPage",props:{cart:{required:!0,tsType:{name:"Array",elements:[{name:"CartItem"}],raw:"CartItem[]"},description:""},onCheckoutInit:{required:!1,tsType:{name:"OnCheckoutInitCallback"},description:""},onPaymentInfoComplete:{required:!1,tsType:{name:"OnPaymentInfoCompleteCallback"},description:""},onOrderSubmit:{required:!1,tsType:{name:"OnOrderSubmitCallback"},description:""},onOrderSuccess:{required:!1,tsType:{name:"OnOrderSuccessCallback"},description:""},googleApiKey:{required:!1,tsType:{name:"string"},description:""}}};export{L as C,S as u};

package/dist/storybook/storybook-static/assets/CheckoutPage-CDW7SRyI.js

@@ -1,3 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{g as w,b as C,C as v}from"./useCheckoutContext-C7KjDyWW.js";import{C as N}from"./CustomerInfo-CPNuEjrH.js";import{D as P}from"./DeliveryAddress-CeuByf4d.js";import{u as _,P as O}from"./PaymentMethods-BFtlMopq.js";import{r as g}from"./index-DRjF_FHU.js";const k=({message:r="Processing...",show:o})=>o?e.jsxs("div",{className:"fixed inset-0 z-50 flex items-center justify-center",children:[e.jsx("div",{className:"absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"}),e.jsxs("div",{className:"relative z-10 flex flex-col items-center justify-center p-8 bg-white rounded-2xl shadow-2xl max-w-sm mx-4",children:[e.jsxs("div",{className:"relative mb-6",children:[e.jsx("div",{className:"w-16 h-16 border-4 border-gray-200 rounded-full"}),e.jsx("div",{className:"absolute top-0 left-0 w-16 h-16 border-4 border-solid border-blue-500 border-t-transparent rounded-full animate-spin"}),e.jsx("div",{className:"absolute top-1/2 left-1/2 w-2 h-2 bg-blue-500 rounded-full transform -translate-x-1/2 -translate-y-1/2"})]}),e.jsxs("div",{className:"text-center",children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-800 mb-2",children:r}),e.jsx("p",{className:"text-gray-500 text-sm",children:"Please wait while we process your request..."})]}),e.jsxs("div",{className:"flex space-x-1 mt-6",children:[e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce"}),e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{animationDelay:"0.1s"}}),e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{animationDelay:"0.2s"}})]})]})]}):null;k.__docgenInfo={description:"",methods:[],displayName:"FullScreenLoading",props:{message:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Processing..."',computed:!1}},show:{required:!0,tsType:{name:"boolean"},description:""}}};const I=async r=>{try{console.log("Creating order with data:",r);const o=await fetch(`${w()}/orders`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r)}),l=await o.json();return o.ok?(console.log("Order created successfully:",l),{success:!0,data:l}):(console.error("Order creation failed:",l),{success:!1,error:{message:l.message||`HTTP ${o.status}: ${o.statusText}`,code:l.code,details:l}})}catch(o){return console.error("Network error creating order:",o),{success:!1,error:{message:o instanceof Error?o.message:"Network error occurred",details:{originalError:o}}}}};var b=(r=>(r.PENDING="pending",r.PAID="paid",r.PARTIALLY_PAID="partially_paid",r.FAILED="failed",r))(b||{});const S=()=>{const[r,o]=g.useState(!1),l=C(),x=g.useCallback(async(u,c,t)=>{console.log("Creating confirmation token with:",{stripeExists:!!u,elementsExists:!!c});try{console.log("Calling elements.submit()...");const{error:i}=await c.submit();if(i)return console.error("Elements submit error:",i),{error:i.message};console.log("Elements submitted successfully, creating confirmation token...");const{confirmationToken:d,error:n}=await u.createConfirmationToken({elements:c,params:{payment_method_data:{billing_details:{name:`${t.firstName} ${t.lastName}`,email:t.email,phone:t.phone}}}});return n?(console.error("Confirmation token creation error:",n),{error:n.message}):d?(console.log("Confirmation token created successfully:",d.id),{token:d.id}):{error:"Failed to create confirmation token"}}catch(i){return console.error("Error creating confirmation token:",i),{error:"Failed to create confirmation token"}}},[]),h=g.useCallback(u=>{const{customerInfo:c,deliveryAddress:t,clickarooToken:i,cart:d}=l,n=typeof window<"u"?window.location.href:"",f=`${c.firstName} ${c.lastName}`.trim(),p=i&&i.trim()!==""?i:null,a={country:t.country,state:t.state,city:t.city,address1:t.address,zip:t.zipCode};t.address2&&t.address2.trim()!==""&&(a.address2=t.address2);const s={clickaroo_token:p,customer_info:{name:f,email:c.email,phone:c.phone},shipping_address:a,source_url:n,remark:"",metadata:{sub4:typeof window<"u"&&new URLSearchParams(window.location.search).get("sub4")||""},payment:{type:"stripe",data:{confirmation_token_id:u,payment_method_types:["card"]}}};return s.items=d.map(y=>({sku:y.sku,price_point_code:y.offerPricePoint})),s.metadata.products=d,console.log("Built order data:",s),s},[l]),m=g.useCallback(async()=>{var d;const{stripeState:u,customerInfo:c}=l,{stripe:t,elements:i}=u;if(!t||!i)return{success:!1,message:"Payment system not ready"};o(!0);try{console.log("Creating confirmation token...");const{token:n,error:f}=await x(t,i,c);if(f)return console.error("Failed to create confirmation token:",f),{success:!1,message:`Payment processing failed: ${f}`};if(!n)return{success:!1,message:"Failed to get payment token, please try again."};console.log("Confirmation token created successfully:",n);const p=h(n);console.log("Submitting order...");const a=await I(p);if(!a.success)return console.error("Order submission failed:",a.error),{success:!1,message:`Order submission failed: ${((d=a.error)==null?void 0:d.message)||"Unknown error"}`};const{data:s}=a;return console.log("Order submitted successfully:",s),(s==null?void 0:s.payment_status)===b.PAID?{success:!0,message:"🎉 Payment successful!",orderCode:s.order_code,tradeCode:s.order_trade_code}:(s==null?void 0:s.payment_status)===b.PENDING?{success:!1,message:"Payment was not successful. Please try a different payment method or card.",orderCode:s.order_code}:{success:!1,message:`Payment failed, status: ${(s==null?void 0:s.payment_status)||"Unknown"}. Please try again.`,orderCode:s==null?void 0:s.order_code}}catch(n){return console.error("Error occurred during order process:",n),{success:!1,message:"An error occurred during the order process, please try again."}}finally{o(!1)}},[l,x,h]);return{isSubmitting:r,submitOrder:m}},j=()=>{const{isFormValid:r,onOrderSubmit:o,onOrderSuccess:l}=C(),{checkoutProducts:x,totalAmount:h}=_(),{isSubmitting:m,submitOrder:u}=S(),[c,t]=g.useState(""),[i,d]=g.useState(""),[n,f]=g.useState(!1),p=async()=>{if(t(""),d(""),!r()){t("Please fill in all information and make sure it is valid!");return}o==null||o(x,h);const a=await u();if(a.success){f(!0);let s=a.message;a.orderCode&&(s+=`
-Order Number: ${a.orderCode}`),a.tradeCode&&(s+=`
-Transaction ID: ${a.tradeCode}`),d(s),a.orderCode&&(l==null||l(a.orderCode,a.tradeCode))}else t(a.message)};return e.jsxs("div",{className:"clickaroo-checkout-ui w-full flex flex-col items-center",children:[e.jsxs("button",{type:"button",onClick:p,className:`w-full outline-none border-none text-white font-bold text-center text-lg py-5 rounded-md mb-4 transition-all duration-300 relative overflow-hidden ${r()&&!m&&!n?"bg-black hover:opacity-70":n?"bg-green-500 cursor-not-allowed":m?"bg-blue-600 cursor-not-allowed":"bg-gray-400 cursor-not-allowed"}`,disabled:!r()||m||n,children:[m&&e.jsx("div",{className:"absolute inset-0 bg-gradient-to-r from-blue-600 via-blue-500 to-blue-600 bg-[length:200%_100%] animate-[shimmer_2s_ease-in-out_infinite]"}),e.jsx("span",{className:"relative z-10 flex items-center justify-center",children:n?"✓ Order Complete - Redirecting...":m?e.jsxs(e.Fragment,{children:[e.jsxs("svg",{className:"animate-spin -ml-1 mr-3 h-5 w-5 text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.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"})]}),"Processing..."]}):"Complete Order"})]}),i&&e.jsx("div",{className:"w-full mb-4 p-4 bg-green-50 border border-green-200 rounded-lg",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx("div",{className:"flex-shrink-0",children:e.jsx("svg",{className:"h-5 w-5 text-green-400",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}),e.jsx("div",{className:"ml-3",children:e.jsx("p",{className:"text-sm text-green-700 whitespace-pre-line m-0",children:i})}),e.jsx("div",{className:"ml-auto pl-3",children:e.jsx("div",{className:"-mx-1.5 -my-1.5",children:e.jsxs("button",{type:"button",onClick:()=>d(""),className:"border-none inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600",children:[e.jsx("span",{className:"sr-only",children:"Close"}),e.jsx("svg",{className:"h-3 w-3",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})})})]})}),c&&e.jsx("div",{className:"w-full mb-4 p-4 bg-red-50 border border-red-200 rounded-lg",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx("div",{className:"flex-shrink-0",children:e.jsx("svg",{className:"h-5 w-5 text-red-400",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",clipRule:"evenodd"})})}),e.jsx("div",{className:"ml-3",children:e.jsx("p",{className:"text-sm text-red-700 whitespace-pre-line",children:c})}),e.jsx("div",{className:"ml-auto pl-3",children:e.jsx("div",{className:"-mx-1.5 -my-1.5",children:e.jsxs("button",{type:"button",onClick:()=>t(""),className:"inline-flex bg-red-50 rounded-md p-1.5 text-[#df1b41] hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600",children:[e.jsx("span",{className:"sr-only",children:"Close"}),e.jsx("svg",{className:"h-3 w-3",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})})})]})}),e.jsx("div",{className:"flex items-center text-grey text-sm md:text-base",children:e.jsx("span",{className:"text-center",children:"All transactions are SSL secure and encrypted"})}),e.jsx(k,{show:m,message:"Processing Your Order"})]})};j.__docgenInfo={description:"",methods:[],displayName:"SubmitButton"};const L=r=>e.jsx(v,{cart:r.cart,onCheckoutInit:r.onCheckoutInit,onPaymentInfoComplete:r.onPaymentInfoComplete,onOrderSubmit:r.onOrderSubmit,onOrderSuccess:r.onOrderSuccess,googleApiKey:r.googleApiKey,children:e.jsxs("div",{className:"clickaroo-checkout-ui flex flex-col gap-5",children:[e.jsx(O,{}),e.jsx(N,{}),e.jsx(P,{}),e.jsx(j,{})]})});L.__docgenInfo={description:"",methods:[],displayName:"CheckoutPage",props:{cart:{required:!0,tsType:{name:"Array",elements:[{name:"CartItem"}],raw:"CartItem[]"},description:""},onCheckoutInit:{required:!1,tsType:{name:"OnCheckoutInitCallback"},description:""},onPaymentInfoComplete:{required:!1,tsType:{name:"OnPaymentInfoCompleteCallback"},description:""},onOrderSubmit:{required:!1,tsType:{name:"OnOrderSubmitCallback"},description:""},onOrderSuccess:{required:!1,tsType:{name:"OnOrderSuccessCallback"},description:""},googleApiKey:{required:!1,tsType:{name:"string"},description:""}}};export{L as C,S as u};

package/dist/storybook/storybook-static/assets/CheckoutPage-CrHN6Fcv.js

@@ -1,3 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{g as w,b as C,C as v}from"./useCheckoutContext-DuJ1Ep0-.js";import{C as N}from"./CustomerInfo-D3WHpN32.js";import{D as P}from"./DeliveryAddress-Lfanl1PO.js";import{u as _,P as O}from"./PaymentMethods-e9HqQtxN.js";import{r as g}from"./index-DRjF_FHU.js";const k=({message:r="Processing...",show:o})=>o?e.jsxs("div",{className:"fixed inset-0 z-50 flex items-center justify-center",children:[e.jsx("div",{className:"absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"}),e.jsxs("div",{className:"relative z-10 flex flex-col items-center justify-center p-8 bg-white rounded-2xl shadow-2xl max-w-sm mx-4",children:[e.jsxs("div",{className:"relative mb-6",children:[e.jsx("div",{className:"w-16 h-16 border-4 border-gray-200 rounded-full"}),e.jsx("div",{className:"absolute top-0 left-0 w-16 h-16 border-4 border-solid border-blue-500 border-t-transparent rounded-full animate-spin"}),e.jsx("div",{className:"absolute top-1/2 left-1/2 w-2 h-2 bg-blue-500 rounded-full transform -translate-x-1/2 -translate-y-1/2"})]}),e.jsxs("div",{className:"text-center",children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-800 mb-2",children:r}),e.jsx("p",{className:"text-gray-500 text-sm",children:"Please wait while we process your request..."})]}),e.jsxs("div",{className:"flex space-x-1 mt-6",children:[e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce"}),e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{animationDelay:"0.1s"}}),e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{animationDelay:"0.2s"}})]})]})]}):null;k.__docgenInfo={description:"",methods:[],displayName:"FullScreenLoading",props:{message:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Processing..."',computed:!1}},show:{required:!0,tsType:{name:"boolean"},description:""}}};const I=async r=>{try{console.log("Creating order with data:",r);const o=await fetch(`${w()}/orders`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r)}),l=await o.json();return o.ok?(console.log("Order created successfully:",l),{success:!0,data:l}):(console.error("Order creation failed:",l),{success:!1,error:{message:l.message||`HTTP ${o.status}: ${o.statusText}`,code:l.code,details:l}})}catch(o){return console.error("Network error creating order:",o),{success:!1,error:{message:o instanceof Error?o.message:"Network error occurred",details:{originalError:o}}}}};var b=(r=>(r.PENDING="pending",r.PAID="paid",r.PARTIALLY_PAID="partially_paid",r.FAILED="failed",r))(b||{});const S=()=>{const[r,o]=g.useState(!1),l=C(),x=g.useCallback(async(u,c,t)=>{console.log("Creating confirmation token with:",{stripeExists:!!u,elementsExists:!!c});try{console.log("Calling elements.submit()...");const{error:i}=await c.submit();if(i)return console.error("Elements submit error:",i),{error:i.message};console.log("Elements submitted successfully, creating confirmation token...");const{confirmationToken:d,error:n}=await u.createConfirmationToken({elements:c,params:{payment_method_data:{billing_details:{name:`${t.firstName} ${t.lastName}`,email:t.email,phone:t.phone}}}});return n?(console.error("Confirmation token creation error:",n),{error:n.message}):d?(console.log("Confirmation token created successfully:",d.id),{token:d.id}):{error:"Failed to create confirmation token"}}catch(i){return console.error("Error creating confirmation token:",i),{error:"Failed to create confirmation token"}}},[]),h=g.useCallback(u=>{const{customerInfo:c,deliveryAddress:t,clickarooToken:i,cart:d}=l,n=typeof window<"u"?window.location.href:"",f=`${c.firstName} ${c.lastName}`.trim(),p=i&&i.trim()!==""?i:null,a={country:t.country,state:t.state,city:t.city,address1:t.address,zip:t.zipCode};t.address2&&t.address2.trim()!==""&&(a.address2=t.address2);const s={clickaroo_token:p,customer_info:{name:f,email:c.email,phone:c.phone},shipping_address:a,source_url:n,remark:"",metadata:{sub4:typeof window<"u"&&new URLSearchParams(window.location.search).get("sub4")||""},payment:{type:"stripe",data:{confirmation_token_id:u,payment_method_types:["card"]}}};return s.items=d.map(y=>({sku:y.sku,price_point_code:y.offerPricePoint})),s.metadata.products=d,console.log("Built order data:",s),s},[l]),m=g.useCallback(async()=>{var d;const{stripeState:u,customerInfo:c}=l,{stripe:t,elements:i}=u;if(!t||!i)return{success:!1,message:"Payment system not ready"};o(!0);try{console.log("Creating confirmation token...");const{token:n,error:f}=await x(t,i,c);if(f)return console.error("Failed to create confirmation token:",f),{success:!1,message:`Payment processing failed: ${f}`};if(!n)return{success:!1,message:"Failed to get payment token, please try again."};console.log("Confirmation token created successfully:",n);const p=h(n);console.log("Submitting order...");const a=await I(p);if(!a.success)return console.error("Order submission failed:",a.error),{success:!1,message:`Order submission failed: ${((d=a.error)==null?void 0:d.message)||"Unknown error"}`};const{data:s}=a;return console.log("Order submitted successfully:",s),(s==null?void 0:s.payment_status)===b.PAID?{success:!0,message:"🎉 Payment successful!",orderCode:s.order_code,tradeCode:s.order_trade_code}:(s==null?void 0:s.payment_status)===b.PENDING?{success:!1,message:"Payment was not successful. Please try a different payment method or card.",orderCode:s.order_code}:{success:!1,message:`Payment failed, status: ${(s==null?void 0:s.payment_status)||"Unknown"}. Please try again.`,orderCode:s==null?void 0:s.order_code}}catch(n){return console.error("Error occurred during order process:",n),{success:!1,message:"An error occurred during the order process, please try again."}}finally{o(!1)}},[l,x,h]);return{isSubmitting:r,submitOrder:m}},j=()=>{const{isFormValid:r,onOrderSubmit:o,onOrderSuccess:l}=C(),{checkoutProducts:x,totalAmount:h}=_(),{isSubmitting:m,submitOrder:u}=S(),[c,t]=g.useState(""),[i,d]=g.useState(""),[n,f]=g.useState(!1),p=async()=>{if(t(""),d(""),!r()){t("Please fill in all information and make sure it is valid!");return}o==null||o(x,h);const a=await u();if(a.success){f(!0);let s=a.message;a.orderCode&&(s+=`
-Order Number: ${a.orderCode}`),a.tradeCode&&(s+=`
-Transaction ID: ${a.tradeCode}`),d(s),a.orderCode&&(l==null||l(a.orderCode,a.tradeCode))}else t(a.message)};return e.jsxs("div",{className:"clickaroo-checkout-ui w-full flex flex-col items-center",children:[e.jsxs("button",{type:"button",onClick:p,className:`w-full outline-none border-none text-white font-bold text-center text-lg py-5 rounded-md mb-4 transition-all duration-300 relative overflow-hidden ${r()&&!m&&!n?"bg-black hover:opacity-70":n?"bg-green-500 cursor-not-allowed":m?"bg-blue-600 cursor-not-allowed":"bg-gray-400 cursor-not-allowed"}`,disabled:!r()||m||n,children:[m&&e.jsx("div",{className:"absolute inset-0 bg-gradient-to-r from-blue-600 via-blue-500 to-blue-600 bg-[length:200%_100%] animate-[shimmer_2s_ease-in-out_infinite]"}),e.jsx("span",{className:"relative z-10 flex items-center justify-center",children:n?"✓ Order Complete - Redirecting...":m?e.jsxs(e.Fragment,{children:[e.jsxs("svg",{className:"animate-spin -ml-1 mr-3 h-5 w-5 text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.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"})]}),"Processing..."]}):"Complete Order"})]}),i&&e.jsx("div",{className:"w-full mb-4 p-4 bg-green-50 border border-green-200 rounded-lg",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx("div",{className:"flex-shrink-0",children:e.jsx("svg",{className:"h-5 w-5 text-green-400",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}),e.jsx("div",{className:"ml-3",children:e.jsx("p",{className:"text-sm text-green-700 whitespace-pre-line m-0",children:i})}),e.jsx("div",{className:"ml-auto pl-3",children:e.jsx("div",{className:"-mx-1.5 -my-1.5",children:e.jsxs("button",{type:"button",onClick:()=>d(""),className:"border-none inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600",children:[e.jsx("span",{className:"sr-only",children:"Close"}),e.jsx("svg",{className:"h-3 w-3",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})})})]})}),c&&e.jsx("div",{className:"w-full mb-4 p-4 bg-red-50 border border-red-200 rounded-lg",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx("div",{className:"flex-shrink-0",children:e.jsx("svg",{className:"h-5 w-5 text-red-400",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",clipRule:"evenodd"})})}),e.jsx("div",{className:"ml-3",children:e.jsx("p",{className:"text-sm text-red-700 whitespace-pre-line",children:c})}),e.jsx("div",{className:"ml-auto pl-3",children:e.jsx("div",{className:"-mx-1.5 -my-1.5",children:e.jsxs("button",{type:"button",onClick:()=>t(""),className:"inline-flex bg-red-50 rounded-md p-1.5 text-[#df1b41] hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600",children:[e.jsx("span",{className:"sr-only",children:"Close"}),e.jsx("svg",{className:"h-3 w-3",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})})})]})}),e.jsx("div",{className:"flex items-center text-grey text-sm md:text-base",children:e.jsx("span",{className:"text-center",children:"All transactions are SSL secure and encrypted"})}),e.jsx(k,{show:m,message:"Processing Your Order"})]})};j.__docgenInfo={description:"",methods:[],displayName:"SubmitButton"};const L=r=>e.jsx(v,{cart:r.cart,onCheckoutInit:r.onCheckoutInit,onPaymentInfoComplete:r.onPaymentInfoComplete,onOrderSubmit:r.onOrderSubmit,onOrderSuccess:r.onOrderSuccess,googleApiKey:r.googleApiKey,children:e.jsxs("div",{className:"clickaroo-checkout-ui flex flex-col gap-5",children:[e.jsx(O,{}),e.jsx(N,{}),e.jsx(P,{}),e.jsx(j,{})]})});L.__docgenInfo={description:"",methods:[],displayName:"CheckoutPage",props:{cart:{required:!0,tsType:{name:"Array",elements:[{name:"CartItem"}],raw:"CartItem[]"},description:""},onCheckoutInit:{required:!1,tsType:{name:"OnCheckoutInitCallback"},description:""},onPaymentInfoComplete:{required:!1,tsType:{name:"OnPaymentInfoCompleteCallback"},description:""},onOrderSubmit:{required:!1,tsType:{name:"OnOrderSubmitCallback"},description:""},onOrderSuccess:{required:!1,tsType:{name:"OnOrderSuccessCallback"},description:""},googleApiKey:{required:!1,tsType:{name:"string"},description:""}}};export{L as C,S as u};

package/dist/storybook/storybook-static/assets/CheckoutPage-DFb28rrp.js

@@ -1,3 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{g as w,b as C,C as v}from"./useCheckoutContext-CroxIBFh.js";import{C as N}from"./CustomerInfo-BMTfZ9z3.js";import{D as P}from"./DeliveryAddress-DOxyPw17.js";import{u as _,P as O}from"./PaymentMethods-DxorWSOl.js";import{r as g}from"./index-DRjF_FHU.js";const k=({message:r="Processing...",show:o})=>o?e.jsxs("div",{className:"fixed inset-0 z-50 flex items-center justify-center",children:[e.jsx("div",{className:"absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"}),e.jsxs("div",{className:"relative z-10 flex flex-col items-center justify-center p-8 bg-white rounded-2xl shadow-2xl max-w-sm mx-4",children:[e.jsxs("div",{className:"relative mb-6",children:[e.jsx("div",{className:"w-16 h-16 border-4 border-gray-200 rounded-full"}),e.jsx("div",{className:"absolute top-0 left-0 w-16 h-16 border-4 border-solid border-blue-500 border-t-transparent rounded-full animate-spin"}),e.jsx("div",{className:"absolute top-1/2 left-1/2 w-2 h-2 bg-blue-500 rounded-full transform -translate-x-1/2 -translate-y-1/2"})]}),e.jsxs("div",{className:"text-center",children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-800 mb-2",children:r}),e.jsx("p",{className:"text-gray-500 text-sm",children:"Please wait while we process your request..."})]}),e.jsxs("div",{className:"flex space-x-1 mt-6",children:[e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce"}),e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{animationDelay:"0.1s"}}),e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{animationDelay:"0.2s"}})]})]})]}):null;k.__docgenInfo={description:"",methods:[],displayName:"FullScreenLoading",props:{message:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Processing..."',computed:!1}},show:{required:!0,tsType:{name:"boolean"},description:""}}};const I=async r=>{try{console.log("Creating order with data:",r);const o=await fetch(`${w()}/orders`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r)}),l=await o.json();return o.ok?(console.log("Order created successfully:",l),{success:!0,data:l}):(console.error("Order creation failed:",l),{success:!1,error:{message:l.message||`HTTP ${o.status}: ${o.statusText}`,code:l.code,details:l}})}catch(o){return console.error("Network error creating order:",o),{success:!1,error:{message:o instanceof Error?o.message:"Network error occurred",details:{originalError:o}}}}};var b=(r=>(r.PENDING="pending",r.PAID="paid",r.PARTIALLY_PAID="partially_paid",r.FAILED="failed",r))(b||{});const S=()=>{const[r,o]=g.useState(!1),l=C(),x=g.useCallback(async(u,c,t)=>{console.log("Creating confirmation token with:",{stripeExists:!!u,elementsExists:!!c});try{console.log("Calling elements.submit()...");const{error:i}=await c.submit();if(i)return console.error("Elements submit error:",i),{error:i.message};console.log("Elements submitted successfully, creating confirmation token...");const{confirmationToken:d,error:n}=await u.createConfirmationToken({elements:c,params:{payment_method_data:{billing_details:{name:`${t.firstName} ${t.lastName}`,email:t.email,phone:t.phone}}}});return n?(console.error("Confirmation token creation error:",n),{error:n.message}):d?(console.log("Confirmation token created successfully:",d.id),{token:d.id}):{error:"Failed to create confirmation token"}}catch(i){return console.error("Error creating confirmation token:",i),{error:"Failed to create confirmation token"}}},[]),h=g.useCallback(u=>{const{customerInfo:c,deliveryAddress:t,clickarooToken:i,cart:d}=l,n=typeof window<"u"?window.location.href:"",f=`${c.firstName} ${c.lastName}`.trim(),p=i&&i.trim()!==""?i:null,a={country:t.country,state:t.state,city:t.city,address1:t.address,zip:t.zipCode};t.address2&&t.address2.trim()!==""&&(a.address2=t.address2);const s={clickaroo_token:p,customer_info:{name:f,email:c.email,phone:c.phone},shipping_address:a,source_url:n,remark:"",metadata:{sub4:typeof window<"u"&&new URLSearchParams(window.location.search).get("sub4")||""},payment:{type:"stripe",data:{confirmation_token_id:u,payment_method_types:["card"]}}};return s.items=d.map(y=>({sku:y.sku,price_point_code:y.offerPricePoint})),s.metadata.products=d,console.log("Built order data:",s),s},[l]),m=g.useCallback(async()=>{var d;const{stripeState:u,customerInfo:c}=l,{stripe:t,elements:i}=u;if(!t||!i)return{success:!1,message:"Payment system not ready"};o(!0);try{console.log("Creating confirmation token...");const{token:n,error:f}=await x(t,i,c);if(f)return console.error("Failed to create confirmation token:",f),{success:!1,message:`Payment processing failed: ${f}`};if(!n)return{success:!1,message:"Failed to get payment token, please try again."};console.log("Confirmation token created successfully:",n);const p=h(n);console.log("Submitting order...");const a=await I(p);if(!a.success)return console.error("Order submission failed:",a.error),{success:!1,message:`Order submission failed: ${((d=a.error)==null?void 0:d.message)||"Unknown error"}`};const{data:s}=a;return console.log("Order submitted successfully:",s),(s==null?void 0:s.payment_status)===b.PAID?{success:!0,message:"🎉 Payment successful!",orderCode:s.order_code,tradeCode:s.order_trade_code}:(s==null?void 0:s.payment_status)===b.PENDING?{success:!1,message:"Payment was not successful. Please try a different payment method or card.",orderCode:s.order_code}:{success:!1,message:`Payment failed, status: ${(s==null?void 0:s.payment_status)||"Unknown"}. Please try again.`,orderCode:s==null?void 0:s.order_code}}catch(n){return console.error("Error occurred during order process:",n),{success:!1,message:"An error occurred during the order process, please try again."}}finally{o(!1)}},[l,x,h]);return{isSubmitting:r,submitOrder:m}},j=()=>{const{isFormValid:r,onOrderSubmit:o,onOrderSuccess:l}=C(),{checkoutProducts:x,totalAmount:h}=_(),{isSubmitting:m,submitOrder:u}=S(),[c,t]=g.useState(""),[i,d]=g.useState(""),[n,f]=g.useState(!1),p=async()=>{if(t(""),d(""),!r()){t("Please fill in all information and make sure it is valid!");return}o==null||o(x,h);const a=await u();if(a.success){f(!0);let s=a.message;a.orderCode&&(s+=`
-Order Number: ${a.orderCode}`),a.tradeCode&&(s+=`
-Transaction ID: ${a.tradeCode}`),d(s),a.orderCode&&(l==null||l(a.orderCode,a.tradeCode))}else t(a.message)};return e.jsxs("div",{className:"clickaroo-checkout-ui w-full flex flex-col items-center",children:[e.jsxs("button",{type:"button",onClick:p,className:`w-full outline-none border-none text-white font-bold text-center text-lg py-5 rounded-md mb-4 transition-all duration-300 relative overflow-hidden ${r()&&!m&&!n?"bg-black hover:opacity-70":n?"bg-green-500 cursor-not-allowed":m?"bg-blue-600 cursor-not-allowed":"bg-gray-400 cursor-not-allowed"}`,disabled:!r()||m||n,children:[m&&e.jsx("div",{className:"absolute inset-0 bg-gradient-to-r from-blue-600 via-blue-500 to-blue-600 bg-[length:200%_100%] animate-[shimmer_2s_ease-in-out_infinite]"}),e.jsx("span",{className:"relative z-10 flex items-center justify-center",children:n?"✓ Order Complete - Redirecting...":m?e.jsxs(e.Fragment,{children:[e.jsxs("svg",{className:"animate-spin -ml-1 mr-3 h-5 w-5 text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.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"})]}),"Processing..."]}):"Complete Order"})]}),i&&e.jsx("div",{className:"w-full mb-4 p-4 bg-green-50 border border-green-200 rounded-lg",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx("div",{className:"flex-shrink-0",children:e.jsx("svg",{className:"h-5 w-5 text-green-400",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}),e.jsx("div",{className:"ml-3",children:e.jsx("p",{className:"text-sm text-green-700 whitespace-pre-line m-0",children:i})}),e.jsx("div",{className:"ml-auto pl-3",children:e.jsx("div",{className:"-mx-1.5 -my-1.5",children:e.jsxs("button",{type:"button",onClick:()=>d(""),className:"border-none inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600",children:[e.jsx("span",{className:"sr-only",children:"Close"}),e.jsx("svg",{className:"h-3 w-3",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})})})]})}),c&&e.jsx("div",{className:"w-full mb-4 p-4 bg-red-50 border border-red-200 rounded-lg",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx("div",{className:"flex-shrink-0",children:e.jsx("svg",{className:"h-5 w-5 text-red-400",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",clipRule:"evenodd"})})}),e.jsx("div",{className:"ml-3",children:e.jsx("p",{className:"text-sm text-red-700 whitespace-pre-line",children:c})}),e.jsx("div",{className:"ml-auto pl-3",children:e.jsx("div",{className:"-mx-1.5 -my-1.5",children:e.jsxs("button",{type:"button",onClick:()=>t(""),className:"inline-flex bg-red-50 rounded-md p-1.5 text-[#df1b41] hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600",children:[e.jsx("span",{className:"sr-only",children:"Close"}),e.jsx("svg",{className:"h-3 w-3",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})})})]})}),e.jsx("div",{className:"flex items-center text-grey text-sm md:text-base",children:e.jsx("span",{className:"text-center",children:"All transactions are SSL secure and encrypted"})}),e.jsx(k,{show:m,message:"Processing Your Order"})]})};j.__docgenInfo={description:"",methods:[],displayName:"SubmitButton"};const L=r=>e.jsx(v,{cart:r.cart,onCheckoutInit:r.onCheckoutInit,onPaymentInfoComplete:r.onPaymentInfoComplete,onOrderSubmit:r.onOrderSubmit,onOrderSuccess:r.onOrderSuccess,googleApiKey:r.googleApiKey,children:e.jsxs("div",{className:"clickaroo-checkout-ui flex flex-col gap-5",children:[e.jsx(O,{}),e.jsx(N,{}),e.jsx(P,{}),e.jsx(j,{})]})});L.__docgenInfo={description:"",methods:[],displayName:"CheckoutPage",props:{cart:{required:!0,tsType:{name:"Array",elements:[{name:"CartItem"}],raw:"CartItem[]"},description:""},onCheckoutInit:{required:!1,tsType:{name:"OnCheckoutInitCallback"},description:""},onPaymentInfoComplete:{required:!1,tsType:{name:"OnPaymentInfoCompleteCallback"},description:""},onOrderSubmit:{required:!1,tsType:{name:"OnOrderSubmitCallback"},description:""},onOrderSuccess:{required:!1,tsType:{name:"OnOrderSuccessCallback"},description:""},googleApiKey:{required:!1,tsType:{name:"string"},description:""}}};export{L as C,S as u};

package/dist/storybook/storybook-static/assets/CheckoutPage-DSLcTghb.js

@@ -1,3 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{g as w,b as C,C as v}from"./useCheckoutContext-BW2h13W8.js";import{C as N}from"./CustomerInfo-DShSrjMR.js";import{D as P}from"./DeliveryAddress-DY5lFnTv.js";import{u as _,P as O}from"./PaymentMethods-DmV3o0ow.js";import{r as g}from"./index-DRjF_FHU.js";const k=({message:r="Processing...",show:o})=>o?e.jsxs("div",{className:"fixed inset-0 z-50 flex items-center justify-center",children:[e.jsx("div",{className:"absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"}),e.jsxs("div",{className:"relative z-10 flex flex-col items-center justify-center p-8 bg-white rounded-2xl shadow-2xl max-w-sm mx-4",children:[e.jsxs("div",{className:"relative mb-6",children:[e.jsx("div",{className:"w-16 h-16 border-4 border-gray-200 rounded-full"}),e.jsx("div",{className:"absolute top-0 left-0 w-16 h-16 border-4 border-solid border-blue-500 border-t-transparent rounded-full animate-spin"}),e.jsx("div",{className:"absolute top-1/2 left-1/2 w-2 h-2 bg-blue-500 rounded-full transform -translate-x-1/2 -translate-y-1/2"})]}),e.jsxs("div",{className:"text-center",children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-800 mb-2",children:r}),e.jsx("p",{className:"text-gray-500 text-sm",children:"Please wait while we process your request..."})]}),e.jsxs("div",{className:"flex space-x-1 mt-6",children:[e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce"}),e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{animationDelay:"0.1s"}}),e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{animationDelay:"0.2s"}})]})]})]}):null;k.__docgenInfo={description:"",methods:[],displayName:"FullScreenLoading",props:{message:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Processing..."',computed:!1}},show:{required:!0,tsType:{name:"boolean"},description:""}}};const I=async r=>{try{console.log("Creating order with data:",r);const o=await fetch(`${w()}/orders`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r)}),l=await o.json();return o.ok?(console.log("Order created successfully:",l),{success:!0,data:l}):(console.error("Order creation failed:",l),{success:!1,error:{message:l.message||`HTTP ${o.status}: ${o.statusText}`,code:l.code,details:l}})}catch(o){return console.error("Network error creating order:",o),{success:!1,error:{message:o instanceof Error?o.message:"Network error occurred",details:{originalError:o}}}}};var b=(r=>(r.PENDING="pending",r.PAID="paid",r.PARTIALLY_PAID="partially_paid",r.FAILED="failed",r))(b||{});const S=()=>{const[r,o]=g.useState(!1),l=C(),x=g.useCallback(async(u,c,t)=>{console.log("Creating confirmation token with:",{stripeExists:!!u,elementsExists:!!c});try{console.log("Calling elements.submit()...");const{error:i}=await c.submit();if(i)return console.error("Elements submit error:",i),{error:i.message};console.log("Elements submitted successfully, creating confirmation token...");const{confirmationToken:d,error:n}=await u.createConfirmationToken({elements:c,params:{payment_method_data:{billing_details:{name:`${t.firstName} ${t.lastName}`,email:t.email,phone:t.phone}}}});return n?(console.error("Confirmation token creation error:",n),{error:n.message}):d?(console.log("Confirmation token created successfully:",d.id),{token:d.id}):{error:"Failed to create confirmation token"}}catch(i){return console.error("Error creating confirmation token:",i),{error:"Failed to create confirmation token"}}},[]),h=g.useCallback(u=>{const{customerInfo:c,deliveryAddress:t,clickarooToken:i,cart:d}=l,n=typeof window<"u"?window.location.href:"",f=`${c.firstName} ${c.lastName}`.trim(),p=i&&i.trim()!==""?i:null,a={country:t.country,state:t.state,city:t.city,address1:t.address,zip:t.zipCode};t.address2&&t.address2.trim()!==""&&(a.address2=t.address2);const s={clickaroo_token:p,customer_info:{name:f,email:c.email,phone:c.phone},shipping_address:a,source_url:n,remark:"",metadata:{sub4:typeof window<"u"&&new URLSearchParams(window.location.search).get("sub4")||""},payment:{type:"stripe",data:{confirmation_token_id:u,payment_method_types:["card"]}}};return s.items=d.map(y=>({sku:y.sku,price_point_code:y.offerPricePoint})),s.metadata.products=d,console.log("Built order data:",s),s},[l]),m=g.useCallback(async()=>{var d;const{stripeState:u,customerInfo:c}=l,{stripe:t,elements:i}=u;if(!t||!i)return{success:!1,message:"Payment system not ready"};o(!0);try{console.log("Creating confirmation token...");const{token:n,error:f}=await x(t,i,c);if(f)return console.error("Failed to create confirmation token:",f),{success:!1,message:`Payment processing failed: ${f}`};if(!n)return{success:!1,message:"Failed to get payment token, please try again."};console.log("Confirmation token created successfully:",n);const p=h(n);console.log("Submitting order...");const a=await I(p);if(!a.success)return console.error("Order submission failed:",a.error),{success:!1,message:`Order submission failed: ${((d=a.error)==null?void 0:d.message)||"Unknown error"}`};const{data:s}=a;return console.log("Order submitted successfully:",s),(s==null?void 0:s.payment_status)===b.PAID?{success:!0,message:"🎉 Payment successful!",orderCode:s.order_code,tradeCode:s.order_trade_code}:(s==null?void 0:s.payment_status)===b.PENDING?{success:!1,message:"Payment was not successful. Please try a different payment method or card.",orderCode:s.order_code}:{success:!1,message:`Payment failed, status: ${(s==null?void 0:s.payment_status)||"Unknown"}. Please try again.`,orderCode:s==null?void 0:s.order_code}}catch(n){return console.error("Error occurred during order process:",n),{success:!1,message:"An error occurred during the order process, please try again."}}finally{o(!1)}},[l,x,h]);return{isSubmitting:r,submitOrder:m}},j=()=>{const{isFormValid:r,onOrderSubmit:o,onOrderSuccess:l}=C(),{checkoutProducts:x,totalAmount:h}=_(),{isSubmitting:m,submitOrder:u}=S(),[c,t]=g.useState(""),[i,d]=g.useState(""),[n,f]=g.useState(!1),p=async()=>{if(t(""),d(""),!r()){t("Please fill in all information and make sure it is valid!");return}o==null||o(x,h);const a=await u();if(a.success){f(!0);let s=a.message;a.orderCode&&(s+=`
-Order Number: ${a.orderCode}`),a.tradeCode&&(s+=`
-Transaction ID: ${a.tradeCode}`),d(s),a.orderCode&&(l==null||l(a.orderCode,a.tradeCode))}else t(a.message)};return e.jsxs("div",{className:"clickaroo-checkout-ui w-full flex flex-col items-center",children:[e.jsxs("button",{type:"button",onClick:p,className:`w-full outline-none border-none text-white font-bold text-center text-lg py-5 rounded-md mb-4 transition-all duration-300 relative overflow-hidden ${r()&&!m&&!n?"bg-black hover:opacity-70":n?"bg-green-500 cursor-not-allowed":m?"bg-blue-600 cursor-not-allowed":"bg-gray-400 cursor-not-allowed"}`,disabled:!r()||m||n,children:[m&&e.jsx("div",{className:"absolute inset-0 bg-gradient-to-r from-blue-600 via-blue-500 to-blue-600 bg-[length:200%_100%] animate-[shimmer_2s_ease-in-out_infinite]"}),e.jsx("span",{className:"relative z-10 flex items-center justify-center",children:n?"✓ Order Complete - Redirecting...":m?e.jsxs(e.Fragment,{children:[e.jsxs("svg",{className:"animate-spin -ml-1 mr-3 h-5 w-5 text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.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"})]}),"Processing..."]}):"Complete Order"})]}),i&&e.jsx("div",{className:"w-full mb-4 p-4 bg-green-50 border border-green-200 rounded-lg",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx("div",{className:"flex-shrink-0",children:e.jsx("svg",{className:"h-5 w-5 text-green-400",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}),e.jsx("div",{className:"ml-3",children:e.jsx("p",{className:"text-sm text-green-700 whitespace-pre-line m-0",children:i})}),e.jsx("div",{className:"ml-auto pl-3",children:e.jsx("div",{className:"-mx-1.5 -my-1.5",children:e.jsxs("button",{type:"button",onClick:()=>d(""),className:"border-none inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600",children:[e.jsx("span",{className:"sr-only",children:"Close"}),e.jsx("svg",{className:"h-3 w-3",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})})})]})}),c&&e.jsx("div",{className:"w-full mb-4 p-4 bg-red-50 border border-red-200 rounded-lg",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx("div",{className:"flex-shrink-0",children:e.jsx("svg",{className:"h-5 w-5 text-red-400",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",clipRule:"evenodd"})})}),e.jsx("div",{className:"ml-3",children:e.jsx("p",{className:"text-sm text-red-700 whitespace-pre-line",children:c})}),e.jsx("div",{className:"ml-auto pl-3",children:e.jsx("div",{className:"-mx-1.5 -my-1.5",children:e.jsxs("button",{type:"button",onClick:()=>t(""),className:"inline-flex bg-red-50 rounded-md p-1.5 text-[#df1b41] hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600",children:[e.jsx("span",{className:"sr-only",children:"Close"}),e.jsx("svg",{className:"h-3 w-3",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})})})]})}),e.jsx("div",{className:"flex items-center text-grey text-sm md:text-base",children:e.jsx("span",{className:"text-center",children:"All transactions are SSL secure and encrypted"})}),e.jsx(k,{show:m,message:"Processing Your Order"})]})};j.__docgenInfo={description:"",methods:[],displayName:"SubmitButton"};const L=r=>e.jsx(v,{cart:r.cart,onCheckoutInit:r.onCheckoutInit,onPaymentInfoComplete:r.onPaymentInfoComplete,onOrderSubmit:r.onOrderSubmit,onOrderSuccess:r.onOrderSuccess,googleApiKey:r.googleApiKey,children:e.jsxs("div",{className:"clickaroo-checkout-ui flex flex-col gap-5",children:[e.jsx(O,{}),e.jsx(N,{}),e.jsx(P,{}),e.jsx(j,{})]})});L.__docgenInfo={description:"",methods:[],displayName:"CheckoutPage",props:{cart:{required:!0,tsType:{name:"Array",elements:[{name:"CartItem"}],raw:"CartItem[]"},description:""},onCheckoutInit:{required:!1,tsType:{name:"OnCheckoutInitCallback"},description:""},onPaymentInfoComplete:{required:!1,tsType:{name:"OnPaymentInfoCompleteCallback"},description:""},onOrderSubmit:{required:!1,tsType:{name:"OnOrderSubmitCallback"},description:""},onOrderSuccess:{required:!1,tsType:{name:"OnOrderSuccessCallback"},description:""},googleApiKey:{required:!1,tsType:{name:"string"},description:""}}};export{L as C,S as u};