@fluid-app/portal-sdk 0.1.164 → 0.1.165

package/dist/{ProfileScreen-CiQy6_NM.mjs → ProfileScreen-BuIxKbXC.mjs}

@@ -9,7 +9,7 @@ import { n as accountKeys, r as payKeys, t as useAccount } from "./use-account-B
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Pencil } from "lucide-react";
+import { Info, Pencil } from "lucide-react";
 import { Controller, useController, useWatch } from "react-hook-form";
 import { z } from "zod";
 //#region ../../profile/core/src/context.ts
@@ -522,7 +522,7 @@ function FormTextField$1({ control, name, label, containerClassName, ...props })
 		children: [
 			label && /* @__PURE__ */ jsx(Label, {
 				htmlFor: name,
-				className: "mb-1.5 block text-sm font-medium text-gray-700",
+				className: "mb-1.5 block text-sm font-medium",
 				children: label
 			}),
 			/* @__PURE__ */ jsx(Input, {
@@ -549,7 +549,7 @@ function FormSelectField$1({ control, name, label, options, placeholder, contain
 		children: [
 			label && /* @__PURE__ */ jsx(Label, {
 				htmlFor: name,
-				className: "block text-sm font-medium text-gray-700",
+				className: "block text-sm font-medium",
 				children: label
 			}),
 			/* @__PURE__ */ jsxs(Select, {
@@ -575,11 +575,46 @@ function FormSelectField$1({ control, name, label, options, placeholder, contain
 }
 //#endregion
 //#region ../../profile/ui/src/components/user-info-dialog.tsx
-function UserInfoDialog({ control, isOpen, onSubmit, handleClose, languageOptions, errorMsg, isSubmitting }) {
+function UserInfoDialog({ control, isOpen, onSubmit, handleClose, languageOptions, errorMsg, isSubmitting, email, onChangeEmail, isChangingEmail, pendingEmail }) {
 	const { t } = useProfileUI();
+	const [isEditingEmail, setIsEditingEmail] = useState(false);
+	const [newEmail, setNewEmail] = useState("");
+	const [emailError, setEmailError] = useState(void 0);
+	const handleEmailSubmit = async () => {
+		setEmailError(void 0);
+		const trimmed = newEmail.trim();
+		if (!trimmed) {
+			setEmailError("Please enter a new email address");
+			return;
+		}
+		if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) {
+			setEmailError("Please enter a valid email address");
+			return;
+		}
+		if (email && trimmed.toLowerCase() === email.toLowerCase()) {
+			setEmailError("New email must be different from your current email");
+			return;
+		}
+		try {
+			await onChangeEmail?.(trimmed);
+			setIsEditingEmail(false);
+			setNewEmail("");
+		} catch (err) {
+			setEmailError(err instanceof Error ? err.message : "Failed to initiate email change");
+		}
+	};
+	const handleCancelEmailEdit = () => {
+		setIsEditingEmail(false);
+		setNewEmail("");
+		setEmailError(void 0);
+	};
+	const handleDialogClose = () => {
+		handleCancelEmailEdit();
+		handleClose();
+	};
 	return /* @__PURE__ */ jsx(Dialog, {
 		open: isOpen,
-		onOpenChange: (open) => !open && handleClose(),
+		onOpenChange: (open) => !open && handleDialogClose(),
 		children: /* @__PURE__ */ jsxs(DialogContent, {
 			className: "max-w-sm rounded md:max-w-lg",
 			children: [
@@ -588,7 +623,7 @@ function UserInfoDialog({ control, isOpen, onSubmit, handleClose, languageOption
 					children: t("edit_profile")
 				}) }),
 				/* @__PURE__ */ jsxs("div", {
-					className: "space-y-0",
+					className: "space-y-4",
 					children: [
 						/* @__PURE__ */ jsx(FormTextField$1, {
 							control,
@@ -615,6 +650,97 @@ function UserInfoDialog({ control, isOpen, onSubmit, handleClose, languageOption
 						})
 					]
 				}),
+				email && /* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-foreground text-sm font-medium",
+						children: t("email") || "Email"
+					}), isEditingEmail ? /* @__PURE__ */ jsxs("div", {
+						className: "space-y-2",
+						children: [
+							/* @__PURE__ */ jsx(Input, {
+								type: "email",
+								placeholder: "Enter your new email...",
+								value: newEmail,
+								onChange: (e) => {
+									setNewEmail(e.target.value);
+									setEmailError(void 0);
+								},
+								onKeyDown: (e) => {
+									if (e.key === "Enter") {
+										e.preventDefault();
+										handleEmailSubmit();
+									}
+									if (e.key === "Escape") handleCancelEmailEdit();
+								},
+								"aria-invalid": !!emailError || void 0,
+								autoFocus: true
+							}),
+							emailError && /* @__PURE__ */ jsx("p", {
+								className: "text-xs text-red-500",
+								children: emailError
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "bg-muted flex items-start gap-2.5 rounded-md px-3 py-2.5",
+								children: [/* @__PURE__ */ jsx(Info, { className: "text-primary mt-0.5 h-4 w-4 shrink-0" }), /* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground text-xs",
+									children: "We'll send a verification link to your new email. Click it to complete the change."
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex gap-2",
+								children: [/* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "outline",
+									size: "sm",
+									onClick: handleCancelEmailEdit,
+									className: "cursor-pointer",
+									children: "Cancel"
+								}), /* @__PURE__ */ jsxs(Button, {
+									type: "button",
+									size: "sm",
+									onClick: handleEmailSubmit,
+									disabled: !newEmail.trim() || isChangingEmail,
+									className: "cursor-pointer",
+									children: [isChangingEmail && /* @__PURE__ */ jsx("div", { className: "mr-2 h-3.5 w-3.5 animate-spin rounded-full border-2 border-current/30 border-t-current" }), isChangingEmail ? "Sending..." : "Send verification"]
+								})]
+							})
+						]
+					}) : pendingEmail ? /* @__PURE__ */ jsxs("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "bg-muted text-muted-foreground min-w-0 rounded-md px-3 py-2 text-sm",
+							children: email
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "bg-muted flex items-start gap-2.5 rounded-md px-3 py-2.5",
+							children: [/* @__PURE__ */ jsx(Info, { className: "text-primary mt-0.5 h-4 w-4 shrink-0" }), /* @__PURE__ */ jsxs("p", {
+								className: "text-muted-foreground text-xs",
+								children: [
+									"Changing to",
+									" ",
+									/* @__PURE__ */ jsx("span", {
+										className: "text-foreground font-medium",
+										children: pendingEmail
+									}),
+									". Check your new email inbox and click the verification link to complete the change."
+								]
+							})]
+						})]
+					}) : /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "bg-muted text-muted-foreground min-w-0 flex-1 rounded-md px-3 py-2 text-sm",
+							children: email
+						}), onChangeEmail && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							onClick: () => setIsEditingEmail(true),
+							className: "shrink-0 cursor-pointer",
+							children: "Change"
+						})]
+					})]
+				}),
 				errorMsg && /* @__PURE__ */ jsx("p", {
 					className: "text-sm text-red-500",
 					children: errorMsg
@@ -623,13 +749,11 @@ function UserInfoDialog({ control, isOpen, onSubmit, handleClose, languageOption
 					className: "flex flex-row items-center justify-end",
 					children: /* @__PURE__ */ jsx("div", {
 						className: "flex-1 text-right",
-						children: /* @__PURE__ */ jsx(DialogClose, {
-							asChild: true,
-							children: /* @__PURE__ */ jsxs(Button, {
-								type: "button",
-								onClick: onSubmit,
-								children: [isSubmitting && /* @__PURE__ */ jsx("div", { className: "mr-3 h-5 w-5 animate-spin rounded-full border-4 border-t-4 border-white border-t-transparent" }), isSubmitting ? t("saving") : t("save_changes")]
-							})
+						children: /* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							onClick: onSubmit,
+							className: "cursor-pointer",
+							children: [isSubmitting && /* @__PURE__ */ jsx("div", { className: "mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current/30 border-t-current" }), isSubmitting ? t("saving") : t("save_changes")]
 						})
 					})
 				})
@@ -647,13 +771,13 @@ function createUserInfoSchema(messages) {
 		language: z.string().min(1, { message: messages.languageRequired })
 	});
 }
