From 3f202c5c6a825c281fd2d8d2edee93596eeb1016 Mon Sep 17 00:00:00 2001
From: Thomas des Francs <tdesfrancs@gmail.com>
Date: Tue, 10 Feb 2026 10:41:48 +0100
Subject: [PATCH] Fix downgrade to Pro CTA icon and wording (#17829)

## Summary
- Fixes the downgrade CTA icon for `Switch to Pro` from an up arrow to a
down arrow.
- Fixes wording generation so no `undefined` suffix is concatenated in
downgrade/plan-switch confirmation copy.

## Before

<img width="717" height="535" alt="image"
src="https://github.com/user-attachments/assets/f934d130-c9fa-46bb-b677-88edf64bc623"
/>

<img width="508" height="325" alt="image"
src="https://github.com/user-attachments/assets/4c776922-a169-4543-b791-fcefc093fa7f"
/>

## Testing
- Not run locally in this environment.
---
 .../billing/components/SettingsBillingSubscriptionInfo.tsx  | 3 ++-
 .../src/modules/billing/hooks/useBillingWording.ts          | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/billing/components/SettingsBillingSubscriptionInfo.tsx b/packages/twenty-front/src/modules/billing/components/SettingsBillingSubscriptionInfo.tsx
index 06ff2e3a8e..ea1f095efd 100644
--- a/packages/twenty-front/src/modules/billing/components/SettingsBillingSubscriptionInfo.tsx
+++ b/packages/twenty-front/src/modules/billing/components/SettingsBillingSubscriptionInfo.tsx
@@ -34,6 +34,7 @@ import { useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import {
   H2Title,
+  IconArrowDown,
   IconArrowUp,
   IconCalendarEvent,
   IconCalendarRepeat,
@@ -473,7 +474,7 @@ export const SettingsBillingSubscriptionInfo = ({
         {isEnterprisePlan &&
           (!nextPlan || currentPlan.planKey === nextPlan.planKey) && (
             <Button
-              Icon={IconArrowUp}
+              Icon={IconArrowDown}
               title={t`Switch to Pro`}
               variant="secondary"
               onClick={() => openModal(SWITCH_BILLING_PLAN_TO_PRO_MODAL_ID)}
diff --git a/packages/twenty-front/src/modules/billing/hooks/useBillingWording.ts b/packages/twenty-front/src/modules/billing/hooks/useBillingWording.ts
index 6cd13a3d18..741559ee16 100644
--- a/packages/twenty-front/src/modules/billing/hooks/useBillingWording.ts
+++ b/packages/twenty-front/src/modules/billing/hooks/useBillingWording.ts
@@ -108,15 +108,15 @@ export const useBillingWording = () => {
     const prefix =
       subscriptionStatus === SubscriptionStatus.Trialing
         ? t`Your trial period will end, and `
-        : undefined;
+        : '';
     const body = t`you will be charged $${enterprisePrice} per user per month`;
-    const suffix = isYearlyPlan ? t` billed annually` : undefined;
+    const suffix = isYearlyPlan ? t` billed annually` : '';
     return capitalize(`${prefix}${body}${suffix}.`);
   };
 
   const confirmationModalSwitchToProMessage = () => {
     const beautifiedRenewDate = getBeautifiedRenewDate();
-    const suffix1 = isYearlyPlan ? t` billed annually` : undefined;
+    const suffix1 = isYearlyPlan ? t` billed annually` : '';
     const suffix2 = t`. The change will be applied the ${beautifiedRenewDate}.`;
     const body = t`You will be charged $${proPrice} per user per month`;
     return `${body}${suffix1}${suffix2}`;