feat(Bonus Pagamenti Digitali): [#175142335] Connects Search Bank screen with store and remote data

locales/en/index.yml

@@ -626,7 +626,8 @@ wallet:
       text2: " on which you have an active Pagobancomat card. Otherwise we will look for all the cards associated with you: by continuing you accept the "
       text3: information on the processing of personal data
     bankName: Name of the bank
-    noName: Name not found
+    noName: Name unavailable
+    loading: Loading bank list...
   accessibility:
     cardsPreview: Payment methods' preview. Activate to navigate to the the list of payment methods.
     transactionListItem:

locales/it/index.yml

@@ -647,7 +647,8 @@ wallet:
       text2: " su cui hai un carta Pagobancomat attiva. Altrimenti cercheremo tutte le carta associate a te: proseguendo accetti l’"
       text3: informativa sul trattamento dei dati personali
     bankName: Denominazione della banca
-    noName: Nome non trovato
+    noName: Nome non disponibile
+    loading: Carico la lista delle banche...
   accessibility:
     cardsPreview: Anteprima dei metodi di pagamento. Attiva per accedere alla lista dei tuoi metodi
     transactionListItem:

ts/features/wallet/onboarding/bancomat/components/BankPreviewItem.tsx

@@ -12,7 +12,7 @@ import IconFont from "../../../../../components/ui/IconFont";
 type Props = {
   bank: Abi;
   inList: boolean;
-  onPress: () => void;
+  onPress: (abi: string) => void;
 };
 
 const BASE_IMG_H = 40;
@@ -83,6 +83,7 @@ export const BankPreviewItem: React.FunctionComponent<Props> = (
     resizeMode: "contain"
   };
 
+  const onItemPress = () => props.bank.abi && props.onPress(props.bank.abi);
   const bankName = props.bank.name || I18n.t("wallet.searchAbi.noName");
   const bankLogo = (
     <View style={styles.boundaryImage}>
@@ -93,7 +94,7 @@ export const BankPreviewItem: React.FunctionComponent<Props> = (
   );
 
   return props.inList ? (
-    <ListItem style={styles.flexRow} onPress={props.onPress}>
+    <ListItem style={styles.flexRow} onPress={onItemPress}>
       <View style={styles.listItem}>
         <View spacer={true} />
         {bankLogo}
@@ -109,7 +110,7 @@ export const BankPreviewItem: React.FunctionComponent<Props> = (
     <ButtonDefaultOpacity
       white={true}
       style={styles.gridItem}
-      onPress={props.onPress}
+      onPress={onItemPress}
     >
       {bankLogo}
       <View spacer={true} />

ts/features/wallet/onboarding/bancomat/screens/search/SearchBankComponent.tsx

@@ -0,0 +1,148 @@
+import { Content, Input, Item, Text, View } from "native-base";
+import * as React from "react";
+import {
+  SafeAreaView,
+  FlatList,
+  ListRenderItemInfo,
+  ActivityIndicator
+} from "react-native";
+import { debounce } from "lodash";
+import I18n from "../../../../../../i18n";
+import { Body } from "../../../../../../components/core/typography/Body";
+import { Link } from "../../../../../../components/core/typography/Link";
+import { Label } from "../../../../../../components/core/typography/Label";
+import IconFont from "../../../../../../components/ui/IconFont";
+import FooterWithButtons from "../../../../../../components/ui/FooterWithButtons";
+import { Abi } from "../../../../../../../definitions/pagopa/bancomat/Abi";
+import { sortAbiByName } from "../../utils/abi";
+import { BankPreviewItem } from "../../components/BankPreviewItem";
+import {
+  cancelButtonProps,
+  confirmButtonProps
+} from "../../../../../bonus/bonusVacanze/components/buttons/ButtonConfigurations";
+import { IOColors } from "../../../../../../components/core/variables/IOColors";
+
+type Props = {
+  bankList: ReadonlyArray<Abi>;
+  isLoading: boolean;
+  onItemPress: (abi: string) => void;
+  openTosModal: () => void;
+  onCancel: () => void;
+  onContinue: () => void;
+};
+
+export const SearchBankComponent: React.FunctionComponent<Props> = (
+  props: Props
+) => {
+  const [searchText, setSearchText] = React.useState("");
+  const [filteredList, setFilteredList] = React.useState<ReadonlyArray<Abi>>(
+    []
+  );
+  const [isSearchStarted, setIsSearchStarted] = React.useState(false);
+
+  const performSearch = (text: string, bankList: ReadonlyArray<Abi>) => {
+    if (text.length === 0) {
+      setFilteredList([]);
+      setIsSearchStarted(false);
+      return;
+    }
+    setIsSearchStarted(true);
+    const resultList = bankList.filter(
+      bank =>
+        (bank.abi && bank.abi.toLowerCase().indexOf(text.toLowerCase()) > -1) ||
+        (bank.name && bank.name.toLowerCase().indexOf(text.toLowerCase()) > -1)
+    );
+    setFilteredList(sortAbiByName(resultList));
+  };
+  const debounceRef = React.useRef(debounce(performSearch, 300));
+
+  React.useEffect(() => {
+    debounceRef.current(searchText, props.bankList);
+  }, [searchText, props.bankList]);
+
+  const handleFilter = (text: string) => {
+    setSearchText(text);
+  };
+
+  const keyExtractor = (bank: Abi, index: number): string =>
+    bank.abi ? bank.abi : `abi_item_${index}`;
+
+  const renderListItem = (isList: boolean) => (
+    info: ListRenderItemInfo<Abi>
+  ) => (
+    <BankPreviewItem
+      bank={info.item}
+      inList={isList}
+      onPress={props.onItemPress}
+    />
+  );
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <Content style={{ flex: 1 }}>
+        {!isSearchStarted && (
+          <>
+            <View spacer={true} large={true} />
+            <Body>
+              <Text bold={true}>
+                {I18n.t("wallet.searchAbi.description.text1")}
+              </Text>
+              {I18n.t("wallet.searchAbi.description.text2")}
+              <Link onPress={props.openTosModal}>
+                {I18n.t("wallet.searchAbi.description.text3")}
+              </Link>
+            </Body>
+          </>
+        )}
+        <View spacer={true} />
+        {!props.isLoading && (
+          <Label color={"bluegrey"}>
+            {I18n.t("wallet.searchAbi.bankName")}
+          </Label>
+        )}
+        <Item>
+          <Input
+            value={searchText}
+            onChangeText={handleFilter}
+            disabled={props.isLoading}
+            placeholderTextColor={IOColors.bluegreyLight}
+            placeholder={
+              props.isLoading ? I18n.t("wallet.searchAbi.loading") : undefined
+            }
+          />
+          {!props.isLoading && <IconFont name="io-search" />}
+        </Item>
+        <View spacer={true} />
+        {props.isLoading ? (
+          <>
+            <View spacer={true} large={true} />
+            <ActivityIndicator
+              color={"black"}
+              size={"large"}
+              accessible={false}
+              importantForAccessibility={"no-hide-descendants"}
+              accessibilityElementsHidden={true}
+            />
+          </>
+        ) : (
+          <FlatList
+            data={filteredList}
+            renderItem={renderListItem(true)}
+            keyExtractor={keyExtractor}
+          />
+        )}
+      </Content>
+      <FooterWithButtons
+        type={"TwoButtonsInlineThird"}
+        leftButton={cancelButtonProps(
+          props.onCancel,
+          I18n.t("global.buttons.cancel")
+        )}
+        rightButton={confirmButtonProps(
+          props.onContinue,
+          I18n.t("global.buttons.continue")
+        )}
+      />
+    </SafeAreaView>
+  );
+};