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.
This commit is contained in:
Thomas des Francs
2026-02-10 10:41:48 +01:00
committed by GitHub
parent a63b31931f
commit 3f202c5c6a
2 changed files with 5 additions and 4 deletions
@@ -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)}
@@ -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}`;