@cimplify/sdk 0.8.6 → 0.8.8

package/dist/react.mjs

@@ -1,4 +1,4 @@
-import React2, { createContext, useContext, useState, useEffect, useRef, useMemo, useCallback, useSyncExternalStore } from 'react';
+import React3, { createContext, useContext, useState, useEffect, useRef, useMemo, useCallback, useSyncExternalStore } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 // src/react/index.tsx
@@ -362,12 +362,13 @@ function getSelections(item) {
   }
   return void 0;
 }
-function mapItem(item) {
+function mapItem(item, fx) {
+  const amt = (value) => fx ? String(fx.convertPrice(value)) : String(value);
   const result = {
     name: item.name,
     quantity: item.quantity,
-    unit_price: String(item.base_price),
-    total_price: String(item.total_price),
+    unit_price: amt(item.base_price),
+    total_price: amt(item.total_price),
     line_type: item.line_type
   };
   if (item.image_url) result.image_url = item.image_url;
@@ -380,7 +381,7 @@ function mapItem(item) {
   if (item.add_on_options?.length) {
     result.add_ons = item.add_on_options.map((opt) => ({
       name: opt.name,
-      price: String(opt.price ?? "0")
+      price: amt(opt.price ?? "0")
     }));
   }
   if (item.special_instructions) {
@@ -388,359 +389,18 @@ function mapItem(item) {
   }
   return result;
 }
-function transformToCheckoutCart(cart) {
+function transformToCheckoutCart(cart, fx) {
+  const amt = (value) => fx ? String(fx.convertPrice(value)) : String(value);
   return {
-    items: cart.items.map(mapItem),
-    subtotal: String(cart.pricing.subtotal),
-    tax_amount: String(cart.pricing.tax_amount),
-    total_discounts: String(cart.pricing.total_discounts),
-    service_charge: String(cart.pricing.service_charge),
-    total: String(cart.pricing.total_price),
-    currency: cart.pricing.currency
+    items: cart.items.map((item) => mapItem(item, fx)),
+    subtotal: amt(cart.pricing.subtotal),
+    tax_amount: amt(cart.pricing.tax_amount),
+    total_discounts: amt(cart.pricing.total_discounts),
+    service_charge: amt(cart.pricing.service_charge),
+    total: amt(cart.pricing.total_price),
+    currency: fx?.displayCurrency ?? cart.pricing.currency
   };
 }
-var SPACE = { sm: 8};
-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 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,
-  linkUrl,
-  orderTypes,
-  enrollInLink = true,
-  onComplete,
-  onError,
-  onStatusChange,
-  appearance,
-  demoMode,
-  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 [statusText, setStatusText] = useState("");
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isInitializing, setIsInitializing] = useState(false);
-  const [errorMessage, setErrorMessage] = useState(null);
-  const [resolvedBusinessId, setResolvedBusinessId] = useState(businessId ?? null);
-  const [resolvedCartId, setResolvedCartId] = useState(cartId ?? null);
-  const [resolvedCart, setResolvedCart] = useState(null);
-  const checkoutMountRef = useRef(null);
-  const elementsRef = useRef(null);
-  const activeCheckoutRef = useRef(null);
-  const initialAppearanceRef = useRef(appearance);
-  const hasWarnedInlineAppearanceRef = useRef(false);
-  const isMountedRef = useRef(true);
-  const demoRunRef = useRef(0);
-  const isDemoCheckout = demoMode ?? client.getPublicKey().trim().length === 0;
-  const isTestMode = client.isTestMode();
-  const primaryColor = appearance?.variables?.primaryColor || "#0a2540";
-  const isDark = appearance?.theme === "dark";
-  const emitStatus = React2.useEffectEvent(
-    (nextStatus, context = {}) => {
-      setStatus(nextStatus);
-      setStatusText(context.display_text || "");
-      onStatusChange?.(nextStatus, context);
-    }
-  );
-  const fireError = React2.useEffectEvent(
-    (error) => {
-      onError?.(error);
-    }
-  );
-  useEffect(() => {
-    if (!resolvedOrderTypes.includes(orderType)) {
-      setOrderType(resolvedOrderTypes[0] || "pickup");
-    }
-  }, [resolvedOrderTypes, orderType]);
-  useEffect(() => {
-    if (appearance && appearance !== initialAppearanceRef.current && !hasWarnedInlineAppearanceRef.current) {
-      hasWarnedInlineAppearanceRef.current = true;
-      console.warn(
-        "[Cimplify] `appearance` prop reference changed after mount. Elements keep the initial appearance to avoid iframe remount. Memoize appearance with useMemo() to remove this warning."
-      );
-    }
-  }, [appearance]);
-  useEffect(() => {
-    let cancelled = false;
-    async function bootstrap() {
-      if (isDemoCheckout) {
-        if (!cancelled) {
-          setResolvedBusinessId(businessId ?? null);
-          setResolvedCartId(cartId ?? "cart_demo");
-          setIsInitializing(false);
-          setErrorMessage(null);
-        }
-        return;
-      }
-      const needsBusinessResolve = !businessId;
-      const needsCartResolve = !cartId;
-      if (!needsBusinessResolve && !needsCartResolve) {
-        if (!cancelled) {
-          setResolvedBusinessId(businessId || null);
-          setResolvedCartId(cartId || null);
-          setIsInitializing(false);
-          setErrorMessage(null);
-        }
-        client.cart.get().then((cartResult) => {
-          if (!cancelled && cartResult.ok && cartResult.value) {
-            setResolvedCart(cartResult.value);
-          }
-        }).catch(() => {
-        });
-        return;
-      }
-      if (!cancelled) {
-        setIsInitializing(true);
-        setErrorMessage(null);
-      }
-      let nextBusinessId = businessId ?? null;
-      if (!nextBusinessId) {
-        try {
-          nextBusinessId = await client.resolveBusinessId();
-        } catch {
-          if (!cancelled) {
-            const message = "Unable to initialize checkout business context.";
-            setResolvedBusinessId(null);
-            setResolvedCartId(null);
-            setErrorMessage(message);
-            setIsInitializing(false);
-            fireError({ code: "BUSINESS_ID_REQUIRED", message });
-          }
-          return;
-        }
-      }
-      let nextCartId = cartId ?? null;
-      if (!nextCartId) {
-        const cartResult = await client.cart.get();
-        if (!cartResult.ok || !cartResult.value?.id || cartResult.value.items.length === 0) {
-          if (!cancelled) {
-            const message = "Your cart is empty. Add items before checkout.";
-            setResolvedBusinessId(nextBusinessId);
-            setResolvedCartId(null);
-            setErrorMessage(message);
-            setIsInitializing(false);
-            fireError({ code: "CART_EMPTY", message });
-          }
-          return;
-        }
-        nextCartId = cartResult.value.id;
-        if (!cancelled) {
-          setResolvedCart(cartResult.value);
-        }
-      }
-      if (!cancelled) {
-        setResolvedBusinessId(nextBusinessId);
-        setResolvedCartId(nextCartId);
-        setIsInitializing(false);
-        setErrorMessage(null);
-      }
-    }
-    void bootstrap();
-    return () => {
-      cancelled = true;
-    };
-  }, [businessId, cartId, client, isDemoCheckout]);
-  useEffect(() => {
-    return () => {
-      isMountedRef.current = false;
-      demoRunRef.current += 1;
-      activeCheckoutRef.current?.abort();
-      activeCheckoutRef.current = null;
-    };
-  }, []);
-  const handleSubmit = React2.useEffectEvent(async () => {
-    if (isSubmitting || isInitializing || !resolvedCartId) {
-      if (!resolvedCartId && !isInitializing) {
-        const message = "Your cart is empty. Add items before checkout.";
-        setErrorMessage(message);
-        fireError({ code: "CART_EMPTY", message });
-      }
-      return;
-    }
-    setErrorMessage(null);
-    setIsSubmitting(true);
-    emitStatus("preparing", { display_text: statusToLabel("preparing") });
-    if (isDemoCheckout) {
-      const runId = demoRunRef.current + 1;
-      demoRunRef.current = runId;
-      const wait = async (ms) => {
-        await new Promise((resolve) => setTimeout(resolve, ms));
-        return isMountedRef.current && runId === demoRunRef.current;
-      };
-      try {
-        if (!await wait(400)) return;
-        emitStatus("processing", { display_text: statusToLabel("processing") });
-        if (!await wait(900)) return;
-        emitStatus("polling", { display_text: statusToLabel("polling") });
-        if (!await wait(1200)) return;
-        const result = {
-          success: true,
-          order: {
-            id: `ord_demo_${Date.now()}`,
-            order_number: `DEMO-${Math.random().toString(36).slice(2, 8).toUpperCase()}`,
-            status: "confirmed",
-            total: "0.00",
-            currency: "USD"
-          }
-        };
-        emitStatus("success", {
-          order_id: result.order?.id,
-          order_number: result.order?.order_number,
-          display_text: statusToLabel("success")
-        });
-        onComplete(result);
-      } finally {
-        if (isMountedRef.current && runId === demoRunRef.current) {
-          setIsSubmitting(false);
-        }
-      }
-      return;
-    }
-    if (!elementsRef.current) {
-      const message = "Checkout is still initializing. Please try again.";
-      setErrorMessage(message);
-      fireError({ code: "CHECKOUT_NOT_READY", message });
-      setIsSubmitting(false);
-      return;
-    }
-    const checkout = elementsRef.current.processCheckout({
-      cart_id: resolvedCartId,
-      location_id: locationId ?? client.getLocationId() ?? void 0,
-      order_type: orderType,
-      enroll_in_link: enrollInLink,
-      on_status_change: emitStatus
-    });
-    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);
-      fireError({ code, message });
-    } finally {
-      if (isMountedRef.current) {
-        activeCheckoutRef.current = null;
-        setIsSubmitting(false);
-      }
-    }
-  });
-  useEffect(() => {
-    if (isDemoCheckout || !resolvedBusinessId) {
-      elementsRef.current = null;
-      return;
-    }
-    const elements = client.elements(resolvedBusinessId, {
-      appearance: initialAppearanceRef.current,
-      linkUrl
-    });
-    elementsRef.current = elements;
-    const checkout = elements.create("checkout", {
-      orderTypes: resolvedOrderTypes,
-      defaultOrderType: resolvedOrderTypes[0]
-    });
-    if (checkoutMountRef.current) {
-      checkout.mount(checkoutMountRef.current);
-    }
-    checkout.on("ready", () => {
-      if (resolvedCart) {
-        checkout.setCart(transformToCheckoutCart(resolvedCart));
-      }
-    });
-    checkout.on("order_type_changed", (data) => {
-      const typed = data;
-      if (typed.orderType) {
-        setOrderType(typed.orderType);
-      }
-    });
-    checkout.on("request_submit", () => {
-      void handleSubmit();
-    });
-    return () => {
-      activeCheckoutRef.current?.abort();
-      activeCheckoutRef.current = null;
-      elements.destroy();
-      elementsRef.current = null;
-    };
-  }, [client, resolvedBusinessId, isDemoCheckout]);
-  useEffect(() => {
-    if (!resolvedCart || !elementsRef.current) return;
-    const checkoutElement = elementsRef.current.getElement("checkout");
-    if (checkoutElement) {
-      checkoutElement.setCart(transformToCheckoutCart(resolvedCart));
-    }
-  }, [resolvedCart]);
-  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..." }) });
-  }
-  if (!isDemoCheckout && (!resolvedBusinessId || !resolvedCartId)) {
-    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(
-      "p",
-      {
-        "data-cimplify-test-mode": "",
-        style: {
-          marginBottom: "10px",
-          fontSize: "12px",
-          fontWeight: 600,
-          color: "#92400e"
-        },
-        children: "Test mode - no real charges"
-      }
-    ),
-    /* @__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 })
-  ] });
-}
 
 // src/types/common.ts
 function money(value) {
@@ -749,6 +409,59 @@ function money(value) {
 function moneyFromNumber(value) {
   return value.toFixed(2);
 }
+var SUPPORTED_CURRENCY_CODES = /* @__PURE__ */ new Set([
+  "USD",
+  "EUR",
+  "GBP",
+  "JPY",
+  "CNY",
+  "CHF",
+  "CAD",
+  "AUD",
+  "GHS",
+  "NGN",
+  "KES",
+  "ZAR",
+  "XOF",
+  "XAF",
+  "EGP",
+  "TZS",
+  "UGX",
+  "RWF",
+  "ETB",
+  "ZMW",
+  "BWP",
+  "MUR",
+  "NAD",
+  "MWK",
+  "AOA",
+  "CDF",
+  "GMD",
+  "GNF",
+  "LRD",
+  "SLL",
+  "MZN",
+  "BIF",
+  "INR",
+  "BRL",
+  "MXN",
+  "KRW",
+  "TRY",
+  "THB",
+  "MYR",
+  "PHP",
+  "IDR",
+  "VND",
+  "SGD",
+  "HKD",
+  "TWD",
+  "AED",
+  "SAR",
+  "ILS"
+]);
+function isSupportedCurrency(code) {
+  return SUPPORTED_CURRENCY_CODES.has(code);
+}
 function currencyCode(value) {
   return value;
 }
@@ -1354,6 +1067,97 @@ var MOBILE_MONEY_PROVIDER = {
 };
 
 // src/utils/price.ts
+var CURRENCY_SYMBOLS = {
+  // Major world currencies
+  USD: "$",
+  EUR: "\u20AC",
+  GBP: "\xA3",
+  JPY: "\xA5",
+  CNY: "\xA5",
+  CHF: "CHF",
+  CAD: "C$",
+  AUD: "A$",
+  NZD: "NZ$",
+  HKD: "HK$",
+  SGD: "S$",
+  INR: "\u20B9",
+  BRL: "R$",
+  MXN: "MX$",
+  KRW: "\u20A9",
+  RUB: "\u20BD",
+  TRY: "\u20BA",
+  THB: "\u0E3F",
+  PLN: "z\u0142",
+  SEK: "kr",
+  NOK: "kr",
+  DKK: "kr",
+  CZK: "K\u010D",
+  HUF: "Ft",
+  ILS: "\u20AA",
+  AED: "\u062F.\u0625",
+  SAR: "\uFDFC",
+  MYR: "RM",
+  PHP: "\u20B1",
+  IDR: "Rp",
+  VND: "\u20AB",
+  TWD: "NT$",
+  // African currencies
+  GHS: "GH\u20B5",
+  NGN: "\u20A6",
+  KES: "KSh",
+  ZAR: "R",
+  XOF: "CFA",
+  XAF: "FCFA",
+  EGP: "E\xA3",
+  MAD: "MAD",
+  TZS: "TSh",
+  UGX: "USh",
+  RWF: "FRw",
+  ETB: "Br",
+  ZMW: "ZK",
+  BWP: "P",
+  MUR: "\u20A8",
+  SCR: "\u20A8",
+  NAD: "N$",
+  SZL: "E",
+  LSL: "L",
+  MWK: "MK",
+  AOA: "Kz",
+  CDF: "FC",
+  GMD: "D",
+  GNF: "FG",
+  LRD: "L$",
+  SLL: "Le",
+  MZN: "MT",
+  SDG: "SDG",
+  SSP: "SSP",
+  SOS: "Sh.So.",
+  DJF: "Fdj",
+  ERN: "Nfk",
+  CVE: "$",
+  STN: "Db",
+  KMF: "CF",
+  BIF: "FBu"
+};
+function getCurrencySymbol(currencyCode2) {
+  return CURRENCY_SYMBOLS[currencyCode2.toUpperCase()] || currencyCode2;
+}
+function formatPrice(amount, currency = "GHS", locale = "en-US") {
+  const numAmount = typeof amount === "string" ? parseFloat(amount) : amount;
+  if (isNaN(numAmount)) {
+    return `${getCurrencySymbol(currency)}0.00`;
+  }
+  try {
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency: currency.toUpperCase(),
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }).format(numAmount);
+  } catch {
+    return `${getCurrencySymbol(currency)}${numAmount.toFixed(2)}`;
+  }
+}
 function parsePrice(value) {
   if (value === void 0 || value === null) {
     return 0;
@@ -4314,6 +4118,8 @@ function createCimplifyClient(config = {}) {
   return new CimplifyClient(config);
 }
 var LOCATION_STORAGE_KEY = "cimplify_location_id";
+var DISPLAY_CURRENCY_STORAGE_KEY = "cimplify_display_currency";
+var FX_REFRESH_INTERVAL = 12e4;
 var DEFAULT_CURRENCY = "USD";
 var DEFAULT_COUNTRY = "US";
 function createDefaultClient() {
@@ -4342,6 +4148,27 @@ function setStoredLocationId(locationId) {
   }
   window.localStorage.setItem(LOCATION_STORAGE_KEY, locationId);
 }
+function getStoredDisplayCurrency() {
+  if (typeof window === "undefined" || !window.localStorage) {
+    return null;
+  }
+  const value = window.localStorage.getItem(DISPLAY_CURRENCY_STORAGE_KEY);
+  if (!value) {
+    return null;
+  }
+  const normalized = value.trim().toUpperCase();
+  return normalized.length > 0 ? normalized : null;
+}
+function setStoredDisplayCurrency(currency) {
+  if (typeof window === "undefined" || !window.localStorage) {
+    return;
+  }
+  if (!currency) {
+    window.localStorage.removeItem(DISPLAY_CURRENCY_STORAGE_KEY);
+    return;
+  }
+  window.localStorage.setItem(DISPLAY_CURRENCY_STORAGE_KEY, currency.toUpperCase());
+}
 function resolveInitialLocation(locations) {
   if (locations.length === 0) {
     return null;
@@ -4371,6 +4198,60 @@ function CimplifyProvider({
     onLocationChangeRef.current = onLocationChange;
   }, [onLocationChange]);
   const isDemoMode = resolvedClient.getPublicKey().trim().length === 0;
+  const baseCurrency = business?.default_currency || DEFAULT_CURRENCY;
+  const [displayCurrencyOverride, setDisplayCurrencyOverride] = useState(
+    () => getStoredDisplayCurrency()
+  );
+  const [fxRate, setFxRate] = useState(null);
+  const displayCurrency = displayCurrencyOverride && displayCurrencyOverride !== baseCurrency ? displayCurrencyOverride : baseCurrency;
+  const setDisplayCurrency = useCallback(
+    (currency) => {
+      const normalized = currency?.trim().toUpperCase() || null;
+      if (normalized && !isSupportedCurrency(normalized)) {
+        return;
+      }
+      setDisplayCurrencyOverride(normalized);
+      setStoredDisplayCurrency(normalized);
+      if (!normalized || normalized === baseCurrency) {
+        setFxRate(null);
+      }
+    },
+    [baseCurrency]
+  );
+  useEffect(() => {
+    if (displayCurrency === baseCurrency || isDemoMode) {
+      setFxRate(null);
+      return;
+    }
+    let cancelled = false;
+    async function fetchRate() {
+      const result = await resolvedClient.fx.getRate(
+        baseCurrency,
+        displayCurrency
+      );
+      if (cancelled) return;
+      if (result.ok) {
+        setFxRate(result.value.rate);
+      } else {
+        setFxRate(null);
+      }
+    }
+    void fetchRate();
+    const intervalId = setInterval(() => void fetchRate(), FX_REFRESH_INTERVAL);
+    return () => {
+      cancelled = true;
+      clearInterval(intervalId);
+    };
+  }, [resolvedClient, baseCurrency, displayCurrency, isDemoMode]);
+  const convertPrice = useCallback(
+    (amount) => {
+      const num = typeof amount === "string" ? parseFloat(amount) : amount;
+      if (isNaN(num)) return 0;
+      if (!fxRate || displayCurrency === baseCurrency) return num;
+      return Math.round(num * fxRate * 100) / 100;
+    },
+    [fxRate, displayCurrency, baseCurrency]
+  );
   const setCurrentLocation = useCallback(
     (location) => {
       setCurrentLocationState(location);
@@ -4386,89 +4267,463 @@ function CimplifyProvider({
       setIsReady(false);
       if (isDemoMode) {
         if (!cancelled) {
-          setBusiness(null);
-          setLocations([]);
-          setCurrentLocationState(null);
-          resolvedClient.setLocationId(null);
-          setStoredLocationId(null);
-          setIsReady(true);
+          setBusiness(null);
+          setLocations([]);
+          setCurrentLocationState(null);
+          resolvedClient.setLocationId(null);
+          setStoredLocationId(null);
+          setIsReady(true);
+        }
+        return;
+      }
+      const [businessResult, locationsResult] = await Promise.all([
+        resolvedClient.business.getInfo(),
+        resolvedClient.business.getLocations()
+      ]);
+      if (cancelled) {
+        return;
+      }
+      const nextBusiness = businessResult.ok ? businessResult.value : null;
+      const nextLocations = locationsResult.ok && Array.isArray(locationsResult.value) ? locationsResult.value : [];
+      const initialLocation = resolveInitialLocation(nextLocations);
+      setBusiness(nextBusiness);
+      if (nextBusiness?.id) {
+        resolvedClient.setBusinessId(nextBusiness.id);
+      }
+      setLocations(nextLocations);
+      if (initialLocation) {
+        setCurrentLocationState(initialLocation);
+        resolvedClient.setLocationId(initialLocation.id);
+        setStoredLocationId(initialLocation.id);
+      } else {
+        setCurrentLocationState(null);
+        resolvedClient.setLocationId(null);
+        setStoredLocationId(null);
+      }
+      setIsReady(true);
+    }
+    bootstrap().catch(() => {
+      if (cancelled) {
+        return;
+      }
+      setBusiness(null);
+      setLocations([]);
+      setCurrentLocationState(null);
+      resolvedClient.setLocationId(null);
+      setStoredLocationId(null);
+      setIsReady(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [resolvedClient, isDemoMode]);
+  const contextValue = useMemo(
+    () => ({
+      client: resolvedClient,
+      business,
+      currency: baseCurrency,
+      country: business?.country_code || DEFAULT_COUNTRY,
+      locations,
+      currentLocation,
+      setCurrentLocation,
+      isReady,
+      isDemoMode,
+      baseCurrency,
+      displayCurrency,
+      setDisplayCurrency,
+      convertPrice,
+      fxRate
+    }),
+    [
+      resolvedClient,
+      business,
+      baseCurrency,
+      locations,
+      currentLocation,
+      setCurrentLocation,
+      isReady,
+      isDemoMode,
+      displayCurrency,
+      setDisplayCurrency,
+      convertPrice,
+      fxRate
+    ]
+  );
+  return /* @__PURE__ */ jsx(CimplifyContext.Provider, { value: contextValue, children });
+}
+function useCimplify() {
+  const context = useContext(CimplifyContext);
+  if (!context) {
+    throw new Error("useCimplify must be used within CimplifyProvider");
+  }
+  return context;
+}
+function useOptionalCimplify() {
+  return useContext(CimplifyContext);
+}
+var SPACE = { sm: 8};
+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 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,
+  linkUrl,
+  orderTypes,
+  enrollInLink = true,
+  onComplete,
+  onError,
+  onStatusChange,
+  appearance,
+  demoMode,
+  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 [statusText, setStatusText] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isInitializing, setIsInitializing] = useState(false);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [resolvedBusinessId, setResolvedBusinessId] = useState(businessId ?? null);
+  const [resolvedCartId, setResolvedCartId] = useState(cartId ?? null);
+  const [resolvedCart, setResolvedCart] = useState(null);
+  const checkoutMountRef = useRef(null);
+  const elementsRef = useRef(null);
+  const activeCheckoutRef = useRef(null);
+  const initialAppearanceRef = useRef(appearance);
+  const hasWarnedInlineAppearanceRef = useRef(false);
+  const isMountedRef = useRef(true);
+  const demoRunRef = useRef(0);
+  const isDemoCheckout = demoMode ?? client.getPublicKey().trim().length === 0;
+  const isTestMode = client.isTestMode();
+  const cimplifyCtx = useOptionalCimplify();
+  const fxOptions = useMemo(() => {
+    if (!cimplifyCtx?.fxRate) return void 0;
+    if (cimplifyCtx.displayCurrency === cimplifyCtx.baseCurrency) return void 0;
+    return {
+      displayCurrency: cimplifyCtx.displayCurrency,
+      convertPrice: cimplifyCtx.convertPrice
+    };
+  }, [cimplifyCtx?.fxRate, cimplifyCtx?.displayCurrency, cimplifyCtx?.baseCurrency, cimplifyCtx?.convertPrice]);
+  const fxOptionsRef = useRef(fxOptions);
+  fxOptionsRef.current = fxOptions;
+  const resolvedCartRef = useRef(resolvedCart);
+  resolvedCartRef.current = resolvedCart;
+  const primaryColor = appearance?.variables?.primaryColor || "#0a2540";
+  const isDark = appearance?.theme === "dark";
+  const emitStatus = React3.useEffectEvent(
+    (nextStatus, context = {}) => {
+      setStatus(nextStatus);
+      setStatusText(context.display_text || "");
+      onStatusChange?.(nextStatus, context);
+    }
+  );
+  const fireError = React3.useEffectEvent(
+    (error) => {
+      onError?.(error);
+    }
+  );
+  useEffect(() => {
+    if (!resolvedOrderTypes.includes(orderType)) {
+      setOrderType(resolvedOrderTypes[0] || "pickup");
+    }
+  }, [resolvedOrderTypes, orderType]);
+  useEffect(() => {
+    if (appearance && appearance !== initialAppearanceRef.current && !hasWarnedInlineAppearanceRef.current) {
+      hasWarnedInlineAppearanceRef.current = true;
+      console.warn(
+        "[Cimplify] `appearance` prop reference changed after mount. Elements keep the initial appearance to avoid iframe remount. Memoize appearance with useMemo() to remove this warning."
+      );
+    }
+  }, [appearance]);
+  useEffect(() => {
+    let cancelled = false;
+    async function bootstrap() {
+      if (isDemoCheckout) {
+        if (!cancelled) {
+          setResolvedBusinessId(businessId ?? null);
+          setResolvedCartId(cartId ?? "cart_demo");
+          setIsInitializing(false);
+          setErrorMessage(null);
+        }
+        return;
+      }
+      const needsBusinessResolve = !businessId;
+      const needsCartResolve = !cartId;
+      if (!needsBusinessResolve && !needsCartResolve) {
+        if (!cancelled) {
+          setResolvedBusinessId(businessId || null);
+          setResolvedCartId(cartId || null);
+          setIsInitializing(false);
+          setErrorMessage(null);
+        }
+        client.cart.get().then((cartResult) => {
+          if (!cancelled && cartResult.ok && cartResult.value) {
+            setResolvedCart(cartResult.value);
+          }
+        }).catch(() => {
+        });
+        return;
+      }
+      if (!cancelled) {
+        setIsInitializing(true);
+        setErrorMessage(null);
+      }
+      let nextBusinessId = businessId ?? null;
+      if (!nextBusinessId) {
+        try {
+          nextBusinessId = await client.resolveBusinessId();
+        } catch {
+          if (!cancelled) {
+            const message = "Unable to initialize checkout business context.";
+            setResolvedBusinessId(null);
+            setResolvedCartId(null);
+            setErrorMessage(message);
+            setIsInitializing(false);
+            fireError({ code: "BUSINESS_ID_REQUIRED", message });
+          }
+          return;
+        }
+      }
+      let nextCartId = cartId ?? null;
+      if (!nextCartId) {
+        const cartResult = await client.cart.get();
+        if (!cartResult.ok || !cartResult.value?.id || cartResult.value.items.length === 0) {
+          if (!cancelled) {
+            const message = "Your cart is empty. Add items before checkout.";
+            setResolvedBusinessId(nextBusinessId);
+            setResolvedCartId(null);
+            setErrorMessage(message);
+            setIsInitializing(false);
+            fireError({ code: "CART_EMPTY", message });
+          }
+          return;
+        }
+        nextCartId = cartResult.value.id;
+        if (!cancelled) {
+          setResolvedCart(cartResult.value);
         }
-        return;
       }
-      const [businessResult, locationsResult] = await Promise.all([
-        resolvedClient.business.getInfo(),
-        resolvedClient.business.getLocations()
-      ]);
-      if (cancelled) {
-        return;
+      if (!cancelled) {
+        setResolvedBusinessId(nextBusinessId);
+        setResolvedCartId(nextCartId);
+        setIsInitializing(false);
+        setErrorMessage(null);
       }
-      const nextBusiness = businessResult.ok ? businessResult.value : null;
-      const nextLocations = locationsResult.ok && Array.isArray(locationsResult.value) ? locationsResult.value : [];
-      const initialLocation = resolveInitialLocation(nextLocations);
-      setBusiness(nextBusiness);
-      if (nextBusiness?.id) {
-        resolvedClient.setBusinessId(nextBusiness.id);
+    }
+    void bootstrap();
+    return () => {
+      cancelled = true;
+    };
+  }, [businessId, cartId, client, isDemoCheckout]);
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+      demoRunRef.current += 1;
+      activeCheckoutRef.current?.abort();
+      activeCheckoutRef.current = null;
+    };
+  }, []);
+  const handleSubmit = React3.useEffectEvent(async () => {
+    if (isSubmitting || isInitializing || !resolvedCartId) {
+      if (!resolvedCartId && !isInitializing) {
+        const message = "Your cart is empty. Add items before checkout.";
+        setErrorMessage(message);
+        fireError({ code: "CART_EMPTY", message });
       }
-      setLocations(nextLocations);
-      if (initialLocation) {
-        setCurrentLocationState(initialLocation);
-        resolvedClient.setLocationId(initialLocation.id);
-        setStoredLocationId(initialLocation.id);
-      } else {
-        setCurrentLocationState(null);
-        resolvedClient.setLocationId(null);
-        setStoredLocationId(null);
+      return;
+    }
+    setErrorMessage(null);
+    setIsSubmitting(true);
+    emitStatus("preparing", { display_text: statusToLabel("preparing") });
+    if (isDemoCheckout) {
+      const runId = demoRunRef.current + 1;
+      demoRunRef.current = runId;
+      const wait = async (ms) => {
+        await new Promise((resolve) => setTimeout(resolve, ms));
+        return isMountedRef.current && runId === demoRunRef.current;
+      };
+      try {
+        if (!await wait(400)) return;
+        emitStatus("processing", { display_text: statusToLabel("processing") });
+        if (!await wait(900)) return;
+        emitStatus("polling", { display_text: statusToLabel("polling") });
+        if (!await wait(1200)) return;
+        const result = {
+          success: true,
+          order: {
+            id: `ord_demo_${Date.now()}`,
+            order_number: `DEMO-${Math.random().toString(36).slice(2, 8).toUpperCase()}`,
+            status: "confirmed",
+            total: "0.00",
+            currency: "USD"
+          }
+        };
+        emitStatus("success", {
+          order_id: result.order?.id,
+          order_number: result.order?.order_number,
+          display_text: statusToLabel("success")
+        });
+        onComplete(result);
+      } finally {
+        if (isMountedRef.current && runId === demoRunRef.current) {
+          setIsSubmitting(false);
+        }
       }
-      setIsReady(true);
+      return;
     }
-    bootstrap().catch(() => {
-      if (cancelled) {
+    if (!elementsRef.current) {
+      const message = "Checkout is still initializing. Please try again.";
+      setErrorMessage(message);
+      fireError({ code: "CHECKOUT_NOT_READY", message });
+      setIsSubmitting(false);
+      return;
+    }
+    const checkout = elementsRef.current.processCheckout({
+      cart_id: resolvedCartId,
+      location_id: locationId ?? client.getLocationId() ?? void 0,
+      order_type: orderType,
+      enroll_in_link: enrollInLink,
+      on_status_change: emitStatus,
+      pay_currency: fxOptions?.displayCurrency
+    });
+    activeCheckoutRef.current = checkout;
+    try {
+      const result = await checkout;
+      if (result.success) {
+        onComplete(result);
         return;
       }
-      setBusiness(null);
-      setLocations([]);
-      setCurrentLocationState(null);
-      resolvedClient.setLocationId(null);
-      setStoredLocationId(null);
-      setIsReady(true);
+      const code = result.error?.code || "CHECKOUT_FAILED";
+      const message = result.error?.message || "Payment failed.";
+      setErrorMessage(message);
+      fireError({ code, message });
+    } finally {
+      if (isMountedRef.current) {
+        activeCheckoutRef.current = null;
+        setIsSubmitting(false);
+      }
+    }
+  });
+  useEffect(() => {
+    if (isDemoCheckout || !resolvedBusinessId) {
+      elementsRef.current = null;
+      return;
+    }
+    const elements = client.elements(resolvedBusinessId, {
+      appearance: initialAppearanceRef.current,
+      linkUrl
+    });
+    elementsRef.current = elements;
+    const checkout = elements.create("checkout", {
+      orderTypes: resolvedOrderTypes,
+      defaultOrderType: resolvedOrderTypes[0]
+    });
+    if (checkoutMountRef.current) {
+      checkout.mount(checkoutMountRef.current);
+    }
+    checkout.on("ready", () => {
+      const cart = resolvedCartRef.current;
+      if (cart) {
+        checkout.setCart(transformToCheckoutCart(cart, fxOptionsRef.current));
+      }
+    });
+    checkout.on("order_type_changed", (data) => {
+      const typed = data;
+      if (typed.orderType) {
+        setOrderType(typed.orderType);
+      }
+    });
+    checkout.on("request_submit", () => {
+      void handleSubmit();
     });
     return () => {
-      cancelled = true;
+      activeCheckoutRef.current?.abort();
+      activeCheckoutRef.current = null;
+      elements.destroy();
+      elementsRef.current = null;
     };
-  }, [resolvedClient, isDemoMode]);
-  const contextValue = useMemo(
-    () => ({
-      client: resolvedClient,
-      business,
-      currency: business?.default_currency || DEFAULT_CURRENCY,
-      country: business?.country_code || DEFAULT_COUNTRY,
-      locations,
-      currentLocation,
-      setCurrentLocation,
-      isReady,
-      isDemoMode
-    }),
-    [
-      resolvedClient,
-      business,
-      locations,
-      currentLocation,
-      setCurrentLocation,
-      isReady,
-      isDemoMode
-    ]
-  );
-  return /* @__PURE__ */ jsx(CimplifyContext.Provider, { value: contextValue, children });
-}
-function useCimplify() {
-  const context = useContext(CimplifyContext);
-  if (!context) {
-    throw new Error("useCimplify must be used within CimplifyProvider");
+  }, [client, resolvedBusinessId, isDemoCheckout]);
+  useEffect(() => {
+    if (!resolvedCart || !elementsRef.current) return;
+    const checkoutElement = elementsRef.current.getElement("checkout");
+    if (checkoutElement) {
+      checkoutElement.setCart(transformToCheckoutCart(resolvedCart, fxOptions));
+    }
+  }, [resolvedCart, fxOptions]);
+  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..." }) });
   }
-  return context;
+  if (!isDemoCheckout && (!resolvedBusinessId || !resolvedCartId)) {
+    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(
+      "p",
+      {
+        "data-cimplify-test-mode": "",
+        style: {
+          marginBottom: "10px",
+          fontSize: "12px",
+          fontWeight: 600,
+          color: "#92400e"
+        },
+        children: "Test mode - no real charges"
+      }
+    ),
+    /* @__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 })
+  ] });
 }
-function useOptionalCimplify() {
-  return useContext(CimplifyContext);
+function Price({ amount, className, prefix }) {
+  const { displayCurrency, convertPrice } = useCimplify();
+  return /* @__PURE__ */ jsxs("span", { className, children: [
+    prefix,
+    formatPrice(convertPrice(amount), displayCurrency)
+  ] });
 }
 var productsCache = /* @__PURE__ */ new Map();
 var productsInflight = /* @__PURE__ */ new Map();
@@ -6499,4 +6754,4 @@ function useCheckout() {
   return { submit, process, isLoading };
 }
 
-export { Ad, AdProvider, AddressElement, AuthElement, CimplifyCheckout, CimplifyProvider, ElementsProvider, PaymentElement, useAds, useBundle, useCart, useCategories, useCheckout, useCimplify, useCollection, useCollections, useComposite, useElements, useElementsReady, useLocations, useOptionalCimplify, useOrder, useProduct, useProducts, useQuote, useSearch };
+export { Ad, AdProvider, AddressElement, AuthElement, CimplifyCheckout, CimplifyProvider, ElementsProvider, PaymentElement, Price, useAds, useBundle, useCart, useCategories, useCheckout, useCimplify, useCollection, useCollections, useComposite, useElements, useElementsReady, useLocations, useOptionalCimplify, useOrder, useProduct, useProducts, useQuote, useSearch };