momentjs/date-fns to dayjs

package.json

@@ -11,7 +11,7 @@
     "@appsignal/plugin-path-decorator": "^1.0.16",
     "@appsignal/plugin-window-events": "^1.0.20",
     "@appsignal/react": "^1.0.23",
-    "@date-io/date-fns": "^2.17.0",
+    "@date-io/dayjs": "^2.17.0",
     "@draft-js-plugins/editor": "^4.1.4",
     "@draft-js-plugins/mention": "^5.2.2",
     "@emoji-mart/data": "^1.1.2",
@@ -30,7 +30,7 @@
     "apollo-link-token-refresh": "^0.6.1",
     "axios": "^1.6.4",
     "buffer": "^6.0.3",
-    "date-fns": "2.30.0",
+    "dayjs": "^1.11.10",
     "draft-js": "^0.11.7",
     "emoji-mart": "^5.5.2",
     "formik": "^2.4.5",
@@ -40,7 +40,6 @@
     "i18next-browser-languagedetector": "^7.2.0",
     "interweave": "^13.1.0",
     "interweave-autolink": "^5.1.1",
-    "moment": "^2.30.1",
     "pino": "^8.17.2",
     "pino-logflare": "^0.4.2",
     "react": "^18.2.0",

src/common/constants.ts

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 import * as Yup from 'yup';
 
 export const SIDE_DRAWER_WIDTH = 233;
@@ -11,7 +11,7 @@ export const FLOW_STATUS_PUBLISHED = 'published';
 export const SIMULATOR_NUMBER_START = '9876543210';
 export const GUPSHUP_ENTERPRISE_SHORTCODE = 'gupshup_enterprise';
 export const VALID_URL_REGEX =
-  'https?://(www.)?[-a-zA-Z0-9@:%._+~#=]{2,256}.[a-z]{2,4}([-a-zA-Z0-9@:%_+.~#?&\/=]*)';
+  'https?://(www.)?[-a-zA-Z0-9@:%._+~#=]{2,256}.[a-z]{2,4}([-a-zA-Z0-9@:%_+.~#?&/=]*)';
 // to find variables in message
 export const pattern = /[^{}]+(?=})/g;
 
@@ -112,8 +112,7 @@ export const setVariables = (
   },
 });
 
-export const is24HourWindowOver = (time: any) =>
-  moment.duration(moment(new Date()).diff(moment(time))).asHours() > 24;
+export const is24HourWindowOver = (time: any) => dayjs().diff(dayjs(time), 'hours') > 24;
 
 // connection retry attempt configuration
 export const CONNECTION_RECONNECT_ATTEMPTS = 5;

src/components/UI/Form/Calendar/Calendar.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
-import 'date-fns';
 import { getIn } from 'formik';
 import styles from './Calendar.module.css';
 
