diff --git a/ts/features/wallet/component/WalletV2PreviewCards.tsx b/ts/features/wallet/component/WalletV2PreviewCards.tsx index 48e86f21ebf..0d0381acf29 100644 --- a/ts/features/wallet/component/WalletV2PreviewCards.tsx +++ b/ts/features/wallet/component/WalletV2PreviewCards.tsx @@ -3,8 +3,12 @@ import * as React from "react"; import { connect } from "react-redux"; import { Dispatch } from "redux"; import { GlobalState } from "../../../store/reducers/types"; -import { bancomatListSelector } from "../../../store/reducers/wallet/wallets"; +import { + bancomatListSelector, + satispayListSelector +} from "../../../store/reducers/wallet/wallets"; import BancomatWalletPreview from "../bancomat/component/BancomatWalletPreview"; +import SatispayWalletPreview from "../satispay/SatispayWalletPreview"; type Props = ReturnType & ReturnType; @@ -30,13 +34,23 @@ const WalletV2PreviewCards: React.FunctionComponent = props => ( )), null )} + {pot.toUndefined( + pot.mapNullable(props.satispayList, s => ( + <> + {s.map(s => ( + + ))} + + )) + )} ); const mapDispatchToProps = (_: Dispatch) => ({}); const mapStateToProps = (state: GlobalState) => ({ - bancomatList: bancomatListSelector(state) + bancomatList: bancomatListSelector(state), + satispayList: satispayListSelector(state) }); export default connect( diff --git a/ts/features/wallet/satispay/SatispayWalletPreview.tsx b/ts/features/wallet/satispay/SatispayWalletPreview.tsx new file mode 100644 index 00000000000..d1cbd9b7aed --- /dev/null +++ b/ts/features/wallet/satispay/SatispayWalletPreview.tsx @@ -0,0 +1,42 @@ +import * as React from "react"; +import { connect } from "react-redux"; +import { Dispatch } from "redux"; +import { nullType } from "io-ts"; +import satispayImage from "../../../../img/wallet/cards-icons/satispay.png"; +import { Body } from "../../../components/core/typography/Body"; +import { IOStyles } from "../../../components/core/variables/IOStyles"; +import I18n from "../../../i18n"; +import { GlobalState } from "../../../store/reducers/types"; +import { CardPreview } from "../component/CardPreview"; + +type Props = ReturnType & + ReturnType; + +/** + * A card preview for a bancomat card + * @param props + * @constructor + */ +const SatispayWalletPreview: React.FunctionComponent = props => ( + + {I18n.t("wallet.methods.satispay.name")} + + } + image={satispayImage} + onPress={() => props.navigateToSatispayDetails()} + /> +); + +const mapDispatchToProps = (_: Dispatch) => ({ + // TODO replace with correct navigation action + navigateToSatispayDetails: () => nullType +}); + +const mapStateToProps = (_: GlobalState) => ({}); + +export default connect( + mapStateToProps, + mapDispatchToProps +)(SatispayWalletPreview);