149 lines
4.0 KiB
JavaScript
149 lines
4.0 KiB
JavaScript
import { UploadOutlined, UserAddOutlined } from "@ant-design/icons";
|
|
import {
|
|
Divider,
|
|
Form,
|
|
Input,
|
|
Select,
|
|
Tabs,
|
|
Upload,
|
|
Space,
|
|
Menu,
|
|
Dropdown,
|
|
} 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 } from "../../redux/user/user.selectors";
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
|
});
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(EmailOverlayComponent);
|
|
|
|
export function EmailOverlayComponent({ form, selectedMediaState, bodyshop }) {
|
|
const { t } = useTranslation();
|
|
const handleClick = ({ item, key, keyPath }) => {
|
|
const email = item.props.value;
|
|
form.setFieldsValue({ to: _.uniq([...form.getFieldValue("to"), 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>
|
|
))}
|
|
</Menu>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<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>
|
|
<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} />
|
|
</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;
|
|
}}
|
|
>
|
|
<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>
|
|
);
|
|
}
|