feat(Bonus Pagamenti Digitali): [#175329974] Test enable/disable bpd on payment method

ts/features/bonus/bpd/navigation/action/bpdTestNav.ts

@@ -0,0 +1,8 @@
+// TODO: remove after the introduction of the bpd detail screen
+import { NavigationActions } from "react-navigation";
+import BPD_ROUTES from "../routes";
+
+export const navigateToBpdTestScreen = () =>
+  NavigationActions.navigate({
+    routeName: BPD_ROUTES.TEST
+  });

ts/features/bonus/bpd/navigation/navigator.ts

@@ -6,6 +6,7 @@ import EnrollPaymentMethodsScreen from "../screens/onboarding/EnrollPaymentMetho
 import LoadActivateBpdScreen from "../screens/onboarding/LoadActivateBpdScreen";
 import LoadBpdActivationStatus from "../screens/onboarding/LoadBpdActivationStatus";
 import NoPaymentMethodsAvailableScreen from "../screens/onboarding/NoPaymentMethodsAvailableScreen";
+import TMPBpdScreen from "../screens/test/TMPBpdScreen";
 import BPD_ROUTES from "./routes";
 
 const BpdNavigator = createStackNavigator(
@@ -30,6 +31,10 @@ const BpdNavigator = createStackNavigator(
     },
     [BPD_ROUTES.IBAN]: {
       screen: MainIbanScreen
+    },
+    // TODO: remove after the introduction of the bpd detail screen
+    [BPD_ROUTES.TEST]: {
+      screen: TMPBpdScreen
     }
   },
   {

ts/features/bonus/bpd/navigation/routes.ts

@@ -9,7 +9,9 @@ const BPD_ROUTES = {
     ENROLL_PAYMENT_METHODS: "BPD_ENROLL_PAYMENT_METHODS",
     NO_PAYMENT_METHODS: "BPD_NO_PAYMENT_METHODS"
   },
-  IBAN: "BPD_IBAN"
+  IBAN: "BPD_IBAN",
+  // TODO: remove after the introduction of the bpd detail screen
+  TEST: "BPD_TEST"
 };
 
 export default BPD_ROUTES;

ts/features/bonus/bpd/screens/test/TMPBpdScreen.tsx

@@ -0,0 +1,134 @@
+import * as pot from "italia-ts-commons/lib/pot";
+import { View } from "native-base";
+import { useEffect } from "react";
+import * as React from "react";
+import { SafeAreaView, ScrollView } from "react-native";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { Body } from "../../../../../components/core/typography/Body";
+import { H1 } from "../../../../../components/core/typography/H1";
+import { Label } from "../../../../../components/core/typography/Label";
+import { LabelSmall } from "../../../../../components/core/typography/LabelSmall";
+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 { cancelButtonProps } from "../../../bonusVacanze/components/buttons/ButtonConfigurations";
+import { PaymentMethodBpdList } from "../../components/PaymentMethodBpdList";
+import {
+  fold,
+  isReady,
+  isUndefined,
+  RemoteValue
+} from "../../model/RemoteValue";
+import { bpdLoadActivationStatus } from "../../store/actions/details";
+import { bpdDeleteUserFromProgram } from "../../store/actions/onboarding";
+import { bpdEnabledSelector } from "../../store/reducers/details/activation";
+
+export type Props = ReturnType<typeof mapDispatchToProps> &
+  ReturnType<typeof mapStateToProps>;
+
+const renderBpdActive = (value: RemoteValue<boolean, Error>) =>
+  fold(
+    () => <LabelSmall color={"bluegrey"}>Sconosciuta</LabelSmall>,
+    () => <LabelSmall color={"bluegrey"}>In caricamento</LabelSmall>,
+    active => (
+      <LabelSmall color={active ? "blue" : "red"}>
+        {active ? "Attiva" : "Non attiva"}
+      </LabelSmall>
+    ),
+    _ => <LabelSmall color={"red"}>Errore durante il caricamento</LabelSmall>
+  )(value);
+
+const renderPaymentMethod = (
+  potWallets: pot.Pot<ReadonlyArray<Wallet>, Error>
+) =>
+  pot.fold(
+    potWallets,
+    // TODO: handle error, loading with spinner if needed
+    () => (
+      <LabelSmall color={"bluegrey"}>
+        Metodi di pagamento sconosciuti
+      </LabelSmall>
+    ),
+    () => (
+      <LabelSmall color={"bluegrey"}>
+        Metodi di pagamento in caricamento
+      </LabelSmall>
+    ),
+    _ => null,
+    _ => (
+      <LabelSmall color={"red"}>
+        Errore nel recuperare i metodi di pagamento
+      </LabelSmall>
+    ),
+    value => <PaymentMethodBpdList paymentList={value} />,
+    value => <PaymentMethodBpdList paymentList={value} />,
+    value => <PaymentMethodBpdList paymentList={value} />,
+    value => <PaymentMethodBpdList paymentList={value} />
+  );
+
+/**
+ * A temp screen created to allow the test of some bpd functionalities waiting for the detail screen.
+ * TODO: remove after bpd detail screen
+ * @constructor
+ */
+const TmpBpdScreen: React.FunctionComponent<Props> = props => {
+  const bpdActive = renderBpdActive(props.bpdActive);
+
+  useEffect(() => {
+    if (isUndefined(props.bpdActive)) {
+      props.loadBpdActivation();
+    }
+  }, []);
+
+  return (
+    <BaseScreenComponent goBack={true} headerTitle={"Test Bpd"}>
+      <SafeAreaView style={IOStyles.flex}>
+        <View style={[IOStyles.horizontalContentPadding, IOStyles.flex]}>
+          <ScrollView>
+            <View spacer={true} large={true} />
+            <H1>Test bpd screen</H1>
+            <View spacer={true} large={true} />
+            <Body>La tua iscrizione al cashback è: {bpdActive}</Body>
+            <View spacer={true} large={true} />
+            {isReady(props.bpdActive) && props.bpdActive.value ? (
+              <>
+                <Label color={"bluegrey"}>Metodi di pagamento:</Label>
+                {renderPaymentMethod(props.potWallets)}
+              </>
+            ) : (
+              <Body>
+                Iscriviti al cashback per visualizzare la lista dei metodi di
+                pagamento
+              </Body>
+            )}
+          </ScrollView>
+        </View>
+        {isReady(props.bpdActive) && props.bpdActive.value && (
+          <FooterWithButtons
+            type={"SingleButton"}
+            leftButton={cancelButtonProps(
+              props.cancelBpd,
+              "Cancella la tua iscrizione al cashback"
+            )}
+          />
+        )}
+      </SafeAreaView>
+    </BaseScreenComponent>
+  );
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  loadBpdActivation: () => dispatch(bpdLoadActivationStatus.request()),
+  cancelBpd: () => dispatch(bpdDeleteUserFromProgram.request())
+});
+
+const mapStateToProps = (state: GlobalState) => ({
+  bpdActive: bpdEnabledSelector(state),
+  potWallets: walletsSelector(state)
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TmpBpdScreen);

ts/screens/profile/ProfileMainScreen.tsx

@@ -24,7 +24,7 @@ import { AlertModal } from "../../components/ui/AlertModal";
 import { LightModalContextInterface } from "../../components/ui/LightModal";
 import Markdown from "../../components/ui/Markdown";
 import Switch from "../../components/ui/Switch";
-import { bpdEnabled, isPlaygroundsEnabled } from "../../config";
+import { isPlaygroundsEnabled } from "../../config";
 import I18n from "../../i18n";
 import ROUTES from "../../navigation/routes";
 import {
@@ -52,7 +52,6 @@ import { getAppVersion } from "../../utils/appVersion";
 import { clipboardSetStringWithFeedback } from "../../utils/clipboard";
 import { isDevEnv } from "../../utils/environment";
 import { setStatusBarColorAndBackground } from "../../utils/statusBar";
-import { bpdDeleteUserFromProgram } from "../../features/bonus/bpd/store/actions/onboarding";
 
 type OwnProps = Readonly<{
   navigation: NavigationScreenProp<NavigationState>;
@@ -484,13 +483,6 @@ class ProfileMainScreen extends React.PureComponent<Props, State> {
                       this.props.dispatchSessionExpired,
                       true
                     )}
-
-                  {bpdEnabled &&
-                    this.debugListItem(
-                      "Leave BPD",
-                      this.props.dispatchLeaveBpd,
-                      true
-                    )}
                 </React.Fragment>
               )}
             </React.Fragment>
