diff --git a/client/src/App/App.container.jsx b/client/src/App/App.container.jsx index e4df37c61..d6f3a53fd 100644 --- a/client/src/App/App.container.jsx +++ b/client/src/App/App.container.jsx @@ -2,8 +2,6 @@ import { ApolloProvider } from "@apollo/client"; import { SplitFactoryProvider, SplitSdk } from "@splitsoftware/splitio-react"; import { ConfigProvider } from "antd"; import enLocale from "antd/es/locale/en_US"; -import dayjs from "../utils/day"; -import "dayjs/locale/en"; import React from "react"; import { useTranslation } from "react-i18next"; import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component"; @@ -19,8 +17,6 @@ if (import.meta.env.DEV) { Userpilot.initialize("NX-69145f08"); } -dayjs.locale("en"); - const config = { core: { authorizationKey: import.meta.env.VITE_APP_SPLIT_API, diff --git a/client/src/components/eula/eula.component.jsx b/client/src/components/eula/eula.component.jsx index 8d2227e02..399a52b40 100644 --- a/client/src/components/eula/eula.component.jsx +++ b/client/src/components/eula/eula.component.jsx @@ -8,7 +8,7 @@ import { INSERT_EULA_ACCEPTANCE } from "../../graphql/user.queries"; import { useMutation } from "@apollo/client"; import { acceptEula } from "../../redux/user/user.actions"; import { useTranslation } from "react-i18next"; -import day from "../../utils/day"; +import dayjs from "../../utils/day"; import "./eula.styles.scss"; import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx"; @@ -208,7 +208,7 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => ( { required: true, validator: (_, value) => { - if (day(value).isSame(day(), "day")) { + if (dayjs(value).isSame(dayjs(), "day")) { return Promise.resolve(); } return Promise.reject(new Error(t("eula.messages.date_accepted"))); diff --git a/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx b/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx index e34ae14f7..707dfbdf8 100644 --- a/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx +++ b/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx @@ -4,19 +4,37 @@ import React, { useCallback, useState } from "react"; import { useTranslation } from "react-i18next"; import dayjs from "../../utils/day"; import { fuzzyMatchDate } from "./formats.js"; +import { createStructuredSelector } from "reselect"; +import { selectBodyshop } from "../../redux/user/user.selectors.js"; +import { connect } from "react-redux"; -const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, isDateOnly = false, ...restProps }) => { +const mapStateToProps = createStructuredSelector({ + bodyshop: selectBodyshop +}); + +const DateTimePicker = ({ + value, + onChange, + onBlur, + id, + onlyFuture, + onlyToday, + isDateOnly = false, + bodyshop, + ...restProps +}) => { const [isManualInput, setIsManualInput] = useState(false); const { t } = useTranslation(); const handleChange = useCallback( (newDate) => { + if (!newDate) return; if (onChange) { - onChange(newDate || null); + onChange(bodyshop?.timezone ? dayjs(newDate).tz(bodyshop.timezone, true) : newDate); } setIsManualInput(false); }, - [onChange] + [onChange, bodyshop?.timezone] ); const handleBlur = useCallback( @@ -102,4 +120,4 @@ DateTimePicker.propTypes = { isDateOnly: PropTypes.bool }; -export default React.memo(DateTimePicker); +export default connect(mapStateToProps, null)(DateTimePicker); diff --git a/client/src/components/job-lifecycle/job-lifecycle.component.jsx b/client/src/components/job-lifecycle/job-lifecycle.component.jsx index 794524c2a..e648ad4d5 100644 --- a/client/src/components/job-lifecycle/job-lifecycle.component.jsx +++ b/client/src/components/job-lifecycle/job-lifecycle.component.jsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useState } from "react"; -import day from "../../utils/day"; +import dayjs from "../../utils/day"; import axios from "axios"; import { Badge, Card, Space, Table, Tag } from "antd"; import { gql, useQuery } from "@apollo/client"; @@ -72,7 +72,7 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) { dataIndex: "start", key: "start", render: (text) => DateTimeFormatterFunction(text), - sorter: (a, b) => day(a.start).unix() - day(b.start).unix() + sorter: (a, b) => dayjs(a.start).unix() - dayjs(b.start).unix() }, { title: t("job_lifecycle.columns.relative_start"), @@ -90,7 +90,7 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) { } return isEmpty(a.end) ? 1 : -1; } - return day(a.end).unix() - day(b.end).unix(); + return dayjs(a.end).unix() - dayjs(b.end).unix(); }, render: (text) => (isEmpty(text) ? t("job_lifecycle.content.not_available") : DateTimeFormatterFunction(text)) }, diff --git a/client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx b/client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx index 8e570ab2d..ce0b6e4fe 100644 --- a/client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx +++ b/client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import { useMutation } from "@apollo/client"; import { Button, Form, notification, Popover, Select, Space } from "antd"; -import day from "../../utils/day"; +import dayjs from "../../utils/day"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; @@ -48,7 +48,7 @@ export function JobLineDispatchButton({ const result = await dispatchLines({ variables: { partsDispatch: { - dispatched_at: day(), + dispatched_at: dayjs(), employeeid: values.employeeid, jobid: job.id, dispatched_by: currentUser.email, @@ -138,7 +138,11 @@ export function JobLineDispatchButton({ return ( - diff --git a/client/src/components/parts-dispatch-expander/parts-dispatch-expander.component.jsx b/client/src/components/parts-dispatch-expander/parts-dispatch-expander.component.jsx index 477240357..2a84527cc 100644 --- a/client/src/components/parts-dispatch-expander/parts-dispatch-expander.component.jsx +++ b/client/src/components/parts-dispatch-expander/parts-dispatch-expander.component.jsx @@ -1,6 +1,6 @@ import { useMutation } from "@apollo/client"; import { Button, Card, Col, notification, Row, Table } from "antd"; -import day from "../../utils/day"; +import dayjs from "../../utils/day"; import React from "react"; import { useTranslation } from "react-i18next"; import { UPDATE_PARTS_DISPATCH_LINE } from "../../graphql/parts-dispatch.queries"; @@ -11,7 +11,7 @@ export default function PartsDispatchExpander({ dispatch, job }) { const [updateDispatchLine] = useMutation(UPDATE_PARTS_DISPATCH_LINE); const handleAccept = async ({ partsDispatchLineId }) => { - const accepted_at = day(); + const accepted_at = dayjs(); const result = await updateDispatchLine({ variables: { id: partsDispatchLineId, line: { accepted_at } }, optimisticResponse: { diff --git a/client/src/components/schedule-calendar-wrapper/localizer.js b/client/src/components/schedule-calendar-wrapper/localizer.js index e91016416..9935252b4 100644 --- a/client/src/components/schedule-calendar-wrapper/localizer.js +++ b/client/src/components/schedule-calendar-wrapper/localizer.js @@ -120,14 +120,6 @@ var formats = { }; const localizer = (dayjsLib) => { - // load dayjs plugins - dayjsLib.extend(isBetween); - dayjsLib.extend(isSameOrAfter); - dayjsLib.extend(isSameOrBefore); - dayjsLib.extend(localeData); - dayjsLib.extend(localizedFormat); - dayjsLib.extend(minMax); - dayjsLib.extend(utc); var locale = function locale(dj, c) { return c ? dj.locale(c) : dj; }; @@ -136,7 +128,8 @@ const localizer = (dayjsLib) => { // then use the timezone aware version //TODO This was the issue entirely... - // var dayjs = dayjsLib.tz ? dayjsLib.tz : dayjsLib; + // var dayjs = dayjsLib.tz ? dayjsLib.tz : dayjsLib; + var dayjs = dayjsLib; function getTimezoneOffset(date) { diff --git a/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx b/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx index fb866d89d..4d6f8fe78 100644 --- a/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx +++ b/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx @@ -20,6 +20,7 @@ const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop, problemJobs: selectProblemJobs }); + const localizer = local(dayjs); export function ScheduleCalendarWrapperComponent({ diff --git a/client/src/components/time-tickets-commit-toggle/time-tickets-commit-toggle.component.jsx b/client/src/components/time-tickets-commit-toggle/time-tickets-commit-toggle.component.jsx index 3ee60583a..07aa3234d 100644 --- a/client/src/components/time-tickets-commit-toggle/time-tickets-commit-toggle.component.jsx +++ b/client/src/components/time-tickets-commit-toggle/time-tickets-commit-toggle.component.jsx @@ -1,6 +1,6 @@ import { useMutation } from "@apollo/client"; import { Button, notification } from "antd"; -import day from "../../utils/day"; +import dayjs from "../../utils/day"; import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; @@ -29,7 +29,7 @@ export function TimeTicketsCommit({ bodyshop, currentUser, timeticket, disabled, ? { commited_by: null, committed_at: null } : { commited_by: currentUser.email, - committed_at: day() + committed_at: dayjs() }; const result = await updateTimeTicket({ diff --git a/client/src/components/time-tickets-commit/time-tickets-commit.component.jsx b/client/src/components/time-tickets-commit/time-tickets-commit.component.jsx index 52aef7401..c817afd2e 100644 --- a/client/src/components/time-tickets-commit/time-tickets-commit.component.jsx +++ b/client/src/components/time-tickets-commit/time-tickets-commit.component.jsx @@ -1,6 +1,6 @@ import { useMutation } from "@apollo/client"; import { Button, notification } from "antd"; -import day from "../../utils/day"; +import dayjs from "../../utils/day"; import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; @@ -34,7 +34,7 @@ export function TimeTicketsCommit({ timeticketIds: timetickets.map((ticket) => ticket.id), timeticket: { commited_by: currentUser.email, - committed_at: day() + committed_at: dayjs() } }, update(cache) { @@ -47,7 +47,7 @@ export function TimeTicketsCommit({ return { ...ticket, commited_by: currentUser.email, - committed_at: day() + committed_at: dayjs() }; } return ticket; diff --git a/client/src/components/tt-approve-button/tt-approve-button.component.jsx b/client/src/components/tt-approve-button/tt-approve-button.component.jsx index 8a31528d7..48daee263 100644 --- a/client/src/components/tt-approve-button/tt-approve-button.component.jsx +++ b/client/src/components/tt-approve-button/tt-approve-button.component.jsx @@ -1,7 +1,7 @@ import { useApolloClient } from "@apollo/client"; import { Button, notification } from "antd"; import _ from "lodash"; -import day from "../../utils/day"; +import dayjs from "../../utils/day"; import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; @@ -49,7 +49,7 @@ export function TtApproveButton({ })), approvalIds: selectedTickets, approvalUpdate: { - approved_at: day(), + approved_at: dayjs(), approved_by: currentUser.email } } diff --git a/client/src/redux/user/user.sagas.js b/client/src/redux/user/user.sagas.js index f565ea544..423b40283 100644 --- a/client/src/redux/user/user.sagas.js +++ b/client/src/redux/user/user.sagas.js @@ -28,7 +28,7 @@ import { } from "../../firebase/firebase.utils"; import { QUERY_EULA } from "../../graphql/bodyshop.queries"; import client from "../../utils/GraphQLClient"; -import day from "../../utils/day"; +import dayjs from "../../utils/day"; import InstanceRenderManager from "../../utils/instanceRenderMgr"; import { checkInstanceId, @@ -96,7 +96,7 @@ export function* isUserAuthenticated() { const eulaQuery = yield client.query({ query: QUERY_EULA, variables: { - now: day() + now: dayjs() } }); @@ -314,8 +314,7 @@ export function* SetAuthLevelFromShopDetails({ payload }) { try { const userEmail = yield select((state) => state.user.currentUser.email); try { - console.log("Setting shop timezone."); - day.tz.setDefault(payload.timezone); + dayjs.tz.setDefault(payload.timezone); } catch (error) { console.log(error); } diff --git a/client/src/utils/day.js b/client/src/utils/day.js index 3fb824b11..3194cfb31 100644 --- a/client/src/utils/day.js +++ b/client/src/utils/day.js @@ -1,5 +1,6 @@ import dayjs from "dayjs"; +import "dayjs/locale/en"; import dayjsBusinessDays from "dayjs-business-days2"; import isSameOrAfter from "dayjs/plugin/isSameOrAfter"; import updateLocale from "dayjs/plugin/updateLocale"; @@ -64,4 +65,6 @@ dayjs.extend(minMax); dayjs.extend(isBetween); dayjs.extend(dayjsBusinessDays); +dayjs.locale("en"); + export default dayjs;