@fluid-app/portal-sdk 0.1.314 → 0.1.316

package/dist/SubscriptionsScreen-8STRsoh2.mjs

@@ -0,0 +1,48 @@
+import "./portal_tenant_content-DKIMptZz.mjs";
+import "./FluidProvider-DcnRMRD4.mjs";
+import "./ScreenRenderer-cttxJ-W9.mjs";
+import "./store-api-context-DViwxyG4.mjs";
+import "./mysite-api-context-kUTM3GNG.mjs";
+import "./countries-api-context-DScC_39w.mjs";
+import "./registry-context-DIdav3MJ.mjs";
+import "./WidgetInteractionContext-CDHSzzws.mjs";
+import "./EmbedWidget-CATRSHDk.mjs";
+import "./locale-context-DGCebJhw.mjs";
+import "./error-state-DvzIn9Tz.mjs";
+import "./LayoutWidget-D_0t7pau.mjs";
+import "./registries-BtCYIu-b.mjs";
+import "./fields-B2DTFWQl.mjs";
+import "./TextWidget-B8U3U6MT.mjs";
+import "./AlertWidget-BF_ORULS.mjs";
+import "./BulletListWidget-Bi1pdsJl.mjs";
+import "./preview-context-CDnhakni.mjs";
+import "./CalendarWidget-LnJmsGpv.mjs";
+import "./CardWidget-DLeadzfN.mjs";
+import "./purify.es-Cjc3iy5J.mjs";
+import "./MediaRenderer-CLmBOrvK.mjs";
+import "./CarouselWidget-C0TQw3h3.mjs";
+import "./CatchUpWidget-C9jZSlF8.mjs";
+import "./src-DC5QoBhR.mjs";
+import { n as subscriptionsScreenPropertySchema, t as SubscriptionsScreen } from "./SubscriptionsScreen-0_u-2cUx.mjs";
+import "./ChartWidget-Ba935aP9.mjs";
+import "./ContainerWidget-Ci3McBxD.mjs";
+import "./ImageWidget-CyTa5HXr.mjs";
+import "./LinkWidget-C0zTcGH9.mjs";
+import "./ListWidget-ClotDOth.mjs";
+import "./MySiteWidget-M1WPkOzw.mjs";
+import "./NestedWidget-Muw0upB1.mjs";
+import "./PointsWidget-DwPusoNj.mjs";
+import "./QuickLinksWidget-CvTQIsle.mjs";
+import "./QuickShareWidget-Vl5yoJvh.mjs";
+import "./RecentActivityWidget-60GnZ7Dl.mjs";
+import "./SeparatorWidget-euh5w7vj.mjs";
+import "./SpacerWidget-BSK1d3yz.mjs";
+import "./TableWidget-D9o_Wf3P.mjs";
+import "./ToDoWidget-G5jYFoWJ.mjs";
+import "./VideoWidget-BBq_SW6C.mjs";
+import "./ScreenHeaderContext-C22wBIsP.mjs";
+import "./translation-api-context-factory-BYNOdpnp.mjs";
+import "./static-dict-adapter-CGDunURa.mjs";
+import "./AddressAutocompleteInput-QMNGouHg.mjs";
+import "./Combobox-B2o0YsiQ.mjs";
+export { SubscriptionsScreen, subscriptionsScreenPropertySchema };

package/dist/{SubscriptionsScreen-CUvV5IzE.cjs → SubscriptionsScreen-BNwDrJ2f.cjs}

@@ -1,7 +1,7 @@
 require("./chunk-9hOWP6kD.cjs");
-require("./FluidProvider-DXvgVTmO.cjs");
+require("./FluidProvider-DTdECylI.cjs");
 require("./ScreenRenderer-D-l4cMI3.cjs");
-require("./portal_tenant_content-CrltRlMW.cjs");
+require("./portal_tenant_content-Cufl7LSv.cjs");
 require("./store-api-context-D1gZn22Z.cjs");
 require("./mysite-api-context-CilZcDS4.cjs");
 require("./countries-api-context-G-NW4BoH.cjs");
@@ -43,8 +43,8 @@ require("./VideoWidget-CWEZqpnZ.cjs");
 require("./ScreenHeaderContext-B7-GM5qJ.cjs");
 require("./translation-api-context-factory-BSuSh5Zg.cjs");
 require("./static-dict-adapter-DUeLZtek.cjs");
