@cimplify/sdk 0.7.14 → 0.8.1

package/dist/react.mjs

@@ -7,7 +7,8 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 var ELEMENT_TYPES = {
   AUTH: "auth",
   ADDRESS: "address",
-  PAYMENT: "payment"
+  PAYMENT: "payment",
+  CHECKOUT: "checkout"
 };
 var MESSAGE_TYPES = {
   // Parent → Iframe
@@ -29,14 +30,19 @@ 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",
+  REQUEST_SUBMIT: "request_submit"
 };
 var EVENT_TYPES = {
   READY: "ready",
   AUTHENTICATED: "authenticated",
   REQUIRES_OTP: "requires_otp",
   ERROR: "error",
-  CHANGE: "change"};
+  CHANGE: "change",
+  ORDER_TYPE_CHANGED: "order_type_changed",
+  REQUEST_SUBMIT: "request_submit"
+};
 
 // src/ads/identity.ts
 var COOKIE_NAME = "_cimplify_uid";
@@ -337,7 +343,7 @@ function Ad({
     }
   );
 }
-var SPACE = { sm: 8, md: 12, lg: 16, xl: 24 };
+var SPACE = { sm: 8};
 function shellColors(isDark, primaryColor) {
   return {
     text: isDark ? "#f4f4f5" : "#1a1a1a",
@@ -349,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 "";
@@ -412,8 +409,7 @@ function CimplifyCheckout({
   const [errorMessage, setErrorMessage] = useState(null);
   const [resolvedBusinessId, setResolvedBusinessId] = useState(businessId ?? null);
   const [resolvedCartId, setResolvedCartId] = useState(cartId ?? null);
-  const addressMountRef = useRef(null);
-  const paymentMountRef = useRef(null);
+  const checkoutMountRef = useRef(null);
   const elementsRef = useRef(null);
   const activeCheckoutRef = useRef(null);
   const initialAppearanceRef = useRef(appearance);
@@ -423,6 +419,8 @@ function CimplifyCheckout({
   const onCompleteRef = useRef(onComplete);
   const onErrorRef = useRef(onError);
   const onStatusChangeRef = useRef(onStatusChange);
+  const handleSubmitRef = useRef(async () => {
+  });
   onCompleteRef.current = onComplete;
   onErrorRef.current = onError;
   onStatusChangeRef.current = onStatusChange;
@@ -540,14 +538,22 @@ 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);
+      }
+    });
+    checkout.on("request_submit", () => {
+      void handleSubmitRef.current();
+    });
     return () => {
       activeCheckoutRef.current?.abort();
       activeCheckoutRef.current = null;
@@ -645,6 +651,7 @@ function CimplifyCheckout({
     locationId,
     orderType
   ]);
+  handleSubmitRef.current = handleSubmit;
   const colors = shellColors(isDark ?? false, primaryColor);
   if (isInitializing) {
     return /* @__PURE__ */ jsx("div", { className, "data-cimplify-checkout": "", children: /* @__PURE__ */ jsx("p", { "data-cimplify-status": "", style: { fontSize: 13, color: colors.textSecondary }, children: "Preparing checkout..." }) });
@@ -666,81 +673,7 @@ function CimplifyCheckout({
         children: "Test mode - no real charges"
       }
     ),
-    /* @__PURE__ */ jsx("div", { "data-cimplify-section": "payment", children: /* @__PURE__ */ jsx("div", { ref: isDemoCheckout ? void 0 : paymentMountRef }) }),
-    /* @__PURE__ */ jsxs("div", { "data-cimplify-section": "order-type", style: { marginTop: SPACE.xl }, children: [
-      /* @__PURE__ */ jsx("p", { style: { fontSize: 13, fontWeight: 500, color: colors.textMuted, marginBottom: SPACE.sm }, children: "Order type" }),
-      /* @__PURE__ */ 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__ */ 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__ */ jsx(
-      "div",
-      {
-        "data-cimplify-section": "address",
-        style: { marginTop: SPACE.lg, display: orderType === "delivery" ? "block" : "none" },
-        children: /* @__PURE__ */ jsx("div", { ref: isDemoCheckout ? void 0 : addressMountRef })
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { style: { marginTop: SPACE.xl }, children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: handleSubmit,
-        disabled: isSubmitting,
-        style: {
-          width: "100%",
-          padding: `${SPACE.md}px ${SPACE.lg}px`,
-          borderRadius: 8,
-          border: "none",
-          background: isSubmitting ? colors.textMuted : primaryColor,
-          color: "#ffffff",
-          cursor: isSubmitting ? "not-allowed" : "pointer",
-          fontWeight: 600,
-          fontSize: 16,
-          transition: "all 150ms ease",
-          WebkitTapHighlightColor: "transparent"
-        },
-        children: isSubmitting ? "Processing..." : "Complete Order"
-      }
-    ) }),
+    /* @__PURE__ */ jsx("div", { "data-cimplify-section": "checkout", children: /* @__PURE__ */ jsx("div", { ref: isDemoCheckout ? void 0 : checkoutMountRef }) }),
     status && /* @__PURE__ */ jsx("p", { "data-cimplify-status": "", style: { marginTop: SPACE.sm, fontSize: 13, color: colors.textSecondary }, children: statusText || statusToLabel(status) }),
     errorMessage && /* @__PURE__ */ jsx("p", { "data-cimplify-error": "", style: { marginTop: SPACE.sm, fontSize: 13, color: colors.error }, children: errorMessage })
   ] });
@@ -3040,40 +2973,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,
@@ -3084,8 +3020,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
@@ -3094,7 +3031,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;
@@ -3132,7 +3069,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",
@@ -3163,7 +3100,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",
@@ -3173,8 +3110,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...");
       });
     })();
@@ -3253,7 +3190,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 });
           }
         });
@@ -3443,7 +3380,10 @@ 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,
+        renderSubmitButton: true
       });
       const token = this.parent.getAccessToken();
       if (token && this.type !== ELEMENT_TYPES.AUTH) {
@@ -3507,6 +3447,12 @@ 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;
+      case MESSAGE_TYPES.REQUEST_SUBMIT:
+        this.emit(EVENT_TYPES.REQUEST_SUBMIT, {});
+        break;
     }
   }
   emit(event, data) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.7.14",
+  "version": "0.8.1",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",