feat(Bonus Pagamenti Digitali): [#175883276] Adds the SatispayCard Wa…

…llet preview (#2456) * [#175883276] Creates the SatispayPreviewCard for wallet * [#175883276] Fixes * Update ts/features/wallet/component/WalletV2PreviewCards.tsx Co-authored-by: Matteo Boschi <[email protected]> * [#175883276] Fixes Co-authored-by: Matteo Boschi <[email protected]>
pagopa · Nov 30, 2020 · 5892971 · 5892971
1 parent b87e4eb
commit 5892971
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 2 deletions.
diff --git 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<typeof mapDispatchToProps> &
   ReturnType<typeof mapStateToProps>;
@@ -30,13 +34,23 @@ const WalletV2PreviewCards: React.FunctionComponent<Props> = props => (
       )),
       null
     )}
+    {pot.toUndefined(
+      pot.mapNullable(props.satispayList, s => (
+        <>
+          {s.map(s => (
+            <SatispayWalletPreview key={s.idWallet} />
+          ))}
+        </>
+      ))
+    )}
   </>
 );
 
 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
@@ -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<typeof mapDispatchToProps> &
+  ReturnType<typeof mapStateToProps>;
+
+/**
+ * A card preview for a bancomat card
+ * @param props
+ * @constructor
+ */
+const SatispayWalletPreview: React.FunctionComponent<Props> = props => (
+  <CardPreview
+    left={
+      <Body style={IOStyles.flex} numberOfLines={1}>
+        {I18n.t("wallet.methods.satispay.name")}
+      </Body>
+    }
+    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);