🍒 Cherry pick PR #7665 to staging 🍒

android/app/build.gradle

@@ -152,8 +152,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001013801
-        versionName "1.1.38-1"
+        versionCode 1001013802
+        versionName "1.1.38-2"
     }
     splits {
         abi {

config/electron.config.js

@@ -1,8 +1,11 @@
+const ENVIRONMENT = require('../src/CONST/ENVIRONMENT');
+
 module.exports = {
     appId: 'com.expensifyreactnative.chat',
     productName: 'New Expensify',
     extraMetadata: {
         main: './desktop/main.js',
+        electronEnvironment: process.env.SHOULD_DEPLOY_PRODUCTION ? ENVIRONMENT.PRODUCTION : ENVIRONMENT.STAGING,
     },
     mac: {
         category: 'public.app-category.finance',

desktop/ELECTRON_ENVIRONMENT.js

@@ -0,0 +1,30 @@
+// This variable is injected into package.json by electron-builder via the extraMetadata field (specified in electron.config.js)
+// It will be `PROD` on production, `STG` on staging, and `undefined` on dev (because dev doesn't use electron-builder)
+const {electronEnvironment} = require('../package.json');
+const ENVIRONMENT = require('../src/CONST/ENVIRONMENT');
+
+/**
+ * @returns {String} – One of ['PROD', 'STG', 'DEV']
+ */
+function getEnvironment() {
+    // If we are on dev, then the NODE_ENV environment variable will be present (set by the executing shell in start.js)
+    if (process.env.NODE_ENV === 'development') {
+        return ENVIRONMENT.DEV;
+    }
+
+    // Otherwise, use the environment injected into package.json by electron-builder
+    return electronEnvironment;
+}
+
+function isDev() {
+    return getEnvironment() === ENVIRONMENT.DEV;
+}
+
+function isProd() {
+    return getEnvironment() === ENVIRONMENT.PRODUCTION;
+}
+
+module.exports = {
+    isDev,
+    isProd,
+};

desktop/main.js

@@ -11,10 +11,10 @@ const serve = require('electron-serve');
 const contextMenu = require('electron-context-menu');
 const {autoUpdater} = require('electron-updater');
 const log = require('electron-log');
+const ELECTRON_ENVIRONMENT = require('./ELECTRON_ENVIRONMENT');
 const ELECTRON_EVENTS = require('./ELECTRON_EVENTS');
 const checkForUpdates = require('../src/libs/checkForUpdates');
 
-const isDev = process.env.NODE_ENV === 'development';
 const port = process.env.PORT || 8080;
 
 /**
@@ -41,7 +41,7 @@ autoUpdater.logger.transports.file.level = 'info';
 _.assign(console, log.functions);
 
 // setup Hot reload
-if (isDev) {
+if (ELECTRON_ENVIRONMENT.isDev()) {
     try {
         require('electron-reloader')(module, {
             watchRenderer: false,
@@ -124,12 +124,12 @@ const electronUpdater = browserWindow => ({
 });
 
 const mainWindow = (() => {
-    const loadURL = isDev
+    const loadURL = ELECTRON_ENVIRONMENT.isDev()
         ? win => win.loadURL(`http://localhost:${port}`)
         : serve({directory: `${__dirname}/../dist`});
 
     // Prod and staging set the icon in the electron-builder config, so only update it here for dev
-    if (isDev) {
+    if (ELECTRON_ENVIRONMENT.isDev()) {
         app.dock.setIcon(`${__dirname}/icon-dev.png`);
         app.setName('New Expensify');
     }
@@ -147,8 +147,38 @@ const mainWindow = (() => {
                 titleBarStyle: 'hidden',
             });
 
+            /*
+             * The default origin of our Electron app is app://- instead of https://new.expensify.com or https://staging.new.expensify.com
+             * This causes CORS errors because the referer and origin headers are wrong and the API responds with an Access-Control-Allow-Origin that doesn't match app://-
+             *
+             * To fix this, we'll:
+             *
+             *   1. Modify headers on any outgoing requests to match the origin of our corresponding web environment.
+             *   2. Modify the Access-Control-Allow-Origin header of the response to match the "real" origin of our Electron app.
+             */
+            if (!ELECTRON_ENVIRONMENT.isDev()) {
+                const newDotURL = ELECTRON_ENVIRONMENT.isProd() ? 'https://new.expensify.com' : 'https://staging.new.expensify.com';
+
+                // Modify the origin and referer for requests sent to our API
+                const validDestinationFilters = {urls: ['https://*.expensify.com/*']};
+                browserWindow.webContents.session.webRequest.onBeforeSendHeaders(validDestinationFilters, (details, callback) => {
+                    // eslint-disable-next-line no-param-reassign
+                    details.requestHeaders.origin = newDotURL;
+                    // eslint-disable-next-line no-param-reassign
+                    details.requestHeaders.referer = newDotURL;
+                    callback({requestHeaders: details.requestHeaders});
+                });
+
+                // Modify access-control-allow-origin header for the response
+                browserWindow.webContents.session.webRequest.onHeadersReceived(validDestinationFilters, (details, callback) => {
+                    // eslint-disable-next-line no-param-reassign
+                    details.responseHeaders['access-control-allow-origin'] = ['app://-'];
+                    callback({responseHeaders: details.responseHeaders});
+                });
+            }
+
             // Prod and staging overwrite the app name in the electron-builder config, so only update it here for dev
-            if (isDev) {
+            if (ELECTRON_ENVIRONMENT.isDev()) {
                 browserWindow.setTitle('New Expensify');
             }
 
@@ -286,7 +316,7 @@ const mainWindow = (() => {
 
         // Start checking for JS updates
         .then((browserWindow) => {
-            if (isDev) {
+            if (ELECTRON_ENVIRONMENT.isDev()) {
                 return;
             }
 

ios/NewExpensify/Info.plist

@@ -31,7 +31,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.38.1</string>
+	<string>1.1.38.2</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.1.38.1</string>
+	<string>1.1.38.2</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.1.38-1",
+  "version": "1.1.38-2",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/CONST/ENVIRONMENT.js

@@ -0,0 +1,5 @@
+module.exports = {
+    DEV: 'DEV',
+    STAGING: 'STG',
+    PRODUCTION: 'PROD',
+};

src/CONST.js → src/CONST/index.js

@@ -1,6 +1,7 @@
 import lodashGet from 'lodash/get';
 import Config from 'react-native-config';
-import * as Url from './libs/Url';
+import ENVIRONMENT from './ENVIRONMENT';
+import * as Url from '../libs/Url';
 
 const CLOUDFRONT_URL = 'https://d2k5nsl2zxldvw.cloudfront.net';
 const ACTIVE_ENVIRONMENT_NEW_EXPENSIFY_URL = Url.addTrailingForwardSlash(lodashGet(Config, 'EXPENSIFY_URL_CASH', 'https://new.expensify.com'));
@@ -388,12 +389,6 @@ const CONST = {
         ADMIN: '[email protected]',
     },
 
-    ENVIRONMENT: {
-        DEV: 'DEV',
-        STAGING: 'STG',
-        PRODUCTION: 'PROD',
-    },
-
     // Used to delay the initial fetching of reportActions when the app first inits or reconnects (e.g. returning
     // from backgound). The times are based on how long it generally seems to take for the app to become interactive
     // in each scenario.
@@ -612,4 +607,6 @@ const CONST = {
     },
 };
 
+CONST.ENVIRONMENT = ENVIRONMENT;
+
 export default CONST;