bodyshop/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

import { DownCircleFilled } from "@ant-design/icons";
import {
  Avatar,
  Badge,
  Button,
  Checkbox,
  Descriptions,
  Dropdown,
  Menu,
  notification,
  PageHeader,
  Tag
} from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import Moment from "react-moment";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import CarImage from "../../assets/car.svg";
import { selectBodyshop } from "../../redux/user/user.selectors";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import BarcodePopup from "../barcode-popup/barcode-popup.component";
import OwnerTagPopoverComponent from "../owner-tag-popover/owner-tag-popover.component";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});

export default connect(
  mapStateToProps,
  null
)(function JobsDetailHeader({
  job,
  mutationConvertJob,
  refetch,
  handleFinish,
  scheduleModalState,
  bodyshop,
  updateJobStatus
}) {
  const { t } = useTranslation();
  const setscheduleModalVisible = scheduleModalState[1];

  const tombstoneTitle = (
    <div>
      <Avatar size="large" alt="Vehicle Image" src={CarImage} />
      {job.ro_number
        ? `${t("jobs.fields.ro_number")} ${job.ro_number}`
        : `EST-${job.est_number}`}
    </div>
  );

  const statusmenu = (
    <Menu
      onClick={e => {
        updateJobStatus(e.key);
      }}
    >
      {bodyshop.md_ro_statuses.statuses.map(item => (
        <Menu.Item key={item}>{item}</Menu.Item>
      ))}
    </Menu>
  );

  const menuExtra = [
    <Dropdown overlay={statusmenu} key="changestatus">
      <Button>
        {t("jobs.actions.changestatus")} <DownCircleFilled />
      </Button>
    </Dropdown>,
    <Badge key="schedule" count={job.appointments_aggregate.aggregate.count}>
      <Button
        //TODO Enabled logic based on status.
        onClick={() => {
          setscheduleModalVisible(true);
        }}
      >
        {t("jobs.actions.schedule")}
      </Button>
    </Badge>,
    <Button
      key="convert"
      type="dashed"
      disabled={job.converted}
      onClick={() => {
        mutationConvertJob({
          variables: { jobId: job.id }
        }).then(r => {
          refetch();

          notification["success"]({
            message: t("jobs.successes.converted")
          });
        });
      }}
    >
      {t("jobs.actions.convert")}
    </Button>,
    <Button type="primary" key="submit" htmlType="submit">
      {t("general.actions.save")}
    </Button>
  ];

  return (
    <PageHeader
      style={{
        border: "1px solid rgb(235, 237, 240)"
      }}
      title={tombstoneTitle}
      //subTitle={tombstoneSubtitle}
      tags={
        <span key="job-status">
          {job.status ? <Tag color="blue">{job.status}</Tag> : null}
          <OwnerTagPopoverComponent job={job} />
          <Tag color="green">
            {job.vehicleid ? (
              <Link to={`/manage/vehicles/${job.vehicleid}`}>
                {`${job.v_model_yr || t("general.labels.na")} 
                ${job.v_make_desc || t("general.labels.na")} 
                ${job.v_model_desc || t("general.labels.na")} | 
                ${job.plate_no || t("general.labels.na")} | 
                ${job.v_vin || t("general.labels.na")}`}
              </Link>
            ) : (
              <span>
                {`${job.v_model_yr || t("general.labels.na")} 
              ${job.v_make_desc || t("general.labels.na")} 
              ${job.v_model_desc || t("general.labels.na")} | 
              ${job.plate_no || t("general.labels.na")} | 
              ${job.v_vin || t("general.labels.na")}`}
              </span>
            )}
          </Tag>
          <BarcodePopup value={job.id} />
        </span>
      }
      extra={menuExtra}
    >
      <Descriptions size="small" column={5}>
        <Descriptions.Item key="total" label={t("jobs.fields.repairtotal")}>
          <CurrencyFormatter>{job.clm_total}</CurrencyFormatter>
        </Descriptions.Item>

        <Descriptions.Item
          key="custowing"
          label={t("jobs.fields.customerowing")}
        >
          ##NO BINDING YET##
        </Descriptions.Item>

        <Descriptions.Item
          key="scp"
          label={t("jobs.fields.specialcoveragepolicy")}
        >
          <Checkbox checked={job.special_coverage_policy} />
        </Descriptions.Item>

        <Descriptions.Item
          key="sched_comp"
          label={t("jobs.fields.scheduled_completion")}
        >
          {job.scheduled_completion ? (
            <Moment format="MM/DD/YYYY">{job.scheduled_completion}</Moment>
          ) : null}
        </Descriptions.Item>

        <Descriptions.Item key="servicecar" label={t("jobs.fields.servicecar")}>
          {job.service_car}
        </Descriptions.Item>
      </Descriptions>
    </PageHeader>
  );
});