feat: [#172975727] Adds the bonus information screen (#1850)

* [#172975727] Adds the bonus information screen * Adds missing file * Adds minor comments * Adds mocked data * Fixes lint * Supporting navigation from list to bonus information * [#172975727] fix lint warnings * [#172975727] minor changes * [#172975727] refactoring Co-authored-by: Matteo Boschi <[email protected]>
pagopa · May 29, 2020 · 4ca3b57 · 4ca3b57
1 parent c0de9e8
commit 4ca3b57
Show file tree

Hide file tree

Showing 11 changed files with 142 additions and 18 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -65,13 +65,13 @@ PODS:
     - React
   - react-native-calendar-events (1.7.1):
     - React
-  - react-native-camera (3.26.0):
+  - react-native-camera (3.4.0):
     - React
-    - react-native-camera/RCT (= 3.26.0)
-    - react-native-camera/RN (= 3.26.0)
-  - react-native-camera/RCT (3.26.0):
+    - react-native-camera/RCT (= 3.4.0)
+    - react-native-camera/RN (= 3.4.0)
+  - react-native-camera/RCT (3.4.0):
     - React
-  - react-native-camera/RN (3.26.0):
+  - react-native-camera/RN (3.4.0):
     - React
   - react-native-config (1.0.0):
     - React
@@ -298,7 +298,7 @@ SPEC CHECKSUMS:
   React-jsinspector: e08662d1bf5b129a3d556eb9ea343a3f40353ae4
   react-native-background-timer: 1b6e6b4e10f1b74c367a1fdc3c72b67c619b222b
   react-native-calendar-events: 667f4141959b3f90c44cd328396c1488f216922d
-  react-native-camera: 2b74be8edc1103c4c46d1f4e5f41723d9ff052cc
+  react-native-camera: f4f2144140ae1e808cad97cc7caf013767c11f1b
   react-native-config: 7db9b96479164dfd7b2be68eb9079e08279511c4
   react-native-image-picker: fd93361c666f397bdf72f9c6c23f13d2685b9173
   react-native-mixpanel: d644efe1ca33d2646d5cba29e24a13ebc9b37209

diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -1240,6 +1240,8 @@ bonus:
     taxBenefit: Tax benefit
     checkBonusEligibility:
       loading: Checking bonus eligibility
+    cta:
+      requestBonus: Request
     iseeNotAvailable:
       title: ISEE not available
       subtitle: ISEE not found for the user

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -1273,6 +1273,8 @@ bonus:
     taxBenefit: Beneficio fiscale
     checkBonusEligibility:
       loading: Verifico l'idoneità per l'accesso al bonus
+    cta:
+      requestBonus: Richiedi
     iseeNotAvailable:
       title: ISEE not trovato
       subtitle: Non è disponibile nessun ISEE per l'utente

diff --git a/ts/components/ui/Markdown/index.tsx b/ts/components/ui/Markdown/index.tsx
@@ -342,9 +342,14 @@ class Markdown extends React.PureComponent<Props, State> {
     if (this.props.onLoadEnd) {
       this.props.onLoadEnd();
     }
-    if (this.webViewRef.current) {
-      this.webViewRef.current.injectJavaScript(NOTIFY_BODY_HEIGHT_SCRIPT);
-    }
+
+    setTimeout(() => {
+      // to avoid yellow box warning
+      // it's ugly but it works https://github.com/react-native-community/react-native-webview/issues/341#issuecomment-466639820
+      if (this.webViewRef.current) {
+        this.webViewRef.current.injectJavaScript(NOTIFY_BODY_HEIGHT_SCRIPT);
+      }
+    }, 100);
   };
 
   // A function that handles message sent by the WebView component

diff --git a/ts/components/ui/Markdown/script.ts b/ts/components/ui/Markdown/script.ts
@@ -29,9 +29,7 @@ document.body.onclick = function(e) {
     return false;
   }
 };
-
-true;
-`;
+true;`;
 
 // Script to notify the height of the body to the react WebView component
 export const NOTIFY_BODY_HEIGHT_SCRIPT = `
@@ -42,6 +40,4 @@ const message = {
   }
 };
 window.ReactNativeWebView.postMessage(JSON.stringify(message));
-
-true
-`;
+true;`;
diff --git a/ts/features/bonusVacanze/mock/mockData.ts b/ts/features/bonusVacanze/mock/mockData.ts
@@ -62,3 +62,13 @@ export const mockedBonus: BonusVacanze = {
   max_tax_benefit: 3000 as NonNegativeInteger,
   updated_at: new Date("2020-07-04T12:20:00.000Z")
 };
+
+export const mockedAvailableBonusItem = {
+  id: 1,
+  name: "Bonus Vacanze",
+  description: "descrizione bonus vacanze",
+  valid_from: new Date("2020-07-01T00:00:00.000Z"),
+  valid_to: new Date("2020-12-31T23:59:59.000Z"),
+  cover:
+    "https://gdsit.cdn-immedia.net/2018/08/fff810d2e44464312e70071340fd92fc.jpg"
+};
diff --git a/ts/features/bonusVacanze/screens/AvailableBonusScreen.tsx b/ts/features/bonusVacanze/screens/AvailableBonusScreen.tsx
@@ -9,7 +9,10 @@ import BaseScreenComponent from "../../../components/screens/BaseScreenComponent
 import GenericErrorComponent from "../../../components/screens/GenericErrorComponent";
 import { ScreenContentHeader } from "../../../components/screens/ScreenContentHeader";
 import I18n from "../../../i18n";
-import { navigateBack } from "../../../store/actions/navigation";
+import {
+  navigateBack,
+  navigateToBonusRequestInformation
+} from "../../../store/actions/navigation";
 import { Dispatch } from "../../../store/actions/types";
 import { GlobalState } from "../../../store/reducers/types";
 import variables from "../../../theme/variables";
@@ -73,7 +76,7 @@ class AvailableBonusScreen extends React.PureComponent<Props> {
     ) : (
       <AvailableBonusItem
         bonusItem={item}
-        onPress={this.props.navigateToBonusRequest}
+        onPress={() => this.props.navigateToBonusRequest(item)}
       />
     );
   };
@@ -127,7 +130,8 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
   navigateBack: () => dispatch(navigateBack()),
   loadAvailableBonuses: () => dispatch(availableBonusesLoad.request()),
   // TODO Add the param to navigate to proper bonus by name (?)
-  navigateToBonusRequest: () => dispatch(navigateBack()),
+  navigateToBonusRequest: (bonusItem: BonusItem) =>
+    dispatch(navigateToBonusRequestInformation({ bonusItem })),
   // TODO Add the param to bonus detail if a bonus is already active
   navigateToBonusDetail: () => dispatch(navigateBack())
 });

diff --git a/ts/features/bonusVacanze/screens/BonusInformationScreen.tsx b/ts/features/bonusVacanze/screens/BonusInformationScreen.tsx
@@ -0,0 +1,91 @@
+import { View } from "native-base";
+import * as React from "react";
+import { Image, StyleSheet } from "react-native";
+import { NavigationInjectedProps } from "react-navigation";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { withLoadingSpinner } from "../../../components/helpers/withLoadingSpinner";
+import BaseScreenComponent from "../../../components/screens/BaseScreenComponent";
+import { EdgeBorderComponent } from "../../../components/screens/EdgeBorderComponent";
+import ScreenContent from "../../../components/screens/ScreenContent";
+import Markdown from "../../../components/ui/Markdown";
+import I18n from "../../../i18n";
+import { navigateBack } from "../../../store/actions/navigation";
+import { ReduxProps } from "../../../store/actions/types";
+import themeVariables from "../../../theme/variables";
+import { FooterTwoButtons } from "../components/markdown/FooterTwoButtons";
+import { BonusItem } from "../types/bonusList";
+
+type NavigationParams = Readonly<{
+  bonusItem: BonusItem;
+}>;
+
+type Props = ReduxProps &
+  NavigationInjectedProps<NavigationParams> &
+  ReturnType<typeof mapDispatchToProps>;
+
+const styles = StyleSheet.create({
+  mainContent: {
+    flex: 1
+  },
+  markdownContainer: {
+    paddingLeft: themeVariables.contentPadding,
+    paddingRight: themeVariables.contentPadding
+  },
+  image: {
+    resizeMode: "contain",
+    width: "100%",
+    height: 210,
+    alignSelf: "center"
+  }
+});
+
+/**
+ * A screen to explain how the bonus activation works and how it will be assigned
+ */
+const BonusInformationScreen: React.FunctionComponent<Props> = props => {
+  const [isMarkdownLoaded, setMarkdownLoaded] = React.useState(false);
+
+  const getBonusItem = () => props.navigation.getParam("bonusItem");
+
+  const bonusItem = getBonusItem();
+  const ContainerComponent = withLoadingSpinner(() => (
+    <BaseScreenComponent goBack={true} headerTitle={bonusItem.name}>
+      <ScreenContent
+        title={bonusItem.name}
+        subtitle={bonusItem.description}
+        bounces={false}
+      >
+        {bonusItem.cover && (
+          <Image source={{ uri: bonusItem.cover }} style={styles.image} />
+        )}
+        <View style={styles.markdownContainer}>
+          <Markdown onLoadEnd={() => setMarkdownLoaded(true)}>
+            {/* TODO Replace with correct text of bonus */
+            I18n.t("profile.main.privacy.exportData.info.body")}
+          </Markdown>
+          {isMarkdownLoaded && <EdgeBorderComponent />}
+        </View>
+      </ScreenContent>
+      {isMarkdownLoaded && (
+        <FooterTwoButtons
+          onRight={props.requestBonusActivation}
+          title={I18n.t("bonus.bonusVacanza.cta.requestBonus")}
+          onCancel={props.navigateBack}
+        />
+      )}
+    </BaseScreenComponent>
+  ));
+  return <ContainerComponent isLoading={!isMarkdownLoaded} />;
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  // TODO add bonus request action or just navigate to TOS screen (?)
+  requestBonusActivation: () => null,
+  navigateBack: () => dispatch(navigateBack())
+});
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(BonusInformationScreen);
diff --git a/ts/navigation/WalletNavigator.ts b/ts/navigation/WalletNavigator.ts
@@ -1,6 +1,7 @@
 import { createStackNavigator } from "react-navigation";
 import AcceptTosBonusScreen from "../features/bonusVacanze/screens/AcceptTosBonusScreen";
 import AvailableBonusScreen from "../features/bonusVacanze/screens/AvailableBonusScreen";
+import BonusInformationScreen from "../features/bonusVacanze/screens/BonusInformationScreen";
 import AddCardScreen from "../screens/wallet/AddCardScreen";
 import AddPaymentMethodScreen from "../screens/wallet/AddPaymentMethodScreen";
 import ConfirmCardDetailsScreen from "../screens/wallet/ConfirmCardDetailsScreen";
@@ -79,6 +80,9 @@ const WalletNavigator = createStackNavigator(
     },
 
     // Navigator section for Bonus section
+    [ROUTES.BONUS_REQUEST_INFORMATION]: {
+      screen: BonusInformationScreen
+    },
     [ROUTES.BONUS_AVAILABLE_LIST]: {
       screen: AvailableBonusScreen
     },

diff --git a/ts/navigation/routes.ts b/ts/navigation/routes.ts
@@ -45,6 +45,7 @@ const ROUTES = {
 
   // Bonus
   BONUS_AVAILABLE_LIST: "BONUS_AVAILABLE_LIST",
+  BONUS_REQUEST_INFORMATION: "BONUS_REQUEST_INFORMATION",
   BONUS_TOS_SCREEN: "BONUS_TOS_SCREEN",
 
   // Payment

diff --git a/ts/store/actions/navigation.ts b/ts/store/actions/navigation.ts
@@ -6,6 +6,7 @@ import {
   StackActions
 } from "react-navigation";
 import { ActionType, createStandardAction } from "typesafe-actions";
+import BonusInformationScreen from "../../features/bonusVacanze/screens/BonusInformationScreen";
 import ROUTES from "../../navigation/routes";
 import CieCardReaderScreen from "../../screens/authentication/cie/CieCardReaderScreen";
 import { MessageDetailScreen } from "../../screens/messages/MessageDetailScreen";
@@ -306,6 +307,14 @@ export const navigateToAvailableBonusScreen = () =>
     routeName: ROUTES.BONUS_AVAILABLE_LIST
   });
 
+export const navigateToBonusRequestInformation = (
+  params?: InferNavigationParams<typeof BonusInformationScreen>
+) =>
+  NavigationActions.navigate({
+    routeName: ROUTES.BONUS_REQUEST_INFORMATION,
+    params
+  });
+
 export const navigateToBonusTosScreen = () =>
   NavigationActions.navigate({
     routeName: ROUTES.BONUS_TOS_SCREEN