@funnelsgrove/payments 0.11.22 → 0.11.24

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.d.ts

@@ -1,5 +1,8 @@
 import type { AvailablePaymentMethods, StripeCheckoutExpressCheckoutElementOptions } from '@stripe/stripe-js';
 import { type StripeSubscriptionCheckoutAnalyticsContext } from '../services/checkoutCompletionAnalytics.service.js';
+export type StripeWalletCheckoutSuccess = {
+    checkoutSessionId: string | null;
+};
 export type StripeCheckoutExpressCheckoutButtonProps = {
     amountCents: number;
     beforeConfirm?: () => Promise<string | null>;
@@ -27,7 +30,7 @@ export type StripeCheckoutExpressCheckoutButtonProps = {
         message: string;
         paymentMethod?: string;
     }) => void;
-    onSuccess?: () => void | Promise<void>;
+    onSuccess?: (result: StripeWalletCheckoutSuccess) => void | Promise<void>;
     unsupportedCountryMessage?: string;
 };
 export declare function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAnalytics, checkoutSessionId, returnUrl, confirmEmail, customerEmail, className, options, availabilityPaymentMethods, initialAvailable, keepInitialAvailableOnReady, serverUpdateKey, supportedCountries, onServerUpdate, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onPaymentRejected, onSuccess, unsupportedCountryMessage, }: StripeCheckoutExpressCheckoutButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -154,7 +154,7 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
         if (checkoutAnalytics) {
             await trackPaidStripeSubscriptionCheckoutCompleted(Object.assign({ checkoutSessionId }, checkoutAnalytics));
         }
-        await (onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess());
+        await (onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess({ checkoutSessionId: checkoutSessionId !== null && checkoutSessionId !== void 0 ? checkoutSessionId : null }));
     };
     const queueCheckoutStarted = (paymentMethod, checkoutStartSource = 'wallet_click') => {
         if (!checkoutAnalytics) {

package/dist/providers/stripe/components/StripeWalletSurface.internal.d.ts

@@ -1,3 +1,4 @@
+import type { StripeWalletCheckoutSuccess } from './StripeCheckoutExpressCheckoutButton.js';
 import { type ReactNode } from 'react';
 import type { Appearance, StripeCheckoutExpressCheckoutElementOptions } from '@stripe/stripe-js';
 import { type PlatformWalletPaymentMethod } from './walletPlatform.js';
@@ -64,7 +65,7 @@ export type StripeWalletSurfaceProps = {
     onCancel?: () => void;
     onError?: (message: string | null, context: StripeWalletSurfaceErrorContext) => void;
     onPaymentInfoSubmitted?: () => void | Promise<void>;
-    onSuccess?: () => void | Promise<void>;
+    onSuccess?: (result: StripeWalletCheckoutSuccess) => void | Promise<void>;
     onUnavailableClick?: () => Promise<void> | void;
     paymentMethods?: readonly PlatformWalletPaymentMethod[];
     renderHeader?: (props: {

package/dist/providers/stripe/components/WalletSubscriptionCheckoutSlot.d.ts

@@ -1,3 +1,4 @@
+import type { StripeWalletCheckoutSuccess } from './StripeCheckoutExpressCheckoutButton.js';
 import { type ReactNode } from 'react';
 import type { Appearance, AvailablePaymentMethods, Stripe, StripeCheckoutExpressCheckoutElementOptions } from '@stripe/stripe-js';
 import { type StripeSubscriptionCheckoutAnalyticsContext } from '../services/checkoutCompletionAnalytics.service.js';
@@ -57,7 +58,7 @@ export type WalletSubscriptionCheckoutSlotProps = {
     onCancel?: () => void;
     onError?: (message: string | null) => void;
     onPaymentInfoSubmitted?: () => void | Promise<void>;
-    onSuccess?: () => void | Promise<void>;
+    onSuccess?: (result: StripeWalletCheckoutSuccess) => void | Promise<void>;
     onUnavailableClick?: () => Promise<void> | void;
     options?: Partial<StripeCheckoutExpressCheckoutElementOptions>;
     placeholderLabel: string;

package/package.json

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