[Payment due 2024-05-15][$250] Status expiry time does not show correctly when hovering the user in the chat report

[m-natarajan]

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.4.64-0
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: @yuwenmemon
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1713818046569569

Action Performed:

1. Open profile > Status > Set up time to clear the status in 30 min
2. Open any chat report and hover over the status icon

Expected Result:

Should show the correct status expiry time

Actual Result:

Showing as "until tomorrow"

Workaround:

unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Recording.3022.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016ca471a846444b3a
• Upwork Job ID: 1782651620772831232
• Last Price Increase: 2024-04-30
• Automatic offers:
• DylanDylann | Reviewer | 0
• Krishna2323 | Contributor | 0

Issue Owner

Current Issue Owner: @Krishna2323

[melvin-bot]

Triggered auto assignment to @kadiealexander (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[dragnoir]

Proposal

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

Inconsistency in Block Quote Usage Between Workspace Description and Chat

What is the root cause of that problem?

We use getStatusUntilDate to get the text displayed inside the tooltip

App/src/pages/home/report/ReportActionItemSingle.tsx

Line 210 in 0575c56

const formattedDate = DateUtils.getStatusUntilDate(status?.clearAfter ?? '');

inside getStatusUntilDate we have this check

App/src/libs/DateUtils.ts

Lines 536 to 539 in 0575c56

	// If the date is equal to the end of today
	if (isSameDay(input, endOfToday)) {
	return translateLocal('statusPage.untilTomorrow');
	}

it's checking if the input (when will status be cleared) date is at the same day with the end of the current day. If true, it turns "until tomorrow".
And this is wrong

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

We shoudl check if the input (when will status be cleared) date is equal to the end of the current day. Then we can display "until tomorrow".

if (isEqual(input, endOfToday)) {
  return  translateLocal('statusPage.untilTomorrow');
}

After the update from
We need to make sure input is equal to endOfToday.

When user pick "today" from the UI, the values will be like:
input: Thu Apr 25 2024 23:59:59 GMT+0100 (Central European Standard Time)
index.ts:77 endOfToday: Thu Apr 25 2024 23:59:59 GMT+0100 (Central European Standard Time)

For a user typing 11:59 PM the output will be
endOfToday: Thu Apr 25 2024 23:59:00 GMT+0100 (Central European Standard Time)

23:59:00 and not 23:59:59

For this we need to create an extra utility to make sure input is equal to 23:59:00 or 23:59:59

What alternative solutions did you explore? (Optional)

If we need to make sure the date is tomorrow, we can adjust the code to use on the functions like isTomorrow on the date-fns library https://date-fns.org/v3.6.0/docs/isTomorrow

I think the Tomorrow means that the date for clear after is:

• today but after working hours
• tomorrow but before end of working hours
  in those conditions, considering the 9to5 bussiness hours, any date in this interval [from today after 5pm until tomorrow 5pm], should considered to morrow for the availability of the person.

For this, I recommended the following extended update:

function isWithinBusinessHoursTomorrow(inputDate) {
  const businessStart = setMinutes(setHours(inputDate, 9), 0);
  const businessEnd = setMinutes(setHours(inputDate, 17), 0);

  // Check if the input date is tomorrow and before business hours end
  return isTomorrow(inputDate) && isBefore(inputDate, businessEnd);
}

function CheckDate({ inputDate }) {
  // Convert input string to Date object if inputDate is string
  const date = typeof inputDate === 'string' ? new Date(inputDate) : inputDate;
  const now = new Date();

  // Check if the current time is after business hours today (after 5 PM)
  const afterBusinessHoursToday = isToday(date) && isAfter(now, setHours(now, 17));

  // Combined logic to determine output
  const isDateTomorrowBeforeBusinessHoursEnd = isWithinBusinessHoursTomorrow(date) || afterBusinessHoursToday;

  return
      {isDateTomorrowBeforeBusinessHoursEnd ? 'true' : 'false'}
}

isWithinBusinessHoursTomorrow checks if the input date is tomorrow and also before 5 PM.
The afterBusinessHoursToday condition specifically checks if today's date is past 5 PM.
The final output is determined by whether it's after business hours today or the input date is tomorrow before 5 PM.

[Krishna2323]

Proposal

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

Inconsistency in Block Quote Usage Between Workspace Description and Chat

What is the root cause of that problem?

When the input date is equal to the end of today, we show untilTomorrow.

App/src/libs/DateUtils.ts

Lines 536 to 539 in 0575c56

	// If the date is equal to the end of today
	if (isSameDay(input, endOfToday)) {
	return translateLocal('statusPage.untilTomorrow');
	}

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

Instead of isSameDay, we should use isSameSecond or isSameMinute or isSameHour from date-fns.

Optional: If we want to show until tomorrow when time is "Custom time" 11:59 PM, we can use isSameMinute.

What alternative solutions did you explore? (Optional)

Result

status_time_issue_fix.mp4

[Krishna2323]

Proposal updated

1. Added isSameMinute & isSameHour as optionals.

[Nodebrute]

Proposal

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

Status expiry time does not show correctly when hovering the user in the chat report

What is the root cause of that problem?

Any time within today will display the message 'until tomorrow.'

App/src/libs/DateUtils.ts

Lines 536 to 539 in 5832dba

	// If the date is equal to the end of today
	if (isSameDay(input, endOfToday)) {
	return translateLocal('statusPage.untilTomorrow');
	}

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

We should use isEqual here

App/src/libs/DateUtils.ts

Lines 536 to 539 in 5832dba

	// If the date is equal to the end of today
	if (isSameDay(input, endOfToday)) {
	return translateLocal('statusPage.untilTomorrow');
	}

  // If the date is equal to the end of today
    if (isEqual(input, endOfToday)) {
        return translateLocal('statusPage.untilTomorrow');
    }

With just the above change, isEqual will return false for statuses set to today. This is because isEqual compares milliseconds, and since the milliseconds are different, the result is false.

1. The endOfToday has 999 milliseconds. We can set the milliseconds to 0 to make both dates(input & endOfToday) the same.

let endOfToday = endOfDay(now);
endOfToday = setMilliseconds(endOfToday, 0)

2. Alternatively, we can set the input's milliseconds to match those of endOfToday to ensure they are the same.
3. Another approach is to set the milliseconds for both dates(input & endOfToday) as a safer option.

What alternative solutions did you explore? (Optional)

Optional: We can use endOfToday() here from date-fns

App/src/libs/DateUtils.ts

Lines 533 to 534 in 5832dba

	const now = new Date();
	const endOfToday = endOfDay(now);

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~016ca471a846444b3a

[melvin-bot]

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

[dragnoir]

Proposal

@cubuspl42 I extended my alternative solution with more details, no change in the RCA or the solution.

[melvin-bot]

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

[mallenexpensify]

@DylanDylann reassigning, please take over as C+. If you don't have bandwidth, unassign yourself. Thanks

[kaushiktd]

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

Status expiry time does not show correctly when hovering the user in the chat report

What is the root cause of that problem?

The original issue was related to displaying the correct status expiry time based on a comparison between inputDate and the end of the current day (endOfToday). When inputDate matched the end of today, the requirement was to display the time from inputDate instead of a predefined message.

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

to solve this issue we need to update this line of code

App/src/libs/DateUtils.ts

Lines 536 to 539 in 0575c56

	// If the date is equal to the end of today
	if (isSameDay(input, endOfToday)) {
	return translateLocal('statusPage.untilTomorrow');
	}

  if (isSameDay(input, endOfToday)) {
        // If inputDate is the end of today, format and return the current time
        const currentTimeFormatted = format(input, "hh:mm a");
        return `status expired at:${currentTimeFormatted}`;
      } else {
        // Handle other cases or return a default status message
        return translateLocal('statusPage.untilTomorrow');
      }

video:-https://drive.google.com/file/d/1nUm7BmV6ysaE-gV3jVDjBpo58zU5KYHo/view?usp=sharing

[DylanDylann]

From my point of view, we only display "until tomorrow" if the user selects today option

[tienifr]

Proposal

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

Status expiry time does not show correctly when hovering the user in the chat report

What is the root cause of that problem?

App/src/libs/DateUtils.ts

Lines 536 to 539 in 5832dba

	// If the date is equal to the end of today
	if (isSameDay(input, endOfToday)) {
	return translateLocal('statusPage.untilTomorrow');
	}

when we set a time on that day, this condition always return true because the end of day is 23:59:59 of that day

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

In the document, We don't specifically mention when it will be displayed until tomorrow

And let's see this line

If it’s a time on the same date, i’d say “Until HH:MM AM/PM”

when we set today option, the status will be cleared at 23:59:59 in that day. I suggest we should remove this code

App/src/libs/DateUtils.ts

Lines 536 to 539 in 5832dba

	// If the date is equal to the end of today
	if (isSameDay(input, endOfToday)) {
	return translateLocal('statusPage.untilTomorrow');
	}

What alternative solutions did you explore? (Optional)

@DylanDylann's opinion also make sense in this case

To do that we need to update the condition like that

if (isSameDay(input, endOfToday) && isSameSecond(input, endOfToday) && isSameMinute(input, endOfToday) && isSameHour(input, endOfToday)) { 
     return translateLocal('statusPage.untilTomorrow'); 
 } 

[tienifr]

@shawnborton @JmillsExpensify Could you help to confirm the expect in this case?

1. When set the clear time is "Today" option, should we display "Until tomorrow" or "Until 11:59 PM" on the tooltips. Please choose one of them
2. When set the clear time is "Custom time" 11:59 PM, we will display "Until 11:59 PM" on the tooltips. Is it right?

cc @DylanDylann

[shawnborton]

@tienifr for your first point, how does that relate to the bug at hand? It seems like the bug reported is that if you set a custom status to expire in 30 minutes, we say it will expire "tomorrow" rather than giving an exact time.

[tienifr]

This bug relate to my question because this bug is that tooltip display "Until tomorrow" when setting status to expire in 30 minutes

[melvin-bot]

Triggered auto assignment to @youssef-lr, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

@youssef-lr, @kadiealexander, @DylanDylann Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[kadiealexander]

@youssef-lr bump!

[melvin-bot]

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

[melvin-bot]

📣 @DylanDylann 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[youssef-lr]

Sounds good @DylanDylann , assigned @Krishna2323!

[melvin-bot]

📣 @Krishna2323 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[Krishna2323]

@DylanDylann, PR ready for review.

[Krishna2323]

@kadiealexander, PR deployed to production, this should be on HOLD for Payments on 2024-05-15.

[kadiealexander]

Payouts due:

• Contributor: $250 @Krishna2323
• Contributor+: $250 @DylanDylann

Upwork job is here.

[kadiealexander]

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:

• [@DylanDylann] The PR that introduced the bug has been identified. Link to the PR: DateUtils refactor, remove moment from the code, timezone fixes. #24446
• [@DylanDylann] 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: DateUtils refactor, remove moment from the code, timezone fixes. #24446 (comment)
• [@DylanDylann] 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: NA
• [@DylanDylann] Determine if we should create a regression test for this bug. Yes
• [@DylanDylann] 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. - [Payment due 2024-05-15][$250] Status expiry time does not show correctly when hovering the user in the chat report #40733 (comment)
• [@kadiealexander] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: https://github.com/Expensify/Expensify/issues/399765

[DylanDylann]

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:

[@DylanDylann] The PR that introduced the bug has been identified. Link to the PR: #24446
[@DylanDylann] 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: #24446 (comment)
[@DylanDylann] 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: NA
[@DylanDylann] Determine if we should create a regression test for this bug. Yes
[@DylanDylann] 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.

Regression Test Proposal

1. Open profile > Status > Clear after > Select Today and save
2. Open any chat report and hover over the status icon
3. Verify it tooltip shows (Until tomorrow)
4. Open profile > Status > Clear after > Custom > Time > Set 11:59PM and save.
5. Open any chat report and hover over the status icon
6. Verify it tooltip shows (Until 11:59PM)

Do we agree 👍 or 👎

[melvin-bot]

@youssef-lr, @kadiealexander, @Krishna2323, @DylanDylann Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!