bodyshop/client/src/components/email-overlay/email-overlay.component.jsx

import { UploadOutlined, UserAddOutlined } from "@ant-design/icons";
import {
  Divider,
  Form,
  Input,
  Select,
  Tabs,
  Upload,
  Space,
  Menu,
  Dropdown,
  Button,
} from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import EmailDocumentsComponent from "../email-documents/email-documents.component";
import _ from "lodash";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";
import { CreateExplorerLinkForJob } from "../../utils/localmedia";
import { selectEmailConfig } from "../../redux/email/email.selectors";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  currentUser: selectCurrentUser,
  emailConfig: selectEmailConfig,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(EmailOverlayComponent);

export function EmailOverlayComponent({
  emailConfig,
  form,
  selectedMediaState,
  bodyshop,
  currentUser,
}) {
  const { t } = useTranslation();
  const handleClick = ({ item, key, keyPath }) => {
    const email = item.props.value;
    form.setFieldsValue({
      to: _.uniq([
        ...form.getFieldValue("to"),
        ...(typeof email === "string" ? [email] : email),
      ]),
    });
  };

  const menu = (
    <div>
      <Menu onClick={handleClick}>
        {bodyshop.employees
          .filter((e) => e.user_email)
          .map((e, idx) => (
            <Menu.Item value={e.user_email} key={idx}>
              {`${e.first_name} ${e.last_name}`}
            </Menu.Item>
          ))}
        {bodyshop.md_to_emails.map((e, idx) => (
          <Menu.Item value={e.emails} key={idx + "group"}>
            {e.label}
          </Menu.Item>
        ))}
      </Menu>
    </div>
  );

  return (
    <div>
      <Form.Item
        label={t("emails.fields.from")}
        name="from"
        rules={[
          {
            required: true,
            //message: t("general.validation.required"),
          },
        ]}
      >
        <Select>
          <Select.Option key={currentUser.email}>
            {currentUser.email}
          </Select.Option>
          <Select.Option key={bodyshop.email}>{bodyshop.email}</Select.Option>
          {bodyshop.md_from_emails &&
            bodyshop.md_from_emails.map((e) => (
              <Select.Option key={e}>{e}</Select.Option>
            ))}
        </Select>
      </Form.Item>
      <Form.Item
        label={
          <Space>
            {t("emails.fields.to")}
            <Dropdown overlay={menu}>
              <a
                className="ant-dropdown-link"
                href=" #"
                onClick={(e) => e.preventDefault()}
              >
                <UserAddOutlined />
              </a>
            </Dropdown>
          </Space>
        }
        name="to"
        rules={[
          {
            required: true,
            //message: t("general.validation.required"),
          },
        ]}
      >
        <Select mode="tags" tokenSeparators={[",", ";"]} />
      </Form.Item>
      <Form.Item label={t("emails.fields.cc")} name="cc">
        <Select mode="tags" tokenSeparators={[",", ";"]} />
      </Form.Item>
      <Form.Item
        label={t("emails.fields.subject")}
        name="subject"
        rules={[
          {
            required: true,
            //message: t("general.validation.required"),
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Divider>{t("emails.labels.preview")}</Divider>
      {bodyshop.attach_pdf_to_email && (
        <strong>{t("emails.labels.pdfcopywillbeattached")}</strong>
      )}

      <Form.Item shouldUpdate>
        {() => {
          return (
            <div
              style={{
                padding: "1rem",

                backgroundColor: "lightgray",
                borderLeft: "6px solid #2196F3",
              }}
              dangerouslySetInnerHTML={{ __html: form.getFieldValue("html") }}
            />
          );
        }}
      </Form.Item>

      <Tabs>
        <Tabs.TabPane tab={t("emails.labels.documents")} key="documents">
          <EmailDocumentsComponent
            selectedMediaState={selectedMediaState}
            form={form}
          />
        </Tabs.TabPane>

        <Tabs.TabPane tab={t("emails.labels.attachments")} key="attachments">
          {bodyshop.uselocalmediaserver && emailConfig.jobid && (
            <a href={CreateExplorerLinkForJob({ jobid: emailConfig.jobid })}>
              <Button>{t("documents.labels.openinexplorer")}</Button>
            </a>
          )}
          <Form.Item
            name="fileList"
            valuePropName="fileList"
            getValueFromEvent={(e) => {
              if (Array.isArray(e)) {
                return e;
              }
              return e && e.fileList;
            }}
            rules={[
              ({ getFieldValue }) => ({
                validator(rule, value) {
                  const totalSize = value.reduce(
                    (acc, val) => (acc = acc + val.size),
                    0
                  );

                  const limit =
                    10485760 - new Blob([form.getFieldValue("html")]).size;

                  if (totalSize > limit) {
                    return Promise.reject(t("general.errors.sizelimit"));
                  }
                  return Promise.resolve();
                },
              }),
            ]}
          >
            <Upload.Dragger
              beforeUpload={Upload.LIST_IGNORE}
              multiple
              listType="picture-card"
            >
              <>
                <p className="ant-upload-drag-icon">
                  <UploadOutlined />
                </p>
                <p className="ant-upload-text">
                  Click or drag files to this area to upload.
                </p>
              </>
            </Upload.Dragger>
          </Form.Item>
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
}