PK!A7��nimport React, { useState, useEffect } from "react"; import tw from "tailwind-styled-components"; import { Link, useParams, useNavigate } from "react-router-dom"; import Images from "../Images"; import { useMutation, useQuery } from "react-query"; import axios from "axios"; import Config from "../Config"; import Loading from "../Components/Loading"; import Table from "../Components/Campaigns/Table"; import { Page, BoxContainer, BoxTitle, Underline, ErrorText, } from "../Components/Styles/PageStyles"; import NotFoundModel from "../Components/NotFoundModel"; import { SmallBtn, Label, FieldWrapper, InputGroup, } from "../Components/Styles/InputStyles"; // import DeleteModel from "../Components/Campaigns/DeleteModel"; import { useSelector } from "react-redux"; import { ForUs } from "../Config"; import EditDeviceModel from "../Components/Campaigns/EditDeviceModel"; import SingleEntry from "../Components/Campaigns/SingleEntry"; import { MdAdd } from "react-icons/md"; import { HiUpload } from "react-icons/hi"; import { toast } from "react-toastify"; import ViewModel from "../Components/Campaigns/ViewModel"; import MenuItem from "@mui/material/MenuItem"; import Select from "@mui/material/Select"; import moment from "moment"; import { Field, Form, Formik } from "formik"; import { BsSearch } from "react-icons/bs"; import { BiPaperPlane } from "react-icons/bi"; import { FaPaperPlane } from "react-icons/fa"; import DeleteModel from "../Components/CampaignsScheduled/DeleteModel"; const Campaigns = () => { const user = useSelector((state) => state.UserReducer.user); const { type } = useParams(); const [activeTab, setActiveTab] = useState(1); const [filteredData, setFilteredData] = useState([]); const [data, setData] = useState([]); const [searchType, setSearchType] = useState("SENDER_ID"); const [searchValue, setSearchValue] = useState(""); const [openUploadModel, setOpenUploadModel] = useState(false); const [openViewModel, setOpenViewModel] = useState(false); const [openDeleteModel, setOpenDeleteModel] = useState(false); const [openEditModel, setOpenEditModel] = useState(false); const [deviceId, setDeviceId] = useState(""); const [selectedItem, setSelectedItem] = useState(null); const [gotInitialResp, setGotInitialResp] = useState(false); const [editDevice, setEditDevice] = useState(false); const [deleteModel, setDeleteModel] = useState(false); const navigate = useNavigate(); const { id } = useParams(); const [startDate, setStartDate] = useState( moment(new Date()).subtract(300, "days").format("YYYY-MM-DD") ); const [endDate, setEndDate] = useState( moment(new Date()).format("YYYY-MM-DD") ); // ----- Getting Initial Data ------ const getCampaignsFunction = async (values) => await axios.post( `${Config.nodeApiUrl}/customer/getCampaigns/normal`, values, Config.AxiosConfig ); const getCampaignsSuccess = (data) => { setData(data?.data || []); setGotInitialResp(true); }; const getCampaignsError = (error) => { setGotInitialResp(true); }; const { isLoading, isError, mutate: getCampaignsMutate, } = useMutation(getCampaignsFunction, { onSuccess: getCampaignsSuccess, onError: getCampaignsError, }); useEffect(() => { const handler = setTimeout(() => { getCampaignsMutate({ searchValue: searchValue, searchType: searchType, type: activeTab, startDate, endDate, }); }, 500); return () => { clearTimeout(handler); }; }, [searchValue, startDate, endDate]); const ChangeHandler = (e) => { setSearchValue(e.target.value); }; useEffect(() => { if (type == "sms") setActiveTab(1); // else if (type == "voice") setActiveTab(2); // else setActiveTab(3); }, [type]); useEffect(() => { const tempData = data; if (activeTab == 1) setFilteredData(tempData?.sms); // else if (activeTab == 2) setFilteredData(tempData?.voice); // else setFilteredData(tempData?.email); }, [activeTab, data]); //------- Add Single Entry ------- const SingleEntryPostFunction = async (values) => await axios.post( `${Config.nodeApiUrl}/customer/addSingleContact`, values, Config.AxiosConfig ); const onSingleEntrySuccess = (res) => { getCampaignsMutate({ searchValue: searchValue, searchType: searchType, type: activeTab, }); setOpenUploadModel(false); toast.success(res?.data?.msg || "Success"); }; const initialValues = { startDate: moment(new Date()).subtract(300, "days").format("YYYY-MM-DD"), endDate: moment(new Date()).format("YYYY-MM-DD"), }; const onSingleEntryError = (res) => { setOpenUploadModel(false); toast.error(res?.response?.data?.msg || "An Error Occured"); }; const { isLoading: SingleEntryLoading, mutate: postSingleEntry } = useMutation(SingleEntryPostFunction, { onSuccess: onSingleEntrySuccess, onError: onSingleEntryError, }); const changeActiveTab = (type) => { setActiveTab(type); setSearchValue(""); }; const submitHandler = (values) => { setStartDate(moment(values.startDate).format("YYYY-MM-DD")); setEndDate(moment(values.endDate).format("YYYY-MM-DD")); }; //------- Delete API ------- const deleteFunction = async (values) => await axios.post( `${Config.nodeApiUrl}/customer/deleteScheduledCampaign`, values, Config.AxiosConfig ); const deleteSuccess = (res) => { getCampaignsMutate({ searchValue: searchValue, searchType: searchType, type: activeTab, startDate, endDate, }); setDeleteModel(false); toast.success(res?.data?.msg || "Success"); }; const deleteError = (res) => { setDeleteModel(false); toast.error(res?.response?.data?.msg || "An Error Occured"); }; const { isLoading: deleteLoading, mutate: deleteMutate } = useMutation( deleteFunction, { onSuccess: deleteSuccess, onError: deleteError, } ); const downloadFile = async (downloadUrl, fileName, id) => { try { const response = await axios.get( `${downloadUrl}/customer/generateCampaignReport/${id}`, Config.AxiosConfig, { responseType: "blob", } ); // console.log("Response Data:", response?.data?.url); const Url = response?.data?.url; const url = window.URL.createObjectURL(new Blob([response?.data?.url])); const link = document.createElement("a"); link.href = ("download", Url); // link.setAttribute; document.body.appendChild(link); link.click(); toast.success(response?.data?.msg || "File downloaded successfully"); } catch (error) { // console.error("Error downloading file:", error); toast.error( error?.response?.data?.msg || "No Data found for this date range" ); } }; // const downloadFile = async ( // downloadUrl, // fileName, // id, // startDate, // endDate // ) => { // try { // const response = await axios.post( // `${downloadUrl}/customer/generateCampaignReport`, // { // startDate, // endDate, // id, // }, // { // responseType: "blob", // } // ); // const url = window.URL.createObjectURL(new Blob([response.data])); // const link = document.createElement("a"); // link.href = url; // link.setAttribute("download", fileName); // document.body.appendChild(link); // link.click(); // } catch (error) { // console.error("Error downloading file:", error); // } // }; return ( {/*
*/}
{/*
*/}
{/* Campaigns */} Campaigns Report
{/* )} */}
{/*
*/} {/* */}
{openViewModel && ( )} {deleteModel && ( )} {!isLoading && gotInitialResp && ( )} {(isLoading || !gotInitialResp) && } {/* {isError && filteredData?.length == 0 && !isLoading && ( )} */} {(isError || filteredData?.length == 0) && !isLoading && gotInitialResp && } ); }; const Uploader = ({ setOpenUploadModel, setSearchValue, searchValue, searchType, setSearchType, ChangeHandler, activeTab, }) => { return ( // // ); }; const Filters = ({ initialValues, submitHandler, InitialLoading, user }) => { return (
Calender icon Calender icon Apply Filter {/*
*/}
); }; const TableWrapper = tw.h1`my-10 border rounded-md overflow-auto`; const Title = tw.h1`text-xl text-gray-800 whitespace-nowrap font-medium`; const UploadWrapper = tw.div` w-full flex justify-end space-x-4 items-center `; // const Button = tw.button`text-white bg-custom-zambia w-40 flex items-center space-x-1 justify-center h-10 text-xs whitespace-nowrap rounded`; const Button = tw.button` text-white bg-custom-zambia w-40 flex items-center !ml-auto space-x-1 justify-center h-10 text-xs whitespace-nowrap rounded px-6 `; const TabWrapper = tw.div`flex items-center space-x-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 SearchWrapper = tw.div`flex items-center space-x-2 w-full max-w-sm `; const SearchInput = tw.div` field-wrapper relative pl-6 rounded-md bg-white w-full border border-gray-400 flex items-center overflow-hidden`; const SearchIcon = tw.button`absolute -top-1 left-2 -bottom-1 grid place-items-center `; const FilterContainer = tw.div` grid grid-cols-2 w-full gap-4 md:flex md:space-x-4 items-end mt-4 md:mt-8 `; const ApplyBtn = tw.button`${(p) => p.$active ? "bg-gray-100" : ""} border whitespace-nowrap w-40 !mr-auto border-gray-200 flex space-x-1.5 justify-center items-center text-gray-500 rounded-md px-6 cursor-pointer hover:bg-gray-100 h-10 text-sm `; export default Campaigns;