From 7a2754b257b1c40be8aa9e80a299a3c255553558 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Fri, 21 Jun 2024 18:05:03 +0100 Subject: [PATCH 1/8] feat: implement free trial banner and badges --- .../LHNOptionsList/OptionRowLHN.tsx | 9 ++++++++ src/languages/en.ts | 7 ++++++ src/languages/es.ts | 7 ++++++ src/pages/home/HeaderView.tsx | 8 +++++++ src/pages/settings/InitialSettingsPage.tsx | 9 ++++++-- .../BillingBanner/TrialBillingBanner.tsx | 22 +++++++++++++++++++ .../Subscription/CardSection/CardSection.tsx | 4 +++- src/styles/utils/sizing.ts | 4 ++++ 8 files changed, 67 insertions(+), 3 deletions(-) create mode 100644 src/pages/settings/Subscription/CardSection/BillingBanner/TrialBillingBanner.tsx diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx index c7797a37fd12..8a6e3b8cef2c 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.tsx +++ b/src/components/LHNOptionsList/OptionRowLHN.tsx @@ -3,6 +3,7 @@ import React, {useCallback, useRef, useState} from 'react'; import type {GestureResponderEvent, ViewStyle} from 'react-native'; import {StyleSheet, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; +import Badge from '@components/Badge'; import DisplayNames from '@components/DisplayNames'; import Hoverable from '@components/Hoverable'; import Icon from '@components/Icon'; @@ -25,6 +26,7 @@ import * as OptionsListUtils from '@libs/OptionsListUtils'; import Performance from '@libs/Performance'; import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; import * as ReportUtils from '@libs/ReportUtils'; +import * as SubscriptionUtils from '@libs/SubscriptionUtils'; import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -227,6 +229,13 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti ReportUtils.isSystemChat(report) } /> + {ReportUtils.isChatUsedForOnboarding(report) && SubscriptionUtils.isUserOnFreeTrial() && ( + + )} {isStatusVisible && ( `Free trial: ${numOfDays} ${numOfDays === 1 ? 'day' : 'days'} left`, + }, billingBanner: { preTrial: { title: 'Start a free trial', subtitle: 'To get started, ', subtitleLink: 'complete your setup checklist here', }, + trial: { + title: ({numOfDays}) => `Free trial: ${numOfDays} ${numOfDays === 1 ? 'day' : 'days'} left!`, + subtitle: 'Add a payment card below to continue using all of your favorite features.', + }, }, cardSection: { title: 'Payment', diff --git a/src/languages/es.ts b/src/languages/es.ts index 1efff57d3e3c..21009d7ada7b 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3724,12 +3724,19 @@ export default { }, subscription: { mobileReducedFunctionalityMessage: 'No puedes hacer cambios en tu suscripción en la aplicación móvil.', + badge: { + trial: ({numOfDays}) => `Prueba gratuita: ${numOfDays === 1 ? `queda 1 día` : `quedan ${numOfDays} días`}`, + }, billingBanner: { preTrial: { title: 'Iniciar una prueba gratuita', subtitle: 'Para empezar, ', subtitleLink: 'completa la lista de configuración aquí', }, + trial: { + 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.', + }, }, cardSection: { title: 'Pago', diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index 699fbab345cb..08bbfe303c70 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -2,6 +2,7 @@ import React, {memo, useMemo} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; +import Badge from '@components/Badge'; import Button from '@components/Button'; import CaretWrapper from '@components/CaretWrapper'; import ConfirmModal from '@components/ConfirmModal'; @@ -27,6 +28,7 @@ import * as HeaderUtils from '@libs/HeaderUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; +import * as SubscriptionUtils from '@libs/SubscriptionUtils'; import * as Link from '@userActions/Link'; import * as Report from '@userActions/Report'; import * as Session from '@userActions/Session'; @@ -346,6 +348,12 @@ function HeaderView({ )} + {ReportUtils.isChatUsedForOnboarding(report) && SubscriptionUtils.isUserOnFreeTrial() && ( + + )} {isTaskReport && !shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(report, parentReportAction) && } {canJoin && !shouldUseNarrowLayout && joinButton} {shouldShowThreeDotsButton && ( diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index 8fa152d5c06a..5a8513b37875 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/src/pages/settings/InitialSettingsPage.tsx @@ -30,6 +30,7 @@ import useWaitForNavigation from '@hooks/useWaitForNavigation'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; import shouldShowSubscriptionsMenu from '@libs/shouldShowSubscriptionsMenu'; +import * as SubscriptionUtils from '@libs/SubscriptionUtils'; import * as UserUtils from '@libs/UserUtils'; import {hasGlobalWorkspaceSettingsRBR} from '@libs/WorkspacesSettingsUtils'; import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; @@ -90,6 +91,8 @@ type MenuData = { title?: string; shouldShowRightIcon?: boolean; iconRight?: IconAsset; + badgeText?: string; + badgeStyle?: ViewStyle; }; type Menu = {sectionStyle: StyleProp; sectionTranslationKey: TranslationPaths; items: MenuData[]}; @@ -209,6 +212,7 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa shouldShowRightIcon: true, iconRight: Expensicons.NewWindow, link: () => Link.buildOldDotURL(CONST.OLDDOT_URLS.ADMIN_POLICIES_URL), + badgeText: SubscriptionUtils.isUserOnFreeTrial() ? translate('subscription.badge.trial', {numOfDays: SubscriptionUtils.calculateRemainingFreeTrialDays()}) : '', }); } @@ -217,7 +221,7 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa sectionTranslationKey: 'common.workspaces', items, }; - }, [policies, styles.workspaceSettingsSectionContainer]); + }, [policies, styles.workspaceSettingsSectionContainer, translate]); /** * Retuns a list of menu items data for general section @@ -315,7 +319,8 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa } })} iconStyles={item.iconStyles} - badgeText={getWalletBalance(isPaymentItem)} + badgeText={item.badgeText ?? getWalletBalance(isPaymentItem)} + badgeStyle={item.badgeStyle} fallbackIcon={item.fallbackIcon} brickRoadIndicator={item.brickRoadIndicator} floatRightAvatars={item.floatRightAvatars} diff --git a/src/pages/settings/Subscription/CardSection/BillingBanner/TrialBillingBanner.tsx b/src/pages/settings/Subscription/CardSection/BillingBanner/TrialBillingBanner.tsx new file mode 100644 index 000000000000..cc8079859f83 --- /dev/null +++ b/src/pages/settings/Subscription/CardSection/BillingBanner/TrialBillingBanner.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import * as Illustrations from '@components/Icon/Illustrations'; +import Text from '@components/Text'; +import useLocalize from '@hooks/useLocalize'; +import * as SubscriptionUtils from '@libs/SubscriptionUtils'; +import BillingBanner from './BillingBanner'; + +function TrialBillingBanner() { + const {translate} = useLocalize(); + + return ( + {translate('subscription.billingBanner.trial.subtitle')}} + icon={Illustrations.TreasureChest} + /> + ); +} + +TrialBillingBanner.displayName = 'PreTrialBillingBanner'; + +export default TrialBillingBanner; diff --git a/src/pages/settings/Subscription/CardSection/CardSection.tsx b/src/pages/settings/Subscription/CardSection/CardSection.tsx index 7f80b189c517..e0950ffafdd0 100644 --- a/src/pages/settings/Subscription/CardSection/CardSection.tsx +++ b/src/pages/settings/Subscription/CardSection/CardSection.tsx @@ -9,9 +9,11 @@ import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import DateUtils from '@libs/DateUtils'; +import * as SubscriptionUtils from '@libs/SubscriptionUtils'; import ONYXKEYS from '@src/ONYXKEYS'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import PreTrialBillingBanner from './BillingBanner/PreTrialBillingBanner'; +import TrialBillingBanner from './BillingBanner/TrialBillingBanner'; import CardSectionActions from './CardSectionActions'; import CardSectionDataEmpty from './CardSectionDataEmpty'; @@ -25,7 +27,7 @@ function CardSection() { const cardMonth = useMemo(() => DateUtils.getMonthNames(preferredLocale)[(defaultCard?.accountData?.cardMonth ?? 1) - 1], [defaultCard?.accountData?.cardMonth, preferredLocale]); - const BillingBanner = ; + const BillingBanner = SubscriptionUtils.isUserOnFreeTrial() ? : ; return (
Date: Tue, 25 Jun 2024 09:52:54 +0100 Subject: [PATCH 2/8] refactor: remove duplicate sizing --- src/styles/utils/sizing.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/styles/utils/sizing.ts b/src/styles/utils/sizing.ts index 1214a060fbdb..d0855b47f2bd 100644 --- a/src/styles/utils/sizing.ts +++ b/src/styles/utils/sizing.ts @@ -34,10 +34,6 @@ export default { maxHeight: '100%', }, - mnh0: { - minHeight: 0, - }, - mnh100: { minHeight: '100%', }, From 69f6c26aa4331f126cd86b6f6df0ff5b2d6f3199 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Tue, 25 Jun 2024 15:25:39 +0100 Subject: [PATCH 3/8] refactor: apply suggestions --- src/components/LHNOptionsList/OptionRowLHN.tsx | 2 +- src/languages/en.ts | 4 ++-- src/languages/es.ts | 4 ++-- src/pages/home/HeaderView.tsx | 2 +- src/pages/settings/InitialSettingsPage.tsx | 2 +- ...BillingBanner.tsx => TrialStartedBillingBanner.tsx} | 10 +++++----- .../settings/Subscription/CardSection/CardSection.tsx | 4 ++-- 7 files changed, 14 insertions(+), 14 deletions(-) rename src/pages/settings/Subscription/CardSection/BillingBanner/{TrialBillingBanner.tsx => TrialStartedBillingBanner.tsx} (59%) diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx index 8a6e3b8cef2c..7703b804611a 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.tsx +++ b/src/components/LHNOptionsList/OptionRowLHN.tsx @@ -232,7 +232,7 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti {ReportUtils.isChatUsedForOnboarding(report) && SubscriptionUtils.isUserOnFreeTrial() && ( )} diff --git a/src/languages/en.ts b/src/languages/en.ts index dc636ce3cbcc..2636472a2bc0 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3275,7 +3275,7 @@ export default { subscription: { mobileReducedFunctionalityMessage: 'You can’t make changes to your subscription in the mobile app.', badge: { - trial: ({numOfDays}) => `Free trial: ${numOfDays} ${numOfDays === 1 ? 'day' : 'days'} left`, + freeTrial: ({numOfDays}) => `Free trial: ${numOfDays} ${numOfDays === 1 ? 'day' : 'days'} left`, }, billingBanner: { preTrial: { @@ -3283,7 +3283,7 @@ export default { subtitle: 'To get started, ', subtitleLink: 'complete your setup checklist here', }, - trial: { + trialStarted: { title: ({numOfDays}) => `Free trial: ${numOfDays} ${numOfDays === 1 ? 'day' : 'days'} left!`, subtitle: 'Add a payment card below to continue using all of your favorite features.', }, diff --git a/src/languages/es.ts b/src/languages/es.ts index 5c2c606ad313..86392b9f448f 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3779,7 +3779,7 @@ export default { subscription: { mobileReducedFunctionalityMessage: 'No puedes hacer cambios en tu suscripción en la aplicación móvil.', badge: { - trial: ({numOfDays}) => `Prueba gratuita: ${numOfDays === 1 ? `queda 1 día` : `quedan ${numOfDays} días`}`, + freeTrial: ({numOfDays}) => `Prueba gratuita: ${numOfDays === 1 ? `queda 1 día` : `quedan ${numOfDays} días`}`, }, billingBanner: { preTrial: { @@ -3787,7 +3787,7 @@ export default { subtitle: 'Para empezar, ', subtitleLink: 'completa la lista de configuración aquí', }, - trial: { + trialStarted: { 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.', }, diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index 08bbfe303c70..a5520d9fbaf5 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -351,7 +351,7 @@ function HeaderView({ {ReportUtils.isChatUsedForOnboarding(report) && SubscriptionUtils.isUserOnFreeTrial() && ( )} {isTaskReport && !shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(report, parentReportAction) && } diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index 16f3e5d24cf3..88997ba8540b 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/src/pages/settings/InitialSettingsPage.tsx @@ -212,7 +212,7 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa shouldShowRightIcon: true, iconRight: Expensicons.NewWindow, link: () => Link.buildOldDotURL(CONST.OLDDOT_URLS.ADMIN_POLICIES_URL), - badgeText: SubscriptionUtils.isUserOnFreeTrial() ? translate('subscription.badge.trial', {numOfDays: SubscriptionUtils.calculateRemainingFreeTrialDays()}) : '', + badgeText: SubscriptionUtils.isUserOnFreeTrial() ? translate('subscription.badge.freeTrial', {numOfDays: SubscriptionUtils.calculateRemainingFreeTrialDays()}) : '', }); } diff --git a/src/pages/settings/Subscription/CardSection/BillingBanner/TrialBillingBanner.tsx b/src/pages/settings/Subscription/CardSection/BillingBanner/TrialStartedBillingBanner.tsx similarity index 59% rename from src/pages/settings/Subscription/CardSection/BillingBanner/TrialBillingBanner.tsx rename to src/pages/settings/Subscription/CardSection/BillingBanner/TrialStartedBillingBanner.tsx index cc8079859f83..4b698722771c 100644 --- a/src/pages/settings/Subscription/CardSection/BillingBanner/TrialBillingBanner.tsx +++ b/src/pages/settings/Subscription/CardSection/BillingBanner/TrialStartedBillingBanner.tsx @@ -5,18 +5,18 @@ import useLocalize from '@hooks/useLocalize'; import * as SubscriptionUtils from '@libs/SubscriptionUtils'; import BillingBanner from './BillingBanner'; -function TrialBillingBanner() { +function TrialStartedBillingBanner() { const {translate} = useLocalize(); return ( {translate('subscription.billingBanner.trial.subtitle')}} + title={translate('subscription.billingBanner.trialStarted.title', {numOfDays: SubscriptionUtils.calculateRemainingFreeTrialDays()})} + subtitle={{translate('subscription.billingBanner.trialStarted.subtitle')}} icon={Illustrations.TreasureChest} /> ); } -TrialBillingBanner.displayName = 'PreTrialBillingBanner'; +TrialStartedBillingBanner.displayName = 'TrialStartedBillingBanner'; -export default TrialBillingBanner; +export default TrialStartedBillingBanner; diff --git a/src/pages/settings/Subscription/CardSection/CardSection.tsx b/src/pages/settings/Subscription/CardSection/CardSection.tsx index b8a011a754d7..74ecc5ac25ac 100644 --- a/src/pages/settings/Subscription/CardSection/CardSection.tsx +++ b/src/pages/settings/Subscription/CardSection/CardSection.tsx @@ -13,7 +13,7 @@ import * as SubscriptionUtils from '@libs/SubscriptionUtils'; import ONYXKEYS from '@src/ONYXKEYS'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import PreTrialBillingBanner from './BillingBanner/PreTrialBillingBanner'; -import TrialBillingBanner from './BillingBanner/TrialBillingBanner'; +import TrialStartedBillingBanner from './BillingBanner/TrialStartedBillingBanner'; import CardSectionActions from './CardSectionActions'; import CardSectionDataEmpty from './CardSectionDataEmpty'; import CardSectionUtils from './utils'; @@ -32,7 +32,7 @@ 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() ? : ; + const BillingBanner = SubscriptionUtils.isUserOnFreeTrial() ? : ; return (
Date: Tue, 25 Jun 2024 15:31:16 +0100 Subject: [PATCH 4/8] refactor: apply suggestion from https://github.com/Expensify/App/pull/43855#discussion_r1651583350 --- src/libs/PolicyUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts index e8e640ba49eb..14887fb90513 100644 --- a/src/libs/PolicyUtils.ts +++ b/src/libs/PolicyUtils.ts @@ -154,7 +154,7 @@ const isPolicyAdmin = (policy: OnyxInputOrEntry | EmptyObject, currentUs (policy?.role ?? (currentUserLogin && policy?.employeeList?.[currentUserLogin]?.role)) === CONST.POLICY.ROLE.ADMIN; /** - * Checks if the current user is an user of the policy. + * Checks if the current user is of the role "user" on the policy. */ const isPolicyUser = (policy: OnyxInputOrEntry | EmptyObject, currentUserLogin?: string): boolean => (policy?.role ?? (currentUserLogin && policy?.employeeList?.[currentUserLogin]?.role)) === CONST.POLICY.ROLE.USER; From 1d406904cbdb8e77518097f92d142482d8d15993 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Wed, 26 Jun 2024 17:23:58 +0100 Subject: [PATCH 5/8] refactor: apply suggestions --- src/pages/settings/InitialSettingsPage.tsx | 4 +--- .../CardSection/BillingBanner/TrialStartedBillingBanner.tsx | 3 +-- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index 88997ba8540b..874783326728 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/src/pages/settings/InitialSettingsPage.tsx @@ -92,7 +92,6 @@ type MenuData = { shouldShowRightIcon?: boolean; iconRight?: IconAsset; badgeText?: string; - badgeStyle?: ViewStyle; }; type Menu = {sectionStyle: StyleProp; sectionTranslationKey: TranslationPaths; items: MenuData[]}; @@ -212,7 +211,7 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa shouldShowRightIcon: true, iconRight: Expensicons.NewWindow, link: () => Link.buildOldDotURL(CONST.OLDDOT_URLS.ADMIN_POLICIES_URL), - badgeText: SubscriptionUtils.isUserOnFreeTrial() ? translate('subscription.badge.freeTrial', {numOfDays: SubscriptionUtils.calculateRemainingFreeTrialDays()}) : '', + badgeText: SubscriptionUtils.isUserOnFreeTrial() ? translate('subscription.badge.freeTrial', {numOfDays: SubscriptionUtils.calculateRemainingFreeTrialDays()}) : undefined, }); } @@ -320,7 +319,6 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa })} iconStyles={item.iconStyles} badgeText={item.badgeText ?? getWalletBalance(isPaymentItem)} - badgeStyle={item.badgeStyle} fallbackIcon={item.fallbackIcon} brickRoadIndicator={item.brickRoadIndicator} floatRightAvatars={item.floatRightAvatars} diff --git a/src/pages/settings/Subscription/CardSection/BillingBanner/TrialStartedBillingBanner.tsx b/src/pages/settings/Subscription/CardSection/BillingBanner/TrialStartedBillingBanner.tsx index 4b698722771c..7f4dce39d274 100644 --- a/src/pages/settings/Subscription/CardSection/BillingBanner/TrialStartedBillingBanner.tsx +++ b/src/pages/settings/Subscription/CardSection/BillingBanner/TrialStartedBillingBanner.tsx @@ -1,6 +1,5 @@ import React from 'react'; import * as Illustrations from '@components/Icon/Illustrations'; -import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import * as SubscriptionUtils from '@libs/SubscriptionUtils'; import BillingBanner from './BillingBanner'; @@ -11,7 +10,7 @@ function TrialStartedBillingBanner() { return ( {translate('subscription.billingBanner.trialStarted.subtitle')}} + subtitle={translate('subscription.billingBanner.trialStarted.subtitle')} icon={Illustrations.TreasureChest} /> ); From dea6561349f1f9c6022ee35212253311753fb5e2 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Thu, 27 Jun 2024 18:17:59 +0100 Subject: [PATCH 6/8] fix: subscription badge border color --- src/pages/settings/InitialSettingsPage.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index 874783326728..aaadb53d1464 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/src/pages/settings/InitialSettingsPage.tsx @@ -92,6 +92,7 @@ type MenuData = { shouldShowRightIcon?: boolean; iconRight?: IconAsset; badgeText?: string; + badgeStyle?: ViewStyle; }; type Menu = {sectionStyle: StyleProp; sectionTranslationKey: TranslationPaths; items: MenuData[]}; @@ -212,6 +213,7 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa iconRight: Expensicons.NewWindow, link: () => Link.buildOldDotURL(CONST.OLDDOT_URLS.ADMIN_POLICIES_URL), badgeText: SubscriptionUtils.isUserOnFreeTrial() ? translate('subscription.badge.freeTrial', {numOfDays: SubscriptionUtils.calculateRemainingFreeTrialDays()}) : undefined, + badgeStyle: styles.badgeSuccess, }); } @@ -220,7 +222,7 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa sectionTranslationKey: 'common.workspaces', items, }; - }, [policies, styles.workspaceSettingsSectionContainer, translate]); + }, [policies, styles.badgeSuccess, styles.workspaceSettingsSectionContainer, translate]); /** * Retuns a list of menu items data for general section @@ -319,6 +321,7 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa })} iconStyles={item.iconStyles} badgeText={item.badgeText ?? getWalletBalance(isPaymentItem)} + badgeStyle={item.badgeStyle} fallbackIcon={item.fallbackIcon} brickRoadIndicator={item.brickRoadIndicator} floatRightAvatars={item.floatRightAvatars} From 97eb2a0b5fb1eaa4d88d8eca2f680b7623b3c6a4 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Fri, 28 Jun 2024 12:17:32 +0100 Subject: [PATCH 7/8] fix: applying badge success style out of free trial period --- src/pages/settings/InitialSettingsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index 2ee2ed14da73..65acd3660f7b 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/src/pages/settings/InitialSettingsPage.tsx @@ -213,7 +213,7 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa iconRight: Expensicons.NewWindow, link: () => Link.buildOldDotURL(CONST.OLDDOT_URLS.ADMIN_POLICIES_URL), badgeText: SubscriptionUtils.isUserOnFreeTrial() ? translate('subscription.badge.freeTrial', {numOfDays: SubscriptionUtils.calculateRemainingFreeTrialDays()}) : undefined, - badgeStyle: styles.badgeSuccess, + badgeStyle: SubscriptionUtils.isUserOnFreeTrial() ? styles.badgeSuccess : undefined, }); } From 2f9698c81fdf4892a735d9bb97eac67c14f62676 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Mon, 1 Jul 2024 09:48:16 +0100 Subject: [PATCH 8/8] feat: change free trial started banner copy --- src/languages/en.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index b9901fdd65ca..7bee45d52485 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3386,7 +3386,7 @@ export default { }, trialStarted: { title: ({numOfDays}) => `Free trial: ${numOfDays} ${numOfDays === 1 ? 'day' : 'days'} left!`, - subtitle: 'Add a payment card below to continue using all of your favorite features.', + subtitle: 'Add a payment card to continue using all of your favorite features.', }, }, cardSection: {