feat(Bonus Pagamenti Digitali): [#175401460] Remove all WalletV2 plac…

…eholders and use the real type and implementation (#2311) * draft store action reducers * wip * complete reducer for bpdPaymentMethodActivation * wip * add update logic * [#175010541] draft layout * wip * poc pot! * rework store * schedule retry * wip retry * better focus handling * clean code * refinements * renaming * move style to styles * EnrollPaymentMethodScreen static content * link to business logic * add comment * [#175329974] Add TMPBpdScreen * fix typescript * fix test fail * [#174794326,174794981] support get payment status * [#174794326,174794981] support update (enroll + delete) payment status * locales refactoring * fix LoadAddBancomat caption * register added bancomat in the current session * wip enhance bancomat onboarding * AskBpdActivationScreen * complete navigation based on bancomat onboarding state * fix typescript * fix typescript * fix integration with legacy add payment method * renaming * support 409 http response status code * use const for loadingState * fix merge * added CardBpdToggle * bancomatbpdtoggle * add toggle factory, * fix compile errors * fix compile * change url for bpd * [#175329974] sync activationDate&deactivationDate with local type definition * Remove custom login * Update locales/it/index.yml * change char Co-authored-by: Matteo Boschi <[email protected]>
pagopa · Oct 23, 2020 · 9528094 · 9528094
1 parent a2e4440
commit 9528094
Show file tree

Hide file tree

Showing 18 changed files with 161 additions and 71 deletions.
diff --git a/.env.production b/.env.production
@@ -43,6 +43,6 @@ PLAYGROUNDS_ENABLED=NO
 BPD_ENABLED=NO
 BPD_TEST_OVERLAY=NO
 # endpoint BPD API
-BPD_API_URL_PREFIX=https://bpd-dev.azure-api.net
+BPD_API_URL_PREFIX=https://test.cstar.pagopa.it
 BPD_API_SIT='https://bpd-dev.azure-api.net'
 BPD_API_UAT='https://test.cstar.pagopa.it'
diff --git a/ts/api/pagopa.ts b/ts/api/pagopa.ts
@@ -3,6 +3,7 @@
  * to call the different API available
  */
 import { flip } from "fp-ts/lib/function";
+import { fromNullable } from "fp-ts/lib/Option";
 
 import * as t from "io-ts";
 import * as r from "italia-ts-commons/lib/requests";
@@ -21,7 +22,15 @@ import {
   TypeofApiParams
 } from "italia-ts-commons/lib/requests";
 import { Omit } from "italia-ts-commons/lib/types";
-import { fromNullable } from "fp-ts/lib/Option";
+import { BancomatCardsRequest } from "../../definitions/pagopa/bancomat/BancomatCardsRequest";
+import {
+  addWalletsBancomatCardUsingPOSTDecoder,
+  getAbiListUsingGETDefaultDecoder,
+  GetAbiListUsingGETT,
+  getPansUsingGETDefaultDecoder,
+  GetPansUsingGETT,
+  getWalletsV2UsingGETDecoder
+} from "../../definitions/pagopa/bancomat/requestTypes";
 import {
   addWalletCreditCardUsingPOSTDecoder,
   AddWalletCreditCardUsingPOSTT,
@@ -64,16 +73,6 @@ import {
 } from "../types/pagopa";
 import { getLocalePrimaryWithFallback } from "../utils/locale";
 import { fixWalletPspTagsValues } from "../utils/wallet";
-import {
-  addWalletsBancomatCardUsingPOSTDecoder,
-  AddWalletsBancomatCardUsingPOSTT,
-  getAbiListUsingGETDefaultDecoder,
-  GetAbiListUsingGETT,
-  getPansUsingGETDefaultDecoder,
-  GetPansUsingGETT,
-  getWalletsV2UsingGETDecoder
-} from "../../definitions/pagopa/bancomat/requestTypes";
-import { BancomatCardsRequest } from "../../definitions/pagopa/bancomat/BancomatCardsRequest";
 
 /**
  * A decoder that ignores the content of the payload and only decodes the status
@@ -414,7 +413,21 @@ const getPans: GetPansUsingGETT = {
   response_decoder: getPansUsingGETDefaultDecoder()
 };
 
-const addPans: AddWalletsBancomatCardUsingPOSTT = {
+export type AddWalletsBancomatCardUsingPOSTTExtra = r.IPostApiRequestType<
+  {
+    readonly Bearer: string;
+    readonly bancomatCardsRequest: BancomatCardsRequest;
+  },
+  "Content-Type" | "Authorization",
+  never,
+  | r.IResponseType<200, PatchedWalletV2ListResponse>
+  | r.IResponseType<201, undefined>
+  | r.IResponseType<401, undefined>
+  | r.IResponseType<403, undefined>
+  | r.IResponseType<404, undefined>
+>;
+
+const addPans: AddWalletsBancomatCardUsingPOSTTExtra = {
   method: "post",
   url: () => `/v1/bancomat/add-wallets`,
   query: () => ({}),

diff --git a/ts/components/wallet/card/Logo.tsx b/ts/components/wallet/card/Logo.tsx
@@ -4,6 +4,7 @@
  */
 import * as React from "react";
 import { Image, ImageStyle, StyleProp, StyleSheet } from "react-native";
+import { CardInfo } from "../../../../definitions/pagopa/bancomat/CardInfo";
 import { CreditCard } from "../../../types/pagopa";
 import { CreditCardType } from "../../../types/pagopa";
 import { getResourceNameFromUrl } from "../../../utils/url";
@@ -42,7 +43,7 @@ import defaultCardIcon from "../../../../img/wallet/cards-icons/unknown.png";
  * for more info check https://www.pivotaltracker.com/story/show/165067615
  * @param creditcard the creditcard objects from which retrieve the icon
  */
-const getCardIconFromBrandLogo = (creditcard: CreditCard) => {
+export const getCardIconFromBrandLogo = (creditcard: CreditCard | CardInfo) => {
   if (!creditcard.brandLogo) {
     return defaultCardIcon;
   }

diff --git a/ts/features/bonus/bpd/api/backendBpdClient.ts b/ts/features/bonus/bpd/api/backendBpdClient.ts
@@ -205,7 +205,7 @@ const withTestToken = (options: Options, fiscalCode: string) =>
 
 export function BackendBpdClient(
   baseUrl: string,
-  _: string,
+  token: string,
   fiscalCode: string,
   fetchApi: typeof fetch = defaultRetryingFetch()
 ) {
@@ -225,9 +225,7 @@ export function BackendBpdClient(
   const withBearerToken = <P extends extendHeaders, R>(
     f: (p: P) => Promise<R>
   ) => async (po: P): Promise<R> => {
-    const reqTestToken = await withTestToken(options, fiscalCode);
-    const testToken = await reqTestToken.text();
-    const params = Object.assign({ Bearer: testToken }, po) as P;
+    const params = Object.assign({ Bearer: token }, po) as P;
     return f(params);
   };
 

diff --git a/ts/features/bonus/bpd/components/PaymentMethodBpdList.tsx b/ts/features/bonus/bpd/components/PaymentMethodBpdList.tsx
@@ -1,14 +1,12 @@
 import * as React from "react";
 import { View } from "react-native";
-import { WalletV2 } from "../../../../../definitions/pagopa/bancomat/WalletV2";
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import { Wallet } from "../../../../types/pagopa";
-import { HPan } from "../store/actions/paymentMethods";
-import PaymentMethodBpdToggle from "./paymentMethodActivationToggle/PaymentMethodBpdToggle";
+import { PatchedWalletV2 } from "../../../../types/pagopa";
+import { bpdToggleFactory } from "./paymentMethodActivationToggle/BpdPaymentMethodToggleFactory";
 
 type Props = {
   // TODO: waiting for conversion to WalletV2
-  paymentList: ReadonlyArray<Wallet | WalletV2>;
+  paymentList: ReadonlyArray<PatchedWalletV2>;
 };
 
 /**
@@ -19,15 +17,6 @@ type Props = {
  */
 export const PaymentMethodBpdList: React.FunctionComponent<Props> = props => (
   <View style={IOStyles.flex}>
-    {props.paymentList.map(pm => (
-      <PaymentMethodBpdToggle
-        key={pm.idWallet}
-        // TODO: use hPan when available in v2 wallet
-        // TODO: when v2 is available, extract the image and caption foreach different pm
-        hPan={pm.idWallet?.toString() as HPan}
-        // TODO: read from v2 wallet when ready
-        hasBpdCapability={true}
-      />
-    ))}
+    {props.paymentList.map(pm => bpdToggleFactory(pm))}
   </View>
 );
diff --git a/ts/features/bonus/bpd/components/paymentMethodActivationToggle/BancomatBpdToggle.tsx b/ts/features/bonus/bpd/components/paymentMethodActivationToggle/BancomatBpdToggle.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import pagoBancomatImage from "../../../../../../img/wallet/cards-icons/pagobancomat.png";
+import { PatchedWalletV2 } from "../../../../../types/pagopa";
+import { HPan } from "../../store/actions/paymentMethods";
+import { hasBpdCapability } from "../../utils";
+import PaymentMethodBpdToggle from "./base/PaymentMethodBpdToggle";
+
+type Props = {
+  card: PatchedWalletV2;
+};
+
+/**
+ * Customize a {@link PaymentMethodBpdToggle} with the data from a Bancomat
+ * @param props
+ * @constructor
+ */
+export const BancomatBpdToggle: React.FunctionComponent<Props> = props => (
+  <PaymentMethodBpdToggle
+    hPan={props.card.info.hashPan as HPan}
+    icon={pagoBancomatImage}
+    hasBpdCapability={hasBpdCapability(props.card)}
+    // TODO: load bank name and displayhere
+    caption={`bank name here!`}
+  />
+);
diff --git a/...ures/bonus/bpd/components/paymentMethodActivationToggle/BpdPaymentMethodToggleFactory.tsx b/...ures/bonus/bpd/components/paymentMethodActivationToggle/BpdPaymentMethodToggleFactory.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import { WalletTypeEnum } from "../../../../../../definitions/pagopa/bancomat/WalletV2";
+import { PatchedWalletV2 } from "../../../../../types/pagopa";
+import { BancomatBpdToggle } from "./BancomatBpdToggle";
+import { CardBpdToggle } from "./CardBpdToggle";
+
+/**
+ * Return a specific toggle based on the WalletTypeEnum
+ * @param wallet
+ */
+export const bpdToggleFactory = (wallet: PatchedWalletV2) => {
+  switch (wallet.walletType) {
+    case WalletTypeEnum.Bancomat:
+      return <BancomatBpdToggle key={wallet.info.hashPan} card={wallet} />;
+    case WalletTypeEnum.Card:
+      return <CardBpdToggle key={wallet.info.hashPan} card={wallet} />;
+    default:
+      // TODO: temp, default view with default icon
+      return <CardBpdToggle key={wallet.info.hashPan} card={wallet} />;
+  }
+};
diff --git a/ts/features/bonus/bpd/components/paymentMethodActivationToggle/CardBpdToggle.tsx b/ts/features/bonus/bpd/components/paymentMethodActivationToggle/CardBpdToggle.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import { getCardIconFromBrandLogo } from "../../../../../components/wallet/card/Logo";
+import { PatchedWalletV2 } from "../../../../../types/pagopa";
+import { HPan } from "../../store/actions/paymentMethods";
+import { hasBpdCapability } from "../../utils";
+import PaymentMethodBpdToggle from "./base/PaymentMethodBpdToggle";
+
+type Props = {
+  card: PatchedWalletV2;
+};
+
+const FOUR_UNICODE_CIRCLES = "●".repeat(4);
+
+/**
+ * Customize a {@link PaymentMethodBpdToggle} with the data from a Credit Card
+ * @param props
+ * @constructor
+ */
+export const CardBpdToggle: React.FunctionComponent<Props> = props => (
+  <PaymentMethodBpdToggle
+    hPan={props.card.info.hashPan as HPan}
+    icon={getCardIconFromBrandLogo(props.card.info)}
+    hasBpdCapability={hasBpdCapability(props.card)}
+    caption={`${FOUR_UNICODE_CIRCLES} ${props.card.info.blurredNumber}`}
+  />
+);
diff --git a/...ymentMethodActivationToggle/BpdToggle.tsx → ...MethodActivationToggle/base/BpdToggle.tsx b/...ymentMethodActivationToggle/BpdToggle.tsx → ...MethodActivationToggle/base/BpdToggle.tsx
@@ -1,8 +1,8 @@
 import * as React from "react";
 import { ActivityIndicator } from "react-native";
-import { IOColors } from "../../../../../components/core/variables/IOColors";
-import IconFont from "../../../../../components/ui/IconFont";
-import Switch from "../../../../../components/ui/Switch";
+import { IOColors } from "../../../../../../components/core/variables/IOColors";
+import IconFont from "../../../../../../components/ui/IconFont";
+import Switch from "../../../../../../components/ui/Switch";
 import { GraphicalValue } from "./PaymentMethodBpdToggle";
 
 type Props = {

diff --git a/...tivationToggle/PaymentMethodBpdToggle.tsx → ...ionToggle/base/PaymentMethodBpdToggle.tsx b/...tivationToggle/PaymentMethodBpdToggle.tsx → ...ionToggle/base/PaymentMethodBpdToggle.tsx
@@ -4,32 +4,33 @@ import { Millisecond } from "italia-ts-commons/lib/units";
 import { View } from "native-base";
 import * as React from "react";
 import { useContext, useEffect, useRef } from "react";
-import { Image, StyleSheet } from "react-native";
+import { Image, ImageSourcePropType, StyleSheet } from "react-native";
 import { NavigationContext } from "react-navigation";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-import image from "../../../../../../img/wallet/cards-icons/pagobancomat.png";
-import { Body } from "../../../../../components/core/typography/Body";
-import { GlobalState } from "../../../../../store/reducers/types";
+import { Body } from "../../../../../../components/core/typography/Body";
+import { GlobalState } from "../../../../../../store/reducers/types";
 import {
   bpdPaymentMethodActivation,
   BpdPaymentMethodActivation,
   BpdPmActivationStatus,
   bpdUpdatePaymentMethodActivation,
   HPan
-} from "../../store/actions/paymentMethods";
-import { bpdPaymentMethodValueSelector } from "../../store/reducers/details/paymentMethods";
+} from "../../../store/actions/paymentMethods";
+import { bpdPaymentMethodValueSelector } from "../../../store/reducers/details/paymentMethods";
 import { BpdToggle } from "./BpdToggle";
 
 // TODO: accept only hpan, read all the other information with a selector from payment methods
-type OwnProps = {
+export type BpdToggleProps = {
   hPan: HPan;
+  icon: ImageSourcePropType;
+  caption: string;
   hasBpdCapability: boolean;
 };
 
 export type Props = ReturnType<typeof mapDispatchToProps> &
   ReturnType<typeof mapStateToProps> &
-  OwnProps;
+  BpdToggleProps;
 
 type GraphicalState = "loading" | "ready" | "update";
 
@@ -151,10 +152,10 @@ const PaymentMethodActivationToggle: React.FunctionComponent<Props> = props => {
       <View style={styles.row}>
         <View style={styles.leftSection}>
           {/* TODO: The image will be received by props / redux state */}
-          <Image source={image} style={styles.cardIcon} />
+          <Image source={props.icon} style={styles.cardIcon} />
           <View hspacer={true} />
           {/* TODO: The Text will be received by props / redux state */}
-          <Body>Intesa San Paolo</Body>
+          <Body>{props.caption}</Body>
         </View>
         <BpdToggle
           graphicalValue={graphicalState}
@@ -174,7 +175,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     dispatch(bpdUpdatePaymentMethodActivation.request({ hPan, value }))
 });
 
-const mapStateToProps = (state: GlobalState, props: OwnProps) => ({
+const mapStateToProps = (state: GlobalState, props: BpdToggleProps) => ({
   bpdPotActivation: bpdPaymentMethodValueSelector(state, props.hPan)
 });
 

diff --git a/ts/features/bonus/bpd/screens/onboarding/EnrollPaymentMethodsScreen.tsx b/ts/features/bonus/bpd/screens/onboarding/EnrollPaymentMethodsScreen.tsx
@@ -12,8 +12,8 @@ import I18n from "../../../../../i18n";
 import { navigateToWalletHome } from "../../../../../store/actions/navigation";
 import { navigationHistoryPop } from "../../../../../store/actions/navigationHistory";
 import { GlobalState } from "../../../../../store/reducers/types";
-import { walletsSelector } from "../../../../../store/reducers/wallet/wallets";
-import { Wallet } from "../../../../../types/pagopa";
+import { walletV2Selector } from "../../../../../store/reducers/wallet/wallets";
+import { PatchedWalletV2 } from "../../../../../types/pagopa";
 import { FooterTwoButtons } from "../../../bonusVacanze/components/markdown/FooterTwoButtons";
 import { PaymentMethodBpdList } from "../../components/PaymentMethodBpdList";
 
@@ -30,7 +30,7 @@ export type Props = ReturnType<typeof mapDispatchToProps> &
   ReturnType<typeof mapStateToProps>;
 
 const renderPaymentMethod = (
-  potWallets: pot.Pot<ReadonlyArray<Wallet>, Error>
+  potWallets: pot.Pot<ReadonlyArray<PatchedWalletV2>, Error>
 ) =>
   pot.fold(
     potWallets,
@@ -84,7 +84,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 });
 
 const mapStateToProps = (state: GlobalState) => ({
-  potWallets: walletsSelector(state)
+  potWallets: walletV2Selector(state)
 });
 
 export default connect(

diff --git a/ts/features/bonus/bpd/screens/test/TMPBpdScreen.tsx b/ts/features/bonus/bpd/screens/test/TMPBpdScreen.tsx
@@ -1,7 +1,7 @@
 import * as pot from "italia-ts-commons/lib/pot";
 import { View } from "native-base";
-import { useEffect } from "react";
 import * as React from "react";
+import { useEffect } from "react";
 import { SafeAreaView, ScrollView } from "react-native";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
@@ -13,8 +13,8 @@ import { IOStyles } from "../../../../../components/core/variables/IOStyles";
 import BaseScreenComponent from "../../../../../components/screens/BaseScreenComponent";
 import FooterWithButtons from "../../../../../components/ui/FooterWithButtons";
 import { GlobalState } from "../../../../../store/reducers/types";
-import { walletsSelector } from "../../../../../store/reducers/wallet/wallets";
-import { Wallet } from "../../../../../types/pagopa";
+import { walletV2Selector } from "../../../../../store/reducers/wallet/wallets";
+import { PatchedWalletV2 } from "../../../../../types/pagopa";
 import { cancelButtonProps } from "../../../bonusVacanze/components/buttons/ButtonConfigurations";
 import { PaymentMethodBpdList } from "../../components/PaymentMethodBpdList";
 import {
@@ -43,7 +43,7 @@ const renderBpdActive = (value: RemoteValue<boolean, Error>) =>
   )(value);
 
 const renderPaymentMethod = (
-  potWallets: pot.Pot<ReadonlyArray<Wallet>, Error>
+  potWallets: pot.Pot<ReadonlyArray<PatchedWalletV2>, Error>
 ) =>
   pot.fold(
     potWallets,
@@ -128,7 +128,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 
 const mapStateToProps = (state: GlobalState) => ({
   bpdActive: bpdEnabledSelector(state),
-  potWallets: walletsSelector(state)
+  potWallets: walletV2Selector(state)
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(TmpBpdScreen);
diff --git a/ts/features/bonus/bpd/utils.ts b/ts/features/bonus/bpd/utils.ts
@@ -0,0 +1,9 @@
+import { PatchedWalletV2 } from "../../../types/pagopa";
+
+/**
+ * Return true if bpd is enabled for the wallet (aka payment method)
+ * TODO: replace string with enum
+ * @param wallet
+ */
+export const hasBpdCapability = (wallet: PatchedWalletV2) =>
+  wallet.enableableFunctions.includes("BPD");
diff --git a/ts/features/wallet/onboarding/bancomat/store/actions/index.ts b/ts/features/wallet/onboarding/bancomat/store/actions/index.ts
@@ -4,9 +4,9 @@ import {
   createStandardAction
 } from "typesafe-actions";
 import { AbiListResponse } from "../../../../../../../definitions/pagopa/bancomat/AbiListResponse";
-import { WalletV2 } from "../../../../../../../definitions/pagopa/bancomat/WalletV2";
-import { LoadPansError } from "../../saga/networking";
 import { Card } from "../../../../../../../definitions/pagopa/bancomat/Card";
+import { PatchedWalletV2 } from "../../../../../../types/pagopa";
+import { LoadPansError } from "../../saga/networking";
 
 /**
  * Request the list of all abi
@@ -33,7 +33,7 @@ export const addBancomatToWallet = createAsyncAction(
   "WALLET_ONBOARDING_BANCOMAT_ADD_REQUEST",
   "WALLET_ONBOARDING_BANCOMAT_ADD_SUCCESS",
   "WALLET_ONBOARDING_BANCOMAT_ADD_FAILURE"
-)<Card, WalletV2, Error>();
+)<Card, PatchedWalletV2, Error>();
 
 /**
  * The user choose to start the workflow to add a new bancomat to the wallet