Merge branch 'main' into sys/bump-react-native-pager-view

.github/workflows/deploy.yml

@@ -71,7 +71,10 @@ jobs:
         run: echo "PRODUCTION_VERSION=$(npm run print-version --silent)" >> "$GITHUB_ENV"
 
       - name: 🚀 Edit the release to be no longer a prerelease to deploy production 🚀
-        run: gh release edit ${{ env.PRODUCTION_VERSION }} --prerelease=false --latest
+        run: |
+          LATEST_RELEASE="$(gh release list --exclude-pre-releases --json tagName,isLatest --jq '.[] | select(.isLatest) | .tagName')"
+          gh api --method POST /repos/Expensify/App/releases/generate-notes -f "tag_name=${{ env.PRODUCTION_VERSION }}" -f "previous_tag_name=$LATEST_RELEASE" >> releaseNotes.md
+          gh release edit ${{ env.PRODUCTION_VERSION }} --prerelease=false --latest --notes-file releaseNotes.md
         env:
           GITHUB_TOKEN: ${{ steps.setupGitForOSBotify.outputs.OS_BOTIFY_API_TOKEN }}
 

.gitignore

@@ -140,3 +140,6 @@ web-build/
 
 # Jeykll
 docs/.bundle
+
+# Output of react compiler healthcheck dev script
+react-compiler-output.txt

Gemfile.lock

@@ -15,7 +15,7 @@ GEM
     algoliasearch (1.27.5)
       httpclient (~> 2.8, >= 2.8.3)
       json (>= 1.5.1)
-    apktools (0.7.4)
+    apktools (0.7.5)
       rubyzip (~> 2.0)
     artifactory (3.0.17)
     atomos (0.1.3)

README.md

@@ -26,6 +26,7 @@
 * [Contributing to Expensify](contributingGuides/CONTRIBUTING.md)
 * [Expensify Code of Conduct](CODE_OF_CONDUCT.md)
 * [Contributor License Agreement](contributingGuides/CLA.md)
+* [React StrictMode](contributingGuides/STRICT_MODE.md)
 
 ----
 

__mocks__/react-native-document-picker.ts