-function CustomerInfo({ customerAccount, languages, onUpdateCustomer, isUpdating = false }) {
+function CustomerInfo({ customerAccount, languages, onUpdateCustomer, isUpdating = false, onChangeEmail, isChangingEmail = false, pendingEmailChange, onCancelEmailChange, pendingEmail }) {
 	const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
 	const [updateError, setUpdateError] = useState(void 0);
 	const { t } = useProfileUI();
 	const { first_name, full_name } = customerAccount.customer;
 	const derivedLastName = full_name.startsWith(first_name) ? full_name.slice(first_name.length).trim() : "";
-	const userInitial = first_name ? first_name.charAt(0).toUpperCase() : "";
+	const userInitial = first_name ? first_name.charAt(0).toUpperCase() : customerAccount.customer.email?.charAt(0).toUpperCase() ?? "";
 	const customerLanguage = languages?.find((language) => language.iso === customerAccount.fluid_pay_account.language_iso)?.name;
 	const languageOptions = languages?.map((language) => ({
 		name: language.name,
@@ -691,34 +815,83 @@ function CustomerInfo({ customerAccount, languages, onUpdateCustomer, isUpdating
 			setUpdateError("Error updating profile. Please verify your information and try again.");
 		}
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
-		className: "mb-6 flex flex-row items-center justify-between space-x-2 border-b border-gray-300 pb-4",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-row items-center space-x-2",
-			children: [/* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { children: userInitial }) }), /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col",
-				children: [/* @__PURE__ */ jsx("p", {
-					className: "text-sm font-medium",
-					children: customerAccount.customer.full_name
-				}), /* @__PURE__ */ jsx("p", {
-					className: "text-sm text-gray-500",
-					children: customerAccount.customer.email
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "mb-6 flex flex-row items-center justify-between space-x-2 border-b border-gray-300 pb-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-row items-center space-x-2",
+				children: [/* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { children: userInitial }) }), /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col",
+					children: first_name ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-medium",
+						children: customerAccount.customer.full_name
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-gray-500",
+						children: customerAccount.customer.email
+					})] }) : /* @__PURE__ */ jsx("p", {
+						className: "text-sm font-medium",
+						children: customerAccount.customer.email
+					})
 				})]
+			}), /* @__PURE__ */ jsx("button", {
+				className: "cursor-pointer rounded-md border border-gray-300 p-1 hover:bg-gray-50 disabled:opacity-50",
+				onClick: handleOpenEditDialog,
+				children: /* @__PURE__ */ jsx(Pencil, { className: "h-2.5 w-2.5 text-gray-400" })
 			})]
-		}), /* @__PURE__ */ jsx("button", {
-			className: "cursor-pointer rounded-md border border-gray-300 p-1 hover:bg-gray-50 disabled:opacity-50",
-			onClick: handleOpenEditDialog,
-			children: /* @__PURE__ */ jsx(Pencil, { className: "h-2.5 w-2.5 text-gray-400" })
-		})]
-	}), /* @__PURE__ */ jsx(UserInfoDialog, {
-		control,
-		isOpen: isEditDialogOpen,
-		onSubmit: onSubmitUserInfo,
-		handleClose: handleCloseEditDialog,
-		languageOptions,
-		errorMsg: updateError,
-		isSubmitting: isUpdating
-	})] });
+		}),
+		pendingEmailChange && /* @__PURE__ */ jsxs("div", {
+			className: "bg-muted mb-6 flex items-start gap-2.5 rounded-md px-3 py-3",
+			children: [/* @__PURE__ */ jsx(Info, { className: "text-primary mt-0.5 h-4 w-4 shrink-0" }), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1 space-y-2",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-foreground text-sm font-medium",
+						children: "Email change pending"
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						className: "text-muted-foreground text-xs",
+						children: [
+							"Your email is being changed to",
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "text-foreground font-medium",
+								children: pendingEmailChange.newEmail
+							}),
+							".",
+							" ",
+							pendingEmailChange.newEmailConfirmed ? "Your new email has been verified." : "Check your new inbox and click the verification link to complete the change.",
+							" ",
+							(() => {
+								const diff = new Date(pendingEmailChange.expiresAt).getTime() - Date.now();
+								if (diff <= 0) return "This request has expired.";
+								const days = Math.ceil(diff / (1e3 * 60 * 60 * 24));
+								return `This request expires in ${days === 1 ? "1 day" : `${days} days`}.`;
+							})()
+						]
+					}),
+					onCancelEmailChange && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onCancelEmailChange,
+						className: "bg-primary text-primary-foreground hover:bg-primary/90 cursor-pointer rounded-md px-3 py-1.5 text-xs font-medium",
+						children: "Cancel change"
+					})
+				]
+			})]
+		}),
+		/* @__PURE__ */ jsx(UserInfoDialog, {
+			control,
+			isOpen: isEditDialogOpen,
+			onSubmit: onSubmitUserInfo,
+			handleClose: handleCloseEditDialog,
+			languageOptions,
+			errorMsg: updateError,
+			isSubmitting: isUpdating,
+			email: customerAccount.customer.email,
+			onChangeEmail,
+			isChangingEmail,
+			pendingEmail
+		})
+	] });
 }
 //#endregion
 //#region ../../profile/ui/src/components/address-dropdown.tsx
