@levo-so/studio 0.1.82 → 0.1.83

package/dist/bookingCard-BSYtboqu.js

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

package/dist/card-oIl95-_C.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+var n = {
+	container: "_container_t4trl_1",
+	card: "_card_t4trl_16",
+	cardSm: "_cardSm_t4trl_27",
+	cardMd: "_cardMd_t4trl_31",
+	cardLg: "_cardLg_t4trl_35",
+	logoContainer: "_logoContainer_t4trl_39",
+	logo: "_logo_t4trl_39",
+	content: "_content_t4trl_53"
+}, r = ({ logo: r, siteName: i, children: a, maxWidth: o = "md", className: s = "" }) => {
+	let c = {
+		sm: n.cardSm,
+		md: n.cardMd,
+		lg: n.cardLg
+	}[o];
+	return /* @__PURE__ */ e("div", {
+		className: n.container,
+		children: /* @__PURE__ */ t("div", {
+			className: `${n.card} ${c} ${s}`,
+			children: [r && /* @__PURE__ */ e("div", {
+				className: n.logoContainer,
+				children: /* @__PURE__ */ e("img", {
+					className: n.logo,
+					src: r,
+					alt: i || "Site logo"
+				})
+			}), /* @__PURE__ */ e("div", {
+				className: n.content,
+				children: a
+			})]
+		})
+	});
+};
+//#endregion
+export { r as t };