@cimplify/sdk 0.7.13 → 0.8.0

package/dist/react.js

@@ -9,7 +9,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var ELEMENT_TYPES = {
   AUTH: "auth",
   ADDRESS: "address",
-  PAYMENT: "payment"
+  PAYMENT: "payment",
+  CHECKOUT: "checkout"
 };
 var MESSAGE_TYPES = {
   // Parent → Iframe
@@ -31,14 +32,17 @@ var MESSAGE_TYPES = {
   LOGOUT_COMPLETE: "logout_complete",
   CONTACT_PROVIDED: "contact_provided",
   CHECKOUT_STATUS: "checkout_status",
-  CHECKOUT_COMPLETE: "checkout_complete"
+  CHECKOUT_COMPLETE: "checkout_complete",
+  ORDER_TYPE_CHANGED: "order_type_changed"
 };
 var EVENT_TYPES = {
   READY: "ready",
   AUTHENTICATED: "authenticated",
   REQUIRES_OTP: "requires_otp",
   ERROR: "error",
-  CHANGE: "change"};
+  CHANGE: "change",
+  ORDER_TYPE_CHANGED: "order_type_changed"
+};
 
 // src/ads/identity.ts
 var COOKIE_NAME = "_cimplify_uid";
@@ -351,15 +355,6 @@ function shellColors(isDark, primaryColor) {
     primary: primaryColor
   };
 }
