@cimplify/sdk 0.6.2 → 0.6.3

package/dist/react.d.mts

@@ -1,5 +1,5 @@
-import { eB as AdSlot, eC as AdPosition, eG as AdContextValue, y as CimplifyElements, C as CimplifyClient, J as ElementsOptions, ev as AuthenticatedData, et as AddressInfo, eu as PaymentMethodInfo, ex as ElementsCheckoutResult } from './ads-CXOn6J7P.mjs';
-export { eE as AdConfig } from './ads-CXOn6J7P.mjs';
+import { eJ as AdSlot, eK as AdPosition, eO as AdContextValue, C as CimplifyClient, a2 as ProcessCheckoutResult, a4 as CheckoutStatus, a5 as CheckoutStatusContext, y as CimplifyElements, J as ElementsOptions, eD as AuthenticatedData, ez as AddressInfo, eA as PaymentMethodInfo, eF as ElementsCheckoutResult, a1 as ProcessCheckoutOptions } from './ads-Cz14AMnc.mjs';
+export { eM as AdConfig } from './ads-Cz14AMnc.mjs';
 import React, { ReactNode } from 'react';
 
 interface UserIdentity {
@@ -47,6 +47,32 @@ interface AdProps {
 }
 declare function Ad({ slot, position, className, style, fallback, onImpression, onClick, }: AdProps): React.ReactElement | null;
 
+type CheckoutOrderType = "pickup" | "delivery" | "dine_in";
+interface CimplifyCheckoutProps {
+    client: CimplifyClient;
+    businessId: string;
+    cartId: string;
+    locationId?: string;
+    orderTypes?: CheckoutOrderType[];
+    enrollInLink?: boolean;
+    onComplete: (result: ProcessCheckoutResult) => void;
+    onError?: (error: {
+        code: string;
+        message: string;
+    }) => void;
+    onStatusChange?: (status: CheckoutStatus, context: CheckoutStatusContext) => void;
+    appearance?: {
+        theme?: "light" | "dark";
+        variables?: {
+            primaryColor?: string;
+            fontFamily?: string;
+            borderRadius?: string;
+        };
+    };
+    className?: string;
+}
+declare function CimplifyCheckout({ client, businessId, cartId, locationId, orderTypes, enrollInLink, onComplete, onError, onStatusChange, appearance, className, }: CimplifyCheckoutProps): React.ReactElement;
+
 declare function useElements(): CimplifyElements | null;
 declare function useElementsReady(): boolean;
 interface ElementsProviderProps {
@@ -99,7 +125,8 @@ declare function useCheckout(): {
         tip_amount?: number;
         notes?: string;
     }) => Promise<ElementsCheckoutResult>;
+    process: (options: ProcessCheckoutOptions) => Promise<ProcessCheckoutResult>;
     isLoading: boolean;
 };
 
-export { Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddressElement, AuthElement, ElementsProvider, PaymentElement, useAds, useCheckout, useElements, useElementsReady };
+export { Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddressElement, AuthElement, CimplifyCheckout, type CimplifyCheckoutProps, ElementsProvider, PaymentElement, useAds, useCheckout, useElements, useElementsReady };

package/dist/react.d.ts

