feat(portal navigation): handle navigation as per status (#482)

CHANGELOG.md

@@ -12,6 +12,8 @@
   - fix loading button issue to invite multiple companies in succession
 - Company Name
   - Update pattern in invite form and app release process
+- Portal login navigation
+  - handle navigation as per applicationType and applicationStatus
 
 ## 1.8.0-RC3
 

src/assets/locales/de/main.json

@@ -148,6 +148,10 @@
       "helpText": "If you have any questions regarding your registration please contact our helpdesk:",
       "email": "[email protected]"
     },
+    "registrationDeclined": {
+      "title": "Registration Status",
+      "description": "<strong>After careful consideration, we regret to inform you that we are unable to approve your registration at this time.</strong><br /><br />Details/reasons for the cancellation have been provided via email.Your account will get disabled soon."
+    },
     "admin": {
       "registration-requests": {
         "columns": {

src/assets/locales/en/main.json

@@ -147,6 +147,10 @@
       "helpText": "If you have any questions regarding your registration please contact our helpdesk:",
       "email": "[email protected]"
     },
+    "registrationDeclined": {
+      "title": "Registration Status",
+      "description": "<strong style='color: red'>After careful consideration, we regret to inform you that we are unable to approve your registration at this time.</strong><br /><br />Details/reasons for the cancellation have been provided via email.Your account will get disabled soon."
+    },
     "admin": {
       "registration-requests": {
         "columns": {

src/components/Main.tsx

@@ -28,12 +28,13 @@ import { useTranslation } from 'react-i18next'
 import AccessService from '../services/AccessService'
 import MainOverlay from './MainOverlay'
 import { show } from 'features/control/overlay'
-import type { OVERLAYS } from 'types/Constants'
+import { OVERLAYS } from 'types/Constants'
 import MainNotify from './MainNotify'
 import MainSearchOverlay from './shared/frame/SearchOverlay'
 import { MenuInfo } from './pages/Home/components/MenuInfo'
 import {
   ApplicationStatus,
+  ApplicationType,
   useFetchApplicationsQuery,
 } from 'features/registration/registrationApiSlice'
 import './styles/main.scss'
@@ -55,22 +56,31 @@ export default function Main() {
 
   if (
     companyData &&
-    companyData.applicationStatus !== ApplicationStatus.SUBMITTED &&
-    Object.values(ApplicationStatus).includes(companyData.applicationStatus)
+    [
+      ApplicationStatus.CREATED,
+      ApplicationStatus.ADD_COMPANY_DATA,
+      ApplicationStatus.INVITE_USER,
+      ApplicationStatus.SELECT_COMPANY_ROLE,
+      ApplicationStatus.UPLOAD_DOCUMENTS,
+      ApplicationStatus.VERIFY,
+    ].includes(companyData.applicationStatus) &&
+    !location.search.includes('overlay=consent_osp')
   ) {
-    return (
-      <>
-        <Header main={[]} user={AccessService.userMenuReg()} />
-        <MainSearchOverlay />
-        {window.location.pathname === '/logout' ? (
-          <Logout />
-        ) : (
-          <RegistrationStatus />
-        )}
-        <Footer pages={AccessService.footerMenu()} />
-        <MenuInfo main={[]} />
-      </>
-    )
+    if (companyData.applicationType === ApplicationType.INTERNAL) {
+      return (
+        <>
+          <Header main={[]} user={AccessService.userMenuReg()} />
+          <MainSearchOverlay />
+          {window.location.pathname === '/logout' ? (
+            <Logout />
+          ) : (
+            <RegistrationStatus />
+          )}
+          <Footer pages={AccessService.footerMenu()} />
+          <MenuInfo main={[]} />
+        </>
+      )
+    } else dispatch(show(OVERLAYS.CONSENT_OSP))
   }
 
   return (

src/components/shared/frame/Header/RegistrationDeclinedOverlay/index.tsx

@@ -0,0 +1,73 @@
+/********************************************************************************
+ * Copyright (c) 2021, 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 { Trans, useTranslation } from 'react-i18next'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogActions,
+  Typography,
+} from '@catena-x/portal-shared-components'
+
+export type StatusTagIcon = {
+  type?: 'confirmed' | 'pending' | 'declined' | 'label'
+}
+
+export type RegistrationDeclinedProps = {
+  openDialog: boolean
+  handleOverlayClose: React.MouseEventHandler
+}
+
+const RegistrationDeclinedOverlay = ({
+  openDialog,
+  handleOverlayClose,
+}: RegistrationDeclinedProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <Dialog
+      open={openDialog}
+      additionalModalRootStyles={{
+        width: '50%',
+      }}
+    >
+      <DialogHeader title={t('content.registrationDeclined.title')} />
+      <DialogContent
+        sx={{
+          padding: '0 120px',
+          marginBottom: 5,
+        }}
+      >
+        <div className="registration-review">
+          <Trans>
+            <Typography variant="body2">
+              {t('content.registrationDeclined.description')}
+            </Typography>
+          </Trans>
+        </div>
+      </DialogContent>
+      <DialogActions
+        helperText={t('content.registrationInreview.helperText')}
+      ></DialogActions>
+    </Dialog>
+  )
+}
+
+export default RegistrationDeclinedOverlay

src/components/shared/frame/Header/RegistrationReviewOverlay/index.tsx

@@ -51,38 +51,34 @@ const RegistrationReviewOverlay = ({
   })
 
   return (
-    <div className={'company-detail-overlay'}>
-      <Dialog
-        open={openDialog}
-        additionalModalRootStyles={{
-          width: isMobile ? '80%' : '50%',
+    <Dialog
+      open={openDialog}
+      additionalModalRootStyles={{
+        width: isMobile ? '80%' : '50%',
+      }}
+    >
+      <DialogHeader title={t('content.registrationInreview.title')} />
+      <DialogContent
+        sx={{
+          padding: isMobile ? '0 30px' : '0 120px',
+          marginBottom: 5,
         }}
       >
-        <DialogHeader title={t('content.registrationInreview.title')} />
-        <DialogContent
-          sx={{
-            padding: isMobile ? '0 30px' : '0 120px',
-            marginBottom: 5,
-          }}
-        >
-          <div className="registration-review">
-            <Trans>
-              <Typography variant="body1" className="description">
-                {t('content.registrationInreview.description')}
-              </Typography>
-            </Trans>
-            <RegistrationReviewContent />
-          </div>
-        </DialogContent>
-        <DialogActions
-          helperText={t('content.registrationInreview.helperText')}
-        >
-          <Button variant="contained" size="small" onClick={handleOverlayClose}>
-            {t('global.actions.close')}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </div>
+        <div className="registration-review">
+          <Trans>
+            <Typography variant="body1" className="description">
+              {t('content.registrationInreview.description')}
+            </Typography>
+          </Trans>
+          <RegistrationReviewContent />
+        </div>
+      </DialogContent>
+      <DialogActions helperText={t('content.registrationInreview.helperText')}>
+        <Button variant="contained" size="small" onClick={handleOverlayClose}>
+          {t('global.actions.close')}
+        </Button>
+      </DialogActions>
+    </Dialog>
   )
 }
 

src/components/shared/frame/Header/index.tsx

@@ -48,6 +48,7 @@ import { Logo } from '../Logo'
 import RegistrationReviewOverlay from './RegistrationReviewOverlay'
 import './Header.scss'
 import RegistrationReviewContent from './RegistrationReviewOverlay/RegistrationReviewContent'
+import RegistrationDeclinedOverlay from './RegistrationDeclinedOverlay'
 
 export const Header = ({ main, user }: { main: Tree[]; user: string[] }) => {
   const { t } = useTranslation()
@@ -63,9 +64,12 @@ export const Header = ({ main, user }: { main: Tree[]; user: string[] }) => {
   const { data } = useFetchApplicationsQuery()
   const companyData = data?.[0]
 
-  const [overlayOpen, setOverlayOpen] = useState(
+  const [submittedOverlayOpen, setSubmittedOverlayOpen] = useState(
     companyData?.applicationStatus === ApplicationStatus.SUBMITTED
   )
+  const [declinedOverlayOpen, setDeclinedOverlayOpen] = useState(
+    companyData?.applicationStatus === ApplicationStatus.DECLINED
+  )
   const [headerNote, setHeaderNote] = useState(false)
 
   const addTitle = (items: Tree[] | undefined) =>
@@ -209,9 +213,16 @@ export const Header = ({ main, user }: { main: Tree[]; user: string[] }) => {
       </div>
       {headerNote && renderRegistrationNoteSection()}
       <RegistrationReviewOverlay
-        openDialog={overlayOpen}
+        openDialog={submittedOverlayOpen}
+        handleOverlayClose={() => {
+          setSubmittedOverlayOpen(false)
+          setHeaderNote(true)
+        }}
+      />
+      <RegistrationDeclinedOverlay
+        openDialog={declinedOverlayOpen}
         handleOverlayClose={() => {
-          setOverlayOpen(false)
+          setDeclinedOverlayOpen(false)
           setHeaderNote(true)
         }}
       />

src/features/registration/registrationApiSlice.ts

@@ -28,6 +28,13 @@ export enum ApplicationStatus {
   UPLOAD_DOCUMENTS = 'UPLOAD_DOCUMENTS',
   VERIFY = 'VERIFY',
   SUBMITTED = 'SUBMITTED',
+  DECLINED = 'DECLINED',
+  APPROVED = 'APPROVED',
+}
+
+export enum ApplicationType {
+  INTERNAL = 'INTERNAL',
+  EXTERNAL = 'EXTERNAL',
 }
 
 export type ApplicationChecklist = {
@@ -39,6 +46,7 @@ export type ApplicationResponse = {
   applicationId: string
   applicationStatus: ApplicationStatus
   applicationChecklist: ApplicationChecklist[]
+  applicationType: ApplicationType
 }
 
 export const apiSlice = createApi({