Merge branch 'main' into marco-prReviewChecklist

.env.example

@@ -1,6 +1,6 @@
-EXPENSIFY_URL_CASH=https://new.expensify.com/
-EXPENSIFY_URL_SECURE=https://secure.expensify.com.dev/
-EXPENSIFY_URL_COM=https://www.expensify.com.dev/
+NEW_EXPENSIFY_URL=https://new.expensify.com/
+SECURE_EXPENSIFY_URL=https://secure.expensify.com.dev/
+EXPENSIFY_URL=https://www.expensify.com.dev/
 EXPENSIFY_PARTNER_NAME=chat-expensify-com
 EXPENSIFY_PARTNER_PASSWORD=e21965746fd75f82bb66
 PUSHER_APP_KEY=ac6d22b891daae55283a

.env.production

@@ -1,6 +1,6 @@
-EXPENSIFY_URL_CASH=https://new.expensify.com/
-EXPENSIFY_URL_SECURE=https://secure.expensify.com/
-EXPENSIFY_URL_COM=https://www.expensify.com/
+NEW_EXPENSIFY_URL=https://new.expensify.com/
+SECURE_EXPENSIFY_URL=https://secure.expensify.com/
+EXPENSIFY_URL=https://www.expensify.com/
 EXPENSIFY_PARTNER_NAME=chat-expensify-com
 EXPENSIFY_PARTNER_PASSWORD=e21965746fd75f82bb66
 PUSHER_APP_KEY=268df511a204fbb60884

.env.staging

@@ -1,6 +1,6 @@
-EXPENSIFY_URL_CASH=https://staging.new.expensify.com/
-EXPENSIFY_URL_SECURE=https://secure.expensify.com/
-EXPENSIFY_URL_COM=https://www.expensify.com/
+NEW_EXPENSIFY_URL=https://staging.new.expensify.com/
+SECURE_EXPENSIFY_URL=https://secure.expensify.com/
+EXPENSIFY_URL=https://www.expensify.com/
 EXPENSIFY_PARTNER_NAME=chat-expensify-com
 EXPENSIFY_PARTNER_PASSWORD=e21965746fd75f82bb66
 PUSHER_APP_KEY=268df511a204fbb60884

.github/PULL_REQUEST_TEMPLATE.md

@@ -54,7 +54,7 @@ This is a checklist for PR authors & reviewers. Please make sure to complete all
     - [ ] I added comments when the code was not self explanatory
     - [ ] I put all copy / text shown in the product in all `src/languages/*` files (if applicable)
     - [ ] I followed proper naming convention for platform-specific files (if applicable)
