Fix missing merchant field when using QAB after login

src/pages/iou/request/IOURequestStartPage.tsx

@@ -27,6 +27,7 @@ import {initMoneyRequest} from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
+import type {SelectedTabRequest} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import IOURequestStepAmount from './step/IOURequestStepAmount';
@@ -36,22 +37,26 @@ import IOURequestStepPerDiemWorkspace from './step/IOURequestStepPerDiemWorkspac
 import IOURequestStepScan from './step/IOURequestStepScan';
 import type {WithWritableReportOrNotFoundProps} from './step/withWritableReportOrNotFound';
 
-type IOURequestStartPageProps = WithWritableReportOrNotFoundProps<typeof SCREENS.MONEY_REQUEST.CREATE>;
+type IOURequestStartPageProps = WithWritableReportOrNotFoundProps<typeof SCREENS.MONEY_REQUEST.CREATE> & {
+    defaultSelectedTab: SelectedTabRequest;
+};
 
 function IOURequestStartPage({
     route,
     route: {
         params: {iouType, reportID},
     },
     navigation,
+    // This is currently only being used for testing
+    defaultSelectedTab = CONST.TAB_REQUEST.SCAN,
 }: IOURequestStartPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const shouldUseTab = iouType !== CONST.IOU.TYPE.SEND && iouType !== CONST.IOU.TYPE.PAY && iouType !== CONST.IOU.TYPE.INVOICE;
     const [isDraggingOver, setIsDraggingOver] = useState(false);
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {canBeMissing: true});
     const policy = usePolicy(report?.policyID);
-    const [selectedTab = CONST.TAB_REQUEST.SCAN, selectedTabResult] = useOnyx(`${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.IOU_REQUEST_TYPE}`, {canBeMissing: true});
+    const [selectedTab, selectedTabResult] = useOnyx(`${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.IOU_REQUEST_TYPE}`, {canBeMissing: true});
     const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false});
     const isLoadingSelectedTab = shouldUseTab ? isLoadingOnyxValue(selectedTabResult) : false;
     const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${route?.params.transactionID}`, {canBeMissing: true});
@@ -129,16 +134,11 @@ function IOURequestStartPage({
     useFocusEffect(
         useCallback(() => {
             // The test transaction can change the reportID of the transaction on the flow so we should prevent the reportID from being reverted again.
-            if (
-                (transaction?.reportID === reportID && iouType !== CONST.IOU.TYPE.CREATE && iouType !== CONST.IOU.TYPE.SUBMIT) ||
-                isLoadingSelectedTab ||
-                !transactionRequestType ||
-                prevTransactionReportID !== transaction?.reportID
-            ) {
+            if (transaction?.reportID === reportID || isLoadingSelectedTab || !transactionRequestType || prevTransactionReportID !== transaction?.reportID) {
                 return;
             }
             resetIOUTypeIfChanged(transactionRequestType);
-        }, [transaction?.reportID, reportID, iouType, resetIOUTypeIfChanged, transactionRequestType, isLoadingSelectedTab, prevTransactionReportID]),
+        }, [transaction?.reportID, reportID, resetIOUTypeIfChanged, transactionRequestType, isLoadingSelectedTab, prevTransactionReportID]),
     );
 
     const [headerWithBackBtnContainerElement, setHeaderWithBackButtonContainerElement] = useState<HTMLElement | null>(null);
@@ -197,7 +197,7 @@ function IOURequestStartPage({
                         {shouldUseTab ? (
                             <OnyxTabNavigator
                                 id={CONST.TAB.IOU_REQUEST_TYPE}
-                                defaultSelectedTab={CONST.TAB_REQUEST.SCAN}
+                                defaultSelectedTab={defaultSelectedTab}
                                 onTabSelected={resetIOUTypeIfChanged}
                                 tabBar={TabSelector}
                                 onTabBarFocusTrapContainerElementChanged={setTabBarContainerElement}

tests/ui/IOURequestStartPageTest.tsx

@@ -0,0 +1,89 @@
+import {NavigationContainer} from '@react-navigation/native';
+import {render} from '@testing-library/react-native';
+import React from 'react';
+import Onyx from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
+import {LocaleContextProvider} from '@components/LocaleContextProvider';
+import OnyxProvider from '@components/OnyxProvider';
+import type {IOURequestType} from '@libs/actions/IOU';
+import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
+import type {MoneyRequestNavigatorParamList} from '@libs/Navigation/types';
+import IOURequestStartPage from '@pages/iou/request/IOURequestStartPage';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
+
+jest.mock('@userActions/Tab');
+jest.mock('@rnmapbox/maps', () => ({
+    default: jest.fn(),
+    MarkerView: jest.fn(),
+    setAccessToken: jest.fn(),
+}));
+
+jest.mock('react-native-tab-view', () => ({
+    TabView: 'TabView',
+    SceneMap: jest.fn(),
+    TabBar: 'TabBar',
+}));
+
+jest.mock('@react-native-community/geolocation', () => ({
+    setRNConfiguration: jest.fn(),
+}));
+
+jest.mock('react-native-vision-camera', () => ({
+    useCameraDevice: jest.fn(),
+}));
+
+describe('IOURequestStartPage', () => {
+    beforeAll(() => {
+        Onyx.init({
+            keys: ONYXKEYS,
+        });
+    });
+
+    afterEach(async () => {
+        await Onyx.clear();
+    });
+
+    it('self DM track options should disappear when report moved to workspace', async () => {
+        // Given no selected tab data in Onyx
+        await Onyx.merge(`${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.IOU_REQUEST_TYPE}`, null);
+
+        // When the page is mounted with MANUAL tab
+        render(
+            <OnyxProvider>
+                <LocaleContextProvider>
+                    <NavigationContainer>
+                        <IOURequestStartPage
+                            route={
+                                {params: {iouType: CONST.IOU.TYPE.SUBMIT, reportID: '1', transactionID: ''}} as PlatformStackScreenProps<
+                                    MoneyRequestNavigatorParamList,
+                                    typeof SCREENS.MONEY_REQUEST.CREATE
+                                >['route']
+                            }
+                            report={undefined}
+                            reportDraft={undefined}
+                            navigation={{} as PlatformStackScreenProps<MoneyRequestNavigatorParamList, typeof SCREENS.MONEY_REQUEST.CREATE>['navigation']}
+                            defaultSelectedTab={CONST.TAB_REQUEST.MANUAL}
+                        />
+                    </NavigationContainer>
+                </LocaleContextProvider>
+            </OnyxProvider>,
+        );
+
+        await waitForBatchedUpdates();
+
+        // Then the iou type should be MANUAL
+        const iouRequestType = await new Promise<OnyxEntry<IOURequestType>>((resolve) => {
+            const connection = Onyx.connect({
+                key: `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${CONST.IOU.OPTIMISTIC_TRANSACTION_ID}`,
+                callback: (val) => {
+                    resolve(val?.iouRequestType);
+                    Onyx.disconnect(connection);
+                },
+            });
+        });
+        expect(iouRequestType).toBe(CONST.IOU.REQUEST_TYPE.MANUAL);
+    });
+});