From db030edbb24d1127a5035456ffe516381dd8b72b Mon Sep 17 00:00:00 2001
From: svariant <samuele.varianti@nttdata.com>
Date: Mon, 24 Jun 2024 14:37:08 +0200
Subject: [PATCH] [VAS-418] feat: Align tos page with design

---
 src/components/TOS/TOSWall.tsx | 61 ++++++++++++++++------------------
 src/locale/it.json             |  5 ++-
 2 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/src/components/TOS/TOSWall.tsx b/src/components/TOS/TOSWall.tsx
index 6cc80a308..e5482cfaf 100644
--- a/src/components/TOS/TOSWall.tsx
+++ b/src/components/TOS/TOSWall.tsx
@@ -1,40 +1,37 @@
-import {Trans, useTranslation} from 'react-i18next';
-import {Box, Typography, Link} from '@mui/material';
-import {TOSAgreement} from '@pagopa/mui-italia';
-import {Link as RouterLink} from 'react-router-dom';
+import { Trans, useTranslation } from 'react-i18next';
+import { Box, Link } from '@mui/material';
+import { TOSAgreement } from '@pagopa/mui-italia';
+import { Link as RouterLink } from 'react-router-dom';
 
 interface TOSWallProps {
-    acceptTOS: () => void;
-    detailRoute: string;
+  acceptTOS: () => void;
+  detailRoute: string;
 }
 
-const TOSWall = ({acceptTOS, detailRoute}: TOSWallProps) => {
-    const {t} = useTranslation();
-    return (
-        <Box width="100%" px={2}>
-            <TOSAgreement
-                productName={t('tos.title')}
-                description={t('tos.description')}
-                onConfirm={() => acceptTOS()}
+const TOSWall = ({ acceptTOS, detailRoute }: TOSWallProps) => {
+  const { t } = useTranslation();
+  return (
+    <Box width="100%" px={2}>
+      <TOSAgreement
+        productName={t('tos.title')}
+        description={
+          <Trans i18nKey="tos.termsDescription">
+            {t('tos.termsDescription')}
+            <Link
+              component={RouterLink}
+              to={{
+                pathname: detailRoute,
+              }}
+              sx={{ color: 'primary.main', cursor: 'pointer', textDecoration: 'none' }}
             >
-                <Typography sx={{px: 8}} color="text.secondary">
-                    <Trans i18nKey="tos.termsDescription">
-                        Entrando dichiari di aver letto e accettato l’Informativa Privacy e i Termini e
-                        condizioni d’uso di PagoPA
-                        <Link
-                            component={RouterLink}
-                            to={{
-                                pathname: detailRoute,
-                            }}
-                            sx={{color: 'primary.main', cursor: 'pointer', textDecoration: 'none'}}
-                        >
-                            <strong> Accedi</strong>
-                        </Link>
-                    </Trans>
-                </Typography>
-            </TOSAgreement>
-        </Box>
-    );
+              <strong> Accedi</strong>
+            </Link>
+          </Trans>
+        }
+        onConfirm={() => acceptTOS()}
+      ></TOSAgreement>
+    </Box>
+  );
 };
 
 export default TOSWall;
diff --git a/src/locale/it.json b/src/locale/it.json
index 5214c632f..85fe9b55d 100644
--- a/src/locale/it.json
+++ b/src/locale/it.json
@@ -1490,9 +1490,8 @@
     "backButton": "Esci"
   },
   "tos": {
-    "title": "pagoPA",
-    "description": "Prima di entrare, leggi e accetta l’Informativa Privacy e i Termini e condizioni d’uso. Potrai consultarli di nuovo quando vuoi: li trovi sempre in fondo alla pagina.",
-    "termsDescription": "Entrando dichiari di aver letto e accettato l’<1>Informativa Privacy</1> e i <1>Termini e condizioni d’uso</1> di PagoPA"
+    "title": "Pagamenti pagoPA",
+    "termsDescription": "Accedendo, accetti i <1>Termini e condizioni d’uso</1> del servizio e confermi di avere letto l’<1>Informativa Privacy</1>. "
   },
   "general": {
     "noDataLabel": "Nessun risultato",