@funnelsgrove/cli 0.1.231 → 0.1.237

package/template_scaffold/docs/funnelsgrove/contracts/content-answers.md

@@ -42,3 +42,72 @@ Keep builder-editable values in content definitions, expose matching editor sect
 - Update the owning artifact in the same change. Never implement a step absent from `PLAN.md`.
 
 See the exact choice and form pages in the [step-type index](../steps/INDEX.md). Run `fgrove validate` and test reload persistence before completion.
+
+## Localization
+
+All funnel-authored visitor copy belongs in `src/**/*.content.ts` localized
+content definitions: headings, options, CTA labels, placeholders, validation and
+error messages, loading/empty states, accessible labels, shared shell copy, and
+paywall/legal copy. JSX renders resolved content; metadata IDs, answer keys,
+provider IDs, prices and billing rules retain their existing owners. Provider-hosted
+payment fields and messages are configured through that provider's locale support.
+
+1. Keep original `*.content.ts` files at their existing locations alongside the
+   funnel's steps/shared code. They own the default English content and exported
+   content types. Run `fgrove locales add ru --dir .` to create translations under
+   `src/localization/ru/`, mirroring each original path relative to `src/`:
+   `src/steps/content/intro.content.ts` →
+   `src/localization/ru/steps/content/intro.content.ts`.
+   Use BCP 47 tags such as `pt-BR`. CLI copies source only: no translation, login,
+   sync or publication. Repeating the command preserves translated values, adds missing exports and
+   repairs missing registrations in the originals.
+   An existing inline locale is extracted with its authored text preserved.
+2. Translate **every** generated content file, including shared shell and
+   returning-subscriber content. Each translated export imports its named type
+   with `import type` from the original file. Original definitions import these
+   translated values into their `locales` map; the reverse import is type-only.
+   Preserve keys, option IDs, placeholders such as `{amount}`, URLs and tokens.
+   Same-file inheritance from the default or requested locale refers to the
+   translated export. References to other locales require explicit copy before
+   running the command. Relative imports
+   are rebased; imported expressions remain authored references. Inspect those
+   references for remaining visitor copy before completing a translation.
+3. Define the complete structure in an exported type in the original content file
+   and use `satisfies LocalizedStepContent<YourContentType>`. When adding a field,
+   update this type and the English content, then supply the field in **every**
+   translation. Keep required fields required; do not silence errors with casts,
+   optional fields or English spreads. Run `npx tsc --noEmit` at the funnel root:
+   an incomplete translation must fail with its file and missing field.
+   Keep `defaultLocale` and `locales` as explicit literal properties. CLI preflights
+   unsupported definitions before writing. Use named non-generic content types
+   and one default language per file. Local helpers referenced by copied
+   content (including enums, classes and type casts) must be inlined or moved to
+   independent imported modules. If a registered translation file is lost, restore
+   it before retrying; CLI cannot recover translated text from an import. A new step
+   must include every supported locale: rerun `locales add` for each language.
+4. Resolve step copy with `usePreviewStepLocalizedContent(stepId, definition,
+   getStepContentLocale(attributes))`. Runtime versions supporting localization
+   give `?locale=ru` priority; otherwise the requested/browser language applies.
+   Lookup uses exact match, base language (`pt-BR` → `pt`), then `defaultLocale`.
+   The override persists in step URLs and never changes country, currency or offers.
+5. Review each language with `?locale=ru`, including direct step links, reload,
+   next/back, validation errors, long text and checkout. Builder **Preview language**
+   selects languages announced by its live frame and carries the choice into the
+   external preview link. Static screenshots cannot switch language. Older
+   published runtimes need an SDK update and republish before exposing this control.
+6. Run `fgrove validate`, sync through the funnel's normal CLI/GitHub workflow,
+   then publish preview. Existing funnels keep their own source and package pins;
+   adding a locale does not upgrade their SDK or migrate hard-coded JSX. Update
+   those explicitly and review the diff. Refresh this managed guide with `fgrove docs`.
+
+New funnel code must route shell buttons and custom action-bar text through
+content too. `src/steps/content/runtime.content.ts` owns the starter's shared
+Continue/loading/unavailable messages. Server-returned display labels need
+locale-owned presentation overrides; changing copy must not change plan IDs,
+amounts, billing intervals or provider configuration.
+
+The starter paywall's `catalogLabels` maps exact catalog display text to localized
+text. Keep its keys unchanged and translate the values, preserving monetary
+amounts. Add mappings for new admin-authored labels as needed. Unrecognized
+catalog labels remain unchanged; translation never substitutes one offer for
+another or alters payment identifiers and amounts.