@@ -18,6 +18,7 @@ const reactNativeDocumentPickerMock: ReactNativeDocumentPickerMock = {
         doc: 'com.microsoft.word.doc',
         docx: 'org.openxmlformats.wordprocessingml.document',
         images: 'public.image',
+        json: 'public.json',
         pdf: 'com.adobe.pdf',
         plainText: 'public.plain-text',
         ppt: 'com.microsoft.powerpoint.ppt',

android/app/build.gradle

@@ -110,8 +110,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1009002510
-        versionName "9.0.25-10"
+        versionCode 1009002700
+        versionName "9.0.27-0"
         // Supported language variants must be declared here to avoid from being removed during the compilation.
         // This also helps us to not include unnecessary language variants in the APK.
         resConfigs "en", "es"

contributingGuides/REACT_COMPILER.md

@@ -16,10 +16,10 @@ If the CI check fails for your PR, you need to fix the problem. If you're unsure
 
 ## How can I check what exactly prevents file from successful optimization or whether my fix for passing `react-compiler` actually works?
 
-You can run `npm run react-compiler-healthcheck` and examine the output. This command will list the files that failed to compile and provide details on what caused the failures. The output can be extensive, so you may want to write it to a file for easier review:
+You can run a dedicated script: `react-compiler-healthcheck-test` and examine the output. This command will list the files that failed to compile with details on what caused the failures. It will then save this output to `./react-compiler-output.txt` file. Read and examine the output to find what specific error the react-compiler throws.
 
 ```bash
-npm run react-compiler-healthcheck &> output.txt
+npm run react-compiler-healthcheck-test
 ```
 
 ## How to fix a particular problem?
@@ -39,9 +39,14 @@ If you encounter this error, you need to add the `Ref` postfix to the variable n
 
 If you added a modification to `SharedValue`, you'll likely encounter this error. You can ignore this error for now because the current `react-native-reanimated` API is not compatible with `react-compiler` rules. Once [this PR](https://github.com/software-mansion/react-native-reanimated/pull/6312) is merged, we'll rewrite the code to be compatible with `react-compiler`. Until then, you can ignore this error.
 
-### `manual memoization could not be preserved`
+### Existing manual memoization could not be preserved. [...]
+These types of errors usually occur when the calls to `useMemo` that were made manually are too complex for react-compiler to understand. React compiler is still experimental so unfortunately this can happen.
 
-This error usually occurs when a dependency used inside a hook is omitted. This omission creates a memoization that is too complex to optimize automatically. Try including the missing dependencies.
+Some specific cases of this error are described below.
+
+#### The inferred dependencies did not match the manually specified dependencies
+
+This usually happens when a dependency used inside a hook is omitted. Try including the missing dependencies.
 
 Please be aware that `react-compiler` struggles with memoization of nested fields, i. e.:
 
@@ -56,6 +61,27 @@ const selectedQboAccountName = useMemo(() => qboAccountOptions?.find(({id}) => i
 // which is great because it reduces the amount of the duplicated code
 ```
 
+#### This value may be mutated later, which could cause the value to change unexpectedly
+
+This usually happens when the value returned from `useMemo` is later passed to some other function, and `react-compiler` doesn't know if the value will stay stable or be mutated.
+
+```ts
+// ❌ such code triggers the error
+const myResult = useMemo(() => SearchUtils.buildSearchQueryJSON(foobar), [foobar]);
+// [...] some other code
+const betterQuery = Utils.improveQuery(myResult);
+
+// ✅ this code can be compiled successfully
+const {myResult, betterQuery} = useMemo(() => {
+    const result = SearchUtils.buildSearchQueryJSON(foobar);
+
+    return {
+        myResult: result,
+        betterQuery: Utils.improveQuery(result)
+    }
+},[foobar]);
+```
+
 ### `Invalid nesting in program blocks or scopes`
 
 Such error may happen if we have a nested memoization, i. e.:

contributingGuides/STRICT_MODE.md

@@ -0,0 +1,44 @@
+# Usage of react concurrent mode and StrictMode
+## Concurrent react
+This App is rendered using react concurrent mode, which is the direction that React seems to be moving.
+
+Concurrent mode enables a lot of new behaviours in react, most importantly renders can be interrupted by React, re-run or run more than once. This is supposed to make react more performant and webapps more responsive to user actions.
+
+Further reading:
+ - [What is Concurrent React](https://react.dev/blog/2022/03/29/react-v18#what-is-concurrent-react)
+
+## StrictMode
+Because the previously described concurrent mode could potentially introduce new bugs in the code (related to parallel rendering) we are using `<StrictMode />`.
+This is a recommendation from React team as per react official docs.
+
+`<StrictMode>` is a component that wraps the whole App in (or parts of App) and it runs extra checks and extra behaviors only in dev. So in essence this is a developer tool.
+
+### Temporarily disabling StrictMode for dev
+Strict mode *by default always* wraps entire Expensify App component tree. This happens in `src/App.tsx`.
+
+However, it might happen you want to temporarily disable `StrictMode` when developing, to verify that your code behaves properly.
+
+To do that:
+ - go to `src/CONFIG.ts`
+ - set `USE_REACT_STRICT_MODE_IN_DEV` flag to `false`
+
+_Important note_: this ☝️flag is strictly for developers. It does not affect production builds of React.  
+StrictMode is supposed to always wrap your App regardless of environment, and it will simply do nothing when run on production react build.
+Only use this flag for local development and testing, but do not make it depending on `NODE_ENV` or any other env vars.
+
+### Common StrictMode pitfalls
+ - every component will go through: `mount -> unmount -> mount` on first app render
+ - any code running inside `useEffect(() => {...}, [])` that would be expected to run once on initial render, will run twice, this might include initial api calls
+
+#### Example: How StrictMode Affects AuthScreen
+In AuthScreen, we have a typical pattern where certain logic is executed during mounting and unmounting, this is what happen after a refresh:
+- Mounting: it runs `ReconnectApp`.
+- Unmounting: AuthScreen cleans up data.
+- Re-mounting Due to StrictMode: This behavior will cause `OpenApp` to be executed on the new mount.
+
+Impact: This double execution could lead to unnecessary API calls or unexpected states.
+
+Sources:
+ - [StrictMode docs](https://react.dev/reference/react/StrictMode)
+ - [StrictMode recommended usage](https://react.dev/reference/react/StrictMode)
+ - [Original PR introducing this feature](https://github.com/Expensify/App/pull/42592)

docs/articles/expensify-classic/connections/quickbooks-desktop/Connect-To-QuickBooks-Desktop.md

@@ -18,41 +18,41 @@ To connect QuickBooks Desktop to Expensify, you must log into QuickBooks Desktop
 4. Click **Connect to QuickBooks Desktop**. 
 5. Click Copy to copy the link, then paste the link into the computer where QuickBooks Desktop is running.
 
-![QuickBooks Desktop Setup pop-up link, containing the URL to paste](https://help.expensify.com/assets/images/QBO_desktop_01.png){:width="100%"}
+     ![QuickBooks Desktop Setup pop-up link, containing the URL to paste](https://help.expensify.com/assets/images/QBO_desktop_01.png){:width="100%"}
 
 6. Select the version of QuickBooks Desktop that you currently have.
 
-![The Web Connnector Pop-up to allow you to select the type of QuickBooks Desktop you have](https://help.expensify.com/assets/images/QBO_desktop_02.png){:width="100%"}
+    ![The Web Connnector Pop-up to allow you to select the type of QuickBooks Desktop you have](https://help.expensify.com/assets/images/QBO_desktop_02.png){:width="100%"}
 
 7. Download the Web Connector and go through the guided installation process.
 8. Open the Web Connector. 
 9. Click on **Add an Application**. 
 
-![The Web Connnector Pop-up where you will need to click on Add an Application](https://help.expensify.com/assets/images/QBO_desktop_03.png){:width="100%"}
+    ![The Web Connnector Pop-up where you will need to click on Add an Application](https://help.expensify.com/assets/images/QBO_desktop_03.png){:width="100%"}
 
 {% include info.html %}
 For this step, it is key to ensure that the correct company file is open in QuickBooks Desktop and that it is the only one open.
 {% include end-info.html %}
 
 10. In QuickBooks Desktop, select **"Yes, always allow access, even when QuickBooks is not running"** and click **Continue**. 
 
-![The QuickBooks Desktop pop-up, where you will need to select "Yes, always allow access, even when QuickBooks is not running"](https://help.expensify.com/assets/images/QBO_desktop_04.png){:width="100%"}
+    ![The QuickBooks Desktop pop-up, where you will need to select "Yes, always allow access, even when QuickBooks is not running"](https://help.expensify.com/assets/images/QBO_desktop_04.png){:width="100%"}
 
 11. Click **OK**, then click **Yes**.
 
-![The QuickBooks Desktop pop-up, where you will need to click "Ok" then select "Yes"](https://help.expensify.com/assets/images/QBO_desktop_05.png){:width="100%"}
+    ![The QuickBooks Desktop pop-up, where you will need to click "Ok" then select "Yes"](https://help.expensify.com/assets/images/QBO_desktop_05.png){:width="100%"}
 
 12. Click **Copy** to copy the password.
 
-![The Web Connector pop-up, where you will need to click "Copy"](https://help.expensify.com/assets/images/QBO_desktop_06.png){:width="100%"}
+    ![The Web Connector pop-up, where you will need to click "Copy"](https://help.expensify.com/assets/images/QBO_desktop_06.png){:width="100%"}
 
 13. Paste the password into the Password field of the Web Connector and press **Enter**.
 
-![The Web Connector pop-up, where you will need to paste the password into the password field](https://help.expensify.com/assets/images/QBO_desktop_08.png){:width="100%"}
+    ![The Web Connector pop-up, where you will need to paste the password into the password field](https://help.expensify.com/assets/images/QBO_desktop_08.png){:width="100%"}
 
 14. Click **Yes** to save the password. The new connection now appears in the Web Connector.
 
-![The Web Connector pop-up, where you will need to click "Yes"](https://help.expensify.com/assets/images/QBO_desktop_07.png){:width="100%"}
+    ![The Web Connector pop-up, where you will need to click "Yes"](https://help.expensify.com/assets/images/QBO_desktop_07.png){:width="100%"}
 
 # FAQ
 

docs/articles/expensify-classic/reports/Set-default-report-title.md

@@ -11,7 +11,7 @@ Workspace Admins can set a default report title for all reports created under a
 3. Click the **Reports** tab on the left.
 4. Scroll down to the Default Report Title section. 
 5. Configure the formula. You can use the example provided on the page as a guide or choose from more [report formula options](https://help.expensify.com/articles/expensify-classic/spending-insights/Custom-Templates).
-   - Some formulas will automatically update the report title as changes are made to the report. For example, any formula related to dates, total amounts, workspace name, would adjust the title before the report is submitted for approval. Changes will not retroactively update report titles for reports which have been Approved or Reimbursed.
+   - Some formulas will automatically update the report title as changes are made to the report. For example, any formula related to dates, total amounts, and workspace name would adjust the title before the report is submitted for approval. Note that changes to Report Field values reflected in the Report Title (i.e., `{field:Customer}`) will not be reflected in the title of Open reports until submission. Between submission and approval, changes will update the title immediately. Changes will **not** retroactively update report titles for reports that have been Approved or Reimbursed.
 6. If desired, enable the Enforce Default Report Title toggle. This will prevent employees from editing the default title.  
 
 </div>

docs/articles/expensify-classic/travel/Configure-travel-policy-and-preferences.md

@@ -21,6 +21,7 @@ To create or update a travel policy,
     2. **To add a new policy:** Click **Add new** under Employee or Non-employee in the left menu. Then under the Edit members section, select the group of employees that belong to this policy.
 
 {% include info.html %}
+The Company name in Expensify Travel is the domain of the Expensify workspace billing owner
 A Legal Entity in Expensify Travel is the equivalent of an Expensify Workspace.
 {% include end-info.html %}
 

docs/articles/new-expensify/expenses-&-payments/Approve-and-pay-expenses.md

@@ -7,6 +7,7 @@ description: Approve, hold, or pay expenses submitted to you
 As a workspace admin, you can set an approval workflow for the expenses submitted to you. Expenses can be,
 
 - Instantly submitted without needing approval.
+
 - Submitted at a desired frequency (daily, weekly, monthly) and follow an approval workflow. 
 
 **Setting approval workflow and submission frequencies**

docs/articles/new-expensify/expenses-&-payments/Send-an-invoice.md

@@ -28,6 +28,8 @@ Workspace admins can enable invoicing on a workspace to send invoices and receiv
 
 {% include end-option.html %}
 
+{% include end-selector.html %}
+
 # Send an invoice
 
 {% include info.html %}
@@ -44,6 +46,7 @@ Only workspace admins can send invoices. Invoices can be sent directly from Expe
 5. Click **Send**.
 {% include end-option.html %}
 
+
 {% include option.html value="mobile" %}
 1. Tap the + icon in the bottom left menu and select **Send Invoice**.
 2. Enter the amount due and tap **Next**.

docs/articles/new-expensify/expenses-&-payments/pay-an-invoice.md

@@ -30,6 +30,8 @@ You can also view all unpaid invoices by searching for the sender’s email or p
 4. Tap **Add Bank Account** or **Add debit or credit card** to issue payment.
 {% include end-option.html %}
 
+{% include end-selector.html %}
+
 # FAQ
 
 **Can someone else pay an invoice besides the person who received it?**

docs/articles/new-expensify/travel/Configure-travel-policy-and-preferences.md

@@ -98,6 +98,7 @@ To create or update a travel policy,
     2. **To add a new policy:** Click **Add new** under Employee or Non-employee in the left menu. Then under the Edit members section, select the group of employees that belong to this policy.
 
 {% include info.html %}
+The Company name in Expensify Travel is the domain of the Expensify workspace billing owner
 A Legal Entity in Expensify Travel is the equivalent of an Expensify Workspace.
 {% include end-info.html %}