MermsPanelReactJS/src/component/product/ProductStart.jsx

import React, { useRef, useState } from "react";
import getImage from "../../utils/getImage";
// import { Modal } from "bootstrap";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { subscribe } from '../../services/services'
import queryKeys from "../../services/queryKeys";

export default function ProductStart(props){

    const queryClient = useQueryClient()

    const [requestStatus, setRequestStatus] = useState({status:false, message: ''})

    const product_uid = props?.productData?.product_uid;
    const product_id = props?.productData?.product_id;
    const productBanner = "product/"+props.productData?.banner;
    const productTitle  = props.productData?.title;
    const productDescription  = props.productData?.description;
    const promotion_text  = props.productData?.promotion_text;
    const product_status  = props.productData?.status;
    const modalRef = useRef()

    const refetch = () => {
        queryClient.refetchQueries({
            queryKey: [...queryKeys.product],
            // type: 'active',
            // exact: true,
        })
    }

    const mutation = useMutation({
        mutationFn: (fields) => {
            return subscribe(fields)
        },
        onError: (error) => {
            setRequestStatus({status:false, message:'failed, try again'})
            console.log('ERROR IS', error)
        },
          onSuccess: (res) => {
            setRequestStatus({status:true, message:'successful'})
            console.log(res)
        },
        onSettled: () => {
            setTimeout(()=>{
                setRequestStatus({status:false, message:''})
            },4000)
        }
    })

    const handleSubscribe = () => {
        mutation.mutate({product_id: product_id})
    }

    return (
        <>
            <div className="row">
                <div className="col-md-9">
                    <div className="card card-statistics ">
                        <img className="card-img-top" src={getImage(productBanner)}  alt="Card image cap" />
                        <div className="card-body">
                            <h4 className="card-title">{productTitle}</h4>
                            <p className="card-text">{productDescription}</p>
                        </div>
                    </div>
                </div>
                <div className="col-md-3">
                    {
                        (product_status===1) ? <>
                            <div className="card card-statistics mb-30 panel_coming_soon_c3">
                                <>
                                    <img className="card-img-top" src={getImage('widget/coming-soon.jpg')} alt="Card image cap" />
                                </>

                                <div className="card-body">
                                    <p className="card-text">Start with your goals in mind and then work possible. </p>
                                </div>
                                <ul className="list-group list-group-flush">
                                    <li className="list-group-item"><h4>Coming soon!!!</h4></li>
                                    <li className="list-group-item"></li>
                                </ul>
                            </div>
                        </> : <>
                            <div className="card card-statistics mb-30 panel_round_c3">
                                {/*<img className="card-img-top" src={getImage('widget/01.jpg')} alt="Card image cap" />*/}
                                <div className="card-body">
                                    <h4 className="card-title">Subscription</h4>
                                    <p className="card-text">Start with your goals in mind and then work possible.ith yand Goals. If the plan doesn’t support the vision then change it! </p>
                                </div>
                                <ul className="list-group list-group-flush">
                                    <li className="list-group-item"><h4>{promotion_text}</h4></li>
                                    <li className="list-group-item">90 days free and 3.95/Month</li>
                                    <li className="list-group-item"></li>
                                </ul>
                                {/*<div className="card-body">*/}
                                {/*    <a href="javascript:void(0)" className="card-link">Card link</a>*/}
                                {/*    <a href="javascript:void(0)" className="card-link">Another link</a>*/}
                                {/*</div>*/}
                                <div  className="subscribe-box">
                                    <button className="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#verticalCenter">Start Subscription</button>
                                </div>
                            </div>
                        </>
                    }
                </div>
            </div>

            {/* Vertical Center Modal */}
            <div ref={modalRef} className="modal fade" id="verticalCenter" tabIndex="-1" role="dialog" aria-hidden="true">
                <div className="modal-dialog modal-dialog-centered" role="document">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h5 className="modal-title" id="verticalCenterTitle">{productTitle}</h5>
                            <button onClick={refetch} type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div className="modal-body">
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
                                in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at
                                eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
                            </p>
                            <p>
                                sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia
                                bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque
                                nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor
                                fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
                            </p>
                            {/* {mutation.error &&
                            <>
                                <div className="col-12">
                                <p className='text-danger'>{mutation.error.message}</p>
                            </div>
                            </>
                            }
                             {mutation.isSuccess &&
                            <>
                                <div className="col-12">
                                    <p className='text-success'>{'subscription is successful'}</p>
                                </div>
                            </>
                            } */}
                            {requestStatus.message && (
                            <div className="col-12">
                                <p className={`p-2 text-center ${requestStatus.status ? 'text-success' : 'text-danger'}`}>{requestStatus.message}</p>
                            </div>
                            )}
                        </div>
                        <div className="modal-footer">
                            <button onClick={refetch} type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
                            <button type="button" className="btn btn-success" disabled={mutation.isSuccess} onClick={handleSubscribe}>{mutation.isPending ? 'loading...' : 'Start'}</button>
                        </div>
                    </div>
                </div>
            </div>
            {/* END of Vertical Center Modal */}
        </>
    )
}