From 97708880b0558f2dbf6401c2f7f1f8a35b0fb1aa Mon Sep 17 00:00:00 2001 From: akanshaa19 Date: Fri, 5 Jan 2024 00:16:45 +0530 Subject: [PATCH 01/17] momentjs/date-fns to dayjs --- package.json | 1 + src/components/UI/Form/Calendar/Calendar.tsx | 4 +-- .../UI/Form/DateTimePicker/DateTimePicker.tsx | 5 ++-- .../UI/Form/TimePicker/TimePicker.tsx | 15 ++++++----- src/components/UI/Timer/Timer.tsx | 14 +++++----- src/components/simulator/Simulator.tsx | 4 +-- .../ChatConversation.test.tsx | 4 +-- .../ChatConversation/ChatConversation.tsx | 4 +-- .../ChatConversations/ChatConversations.tsx | 2 +- .../ConversationList/ConversationList.tsx | 7 ++--- .../ChatMessage/ChatMessage.test.tsx | 4 +-- .../ChatMessages/ChatMessage/ChatMessage.tsx | 12 ++++----- .../Chat/ChatMessages/ChatMessages.tsx | 6 ++--- src/containers/Consulting/Consulting.tsx | 5 ++-- .../ConsultingList/ConsultingList.tsx | 4 +-- .../ExportConsulting/ExportConsulting.tsx | 6 ++--- src/containers/Flow/FlowList/FlowList.tsx | 6 ++--- src/containers/LastLogin/LastLogin.tsx | 4 +-- src/containers/List/List.tsx | 2 +- .../NotificationList/NotificationList.tsx | 4 +-- .../OrganizationList/OrganizationList.tsx | 4 +-- .../Contact/ContactHistory/ContactHistory.tsx | 4 +-- .../Profile/Contact/ContactProfile.tsx | 6 ++--- src/containers/Search/Search.tsx | 10 +++---- .../OrganizationFlows/OrganisationFlows.tsx | 2 ++ .../SheetIntegrationList.tsx | 4 +-- src/containers/Template/List/Template.tsx | 4 +-- src/containers/Ticket/Ticket.tsx | 6 ++--- .../TicketList/ExportTicket/ExportTicket.tsx | 6 ++--- .../Ticket/TicketList/TicketList.tsx | 4 +-- src/containers/Trigger/Trigger.tsx | 26 ++++++++++--------- .../Trigger/TriggerList/TriggerList.tsx | 11 ++++---- .../WebhookLogsList/WebhookLogsList.tsx | 4 +-- yarn.lock | 5 ++++ 34 files changed, 113 insertions(+), 96 deletions(-) diff --git a/package.json b/package.json index 2a0e91ed64..37fff5dfad 100644 --- a/package.json +++ b/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", diff --git a/src/components/UI/Form/Calendar/Calendar.tsx b/src/components/UI/Form/Calendar/Calendar.tsx index 7b5ef6b833..0d8f1af394 100644 --- a/src/components/UI/Form/Calendar/Calendar.tsx +++ b/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); } diff --git a/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx b/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx index f613d872d4..526e982d1c 100644 --- a/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx +++ b/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 ( diff --git a/src/components/UI/Form/TimePicker/TimePicker.tsx b/src/components/UI/Form/TimePicker/TimePicker.tsx index c795fdf7ca..0cbf13132d 100644 --- a/src/components/UI/Form/TimePicker/TimePicker.tsx +++ b/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); }; diff --git a/src/components/UI/Timer/Timer.tsx b/src/components/UI/Timer/Timer.tsx index f3569adc8c..5fe40a3679 100644 --- a/src/components/UI/Timer/Timer.tsx +++ b/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; } diff --git a/src/components/simulator/Simulator.tsx b/src/components/simulator/Simulator.tsx index 67d3a360ac..685c8a6cc0 100644 --- a/src/components/simulator/Simulator.tsx +++ b/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) => ( <> - {moment(insertedAt).format(TIME_FORMAT)} + {dayjs(insertedAt).format(TIME_FORMAT)} {direction === 'send' && } diff --git a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.test.tsx b/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.test.tsx index bcfe7c4faf..86970a044a 100644 --- a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.test.tsx +++ b/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', () => { diff --git a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx b/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx index a3280443c3..cb600ebaa7 100644 --- a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx +++ b/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}
- {moment(lastMessage.insertedAt).format(DATE_FORMAT)} + {dayjs(lastMessage.insertedAt).format(DATE_FORMAT)}
diff --git a/src/containers/Chat/ChatConversations/ChatConversations.tsx b/src/containers/Chat/ChatConversations/ChatConversations.tsx index e7c207c1f8..21eccc2710 100644 --- a/src/containers/Chat/ChatConversations/ChatConversations.tsx +++ b/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) { diff --git a/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx b/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx index 1e26c1d489..f8b24a666c 100644 --- a/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx +++ b/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'), }; } } diff --git a/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.test.tsx b/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.test.tsx index 73109f606b..a463263502 100644 --- a/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.test.tsx +++ b/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('', () => { 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', () => { diff --git a/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx b/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx index cc5b8aebc8..e724994324 100644 --- a/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx +++ b/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 = (
-

{moment(insertedAt).format(DATE_FORMAT)}

+

{dayjs(insertedAt).format(DATE_FORMAT)}

); } @@ -296,7 +296,7 @@ export const ChatMessage = ({ id={`search${messageNumber}`} > {contextMessage ? ( - +
jumpToMessage(contextMessage.messageNumber)} diff --git a/src/containers/Chat/ChatMessages/ChatMessages.tsx b/src/containers/Chat/ChatMessages/ChatMessages.tsx index ff9be51d70..69198b645f 100644 --- a/src/containers/Chat/ChatMessages/ChatMessages.tsx +++ b/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; } diff --git a/src/containers/Consulting/Consulting.tsx b/src/containers/Consulting/Consulting.tsx index 1c8a60bb00..e2d0b21d53 100644 --- a/src/containers/Consulting/Consulting.tsx +++ b/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,6 +194,7 @@ export const Consulting = ({ organizationId, setOpenDialog }: ConsultingProps) = }; const orgOptions = organizationList.organizations; + console.log(orgOptions) return (
diff --git a/src/containers/Consulting/ConsultingList/ConsultingList.tsx b/src/containers/Consulting/ConsultingList/ConsultingList.tsx index 4eff38e018..52a6687336 100644 --- a/src/containers/Consulting/ConsultingList/ConsultingList.tsx +++ b/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 (

{text}

diff --git a/src/containers/Consulting/ConsultingList/ExportConsulting/ExportConsulting.tsx b/src/containers/Consulting/ConsultingList/ExportConsulting/ExportConsulting.tsx index 725ebd46ea..83a44437f6 100644 --- a/src/containers/Consulting/ConsultingList/ExportConsulting/ExportConsulting.tsx +++ b/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'), }) ), diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx index 8531a227a3..bd13e11d56 100644 --- a/src/containers/Flow/FlowList/FlowList.tsx +++ b/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 = '') => (
- {date ? moment(date).format(DATE_TIME_FORMAT) : fallback} + {date ? dayjs(date).format(DATE_TIME_FORMAT) : fallback}
); const getLastPublished = (date: string, fallback: string = '') => date ? ( -
{moment(date).format(DATE_TIME_FORMAT)}
+
{dayjs(date).format(DATE_TIME_FORMAT)}
) : (
{fallback}
); diff --git a/src/containers/LastLogin/LastLogin.tsx b/src/containers/LastLogin/LastLogin.tsx index cbf5eef348..8ce7219f3e 100644 --- a/src/containers/LastLogin/LastLogin.tsx +++ b/src/containers/LastLogin/LastLogin.tsx @@ -1,4 +1,4 @@ -import moment from 'moment'; +import dayjs from 'dayjs'; import { useTranslation } from 'react-i18next'; import { getAuthSession } from 'services/AuthService'; @@ -20,7 +20,7 @@ export const LastLogin = ({ drawerOpen }: LastLoginProps) => { provider === GUPSHUP_ENTERPRISE_SHORTCODE ? styles.LastLoginEnterprise : styles.LastLogin; return drawerOpen ? (
- {t('Last login')}: {moment(lastLogin).format(DATE_TIME_FORMAT)} + {t('Last login')}: {dayjs(lastLogin).format(DATE_TIME_FORMAT)}
) : null; }; diff --git a/src/containers/List/List.tsx b/src/containers/List/List.tsx index 10658047f3..86d8534d10 100644 --- a/src/containers/List/List.tsx +++ b/src/containers/List/List.tsx @@ -493,7 +493,7 @@ export const List = ({ ); } return null; - } + } function formatList(listItems: Array) { return listItems.map(({ ...listItemObj }) => { diff --git a/src/containers/NotificationList/NotificationList.tsx b/src/containers/NotificationList/NotificationList.tsx index 73059b85ad..a981f52c81 100644 --- a/src/containers/NotificationList/NotificationList.tsx +++ b/src/containers/NotificationList/NotificationList.tsx @@ -3,7 +3,7 @@ import { Popover, FormControlLabel, RadioGroup, Radio } from '@mui/material'; import { useNavigate } from 'react-router-dom'; import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import { useApolloClient, useMutation } from '@apollo/client'; -import moment from 'moment'; +import dayjs from 'dayjs'; import { useTranslation } from 'react-i18next'; import NotificationIcon from 'assets/images/icons/Notification/Notification-dark-icon.svg?react'; @@ -20,7 +20,7 @@ import styles from './NotificationList.module.css'; const getDot = (isRead: boolean) =>
{!isRead ?
: null}
; const getTime = (time: string) => ( -
{moment(time).format('DD-MM-YYYY hh:mm')}
+
{dayjs(time).format('DD-MM-YYYY hh:mm')}
); const getText = (text: string) =>
{text}
; diff --git a/src/containers/OrganizationList/OrganizationList.tsx b/src/containers/OrganizationList/OrganizationList.tsx index a973995d21..e834bb8ca0 100644 --- a/src/containers/OrganizationList/OrganizationList.tsx +++ b/src/containers/OrganizationList/OrganizationList.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; -import moment from 'moment'; +import dayjs from 'dayjs'; import { OutlinedInput } from '@mui/material'; import { useMutation } from '@apollo/client'; @@ -54,7 +54,7 @@ export const OrganizationList = ({

{label}
- {moment(insertedAt).format('DD MMM YYYY')} + {dayjs(insertedAt).format('DD MMM YYYY')}

); diff --git a/src/containers/Profile/Contact/ContactHistory/ContactHistory.tsx b/src/containers/Profile/Contact/ContactHistory/ContactHistory.tsx index c764dfaef4..21de5745a2 100644 --- a/src/containers/Profile/Contact/ContactHistory/ContactHistory.tsx +++ b/src/containers/Profile/Contact/ContactHistory/ContactHistory.tsx @@ -1,5 +1,5 @@ import { useQuery } from '@apollo/client'; -import moment from 'moment'; +import dayjs from 'dayjs'; import { useTranslation } from 'react-i18next'; import { getOrganizationServices } from 'services/AuthService'; import { Button } from 'components/UI/Form/Button/Button'; @@ -139,7 +139,7 @@ export const ContactHistory = ({ contactId, profileId }: ContactHistoryProps) => return (
{label}
-
{moment(insertedAt).format(DATE_TIME_FORMAT)}
+
{dayjs(insertedAt).format(DATE_TIME_FORMAT)}
); }); diff --git a/src/containers/Profile/Contact/ContactProfile.tsx b/src/containers/Profile/Contact/ContactProfile.tsx index b70078d423..1bc568164c 100644 --- a/src/containers/Profile/Contact/ContactProfile.tsx +++ b/src/containers/Profile/Contact/ContactProfile.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react'; import { useQuery } from '@apollo/client'; -import moment from 'moment'; +import dayjs from 'dayjs'; import { useParams } from 'react-router-dom'; import { getOrganizationServices } from 'services/AuthService'; import { FormControl, FormControlLabel, Radio, RadioGroup } from '@mui/material'; @@ -85,14 +85,14 @@ export const ContactProfile = () => { let optinMethod = ''; if (contactData.optinMethod) { - optinMethod = `via ${contactData.optinMethod} on ${moment(contactData.optinTime).format( + optinMethod = `via ${contactData.optinMethod} on ${dayjs(contactData.optinTime).format( DATE_TIME_FORMAT )}`; } let optoutMethod = ''; if (contactData.optoutMethod) { - optoutMethod = `via ${contactData.optoutMethod} on ${moment(contactData.optoutTime).format( + optoutMethod = `via ${contactData.optoutMethod} on ${dayjs(contactData.optoutTime).format( DATE_TIME_FORMAT )}`; } diff --git a/src/containers/Search/Search.tsx b/src/containers/Search/Search.tsx index 121c787f5a..619efdab31 100644 --- a/src/containers/Search/Search.tsx +++ b/src/containers/Search/Search.tsx @@ -1,7 +1,7 @@ import { useState, useEffect } from 'react'; import * as Yup from 'yup'; import { useQuery } from '@apollo/client'; -import moment from 'moment'; +import dayjs from 'dayjs'; import { Typography } from '@mui/material'; import { useTranslation } from 'react-i18next'; @@ -68,8 +68,8 @@ const getPayload = (payload: any) => { if (!useExpression && dateFrom && dateFrom !== 'Invalid date') { const dateRange = { dateRange: { - to: moment(dateTo).format('yyyy-MM-DD'), - from: moment(dateFrom).format('yyyy-MM-DD'), + to: dayjs(dateTo).format('yyyy-MM-DD'), + from: dayjs(dateFrom).format('yyyy-MM-DD'), }, }; args.filter = Object.assign(args.filter, dateRange); @@ -236,8 +236,8 @@ export const Search = ({ type, search, searchId, ...props }: SearchProps) => { if (props.searchParam.dateFrom && props.searchParam.dateFrom !== 'Invalid date') { const dateRange = { dateRange: { - to: moment(props.searchParam.dateTo).format('yyyy-MM-DD'), - from: moment(props.searchParam.dateFrom).format('yyyy-MM-DD'), + to: dayjs(props.searchParam.dateTo).format('yyyy-MM-DD'), + from: dayjs(props.searchParam.dateFrom).format('yyyy-MM-DD'), }, }; args.filter = Object.assign(args.filter, dateRange); diff --git a/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx b/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx index 83a3fe0f78..5d5340832b 100644 --- a/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx +++ b/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx @@ -69,6 +69,8 @@ export const OrganisationFlows = () => { }), fetchPolicy: 'network-only', // set for now, need to check cache issue }); + console.log("Sdfc"); + const [getOrg, { data: orgData }] = useLazyQuery(GET_ORGANIZATION); diff --git a/src/containers/SheetIntegration/SheetIntegrationList/SheetIntegrationList.tsx b/src/containers/SheetIntegration/SheetIntegrationList/SheetIntegrationList.tsx index d268160706..735064473b 100644 --- a/src/containers/SheetIntegration/SheetIntegrationList/SheetIntegrationList.tsx +++ b/src/containers/SheetIntegration/SheetIntegrationList/SheetIntegrationList.tsx @@ -8,7 +8,7 @@ import { DELETE_SHEET, SYNC_SHEET } from 'graphql/mutations/Sheet'; import { setNotification } from 'common/notification'; import { useMutation } from '@apollo/client'; import { List } from 'containers/List/List'; -import moment from 'moment'; +import dayjs from 'dayjs'; import { DATE_TIME_FORMAT } from 'common/constants'; import { DialogBox } from 'components/UI/DialogBox/DialogBox'; import styles from './SheetIntegrationList.module.css'; @@ -37,7 +37,7 @@ const getName = (text: string, sheetDataCount: string, type: SheetTypes) => ( ); const getLastSyncedAt = (date: string, fallback: string = '') => (
- {date ? moment(date).format(DATE_TIME_FORMAT) : fallback} + {date ? dayjs(date).format(DATE_TIME_FORMAT) : fallback}
); diff --git a/src/containers/Template/List/Template.tsx b/src/containers/Template/List/Template.tsx index cf3df953c1..40ee97a85c 100644 --- a/src/containers/Template/List/Template.tsx +++ b/src/containers/Template/List/Template.tsx @@ -1,6 +1,6 @@ import { useContext, useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import moment from 'moment'; +import dayjs from 'dayjs'; import { useTranslation } from 'react-i18next'; import { Checkbox, FormControlLabel } from '@mui/material'; import { useMutation, useQuery } from '@apollo/client'; @@ -41,7 +41,7 @@ const getBody = (text: string) =>

{WhatsAppToJsx const getReason = (reason: string) =>

{reason}

; const getUpdatedAt = (date: string) => ( -
{moment(date).format(DATE_TIME_FORMAT)}
+
{dayjs(date).format(DATE_TIME_FORMAT)}
); const getTranslations = (language: any, data: string) => { diff --git a/src/containers/Ticket/Ticket.tsx b/src/containers/Ticket/Ticket.tsx index 8e807dcaa5..beac88edad 100644 --- a/src/containers/Ticket/Ticket.tsx +++ b/src/containers/Ticket/Ticket.tsx @@ -10,7 +10,7 @@ import { UPDATE_TICKET } from 'graphql/mutations/Ticket'; import styles from './Ticket.module.css'; import { Dropdown } from 'components/UI/Form/Dropdown/Dropdown'; -import moment from 'moment'; +import dayjs from 'dayjs'; import { useQuery } from '@apollo/client'; import { GET_USERS } from 'graphql/queries/User'; import { setVariables } from 'common/constants'; @@ -32,11 +32,11 @@ const TicketDetails = ({ form }: any) => {

Opened: - {moment(values.insertedAt).format('MMMM DD, YYYY, [at] HH:mm:ss')} + {dayjs(values.insertedAt).format('MMMM DD, YYYY, [at] HH:mm:ss')}

Last updated: - {moment(values.updatedAt).format('MMMM DD, YYYY, [at] HH:mm:ss')} + {dayjs(values.updatedAt).format('MMMM DD, YYYY, [at] HH:mm:ss')}

); diff --git a/src/containers/Ticket/TicketList/ExportTicket/ExportTicket.tsx b/src/containers/Ticket/TicketList/ExportTicket/ExportTicket.tsx index 9a8b81130e..00b612b3ce 100644 --- a/src/containers/Ticket/TicketList/ExportTicket/ExportTicket.tsx +++ b/src/containers/Ticket/TicketList/ExportTicket/ExportTicket.tsx @@ -3,7 +3,7 @@ import { Field, Form, Formik } from 'formik'; import * as Yup from 'yup'; 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'; @@ -15,7 +15,7 @@ export interface ExportTicketPropTypes { setShowExportDialog: any; } -const formatDate = (value: any) => moment(value).format('YYYY-MM-DD'); +const formatDate = (value: any) => dayjs(value).format('YYYY-MM-DD'); export const ExportTicket = ({ setShowExportDialog }: ExportTicketPropTypes) => { const { t } = useTranslation(); @@ -48,7 +48,7 @@ export const ExportTicket = ({ setShowExportDialog }: ExportTicketPropTypes) => endDate: Yup.string().when('startDate', ([startDate], schema: any) => schema.test({ test: (endDateValue: any) => - !(startDate !== undefined && !moment(endDateValue).isAfter(startDate)), + !(startDate !== undefined && !dayjs(endDateValue).isAfter(startDate)), message: t('End date should be greater than the start date'), }) ), diff --git a/src/containers/Ticket/TicketList/TicketList.tsx b/src/containers/Ticket/TicketList/TicketList.tsx index 7a9b38c6da..9f622fda76 100644 --- a/src/containers/Ticket/TicketList/TicketList.tsx +++ b/src/containers/Ticket/TicketList/TicketList.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Dialog, DialogContent, FormControlLabel, Radio, RadioGroup } from '@mui/material'; import { SupportAgent } from '@mui/icons-material'; -import moment from 'moment'; +import dayjs from 'dayjs'; import EditIcon from 'assets/images/icons/Edit.svg?react'; import ExportIcon from 'assets/images/icons/Flow/Export.svg?react'; @@ -23,7 +23,7 @@ const getBody = (body: any) =>
{body}
; const getTopic = (topic: any) =>
{topic}
; const getInsertedAt = (insertedAt: string) => ( -
{moment(insertedAt).format('DD-MM-YYYY hh:mm')}
+
{dayjs(insertedAt).format('DD-MM-YYYY hh:mm')}
); const getUser = (user: any) =>
{user?.name}
; diff --git a/src/containers/Trigger/Trigger.tsx b/src/containers/Trigger/Trigger.tsx index 3149a7a973..622c9fc983 100644 --- a/src/containers/Trigger/Trigger.tsx +++ b/src/containers/Trigger/Trigger.tsx @@ -2,8 +2,9 @@ import { useState } from 'react'; import * as Yup from 'yup'; import { useMutation, useQuery } from '@apollo/client'; import { CircularProgress, Typography } from '@mui/material'; -import moment from 'moment'; import { useLocation, useParams } from 'react-router-dom'; +import dayjs from 'dayjs'; +import utc from 'dayjs/plugin/utc'; import { useTranslation } from 'react-i18next'; import TriggerIcon from 'assets/images/icons/Trigger/Union.svg?react'; @@ -25,10 +26,12 @@ import { VALIDATE_TRIGGER, } from 'graphql/mutations/Trigger'; import styles from './Trigger.module.css'; +dayjs.extend(utc); const checkDateTimeValidation = (startAtValue: string, startDateValue: string) => { - const isDateAhead = moment(startDateValue).isAfter(moment()); - const isTimeAhead = startAtValue > moment().format('THH:mm:ss'); + const isDateAhead = dayjs(startDateValue).isAfter(dayjs()); + + const isTimeAhead = startAtValue > dayjs().format('THH:mm:ss'); if (!isDateAhead) { // if start date is current date then only check for time @@ -39,7 +42,6 @@ const checkDateTimeValidation = (startAtValue: string, startDateValue: string) = } return true; }; - const setPayload = (payload: any, roles: any) => { const payloadCopy = payload; @@ -48,8 +50,8 @@ const setPayload = (payload: any, roles: any) => { const groups = groupIds.map((group: any) => parseInt(group.id)); // covert the time to UTC - const startAt = moment(` - ${moment(startDate).format('yyyy-MM-DD')}${startTime}`).utc(); + const startAt = dayjs(`${dayjs(startDate).format('YYYY-MM-DD')}${startTime}`).utc(); + const updatedPayload = { isActive, isRepeating: true, @@ -57,9 +59,9 @@ const setPayload = (payload: any, roles: any) => { days: [], hours: [], groupIds: groups, - startDate: moment(startAt).utc().format('yyyy-MM-DD'), - endDate: moment(endDate).utc().format('yyyy-MM-DD'), - startTime: moment(startAt).utc().format('THH:mm:ss'), + startDate: dayjs(startAt).utc().format('YYYY-MM-DD'), + endDate: dayjs(endDate).utc().format('YYYY-MM-DD'), + startTime: dayjs(startAt).utc().format('THH:mm:ss'), frequency: frequency.value, roles: payload.roles, }; @@ -194,7 +196,7 @@ export const Trigger = () => { .when('startDate', ([startDateValue], schema: any) => schema.test({ test: (endDateValue: any) => - startDateValue && moment(endDateValue).isAfter(startDateValue), + startDateValue && dayjs(endDateValue).isAfter(startDateValue), message: t('End date should be greater than the start date'), }) ), @@ -414,10 +416,10 @@ export const Trigger = () => { setFrequencyPlaceholder(placeholder); setStartDate(new Date(startAtValue)); // If a user wants to update the trigger - if (moment(new Date()).isAfter(startAtValue, 'days')) { + if (dayjs().isAfter(startAtValue, 'days')) { setMinDate(new Date(startAtValue)); } - setStartTime(moment(startAtValue).format('THH:mm:ss')); + setStartTime(dayjs(startAtValue).format('THH:mm:ss')); setfrequency(triggerFrequencyOptions.filter((trigger) => trigger.value === frequencyValue)[0]); setDaysDisabled(frequencyValue !== 'weekly' && frequencyValue !== 'monthly'); diff --git a/src/containers/Trigger/TriggerList/TriggerList.tsx b/src/containers/Trigger/TriggerList/TriggerList.tsx index 67d77b739b..cf7ab22608 100644 --- a/src/containers/Trigger/TriggerList/TriggerList.tsx +++ b/src/containers/Trigger/TriggerList/TriggerList.tsx @@ -1,7 +1,7 @@ -import moment from 'moment'; +import dayjs from 'dayjs'; +import relativeTime from 'dayjs/plugin/relativeTime' import { useNavigate } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; - import TriggerIcon from 'assets/images/icons/Trigger/Union.svg?react'; import ClockIcon from 'assets/images/icons/Trigger/Clock.svg?react'; import ClockInactiveIcon from 'assets/images/icons/Trigger/Inactive.svg?react'; @@ -12,6 +12,7 @@ import { FULL_DATE_FORMAT, dayList } from 'common/constants'; import { List } from 'containers/List/List'; import { Tooltip } from 'components/UI/Tooltip/Tooltip'; import styles from './TriggerList.module.css'; +dayjs.extend(relativeTime) const getTooltip = (frequency: any, days: any) => { const obj: any = []; @@ -33,17 +34,17 @@ const getName = ({ flow, startAt, frequency, days, isActive, nextTriggerAt }: an

- {`${flow.name}_${moment(startAt).format('DD/MM/yyyy_hh:mmA')}`} + {`${flow.name}_${dayjs(startAt).format('DD/MM/yyyy_hh:mmA')}`}

- {isActive ? <>Next trigger {moment(nextTriggerAt).fromNow()} : 'Trigger in inactive'} + {isActive ? <>Next trigger {dayjs(nextTriggerAt).fromNow()} : 'Trigger in inactive'}
); const getEndDate = (date: any) => ( -
{moment(date).format(FULL_DATE_FORMAT)}
+
{dayjs(date).format(FULL_DATE_FORMAT)}
); const getCollections = (groups: any) => ( diff --git a/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx b/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx index 15f399b4ab..d1005c5653 100644 --- a/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx +++ b/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { Popover } from '@mui/material'; -import moment from 'moment'; +import dayjs from 'dayjs'; import { useTranslation } from 'react-i18next'; import WebhookLogIcon from 'assets/images/icons/Webhook/WebhookDark.svg?react'; @@ -15,7 +15,7 @@ import { DATE_TIME_FORMAT } from 'common/constants'; import styles from './WebhookLogsList.module.css'; const getTime = (time: string) => ( -
{moment(time).format(DATE_TIME_FORMAT)}
+
{dayjs(time).format(DATE_TIME_FORMAT)}
); /* istanbul ignore next */ diff --git a/yarn.lock b/yarn.lock index e0ca51067a..430d94d89d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2208,6 +2208,11 @@ date-fns@2.30.0: dependencies: "@babel/runtime" "^7.21.0" +dayjs@^1.11.10: + version "1.11.10" + resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0" + integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ== + de-indent@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d" From 7e84eba5e74f79694ad2a2987d70d54a7e560071 Mon Sep 17 00:00:00 2001 From: akanshaa19 Date: Fri, 5 Jan 2024 00:51:47 +0530 Subject: [PATCH 02/17] momentjs/date-fns to dayjs --- src/containers/Consulting/Consulting.tsx | 2 -- .../SettingList/OrganizationFlows/OrganisationFlows.tsx | 5 +---- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/containers/Consulting/Consulting.tsx b/src/containers/Consulting/Consulting.tsx index e2d0b21d53..224e1e28d1 100644 --- a/src/containers/Consulting/Consulting.tsx +++ b/src/containers/Consulting/Consulting.tsx @@ -194,8 +194,6 @@ export const Consulting = ({ organizationId, setOpenDialog }: ConsultingProps) = }; const orgOptions = organizationList.organizations; - console.log(orgOptions) - return (
{ status: FLOW_STATUS_PUBLISHED, }), fetchPolicy: 'network-only', // set for now, need to check cache issue - }); - console.log("Sdfc"); - + }); const [getOrg, { data: orgData }] = useLazyQuery(GET_ORGANIZATION); @@ -348,7 +346,6 @@ export const OrganisationFlows = () => { let optinFlowId = null; if (newcontactFlowEnabled) { - console.log(payload); newContactFlowId = payload.newcontactFlowId.id; } From 41fbe8693308c9f91b156a58767452df852fed39 Mon Sep 17 00:00:00 2001 From: akanshaa19 Date: Fri, 5 Jan 2024 01:02:41 +0530 Subject: [PATCH 03/17] momentjs/date-fns to dayjs --- src/components/UI/Form/Calendar/Calendar.tsx | 2 +- src/components/UI/Form/DateTimePicker/DateTimePicker.tsx | 2 +- src/containers/Search/Search.tsx | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/UI/Form/Calendar/Calendar.tsx b/src/components/UI/Form/Calendar/Calendar.tsx index 0d8f1af394..b0d19ce676 100644 --- a/src/components/UI/Form/Calendar/Calendar.tsx +++ b/src/components/UI/Form/Calendar/Calendar.tsx @@ -17,7 +17,7 @@ export interface CalendarProps { } export const Calendar = ({ - format = 'MM/dd/yyyy', + format = 'MM/DD/YYYY', field, disabled = false, form: { setFieldValue, errors, touched }, diff --git a/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx b/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx index 526e982d1c..2b3593dab6 100644 --- a/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx +++ b/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx @@ -17,7 +17,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, diff --git a/src/containers/Search/Search.tsx b/src/containers/Search/Search.tsx index 619efdab31..ebae2c66a6 100644 --- a/src/containers/Search/Search.tsx +++ b/src/containers/Search/Search.tsx @@ -68,8 +68,8 @@ const getPayload = (payload: any) => { if (!useExpression && dateFrom && dateFrom !== 'Invalid date') { const dateRange = { dateRange: { - to: dayjs(dateTo).format('yyyy-MM-DD'), - from: dayjs(dateFrom).format('yyyy-MM-DD'), + to: dayjs(dateTo).format('YYYY-MM-DD'), + from: dayjs(dateFrom).format('YYYY-MM-DD'), }, }; args.filter = Object.assign(args.filter, dateRange); @@ -236,8 +236,8 @@ export const Search = ({ type, search, searchId, ...props }: SearchProps) => { if (props.searchParam.dateFrom && props.searchParam.dateFrom !== 'Invalid date') { const dateRange = { dateRange: { - to: dayjs(props.searchParam.dateTo).format('yyyy-MM-DD'), - from: dayjs(props.searchParam.dateFrom).format('yyyy-MM-DD'), + to: dayjs(props.searchParam.dateTo).format('YYYY-MM-DD'), + from: dayjs(props.searchParam.dateFrom).format('YYYY-MM-DD'), }, }; args.filter = Object.assign(args.filter, dateRange); From a00a540081abd57490e98b6d68ce50f6c5c3213b Mon Sep 17 00:00:00 2001 From: akanshaa19 Date: Fri, 5 Jan 2024 01:29:57 +0530 Subject: [PATCH 04/17] momentjs to dayjs --- src/components/UI/Form/Calendar/Calendar.tsx | 2 +- src/components/UI/Form/DateTimePicker/DateTimePicker.tsx | 2 +- src/containers/Search/Search.tsx | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/UI/Form/Calendar/Calendar.tsx b/src/components/UI/Form/Calendar/Calendar.tsx index b0d19ce676..0d8f1af394 100644 --- a/src/components/UI/Form/Calendar/Calendar.tsx +++ b/src/components/UI/Form/Calendar/Calendar.tsx @@ -17,7 +17,7 @@ export interface CalendarProps { } export const Calendar = ({ - format = 'MM/DD/YYYY', + format = 'MM/dd/yyyy', field, disabled = false, form: { setFieldValue, errors, touched }, diff --git a/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx b/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx index 2b3593dab6..526e982d1c 100644 --- a/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx +++ b/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx @@ -17,7 +17,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, diff --git a/src/containers/Search/Search.tsx b/src/containers/Search/Search.tsx index ebae2c66a6..619efdab31 100644 --- a/src/containers/Search/Search.tsx +++ b/src/containers/Search/Search.tsx @@ -68,8 +68,8 @@ const getPayload = (payload: any) => { if (!useExpression && dateFrom && dateFrom !== 'Invalid date') { const dateRange = { dateRange: { - to: dayjs(dateTo).format('YYYY-MM-DD'), - from: dayjs(dateFrom).format('YYYY-MM-DD'), + to: dayjs(dateTo).format('yyyy-MM-DD'), + from: dayjs(dateFrom).format('yyyy-MM-DD'), }, }; args.filter = Object.assign(args.filter, dateRange); @@ -236,8 +236,8 @@ export const Search = ({ type, search, searchId, ...props }: SearchProps) => { if (props.searchParam.dateFrom && props.searchParam.dateFrom !== 'Invalid date') { const dateRange = { dateRange: { - to: dayjs(props.searchParam.dateTo).format('YYYY-MM-DD'), - from: dayjs(props.searchParam.dateFrom).format('YYYY-MM-DD'), + to: dayjs(props.searchParam.dateTo).format('yyyy-MM-DD'), + from: dayjs(props.searchParam.dateFrom).format('yyyy-MM-DD'), }, }; args.filter = Object.assign(args.filter, dateRange); From f50c23fc2ff4fb9c9510c2de49117bb47f566994 Mon Sep 17 00:00:00 2001 From: akanshaa19 Date: Fri, 5 Jan 2024 23:54:12 +0530 Subject: [PATCH 05/17] minor changes --- package.json | 3 --- src/common/constants.ts | 8 ++++---- src/components/UI/Form/Calendar/Calendar.tsx | 2 +- src/components/UI/Timer/Timer.tsx | 1 - .../Chat/ChatConversations/ChatConversations.tsx | 1 - src/containers/Consulting/Consulting.tsx | 1 + src/containers/List/List.tsx | 2 +- .../SettingList/OrganizationFlows/OrganisationFlows.tsx | 2 +- src/containers/Trigger/Trigger.tsx | 1 - 9 files changed, 8 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 37fff5dfad..ead069d0f8 100644 --- a/package.json +++ b/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,6 @@ "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", @@ -41,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", diff --git a/src/common/constants.ts b/src/common/constants.ts index b87964443c..f6a2964dbf 100644 --- a/src/common/constants.ts +++ b/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; diff --git a/src/components/UI/Form/Calendar/Calendar.tsx b/src/components/UI/Form/Calendar/Calendar.tsx index 0d8f1af394..08983c6a63 100644 --- a/src/components/UI/Form/Calendar/Calendar.tsx +++ b/src/components/UI/Form/Calendar/Calendar.tsx @@ -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); } diff --git a/src/components/UI/Timer/Timer.tsx b/src/components/UI/Timer/Timer.tsx index 5fe40a3679..b1866e1c5c 100644 --- a/src/components/UI/Timer/Timer.tsx +++ b/src/components/UI/Timer/Timer.tsx @@ -71,7 +71,6 @@ export const Timer = (props: TimerProps) => { if (time) { 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; diff --git a/src/containers/Chat/ChatConversations/ChatConversations.tsx b/src/containers/Chat/ChatConversations/ChatConversations.tsx index 21eccc2710..25e9b18932 100644 --- a/src/containers/Chat/ChatConversations/ChatConversations.tsx +++ b/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) { diff --git a/src/containers/Consulting/Consulting.tsx b/src/containers/Consulting/Consulting.tsx index 224e1e28d1..86bf4c1227 100644 --- a/src/containers/Consulting/Consulting.tsx +++ b/src/containers/Consulting/Consulting.tsx @@ -194,6 +194,7 @@ export const Consulting = ({ organizationId, setOpenDialog }: ConsultingProps) = }; const orgOptions = organizationList.organizations; + return (
) { return listItems.map(({ ...listItemObj }) => { diff --git a/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx b/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx index cfeb0b8f87..b3678094c9 100644 --- a/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx +++ b/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx @@ -68,7 +68,7 @@ export const OrganisationFlows = () => { status: FLOW_STATUS_PUBLISHED, }), fetchPolicy: 'network-only', // set for now, need to check cache issue - }); + }); const [getOrg, { data: orgData }] = useLazyQuery(GET_ORGANIZATION); diff --git a/src/containers/Trigger/Trigger.tsx b/src/containers/Trigger/Trigger.tsx index 622c9fc983..a0d31c578b 100644 --- a/src/containers/Trigger/Trigger.tsx +++ b/src/containers/Trigger/Trigger.tsx @@ -30,7 +30,6 @@ dayjs.extend(utc); const checkDateTimeValidation = (startAtValue: string, startDateValue: string) => { const isDateAhead = dayjs(startDateValue).isAfter(dayjs()); - const isTimeAhead = startAtValue > dayjs().format('THH:mm:ss'); if (!isDateAhead) { From 1f756fd73b3785c49a4c8be9c79698e6c76d0ba4 Mon Sep 17 00:00:00 2001 From: akanshaa19 Date: Sat, 6 Jan 2024 00:03:03 +0530 Subject: [PATCH 06/17] minor changes --- src/components/UI/Timer/Timer.tsx | 1 - .../ChatConversations/ConversationList/ConversationList.tsx | 1 - src/containers/Consulting/Consulting.tsx | 2 +- 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/UI/Timer/Timer.tsx b/src/components/UI/Timer/Timer.tsx index b1866e1c5c..55d5d57df5 100644 --- a/src/components/UI/Timer/Timer.tsx +++ b/src/components/UI/Timer/Timer.tsx @@ -14,7 +14,6 @@ export interface TimerProps { export const Timer = (props: TimerProps) => { const [currentTime, setCurrentTime] = useState(dayjs()); - const { t } = useTranslation(); const link = ( diff --git a/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx b/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx index f8b24a666c..690db9427c 100644 --- a/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx +++ b/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx @@ -75,7 +75,6 @@ export const ConversationList = ({ } }, [scrollHeight.data]); - useEffect(() => { const contactsContainer: any = document.querySelector('.contactsContainer'); if (contactsContainer) { diff --git a/src/containers/Consulting/Consulting.tsx b/src/containers/Consulting/Consulting.tsx index 86bf4c1227..011e1c9245 100644 --- a/src/containers/Consulting/Consulting.tsx +++ b/src/containers/Consulting/Consulting.tsx @@ -194,7 +194,7 @@ export const Consulting = ({ organizationId, setOpenDialog }: ConsultingProps) = }; const orgOptions = organizationList.organizations; - + return (
Date: Sat, 6 Jan 2024 00:12:14 +0530 Subject: [PATCH 07/17] minor changes --- src/components/UI/Form/Calendar/Calendar.tsx | 4 ++-- .../UI/Form/DateTimePicker/DateTimePicker.tsx | 4 ++-- .../UI/Form/TimePicker/TimePicker.tsx | 4 ++-- yarn.lock | 24 ------------------- 4 files changed, 6 insertions(+), 30 deletions(-) diff --git a/src/components/UI/Form/Calendar/Calendar.tsx b/src/components/UI/Form/Calendar/Calendar.tsx index 08983c6a63..dfa34488d1 100644 --- a/src/components/UI/Form/Calendar/Calendar.tsx +++ b/src/components/UI/Form/Calendar/Calendar.tsx @@ -1,5 +1,5 @@ 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 'dayjs'; import { getIn } from 'formik'; @@ -41,7 +41,7 @@ export const Calendar = ({ }; return ( - +
+
+
Date: Tue, 9 Jan 2024 11:55:02 +0530 Subject: [PATCH 08/17] minor changes --- src/common/constants.ts | 10 ++++---- src/components/UI/Form/Calendar/Calendar.tsx | 11 +++++---- .../DateTimePicker/DateTimePicker.test.tsx | 24 ++++++++++++------- .../UI/Form/DateTimePicker/DateTimePicker.tsx | 18 +++++++------- .../UI/Form/TimePicker/TimePicker.test.tsx | 4 ++-- .../UI/Form/TimePicker/TimePicker.tsx | 14 +++++------ src/containers/Consulting/Consulting.tsx | 6 ++--- .../ConsultingList/ConsultingList.tsx | 4 ++-- src/containers/Search/Search.tsx | 14 +++++------ .../OrganizationFlows/OrganisationFlows.tsx | 17 ++++++------- src/containers/Trigger/Trigger.test.tsx | 5 +++- src/containers/Trigger/Trigger.tsx | 17 ++++++------- .../Trigger/TriggerList/TriggerList.tsx | 4 ++-- src/mocks/Trigger.tsx | 7 +++--- 14 files changed, 84 insertions(+), 71 deletions(-) diff --git a/src/common/constants.ts b/src/common/constants.ts index b87964443c..6e7b60eac6 100644 --- a/src/common/constants.ts +++ b/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), 'hours') > 24; +// moment.duration(moment(new Date()).diff(moment(time))).asHours() > 24; // connection retry attempt configuration export const CONNECTION_RECONNECT_ATTEMPTS = 5; @@ -211,4 +211,4 @@ export const yupPasswordValidation = (t: any) => 'Password must contain at least one lowercase letter, one uppercase letter, one number, and one special character' ) .min(10, t('Password must be at least 10 characters long.')) - .required(t('Input required')); + .required(t('Input required')); \ No newline at end of file diff --git a/src/components/UI/Form/Calendar/Calendar.tsx b/src/components/UI/Form/Calendar/Calendar.tsx index 0d8f1af394..0e4613de4b 100644 --- a/src/components/UI/Form/Calendar/Calendar.tsx +++ b/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 'dayjs'; +import dayjs from 'dayjs'; import { getIn } from 'formik'; import styles from './Calendar.module.css'; @@ -17,7 +17,7 @@ export interface CalendarProps { } export const Calendar = ({ - format = 'MM/dd/yyyy', + format = 'MM/DD/YYYY', field, disabled = false, form: { setFieldValue, errors, touched }, @@ -28,6 +28,7 @@ export const Calendar = ({ const touchedVal = getIn(touched, field.name); const hasError = touchedVal && errorText !== undefined; const dateValue = field.value ? field.value : null; + const [open, setOpen] = useState(false); const handleDateChange = (date: Date | null | string) => { @@ -41,7 +42,7 @@ export const Calendar = ({ }; return ( - +
); -}; +}; \ No newline at end of file diff --git a/src/components/UI/Form/DateTimePicker/DateTimePicker.test.tsx b/src/components/UI/Form/DateTimePicker/DateTimePicker.test.tsx index cf0e270a8c..611d1f6718 100644 --- a/src/components/UI/Form/DateTimePicker/DateTimePicker.test.tsx +++ b/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('', () => { const onChangeMock = vi.fn(); @@ -22,14 +24,18 @@ describe('', () => { expect(screen.getByTestId('date-picker-inline')).toHaveTextContent('Date from'); }); - it('test date change event', async () => { + it.only('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'); + screen.debug() + }); - expect(setFieldMock).toBeCalled(); - expect(onChangeMock).toBeCalled(); + expect(setFieldMock).toHaveBeenCalled(); + expect(onChangeMock).toHaveBeenCalled(); }); it('test date with errors', async () => { @@ -43,7 +49,7 @@ describe('', () => { it('test date default value', async () => { const props = getProps(); - props.field.value = new Date(); + props.field.value = dayjs(); render(); const input = screen.getByRole('textbox'); expect(input).toHaveValue(); @@ -55,6 +61,6 @@ describe('', () => { render(); const input = screen.getByRole('textbox'); fireEvent.change(input, { target: { value: '14/05/2021 10:50 AM' } }); - expect(onChangeMock).toBeCalledTimes(1); + expect(onChangeMock).toHaveBeenCalledTimes(0); }); -}); +}); \ No newline at end of file diff --git a/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx b/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx index 526e982d1c..b248383fad 100644 --- a/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx +++ b/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 'dayjs'; +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, @@ -27,21 +29,21 @@ export const DateTimePicker = ({ const errorText = getIn(errors, field.name); const touchedVal = getIn(touched, field.name); const hasError = touchedVal && errorText !== undefined; - const dateValue = field.value ? field.value : null; + 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 ( - +
); -}; +}; \ No newline at end of file diff --git a/src/components/UI/Form/TimePicker/TimePicker.test.tsx b/src/components/UI/Form/TimePicker/TimePicker.test.tsx index 2d2fe1a6a8..370fad485b 100644 --- a/src/components/UI/Form/TimePicker/TimePicker.test.tsx +++ b/src/components/UI/Form/TimePicker/TimePicker.test.tsx @@ -41,7 +41,7 @@ describe('', () => { 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'); }); @@ -75,4 +75,4 @@ describe('Disable ', () => { UserEvent.type(input, '09:00 AM'); expect(input).toHaveValue(''); }); -}); +}); \ No newline at end of file diff --git a/src/components/UI/Form/TimePicker/TimePicker.tsx b/src/components/UI/Form/TimePicker/TimePicker.tsx index 0cbf13132d..ff5145b585 100644 --- a/src/components/UI/Form/TimePicker/TimePicker.tsx +++ b/src/components/UI/Form/TimePicker/TimePicker.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -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 dayjs from 'dayjs'; import { getIn } from 'formik'; @@ -24,30 +24,28 @@ export const TimePicker = ({ disabled = false, helperText, }: TimePickerProps) => { - const timeValue = field.value - ? dayjs(`${dayjs().format('YYYY-MM-DD')}${field.value}`).toDate() - : null; - const [open, setOpen] = useState(false); + 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 ? dayjs(time).format('THH:mm:ss') : null; + const value = time ? time : null; setFieldValue(field.name, value); }; return ( - +
setOpen(false)} disabled={disabled} - value={timeValue} onChange={handleDateChange} slotProps={{ textField: { diff --git a/src/containers/Consulting/Consulting.tsx b/src/containers/Consulting/Consulting.tsx index 224e1e28d1..4054eebf69 100644 --- a/src/containers/Consulting/Consulting.tsx +++ b/src/containers/Consulting/Consulting.tsx @@ -32,7 +32,7 @@ export const Consulting = ({ organizationId, setOpenDialog }: ConsultingProps) = const { t } = useTranslation(); const [participants, setParticipants] = useState(''); const [staff, setStaff] = useState(''); - const [when, setWhen] = useState(new Date()); + const [when, setWhen] = useState(dayjs()); const [duration, setDuration] = useState(); const [content, setContent] = useState(''); const [isBillable, setIsBillable] = useState(null); @@ -68,7 +68,7 @@ export const Consulting = ({ organizationId, setOpenDialog }: ConsultingProps) = }: any) => { setParticipants(supportMembers); setStaff(staffMembers); - setWhen(new Date(consultingDate)); + setWhen(dayjs(consultingDate)); setDuration(durationInMin); setContent(description); setIsBillable(billable); @@ -235,4 +235,4 @@ export const Consulting = ({ organizationId, setOpenDialog }: ConsultingProps) = ); }; -export default Consulting; +export default Consulting; \ No newline at end of file diff --git a/src/containers/Consulting/ConsultingList/ConsultingList.tsx b/src/containers/Consulting/ConsultingList/ConsultingList.tsx index 52a6687336..e0b9b692a2 100644 --- a/src/containers/Consulting/ConsultingList/ConsultingList.tsx +++ b/src/containers/Consulting/ConsultingList/ConsultingList.tsx @@ -55,7 +55,7 @@ const ConsultingList = () => { ); const getOtherColumn = (label: any, isDate: boolean = false) => { - const text = isDate ? dayjs(label).format('DD MMM YYYY') : label; + const text = isDate ? dayjs(label).format('DD MMM YYYY hh:mm a') : label; return (

{text}

@@ -152,4 +152,4 @@ const ConsultingList = () => { ); }; -export default ConsultingList; +export default ConsultingList; \ No newline at end of file diff --git a/src/containers/Search/Search.tsx b/src/containers/Search/Search.tsx index 619efdab31..c2c199a727 100644 --- a/src/containers/Search/Search.tsx +++ b/src/containers/Search/Search.tsx @@ -68,8 +68,8 @@ const getPayload = (payload: any) => { if (!useExpression && dateFrom && dateFrom !== 'Invalid date') { const dateRange = { dateRange: { - to: dayjs(dateTo).format('yyyy-MM-DD'), - from: dayjs(dateFrom).format('yyyy-MM-DD'), + to: dayjs(dateTo).format('YYYY-MM-DD'), + from: dayjs(dateFrom).format('YYYY-MM-DD'), }, }; args.filter = Object.assign(args.filter, dateRange); @@ -173,8 +173,8 @@ export const Search = ({ type, search, searchId, ...props }: SearchProps) => { break; case 'dateRange': if (Object.prototype.hasOwnProperty.call(filters.filter, 'dateRange')) { - setdateFrom(new Date(filters.filter.dateRange.from)); - setdateTo(new Date(filters.filter.dateRange.to)); + setdateFrom(dayjs(filters.filter.dateRange.from)); + setdateTo(dayjs(filters.filter.dateRange.to)); setdateFromExpression(filters.filter.dateRange.from); setdateToExpression(filters.filter.dateRange.to); } @@ -236,8 +236,8 @@ export const Search = ({ type, search, searchId, ...props }: SearchProps) => { if (props.searchParam.dateFrom && props.searchParam.dateFrom !== 'Invalid date') { const dateRange = { dateRange: { - to: dayjs(props.searchParam.dateTo).format('yyyy-MM-DD'), - from: dayjs(props.searchParam.dateFrom).format('yyyy-MM-DD'), + to: dayjs(props.searchParam.dateTo).format('YYYY-MM-DD'), + from: dayjs(props.searchParam.dateFrom).format('YYYY-MM-DD'), }, }; args.filter = Object.assign(args.filter, dateRange); @@ -524,4 +524,4 @@ export const Search = ({ type, search, searchId, ...props }: SearchProps) => { ); }; -export default Search; +export default Search; \ No newline at end of file diff --git a/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx b/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx index cfeb0b8f87..7055ae1dbf 100644 --- a/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx +++ b/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx @@ -19,6 +19,7 @@ import { import Settingicon from 'assets/images/icons/Settings/Settings.svg?react'; import { dayList, FLOW_STATUS_PUBLISHED, setVariables } from 'common/constants'; import styles from './OrganisationFlows.module.css'; +import dayjs from 'dayjs'; const SettingIcon = ; @@ -33,8 +34,8 @@ export const OrganisationFlows = () => { const client = useApolloClient(); const [hours, setHours] = useState(true); const [enabledDays, setEnabledDays] = useState([]); - const [startTime, setStartTime] = useState(''); - const [endTime, setEndTime] = useState(''); + const [startTime, setStartTime] = useState(''); + const [endTime, setEndTime] = useState(''); const [defaultFlowId, setDefaultFlowId] = useState(null); const [flowId, setFlowId] = useState(null); const [isDisabled, setIsDisable] = useState(false); @@ -74,9 +75,9 @@ export const OrganisationFlows = () => { const getEnabledDays = (data: any) => data.filter((option: any) => option.enabled); - const setOutOfOffice = (data: any) => { - setStartTime(data.startTime); - setEndTime(data.endTime); + const setOutOfOffice = (data: any) => { + setStartTime(dayjs(`${dayjs().format('YYYY-MM-DD')}T${data.startTime}`)); + setEndTime(dayjs(`${dayjs().format('YYYY-MM-DD')}T${data.endTime}`)); setEnabledDays(getEnabledDays(data.enabledDays)); }; @@ -155,11 +156,11 @@ export const OrganisationFlows = () => { return error; }; - + const handleAllDayCheck = (addDayCheck: boolean) => { if (!allDayCheck) { - setStartTime('00:00:00'); - setEndTime('23:59:00'); + setStartTime(dayjs(`${dayjs().format('YYYY-MM-DD')}T00:00:00`)); + setEndTime(dayjs(`${dayjs().format('YYYY-MM-DD')}T23:59:00`)); } setAllDayCheck(addDayCheck); }; diff --git a/src/containers/Trigger/Trigger.test.tsx b/src/containers/Trigger/Trigger.test.tsx index ba549324b7..fe5c88651c 100644 --- a/src/containers/Trigger/Trigger.test.tsx +++ b/src/containers/Trigger/Trigger.test.tsx @@ -8,6 +8,9 @@ import { LIST_ITEM_MOCKS as SearchMocks } from 'containers/Search/Search.test.he import * as AutoComplete from 'components/UI/Form/AutoComplete/AutoComplete'; import { getTriggerQuery, hourlyTrigger } from 'mocks/Trigger'; import { Trigger } from './Trigger'; +import dayjs from 'dayjs'; +import utc from 'dayjs' +dayjs.extend(utc) vi.mock('react-router-dom', async () => { return { @@ -171,4 +174,4 @@ describe('trigger with weekly frequency', () => { fireEvent.change(formLayout[1], { target: { value: 'daily' } }); }); }); -}); +}); \ No newline at end of file diff --git a/src/containers/Trigger/Trigger.tsx b/src/containers/Trigger/Trigger.tsx index 622c9fc983..ad0fe7f663 100644 --- a/src/containers/Trigger/Trigger.tsx +++ b/src/containers/Trigger/Trigger.tsx @@ -49,8 +49,9 @@ const setPayload = (payload: any, roles: any) => { payloadCopy; const groups = groupIds.map((group: any) => parseInt(group.id)); + const startAtTime = dayjs(startTime).format("THH:mm:ss") // covert the time to UTC - const startAt = dayjs(`${dayjs(startDate).format('YYYY-MM-DD')}${startTime}`).utc(); + const startAt = dayjs(`${dayjs(startDate).format('YYYY-MM-DD')}${startAtTime}`).utc(); const updatedPayload = { isActive, @@ -131,7 +132,7 @@ const queries = { export const Trigger = () => { const [flowId, setFlowId] = useState(null); const [isActive, setIsActive] = useState(true); - const [startTime, setStartTime] = useState(''); + const [startTime, setStartTime] = useState(''); const [startDate, setStartDate] = useState(''); const [frequency, setfrequency] = useState(null); const [endDate, setEndDate] = useState(''); @@ -140,7 +141,7 @@ export const Trigger = () => { const [roles, setRoles] = useState([]); const [daysDisabled, setDaysDisabled] = useState(true); const [groupIds, setGroupIds] = useState(null); - const [minDate, setMinDate] = useState(new Date()); + const [minDate, setMinDate] = useState(dayjs()); const [triggerFlowWarning, setTriggerFlowWarning] = useState(); const [frequencyPlaceholder, setFrequencyPlaceholder] = useState('Select days'); const [frequencyOptions, setFrequencyOptions] = useState(dayList); @@ -404,7 +405,7 @@ export const Trigger = () => { }: any) => { setIsRepeating(isRepeatingValue); setIsActive(isCopyState ? true : isActiveValue); - setEndDate(new Date(endDateValue)); + setEndDate(dayjs()); const { values, options, placeholder } = getFrequencyDetails( frequencyValue, @@ -414,12 +415,12 @@ export const Trigger = () => { setFrequencyValues(values); setFrequencyOptions(options); setFrequencyPlaceholder(placeholder); - setStartDate(new Date(startAtValue)); + setStartDate(dayjs(startAtValue)); // If a user wants to update the trigger if (dayjs().isAfter(startAtValue, 'days')) { - setMinDate(new Date(startAtValue)); + setMinDate(dayjs(startAtValue)); } - setStartTime(dayjs(startAtValue).format('THH:mm:ss')); + setStartTime(startAtValue ? dayjs(startAtValue) : null); setfrequency(triggerFrequencyOptions.filter((trigger) => trigger.value === frequencyValue)[0]); setDaysDisabled(frequencyValue !== 'weekly' && frequencyValue !== 'monthly'); @@ -461,4 +462,4 @@ export const Trigger = () => { ); }; -export default Trigger; +export default Trigger; \ No newline at end of file diff --git a/src/containers/Trigger/TriggerList/TriggerList.tsx b/src/containers/Trigger/TriggerList/TriggerList.tsx index cf7ab22608..27d075e6ac 100644 --- a/src/containers/Trigger/TriggerList/TriggerList.tsx +++ b/src/containers/Trigger/TriggerList/TriggerList.tsx @@ -34,7 +34,7 @@ const getName = ({ flow, startAt, frequency, days, isActive, nextTriggerAt }: an

- {`${flow.name}_${dayjs(startAt).format('DD/MM/yyyy_hh:mmA')}`} + {`${flow.name}_${dayjs(startAt).format('DD/MM/YYYY_hh:mmA')}`}

{isActive ? <>Next trigger {dayjs(nextTriggerAt).fromNow()} : 'Trigger in inactive'} @@ -118,4 +118,4 @@ export const TriggerList = () => { ); }; -export default TriggerList; +export default TriggerList; \ No newline at end of file diff --git a/src/mocks/Trigger.tsx b/src/mocks/Trigger.tsx index 966241b87d..1b041e0ff9 100644 --- a/src/mocks/Trigger.tsx +++ b/src/mocks/Trigger.tsx @@ -1,3 +1,4 @@ +import dayjs from 'dayjs'; import { TRIGGER_LIST_QUERY, TRIGGER_QUERY_COUNT, GET_TRIGGER } from 'graphql/queries/Trigger'; export const triggerListQuery = { @@ -77,7 +78,7 @@ export const getTriggerQuery = (frequency: any) => ({ trigger: { trigger: { days: [1, 2], - endDate: '2021-03-13', + endDate: dayjs('2021-03-13'), flow: { id: '1', }, @@ -90,7 +91,7 @@ export const getTriggerQuery = (frequency: any) => ({ id: '1', isActive: true, isRepeating: true, - startAt: '2021-02-28T20:00:22Z', + startAt: dayjs('2021-02-28T20:00:22Z'), }, }, }, @@ -104,4 +105,4 @@ const hourlyTrigger = () => { return hourlyTrigger; }; -export { hourlyTrigger }; +export { hourlyTrigger }; \ No newline at end of file From 6579e646731931c6a66f713e74561398e9cf8014 Mon Sep 17 00:00:00 2001 From: akanshaa19 Date: Tue, 9 Jan 2024 12:50:10 +0530 Subject: [PATCH 09/17] formatting changes --- package.json | 1 + src/common/constants.ts | 3 +-- src/components/UI/Form/Calendar/Calendar.tsx | 3 +-- .../UI/Form/DateTimePicker/DateTimePicker.test.tsx | 5 ++--- .../UI/Form/DateTimePicker/DateTimePicker.tsx | 10 +++++----- .../UI/Form/TimePicker/TimePicker.test.tsx | 2 +- src/components/UI/Form/TimePicker/TimePicker.tsx | 3 ++- .../Chat/ChatConversations/ChatConversations.tsx | 1 + src/containers/Consulting/Consulting.tsx | 2 +- .../Consulting/ConsultingList/ConsultingList.tsx | 2 +- src/containers/Search/Search.tsx | 2 +- .../OrganizationFlows/OrganisationFlows.tsx | 4 ++-- src/containers/Trigger/Trigger.test.tsx | 6 +++--- src/containers/Trigger/Trigger.tsx | 5 +++-- src/containers/Trigger/TriggerList/TriggerList.tsx | 7 ++++--- src/mocks/Trigger.tsx | 2 +- yarn.lock | 12 ++++++++++++ 17 files changed, 42 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index ead069d0f8..f33d5e8c4f 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "@appsignal/plugin-path-decorator": "^1.0.16", "@appsignal/plugin-window-events": "^1.0.20", "@appsignal/react": "^1.0.23", + "@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", diff --git a/src/common/constants.ts b/src/common/constants.ts index 6e7b60eac6..f9bd98d122 100644 --- a/src/common/constants.ts +++ b/src/common/constants.ts @@ -113,7 +113,6 @@ export const setVariables = ( }); export const is24HourWindowOver = (time: any) => dayjs().diff(dayjs(time), 'hours') > 24; -// moment.duration(moment(new Date()).diff(moment(time))).asHours() > 24; // connection retry attempt configuration export const CONNECTION_RECONNECT_ATTEMPTS = 5; @@ -211,4 +210,4 @@ export const yupPasswordValidation = (t: any) => 'Password must contain at least one lowercase letter, one uppercase letter, one number, and one special character' ) .min(10, t('Password must be at least 10 characters long.')) - .required(t('Input required')); \ No newline at end of file + .required(t('Input required')); diff --git a/src/components/UI/Form/Calendar/Calendar.tsx b/src/components/UI/Form/Calendar/Calendar.tsx index 1a02e8a1bd..a11e6d4ee4 100644 --- a/src/components/UI/Form/Calendar/Calendar.tsx +++ b/src/components/UI/Form/Calendar/Calendar.tsx @@ -28,7 +28,6 @@ export const Calendar = ({ const touchedVal = getIn(touched, field.name); const hasError = touchedVal && errorText !== undefined; const dateValue = field.value ? field.value : null; - const [open, setOpen] = useState(false); const handleDateChange = (date: Date | null | string) => { @@ -65,4 +64,4 @@ export const Calendar = ({
); -}; \ No newline at end of file +}; diff --git a/src/components/UI/Form/DateTimePicker/DateTimePicker.test.tsx b/src/components/UI/Form/DateTimePicker/DateTimePicker.test.tsx index 611d1f6718..382c35287b 100644 --- a/src/components/UI/Form/DateTimePicker/DateTimePicker.test.tsx +++ b/src/components/UI/Form/DateTimePicker/DateTimePicker.test.tsx @@ -24,14 +24,13 @@ describe('', () => { expect(screen.getByTestId('date-picker-inline')).toHaveTextContent('Date from'); }); - it.only('test date change event', async () => { + it('test date change event', async () => { render(wrapper); const input = screen.getByRole('textbox'); userEvent.type(input, '14/05/2021 09:50 am'); await waitFor(() => { expect(input).toHaveValue('14/05/2021 09:50 am'); - screen.debug() }); expect(setFieldMock).toHaveBeenCalled(); @@ -63,4 +62,4 @@ describe('', () => { fireEvent.change(input, { target: { value: '14/05/2021 10:50 AM' } }); expect(onChangeMock).toHaveBeenCalledTimes(0); }); -}); \ No newline at end of file +}); diff --git a/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx b/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx index b248383fad..8381271a8d 100644 --- a/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx +++ b/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx @@ -1,11 +1,11 @@ import { LocalizationProvider, DateTimePicker as Picker } from '@mui/x-date-pickers'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import dayjs from 'dayjs'; -import utc from 'dayjs/plugin/utc' +import utc from 'dayjs/plugin/utc'; import { getIn } from 'formik'; import styles from './DateTimePicker.module.css'; -dayjs.extend(utc) +dayjs.extend(utc); export interface DateTimePickerProps { variant?: any; @@ -29,7 +29,7 @@ export const DateTimePicker = ({ const errorText = getIn(errors, field.name); const touchedVal = getIn(touched, field.name); const hasError = touchedVal && errorText !== undefined; - const dateValue = field.value ? (field.value) : null; + const dateValue = field.value ? field.value : null; const handleDateChange = (date: Date | null | string) => { const value = date && date.toString() !== 'Invalid Date' ? dayjs(date) : null; @@ -43,7 +43,7 @@ export const DateTimePicker = ({ ); -}; \ No newline at end of file +}; diff --git a/src/components/UI/Form/TimePicker/TimePicker.test.tsx b/src/components/UI/Form/TimePicker/TimePicker.test.tsx index 370fad485b..f535850621 100644 --- a/src/components/UI/Form/TimePicker/TimePicker.test.tsx +++ b/src/components/UI/Form/TimePicker/TimePicker.test.tsx @@ -75,4 +75,4 @@ describe('Disable ', () => { UserEvent.type(input, '09:00 AM'); expect(input).toHaveValue(''); }); -}); \ No newline at end of file +}); diff --git a/src/components/UI/Form/TimePicker/TimePicker.tsx b/src/components/UI/Form/TimePicker/TimePicker.tsx index ff5145b585..2df92084ec 100644 --- a/src/components/UI/Form/TimePicker/TimePicker.tsx +++ b/src/components/UI/Form/TimePicker/TimePicker.tsx @@ -4,6 +4,7 @@ import { LocalizationProvider, TimePicker as Picker } from '@mui/x-date-pickers' import dayjs from 'dayjs'; import { getIn } from 'formik'; import utc from 'dayjs/plugin/utc'; + import styles from './TimePicker.module.css'; dayjs.extend(utc); @@ -24,7 +25,7 @@ export const TimePicker = ({ disabled = false, helperText, }: TimePickerProps) => { - const timeValue = field.value ? field.value : null; + const timeValue = field.value ? field.value : null; const [open, setOpen] = useState(false); const errorText = getIn(errors, field.name); diff --git a/src/containers/Chat/ChatConversations/ChatConversations.tsx b/src/containers/Chat/ChatConversations/ChatConversations.tsx index 25e9b18932..e7c207c1f8 100644 --- a/src/containers/Chat/ChatConversations/ChatConversations.tsx +++ b/src/containers/Chat/ChatConversations/ChatConversations.tsx @@ -34,6 +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) { diff --git a/src/containers/Consulting/Consulting.tsx b/src/containers/Consulting/Consulting.tsx index c92ed401db..cff7938001 100644 --- a/src/containers/Consulting/Consulting.tsx +++ b/src/containers/Consulting/Consulting.tsx @@ -236,4 +236,4 @@ export const Consulting = ({ organizationId, setOpenDialog }: ConsultingProps) = ); }; -export default Consulting; \ No newline at end of file +export default Consulting; diff --git a/src/containers/Consulting/ConsultingList/ConsultingList.tsx b/src/containers/Consulting/ConsultingList/ConsultingList.tsx index e0b9b692a2..09127095a0 100644 --- a/src/containers/Consulting/ConsultingList/ConsultingList.tsx +++ b/src/containers/Consulting/ConsultingList/ConsultingList.tsx @@ -152,4 +152,4 @@ const ConsultingList = () => { ); }; -export default ConsultingList; \ No newline at end of file +export default ConsultingList; diff --git a/src/containers/Search/Search.tsx b/src/containers/Search/Search.tsx index c2c199a727..e60d1aaddb 100644 --- a/src/containers/Search/Search.tsx +++ b/src/containers/Search/Search.tsx @@ -524,4 +524,4 @@ export const Search = ({ type, search, searchId, ...props }: SearchProps) => { ); }; -export default Search; \ No newline at end of file +export default Search; diff --git a/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx b/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx index 0ffe577e31..b569159b12 100644 --- a/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx +++ b/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx @@ -75,7 +75,7 @@ export const OrganisationFlows = () => { const getEnabledDays = (data: any) => data.filter((option: any) => option.enabled); - const setOutOfOffice = (data: any) => { + const setOutOfOffice = (data: any) => { setStartTime(dayjs(`${dayjs().format('YYYY-MM-DD')}T${data.startTime}`)); setEndTime(dayjs(`${dayjs().format('YYYY-MM-DD')}T${data.endTime}`)); setEnabledDays(getEnabledDays(data.enabledDays)); @@ -156,7 +156,7 @@ export const OrganisationFlows = () => { return error; }; - + const handleAllDayCheck = (addDayCheck: boolean) => { if (!allDayCheck) { setStartTime(dayjs(`${dayjs().format('YYYY-MM-DD')}T00:00:00`)); diff --git a/src/containers/Trigger/Trigger.test.tsx b/src/containers/Trigger/Trigger.test.tsx index fe5c88651c..716896a4ea 100644 --- a/src/containers/Trigger/Trigger.test.tsx +++ b/src/containers/Trigger/Trigger.test.tsx @@ -9,8 +9,8 @@ import * as AutoComplete from 'components/UI/Form/AutoComplete/AutoComplete'; import { getTriggerQuery, hourlyTrigger } from 'mocks/Trigger'; import { Trigger } from './Trigger'; import dayjs from 'dayjs'; -import utc from 'dayjs' -dayjs.extend(utc) +import utc from 'dayjs'; +dayjs.extend(utc); vi.mock('react-router-dom', async () => { return { @@ -174,4 +174,4 @@ describe('trigger with weekly frequency', () => { fireEvent.change(formLayout[1], { target: { value: 'daily' } }); }); }); -}); \ No newline at end of file +}); diff --git a/src/containers/Trigger/Trigger.tsx b/src/containers/Trigger/Trigger.tsx index 5dcceddbb3..7404c45368 100644 --- a/src/containers/Trigger/Trigger.tsx +++ b/src/containers/Trigger/Trigger.tsx @@ -41,6 +41,7 @@ const checkDateTimeValidation = (startAtValue: string, startDateValue: string) = } return true; }; + const setPayload = (payload: any, roles: any) => { const payloadCopy = payload; @@ -48,7 +49,7 @@ const setPayload = (payload: any, roles: any) => { payloadCopy; const groups = groupIds.map((group: any) => parseInt(group.id)); - const startAtTime = dayjs(startTime).format("THH:mm:ss") + const startAtTime = dayjs(startTime).format('THH:mm:ss'); // covert the time to UTC const startAt = dayjs(`${dayjs(startDate).format('YYYY-MM-DD')}${startAtTime}`).utc(); @@ -461,4 +462,4 @@ export const Trigger = () => { ); }; -export default Trigger; \ No newline at end of file +export default Trigger; diff --git a/src/containers/Trigger/TriggerList/TriggerList.tsx b/src/containers/Trigger/TriggerList/TriggerList.tsx index 27d075e6ac..8894377db4 100644 --- a/src/containers/Trigger/TriggerList/TriggerList.tsx +++ b/src/containers/Trigger/TriggerList/TriggerList.tsx @@ -1,7 +1,8 @@ import dayjs from 'dayjs'; -import relativeTime from 'dayjs/plugin/relativeTime' +import relativeTime from 'dayjs/plugin/relativeTime'; import { useNavigate } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; + import TriggerIcon from 'assets/images/icons/Trigger/Union.svg?react'; import ClockIcon from 'assets/images/icons/Trigger/Clock.svg?react'; import ClockInactiveIcon from 'assets/images/icons/Trigger/Inactive.svg?react'; @@ -12,7 +13,7 @@ import { FULL_DATE_FORMAT, dayList } from 'common/constants'; import { List } from 'containers/List/List'; import { Tooltip } from 'components/UI/Tooltip/Tooltip'; import styles from './TriggerList.module.css'; -dayjs.extend(relativeTime) +dayjs.extend(relativeTime); const getTooltip = (frequency: any, days: any) => { const obj: any = []; @@ -118,4 +119,4 @@ export const TriggerList = () => { ); }; -export default TriggerList; \ No newline at end of file +export default TriggerList; diff --git a/src/mocks/Trigger.tsx b/src/mocks/Trigger.tsx index 1b041e0ff9..d79fb1f664 100644 --- a/src/mocks/Trigger.tsx +++ b/src/mocks/Trigger.tsx @@ -105,4 +105,4 @@ const hourlyTrigger = () => { return hourlyTrigger; }; -export { hourlyTrigger }; \ No newline at end of file +export { hourlyTrigger }; diff --git a/yarn.lock b/yarn.lock index b500e423e3..f15e5dbf24 100644 --- a/yarn.lock +++ b/yarn.lock @@ -314,6 +314,18 @@ dependencies: "@jridgewell/trace-mapping" "0.3.9" +"@date-io/core@^2.17.0": + version "2.17.0" + resolved "https://registry.yarnpkg.com/@date-io/core/-/core-2.17.0.tgz#360a4d0641f069776ed22e457876e8a8a58c205e" + integrity sha512-+EQE8xZhRM/hsY0CDTVyayMDDY5ihc4MqXCrPxooKw19yAzUIC6uUqsZeaOFNL9YKTNxYKrJP5DFgE8o5xRCOw== + +"@date-io/dayjs@^2.17.0": + version "2.17.0" + resolved "https://registry.yarnpkg.com/@date-io/dayjs/-/dayjs-2.17.0.tgz#ec3e2384136c028971ca2f78800a6877b9fdbe62" + integrity sha512-Iq1wjY5XzBh0lheFA0it6Dsyv94e8mTiNR8vuTai+KopxDkreL3YjwTmZHxkgB7/vd0RMIACStzVgWvPATnDCA== + dependencies: + "@date-io/core" "^2.17.0" + "@draft-js-plugins/editor@^4.1.4": version "4.1.4" resolved "https://registry.yarnpkg.com/@draft-js-plugins/editor/-/editor-4.1.4.tgz#456e01b032b8ef44f0c77ea777aa3c44172de892" From 78a57343d9bbe9b6fc1c16bcc1c4d2e23eb25fd7 Mon Sep 17 00:00:00 2001 From: akanshaa19 Date: Tue, 9 Jan 2024 12:53:04 +0530 Subject: [PATCH 10/17] formatting changes --- src/components/UI/Form/DateTimePicker/DateTimePicker.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UI/Form/DateTimePicker/DateTimePicker.test.tsx b/src/components/UI/Form/DateTimePicker/DateTimePicker.test.tsx index 382c35287b..81a778d5f5 100644 --- a/src/components/UI/Form/DateTimePicker/DateTimePicker.test.tsx +++ b/src/components/UI/Form/DateTimePicker/DateTimePicker.test.tsx @@ -60,6 +60,6 @@ describe('', () => { render(); const input = screen.getByRole('textbox'); fireEvent.change(input, { target: { value: '14/05/2021 10:50 AM' } }); - expect(onChangeMock).toHaveBeenCalledTimes(0); + expect(onChangeMock).toHaveBeenCalled(); }); }); From 265a3bf51bf7df16460470427e36489504f6831a Mon Sep 17 00:00:00 2001 From: akanshaa19 Date: Tue, 9 Jan 2024 12:55:04 +0530 Subject: [PATCH 11/17] formatting changes --- src/components/UI/Form/Calendar/Calendar.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/UI/Form/Calendar/Calendar.tsx b/src/components/UI/Form/Calendar/Calendar.tsx index a11e6d4ee4..f26100ea6c 100644 --- a/src/components/UI/Form/Calendar/Calendar.tsx +++ b/src/components/UI/Form/Calendar/Calendar.tsx @@ -1,7 +1,6 @@ import { useState } from 'react'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; -import dayjs from 'dayjs'; import { getIn } from 'formik'; import styles from './Calendar.module.css'; From 2bb0437a8f48e429c010a8af91781a0e19dda9a4 Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Thu, 11 Jan 2024 11:31:40 +0530 Subject: [PATCH 12/17] review changes --- src/common/constants.ts | 10 +++++++- .../ConversationList/ConversationList.tsx | 5 ++-- .../Chat/ChatMessages/ChatMessages.tsx | 8 +++++-- .../ConsultingList/ConsultingList.tsx | 3 ++- .../ExportConsulting/ExportConsulting.tsx | 4 ++-- src/containers/Flow/FlowList/FlowList.tsx | 6 ++--- src/containers/LastLogin/LastLogin.tsx | 4 ++-- .../NotificationList/NotificationList.tsx | 3 ++- .../OrganizationList/OrganizationList.tsx | 5 +++- .../Contact/ContactHistory/ContactHistory.tsx | 4 ++-- .../Profile/Contact/ContactProfile.tsx | 6 ++--- src/containers/Search/Search.tsx | 15 ++++++++---- .../OrganizationFlows/OrganisationFlows.tsx | 20 ++++++++++------ .../SheetIntegrationList.tsx | 4 ++-- src/containers/Template/List/Template.tsx | 4 ++-- src/containers/Ticket/Ticket.tsx | 6 ++--- .../TicketList/ExportTicket/ExportTicket.tsx | 3 ++- .../Ticket/TicketList/TicketList.tsx | 3 ++- src/containers/Trigger/Trigger.tsx | 24 ++++++++++++------- .../Trigger/TriggerList/TriggerList.tsx | 4 ++-- .../WebhookLogsList/WebhookLogsList.tsx | 4 ++-- 21 files changed, 92 insertions(+), 53 deletions(-) diff --git a/src/common/constants.ts b/src/common/constants.ts index f9bd98d122..4f030b3dc8 100644 --- a/src/common/constants.ts +++ b/src/common/constants.ts @@ -4,8 +4,16 @@ import * as Yup from 'yup'; export const SIDE_DRAWER_WIDTH = 233; export const DATE_FORMAT = 'DD/MM/YY'; export const FULL_DATE_FORMAT = 'DD/MM/YYYY'; +export const FULL_DATE_FORMAT2 = 'YYYY-MM-DD'; +export const FULL_DATE_FORMAT_WITH_MONTH = 'DD MMM YYYY'; export const TIME_FORMAT = 'HH:mm'; -export const DATE_TIME_FORMAT = 'DD/MM/YYYY, HH:mm:ss'; +export const FULL_TIME_FORMAT = 'HH:mm:ss'; +export const FULL_TIME_FORMAT2 = 'THH:mm:ss'; +export const FULL_DATE_TIME_FORMAT = 'DD/MM/YYYY, HH:mm:ss'; +export const DATE_TIME_FORMAT = 'DD/MM/YYYY, HH:mm'; +export const DATE_TIME_FORMAT2 = 'MMMM DD, YYYY, [at] HH:mm:ss'; +export const DATE_TIME_FORMAT_WITH_AMPM = 'DD/MM/YYYY_hh:mmA'; +export const DATE_TIME_FORMAT_WITH_AMPM2 = 'DD MMM YYYY hh:mm a'; export const SIMULATOR_CONTACT = '9876543210'; export const FLOW_STATUS_PUBLISHED = 'published'; export const SIMULATOR_NUMBER_START = '9876543210'; diff --git a/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx b/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx index 690db9427c..2798fdeeda 100644 --- a/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx +++ b/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx @@ -15,6 +15,7 @@ import { DEFAULT_MESSAGE_LIMIT, DEFAULT_CONTACT_LOADMORE_LIMIT, DEFAULT_MESSAGE_LOADMORE_LIMIT, + FULL_DATE_FORMAT2, } from 'common/constants'; import { updateConversations } from 'services/ChatService'; import { showMessages } from 'common/responsive'; @@ -128,8 +129,8 @@ export const ConversationList = ({ filter.includeLabels = params.includeLabels.map((obj: any) => obj.id); if (params.dateFrom) { filter.dateRange = { - from: dayjs(params.dateFrom).format('YYYY-MM-DD'), - to: dayjs(params.dateTo).format('YYYY-MM-DD'), + from: dayjs(params.dateFrom).format(FULL_DATE_FORMAT2), + to: dayjs(params.dateTo).format(FULL_DATE_FORMAT2), }; } } diff --git a/src/containers/Chat/ChatMessages/ChatMessages.tsx b/src/containers/Chat/ChatMessages/ChatMessages.tsx index 69198b645f..0fde3f210e 100644 --- a/src/containers/Chat/ChatMessages/ChatMessages.tsx +++ b/src/containers/Chat/ChatMessages/ChatMessages.tsx @@ -18,6 +18,7 @@ import { DEFAULT_MESSAGE_LIMIT, DEFAULT_CONTACT_LIMIT, DEFAULT_MESSAGE_LOADMORE_LIMIT, + FULL_DATE_FORMAT2, } from '../../../common/constants'; import { SEARCH_QUERY } from '../../../graphql/queries/Search'; import { @@ -510,14 +511,17 @@ 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 && dayjs(currentDate).format('YYYY-MM-DD') < dayjs().format('YYYY-MM-DD')) { + if ( + !nextDate && + dayjs(currentDate).format(FULL_DATE_FORMAT2) < dayjs().format(FULL_DATE_FORMAT2) + ) { return true; } // if the day is changed then show day separator if ( nextDate && - dayjs(currentDate).format('YYYY-MM-DD') > dayjs(nextDate).format('YYYY-MM-DD') + dayjs(currentDate).format(FULL_DATE_FORMAT2) > dayjs(nextDate).format(FULL_DATE_FORMAT2) ) { return true; } diff --git a/src/containers/Consulting/ConsultingList/ConsultingList.tsx b/src/containers/Consulting/ConsultingList/ConsultingList.tsx index 09127095a0..d838ead3e3 100644 --- a/src/containers/Consulting/ConsultingList/ConsultingList.tsx +++ b/src/containers/Consulting/ConsultingList/ConsultingList.tsx @@ -9,6 +9,7 @@ import { Consulting } from '../Consulting'; import { ExportConsulting } from './ExportConsulting/ExportConsulting'; import { GET_CONSULTING_HOURS, GET_CONSULTING_HOURS_COUNT } from 'graphql/queries/Consulting'; import styles from './ConsultingList.module.css'; +import { DATE_TIME_FORMAT_WITH_AMPM2, FULL_DATE_FORMAT_WITH_MONTH } from 'common/constants'; const ConsultingList = () => { const { t } = useTranslation(); @@ -55,7 +56,7 @@ const ConsultingList = () => { ); const getOtherColumn = (label: any, isDate: boolean = false) => { - const text = isDate ? dayjs(label).format('DD MMM YYYY hh:mm a') : label; + const text = isDate ? dayjs(label).format(FULL_DATE_FORMAT_WITH_MONTH) : label; return (

{text}

diff --git a/src/containers/Consulting/ConsultingList/ExportConsulting/ExportConsulting.tsx b/src/containers/Consulting/ConsultingList/ExportConsulting/ExportConsulting.tsx index 83a44437f6..2224505c8c 100644 --- a/src/containers/Consulting/ConsultingList/ExportConsulting/ExportConsulting.tsx +++ b/src/containers/Consulting/ConsultingList/ExportConsulting/ExportConsulting.tsx @@ -1,7 +1,7 @@ import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete'; import { useLazyQuery, useQuery } from '@apollo/client'; import { FILTER_ORGANIZATIONS } from 'graphql/queries/Organization'; -import { setVariables } from 'common/constants'; +import { FULL_DATE_FORMAT2, setVariables } from 'common/constants'; import { EXPORT_CONSULTING_HOURS } from 'graphql/queries/Consulting'; import { Field, Form, Formik } from 'formik'; import * as Yup from 'yup'; @@ -19,7 +19,7 @@ export interface ExportConsultingPropTypes { setFilters: any; } -const formatDate = (value: any) => dayjs(value).format('YYYY-MM-DD'); +const formatDate = (value: any) => dayjs(value).format(FULL_DATE_FORMAT2); export const ExportConsulting = ({ setFilters }: ExportConsultingPropTypes) => { const { data: organizationList } = useQuery(FILTER_ORGANIZATIONS, { diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx index bd13e11d56..fc09f8449c 100644 --- a/src/containers/Flow/FlowList/FlowList.tsx +++ b/src/containers/Flow/FlowList/FlowList.tsx @@ -15,7 +15,7 @@ import { DELETE_FLOW, IMPORT_FLOW } from 'graphql/mutations/Flow'; import { List } from 'containers/List/List'; import { ImportButton } from 'components/UI/ImportButton/ImportButton'; import Loading from 'components/UI/Layout/Loading/Loading'; -import { DATE_TIME_FORMAT } from 'common/constants'; +import { FULL_DATE_TIME_FORMAT } from 'common/constants'; import { exportFlowMethod, organizationHasDynamicRole } from 'common/utils'; import styles from './FlowList.module.css'; import { GET_TAGS } from 'graphql/queries/Tags'; @@ -40,13 +40,13 @@ const getName = (text: string, keywordsList: any, roles: any) => { const getDate = (date: string, fallback: string = '') => (
- {date ? dayjs(date).format(DATE_TIME_FORMAT) : fallback} + {date ? dayjs(date).format(FULL_DATE_TIME_FORMAT) : fallback}
); const getLastPublished = (date: string, fallback: string = '') => date ? ( -
{dayjs(date).format(DATE_TIME_FORMAT)}
+
{dayjs(date).format(FULL_DATE_TIME_FORMAT)}
) : (
{fallback}
); diff --git a/src/containers/LastLogin/LastLogin.tsx b/src/containers/LastLogin/LastLogin.tsx index 8ce7219f3e..6b94e55b66 100644 --- a/src/containers/LastLogin/LastLogin.tsx +++ b/src/containers/LastLogin/LastLogin.tsx @@ -2,7 +2,7 @@ import dayjs from 'dayjs'; import { useTranslation } from 'react-i18next'; import { getAuthSession } from 'services/AuthService'; -import { DATE_TIME_FORMAT, GUPSHUP_ENTERPRISE_SHORTCODE } from 'common/constants'; +import { FULL_DATE_TIME_FORMAT, GUPSHUP_ENTERPRISE_SHORTCODE } from 'common/constants'; import styles from './LastLogin.module.css'; import { useContext } from 'react'; @@ -20,7 +20,7 @@ export const LastLogin = ({ drawerOpen }: LastLoginProps) => { provider === GUPSHUP_ENTERPRISE_SHORTCODE ? styles.LastLoginEnterprise : styles.LastLogin; return drawerOpen ? (
- {t('Last login')}: {dayjs(lastLogin).format(DATE_TIME_FORMAT)} + {t('Last login')}: {dayjs(lastLogin).format(FULL_DATE_TIME_FORMAT)}
) : null; }; diff --git a/src/containers/NotificationList/NotificationList.tsx b/src/containers/NotificationList/NotificationList.tsx index a981f52c81..6d108c0f4b 100644 --- a/src/containers/NotificationList/NotificationList.tsx +++ b/src/containers/NotificationList/NotificationList.tsx @@ -16,11 +16,12 @@ import { copyToClipboard } from 'common/utils'; import { FILTER_NOTIFICATIONS, GET_NOTIFICATIONS_COUNT } from 'graphql/queries/Notifications'; import MARK_NOTIFICATIONS_AS_READ from 'graphql/mutations/Notifications'; import styles from './NotificationList.module.css'; +import { DATE_TIME_FORMAT } from 'common/constants'; const getDot = (isRead: boolean) =>
{!isRead ?
: null}
; const getTime = (time: string) => ( -
{dayjs(time).format('DD-MM-YYYY hh:mm')}
+
{dayjs(time).format(DATE_TIME_FORMAT)}
); const getText = (text: string) =>
{text}
; diff --git a/src/containers/OrganizationList/OrganizationList.tsx b/src/containers/OrganizationList/OrganizationList.tsx index e834bb8ca0..7d8e57e648 100644 --- a/src/containers/OrganizationList/OrganizationList.tsx +++ b/src/containers/OrganizationList/OrganizationList.tsx @@ -19,6 +19,7 @@ import { Extensions } from 'containers/Extensions/Extensions'; import { OrganizationCustomer } from 'containers/Organization/OrganizationCustomer/OrganizationCustomer'; import { Dropdown } from 'components/UI/Form/Dropdown/Dropdown'; import styles from './OrganizationList.module.css'; +import { FULL_DATE_FORMAT_WITH_MONTH } from 'common/constants'; export interface OrganizationListProps { openExtensionModal?: boolean; @@ -54,7 +55,9 @@ export const OrganizationList = ({

{label}
- {dayjs(insertedAt).format('DD MMM YYYY')} + + {dayjs(insertedAt).format(FULL_DATE_FORMAT_WITH_MONTH)} +

); diff --git a/src/containers/Profile/Contact/ContactHistory/ContactHistory.tsx b/src/containers/Profile/Contact/ContactHistory/ContactHistory.tsx index 21de5745a2..33a31651e1 100644 --- a/src/containers/Profile/Contact/ContactHistory/ContactHistory.tsx +++ b/src/containers/Profile/Contact/ContactHistory/ContactHistory.tsx @@ -6,7 +6,7 @@ import { Button } from 'components/UI/Form/Button/Button'; import Loading from 'components/UI/Layout/Loading/Loading'; import { COUNT_CONTACT_HISTORY, GET_CONTACT_HISTORY } from 'graphql/queries/Contact'; import setLogs from 'config/logs'; -import { DATE_TIME_FORMAT } from 'common/constants'; +import { FULL_DATE_TIME_FORMAT } from 'common/constants'; import styles from './ContactHistory.module.css'; export interface ContactHistoryProps { @@ -139,7 +139,7 @@ export const ContactHistory = ({ contactId, profileId }: ContactHistoryProps) => return (
{label}
-
{dayjs(insertedAt).format(DATE_TIME_FORMAT)}
+
{dayjs(insertedAt).format(FULL_DATE_TIME_FORMAT)}
); }); diff --git a/src/containers/Profile/Contact/ContactProfile.tsx b/src/containers/Profile/Contact/ContactProfile.tsx index 1bc568164c..a6320c4dc7 100644 --- a/src/containers/Profile/Contact/ContactProfile.tsx +++ b/src/containers/Profile/Contact/ContactProfile.tsx @@ -5,7 +5,7 @@ import { useParams } from 'react-router-dom'; import { getOrganizationServices } from 'services/AuthService'; import { FormControl, FormControlLabel, Radio, RadioGroup } from '@mui/material'; -import { DATE_TIME_FORMAT } from 'common/constants'; +import { FULL_DATE_TIME_FORMAT } from 'common/constants'; import { GET_CONTACT_DETAILS, GET_CONTACT_PROFILES } from 'graphql/queries/Contact'; import Loading from 'components/UI/Layout/Loading/Loading'; import { ContactDescription } from './ContactDescription/ContactDescription'; @@ -86,14 +86,14 @@ export const ContactProfile = () => { let optinMethod = ''; if (contactData.optinMethod) { optinMethod = `via ${contactData.optinMethod} on ${dayjs(contactData.optinTime).format( - DATE_TIME_FORMAT + FULL_DATE_TIME_FORMAT )}`; } let optoutMethod = ''; if (contactData.optoutMethod) { optoutMethod = `via ${contactData.optoutMethod} on ${dayjs(contactData.optoutTime).format( - DATE_TIME_FORMAT + FULL_DATE_TIME_FORMAT )}`; } diff --git a/src/containers/Search/Search.tsx b/src/containers/Search/Search.tsx index e60d1aaddb..c9add1603b 100644 --- a/src/containers/Search/Search.tsx +++ b/src/containers/Search/Search.tsx @@ -18,7 +18,12 @@ import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete'; import { Calendar } from 'components/UI/Form/Calendar/Calendar'; import { DialogBox } from 'components/UI/DialogBox/DialogBox'; import Loading from 'components/UI/Layout/Loading/Loading'; -import { DEFAULT_CONTACT_LIMIT, DEFAULT_MESSAGE_LIMIT, setVariables } from 'common/constants'; +import { + DEFAULT_CONTACT_LIMIT, + DEFAULT_MESSAGE_LIMIT, + FULL_DATE_FORMAT2, + setVariables, +} from 'common/constants'; import { Checkbox } from 'components/UI/Form/Checkbox/Checkbox'; import { getObject } from 'common/utils'; import styles from './Search.module.css'; @@ -68,8 +73,8 @@ const getPayload = (payload: any) => { if (!useExpression && dateFrom && dateFrom !== 'Invalid date') { const dateRange = { dateRange: { - to: dayjs(dateTo).format('YYYY-MM-DD'), - from: dayjs(dateFrom).format('YYYY-MM-DD'), + to: dayjs(dateTo).format(FULL_DATE_FORMAT2), + from: dayjs(dateFrom).format(FULL_DATE_FORMAT2), }, }; args.filter = Object.assign(args.filter, dateRange); @@ -236,8 +241,8 @@ export const Search = ({ type, search, searchId, ...props }: SearchProps) => { if (props.searchParam.dateFrom && props.searchParam.dateFrom !== 'Invalid date') { const dateRange = { dateRange: { - to: dayjs(props.searchParam.dateTo).format('YYYY-MM-DD'), - from: dayjs(props.searchParam.dateFrom).format('YYYY-MM-DD'), + to: dayjs(props.searchParam.dateTo).format(FULL_DATE_FORMAT2), + from: dayjs(props.searchParam.dateFrom).format(FULL_DATE_FORMAT2), }, }; args.filter = Object.assign(args.filter, dateRange); diff --git a/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx b/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx index b569159b12..ba998b24fb 100644 --- a/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx +++ b/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx @@ -17,7 +17,13 @@ import { UPDATE_ORGANIZATION, } from 'graphql/mutations/Organization'; import Settingicon from 'assets/images/icons/Settings/Settings.svg?react'; -import { dayList, FLOW_STATUS_PUBLISHED, setVariables } from 'common/constants'; +import { + dayList, + FLOW_STATUS_PUBLISHED, + FULL_DATE_FORMAT2, + FULL_TIME_FORMAT2, + setVariables, +} from 'common/constants'; import styles from './OrganisationFlows.module.css'; import dayjs from 'dayjs'; @@ -76,8 +82,8 @@ export const OrganisationFlows = () => { const getEnabledDays = (data: any) => data.filter((option: any) => option.enabled); const setOutOfOffice = (data: any) => { - setStartTime(dayjs(`${dayjs().format('YYYY-MM-DD')}T${data.startTime}`)); - setEndTime(dayjs(`${dayjs().format('YYYY-MM-DD')}T${data.endTime}`)); + setStartTime(dayjs(`${dayjs().format(FULL_DATE_FORMAT2)}T${data.startTime}`)); + setEndTime(dayjs(`${dayjs().format(FULL_DATE_FORMAT2)}T${data.endTime}`)); setEnabledDays(getEnabledDays(data.enabledDays)); }; @@ -159,8 +165,8 @@ export const OrganisationFlows = () => { const handleAllDayCheck = (addDayCheck: boolean) => { if (!allDayCheck) { - setStartTime(dayjs(`${dayjs().format('YYYY-MM-DD')}T00:00:00`)); - setEndTime(dayjs(`${dayjs().format('YYYY-MM-DD')}T23:59:00`)); + setStartTime(dayjs(`${dayjs().format(FULL_DATE_FORMAT2)}T00:00:00`)); + setEndTime(dayjs(`${dayjs().format(FULL_DATE_FORMAT2)}T23:59:00`)); } setAllDayCheck(addDayCheck); }; @@ -358,9 +364,9 @@ export const OrganisationFlows = () => { defaultFlowId: payload.defaultFlowId ? payload.defaultFlowId.id : null, enabled: payload.hours, enabledDays: assignDays(payload.enabledDays), - endTime: payload.endTime, + endTime: dayjs(payload.endTime).format(FULL_TIME_FORMAT2), flowId: payload.flowId ? payload.flowId.id : null, - startTime: payload.startTime, + startTime: dayjs(payload.startTime).format(FULL_TIME_FORMAT2), }, newcontactFlowId: newContactFlowId, optinFlowId, diff --git a/src/containers/SheetIntegration/SheetIntegrationList/SheetIntegrationList.tsx b/src/containers/SheetIntegration/SheetIntegrationList/SheetIntegrationList.tsx index 735064473b..fb2e400ba8 100644 --- a/src/containers/SheetIntegration/SheetIntegrationList/SheetIntegrationList.tsx +++ b/src/containers/SheetIntegration/SheetIntegrationList/SheetIntegrationList.tsx @@ -9,7 +9,7 @@ import { setNotification } from 'common/notification'; import { useMutation } from '@apollo/client'; import { List } from 'containers/List/List'; import dayjs from 'dayjs'; -import { DATE_TIME_FORMAT } from 'common/constants'; +import { FULL_DATE_TIME_FORMAT } from 'common/constants'; import { DialogBox } from 'components/UI/DialogBox/DialogBox'; import styles from './SheetIntegrationList.module.css'; import Loading from 'components/UI/Layout/Loading/Loading'; @@ -37,7 +37,7 @@ const getName = (text: string, sheetDataCount: string, type: SheetTypes) => ( ); const getLastSyncedAt = (date: string, fallback: string = '') => (
- {date ? dayjs(date).format(DATE_TIME_FORMAT) : fallback} + {date ? dayjs(date).format(FULL_DATE_TIME_FORMAT) : fallback}
); diff --git a/src/containers/Template/List/Template.tsx b/src/containers/Template/List/Template.tsx index 40ee97a85c..782127f8ff 100644 --- a/src/containers/Template/List/Template.tsx +++ b/src/containers/Template/List/Template.tsx @@ -7,7 +7,7 @@ import { useMutation, useQuery } from '@apollo/client'; import { List } from 'containers/List/List'; import { WhatsAppToJsx } from 'common/RichEditor'; -import { DATE_TIME_FORMAT, GUPSHUP_ENTERPRISE_SHORTCODE } from 'common/constants'; +import { FULL_DATE_TIME_FORMAT, GUPSHUP_ENTERPRISE_SHORTCODE } from 'common/constants'; import { GET_TEMPLATES_COUNT, FILTER_TEMPLATES, @@ -41,7 +41,7 @@ const getBody = (text: string) =>

{WhatsAppToJsx const getReason = (reason: string) =>

{reason}

; const getUpdatedAt = (date: string) => ( -
{dayjs(date).format(DATE_TIME_FORMAT)}
+
{dayjs(date).format(FULL_DATE_TIME_FORMAT)}
); const getTranslations = (language: any, data: string) => { diff --git a/src/containers/Ticket/Ticket.tsx b/src/containers/Ticket/Ticket.tsx index beac88edad..237e286f46 100644 --- a/src/containers/Ticket/Ticket.tsx +++ b/src/containers/Ticket/Ticket.tsx @@ -13,7 +13,7 @@ import { Dropdown } from 'components/UI/Form/Dropdown/Dropdown'; import dayjs from 'dayjs'; import { useQuery } from '@apollo/client'; import { GET_USERS } from 'graphql/queries/User'; -import { setVariables } from 'common/constants'; +import { DATE_TIME_FORMAT2, setVariables } from 'common/constants'; import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete'; import Loading from 'components/UI/Layout/Loading/Loading'; @@ -32,11 +32,11 @@ const TicketDetails = ({ form }: any) => {

Opened: - {dayjs(values.insertedAt).format('MMMM DD, YYYY, [at] HH:mm:ss')} + {dayjs(values.insertedAt).format(DATE_TIME_FORMAT2)}

Last updated: - {dayjs(values.updatedAt).format('MMMM DD, YYYY, [at] HH:mm:ss')} + {dayjs(values.updatedAt).format(DATE_TIME_FORMAT2)}

); diff --git a/src/containers/Ticket/TicketList/ExportTicket/ExportTicket.tsx b/src/containers/Ticket/TicketList/ExportTicket/ExportTicket.tsx index 00b612b3ce..155173b780 100644 --- a/src/containers/Ticket/TicketList/ExportTicket/ExportTicket.tsx +++ b/src/containers/Ticket/TicketList/ExportTicket/ExportTicket.tsx @@ -10,12 +10,13 @@ import { downloadFile } from 'common/utils'; import styles from './ExportTicket.module.css'; import { EXPORT_SUPPORT_TICKETS } from 'graphql/queries/Ticket'; import { DialogBox } from 'components/UI/DialogBox/DialogBox'; +import { FULL_DATE_FORMAT2 } from 'common/constants'; export interface ExportTicketPropTypes { setShowExportDialog: any; } -const formatDate = (value: any) => dayjs(value).format('YYYY-MM-DD'); +const formatDate = (value: any) => dayjs(value).format(FULL_DATE_FORMAT2); export const ExportTicket = ({ setShowExportDialog }: ExportTicketPropTypes) => { const { t } = useTranslation(); diff --git a/src/containers/Ticket/TicketList/TicketList.tsx b/src/containers/Ticket/TicketList/TicketList.tsx index 9f622fda76..69060f1b93 100644 --- a/src/containers/Ticket/TicketList/TicketList.tsx +++ b/src/containers/Ticket/TicketList/TicketList.tsx @@ -17,13 +17,14 @@ import { Dropdown } from 'components/UI/Form/Dropdown/Dropdown'; import { getUserSession } from 'services/AuthService'; import styles from './TicketList.module.css'; import { BulkAction } from './BulkAction/BulkAction'; +import { DATE_TIME_FORMAT } from 'common/constants'; const getId = (id: any) =>
{id}
; const getBody = (body: any) =>
{body}
; const getTopic = (topic: any) =>
{topic}
; const getInsertedAt = (insertedAt: string) => ( -
{dayjs(insertedAt).format('DD-MM-YYYY hh:mm')}
+
{dayjs(insertedAt).format(DATE_TIME_FORMAT)}
); const getUser = (user: any) =>
{user?.name}
; diff --git a/src/containers/Trigger/Trigger.tsx b/src/containers/Trigger/Trigger.tsx index 7404c45368..973d28010d 100644 --- a/src/containers/Trigger/Trigger.tsx +++ b/src/containers/Trigger/Trigger.tsx @@ -8,7 +8,15 @@ import utc from 'dayjs/plugin/utc'; import { useTranslation } from 'react-i18next'; import TriggerIcon from 'assets/images/icons/Trigger/Union.svg?react'; -import { dateList, dayList, FLOW_STATUS_PUBLISHED, hourList, setVariables } from 'common/constants'; +import { + dateList, + dayList, + FLOW_STATUS_PUBLISHED, + FULL_DATE_FORMAT2, + hourList, + setVariables, + FULL_TIME_FORMAT2, +} from 'common/constants'; import { FormLayout } from 'containers/Form/FormLayout'; import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete'; import { Loading } from 'components/UI/Layout/Loading/Loading'; @@ -30,7 +38,7 @@ dayjs.extend(utc); const checkDateTimeValidation = (startAtValue: string, startDateValue: string) => { const isDateAhead = dayjs(startDateValue).isAfter(dayjs()); - const isTimeAhead = startAtValue > dayjs().format('THH:mm:ss'); + const isTimeAhead = startAtValue > dayjs().format(FULL_TIME_FORMAT2); if (!isDateAhead) { // if start date is current date then only check for time @@ -49,9 +57,9 @@ const setPayload = (payload: any, roles: any) => { payloadCopy; const groups = groupIds.map((group: any) => parseInt(group.id)); - const startAtTime = dayjs(startTime).format('THH:mm:ss'); + const startAtTime = dayjs(startTime).format(FULL_TIME_FORMAT2); // covert the time to UTC - const startAt = dayjs(`${dayjs(startDate).format('YYYY-MM-DD')}${startAtTime}`).utc(); + const startAt = dayjs(`${dayjs(startDate).format(FULL_DATE_FORMAT2)}${startAtTime}`).utc(); const updatedPayload = { isActive, @@ -60,9 +68,9 @@ const setPayload = (payload: any, roles: any) => { days: [], hours: [], groupIds: groups, - startDate: dayjs(startAt).utc().format('YYYY-MM-DD'), - endDate: dayjs(endDate).utc().format('YYYY-MM-DD'), - startTime: dayjs(startAt).utc().format('THH:mm:ss'), + startDate: dayjs(startAt).utc().format(FULL_DATE_FORMAT2), + endDate: dayjs(endDate).utc().format(FULL_DATE_FORMAT2), + startTime: dayjs(startAt).utc().format(FULL_TIME_FORMAT2), frequency: frequency.value, roles: payload.roles, }; @@ -405,7 +413,7 @@ export const Trigger = () => { }: any) => { setIsRepeating(isRepeatingValue); setIsActive(isCopyState ? true : isActiveValue); - setEndDate(dayjs()); + setEndDate(dayjs(endDateValue)); const { values, options, placeholder } = getFrequencyDetails( frequencyValue, diff --git a/src/containers/Trigger/TriggerList/TriggerList.tsx b/src/containers/Trigger/TriggerList/TriggerList.tsx index 8894377db4..320d7a9137 100644 --- a/src/containers/Trigger/TriggerList/TriggerList.tsx +++ b/src/containers/Trigger/TriggerList/TriggerList.tsx @@ -9,7 +9,7 @@ import ClockInactiveIcon from 'assets/images/icons/Trigger/Inactive.svg?react'; import DuplicateIcon from 'assets/images/icons/Duplicate.svg?react'; import { TRIGGER_LIST_QUERY, TRIGGER_QUERY_COUNT } from 'graphql/queries/Trigger'; import { DELETE_TRIGGER } from 'graphql/mutations/Trigger'; -import { FULL_DATE_FORMAT, dayList } from 'common/constants'; +import { DATE_TIME_FORMAT_WITH_AMPM, FULL_DATE_FORMAT, dayList } from 'common/constants'; import { List } from 'containers/List/List'; import { Tooltip } from 'components/UI/Tooltip/Tooltip'; import styles from './TriggerList.module.css'; @@ -35,7 +35,7 @@ const getName = ({ flow, startAt, frequency, days, isActive, nextTriggerAt }: an

- {`${flow.name}_${dayjs(startAt).format('DD/MM/YYYY_hh:mmA')}`} + {`${flow.name}_${dayjs(startAt).format(DATE_TIME_FORMAT_WITH_AMPM)}`}

{isActive ? <>Next trigger {dayjs(nextTriggerAt).fromNow()} : 'Trigger in inactive'} diff --git a/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx b/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx index d1005c5653..1edafdc59c 100644 --- a/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx +++ b/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx @@ -11,11 +11,11 @@ import Menu from 'components/UI/Menu/Menu'; import { Button } from 'components/UI/Form/Button/Button'; import { FILTER_WEBHOOK_LOGS, GET_WEBHOOK_LOGS_COUNT } from 'graphql/queries/WebhookLogs'; import { copyToClipboard, slicedString } from 'common/utils'; -import { DATE_TIME_FORMAT } from 'common/constants'; +import { FULL_DATE_TIME_FORMAT } from 'common/constants'; import styles from './WebhookLogsList.module.css'; const getTime = (time: string) => ( -
{dayjs(time).format(DATE_TIME_FORMAT)}
+
{dayjs(time).format(FULL_DATE_TIME_FORMAT)}
); /* istanbul ignore next */ From 56b93ac942864ee3b88c7f6671a329247560255c Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Thu, 11 Jan 2024 11:34:36 +0530 Subject: [PATCH 13/17] review changes --- src/containers/Consulting/ConsultingList/ConsultingList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/Consulting/ConsultingList/ConsultingList.tsx b/src/containers/Consulting/ConsultingList/ConsultingList.tsx index d838ead3e3..627ffcde91 100644 --- a/src/containers/Consulting/ConsultingList/ConsultingList.tsx +++ b/src/containers/Consulting/ConsultingList/ConsultingList.tsx @@ -9,7 +9,7 @@ import { Consulting } from '../Consulting'; import { ExportConsulting } from './ExportConsulting/ExportConsulting'; import { GET_CONSULTING_HOURS, GET_CONSULTING_HOURS_COUNT } from 'graphql/queries/Consulting'; import styles from './ConsultingList.module.css'; -import { DATE_TIME_FORMAT_WITH_AMPM2, FULL_DATE_FORMAT_WITH_MONTH } from 'common/constants'; +import { FULL_DATE_FORMAT_WITH_MONTH } from 'common/constants'; const ConsultingList = () => { const { t } = useTranslation(); From 0a51289493a3f2162ed1be7bb29db87f0ae9bbc1 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Fri, 12 Jan 2024 08:34:31 +0530 Subject: [PATCH 14/17] Update src/common/constants.ts Co-authored-by: Mohd Shamoon <32592458+mdshamoon@users.noreply.github.com> --- src/common/constants.ts | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/common/constants.ts b/src/common/constants.ts index 4f030b3dc8..bd8104629e 100644 --- a/src/common/constants.ts +++ b/src/common/constants.ts @@ -7,13 +7,14 @@ export const FULL_DATE_FORMAT = 'DD/MM/YYYY'; export const FULL_DATE_FORMAT2 = 'YYYY-MM-DD'; export const FULL_DATE_FORMAT_WITH_MONTH = 'DD MMM YYYY'; export const TIME_FORMAT = 'HH:mm'; -export const FULL_TIME_FORMAT = 'HH:mm:ss'; -export const FULL_TIME_FORMAT2 = 'THH:mm:ss'; -export const FULL_DATE_TIME_FORMAT = 'DD/MM/YYYY, HH:mm:ss'; -export const DATE_TIME_FORMAT = 'DD/MM/YYYY, HH:mm'; -export const DATE_TIME_FORMAT2 = 'MMMM DD, YYYY, [at] HH:mm:ss'; -export const DATE_TIME_FORMAT_WITH_AMPM = 'DD/MM/YYYY_hh:mmA'; -export const DATE_TIME_FORMAT_WITH_AMPM2 = 'DD MMM YYYY hh:mm a'; +export const SHORT_TIME_FORMAT = 'HH:mm'; +export const LONG_TIME_FORMAT = 'HH:mm:ss'; +export const EXTENDED_TIME_FORMAT = 'THH:mm:ss'; +export const STANDARD_DATE_TIME_FORMAT = 'DD/MM/YYYY, HH:mm:ss'; +export const SHORT_DATE_TIME_FORMAT_ = 'DD/MM/YYYY, HH:mm'; +export const EXTENDED_DATE_TIME_FORMAT = 'MMMM DD, YYYY, [at] HH:mm:ss'; +export const DATE_TIME_FORMAT_WITH_AMPM_SHORT = 'DD/MM/YYYY_hh:mmA'; +export const DATE_TIME_FORMAT_WITH_AMPM_LONG = 'DD MMM YYYY hh:mm a'; export const SIMULATOR_CONTACT = '9876543210'; export const FLOW_STATUS_PUBLISHED = 'published'; export const SIMULATOR_NUMBER_START = '9876543210'; From 1a95b87e7d340703bd3d9df4c0211e102efd26bb Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Fri, 12 Jan 2024 08:34:47 +0530 Subject: [PATCH 15/17] Update src/common/constants.ts Co-authored-by: Mohd Shamoon <32592458+mdshamoon@users.noreply.github.com> --- src/common/constants.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/common/constants.ts b/src/common/constants.ts index bd8104629e..d7d4fb400f 100644 --- a/src/common/constants.ts +++ b/src/common/constants.ts @@ -2,10 +2,10 @@ import dayjs from 'dayjs'; import * as Yup from 'yup'; export const SIDE_DRAWER_WIDTH = 233; -export const DATE_FORMAT = 'DD/MM/YY'; -export const FULL_DATE_FORMAT = 'DD/MM/YYYY'; -export const FULL_DATE_FORMAT2 = 'YYYY-MM-DD'; -export const FULL_DATE_FORMAT_WITH_MONTH = 'DD MMM YYYY'; +export const SHORT_DATE_FORMAT = 'DD/MM/YY'; +export const LONG_DATE_FORMAT = 'DD/MM/YYYY'; +export const ISO_DATE_FORMAT = 'YYYY-MM-DD'; +export const DATE_FORMAT_WITH_MONTH = 'DD MMM YYYY'; export const TIME_FORMAT = 'HH:mm'; export const SHORT_TIME_FORMAT = 'HH:mm'; export const LONG_TIME_FORMAT = 'HH:mm:ss'; From f05366dab47e89a8b0e49794cf36260dde11525c Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Fri, 12 Jan 2024 09:13:25 +0530 Subject: [PATCH 16/17] review changes --- src/common/constants.ts | 8 +++++--- .../UI/Form/Calendar/Calendar.test.tsx | 3 ++- src/components/UI/Form/Calendar/Calendar.tsx | 3 ++- .../UI/Form/DateTimePicker/DateTimePicker.tsx | 3 ++- src/components/simulator/Simulator.tsx | 4 ++-- .../ChatConversation/ChatConversation.test.tsx | 4 ++-- .../ChatConversation/ChatConversation.tsx | 4 ++-- .../ConversationList/ConversationList.tsx | 6 +++--- .../ChatMessage/ChatMessage.test.tsx | 4 ++-- .../ChatMessages/ChatMessage/ChatMessage.tsx | 14 +++++++------- .../Chat/ChatMessages/ChatMessages.tsx | 6 +++--- .../Consulting/ConsultingList/ConsultingList.tsx | 4 ++-- .../ExportConsulting/ExportConsulting.tsx | 4 ++-- src/containers/Flow/FlowList/FlowList.tsx | 6 +++--- src/containers/LastLogin/LastLogin.tsx | 4 ++-- .../NotificationList/NotificationList.tsx | 4 ++-- .../OrganizationList/OrganizationList.tsx | 4 ++-- .../Contact/ContactHistory/ContactHistory.tsx | 4 ++-- .../Profile/Contact/ContactProfile.tsx | 6 +++--- src/containers/Search/Search.tsx | 10 +++++----- .../OrganizationFlows/OrganisationFlows.tsx | 16 ++++++++-------- .../SheetIntegrationList.tsx | 4 ++-- src/containers/Template/List/Template.tsx | 4 ++-- src/containers/Ticket/Ticket.tsx | 6 +++--- .../TicketList/ExportTicket/ExportTicket.tsx | 4 ++-- src/containers/Ticket/TicketList/TicketList.tsx | 4 ++-- src/containers/Trigger/Trigger.tsx | 16 ++++++++-------- .../Trigger/TriggerList/TriggerList.tsx | 6 +++--- .../WebhookLogsList/WebhookLogsList.tsx | 4 ++-- src/mocks/Trigger.tsx | 5 ++--- 30 files changed, 89 insertions(+), 85 deletions(-) diff --git a/src/common/constants.ts b/src/common/constants.ts index d7d4fb400f..35004c485b 100644 --- a/src/common/constants.ts +++ b/src/common/constants.ts @@ -5,15 +5,17 @@ export const SIDE_DRAWER_WIDTH = 233; export const SHORT_DATE_FORMAT = 'DD/MM/YY'; export const LONG_DATE_FORMAT = 'DD/MM/YYYY'; export const ISO_DATE_FORMAT = 'YYYY-MM-DD'; +export const ISO_DATE_FORMAT_SHORT = 'YY-MM-DD'; +export const MONTH_DATE_FORMAT = 'MM/DD/YYYY'; export const DATE_FORMAT_WITH_MONTH = 'DD MMM YYYY'; -export const TIME_FORMAT = 'HH:mm'; export const SHORT_TIME_FORMAT = 'HH:mm'; export const LONG_TIME_FORMAT = 'HH:mm:ss'; export const EXTENDED_TIME_FORMAT = 'THH:mm:ss'; export const STANDARD_DATE_TIME_FORMAT = 'DD/MM/YYYY, HH:mm:ss'; -export const SHORT_DATE_TIME_FORMAT_ = 'DD/MM/YYYY, HH:mm'; +export const SHORT_DATE_TIME_FORMAT = 'DD/MM/YYYY, HH:mm'; export const EXTENDED_DATE_TIME_FORMAT = 'MMMM DD, YYYY, [at] HH:mm:ss'; -export const DATE_TIME_FORMAT_WITH_AMPM_SHORT = 'DD/MM/YYYY_hh:mmA'; +export const EXTENDED_DATE_TIME_FORMAT_WITH_AMPM = 'DD/MM/YYYY_hh:mmA'; +export const DATE_TIME_FORMAT_WITH_AMPM_SHORT = 'DD/MM/YYYY hh:mm a'; export const DATE_TIME_FORMAT_WITH_AMPM_LONG = 'DD MMM YYYY hh:mm a'; export const SIMULATOR_CONTACT = '9876543210'; export const FLOW_STATUS_PUBLISHED = 'published'; diff --git a/src/components/UI/Form/Calendar/Calendar.test.tsx b/src/components/UI/Form/Calendar/Calendar.test.tsx index b1c010a885..da669ca9b8 100644 --- a/src/components/UI/Form/Calendar/Calendar.test.tsx +++ b/src/components/UI/Form/Calendar/Calendar.test.tsx @@ -1,6 +1,7 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import { backspace } from 'common/test-utils'; import { Calendar } from './Calendar'; +import { MONTH_DATE_FORMAT } from 'common/constants'; const setFieldValueMock = vi.fn(); describe('', () => { @@ -29,7 +30,7 @@ describe('', () => { it('test empty date event', async () => { render(wrapper); const input = screen.getByRole('textbox'); - expect(input).toHaveValue('MM/DD/YYYY'); + expect(input).toHaveValue(MONTH_DATE_FORMAT); }); it('test date change event', async () => { diff --git a/src/components/UI/Form/Calendar/Calendar.tsx b/src/components/UI/Form/Calendar/Calendar.tsx index f26100ea6c..bfcf7ff32f 100644 --- a/src/components/UI/Form/Calendar/Calendar.tsx +++ b/src/components/UI/Form/Calendar/Calendar.tsx @@ -3,6 +3,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; import { getIn } from 'formik'; import styles from './Calendar.module.css'; +import { MONTH_DATE_FORMAT } from 'common/constants'; export interface CalendarProps { variant?: any; @@ -16,7 +17,7 @@ export interface CalendarProps { } export const Calendar = ({ - format = 'MM/DD/YYYY', + format = MONTH_DATE_FORMAT, field, disabled = false, form: { setFieldValue, errors, touched }, diff --git a/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx b/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx index 8381271a8d..44d1b4db88 100644 --- a/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx +++ b/src/components/UI/Form/DateTimePicker/DateTimePicker.tsx @@ -5,6 +5,7 @@ import utc from 'dayjs/plugin/utc'; import { getIn } from 'formik'; import styles from './DateTimePicker.module.css'; +import { DATE_TIME_FORMAT_WITH_AMPM_SHORT } from 'common/constants'; dayjs.extend(utc); export interface DateTimePickerProps { @@ -19,7 +20,7 @@ export interface DateTimePickerProps { } export const DateTimePicker = ({ - format = 'DD/MM/YYYY hh:mm a', + format = DATE_TIME_FORMAT_WITH_AMPM_SHORT, field, form: { setFieldValue, errors, touched }, placeholder, diff --git a/src/components/simulator/Simulator.tsx b/src/components/simulator/Simulator.tsx index 685c8a6cc0..37fb2f56e0 100644 --- a/src/components/simulator/Simulator.tsx +++ b/src/components/simulator/Simulator.tsx @@ -22,7 +22,7 @@ import DefaultWhatsappImage from 'assets/images/whatsappDefault.jpg'; import SimulatorIcon from 'assets/images/icons/Simulator.svg?react'; import ResetIcon from 'assets/images/icons/Reset/Dark.svg?react'; import { - TIME_FORMAT, + SHORT_TIME_FORMAT, SAMPLE_MEDIA_FOR_SIMULATOR, LIST, QUICK_REPLY, @@ -104,7 +104,7 @@ const getStyleForDirection = ( const TimeComponent = ({ direction, insertedAt }: any) => ( <> - {dayjs(insertedAt).format(TIME_FORMAT)} + {dayjs(insertedAt).format(SHORT_TIME_FORMAT)} {direction === 'send' && } diff --git a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.test.tsx b/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.test.tsx index 86970a044a..c2c0236226 100644 --- a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.test.tsx +++ b/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.test.tsx @@ -4,7 +4,7 @@ import { MockedProvider } from '@apollo/client/testing'; import { MemoryRouter } from 'react-router-dom'; import { MARK_AS_READ } from 'graphql/mutations/Chat'; -import { DATE_FORMAT } from 'common/constants'; +import { SHORT_DATE_FORMAT } from 'common/constants'; import ChatConversation from './ChatConversation'; const mockCallback = vi.fn(); @@ -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(dayjs(insertedAt).format(DATE_FORMAT)); + expect(getByTestId('date')).toHaveTextContent(dayjs(insertedAt).format(SHORT_DATE_FORMAT)); }); test('it should call the callback function on click action', () => { diff --git a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx b/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx index cb600ebaa7..a2b38bade9 100644 --- a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx +++ b/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx @@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'; import dayjs from 'dayjs'; import { useApolloClient, useMutation } from '@apollo/client'; -import { COMPACT_MESSAGE_LENGTH, DATE_FORMAT } from 'common/constants'; +import { COMPACT_MESSAGE_LENGTH, SHORT_DATE_FORMAT } from 'common/constants'; import { Timer } from 'components/UI/Timer/Timer'; import { MARK_AS_READ, CONTACT_FRAGMENT } from 'graphql/mutations/Chat'; import { SEARCH_OFFSET } from 'graphql/queries/Search'; @@ -233,7 +233,7 @@ const ChatConversation = ({ {isTextType && highlightSearch ? BoldedText(body, highlightSearch) : displayMSG}
- {dayjs(lastMessage.insertedAt).format(DATE_FORMAT)} + {dayjs(lastMessage.insertedAt).format(SHORT_DATE_FORMAT)}
diff --git a/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx b/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx index 2798fdeeda..72f2aed313 100644 --- a/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx +++ b/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx @@ -15,7 +15,7 @@ import { DEFAULT_MESSAGE_LIMIT, DEFAULT_CONTACT_LOADMORE_LIMIT, DEFAULT_MESSAGE_LOADMORE_LIMIT, - FULL_DATE_FORMAT2, + ISO_DATE_FORMAT, } from 'common/constants'; import { updateConversations } from 'services/ChatService'; import { showMessages } from 'common/responsive'; @@ -129,8 +129,8 @@ export const ConversationList = ({ filter.includeLabels = params.includeLabels.map((obj: any) => obj.id); if (params.dateFrom) { filter.dateRange = { - from: dayjs(params.dateFrom).format(FULL_DATE_FORMAT2), - to: dayjs(params.dateTo).format(FULL_DATE_FORMAT2), + from: dayjs(params.dateFrom).format(ISO_DATE_FORMAT), + to: dayjs(params.dateTo).format(ISO_DATE_FORMAT), }; } } diff --git a/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.test.tsx b/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.test.tsx index a463263502..e2df6723ec 100644 --- a/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.test.tsx +++ b/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.test.tsx @@ -2,7 +2,7 @@ import { render, fireEvent, waitFor, screen } from '@testing-library/react'; import dayjs from 'dayjs'; import { MockedProvider } from '@apollo/client/testing'; -import { TIME_FORMAT } from 'common/constants'; +import { SHORT_TIME_FORMAT } from 'common/constants'; import ChatMessage from './ChatMessage'; @@ -84,7 +84,7 @@ describe('', () => { test('it should render the message date correctly', () => { const { getByTestId } = render(chatMessageText); - expect(getByTestId('date')).toHaveTextContent(dayjs(insertedAt).format(TIME_FORMAT)); + expect(getByTestId('date')).toHaveTextContent(dayjs(insertedAt).format(SHORT_TIME_FORMAT)); }); test('it should render "Other" class for the content', () => { diff --git a/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx b/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx index e724994324..84ced47f0b 100644 --- a/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx +++ b/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx @@ -7,8 +7,8 @@ import LabelIcon from 'assets/images/icons/Label/Filled.svg?react'; import WarningIcon from 'assets/images/icons/Warning.svg?react'; import MessageIcon from 'assets/images/icons/Dropdown.svg?react'; import { - DATE_FORMAT, - TIME_FORMAT, + SHORT_DATE_FORMAT, + SHORT_TIME_FORMAT, LIST, QUICK_REPLY, VALID_URL_REGEX, @@ -110,7 +110,7 @@ export const ChatMessage = ({ let messageDetails = styles.MessageDetails; const messageError = errors ? parseTextMethod(errors) : {}; let messageErrorStatus: any = false; - let tooltipTitle: any = dayjs(insertedAt).format(DATE_FORMAT); + let tooltipTitle: any = dayjs(insertedAt).format(SHORT_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} | ${dayjs(insertedAt).format(TIME_FORMAT)}`; + messageFooter = `${sendBy} | ${dayjs(insertedAt).format(SHORT_TIME_FORMAT)}`; } else { - messageFooter = dayjs(insertedAt).format(TIME_FORMAT); + messageFooter = dayjs(insertedAt).format(SHORT_TIME_FORMAT); } const dateAndSendBy = messageFooter && ( @@ -222,7 +222,7 @@ export const ChatMessage = ({ if (daySeparator) { daySeparatorContent = (
-

{dayjs(insertedAt).format(DATE_FORMAT)}

+

{dayjs(insertedAt).format(SHORT_DATE_FORMAT)}

); } @@ -296,7 +296,7 @@ export const ChatMessage = ({ id={`search${messageNumber}`} > {contextMessage ? ( - +
jumpToMessage(contextMessage.messageNumber)} diff --git a/src/containers/Chat/ChatMessages/ChatMessages.tsx b/src/containers/Chat/ChatMessages/ChatMessages.tsx index 0fde3f210e..39b4c69f08 100644 --- a/src/containers/Chat/ChatMessages/ChatMessages.tsx +++ b/src/containers/Chat/ChatMessages/ChatMessages.tsx @@ -18,7 +18,7 @@ import { DEFAULT_MESSAGE_LIMIT, DEFAULT_CONTACT_LIMIT, DEFAULT_MESSAGE_LOADMORE_LIMIT, - FULL_DATE_FORMAT2, + ISO_DATE_FORMAT, } from '../../../common/constants'; import { SEARCH_QUERY } from '../../../graphql/queries/Search'; import { @@ -513,7 +513,7 @@ export const ChatMessages = ({ contactId, collectionId, startingHeight }: ChatMe // if it's last message and its date is greater than current date then show day separator if ( !nextDate && - dayjs(currentDate).format(FULL_DATE_FORMAT2) < dayjs().format(FULL_DATE_FORMAT2) + dayjs(currentDate).format(ISO_DATE_FORMAT) < dayjs().format(ISO_DATE_FORMAT) ) { return true; } @@ -521,7 +521,7 @@ export const ChatMessages = ({ contactId, collectionId, startingHeight }: ChatMe // if the day is changed then show day separator if ( nextDate && - dayjs(currentDate).format(FULL_DATE_FORMAT2) > dayjs(nextDate).format(FULL_DATE_FORMAT2) + dayjs(currentDate).format(ISO_DATE_FORMAT) > dayjs(nextDate).format(ISO_DATE_FORMAT) ) { return true; } diff --git a/src/containers/Consulting/ConsultingList/ConsultingList.tsx b/src/containers/Consulting/ConsultingList/ConsultingList.tsx index 627ffcde91..bb468a59a0 100644 --- a/src/containers/Consulting/ConsultingList/ConsultingList.tsx +++ b/src/containers/Consulting/ConsultingList/ConsultingList.tsx @@ -9,7 +9,7 @@ import { Consulting } from '../Consulting'; import { ExportConsulting } from './ExportConsulting/ExportConsulting'; import { GET_CONSULTING_HOURS, GET_CONSULTING_HOURS_COUNT } from 'graphql/queries/Consulting'; import styles from './ConsultingList.module.css'; -import { FULL_DATE_FORMAT_WITH_MONTH } from 'common/constants'; +import { DATE_FORMAT_WITH_MONTH } from 'common/constants'; const ConsultingList = () => { const { t } = useTranslation(); @@ -56,7 +56,7 @@ const ConsultingList = () => { ); const getOtherColumn = (label: any, isDate: boolean = false) => { - const text = isDate ? dayjs(label).format(FULL_DATE_FORMAT_WITH_MONTH) : label; + const text = isDate ? dayjs(label).format(DATE_FORMAT_WITH_MONTH) : label; return (

{text}

diff --git a/src/containers/Consulting/ConsultingList/ExportConsulting/ExportConsulting.tsx b/src/containers/Consulting/ConsultingList/ExportConsulting/ExportConsulting.tsx index 2224505c8c..0399612bfe 100644 --- a/src/containers/Consulting/ConsultingList/ExportConsulting/ExportConsulting.tsx +++ b/src/containers/Consulting/ConsultingList/ExportConsulting/ExportConsulting.tsx @@ -1,7 +1,7 @@ import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete'; import { useLazyQuery, useQuery } from '@apollo/client'; import { FILTER_ORGANIZATIONS } from 'graphql/queries/Organization'; -import { FULL_DATE_FORMAT2, setVariables } from 'common/constants'; +import { ISO_DATE_FORMAT, setVariables } from 'common/constants'; import { EXPORT_CONSULTING_HOURS } from 'graphql/queries/Consulting'; import { Field, Form, Formik } from 'formik'; import * as Yup from 'yup'; @@ -19,7 +19,7 @@ export interface ExportConsultingPropTypes { setFilters: any; } -const formatDate = (value: any) => dayjs(value).format(FULL_DATE_FORMAT2); +const formatDate = (value: any) => dayjs(value).format(ISO_DATE_FORMAT); export const ExportConsulting = ({ setFilters }: ExportConsultingPropTypes) => { const { data: organizationList } = useQuery(FILTER_ORGANIZATIONS, { diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx index fc09f8449c..e30fe0a72d 100644 --- a/src/containers/Flow/FlowList/FlowList.tsx +++ b/src/containers/Flow/FlowList/FlowList.tsx @@ -15,7 +15,7 @@ import { DELETE_FLOW, IMPORT_FLOW } from 'graphql/mutations/Flow'; import { List } from 'containers/List/List'; import { ImportButton } from 'components/UI/ImportButton/ImportButton'; import Loading from 'components/UI/Layout/Loading/Loading'; -import { FULL_DATE_TIME_FORMAT } from 'common/constants'; +import { STANDARD_DATE_TIME_FORMAT } from 'common/constants'; import { exportFlowMethod, organizationHasDynamicRole } from 'common/utils'; import styles from './FlowList.module.css'; import { GET_TAGS } from 'graphql/queries/Tags'; @@ -40,13 +40,13 @@ const getName = (text: string, keywordsList: any, roles: any) => { const getDate = (date: string, fallback: string = '') => (
- {date ? dayjs(date).format(FULL_DATE_TIME_FORMAT) : fallback} + {date ? dayjs(date).format(STANDARD_DATE_TIME_FORMAT) : fallback}
); const getLastPublished = (date: string, fallback: string = '') => date ? ( -
{dayjs(date).format(FULL_DATE_TIME_FORMAT)}
+
{dayjs(date).format(STANDARD_DATE_TIME_FORMAT)}
) : (
{fallback}
); diff --git a/src/containers/LastLogin/LastLogin.tsx b/src/containers/LastLogin/LastLogin.tsx index 6b94e55b66..91bd35dad5 100644 --- a/src/containers/LastLogin/LastLogin.tsx +++ b/src/containers/LastLogin/LastLogin.tsx @@ -2,7 +2,7 @@ import dayjs from 'dayjs'; import { useTranslation } from 'react-i18next'; import { getAuthSession } from 'services/AuthService'; -import { FULL_DATE_TIME_FORMAT, GUPSHUP_ENTERPRISE_SHORTCODE } from 'common/constants'; +import { STANDARD_DATE_TIME_FORMAT, GUPSHUP_ENTERPRISE_SHORTCODE } from 'common/constants'; import styles from './LastLogin.module.css'; import { useContext } from 'react'; @@ -20,7 +20,7 @@ export const LastLogin = ({ drawerOpen }: LastLoginProps) => { provider === GUPSHUP_ENTERPRISE_SHORTCODE ? styles.LastLoginEnterprise : styles.LastLogin; return drawerOpen ? (
- {t('Last login')}: {dayjs(lastLogin).format(FULL_DATE_TIME_FORMAT)} + {t('Last login')}: {dayjs(lastLogin).format(STANDARD_DATE_TIME_FORMAT)}
) : null; }; diff --git a/src/containers/NotificationList/NotificationList.tsx b/src/containers/NotificationList/NotificationList.tsx index 6d108c0f4b..054a895029 100644 --- a/src/containers/NotificationList/NotificationList.tsx +++ b/src/containers/NotificationList/NotificationList.tsx @@ -16,12 +16,12 @@ import { copyToClipboard } from 'common/utils'; import { FILTER_NOTIFICATIONS, GET_NOTIFICATIONS_COUNT } from 'graphql/queries/Notifications'; import MARK_NOTIFICATIONS_AS_READ from 'graphql/mutations/Notifications'; import styles from './NotificationList.module.css'; -import { DATE_TIME_FORMAT } from 'common/constants'; +import { SHORT_DATE_TIME_FORMAT } from 'common/constants'; const getDot = (isRead: boolean) =>
{!isRead ?
: null}
; const getTime = (time: string) => ( -
{dayjs(time).format(DATE_TIME_FORMAT)}
+
{dayjs(time).format(SHORT_DATE_TIME_FORMAT)}
); const getText = (text: string) =>
{text}
; diff --git a/src/containers/OrganizationList/OrganizationList.tsx b/src/containers/OrganizationList/OrganizationList.tsx index 7d8e57e648..326c59004f 100644 --- a/src/containers/OrganizationList/OrganizationList.tsx +++ b/src/containers/OrganizationList/OrganizationList.tsx @@ -19,7 +19,7 @@ import { Extensions } from 'containers/Extensions/Extensions'; import { OrganizationCustomer } from 'containers/Organization/OrganizationCustomer/OrganizationCustomer'; import { Dropdown } from 'components/UI/Form/Dropdown/Dropdown'; import styles from './OrganizationList.module.css'; -import { FULL_DATE_FORMAT_WITH_MONTH } from 'common/constants'; +import { DATE_FORMAT_WITH_MONTH } from 'common/constants'; export interface OrganizationListProps { openExtensionModal?: boolean; @@ -56,7 +56,7 @@ export const OrganizationList = ({ {label}
- {dayjs(insertedAt).format(FULL_DATE_FORMAT_WITH_MONTH)} + {dayjs(insertedAt).format(DATE_FORMAT_WITH_MONTH)}

diff --git a/src/containers/Profile/Contact/ContactHistory/ContactHistory.tsx b/src/containers/Profile/Contact/ContactHistory/ContactHistory.tsx index 33a31651e1..07799548d0 100644 --- a/src/containers/Profile/Contact/ContactHistory/ContactHistory.tsx +++ b/src/containers/Profile/Contact/ContactHistory/ContactHistory.tsx @@ -6,7 +6,7 @@ import { Button } from 'components/UI/Form/Button/Button'; import Loading from 'components/UI/Layout/Loading/Loading'; import { COUNT_CONTACT_HISTORY, GET_CONTACT_HISTORY } from 'graphql/queries/Contact'; import setLogs from 'config/logs'; -import { FULL_DATE_TIME_FORMAT } from 'common/constants'; +import { STANDARD_DATE_TIME_FORMAT } from 'common/constants'; import styles from './ContactHistory.module.css'; export interface ContactHistoryProps { @@ -139,7 +139,7 @@ export const ContactHistory = ({ contactId, profileId }: ContactHistoryProps) => return (
{label}
-
{dayjs(insertedAt).format(FULL_DATE_TIME_FORMAT)}
+
{dayjs(insertedAt).format(STANDARD_DATE_TIME_FORMAT)}
); }); diff --git a/src/containers/Profile/Contact/ContactProfile.tsx b/src/containers/Profile/Contact/ContactProfile.tsx index a6320c4dc7..7fbdd266ca 100644 --- a/src/containers/Profile/Contact/ContactProfile.tsx +++ b/src/containers/Profile/Contact/ContactProfile.tsx @@ -5,7 +5,7 @@ import { useParams } from 'react-router-dom'; import { getOrganizationServices } from 'services/AuthService'; import { FormControl, FormControlLabel, Radio, RadioGroup } from '@mui/material'; -import { FULL_DATE_TIME_FORMAT } from 'common/constants'; +import { STANDARD_DATE_TIME_FORMAT } from 'common/constants'; import { GET_CONTACT_DETAILS, GET_CONTACT_PROFILES } from 'graphql/queries/Contact'; import Loading from 'components/UI/Layout/Loading/Loading'; import { ContactDescription } from './ContactDescription/ContactDescription'; @@ -86,14 +86,14 @@ export const ContactProfile = () => { let optinMethod = ''; if (contactData.optinMethod) { optinMethod = `via ${contactData.optinMethod} on ${dayjs(contactData.optinTime).format( - FULL_DATE_TIME_FORMAT + STANDARD_DATE_TIME_FORMAT )}`; } let optoutMethod = ''; if (contactData.optoutMethod) { optoutMethod = `via ${contactData.optoutMethod} on ${dayjs(contactData.optoutTime).format( - FULL_DATE_TIME_FORMAT + STANDARD_DATE_TIME_FORMAT )}`; } diff --git a/src/containers/Search/Search.tsx b/src/containers/Search/Search.tsx index c9add1603b..8f514508e1 100644 --- a/src/containers/Search/Search.tsx +++ b/src/containers/Search/Search.tsx @@ -21,7 +21,7 @@ import Loading from 'components/UI/Layout/Loading/Loading'; import { DEFAULT_CONTACT_LIMIT, DEFAULT_MESSAGE_LIMIT, - FULL_DATE_FORMAT2, + ISO_DATE_FORMAT, setVariables, } from 'common/constants'; import { Checkbox } from 'components/UI/Form/Checkbox/Checkbox'; @@ -73,8 +73,8 @@ const getPayload = (payload: any) => { if (!useExpression && dateFrom && dateFrom !== 'Invalid date') { const dateRange = { dateRange: { - to: dayjs(dateTo).format(FULL_DATE_FORMAT2), - from: dayjs(dateFrom).format(FULL_DATE_FORMAT2), + to: dayjs(dateTo).format(ISO_DATE_FORMAT), + from: dayjs(dateFrom).format(ISO_DATE_FORMAT), }, }; args.filter = Object.assign(args.filter, dateRange); @@ -241,8 +241,8 @@ export const Search = ({ type, search, searchId, ...props }: SearchProps) => { if (props.searchParam.dateFrom && props.searchParam.dateFrom !== 'Invalid date') { const dateRange = { dateRange: { - to: dayjs(props.searchParam.dateTo).format(FULL_DATE_FORMAT2), - from: dayjs(props.searchParam.dateFrom).format(FULL_DATE_FORMAT2), + to: dayjs(props.searchParam.dateTo).format(ISO_DATE_FORMAT), + from: dayjs(props.searchParam.dateFrom).format(ISO_DATE_FORMAT), }, }; args.filter = Object.assign(args.filter, dateRange); diff --git a/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx b/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx index ba998b24fb..48fe14cbb4 100644 --- a/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx +++ b/src/containers/SettingList/OrganizationFlows/OrganisationFlows.tsx @@ -20,8 +20,8 @@ import Settingicon from 'assets/images/icons/Settings/Settings.svg?react'; import { dayList, FLOW_STATUS_PUBLISHED, - FULL_DATE_FORMAT2, - FULL_TIME_FORMAT2, + ISO_DATE_FORMAT, + EXTENDED_TIME_FORMAT, setVariables, } from 'common/constants'; import styles from './OrganisationFlows.module.css'; @@ -82,8 +82,8 @@ export const OrganisationFlows = () => { const getEnabledDays = (data: any) => data.filter((option: any) => option.enabled); const setOutOfOffice = (data: any) => { - setStartTime(dayjs(`${dayjs().format(FULL_DATE_FORMAT2)}T${data.startTime}`)); - setEndTime(dayjs(`${dayjs().format(FULL_DATE_FORMAT2)}T${data.endTime}`)); + setStartTime(dayjs(`${dayjs().format(ISO_DATE_FORMAT)}T${data.startTime}`)); + setEndTime(dayjs(`${dayjs().format(ISO_DATE_FORMAT)}T${data.endTime}`)); setEnabledDays(getEnabledDays(data.enabledDays)); }; @@ -165,8 +165,8 @@ export const OrganisationFlows = () => { const handleAllDayCheck = (addDayCheck: boolean) => { if (!allDayCheck) { - setStartTime(dayjs(`${dayjs().format(FULL_DATE_FORMAT2)}T00:00:00`)); - setEndTime(dayjs(`${dayjs().format(FULL_DATE_FORMAT2)}T23:59:00`)); + setStartTime(dayjs(`${dayjs().format(ISO_DATE_FORMAT)}T00:00:00`)); + setEndTime(dayjs(`${dayjs().format(ISO_DATE_FORMAT)}T23:59:00`)); } setAllDayCheck(addDayCheck); }; @@ -364,9 +364,9 @@ export const OrganisationFlows = () => { defaultFlowId: payload.defaultFlowId ? payload.defaultFlowId.id : null, enabled: payload.hours, enabledDays: assignDays(payload.enabledDays), - endTime: dayjs(payload.endTime).format(FULL_TIME_FORMAT2), + endTime: dayjs(payload.endTime).format(EXTENDED_TIME_FORMAT), flowId: payload.flowId ? payload.flowId.id : null, - startTime: dayjs(payload.startTime).format(FULL_TIME_FORMAT2), + startTime: dayjs(payload.startTime).format(EXTENDED_TIME_FORMAT), }, newcontactFlowId: newContactFlowId, optinFlowId, diff --git a/src/containers/SheetIntegration/SheetIntegrationList/SheetIntegrationList.tsx b/src/containers/SheetIntegration/SheetIntegrationList/SheetIntegrationList.tsx index fb2e400ba8..d2573c0615 100644 --- a/src/containers/SheetIntegration/SheetIntegrationList/SheetIntegrationList.tsx +++ b/src/containers/SheetIntegration/SheetIntegrationList/SheetIntegrationList.tsx @@ -9,7 +9,7 @@ import { setNotification } from 'common/notification'; import { useMutation } from '@apollo/client'; import { List } from 'containers/List/List'; import dayjs from 'dayjs'; -import { FULL_DATE_TIME_FORMAT } from 'common/constants'; +import { STANDARD_DATE_TIME_FORMAT } from 'common/constants'; import { DialogBox } from 'components/UI/DialogBox/DialogBox'; import styles from './SheetIntegrationList.module.css'; import Loading from 'components/UI/Layout/Loading/Loading'; @@ -37,7 +37,7 @@ const getName = (text: string, sheetDataCount: string, type: SheetTypes) => ( ); const getLastSyncedAt = (date: string, fallback: string = '') => (
- {date ? dayjs(date).format(FULL_DATE_TIME_FORMAT) : fallback} + {date ? dayjs(date).format(STANDARD_DATE_TIME_FORMAT) : fallback}
); diff --git a/src/containers/Template/List/Template.tsx b/src/containers/Template/List/Template.tsx index 782127f8ff..d3ec77ed68 100644 --- a/src/containers/Template/List/Template.tsx +++ b/src/containers/Template/List/Template.tsx @@ -7,7 +7,7 @@ import { useMutation, useQuery } from '@apollo/client'; import { List } from 'containers/List/List'; import { WhatsAppToJsx } from 'common/RichEditor'; -import { FULL_DATE_TIME_FORMAT, GUPSHUP_ENTERPRISE_SHORTCODE } from 'common/constants'; +import { STANDARD_DATE_TIME_FORMAT, GUPSHUP_ENTERPRISE_SHORTCODE } from 'common/constants'; import { GET_TEMPLATES_COUNT, FILTER_TEMPLATES, @@ -41,7 +41,7 @@ const getBody = (text: string) =>

{WhatsAppToJsx const getReason = (reason: string) =>

{reason}

; const getUpdatedAt = (date: string) => ( -
{dayjs(date).format(FULL_DATE_TIME_FORMAT)}
+
{dayjs(date).format(STANDARD_DATE_TIME_FORMAT)}
); const getTranslations = (language: any, data: string) => { diff --git a/src/containers/Ticket/Ticket.tsx b/src/containers/Ticket/Ticket.tsx index 237e286f46..ee88f26182 100644 --- a/src/containers/Ticket/Ticket.tsx +++ b/src/containers/Ticket/Ticket.tsx @@ -13,7 +13,7 @@ import { Dropdown } from 'components/UI/Form/Dropdown/Dropdown'; import dayjs from 'dayjs'; import { useQuery } from '@apollo/client'; import { GET_USERS } from 'graphql/queries/User'; -import { DATE_TIME_FORMAT2, setVariables } from 'common/constants'; +import { EXTENDED_DATE_TIME_FORMAT, setVariables } from 'common/constants'; import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete'; import Loading from 'components/UI/Layout/Loading/Loading'; @@ -32,11 +32,11 @@ const TicketDetails = ({ form }: any) => {

Opened: - {dayjs(values.insertedAt).format(DATE_TIME_FORMAT2)} + {dayjs(values.insertedAt).format(EXTENDED_DATE_TIME_FORMAT)}

Last updated: - {dayjs(values.updatedAt).format(DATE_TIME_FORMAT2)} + {dayjs(values.updatedAt).format(EXTENDED_DATE_TIME_FORMAT)}

); diff --git a/src/containers/Ticket/TicketList/ExportTicket/ExportTicket.tsx b/src/containers/Ticket/TicketList/ExportTicket/ExportTicket.tsx index 155173b780..8768d47522 100644 --- a/src/containers/Ticket/TicketList/ExportTicket/ExportTicket.tsx +++ b/src/containers/Ticket/TicketList/ExportTicket/ExportTicket.tsx @@ -10,13 +10,13 @@ import { downloadFile } from 'common/utils'; import styles from './ExportTicket.module.css'; import { EXPORT_SUPPORT_TICKETS } from 'graphql/queries/Ticket'; import { DialogBox } from 'components/UI/DialogBox/DialogBox'; -import { FULL_DATE_FORMAT2 } from 'common/constants'; +import { ISO_DATE_FORMAT } from 'common/constants'; export interface ExportTicketPropTypes { setShowExportDialog: any; } -const formatDate = (value: any) => dayjs(value).format(FULL_DATE_FORMAT2); +const formatDate = (value: any) => dayjs(value).format(ISO_DATE_FORMAT); export const ExportTicket = ({ setShowExportDialog }: ExportTicketPropTypes) => { const { t } = useTranslation(); diff --git a/src/containers/Ticket/TicketList/TicketList.tsx b/src/containers/Ticket/TicketList/TicketList.tsx index 69060f1b93..f83d6f53bc 100644 --- a/src/containers/Ticket/TicketList/TicketList.tsx +++ b/src/containers/Ticket/TicketList/TicketList.tsx @@ -17,14 +17,14 @@ import { Dropdown } from 'components/UI/Form/Dropdown/Dropdown'; import { getUserSession } from 'services/AuthService'; import styles from './TicketList.module.css'; import { BulkAction } from './BulkAction/BulkAction'; -import { DATE_TIME_FORMAT } from 'common/constants'; +import { SHORT_DATE_TIME_FORMAT } from 'common/constants'; const getId = (id: any) =>
{id}
; const getBody = (body: any) =>
{body}
; const getTopic = (topic: any) =>
{topic}
; const getInsertedAt = (insertedAt: string) => ( -
{dayjs(insertedAt).format(DATE_TIME_FORMAT)}
+
{dayjs(insertedAt).format(SHORT_DATE_TIME_FORMAT)}
); const getUser = (user: any) =>
{user?.name}
; diff --git a/src/containers/Trigger/Trigger.tsx b/src/containers/Trigger/Trigger.tsx index 973d28010d..666576f76b 100644 --- a/src/containers/Trigger/Trigger.tsx +++ b/src/containers/Trigger/Trigger.tsx @@ -12,10 +12,10 @@ import { dateList, dayList, FLOW_STATUS_PUBLISHED, - FULL_DATE_FORMAT2, + ISO_DATE_FORMAT, hourList, setVariables, - FULL_TIME_FORMAT2, + EXTENDED_TIME_FORMAT, } from 'common/constants'; import { FormLayout } from 'containers/Form/FormLayout'; import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete'; @@ -38,7 +38,7 @@ dayjs.extend(utc); const checkDateTimeValidation = (startAtValue: string, startDateValue: string) => { const isDateAhead = dayjs(startDateValue).isAfter(dayjs()); - const isTimeAhead = startAtValue > dayjs().format(FULL_TIME_FORMAT2); + const isTimeAhead = startAtValue > dayjs().format(EXTENDED_TIME_FORMAT); if (!isDateAhead) { // if start date is current date then only check for time @@ -57,9 +57,9 @@ const setPayload = (payload: any, roles: any) => { payloadCopy; const groups = groupIds.map((group: any) => parseInt(group.id)); - const startAtTime = dayjs(startTime).format(FULL_TIME_FORMAT2); + const startAtTime = dayjs(startTime).format(EXTENDED_TIME_FORMAT); // covert the time to UTC - const startAt = dayjs(`${dayjs(startDate).format(FULL_DATE_FORMAT2)}${startAtTime}`).utc(); + const startAt = dayjs(`${dayjs(startDate).format(ISO_DATE_FORMAT)}${startAtTime}`).utc(); const updatedPayload = { isActive, @@ -68,9 +68,9 @@ const setPayload = (payload: any, roles: any) => { days: [], hours: [], groupIds: groups, - startDate: dayjs(startAt).utc().format(FULL_DATE_FORMAT2), - endDate: dayjs(endDate).utc().format(FULL_DATE_FORMAT2), - startTime: dayjs(startAt).utc().format(FULL_TIME_FORMAT2), + startDate: dayjs(startAt).utc().format(ISO_DATE_FORMAT), + endDate: dayjs(endDate).utc().format(ISO_DATE_FORMAT), + startTime: dayjs(startAt).utc().format(EXTENDED_TIME_FORMAT), frequency: frequency.value, roles: payload.roles, }; diff --git a/src/containers/Trigger/TriggerList/TriggerList.tsx b/src/containers/Trigger/TriggerList/TriggerList.tsx index 320d7a9137..41c7e6322f 100644 --- a/src/containers/Trigger/TriggerList/TriggerList.tsx +++ b/src/containers/Trigger/TriggerList/TriggerList.tsx @@ -9,7 +9,7 @@ import ClockInactiveIcon from 'assets/images/icons/Trigger/Inactive.svg?react'; import DuplicateIcon from 'assets/images/icons/Duplicate.svg?react'; import { TRIGGER_LIST_QUERY, TRIGGER_QUERY_COUNT } from 'graphql/queries/Trigger'; import { DELETE_TRIGGER } from 'graphql/mutations/Trigger'; -import { DATE_TIME_FORMAT_WITH_AMPM, FULL_DATE_FORMAT, dayList } from 'common/constants'; +import { EXTENDED_DATE_TIME_FORMAT_WITH_AMPM, LONG_DATE_FORMAT, dayList } from 'common/constants'; import { List } from 'containers/List/List'; import { Tooltip } from 'components/UI/Tooltip/Tooltip'; import styles from './TriggerList.module.css'; @@ -35,7 +35,7 @@ const getName = ({ flow, startAt, frequency, days, isActive, nextTriggerAt }: an

- {`${flow.name}_${dayjs(startAt).format(DATE_TIME_FORMAT_WITH_AMPM)}`} + {`${flow.name}_${dayjs(startAt).format(EXTENDED_DATE_TIME_FORMAT_WITH_AMPM)}`}

{isActive ? <>Next trigger {dayjs(nextTriggerAt).fromNow()} : 'Trigger in inactive'} @@ -45,7 +45,7 @@ const getName = ({ flow, startAt, frequency, days, isActive, nextTriggerAt }: an ); const getEndDate = (date: any) => ( -
{dayjs(date).format(FULL_DATE_FORMAT)}
+
{dayjs(date).format(LONG_DATE_FORMAT)}
); const getCollections = (groups: any) => ( diff --git a/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx b/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx index 1edafdc59c..571a9766af 100644 --- a/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx +++ b/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx @@ -11,11 +11,11 @@ import Menu from 'components/UI/Menu/Menu'; import { Button } from 'components/UI/Form/Button/Button'; import { FILTER_WEBHOOK_LOGS, GET_WEBHOOK_LOGS_COUNT } from 'graphql/queries/WebhookLogs'; import { copyToClipboard, slicedString } from 'common/utils'; -import { FULL_DATE_TIME_FORMAT } from 'common/constants'; +import { STANDARD_DATE_TIME_FORMAT } from 'common/constants'; import styles from './WebhookLogsList.module.css'; const getTime = (time: string) => ( -
{dayjs(time).format(FULL_DATE_TIME_FORMAT)}
+
{dayjs(time).format(STANDARD_DATE_TIME_FORMAT)}
); /* istanbul ignore next */ diff --git a/src/mocks/Trigger.tsx b/src/mocks/Trigger.tsx index d79fb1f664..966241b87d 100644 --- a/src/mocks/Trigger.tsx +++ b/src/mocks/Trigger.tsx @@ -1,4 +1,3 @@ -import dayjs from 'dayjs'; import { TRIGGER_LIST_QUERY, TRIGGER_QUERY_COUNT, GET_TRIGGER } from 'graphql/queries/Trigger'; export const triggerListQuery = { @@ -78,7 +77,7 @@ export const getTriggerQuery = (frequency: any) => ({ trigger: { trigger: { days: [1, 2], - endDate: dayjs('2021-03-13'), + endDate: '2021-03-13', flow: { id: '1', }, @@ -91,7 +90,7 @@ export const getTriggerQuery = (frequency: any) => ({ id: '1', isActive: true, isRepeating: true, - startAt: dayjs('2021-02-28T20:00:22Z'), + startAt: '2021-02-28T20:00:22Z', }, }, }, From 4c48cda993f3ef845bf6a49a1718961dd7d6b29a Mon Sep 17 00:00:00 2001 From: mdshamoon Date: Sat, 13 Jan 2024 19:42:08 +0530 Subject: [PATCH 17/17] validation error --- src/containers/Trigger/Trigger.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/Trigger/Trigger.tsx b/src/containers/Trigger/Trigger.tsx index 666576f76b..4f5029c753 100644 --- a/src/containers/Trigger/Trigger.tsx +++ b/src/containers/Trigger/Trigger.tsx @@ -38,7 +38,7 @@ dayjs.extend(utc); const checkDateTimeValidation = (startAtValue: string, startDateValue: string) => { const isDateAhead = dayjs(startDateValue).isAfter(dayjs()); - const isTimeAhead = startAtValue > dayjs().format(EXTENDED_TIME_FORMAT); + const isTimeAhead = dayjs(startAtValue).isAfter(dayjs()); if (!isDateAhead) { // if start date is current date then only check for time