[Draft] Display Show history button in Concierge side panel on native

src/components/Navigation/RootNavigatorExtraContent/index.native.tsx

@@ -1,7 +1,9 @@
-// On mobile platforms, concierge is displayed as a separate page and the tab bar
-// is rendered by the TabNavigator, so there is no extra content to show here.
-function RootNavigatorExtraContent() {
-    return null;
+import React from 'react';
+import SidePanel from '@components/SidePanel';
+import type {ExtraContentProps} from '@libs/Navigation/PlatformStackNavigation/types';
+
+function RootNavigatorExtraContent({navigation}: ExtraContentProps) {
+    return <SidePanel navigation={navigation} />;
 }
 
 export default RootNavigatorExtraContent;

src/components/SidePanel/SidePanelButton/index.native.tsx

@@ -1,50 +1,9 @@
-import {hasSeenTourSelector} from '@selectors/Onboarding';
 import React from 'react';
-import Icon from '@components/Icon';
-import {PressableWithoutFeedback} from '@components/Pressable';
-import Tooltip from '@components/Tooltip';
-import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
-import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
-import useLocalize from '@hooks/useLocalize';
-import useOnyx from '@hooks/useOnyx';
-import useSidePanelState from '@hooks/useSidePanelState';
-import useThemeStyles from '@hooks/useThemeStyles';
-import {navigateToConciergeChat} from '@userActions/Report';
-import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
+import SidePanelButtonBase from './SidePanelButtonBase';
 import type SidePanelButtonProps from './types';
 
 function SidePanelButton({style}: SidePanelButtonProps) {
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
-    const {shouldHideHelpButton} = useSidePanelState();
-    const {accountID: currentUserAccountID = CONST.DEFAULT_NUMBER_ID} = useCurrentUserPersonalDetails();
-    const {ConciergeAvatar} = useMemoizedLazyExpensifyIcons(['ConciergeAvatar']);
-    const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
-    const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
-    const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector});
-    const [betas] = useOnyx(ONYXKEYS.BETAS);
-
-    if (shouldHideHelpButton) {
-        return null;
-    }
-
-    return (
-        <Tooltip text={translate('common.help')}>
-            <PressableWithoutFeedback
-                sentryLabel={CONST.SENTRY_LABEL.SIDE_PANEL.HELP}
-                accessibilityLabel={translate('common.help')}
-                style={[styles.flexRow, styles.touchableButtonImage, style]}
-                onPress={() => navigateToConciergeChat(conciergeReportID, introSelected, currentUserAccountID, isSelfTourViewed, betas)}
-            >
-                <Icon
-                    src={ConciergeAvatar}
-                    width={28}
-                    height={28}
-                />
-            </PressableWithoutFeedback>
-        </Tooltip>
-    );
+    return <SidePanelButtonBase style={style} />;
 }
 
 export default SidePanelButton;

src/components/SidePanel/SidePanelModal/index.android.tsx

@@ -23,6 +23,7 @@ function SidePanelModal({shouldHideSidePanel, closeSidePanel, children}: SidePan
             isVisible={!shouldHideSidePanel}
             type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
             shouldHandleNavigationBack
+            shouldUseModalPaddingStyle={false}
         >
             {children}
         </Modal>

src/components/SidePanel/SidePanelModal/index.ios.tsx

@@ -11,6 +11,7 @@ function SidePanelModal({shouldHideSidePanel, closeSidePanel, children}: SidePan
             type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
             shouldHandleNavigationBack
             swipeDirection={CONST.SWIPE_DIRECTION.RIGHT}
+            shouldUseModalPaddingStyle={false}
         >
             {children}
         </Modal>

src/hooks/useOpenConciergeAnywhere/index.native.tsx

@@ -1,25 +1,22 @@
-import {hasSeenTourSelector} from '@selectors/Onboarding';
-import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
-import useOnyx from '@hooks/useOnyx';
-import {navigateToConciergeChat} from '@userActions/Report';
-import ONYXKEYS from '@src/ONYXKEYS';
+import useSidePanelActions from '@hooks/useSidePanelActions';
+import useSidePanelState from '@hooks/useSidePanelState';
 
 /**
- * Returns a callback that navigates to the Concierge chat on native (opens the side panel on web instead),
- * and a flag indicating that the concierge is not opened in the side panel.
+ * Returns a callback that opens the Concierge side panel,
+ * and a flag indicating that the concierge is opened in the side panel.
  */
 function useOpenConciergeAnywhere() {
-    const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
-    const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
-    const [betas] = useOnyx(ONYXKEYS.BETAS);
-    const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector});
-    const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
+    const {shouldHideSidePanel} = useSidePanelState();
+    const {openSidePanel} = useSidePanelActions();
 
     const openConciergeAnywhere = () => {
-        navigateToConciergeChat(conciergeReportID, introSelected, currentUserAccountID, isSelfTourViewed, betas);
+        if (!shouldHideSidePanel) {
+            return;
+        }
+        openSidePanel();
     };
 
-    return {openConciergeAnywhere, isInSidePanel: false};
+    return {openConciergeAnywhere, isInSidePanel: true};
 }
 
 export default useOpenConciergeAnywhere;