Make the Schedule Demo a primary button and place it on the discount banner

src/App.tsx

@@ -4,6 +4,7 @@ import {LogBox} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {PickerStateProvider} from 'react-native-picker-select';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {EarlyDiscountProvider} from '@components/EarlyDiscountContext';
 import '../wdyr';
 import ActiveElementRoleProvider from './components/ActiveElementRoleProvider';
 import ActiveWorkspaceContextProvider from './components/ActiveWorkspaceProvider';
@@ -97,6 +98,7 @@ function App({url}: AppProps) {
                                 VideoPopoverMenuContextProvider,
                                 KeyboardProvider,
                                 KeyboardStateProvider,
+                                EarlyDiscountProvider,
                                 SearchRouterContextProvider,
                                 ProductTrainingContextProvider,
                                 InputBlurContextProvider,

src/components/EarlyDiscountContext.tsx

@@ -0,0 +1,37 @@
+import type {ReactElement} from 'react';
+import React, {createContext, useCallback, useMemo, useState} from 'react';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
+
+type EarlyDiscountContextProps = {
+    /** Whether the discount banner is dismissed */
+    isDiscountBannerDismissed: boolean;
+
+    /** Function to dismiss the discount banner */
+    setIsDiscountBannerDismissed: () => void;
+};
+
+const EarlyDiscountContext = createContext<EarlyDiscountContextProps>({
+    isDiscountBannerDismissed: false,
+    setIsDiscountBannerDismissed: () => {},
+});
+
+function EarlyDiscountProvider({children}: ChildrenProps): ReactElement {
+    const [isDiscountBannerDismissed, setIsDiscountBannerDismissedState] = useState(false);
+
+    const setIsDiscountBannerDismissed = useCallback(() => {
+        setIsDiscountBannerDismissedState(true);
+    }, []);
+
+    const contextValue = useMemo(
+        () => ({
+            isDiscountBannerDismissed,
+            setIsDiscountBannerDismissed,
+        }),
+        [isDiscountBannerDismissed, setIsDiscountBannerDismissed],
+    );
+
+    return <EarlyDiscountContext.Provider value={contextValue}>{children}</EarlyDiscountContext.Provider>;
+}
+
+export type {EarlyDiscountContextProps};
+export {EarlyDiscountProvider, EarlyDiscountContext};

src/pages/home/HeaderView.tsx

@@ -1,12 +1,13 @@
 import {useRoute} from '@react-navigation/native';
-import React, {memo, useEffect, useMemo} from 'react';
+import React, {memo, useContext, useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import CaretWrapper from '@components/CaretWrapper';
 import ConfirmModal from '@components/ConfirmModal';
 import DisplayNames from '@components/DisplayNames';
+import {EarlyDiscountContext} from '@components/EarlyDiscountContext';
 import Icon from '@components/Icon';
 import {BackArrow, CalendarSolid, DotIndicator, FallbackAvatar} from '@components/Icon/Expensicons';
 import LoadingBar from '@components/LoadingBar';
@@ -111,6 +112,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
     const [lastDayFreeTrial] = useOnyx(ONYXKEYS.NVP_LAST_DAY_FREE_TRIAL);
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID}`);
+    const {isDiscountBannerDismissed} = useContext(EarlyDiscountContext);
 
     const {translate} = useLocalize();
     const theme = useTheme();
@@ -158,7 +160,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
         return true;
     };
 
-    const shouldShowGuideBooking = !!account && report?.reportID === account?.adminsRoomReportID && !!account?.guideDetails?.calendarLink;
+    const shouldShowGuideBooking = !!account && isDiscountBannerDismissed && report?.reportID === account?.adminsRoomReportID && !!account?.guideDetails?.calendarLink;
 
     const join = callFunctionIfActionIsAllowed(() => joinRoom(report));
 
@@ -218,7 +220,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
 
     const getGuideBookButtonStyles = () => {
         if (isChatUsedForOnboarding) {
-            return [styles.pb3, styles.pl5, styles.w50, styles.pr1];
+            return [styles.pb3, styles.pl5, styles.w50, styles.pr5, styles.flex1];
         }
         return [styles.pb3, styles.ph5];
     };

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

@@ -1,14 +1,17 @@
-import React, {useEffect, useMemo, useState} from 'react';
+import React, {useContext, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
+import {EarlyDiscountContext} from '@components/EarlyDiscountContext';
+import {CalendarSolid} from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {openExternalLink} from '@libs/actions/Link';
 import Navigation from '@libs/Navigation/Navigation';
 import {getEarlyDiscountInfo} from '@libs/SubscriptionUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -25,13 +28,14 @@ function EarlyDiscountBanner({isSubscriptionPage}: EarlyDiscountBannerProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
 
     const [firstDayFreeTrial] = useOnyx(ONYXKEYS.NVP_FIRST_DAY_FREE_TRIAL);
     const [lastDayFreeTrial] = useOnyx(ONYXKEYS.NVP_LAST_DAY_FREE_TRIAL);
 
     const initialDiscountInfo = getEarlyDiscountInfo();
     const [discountInfo, setDiscountInfo] = useState(initialDiscountInfo);
-    const [isDismissed, setIsDismissed] = useState(false);
+    const {isDiscountBannerDismissed, setIsDiscountBannerDismissed} = useContext(EarlyDiscountContext);
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     useEffect(() => {
@@ -56,7 +60,16 @@ function EarlyDiscountBanner({isSubscriptionPage}: EarlyDiscountBannerProps) {
                     <Button
                         style={shouldUseNarrowLayout && styles.flex1}
                         text={translate('subscription.billingBanner.earlyDiscount.noThanks')}
-                        onPress={() => setIsDismissed(true)}
+                        onPress={() => setIsDiscountBannerDismissed()}
+                    />
+                )}
+                {(!shouldUseNarrowLayout || discountInfo?.discountType === 50) && (
+                    <Button
+                        text={translate('getAssistancePage.scheduleADemo')}
+                        onPress={() => {
+                            openExternalLink(account?.guideDetails?.calendarLink ?? '');
+                        }}
+                        style={shouldUseNarrowLayout && styles.flex1}
                     />
                 )}
             </View>
@@ -67,7 +80,7 @@ function EarlyDiscountBanner({isSubscriptionPage}: EarlyDiscountBannerProps) {
         return null;
     }
 
-    if (isDismissed && !isSubscriptionPage) {
+    if (isDiscountBannerDismissed && !isSubscriptionPage) {
         return null;
     }