@fluid-app/portal-sdk 0.1.314 → 0.1.316

package/dist/{SubscriptionsScreen-CxXfngW6.mjs → SubscriptionsScreen-0_u-2cUx.mjs}

@@ -1,5 +1,5 @@
-import { at as subscriptions_reactivate, ct as subscriptions_skip, et as subscription_bundles_create, it as subscriptions_pause, lt as subscriptions_update, nt as subscriptions_cancel, ot as subscriptions_resume, rt as subscriptions_list, st as subscriptions_show, tt as subscription_bundles_list } from "./portal_tenant_content-CRrn7i-P.mjs";
-import { B as usePayApi, n as useFluidContext } from "./FluidProvider-DyMRpPnC.mjs";
+import { at as subscriptions_reactivate, ct as subscriptions_show, et as subscription_bundles_create, it as subscriptions_pause, lt as subscriptions_skip, nt as subscriptions_cancel, ot as subscriptions_resume, rt as subscriptions_list, st as subscriptions_retry, tt as subscription_bundles_list, ut as subscriptions_update } from "./portal_tenant_content-DKIMptZz.mjs";
+import { B as usePayApi, n as useFluidContext } from "./FluidProvider-DcnRMRD4.mjs";
 import { n as useCountriesApi } from "./countries-api-context-DScC_39w.mjs";
 import { n as usePortalTenantClient } from "./PortalTenantClientProvider-_VXOs0t4.mjs";
 import { n as useActiveLocale } from "./locale-context-DGCebJhw.mjs";
@@ -7,14 +7,14 @@ import { $t as startOfISOWeek, At as Calendar$1, Bt as getWeek, C as SelectConte
 import { n as ScreenHeaderBreadcrumbs } from "./ScreenHeaderContext-C22wBIsP.mjs";
 import { t as createTranslationContext } from "./translation-api-context-factory-BYNOdpnp.mjs";
 import { n as payKeys, r as storeKeys } from "./query-keys-BkMRwfNo.mjs";
-import { t as useAccount } from "./use-account-GjZt_eis.mjs";
+import { t as useAccount } from "./use-account-Du7Mi_Pi.mjs";
 import { n as useAppNavigation } from "./AppNavigationContext-DNomMUij.mjs";
 import { n as createDomainTranslations, r as useDomainDict, t as createStaticDictAdapter } from "./static-dict-adapter-CGDunURa.mjs";
-import { a as AddressFormDialog, c as PaymentIcon, f as ConfirmActionDialog, h as useProfileTranslation, i as CreditCardFormDialog, l as getCardDisplayName, m as ProfileTranslationBridge, n as createFluidPayApiAdapter, o as EditPaymentMethodDialog, p as EllipsesDropdown, r as mapToFluidPayPaymentMethod, s as FluidPayCoreProvider, t as AddressAutocompleteInput, u as getCardExpiry } from "./AddressAutocompleteInput-BmNxLzmA.mjs";
+import { a as AddressFormDialog, c as PaymentIcon, f as ConfirmActionDialog, h as useProfileTranslation, i as CreditCardFormDialog, l as getCardDisplayName, m as ProfileTranslationBridge, n as createFluidPayApiAdapter, o as EditPaymentMethodDialog, p as EllipsesDropdown, r as mapToFluidPayPaymentMethod, s as FluidPayCoreProvider, t as AddressAutocompleteInput, u as getCardExpiry } from "./AddressAutocompleteInput-QMNGouHg.mjs";
 import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { AlertCircle, CalendarDays, CalendarIcon, Check, ChevronDown, ChevronLeft, ChevronRight, CreditCard, ImageOff, Minus, Package, Pause, Play, Plus, Repeat, RotateCcw, SkipForward, Truck, XCircle } from "lucide-react";
+import { AlertCircle, BadgeAlert, Banknote, Calendar, CalendarClock, CalendarDays, CalendarIcon, Check, ChevronDown, ChevronLeft, ChevronRight, CircleDollarSign, CreditCard, DollarSign, ImageOff, Minus, Package, Pause, PiggyBank, Play, Plus, Receipt, RefreshCw, Repeat, RotateCcw, ShieldCheck, SkipForward, Sparkles, Truck, Wallet, X, XCircle } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 //#region ../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/getDefaultOptions.js
@@ -2239,6 +2239,20 @@ function useReactivateSubscription(options) {
 	});
 }
 //#endregion
