Merge branch 'main' into expo-image

Expensify · Nov 17, 2023 · 7d845b6 · 7d845b6
2 parents b8dc114 + ead926e
commit 7d845b6
Show file tree

Hide file tree

Showing 17 changed files with 231 additions and 80 deletions.
diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
@@ -7,6 +7,7 @@ import variables from '@styles/variables';
 import Checkbox from './Checkbox';
 import FormHelpMessage from './FormHelpMessage';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
+import refPropTypes from './refPropTypes';
 import Text from './Text';
 
 /**
@@ -54,7 +55,7 @@ const propTypes = {
     defaultValue: PropTypes.bool,
 
     /** React ref being forwarded to the Checkbox input */
-    forwardedRef: PropTypes.func,
+    forwardedRef: refPropTypes,
 
     /** The ID used to uniquely identify the input in a Form */
     /* eslint-disable-next-line react/no-unused-prop-types */

diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js
@@ -135,6 +135,9 @@ const EmojiPicker = forwardRef((props, ref) => {
             });
         });
         return () => {
+            if (!emojiPopoverDimensionListener) {
+                return;
+            }
             emojiPopoverDimensionListener.remove();
         };
     }, [isEmojiPickerVisible, isSmallScreenWidth, emojiPopoverAnchorOrigin]);

diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js
@@ -317,7 +317,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                 errors={errors}
                 enabledWhenOffline={enabledWhenOffline}
             >
-                {children}
+                {_.isFunction(children) ? children({inputValues}) : children}
             </FormWrapper>
         </FormContext.Provider>
     );

diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
@@ -96,6 +96,15 @@ function isReimbursementQueuedAction(reportAction: OnyxEntry<ReportAction>) {
     return reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENTQUEUED;
 }
 
+function isChannelLogMemberAction(reportAction: OnyxEntry<ReportAction>) {
+    return (
+        reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM ||
+        reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.REMOVE_FROM_ROOM ||
+        reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM ||
+        reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.REMOVE_FROM_ROOM
+    );
+}
+
 /**
  * Returns whether the comment is a thread parent message/the first message in a thread
  */
@@ -657,4 +666,5 @@ export {
     shouldReportActionBeVisible,
     shouldReportActionBeVisibleAsLastAction,
     getFirstVisibleReportActionID,
+    isChannelLogMemberAction,
 };
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
@@ -15,6 +15,7 @@ import * as IOU from './actions/IOU';
 import * as CurrencyUtils from './CurrencyUtils';
 import DateUtils from './DateUtils';
 import isReportMessageAttachment from './isReportMessageAttachment';
+import * as LocalePhoneNumber from './LocalePhoneNumber';
 import * as Localize from './Localize';
 import linkingConfig from './Navigation/linkingConfig';
 import Navigation from './Navigation/Navigation';
@@ -4165,6 +4166,48 @@ function getIOUReportActionDisplayMessage(reportAction) {
     });
 }
 
