Feature/pin 7822 7823 7860 personal data field eservice template details page

src/components/shared/EserviceTemplate/EServiceTemplateGeneralInfoSection.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { SectionContainer, SectionContainerSkeleton } from '@/components/layout/containers'
-import { Divider, Stack, Typography } from '@mui/material'
+import { Alert, Button, Divider, Stack, Typography } from '@mui/material'
 import { InformationContainer } from '@pagopa/interop-fe-commons'
 import { useTranslation } from 'react-i18next'
 import { useParams } from '@/router'
@@ -14,6 +14,8 @@ import { UpdateDescriptionDrawer } from '@/components/shared/UpdateDescriptionDr
 import { UpdateNameDrawer } from '@/components/shared/UpdateNameDrawer'
 import { EServiceTemplateDownloads } from '@/api/eserviceTemplate/eserviceTemplate.downloads'
 import { EServiceTemplateVersionSelectorDrawer } from '@/components/shared/EserviceTemplate'
+import { UpdateEServicePersonalDataDrawer } from '../UpdateEServicePersonalDataDrawer'
+import { FEATURE_FLAG_ESERVICE_PERSONAL_DATA } from '@/config/env'
 
 type EServiceTemplateGeneralInfoSectionProps = {
   readonly: boolean
@@ -48,6 +50,9 @@ export const EServiceTemplateGeneralInfoSection: React.FC<
   const { mutate: updateEserviceTemplateName } =
     EServiceTemplateMutations.useUpdateEServiceTemplateName()
 
+  const { mutate: updateEserviceTemplatePersonalData } =
+    EServiceTemplateMutations.useUpdateEServiceTemplatePersonalDataFlagAfterPublication()
+
   const {
     isOpen: isVersionSelectorDrawerOpen,
     openDrawer: openVersionSelectorDrawer,
@@ -129,6 +134,25 @@ export const EServiceTemplateGeneralInfoSection: React.FC<
     )
   }
 
+  const {
+    isOpen: isEServiceUpdatePersonalDataDrawerOpen,
+    openDrawer: openUpdateEServicePersonalDataDrawer,
+    closeDrawer: closeEServiceUpdatePersonalDataDrawer,
+  } = useDrawerState()
+
+  const handleEServiceTemplatePersonalDataUpdate = (
+    eserviceTemplateId: string,
+    personalData: boolean
+  ) => {
+    updateEserviceTemplatePersonalData(
+      {
+        eserviceTemplateId: eserviceTemplateId,
+        personalData: personalData,
+      },
+      { onSuccess: closeEServiceUpdatePersonalDataDrawer }
+    )
+  }
+
   return (
     <>
       <SectionContainer
@@ -144,6 +168,37 @@ export const EServiceTemplateGeneralInfoSection: React.FC<
             label={t('version.label')}
             content={eserviceTemplateVersion?.version.toString() || '1'}
           />
+          {FEATURE_FLAG_ESERVICE_PERSONAL_DATA && (
+            <InformationContainer
+              label={
+                eserviceTemplateVersion
+                  ? t(`personalDataField.${eserviceTemplateVersion?.eserviceTemplate.mode}.label`)
+                  : ''
+              }
+              content={t(
+                `personalDataField.value.${eserviceTemplateVersion?.eserviceTemplate.personalData}`
+              )}
+            />
+          )}
+          {FEATURE_FLAG_ESERVICE_PERSONAL_DATA &&
+            routeKey === 'PROVIDE_ESERVICE_TEMPLATE_DETAILS' &&
+            eserviceTemplateVersion?.eserviceTemplate.personalData === undefined && (
+              <Alert severity="warning" sx={{ alignItems: 'center' }}>
+                <Stack spacing={17} direction="row" alignItems="center">
+                  {' '}
+                  {/**TODO FIX SPACING */}
+                  <Typography>{t('personalDataField.alert.label')}</Typography>
+                  <Button
+                    variant="naked"
+                    size="medium"
+                    sx={{ fontWeight: 700, mr: 1 }}
+                    onClick={openUpdateEServicePersonalDataDrawer}
+                  >
+                    {tCommon('actions.specifyProcessing')}
+                  </Button>
+                </Stack>
+              </Alert>
+            )}
           <Divider />
           <SectionContainer
             innerSection
@@ -280,6 +335,14 @@ export const EServiceTemplateGeneralInfoSection: React.FC<
                   'updateEServiceTemplateAudienceDrawer.eserviceTemplateAudienceField.validation.sameValue'
                 )}
               />