-    - [ ] I followed style guidelines (in [`Styling.md`](../STYLING.md)) for all style edits I made
+    - [ ] I followed style guidelines (in [`Styling.md`](https://github.com/Expensify/App/blob/main/STYLING.md)) for all style edits I made
     - [ ] I followed the JSDocs style guidelines (in [`STYLE.md`](https://github.com/Expensify/App/blob/main/STYLE.md#jsdocs))
 - [ ] I followed the guidelines as stated in the [Review Guidelines](https://github.com/Expensify/App/blob/main/PR_REVIEW_GUIDELINES.md)
 - [ ] I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like `Avatar`, I verified the components using `Avatar` are working as expected)
@@ -80,14 +80,13 @@ This is a checklist for PR authors & reviewers. Please make sure to complete all
     - [ ] I verified comments were added when the code was not self explanatory
     - [ ] I verified any copy / text shown in the product was added in all `src/languages/*` files (if applicable)
     - [ ] I verified proper naming convention for platform-specific files was followed (if applicable)
-    - [ ] I verified [style guidelines](../STYLING.md) were followed
+    - [ ] I verified [style guidelines](https://github.com/Expensify/App/blob/main/STYLING.md) were followed
     - [ ] I verified the JSDocs style guidelines (in [`STYLE.md`](https://github.com/Expensify/App/blob/main/STYLE.md#jsdocs)) were followed
 - [ ] I verified that this PR follows the guidelines as stated in the [Review Guidelines](https://github.com/Expensify/App/blob/main/PR_REVIEW_GUIDELINES.md)
 - [ ] I verified other components are not impacted by changes in this PR (i.e. if the PR modifies a shared library or component like `Avatar`, I verified the components using `Avatar` are working as expected)
 - [ ] I verified the UI performance was not affected (the performance is the same than `main` branch)
 - [ ] If a new component is created I verified that a similar component doesn't exist in the codebase
 
-
 ### QA Steps
 <!---
 Add a numbered list of manual tests that can be performed by our QA engineers on the staging environment to validate that your changes work on all platforms, and that there are no regressions present.

.gitignore

@@ -43,7 +43,10 @@ android/app/src/main/java/com/expensify/chat/generated/
 node_modules/
 npm-debug.log
 yarn-error.log
+
+# Bundled code
 dist/
+desktop-build/
 
 # BUCK
 buck-out/

.storybook/webpack.config.js

@@ -3,7 +3,9 @@
 const path = require('path');
 const dotenv = require('dotenv');
 const _ = require('underscore');
-const custom = require('../config/webpack/webpack.common');
+const custom = require('../config/webpack/webpack.common')({
+    envFile: '../.env.production',
+});
 
 const env = dotenv.config({path: path.resolve(__dirname, '../.env.staging')}).parsed;
 

README.md

@@ -70,9 +70,9 @@ For an M1 Mac, read this [SO](https://stackoverflow.com/c/expensify/questions/11
 Creating an `.env` file is not necessary. We advise external contributors against it. It can lead to errors when
 variables referenced here get updated since your local `.env` file is ignored.
 
-- `EXPENSIFY_URL_CASH` - The root URL used for the website
-- `EXPENSIFY_URL_SECURE` - The URL used to hit the Expensify secure API
-- `EXPENSIFY_URL_COM` - The URL used to hit the Expensify API
+- `NEW_EXPENSIFY_URL` - The root URL used for the website
+- `SECURE_EXPENSIFY_URL` - The URL used to hit the Expensify secure API
+- `EXPENSIFY_URL` - The URL used to hit the Expensify API
 - `EXPENSIFY_PARTNER_NAME` - Constant used for the app when authenticating.
 - `EXPENSIFY_PARTNER_PASSWORD` - Another constant used for the app when authenticating. (This is OK to be public)
 - `PUSHER_APP_KEY` - Key used to authenticate with Pusher.com

android/app/build.gradle

@@ -152,8 +152,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001014000
-        versionName "1.1.40-0"
+        versionCode 1001014101
+        versionName "1.1.41-1"
     }
     splits {
         abi {

android/app/src/main/AndroidManifest.xml

@@ -17,6 +17,7 @@
     </queries>
 
     <application
+      android:supportsRtl="false" 
       android:name=".MainApplication"
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"

android/app/src/main/java/com/expensify/chat/MainApplication.java

@@ -18,6 +18,7 @@
 import java.lang.reflect.InvocationTargetException;
 import java.lang.reflect.Field;
 import java.util.List;
+import com.facebook.react.modules.i18nmanager.I18nUtil;
 
 import com.facebook.react.bridge.JSIModulePackage;
 import com.swmansion.reanimated.ReanimatedJSIModulePackage;
@@ -68,6 +69,10 @@ public void onCreate() {
           FirebaseCrashlytics.getInstance().setCrashlyticsCollectionEnabled(false);
       }
 
+      // Force the app to LTR mode.
+      I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
+      sharedI18nUtilInstance.allowRTL(getApplicationContext(), false);
+
       // Start the "js_load" custom performance tracing metric. This timer is stopped by a native
       // module in the JS so we can measure total time starting in the native layer and ending in
       // the JS layer.

config/electronBuilder/electronBuilder.config.js

@@ -0,0 +1,44 @@
+const {version} = require('../../package.json');
+
+const isStaging = process.env.ELECTRON_ENV === 'staging';
+const isPublishing = process.argv.includes('--publish');
+
+/**
+ * The configuration for the production and staging Electron builds.
+ * It can be used to create local builds of the same, by omitting the `--publish` flag
+ */
+module.exports = {
+    appId: 'com.expensifyreactnative.chat',
+    productName: 'New Expensify',
+    extraMetadata: {
+        version,
+    },
+    mac: {
+        category: 'public.app-category.finance',
+        target: [
+            {target: 'dmg', arch: ['x64', 'arm64', 'universal']},
+        ],
+        icon: isStaging ? './desktop/icon-stg.png' : './desktop/icon.png',
+        hardenedRuntime: true,
+        entitlements: 'desktop/entitlements.mac.plist',
+        entitlementsInherit: 'desktop/entitlements.mac.plist',
+        type: 'distribution',
+    },
+    dmg: {
+        internetEnabled: true,
+    },
+    publish: [{
+        provider: 's3',
+        bucket: isStaging ? 'staging-expensify-cash' : 'expensify-cash',
+        channel: 'latest',
+    }],
+    afterSign: isPublishing ? './desktop/notarize.js' : undefined,
+    files: [
+        'dist',
+        '!dist/www/{.well-known,favicon*}',
+    ],
+    directories: {
+        app: 'desktop',
+        output: 'desktop-build',
+    },
+};

config/webpack/webpack.common.js

@@ -1,17 +1,12 @@
-const _ = require('underscore');
 const path = require('path');
-const {IgnorePlugin} = require('webpack');
+const {IgnorePlugin, DefinePlugin} = require('webpack');
 const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
+const dotenv = require('dotenv');
+const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
 const CustomVersionFilePlugin = require('./CustomVersionFilePlugin');
 
-// Check for a --platform command line argument (default to 'web')
-// If it is 'web', we want to ignore .desktop.js files, and if it is 'desktop', we want to ignore .website.js files.
-const platformIndex = _.findIndex(process.argv, arg => arg === '--platform');
-const platform = (platformIndex > 0) ? process.argv[platformIndex + 1] : 'web';
-const platformExclude = platform === 'web' ? new RegExp(/\.desktop\.js$/) : new RegExp(/\.website\.js$/);
-
 const includeModules = [
     'react-native-animatable',
     'react-native-reanimated',
@@ -26,7 +21,16 @@ const includeModules = [
     'react-native-google-places-autocomplete',
 ].join('|');
 
-const webpackConfig = {
+/**
+ * Get a production grade config for web or desktop
+ * @param {Object} env
+ * @param {String} env.envFile path to the env file to be used
+ * @param {'web'|'desktop'} env.platform
+ * @returns {Configuration}
+ */
+const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
+    mode: 'production',
+    devtool: 'source-map',
     entry: {
         app: './index.js',
     },
@@ -60,7 +64,20 @@ const webpackConfig = {
             ],
         }),
         new IgnorePlugin(/^\.\/locale$/, /moment$/),
-        new CustomVersionFilePlugin(),
+        ...(platform === 'web' ? [new CustomVersionFilePlugin()] : []),
+        new DefinePlugin({
+            __REACT_WEB_CONFIG__: JSON.stringify(
+                dotenv.config({path: envFile}).parsed,
+            ),
+
+            // React Native JavaScript environment requires the global __DEV__ variable to be accessible.
+            // react-native-render-html uses variable to log exclusively during development.
+            // See https://reactnative.dev/docs/javascript-environment
+            __DEV__: /staging|prod/.test(envFile) === false,
+        }),
+
+        // This allows us to interactively inspect JS bundle contents
+        ...(process.env.ANALYZE_BUNDLE === 'true' ? [new BundleAnalyzerPlugin()] : []),
     ],
     module: {
         rules: [
@@ -79,15 +96,13 @@ const webpackConfig = {
                  */
                 exclude: [
                     new RegExp(`node_modules/(?!(${includeModules})/).*|.native.js$`),
-                    platformExclude,
                 ],
             },
             {
                 test: /\.js$/,
                 loader: 'eslint-loader',
                 exclude: [
                     /node_modules|\.native\.js$/,
-                    platformExclude,
                 ],
                 options: {
                     cache: false,
@@ -143,8 +158,9 @@ const webpackConfig = {
         // without this, web will try to use native implementations and break in not very obvious ways.
         // This is also why we have to use .website.js for our own web-specific files...
         // Because desktop also relies on "web-specific" module implementations
+        // This also skips packing web only dependencies to desktop and vice versa
         extensions: ['.web.js', (platform === 'web') ? '.website.js' : '.desktop.js', '.js', '.jsx'],
     },
-};
+});
 
 module.exports = webpackConfig;

config/webpack/webpack.desktop.js

@@ -0,0 +1,56 @@
+const path = require('path');
+const webpack = require('webpack');
+const _ = require('underscore');
+
+const desktopDependencies = require('../../desktop/package.json').dependencies;
+const getCommonConfig = require('./webpack.common');
+
+/**
+ * Desktop creates 2 configurations in parallel
+ * 1. electron-main - the core that serves the app content
+ * 2. web - the app content that would be rendered in electron
+ * Everything is placed in desktop/dist and ready for packaging
+ * @param {Object} env
+ * @returns {webpack.Configuration[]}
+ */
+module.exports = (env) => {
+    const rendererConfig = getCommonConfig({...env, platform: 'desktop'});
+    const outputPath = path.resolve(__dirname, '../../desktop/dist');
+
+    rendererConfig.name = 'renderer';
+    rendererConfig.output.path = path.join(outputPath, 'www');
+
+    // Expose react-native-config to desktop-main
+    const definePlugin = _.find(rendererConfig.plugins, plugin => plugin.constructor === webpack.DefinePlugin);
+
+    const mainProcessConfig = {
+        mode: 'production',
+        name: 'desktop-main',
+        target: 'electron-main',
+        entry: {
+            main: './desktop/main.js',
+            contextBridge: './desktop/contextBridge.js',
+        },
+        output: {
+            filename: '[name].js',
+            path: outputPath,
+            libraryTarget: 'commonjs2',
+        },
+        resolve: rendererConfig.resolve,
+        plugins: [definePlugin],
+        externals: [
+            ..._.keys(desktopDependencies),
+            'fsevents',
+        ],
+        node: {
+            /**
+             * Disables webpack processing of __dirname and __filename, so it works like in node
+             * https://github.com/webpack/webpack/issues/2010
+             */
+            __dirname: false,
+            __filename: false,
+        },
+    };
+
+    return [mainProcessConfig, rendererConfig];
+};