Recreate a receipt for native

src/libs/HttpUtils.ts

@@ -10,10 +10,7 @@ import {alertUser} from './actions/UpdateRequired';
 import {READ_COMMANDS, SIDE_EFFECT_REQUEST_COMMANDS, WRITE_COMMANDS} from './API/types';
 import {getCommandURL} from './ApiUtils';
 import HttpsError from './Errors/HttpsError';
-import getPlatform from './getPlatform';
-
-const platform = getPlatform();
-const isNativePlatform = platform === CONST.PLATFORM.ANDROID || platform === CONST.PLATFORM.IOS;
+import prepareRequestPayload from './prepareRequestPayload';
 
 let shouldFailAllRequests = false;
 let shouldForceOffline = false;
@@ -161,50 +158,13 @@ function processHTTPRequest(url: string, method: RequestType = 'get', body: Form
  * @param type HTTP request type (get/post)
  * @param shouldUseSecure should we use the secure server
  */
-function xhr(command: string, data: Record<string, unknown>, type: RequestType = CONST.NETWORK.METHOD.POST, shouldUseSecure = false): Promise<Response> {
-    const formData = new FormData();
-    Object.keys(data).forEach((key) => {
-        const value = data[key];
-        if (value === undefined) {
-            return;
-        }
-        validateFormDataParameter(command, key, value);
-        formData.append(key, value as string | Blob);
-    });
-
-    const url = getCommandURL({shouldUseSecure, command});
-
-    const abortSignalController = data.canCancel ? abortControllerMap.get(command as AbortCommand) ?? abortControllerMap.get(ABORT_COMMANDS.All) : undefined;
-    return processHTTPRequest(url, type, formData, abortSignalController?.signal);
-}
-
-/**
- * Ensures no value of type `object` other than null, Blob, its subclasses, or {uri: string} (native platforms only) is passed to XMLHttpRequest.
- * Otherwise, it will be incorrectly serialized as `[object Object]` and cause an error on Android.
- * See https://github.com/Expensify/App/issues/45086
- */
-function validateFormDataParameter(command: string, key: string, value: unknown) {
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    const isValid = (value: unknown, isTopLevel: boolean): boolean => {
-        if (value === null || typeof value !== 'object') {
-            return true;
-        }
-        if (Array.isArray(value)) {
-            return value.every((element) => isValid(element, false));
-        }
-        if (isTopLevel) {
-            // Native platforms only require the value to include the `uri` property.
-            // Optionally, it can also have a `name` and `type` props.
-            // On other platforms, the value must be an instance of `Blob`.
-            return isNativePlatform ? 'uri' in value && !!value.uri : value instanceof Blob;
-        }
-        return false;
-    };
+function xhr(command: string, data: Record<string, unknown>, type: RequestType = CONST.NETWORK.METHOD.POST, shouldUseSecure = false, initiatedOffline = false): Promise<Response> {
+    return prepareRequestPayload(command, data, initiatedOffline).then((formData) => {
+        const url = getCommandURL({shouldUseSecure, command});
+        const abortSignalController = data.canCancel ? abortControllerMap.get(command as AbortCommand) ?? abortControllerMap.get(ABORT_COMMANDS.All) : undefined;
 
-    if (!isValid(value, true)) {
-        // eslint-disable-next-line no-console
-        console.warn(`An unsupported value was passed to command '${command}' (parameter: '${key}'). Only Blob and primitive types are allowed.`);
-    }
+        return processHTTPRequest(url, type, formData, abortSignalController?.signal);
+    });
 }
 
 function cancelPendingRequests(command: AbortCommand = ABORT_COMMANDS.All) {

src/libs/Network/SequentialQueue.ts

@@ -251,6 +251,7 @@ function handleConflictActions(conflictAction: ConflictData, newRequest: OnyxReq
 
 function push(newRequest: OnyxRequest) {
     const {checkAndFixConflictingRequest} = newRequest;
+    const updatedRequest = {...newRequest, initiatedOffline: isOffline()};
 
     if (checkAndFixConflictingRequest) {
         const requests = getAllPersistedRequests();
@@ -259,8 +260,8 @@ function push(newRequest: OnyxRequest) {
 
         // don't try to serialize a function.
         // eslint-disable-next-line no-param-reassign
-        delete newRequest.checkAndFixConflictingRequest;
-        handleConflictActions(conflictAction, newRequest);
+        delete updatedRequest.checkAndFixConflictingRequest;
+        handleConflictActions(conflictAction, updatedRequest);
     } else {
         // Add request to Persisted Requests so that it can be retried if it fails
         savePersistedRequest(newRequest);

src/libs/Request.ts

@@ -18,7 +18,7 @@ function makeXHR(request: Request): Promise<Response | void> {
             });
         }
 
-        return HttpUtils.xhr(request.command, finalParameters, request.type, request.shouldUseSecure);
+        return HttpUtils.xhr(request.command, finalParameters, request.type, request.shouldUseSecure, request.initiatedOffline);
     });
 }
 

src/libs/prepareRequestPayload/index.native.ts

@@ -0,0 +1,41 @@
+import validateFormDataParameter from '@libs/validateFormDataParameter';
+import type PrepareRequestPayload from './types';
+
+const prepareRequestPayload: PrepareRequestPayload = (command, data, initiatedOffline) => {
+    const formData = new FormData();
+    let promiseChain = Promise.resolve();
+
+    Object.keys(data).forEach((key) => {
+        promiseChain = promiseChain.then(() => {
+            const value = data[key];
+
+            if (value === undefined) {
+                return Promise.resolve();
+            }
+
+            if (key === 'receipt' && initiatedOffline) {
+                const {uri: path = '', source} = value as File;
+
+                return import('@libs/fileDownload/FileUtils').then(({readFileAsync}) =>
+                    readFileAsync(source, path, () => {}).then((file) => {
+                        if (!file) {
+                            return;
+                        }
+
+                        validateFormDataParameter(command, key, file);
+                        formData.append(key, file);
+                    }),
+                );
+            }
+
+            validateFormDataParameter(command, key, value);
+            formData.append(key, value as string | Blob);
+
+            return Promise.resolve();
+        });
+    });
+
+    return promiseChain.then(() => formData);
+};
+
+export default prepareRequestPayload;

src/libs/prepareRequestPayload/index.ts

@@ -0,0 +1,21 @@
+import validateFormDataParameter from '@libs/validateFormDataParameter';
+import type PrepareRequestPayload from './types';
+
+const prepareRequestPayload: PrepareRequestPayload = (command, data) => {
+    const formData = new FormData();
+
+    Object.keys(data).forEach((key) => {
+        const value = data[key];
+
+        if (value === undefined) {
+            return;
+        }
+
+        validateFormDataParameter(command, key, value);
+        formData.append(key, value as string | Blob);
+    });
+
+    return Promise.resolve(formData);
+};
+
+export default prepareRequestPayload;

src/libs/prepareRequestPayload/types.ts

@@ -0,0 +1,3 @@
+type PrepareRequestPayload = (command: string, data: Record<string, unknown>, initiatedOffline: boolean) => Promise<FormData>;
+
+export default PrepareRequestPayload;

src/libs/validateFormDataParameter.ts

@@ -0,0 +1,36 @@
+import CONST from '@src/CONST';
+import getPlatform from './getPlatform';
+
+const platform = getPlatform();
+const isNativePlatform = platform === CONST.PLATFORM.ANDROID || platform === CONST.PLATFORM.IOS;
+
+/**
+ * Ensures no value of type `object` other than null, Blob, its subclasses, or {uri: string} (native platforms only) is passed to XMLHttpRequest.
+ * Otherwise, it will be incorrectly serialized as `[object Object]` and cause an error on Android.
+ * See https://github.com/Expensify/App/issues/45086
+ */
+function validateFormDataParameter(command: string, key: string, value: unknown) {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const isValid = (value: unknown, isTopLevel: boolean): boolean => {
+        if (value === null || typeof value !== 'object') {
+            return true;
+        }
+        if (Array.isArray(value)) {
+            return value.every((element) => isValid(element, false));
+        }
+        if (isTopLevel) {
+            // Native platforms only require the value to include the `uri` property.
+            // Optionally, it can also have a `name` and `type` props.
+            // On other platforms, the value must be an instance of `Blob`.
+            return isNativePlatform ? 'uri' in value && !!value.uri : value instanceof Blob;
+        }
+        return false;
+    };
+
+    if (!isValid(value, true)) {
+        // eslint-disable-next-line no-console
+        console.warn(`An unsupported value was passed to command '${command}' (parameter: '${key}'). Only Blob and primitive types are allowed.`);
+    }
+}
+
+export default validateFormDataParameter;

src/types/onyx/Request.ts

@@ -53,6 +53,9 @@ type RequestData = {
 
     /** Whether the app should skip the web proxy to connect to API endpoints */
     shouldSkipWebProxy?: boolean;
+
+    /** Whether the request is initiated offline */
+    initiatedOffline?: boolean;
 };
 
 /**

tests/unit/SequentialQueueTest.ts

@@ -1,6 +1,6 @@
 import Onyx from 'react-native-onyx';
 import {waitForActiveRequestsToBeEmpty} from '@libs/E2E/utils/NetworkInterceptor';
-import * as PersistedRequests from '@userActions/PersistedRequests';
+import {getAll, getLength, getOngoingRequest} from '@userActions/PersistedRequests';
 import ONYXKEYS from '@src/ONYXKEYS';
 import * as SequentialQueue from '../../src/libs/Network/SequentialQueue';
 import type Request from '../../src/types/onyx/Request';
@@ -27,13 +27,13 @@ describe('SequentialQueue', () => {
 
     it('should push one request and persist one', () => {
         SequentialQueue.push(request);
-        expect(PersistedRequests.getLength()).toBe(1);
+        expect(getLength()).toBe(1);
     });
 
     it('should push two requests and persist two', () => {
         SequentialQueue.push(request);
         SequentialQueue.push(request);
-        expect(PersistedRequests.getLength()).toBe(2);
+        expect(getLength()).toBe(2);
     });
 
     it('should push two requests with conflict resolution and replace', () => {
@@ -54,10 +54,10 @@ describe('SequentialQueue', () => {
             },
         };
         SequentialQueue.push(requestWithConflictResolution);
-        expect(PersistedRequests.getLength()).toBe(1);
+        expect(getLength()).toBe(1);
         // We know there is only one request in the queue, so we can get the first one and verify
         // that the persisted request is the second one.
-        const persistedRequest = PersistedRequests.getAll().at(0);
+        const persistedRequest = getAll().at(0);
         expect(persistedRequest?.data?.accountID).toBe(56789);
     });
 
@@ -71,7 +71,7 @@ describe('SequentialQueue', () => {
             },
         };
         SequentialQueue.push(requestWithConflictResolution);
-        expect(PersistedRequests.getLength()).toBe(2);
+        expect(getLength()).toBe(2);
     });
 
     it('should push two requests with conflict resolution and noAction', () => {
@@ -84,7 +84,7 @@ describe('SequentialQueue', () => {
             },
         };
         SequentialQueue.push(requestWithConflictResolution);
-        expect(PersistedRequests.getLength()).toBe(1);
+        expect(getLength()).toBe(1);
     });
 
     it('should add a new request even if a similar one is ongoing', async () => {
@@ -111,7 +111,7 @@ describe('SequentialQueue', () => {
         };
 
         SequentialQueue.push(requestWithConflictResolution);
-        expect(PersistedRequests.getLength()).toBe(2);
+        expect(getLength()).toBe(2);
     });
 
     it('should replace request request in queue while a similar one is ongoing', async () => {
@@ -148,7 +148,7 @@ describe('SequentialQueue', () => {
         SequentialQueue.push(requestWithConflictResolution);
         SequentialQueue.push(requestWithConflictResolution2);
 
-        expect(PersistedRequests.getLength()).toBe(2);
+        expect(getLength()).toBe(2);
     });
 
     it('should replace request request in queue while a similar one is ongoing and keep the same index', () => {
@@ -175,8 +175,8 @@ describe('SequentialQueue', () => {
         SequentialQueue.push({command: 'AddComment'});
         SequentialQueue.push({command: 'OpenReport'});
 
-        expect(PersistedRequests.getLength()).toBe(4);
-        const persistedRequests = PersistedRequests.getAll();
+        expect(getLength()).toBe(4);
+        const persistedRequests = getAll();
         // We know ReconnectApp is at index 1 in the queue, so we can get it to verify
         // that was replaced by the new request.
         expect(persistedRequests.at(1)?.data?.accountID).toBe(56789);
@@ -219,7 +219,7 @@ describe('SequentialQueue', () => {
 
         await Promise.resolve();
         await waitForActiveRequestsToBeEmpty();
-        const persistedRequests = PersistedRequests.getAll();
+        const persistedRequests = getAll();
 
         // We know ReconnectApp is at index 9 in the queue, so we can get it to verify
         // that was replaced by the new request.
@@ -229,7 +229,7 @@ describe('SequentialQueue', () => {
 
     // I need to test now when moving the request from the queue to the ongoing request the PERSISTED_REQUESTS is decreased and PERSISTED_ONGOING_REQUESTS has the new request
     it('should move the request from the queue to the ongoing request and save it into Onyx', () => {
-        const persistedRequest = {...request, persistWhenOngoing: true};
+        const persistedRequest = {...request, persistWhenOngoing: true, initiatedOffline: false};
         SequentialQueue.push(persistedRequest);
 
         const connectionId = Onyx.connect({
@@ -241,20 +241,20 @@ describe('SequentialQueue', () => {
 
                 Onyx.disconnect(connectionId);
                 expect(ongoingRequest).toEqual(persistedRequest);
-                expect(ongoingRequest).toEqual(PersistedRequests.getOngoingRequest());
-                expect(PersistedRequests.getAll().length).toBe(0);
+                expect(ongoingRequest).toEqual(getOngoingRequest());
+                expect(getAll().length).toBe(0);
             },
         });
     });
 
     it('should get the ongoing request from onyx and start processing it', async () => {
-        const persistedRequest = {...request, persistWhenOngoing: true};
+        const persistedRequest = {...request, persistWhenOngoing: true, initiatedOffline: false};
         Onyx.set(ONYXKEYS.PERSISTED_ONGOING_REQUESTS, persistedRequest);
         SequentialQueue.push({command: 'OpenReport'});
 
         await Promise.resolve();
 
-        expect(persistedRequest).toEqual(PersistedRequests.getOngoingRequest());
-        expect(PersistedRequests.getAll().length).toBe(1);
+        expect(persistedRequest).toEqual(getOngoingRequest());
+        expect(getAll().length).toBe(1);
     });
 });