From d8cf5fcd6ff7e3fcc6bc05d2a8bcaf9b828ee167 Mon Sep 17 00:00:00 2001 From: Shubham Vaidya Date: Tue, 13 Aug 2024 17:29:44 +0530 Subject: [PATCH] fix: change text of button when user requests subscription (#985) https://github.com/eclipse-tractusx/portal-frontend/issues/984 --- .../overlays/AppMarketplaceRequest/index.tsx | 2 + .../components/AppDetailHeader/index.tsx | 26 ++++++++-- .../components/AppListSection/index.tsx | 8 ++- src/features/overlay/slice.ts | 52 +++++++++++++++++++ src/features/store.ts | 2 + 5 files changed, 85 insertions(+), 5 deletions(-) create mode 100644 src/features/overlay/slice.ts diff --git a/src/components/overlays/AppMarketplaceRequest/index.tsx b/src/components/overlays/AppMarketplaceRequest/index.tsx index 43898be85..73d3807f1 100644 --- a/src/components/overlays/AppMarketplaceRequest/index.tsx +++ b/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) diff --git a/src/components/pages/AppDetail/components/AppDetailHeader/index.tsx b/src/components/pages/AppDetail/components/AppDetailHeader/index.tsx index f5c585162..204474552 100644 --- a/src/components/pages/AppDetail/components/AppDetailHeader/index.tsx +++ b/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 ( () 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) diff --git a/src/features/overlay/slice.ts b/src/features/overlay/slice.ts new file mode 100644 index 000000000..6483b0122 --- /dev/null +++ b/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 diff --git a/src/features/store.ts b/src/features/store.ts index 030bcb05b..6c5739547 100644 --- a/src/features/store.ts +++ b/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,