momentjs/date-fns to dayjs

package.json

@@ -31,6 +31,7 @@
     "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",

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
-import 'date-fns';
+import 'dayjs';
 import { getIn } from 'formik';
 import styles from './Calendar.module.css';
 
@@ -31,7 +31,7 @@ export const Calendar = ({
   const [open, setOpen] = useState(false);
 
   const handleDateChange = (date: Date | null | string) => {
-    if (date) {
+    if (date) {      
       if (date.toString() !== 'Invalid Date') {
         setFieldValue(field.name, date);
       }

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 'dayjs';
 import { getIn } from 'formik';
 
 import styles from './DateTimePicker.module.css';
@@ -30,10 +30,11 @@ 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}>

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 { 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,16 +24,17 @@ 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);
   };
 

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,8 @@ 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 +42,7 @@ export const Timer = (props: TimerProps) => {
   let intervalID: any;
   useEffect(() => {
     intervalID = setInterval(() => {
-      setCurrentTime(moment(new Date()));
+      setCurrentTime(dayjs());
     }, 60000);
 
     return () => clearInterval(intervalID);
@@ -68,9 +69,10 @@ 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,7 @@ 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';
@@ -75,6 +75,7 @@ export const ConversationList = ({
     }
   }, [scrollHeight.data]);
 
+
   useEffect(() => {
     const contactsContainer: any = document.querySelector('.contactsContainer');
     if (contactsContainer) {
@@ -128,8 +129,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);
@@ -194,7 +194,6 @@ export const Consulting = ({ organizationId, setOpenDialog }: ConsultingProps) =
   };
 
   const orgOptions = organizationList.organizations;
-
   return (
     <div className={`${styles.Layout} ${organizationId ? styles.Edit : ''}`}>
       <FormLayout

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>

src/containers/Consulting/ConsultingList/ExportConsulting/ExportConsulting.tsx

@@ -8,7 +8,7 @@ import * as Yup from 'yup';
 
 import ExportIcon from 'assets/images/icons/Export/export.svg?react';
 import { useTranslation } from 'react-i18next';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { Calendar } from 'components/UI/Form/Calendar/Calendar';
 import { downloadFile } from 'common/utils';
 import { Button } from 'components/UI/Form/Button/Button';
@@ -19,7 +19,7 @@ export interface ExportConsultingPropTypes {
   setFilters: any;
 }
 
-const formatDate = (value: any) => moment(value).format('YYYY-MM-DD');
+const formatDate = (value: any) => dayjs(value).format('YYYY-MM-DD');
 
 export const ExportConsulting = ({ setFilters }: ExportConsultingPropTypes) => {
   const { data: organizationList } = useQuery(FILTER_ORGANIZATIONS, {
@@ -76,7 +76,7 @@ export const ExportConsulting = ({ setFilters }: ExportConsultingPropTypes) => {
     dateTo: Yup.string().when('dateFrom', ([dateFrom], schema: any) =>
       schema.test({
         test: (endDateValue: any) =>
-          !(dateFrom !== undefined && !moment(endDateValue).isAfter(dateFrom)),
+          !(dateFrom !== undefined && !dayjs(endDateValue).isAfter(dateFrom)),
         message: t('End date should be greater than the start date'),
       })
     ),

src/containers/Flow/FlowList/FlowList.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
 import { FormControl, MenuItem, Select } from '@mui/material';
@@ -40,13 +40,13 @@ const getName = (text: string, keywordsList: any, roles: any) => {
 
 const getDate = (date: string, fallback: string = '') => (
   <div className={styles.LastPublished}>
-    {date ? moment(date).format(DATE_TIME_FORMAT) : fallback}
+    {date ? dayjs(date).format(DATE_TIME_FORMAT) : fallback}
   </div>
 );
 
 const getLastPublished = (date: string, fallback: string = '') =>
   date ? (
-    <div className={styles.LastPublished}>{moment(date).format(DATE_TIME_FORMAT)}</div>
+    <div className={styles.LastPublished}>{dayjs(date).format(DATE_TIME_FORMAT)}</div>
   ) : (
     <div className={styles.LastPublishedFallback}>{fallback}</div>
   );