@nextblock-cms/ecom 0.8.0 → 0.8.6

package/components/Checkout.es.js

@@ -0,0 +1,1020 @@
+import { jsx as e, jsxs as r, Fragment as st } from "react/jsx-runtime";
+import { Badge as Be } from "@nextblock-cms/ui/badge";
+import { Button as _e } from "@nextblock-cms/ui/button";
+import { Card as X, CardHeader as Y, CardTitle as V, CardContent as W } from "@nextblock-cms/ui/card";
+import { Checkbox as it } from "@nextblock-cms/ui/checkbox";
+import { Input as I } from "@nextblock-cms/ui/input";
+import { Label as v } from "@nextblock-cms/ui/label";
+import { Separator as lt } from "@nextblock-cms/ui/separator";
+import { RadioGroup as at, RadioGroupItem as De } from "@nextblock-cms/ui/radio-group";
+import { Checkout as ot } from "@freemius/checkout";
+import { getCartItemActivePrice as Ne } from "../cart-store.es.js";
+import { useCart as dt } from "../use-cart.es.js";
+import { useState as y, useMemo as E, useEffect as le } from "react";
+import { X as mt, FlaskConical as ut, CreditCard as pt, ChevronRight as ht, Loader2 as ye, Package as ft, Download as gt, MapPin as _t } from "lucide-react";
+import { useTranslations as Oe, formatPrice as x } from "@nextblock-cms/utils";
+import { n as yt, a as we, g as Me, c as xt } from "../states-DlHJezQ1.js";
+import { g as bt } from "../shipping-actions-BnHjlo2q.js";
+import { createClient as Nt, getServiceRoleSupabaseClient as vt } from "@nextblock-cms/db/server";
+import { b as wt, c as kt } from "../tax-calculation-Dab89aHd.js";
+import { a as St, b as Ct } from "../coupon-server-DUKVtyYs.js";
+import { isDigitalItem as xe } from "../types.es.js";
+import { a as Ft, e as Tt, n as ve, i as Le } from "../customer-C3xccjUg.js";
+import { u as At } from "../CurrencyProvider-OzlRN96V.js";
+import { d as Re } from "../trials-RDcRAZKx.js";
+import { C as $t } from "../CouponForm-BI_5SBHQ.js";
+async function jt(c, g, C = "USD", i, f) {
+  try {
+    const m = Nt(), T = vt(), { data: A } = await m.from("currencies").select(
+      "code, symbol, exchange_rate, is_default, is_active, auto_sync_product_prices, auto_update_exchange_rate, exchange_rate_source, exchange_rate_updated_at, rounding_mode, rounding_increment, rounding_charm_amount"
+    ).eq("is_active", !0).order("code", { ascending: !0 }), K = A ?? [];
+    let D;
+    if (i) {
+      const M = await St({
+        client: T,
+        code: i,
+        items: f && f.length > 0 ? f : c,
+        currencyCode: C
+      });
+      M.success && (D = Ct(M.quote));
+    }
+    const q = await wt(
+      m,
+      c,
+      C,
+      K,
+      D
+    );
+    return { success: !0, tax: await kt(m, {
+      items: q,
+      destination: g
+    }) };
+  } catch (m) {
+    return console.error("Failed to estimate taxes:", m), {
+      success: !1,
+      error: m.message || "Failed to calculate taxes"
+    };
+  }
+}
+const Pt = process.env.NEXT_PUBLIC_IS_SANDBOX === "true", ae = "nextblock-checkout-draft-v1";
+function oe(c, g) {
+  return {
+    ...Tt(),
+    company_name: c?.company_name || "",
+    recipient_name: c?.recipient_name || g || "",
+    line1: c?.line1 || "",
+    line2: c?.line2 || "",
+    city: c?.city || "",
+    state: c?.state || "",
+    postal_code: c?.postal_code || "",
+    country_code: yt(c?.country_code) || "CA"
+  };
+}
+function Et(c) {
+  const g = ve(c);
+  return !(!g?.country_code || !g.postal_code || we(g.country_code) && !g.state);
+}
+function be(c, g, C) {
+  return c.reduce((i, f) => {
+    const { price: m, sale_price: T } = Ne(f, {
+      currencyCode: g,
+      currencies: C
+    });
+    return i + (T ?? m) * f.quantity;
+  }, 0);
+}
+function qe({
+  idPrefix: c,
+  title: g,
+  description: C,
+  value: i,
+  onChange: f
+}) {
+  const { t: m } = Oe(), T = m("company_name") === "company_name" ? "Company name" : m("company_name"), A = m("select_an_option") === "select_an_option" ? "Select an option" : m("select_an_option"), K = m("state_province") === "state_province" ? "State / Province" : m("state_province"), D = Me(i.country_code), q = we(i.country_code);
+  return /* @__PURE__ */ r(X, { children: [
+    /* @__PURE__ */ r(Y, { children: [
+      /* @__PURE__ */ r(V, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(_t, { className: "w-5 h-5" }),
+        g
+      ] }),
+      /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: C })
+    ] }),
+    /* @__PURE__ */ r(W, { className: "space-y-4", children: [
+      /* @__PURE__ */ r("div", { className: "grid gap-4 sm:grid-cols-3", children: [
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(v, { htmlFor: `${c}-company`, children: T }),
+          /* @__PURE__ */ e(
+            I,
+            {
+              id: `${c}-company`,
+              value: i.company_name,
+              onChange: (a) => f({ ...i, company_name: a.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(v, { htmlFor: `${c}-name`, children: m("full_name") }),
+          /* @__PURE__ */ e(
+            I,
+            {
+              id: `${c}-name`,
+              value: i.recipient_name,
+              onChange: (a) => f({ ...i, recipient_name: a.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(v, { htmlFor: `${c}-country`, children: m("country") }),
+          /* @__PURE__ */ e(
+            "select",
+            {
+              id: `${c}-country`,
+              className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
+              value: i.country_code,
+              onChange: (a) => {
+                const M = a.target.value, de = Me(M);
+                f({
+                  ...i,
+                  country_code: M,
+                  state: de.some((Z) => Z.code === i.state) ? i.state : ""
+                });
+              },
+              children: xt.map((a) => /* @__PURE__ */ e("option", { value: a.code, children: a.name }, a.code))
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(v, { htmlFor: `${c}-line1`, children: m("address_line_1") }),
+        /* @__PURE__ */ e(
+          I,
+          {
+            id: `${c}-line1`,
+            value: i.line1,
+            onChange: (a) => f({ ...i, line1: a.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(v, { htmlFor: `${c}-line2`, children: m("address_line_2") }),
+        /* @__PURE__ */ e(
+          I,
+          {
+            id: `${c}-line2`,
+            value: i.line2,
+            onChange: (a) => f({ ...i, line2: a.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r("div", { className: "grid gap-4 sm:grid-cols-3", children: [
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(v, { htmlFor: `${c}-city`, children: m("city") }),
+          /* @__PURE__ */ e(
+            I,
+            {
+              id: `${c}-city`,
+              value: i.city,
+              onChange: (a) => f({ ...i, city: a.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(v, { htmlFor: `${c}-state`, children: m("state_province") }),
+          q ? /* @__PURE__ */ r(
+            "select",
+            {
+              id: `${c}-state`,
+              className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
+              value: i.state,
+              onChange: (a) => f({ ...i, state: a.target.value }),
+              children: [
+                /* @__PURE__ */ e("option", { value: "", children: `${A}: ${K}` }),
+                D.map((a) => /* @__PURE__ */ e("option", { value: a.code, children: a.name }, a.code))
+              ]
+            }
+          ) : /* @__PURE__ */ e(
+            I,
+            {
+              id: `${c}-state`,
+              value: i.state,
+              onChange: (a) => f({ ...i, state: a.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(v, { htmlFor: `${c}-postal`, children: m("postal_zip_code") }),
+          /* @__PURE__ */ e(
+            I,
+            {
+              id: `${c}-postal`,
+              value: i.postal_code,
+              onChange: (a) => f({ ...i, postal_code: a.target.value })
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ze({
+  title: c,
+  description: g,
+  badgeLabel: C,
+  children: i
+}) {
+  return /* @__PURE__ */ r(X, { children: [
+    /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-3 flex-wrap", children: [
+      /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ e(V, { children: c }),
+        /* @__PURE__ */ e("p", { className: "mt-1 text-sm text-muted-foreground", children: g })
+      ] }),
+      C ? /* @__PURE__ */ e(Be, { variant: "secondary", children: C }) : null
+    ] }) }),
+    /* @__PURE__ */ e(W, { className: "space-y-4", children: i })
+  ] });
+}
+const sr = ({ initialCustomer: c }) => {
+  const [g, C] = y({}), [i, f] = y(null), [m, T] = y({}), [A, K] = y(c?.email || ""), [D, q] = y(""), [a, M] = y(c?.phone || ""), [de, Z] = y(!1), [Ke, ke] = y(null), [Se, ee] = y(!1), [Ue, te] = y(!1), [J, re] = y([]), [b, U] = y(null), [F, ce] = y(null), [L, Qe] = y(null), [j, Ce] = y(
+    () => oe(c?.billingAddress, c?.fullName)
+  ), [Q, Fe] = y(
+    () => oe(
+      c?.shippingAddress ?? c?.billingAddress,
+      c?.fullName
+    )
+  ), [z, Te] = y(
+    !c?.shippingAddress || Ft(c?.billingAddress, c?.shippingAddress)
+  ), G = dt((t) => t), { t: s, lang: me } = Oe(), { activeCurrencyCode: o, currencies: R } = At(), N = G?.items ?? [], w = E(
+    () => N.filter((t) => !xe(t)),
+    [N]
+  ), k = E(
+    () => N.filter((t) => xe(t)),
+    [N]
+  ), B = c?.isAuthenticated ?? !1, n = (t, l, p) => {
+    const u = s(t, p);
+    if (u !== t)
+      return u;
+    if (!p)
+      return l;
+    let _ = l;
+    return Object.entries(p).forEach(([h, d]) => {
+      _ = _.replace(
+        new RegExp(`\\{${h}\\}`, "g"),
+        String(d)
+      );
+    }), _;
+  }, S = w.length > 0, Je = E(
+    () => be(N, o, R),
+    [o, R, N]
+  ), ue = E(
+    () => be(w, o, R),
+    [o, R, w]
+  ), pe = E(
+    () => be(k, o, R),
+    [o, R, k]
+  ), he = L?.providerDiscounts.stripe ?? 0, fe = L?.providerDiscounts.freemius ?? 0, ne = Math.max(0, ue - he), Ge = Math.max(0, pe - fe), $ = E(
+    () => z ? j : Q,
+    [j, Q, z]
+  ), O = E(
+    () => S ? $ : j,
+    [j, S, $]
+  ), se = !S || Et($), ie = E(
+    () => J.find((t) => t.id === b),
+    [J, b]
+  ), Ae = E(
+    () => ne + (ie?.amount ?? 0) + (F && !F.isPendingExternalCalculation ? F.amount : 0),
+    [ne, ie, F]
+  ), He = Ae + Ge;
+  if (le(() => {
+    if (!(B || typeof window > "u"))
+      try {
+        const t = window.localStorage.getItem(ae);
+        if (!t)
+          return;
+        const l = JSON.parse(t);
+        l.email && K(l.email), l.phone && M(l.phone), l.billingAddress && Ce(oe(l.billingAddress)), l.shippingAddress && Fe(oe(l.shippingAddress)), typeof l.useBillingForShipping == "boolean" && Te(l.useBillingForShipping), (typeof l.selectedMethodId == "string" || l.selectedMethodId === null) && U(l.selectedMethodId);
+      } catch (t) {
+        console.error("[Checkout] Failed to restore checkout draft:", t);
+      }
+  }, [B]), le(() => {
+    if (!(typeof window > "u")) {
+      if (B) {
+        window.localStorage.removeItem(ae);
+        return;
+      }
+      window.localStorage.setItem(
+        ae,
+        JSON.stringify({
+          email: A,
+          phone: a,
+          billingAddress: j,
+          shippingAddress: Q,
+          useBillingForShipping: z,
+          selectedMethodId: b
+        })
+      );
+    }
+  }, [
+    j,
+    A,
+    B,
+    a,
+    b,
+    Q,
+    z
+  ]), le(() => {
+    if (!S) {
+      re([]), U(null), ee(!1);
+      return;
+    }
+    if (!se) {
+      re([]), U(null), ee(!1);
+      return;
+    }
+    let t = !1;
+    const p = setTimeout(async () => {
+      if (!$.country_code)
+        return;
+      ee(!0);
+      const u = await bt(
+        ne,
+        {
+          country: $.country_code,
+          state: $.state,
+          postal_code: $.postal_code
+        },
+        me,
+        o
+      );
+      t || (u.success && u.methods ? (re(u.methods), u.methods.length > 0 && (!b || !u.methods.find((_) => _.id === b)) && U(u.methods[0].id)) : (re([]), U(null)), ee(!1));
+    }, 400);
+    return () => {
+      t = !0, clearTimeout(p);
+    };
+  }, [
+    o,
+    S,
+    se,
+    me,
+    b,
+    $.country_code,
+    $.postal_code,
+    $.state,
+    ne
+  ]), le(() => {
+    const l = setTimeout(async () => {
+      if (!S || !O.country_code) {
+        te(!1), ce(null);
+        return;
+      }
+      if (we(O.country_code) && !O.state) {
+        te(!1), ce(null);
+        return;
+      }
+      te(!0);
+      const p = await jt(
+        w,
+        {
+          country_code: O.country_code,
+          state: O.state
+        },
+        o,
+        L?.code ?? null,
+        N
+      );
+      p.success && p.tax ? ce(p.tax) : ce(null), te(!1);
+    }, 300);
+    return () => clearTimeout(l);
+  }, [
+    o,
+    S,
+    w,
+    O.country_code,
+    O.state,
+    L?.code,
+    N
+  ]), !G)
+    return null;
+  const $e = () => {
+    Z(!1), ke(null);
+  }, je = de ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm",
+      onClick: $e,
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: "relative bg-background border rounded-xl shadow-2xl p-8 max-w-md mx-4",
+          onClick: (t) => t.stopPropagation(),
+          children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: $e,
+                className: "absolute top-4 right-4 text-muted-foreground hover:text-foreground transition-colors",
+                children: /* @__PURE__ */ e(mt, { className: "w-5 h-5" })
+              }
+            ),
+            /* @__PURE__ */ r("div", { className: "flex items-center gap-3 mb-4", children: [
+              /* @__PURE__ */ e("div", { className: "p-2 rounded-full bg-amber-100 dark:bg-amber-900/20", children: /* @__PURE__ */ e(ut, { className: "h-6 w-6 text-amber-600 dark:text-amber-400" }) }),
+              /* @__PURE__ */ e("h2", { className: "text-xl font-semibold", children: s("ecommerce.checkout_successful") })
+            ] }),
+            /* @__PURE__ */ e("p", { className: "text-muted-foreground mb-2", children: s("ecommerce.sandbox_notice") }),
+            /* @__PURE__ */ e("p", { className: "text-muted-foreground mb-2", children: Ke === "stripe" ? n(
+              "ecommerce.sandbox_checkout_stripe_description",
+              "This simulated step represents the Stripe checkout for physical products."
+            ) : n(
+              "ecommerce.sandbox_checkout_freemius_description",
+              "This simulated step represents the Freemius checkout for digital products."
+            ) }),
+            /* @__PURE__ */ e("p", { className: "text-muted-foreground mb-6", children: s("ecommerce.license_notice") }),
+            /* @__PURE__ */ e(
+              "a",
+              {
+                href: "https://nextblock.ca",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "block w-full text-center py-3 px-4 rounded-lg bg-primary text-primary-foreground font-semibold hover:opacity-90 transition-opacity",
+                children: s("ecommerce.purchase_at")
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) : null, Xe = (t) => {
+    if (!B && (!A || !/^\S+@\S+\.\S+$/.test(A)))
+      return q(s("ecommerce.invalid_email")), null;
+    const l = ve(j);
+    if (!Le(l))
+      return alert(s("checkout_complete_billing_address")), null;
+    const p = S ? ve(z ? j : Q) : null;
+    if (t === "stripe") {
+      if (!Le(p))
+        return alert(s("checkout_complete_shipping_address")), null;
+      if (!b)
+        return alert(
+          n(
+            "ecommerce.shipping_method_required",
+            "Please select a shipping method before continuing."
+          )
+        ), null;
+    }
+    return q(""), {
+      normalizedBillingAddress: l,
+      normalizedShippingAddress: p
+    };
+  }, Pe = async (t, l, p) => {
+    T((_) => ({
+      ..._,
+      [t]: ""
+    }));
+    const u = Xe(t);
+    if (u) {
+      if (Pt) {
+        const _ = new Set(l.map((d) => d.id)), h = N.filter((d) => !_.has(d.id));
+        G.setItems(h), h.length === 0 && G.removeCoupon(), ke(t), Z(!0), typeof window < "u" && h.length === 0 && window.localStorage.removeItem(ae);
+        return;
+      }
+      f(p);
+      try {
+        const _ = await fetch("/api/checkout", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            items: l,
+            customerEmail: B ? void 0 : A,
+            customerPhone: a || null,
+            billingAddress: u.normalizedBillingAddress,
+            shippingAddress: t === "stripe" ? u.normalizedShippingAddress : null,
+            shippingMethodId: t === "stripe" ? b : null,
+            locale: me,
+            currencyCode: o,
+            couponCode: L?.code ?? G.appliedCoupon?.code ?? null,
+            couponContextItems: N
+          })
+        }), h = await _.json();
+        if (!_.ok) {
+          const d = h?.errorKey && typeof h.errorKey == "string" ? n(
+            h.errorKey,
+            h?.error || n("ecommerce.generic_error", "Something went wrong."),
+            h.errorParams
+          ) : h?.error || s("ecommerce.generic_error");
+          T((H) => ({
+            ...H,
+            [t]: d
+          })), f(null);
+          return;
+        }
+        if (h.customProps && h.customProps.provider === "freemius") {
+          const d = h.customProps;
+          let H = null;
+          const tt = () => {
+            window.location.href = `/checkout/success?session_id=${d.order_id}`;
+          }, Ee = (P) => (H || (H = fetch("/api/checkout/freemius/sync", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              orderId: d.order_id,
+              checkoutResponse: P
+            })
+          }).then(async (Ie) => {
+            if (!Ie.ok) {
+              const nt = await Ie.json().catch(() => null);
+              console.error("Freemius checkout sync failed:", nt);
+            }
+          })), H), rt = {
+            product_id: d.plugin_id,
+            public_key: d.public_key,
+            sandbox: d.sandbox
+          }, ct = {
+            name: s("ecommerce.checkout_overlay_title"),
+            plan_id: d.plan_id,
+            ...d.billing_cycle ? { billing_cycle: d.billing_cycle } : {},
+            ...d.trial ? { trial: d.trial } : {},
+            ...d.coupon ? { coupon: d.coupon } : {},
+            user_email: d.user_email,
+            user_firstname: d.user_firstname,
+            user_lastname: d.user_lastname,
+            sandbox: d.sandbox,
+            purchaseCompleted: function(P) {
+              Ee(P);
+            },
+            success: function(P) {
+              (async () => {
+                try {
+                  await Ee(P);
+                } finally {
+                  tt();
+                }
+              })();
+            }
+          };
+          try {
+            new ot(rt).open(ct), f(null);
+          } catch (P) {
+            alert(
+              s("ecommerce.checkout_popup_blocked") + " " + (P.message || String(P))
+            ), h.url && (window.location.href = h.url), f(null);
+          }
+        } else h.url ? window.location.href = h.url : (T((d) => ({
+          ...d,
+          [t]: s("ecommerce.checkout_failed") + (h.error || n("ecommerce.unknown_error", "Unknown error"))
+        })), f(null));
+      } catch (_) {
+        console.error(_), T((h) => ({
+          ...h,
+          [t]: s("ecommerce.generic_error")
+        })), f(null);
+      }
+    }
+  };
+  if (N.length === 0)
+    return /* @__PURE__ */ r(st, { children: [
+      je,
+      /* @__PURE__ */ r("div", { className: "container mx-auto flex min-h-[50vh] flex-col items-center justify-center p-8 text-center", children: [
+        /* @__PURE__ */ e("h1", { className: "mb-4 text-2xl font-bold", children: s("ecommerce.cart_empty") }),
+        /* @__PURE__ */ e("p", { className: "mb-8 text-muted-foreground", children: s("ecommerce.cart_empty_description") }),
+        /* @__PURE__ */ e(_e, { asChild: !0, children: /* @__PURE__ */ e("a", { href: "/shop", children: s("ecommerce.go_to_shop") }) })
+      ] })
+    ] });
+  const ge = S ? se ? Se ? n(
+    "ecommerce.calculating_shipping",
+    "Calculating shipping..."
+  ) : b ? null : J.length > 0 ? s("ecommerce.select_rate") : s("ecommerce.no_rates_for_region") : n(
+    "ecommerce.waiting_on_address_info",
+    "Complete your shipping address to view available shipping options."
+  ) : null, Ye = i !== null || ge !== null, Ve = w.length === 1 ? n("ecommerce.item_count_one", "{count} item", {
+    count: w.length
+  }) : n("ecommerce.item_count_other", "{count} items", {
+    count: w.length
+  }), We = k.length === 1 ? n("ecommerce.license_count_one", "{count} license", {
+    count: k.length
+  }) : n("ecommerce.license_count_other", "{count} licenses", {
+    count: k.length
+  }), Ze = (t) => xe(t) ? n("ecommerce.digital_label", "Digital") : n("ecommerce.physical_label", "Physical"), et = (t) => t === "monthly" ? n(
+    "ecommerce.checkout_billing_cycle_monthly",
+    "Monthly subscription"
+  ) : t === "annual" ? n(
+    "ecommerce.checkout_billing_cycle_annual",
+    "Annual subscription"
+  ) : t === "lifetime" ? n(
+    "ecommerce.checkout_billing_cycle_lifetime",
+    "Lifetime subscription"
+  ) : null;
+  return /* @__PURE__ */ r("div", { className: "container mx-auto px-4 py-12 md:px-6", children: [
+    je,
+    /* @__PURE__ */ r("div", { className: "mx-auto max-w-6xl", children: [
+      /* @__PURE__ */ e("h1", { className: "mb-8 text-3xl font-bold", children: s("ecommerce.checkout") }),
+      /* @__PURE__ */ r("div", { className: "grid gap-8 lg:grid-cols-12 lg:items-start", children: [
+        /* @__PURE__ */ r("div", { className: "lg:col-span-8 space-y-6", children: [
+          /* @__PURE__ */ r(X, { children: [
+            /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ r(V, { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e(pt, { className: "w-5 h-5" }),
+              s("ecommerce.contact_information")
+            ] }) }),
+            /* @__PURE__ */ r(W, { className: "space-y-4", children: [
+              B ? /* @__PURE__ */ e("div", { className: "rounded-xl border bg-muted/20 p-4 text-sm text-muted-foreground", children: s("checkout_prefill_notice", { email: c?.email || "" }) }) : /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ r(v, { htmlFor: "checkout-email", children: [
+                  s("ecommerce.email_address"),
+                  " ",
+                  /* @__PURE__ */ e("span", { className: "text-destructive", children: "*" })
+                ] }),
+                /* @__PURE__ */ e(
+                  I,
+                  {
+                    id: "checkout-email",
+                    type: "email",
+                    placeholder: s("ecommerce.email_placeholder"),
+                    value: A,
+                    onChange: (t) => {
+                      K(t.target.value), D && q("");
+                    },
+                    required: !0
+                  }
+                ),
+                D ? /* @__PURE__ */ e("p", { className: "text-xs text-destructive mt-1", children: D }) : null
+              ] }),
+              /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ e(v, { htmlFor: "checkout-phone", children: s("phone_number") }),
+                /* @__PURE__ */ e(
+                  I,
+                  {
+                    id: "checkout-phone",
+                    placeholder: s("optional"),
+                    value: a,
+                    onChange: (t) => M(t.target.value)
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ e(
+            qe,
+            {
+              idPrefix: "billing",
+              title: s("billing_address"),
+              description: s("checkout_billing_address_help"),
+              value: j,
+              onChange: Ce
+            }
+          ),
+          S ? /* @__PURE__ */ r("div", { className: "flex items-center space-x-3 rounded-xl border bg-muted/20 p-4", children: [
+            /* @__PURE__ */ e(
+              it,
+              {
+                id: "use-billing-for-shipping",
+                checked: z,
+                onCheckedChange: (t) => Te(!!t)
+              }
+            ),
+            /* @__PURE__ */ r("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ e(v, { htmlFor: "use-billing-for-shipping", className: "cursor-pointer", children: s("use_billing_for_shipping") }),
+              /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: s("checkout_use_billing_for_shipping_help") })
+            ] })
+          ] }) : null,
+          S && !z ? /* @__PURE__ */ e(
+            qe,
+            {
+              idPrefix: "shipping",
+              title: s("shipping_address"),
+              description: s("checkout_shipping_address_help"),
+              value: Q,
+              onChange: Fe
+            }
+          ) : null,
+          S ? /* @__PURE__ */ r(X, { children: [
+            /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ r(V, { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e(ht, { className: "w-5 h-5 text-primary" }),
+              s("ecommerce.shipping_method")
+            ] }) }),
+            /* @__PURE__ */ e(W, { children: Se ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ e(ye, { className: "w-6 h-6 animate-spin text-muted-foreground" }) }) : J.length > 0 ? /* @__PURE__ */ e("div", { className: "space-y-3", children: J.map((t) => /* @__PURE__ */ r(
+              "div",
+              {
+                onClick: () => U(t.id),
+                className: `flex items-center justify-between p-4 rounded-lg border-2 cursor-pointer transition-all ${b === t.id ? "border-primary bg-primary/5" : "border-neutral-100 hover:border-neutral-200"}`,
+                children: [
+                  /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: `w-4 h-4 rounded-full border flex items-center justify-center ${b === t.id ? "border-primary" : "border-neutral-300"}`,
+                        children: b === t.id ? /* @__PURE__ */ e("div", { className: "w-2 h-2 rounded-full bg-primary" }) : null
+                      }
+                    ),
+                    /* @__PURE__ */ e("span", { className: "font-medium", children: t.name })
+                  ] }),
+                  /* @__PURE__ */ e("span", { className: "font-bold", children: x(t.amount, o) })
+                ]
+              },
+              t.id
+            )) }) : /* @__PURE__ */ e("div", { className: "py-4 text-center text-muted-foreground bg-muted/30 rounded-lg italic", children: se ? s("ecommerce.no_rates_for_region") : n(
+              "ecommerce.waiting_on_address_info",
+              "Complete your shipping address to view available shipping options."
+            ) }) })
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ r("div", { className: "lg:col-span-4 space-y-6", children: [
+          /* @__PURE__ */ r(X, { className: "top-6", children: [
+            /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ e(V, { children: s("ecommerce.order_summary") }) }),
+            /* @__PURE__ */ r(W, { className: "space-y-4", children: [
+              /* @__PURE__ */ e("div", { className: "space-y-3 max-h-[260px] overflow-y-auto pr-2", children: N.map((t) => {
+                const l = Ne(t, {
+                  currencyCode: o,
+                  currencies: R
+                }), p = Re(t);
+                return /* @__PURE__ */ r("div", { className: "flex items-start justify-between gap-4", children: [
+                  /* @__PURE__ */ r("div", { className: "flex gap-3", children: [
+                    t.image_url ? /* @__PURE__ */ e("div", { className: "h-10 w-10 shrink-0 overflow-hidden rounded border bg-neutral-100", children: /* @__PURE__ */ e("img", { src: t.image_url, alt: t.title, className: "h-full w-full object-cover" }) }) : null,
+                    /* @__PURE__ */ r("div", { className: "grid gap-0.5", children: [
+                      /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ e("span", { className: "font-medium text-xs line-clamp-1", children: t.title }),
+                        /* @__PURE__ */ e(Be, { variant: "outline", className: "text-[9px] uppercase", children: Ze(t) })
+                      ] }),
+                      t.variant_label ? /* @__PURE__ */ e("span", { className: "text-[10px] text-muted-foreground line-clamp-1", children: t.variant_label }) : null,
+                      /* @__PURE__ */ r("span", { className: "text-[10px] text-muted-foreground", children: [
+                        s("ecommerce.qty"),
+                        ": ",
+                        t.quantity
+                      ] }),
+                      p ? /* @__PURE__ */ r("span", { className: "text-[10px] font-medium text-emerald-700", children: [
+                        p.label,
+                        " - ",
+                        p.paymentRequirementLabel
+                      ] }) : null
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ r("div", { className: "flex flex-col items-end gap-0.5 shrink-0", children: [
+                    /* @__PURE__ */ e("span", { className: "font-medium text-xs", children: x(
+                      (l.sale_price ?? l.price) * t.quantity,
+                      o
+                    ) }),
+                    l.sale_price ? /* @__PURE__ */ e("span", { className: "text-[9px] text-muted-foreground line-through", children: x(l.price * t.quantity, o) }) : null
+                  ] })
+                ] }, `${t.id}-${t.variant_id || "base"}`);
+              }) }),
+              /* @__PURE__ */ e(lt, {}),
+              /* @__PURE__ */ e(
+                $t,
+                {
+                  items: N,
+                  currencyCode: o,
+                  onQuoteChange: Qe
+                }
+              ),
+              /* @__PURE__ */ r("div", { className: "space-y-2 text-sm", children: [
+                /* @__PURE__ */ r("div", { className: "flex justify-between", children: [
+                  /* @__PURE__ */ e("span", { children: s("ecommerce.subtotal") }),
+                  /* @__PURE__ */ e("span", { children: x(Je, o) })
+                ] }),
+                w.length > 0 ? /* @__PURE__ */ r("div", { className: "flex justify-between text-muted-foreground", children: [
+                  /* @__PURE__ */ e("span", { children: n(
+                    "ecommerce.physical_products",
+                    "Physical products"
+                  ) }),
+                  /* @__PURE__ */ e("span", { children: x(ue, o) })
+                ] }) : null,
+                k.length > 0 ? /* @__PURE__ */ r("div", { className: "flex justify-between text-muted-foreground", children: [
+                  /* @__PURE__ */ e("span", { children: n(
+                    "ecommerce.digital_products",
+                    "Digital products"
+                  ) }),
+                  /* @__PURE__ */ e("span", { children: x(pe, o) })
+                ] }) : null,
+                L ? /* @__PURE__ */ r("div", { className: "flex justify-between text-emerald-600", children: [
+                  /* @__PURE__ */ r("span", { children: [
+                    n("ecommerce.discount", "Discount"),
+                    " (",
+                    L.code,
+                    ")"
+                  ] }),
+                  /* @__PURE__ */ r("span", { children: [
+                    "-",
+                    x(L.discountTotal, o)
+                  ] })
+                ] }) : null,
+                (w.length > 0 || k.length > 0) && /* @__PURE__ */ r("div", { className: "flex justify-between font-bold text-lg pt-2 border-t mt-2", children: [
+                  /* @__PURE__ */ e("span", { children: n(
+                    "ecommerce.estimated_total",
+                    "Estimated total"
+                  ) }),
+                  /* @__PURE__ */ e("span", { className: "text-primary", children: x(He, o) })
+                ] })
+              ] })
+            ] })
+          ] }),
+          w.length > 0 ? /* @__PURE__ */ r(
+            ze,
+            {
+              title: n(
+                "ecommerce.stripe_checkout_title",
+                "Stripe Checkout"
+              ),
+              description: n(
+                "ecommerce.stripe_checkout_description",
+                "Pay for physical products in one Stripe checkout session."
+              ),
+              badgeLabel: Ve,
+              children: [
+                /* @__PURE__ */ r("div", { className: "space-y-2 text-sm", children: [
+                  /* @__PURE__ */ r("div", { className: "flex justify-between", children: [
+                    /* @__PURE__ */ e("span", { children: n(
+                      "ecommerce.physical_subtotal",
+                      "Physical subtotal"
+                    ) }),
+                    /* @__PURE__ */ e("span", { children: x(ue, o) })
+                  ] }),
+                  he > 0 ? /* @__PURE__ */ r("div", { className: "flex justify-between text-emerald-600", children: [
+                    /* @__PURE__ */ e("span", { children: n("ecommerce.discount", "Discount") }),
+                    /* @__PURE__ */ r("span", { children: [
+                      "-",
+                      x(he, o)
+                    ] })
+                  ] }) : null,
+                  /* @__PURE__ */ r("div", { className: "flex justify-between", children: [
+                    /* @__PURE__ */ e("span", { children: s("ecommerce.shipping") }),
+                    /* @__PURE__ */ e("span", { children: ie ? x(ie.amount, o) : "-" })
+                  ] }),
+                  /* @__PURE__ */ r("div", { className: "flex justify-between", children: [
+                    /* @__PURE__ */ e("span", { children: n("ecommerce.tax", "Tax") }),
+                    /* @__PURE__ */ e("span", { children: Ue ? "..." : F?.isPendingExternalCalculation ? n(
+                      "ecommerce.tax_calculated_on_stripe",
+                      "Calculated on Stripe"
+                    ) : F ? x(F.amount, o) : "-" })
+                  ] }),
+                  F && F.lines.length > 0 ? /* @__PURE__ */ e("div", { className: "rounded-lg bg-muted/20 px-3 py-2 text-xs text-muted-foreground", children: F.lines.map((t) => /* @__PURE__ */ r("div", { className: "flex justify-between gap-3", children: [
+                    /* @__PURE__ */ r("span", { children: [
+                      t.name,
+                      " (",
+                      t.rate.toFixed(4),
+                      "%)"
+                    ] }),
+                    /* @__PURE__ */ e("span", { children: x(t.amount, o) })
+                  ] }, t.id || `${t.name}-${t.rate}`)) }) : null,
+                  /* @__PURE__ */ r("div", { className: "flex justify-between font-semibold pt-2 border-t", children: [
+                    /* @__PURE__ */ e("span", { children: n(
+                      "ecommerce.total_on_stripe",
+                      "Total on Stripe"
+                    ) }),
+                    /* @__PURE__ */ e("span", { children: x(Ae, o) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ r(
+                  _e,
+                  {
+                    className: "w-full",
+                    size: "lg",
+                    onClick: () => Pe("stripe", w, "stripe"),
+                    disabled: Ye,
+                    children: [
+                      i === "stripe" ? /* @__PURE__ */ e(ye, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ e(ft, { className: "mr-2 h-4 w-4" }),
+                      i === "stripe" ? s("ecommerce.processing") : n(
+                        "ecommerce.checkout_physical_products",
+                        "Checkout Physical Products"
+                      )
+                    ]
+                  }
+                ),
+                ge && i === null ? /* @__PURE__ */ e("p", { className: "text-[11px] text-muted-foreground", children: ge }) : null,
+                m.stripe ? /* @__PURE__ */ e("div", { className: "rounded-lg border border-destructive/20 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: m.stripe }) : null,
+                /* @__PURE__ */ e("p", { className: "text-[11px] text-muted-foreground", children: F?.isPendingExternalCalculation ? n(
+                  "checkout_stripe_tax_finalized_notice",
+                  "Tax will be finalized by Stripe Tax on the payment step."
+                ) : n(
+                  "ecommerce.shipping_taxes_collected_on_stripe",
+                  "Shipping and taxes are only collected during the Stripe step for physical products."
+                ) })
+              ]
+            }
+          ) : null,
+          k.length > 0 ? /* @__PURE__ */ r(
+            ze,
+            {
+              title: n(
+                "ecommerce.freemius_checkout_title",
+                "Freemius Checkout"
+              ),
+              description: n(
+                "ecommerce.freemius_checkout_description",
+                "Digital products use the Freemius checkout flow."
+              ),
+              badgeLabel: We,
+              children: [
+                /* @__PURE__ */ e("div", { className: "space-y-3", children: k.map((t) => {
+                  const l = Ne(t, {
+                    currencyCode: o,
+                    currencies: R
+                  }), p = Re(t), u = `freemius:${t.id}`, _ = p ? g[u] || "paid" : void 0;
+                  return /* @__PURE__ */ r("div", { className: "rounded-lg border p-3 space-y-3", children: [
+                    /* @__PURE__ */ r("div", { className: "flex items-start justify-between gap-3", children: [
+                      /* @__PURE__ */ r("div", { children: [
+                        /* @__PURE__ */ e("p", { className: "font-medium", children: t.title }),
+                        t.billing_cycle ? /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground capitalize", children: et(t.billing_cycle) }) : null,
+                        p ? /* @__PURE__ */ r("p", { className: "text-xs font-medium text-emerald-700", children: [
+                          p.label,
+                          " - ",
+                          p.paymentRequirementLabel
+                        ] }) : null
+                      ] }),
+                      /* @__PURE__ */ e("span", { className: "font-medium", children: x(l.sale_price ?? l.price, o) })
+                    ] }),
+                    p && !t.trial_requires_payment_method && /* @__PURE__ */ r("div", { className: "bg-muted/30 p-3 rounded-md border text-sm mt-2 mb-3", children: [
+                      /* @__PURE__ */ e("p", { className: "font-medium mb-3", children: n(
+                        "ecommerce.freemius_trial_preference_title",
+                        "How would you like to start your trial?"
+                      ) }),
+                      /* @__PURE__ */ r(
+                        at,
+                        {
+                          value: g[u] || "paid",
+                          onValueChange: (h) => C((d) => ({ ...d, [u]: h })),
+                          className: "gap-3",
+                          children: [
+                            /* @__PURE__ */ r("div", { className: "flex items-start space-x-3", children: [
+                              /* @__PURE__ */ e(De, { value: "paid", id: `${u}-paid`, className: "mt-1" }),
+                              /* @__PURE__ */ r("div", { className: "grid gap-1.5", children: [
+                                /* @__PURE__ */ e(v, { htmlFor: `${u}-paid`, className: "font-medium leading-none cursor-pointer", children: n(
+                                  "ecommerce.freemius_trial_with_card",
+                                  "Enter Payment Details Now (Still get full trial length free)"
+                                ) }),
+                                /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground", children: n(
+                                  "ecommerce.freemius_trial_with_card_help",
+                                  "You will not be billed until the trial ends. Cancel anytime."
+                                ) })
+                              ] })
+                            ] }),
+                            /* @__PURE__ */ r("div", { className: "flex items-start space-x-3", children: [
+                              /* @__PURE__ */ e(De, { value: "free", id: `${u}-free`, className: "mt-1" }),
+                              /* @__PURE__ */ e("div", { className: "grid gap-1.5", children: /* @__PURE__ */ e(v, { htmlFor: `${u}-free`, className: "font-medium leading-none cursor-pointer", children: n(
+                                "ecommerce.freemius_trial_no_card",
+                                "Start Free Trial (No card required)"
+                              ) }) })
+                            ] })
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ r(
+                      _e,
+                      {
+                        className: "w-full h-auto min-h-[2.75rem] py-2",
+                        variant: k.length > 1 ? "outline" : "default",
+                        onClick: () => Pe(
+                          "freemius",
+                          [
+                            {
+                              ...t,
+                              ..._ ? { trial_preference: _ } : {}
+                            }
+                          ],
+                          u
+                        ),
+                        disabled: i !== null,
+                        children: [
+                          i === u ? /* @__PURE__ */ e(ye, { className: "mr-2 h-4 w-4 shrink-0 animate-spin" }) : /* @__PURE__ */ e(gt, { className: "mr-2 h-4 w-4 shrink-0" }),
+                          /* @__PURE__ */ e("span", { className: "whitespace-normal text-left", children: i === u ? s("ecommerce.processing") : k.length > 1 ? n(
+                            "ecommerce.checkout_product",
+                            "Checkout {title}",
+                            { title: t.title }
+                          ) : n(
+                            "ecommerce.checkout_digital_product",
+                            "Checkout Digital Product"
+                          ) })
+                        ]
+                      }
+                    )
+                  ] }, u);
+                }) }),
+                /* @__PURE__ */ r("div", { className: "flex justify-between text-sm font-semibold border-t pt-3", children: [
+                  /* @__PURE__ */ e("span", { children: n(
+                    "ecommerce.digital_subtotal",
+                    "Digital subtotal"
+                  ) }),
+                  /* @__PURE__ */ e("span", { children: x(pe, o) })
+                ] }),
+                fe > 0 ? /* @__PURE__ */ r("div", { className: "flex justify-between text-sm font-semibold text-emerald-600", children: [
+                  /* @__PURE__ */ e("span", { children: n("ecommerce.discount", "Discount") }),
+                  /* @__PURE__ */ r("span", { children: [
+                    "-",
+                    x(fe, o)
+                  ] })
+                ] }) : null,
+                m.freemius ? /* @__PURE__ */ e("div", { className: "rounded-lg border border-destructive/20 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: m.freemius }) : null,
+                /* @__PURE__ */ e("p", { className: "text-[11px] text-muted-foreground", children: k.length > 1 ? n(
+                  "ecommerce.freemius_multi_checkout_notice",
+                  "Freemius licenses are completed one at a time, so each digital product gets its own checkout action."
+                ) : n(
+                  "ecommerce.freemius_tax_notice",
+                  "Taxes and compliance for digital products are handled inside the Freemius checkout."
+                ) })
+              ]
+            }
+          ) : null
+        ] })
+      ] })
+    ] })
+  ] });
+};
+export {
+  sr as Checkout
+};