+/**
+ * Return room channel log display message
+ *
+ * @param {Object} reportAction
+ * @returns {String}
+ */
+function getChannelLogMemberMessage(reportAction) {
+    const verb =
+        reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM || reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM
+            ? 'invited'
+            : 'removed';
+
+    const mentions = _.map(reportAction.originalMessage.targetAccountIDs, (accountID) => {
+        const personalDetail = lodashGet(allPersonalDetails, accountID);
+        const displayNameOrLogin =
+            LocalePhoneNumber.formatPhoneNumber(lodashGet(personalDetail, 'login', '')) || lodashGet(personalDetail, 'displayName', '') || Localize.translateLocal('common.hidden');
+        return `@${displayNameOrLogin}`;
+    });
+
+    const lastMention = mentions.pop();
+    let message = '';
+
+    if (mentions.length === 0) {
+        message = `${verb} ${lastMention}`;
+    } else if (mentions.length === 1) {
+        message = `${verb} ${mentions[0]} and ${lastMention}`;
+    } else {
+        message = `${verb} ${mentions.join(', ')}, and ${lastMention}`;
+    }
+
+    const roomName = lodashGet(reportAction, 'originalMessage.roomName', '');
+    if (roomName) {
+        const preposition =
+            reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM || reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM
+                ? ' to'
+                : ' from';
+        message += `${preposition} ${roomName}`;
+    }
+
+    return message;
+}
+
 /**
  * Checks if a report is a group chat.
  *
@@ -4388,6 +4431,7 @@ export {
     parseReportRouteParams,
     getReimbursementQueuedActionMessage,
     getPersonalDetailsForAccountID,
+    getChannelLogMemberMessage,
     getRoom,
     shouldDisableWelcomeMessage,
 };
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
@@ -3,7 +3,7 @@ import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Str from 'expensify-common/lib/str';
 import lodashDebounce from 'lodash/debounce';
 import lodashGet from 'lodash/get';
-import {InteractionManager} from 'react-native';
+import {DeviceEventEmitter, InteractionManager} from 'react-native';
 import Onyx from 'react-native-onyx';
 import _ from 'underscore';
 import * as ActiveClientManager from '@libs/ActiveClientManager';
@@ -937,6 +937,7 @@ function markCommentAsUnread(reportID, reportActionCreated) {
             ],
         },
     );
+    DeviceEventEmitter.emit(`unreadAction_${reportID}`, lastReadTime);
 }
 
 /**

diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -5,9 +5,10 @@ import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import DatePicker from '@components/DatePicker';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import NewDatePicker from '@components/NewDatePicker';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
@@ -178,15 +179,16 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
                         {translate('additionalDetailsStep.helpLink')}
                     </TextLink>
                 </View>
-                <Form
+                <FormProvider
                     formID={ONYXKEYS.WALLET_ADDITIONAL_DETAILS}
                     validate={validate}
                     onSubmit={activateWallet}
                     scrollContextEnabled
                     submitButtonText={translate('common.saveAndContinue')}
                     style={[styles.mh5, styles.flexGrow1]}
                 >
-                    <TextInput
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID="legalFirstName"
                         containerStyles={[styles.mt4]}
                         label={translate(fieldNameTranslationKeys.legalFirstName)}
@@ -195,7 +197,8 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
                         defaultValue={PersonalDetails.extractFirstAndLastNameFromAvailableDetails(currentUserPersonalDetails).firstName}
                         shouldSaveDraft
                     />
-                    <TextInput
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID="legalLastName"
                         containerStyles={[styles.mt4]}
                         label={translate(fieldNameTranslationKeys.legalLastName)}
@@ -215,7 +218,8 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
                         streetTranslationKey={fieldNameTranslationKeys.addressStreet}
                         shouldSaveDraft
                     />
-                    <TextInput
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID="phoneNumber"
                         containerStyles={[styles.mt4]}
                         inputMode={CONST.INPUT_MODE.TEL}
@@ -226,7 +230,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
                         placeholder={translate('common.phoneNumberPlaceholder')}
                         shouldSaveDraft
                     />
-                    <DatePicker
+                    <NewDatePicker
                         inputID="dob"
                         containerStyles={[styles.mt4]}
                         label={translate(fieldNameTranslationKeys.dob)}
@@ -235,7 +239,8 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
                         maxDate={maxDate}
                         shouldSaveDraft
                     />
-                    <TextInput
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID="ssn"
                         containerStyles={[styles.mt4]}
                         label={translate(fieldNameTranslationKeys[shouldAskForFullSSN ? 'ssnFull9' : 'ssn'])}
@@ -244,7 +249,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
                         maxLength={shouldAskForFullSSN ? 9 : 4}
                         inputMode={CONST.INPUT_MODE.NUMERIC}
                     />
-                </Form>
+                </FormProvider>
             </View>
         </>
     );

diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js
@@ -5,7 +5,8 @@ import React, {useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
-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';
@@ -157,7 +158,7 @@ function ACHContractStep(props) {
                 shouldShowGetAssistanceButton
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
             />
-            <Form
+            <FormProvider
                 formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
                 validate={validate}
                 onSubmit={submit}
@@ -169,7 +170,8 @@ function ACHContractStep(props) {
                         <Text style={[styles.mb5]}>
                             <Text>{props.translate('beneficialOwnersStep.checkAllThatApply')}</Text>
                         </Text>
-                        <CheckboxWithLabel
+                        <InputWrapper
+                            InputComponent={CheckboxWithLabel}
                             accessibilityLabel={props.translate('beneficialOwnersStep.iOwnMoreThan25Percent')}
                             inputID="ownsMoreThan25Percent"
                             style={[styles.mb2]}
@@ -190,7 +192,8 @@ function ACHContractStep(props) {
                             defaultValue={props.getDefaultStateForField('ownsMoreThan25Percent', false)}
                             shouldSaveDraft
                         />
-                        <CheckboxWithLabel
+                        <InputWrapper
+                            InputComponent={CheckboxWithLabel}
                             accessibilityLabel={props.translate('beneficialOwnersStep.someoneOwnsMoreThan25Percent')}
                             inputID="hasOtherBeneficialOwners"
                             style={[styles.mb2]}
@@ -256,7 +259,8 @@ function ACHContractStep(props) {
                             </View>
                         )}
                         <Text style={[styles.mv5]}>{props.translate('beneficialOwnersStep.agreement')}</Text>
-                        <CheckboxWithLabel
+                        <InputWrapper
+                            InputComponent={CheckboxWithLabel}
                             accessibilityLabel={`${props.translate('common.iAcceptThe')} ${props.translate('beneficialOwnersStep.termsAndConditions')}`}
                             inputID="acceptTermsAndConditions"
                             style={[styles.mt4]}
@@ -269,7 +273,8 @@ function ACHContractStep(props) {
                             defaultValue={props.getDefaultStateForField('acceptTermsAndConditions', false)}
                             shouldSaveDraft
                         />
-                        <CheckboxWithLabel
+                        <InputWrapper
+                            InputComponent={CheckboxWithLabel}
                             accessibilityLabel={props.translate('beneficialOwnersStep.certifyTrueAndAccurate')}
                             inputID="certifyTrueInformation"
                             style={[styles.mt4]}
@@ -279,7 +284,7 @@ function ACHContractStep(props) {
                         />
                     </>
                 )}
-            </Form>
+            </FormProvider>
         </ScreenWrapper>
     );
 }

diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import AddressSearch from '@components/AddressSearch';
+import InputWrapper from '@components/Form/InputWrapper';
 import StatePicker from '@components/StatePicker';
 import TextInput from '@components/TextInput';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -96,7 +97,8 @@ function AddressForm(props) {
     return (
         <>
             <View>
-                <AddressSearch
+                <InputWrapper
+                    InputComponent={AddressSearch}
                     inputID={props.inputKeys.street}
                     shouldSaveDraft={props.shouldSaveDraft}
                     label={props.translate(props.streetTranslationKey)}
@@ -111,7 +113,8 @@ function AddressForm(props) {
                     isLimitedToUSA
                 />
             </View>
-            <TextInput
+            <InputWrapper
+                InputComponent={TextInput}
                 inputID={props.inputKeys.city}
                 shouldSaveDraft={props.shouldSaveDraft}
                 label={props.translate('common.city')}
@@ -125,7 +128,8 @@ function AddressForm(props) {
             />
 
             <View style={[styles.mt4, styles.mhn5]}>
-                <StatePicker
+                <InputWrapper
+                    InputComponent={StatePicker}
                     inputID={props.inputKeys.state}
                     shouldSaveDraft={props.shouldSaveDraft}
                     value={props.values.state}
@@ -134,7 +138,8 @@ function AddressForm(props) {
                     errorText={props.errors.state ? props.translate('bankAccount.error.addressState') : ''}
                 />
             </View>
-            <TextInput
+            <InputWrapper
+                InputComponent={TextInput}
                 inputID={props.inputKeys.zipCode}
                 shouldSaveDraft={props.shouldSaveDraft}
                 label={props.translate('common.zip')}