Merge branch 'main' into ts-migration/ReportActions-lib

.eslintrc.js

@@ -24,7 +24,7 @@ const restrictedImportPatterns = [
 ];
 
 module.exports = {
-    extends: ['expensify', 'plugin:storybook/recommended', 'plugin:react-hooks/recommended', 'prettier', 'plugin:react-native-a11y/basic'],
+    extends: ['expensify', 'plugin:storybook/recommended', 'plugin:react-hooks/recommended', 'plugin:react-native-a11y/basic', 'prettier'],
     plugins: ['react-hooks', 'react-native-a11y'],
     parser: 'babel-eslint',
     ignorePatterns: ['!.*', 'src/vendor', '.github/actions/**/index.js', 'desktop/dist/*.js', 'dist/*.js', 'node_modules/.bin/**', 'node_modules/.cache/**', '.git/**'],
@@ -46,7 +46,6 @@ module.exports = {
                         touchables: ['PressableWithoutFeedback', 'PressableWithFeedback'],
                     },
                 ],
-                curly: 'error',
             },
         },
         {
@@ -76,6 +75,7 @@ module.exports = {
                         patterns: restrictedImportPatterns,
                     },
                 ],
+                curly: 'error',
             },
         },
         {
@@ -162,6 +162,7 @@ module.exports = {
                         patterns: restrictedImportPatterns,
                     },
                 ],
