Merge branch 'main' into update-staging-from-main

android/app/build.gradle

@@ -155,8 +155,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001019701
-        versionName "1.1.97-1"
+        versionCode 1001019702
+        versionName "1.1.97-2"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {

ios/NewExpensify/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.97.1</string>
+	<string>1.1.97.2</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.1.97.1</string>
+	<string>1.1.97.2</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.1.97-1",
+  "version": "1.1.97-2",
   "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/CONST.js

@@ -808,6 +808,14 @@ const CONST = {
     // When generating a random value to fit in 7 digits (for the `middle` or `right` parts above), this is the maximum value to multiply by Math.random().
     MAX_INT_FOR_RANDOM_7_DIGIT_VALUE: 10000000,
     IOS_KEYBOARD_SPACE_OFFSET: -30,
+
+    PDF_PASSWORD_FORM: {
+        // Constants for password-related error responses received from react-pdf.
+        REACT_PDF_PASSWORD_RESPONSES: {
+            NEED_PASSWORD: 1,
+            INCORRECT_PASSWORD: 2,
+        },
+    },
 };
 
 export default CONST;

src/components/AttachmentModal.js

@@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {View} from 'react-native';
+import {View, Animated} from 'react-native';
 import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import lodashExtend from 'lodash/extend';
@@ -9,6 +9,7 @@ import CONST from '../CONST';
 import Modal from './Modal';
 import AttachmentView from './AttachmentView';
 import styles from '../styles/styles';
+import * as StyleUtils from '../styles/StyleUtils';
 import themeColors from '../styles/themes/default';
 import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL';
 import compose from '../libs/compose';
@@ -78,11 +79,14 @@ class AttachmentModal extends PureComponent {
             file: null,
             sourceURL: props.sourceURL,
             modalType: CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE,
+            isConfirmButtonDisabled: false,
+            confirmButtonFadeAnimation: new Animated.Value(1),
         };
 
         this.submitAndClose = this.submitAndClose.bind(this);
         this.closeConfirmModal = this.closeConfirmModal.bind(this);
         this.validateAndDisplayFileToUpload = this.validateAndDisplayFileToUpload.bind(this);
+        this.updateConfirmButtonVisibility = this.updateConfirmButtonVisibility.bind(this);
     }
 
     /**
@@ -123,8 +127,9 @@ class AttachmentModal extends PureComponent {
      * Execute the onConfirm callback and close the modal.
      */
     submitAndClose() {
-        // If the modal has already been closed, don't allow another submission
-        if (!this.state.isModalOpen) {
+        // If the modal has already been closed or the confirm button is disabled
+        // do not submit.
+        if (!this.state.isModalOpen || this.state.isConfirmButtonDisabled) {
             return;
         }
 
@@ -205,14 +210,38 @@ class AttachmentModal extends PureComponent {
         }
     }
 
+    /**
+     * In order to gracefully hide/show the confirm button when the keyboard
+     * opens/closes, apply an animation to fade the confirm button out/in. And since
+     * we're only updating the opacity of the confirm button, we must also conditionally
+     * disable it.
+     *
+     * @param {Boolean} shouldFadeOut If true, fade out confirm button. Otherwise fade in.
+     */
+    updateConfirmButtonVisibility(shouldFadeOut) {
+        this.setState({isConfirmButtonDisabled: shouldFadeOut});
+        const toValue = shouldFadeOut ? 0 : 1;
+
+        Animated.timing(this.state.confirmButtonFadeAnimation, {
+            toValue,
+            duration: 100,
+            useNativeDriver: true,
+        }).start();
+    }
+
     render() {
         const sourceURL = this.props.isAuthTokenRequired
             ? addEncryptedAuthTokenToURL(this.state.sourceURL)
             : this.state.sourceURL;
 
+        // When the confirm button is visible we don't need bottom padding on the attachment view.
+        const attachmentViewPaddingStyles = this.props.onConfirm
+            ? [styles.pl5, styles.pr5, styles.pt5]
+            : styles.p5;
+
         const attachmentViewStyles = this.props.isSmallScreenWidth || this.props.isMediumScreenWidth
             ? [styles.imageModalImageCenterContainer]
-            : [styles.imageModalImageCenterContainer, styles.p5];
+            : [styles.imageModalImageCenterContainer, attachmentViewPaddingStyles];
 
         const {fileName, fileExtension} = this.splitExtensionFromFileName(this.props.originalFileName || lodashGet(this.state, 'file.name', ''));
 
@@ -246,20 +275,27 @@ class AttachmentModal extends PureComponent {
                     />
                     <View style={attachmentViewStyles}>
                         {this.state.sourceURL && (
-                            <AttachmentView sourceURL={sourceURL} file={this.state.file} />
+                            <AttachmentView
+                                sourceURL={sourceURL}
+                                file={this.state.file}
+                                onToggleKeyboard={this.updateConfirmButtonVisibility}
+                            />
                         )}
                     </View>
 
                     {/* If we have an onConfirm method show a confirmation button */}
                     {this.props.onConfirm && (
-                        <Button
-                            success
-                            style={[styles.buttonConfirm]}
-                            textStyles={[styles.buttonConfirmText]}
-                            text={this.props.translate('common.send')}
-                            onPress={this.submitAndClose}
-                            pressOnEnter
-                        />
+                        <Animated.View style={StyleUtils.fade(this.state.confirmButtonFadeAnimation)}>
+                            <Button
+                                success
+                                style={[styles.buttonConfirm]}
+                                textStyles={[styles.buttonConfirmText]}
+                                text={this.props.translate('common.send')}
+                                onPress={this.submitAndClose}
+                                disabled={this.state.isConfirmButtonDisabled}
+                                pressOnEnter
+                            />
+                        </Animated.View>
                     )}
                 </Modal>
 

src/components/AttachmentView.js

@@ -28,6 +28,9 @@ const propTypes = {
     /** Flag to show the loading indicator */
     shouldShowLoadingSpinnerIcon: PropTypes.bool,
 
+    /** Notify parent that the UI should be modified to accommodate keyboard */
+    onToggleKeyboard: PropTypes.func,
+
     ...withLocalizePropTypes,
 };
 
@@ -37,6 +40,7 @@ const defaultProps = {
     },
     shouldShowDownloadIcon: false,
     shouldShowLoadingSpinnerIcon: false,
+    onToggleKeyboard: () => {},
 };
 
 const AttachmentView = (props) => {
@@ -48,6 +52,7 @@ const AttachmentView = (props) => {
             <PDFView
                 sourceURL={props.sourceURL}
                 style={styles.imageModalPDF}
+                onToggleKeyboard={props.onToggleKeyboard}
             />
         );
     }

src/components/PDFView/PDFInfoMessage.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import Text from '../Text';
+import TextLink from '../TextLink';
+import Icon from '../Icon';
+import * as Expensicons from '../Icon/Expensicons';
+import styles from '../../styles/styles';
+import variables from '../../styles/variables';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+
+const propTypes = {
+    /** Callback function to indicate that PDF password form should be shown */
+    onShowForm: PropTypes.func.isRequired,
+
+    ...withLocalizePropTypes,
+};
+
+const PDFInfoMessage = props => (
+    <View style={styles.alignItemsCenter}>
+        <Icon
+            src={Expensicons.EyeDisabled}
+            width={variables.iconSizeSuperLarge}
+            height={variables.iconSizeSuperLarge}
+        />
+        <Text style={[styles.h1, styles.mb3, styles.mt3]}>
+            {props.translate('attachmentView.pdfPasswordForm.title')}
+        </Text>
+        <Text>{props.translate('attachmentView.pdfPasswordForm.infoText')}</Text>
+        <Text>
+            {props.translate('attachmentView.pdfPasswordForm.beforeLinkText')}
+            <TextLink onPress={props.onShowForm}>
+                {` ${props.translate('attachmentView.pdfPasswordForm.linkText')} `}
+            </TextLink>
+            {props.translate('attachmentView.pdfPasswordForm.afterLinkText')}
+        </Text>
+    </View>
+);
+
+PDFInfoMessage.propTypes = propTypes;
+PDFInfoMessage.displayName = 'PDFInfoMessage';
+
+export default withLocalize(PDFInfoMessage);