490 lines
15 KiB
React
490 lines
15 KiB
React
|
import React, { useEffect, useState } from "react";
|
||
|
|
import { useNavigate, useParams } from "react-router-dom";
|
||
|
|
import {
|
||
|
|
useGetCommunityBannerByIdQuery,
|
||
|
|
useGetCommunityByIdQuery,
|
||
|
|
useUpdateCommunityBannerMutation,
|
||
|
|
useUpdateCommunityMutation,
|
||
|
|
} from "../../Services/api.service";
|
||
|
|
import { editCommunityBannerSchema, schemaEdit } from "../../Validations/Validations";
|
||
|
|
import { useForm } from "react-hook-form";
|
||
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
||
|
|
import {
|
||
|
|
Box,
|
||
|
|
Divider,
|
||
|
|
FormControl,
|
||
|
|
FormHelperText,
|
||
|
|
FormLabel,
|
||
|
|
Heading,
|
||
|
|
Image,
|
||
|
|
Input,
|
||
|
|
Stack,
|
||
|
|
Textarea,
|
||
|
|
Button,
|
||
|
|
Skeleton,
|
||
|
|
useToast,
|
||
|
|
Switch,
|
||
|
|
Tag,
|
||
|
|
Text,
|
||
|
|
} from "@chakra-ui/react";
|
||
|
|
import { TiWarning } from "react-icons/ti";
|
||
|
|
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||
|
|
import { motion } from "framer-motion";
|
||
|
|
import Loader01 from "../../Components/Loaders/Loader01";
|
||
|
|
import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
|
||
|
|
import fallbackImage from "../../assets/ultp-fallback-img.webp";
|
||
|
|
import Header from "../../Components/Header";
|
||
|
|
import CommunityBannerCard from "../../Pages/Community/CommunityBannerCard";
|
||
|
|
import BannerMainCard from "./BannerMainCard";
|
||
|
|
import ToastBox from "../ToastBox";
|
||
|
|
import { IMAGE_URI } from "../../Constants/Paginations";
|
||
|
|
|
||
|
|
const BannerEdit = ({isLoading, data, updateBanner, navigateTo, refetch, center}) => {
|
||
|
|
const { id } = useParams();
|
||
|
|
const toast = useToast();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const [isLoadingEdit, setIsLoadingEdit] = useState(false);
|
||
|
|
const [selectedImage, setSelectedImage] = useState();
|
||
|
|
const [largeImageData, setLargeImageData] = useState(null);
|
||
|
|
const [title, setTitle] = useState("");
|
||
|
|
|
||
|
|
const handleTitleChange = (e) => {
|
||
|
|
setTitle(e.target.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
const {
|
||
|
|
register,
|
||
|
|
handleSubmit,
|
||
|
|
reset,
|
||
|
|
formState: { errors },
|
||
|
|
setValue,
|
||
|
|
watch
|
||
|
|
} = useForm({
|
||
|
|
resolver: yupResolver(editCommunityBannerSchema),
|
||
|
|
defaultValues: {
|
||
|
|
heading: data?.data?.Heading,
|
||
|
|
sub_heading: data?.data?.sub_heading,
|
||
|
|
CTO_button_title: data?.data?.CTO_button_title,
|
||
|
|
CTO_button_link: data?.data?.CTO_button_link,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// Watch form values to update preview
|
||
|
|
const formData = watch();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (data?.data) {
|
||
|
|
setSelectedImage(
|
||
|
|
`${IMAGE_URI}/${data?.data?.banner_image}`
|
||
|
|
);
|
||
|
|
setValue("heading", data?.data?.Heading);
|
||
|
|
setValue("sub_heading", data?.data?.sub_heading);
|
||
|
|
setValue("CTO_button_title", data?.data?.CTO_button_title);
|
||
|
|
setValue("CTO_button_link", data?.data?.CTO_button_link);
|
||
|
|
setValue("banner_image", data?.data?.banner_image);
|
||
|
|
watch()
|
||
|
|
}
|
||
|
|
}, [data, setValue]);
|
||
|
|
|
||
|
|
|
||
|
|
// useEffect(() => {
|
||
|
|
// const subscription = watch((value) => {setFormData(value)});
|
||
|
|
// return () => subscription.unsubscribe();
|
||
|
|
// }, [watch]);
|
||
|
|
|
||
|
|
const onSubmit = async (formData) => {
|
||
|
|
setIsLoadingEdit(true);
|
||
|
|
const form = new FormData();
|
||
|
|
form.append("heading", formData.heading);
|
||
|
|
form.append("sub_heading", formData.sub_heading);
|
||
|
|
form.append("CTO_button_title", formData.CTO_button_title);
|
||
|
|
form.append("CTO_button_link", formData.CTO_button_link);
|
||
|
|
if (formData.banner_image[0]) {
|
||
|
|
form.append("banner_image", formData.banner_image[0]);
|
||
|
|
}
|
||
|
|
if (formData?.banner_image === data?.data?.banner_image) {
|
||
|
|
form.delete("banner_image");
|
||
|
|
}
|
||
|
|
const mutationResult = await updateBanner({ id: id, data: form })
|
||
|
|
.then((response) => {
|
||
|
|
|
||
|
|
if (response?.data?.statusCode === 200) {
|
||
|
|
setIsLoadingEdit(false);
|
||
|
|
toast({
|
||
|
|
render: () => (
|
||
|
|
<ToastBox status={"success"} message={response?.data?.message} />
|
||
|
|
),
|
||
|
|
});
|
||
|
|
refetch()
|
||
|
|
navigate(navigateTo);
|
||
|
|
// setDeleteAlert(false);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
// // console.error("Error creating community:", error);
|
||
|
|
setIsLoadingEdit(false);
|
||
|
|
// setDeleteIsLoading(false);
|
||
|
|
// setDeleteAlert(false);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
reset();
|
||
|
|
};
|
||
|
|
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return isLoading ? (
|
||
|
|
<FullscreenLoaders />
|
||
|
|
) : (
|
||
|
|
<Box
|
||
|
|
{...OPACITY_ON_LOAD}
|
||
|
|
overflowY={"scroll"}
|
||
|
|
w={"100%"}
|
||
|
|
h={"100vh"}
|
||
|
|
className="overflow-auto "
|
||
|
|
display={"flex"}
|
||
|
|
flexDirection={'column'}
|
||
|
|
>
|
||
|
|
|
||
|
|
<Header
|
||
|
|
title={"Banner's"}
|
||
|
|
/>
|
||
|
|
<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">
|
||
|
|
Display 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">
|
||
|
|
Display banner
|
||
|
|
</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 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"
|
||
|
|
/> */}
|
||
|
|
|
||
|
|
|
||
|
|
<BannerMainCard
|
||
|
|
imgLink={selectedImage}
|
||
|
|
heading={formData?.heading}
|
||
|
|
subHeading={formData?.sub_heading}
|
||
|
|
buttonTitle={formData?.CTO_button_title}
|
||
|
|
center={center}
|
||
|
|
/>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
{selectedImage === fallbackImage || largeImageData === null ? (
|
||
|
|
""
|
||
|
|
) : (
|
||
|
|
<Box display={"flex"} flexDirection={"column"} w={"100%"}>
|
||
|
|
<span className="web-text-small">{largeImageData?.name}</span>
|
||
|
|
<span className="web-text-small text-secondary fst-italic">
|
||
|
|
{(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>
|
||
|
|
</Box>
|
||
|
|
|
||
|
|
<form
|
||
|
|
className="col-7 pt-4 overflow-auto p-4"
|
||
|
|
onSubmit={handleSubmit(onSubmit)}
|
||
|
|
>
|
||
|
|
{/* <Switch
|
||
|
|
size={"sm"}
|
||
|
|
colorScheme="teal"
|
||
|
|
onChange={() => handleUpdateStatus(item.id)}
|
||
|
|
isChecked={data?.data?.status}
|
||
|
|
/> */}
|
||
|
|
<Box className="web-text-large fw-bold mb-2 rubix-text-dark">
|
||
|
|
Status
|
||
|
|
</Box>
|
||
|
|
{data?.data?.status ? <Tag position={'sticky'} right={10} size={"sm"} variant="solid" colorScheme="teal">
|
||
|
|
Active
|
||
|
|
</Tag> : <Tag position={'sticky'} right={10} size={"sm"} variant="solid" colorScheme="red">
|
||
|
|
Inactive
|
||
|
|
</Tag>}
|
||
|
|
|
||
|
|
<FormControl isRequired className="mb-3">
|
||
|
|
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||
|
|
Heading
|
||
|
|
</FormLabel>
|
||
|
|
<Input
|
||
|
|
{...register("heading")}
|
||
|
|
placeholder="Heading"
|
||
|
|
className="web-text-medium"
|
||
|
|
size="sm"
|
||
|
|
name="heading"
|
||
|
|
type="text"
|
||
|
|
id="heading"
|
||
|
|
errorBorderColor="crimson"
|
||
|
|
isInvalid={formData?.heading?.length > 50}
|
||
|
|
// maxLength={51}
|
||
|
|
/>
|
||
|
|
<FormHelperText
|
||
|
|
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
|
||
|
|
</FormHelperText>
|
||
|
|
{errors.name && (
|
||
|
|
<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.heading.message}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</FormControl>
|
||
|
|
|
||
|
|
<FormControl isRequired className="mb-3">
|
||
|
|
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||
|
|
Sub heading
|
||
|
|
</FormLabel>
|
||
|
|
<Textarea
|
||
|
|
{...register("sub_heading")}
|
||
|
|
placeholder="Sub heading"
|
||
|
|
className="web-text-medium"
|
||
|
|
size="sm"
|
||
|
|
id="sub_heading"
|
||
|
|
name="sub_heading"
|
||
|
|
errorBorderColor="crimson"
|
||
|
|
isInvalid={formData?.sub_heading?.length > 230}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<FormHelperText
|
||
|
|
color={
|
||
|
|
formData?.sub_heading?.length > 230
|
||
|
|
? "red"
|
||
|
|
: "gray.500"
|
||
|
|
}
|
||
|
|
className="web-text-small"
|
||
|
|
>
|
||
|
|
If sub heading crosses 230 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">
|
||
|
|
<TiWarning className="fw-bold fs-5 " />{" "}
|
||
|
|
{errors.sub_heading.message}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</FormControl>
|
||
|
|
|
||
|
|
<FormControl isRequired className="mb-3">
|
||
|
|
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||
|
|
CTO Button title
|
||
|
|
</FormLabel>
|
||
|
|
<Input
|
||
|
|
{...register("CTO_button_title")}
|
||
|
|
placeholder="Button title"
|
||
|
|
className="web-text-medium"
|
||
|
|
size="sm"
|
||
|
|
maxLength={90}
|
||
|
|
id="CTO_button_title"
|
||
|
|
name="CTO_button_title"
|
||
|
|
errorBorderColor="crimson"
|
||
|
|
isInvalid={formData?.CTO_button_title?.length > 30}
|
||
|
|
/>
|
||
|
|
<FormHelperText
|
||
|
|
color={
|
||
|
|
formData?.CTO_button_title?.length > 30
|
||
|
|
? "red"
|
||
|
|
: "gray.500"
|
||
|
|
}
|
||
|
|
className="web-text-small"
|
||
|
|
>
|
||
|
|
If sub heading crosses 30 characters it will cause problem in alignment on website.you have entered {formData?.CTO_button_title?.length} characters
|
||
|
|
</FormHelperText>
|
||
|
|
|
||
|
|
{errors.CTO_button_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.CTO_button_title.message}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</FormControl>
|
||
|
|
|
||
|
|
<FormControl isRequired className="mb-3">
|
||
|
|
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||
|
|
CTO Button link
|
||
|
|
</FormLabel>
|
||
|
|
<Input
|
||
|
|
{...register("CTO_button_link")}
|
||
|
|
placeholder="CTO_button_link link"
|
||
|
|
className="web-text-medium"
|
||
|
|
size="sm"
|
||
|
|
id="CTO_button_link"
|
||
|
|
name="CTO_button_link"
|
||
|
|
/>
|
||
|
|
{errors.CTO_button_link && (
|
||
|
|
<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.CTO_button_link.message}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
<FormHelperText className="web-text-small">
|
||
|
|
Please share proper linked in link here.
|
||
|
|
</FormHelperText>
|
||
|
|
</FormControl>
|
||
|
|
|
||
|
|
<FormControl className="mb-3">
|
||
|
|
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||
|
|
Display banner
|
||
|
|
</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("banner_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.banner_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.banner_image.message}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
<FormHelperText className="web-text-small">
|
||
|
|
Maximum limit of image is 10MB.
|
||
|
|
</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'}
|
||
|
|
>
|
||
|
|
Update banner
|
||
|
|
</Button>
|
||
|
|
</Box>
|
||
|
|
</form>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default BannerEdit;
|