feat: [IOPID-1550] - Download User Data new DS integration (#5923)

## Short description Revamped Download User Data screen ## List of changes proposed in this pull request - Integration of the new DS - Removal of the alert previously shown after clicking on the CTA ## Tests >[!Tip] >[![Run e2e tests](https://github.com/pagopa/io-app/actions/workflows/test-e2e.yml/badge.svg?branch=IOPID-1550-user-data)](https://github.com/pagopa/io-app/actions/workflows/test-e2e.yml) ## Screens <details> <summary>Screens: iOS & Android</summary> |iOS|Android| |-|-| |![iOS-profile-download-user-data](https://github.com/pagopa/io-app/assets/94987118/ddc99403-eae4-4d33-9d2d-1533a6d4926d)|![android-profile-download-user-data](https://github.com/pagopa/io-app/assets/94987118/6870f5ba-2a27-4a29-83c9-92af84188259)| </details> <details> <summary>A11Y</summary> |iOS|Android| |-|-| |<video src="https://github.com/pagopa/io-app/assets/94987118/9cc339e3-ab4c-4137-a24b-97e0144f5a86" />|<video src="https://github.com/pagopa/io-app/assets/94987118/a9ff45f4-3556-4b65-9139-f506f6ae2974" />| </details> ## How to test Navigate into `Profile -> Privacy Policy and Terms of Service -> Access your data` --------- Co-authored-by: Fabio Bombardi <[email protected]> Co-authored-by: mariateresaventura <[email protected]>
pagopa · Jul 8, 2024 · 69c798e · 69c798e
1 parent 03a24e6
commit 69c798e
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 163 deletions.
diff --git a/locales/de/index.yml b/locales/de/index.yml
@@ -338,11 +338,8 @@ profile:
           answer_3: "Ich habe die App nie benutzt"
           answer_4: "Keiner der oben genannten Punkte"
       exportData:
-        cta: "Kopie deiner Daten anfordern"
         title: "Zugriff auf deine Daten"
         description: "Du erhältst eine Kopie der mit deinem IO-Profil verbundenen Daten"
-        info:
-          title: "Du kannst deine IO-Profilinformationen jederzeit herunterladen."
         alert:
           requestTitle: "Möchtest du wirklich all deine Daten exportieren?"
           oldRequest: "Wir bearbeiten bereits eine Anfrage zum Datenexport"

diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -376,12 +376,25 @@ profile:
           body: "We've taken over your request and we will delete your account within 30 days. You can re-subscribe to the IO App at any time with SPID or CIE."
           cta: Close
       exportData:
-        cta: Request a copy of your data
+        cta: Ask for a copy of the data
         title: Access your data
+        subtitle: You can download your IO profile data at any time.
         description: Receive a copy of the data associated with your IO profile
-        info:
-          title: You can download your IO profile information at any time.
-          body: !include profile/profile_download_data.md
+        detail:
+          bulletList:
+            title: "Your data are:"
+            item1: your tax code;
+            item2: your email address and, if applicable, confirmation of its validation;
+            item3: the text of the Messages you received;
+            item4: your notification preferences.
+          paragraph1: The information will be downloaded in YAML format, a standard format for exchanging data between different applications.
+          paragraph2: 
+            part1: "You will get "
+            part2: "a message on IO "
+            part3: with a link and password that lasts 15 days. 
+          paragraph3: 
+            part1: For more information see the.
+            link:  IO Privacy Policy.
         alert:
           requestTitle: Are you sure you want to export all your data?
           oldRequest: We are already proceeding to export all your data

diff --git a/locales/en/profile/profile_download_data.md b/locales/en/profile/profile_download_data.md
diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -376,12 +376,25 @@ profile:
           body: Il tuo profilo verrà eliminato entro 30 giorni. Puoi tornare nuovamente su IO in qualsiasi momento entrando con SPID o CIE.
           cta: Chiudi
       exportData:
-        cta: Richiedi copia dei tuoi dati
+        cta: Richiedi una copia dei dati
         title: Accedi ai tuoi dati
+        subtitle: Puoi scaricare i dati principali del tuo profilo IO in qualsiasi momento.
         description: Ricevi una copia dei dati associati al tuo profilo IO
-        info:
-          title: Puoi scaricare le informazioni relative al tuo profilo IO in qualsiasi momento.
-          body: !include profile/profile_download_data.md
+        detail:
+          bulletList:
+            title: "I dati sono:"
+            item1: il tuo codice fiscale;
+            item2: l’indirizzo email da te indicato e, nel caso, la conferma della sua validazione;
+            item3: il testo dei Messaggi che hai ricevuto;
+            item4: le tue preferenze di notifica.
+          paragraph1: Le informazioni saranno scaricate in formato YAML, un formato standard che in informatica consente lo scambio di dati fra applicazioni diverse.
+          paragraph2: 
+            part1: "Riceverai un "
+            part2: "messaggio su IO "
+            part3: in cui sono presenti un link e una password validi per 15 giorni. 
+          paragraph3: 
+            part1: Per maggiori informazioni consulta l’
+            link: Informativa privacy di IO.
         alert:
           requestTitle: Vuoi davvero esportare tutti i tuoi dati?
           oldRequest: Abbiamo già preso in carico una richiesta di esportazione dei dati.

diff --git a/locales/it/profile/profile_download_data.md b/locales/it/profile/profile_download_data.md
diff --git a/ts/components/BulletList.tsx b/ts/components/BulletList.tsx
@@ -1,14 +1,24 @@
 import { View } from "react-native";
 import React, { ComponentProps, memo, useCallback } from "react";
-import { Body, IOSpacer, VSpacer } from "@pagopa/io-app-design-system";
+import {
+  Body,
+  HSpacer,
+  IOSpacer,
+  IOStyles,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import {
+  BodyProps,
+  ComposedBodyFromArray
+} from "./core/typography/ComposedBodyFromArray";
 
 const BULLET_ITEM = "\u2022";
 
-type ListItem = {
+export type BulletListItem = {
   /**
    * The text of the list item.
    */
-  value: string;
+  value: string | Array<BodyProps>;
   /**
    * The id used as key, it must be unique.
    */
@@ -20,7 +30,7 @@ type ListItem = {
   /**
    * Nested list.
    */
-  list?: Array<Omit<ListItem, "list">>;
+  list?: Array<Omit<BulletListItem, "list">>;
 };
 
 type Props = {
@@ -31,7 +41,7 @@ type Props = {
   /**
    * The list to display bullet items.
    */
-  list: Array<ListItem>;
+  list: Array<BulletListItem>;
   /**
    * Title extra props.
    */
@@ -43,10 +53,10 @@ type Props = {
 };
 
 /**
- * This component renders a bullet list. It supports two levels of nesting, so the first level `ListItem` can contain a `list` prop.
+ * This component renders a bullet list. It supports two levels of nesting, so the first level `BulletListItem` can contain a `list` prop.
  *
  * @param {string} title The bullet list title.
- * @param {Array<ListItem>} list The array used to render the bullet list.
+ * @param {Array<BulletListItem>} list The array used to render the bullet list.
  * @param {ComponentProps<typeof Body>} [titleProps] Used to customize title.
  * @param {IOSpacer} [spacing] Used to define list item indentation and space between title and list.
  * @returns {JSX.Element} The rendered component.
@@ -71,16 +81,23 @@ type Props = {
 export const BulletList = memo(
   ({ title, list, spacing = 8, titleProps = {} }: Props) => {
     /**
-     * @param {Array<ListItem>} [list] The list to iterate.
+     * @param {Array<BulletListItem>} [list] The list to iterate.
      * @param {number} [count=0] The number a recursive calls, used to stop the cycle when nesting level is equal to two.
      * @returns {JSX.Element} The rendered list.
      */
     const renderListItems = useCallback(
-      (list?: Array<ListItem>, count: number = 0) =>
+      (list?: Array<BulletListItem>, count: number = 0) =>
         list?.map(({ id, value, textProps = {}, ...rest }) => (
-          <View key={id} style={{ paddingLeft: spacing }} {...textProps}>
-            <Body>
-              {BULLET_ITEM} {value}
+          <View key={id} style={IOStyles.row}>
+            <HSpacer size={spacing} />
+            <Body>{BULLET_ITEM}</Body>
+            <HSpacer size={spacing} />
+            <Body {...textProps}>
+              {Array.isArray(value) ? (
+                <ComposedBodyFromArray body={value} />
+              ) : (
+                value
+              )}
             </Body>
             {"list" in rest &&
               count === 0 &&
@@ -94,7 +111,9 @@ export const BulletList = memo(
       <View>
         <Body {...titleProps}>{title}</Body>
         <VSpacer size={spacing} />
-        {renderListItems(list)}
+        <View accessible={true} accessibilityRole="list">
+          {renderListItems(list)}
+        </View>
       </View>
     );
   }