diff --git a/img/wallet/payment-methods/satispay-logoi.png b/img/wallet/payment-methods/satispay-logo.png similarity index 100% rename from img/wallet/payment-methods/satispay-logoi.png rename to img/wallet/payment-methods/satispay-logo.png diff --git a/ts/features/wallet/bancomatpay/BPayCard.tsx b/ts/features/wallet/bancomatpay/BPayCard.tsx new file mode 100644 index 00000000000..a9ccce9e0ee --- /dev/null +++ b/ts/features/wallet/bancomatpay/BPayCard.tsx @@ -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; + +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) => { + const imgDimensions = useImageResize(BASE_IMG_W, BASE_IMG_H, props.abiLogo); + + const imageStyle: StyleProp | undefined = imgDimensions.fold( + undefined, + imgDim => ({ + width: imgDim[0], + height: imgDim[1], + resizeMode: "contain" + }) + ); + + return ( + + ) : ( +

{props.bankName}

+ ) + } + bottomLeftCorner={ + + {props.phone && ( + <> + + + +

{props.phone.replace(/\*/g, "●")}

+ + + + )} + {(props.nameSurname ?? "").toLocaleUpperCase()} + + } + bottomRightCorner={ + + } + /> + ); +}; + +const mapStateToProps = (state: GlobalState) => ({ + nameSurname: profileNameSurnameSelector(state) +}); + +export default connect(mapStateToProps)(BPayCard); diff --git a/ts/features/wallet/component/BaseCardComponent.tsx b/ts/features/wallet/component/BaseCardComponent.tsx new file mode 100644 index 00000000000..923071ba6e4 --- /dev/null +++ b/ts/features/wallet/component/BaseCardComponent.tsx @@ -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) => ( + <> + {Platform.OS === "android" && } + + {props.topLeftCorner} + + {props.bottomLeftCorner} + {props.bottomRightCorner} + + + +); + +export default BaseCardComponent; diff --git a/ts/features/wallet/satispay/SatispayCard.tsx b/ts/features/wallet/satispay/SatispayCard.tsx new file mode 100644 index 00000000000..c09e4f68cf0 --- /dev/null +++ b/ts/features/wallet/satispay/SatispayCard.tsx @@ -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; + +const styles = StyleSheet.create({ + satispayLogoMin: { + width: 60, + height: 36, + resizeMode: "contain" + }, + satispayLogoExt: { + width: 132, + height: 33, + resizeMode: "contain" + } +}); + +const SatispayCard: React.FunctionComponent = (props: Props) => ( + + } + bottomLeftCorner={ + {(props.nameSurname ?? "").toLocaleUpperCase()} + } + bottomRightCorner={ + + } + /> +); + +const mapStateToProps = (state: GlobalState) => ({ + nameSurname: profileNameSurnameSelector(state) +}); + +export default connect(mapStateToProps)(SatispayCard);