package/template_scaffold/docs/funnelsgrove/migrations/step-contract-v3.md

@@ -17,7 +17,7 @@ Supported read versions: `1`, `2`, `3`. Authoring and publish target version `3`
 
 ### Package release order
 
-Release `@funnelsgrove/runtime` `0.14.3` first, then `@funnelsgrove/analytics` `0.1.105`, then `@funnelsgrove/payments` `0.15.10`. The production deploy verifies the zero-traffic API candidate, publishes and verifies `@funnelsgrove/cli` `0.1.231`, and only then promotes the candidate to production traffic. The serving API must never advertise an unpublished preferred CLI. Publishing packages and deploying production remain separately approved operational actions.
+Release `@funnelsgrove/sdk` `0.4.0` first, then `@funnelsgrove/runtime` `0.19.0`, then `@funnelsgrove/analytics` `0.1.110`, then `@funnelsgrove/payments` `0.20.0`. The production deploy verifies the zero-traffic API candidate, publishes and verifies `@funnelsgrove/cli` `0.1.237`, and only then promotes the candidate to production traffic. The serving API must never advertise an unpublished preferred CLI. Publishing packages and deploying production remain separately approved operational actions.
 <!-- funnelsgrove:generated:end contract-v3/migration/step-contract-v3 -->
 
 ## Version-last policy

package/template_scaffold/funnel-docs.config.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "bundleVersion": "2.0.223",
+  "bundleVersion": "2.0.229",
   "contractSource": "funnelsgrove-repository://apps/funnel-runtime/contracts/step-contract-v2.json",
   "fullyGenerated": [
     ".funnelsgrove-docs.json",

package/template_scaffold/package-lock.json

@@ -8,9 +8,9 @@
       "name": "funnel-template",
       "version": "0.1.0",
       "dependencies": {
-        "@funnelsgrove/analytics": "^0.1.97",
-        "@funnelsgrove/payments": "^0.12.0",
-        "@funnelsgrove/runtime": "^0.12.0",
+        "@funnelsgrove/analytics": "^0.1.106",
+        "@funnelsgrove/payments": "^0.15.11",
+        "@funnelsgrove/runtime": "^0.14.4",
         "@stripe/react-stripe-js": "^5.6.0",
         "@stripe/stripe-js": "^8.7.0",
         "lucide-react": "^0.553.0",
@@ -938,20 +938,20 @@
       }
     },
     "node_modules/@funnelsgrove/analytics": {
-      "version": "0.1.97",
-      "resolved": "https://registry.npmjs.org/@funnelsgrove/analytics/-/analytics-0.1.97.tgz",
-      "integrity": "sha512-9FtZrzkjpwtfGZIbpYsnutK8T870MalxkWiGGzYGkzVJcoBfeCKTPEDXRwfNiaAyLUCDbeY7/gheJac2MllZAw==",
+      "version": "0.1.106",
+      "resolved": "https://registry.npmjs.org/@funnelsgrove/analytics/-/analytics-0.1.106.tgz",
+      "integrity": "sha512-S2hzj6C7FFz9Ui1GIE+NGMCVWnpWR81dZ4/HNSakedTSYcnP5Pu9JYtVLD+EXtiYRclF5PDgIIUbhkQxIuO8Mw==",
       "dependencies": {
-        "@funnelsgrove/runtime": "0.12.0"
+        "@funnelsgrove/runtime": "0.14.4"
       }
     },
     "node_modules/@funnelsgrove/payments": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@funnelsgrove/payments/-/payments-0.12.0.tgz",
