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

import { Divider, Form, Modal, notification } from "antd";
import axios from "axios";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { toggleEmailOverlayVisible } from "../../redux/email/email.actions";
import {
  selectEmailConfig,
  selectEmailVisible,
} from "../../redux/email/email.selectors.js";
import {
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";
import RenderTemplate from "../../utils/RenderTemplate";
import { EmailSettings } from "../../utils/TemplateConstants";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import EmailOverlayComponent from "./email-overlay.component";

const mapStateToProps = createStructuredSelector({
  modalVisible: selectEmailVisible,
  emailConfig: selectEmailConfig,
  bodyshop: selectBodyshop,
  currentUser: selectCurrentUser,
});

const mapDispatchToProps = (dispatch) => ({
  toggleEmailOverlayVisible: () => dispatch(toggleEmailOverlayVisible()),
});

export function EmailOverlayContainer({
  emailConfig,
  modalVisible,
  toggleEmailOverlayVisible,
  bodyshop,
  currentUser,
}) {
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [sending, setSending] = useState(false);
  const [rawHtml, setRawHtml] = useState("");
  const [selectedMedia, setSelectedMedia] = useState([]);

  const defaultEmailFrom = {
    from: {
      name: `${currentUser.displayName} @ ${bodyshop.shopname}`,
      address: EmailSettings.fromAddress,
    },
    ReplyTo: {
      Email: currentUser.validemail ? currentUser.email : bodyshop.email,
      Name: currentUser.displayName,
    },
  };

  const handleFinish = async (values) => {
    logImEXEvent("email_send_from_modal");

    const attachments = [];

    if (values.fileList)
      await asyncForEach(values.fileList, async (f) => {
        const t = {
          ContentType: f.type,
          Filename: f.name,
          Base64Content: (await toBase64(f.originFileObj)).split(",")[1],
        };
        attachments.push(t);
      });

    setSending(true);
    try {
      await axios.post("/sendemail", {
        ...defaultEmailFrom,
        ...values,
        html: rawHtml,
        attachments:
          values.fileList &&
          (await Promise.all(
            values.fileList.map(async (f) => await toBase64(f.originFileObj))
          )),
        media: selectedMedia.filter((m) => m.isSelected).map((m) => m.src),
        //attachments,
      });
      notification["success"]({ message: t("emails.successes.sent") });
      toggleEmailOverlayVisible();
    } catch (error) {
      console.log(JSON.stringify(error));
      notification["error"]({
        message: t("emails.errors.notsent", { message: error.message }),
      });
    }
    setSending(false);
  };

  const render = async () => {
    logImEXEvent("email_render_template", { template: emailConfig.template });
    setLoading(true);
    let html = await RenderTemplate(emailConfig.template, bodyshop, true);

    const response = await axios.post("/render/inlinecss", {
      html: html,
      url: `${window.location.protocol}://${window.location.host}/`,
    });
    setRawHtml(response.data);
    form.setFieldsValue({
      ...emailConfig.messageOptions,
      cc:
        emailConfig.messageOptions.cc &&
        emailConfig.messageOptions.cc.filter((x) => x),
      to:
        emailConfig.messageOptions.to &&
        emailConfig.messageOptions.to.filter((x) => x),
      html: response.data,
      fileList: [],
    });
    setLoading(false);
  };

  useEffect(() => {
    if (modalVisible) render();
  }, [modalVisible]); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <Modal
      destroyOnClose={true}
      visible={modalVisible}
      width={"80%"}
      onOk={() => form.submit()}
      onCancel={() => {
        toggleEmailOverlayVisible();
      }}
      okButtonProps={{ loading: sending }}
    >
      <Form layout="vertical" form={form} onFinish={handleFinish}>
        {loading && (
          <div>
            <LoadingSkeleton />
            <Divider>{t("emails.labels.preview")}</Divider>
            <LoadingSpinner message={t("emails.labels.generatingemail")} />
          </div>
        )}
        {!loading && (
          <EmailOverlayComponent
            form={form}
            selectedMediaState={[selectedMedia, setSelectedMedia]}
          />
        )}
      </Form>
    </Modal>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(EmailOverlayContainer);

const toBase64 = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });

const asyncForEach = async (array, callback) => {
  for (let index = 0; index < array.length; index++) {
    await callback(array[index], index, array);
  }
};