@funnelsgrove/payments 0.11.21 → 0.11.23

package/dist/components/ManageSubscriptionScreen.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { apiService, buildPreviewManageSubscriptionsFallback, isPreviewFrameRuntime, runtimePublicConfig, useFunnel, } from '@funnelsgrove/runtime';
+import { manageSubscriptionStyles } from './ManageSubscriptionScreen.styles.js';
+import { apiService, buildPreviewManageSubscriptionsFallback, isPreviewFrameRuntime, runtimePublicConfig, useFunnel, useFunnelRuntimeConfig, } from '@funnelsgrove/runtime';
 import { getFallbackBillingPlans } from '../services/planCatalog.service.js';
 const pastSubscriptionsNote = 'Past subscriptions are already canceled or expired. Dates below are historical, not upcoming charges.';
 const cancelledSubscriptionsNote = 'These subscriptions are cancelled and remain active until the date shown below.';
@@ -81,6 +82,8 @@ const resolveSubscriptionStatusLabel = (subscription) => {
 export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId, plans, }) {
     var _a, _b;
     const { attributes, goToStep, setAnswer, setUser, user } = useFunnel();
+    const { config: publishedRuntimeConfig } = useFunnelRuntimeConfig();
+    const paymentsApiVersion = publishedRuntimeConfig === null || publishedRuntimeConfig === void 0 ? void 0 : publishedRuntimeConfig.paymentsApiVersion;
     const supportEmail = runtimePublicConfig.supportEmail;
     const planList = useMemo(() => getFallbackBillingPlans(plans), [plans]);
     const [stage, setStage] = useState('subscriptions');
@@ -105,7 +108,7 @@ export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId,
                 return;
             }
             try {
-                const payload = await apiService.getManageSubscriptions();
+                const payload = await apiService.getManageSubscriptions({ paymentsApiVersion });
                 if (active) {
                     setData(payload);
                 }
@@ -125,7 +128,7 @@ export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId,
         return () => {
             active = false;
         };
-    }, [content.errorMessages.load]);
+    }, [content.errorMessages.load, paymentsApiVersion]);
     const subscriptions = useMemo(() => { var _a; return toManageSubscriptions((_a = data === null || data === void 0 ? void 0 : data.subscriptions) !== null && _a !== void 0 ? _a : []); }, [data]);
     const activeSubscriptions = useMemo(() => subscriptions.filter(isCancellableSubscription), [subscriptions]);
     const cancelledSubscriptions = useMemo(() => subscriptions.filter(isCancelledActiveSubscription), [subscriptions]);
@@ -179,7 +182,9 @@ export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId,
             });
             const payload = await apiService.updateSubscription({
                 subscriptionId: selectedSubscription.id,
+                subscriptionRef: selectedSubscription.subscriptionRef,
                 action: 'cancel',
+                runtimeConfig: { paymentsApiVersion },
             });
             setData(payload);
             const refreshedSubscription = toManageSubscriptions(payload.subscriptions).find((subscription) => subscription.id === selectedSubscription.id);
@@ -222,313 +227,6 @@ function SubscriptionSection({ title, subscriptions, plans, onSelect, descriptio
                                             ? resolveBillingDateLabel(subscription, { cancelled })
                                             : resolveBillingDateLabel(subscription, { past }) }), _jsxs("span", { children: ["Created at: ", resolveCreatedDate(subscription)] })] })] }) }, subscription.id))) })] }));
 }
