feat(Bonus Pagamenti Digitali): [#176578587] Cobadge detail screen

locales/en/index.yml

@@ -759,6 +759,8 @@ wallet:
       dateTime: Date and time
       detailTitle: Details
       help: If you have encountered a problem entering this payment method, write for more information and details
+    details:
+      header: Method detail
   searchAbi:
     header: "Add {{methodName}}"
     bancomat:
@@ -1174,6 +1176,10 @@ wallet:
         one: "Satispay"
         two: " can't be used yet to make payments through IO"
         three: ": this feature will be enabled on future app version release."
+  cobadge:
+    details:
+      card:
+        validUntil: "Valid until {{expireMonth}}/{{expireYear}}"
   newRemove:
     title: "Delete this payment method?"
     body: "This payment method will be removed. Any related feature, such as Cashback, will be disabled within 24 hours."

locales/it/index.yml

@@ -779,6 +779,8 @@ wallet:
       dateTime: Data e ora
       detailTitle: Dettaglio
       help: Se hai riscontrato un problema durante l'inserimento di questo metodo di pagamento, scrivi per maggiori informazioni e dettagli
+    details:
+      header: Dettaglio Metodo
   searchAbi:
     header: Aggiungi {{methodName}}
     bancomat:
@@ -1201,6 +1203,10 @@ wallet:
         one: "Satispay"
         two: " non consente ancora di pagare tramite IO"
         three: ": questa funzione verrà abilitata con le prossime versioni dell’app."
+  cobadge:
+    details:
+      card:
+        validUntil: "Valida fino al {{expireMonth}}/{{expireYear}}"
   newRemove:
     title: "Vuoi eliminare questo metodo?"
     body: "Questo metodo di pagamento verrà rimosso. Eventuali funzioni collegate, come il Cashback, verranno disattivate entro 24h."

ts/features/wallet/cobadge/component/CobadgeCard.tsx

@@ -0,0 +1,112 @@
+import * as React from "react";
+import {
+  Image,
+  ImageSourcePropType,
+  ImageStyle,
+  StyleProp,
+  StyleSheet
+} from "react-native";
+import { View } from "native-base";
+import I18n from "../../../../i18n";
+import BaseCardComponent from "../../component/BaseCardComponent";
+import { useImageResize } from "../../onboarding/bancomat/screens/hooks/useImageResize";
+import { H4 } from "../../../../components/core/typography/H4";
+import { H5 } from "../../../../components/core/typography/H5";
+import abiLogoFallback from "../../../../../img/wallet/cards-icons/abiLogoFallback.png";
+
+type Props = {
+  caption?: string;
+  expireMonth?: string;
+  expireYear?: string;
+  abiLogo?: string;
+  brandLogo: ImageSourcePropType;
+};
+
+const styles = StyleSheet.create({
+  abiLogoFallback: {
+    width: 40,
+    height: 40,
+    resizeMode: "contain"
+  },
+  brandLogo: {
+    width: 48,
+    height: 31,
+    resizeMode: "contain"
+  },
+  bankName: { textTransform: "capitalize" }
+});
+
+const BASE_IMG_W = 160;
+const BASE_IMG_H = 40;
+
+const CobadgeCard: React.FunctionComponent<Props> = (props: Props) => {
+  const imgDimensions = useImageResize(BASE_IMG_W, BASE_IMG_H, props.abiLogo);
+
+  const imageStyle: StyleProp<ImageStyle> | undefined = imgDimensions.fold(
+    undefined,
+    imgDim => ({
+      width: imgDim[0],
+      height: imgDim[1],
+      resizeMode: "contain"
+    })
+  );
+  return (
+    <BaseCardComponent
+      topLeftCorner={
+        <>
+          {props.abiLogo && imageStyle ? (
+            <Image
+              source={{ uri: props.abiLogo }}
+              style={imageStyle}
+              key={"abiLogo"}
+              testID={"abiLogo"}
+            />
+          ) : (
+            <Image
+              source={abiLogoFallback}
+              style={styles.abiLogoFallback}
+              key={"abiLogoFallback"}
+              testID={"abiLogoFallback"}
+            />
+          )}
+          {props.expireMonth && props.expireYear && (
+            <>
+              <View spacer={true} />
+              <H5
+                weight={"Regular"}
+                color={"bluegrey"}
+                testID={"expirationDate"}
+              >
+                {I18n.t("wallet.cobadge.details.card.validUntil", {
+                  expireMonth: props.expireMonth,
+                  expireYear: props.expireYear
+                })}
+              </H5>
+            </>
+          )}
+        </>
+      }
+      bottomLeftCorner={
+        <View>
+          {props.caption && (
+            <>
+              <View style={{ flexDirection: "row" }}>
+                <H4 weight={"Regular"} testID="caption">
+                  {props.caption}
+                </H4>
+              </View>
+              <View spacer small />
+            </>
+          )}
+        </View>
+      }
+      bottomRightCorner={
+        <View style={{ justifyContent: "flex-end", flexDirection: "column" }}>
+          <Image style={styles.brandLogo} source={props.brandLogo} />
+        </View>
+      }
+    />
+  );
+};
+
+export default CobadgeCard;

ts/features/wallet/cobadge/component/CobadgeWalletPreview.tsx

@@ -1,16 +1,16 @@
+import { Option } from "fp-ts/lib/Option";
 import * as React from "react";
 import { Image, ImageStyle, StyleProp } from "react-native";
-import { Option } from "fp-ts/lib/Option";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 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 { getCardIconFromBrandLogo } from "../../../../components/wallet/card/Logo";
 import { navigateToCobadgeDetailScreen } from "../../../../store/actions/navigation";
+import { GlobalState } from "../../../../store/reducers/types";
 import { CreditCardPaymentMethod } from "../../../../types/pagopa";
+import { CardPreview } from "../../component/CardPreview";
 import { useImageResize } from "../../onboarding/bancomat/screens/hooks/useImageResize";
-import { getCardIconFromBrandLogo } from "../../../../components/wallet/card/Logo";
 
 type OwnProps = {
   cobadge: CreditCardPaymentMethod;
@@ -62,10 +62,12 @@ const CobadgeWalletPreview: React.FunctionComponent<Props> = props => {
     BASE_IMG_H,
     props.cobadge.abiInfo?.logoUrl
   );
+
+  const brandLogo = getCardIconFromBrandLogo(props.cobadge.info);
   return (
     <CardPreview
       left={renderLeft(props, imgDimensions)}
-      image={getCardIconFromBrandLogo(props.cobadge.info)}
+      image={brandLogo}
       onPress={() => props.navigateToCobadgeDetails(props.cobadge)}
     />
   );

ts/features/wallet/cobadge/component/__test__/CobadgeCard.test.tsx

@@ -0,0 +1,94 @@
+import { render } from "@testing-library/react-native";
+import * as React from "react";
+import { ImageSourcePropType } from "react-native";
+import { Store } from "redux";
+import { Provider } from "react-redux";
+import configureMockStore from "redux-mock-store";
+// import { pot } from "italia-ts-commons";
+import { none, some } from "fp-ts/lib/Option";
+import * as hooks from "../../../onboarding/bancomat/screens/hooks/useImageResize";
+import CobadgeCard from "../CobadgeCard";
+import defaultCardIcon from "../../../../../../img/wallet/cards-icons/unknown.png";
+
+jest.mock("../../../onboarding/bancomat/screens/hooks/useImageResize");
+
+const aCaption = "****1234";
+const anAbiLogo = "http://127.0.0.1:3000/static_contents/logos/abi/03069.png";
+const aBrandLogo = defaultCardIcon;
+const anExpireMonth = "6";
+const anExpireYear = "2021";
+describe("CoBadgeWalletPreview component", () => {
+  const mockStore = configureMockStore();
+  // eslint-disable-next-line functional/no-let
+  let store: ReturnType<typeof mockStore>;
+
+  beforeEach(() => {
+    store = mockStore();
+  });
+  it("should show the abiLogoFallback if there isn't the abiLogo", () => {
+    jest.spyOn(hooks, "useImageResize").mockReturnValue(none);
+    const component = getComponent(store, aBrandLogo);
+    const abiLogoFallbackComponent = component.queryByTestId("abiLogoFallback");
+
+    expect(abiLogoFallbackComponent).not.toBeNull();
+    expect(abiLogoFallbackComponent).toHaveProp("source", {
+      testUri: "../../../img/wallet/cards-icons/abiLogoFallback.png"
+    });
+  });
+
+  it("should show the abiLogo if there is an abiLogo and useImageResize return some value", () => {
+    jest.spyOn(hooks, "useImageResize").mockReturnValue(some([15, 15]));
+    const component = getComponent(store, aBrandLogo, anAbiLogo);
+    const abiLogo = component.queryByTestId("abiLogo");
+
+    expect(abiLogo).not.toBeNull();
+    expect(abiLogo).toHaveProp("source", { uri: anAbiLogo });
+  });
+
+  it("should show the expiration date if both expireMonth and expireYear are defined", () => {
+    jest.spyOn(hooks, "useImageResize").mockReturnValue(none);
+    const component = getComponent(
+      store,
+      aBrandLogo,
+      anAbiLogo,
+      aCaption,
+      anExpireMonth,
+      anExpireYear
+    );
+    const expirationDate = component.queryByTestId("expirationDate");
+
+    expect(expirationDate).not.toBeNull();
+    expect(expirationDate).toHaveTextContent(
+      `Valid until ${anExpireMonth}/${anExpireYear}`
+    );
+  });
+
+  it("should show the caption if is defined", () => {
+    jest.spyOn(hooks, "useImageResize").mockReturnValue(none);
+    const component = getComponent(store, aBrandLogo, anAbiLogo, aCaption);
+    const caption = component.queryByTestId("caption");
+
+    expect(caption).not.toBeNull();
+    expect(caption).toHaveTextContent(aCaption);
+  });
+});
+
+const getComponent = (
+  store: Store<unknown>,
+  brandLogo: ImageSourcePropType,
+  abiLogo?: string,
+  caption?: string,
+  expireMonth?: string,
+  expireYear?: string
+) =>
+  render(
+    <Provider store={store}>
+      <CobadgeCard
+        brandLogo={brandLogo}
+        caption={caption}
+        expireMonth={expireMonth}
+        expireYear={expireYear}
+        abiLogo={abiLogo}
+      />
+    </Provider>
+  );

ts/features/wallet/cobadge/component/__test__/CobadgeWalletPreview.test.tsx

@@ -136,7 +136,9 @@ describe("CobadgeWalletPreview component", () => {
     const expectedPayload = {
       type: NavigationActions.NAVIGATE,
       routeName: ROUTES.WALLET_COBADGE_DETAIL,
-      params: { cobadge: aCobadgeCard }
+      params: {
+        cobadge: aCobadgeCard
+      }
     };
     if (cardComponent) {
       fireEvent.press(cardComponent);