@@ -556,7 +548,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
       preferencesPagoPaTestEnvironmentSetEnabled({ isPagoPATestEnabled })
     ),
   dispatchSessionExpired: () => dispatch(sessionExpired()),
-  dispatchLeaveBpd: () => dispatch(bpdDeleteUserFromProgram.request()),
   dispatchPreferencesExperimentalFeaturesSetEnabled: (enabled: boolean) =>
     dispatch(preferencesExperimentalFeaturesSetEnabled(enabled))
 });

ts/screens/wallet/WalletHomeScreen.tsx

@@ -1,6 +1,6 @@
 import { fromNullable, fromPredicate, none } from "fp-ts/lib/Option";
 import * as pot from "italia-ts-commons/lib/pot";
-import { Content, Text, View } from "native-base";
+import { Button, Content, Text, View } from "native-base";
 import * as React from "react";
 import { BackHandler, Image, RefreshControl, StyleSheet } from "react-native";
 import {
@@ -12,6 +12,7 @@ import { connect } from "react-redux";
 import { BonusActivationWithQrCode } from "../../../definitions/bonus_vacanze/BonusActivationWithQrCode";
 import { TypeEnum } from "../../../definitions/pagopa/Wallet";
 import ButtonDefaultOpacity from "../../components/ButtonDefaultOpacity";
+import { Label } from "../../components/core/typography/Label";
 import { withLightModalContext } from "../../components/helpers/withLightModalContext";
 import { withValidatedEmail } from "../../components/helpers/withValidatedEmail";
 import { withValidatedPagoPaVersion } from "../../components/helpers/withValidatedPagoPaVersion";
@@ -23,7 +24,7 @@ import { RotatedCards } from "../../components/wallet/card/RotatedCards";
 import SectionCardComponent from "../../components/wallet/card/SectionCardComponent";
 import TransactionsList from "../../components/wallet/TransactionsList";
 import WalletLayout from "../../components/wallet/WalletLayout";
-import { bonusVacanzeEnabled } from "../../config";
+import { bonusVacanzeEnabled, bpdEnabled } from "../../config";
 import RequestBonus from "../../features/bonus/bonusVacanze/components/RequestBonus";
 import {
   navigateToAvailableBonusScreen,
@@ -35,6 +36,7 @@ import {
 } from "../../features/bonus/bonusVacanze/store/actions/bonusVacanze";
 import { allBonusActiveSelector } from "../../features/bonus/bonusVacanze/store/reducers/allActive";
 import { availableBonusTypesSelector } from "../../features/bonus/bonusVacanze/store/reducers/availableBonusesTypes";
+import { navigateToBpdTestScreen } from "../../features/bonus/bpd/navigation/action/bpdTestNav";
 import I18n from "../../i18n";
 import {
   navigateBack,
@@ -510,6 +512,15 @@ class WalletHomeScreen extends React.PureComponent<Props> {
         gradientHeader={true}
         headerPaddingMin={true}
       >
+        {/* TODO: temp only, for test purpose,to be removed with bpd details */}
+        {bpdEnabled && (
+          <Button
+            style={{ width: "100%" }}
+            onPress={this.props.navigateToBpdTest}
+          >
+            <Label color={"white"}>BPD details</Label>
+          </Button>
+        )}
         {this.newMethodAdded ? this.newMethodAddedContent : transactionContent}
         {bonusVacanzeEnabled && (
           <NavigationEvents onWillFocus={this.loadBonusVacanze} />
@@ -582,7 +593,9 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     dispatch(fetchTransactionsRequest({ start })),
   loadWallets: () => dispatch(fetchWalletsRequest()),
   dispatchAllTransactionLoaded: (transactions: ReadonlyArray<Transaction>) =>
-    dispatch(fetchTransactionsLoadComplete(transactions))
+    dispatch(fetchTransactionsLoadComplete(transactions)),
+  // TODO: Temp only, remove after bpd details
+  navigateToBpdTest: () => dispatch(navigateToBpdTestScreen())
 });
 
 export default withValidatedPagoPaVersion(