feat(service subscription): ui changes and add filter (#270)

eclipse-tractusx · Sep 13, 2023 · 01b87aa · 01b87aa
1 parent 2776ff8
commit 01b87aa
Show file tree

Hide file tree

Showing 10 changed files with 147 additions and 65 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -33,6 +33,9 @@
 - App Overview
   - Enhance Sub Menu by adding 'Change Documents' for active apps
   - Add roles for active apps
+- Service Subscription
+  - UI Changes
+  - Add filters
 
 ## 1.6.0
 

diff --git a/src/assets/locales/de/servicerelease.json b/src/assets/locales/de/servicerelease.json
@@ -165,6 +165,9 @@
       "help": "Help",
       "loading": "Loading..."
     },
+    "detailOverlay": {
+      "description": "Service Subscription Details & Status"
+    },
     "activation": {
       "title": "Service Subscription Activated",
       "subtitle": "for ",

diff --git a/src/assets/locales/en/servicerelease.json b/src/assets/locales/en/servicerelease.json
@@ -165,6 +165,9 @@
       "help": "Help",
       "loading": "Loading..."
     },
+    "detailOverlay": {
+      "description": "Service Subscription Details & Status"
+    },
     "activation": {
       "title": "Service Subscription Activated",
       "subtitle": "for ",

diff --git a/src/components/overlays/ActivateServiceSubscription/index.tsx b/src/components/overlays/ActivateServiceSubscription/index.tsx
@@ -75,17 +75,18 @@ export default function ActivateserviceSubscription({
 
   const handleConfrim = async () => {
     setLoading(true)
-    await subscribe({
-      requestId: subscriptionId,
-      offerUrl: 'https://testonly.google.de|https://testonly.google.de/',
-    })
-      .unwrap()
-      .then((data) => {
-        setActivationResponse(true)
-        setTechuserInfo(data)
-      })
-      .catch(() => {})
-    setLoading(false)
+    try {
+      const result = await subscribe({
+        requestId: subscriptionId,
+        offerUrl: 'https://testonly.google.de|https://testonly.google.de/',
+      }).unwrap()
+      setActivationResponse(true)
+      setTechuserInfo(result)
+      setLoading(false)
+    } catch (error) {
+      setLoading(false)
+      console.log(error)
+    }
   }
 
   return (

diff --git a/src/components/pages/AppSubscription/AppSubscriptionDetailOverlay/index.tsx b/src/components/pages/AppSubscription/AppSubscriptionDetailOverlay/index.tsx
@@ -39,11 +39,14 @@ import { ROLES } from 'types/Constants'
 import { useState } from 'react'
 import { SuccessErrorType } from 'features/admin/appuserApiSlice'
 import { isURL } from 'types/Patterns'
+import { SubscriptionTypes } from 'components/shared/templates/Subscription'
+import { useFetchServiceSubDetailQuery } from 'features/serviceSubscription/serviceSubscriptionApiSlice'
 
 interface AppSubscriptionDetailProps {
   openDialog: boolean
   appId: string
   subscriptionId: string
+  type: string
   handleOverlayClose: () => void
 }
 
@@ -57,10 +60,16 @@ const AppSubscriptionDetailOverlay = ({
   openDialog = false,
   appId,
   subscriptionId,
+  type,
   handleOverlayClose,
 }: AppSubscriptionDetailProps) => {
   const { t } = useTranslation()
-  const { data, refetch } = useFetchSubscriptionDetailQuery({
+  const ti = useTranslation('servicerelease').t
+  const fetchAPI =
+    type === SubscriptionTypes.APP_SUBSCRIPTION
+      ? useFetchSubscriptionDetailQuery
+      : useFetchServiceSubDetailQuery
+  const { data, refetch } = fetchAPI({
     appId,
     subscriptionId,
   })
@@ -113,9 +122,25 @@ const AppSubscriptionDetailOverlay = ({
     ],
   }
 
-  const technicalDetails: TableType = {
-    head: [t('content.appSubscription.detailOverlay.technicalDetails'), ''],
-    body: [
+  const bodyData = [
+    [
+      `${t('content.appSubscription.detailOverlay.technicalName')}`,
+      data?.technicalUserData?.[0]?.name ??
+        (data?.offerSubscriptionStatus !== SubscriptionStatus.PENDING
+          ? 'N/A'
+          : ''),
+    ],
+    [
+      `${t('content.appSubscription.detailOverlay.technicalPermission')}`,
+      data?.technicalUserData?.[0]?.permissions.toString() ??
+        (data?.offerSubscriptionStatus !== SubscriptionStatus.PENDING
+          ? 'N/A'
+          : ''),
+    ],
+  ]
+
+  type === SubscriptionTypes.APP_SUBSCRIPTION &&
+    bodyData.unshift(
       [
         `${t('content.appSubscription.detailOverlay.appTenantUrl')}`,
         data?.tenantUrl ?? '',
@@ -126,22 +151,12 @@ const AppSubscriptionDetailOverlay = ({
           (data?.offerSubscriptionStatus !== SubscriptionStatus.PENDING
             ? 'N/A'
             : ''),
-      ],
-      [
-        `${t('content.appSubscription.detailOverlay.technicalName')}`,
-        data?.technicalUserData?.[0]?.name ??
-          (data?.offerSubscriptionStatus !== SubscriptionStatus.PENDING
-            ? 'N/A'
-            : ''),
-      ],
-      [
-        `${t('content.appSubscription.detailOverlay.technicalPermission')}`,
-        data?.technicalUserData?.[0]?.permissions.toString() ??
-          (data?.offerSubscriptionStatus !== SubscriptionStatus.PENDING
-            ? 'N/A'
-            : ''),
-      ],
-    ],
+      ]
+    )
+
+  const technicalDetails: TableType = {
+    head: [t('content.appSubscription.detailOverlay.technicalDetails'), ''],
+    body: bodyData,
     edit: [
       [
         {
@@ -231,7 +246,11 @@ const AppSubscriptionDetailOverlay = ({
       >
         <DialogHeader
           title={t('content.appSubscription.detailOverlay.title')}
-          intro={t('content.appSubscription.detailOverlay.description')}
+          intro={
+            type === SubscriptionTypes.APP_SUBSCRIPTION
+              ? t('content.appSubscription.detailOverlay.description')
+              : ti('serviceSubscription.detailOverlay.description')
+          }
           closeWithIcon={true}
           onCloseWithIcon={() => handleOverlayClose()}
         />

diff --git a/src/components/pages/ServiceSubscription/index.tsx b/src/components/pages/ServiceSubscription/index.tsx
@@ -21,7 +21,10 @@
 import Subscription, {
   SubscriptionTypes,
 } from 'components/shared/templates/Subscription'
-import { useFetchServiceSubscriptionsQuery } from 'features/serviceSubscription/serviceSubscriptionApiSlice'
+import {
+  useFetchServiceSubscriptionsQuery,
+  useFetchServiceFiltersQuery,
+} from 'features/serviceSubscription/serviceSubscriptionApiSlice'
 import { currentSuccessType } from 'features/serviceSubscription/slice'
 import { useTranslation } from 'react-i18next'
 
@@ -31,6 +34,7 @@ export default function ServiceSubscription() {
     <Subscription
       currentSuccessType={currentSuccessType}
       fetchQuery={useFetchServiceSubscriptionsQuery}
+      fetchAppFilters={useFetchServiceFiltersQuery}
       providerSuccessMessage={t(
         'serviceSubscription.register.providerSuccessMessage'
       )}

diff --git a/src/components/shared/templates/Subscription/SubscriptionElements.tsx b/src/components/shared/templates/Subscription/SubscriptionElements.tsx
@@ -120,13 +120,11 @@ function reducer(state: State, { type, payload }: Action) {
 
 export default function SubscriptionElements({
   subscriptions,
-  isAppFilters,
   type,
   refetch,
   isSuccess,
 }: {
   subscriptions?: SubscriptionContent[]
-  isAppFilters?: boolean
   type: string
   refetch: () => void
   isSuccess: boolean
@@ -170,31 +168,25 @@ export default function SubscriptionElements({
                   <Typography variant="body3" className="secondSection">
                     {subscriptionData.offerName}
                   </Typography>
-                  {type === SubscriptionTypes.APP_SUBSCRIPTION ? (
-                    <div
-                      className="viewDetails"
-                      onClick={() =>
-                        setViewDetails({
-                          appId: subscriptionData.offerId,
-                          subscriptionId: subscription.subscriptionId,
-                        })
-                      }
-                    >
-                      <IconButton color="secondary" size="small">
-                        <Tooltips
-                          color="dark"
-                          tooltipPlacement="top-start"
-                          tooltipText={t('content.appSubscription.viewDetails')}
-                        >
-                          <ArrowForwardIcon />
-                        </Tooltips>
-                      </IconButton>
-                    </div>
-                  ) : (
-                    <Typography variant="body3" className="thirdSection">
-                      {'Placeholders for add details such as BPN; etc'}
-                    </Typography>
-                  )}
+                  <div
+                    className="viewDetails"
+                    onClick={() =>
+                      setViewDetails({
+                        appId: subscriptionData.offerId,
+                        subscriptionId: subscription.subscriptionId,
+                      })
+                    }
+                  >
+                    <IconButton color="secondary" size="small">
+                      <Tooltips
+                        color="dark"
+                        tooltipPlacement="top-start"
+                        tooltipText={t('content.appSubscription.viewDetails')}
+                      >
+                        <ArrowForwardIcon />
+                      </Tooltips>
+                    </IconButton>
+                  </div>
                   {subscription.offerSubscriptionStatus ===
                     SubscriptionStatus.PENDING && (
                     <div className="forthSection">
@@ -234,6 +226,12 @@ export default function SubscriptionElements({
                       type="confirm"
                       variant="filled"
                       withIcon
+                      sx={{
+                        borderRadius: '36px',
+                        ':hover': {
+                          pointerEvents: 'auto',
+                        },
+                      }}
                     />
                   )}
                 </li>
@@ -271,6 +269,7 @@ export default function SubscriptionElements({
           openDialog={viewDetails.appId ? true : false}
           appId={viewDetails.appId}
           subscriptionId={viewDetails.subscriptionId}
+          type={type}
           handleOverlayClose={() => setViewDetails(ViewDetailData)}
         />
       )}

diff --git a/src/components/shared/templates/Subscription/index.tsx b/src/components/shared/templates/Subscription/index.tsx
@@ -287,7 +287,7 @@ export default function Subscription({
   let appFiltersData: AppFiltersResponse[] = useMemo(() => [], [])
   if (fetchAppFilters) {
     const { data } = fetchAppFilters()
-    appFiltersData = data
+    appFiltersData = data?.content
   }
 
   useEffect(() => {
@@ -448,6 +448,7 @@ export default function Subscription({
   )
 
   const handleActiveAppFilter = (appId: string) => {
+    console.log('appId', appId)
     appId = activeAppFilter === appId ? '' : appId
     setState({
       type: ActionKind.SET_ACTIVE_APP_FILTER,
@@ -547,7 +548,6 @@ export default function Subscription({
             ) : (
               <SubscriptionElements
                 subscriptions={cardSubscriptions}
-                isAppFilters={appFilters.length > 0}
                 type={type}
                 refetch={refetch}
                 isSuccess={apiSuccess}

diff --git a/src/features/appSubscription/appSubscriptionApiSlice.ts b/src/features/appSubscription/appSubscriptionApiSlice.ts
@@ -144,7 +144,7 @@ export const apiSlice = createApi({
       },
     }),
     fetchAppFilters: builder.query<AppFiltersResponse[], void>({
-      query: () => '/api/apps/provided',
+      query: () => '/api/apps/provided?statusId=Active',
     }),
     fetchSubscriptionDetail: builder.query<
       SubscriptionDetailResponse,

diff --git a/src/features/serviceSubscription/serviceSubscriptionApiSlice.ts b/src/features/serviceSubscription/serviceSubscriptionApiSlice.ts
@@ -24,6 +24,7 @@ import { apiBaseQuery } from 'utils/rtkUtil'
 export interface SubscriptionRequestType {
   page: number
   statusId: string
+  offerId?: string
   sortingType: string
 }
 export interface SubscriptionResponseContentType {
@@ -54,6 +55,38 @@ export interface SubscriptionStoreRequest {
   offerUrl: string
 }
 
+export type ServiceFiltersResponse = {
+  id: string
+  lastChanged: string
+  leadPictureId: string
+  name: string
+  provider: string
+  status: string
+}
+
+export type SubscriptionDetailRequestBody = {
+  appId: string
+  subscriptionId: string
+}
+
+export type TechnicalUserData = {
+  id: string
+  name: string
+  permissions: string[]
+}
+
+export type SubscriptionDetailResponse = {
+  id: string
+  appInstanceId?: string
+  offerSubscriptionStatus: string
+  name: string
+  customer: string
+  bpn: string
+  contact: string[]
+  technicalUserData: TechnicalUserData[]
+  tenantUrl?: string
+}
+
 export const apiSlice = createApi({
   reducerPath: 'rtk/services/serviceSubscription',
   baseQuery: fetchBaseQuery(apiBaseQuery()),
@@ -64,15 +97,32 @@ export const apiSlice = createApi({
     >({
       query: (body) => {
         const statusId = `statusId=${body.statusId}`
+        const offerId = `offerId=${body.offerId}`
         const sortingType = `sorting=${body.sortingType}`
         return {
           url: `/api/services/provided/subscription-status?size=15&page=${
             body.page
-          }&${body.statusId && statusId}&${body.sortingType && sortingType}`,
+          }&${body.statusId && statusId}&${body.offerId && offerId}&${
+            body.sortingType && sortingType
+          }`,
         }
       },
     }),
+    fetchServiceFilters: builder.query<ServiceFiltersResponse[], void>({
+      query: () => '/api/services/provided',
+    }),
+    fetchServiceSubDetail: builder.query<
+      SubscriptionDetailResponse,
+      SubscriptionDetailRequestBody
+    >({
+      query: (body) =>
+        `/api/Services/${body.appId}/subscription/${body.subscriptionId}/provider`,
+    }),
   }),
 })
 
-export const { useFetchServiceSubscriptionsQuery } = apiSlice
+export const {
+  useFetchServiceSubscriptionsQuery,
+  useFetchServiceFiltersQuery,
+  useFetchServiceSubDetailQuery,
+} = apiSlice