[HOLD for payment 2021-11-22] Missing spanish translations in VBA flow (Company types and routing and bank account number example) - Reported by: @Santhosh-Sellavel

[isagoico]

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. Set app to spanish
2. Navigate to bank account flow > Manually set bank account
3. Check the image example above the routing and bank account number
4. Enter test credentials and proceed to company step
5. Click on the company type dropdown

Expected Result:

All page should be correctly translated to spanish.

Actual Result:

The example image in add bank account modal is not translated along with the company type options in Company step

Workaround:

None needed.

Platform:

Where is this issue occurring?

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

Version Number: 1.1.8-8

Reproducible in staging?: Yes
Reproducible in production?: Yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: @Santhosh-Sellavel
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1634748908001600

View all open jobs on GitHub

[MelvinBot]

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

[flodnv]

Thanks for the report!

As I expected, this is an image. @iwiznia what should we do here? Do we have an existing way to handle "translated images"?

[iwiznia]

Oh this is a new one, we have not needed this till now. Assuming we need an image and can't do this with text (which I am not sure if we can or not in this specific case), this is what we could do:

• Create a new component LocalizedImage
• The component uses withLocalize to detect the current locale
• We put the image name in the translation files
• We import the image name coming from the translation like we import the image now: import image from '../../../assets/images/'+imageNameFromLocale; (I am unsure about this, I assume we can import things on the fly, but not really sure)

[PrashantMangukiya]

Proposed Solution: (If considered as External)

Current Code :

App/src/pages/ReimbursementAccount/BankAccountStep.js

Line 19 in 6d504d0

import exampleCheckImage from '../../../assets/images/example-check-image.png';

App/src/pages/ReimbursementAccount/BankAccountStep.js

Lines 259 to 263 in 6d504d0

	<Image
	resizeMode="contain"
	style={[styles.exampleCheckImage, styles.mb5]}
	source={exampleCheckImage}
	/>

App/src/pages/ReimbursementAccount/CompanyStep.js

Lines 244 to 251 in 6d504d0

	<ExpensiPicker
	label={this.props.translate('companyStep.companyType')}
	items={_.map(CONST.INCORPORATION_TYPES, (label, value) => ({value, label}))}
	onChange={value => this.clearErrorAndSetValue('incorporationType', value)}
	value={this.state.incorporationType}
	placeholder={{value: '', label: '-'}}
	hasError={this.getErrors().incorporationType}
	/>

Solution:

As we do not need to use example check image on multiple pages, so we can implement simple solution as under:
i.e. We have to put language specific image within asset folder i.e. example-check-image-en.png and example-check-image-es.png and update code within /src/pages/ReimbursementAccount/BankAccountStep.js as under:

// import exampleCheckImage from '../../../assets/images/example-check-image.png';   // *** Old code
import exampleCheckImageEn from '../../../assets/images/example-check-image-en.png'; // *** New code
import exampleCheckImageEs from '../../../assets/images/example-check-image-es.png'; // *** New code

constructor(props) { 
  this.getExampleCheckImage = this.getExampleCheckImage.bind(this);   // *** Add this line
}

// Add this function
getExampleCheckImage() {
    switch (this.props.preferredLocale) {
        case 'en':
            return exampleCheckImageEn;
        case 'es':
            return exampleCheckImageEs;
        default:
            return exampleCheckImageEn;
    }
}

<Image
    resizeMode="contain"
    style={[styles.exampleCheckImage, styles.mb5]}
    // source={exampleCheckImage}           // *** Old code
    source={this.getExampleCheckImage()}   // *** New code
/>

Update code within src/pages/ReimbursementAccount/CompanyStep.js file to localise incorporationTypes as under:

<ExpensiPicker
    label={this.props.translate('companyStep.companyType')}
    // items={_.map(CONST.INCORPORATION_TYPES, (label, value) => ({value, label}))}   // *** OLD 
    items={_.map(this.props.translate('companyStep.incorporationTypes'), (label, value) => ({value, label}))}  // *** New
    onChange={value => this.clearErrorAndSetValue('incorporationType', value)}
    value={this.state.incorporationType}
    placeholder={{value: '', label: '-'}}
    hasError={this.getErrors().incorporationType}
/>

Add incorporationTypes within src/languages/en.js as under:

  companyStep: {
       ...,
       incorporationTypes: {
          LLC: 'LLC',
          CORPORATION: 'Corp',
          PARTNERSHIP: 'Partnership',
          COOPERATIVE: 'Cooperative',
          SOLE_PROPRIETORSHIP: 'Sole Proprietorship',
          OTHER: 'Other',
      },
  },

Add incorporationTypes within src/languages/es.js as under:

  companyStep: {
       ...,
        incorporationTypes: {
            LLC: 'LLC',
            CORPORATION: 'Corp',
            PARTNERSHIP: 'Camaradería',
            COOPERATIVE: 'Cooperativa',
            SOLE_PROPRIETORSHIP: 'Propietario único',
            OTHER: 'Otra',
        },
  },

[MelvinBot]

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