Add Guide booking link to #admins header

src/languages/en.ts

@@ -4544,6 +4544,7 @@ const translations = {
         description: 'Choose from the support options below:',
         chatWithConcierge: 'Chat with Concierge',
         scheduleSetupCall: 'Schedule a setup call',
+        scheduleADemo: 'Schedule a demo',
         questionMarkButtonTooltip: 'Get assistance from our team',
         exploreHelpDocs: 'Explore help docs',
     },

src/languages/es.ts

@@ -4591,6 +4591,7 @@ const translations = {
         description: 'Elige una de las siguientes opciones:',
         chatWithConcierge: 'Chatear con Concierge',
         scheduleSetupCall: 'Concertar una llamada',
+        scheduleADemo: 'Programa una demostración',
         questionMarkButtonTooltip: 'Obtén ayuda de nuestro equipo',
         exploreHelpDocs: 'Explorar la documentación de ayuda',
     },

src/pages/home/HeaderView.tsx

@@ -1,5 +1,5 @@
 import {useRoute} from '@react-navigation/native';
-import React, {memo} from 'react';
+import React, {memo, useEffect} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
@@ -8,7 +8,7 @@ import CaretWrapper from '@components/CaretWrapper';
 import ConfirmModal from '@components/ConfirmModal';
 import DisplayNames from '@components/DisplayNames';
 import Icon from '@components/Icon';
-import {BackArrow, DotIndicator, FallbackAvatar} from '@components/Icon/Expensicons';
+import {BackArrow, CalendarSolid, DotIndicator, FallbackAvatar} from '@components/Icon/Expensicons';
 import MultipleAvatars from '@components/MultipleAvatars';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ParentNavigationSubtitle from '@components/ParentNavigationSubtitle';
@@ -24,6 +24,8 @@ import usePolicy from '@hooks/usePolicy';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {openExternalLink} from '@libs/actions/Link';
+import {getAssignedSupportData} from '@libs/actions/Policy/Policy';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import Navigation from '@libs/Navigation/Navigation';
 import {getPersonalDetailsForAccountIDs} from '@libs/OptionsListUtils';
