@startsimpli/billing 0.4.35 → 0.4.39

package/src/components/PricingDetailPage.tsx

@@ -12,7 +12,8 @@ import React from "react";
 import { useProduct } from "../hooks/useProduct";
 import type { PlanChangePreview, ProductOffer, OfferFeature } from "../types";
 import { cardFeatures, cumulativeFeatureLookup, tierBelow } from "../utils/tiers";
-import { formatFeatureLabel } from "../utils/format";
+import { resolveFeatureCopy, withBillingCopy, type BillingCopy, type BillingCopyInput, type FeatureCopy } from "../copy";
+import { FeatureLabel } from "./FeatureLabel";
 import {
   isPayingSubscription,
   isUnlistedOffer,
@@ -55,6 +56,12 @@ export interface PricingDetailPageProps {
 
   /** Line under the heading; defaults to the product description. */
   subtitle?: React.ReactNode;
+
+  /** Wording overrides (trial phrasing, buttons, headings…); defaults are the original strings. */
+  copy?: BillingCopyInput;
+
+  /** Feature-row overrides by feature key: a label string or `{ label, hint }`. */
+  featureCopy?: FeatureCopy;
 }
 
 export function PricingDetailPage({
@@ -65,7 +72,10 @@ export function PricingDetailPage({
   busy: hostBusy = false,
   title,
   subtitle,
+  copy: copyOverride,
+  featureCopy,
 }: PricingDetailPageProps) {
+  const copy = withBillingCopy(copyOverride);
   const { product, loading, error, refetch } = useProduct(productId);
   const currentOffer = resolveCurrentOffer(product?.offers ?? [], currentPlan);
   const { interval, setInterval, hasChoice, entries } = useIntervalOffers(
@@ -82,7 +92,7 @@ export function PricingDetailPage({
   if (loading) {
     return (
       <div className="text-center py-16 text-gray-500">
-        Loading pricing...
+        {copy.pricingLoading}
       </div>
     );
   }
@@ -90,14 +100,14 @@ export function PricingDetailPage({
   if (error || !product) {
     return (
       <div role="alert" className="text-center py-16">
-        <p className="text-red-600">Unable to load pricing.</p>
+        <p className="text-red-600">{copy.pricingError}</p>
         <button
           type="button"
           data-testid="pricing-retry"
           onClick={refetch}
           className="mt-4 py-2 px-5 text-sm font-semibold rounded-lg bg-gray-100 text-gray-800 hover:bg-gray-200 cursor-pointer"
         >
-          Try again
+          {copy.tryAgain}
         </button>
       </div>
     );
@@ -106,7 +116,7 @@ export function PricingDetailPage({
   if (product.offers.length === 0) {
     return (
       <div className="text-center py-16 text-gray-500">
-        No pricing plans available at this time.
+        {copy.noPlans}
       </div>
     );
   }
@@ -150,11 +160,14 @@ export function PricingDetailPage({
   // Extract all unique feature keys across all offers (preserving order)
   const allFeatureKeys: string[] = [];
   const featureNameMap: Record<string, string> = {};
+  const featureHintMap: Record<string, string | undefined> = {};
   for (const offer of visibleOffers) {
     for (const feature of offer.features) {
       if (!allFeatureKeys.includes(feature.key)) {
         allFeatureKeys.push(feature.key);
-        featureNameMap[feature.key] = feature.name;
+        const override = resolveFeatureCopy(feature, featureCopy, { generic: true });
+        featureNameMap[feature.key] = override?.label ?? feature.name;
+        featureHintMap[feature.key] = override?.hint;
       }
     }
   }
@@ -176,9 +189,9 @@ export function PricingDetailPage({
           role="status"
           className="mb-8 mx-auto max-w-2xl rounded-xl border border-blue-200 bg-blue-50 p-4 text-center"
         >
-          <p className="text-sm font-semibold text-blue-900">You&apos;re on {currentOffer.name}.</p>
+          <p className="text-sm font-semibold text-blue-900">{copy.unlistedYoureOn(currentOffer.name)}</p>
           <p className="mt-1 text-sm text-blue-800">
-            It isn&apos;t one of the plans below. If you choose another plan, {currentOffer.name} ends and can&apos;t be chosen again.
+            {copy.unlistedExplain(currentOffer.name)}
           </p>
         </div>
       )}
@@ -196,10 +209,10 @@ export function PricingDetailPage({
           className="mb-8 mx-auto max-w-2xl rounded-xl border border-gray-200 bg-gray-50 p-4 text-center"
         >
           {currentPlan?.loading ? (
-            <p className="text-sm text-gray-700">Checking your plan…</p>
+            <p className="text-sm text-gray-700">{copy.checkingPlan}</p>
           ) : (
             <>
-              <p className="text-sm text-gray-700">We couldn&apos;t check your plan, so plan changes are paused.</p>
+              <p className="text-sm text-gray-700">{copy.planCheckFailed}</p>
               {currentPlan?.retry && (
                 <button
                   type="button"
@@ -207,7 +220,7 @@ export function PricingDetailPage({
                   onClick={currentPlan.retry}
                   className="mt-2 text-sm font-semibold text-blue-700 hover:underline cursor-pointer"
                 >
-                  Try again
+                  {copy.tryAgain}
                 </button>
               )}
             </>
@@ -217,7 +230,7 @@ export function PricingDetailPage({
 
       {hasChoice && (
         <div className="mb-10">
-          <IntervalToggle interval={interval} onChange={setInterval} disabled={busy} />
+          <IntervalToggle interval={interval} onChange={setInterval} disabled={busy} copy={copyOverride} />
         </div>
       )}
 
@@ -233,10 +246,12 @@ export function PricingDetailPage({
               buildsOn={below ? entries.find((e) => e.offer.id === below.id)?.tier.name ?? below.name : null}
               inherited={below ? cumulative[below.slug] ?? null : null}
               isCurrent={direction === "current"}
-              yourPlanNote={direction === "switch" && currentOffer ? `Your plan · billed ${currentOffer.intervalUnit === "year" ? "yearly" : "monthly"}` : null}
-              ctaLabel={direction ? planCtaLabel(entry.offer, direction, paying) : entry.offer.ctaText}
+              yourPlanNote={direction === "switch" && currentOffer ? copy.yourPlanBilled(currentOffer.intervalUnit === "year" ? "yearly" : "monthly") : null}
+              ctaLabel={direction ? planCtaLabel(entry.offer, direction, paying, copy) : entry.offer.ctaText}
               showTrial={direction ? trialApplies(entry.offer, direction, paying) : entry.offer.trialDays > 0}
               busy={busy || planUnknown}
+              copy={copy}
+              featureCopy={featureCopy}
               spinning={spinningId === entry.offer.id}
             />
           );
@@ -248,6 +263,8 @@ export function PricingDetailPage({
           entries={entries}
           featureKeys={allFeatureKeys}
           featureNameMap={featureNameMap}
+          featureHintMap={featureHintMap}
+          copy={copy}
         />
       )}
 
@@ -257,6 +274,7 @@ export function PricingDetailPage({
         error={planChange.pending ? planChange.error : null}
         onConfirm={planChange.confirm}
         onCancel={planChange.cancel}
+        copy={copyOverride}
       />
     </div>
   );
@@ -281,10 +299,12 @@ interface DetailCardProps {
   showTrial?: boolean;
   /** A plan change is in flight: every button waits. */
   busy?: boolean;
+  copy: BillingCopy;
+  featureCopy?: FeatureCopy;
 }
 
 function DetailCard({
-  entry, onSelect, buildsOn, inherited, yourPlanNote, isCurrent = false, ctaLabel, showTrial, busy = false, spinning = false,
+  entry, onSelect, buildsOn, inherited, yourPlanNote, isCurrent = false, ctaLabel, showTrial, busy = false, spinning = false, copy, featureCopy,
 }: DetailCardProps) {
   const { offer, tier } = entry;
   const trial = showTrial ?? offer.trialDays > 0;
@@ -309,7 +329,7 @@ function DetailCard({
     >
       {isFeatured && (
         <span className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-[var(--billing-accent,#2563eb)] text-white text-xs font-bold px-4 py-1 rounded-full uppercase tracking-wide whitespace-nowrap">
-          Most Popular
+          {copy.mostPopular}
         </span>
       )}
 
@@ -331,7 +351,7 @@ function DetailCard({
       <div className="mb-5 min-h-8">
         {trial ? (
           <span data-testid={`trial-pill-${offer.slug}`} className="inline-block bg-[var(--billing-accent-soft,#eff6ff)] text-[color:var(--billing-accent-text,#1d4ed8)] text-sm font-semibold px-3 py-1 rounded-lg w-fit">
-            {trialLabel(offer)}
+            {trialLabel(offer, copy)}
           </span>
         ) : yourPlanNote ? (
           <span data-testid={`your-plan-note-${offer.slug}`} className="inline-block bg-gray-100 text-gray-700 text-sm font-semibold px-3 py-1 rounded-lg w-fit">
@@ -341,7 +361,7 @@ function DetailCard({
       </div>
 
       <p data-testid={`card-lead-${offer.slug}`} className="text-sm font-semibold text-gray-900 mb-1 min-h-5">
-        {buildsOn ? `Everything in ${buildsOn}, plus:` : null}
+        {buildsOn ? copy.everythingIn(buildsOn) : null}
       </p>
 
       <ul className="list-none p-0 m-0 mb-7 flex-1 space-y-0">
@@ -351,7 +371,7 @@ function DetailCard({
             className="flex items-center gap-2.5 py-2.5 text-sm text-gray-600 border-b border-gray-100 last:border-0"
           >
             <FeatureIcon value={feature.value} />
-            <span>{formatFeatureLabel(feature)}</span>
+            <FeatureLabel feature={feature} featureCopy={featureCopy} />
             {typeof feature.value === "string" && (
               <span className="ml-auto text-gray-900 font-medium">{feature.value}</span>
             )}
@@ -378,7 +398,7 @@ function DetailCard({
         {spinning && (
           <span aria-hidden="true" className="inline-block align-[-2px] mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-b-transparent" />
         )}
-        {isCurrent ? "Current plan" : ctaLabel ?? offer.ctaText}
+        {isCurrent ? copy.currentPlan : ctaLabel ?? offer.ctaText}
       </button>
     </div>
   );
@@ -388,9 +408,11 @@ interface ComparisonTableProps {
   entries: IntervalEntry[];
   featureKeys: string[];
   featureNameMap: Record<string, string>;
+  featureHintMap: Record<string, string | undefined>;
+  copy: BillingCopy;
 }
 
-function ComparisonTable({ entries, featureKeys, featureNameMap }: ComparisonTableProps) {
+function ComparisonTable({ entries, featureKeys, featureNameMap, featureHintMap, copy }: ComparisonTableProps) {
   const offers = entries.map((e) => e.offer);
   // offer slug -> feature key -> feature, with cheaper tiers' capabilities
   // carried upward so a paid plan never shows a dash where free shows a tick.
@@ -402,7 +424,7 @@ function ComparisonTable({ entries, featureKeys, featureNameMap }: ComparisonTab
         <thead>
           <tr className="border-b-2 border-gray-200">
             <th scope="col" className="text-left py-4 px-4 text-sm font-semibold text-gray-500 uppercase tracking-wider">
-              Feature
+              {copy.featureColumn}
             </th>
             {entries.map(({ offer, tier }) => (
               <th
@@ -425,6 +447,7 @@ function ComparisonTable({ entries, featureKeys, featureNameMap }: ComparisonTab
             >
               <td scope="row" className="py-3 px-4 text-sm text-gray-700">
                 {featureNameMap[key]}
+                {featureHintMap[key] && <span className="block text-xs text-gray-400">{featureHintMap[key]}</span>}
               </td>
               {offers.map((offer) => {
                 const feature = featureLookup[offer.slug]?.[key];
@@ -433,7 +456,7 @@ function ComparisonTable({ entries, featureKeys, featureNameMap }: ComparisonTab
                     key={offer.slug}
                     className="text-center py-3 px-4 text-sm"
                   >
-                    <ComparisonCellValue feature={feature} />
+                    <ComparisonCellValue feature={feature} copy={copy} />
                   </td>
                 );
               })}
@@ -445,7 +468,7 @@ function ComparisonTable({ entries, featureKeys, featureNameMap }: ComparisonTab
   );
 }
 
-function ComparisonCellValue({ feature }: { feature?: OfferFeature }) {
+function ComparisonCellValue({ feature, copy }: { feature?: OfferFeature; copy: BillingCopy }) {
   if (!feature) {
     return <span className="text-gray-300">&mdash;</span>;
   }
@@ -454,7 +477,7 @@ function ComparisonCellValue({ feature }: { feature?: OfferFeature }) {
 
   if (value === true) {
     return (
-      <svg role="img" aria-label="Included" className="w-5 h-5 text-green-500 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+      <svg role="img" aria-label={copy.included} className="w-5 h-5 text-green-500 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
         <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
       </svg>
     );
@@ -462,7 +485,7 @@ function ComparisonCellValue({ feature }: { feature?: OfferFeature }) {
 
   if (value === false) {
     return (
-      <svg role="img" aria-label="Not included" className="w-5 h-5 text-gray-300 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+      <svg role="img" aria-label={copy.notIncluded} className="w-5 h-5 text-gray-300 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
         <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
       </svg>
     );
@@ -473,7 +496,7 @@ function ComparisonCellValue({ feature }: { feature?: OfferFeature }) {
   }
 
   if (typeof value === "number") {
-    return <span className="text-gray-900 font-medium">{value === -1 ? "Unlimited" : value}</span>;
+    return <span className="text-gray-900 font-medium">{value === -1 ? copy.unlimited : value}</span>;
   }
 
   return <span className="text-gray-500">{String(value)}</span>;

package/src/components/PricingPage.tsx

@@ -12,7 +12,8 @@ import React from "react";
 import { useProduct } from "../hooks/useProduct";
 import type { ProductOffer } from "../types";
 import { FeatureIcon } from "./FeatureIcon";
-import { formatFeatureLabel } from "../utils/format";
+import { withBillingCopy, type BillingCopy, type BillingCopyInput, type FeatureCopy } from "../copy";
+import { FeatureLabel } from "./FeatureLabel";
 import { resolveCurrentOfferId, trialLabel, type CurrentPlanState } from "../utils/plan";
 import { AnnualNote, IntervalToggle, OfferPrice, useIntervalOffers, type IntervalEntry } from "./IntervalToggle";
 
@@ -26,9 +27,16 @@ export interface PricingPageProps {
   /** The viewer's plan, so their card reads "Current plan" and is disabled.
    * Omit on signed-out pages. crochet_patterns-34n7. */
   currentPlan?: CurrentPlanState | null;
+
+  /** Wording overrides (trial phrasing, buttons, headings…); defaults are the original strings. */
+  copy?: BillingCopyInput;
+
+  /** Feature-row overrides by feature key: a label string or `{ label, hint }`. */
+  featureCopy?: FeatureCopy;
 }
 
-export function PricingPage({ productId, onSelectOffer, currentPlan }: PricingPageProps) {
+export function PricingPage({ productId, onSelectOffer, currentPlan, copy: copyOverride, featureCopy }: PricingPageProps) {
+  const copy = withBillingCopy(copyOverride);
   const { product, loading, error } = useProduct(productId);
   const { interval, setInterval, hasChoice, entries } = useIntervalOffers(
     product?.offers ?? [],
@@ -38,7 +46,7 @@ export function PricingPage({ productId, onSelectOffer, currentPlan }: PricingPa
   if (loading) {
     return (
       <div data-testid="pricing-loading" className="text-center py-16 text-gray-500">
-        Loading pricing...
+        {copy.pricingLoading}
       </div>
     );
   }
@@ -46,7 +54,7 @@ export function PricingPage({ productId, onSelectOffer, currentPlan }: PricingPa
   if (error || !product) {
     return (
       <div data-testid="pricing-error" className="text-center py-16 text-red-600">
-        Unable to load pricing. Please try again.
+        {copy.pricingErrorTryAgain}
       </div>
     );
   }
@@ -54,7 +62,7 @@ export function PricingPage({ productId, onSelectOffer, currentPlan }: PricingPa
   if (product.offers.length === 0) {
     return (
       <div className="text-center py-16 text-gray-500">
-        No pricing plans available at this time.
+        {copy.noPlans}
       </div>
     );
   }
@@ -74,7 +82,7 @@ export function PricingPage({ productId, onSelectOffer, currentPlan }: PricingPa
 
       {hasChoice && (
         <div className="mb-10">
-          <IntervalToggle interval={interval} onChange={setInterval} />
+          <IntervalToggle interval={interval} onChange={setInterval} copy={copyOverride} />
         </div>
       )}
 
@@ -85,6 +93,8 @@ export function PricingPage({ productId, onSelectOffer, currentPlan }: PricingPa
             entry={entry}
             onSelect={onSelectOffer}
             isCurrent={entry.offer.id === currentOfferId}
+            copy={copy}
+            featureCopy={featureCopy}
           />
         ))}
       </div>
@@ -96,9 +106,11 @@ interface PricingCardProps {
   entry: IntervalEntry;
   onSelect?: (offer: ProductOffer) => void;
   isCurrent?: boolean;
+  copy: BillingCopy;
+  featureCopy?: FeatureCopy;
 }
 
-function PricingCard({ entry, onSelect, isCurrent = false }: PricingCardProps) {
+function PricingCard({ entry, onSelect, isCurrent = false, copy, featureCopy }: PricingCardProps) {
   const { offer, tier } = entry;
   const isFeatured = offer.isFeatured;
 
@@ -116,7 +128,7 @@ function PricingCard({ entry, onSelect, isCurrent = false }: PricingCardProps) {
     >
       {isFeatured && (
         <span className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-bold px-4 py-1 rounded-full uppercase tracking-wide whitespace-nowrap">
-          Most Popular
+          {copy.mostPopular}
         </span>
       )}
 
@@ -136,7 +148,7 @@ function PricingCard({ entry, onSelect, isCurrent = false }: PricingCardProps) {
           data-testid="trial-badge"
           className="inline-block bg-blue-50 text-blue-700 text-sm font-semibold px-3 py-1 rounded-lg mb-5 w-fit"
         >
-          {trialLabel(offer)}
+          {trialLabel(offer, copy)}
         </span>
       )}
 
@@ -147,7 +159,7 @@ function PricingCard({ entry, onSelect, isCurrent = false }: PricingCardProps) {
             className="flex items-center gap-2.5 py-2.5 text-sm text-gray-600 border-b border-gray-100 last:border-0"
           >
             <FeatureIcon value={feature.value} />
-            <span>{formatFeatureLabel(feature)}</span>
+            <FeatureLabel feature={feature} featureCopy={featureCopy} />
           </li>
         ))}
       </ul>
@@ -167,7 +179,7 @@ function PricingCard({ entry, onSelect, isCurrent = false }: PricingCardProps) {
           }
         `}
       >
-        {isCurrent ? "Current plan" : offer.ctaText}
+        {isCurrent ? copy.currentPlan : offer.ctaText}
       </button>
     </div>
   );

package/src/components/PricingSection.tsx

@@ -13,7 +13,8 @@ import { useProduct } from "../hooks/useProduct";
 import type { OfferFeature, ProductOffer } from "../types";
 import { cardFeatures, cumulativeFeatureLookup, tierBelow } from "../utils/tiers";
 import { FeatureIcon } from "./FeatureIcon";
-import { formatFeatureLabel } from "../utils/format";
+import { withBillingCopy, type BillingCopy, type BillingCopyInput, type FeatureCopy } from "../copy";
+import { FeatureLabel } from "./FeatureLabel";
 import { resolveCurrentOfferId, trialLabel, type CurrentPlanState } from "../utils/plan";
 import { AnnualNote, IntervalToggle, OfferPrice, useIntervalOffers, type IntervalEntry } from "./IntervalToggle";
 
@@ -30,6 +31,12 @@ export interface PricingSectionProps {
   /** The viewer's plan, so their card reads "Current plan" and is disabled.
    * Omit on signed-out pages. crochet_patterns-34n7. */
   currentPlan?: CurrentPlanState | null;
+
+  /** Wording overrides (trial phrasing, buttons, headings…); defaults are the original strings. */
+  copy?: BillingCopyInput;
+
+  /** Feature-row overrides by feature key: a label string or `{ label, hint }`. */
+  featureCopy?: FeatureCopy;
 }
 
 export function PricingSection({
@@ -37,7 +44,10 @@ export function PricingSection({
   onSelectOffer,
   maxFeatures = 4,
   currentPlan,
+  copy: copyOverride,
+  featureCopy,
 }: PricingSectionProps) {
+  const copy = withBillingCopy(copyOverride);
   const { product, loading, error } = useProduct(productId);
   const { interval, setInterval, hasChoice, entries } = useIntervalOffers(
     product?.offers ?? [],
@@ -47,7 +57,7 @@ export function PricingSection({
   if (loading) {
     return (
       <div className="text-center py-10 text-gray-500">
-        Loading pricing...
+        {copy.pricingLoading}
       </div>
     );
   }
@@ -55,7 +65,7 @@ export function PricingSection({
   if (error || !product) {
     return (
       <div className="text-center py-10 text-red-600">
-        Unable to load pricing. Please try again.
+        {copy.pricingErrorTryAgain}
       </div>
     );
   }
@@ -63,7 +73,7 @@ export function PricingSection({
   if (product.offers.length === 0) {
     return (
       <div className="text-center py-16 text-gray-500">
-        No pricing plans available at this time.
+        {copy.noPlans}
       </div>
     );
   }
@@ -79,7 +89,7 @@ export function PricingSection({
     <div data-testid="pricing-section" className="w-full px-4 py-8">
       {hasChoice && (
         <div className="mb-6">
-          <IntervalToggle interval={interval} onChange={setInterval} />
+          <IntervalToggle interval={interval} onChange={setInterval} copy={copyOverride} />
         </div>
       )}
       <div className="flex flex-row flex-wrap justify-center gap-4 items-stretch">
@@ -94,6 +104,8 @@ export function PricingSection({
               buildsOn={below ? entries.find((e) => e.offer.id === below.id)?.tier.name ?? below.name : null}
               inherited={below ? cumulative[below.slug] ?? null : null}
               isCurrent={entry.offer.id === currentOfferId}
+              copy={copy}
+              featureCopy={featureCopy}
             />
           );
         })}
@@ -111,9 +123,11 @@ interface SectionCardProps {
   buildsOn?: string | null;
   /** What the tier below already has (cumulative); rows it matches are not repeated. */
   inherited?: Record<string, OfferFeature> | null;
+  copy: BillingCopy;
+  featureCopy?: FeatureCopy;
 }
 
-function SectionCard({ entry, onSelect, maxFeatures, buildsOn, inherited, isCurrent = false }: SectionCardProps) {
+function SectionCard({ entry, onSelect, maxFeatures, buildsOn, inherited, isCurrent = false, copy, featureCopy }: SectionCardProps) {
   const { offer, tier } = entry;
   // Featured is the tier's, so the highlight survives the Annual toggle.
   const isFeatured = !!(tier.monthly?.isFeatured || tier.annual?.isFeatured);
@@ -152,13 +166,13 @@ function SectionCard({ entry, onSelect, maxFeatures, buildsOn, inherited, isCurr
             data-testid="trial-badge"
             className="inline-block bg-[var(--billing-accent-soft,#eff6ff)] text-[color:var(--billing-accent-text,#1d4ed8)] text-xs font-semibold px-2 py-0.5 rounded-md w-fit"
           >
-            {trialLabel(offer)}
+            {trialLabel(offer, copy)}
           </span>
         )}
       </div>
 
       <p data-testid={`section-lead-${offer.slug}`} className="text-sm font-semibold text-gray-900 mb-1 min-h-5">
-        {buildsOn ? `Everything in ${buildsOn}, plus:` : null}
+        {buildsOn ? copy.everythingIn(buildsOn) : null}
       </p>
 
       <ul className="list-none p-0 m-0 mb-4 flex-1 space-y-0">
@@ -168,7 +182,7 @@ function SectionCard({ entry, onSelect, maxFeatures, buildsOn, inherited, isCurr
             className="flex items-center gap-2 py-1.5 text-sm text-gray-600 border-b border-gray-100 last:border-0"
           >
             <FeatureIcon value={feature.value} size="w-3.5 h-3.5" />
-            <span>{formatFeatureLabel(feature)}</span>
+            <FeatureLabel feature={feature} featureCopy={featureCopy} />
           </li>
         ))}
       </ul>
@@ -188,7 +202,7 @@ function SectionCard({ entry, onSelect, maxFeatures, buildsOn, inherited, isCurr
           }
         `}
       >
-        {isCurrent ? "Current plan" : offer.ctaText}
+        {isCurrent ? copy.currentPlan : offer.ctaText}
       </button>
     </div>
   );