Notifycal · sergiojoker11 · Sep 18, 2025 · Sep 18, 2025
diff --git a/src/components/TierCard/TierCard.tsx b/src/components/TierCard/TierCard.tsx
@@ -1,5 +1,6 @@
 import TierFeatures from '@components/TierFeatures/TierFeatures';
 import { Badge, Button, Card } from '@mantine/core';
+import { FeatureInfo } from '@pricing';
 import type { TablerIcon } from '@tabler/icons-react';
 import { LanguageCode, Tier, TierId } from '@types';
 import clsx from 'clsx';
@@ -12,7 +13,7 @@ export interface TierInfo extends Tier {
   id: TierId;
   displayName: string;
   recommended?: boolean;
-  features: Array<string>;
+  features: Array<FeatureInfo>;
 }
 
 export type TierInfoWithIcon = TierInfo & { icon: TablerIcon };

diff --git a/src/components/TierFeatures/TierFeatures.tsx b/src/components/TierFeatures/TierFeatures.tsx
@@ -1,7 +1,9 @@
 import { TierInfo } from '@components/TierCard/TierCard';
-import { IconCheck, TablerIcon } from '@tabler/icons-react';
+import { ActionIcon, Popover } from '@mantine/core';
+import { IconCheck, IconInfoCircle, TablerIcon } from '@tabler/icons-react';
 import clsx from 'clsx';
 import type { FC } from 'react';
