[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://raw.githubusercontent.com/leon-do/Timezones/main/timezone.json

https://raw.githubusercontent.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://raw.githubusercontent.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');
    }
});

[melvin-bot]

📣 @girafferz! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[girafferz]

Contributor details
Your Expensify account email: noiman2004@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~012a6fdebfafd446f0

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[melvin-bot]

@sobitneupane, @greg-schroeder Whoops! This issue is 2 days overdue. Let's get this updated quick!

[greg-schroeder]

Awaiting proposal review

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[sobitneupane]

Thanks for the proposal everyone. At first, I would suggest everyone to go through the discussion in #24446 PR. #24446 PR was the one adding TIMEZONES.js. It has the explanation on why some timezones were not added.

cc: @iiredalert @ZhenjaHorbach @suneox @girafferz

[greg-schroeder]

Looks like we're waiting for some proposals to be updated after factoring in the comment above, I think

[melvin-bot]

@sobitneupane @greg-schroeder this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[greg-schroeder]

Looks like @sobitneupane is still in the review phase!

[greg-schroeder]

Reviews continue on linked PR

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

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

• #30468 parse supported timezone #33186

If no regressions arise, payment will be issued on 2024-01-17. 🎊

For reference, here are some details about the assignees on this issue:

• @suneox requires payment automatic offer (Contributor)
• @sobitneupane requires payment through NewDot Manual Requests

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:
• [@sobitneupane] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@sobitneupane] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@sobitneupane] Determine if we should create a regression test for this bug.
• [@sobitneupane] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@greg-schroeder] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[greg-schroeder]

Issue reported by: Applause
Contributor: @suneox ($500)
C+: @sobitneupane ($500)

Paid @suneox, and you can make a manual request Sobit. All that's left is to complete the checklist above!

[greg-schroeder]

Bump @sobitneupane :)

[greg-schroeder]

Bump again so we can get this one closed out!

[sobitneupane]

Sorry for the delay @greg-schroeder I was mostly unavailable last week. I will try to get it done this week (probably tomorrow)

[greg-schroeder]

No problem! Thanks Sobit!

[sobitneupane]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:

#24446

• [@sobitneupane] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

This issue is not solely caused by the linked PR. Auto-selecting timezone is returning outdated timezone. Discussion: #30468 (comment) and #30468 (comment)

• [@sobitneupane] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

It is an edge case that was missed while testing the PR.

• [@sobitneupane] Determine if we should create a regression test for this bug.

Nope. It was reported by Applause - Internal Team. So, I believe the regression test for this issue is already covered.

[greg-schroeder]

Thanks! closing

[JmillsExpensify]

$500 approved for @sobitneupane based on this summary.