Send clearAfter as UTC time to the backend

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -106,7 +106,7 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
 
     const emojiCode = optionItem.status?.emojiCode ?? '';
     const statusText = optionItem.status?.text ?? '';
-    const statusClearAfterDate = optionItem.status?.clearAfter ?? '';
+    const statusClearAfterDate = DateUtils.formatUTCToLocal(optionItem.status?.clearAfter ?? '');
     const formattedDate = DateUtils.getStatusUntilDate(statusClearAfterDate);
     const statusContent = formattedDate ? `${statusText ? `${statusText} ` : ''}(${formattedDate})` : statusText;
     const report = ReportUtils.getReport(optionItem.reportID ?? '');

src/libs/DateUtils.ts

@@ -723,6 +723,30 @@ function formatWithUTCTimeZone(datetime: string, dateFormat: string = CONST.DATE
     return '';
 }
 
+/**
+ * Format the date from UTC to local timezone
+ * @param dateString
+ * @param dateFormat
+ * @returns
+ */
+
+function formatUTCToLocal(dateString: string, dateFormat = 'yyyy-MM-dd HH:mm:ss') {
+    if (dateString === '' || !dateString) {
+        return dateString;
+    }
+
+    const date = parse(dateString, dateFormat, new Date());
+    // Check if the date is valid
+    if (!isValid(date)) {
+        return '';
+    }
+
+    const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const utcDate = zonedTimeToUtc(date, 'UTC');
+    const localDate = zonedTimeToUtc(utcDate, localTimezone);
+    return tzFormat(localDate, dateFormat, {timeZone: localTimezone});
+}
+
 /**
  *
  * @param timezone
@@ -807,6 +831,7 @@ const DateUtils = {
     getMonthNames,
     getDaysOfWeek,
     formatWithUTCTimeZone,
+    formatUTCToLocal,
     getWeekStartsOn,
     getWeekEndsOn,
     isTimeAtLeastOneMinuteInFuture,

src/libs/actions/User.ts

@@ -20,6 +20,7 @@ import type {
     ValidateSecondaryLoginParams,
 } from '@libs/API/parameters';
 import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
+import DateUtils from '@libs/DateUtils';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
@@ -891,19 +892,26 @@ function updateTheme(theme: ValueOf<typeof CONST.THEME>) {
  * Sets a custom status
  */
 function updateCustomStatus(status: Status) {
+    const clearAfterInUtc = DateUtils.formatWithUTCTimeZone(status.clearAfter, 'yyyy-MM-dd HH:mm:ss');
+    const newStatus = {
+        text: status.text,
+        emojiCode: status.emojiCode,
+        clearAfter: clearAfterInUtc,
+    };
+
     const optimisticData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
             value: {
                 [currentUserAccountID]: {
-                    status,
+                    status: newStatus,
                 },
             },
         },
     ];
 
-    const parameters: UpdateStatusParams = {text: status.text, emojiCode: status.emojiCode, clearAfter: status.clearAfter};
+    const parameters: UpdateStatusParams = {text: status.text, emojiCode: status.emojiCode, clearAfter: clearAfterInUtc};
 
     API.write(WRITE_COMMANDS.UPDATE_STATUS, parameters, {
         optimisticData,

src/pages/home/report/ReportActionItemSingle.tsx

@@ -205,7 +205,8 @@ function ReportActionItemSingle({
         );
     };
     const hasEmojiStatus = !displayAllActors && status?.emojiCode;
-    const formattedDate = DateUtils.getStatusUntilDate(status?.clearAfter ?? '');
+    const statusClearAfter = DateUtils.formatUTCToLocal(status?.clearAfter ?? '');
+    const formattedDate = DateUtils.getStatusUntilDate(statusClearAfter);
     const statusText = status?.text ?? '';
     const statusTooltipText = formattedDate ? `${statusText ? `${statusText} ` : ''}(${formattedDate})` : statusText;
 

src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.js

@@ -84,7 +84,7 @@ const useValidateCustomDate = (data) => {
 function StatusClearAfterPage({currentUserPersonalDetails, customStatus}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const clearAfter = lodashGet(currentUserPersonalDetails, 'status.clearAfter', '');
+    const clearAfter = DateUtils.formatUTCToLocal(lodashGet(currentUserPersonalDetails, 'status.clearAfter', ''));
     const draftClearAfter = lodashGet(customStatus, 'clearAfter', '');
     const [draftPeriod, setDraftPeriod] = useState(getSelectedStatusType(draftClearAfter || clearAfter));
     const statusType = useMemo(

src/pages/settings/Profile/CustomStatus/StatusPage.js

@@ -48,7 +48,7 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
     const [brickRoadIndicator, setBrickRoadIndicator] = useState('');
     const currentUserEmojiCode = lodashGet(currentUserPersonalDetails, 'status.emojiCode', '');
     const currentUserStatusText = lodashGet(currentUserPersonalDetails, 'status.text', '');
-    const currentUserClearAfter = lodashGet(currentUserPersonalDetails, 'status.clearAfter', '');
+    const currentUserClearAfter = DateUtils.formatUTCToLocal(lodashGet(currentUserPersonalDetails, 'status.clearAfter', ''));
     const draftEmojiCode = lodashGet(draftStatus, 'emojiCode');
     const draftText = lodashGet(draftStatus, 'text');
     const draftClearAfter = lodashGet(draftStatus, 'clearAfter');