73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
import { Button, Modal } from "antd";
|
|
import axios from "axios";
|
|
import React, { useState } from "react";
|
|
import { useQuery } from "react-apollo";
|
|
//Message options has the to & from details
|
|
//Query Config is what can get popped into UseQuery(QUERY_NAME, {variables: {vars}, fetchonly})
|
|
//Template Which template should be used to send the email.
|
|
import ReactDOMServer from "react-dom/server";
|
|
import { renderEmail } from "react-html-email";
|
|
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
|
|
import SendEmailButtonComponent from "./send-email-button.component";
|
|
export default function SendEmail({
|
|
MessageOptions,
|
|
QueryConfig,
|
|
Template,
|
|
...otherProps
|
|
}) {
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
const [emailConfig, setEmailConfig] = useState({ ...MessageOptions });
|
|
const [gqlQuery, vars] = QueryConfig;
|
|
|
|
const { loading, data } = useQuery(gqlQuery, {
|
|
...vars,
|
|
fetchPolicy: "network-only",
|
|
skip: !modalVisible
|
|
});
|
|
if (data && !emailConfig.html) {
|
|
console.log(ReactDOMServer.renderToStaticMarkup(<Template data={data} />));
|
|
setEmailConfig({
|
|
...emailConfig,
|
|
//html: ReactDOMServer.renderToStaticMarkup(<Template data={data} />)
|
|
html: renderEmail(<Template data={data} />)
|
|
});
|
|
}
|
|
|
|
const handleConfigChange = event => {
|
|
const { name, value } = event.target;
|
|
setEmailConfig({ ...emailConfig, [name]: value });
|
|
};
|
|
|
|
const handleHtmlChange = text => {
|
|
setEmailConfig({ ...emailConfig, html: text });
|
|
};
|
|
|
|
const sendEmail = () => {
|
|
axios.post("/sendemail", emailConfig).then(response => {
|
|
alert(JSON.stringify(response));
|
|
});
|
|
};
|
|
return (
|
|
<div>
|
|
<Modal
|
|
destroyOnClose={true}
|
|
visible={modalVisible}
|
|
width={"80%"}
|
|
onOk={sendEmail}
|
|
onCancel={() => setModalVisible(false)}>
|
|
<LoadingSpinner loading={loading}>
|
|
<SendEmailButtonComponent
|
|
handleConfigChange={handleConfigChange}
|
|
emailConfig={emailConfig}
|
|
handleHtmlChange={handleHtmlChange}
|
|
/>
|
|
</LoadingSpinner>
|
|
</Modal>
|
|
|
|
<Button onClick={() => setModalVisible(true)}>
|
|
{otherProps.children}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|