chore: [IOBP-341] Update IDPayPaymentCodeInputScreen to use new DS co…

…mponents (#5136) ## Short description updated said screen to use new DS components <img src="https://github.com/pagopa/io-app/assets/60693085/f63ac10d-d077-49a6-b5b1-eac4d7d2df19" width=250/> ## List of changes proposed in this pull request - added new `TextInput` component to screen - screen no longer uses deprecated NB-based `FooterWithButtons` ## How to test with the idpay flag active, navigate to an IdPay discount initiative, tap "authorize payment", navigate to the last of the three items at the bottom of the screen and make sure the page follows the design. --------- Co-authored-by: Federico Mastrini <[email protected]>
pagopa · Nov 3, 2023 · a738fb1 · a738fb1
1 parent db026c4
commit a738fb1
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 44 deletions.
diff --git a/ts/features/design-system/core/DSLogos.tsx b/ts/features/design-system/core/DSLogos.tsx
@@ -1,23 +1,23 @@
-import * as React from "react";
-import { ScrollView, StyleSheet, View } from "react-native";
 import {
-  useIOTheme,
+  Avatar,
   HSpacer,
-  VSpacer,
+  IOColors,
+  IOLogoPaymentCardType,
   IOLogoPaymentExtType,
   IOLogoPaymentType,
+  IOPaymentCardLogos,
   IOPaymentExtLogos,
   IOPaymentLogos,
+  IOVisualCostants,
   LogoPayment,
-  LogoPaymentExt,
   LogoPaymentCard,
-  IOPaymentCardLogos,
-  IOLogoPaymentCardType,
-  IOColors,
+  LogoPaymentExt,
+  VSpacer,
   hexToRgba,
-  Avatar,
-  IOVisualCostants
+  useIOTheme
 } from "@pagopa/io-app-design-system";
+import * as React from "react";
+import { ScrollView, StyleSheet, View } from "react-native";
 import { H2 } from "../../../components/core/typography/H2";
 import { LogoPaymentExtended } from "../../../components/ui/LogoPaymentExtended";
 import { DSComponentViewerBox } from "../components/DSComponentViewerBox";

diff --git a/ts/features/design-system/core/DSModules.tsx b/ts/features/design-system/core/DSModules.tsx
@@ -222,7 +222,7 @@ const renderModuleIDP = () => (
         />
       </View>
     </DSComponentViewerBox>
-    <DSComponentViewerBox name="ModuleIDP, saved variant">
+    <DSComponentViewerBox name="ModuleIDP, loose spacing (fka saved) variant">
       <View>
         <ModuleIDP
           withLooseSpacing

diff --git a/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx b/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx
@@ -1,22 +1,25 @@
+import {
+  FooterWithButtons,
+  IOStyles,
+  IOVisualCostants,
+  TextInput,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 import { NonEmptyString } from "@pagopa/ts-commons/lib/strings";
 import { useSelector } from "@xstate/react";
 import * as E from "fp-ts/lib/Either";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import React from "react";
 import { SafeAreaView, StatusBar, StyleSheet, View } from "react-native";
-import { IOVisualCostants, VSpacer } from "@pagopa/io-app-design-system";
-import { LabelledItem } from "../../../../components/LabelledItem";
 import { Body } from "../../../../components/core/typography/Body";
 import { H1 } from "../../../../components/core/typography/H1";
-import { IOStyles } from "../../../../components/core/variables/IOStyles";
 import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
-import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
+import I18n from "../../../../i18n";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import { IDPayTransactionCode } from "../common/types";
 import { usePaymentMachineService } from "../xstate/provider";
 import { isLoadingSelector } from "../xstate/selectors";
-import I18n from "../../../../i18n";
 
 type InputState = {
   value?: string;
@@ -50,40 +53,40 @@ const IDPayPaymentCodeInputScreen = () => {
           <VSpacer size={16} />
           <Body>{I18n.t("idpay.payment.manualInput.subtitle")}</Body>
           <VSpacer size={40} />
-          {/* FIXME replace with the new input field from the Design System 2.0  */}
-          <LabelledItem
-            isValid={isInputValid}
-            accessibilityLabel={I18n.t("idpay.payment.manualInput.input")}
-            inputMaskProps={{
-              type: "custom",
-              options: { mask: "SSSSSSSS" },
-              keyboardType: "default",
-              returnKeyType: "done",
-              value: inputState.value,
-              autoCapitalize: "none",
-              placeholder: I18n.t("idpay.payment.manualInput.input"),
-              onChangeText: value => {
-                setInputState({
+          <TextInput
+            textInputProps={{
+              inputMode: "",
+              autoCapitalize: "characters",
+              autoCorrect: false
+            }}
+            onChangeText={value => {
+              setInputState({
+                value,
+                code: pipe(
                   value,
-                  code: pipe(
-                    value,
-                    O.fromNullable,
-                    O.filter(NonEmptyString.is),
-                    O.map(IDPayTransactionCode.decode)
-                  )
-                });
-              }
+                  O.fromNullable,
+                  O.filter(NonEmptyString.is),
+                  O.map(IDPayTransactionCode.decode)
+                )
+              });
             }}
+            placeholder={I18n.t("idpay.payment.manualInput.input")}
+            accessibilityLabel={I18n.t("idpay.payment.manualInput.input")}
+            value={inputState.value ?? ""}
+            counterLimit={8}
           />
         </View>
         <FooterWithButtons
           type="SingleButton"
-          leftButton={{
-            title: I18n.t("idpay.payment.manualInput.button"),
-            accessibilityLabel: I18n.t("idpay.payment.manualInput.button"),
-            disabled: !isInputValid,
-            onPress: navigateToPaymentAuthorization,
-            isLoading
+          primary={{
+            type: "Solid",
+            buttonProps: {
+              label: I18n.t("idpay.payment.manualInput.button"),
+              accessibilityLabel: I18n.t("idpay.payment.manualInput.button"),
+              disabled: !isInputValid,
+              onPress: navigateToPaymentAuthorization,
+              loading: isLoading
+            }
           }}
         />
       </SafeAreaView>