-require("./AddressAutocompleteInput-CmieGMsF.cjs");
+require("./AddressAutocompleteInput-GBK1tcQ7.cjs");
 require("./Combobox-DUkuwgCW.cjs");
-const require_SubscriptionsScreen = require("./SubscriptionsScreen-DhIabp7l.cjs");
+const require_SubscriptionsScreen = require("./SubscriptionsScreen-nMZi49Kq.cjs");
 exports.SubscriptionsScreen = require_SubscriptionsScreen.SubscriptionsScreen;
 exports.subscriptionsScreenPropertySchema = require_SubscriptionsScreen.subscriptionsScreenPropertySchema;

package/dist/{SubscriptionsScreen-DhIabp7l.cjs → SubscriptionsScreen-nMZi49Kq.cjs}

@@ -1,6 +1,6 @@
 require("./chunk-9hOWP6kD.cjs");
-const require_FluidProvider = require("./FluidProvider-DXvgVTmO.cjs");
-const require_portal_tenant_content = require("./portal_tenant_content-CrltRlMW.cjs");
+const require_FluidProvider = require("./FluidProvider-DTdECylI.cjs");
+const require_portal_tenant_content = require("./portal_tenant_content-Cufl7LSv.cjs");
 const require_countries_api_context = require("./countries-api-context-G-NW4BoH.cjs");
 const require_PortalTenantClientProvider = require("./PortalTenantClientProvider-OhJylQjc.cjs");
 const require_locale_context = require("./locale-context-8CiNKIho.cjs");
@@ -8,10 +8,10 @@ const require_src = require("./src-DoVMGOoV.cjs");
 const require_ScreenHeaderContext = require("./ScreenHeaderContext-B7-GM5qJ.cjs");
 const require_translation_api_context_factory = require("./translation-api-context-factory-BSuSh5Zg.cjs");
 const require_query_keys = require("./query-keys-D3lK70Ea.cjs");
-const require_use_account = require("./use-account-CEjH1hp5.cjs");
+const require_use_account = require("./use-account-KSCVzEeP.cjs");
 const require_AppNavigationContext = require("./AppNavigationContext-C1-hd9Rw.cjs");
 const require_static_dict_adapter = require("./static-dict-adapter-DUeLZtek.cjs");
-const require_AddressAutocompleteInput = require("./AddressAutocompleteInput-CmieGMsF.cjs");
+const require_AddressAutocompleteInput = require("./AddressAutocompleteInput-GBK1tcQ7.cjs");
 const require_isAfter = require("./isAfter-BCyWSyQs.cjs");
 let react = require("react");
 let _tanstack_react_query = require("@tanstack/react-query");
@@ -2301,6 +2301,20 @@ function useReactivateSubscription(options) {
 	});
 }
 //#endregion
