Refactor credits page for dynamic promo translations and theming (#180)

* Refactor credits page for dynamic promo translations and theming

* fix: address PR comments

* perf(build): sentry - disable telemetry in preview or development build environments

* Apply suggestions from code review

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>

Author: gianpaj

app/[lang]/(dashboard)/dashboard/credits/credit-topup.tsx

@@ -12,24 +12,30 @@ import type { Locale } from '@/lib/i18n/i18n-config';
 import { getTopupPackages } from '@/lib/stripe/pricing';
 
 interface CreditTopupProps {
-  dict: (typeof lang)['credits'];
+  dict: typeof lang;
   lang: Locale;
 }
 
-type ActionState = {
+interface ActionState {
   error: string | null;
   success: boolean;
-};
+}
 
 const initialState: ActionState = {
   error: null,
   success: false,
 };
 
 export function CreditTopup({ dict, lang }: CreditTopupProps) {
+  const promoTheme = process.env.NEXT_PUBLIC_PROMO_THEME || 'pink'; // 'orange' or 'pink'
   const isPromoEnabled = process.env.NEXT_PUBLIC_PROMO_ENABLED === 'true';
+  const translations = process.env.NEXT_PUBLIC_PROMO_TRANSLATIONS || '';
+  const bannerTranslations =
+    Object.hasOwn(dict.promos, translations)
+      ? dict.promos[translations as keyof typeof dict.promos]
+      : undefined;
 
-  const { plans: pPlans } = dict;
+  const { plans: pPlans } = dict.credits;
 
   const TOPUP_PACKAGES = getTopupPackages(lang);
 
@@ -79,25 +85,28 @@ export function CreditTopup({ dict, lang }: CreditTopupProps) {
   ];
 
   return (
-    <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-3">
+    <div
+      className="grid gap-6 md:grid-cols-1 lg:grid-cols-3"
+      data-promo-theme={promoTheme}
+    >
       {plans.map((plan) => (
-        <CreditCard
-          dict={dict}
+        <PlanCard
+          bannerTranslations={bannerTranslations}
+          dict={dict.credits}
           isPromoEnabled={isPromoEnabled}
           key={plan.id}
           plan={plan}
-          pPlans={pPlans}
         />
       ))}
     </div>
   );
 }
 
-function CreditCard({
+function PlanCard({
   plan,
   dict,
+  bannerTranslations,
   isPromoEnabled,
-  pPlans,
 }: {
   plan: {
     id: string;
@@ -111,9 +120,9 @@ function CreditCard({
     creditsText: string;
     promoBonus?: string;
   };
-  dict: (typeof lang)['credits'];
   isPromoEnabled: boolean;
-  pPlans: (typeof lang)['credits']['plans'];
+  dict: (typeof lang)['credits'];
+  bannerTranslations?: (typeof lang)['promos'][keyof (typeof lang)['promos']];
 }) {
   const formAction = async (
     _prevState: ActionState,
@@ -148,18 +157,20 @@ function CreditCard({
 
   return (
     <Card
-      className={`grid grid-rows-auto gap-2 p-6 ${plan.isPopular ? 'border-none ring-2 ring-pink-400' : ''} relative overflow-hidden`}
+      className={`grid grid-rows-auto gap-2 p-6 ${plan.isPopular ? 'border-none ring-2 ring-promo-accent' : ''} relative overflow-hidden`}
     >
       {isPromoEnabled && plan.price > 0 && (
-        <div className="absolute top-0 right-0 rounded-bl-lg bg-gradient-to-br from-pink-500 to-pink-600 px-3 py-1 font-bold text-white text-xs">
-          Black Friday Sale
+        <div className="absolute top-0 right-0 rounded-bl-lg bg-gradient-to-br from-promo-primary to-promo-primary-dark px-3 py-1 font-bold text-white text-xs">
+          {bannerTranslations?.pricing.bannerText}
         </div>
       )}
       <div>
         <div className="flex items-center justify-between">
           <h3 className="font-semibold text-xl">{plan.name}</h3>
           {!isPromoEnabled && plan.isPopular ? (
-            <Badge className="rounded-full bg-pink-600">{pPlans.popular}</Badge>
+            <Badge className="rounded-full bg-promo-text">
+              {dict.plans.popular}
+            </Badge>
           ) : (
             plan.price > 10 && (
               <Badge
@@ -193,7 +204,7 @@ function CreditCard({
       <div className="font-medium text-sm">
         {plan.creditsText}{' '}
         {isPromoEnabled && plan.promoBonus && (
-          <span className="font-semibold text-pink-600 dark:text-pink-400">
+          <span className="font-semibold text-promo-text-dark">
             (+{plan.promoBonus} bonus)
           </span>
         )}

app/[lang]/(dashboard)/dashboard/credits/page.tsx

@@ -27,7 +27,7 @@ export default async function CreditsPage(props: {
   const { lang } = params;
 
   const supabase = await createClient();
-  const dict = await getDictionary(lang, 'credits');
+  const dict = await getDictionary(lang);
 
   const { data } = await supabase.auth.getUser();
   const user = data?.user;
@@ -84,11 +84,15 @@ export default async function CreditsPage(props: {
 
   return (
     <div className="space-y-8">
-      <TopupStatus dict={dict} />
+      <TopupStatus dict={dict.credits} />
       <div className="flex flex-col justify-between gap-4 lg:flex-row">
         <div className="w-full lg:w-3/4">
-          <h3 className="mb-4 font-semibold text-lg">{dict.topup.title}</h3>
-          <p className="text-muted-foreground">{dict.topup.description}</p>
+          <h3 className="mb-4 font-semibold text-lg">
+            {dict.credits.topup.title}
+          </h3>
+          <p className="text-muted-foreground">
+            {dict.credits.topup.description}
+          </p>
         </div>
         <Button asChild icon={ArrowTopRightIcon} iconPlacement="right">
           <Link
@@ -104,8 +108,13 @@ export default async function CreditsPage(props: {
       <CreditTopup dict={dict} lang={lang} />
 
       <div className="my-8">
-        <h3 className="mb-4 font-semibold text-lg">{dict.history.title}</h3>
-        <CreditHistory dict={dict} transactions={existingTransactions} />
+        <h3 className="mb-4 font-semibold text-lg">
+          {dict.credits.history.title}
+        </h3>
+        <CreditHistory
+          dict={dict.credits}
+          transactions={existingTransactions}
+        />
       </div>
 
       {shouldShowPricingTable && clientSecret && (

app/globals.css

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/correctness/noUnknownFunction: Tailwind CSS directives like theme() are not standard CSS functions */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -20,6 +21,29 @@
   :root {
     --radius: 0.5rem;
     --white: #fff;
+
+    /* Promo theme colors - default to pink */
+    --promo-primary: theme('colors.pink.500');
+    --promo-primary-dark: theme('colors.pink.600');
+    --promo-accent: theme('colors.pink.400');
+    --promo-text: theme('colors.pink.600');
+    --promo-text-dark: theme('colors.pink.400');
+  }
+
+  [data-promo-theme="orange"] {
+    --promo-primary: theme('colors.orange.500');
+    --promo-primary-dark: theme('colors.orange.600');
+    --promo-accent: theme('colors.orange.400');
+    --promo-text: theme('colors.orange.600');
+    --promo-text-dark: theme('colors.orange.400');
+  }
+
+  [data-promo-theme="pink"] {
+    --promo-primary: theme('colors.pink.500');
+    --promo-primary-dark: theme('colors.pink.600');
+    --promo-accent: theme('colors.pink.400');
+    --promo-text: theme('colors.pink.600');
+    --promo-text-dark: theme('colors.pink.400');
   }
 
   .dark {
@@ -62,6 +86,7 @@
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground antialiased;
   }
@@ -70,10 +95,10 @@
     @apply bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)];
   }
 }
+
 @-moz-document url-prefix() {
   .disable-bg-firefox {
     background: none;
-    /* biome-ignore lint/complexity/noImportantStyles: it's grand */
     background-image: none !important;
   }
 }
@@ -87,6 +112,7 @@
   height: var(--ta1-height, auto);
   resize: none;
 }
+
 .textarea-2 {
   height: var(--ta2-height, auto);
   resize: none;

components/pricing-table.tsx

@@ -10,6 +10,12 @@ import { getTopupPackages } from '@/lib/stripe/pricing';
 
 async function PricingTable({ lang }: { lang: Locale }) {
   const credits = await getDictionary(lang, 'credits');
+  const translations = process.env.NEXT_PUBLIC_PROMO_TRANSLATIONS;
+  const promos = await getDictionary(lang, 'promos');
+  const bannerTranslations =
+    translations && Object.hasOwn(promos, translations)
+      ? promos[translations as keyof typeof promos]
+      : undefined;
   const { plans: pPlans, billing } = credits;
 
   const isPromoEnabled = process.env.NEXT_PUBLIC_PROMO_ENABLED === 'true';
@@ -63,28 +69,33 @@ async function PricingTable({ lang }: { lang: Locale }) {
     },
   ];
 
+  const promoTheme = process.env.NEXT_PUBLIC_PROMO_THEME || 'pink'; // 'orange' or 'pink'
+
   return (
-    <div className="flex flex-col gap-6 py-16 xl:px-28">
+    <div
+      className="flex flex-col gap-6 py-16 xl:px-28"
+      data-promo-theme={promoTheme}
+    >
       <h2 className="mx-auto mb-4 font-semibold text-2xl">
         {credits.pricingPlan}
       </h2>
       <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-3">
         {plans.map((plan) => (
           <Card
-            className={`grid grid-rows-[auto_minmax(60px,auto)_auto_1fr] gap-2 p-6 ${plan.isPopular ? 'border-none ring-2 ring-orange-400' : ''} relative overflow-hidden`}
+            className={`grid grid-rows-[auto_minmax(60px,auto)_auto_1fr] gap-2 p-6 ${plan.isPopular ? 'border-none ring-2 ring-promo-accent' : ''} relative overflow-hidden`}
             key={plan.name}
             // className={`grid gap-2 grid-rows-[auto_minmax(60px,auto)_auto_1fr] p-6 ${plan.isPopular ? 'border-green-600' : ''}`}
           >
             {isPromoEnabled && plan.price > 0 && (
-              <div className="absolute top-0 right-0 rounded-bl-lg bg-gradient-to-br from-orange-500 to-orange-600 px-3 py-1 font-bold text-white text-xs">
-                🎃 Halloween Special
+              <div className="absolute top-0 right-0 rounded-bl-lg bg-gradient-to-br from-promo-primary to-promo-primary-dark px-3 py-1 font-bold text-white text-xs">
+                {bannerTranslations?.pricing.bannerText}
               </div>
             )}
             <div>
               <div className="flex items-center justify-between">
                 <h3 className="font-semibold text-xl">{plan.name}</h3>
                 {!isPromoEnabled && plan.isPopular ? (
-                  <Badge className="rounded-full bg-orange-600">
+                  <Badge className="rounded-full bg-promo-text">
                     {/*<Badge className="rounded-full bg-green-600">*/}
                     {pPlans.popular}
                   </Badge>
@@ -132,7 +143,7 @@ async function PricingTable({ lang }: { lang: Locale }) {
               <div className="font-medium text-sm">
                 {plan.creditsText}{' '}
                 {isPromoEnabled && plan.promoBonus && (
-                  <span className="font-semibold text-orange-600 dark:text-orange-400">
+                  <span className="font-semibold text-promo-text-dark">
                     (+{plan.promoBonus} bonus)
                   </span>
                 )}

lib/i18n/dictionaries/de.json

@@ -323,7 +323,10 @@
       "text": "🎃 Halloween Special – Erhalten Sie bis zu 35% Extra-Credits bei einem Kauf 👻\nZeitlich begrenztes Angebot 🦇",
       "ctaLoggedIn": "Credits Erhalten",
       "ctaLoggedOut": "Jetzt Registrieren",
-      "arialLabelDismiss": "Halloween-Banner schließen"
+      "arialLabelDismiss": "Halloween-Banner schließen",
+      "pricing": {
+        "bannerText": "🎃 Halloween-Special"
+      }
     },
     "blackFridayBanner": {
       "text": "🛍️ Black Friday Sale – Erhalten Sie bis zu 50% Extra-Credits bei jedem Kauf!\nZeitlich begrenztes Angebot 🔥",
@@ -336,6 +339,9 @@
         "hours": "Stunden",
         "minutes": "Min",
         "seconds": "Sek"
+      },
+      "pricing": {
+        "bannerText": "Black Friday Verkauf"
       }
     }
   }

lib/i18n/dictionaries/en.json

@@ -323,7 +323,10 @@
       "text": "🎃 Halloween Special – Get up to 35% extra credits with a purchase 👻\nLimited time offer 🦇",
       "ctaLoggedIn": "Claim Offer 🎃",
       "ctaLoggedOut": "Sign Up Now 🎃",
-      "arialLabelDismiss": "Dismiss Halloween banner"
+      "arialLabelDismiss": "Dismiss Halloween banner",
+      "pricing": {
+        "bannerText": "🎃 Halloween Special"
+      }
     },
     "blackFridayBanner": {
       "text": "🛍️ Black Friday Sale – Get up to 35% extra credits!",
@@ -336,6 +339,9 @@
         "hours": "Hours",
         "minutes": "Min",
         "seconds": "Sec"
+      },
+      "pricing": {
+        "bannerText": "Black Friday Sale"
       }
     }
   }

lib/i18n/dictionaries/es.json

@@ -323,7 +323,10 @@
       "text": "🎃 Especial Halloween – Consigue hasta un 35% de créditos extra con tu compra 👻\nOferta por tiempo limitado 🦇",
       "ctaLoggedIn": "Obtener Créditos",
       "ctaLoggedOut": "Regístrate Ahora",
-      "arialLabelDismiss": "Descartar banner de Halloween"
+      "arialLabelDismiss": "Descartar banner de Halloween",
+      "pricing": {
+        "bannerText": "🎃 Especial Halloween"
+      }
     },
     "blackFridayBanner": {
       "text": "🛍️ Oferta Black Friday – ¡Consigue hasta un 50% de créditos extra con cualquier compra!\nOferta por tiempo limitado 🔥",
@@ -336,6 +339,9 @@
         "hours": "Horas",
         "minutes": "Min",
         "seconds": "Seg"
+      },
+      "pricing": {
+        "bannerText": "Oferta Black Friday"
       }
     }
   }

lib/stripe/pricing.ts

@@ -6,13 +6,13 @@ export const getTopupPackages = (lang: Locale) => {
   // Get promo bonuses
   const promoBonuses = {
     stater: isPromoEnabled
-      ? Number.parseInt(process.env.NEXT_PUBLIC_PROMO_BONUS_STARTER || '0')
+      ? Number.parseInt(process.env.NEXT_PUBLIC_PROMO_BONUS_STARTER || '0', 10)
       : 0,
     standard: isPromoEnabled
-      ? Number.parseInt(process.env.NEXT_PUBLIC_PROMO_BONUS_STANDARD || '0')
+      ? Number.parseInt(process.env.NEXT_PUBLIC_PROMO_BONUS_STANDARD || '0', 10)
       : 0,
     pro: isPromoEnabled
-      ? Number.parseInt(process.env.NEXT_PUBLIC_PROMO_BONUS_PRO || '0')
+      ? Number.parseInt(process.env.NEXT_PUBLIC_PROMO_BONUS_PRO || '0', 10)
       : 0,
   };
 

next.config.js

@@ -109,6 +109,8 @@ if (process.env.NODE_ENV === 'production') {
     // Only print logs for uploading source maps in CI
     silent: !process.env.CI,
 
+    telemetry: process.env.VERCEL_ENV === 'production',
+
     // For all available options, see:
     // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 

tailwind.config.ts

@@ -77,6 +77,13 @@ const config: Config = {
           border: 'hsl(var(--sidebar-border))',
           ring: 'hsl(var(--sidebar-ring))',
         },
+        promo: {
+          primary: 'var(--promo-primary)',
+          'primary-dark': 'var(--promo-primary-dark)',
+          accent: 'var(--promo-accent)',
+          text: 'var(--promo-text)',
+          'text-dark': 'var(--promo-text-dark)',
+        },
       },
       keyframes: {
         'accordion-down': {