Merge branch 'main' of github.com:Expensify/ReactNativeChat into yuwe…

…n-LHNPrefs

android/app/build.gradle

@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001007302
-        versionName "1.0.73-2"
+        versionCode 1001007400
+        versionName "1.0.74-0"
     }
     splits {
         abi {

ios/ExpensifyCash/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.0.73</string>
+	<string>1.0.74</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.0.73.2</string>
+	<string>1.0.74.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/ExpensifyCashTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.0.73</string>
+	<string>1.0.74</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.0.73.2</string>
+	<string>1.0.74.0</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.73-2",
+  "version": "1.0.74-0",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.cash",
   "description": "Expensify.cash is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/ROUTES.js

@@ -46,6 +46,8 @@ export default {
     getReportParticipantsRoute: reportID => `r/${reportID}/participants`,
     REPORT_PARTICIPANT: 'r/:reportID/participants/:login',
     getReportParticipantRoute: (reportID, login) => `r/${reportID}/participants/${login}`,
+    REPORT_WITH_ID_DETAILS: 'r/:reportID/details',
+    getReportDetailsRoute: reportID => `r/${reportID}/details`,
     VALIDATE_LOGIN: 'v',
     VALIDATE_LOGIN_WITH_VALIDATE_CODE: 'v/:accountID/:validateCode',
     ENABLE_PAYMENTS: 'enable-payments',

src/components/FullNameInputRow.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import {TextInput, View} from 'react-native';
 import _ from 'underscore';

src/components/MenuItem.js

@@ -51,6 +51,9 @@ const propTypes = {
 
     /** Should we disable this menu item? */
     disabled: PropTypes.bool,
+
+    /** A right-aligned subtitle for this menu option */
+    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
 const defaultProps = {
@@ -66,6 +69,7 @@ const defaultProps = {
     iconFill: undefined,
     focused: false,
     disabled: false,
+    subtitle: undefined,
 };
 
 const MenuItem = ({
@@ -83,6 +87,7 @@ const MenuItem = ({
     iconFill,
     focused,
     disabled,
+    subtitle,
 }) => (
     <Pressable
         onPress={(e) => {
@@ -129,14 +134,26 @@ const MenuItem = ({
                         )}
                     </View>
                 </View>
-                {shouldShowRightIcon && (
-                    <View style={styles.createMenuIcon}>
-                        <Icon
-                            src={iconRight}
-                            fill={getIconFillColor(getButtonState(focused || hovered, pressed, success, disabled))}
-                        />
-                    </View>
-                )}
+                <View style={[styles.flexRow, styles.menuItemTextContainer]}>
+                    {subtitle && (
+                        <View style={[styles.justifyContentCenter, styles.mr1]}>
+                            <Text
+                                style={styles.createMenuDescription}
+                            >
+                                {subtitle}
+                            </Text>
+                        </View>
+                    )}
+                    {shouldShowRightIcon && (
+                        <View style={styles.createMenuIcon}>
+                            <Icon
+                                src={iconRight}
+                                fill={getIconFillColor(getButtonState(focused || hovered, pressed, success, disabled))}
+                            />
+                        </View>
+                    )}
+                </View>
+
             </>
         )}
     </Pressable>

src/components/TextInputFocusable/index.js

@@ -5,6 +5,7 @@ import _ from 'underscore';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import Growl from '../../libs/Growl';
 import themeColors from '../../styles/themes/default';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** Maximum number of lines in the text input */
@@ -32,13 +33,16 @@ const propTypes = {
     /** When the input has cleared whoever owns this input should know about it */
     onClear: PropTypes.func,
 
-    /** Callback to fire when a file has been dragged into the text input */
+    /** Callback to fire when a file has being dragged over the text input & report body */
+    onDragOver: PropTypes.func,
+
+    /** Callback to fire when a file has been dragged into the text input & report body */
     onDragEnter: PropTypes.func,
 
-    /** Callback to fire when the user is no longer dragging over the text input */
+    /** Callback to fire when the user is no longer dragging over the text input & report body */
     onDragLeave: PropTypes.func,
 
-    /** Callback to fire when a file is dropped on the text input */
+    /** Callback to fire when a file is dropped on the text input & report body */
     onDrop: PropTypes.func,
 
     /** Whether or not this TextInput is disabled. */
@@ -69,12 +73,13 @@ const defaultProps = {
     onClear: () => {},
     style: null,
     onDragEnter: () => {},
+    onDragOver: () => {},
     onDragLeave: () => {},
     onDrop: () => {},
     isDisabled: false,
     autoFocus: false,
     forwardedRef: null,
-    onSelectionChange: () => { },
+    onSelectionChange: () => {},
     selection: {
         start: 0,
         end: 0,
@@ -114,6 +119,7 @@ class TextInputFocusable extends React.Component {
             end: initialValue.length,
         };
         this.saveSelection = this.saveSelection.bind(this);
+        this.dragNDropListener = this.dragNDropListener.bind(this);
     }
 
     componentDidMount() {
@@ -131,10 +137,11 @@ class TextInputFocusable extends React.Component {
         // listeners here and unbind when the component unmounts
         if (this.textInput) {
             // Firefox will not allow dropping unless we call preventDefault on the dragover event
-            this.textInput.addEventListener('dragover', e => e.preventDefault());
-            this.textInput.addEventListener('dragenter', this.props.onDragEnter);
-            this.textInput.addEventListener('dragleave', this.props.onDragLeave);
-            this.textInput.addEventListener('drop', this.props.onDrop);
+            // We listen on document to extend the Drop area beyond Composer
+            document.addEventListener('dragover', this.dragNDropListener);
+            document.addEventListener('dragenter', this.dragNDropListener);
+            document.addEventListener('dragleave', this.dragNDropListener);
+            document.addEventListener('drop', this.dragNDropListener);
             this.textInput.addEventListener('paste', this.checkForAttachment.bind(this));
         }
     }
@@ -158,10 +165,10 @@ class TextInputFocusable extends React.Component {
 
     componentWillUnmount() {
         if (this.textInput) {
-            this.textInput.addEventListener('dragover', e => e.preventDefault());
-            this.textInput.removeEventListener('dragenter', this.props.onDragEnter);
-            this.textInput.removeEventListener('dragleave', this.props.onDragLeave);
-            this.textInput.removeEventListener('drop', this.props.onDrop);
+            document.removeEventListener('dragover', this.dragNDropListener);
+            document.removeEventListener('dragenter', this.dragNDropListener);
+            document.removeEventListener('dragleave', this.dragNDropListener);
+            document.removeEventListener('drop', this.dragNDropListener);
             this.textInput.removeEventListener('paste', this.checkForAttachment.bind(this));
         }
     }
@@ -182,6 +189,46 @@ class TextInputFocusable extends React.Component {
         return newNumberOfLines;
     }
 
+    /**
+     * Handles all types of drag-N-drop events on the composer
+     *
+     * @param {Object} e native Event
+     * @memberof TextInputFocusable
+     */
+    dragNDropListener(e) {
+        let isOriginComposer = false;
+        const handler = () => {
+            switch (e.type) {
+                case 'dragover':
+                    e.preventDefault();
+                    this.props.onDragOver(e, isOriginComposer);
+                    break;
+                case 'dragenter':
+                    e.dataTransfer.dropEffect = 'copy';
+                    this.props.onDragEnter(e, isOriginComposer);
+                    break;
+                case 'dragleave':
+                    this.props.onDragLeave(e, isOriginComposer);
+                    break;
+                case 'drop':
+                    this.props.onDrop(e, isOriginComposer);
+                    break;
+                default: break;
+            }
+        };
+
+        // We first check if drop target is composer so that it can be highlighted
+        if (this.textInput.contains(e.target)) {
+            isOriginComposer = true;
+            handler();
+            return;
+        }
+
+        if (document.getElementById(CONST.REPORT.DROP_NATIVE_ID).contains(e.target)) {
+            handler();
+        }
+    }
+
     /**
      * Keeps track of user cursor position on the Composer
      *

src/languages/en.js

@@ -40,7 +40,7 @@ export default {
         invite: 'Invite',
         here: 'here',
         dob: 'Date of Birth',
-        ssn: 'Social Security Number',
+        ssnLast4: 'Last 4 Digits of SSN',
         addressNoPO: 'Address (no P.O. boxes)',
         companyAddressNoPO: 'Company Address (no P.O. boxes)',
         city: 'City',
@@ -52,6 +52,7 @@ export default {
         passwordCannotBeBlank: 'Password cannot be blank',
         dateFormat: 'YYYY-MM-DD',
         send: 'Send',
+        notifications: 'Notifications',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Camera Permission Required',
@@ -146,6 +147,13 @@ export default {
         split: ({amount}) => `Split ${amount}`,
         choosePaymentMethod: 'Choose payment method:',
     },
+    reportDetailsPage: {
+        notificationPreferencesDescription: 'How often should we notify you when there are new messages to catch up on in this room?',
+        always: 'Always',
+        daily: 'Daily',
+        mute: 'Mute',
+        members: 'Members',
+    },
     loginField: {
         addYourPhoneToSettleViaVenmo: 'Add your phone number to settle up via Venmo.',
         numberHasNotBeenValidated: 'The number has not yet been validated. Click the button to resend the validation link via text.',
@@ -225,7 +233,6 @@ export default {
         mostRecentModeDescription: 'This will display all chats by default, sorted by most recent, with pinned items at the top',
         focus: '#focus',
         focusModeDescription: '#focus – This will only display unread and pinned chats, all sorted alphabetically.',
-        notifications: 'Notifications',
         receiveRelevantFeatureUpdatesAndExpensifyNews: 'Receive relevant feature updates and Expensify news',
         priorityMode: 'Priority Mode',
         language: 'Language',
@@ -382,7 +389,6 @@ export default {
         isMyDataSafe: 'Is my data safe?',
         onFidoConditions: 'By continuing with the request to add this bank account, you confirm that you have read, understand and accept ',
         onFidoFacialScan: 'Onfido’s Facial Scan Policy and Release',
-        ssnLast4: 'Last 4 Digits of SSN',
         isControllingOfficer: 'I am authorized to use my company bank account for business spend',
         isControllingOfficerError: 'You must be a controlling officer with authorization to operate the business bank account.',
     },

src/languages/es.js

@@ -36,7 +36,7 @@ export default {
         invite: 'Invitación',
         here: 'aquí',
         dob: 'Fecha de Nacimiento',
-        ssn: 'Número de Seguridad Social',
+        ssnLast4: 'Últimos 4 dígitos de su SSN',
         addressNoPO: 'Dirección (sin Apartado Postal)',
         companyAddressNoPO: 'Dirección de la Empresa (sin Apartado Postal)',
         city: 'Ciudad',
@@ -48,6 +48,7 @@ export default {
         passwordCannotBeBlank: 'La contraseña no puede estar vacía',
         dateFormat: 'AAAA-MM-DD',
         send: 'Enviar',
+        notifications: 'Notificaciones',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Se necesita permiso para usar la cámara',
@@ -141,6 +142,13 @@ export default {
         split: ({amount}) => `Dividir ${amount}`,
         choosePaymentMethod: 'Elige el método de pago:',
     },
+    reportDetailsPage: {
+        notificationPreferencesDescription: 'Cada cuanto tiempo quieres que te avisemos que hay nuevos mensajes en este canal?',
+        always: 'Siempre',
+        daily: 'Cada día',
+        mute: 'Nunca',
+        members: 'Miembros',
+    },
     loginField: {
         addYourPhoneToSettleViaVenmo: 'Agrega tu número de teléfono para pagar usando Venmo.',
         numberHasNotBeenValidated: 'El número no está validado todavía. Haz click en el botón para reenviar el enlace de confirmación via SMS.',
@@ -221,7 +229,6 @@ export default {
         mostRecentModeDescription: 'Esta opción muestra por defecto todos los chats, ordenados a partir del más reciente, con los chats destacados arriba de todo',
         focus: '#concentración',
         focusModeDescription: '#concentración – Muestra sólo los chats no leídos y destacados ordenados alfabéticamente.',
-        notifications: 'Notificaciones',
         receiveRelevantFeatureUpdatesAndExpensifyNews: 'Recibir noticias sobre Expensify y actualizaciones del producto',
         priorityMode: 'Modo Prioridad',
         language: 'Idioma',
@@ -407,7 +414,6 @@ export default {
         isMyDataSafe: '¿Están seguros mis datos?',
         onFidoConditions: 'Al continuar con la solicitud de añadir esta cuenta bancaria, confirma que ha leído, entiende y acepta ',
         facialScan: 'la política de reconocimiento facial y la exención de Onfido',
-        ssnLast4: 'Últimos 4 dígitos de su SSN',
         isControllingOfficer: 'Estoy autorizado a utilizar la cuenta bancaria de mi compañía para gastos de empresa',
         isControllingOfficerError: 'Debe ser un oficial controlador con autorización para operar la cuenta bancaria de la compañía',
     },