+//#region ../../subscriptions/core/src/hooks/use-retry-subscription.ts
+function useRetrySubscription(options) {
+	const api = useSubscriptionsApi();
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	return (0, _tanstack_react_query.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();
@@ -2308,7 +2322,7 @@ function useUpdateSubscriptionInfo(options) {
 	return (0, _tanstack_react_query.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
@@ -2505,8 +2519,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,
@@ -2788,6 +2802,9 @@ function createPortalSubscriptionsAdapter(client) {
 		reactivateSubscription: async (subscriptionToken, _params) => {
 			return mapSubscriptionDetail(await require_portal_tenant_content.subscriptions_reactivate(client, subscriptionToken));
 		},
+		retrySubscription: async (subscriptionToken) => {
+			return mapSubscriptionDetail(await require_portal_tenant_content.subscriptions_retry(client, subscriptionToken));
+		},
 		updateSubscriptionInfo: async (subscriptionToken, body) => {
 			const subscription = {};
 			if (body.payment_method_id != null) subscription.payment_method_id = body.payment_method_id;
@@ -2898,6 +2915,7 @@ const subscriptionsDomain = require_static_dict_adapter.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",
@@ -2916,6 +2934,7 @@ const subscriptionsDomain = require_static_dict_adapter.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",
@@ -3081,7 +3100,19 @@ const subscriptionsDomain = require_static_dict_adapter.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: () => Promise.resolve().then(() => require("./de-BP0u3L-K.cjs")).then((m) => m.default),
@@ -5480,6 +5511,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: [
+			lucide_react.CreditCard,
+			lucide_react.CircleDollarSign,
+			lucide_react.BadgeAlert,
+			lucide_react.CalendarClock,
+			lucide_react.Sparkles,
+			lucide_react.Wallet
+		],
+		offset: false
+	},
+	{
+		icons: [
+			lucide_react.DollarSign,
+			lucide_react.Receipt,
+			lucide_react.PiggyBank,
+			lucide_react.ShieldCheck,
+			lucide_react.CreditCard
+		],
+		offset: true
+	},
+	{
+		icons: [
+			lucide_react.Calendar,
+			lucide_react.Banknote,
+			lucide_react.RefreshCw,
+			lucide_react.DollarSign,
+			lucide_react.CircleDollarSign,
+			lucide_react.Calendar
+		],
+		offset: false
+	}
+];
+function PastDueBanner({ productTitle, nextRetryAt, lastFailedAt, onUpdatePaymentClick, onDismiss, className }) {
+	const { t } = useSubscriptionsTranslation();
+	const [internalDismissed, setInternalDismissed] = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "status",
+		className: cn("border-border bg-background relative overflow-hidden rounded-2xl border p-5 sm:p-6", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+					className: "size-4",
+					strokeWidth: 2
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative flex max-w-xl flex-col gap-3.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col gap-1.5",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: "text-foreground text-base font-bold tracking-tight sm:text-lg",
+						children: heading
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-muted-foreground text-sm leading-relaxed",
+						children: body
+					})]
+				}), onUpdatePaymentClick && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.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).
@@ -5691,11 +5837,11 @@ function SubscriptionItemsSection({ subscription, displayQuantity, displayNextBi
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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)
@@ -5712,13 +5858,20 @@ function SubscriptionItemsSection({ subscription, displayQuantity, displayNextBi
 								]
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "pl-4",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "text-muted-foreground mb-1 text-sm",
-									children: t("next_bill_amount")
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "text-foreground text-2xl font-bold",
-									children: formatCurrency(subscription.price * quantity)
-								})]
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "text-muted-foreground mb-1 text-sm",
+										children: t("next_bill_amount")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "text-foreground text-2xl font-bold",
+										children: formatCurrency(subscription.price * quantity)
+									}),
+									subscription.status !== "past_due" && (displayNextBillDate ?? subscription.next_bill_date) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "text-muted-foreground mt-1 text-xs",
+										children: formatDate(displayNextBillDate ?? subscription.next_bill_date ?? "")
+									})
+								]
 							})]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: "border-border mt-4" })]
 					})]
@@ -5826,7 +5979,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;
@@ -5887,6 +6040,16 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 									children: isCancelled ? t("cancelled_subscription") : t("cancel_subscription")
 								})]
 							}),
+							subscription.status === "past_due" && onUpdatePaymentClick && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+								variant: "outline",
+								onClick: onUpdatePaymentClick,
+								disabled: isMutating,
+								className: actionButtonClass,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CreditCard, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "truncate",
+									children: t("update_payment_method_action")
+								})]
+							}),
 							isPaused && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
 								variant: "outline",
 								onClick: onResume,
@@ -5945,7 +6108,7 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 										className: "text-foreground font-medium",
 										children: totalPrice
 									}),
-									(displayNextBillDate ?? subscription.next_bill_date) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									subscription.status !== "past_due" && (displayNextBillDate ?? subscription.next_bill_date) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 										className: "text-muted-foreground text-xs",
 										children: formatDate(displayNextBillDate ?? subscription.next_bill_date ?? "")
 									})
@@ -5998,13 +6161,18 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 									subscription.address.country_code && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "text-muted-foreground mb-1 text-sm",
 								children: t("payment_method")
@@ -6086,13 +6254,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] = (0, react.useState)(false);
 	const [showPauseModal, setShowPauseModal] = (0, react.useState)(false);
 	const [showResumeModal, setShowResumeModal] = (0, react.useState)(false);
 	const [showEditBillDateModal, setShowEditBillDateModal] = (0, react.useState)(false);
 	const [pendingNextBillDate, setPendingNextBillDate] = (0, react.useState)(null);
+	const [dismissedForFailedAt, setDismissedForFailedAt] = (0, react.useState)(void 0);
 	const { data, isLoading, error } = useSubscription(token);
 	const subscription = data?.subscription;
 	const customerId = subscription?.customer?.id ?? 0;
@@ -6243,7 +6412,24 @@ function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationE
 			reactivateParams: {}
 		});
 	};
