[C+ Checklist Needs Completion] [$500] Profile - Incorrect city name in automatic timezone selection

[lanitochka17]

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

---

Version Number: 1.3.91-6
Reproducible in staging?: Y
**Reproducible in production?:**Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Pre-condition: User logged in and located in Ukraine

1. Open test website https://staging.new.expensify.com/
2. Open Settings
3. Click on your avatar
4. Click on the Timezone
5. Turn off "Automatically determine your location."
6. Click on the timezone selection
7. Type city exactly as in the automatical result "Kiev"

Expected Result:

Name of the city in the manual and automatic time zone selection will be identical

Actual Result:

Name of the city in the automatic timezone selection is Kiev, but if you try to find this timezone manually you can't find anything. Because timezone name in manual selection is Kyiv

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• Windows: Chrome
• MacOS: Desktop

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

Windows: Chrome

Bug6251961_1698333607223.chrome_PVhOb4WtPO.mp4

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bb82fb7cffd6353f
• Upwork Job ID: 1717648944610619392
• Last Price Increase: 2023-11-16
• Automatic offers:
• suneox | Contributor | 28061700

[melvin-bot]

Triggered auto assignment to @greg-schroeder (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01bb82fb7cffd6353f

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[iiredalert]

Proposal

Please re-state the problem that we are trying to solve in this issue.

We are unable to find Kiev as a timezone when selecting the time zone manually

What is the root cause of that problem?

Kiev is not defined in TIMEZONES.js, only Kyiv is defined.

What changes do you think we should make in order to solve the problem?

Add 'Europe/Kiev' to TIMEZONES.js

    'Europe/Kiev',

They both are valid names for the city and are valid time zones.

Verified by running this in the javascript console:

Intl.DateTimeFormat(undefined, { timeZone: 'Europe/Kiev' })
DateTimeFormat {format: ƒ}
Intl.DateTimeFormat(undefined, { timeZone: 'Europe/Kyiv' })
DateTimeFormat {format: ƒ}
Intl.DateTimeFormat(undefined, { timeZone: 'Europe/invalid' })
VM157:1 Uncaught RangeError: Invalid time zone specified: Europe/invalid
    at Intl.DateTimeFormat (<anonymous>)
    at <anonymous>:1:6

What alternative solutions did you explore? (Optional)

[ZhenjaHorbach]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Incorrect city name in automatic timezone selection

What is the root cause of that problem?

We use a constant in which the names of the time zones do not match the time zones from the Intl library

https://github.com/Expensify/App/blob/53699cfa5aae38f8a95859ce102ff026cf9ce407/src/TIMEZONES.js

What changes do you think we should make in order to solve the problem?

I think the easiest way to avoid such problems is
It does not use third party data like this json

App/src/TIMEZONES.js

Line 1 in 53699cf

// All timezones were taken from: https://github.com/leon-do/Timezones/main/timezone.json

https://github.com/leon-do/Timezones/main/timezone.json
And use time zones from the Intl library because for automatic value we also useIntl library (Intl.DateTimeFormat().resolvedOptions().timeZone)

App/src/pages/settings/Profile/TimezoneInitialPage.js

Line 39 in 546f27e

selected: isAutomatic ? Intl.DateTimeFormat().resolvedOptions().timeZone : timezone.selected,

For this we can use Intl.supportedValuesOf('timeZone') method to get all list available timezones

and we can call here instead using TIMEZONES constant

App/src/pages/settings/Profile/TimezoneSelectPage.js

Lines 40 to 49 in 546f27e

	const allTimezones = useInitialValue(() =>
	_.chain(TIMEZONES)
	.filter((tz) => !tz.startsWith('Etc/GMT'))
	.map((text) => ({
	text,
	keyForList: getKey(text),
	isSelected: text === timezone.selected,
	}))
	.value(),
	);

As alternative:
We can simply copy the result of this function Intl.supportedValuesOf('timeZone')
And insert instead of the old values

To be sure that the data matches

What alternative solutions did you explore? (Optional)

We can just update zone names in TIMEZONES constants

[suneox]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Incorrect city name in automatic timezone selection

What is the root cause of that problem?

The list of timezone is missing from

App/src/TIMEZONES.js

Line 1 in bb32cc5

// All timezones were taken from: https://github.com/leon-do/Timezones/main/timezone.json

What changes do you think we should make in order to solve the problem?

We will create timezoneBackwardMap from tz_database

const timezoneBackwardMap = {
    'Africa/Accra': 'Africa/Abidjan',
    'Africa/Addis_Ababa': 'Africa/Nairobi',
    .....
};

At function getUserTimezone if timezone not exits on TIMEZONES.ts we will get backward link from timezoneBackwardMap

const getUserTimezone = (currentUserPersonalDetails) => {
    const timezone = lodashGet(currentUserPersonalDetails, 'timezone', CONST.DEFAULT_TIME_ZONE);
    if(TIMEZONES.includes(timezone)) {
        return timezone;
    }
    return timezoneBackwardMap[timezone]
};

Then At function updateAutomaticTimezone also check if timezone not exits on TIMEZONES.ts we will get backward link from timezoneBackwardMap

    const parameters: UpdateAutomaticTimezoneParams = {
        timezone: TIMEZONES.includes(timezone.selected) ? JSON.stringify(timezone) : JSON.stringify({ selected: timezoneBackwardMap[timezone.selected], automatic: timezone.automatic }),
    };

What alternative solutions did you explore? (Optional)

[girafferz]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The relevant timezone is not included in the configured data.

What is the root cause of that problem?

The timezone list is not being updated.

What changes do you think we should make in order to solve the problem?

In JavaScript, you can use the moment-timezone library to get a list of time zones.

To automatically update the timezones.js file with the list of time zones obtained from moment.tz.names(), you have several options. One way is to create a script that dynamically generates the TIMEZONES.js file

When you run this script, it will generate (or update) the TIMEZONES.js file at the specified path. If the moment-timezone library is updated with new time zones, you can re-run this script to automatically update TIMEZONES.js.

Instead of running this script manually, you could also use some automation tool (e.g., a cron job or a CI/CD pipeline) to run it periodically.

example

const fs = require('fs');
const moment = require('moment-timezone');

const timezones = moment.tz.names();
let output = "export default [\n";

for (const tz of timezones) {
    output += `    '${tz}',\n`;
}

output += "];\n";

fs.writeFile('path/to/timezones.js', output, (err) => {
    if (err) {
        console.error('Error writing file:', err);
    } else {
        console.log('timezones.js has been updated');
    }
});