fix: filter out roles not defined by OSP (#1114)

eclipse-tractusx · Sep 18, 2024 · 08ae7a5 · 08ae7a5
1 parent 4126ff9
commit 08ae7a5
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -62,6 +62,7 @@
   - Display technicalUserManagement button based on role validation [#1073](https://github.com/eclipse-tractusx/portal-frontend/pull/1073)
 - **OSP Consent form**
   - Display invited company name in OSP consent form (Previously hard coded with 'BMW') [#1083](https://github.com/eclipse-tractusx/portal-frontend/pull/1083)
+  - Filter out roles not defined by OSP [#1114](https://github.com/eclipse-tractusx/portal-frontend/pull/1114)
   - Fix OSP consent form 400 submission error [#1102](https://github.com/eclipse-tractusx/portal-frontend/pull/1102/files)
 - **Use Case participation**
   - Removes use cases without verified credentials from the "Use Case Participation" list [#1088](https://github.com/eclipse-tractusx/portal-frontend/pull/1088)

diff --git a/src/components/pages/OSPConsent/CompanyDetails.tsx b/src/components/pages/OSPConsent/CompanyDetails.tsx
@@ -250,37 +250,45 @@ export const CompanyDetails = ({
           {t('osp.companyRole.subTitle')}
         </Typography>
         <div className="rolesList">
-          {allConsentData?.companyRoles.map((role) => (
-            <div
-              className="companyRole-section"
-              key={uniqueId(role.companyRole)}
-            >
-              <div className="role-checkbox-row">
-                <div className="role-checkbox">
-                  <Checkbox
-                    label=""
-                    onChange={() => {
-                      handleCompanyRoleCheck(role.companyRole)
-                    }}
-                    checked={companyRoleChecked?.[role.companyRole]}
-                  />
-                </div>
-                <div className="role-checkbox-text">
-                  <Typography
-                    variant={isMobile ? 'label2' : 'label1'}
-                    className="company-heading"
-                  >
-                    {t(`osp.companyRole.${role.companyRole}`)}
-                  </Typography>
-                  <Typography variant={isMobile ? 'body3' : 'body2'}>
-                    {role.descriptions['en' as keyof typeof role.descriptions]}
-                  </Typography>
-                  {companyRoleChecked?.[role.companyRole] &&
-                    renderTermsSection(role)}
+          {allConsentData?.companyRoles
+            .filter((role) =>
+              consentData?.companyRoles.includes(role.companyRole)
+            )
+            .map((role) => (
+              <div
+                className="companyRole-section"
+                key={uniqueId(role.companyRole)}
+              >
+                <div className="role-checkbox-row">
+                  <div className="role-checkbox">
+                    <Checkbox
+                      label=""
+                      onChange={() => {
+                        handleCompanyRoleCheck(role.companyRole)
+                      }}
+                      checked={companyRoleChecked?.[role.companyRole]}
+                    />
+                  </div>
+                  <div className="role-checkbox-text">
+                    <Typography
+                      variant={isMobile ? 'label2' : 'label1'}
+                      className="company-heading"
+                    >
+                      {t(`osp.companyRole.${role.companyRole}`)}
+                    </Typography>
+                    <Typography variant={isMobile ? 'body3' : 'body2'}>
+                      {
+                        role.descriptions[
+                          'en' as keyof typeof role.descriptions
+                        ]
+                      }
+                    </Typography>
+                    {companyRoleChecked?.[role.companyRole] &&
+                      renderTermsSection(role)}
+                  </div>
                 </div>
               </div>
-            </div>
-          ))}
+            ))}
         </div>
         {submitError && (
           <Typography variant="body3" className="submitError">