Merge branch 'main' into 25855-get-user-location

.eslintrc.js

@@ -38,6 +38,7 @@ module.exports = {
         {
             files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
             rules: {
+                'rulesdir/no-multiple-onyx-in-file': 'off',
                 'rulesdir/onyx-props-must-have-default': 'off',
                 'react-native-a11y/has-accessibility-hint': ['off'],
                 'react-native-a11y/has-valid-accessibility-descriptors': [
@@ -163,6 +164,7 @@ module.exports = {
                     },
                 ],
                 curly: 'error',
+                'you-dont-need-lodash-underscore/throttle': 'off',
             },
         },
         {

.github/workflows/e2ePerformanceTests.yml

@@ -192,7 +192,6 @@ jobs:
         run: cat "./Host_Machine_Files/\$WORKING_DIRECTORY/debug.log"
 
       - name: Check if test failed, if so post the results and add the DeployBlocker label
-        if: ${{ github.event_name == 'workflow_call' }}
         run: |
           if grep -q '🔴' ./Host_Machine_Files/\$WORKING_DIRECTORY/output.md; then
             gh pr edit ${{ inputs.PR_NUMBER }} --add-label DeployBlockerCash

README.md

@@ -51,6 +51,7 @@ For an M1 Mac, read this [SO](https://stackoverflow.com/questions/64901180/how-t
     * If you get the error `Could not find 'bundler'`, install the bundler gem first: `gem install bundler` and try again.
     * If you are using MacOS and get the error `Gem::FilePermissionError` when trying to install the bundler gem, you're likely using system Ruby, which requires administrator permission to modify. To get around this, install another version of Ruby with a version manager like [rbenv](https://github.com/rbenv/rbenv#installation).
 * Before installing iOS dependencies, you need to obtain a token from Mapbox to download their SDKs. Please run `npm run configure-mapbox` and follow the instructions.
+    * For help with MapBox token, you can see [this Slack thread](https://expensify.slack.com/archives/C01GTK53T8Q/p1692740856745279?thread_ts=1692322511.804599&cid=C01GTK53T8Q)
 * To install the iOS dependencies, run: `npm install && npm run pod-install`
 * If you are an Expensify employee and want to point the emulator to your local VM, follow [this](https://stackoverflow.com/c/expensify/questions/7699)
 * To run a on a **Development Simulator**: `npm run ios`

android/app/build.gradle

@@ -90,8 +90,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001037603
-        versionName "1.3.76-3"
+        versionCode 1001037800
+        versionName "1.3.78-0"
     }
 
     flavorDimensions "default"

android/app/src/debug/AndroidManifest.xml

@@ -4,6 +4,7 @@
 
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
+    <uses-permission android:name="android.permission.HIGH_SAMPLING_RATE_SENSORS"/>
     <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning">
         <meta-data
             android:name="firebase_performance_logcat_enabled"

android/app/src/main/AndroidManifest.xml

@@ -8,6 +8,7 @@
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-permission android:name="android.permission.HIGH_SAMPLING_RATE_SENSORS"/>
 
     <!-- android:hardwareAccelerated is essential for Android performance: https://developer.android.com/topic/performance/hardware-accel -->
     <application

contributingGuides/CONTRIBUTING.md

@@ -183,7 +183,6 @@ Additionally if you want to discuss an idea with the open source community witho
 
 #### Important note about JavaScript Style
 - Read our official [JavaScript and React style guide](https://github.com/Expensify/App/blob/main/contributingGuides/STYLE.md). Please refer to our Style Guide before asking for a review.
-- We have nothing against Prettier or any other automatic style fixers, but we generally don't use them here at Expensify. Do not use Prettier. The style changes these tools enforce don't always align with the ones we recommend and require in our eslint configs and can result in unnecessary changes for our reviewers. Ignoring this advice will ultimately make your changes take longer to review as we will ask you to undo any style changes that are not related to the important changes you are making.
 
 #### For external agencies that Expensify partners with
 Follow all the above above steps and processes. When you find a job you'd like to work on:

contributingGuides/FORMS.md

@@ -4,6 +4,20 @@ This document lists specific guidelines for using our Form component and general
 
 ## General Form UI/UX
 
+### Inputs
+Any form input needs to be wrapped in [InputWrapper](https://github.com/Expensify/App/blob/029d009731dcd3c44cd1321672b9672ef0d3d7d9/src/components/Form/InputWrapper.js) and passed as `InputComponent` property additionally it's necessary po pass an unique `inputID`. All other props of the input can be passed as `InputWrapper` props.
+```jsx
+<InputWrapper
+    // `InputWrapper` required props
+    InputComponent={TextInput}
+    inputID="uniqueTextInputID"
+    // `TextInput` specific props
+    placeholder="Text input placeholder"
+    label="Text input label"
+    shouldSaveDraft
+/>
+```
+
 ### Labels, Placeholders, & Hints
 
 Labels are required for each input and should clearly mark the field. Optional text may appear below a field when a hint, suggestion, or context feels necessary. If validation fails on such a field, its error should clearly explain why without relying on the hint. Inline errors should always replace the microcopy hints. Placeholders should not be used as it’s customary for labels to appear inside form fields and animate them above the field when focused.
@@ -13,7 +27,8 @@ Labels are required for each input and should clearly mark the field. Optional t
 Labels and hints are enabled by passing the appropriate props to each input:
 
 ```jsx
-<TextInput
+<InputWrapper
+    InputComponent={TextInput}
     label="Value"
     hint="Hint text goes here"
 />
@@ -24,7 +39,8 @@ Labels and hints are enabled by passing the appropriate props to each input:
 If a field has a character limit we should give that field a max limit. This is done by passing the maxLength prop to TextInput.
 
 ```jsx
-<TextInput
+<InputWrapper
+    InputComponent={TextInput}
     maxLength={20}
 />
 ```
@@ -42,7 +58,8 @@ We should always set people up for success on native platforms by enabling the b
 We have a couple of keyboard types [defined](https://github.com/Expensify/App/blob/572caa9e7cf32a2d64fe0e93d171bb05a1dfb217/src/CONST.js#L357-L360) and should be used like so:
 
 ```jsx
-<TextInput
+<InputWrapper
+    InputComponent={TextInput}
     keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
 />
 ```
@@ -56,7 +73,8 @@ As a best practice we should avoid asking for information we can get via other m
 Browsers use the name prop to autofill information into the input. Here's a [reference](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#recommended_input_name_and_autocomplete_attribute_values) for available values for the name prop.
 
 ```jsx
-<TextInput
+<InputWrapper
+    InputComponent={TextInput} 
     name="fname"
 />
 ```
@@ -91,7 +109,7 @@ To give a slightly more detailed example of how this would work with phone numbe
 Form inputs will NOT store draft values by default. This is to avoid accidentally storing any sensitive information like passwords, SSN or bank account information. We need to explicitly tell each form input to save draft values by passing the shouldSaveDraft prop to the input. Saving draft values is highly desirable and we should always try to save draft values. This way when a user continues a given flow they can easily pick up right where they left off if they accidentally exited a flow. Inputs with saved draft values [will be cleared when a user logs out](https://github.com/Expensify/App/blob/aa1f0f34eeba5d761657168255a1ae9aebdbd95e/src/libs/actions/SignInRedirect.js#L52) (like most data). Additionally, we should clear draft data once the form is successfully submitted by calling `Onyx.set(ONYXKEY.FORM_ID, null)` in the onSubmit callback passed to Form.
 
 ```jsx
-<TextInput
+<InputWrapper
     shouldSaveDraft
 />
 ```
@@ -178,9 +196,9 @@ Submit buttons shall not be disabled or blocked from being pressed in most cases
 
 The only time we won’t allow a user to press the submit button is when we have submitted the form and are waiting for a response (e.g. from the API). In this case we will show a loading indicator and additional taps on the submit button will have no effect. This is handled by the Form component and will also ensure that a form cannot be submitted multiple times.
 
-## Using Form.js
+## Using Form
 
-The example below shows how to use [Form.js](https://github.com/Expensify/App/blob/c5a84e5b4c0b8536eed2214298a565e5237a27ca/src/components/Form.js) in our app. You can also refer to [Form.stories.js](https://github.com/Expensify/App/blob/c5a84e5b4c0b8536eed2214298a565e5237a27ca/src/stories/Form.stories.js) for more examples.
+The example below shows how to use [FormProvider](https://github.com/Expensify/App/blob/029d009731dcd3c44cd1321672b9672ef0d3d7d9/src/components/Form/FormProvider.js) and [InputWrapper](https://github.com/Expensify/App/blob/029d009731dcd3c44cd1321672b9672ef0d3d7d9/src/components/Form/InputWrapper.js) in our app. You can also refer to [Form.stories.js](https://github.com/Expensify/App/blob/c5a84e5b4c0b8536eed2214298a565e5237a27ca/src/stories/Form.stories.js) for more examples.
 
 ```jsx
 function validate(values) {
@@ -201,43 +219,47 @@ function onSubmit(values) {
     }, 1000);
 }
 
-<Form
+<FormProvider
     formID="testForm"
     submitButtonText="Submit"
     validate={this.validate}
     onSubmit={this.onSubmit}
 >
-    // Wrapping TextInput in a View to show that Form inputs can be nested in other components
+    // Wrapping InputWrapper in a View to show that Form inputs can be nested in other components
     <View>
-        <TextInput
+        <InputWrapper
+            InputComponent={TextInput}
             label="Routing number"
             inputID="routingNumber"
             maxLength={8}
             shouldSaveDraft
         />
     </View>
-    <TextInput
+    <InputWrapper
+        InputComponent={TextInput}
         label="Account number"
         inputID="accountNumber"
         containerStyles={[styles.mt4]}
     />
-</Form>
+</FormProvider>
 ```
 
-`Form.js` also works with inputs nested in a custom component, e.g. [AddressForm](https://github.com/Expensify/App/blob/86579225ff30b21dea507347735259637a2df461/src/pages/ReimbursementAccount/AddressForm.js). The only exception is that the nested component shouldn't be wrapped around any HoC.
+`FormProvider` also works with inputs nested in a custom component, e.g. [AddressForm](https://github.com/Expensify/App/blob/86579225ff30b21dea507347735259637a2df461/src/pages/ReimbursementAccount/AddressForm.js). The only exception is that the nested component shouldn't be wrapped around any HoC and all inputs in the component needs to be wrapped with `InputWrapper`.
 
 ```jsx
 const BankAccountForm = () => (
     <>
         <View>
-            <TextInput
+            <InputWrapper
+                InputComponent={TextInput}
                 label="Routing number"
                 inputID="routingNumber"
                 maxLength={8}
                 shouldSaveDraft
             />
         </View>
-        <TextInput
+        <InputWrapper
+            InputComponent={TextInput}
             label="Account number"
             inputID="accountNumber"
             containerStyles={[styles.mt4]}
@@ -246,14 +268,14 @@ const BankAccountForm = () => (
 );
 
 // ...
-<Form
+<FormProvider
     formID="testForm"
     submitButtonText="Submit"
     validate={this.validate}
     onSubmit={this.onSubmit}
 >
     <BankAccountForm />
-</Form>
+</FormProvider>
 ```
 
 ### Props provided to Form inputs
@@ -266,7 +288,7 @@ The following prop is available to form inputs:
 - value: The value to show for the input.
 - onValueChange: A callback that is called when the input's value changes.
 
-Form.js will automatically provide the following props to any input with the inputID prop.
+InputWrapper component will automatically provide the following props to any input with the inputID prop.
 
 - ref: A React ref that must be attached to the input.
 - value: The input value.
@@ -287,13 +309,13 @@ An example of this can be seen in the [ACHContractStep](https://github.com/Expen
 
 ### Safe Area Padding
 
-Any `Form.js` that has a button will also add safe area padding by default. If the `<Form/>` is inside a `<ScreenWrapper>` we will want to disable the default safe area padding applied there e.g.
+Any `FormProvider.js` that has a button will also add safe area padding by default. If the `<FormProvider>` is inside a `<ScreenWrapper>` we will want to disable the default safe area padding applied there e.g.
 
 ```js
 <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-    <Form>
+    <FormProvider>
         {...}
-    </Form>
+    </FormProvider>
 </ScreenWrapper>
 ```
 

docs/Gemfile

@@ -34,4 +34,4 @@ gem "webrick", "~> 1.7"
 gem 'jekyll-seo-tag'
 
 gem 'jekyll-redirect-from'
-
+gem 'liquid', '~> 4.0.4'

docs/Gemfile.lock

@@ -14,7 +14,7 @@ GEM
       execjs
     coffee-script-source (1.11.1)
     colorator (1.1.0)
-    commonmarker (0.23.5)
+    commonmarker (0.23.10)
     concurrent-ruby (1.1.10)
     dnsruby (1.61.9)
       simpleidn (~> 0.1)
@@ -32,12 +32,12 @@ GEM
     ffi (1.15.5)
     forwardable-extended (2.6.0)
     gemoji (3.0.1)
-    github-pages (226)
+    github-pages (228)
       github-pages-health-check (= 1.17.9)
-      jekyll (= 3.9.2)
+      jekyll (= 3.9.3)
       jekyll-avatar (= 0.7.0)
       jekyll-coffeescript (= 1.1.1)
-      jekyll-commonmark-ghpages (= 0.2.0)
+      jekyll-commonmark-ghpages (= 0.4.0)
       jekyll-default-layout (= 0.1.4)
       jekyll-feed (= 0.15.1)
       jekyll-gist (= 1.5.0)
@@ -71,10 +71,10 @@ GEM
       jemoji (= 0.12.0)
       kramdown (= 2.3.2)
       kramdown-parser-gfm (= 1.1.0)
-      liquid (= 4.0.3)
+      liquid (= 4.0.4)
       mercenary (~> 0.3)
       minima (= 2.5.1)
-      nokogiri (>= 1.13.4, < 2.0)
+      nokogiri (>= 1.13.6, < 2.0)
       rouge (= 3.26.0)
       terminal-table (~> 1.4)
     github-pages-health-check (1.17.9)
@@ -89,11 +89,11 @@ GEM
     http_parser.rb (0.8.0)
     i18n (0.9.5)
       concurrent-ruby (~> 1.0)
-    jekyll (3.9.2)
+    jekyll (3.9.3)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
-      i18n (~> 0.7)
+      i18n (>= 0.7, < 2)
       jekyll-sass-converter (~> 1.0)
       jekyll-watch (~> 2.0)
       kramdown (>= 1.17, < 3)
@@ -109,11 +109,11 @@ GEM
       coffee-script-source (~> 1.11.1)
     jekyll-commonmark (1.4.0)
       commonmarker (~> 0.22)
-    jekyll-commonmark-ghpages (0.2.0)
-      commonmarker (~> 0.23.4)
+    jekyll-commonmark-ghpages (0.4.0)
+      commonmarker (~> 0.23.7)
       jekyll (~> 3.9.0)
       jekyll-commonmark (~> 1.4.0)
-      rouge (>= 2.0, < 4.0)
+      rouge (>= 2.0, < 5.0)
     jekyll-default-layout (0.1.4)
       jekyll (~> 3.0)
     jekyll-feed (0.15.1)
@@ -201,7 +201,7 @@ GEM
       rexml
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
-    liquid (4.0.3)
+    liquid (4.0.4)
     listen (3.7.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
@@ -211,9 +211,9 @@ GEM
       jekyll-feed (~> 0.9)
       jekyll-seo-tag (~> 2.1)
     minitest (5.16.2)
-    nokogiri (1.13.10-arm64-darwin)
+    nokogiri (1.15.4-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.13.10-x86_64-darwin)
+    nokogiri (1.15.4-x86_64-darwin)
       racc (~> 1.4)
     octokit (4.25.1)
       faraday (>= 1, < 3)
@@ -265,6 +265,7 @@ DEPENDENCIES
   jekyll-feed (~> 0.12)
   jekyll-redirect-from
   jekyll-seo-tag
+  liquid (~> 4.0.4)
   tzinfo (~> 1.2)
   tzinfo-data
   wdm (~> 0.1.1)