Merge pull request #24035 from hungvu193/fix-22665

Fix: update AttachmentModal translation
Expensify · Aug 2, 2023 · f69e5af · f69e5af
2 parents 6d56956 + 4eb2df5
commit f69e5af
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 22 deletions.
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
@@ -186,25 +186,25 @@ function AttachmentModal(props) {
         (_file) => {
             const {fileExtension} = FileUtils.splitExtensionFromFileName(lodashGet(_file, 'name', ''));
             if (_.contains(CONST.API_ATTACHMENT_VALIDATIONS.UNALLOWED_EXTENSIONS, fileExtension.toLowerCase())) {
-                const invalidReason = props.translate('attachmentPicker.notAllowedExtension');
+                const invalidReason = 'attachmentPicker.notAllowedExtension';
 
                 setIsAttachmentInvalid(true);
-                setAttachmentInvalidReasonTitle(props.translate('attachmentPicker.wrongFileType'));
+                setAttachmentInvalidReasonTitle('attachmentPicker.wrongFileType');
                 setAttachmentInvalidReason(invalidReason);
                 return false;
             }
 
             if (lodashGet(_file, 'size', 0) > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
                 setIsAttachmentInvalid(true);
-                setAttachmentInvalidReasonTitle(props.translate('attachmentPicker.attachmentTooLarge'));
-                setAttachmentInvalidReason(props.translate('attachmentPicker.sizeExceeded'));
+                setAttachmentInvalidReasonTitle('attachmentPicker.attachmentTooLarge');
+                setAttachmentInvalidReason('attachmentPicker.sizeExceeded');
                 return false;
             }
 
             if (lodashGet(_file, 'size', 0) < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
                 setIsAttachmentInvalid(true);
-                setAttachmentInvalidReasonTitle(props.translate('attachmentPicker.attachmentTooSmall'));
-                setAttachmentInvalidReason(props.translate('attachmentPicker.sizeNotMet'));
+                setAttachmentInvalidReasonTitle('attachmentPicker.attachmentTooSmall');
+                setAttachmentInvalidReason('attachmentPicker.sizeNotMet');
                 return false;
             }
 
@@ -362,11 +362,11 @@ function AttachmentModal(props) {
             </Modal>
 
             <ConfirmModal
-                title={attachmentInvalidReasonTitle}
+                title={attachmentInvalidReasonTitle ? props.translate(attachmentInvalidReasonTitle) : ''}
                 onConfirm={closeConfirmModal}
                 onCancel={closeConfirmModal}
                 isVisible={isAttachmentInvalid}
-                prompt={attachmentInvalidReason}
+                prompt={attachmentInvalidReason ? props.translate(attachmentInvalidReason) : ''}
                 confirmText={props.translate('common.close')}
                 shouldShowCancelButton={false}
             />

diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
@@ -110,6 +110,7 @@ class AvatarWithImagePicker extends React.Component {
         this.state = {
             isMenuVisible: false,
             validationError: null,
+            phraseParam: {},
             isAvatarCropModalOpen: false,
             imageName: '',
             imageUri: '',
@@ -139,9 +140,10 @@ class AvatarWithImagePicker extends React.Component {
 
     /**
      * @param {String} error
+     * @param {Object} phraseParam
      */
-    setError(error) {
-        this.setState({validationError: error});
+    setError(error, phraseParam) {
+        this.setState({validationError: error, phraseParam});
     }
 
     /**
@@ -188,30 +190,29 @@ class AvatarWithImagePicker extends React.Component {
      */
     showAvatarCropModal(image) {
         if (!this.isValidExtension(image)) {
-            this.setError(this.props.translate('avatarWithImagePicker.notAllowedExtension', {allowedExtensions: CONST.AVATAR_ALLOWED_EXTENSIONS}));
+            this.setError('avatarWithImagePicker.notAllowedExtension', {allowedExtensions: CONST.AVATAR_ALLOWED_EXTENSIONS});
             return;
         }
         if (!this.isValidSize(image)) {
-            this.setError(this.props.translate('avatarWithImagePicker.sizeExceeded', {maxUploadSizeInMB: CONST.AVATAR_MAX_ATTACHMENT_SIZE / (1024 * 1024)}));
+            this.setError('avatarWithImagePicker.sizeExceeded', {maxUploadSizeInMB: CONST.AVATAR_MAX_ATTACHMENT_SIZE / (1024 * 1024)});
             return;
         }
 
         this.isValidResolution(image).then((isValidResolution) => {
             if (!isValidResolution) {
-                this.setError(
-                    this.props.translate('avatarWithImagePicker.resolutionConstraints', {
-                        minHeightInPx: CONST.AVATAR_MIN_HEIGHT_PX,
-                        minWidthInPx: CONST.AVATAR_MIN_WIDTH_PX,
-                        maxHeightInPx: CONST.AVATAR_MAX_HEIGHT_PX,
-                        maxWidthInPx: CONST.AVATAR_MAX_WIDTH_PX,
-                    }),
-                );
+                this.setError('avatarWithImagePicker.resolutionConstraints', {
+                    minHeightInPx: CONST.AVATAR_MIN_HEIGHT_PX,
+                    minWidthInPx: CONST.AVATAR_MIN_WIDTH_PX,
+                    maxHeightInPx: CONST.AVATAR_MAX_HEIGHT_PX,
+                    maxWidthInPx: CONST.AVATAR_MAX_WIDTH_PX,
+                });
                 return;
             }
 
             this.setState({
                 isAvatarCropModalOpen: true,
                 validationError: null,
+                phraseParam: {},
                 isMenuVisible: false,
                 imageUri: image.uri,
                 imageName: image.name,
@@ -249,7 +250,7 @@ class AvatarWithImagePicker extends React.Component {
                 icon: Expensicons.Trashcan,
                 text: this.props.translate('avatarWithImagePicker.removePhoto'),
                 onSelected: () => {
-                    this.setError(null);
+                    this.setError(null, {});
                     this.props.onImageRemoved();
                 },
             });
@@ -323,7 +324,7 @@ class AvatarWithImagePicker extends React.Component {
                 {this.state.validationError && (
                     <DotIndicatorMessage
                         style={[styles.mt6]}
-                        messages={{0: this.state.validationError}}
+                        messages={{0: this.props.translate(this.state.validationError, this.state.phraseParam)}}
                         type="error"
                     />
                 )}