chore(Cross): [IOAPPX-242] Replace legacy FooterWithButtons in the …

…'Remove account' flow (#5470) ## Short description This PR replaces the legacy `FooterWithButtons` in the _Remove account_ flow ## List of changes proposed in this pull request - Replace the legacy `FooterWithButtons` with the new one in the following pages: - `RemoveAccountInfoScreen` - `RemoveAccountDetailsScreen` - `RemoveAccountSuccessScreen` - Replace `BaseScreenComponent` with the new `RNavScreenWithLargeHeader` in the `RemoveAccountDetailsScreen` - Fix `RemoveAccountSuccessScreen` empty state formatting with the new typographic styles ### Preview | Before | After | |--------|--------| | ![Simulator Screenshot - iPhone 14 Pro - 2024-01-31 at 14 28 16](https://github.com/pagopa/io-app/assets/1255491/61d6b853-430d-436a-81fe-03f697cb506b) | ![Simulator Screenshot - iPhone 14 Pro - 2024-01-31 at 14 24 09](https://github.com/pagopa/io-app/assets/1255491/bea81560-3ed9-4be7-a6f2-3118f19451f3) | ## How to test Go to the **Profile** → **Privacy & Policy** → **Delete your account**
pagopa · Feb 13, 2024 · 6cd3b34 · 6cd3b34
1 parent 69c9be1
commit 6cd3b34
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 119 deletions.
diff --git a/ts/navigation/ProfileNavigator.tsx b/ts/navigation/ProfileNavigator.tsx
@@ -31,10 +31,10 @@ import WebPlayground from "../screens/profile/WebPlayground";
 import { IdPayCodePlayGround } from "../screens/profile/playgrounds/IdPayCodePlayground";
 import IdPayOnboardingPlayground from "../screens/profile/playgrounds/IdPayOnboardingPlayground";
 import MarkdownPlayground from "../screens/profile/playgrounds/MarkdownPlayground";
+import { WalletPaymentPlayground } from "../screens/profile/playgrounds/WalletPaymentPlayground";
 import WalletPlayground from "../screens/profile/playgrounds/WalletPlayground";
 import { useIOSelector } from "../store/hooks";
 import { isGestureEnabled } from "../utils/navigation";
-import { WalletPaymentPlayground } from "../screens/profile/playgrounds/WalletPaymentPlayground";
 import { ProfileParamsList } from "./params/ProfileParamsList";
 import ROUTES from "./routes";
 
@@ -208,9 +208,6 @@ const ProfileStackNavigator = () => {
         component={RemoveAccountInfo}
       />
       <Stack.Screen
-        options={{
-          headerShown: false
-        }}
         name={ROUTES.PROFILE_REMOVE_ACCOUNT_DETAILS}
         component={RemoveAccountDetails}
       />

diff --git a/ts/screens/profile/RemoveAccountDetailsScreen.tsx b/ts/screens/profile/RemoveAccountDetailsScreen.tsx
@@ -1,31 +1,32 @@
+import {
+  BlockButtonProps,
+  ContentWrapper,
+  FooterWithButtons
+} from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { Content } from "native-base";
+import { StackActions } from "@react-navigation/native";
 import * as React from "react";
-import { View, Alert, SafeAreaView } from "react-native";
+import { Alert, SafeAreaView } from "react-native";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-import { StackActions } from "@react-navigation/native";
+import { LabelledItem } from "../../components/LabelledItem";
+import { LoadingErrorComponent } from "../../components/LoadingErrorComponent";
 import {
   RadioButtonList,
   RadioItem
 } from "../../components/core/selection/RadioButtonList";
-import { H1 } from "../../components/core/typography/H1";
-import { H4 } from "../../components/core/typography/H4";
 import { IOStyles } from "../../components/core/variables/IOStyles";
-import { LabelledItem } from "../../components/LabelledItem";
-import BaseScreenComponent from "../../components/screens/BaseScreenComponent";
-import FooterWithButtons from "../../components/ui/FooterWithButtons";
+import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader";
 import { shufflePinPadOnPayment } from "../../config";
-import { LoadingErrorComponent } from "../../components/LoadingErrorComponent";
 import { isCgnEnrolledSelector } from "../../features/bonus/cgn/store/reducers/details";
 import I18n from "../../i18n";
 import NavigationService from "../../navigation/NavigationService";
 import { identificationRequest } from "../../store/actions/identification";
 import { navigateToWalletHome } from "../../store/actions/navigation";
 import {
-  removeAccountMotivation,
   RemoveAccountMotivationEnum,
-  RemoveAccountMotivationPayload
+  RemoveAccountMotivationPayload,
+  removeAccountMotivation
 } from "../../store/actions/profile";
 import { GlobalState } from "../../store/reducers/types";
 import { userDataProcessingSelector } from "../../store/reducers/userDataProcessing";
@@ -115,20 +116,33 @@ const RemoveAccountDetails: React.FunctionComponent<Props> = (props: Props) => {
         props.requestIdentification({ reason: selectedMotivation });
     }
   };
-  const continueButtonProps = {
-    block: true,
-    primary: true,
-    onPress: handleContinuePress,
-    title: I18n.t("profile.main.privacy.removeAccount.info.cta")
+
+  const continueButtonProps: BlockButtonProps = {
+    type: "Solid",
+    buttonProps: {
+      color: "primary",
+      label: I18n.t("profile.main.privacy.removeAccount.info.cta"),
+      accessibilityLabel: I18n.t("profile.main.privacy.removeAccount.info.cta"),
+      onPress: handleContinuePress
+    }
   };
 
   const loadingCaption = I18n.t(
     "profile.main.privacy.removeAccount.success.title"
   );
   return (
-    <BaseScreenComponent
-      goBack={true}
-      headerTitle={I18n.t("profile.main.title")}
+    <RNavScreenWithLargeHeader
+      title={{
+        label: I18n.t("profile.main.privacy.removeAccount.title")
+      }}
+      description={I18n.t("profile.main.privacy.removeAccount.details.body")}
+      fixedBottomSlot={withKeyboard(
+        <FooterWithButtons
+          type={"SingleButton"}
+          primary={continueButtonProps}
+        />,
+        true
+      )}
     >
       {props.isLoading || props.isError ? (
         <LoadingErrorComponent
@@ -143,47 +157,34 @@ const RemoveAccountDetails: React.FunctionComponent<Props> = (props: Props) => {
         />
       ) : (
         <SafeAreaView style={IOStyles.flex}>
-          <Content>
-            <H1>{I18n.t("profile.main.privacy.removeAccount.title")}</H1>
-            <H4 weight="Regular">
-              {I18n.t("profile.main.privacy.removeAccount.details.body")}
-            </H4>
-            <View style={{ paddingTop: 25 }}>
-              <RadioButtonList<RemoveAccountMotivationEnum>
-                head={I18n.t(
-                  "profile.main.privacy.removeAccount.details.question"
+          <ContentWrapper>
+            <RadioButtonList<RemoveAccountMotivationEnum>
+              head={I18n.t(
+                "profile.main.privacy.removeAccount.details.question"
+              )}
+              key="delete_reason"
+              items={getMotivationItems()}
+              selectedItem={selectedMotivation}
+              onPress={setSelectedMotivation}
+            />
+            {selectedMotivation === RemoveAccountMotivationEnum.OTHERS && (
+              <LabelledItem
+                label={I18n.t(
+                  "profile.main.privacy.removeAccount.details.labelOpenAnswer"
                 )}
-                key="delete_reason"
-                items={getMotivationItems()}
-                selectedItem={selectedMotivation}
-                onPress={setSelectedMotivation}
+                inputProps={{
+                  keyboardType: "default",
+                  returnKeyType: "done",
+                  autoFocus: true,
+                  maxLength: 18,
+                  onChangeText: setOtherMotivation
+                }}
               />
-              {selectedMotivation === RemoveAccountMotivationEnum.OTHERS && (
-                <LabelledItem
-                  label={I18n.t(
-                    "profile.main.privacy.removeAccount.details.labelOpenAnswer"
-                  )}
-                  inputProps={{
-                    keyboardType: "default",
-                    returnKeyType: "done",
-                    autoFocus: true,
-                    maxLength: 18,
-                    onChangeText: setOtherMotivation
-                  }}
-                />
-              )}
-            </View>
-          </Content>
-          {withKeyboard(
-            <FooterWithButtons
-              type={"SingleButton"}
-              leftButton={continueButtonProps}
-            />,
-            true
-          )}
+            )}
+          </ContentWrapper>
         </SafeAreaView>
       )}
-    </BaseScreenComponent>
+    </RNavScreenWithLargeHeader>
   );
 };
 

diff --git a/ts/screens/profile/RemoveAccountInfoScreen.tsx b/ts/screens/profile/RemoveAccountInfoScreen.tsx
@@ -1,9 +1,12 @@
-import { Body, ContentWrapper } from "@pagopa/io-app-design-system";
+import {
+  BlockButtonProps,
+  Body,
+  ContentWrapper,
+  FooterWithButtons
+} from "@pagopa/io-app-design-system";
 import * as React from "react";
-import { SafeAreaView } from "react-native";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-import FooterWithButtons from "../../components/ui/FooterWithButtons";
 import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader";
 import I18n from "../../i18n";
 import { navigateToRemoveAccountDetailScreen } from "../../store/actions/navigation";
@@ -16,30 +19,30 @@ type Props = ReturnType<typeof mapDispatchToProps>;
  * Here user can ask to delete his account
  */
 const RemoveAccountInfo: React.FunctionComponent<Props> = props => {
-  const continueButtonProps = {
-    block: true,
-    primary: true,
-    onPress: () => {
-      props.loadBonus();
-      props.navigateToRemoveAccountDetail();
-    },
-    title: I18n.t("profile.main.privacy.removeAccount.info.cta")
+  const continueButtonProps: BlockButtonProps = {
+    type: "Solid",
+    buttonProps: {
+      color: "primary",
+      label: I18n.t("profile.main.privacy.removeAccount.info.cta"),
+      accessibilityLabel: I18n.t("profile.main.privacy.removeAccount.info.cta"),
+      onPress: () => {
+        props.loadBonus();
+        props.navigateToRemoveAccountDetail();
+      }
+    }
   };
 
-  const footerComponent = (
-    <SafeAreaView>
-      <FooterWithButtons
-        type={"SingleButton"}
-        leftButton={continueButtonProps}
-      />
-    </SafeAreaView>
-  );
   return (
     <RNavScreenWithLargeHeader
       title={{
         label: I18n.t("profile.main.privacy.removeAccount.title")
       }}
-      fixedBottomSlot={footerComponent}
+      fixedBottomSlot={
+        <FooterWithButtons
+          type={"SingleButton"}
+          primary={continueButtonProps}
+        />
+      }
     >
       <ContentWrapper>
         <Body weight="Regular">

diff --git a/ts/screens/profile/RemoveAccountSuccessScreen.tsx b/ts/screens/profile/RemoveAccountSuccessScreen.tsx
@@ -1,67 +1,101 @@
-import { Content } from "native-base";
+import {
+  BlockButtonProps,
+  Body,
+  ContentWrapper,
+  FooterWithButtons,
+  H2,
+  IOVisualCostants,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 import * as React from "react";
-import { Image, SafeAreaView, StyleSheet } from "react-native";
+import { useState } from "react";
+import { Image, Platform, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { connect } from "react-redux";
-import { VSpacer } from "@pagopa/io-app-design-system";
-import { IOStyles } from "../../components/core/variables/IOStyles";
-import BaseScreenComponent from "../../components/screens/BaseScreenComponent";
-import FooterWithButtons from "../../components/ui/FooterWithButtons";
+import expiredIcon from "../../../img/wallet/errors/payment-expired-icon.png";
+import { useHardwareBackButton } from "../../hooks/useHardwareBackButton";
 import I18n from "../../i18n";
-import { H4 } from "../../components/core/typography/H4";
-import { H2 } from "../../components/core/typography/H2";
 import {
   AppParamsList,
   IOStackNavigationRouteProps
 } from "../../navigation/params/AppParamsList";
-import { Dispatch } from "../../store/actions/types";
 import { logoutRequest } from "../../store/actions/authentication";
-import expiredIcon from "../../../img/wallet/errors/payment-expired-icon.png";
-import { useHardwareBackButton } from "../../hooks/useHardwareBackButton";
+import { Dispatch } from "../../store/actions/types";
 
 type Props = IOStackNavigationRouteProps<AppParamsList> &
   ReturnType<typeof mapDispatchToProps>;
-const styles = StyleSheet.create({
-  content: {
-    flex: 1,
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center"
-  }
-});
+
 /**
  * A screen to explain how the account removal works.
  * Here user can ask to delete his account
  */
 const RemoveAccountSuccess: React.FunctionComponent<Props> = props => {
+  const [footerHeight, setFooterHeight] = useState(0);
+  const insets = useSafeAreaInsets();
   // do nothing
   useHardwareBackButton(() => true);
 
-  const continueButtonProps = {
-    block: true,
-    bordered: true,
-    primary: true,
-    onPress: props.logout,
-    title: I18n.t("profile.main.privacy.removeAccount.success.cta")
+  const continueButtonProps: BlockButtonProps = {
+    type: "Outline",
+    buttonProps: {
+      color: "primary",
+      label: I18n.t("profile.main.privacy.removeAccount.success.cta"),
+      accessibilityLabel: I18n.t(
+        "profile.main.privacy.removeAccount.success.cta"
+      ),
+      onPress: props.logout
+    }
   };
 
   const footerComponent = (
-    <FooterWithButtons type={"SingleButton"} leftButton={continueButtonProps} />
+    <FooterWithButtons
+      sticky
+      onLayoutChange={setFooterHeight}
+      type={"SingleButton"}
+      primary={continueButtonProps}
+    />
   );
 
   return (
-    <BaseScreenComponent headerTitle={I18n.t("profile.main.title")}>
-      <SafeAreaView style={IOStyles.flex}>
-        <Content contentContainerStyle={styles.content}>
-          <Image source={expiredIcon} />
-          <VSpacer size={16} />
-          <H2>{I18n.t("profile.main.privacy.removeAccount.success.title")}</H2>
-          <H4 weight="Regular" style={{ textAlign: "center" }}>
-            {I18n.t("profile.main.privacy.removeAccount.success.body")}
-          </H4>
-        </Content>
-        {footerComponent}
-      </SafeAreaView>
-    </BaseScreenComponent>
+    <View style={{ flexGrow: 1 }}>
+      {/* This extra View is mandatory when you have a fixed
+        bottom component to get a consistent behavior
+        across platforms */}
+      <View style={{ flexGrow: 1, paddingBottom: footerHeight }}>
+        <ScrollView
+          centerContent
+          contentContainerStyle={[
+            { paddingTop: insets.top },
+            /* Android fallback because `centerContent`
+              is only an iOS property */
+            Platform.OS === "android" && {
+              flexGrow: 1,
+              justifyContent: "center"
+            }
+          ]}
+        >
+          <ContentWrapper>
+            <View
+              style={{
+                alignItems: "center",
+                paddingVertical: IOVisualCostants.appMarginDefault
+              }}
+            >
+              <Image source={expiredIcon} />
+              <VSpacer size={16} />
+              <H2 style={{ textAlign: "center" }}>
+                {I18n.t("profile.main.privacy.removeAccount.success.title")}
+              </H2>
+              <VSpacer size={16} />
+              <Body style={{ textAlign: "center" }}>
+                {I18n.t("profile.main.privacy.removeAccount.success.body")}
+              </Body>
+            </View>
+          </ContentWrapper>
+        </ScrollView>
+      </View>
+      {footerComponent}
+    </View>
   );
 };