From 25d4751935e656a5343713f94ac8843b2cc36f70 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Tue, 15 Jul 2025 12:51:40 +0100 Subject: [PATCH] fixed product url refresh on successful subscription --- src/component/home/ProductsURL.jsx | 7 ++- src/component/product/ProductFactory.jsx | 25 +++++------ src/component/product/ProductStart.jsx | 57 ++++++++++++++++-------- src/services/queryKeys.js | 4 +- 4 files changed, 58 insertions(+), 35 deletions(-) diff --git a/src/component/home/ProductsURL.jsx b/src/component/home/ProductsURL.jsx index f497481..15dd7a2 100644 --- a/src/component/home/ProductsURL.jsx +++ b/src/component/home/ProductsURL.jsx @@ -64,10 +64,13 @@ export default function ProductsURL() { return ( {Number(item?.id)} - {item?.description} - {item?.external_url} + + {item?.description} - + {/* {item?.external_url} */} + {item?.status} - + ) })} diff --git a/src/component/product/ProductFactory.jsx b/src/component/product/ProductFactory.jsx index 021f779..fbcfe2e 100644 --- a/src/component/product/ProductFactory.jsx +++ b/src/component/product/ProductFactory.jsx @@ -61,21 +61,20 @@ export default function ProductFactory(){

{getProductData?.error?.message}

- : -
- {(product_status <= productConst.PRODUCT_AVAILABLE)? - - :<> } + : +
+ {(product_status <= productConst.PRODUCT_AVAILABLE)? + + :<> } - {(product_status === productConst.PRODUCT_PROVISIONING)? - - :<> } + {(product_status === productConst.PRODUCT_PROVISIONING)? + + :<> } - {(product_status === productConst.PRODUCT_ACTIVE)? - - :<> } - -
+ {(product_status === productConst.PRODUCT_ACTIVE)? + + :<> } +
} diff --git a/src/component/product/ProductStart.jsx b/src/component/product/ProductStart.jsx index e05628f..2d68e44 100644 --- a/src/component/product/ProductStart.jsx +++ b/src/component/product/ProductStart.jsx @@ -1,6 +1,7 @@ import React, { useRef, useState } from "react"; +import {useNavigate} from 'react-router-dom' import getImage from "../../utils/getImage"; -// import { Modal } from "bootstrap"; +import { Modal } from "bootstrap"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { subscribe } from '../../services/services' import queryKeys from "../../services/queryKeys"; @@ -8,26 +9,27 @@ import queryKeys from "../../services/queryKeys"; export default function ProductStart(props){ const queryClient = useQueryClient() + const navigate = useNavigate() 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 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 refetch = () => { - queryClient.refetchQueries({ - queryKey: [...queryKeys.product], - // type: 'active', - // exact: true, - }) + const modalRef = useRef(null) + + const invalidate = () => { + // queryClient.refetchQueries({ + // queryKey: [...queryKeys.product], + // // type: 'active', + // // exact: true, + // }) + queryClient.invalidateQueries({ queryKey: [...queryKeys.product_url] }) } const mutation = useMutation({ @@ -40,9 +42,12 @@ export default function ProductStart(props){ }, onSuccess: (res) => { setRequestStatus({status:true, message:'successful'}) + navigate(`/product/${product_id}`, {replace: true}) //'/product/'+ product_id + dismissModal() console.log(res) }, onSettled: () => { + invalidate() // Invalidates selected queries setTimeout(()=>{ setRequestStatus({status:false, message:''}) },4000) @@ -53,6 +58,22 @@ export default function ProductStart(props){ mutation.mutate({product_id: product_id}) } + const dismissModal = () => { + const body = document.querySelector('body') + body.removeAttribute('style') + // body.classList.toggle('modal-open') + + const modalBackdrop = document.querySelectorAll('.modal-backdrop') + modalBackdrop.forEach(item => { + if (item) { + item.remove(); + } + }) + + const modal = Modal.getInstance(modalRef.current); + modal && modal.hide(); + }; + return ( <>
@@ -113,7 +134,7 @@ export default function ProductStart(props){
{productTitle}
-
@@ -140,7 +161,7 @@ export default function ProductStart(props){ )}
- +
diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js index 8067416..c3d03dc 100644 --- a/src/services/queryKeys.js +++ b/src/services/queryKeys.js @@ -1,11 +1,11 @@ const queryKeys = { user_details: ['user_details'], + product_url: ['product_url'], + product: ['product-data'], dashboard: ['dashboard'], topBar: ['top-bar'], recentAction: ['recent-action'], - product: ['product-data'], - product_url: ['product_url'], myproduct_provision: ['myproduct_provision'], calendar_events: ['calendar_events'], contacts: ['contacts']