@levo-so/studio 0.1.64 → 0.1.66

package/dist/{index-Cf4jJOnE.js → index-BxyIkcWw.js}

@@ -1,69 +1,76 @@
 "use client";
-import { jsxs as a, Fragment as _, jsx as e } from "react/jsx-runtime";
-import { useLevo as J, cn as V, errorHandler as k } from "@levo-so/react";
-import D from "dayjs";
-import { Calendar as j, Clock as R, CheckCircle2 as I, CreditCard as X, ShieldCheck as Y, Loader2 as Z, XCircle as G, RefreshCw as W, Ticket as ee } from "lucide-react";
-import { useState as P, useRef as z } from "react";
-import { useRazorpay as te } from "react-razorpay";
-import { u as ae, a as ne, B as C, S as re } from "./index-D_r8laYN.js";
-const xe = ({ summary: t, onComplete: S, className: T }) => {
-  const { client: p } = J(), { workspace: x } = ae(), { Razorpay: $ } = te(), {
-    stripePromise: q,
+import { jsxs as a, Fragment as h, jsx as e } from "react/jsx-runtime";
+import { useLevo as ee, cn as te, errorHandler as C } from "@levo-so/react";
+import T from "dayjs";
+import { Calendar as S, Clock as U, Pencil as ae, CheckCircle2 as $, CreditCard as ne, ShieldCheck as q, Loader2 as re, XCircle as se, RefreshCw as le, Ticket as ie, Download as ce } from "lucide-react";
+import { useState as x, useRef as B } from "react";
+import { useRazorpay as oe } from "react-razorpay";
+import { u as de, a as me, B as D, S as ge } from "./index-C75foZeA.js";
+import { BillingStep as xe } from "./BillingStep-CUrykLb4.js";
+const we = ({
+  summary: n,
+  billingDetails: u,
+  onBillingEdit: y,
+  onComplete: A,
+  className: K
+}) => {
+  const b = ee(), { workspace: f } = de(), { Razorpay: E } = oe(), {
+    stripePromise: L,
     config: F,
-    isOpen: B,
-    openStripeCheckout: K,
-    closeStripeCheckout: h,
-    setOnComplete: U
-  } = ne(), [g, s] = P("summary"), [E, l] = P(null), [L, M] = P("razorpay"), u = z(!1), y = z(null), d = z(null), i = (n, r) => {
-    const f = r && r.trim() ? r : "INR", m = n / 100;
+    isOpen: I,
+    openStripeCheckout: M,
+    closeStripeCheckout: N,
+    setOnComplete: Q
+  } = me(), [p, l] = x("summary"), [H, i] = x(null), [J, v] = x(!1), [V, O] = x(null), [X, Z] = x("razorpay"), w = B(!1), _ = B(null), g = B(null), c = (t, r) => {
+    const d = r && r.trim() ? r : "INR", s = t / 100;
     return new Intl.NumberFormat("en-IN", {
       style: "currency",
-      currency: f,
+      currency: d,
       minimumFractionDigits: 0
-    }).format(m);
-  }, b = (n) => n ? D(n).format("D MMM YYYY") : null, N = (n) => n ? D(n).format("h:mm A") : null, v = (n) => n.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (r) => r.toUpperCase()), w = (n) => n == null ? "-" : typeof n == "boolean" ? n ? "Yes" : "No" : Array.isArray(n) ? n.join(", ") : typeof n == "object" ? JSON.stringify(n) : String(n), o = Object.entries(t.form_data || {}).filter(
-    ([n, r]) => r != null && r !== ""
-  ), A = () => {
-    if (!d.current) return;
-    const n = d.current;
-    p?.levoFetch?.url(`/v1/payment/booking/${t._id}/confirm`)?.options({ headers: { Origin: x?.id || "" } })?.post({ session_id: n })?.json().then((r) => {
-      r?.content?.data ? s("confirmed") : (l("Payment received but confirmation failed. Please contact support."), s("failed")), h(), d.current = null;
+    }).format(s);
+  }, j = (t) => t ? T(t).format("D MMM YYYY") : null, k = (t) => t ? T(t).format("h:mm A") : null, P = (t) => t.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (r) => r.toUpperCase()), z = (t) => t == null ? "-" : typeof t == "boolean" ? t ? "Yes" : "No" : Array.isArray(t) ? t.join(", ") : typeof t == "object" ? JSON.stringify(t) : String(t), m = Object.entries(n.form_data || {}).filter(
+    ([t, r]) => r != null && r !== ""
+  ), R = () => {
+    if (!g.current) return;
+    const t = g.current;
+    b?.fetch?.url(`/v1/payment/booking/${n._id}/confirm`)?.options({ headers: { Origin: f?.id || "" } })?.post({ session_id: t })?.json().then((r) => {
+      r?.content?.data ? (O(r.content.data), l("confirmed")) : (i("Payment received but confirmation failed. Please contact support."), l("failed")), N(), g.current = null;
     }).catch((r) => {
-      console.error("Failed to confirm booking after Stripe payment:", r), k(r), l("Payment received but confirmation failed. Please contact support."), h(), d.current = null, s("failed");
+      console.error("Failed to confirm booking after Stripe payment:", r), C(r), i("Payment received but confirmation failed. Please contact support."), N(), g.current = null, l("failed");
     });
-  }, O = async () => {
-    s("processing"), l(null);
+  }, Y = async () => {
+    l("processing"), i(null);
     try {
-      const n = await p?.levoFetch?.url(`/v1/payment/booking/${t._id}/pay`)?.options({ headers: { Origin: x?.id || "" } })?.post({}).json();
-      if (n?.status && n?.content?.meta?.key) {
-        const r = n.content.meta;
-        M(r.provider || "razorpay"), r.provider === "stripe" && r.client_secret ? (d.current = r.session_id || null, U(A), await K({
-          key: r.key,
-          client_secret: r.client_secret,
-          amount: r.amount,
-          currency: r.currency,
+      const t = u || n.billing_details, r = t ? { billing_details: t } : {}, d = await b?.fetch?.url(`/v1/payment/booking/${n._id}/pay`)?.options({ headers: { Origin: f?.id || "" } })?.post(r).json();
+      if (d?.status && d?.content?.meta?.key) {
+        const s = d.content.meta;
+        Z(s.provider || "razorpay"), s.provider === "stripe" && s.client_secret ? (g.current = s.session_id || null, Q(R), await M({
+          key: s.key,
+          client_secret: s.client_secret,
+          amount: s.amount,
+          currency: s.currency,
           provider: "stripe",
-          reference_id: r.reference_id
-        })) : Q(r);
+          reference_id: s.reference_id
+        })) : G(s);
       } else
-        l("Unable to initiate payment. Please try again."), s("failed");
-    } catch (n) {
-      console.error("Initiate payment error:", n), k(n), l("Unable to initiate payment. Please check your connection and try again."), s("failed");
+        i("Unable to initiate payment. Please try again."), l("failed");
+    } catch (t) {
+      console.error("Initiate payment error:", t), C(t), i("Unable to initiate payment. Please check your connection and try again."), l("failed");
     }
-  }, Q = (n) => {
-    u.current = !1, y.current = null;
+  }, G = (t) => {
+    w.current = !1, _.current = null;
     const r = {
-      key: n.key,
-      amount: n.amount,
-      currency: n.currency,
-      order_id: n.order_id,
-      name: x?.name ?? "",
-      description: t.instance_label || "Booking Payment",
-      handler: (m) => {
-        H({
-          order_id: m.razorpay_order_id,
-          payment_id: m.razorpay_payment_id,
-          signature: m.razorpay_signature
+      key: t.key,
+      amount: t.amount,
+      currency: t.currency,
+      order_id: t.order_id,
+      name: f?.name ?? "",
+      description: n.instance_label || "Booking Payment",
+      handler: (s) => {
+        W({
+          order_id: s.razorpay_order_id,
+          payment_id: s.razorpay_payment_id,
+          signature: s.razorpay_signature
         });
       },
       theme: {
@@ -72,37 +79,37 @@ const xe = ({ summary: t, onComplete: S, className: T }) => {
     };
     r.modal = {
       ondismiss: () => {
-        u.current ? (l(y.current || "Payment failed. Please try again."), s("failed")) : s("summary");
+        w.current ? (i(_.current || "Payment failed. Please try again."), l("failed")) : l("summary");
       }
     };
-    const f = new $(r);
-    f.on("payment.failed", () => {
-      u.current = !0, y.current = "Payment was declined. Please try a different payment method.";
-    }), f.open();
-  }, H = async (n) => {
+    const d = new E(r);
+    d.on("payment.failed", () => {
+      w.current = !0, _.current = "Payment was declined. Please try a different payment method.";
+    }), d.open();
+  }, W = async (t) => {
     try {
-      const r = await p?.levoFetch?.url(`/v1/payment/booking/${t._id}/confirm`)?.options({ headers: { Origin: x?.id || "" } })?.post(n).json();
-      r?.status && r?.content?.data ? s("confirmed") : (l("Payment received but confirmation failed. Please contact support."), s("failed"));
+      const r = await b?.fetch?.url(`/v1/payment/booking/${n._id}/confirm`)?.options({ headers: { Origin: f?.id || "" } })?.post(t).json();
+      r?.status && r?.content?.data ? (O(r.content.data), l("confirmed")) : (i("Payment received but confirmation failed. Please contact support."), l("failed"));
     } catch (r) {
-      console.error("Confirm payment error:", r), k(r), l("Payment received but confirmation failed. Please contact support."), s("failed");
+      console.error("Confirm payment error:", r), C(r), i("Payment received but confirmation failed. Please contact support."), l("failed");
     }
-  }, c = !t.unit_amount || t.unit_amount === 0;
-  return /* @__PURE__ */ a(_, { children: [
+  }, o = !n.unit_amount || n.unit_amount === 0;
+  return /* @__PURE__ */ a(h, { children: [
     /* @__PURE__ */ a(
       "div",
       {
-        className: V(
+        className: te(
           "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",
-          T
+          K
         ),
         children: [
-          g === "summary" && /* @__PURE__ */ a("div", { className: "flex flex-col", children: [
-            t.cover_image?.location && /* @__PURE__ */ a("div", { className: "relative h-44 w-full overflow-hidden bg-gray-100", children: [
+          p === "summary" && /* @__PURE__ */ a("div", { className: "flex flex-col", children: [
+            n.cover_image?.location && /* @__PURE__ */ a("div", { className: "relative h-44 w-full overflow-hidden bg-gray-100", children: [
               /* @__PURE__ */ e(
                 "img",
                 {
-                  src: t.cover_image.location,
-                  alt: t.instance_label,
+                  src: n.cover_image.location,
+                  alt: n.instance_label,
                   className: "h-full w-full object-cover"
                 }
               ),
@@ -111,160 +118,198 @@ const xe = ({ summary: t, onComplete: S, className: T }) => {
             /* @__PURE__ */ a("div", { className: "flex flex-col px-6 py-5 sm:px-8", children: [
               /* @__PURE__ */ a("div", { className: "mx-auto mb-5 w-full max-w-lg text-center", children: [
                 /* @__PURE__ */ e("p", { className: "mb-1 font-medium text-gray-500 text-xs uppercase tracking-wider", children: "Booking Summary" }),
-                /* @__PURE__ */ e("h3", { className: "font-semibold text-gray-900 text-xl leading-tight", children: t.instance_label || t.context_label || "Booking" })
+                /* @__PURE__ */ e("h3", { className: "font-semibold text-gray-900 text-xl leading-tight", children: n.instance_label || n.context_label || "Booking" })
               ] }),
-              (t.starts_at || t.ends_at) && /* @__PURE__ */ a("div", { className: "mx-auto mb-5 flex w-full max-w-lg flex-wrap justify-center gap-4 rounded-lg bg-orange-50 px-4 py-3", children: [
-                t.starts_at && /* @__PURE__ */ a("div", { className: "flex items-center gap-2 text-gray-700 text-sm", children: [
-                  /* @__PURE__ */ e(j, { className: "size-4 text-orange-500" }),
-                  /* @__PURE__ */ e("span", { children: b(t.starts_at) })
+              (n.starts_at || n.ends_at) && /* @__PURE__ */ a("div", { className: "mx-auto mb-5 flex w-full max-w-lg flex-wrap justify-center gap-4 rounded-lg bg-orange-50 px-4 py-3", children: [
+                n.starts_at && /* @__PURE__ */ a("div", { className: "flex items-center gap-2 text-gray-700 text-sm", children: [
+                  /* @__PURE__ */ e(S, { className: "size-4 text-orange-500" }),
+                  /* @__PURE__ */ e("span", { children: j(n.starts_at) })
                 ] }),
-                t.starts_at && /* @__PURE__ */ a("div", { className: "flex items-center gap-2 text-gray-700 text-sm", children: [
-                  /* @__PURE__ */ e(R, { className: "size-4 text-orange-500" }),
-                  /* @__PURE__ */ e("span", { children: N(t.starts_at) })
+                n.starts_at && /* @__PURE__ */ a("div", { className: "flex items-center gap-2 text-gray-700 text-sm", children: [
+                  /* @__PURE__ */ e(U, { className: "size-4 text-orange-500" }),
+                  /* @__PURE__ */ e("span", { children: k(n.starts_at) })
                 ] })
               ] }),
-              o.length > 0 && /* @__PURE__ */ a("div", { className: "mx-auto mb-5 w-full max-w-lg", children: [
+              m.length > 0 && /* @__PURE__ */ a("div", { className: "mx-auto mb-5 w-full max-w-lg", children: [
                 /* @__PURE__ */ e("h4", { className: "mb-3 text-center font-medium text-gray-500 text-xs uppercase tracking-wider", children: "Your Details" }),
-                /* @__PURE__ */ e("div", { className: "rounded-lg border border-gray-100 bg-gray-50/50 p-4", children: /* @__PURE__ */ e("div", { className: "space-y-2.5", children: o.map(([n, r]) => /* @__PURE__ */ a("div", { className: "flex items-start justify-between gap-3", children: [
-                  /* @__PURE__ */ e("span", { className: "text-gray-500 text-sm", children: v(n) }),
-                  /* @__PURE__ */ e("span", { className: "text-right font-medium text-gray-900 text-sm", children: w(r) })
-                ] }, n)) }) })
+                /* @__PURE__ */ e("div", { className: "rounded-lg border border-gray-100 bg-gray-50/50 p-4", children: /* @__PURE__ */ e("div", { className: "space-y-2.5", children: m.map(([t, r]) => /* @__PURE__ */ a("div", { className: "flex items-start justify-between gap-3", children: [
+                  /* @__PURE__ */ e("span", { className: "text-gray-500 text-sm", children: P(t) }),
+                  /* @__PURE__ */ e("span", { className: "text-right font-medium text-gray-900 text-sm", children: z(r) })
+                ] }, t)) }) })
               ] }),
+              (() => {
+                const t = u || n.billing_details;
+                return t ? /* @__PURE__ */ a("div", { className: "mx-auto mb-5 w-full max-w-lg", children: [
+                  /* @__PURE__ */ a("div", { className: "mb-3 flex items-center justify-center gap-2", children: [
+                    /* @__PURE__ */ e("h4", { className: "text-center font-medium text-gray-500 text-xs uppercase tracking-wider", children: "Billing Details" }),
+                    y && /* @__PURE__ */ e(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => v(!0),
+                        className: "text-orange-500 hover:text-orange-600",
+                        children: /* @__PURE__ */ e(ae, { className: "size-3.5" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "rounded-lg border border-gray-100 bg-gray-50/50 p-4", children: /* @__PURE__ */ a("div", { className: "space-y-2.5", children: [
+                    /* @__PURE__ */ a("div", { className: "flex items-start justify-between gap-3", children: [
+                      /* @__PURE__ */ e("span", { className: "text-gray-500 text-sm", children: "Name" }),
+                      /* @__PURE__ */ e("span", { className: "text-right font-medium text-gray-900 text-sm", children: t.name })
+                    ] }),
+                    t.tax_id && /* @__PURE__ */ a("div", { className: "flex items-start justify-between gap-3", children: [
+                      /* @__PURE__ */ e("span", { className: "text-gray-500 text-sm", children: "Tax ID" }),
+                      /* @__PURE__ */ e("span", { className: "text-right font-medium text-gray-900 text-sm", children: t.tax_id })
+                    ] }),
+                    /* @__PURE__ */ a("div", { className: "flex items-start justify-between gap-3", children: [
+                      /* @__PURE__ */ e("span", { className: "text-gray-500 text-sm", children: "Address" }),
+                      /* @__PURE__ */ e("span", { className: "text-right font-medium text-gray-900 text-sm", children: [
+                        t.address.line1,
+                        t.address.line2,
+                        t.address.city,
+                        t.address.state,
+                        t.address.postal_code,
+                        t.address.country
+                      ].filter(Boolean).join(", ") })
+                    ] })
+                  ] }) })
+                ] }) : null;
+              })(),
               /* @__PURE__ */ a("div", { className: "mx-auto mb-5 w-full max-w-lg", children: [
                 /* @__PURE__ */ e("h4", { className: "mb-3 text-center font-medium text-gray-500 text-xs uppercase tracking-wider", children: "Payment" }),
                 /* @__PURE__ */ a("div", { className: "rounded-lg border border-gray-200 bg-white p-4", children: [
                   /* @__PURE__ */ a("div", { className: "space-y-2", children: [
                     /* @__PURE__ */ a("div", { className: "flex items-center justify-between text-sm", children: [
                       /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Unit Price" }),
-                      /* @__PURE__ */ e("span", { className: "text-gray-900", children: i(t.unit_amount, t.currency) })
+                      /* @__PURE__ */ e("span", { className: "text-gray-900", children: c(n.unit_amount, n.currency) })
                     ] }),
-                    t.quantity > 1 && /* @__PURE__ */ a("div", { className: "flex items-center justify-between text-sm", children: [
+                    n.quantity > 1 && /* @__PURE__ */ a("div", { className: "flex items-center justify-between text-sm", children: [
                       /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Quantity" }),
                       /* @__PURE__ */ a("span", { className: "text-gray-900", children: [
                         "×",
-                        t.quantity
+                        n.quantity
                       ] })
                     ] }),
-                    typeof t.discount == "number" && t.discount > 0 && /* @__PURE__ */ a("div", { className: "flex items-center justify-between text-sm", children: [
+                    typeof n.discount == "number" && n.discount > 0 && /* @__PURE__ */ a("div", { className: "flex items-center justify-between text-sm", children: [
                       /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Discount" }),
                       /* @__PURE__ */ a("span", { className: "text-green-600", children: [
                         "-",
-                        i(t.discount, t.currency)
+                        c(n.discount, n.currency)
                       ] })
                     ] }),
-                    t.taxes && t.taxes.length > 0 && t.taxes.map((n) => /* @__PURE__ */ a("div", { className: "flex items-center justify-between text-sm", children: [
-                      /* @__PURE__ */ e("span", { className: "text-gray-600", children: n.label }),
-                      /* @__PURE__ */ e("span", { className: "text-gray-900", children: i(n.amount, t.currency) })
-                    ] }, n.id))
+                    n.taxes && n.taxes.length > 0 && n.taxes.map((t) => /* @__PURE__ */ a("div", { className: "flex items-center justify-between text-sm", children: [
+                      /* @__PURE__ */ e("span", { className: "text-gray-600", children: t.label }),
+                      /* @__PURE__ */ e("span", { className: "text-gray-900", children: c(t.amount, n.currency) })
+                    ] }, t.id))
                   ] }),
                   /* @__PURE__ */ a("div", { className: "mt-3 flex items-center justify-between border-gray-100 border-t pt-3", children: [
                     /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: "Total" }),
-                    /* @__PURE__ */ e("span", { className: "font-bold text-gray-900 text-xl", children: c ? "Free" : i(t.total_amount, t.currency) })
+                    /* @__PURE__ */ e("span", { className: "font-bold text-gray-900 text-xl", children: o ? "Free" : c(n.total_amount, n.currency) })
                   ] })
                 ] })
               ] }),
               /* @__PURE__ */ e(
-                C,
+                D,
                 {
                   elementKey: "booking-pay-btn",
-                  onClick: c ? () => s("confirmed") : O,
+                  onClick: o ? () => l("confirmed") : Y,
                   className: "mx-auto w-full max-w-lg rounded-lg px-4 py-3.5 font-semibold",
-                  children: /* @__PURE__ */ e("span", { className: "flex items-center justify-center gap-2", children: c ? /* @__PURE__ */ a(_, { children: [
-                    /* @__PURE__ */ e(I, { className: "size-5" }),
+                  children: /* @__PURE__ */ e("span", { className: "flex items-center justify-center gap-2", children: o ? /* @__PURE__ */ a(h, { children: [
+                    /* @__PURE__ */ e($, { className: "size-5" }),
                     /* @__PURE__ */ e("span", { children: "Confirm Booking" })
-                  ] }) : /* @__PURE__ */ a(_, { children: [
-                    /* @__PURE__ */ e(X, { className: "size-5" }),
+                  ] }) : /* @__PURE__ */ a(h, { children: [
+                    /* @__PURE__ */ e(ne, { className: "size-5" }),
                     /* @__PURE__ */ a("span", { children: [
                       "Pay ",
-                      i(t.total_amount, t.currency)
+                      c(n.total_amount, n.currency)
                     ] })
                   ] }) })
                 }
               ),
-              !c && /* @__PURE__ */ a("div", { className: "mx-auto mt-4 flex w-full max-w-lg items-center justify-center gap-1.5 text-gray-400 text-xs", children: [
-                /* @__PURE__ */ e(Y, { className: "size-3.5" }),
+              !o && /* @__PURE__ */ a("div", { className: "mx-auto mt-4 flex w-full max-w-lg items-center justify-center gap-1.5 text-gray-400 text-xs", children: [
+                /* @__PURE__ */ e(q, { className: "size-3.5" }),
                 /* @__PURE__ */ e("span", { children: "Secure payment" })
               ] })
             ] })
           ] }),
-          g === "processing" && /* @__PURE__ */ a("div", { className: "flex flex-col items-center justify-center px-6 py-16", children: [
+          p === "processing" && /* @__PURE__ */ a("div", { className: "flex flex-col items-center justify-center px-6 py-16", children: [
             /* @__PURE__ */ a("div", { className: "relative mb-6", children: [
               /* @__PURE__ */ e("div", { className: "absolute inset-0 animate-ping rounded-full bg-orange-200 opacity-75" }),
-              /* @__PURE__ */ e("div", { className: "relative flex size-16 items-center justify-center rounded-full bg-orange-100", children: /* @__PURE__ */ e(Z, { className: "size-8 animate-spin text-orange-500" }) })
+              /* @__PURE__ */ e("div", { className: "relative flex size-16 items-center justify-center rounded-full bg-orange-100", children: /* @__PURE__ */ e(re, { className: "size-8 animate-spin text-orange-500" }) })
             ] }),
             /* @__PURE__ */ e("h3", { className: "mb-1 font-semibold text-gray-900 text-lg", children: "Processing Payment" }),
             /* @__PURE__ */ e("p", { className: "text-center text-gray-500 text-sm", children: "Please wait while we confirm your payment..." }),
             /* @__PURE__ */ e("div", { className: "mt-6 rounded-lg bg-gray-50 px-6 py-3", children: /* @__PURE__ */ a("p", { className: "text-center text-gray-600 text-sm", children: [
               "Amount:",
               " ",
-              /* @__PURE__ */ e("span", { className: "font-semibold text-gray-900", children: i(t.total_amount, t.currency) })
+              /* @__PURE__ */ e("span", { className: "font-semibold text-gray-900", children: c(n.total_amount, n.currency) })
             ] }) })
           ] }),
-          g === "failed" && /* @__PURE__ */ a("div", { className: "flex flex-col", children: [
+          p === "failed" && /* @__PURE__ */ a("div", { className: "flex flex-col", children: [
             /* @__PURE__ */ e("div", { className: "bg-gradient-to-br from-red-50 to-orange-50 px-6 py-6", children: /* @__PURE__ */ a("div", { className: "flex flex-col items-center", children: [
-              /* @__PURE__ */ e("div", { className: "mb-3 flex size-14 items-center justify-center rounded-full bg-red-100", children: /* @__PURE__ */ e(G, { className: "size-8 text-red-500" }) }),
+              /* @__PURE__ */ e("div", { className: "mb-3 flex size-14 items-center justify-center rounded-full bg-red-100", children: /* @__PURE__ */ e(se, { className: "size-8 text-red-500" }) }),
               /* @__PURE__ */ e("h3", { className: "mb-1 font-semibold text-gray-900 text-lg", children: "Payment Failed" }),
-              /* @__PURE__ */ e("p", { className: "text-center text-gray-600 text-sm", children: E || "Something went wrong. Please try again." })
+              /* @__PURE__ */ e("p", { className: "text-center text-gray-600 text-sm", children: H || "Something went wrong. Please try again." })
             ] }) }),
             /* @__PURE__ */ a("div", { className: "flex flex-col px-6 py-5 sm:px-8", children: [
-              /* @__PURE__ */ e("div", { className: "mx-auto mb-4 w-full max-w-lg text-center", children: /* @__PURE__ */ e("h4", { className: "font-semibold text-base text-gray-900", children: t.instance_label || t.context_label || "Booking" }) }),
-              (t.starts_at || t.ends_at) && /* @__PURE__ */ a("div", { className: "mx-auto mb-4 flex w-full max-w-lg flex-wrap justify-center gap-4 rounded-lg bg-gray-50 px-4 py-2.5", children: [
-                t.starts_at && /* @__PURE__ */ a("div", { className: "flex items-center gap-2 text-gray-600 text-sm", children: [
-                  /* @__PURE__ */ e(j, { className: "size-4 text-gray-400" }),
-                  /* @__PURE__ */ e("span", { children: b(t.starts_at) })
+              /* @__PURE__ */ e("div", { className: "mx-auto mb-4 w-full max-w-lg text-center", children: /* @__PURE__ */ e("h4", { className: "font-semibold text-base text-gray-900", children: n.instance_label || n.context_label || "Booking" }) }),
+              (n.starts_at || n.ends_at) && /* @__PURE__ */ a("div", { className: "mx-auto mb-4 flex w-full max-w-lg flex-wrap justify-center gap-4 rounded-lg bg-gray-50 px-4 py-2.5", children: [
+                n.starts_at && /* @__PURE__ */ a("div", { className: "flex items-center gap-2 text-gray-600 text-sm", children: [
+                  /* @__PURE__ */ e(S, { className: "size-4 text-gray-400" }),
+                  /* @__PURE__ */ e("span", { children: j(n.starts_at) })
                 ] }),
-                t.starts_at && /* @__PURE__ */ a("div", { className: "flex items-center gap-2 text-gray-600 text-sm", children: [
-                  /* @__PURE__ */ e(R, { className: "size-4 text-gray-400" }),
-                  /* @__PURE__ */ e("span", { children: N(t.starts_at) })
+                n.starts_at && /* @__PURE__ */ a("div", { className: "flex items-center gap-2 text-gray-600 text-sm", children: [
+                  /* @__PURE__ */ e(U, { className: "size-4 text-gray-400" }),
+                  /* @__PURE__ */ e("span", { children: k(n.starts_at) })
                 ] })
               ] }),
-              o.length > 0 && /* @__PURE__ */ e("div", { className: "mx-auto mb-4 w-full max-w-lg rounded-lg border border-gray-100 bg-gray-50/50 p-3", children: /* @__PURE__ */ a("div", { className: "space-y-1.5", children: [
-                o.slice(0, 3).map(([n, r]) => /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-3 text-sm", children: [
-                  /* @__PURE__ */ e("span", { className: "text-gray-500", children: v(n) }),
-                  /* @__PURE__ */ e("span", { className: "max-w-[50%] truncate font-medium text-gray-900", children: w(r) })
-                ] }, n)),
-                o.length > 3 && /* @__PURE__ */ a("p", { className: "pt-1 text-center text-gray-400 text-xs", children: [
+              m.length > 0 && /* @__PURE__ */ e("div", { className: "mx-auto mb-4 w-full max-w-lg rounded-lg border border-gray-100 bg-gray-50/50 p-3", children: /* @__PURE__ */ a("div", { className: "space-y-1.5", children: [
+                m.slice(0, 3).map(([t, r]) => /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-3 text-sm", children: [
+                  /* @__PURE__ */ e("span", { className: "text-gray-500", children: P(t) }),
+                  /* @__PURE__ */ e("span", { className: "max-w-[50%] truncate font-medium text-gray-900", children: z(r) })
+                ] }, t)),
+                m.length > 3 && /* @__PURE__ */ a("p", { className: "pt-1 text-center text-gray-400 text-xs", children: [
                   "+",
-                  o.length - 3,
+                  m.length - 3,
                   " more"
                 ] })
               ] }) }),
               /* @__PURE__ */ e("div", { className: "mx-auto mb-5 w-full max-w-lg rounded-lg border border-gray-200 bg-white p-4", children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ e("span", { className: "font-medium text-gray-700", children: "Amount to Pay" }),
-                /* @__PURE__ */ e("span", { className: "font-bold text-gray-900 text-xl", children: i(t.total_amount, t.currency) })
+                /* @__PURE__ */ e("span", { className: "font-bold text-gray-900 text-xl", children: c(n.total_amount, n.currency) })
               ] }) }),
               /* @__PURE__ */ e(
-                C,
+                D,
                 {
                   elementKey: "booking-retry-btn",
                   onClick: () => {
-                    l(null), O();
+                    i(null), Y();
                   },
                   className: "mx-auto w-full max-w-lg rounded-lg px-4 py-3.5 font-semibold",
                   children: /* @__PURE__ */ a("span", { className: "flex items-center justify-center gap-2", children: [
-                    /* @__PURE__ */ e(W, { className: "size-5" }),
+                    /* @__PURE__ */ e(le, { className: "size-5" }),
                     /* @__PURE__ */ e("span", { children: "Try Again" })
                   ] })
                 }
               ),
               /* @__PURE__ */ a("div", { className: "mx-auto mt-4 flex w-full max-w-lg items-center justify-center gap-1.5 text-gray-400 text-xs", children: [
-                /* @__PURE__ */ e(Y, { className: "size-3.5" }),
+                /* @__PURE__ */ e(q, { className: "size-3.5" }),
                 /* @__PURE__ */ a("span", { children: [
                   "Secured by ",
-                  L === "stripe" ? "Stripe" : "Razorpay"
+                  X === "stripe" ? "Stripe" : "Razorpay"
                 ] })
               ] }),
               /* @__PURE__ */ e("p", { className: "mx-auto mt-3 w-full max-w-lg text-center text-gray-400 text-xs", children: "If the problem persists, please contact support" })
             ] })
           ] }),
-          g === "confirmed" && /* @__PURE__ */ a("div", { className: "flex flex-col", children: [
+          p === "confirmed" && /* @__PURE__ */ a("div", { className: "flex flex-col", children: [
             /* @__PURE__ */ e("div", { className: "bg-gradient-to-br from-green-50 to-emerald-50 px-6 py-8", children: /* @__PURE__ */ a("div", { className: "flex flex-col items-center", children: [
               /* @__PURE__ */ a("div", { className: "relative mb-4", children: [
                 /* @__PURE__ */ e("div", { className: "absolute -inset-2 animate-pulse rounded-full bg-green-200/50" }),
-                /* @__PURE__ */ e("div", { className: "relative flex size-16 items-center justify-center rounded-full bg-green-100 ring-4 ring-green-50", children: /* @__PURE__ */ e(I, { className: "size-9 text-green-600" }) })
+                /* @__PURE__ */ e("div", { className: "relative flex size-16 items-center justify-center rounded-full bg-green-100 ring-4 ring-green-50", children: /* @__PURE__ */ e($, { className: "size-9 text-green-600" }) })
               ] }),
-              /* @__PURE__ */ e("h3", { className: "mb-1 font-bold text-gray-900 text-xl", children: c ? "Booking Confirmed!" : "Payment Successful!" }),
-              /* @__PURE__ */ e("p", { className: "text-center text-gray-600 text-sm", children: c ? "Your booking has been confirmed" : "Your payment has been processed successfully" })
+              /* @__PURE__ */ e("h3", { className: "mb-1 font-bold text-gray-900 text-xl", children: o ? "Booking Confirmed!" : "Payment Successful!" }),
+              /* @__PURE__ */ e("p", { className: "text-center text-gray-600 text-sm", children: o ? "Your booking has been confirmed" : "Your payment has been processed successfully" })
             ] }) }),
             /* @__PURE__ */ a("div", { className: "px-6 py-5 sm:px-8", children: [
               /* @__PURE__ */ a("div", { className: "relative mx-auto max-w-lg overflow-hidden rounded-xl border border-gray-200 bg-white", children: [
@@ -272,51 +317,70 @@ const xe = ({ summary: t, onComplete: S, className: T }) => {
                 /* @__PURE__ */ e("div", { className: "absolute top-1/2 -right-3 size-6 -translate-y-1/2 rounded-full bg-gray-100" }),
                 /* @__PURE__ */ a("div", { className: "px-5 py-4", children: [
                   /* @__PURE__ */ a("div", { className: "mb-4 flex items-start gap-3", children: [
-                    /* @__PURE__ */ e("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-orange-100", children: /* @__PURE__ */ e(ee, { className: "size-5 text-orange-600" }) }),
-                    /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ e("p", { className: "font-semibold text-gray-900 leading-tight", children: t.instance_label || t.context_label || "Booking" }) })
+                    /* @__PURE__ */ e("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-orange-100", children: /* @__PURE__ */ e(ie, { className: "size-5 text-orange-600" }) }),
+                    /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ e("p", { className: "font-semibold text-gray-900 leading-tight", children: n.instance_label || n.context_label || "Booking" }) })
                   ] }),
-                  t.qr_image?.location && /* @__PURE__ */ e("div", { className: "mb-4 flex flex-col items-center", children: /* @__PURE__ */ e("div", { className: "rounded-lg border border-gray-200 bg-white p-2", children: /* @__PURE__ */ e(
+                  n.qr_image?.location && /* @__PURE__ */ e("div", { className: "mb-4 flex flex-col items-center", children: /* @__PURE__ */ e("div", { className: "rounded-lg border border-gray-200 bg-white p-2", children: /* @__PURE__ */ e(
                     "img",
                     {
-                      src: t.qr_image.location,
+                      src: n.qr_image.location,
                       alt: "Booking QR Code",
                       className: "size-24"
                     }
                   ) }) }),
                   /* @__PURE__ */ a("div", { className: "mb-4 flex items-center justify-between rounded-lg bg-gray-50 px-3 py-2.5", children: [
                     /* @__PURE__ */ e("span", { className: "font-medium text-gray-500 text-xs uppercase tracking-wide", children: "Booking ID" }),
-                    /* @__PURE__ */ e("span", { className: "font-mono font-semibold text-gray-900 text-sm", children: t._id })
+                    /* @__PURE__ */ e("span", { className: "font-mono font-semibold text-gray-900 text-sm", children: n._id })
                   ] }),
                   /* @__PURE__ */ e("div", { className: "my-4 border-gray-200 border-t border-dashed" }),
                   /* @__PURE__ */ a("div", { className: "space-y-2.5", children: [
-                    t.starts_at && /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+                    n.starts_at && /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
                       /* @__PURE__ */ a("div", { className: "flex items-center gap-2 text-gray-500 text-sm", children: [
-                        /* @__PURE__ */ e(j, { className: "size-4" }),
+                        /* @__PURE__ */ e(S, { className: "size-4" }),
                         /* @__PURE__ */ e("span", { children: "Date & Time" })
                       ] }),
                       /* @__PURE__ */ a("p", { className: "font-medium text-gray-900 text-sm", children: [
-                        b(t.starts_at),
+                        j(n.starts_at),
                         ", ",
-                        N(t.starts_at)
+                        k(n.starts_at)
                       ] })
                     ] }),
-                    o.slice(0, 3).map(([n, r]) => /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
-                      /* @__PURE__ */ e("span", { className: "text-gray-500 text-sm", children: v(n) }),
-                      /* @__PURE__ */ e("span", { className: "max-w-[50%] truncate font-medium text-gray-900 text-sm", children: w(r) })
-                    ] }, n))
+                    m.slice(0, 3).map(([t, r]) => /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+                      /* @__PURE__ */ e("span", { className: "text-gray-500 text-sm", children: P(t) }),
+                      /* @__PURE__ */ e("span", { className: "max-w-[50%] truncate font-medium text-gray-900 text-sm", children: z(r) })
+                    ] }, t))
                   ] }),
                   /* @__PURE__ */ e("div", { className: "my-4 border-gray-200 border-t border-dashed" }),
                   /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
-                    /* @__PURE__ */ e("span", { className: "font-medium text-gray-700", children: c ? "Total" : "Amount Paid" }),
-                    /* @__PURE__ */ e("span", { className: "font-bold text-gray-900 text-lg", children: c ? "Free" : i(t.total_amount, t.currency) })
-                  ] })
+                    /* @__PURE__ */ e("span", { className: "font-medium text-gray-700", children: o ? "Total" : "Amount Paid" }),
+                    /* @__PURE__ */ e("span", { className: "font-bold text-gray-900 text-lg", children: o ? "Free" : c(n.total_amount, n.currency) })
+                  ] }),
+                  (() => {
+                    const t = V?.invoice?.location || n.invoice?.location;
+                    return t ? /* @__PURE__ */ a(h, { children: [
+                      /* @__PURE__ */ e("div", { className: "my-4 border-gray-200 border-t border-dashed" }),
+                      /* @__PURE__ */ a(
+                        "a",
+                        {
+                          href: t,
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          className: "flex w-full items-center justify-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 font-medium text-gray-700 text-sm transition-colors hover:bg-gray-100",
+                          children: [
+                            /* @__PURE__ */ e(ce, { className: "size-4" }),
+                            "Download Invoice"
+                          ]
+                        }
+                      )
+                    ] }) : null;
+                  })()
                 ] })
               ] }),
-              S && /* @__PURE__ */ e("div", { className: "mx-auto mt-5 max-w-lg", children: /* @__PURE__ */ e(
-                C,
+              A && /* @__PURE__ */ e("div", { className: "mx-auto mt-5 max-w-lg", children: /* @__PURE__ */ e(
+                D,
                 {
                   elementKey: "booking-done-btn",
-                  onClick: S,
+                  onClick: A,
                   className: "flex w-full items-center justify-center gap-2 rounded-lg bg-gray-900 px-4 py-3.5 font-semibold text-white transition-colors hover:bg-gray-800",
                   children: "Done"
                 }
@@ -327,20 +391,32 @@ const xe = ({ summary: t, onComplete: S, className: T }) => {
         ]
       }
     ),
-    B && F && /* @__PURE__ */ e(
-      re,
+    J && y && /* @__PURE__ */ e("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: /* @__PURE__ */ e("div", { className: "max-h-[90vh] w-full max-w-lg overflow-auto rounded-xl bg-white shadow-xl", children: /* @__PURE__ */ e(
+      xe,
+      {
+        isEdit: !0,
+        prefillData: u || n.billing_details,
+        onSubmit: (t) => {
+          y(t), v(!1);
+        },
+        onClose: () => v(!1)
+      }
+    ) }) }),
+    I && F && /* @__PURE__ */ e(
+      ge,
       {
-        isOpen: B,
+        isOpen: I,
         onClose: () => {
-          h(), s("summary");
+          N(), l("summary");
         },
-        stripePromise: q,
+        stripePromise: L,
         clientSecret: F.clientSecret,
-        onComplete: A
+        onComplete: R
       }
     )
   ] });
 };
 export {
-  xe as BookingCard
+  xe as BillingStep,
+  we as BookingCard
 };