@burdenoff/microfe-coolandlovely 2026.614.1

package/dist/coolandlovely/pages/customer/CartDiscoveryPage.js

@@ -0,0 +1,547 @@
+import { useCoolAndLovely as e } from "../../context/CoolAndLovelyContext.js";
+import { cn as t } from "../../utils/cn.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import { EmptyState as r } from "../../components/EmptyState.js";
+import { useInvestmentOpportunities as i, useProviders as a } from "../../hooks/useCoolAndLovelyApi.js";
+import { formatCurrency as o, formatDistance as s } from "../../utils/formatters.js";
+import { useMemo as c, useState as l } from "react";
+import { AlertCircle as u, Calendar as d, CheckCircle2 as f, Clock as p, Home as m, Info as h, Loader2 as g, MapPin as _, Search as v, Star as y, Tag as b, TrendingUp as x, X as S } from "lucide-react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+//#region src/coolandlovely/pages/customer/CartDiscoveryPage.tsx
+var E = "All";
+function D() {
+	let { navigateTo: D } = e(), [O, k] = l(""), [A, j] = l(E), [M, N] = l(""), [P, F] = l(""), [I, L] = l("rating"), [R, z] = l(9), [B, V] = l(!1), [H, U] = l(null), { data: W = [], isLoading: G, isError: K } = a(), { data: q = [] } = i(), J = c(() => {
+		let e = /* @__PURE__ */ new Set();
+		return W.forEach((t) => {
+			t.category && e.add(t.category);
+		}), [E, ...Array.from(e)];
+	}, [W]), Y = c(() => {
+		let e = [...W];
+		if (O.trim()) {
+			let t = O.toLowerCase();
+			e = e.filter((e) => e.name.toLowerCase().includes(t) || e.category.toLowerCase().includes(t));
+		}
+		if (A !== E && (e = e.filter((e) => e.category === A)), M) {
+			let t = parseFloat(M);
+			e = e.filter((e) => e.rating >= t);
+		}
+		switch (P && (e = e.filter((e) => {
+			let t = e.averageOrderValue ?? 0;
+			switch (P) {
+				case "low": return t <= 300;
+				case "medium": return t > 300 && t <= 800;
+				case "high": return t > 800;
+				default: return !0;
+			}
+		})), I) {
+			case "rating":
+				e.sort((e, t) => t.rating - e.rating);
+				break;
+			case "popularity":
+				e.sort((e, t) => (t.totalRatings || 0) - (e.totalRatings || 0));
+				break;
+			case "distance":
+				e.sort((e, t) => (e.distance || 0) - (t.distance || 0));
+				break;
+			case "newest":
+				e.sort((e, t) => new Date(t.createdAt || 0).getTime() - new Date(e.createdAt || 0).getTime());
+				break;
+		}
+		return e;
+	}, [
+		W,
+		O,
+		A,
+		M,
+		P,
+		I
+	]), X = Y.slice(0, R), Z = R < Y.length, Q = A !== E || M !== "" || P !== "" || O.trim() !== "", $ = () => {
+		k(""), j(E), N(""), F(""), L("rating"), z(9);
+	};
+	return G ? /* @__PURE__ */ w(n, {
+		title: "Discover Carts",
+		description: "Finding services and shops near you...",
+		children: /* @__PURE__ */ w("div", {
+			className: "flex h-[60vh] items-center justify-center",
+			children: /* @__PURE__ */ w(g, { className: "h-8 w-8 animate-spin text-primary" })
+		})
+	}) : K ? /* @__PURE__ */ w(n, {
+		title: "Discover Carts",
+		description: "Error loading carts",
+		children: /* @__PURE__ */ T("div", {
+			className: "flex h-[60vh] flex-col items-center justify-center gap-4",
+			children: [
+				/* @__PURE__ */ w(u, { className: "h-12 w-12 text-destructive" }),
+				/* @__PURE__ */ w("h2", {
+					className: "text-xl font-semibold",
+					children: "Error loading service providers"
+				}),
+				/* @__PURE__ */ w("button", {
+					type: "button",
+					onClick: () => window.location.reload(),
+					className: "rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground",
+					children: "Retry"
+				})
+			]
+		})
+	}) : /* @__PURE__ */ T(n, {
+		title: "Discover Carts",
+		description: "Find services and shops near you",
+		actions: /* @__PURE__ */ T("span", {
+			className: "text-sm text-muted-foreground",
+			children: [Y.length, " carts found"]
+		}),
+		children: [
+			/* @__PURE__ */ T("div", {
+				className: "relative",
+				children: [
+					/* @__PURE__ */ w(v, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+					/* @__PURE__ */ w("input", {
+						type: "text",
+						placeholder: "Search carts, services, or items...",
+						value: O,
+						onChange: (e) => k(e.target.value),
+						className: t("w-full rounded-lg border border-border bg-card py-2.5 pl-10 pr-10 text-sm text-foreground", "placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring")
+					}),
+					O && /* @__PURE__ */ w("button", {
+						type: "button",
+						onClick: () => k(""),
+						className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+						children: /* @__PURE__ */ w(S, { className: "h-4 w-4" })
+					})
+				]
+			}),
+			/* @__PURE__ */ w("div", {
+				className: "mt-4 flex flex-wrap gap-2",
+				children: J.map((e) => /* @__PURE__ */ w("button", {
+					type: "button",
+					onClick: () => j(e),
+					className: t("rounded-full px-3 py-1.5 text-xs font-medium transition-colors", A === e ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"),
+					children: e
+				}, e))
+			}),
+			/* @__PURE__ */ T("div", {
+				className: "mt-4 flex flex-wrap items-center gap-3",
+				children: [
+					/* @__PURE__ */ T("select", {
+						value: M,
+						onChange: (e) => N(e.target.value),
+						className: "rounded-lg border border-border bg-card px-3 py-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+						children: [
+							/* @__PURE__ */ w("option", {
+								value: "",
+								children: "Any Rating"
+							}),
+							/* @__PURE__ */ w("option", {
+								value: "4.5",
+								children: "4.5+ Stars"
+							}),
+							/* @__PURE__ */ w("option", {
+								value: "4.0",
+								children: "4.0+ Stars"
+							}),
+							/* @__PURE__ */ w("option", {
+								value: "3.5",
+								children: "3.5+ Stars"
+							})
+						]
+					}),
+					/* @__PURE__ */ T("select", {
+						value: P,
+						onChange: (e) => F(e.target.value),
+						className: "rounded-lg border border-border bg-card px-3 py-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+						children: [
+							/* @__PURE__ */ w("option", {
+								value: "",
+								children: "Any Price"
+							}),
+							/* @__PURE__ */ w("option", {
+								value: "low",
+								children: "Under ₹300"
+							}),
+							/* @__PURE__ */ w("option", {
+								value: "medium",
+								children: "₹300 - ₹800"
+							}),
+							/* @__PURE__ */ w("option", {
+								value: "high",
+								children: "₹800+"
+							})
+						]
+					}),
+					/* @__PURE__ */ T("select", {
+						value: I,
+						onChange: (e) => L(e.target.value),
+						className: "rounded-lg border border-border bg-card px-3 py-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+						children: [
+							/* @__PURE__ */ w("option", {
+								value: "rating",
+								children: "Highest Rated"
+							}),
+							/* @__PURE__ */ w("option", {
+								value: "popularity",
+								children: "Most Popular"
+							}),
+							/* @__PURE__ */ w("option", {
+								value: "distance",
+								children: "Nearest"
+							}),
+							/* @__PURE__ */ w("option", {
+								value: "newest",
+								children: "Newest"
+							})
+						]
+					}),
+					Q && /* @__PURE__ */ w("button", {
+						type: "button",
+						onClick: $,
+						className: "rounded-lg border border-border px-3 py-2 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors",
+						children: "Clear All Filters"
+					})
+				]
+			}),
+			X.length > 0 ? /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w("div", {
+				className: "mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+				children: X.map((e) => {
+					let n = q.find((t) => t.cartId === e.id);
+					return /* @__PURE__ */ T("div", {
+						className: "rounded-lg border border-border bg-card shadow-sm overflow-hidden hover:shadow-md transition-shadow flex flex-col",
+						children: [/* @__PURE__ */ T("div", {
+							className: "relative h-40 bg-muted",
+							children: [
+								/* @__PURE__ */ w("img", {
+									src: e.image,
+									alt: e.name,
+									className: "h-full w-full object-cover"
+								}),
+								/* @__PURE__ */ T("div", {
+									className: "absolute top-2 left-2 flex gap-1.5",
+									children: [/* @__PURE__ */ w("span", {
+										className: t("inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium backdrop-blur-sm", e.isOpen ? "bg-green-500/20 text-green-600 dark:text-green-400" : "bg-red-500/20 text-red-600 dark:text-red-400"),
+										children: e.isOpen ? "Open" : "Closed"
+									}), e.isVerified && /* @__PURE__ */ T("span", {
+										className: "inline-flex items-center gap-0.5 rounded-full bg-blue-500/20 px-2 py-0.5 text-xs font-medium text-blue-600 dark:text-blue-400 backdrop-blur-sm",
+										children: [/* @__PURE__ */ w(f, { className: "h-3 w-3" }), "Verified"]
+									})]
+								}),
+								/* @__PURE__ */ w("div", {
+									className: "absolute top-2 right-2",
+									children: /* @__PURE__ */ T("span", {
+										className: "rounded-full bg-black/50 px-2 py-0.5 text-xs text-white backdrop-blur-sm",
+										children: [e.estimatedTime, " min"]
+									})
+								})
+							]
+						}), /* @__PURE__ */ T("div", {
+							className: "flex flex-col flex-1 p-4",
+							children: [
+								/* @__PURE__ */ T("div", {
+									className: "flex items-start justify-between gap-2 mb-1",
+									children: [/* @__PURE__ */ w("h3", {
+										className: "text-sm font-semibold text-foreground truncate flex-1",
+										children: e.name
+									}), /* @__PURE__ */ T("div", {
+										className: "flex items-center gap-1 shrink-0",
+										children: [
+											/* @__PURE__ */ w(y, { className: "h-3.5 w-3.5 fill-yellow-400 text-yellow-400" }),
+											/* @__PURE__ */ w("span", {
+												className: "text-xs font-medium text-foreground",
+												children: e.rating
+											}),
+											/* @__PURE__ */ T("span", {
+												className: "text-xs text-muted-foreground",
+												children: [
+													"(",
+													e.totalRatings,
+													")"
+												]
+											})
+										]
+									})]
+								}),
+								/* @__PURE__ */ w("p", {
+									className: "text-xs text-muted-foreground mb-2",
+									children: e.category
+								}),
+								/* @__PURE__ */ w("div", {
+									className: "flex items-center gap-3 text-xs text-muted-foreground mb-2",
+									children: /* @__PURE__ */ T("span", {
+										className: "flex items-center gap-1",
+										children: [/* @__PURE__ */ w(_, { className: "h-3 w-3" }), e.location?.address?.split(",")[0] || "Unknown"]
+									})
+								}),
+								/* @__PURE__ */ T("div", {
+									className: "flex items-center gap-3 text-xs text-muted-foreground mb-3",
+									children: [e.averageOrderValue && /* @__PURE__ */ T("span", { children: ["Avg ", o(e.averageOrderValue, { minimumFractionDigits: 0 })] }), /* @__PURE__ */ T("span", {
+										className: "flex items-center gap-1",
+										children: [/* @__PURE__ */ w(_, { className: "h-3 w-3" }), s(e.distance)]
+									})]
+								}),
+								e.serviceTypes?.includes("appointment") && /* @__PURE__ */ w("div", {
+									className: "mb-3 rounded-md bg-blue-500/10 border border-blue-500/20 p-2",
+									children: /* @__PURE__ */ T("div", {
+										className: "flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400",
+										children: [/* @__PURE__ */ w(d, { className: "h-3 w-3" }), /* @__PURE__ */ w("span", {
+											className: "font-medium",
+											children: "Appointment available"
+										})]
+									})
+								}),
+								e.serviceTypes?.includes("direct_service") && /* @__PURE__ */ w("div", {
+									className: "mb-3 rounded-md bg-purple-500/10 border border-purple-500/20 p-2",
+									children: /* @__PURE__ */ T("div", {
+										className: "flex items-center gap-1 text-xs text-purple-600 dark:text-purple-400",
+										children: [/* @__PURE__ */ w(m, { className: "h-3 w-3" }), /* @__PURE__ */ w("span", {
+											className: "font-medium",
+											children: "Direct Service Available"
+										})]
+									})
+								}),
+								e.serviceTypes && e.serviceTypes.length > 0 && /* @__PURE__ */ w("div", {
+									className: "flex flex-wrap gap-1 mb-3",
+									children: e.serviceTypes.slice(0, 3).map((e) => /* @__PURE__ */ w("span", {
+										className: "rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground",
+										children: e.replace(/_/g, " ")
+									}, e))
+								}),
+								/* @__PURE__ */ T("div", {
+									className: "mt-auto flex gap-2",
+									children: [
+										/* @__PURE__ */ w("button", {
+											type: "button",
+											onClick: () => D(`/customer/cart/${e.id}`),
+											disabled: !e.isOpen,
+											className: t("flex-1 rounded-lg py-2 text-xs font-medium transition-opacity", e.isOpen ? "bg-foreground text-background hover:opacity-90" : "bg-muted text-muted-foreground cursor-not-allowed"),
+											children: e.isOpen ? "View Services" : "Closed"
+										}),
+										e.serviceTypes?.includes("direct_service") && /* @__PURE__ */ w("button", {
+											type: "button",
+											onClick: () => D(`/customer/cart/${e.id}`),
+											className: "rounded-lg border border-border px-2 py-2 text-xs text-foreground hover:bg-accent transition-colors",
+											title: "Book Direct Service",
+											children: /* @__PURE__ */ w(m, { className: "h-3.5 w-3.5" })
+										}),
+										n && /* @__PURE__ */ w("button", {
+											type: "button",
+											onClick: () => alert("Investment opportunity available! View in Investor section."),
+											className: "rounded-lg border border-green-500/30 bg-green-500/10 px-2 py-2 text-xs text-green-600 dark:text-green-400 hover:bg-green-500/20 transition-colors",
+											title: "Investment Opportunity",
+											children: /* @__PURE__ */ w(x, { className: "h-3.5 w-3.5" })
+										}),
+										/* @__PURE__ */ w("button", {
+											type: "button",
+											onClick: () => {
+												U(e), V(!0);
+											},
+											className: "rounded-lg border border-border px-2 py-2 text-xs text-foreground hover:bg-accent transition-colors",
+											title: "Cart Info",
+											children: /* @__PURE__ */ w(h, { className: "h-3.5 w-3.5" })
+										})
+									]
+								})
+							]
+						})]
+					}, e.id);
+				})
+			}), Z && /* @__PURE__ */ w("div", {
+				className: "mt-8 text-center",
+				children: /* @__PURE__ */ w("button", {
+					type: "button",
+					onClick: () => z((e) => e + 9),
+					className: "rounded-lg border border-border px-6 py-2.5 text-sm font-medium text-foreground hover:bg-accent transition-colors",
+					children: "Load More Carts"
+				})
+			})] }) : /* @__PURE__ */ w("div", {
+				className: "mt-6",
+				children: /* @__PURE__ */ w(r, {
+					icon: /* @__PURE__ */ w(v, { className: "h-12 w-12" }),
+					title: "No carts found",
+					description: O ? `No results for "${O}". Try a different search term.` : "No carts available with these filters.",
+					action: /* @__PURE__ */ w("button", {
+						type: "button",
+						onClick: $,
+						className: "rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity",
+						children: "Clear Filters"
+					})
+				})
+			}),
+			B && H && /* @__PURE__ */ w("div", {
+				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+				children: /* @__PURE__ */ w("div", {
+					className: "w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-lg border border-border bg-card",
+					children: /* @__PURE__ */ T("div", {
+						className: "p-5",
+						children: [
+							/* @__PURE__ */ T("div", {
+								className: "flex items-center justify-between mb-4",
+								children: [/* @__PURE__ */ w("h3", {
+									className: "text-lg font-semibold text-foreground",
+									children: "Cart Information"
+								}), /* @__PURE__ */ w("button", {
+									type: "button",
+									onClick: () => V(!1),
+									className: "rounded-md p-1 text-muted-foreground hover:text-foreground transition-colors",
+									children: /* @__PURE__ */ w(S, { className: "h-5 w-5" })
+								})]
+							}),
+							/* @__PURE__ */ w("div", {
+								className: "h-48 rounded-lg overflow-hidden mb-4",
+								children: /* @__PURE__ */ w("img", {
+									src: H.image,
+									alt: H.name,
+									className: "h-full w-full object-cover"
+								})
+							}),
+							/* @__PURE__ */ w("h4", {
+								className: "text-xl font-semibold text-foreground mb-1",
+								children: H.name
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "flex flex-wrap items-center gap-3 mb-4",
+								children: [/* @__PURE__ */ T("div", {
+									className: "flex items-center gap-1",
+									children: [
+										/* @__PURE__ */ w(y, { className: "h-3.5 w-3.5 fill-yellow-400 text-yellow-400" }),
+										/* @__PURE__ */ w("span", {
+											className: "text-sm font-medium",
+											children: H.rating
+										}),
+										/* @__PURE__ */ T("span", {
+											className: "text-xs text-muted-foreground",
+											children: [
+												"(",
+												H.totalRatings,
+												" reviews)"
+											]
+										})
+									]
+								}), /* @__PURE__ */ w("span", {
+									className: t("inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium", H.isOpen ? "bg-green-500/20 text-green-600 dark:text-green-400" : "bg-red-500/20 text-red-600 dark:text-red-400"),
+									children: H.isOpen ? "Open" : "Closed"
+								})]
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "grid grid-cols-1 gap-3 sm:grid-cols-2 mb-4",
+								children: [
+									/* @__PURE__ */ T("div", {
+										className: "rounded-md bg-muted p-3",
+										children: [/* @__PURE__ */ T("p", {
+											className: "text-xs font-medium text-muted-foreground flex items-center gap-1",
+											children: [/* @__PURE__ */ w(_, { className: "h-3 w-3" }), " Location"]
+										}), /* @__PURE__ */ w("p", {
+											className: "mt-1 text-sm text-foreground",
+											children: H.location.address
+										})]
+									}),
+									/* @__PURE__ */ T("div", {
+										className: "rounded-md bg-muted p-3",
+										children: [/* @__PURE__ */ T("p", {
+											className: "text-xs font-medium text-muted-foreground flex items-center gap-1",
+											children: [/* @__PURE__ */ w(b, { className: "h-3 w-3" }), " Category"]
+										}), /* @__PURE__ */ w("p", {
+											className: "mt-1 text-sm text-foreground",
+											children: H.category
+										})]
+									}),
+									H.averageOrderValue && /* @__PURE__ */ T("div", {
+										className: "rounded-md bg-muted p-3",
+										children: [/* @__PURE__ */ w("p", {
+											className: "text-xs font-medium text-muted-foreground",
+											children: "Average Order"
+										}), /* @__PURE__ */ w("p", {
+											className: "mt-1 text-sm text-foreground",
+											children: o(H.averageOrderValue, { minimumFractionDigits: 0 })
+										})]
+									}),
+									/* @__PURE__ */ T("div", {
+										className: "rounded-md bg-muted p-3",
+										children: [/* @__PURE__ */ T("p", {
+											className: "text-xs font-medium text-muted-foreground flex items-center gap-1",
+											children: [/* @__PURE__ */ w(p, { className: "h-3 w-3" }), " Estimated Time"]
+										}), /* @__PURE__ */ T("p", {
+											className: "mt-1 text-sm text-foreground",
+											children: [H.estimatedTime, " minutes"]
+										})]
+									}),
+									/* @__PURE__ */ T("div", {
+										className: "rounded-md bg-muted p-3",
+										children: [/* @__PURE__ */ w("p", {
+											className: "text-xs font-medium text-muted-foreground",
+											children: "Distance"
+										}), /* @__PURE__ */ w("p", {
+											className: "mt-1 text-sm text-foreground",
+											children: s(H.distance)
+										})]
+									}),
+									H.isVerified && /* @__PURE__ */ T("div", {
+										className: "rounded-md bg-muted p-3",
+										children: [/* @__PURE__ */ T("p", {
+											className: "text-xs font-medium text-muted-foreground flex items-center gap-1",
+											children: [/* @__PURE__ */ w(f, { className: "h-3 w-3" }), " Verification"]
+										}), /* @__PURE__ */ w("p", {
+											className: "mt-1 text-sm text-foreground",
+											children: "Verified cart"
+										})]
+									})
+								]
+							}),
+							H.serviceTypes && H.serviceTypes.length > 0 && /* @__PURE__ */ T("div", {
+								className: "mb-4",
+								children: [/* @__PURE__ */ w("p", {
+									className: "text-xs font-medium text-muted-foreground mb-2",
+									children: "Service Types"
+								}), /* @__PURE__ */ w("div", {
+									className: "flex flex-wrap gap-2",
+									children: H.serviceTypes.map((e) => /* @__PURE__ */ w("span", {
+										className: "rounded-full bg-muted px-2.5 py-1 text-xs text-muted-foreground capitalize",
+										children: e.replace(/_/g, " ")
+									}, e))
+								})]
+							}),
+							H.businessHours && Object.keys(H.businessHours).length > 0 && /* @__PURE__ */ T("div", {
+								className: "mb-4",
+								children: [/* @__PURE__ */ w("p", {
+									className: "text-xs font-medium text-muted-foreground mb-2",
+									children: "Operating Hours"
+								}), /* @__PURE__ */ w("div", {
+									className: "space-y-1",
+									children: Object.entries(H.businessHours).map(([e, t]) => /* @__PURE__ */ T("div", {
+										className: "flex justify-between text-xs",
+										children: [/* @__PURE__ */ w("span", {
+											className: "capitalize text-foreground",
+											children: e
+										}), /* @__PURE__ */ w("span", {
+											className: "text-muted-foreground",
+											children: t.isOpen ? `${t.open} - ${t.close}` : "Closed"
+										})]
+									}, e))
+								})]
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "flex gap-3 mt-6",
+								children: [/* @__PURE__ */ w("button", {
+									type: "button",
+									onClick: () => {
+										V(!1), D(`/customer/carts/${H.id}`);
+									},
+									disabled: !H.isOpen,
+									className: t("flex-1 rounded-lg py-2.5 text-sm font-medium transition-opacity", H.isOpen ? "bg-foreground text-background hover:opacity-90" : "bg-muted text-muted-foreground cursor-not-allowed"),
+									children: H.isOpen ? "View Menu" : "Currently Closed"
+								}), /* @__PURE__ */ w("button", {
+									type: "button",
+									onClick: () => V(!1),
+									className: "rounded-lg border border-border px-4 py-2.5 text-sm font-medium text-foreground hover:bg-accent transition-colors",
+									children: "Close"
+								})]
+							})
+						]
+					})
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { D as CartDiscoveryPage };
+
+//# sourceMappingURL=CartDiscoveryPage.js.map

package/dist/coolandlovely/pages/customer/CartDiscoveryPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartDiscoveryPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/customer/CartDiscoveryPage.tsx"],"sourcesContent":["/**\n * Cart Discovery Page\n * @module coolandlovely/pages/customer\n *\n * Browse and search service providers (carts) with full filtering:\n * category, rating, price range, sort, search. Grid view with\n * cart info modal, load more, investment indicators, scheduled stops,\n * direct service links, verified badges, and prep time badges.\n */\n\nimport { useState, useMemo } from 'react';\nimport type { MockCart } from '../../types';\nimport {\n  Search,\n  X,\n  Star,\n  MapPin,\n  Clock,\n  CheckCircle2,\n  Info,\n  Home,\n  TrendingUp,\n  Calendar,\n  Tag,\n  Loader2,\n  AlertCircle,\n} from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { EmptyState } from '../../components/EmptyState';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useProviders, useInvestmentOpportunities } from '../../hooks/useCoolAndLovelyApi';\nimport { cn } from '../../utils/cn';\nimport { formatDistance, formatCurrency } from '../../utils/formatters';\n\nconst ALL_CATEGORIES = 'All';\n\ntype RatingFilter = '' | '4.5' | '4.0' | '3.5';\ntype PriceFilter = '' | 'low' | 'medium' | 'high';\ntype SortBy = 'rating' | 'popularity' | 'distance' | 'newest';\n\nexport function CartDiscoveryPage() {\n  const { navigateTo } = useCoolAndLovely();\n  const [searchQuery, setSearchQuery] = useState('');\n  const [selectedCategory, setSelectedCategory] = useState<string>(ALL_CATEGORIES);\n  const [ratingFilter, setRatingFilter] = useState<RatingFilter>('');\n  const [priceFilter, setPriceFilter] = useState<PriceFilter>('');\n  const [sortBy, setSortBy] = useState<SortBy>('rating');\n  const [visibleCount, setVisibleCount] = useState(9);\n  const [showCartInfo, setShowCartInfo] = useState(false);\n  const [selectedCartInfo, setSelectedCartInfo] = useState<MockCart | null>(null);\n\n  const { data: providers = [], isLoading, isError } = useProviders();\n  const { data: investmentOpportunities = [] } = useInvestmentOpportunities();\n\n  const categories = useMemo(() => {\n    const cats = new Set<string>();\n    providers.forEach((p) => {\n      if (p.category) cats.add(p.category);\n    });\n    return [ALL_CATEGORIES, ...Array.from(cats)];\n  }, [providers]);\n\n  const filteredCarts = useMemo(() => {\n    let carts = [...providers];\n\n    // Search query\n    if (searchQuery.trim()) {\n      const q = searchQuery.toLowerCase();\n      carts = carts.filter(\n        (c) => c.name.toLowerCase().includes(q) || c.category.toLowerCase().includes(q)\n      );\n    }\n\n    // Category filter\n    if (selectedCategory !== ALL_CATEGORIES) {\n      carts = carts.filter((cart) => cart.category === selectedCategory);\n    }\n\n    // Rating filter\n    if (ratingFilter) {\n      const minRating = parseFloat(ratingFilter);\n      carts = carts.filter((cart) => cart.rating >= minRating);\n    }\n\n    // Price range filter\n    if (priceFilter) {\n      carts = carts.filter((cart) => {\n        const avg = cart.averageOrderValue ?? 0;\n        switch (priceFilter) {\n          case 'low':\n            return avg <= 300;\n          case 'medium':\n            return avg > 300 && avg <= 800;\n          case 'high':\n            return avg > 800;\n          default:\n            return true;\n        }\n      });\n    }\n\n    // Sort\n    switch (sortBy) {\n      case 'rating':\n        carts.sort((a, b) => b.rating - a.rating);\n        break;\n      case 'popularity':\n        carts.sort((a, b) => (b.totalRatings || 0) - (a.totalRatings || 0));\n        break;\n      case 'distance':\n        carts.sort((a, b) => (a.distance || 0) - (b.distance || 0));\n        break;\n      case 'newest':\n        carts.sort(\n          (a, b) => new Date(b.createdAt || 0).getTime() - new Date(a.createdAt || 0).getTime()\n        );\n        break;\n    }\n\n    return carts;\n  }, [providers, searchQuery, selectedCategory, ratingFilter, priceFilter, sortBy]);\n\n  const visibleCarts = filteredCarts.slice(0, visibleCount);\n  const hasMore = visibleCount < filteredCarts.length;\n\n  const hasActiveFilters =\n    selectedCategory !== ALL_CATEGORIES ||\n    ratingFilter !== '' ||\n    priceFilter !== '' ||\n    searchQuery.trim() !== '';\n\n  const clearAllFilters = () => {\n    setSearchQuery('');\n    setSelectedCategory(ALL_CATEGORIES);\n    setRatingFilter('');\n    setPriceFilter('');\n    setSortBy('rating');\n    setVisibleCount(9);\n  };\n\n  if (isLoading) {\n    return (\n      <PageLayout title=\"Discover Carts\" description=\"Finding services and shops near you...\">\n        <div className=\"flex h-[60vh] items-center justify-center\">\n          <Loader2 className=\"h-8 w-8 animate-spin text-primary\" />\n        </div>\n      </PageLayout>\n    );\n  }\n\n  if (isError) {\n    return (\n      <PageLayout title=\"Discover Carts\" description=\"Error loading carts\">\n        <div className=\"flex h-[60vh] flex-col items-center justify-center gap-4\">\n          <AlertCircle className=\"h-12 w-12 text-destructive\" />\n          <h2 className=\"text-xl font-semibold\">Error loading service providers</h2>\n          <button\n            type=\"button\"\n            onClick={() => window.location.reload()}\n            className=\"rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground\"\n          >\n            Retry\n          </button>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Discover Carts\"\n      description=\"Find services and shops near you\"\n      actions={\n        <span className=\"text-sm text-muted-foreground\">{filteredCarts.length} carts found</span>\n      }\n    >\n      {/* Search Bar */}\n      <div className=\"relative\">\n        <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\" />\n        <input\n          type=\"text\"\n          placeholder=\"Search carts, services, or items...\"\n          value={searchQuery}\n          onChange={(e) => setSearchQuery(e.target.value)}\n          className={cn(\n            'w-full rounded-lg border border-border bg-card py-2.5 pl-10 pr-10 text-sm text-foreground',\n            'placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring'\n          )}\n        />\n        {searchQuery && (\n          <button\n            type=\"button\"\n            onClick={() => setSearchQuery('')}\n            className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n          >\n            <X className=\"h-4 w-4\" />\n          </button>\n        )}\n      </div>\n\n      {/* Category Chips */}\n      <div className=\"mt-4 flex flex-wrap gap-2\">\n        {categories.map((category) => (\n          <button\n            key={category}\n            type=\"button\"\n            onClick={() => setSelectedCategory(category)}\n            className={cn(\n              'rounded-full px-3 py-1.5 text-xs font-medium transition-colors',\n              selectedCategory === category\n                ? 'bg-foreground text-background'\n                : 'bg-muted text-muted-foreground hover:bg-accent hover:text-foreground'\n            )}\n          >\n            {category}\n          </button>\n        ))}\n      </div>\n\n      {/* Filter Row */}\n      <div className=\"mt-4 flex flex-wrap items-center gap-3\">\n        <select\n          value={ratingFilter}\n          onChange={(e) => setRatingFilter(e.target.value as RatingFilter)}\n          className=\"rounded-lg border border-border bg-card px-3 py-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n        >\n          <option value=\"\">Any Rating</option>\n          <option value=\"4.5\">4.5+ Stars</option>\n          <option value=\"4.0\">4.0+ Stars</option>\n          <option value=\"3.5\">3.5+ Stars</option>\n        </select>\n\n        <select\n          value={priceFilter}\n          onChange={(e) => setPriceFilter(e.target.value as PriceFilter)}\n          className=\"rounded-lg border border-border bg-card px-3 py-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n        >\n          <option value=\"\">Any Price</option>\n          <option value=\"low\">Under ₹300</option>\n          <option value=\"medium\">₹300 - ₹800</option>\n          <option value=\"high\">₹800+</option>\n        </select>\n\n        <select\n          value={sortBy}\n          onChange={(e) => setSortBy(e.target.value as SortBy)}\n          className=\"rounded-lg border border-border bg-card px-3 py-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n        >\n          <option value=\"rating\">Highest Rated</option>\n          <option value=\"popularity\">Most Popular</option>\n          <option value=\"distance\">Nearest</option>\n          <option value=\"newest\">Newest</option>\n        </select>\n\n        {hasActiveFilters && (\n          <button\n            type=\"button\"\n            onClick={clearAllFilters}\n            className=\"rounded-lg border border-border px-3 py-2 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors\"\n          >\n            Clear All Filters\n          </button>\n        )}\n      </div>\n\n      {/* Cart Grid */}\n      {visibleCarts.length > 0 ? (\n        <>\n          <div className=\"mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n            {visibleCarts.map((cart) => {\n              const investment = investmentOpportunities.find((o) => o.cartId === cart.id);\n              return (\n                <div\n                  key={cart.id}\n                  className=\"rounded-lg border border-border bg-card shadow-sm overflow-hidden hover:shadow-md transition-shadow flex flex-col\"\n                >\n                  {/* Image */}\n                  <div className=\"relative h-40 bg-muted\">\n                    <img src={cart.image} alt={cart.name} className=\"h-full w-full object-cover\" />\n                    <div className=\"absolute top-2 left-2 flex gap-1.5\">\n                      <span\n                        className={cn(\n                          'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium backdrop-blur-sm',\n                          cart.isOpen\n                            ? 'bg-green-500/20 text-green-600 dark:text-green-400'\n                            : 'bg-red-500/20 text-red-600 dark:text-red-400'\n                        )}\n                      >\n                        {cart.isOpen ? 'Open' : 'Closed'}\n                      </span>\n                      {cart.isVerified && (\n                        <span className=\"inline-flex items-center gap-0.5 rounded-full bg-blue-500/20 px-2 py-0.5 text-xs font-medium text-blue-600 dark:text-blue-400 backdrop-blur-sm\">\n                          <CheckCircle2 className=\"h-3 w-3\" />\n                          Verified\n                        </span>\n                      )}\n                    </div>\n                    <div className=\"absolute top-2 right-2\">\n                      <span className=\"rounded-full bg-black/50 px-2 py-0.5 text-xs text-white backdrop-blur-sm\">\n                        {cart.estimatedTime} min\n                      </span>\n                    </div>\n                  </div>\n\n                  {/* Details */}\n                  <div className=\"flex flex-col flex-1 p-4\">\n                    <div className=\"flex items-start justify-between gap-2 mb-1\">\n                      <h3 className=\"text-sm font-semibold text-foreground truncate flex-1\">\n                        {cart.name}\n                      </h3>\n                      <div className=\"flex items-center gap-1 shrink-0\">\n                        <Star className=\"h-3.5 w-3.5 fill-yellow-400 text-yellow-400\" />\n                        <span className=\"text-xs font-medium text-foreground\">{cart.rating}</span>\n                        <span className=\"text-xs text-muted-foreground\">({cart.totalRatings})</span>\n                      </div>\n                    </div>\n\n                    <p className=\"text-xs text-muted-foreground mb-2\">{cart.category}</p>\n\n                    <div className=\"flex items-center gap-3 text-xs text-muted-foreground mb-2\">\n                      <span className=\"flex items-center gap-1\">\n                        <MapPin className=\"h-3 w-3\" />\n                        {cart.location?.address?.split(',')[0] || 'Unknown'}\n                      </span>\n                    </div>\n\n                    <div className=\"flex items-center gap-3 text-xs text-muted-foreground mb-3\">\n                      {cart.averageOrderValue && (\n                        <span>\n                          Avg {formatCurrency(cart.averageOrderValue, { minimumFractionDigits: 0 })}\n                        </span>\n                      )}\n                      <span className=\"flex items-center gap-1\">\n                        <MapPin className=\"h-3 w-3\" />\n                        {formatDistance(cart.distance)}\n                      </span>\n                    </div>\n\n                    {/* Scheduled Stop Info */}\n                    {cart.serviceTypes?.includes('appointment') && (\n                      <div className=\"mb-3 rounded-md bg-blue-500/10 border border-blue-500/20 p-2\">\n                        <div className=\"flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400\">\n                          <Calendar className=\"h-3 w-3\" />\n                          <span className=\"font-medium\">Appointment available</span>\n                        </div>\n                      </div>\n                    )}\n\n                    {/* Direct Service Info */}\n                    {cart.serviceTypes?.includes('direct_service') && (\n                      <div className=\"mb-3 rounded-md bg-purple-500/10 border border-purple-500/20 p-2\">\n                        <div className=\"flex items-center gap-1 text-xs text-purple-600 dark:text-purple-400\">\n                          <Home className=\"h-3 w-3\" />\n                          <span className=\"font-medium\">Direct Service Available</span>\n                        </div>\n                      </div>\n                    )}\n\n                    {/* Tags */}\n                    {cart.serviceTypes && cart.serviceTypes.length > 0 && (\n                      <div className=\"flex flex-wrap gap-1 mb-3\">\n                        {cart.serviceTypes.slice(0, 3).map((tag: string) => (\n                          <span\n                            key={tag}\n                            className=\"rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground\"\n                          >\n                            {tag.replace(/_/g, ' ')}\n                          </span>\n                        ))}\n                      </div>\n                    )}\n\n                    <div className=\"mt-auto flex gap-2\">\n                      <button\n                        type=\"button\"\n                        onClick={() => navigateTo(`/customer/cart/${cart.id}`)}\n                        disabled={!cart.isOpen}\n                        className={cn(\n                          'flex-1 rounded-lg py-2 text-xs font-medium transition-opacity',\n                          cart.isOpen\n                            ? 'bg-foreground text-background hover:opacity-90'\n                            : 'bg-muted text-muted-foreground cursor-not-allowed'\n                        )}\n                      >\n                        {cart.isOpen ? 'View Services' : 'Closed'}\n                      </button>\n\n                      {cart.serviceTypes?.includes('direct_service') && (\n                        <button\n                          type=\"button\"\n                          onClick={() => navigateTo(`/customer/cart/${cart.id}`)}\n                          className=\"rounded-lg border border-border px-2 py-2 text-xs text-foreground hover:bg-accent transition-colors\"\n                          title=\"Book Direct Service\"\n                        >\n                          <Home className=\"h-3.5 w-3.5\" />\n                        </button>\n                      )}\n\n                      {investment && (\n                        <button\n                          type=\"button\"\n                          onClick={() =>\n                            alert('Investment opportunity available! View in Investor section.')\n                          }\n                          className=\"rounded-lg border border-green-500/30 bg-green-500/10 px-2 py-2 text-xs text-green-600 dark:text-green-400 hover:bg-green-500/20 transition-colors\"\n                          title=\"Investment Opportunity\"\n                        >\n                          <TrendingUp className=\"h-3.5 w-3.5\" />\n                        </button>\n                      )}\n\n                      <button\n                        type=\"button\"\n                        onClick={() => {\n                          setSelectedCartInfo(cart);\n                          setShowCartInfo(true);\n                        }}\n                        className=\"rounded-lg border border-border px-2 py-2 text-xs text-foreground hover:bg-accent transition-colors\"\n                        title=\"Cart Info\"\n                      >\n                        <Info className=\"h-3.5 w-3.5\" />\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n\n          {/* Load More */}\n          {hasMore && (\n            <div className=\"mt-8 text-center\">\n              <button\n                type=\"button\"\n                onClick={() => setVisibleCount((prev) => prev + 9)}\n                className=\"rounded-lg border border-border px-6 py-2.5 text-sm font-medium text-foreground hover:bg-accent transition-colors\"\n              >\n                Load More Carts\n              </button>\n            </div>\n          )}\n        </>\n      ) : (\n        <div className=\"mt-6\">\n          <EmptyState\n            icon={<Search className=\"h-12 w-12\" />}\n            title=\"No carts found\"\n            description={\n              searchQuery\n                ? `No results for \"${searchQuery}\". Try a different search term.`\n                : 'No carts available with these filters.'\n            }\n            action={\n              <button\n                type=\"button\"\n                onClick={clearAllFilters}\n                className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n              >\n                Clear Filters\n              </button>\n            }\n          />\n        </div>\n      )}\n\n      {/* Cart Info Modal */}\n      {showCartInfo && selectedCartInfo && (\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\">\n          <div className=\"w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-lg border border-border bg-card\">\n            <div className=\"p-5\">\n              <div className=\"flex items-center justify-between mb-4\">\n                <h3 className=\"text-lg font-semibold text-foreground\">Cart Information</h3>\n                <button\n                  type=\"button\"\n                  onClick={() => setShowCartInfo(false)}\n                  className=\"rounded-md p-1 text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  <X className=\"h-5 w-5\" />\n                </button>\n              </div>\n\n              {/* Image */}\n              <div className=\"h-48 rounded-lg overflow-hidden mb-4\">\n                <img\n                  src={selectedCartInfo.image}\n                  alt={selectedCartInfo.name}\n                  className=\"h-full w-full object-cover\"\n                />\n              </div>\n\n              {/* Basic Info */}\n              <h4 className=\"text-xl font-semibold text-foreground mb-1\">\n                {selectedCartInfo.name}\n              </h4>\n              <div className=\"flex flex-wrap items-center gap-3 mb-4\">\n                <div className=\"flex items-center gap-1\">\n                  <Star className=\"h-3.5 w-3.5 fill-yellow-400 text-yellow-400\" />\n                  <span className=\"text-sm font-medium\">{selectedCartInfo.rating}</span>\n                  <span className=\"text-xs text-muted-foreground\">\n                    ({selectedCartInfo.totalRatings} reviews)\n                  </span>\n                </div>\n                <span\n                  className={cn(\n                    'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',\n                    selectedCartInfo.isOpen\n                      ? 'bg-green-500/20 text-green-600 dark:text-green-400'\n                      : 'bg-red-500/20 text-red-600 dark:text-red-400'\n                  )}\n                >\n                  {selectedCartInfo.isOpen ? 'Open' : 'Closed'}\n                </span>\n              </div>\n\n              {/* Details Grid */}\n              <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2 mb-4\">\n                <div className=\"rounded-md bg-muted p-3\">\n                  <p className=\"text-xs font-medium text-muted-foreground flex items-center gap-1\">\n                    <MapPin className=\"h-3 w-3\" /> Location\n                  </p>\n                  <p className=\"mt-1 text-sm text-foreground\">\n                    {selectedCartInfo.location.address}\n                  </p>\n                </div>\n                <div className=\"rounded-md bg-muted p-3\">\n                  <p className=\"text-xs font-medium text-muted-foreground flex items-center gap-1\">\n                    <Tag className=\"h-3 w-3\" /> Category\n                  </p>\n                  <p className=\"mt-1 text-sm text-foreground\">{selectedCartInfo.category}</p>\n                </div>\n                {selectedCartInfo.averageOrderValue && (\n                  <div className=\"rounded-md bg-muted p-3\">\n                    <p className=\"text-xs font-medium text-muted-foreground\">Average Order</p>\n                    <p className=\"mt-1 text-sm text-foreground\">\n                      {formatCurrency(selectedCartInfo.averageOrderValue, {\n                        minimumFractionDigits: 0,\n                      })}\n                    </p>\n                  </div>\n                )}\n                <div className=\"rounded-md bg-muted p-3\">\n                  <p className=\"text-xs font-medium text-muted-foreground flex items-center gap-1\">\n                    <Clock className=\"h-3 w-3\" /> Estimated Time\n                  </p>\n                  <p className=\"mt-1 text-sm text-foreground\">\n                    {selectedCartInfo.estimatedTime} minutes\n                  </p>\n                </div>\n                <div className=\"rounded-md bg-muted p-3\">\n                  <p className=\"text-xs font-medium text-muted-foreground\">Distance</p>\n                  <p className=\"mt-1 text-sm text-foreground\">\n                    {formatDistance(selectedCartInfo.distance)}\n                  </p>\n                </div>\n                {selectedCartInfo.isVerified && (\n                  <div className=\"rounded-md bg-muted p-3\">\n                    <p className=\"text-xs font-medium text-muted-foreground flex items-center gap-1\">\n                      <CheckCircle2 className=\"h-3 w-3\" /> Verification\n                    </p>\n                    <p className=\"mt-1 text-sm text-foreground\">Verified cart</p>\n                  </div>\n                )}\n              </div>\n\n              {/* Service Types */}\n              {selectedCartInfo.serviceTypes && selectedCartInfo.serviceTypes.length > 0 && (\n                <div className=\"mb-4\">\n                  <p className=\"text-xs font-medium text-muted-foreground mb-2\">Service Types</p>\n                  <div className=\"flex flex-wrap gap-2\">\n                    {(selectedCartInfo.serviceTypes as string[]).map((type: string) => (\n                      <span\n                        key={type}\n                        className=\"rounded-full bg-muted px-2.5 py-1 text-xs text-muted-foreground capitalize\"\n                      >\n                        {type.replace(/_/g, ' ')}\n                      </span>\n                    ))}\n                  </div>\n                </div>\n              )}\n\n              {/* Business Hours */}\n              {selectedCartInfo.businessHours &&\n                Object.keys(selectedCartInfo.businessHours).length > 0 && (\n                  <div className=\"mb-4\">\n                    <p className=\"text-xs font-medium text-muted-foreground mb-2\">\n                      Operating Hours\n                    </p>\n                    <div className=\"space-y-1\">\n                      {Object.entries(selectedCartInfo.businessHours as Record<string, any>).map(\n                        ([day, hours]) => (\n                          <div key={day} className=\"flex justify-between text-xs\">\n                            <span className=\"capitalize text-foreground\">{day}</span>\n                            <span className=\"text-muted-foreground\">\n                              {hours.isOpen ? `${hours.open} - ${hours.close}` : 'Closed'}\n                            </span>\n                          </div>\n                        )\n                      )}\n                    </div>\n                  </div>\n                )}\n\n              {/* Actions */}\n              <div className=\"flex gap-3 mt-6\">\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setShowCartInfo(false);\n                    navigateTo(`/customer/carts/${selectedCartInfo.id}`);\n                  }}\n                  disabled={!selectedCartInfo.isOpen}\n                  className={cn(\n                    'flex-1 rounded-lg py-2.5 text-sm font-medium transition-opacity',\n                    selectedCartInfo.isOpen\n                      ? 'bg-foreground text-background hover:opacity-90'\n                      : 'bg-muted text-muted-foreground cursor-not-allowed'\n                  )}\n                >\n                  {selectedCartInfo.isOpen ? 'View Menu' : 'Currently Closed'}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => setShowCartInfo(false)}\n                  className=\"rounded-lg border border-border px-4 py-2.5 text-sm font-medium text-foreground hover:bg-accent transition-colors\"\n                >\n                  Close\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/coolandlovely/pages/customer/CheckoutPage.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Checkout Page
+ * @module coolandlovely/pages/customer
+ *
+ * Full checkout flow with delivery address form, payment method selection,
+ * tip selection, special instructions, price breakdown, and Place Order CTA.
+ */
+export declare function CheckoutPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CheckoutPage.d.ts.map

package/dist/coolandlovely/pages/customer/CheckoutPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckoutPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/customer/CheckoutPage.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA0DH,wBAAgB,YAAY,4CAyhB3B"}