chore(IT Wallet): [SIW-677] Refactor ITW reset (#5247)

## Short description This PR refactors the ITW reset procedure. Currently it only reset the wallet lifecycle by setting it to `operational` but with this PR it will also reset a portion of the state to avoid conflicts with dirty state. It also updates the UI with the new design system. ## List of changes proposed in this pull request - Updates `useItwResetFlow.tsx` with the new design system; - Adds `itwLifecycleOperational` action handling in `itwCredentialsReducer.ts``itwPidDecodeReducer.ts` and `itwWiaReducer.ts` which resets the state to the initial one. ## How to test Obtain a PID and a credential then test the reset flow from the ITW home screen. --------- Co-authored-by: Mario Perrotta <[email protected]>
pagopa · Nov 23, 2023 · cdc668b · cdc668b
1 parent 4beb3f1
commit cdc668b
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 23 deletions.
diff --git a/ts/features/it-wallet/hooks/useItwResetFlow.tsx b/ts/features/it-wallet/hooks/useItwResetFlow.tsx
@@ -1,12 +1,9 @@
 import * as React from "react";
 import { View } from "react-native";
 import { useDispatch } from "react-redux";
-import { IOColors } from "@pagopa/io-app-design-system";
+import { BlockButtons, Body, IOStyles } from "@pagopa/io-app-design-system";
 import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import FooterWithButtons from "../../../components/ui/FooterWithButtons";
 import I18n from "../../../i18n";
-import { H4 } from "../../../components/core/typography/H4";
 import { itwLifecycleOperational } from "../store/actions/itwLifecycleActions";
 
 /**
@@ -16,30 +13,49 @@ export const useItwResetFlow = () => {
   const dispatch = useDispatch();
   const BottomSheetBody = () => (
     <View style={IOStyles.flex}>
-      <H4 color={"bluegreyDark"} weight={"Regular"}>
+      <Body>
         {I18n.t("features.itWallet.homeScreen.reset.bottomSheet.body")}
-      </H4>
+      </Body>
     </View>
   );
   const Footer = () => (
-    <FooterWithButtons
-      type={"TwoButtonsInlineHalf"}
-      leftButton={{
-        onPressWithGestureHandler: true,
-        bordered: true,
-        onPress: () => dismiss(),
-        title: I18n.t("features.itWallet.homeScreen.reset.bottomSheet.cancel")
+    <View
+      style={{
+        ...IOStyles.horizontalContentPadding,
+        paddingBottom: IOStyles.footer.paddingBottom
       }}
-      rightButton={{
-        onPress: () => {
-          dispatch(itwLifecycleOperational());
-          dismiss();
-        },
-        primary: true,
-        labelColor: IOColors.white,
-        title: I18n.t("features.itWallet.homeScreen.reset.bottomSheet.confirm")
-      }}
-    />
+    >
+      <BlockButtons
+        type="TwoButtonsInlineHalf"
+        primary={{
+          type: "Outline",
+          buttonProps: {
+            accessibilityLabel: I18n.t(
+              "features.itWallet.homeScreen.reset.bottomSheet.cancel"
+            ),
+            label: I18n.t(
+              "features.itWallet.homeScreen.reset.bottomSheet.cancel"
+            ),
+            onPress: () => dismiss()
+          }
+        }}
+        secondary={{
+          type: "Solid",
+          buttonProps: {
+            accessibilityLabel: I18n.t(
+              "features.itWallet.homeScreen.reset.bottomSheet.confirm"
+            ),
+            label: I18n.t(
+              "features.itWallet.homeScreen.reset.bottomSheet.confirm"
+            ),
+            onPress: () => {
+              dispatch(itwLifecycleOperational());
+              dismiss();
+            }
+          }
+        }}
+      />
+    </View>
   );
   const { present, bottomSheet, dismiss } = useIOBottomSheetModal({
     title: I18n.t("features.itWallet.homeScreen.reset.bottomSheet.title"),

diff --git a/ts/features/it-wallet/store/actions/itwLifecycleActions.ts b/ts/features/it-wallet/store/actions/itwLifecycleActions.ts
@@ -2,6 +2,7 @@ import { ActionType, createStandardAction } from "typesafe-actions";
 
 /**
  * Actions which sets the wallet lifecycle status to operational.
+ * It is intercepted by itw reducers to reset their state.
  */
 export const itwLifecycleOperational = createStandardAction(
   "ITW_LIFECYCLE_OPERATIONAL"

diff --git a/ts/features/it-wallet/store/reducers/itwCredentialsReducer.ts b/ts/features/it-wallet/store/reducers/itwCredentialsReducer.ts
@@ -15,6 +15,7 @@ import {
   IssuerConfiguration,
   PidResponse
 } from "../../utils/types";
+import { itwLifecycleOperational } from "../actions/itwLifecycleActions";
 
 /**
  * Type for a stored credential.
@@ -81,6 +82,11 @@ const reducer = (
           O.some(action.payload)
         ]
       });
+    /**
+     * Reset the state when the wallet is operational.
+     */
+    case getType(itwLifecycleOperational):
+      return emptyState;
   }
   return state;
 };

diff --git a/ts/features/it-wallet/store/reducers/itwPidDecodeReducer.ts b/ts/features/it-wallet/store/reducers/itwPidDecodeReducer.ts
@@ -6,6 +6,7 @@ import { Action } from "../../../../store/actions/types";
 import { GlobalState } from "../../../../store/reducers/types";
 import { itwDecodePid } from "../actions/itwCredentialsActions";
 import { ItWalletError } from "../../utils/errors/itwErrors";
+import { itwLifecycleOperational } from "../actions/itwLifecycleActions";
 
 type ItwDecodedPidType = {
   decodedPid: O.Option<PidWithToken>;
@@ -33,6 +34,11 @@ const reducer = (
       return pot.some({ decodedPid: action.payload });
     case getType(itwDecodePid.failure):
       return pot.toError(state, action.payload);
+    /**
+     * Reset the state when the wallet is operational.
+     */
+    case getType(itwLifecycleOperational):
+      return emptyState;
   }
   return state;
 };

diff --git a/ts/features/it-wallet/store/reducers/itwWiaReducer.ts b/ts/features/it-wallet/store/reducers/itwWiaReducer.ts
@@ -5,6 +5,7 @@ import { Action } from "../../../../store/actions/types";
 import { GlobalState } from "../../../../store/reducers/types";
 import { ItWalletError } from "../../utils/errors/itwErrors";
 import { itwWiaRequest } from "../actions/itwWiaActions";
+import { itwLifecycleOperational } from "../actions/itwLifecycleActions";
 
 export type ItwWIAState = pot.Pot<O.Option<string>, ItWalletError>;
 
@@ -29,6 +30,11 @@ const reducer = (
       return pot.some(O.some(action.payload));
     case getType(itwWiaRequest.failure):
       return pot.toError(state, action.payload);
+    /**
+     * Reset the state when the wallet is operational.
+     */
+    case getType(itwLifecycleOperational):
+      return emptyState;
   }
   return state;
 };