feat: Make Cancel Subscription Option More Visible and Accessible

src/languages/de.ts

@@ -8268,7 +8268,7 @@ Fordern Sie Spesendetails wie Belege und Beschreibungen an, legen Sie Limits und
             changesBasedOn: 'Dies ändert sich basierend auf Ihrer Nutzung der Expensify Karte und den untenstehenden Abooptionen.',
         },
         requestEarlyCancellation: {
-            title: 'Frühzeitige Kündigung anfordern',
+            title: 'Abonnement kündigen',
             subtitle: 'Was ist der Hauptgrund, warum du eine vorzeitige Kündigung beantragst?',
             subscriptionCanceled: {
                 title: 'Abonnement gekündigt',

src/languages/en.ts

@@ -8238,7 +8238,7 @@ const translations = {
             changesBasedOn: 'This changes based on your Expensify Card usage and the subscription options below.',
         },
         requestEarlyCancellation: {
-            title: 'Request early cancellation',
+            title: 'Cancel subscription',
             subtitle: 'What’s the main reason you’re requesting early cancellation?',
             subscriptionCanceled: {
                 title: 'Subscription canceled',

src/languages/es.ts

@@ -8523,7 +8523,7 @@ ${amount} para ${merchant} - ${date}`,
             changesBasedOn: 'Esto varía según el uso de tu Tarjeta Expensify y las opciones de suscripción que elijas a continuación.',
         },
         requestEarlyCancellation: {
-            title: 'Solicitar cancelación anticipada',
+            title: 'Cancelar suscripción',
             subtitle: '¿Cuál es la razón principal por la que solicitas la cancelación anticipada?',
             subscriptionCanceled: {
                 title: 'Suscripción cancelada',

src/languages/fr.ts

@@ -8291,7 +8291,7 @@ Rendez obligatoires des informations de dépense comme les reçus et les descrip
             changesBasedOn: 'Cela varie en fonction de votre utilisation de la Carte Expensify et des options d’abonnement ci-dessous.',
         },
         requestEarlyCancellation: {
-            title: 'Demander une résiliation anticipée',
+            title: "Annuler l'abonnement",
             subtitle: 'Quelle est la principale raison pour laquelle vous demandez une résiliation anticipée ?',
             subscriptionCanceled: {
                 title: 'Abonnement annulé',

src/languages/it.ts

@@ -8255,7 +8255,7 @@ Richiedi dettagli sulle spese come ricevute e descrizioni, imposta limiti e valo
             changesBasedOn: "Questo cambia in base all'utilizzo della tua Carta Expensify e alle opzioni di abbonamento qui sotto.",
         },
         requestEarlyCancellation: {
-            title: 'Richiedi annullamento anticipato',
+            title: 'Annulla abbonamento',
             subtitle: 'Qual è il motivo principale per cui stai richiedendo l’annullamento anticipato?',
             subscriptionCanceled: {
                 title: 'Abbonamento annullato',

src/languages/ja.ts

@@ -8164,7 +8164,7 @@ ${reportName}
             changesBasedOn: 'これは、お客様の Expensify カードの利用状況と、以下のサブスクリプションオプションによって変わります。',
         },
         requestEarlyCancellation: {
-            title: '早期解約をリクエスト',
+            title: 'サブスクリプションをキャンセル',
             subtitle: '早期解約を申請する主な理由を教えてください。',
             subscriptionCanceled: {
                 title: 'サブスクリプションを解約しました',

src/languages/nl.ts

@@ -8231,7 +8231,7 @@ Vereis onkostendetails zoals bonnen en beschrijvingen, stel limieten en standaar
             changesBasedOn: 'Dit verandert op basis van je gebruik van de Expensify Kaart en de abonnementsopties hieronder.',
         },
         requestEarlyCancellation: {
-            title: 'Vroegtijdige annulering aanvragen',
+            title: 'Abonnement opzeggen',
             subtitle: 'Wat is de belangrijkste reden dat je om vervroegde annulering vraagt?',
             subscriptionCanceled: {
                 title: 'Abonnement geannuleerd',

src/languages/pl.ts

@@ -8219,7 +8219,7 @@ Wymagaj szczegółów wydatków, takich jak paragony i opisy, ustawiaj limity i
             changesBasedOn: 'To się zmienia w zależności od korzystania z Karty Expensify i poniższych opcji subskrypcji.',
         },
         requestEarlyCancellation: {
-            title: 'Poproś o wcześniejsze anulowanie',
+            title: 'Anuluj subskrypcję',
             subtitle: 'Jaki jest główny powód, dla którego prosisz o wcześniejsze anulowanie?',
             subscriptionCanceled: {
                 title: 'Subskrypcja anulowana',

src/languages/pt-BR.ts

@@ -8223,7 +8223,7 @@ Exija dados de despesas como recibos e descrições, defina limites e padrões e
             changesBasedOn: 'Isso muda de acordo com o uso do seu Cartão Expensify e as opções de assinatura abaixo.',
         },
         requestEarlyCancellation: {
-            title: 'Solicitar cancelamento antecipado',
+            title: 'Cancelar assinatura',
             subtitle: 'Qual é o principal motivo pelo qual você está solicitando o cancelamento antecipado?',
             subscriptionCanceled: {
                 title: 'Assinatura cancelada',

src/languages/zh-hans.ts

@@ -8017,7 +8017,7 @@ ${reportName}
             changesBasedOn: '这会根据你使用 Expensify 卡的情况以及下方的订阅选项而变化。',
         },
         requestEarlyCancellation: {
-            title: '请求提前取消',
+            title: '取消订阅',
             subtitle: '您申请提前取消的主要原因是什么？',
             subscriptionCanceled: {
                 title: '订阅已取消',

src/pages/settings/Subscription/CardSection/CancelSubscriptionMenuItem/index.native.tsx

@@ -0,0 +1,5 @@
+function CancelSubscriptionMenuItem() {
+    return null;
+}
+
+export default CancelSubscriptionMenuItem;

src/pages/settings/Subscription/CardSection/RequestEarlyCancellationMenuItem/index.tsx → src/pages/settings/Subscription/CardSection/CancelSubscriptionMenuItem/index.tsx

@@ -3,19 +3,21 @@ import {useDelegateNoAccessActions, useDelegateNoAccessState} from '@components/
 import MenuItem from '@components/MenuItem';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 
-function RequestEarlyCancellationMenuItem() {
-    const icons = useMemoizedLazyExpensifyIcons(['CalendarSolid']);
+function CancelSubscriptionMenuItem() {
+    const icons = useMemoizedLazyExpensifyIcons(['CircleSlash']);
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {isActingAsDelegate} = useDelegateNoAccessState();
     const {showDelegateNoAccessModal} = useDelegateNoAccessActions();
+    const {isOffline} = useNetwork();
 
-    const handleRequestEarlyCancellationPress = () => {
+    const handleCancelSubscriptionPress = () => {
         if (isActingAsDelegate) {
             showDelegateNoAccessModal();
             return;
@@ -25,13 +27,15 @@ function RequestEarlyCancellationMenuItem() {
     return (
         <MenuItem
             title={translate('subscription.requestEarlyCancellation.title')}
-            icon={icons.CalendarSolid}
+            icon={icons.CircleSlash}
             shouldShowRightIcon
             wrapperStyle={styles.sectionMenuItemTopDescription}
-            onPress={handleRequestEarlyCancellationPress}
+            titleStyle={styles.textStrong}
+            disabled={isOffline}
+            onPress={handleCancelSubscriptionPress}
             sentryLabel={CONST.SENTRY_LABEL.SETTINGS_SUBSCRIPTION.REQUEST_EARLY_CANCELLATION}
         />
     );
 }
 
-export default RequestEarlyCancellationMenuItem;
+export default CancelSubscriptionMenuItem;

src/pages/settings/Subscription/CardSection/CardSection.tsx

@@ -21,7 +21,15 @@ import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {getPaymentMethodDescription} from '@libs/PaymentUtils';
 import {buildQueryStringFromFilterFormValues} from '@libs/SearchQueryUtils';
-import {hasCardAuthenticatedError, isUserOnFreeTrial, shouldShowDiscountBanner, shouldShowPreTrialBillingBanner, shouldShowTrialEndedUI} from '@libs/SubscriptionUtils';
+import {
+    doesUserHavePaymentCardAdded,
+    hasCardAuthenticatedError,
+    hasUserFreeTrialEnded,
+    isUserOnFreeTrial,
+    shouldShowDiscountBanner,
+    shouldShowPreTrialBillingBanner,
+    shouldShowTrialEndedUI,
+} from '@libs/SubscriptionUtils';
 import {verifySetupIntent} from '@userActions/PaymentMethods';
 import {clearOutstandingBalance} from '@userActions/Subscription';
 import CONST from '@src/CONST';
@@ -33,11 +41,11 @@ import PreTrialBillingBanner from './BillingBanner/PreTrialBillingBanner';
 import SubscriptionBillingBanner from './BillingBanner/SubscriptionBillingBanner';
 import TrialEndedBillingBanner from './BillingBanner/TrialEndedBillingBanner';
 import TrialStartedBillingBanner from './BillingBanner/TrialStartedBillingBanner';
+import CancelSubscriptionMenuItem from './CancelSubscriptionMenuItem';
 import CardSectionActions from './CardSectionActions';
 import CardSectionButton from './CardSectionButton';
 import CardSectionDataEmpty from './CardSectionDataEmpty';
 import getSectionSubtitle from './CardSectionSubtitle';
-import RequestEarlyCancellationMenuItem from './RequestEarlyCancellationMenuItem';
 import type {BillingStatusResult} from './utils';
 import CardSectionUtils from './utils';
 
@@ -300,7 +308,11 @@ function CardSection() {
                 />
             )}
 
-            {!!(privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.ANNUAL && account?.hasPurchases) && <RequestEarlyCancellationMenuItem />}
+            {!!(
+                privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.ANNUAL &&
+                !isUserOnFreeTrial(firstDayFreeTrial, lastDayFreeTrial) &&
+                !(hasUserFreeTrialEnded(lastDayFreeTrial) && !doesUserHavePaymentCardAdded(userBillingFundID))
+            ) && <CancelSubscriptionMenuItem />}
         </Section>
     );
 }