PK ! A7��n import 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 RequestSenderIdModal from "../Components/AddSms/RequestSenderIdModal";
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 { Tooltip } from "react-tooltip";
import { AiOutlineInfoCircle, AiOutlineSend } from "react-icons/ai";
import DropZone from "../Components/AddSms/Dropzone";
import { HiSparkles } from "react-icons/hi";
import Bot from "./Bot";
const AddSms = () => {
const navigate = useNavigate();
const dispatch = useDispatch();
const { type, param } = useParams();
const [activeTab, setActiveTab] = useState(type == "bulk" ? 2 : 1);
const [isSendLater, setIsSendLater] = useState(
param == "schedule" ? true : false
);
const [showCreditModal, setShowCreditModal] = useState(false);
const [uploadFile, setUploadFile] = useState(null);
// ------------- Initial Data -------------
const fetchFunction = async () =>
await axios.get(
`${Config.nodeApiUrl}/customer/getSenderIdContactGroups/sms`,
Config.AxiosConfig
);
const [isModalOpen, setIsModalOpen] = useState(false);
const handleOpenModal = () => {
setIsModalOpen(true);
};
const handleCloseModal = () => {
setIsModalOpen(false);
};
const {
data,
error,
isLoading: InitialLoading,
} = useQuery(`getSenderIdContactGroups`, fetchFunction);
// ------------- Run Bulk Campaign -------------
const runCampaignFunction = async (values) =>
await axios.post(
`${Config.nodeApiUrl}/customer/runcampaign`,
values,
Config.AxiosConfig
);
const onRunCampaignSuccess = (res) => {
toast.success(res?.data?.msg || "Success");
dispatch(Update_User(res?.data));
navigate("/cms/campaigns/sms");
};
const onRunCampaignError = (err) => {
if (err?.response?.data?.msg?.includes("Insufficient")) {
return toast(
Insufficient Balance.
Click to top up
,
{
type: toast.TYPE.ERROR,
}
);
}
return 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}/customer/runQuickMessage`,
values,
Config.AxiosConfig
);
const onRunQuickCampaignSuccess = (res) => {
toast.success(res?.data?.msg || "Success");
dispatch(Update_User(res?.data));
// navigate("/cms/quick-messages/sms");
navigate("/cms/reports/quick");
};
const onRunQuickCampaignError = (err) => {
if (err?.response?.data?.msg?.includes("Insufficient")) {
return toast(
Insufficient Balance.
Click to top up
,
{
type: toast.TYPE.ERROR,
}
);
}
return toast.error(err?.response?.data?.msg || "An Error Occured");
};
const { isLoading: runQuickCampaignLoading, mutate: runQuickCampaignMutate } =
useMutation(runQuickCampaignFunction, {
onSuccess: onRunQuickCampaignSuccess,
onError: onRunQuickCampaignError,
});
// ------------- Run Quick Message with Excel -------------
const runQuickCampaignExcelFunction = async (values) =>
await axios.post(
`${Config.nodeApiUrl}/customer/runQuickMessageForExcel`,
values,
{
headers: {
...Config.AxiosConfig.headers,
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
},
}
);
const onRunQuickCampaignExcelSuccess = (res) => {
toast.success(res?.data?.msg || "Success");
dispatch(Update_User(res?.data));
navigate("/cms/reports/quick");
};
const onRunQuickCampaignExcelError = (err) => {
if (err?.response?.data?.msg?.includes("Insufficient")) {
return toast(
Insufficient Balance.
Click to top up
,
{
type: toast.TYPE.ERROR,
}
);
}
return toast.error(err?.response?.data?.msg || "An Error Occured");
};
const {
isLoading: runQuickCampaignExcelLoading,
mutate: runQuickCampaignExcelMutate,
} = useMutation(runQuickCampaignExcelFunction, {
onSuccess: onRunQuickCampaignExcelSuccess,
onError: onRunQuickCampaignExcelError,
});
const InitialValue = {
name: "",
groupId: "",
sender_Id: "",
message: "",
isScheduled: false,
scheduledAt: "",
type: 1,
recipients: "",
operator: "1",
url: "",
};
const SubmitHandler = (values) => {
const validRecipients = new RegExp("^[0-9]+(,[0-9]+)*$");
let newRecipients = values?.recipients;
const updatedValues = {
...values,
url:
data?.data?.connection?.find((item) => item.id === values.operator)
?.url || "",
};
if (values.name && values.name.length > 15) {
return toast.error("Campaign name must be 15 characters or less");
}
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.sender_Id) {
return toast.error("Please select Sender Id");
} else if (activeTab == 2 && !values.groupId) {
return toast.error("Please select Contact Group");
} else if (!values.operator) {
return toast.error("Please select Operator");
} else if (activeTab == 1 && !newRecipients && !uploadFile) {
return toast.error("Please enter a phone number");
} else if (
activeTab == 1 &&
!uploadFile &&
!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 (!values.message) {
return toast.error("Please enter a message");
} else if (isSendLater && !values.scheduledAt) {
return toast.error("Please select a scheduled date");
}
if (activeTab == 1) {
if (uploadFile) {
const body = new FormData();
body.append("filename", uploadFile);
body.append("sender_Id", values.sender_Id);
body.append("message", values.message);
body.append("type", 1);
runQuickCampaignExcelMutate(body);
} else
runQuickCampaignMutate({
// ...values,
...updatedValues,
recipients: newRecipients,
url: updatedValues.url,
});
} else
runCampaignMutate({
// ...values, isScheduled: isSendLater
...updatedValues,
isScheduled: isSendLater,
url: updatedValues.url,
});
};
const ContactList = data?.data?.contactGroups?.map((item) => ({
value: item.id,
label: item.name,
}));
const SenderList = data?.data?.senderIds?.map((item) => ({
value: item.id,
label: item.sender_id,
}));
const OperatorList = data?.data?.connection?.map((item) => ({
value: item.id,
label: item.name,
url: item.url,
}));
const getCharLength = (values) => {
const messageLength = values.message.length;
const smsConsumend = messageLength / 160;
return (
Character's Length:
{messageLength}
SMS Unit(s):{" "}
{Math.ceil(smsConsumend)}
);
};
const getCredits = () => {
const user = JSON.parse(localStorage.getItem("user"));
return (
{user?.userCredit?.sms} units
);
};
return (
{showCreditModal && (
)}
setActiveTab(1)}>
Quick SMS
setActiveTab(2)}>
Bulk SMS
{(formikProps) => (
<>
)}
);
};
const Button = tw.button`text-white bg-custom-zambia 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-custom-paygo-bluenew 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`;
const SampleFile = tw.a` w-full text-blue-500 underline text-sm text-right`;
export default AddSms;