@cimplify/sdk 0.7.10 → 0.7.12

package/dist/react.mjs

@@ -337,6 +337,18 @@ function Ad({
     }
   );
 }
+var SPACE = { sm: 8, md: 12, lg: 16, xl: 24 };
+function shellColors(isDark, primaryColor) {
+  return {
+    text: isDark ? "#f4f4f5" : "#1a1a1a",
+    textSecondary: isDark ? "#a1a1aa" : "#52525b",
+    textMuted: isDark ? "#71717a" : "#a1a1aa",
+    border: isDark ? "#27272a" : "#e4e4e7",
+    surface: isDark ? "#18181b" : "#fafafa",
+    error: "#dc2626",
+    primary: primaryColor
+  };
+}
 function labelForOrderType(orderType) {
   if (orderType === "dine_in") {
     return "Dine In";
@@ -629,11 +641,12 @@ function CimplifyCheckout({
     onError,
     orderType
   ]);
+  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: "14px", color: "#52525b" }, children: "Preparing checkout..." }) });
+    return /* @__PURE__ */ jsx("div", { className, "data-cimplify-checkout": "", children: /* @__PURE__ */ jsx("p", { "data-cimplify-status": "", style: { fontSize: 13, color: colors.textSecondary }, children: "Preparing checkout..." }) });
   }
   if (!isDemoCheckout && (!resolvedBusinessId || !resolvedCartId)) {
-    return /* @__PURE__ */ jsx("div", { className, "data-cimplify-checkout": "", children: /* @__PURE__ */ jsx("p", { "data-cimplify-error": "", style: { fontSize: "14px", color: "#b91c1c" }, children: errorMessage || "Unable to initialize checkout. Please refresh and try again." }) });
+    return /* @__PURE__ */ jsx("div", { className, "data-cimplify-checkout": "", children: /* @__PURE__ */ jsx("p", { "data-cimplify-error": "", style: { fontSize: 13, color: colors.error }, children: errorMessage || "Unable to initialize checkout. Please refresh and try again." }) });
   }
   return /* @__PURE__ */ jsxs("div", { className, "data-cimplify-checkout": "", children: [
     isTestMode && !isDemoCheckout && /* @__PURE__ */ jsx(
@@ -650,38 +663,47 @@ function CimplifyCheckout({
       }
     ),
     /* @__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: "20px" }, children: [
-      /* @__PURE__ */ jsx("p", { style: { fontSize: "13px", fontWeight: 500, color: isDark ? "#a1a1aa" : "#71717a", marginBottom: "8px" }, children: "Order type" }),
+    /* @__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: "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: "10px 18px",
-                borderRadius: "8px",
-                border: orderType === type ? "1px solid transparent" : `1px solid ${isDark ? "#3f3f46" : "#d4d4d8"}`,
-                background: orderType === type ? primaryColor : "transparent",
-                color: orderType === type ? "#ffffff" : isDark ? "#e4e4e7" : "#3f3f46",
-                cursor: isSubmitting ? "not-allowed" : "pointer",
-                opacity: isSubmitting ? 0.6 : 1,
-                fontSize: "15px",
-                fontWeight: 500,
-                transition: "all 150ms ease",
-                WebkitTapHighlightColor: "transparent"
+          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)
               },
-              children: labelForOrderType(type)
-            },
-            type
-          ))
+              type
+            );
+          })
         }
       )
     ] }),
@@ -689,11 +711,11 @@ function CimplifyCheckout({
       "div",
       {
         "data-cimplify-section": "address",
-        style: { marginTop: "16px", display: orderType === "delivery" ? "block" : "none" },
+        style: { marginTop: SPACE.lg, display: orderType === "delivery" ? "block" : "none" },
         children: /* @__PURE__ */ jsx("div", { ref: isDemoCheckout ? void 0 : addressMountRef })
       }
     ),
-    /* @__PURE__ */ jsx("div", { style: { marginTop: "24px" }, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { style: { marginTop: SPACE.xl }, children: /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -701,23 +723,22 @@ function CimplifyCheckout({
         disabled: isSubmitting,
         style: {
           width: "100%",
-          padding: "14px 16px",
-          borderRadius: "10px",
+          padding: `${SPACE.md}px ${SPACE.lg}px`,
+          borderRadius: 8,
           border: "none",
-          background: isSubmitting ? "#a1a1aa" : primaryColor,
+          background: isSubmitting ? colors.textMuted : primaryColor,
           color: "#ffffff",
           cursor: isSubmitting ? "not-allowed" : "pointer",
           fontWeight: 600,
-          fontSize: "16px",
-          boxShadow: isSubmitting ? "none" : "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)",
+          fontSize: 16,
           transition: "all 150ms ease",
           WebkitTapHighlightColor: "transparent"
         },
         children: isSubmitting ? "Processing..." : "Complete Order"
       }
     ) }),
-    status && /* @__PURE__ */ jsx("p", { "data-cimplify-status": "", style: { marginTop: "10px", fontSize: "14px", color: "#52525b" }, children: statusText || statusToLabel(status) }),
-    errorMessage && /* @__PURE__ */ jsx("p", { "data-cimplify-error": "", style: { marginTop: "8px", fontSize: "14px", color: "#b91c1c" }, children: errorMessage })
+    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 })
   ] });
 }
 