-      "integrity": "sha512-i1rmGFNcSAr54qn5Q+QUiqzK2zYCNXr8uUMKN7UhEPEHYzP8cir2KR6XgI0rqQA3BOvDkqTpMNZOoE15uiPWIA==",
+      "version": "0.15.11",
+      "resolved": "https://registry.npmjs.org/@funnelsgrove/payments/-/payments-0.15.11.tgz",
+      "integrity": "sha512-X9k+/6NduXXQa2RTf+bbZenbckxunULCazROXsjpWcuJDkby/DdPH4Y+OZMNBpS/BIp3tbTO9z877p+7wz41/g==",
       "dependencies": {
-        "@funnelsgrove/analytics": "^0.1.97",
-        "@funnelsgrove/runtime": "^0.12.0",
+        "@funnelsgrove/analytics": "0.1.106",
+        "@funnelsgrove/runtime": "0.14.4",
         "@solidgate/react-sdk": "1.34.0",
         "@stripe/react-stripe-js": "^5.6.0",
         "@stripe/stripe-js": "^8.7.0",
@@ -961,9 +961,9 @@
       }
     },
     "node_modules/@funnelsgrove/runtime": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@funnelsgrove/runtime/-/runtime-0.12.0.tgz",
-      "integrity": "sha512-WyuSRoYyDFcndMPEW+swoXhbYrWLG2icN4IgYv8KKQ3q/3mR8jAjlsQLY0hTdaaz6UxnV2w5+NXfYVB8eDxQBg==",
+      "version": "0.14.4",
+      "resolved": "https://registry.npmjs.org/@funnelsgrove/runtime/-/runtime-0.14.4.tgz",
+      "integrity": "sha512-Rloc3yKoe0mUDxiHTsFKuUt+cspzFAJHkUUkjV5Z+v79ogjW/K+1LxRG6vnwghB4QWj24Fjp5l1FKwREqqERIA==",
       "dependencies": {
         "posthog-js": "^1.369.2",
         "react": "19.2.3",

package/template_scaffold/package.json

@@ -12,9 +12,9 @@
     "validate:funnel": "vite-node --config src/contract/funnel-validator.vite.config.ts src/contract/validate-funnel.cli.ts"
   },
   "dependencies": {
-    "@funnelsgrove/analytics": "^0.1.97",
-    "@funnelsgrove/payments": "^0.12.0",
-    "@funnelsgrove/runtime": "^0.12.0",
+    "@funnelsgrove/analytics": "^0.1.106",
+    "@funnelsgrove/payments": "^0.15.11",
+    "@funnelsgrove/runtime": "^0.14.4",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",
     "lucide-react": "^0.553.0",

package/template_scaffold/src/app/subscription-dashboard/page.tsx

@@ -1,9 +1,12 @@
 'use client';
 
 import { useCallback, useEffect, useState } from 'react';
-import { apiService, type ManageSubscriptionsResponse } from '@funnelsgrove/runtime';
+import { apiService, usePreviewStepLocalizedContent, type ManageSubscriptionsResponse } from '@funnelsgrove/runtime';
+
+import { subscriptionDashboardContent } from '@/steps/content/subscription-dashboard.content';
 
 export default function ManageSubscriptionPage() {
+  const content = usePreviewStepLocalizedContent('subscription-dashboard', subscriptionDashboardContent);
   const [data, setData] = useState<ManageSubscriptionsResponse | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -17,11 +20,11 @@ export default function ManageSubscriptionPage() {
       const payload = await apiService.getManageSubscriptions();
       setData(payload);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load subscriptions');
+      setError(err instanceof Error ? err.message : content.loadError);
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [content.loadError]);
 
   useEffect(() => {
     void load();
@@ -38,7 +41,7 @@ export default function ManageSubscriptionPage() {
       });
       setData(payload);
     } catch (err) {
-      setError(err instanceof Error ? err.message : `Failed to ${action} subscription`);
+      setError(err instanceof Error ? err.message : (action === 'cancel' ? content.cancelError : content.renewError));
     } finally {
       setUpdatingSubscriptionId(null);
     }
@@ -48,35 +51,35 @@ export default function ManageSubscriptionPage() {
     <main className="manage-subscription-page">
       <section className="manage-subscription-card">
         <header>
-          <p className="manage-subscription-tag">App Deals</p>
-          <h1 className="manage-subscription-title">Manage Subscription</h1>
+          <p className="manage-subscription-tag">{content.brand}</p>
+          <h1 className="manage-subscription-title">{content.title}</h1>
           <p className="manage-subscription-description">
-            View active plans and manage cancellation or renewal.
+            {content.description}
           </p>
         </header>
 
-        {loading ? <p className="manage-subscription-muted">Loading subscription data...</p> : null}
+        {loading ? <p className="manage-subscription-muted">{content.loading}</p> : null}
         {error ? <p className="manage-subscription-error">{error}</p> : null}
 
         {!loading && data?.user ? (
           <section className="manage-subscription-user">
             <p>
-              <strong>User ID:</strong> {data.user.user_id}
+              <strong>{content.userId}</strong> {data.user.user_id}
             </p>
             <p>
-              <strong>Email:</strong> {data.user.email || 'Not provided'}
+              <strong>{content.email}</strong> {data.user.email || content.notProvided}
             </p>
             <p>
-              <strong>Status:</strong> {data.user.subscriptionStatus || 'unknown'}
+              <strong>{content.status}</strong> {data.user.subscriptionStatus || content.unknown}
             </p>
             <p>
-              <strong>Tracked events:</strong> {data.eventsCount}
+              <strong>{content.events}</strong> {data.eventsCount}
             </p>
           </section>
         ) : null}
 
         {!loading && (!data || data.subscriptions.length === 0) ? (
-          <p className="manage-subscription-muted">No subscriptions found for this user.</p>
+          <p className="manage-subscription-muted">{content.empty}</p>
         ) : null}
 
         {!loading && data?.subscriptions.length ? (
@@ -92,12 +95,12 @@ export default function ManageSubscriptionPage() {
                   </p>
                   <p className="manage-subscription-item-meta">
                     {subscription.cancelAtPeriodEnd
-                      ? 'Will cancel at period end'
-                      : 'Auto-renew is active'}
+                      ? content.cancelAtEnd
+                      : content.autoRenew}
                   </p>
                   {subscription.currentPeriodEnd ? (
                     <p className="manage-subscription-item-meta">
-                      Current period ends:{' '}
+                      {content.periodEnds}{' '}
                       {new Date(subscription.currentPeriodEnd).toLocaleString()}
                     </p>
                   ) : null}
@@ -111,7 +114,7 @@ export default function ManageSubscriptionPage() {
                       disabled={updatingSubscriptionId === subscription.id}
                       onClick={() => mutate(subscription.id, 'renew')}
                     >
-                      {updatingSubscriptionId === subscription.id ? 'Updating...' : 'Renew'}
+                      {updatingSubscriptionId === subscription.id ? content.updating : content.renew}
                     </button>
                   ) : (
                     <button
@@ -120,7 +123,7 @@ export default function ManageSubscriptionPage() {
                       disabled={updatingSubscriptionId === subscription.id}
                       onClick={() => mutate(subscription.id, 'cancel')}
                     >
-                      {updatingSubscriptionId === subscription.id ? 'Updating...' : 'Cancel'}
+                      {updatingSubscriptionId === subscription.id ? content.updating : content.cancel}
                     </button>
                   )}
                 </div>
@@ -130,7 +133,7 @@ export default function ManageSubscriptionPage() {
         ) : null}
 
         <button type="button" className="manage-subscription-refresh" onClick={() => void load()}>
-          Refresh
+          {content.refresh}
         </button>
       </section>
 

package/template_scaffold/src/components/FunnelFlow.tsx

@@ -9,8 +9,11 @@ import {
   runtimePublicConfig,
   scheduleNextStepImagePreload,
   usePreviewDefinitionOverrideRevision,
+  usePreviewStepLocalizedContent,
 } from '@funnelsgrove/runtime';
 import { FunnelEditorPanel, FunnelEditorPanelStyles } from './FunnelEditorPanel';
+import { runtimeContent } from '@/steps/content/runtime.content';
+import { getStepContentLocale } from '@/runtime/step-content-context';
 import { funnelManifest } from '@/config/funnel.manifest';
 import type { FunnelStepId } from '@/runtime/funnel-runtime';
 import { useFunnelFlowController } from '@/runtime/use-funnel-flow-controller';
@@ -23,21 +26,23 @@ type FunnelFlowProps = {
 };
 
 function RuntimeConfigLoading() {
+  const content = usePreviewStepLocalizedContent('runtime', runtimeContent, getStepContentLocale({}));
   return (
-    <section className="runtime-config-loading" role="status" aria-label="Loading" aria-busy="true">
+    <section className="runtime-config-loading" role="status" aria-label={content.loadingLabel} aria-busy="true">
       <span className="runtime-config-loading__progress" />
     </section>
   );
 }
 
 function RuntimeConfigStatus() {
+  const content = usePreviewStepLocalizedContent('runtime', runtimeContent, getStepContentLocale({}));
   return (
     <section className="runtime-config-status" role="alert" aria-live="polite">
       <div className="runtime-config-status__content">
-        <h1>This experience is temporarily unavailable</h1>
-        <p>Please check your connection and try again.</p>
+        <h1>{content.unavailableTitle}</h1>
+        <p>{content.unavailableDescription}</p>
         <button type="button" onClick={() => window.location.reload()}>
-          Try again
+          {content.retryLabel}
         </button>
       </div>
     </section>
@@ -88,6 +93,7 @@ function FunnelFlowRuntime({
   previewFrameMounted: boolean;
 }) {
   const previewDefinitionRevision = usePreviewDefinitionOverrideRevision();
+  const content = usePreviewStepLocalizedContent('runtime', runtimeContent, getStepContentLocale({}));
   const controller = useFunnelFlowController({
     initialStepId,
     lockToInitialStep,
@@ -144,7 +150,7 @@ function FunnelFlowRuntime({
                 onClick={controller.handleContinue}
                 className={controller.buttonVariant === 'muted' ? 'is-muted' : undefined}
               >
-                {controller.buttonText}
+                {controller.activeStepMeta.actionBar?.buttonText ? controller.buttonText : content.continueLabel}
               </PrimaryButton>
             </footer>
           ) : null}

package/template_scaffold/src/components/paywall/PaywallRenewalDisclaimer.tsx

@@ -0,0 +1,23 @@
+import type { PaywallPlan } from '@funnelsgrove/payments';
+import type { StepPaywallLocaleContent } from '@/steps/content/step-32-paywall.content';
+
+type Props = {
+  plan: Pick<PaywallPlan, 'priceLabel' | 'billingInterval' | 'billingIntervalCount'> | null;
+  hasActiveDiscount: boolean;
+  copy: StepPaywallLocaleContent['checkout'];
+  catalogLabels: Record<string, string>;
+};
+
+export function PaywallRenewalDisclaimer({ plan, hasActiveDiscount, copy, catalogLabels }: Props) {
+  if (!plan) return <p className='paywall-v2-disclaimer' />;
+  const count = Math.max(1, plan.billingIntervalCount || 1);
+  const cadenceCopy = plan.billingInterval ? copy.cadence[plan.billingInterval] : null;
+  const cadence = cadenceCopy
+    ? (count === 1 ? cadenceCopy.one : cadenceCopy.many).replace('{count}', String(count))
+    : copy.cadenceFallback;
+  const text = copy.renewalConsentTemplate
+    .replace('{intro}', hasActiveDiscount ? copy.discountedIntroLabel : copy.selectedIntroLabel)
+    .replace('{amount}', catalogLabels[plan.priceLabel] ?? plan.priceLabel)
+    .replace('{cadence}', cadence);
+  return <p className='paywall-v2-disclaimer'>{text}</p>;
+}

package/template_scaffold/src/components/paywall/localize-paywall-plan-labels.ts

@@ -0,0 +1,15 @@
+import type { PaywallDisplayPlan } from '@funnelsgrove/payments';
+
+/** Translate recognized display labels while retaining arbitrary catalog copy and payment data. */
+export function localizePaywallPlanLabels(plan: PaywallDisplayPlan, labels: Record<string, string>): PaywallDisplayPlan {
+  const translate = (value: string) => typeof labels[value] === 'string' ? labels[value] : value;
+  return {
+    ...plan,
+    title: translate(plan.title),
+    priceLabel: translate(plan.priceLabel),
+    basePriceLabel: translate(plan.basePriceLabel),
+    oldPriceLabel: plan.oldPriceLabel ? translate(plan.oldPriceLabel) : plan.oldPriceLabel,
+    checkoutSummaryLabel: plan.checkoutSummaryLabel ? translate(plan.checkoutSummaryLabel) : plan.checkoutSummaryLabel,
+    featuredTag: plan.featuredTag ? translate(plan.featuredTag) : plan.featuredTag,
+  };
+}

package/template_scaffold/src/config/billing.plans.ts

@@ -1,3 +1,4 @@
+import { stepPaywallContent } from '@/steps/content/step-32-paywall.content';
 import {
   buildBillingDiscountCatalog,
   createRuntimeModeBillingPlanCatalog,
@@ -19,36 +20,36 @@ const starterLivePlans = {
     offerSetId: STARTER_OFFER_SET_ID,
     offerSetKey: STARTER_OFFER_SET_KEY,
     projectPlanId: '32b31f69-5907-4736-89c7-76d3acb38813',
-    title: '1-Week Plan',
+    title: stepPaywallContent.locales.en.catalogLabels["1-Week Plan"],
     providerPlanId: 'price_1T9WL2PPRN41Ty94g2NNOgif',
-    priceLabel: '$7.99/week',
+    priceLabel: stepPaywallContent.locales.en.catalogLabels["$7.99/week"],
     perDayAmount: '$1.14',
     amountCents: 799,
-    checkoutSummaryLabel: '$7.99 today',
+    checkoutSummaryLabel: stepPaywallContent.locales.en.catalogLabels["$7.99 today"],
   },
   secondary: {
     offerSetId: STARTER_OFFER_SET_ID,
     offerSetKey: STARTER_OFFER_SET_KEY,
     projectPlanId: 'ce0a0022-7bf0-41f2-a707-edc5e6113a07',
-    title: '1-Month Plan',
+    title: stepPaywallContent.locales.en.catalogLabels["1-Month Plan"],
     providerPlanId: 'price_1TP0IIPPRN41Ty94npkzVeDR',
-    featuredTag: '🔥 Most Popular Choice',
-    priceLabel: '$29.99/month',
+    featuredTag: stepPaywallContent.locales.en.catalogLabels["🔥 Most Popular Choice"],
+    priceLabel: stepPaywallContent.locales.en.catalogLabels["$29.99/month"],
     perDayAmount: '$1.00',
     amountCents: 2999,
-    checkoutSummaryLabel: '$29.99 today',
+    checkoutSummaryLabel: stepPaywallContent.locales.en.catalogLabels["$29.99 today"],
     isDefault: true,
   },
   tertiary: {
     offerSetId: STARTER_OFFER_SET_ID,
     offerSetKey: STARTER_OFFER_SET_KEY,
     projectPlanId: 'fb623ebc-c2fd-4e6a-8eb6-b8ed92db1b21',
-    title: '1-Year Plan',
+    title: stepPaywallContent.locales.en.catalogLabels["1-Year Plan"],
     providerPlanId: 'price_1T06AEPPRN41Ty94zvVt5xrk',
-    priceLabel: '$59.99/year',
+    priceLabel: stepPaywallContent.locales.en.catalogLabels["$59.99/year"],
     perDayAmount: '$0.16',
     amountCents: 5999,
-    checkoutSummaryLabel: '$59.99 today',
+    checkoutSummaryLabel: stepPaywallContent.locales.en.catalogLabels["$59.99 today"],
   },
 } satisfies BillingPlanCatalog;
 

package/template_scaffold/src/config/billing.test.plans.ts

@@ -1,32 +1,33 @@
+import { stepPaywallContent } from '@/steps/content/step-32-paywall.content';
 import type { BillingPlanCatalog } from '@funnelsgrove/payments';
 
 export const billingTestPlans = {
   primary: {
     projectPlanId: '32b31f69-5907-4736-89c7-76d3acb38813',
-    title: '1-Week Plan',
+    title: stepPaywallContent.locales.en.catalogLabels["1-Week Plan"],
     providerPlanId: 'price_1TOQ2fPEfkEVo5khumapOSsI',
-    priceLabel: '$9.99/week',
+    priceLabel: stepPaywallContent.locales.en.catalogLabels["$9.99/week"],
     perDayAmount: '$1.43',
     amountCents: 999,
-    checkoutSummaryLabel: '$9.99 today',
+    checkoutSummaryLabel: stepPaywallContent.locales.en.catalogLabels["$9.99 today"],
   },
   secondary: {
     projectPlanId: 'ce0a0022-7bf0-41f2-a707-edc5e6113a07',
-    title: '1-Month Plan',
+    title: stepPaywallContent.locales.en.catalogLabels["1-Month Plan"],
     providerPlanId: 'price_1TSgPZPEfkEVo5khMbtAlqsG',
-    featuredTag: '🔥 Most Popular Choice',
-    priceLabel: '$29.99/month',
+    featuredTag: stepPaywallContent.locales.en.catalogLabels["🔥 Most Popular Choice"],
+    priceLabel: stepPaywallContent.locales.en.catalogLabels["$29.99/month"],
     perDayAmount: '$1.00',
     amountCents: 2999,
-    checkoutSummaryLabel: '$29.99 today',
+    checkoutSummaryLabel: stepPaywallContent.locales.en.catalogLabels["$29.99 today"],
   },
   tertiary: {
     projectPlanId: 'fb623ebc-c2fd-4e6a-8eb6-b8ed92db1b21',
-    title: '1-Year Plan',
+    title: stepPaywallContent.locales.en.catalogLabels["1-Year Plan"],
     providerPlanId: 'price_1TBgcaPEfkEVo5khbGnGhrBA',
-    priceLabel: '$59.99/year',
+    priceLabel: stepPaywallContent.locales.en.catalogLabels["$59.99/year"],
     perDayAmount: '$0.16',
     amountCents: 5999,
-    checkoutSummaryLabel: '$59.99 today',
+    checkoutSummaryLabel: stepPaywallContent.locales.en.catalogLabels["$59.99 today"],
   },
 } satisfies BillingPlanCatalog;

package/template_scaffold/src/steps/content/runtime.content.ts

@@ -0,0 +1,22 @@
+import type { LocalizedStepContent } from '@funnelsgrove/runtime';
+
+export type RuntimeContent = {
+  loadingLabel: string;
+  unavailableTitle: string;
+  unavailableDescription: string;
+  retryLabel: string;
+  continueLabel: string;
+};
+
+export const runtimeContent = {
+  defaultLocale: 'en',
+  locales: {
+    en: {
+      loadingLabel: 'Loading',
+      unavailableTitle: 'This experience is temporarily unavailable',
+      unavailableDescription: 'Please check your connection and try again.',
+      retryLabel: 'Try again',
+      continueLabel: 'Continue',
+    },
+  },
+} as const satisfies LocalizedStepContent<RuntimeContent>;

package/template_scaffold/src/steps/content/step-32-paywall.content.ts

@@ -7,11 +7,15 @@ import type {
   StepImage,
 } from '@funnelsgrove/runtime';
 
-type StepPaywallLocaleContent = {
+export type StepPaywallLocaleContent = {
+  catalogLabels: Record<string, string>;
   loadingLabel: string;
   topBarDiscountLabel: string;
   topBarCtaLabel: string;
   countdownUnits: readonly string[];
+  countdownAriaTemplate: string;
+  selectedPlanLabel: string;
+  refundPolicyLabel: string;
   hero: {
     pills: readonly string[];
     image: StepImage;
@@ -30,6 +34,7 @@ type StepPaywallLocaleContent = {
     cardButtonLabel: string;
     metaLabels: readonly string[];
     stripeUnavailableNote: string;
+    perDayLabel: string;
   };
   checkout: {
     title: string;
@@ -67,6 +72,11 @@ type StepPaywallLocaleContent = {
     legalLinks: readonly LinkItem[];
     supportText: string;
     renewalTemplate: string;
+    renewalConsentTemplate: string;
+    discountedIntroLabel: string;
+    selectedIntroLabel: string;
+    cadenceFallback: string;
+    cadence: Record<'day' | 'week' | 'month' | 'year', { one: string; many: string }>;
     specialOffer: {
       image: StepImage;
       discountLabel: string;
@@ -94,6 +104,7 @@ type StepPaywallLocaleContent = {
     title: string;
     description: string;
     links: readonly LinkItem[];
+    detailsSuffix: string;
   };
 };
 
@@ -101,10 +112,27 @@ export const stepPaywallContent = {
   defaultLocale: 'en',
   locales: {
     en: {
+      catalogLabels: {
+        "1-Week Plan": "1-Week Plan",
+        "1-Month Plan": "1-Month Plan",
+        "1-Year Plan": "1-Year Plan",
+        "🔥 Most Popular Choice": "🔥 Most Popular Choice",
+        "$7.99/week": "$7.99/week",
+        "$9.99/week": "$9.99/week",
+        "$29.99/month": "$29.99/month",
+        "$59.99/year": "$59.99/year",
+        "$7.99 today": "$7.99 today",
+        "$9.99 today": "$9.99 today",
+        "$29.99 today": "$29.99 today",
+        "$59.99 today": "$59.99 today",
+      },
       loadingLabel: 'Loading...',
       topBarDiscountLabel: '⏰ Discount Expires in',
       topBarCtaLabel: 'GET MY PLAN',
       countdownUnits: ['minutes', 'seconds'],
+      countdownAriaTemplate: 'Time left {minutes} minutes {seconds} seconds',
+      selectedPlanLabel: 'Selected plan',
+      refundPolicyLabel: 'refund policy',
       hero: {
         pills: ['Find hidden money and', "claim what's yours"],
         image: {
@@ -124,6 +152,7 @@ export const stepPaywallContent = {
       },
       plans: {
         title: 'Choose your plan',
+        perDayLabel: 'per day',
         cardButtonLabel: 'GET MY PLAN',
         metaLabels: ['Money-back guarantee', 'Cancel anytime'],
         stripeUnavailableNote:
@@ -180,6 +209,16 @@ export const stepPaywallContent = {
           },
         ],
         supportText: 'Need help? Contact us at',
+        renewalConsentTemplate: 'Without cancellation, before the {intro} ends, I accept that the app will automatically charge {amount} {cadence} until I cancel. Cancel online via the profile on the website or app.',
+        discountedIntroLabel: 'discounted intro plan',
+        selectedIntroLabel: 'selected plan',
+        cadenceFallback: 'on your selected billing schedule',
+        cadence: {
+          day: { one: 'every day', many: 'every {count} days' },
+          week: { one: 'every week', many: 'every {count} weeks' },
+          month: { one: 'every month', many: 'every {count} months' },
+          year: { one: 'every year', many: 'every {count} years' },
+        },
         renewalTemplate:
           "You'll be charged {amount} today for your selected plan. Your subscription renews automatically unless cancelled at least 24 hours before renewal date.",
         specialOffer: {
@@ -302,6 +341,7 @@ export const stepPaywallContent = {
         ],
       },
       guarantee: {
+        detailsSuffix: 'for details and limitations.',
         image: {
           src: '/paywall/money-back-badge.jpg',
           alt: '30 day money back guarantee badge',