pagopa · Undermaken · Nov 4, 2020 · Oct 29, 2020 · Oct 29, 2020 · Oct 29, 2020
@@ -1653,6 +1653,9 @@ bonus:
           title: "IBAN for accreditation"
           noIbanBody: "Set your IBAN in order to receive the accumulated cashback"
           button: "Set IBAN"
+      transaction:
+        title: "Your transactions"
+        goToButton: "Transactions detail"
 webView:
   error:
     missingParams: Not all information necessary to access this page are available

@@ -1685,6 +1685,9 @@ bonus:
           title: "IBAN per l’accredito"
           noIbanBody: "Imposta il tuo IBAN per poter ricevere il cashback accumulato"
           button: "Imposta IBAN"
+      transaction:
+        title: "Le tue transazioni"
+        goToButton: "Dettaglio transazioni"
 webView:
   error:
     missingParams: Non sono presenti le informazioni necessarie per accedere a questa pagina

@@ -58,6 +58,8 @@ const styles = StyleSheet.create({
 const retryTimeout = 5000 as Millisecond;
 /**
  * This custom hook handles the load of the initial state and the retry in case of error.
+ * TODO: refactor with  {@link useLoadPotValue}
+ * @deprecated
  * @param props
  */
 const useInitialValue = (props: Props) => {
@@ -151,10 +153,8 @@ 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={props.icon} style={styles.cardIcon} />
           <View hspacer={true} />
-          {/* TODO: The Text will be received by props / redux state */}
           <Body>{props.caption}</Body>
         </View>
         <BpdToggle

@@ -51,3 +51,9 @@ export const navigateToBpdDetails = (specificPeriod?: BpdPeriod) =>
     routeName: BPD_ROUTES.DETAILS,
     params: { specificPeriod }
   });
+
+// Transactions
+export const navigateToBpdTransactions = () =>
+  NavigationActions.navigate({
+    routeName: BPD_ROUTES.TRANSACTIONS
+  });
@@ -1,5 +1,6 @@
 import { createStackNavigator } from "react-navigation";
 import BpdDetailsScreen from "../screens/details/BpdDetailsScreen";
+import BpdTransactionsScreen from "../screens/details/transaction/BpdTransactionsScreen";
 import MainIbanScreen from "../screens/iban/MainIbanScreen";
 import BpdInformationScreen from "../screens/onboarding/BpdInformationScreen";
 import DeclarationScreen from "../screens/onboarding/declaration/DeclarationScreen";
@@ -36,6 +37,9 @@ const BpdNavigator = createStackNavigator(
     [BPD_ROUTES.DETAILS]: {
       screen: BpdDetailsScreen
     },
+    [BPD_ROUTES.TRANSACTIONS]: {
+      screen: BpdTransactionsScreen
+    },
     // TODO: remove after the introduction of the bpd detail screen
     [BPD_ROUTES.TEST]: {
       screen: TMPBpdScreen

@@ -11,6 +11,7 @@ const BPD_ROUTES = {
   },
   IBAN: "BPD_IBAN",
   DETAILS: "BPD_DETAILS",
+  TRANSACTIONS: "BPD_TRANSACTIONS",
   // TODO: remove after the introduction of the bpd detail screen
   TEST: "BPD_TEST"
 };

@@ -7,6 +7,7 @@ import I18n from "../../../../../i18n";
 import { GlobalState } from "../../../../../store/reducers/types";
 import BpdPeriodSelector from "./BpdPeriodSelector";
 import BpdPeriodDetail from "./periods/BpdPeriodDetail";
+import GoToTransactions from "./transaction/GoToTransactions";
 
 export type Props = ReturnType<typeof mapDispatchToProps> &
   ReturnType<typeof mapStateToProps>;
@@ -28,6 +29,7 @@ const styles = StyleSheet.create({
     height: 60
   }
 });
+
 /**
  * The screen that allows the user to see all the details related to the bpd.
  * @constructor
@@ -41,6 +43,7 @@ const BpdDetailsScreen: React.FunctionComponent<Props> = () => (
     topContent={<View style={styles.headerSpacer} />}
     gradientHeader={true}
     hideHeader={true}
+    footerContent={<GoToTransactions />}
   >
     <View style={styles.selector}>
       <BpdPeriodSelector />

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { SafeAreaView } from "react-native";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { View } from "native-base";
+import { H1 } from "../../../../../../components/core/typography/H1";
+import { IOStyles } from "../../../../../../components/core/variables/IOStyles";
+import BaseScreenComponent from "../../../../../../components/screens/BaseScreenComponent";
+import I18n from "../../../../../../i18n";
+import { GlobalState } from "../../../../../../store/reducers/types";
+
+export type Props = ReturnType<typeof mapDispatchToProps> &
+  ReturnType<typeof mapStateToProps>;
+
+/**
+ * Display all the transactions for a specific period
+ * @constructor
+ */
+const BpdTransactionsScreen: React.FunctionComponent<Props> = () => (
+  <BaseScreenComponent goBack={true} headerTitle={I18n.t("bonus.bpd.title")}>
+    <SafeAreaView style={IOStyles.flex}>
+      <View style={IOStyles.horizontalContentPadding}>
+        <View spacer={true} large={true} />
+        <H1>{I18n.t("bonus.bpd.details.transaction.title")}</H1>
+      </View>
+    </SafeAreaView>
+  </BaseScreenComponent>
+);
+
+const mapDispatchToProps = (_: Dispatch) => ({});
+
+const mapStateToProps = (_: GlobalState) => ({});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(BpdTransactionsScreen);
@@ -0,0 +1,56 @@
+import * as pot from "italia-ts-commons/lib/pot";
+import * as React from "react";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import ButtonDefaultOpacity from "../../../../../../components/ButtonDefaultOpacity";
+import { Label } from "../../../../../../components/core/typography/Label";
+import IconFont from "../../../../../../components/ui/IconFont";
+import I18n from "../../../../../../i18n";
+import { GlobalState } from "../../../../../../store/reducers/types";
+import { navigateToBpdTransactions } from "../../../navigation/actions";
+import { AwardPeriodId } from "../../../store/actions/periods";
+import { bpdTransactionsLoad } from "../../../store/actions/transactions";
+import { bpdSelectedPeriodSelector } from "../../../store/reducers/details/selectedPeriod";
+import { bpdTransactionsForSelectedPeriod } from "../../../store/reducers/details/transactions";
+
+type Props = ReturnType<typeof mapDispatchToProps> &
+  ReturnType<typeof mapStateToProps>;
+
+/**
+ * Display the transactions button only if the transactions number are > 0 for the selected period
+ * (never displayed for inactive period)
+ * @param props
+ * @constructor
+ */
+const GoToTransactions: React.FunctionComponent<Props> = props => {
+  const canRenderButton = pot.getOrElse(
+    pot.map(props.transactions, val => val.length > 0),
+    false
+  );
+
+  return canRenderButton ? (
+    <ButtonDefaultOpacity
+      block={true}
+      onPress={props.goToTransactions}
+      activeOpacity={1}
+    >
+      <IconFont name="io-receipt" style={{ color: "white" }} />
+      <Label color={"white"}>
+        {I18n.t("bonus.bpd.details.transaction.goToButton")}
+      </Label>
+    </ButtonDefaultOpacity>
+  ) : null;
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  goToTransactions: () => dispatch(navigateToBpdTransactions()),
+  loadTransactionsByPeriod: (periodId: AwardPeriodId) =>
+    dispatch(bpdTransactionsLoad.request(periodId))
+});
+
+const mapStateToProps = (state: GlobalState) => ({
+  transactions: bpdTransactionsForSelectedPeriod(state),
+  selectedPeriod: bpdSelectedPeriodSelector(state)
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(GoToTransactions);
@@ -71,6 +71,6 @@ export const bpdTransactionsForSelectedPeriod = createSelector(
   ],
   (transactions, period) =>
     fromNullable(period)
-      .map(p => transactions[p.awardPeriodId])
+      .chain(p => fromNullable(transactions[p.awardPeriodId]))
       .getOrElse(pot.none)
 );
@@ -0,0 +1,64 @@
+/* eslint-disable functional/immutable-data */
+import * as pot from "italia-ts-commons/lib/pot";
+import { Millisecond } from "italia-ts-commons/lib/units";
+import { useContext, useEffect, useRef, useState } from "react";
+import { NavigationContext } from "react-navigation";
+
+const retryTimeout = 5000 as Millisecond;
+
+/**
+ * Load the pot value using the loadAction until is some. Automatically retry using the {@link retryTimeout}
+ * @param id - the loadRequestId. Should be always the same for the same pot and different, for different pots.
+ * @param potValue - the value that we would ensure that should be loaded
+ * @param loadAction - the action that trigger the load of the pot
+ * @deprecated
+ */
+export const useLoadPotValue = <T, E>(
+  id: string,
+  potValue: pot.Pot<T, E>,
+  loadAction: () => void
+) => {
+  const [idState, setId] = useState("");
+  const timerRetry = useRef<number | undefined>(undefined);
+  const navigation = useContext(NavigationContext);
+  const retry = () => {
+    timerRetry.current = undefined;
+    loadAction();
+  };
+
+  /**
+   * When the focus change or the idRequest changes, clear the timer (if any)
+   * and reset the value to undefined.
+   * focus: true  -> a new schedule is allowed
+   * focus: false -> clear all the pending schedule
+   */
+  useEffect(() => {
+    clearTimeout(timerRetry.current);
+    timerRetry.current = undefined;
+  }, [navigation.isFocused(), idState]);
+
+  useEffect(() => {
+    setId(id);
+    // Initial state, request the state
+    if (potValue === pot.none) {
+      loadAction();
+    } else if (
+      pot.isNone(potValue) &&
+      pot.isError(potValue) &&
+      timerRetry.current === undefined &&
+      navigation.isFocused()
+    ) {
+      // If the pot is NoneError, the navigation focus is on the element
+      // and no other retry are scheduled
+      timerRetry.current = setTimeout(retry, retryTimeout);
+    }
+  }, [potValue, timerRetry.current, navigation.isFocused(), idState]);
+
+  // Component unmount, clear scheduled
+  useEffect(
+    () => () => {
+      clearTimeout(timerRetry.current);
+    },
+    []
+  );
+};