Update the free trial badge to display Start a free trial badge when we create a workspace for a user

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -3,7 +3,6 @@ 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';
@@ -26,8 +25,8 @@ import Parser from '@libs/Parser';
 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 FreeTrialBadge from '@pages/settings/Subscription/FreeTrailBadge';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
@@ -229,13 +228,7 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
                                                 ReportUtils.isSystemChat(report)
                                             }
                                         />
-                                        {ReportUtils.isChatUsedForOnboarding(report) && SubscriptionUtils.isUserOnFreeTrial() && (
-                                            <Badge
-                                                success
-                                                text={translate('subscription.badge.freeTrial', {numOfDays: SubscriptionUtils.calculateRemainingFreeTrialDays()})}
-                                                badgeStyles={[styles.mnh0, styles.pl2, styles.pr2, styles.ml1]}
-                                            />
-                                        )}
+                                        {ReportUtils.isChatUsedForOnboarding(report) && <FreeTrialBadge badgeStyles={[styles.mnh0, styles.pl2, styles.pr2, styles.ml1]} />}
                                         {isStatusVisible && (
                                             <Tooltip
                                                 text={statusContent}

src/hooks/useSubscriptionPlan.ts

@@ -1,6 +1,6 @@
 import {useMemo} from 'react';
 import {useOnyx} from 'react-native-onyx';
-import {isPolicyOwner} from '@libs/PolicyUtils';
+import {getOwnedPaidPolicies} from '@libs/PolicyUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
@@ -10,13 +10,7 @@ function useSubscriptionPlan() {
     const [session] = useOnyx(ONYXKEYS.SESSION);
 
     // Filter workspaces in which user is the owner and the type is either corporate (control) or team (collect)
-    const ownerPolicies = useMemo(
-        () =>
-            Object.values(policies ?? {}).filter(
-                (policy) => isPolicyOwner(policy, session?.accountID ?? -1) && (CONST.POLICY.TYPE.CORPORATE === policy?.type || CONST.POLICY.TYPE.TEAM === policy?.type),
-            ),
-        [policies, session?.accountID],
-    );
+    const ownerPolicies = useMemo(() => getOwnedPaidPolicies(policies, session?.accountID ?? -1), [policies, session?.accountID]);
 
     if (isEmptyObject(ownerPolicies)) {
         return null;

src/libs/PolicyUtils.ts

@@ -352,6 +352,10 @@ function isPaidGroupPolicy(policy: OnyxEntry<Policy>): boolean {
     return policy?.type === CONST.POLICY.TYPE.TEAM || policy?.type === CONST.POLICY.TYPE.CORPORATE;
 }
 
+function getOwnedPaidPolicies(policies: OnyxCollection<Policy> | null, currentUserAccountID: number): Policy[] {
+    return Object.values(policies ?? {}).filter((policy): policy is Policy => isPolicyOwner(policy, currentUserAccountID ?? -1) && isPaidGroupPolicy(policy));
+}
+
 function isControlPolicy(policy: OnyxEntry<Policy>): boolean {
     return policy?.type === CONST.POLICY.TYPE.CORPORATE;
 }
@@ -1042,6 +1046,7 @@ export {
     isTaxTrackingEnabled,
     shouldShowPolicy,
     getActiveAdminWorkspaces,
+    getOwnedPaidPolicies,
     canSendInvoiceFromWorkspace,
     canSendInvoice,
     hasDependentTags,

src/libs/ReportUtils.ts

@@ -424,6 +424,7 @@ type OptionData = {
     hasDraftComment?: boolean | null;
     keyForList?: string;
     searchText?: string;
+    freeTrialText?: string;
     isIOUReportOwner?: boolean | null;
     isArchivedRoom?: boolean | null;
     shouldShowSubscript?: boolean | null;

src/libs/SubscriptionUtils.ts

@@ -1,9 +1,10 @@
 import {differenceInSeconds, fromUnixTime, isAfter, isBefore} from 'date-fns';
-import Onyx from 'react-native-onyx';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import Onyx from 'react-native-onyx';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {BillingGraceEndPeriod, BillingStatus, Fund, FundList, Policy, StripeCustomerID} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import {translateLocal} from './Localize';
 import * as PolicyUtils from './PolicyUtils';
 
 const PAYMENT_STATUS = {
@@ -198,6 +199,15 @@ function hasInsufficientFundsError() {
     return billingStatus?.declineReason === 'insufficient_funds' && amountOwed !== 0;
 }
 
+/**
+ * Determines whether the pre-trial billing banner should be shown.
+ * @param [firstDay] - The start date of the free trial.
+ * @param [lastDay] - The end date of the free trial.
+ * @returns True if the pre-trial billing banner should be shown, false otherwise.
+ */
+function shouldShowPreTrialBillingBanner(firstDay: OnyxEntry<string> = firstDayFreeTrial, lastDay: OnyxEntry<string> = lastDayFreeTrial): boolean {
+    return !isUserOnFreeTrial(firstDay, lastDay) && !hasUserFreeTrialEnded(lastDay);
+}
 /**
  * @returns The card to be used for subscription billing.
  */
@@ -355,49 +365,80 @@ function hasSubscriptionGreenDotInfo(): boolean {
 
 /**
  * Calculates the remaining number of days of the workspace owner's free trial before it ends.
+ * @param [lastDay] - The end date of the free trial.
+ * @returns The remaining number of free trial days.
  */
-function calculateRemainingFreeTrialDays(): number {
-    if (!lastDayFreeTrial) {
+function calculateRemainingFreeTrialDays(lastDay: OnyxEntry<string> = lastDayFreeTrial): number {
+    if (!lastDay) {
         return 0;
     }
 
     const currentDate = new Date();
-    const lastDayFreeTrialDate = new Date(`${lastDayFreeTrial}Z`);
-    const diffInSeconds = differenceInSeconds(lastDayFreeTrialDate, currentDate);
+    const lastDayDate = new Date(`${lastDay}Z`);
+    const diffInSeconds = differenceInSeconds(lastDayDate, currentDate);
     const diffInDays = Math.ceil(diffInSeconds / 86400);
 
     return diffInDays < 0 ? 0 : diffInDays;
 }
 
+/**
+ * @param policies - The policies collection.
+ * @param [firstDay] - The start date of the free trial.
+ * @param [lastDay] - The end date of the free trial.
+ * @returns The free trial badge text.
+ */
+function getFreeTrialText(policies: OnyxCollection<Policy> | null, firstDay: OnyxEntry<string> = firstDayFreeTrial, lastDay: OnyxEntry<string> = lastDayFreeTrial): string | undefined {
+    const ownedPaidPolicies = PolicyUtils.getOwnedPaidPolicies(policies, currentUserAccountID);
+    if (isEmptyObject(ownedPaidPolicies)) {
+        return undefined;
+    }
+    if (shouldShowPreTrialBillingBanner(firstDay, lastDay)) {
+        return translateLocal('subscription.billingBanner.preTrial.title');
+    }
+    if (isUserOnFreeTrial(firstDay, lastDay)) {
+        return translateLocal('subscription.billingBanner.trialStarted.title', {numOfDays: calculateRemainingFreeTrialDays(lastDay)});
+    }
+    if (hasUserFreeTrialEnded(lastDay)) {
+        return translateLocal('subscription.billingBanner.trialEnded.title');
+    }
+
+    return undefined;
+}
+
 /**
  * Whether the workspace's owner is on its free trial period.
+ * @param [firstDay] - The start date of the free trial.
+ * @param [lastDay] - The end date of the free trial.
+ * @returns True if the user is on a free trial, false otherwise.
  */
-function isUserOnFreeTrial(): boolean {
-    if (!firstDayFreeTrial || !lastDayFreeTrial) {
+function isUserOnFreeTrial(firstDay: OnyxEntry<string> = firstDayFreeTrial, lastDay: OnyxEntry<string> = lastDayFreeTrial): boolean {
+    if (!firstDay || !lastDay) {
         return false;
     }
 
     const currentDate = new Date();
 
     // Free Trials are stored in UTC so the below code will convert the provided UTC datetime to local time
-    const firstDayFreeTrialDate = new Date(`${firstDayFreeTrial}Z`);
-    const lastDayFreeTrialDate = new Date(`${lastDayFreeTrial}Z`);
+    const firstDayDate = new Date(`${firstDay}Z`);
+    const lastDayDate = new Date(`${lastDay}Z`);
 
-    return isAfter(currentDate, firstDayFreeTrialDate) && isBefore(currentDate, lastDayFreeTrialDate);
+    return isAfter(currentDate, firstDayDate) && isBefore(currentDate, lastDayDate);
 }
 
 /**
  * Whether the workspace owner's free trial period has ended.
+ * @param [lastDay] - The end date of the free trial.
+ * @returns True if the free trial has ended, false otherwise.
  */
-function hasUserFreeTrialEnded(): boolean {
-    if (!lastDayFreeTrial) {
+function hasUserFreeTrialEnded(lastDay: OnyxEntry<string> = lastDayFreeTrial): boolean {
+    if (!lastDay) {
         return false;
     }
 
     const currentDate = new Date();
-    const lastDayFreeTrialDate = new Date(`${lastDayFreeTrial}Z`);
+    const lastDayDate = new Date(`${lastDay}Z`);
 
-    return isAfter(currentDate, lastDayFreeTrialDate);
+    return isAfter(currentDate, lastDayDate);
 }
 
 /**
@@ -449,16 +490,18 @@ function shouldRestrictUserBillableActions(policyID: string): boolean {
 export {
     calculateRemainingFreeTrialDays,
     doesUserHavePaymentCardAdded,
-    hasUserFreeTrialEnded,
-    isUserOnFreeTrial,
-    shouldRestrictUserBillableActions,
-    getSubscriptionStatus,
-    hasSubscriptionRedDotError,
     getAmountOwed,
-    getOverdueGracePeriodDate,
     getCardForSubscriptionBilling,
+    getFreeTrialText,
+    getOverdueGracePeriodDate,
+    getSubscriptionStatus,
     hasCardAuthenticatedError,
-    hasSubscriptionGreenDotInfo,
     hasRetryBillingError,
+    hasSubscriptionGreenDotInfo,
+    hasSubscriptionRedDotError,
+    hasUserFreeTrialEnded,
+    isUserOnFreeTrial,
     PAYMENT_STATUS,
+    shouldRestrictUserBillableActions,
+    shouldShowPreTrialBillingBanner,
 };

src/pages/home/HeaderView.tsx

@@ -2,7 +2,6 @@ import React, {memo} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
-import Badge from '@components/Badge';
 import Button from '@components/Button';
 import CaretWrapper from '@components/CaretWrapper';
 import ConfirmModal from '@components/ConfirmModal';
@@ -25,7 +24,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 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 FreeTrialBadge from '@pages/settings/Subscription/FreeTrailBadge';
 import * as Report from '@userActions/Report';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
@@ -267,12 +266,7 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto
                                 )}
                             </PressableWithoutFeedback>
                             <View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
-                                {ReportUtils.isChatUsedForOnboarding(report) && SubscriptionUtils.isUserOnFreeTrial() && (
-                                    <Badge
-                                        success
-                                        text={translate('subscription.badge.freeTrial', {numOfDays: SubscriptionUtils.calculateRemainingFreeTrialDays()})}
-                                    />
-                                )}
+                                {ReportUtils.isChatUsedForOnboarding(report) && <FreeTrialBadge />}
                                 {isTaskReport && !shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(report, parentReportAction) && <TaskHeaderActionButton report={report} />}
                                 {canJoin && !shouldUseNarrowLayout && joinButton}
                             </View>

src/pages/settings/InitialSettingsPage.tsx

@@ -112,6 +112,8 @@ function InitialSettingsPage({userWallet, bankAccountList, fundList, walletTerms
 
     const [shouldShowSignoutConfirmModal, setShouldShowSignoutConfirmModal] = useState(false);
 
+    const freeTrialText = SubscriptionUtils.getFreeTrialText(policies);
+
     useEffect(() => {
         Wallet.openInitialSettingsPage();
     }, []);
@@ -219,8 +221,8 @@ function InitialSettingsPage({userWallet, bankAccountList, fundList, walletTerms
                 icon: Expensicons.CreditCard,
                 routeName: ROUTES.SETTINGS_SUBSCRIPTION,
                 brickRoadIndicator: !!privateSubscription?.errors || SubscriptionUtils.hasSubscriptionRedDotError() ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined,
-                badgeText: SubscriptionUtils.isUserOnFreeTrial() ? translate('subscription.badge.freeTrial', {numOfDays: SubscriptionUtils.calculateRemainingFreeTrialDays()}) : undefined,
-                badgeStyle: SubscriptionUtils.isUserOnFreeTrial() ? styles.badgeSuccess : undefined,
+                badgeText: freeTrialText,
+                badgeStyle: freeTrialText ? styles.badgeSuccess : undefined,
             });
         }
 
@@ -229,7 +231,7 @@ function InitialSettingsPage({userWallet, bankAccountList, fundList, walletTerms
             sectionTranslationKey: 'common.workspaces',
             items,
         };
-    }, [policies, privateSubscription?.errors, styles.badgeSuccess, styles.workspaceSettingsSectionContainer, subscriptionPlan, translate, allConnectionSyncProgresses]);
+    }, [allConnectionSyncProgresses, freeTrialText, policies, privateSubscription?.errors, styles.badgeSuccess, styles.workspaceSettingsSectionContainer, subscriptionPlan]);
 
     /**
      * Retuns a list of menu items data for general section

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

@@ -90,7 +90,7 @@ function CardSection() {
     };
 
     let BillingBanner: React.ReactNode | undefined;
-    if (CardSectionUtils.shouldShowPreTrialBillingBanner()) {
+    if (SubscriptionUtils.shouldShowPreTrialBillingBanner()) {
         BillingBanner = <PreTrialBillingBanner />;
     } else if (SubscriptionUtils.isUserOnFreeTrial()) {
         BillingBanner = <TrialStartedBillingBanner />;

src/pages/settings/Subscription/CardSection/utils.ts

@@ -142,13 +142,5 @@ function getNextBillingDate(): string {
     return format(nextBillingDate, CONST.DATE.MONTH_DAY_YEAR_FORMAT);
 }
 
-function shouldShowPreTrialBillingBanner(): boolean {
-    return !SubscriptionUtils.isUserOnFreeTrial() && !SubscriptionUtils.hasUserFreeTrialEnded();
-}
-
-export default {
-    getBillingStatus,
-    shouldShowPreTrialBillingBanner,
-    getNextBillingDate,
-};
+export default {getBillingStatus, getNextBillingDate};
 export type {BillingStatusResult};

src/pages/settings/Subscription/FreeTrailBadge.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import Badge from '@components/Badge';
+import * as SubscriptionUtils from '@libs/SubscriptionUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+type FreeTrialBadgeProps = {
+    badgeStyles?: StyleProp<ViewStyle>;
+};
+
+function FreeTrialBadge({badgeStyles}: FreeTrialBadgeProps) {
+    const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+    const [firstDayFreeTrial] = useOnyx(ONYXKEYS.NVP_FIRST_DAY_FREE_TRIAL);
+    const [lastDayFreeTrial] = useOnyx(ONYXKEYS.NVP_LAST_DAY_FREE_TRIAL);
+
+    const freeTrialText = SubscriptionUtils.getFreeTrialText(policies, firstDayFreeTrial, lastDayFreeTrial);
+
+    if (!freeTrialText) {
+        return null;
+    }
+
+    return (
+        <Badge
+            success
+            text={freeTrialText}
+            badgeStyles={badgeStyles}
+        />
+    );
+}
+
+FreeTrialBadge.displayName = 'FreeTrialBadge';
+
+export default FreeTrialBadge;