subscribe api added

src/component/product/ProductStart.jsx

@@ -1,8 +1,13 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import getImage from "../../utils/getImage";
 import { Modal } from "bootstrap";
+import { useMutation } from "@tanstack/react-query";
+import { subscribe } from '../../services/services'
+
 export default function ProductStart(props){
 
+    const [requestStatus, setRequestStatus] = useState({status:false, message: ''})
+
     console.log(props)
     const productBanner = "product/"+props.productData.banner;
     const productTitle  = props.productData.title;
@@ -20,6 +25,29 @@ export default function ProductStart(props){
         // modal.hide()
     }
 
+    const mutation = useMutation({
+        mutationFn: (fields) => {
+            return subscribe(fields)
+        },
+        onError: (error) => {
+            setRequestStatus({status:false, message:'failed, try again'})
+            console.log(error)
+        },
+          onSuccess: (res) => {
+            setRequestStatus({status:true, message:'successful'})
+            console.log(res)
+        },
+        // onSettled: () => {
+        //     setTimeout(()=>{
+        //         setRequestStatus({status:false, message:''})
+        //     },4000)
+        // }
+    })
+
+    const handleSubscribe = () => {
+        mutation.mutate({})
+    }
+
     return (
         <>
             <div className="row">
@@ -95,10 +123,24 @@ export default function ProductStart(props){
                                 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>
+                            </>
+                            }
                         </div>
                         <div className="modal-footer">
                             <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
-                            <button type="button" className="btn btn-success" onClick={hideModal}>Start</button>
+                            <button type="button" className="btn btn-success" disabled={mutation.isSuccess} onClick={handleSubscribe}>{mutation.isPending ? 'loading...' : 'Start'}</button>
                         </div>
                     </div>
                 </div>

src/services/services.js

@@ -66,6 +66,15 @@ export const verifyEmail = (reqData) => {
     return postAuxEnd('/panel/auth/register/verify', postData, false)
 }
 
+// FUNCTION TO SUBSCRIBE
+export const subscribe = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/panel/myproduct/subscription', postData, false)
+    // return getAuxEnd('/panel/myproduct/subscription')
+}
+
 
 // FUNCTION TO RESET USER PASSWORD
 export const recoverPWD = (reqData) => {