Merge pull request Expensify#51576 from FitseTLT/fix-add-button-alter…

…native-for-free-trial-badge Fix - Update Start a free trial on the Concierge DM header to be clickable
mollfpr · Nov 1, 2024 · 0517861 · 0517861
2 parents e597ded + fe5d5f4
commit 0517861
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx
@@ -28,7 +28,7 @@ import Performance from '@libs/Performance';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
-import FreeTrialBadge from '@pages/settings/Subscription/FreeTrialBadge';
+import FreeTrial from '@pages/settings/Subscription/FreeTrial';
 import variables from '@styles/variables';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
@@ -277,7 +277,7 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
                                                         ReportUtils.isSystemChat(report)
                                                     }
                                                 />
-                                                {ReportUtils.isChatUsedForOnboarding(report) && <FreeTrialBadge badgeStyles={[styles.mnh0, styles.pl2, styles.pr2, styles.ml1]} />}
+                                                {ReportUtils.isChatUsedForOnboarding(report) && <FreeTrial badgeStyles={[styles.mnh0, styles.pl2, styles.pr2, styles.ml1]} />}
                                                 {isStatusVisible && (
                                                     <Tooltip
                                                         text={statusContent}

diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx
@@ -28,7 +28,7 @@ import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import Parser from '@libs/Parser';
 import * as ReportUtils from '@libs/ReportUtils';
-import FreeTrialBadge from '@pages/settings/Subscription/FreeTrialBadge';
+import FreeTrial from '@pages/settings/Subscription/FreeTrial';
 import * as Report from '@userActions/Report';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
@@ -121,6 +121,8 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto
         />
     );
 
+    const freeTrialButton = <FreeTrial pressable />;
+
     const renderAdditionalText = () => {
         if (shouldShowSubtitle() || isPersonalExpenseChat || !policyName || !isEmptyObject(parentNavigationSubtitleData) || isSelfDM) {
             return null;
@@ -144,6 +146,7 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto
 
     const isReportInRHP = isReportOpenInRHP(navigationRef?.getRootState());
     const shouldDisplaySearchRouter = !isReportInRHP;
+    const isChatUsedForOnboarding = ReportUtils.isChatUsedForOnboarding(report);
 
     return (
         <View
@@ -281,7 +284,7 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto
                                 )}
                             </PressableWithoutFeedback>
                             <View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
-                                {ReportUtils.isChatUsedForOnboarding(report) && <FreeTrialBadge />}
+                                {!shouldUseNarrowLayout && isChatUsedForOnboarding && freeTrialButton}
                                 {isTaskReport && !shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(report, parentReportAction) && <TaskHeaderActionButton report={report} />}
                                 {canJoin && !shouldUseNarrowLayout && joinButton}
                             </View>
@@ -305,6 +308,7 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto
                 )}
             </View>
             {!isLoading && canJoin && shouldUseNarrowLayout && <View style={[styles.ph5, styles.pb2]}>{joinButton}</View>}
+            {!isLoading && isChatUsedForOnboarding && shouldUseNarrowLayout && <View style={[styles.pb3, styles.ph5]}>{freeTrialButton}</View>}
         </View>
     );
 }

diff --git a/.../settings/Subscription/FreeTrialBadge.tsx → ...pages/settings/Subscription/FreeTrial.tsx b/.../settings/Subscription/FreeTrialBadge.tsx → ...pages/settings/Subscription/FreeTrial.tsx
@@ -2,15 +2,20 @@ import React, {useEffect, useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Badge from '@components/Badge';
+import Button from '@components/Button';
 import useNetwork from '@hooks/useNetwork';
+import Navigation from '@libs/Navigation/Navigation';
 import * as SubscriptionUtils from '@libs/SubscriptionUtils';
+import * as Expensicons from '@src/components/Icon/Expensicons';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 
-type FreeTrialBadgeProps = {
+type FreeTrialProps = {
     badgeStyles?: StyleProp<ViewStyle>;
+    pressable?: boolean;
 };
 
-function FreeTrialBadge({badgeStyles}: FreeTrialBadgeProps) {
+function FreeTrial({badgeStyles, pressable = false}: FreeTrialProps) {
     const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
     const [firstDayFreeTrial] = useOnyx(ONYXKEYS.NVP_FIRST_DAY_FREE_TRIAL);
     const [lastDayFreeTrial] = useOnyx(ONYXKEYS.NVP_LAST_DAY_FREE_TRIAL);
@@ -30,7 +35,14 @@ function FreeTrialBadge({badgeStyles}: FreeTrialBadgeProps) {
         return null;
     }
 
-    return (
+    return pressable ? (
+        <Button
+            icon={Expensicons.Star}
+            success
+            text={freeTrialText}
+            onPress={() => Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION)}
+        />
+    ) : (
         <Badge
             success
             text={freeTrialText}
@@ -39,6 +51,6 @@ function FreeTrialBadge({badgeStyles}: FreeTrialBadgeProps) {
     );
 }
 
-FreeTrialBadge.displayName = 'FreeTrialBadge';
+FreeTrial.displayName = 'FreeTrial';
 
-export default FreeTrialBadge;
+export default FreeTrial;