@@ -1491,35 +1664,46 @@ function PaymentMethods({ paymentMethods, isLoading = false, onDeletePaymentMeth
 }
 //#endregion
 //#region ../../profile/ui/src/components/profile.tsx
-function Profile({ customerAccount, languages, onUpdateCustomer, isUpdatingCustomer, rewardsPointsEnabled = false, pointsLedger, isLoadingPointsLedger, addresses, isLoadingAddresses, onDeleteAddress, isDeletingAddress, renderAddressDialog, paymentMethods, isLoadingPaymentMethods, onDeletePaymentMethod, isDeletingPaymentMethod, onUpdatePaymentMethod, isUpdatingPaymentMethod, getBillingAddress, countries, renderCreditCardDialog }) {
+function Profile({ customerAccount, languages, onUpdateCustomer, isUpdatingCustomer, onChangeEmail, isChangingEmail, pendingEmailChange, onCancelEmailChange, pendingEmail, rewardsPointsEnabled = false, pointsLedger, isLoadingPointsLedger, addresses, isLoadingAddresses, onDeleteAddress, isDeletingAddress, renderAddressDialog, paymentMethods, isLoadingPaymentMethods, onDeletePaymentMethod, isDeletingPaymentMethod, onUpdatePaymentMethod, isUpdatingPaymentMethod, getBillingAddress, countries, renderCreditCardDialog }) {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(CustomerInfo, {
 			customerAccount,
 			languages,
 			onUpdateCustomer,
-			isUpdating: isUpdatingCustomer
+			isUpdating: isUpdatingCustomer,
+			onChangeEmail,
+			isChangingEmail,
+			pendingEmailChange,
+			onCancelEmailChange,
+			pendingEmail
 		}),
 		rewardsPointsEnabled && /* @__PURE__ */ jsx(CustomerPointsLedger, {
 			pointsLedger: pointsLedger ?? [],
 			isLoading: isLoadingPointsLedger
 		}),
-		/* @__PURE__ */ jsx(Addresses, {
-			addresses,
-			isLoading: isLoadingAddresses,
-			onDeleteAddress,
-			isDeletingAddress,
-			renderAddressDialog
+		/* @__PURE__ */ jsx("div", {
+			id: "profile-addresses",
+			children: /* @__PURE__ */ jsx(Addresses, {
+				addresses,
+				isLoading: isLoadingAddresses,
+				onDeleteAddress,
+				isDeletingAddress,
+				renderAddressDialog
+			})
 		}),
-		/* @__PURE__ */ jsx(PaymentMethods, {
-			paymentMethods,
-			isLoading: isLoadingPaymentMethods,
-			onDeletePaymentMethod,
-			isDeletingPaymentMethod,
-			onUpdatePaymentMethod,
-			isUpdatingPaymentMethod,
-			getBillingAddress,
-			countries,
-			renderCreditCardDialog
+		/* @__PURE__ */ jsx("div", {
+			id: "profile-payment-methods",
+			children: /* @__PURE__ */ jsx(PaymentMethods, {
+				paymentMethods,
+				isLoading: isLoadingPaymentMethods,
+				onDeletePaymentMethod,
+				isDeletingPaymentMethod,
+				onUpdatePaymentMethod,
+				isUpdatingPaymentMethod,
+				getBillingAddress,
+				countries,
+				renderCreditCardDialog
+			})
 		})
 	] });
 }
@@ -2802,4 +2986,4 @@ const profileScreenPropertySchema = {
 //#endregion
 export { ProfileScreen_exports as n, profileScreenPropertySchema as r, ProfileScreen as t };
 
-//# sourceMappingURL=ProfileScreen-CiQy6_NM.mjs.map
+//# sourceMappingURL=ProfileScreen-BuIxKbXC.mjs.map