+	const bannerDismissed = dismissedForFailedAt !== void 0 && dismissedForFailedAt === subscription.last_failed_at;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		subscription.status === "past_due" && !bannerDismissed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "mb-4 px-2 sm:px-0 lg:mb-6",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-col lg:grid lg:grid-cols-8",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionItemsSection, {
@@ -6265,6 +6451,7 @@ function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationE
 				onCancel: () => setShowCancelModal(true),
 				onReactivate: handleReactivate,
 				onEditBillDate: () => setShowEditBillDateModal(true),
+				onUpdatePaymentClick,
 				displayNextBillDate: pendingNextBillDate ?? void 0,
 				renderPaymentMethod,
 				renderShippingAddress
@@ -6333,7 +6520,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__ */ (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.jsxs)(require_src.BreadcrumbList, {
 		className: "text-lg",
@@ -6362,7 +6549,8 @@ function SubscriptionDetailScreen$1({ token, onNavigateToList, onNavigateToSubsc
 			onMutationError,
 			onNavigateToSubscription,
 			renderPaymentMethod,
-			renderShippingAddress
+			renderShippingAddress,
+			onUpdatePaymentClick
 		})
 	})] });
 }
@@ -6532,14 +6720,19 @@ function subscriptionPaymentMethodToFluidPay(raw) {
 function PortalSubscriptionPaymentMethodSection(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.ProfileTranslationBridge, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalSubscriptionPaymentMethodSectionInner, { ...props }) });
 }
-function PortalSubscriptionPaymentMethodSectionInner({ paymentMethod: currentPaymentMethod, subscriptionToken, onSuccess, onError }) {
+function PortalSubscriptionPaymentMethodSectionInner({ paymentMethod: currentPaymentMethod, subscriptionToken, onSuccess, onError, addDialogOpen, onAddDialogOpenChange }) {
 	const { t: profileT } = require_AddressAutocompleteInput.useProfileTranslation();
 	const { t: subsT } = useSubscriptionsTranslation();
 	const tFn = (0, react.useCallback)((key) => profileT(key), [profileT]);
 	const payApi = require_FluidProvider.usePayApi();
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
 	const fluidPayShim = (0, react.useMemo)(() => require_AddressAutocompleteInput.createFluidPayApiAdapter(payApi), [payApi]);
-	const [isAddDialogOpen, setIsAddDialogOpen] = (0, react.useState)(false);
+	const [internalAddDialogOpen, setInternalAddDialogOpen] = (0, react.useState)(false);
+	const isAddDialogOpen = addDialogOpen ?? internalAddDialogOpen;
+	const setIsAddDialogOpen = (next) => {
+		if (onAddDialogOpenChange) onAddDialogOpenChange(next);
+		else setInternalAddDialogOpen(next);
+	};
 	const [editingPaymentMethod, setEditingPaymentMethod] = (0, react.useState)(null);
 	const [deletingPaymentMethod, setDeletingPaymentMethod] = (0, react.useState)(null);
 	const [deleteError, setDeleteError] = (0, react.useState)(void 0);
@@ -6566,10 +6759,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)
 	});
@@ -6674,7 +6870,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;
@@ -7129,6 +7325,7 @@ function PortalSubscriptionShippingAddressSectionInner({ address: currentAddress
 function SubscriptionDetailScreen({ token, onToast }) {
 	const { navigate } = require_AppNavigationContext.useAppNavigation();
 	const { t } = useSubscriptionsTranslation();
+	const [addPaymentDialogOpen, setAddPaymentDialogOpen] = (0, react.useState)(false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionDetailScreen$1, {
 		token,
 		onNavigateToList: (0, react.useCallback)(() => navigate("subscriptions"), [navigate]),
@@ -7150,12 +7347,15 @@ function SubscriptionDetailScreen({ token, onToast }) {
 		onMutationError: (0, react.useCallback)((message, err) => {
 			onToast(`${message}: ${err instanceof Error ? err.message : t("error_occurred")}`, "error");
 		}, [onToast, t]),
+		onUpdatePaymentClick: () => setAddPaymentDialogOpen(true),
 		renderPaymentMethod: (ctx) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(PortalSubscriptionShippingAddressSection, {
 			...ctx,
@@ -7217,4 +7417,4 @@ Object.defineProperty(exports, "subscriptionsScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=SubscriptionsScreen-DhIabp7l.cjs.map
+//# sourceMappingURL=SubscriptionsScreen-nMZi49Kq.cjs.map