merge mmain

android/app/build.gradle

@@ -90,8 +90,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001039505
-        versionName "1.3.95-5"
+        versionCode 1001039506
+        versionName "1.3.95-6"
     }
 
     flavorDimensions "default"

contributingGuides/CONTRIBUTING.md

@@ -148,7 +148,7 @@ Additionally if you want to discuss an idea with the open source community witho
 - If you have made a change to your pull request and are ready for another review, leave a comment that says "Updated" on the pull request  itself.
 - Please keep the conversation in GitHub, and do not ping individual reviewers in Slack or Upwork to get their attention.
 - Pull Request reviews can sometimes take a few days. If your pull request has not been addressed after four days please let us know via the #expensify-open-source Slack channel.
-- On occasion, our engineers will need to focus on a feature release and choose to place a hold on the review of your PR. Depending on the hold length, our team will decide if a bonus will be applied to the job.    
+- On occasion, our engineers will need to focus on a feature release and choose to place a hold on the review of your PR. 
 
 #### 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.

docs/articles/expensify-classic/bank-accounts-and-credit-cards/Personal-Cards.md

@@ -0,0 +1,5 @@
+---
+title: Personal Cards
+description: Connect your credit card directly to Expensify to easily track your personal finances.
+---
+## Resource Coming Soon!

docs/articles/expensify-classic/workspace-and-domain-settings/Reimbursement.md

@@ -1,5 +1,47 @@
 ---
-title: Coming Soon
-description: Coming Soon
+title: Reimbursement 
+description: Enable reimbursement and reimburse expense reports 
 ---
-## Resource Coming Soon!
+<!-- The lines above are required by Jekyll to process the .md file -->
+
+# Overview 
+Reimbursement in Expensify is quick, easy, and completely free. Let Expensify do the tedious work for you by taking advantage of features to automate employee reimbursement. 
+
+# How to Enable Reimbursement
+There are several options for reimbursing employees in Expensify. The options available will depend on which country your business bank account is domiciled in. 
+
+## Direct Reimbursement 
+
+Direct reimbursement is available to companies who have a verified US bank account and are reimbursing employees within the US. To use direct reimbursement, you must have a US business bank account verified in Expensify.
+
+A Workspace admin can enable direct reimbursement via **Settings > Workspaces > Workspace Name > Reimbursement > Direct**. 
+
+**Additional features under Reimbursement > Direct:**
+ - Select a **default reimburser** for the Workspace from the dropdown menu. The default reimburser is the person who will receive notifications to reimburse reports in Expensify. You’ll be able to choose among all Workspace Admins who have access to the business bank account. 
+ - Set a **default withdrawal account** for the Workspace. This will set a default bank account that report reimbursements are withdrawn from.
+ - Set a **manual reimbursement threshold** to automate reimbursement. Reports whose total falls under the manual reimbursement threshhold will be reimbursed automatocally upon final approval; reports whose total falls above the threshhold will need to be reimbursed manually by the default reimburser. 
+
+Expensify also offers direct global reimbursement to some companies with verified bank accounts in USD, GBP, EUR and AUD who are reimbursing employees internationally. For more information about Global Reimbursement, see LINK
+
+## Indirect Reimbursement 
+
+Indirect reimbursement is available to all companies in Expensify and no bank account is required. Indirect reimbursement indicates that the report will be reimbursed outside of Expensify. 
+
+A Workspace admin can enanble indirect reimbursement via **Settings > Workspaces > Workspace Name > Reimbursement > Indirect**. 
+
+**Additional features under Reimbursement > Indirect:**
+If you reimburse through a seperate system or through payroll, Expensify can collect and export employee bank account details for you.  Just reach out to your Account Manager or [email protected] for us to add the Reimbursement Details Export format to the account. 
+
+# FAQ
+
+## How do I export employee bank account details once the Reimbursement Details Export format is added to my account? 
+
+Employee bank account details can be exported from the Reports page by selecting the relevant Approved reports and then clicking **Export to > Reimbursement Details Export**.
+
+## Is it possible to change the name of a verified business bank account in Expensify? 
+
+Bank account names can be updated via **Settings > Accounts > Payments** and clicking the pencil icon next to the bank account name. 
+
+## What is the benefit of setting a default reimburser?
+
+The main benefit of being defined as the "reimburser" in the Workspace settings is that this user will receive notifications on their Home page alerting them when reports need to be reimbursed. 

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.95.5</string>
+	<string>1.3.95.6</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.3.95.5</string>
+	<string>1.3.95.6</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.95-5",
+  "version": "1.3.95-6",
   "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/components/Form/FormWrapper.js

