392 lines
12 KiB
JavaScript
392 lines
12 KiB
JavaScript
import { AlertFilled } from "@ant-design/icons";
|
|
import {
|
|
Button,
|
|
Divider,
|
|
Dropdown,
|
|
Form,
|
|
Input,
|
|
Menu,
|
|
notification,
|
|
Popover,
|
|
Select,
|
|
Space,
|
|
} from "antd";
|
|
import parsePhoneNumber from "libphonenumber-js";
|
|
import moment from "moment";
|
|
import queryString from "query-string";
|
|
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { Link, useHistory, useLocation } from "react-router-dom";
|
|
import { createStructuredSelector } from "reselect";
|
|
import {
|
|
openChatByPhone,
|
|
setMessage,
|
|
} from "../../redux/messaging/messaging.actions";
|
|
import { setModalContext } from "../../redux/modals/modals.actions";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
|
import { GenerateDocument } from "../../utils/RenderTemplate";
|
|
import { TemplateList } from "../../utils/TemplateConstants";
|
|
import ChatOpenButton from "../chat-open-button/chat-open-button.component";
|
|
import DataLabel from "../data-label/data-label.component";
|
|
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
|
|
import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
|
|
import ScheduleAtChange from "./job-at-change.component";
|
|
import ScheduleEventColor from "./schedule-event.color.component";
|
|
import ScheduleEventNote from "./schedule-event.note.component";
|
|
import { useMutation } from "@apollo/client";
|
|
import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
setScheduleContext: (context) =>
|
|
dispatch(setModalContext({ context: context, modal: "schedule" })),
|
|
openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
|
|
setMessage: (text) => dispatch(setMessage(text)),
|
|
});
|
|
|
|
export function ScheduleEventComponent({
|
|
bodyshop,
|
|
setMessage,
|
|
openChatByPhone,
|
|
event,
|
|
refetch,
|
|
handleCancel,
|
|
setScheduleContext,
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [visible, setVisible] = useState(false);
|
|
const history = useHistory();
|
|
const searchParams = queryString.parse(useLocation().search);
|
|
const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
|
|
const [title, setTitle] = useState(event.title);
|
|
const blockContent = (
|
|
<Space direction="vertical" wrap>
|
|
<Input
|
|
value={title}
|
|
onChange={(e) => setTitle(e.currentTarget.value)}
|
|
onBlur={async () => {
|
|
await updateAppointment({
|
|
variables: {
|
|
appid: event.id,
|
|
app: {
|
|
title: title,
|
|
},
|
|
},
|
|
optimisticResponse: {
|
|
update_appointments: {
|
|
__typename: "appointments_mutation_response",
|
|
returning: [
|
|
{
|
|
...event,
|
|
title: title,
|
|
__typename: "appointments",
|
|
},
|
|
],
|
|
},
|
|
},
|
|
});
|
|
}}
|
|
/>
|
|
|
|
<Button
|
|
onClick={() => handleCancel({ id: event.id })}
|
|
disabled={event.arrived}
|
|
>
|
|
{t("appointments.actions.unblock")}
|
|
</Button>
|
|
</Space>
|
|
);
|
|
|
|
const popoverContent = (
|
|
<div style={{ maxWidth: "40vw" }}>
|
|
{!event.isintake ? (
|
|
<Space>
|
|
<strong>{event.title}</strong>
|
|
<ScheduleEventColor event={event} />
|
|
</Space>
|
|
) : (
|
|
<Space>
|
|
<strong>
|
|
<OwnerNameDisplay ownerObject={event.job} />
|
|
</strong>
|
|
<span style={{ margin: 4 }}>
|
|
{`${(event.job && event.job.v_model_yr) || ""} ${
|
|
(event.job && event.job.v_make_desc) || ""
|
|
} ${(event.job && event.job.v_model_desc) || ""}`}
|
|
</span>
|
|
<ScheduleEventColor event={event} />
|
|
</Space>
|
|
)}
|
|
|
|
{event.job ? (
|
|
<div>
|
|
<DataLabel label={t("jobs.fields.ro_number")}>
|
|
{(event.job && event.job.ro_number) || ""}
|
|
</DataLabel>
|
|
<DataLabel label={t("jobs.fields.clm_total")}>
|
|
<CurrencyFormatter>
|
|
{(event.job && event.job.clm_total) || ""}
|
|
</CurrencyFormatter>
|
|
</DataLabel>
|
|
<DataLabel hideIfNull label={t("jobs.fields.ins_co_nm")}>
|
|
{(event.job && event.job.ins_co_nm) || ""}
|
|
</DataLabel>
|
|
<DataLabel hideIfNull label={t("jobs.fields.clm_no")}>
|
|
{(event.job && event.job.clm_no) || ""}
|
|
</DataLabel>
|
|
<DataLabel label={t("jobs.fields.ownr_ea")}>
|
|
{(event.job && event.job.ownr_ea) || ""}
|
|
</DataLabel>
|
|
<DataLabel label={t("jobs.fields.ownr_ph1")}>
|
|
<ChatOpenButton
|
|
phone={event.job && event.job.ownr_ph1}
|
|
jobid={event.job.id}
|
|
/>
|
|
</DataLabel>
|
|
<DataLabel label={t("jobs.fields.ownr_ph2")}>
|
|
<ChatOpenButton
|
|
phone={event.job && event.job.ownr_ph2}
|
|
jobid={event.job.id}
|
|
/>
|
|
</DataLabel>
|
|
<DataLabel label={t("jobs.fields.alt_transport")}>
|
|
{(event.job && event.job.alt_transport) || ""}
|
|
<ScheduleAtChange job={event && event.job} />
|
|
</DataLabel>
|
|
<ScheduleEventNote event={event} />
|
|
</div>
|
|
) : (
|
|
<div>{event.note || ""}</div>
|
|
)}
|
|
<Divider />
|
|
<Space wrap>
|
|
{event.job ? (
|
|
<Link to={`/manage/jobs/${event.job && event.job.id}`}>
|
|
<Button>{t("appointments.actions.viewjob")}</Button>
|
|
</Link>
|
|
) : null}
|
|
{event.job ? (
|
|
<Button
|
|
onClick={() => {
|
|
history.push({
|
|
search: queryString.stringify({
|
|
...searchParams,
|
|
selected: event.job.id,
|
|
}),
|
|
});
|
|
}}
|
|
>
|
|
{t("appointments.actions.preview")}
|
|
</Button>
|
|
) : null}
|
|
{event.job ? (
|
|
<Dropdown
|
|
overlay={
|
|
<Menu>
|
|
<Menu.Item
|
|
onClick={() => {
|
|
const Template = TemplateList("job").appointment_reminder;
|
|
GenerateDocument(
|
|
{
|
|
name: Template.key,
|
|
variables: { id: event.job.id },
|
|
},
|
|
{
|
|
to: event.job && event.job.ownr_ea,
|
|
subject: Template.subject,
|
|
},
|
|
"e",
|
|
event.job && event.job.id
|
|
);
|
|
}}
|
|
disabled={event.arrived}
|
|
>
|
|
{t("general.labels.email")}
|
|
</Menu.Item>
|
|
<Menu.Item
|
|
onClick={() => {
|
|
const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
|
|
if (p && p.isValid()) {
|
|
openChatByPhone({
|
|
phone_num: p.formatInternational(),
|
|
jobid: event.job.id,
|
|
});
|
|
setMessage(
|
|
t("appointments.labels.reminder", {
|
|
shopname: bodyshop.shopname,
|
|
date: moment(event.start).format("MM/DD/YYYY"),
|
|
time: moment(event.start).format("HH:mm a"),
|
|
})
|
|
);
|
|
setVisible(false);
|
|
} else {
|
|
notification["error"]({
|
|
message: t("messaging.error.invalidphone"),
|
|
});
|
|
}
|
|
}}
|
|
disabled={event.arrived || !bodyshop.messagingservicesid}
|
|
>
|
|
{t("general.labels.sms")}
|
|
</Menu.Item>
|
|
</Menu>
|
|
}
|
|
>
|
|
<Button>{t("appointments.actions.sendreminder")}</Button>
|
|
</Dropdown>
|
|
) : null}
|
|
{event.arrived ? (
|
|
<Button
|
|
// onClick={() => handleCancel(event.id)}
|
|
disabled={event.arrived}
|
|
>
|
|
{t("appointments.actions.cancel")}
|
|
</Button>
|
|
) : (
|
|
<Popover
|
|
trigger="click"
|
|
disabled={event.arrived}
|
|
content={
|
|
<Form
|
|
layout="vertical"
|
|
onFinish={({ lost_sale_reason }) => {
|
|
handleCancel({ id: event.id, lost_sale_reason });
|
|
}}
|
|
>
|
|
<Form.Item
|
|
name="lost_sale_reason"
|
|
label={t("jobs.fields.lost_sale_reason")}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
//message: t("general.validation.required"),
|
|
},
|
|
]}
|
|
>
|
|
<Select
|
|
options={bodyshop.md_lost_sale_reasons.map((lsr) => ({
|
|
label: lsr,
|
|
value: lsr,
|
|
}))}
|
|
/>
|
|
</Form.Item>
|
|
<Button htmlType="submit">
|
|
{t("appointments.actions.cancel")}
|
|
</Button>
|
|
</Form>
|
|
}
|
|
>
|
|
<Button
|
|
// onClick={() => handleCancel(event.id)}
|
|
disabled={event.arrived}
|
|
>
|
|
{t("appointments.actions.cancel")}
|
|
</Button>
|
|
</Popover>
|
|
)}
|
|
|
|
{event.isintake ? (
|
|
<Button
|
|
disabled={event.arrived}
|
|
onClick={() => {
|
|
setVisible(false);
|
|
setScheduleContext({
|
|
actions: { refetch: refetch },
|
|
context: {
|
|
jobId: event.job.id,
|
|
job: event.job,
|
|
previousEvent: event.id,
|
|
color: event.color,
|
|
alt_transport: event.job && event.job.alt_transport,
|
|
note: event.note,
|
|
},
|
|
});
|
|
}}
|
|
>
|
|
{t("appointments.actions.reschedule")}
|
|
</Button>
|
|
) : (
|
|
<ScheduleManualEvent event={event} />
|
|
)}
|
|
{event.isintake ? (
|
|
<Link
|
|
to={{
|
|
pathname: `/manage/jobs/${event.job && event.job.id}/intake`,
|
|
search: `?appointmentId=${event.id}`,
|
|
}}
|
|
>
|
|
<Button disabled={event.arrived}>
|
|
{t("appointments.actions.intake")}
|
|
</Button>
|
|
</Link>
|
|
) : null}
|
|
</Space>
|
|
</div>
|
|
);
|
|
|
|
const RegularEvent = event.isintake ? (
|
|
<Space
|
|
wrap
|
|
size="small"
|
|
style={{
|
|
backgroundColor:
|
|
event.color && event.color.hex ? event.color.hex : event.color,
|
|
}}
|
|
>
|
|
{event.note && <AlertFilled className="production-alert" />}
|
|
<strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
|
|
|
|
<OwnerNameDisplay ownerObject={event.job} />
|
|
|
|
{`${(event.job && event.job.v_model_yr) || ""} ${
|
|
(event.job && event.job.v_make_desc) || ""
|
|
} ${(event.job && event.job.v_model_desc) || ""}`}
|
|
|
|
{`(${(event.job && event.job.labhrs.aggregate.sum.mod_lb_hrs) || "0"} / ${
|
|
(event.job && event.job.larhrs.aggregate.sum.mod_lb_hrs) || "0"
|
|
})`}
|
|
|
|
{event.job && event.job.alt_transport && (
|
|
<div style={{ margin: ".1rem" }}>{event.job.alt_transport}</div>
|
|
)}
|
|
</Space>
|
|
) : (
|
|
<div
|
|
style={{
|
|
height: "100%",
|
|
width: "100%",
|
|
backgroundColor:
|
|
event.color && event.color.hex ? event.color.hex : event.color,
|
|
}}
|
|
>
|
|
<strong>{`${event.title || ""}`}</strong>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<Popover
|
|
visible={visible}
|
|
onVisibleChange={(vis) => !event.vacation && setVisible(vis)}
|
|
trigger="click"
|
|
content={event.block ? blockContent : popoverContent}
|
|
style={{
|
|
height: "100%",
|
|
width: "100%",
|
|
|
|
backgroundColor:
|
|
event.color && event.color.hex ? event.color.hex : event.color,
|
|
}}
|
|
>
|
|
{RegularEvent}
|
|
</Popover>
|
|
);
|
|
}
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(ScheduleEventComponent);
|