Siddhesh.More/rubix-admin-panel
1
0
Fork 0
mirror of https://github.com/WDI-Ideas/rubix-admin-panel.git synced 2026-04-27 19:25:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Integrated privacy policy / Terms and condition

Browse Source
This commit is contained in:
rockyeverlast
2024-05-28 20:30:10 +05:30
parent f7405317a7
commit c6b1c35c00
13 changed files with 1256 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/Components/Banner/AddBanner.jsx
View File

@@ -47,7 +47,7 @@ const AddBanner = ({ createApi, navigateLink, title, center }) => {
} = useForm({
resolver: yupResolver(addCommunityBannerSchema),
});
const formData = watch();
const onSubmit = async (data) => {
@@ -58,7 +58,7 @@ const AddBanner = ({ createApi, navigateLink, title, center }) => {
formData.append("sub_heading", data.sub_heading);
formData.append("CTO_button_link", data.CTO_button_link);
formData.append("CTO_button_title", data.CTO_button_title);
if (data.banner_image[0]) {
if (selectedImage[0]) {
formData.append("banner_image", data.banner_image[0]);
}
// Trigger the mutation
@@ -72,7 +72,10 @@ const AddBanner = ({ createApi, navigateLink, title, center }) => {
setIsLoading(false);
toast({
render: () => (
<ToastBox status={"success"} message={response?.data?.message} />
<ToastBox
status={"success"}
message={response?.data?.message}
/>
),
});
reset();
@@ -81,7 +84,10 @@ const AddBanner = ({ createApi, navigateLink, title, center }) => {
setIsLoading(false);
toast({
render: () => (
<ToastBox status={"success"} message={response?.data?.message} />
<ToastBox
status={"success"}
message={response?.data?.message}
/>
),
});
}
@@ -154,17 +160,13 @@ const AddBanner = ({ createApi, navigateLink, title, center }) => {
alt="Selected Image"
/> */}
<BannerMainCard
imgLink={selectedImage}
heading={formData?.heading}
subHeading={formData?.sub_heading}
buttonTitle={formData?.CTO_button_title}
center={center}
/>
<BannerMainCard
imgLink={selectedImage}
heading={formData?.heading}
subHeading={formData?.sub_heading}
buttonTitle={formData?.CTO_button_title}
center={center}
/>
{selectedImage === fallbackImage || largeImageData === null ? (
""
@@ -210,14 +212,12 @@ const AddBanner = ({ createApi, navigateLink, title, center }) => {
// maxLength={51}
/>
<FormHelperText
color={
formData?.heading?.length > 50
? "red"
: "gray.500"
}
color={formData?.heading?.length > 50 ? "red" : "gray.500"}
className="web-text-small"
>
If heading crosses 50 characters it will cause problem in alignment on website.you have entered {formData?.heading?.length} characters
If heading crosses 50 characters it will cause problem in
alignment on website.you have entered {formData?.heading?.length}{" "}
characters
</FormHelperText>
{errors.name && (
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
@@ -238,16 +238,14 @@ const AddBanner = ({ createApi, navigateLink, title, center }) => {
errorBorderColor="crimson"
isInvalid={formData?.sub_heading?.length > 230}
/>
<FormHelperText
color={
formData?.sub_heading?.length > 230
? "red"
: "gray.500"
}
color={formData?.sub_heading?.length > 230 ? "red" : "gray.500"}
className="web-text-small"
>
If sub heading crosses 50 characters it will cause problem in alignment on website.you have entered {formData?.sub_heading?.length} characters
If sub heading crosses 50 characters it will cause problem in
alignment on website.you have entered{" "}
{formData?.sub_heading?.length} characters
</FormHelperText>
{errors.sub_heading && (
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
@@ -271,13 +269,13 @@ const AddBanner = ({ createApi, navigateLink, title, center }) => {
/>
<FormHelperText
color={
formData?.CTO_button_title?.length > 30
? "red"
: "gray.500"
formData?.CTO_button_title?.length > 30 ? "red" : "gray.500"
}
className="web-text-small"
>
If Button title crosses 50 characters it will cause problem in alignment on website.you have entered {formData?.CTO_button_title?.length} characters
If Button title crosses 50 characters it will cause problem in
alignment on website.you have entered{" "}
{formData?.CTO_button_title?.length} characters
</FormHelperText>
{errors.CTO_button_title && (

340
src/Pages/Policy/AddPolicy.jsx Normal file
View File

@@ -0,0 +1,340 @@
import {
Box,
Button,
Divider,
FormControl,
FormHelperText,
FormLabel,
Heading,
Image,
Input,
Stack,
useToast,
} from "@chakra-ui/react";
import React, { useState } from "react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import Header from "../../Components/Header";
import { useNavigate } from "react-router-dom";
import fallbackImage from "../../assets/ultp-fallback-img.webp";
import {
addPolicy,
addTerms,
addWhitePapers,
} from "../../Validations/Validations";
import { TiWarning } from "react-icons/ti";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import { motion } from "framer-motion";
import Loader01 from "../../Components/Loaders/Loader01";
import { useCreatePolicyMutation } from "../../Services/api.service";
import ToastBox from "../../Components/ToastBox";
import ReactQuill from "react-quill";
const AddPolicy = () => {
const toast = useToast();
const navigate = useNavigate();
const [isLoading, setIsLoading] = useState(false);
const [selectedImage, setSelectedImage] = useState(fallbackImage);
const [imageData, setImageData] = useState(null);
const [value, setValue] = useState("");
const [createPolicy] = useCreatePolicyMutation();
// const termContent = data?.data;
const {
register,
handleSubmit,
reset,
setValue: setYupFormValue,
formState: { errors },
} = useForm({
resolver: yupResolver(addPolicy),
defaultValues: {
title: "",
content: "",
banner_image: "",
},
});
console.log(errors);
const handleImageChange = (e) => {
const file = e.target.files[0];
setImageData(file);
// setYupFormValue("banner_image", file);
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setSelectedImage(reader.result);
};
reader.readAsDataURL(file);
}
};
const onSubmit = async (data) => {
setYupFormValue("content", value);
try {
setIsLoading(true);
const formData = new FormData();
formData.append("title", data?.title);
formData.append("content", data?.content);
if (selectedImage[0]) {
formData.append("banner_image", data?.image[0]);
}
// for (let [key, value] of formData.entries()) {
// console.log(key, value);
// }
// Trigger the mutation
createPolicy(formData)
.then((response) => {
// Handle the response here
if (response?.data?.statusCode === 200) {
setIsLoading(false);
toast({
render: () => (
<ToastBox
status={"success"}
message={response?.data?.message}
/>
),
});
reset();
navigate("/policy");
} else if (response?.data?.statusCode === 500) {
setIsLoading(false);
toast({
render: () => (
<ToastBox
status={"success"}
message={response?.data?.message}
/>
),
});
} else {
setIsLoading(false);
toast({
render: () => (
<ToastBox
status={"Some thing went wrong"}
message={"Some thing went wrong"}
/>
),
});
}
})
.catch((error) => {
// Handle errors
console.error("Error creating community:", error);
setIsLoading(false);
// Handle error notification if needed
});
} catch (error) {
// Handle errors
console.error("Error creating community:", error);
setIsLoading(false);
}
};
return (
<Box
{...OPACITY_ON_LOAD}
w={"100%"}
h={"100vh"}
className="overflow-auto "
display={"flex"}
flexDirection={"column"}
>
<Header title={"Privacy and Policy"} />
<Box className="d-flex">
<Box className="col-5 d-flex flex-column gap-2 pt-4">
<Box
boxSize="sm"
className="d-flex w-100 justify-content-center flex-column align-items-center gap-3"
>
<Image
shadow={"md"}
rounded={8}
w={500}
h={240}
src={selectedImage}
alt="Selected Image"
/>
{selectedImage === fallbackImage || imageData === null ? (
""
) : (
<Box display={"flex"} flexDirection={"column"} w={"100%"}>
<span className="web-text-small">{imageData?.name}</span>
<span className="web-text-small text-secondary fst-italic">
{(imageData?.size / (1024 * 1024)).toFixed(2)} mb
</span>
</Box>
)}
<Button
onClick={() => setSelectedImage(fallbackImage)}
backgroundColor="red.400"
color={"whitesmoke"}
transition={"0.5s"}
_hover={{
backgroundColor: "red.500",
}}
size="xs"
>
Remove
</Button>
</Box>
</Box>
<form
onSubmit={handleSubmit(onSubmit)}
className="col-7 pt-4 mb-3 overflow-auto p-4"
>
<FormControl isRequired className="mb-3">
<FormLabel className="web-text-large fw-bold rubix-text-dark">
Title
</FormLabel>
<Input
{...register("title")}
placeholder="Title"
className="web-text-medium"
size="sm"
/>
{errors.title && (
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
<TiWarning className="fw-bold fs-5 " /> {errors.title.message}
</span>
)}
</FormControl>
<FormControl isRequired className="mb-3">
<FormLabel className="web-text-large fw-bold rubix-text-dark">
Content
</FormLabel>
<ReactQuill
className="rounded-3"
theme="snow"
value={value}
onChange={setValue}
/>
{errors.content && (
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
<TiWarning className="fw-bold fs-5 " /> {errors.content.message}
</span>
)}
</FormControl>
<FormControl isRequired className="mb-3">
<FormLabel className="web-text-large fw-bold rubix-text-dark">
Banner image
</FormLabel>
{/* <ImageDropBox /> */}
<Box
borderColor="gray.300"
borderStyle="dashed"
borderWidth="2px"
rounded="md"
shadow="sm"
role="group"
transition="all 150ms ease-in-out"
_hover={{
shadow: "md",
}}
as={motion.div}
initial="rest"
animate="rest"
whileHover="hover"
height={"105px"}
className="pointer"
>
<Box position="relative" height="100%" width="100%">
<Box
position="absolute"
top="0"
left="0"
height="100%"
width="100%"
display="flex"
flexDirection="column"
>
<Stack
height="100%"
width="100%"
display="flex"
alignItems="center"
justify="center"
>
<span
className="d-flex flex-column align-items-center pointer"
spacing="1"
>
<Heading
fontSize="lg"
color="gray.700"
fontWeight="bold"
cursor={"pointer"}
>
Drop images here
</Heading>
<span
fontWeight="light"
className="web-text-large text-secondary text-center pointer"
>
or click to upload
</span>
</span>
</Stack>
</Box>
<Input
{...register("image")}
type="file"
height="100%"
width="100%"
position="absolute"
top="0"
left="0"
opacity="0"
aria-hidden="true"
accept="image/*"
onChange={handleImageChange}
onDrop={handleImageChange}
// onDragEnter={startAnimation}
// onDragLeave={stopAnimation}
/>
</Box>
</Box>
{errors.image && (
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
<TiWarning className="fw-bold fs-5 " /> {errors.image.message}
</span>
)}
<FormHelperText className="web-text-small">
Maximum limit of image is 5mb.
</FormHelperText>
</FormControl>
<Box className=" d-flex justify-content-end mb-5">
<Button
isLoading={isLoading}
spinner={<Loader01 />}
color={"whitesmoke"}
backgroundColor={"purple.900"}
_hover={{
backgroundColor: "purple.800",
}}
type="submit"
rounded={"sm"}
size="sm"
>
Create
</Button>
</Box>
</form>
</Box>
</Box>
);
};
export default AddPolicy;

341
src/Pages/Policy/EditPolicy.jsx Normal file
View File

@@ -0,0 +1,341 @@
import React, { useEffect, useState } from "react";
import Header from "../../Components/Header";
import {
Box,
Button,
Divider,
FormControl,
FormHelperText,
FormLabel,
Heading,
Image,
Input,
Stack,
Text,
useToast,
} from "@chakra-ui/react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import fallbackImage from "../../assets/ultp-fallback-img.webp";
import { useNavigate, useParams } from "react-router-dom";
import {
useGetPolicyByIdQuery,
useUpdatePolicyMutation,
} from "../../Services/api.service";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { TiWarning } from "react-icons/ti";
import { addPolicy } from "../../Validations/Validations";
import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
import { AttachmentIcon } from "@chakra-ui/icons";
import extractFilename from "../../Components/Functions/FileNameAlter";
import Loader01 from "../../Components/Loaders/Loader01";
import { motion } from "framer-motion";
import ToastBox from "../../Components/ToastBox";
import ReactQuill from "react-quill";
const EditPolicy = () => {
const { id } = useParams();
const toast = useToast();
const navigate = useNavigate();
const { data, error, isLoading } = useGetPolicyByIdQuery(id);
const [isLoadingEdit, setIsLoadingEdit] = useState(false);
const [selectedImage, setSelectedImage] = useState(fallbackImage);
const [largeImageData, setLargeImageData] = useState(null);
const [updatePolicy] = useUpdatePolicyMutation();
const [valueQuill, setValueQuill] = useState(data?.data?.content);
console.log(valueQuill);
const {
register,
handleSubmit,
reset,
formState: { errors },
setValue,
} = useForm({
resolver: yupResolver(addPolicy),
defaultValues: {
title: "",
content: "",
banner_image: null,
},
});
const policyContent = data?.data;
// console.log(termContent);
useEffect(() => {
if (data?.data) {
setSelectedImage(
`https://rubix.betadelivery.com/${data?.data?.banner_image}`
);
setValue("title", data?.data?.title);
setValue("content", data?.data?.content);
setValue("banner_image", data?.data?.banner_image);
setValueQuill(data?.data?.content);
}
}, [data, setValue]);
const handleImageChange = (e) => {
const file = e.target.files[0];
setLargeImageData(file);
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setSelectedImage(reader.result);
};
reader.readAsDataURL(file);
}
};
const onSubmit = async (data) => {
console.log(data);
setIsLoadingEdit(true);
const form = new FormData();
form.append("title", data?.title);
form.append("content", valueQuill);
if (data?.banner_image[0]) {
form.append("banner_image", data?.image[0]);
}
// Log formData entries
for (let [key, value] of form.entries()) {
console.log(`${key}: ${value}`);
}
await updatePolicy({ id: id, data: form })
.then((response) => {
// console.log(response?.error?.data?.error?.message);
if (response?.data?.statusCode === 200) {
setIsLoadingEdit(false);
toast({
render: () => (
<ToastBox status={"success"} message={response?.data?.message} />
),
});
reset();
navigate("/policy");
// setDeleteAlert(false);
} else {
setIsLoadingEdit(false);
toast({
render: () => (
<ToastBox status={"error"} message={"Something went wrong"} />
),
});
}
})
.catch((error) => {
console.error("Error creating community:", error);
setIsLoadingEdit(false);
// setDeleteIsLoading(false);
// setDeleteAlert(false);
});
};
console.log(errors);
if (isLoading) {
return <FullscreenLoaders />;
}
return (
<Box
{...OPACITY_ON_LOAD}
overflowY={"scroll"}
paddingBottom={50}
height={"100vh"}
>
<Header title={"Privacy & Policy"} />
<Box display={"flex"}>
<Box className="col-5 d-flex flex-column gap-2 pt-4">
<Box
boxSize="sm"
className="d-flex w-100 justify-content-center flex-column align-items-center gap-3"
>
<Image
shadow={"md"}
rounded={8}
w={"100%"}
h={240}
src={selectedImage}
alt="Selected Image"
/>
{selectedImage === fallbackImage || largeImageData === null ? (
""
) : (
<Box display={"flex"} flexDirection={"column"} w={"100%"}>
<span className="web-text-small">
{largeImageData && largeImageData?.name}
</span>
<span className="web-text-small text-secondary fst-italic">
{largeImageData &&
(largeImageData?.size / (1024 * 1024)).toFixed(2)}{" "}
mb
</span>
</Box>
)}
<Button
onClick={() => setSelectedImage(fallbackImage)}
backgroundColor="red.400"
color={"whitesmoke"}
transition={"0.5s"}
_hover={{
backgroundColor: "red.500",
}}
size="xs"
>
Remove
</Button>
</Box>
<Divider />
</Box>
<form
onSubmit={handleSubmit(onSubmit)}
className="col-7 pt-4 mb-3 overflow-auto p-4"
>
<FormControl isRequired className="mb-3">
<FormLabel className="web-text-large fw-bold rubix-text-dark">
Title
</FormLabel>
<Input
{...register("title")}
placeholder="Title"
className="web-text-medium"
size="sm"
/>
{errors.title && (
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
<TiWarning className="fw-bold fs-5 " /> {errors.title.message}
</span>
)}
</FormControl>
<FormControl isRequired className="mb-3">
<ReactQuill
className="rounded-3"
theme="snow"
value={valueQuill}
onChange={setValueQuill}
/>
</FormControl>
<FormControl className="mb-3">
<FormLabel className="web-text-large fw-bold rubix-text-dark">
Display profile
</FormLabel>
{/* <ImageDropBox /> */}
<Box
borderColor="gray.300"
borderStyle="dashed"
borderWidth="2px"
rounded="md"
shadow="sm"
role="group"
transition="all 150ms ease-in-out"
_hover={{
shadow: "md",
}}
as={motion.div}
initial="rest"
animate="rest"
whileHover="hover"
height={"105px"}
className="pointer"
>
<Box position="relative" height="100%" width="100%">
<Box
position="absolute"
top="0"
left="0"
height="100%"
width="100%"
display="flex"
flexDirection="column"
>
<Stack
height="100%"
width="100%"
display="flex"
alignItems="center"
justify="center"
>
<span
className="d-flex flex-column align-items-center pointer"
spacing="1"
>
<Heading
fontSize="lg"
color="gray.700"
fontWeight="bold"
cursor={"pointer"}
>
Drop images here
</Heading>
<span
fontWeight="light"
className="web-text-large text-secondary text-center pointer"
>
or click to upload
</span>
</span>
</Stack>
</Box>
<Input
{...register("image")}
type="file"
height="100%"
width="100%"
position="absolute"
top="0"
left="0"
opacity="0"
aria-hidden="true"
accept="image/*"
onChange={handleImageChange}
onDrop={handleImageChange}
// onDragEnter={startAnimation}
// onDragLeave={stopAnimation}
/>
</Box>
</Box>
{errors.image && (
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
<TiWarning className="fw-bold fs-5 " /> {errors.image.message}
</span>
)}
<FormHelperText className="web-text-small">
Maximum limit of image should be 1mb to protect website from slow
loading.
</FormHelperText>
</FormControl>
<Box className=" d-flex justify-content-end ">
<Button
isLoading={isLoadingEdit}
spinner={<Loader01 />}
color={"whitesmoke"}
backgroundColor={"purple.900"}
_hover={{
backgroundColor: "purple.800",
}}
type="submit"
size="sm"
rounded={"sm"}
>
Save edit
</Button>
</Box>
<Divider />
</form>
</Box>
</Box>
);
};
export default EditPolicy;

249
src/Pages/Policy/Policy.jsx Normal file
View File

@@ -0,0 +1,249 @@
import {
Box,
Image,
Menu,
MenuButton,
MenuItem,
MenuList,
Portal,
Switch,
Text,
Tooltip,
useToast,
} from "@chakra-ui/react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { TABLE_PAGINATION } from "../../Constants/Paginations";
import {
useCreatePolicyMutation,
useDeletePolicyMutation,
useGetPolicyQuery,
useUpdatePolicyStatusMutation,
} from "../../Services/api.service";
import { useState } from "react";
import TabularView from "../../Components/TabularView/TabularView";
import CustomAlertDialog from "../../Components/CustomAlertDialog";
import { HiDotsVertical } from "react-icons/hi";
import { Link } from "react-router-dom";
import { formatDate } from "../../Components/Functions/UTCConvertor";
import ToastBox from "../../Components/ToastBox";
import extractFilename from "../../Components/Functions/FileNameAlter";
const Policy = () => {
const toast = useToast();
const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
const [currentPage, setCurrentPage] = useState(1);
const [searchTerm, setSearchTerm] = useState("");
const [statusFilter, setStatusFilter] = useState("all");
const [deleteAlert, setDeleteAlert] = useState(false);
const [actionId, setActionId] = useState(null);
const [actionStatus, setActionStatus] = useState(null);
const [deleteIsLoading, setDeleteIsLoading] = useState(false);
const policyPage = useCreatePolicyMutation({
page: currentPage,
size: pageSize,
});
const policy = useGetPolicyQuery({
page: currentPage,
size: pageSize,
});
const [deletePolicy] = useDeletePolicyMutation();
const [updatePolicyStatus] = useUpdatePolicyStatusMutation();
const filteredData = policy?.data?.data?.rows?.filter((item) => {
// Filter by name (case insensitive)
const name = item.title;
const searchLower = searchTerm.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
// Filter by status
const status = item.status;
const statusMatches =
statusFilter === "all" ||
(statusFilter === "active" && status === true) ||
(statusFilter === "inactive" && status === false);
return nameMatches && statusMatches;
});
// ====================================================[Table Setup]================================================================
const tableHeadRow = [
"Title",
// "Content",
"Active",
"Created At",
];
const extractedArray = filteredData?.map((item, index) => {
return {
Title: (
<Link to={`/policy/view/${item.id}`}>
<Tooltip
className="rounded-2 web-text-xsmall"
width={"fit-content"}
placement="top"
hasArrow
label={item?.title}
bg="blue.200"
>
<Box display={"flex"} alignItems={"center"} w={200}>
<Text as={"span"} isTruncated={true}>
{extractFilename(item?.title)}
</Text>
</Box>
</Tooltip>
</Link>
),
Active: (
<Switch
size={"sm"}
colorScheme="teal"
onChange={() => handleUpdateStatus(item.id, item?.status)}
isChecked={item.status}
// disabled={item.status}
/>
),
"Created At": (
<span className="d-flex justify-content-between align-items-center">
<Text as={"span"} color={"gray.600"} className=" fw-bold">
{formatDate(item?.createdAt)}
</Text>
<Menu>
<MenuButton className="link p-1 rounded-1">
<HiDotsVertical className="rubix-text-dark fs-6" />
</MenuButton>
<Portal>
<MenuList minWidth="80px">
<Link to={`/policy/edit/${item.id}`}>
<MenuItem className="web-text-medium">Edit</MenuItem>
</Link>
<Link to={`/policy/view/${item.id}`}>
<MenuItem className="web-text-medium">View</MenuItem>
</Link>
<MenuItem
onClick={() => {
setActionId(item.id);
setDeleteAlert(true);
setActionStatus(item.status);
}}
className="web-text-medium"
>
Delete
</MenuItem>
</MenuList>
</Portal>
</Menu>
</span>
),
};
});
// ====================================================[Functions]===================================================================
const handleDelete = async (communityId, status) => {
if (status) {
return toast({
render: () => (
<ToastBox
status={"warn"}
message={"Can't delete Policy. Status is true."}
/>
),
});
}
try {
// Trigger the mutation
setDeleteIsLoading(true);
await deletePolicy(communityId)
.then((response) => {
// Handle the response here
console.log("Mutation response:", response?.data?.statusCode);
console.log("Mutation response:", response?.data?.message);
if (response?.data?.statusCode === 201) {
setDeleteIsLoading(false);
setDeleteAlert(false);
toast({
render: () => (
<ToastBox
status={"success"}
message={response?.data?.message}
/>
),
});
}
})
.catch((error) => {
console.error("Error creating community:", error);
setDeleteIsLoading(false);
setDeleteAlert(false);
});
} catch (error) {
// Handle errors
console.log("Error deleting community:", error);
}
};
const handleUpdateStatus = async (id) => {
try {
await updatePolicyStatus({ id })
.then((response) => {
console.log(response?.data);
if (response?.data?.statusCode === 201) {
toast({
render: () => (
<ToastBox
status={"success"}
message={"Please toggle another banner."}
/>
),
});
// whitePaper?.refetch()
}
})
.catch((error) => {
console.log(error);
});
} catch (error) {
// Handle errors
console.error("Error updating community status:", error);
}
};
return (
<>
<TabularView
title={"Privacy Policy"}
btnTitle={"Create Policy"}
link={"/policy/add-policy"}
apiData={policy}
tableHeadRow={tableHeadRow}
extractedArray={extractedArray}
searchTerm={searchTerm}
setSearchTerm={setSearchTerm}
statusFilter={statusFilter}
setStatusFilter={setStatusFilter}
pageSize={pageSize}
setPageSize={setPageSize}
currentPage={currentPage}
setCurrentPage={setCurrentPage}
totalPages={policy?.data?.data?.totalPages}
noDataTitle={"policy"}
/>
<CustomAlertDialog
onClose={() => setDeleteAlert(false)}
isOpen={deleteAlert}
alertHandler={() => handleDelete(actionId)}
message={"Are you sure you want to delete Policy?"}
isLoading={deleteIsLoading}
/>
</>
);
};
export default Policy;

64
src/Pages/Terms/ViewWhitePaper.jsx → src/Pages/Policy/ViewPolicy.jsx
View File

@@ -3,18 +3,21 @@ import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { Box, Divider, Image, Tag, Text, useToast } from "@chakra-ui/react";
import { useNavigate, useParams } from "react-router-dom";
import Header from "../../Components/Header";
import { useGetWhitepaperByIdQuery } from "../../Services/api.service";
import { useGetPolicyByIdQuery } from "../../Services/api.service";
import { AttachmentIcon } from "@chakra-ui/icons";
import extractFilename from "../../Components/Functions/FileNameAlter";
import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
import pdf from "../../assets/pdfscreen.png"
import pdf from "../../assets/pdfscreen.png";
const ViewWhitePaper = () => {
const ViewPolicy = () => {
const { id } = useParams();
const toast = useToast();
const navigate = useNavigate();
const { data, error, isLoading } = useGetWhitepaperByIdQuery(id);
const whitepaper = data?.data?.data;
const { data, error, isLoading } = useGetPolicyByIdQuery(id);
const viewPolicy = data?.data;
console.log(viewPolicy?.banner_image);
console.log(`https://rubix.betadelivery.com/${viewPolicy?.banner_image}`);
if (isLoading) {
return <FullscreenLoaders />;
@@ -29,26 +32,14 @@ const ViewWhitePaper = () => {
display={"flex"}
flexDirection={"column"}
>
<Header title={"Whitepaper"} btnTitle={"Edit whitepaper"} link={`/whitepaper/edit/${id}`} />
<Header
title={"Privacy Policy"}
btnTitle={"Edit Privacy Policy"}
link={`/policy/edit/${id}`}
/>
<Box display={"flex"}>
<Box className="col-5 d-flex flex-column gap-2 pt-4">
<span className="web-text-large fw-bold rubix-text-dark">
Whitepaper Info
</span>
<span className="web-text-medium text-secondary">
Select the platform for which you need to create this campaign.
</span>
<Divider />
<span className="web-text-large fw-bold rubix-text-dark">
Whitepaper banner image
</span>
<span className="web-text-medium text-secondary mb-4">
Below is the profile that will be displayed on the community page.
</span>
<Box
boxSize="sm"
className="d-flex h-auto w-100 justify-content-start flex-column align-items-center gap-3"
@@ -59,7 +50,7 @@ const ViewWhitePaper = () => {
objectFit="cover"
w={500}
h={240}
src={`https://rubix.betadelivery.com/${whitepaper?.bannerImage}`}
src={`https://rubix.betadelivery.com/${viewPolicy?.banner_image}`}
alt="Selected Image"
/>
</Box>
@@ -70,7 +61,7 @@ const ViewWhitePaper = () => {
<Box className="web-text-large fw-bold mb-1 rubix-text-dark">
Status
</Box>
{whitepaper?.status ? (
{viewPolicy?.status ? (
<Tag size={"sm"} borderRadius="full" colorScheme="teal">
Active
</Tag>
@@ -83,27 +74,24 @@ const ViewWhitePaper = () => {
<Box className="mb-3">
<Box className="web-text-large fw-bold rubix-text-dark">Title</Box>
<Box className="web-text-medium text-secondary">{whitepaper?.title}</Box>
<Box className="web-text-medium text-secondary">
{viewPolicy?.title}
</Box>
</Box>
<Box className="mb-3">
<Box className="web-text-large fw-bold rubix-text-dark">Document</Box>
<Image mt={2} w={"80px"} src={pdf} />
<Text color="teal" className="web-text-medium d-flex align-items-center mt-2 gap-2">{extractFilename(whitepaper?.document)}
<Box className="link pointer" as="span" rounded={"md"} p={1}><AttachmentIcon/></Box></Text>
<Box className="web-text-large fw-bold rubix-text-dark">
Content
</Box>
<Box className="web-text-medium text-secondary">
{viewPolicy?.content}
</Box>
</Box>
<Divider/>
<Divider />
</Box>
</Box>
</Box>
);
};
export default ViewWhitePaper;
export default ViewPolicy;

88
src/Pages/Terms/AddTerms.jsx
View File

@@ -16,14 +16,19 @@ import { OPACITY_ON_LOAD } from "../../Layout/animations";
import Header from "../../Components/Header";
import { useNavigate } from "react-router-dom";
import fallbackImage from "../../assets/ultp-fallback-img.webp";
import { addWhitePapers } from "../../Validations/Validations";
import { addTerms, addWhitePapers } from "../../Validations/Validations";
import { TiWarning } from "react-icons/ti";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import { motion } from "framer-motion";
import Loader01 from "../../Components/Loaders/Loader01";
import { useCreateWhitepaperMutation } from "../../Services/api.service";
import {
useCreateTermsMutation,
useCreateWhitepaperMutation,
useGetTermsByIdQuery,
} from "../../Services/api.service";
import ToastBox from "../../Components/ToastBox";
import ReactQuill from "react-quill";
const AddTerms = () => {
const toast = useToast();
@@ -31,21 +36,32 @@ const AddTerms = () => {
const [isLoading, setIsLoading] = useState(false);
const [selectedImage, setSelectedImage] = useState(fallbackImage);
const [imageData, setImageData] = useState(null);
const [value, setValue] = useState("");
const [createWhitepaper] = useCreateWhitepaperMutation();
const [createTerms] = useCreateTermsMutation();
// const termContent = data?.data;
const {
register,
handleSubmit,
reset,
setValue: setYupFormValue,
formState: { errors },
} = useForm({
resolver: yupResolver(addWhitePapers),
resolver: yupResolver(addTerms),
defaultValues: {
title: "",
content: "",
banner_image: "",
},
});
console.log(errors);
const handleImageChange = (e) => {
const file = e.target.files[0];
setImageData(file);
// setYupFormValue("banner_image", file);
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
@@ -56,22 +72,24 @@ const AddTerms = () => {
};
const onSubmit = async (data) => {
setYupFormValue("content", value);
try {
setIsLoading(true);
const formData = new FormData();
formData.append("title", data.title);
if (data.image[0]) {
formData.append("image", data.image[0]);
formData.append("title", data?.title);
formData.append("content", data?.content);
if (selectedImage[0]) {
formData.append("banner_image", data?.image[0]);
}
if (data.document[0]) {
formData.append("document", data.document[0]);
for (let [key, value] of formData.entries()) {
console.log(key, value);
}
// Trigger the mutation
createWhitepaper(formData)
createTerms(formData)
.then((response) => {
// Handle the response here
if (response?.data?.statusCode === 201) {
if (response?.data?.statusCode === 200) {
setIsLoading(false);
toast({
render: () => (
@@ -82,7 +100,7 @@ const AddTerms = () => {
),
});
reset();
navigate("/whitepaper");
navigate("/terms");
} else if (response?.data?.statusCode === 500) {
setIsLoading(false);
toast({
@@ -93,6 +111,16 @@ const AddTerms = () => {
/>
),
});
} else {
setIsLoading(false);
toast({
render: () => (
<ToastBox
status={"Some thing went wrong"}
message={"Some thing went wrong"}
/>
),
});
}
})
.catch((error) => {
@@ -117,27 +145,10 @@ const AddTerms = () => {
display={"flex"}
flexDirection={"column"}
>
<Header title={"WhitePaper"} />
<Header title={"Terms and Conditions"} />
<Box className="d-flex">
<Box className="col-5 d-flex flex-column gap-2 pt-4">
<span className="web-text-large fw-bold rubix-text-dark">
Whitepaper Info
</span>
<span className="web-text-medium text-secondary">
Select the platform for which you need to create this campaign.
</span>
<Divider />
<span className="web-text-large fw-bold rubix-text-dark">
Whitepaper banner image
</span>
<span className="web-text-medium text-secondary mb-4">
Below is the whitepaper banner image that will be whitepaper on the
community page.
</span>
<Box
boxSize="sm"
className="d-flex w-100 justify-content-center flex-column align-items-center gap-3"
@@ -198,18 +209,17 @@ const AddTerms = () => {
<FormControl isRequired className="mb-3">
<FormLabel className="web-text-large fw-bold rubix-text-dark">
Document
Content
</FormLabel>
<input
type="file"
{...register("document")}
className="web-text-medium form-control rounded-1"
size="sm"
<ReactQuill
className="rounded-3"
theme="snow"
value={value}
onChange={setValue}
/>
{errors.document && (
{errors.content && (
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
<TiWarning className="fw-bold fs-5 " />{" "}
{errors.document.message}
<TiWarning className="fw-bold fs-5 " /> {errors.content.message}
</span>
)}
</FormControl>

2
src/Pages/Terms/EditTerms.jsx
View File

@@ -96,7 +96,7 @@ const EditTerms = () => {
setIsLoadingEdit(true);
const form = new FormData();
form.append("title", data?.title);
form.append("content", data?.content);
form.append("content", valueQuill);
if (data?.banner_image[0]) {
form.append("banner_image", data?.image[0]);
}

6
src/Pages/Terms/Terms.jsx
View File

@@ -83,7 +83,7 @@ const Terms = () => {
const extractedArray = filteredData?.map((item, index) => {
return {
Title: (
<Link to={`/whitepaper/view/${item.id}`}>
<Link to={`/terms/view/${item.id}`}>
<Tooltip
className="rounded-2 web-text-xsmall"
width={"fit-content"}
@@ -151,7 +151,7 @@ const Terms = () => {
render: () => (
<ToastBox
status={"warn"}
message={"Can't delete whitepaper. Status is true."}
message={"Can't delete Terms. Status is true."}
/>
),
});
@@ -241,7 +241,7 @@ const Terms = () => {
onClose={() => setDeleteAlert(false)}
isOpen={deleteAlert}
alertHandler={() => handleDelete(actionId)}
message={"Are you sure you want to delete video?"}
message={"Are you sure you want to delete Terms?"}
isLoading={deleteIsLoading}
/>
</>

97
src/Pages/Terms/ViewTerms.jsx Normal file
View File

@@ -0,0 +1,97 @@
import React from "react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { Box, Divider, Image, Tag, Text, useToast } from "@chakra-ui/react";
import { useNavigate, useParams } from "react-router-dom";
import Header from "../../Components/Header";
import { useGetTermsByIdQuery } from "../../Services/api.service";
import { AttachmentIcon } from "@chakra-ui/icons";
import extractFilename from "../../Components/Functions/FileNameAlter";
import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
import pdf from "../../assets/pdfscreen.png";
const ViewTerms = () => {
const { id } = useParams();
const toast = useToast();
const navigate = useNavigate();
const { data, error, isLoading } = useGetTermsByIdQuery(id);
const viewTerms = data?.data;
console.log(viewTerms?.banner_image);
console.log(`https://rubix.betadelivery.com/${viewTerms?.banner_image}`);
if (isLoading) {
return <FullscreenLoaders />;
}
return (
<Box
{...OPACITY_ON_LOAD}
w={"100%"}
h={"100vh"}
className="overflow-auto "
display={"flex"}
flexDirection={"column"}
>
<Header
title={"Terms & Condition"}
btnTitle={"Edit Terms & Condition"}
link={`/terms/edit/${id}`}
/>
<Box display={"flex"}>
<Box className="col-5 d-flex flex-column gap-2 pt-4">
<Box
boxSize="sm"
className="d-flex h-auto w-100 justify-content-start flex-column align-items-center gap-3"
>
<Image
shadow={"md"}
rounded={8}
objectFit="cover"
w={500}
h={240}
src={`https://rubix.betadelivery.com/${viewTerms?.banner_image}`}
alt="Selected Image"
/>
</Box>
</Box>
<Box className="col-7 pt-4 p-4">
<Box>
<Box className="web-text-large fw-bold mb-1 rubix-text-dark">
Status
</Box>
{viewTerms?.status ? (
<Tag size={"sm"} borderRadius="full" colorScheme="teal">
Active
</Tag>
) : (
<Tag size={"sm"} borderRadius="full" colorScheme="red">
Inactive
</Tag>
)}
</Box>
<Box className="mb-3">
<Box className="web-text-large fw-bold rubix-text-dark">Title</Box>
<Box className="web-text-medium text-secondary">
{viewTerms?.title}
</Box>
</Box>
<Box className="mb-3">
<Box className="web-text-large fw-bold rubix-text-dark">
Content
</Box>
<Box className="web-text-medium text-secondary">
{viewTerms?.content}
</Box>
</Box>
<Divider />
</Box>
</Box>
</Box>
);
};
export default ViewTerms;

6
src/Routes/Nav.js
View File

@@ -9,6 +9,7 @@ import { CgCommunity } from "react-icons/cg";
import { AiOutlineIdcard } from "react-icons/ai";
import { LuMonitorPause } from "react-icons/lu";
import { MdOutlinePrivacyTip } from "react-icons/md";
import { GrDocumentVerified } from "react-icons/gr";
export const nav = [
{
@@ -63,6 +64,11 @@ export const nav = [
{
title: "Terms & Conditions",
path: "/terms",
Icon: GrDocumentVerified,
},
{
title: "Privacy Policy",
path: "/policy",
Icon: MdOutlinePrivacyTip,
},
];

17
src/Routes/Routes.js
View File

@@ -53,12 +53,17 @@ import Usecase from "../Pages/Usecase/Usecase";
import AddUseCase from "../Pages/Usecase/AddUseCase";
import ViewUseCase from "../Pages/Usecase/ViewUseCase";
import EditUseCase from "../Pages/Usecase/EditUseCase";
import Policy from "../Pages/Terms/Terms";
import Whitepapers from "../Pages/Whitepapers/Whitepapers";
import WelcomePage from "../Pages/WelcomePage";
import AddTerms from "../Pages/Terms/AddTerms";
import Terms from "../Pages/Terms/Terms";
import EditTerms from "../Pages/Terms/EditTerms";
import ViewTerms from "../Pages/Terms/ViewTerms";
import AddPolicy from "../Pages/Policy/AddPolicy";
import ViewPolicy from "../Pages/Policy/ViewPolicy";
import EditPolicy from "../Pages/Policy/EditPolicy";
import Policy from "../Pages/Policy/Policy";
export const RouteLink = [
{ path: "/", Component: WelcomePage },
@@ -157,9 +162,15 @@ export const RouteLink = [
{ path: "/usecase/edit/:id", Component: EditUseCase },
// =============[ policy ]================
// =============[ Terms ]================
{ path: "/terms", Component: Terms },
{ path: "/terms/add-terms", Component: AddTerms },
{ path: "/terms/view/:id", Component: UnderConstruction },
{ path: "/terms/view/:id", Component: ViewTerms },
{ path: "/terms/edit/:id", Component: EditTerms },
// =============[ Policy ]================
{ path: "/policy", Component: Policy },
{ path: "/policy/add-policy", Component: AddPolicy },
{ path: "/policy/view/:id", Component: ViewPolicy },
{ path: "/policy/edit/:id", Component: EditPolicy },
];

55
src/Services/api.service.js
View File

@@ -35,7 +35,9 @@ export const rubixApi = createApi({
"getEcoBanner",
"getUseCaseById",
"getUseCase",
"getTerms"
"getTerms",
"getPolicy",
],
endpoints: (builder) => ({
// ===============[ Community cards endpoints ]=======================
@@ -586,8 +588,8 @@ export const rubixApi = createApi({
invalidatesTags: ["getTerms"],
}),
createTerms: builder.mutation({
query: ({ data }) => ({
url: `/admin/term-condition/${data}`,
query: (data) => ({
url: `/admin/term-condition`,
method: "POST",
body: data,
}),
@@ -612,6 +614,46 @@ export const rubixApi = createApi({
query: (id) => `/admin/term-condition/${id}`,
providesTags: ["getTerms"],
}),
// ===============[ Terms endpoints ]=======================
getPolicy: builder.query({
query: () => "/admin/policy",
providesTags: ["getPolicy"],
}),
deletePolicy: builder.mutation({
query: (id) => ({
url: `/admin/policy/${id}`,
method: "DELETE",
}),
invalidatesTags: ["getPolicy"],
}),
createPolicy: builder.mutation({
query: (data) => ({
url: `/admin/policy`,
method: "POST",
body: data,
}),
invalidatesTags: ["getPolicy"],
}),
updatePolicyStatus: builder.mutation({
query: ({ id }) => ({
url: `/admin/policy/change-visibility/${id}`,
method: "POST",
}),
invalidatesTags: ["getPolicy"],
}),
updatePolicy: builder.mutation({
query: ({ id, data }) => ({
url: `/admin/policy/${id}`,
method: "PUT",
body: data, // Include the data you want to send in the request body
}),
invalidatesTags: ["getPolicy"],
}),
getPolicyById: builder.query({
query: (id) => `/admin/policy/${id}`,
providesTags: ["getPolicy"],
}),
}),
});
@@ -716,6 +758,13 @@ export const {
useUpdateTermsMutation,
useGetTermsByIdQuery,
useGetPolicyQuery,
useDeletePolicyMutation,
useCreatePolicyMutation,
useUpdatePolicyStatusMutation,
useUpdatePolicyMutation,
useGetPolicyByIdQuery,

48
src/Validations/Validations.js
View File

@@ -527,4 +527,52 @@ export const addTerms = Yup.object().shape({
// })
});
export const addPolicy = Yup.object().shape({
title: Yup.string().required("title is required"),
content: Yup.string(),
banner_image: Yup.mixed()
// .test("required", "You need to provide a file", (files) => {
// // return file && file.size <-- u can use this if you don't want to allow empty files to be uploaded;
// if (files) return true;
// return false;
// })
// .test(
// "fileSize",
// " The maximum size of profile picture is 15MB.",
// (files) => {
// //if u want to allow only certain file sizes
// try {
// if (files.length !== 0) {
// return files[0].size <= 15000000;
// }
// return true;
// } catch (error) {
// return false;
// }
// }
// )
.optional(),
// .test("file_formate", "Image file has unsupported format.", (files) => {
// // // console.log(files[0].type)
// const SUPPORTED_FORMATS = [
// "image/jpeg",
// "image/png",
// "image/jpg",
// "image/gif",
// "image/tiff",
// "image/svg+xml",
// ];
// try {
// if (files.length !== 0) {
// setPreviewImage(URL.createObjectURL(files[0]));
// return files && SUPPORTED_FORMATS.includes(files[0].type);
// }
// return true;
// } catch (error) {
// return false;
// }
// })
});