tanami-admin-panel/src/Pages/EmailNotification/EmailNotification.jsx

import {
  Badge,
  Box,
  Button,
  FormControl,
  FormHelperText,
  FormLabel,
  HStack,
  Input,
  Text,
  useToast,
} from "@chakra-ui/react";
import React, { useState } from "react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import NormalTable from "../../Components/DataTable/NormalTable";
import { useGetUnbanInvestorQuery } from "../../Services/ban.investor.service";
import { formatDate, generateSerialNumber } from "../../Constants/Constants";
import { TABLE_PAGINATION } from "../../Constants/Paginations";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css"; // Importing the Quill snow theme
import { useSendCustomEmailMutation } from "../../Services/contact.service";
import { EmailIcon } from "@chakra-ui/icons";
import ToastBox from "../../Components/ToastBox";

const EmailNotification = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [selectedRadio, setSelectedRadio] = useState([]);
  const [subject, setSubject] = useState("");
  const [value, setValue] = useState(""); // Quill content (body)
  const toast = useToast();

  const [sendCustomNotification] = useSendCustomEmailMutation();

  // ===========================[Table Setup]==============================
  const tableHeadRow = [
    "Sr N/O",
    "Date",
    "Client ID",
    "First Name",
    "Last Name",
    "Country",
    "Phone Number",
    "E-mail ID",
    "KYC Status",
  ];

  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);

  const {
    data: investorDetails,
    isLoading: investorDetailsLoading,
    refetch,
  } = useGetUnbanInvestorQuery({
    page: currentPage, // Omit pagination for search
    size: 10000, // Omit pagination for search
  });

  const extractedArray = investorDetails?.data?.rows?.map((item, idx) => ({
    id: item?.principal_xid,
    "Sr N/O": (
      <Text
        justifyContent={"left"}
        as={"span"}
        color={"gray.600"}
        className="d-flex align-items-center fw-bold web-text-small"
      >
        {generateSerialNumber(idx, currentPage, pageSize)}
      </Text>
    ),
    Date: (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {formatDate(item?.date)}
        </Text>
      </Box>
    ),
    "Client ID": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.clientReference_id}
        </Text>
      </Box>
    ),
    "First Name": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.firstName}
        </Text>
      </Box>
    ),
    "Last Name": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.lastName}
        </Text>
      </Box>
    ),
    Country: (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.country}
        </Text>
      </Box>
    ),
    "Phone Number": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.phoneNumber}
        </Text>
      </Box>
    ),
    "E-mail ID": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.emailAddress}
        </Text>
      </Box>
    ),
    "KYC Status": (
      <Box w={"auto"} isTruncated={true}>
        <Badge
          fontWeight={"500"}
          textTransform={"none"}
          color={item?.KYCStatus === false ? "red" : "blue"}
          px={2}
          py={0.5}
          variant={"ghost"}
        >
          {item?.KYCStatus === true ? "Completed" : "Incompleted"}
        </Badge>
      </Box>
    ),
  }));

  const modules = {
    toolbar: [
    //   [{ header: "1" }, { header: "2" }, 
    //   // { font: [] }
    // ],
      // [{ size: [] }],
      ["bold", "italic", "underline", "strike", "blockquote"],
      [{ list: "ordered" }, { list: "bullet" }],
      ["clean"],
    ],
  };

  // Main submission logic
  const handleSend = async (e) => {
    e.preventDefault();  // Prevent default form submission

    if (!subject || !value) {
      toast({
        render: () => (
          <ToastBox status={"error"} message={"Subject or email body cannot be empty"} />
        ),
      });
      return;
    }

    if (selectedRadio.length === 0) {
      toast({
        render: () => (
          <ToastBox status={"error"} message={"Please select at least one recipient"} />
        ),
      });
      return;
    }

    setIsLoading(true);

    const emailPayload = {
      subject,
      body: value,
      principal_xid:  selectedRadio,
    };


    try {
      const res = await sendCustomNotification(emailPayload)
      console.log(res); 
      if (res?.error) {
        toast({
          render: () => (
            <ToastBox status={"error"} message={res?.error?.data?.message} />
          ),
        });
        setIsLoading(false)
      }else if(res?.data){
        toast({
          render: () => (
            <ToastBox message={res?.data?.message} />
          ),
        });
        setIsLoading(false)
        setSubject("")
        setValue("")
        setSelectedRadio([])

      }else{
        toast({
          render: () => (
            <ToastBox status={'error'} message={"Something went wrong"} />
          ),
        });
        setIsLoading(false)
      }
      
    } catch (error) {
      
    }

  };

  return (
    <Box
      as={"form"}
      {...OPACITY_ON_LOAD}
      overflowY={"scroll"}
      height={"100vh"}
      pb={14}
      pt={4}
    >
      <FormControl mb={0}>
        {/* <HStack
          py={4}
          pb={3}
          w={"100%"}
          justifyContent={"space-between"}
          alignItems={"center"}
        >
          <Text as={"span"} fontSize={"sm"}>
            Customize your email
          </Text>
        </HStack> */}

        <FormControl isRequired mb={3} p={1}>
          <FormLabel fontSize={"sm"}>Subject</FormLabel>
          <Input
            size={"md"}
            value={subject}
            onChange={(e) => setSubject(e.target.value)}
            focusBorderColor="forestGreen.300"
            rounded={0.5}
            type="text"
          />
          {/* <FormHelperText>Entered subject will be reflected on emails subject body.</FormHelperText> */}
        </FormControl>


        <FormControl minH={400} isRequired mb={3} p={1}>
          <FormLabel fontSize={"sm"}>Create Custom body</FormLabel>
        <ReactQuill
          theme="snow"
          style={{
            height:300
          }}
          value={value}
          onChange={setValue}
          modules={modules}
          placeholder="Start typing here..."

        />
        </FormControl>
        {/* <FormHelperText fontSize={"xs"}>
          We'll never share your email.
        </FormHelperText> */}




      </FormControl>

      <Box overflow={'scroll'} h={'58vh'}>
      <NormalTable
        centered={true}
        emptyMessage={`We don't have any Sponsors`}
        tableHeadRow={tableHeadRow}
        data={extractedArray}
        setSelectedRadio={setSelectedRadio}
        selectedRadio={selectedRadio}
        showRadioButton={true}
      />
      </Box>

      <HStack justifyContent={"flex-end"} px={2}>
        <Button
          rightIcon={<EmailIcon />}
          rounded={"sm"}
          size={"sm"}
          colorScheme="forestGreen"
          type="submit"
          isLoading={isLoading}
          onClick={handleSend}
        >
          Send Email
        </Button>
      </HStack>
    </Box>
  );
};

export default EmailNotification;