+//#region ../../subscriptions/core/src/hooks/use-retry-subscription.ts
+function useRetrySubscription(options) {
+	const api = useSubscriptionsApi();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: (params) => api.retrySubscription(params.subscriptionToken),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: subscriptionsKeys.all });
+			options?.onSuccess?.();
+		},
+		onError: options?.onError
+	});
+}
+//#endregion
 //#region ../../subscriptions/core/src/hooks/use-update-subscription-info.ts
 function useUpdateSubscriptionInfo(options) {
 	const api = useSubscriptionsApi();
@@ -2246,7 +2260,7 @@ function useUpdateSubscriptionInfo(options) {
 	return useMutation({
 		mutationFn: (params) => api.updateSubscriptionInfo(params.subscriptionToken, params.body),
 		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: subscriptionsKeys.all });
+			if (!options?.skipAutoInvalidate) queryClient.invalidateQueries({ queryKey: subscriptionsKeys.all });
 			options?.onSuccess?.();
 		},
 		onError: options?.onError
@@ -2443,8 +2457,8 @@ function mapDetailSubscription(bff) {
 		last_ship_date: null,
 		disabled: false,
 		attempts: 0,
-		last_failed_at: null,
-		next_retry_at: null,
+		last_failed_at: bff.last_failed_at ?? null,
+		next_retry_at: bff.next_retry_at ?? null,
 		skipped_count: 0,
 		max_skips: null,
 		cancelled_at: null,
@@ -2726,6 +2740,9 @@ function createPortalSubscriptionsAdapter(client) {
 		reactivateSubscription: async (subscriptionToken, _params) => {
 			return mapSubscriptionDetail(await subscriptions_reactivate(client, subscriptionToken));
 		},
+		retrySubscription: async (subscriptionToken) => {
+			return mapSubscriptionDetail(await subscriptions_retry(client, subscriptionToken));
+		},
 		updateSubscriptionInfo: async (subscriptionToken, body) => {
 			const subscription = {};
 			if (body.payment_method_id != null) subscription.payment_method_id = body.payment_method_id;
@@ -2836,6 +2853,7 @@ const subscriptionsDomain = createDomainTranslations({
 		your_upcoming_order: "Your Upcoming Order",
 		next_order_date: "Next Order Date",
 		next_bill_amount: "Next Bill Amount",
+		payment_failed_on: "Payment failed on",
 		product_image_alt: "Product image",
 		no_image: "No image",
 		quantity_label: "Quantity",
@@ -2854,6 +2872,7 @@ const subscriptionsDomain = createDomainTranslations({
 		cancelled_subscription: "Cancelled Subscription",
 		resume_subscription: "Resume Subscription",
 		reactivate_subscription: "Reactivate Subscription",
+		update_payment_method_action: "Update Payment Method",
 		skip_next: "Skip Next",
 		pause: "Pause",
 		cancel: "Cancel",
@@ -3019,7 +3038,19 @@ const subscriptionsDomain = createDomainTranslations({
 		bundle_step4_message: "💳 Last step — choose payment method",
 		bundle_succeeded: "Subscriptions bundled successfully.",
 		bundle_partial_payment_failure: "Bundle created but payment method failed for {{n}} subscription(s).",
-		bundle_failed: "Couldn't bundle subscriptions. Please try again."
+		bundle_failed: "Couldn't bundle subscriptions. Please try again.",
+		past_due_banner_heading: "We couldn't process your payment",
+		past_due_banner_heading_for_product: "We couldn't process your payment for {{product}}",
+		past_due_banner_body: "Your payment method may have expired or been declined. Update your card to continue your subscription and avoid interruptions.",
+		past_due_banner_heading_retry_scheduled: "Payment retry scheduled",
+		past_due_banner_heading_retry_scheduled_for_product: "Payment retry scheduled for {{product}}",
+		past_due_banner_body_retry_scheduled: "We're trying your payment again now. We'll update once it's processed.",
+		past_due_banner_body_retry_failed: "The last retry didn't go through. We'll try again automatically {{when}}. You can also update your card to use a different one.",
+		update_your_card: "Update your card",
+		dismiss: "Dismiss",
+		past_due_retry_when_shortly: "shortly",
+		past_due_retry_when_few_hours: "in the next few hours",
+		past_due_retry_when_within_day: "within a day"
 	},
 	loaders: {
 		de: () => import("./de-DZoIVvaZ.mjs").then((m) => m.default),
@@ -5418,6 +5449,121 @@ function StatusPill({ status, children }) {
 	});
 }
 //#endregion
+//#region ../../subscriptions/ui/src/components/past-due-banner.tsx
+const ICON_STROKE = 1.5;
+const ICON_SCALE = 26;
+const ICON_RIGHT_OFFSET = 23;
+const ICON_OPACITY = .35;
+const ICON_VERTICAL_SPACING = 26;
+const COL_SPACING = 18;
+const ICONS_BY_COLUMN = [
+	{
+		icons: [
+			CreditCard,
+			CircleDollarSign,
+			BadgeAlert,
+			CalendarClock,
+			Sparkles,
+			Wallet
+		],
+		offset: false
+	},
+	{
+		icons: [
+			DollarSign,
+			Receipt,
+			PiggyBank,
+			ShieldCheck,
+			CreditCard
+		],
+		offset: true
+	},
+	{
+		icons: [
+			Calendar,
+			Banknote,
+			RefreshCw,
+			DollarSign,
+			CircleDollarSign,
+			Calendar
+		],
+		offset: false
+	}
+];
+function PastDueBanner({ productTitle, nextRetryAt, lastFailedAt, onUpdatePaymentClick, onDismiss, className }) {
+	const { t } = useSubscriptionsTranslation();
+	const [internalDismissed, setInternalDismissed] = useState(false);
+	const retryScheduled = nextRetryAt != null;
+	const previousAttemptFailed = retryScheduled && lastFailedAt != null;
+	if (!onDismiss && internalDismissed) return null;
+	const heading = retryScheduled ? productTitle ? t("past_due_banner_heading_retry_scheduled_for_product", { product: productTitle }) : t("past_due_banner_heading_retry_scheduled") : productTitle ? t("past_due_banner_heading_for_product", { product: productTitle }) : t("past_due_banner_heading");
+	const whenLabel = (() => {
+		if (!nextRetryAt) return t("past_due_retry_when_shortly");
+		const ms = new Date(nextRetryAt).getTime() - Date.now();
+		if (ms < 6e4) return t("past_due_retry_when_shortly");
+		if (ms < 720 * 60 * 1e3) return t("past_due_retry_when_few_hours");
+		return t("past_due_retry_when_within_day");
+	})();
+	const body = previousAttemptFailed ? t("past_due_banner_body_retry_failed", { when: whenLabel }) : retryScheduled ? t("past_due_banner_body_retry_scheduled") : t("past_due_banner_body");
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		className: cn("border-border bg-background relative overflow-hidden rounded-2xl border p-5 sm:p-6", className),
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => onDismiss ? onDismiss() : setInternalDismissed(true),
+				"aria-label": t("dismiss"),
+				className: "text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-ring absolute top-3 right-3 z-10 flex size-6 items-center justify-center rounded-md transition-colors focus-visible:outline-2 focus-visible:outline-offset-2",
+				children: /* @__PURE__ */ jsx(X, {
+					className: "size-4",
+					strokeWidth: 2
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "pointer-events-none absolute inset-y-0 right-0 hidden w-1/2 max-w-md sm:block",
+				children: ICONS_BY_COLUMN.flatMap((col, colIdx) => {
+					const right = `${ICON_RIGHT_OFFSET + colIdx * COL_SPACING}%`;
+					const baseTop = -ICON_VERTICAL_SPACING * .4 + (col.offset ? ICON_VERTICAL_SPACING / 2 : 0);
+					return col.icons.map((Icon, rowIdx) => {
+						return /* @__PURE__ */ jsx(Icon, {
+							strokeWidth: ICON_STROKE,
+							className: "text-muted-foreground absolute",
+							style: {
+								top: `${baseTop + rowIdx * ICON_VERTICAL_SPACING}%`,
+								right,
+								width: ICON_SCALE,
+								height: ICON_SCALE,
+								opacity: ICON_OPACITY
+							}
+						}, `${colIdx.toString()}-${rowIdx.toString()}`);
+					});
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative flex max-w-xl flex-col gap-3.5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1.5",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "text-foreground text-base font-bold tracking-tight sm:text-lg",
+						children: heading
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-sm leading-relaxed",
+						children: body
+					})]
+				}), onUpdatePaymentClick && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "destructive",
+					size: "default",
+					onClick: onUpdatePaymentClick,
+					className: "self-start px-5 active:scale-[0.99]",
+					children: t("update_your_card")
+				})]
+			})
+		]
+	});
+}
+//#endregion
 //#region ../../subscriptions/ui/src/lib/format.ts
 /**
 * Format a number as currency (USD).
@@ -5629,11 +5775,11 @@ function SubscriptionItemsSection({ subscription, displayQuantity, displayNextBi
 								children: [
 									/* @__PURE__ */ jsx("div", {
 										className: "text-muted-foreground mb-1 text-sm",
-										children: t("next_order_date")
+										children: subscription.status === "past_due" ? t("payment_failed_on") : t("next_order_date")
 									}),
 									/* @__PURE__ */ jsx("div", {
 										className: "text-foreground text-2xl font-bold",
-										children: getNextBillDisplay(displayNextBillDate ? {
+										children: subscription.status === "past_due" ? subscription.last_failed_at ? formatDate(subscription.last_failed_at) : "—" : getNextBillDisplay(displayNextBillDate ? {
 											...subscription,
 											next_bill_date: displayNextBillDate
 										} : subscription)
@@ -5650,13 +5796,20 @@ function SubscriptionItemsSection({ subscription, displayQuantity, displayNextBi
 								]
 							}), /* @__PURE__ */ jsxs("div", {
 								className: "pl-4",
-								children: [/* @__PURE__ */ jsx("div", {
-									className: "text-muted-foreground mb-1 text-sm",
-									children: t("next_bill_amount")
-								}), /* @__PURE__ */ jsx("div", {
-									className: "text-foreground text-2xl font-bold",
-									children: formatCurrency(subscription.price * quantity)
-								})]
+								children: [
+									/* @__PURE__ */ jsx("div", {
+										className: "text-muted-foreground mb-1 text-sm",
+										children: t("next_bill_amount")
+									}),
+									/* @__PURE__ */ jsx("div", {
+										className: "text-foreground text-2xl font-bold",
+										children: formatCurrency(subscription.price * quantity)
+									}),
+									subscription.status !== "past_due" && (displayNextBillDate ?? subscription.next_bill_date) && /* @__PURE__ */ jsx("div", {
+										className: "text-muted-foreground mt-1 text-xs",
+										children: formatDate(displayNextBillDate ?? subscription.next_bill_date ?? "")
+									})
+								]
 							})]
 						}), /* @__PURE__ */ jsx("hr", { className: "border-border mt-4" })]
 					})]
