chore: Adapted the FooterWithButtons into CGN screens

pagopa · Jan 30, 2024 · 76b035d · 76b035d
1 parent f029a3b
commit 76b035d
Show file tree

Hide file tree

Showing 8 changed files with 174 additions and 199 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) => ({});