[Payment history] Add "View payment history" menu item

src/languages/en.ts

@@ -3279,6 +3279,7 @@ export default {
             changeCurrency: 'Change payment currency',
             cardNotFound: 'No payment card added',
             retryPaymentButton: 'Retry payment',
+            viewPaymentHistory: 'View payment history',
         },
         yourPlan: {
             title: 'Your plan',

src/languages/es.ts

@@ -3783,6 +3783,7 @@ export default {
             changeCurrency: 'Cambiar moneda de pago',
             cardNotFound: 'No se ha añadido ninguna tarjeta de pago',
             retryPaymentButton: 'Reintentar el pago',
+            viewPaymentHistory: 'Ver historial de pagos',
         },
         yourPlan: {
             title: 'Tu plan',

src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx

@@ -61,20 +61,32 @@ function ResponsiveStackNavigator(props: ResponsiveStackNavigatorProps) {
     const {stateToRender, searchRoute} = useMemo(() => {
         const routes = reduceCentralPaneRoutes(state.routes);
 
-        // On narrow layout, if we are on /search route we want to hide the search central pane route.
         if (isSmallScreenWidth) {
             const isSearchCentralPane = (route: RouteProp<ParamListBase>) => getTopmostCentralPaneRoute({routes: [route]} as State<RootStackParamList>)?.name === SCREENS.SEARCH.CENTRAL_PANE;
 
             const lastRoute = routes[routes.length - 1];
             const lastSearchCentralPane = isSearchCentralPane(lastRoute) ? lastRoute : undefined;
             const filteredRoutes = routes.filter((route) => !isSearchCentralPane(route));
+
+            // On narrow layout, if we are on /search route we want to hide all central pane routes and show only the bottom tab navigator.
+            if (lastSearchCentralPane) {
+                return {
+                    stateToRender: {
+                        ...state,
+                        index: 0,
+                        routes: [filteredRoutes[0]],
+                    },
+                    searchRoute: lastSearchCentralPane,
+                };
+            }
+
             return {
                 stateToRender: {
                     ...state,
                     index: filteredRoutes.length - 1,
                     routes: filteredRoutes,
                 },
-                searchRoute: lastSearchCentralPane,
+                searchRoute: undefined,
             };
         }
 

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

@@ -3,13 +3,17 @@ import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import PreTrialBillingBanner from './BillingBanner/PreTrialBillingBanner';
 import CardSectionActions from './CardSectionActions';
@@ -21,6 +25,7 @@ function CardSection() {
     const styles = useThemeStyles();
     const theme = useTheme();
     const [fundList] = useOnyx(ONYXKEYS.FUND_LIST);
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION);
 
     const defaultCard = useMemo(() => Object.values(fundList ?? {}).find((card) => card.isDefault), [fundList]);
@@ -67,6 +72,19 @@ function CardSection() {
                 )}
                 {isEmptyObject(defaultCard?.accountData) && <CardSectionDataEmpty />}
             </View>
+            {!!account?.hasPurchases && (
+                <MenuItem
+                    shouldShowRightIcon
+                    icon={Expensicons.History}
+                    iconStyles={[]}
+                    wrapperStyle={styles.sectionMenuItemTopDescription}
+                    style={styles.mt5}
+                    title={translate('subscription.cardSection.viewPaymentHistory')}
+                    titleStyle={styles.textStrong}
+                    onPress={() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL))}
+                    hoverAndPressStyle={styles.hoveredComponentBG}
+                />
+            )}
         </Section>
     );
 }

src/types/onyx/Account.ts

@@ -83,6 +83,9 @@ type Account = {
 
     /** Indicates whether the user can downgrade current subscription plan */
     canDowngrade?: boolean;
+
+    /** Indicates whether the user has atleast one previous purchaes */
+    hasPurchases?: boolean;
 };
 
 export default Account;