@@ -5764,7 +5917,7 @@ function SubscriptionItemsSection({ subscription, displayQuantity, displayNextBi
 		})
 	});
 }
-function SubscriptionManagementSection({ subscription, isActive, isPaused, isCancelled, isMutating, onSkip, onPause, onResume, onCancel, onReactivate, onEditBillDate, displayNextBillDate, renderPaymentMethod, renderShippingAddress }) {
+function SubscriptionManagementSection({ subscription, isActive, isPaused, isCancelled, isMutating, onSkip, onPause, onResume, onCancel, onReactivate, onEditBillDate, onUpdatePaymentClick, displayNextBillDate, renderPaymentMethod, renderShippingAddress }) {
 	const { t } = useSubscriptionsTranslation();
 	const plan = subscription.subscription_plan;
 	const quantity = subscription.quantity;
@@ -5825,6 +5978,16 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 									children: isCancelled ? t("cancelled_subscription") : t("cancel_subscription")
 								})]
 							}),
+							subscription.status === "past_due" && onUpdatePaymentClick && /* @__PURE__ */ jsxs(Button, {
+								variant: "outline",
+								onClick: onUpdatePaymentClick,
+								disabled: isMutating,
+								className: actionButtonClass,
+								children: [/* @__PURE__ */ jsx(CreditCard, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: t("update_payment_method_action")
+								})]
+							}),
 							isPaused && /* @__PURE__ */ jsxs(Button, {
 								variant: "outline",
 								onClick: onResume,
@@ -5883,7 +6046,7 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 										className: "text-foreground font-medium",
 										children: totalPrice
 									}),