@@ -56,6 +56,9 @@ const propTypes = {
     /** Container styles */
     style: stylePropTypes,
 
+    /** Submit button styles */
+    submitButtonStyles: stylePropTypes,
+
     /** Custom content to display in the footer after submit button */
     footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 
@@ -74,10 +77,25 @@ const defaultProps = {
     scrollContextEnabled: false,
     footerContent: null,
     style: [],
+    submitButtonStyles: [],
 };
 
 function FormWrapper(props) {
-    const {onSubmit, children, formState, errors, inputRefs, submitButtonText, footerContent, isSubmitButtonVisible, style, enabledWhenOffline, isSubmitActionDangerous, formID} = props;
+    const {
+        onSubmit,
+        children,
+        formState,
+        errors,
+        inputRefs,
+        submitButtonText,
+        footerContent,
+        isSubmitButtonVisible,
+        style,
+        submitButtonStyles,
+        enabledWhenOffline,
+        isSubmitActionDangerous,
+        formID,
+    } = props;
     const formRef = useRef(null);
     const formContentRef = useRef(null);
     const errorMessage = useMemo(() => {
@@ -129,7 +147,7 @@ function FormWrapper(props) {
                                 focusInput.focus();
                             }
                         }}
-                        containerStyles={[styles.mh0, styles.mt5, styles.flex1]}
+                        containerStyles={[styles.mh0, styles.mt5, styles.flex1, ...submitButtonStyles]}
                         enabledWhenOffline={enabledWhenOffline}
                         isSubmitActionDangerous={isSubmitActionDangerous}
                         disablePressOnEnter
@@ -151,6 +169,7 @@ function FormWrapper(props) {
             isSubmitButtonVisible,
             onSubmit,
             style,
+            submitButtonStyles,
             submitButtonText,
         ],
     );

src/components/ScreenWrapper/index.js

@@ -118,7 +118,7 @@ function ScreenWrapper({
 
                 return (
                     <View
-                        style={styles.flex1}
+                        style={[styles.flex1, {minHeight}]}
                         // eslint-disable-next-line react/jsx-props-no-spreading
                         {...(isDevelopment ? panResponder.panHandlers : {})}
                         testID={testID}
@@ -129,7 +129,7 @@ function ScreenWrapper({
                             {...keyboardDissmissPanResponder.panHandlers}
                         >
                             <KeyboardAvoidingView
-                                style={[styles.w100, styles.h100, {maxHeight, minHeight}]}
+                                style={[styles.w100, styles.h100, {maxHeight}]}
                                 behavior={keyboardAvoidingViewBehavior}
                                 enabled={shouldEnableKeyboardAvoidingView}
                             >

src/hooks/useInitialWindowDimensions/index.js

@@ -1,7 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import {useEffect, useState} from 'react';
 import {Dimensions} from 'react-native';
-import {initialWindowMetrics} from 'react-native-safe-area-context';
 
 /**
  * A convenience hook that provides initial size (width and height).
@@ -50,10 +49,8 @@ export default function () {
         };
     }, []);
 
-    const bottomInset = initialWindowMetrics && initialWindowMetrics.insets && initialWindowMetrics.insets.bottom ? initialWindowMetrics.insets.bottom : 0;
-
     return {
         initialWidth: dimensions.initialWidth,
-        initialHeight: dimensions.initialHeight - bottomInset,
+        initialHeight: dimensions.initialHeight,
     };
 }

src/pages/EditRequestAmountPage.js

@@ -43,7 +43,7 @@ function EditRequestAmountPage({defaultAmount, defaultCurrency, onNavigateToCurr
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            shouldEnableMaxHeight
+            shouldEnableKeyboardAvoidingView={false}
             shouldEnableMinHeight={DeviceCapabilities.canUseTouchScreen()}
             testID={EditRequestAmountPage.displayName}
         >

src/pages/TeachersUnite/KnowATeacherPage.js

@@ -5,7 +5,8 @@ import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
@@ -99,7 +100,7 @@ function KnowATeacherPage(props) {
                 title={translate('teachersUnitePage.iKnowATeacher')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.TEACHERS_UNITE)}
             />
-            <Form
+            <FormProvider
                 enabledWhenOffline
                 style={[styles.flexGrow1, styles.ph5]}
                 formID={ONYXKEYS.FORMS.I_KNOW_A_TEACHER_FORM}
@@ -109,7 +110,8 @@ function KnowATeacherPage(props) {
             >
                 <Text style={[styles.mb6]}>{translate('teachersUnitePage.getInTouch')}</Text>
                 <View>
-                    <TextInput
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID="firstName"
                         name="fname"
                         label={translate('common.firstName')}
@@ -120,7 +122,8 @@ function KnowATeacherPage(props) {
                     />
                 </View>
                 <View style={styles.mv4}>
-                    <TextInput
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID="lastName"
                         name="lname"
                         label={translate('common.lastName')}
@@ -131,7 +134,8 @@ function KnowATeacherPage(props) {
                     />
                 </View>
                 <View>
-                    <TextInput
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID="partnerUserID"
                         name="partnerUserID"
                         label={`${translate('common.email')}/${translate('common.phoneNumber')}`}
@@ -141,7 +145,7 @@ function KnowATeacherPage(props) {
                         autoCapitalize="none"
                     />
                 </View>
-            </Form>
+            </FormProvider>
         </ScreenWrapper>
     );
 }

src/pages/home/report/ReportActionItem.js

@@ -58,6 +58,7 @@ import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground';
 import * as ContextMenuActions from './ContextMenu/ContextMenuActions';
 import MiniReportActionContextMenu from './ContextMenu/MiniReportActionContextMenu';
 import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
@@ -576,23 +577,31 @@ function ReportActionItem(props) {
             if (ReportUtils.isCanceledTaskReport(props.report, parentReportAction)) {
                 content = (
                     <>
-                        <ReportActionItemSingle
-                            action={parentReportAction}
-                            showHeader={!props.draftMessage}
-                            wrapperStyles={[styles.chatItem]}
-                            report={props.report}
-                        >
-                            <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />
-                        </ReportActionItemSingle>
-                        <View style={styles.reportHorizontalRule} />
+                        <AnimatedEmptyStateBackground />
+                        <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
+                            <ReportActionItemSingle
+                                action={parentReportAction}
+                                showHeader={!props.draftMessage}
+                                wrapperStyles={[styles.chatItem]}
+                                report={props.report}
+                            >
+                                <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />
+                            </ReportActionItemSingle>
+                            <View style={styles.reportHorizontalRule} />
+                        </View>
                     </>
                 );
             } else {
                 content = (
-                    <TaskView
-                        report={props.report}
-                        shouldShowHorizontalRule={!props.shouldHideThreadDividerLine}
-                    />
+                    <>
+                        <AnimatedEmptyStateBackground />
+                        <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
+                            <TaskView
+                                report={props.report}
+                                shouldShowHorizontalRule={!props.shouldHideThreadDividerLine}
+                            />
+                        </View>
+                    </>
                 );
             }
         }

src/pages/workspace/WorkspaceSettingsPage.js

@@ -6,7 +6,8 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import Avatar from '@components/Avatar';
 import AvatarWithImagePicker from '@components/AvatarWithImagePicker';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -98,7 +99,7 @@ function WorkspaceSettingsPage({policy, currencyList, windowWidth, route}) {
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_SETTINGS}
         >
             {(hasVBA) => (
-                <Form
+                <FormProvider
                     formID={ONYXKEYS.FORMS.WORKSPACE_SETTINGS_FORM}
                     submitButtonText={translate('workspace.editor.save')}
                     style={[styles.flexGrow1, styles.ph5]}
@@ -139,14 +140,15 @@ function WorkspaceSettingsPage({policy, currencyList, windowWidth, route}) {
                         originalFileName={policy.originalFileName}
                     />
                     <OfflineWithFeedback pendingAction={lodashGet(policy, 'pendingFields.generalSettings')}>
-                        <TextInput
+                        <InputWrapper
+                            InputComponent={TextInput}
                             accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                             inputID="name"
                             label={translate('workspace.editor.nameInputLabel')}
                             accessibilityLabel={translate('workspace.editor.nameInputLabel')}
-                            containerStyles={[styles.mt4]}
                             defaultValue={policy.name}
                             maxLength={CONST.WORKSPACE_NAME_CHARACTER_LIMIT}
+                            containerStyles={[styles.mt4]}
                             spellCheck={false}
                         />
                         <View style={[styles.mt4, styles.mhn5]}>
@@ -162,7 +164,7 @@ function WorkspaceSettingsPage({policy, currencyList, windowWidth, route}) {
                             </Text>
                         </View>
                     </OfflineWithFeedback>
-                </Form>
+                </FormProvider>
             )}
         </WorkspacePageWithSections>
     );