@@ -2946,6 +2967,12 @@ var CimplifyElements = class {
   getElement(type) {
     return this.elements.get(type);
   }
+  _removeElement(type, instance) {
+    const current = this.elements.get(type);
+    if (current === instance) {
+      this.elements.delete(type);
+    }
+  }
   destroy() {
     this.elements.forEach((element) => element.destroy());
     this.elements.clear();
@@ -2984,7 +3011,9 @@ var CimplifyElements = class {
   processCheckout(options) {
     let abortFn = null;
     const task = (async () => {
+      console.debug("[cimplify:checkout] processCheckout called", { cart_id: options.cart_id, order_type: options.order_type, location_id: options.location_id });
       if (this.checkoutInProgress) {
+        console.debug("[cimplify:checkout] BLOCKED: already processing");
         return toCheckoutError(
           "ALREADY_PROCESSING",
           "Checkout is already in progress.",
@@ -2992,6 +3021,7 @@ var CimplifyElements = class {
         );
       }
       if (!options.cart_id) {
+        console.debug("[cimplify:checkout] BLOCKED: no cart_id");
         return toCheckoutError(
           "INVALID_CART",
           "A valid cart is required before checkout can start.",
@@ -2999,6 +3029,7 @@ var CimplifyElements = class {
         );
       }
       if (!options.order_type) {
+        console.debug("[cimplify:checkout] BLOCKED: no order_type");
         return toCheckoutError(
           "ORDER_TYPE_REQUIRED",
           "Order type is required before checkout can start.",
@@ -3007,6 +3038,7 @@ var CimplifyElements = class {
       }
       const paymentElement = this.elements.get(ELEMENT_TYPES.PAYMENT);
       if (!paymentElement) {
+        console.debug("[cimplify:checkout] BLOCKED: no payment element");
         return toCheckoutError(
           "NO_PAYMENT_ELEMENT",
           "Payment element must be mounted before checkout.",
@@ -3014,6 +3046,7 @@ var CimplifyElements = class {
         );
       }
       if (!paymentElement.isMounted()) {
+        console.debug("[cimplify:checkout] BLOCKED: payment element not mounted");
         return toCheckoutError(
           "PAYMENT_NOT_MOUNTED",
           "Payment element must be mounted before checkout.",
@@ -3022,6 +3055,7 @@ var CimplifyElements = class {
       }
       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.",
@@ -3030,9 +3064,12 @@ var CimplifyElements = class {
       }
       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();
+      console.debug("[cimplify:checkout] customer data hydrated", { customerData: this.customerData, accountId: this.accountId });
       const processMessage = {
         type: MESSAGE_TYPES.PROCESS_CHECKOUT,
         cart_id: options.cart_id,
@@ -3109,6 +3146,7 @@ var CimplifyElements = class {
             return;
           }
           if (message.type === MESSAGE_TYPES.CHECKOUT_COMPLETE) {
+            console.debug("[cimplify:checkout] received checkout_complete", { success: message.success, error: message.error });
             settle({
               success: message.success,
               order: message.order,
@@ -3131,7 +3169,9 @@ 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] postMessage sent, waiting for checkout_complete...");
       });
     })();
     const abortable = task;
@@ -3272,6 +3312,7 @@ var CimplifyElement = class {
     this.mounted = false;
     this.eventHandlers = /* @__PURE__ */ new Map();
     this.resolvers = /* @__PURE__ */ new Map();
+    this.listening = false;
     this.type = type;
     this.businessId = businessId;
     this.linkUrl = linkUrl;
@@ -3281,6 +3322,7 @@ var CimplifyElement = class {
     this.boundHandleMessage = this.handleMessage.bind(this);
     if (typeof window !== "undefined") {
       window.addEventListener("message", this.boundHandleMessage);
+      this.listening = true;
     }
   }
   mount(container) {
@@ -3295,6 +3337,10 @@ var CimplifyElement = class {
     }
     this.container = target;
     this.mounted = true;
+    if (!this.listening && typeof window !== "undefined") {
+      window.addEventListener("message", this.boundHandleMessage);
+      this.listening = true;
+    }
     void this.createIframe();
   }
   destroy() {
@@ -3307,9 +3353,11 @@ var CimplifyElement = class {
     this.eventHandlers.clear();
     this.resolvers.forEach((entry) => clearTimeout(entry.timeoutId));
     this.resolvers.clear();
-    if (typeof window !== "undefined") {
+    if (this.listening && typeof window !== "undefined") {
       window.removeEventListener("message", this.boundHandleMessage);
+      this.listening = false;
     }
+    this.parent._removeElement(this.type, this);
   }
   on(event, handler) {
     if (!this.eventHandlers.has(event)) {
@@ -6104,17 +6152,36 @@ function AuthElement({
   const containerRef = useRef(null);
   const elementRef = useRef(null);
   const elements = useElements();
+  const onReadyRef = useRef(onReady);
+  const onAuthenticatedRef = useRef(onAuthenticated);
+  const onRequiresOtpRef = useRef(onRequiresOtp);
+  const onErrorRef = useRef(onError);
+  useEffect(() => {
+    onReadyRef.current = onReady;
+    onAuthenticatedRef.current = onAuthenticated;
+    onRequiresOtpRef.current = onRequiresOtp;
+    onErrorRef.current = onError;
+  }, [onReady, onAuthenticated, onRequiresOtp, onError]);
   useEffect(() => {
     if (!elements || !containerRef.current) return;
     const element = elements.create(ELEMENT_TYPES.AUTH, { prefillEmail });
     elementRef.current = element;
-    element.on(EVENT_TYPES.READY, () => onReady?.());
-    element.on(EVENT_TYPES.AUTHENTICATED, (data) => onAuthenticated?.(data));
-    element.on(EVENT_TYPES.REQUIRES_OTP, (data) => onRequiresOtp?.(data));
-    element.on(EVENT_TYPES.ERROR, (data) => onError?.(data));
+    element.on(EVENT_TYPES.READY, () => onReadyRef.current?.());
+    element.on(
+      EVENT_TYPES.AUTHENTICATED,
+      (data) => onAuthenticatedRef.current?.(data)
+    );
+    element.on(
+      EVENT_TYPES.REQUIRES_OTP,
+      (data) => onRequiresOtpRef.current?.(data)
+    );
+    element.on(
+      EVENT_TYPES.ERROR,
+      (data) => onErrorRef.current?.(data)
+    );
     element.mount(containerRef.current);
     return () => element.destroy();
-  }, [elements, prefillEmail, onReady, onAuthenticated, onRequiresOtp, onError]);
+  }, [elements, prefillEmail]);
   return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style });
 }
 function AddressElement({
@@ -6128,16 +6195,30 @@ function AddressElement({
   const containerRef = useRef(null);
   const elementRef = useRef(null);
   const elements = useElements();
+  const onReadyRef = useRef(onReady);
+  const onChangeRef = useRef(onChange);
+  const onErrorRef = useRef(onError);
+  useEffect(() => {
+    onReadyRef.current = onReady;
+    onChangeRef.current = onChange;
+    onErrorRef.current = onError;
+  }, [onReady, onChange, onError]);
   useEffect(() => {
     if (!elements || !containerRef.current) return;
     const element = elements.create(ELEMENT_TYPES.ADDRESS, { mode });
     elementRef.current = element;
-    element.on(EVENT_TYPES.READY, () => onReady?.());
-    element.on(EVENT_TYPES.CHANGE, (data) => onChange?.(data));
-    element.on(EVENT_TYPES.ERROR, (data) => onError?.(data));
+    element.on(EVENT_TYPES.READY, () => onReadyRef.current?.());
+    element.on(
+      EVENT_TYPES.CHANGE,
+      (data) => onChangeRef.current?.(data)
+    );
+    element.on(
+      EVENT_TYPES.ERROR,
+      (data) => onErrorRef.current?.(data)
+    );
     element.mount(containerRef.current);
     return () => element.destroy();
-  }, [elements, mode, onReady, onChange, onError]);
+  }, [elements, mode]);
   return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style });
 }
 function PaymentElement({
@@ -6152,16 +6233,30 @@ function PaymentElement({
   const containerRef = useRef(null);
   const elementRef = useRef(null);
   const elements = useElements();
+  const onReadyRef = useRef(onReady);
+  const onChangeRef = useRef(onChange);
+  const onErrorRef = useRef(onError);
+  useEffect(() => {
+    onReadyRef.current = onReady;
+    onChangeRef.current = onChange;
+    onErrorRef.current = onError;
+  }, [onReady, onChange, onError]);
   useEffect(() => {
     if (!elements || !containerRef.current) return;
     const element = elements.create(ELEMENT_TYPES.PAYMENT, { amount, currency });
     elementRef.current = element;
-    element.on(EVENT_TYPES.READY, () => onReady?.());
-    element.on(EVENT_TYPES.CHANGE, (data) => onChange?.(data));
-    element.on(EVENT_TYPES.ERROR, (data) => onError?.(data));
+    element.on(EVENT_TYPES.READY, () => onReadyRef.current?.());
+    element.on(
+      EVENT_TYPES.CHANGE,
+      (data) => onChangeRef.current?.(data)
+    );
+    element.on(
+      EVENT_TYPES.ERROR,
+      (data) => onErrorRef.current?.(data)
+    );
     element.mount(containerRef.current);
     return () => element.destroy();
-  }, [elements, amount, currency, onReady, onChange, onError]);
+  }, [elements, amount, currency]);
   return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style });
 }
 function useCheckout() {

package/package.json

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