feat: [#173146850] Adds the new subsidy method on list (#1875)

* [#173146850] Adds the new subsidy method on list * fixes icons on android * Adds bonusVacanzeEnabled condition on list data * Fixes lint warnings * Fixes import * [#173146850] some refactor * [#173146850] add edge component * [#173146850] edge components if there are at least one method * [#173146850] edge components if there are at least one method Co-authored-by: Matteo Boschi <[email protected]>
pagopa · Jun 8, 2020 · e22ae26 · e22ae26
1 parent 1107ba1
commit e22ae26
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 15 deletions.
diff --git a/android/app/src/main/assets/fonts/io-icon-font.ttf b/android/app/src/main/assets/fonts/io-icon-font.ttf
diff --git a/android/link-assets-manifest.json b/android/link-assets-manifest.json
@@ -47,7 +47,7 @@
     },
     {
       "path": "assets/fonts/io-icon-font/io-icon-font.ttf",
-      "sha1": "c4b2601d870c869f069ad339e0faa1d4e86ff643"
+      "sha1": "2f72902abde1113a5a815a674ceb412c80c04c7f"
     },
     {
       "path": "assets/fonts/Ionicons/Ionicons.ttf",

diff --git a/assets/fonts/io-icon-font/io-icon-font.ttf b/assets/fonts/io-icon-font/io-icon-font.ttf
diff --git a/ios/ItaliaApp.xcodeproj/project.pbxproj b/ios/ItaliaApp.xcodeproj/project.pbxproj
@@ -5,6 +5,7 @@
 	};
 	objectVersion = 46;
 	objects = {
+
 /* Begin PBXBuildFile section */
 		00E356F31AD99517003FC87E /* ItaliaAppTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* ItaliaAppTests.m */; };
 		0F9E6335AF38F39B8AFE11BE /* libPods-ItaliaAppTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = CAACD7374073347FFCF0CF8F /* libPods-ItaliaAppTests.a */; };
@@ -43,7 +44,7 @@
 		F0625E8E2326832500EDEF90 /* libRNTextInputMask.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 61CC92F521357FDE00206602 /* libRNTextInputMask.a */; };
 		F0625E902326833000EDEF90 /* libPods-ItaliaApp.a in Frameworks */ = {isa = PBXBuildFile; fileRef = F0625E8F2326833000EDEF90 /* libPods-ItaliaApp.a */; };
 		F09FEB3C231818E3007071DB /* Localizable.strings in Resources */ = {isa = PBXBuildFile; fileRef = F09FEB0D231818E3007071DB /* Localizable.strings */; };
