feat: [PE-614] CGN landing page new copy (#5989)

## Short description New copy for CGN landing page ## List of changes proposed in this pull request - changed translation files - add new button ## How to test [figma](https://www.figma.com/design/yOoBGDr1MJpa0LY5lDUFSd/IOapp_CartaGiovaniNazionale?node-id=6102-36458&t=1CciY9sMGswSE3dR-4) since this change requires modifying remote data the following are needed to test: - PE-634 depends on pagopa/io-services-metadata#808 - PE-633 depends on pagopa/io-dev-api-server#399 - login into the app - go to wallet section - press add to wallet button - press Carta Giovani Nazionale - check the new copy here - press Aggiungi Carta Giovani Nazionale - check copy on loading screen - there is a new option in io-dev-api-server named "hangOnActivation" - check copy on success screen --------- Co-authored-by: Frederik Batuna <[email protected]> Co-authored-by: Alessandro <[email protected]> Co-authored-by: mariateresaventura <[email protected]>
pagopa · Sep 9, 2024 · 6b39ee0 · 6b39ee0
1 parent 81eb5f4
commit 6b39ee0
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 27 deletions.
diff --git a/locales/de/index.yml b/locales/de/index.yml
@@ -1913,7 +1913,7 @@ bonus:
   active: "Aktiv"
   failed: "Fehlgeschlagen"
   redeemed: "Eingelöst"
-  termsAndConditionFooter: "Durch Drücken von {{ctaText}} erklärst du, dass du den [Leitfaden]({{regulationLink}}) und die [Datenschutzrichtlinie]({{tosUrl}}) gelesen und verstanden hast."
+  termsAndConditionFooter: 'Premendo "{{ctaText}}" dichiari di essere in possesso dei requisiti e di aver letto e compreso la [Guida]({{regulationLink}}) e l''[Informativa Privacy]({{tosUrl}})'
   tos:
     title: "Datenschutzbestimmungen"
   cgn:
@@ -1989,7 +1989,8 @@ bonus:
         mobility: "Nachhaltige Mobilität"
         job: "Jobs und Ausbildungsplätze"
     cta:
-      activeBonus: "Die Karte beantragen"
+      activeBonus: Attiva Carta Giovani Nazionale
+      back: Non ora
       deactivateBonus: "Die Karte deaktivieren"
       goToDetail: Usa la Carta
     detail:
@@ -2037,7 +2038,7 @@ bonus:
           body: "Wir entschuldigen uns für die Unannehmlichkeiten.\nBitte versuche es später noch einmal."
       loading:
         caption: "Wir aktivieren deine Nationale Jugendkarte"
-        subCaption: "Bitte warte etwas."
+        subCaption: "Attendi qualche secondo..."
       error:
         title: "Der Dienst Nationale Jugendkarte ist derzeit nicht verfügbar."
         body: "Ci dispiace, riprova più tardi."

diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -2550,7 +2550,7 @@ bonus:
   active: Active
   failed: Failed
   redeemed: Consumed
-  termsAndConditionFooter: 'By pressing "{{ctaText}}" you declare that you have read and understood the [Guide]({{regulationLink}}) and the [Privacy Policy]({{tosUrl}})'
+  termsAndConditionFooter: 'By pressing “{{ctaText}}” you declare that you are in possession of the requirements and have read and understood the [Guide]({{regulationLink}}) and the [Privacy Policy].'
   tos:
     title: Information on the processing of personal data
     content: !include bonus/bonusVacanze/bonus_tos.md
@@ -2640,9 +2640,10 @@ bonus:
         address: Indirizzo
         allNational: Tutti i punti vendita sul territorio nazionale
     cta:
-      activeBonus: Request your Card
+      activeBonus: Activate Carta Giovani Nazionale
+      back: Not now
       deactivateBonus: Deactivate Carta Giovani Nazionale
-      goToDetail: Use Carta Giovani
+      goToDetail: Use the card
     detail:
       cta:
         buyers: Discover CGN opportunities.
@@ -2690,7 +2691,7 @@ bonus:
           body: "We apologize for the issue.\nWe invite you to retry again later."
       loading:
         caption: "We're activating your Carta Giovani Nazionale"
-        subCaption: "Please wait."
+        subCaption: "Please wait..."
       error:
         title: "The Carta Giovani Nazionale service is not available at the moment."
         body: "Sorry, please try again later."

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -2550,7 +2550,7 @@ bonus:
   active: Attivo
   failed: Fallito
   redeemed: Utilizzato
-  termsAndConditionFooter: 'Premendo "{{ctaText}}" dichiari di aver letto e compreso la [Guida]({{regulationLink}}) e l''[Informativa Privacy]({{tosUrl}})'
+  termsAndConditionFooter: 'Premendo "{{ctaText}}" dichiari di essere in possesso dei requisiti e di aver letto e compreso la [Guida]({{regulationLink}}) e l''[Informativa Privacy]({{tosUrl}})'
   tos:
     title: Informativa sul trattamento dei dati personali
     content: !include bonus/bonusVacanze/bonus_tos.md
@@ -2640,7 +2640,8 @@ bonus:
         address: Indirizzo
         allNational: Tutti i punti vendita sul territorio nazionale
     cta:
-      activeBonus: Richiedi la Carta
+      activeBonus: Attiva Carta Giovani Nazionale
+      back: Non ora
       deactivateBonus: Disattiva Carta Giovani Nazionale
       goToDetail: Usa la Carta
     detail:
@@ -2690,7 +2691,7 @@ bonus:
           body: "Ci scusiamo per il disagio.\nTi invitiamo a riprovare più tardi."
       loading:
         caption: "Stiamo attivando la tua Carta Giovani Nazionale"
-        subCaption: "Ti preghiamo di attendere."
+        subCaption: "Attendi qualche secondo..."
       error:
         title: "Il servizio Carta Giovani Nazionale in questo momento non è disponibile."
         body: "Ci dispiace, riprova più tardi."

diff --git a/ts/features/bonus/cgn/screens/activation/CgnInformationScreen.tsx b/ts/features/bonus/cgn/screens/activation/CgnInformationScreen.tsx
@@ -32,6 +32,7 @@ const CgnInformationScreen: React.FunctionComponent<Props> = (props: Props) => {
         <BonusInformationComponent
           onBack={props.onBack}
           primaryCtaText={I18n.t("bonus.cgn.cta.activeBonus")}
+          secondaryAction={{ type: "back", text: I18n.t("bonus.cgn.cta.back") }}
           bonus={props.bonus}
           onConfirm={onConfirm}
           onCancel={props.onCancel}

diff --git a/ts/features/bonus/common/components/BonusInformationComponent.tsx b/ts/features/bonus/common/components/BonusInformationComponent.tsx
@@ -43,8 +43,11 @@ type OwnProps = {
   onConfirm?: () => void;
   onCancel?: () => void;
   primaryCtaText: string;
+  secondaryAction?: SecondaryAction;
 };
 
+type SecondaryAction = { type: "back"; text: string };
+
 type Props = OwnProps &
   Pick<
     ComponentProps<typeof RNavScreenWithLargeHeader>,
@@ -125,7 +128,6 @@ const spaceBetweenActions: IOSpacer = 24;
  * A screen to explain how the bonus activation works and how it will be assigned
  */
 const BonusInformationComponent = (props: Props) => {
-  const [isMarkdownLoaded, setMarkdownLoaded] = React.useState(false);
   const { showModal, hideModal } = React.useContext(LightModalContext);
   const bonusType = props.bonus;
   const bonusTypeLocalizedContent: BonusAvailableContent =
@@ -143,14 +145,20 @@ const BonusInformationComponent = (props: Props) => {
     [safeAreaInsets]
   );
 
+  const hasSecondaryButton = props.secondaryAction !== undefined;
+
+  const buttonsSolidHeight = hasSecondaryButton
+    ? buttonSolidHeight * 2
+    : buttonSolidHeight;
+
   const safeBottomAreaHeight: number = React.useMemo(
-    () => bottomMargin + buttonSolidHeight + contentEndMargin,
-    [bottomMargin]
+    () => bottomMargin + buttonsSolidHeight + contentEndMargin,
+    [bottomMargin, buttonsSolidHeight]
   );
 
   const gradientAreaHeight: number = React.useMemo(
-    () => bottomMargin + buttonSolidHeight + gradientSafeArea,
-    [bottomMargin]
+    () => bottomMargin + buttonsSolidHeight + gradientSafeArea,
+    [bottomMargin, buttonsSolidHeight]
   );
 
   useHeaderSecondLevel({
@@ -183,10 +191,14 @@ const BonusInformationComponent = (props: Props) => {
     accessibilityLabel: props.primaryCtaText,
     onPress: props.onConfirm ?? constNull
   };
-
-  const onMarkdownLoaded = () => {
-    setMarkdownLoaded(true);
-  };
+  const backButtonProps = props.secondaryAction
+    ? {
+        label: props.secondaryAction.text,
+        fullWidth: true,
+        accessibilityLabel: props.secondaryAction.text,
+        onPress: props.onBack ?? constNull
+      }
+    : undefined;
 
   const handleModalPress = (tos: string) =>
     showModal(<TosBonusComponent tos_url={tos} onClose={hideModal} />);
@@ -245,18 +257,13 @@ const BonusInformationComponent = (props: Props) => {
         <ContentWrapper>
           <H2 accessibilityRole="header">{bonusTypeLocalizedContent.title}</H2>
           <VSpacer size={16} />
-          {isMarkdownLoaded && (
-            <Body color="bluegreyDark">
-              {bonusTypeLocalizedContent.subtitle}
-            </Body>
-          )}
-
           <Markdown
             cssStyle={CSS_STYLE}
             extraBodyHeight={extraMarkdownBodyHeight}
-            onLoadEnd={onMarkdownLoaded}
           >
-            {bonusTypeLocalizedContent.content}
+            {bonusTypeLocalizedContent.subtitle +
+              "\n" +
+              bonusTypeLocalizedContent.content}
           </Markdown>
           <VSpacer size={40} />
           {getTosFooter(
@@ -271,6 +278,7 @@ const BonusInformationComponent = (props: Props) => {
         primaryActionProps={
           props.onConfirm ? { ...requestButtonProps } : { ...cancelButtonProps }
         }
+        secondaryActionProps={backButtonProps}
         transitionAnimStyle={footerGradientOpacityTransition}
         dimensions={{
           bottomMargin,