Untitled

export const CampaignModal = (props) => {
    const { isOpen, onOpen, onClose } = useDisclosure();
    const { isEditing, closeModal, currentCampaignData } = props;
    console.log({ currentCampaignData })
    const campaign = useSelector((state) => state.campaign);
    const { currentAddCampaign, addCampaignStatus, patchCampaignStatus, addCampaignStoryStatus, editCampaignStatus, editPatchCampaignStatus, getSingleStoryStatus, editCampaignStoryStatus } = campaign;

    const [imageConfig, setImageConfig] = useState([
        { order: 1, title: 'Featured Image', url: currentCampaignData?.featured_image ?? '', keyType: 'featured_image' },
        { order: 2, title: 'Campaign Images', url: '', type: 'multiple', keyType: 'campaign_images', files: map((currentCampaignData?.campaign_images ?? []), url => ({ url })) },
        { order: 3, title: 'Transparency  Image 1', url: currentCampaignData?.transparency?.transparency_1?.src ?? '', keyType: 'transparency_1', text: '', textType: true },
        { order: 4, title: 'Transparency Image 2', url: currentCampaignData?.transparency?.transparency_2?.src ?? '', keyType: 'transparency_2', text: '', textType: true },
    ]);

    const [campaignData, setCampaignData] = useState({
        short_description: '',
        order: null,
        target_type: 'LIFETIME',
        is_featured: false,
        paused: true,
        subscription_type: 'BOTH',
        is_amount_based: false,
    });
    const [campaignStory, setCampaignStory] = useState((currentAddCampaign && currentAddCampaign.story && currentAddCampaign.story.data) || '');

    useEffect(() => {
        onOpen();
        if (currentCampaignData && isEditing) {
            const updatedCampaign = { ...currentCampaignData };
            const categories = currentCampaignData.categories && currentCampaignData.categories.map((cat) => cat._id);
            setCampaignData({ ...updatedCampaign, categories });
        }
    }, []);

    const [stage, setStage] = useState(1);

    const dispatch = useDispatch();

    const handleCloseModal = () => {
        closeModal({ add: false, edit: false });
        onClose();
        dispatch(setCurrentAddCampaign({}));
    };

    useEffect(() => {
        if (addCampaignStoryStatus === STATUS.SUCCESS) {
            handleCloseModal();
        }
        return () => {
            dispatch(resetCampaignData());
            dispatch(resetData());
        };
    }, [addCampaignStoryStatus]);

    useEffect(() => {
        if (currentAddCampaign) {
            setCampaignData(currentAddCampaign);
        }
    }, [currentAddCampaign]);
    const [imageFormData, setImageFormData] = useState({});

    const handleSubmit = (e) => {
        if (e === 1) {
            if (!campaignData || !campaignData.products.length || !campaignData.code || !campaignData.code.length || !campaignData.start_date) {
                alert('Please fill all required fields');
            } else {
                if ((isEditing || addCampaignStatus == STATUS.SUCCESS) && currentAddCampaign) {
                    let updatedData = { id: currentAddCampaign._id, ...campaignData };
                    delete updatedData['amount_raised'];
                    delete updatedData['total_donated_amount'];
                    delete updatedData['donors_count'];
                    delete updatedData['distributed_count'];
                    delete updatedData['campaign_images'];
                    updatedData['start_date'] = campaignData.start_date.split('T')[0];

                    // if (currentCampaignData.start_date == campaignData.start_date) {
                    // delete updatedData["start_date"];
                    // }
                    dispatch(
                        editCampaign({
                            data: updatedData,
                            successFunc: () => setStage(stage !== 3 ? stage + 1 : stage),
                        }),
                    );
                    dispatch(resetData());
                } else {
                    dispatch(
                        addCampaign({
                            data: campaignData,
                            successFunc: () => setStage(stage !== 3 ? stage + 1 : stage),
                        }),
                    );
                    dispatch(resetData());
                }
            }
        } else if (stage === 2 && currentAddCampaign) {
            let responseData = {};
            const campaignImages = imageConfig.find((imgItem) => imgItem.keyType === 'campaign_images');
            const campaignImageURL = campaignImages && campaignImages.files ? campaignImages.files.map((item) => item.url) : [];
            const featured_image = imageConfig.find((imgItem) => imgItem.keyType === 'featured_image');
            const transparencyImages = imageConfig.filter((imgItem) => imgItem.keyType !== 'featured_image' && imgItem.keyType !== 'campaign_images');

            responseData['id'] = currentAddCampaign._id;

            if (featured_image.url) {
                responseData['featured_image'] = featured_image.url;
            }

            if (campaignImageURL && campaignImageURL.length) {
                responseData['campaign_images'] = JSON.stringify(campaignImageURL);
            }

            for (let image of transparencyImages) {
                let data = { ...(image.url && image.url.length ? { src: image.url } : ''), ...(image.text && image.text.length ? { text: image.text } : '') };
                if (Object.keys(data).length) responseData[image.keyType] = JSON.stringify(data);
            }

            if (isEditing || patchCampaignStatus === STATUS.SUCCESS) {
                dispatch(
                    editPatchCampaign({
                        data: responseData,
                        successFunc: () => setStage(stage !== 3 ? stage + 1 : stage),
                    }),
                );
            } else {
                dispatch(
                    patchCampaign({
                        data: responseData,
                        successFunc: () => setStage(stage !== 3 ? stage + 1 : stage),
                    }),
                );
            }
            setImageConfig([
                { order: 1, title: 'Featured Image', url: '', keyType: 'featured_image' },
                { order: 2, title: 'Campaign Images', url: '', type: 'multiple', keyType: 'campaign_images' },
                { order: 3, title: 'Transparency  Image 1', url: '', keyType: 'transparency_1', text: '', textType: true },
                { order: 4, title: 'Transparency Image 2', url: '', keyType: 'transparency_2', text: '', textType: true },
            ]);
        } else {
            if (currentAddCampaign && stage !== 2 && stage !== 1) {
                if (isEditing) {
                    dispatch(
                        editCampaignDetailsApi({
                            data: {
                                campaign_id: currentAddCampaign._id,
                                data: campaignStory,
                            },
                            successFunc: () => handleCloseModal(),
                        }),
                    );
                } else {
                    if (campaignStory.length) {
                        dispatch(
                            addCampaignDetails({
                                data: {
                                    campaign_id: currentAddCampaign._id,
                                    data: campaignStory,
                                },
                                successFunc: () => handleCloseModal(),
                            }),
                        );
                    }
                }
            } else {
                alert("Story can't be empty");
            }
        }
    };

    const increaseStageCount = () => {
        handleSubmit(stage);
    };
    const decreaseStageCount = () => setStage(stage !== 1 ? stage - 1 : 1);

    const handleImageUpload = (title, value) => {
        setImageFormData({ ...imageFormData, [title]: value });
    };

    const handleStoryChange = (e) => {
        setCampaignStory(e);
    };
    const isScreenLoading = addCampaignStatus === STATUS.FETCHING || editCampaignStatus === STATUS.FETCHING || patchCampaignStatus === STATUS.FETCHING || editPatchCampaignStatus === STATUS.FETCHING || addCampaignStoryStatus === STATUS.FETCHING || getSingleStoryStatus === STATUS.FETCHING || editCampaignStoryStatus === STATUS.FETCHING;
    return (
        <Modal closeOnOverlayClick={false} size="8xl" isOpen={isOpen} onClose={handleCloseModal}>
            <ModalOverlay />
            <ModalContent overflowY={'auto'} my="1em !important" sx={{ height: '95%' }}>
                <ModalHeader>{isEditing ? 'Edit Campaign' : 'Add Campaign'} </ModalHeader>
                <ModalCloseButton onClick={handleCloseModal} />
                <ModalBody>
                    <Box>
                        {isScreenLoading ? (
                            <Box mx="auto" textAlign={'center'}>
                                <Spinner size={'xl'} />
                                <Text> Loading.....</Text>
                            </Box>
                        ) : stage === 1 ? (
                            <>
                                <CampaignTextStage isEditing={isEditing} campaignData={campaignData} setCampaignData={setCampaignData} />
                            </>
                        ) : stage === 2 ? (
                            <>
                                <CampaignImagesUpload {...{ imageConfig, setImageConfig }} />
                                {/* <HStack my="2em" justifyContent={'space-between'} flexWrap="wrap">
                                    <CustomImageStack imgValue={currentAddCampaign && currentAddCampaign['featured_image']} keyData={'featured_image'} handleImageUpload={handleImageUpload} title="Featured Image" />
                                    <CustomImageStack imgValue={currentAddCampaign && currentAddCampaign['campaign_images']} keyData={'campaign_images'} handleImageUpload={handleImageUpload} title="Campaign Image" multiple="multiple" />
                                </HStack>
                                <HStack my="2em" justifyContent={'space-between'} flexWrap="">
                                    <Text fontSize={'sm'} width="10%">
                                        Transparency
                                    </Text>
                                    <CustomImageStack imgValue={currentAddCampaign && currentAddCampaign['transperancy'] && currentAddCampaign['transperancy'][0] && currentAddCampaign['transperancy'][0]['src']} textValue={currentAddCampaign && currentAddCampaign['transperancy'] && currentAddCampaign['transperancy'][0] && currentAddCampaign['transperancy'][0]['text']} textKey={'transparency_text_1'} keyData={'transparency_image_1'} handleImageUpload={handleImageUpload} title=" Image 1" placeholder="Transparency Image 1" />
                                    <CustomImageStack imgValue={currentAddCampaign && currentAddCampaign['transperancy'] && currentAddCampaign['transperancy'][1] && currentAddCampaign['transperancy'][1]['src']} textValue={currentAddCampaign && currentAddCampaign['transperancy'] && currentAddCampaign['transperancy'][1] && currentAddCampaign['transperancy'][1]['text']} textKey={'transparency_text_2'} keyData={'transparency_image_2'} handleImageUpload={handleImageUpload} title=" Image 2" placeholder="Transparency Image 2" />
                                </HStack> */}
                            </>
                        ) : (
                            <CampaignStoryStage isEditing={isEditing} campaignID={currentCampaignData && currentCampaignData._id} campaignStory={campaignStory} setCampaignStory={setCampaignStory} handleStoryChange={handleStoryChange} />
                        )}
                    </Box>
                </ModalBody>

                <FormControl p="1em">
                    <ModalFooter>
                        <Button colorScheme="blue" size="sm" mr={3} onClick={handleCloseModal}>
                            Close
                        </Button>
                        {/* <Button isLoading={isEditing ? editProductStatus == STATUS.FETCHING : addProductStatus == STATUS.FETCHING} type="submit" variant="ghost">
							{isEditing ? "Update" : "Add"}
						</Button> */}
                        {stage !== 1 ? (
                            <Button leftIcon={<ChevronLeftIcon />} onClick={decreaseStageCount} size="sm" mx={3}>
                                Previous
                            </Button>
                        ) : null}
                        <Button isLoading={isScreenLoading} isDisabled={stage === 3 && !campaignStory && campaignStory.length === 0 && !isEditing} colorScheme={'green'} rightIcon={stage !== 3 ? <ChevronRightIcon /> : ''} size="sm" onClick={increaseStageCount}>
                            {stage !== 3 ? 'Next' : 'Submit'}
                        </Button>
                    </ModalFooter>
                </FormControl>
            </ModalContent>
        </Modal>
    );
};