feat(usecase): add business logic to upload document

CHANGELOG.md

@@ -34,6 +34,7 @@
   - Created New page under User profile
   - Add edit Overlay UI
   - Fetech usecase via API
+  - Add Business Logic to upload document
 - Service Release Process
   - Service Release process not working
   - Service details page crash issue

src/assets/locales/de/main.json

@@ -1450,9 +1450,11 @@
       "framework": "Framework",
       "expiry": "Expiry: {{expiry}}",
       "editUsecase": {
-        "title": "Trigger the use case participation by signing and uploading the use case frame agreement for {use case name}",
-        "description": "To be able to participate in the data exchange of the use case {use case name} please download the use case frame agreement {placeholder until download is available} and upload the signed document in the upload window below.After submission, the platform owner will validate the uploaded document you will be informed as soon as the validation is successfully finished",
-        "checkboxLabel": "Yes, I confirm that I have uploaded the signed use case frameagreement"
+        "title": "Trigger the use case participation by signing and uploading the use case frame agreement for {{usecaseName}}",
+        "description": "To be able to participate in the data exchange of the use case {{usecaseName}} please download the use case frame agreement {placeholder until download is available} and upload the signed document in the upload window below.After submission, the platform owner will validate the uploaded document you will be informed as soon as the validation is successfully finished",
+        "checkboxLabel": "Yes, I confirm that I have uploaded the signed use case frameagreement",
+        "error": "Something went wrong!",
+        "success": "Usecase document upload has been done successfully."
       }
     },
     "certificates": {

src/assets/locales/en/main.json

@@ -1412,9 +1412,11 @@
       "framework": "Framework",
       "expiry": "Expiry: {{expiry}}",
       "editUsecase": {
-        "title": "Trigger the use case participation by signing and uploading the use case frame agreement for {use case name}",
-        "description": "To be able to participate in the data exchange of the use case {use case name} please download the use case frame agreement {placeholder until download is available} and upload the signed document in the upload window below.After submission, the platform owner will validate the uploaded document you will be informed as soon as the validation is successfully finished",
-        "checkboxLabel": "Yes, I confirm that I have uploaded the signed use case frameagreement"
+        "title": "Trigger the use case participation by signing and uploading the use case frame agreement for {{usecaseName}}",
+        "description": "To be able to participate in the data exchange of the use case {{usecaseName}} please download the use case frame agreement {placeholder until download is available} and upload the signed document in the upload window below.After submission, the platform owner will validate the uploaded document you will be informed as soon as the validation is successfully finished",
+        "checkboxLabel": "Yes, I confirm that I have uploaded the signed use case frameagreement",
+        "error": "Something went wrong!",
+        "success": "Usecase document upload has been done successfully."
       }
     },
     "certificates": {

src/components/overlays/EditUsecase/index.tsx

@@ -17,6 +17,10 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import i18next from 'i18next'
+import { useDispatch } from 'react-redux'
 import {
   Button,
   Checkbox,
@@ -25,37 +29,64 @@ import {
   DialogHeader,
   DropArea,
   DropAreaProps,
+  LoadingButton,
 } from '@catena-x/portal-shared-components'
-import { useTranslation } from 'react-i18next'
-import { fetchAny } from 'features/admin/userOwn/actions'
-import { useEffect, useState } from 'react'
-import { useDispatch } from 'react-redux'
-import './style.scss'
+import { error, success } from 'services/NotifyService'
 import { OVERLAYS } from 'types/Constants'
-import { show } from 'features/control/overlay'
+import { closeOverlay, show } from 'features/control/overlay'
 import { store } from 'features/store'
 import { Dropzone } from '../../shared/basic/Dropzone'
+import { useAddUsecaseMutation } from 'features/usecase/usecaseApiSlice'
+import './style.scss'
 
-export default function EditUsecase({ id }: { id: string }) {
+export default function EditUsecase({
+  id: verifiedCredentialTypeId,
+  title: credentialType,
+}: {
+  id: string
+  title: string
+}) {
   const { t } = useTranslation()
   const dispatch = useDispatch<typeof store.dispatch>()
-  const [uploadedFile, setUploadedFile] = useState<any>()
+  const [uploadedFile, setUploadedFile] = useState<File>()
   const [checked, setChecked] = useState<boolean>(false)
+  const [loading, setLoading] = useState<boolean>(false)
 
-  useEffect(() => {
-    dispatch(fetchAny(id))
-  }, [dispatch, id])
+  const [addUsecase] = useAddUsecaseMutation()
 
   const renderDropArea = (props: DropAreaProps) => {
     return <DropArea {...props} size="small" />
   }
 
+  const handleUpload = async () => {
+    setLoading(true)
+    try {
+      const data = {
+        verifiedCredentialTypeId: verifiedCredentialTypeId,
+        credentialType: credentialType,
+        document: uploadedFile,
+      }
+      await addUsecase(data).unwrap()
+      setLoading(false)
+      dispatch(closeOverlay())
+      success(t('content.usecaseParticipation.editUsecase.success'))
+    } catch (err) {
+      setLoading(false)
+      error(t('content.usecaseParticipation.editUsecase.error'), '', '')
+    }
+  }
+
   return (
     <>
       <DialogHeader
         {...{
-          title: t('content.usecaseParticipation.editUsecase.title'),
-          intro: t('content.usecaseParticipation.editUsecase.description'),
+          title: i18next.t('content.usecaseParticipation.editUsecase.title', {
+            usecaseName: credentialType,
+          }),
+          intro: i18next.t(
+            'content.usecaseParticipation.editUsecase.description',
+            { usecaseName: credentialType }
+          ),
           closeWithIcon: true,
           onCloseWithIcon: () => dispatch(show(OVERLAYS.NONE, '')),
         }}
@@ -91,13 +122,27 @@ export default function EditUsecase({ id }: { id: string }) {
         >
           {t('global.actions.cancel')}
         </Button>
-        <Button
-          variant="contained"
-          // onClick={saveRoles}
-          disabled={!checked || uploadedFile === undefined}
-        >
-          {t('global.actions.submit')}
-        </Button>
+        {loading ? (
+          <LoadingButton
+            color="primary"
+            helperText=""
+            helperTextColor="success"
+            label=""
+            loadIndicator="Loading ..."
+            loading
+            size="medium"
+            onButtonClick={() => {}}
+            sx={{ marginLeft: '10px' }}
+          />
+        ) : (
+          <Button
+            variant="contained"
+            onClick={handleUpload}
+            disabled={!checked || uploadedFile === undefined}
+          >
+            {t('global.actions.submit')}
+          </Button>
+        )}
       </DialogActions>
     </>
   )

src/components/overlays/UpdateCertificate/index.tsx

@@ -60,7 +60,7 @@ export default function UpdateCertificate({ id }: { id: string }) {
     try {
       if (uploadedFile) {
         const data = {
-          credentialTypeId: 'credentialType',
+          credentialType: 'DISMANTLER_CERTIFICATE', //static for now as we have only one certificate
           document: uploadedFile,
         }
         await addCertificate(data).unwrap()

src/components/pages/UsecaseParticipation/index.tsx

@@ -30,18 +30,31 @@ import uniqueId from 'lodash/uniqueId'
 import { show } from 'features/control/overlay'
 import { OVERLAYS } from 'types/Constants'
 import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb'
-import { useFetchUsecaseQuery } from 'features/usecase/usecaseApiSlice'
+import {
+  UsecaseResponse,
+  VerifiedCredentialsData,
+  useFetchUsecaseQuery,
+} from 'features/usecase/usecaseApiSlice'
 import './UsecaseParticipation.scss'
 import { SubscriptionStatus } from 'features/apps/apiSlice'
+import { useEffect } from 'react'
 import { Link } from 'react-router-dom'
 
 export default function UsecaseParticipation() {
   const { t } = useTranslation()
   const dispatch = useDispatch()
 
-  const { data } = useFetchUsecaseQuery()
+  const { data, refetch } = useFetchUsecaseQuery()
+
+  useEffect(() => {
+    refetch()
+  }, [refetch])
 
-  const renderStatus = (status: string) => {
+  const renderStatus = (
+    item: UsecaseResponse,
+    credential: VerifiedCredentialsData
+  ) => {
+    const status = credential.ssiDetailData?.participationStatus
     if (
       status === SubscriptionStatus.PENDING ||
       status === SubscriptionStatus.ACTIVE
@@ -59,7 +72,15 @@ export default function UsecaseParticipation() {
         <Chip
           color="secondary"
           label="Edit"
-          onClick={() => dispatch(show(OVERLAYS.EDIT_USECASE, 'userId'))}
+          onClick={() =>
+            dispatch(
+              show(
+                OVERLAYS.EDIT_USECASE,
+                credential.externalDetailData.id,
+                item.credentialType
+              )
+            )
+          }
           withIcon={false}
           type="plain"
         />
@@ -193,9 +214,7 @@ export default function UsecaseParticipation() {
                                 variant="body3"
                                 className="fifthSection"
                               >
-                                {renderStatus(
-                                  credential.ssiDetailData?.participationStatus
-                                )}
+                                {renderStatus(item, credential)}
                               </Typography>
                             </li>
                           </>

src/features/certification/certificationApiSlice.tsx

@@ -43,7 +43,7 @@ export type CertificateResponse = {
 }
 
 export type CertificateRequest = {
-  credentialTypeId: string
+  credentialType: string
   document: File
 }
 
@@ -58,7 +58,7 @@ export const apiSlice = createApi({
     }),
     addCertificate: builder.mutation<void, CertificateRequest>({
       query: (body) => ({
-        url: 'api/administration/companydata/ssiCertificate',
+        url: 'api/administration/companydata/certificates',
         method: 'POST',
         body: body,
       }),

src/features/usecase/usecaseApiSlice.ts

@@ -47,14 +47,27 @@ export type UsecaseResponse = {
   verifiedCredentials: VerifiedCredentialsData[]
 }
 
+export type UsecaseRequest = {
+  verifiedCredentialTypeId: string
+  credentialType: string
+  document: any
+}
+
 export const apiSlice = createApi({
   reducerPath: 'rtk/administration/usecase',
   baseQuery: fetchBaseQuery(apiBaseQuery()),
   endpoints: (builder) => ({
     fetchUsecase: builder.query<UsecaseResponse[], void>({
       query: () => '/api/administration/companydata/useCaseParticipation',
     }),
+    addUsecase: builder.mutation<void, UsecaseRequest>({
+      query: (body) => ({
+        url: 'api/administration/companydata/useCaseParticipation',
+        method: 'POST',
+        body: body,
+      }),
+    }),
   }),
 })
 
-export const { useFetchUsecaseQuery } = apiSlice
+export const { useFetchUsecaseQuery, useAddUsecaseMutation } = apiSlice

src/services/AccessService.tsx

@@ -199,7 +199,7 @@ export const getOverlay = (overlay: OverlayState) => {
     case OVERLAYS.UPDATE_COMPANY_ROLE:
       return <UpdateCompanyRole roles={overlay.roles ?? []} />
     case OVERLAYS.EDIT_USECASE:
-      return <EditUsecase id={overlay.id} />
+      return <EditUsecase id={overlay.id} title={overlay.title ?? ''} />
     case OVERLAYS.UPDATE_CERTIFICATE:
       return <UpdateCertificate id={overlay.id} />
     default: