pagopa · fabriziofff · Nov 27, 2020 · Nov 26, 2020 · Nov 26, 2020 · Nov 26, 2020
@@ -0,0 +1,80 @@
+import * as React from "react";
+import { Image, ImageStyle, StyleProp, StyleSheet } from "react-native";
+import { connect } from "react-redux";
+import { View } from "native-base";
+import BaseCardComponent from "../component/BaseCardComponent";
+import bancomatLogoMin from "../../../../img/wallet/payment-methods/bancomatpay-logo.png";
+import { Body } from "../../../components/core/typography/Body";
+import { GlobalState } from "../../../store/reducers/types";
+import { profileNameSurnameSelector } from "../../../store/reducers/profile";
+import { useImageResize } from "../onboarding/bancomat/screens/hooks/useImageResize";
+import { H3 } from "../../../components/core/typography/H3";
+import IconFont from "../../../components/ui/IconFont";
+import { H4 } from "../../../components/core/typography/H4";
+
+type Props = {
+  phone?: string;
+  bankName?: string;
+  abiLogo?: string;
+} & ReturnType<typeof mapStateToProps>;
+
+const styles = StyleSheet.create({
+  bpayLogo: {
+    width: 80,
+    height: 40,
+    resizeMode: "contain"
+  },
+  bankName: { textTransform: "capitalize" }
+});
+
+const BASE_IMG_W = 160;
+const BASE_IMG_H = 40;
+
+const BPayCard: 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} />
+        ) : (
+          <H3 style={styles.bankName}>{props.bankName}</H3>
+        )
+      }
+      bottomLeftCorner={
+        <View>
+          {props.phone && (
+            <>
+              <View style={{ flexDirection: "row" }}>
+                <IconFont name={"io-phone"} size={22} />
+                <View hspacer small />
+                <H4 weight={"Bold"}>{props.phone.replace(/\*/g, "●")}</H4>
+              </View>
+              <View spacer small />
+            </>
+          )}
+          <Body>{(props.nameSurname ?? "").toLocaleUpperCase()}</Body>
+        </View>
+      }
+      bottomRightCorner={
+        <Image style={styles.bpayLogo} source={bancomatLogoMin} />
+      }
+    />
+  );
+};
+
+const mapStateToProps = (state: GlobalState) => ({
+  nameSurname: profileNameSurnameSelector(state)
+});
+
+export default connect(mapStateToProps)(BPayCard);
@@ -0,0 +1,74 @@
+import { View } from "native-base";
+import * as React from "react";
+import { Platform, StyleSheet } from "react-native";
+import { widthPercentageToDP } from "react-native-responsive-screen";
+import customVariables from "../../../theme/variables";
+
+type Props = {
+  topLeftCorner: React.ReactNode;
+  bottomLeftCorner: React.ReactNode;
+  bottomRightCorner: React.ReactNode;
+};
+
+const styles = StyleSheet.create({
+  cardBox: {
+    height: 192,
+    width: widthPercentageToDP("90%"),
+    maxWidth: 343,
+    paddingHorizontal: customVariables.contentPadding,
+    paddingTop: 20,
+    paddingBottom: 22,
+    flexDirection: "column",
+    justifyContent: "space-between",
+    backgroundColor: customVariables.brandGray,
+    borderRadius: 8,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 3
+    },
+    shadowOpacity: 0.18,
+    shadowRadius: 4.65,
+    zIndex: 7,
+    elevation: 7
+  },
+  shadowBox: {
+    marginBottom: -13,
+    borderRadius: 8,
+    borderTopWidth: 10,
+    borderTopColor: "rgba(0,0,0,0.1)",
+    height: 15,
+    width: widthPercentageToDP("90%"),
+    maxWidth: 343
+  },
+  bottomRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  bancomatLogo: {
+    width: 60,
+    height: 36,
+    resizeMode: "contain"
+  }
+});
+
+/**
+ * The base component that represents a full bancomat card
+ * @param props
+ * @constructor
+ */
+const BaseCardComponent: React.FunctionComponent<Props> = (props: Props) => (
+  <>
+    {Platform.OS === "android" && <View style={styles.shadowBox} />}
+    <View style={styles.cardBox}>
+      <View>{props.topLeftCorner}</View>
+      <View style={styles.bottomRow}>
+        {props.bottomLeftCorner}
+        {props.bottomRightCorner}
+      </View>
+    </View>
+  </>
+);
+
+export default BaseCardComponent;
@@ -0,0 +1,44 @@
+import * as React from "react";
+import { Image, StyleSheet } from "react-native";
+import { connect } from "react-redux";
+import BaseCardComponent from "../component/BaseCardComponent";
+import satispayLogoExt from "../../../../img/wallet/payment-methods/satispay-logo.png";
+import satispayLogoMin from "../../../../img/wallet/cards-icons/satispay.png";
+import { Body } from "../../../components/core/typography/Body";
+import { GlobalState } from "../../../store/reducers/types";
+import { profileNameSurnameSelector } from "../../../store/reducers/profile";
+
+type Props = ReturnType<typeof mapStateToProps>;
+
+const styles = StyleSheet.create({
+  satispayLogoMin: {
+    width: 60,
+    height: 36,
+    resizeMode: "contain"
+  },
+  satispayLogoExt: {
+    width: 132,
+    height: 33,
+    resizeMode: "contain"
+  }
+});
+
+const SatispayCard: React.FunctionComponent<Props> = (props: Props) => (
+  <BaseCardComponent
+    topLeftCorner={
+      <Image source={satispayLogoExt} style={styles.satispayLogoExt} />
+    }
+    bottomLeftCorner={
+      <Body>{(props.nameSurname ?? "").toLocaleUpperCase()}</Body>
+    }
+    bottomRightCorner={
+      <Image style={styles.satispayLogoMin} source={satispayLogoMin} />
+    }
+  />
+);
+
+const mapStateToProps = (state: GlobalState) => ({
+  nameSurname: profileNameSurnameSelector(state)
+});
+
+export default connect(mapStateToProps)(SatispayCard);