[Free trial] Implement and show Pre-Trial banner in the App during Pre-Trial

src/languages/en.ts

@@ -3213,6 +3213,13 @@ export default {
     },
     subscription: {
         mobileReducedFunctionalityMessage: 'You can’t make changes to your subscription in the mobile app.',
+        billingBanner: {
+            preTrial: {
+                title: 'Start a free trial',
+                subtitle: 'To get started, ',
+                subtitleLink: 'complete your setup checklist here',
+            },
+        },
         cardSection: {
             title: 'Payment',
             subtitle: 'Add a payment card to pay for your Expensify subscription.',

src/languages/es.ts

@@ -3717,6 +3717,13 @@ export default {
     },
     subscription: {
         mobileReducedFunctionalityMessage: 'No puedes hacer cambios en tu suscripción en la aplicación móvil.',
+        billingBanner: {
+            preTrial: {
+                title: 'Iniciar una prueba gratuita',
+                subtitle: 'Para empezar, ',
+                subtitleLink: 'completa la lista de configuración aquí',
+            },
+        },
         cardSection: {
             title: 'Pago',
             subtitle: 'Añade una tarjeta de pago para abonar tu suscripción a Expensify',

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {View} from 'react-native';
+import type {ValueOf} from 'type-fest';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import Text from '@components/Text';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import type IconAsset from '@src/types/utils/IconAsset';
+
+type BillingBannerProps = {
+    /** The title of the banner. */
+    title: string | React.ReactNode;
+
+    /** The subtitle of the banner. */
+    subtitle: string | React.ReactNode;
+
+    /** The icon to display in the banner. */
+    icon: IconAsset;
+
+    /** The type of brick road indicator to show. */
+    brickRoadIndicator?: ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS>;
+
+    /** Styles to apply to the container. */
+    style?: StyleProp<ViewStyle>;
+
+    /** Styles to apply to the title. */
+    titleStyle?: StyleProp<TextStyle>;
+
+    /** Styles to apply to the subtitle. */
+    subtitleStyle?: StyleProp<TextStyle>;
+};
+
+function BillingBanner({title, subtitle, icon, brickRoadIndicator, style, titleStyle, subtitleStyle}: BillingBannerProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    return (
+        <View style={[styles.pv4, styles.ph5, styles.flexRow, styles.gap3, styles.w100, styles.alignItemsCenter, styles.trialBannerBackgroundColor, style]}>
+            <Icon
+                src={icon}
+                width={variables.menuIconSize}
+                height={variables.menuIconSize}
+            />
+
+            <View style={[styles.flex1, styles.justifyContentCenter]}>
+                {typeof title === 'string' ? <Text style={[styles.textStrong, titleStyle]}>{title}</Text> : title}
+                {typeof subtitle === 'string' ? <Text style={subtitleStyle}>{subtitle}</Text> : subtitle}
+            </View>
+
+            {!!brickRoadIndicator && (
+                <Icon
+                    src={Expensicons.DotIndicator}
+                    fill={brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR ? theme.danger : theme.success}
+                />
+            )}
+        </View>
+    );
+}
+
+BillingBanner.displayName = 'BillingBanner';
+
+export default BillingBanner;

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import * as Illustrations from '@components/Icon/Illustrations';
+import Text from '@components/Text';
+import TextLink from '@components/TextLink';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as Report from '@libs/actions/Report';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReportUtils from '@libs/ReportUtils';
+import ROUTES from '@src/ROUTES';
+import BillingBanner from './BillingBanner';
+
+function PreTrialBillingBanner() {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    const navigateToChat = () => {
+        const reportUsedForOnboarding = ReportUtils.getChatUsedForOnboarding();
+
+        if (!reportUsedForOnboarding) {
+            return;
+        }
+
+        Report.openReport(reportUsedForOnboarding.reportID);
+        Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(reportUsedForOnboarding.reportID));
+    };
+
+    return (
+        <BillingBanner
+            title={translate('subscription.billingBanner.preTrial.title')}
+            subtitle={
+                <Text>
+                    {translate('subscription.billingBanner.preTrial.subtitle')}
+                    <TextLink
+                        style={styles.link}
+                        onPress={navigateToChat}
+                    >
+                        {translate('subscription.billingBanner.preTrial.subtitleLink')}
+                    </TextLink>
+                </Text>
+            }
+            icon={Illustrations.TreasureChest}
+        />
+    );
+}
+
+PreTrialBillingBanner.displayName = 'PreTrialBillingBanner';
+
+export default PreTrialBillingBanner;