bodyshop/client/src/components/job-at-change/schedule-event.component.jsx

import { AlertFilled } from "@ant-design/icons";
import {
  Button,
  Divider,
  Dropdown,
  Menu,
  notification,
  Popover,
  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 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 OwnerNameDisplay from "../owner-name-display/owner-name-display.component";

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 blockContent = (
    <div>
      <Button onClick={() => handleCancel(event.id)} disabled={event.arrived}>
        {t("appointments.actions.cancel")}
      </Button>
    </div>
  );

  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}

        <Button onClick={() => handleCancel(event.id)} disabled={event.arrived}>
          {t("appointments.actions.cancel")}
        </Button>
        {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 ? (
    <div
      style={{
        display: "flex",
        flexWrap: "wrap",
        height: "100%",
      }}
    >
      <Space>
        {event.note && <AlertFilled className="production-alert" />}
        <strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
        <span>
          <OwnerNameDisplay ownerObject={event.job} />
        </span>
      </Space>
      <Space>
        <span>
          {`${(event.job && event.job.v_model_yr) || ""} ${
            (event.job && event.job.v_make_desc) || ""
          } ${(event.job && event.job.v_model_desc) || ""}`}
        </span>
        <span>
          {`(${
            (event.job && event.job.labhrs.aggregate.sum.mod_lb_hrs) || "0"
          } / ${
            (event.job && event.job.larhrs.aggregate.sum.mod_lb_hrs) || "0"
          })`}
        </span>
      </Space>
      {event.job && event.job.alt_transport && (
        <div style={{ margin: ".1rem" }}>{event.job.alt_transport}</div>
      )}
    </div>
  ) : (
    <div style={{ height: "100%", width: "100%" }}>
      <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%" }}
    >
      {RegularEvent}
    </Popover>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ScheduleEventComponent);