feat: modified eservice creation summary page (PIN-9116)

src/components/layout/containers/AttributeGroupContainer.tsx

@@ -41,9 +41,9 @@ const containerColors = {
   },
   gray: {
     textColor: theme.palette.text.primary,
-    headerColor: '#F5F5F5',
-    borderColor: '#F5F5F5',
-    bodyColor: 'white',
+    headerColor: 'grey.200',
+    borderColor: 'grey.200',
+    bodyColor: 'grey.50',
   },
 }
 

src/components/shared/ReadOnlyDescriptorAttributes.tsx

@@ -11,6 +11,7 @@ import type { DescriptorAttribute, DescriptorAttributes } from '@/api/api.genera
 import { useCurrentRoute } from '@/router'
 import type { ActionItemButton, ProviderOrConsumer } from '@/types/common.types'
 import { attributesHelpLink } from '@/config/constants'
+import { Typography } from '@mui/material'
 
 type ReadOnlyDescriptorAttributesProps = {
   descriptorAttributes: DescriptorAttributes
@@ -52,10 +53,6 @@ export const AttributeGroupsListSection: React.FC<AttributeGroupsListSectionProp
 }) => {
   const { t: tAttribute } = useTranslation('attribute')
 
-  const { mode } = useCurrentRoute()
-
-  const providerOrConsumer = mode as ProviderOrConsumer
-
   const attributeGroups = descriptorAttributes[attributeKey]
 
   return (
@@ -72,15 +69,22 @@ export const AttributeGroupsListSection: React.FC<AttributeGroupsListSectionProp
       topSideActions={topSideActions}
     >
       {attributeGroups.length > 0 && (
-        <Stack spacing={3}>
-          {attributeGroups.map((attributeGroup, index) => (
-            <AttributeGroup key={index} attributes={attributeGroup} index={index} />
-          ))}
-        </Stack>
+        <>
+          <Stack spacing={3}>
+            {attributeGroups.map((attributeGroup, index) => (
+              <AttributeGroup
+                key={index}
+                attributes={attributeGroup}
+                index={index}
+                attributeKey={attributeKey}
+              />
+            ))}
+          </Stack>
+        </>
       )}
       {attributeGroups.length === 0 && (
         <AttributeGroupContainer
-          title={tAttribute(`noAttributesRequiredAlert.${providerOrConsumer}`, {
+          title={tAttribute(`noGenericAttributesRequiredAlert`, {
             attributeKey: tAttribute(`type.${attributeKey}_other`),
           })}
           color="gray"
@@ -93,19 +97,33 @@ export const AttributeGroupsListSection: React.FC<AttributeGroupsListSectionProp
 type AttributeGroup = {
   attributes: Array<DescriptorAttribute>
   index: number
+  attributeKey: AttributeKey
 }
 
-const AttributeGroup: React.FC<AttributeGroup> = ({ attributes }) => {
+const AttributeGroup: React.FC<AttributeGroup> = ({ attributes, index, attributeKey }) => {
   const { t } = useTranslation('attribute', { keyPrefix: 'group.read' })
+  const { t: tAttribute } = useTranslation('attribute')
   const { mode } = useCurrentRoute()
-
   return (
-    <AttributeGroupContainer title={t(mode as ProviderOrConsumer)} color="gray">
+    <AttributeGroupContainer
+      title={tAttribute(`${attributeKey}.requirement`, { index: index + 1 })}
+      color="gray"
+    >
+      <Typography>{t(mode as ProviderOrConsumer)}</Typography>
       <Stack spacing={1.2} sx={{ my: 2, mx: 0, listStyle: 'none', px: 0 }} component="ul">
-        {attributes.map((attribute) => (
-          <Box key={attribute.id} component="li">
-            <AttributeContainer attribute={attribute} />
-          </Box>
+        {attributes.map((attribute, _index) => (
+          <>
+            <Box key={attribute.id} component="li">
+              <AttributeContainer attribute={attribute} />
+            </Box>
+            {attributes.length > 1 && _index < attributes.length - 1 && (
+              <Divider sx={{ py: 1 }}>
+                <Typography color="text.secondary" fontWeight={700} textTransform={'uppercase'}>
+                  {tAttribute('or')}
+                </Typography>
+              </Divider>
+            )}
+          </>
         ))}
       </Stack>
     </AttributeGroupContainer>

src/components/shared/SummaryAccordion.tsx

@@ -10,24 +10,38 @@ import {
   Divider,
 } from '@mui/material'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { Stack } from '@mui/material'
+import { Chip } from '@mui/material'
 
 type SummaryAccordionProps = {
   headline: string
   title: string
   children: React.ReactNode
   defaultExpanded?: boolean
+  showWarning?: boolean
+  warningLabel?: string
 }
 export const SummaryAccordion: React.FC<SummaryAccordionProps> = ({
   headline,
   title,
   children,
   defaultExpanded,
+  showWarning,
+  warningLabel,
 }) => {
   const id = React.useId()
 
   return (
     <Paper elevation={8} sx={{ borderRadius: 4, overflow: 'hidden' }}>
-      <MUIAccordion disableGutters defaultExpanded={defaultExpanded}>
+      <MUIAccordion
+        disableGutters
+        defaultExpanded={defaultExpanded}
+        sx={{
+          '.MuiAccordionSummary-root': {
+            alignItems: 'center',
+          },
+        }}
+      >
         <AccordionSummary
           expandIcon={<ExpandMoreIcon color="primary" />}
           aria-controls={`panel-content-${id}`}
@@ -36,16 +50,25 @@ export const SummaryAccordion: React.FC<SummaryAccordionProps> = ({
             px: 4,
             alignItems: 'end',
             py: 1.5,
-            '& .MuiAccordionSummary-expandIconWrapper': {
-              mb: 1,
-            },
           }}
         >
-          <Box>
-            <Typography variant="subtitle2">{headline}</Typography>
-            <Typography sx={{ mt: 2 }} variant="h6">
-              {title}
-            </Typography>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              width: '100%',
+            }}
+          >
+            <Stack direction="row" alignItems="center">
+              <Typography variant="subtitle2">{headline}</Typography>
+              <Typography sx={{ ml: 1 }} variant="h6">
+                {title}
+              </Typography>
+            </Stack>
+            {showWarning && warningLabel && (
+              <Chip label={warningLabel} color="warning" size="small" sx={{ mr: 3 }} />
+            )}
           </Box>
         </AccordionSummary>
         <AccordionDetails sx={{ px: 4, pb: 3 }}>

src/pages/ProviderEServiceSummaryPage/ProviderEServiceSummary.page.tsx

@@ -240,6 +240,18 @@ const ProviderEServiceSummaryPage: React.FC = () => {
     }
   }
 
+  const isGeneralInfoSectionValid =
+    Boolean(descriptor?.eservice.description) &&
+    Boolean(descriptor?.eservice.technology) &&
+    (FEATURE_FLAG_ESERVICE_PERSONAL_DATA ? arePersonalDataSet : true)
+
+  const isVersionInfoSectionValid =
+    Boolean(descriptor?.description) &&
+    Boolean(descriptor?.audience?.length) &&
+    Boolean(descriptor?.voucherLifespan)
+
+  const isDocumentationSectionValid = Boolean(descriptor?.interface)
+
   return (
     <>
       <PageContainer
@@ -284,39 +296,42 @@ const ProviderEServiceSummaryPage: React.FC = () => {
               headline="1"
               title={t('summary.generalInfoSummary.title')}
               defaultExpanded={true}
+              showWarning={!isGeneralInfoSectionValid}
+              warningLabel={t('summary.missingInformationsLabel')}
             >
               <ProviderEServiceGeneralInfoSummary />
             </SummaryAccordion>
           </React.Suspense>
+          <React.Suspense fallback={<SummaryAccordionSkeleton />}>
+            <SummaryAccordion headline="2" title={t('summary.attributeVersionSummary.title')}>
+              <ProviderEServiceAttributeVersionSummary />
+            </SummaryAccordion>
+          </React.Suspense>
           {isReceiveMode && (
             <React.Suspense fallback={<SummaryAccordionSkeleton />}>
-              <SummaryAccordion headline="2" title={t('summary.riskAnalysisSummaryList.title')}>
+              <SummaryAccordion headline="3" title={t('summary.riskAnalysisSummaryList.title')}>
                 <ProviderEServiceRiskAnalysisSummaryList />
               </SummaryAccordion>
             </React.Suspense>
           )}
-          <React.Suspense fallback={<SummaryAccordionSkeleton />}>
-            <SummaryAccordion
-              headline={isReceiveMode ? '3' : '2'}
-              title={t('summary.versionInfoSummary.title')}
-            >
-              <ProviderEServiceVersionInfoSummary />
-            </SummaryAccordion>
-          </React.Suspense>
           <React.Suspense fallback={<SummaryAccordionSkeleton />}>
             <SummaryAccordion
               headline={isReceiveMode ? '4' : '3'}
-              title={t('summary.attributeVersionSummary.title')}
+              title={t('summary.documentationSummary.title')}
+              showWarning={!isVersionInfoSectionValid}
+              warningLabel={t('summary.missingInformationsLabel')}
             >
-              <ProviderEServiceAttributeVersionSummary />
+              <ProviderEServiceDocumentationSummary />
             </SummaryAccordion>
           </React.Suspense>
           <React.Suspense fallback={<SummaryAccordionSkeleton />}>
             <SummaryAccordion
               headline={isReceiveMode ? '5' : '4'}
-              title={t('summary.documentationSummary.title')}
+              title={t('summary.versionInfoSummary.title')}
+              showWarning={!isDocumentationSectionValid}
+              warningLabel={t('summary.missingInformationsLabel')}
             >
-              <ProviderEServiceDocumentationSummary />
+              <ProviderEServiceVersionInfoSummary />
             </SummaryAccordion>
           </React.Suspense>
           {FEATURE_FLAG_ESERVICE_PERSONAL_DATA &&
@@ -352,31 +367,38 @@ const ProviderEServiceSummaryPage: React.FC = () => {
             )}
         </Stack>
         {!isDelegator && (
-          <Stack spacing={1} sx={{ mt: 4 }} direction="row" justifyContent="end">
-            <Button
-              startIcon={<DeleteOutlineIcon />}
-              variant="text"
-              color="error"
-              onClick={handleDeleteDraft}
-              disabled={isSupport}
-            >
-              {tCommon('deleteDraft')}
-            </Button>
-            <Button
-              startIcon={<CreateIcon />}
-              variant="text"
-              onClick={handleEditDraft}
-              disabled={isSupport}
-            >
-              {tCommon('editDraft')}
-            </Button>
-            <PublishButton
-              onClick={handlePublishDraft}
-              disabled={!canBePublished() || isSupport}
-              arePersonalDataSet={arePersonalDataSet}
-              isRulesetExpired={isRulesetExpired}
-            />
-          </Stack>
+          <>
+            {!canBePublished() && (
+              <Alert severity="warning" sx={{ mt: 3 }}>
+                {t('summary.publishWarningLabel')}
+              </Alert>
+            )}
+            <Stack spacing={1} sx={{ mt: 3 }} direction="row" justifyContent="end">
+              <Button
+                startIcon={<DeleteOutlineIcon />}
+                variant="text"
+                color="error"
+                onClick={handleDeleteDraft}
+                disabled={isSupport}
+              >
+                {tCommon('deleteDraft')}
+              </Button>
+              <Button
+                startIcon={<CreateIcon />}
+                variant="text"
+                onClick={handleEditDraft}
+                disabled={isSupport}
+              >
+                {tCommon('editDraft')}
+              </Button>
+              <PublishButton
+                onClick={handlePublishDraft}
+                disabled={!canBePublished() || isSupport}
+                arePersonalDataSet={arePersonalDataSet}
+                isRulesetExpired={isRulesetExpired}
+              />
+            </Stack>
+          </>
         )}
         {isDelegator && descriptor?.state === 'WAITING_FOR_APPROVAL' && (
           <Stack spacing={1} sx={{ mt: 4 }} direction="row" justifyContent="end">

src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceAttributeVersionSummary.tsx

@@ -1,17 +1,39 @@
 import React from 'react'
-import { ReadOnlyDescriptorAttributes } from '@/components/shared/ReadOnlyDescriptorAttributes'
 import { EServiceQueries } from '@/api/eservice'
 import { useParams } from '@/router'
 import { useSuspenseQuery } from '@tanstack/react-query'
+import { Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { Stack } from '@mui/system'
+import { ReadOnlyDescriptorAttributes } from '@/components/shared/ReadOnlyDescriptorAttributes'
+import { InformationContainer } from '@pagopa/interop-fe-commons'
 
 export const ProviderEServiceAttributeVersionSummary: React.FC = () => {
   const params = useParams<'PROVIDE_ESERVICE_SUMMARY'>()
+  const { t } = useTranslation('eservice', { keyPrefix: 'summary.attributeVersionSummary' })
 
   const { data: descriptor } = useSuspenseQuery(
     EServiceQueries.getDescriptorProvider(params.eserviceId, params.descriptorId)
   )
 
   if (!descriptor) return null
 
-  return <ReadOnlyDescriptorAttributes descriptorAttributes={descriptor.attributes} />
+  return (
+    <>
+      <Stack spacing={3} mb={3}>
+        <Typography fontWeight={600}>{t('thresholds.label')}</Typography>
+        <InformationContainer
+          label={t('thresholds.dailyCallsPerConsumer.label')}
+          content={t('thresholds.dailyCallsPerConsumer.value', {
+            value: descriptor.dailyCallsPerConsumer,
+          })}
+        />
+        <InformationContainer
+          label={t('thresholds.dailyCallsTotal.label')}
+          content={t('thresholds.dailyCallsTotal.value', { value: descriptor.dailyCallsTotal })}
+        />
+      </Stack>
+      <ReadOnlyDescriptorAttributes descriptorAttributes={descriptor.attributes} />
+    </>
+  )
 }