@funnelsgrove/cli 0.1.231 → 0.1.233

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',

package/template_scaffold/src/steps/content/subscription-dashboard.content.ts

@@ -0,0 +1,54 @@
+import type { LocalizedStepContent } from '@funnelsgrove/runtime';
+
+type SubscriptionDashboardContent = {
+  brand: string;
+  title: string;
+  description: string;
+  loading: string;
+  userId: string;
+  email: string;
+  status: string;
+  events: string;
+  notProvided: string;
+  unknown: string;
+  empty: string;
+  cancelAtEnd: string;
+  autoRenew: string;
+  periodEnds: string;
+  updating: string;
+  renew: string;
+  cancel: string;
+  refresh: string;
+  loadError: string;
+  cancelError: string;
+  renewError: string;
+};
+
+export const subscriptionDashboardContent = {
+  defaultLocale: 'en',
+  locales: {
+    en: {
+      "brand": "App Deals",
+      "title": "Manage Subscription",
+      "description": "View active plans and manage cancellation or renewal.",
+      "loading": "Loading subscription data...",
+      "userId": "User ID:",
+      "email": "Email:",
+      "status": "Status:",
+      "events": "Tracked events:",
+      "notProvided": "Not provided",
+      "unknown": "unknown",
+      "empty": "No subscriptions found for this user.",
+      "cancelAtEnd": "Will cancel at period end",
+      "autoRenew": "Auto-renew is active",
+      "periodEnds": "Current period ends:",
+      "updating": "Updating...",
+      "renew": "Renew",
+      "cancel": "Cancel",
+      "refresh": "Refresh",
+      "loadError": "Failed to load subscriptions",
+      "cancelError": "Failed to cancel subscription",
+      "renewError": "Failed to renew subscription"
+},
+  },
+} as const satisfies LocalizedStepContent<SubscriptionDashboardContent>;

package/template_scaffold/src/steps/step-32-paywall.tsx

@@ -2,6 +2,8 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState, type FormEvent } from 'react';
 import Image from 'next/image';
