bodyshop/client/src/components/schedule-event/schedule-event.component.jsx

import { Button, Popover } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { setModalContext } from "../../redux/modals/modals.actions";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import PhoneFormatter from "../../utils/PhoneFormatter";
import DataLabel from "../data-label/data-label.component";
import ScheduleAtChange from "./schedule-event.at.component";
import ScheduleEventColor from "./schedule-event.color.component";

const mapDispatchToProps = (dispatch) => ({
  setScheduleContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "schedule" })),
});

export function ScheduleEventComponent({
  event,
  refetch,
  handleCancel,
  setScheduleContext,
}) {
  const { t } = useTranslation();
  const popoverContent = (
    <div>
      {!event.isintake ? (
        <strong>{event.title}</strong>
      ) : (
        <div>
          <strong>{`${(event.job && event.job.ownr_fn) || ""} ${
            (event.job && event.job.ownr_ln) || ""
          }`}</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} />
        </div>
      )}

      {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")}>
            <PhoneFormatter>
              {(event.job && event.job.ownr_ph1) || ""}
            </PhoneFormatter>
          </DataLabel>
          <DataLabel label={t("jobs.fields.alt_transport")}>
            {(event.job && event.job.alt_transport) || ""}
            <ScheduleAtChange event={event} />
          </DataLabel>
        </div>
      ) : null}

      <div className="imex-flex-row">
        {event.job ? (
          <Link to={`/manage/jobs/${event.job && event.job.id}`}>
            <Button>{t("appointments.actions.viewjob")}</Button>
          </Link>
        ) : null}
        <Button onClick={() => handleCancel(event.id)} disabled={event.arrived}>
          {t("appointments.actions.cancel")}
        </Button>
        <Button
          disabled={event.arrived}
          onClick={() => {
            setScheduleContext({
              actions: { refetch: refetch },
              context: {
                jobId: event.job.id,
                job: event.job,
                previousEvent: event.id,
              },
            });
          }}
        >
          {t("appointments.actions.reschedule")}
        </Button>
        {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}
      </div>
    </div>
  );

  const RegularEvent = event.isintake ? (
    <div style={{ display: "flex", flexWrap: "wrap" }}>
      <strong style={{ margin: ".1rem" }}>{`${
        event.job.ro_number || event.job.est_number
      }`}</strong>
      <div style={{ margin: ".1rem" }}>{`${
        (event.job && event.job.ownr_fn) || ""
      } ${(event.job && event.job.ownr_ln) || ""} ${
        (event.job && event.job.ownr_co_nm) || ""
      }`}</div>

      <div style={{ margin: ".1rem" }}>
        {`${(event.job && event.job.v_model_yr) || ""} ${
          (event.job && event.job.v_make_desc) || ""
        } ${(event.job && event.job.v_model_desc) || ""}`}
      </div>
      <div style={{ margin: ".1rem" }}>
        {`(${
          (event.job && event.job.labhrs.aggregate.sum.mod_lb_hrs) || "0"
        } / ${
          (event.job && event.job.larhrs.aggregate.sum.mod_lb_hrs) || "0"
        })`}
      </div>
      {event.job && event.job.alt_transport && (
        <div style={{ margin: ".1rem" }}>{event.job.alt_transport}</div>
      )}
    </div>
  ) : (
    <div>
      <strong>{`${event.title || ""}`}</strong>
    </div>
  );

  return (
    <Popover
      trigger="click"
      content={popoverContent}
      style={{ height: "100%", width: "100%" }}
    >
      {RegularEvent}
    </Popover>
  );
}
export default connect(null, mapDispatchToProps)(ScheduleEventComponent);