@fluid-app/portal-sdk 0.1.169 → 0.1.170

package/dist/{ProductsScreen-FI28Unh9.mjs → ProductsScreen-VT0vIB3p.mjs}

@@ -3,6 +3,7 @@ import "./account-api-context-R4VVlZdv.mjs";
 import "./store-api-context-DViwxyG4.mjs";
 import "./src-CGu9qU9G.mjs";
 import "./ScreenHeaderContext-DbUsyd_7.mjs";
+import "./AppNavigationContext-CAnb2Qxs.mjs";
 import "./dist-BjehZaTg.mjs";
 import "./SearchSort--qXK5na1.mjs";
 import "./dist-Bo6ZG9XC.mjs";

package/dist/{ProfileScreen-BfPZOdUy.cjs → ProfileScreen-Bym1xay5.cjs}

@@ -1,5 +1,5 @@
 require("./chunk-9hOWP6kD.cjs");
-require("./FluidProvider-MFYqEzPc.cjs");
+require("./FluidProvider-n4cvVkGt.cjs");
 require("./account-api-context-pr_NLnGy.cjs");
 require("./store-api-context-Cg-VHWmM.cjs");
 require("./mysite-api-context-DTgTIIUZ.cjs");
@@ -38,6 +38,6 @@ require("./TableWidget-UIY_vWJB.cjs");
 require("./ToDoWidget-BNnAkM0Q.cjs");
 require("./VideoWidget-BZITMub2.cjs");
 require("./ScreenHeaderContext-DfHdr3I3.cjs");
-const require_ProfileScreen = require("./ProfileScreen-DzdtuSBv.cjs");
+const require_ProfileScreen = require("./ProfileScreen-PlDpc8RU.cjs");
 exports.ProfileScreen = require_ProfileScreen.ProfileScreen;
 exports.profileScreenPropertySchema = require_ProfileScreen.profileScreenPropertySchema;

package/dist/{ProfileScreen-BtukJFIm.mjs → ProfileScreen-CD2lmt5S.mjs}

@@ -1,5 +1,5 @@
 import { r as __exportAll } from "./es-C0sscSvf.mjs";
-import { B as usePayApi, n as useFluidContext, z as useLanguagesApi } from "./FluidProvider-4wg1xf_l.mjs";
+import { B as usePayApi, n as useFluidContext, z as useLanguagesApi } from "./FluidProvider-DrGFcRlB.mjs";
 import { n as useAccountApi } from "./account-api-context-R4VVlZdv.mjs";
 import { n as useCountriesApi } from "./countries-api-context-DScC_39w.mjs";
 import { t as parseApiErrors } from "./parse-api-errors-XxGAprV3.mjs";
