From a738fb16b295687806be49035941c98de68c773a Mon Sep 17 00:00:00 2001
From: Martino Cesari Tomba <60693085+forrest57@users.noreply.github.com>
Date: Fri, 3 Nov 2023 17:39:44 +0100
Subject: [PATCH] chore: [IOBP-341] Update IDPayPaymentCodeInputScreen to use
 new DS components (#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 <federicomastrini93@gmail.com>
---
 ts/features/design-system/core/DSLogos.tsx    | 20 +++---
 ts/features/design-system/core/DSModules.tsx  |  2 +-
 .../screens/IDPayPaymentCodeInputScreen.tsx   | 69 ++++++++++---------
 3 files changed, 47 insertions(+), 44 deletions(-)

diff --git a/ts/features/design-system/core/DSLogos.tsx b/ts/features/design-system/core/DSLogos.tsx
index 509c628d034..b9baf5982a1 100644
--- 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
index 0e6fdcdf3e5..98c2ef519c5 100644
--- 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
index ded00b12325..971c178cc74 100644
--- a/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx
+++ b/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx
@@ -1,3 +1,10 @@
+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";
@@ -5,18 +12,14 @@ 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>