[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

[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?

We should check for If the date is equal to the end of today first

App/src/libs/DateUtils.ts

Lines 536 to 544 in 0575c56

	// If the date is equal to the end of today
	if (isSameDay(input, endOfToday)) {
	return translateLocal('statusPage.untilTomorrow');
	}
	// If it's a time on the same date
	if (isSameDay(input, now)) {
	return translateLocal('statusPage.untilTime', {time: format(input, CONST.DATE.LOCAL_TIME_FORMAT)});
	}

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

We should switch positions of these functions like this

    // If it's a time on the same date
      if (isSameDay(input, now)) {
        return translateLocal('statusPage.untilTime', {time: format(input, CONST.DATE.LOCAL_TIME_FORMAT)});
    }

    // 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)

[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