feat(Bonus Pagamenti Digitali): [#175949561] Display cashback future …

…periods ("Inactive") in wallet (#2470)

* [#175949561] add inactive periods in the wallet

* [#175949561] change logic

* [#175949561] add test

* [#175949561] add comments

* [#175949561] add preview badge in bpd card preview

* Update ts/features/bonus/bpd/store/reducers/__test__/combiner.test.ts

Co-authored-by: Cristiano Tofani <[email protected]>

* Update ts/features/bonus/bpd/store/reducers/__test__/combiner.test.ts

Co-authored-by: Cristiano Tofani <[email protected]>

* Update ts/features/bonus/bpd/store/reducers/__test__/combiner.test.ts

Co-authored-by: Cristiano Tofani <[email protected]>

* Update ts/features/bonus/bpd/store/reducers/__test__/combiner.test.ts

Co-authored-by: Cristiano Tofani <[email protected]>

* Update ts/features/bonus/bpd/store/reducers/__test__/combiner.test.ts

Co-authored-by: Cristiano Tofani <[email protected]>

Co-authored-by: Cristiano Tofani <[email protected]>
Co-authored-by: Matteo Boschi <[email protected]>

ts/features/bonus/bpd/components/bpdCardComponent/BpdCardComponent.tsx

@@ -264,6 +264,7 @@ export const BpdCardComponent: React.FunctionComponent<Props> = (
   } = calculateGraphicalState(props);
 
   const isPeriodClosed = props.period.status === "Closed";
+  const isPeriodInactive = props.period.status === "Inactive";
 
   const FullCard = () => (
     <View style={[styles.row, styles.spaced]}>
@@ -351,10 +352,10 @@ export const BpdCardComponent: React.FunctionComponent<Props> = (
               <IconFont name="io-lucchetto" size={16} color={IOColors.white} />
             )}
             <View hspacer={true} small={true} />
-            {isInGracePeriod ? (
+            {isInGracePeriod || isPeriodInactive ? (
               <Badge style={styles.badgePreview}>
                 <Text semibold={true} style={styles.badgeTextBase} dark={true}>
-                  {I18n.t("profile.preferences.list.wip")}
+                  {statusBadge.label}
                 </Text>
               </Badge>
             ) : (

ts/features/bonus/bpd/navigation/actions.ts

@@ -38,12 +38,6 @@ export const navigateToBpdIbanInsertion = () =>
     routeName: BPD_ROUTES.IBAN
   });
 
-// TODO: remove after the introduction of the bpd detail screen
-export const navigateToBpdTestScreen = () =>
-  NavigationActions.navigate({
-    routeName: BPD_ROUTES.TEST
-  });
-
 // Details
 
 export const navigateToBpdDetails = (specificPeriod?: BpdPeriod) =>

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

@@ -2,14 +2,13 @@ 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 CtaLandingScreen from "../screens/onboarding/BpdCTAStartOnboardingScreen";
 import BpdInformationScreen from "../screens/onboarding/BpdInformationScreen";
 import DeclarationScreen from "../screens/onboarding/declaration/DeclarationScreen";
 import EnrollPaymentMethodsScreen from "../screens/onboarding/EnrollPaymentMethodsScreen";
 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 CtaLandingScreen from "../screens/onboarding/BpdCTAStartOnboardingScreen";
 import BPD_ROUTES from "./routes";
 
 const BpdNavigator = createStackNavigator(
@@ -41,10 +40,6 @@ const BpdNavigator = createStackNavigator(
     [BPD_ROUTES.TRANSACTIONS]: {
       screen: BpdTransactionsScreen
     },
-    // TODO: remove after the introduction of the bpd detail screen
-    [BPD_ROUTES.TEST]: {
-      screen: TMPBpdScreen
-    },
     [BPD_ROUTES.CTA_START_BPD]: {
       screen: CtaLandingScreen
     }

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

@@ -12,8 +12,6 @@ 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",
   // used from message CTA
   CTA_START_BPD: "CTA_START_BPD"
 };

ts/features/bonus/bpd/screens/details/BpdPeriodSelector.tsx

@@ -14,7 +14,7 @@ import { BpdCardComponent } from "../../components/bpdCardComponent/BpdCardCompo
 import { BpdPeriod } from "../../store/actions/periods";
 import { bpdSelectPeriod } from "../../store/actions/selectedPeriod";
 import { bpdAmountForSelectedPeriod } from "../../store/reducers/details/amounts";
-import { bpdPeriodsAmountSnappedListSelector } from "../../store/reducers/details/combiner";
+import { bpdPeriodsAmountWalletVisibleSelector } from "../../store/reducers/details/combiner";
 import { bpdSelectedPeriodSelector } from "../../store/reducers/details/selectedPeriod";
 
 export type Props = ReturnType<typeof mapDispatchToProps> &
@@ -82,7 +82,8 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 });
 
 const mapStateToProps = (state: GlobalState) => ({
-  periodsWithAmount: bpdPeriodsAmountSnappedListSelector(state),
+  // ATM the rules of visualization of a period in the selector is the same of the wallet
+  periodsWithAmount: bpdPeriodsAmountWalletVisibleSelector(state),
   selectedPeriod: bpdSelectedPeriodSelector(state),
   selectedAmount: bpdAmountForSelectedPeriod(state)
 });