[HOLD for payment 2021-09-22] iOS - Chat- Menu options after selecting add attachment is not translated to Spanish

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Log in with a applause.expensifail account
2. Navigate to Settings > Preferences
3. Set the language to Spanish
4. Tap on any chat
5. Tap on + sign > Add Attachment

Expected Result:

The app language changed to Spanish by navigating to several areas in the app

Actual Result:

After changing the language to Spanish - the menu options displayed in English

Workaround:

Unknown

Platform:

Where is this issue occurring?

• iOS

Version Number:
1.0.94-0
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Bug5222374_3.09-3.mp4

Expensify/Expensify Issue URL:

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @sketchydroide (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[PrashantMangukiya]

Proposed Solution

Here is the problem: We are preparing menu item data at component load (within constructor), but whenever language changed we are not taking care for language change. i.e. we need to refresh menu item data within src/components/AttachmentPicker/index.native.js whenever language changed.

Below is current code for constructor:

App/src/components/AttachmentPicker/index.native.js

Lines 64 to 91 in b3421ce

	constructor(...args) {
	super(...args);
	this.state = {
	isVisible: false,
	};
	this.menuItemData = [
	{
	icon: Camera,
	text: this.props.translate('attachmentPicker.takePhoto'),
	pickAttachment: () => this.showImagePicker(launchCamera),
	},
	{
	icon: Gallery,
	text: this.props.translate('attachmentPicker.chooseFromGallery'),
	pickAttachment: () => this.showImagePicker(launchImageLibrary),
	},
	{
	icon: Paperclip,
	text: this.props.translate('attachmentPicker.chooseDocument'),
	pickAttachment: () => this.showDocumentPicker(),
	},
	];
	this.close = this.close.bind(this);
	this.pickAttachment = this.pickAttachment.bind(this);
	}

Solution: We have to update code as below. i.e. Need to prepare menu item data at component load and when language changed i.e. within componentDidUpdate() we can compare preferredLocale value, so if language changed then refresh menu item data.

I will prefer to go this way because we need a new translation whenever language changed, So better to update menu item translation whenever we detect language changed i.e. via componentDidUpdate(). So it will not call this.props.translate() method during every render. It will help to improve performance at some level.

    constructor(...args) {
        super(...args);

        this.state = {
            isVisible: false,
        };

        this.menuItemData = this.getMenuItemData();   // ** code moved to getMenuItemData()

        this.close = this.close.bind(this);
        this.pickAttachment = this.pickAttachment.bind(this);
        this.getMenuItemData = this.getMenuItemData.bind(this);    // ** Added bind for getMenuItemData()
    }

    // Refresh menu item data if language changed (*** Added  this lifecycle method)
    componentDidUpdate(prevProps) {
        if (this.props.preferredLocale !== prevProps.preferredLocale) {
            this.menuItemData = this.getMenuItemData();
        }
    }

    /**
      * Get menu item data
      *
      *  @returns {Array}
      */
    getMenuItemData() {
        return [
            {
                icon: Camera,
                text: this.props.translate('attachmentPicker.takePhoto'),
                pickAttachment: () => this.showImagePicker(launchCamera),
            },
            {
                icon: Gallery,
                text: this.props.translate('attachmentPicker.chooseFromGallery'),
                pickAttachment: () => this.showImagePicker(launchImageLibrary),
            },
            {
                icon: Paperclip,
                text: this.props.translate('attachmentPicker.chooseDocument'),
                pickAttachment: () => this.showDocumentPicker(),
            },
        ];
    }

Screen recording based on my solution, It shows perfect behaviour now.

iOS.Screen.Recording.mov

If this issue consider as external, and my solution accepted then kindly invite me on Upwork.
My Upwork profile: https://www.upwork.com/freelancers/~01c718889ed7821f82

Thank you.

[sketchydroide]

I cannot replicate this on my iPhone, the same version running (1.0.94-0).

[PrashantMangukiya]

I tested v1.0.94-0 on iOS Simulator. I can re-produce this issue. Below is screen recording.

Screen.Recording.2021-09-07.at.5.09.49.PM.mov

[MelvinBot]

Triggered auto assignment to @marklouisdeshaun (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[sketchydroide]

I added the external, I can't replicate, please @marklouisdeshaun try to replicate if possible.
I also asked in engineering-chat for more people to try to replicate, at the moment no one did yet https://expensify.slack.com/archives/C03TQ48KC/p1631013560315700

[marklouisdeshaun]

I also cannot replicate this. When I tried on my iPhone Xs with iOS 14.7.1, running v1.0.93-1, the Spanish translations were there.

[sketchydroide]

I will try to replicate this on the simulator, but we should try to get a couple more people from expensify try to replicate this

[PrashantMangukiya]

Hi Guys, I just installed v1.0.93-1 from app store. I can reproduce issue within my iPhoneXsMax iOS 14.6

Below is screen recording from real device. I reduced quality to 480p because GH allow max 10MB file.

iPhoneXsMax-iOS14-6.mov

[sketchydroide]

I can also not replicate it with the appstore version. 1.0.93-1.
There is clearly something wrong as QA and Prashant can see it happen, I'm just unsure on what the solution is, the proposed solution seems reasonable, but the discrepance of some people not being to replicate it worries me a bit. Also I would like to find someone that can replicate it, so we can test the fix.

[PrashantMangukiya]

I also installed app store v1.0.93-1 to my family member's iPhone. I can reproduce it within iPhone6Plus iOS 12.5.4 Just sharing it so it will helpful to QA and Engineering team.

Below is screen recording from iPhone6Plus (iOS 12.5.4)

iPhone6Plus-iOS12.5.4-480.mov

[sketchydroide]

@Jag96 was able to replicate this so I'm CCing into this, also I'm OOO in 2 days so can't really follow this, so I'm unassigning myself.
@marklouisdeshaun please go ahead and create the job :)

[parasharrajat]

Text on menu items does not update as we are only translating the text in the constructor.

Proposal

1. A minimal solution for this would be use translation keys in the menu items array and then translate it in the Render method.
   

   App/src/components/AttachmentPicker/index.native.js

   Line 71 in b3421ce

   this.menuItemData = [

Here text would be changed to textTranslationKey

    
    text: this.props.translate('attachmentPicker.takePhoto') ===>   textTranslationKey: 'attachmentPicker.takePhoto'

then in the render method.

App/src/components/AttachmentPicker/index.native.js

Lines 266 to 270 in b3421ce

	<MenuItem
	key={item.text}
	icon={item.icon}
	title={item.text}
	onPress={() => this.selectItem(item)}

                                 <MenuItem
                                     key={item.textTranslationKey}
                                     icon={item.icon}
                                     title={this.props.translate(item.textTranslationKey)}
                                     onPress={() => this.selectItem(item)}
                                 />

This pattern is already followed by the app and it is minimal.

[marklouisdeshaun]

Created a job in Upwork!

Internal: https://www.upwork.com/ab/applicants/1436070567305637888/job-details
External: https://www.upwork.com/jobs/~0151762eb650aec241

[MelvinBot]

Triggered auto assignment to @johnmlee101 (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[PrashantMangukiya]

Hi @marklouisdeshaun Submitted proposal on upwork. Also here is my proposed solution: #5103 (comment) I will be happy to prepare for pr if my solution accepted. Thanks.

[sketchydroide]

Hey @PrashantMangukiya and @parasharrajat, I think @parasharrajat makes more sense as it is simpler and cleaner, and I think falls more into what we want New.Expensify code to look like.
So we are going with your solution @parasharrajat.

@PrashantMangukiya thanks for the testing you did, and for proposing a solution :)

[marklouisdeshaun]

Hired @parasharrajat in Upwork.

[isagoico]

Issue reproducible during KI retests.

[botify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[botify]

🚀 Deployed to staging by @johnmlee101 in version: 1.0.97-1 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[botify]

🚀 Deployed to production by @francoisl in version: 1.0.98-1 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[isagoico]

Issue not reproducible during KI retests.

[botify]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.0.98-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pulls/5199\n

If no regressions arise, payment will be issued on 2021-09-27. 🎊

[mountiny]

This message is a bug, caused by today's deploy and some weird GH API behaviour. Updated the title back to what it was 🙇

[parasharrajat]

Ping for

[marklouisdeshaun]

The contributor has been paid, the contract has been completed and the job has been closed in Upwork. Thanks @parasharrajat !