+import { localizePaywallPlanLabels } from '@/components/paywall/localize-paywall-plan-labels';
+import { PaywallRenewalDisclaimer } from '@/components/paywall/PaywallRenewalDisclaimer';
 import { checkoutRuntimeConfig } from '@/runtime/checkout-runtime-config';
 import {
   billingDiscountStorageKeys,
@@ -33,7 +35,6 @@ import {
   advancePaywallDiscountState,
   buildBillingDiscountCatalog,
   buildDiscountedPaywallPlans,
-  buildPaywallRenewalDisclaimer,
   getDefaultPlanId,
   getPaywallPromoDisplayName,
   resolvePaywallDiscountState,
@@ -226,8 +227,8 @@ function StepPaywallRuntime({
         plans: availablePlans,
         couponId: activeCouponId,
         discountPercent: discountState.discountPercent,
-      }),
-    [activeCouponId, availablePlans, discountState.discountPercent],
+      }).map((plan) => localizePaywallPlanLabels(plan, content.catalogLabels)),
+    [activeCouponId, availablePlans, discountState.discountPercent, content.catalogLabels],
   );
   const selectedPlan = useMemo(() => {
     if (availablePlans.length === 0) {
@@ -252,7 +253,7 @@ function StepPaywallRuntime({
     return displayPlans.find((plan) => plan.id === selectedPlanId) ?? displayPlans[0];
   }, [displayPlans, initialPlanId, selectedPlanId]);
   const checkoutSummaryLabel =
-    selectedDisplayPlan?.checkoutSummaryLabel?.trim() || selectedDisplayPlan?.title || 'Selected plan';
+    selectedDisplayPlan?.checkoutSummaryLabel?.trim() || selectedDisplayPlan?.title || content.selectedPlanLabel;
   const checkoutProvider = activeBillingRuntime.provider;
   const storyOptions = useMemo<readonly StoryOption[]>(
     () =>
@@ -286,17 +287,6 @@ function StepPaywallRuntime({
 
     return getPaywallPromoDisplayName(activeDiscountStartedAtMs);
   }, [activeDiscountStartedAtMs, discountState.status]);
-  const paymentDisclaimer = useMemo(() => {
-    if (!selectedPlan) {
-      return '';
-    }
-
-    return buildPaywallRenewalDisclaimer({
-      plan: selectedPlan,
-      hasActiveDiscount: Boolean(activeCouponId),
-      productName: 'the app',
-    });
-  }, [activeCouponId, selectedPlan]);
   const appliedDiscountAmountCents = useMemo(() => {
     if (!selectedDisplayPlan) {
       return 0;
@@ -934,7 +924,7 @@ function StepPaywallRuntime({
           <div className='paywall-v2-top-controls'>
             <div
               className='paywall-v2-countdown'
-              aria-label={`Time left ${String(minutes).padStart(2, '0')} minutes ${String(seconds).padStart(2, '0')} seconds`}
+              aria-label={content.countdownAriaTemplate.replace('{minutes}', String(minutes).padStart(2, '0')).replace('{seconds}', String(seconds).padStart(2, '0'))}
             >
               <p className='paywall-v2-countdown-value'>
                 <span className='paywall-v2-countdown-segment'>
@@ -1011,7 +1001,7 @@ function StepPaywallRuntime({
                       </span>
                     ) : null}
                       <span className='paywall-v2-promo-upgrade-badge-main'>
-                        {discountState.discountPercent}% OFF
+                        {content.checkout.discountLabelTemplate.replace('{percent}', String(discountState.discountPercent))}
                       </span>
                     </div>
                   <p className='paywall-v2-promo-upgrade-label'>{content.promo.upgradedLabel}</p>
@@ -1041,7 +1031,7 @@ function StepPaywallRuntime({
           <p className='paywall-v2-highlight-copy'>{content.highlight.description}</p>
         </section>
 
-        <section id='paywall-v2-plans' className='paywall-v2-plan-list' aria-label='Plans'>
+        <section id='paywall-v2-plans' className='paywall-v2-plan-list' aria-label={content.plans.title}>
           <h2 className='paywall-v2-title'>{content.plans.title}</h2>
 
           {displayPlans.map((plan) => (
@@ -1089,7 +1079,7 @@ function StepPaywallRuntime({
                       ) : null}
                       <span className='paywall-v2-plan-per-day-amount'>{plan.perDayAmount}</span>
                     </p>
-                    <p className='paywall-v2-plan-per-day-label'>{plan.perDayLabel}</p>
+                    <p className='paywall-v2-plan-per-day-label'>{content.plans.perDayLabel}</p>
                   </div>
                 </div>
               </div>
@@ -1130,7 +1120,7 @@ function StepPaywallRuntime({
             {content.plans.cardButtonLabel}
           </button>
           <p className='paywall-v2-alt-meta'>{content.plans.metaLabels.join(' · ')}</p>
-          <p className='paywall-v2-disclaimer'>{paymentDisclaimer}</p>
+          <PaywallRenewalDisclaimer plan={selectedPlan} hasActiveDiscount={Boolean(activeCouponId)} copy={content.checkout} catalogLabels={content.catalogLabels} />
           <p className='paywall-v2-support'>
             {content.checkout.supportText}{' '}
             <a href={`mailto:${supportEmail}`}>{supportEmail}</a>
@@ -1226,9 +1216,9 @@ function StepPaywallRuntime({
             <p className='paywall-v2-guarantee-text'>
               {content.guarantee.description}{' '}
               <a href={content.guarantee.links[0]?.href || '/refund-policy'}>
-                {content.guarantee.links[0]?.label || 'refund policy'}
+                {content.guarantee.links[0]?.label || content.refundPolicyLabel}
               </a>{' '}
-              for details and limitations.
+              {content.guarantee.detailsSuffix}
             </p>
           </div>
         </section>