+import { useState } from 'react';
 
 interface TierFeatures {
   tier: TierInfo;
@@ -10,16 +12,47 @@ interface TierFeatures {
 }
 
 export const TierFeatures: FC<TierFeatures> = ({ tier, className, icon: Icon = IconCheck }) => {
+  const [openedPopover, setOpenedPopover] = useState<number | null>(null);
+
   return (
     <ul className={clsx('mt-4 flex flex-col gap-2 items-start text-sm opacity-80 px-0', className)}>
-      {tier.features.map((feature, index) => (
-        <li key={index} className="flex items-start gap-2 mt-2">
-          <span className={clsx(tier.recommended ? '' : 'text-primary')}>
-            <Icon />
-          </span>
-          <span>{feature}</span>
-        </li>
-      ))}
+      {tier.features.map((feature, index) => {
+        const moreInfo = feature.moreInfo;
+        return (
+          <li key={index} className="flex items-start gap-2 mt-2">
+            <span className={clsx(tier.recommended ? '' : 'text-primary')}>
+              <Icon />
+            </span>
+            <span className="flex items-center gap-1">
+              {feature.text}
+              {moreInfo && (
+                <Popover
+                  width={330}
+                  position="top"
+                  withArrow
+                  shadow="md"
+                  opened={openedPopover === index}
+                  onChange={(opened) => setOpenedPopover(opened ? index : null)}
+                >
+                  <Popover.Target>
+                    <ActionIcon
+                      size="xs"
+                      variant="subtle"
+                      color="gray"
+                      onClick={() => setOpenedPopover(openedPopover === index ? null : index)}
+                    >
+                      <IconInfoCircle size={16} />
+                    </ActionIcon>
+                  </Popover.Target>
+                  <Popover.Dropdown>
+                    <div className="text-sm">{moreInfo}</div>
+                  </Popover.Dropdown>
+                </Popover>
+              )}
+            </span>
+          </li>
+        );
+      })}
     </ul>
   );
 };

diff --git a/src/components/TierSelection/TierSelection.tsx b/src/components/TierSelection/TierSelection.tsx
@@ -50,7 +50,6 @@ export const TierSelection: FC<TierSelectionProps> = ({
           <IconShieldCheck className="text-primary-600" size={24} />
           <span className="text-base font-medium">{translation.confidenceBooster}</span>
         </div>
-        <div className="text-sm text-gray-500 max-w-2xl mx-auto mt-6">* {translation.disclaimer}</div>
       </div>
     </>
   );

diff --git a/src/pricing/tiers/i18n/ca.json b/src/pricing/tiers/i18n/ca.json
@@ -1,17 +1,36 @@
 {
   "common": {
-    "numberOfMonthlyReminders": "recordatoris mensuals inclosos*",
-    "lowCreditsAlert": "Alerta per email quan queden pocs crèdits",
-    "insufficientCreditsAlert": "Alerta per email si no es pot enviar recordatori",
-    "topupsAvailable": "Topups disponibles per completar el mes",
-    "unlimitedCalendarIntegration": "Integració il·limitada amb calendaris",
-    "reminderTypeSelection": "Selecció del tipus de recordatori"
+    "numberOfMonthlyReminders": {
+      "text": "recordatoris mensuals inclosos",
+      "moreInfo": "El nombre de recordatoris indicats pot variar en funció del prefix internacional del número de telèfon del destinatari. El nombre de recordatoris mostrat es basa en el cost per recordatori a números espanyols."
+    },
+    "lowCreditsAlert": {
+      "text": "Alerta per email quan queden pocs crèdits"
+    },
+    "insufficientCreditsAlert": {
+      "text": "Alerta per email si no es pot enviar recordatori"
+    },
+    "topupsAvailable": {
+      "text": "Topups disponibles per completar el mes"
+    },
+    "unlimitedCalendarIntegration": {
+      "text": "Integració il·limitada amb calendaris"
+    },
+    "reminderTypeSelection": {
+      "text": "Selecció del tipus de recordatori"
+    }
   },
   "byTier": {
     "supportLevel": {
-      "good": "Suport per email en màxim 72 hores",
-      "better": "Suport prioritari en màxim 48 hores",
-      "best": "Contacte directe en màxim 24 hores"
+      "good": {
+        "text": "Suport per email en màxim 72 hores"
+      },
+      "better": {
+        "text": "Suport prioritari en màxim 48 hores"
+      },
+      "best": {
+        "text": "Contacte directe en màxim 24 hores"
+      }
     }
   },
   "exclusive": {

diff --git a/src/pricing/tiers/i18n/en.json b/src/pricing/tiers/i18n/en.json
@@ -1,17 +1,36 @@
 {
   "common": {
-    "numberOfMonthlyReminders": "monthly reminders included*",
-    "lowCreditsAlert": "Email alert when credits are running low",
-    "insufficientCreditsAlert": "Email alert if reminder cannot be sent",
-    "topupsAvailable": "Top-ups available to complete the month",
-    "unlimitedCalendarIntegration": "Unlimited calendar integration",
-    "reminderTypeSelection": "Reminder type selection"
+    "numberOfMonthlyReminders": {
+      "text": "monthly reminders included",
+      "moreInfo": "The number of reminders shown may vary depending on the international prefix of the recipient's phone number. The number of reminders displayed is based on the cost per reminder to Spanish numbers."
+    },
+    "lowCreditsAlert": {
+      "text": "Email alert when credits are running low"
+    },
+    "insufficientCreditsAlert": {
+      "text": "Email alert if reminder cannot be sent"
+    },
+    "topupsAvailable": {
+      "text": "Top-ups available to complete the month"
+    },
+    "unlimitedCalendarIntegration": {
+      "text": "Unlimited calendar integration"
+    },
+    "reminderTypeSelection": {
+      "text": "Reminder type selection"
+    }
   },
   "byTier": {
     "supportLevel": {
-      "good": "Email support within 72 hours maximum",
-      "better": "Priority support within 48 hours maximum",
-      "best": "Direct contact within 24 hours maximum"
+      "good": {
+        "text": "Email support within 72 hours maximum"
+      },
+      "better": {
+        "text": "Priority support within 48 hours maximum"
+      },
+      "best": {
+        "text": "Direct contact within 24 hours maximum"
+      }
     }
   },
   "exclusive": {

diff --git a/src/pricing/tiers/i18n/es.json b/src/pricing/tiers/i18n/es.json
@@ -1,17 +1,36 @@
 {
   "common": {
-    "numberOfMonthlyReminders": "recordatorios al mes incluidos*",
-    "lowCreditsAlert": "Alerta por email cuando quedan pocos créditos",
-    "insufficientCreditsAlert": "Alerta por email si no se puede enviar recordatorio",
-    "topupsAvailable": "Topups disponibles para completar el mes",
-    "unlimitedCalendarIntegration": "Integración ilimitada con calendarios",
-    "reminderTypeSelection": "Selección del tipo de recordatorio"
+    "numberOfMonthlyReminders": {
+      "text": "recordatorios al mes incluidos",
+      "moreInfo": "El número de recordatorios indicados puede variar en función del prefijo internacional del número de teléfono del destinatario. Y se basa en el coste por recordatorio a números españoles."
+    },
+    "lowCreditsAlert": {
+      "text": "Alerta por email cuando quedan pocos créditos"
+    },
+    "insufficientCreditsAlert": {
+      "text": "Alerta por email si no se puede enviar recordatorio"
+    },
+    "topupsAvailable": {
+      "text": "Topups disponibles para completar el mes"
+    },
+    "unlimitedCalendarIntegration": {
+      "text": "Integración ilimitada con calendarios"
+    },
+    "reminderTypeSelection": {
+      "text": "Selección del tipo de recordatorio"
+    }
   },
   "byTier": {
     "supportLevel": {
-      "good": "Soporte por email en máximo 72 horas",
-      "better": "Soporte prioritario en máximo 48 horas",
-      "best": "Contacto directo en máximo 24 horas"
+      "good": {
+        "text": "Soporte por email en máximo 72 horas"
+      },
+      "better": {
+        "text": "Soporte prioritario en máximo 48 horas"
+      },
+      "best": {
+        "text": "Contacto directo en máximo 24 horas"
+      }
     }
   },
   "exclusive": {

diff --git a/src/pricing/tiers/tiers.ts b/src/pricing/tiers/tiers.ts
@@ -15,9 +15,14 @@ type CommonFeatures =
   | 'reminderTypeSelection';
 type ByTierFeatures = 'supportLevel';
 
+export interface FeatureInfo {
+  text: string;
+  moreInfo?: string | undefined;
+}
+
 interface TranslationKeys {
-  common: Record<CommonFeatures, string>;
-  byTier: Record<ByTierFeatures, Record<TierId, string>>;
+  common: Record<CommonFeatures, FeatureInfo>;
+  byTier: Record<ByTierFeatures, Record<TierId, FeatureInfo>>;
   exclusive: {
     good: Record<string, never>;
     better: Record<string, never>;
@@ -51,11 +56,18 @@ export const countryToSmsCostMapStringifiedSchema = stringifiedSchema(
 
 export type CountryToSmsCostMap = z.infer<typeof countryToSmsCostMapSchema>;
 
-const tierFeatures = (lang: LanguageCode, tierId: TierId, tierNumberOfReminders: number): Array<string> => {
+const tierFeatures = (lang: LanguageCode, tierId: TierId, tierNumberOfReminders: number): Array<FeatureInfo> => {
   const t = translations[lang];
-  const _common: Record<CommonFeatures, string> = {
+  const numberOfRemindersFeature = t.common.numberOfMonthlyReminders;
+
+  const processedNumberOfReminders: FeatureInfo = {
+    text: `${tierNumberOfReminders.toLocaleString(lang)} ${numberOfRemindersFeature.text}`,
+    moreInfo: numberOfRemindersFeature.moreInfo
+  };
+
+  const _common: Record<CommonFeatures, FeatureInfo> = {
     ...t.common,
-    numberOfMonthlyReminders: `${tierNumberOfReminders.toLocaleString(lang)} ${t.common.numberOfMonthlyReminders}`
+    numberOfMonthlyReminders: processedNumberOfReminders
   };
   const common = Object.values(_common);
   const byTier = Object.values(t.byTier).map((featureByTier) => featureByTier[tierId]);
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,7 +50,6 @@ export const TierSelection: FC<TierSelectionProps> = ({ @@
               <IconShieldCheck className="text-primary-600" size={24} />
               <span className="text-base font-medium">{translation.confidenceBooster}</span>
             </div>
-            <div className="text-sm text-gray-500 max-w-2xl mx-auto mt-6">* {translation.disclaimer}</div>
           </div>
         </>
       );
@@ Expand Down @@