chore: [IOPID-1829] Change button on ToS screen (#5762)

## Short description Change button on ToS screen (use FooterWithButtons) ### E2E >[!Tip] >[![Run e2e tests](https://github.com/pagopa/io-app/actions/workflows/test-e2e.yml/badge.svg?branch=IOPID-1829-change-button-tos-screen)](https://github.com/pagopa/io-app/actions/workflows/test-e2e.yml) ## List of changes proposed in this pull request - Change button on ToS screen ## iOS <p> | Onboarding | Onboarding Error | Profile | Profile Error | | - | - | - | - | | <img width="250" alt="Onboarding" src="https://github.com/pagopa/io-app/assets/83651704/b6fe23db-ffb4-4f3c-a588-7e92d8059ce9"> | <img width="250" alt="Onboarding Error" src="https://github.com/pagopa/io-app/assets/83651704/52beaea1-ad7d-41ee-a2b6-9da227d66185"> | <img width="250" alt="Profile" src="https://github.com/pagopa/io-app/assets/83651704/02871701-d54b-40e9-bd57-f44ea2e8b1e0"> | <img width="250" alt="Profile Error" src="https://github.com/pagopa/io-app/assets/83651704/c7b76a2f-0b0d-4249-80f5-7c2e235bda3b"> | </p> ## Android <p> | Onboarding | Onboarding Error | Profile | Profile Error | | - | - | - | - | | <img width="250" alt="Onboarding" src="https://github.com/pagopa/io-app/assets/83651704/e683ca5d-aae6-4d6d-ac4d-86eee1f41f99"> | <img width="250" alt="Onboarding Error" src="https://github.com/pagopa/io-app/assets/83651704/58780618-227d-44b2-8610-8d0a911fc78d"> | <img width="250" alt="Profile" src="https://github.com/pagopa/io-app/assets/83651704/8ae646fa-bfba-4ac2-9401-e28fb86c4a49"> | <img width="250" alt="Profile Error" src="https://github.com/pagopa/io-app/assets/83651704/2ae13475-f5ef-48ff-b1fc-6646a5844b20"> | </p> ## How to test run the app as first onboarding NB: to simulate error on tos screen need to change [this value](https://github.com/pagopa/io-app/blob/68ac2048bd04009caccd3876818ebec87a3917e4/ts/components/TosWebviewComponent.tsx#L68) --------- Co-authored-by: Fabio Bombardi <16268789+shadowsheep1@users.noreply.github.com>
pagopa · May 13, 2024 · c9ddc8c · c9ddc8c
1 parent bdf4a19
commit c9ddc8c
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 79 deletions.
diff --git a/ts/components/TosWebviewComponent.tsx b/ts/components/TosWebviewComponent.tsx
@@ -4,11 +4,7 @@ import React, { FunctionComponent, memo, useCallback, useState } from "react";
 import { View, ViewProps } from "react-native";
 import WebView, { WebViewMessageEvent } from "react-native-webview";
 import { WebViewSource } from "react-native-webview/lib/WebViewTypes";
-import {
-  ButtonSolid,
-  ContentWrapper,
-  IOStyles
-} from "@pagopa/io-app-design-system";
+import { FooterWithButtons, IOStyles } from "@pagopa/io-app-design-system";
 import I18n from "../i18n";
 import { openWebUrl } from "../utils/url";
 import { AVOID_ZOOM_JS, closeInjectedScript } from "../utils/webview";
@@ -86,14 +82,17 @@ const TosWebviewComponent: FunctionComponent<Props> = ({
         />
       </View>
       {shouldRenderFooter && onAcceptTos && (
-        <ContentWrapper>
-          <ButtonSolid
-            fullWidth
-            onPress={onAcceptTos}
-            label={I18n.t("onboarding.tos.accept")}
-            testID="AcceptToSButton"
-          />
-        </ContentWrapper>
+        <FooterWithButtons
+          type="SingleButton"
+          primary={{
+            type: "Solid",
+            buttonProps: {
+              label: I18n.t("onboarding.tos.accept"),
+              onPress: onAcceptTos,
+              testID: "AcceptToSButton"
+            }
+          }}
+        />
       )}
     </>
   );

diff --git a/ts/components/TosWebviewErrorComponent.tsx b/ts/components/TosWebviewErrorComponent.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import {
-  ButtonSolid,
-  ContentWrapper,
+  FooterWithButtons,
   H3,
   IOStyles,
   Pictogram,
@@ -33,14 +32,17 @@ const TosWebviewErrorComponent = ({
         {I18n.t("onboarding.tos.error")}
       </H3>
     </View>
-    <ContentWrapper>
-      <ButtonSolid
-        fullWidth
-        onPress={handleRetry}
-        label={I18n.t("global.buttons.retry")}
-        testID="RetryButtonTest"
-      />
-    </ContentWrapper>
+    <FooterWithButtons
+      type="SingleButton"
+      primary={{
+        type: "Solid",
+        buttonProps: {
+          label: I18n.t("global.buttons.retry"),
+          onPress: handleRetry,
+          testID: "RetryButtonTest"
+        }
+      }}
+    />
   </>
 );
 export default TosWebviewErrorComponent;
diff --git a/ts/screens/onboarding/OnboardingTosScreen.tsx b/ts/screens/onboarding/OnboardingTosScreen.tsx
@@ -15,7 +15,6 @@ import {
   IOToast,
   VSpacer
 } from "@pagopa/io-app-design-system";
-import { SafeAreaView } from "react-native-safe-area-context";
 import LoadingSpinnerOverlay from "../../components/LoadingSpinnerOverlay";
 import { ContextualHelpPropsMarkdown } from "../../components/screens/BaseScreenComponent";
 import TosWebviewComponent from "../../components/TosWebviewComponent";
@@ -128,43 +127,41 @@ const OnboardingTosScreen = () => {
 
   return (
     <LoadingSpinnerOverlay isLoading={isLoading || isUpdatingProfile}>
-      <SafeAreaView edges={["bottom"]} style={IOStyles.flex}>
-        <View style={IOStyles.horizontalContentPadding}>
-          <H2
-            accessible={true}
-            accessibilityRole="header"
-            testID="screen-content-header-title"
-          >
-            {I18n.t("profile.main.privacy.privacyPolicy.title")}
-          </H2>
-          <VSpacer size={16} />
+      <View style={IOStyles.horizontalContentPadding}>
+        <H2
+          accessible={true}
+          accessibilityRole="header"
+          testID="screen-content-header-title"
+        >
+          {I18n.t("profile.main.privacy.privacyPolicy.title")}
+        </H2>
+        <VSpacer size={16} />
+      </View>
+      {!hasAcceptedCurrentTos && (
+        <View
+          style={IOStyles.horizontalContentPadding}
+          testID={"currentToSNotAcceptedView"}
+        >
+          <AlertDS
+            viewRef={viewRef}
+            testID="currentToSNotAcceptedText"
+            variant="info"
+            content={
+              hasAcceptedOldTosVersion
+                ? I18n.t("profile.main.privacy.privacyPolicy.updated")
+                : I18n.t("profile.main.privacy.privacyPolicy.infobox")
+            }
+          />
         </View>
-        {!hasAcceptedCurrentTos && (
-          <View
-            style={IOStyles.horizontalContentPadding}
-            testID={"currentToSNotAcceptedView"}
-          >
-            <AlertDS
-              viewRef={viewRef}
-              testID="currentToSNotAcceptedText"
-              variant="info"
-              content={
-                hasAcceptedOldTosVersion
-                  ? I18n.t("profile.main.privacy.privacyPolicy.updated")
-                  : I18n.t("profile.main.privacy.privacyPolicy.infobox")
-              }
-            />
-          </View>
-        )}
-        <TosWebviewComponent
-          flow={flow}
-          handleLoadEnd={handleLoadEnd}
-          handleReload={handleReload}
-          webViewSource={{ uri: privacyUrl }}
-          shouldRenderFooter={!isLoading}
-          onAcceptTos={onAcceptTos}
-        />
-      </SafeAreaView>
+      )}
+      <TosWebviewComponent
+        flow={flow}
+        handleLoadEnd={handleLoadEnd}
+        handleReload={handleReload}
+        webViewSource={{ uri: privacyUrl }}
+        shouldRenderFooter={!isLoading}
+        onAcceptTos={onAcceptTos}
+      />
     </LoadingSpinnerOverlay>
   );
 };

diff --git a/ts/screens/profile/TosScreen.tsx b/ts/screens/profile/TosScreen.tsx
@@ -3,7 +3,6 @@
  * This screen is used as Privacy screen From Profile section.
  */
 import React, { useState } from "react";
-import { SafeAreaView } from "react-native-safe-area-context";
 import { H2, IOStyles } from "@pagopa/io-app-design-system";
 import { View } from "react-native";
 import LoadingSpinnerOverlay from "../../components/LoadingSpinnerOverlay";
@@ -49,24 +48,22 @@ const TosScreen = () => {
 
   return (
     <LoadingSpinnerOverlay isLoading={isLoading}>
-      <SafeAreaView edges={["bottom"]} style={IOStyles.flex}>
-        <View style={IOStyles.horizontalContentPadding}>
-          <H2
-            accessible={true}
-            accessibilityRole="header"
-            testID="screen-content-header-title"
-          >
-            {I18n.t("profile.main.privacy.privacyPolicy.title")}
-          </H2>
-        </View>
-        <TosWebviewComponent
-          flow={flow}
-          handleLoadEnd={handleLoadEnd}
-          handleReload={handleReload}
-          webViewSource={{ uri: privacyUrl }}
-          shouldRenderFooter={false}
-        />
-      </SafeAreaView>
+      <View style={IOStyles.horizontalContentPadding}>
+        <H2
+          accessible={true}
+          accessibilityRole="header"
+          testID="screen-content-header-title"
+        >
+          {I18n.t("profile.main.privacy.privacyPolicy.title")}
+        </H2>
+      </View>
+      <TosWebviewComponent
+        flow={flow}
+        handleLoadEnd={handleLoadEnd}
+        handleReload={handleReload}
+        webViewSource={{ uri: privacyUrl }}
+        shouldRenderFooter={false}
+      />
     </LoadingSpinnerOverlay>
   );
 };