PK!A7��nimport React, { useEffect, useState } from "react"; import { Link, useNavigate, useParams } from "react-router-dom"; import tw from "tailwind-styled-components"; import Images from "../Images"; import { Field, Formik, Form } from "formik"; import { useMutation, useQuery } from "react-query"; import axios from "axios"; import Config from "../Config"; import { Page, BoxContainer, BoxTitle, Underline, } from "../Components/Styles/PageStyles"; import { SubmitBtn, PreviewBtn, OtherBtn, InputGroup, FieldWrapper, Label, FormContainer, CombineInputGroup, } from "../Components/Styles/InputStyles"; import { useDispatch, useSelector } from "react-redux"; import Loading from "../Components/Loading"; import moment from "moment"; import Select from "react-select"; import { HiUpload } from "react-icons/hi"; import { MdAdd, MdKeyboardArrowLeft } from "react-icons/md"; import SingleEntry from "../Components/Contacts/SingleEntry"; import { toast } from "react-toastify"; import Checkbox from "react-custom-checkbox"; import { BsCheckLg } from "react-icons/bs"; import { Update_User } from "../Redux/actions"; import AddCreditsModal from "../Components/AddSms/AddCreditsModal"; import { Editor } from "react-draft-wysiwyg"; import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"; import { convertToHTML } from "draft-convert"; import { EditorState, convertToRaw } from "draft-js"; import { Tooltip } from "react-tooltip"; import { AiOutlineInfoCircle } from "react-icons/ai"; // import htmlToDraft from "html-to-draftjs"; import draftToHtml from "draftjs-to-html"; import DropZone from "../Components/AddEmail/Dropzone"; const AddEmail = () => { const navigate = useNavigate(); const dispatch = useDispatch(); const [editorState, setEditorState] = useState(() => EditorState.createEmpty() ); const [convertedContent, setConvertedContent] = useState(null); const { type } = useParams(); const [activeTab, setActiveTab] = useState(type == "bulk" ? 2 : 1); const [isSendLater, setIsSendLater] = useState(false); const [showCreditModal, setShowCreditModal] = useState(false); const [uploadFile, setUploadFile] = useState([]); useEffect(() => { const rawContentState = convertToRaw(editorState.getCurrentContent()); let html = draftToHtml(rawContentState); setConvertedContent(html); }, [editorState]); // ------------- Initial Data ------------- const fetchFunction = async () => await axios.get( `${Config.nodeApiUrl}/getEmailIdContactGroups/email`, Config.AxiosConfig ); const { data, error, isLoading: InitialLoading, } = useQuery(`getSenderIdContactGroups`, fetchFunction); // ------------- Run Bulk Campaign ------------- const runCampaignFunction = async (values) => await axios.post( `${Config.nodeApiUrl}/runcampaign/email`, values, Config.AxiosConfig ); const onRunCampaignSuccess = (res) => { toast.success(res?.data?.msg || "Success"); dispatch(Update_User(res?.data)); if (res?.data?.isScheduled) navigate("/cms/campaigns/scheduled/email"); else navigate("/cms/campaigns/email"); }; const onRunCampaignError = (err) => { if (err?.response?.data?.msg?.includes("Insufficient")) { return toast( Insufficient Balance.
Click to top up , { type: toast.TYPE.ERROR, } ); } toast.error(err?.response?.data?.msg || "An Error Occured"); }; const { isLoading: runCampaignLoading, mutate: runCampaignMutate } = useMutation(runCampaignFunction, { onSuccess: onRunCampaignSuccess, onError: onRunCampaignError, }); // ------------- Run Quick Message ------------- const runQuickCampaignFunction = async (values) => await axios.post( `${Config.nodeApiUrl}/runQuickEmail`, values, Config.AxiosConfig ); const onRunQuickCampaignSuccess = (res) => { toast.success(res?.data?.msg || "Success"); dispatch(Update_User(res?.data)); navigate("/cms/quick-messages/email"); }; const onRunQuickCampaignError = (err) => { if (err?.response?.data?.msg?.includes("Insufficient")) { return toast( Insufficient Balance.
Click to top up , { type: toast.TYPE.ERROR, } ); } toast.error(err?.response?.data?.msg || "An Error Occured"); }; const { isLoading: runQuickCampaignLoading, mutate: runQuickCampaignMutate } = useMutation(runQuickCampaignFunction, { onSuccess: onRunQuickCampaignSuccess, onError: onRunQuickCampaignError, }); const InitialValue = { name: "", groupId: "", emailSenderId: "", message: "", subject: "", isScheduled: false, scheduledAt: "", type: 3, recipients: "", }; const SubmitHandler = (values) => { const validRecipients = new RegExp( /^([a-z][a-z0-9_.]+@([a-z0-9-]+\.)+[a-z]{2,6}(,)*)+$/ ); let newRecipients = values?.recipients; if (activeTab == 1 && values.recipients) { newRecipients = values?.recipients .split(",") .map((email) => email.trim()) .join(",") .toLowerCase(); } if (!values.emailSenderId) { return toast.error("Please select Email Id"); } else if (activeTab == 2 && !values.groupId) { return toast.error("Please select Contact Group"); } else if (activeTab == 1 && !newRecipients) { return toast.error("Please enter an email"); } else if (activeTab == 1 && !validRecipients.test(newRecipients)) { return toast.error("Please enter valid comma separated emails"); } else if (activeTab == 2 && !values.name) { return toast.error("Please enter a campaign name"); } else if (!values.subject) { return toast.error("Please enter a subject"); } else if (!convertedContent) { return toast.error("Please enter a message"); } else if (isSendLater && !values.scheduledAt) { return toast.error("Please select a scheduled date"); } if (activeTab == 1) { // runQuickCampaignMutate({ // ...values, // recipients: newRecipients, // message: convertedContent, // }); const body = new FormData(); body.append("name", values?.name); body.append("groupId", values?.groupId); body.append("emailSenderId", values?.emailSenderId); body.append("message", convertedContent); body.append("subject", values?.subject); body.append("isScheduled", values?.isScheduled); body.append("scheduledAt", values?.scheduledAt); body.append("type", values?.type); body.append("recipients", newRecipients); body.append("attachment", uploadFile); runQuickCampaignMutate(body); } else { // runCampaignMutate({ // ...values, // isScheduled: isSendLater, // message: convertedContent, // }); const body = new FormData(); body.append("name", values?.name); body.append("groupId", values?.groupId); body.append("emailSenderId", values?.emailSenderId); body.append("message", convertedContent); body.append("subject", values?.subject); body.append("isScheduled", isSendLater); body.append("scheduledAt", values?.scheduledAt); body.append("type", values?.type); body.append("recipients", values?.recipients); body.append("attachment", uploadFile); runCampaignMutate(body); } }; const ContactList = data?.data?.contactGroups?.map((item) => ({ value: item.id, label: item.name, })); const EmailIdList = data?.data?.emailSenderIds?.map((item) => ({ value: item.id, label: item.emailid, })); const getCredits = () => { const user = JSON.parse(localStorage.getItem("user")); return ( {user?.userCredit?.email} units ); }; return (
navigate(-1)}>

Send Email

 {/* setShowCreditModal(true)}> Available Credit: {getCredits()} */} {/*
Available Credit: {getCredits()}

Click above to top up

*/}
{showCreditModal && ( )} setActiveTab(1)}> Quick Email setActiveTab(2)}> Bulk Email {(formikProps) => ( <>
{(props) => ( props.form.setFieldValue("groupId", val.value) } /> )} )} {activeTab == 1 && ( )} {activeTab == 2 && ( )} {activeTab == 2 && ( )} {/* */} {(props) => ( )}
{activeTab == 2 && ( } name="my-input" checked={isSendLater} onChange={(value) => { setIsSendLater(value); }} borderColor="#808080" style={{ cursor: "pointer" }} labelStyle={{ marginLeft: 5, userSelect: "none", color: "#808080", }} label="Schedule Email" /> )} {isSendLater && ( )}
{(runCampaignLoading || runQuickCampaignLoading) && ( )} {!runCampaignLoading && !runQuickCampaignLoading && "Send"}
)} ); }; const Button = tw.button`text-white bg-teal-500 hover:bg-teal-600 w-52 flex items-center space-x-1 justify-center h-10 text-xs whitespace-nowrap rounded`; const TabWrapper = tw.div`flex items-center space-x-4 my-5 pb-4`; const Tab = tw.button` ${(p) => (p.$active ? "bg-red-500 text-white" : "bg-gray-100 text-gray-600")} px-6 py-2 text-md rounded-full`; const BalanceBox = tw.div`bg-gray-100 hover:bg-gray-200 cursor-pointer rounded-full px-5 py-3 text-sm border border-gray-200 text-gray-600 inline-block`; export default AddEmail;