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 DropZone from "../Components/AddVoice/Dropzone"; import AddCreditsModal from "../Components/AddSms/AddCreditsModal"; import { AiOutlineInfoCircle } from "react-icons/ai"; import { Tooltip } from "react-tooltip"; const AddVoice = () => { const navigate = useNavigate(); const dispatch = useDispatch(); const { type } = useParams(); const [activeTab, setActiveTab] = useState(type == "bulk" ? 2 : 1); const [uploadFile, setUploadFile] = useState(null); const [isSendLater, setIsSendLater] = useState(false); const [showCreditModal, setShowCreditModal] = useState(false); // ------------- Initial Data ------------- const fetchFunction = async () => await axios.get( `${Config.nodeApiUrl}/getCallerIdContactGroups`, Config.AxiosConfig ); const { data, error, isLoading: InitialLoading, } = useQuery(`getSenderIdContactGroups`, fetchFunction); // ------------- Run Bulk Campaign ------------- const runCampaignFunction = async (values) => await axios.post(`${Config.nodeApiUrl}/runcampaign/voice`, values, { headers: { ...Config.AxiosConfig.headers, "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8", }, }); const onRunCampaignSuccess = (res) => { toast.success(res?.data?.msg || "Success"); dispatch(Update_User(res?.data)); if (res?.data?.isScheduled) navigate("/cms/campaigns/scheduled/voice"); else navigate("/cms/campaigns/voice"); }; 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 Campaign ------------- const runQuickCampaignFunction = async (values) => await axios.post(`${Config.nodeApiUrl}/runQuickVoice`, values, { headers: { ...Config.AxiosConfig.headers, "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8", }, }); const onRunQuickCampaignSuccess = (res) => { toast.success(res?.data?.msg || "Success"); dispatch(Update_User(res?.data)); navigate("/cms/quick-messages/voice"); }; 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 CallerList = data?.data?.callerIds?.map((item) => ({ value: item.id, label: item.callerid, })); const InitialValue = { name: "", groupId: "", callerId: CallerList?.[0]?.label, isScheduled: false, scheduledAt: "", type: 2, file: "", }; const SubmitHandler = (values) => { const validRecipients = new RegExp("^[0-9]+(,[0-9]+)*$"); let newRecipients = values?.recipients; if (activeTab == 1 && values.recipients) { newRecipients = values?.recipients .split(",") .map((msisdn) => msisdn.trim()) .join(","); if (newRecipients.charAt(newRecipients.length - 1) == ",") { newRecipients = newRecipients.slice(0, newRecipients.length - 1); } } if (!values.callerId) { return toast.error("Please select Caller Id"); } else if (activeTab == 2 && !values.groupId) { return toast.error("Please select Contact Group"); } else if (activeTab == 1 && !newRecipients) { return toast.error("Please enter a phone number"); } else if (activeTab == 1 && !validRecipients.test(newRecipients)) { return toast.error("Please enter valid comma separated phone numbers"); } else if (activeTab == 2 && !values.name) { return toast.error("Please enter a campaign name"); } else if (!uploadFile) { return toast.error("Please upload a audio file"); } else if (isSendLater && !values.scheduledAt) { return toast.error("Please select a scheduled date"); } const body = new FormData(); body.append("name", values?.name); body.append("groupId", values?.groupId); body.append("callerId", CallerList?.[0]?.value); // body.append("callerId", values?.callerId); body.append("isScheduled", isSendLater); body.append("scheduledAt", values?.scheduledAt); body.append("type", values?.type); body.append("file", uploadFile); if (activeTab == 1) { body.append("recipients", newRecipients); runQuickCampaignMutate(body); } else runCampaignMutate(body); }; const ContactList = data?.data?.contactGroups?.map((item) => ({ value: item.id, label: item.name, })); const getCredits = () => { const user = JSON.parse(localStorage.getItem("user")); return ( {user?.userCredit?.voice} units ); }; return (
navigate(-1)}>

Send Voice

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

Click above to top up

*/}
{showCreditModal && ( )} setActiveTab(1)}> Quick Voice setActiveTab(2)}> Bulk Voice {(formikProps) => ( <>
{activeTab == 2 && ( {(props) => (