fix: change text of button when user requests subscription (#985)

#984

src/components/overlays/AppMarketplaceRequest/index.tsx

@@ -39,6 +39,7 @@ import './AppMarketplaceRequest.scss'
 import { error } from 'services/NotifyService'
 import { AgreementStatus } from '../UpdateCompanyRole'
 import { type AgreementRequest } from 'features/apps/types'
+import { confirmDialog } from 'features/overlay/slice'
 
 export default function AppMarketplaceRequest({ id }: { id: string }) {
   const { t } = useTranslation()
@@ -86,6 +87,7 @@ export default function AppMarketplaceRequest({ id }: { id: string }) {
         .then(() => {
           setSuccessOverlay(true)
           setSubscriptionOverlay(false)
+          dispatch(confirmDialog())
         })
         .catch((err) => {
           error(t('content.appMarketplace.errorMessage'), '', err as object)

src/components/pages/AppDetail/components/AppDetailHeader/index.tsx

@@ -36,6 +36,7 @@ import { SubscriptionStatus } from 'features/apps/types'
 import { useFetchDocumentByIdMutation } from 'features/apps/apiSlice'
 import CommonService from 'services/CommonService'
 import type { UseCaseType } from 'features/appManagement/types'
+import type { RootState } from 'features/store'
 
 enum Roles {
   SUBSCRIBE_APPS = 'subscribe_apps',
@@ -56,21 +57,38 @@ export interface ButtonColorType {
 export default function AppDetailHeader({ item }: AppDetailHeaderProps) {
   const { t } = useTranslation()
   const dispatch = useDispatch()
+  const isDialogConfirmed = useSelector(
+    (state: RootState) => state?.dialog?.isConfirmed
+  )
+
   const { appId } = useParams()
   const user = useSelector(userSelector)
   const [image, setImage] = useState('')
   const [fetchDocumentById] = useFetchDocumentByIdMutation()
+  const [buttonLabel, setButtonLabel] = useState(
+    t('content.appdetail.subscribe')
+  )
 
   const getStatusLabel = (subscribeStatus: string) => {
     if (subscribeStatus === SubscriptionStatus.PENDING) {
-      return t('content.appdetail.requested')
+      setButtonLabel(t('content.appdetail.requested'))
     } else if (subscribeStatus === SubscriptionStatus.ACTIVE) {
-      return t('content.appdetail.subscribed')
+      setButtonLabel(t('content.appdetail.subscribed'))
     } else {
-      return t('content.appdetail.subscribe')
+      setButtonLabel(t('content.appdetail.subscribe'))
     }
   }
 
+  useEffect(() => {
+    if (isDialogConfirmed) {
+      setButtonLabel(t('content.appdetail.requested'))
+    }
+  }, [isDialogConfirmed])
+
+  useEffect(() => {
+    getStatusLabel(item.isSubscribed ?? SubscriptionStatus.INACTIVE)
+  }, [])
+
   const getBtnColor = (subscribeStatus: string) => {
     let btnColor: ButtonColorType
     switch (subscribeStatus) {
@@ -131,7 +149,7 @@ export default function AppDetailHeader({ item }: AppDetailHeaderProps) {
 
     return (
       <OrderStatusButton
-        label={getStatusLabel(subscribeStatus)}
+        label={buttonLabel}
         color={btnColor.color}
         buttonData={OrderStatusButtonItems}
         selectable={

src/components/pages/AppMarketplace/components/AppListSection/index.tsx

@@ -26,7 +26,7 @@ import {
 import { useTheme } from '@mui/material'
 import { AppListGroupView } from '../AppListGroupView'
 import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useParams, useLocation } from 'react-router-dom'
 import { addItem, removeItem } from 'features/apps/favorites/actions'
 import {
   useFetchActiveAppsQuery,
@@ -45,6 +45,8 @@ export const label = 'AppList'
 export default function AppListSection() {
   const { t } = useTranslation()
   const theme = useTheme()
+  const { id } = useParams()
+  const location = useLocation()
 
   const dispatch = useDispatch<AppDispatch>()
   const navigate = useNavigate()
@@ -83,6 +85,10 @@ export default function AppListSection() {
     setFavlist(favs)
   }
 
+  useEffect(() => {
+    refetch()
+  }, [id, location.key])
+
   useEffect(() => {
     if (data && favoriteItems) {
       const d = cloneDeep(data)

src/features/overlay/slice.ts

@@ -0,0 +1,52 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+import { createSlice } from '@reduxjs/toolkit'
+
+interface DialogState {
+  isOpen: boolean
+  isConfirmed: boolean
+}
+
+const initialState: DialogState = {
+  isOpen: false,
+  isConfirmed: false,
+}
+
+const dialog = createSlice({
+  name: 'dialog',
+  initialState,
+  reducers: {
+    openDialog: (state) => {
+      state.isOpen = true
+    },
+    closeDialog: (state) => {
+      state.isOpen = false
+    },
+    confirmDialog: (state) => {
+      state.isConfirmed = true
+    },
+    resetDialog: (state) => {
+      state.isConfirmed = false
+    },
+  },
+})
+
+export const { openDialog, closeDialog, confirmDialog, resetDialog } =
+  dialog.actions
+export default dialog

src/features/store.ts

@@ -30,6 +30,7 @@ import connectorSlice from './connector/slice'
 import notificationSliceDep from './notification/slice'
 import ErrorSlice from './error/slice'
 import images from './images/slice'
+import dialog from './overlay/slice'
 import managementSlice from './appManagement/slice'
 import serviceManagementSlice from './serviceManagement/slice'
 import serviceMarketplaceSlice from './serviceMarketplace/slice'
@@ -81,6 +82,7 @@ export const reducers = {
   control,
   info,
   images,
+  dialog: dialog.reducer,
   companyData: companyDataSlice.reducer,
   management: managementSlice.reducer,
   serviceManagement: serviceManagementSlice.reducer,