feat: [#175272158] Refactored CIE PIN screen to functional, added inf…

…ormative bottom sheet (#2612) * refactored component, missing refs typescript fix and actual bottom sheet * added the actual bottom sheet * contextual help restored and corrected bottom sheet which opens upon link tap * applied suggested changes * bottomsheet text is now in .md files * removed dev trickery * [#175272158] refactoring * removed uppercase acronym for consistency * corrected contextual help modal markdown content * restored condition Co-authored-by: Simone <[email protected]> Co-authored-by: Matteo Boschi <[email protected]> Co-authored-by: Cristiano Tofani <[email protected]>
pagopa · Jan 11, 2021 · f05a443 · f05a443
1 parent 295ee6e
commit f05a443
Show file tree

Hide file tree

Showing 8 changed files with 188 additions and 131 deletions.
diff --git a/locales/en/bottomsheets/ciePin.md b/locales/en/bottomsheets/ciePin.md
@@ -0,0 +1,5 @@
+The PIN code consists of 8 digits:  
+• the first 4 digits you received at the registry office;  
+• the last 4 digits you received at home, along with your electronic ID card.  
+
+**Please enter them following this order.**
diff --git a/locales/en/help/ciePinHelpBody.md b/locales/en/help/ciePinHelpBody.md
@@ -0,0 +1,6 @@
+The **PIN** code consists of 8 digits:  
+• the first 4 digits you received at the registry office;  
+• the last 4 digits you received at home, along with your electronic ID card. 
+
+Please enter them following this order.  
+The PUK code is needed to unlock your **PIN**, in case of 3 wrong attempts. **PUK** consists of 8 digits and it's issued along with the **PIN**.
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -495,8 +495,12 @@ authentication:
       incorrectCiePinContent1: For your security, you can try entering the card PIN no more than three times. Then you will have to unlock the card by entering the PUK.
       incorrectCiePinContent2: Keep in mind that the PIN code of your Electronic Identity Card (CIE) is composed of 8 digits. Four digits that were given to you at the registry office and another four digits that were sent to you at home, along with the card.
       alert: Are you sure you want to go back?
+      subtitleHelp: The PIN code consists of 8 digits.
+      subtitleCTA: Where can I find it?
+      bottomSheetCTA: Did you forget your PIN?
       contextualHelpTitle: Where can I find my PIN and PUK?
-      contextualHelpBody: "The **PIN** code consists of 8 digits: \n\n- the first 4 digits you received at the registry office;\n- the last 4 digits you received at home, along with your electronic ID card.\n\nPlease enter them following this order.\n\n The **PUK** code is needed to unlock your PIN, in case of 3 wrong attempts. PUK consists of 8 digits and it's issued along with the PIN.\n\n[Did you forget your PIN/PUK?](https://www.cartaidentita.interno.gov.it/richiesta-di-ristampa/)"
+      contextualHelpBody: !include help/ciePinHelpBody.md
+      contextualHelpCTA: Did you forget your PIN/PUK?
     pinTempLocked:
       header: Login with CIE
       title: Card temporarily locked
@@ -1482,6 +1486,10 @@ instabug:
     descriptionChat: "Only if you want to **reopen a past report**, to request additional information or add details, click below."
     buttonChat: Reopen a report
     assistanceWorkHours: IO assistance is available on Mon-Fri from 8.00 to 20.00; on Sat-Sun and holidays from 8.00 to 13.00
+bottomSheets:
+  ciePin:
+      title: "Where can I find my PIN?"
+      content: !include bottomsheets/ciePin.md
 faq:
   1:
     title: "What is SPID?"

diff --git a/locales/it/bottomsheets/ciePin.md b/locales/it/bottomsheets/ciePin.md
@@ -0,0 +1,5 @@
+Il codice PIN è composto da 8 cifre:  
+• le prime 4 cifre ti sono state consegnate all’anagrafe;  
+• le ultime 4 cifre ti sono state spedite a casa, insieme alla carta d’identità elettronica.  
+
+**Mettile insieme e inseriscile in quest’ordine.**
diff --git a/locales/it/help/ciePinHelpBody.md b/locales/it/help/ciePinHelpBody.md
@@ -0,0 +1,6 @@
+Il codice **PIN** è composto da 8 cifre:  
+• le prime 4 cifre ti sono state consegnate all'anagrafe;  
+• le ultime 4 cifre ti sono state spedite a casa, insieme alla carta d'identità elettronica.  
+
+Mettile insieme e inseriscile in quest'ordine.  
+Il codice PUK è necessario invece per sbloccare il **PIN** a seguito di tre tentativi errati. È composto da 8 cifre, e viene rilasciato insieme al **PIN**.
diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -505,8 +505,12 @@ authentication:
       incorrectCiePinContent1: Per la tua sicurezza puoi provare ad inserire il PIN della carta non più di tre volte. Poi dovrai sbloccare la carta inserendo il PUK.
       incorrectCiePinContent2: Ricorda che il codice PIN della tua Carta d'Identità Elettronica (CIE) è composto da 8 cifre. Quattro cifre che ti sono state consegnate all'anagrafe e altre quattro cifre che ti sono state spedite a casa, insieme alla carta.
       alert: Vuoi davvero tornare indietro?
+      subtitleHelp: Il PIN è un codice di 8 cifre.
+      subtitleCTA: Dove lo trovo?
+      bottomSheetCTA: Hai dimenticato il PIN?
       contextualHelpTitle: Dove trovo i codici PIN e PUK?
-      contextualHelpBody: "Il codice **PIN** è composto da 8 cifre: \n\n- le prime 4 cifre ti sono state consegnate all'anagrafe;\n- le ultime 4 cifre ti sono state spedite a casa, insieme alla carta d'identità elettronica. \n\nMettile insieme e inseriscile in quest'ordine.\n\n Il codice **PUK** è necessario invece per sbloccare il PIN a seguito di tre tentativi errati. È composto da 8 cifre, e viene rilasciato insieme al PIN. \n\n[Hai dimenticato il PIN/PUK?](https://www.cartaidentita.interno.gov.it/richiesta-di-ristampa/)"
+      contextualHelpBody: !include help/ciePinHelpBody.md
+      contextualHelpCTA: Hai dimenticato il PIN/PUK?
     pinTempLocked:
       header: Entra con CIE
       title: Carta temporaneamente bloccata
@@ -1512,6 +1516,10 @@ instabug:
     descriptionChat: "Solo se vuoi **riaprire una segnalazione passata**, per chiedere informazioni aggiuntive o aggiungere dettagli, clicca qui sotto."
     buttonChat: Riapri una segnalazione
     assistanceWorkHours: L'assistenza di IO è disponibile dal lunedì al venerdì dalle ore 8.00 alle 20.00; sabato, domenica e giorni festivi dalle ore 8.00 alle 13.00
+bottomSheets:
+  ciePin:
+      title: Dove trovo il mio PIN?
+      content: !include bottomsheets/ciePin.md
 faq:
   1:
     title: "Cos'è SPID?"

diff --git a/ts/components/screens/ScreenContentHeader.tsx b/ts/components/screens/ScreenContentHeader.tsx
@@ -19,6 +19,7 @@ type Props = Readonly<{
   icon?: ImageSourcePropType;
   iconFont?: IconProps;
   subtitle?: string;
+  subtitleLink?: JSX.Element;
   dark?: boolean;
   dynamicHeight?: Animated.AnimatedInterpolation;
 }>;
@@ -79,7 +80,7 @@ export class ScreenContentHeader extends React.PureComponent<Props> {
   }
 
   public render() {
-    const { subtitle, dark, icon, iconFont } = this.props;
+    const { subtitle, subtitleLink, dark, icon, iconFont } = this.props;
 
     return (
       <View style={dark && styles.darkGrayBg}>
@@ -100,6 +101,7 @@ export class ScreenContentHeader extends React.PureComponent<Props> {
           {subtitle && (
             <View style={styles.subheaderContainer}>
               <Text>{subtitle}</Text>
+              {subtitleLink}
               <View spacer={true} large={true} />
             </View>
           )}