[Free trial] Implement and show Trial Ended banner, Expensify DM GBR and custom Expensify DM chat item in the App after Free Trial ends

src/CONST.ts

@@ -658,6 +658,7 @@ const CONST = {
             LIMIT: 50,
             // OldDot Actions render getMessage from Web-Expensify/lib/Report/Action PHP files via getMessageOfOldDotReportAction in ReportActionsUtils.ts
             TYPE: {
+                ACTIONABLE_ADD_PAYMENT_CARD: 'ACTIONABLEADDPAYMENTCARD',
                 ACTIONABLE_JOIN_REQUEST: 'ACTIONABLEJOINREQUEST',
                 ACTIONABLE_MENTION_WHISPER: 'ACTIONABLEMENTIONWHISPER',
                 ACTIONABLE_REPORT_MENTION_WHISPER: 'ACTIONABLEREPORTMENTIONWHISPER',

src/components/Icon/Illustrations.ts

@@ -88,6 +88,7 @@ import SubscriptionPPU from '@assets/images/simple-illustrations/simple-illustra
 import Tag from '@assets/images/simple-illustrations/simple-illustration__tag.svg';
 import TeachersUnite from '@assets/images/simple-illustrations/simple-illustration__teachers-unite.svg';
 import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg';
+import Tire from '@assets/images/simple-illustrations/simple-illustration__tire.svg';
 import TrackShoe from '@assets/images/simple-illustrations/simple-illustration__track-shoe.svg';
 import TrashCan from '@assets/images/simple-illustrations/simple-illustration__trashcan.svg';
 import TreasureChest from '@assets/images/simple-illustrations/simple-illustration__treasurechest.svg';
@@ -194,4 +195,5 @@ export {
     CheckmarkCircle,
     CreditCardEyes,
     LockClosedOrange,
+    Tire,
 };

src/languages/en.ts

@@ -3306,6 +3306,10 @@ export default {
                 title: ({numOfDays}) => `Free trial: ${numOfDays} ${numOfDays === 1 ? 'day' : 'days'} left!`,
                 subtitle: 'Add a payment card below to continue using all of your favorite features.',
             },
+            trialEnded: {
+                title: 'Your free trial has ended',
+                subtitle: 'Add a payment card below to continue using all of your favorite features.',
+            },
         },
         cardSection: {
             title: 'Payment',

src/languages/es.ts

@@ -3806,6 +3806,10 @@ export default {
                 title: ({numOfDays}) => `Prueba gratuita: ¡${numOfDays === 1 ? `queda 1 día` : `quedan ${numOfDays} días`}!`,
                 subtitle: 'Añade una tarjeta de pago para seguir utilizando tus funciones favoritas.',
             },
+            trialEnded: {
+                title: 'Tu prueba gratuita ha terminado',
+                subtitle: 'Añade una tarjeta de pago para seguir utilizando tus funciones favoritas.',
+            },
         },
         cardSection: {
             title: 'Pago',

src/libs/ReportActionsUtils.ts

@@ -1378,6 +1378,10 @@ function getIOUActionForReportID(reportID: string, transactionID: string): OnyxE
     return action;
 }
 
+function isActionableAddPaymentCard(reportAction: OnyxEntry<ReportAction>): reportAction is ReportAction & OriginalMessage<'ACTIONABLEADDPAYMENTCARD'> {
+    return reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ACTIONABLE_ADD_PAYMENT_CARD;
+}
+
 export {
     extractLinksFromMessageHtml,
     getDismissedViolationMessageText,
@@ -1462,6 +1466,7 @@ export {
     getTextFromHtml,
     isTripPreview,
     getIOUActionForReportID,
+    isActionableAddPaymentCard,
 };
 
 export type {LastVisibleMessage};

src/libs/shouldRenderAppPaymentCard/index.native.ts

@@ -0,0 +1,5 @@
+type ShouldRenderAddPaymentCard = () => boolean;
+
+const shouldRenderAddPaymentCard: ShouldRenderAddPaymentCard = () => false;
+
+export default shouldRenderAddPaymentCard;

src/libs/shouldRenderAppPaymentCard/index.ts

@@ -0,0 +1,5 @@
+type ShouldRenderAddPaymentCard = () => boolean;
+
+const shouldRenderAddPaymentCard: ShouldRenderAddPaymentCard = () => true;
+
+export default shouldRenderAddPaymentCard;

src/pages/home/report/ReportActionItem.tsx

@@ -50,6 +50,7 @@ import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import SelectionScraper from '@libs/SelectionScraper';
+import shouldRenderAddPaymentCard from '@libs/shouldRenderAppPaymentCard';
 import {ReactionListContext} from '@pages/home/ReportScreenContext';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
@@ -399,6 +400,20 @@ function ReportActionItem({
             return [];
         }
 
+        if (ReportActionsUtils.isActionableAddPaymentCard(action) && shouldRenderAddPaymentCard()) {
+            return [
+                {
+                    text: 'subscription.cardSection.addCardButton',
+                    key: `${action.reportActionID}-actionableAddPaymentCard-submit`,
+                    onPress: () => {
+                        Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION);
+                    },
+                    isMediumSized: true,
+                    isPrimary: true,
+                },
+            ];
+        }
+
         if (ReportActionsUtils.isActionableTrackExpense(action)) {
             const transactionID = ReportActionsUtils.getOriginalMessage(action)?.transactionID;
             return [

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import * as Illustrations from '@components/Icon/Illustrations';
+import useLocalize from '@hooks/useLocalize';
+import BillingBanner from './BillingBanner';
+
+function TrialEndedBillingBanner() {
+    const {translate} = useLocalize();
+
+    return (
+        <BillingBanner
+            title={translate('subscription.billingBanner.trialEnded.title')}
+            subtitle={translate('subscription.billingBanner.trialEnded.subtitle')}
+            icon={Illustrations.Tire}
+        />
+    );
+}
+
+TrialEndedBillingBanner.displayName = 'TrialEndedBillingBanner';
+
+export default TrialEndedBillingBanner;

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

@@ -17,6 +17,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import PreTrialBillingBanner from './BillingBanner/PreTrialBillingBanner';
+import TrialEndedBillingBanner from './BillingBanner/TrialEndedBillingBanner';
 import TrialStartedBillingBanner from './BillingBanner/TrialStartedBillingBanner';
 import CardSectionActions from './CardSectionActions';
 import CardSectionDataEmpty from './CardSectionDataEmpty';
@@ -37,7 +38,16 @@ function CardSection() {
     const nextPaymentDate = !isEmptyObject(privateSubscription) ? CardSectionUtils.getNextBillingDate() : undefined;
 
     const sectionSubtitle = defaultCard && !!nextPaymentDate ? translate('subscription.cardSection.cardNextPayment', {nextPaymentDate}) : translate('subscription.cardSection.subtitle');
-    const BillingBanner = SubscriptionUtils.isUserOnFreeTrial() ? <TrialStartedBillingBanner /> : <PreTrialBillingBanner />;
+
+    let BillingBanner = <PreTrialBillingBanner />;
+
+    if (SubscriptionUtils.isUserOnFreeTrial()) {
+        BillingBanner = <TrialStartedBillingBanner />;
+    }
+
+    if (SubscriptionUtils.hasUserFreeTrialEnded()) {
+        BillingBanner = <TrialEndedBillingBanner />;
+    }
 
     return (
         <Section

src/types/onyx/OriginalMessage.ts

@@ -402,8 +402,15 @@ type OriginalMessageApproved = {
     expenseReportID: string;
 };
 
+/**
+ * Model of `Add payment card` report action
+ */
+type OriginalMessageAddPaymentCard = Record<string, never>;
+
 /** The map type of original message */
 type OriginalMessageMap = {
+    /** */
+    [CONST.REPORT.ACTIONS.TYPE.ACTIONABLE_ADD_PAYMENT_CARD]: OriginalMessageAddPaymentCard;
     /** */
     [CONST.REPORT.ACTIONS.TYPE.ACTIONABLE_JOIN_REQUEST]: OriginalMessageJoinPolicyChangeLog;
     /** */