fix: Bug: Date picker controls cause MFE error on Safari #2323

Author: Ahtesham Quraish

package-lock.json

@@ -80,7 +80,7 @@
     "moment-shortformat": "^2.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
-    "react-datepicker": "^4.13.0",
+    "react-datepicker": "^7.6.0",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-helmet": "^6.1.0",

package.json

@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react';
 import { useToggle } from '@openedx/paragon';
 
 import { COMMA_SEPARATED_DATE_FORMAT } from '../constants';
-import { convertToDateFromString } from '../utils';
 import { getCourseHandouts, getCourseUpdates } from './data/selectors';
 import { REQUEST_TYPES } from './constants';
 import {
@@ -56,7 +55,7 @@ const useCourseUpdates = ({ courseId }) => {
   };
 
   const handleUpdatesSubmit = (data) => {
-    const dateWithoutTimezone = convertToDateFromString(data.date);
+    const dateWithoutTimezone = data.date;
     const dataToSend = {
       ...data,
       date: moment(dateWithoutTimezone).format(COMMA_SEPARATED_DATE_FORMAT),

src/course-updates/hooks.jsx

@@ -13,8 +13,6 @@ import { Calendar as CalendarIcon, Error as ErrorIcon } from '@openedx/paragon/i
 import { Formik } from 'formik';
 
 import {
-  convertToStringFromDate,
-  convertToDateFromString,
   isValidDate,
 } from '../../utils';
 import { DATE_FORMAT, DEFAULT_EMPTY_WYSIWYG_VALUE } from '../../constants';
@@ -73,7 +71,7 @@ const UpdateForm = ({
                   <DatePicker
                     name="date"
                     data-testid="course-updates-datepicker"
-                    selected={isValidDate(values.date) ? convertToDateFromString(values.date) : ''}
+                    selected={isValidDate(values.date) ? values.date : ''}
                     dateFormat={DATE_FORMAT}
                     className={classNames('datepicker-custom-control', {
                       'datepicker-custom-control_isInvalid': !isValid,
@@ -85,7 +83,7 @@ const UpdateForm = ({
                       if (!isValidDate(value)) {
                         return;
                       }
-                      setFieldValue('date', convertToStringFromDate(value));
+                      setFieldValue('date', value);
                     }}
                   />
                 </div>

src/course-updates/update-form/UpdateForm.jsx

@@ -6,7 +6,7 @@ import { Form, Icon } from '@openedx/paragon';
 import { Calendar } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { convertToDateFromString, convertToStringFromDate, isValidDate } from '../../utils';
+import { isValidDate } from '../../utils';
 import { DATE_FORMAT, TIME_FORMAT } from '../../constants';
 import messages from './messages';
 
@@ -27,7 +27,7 @@ const DatepickerControl = ({
   onChange,
 }) => {
   const intl = useIntl();
-  const formattedDate = convertToDateFromString(value);
+  const formattedDate = value;
   const inputFormat = {
     [DATEPICKER_TYPES.date]: DATE_FORMAT,
     [DATEPICKER_TYPES.time]: TIME_FORMAT,
@@ -69,7 +69,7 @@ const DatepickerControl = ({
           showPopperArrow={false}
           onChange={(date) => {
             if (isValidDate(date)) {
-              onChange(convertToStringFromDate(date));
+              onChange(date);
             }
           }}
         />

src/generic/datepicker-control/DatepickerControl.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import { convertToStringFromDate } from '../../utils';
 import { DatepickerControl, DATEPICKER_TYPES } from '.';
 import messages from './messages';
 import { DATE_FORMAT } from '../../constants';
@@ -45,7 +44,7 @@ describe('<DatepickerControl />', () => {
     const input = getByPlaceholderText(DATE_FORMAT.toLocaleUpperCase());
     fireEvent.change(input, { target: { value: '06/16/2023' } });
     expect(onChangeMock).toHaveBeenCalledWith(
-      convertToStringFromDate('06/16/2023'),
+      new Date('2023-06-16T00:00:00.000Z'),
     );
   });
 });