-									(displayNextBillDate ?? subscription.next_bill_date) && /* @__PURE__ */ jsx("div", {
+									subscription.status !== "past_due" && (displayNextBillDate ?? subscription.next_bill_date) && /* @__PURE__ */ jsx("div", {
 										className: "text-muted-foreground text-xs",
 										children: formatDate(displayNextBillDate ?? subscription.next_bill_date ?? "")
 									})
@@ -5936,13 +6099,18 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 									subscription.address.country_code && /* @__PURE__ */ jsx("p", { children: subscription.address.country_code })
 								]
 							})]
-						}), paymentMethod && (renderPaymentMethod ? renderPaymentMethod({
-							paymentMethod,
-							subscriptionToken: subscription.subscription_token,
-							customerId: subscription.customer?.id ?? 0,
-							countryCode: subscription.address?.country_code ?? "US"
+						}), paymentMethod && (renderPaymentMethod ? /* @__PURE__ */ jsx("div", {
+							id: "subscription-payment-method-section",
+							className: "scroll-mt-24",
+							children: renderPaymentMethod({
+								paymentMethod,
+								subscriptionToken: subscription.subscription_token,
+								customerId: subscription.customer?.id ?? 0,
+								countryCode: subscription.address?.country_code ?? "US"
+							})
 						}) : /* @__PURE__ */ jsxs("div", {
-							className: "border-border mb-6 border-b pb-4",
+							id: "subscription-payment-method-section",
+							className: "border-border mb-6 scroll-mt-24 border-b pb-4",
 							children: [/* @__PURE__ */ jsx("div", {
 								className: "text-muted-foreground mb-1 text-sm",
 								children: t("payment_method")
@@ -6024,13 +6192,14 @@ function OrderHistorySection({ subscription }) {
 		})]
 	});
 }
-function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationError, onNavigateToSubscription, renderPaymentMethod, renderShippingAddress }) {
+function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationError, onNavigateToSubscription, renderPaymentMethod, renderShippingAddress, onUpdatePaymentClick }) {
 	const { t } = useSubscriptionsTranslation();
 	const [showCancelModal, setShowCancelModal] = useState(false);
 	const [showPauseModal, setShowPauseModal] = useState(false);
 	const [showResumeModal, setShowResumeModal] = useState(false);
 	const [showEditBillDateModal, setShowEditBillDateModal] = useState(false);
 	const [pendingNextBillDate, setPendingNextBillDate] = useState(null);
+	const [dismissedForFailedAt, setDismissedForFailedAt] = useState(void 0);
 	const { data, isLoading, error } = useSubscription(token);
 	const subscription = data?.subscription;
 	const customerId = subscription?.customer?.id ?? 0;
@@ -6181,7 +6350,24 @@ function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationE
 			reactivateParams: {}
 		});
 	};
