[HOLD for payment 2022-01-25] Category names in EmojiPicker are not translated - Reported by @mananjadhav

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open app
2. Set language to spanish
3. Check emoji picker in any chat
4. Note category names

Expected Result:

Category names in EmojiPicker should be translated

Actual Result:

Category names in EmojiPicker are not translated

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.26-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @mananjadhav
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1640957759340100

View all open jobs on GitHub

[MelvinBot]

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

[mananjadhav]

Proposing the solution as I've reported and I am also working on other EmojiPicker issues.

1. We need to update all the code for headers in assets/emojis.js with their translation keys like smileysAndPeople, animalsAndNature.
2. Add the key-value pairs in en and es files under emojiPicker section with headers

// example
emojiPicker: {
     ...
     headers: {
        smileysAndPeople: 'Smileys and People'
        animalsAndNature: 'Animals and Nature',
        
     }
}

3. In EmojiPicker component, where we have the header being rendered.

App/src/pages/home/report/EmojiPickerMenu/index.js

Lines 342 to 348 in 51de5d9

	if (header) {
	return (
	<Text style={styles.emojiHeaderStyle}>
	{code}
	</Text>
	);
	}

We replace {code} with

{this.props.translate(`emojiPicker.headers.${code}`)}

[MelvinBot]

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

[jasperhuangg]

@mananjadhav has a good solution!

[adelekennedy]

Internal: https://www.upwork.com/ab/applicants/1479297672804737024/job-details
External: https://www.upwork.com/jobs/~01d9f9b3536a1773f7

@mananjadhav I hired you for reporting the issue!

[MelvinBot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rushatgabhane (Exported)