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

package/dist/storybook/storybook-static/assets/APIs.en-Bf5J1Ifk.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-CZFGp9Su.js";import"./index-DRjF_FHU.js";import"./iframe-PThBYPHV.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};