momentjs/date-fns to dayjs

package.json

@@ -11,7 +11,6 @@
     "@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",
     "@draft-js-plugins/editor": "^4.1.4",
     "@draft-js-plugins/mention": "^5.2.2",
     "@emoji-mart/data": "^1.1.2",
@@ -30,7 +29,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 +39,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,8 @@ 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), "hour", true) > 24;
 
 // connection retry attempt configuration
 export const CONNECTION_RECONNECT_ATTEMPTS = 5;

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

@@ -1,7 +1,7 @@
 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 'dayjs';
 import { getIn } from 'formik';
 import styles from './Calendar.module.css';
 
@@ -41,7 +41,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.tsx

@@ -1,6 +1,6 @@
 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';
 import { getIn } from 'formik';
 
 import styles from './DateTimePicker.module.css';
@@ -30,13 +30,14 @@ 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' ? 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}

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

@@ -1,11 +1,11 @@
 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,21 +24,22 @@ export const TimePicker = ({
   disabled = false,
   helperText,
 }: TimePickerProps) => {
-  moment.defaultFormat = 'Thh:mm:ss';
-  const timeValue = field.value ? moment(field.value, moment.defaultFormat).toDate() : null;
-  const [open, setOpen] = useState(false);
+  const timeValue = field.value
+    ? dayjs(`${dayjs().format('YYYY-MM-DD')}${field.value}`).toDate()
+    : 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 ? dayjs(time).format('THH:mm:ss') : null;
     setFieldValue(field.name, value);
   };
 
   return (
-    <LocalizationProvider dateAdapter={AdapterDateFns}>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
       <div className={styles.TimePicker} data-testid="time-picker">
         <Picker
           className={styles.Picker}

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 interface TimerProps {
 }
 
 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 @@ export const Timer = (props: TimerProps) => {
   let intervalID: any;
   useEffect(() => {
     intervalID = setInterval(() => {
-      setCurrentTime(moment(new Date()));
+      setCurrentTime(dayjs());
     }, 60000);
 
     return () => clearInterval(intervalID);
@@ -68,9 +68,9 @@ export const Timer = (props: TimerProps) => {
 
   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/ChatConversations.tsx

@@ -34,7 +34,6 @@ export const ChatConversations = ({ contactId }: ChatConversationsProps) => {
   const offset = useQuery(SEARCH_OFFSET);
   const client = useApolloClient();
   const { t } = useTranslation();
-
   // restore multi-search after conversation click
   useEffect(() => {
     if (offset.data && offset.data.search) {

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

src/containers/Chat/ChatMessages/ChatMessages.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState, useEffect } from 'react';
 import { useQuery, useMutation, useLazyQuery } from '@apollo/client';
 import { CircularProgress, Container } from '@mui/material';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { Navigate } from 'react-router-dom';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useTranslation } from 'react-i18next';
@@ -510,14 +510,14 @@ export const ChatMessages = ({ contactId, collectionId, startingHeight }: ChatMe
 
   const showDaySeparator = (currentDate: string, nextDate: string) => {
     // if it's last message and its date is greater than current date then show day separator
-    if (!nextDate && moment(currentDate).format('YYYY-MM-DD') < moment().format('YYYY-MM-DD')) {
+    if (!nextDate && dayjs(currentDate).format('YYYY-MM-DD') < dayjs().format('YYYY-MM-DD')) {
       return true;
     }
 
     // if the day is changed then show day separator
     if (
       nextDate &&
-      moment(currentDate).format('YYYY-MM-DD') > moment(nextDate).format('YYYY-MM-DD')
+      dayjs(currentDate).format('YYYY-MM-DD') > dayjs(nextDate).format('YYYY-MM-DD')
     ) {
       return true;
     }

src/containers/Consulting/Consulting.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import * as Yup from 'yup';
 import { useQuery } from '@apollo/client';
 import { useTranslation } from 'react-i18next';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 import { Input } from 'components/UI/Form/Input/Input';
 import { DateTimePicker } from 'components/UI/Form/DateTimePicker/DateTimePicker';
@@ -183,7 +183,7 @@ export const Consulting = ({ organizationId, setOpenDialog }: ConsultingProps) =
     }
 
     // Setting date to appropriate format
-    data.when = moment(when).toISOString();
+    data.when = dayjs(when).toISOString();
 
     if (organization) {
       data.clientId = Number(organization.id);

src/containers/Consulting/ConsultingList/ConsultingList.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { Dialog, DialogContent } from '@mui/material';
 import EditIcon from 'assets/images/icons/Edit.svg?react';
@@ -55,7 +55,7 @@ const ConsultingList = () => {
   );
 
   const getOtherColumn = (label: any, isDate: boolean = false) => {
-    const text = isDate ? moment(label).format('DD MMM YYYY') : label;
+    const text = isDate ? dayjs(label).format('DD MMM YYYY') : label;
     return (
       <div>
         <p className={styles.StatusText}>{text}</p>