@@ -17,7 +16,7 @@ export interface CalendarProps {
 }
 
 export const Calendar = ({
-  format = 'MM/dd/yyyy',
+  format = 'MM/DD/YYYY',
   field,
   disabled = false,
   form: { setFieldValue, errors, touched },
@@ -41,7 +40,7 @@ export const Calendar = ({
   };
 
   return (
-    <LocalizationProvider dateAdapter={AdapterDateFns}>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
       <div className={styles.Calendar} data-testid="date-picker-inline">
         <DatePicker
           label={placeholder}

src/components/UI/Form/DateTimePicker/DateTimePicker.test.tsx

@@ -1,6 +1,8 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 
 import { DateTimePicker } from './DateTimePicker';
+import dayjs from 'dayjs';
+import { userEvent } from '@testing-library/user-event';
 
 describe('<DateTimePicker />', () => {
   const onChangeMock = vi.fn();
@@ -25,11 +27,14 @@ describe('<DateTimePicker />', () => {
   it('test date change event', async () => {
     render(wrapper);
     const input = screen.getByRole('textbox');
-    fireEvent.change(input, { target: { value: '14/05/2021 10:50 AM' } });
-    expect(input).toHaveValue('14/05/2021 10:50 AM');
+    userEvent.type(input, '14/05/2021 09:50 am');
+
+    await waitFor(() => {
+      expect(input).toHaveValue('14/05/2021 09:50 am');
+    });
 
-    expect(setFieldMock).toBeCalled();
-    expect(onChangeMock).toBeCalled();
+    expect(setFieldMock).toHaveBeenCalled();
+    expect(onChangeMock).toHaveBeenCalled();
   });
 
   it('test date with errors', async () => {
@@ -43,7 +48,7 @@ describe('<DateTimePicker />', () => {
 
   it('test date default value', async () => {
     const props = getProps();
-    props.field.value = new Date();
+    props.field.value = dayjs();
     render(<DateTimePicker {...props} />);
     const input = screen.getByRole('textbox');
     expect(input).toHaveValue();
@@ -55,6 +60,6 @@ describe('<DateTimePicker />', () => {
     render(<DateTimePicker {...props} />);
     const input = screen.getByRole('textbox');
     fireEvent.change(input, { target: { value: '14/05/2021 10:50 AM' } });
-    expect(onChangeMock).toBeCalledTimes(1);
+    expect(onChangeMock).toHaveBeenCalled();
   });
 });

src/components/UI/Form/DateTimePicker/DateTimePicker.tsx

@@ -1,9 +1,11 @@
 import { LocalizationProvider, DateTimePicker as Picker } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import 'date-fns';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import { getIn } from 'formik';
 
 import styles from './DateTimePicker.module.css';
+dayjs.extend(utc);
 
 export interface DateTimePickerProps {
   variant?: any;
@@ -17,7 +19,7 @@ export interface DateTimePickerProps {
 }
 
 export const DateTimePicker = ({
-  format = 'dd/MM/yyyy hh:mm a',
+  format = 'DD/MM/YYYY hh:mm a',
   field,
   form: { setFieldValue, errors, touched },
   placeholder,
@@ -30,17 +32,18 @@ export const DateTimePicker = ({
   const dateValue = field.value ? field.value : null;
 
   const handleDateChange = (date: Date | null | string) => {
-    const value = date && date.toString() !== 'Invalid Date' ? date : null;
+    const value = date && date.toString() !== 'Invalid Date' ? dayjs(date) : null;
     setFieldValue(field.name, value);
     if (onChange) onChange(value);
   };
 
   return (
-    <LocalizationProvider dateAdapter={AdapterDateFns}>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
       <div className={styles.DateTimePicker} data-testid="date-picker-inline">
         <Picker
           className={styles.Text}
           label={placeholder}
+          timezone="system"
           format={format}
           value={dateValue}
           slotProps={{

src/components/UI/Form/TimePicker/TimePicker.test.tsx

@@ -41,7 +41,7 @@ describe('<TimePicker />', () => {
   it('test time change event', async () => {
     render(wrapper);
     const input = screen.getByRole('textbox');
-    fireEvent.change(input, { target: { value: '09:00 am' } });
+    fireEvent.change(input, { target: { value: '09:00 AM' } });
     expect(cleanText(input.getAttribute('value'))).toBe('09:00 AM');
   });
 

src/components/UI/Form/TimePicker/TimePicker.tsx

@@ -1,11 +1,12 @@
 import { useState } from 'react';
-import 'date-fns';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider, TimePicker as Picker } from '@mui/x-date-pickers';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { getIn } from 'formik';
+import utc from 'dayjs/plugin/utc';
 
 import styles from './TimePicker.module.css';
+dayjs.extend(utc);
 
 export interface TimePickerProps {
   variant?: any;
@@ -24,29 +25,28 @@ export const TimePicker = ({
   disabled = false,
   helperText,
 }: TimePickerProps) => {
-  moment.defaultFormat = 'Thh:mm:ss';
-  const timeValue = field.value ? moment(field.value, moment.defaultFormat).toDate() : null;
+  const timeValue = field.value ? field.value : null;
   const [open, setOpen] = useState(false);
 
   const errorText = getIn(errors, field.name);
   const touchedVal = getIn(touched, field.name);
   const hasError = touchedVal && errorText !== undefined;
 
   const handleDateChange = (time: Date | null) => {
-    const value = time ? moment(time).format('THH:mm:ss') : null;
+    const value = time ? time : null;
     setFieldValue(field.name, value);
   };
 
   return (
-    <LocalizationProvider dateAdapter={AdapterDateFns}>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
       <div className={styles.TimePicker} data-testid="time-picker">
         <Picker
           className={styles.Picker}
           label={placeholder}
           open={open}
+          value={timeValue}
           onClose={() => setOpen(false)}
           disabled={disabled}
-          value={timeValue}
           onChange={handleDateChange}
           slotProps={{
             textField: {

src/components/UI/Timer/Timer.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
-import moment from 'moment';
 import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
 
 import ContactOptOutIcon from 'assets/images/icons/ContactOptOut.svg?react';
 import Tooltip from 'components/UI/Tooltip/Tooltip';
@@ -13,7 +13,7 @@
 }
 
 export const Timer = (props: TimerProps) => {
-  const [currentTime, setCurrentTime] = useState(moment(new Date()));
+  const [currentTime, setCurrentTime] = useState(dayjs());
   const { t } = useTranslation();
 
   const link = (
@@ -41,7 +41,7 @@
   let intervalID: any;
   useEffect(() => {
     intervalID = setInterval(() => {
-      setCurrentTime(moment(new Date()));
+      setCurrentTime(dayjs());
     }, 60000);
 
     return () => clearInterval(intervalID);
@@ -68,9 +68,9 @@
 
   let hours: string | number = 0;
   if (time) {
-    const lastMessageTime = moment(time);
-    const duration = moment.duration(currentTime.diff(lastMessageTime));
-    hours = Math.floor(duration.asHours());
+    const lastMessageTime = dayjs(time);
+    const duration = currentTime.diff(lastMessageTime, "hour")
+    hours = Math.floor(duration);
     if (hours < 0) hours = 0;
     hours = hours > 24 ? 0 : 24 - hours;
   }

src/components/simulator/Simulator.tsx

@@ -13,7 +13,7 @@ import VideocamIcon from '@mui/icons-material/Videocam';
 import CameraAltIcon from '@mui/icons-material/CameraAlt';
 import ClearIcon from '@mui/icons-material/Clear';
 import axios from 'axios';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { v4 as uuidv4 } from 'uuid';
 import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
 
@@ -104,7 +104,7 @@ const getStyleForDirection = (
 const TimeComponent = ({ direction, insertedAt }: any) => (
   <>
     <span className={direction === 'received' ? styles.TimeSent : styles.TimeReceived}>
-      {moment(insertedAt).format(TIME_FORMAT)}
+      {dayjs(insertedAt).format(TIME_FORMAT)}
       {direction === 'send' && <DoneAllIcon sx={{ fontSize: 10, ml: '2px' }} />}
     </span>
   </>

src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render } from '@testing-library/react';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { MockedProvider } from '@apollo/client/testing';
 import { MemoryRouter } from 'react-router-dom';
 
@@ -64,7 +64,7 @@ test('it should render the message content correctly', () => {
 
 test('it should render the message date correctly', () => {
   const { getByTestId } = render(wrapperContainer(defaultProps));
-  expect(getByTestId('date')).toHaveTextContent(moment(insertedAt).format(DATE_FORMAT));
+  expect(getByTestId('date')).toHaveTextContent(dayjs(insertedAt).format(DATE_FORMAT));
 });
 
 test('it should call the callback function on click action', () => {

src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx

@@ -1,6 +1,6 @@
 import { ListItemButton } from '@mui/material';
 import { Link } from 'react-router-dom';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useApolloClient, useMutation } from '@apollo/client';
 
 import { COMPACT_MESSAGE_LENGTH, DATE_FORMAT } from 'common/constants';
@@ -233,7 +233,7 @@ const ChatConversation = ({
           {isTextType && highlightSearch ? BoldedText(body, highlightSearch) : displayMSG}
         </div>
         <div className={styles.MessageDate} data-testid="date">
-          {moment(lastMessage.insertedAt).format(DATE_FORMAT)}
+          {dayjs(lastMessage.insertedAt).format(DATE_FORMAT)}
         </div>
       </div>
     </ListItemButton>

src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { List, Container, CircularProgress, Typography } from '@mui/material';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import { useApolloClient, useLazyQuery, useQuery } from '@apollo/client';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 
 import Loading from 'components/UI/Layout/Loading/Loading';
@@ -128,8 +128,8 @@ export const ConversationList = ({
         filter.includeLabels = params.includeLabels.map((obj: any) => obj.id);
       if (params.dateFrom) {
         filter.dateRange = {
-          from: moment(params.dateFrom).format('YYYY-MM-DD'),
-          to: moment(params.dateTo).format('YYYY-MM-DD'),
+          from: dayjs(params.dateFrom).format('YYYY-MM-DD'),
+          to: dayjs(params.dateTo).format('YYYY-MM-DD'),
         };
       }
     }

src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.test.tsx

@@ -1,5 +1,5 @@
 import { render, fireEvent, waitFor, screen } from '@testing-library/react';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { MockedProvider } from '@apollo/client/testing';
 
 import { TIME_FORMAT } from 'common/constants';
@@ -84,7 +84,7 @@ describe('<ChatMessage />', () => {
 
   test('it should render the message date  correctly', () => {
     const { getByTestId } = render(chatMessageText);
-    expect(getByTestId('date')).toHaveTextContent(moment(insertedAt).format(TIME_FORMAT));
+    expect(getByTestId('date')).toHaveTextContent(dayjs(insertedAt).format(TIME_FORMAT));
   });
 
   test('it should render "Other" class for the content', () => {

src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { Button, Popper, Fade, Paper } from '@mui/material';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 
 import LabelIcon from 'assets/images/icons/Label/Filled.svg?react';
@@ -110,7 +110,7 @@ export const ChatMessage = ({
   let messageDetails = styles.MessageDetails;
   const messageError = errors ? parseTextMethod(errors) : {};
   let messageErrorStatus: any = false;
-  let tooltipTitle: any = moment(insertedAt).format(DATE_FORMAT);
+  let tooltipTitle: any = dayjs(insertedAt).format(DATE_FORMAT);
 
   // Check if the message has an error after sending the message.
   if (Object.prototype.hasOwnProperty.call(messageError, 'payload')) {
@@ -206,9 +206,9 @@ export const ChatMessage = ({
   const sendByLabel = !isSender && sendBy;
   let messageFooter;
   if (sendByLabel) {
-    messageFooter = `${sendBy} | ${moment(insertedAt).format(TIME_FORMAT)}`;
+    messageFooter = `${sendBy} | ${dayjs(insertedAt).format(TIME_FORMAT)}`;
   } else {
-    messageFooter = moment(insertedAt).format(TIME_FORMAT);
+    messageFooter = dayjs(insertedAt).format(TIME_FORMAT);
   }
 
   const dateAndSendBy = messageFooter && (
@@ -222,7 +222,7 @@ export const ChatMessage = ({
   if (daySeparator) {
     daySeparatorContent = (
       <div className={styles.DaySeparator} data-testid="daySeparator">
-        <p className={styles.DaySeparatorContent}>{moment(insertedAt).format(DATE_FORMAT)}</p>
+        <p className={styles.DaySeparatorContent}>{dayjs(insertedAt).format(DATE_FORMAT)}</p>
       </div>
     );
   }
@@ -296,7 +296,7 @@ export const ChatMessage = ({
         id={`search${messageNumber}`}
       >
         {contextMessage ? (
-          <Tooltip title={moment(contextMessage.insertedAt).format(DATE_FORMAT)} placement="right">
+          <Tooltip title={dayjs(contextMessage.insertedAt).format(DATE_FORMAT)} placement="right">
             <div
               className={styles.ReplyMessage}
               onClick={() => jumpToMessage(contextMessage.messageNumber)}