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 saleText  = props.productData?.sale_text;
    
    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>
                            <div className="card-text" dangerouslySetInnerHTML={{__html: productDescription}}/>
                            {/* <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">
                            <div className="" dangerouslySetInnerHTML={{__html: saleText}}/>
                            {/* {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 */}
        </>
    )
}