-function labelForOrderType(orderType) {
-  if (orderType === "dine_in") {
-    return "Dine In";
-  }
-  if (orderType === "pickup") {
-    return "Pickup";
-  }
-  return "Delivery";
-}
 function statusToLabel(status) {
   if (!status) {
     return "";
@@ -414,14 +409,19 @@ function CimplifyCheckout({
   const [errorMessage, setErrorMessage] = react.useState(null);
   const [resolvedBusinessId, setResolvedBusinessId] = react.useState(businessId ?? null);
   const [resolvedCartId, setResolvedCartId] = react.useState(cartId ?? null);
-  const addressMountRef = react.useRef(null);
-  const paymentMountRef = react.useRef(null);
+  const checkoutMountRef = react.useRef(null);
   const elementsRef = react.useRef(null);
   const activeCheckoutRef = react.useRef(null);
   const initialAppearanceRef = react.useRef(appearance);
   const hasWarnedInlineAppearanceRef = react.useRef(false);
   const isMountedRef = react.useRef(true);
   const demoRunRef = react.useRef(0);
+  const onCompleteRef = react.useRef(onComplete);
+  const onErrorRef = react.useRef(onError);
+  const onStatusChangeRef = react.useRef(onStatusChange);
+  onCompleteRef.current = onComplete;
+  onErrorRef.current = onError;
+  onStatusChangeRef.current = onStatusChange;
   const isDemoCheckout = demoMode ?? client.getPublicKey().trim().length === 0;
   const isTestMode = client.isTestMode();
   const primaryColor = appearance?.variables?.primaryColor || "#0a2540";
@@ -430,9 +430,9 @@ function CimplifyCheckout({
     (nextStatus, context = {}) => {
       setStatus(nextStatus);
       setStatusText(context.display_text || "");
-      onStatusChange?.(nextStatus, context);
+      onStatusChangeRef.current?.(nextStatus, context);
     },
-    [onStatusChange]
+    []
   );
   react.useEffect(() => {
     if (!resolvedOrderTypes.includes(orderType)) {
@@ -485,7 +485,7 @@ function CimplifyCheckout({
             setResolvedCartId(null);
             setErrorMessage(message);
             setIsInitializing(false);
-            onError?.({ code: "BUSINESS_ID_REQUIRED", message });
+            onErrorRef.current?.({ code: "BUSINESS_ID_REQUIRED", message });
           }
           return;
         }
@@ -500,7 +500,7 @@ function CimplifyCheckout({
             setResolvedCartId(null);
             setErrorMessage(message);
             setIsInitializing(false);
-            onError?.({ code: "CART_EMPTY", message });
+            onErrorRef.current?.({ code: "CART_EMPTY", message });
           }
           return;
         }
@@ -517,7 +517,7 @@ function CimplifyCheckout({
     return () => {
       cancelled = true;
     };
-  }, [businessId, cartId, client, isDemoCheckout, onError]);
+  }, [businessId, cartId, client, isDemoCheckout]);
   react.useEffect(() => {
     return () => {
       isMountedRef.current = false;
@@ -536,14 +536,19 @@ function CimplifyCheckout({
       linkUrl
     });
     elementsRef.current = elements;
-    const address = elements.create("address", { mode: "shipping" });
-    const payment = elements.create("payment");
-    if (addressMountRef.current) {
-      address.mount(addressMountRef.current);
-    }
-    if (paymentMountRef.current) {
-      payment.mount(paymentMountRef.current);
+    const checkout = elements.create("checkout", {
+      orderTypes: resolvedOrderTypes,
+      defaultOrderType: resolvedOrderTypes[0]
+    });
+    if (checkoutMountRef.current) {
+      checkout.mount(checkoutMountRef.current);
     }
+    checkout.on("order_type_changed", (data) => {
+      const typed = data;
+      if (typed.orderType) {
+        setOrderType(typed.orderType);
+      }
+    });
     return () => {
       activeCheckoutRef.current?.abort();
       activeCheckoutRef.current = null;
@@ -556,7 +561,7 @@ function CimplifyCheckout({
       if (!resolvedCartId && !isInitializing) {
         const message = "Your cart is empty. Add items before checkout.";
         setErrorMessage(message);
-        onError?.({ code: "CART_EMPTY", message });
+        onErrorRef.current?.({ code: "CART_EMPTY", message });
       }
       return;
     }
@@ -591,7 +596,7 @@ function CimplifyCheckout({
           order_number: result.order?.order_number,
           display_text: statusToLabel("success")
         });
-        onComplete(result);
+        onCompleteRef.current(result);
       } finally {
         if (isMountedRef.current && runId === demoRunRef.current) {
           setIsSubmitting(false);
@@ -602,7 +607,7 @@ function CimplifyCheckout({
     if (!elementsRef.current) {
       const message = "Checkout is still initializing. Please try again.";
       setErrorMessage(message);
-      onError?.({ code: "CHECKOUT_NOT_READY", message });
+      onErrorRef.current?.({ code: "CHECKOUT_NOT_READY", message });
       setIsSubmitting(false);
       return;
     }
@@ -617,13 +622,13 @@ function CimplifyCheckout({
     try {
       const result = await checkout;
       if (result.success) {
-        onComplete(result);
+        onCompleteRef.current(result);
         return;
       }
       const code = result.error?.code || "CHECKOUT_FAILED";
       const message = result.error?.message || "Payment failed.";
       setErrorMessage(message);
-      onError?.({ code, message });
+      onErrorRef.current?.({ code, message });
     } finally {
       if (isMountedRef.current) {
         activeCheckoutRef.current = null;
@@ -639,8 +644,6 @@ function CimplifyCheckout({
     isInitializing,
     isSubmitting,
     locationId,
-    onComplete,
-    onError,
     orderType
   ]);
   const colors = shellColors(isDark ?? false, primaryColor);
@@ -664,59 +667,7 @@ function CimplifyCheckout({
         children: "Test mode - no real charges"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-section": "payment", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: isDemoCheckout ? void 0 : paymentMountRef }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-section": "order-type", style: { marginTop: SPACE.xl }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: 13, fontWeight: 500, color: colors.textMuted, marginBottom: SPACE.sm }, children: "Order type" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          role: "group",
-          "aria-label": "Order type",
-          style: {
-            display: "inline-flex",
-            border: `1px solid ${colors.border}`,
-            borderRadius: 8,
-            padding: 3,
-            background: colors.surface
-          },
-          children: resolvedOrderTypes.map((type) => {
-            const active = orderType === type;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => setOrderType(type),
-                disabled: isSubmitting,
-                "data-selected": active ? "true" : "false",
-                style: {
-                  padding: `${SPACE.sm}px ${SPACE.lg}px`,
-                  borderRadius: 6,
-                  border: "none",
-                  background: active ? primaryColor : "transparent",
-                  color: active ? "#ffffff" : colors.textSecondary,
-                  cursor: isSubmitting ? "not-allowed" : "pointer",
-                  opacity: isSubmitting ? 0.6 : 1,
-                  fontSize: 14,
-                  fontWeight: 500,
-                  transition: "all 150ms ease",
-                  WebkitTapHighlightColor: "transparent"
-                },
-                children: labelForOrderType(type)
-              },
-              type
-            );
-          })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "data-cimplify-section": "address",
-        style: { marginTop: SPACE.lg, display: orderType === "delivery" ? "block" : "none" },
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: isDemoCheckout ? void 0 : addressMountRef })
-      }
-    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-section": "checkout", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: isDemoCheckout ? void 0 : checkoutMountRef }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: SPACE.xl }, children: /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -3038,40 +2989,43 @@ var CimplifyElements = class {
           false
         );
       }
-      const paymentElement = this.elements.get(ELEMENT_TYPES.PAYMENT);
-      if (!paymentElement) {
-        console.debug("[cimplify:checkout] BLOCKED: no payment element");
+      const checkoutElement = this.elements.get(ELEMENT_TYPES.CHECKOUT) || this.elements.get(ELEMENT_TYPES.PAYMENT);
+      if (!checkoutElement) {
+        console.debug("[cimplify:checkout] BLOCKED: no checkout element");
         return toCheckoutError(
           "NO_PAYMENT_ELEMENT",
-          "Payment element must be mounted before checkout.",
+          "Checkout element must be mounted before checkout.",
           false
         );
       }
-      if (!paymentElement.isMounted()) {
-        console.debug("[cimplify:checkout] BLOCKED: payment element not mounted");
+      if (!checkoutElement.isMounted()) {
+        console.debug("[cimplify:checkout] BLOCKED: checkout element not mounted");
         return toCheckoutError(
           "PAYMENT_NOT_MOUNTED",
-          "Payment element must be mounted before checkout.",
+          "Checkout element must be mounted before checkout.",
           false
         );
       }
-      const authElement = this.elements.get(ELEMENT_TYPES.AUTH);
-      if (authElement && !this.accessToken) {
-        console.debug("[cimplify:checkout] BLOCKED: auth incomplete");
-        return toCheckoutError(
-          "AUTH_INCOMPLETE",
-          "Authentication must complete before checkout can start.",
-          true
-        );
-      }
-      const addressElement = this.elements.get(ELEMENT_TYPES.ADDRESS);
-      if (addressElement) {
-        console.debug("[cimplify:checkout] getting address data...");
-        await addressElement.getData();
-        console.debug("[cimplify:checkout] address data resolved", this.addressData);
+      const isUnifiedCheckout = this.elements.has(ELEMENT_TYPES.CHECKOUT);
+      if (!isUnifiedCheckout) {
+        const authElement = this.elements.get(ELEMENT_TYPES.AUTH);
+        if (authElement && !this.accessToken) {
+          console.debug("[cimplify:checkout] BLOCKED: auth incomplete");
+          return toCheckoutError(
+            "AUTH_INCOMPLETE",
+            "Authentication must complete before checkout can start.",
+            true
+          );
+        }
+        const addressElement = this.elements.get(ELEMENT_TYPES.ADDRESS);
+        if (addressElement) {
+          console.debug("[cimplify:checkout] getting address data...");
+          await addressElement.getData();
+          console.debug("[cimplify:checkout] address data resolved", this.addressData);
+        }
+        await this.hydrateCustomerData();
       }
-      await this.hydrateCustomerData();
-      console.debug("[cimplify:checkout] customer data hydrated", { customerData: this.customerData, accountId: this.accountId });
+      console.debug("[cimplify:checkout] customer data hydrated", { customerData: this.customerData, accountId: this.accountId, isUnifiedCheckout });
       const processMessage = {
         type: MESSAGE_TYPES.PROCESS_CHECKOUT,
         cart_id: options.cart_id,
@@ -3082,8 +3036,9 @@ var CimplifyElements = class {
         tip_amount: options.tip_amount,
         pay_currency: options.pay_currency,
         enroll_in_link: options.enroll_in_link ?? true,
-        address: this.addressData ?? void 0,
-        customer: this.customerData ? {
+        // Unified checkout has its own address/customer state; only pass if available externally
+        address: isUnifiedCheckout ? void 0 : this.addressData ?? void 0,
+        customer: isUnifiedCheckout ? void 0 : this.customerData ? {
           name: this.customerData.name,
           email: this.customerData.email,
           phone: this.customerData.phone
@@ -3092,7 +3047,7 @@ var CimplifyElements = class {
         customer_id: this.customerId ?? void 0
       };
       const timeoutMs = options.timeout_ms ?? 18e4;
-      const paymentWindow = paymentElement.getContentWindow();
+      const paymentWindow = checkoutElement.getContentWindow();
       this.checkoutInProgress = true;
       return new Promise((resolve) => {
         let settled = false;
@@ -3130,7 +3085,7 @@ var CimplifyElements = class {
             return;
           }
           if (message.type === MESSAGE_TYPES.LOGOUT_COMPLETE) {
-            paymentElement.sendMessage({ type: MESSAGE_TYPES.ABORT_CHECKOUT });
+            checkoutElement.sendMessage({ type: MESSAGE_TYPES.ABORT_CHECKOUT });
             settle(
               toCheckoutError(
                 "AUTH_LOST",
@@ -3161,7 +3116,7 @@ var CimplifyElements = class {
           window.addEventListener("message", handleCheckoutMessage);
         }
         abortFn = () => {
-          paymentElement.sendMessage({ type: MESSAGE_TYPES.ABORT_CHECKOUT });
+          checkoutElement.sendMessage({ type: MESSAGE_TYPES.ABORT_CHECKOUT });
           settle(
             toCheckoutError(
               "CANCELLED",
@@ -3171,8 +3126,8 @@ var CimplifyElements = class {
           );
         };
         this.activeCheckoutAbort = abortFn;
-        console.debug("[cimplify:checkout] sending process_checkout to payment iframe", { cart_id: processMessage.cart_id, order_type: processMessage.order_type, hasCustomer: !!processMessage.customer, hasAddress: !!processMessage.address });
-        paymentElement.sendMessage(processMessage);
+        console.debug("[cimplify:checkout] sending process_checkout to checkout iframe", { cart_id: processMessage.cart_id, order_type: processMessage.order_type, hasCustomer: !!processMessage.customer, hasAddress: !!processMessage.address, isUnifiedCheckout });
+        checkoutElement.sendMessage(processMessage);
         console.debug("[cimplify:checkout] postMessage sent, waiting for checkout_complete...");
       });
     })();
@@ -3251,7 +3206,7 @@ var CimplifyElements = class {
         this.customerData = customer;
         this.client.setAccessToken(message.token);
         this.elements.forEach((element, type) => {
-          if (type !== ELEMENT_TYPES.AUTH) {
+          if (type !== ELEMENT_TYPES.AUTH && type !== ELEMENT_TYPES.CHECKOUT) {
             element.sendMessage({ type: MESSAGE_TYPES.SET_TOKEN, token: message.token });
           }
         });
@@ -3441,7 +3396,9 @@ var CimplifyElement = class {
         publicKey,
         demoMode: publicKey.length === 0,
         prefillEmail: this.options.prefillEmail,
-        appearance: this.parent.getAppearance()
+        appearance: this.parent.getAppearance(),
+        orderTypes: this.options.orderTypes,
+        defaultOrderType: this.options.defaultOrderType
       });
       const token = this.parent.getAccessToken();
       if (token && this.type !== ELEMENT_TYPES.AUTH) {
@@ -3505,6 +3462,9 @@ var CimplifyElement = class {
       case MESSAGE_TYPES.CONTACT_PROVIDED:
         this.parent._setGuestContact(message.contact, message.contactType);
         break;
+      case MESSAGE_TYPES.ORDER_TYPE_CHANGED:
+        this.emit(EVENT_TYPES.ORDER_TYPE_CHANGED, { orderType: message.orderType });
+        break;
     }
   }
   emit(event, data) {