+	const bannerDismissed = dismissedForFailedAt !== void 0 && dismissedForFailedAt === subscription.last_failed_at;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		subscription.status === "past_due" && !bannerDismissed && /* @__PURE__ */ jsx("div", {
+			className: "mb-4 px-2 sm:px-0 lg:mb-6",
+			children: /* @__PURE__ */ jsx(PastDueBanner, {
+				productTitle: subscription.variant?.product?.title ?? null,
+				nextRetryAt: subscription.next_retry_at ?? null,
+				lastFailedAt: subscription.last_failed_at ?? null,
+				onUpdatePaymentClick: onUpdatePaymentClick ?? (() => {
+					const el = document.getElementById("subscription-payment-method-section");
+					if (el) el.scrollIntoView({
+						behavior: "smooth",
+						block: "start"
+					});
+				}),
+				onDismiss: () => setDismissedForFailedAt(subscription.last_failed_at ?? null)
+			})
+		}),
 		/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col lg:grid lg:grid-cols-8",
 			children: [/* @__PURE__ */ jsx(SubscriptionItemsSection, {
@@ -6203,6 +6389,7 @@ function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationE
 				onCancel: () => setShowCancelModal(true),
 				onReactivate: handleReactivate,
 				onEditBillDate: () => setShowEditBillDateModal(true),
+				onUpdatePaymentClick,
 				displayNextBillDate: pendingNextBillDate ?? void 0,
 				renderPaymentMethod,
 				renderShippingAddress
@@ -6271,7 +6458,7 @@ function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationE
 }
 //#endregion
 //#region ../../subscriptions/ui/src/screens/SubscriptionDetailScreen.tsx
-function SubscriptionDetailScreen$1({ token, onNavigateToList, onNavigateToSubscription, onNotFound, onError, onSuccess, onMutationError, renderPaymentMethod, renderShippingAddress }) {
+function SubscriptionDetailScreen$1({ token, onNavigateToList, onNavigateToSubscription, onNotFound, onError, onSuccess, onMutationError, renderPaymentMethod, renderShippingAddress, onUpdatePaymentClick }) {
 	const { t } = useSubscriptionsTranslation();
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ScreenHeaderBreadcrumbs, { children: /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, {
 		className: "text-lg",
@@ -6300,7 +6487,8 @@ function SubscriptionDetailScreen$1({ token, onNavigateToList, onNavigateToSubsc
 			onMutationError,
 			onNavigateToSubscription,
 			renderPaymentMethod,
-			renderShippingAddress
+			renderShippingAddress,
+			onUpdatePaymentClick
 		})
 	})] });
 }