@@ -1072,12 +1072,27 @@ function Addresses({ addresses, isLoading = false, onCreateAddress, onDeleteAddr
 }
 //#endregion
 //#region ../../profile/ui/src/components/payment-method-dropdown.tsx
+const PAYMENT_ICON_BASE = "https://assets.fluid.app/images/payment_icons";
+const GENERIC_PAYMENT_ICON = `${PAYMENT_ICON_BASE}/generic.svg`;
+function brandIconUrl(brand) {
+	if (!brand) return GENERIC_PAYMENT_ICON;
+	return `${PAYMENT_ICON_BASE}/${brand.toLowerCase().replace(/\s+/g, "_")}.svg`;
+}
+function PaymentIcon({ logoUrl, brand, alt }) {
+	const computedSrc = logoUrl || brandIconUrl(brand);
+	const [hasError, setHasError] = useState(false);
+	return /* @__PURE__ */ jsx("img", {
+		src: hasError ? GENERIC_PAYMENT_ICON : computedSrc,
+		alt,
+		width: 40,
+		height: 24,
+		className: "object-contain",
+		onError: () => setHasError(true)
+	});
+}
 function getCardDisplayName(paymentMethod) {
-	if (paymentMethod.payment_type === "Credit Card") {
-		const brand = paymentMethod.details.card_type;
-		const lastFour = paymentMethod.details.last_four;
-		return `${brand ?? "Card"} •••• ${lastFour ?? "****"}`;
-	}
+	const lastFour = paymentMethod.details.last_four;
+	if (lastFour != null || paymentMethod.payment_type === "Credit Card") return `${paymentMethod.details.card_type || "Card"} •••• ${lastFour || "••••"}`;
 	return paymentMethod.payment_type;
 }
 function getCardExpiry(paymentMethod) {
@@ -1085,27 +1100,24 @@ function getCardExpiry(paymentMethod) {
 	if (exp_month != null && exp_year != null) return `Expires ${exp_month}/${exp_year}`;
 	return "";
 }
-function PaymentMethodDropdown({ title, displayPaymentMethod, paymentMethodList, onAddPaymentMethodClick, onEditPaymentMethod, onDeletePaymentMethod, accordionItemValue = "paymentMethods", addPaymentMethodLabel = "+ Add a payment method", showAddButton = true, borderStyle = "border-b border-gray-300 pb-4 mb-6", className = "", showActions = true, isLoading = false }) {
+function PaymentMethodDropdown({ title, displayPaymentMethod, paymentMethodList, onAddPaymentMethodClick, onEditPaymentMethod, onDeletePaymentMethod, accordionItemValue = "paymentMethods", addPaymentMethodLabel = "+ Add a payment method", showAddButton = true, borderStyle = "border-b border-border pb-4 mb-6", className = "", showActions = true, isLoading = false }) {
 	const [paymentsValue, setPaymentsValue] = useState("");
-	const { t } = useProfileUI();
 	const renderPaymentMethod = (paymentMethod) => /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-row items-center space-x-2",
-		children: [paymentMethod.details.logo_url && /* @__PURE__ */ jsx("div", {
-			className: "h-6 w-10 flex-shrink-0",
-			children: /* @__PURE__ */ jsx("img", {
-				src: paymentMethod.details.logo_url,
-				alt: paymentMethod.details.card_type ?? t("payment_method"),
-				width: 40,
-				height: 24,
-				className: "object-contain"
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex h-6 w-10 flex-shrink-0 items-center justify-center",
+			children: /* @__PURE__ */ jsx(PaymentIcon, {
+				logoUrl: paymentMethod.details.logo_url,
+				brand: paymentMethod.details.card_type,
+				alt: paymentMethod.details.card_type ?? "Payment Method"
 			})
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col",
 			children: [/* @__PURE__ */ jsx("div", {
-				className: "flex items-center text-sm font-medium text-gray-900",
+				className: "text-foreground flex items-center text-sm font-medium capitalize",
 				children: getCardDisplayName(paymentMethod)
 			}), getCardExpiry(paymentMethod) && /* @__PURE__ */ jsx("div", {
-				className: "text-sm text-gray-500",
+				className: "text-muted-foreground text-sm",
 				children: getCardExpiry(paymentMethod)
 			})]
 		})]
@@ -1125,7 +1137,7 @@ function PaymentMethodDropdown({ title, displayPaymentMethod, paymentMethodList,
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex flex-row items-center justify-between",
 						children: [/* @__PURE__ */ jsx("div", {
-							className: "mt-4 mb-1 text-sm text-gray-400",
+							className: "text-muted-foreground mt-4 mb-1 text-sm",
 							children: title
 						}), /* @__PURE__ */ jsx(AccordionTrigger, { className: "m-0 ml-2 flex h-auto min-h-0 w-auto py-0 hover:no-underline" })]
 					}),
@@ -1145,7 +1157,7 @@ function PaymentMethodDropdown({ title, displayPaymentMethod, paymentMethodList,
 						children: /* @__PURE__ */ jsx("div", {
 							className: "mt-2 flex flex-col justify-between space-y-4 px-0.5",
 							children: isLoading ? /* @__PURE__ */ jsx(Fragment$1, { children: [1, 2].map((i) => /* @__PURE__ */ jsx("div", {
-								className: "items-center rounded bg-gray-100 p-3",
+								className: "bg-muted items-center rounded p-3",
 								children: /* @__PURE__ */ jsxs("div", {
 									className: "flex flex-row items-center justify-between",
 									children: [/* @__PURE__ */ jsxs("div", {
@@ -1157,38 +1169,36 @@ function PaymentMethodDropdown({ title, displayPaymentMethod, paymentMethodList,
 									}), /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-6" })]
 								})
 							}, `skeleton-${i}`)) }) : paymentMethodList.map((paymentMethod, index) => /* @__PURE__ */ jsxs("div", {
-								className: cn("flex min-h-[48px] w-full flex-row items-center justify-between space-x-2 px-2", { "items-center border-b border-gray-300 p-3": paymentMethodList.length - 1 !== index }),
+								className: cn("flex min-h-[48px] w-full flex-row items-center justify-between space-x-2 px-2", { "border-border items-center border-b p-3": paymentMethodList.length - 1 !== index }),
 								children: [/* @__PURE__ */ jsxs("div", {
 									className: "flex flex-row items-center space-x-2",
-									children: [paymentMethod.details.logo_url && /* @__PURE__ */ jsx("div", {
-										className: "h-6 w-10 flex-shrink-0",
-										children: /* @__PURE__ */ jsx("img", {
-											src: paymentMethod.details.logo_url,
-											alt: paymentMethod.details.card_type ?? t("payment_method"),
-											width: 40,
-											height: 24,
-											className: "object-contain"
+									children: [/* @__PURE__ */ jsx("div", {
+										className: "flex h-6 w-10 flex-shrink-0 items-center justify-center",
+										children: /* @__PURE__ */ jsx(PaymentIcon, {
+											logoUrl: paymentMethod.details.logo_url,
+											brand: paymentMethod.details.card_type,
+											alt: paymentMethod.details.card_type ?? "Payment Method"
 										})
 									}), /* @__PURE__ */ jsxs("div", {
 										className: "flex flex-col",
 										children: [/* @__PURE__ */ jsx("div", {
-											className: "flex items-center text-sm font-medium text-gray-900",
-											children: `${paymentMethod.details.card_type ?? "Card"} •••• ${paymentMethod.details.last_four ?? "****"}`
-										}), /* @__PURE__ */ jsx("div", {
-											className: "text-sm text-gray-500",
-											children: `${t("card_expires")} ${paymentMethod.details.exp_month}/${paymentMethod.details.exp_year}`
+											className: "text-foreground flex items-center text-sm font-medium capitalize",
+											children: getCardDisplayName(paymentMethod)
+										}), getCardExpiry(paymentMethod) && /* @__PURE__ */ jsx("div", {
+											className: "text-muted-foreground text-sm",
+											children: getCardExpiry(paymentMethod)
 										})]
 									})]
 								}), /* @__PURE__ */ jsxs("div", {
 									className: "flex flex-row items-center space-x-2",
 									children: [paymentMethod.default && /* @__PURE__ */ jsx("p", {
-										className: "mt-1 w-fit rounded bg-gray-500 px-2 py-0.5 text-xs font-medium text-white",
-										children: t("default")
+										className: "bg-secondary text-secondary-foreground mt-1 w-fit rounded px-2 py-0.5 text-xs font-medium",
+										children: "Default"
 									}), showActions && /* @__PURE__ */ jsx(EllipsesDropdown, {
 										onDelete: () => onDeletePaymentMethod?.(paymentMethod),
-										deleteLabel: t("delete"),
+										deleteLabel: "Delete",
 										onEdit: () => onEditPaymentMethod?.(paymentMethod),
-										editLabel: t("edit")
+										editLabel: "Edit"
 									})]
 								})]
 							}, paymentMethod.id))
@@ -1197,7 +1207,7 @@ function PaymentMethodDropdown({ title, displayPaymentMethod, paymentMethodList,
 				]
 			})
 		}), showAddButton && /* @__PURE__ */ jsx("button", {
-			className: "mt-3 text-left text-sm text-gray-900",
+			className: "text-foreground mt-3 text-left text-sm",
 			onClick: onAddPaymentMethodClick,
 			children: addPaymentMethodLabel
 		})]
@@ -2618,6 +2628,10 @@ function mapAccountToCustomerAccount(raw) {
 		}
 	};
 }
+function composeAddressName(firstName, lastName) {
+	const combined = `${firstName} ${lastName}`.trim();
+	return combined.length > 0 ? combined : null;
+}
 function mapToFluidPayAddress(raw) {
 	return {
 		id: raw.id,
@@ -2626,7 +2640,7 @@ function mapToFluidPayAddress(raw) {
 		city: raw.city,
 		country_code: raw.country,
 		default: raw.default,
-		name: null,
+		name: raw.name,
 		postal_code: raw.zip,
 		state: raw.state,
 		subdivision_code: null
@@ -2644,7 +2658,15 @@ function mapToFluidPayPaymentMethod(raw) {
 			exp_month: raw.exp_month ?? void 0,
 			exp_year: raw.exp_year ?? void 0
 		},
-		billing_address: null,
+		billing_address: raw.billing_address ? {
+			name: raw.billing_address.name,
+			address1: raw.billing_address.street1,
+			address2: raw.billing_address.street2,
+			city: raw.billing_address.city,
+			state: raw.billing_address.state,
+			zip: raw.billing_address.zip,
+			country_code: raw.billing_address.country
+		} : null,
 		payment_type: raw.type,
 		source: "",
 		updated_at: raw.updated_at ?? ""
@@ -2676,9 +2698,9 @@ function createFluidPayShim(payApi) {
 			const response = await payApi.fetchVaultCredentials();
 			return {
 				vault: {
-					vault_id: response.vault.token ?? "",
+					vault_id: response.vault.vault_id,
 					environment: response.vault.environment,
-					route_id: "",
+					route_id: response.vault.route_id ?? "",
 					requires_3ds: false
 				},
 				meta: {
@@ -2767,13 +2789,28 @@ function ProfileContentScreen({ onToast, countryIso: _countryIso }) {
 		}
 	});
 	const updatePaymentMethodMutation = useMutation({
-		mutationFn: ({ paymentMethodId, data }) => payApi.updatePaymentMethod(paymentMethodId, { payment_method: { default: data.set_as_default } }),
+		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: payKeys.paymentMethods.all });
+		},
+		onError: () => {
+			onToast("Failed to update payment method", "error");
 		}
 	});
 	const createAddressMutation = useMutation({
 		mutationFn: (body) => payApi.createAddress({ address: {
+			name: composeAddressName(body.address.first_name, body.address.last_name),
 			street1: body.address.address1,
 			street2: body.address.address2,
 			city: body.address.city,
@@ -2791,6 +2828,7 @@ function ProfileContentScreen({ onToast, countryIso: _countryIso }) {
 	});
 	const updateAddressMutation = useMutation({
 		mutationFn: ({ addressId, body }) => payApi.updateAddress(addressId, { address: {
+			name: composeAddressName(body.address.first_name, body.address.last_name),
 			street1: body.address.address1,
 			street2: body.address.address2,
 			city: body.address.city,
@@ -2885,7 +2923,7 @@ function ProfileContentScreen({ onToast, countryIso: _countryIso }) {
 						});
 					},
 					isUpdatingPaymentMethod: updatePaymentMethodMutation.isPending,
-					getBillingAddress: () => null,
+					getBillingAddress: (paymentMethod) => paymentMethod.billing_address ?? null,
 					countries: countryOptions,
 					renderAddressDialog: ({ isOpen, onClose, selectedAddress }) => /* @__PURE__ */ jsx(AddressFormDialog, {
 						isOpen,
@@ -2986,4 +3024,4 @@ const profileScreenPropertySchema = {
 //#endregion
 export { ProfileScreen_exports as n, profileScreenPropertySchema as r, ProfileScreen as t };
 
-//# sourceMappingURL=ProfileScreen-BtukJFIm.mjs.map
+//# sourceMappingURL=ProfileScreen-CD2lmt5S.mjs.map