admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-557 Send documents in emails.

Browse Source
This commit is contained in:
Patrick Fic
2021-06-07 12:27:14 -07:00
parent 784c58e295
commit 979ba1c142
22 changed files with 218 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
client/src/components/email-overlay/email-overlay.component.jsx
View File

@@ -1,9 +1,10 @@
import { UploadOutlined } from "@ant-design/icons";
import { Card, Divider, Form, Input, Select, Upload } from "antd";
import { Divider, Form, Input, Select, Tabs, Upload } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import EmailDocumentsComponent from "../email-documents/email-documents.component";
export default function EmailOverlayComponent({ form }) {
export default function EmailOverlayComponent({ form, selectedMediaState }) {
const { t } = useTranslation();
return (
<div>
@@ -52,34 +53,38 @@ export default function EmailOverlayComponent({ form }) {
}}
</Form.Item>
<Card title={t("emails.labels.attachments")}>
<Form.Item
name="fileList"
valuePropName="fileList"
getValueFromEvent={(e) => {
console.log("Upload event:", e);
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
}}
>
<Upload.Dragger
beforeUpload={Upload.LIST_IGNORE}
multiple
listType="picture-card"
<Tabs>
<Tabs.TabPane tab={t("emails.labels.documents")} key="documents">
<EmailDocumentsComponent selectedMediaState={selectedMediaState} />
</Tabs.TabPane>
<Tabs.TabPane tab={t("emails.labels.attachments")} key="attachments">
<Form.Item
name="fileList"
valuePropName="fileList"
getValueFromEvent={(e) => {
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
}}
>
<>
<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>
</Card>
<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>
);
}

37
client/src/components/email-overlay/email-overlay.container.jsx
View File

@@ -43,6 +43,8 @@ export function EmailOverlayContainer({
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}`,
@@ -56,17 +58,18 @@ export function EmailOverlayContainer({
const handleFinish = async (values) => {
logImEXEvent("email_send_from_modal");
console.log(`values`, values);
const attachments = [];
await asyncForEach(values.fileList, async (f) => {
const t = {
ContentType: f.type,
Filename: f.name,
Base64Content: (await toBase64(f.originFileObj)).split(",")[1],
};
attachments.push(t);
});
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 {
@@ -74,9 +77,12 @@ export function EmailOverlayContainer({
...defaultEmailFrom,
...values,
html: rawHtml,
attachments: await Promise.all(
values.fileList.map(async (f) => await toBase64(f.originFileObj))
),
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") });
@@ -137,7 +143,12 @@ export function EmailOverlayContainer({
<LoadingSpinner message={t("emails.labels.generatingemail")} />
</div>
)}
{!loading && <EmailOverlayComponent form={form} />}
{!loading && (
<EmailOverlayComponent
form={form}
selectedMediaState={[selectedMedia, setSelectedMedia]}
/>
)}
</Form>
</Modal>
);