-const manageSubscriptionStyles = `
-.funnel-shell[data-preview-frame='true'] {
-  min-width: 0;
-}
-
-.manage-subscription {
-  position: absolute;
-  inset: 0;
-  max-width: 100%;
-  overflow-y: auto;
-  box-sizing: border-box;
-  background: color-mix(in srgb, var(--color-primary, #4db53f) 8%, var(--color-surface, #fff) 92%);
-  color: var(--color-text, #262729);
-  font-family: var(--font-family-base, Inter, sans-serif);
-}
-
-.manage-subscription-inner,
-.manage-subscription-section,
-.manage-subscription-list,
-.manage-subscription-row,
-.manage-subscription-row-heading,
-.manage-subscription-row-meta,
-.manage-subscription-support {
-  min-width: 0;
-  max-width: 100%;
-}
-
-.manage-subscription-inner {
-  box-sizing: border-box;
-  min-height: 100%;
-  padding: 22px 12px 32px;
-}
-
-.manage-subscription-inner.is-short {
-  padding-top: 22px;
-}
-
-.manage-subscription-title {
-  margin: 0;
-  color: var(--color-text, #262729);
-  font-size: 20px;
-  line-height: 1.3;
-  font-weight: 800;
-  text-align: center;
-}
-
-.manage-subscription-title.is-reason {
-  max-width: 620px;
-  margin-inline: auto;
-}
-
-.manage-subscription-section {
-  margin-top: 22px;
-}
-
-.manage-subscription-section h2 {
-  margin: 0 0 10px;
-  color: var(--color-text, #262729);
-  font-size: 15px;
-  line-height: 1.25;
-  font-weight: 800;
-  text-align: center;
-}
-
-.manage-subscription-section-note {
-  margin: 0 0 12px;
-  color: color-mix(in srgb, var(--color-text, #262729) 72%, transparent);
-  font-size: 13px;
-  line-height: 1.35;
-  text-align: center;
-}
-
-.manage-subscription-list {
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 8px;
-  list-style: none;
-}
-
-.manage-subscription-row {
-  width: 100%;
-  min-height: 118px;
-  border: 0;
-  border-left: 4px solid var(--color-primary, #4db53f);
-  border-radius: 6px;
-  box-sizing: border-box;
-  background: var(--color-surface, #fff);
-  color: var(--color-text, #262729);
-  display: grid;
-  grid-template-columns: 1fr;
-  justify-items: start;
-  gap: 7px;
-  padding: 10px 12px;
-  text-align: left;
-  cursor: pointer;
-}
-
-.manage-subscription-row.is-past {
-  border-left-color: color-mix(in srgb, var(--color-text, #262729) 25%, var(--color-surface, #fff) 75%);
-  color: color-mix(in srgb, var(--color-text, #262729) 68%, transparent);
-  cursor: default;
-  opacity: 0.82;
-}
-
-.manage-subscription-row.is-cancelled {
-  border-left-color: var(--color-warning, #f28100);
-  cursor: default;
-}
-
-.manage-subscription-radio {
-  width: 14px;
-  height: 14px;
-  border: 2px solid color-mix(in srgb, var(--color-text, #262729) 45%, var(--color-surface, #fff) 55%);
-  border-radius: 999px;
-  display: block;
-}
-
-.manage-subscription-row-heading {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.manage-subscription-row-title {
-  font-size: 15px;
-  line-height: 1.25;
-  font-weight: 800;
-  overflow-wrap: anywhere;
-}
-
-.manage-subscription-row-status {
-  flex-shrink: 0;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--color-warning, #f28100) 16%, var(--color-surface, #fff) 84%);
-  color: var(--color-warning, #f28100);
-  padding: 3px 8px;
-  font-size: 10px;
-  line-height: 1.2;
-  font-weight: 800;
-  text-transform: uppercase;
-}
-
-.manage-subscription-row-plan {
-  font-size: 13px;
-  line-height: 1.2;
-  font-weight: 800;
-  overflow-wrap: anywhere;
-}
-
-.manage-subscription-row-meta {
-  width: 100%;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 8px;
-  color: color-mix(in srgb, var(--color-text, #262729) 68%, transparent);
-  font-size: 11px;
-  font-style: italic;
-  line-height: 1.3;
-}
-
-.manage-subscription-row-meta span {
-  overflow-wrap: anywhere;
-}
-
-.manage-subscription-row-meta .is-active-until {
-  color: var(--color-text, #262729);
-  font-weight: 800;
-}
-
-.manage-subscription-support {
-  margin: 30px 0 0;
-  color: var(--color-text, #262729);
-  font-size: 15px;
-  line-height: 1.35;
-  text-align: center;
-  overflow-wrap: anywhere;
-}
-
-.manage-subscription-support a {
-  color: var(--color-secondary, var(--color-primary, #4db53f));
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  overflow-wrap: anywhere;
-}
-
-.manage-subscription-muted,
-.manage-subscription-empty,
-.manage-subscription-error {
-  margin: 18px 0 0;
-  border-radius: 6px;
-  background: var(--color-surface, #fff);
-  padding: 12px;
-  color: color-mix(in srgb, var(--color-text, #262729) 72%, transparent);
-  font-size: 12px;
-  line-height: 1.4;
-  text-align: center;
-}
-
-.manage-subscription-error {
-  color: var(--color-danger, #c74b43);
-}
-
-.manage-subscription-done-copy {
-  margin: 15px 0 0;
-  color: color-mix(in srgb, var(--color-text, #262729) 76%, transparent);
-  font-size: 13px;
-  line-height: 1.4;
-  text-align: center;
-}
-
-.manage-subscription-done-copy.is-active-until {
-  margin-top: 8px;
-  color: var(--color-text, #262729);
-  font-weight: 800;
-}
-
-.manage-subscription-done-status {
-  width: fit-content;
-  margin: 14px auto 0;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--color-warning, #f28100) 16%, var(--color-surface, #fff) 84%);
-  color: var(--color-warning, #f28100);
-  padding: 4px 10px;
-  font-size: 11px;
-  line-height: 1.2;
-  font-weight: 800;
-  text-transform: uppercase;
-}
-
-.manage-subscription-reasons {
-  margin: 18px 0 0;
-  padding: 0;
-  display: grid;
-  gap: 12px;
-  list-style: none;
-}
-
-.manage-subscription-reason {
-  width: 100%;
-  min-height: 68px;
-  border: 0;
-  border-radius: 10px;
-  box-sizing: border-box;
-  background: var(--color-surface, #fff);
-  color: var(--color-text, #262729);
-  display: grid;
-  grid-template-columns: 36px 1fr auto;
-  align-items: center;
-  gap: 8px;
-  padding: 14px 16px;
-  font-size: 15px;
-  line-height: 1.25;
-  font-weight: 800;
-  text-align: left;
-  cursor: pointer;
-}
-
-.manage-subscription-reason-icon {
-  font-size: 20px;
-  line-height: 1;
-}
-
-.manage-subscription-reason-arrow {
-  color: var(--color-secondary, var(--color-primary, #4db53f));
-  font-size: 28px;
-  line-height: 0.8;
-}
-
-.manage-subscription-primary {
-  margin-top: 18px;
-  width: 100%;
-  min-height: 56px;
-  border: 0;
-  border-radius: 5px;
-  box-sizing: border-box;
-  background: var(--color-primary, #4db53f);
-  color: var(--color-primary-text, #fff);
-  font-size: 19px;
-  line-height: 1.2;
-  font-weight: 800;
-  cursor: pointer;
-}
-
-.manage-subscription-primary:disabled {
-  opacity: 0.58;
-  cursor: default;
-}
-
-@media (max-width: 420px) {
-  .manage-subscription-title {
-    font-size: 19px;
-  }
-
-  .manage-subscription-row-meta {
-    grid-template-columns: 1fr;
-  }
-
-  .manage-subscription-reason {
-    grid-template-columns: 32px 1fr auto;
-    padding-inline: 14px;
-    font-size: 14px;
-  }
-}
-`;
 export const __manageSubscriptionScreenTestables = {
     resolveBillingDateLabel,
     resolveSubscriptionStatusLabel,

package/dist/components/ManageSubscriptionScreen.styles.d.ts

@@ -0,0 +1 @@
+export declare const manageSubscriptionStyles = "\n.funnel-shell[data-preview-frame='true'] {\n  min-width: 0;\n}\n\n.manage-subscription {\n  position: absolute;\n  inset: 0;\n  max-width: 100%;\n  overflow-y: auto;\n  box-sizing: border-box;\n  background: color-mix(in srgb, var(--color-primary, #4db53f) 8%, var(--color-surface, #fff) 92%);\n  color: var(--color-text, #262729);\n  font-family: var(--font-family-base, Inter, sans-serif);\n}\n\n.manage-subscription-inner,\n.manage-subscription-section,\n.manage-subscription-list,\n.manage-subscription-row,\n.manage-subscription-row-heading,\n.manage-subscription-row-meta,\n.manage-subscription-support {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.manage-subscription-inner {\n  box-sizing: border-box;\n  min-height: 100%;\n  padding: 22px 12px 32px;\n}\n\n.manage-subscription-inner.is-short {\n  padding-top: 22px;\n}\n\n.manage-subscription-title {\n  margin: 0;\n  color: var(--color-text, #262729);\n  font-size: 20px;\n  line-height: 1.3;\n  font-weight: 800;\n  text-align: center;\n}\n\n.manage-subscription-title.is-reason {\n  max-width: 620px;\n  margin-inline: auto;\n}\n\n.manage-subscription-section {\n  margin-top: 22px;\n}\n\n.manage-subscription-section h2 {\n  margin: 0 0 10px;\n  color: var(--color-text, #262729);\n  font-size: 15px;\n  line-height: 1.25;\n  font-weight: 800;\n  text-align: center;\n}\n\n.manage-subscription-section-note {\n  margin: 0 0 12px;\n  color: color-mix(in srgb, var(--color-text, #262729) 72%, transparent);\n  font-size: 13px;\n  line-height: 1.35;\n  text-align: center;\n}\n\n.manage-subscription-list {\n  margin: 0;\n  padding: 0;\n  display: grid;\n  gap: 8px;\n  list-style: none;\n}\n\n.manage-subscription-row {\n  width: 100%;\n  min-height: 118px;\n  border: 0;\n  border-left: 4px solid var(--color-primary, #4db53f);\n  border-radius: 6px;\n  box-sizing: border-box;\n  background: var(--color-surface, #fff);\n  color: var(--color-text, #262729);\n  display: grid;\n  grid-template-columns: 1fr;\n  justify-items: start;\n  gap: 7px;\n  padding: 10px 12px;\n  text-align: left;\n  cursor: pointer;\n}\n\n.manage-subscription-row.is-past {\n  border-left-color: color-mix(in srgb, var(--color-text, #262729) 25%, var(--color-surface, #fff) 75%);\n  color: color-mix(in srgb, var(--color-text, #262729) 68%, transparent);\n  cursor: default;\n  opacity: 0.82;\n}\n\n.manage-subscription-row.is-cancelled {\n  border-left-color: var(--color-warning, #f28100);\n  cursor: default;\n}\n\n.manage-subscription-radio {\n  width: 14px;\n  height: 14px;\n  border: 2px solid color-mix(in srgb, var(--color-text, #262729) 45%, var(--color-surface, #fff) 55%);\n  border-radius: 999px;\n  display: block;\n}\n\n.manage-subscription-row-heading {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.manage-subscription-row-title {\n  font-size: 15px;\n  line-height: 1.25;\n  font-weight: 800;\n  overflow-wrap: anywhere;\n}\n\n.manage-subscription-row-status {\n  flex-shrink: 0;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--color-warning, #f28100) 16%, var(--color-surface, #fff) 84%);\n  color: var(--color-warning, #f28100);\n  padding: 3px 8px;\n  font-size: 10px;\n  line-height: 1.2;\n  font-weight: 800;\n  text-transform: uppercase;\n}\n\n.manage-subscription-row-plan {\n  font-size: 13px;\n  line-height: 1.2;\n  font-weight: 800;\n  overflow-wrap: anywhere;\n}\n\n.manage-subscription-row-meta {\n  width: 100%;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 8px;\n  color: color-mix(in srgb, var(--color-text, #262729) 68%, transparent);\n  font-size: 11px;\n  font-style: italic;\n  line-height: 1.3;\n}\n\n.manage-subscription-row-meta span {\n  overflow-wrap: anywhere;\n}\n\n.manage-subscription-row-meta .is-active-until {\n  color: var(--color-text, #262729);\n  font-weight: 800;\n}\n\n.manage-subscription-support {\n  margin: 30px 0 0;\n  color: var(--color-text, #262729);\n  font-size: 15px;\n  line-height: 1.35;\n  text-align: center;\n  overflow-wrap: anywhere;\n}\n\n.manage-subscription-support a {\n  color: var(--color-secondary, var(--color-primary, #4db53f));\n  text-decoration: underline;\n  text-underline-offset: 3px;\n  overflow-wrap: anywhere;\n}\n\n.manage-subscription-muted,\n.manage-subscription-empty,\n.manage-subscription-error {\n  margin: 18px 0 0;\n  border-radius: 6px;\n  background: var(--color-surface, #fff);\n  padding: 12px;\n  color: color-mix(in srgb, var(--color-text, #262729) 72%, transparent);\n  font-size: 12px;\n  line-height: 1.4;\n  text-align: center;\n}\n\n.manage-subscription-error {\n  color: var(--color-danger, #c74b43);\n}\n\n.manage-subscription-done-copy {\n  margin: 15px 0 0;\n  color: color-mix(in srgb, var(--color-text, #262729) 76%, transparent);\n  font-size: 13px;\n  line-height: 1.4;\n  text-align: center;\n}\n\n.manage-subscription-done-copy.is-active-until {\n  margin-top: 8px;\n  color: var(--color-text, #262729);\n  font-weight: 800;\n}\n\n.manage-subscription-done-status {\n  width: fit-content;\n  margin: 14px auto 0;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--color-warning, #f28100) 16%, var(--color-surface, #fff) 84%);\n  color: var(--color-warning, #f28100);\n  padding: 4px 10px;\n  font-size: 11px;\n  line-height: 1.2;\n  font-weight: 800;\n  text-transform: uppercase;\n}\n\n.manage-subscription-reasons {\n  margin: 18px 0 0;\n  padding: 0;\n  display: grid;\n  gap: 12px;\n  list-style: none;\n}\n\n.manage-subscription-reason {\n  width: 100%;\n  min-height: 68px;\n  border: 0;\n  border-radius: 10px;\n  box-sizing: border-box;\n  background: var(--color-surface, #fff);\n  color: var(--color-text, #262729);\n  display: grid;\n  grid-template-columns: 36px 1fr auto;\n  align-items: center;\n  gap: 8px;\n  padding: 14px 16px;\n  font-size: 15px;\n  line-height: 1.25;\n  font-weight: 800;\n  text-align: left;\n  cursor: pointer;\n}\n\n.manage-subscription-reason-icon {\n  font-size: 20px;\n  line-height: 1;\n}\n\n.manage-subscription-reason-arrow {\n  color: var(--color-secondary, var(--color-primary, #4db53f));\n  font-size: 28px;\n  line-height: 0.8;\n}\n\n.manage-subscription-primary {\n  margin-top: 18px;\n  width: 100%;\n  min-height: 56px;\n  border: 0;\n  border-radius: 5px;\n  box-sizing: border-box;\n  background: var(--color-primary, #4db53f);\n  color: var(--color-primary-text, #fff);\n  font-size: 19px;\n  line-height: 1.2;\n  font-weight: 800;\n  cursor: pointer;\n}\n\n.manage-subscription-primary:disabled {\n  opacity: 0.58;\n  cursor: default;\n}\n\n@media (max-width: 420px) {\n  .manage-subscription-title {\n    font-size: 19px;\n  }\n\n  .manage-subscription-row-meta {\n    grid-template-columns: 1fr;\n  }\n\n  .manage-subscription-reason {\n    grid-template-columns: 32px 1fr auto;\n    padding-inline: 14px;\n    font-size: 14px;\n  }\n}\n";

package/dist/components/ManageSubscriptionScreen.styles.js

@@ -0,0 +1,307 @@
+export const manageSubscriptionStyles = `
+.funnel-shell[data-preview-frame='true'] {
+  min-width: 0;
+}
+
+.manage-subscription {
+  position: absolute;
+  inset: 0;
+  max-width: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+  background: color-mix(in srgb, var(--color-primary, #4db53f) 8%, var(--color-surface, #fff) 92%);
+  color: var(--color-text, #262729);
+  font-family: var(--font-family-base, Inter, sans-serif);
+}
+
+.manage-subscription-inner,
+.manage-subscription-section,
+.manage-subscription-list,
+.manage-subscription-row,
+.manage-subscription-row-heading,
+.manage-subscription-row-meta,
+.manage-subscription-support {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.manage-subscription-inner {
+  box-sizing: border-box;
+  min-height: 100%;
+  padding: 22px 12px 32px;
+}
+
+.manage-subscription-inner.is-short {
+  padding-top: 22px;
+}
+
+.manage-subscription-title {
+  margin: 0;
+  color: var(--color-text, #262729);
+  font-size: 20px;
+  line-height: 1.3;
+  font-weight: 800;
+  text-align: center;
+}
+
+.manage-subscription-title.is-reason {
+  max-width: 620px;
+  margin-inline: auto;
+}
+
+.manage-subscription-section {
+  margin-top: 22px;
+}
+
+.manage-subscription-section h2 {
+  margin: 0 0 10px;
+  color: var(--color-text, #262729);
+  font-size: 15px;
+  line-height: 1.25;
+  font-weight: 800;
+  text-align: center;
+}
+
+.manage-subscription-section-note {
+  margin: 0 0 12px;
+  color: color-mix(in srgb, var(--color-text, #262729) 72%, transparent);
+  font-size: 13px;
+  line-height: 1.35;
+  text-align: center;
+}
+
+.manage-subscription-list {
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 8px;
+  list-style: none;
+}
+
+.manage-subscription-row {
+  width: 100%;
+  min-height: 118px;
+  border: 0;
+  border-left: 4px solid var(--color-primary, #4db53f);
+  border-radius: 6px;
+  box-sizing: border-box;
+  background: var(--color-surface, #fff);
+  color: var(--color-text, #262729);
+  display: grid;
+  grid-template-columns: 1fr;
+  justify-items: start;
+  gap: 7px;
+  padding: 10px 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.manage-subscription-row.is-past {
+  border-left-color: color-mix(in srgb, var(--color-text, #262729) 25%, var(--color-surface, #fff) 75%);
+  color: color-mix(in srgb, var(--color-text, #262729) 68%, transparent);
+  cursor: default;
+  opacity: 0.82;
+}
+
+.manage-subscription-row.is-cancelled {
+  border-left-color: var(--color-warning, #f28100);
+  cursor: default;
+}
+
+.manage-subscription-radio {
+  width: 14px;
+  height: 14px;
+  border: 2px solid color-mix(in srgb, var(--color-text, #262729) 45%, var(--color-surface, #fff) 55%);
+  border-radius: 999px;
+  display: block;
+}
+
+.manage-subscription-row-heading {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.manage-subscription-row-title {
+  font-size: 15px;
+  line-height: 1.25;
+  font-weight: 800;
+  overflow-wrap: anywhere;
+}
+
+.manage-subscription-row-status {
+  flex-shrink: 0;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-warning, #f28100) 16%, var(--color-surface, #fff) 84%);
+  color: var(--color-warning, #f28100);
+  padding: 3px 8px;
+  font-size: 10px;
+  line-height: 1.2;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.manage-subscription-row-plan {
+  font-size: 13px;
+  line-height: 1.2;
+  font-weight: 800;
+  overflow-wrap: anywhere;
+}
+
+.manage-subscription-row-meta {
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 8px;
+  color: color-mix(in srgb, var(--color-text, #262729) 68%, transparent);
+  font-size: 11px;
+  font-style: italic;
+  line-height: 1.3;
+}
+
+.manage-subscription-row-meta span {
+  overflow-wrap: anywhere;
+}
+
+.manage-subscription-row-meta .is-active-until {
+  color: var(--color-text, #262729);
+  font-weight: 800;
+}
+
+.manage-subscription-support {
+  margin: 30px 0 0;
+  color: var(--color-text, #262729);
+  font-size: 15px;
+  line-height: 1.35;
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+
+.manage-subscription-support a {
+  color: var(--color-secondary, var(--color-primary, #4db53f));
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  overflow-wrap: anywhere;
+}
+
+.manage-subscription-muted,
+.manage-subscription-empty,
+.manage-subscription-error {
+  margin: 18px 0 0;
+  border-radius: 6px;
+  background: var(--color-surface, #fff);
+  padding: 12px;
+  color: color-mix(in srgb, var(--color-text, #262729) 72%, transparent);
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: center;
+}
+
+.manage-subscription-error {
+  color: var(--color-danger, #c74b43);
+}
+
+.manage-subscription-done-copy {
+  margin: 15px 0 0;
+  color: color-mix(in srgb, var(--color-text, #262729) 76%, transparent);
+  font-size: 13px;
+  line-height: 1.4;
+  text-align: center;
+}
+
+.manage-subscription-done-copy.is-active-until {
+  margin-top: 8px;
+  color: var(--color-text, #262729);
+  font-weight: 800;
+}
+
+.manage-subscription-done-status {
+  width: fit-content;
+  margin: 14px auto 0;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-warning, #f28100) 16%, var(--color-surface, #fff) 84%);
+  color: var(--color-warning, #f28100);
+  padding: 4px 10px;
+  font-size: 11px;
+  line-height: 1.2;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.manage-subscription-reasons {
+  margin: 18px 0 0;
+  padding: 0;
+  display: grid;
+  gap: 12px;
+  list-style: none;
+}
+
+.manage-subscription-reason {
+  width: 100%;
+  min-height: 68px;
+  border: 0;
+  border-radius: 10px;
+  box-sizing: border-box;
+  background: var(--color-surface, #fff);
+  color: var(--color-text, #262729);
+  display: grid;
+  grid-template-columns: 36px 1fr auto;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px;
+  font-size: 15px;
+  line-height: 1.25;
+  font-weight: 800;
+  text-align: left;
+  cursor: pointer;
+}
+
+.manage-subscription-reason-icon {
+  font-size: 20px;
+  line-height: 1;
+}
+
+.manage-subscription-reason-arrow {
+  color: var(--color-secondary, var(--color-primary, #4db53f));
+  font-size: 28px;
+  line-height: 0.8;
+}
+
+.manage-subscription-primary {
+  margin-top: 18px;
+  width: 100%;
+  min-height: 56px;
+  border: 0;
+  border-radius: 5px;
+  box-sizing: border-box;
+  background: var(--color-primary, #4db53f);
+  color: var(--color-primary-text, #fff);
+  font-size: 19px;
+  line-height: 1.2;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.manage-subscription-primary:disabled {
+  opacity: 0.58;
+  cursor: default;
+}
+
+@media (max-width: 420px) {
+  .manage-subscription-title {
+    font-size: 19px;
+  }
+
+  .manage-subscription-row-meta {
+    grid-template-columns: 1fr;
+  }
+
+  .manage-subscription-reason {
+    grid-template-columns: 32px 1fr auto;
+    padding-inline: 14px;
+    font-size: 14px;
+  }
+}
+`;

package/dist/providers/stripe/components/StripeCheckoutExpressCheckoutButton.js

@@ -303,14 +303,15 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
         }
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { "aria-busy": serverUpdatePending || undefined, "aria-disabled": serverUpdatePending || undefined, className: [
+    const inertWhileUpdating = (serverUpdatePending ? { inert: true } : {});
+    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({}, inertWhileUpdating, { "aria-busy": serverUpdatePending || undefined, "aria-disabled": serverUpdatePending || undefined, className: [
                     'stripe-express-checkout-button',
                     className !== null && className !== void 0 ? className : '',
                     effectiveWalletAvailable === false ? 'is-hidden' : '',
                     serverUpdatePending ? 'is-server-update-pending' : '',
                 ]
                     .filter(Boolean)
-                    .join(' '), inert: serverUpdatePending, children: _jsx(ExpressCheckoutElementWithCancel, { options: resolvedOptions, onCancel: handleCancel, onClick: handleClick, onConfirm: (event) => void handleConfirm(event), onLoadError: ({ error }) => {
+                    .join(' '), children: _jsx(ExpressCheckoutElementWithCancel, { options: resolvedOptions, onCancel: handleCancel, onClick: handleClick, onConfirm: (event) => void handleConfirm(event), onLoadError: ({ error }) => {
                         setWalletAvailable(false);
                         onAvailabilityChange === null || onAvailabilityChange === void 0 ? void 0 : onAvailabilityChange(false);
                         reportFailure(error.message || 'Unable to load wallet checkout.', 'wallet_load');
@@ -322,7 +323,7 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
                         if (resolvedAvailable) {
                             onError === null || onError === void 0 ? void 0 : onError(null);
                         }
-                    } }) }), _jsx("style", { children: stripeExpressCheckoutButtonStyles })] }));
+                    } }) })), _jsx("style", { children: stripeExpressCheckoutButtonStyles })] }));
 }
 const stripeExpressCheckoutButtonStyles = `
 .stripe-express-checkout-button {

package/dist/providers/stripe/testing/walletCheckoutSmoke.d.ts

@@ -12,6 +12,7 @@ export type WalletCheckoutSmokeProfile = {
 };
 export type WalletCheckoutSmokeSnapshot = {
     blockingOverlayVisible: boolean;
+    cardDialogVisible: boolean;
     cardFallbackVisible: boolean;
     subscriptionRequestSucceeded: boolean;
     walletSlotState: 'ready' | 'unavailable' | 'unknown';
@@ -22,6 +23,7 @@ export type WalletCheckoutSmokeEvaluation = {
 };
 export type WalletCheckoutSmokeSelectors = {
     blockingOverlay?: string;
+    cardDialog: string;
     cardFallback: string;
     walletSlot: string;
 };

package/dist/providers/stripe/testing/walletCheckoutSmoke.js

@@ -57,6 +57,9 @@ export function evaluateWalletCheckoutSmokeSnapshot(snapshot) {
     if (!snapshot.cardFallbackVisible) {
         failures.push('card fallback checkout is not visible');
     }
+    if (!snapshot.cardDialogVisible) {
+        failures.push('card checkout dialog did not open');
+    }
     if (snapshot.blockingOverlayVisible) {
         failures.push('a blocking loader or modal is still visible');
     }
@@ -69,7 +72,7 @@ export async function runWalletCheckoutSmokeTest(chromium, options) {
     var _a, _b, _c;
     const profiles = (_a = options.profiles) !== null && _a !== void 0 ? _a : buildWalletCheckoutSmokeProfiles();
     const timeoutMs = (_b = options.timeoutMs) !== null && _b !== void 0 ? _b : 15000;
-    const subscriptionRequestPath = (_c = options.subscriptionRequestPath) !== null && _c !== void 0 ? _c : '/sdk/public/payments/subscriptions';
+    const subscriptionRequestPath = (_c = options.subscriptionRequestPath) !== null && _c !== void 0 ? _c : '/sdk/public/v2/payments/checkout-sessions';
     const browser = await chromium.launch({ headless: true });
     try {
         const results = [];
@@ -102,20 +105,32 @@ export async function runWalletCheckoutSmokeTest(chromium, options) {
                         timeout: timeoutMs,
                     }).then(() => 'unavailable'),
                 ]).catch(() => 'unknown');
+                const cardFallbackVisible = await page
+                    .isVisible(options.selectors.cardFallback, { timeout: timeoutMs })
+                    .catch(() => false);
+                if (cardFallbackVisible) {
+                    await page.click(options.selectors.cardFallback, { timeout: timeoutMs }).catch(() => undefined);
+                }
+                const cardDialogVisible = cardFallbackVisible
+                    ? await page.waitForSelector(options.selectors.cardDialog, {
+                        state: 'visible',
+                        timeout: timeoutMs,
+                    }).then(() => true).catch(() => false)
+                    : false;
+                const blockingOverlayVisible = options.selectors.blockingOverlay
+                    ? await page.waitForSelector(options.selectors.blockingOverlay, {
+                        state: 'hidden',
+                        timeout: timeoutMs,
+                    }).then(() => false).catch(() => true)
+                    : false;
                 const snapshot = {
-                    blockingOverlayVisible: options.selectors.blockingOverlay
-                        ? await page.isVisible(options.selectors.blockingOverlay, { timeout: 500 }).catch(() => false)
-                        : false,
-                    cardFallbackVisible: await page
-                        .isVisible(options.selectors.cardFallback, { timeout: timeoutMs })
-                        .catch(() => false),
+                    blockingOverlayVisible,
+                    cardDialogVisible,
+                    cardFallbackVisible,
                     subscriptionRequestSucceeded: await subscriptionResponse,
                     walletSlotState: walletSlotResolved,
                 };
                 const evaluation = evaluateWalletCheckoutSmokeSnapshot(snapshot);
-                if (snapshot.cardFallbackVisible) {
-                    await page.click(options.selectors.cardFallback, { timeout: timeoutMs }).catch(() => undefined);
-                }
                 results.push(Object.assign(Object.assign({}, evaluation), { profileId: profile.id, snapshot }));
             }
             finally {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.11.21",
+  "version": "0.11.23",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/The-Solid-Grove/funnelsgrove.git",