@@ -100,6 +102,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
     const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(report?.parentReportID) ?? getNonEmptyStringOnyxID(report?.reportID)}`);
     const policy = usePolicy(report?.policyID);
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
 
     const {translate} = useLocalize();
     const theme = useTheme();
@@ -126,6 +129,14 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
     const policyName = getPolicyName(report, true);
     const policyDescription = getPolicyDescriptionText(policy);
     const isPersonalExpenseChat = isPolicyExpenseChat && isCurrentUserSubmitter(report?.reportID);
+    const policyID = report?.policyID;
+    useEffect(() => {
+        if (!policyID) {
+            return;
+        }
+        getAssignedSupportData(policyID);
+    }, [policyID]);
+
     const shouldShowSubtitle = () => {
         if (!subtitle) {
             return false;
@@ -139,6 +150,8 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
         return true;
     };
 
+    const shouldShowGuideBooking = !!account && report?.reportID.toString() === account?.adminsRoomReportID?.toString() && !!account?.guideDetails?.calendarLink;
+
     const join = checkIfActionIsAllowed(() => joinRoom(report));
 
     const canJoin = canJoinChat(report, parentReportAction, policy);
@@ -176,6 +189,25 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
     const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth;
     const isChatUsedForOnboarding = isChatUsedForOnboardingReportUtils(report);
 
+    const guideBookingButton = (
+        <Button
+            success
+            text={translate('getAssistancePage.scheduleADemo')}
+            onPress={() => {
+                openExternalLink(account?.guideDetails?.calendarLink ?? '');
+            }}
+            style={!shouldUseNarrowLayout && isChatUsedForOnboarding && styles.mr2}
+            icon={CalendarSolid}
+        />
+    );
+
+    const getGuideBookButtonStyles = () => {
+        if (isChatUsedForOnboarding) {
+            return [styles.pb3, styles.pl5, styles.w50, styles.pr1];
+        }
+        return [styles.pb3, styles.ph5];
+    };
+
     return (
         <View
             style={[styles.borderBottom]}
@@ -288,7 +320,13 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
                                 )}
                             </PressableWithoutFeedback>
                             <View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
-                                {!shouldUseNarrowLayout && isChatUsedForOnboarding && <FreeTrial pressable />}
+                                {shouldShowGuideBooking && !shouldUseNarrowLayout && guideBookingButton}
+                                {!shouldUseNarrowLayout && isChatUsedForOnboarding && (
+                                    <FreeTrial
+                                        pressable
+                                        success={!shouldShowGuideBooking}
+                                    />
+                                )}
                                 {!shouldUseNarrowLayout && isOpenTaskReport(report, parentReportAction) && <TaskHeaderActionButton report={report} />}
                                 {!isParentReportLoading && canJoin && !shouldUseNarrowLayout && joinButton}
                             </View>
@@ -312,12 +350,17 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
                 )}
             </View>
             {!isParentReportLoading && !isLoading && canJoin && shouldUseNarrowLayout && <View style={[styles.ph5, styles.pb2]}>{joinButton}</View>}
-            {!isLoading && isChatUsedForOnboarding && shouldUseNarrowLayout && (
-                <FreeTrial
-                    pressable
-                    addSpacing
-                />
-            )}
+            <View style={isChatUsedForOnboarding && shouldShowGuideBooking && [styles.dFlex, styles.flexRow]}>
+                {!isLoading && shouldShowGuideBooking && shouldUseNarrowLayout && <View style={getGuideBookButtonStyles()}>{guideBookingButton}</View>}
+                {!isLoading && isChatUsedForOnboarding && shouldUseNarrowLayout && (
+                    <FreeTrial
+                        pressable
+                        addSpacing
+                        success={!shouldShowGuideBooking}
+                        inARow={shouldShowGuideBooking}
+                    />
+                )}
+            </View>
             {!!report && shouldUseNarrowLayout && isOpenTaskReport(report, parentReportAction) && (
                 <View style={[styles.appBG, styles.pl0]}>
                     <View style={[styles.ph5, styles.pb3]}>

src/pages/settings/Subscription/FreeTrial.tsx

@@ -4,21 +4,23 @@ import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Badge from '@components/Badge';
 import Button from '@components/Button';
+import {Star} from '@components/Icon/Expensicons';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import * as SubscriptionUtils from '@libs/SubscriptionUtils';
-import * as Expensicons from '@src/components/Icon/Expensicons';
+import {getFreeTrialText} from '@libs/SubscriptionUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 type FreeTrialProps = {
     badgeStyles?: StyleProp<ViewStyle>;
     pressable?: boolean;
     addSpacing?: boolean;
+    success?: boolean;
+    inARow?: boolean;
 };
 
-function FreeTrial({badgeStyles, pressable = false, addSpacing = false}: FreeTrialProps) {
+function FreeTrial({badgeStyles, pressable = false, addSpacing = false, success = true, inARow = false}: FreeTrialProps) {
     const styles = useThemeStyles();
     const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
     const [firstDayFreeTrial] = useOnyx(ONYXKEYS.NVP_FIRST_DAY_FREE_TRIAL);
@@ -32,7 +34,7 @@ function FreeTrial({badgeStyles, pressable = false, addSpacing = false}: FreeTri
         if (!privateSubscription && !isOffline) {
             return;
         }
-        setFreeTrialText(SubscriptionUtils.getFreeTrialText(policies));
+        setFreeTrialText(getFreeTrialText(policies));
     }, [isOffline, privateSubscription, policies, firstDayFreeTrial, lastDayFreeTrial]);
 
     if (!freeTrialText) {
@@ -41,20 +43,20 @@ function FreeTrial({badgeStyles, pressable = false, addSpacing = false}: FreeTri
 
     const freeTrial = pressable ? (
         <Button
-            icon={Expensicons.Star}
-            success
+            icon={Star}
+            success={success}
             text={freeTrialText}
             onPress={() => Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION)}
         />
     ) : (
         <Badge
-            success
+            success={success}
             text={freeTrialText}
             badgeStyles={badgeStyles}
         />
     );
 
-    return addSpacing ? <View style={[styles.pb3, styles.ph5]}>{freeTrial}</View> : freeTrial;
+    return addSpacing ? <View style={inARow ? [styles.pb3, styles.pr5, styles.w50, styles.pl1] : [styles.pb3, styles.ph5]}>{freeTrial}</View> : freeTrial;
 }
 
 FreeTrial.displayName = 'FreeTrial';