@funnelsgrove/cli 0.1.231 → 0.1.237

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

@@ -0,0 +1,54 @@
+import type { LocalizedStepContent } from '@funnelsgrove/runtime';
+
+export 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>