-		C580141680914A61A6B342F4 /* io-icon-font.ttf in Resources */ = {isa = PBXBuildFile; fileRef = D3FC0952CE6E4DEE96DDC59F /* io-icon-font.ttf */; };
+		E4B7E7371E9D4257914E3BF0 /* io-icon-font.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 71D89A4BF5744BAB927798CA /* io-icon-font.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -433,7 +434,7 @@
 		F5F65895457F4A8593B7110D /* libRNTextInputMask.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNTextInputMask.a; sourceTree = "<group>"; };
 		F709D4AE20E44EFAAB255A8E /* TitilliumWeb-Italic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "TitilliumWeb-Italic.ttf"; path = "../assets/fonts/TitilliumWeb/TitilliumWeb-Italic.ttf"; sourceTree = "<group>"; };
 		FBD4A950A9AC909A1EDCDA70 /* Instabug.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = Instabug.framework; path = "../node_modules/instabug-reactnative/ios/Instabug.framework"; sourceTree = "<group>"; };
-		D3FC0952CE6E4DEE96DDC59F /* io-icon-font.ttf */ = {isa = PBXFileReference; name = "io-icon-font.ttf"; path = "../assets/fonts/io-icon-font/io-icon-font.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		71D89A4BF5744BAB927798CA /* io-icon-font.ttf */ = {isa = PBXFileReference; name = "io-icon-font.ttf"; path = "../assets/fonts/io-icon-font/io-icon-font.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -612,7 +613,7 @@
 				640E574519CA4183B230AF22 /* RobotoMono-LightItalic.ttf */,
 				76E4CEA78E3F4060ABB59808 /* RobotoMono-Regular.ttf */,
 				5389C36762A04AE69D762289 /* RobotoMono-RegularItalic.ttf */,
-				D3FC0952CE6E4DEE96DDC59F /* io-icon-font.ttf */,
+				71D89A4BF5744BAB927798CA /* io-icon-font.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -1238,7 +1239,7 @@
 				C2CF038002D24FEEAB41B336 /* RobotoMono-LightItalic.ttf in Resources */,
 				16E38CBD19D4437A9C020B21 /* RobotoMono-Regular.ttf in Resources */,
 				28E4866232804051B865FC10 /* RobotoMono-RegularItalic.ttf in Resources */,
-				C580141680914A61A6B342F4 /* io-icon-font.ttf in Resources */,
+				E4B7E7371E9D4257914E3BF0 /* io-icon-font.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

diff --git a/ios/link-assets-manifest.json b/ios/link-assets-manifest.json
@@ -47,7 +47,7 @@
     },
     {
       "path": "assets/fonts/io-icon-font/io-icon-font.ttf",
-      "sha1": "c4b2601d870c869f069ad339e0faa1d4e86ff643"
+      "sha1": "2f72902abde1113a5a815a674ceb412c80c04c7f"
     },
     {
       "path": "assets/fonts/Ionicons/Ionicons.ttf",

diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -713,9 +713,12 @@ wallet:
   backToPayments: Back to payments
   methods:
     comingSoon: incoming
+    newCome: New
     card:
       name: Credit/debit card
       maxFee: Maximum fee of 1.50€
+    sovvenzione:
+      name: Subsidy
     bank:
       name: Bancomat Pay
       maxFee: Maximum fee of 0.50€

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -740,9 +740,12 @@ wallet:
   backToPayments: Torna ai pagamenti
   methods:
     comingSoon: in arrivo
+    newCome: Novità
     card:
       name: Carta di credito/debito
       maxFee: Commissione massima 1.50€
+    sovvenzione:
+      name: Sovvenzione
     bank:
       name: Bancomat Pay
       maxFee: Commissione massima 0.50€

diff --git a/ts/components/wallet/PaymentMethodsList.tsx b/ts/components/wallet/PaymentMethodsList.tsx
@@ -8,18 +8,21 @@ import { Badge, ListItem, Text, View } from "native-base";
 import * as React from "react";
 import { FlatList, Image, Platform, StyleSheet } from "react-native";
 import { Grid, Row } from "react-native-easy-grid";
+import { bonusVacanzeEnabled } from "../../config";
 import I18n from "../../i18n";
 import { makeFontStyleObject } from "../../theme/fonts";
 import variables from "../../theme/variables";
 import { ContextualHelp } from "../ContextualHelp";
 import { withLightModalContext } from "../helpers/withLightModalContext";
+import { EdgeBorderComponent } from "../screens/EdgeBorderComponent";
 import TouchableDefaultOpacity from "../TouchableDefaultOpacity";
 import IconFont from "../ui/IconFont";
 import { LightModalContextInterface } from "../ui/LightModal";
 import Markdown from "../ui/Markdown";
 
 type OwnProps = Readonly<{
   navigateToAddCreditCard: () => void;
+  navigateToRequestBonus: () => void;
 }>;
 
 type Props = OwnProps & LightModalContextInterface;
@@ -30,6 +33,8 @@ type IPaymentMethod = Readonly<{
   icon?: any;
   image?: any;
   implemented: boolean;
+  isNew?: boolean;
+  onPress?: () => void;
 }>;
 
 const underlayColor = "transparent";
@@ -68,6 +73,14 @@ const implementedMethod: IPaymentMethod = {
   icon: "io-48-card",
   implemented: true
 };
+
+const bonusMethod: IPaymentMethod = {
+  name: I18n.t("wallet.methods.sovvenzione.name"),
+  icon: "io-bonus",
+  implemented: true,
+  isNew: true
+};
+
 const paymentMethods: ReadonlyArray<IPaymentMethod> = [
   {
     name: I18n.t("wallet.methods.satispay.name"),
@@ -105,6 +118,11 @@ const AddMethodStyle = StyleSheet.create({
     marginTop: 2,
     backgroundColor: variables.lightGray
   },
+  newImplementedBadge: {
+    height: 18,
+    marginTop: 2,
+    backgroundColor: variables.brandHighLighter
+  },
   notImplementedText: {
     fontSize: 10,
     lineHeight: Platform.OS === "ios" ? 14 : 16
@@ -127,24 +145,36 @@ class PaymentMethodsList extends React.Component<Props, never> {
   };
 
   public render(): React.ReactNode {
+    const methods: ReadonlyArray<IPaymentMethod> = [
+      {
+        ...implementedMethod,
+        onPress: this.props.navigateToAddCreditCard
+      },
+      ...(bonusVacanzeEnabled
+        ? [
+            {
+              ...bonusMethod,
+              onPress: this.props.navigateToRequestBonus
+            }
+          ]
+        : []),
+      ...paymentMethods
+    ];
     return (
       <View>
         <View spacer={true} large={true} />
         <FlatList
           removeClippedSubviews={false}
-          data={[implementedMethod, ...paymentMethods]}
+          data={methods}
           keyExtractor={item => item.name}
           renderItem={itemInfo => {
             const isItemDisabled = !itemInfo.item.implemented;
             const disabledStyle = isItemDisabled ? styles.disabled : {};
+            const isItemNew = itemInfo.item.implemented && itemInfo.item.isNew;
             return (
               <ListItem
                 style={styles.listItem}
-                onPress={() => {
-                  if (itemInfo.item.implemented) {
-                    this.props.navigateToAddCreditCard();
-                  }
-                }}
+                onPress={itemInfo.item.onPress}
                 underlayColor={underlayColor}
               >
                 <View style={styles.columnLeft}>
@@ -164,6 +194,13 @@ class PaymentMethodsList extends React.Component<Props, never> {
                             </Text>
                           </Badge>
                         )}
+                        {isItemNew && (
+                          <Badge style={AddMethodStyle.newImplementedBadge}>
+                            <Text style={AddMethodStyle.notImplementedText}>
+                              {I18n.t("wallet.methods.newCome")}
+                            </Text>
+                          </Badge>
+                        )}
                       </View>
                     </Row>
                     {itemInfo.item.maxFee && (
@@ -208,7 +245,7 @@ class PaymentMethodsList extends React.Component<Props, never> {
         <TouchableDefaultOpacity onPress={this.showHelp}>
           <Text link={true}>{I18n.t("wallet.whyAFee.title")}</Text>
         </TouchableDefaultOpacity>
-        <View spacer={true} large={true} />
+        {methods.length > 0 && <EdgeBorderComponent />}
       </View>
     );
   }

diff --git a/ts/screens/wallet/AddPaymentMethodScreen.tsx b/ts/screens/wallet/AddPaymentMethodScreen.tsx
@@ -12,6 +12,7 @@ import BaseScreenComponent, {
 } from "../../components/screens/BaseScreenComponent";
 import PaymentBannerComponent from "../../components/wallet/PaymentBannerComponent";
 import PaymentMethodsList from "../../components/wallet/PaymentMethodsList";
+import { navigateToAvailableBonusScreen } from "../../features/bonusVacanze/navigation/action";
 import I18n from "../../i18n";
 import {
   navigateToPaymentTransactionSummaryScreen,
@@ -87,13 +88,15 @@ class AddPaymentMethodScreen extends React.PureComponent<Props> {
               <View spacer={true} />
               <PaymentMethodsList
                 navigateToAddCreditCard={this.props.navigateToAddCreditCard}
+                navigateToRequestBonus={this.props.navigateToRequestBonus}
               />
             </View>
           </Content>
         ) : (
           <Content noPadded={true} style={styles.paddedLR}>
             <PaymentMethodsList
               navigateToAddCreditCard={this.props.navigateToAddCreditCard}
+              navigateToRequestBonus={this.props.navigateToRequestBonus}
             />
           </Content>
         )}
@@ -134,7 +137,8 @@ const mapDispatchToProps = (dispatch: Dispatch, props: OwnProps) => ({
         inPayment: props.navigation.getParam("inPayment"),
         keyFrom: props.navigation.getParam("keyFrom")
       })
-    )
+    ),
+  navigateToRequestBonus: () => dispatch(navigateToAvailableBonusScreen())
 });
 
 export default connect(

diff --git a/ts/theme/font-icons/io-icon-font/selection.json b/ts/theme/font-icons/io-icon-font/selection.json