From 76b035d1e3ca71bcb64b8aab92d002566457277b Mon Sep 17 00:00:00 2001
From: Alessandro Izzo <alessandro.izzo@pagopa.it>
Date: Tue, 30 Jan 2024 17:12:14 +0100
Subject: [PATCH] chore: Adapted the FooterWithButtons into CGN screens

---
 package.json                                  |   2 +-
 .../bonus/cgn/screens/CgnDetailScreen.tsx     | 154 +++++++++---------
 .../CgnActivationCompletedScreen.tsx          |  32 ++--
 .../CgnActivationIneligibleScreen.tsx         |  30 ++--
 .../activation/CgnActivationPendingScreen.tsx |  30 ++--
 .../activation/CgnAlreadyActiveScreen.tsx     |  32 ++--
 .../components/BonusInformationComponent.tsx  |  85 +++++-----
 yarn.lock                                     |   8 +-
 8 files changed, 174 insertions(+), 199 deletions(-)

diff --git a/package.json b/package.json
index 722dce13567..f63568de157 100644
--- a/package.json
+++ b/package.json
@@ -114,7 +114,7 @@
   "dependencies": {
     "@babel/plugin-transform-regenerator": "^7.18.6",
     "@gorhom/bottom-sheet": "^4.1.5",
-    "@pagopa/io-app-design-system": "1.20.0",
+    "@pagopa/io-app-design-system": "1.21.0",
     "@pagopa/io-pagopa-commons": "^3.1.0",
     "@pagopa/io-react-native-crypto": "^0.2.1",
     "@pagopa/io-react-native-login-utils": "^0.2.2",
diff --git a/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx b/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx
index bccc93729a6..f3708257c40 100644
--- a/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx
+++ b/ts/features/bonus/cgn/screens/CgnDetailScreen.tsx
@@ -114,91 +114,85 @@ const CgnDetailScreen = (props: Props): React.ReactElement => {
         titleColor={"white"}
         contextualHelp={emptyContextualHelp}
       >
-        <SafeAreaView style={IOStyles.flex}>
-          <FocusAwareStatusBar
-            backgroundColor={HEADER_BACKGROUND_COLOR}
-            barStyle={"light-content"}
+        <FocusAwareStatusBar
+          backgroundColor={HEADER_BACKGROUND_COLOR}
+          barStyle={"light-content"}
+        />
+        {pot.isError(props.potCgnDetails) ? ( // subText is a blank space to avoid default value when it is undefined
+          <GenericErrorComponent
+            subText={" "}
+            onRetry={loadCGN}
+            onCancel={props.goBack}
           />
-          {pot.isError(props.potCgnDetails) ? ( // subText is a blank space to avoid default value when it is undefined
-            <GenericErrorComponent
-              subText={" "}
-              onRetry={loadCGN}
-              onCancel={props.goBack}
-            />
-          ) : (
-            <>
-              <ScrollView
-                style={IOStyles.flex}
-                bounces={false}
-                testID={"CGNCardDetailsScrollView"}
+        ) : (
+          <>
+            <ScrollView
+              style={IOStyles.flex}
+              bounces={false}
+              testID={"CGNCardDetailsScrollView"}
+            >
+              {/* cgn gradient */}
+              <LinearGradient
+                colors={[HEADER_BACKGROUND_COLOR, GRADIENT_END_COLOR]}
               >
-                {/* cgn gradient */}
-                <LinearGradient
-                  colors={[HEADER_BACKGROUND_COLOR, GRADIENT_END_COLOR]}
-                >
-                  <View
-                    style={[IOStyles.horizontalContentPadding, { height: 149 }]}
-                  />
-                </LinearGradient>
-                {props.cgnDetails && (
-                  <CgnCardComponent
-                    cgnDetails={props.cgnDetails}
-                    onCardLoadEnd={onCardLoadEnd}
-                  />
-                )}
                 <View
-                  style={[
-                    IOStyles.flex,
-                    IOStyles.horizontalContentPadding,
-                    { paddingTop: customVariables.contentPadding }
-                  ]}
-                >
-                  <VSpacer size={48} />
+                  style={[IOStyles.horizontalContentPadding, { height: 149 }]}
+                />
+              </LinearGradient>
+              {props.cgnDetails && (
+                <CgnCardComponent
+                  cgnDetails={props.cgnDetails}
+                  onCardLoadEnd={onCardLoadEnd}
+                />
+              )}
+              <View
+                style={[
+                  IOStyles.flex,
+                  IOStyles.horizontalContentPadding,
+                  { paddingTop: customVariables.contentPadding }
+                ]}
+              >
+                <VSpacer size={48} />
 
-                  {/* Ownership block rendering owner's fiscal code */}
-                  <CgnOwnershipInformation />
-                  <ItemSeparatorComponent noPadded />
-                  <VSpacer size={16} />
-                  {props.cgnDetails && (
-                    // Renders status information including activation and expiring date and a badge that represents the CGN status
-                    // ACTIVATED - EXPIRED - REVOKED
-                    <CgnStatusDetail cgnDetail={props.cgnDetails} />
-                  )}
-                  {canDisplayEycaDetails && (
-                    <>
-                      <ItemSeparatorComponent noPadded />
-                      <VSpacer size={16} />
-                      <EycaDetailComponent />
-                    </>
-                  )}
-                  <VSpacer size={24} />
-                  <ItemSeparatorComponent noPadded />
-                  <CgnUnsubscribe />
-                  <VSpacer size={40} />
-                </View>
-              </ScrollView>
-              <SectionStatusComponent sectionKey={"cgn"} />
-              {props.isCgnEnabled &&
-                props.cgnDetails?.status === StatusEnum.ACTIVATED && (
-                  <View>
-                    <FooterWithButtons
-                      type="SingleButton"
-                      primary={{
-                        type: "Solid",
-                        buttonProps: {
-                          label: I18n.t("bonus.cgn.detail.cta.buyers"),
-                          accessibilityLabel: I18n.t(
-                            "bonus.cgn.detail.cta.buyers"
-                          ),
-                          onPress: onPressShowCgnDiscounts
-                        }
-                      }}
-                    />
-                  </View>
+                {/* Ownership block rendering owner's fiscal code */}
+                <CgnOwnershipInformation />
+                <ItemSeparatorComponent noPadded />
+                <VSpacer size={16} />
+                {props.cgnDetails && (
+                  // Renders status information including activation and expiring date and a badge that represents the CGN status
+                  // ACTIVATED - EXPIRED - REVOKED
+                  <CgnStatusDetail cgnDetail={props.cgnDetails} />
+                )}
+                {canDisplayEycaDetails && (
+                  <>
+                    <ItemSeparatorComponent noPadded />
+                    <VSpacer size={16} />
+                    <EycaDetailComponent />
+                  </>
                 )}
-            </>
-          )}
-        </SafeAreaView>
+                <VSpacer size={24} />
+                <ItemSeparatorComponent noPadded />
+                <CgnUnsubscribe />
+                <VSpacer size={40} />
+              </View>
+            </ScrollView>
+            <SectionStatusComponent sectionKey={"cgn"} />
+            {props.isCgnEnabled &&
+              props.cgnDetails?.status === StatusEnum.ACTIVATED && (
+                <FooterWithButtons
+                  type="SingleButton"
+                  primary={{
+                    type: "Solid",
+                    buttonProps: {
+                      label: I18n.t("bonus.cgn.detail.cta.buyers"),
+                      accessibilityLabel: I18n.t("bonus.cgn.detail.cta.buyers"),
+                      onPress: onPressShowCgnDiscounts
+                    }
+                  }}
+                />
+              )}
+          </>
+        )}
       </BaseScreenComponent>
     </LoadingSpinnerOverlay>
   );
diff --git a/ts/features/bonus/cgn/screens/activation/CgnActivationCompletedScreen.tsx b/ts/features/bonus/cgn/screens/activation/CgnActivationCompletedScreen.tsx
index 33b2b6d96c8..0900632efcb 100644
--- a/ts/features/bonus/cgn/screens/activation/CgnActivationCompletedScreen.tsx
+++ b/ts/features/bonus/cgn/screens/activation/CgnActivationCompletedScreen.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { connect } from "react-redux";
-import { SafeAreaView, View } from "react-native";
+import { View } from "react-native";
 import { FooterWithButtons } from "@pagopa/io-app-design-system";
 
 import { GlobalState } from "../../../../../store/reducers/types";
@@ -20,27 +20,25 @@ type Props = ReturnType<typeof mapStateToProps> &
  * and it has been correctly activated
  */
 const CgnActivationCompletedScreen = (props: Props): React.ReactElement => (
-  <SafeAreaView style={IOStyles.flex}>
+  <View style={IOStyles.flex}>
     <InfoScreenComponent
       image={renderInfoRasterImage(paymentCompleted)}
       title={I18n.t("bonus.cgn.activation.success.title")}
       body={I18n.t("bonus.cgn.activation.success.body")}
     />
-    <View>
-      <FooterWithButtons
-        type="SingleButton"
-        primary={{
-          type: "Solid",
-          buttonProps: {
-            label: I18n.t("bonus.cgn.cta.goToDetail"),
-            onPress: props.onConfirm,
-            accessibilityLabel: I18n.t("bonus.cgn.cta.goToDetail"),
-            testID: "cgnConfirmButtonTestId"
-          }
-        }}
-      />
-    </View>
-  </SafeAreaView>
+    <FooterWithButtons
+      type="SingleButton"
+      primary={{
+        type: "Solid",
+        buttonProps: {
+          label: I18n.t("bonus.cgn.cta.goToDetail"),
+          onPress: props.onConfirm,
+          accessibilityLabel: I18n.t("bonus.cgn.cta.goToDetail"),
+          testID: "cgnConfirmButtonTestId"
+        }
+      }}
+    />
+  </View>
 );
 
 const mapStateToProps = (_: GlobalState) => ({});
diff --git a/ts/features/bonus/cgn/screens/activation/CgnActivationIneligibleScreen.tsx b/ts/features/bonus/cgn/screens/activation/CgnActivationIneligibleScreen.tsx
index e8a90eedf46..1bc893032a8 100644
--- a/ts/features/bonus/cgn/screens/activation/CgnActivationIneligibleScreen.tsx
+++ b/ts/features/bonus/cgn/screens/activation/CgnActivationIneligibleScreen.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { connect } from "react-redux";
-import { SafeAreaView, View } from "react-native";
+import { View } from "react-native";
 import { FooterWithButtons } from "@pagopa/io-app-design-system";
 import { GlobalState } from "../../../../../store/reducers/types";
 import { Dispatch } from "../../../../../store/actions/types";
@@ -19,26 +19,24 @@ type Props = ReturnType<typeof mapStateToProps> &
  * but is not eligible for its activation
  */
 const CgnActivationIneligibleScreen = (props: Props): React.ReactElement => (
-  <SafeAreaView style={IOStyles.flex}>
+  <View style={IOStyles.flex}>
     <InfoScreenComponent
       image={renderInfoRasterImage(image)}
       title={I18n.t("bonus.cgn.activation.ineligible.title")}
       body={I18n.t("bonus.cgn.activation.ineligible.body")}
     />
-    <View>
-      <FooterWithButtons
-        type="SingleButton"
-        primary={{
-          type: "Outline",
-          buttonProps: {
-            onPress: props.onCancel,
-            label: I18n.t("global.buttons.exit"),
-            accessibilityLabel: I18n.t("global.buttons.exit")
-          }
-        }}
-      />
-    </View>
-  </SafeAreaView>
+    <FooterWithButtons
+      type="SingleButton"
+      primary={{
+        type: "Outline",
+        buttonProps: {
+          onPress: props.onCancel,
+          label: I18n.t("global.buttons.exit"),
+          accessibilityLabel: I18n.t("global.buttons.exit")
+        }
+      }}
+    />
+  </View>
 );
 
 const mapStateToProps = (_: GlobalState) => ({});
diff --git a/ts/features/bonus/cgn/screens/activation/CgnActivationPendingScreen.tsx b/ts/features/bonus/cgn/screens/activation/CgnActivationPendingScreen.tsx
index e0a7f2278e0..2a1531d71f4 100644
--- a/ts/features/bonus/cgn/screens/activation/CgnActivationPendingScreen.tsx
+++ b/ts/features/bonus/cgn/screens/activation/CgnActivationPendingScreen.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { connect } from "react-redux";
-import { SafeAreaView, View } from "react-native";
+import { View } from "react-native";
 import { FooterWithButtons } from "@pagopa/io-app-design-system";
 
 import { GlobalState } from "../../../../../store/reducers/types";
@@ -20,26 +20,24 @@ type Props = ReturnType<typeof mapStateToProps> &
  * and the server has already another request pending for the user
  */
 const CgnActivationPendingScreen = (props: Props): React.ReactElement => (
-  <SafeAreaView style={IOStyles.flex}>
+  <View style={IOStyles.flex}>
     <InfoScreenComponent
       image={renderInfoRasterImage(image)}
       title={I18n.t("bonus.cgn.activation.pending.title")}
       body={I18n.t("bonus.cgn.activation.pending.body")}
     />
-    <View>
-      <FooterWithButtons
-        type="SingleButton"
-        primary={{
-          type: "Outline",
-          buttonProps: {
-            onPress: props.onExit,
-            label: I18n.t("global.buttons.exit"),
-            accessibilityLabel: I18n.t("global.buttons.exit")
-          }
-        }}
-      />
-    </View>
-  </SafeAreaView>
+    <FooterWithButtons
+      type="SingleButton"
+      primary={{
+        type: "Outline",
+        buttonProps: {
+          onPress: props.onExit,
+          label: I18n.t("global.buttons.exit"),
+          accessibilityLabel: I18n.t("global.buttons.exit")
+        }
+      }}
+    />
+  </View>
 );
 
 const mapStateToProps = (_: GlobalState) => ({});
diff --git a/ts/features/bonus/cgn/screens/activation/CgnAlreadyActiveScreen.tsx b/ts/features/bonus/cgn/screens/activation/CgnAlreadyActiveScreen.tsx
index dd86514c0e3..735581eee8a 100644
--- a/ts/features/bonus/cgn/screens/activation/CgnAlreadyActiveScreen.tsx
+++ b/ts/features/bonus/cgn/screens/activation/CgnAlreadyActiveScreen.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { connect } from "react-redux";
-import { SafeAreaView, View } from "react-native";
+import { View } from "react-native";
 import { FooterWithButtons } from "@pagopa/io-app-design-system";
 import { GlobalState } from "../../../../../store/reducers/types";
 import { Dispatch } from "../../../../../store/actions/types";
@@ -20,27 +20,25 @@ type Props = ReturnType<typeof mapStateToProps> &
  * but it is yet active
  */
 const CgnAlreadyActiveScreen = (props: Props): React.ReactElement => (
-  <SafeAreaView style={IOStyles.flex}>
+  <View style={IOStyles.flex}>
     <InfoScreenComponent
       image={renderInfoRasterImage(image)}
       title={I18n.t("bonus.cgn.activation.alreadyActive.title")}
       body={I18n.t("bonus.cgn.activation.alreadyActive.body")}
     />
-    <View>
-      <FooterWithButtons
-        type="SingleButton"
-        primary={{
-          type: "Solid",
-          buttonProps: {
-            onPress: props.navigateToDetail,
-            label: I18n.t("bonus.cgn.cta.goToDetail"),
-            accessibilityLabel: I18n.t("bonus.cgn.cta.goToDetail"),
-            testID: "cgnConfirmButtonTestId"
-          }
-        }}
-      />
-    </View>
-  </SafeAreaView>
+    <FooterWithButtons
+      type="SingleButton"
+      primary={{
+        type: "Solid",
+        buttonProps: {
+          onPress: props.navigateToDetail,
+          label: I18n.t("bonus.cgn.cta.goToDetail"),
+          accessibilityLabel: I18n.t("bonus.cgn.cta.goToDetail"),
+          testID: "cgnConfirmButtonTestId"
+        }
+      }}
+    />
+  </View>
 );
 
 const mapStateToProps = (_: GlobalState) => ({});
diff --git a/ts/features/bonus/common/components/BonusInformationComponent.tsx b/ts/features/bonus/common/components/BonusInformationComponent.tsx
index f5f9f6a0788..835a7cea2c7 100644
--- a/ts/features/bonus/common/components/BonusInformationComponent.tsx
+++ b/ts/features/bonus/common/components/BonusInformationComponent.tsx
@@ -3,13 +3,7 @@ import { constNull, pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import * as React from "react";
 import { ComponentProps } from "react";
-import {
-  View,
-  Image,
-  SafeAreaView,
-  StyleSheet,
-  ScrollView
-} from "react-native";
+import { View, Image, StyleSheet, ScrollView } from "react-native";
 import { widthPercentageToDP } from "react-native-responsive-screen";
 import {
   Body,
@@ -234,50 +228,45 @@ const BonusInformationComponent: React.FunctionComponent<Props> = props => {
       contextualHelp={props.contextualHelp}
       faqCategories={props.faqCategories}
     >
-      <SafeAreaView style={IOStyles.flex}>
-        {isScreenReaderEnabled && isMarkdownLoaded && footerComponent}
-        <ScrollView style={IOStyles.horizontalContentPadding}>
-          <View style={styles.row}>
-            <View style={styles.flexStart}>
-              {O.isSome(maybeSponsorshipDescription) && (
-                <H3>{maybeSponsorshipDescription.value}</H3>
-              )}
+      {isScreenReaderEnabled && isMarkdownLoaded && footerComponent}
+      <ScrollView style={IOStyles.horizontalContentPadding}>
+        <View style={styles.row}>
+          <View style={styles.flexStart}>
+            {O.isSome(maybeSponsorshipDescription) && (
+              <H3>{maybeSponsorshipDescription.value}</H3>
+            )}
 
-              <H1>{bonusTypeLocalizedContent.title}</H1>
-            </View>
-            <View style={styles.flexEnd}>
-              {O.isSome(maybeCover) && (
-                <Image
-                  source={{ uri: maybeCover.value }}
-                  style={styles.cover}
-                />
-              )}
-            </View>
+            <H1>{bonusTypeLocalizedContent.title}</H1>
+          </View>
+          <View style={styles.flexEnd}>
+            {O.isSome(maybeCover) && (
+              <Image source={{ uri: maybeCover.value }} style={styles.cover} />
+            )}
           </View>
-          <VSpacer size={24} />
-          <Body color="bluegreyDark">{bonusTypeLocalizedContent.subtitle}</Body>
+        </View>
+        <VSpacer size={24} />
+        <Body color="bluegreyDark">{bonusTypeLocalizedContent.subtitle}</Body>
 
-          <VSpacer size={16} />
-          <ItemSeparatorComponent noPadded={true} />
-          <Markdown
-            cssStyle={CSS_STYLE}
-            extraBodyHeight={extraMarkdownBodyHeight}
-            onLoadEnd={onMarkdownLoaded}
-          >
-            {bonusTypeLocalizedContent.content}
-          </Markdown>
-          <VSpacer size={40} />
-          {isMarkdownLoaded && renderUrls()}
-          {getTosFooter(
-            maybeBonusTos,
-            maybeRegulationUrl,
-            handleModalPress,
-            props.primaryCtaText
-          )}
-          {isMarkdownLoaded && <EdgeBorderComponent />}
-        </ScrollView>
-        {!isScreenReaderEnabled && isMarkdownLoaded && footerComponent}
-      </SafeAreaView>
+        <VSpacer size={16} />
+        <ItemSeparatorComponent noPadded={true} />
+        <Markdown
+          cssStyle={CSS_STYLE}
+          extraBodyHeight={extraMarkdownBodyHeight}
+          onLoadEnd={onMarkdownLoaded}
+        >
+          {bonusTypeLocalizedContent.content}
+        </Markdown>
+        <VSpacer size={40} />
+        {isMarkdownLoaded && renderUrls()}
+        {getTosFooter(
+          maybeBonusTos,
+          maybeRegulationUrl,
+          handleModalPress,
+          props.primaryCtaText
+        )}
+        {isMarkdownLoaded && <EdgeBorderComponent />}
+      </ScrollView>
+      {!isScreenReaderEnabled && isMarkdownLoaded && footerComponent}
     </BaseScreenComponent>
   ));
   return (
diff --git a/yarn.lock b/yarn.lock
index c0c757f034b..098bd837d18 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3051,10 +3051,10 @@
   dependencies:
     "@types/node" ">= 8"
 
-"@pagopa/io-app-design-system@1.20.0":
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-1.20.0.tgz#d72025055360f7e8640c7a4c540835274108b626"
-  integrity sha512-sXe43yVbCpNrSivHgNiGis6qB4PGmP9z3ecY8A+s6jM9HowaAzgWdHb66FQwNqrxbGoJr/KbtFiSiNC3AwHAZA==
+"@pagopa/io-app-design-system@1.21.0":
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-1.21.0.tgz#97dddf227d0fa1f7c25d0128090b6749a3c3db0c"
+  integrity sha512-Vy0f3nhuaE+SMBE9Dh2LBlCt+YzAajNHwGVgW7uRNcgxCR0KKrEAdMS2fVHGgnzLYSeFCEq3yonG5PIatT+MDg==
   dependencies:
     "@pagopa/ts-commons" "^12.0.0"
     "@testing-library/jest-native" "^5.4.2"