@nextblock-cms/ecom 0.8.1 → 0.8.7

package/lib/components/Checkout.es.js

@@ -0,0 +1,987 @@
+'use client';
+import { jsx as e, jsxs as r, Fragment as st } from "react/jsx-runtime";
+import { Badge as Oe } from "@nextblock-cms/ui/badge";
+import { Button as _e } from "@nextblock-cms/ui/button";
+import { Card as Q, CardHeader as X, CardTitle as Y, CardContent as V } from "@nextblock-cms/ui/card";
+import { Checkbox as lt } from "@nextblock-cms/ui/checkbox";
+import { Input as j } from "@nextblock-cms/ui/input";
+import { Label as v } from "@nextblock-cms/ui/label";
+import { Separator as it } from "@nextblock-cms/ui/separator";
+import { RadioGroup as ot, RadioGroupItem as De } from "@nextblock-cms/ui/radio-group";
+import { Checkout as at } from "@freemius/checkout";
+import { getCartItemActivePrice as Ne } from "../cart-store.es.js";
+import { useCart as dt } from "../use-cart.es.js";
+import { useState as _, useMemo as $, useEffect as ie } 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 qe, formatPrice as y } from "@nextblock-cms/utils";
+import { normalizeCountryCode as yt, countries as xt } from "../countries.es.js";
+import { getShippingEstimates as bt } from "../server-actions/shipping-actions.es.js";
+import { getTaxEstimate as Nt } from "../server-actions/tax-actions.es.js";
+import { isDigitalItem as xe } from "../types.es.js";
+import { countryUsesStructuredStates as ke, getStatesForCountry as Me } from "../states.es.js";
+import { addressesMatch as vt, emptyCustomerAddress as kt, normalizeCustomerAddress as ve, isCustomerAddressComplete as Le } from "../customer.es.js";
+import { useCurrency as wt } from "../CurrencyProvider.es.js";
+import { getTrialSummary as Re } from "../trials.es.js";
+import { CouponForm as St } from "./CouponForm.es.js";
+const Ct = process.env.NEXT_PUBLIC_IS_SANDBOX === "true", oe = "nextblock-checkout-draft-v1";
+function ae(c, x) {
+  return {
+    ...kt(),
+    company_name: c?.company_name || "",
+    recipient_name: c?.recipient_name || x || "",
+    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 Ft(c) {
+  const x = ve(c);
+  return !(!x?.country_code || !x.postal_code || ke(x.country_code) && !x.state);
+}
+function be(c, x, P) {
+  return c.reduce((l, f) => {
+    const { price: h, sale_price: I } = Ne(f, {
+      currencyCode: x,
+      currencies: P
+    });
+    return l + (I ?? h) * f.quantity;
+  }, 0);
+}
+function ze({
+  idPrefix: c,
+  title: x,
+  description: P,
+  value: l,
+  onChange: f
+}) {
+  const { t: h } = qe(), I = h("company_name") === "company_name" ? "Company name" : h("company_name"), E = h("select_an_option") === "select_an_option" ? "Select an option" : h("select_an_option"), W = h("state_province") === "state_province" ? "State / Province" : h("state_province"), q = Me(l.country_code), K = ke(l.country_code);
+  return /* @__PURE__ */ r(Q, { children: [
+    /* @__PURE__ */ r(X, { children: [
+      /* @__PURE__ */ r(Y, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(_t, { className: "w-5 h-5" }),
+        x
+      ] }),
+      /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: P })
+    ] }),
+    /* @__PURE__ */ r(V, { 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: I }),
+          /* @__PURE__ */ e(
+            j,
+            {
+              id: `${c}-company`,
+              value: l.company_name,
+              onChange: (a) => f({ ...l, company_name: a.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(v, { htmlFor: `${c}-name`, children: h("full_name") }),
+          /* @__PURE__ */ e(
+            j,
+            {
+              id: `${c}-name`,
+              value: l.recipient_name,
+              onChange: (a) => f({ ...l, recipient_name: a.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(v, { htmlFor: `${c}-country`, children: h("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: l.country_code,
+              onChange: (a) => {
+                const U = a.target.value, de = Me(U);
+                f({
+                  ...l,
+                  country_code: U,
+                  state: de.some((Z) => Z.code === l.state) ? l.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: h("address_line_1") }),
+        /* @__PURE__ */ e(
+          j,
+          {
+            id: `${c}-line1`,
+            value: l.line1,
+            onChange: (a) => f({ ...l, line1: a.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(v, { htmlFor: `${c}-line2`, children: h("address_line_2") }),
+        /* @__PURE__ */ e(
+          j,
+          {
+            id: `${c}-line2`,
+            value: l.line2,
+            onChange: (a) => f({ ...l, 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: h("city") }),
+          /* @__PURE__ */ e(
+            j,
+            {
+              id: `${c}-city`,
+              value: l.city,
+              onChange: (a) => f({ ...l, city: a.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(v, { htmlFor: `${c}-state`, children: h("state_province") }),
+          K ? /* @__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: l.state,
+              onChange: (a) => f({ ...l, state: a.target.value }),
+              children: [
+                /* @__PURE__ */ e("option", { value: "", children: `${E}: ${W}` }),
+                q.map((a) => /* @__PURE__ */ e("option", { value: a.code, children: a.name }, a.code))
+              ]
+            }
+          ) : /* @__PURE__ */ e(
+            j,
+            {
+              id: `${c}-state`,
+              value: l.state,
+              onChange: (a) => f({ ...l, state: a.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(v, { htmlFor: `${c}-postal`, children: h("postal_zip_code") }),
+          /* @__PURE__ */ e(
+            j,
+            {
+              id: `${c}-postal`,
+              value: l.postal_code,
+              onChange: (a) => f({ ...l, postal_code: a.target.value })
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function Be({
+  title: c,
+  description: x,
+  badgeLabel: P,
+  children: l
+}) {
+  return /* @__PURE__ */ r(Q, { children: [
+    /* @__PURE__ */ e(X, { children: /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-3 flex-wrap", children: [
+      /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ e(Y, { children: c }),
+        /* @__PURE__ */ e("p", { className: "mt-1 text-sm text-muted-foreground", children: x })
+      ] }),
+      P ? /* @__PURE__ */ e(Oe, { variant: "secondary", children: P }) : null
+    ] }) }),
+    /* @__PURE__ */ e(V, { className: "space-y-4", children: l })
+  ] });
+}
+const Wt = ({ initialCustomer: c }) => {
+  const [x, P] = _({}), [l, f] = _(null), [h, I] = _({}), [E, W] = _(c?.email || ""), [q, K] = _(""), [a, U] = _(c?.phone || ""), [de, Z] = _(!1), [Ke, we] = _(null), [Se, ee] = _(!1), [Ue, te] = _(!1), [J, re] = _([]), [b, B] = _(null), [C, ce] = _(null), [D, Je] = _(null), [A, Ce] = _(
+    () => ae(c?.billingAddress, c?.fullName)
+  ), [O, Fe] = _(
+    () => ae(
+      c?.shippingAddress ?? c?.billingAddress,
+      c?.fullName
+    )
+  ), [L, Ae] = _(
+    !c?.shippingAddress || vt(c?.billingAddress, c?.shippingAddress)
+  ), G = dt((t) => t), { t: s, lang: me } = qe(), { activeCurrencyCode: o, currencies: M } = wt(), N = G?.items ?? [], k = $(
+    () => N.filter((t) => !xe(t)),
+    [N]
+  ), w = $(
+    () => N.filter((t) => xe(t)),
+    [N]
+  ), R = c?.isAuthenticated ?? !1, n = (t, i, u) => {
+    const m = s(t, u);
+    if (m !== t)
+      return m;
+    if (!u)
+      return i;
+    let g = i;
+    return Object.entries(u).forEach(([p, d]) => {
+      g = g.replace(
+        new RegExp(`\\{${p}\\}`, "g"),
+        String(d)
+      );
+    }), g;
+  }, S = k.length > 0, Ge = $(
+    () => be(N, o, M),
+    [o, M, N]
+  ), ue = $(
+    () => be(k, o, M),
+    [o, M, k]
+  ), pe = $(
+    () => be(w, o, M),
+    [o, M, w]
+  ), he = D?.providerDiscounts.stripe ?? 0, fe = D?.providerDiscounts.freemius ?? 0, ne = Math.max(0, ue - he), He = Math.max(0, pe - fe), F = $(
+    () => L ? A : O,
+    [A, O, L]
+  ), z = $(
+    () => S ? F : A,
+    [A, S, F]
+  ), se = !S || Ft(F), le = $(
+    () => J.find((t) => t.id === b),
+    [J, b]
+  ), Te = $(
+    () => ne + (le?.amount ?? 0) + (C && !C.isPendingExternalCalculation ? C.amount : 0),
+    [ne, le, C]
+  ), Qe = Te + He;
+  if (ie(() => {
+    if (!(R || typeof window > "u"))
+      try {
+        const t = window.localStorage.getItem(oe);
+        if (!t)
+          return;
+        const i = JSON.parse(t);
+        i.email && W(i.email), i.phone && U(i.phone), i.billingAddress && Ce(ae(i.billingAddress)), i.shippingAddress && Fe(ae(i.shippingAddress)), typeof i.useBillingForShipping == "boolean" && Ae(i.useBillingForShipping), (typeof i.selectedMethodId == "string" || i.selectedMethodId === null) && B(i.selectedMethodId);
+      } catch (t) {
+        console.error("[Checkout] Failed to restore checkout draft:", t);
+      }
+  }, [R]), ie(() => {
+    if (!(typeof window > "u")) {
+      if (R) {
+        window.localStorage.removeItem(oe);
+        return;
+      }
+      window.localStorage.setItem(
+        oe,
+        JSON.stringify({
+          email: E,
+          phone: a,
+          billingAddress: A,
+          shippingAddress: O,
+          useBillingForShipping: L,
+          selectedMethodId: b
+        })
+      );
+    }
+  }, [
+    A,
+    E,
+    R,
+    a,
+    b,
+    O,
+    L
+  ]), ie(() => {
+    if (!S) {
+      re([]), B(null), ee(!1);
+      return;
+    }
+    if (!se) {
+      re([]), B(null), ee(!1);
+      return;
+    }
+    let t = !1;
+    const u = setTimeout(async () => {
+      if (!F.country_code)
+        return;
+      ee(!0);
+      const m = await bt(
+        ne,
+        {
+          country: F.country_code,
+          state: F.state,
+          postal_code: F.postal_code
+        },
+        me,
+        o
+      );
+      t || (m.success && m.methods ? (re(m.methods), m.methods.length > 0 && (!b || !m.methods.find((g) => g.id === b)) && B(m.methods[0].id)) : (re([]), B(null)), ee(!1));
+    }, 400);
+    return () => {
+      t = !0, clearTimeout(u);
+    };
+  }, [
+    o,
+    S,
+    se,
+    me,
+    b,
+    F.country_code,
+    F.postal_code,
+    F.state,
+    ne
+  ]), ie(() => {
+    const i = setTimeout(async () => {
+      if (!S || !z.country_code) {
+        te(!1), ce(null);
+        return;
+      }
+      if (ke(z.country_code) && !z.state) {
+        te(!1), ce(null);
+        return;
+      }
+      te(!0);
+      const u = await Nt(
+        k,
+        {
+          country_code: z.country_code,
+          state: z.state
+        },
+        o,
+        D?.code ?? null,
+        N
+      );
+      u.success && u.tax ? ce(u.tax) : ce(null), te(!1);
+    }, 300);
+    return () => clearTimeout(i);
+  }, [
+    o,
+    S,
+    k,
+    z.country_code,
+    z.state,
+    D?.code,
+    N
+  ]), !G)
+    return null;
+  const $e = () => {
+    Z(!1), we(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 (!R && (!E || !/^\S+@\S+\.\S+$/.test(E)))
+      return K(s("ecommerce.invalid_email")), null;
+    const i = ve(A);
+    if (!Le(i))
+      return alert(s("checkout_complete_billing_address")), null;
+    const u = S ? ve(L ? A : O) : null;
+    if (t === "stripe") {
+      if (!Le(u))
+        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 K(""), {
+      normalizedBillingAddress: i,
+      normalizedShippingAddress: u
+    };
+  }, Pe = async (t, i, u) => {
+    I((g) => ({
+      ...g,
+      [t]: ""
+    }));
+    const m = Xe(t);
+    if (m) {
+      if (Ct) {
+        const g = new Set(i.map((d) => d.id)), p = N.filter((d) => !g.has(d.id));
+        G.setItems(p), p.length === 0 && G.removeCoupon(), we(t), Z(!0), typeof window < "u" && p.length === 0 && window.localStorage.removeItem(oe);
+        return;
+      }
+      f(u);
+      try {
+        const g = await fetch("/api/checkout", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            items: i,
+            customerEmail: R ? void 0 : E,
+            customerPhone: a || null,
+            billingAddress: m.normalizedBillingAddress,
+            shippingAddress: t === "stripe" ? m.normalizedShippingAddress : null,
+            shippingMethodId: t === "stripe" ? b : null,
+            locale: me,
+            currencyCode: o,
+            couponCode: D?.code ?? G.appliedCoupon?.code ?? null,
+            couponContextItems: N
+          })
+        }), p = await g.json();
+        if (!g.ok) {
+          const d = p?.errorKey && typeof p.errorKey == "string" ? n(
+            p.errorKey,
+            p?.error || n("ecommerce.generic_error", "Something went wrong."),
+            p.errorParams
+          ) : p?.error || s("ecommerce.generic_error");
+          I((H) => ({
+            ...H,
+            [t]: d
+          })), f(null);
+          return;
+        }
+        if (p.customProps && p.customProps.provider === "freemius") {
+          const d = p.customProps;
+          let H = null;
+          const tt = () => {
+            window.location.href = `/checkout/success?session_id=${d.order_id}`;
+          }, Ie = (T) => (H || (H = fetch("/api/checkout/freemius/sync", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              orderId: d.order_id,
+              checkoutResponse: T
+            })
+          }).then(async (Ee) => {
+            if (!Ee.ok) {
+              const nt = await Ee.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(T) {
+              Ie(T);
+            },
+            success: function(T) {
+              (async () => {
+                try {
+                  await Ie(T);
+                } finally {
+                  tt();
+                }
+              })();
+            }
+          };
+          try {
+            new at(rt).open(ct), f(null);
+          } catch (T) {
+            alert(
+              s("ecommerce.checkout_popup_blocked") + " " + (T.message || String(T))
+            ), p.url && (window.location.href = p.url), f(null);
+          }
+        } else p.url ? window.location.href = p.url : (I((d) => ({
+          ...d,
+          [t]: s("ecommerce.checkout_failed") + (p.error || n("ecommerce.unknown_error", "Unknown error"))
+        })), f(null));
+      } catch (g) {
+        console.error(g), I((p) => ({
+          ...p,
+          [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 = l !== null || ge !== null, Ve = k.length === 1 ? n("ecommerce.item_count_one", "{count} item", {
+    count: k.length
+  }) : n("ecommerce.item_count_other", "{count} items", {
+    count: k.length
+  }), We = w.length === 1 ? n("ecommerce.license_count_one", "{count} license", {
+    count: w.length
+  }) : n("ecommerce.license_count_other", "{count} licenses", {
+    count: w.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(Q, { children: [
+            /* @__PURE__ */ e(X, { children: /* @__PURE__ */ r(Y, { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e(pt, { className: "w-5 h-5" }),
+              s("ecommerce.contact_information")
+            ] }) }),
+            /* @__PURE__ */ r(V, { className: "space-y-4", children: [
+              R ? /* @__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(
+                  j,
+                  {
+                    id: "checkout-email",
+                    type: "email",
+                    placeholder: s("ecommerce.email_placeholder"),
+                    value: E,
+                    onChange: (t) => {
+                      W(t.target.value), q && K("");
+                    },
+                    required: !0
+                  }
+                ),
+                q ? /* @__PURE__ */ e("p", { className: "text-xs text-destructive mt-1", children: q }) : null
+              ] }),
+              /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ e(v, { htmlFor: "checkout-phone", children: s("phone_number") }),
+                /* @__PURE__ */ e(
+                  j,
+                  {
+                    id: "checkout-phone",
+                    placeholder: s("optional"),
+                    value: a,
+                    onChange: (t) => U(t.target.value)
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ e(
+            ze,
+            {
+              idPrefix: "billing",
+              title: s("billing_address"),
+              description: s("checkout_billing_address_help"),
+              value: A,
+              onChange: Ce
+            }
+          ),
+          S ? /* @__PURE__ */ r("div", { className: "flex items-center space-x-3 rounded-xl border bg-muted/20 p-4", children: [
+            /* @__PURE__ */ e(
+              lt,
+              {
+                id: "use-billing-for-shipping",
+                checked: L,
+                onCheckedChange: (t) => Ae(!!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 && !L ? /* @__PURE__ */ e(
+            ze,
+            {
+              idPrefix: "shipping",
+              title: s("shipping_address"),
+              description: s("checkout_shipping_address_help"),
+              value: O,
+              onChange: Fe
+            }
+          ) : null,
+          S ? /* @__PURE__ */ r(Q, { children: [
+            /* @__PURE__ */ e(X, { children: /* @__PURE__ */ r(Y, { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e(ht, { className: "w-5 h-5 text-primary" }),
+              s("ecommerce.shipping_method")
+            ] }) }),
+            /* @__PURE__ */ e(V, { 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: () => B(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: y(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(Q, { className: "top-6", children: [
+            /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(Y, { children: s("ecommerce.order_summary") }) }),
+            /* @__PURE__ */ r(V, { 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 i = Ne(t, {
+                  currencyCode: o,
+                  currencies: M
+                }), u = 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(Oe, { 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
+                      ] }),
+                      u ? /* @__PURE__ */ r("span", { className: "text-[10px] font-medium text-emerald-700", children: [
+                        u.label,
+                        " - ",
+                        u.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: y(
+                      (i.sale_price ?? i.price) * t.quantity,
+                      o
+                    ) }),
+                    i.sale_price ? /* @__PURE__ */ e("span", { className: "text-[9px] text-muted-foreground line-through", children: y(i.price * t.quantity, o) }) : null
+                  ] })
+                ] }, `${t.id}-${t.variant_id || "base"}`);
+              }) }),
+              /* @__PURE__ */ e(it, {}),
+              /* @__PURE__ */ e(
+                St,
+                {
+                  items: N,
+                  currencyCode: o,
+                  onQuoteChange: Je
+                }
+              ),
+              /* @__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: y(Ge, o) })
+                ] }),
+                k.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: y(ue, o) })
+                ] }) : null,
+                w.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: y(pe, o) })
+                ] }) : null,
+                D ? /* @__PURE__ */ r("div", { className: "flex justify-between text-emerald-600", children: [
+                  /* @__PURE__ */ r("span", { children: [
+                    n("ecommerce.discount", "Discount"),
+                    " (",
+                    D.code,
+                    ")"
+                  ] }),
+                  /* @__PURE__ */ r("span", { children: [
+                    "-",
+                    y(D.discountTotal, o)
+                  ] })
+                ] }) : null,
+                (k.length > 0 || w.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: y(Qe, o) })
+                ] })
+              ] })
+            ] })
+          ] }),
+          k.length > 0 ? /* @__PURE__ */ r(
+            Be,
+            {
+              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: y(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: [
+                      "-",
+                      y(he, o)
+                    ] })
+                  ] }) : null,
+                  /* @__PURE__ */ r("div", { className: "flex justify-between", children: [
+                    /* @__PURE__ */ e("span", { children: s("ecommerce.shipping") }),
+                    /* @__PURE__ */ e("span", { children: le ? y(le.amount, o) : "-" })
+                  ] }),
+                  /* @__PURE__ */ r("div", { className: "flex justify-between", children: [
+                    /* @__PURE__ */ e("span", { children: n("ecommerce.tax", "Tax") }),
+                    /* @__PURE__ */ e("span", { children: Ue ? "..." : C?.isPendingExternalCalculation ? n(
+                      "ecommerce.tax_calculated_on_stripe",
+                      "Calculated on Stripe"
+                    ) : C ? y(C.amount, o) : "-" })
+                  ] }),
+                  C && C.lines.length > 0 ? /* @__PURE__ */ e("div", { className: "rounded-lg bg-muted/20 px-3 py-2 text-xs text-muted-foreground", children: C.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: y(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: y(Te, o) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ r(
+                  _e,
+                  {
+                    className: "w-full",
+                    size: "lg",
+                    onClick: () => Pe("stripe", k, "stripe"),
+                    disabled: Ye,
+                    children: [
+                      l === "stripe" ? /* @__PURE__ */ e(ye, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ e(ft, { className: "mr-2 h-4 w-4" }),
+                      l === "stripe" ? s("ecommerce.processing") : n(
+                        "ecommerce.checkout_physical_products",
+                        "Checkout Physical Products"
+                      )
+                    ]
+                  }
+                ),
+                ge && l === null ? /* @__PURE__ */ e("p", { className: "text-[11px] text-muted-foreground", children: ge }) : null,
+                h.stripe ? /* @__PURE__ */ e("div", { className: "rounded-lg border border-destructive/20 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: h.stripe }) : null,
+                /* @__PURE__ */ e("p", { className: "text-[11px] text-muted-foreground", children: C?.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,
+          w.length > 0 ? /* @__PURE__ */ r(
+            Be,
+            {
+              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: w.map((t) => {
+                  const i = Ne(t, {
+                    currencyCode: o,
+                    currencies: M
+                  }), u = Re(t), m = `freemius:${t.id}`, g = u ? x[m] || "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,
+                        u ? /* @__PURE__ */ r("p", { className: "text-xs font-medium text-emerald-700", children: [
+                          u.label,
+                          " - ",
+                          u.paymentRequirementLabel
+                        ] }) : null
+                      ] }),
+                      /* @__PURE__ */ e("span", { className: "font-medium", children: y(i.sale_price ?? i.price, o) })
+                    ] }),
+                    u && !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(
+                        ot,
+                        {
+                          value: x[m] || "paid",
+                          onValueChange: (p) => P((d) => ({ ...d, [m]: p })),
+                          className: "gap-3",
+                          children: [
+                            /* @__PURE__ */ r("div", { className: "flex items-start space-x-3", children: [
+                              /* @__PURE__ */ e(De, { value: "paid", id: `${m}-paid`, className: "mt-1" }),
+                              /* @__PURE__ */ r("div", { className: "grid gap-1.5", children: [
+                                /* @__PURE__ */ e(v, { htmlFor: `${m}-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: `${m}-free`, className: "mt-1" }),
+                              /* @__PURE__ */ e("div", { className: "grid gap-1.5", children: /* @__PURE__ */ e(v, { htmlFor: `${m}-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: w.length > 1 ? "outline" : "default",
+                        onClick: () => Pe(
+                          "freemius",
+                          [
+                            {
+                              ...t,
+                              ...g ? { trial_preference: g } : {}
+                            }
+                          ],
+                          m
+                        ),
+                        disabled: l !== null,
+                        children: [
+                          l === m ? /* @__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: l === m ? s("ecommerce.processing") : w.length > 1 ? n(
+                            "ecommerce.checkout_product",
+                            "Checkout {title}",
+                            { title: t.title }
+                          ) : n(
+                            "ecommerce.checkout_digital_product",
+                            "Checkout Digital Product"
+                          ) })
+                        ]
+                      }
+                    )
+                  ] }, m);
+                }) }),
+                /* @__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: y(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: [
+                    "-",
+                    y(fe, o)
+                  ] })
+                ] }) : null,
+                h.freemius ? /* @__PURE__ */ e("div", { className: "rounded-lg border border-destructive/20 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: h.freemius }) : null,
+                /* @__PURE__ */ e("p", { className: "text-[11px] text-muted-foreground", children: w.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 {
+  Wt as Checkout
+};