+                curly: 'error',
             },
         },
         {

.github/scripts/createDocsRoutes.js

@@ -2,10 +2,14 @@ const yaml = require('js-yaml');
 const fs = require('fs');
 const _ = require('underscore');
 
-const warn = 'Number of hubs in _routes.yml does not match number of hubs in docs/articles. Please update _routes.yml with hub info.';
+const warnMessage = (platform) => `Number of hubs in _routes.yml does not match number of hubs in docs/${platform}/articles. Please update _routes.yml with hub info.`;
 const disclaimer = '# This file is auto-generated. Do not edit it directly. Use npm run createDocsRoutes instead.\n';
 const docsDir = `${process.cwd()}/docs`;
 const routes = yaml.load(fs.readFileSync(`${docsDir}/_data/_routes.yml`, 'utf8'));
+const platformNames = {
+    expensifyClassic: 'expensify-classic',
+    newExpensify: 'new-expensify',
+};
 
 /**
  * @param {String} str - The string to convert to title case
@@ -28,7 +32,7 @@ function getArticleObj(filename) {
 }
 
 /**
- * If the articlea / sections exist in the hub, then push the entry to the array.
+ * If the article / sections exist in the hub, then push the entry to the array.
  * Otherwise, create the array and push the entry to it.
  * @param {*} hubs - The hubs array
  * @param {*} hub - The hub we are iterating
@@ -44,20 +48,20 @@ function pushOrCreateEntry(hubs, hub, key, entry) {
     }
 }
 
-function run() {
-    const hubs = fs.readdirSync(`${docsDir}/articles`);
-    if (hubs.length !== routes.hubs.length) {
-        // If new hubs have been added without metadata addition to _routes.yml
-        console.error(warn);
-        process.exit(1);
-    }
+/**
+ * Add articles and sections to hubs
+ * @param {Array} hubs - The hubs inside docs/articles/ for a platform
+ * @param {String} platformName - Expensify Classic or New Expensify
+ * @param {Array} routeHubs - The hubs insude docs/data/_routes.yml for a platform
+ */
+function createHubsWithArticles(hubs, platformName, routeHubs) {
     _.each(hubs, (hub) => {
         // Iterate through each directory in articles
-        fs.readdirSync(`${docsDir}/articles/${hub}`).forEach((fileOrFolder) => {
+        fs.readdirSync(`${docsDir}/articles/${platformName}/${hub}`).forEach((fileOrFolder) => {
             // If the directory content is a markdown file, then it is an article
             if (fileOrFolder.endsWith('.md')) {
                 const articleObj = getArticleObj(fileOrFolder);
-                pushOrCreateEntry(routes.hubs, hub, 'articles', articleObj);
+                pushOrCreateEntry(routeHubs, hub, 'articles', articleObj);
                 return;
             }
 
@@ -66,17 +70,38 @@ function run() {
             const articles = [];
 
             // Each subfolder will be a section containing articles
-            fs.readdirSync(`${docsDir}/articles/${hub}/${section}`).forEach((subArticle) => {
+            fs.readdirSync(`${docsDir}/articles/${platformName}/${hub}/${section}`).forEach((subArticle) => {
                 articles.push(getArticleObj(subArticle));
             });
 
-            pushOrCreateEntry(routes.hubs, hub, 'sections', {
+            pushOrCreateEntry(routeHubs, hub, 'sections', {
                 href: section,
                 title: toTitleCase(section.replaceAll('-', ' ')),
                 articles,
             });
         });
     });
+}
+
+function run() {
+    const expensifyClassicArticleHubs = fs.readdirSync(`${docsDir}/articles/${platformNames.expensifyClassic}`);
+    const newExpensifyArticleHubs = fs.readdirSync(`${docsDir}/articles/${platformNames.newExpensify}`);
+
+    const expensifyClassicRoute = _.find(routes.platforms, (platform) => platform.href === platformNames.expensifyClassic);
+    const newExpensifyRoute = _.find(routes.platforms, (platform) => platform.href === platformNames.newExpensify);
+
+    if (expensifyClassicArticleHubs.length !== expensifyClassicRoute.hubs.length) {
+        console.error(warnMessage(platformNames.expensifyClassic));
+        process.exit(1);
+    }
+
+    if (newExpensifyArticleHubs.length !== newExpensifyRoute.hubs.length) {
+        console.error(warnMessage(platformNames.newExpensify));
+        process.exit(1);
+    }
+
+    createHubsWithArticles(expensifyClassicArticleHubs, platformNames.expensifyClassic, expensifyClassicRoute.hubs);
+    createHubsWithArticles(newExpensifyArticleHubs, platformNames.newExpensify, newExpensifyRoute.hubs);
 
     // Convert the object to YAML and write it to the file
     let yamlString = yaml.dump(routes);

android/app/build.gradle

@@ -90,8 +90,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001037206
-        versionName "1.3.72-6"
+        versionCode 1001037209
+        versionName "1.3.72-9"
     }
 
     flavorDimensions "default"

contributingGuides/STYLE.md

@@ -491,6 +491,19 @@ When writing a function component you must ALWAYS add a `displayName` property a
     export default Avatar;
 ```
 
+## Forwarding refs
+
+When forwarding a ref define named component and pass it directly to the `forwardRef`. By doing this we remove potential extra layer in React tree in form of anonymous component.
+
+```javascript
+    function FancyInput(props, ref) {
+        ...
+        return <input {...props} ref={ref} />
+    }
+
+    export default React.forwardRef(FancyInput)
+```
+
 ## Stateless components vs Pure Components vs Class based components vs Render Props - When to use what?
 
 Class components are DEPRECATED. Use function components and React hooks.

contributingGuides/TS_CHEATSHEET.md

@@ -43,24 +43,28 @@
 - [1.2](#forwardRef) **`forwardRef`**
 
   ```ts
-  import { forwardRef, useRef, ReactNode } from "react";
+  // CustomTextInput.tsx
+
+  import { forwardRef, useRef, ReactNode, ForwardedRef } from "react";
   import { TextInput, View } from "react-native";
 
   export type CustomTextInputProps = {
     label: string;
     children?: ReactNode;
   };
 
-  const CustomTextInput = forwardRef<TextInput, CustomTextInputProps>(
-    (props, ref) => {
-      return (
-        <View>
-          <TextInput ref={ref} />
-          {props.children}
-        </View>
-      );
-    }
-  );
+  function CustomTextInput(props: CustomTextInputProps, ref: ForwardedRef<TextInput>) {
+    return (
+      <View>
+        <TextInput ref={ref} />
+        {props.children}
+      </View>
+    );
+  };
+
+  export default forwardRef(CustomTextInput);
+
+  // ParentComponent.tsx
 
   function ParentComponent() {
     const ref = useRef<TextInput>();

docs/_data/_routes.yml

@@ -1,26 +1,142 @@
 home:
   href: home
   title: Welcome to ExpensifyHelp!
-  description: Find the answers to all of your questions about receipts, expenses, corporate cards, or anything else in the spend management universe.
-
-# Hubs are comprised of sections and articles. Sections contain multiple related articles, but there can be standalone articles as well
-hubs:
-  - href: split-bills
-    title: Split bills
-    description: With only a couple of clicks, split bills with your friends or coworkers.
-    icon: /assets/images/paper-airplane.svg
-
-  - href: request-money
-    title: Request money
-    icon: /assets/images/money-case.svg
-    description: Request money for work expenses, bills, or a night out with friends.
-
-  - href: playbooks
-    title: Playbooks
-    icon: /assets/images/playbook.svg
-    description: Best practices for how to best deploy Expensify for your business
-
-  - href: other
-    title: Other
-    description: Everything else you're looking for is right here.
-    icon: /assets/images/lightbulb.svg
+  description: Questions? Find the answers by clicking a Category or using the search bar located in the left-hand menu.
+
+platforms:
+  - href: expensify-classic
+    title: Expensify Classic
+    hub-title: Expensify Classic - Help & Resources
+    url: expensify.com
+    description: Your account settings will look something like this
+    image: /assets/images/paper-airplane.svg
+
+    # Hubs are comprised of sections and articles. Sections contain multiple related articles, but there can be standalone articles as well
+    hubs:
+      - href: account-settings
+        title: Account Settings
+        icon: /assets/images/gears.svg
+        description: With only a couple of clicks, split bills with your friends or coworkers.
+
+      - href: bank-accounts-and-credit-cards
+        title: Bank Accounts & Credit Cards
+        icon: /assets/images/bank-card.svg
+        description: Request money for work expenses, bills, or a night out with friends.
+
+      - href: billing-and-subscriptions
+        title: Billing & Subscriptions
+        icon: /assets/images/money-wings.svg
+        description: Best practices for how to best deploy Expensify for your business
+
+      - href: expense-and-report-features
+        title: Expense & Report Features
+        icon: /assets/images/money-receipt.svg
+        description: Everything else you're looking for is right here.
+
+      - href: expensify-card
+        title: Expensify Card
+        icon: /assets/images/hand-card.svg
+        description: Request money for work expenses, bills, or a night out with friends.
+
+      - href: exports
+        title: Exports
+        icon: /assets/images/monitor.svg
+        description: Best practices for how to best deploy Expensify for your business
+
+      - href: get-paid-back
+        title: Get Paid Back
+        description: Everything else you're looking for is right here.
+        icon: /assets/images/money-into-wallet.svg
+
+      - href: getting-started
+        title: Getting Started
+        description: Everything else you're looking for is right here.
+        icon: /assets/images/accounting.svg
+
+      - href: integrations
+        title: Integrations
+        description: Everything else you're looking for is right here.
+        icon: /assets/images/workflow.svg
+
+      - href: manage-employees-and-report-approvals
+        title: Manage Employees & Report Approvals
+        icon: /assets/images/envelope-receipt.svg
+        description: Everything else you're looking for is right here.
+
+      - href: policy-and-domain-settings
+        title: Policy & Domain Setting
+        icon: /assets/images/shield.svg
+        description: Everything else you're looking for is right here.
+
+      - href: send-payments
+        title: Send Payments
+        icon: /assets/images/money-wings.svg
+        description: Everything else you're looking for is right here.
+
+  - href: new-expensify
+    title: New Expensify
+    hub-title: New Expensify - Help & Resources
+    url: new.expensify.com
+    description: Your account settings will look something like this
+    image: /assets/images/paper-airplane.svg
+
+    hubs:
+      - href: account-settings
+        title: Account Settings
+        icon: /assets/images/gears.svg
+        description: With only a couple of clicks, split bills with your friends or coworkers.
+
+      - href: bank-accounts-and-credit-cards
+        title: Bank Accounts & Credit Cards
+        icon: /assets/images/bank-card.svg
+        description: description
+
+      - href: billing-and-plan-types
+        title: Billing & Plan Types
+        icon: /assets/images/money-wings.svg
+        description: description
+
+      - href: expense-and-report-features
+        title: Expense & Report Features
+        icon: /assets/images/money-receipt.svg
+        description: description
+
+      - href: expensify-card
+        title: Expensify Card
+        icon: /assets/images/hand-card.svg
+        description: description
+
+      - href: exports
+        title: Exports
+        icon: /assets/images/monitor.svg
+        description: description
+
+      - href: get-paid-back
+        title: Get Paid Back
+        icon: /assets/images/money-into-wallet.svg
+        description: description
+
+      - href: getting-started
+        title: Getting Started
+        icon: /assets/images/accounting.svg
+        description: description
+
+      - href: integrations
+        title: Integrations
+        icon: /assets/images/workflow.svg
+        description: description
+
+      - href: manage-employees-and-report-approvals
+        title: Manage Employees & Report Approvals
+        icon: /assets/images/envelope-receipt.svg
+        description: description
+
+      - href: send-payments
+        title: Send Payments
+        icon: /assets/images/money-wings.svg
+        description: description.
+
+      - href: workspace-and-domain-settings
+        title: Workspace & Domain Settings
+        icon: /assets/images/shield.svg
+        description: description.