@@ -6470,14 +6658,19 @@ function subscriptionPaymentMethodToFluidPay(raw) {
 function PortalSubscriptionPaymentMethodSection(props) {
 	return /* @__PURE__ */ jsx(ProfileTranslationBridge, { children: /* @__PURE__ */ jsx(PortalSubscriptionPaymentMethodSectionInner, { ...props }) });
 }
-function PortalSubscriptionPaymentMethodSectionInner({ paymentMethod: currentPaymentMethod, subscriptionToken, onSuccess, onError }) {
+function PortalSubscriptionPaymentMethodSectionInner({ paymentMethod: currentPaymentMethod, subscriptionToken, onSuccess, onError, addDialogOpen, onAddDialogOpenChange }) {
 	const { t: profileT } = useProfileTranslation();
 	const { t: subsT } = useSubscriptionsTranslation();
 	const tFn = useCallback((key) => profileT(key), [profileT]);
 	const payApi = usePayApi();
 	const queryClient = useQueryClient();
 	const fluidPayShim = useMemo(() => createFluidPayApiAdapter(payApi), [payApi]);
-	const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+	const [internalAddDialogOpen, setInternalAddDialogOpen] = useState(false);
+	const isAddDialogOpen = addDialogOpen ?? internalAddDialogOpen;
+	const setIsAddDialogOpen = (next) => {
+		if (onAddDialogOpenChange) onAddDialogOpenChange(next);
+		else setInternalAddDialogOpen(next);
+	};
 	const [editingPaymentMethod, setEditingPaymentMethod] = useState(null);
 	const [deletingPaymentMethod, setDeletingPaymentMethod] = useState(null);
 	const [deleteError, setDeleteError] = useState(void 0);
@@ -6504,10 +6697,13 @@ function PortalSubscriptionPaymentMethodSectionInner({ paymentMethod: currentPay
 		iso: c.code,
 		name: c.name
 	})).sort((a, b) => a.name.localeCompare(b.name)), [countriesData]);
+	const retrySubscription = useRetrySubscription({ onError: (err) => onError?.("Failed to queue retry", err) });
 	const updateSubscription = useUpdateSubscriptionInfo({
+		skipAutoInvalidate: true,
 		onSuccess: () => {
 			onSuccess?.(profileT("default_payment_method_updated"));
-			queryClient.invalidateQueries({ queryKey: subscriptionsKeys.detail(subscriptionToken) });
+			if (queryClient.getQueryData(subscriptionsKeys.detail(subscriptionToken))?.subscription?.status === "past_due") retrySubscription.mutate({ subscriptionToken });
+			else queryClient.invalidateQueries({ queryKey: subscriptionsKeys.detail(subscriptionToken) });
 		},
 		onError: (err) => onError?.(profileT("failed_to_update_payment_method"), err)
 	});
@@ -6612,7 +6808,7 @@ function PortalSubscriptionPaymentMethodSectionInner({ paymentMethod: currentPay
 				addPaymentMethodLabel: profileT("add_payment_method_action"),
 				showAddButton: true,
 				isLoading: isLoadingMethods,
-				isPending: updateSubscription.isPending || addCardMutation.isPending || updatePaymentMethodMutation.isPending || makeDefaultPaymentMethodMutation.isPending,
+				isPending: updateSubscription.isPending || retrySubscription.isPending || addCardMutation.isPending || updatePaymentMethodMutation.isPending || makeDefaultPaymentMethodMutation.isPending,
 				selectedPaymentMethodId: currentPaymentMethod.id,
 				onSelectPaymentMethod: (pm) => {
 					if (pm.id === currentPaymentMethod.id) return;
@@ -7067,6 +7263,7 @@ function PortalSubscriptionShippingAddressSectionInner({ address: currentAddress
 function SubscriptionDetailScreen({ token, onToast }) {
 	const { navigate } = useAppNavigation();
 	const { t } = useSubscriptionsTranslation();
+	const [addPaymentDialogOpen, setAddPaymentDialogOpen] = useState(false);
 	return /* @__PURE__ */ jsx(SubscriptionDetailScreen$1, {
 		token,
 		onNavigateToList: useCallback(() => navigate("subscriptions"), [navigate]),
@@ -7088,12 +7285,15 @@ function SubscriptionDetailScreen({ token, onToast }) {
 		onMutationError: useCallback((message, err) => {
 			onToast(`${message}: ${err instanceof Error ? err.message : t("error_occurred")}`, "error");
 		}, [onToast, t]),
+		onUpdatePaymentClick: () => setAddPaymentDialogOpen(true),
 		renderPaymentMethod: (ctx) => /* @__PURE__ */ jsx(PortalSubscriptionPaymentMethodSection, {
 			...ctx,
 			onSuccess: (msg) => onToast(msg, "success"),
 			onError: (msg, err) => {
 				onToast(`${msg}: ${err instanceof Error ? err.message : t("error_occurred")}`, "error");
-			}
+			},
+			addDialogOpen: addPaymentDialogOpen,
+			onAddDialogOpenChange: setAddPaymentDialogOpen
 		}),
 		renderShippingAddress: (ctx) => /* @__PURE__ */ jsx(PortalSubscriptionShippingAddressSection, {
 			...ctx,
@@ -7144,4 +7344,4 @@ const subscriptionsScreenPropertySchema = {
 //#endregion
 export { subscriptionsScreenPropertySchema as n, SubscriptionsScreen as t };
 
-//# sourceMappingURL=SubscriptionsScreen-CxXfngW6.mjs.map
+//# sourceMappingURL=SubscriptionsScreen-0_u-2cUx.mjs.map