@@ -1,5 +1,5 @@
-import { eB as AdSlot, eC as AdPosition, eG as AdContextValue, y as CimplifyElements, C as CimplifyClient, J as ElementsOptions, ev as AuthenticatedData, et as AddressInfo, eu as PaymentMethodInfo, ex as ElementsCheckoutResult } from './ads-CXOn6J7P.js';
-export { eE as AdConfig } from './ads-CXOn6J7P.js';
+import { eJ as AdSlot, eK as AdPosition, eO as AdContextValue, C as CimplifyClient, a2 as ProcessCheckoutResult, a4 as CheckoutStatus, a5 as CheckoutStatusContext, y as CimplifyElements, J as ElementsOptions, eD as AuthenticatedData, ez as AddressInfo, eA as PaymentMethodInfo, eF as ElementsCheckoutResult, a1 as ProcessCheckoutOptions } from './ads-Cz14AMnc.js';
+export { eM as AdConfig } from './ads-Cz14AMnc.js';
 import React, { ReactNode } from 'react';
 
 interface UserIdentity {
@@ -47,6 +47,32 @@ interface AdProps {
 }
 declare function Ad({ slot, position, className, style, fallback, onImpression, onClick, }: AdProps): React.ReactElement | null;
 
+type CheckoutOrderType = "pickup" | "delivery" | "dine_in";
+interface CimplifyCheckoutProps {
+    client: CimplifyClient;
+    businessId: string;
+    cartId: string;
+    locationId?: string;
+    orderTypes?: CheckoutOrderType[];
+    enrollInLink?: boolean;
+    onComplete: (result: ProcessCheckoutResult) => void;
+    onError?: (error: {
+        code: string;
+        message: string;
+    }) => void;
+    onStatusChange?: (status: CheckoutStatus, context: CheckoutStatusContext) => void;
+    appearance?: {
+        theme?: "light" | "dark";
+        variables?: {
+            primaryColor?: string;
+            fontFamily?: string;
+            borderRadius?: string;
+        };
+    };
+    className?: string;
+}
+declare function CimplifyCheckout({ client, businessId, cartId, locationId, orderTypes, enrollInLink, onComplete, onError, onStatusChange, appearance, className, }: CimplifyCheckoutProps): React.ReactElement;
+
 declare function useElements(): CimplifyElements | null;
 declare function useElementsReady(): boolean;
 interface ElementsProviderProps {
@@ -99,7 +125,8 @@ declare function useCheckout(): {
         tip_amount?: number;
         notes?: string;
     }) => Promise<ElementsCheckoutResult>;
+    process: (options: ProcessCheckoutOptions) => Promise<ProcessCheckoutResult>;
     isLoading: boolean;
 };
 
-export { Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddressElement, AuthElement, ElementsProvider, PaymentElement, useAds, useCheckout, useElements, useElementsReady };
+export { Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddressElement, AuthElement, CimplifyCheckout, type CimplifyCheckoutProps, ElementsProvider, PaymentElement, useAds, useCheckout, useElements, useElementsReady };

package/dist/react.js

@@ -317,6 +317,202 @@ function Ad({
     }
   );
 }
