feat: [#173639055] Display all cc in wallet section (#2196)

* [#173639055] wip * [#173639055] display all cc * [#173639055] remove useless fragment * [#173639055] fixes * [#173639055] refactoring * [#173639055] navigate to wallet transaction instead of wallets list * [#173639055] fix duplicated keys warning Co-authored-by: Cristiano Tofani <[email protected]>
pagopa · Sep 15, 2020 · c7e5e66 · c7e5e66
1 parent ba9513a
commit c7e5e66
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 47 deletions.
diff --git a/ts/components/wallet/card/CardsFan.tsx b/ts/components/wallet/card/CardsFan.tsx
@@ -9,11 +9,7 @@ type Props = Readonly<{
 }>;
 
 const CardsFan: React.SFC<Props> = props => (
-    <RotatedCards
-      cardType="Preview"
-      wallets={props.wallets}
-      onClick={props.navigateToWalletList}
-    />
-  );
+  <RotatedCards wallets={props.wallets} onClick={props.navigateToWalletList} />
+);
 
 export default CardsFan;
diff --git a/ts/components/wallet/card/RotatedCards.tsx b/ts/components/wallet/card/RotatedCards.tsx
@@ -1,6 +1,7 @@
 import { Text, View } from "native-base";
 import * as React from "react";
 import { Platform, StyleSheet } from "react-native";
+import { fromNullable } from "fp-ts/lib/Option";
 import I18n from "../../../i18n";
 
 import { Wallet } from "../../../types/pagopa";
@@ -11,7 +12,7 @@ import CardComponent from "./CardComponent";
 import Logo from "./Logo";
 
 const styles = StyleSheet.create({
-  rotadedCard: {
+  rotatedCard: {
     shadowColor: "#000",
     marginBottom: -30,
     flex: 1,
@@ -31,20 +32,25 @@ const styles = StyleSheet.create({
   }
 });
 
+const FOUR_UNICODE_CIRCLES = "\u25cf".repeat(4);
+const HIDDEN_CREDITCARD_NUMBERS = `${FOUR_UNICODE_CIRCLES} `.repeat(4);
+
 interface Props {
   // tslint-prettier doesn't yet support the readonly tuple syntax
   // eslint-disable-next-line
-  wallets?: readonly [Wallet] | readonly [Wallet, Wallet];
-  cardType: "Preview";
-  onClick: () => void;
+  wallets?: ReadonlyArray<Wallet>;
+  onClick: (wallet: Wallet) => void;
 }
 
 export class RotatedCards extends React.PureComponent<Props> {
+  constructor(props: Props) {
+    super(props);
+    this.cardPreview = this.cardPreview.bind(this);
+  }
+
   private emptyCardPreview(): React.ReactNode {
-    const FOUR_UNICODE_CIRCLES = "\u25cf".repeat(4);
-    const HIDDEN_CREDITCARD_NUMBERS = `${FOUR_UNICODE_CIRCLES} `.repeat(4);
     return (
-      <View style={[styles.rotadedCard]}>
+      <View style={[styles.rotatedCard]}>
         <View style={[CreditCardStyles.card, CreditCardStyles.flatBottom]}>
           <View style={[CreditCardStyles.cardInner, CreditCardStyles.row]}>
             <View style={[CreditCardStyles.row, CreditCardStyles.numberArea]}>
@@ -61,8 +67,28 @@ export class RotatedCards extends React.PureComponent<Props> {
     );
   }
 
+  private cardPreview(wallet: Wallet, isLastItem: boolean): React.ReactNode {
+    const { onClick } = this.props;
+    return fromNullable(wallet).fold(undefined, w => (
+      <React.Fragment key={`wallet_${w.idWallet}`}>
+        <TouchableDefaultOpacity
+          onPress={() => onClick(w)}
+          accessible={true}
+          accessibilityLabel={I18n.t("wallet.accessibility.cardsPreview")}
+          accessibilityRole={"button"}
+        >
+          {Platform.OS === "android" && <View style={styles.shadowBox} />}
+          <View style={styles.rotatedCard}>
+            <CardComponent type={"Preview"} wallet={w} />
+          </View>
+        </TouchableDefaultOpacity>
+        {!isLastItem && <View spacer={true} />}
+      </React.Fragment>
+    ));
+  }
+
   public render() {
-    const { wallets, cardType, onClick } = this.props;
+    const { wallets } = this.props;
 
     return wallets === undefined ? (
       <View>
@@ -71,26 +97,9 @@ export class RotatedCards extends React.PureComponent<Props> {
       </View>
     ) : (
       <View style={styles.container}>
-        <TouchableDefaultOpacity
-          onPress={onClick}
-          accessible={true}
-          accessibilityLabel={I18n.t("wallet.accessibility.cardsPreview")}
-          accessibilityRole={"button"}
-        >
-          {Platform.OS === "android" && <View style={styles.shadowBox} />}
-          <View style={styles.rotadedCard}>
-            <CardComponent type={cardType} wallet={wallets[0]} />
-          </View>
-          {typeof wallets[1] !== "undefined" && (
-            <>
-              <View spacer={true} />
-              {Platform.OS === "android" && <View style={styles.shadowBox} />}
-              <View style={styles.rotadedCard}>
-                <CardComponent type={cardType} wallet={wallets[1]} />
-              </View>
-            </>
-          )}
-        </TouchableDefaultOpacity>
+        {wallets.map((w, idx) =>
+          this.cardPreview(w, idx === wallets.length - 1)
+        )}
         <View spacer={true} />
       </View>
     );

diff --git a/ts/screens/wallet/WalletHomeScreen.tsx b/ts/screens/wallet/WalletHomeScreen.tsx
@@ -41,7 +41,8 @@ import {
   navigateToPaymentScanQrCode,
   navigateToTransactionDetailsScreen,
   navigateToWalletAddPaymentMethod,
-  navigateToWalletList
+  navigateToWalletList,
+  navigateToWalletTransactionsScreen
 } from "../../store/actions/navigation";
 import { Dispatch } from "../../store/actions/types";
 import {
@@ -232,7 +233,13 @@ class WalletHomeScreen extends React.PureComponent<Props> {
     );
   }
 
-  private cardPreview(wallets: ReadonlyArray<Wallet>) {
+  private getCreditCards = () =>
+    pot
+      .getOrElse(this.props.potWallets, [])
+      .filter(w => w.type === TypeEnum.CREDIT_CARD);
+
+  private cardPreview() {
+    const wallets = this.getCreditCards();
     // we have to render only wallets of credit card type
     const validWallets = wallets.filter(w => w.type === TypeEnum.CREDIT_CARD);
     const noMethod =
@@ -252,13 +259,8 @@ class WalletHomeScreen extends React.PureComponent<Props> {
         {this.cardHeader(false, noMethod)}
         {validWallets.length > 0 ? (
           <RotatedCards
-            cardType="Preview"
-            wallets={
-              validWallets.length === 1
-                ? [validWallets[0]]
-                : [validWallets[0], validWallets[1]]
-            }
-            onClick={this.props.navigateToWalletList}
+            wallets={validWallets}
+            onClick={this.props.navigateToWalletTransactionsScreen}
           />
         ) : null}
         {/* Display this item only if the flag is enabled */}
@@ -456,13 +458,11 @@ class WalletHomeScreen extends React.PureComponent<Props> {
   public render(): React.ReactNode {
     const { potWallets, potTransactions, historyPayments } = this.props;
 
-    const wallets = pot.getOrElse(potWallets, []);
-
     const headerContent = pot.isLoading(potWallets)
       ? this.loadingWalletsHeader()
       : pot.isError(potWallets)
       ? this.errorWalletsHeader()
-      : this.cardPreview(wallets);
+      : this.cardPreview();
 
     const transactionContent = pot.isError(potTransactions)
       ? this.transactionError()
@@ -507,7 +507,9 @@ class WalletHomeScreen extends React.PureComponent<Props> {
 
   private getHeaderHeight() {
     return (
-      250 + (bonusVacanzeEnabled ? this.props.allActiveBonus.length * 65 : 0)
+      250 +
+      (bonusVacanzeEnabled ? this.props.allActiveBonus.length * 65 : 0) +
+      this.getCreditCards().length * 56
     );
   }
 }
@@ -536,6 +538,8 @@ const mapStateToProps = (state: GlobalState) => {
 const mapDispatchToProps = (dispatch: Dispatch) => ({
   navigateToWalletAddPaymentMethod: (keyFrom?: string) =>
     dispatch(navigateToWalletAddPaymentMethod({ inPayment: none, keyFrom })),
+  navigateToWalletTransactionsScreen: (selectedWallet: Wallet) =>
+    dispatch(navigateToWalletTransactionsScreen({ selectedWallet })),
   navigateToWalletList: () => dispatch(navigateToWalletList()),
   navigateToPaymentScanQrCode: () => dispatch(navigateToPaymentScanQrCode()),
   navigateToTransactionDetailsScreen: (transaction: Transaction) => {