added rebuild confirmation modal

src/components/subscription_view/RebuildModal.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import ModalWrapper from '../modals/ModalWrapper'
+import MainBtn from '../MainBtn'
+
+export default function RebuildModal({data={}, templateRebuild, closeModal, proceedFunc}) {
+  return (
+    <ModalWrapper maxWidth='max-w-sm'>
+        <div className='relative bg-white rounded-lg shadow-round_black dark:border-[1px] dark:border-[#1E2027] dark:bg-black-box dark:text-white'>
+            {/* <!-- Modal header --> */}
+            {/* <div className="p-8 sm:p-12 flex items-center justify-between border-b rounded-t border-gray-300 dark:border-gray-600">
+                <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
+                    EDIT
+                </h3>
+                <button onClick={closeModal} type="button" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
+                    <svg className="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+                    </svg>
+                    <span className="sr-only">Close modal</span>
+                </button>
+            </div> */}
+            {/* <!-- Modal body --> */}
+            <div className='p-8 sm:p-12 mb-4 flex flex-col flex-wrap gap-4 lg:gap-8'>
+                <div className='w-full text-center'>
+                    <p className='text-lg font-semibold mb-1'>Please confirm you want product rebuild to start</p>
+                    {templateRebuild.isPending && <p className='text-sm text-emerald-600'>Rebuild started ...</p>}
+                </div>
+
+                <div className='flex justify-between items-center gap-4'>
+                    <MainBtn 
+                        onClick={proceedFunc}
+                        className={`bg-primary dark:bg-primary-dark px-2 py-1 mt-4 rounded-md text-white font-medium sm:self-end`}
+                        text='Proceed'
+                    />
+                    <MainBtn 
+                        type='button'
+                        className={`bg-red-500 px-2 py-1 mt-4 rounded-md text-white font-medium sm:self-end`}
+                        text='Cancel'
+                        onClick={closeModal}
+                    />
+                </div>
+            </div>
+        </div>
+    </ModalWrapper>
+  )
+}

src/components/subscription_view/SubscriptionViewCom.jsx

@@ -7,6 +7,7 @@ import RouteLinks from '../../RouteLinks';
 import {getSubscriptionsView, updateTemplate, updateCustomTemplate, rebuildTemplate} from '../../services/siteServices'
 import queryKeys from '../../services/queryKeys'
 import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
+import RebuildModal from './RebuildModal';
 
 export default function SubscriptionViewCom() {
 
@@ -14,7 +15,7 @@ export default function SubscriptionViewCom() {
     const {state} = useLocation()
     const navigate = useNavigate()
 
-    const [reqStatus, setReqStatus] = useState({loading: false, type: '', error: false, success: false})
+    const [rebuildStatus, setRebuildStatus] = useState({status: false, data: {}})
 
     const [values, setValues] = useState({custom_id: '', template_uid: ''})
 
@@ -69,6 +70,7 @@ export default function SubscriptionViewCom() {
         },
         onSettled: () => {
             setTimeout(() => {
+                setRebuildStatus({status: false, data: {}})
                 templateRebuild.reset()
             }, 3000)
         }
@@ -175,7 +177,7 @@ export default function SubscriptionViewCom() {
                                     </td>
                                     <td className="px-2">
                                         <div className="text-right">
-                                            <button name='template' onClick={handleRebuildTemplate}
+                                            <button name='template' onClick={()=>setRebuildStatus({status: true, data:{}})}
                                                     className={`rounded-md p-2 bg-primary text-white text-center`}>
                                                 Rebuild
                                             </button>
@@ -238,7 +240,8 @@ export default function SubscriptionViewCom() {
                             </div>
                         </div>
                     </>
-            }
+                }
+                { rebuildStatus?.status && <RebuildModal data={{}} templateRebuild={templateRebuild} proceedFunc={handleRebuildTemplate} closeModal={()=>setRebuildStatus({status: false, data:{}})} />}
         </div>
     )
 }