+function labelForOrderType(orderType) {
+  if (orderType === "dine_in") {
+    return "Dine In";
+  }
+  if (orderType === "pickup") {
+    return "Pickup";
+  }
+  return "Delivery";
+}
+function statusToLabel(status) {
+  if (!status) {
+    return "";
+  }
+  if (status === "preparing") {
+    return "Preparing checkout";
+  }
+  if (status === "recovering") {
+    return "Resuming payment";
+  }
+  if (status === "processing") {
+    return "Processing payment";
+  }
+  if (status === "awaiting_authorization") {
+    return "Waiting for authorization";
+  }
+  if (status === "polling") {
+    return "Confirming payment";
+  }
+  if (status === "finalizing") {
+    return "Finalizing order";
+  }
+  if (status === "success") {
+    return "Payment complete";
+  }
+  return "Payment failed";
+}
+function CimplifyCheckout({
+  client,
+  businessId,
+  cartId,
+  locationId,
+  orderTypes,
+  enrollInLink = true,
+  onComplete,
+  onError,
+  onStatusChange,
+  appearance,
+  className
+}) {
+  const resolvedOrderTypes = react.useMemo(
+    () => orderTypes && orderTypes.length > 0 ? orderTypes : ["pickup", "delivery"],
+    [orderTypes]
+  );
+  const [orderType, setOrderType] = react.useState(resolvedOrderTypes[0] || "pickup");
+  const [status, setStatus] = react.useState(null);
+  const [isSubmitting, setIsSubmitting] = react.useState(false);
+  const [errorMessage, setErrorMessage] = react.useState(null);
+  const authMountRef = react.useRef(null);
+  const addressMountRef = react.useRef(null);
+  const paymentMountRef = react.useRef(null);
+  const elementsRef = react.useRef(null);
+  const activeCheckoutRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!resolvedOrderTypes.includes(orderType)) {
+      setOrderType(resolvedOrderTypes[0] || "pickup");
+    }
+  }, [resolvedOrderTypes, orderType]);
+  react.useEffect(() => {
+    const elements = client.elements(businessId, { appearance });
+    elementsRef.current = elements;
+    const auth = elements.create("auth");
+    const address = elements.create("address", { mode: "shipping" });
+    const payment = elements.create("payment");
+    if (authMountRef.current) {
+      auth.mount(authMountRef.current);
+    }
+    if (addressMountRef.current) {
+      address.mount(addressMountRef.current);
+    }
+    if (paymentMountRef.current) {
+      payment.mount(paymentMountRef.current);
+    }
+    return () => {
+      activeCheckoutRef.current?.abort();
+      activeCheckoutRef.current = null;
+      elements.destroy();
+      elementsRef.current = null;
+    };
+  }, [client, businessId, appearance]);
+  const handleStatusChange = react.useCallback(
+    (nextStatus, context) => {
+      setStatus(nextStatus);
+      onStatusChange?.(nextStatus, context);
+    },
+    [onStatusChange]
+  );
+  const handleSubmit = react.useCallback(async () => {
+    if (!elementsRef.current || isSubmitting) {
+      return;
+    }
+    setErrorMessage(null);
+    setIsSubmitting(true);
+    setStatus("preparing");
+    const checkout = elementsRef.current.processCheckout({
+      cart_id: cartId,
+      location_id: locationId,
+      order_type: orderType,
+      enroll_in_link: enrollInLink,
+      on_status_change: handleStatusChange
+    });
+    activeCheckoutRef.current = checkout;
+    try {
+      const result = await checkout;
+      if (result.success) {
+        onComplete(result);
+        return;
+      }
+      const code = result.error?.code || "CHECKOUT_FAILED";
+      const message = result.error?.message || "Payment failed.";
+      setErrorMessage(message);
+      onError?.({ code, message });
+    } finally {
+      activeCheckoutRef.current = null;
+      setIsSubmitting(false);
+    }
+  }, [
+    cartId,
+    enrollInLink,
+    handleStatusChange,
+    isSubmitting,
+    locationId,
+    onComplete,
+    onError,
+    orderType
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, "data-cimplify-checkout": "", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-section": "auth", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: authMountRef }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-section": "order-type", style: { marginTop: "12px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "group",
+        "aria-label": "Order type",
+        style: { display: "flex", gap: "8px", flexWrap: "wrap" },
+        children: resolvedOrderTypes.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOrderType(type),
+            disabled: isSubmitting,
+            "data-selected": orderType === type ? "true" : "false",
+            style: {
+              padding: "8px 12px",
+              borderRadius: "8px",
+              border: "1px solid #d4d4d8",
+              background: orderType === type ? "#111827" : "#ffffff",
+              color: orderType === type ? "#ffffff" : "#111827",
+              cursor: isSubmitting ? "not-allowed" : "pointer",
+              opacity: isSubmitting ? 0.6 : 1
+            },
+            children: labelForOrderType(type)
+          },
+          type
+        ))
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-cimplify-section": "address",
+        style: { marginTop: "12px", display: orderType === "delivery" ? "block" : "none" },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: addressMountRef })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-section": "payment", style: { marginTop: "12px" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: paymentMountRef }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "12px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleSubmit,
+        disabled: isSubmitting,
+        style: {
+          width: "100%",
+          padding: "10px 14px",
+          borderRadius: "8px",
+          border: "none",
+          background: isSubmitting ? "#a1a1aa" : "#111827",
+          color: "#ffffff",
+          cursor: isSubmitting ? "not-allowed" : "pointer"
+        },
+        children: isSubmitting ? "Processing..." : "Complete Order"
+      }
+    ) }),
+    status && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-status": "", style: { marginTop: "10px", fontSize: "14px", color: "#52525b" }, children: statusToLabel(status) }),
+    errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-error": "", style: { marginTop: "8px", fontSize: "14px", color: "#b91c1c" }, children: errorMessage })
+  ] });
+}
 var ElementsContext = react.createContext({
   elements: null,
   isReady: false
@@ -432,13 +628,31 @@ function useCheckout() {
     },
     [elements]
   );
-  return { submit, isLoading };
+  const process = react.useCallback(
+    async (options) => {
+      if (!elements) {
+        return {
+          success: false,
+          error: { code: "NO_ELEMENTS", message: "Elements not initialized", recoverable: false }
+        };
+      }
+      setIsLoading(true);
+      try {
+        return await elements.processCheckout(options);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [elements]
+  );
+  return { submit, process, isLoading };
 }
 
 exports.Ad = Ad;
 exports.AdProvider = AdProvider;
 exports.AddressElement = AddressElement;
 exports.AuthElement = AuthElement;
+exports.CimplifyCheckout = CimplifyCheckout;
 exports.ElementsProvider = ElementsProvider;
 exports.PaymentElement = PaymentElement;
 exports.useAds = useAds;

package/dist/react.mjs

@@ -1,5 +1,5 @@
-import { createContext, useContext, useState, useEffect, useRef, useCallback } from 'react';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 // src/react/index.tsx
 
@@ -315,6 +315,202 @@ function Ad({
     }
   );
 }
+function labelForOrderType(orderType) {
+  if (orderType === "dine_in") {
+    return "Dine In";
+  }
+  if (orderType === "pickup") {
+    return "Pickup";
+  }
+  return "Delivery";
+}
+function statusToLabel(status) {
+  if (!status) {
+    return "";
+  }
+  if (status === "preparing") {
+    return "Preparing checkout";
+  }
+  if (status === "recovering") {
+    return "Resuming payment";
+  }
+  if (status === "processing") {
+    return "Processing payment";
+  }
+  if (status === "awaiting_authorization") {
+    return "Waiting for authorization";
+  }
+  if (status === "polling") {
+    return "Confirming payment";
+  }
+  if (status === "finalizing") {
+    return "Finalizing order";
+  }
+  if (status === "success") {
+    return "Payment complete";
+  }
+  return "Payment failed";
+}
+function CimplifyCheckout({
+  client,
+  businessId,
+  cartId,
+  locationId,
+  orderTypes,
+  enrollInLink = true,
+  onComplete,
+  onError,
+  onStatusChange,
+  appearance,
+  className
+}) {
+  const resolvedOrderTypes = useMemo(
+    () => orderTypes && orderTypes.length > 0 ? orderTypes : ["pickup", "delivery"],
+    [orderTypes]
+  );
+  const [orderType, setOrderType] = useState(resolvedOrderTypes[0] || "pickup");
+  const [status, setStatus] = useState(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const authMountRef = useRef(null);
+  const addressMountRef = useRef(null);
+  const paymentMountRef = useRef(null);
+  const elementsRef = useRef(null);
+  const activeCheckoutRef = useRef(null);
+  useEffect(() => {
+    if (!resolvedOrderTypes.includes(orderType)) {
+      setOrderType(resolvedOrderTypes[0] || "pickup");
+    }
+  }, [resolvedOrderTypes, orderType]);
+  useEffect(() => {
+    const elements = client.elements(businessId, { appearance });
+    elementsRef.current = elements;
+    const auth = elements.create("auth");
+    const address = elements.create("address", { mode: "shipping" });
+    const payment = elements.create("payment");
+    if (authMountRef.current) {
+      auth.mount(authMountRef.current);
+    }
+    if (addressMountRef.current) {
+      address.mount(addressMountRef.current);
+    }
+    if (paymentMountRef.current) {
+      payment.mount(paymentMountRef.current);
+    }
+    return () => {
+      activeCheckoutRef.current?.abort();
+      activeCheckoutRef.current = null;
+      elements.destroy();
+      elementsRef.current = null;
+    };
+  }, [client, businessId, appearance]);
+  const handleStatusChange = useCallback(
+    (nextStatus, context) => {
+      setStatus(nextStatus);
+      onStatusChange?.(nextStatus, context);
+    },
+    [onStatusChange]
+  );
+  const handleSubmit = useCallback(async () => {
+    if (!elementsRef.current || isSubmitting) {
+      return;
+    }
+    setErrorMessage(null);
+    setIsSubmitting(true);
+    setStatus("preparing");
+    const checkout = elementsRef.current.processCheckout({
+      cart_id: cartId,
+      location_id: locationId,
+      order_type: orderType,
+      enroll_in_link: enrollInLink,
+      on_status_change: handleStatusChange
+    });
+    activeCheckoutRef.current = checkout;
+    try {
+      const result = await checkout;
+      if (result.success) {
+        onComplete(result);
+        return;
+      }
+      const code = result.error?.code || "CHECKOUT_FAILED";
+      const message = result.error?.message || "Payment failed.";
+      setErrorMessage(message);
+      onError?.({ code, message });
+    } finally {
+      activeCheckoutRef.current = null;
+      setIsSubmitting(false);
+    }
+  }, [
+    cartId,
+    enrollInLink,
+    handleStatusChange,
+    isSubmitting,
+    locationId,
+    onComplete,
+    onError,
+    orderType
+  ]);
+  return /* @__PURE__ */ jsxs("div", { className, "data-cimplify-checkout": "", children: [
+    /* @__PURE__ */ jsx("div", { "data-cimplify-section": "auth", children: /* @__PURE__ */ jsx("div", { ref: authMountRef }) }),
+    /* @__PURE__ */ jsx("div", { "data-cimplify-section": "order-type", style: { marginTop: "12px" }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "group",
+        "aria-label": "Order type",
+        style: { display: "flex", gap: "8px", flexWrap: "wrap" },
+        children: resolvedOrderTypes.map((type) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOrderType(type),
+            disabled: isSubmitting,
+            "data-selected": orderType === type ? "true" : "false",
+            style: {
+              padding: "8px 12px",
+              borderRadius: "8px",
+              border: "1px solid #d4d4d8",
+              background: orderType === type ? "#111827" : "#ffffff",
+              color: orderType === type ? "#ffffff" : "#111827",
+              cursor: isSubmitting ? "not-allowed" : "pointer",
+              opacity: isSubmitting ? 0.6 : 1
+            },
+            children: labelForOrderType(type)
+          },
+          type
+        ))
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-cimplify-section": "address",
+        style: { marginTop: "12px", display: orderType === "delivery" ? "block" : "none" },
+        children: /* @__PURE__ */ jsx("div", { ref: addressMountRef })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { "data-cimplify-section": "payment", style: { marginTop: "12px" }, children: /* @__PURE__ */ jsx("div", { ref: paymentMountRef }) }),
+    /* @__PURE__ */ jsx("div", { style: { marginTop: "12px" }, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleSubmit,
+        disabled: isSubmitting,
+        style: {
+          width: "100%",
+          padding: "10px 14px",
+          borderRadius: "8px",
+          border: "none",
+          background: isSubmitting ? "#a1a1aa" : "#111827",
+          color: "#ffffff",
+          cursor: isSubmitting ? "not-allowed" : "pointer"
+        },
+        children: isSubmitting ? "Processing..." : "Complete Order"
+      }
+    ) }),
+    status && /* @__PURE__ */ jsx("p", { "data-cimplify-status": "", style: { marginTop: "10px", fontSize: "14px", color: "#52525b" }, children: statusToLabel(status) }),
+    errorMessage && /* @__PURE__ */ jsx("p", { "data-cimplify-error": "", style: { marginTop: "8px", fontSize: "14px", color: "#b91c1c" }, children: errorMessage })
+  ] });
+}
 var ElementsContext = createContext({
   elements: null,
   isReady: false
@@ -430,7 +626,24 @@ function useCheckout() {
     },
     [elements]
   );
-  return { submit, isLoading };
+  const process = useCallback(
+    async (options) => {
+      if (!elements) {
+        return {
+          success: false,
+          error: { code: "NO_ELEMENTS", message: "Elements not initialized", recoverable: false }
+        };
+      }
+      setIsLoading(true);
+      try {
+        return await elements.processCheckout(options);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [elements]
+  );
+  return { submit, process, isLoading };
 }
 
-export { Ad, AdProvider, AddressElement, AuthElement, ElementsProvider, PaymentElement, useAds, useCheckout, useElements, useElementsReady };
+export { Ad, AdProvider, AddressElement, AuthElement, CimplifyCheckout, ElementsProvider, PaymentElement, useAds, useCheckout, useElements, useElementsReady };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",
@@ -40,9 +40,13 @@
     "test:coverage": "vitest run --coverage"
   },
   "peerDependencies": {
+    "@paystack/inline-js": ">=2.0.0",
     "react": ">=17.0.0"
   },
   "peerDependenciesMeta": {
+    "@paystack/inline-js": {
+      "optional": true
+    },
     "react": {
       "optional": true
     }