fix(subscription): show all active apps/services (#1246)

eclipse-tractusx · Oct 31, 2024 · e6e2e0d · e6e2e0d
1 parent 33fed14
commit e6e2e0d
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 45 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -45,6 +45,8 @@
   - updated search place holder text - showing only available offer names at the top - and implemented hover information on the status icon of service subscription [#1130](https://github.com/eclipse-tractusx/portal-frontend/pull/1130)
 - **CX-Operator Application**
   - enabled to not show overlay for submitted application to CX-Operator [#1204](https://github.com/eclipse-tractusx/portal-frontend/pull/1204)
+- **App and Service Subscription Management**
+  - show all available active apps/services in the filter section. add heading in each section for the better user experience. show all subscription including inactive in the list [#1246](https://github.com/eclipse-tractusx/portal-frontend/pull/1246)
 - **App Overview Details**
   - show confirmity document in separate section and all other available documents in the documents section [#1235](https://github.com/eclipse-tractusx/portal-frontend/pull/1235)
 

diff --git a/src/assets/locales/de/servicerelease.json b/src/assets/locales/de/servicerelease.json
@@ -202,7 +202,8 @@
       "url": "URL:",
       "technicaluserType": "Assigned Permissions:",
       "close": "Close"
-    }
+    },
+    "offersHeading": "Services Offered"
   },
   "adminBoard": {
     "headerTitle": "Service request management",

diff --git a/src/assets/locales/en/servicerelease.json b/src/assets/locales/en/servicerelease.json
@@ -202,7 +202,8 @@
       "url": "URL:",
       "technicaluserType": "Assigned Permissions:",
       "close": "Close"
-    }
+    },
+    "offersHeading": "Services Offered"
   },
   "adminBoard": {
     "headerTitle": "Service request management",

diff --git a/src/components/pages/ServiceSubscription/index.tsx b/src/components/pages/ServiceSubscription/index.tsx
@@ -55,6 +55,7 @@ export default function ServiceSubscription() {
       }}
       doNotShowAutoSetup={true}
       type={SubscriptionTypes.SERVICE_SUBSCRIPTION}
+      activeAppHeading={t('serviceSubscription.offersHeading')}
     />
   )
 }
diff --git a/src/components/shared/templates/Subscription/SubscriptionElements.tsx b/src/components/shared/templates/Subscription/SubscriptionElements.tsx
@@ -134,11 +134,13 @@ export default function SubscriptionElements({
   type,
   refetch,
   isSuccess,
+  subscriptionHeading,
 }: {
   subscriptions?: SubscriptionContent[]
   type: string
   refetch: () => void
   isSuccess: boolean
+  subscriptionHeading: string
 }) {
   const theme = useTheme()
   const { t } = useTranslation()
@@ -276,12 +278,14 @@ export default function SubscriptionElements({
   return (
     <div className="recommended-main">
       {subscriptions?.length ? (
-        <ul className="subscription-list">
-          {subscriptions.map((subscriptionData) => {
-            return subscriptionData.companySubscriptionStatuses.map(
-              (subscription) =>
-                subscription.offerSubscriptionStatus !==
-                  SubscriptionStatus.INACTIVE && (
+        <>
+          <Typography variant="h4" sx={{ marginBottom: '20px' }}>
+            {subscriptionHeading}
+          </Typography>
+          <ul className="subscription-list">
+            {subscriptions.map((subscriptionData) => {
+              return subscriptionData.companySubscriptionStatuses.map(
+                (subscription) => (
                   <li
                     key={subscription.subscriptionId}
                     className="subscription-list-item"
@@ -319,9 +323,10 @@ export default function SubscriptionElements({
                     </div>
                   </li>
                 )
-            )
-          })}
-        </ul>
+              )
+            })}
+          </ul>
+        </>
       ) : (
         <div className="loading-progress">
           <CircleProgress

diff --git a/src/components/shared/templates/Subscription/index.tsx b/src/components/shared/templates/Subscription/index.tsx
@@ -259,6 +259,8 @@ interface SubscriptionType {
   currentSuccessType: (state: RootState) => boolean
   loadMoreButtonText?: string
   type?: string
+  activeAppHeading?: string
+  subscriptionHeading?: string
 }
 
 export default function Subscription({
@@ -277,6 +279,8 @@ export default function Subscription({
   currentSuccessType,
   loadMoreButtonText = 'Load More',
   type = SubscriptionTypes.APP_SUBSCRIPTION,
+  activeAppHeading = 'Apps Offered',
+  subscriptionHeading = 'Subscriptions',
 }: SubscriptionType) {
   const dispatch = useDispatch()
   const theme = useTheme()
@@ -323,23 +327,13 @@ export default function Subscription({
   }, [data])
 
   useEffect(() => {
-    if (data?.content && appFiltersData) {
-      const fillers: AppFiltersResponse[] = []
-      appFiltersData.forEach((item) => {
-        data.content.forEach((base: { offerId: string }) => {
-          if (base.offerId === item.id) {
-            fillers.push(item)
-          }
-        })
+    if (appFiltersData?.length) {
+      setState({
+        type: ActionKind.SET_APP_FILTERS,
+        payload: appFiltersData,
       })
-      if (fillers?.length) {
-        setState({
-          type: ActionKind.SET_APP_FILTERS,
-          payload: fillers,
-        })
-      }
     }
-  }, [appFiltersData, data])
+  }, [appFiltersData, type])
 
   const setView = (e: React.MouseEvent<HTMLInputElement>) => {
     let status = ''
@@ -552,24 +546,27 @@ export default function Subscription({
               </div>
             </div>
             {appFilters && appFilters.length > 0 && (
-              <div className="appFilterSection">
-                {appFilters.map((app: AppFiltersResponse) => {
-                  return (
-                    <Typography
-                      className={`appName ${
-                        activeAppFilter === app.id ? 'activeFilter' : ''
-                      }`}
-                      variant="body3"
-                      onClick={() => {
-                        handleActiveAppFilter(app.id)
-                      }}
-                      key={app.id}
-                    >
-                      {app.name}
-                    </Typography>
-                  )
-                })}
-              </div>
+              <>
+                <Typography variant="h4">{activeAppHeading}</Typography>
+                <div className="appFilterSection">
+                  {appFilters.map((app: AppFiltersResponse) => {
+                    return (
+                      <Typography
+                        className={`appName ${
+                          activeAppFilter === app.id ? 'activeFilter' : ''
+                        }`}
+                        variant="body3"
+                        onClick={() => {
+                          handleActiveAppFilter(app.id)
+                        }}
+                        key={app.id}
+                      >
+                        {app.name}
+                      </Typography>
+                    )
+                  })}
+                </div>
+              </>
             )}
             {isFetching ? (
               <div className="loading-progress">
@@ -588,6 +585,7 @@ export default function Subscription({
                 type={type}
                 refetch={refetch}
                 isSuccess={apiSuccess}
+                subscriptionHeading={subscriptionHeading}
               />
             )}
           </div>

diff --git a/src/features/serviceSubscription/serviceSubscriptionApiSlice.ts b/src/features/serviceSubscription/serviceSubscriptionApiSlice.ts
@@ -175,7 +175,7 @@ export const apiSlice = createApi({
       },
     }),
     fetchServiceFilters: builder.query<ServiceFiltersResponse[], void>({
-      query: () => '/api/services/provided',
+      query: () => '/api/services/provided?statusId=Active',
     }),
     fetchServiceSubDetail: builder.query<
       SubscriptionDetailResponse,