feat: [IOPID-1899] Upgrade DS lib to 1.39.0 (#5858)

> [!warning] > This PR depends on pagopa/io-app-design-system#284 ## Short description Upgraded DS lib and adapted all components that use `NumberPad` component. ## List of changes proposed in this pull request - Upgraded DS lib. - Adapted all those components<sup>*</sup> that use the `NumberPad` component to its new implementation derived from this DS update. - Some performance improvements in the `PinCreation` components, replaced the `pinMode` state with the `pinModeRef` to avoid renders on pin mode change. >[!Note] ><sup>*</sup> The affected components are: `IdentificationNumberPad`, `PinCreation` and `DSNumberPad` ## E2E Tests >[!Tip] >[![Run e2e tests](https://github.com/pagopa/io-app/actions/workflows/test-e2e.yml/badge.svg?branch=feature%2Fupgrade-design-system)](https://github.com/pagopa/io-app/actions/workflows/test-e2e.yml) ## Screens <details><summary>iOS</summary> <p> |Identification Modal|Pin Creation|DS NumberPad| |-|-|-| |<video src="https://github.com/pagopa/io-app/assets/94987118/ceaaa7fa-842e-41ae-b0e3-f8881c7c4035" />|<video src="https://github.com/pagopa/io-app/assets/94987118/33e1edd8-8f0b-42f2-a5f3-0ed7820d8044" />|<video src="https://github.com/pagopa/io-app/assets/94987118/1bd5d7e9-3070-4ef7-8cec-5becd6413362" />| </p> </details> <details><summary>Android</summary> <p> |Identification Modal|Pin Creation|DS NumberPad| |-|-|-| |<video src="https://github.com/pagopa/io-app/assets/94987118/9f43922a-c403-41f1-8197-2bb9ebee4fa5" />|<video src="https://github.com/pagopa/io-app/assets/94987118/556bae2b-b482-42e4-a8d9-0bee24a9083a" />|<video src="https://github.com/pagopa/io-app/assets/94987118/738c8061-cb34-4bdd-ad25-cb9701404eb1" />| </p> </details> ## How to test Since there are three components affected by this changes, there are just as many tests: - **DSNumberPad**: Navigate to `Profile > Design System` and under Screens section tap on `NumberPad` list item. - **IdentificationNumberPad**: This component belongs to `IdentificationModal` component so it can be tested doing any operation that requires identification. - **PinCreation**: Follow the *How to test* section in this [PR](#5737) --------- Co-authored-by: Fabio Bombardi <16268789+shadowsheep1@users.noreply.github.com>
pagopa · Jun 13, 2024 · e5de0d3 · e5de0d3
1 parent 257c7d5
commit e5de0d3
Show file tree

Hide file tree

Showing 13 changed files with 233 additions and 169 deletions.
diff --git a/package.json b/package.json
@@ -100,7 +100,7 @@
   "dependencies": {
     "@babel/plugin-transform-regenerator": "^7.18.6",
     "@gorhom/bottom-sheet": "^4.1.5",
-    "@pagopa/io-app-design-system": "1.38.5",
+    "@pagopa/io-app-design-system": "1.39.0",
     "@pagopa/io-pagopa-commons": "^3.1.0",
     "@pagopa/io-react-native-crypto": "^0.3.0",
     "@pagopa/io-react-native-http-client": "1.0.2",

diff --git a/ts/components/screens/PinCreation/PinCarouselItem.tsx b/ts/components/screens/PinCreation/PinCarouselItem.tsx
@@ -8,7 +8,6 @@ import {
 } from "@pagopa/io-app-design-system";
 import React, { RefObject, memo } from "react";
 import { Dimensions, View } from "react-native";
-import { PIN_LENGTH_SIX } from "../../../utils/constants";
 
 const { width } = Dimensions.get("screen");
 
@@ -17,6 +16,7 @@ export type PinCaouselItemProps = WithTestID<{
   titleRef?: RefObject<View>;
   description?: string;
   value: string;
+  maxLength: number;
   handleOnValidate: (val: string) => boolean;
   onValueChange: (val: string) => void;
 }>;
@@ -28,6 +28,7 @@ export const PinCarouselItem = memo(
     value,
     testID,
     titleRef,
+    maxLength,
     handleOnValidate,
     onValueChange
   }: PinCaouselItemProps) => (
@@ -59,7 +60,7 @@ export const PinCarouselItem = memo(
       )}
       <VSpacer size={32} />
       <CodeInput
-        length={PIN_LENGTH_SIX}
+        length={maxLength}
         onValidate={handleOnValidate}
         onValueChange={onValueChange}
         variant="dark"

diff --git a/ts/components/screens/PinCreation/PinCreation.tsx b/ts/components/screens/PinCreation/PinCreation.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable functional/immutable-data */
 import {
   ButtonLink,
   ButtonOutline,
@@ -31,6 +32,7 @@ import { useIONavigation } from "../../../navigation/params/AppParamsList";
 import { setAccessibilityFocus } from "../../../utils/accessibility";
 import { useOnFirstRender } from "../../../utils/hooks/useOnFirstRender";
 import { ContextualHelpPropsMarkdown } from "../BaseScreenComponent";
+import { PIN_LENGTH_SIX } from "../../../utils/constants";
 import usePinValidationBottomSheet from "./usePinValidationBottomSheet";
 import { PinCaouselItemProps, PinCarouselItem } from "./PinCarouselItem";
 
@@ -57,14 +59,13 @@ export const PinCreation = ({ isOnboarding = false }: Props) => {
   const navigation = useIONavigation();
   const [pin, setPin] = useState("");
   const [pinConfirmation, setPinConfirmation] = useState("");
-  const [pinMode, setPinMode] = useState<PinMode>("creation");
+  const pinModeRef = useRef<PinMode>("creation");
   const { handleSubmit } = useCreatePin({ isOnboarding });
   const pinRef = useRef<string | null>(null);
   const carouselRef = useRef<FlatList>(null);
   const titleCreationRef = useRef<View>(null);
   const titleConfirmationRef = useRef<View>(null);
   const isFirstOnBoarding = useIOSelector(isProfileFirstOnBoardingSelector);
-  const isCreation = pinMode === "creation";
   const { present, bottomSheet } = usePinValidationBottomSheet();
   const { showAlert } = useOnboardingAbortAlert();
 
@@ -74,7 +75,8 @@ export const PinCreation = ({ isOnboarding = false }: Props) => {
 
   const scrollToCreation = useCallback(() => {
     setPin("");
-    setPinMode("creation");
+
+    pinModeRef.current = "creation";
     carouselRef.current?.scrollToIndex({
       animated: true,
       index: CREATION_INDEX
@@ -83,7 +85,7 @@ export const PinCreation = ({ isOnboarding = false }: Props) => {
   }, []);
   const scrollToConfirmation = useCallback(() => {
     setPinConfirmation("");
-    setPinMode("confirmation");
+    pinModeRef.current = "confirmation";
     carouselRef.current?.scrollToIndex({
       animated: true,
       index: CONFIRMATION_INDEX
@@ -92,7 +94,7 @@ export const PinCreation = ({ isOnboarding = false }: Props) => {
   }, []);
 
   const goBack = useCallback(() => {
-    if (!isCreation) {
+    if (pinModeRef.current === "confirmation") {
       /**
        * Scrolls back to pin creation section
        */
@@ -102,7 +104,28 @@ export const PinCreation = ({ isOnboarding = false }: Props) => {
     } else {
       navigation.goBack();
     }
-  }, [navigation, isCreation, isOnboarding, showAlert, scrollToCreation]);
+  }, [navigation, isOnboarding, showAlert, scrollToCreation]);
+
+  const getCurrentSetState = useCallback(
+    (updateValue: (prev: string) => string) =>
+      pinModeRef.current === "creation"
+        ? setPin(updateValue)
+        : setPinConfirmation(updateValue),
+    []
+  );
+
+  const handlePinChange = useCallback(
+    (value: number) =>
+      getCurrentSetState((prev: string) =>
+        prev.length < PIN_LENGTH_SIX ? `${prev}${value}` : prev
+      ),
+    [getCurrentSetState]
+  );
+
+  const onDeletePress = useCallback(
+    () => getCurrentSetState((prev: string) => prev.slice(0, -1)),
+    [getCurrentSetState]
+  );
 
   useHeaderSecondLevel({
     title: "",
@@ -112,12 +135,12 @@ export const PinCreation = ({ isOnboarding = false }: Props) => {
   });
 
   const insertValidPin = useCallback(() => {
-    if (isCreation) {
+    if (pinModeRef.current === "creation") {
       setPin(defaultPin);
     } else {
       setPinConfirmation(defaultPin);
     }
-  }, [isCreation]);
+  }, []);
 
   const handlePinCreation = useCallback(
     (v: string) => {
@@ -182,15 +205,17 @@ export const PinCreation = ({ isOnboarding = false }: Props) => {
       value: pin,
       testID: "create-pin-carousel-item",
       handleOnValidate: handlePinCreation,
-      onValueChange: setPin
+      onValueChange: setPin,
+      maxLength: PIN_LENGTH_SIX
     },
     {
       title: I18n.t("onboarding.pinConfirmation.title"),
       titleRef: titleConfirmationRef,
       value: pinConfirmation,
       testID: "confirm-pin-carousel-item",
       handleOnValidate: handlePinConfirmation,
-      onValueChange: setPinConfirmation
+      onValueChange: setPinConfirmation,
+      maxLength: PIN_LENGTH_SIX
     }
   ];
 
@@ -213,8 +238,8 @@ export const PinCreation = ({ isOnboarding = false }: Props) => {
         <VSpacer size={40} />
         <ContentWrapper>
           <NumberPad
-            value={isCreation ? pin : pinConfirmation}
-            onValueChange={isCreation ? setPin : setPinConfirmation}
+            onNumberPress={handlePinChange}
+            onDeletePress={onDeletePress}
             variant="light"
             deleteAccessibilityLabel={I18n.t("global.buttons.delete")}
           />

diff --git a/ts/features/design-system/core/DSNumberPad.tsx b/ts/features/design-system/core/DSNumberPad.tsx
@@ -27,11 +27,13 @@ export const DSNumberPad = () => {
 
   const navigation = useNavigation();
 
-  const onValueChange = (v: string) => {
-    if (v.length <= PIN_LENGTH) {
-      setValue(v);
-    }
-  };
+  const onValueChange = React.useCallback((v: number) => {
+    setValue(prev => (prev.length < PIN_LENGTH ? `${prev}${v}` : prev));
+  }, []);
+
+  const onDeletePress = React.useCallback(() => {
+    setValue((prev: string) => prev.slice(0, -1));
+  }, []);
 
   React.useEffect(() => {
     navigation.setOptions({
@@ -102,16 +104,16 @@ export const DSNumberPad = () => {
           value={value}
           length={PIN_LENGTH}
           variant={darkBackground ? "light" : "dark"}
-          onValueChange={onValueChange}
+          onValueChange={setValue}
           onValidate={v => v === "123456"}
         />
       </View>
       <VSpacer size={48} />
       <View>
         <NumberPad
-          value={value}
           deleteAccessibilityLabel="Delete"
-          onValueChange={onValueChange}
+          onDeletePress={onDeletePress}
+          onNumberPress={onValueChange}
           variant={darkBackground ? "dark" : "light"}
           biometricType="FACE_ID"
           biometricAccessibilityLabel="Face ID"

diff --git a/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap b/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap
@@ -643,15 +643,13 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
                           accessibilityRole="header"
                           style={
                             Array [
-                              Object {
-                                "backgroundColor": "#FFFFFF",
-                              },
                               Object {
                                 "borderBottomWidth": 1,
+                                "borderColor": "rgba(232,235,241,0)",
                               },
+                              Object {},
                               Object {
                                 "backgroundColor": "#FFFFFF",
-                                "borderColor": "transparent",
                               },
                             ]
                           }
@@ -808,6 +806,9 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
                                       "fontSize": 14,
                                       "textAlign": "center",
                                     },
+                                    Object {
+                                      "color": "#0E0F13",
+                                    },
                                     Object {
                                       "fontFamily": "Titillium Web",
                                       "fontStyle": "normal",
@@ -1463,15 +1464,13 @@ exports[`MessageAttachment Should match the snapshot when there is an error 1`]
                           accessibilityRole="header"
                           style={
                             Array [
-                              Object {
-                                "backgroundColor": "#FFFFFF",
-                              },
                               Object {
                                 "borderBottomWidth": 1,
+                                "borderColor": "rgba(232,235,241,0)",
                               },
+                              Object {},
                               Object {
                                 "backgroundColor": "#FFFFFF",
-                                "borderColor": "transparent",
                               },
                             ]
                           }
@@ -1628,6 +1627,9 @@ exports[`MessageAttachment Should match the snapshot when there is an error 1`]
                                       "fontSize": 14,
                                       "textAlign": "center",
                                     },
+                                    Object {
+                                      "color": "#0E0F13",
+                                    },
                                     Object {
                                       "fontFamily": "Titillium Web",
                                       "fontStyle": "normal",