PIN-7318: Added NotificationConfig page and its components

public/env.js

@@ -25,6 +25,7 @@ window.pagopa_env = {
     'https://selfcare.dev.interop.pagopa.it/m2m/v2-interface-specification.yaml',
   SIGNALHUB_PERSONAL_DATA_PROCESS_URL: 'http://localhost',
   ERROR_DATA_DURATION_TIME: '90000',
+  FEATURE_FLAG_NOTIFICATION_CONFIG: 'true',
   FEATURE_FLAG_ESERVICE_PERSONAL_DATA: 'true',
   FEATURE_FLAG_USE_SIGNED_DOCUMENT: 'false',
 }

setupTests.ts

@@ -2,6 +2,7 @@ import { afterEach, vi } from 'vitest'
 import { cleanup } from '@testing-library/react'
 // extends Vitest's expect method with methods from react-testing-library
 import '@testing-library/jest-dom/vitest'
+import { FEATURE_FLAG_NOTIFICATION_CONFIG } from '@/config/env'
 
 const localhost = 'http://localhost:3000/0.0'
 export const testConfigs = {
@@ -30,6 +31,7 @@ export const testConfigs = {
   API_GATEWAY_V2_INTERFACE_URL:
     'https://selfcare.dev.interop.pagopa.it/m2m/v2-interface-specification.yaml',
   SIGNALHUB_PERSONAL_DATA_PROCESS_URL: 'http://localhost',
+  FEATURE_FLAG_NOTIFICATION_CONFIG: 'true',
   FEATURE_FLAG_ESERVICE_PERSONAL_DATA: 'true',
   FEATURE_FLAG_USE_SIGNED_DOCUMENT: 'true',
 }

src/api/api.generatedTypes.ts

@@ -427,6 +427,8 @@ export interface EServiceTemplateRiskAnalysis {
   tenantKind: TenantKind
   /** @format date-time */
   createdAt: string
+  /** @format date-time */
+  rulesetExpiration?: string
 }
 
 export interface ProducerEServiceDescriptor {
@@ -627,6 +629,7 @@ export interface CatalogEService {
   activeDescriptor?: CompactDescriptor
   /** Indicates if there are unread notifications for this e-service */
   hasUnreadNotifications?: boolean
+  personalData?: boolean
 }
 
 export type ClientKind = 'API' | 'CONSUMER'
@@ -2347,6 +2350,8 @@ export interface NotificationConfig {
   delegationSubmittedRevokedToDelegate: boolean
   certifiedVerifiedAttributeAssignedRevokedToAssignee: boolean
   clientKeyAndProducerKeychainKeyAddedDeletedToClientUsers: boolean
+  purposeQuotaAdjustmentRequestToProducer: boolean
+  purposeOverQuotaStateToConsumer: boolean
 }
 
 export interface TenantNotificationConfig {
@@ -3238,6 +3243,7 @@ export interface IsEServiceNameAvailableParams {
 export interface GetNotificationsParams {
   /** Query to filter notifications */
   q?: string
+  unread?: boolean
   /** Category to filter notifications */
   category?: 'Subscribers' | 'Providers' | 'Delegations' | 'AttributesAndKeys'
   /**
@@ -8519,6 +8525,7 @@ export namespace InAppNotifications {
     export type RequestQuery = {
       /** Query to filter notifications */
       q?: string
+      unread?: boolean
       /** Category to filter notifications */
       category?: 'Subscribers' | 'Providers' | 'Delegations' | 'AttributesAndKeys'
       /**

src/api/auth/auth.utils.ts

@@ -11,13 +11,14 @@
 export const parseJwt = memoize((token: string | null | undefined) => {
   const jwt = token ? jwtDecode<JwtUser>(token) : undefined
   const currentRoles = jwt ? jwt.organization.roles.map((r) => r.role) : []
-  const isAdmin = currentRoles.length === 1 && currentRoles[0] === 'admin'
+  const isAdmin = currentRoles.length === 1 && currentRoles[0] === ''
   const isOperatorAPI = currentRoles.includes('api')
   const isOperatorSecurity = currentRoles.includes('security')
   const isSupport = currentRoles.includes('support')
   const isOrganizationAllowedToProduce = !!(
     jwt?.externalId && PRODUCER_ALLOWED_ORIGINS.includes(jwt.externalId.origin)
   )
+  const userEmail = jwt?.email
 
   return {
     jwt,
@@ -27,5 +28,6 @@
     isOperatorSecurity,
     isSupport,
     isOrganizationAllowedToProduce,
+    userEmail,
   }
 })

src/api/notification/index.ts

@@ -0,0 +1,3 @@
+export * from './notification.services'
+export * from './notification.mutations'
+export * from './notification.queries'

src/api/notification/notification.mutations.ts

@@ -0,0 +1,26 @@
+import { useMutation } from '@tanstack/react-query'
+import { NotificationServices } from './index'
+import { useTranslation } from 'react-i18next'
+function useUpdateNotificationUserConfigs() {
+  const { t } = useTranslation('notification', {
+    keyPrefix: 'configurationPage.outcome',
+  })
+  return useMutation({
+    mutationFn: NotificationServices.updateUserNotificationConfigs,
+    meta: {
+      successToastLabel: t('success'),
+      errorToastLabel: t('error'),
+    },
+  })
+}
+
+function useUpdateNotificationTenantConfigs() {
+  return useMutation({
+    mutationFn: NotificationServices.updateTenantNotificationConfigs,
+  })
+}
+
+export const NotificationMutations = {
+  useUpdateNotificationUserConfigs,
+  useUpdateNotificationTenantConfigs,
+}

src/api/notification/notification.queries.ts

@@ -0,0 +1,21 @@
+import { queryOptions } from '@tanstack/react-query'
+import { NotificationServices } from './notification.services'
+
+function getUserNotificationConfigs() {
+  return queryOptions({
+    queryKey: ['getUserNotificationConfiguration'],
+    queryFn: () => NotificationServices.getUserNotificationConfigs(),
+  })
+}
+
+function getTenantNotificationConfigs() {
+  return queryOptions({
+    queryKey: ['getTenantNotificationConfiguration'],
+    queryFn: () => NotificationServices.getTenantNotificationConfigs(),
+  })
+}
+
+export const NotificationQueries = {
+  getUserNotificationConfigs,
+  getTenantNotificationConfigs,
+}

src/api/notification/notification.services.ts

@@ -0,0 +1,42 @@
+import axiosInstance from '@/config/axios'
+import { BACKEND_FOR_FRONTEND_URL } from '@/config/env'
+import type {
+  TenantNotificationConfig,
+  TenantNotificationConfigUpdateSeed,
+  UserNotificationConfig,
+  UserNotificationConfigUpdateSeed,
+} from '../api.generatedTypes'
+
+async function updateUserNotificationConfigs(payload: UserNotificationConfigUpdateSeed) {
+  return await axiosInstance.post<void>(
+    `${BACKEND_FOR_FRONTEND_URL}/userNotificationConfigs`,
+    payload
+  )
+}
+
+async function updateTenantNotificationConfigs(payload: TenantNotificationConfigUpdateSeed) {
+  return await axiosInstance.post<void>(
+    `${BACKEND_FOR_FRONTEND_URL}/tenantNotificationConfigs`,
+    payload
+  )
+}
+
+async function getUserNotificationConfigs() {
+  const response = await axiosInstance.get<UserNotificationConfig>(
+    `${BACKEND_FOR_FRONTEND_URL}/userNotificationConfigs`
+  )
+
+  return response.data
+}
+async function getTenantNotificationConfigs() {
+  const response = await axiosInstance.get<TenantNotificationConfig>(
+    `${BACKEND_FOR_FRONTEND_URL}/tenantNotificationConfigs`
+  )
+  return response.data
+}
+export const NotificationServices = {
+  updateUserNotificationConfigs,
+  updateTenantNotificationConfigs,
+  getUserNotificationConfigs,
+  getTenantNotificationConfigs,
+}

src/components/shared/react-hook-form-inputs/RHFSwitch.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next'
 import { getAriaAccessibilityInputProps, mapValidationErrorMessages } from '@/utils/form.utils'
 
 export type RHFSwitchProps = Omit<MUISwitchProps, 'checked' | 'onChange'> & {
-  label: string
+  label: string | React.ReactNode
   infoLabel?: string
   name: string
   rules?: ControllerProps['rules']

src/components/shared/react-hook-form-inputs/SwitchLabelDescription.tsx

@@ -0,0 +1,23 @@
+import { Typography } from '@mui/material'
+import { Box } from '@mui/system'
+
+type SwitchLabelDescriptionProps = {
+  label: string
+  description: string
+}
+
+export const SwitchLabelDescription: React.FC<SwitchLabelDescriptionProps> = ({
+  label,
+  description,
+}) => {
+  return (
+    <Box component="div" display="flex" flexDirection="column">
+      <Typography component="p" variant="body2" fontWeight={400}>
+        {label}
+      </Typography>
+      <Typography component="p" color="text.secondary" variant="caption">
+        {description}
+      </Typography>
+    </Box>
+  )
+}

src/components/shared/react-hook-form-inputs/index.ts

@@ -5,4 +5,5 @@ export * from './RHFRadioGroup'
 export * from './RHFCheckboxGroup'
 export * from './RHFSingleFileInput'
 export * from './RHFCheckbox'
+export * from './SwitchLabelDescription'
 export * from './RHFSelect'

src/components/sidebar/__test__/useGetSidebarItems.test.tsx

@@ -15,6 +15,6 @@ describe('useGetSidebarItems', () => {
     mockUseGetActiveUserParty()
     const { result } = renderHook(() => useGetSidebarItems())
 
-    expect(result.current.length).toBe(6)
+    expect(result.current.length).toBe(7)
   })
 })

src/components/sidebar/useGetSidebarItems.tsx

@@ -8,7 +8,9 @@ import type { RouteKey } from '@/router'
 import { routes } from '@/router'
 import DnsIcon from '@mui/icons-material/Dns'
 import { ConsumerIcon, ProviderIcon, CatalogIcon, DeveloperToolIcon, MyTenantIcon } from '@/icons'
+import NotificationsIcon from '@mui/icons-material/Notifications'
 import { useTranslation } from 'react-i18next'
+import { FEATURE_FLAG_NOTIFICATION_CONFIG } from '@/config/env'
 
 export function useGetSidebarItems(): SidebarRoutes {
   const { t } = useTranslation('sidebar', { keyPrefix: 'menuItem' })
@@ -23,7 +25,14 @@ export function useGetSidebarItems(): SidebarRoutes {
         icon: CatalogIcon,
         label: t('eserviceCatalog'),
         children: [],
+      },
+      {
+        icon: NotificationsIcon,
+        rootRouteKey: 'NOTIFICATIONS',
+        label: 'Notifiche ',
+        children: [],
         divider: true,
+        hide: !FEATURE_FLAG_NOTIFICATION_CONFIG,
       },
       {
         showNotification: false,
@@ -89,7 +98,7 @@ export function useGetSidebarItems(): SidebarRoutes {
       {
         icon: DeveloperToolIcon,
         rootRouteKey: 'DEVELOPER_TOOLS',
-        label: 'Tool per lo sviluppo ',
+        label: 'Tool per lo sviluppo',
         children: [],
       },
     ]

src/config/env.ts

@@ -25,6 +25,7 @@ const GeneralConfigs = z.object({
 const FeatureFlagConfigs = z.object({
   FEATURE_FLAG_ADMIN_CLIENT: z.enum(['true', 'false']),
   FEATURE_FLAG_AGREEMENT_APPROVAL_POLICY_UPDATE: z.enum(['true', 'false']),
+  FEATURE_FLAG_NOTIFICATION_CONFIG: z.enum(['true', 'false']),
   FEATURE_FLAG_ESERVICE_PERSONAL_DATA: z
     .enum(['true', 'false'])
     .default('false')
@@ -111,6 +112,7 @@ export const {
   API_GATEWAY_V1_INTERFACE_URL,
   API_GATEWAY_V2_INTERFACE_URL,
   ERROR_DATA_DURATION_TIME,
+  FEATURE_FLAG_NOTIFICATION_CONFIG,
   FEATURE_FLAG_ESERVICE_PERSONAL_DATA,
   FEATURE_FLAG_USE_SIGNED_DOCUMENT,
 } = parseConfigs()

src/config/react-i18next.ts

@@ -21,6 +21,7 @@ import assistanceEnNs from '@/static/locales/en/assistance.json'
 import keychainEnNs from '@/static/locales/en/keychain.json'
 import eserviceTemplateEnNs from '@/static/locales/en/eserviceTemplate.json'
 import developerToolsEnNs from '@/static/locales/en/developer-tools.json'
+import notificationEnNs from '@/static/locales/en/notification.json'
 import purposeTemplateEnNs from '@/static/locales/en/purposeTemplate.json'
 
 import pagesItNs from '@/static/locales/it/pages.json'
@@ -43,6 +44,7 @@ import keychainItNs from '@/static/locales/it/keychain.json'
 import eserviceTemplateItNs from '@/static/locales/it/eserviceTemplate.json'
 import developerToolsItNs from '@/static/locales/it/developer-tools.json'
 import sidebarNs from '@/static/locales/it/sidebar.json'
+import notificationItNs from '@/static/locales/it/notification.json'
 import purposeTemplateItNs from '@/static/locales/it/purposeTemplate.json'
 
 i18n.use(initReactI18next).init({
@@ -74,6 +76,7 @@ i18n.use(initReactI18next).init({
       eserviceTemplate: eserviceTemplateItNs,
       'developer-tools': developerToolsItNs,
       sidebar: sidebarNs,
+      notification: notificationItNs,
       purposeTemplate: purposeTemplateItNs,
     },
     en: {
@@ -97,6 +100,7 @@ i18n.use(initReactI18next).init({
       eserviceTemplate: eserviceTemplateEnNs,
       'developer-tools': developerToolsEnNs,
       sidebar: sidebarNs,
+      notification: notificationEnNs,
       purposeTemplate: purposeTemplateEnNs,
     },
   },

src/icons/MessageIcon/MessageIcon.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { SvgIcon } from '@mui/material'
+
+export const MessageIcon = () => (
+  <SvgIcon>
+    <path
+      d="M20 2H4C2.9 2 2.01 2.9 2.01 4L2 22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM18 14H6V12H18V14ZM18 11H6V9H18V11ZM18 8H6V6H18V8Z"
+      fill="#17324D"
+    />
+  </SvgIcon>
+)
+
+MessageIcon.muiName = 'MessageIcon'

src/icons/MessageIcon/index.ts

@@ -0,0 +1 @@
+export * from './MessageIcon'

src/icons/index.ts

@@ -3,3 +3,4 @@ export * from './ProviderIcon'
 export * from './MyTenantIcon'
 export * from './CatalogIcon'
 export * from './DeveloperToolIcon'
+export * from './MessageIcon'