pagopa · fabriziofff · Mar 15, 2021 · Mar 5, 2021 · Mar 5, 2021 · Mar 5, 2021
@@ -10,7 +10,7 @@ import I18n from "../../../../i18n";
 import { navigateToBancomatDetailScreen } from "../../../../store/actions/navigation";
 import { GlobalState } from "../../../../store/reducers/types";
 import { BancomatPaymentMethod } from "../../../../types/pagopa";
-import { CardPreview } from "../../component/CardPreview";
+import { CardLogoPreview } from "../../component/CardLogoPreview";
 import { useImageResize } from "../../onboarding/bancomat/screens/hooks/useImageResize";
 
 type OwnProps = { bancomat: BancomatPaymentMethod };
@@ -59,7 +59,7 @@ const BancomatWalletPreview: React.FunctionComponent<Props> = props => {
   );
 
   return (
-    <CardPreview
+    <CardLogoPreview
       left={renderLeft(props, imgDimensions)}
       image={pagoBancomatImage}
       onPress={() => props.navigateToBancomatDetails(props.bancomat)}

@@ -7,7 +7,7 @@ import bPayImage from "../../../../../img/wallet/cards-icons/bPay.png";
 import { Body } from "../../../../components/core/typography/Body";
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
 import { GlobalState } from "../../../../store/reducers/types";
-import { CardPreview } from "../../component/CardPreview";
+import { CardLogoPreview } from "../../component/CardLogoPreview";
 import { navigateToBPayDetailScreen } from "../../../../store/actions/navigation";
 import { BPayPaymentMethod } from "../../../../types/pagopa";
 import { useImageResize } from "../../onboarding/bancomat/screens/hooks/useImageResize";
@@ -62,7 +62,7 @@ const BPayWalletPreview: React.FunctionComponent<Props> = props => {
     props.bPay.abiInfo?.logoUrl
   );
   return (
-    <CardPreview
+    <CardLogoPreview
       left={renderLeft(props, imgDimensions)}
       image={bPayImage}
       onPress={() => props.navigateToBPayDetails(props.bPay)}

@@ -9,7 +9,7 @@ import { getCardIconFromBrandLogo } from "../../../../components/wallet/card/Log
 import { navigateToCobadgeDetailScreen } from "../../../../store/actions/navigation";
 import { GlobalState } from "../../../../store/reducers/types";
 import { CreditCardPaymentMethod } from "../../../../types/pagopa";
-import { CardPreview } from "../../component/CardPreview";
+import { CardLogoPreview } from "../../component/CardLogoPreview";
 import { useImageResize } from "../../onboarding/bancomat/screens/hooks/useImageResize";
 
 type OwnProps = {
@@ -65,7 +65,7 @@ const CobadgeWalletPreview: React.FunctionComponent<Props> = props => {
 
   const brandLogo = getCardIconFromBrandLogo(props.cobadge.info);
   return (
-    <CardPreview
+    <CardLogoPreview
       left={renderLeft(props, imgDimensions)}
       image={brandLogo}
       onPress={() => props.navigateToCobadgeDetails(props.cobadge)}

@@ -1,13 +1,13 @@
 import { View } from "native-base";
 import * as React from "react";
-import { Image, ImageSourcePropType, Platform, StyleSheet } from "react-native";
+import { Platform, StyleSheet } from "react-native";
 import TouchableDefaultOpacity from "../../../components/TouchableDefaultOpacity";
 import I18n from "../../../i18n";
 import variables from "../../../theme/variables";
 
 type Props = {
   left: React.ReactNode;
-  image: ImageSourcePropType;
+  right: React.ReactNode;
   onPress?: () => void;
 };
 
@@ -37,10 +37,7 @@ const styles = StyleSheet.create({
   spaced: {
     justifyContent: "space-between"
   },
-  cardLogo: {
-    height: 30,
-    width: 48
-  },
+
   rotatedCard: {
     shadowColor: "#000",
     marginBottom: -30,
@@ -60,13 +57,12 @@ const styles = StyleSheet.create({
 });
 
 /**
- * A Generic preview card layout extracted from {@link CardComponent} and simplified.
+ * A preview card layout that generalizes {@link CardPreview}.
  * Can be used to render a generic wallet preview card.
- * TODO: in this phase the CardComponent is preserved and no refactoring has been done on the pre-existing code
  * @param props
  * @constructor
  */
-export const CardPreview: React.FunctionComponent<Props> = props => (
+export const CardLayoutPreview: React.FunctionComponent<Props> = props => (
   <>
     {/* In order to render the shadow on android */}
     {Platform.OS === "android" && <View style={styles.shadowBox} />}
@@ -82,11 +78,7 @@ export const CardPreview: React.FunctionComponent<Props> = props => (
         <View style={[styles.cardInner]}>
           <View style={[styles.row, styles.spaced]}>
             {props.left}
-            <Image
-              source={props.image}
-              style={styles.cardLogo}
-              testID={"cardImage"}
-            />
+            {props.right}
           </View>
           <View spacer={true} />
         </View>

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Image, ImageSourcePropType, StyleSheet } from "react-native";
+import { CardLayoutPreview } from "./CardLayoutPreview";
+
+type Props = {
+  left: React.ReactNode;
+  image: ImageSourcePropType;
+  onPress?: () => void;
+};
+
+const styles = StyleSheet.create({
+  cardLogo: {
+    height: 30,
+    width: 48
+  }
+});
+
+/**
+ * A preview card that shows as right section an image of fixed dimensions.
+ * @param props
+ * @constructor
+ */
+export const CardLogoPreview: React.FunctionComponent<Props> = props => (
+  <CardLayoutPreview
+    left={props.left}
+    onPress={props.onPress}
+    right={
+      <Image
+        source={props.image}
+        style={styles.cardLogo}
+        testID={"cardImage"}
+      />
+    }
+  />
+);
@@ -7,11 +7,13 @@ import {
   bancomatListVisibleInWalletSelector,
   bPayListVisibleInWalletSelector,
   cobadgeListVisibleInWalletSelector,
+  privativeListVisibleInWalletSelector,
   satispayListVisibleInWalletSelector
 } from "../../../store/reducers/wallet/wallets";
 import BancomatWalletPreview from "../bancomat/component/BancomatWalletPreview";
 import BPayWalletPreview from "../bancomatpay/component/BPayWalletPreview";
 import CobadgeWalletPreview from "../cobadge/component/CobadgeWalletPreview";
+import PrivativeWalletPreview from "../privative/component/PrivativeWalletPreview";
 import SatispayWalletPreview from "../satispay/SatispayWalletPreview";
 
 type Props = ReturnType<typeof mapDispatchToProps> &
@@ -71,6 +73,18 @@ const WalletV2PreviewCards: React.FunctionComponent<Props> = props => (
         </>
       ))
     )}
+    {pot.toUndefined(
+      pot.mapNullable(props.privativeList, c => (
+        <>
+          {c.map(privativeMethod => (
+            <PrivativeWalletPreview
+              key={privativeMethod.idWallet}
+              privative={privativeMethod}
+            />
+          ))}
+        </>
+      ))
+    )}
   </>
 );
 
@@ -80,7 +94,8 @@ const mapStateToProps = (state: GlobalState) => ({
   bancomatList: bancomatListVisibleInWalletSelector(state),
   bPayList: bPayListVisibleInWalletSelector(state),
   satispayList: satispayListVisibleInWalletSelector(state),
-  cobadgeList: cobadgeListVisibleInWalletSelector(state)
+  cobadgeList: cobadgeListVisibleInWalletSelector(state),
+  privativeList: privativeListVisibleInWalletSelector(state)
 });
 
 export default connect(

@@ -0,0 +1,17 @@
+import { render } from "@testing-library/react-native";
+import { View } from "native-base";
+import * as React from "react";
+import { CardLayoutPreview } from "../CardLayoutPreview";
+
+describe("CardLayoutPreview", () => {
+  it("should show the left and the right received components", () => {
+    const left = () => <View testID="leftComponent" />;
+    const right = () => <View testID="right" />;
+    const component = render(
+      <CardLayoutPreview left={left()} right={right()} />
+    );
+
+    expect(component.queryByTestId("leftComponent")).not.toBeNull();
+    expect(component.queryByTestId("right")).not.toBeNull();
+  });
+});
@@ -0,0 +1,26 @@
+import { fireEvent, render } from "@testing-library/react-native";
+import { View } from "native-base";
+import * as React from "react";
+import { CardLogoPreview } from "../CardLogoPreview";
+import anImage from "../../../../../img/wallet/cards-icons/bPay.png";
+
+describe("CardLogoPreview", () => {
+  it("should show the left component, the image and when press should run the onPress", () => {
+    const left = () => <View testID="leftComponent" />;
+    const onPress = jest.fn();
+    const component = render(
+      <CardLogoPreview left={left()} image={anImage} onPress={onPress} />
+    );
+    const cardImage = component.queryByTestId("cardImage");
+    const cardPreview = component.queryByTestId("cardPreview");
+
+    expect(component.queryByTestId("leftComponent")).not.toBeNull();
+    expect(cardImage).not.toBeNull();
+    expect(cardImage).toHaveProp("source", anImage);
+
+    if (cardPreview !== null) {
+      fireEvent.press(cardPreview);
+      expect(onPress).toHaveBeenCalledTimes(1);
+    }
+  });
+});
@@ -0,0 +1,113 @@
+import * as React from "react";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { Option } from "fp-ts/lib/Option";
+import {
+  Image,
+  ImageSourcePropType,
+  ImageStyle,
+  ImageURISource,
+  StyleProp,
+  StyleSheet
+} from "react-native";
+import { Body } from "../../../../components/core/typography/Body";
+import { navigateToPrivativeDetailScreen } from "../../../../store/actions/navigation";
+import { GlobalState } from "../../../../store/reducers/types";
+import { PrivativePaymentMethod } from "../../../../types/pagopa";
+import { IOStyles } from "../../../../components/core/variables/IOStyles";
+import { useImageResize } from "../../onboarding/bancomat/screens/hooks/useImageResize";
+import { CardLayoutPreview } from "../../component/CardLayoutPreview";
+import unknownGdo from "../../../../../img/wallet/unknown-gdo.png";
+
+type OwnProps = {
+  privative: PrivativePaymentMethod;
+};
+
+type Props = ReturnType<typeof mapDispatchToProps> &
+  ReturnType<typeof mapStateToProps> &
+  OwnProps;
+
+const BASE_IMG_W = 160;
+const BASE_IMG_H = 20;
+
+const styles = StyleSheet.create({
+  unknownLoyaltyLogo: {
+    width: 40,
+    height: 40,
+    resizeMode: "contain"
+  }
+});
+const fallbackLoyaltyLogo: React.ReactElement = (
+  <Image
+    source={unknownGdo}
+    style={styles.unknownLoyaltyLogo}
+    key={"unknownLoyaltyLogo"}
+    testID={"unknownLoyaltyLogo"}
+  />
+);
+
+const renderRight = (props: Props, size: Option<[number, number]>) =>
+  size.fold(fallbackLoyaltyLogo, imgDim => {
+    const imageUrl = props.privative.icon;
+
+    const imageStyle: StyleProp<ImageStyle> = {
+      width: imgDim[0],
+      height: imgDim[1],
+      resizeMode: "contain"
+    };
+    return (
+      <Image
+        source={imageUrl}
+        style={imageStyle}
+        key={"loyaltyLogo"}
+        testID={"loyaltyLogo"}
+      />
+    );
+  });
+
+/**
+ * Typeguard for handle backward compatibility of icon type
+ * @param image
+ */
+const isImageURISource = (
+  image: ImageSourcePropType
+): image is ImageURISource =>
+  typeof image !== "number" && (image as ImageURISource).uri !== undefined;
+
+/**
+ * A card preview for a privative card
+ * @param props
+ * @constructor
+ */
+const PrivativeWalletPreview: React.FunctionComponent<Props> = props => {
+  const rightElement = isImageURISource(props.privative.icon)
+    ? renderRight(
+        props,
+        useImageResize(BASE_IMG_W, BASE_IMG_H, props.privative.icon.uri)
+      )
+    : fallbackLoyaltyLogo;
+
+  return (
+    <CardLayoutPreview
+      left={
+        <Body style={IOStyles.flex} numberOfLines={1} testID={"caption"}>
+          {props.privative.caption}
+        </Body>
+      }
+      right={rightElement}
+      onPress={() => props.navigateToPrivativeDetails(props.privative)}
+    />
+  );
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  navigateToPrivativeDetails: (privative: PrivativePaymentMethod) =>
+    dispatch(navigateToPrivativeDetailScreen(privative))
+});
+
+const mapStateToProps = (_: GlobalState) => ({});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PrivativeWalletPreview);