require("./chunk-9hOWP6kD.cjs");
const require_FluidProvider = require("./FluidProvider-DlyrgiEr.cjs");
const require_use_account = require("./use-account-C596ARpR.cjs");
const require_ContactsTranslationBridge = require("./ContactsTranslationBridge-BYFw5Jo2.cjs");
const require_query_keys = require("./query-keys-p6qddudR.cjs");
const require_static_dict_adapter = require("./static-dict-adapter-BCgoKiVT.cjs");
const require_PointsWidget = require("./PointsWidget-Dm_gKGfF.cjs");
const require_src = require("./src-CMer7k-Y.cjs");
const require_ScreenHeaderContext = require("./ScreenHeaderContext-NGY43GoF.cjs");
const require_use_store = require("./use-store-Dl3HEHrF.cjs");
const require_use_portal_card_add_3ds_flow = require("./use-portal-card-add-3ds-flow-CK9yE9n2.cjs");
const require_display = require("./display-tXE9ewkB.cjs");
const require_use_mysite_portal = require("./use-mysite-portal-DhSTHOio.cjs");
let react = require("react");
let _tanstack_react_query = require("@tanstack/react-query");
let react_jsx_runtime = require("react/jsx-runtime");
let zod = require("zod");
let lucide_react = require("lucide-react");
//#region src/screens/profile/derive-last-name.ts
function deriveLastName(firstName, fullName) {
	if (!firstName) return "";
	const prefix = `${firstName} `;
	return fullName.startsWith(prefix) ? fullName.slice(prefix.length) : "";
}
//#endregion
//#region src/screens/profile/ProfileLayout.tsx
function ProfileLayout(props) {
	const { t } = require_use_portal_card_add_3ds_flow.useProfileTranslation();
	const { account, pointsBalance, pointsLedger, pointsLabel, rewardsEnabled, addresses, paymentMethods, mySiteDisplayUrl, socialLinks, onEditPersonalInfo, onAddAddress, onEditAddress, onDeleteAddress, onAddPaymentMethod, onEditPaymentMethod, onCopyMySiteLink, onEditMySiteLink, onConnectSocial, onSignOut } = props;
	const fullName = `${account.first_name ?? ""} ${account.last_name ?? ""}`.trim();
	const heroDisplay = (account.first_name || "").trim().split(" ")[0] || account.email?.split("@")[0] || t("account_fallback");
	const connectedSocialCount = Object.values(socialLinks).filter((v) => typeof v === "string" && v.length > 0).length;
	const [isPointsHistoryOpen, setIsPointsHistoryOpen] = (0, react.useState)(false);
	const POINTS_PREVIEW_COUNT = 4;
	const ledger = pointsLedger ?? [];
	const ledgerPreview = ledger.slice(0, POINTS_PREVIEW_COUNT);
	const hasMoreLedger = ledger.length > POINTS_PREVIEW_COUNT;
	const pointsLabelPluralCap = capitalize(pointsLabel.plural);
	const pointsCountLabel = (n) => n === 1 ? pointsLabel.singular : pointsLabel.plural;
	const sortedAddresses = [...addresses].sort((a, b) => Number(b.default ?? false) - Number(a.default ?? false));
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
		className: "relative",
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
			className: "relative mx-auto max-w-4xl px-5 pt-8 pb-20 md:px-8",
			children: [
				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
					className: "flex items-center gap-3.5",
					children: [
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
							className: "relative size-12 shrink-0 overflow-hidden rounded-full ring-1 ring-black/5 md:size-13",
							children: account.avatar_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
								src: account.avatar_url,
								alt: "",
								className: "h-full w-full object-cover"
							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
								className: "bg-primary text-primary-foreground flex h-full w-full items-center justify-center text-lg font-semibold",
								children: heroDisplay.charAt(0).toUpperCase()
							})
						}),
						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
							className: "min-w-0 flex-1",
							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
								className: "text-foreground truncate text-xl font-bold tracking-tight md:text-2xl",
								children: heroDisplay
							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
								className: "text-muted-foreground mt-0.5 truncate text-sm",
								children: account.email
							})]
						}),
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
							className: "flex shrink-0 items-center gap-2",
							children: rewardsEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
								className: "ring-border text-foreground inline-flex items-center gap-1.5 rounded-md bg-transparent px-2.5 py-1 text-xs font-semibold ring-1",
								children: [
									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sparkles, {
										className: "text-primary size-3",
										strokeWidth: 2.25
									}),
									(pointsBalance ?? 0).toLocaleString(),
									" ",
									pointsCountLabel(pointsBalance ?? 0)
								]
							})
						})
					]
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
					title: t("personal_information"),
					action: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PillButton, {
						onClick: onEditPersonalInfo,
						icon: lucide_react.Pencil,
						label: t("edit")
					})
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "ring-border mt-2.5 overflow-hidden rounded-2xl bg-transparent ring-1",
					children: [
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRow, {
							icon: lucide_react.User,
							label: t("name"),
							value: fullName || account.first_name || ""
						}),
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRow, {
							icon: lucide_react.Mail,
							label: t("email"),
							value: account.email ?? ""
						}),
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRow, {
							icon: lucide_react.Phone,
							label: t("phone"),
							value: account.phone ?? "",
							placeholder: t("add_phone_number")
						}),
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRow, {
							icon: lucide_react.Quote,
							label: t("bio"),
							value: account.bio ?? "",
							placeholder: t("add_a_short_bio"),
							multiline: true,
							isLast: true
						})
					]
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, { title: t("payment_methods") }),
				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "mt-2.5 grid grid-cols-1 gap-2.5 sm:grid-cols-3",
					children: [paymentMethods.map((method) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaymentCardVisual, {
						method,
						onClick: () => onEditPaymentMethod(method)
					}, method.id)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddPaymentTile, { onClick: onAddPaymentMethod })]
				}),
				rewardsEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
					title: t("points_history", { label: pointsLabelPluralCap }),
					action: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
						className: "text-muted-foreground/75 text-xs",
						children: t("pts_available", {
							count: String((pointsBalance ?? 0).toLocaleString()),
							label: pointsCountLabel(pointsBalance ?? 0)
						})
					})
				}), ledger.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "ring-border mt-2.5 overflow-hidden rounded-2xl bg-transparent ring-1",
					children: [ledgerPreview.map((entry, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointsLedgerRow, {
						entry,
						isLast: !hasMoreLedger && i === ledgerPreview.length - 1,
						pointsLabelPlural: pointsLabelPluralCap
					}, entry.id)), hasMoreLedger && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
						type: "button",
						onClick: () => setIsPointsHistoryOpen(true),
						className: "text-foreground hover:bg-muted flex w-full items-center justify-center gap-1 px-4 py-3 text-xs font-bold transition-colors",
						children: t("see_all_transactions", { count: ledger.length })
					})]
				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "ring-dashed ring-border mt-2.5 flex flex-col items-center justify-center gap-1 rounded-2xl bg-transparent px-4 py-8 text-center ring-1",
					children: [
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sparkles, {
							className: "text-muted-foreground/75 size-5",
							strokeWidth: 1.75
						}),
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
							className: "text-foreground text-sm font-bold",
							children: t("no_points_yet", { label: pointsLabel.plural })
						}),
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
							className: "text-muted-foreground text-xs",
							children: t("earn_points_hint", { label: pointsLabel.plural })
						})
					]
				})] }),
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
					title: t("your_mysite_link"),
					action: onEditMySiteLink ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PillButton, {
						onClick: onEditMySiteLink,
						icon: lucide_react.Pencil,
						label: t("edit_link")
					}) : void 0
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "ring-border mt-2.5 flex items-center gap-3 rounded-2xl bg-transparent p-3.5 ring-1",
					children: [
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
							className: "bg-muted text-foreground flex size-11 shrink-0 items-center justify-center rounded-full",
							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Link2, {
								className: "size-[18px]",
								strokeWidth: 2
							})
						}),
						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
							className: "min-w-0 flex-1",
							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
								className: "text-muted-foreground/75 text-xs font-bold tracking-widest uppercase",
								children: t("public_link")
							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
								className: "text-foreground mt-0.5 truncate font-mono text-sm font-semibold",
								children: mySiteDisplayUrl || t("set_your_mysite_link")
							})]
						}),
						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
							type: "button",
							onClick: onCopyMySiteLink,
							disabled: !mySiteDisplayUrl,
							className: "ring-border text-foreground hover:bg-muted inline-flex items-center gap-1 rounded-md bg-transparent px-3 py-1.5 text-xs font-bold ring-1 transition-all disabled:cursor-not-allowed disabled:opacity-40",
							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, {
								className: "size-3",
								strokeWidth: 2.25
							}), t("copy")]
						})
					]
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, { title: t("shipping_addresses") }),
				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "mt-2.5 grid grid-cols-1 gap-2.5 sm:grid-cols-2",
					children: [sortedAddresses.map((address) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddressCard, {
						address,
						onEdit: () => onEditAddress(address),
						onDelete: address.default ? void 0 : () => onDeleteAddress(address)
					}, address.id)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddAddressTile, { onClick: onAddAddress })]
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
					title: t("social_media"),
					action: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
						className: "text-muted-foreground/75 text-xs",
						children: t("connected_count", { count: connectedSocialCount })
					})
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: "ring-border mt-2.5 overflow-hidden rounded-2xl bg-transparent ring-1",
					children: SOCIAL_ENTRIES.map((entry, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SocialRow, {
						entry,
						handle: socialLinks[entry.key] ?? "",
						isLast: i === SOCIAL_ENTRIES.length - 1,
						onConnect: () => onConnectSocial(entry.key)
					}, entry.key))
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Dialog, {
					open: isPointsHistoryOpen,
					onOpenChange: setIsPointsHistoryOpen,
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogContent, {
						className: "max-w-md md:max-w-lg",
						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, { children: t("points_history", { label: pointsLabelPluralCap }) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
							className: "ring-border max-h-[60vh] overflow-y-auto rounded-2xl bg-transparent ring-1",
							children: ledger.map((entry, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointsLedgerRow, {
								entry,
								isLast: i === ledger.length - 1,
								pointsLabelPlural: pointsLabelPluralCap
							}, entry.id))
						})]
					})
				}),
				onSignOut && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "ring-border mt-8 flex flex-wrap items-center justify-between gap-3 rounded-2xl bg-transparent p-3.5 ring-1",
					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
						className: "flex items-center gap-3",
						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
							className: "bg-destructive/10 flex size-9 items-center justify-center rounded-md",
							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LogOut, {
								className: "text-destructive size-4",
								strokeWidth: 2.25
							})
						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
							className: "text-foreground text-sm font-bold",
							children: t("sign_out")
						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
							className: "text-muted-foreground text-xs",
							children: t("sign_out_description")
						})] })]
					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
						type: "button",
						onClick: onSignOut,
						className: "bg-destructive/15 text-destructive hover:bg-destructive/25 rounded-md px-4 py-2 text-xs font-bold transition-colors",
						children: t("sign_out")
					})]
				})
			]
		})
	});
}
function SectionHeader({ title, action }) {
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
		className: "mt-8 flex items-end justify-between",
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
			className: "text-foreground text-base font-bold tracking-tight",
			children: title
		}), action ?? null]
	});
}
function PillButton({ onClick, icon: Icon, label, disabled }) {
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
		type: "button",
		onClick,
		disabled,
		className: "ring-border text-foreground hover:bg-muted inline-flex items-center gap-1 rounded-md bg-transparent px-3 py-1.5 text-xs font-bold ring-1 transition-all disabled:cursor-not-allowed disabled:opacity-40",
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
			className: "size-3",
			strokeWidth: 2.25
		}), label]
	});
}
function PointsLedgerRow({ entry, isLast, pointsLabelPlural }) {
	const { t } = require_use_portal_card_add_3ds_flow.useProfileTranslation();
	const isCredit = entry.amount >= 0;
	const sign = isCredit ? "+" : "−";
	const magnitude = Math.abs(entry.amount).toLocaleString();
	const amountColor = isCredit ? "text-emerald-600" : "text-destructive";
	const sourceName = entry.metadata?.source?.name?.trim();
	const transactionType = entry.metadata?.transaction_type;
	const label = sourceName || (transactionType ? require_PointsWidget.titleCaseFromSnake(transactionType) : isCredit ? t("points_awarded", { label: pointsLabelPlural }) : t("points_redeemed", { label: pointsLabelPlural }));
	const dateLabel = formatLedgerDate(entry.created_at);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
		className: `flex items-center gap-3 px-4 py-3.5 ${isLast ? "" : "border-border border-b"}`,
		children: [
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				className: "bg-muted flex size-9 shrink-0 items-center justify-center rounded-full",
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sparkles, {
					className: `size-4 ${isCredit ? "text-primary" : "text-muted-foreground"}`,
					strokeWidth: 2
				})
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "min-w-0 flex-1",
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: "text-foreground truncate text-sm font-medium",
					children: label
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: "text-muted-foreground text-xs",
					children: dateLabel
				})]
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: `shrink-0 font-mono text-sm font-bold tabular-nums ${amountColor}`,
				children: [sign, magnitude]
			})
		]
	});
}
/** Capitalize the first letter for display in headings / titles. */
function capitalize(value) {
	return value.charAt(0).toUpperCase() + value.slice(1);
}
function formatLedgerDate(iso) {
	try {
		return new Date(iso).toLocaleDateString(void 0, {
			month: "short",
			day: "numeric",
			year: "numeric"
		});
	} catch {
		return iso;
	}
}
function FieldRow({ icon: Icon, label, value, placeholder, isLast, multiline }) {
	const display = value || placeholder || "";
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
		className: `flex gap-3 px-4 py-3.5 ${multiline ? "items-start" : "items-center"} ${isLast ? "" : "border-border border-b"}`,
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
			className: "bg-muted text-muted-foreground flex size-9 shrink-0 items-center justify-center rounded-full",
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
				className: "size-4",
				strokeWidth: 2
			})
		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
			className: "min-w-0 flex-1",
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				className: "text-muted-foreground/75 text-xs font-bold tracking-widest uppercase",
				children: label
			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				className: `mt-0.5 ${multiline ? "whitespace-pre-line" : "truncate"} text-sm font-medium ${!value && Boolean(placeholder) ? "text-muted-foreground/55" : "text-foreground"}`,
				children: display
			})]
		})]
	});
}
function PaymentCardVisual({ method, onClick }) {
	const { t } = require_use_portal_card_add_3ds_flow.useProfileTranslation();
	const brand = (method.details.card_brand || "").toLowerCase();
	const logoCandidates = [...new Set([
		method.details.logo_url,
		require_display.brandIconUrl(brand),
		require_display.GENERIC_PAYMENT_ICON_URL
	].filter((url) => Boolean(url)))];
	const [logoStep, setLogoStep] = (0, react.useState)(0);
	const logoSrc = logoCandidates[Math.min(logoStep, logoCandidates.length - 1)] ?? require_display.GENERIC_PAYMENT_ICON_URL;
	const maskedNumber = require_display.maskCardNumber(method.details.last_four, brand);
	const expMonth = String(method.details.exp_month ?? "").padStart(2, "0");
	const expYear = String(method.details.exp_year ?? "").slice(-2);
	const exp = expMonth && expYear ? `${expMonth}/${expYear}` : "";
	const holder = method.details.card_holder || method.billing_address?.name || "";
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
		type: "button",
		onClick,
		className: "group bg-foreground text-background ring-foreground/10 relative flex aspect-[1.586/1] flex-col justify-between overflow-hidden rounded-xl p-4 text-left shadow-sm ring-1 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg",
		children: [
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				"aria-hidden": true,
				className: "absolute inset-0 bg-[repeating-linear-gradient(135deg,transparent_0px,transparent_22px,currentColor_22px,currentColor_24px)] opacity-[0.04]"
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "relative",
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "flex items-start justify-between",
					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
						src: logoSrc,
						alt: brand,
						className: "h-7 w-auto object-contain",
						onError: () => setLogoStep((step) => Math.min(step + 1, logoCandidates.length - 1))
					}), method.default && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
						className: "bg-background/10 text-background/80 rounded-md px-2 py-0.5 text-xs font-bold tracking-wider uppercase",
						children: t("default")
					})]
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: "text-background mt-3 font-mono text-lg font-bold tracking-wider",
					children: maskedNumber
				})]
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "relative flex items-end justify-between gap-2",
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "min-w-0 flex-1",
					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
						className: "text-background/40 text-xs font-semibold tracking-widest uppercase",
						children: t("cardholder")
					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
						className: "text-background truncate text-xs font-semibold",
						children: holder || " "
					})]
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: "text-background/40 text-xs font-semibold tracking-widest uppercase",
					children: t("card_expires")
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: "text-background font-mono text-xs font-semibold",
					children: exp
				})] })]
			})
		]
	});
}
function AddPaymentTile({ onClick }) {
	const { t } = require_use_portal_card_add_3ds_flow.useProfileTranslation();
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
		type: "button",
		onClick,
		className: "group ring-dashed ring-border text-muted-foreground hover:bg-background hover:text-foreground flex aspect-[1.586/1] flex-col items-center justify-center gap-1.5 rounded-xl bg-transparent ring-1 transition-colors",
		children: [
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				className: "ring-border flex size-9 items-center justify-center rounded-full bg-transparent ring-1",
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {
					className: "size-4",
					strokeWidth: 2.25
				})
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				className: "text-foreground text-xs font-bold",
				children: t("add_payment_method")
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				className: "text-muted-foreground/75 text-xs",
				children: t("accepted_cards")
			})
		]
	});
}
function AddressCard({ address, onEdit, onDelete }) {
	const { t } = require_use_portal_card_add_3ds_flow.useProfileTranslation();
	const label = address.name?.trim() || t("address");
	const cityLine = [
		address.city,
		address.state,
		address.postal_code
	].filter(Boolean).join(", ");
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
		className: "ring-border hover:bg-muted focus-within:ring-foreground/40 relative flex flex-col rounded-2xl bg-transparent ring-1 transition-all duration-200 focus-within:ring-2 hover:ring-2",
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
			type: "button",
			onClick: onEdit,
			className: "flex w-full flex-col rounded-2xl p-4 pr-12 text-left focus-visible:outline-none",
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "flex items-start justify-between gap-2",
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "flex items-center gap-2",
					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
						className: "bg-muted flex size-8 items-center justify-center rounded-full",
						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MapPin, {
							className: "text-muted-foreground size-4",
							strokeWidth: 2
						})
					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
						className: "text-foreground text-sm font-bold",
						children: label
					})]
				}), address.default && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
					className: "bg-primary text-primary-foreground rounded-md px-2 py-0.5 text-xs font-bold tracking-wider uppercase",
					children: t("default")
				})]
			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "text-foreground mt-3 space-y-0.5 text-sm leading-snug",
				children: [
					address.address1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: address.address1 }),
					address.address2 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: address.address2 }),
					cityLine && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: cityLine }),
					address.country_code && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
						className: "text-muted-foreground",
						children: address.country_code
					}),
					address.phone && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
						className: "text-muted-foreground",
						children: address.phone
					})
				]
			})]
		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
			className: "absolute top-2 right-2 z-10",
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_portal_card_add_3ds_flow.EllipsesDropdown, {
				onEdit,
				onDelete,
				editLabel: t("edit"),
				deleteLabel: t("delete")
			})
		})]
	});
}
function AddAddressTile({ onClick }) {
	const { t } = require_use_portal_card_add_3ds_flow.useProfileTranslation();
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
		type: "button",
		onClick,
		className: "group ring-dashed ring-border text-muted-foreground hover:bg-background hover:text-foreground flex min-h-37 flex-col items-center justify-center gap-1.5 rounded-2xl bg-transparent ring-1 transition-colors",
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
			className: "ring-border flex size-9 items-center justify-center rounded-full bg-transparent ring-1",
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {
				className: "size-4",
				strokeWidth: 2.25
			})
		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
			className: "text-foreground text-sm font-bold",
			children: t("add_an_address")
		})]
	});
}
const SOCIAL_ENTRIES = [
	{
		key: "linkedin",
		label: "LinkedIn",
		icon: lucide_react.Linkedin,
		placeholder: "linkedin.com/in/username"
	},
	{
		key: "facebook",
		label: "Facebook",
		icon: lucide_react.Facebook,
		placeholder: "facebook.com/username"
	},
	{
		key: "x",
		label: "X",
		icon: lucide_react.Twitter,
		placeholder: "x.com/username"
	},
	{
		key: "instagram",
		label: "Instagram",
		icon: lucide_react.Instagram,
		placeholder: "instagram.com/username"
	},
	{
		key: "youtube",
		label: "YouTube",
		icon: lucide_react.Youtube,
		placeholder: "youtube.com/@channel"
	},
	{
		key: "pinterest",
		label: "Pinterest",
		icon: lucide_react.Globe,
		placeholder: "pinterest.com/username"
	},
	{
		key: "tiktok",
		label: "TikTok",
		icon: lucide_react.Globe,
		placeholder: "tiktok.com/@username"
	}
];
function SocialRow({ entry, handle, isLast, onConnect }) {
	const { t } = require_use_portal_card_add_3ds_flow.useProfileTranslation();
	const Icon = entry.icon;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
		className: `flex items-center gap-3 px-4 py-3.5 ${isLast ? "" : "border-border border-b"}`,
		children: [
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				className: "bg-muted text-foreground flex size-9 shrink-0 items-center justify-center rounded-full",
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
					className: "size-4",
					strokeWidth: 2
				})
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "min-w-0 flex-1",
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: "text-foreground text-sm font-bold",
					children: entry.label
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: `truncate text-xs ${handle ? "text-muted-foreground" : "text-muted-foreground/55"}`,
					children: handle || entry.placeholder
				})]
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PillButton, {
				onClick: onConnect,
				icon: handle ? lucide_react.Pencil : lucide_react.Plus,
				label: handle ? t("edit") : t("connect")
			})
		]
	});
}
//#endregion
//#region src/screens/profile-card-add-success.ts
/**
* Build the create-payment-method onSuccess handler. On three_ds_required it
* hands off to the 3DS flow and leaves the card dialog OPEN (begin() resolves
* at modal-open, not flow-completion). On a created PM it runs the legacy
* created path (invalidate + close + toast).
*/
function buildProfileCardAddSuccess(deps) {
	return async (response) => {
		if (require_use_portal_card_add_3ds_flow.isThreeDsRequiredCreate(response)) {
			await deps.begin(response);
			return;
		}
		deps.onCreated();
	};
}
//#endregion
//#region src/screens/ProfileContentScreen.tsx
function mapAccountToCustomerAccount(raw) {
	return {
		fluid_pay_account: {
			id: raw.id,
			email: raw.email,
			address_count: 0,
			payment_methods_count: 0,
			language_iso: null
		},
		customer: {
			id: raw.id,
			active: true,
			active_subscriptions_count: 0,
			display_total_spent: "0",
			email: raw.email,
			first_name: raw.first_name,
			full_name: `${raw.first_name} ${raw.last_name}`.trim(),
			inactive_subscriptions_count: 0,
			is_rep: raw.member_type === "rep",
			phone: raw.phone,
			orders_count: 0
		}
	};
}
function mapToFluidPayAddress(raw) {
	return {
		id: raw.id,
		address1: raw.street1,
		address2: raw.street2,
		city: raw.city,
		country_code: raw.country,
		default: raw.default,
		name: raw.name,
		postal_code: raw.zip,
		phone: raw.phone,
		state: raw.state,
		subdivision_code: null
	};
}
const SOCIAL_KEY_TO_FIELD = {
	linkedin: "linkedin",
	facebook: "facebook",
	x: "twitter",
	instagram: "instagram",
	youtube: "youtube",
	pinterest: null,
	tiktok: "tiktok"
};
const SOCIAL_LABELS = {
	linkedin: "LinkedIn",
	facebook: "Facebook",
	x: "X",
	instagram: "Instagram",
	youtube: "YouTube",
	pinterest: "Pinterest",
	tiktok: "TikTok"
};
const SOCIAL_PLACEHOLDERS = {
	linkedin: "linkedin.com/in/username",
	facebook: "facebook.com/username",
	x: "x.com/username",
	instagram: "instagram.com/username",
	youtube: "youtube.com/@channel",
	pinterest: "pinterest.com/username",
	tiktok: "tiktok.com/@username"
};
function ProfileContentScreen({ onToast, countryIso }) {
	const { t } = require_use_portal_card_add_3ds_flow.useProfileTranslation();
	const { locale } = require_static_dict_adapter.useActiveLocale();
	const payApi = require_FluidProvider.usePayApi();
	const accountApi = require_use_account.useAccountApi();
	const queryClient = (0, _tanstack_react_query.useQueryClient)();
	const fluidPayShim = (0, react.useMemo)(() => require_use_portal_card_add_3ds_flow.createFluidPayApiAdapter(payApi), [payApi]);
	const { data: mySiteProfile } = require_use_mysite_portal.usePortalMySiteProfile();
	const updateMySiteSettingsMutation = require_use_mysite_portal.usePortalUpdateSettings();
	const mySiteUrl = mySiteProfile?.mysite_url ?? "";
	const mySiteDisplayUrl = mySiteUrl ? mySiteUrl.replace(/^https?:\/\//, "") : "";
	const mySiteLastSlash = mySiteDisplayUrl.lastIndexOf("/");
	const mySiteUrlPrefix = mySiteLastSlash >= 0 ? mySiteDisplayUrl.slice(0, mySiteLastSlash + 1) : "";
	const mySiteCurrentSlug = mySiteLastSlash >= 0 ? mySiteDisplayUrl.slice(mySiteLastSlash + 1) : mySiteDisplayUrl;
	const { data: accountRep, isLoading: isLoadingAccount, isError: isAccountError } = require_use_account.useAccount();
	const accountData = (0, react.useMemo)(() => accountRep ? mapAccountToCustomerAccount(accountRep) : void 0, [accountRep]);
	const { data: addressesData } = (0, _tanstack_react_query.useQuery)({
		queryKey: require_query_keys.payKeys.addresses.list(),
		queryFn: async () => {
			return (await payApi.fetchAddresses()).addresses.map(mapToFluidPayAddress);
		},
		enabled: true
	});
	const { data: paymentMethodsData } = (0, _tanstack_react_query.useQuery)({
		queryKey: require_query_keys.payKeys.paymentMethods.list(),
		queryFn: async () => {
			return (await payApi.fetchPaymentMethods()).payment_methods.map(require_use_portal_card_add_3ds_flow.mapToFluidPayPaymentMethod);
		},
		enabled: true
	});
	const countriesAdapter = require_ContactsTranslationBridge.useCountriesApi();
	const languagesAdapter = require_FluidProvider.useLanguagesApi();
	const { data: countriesData } = (0, _tanstack_react_query.useQuery)({
		queryKey: require_query_keys.storeKeys.countries(locale),
		queryFn: () => countriesAdapter.listCountries({ languageIso: locale }),
		enabled: true
	});
	const { data: languagesData } = (0, _tanstack_react_query.useQuery)({
		queryKey: require_query_keys.storeKeys.languages(),
		queryFn: () => languagesAdapter.listLanguages(),
		enabled: true
	});
	const { data: pointsLedgerData, isError: isPointsLedgerError } = (0, _tanstack_react_query.useQuery)({
		queryKey: require_query_keys.payKeys.pointsLedgers.list(),
		queryFn: () => payApi.fetchPointsLedgers(),
		enabled: true,
		retry: (failureCount, error) => {
			if (error instanceof Error && "status" in error && error.status === 403) return false;
			return failureCount < 1;
		}
	});
	const rewardPointsEnabled = !isPointsLedgerError && pointsLedgerData != null;
	const { data: store } = require_use_store.useStore();
	const pointsLabelSingular = store?.reward_points_label_singular || "point";
	const pointsLabelPlural = store?.reward_points_label_plural || "points";
	const pointsLabel = (0, react.useMemo)(() => ({
		singular: pointsLabelSingular,
		plural: pointsLabelPlural
	}), [pointsLabelSingular, pointsLabelPlural]);
	const adaptedPointsLedger = (0, react.useMemo)(() => {
		return (pointsLedgerData?.points_ledgers ?? []).map((entry) => {
			const meta = entry.metadata;
			return {
				id: entry.id,
				amount: entry.amount,
				company_id: 0,
				created_at: entry.created_at,
				customer_id: 0,
				metadata: {
					transaction_type: meta?.transaction_type ?? void 0,
					source: meta?.source ?? void 0
				},
				total_balance: entry.total_balance,
				updated_at: entry.created_at
			};
		});
	}, [pointsLedgerData]);
	const updateCustomerMutation = (0, _tanstack_react_query.useMutation)({
		mutationFn: async (data) => {
			await accountApi.updateAccount({ account: {
				first_name: data.first_name,
				last_name: data.last_name,
				phone: data.phone_number,
				bio: data.bio
			} });
		},
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: require_query_keys.accountKeys.all });
			onToast(t("profile_updated"), "success");
		},
		onError: () => {
			onToast(t("failed_to_update_profile"), "error");
		}
	});
	const deletePaymentMethodMutation = (0, _tanstack_react_query.useMutation)({
		mutationFn: (paymentMethodId) => payApi.deletePaymentMethod(paymentMethodId),
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.paymentMethods.all });
		},
		onError: () => {
			onToast(t("failed_to_delete_payment_method"), "error");
		}
	});
	const updatePaymentMethodMutation = (0, _tanstack_react_query.useMutation)({
		mutationFn: ({ paymentMethodId, data }) => payApi.updatePaymentMethod(paymentMethodId, { payment_method: {
			default: data.set_as_default,
			billing_address: {
				name: data.billing_address.name,
				street1: data.billing_address.address1,
				street2: data.billing_address.address2 ?? null,
				city: data.billing_address.city,
				state: data.billing_address.state,
				zip: data.billing_address.zip,
				country: data.billing_address.country_code
			}
		} }),
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.paymentMethods.all });
		},
		onError: () => {
			onToast(t("failed_to_update_payment_method"), "error");
		}
	});
	const createAddressMutation = (0, _tanstack_react_query.useMutation)({
		mutationFn: async (body) => {
			const existingIds = new Set((addressesData ?? []).map((a) => a.id));
			const address = await payApi.createAddress({ address: {
				name: body.address.name,
				street1: body.address.address1,
				street2: body.address.address2,
				city: body.address.city,
				state: body.address.state,
				zip: body.address.postal_code,
				country: body.address.country_code,
				phone: body.address.phone,
				default: body.address.default
			} });
			return {
				address,
				deduped: existingIds.has(address.id)
			};
		},
		onSuccess: ({ deduped }) => {
			queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.addresses.all });
			if (deduped) onToast(t("address_already_exists"), "warning");
			else onToast(t("address_created"), "success");
		},
		onError: () => {
			onToast(t("failed_to_create_address"), "error");
		}
	});
	const updateAddressMutation = (0, _tanstack_react_query.useMutation)({
		mutationFn: ({ addressId, body }) => payApi.updateAddress(addressId, { address: {
			name: body.address.name,
			street1: body.address.address1,
			street2: body.address.address2,
			city: body.address.city,
			state: body.address.state,
			zip: body.address.postal_code,
			country: body.address.country_code,
			phone: body.address.phone,
			default: body.address.default
		} }),
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.addresses.all });
			onToast(t("address_updated"), "success");
		},
		onError: () => {
			onToast(t("failed_to_update_address"), "error");
		}
	});
	const deleteAddressMutation = (0, _tanstack_react_query.useMutation)({
		mutationFn: (addressId) => payApi.deleteAddress(addressId),
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.addresses.all });
			onToast(t("address_deleted"), "success");
		},
		onError: () => {
			onToast(t("failed_to_delete_address"), "error");
		}
	});
	const cardAdd3DS = require_use_portal_card_add_3ds_flow.usePortalCardAdd3DSFlow({
		payApi,
		t: (key) => t(key),
		onApproved: async () => {
			await queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.paymentMethods.all });
			setIsAddCardOpen(false);
			onToast(t("payment_method_added"), "success");
		},
		onFailed: (message) => {
			setSaveCardError(message);
		},
		onCanceled: () => {}
	});
	const addCreditCardMutation = (0, _tanstack_react_query.useMutation)({
		mutationFn: (data) => payApi.createPaymentMethod({
			payment_method: {
				type: "card",
				token: data.payment_method.token,
				token_provider: "vgs",
				exp_month: data.payment_method.exp_month,
				exp_year: data.payment_method.exp_year,
				cvv_token: data.payment_method.cvv_token,
				card_holder: data.payment_method.card_holder,
				default: data.set_as_default,
				...data.payment_method.bin ? { bin: data.payment_method.bin } : {},
				...data.payment_method.last_four ? { last_four: data.payment_method.last_four } : {},
				...data.payment_method.card_network ? { card_network: data.payment_method.card_network } : {}
			},
			billing_address_id: data.billing_address_id,
			browser_info: require_use_portal_card_add_3ds_flow.getBrowserInfo()
		}),
		onSuccess: buildProfileCardAddSuccess({
			begin: cardAdd3DS.begin,
			onCreated: () => {
				queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.paymentMethods.all });
				setIsAddCardOpen(false);
				onToast(t("payment_method_added"), "success");
			}
		}),
		onError: () => {
			onToast(t("failed_to_add_payment_method"), "error");
		}
	});
	const addresses = addressesData ?? [];
	const paymentMethods = paymentMethodsData ?? [];
	const adaptedLanguages = (languagesData?.languages ?? []).map((l, i) => ({
		id: i,
		name: l.name,
		iso: l.code
	}));
	const countries = countriesData?.countries;
	const countryOptions = (0, react.useMemo)(() => [...countries ?? []].map((c) => ({
		iso: c.code,
		name: c.name
	})).sort((a, b) => a.name.localeCompare(b.name)), [countries]);
	const statesByCountry = (0, react.useMemo)(() => {
		const map = /* @__PURE__ */ new Map();
		for (const c of countries ?? []) map.set(c.code, c.states.map((s) => ({
			name: s.name,
			isoCode: s.code
		})));
		return map;
	}, [countries]);
	const fetchStatesFromCountries = (0, react.useCallback)((countryCode) => Promise.resolve(statesByCountry.get(countryCode) ?? []), [statesByCountry]);
	const [isInfoDialogOpen, setIsInfoDialogOpen] = (0, react.useState)(false);
	const [addressDialog, setAddressDialog] = (0, react.useState)({
		open: false,
		selected: null
	});
	const [deletingAddress, setDeletingAddress] = (0, react.useState)(null);
	const [isAddCardOpen, setIsAddCardOpen] = (0, react.useState)(false);
	const [saveCardError, setSaveCardError] = (0, react.useState)(null);
	const [editPaymentMethod, setEditPaymentMethod] = (0, react.useState)(null);
	const userInfoLanguage = (0, react.useMemo)(() => {
		return adaptedLanguages.find((l) => l.iso === accountData?.fluid_pay_account.language_iso)?.name ?? "";
	}, [adaptedLanguages, accountData]);
	const derivedLastName = (0, react.useMemo)(() => {
		if (!accountData) return "";
		const { first_name, full_name } = accountData.customer;
		return deriveLastName(first_name, full_name);
	}, [accountData]);
	const userInfoForm = require_src.useZodForm((0, react.useMemo)(() => zod.z.object({
		first_name: zod.z.string().min(1, t("first_name_is_required")),
		last_name: zod.z.string().min(1, t("last_name_is_required")),
		phone_number: zod.z.string().optional(),
		language: zod.z.string().min(1, t("language_is_required")),
		bio: zod.z.string().optional()
	}), [t]), { defaultValues: {
		first_name: accountData?.customer.first_name ?? "",
		last_name: derivedLastName,
		phone_number: accountData?.customer.phone ?? "",
		language: userInfoLanguage,
		bio: accountRep?.bio ?? ""
	} });
	const handleOpenInfoDialog = (0, react.useCallback)(() => {
		userInfoForm.reset({
			first_name: accountData?.customer.first_name ?? "",
			last_name: derivedLastName,
			phone_number: accountData?.customer.phone ?? "",
			language: userInfoLanguage,
			bio: accountRep?.bio ?? ""
		});
		setIsInfoDialogOpen(true);
	}, [
		accountData,
		accountRep,
		derivedLastName,
		userInfoLanguage,
		userInfoForm
	]);
	const onSubmitUserInfo = userInfoForm.handleSubmit(async (data) => {
		try {
			await updateCustomerMutation.mutateAsync(data);
			setIsInfoDialogOpen(false);
		} catch {}
	});
	const socialLinks = (0, react.useMemo)(() => {
		const src = accountRep?.social_links ?? {};
		const result = {};
		for (const [key, field] of Object.entries(SOCIAL_KEY_TO_FIELD)) {
			if (!field) continue;
			const v = src[field];
			if (typeof v === "string" && v.length > 0) result[key] = v;
		}
		return result;
	}, [accountRep]);
	const handleCopyMySiteLink = (0, react.useCallback)(async () => {
		if (!mySiteUrl) return;
		try {
			await navigator.clipboard.writeText(mySiteUrl);
			onToast(t("mysite_link_copied"), "success");
		} catch {
			onToast(t("failed_to_copy_link"), "error");
		}
	}, [
		mySiteUrl,
		onToast,
		t
	]);
	const [isEditMySiteLinkOpen, setIsEditMySiteLinkOpen] = (0, react.useState)(false);
	const [mySiteSlugDraft, setMySiteSlugDraft] = (0, react.useState)("");
	const handleOpenEditMySiteLink = (0, react.useCallback)(() => {
		setMySiteSlugDraft(mySiteCurrentSlug);
		setIsEditMySiteLinkOpen(true);
	}, [mySiteCurrentSlug]);
	const handleSubmitMySiteLink = (0, react.useCallback)(async () => {
		const trimmed = mySiteSlugDraft.trim();
		if (!trimmed) {
			onToast(t("mysite_link_empty"), "error");
			return;
		}
		if (trimmed === mySiteCurrentSlug) {
			setIsEditMySiteLinkOpen(false);
			return;
		}
		try {
			await updateMySiteSettingsMutation.mutateAsync({ slug: trimmed });
			onToast(t("mysite_link_updated"), "success");
			setIsEditMySiteLinkOpen(false);
		} catch {
			onToast(t("failed_to_update_mysite_link"), "error");
		}
	}, [
		mySiteSlugDraft,
		mySiteCurrentSlug,
		updateMySiteSettingsMutation,
		onToast,
		t
	]);
	const [editingSocial, setEditingSocial] = (0, react.useState)(null);
	const [socialDraft, setSocialDraft] = (0, react.useState)("");
	const handleConnectSocial = (0, react.useCallback)((key) => {
		const field = SOCIAL_KEY_TO_FIELD[key];
		if (!field) {
			onToast(t("platform_not_editable"), "warning");
			return;
		}
		setSocialDraft(accountRep?.social_links?.[field] ?? "");
		setEditingSocial(key);
	}, [
		accountRep,
		onToast,
		t
	]);
	const updateSocialMutation = (0, _tanstack_react_query.useMutation)({
		mutationFn: async ({ field, value }) => {
			const current = accountRep?.social_links ?? {};
			await accountApi.updateAccount({ account: { social_links: {
				...current,
				[field]: value
			} } });
		},
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: require_query_keys.accountKeys.all });
			onToast(t("social_link_updated"), "success");
		},
		onError: () => {
			onToast(t("failed_to_update_social_link"), "error");
		}
	});
	const handleSubmitSocial = (0, react.useCallback)(async () => {
		if (!editingSocial) return;
		const field = SOCIAL_KEY_TO_FIELD[editingSocial];
		if (!field) return;
		await updateSocialMutation.mutateAsync({
			field,
			value: socialDraft.trim()
		});
		setEditingSocial(null);
	}, [
		editingSocial,
		socialDraft,
		updateSocialMutation
	]);
	if (isAccountError && !isLoadingAccount) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
		className: "px-4 py-8 sm:px-9",
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
			className: "text-muted-foreground text-center text-sm",
			children: t("unable_to_load_account")
		})
	});
	if (isLoadingAccount || !accountData || !accountRep) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
		className: "px-4 pt-4 sm:px-9 md:pt-8",
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
			className: "space-y-4",
			children: [
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-16 animate-pulse rounded" }),
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-32 animate-pulse rounded" }),
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-32 animate-pulse rounded" })
			]
		})
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_use_portal_card_add_3ds_flow.FluidPayCoreProvider, {
		api: fluidPayShim,
		children: [
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfileLayout, {
				account: accountRep,
				pointsBalance: rewardPointsEnabled ? pointsLedgerData?.points_ledgers?.[0]?.total_balance ?? 0 : void 0,
				pointsLedger: adaptedPointsLedger,
				pointsLabel,
				rewardsEnabled: rewardPointsEnabled,
				addresses,
				paymentMethods,
				mySiteDisplayUrl,
				socialLinks,
				onEditPersonalInfo: handleOpenInfoDialog,
				onAddAddress: () => setAddressDialog({
					open: true,
					selected: null
				}),
				onEditAddress: (address) => setAddressDialog({
					open: true,
					selected: address
				}),
				onDeleteAddress: (address) => setDeletingAddress(address),
				onAddPaymentMethod: () => {
					setSaveCardError(null);
					setIsAddCardOpen(true);
				},
				onEditPaymentMethod: (pm) => setEditPaymentMethod(pm),
				onCopyMySiteLink: handleCopyMySiteLink,
				onEditMySiteLink: handleOpenEditMySiteLink,
				onConnectSocial: handleConnectSocial
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_portal_card_add_3ds_flow.UserInfoDialog, {
				control: userInfoForm.control,
				isOpen: isInfoDialogOpen,
				onSubmit: onSubmitUserInfo,
				handleClose: () => setIsInfoDialogOpen(false),
				languageOptions: adaptedLanguages.map((l) => ({
					name: l.name,
					value: l.name
				})),
				errorMsg: void 0,
				isSubmitting: updateCustomerMutation.isPending,
				email: accountRep.email ?? ""
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_portal_card_add_3ds_flow.AddressFormDialog, {
				isOpen: addressDialog.open,
				onClose: () => setAddressDialog({
					open: false,
					selected: null
				}),
				selectedAddress: addressDialog.selected,
				defaultCountry: addresses.find((a) => a.default)?.country_code ?? countryIso,
				languageIso: locale,
				t: (key) => t(key),
				onSubmit: async (formData) => {
					if (addressDialog.selected) await updateAddressMutation.mutateAsync({
						addressId: addressDialog.selected.id,
						body: formData
					});
					else await createAddressMutation.mutateAsync(formData);
					setAddressDialog({
						open: false,
						selected: null
					});
				},
				isSubmitting: createAddressMutation.isPending || updateAddressMutation.isPending,
				onDelete: addressDialog.selected && !addressDialog.selected.default ? async () => {
					if (!addressDialog.selected) return;
					try {
						await deleteAddressMutation.mutateAsync(addressDialog.selected.id);
						setAddressDialog({
							open: false,
							selected: null
						});
					} catch {}
				} : void 0,
				isDeleting: deleteAddressMutation.isPending,
				countries: countryOptions,
				fetchStates: fetchStatesFromCountries,
				renderAddressAutocomplete: ({ control, setValue, countryCode, stateOptions }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_portal_card_add_3ds_flow.AddressAutocompleteInput, {
					control,
					setValue,
					countryIso: countryCode,
					addressLineField: "address1",
					cityField: "city",
					stateField: "state",
					postalCodeField: "postal_code",
					stateOptions
				})
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_portal_card_add_3ds_flow.ConfirmActionDialog, {
				title: t("delete_address"),
				description: t("delete_address_message"),
				openDialog: deletingAddress !== null,
				setOpenDialog: (open) => {
					if (!open) setDeletingAddress(null);
				},
				onAction: async () => {
					if (!deletingAddress) return;
					try {
						await deleteAddressMutation.mutateAsync(deletingAddress.id);
						setDeletingAddress(null);
					} catch {}
				},
				isLoading: deleteAddressMutation.isPending,
				actionText: t("delete")
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_portal_card_add_3ds_flow.CreditCardFormDialog, {
				isOpen: isAddCardOpen,
				onClose: () => {
					if (cardAdd3DS.isActive) return;
					setSaveCardError(null);
					setIsAddCardOpen(false);
				},
				error: saveCardError ?? void 0,
				t: (key) => t(key),
				onSubmit: async (data) => {
					setSaveCardError(null);
					try {
						await addCreditCardMutation.mutateAsync(data);
					} catch {}
				},
				isSubmitting: addCreditCardMutation.isPending,
				jwt: "",
				savedAddresses: addresses,
				defaultBillingAddressId: addresses.find((a) => a.default)?.id,
				renderAddressFormDialog: ({ isOpen, onClose, onAddressCreated }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_portal_card_add_3ds_flow.AddressFormDialog, {
					isOpen,
					onClose,
					selectedAddress: null,
					onSubmit: async (data) => {
						try {
							const { address } = await createAddressMutation.mutateAsync(data);
							onAddressCreated(mapToFluidPayAddress(address));
						} catch {}
					},
					isSubmitting: createAddressMutation.isPending,
					countries: countryOptions,
					fetchStates: fetchStatesFromCountries,
					languageIso: locale,
					t: (key) => t(key),
					renderAddressAutocomplete: ({ control, setValue, countryCode, stateOptions }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_portal_card_add_3ds_flow.AddressAutocompleteInput, {
						control,
						setValue,
						countryIso: countryCode,
						addressLineField: "address1",
						cityField: "city",
						stateField: "state",
						postalCodeField: "postal_code",
						stateOptions
					})
				})
			}),
			cardAdd3DS.modal,
			editPaymentMethod && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_portal_card_add_3ds_flow.EditPaymentMethodDialog, {
				isOpen: true,
				onClose: () => setEditPaymentMethod(null),
				paymentMethod: editPaymentMethod,
				billingAddress: editPaymentMethod.billing_address,
				countries: countryOptions,
				onSubmit: (data) => {
					updatePaymentMethodMutation.mutate({
						paymentMethodId: editPaymentMethod.id,
						data
					}, { onSuccess: () => setEditPaymentMethod(null) });
				},
				isSubmitting: updatePaymentMethodMutation.isPending,
				onDelete: () => {
					deletePaymentMethodMutation.mutate(editPaymentMethod.id, { onSuccess: () => setEditPaymentMethod(null) });
				},
				isDeleting: deletePaymentMethodMutation.isPending
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Dialog, {
				open: isEditMySiteLinkOpen,
				onOpenChange: (open) => {
					if (!open && updateMySiteSettingsMutation.isPending) return;
					setIsEditMySiteLinkOpen(open);
				},
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogContent, {
					className: "max-w-sm md:max-w-md",
					children: [
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, { children: t("edit_link") }) }),
						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
							className: "space-y-2 pt-2",
							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
								htmlFor: "mysite-slug",
								className: "mb-1.5 block text-sm font-medium",
								children: t("your_mysite_link")
							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
								className: "ring-border focus-within:ring-foreground/40 flex items-center gap-1 rounded-md bg-transparent px-3 py-2 ring-1 transition-all focus-within:ring-2",
								children: [mySiteUrlPrefix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
									className: "text-muted-foreground shrink-0 text-sm",
									children: mySiteUrlPrefix
								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
									id: "mysite-slug",
									value: mySiteSlugDraft,
									onChange: (e) => setMySiteSlugDraft(e.target.value),
									onKeyDown: (e) => {
										if (e.key === "Enter" && !updateMySiteSettingsMutation.isPending) {
											e.preventDefault();
											handleSubmitMySiteLink();
										}
									},
									className: "h-auto min-w-0 flex-1 border-0 p-0 shadow-none focus-visible:ring-0",
									autoFocus: true
								})]
							})]
						}),
						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
							type: "button",
							variant: "outline",
							onClick: () => setIsEditMySiteLinkOpen(false),
							disabled: updateMySiteSettingsMutation.isPending,
							children: t("cancel")
						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
							type: "button",
							onClick: () => {
								handleSubmitMySiteLink();
							},
							disabled: updateMySiteSettingsMutation.isPending,
							children: updateMySiteSettingsMutation.isPending ? t("saving") : t("save")
						})] })
					]
				})
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Dialog, {
				open: editingSocial !== null,
				onOpenChange: (open) => !open && setEditingSocial(null),
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogContent, {
					className: "max-w-sm md:max-w-md",
					children: [
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, { children: editingSocial ? t("edit_platform_link", { platform: SOCIAL_LABELS[editingSocial] ?? "" }) : t("edit_social_link") }) }),
						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
							className: "space-y-2 pt-2",
							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
								htmlFor: "social-handle",
								className: "mb-1.5 block text-sm font-medium",
								children: t("url")
							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
								id: "social-handle",
								value: socialDraft,
								onChange: (e) => setSocialDraft(e.target.value),
								placeholder: editingSocial ? SOCIAL_PLACEHOLDERS[editingSocial] : "",
								onKeyDown: (e) => {
									if (e.key === "Enter") {
										e.preventDefault();
										handleSubmitSocial();
									}
								},
								autoFocus: true
							})]
						}),
						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
							type: "button",
							variant: "outline",
							onClick: () => setEditingSocial(null),
							disabled: updateSocialMutation.isPending,
							children: t("cancel")
						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
							type: "button",
							onClick: () => {
								handleSubmitSocial();
							},
							disabled: updateSocialMutation.isPending,
							children: updateSocialMutation.isPending ? t("saving") : t("save")
						})] })
					]
				})
			})
		]
	});
}
//#endregion
//#region src/screens/ProfileScreen.tsx
function defaultToast(message, type) {
	require_src.fluidToast({
		title: message,
		type
	});
}
function ProfileScreen({ onToast, background, textColor, accentColor, padding, borderRadius, ...divProps }) {
	const { config } = require_FluidProvider.useFluidContext();
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_portal_card_add_3ds_flow.ProfileTranslationBridge, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfileScreenContent, {
		onToast: onToast ?? defaultToast,
		countryIso: config.countryIso ?? "US",
		divProps
	}) });
}
function ProfileScreenContent({ onToast, countryIso, divProps }) {
	const { t } = require_use_portal_card_add_3ds_flow.useProfileTranslation();
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderBreadcrumbs, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbList, {
		className: "text-lg",
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
			className: "font-semibold",
			children: t("breadcrumb")
		}) })
	}) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
		...divProps,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfileContentScreen, {
			onToast,
			countryIso
		})
	})] });
}
const profileScreenPropertySchema = {
	widgetType: "ProfileScreen",
	displayName: "Profile Screen",
	tabsConfig: [{
		id: "styling",
		label: "Styling"
	}],
	fields: []
};
//#endregion
Object.defineProperty(exports, "ProfileScreen", {
	enumerable: true,
	get: function() {
		return ProfileScreen;
	}
});
Object.defineProperty(exports, "profileScreenPropertySchema", {
	enumerable: true,
	get: function() {
		return profileScreenPropertySchema;
	}
});

//# sourceMappingURL=ProfileScreen-BQtmpNJ1.cjs.map