[Hold for Payment 6th August] Timezone information is not visible when app is in Spanish

[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. Navigate to a conversation with a user that has a different timezone than you
2. Change the app language to Spanish

Expected Result:

Timezone comment should be visible at any time.

Actual Result:

Timezone information is not visible when app is in Spanish. The message can be briefly seen just as the user changes the app to Spanish but it disappears after ~1sec

Workaround:

User can check the time zone in the user profile.

Platform:

Where is this issue occurring?

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

Version Number: 1.0.80-0

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

Notes/Photos/Videos:

Screenshot from video showing the translated text that's visible for an instant:

Recording.201.mp4

Upwork job URL:* https://www.upwork.com/jobs/~01c1138bff53cf206e

View all open jobs on Upwork

---

From @JmillsExpensify https://expensify.slack.com/archives/C01GTK53T8Q/p1627011603184100

Someone's timezone is only visible on mobile, not the electron/web app, which creates a weird inconsistency depending on which platform you're on. 1.0.79-3

[MelvinBot]

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

[helaoutar]

This happens because inside src/pages/home/report/ParticipantLocalTime.js in getParticipantLocalTime(), moment.tz seems to be returning different results depending on the language:

• Engligh: AM/PM format
• Spanish: 24 hour format

This is causing ParticipantLocalTime component to not render, because it's conditioned by this variable:
const isReportRecipientLocalTimeReady = this.state.localTime.toString().match(/(A|P)M/ig); (this.state.localTime being the return value of getParticipantLocalTime).

Which is null when the language is Spanish (because of the format).

Proposal:

Use hh:mm A to format the date within getParticipantLocalTime:

getParticipantLocalTime() {
        const reportRecipientTimezone = lodashGet(this.props.participant, 'timezone', {});
        return moment().tz(reportRecipientTimezone.selected).format('hh:mm A');
    }

This will make sure that the date is in AM/PM format.

[parasharrajat]

oh nice catch @helaoutar .

[aman-atg]

Hi there, Let me know if we want a solution without changing the formatting ( from 'LT' to 'hh:mm A' ) since we're using LT on all other places

[iwiznia]

@helaoutar I don't think that solution is good. US uses AM/PM by default, but Spain uses 24h system as default. We should not be changing the format to be the same in every country, because that defeats the purpose of localizing the app. The fix should be to not rely on finding am/pm in the timestamp here.

So, yes, @aman-atg, we want a solution that does not change the format.

[parasharrajat]

I added that check as localized time was available with a delay. But I didn't notice the Other languages. We can simply remove this check and Print the whole message when complete time string is available.

[aman-atg]

So, yes, @aman-atg, we want a solution that does not change the format.

Proposal:

Explanation

• So, what I've observed here is that, this isn't even required here and causing the issue
  

  App/src/pages/home/report/ParticipantLocalTime.js

  Lines 50 to 52 in c009187

  	// Moment.format does not return AM or PM values immediately.
  	// So we have to wait until we are ready before showing the time to the user
  	const isReportRecipientLocalTimeReady = this.state.localTime.toString().match(/(A|P)M/ig);

  • So, first of all it's not required
  • Secondly, AM / PM aren't being displayed immediately because we're setting it after an interval of 1s (you can verify that by changing 1000 to 10 or something lower
    

    App/src/pages/home/report/ParticipantLocalTime.js

    Line 35 in c009187

    }, 1000));

Solution :

App/src/pages/home/report/ParticipantLocalTime.js

Lines 43 to 47 in c009187

	getParticipantLocalTime() {
	const reportRecipientTimezone = lodashGet(this.props.participant, 'timezone', {});
	return moment().tz(reportRecipientTimezone.selected).format('LT');
	}

• Issue while refreshing will be fixed if we add this line of code inside getParticipantLocalTime function

        moment.locale(this.props.preferredLocale);

• Below code should be added before componentWillUnmount , so that we don't render time when it's not formatted according to the language

   shouldComponentUpdate(nextProps, nextState) {
        return nextState.localTime !== this.state.localTime;
    }

testing.mp4

[parasharrajat]

Secondly, AM / PM aren't being displayed immediately because we're setting it after an interval of 1s (you can verify that by changing 1000 to 10 or something lower

This is not true. In the constructor, State is initialized with a value. There must be some other reason. If I am missing something, could you please explain?

const isReportRecipientLocalTimeReady = this.state.localTime.toString().match(/(A|P)M/ig);

This was used as a moment was taking some time to convert the time. This prevents the printing of incomplete messages on the screen.

   shouldComponentUpdate(nextProps, nextState) {
        return nextState.localTime !== this.state.localTime;
    }

seems helpful in reducing rendering.

[aman-atg]

Secondly, AM / PM aren't being displayed immediately because we're setting it after an interval of 1s (you can verify that by changing 1000 to 10 or something lower.

Here, I meant changing the state after the language has been changed

@parasharrajat

• Also, Here comments are suggesting that moment is returning the whole time string except AM / PM (that too with a delay ), which doesn't make any sense.
  

  App/src/pages/home/report/ParticipantLocalTime.js

  Lines 50 to 52 in c009187

  	// Moment.format does not return AM or PM values immediately.
  	// So we have to wait until we are ready before showing the time to the user
  	const isReportRecipientLocalTimeReady = this.state.localTime.toString().match(/(A|P)M/ig);

[deetergp]

This is definitely something that can be handled externally.