fix(technical integration): get user consent to share tech user details

src/assets/locales/de/main.json

@@ -1330,6 +1330,9 @@
         "encoding": "Encoding(select supported encoding)",
         "encodingPlaceholder": "Select supported encoding",
         "noneOption": "Nicht notwendig (für die Integration ist kein technischer User notwendig)",
+        "userVisibilityHeader": "3. Technical User Visibility",
+        "userVisibilityDescription": "Diese Option deaktiviert die Möglichkeit des Abonnenten, Sicherheitsinformationen der für ihn erstellten technischen Benutzer anzuzeigen. Bei dieser Option müssen Abonnenten diese Situation akzeptieren, wenn sie ein Abonnement abschließen möchten",
+        "userVisibilityTerms": "Deaktivieren Sie die Sichtbarkeit technischer Benutzerdaten für Abonnenten",
         "table": {
           "addtechUserButton": "Neuen technischen Benutzer hinzufügen",
           "title": "Technical Users",
@@ -1464,7 +1467,8 @@
       "statusHeading": "Für eine bessere Transparenz wird die Abonnementstatusleiste auf der App-Detailseite verfügbar sein. Sie können den Abonnementstatus überprüfen, wenn Sie die App-Detailseite über den App-Marktplatz öffnen.",
       "desc8": "Der gesamte Vorgang wird voraussichtlich innerhalb von 5 Werktagen abgeschlossen sein.",
       "desc9": "Vielen Dank, dass Sie sich für den Service entschieden haben.",
-      "errorMessage": "Das Abonnement war nicht erfolgreich; Bitte wenden Sie sich an Ihren Administrator."
+      "errorMessage": "Das Abonnement war nicht erfolgreich; Bitte wenden Sie sich an Ihren Administrator.",
+      "techUserTerms": "Durch die Bestätigung der Bedingungen akzeptieren Sie, dass der technische Benutzer im Eigentum des Dienstanbieters für Sie erstellt wird"
     },
     "techUser": {
       "details": {

src/assets/locales/en/main.json

@@ -1330,6 +1330,9 @@
         "encoding": "Encoding(select supported encoding)",
         "encodingPlaceholder": "Select supported encoding",
         "noneOption": "none (no technical user needed to run the app/service)",
+        "userVisibilityHeader": "3. Technical User Visibility",
+        "userVisibilityDescription": "this option will disable the subscriber's ability to view security information of the technical users created for them. This option requires subscribers to accept this situation if they wish to subscribe",
+        "userVisibilityTerms": "Disable the visibility of technical user data for subscribers",
         "table": {
           "addtechUserButton": "Configure Technical User",
           "title": "Technical Users",
@@ -1464,7 +1467,8 @@
       "statusHeading": "For a better transparency, the subscription status bar will be available in the app detail page - you can check the subscription status when opening the app detail page from the app marketplace.",
       "desc8": "The entire process is expected to complete within 5 business days.",
       "desc9": "Thank you for choosing the service.",
-      "errorMessage": "The subscription was unsuccessful; please contact your administrator."
+      "errorMessage": "The subscription was unsuccessful; please contact your administrator.",
+      "techUserTerms": "By confirming the terms, you accept the technical user will be created for you under the ownership of the service provider"
     },
     "techUser": {
       "details": {

src/components/overlays/AppMarketplaceRequest/index.tsx

@@ -33,6 +33,7 @@ import { useState } from 'react'
 import {
   useAddSubscribeAppMutation,
   useFetchAgreementsQuery,
+  useFetchAppDetailsQuery,
 } from 'features/apps/apiSlice'
 import { closeOverlay } from 'features/control/overlay'
 import './style.scss'
@@ -45,6 +46,7 @@ export default function AppMarketplaceRequest({ id }: { id: string }) {
   const { t } = useTranslation()
   const dispatch = useDispatch()
   const { data: agreements } = useFetchAgreementsQuery(id ?? '')
+  const { data: item } = useFetchAppDetailsQuery(id)
   const [addSubscribeApp] = useAddSubscribeAppMutation()
 
   const [checkedAgreementsIds, setCheckedAgreementsIds] = useState<string[]>([])
@@ -142,6 +144,11 @@ export default function AppMarketplaceRequest({ id }: { id: string }) {
             <Typography variant="h5">
               {t('content.appMarketplace.termsHeading')}
             </Typography>
+            {item?.displayTechnicalUser && (
+              <Typography variant="body2" sx={{ mb: '20px' }}>
+                {t('content.appMarketplace.techUserTerms')}
+              </Typography>
+            )}
             {agreements && agreements.length > 0 ? (
               <ul className="agreements-list">
                 {agreements?.map((agreement, index) => (

src/components/overlays/ServiceRequest/index.tsx

@@ -37,6 +37,7 @@ import { closeOverlay } from 'features/control/overlay'
 import './style.scss'
 import { error } from 'services/NotifyService'
 import { AgreementStatus } from '../UpdateCompanyRole'
+import { useFetchServiceDetailsQuery } from 'features/serviceSubscription/serviceSubscriptionApiSlice'
 
 export default function ServiceRequest({ id }: { id: string }) {
   const { t } = useTranslation()
@@ -46,6 +47,7 @@ export default function ServiceRequest({ id }: { id: string }) {
     []
   )
   const { data: serviceAgreements } = useFetchAgreementsQuery(id ?? '')
+  const { data: item } = useFetchServiceDetailsQuery(id)
   const [addSubscribeService] = useAddSubscribeServiceMutation()
   const [serviceSubscriptionOverlay, setServiceSubscriptionOverlay] =
     useState<boolean>(true)
@@ -121,6 +123,11 @@ export default function ServiceRequest({ id }: { id: string }) {
             <Typography variant="h5">
               {t('content.serviceMarketplace.termsHeading')}
             </Typography>
+            {item?.displayTechnicalUser && (
+              <Typography variant="body2" sx={{ mb: '20px' }}>
+                {t('content.appMarketplace.techUserTerms')}
+              </Typography>
+            )}
             {serviceAgreements && serviceAgreements.length > 0 ? (
               <ul className="agreements-list">
                 {serviceAgreements?.map((agreement, index) => (

src/components/shared/basic/ReleaseProcess/TechnicalIntegration/index.tsx

@@ -25,6 +25,7 @@ import {
   LoadingButton,
   SelectList,
   Typography,
+  Checkbox,
 } from '@catena-x/portal-shared-components'
 import { useTranslation } from 'react-i18next'
 import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined'
@@ -135,6 +136,8 @@ export default function TechnicalIntegration() {
     },
   ]
 
+  const [userVisibility, setUserVisibility] = useState<boolean>(false)
+
   useEffect(() => {
     csvPreview(uploadFileInfo)
   }, [selectedEncoding])
@@ -688,6 +691,29 @@ export default function TechnicalIntegration() {
             )}
           </Typography>
         )}
+        <Divider className="form-divider" />
+        <Typography variant="h5" mb={2}>
+          <>
+            {t('content.apprelease.technicalIntegration.userVisibilityHeader')}
+            <span style={{ color: 'red' }}> *</span>
+          </>
+        </Typography>
+        <Typography variant="body2" mb={4}>
+          {t(
+            'content.apprelease.technicalIntegration.userVisibilityDescription'
+          )}
+        </Typography>
+        <Box>
+          <Checkbox
+            checked={userVisibility}
+            label={t(
+              'content.apprelease.technicalIntegration.userVisibilityTerms'
+            )}
+            onChange={(e) => {
+              setUserVisibility(e.target.checked)
+            }}
+          />
+        </Box>
       </form>
       <SnackbarNotificationWithButtons
         pageNotification={technicalIntegrationNotification}

src/features/apps/types.ts

@@ -155,6 +155,7 @@ export type AppDetails = AppMarketplaceApp & {
     [key: string]: string[] | null
   }
   offerSubscriptionDetailData?: OfferSubscriptionDataType[]
+  displayTechnicalUser: boolean
 }
 
 export type Documents = {

src/features/serviceSubscription/serviceSubscriptionApiSlice.ts

@@ -144,6 +144,7 @@ export interface ServiceDetailsResponse {
   images: string[]
   privacyPolicies: PrivacyPolicyType[]
   documents: Documents
+  displayTechnicalUser: boolean
 }
 
 export interface SubscriptionServiceRequestType {