351 lines
12 KiB
JavaScript
351 lines
12 KiB
JavaScript
import { AlertFilled } from "@ant-design/icons";
|
|
import { Button, Divider, Dropdown, Form, Input, notification, Popover, Select, Space } from "antd";
|
|
import parsePhoneNumber from "libphonenumber-js";
|
|
import dayjs from "../../utils/day";
|
|
import queryString from "query-string";
|
|
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { Link, useLocation, useNavigate } 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 [open, setOpen] = useState(false);
|
|
const history = useNavigate();
|
|
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({
|
|
search: queryString.stringify({
|
|
...searchParams,
|
|
selected: event.job.id
|
|
})
|
|
});
|
|
}}
|
|
>
|
|
{t("appointments.actions.preview")}
|
|
</Button>
|
|
) : null}
|
|
{event.job ? (
|
|
<Dropdown
|
|
menu={{
|
|
items: [
|
|
{
|
|
key: "email",
|
|
label: t("general.labels.email"),
|
|
disabled: event.arrived,
|
|
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
|
|
);
|
|
}
|
|
},
|
|
{
|
|
key: "sms",
|
|
label: t("general.labels.sms"),
|
|
disabled: event.arrived || !bodyshop.messagingservicesid,
|
|
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: dayjs(event.start).format("MM/DD/YYYY"),
|
|
time: dayjs(event.start).format("HH:mm a")
|
|
})
|
|
);
|
|
setOpen(false);
|
|
} else {
|
|
notification["error"]({
|
|
message: t("messaging.error.invalidphone")
|
|
});
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}}
|
|
>
|
|
<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={() => {
|
|
setOpen(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
|
|
open={open}
|
|
onOpenChange={(vis) => !event.vacation && setOpen(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);
|