feat(Carta Giovani Nazionale): [#176715099] Introduces the CGN folded…

… card for wallet preview (#2898) * [#176715099] Adds the Cgn folded version for wallet home and fixes shadow on android version of CGN full card * Update ts/features/bonus/cgn/components/CgnCardInWalletComponent.tsx Co-authored-by: Matteo Boschi <[email protected]> * Update ts/features/bonus/cgn/components/CgnCardInWalletComponent.tsx Co-authored-by: Matteo Boschi <[email protected]> * [#176715099] Removes Cgn Load from wallet home focus event Co-authored-by: Matteo Boschi <[email protected]>
pagopa · Mar 16, 2021 · 3492261 · 3492261
1 parent ece9a83
commit 3492261
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 22 deletions.
diff --git a/img/bonus/cgn/cgn-preview.png b/img/bonus/cgn/cgn-preview.png
diff --git a/ts/features/bonus/cgn/components/CgnCardInWalletComponent.tsx b/ts/features/bonus/cgn/components/CgnCardInWalletComponent.tsx
@@ -1,43 +1,93 @@
 import { Millisecond } from "italia-ts-commons/lib/units";
-import { View } from "native-base";
 import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-import ButtonDefaultOpacity from "../../../../components/ButtonDefaultOpacity";
+import { ImageBackground, StyleSheet, Image, Platform } from "react-native";
+import { View } from "native-base";
 import { navigateToCgnDetails } from "../navigation/actions";
 import { isCgnInformationAvailableSelector } from "../store/reducers/details";
 import { cgnDetails } from "../store/actions/details";
 import { useActionOnFocus } from "../../../../utils/hooks/useOnFocus";
 import { GlobalState } from "../../../../store/reducers/types";
-import { H5 } from "../../../../components/core/typography/H5";
-import { IOColors } from "../../../../components/core/variables/IOColors";
+import cgnBackground from "../../../../../img/bonus/cgn/cgn-preview.png";
+import cgnLogo from "../../../../../img/bonus/cgn/cgn_logo.png";
+import TouchableDefaultOpacity from "../../../../components/TouchableDefaultOpacity";
+import { IOStyles } from "../../../../components/core/variables/IOStyles";
+import { H3 } from "../../../../components/core/typography/H3";
+import I18n from "../../../../i18n";
 
 type Props = ReturnType<typeof mapDispatchToProps> &
   ReturnType<typeof mapStateToProps>;
 
+const styles = StyleSheet.create({
+  preview: {
+    marginBottom: -20,
+    height: 88
+  },
+  imagePreview: {
+    resizeMode: "stretch",
+    height: 88,
+    width: "100%"
+  },
+  paddedContentPreview: {
+    paddingLeft: 18,
+    paddingBottom: 10,
+    paddingRight: 22
+  },
+  spaced: {
+    justifyContent: "space-between"
+  },
+  previewLogo: {
+    resizeMode: "contain",
+    height: 40,
+    width: 40
+  },
+  upperShadowBox: {
+    marginBottom: -13,
+    borderRadius: 8,
+    borderTopWidth: 13,
+    borderTopColor: "rgba(0,0,0,0.1)",
+    height: 17,
+    width: "100%"
+  }
+});
+
 const CgnCardList = (props: Props) => (
-  <View>
-    {
-      // TODO Replace component with folded card when available
-      props.isCgnActive && (
-        <ButtonDefaultOpacity
-          color={IOColors.blue}
-          onPress={props.navigateToCgnDetailScreen}
-          style={{ width: "100%" }}
+  <>
+    {props.isCgnActive && (
+      <>
+        {Platform.OS === "android" && <View style={styles.upperShadowBox} />}
+        <ImageBackground
+          source={cgnBackground}
+          style={styles.preview}
+          imageStyle={styles.imagePreview}
         >
-          <H5 color={"white"}>{"GO TO CGN DETAIL"}</H5>
-        </ButtonDefaultOpacity>
-      )
-    }
-  </View>
+          <TouchableDefaultOpacity
+            onPress={props.navigateToCgnDetailScreen}
+            style={[
+              IOStyles.row,
+              styles.spaced,
+              styles.paddedContentPreview,
+              { alignItems: "center" }
+            ]}
+          >
+            <H3 color={"black"} weight={"Bold"}>
+              {I18n.t("bonus.cgn.name")}
+            </H3>
+            <Image source={cgnLogo} style={styles.previewLogo} />
+          </TouchableDefaultOpacity>
+        </ImageBackground>
+      </>
+    )}
+  </>
 );
 
 const CgnCardListMemo = React.memo(
   CgnCardList,
   (prev: Props, curr: Props) => prev.isCgnActive === curr.isCgnActive
 );
 
-// Automatically refresh when focused every 5 minutes (the remote data can change every 4 h)
+// Automatically refresh when focused every 5 minutes
 const refreshTime = 300000 as Millisecond;
 
 /**

diff --git a/ts/features/bonus/cgn/components/detail/CgnCardComponent.tsx b/ts/features/bonus/cgn/components/detail/CgnCardComponent.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { View } from "native-base";
 import WebView from "react-native-webview";
-import { Image, ImageBackground, StyleSheet } from "react-native";
+import { Image, ImageBackground, Platform, StyleSheet } from "react-native";
 import { connect } from "react-redux";
 import { IOStyles } from "../../../../../components/core/variables/IOStyles";
 import { H5 } from "../../../../../components/core/typography/H5";
@@ -41,7 +41,7 @@ const styles = StyleSheet.create({
   },
   informationContainer: {
     height: "100%",
-    top: -190,
+    top: Platform.select({ android: -220, default: -190 }),
     zIndex: 9,
     elevation: 9
   },
@@ -74,6 +74,21 @@ const styles = StyleSheet.create({
     height: "100%",
     zIndex: 8,
     elevation: 8
+  },
+  upperShadowBox: {
+    marginBottom: -13,
+    borderRadius: 8,
+    borderTopWidth: 13,
+    borderTopColor: "rgba(0,0,0,0.1)",
+    height: 17,
+    width: "100%"
+  },
+  bottomShadowBox: {
+    marginBottom: 6,
+    borderRadius: 8,
+    borderBottomWidth: 15,
+    borderBottomColor: "rgba(0,0,0,0.1)",
+    width: "100%"
   }
 });
 
@@ -131,9 +146,10 @@ const CgnCardComponent: React.FunctionComponent<Props> = (props: Props) => {
 
   return (
     <View style={[IOStyles.horizontalContentPadding, styles.cgnCard]}>
+      {Platform.OS === "android" && <View style={styles.upperShadowBox} />}
       <ImageBackground
         source={cardBg}
-        imageStyle={[styles.imageFull, { borderRadius: 10 }]}
+        imageStyle={[styles.imageFull]}
         style={styles.cardContainer}
       >
         <WebView
@@ -143,6 +159,7 @@ const CgnCardComponent: React.FunctionComponent<Props> = (props: Props) => {
           }}
         />
       </ImageBackground>
+      {Platform.OS === "android" && <View style={styles.bottomShadowBox} />}
       <View style={[styles.informationContainer, styles.paddedContentFull]}>
         <View
           style={[

diff --git a/ts/screens/wallet/WalletHomeScreen.tsx b/ts/screens/wallet/WalletHomeScreen.tsx
@@ -209,7 +209,6 @@ class WalletHomeScreen extends React.PureComponent<Props, State> {
 
   private onFocus = () => {
     this.loadBonusVacanze();
-    this.loadBonusCgn();
     this.setState({ hasFocus: true });
   };