Siddhesh.More/tanami-admin-panel
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 2 Wiki Activity

Email custom notification update ✉️

Browse Source
This commit is contained in:
Siddhesh More
2024-10-18 16:29:26 +05:30
parent 6216367d21
commit 5fd9fda73b
4 changed files with 209 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

259
src/Pages/EmailNotification/EmailNotification.jsx
View File

@@ -1,28 +1,37 @@
import { Badge, Box, Button, FormControl, FormHelperText, FormLabel, HStack, Text } 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 {
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 [value, setValue] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [selectedRadio, setSelectedRadio] = useState([]);
const [subject, setSubject] = useState("");
const [value, setValue] = useState(""); // Quill content (body)
const toast = useToast();
const {
data : investorDetails,
isLoading: investorDetailsLoading,
refetch,
} = useGetUnbanInvestorQuery();
const [sendCustomNotification] = useSendCustomEmailMutation();
// ====================================================[Table Setup]================================================================
// ===========================[Table Setup]==============================
const tableHeadRow = [
"Sr N/O",
"Date",
@@ -35,11 +44,17 @@ const EmailNotification = () => {
"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,
@@ -50,7 +65,7 @@ const EmailNotification = () => {
color={"gray.600"}
className="d-flex align-items-center fw-bold web-text-small"
>
{generateSerialNumber(idx,currentPage, pageSize )}
{generateSerialNumber(idx, currentPage, pageSize)}
</Text>
),
Date: (
@@ -110,7 +125,7 @@ const EmailNotification = () => {
color={item?.KYCStatus === false ? "red" : "blue"}
px={2}
py={0.5}
variant={'ghost'}
variant={"ghost"}
>
{item?.KYCStatus === true ? "Completed" : "Incompleted"}
</Badge>
@@ -118,71 +133,167 @@ const EmailNotification = () => {
),
}));
console.log(value);
const modules = {
toolbar: [
[{ 'header': '1'}, { 'header': '2'}, { 'font': [] }],
[{size: []}],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[{'list': 'ordered'}, {'list': 'bullet'}],
// ['link', 'image', 'video'],
['clean']
[{ header: "1" }, { header: "2" }, { font: [] }],
[{ size: [] }],
["bold", "italic", "underline", "strike", "blockquote"],
[{ list: "ordered" }, { list: "bullet" }],
["clean"],
],
};
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14} >
// 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,
};
{/* <Box py={4}> */}
<FormControl mb={6}>
<HStack py={4} pb={3} w={'100%'} justifyContent={'space-between'} alignItems={'center'}>
<Text as={'span'} fontSize={'sm'}>Customize your email</Text>
<Button rounded={'xs'} size={'sm'}>Preview</Button>
</HStack>
<ReactQuill
theme="snow"
value={value}
onChange={setValue}
modules={modules}
placeholder="Start typing here..."
style={{
// height: '400px',
// borderRadius: '8px',
// border: '1px solid #ddd',
// padding: '10px',
// backgroundColor: '#f9f9f9' ,
}}
/>
<FormHelperText fontSize={'xs'}>We'll never share your email.</FormHelperText>
</FormControl>
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)
}
{/* <Box mt={4}>
<strong>Output:</strong>
<Box border="1px solid #ddd" p={2} mt={2} dangerouslySetInnerHTML={{ __html: value }} />
</Box> */}
{/* </Box> */}
} catch (error) {
}
};
return (
<Box
as={"form"}
{...OPACITY_ON_LOAD}
overflowY={"scroll"}
height={"100vh"}
pb={14}
pt={4}
>
<FormControl mb={6}>
{/* <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>
<NormalTable
centered={true}
emptyMessage={`We don't have any Sponers `}
emptyMessage={`We don't have any Sponsors`}
tableHeadRow={tableHeadRow}
data={extractedArray}
// isLoading={isLoading}
setSelectedRadio={setSelectedRadio}
selectedRadio={selectedRadio}
showRadioButton={true}
/>
</Box>
)
}
export default EmailNotification
<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;

10
src/Routes/Nav.js
View File

@@ -213,11 +213,11 @@ export const nav = [
path: "/notification",
icon: MdNotificationsNone,
},
// {
// title: "Email Notification",
// path: "/email",
// icon: AtSignIcon,
// },
{
title: "Email Notification",
path: "/email",
icon: AtSignIcon,
},
{
title: "Contact Details",
path: "/contact",

2
src/Services/ban.investor.service.js
View File

@@ -22,7 +22,7 @@ export const banInvestorDetails = createApi({
getUnbanInvestor: builder.query({
query: ({ page, size, search, kycStatus, country }) => {
// Start with the base URL, including searchTerm
let baseURL = `/investorDetails/admin/getAllUnbanned/?search=${search || ""}`;
let baseURL = `/investorDetails/admin/getAllUnbanned?search=${search || ""}`;
// Conditionally append kycStatus if it's defined
if (kycStatus) {

19
src/Services/contact.service.js
View File

@@ -51,9 +51,26 @@ export const contact = createApi({
body: data,
}),
}),
sendCustomEmail : builder.mutation({
query: (data) => ({
url: `/notification/admin/send-custom-email`,
method: "POST",
body: data,
}),
}),
}),
});
// Export hooks for usage in functional components
export const { useGetContactQuery, useUpdateContactMutation, useSendNotificationMutation } = contact;
export const { useGetContactQuery, useUpdateContactMutation, useSendNotificationMutation, useSendCustomEmailMutation } = contact;