Recreate a receipt for native

jest/setup.ts

@@ -124,3 +124,23 @@ jest.mock(
             cancel() {}
         },
 );
+
+jest.mock('@libs/prepareRequestPayload/index.native.ts', () => ({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __esModule: true,
+    default: jest.fn((command: string, data: Record<string, unknown>) => {
+        const formData = new FormData();
+
+        Object.keys(data).forEach((key) => {
+            const value = data[key];
+
+            if (value === undefined) {
+                return;
+            }
+
+            formData.append(key, value as string | Blob);
+        });
+
+        return Promise.resolve(formData);
+    }),
+}));

src/libs/API/index.ts

@@ -3,6 +3,7 @@ import Onyx from 'react-native-onyx';
 import type {SetRequired} from 'type-fest';
 import Log from '@libs/Log';
 import {HandleUnusedOptimisticID, Logging, Pagination, Reauthentication, RecheckConnection, SaveResponseInOnyx} from '@libs/Middleware';
+import {isOffline} from '@libs/Network/NetworkStore';
 import {push as pushToSequentialQueue, waitForIdle as waitForSequentialQueueIdle} from '@libs/Network/SequentialQueue';
 import {getPusherSocketID} from '@libs/Pusher/pusher';
 import {processWithMiddleware, use} from '@libs/Request';
@@ -76,6 +77,7 @@ function prepareRequest<TCommand extends ApiCommand>(
     const request: SetRequired<OnyxRequest, 'data'> = {
         command,
         data,
+        initiatedOffline: isOffline(),
         ...onyxDataWithoutOptimisticData,
         ...conflictResolver,
     };

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/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,44 @@
+import {readFileAsync} from '@libs/fileDownload/FileUtils';
+import validateFormDataParameter from '@libs/validateFormDataParameter';
+import type PrepareRequestPayload from './types';
+
+/**
+ * Prepares the request payload (body) for a given command and data.
+ * This function is specifically designed for native platforms (IOS and Android) to handle the regeneration of blob files. It ensures that files, such as receipts, are properly read and appended to the FormData object before the request is sent.
+ */
+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 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,24 @@
+import validateFormDataParameter from '@libs/validateFormDataParameter';
+import type PrepareRequestPayload from './types';
+
+/**
+ * Prepares the request payload (body) for a given command and data.
+ */
+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,16 @@ type RequestData = {
 
     /** Whether the app should skip the web proxy to connect to API endpoints */
     shouldSkipWebProxy?: boolean;
+
+    /**
+     * Whether the request is initiated offline.
+     *
+     * This field is used to indicate if the app initiates the request while offline.
+     * It is particularly useful for scenarios such as receipts recreating, where
+     * the app needs to regenerate a blob once the user gets back online.
+     * More info https://github.com/Expensify/App/issues/51761
+     */
+    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);
     });
 });