+              <UpdateEServicePersonalDataDrawer
+                isOpen={isEServiceUpdatePersonalDataDrawerOpen}
+                onClose={closeEServiceUpdatePersonalDataDrawer}
+                eserviceId={eserviceTemplateVersion.eserviceTemplate.id}
+                personalData={eserviceTemplateVersion.eserviceTemplate.personalData}
+                onSubmit={handleEServiceTemplatePersonalDataUpdate}
+                eserviceMode={eserviceTemplateVersion.eserviceTemplate.mode}
+              />
             </>
           )}
         </>

src/components/shared/UpdateEServicePersonalDataDrawer.tsx

@@ -14,7 +14,7 @@ type UpdateEServicePersonalDataDrawerProps = {
   isOpen: boolean
   onClose: VoidFunction
   eserviceId: string
-  onSubmit: (id: string, personalData: boolean | undefined) => void
+  onSubmit: (id: string, personalData: boolean) => void
   personalData: boolean | undefined
   eserviceMode: EServiceMode
 }
@@ -43,6 +43,7 @@ export const UpdateEServicePersonalDataDrawer: React.FC<UpdateEServicePersonalDa
   }, [personalData, formMethods])
 
   const handleSubmit = (values: UpdateEServicePersonalDataFormValues) => {
+    if (values.personalData === undefined) return
     onSubmit(eserviceId, values.personalData)
   }
 

src/pages/ConsumerEServiceTemplateDetailsPage/ConsumerEServiceTemplateDetails.page.tsx

@@ -18,12 +18,14 @@ const ConsumerEServiceTemplateDetailsPage: React.FC = () => {
 
   const isAlreadyInstantiated = eserviceTemplate?.isAlreadyInstantiated ?? false
   const hasRequesterRiskAnalysis = eserviceTemplate?.hasRequesterRiskAnalysis ?? true
+  const hasPersonalDataValue = eserviceTemplate?.eserviceTemplate.personalData ?? false
 
   const { actions } = useGetConsumerEServiceTemplateActions(
     eServiceTemplateId,
     isAlreadyInstantiated,
     hasRequesterRiskAnalysis,
-    eserviceTemplate?.state
+    eserviceTemplate?.state,
+    hasPersonalDataValue
   )
   return (
     <PageContainer

src/pages/ConsumerEServiceTemplateDetailsPage/hooks/useGetConsumerEServiceTemplateActions.tsx

@@ -5,12 +5,14 @@ import { useTranslation } from 'react-i18next'
 import type { ActionItemButton } from '@/types/common.types'
 import { AuthHooks } from '@/api/auth'
 import FiberNewIcon from '@mui/icons-material/FiberNew'
+import { FEATURE_FLAG_ESERVICE_PERSONAL_DATA } from '@/config/env'
 
 export function useGetConsumerEServiceTemplateActions(
   eServiceTemplateId: string,
   isAlreadyInstantiated: boolean,
   hasRequesterRiskAnalysis: boolean,
-  activeVersionState?: EServiceTemplateVersionState | undefined
+  activeVersionState?: EServiceTemplateVersionState | undefined,
+  hasPersonalDataValue?: boolean
 ): { actions: Array<ActionItemButton> } {
   const { t } = useTranslation('eserviceTemplate', { keyPrefix: 'actions' })
 
@@ -38,6 +40,9 @@ export function useGetConsumerEServiceTemplateActions(
   }
 
   const tooltipToShow = (() => {
+    if (!hasPersonalDataValue && FEATURE_FLAG_ESERVICE_PERSONAL_DATA) {
+      return t('createInstanceDisabledPersonalData')
+    }
     if (isAlreadyInstantiated) {
       return tooltipLabel as unknown as string
     }