From 8e171d36c13a6ed220b27278da9972acf6d2d5fc Mon Sep 17 00:00:00 2001
From: Giovanni <g.mancini.0@gmail.com>
Date: Tue, 5 Jan 2021 15:22:13 +0100
Subject: [PATCH] feat: [#176299898] Amex warning (transaction >1000 EUR)
 (#2671)

* [#176299898] Added InfoBox Component

* [#176299898] Added locales

* [#176299898] Added infobox rendering logic

* [#176299898] Reorganized styles object

* [#176299898] Fixed visuals and defined payment treshold as a constant

* [#176299898] Fixed styles object

Co-authored-by: Giovanni Mancini <g.mancini.0gmail.com>
Co-authored-by: Matteo Boschi <mbmaken@gmail.com>
---
 locales/en/index.yml                          |  1 +
 locales/it/index.yml                          |  1 +
 .../payment/PickPaymentMethodScreen.tsx       | 19 ++++++++++++++++++-
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/locales/en/index.yml b/locales/en/index.yml
index 96d1477e6a1..6e06a81f19b 100644
--- a/locales/en/index.yml
+++ b/locales/en/index.yml
@@ -835,6 +835,7 @@ wallet:
     messagePagoPaUpdateApp: "IO often introduces small improvements and new features: to continue using the wallet you need to update the app to the latest version."
     btnUpdateApp: Update the IO app
     favourite: This method is already set as favourite. To change this, please set another method as favourite.
+    amex: Payments with American Express cards, for amounts above €1000, are currently not possible.
   contextualHelpTitle: About this section
   contextualHelpContent: !include wallet/wallet_home.md
   creditcards: Credit Cards
diff --git a/locales/it/index.yml b/locales/it/index.yml
index 06a33d7083b..d9ec3780acd 100644
--- a/locales/it/index.yml
+++ b/locales/it/index.yml
@@ -855,6 +855,7 @@ wallet:
     messagePagoPaUpdateApp: "IO introduce spesso piccole migliorie e nuove funzioni: per continuare ad usare il portafoglio è necessario aggiornare l'applicazione all'ultima versione."
     btnUpdateApp: Aggiorna l'app IO
     favourite: Questo metodo di pagamento è già contrassegnato come il tuo preferito, se vuoi cambiarlo devi selezionarne un altro
+    amex: I pagamenti con carte American Express, per importi superiori a €1000, non sono al momento possibili
   contextualHelpTitle: Cosa puoi fare nel tuo Portafoglio
   contextualHelpContent: !include wallet/wallet_home.md
   creditcards: Carte di Credito
diff --git a/ts/screens/wallet/payment/PickPaymentMethodScreen.tsx b/ts/screens/wallet/payment/PickPaymentMethodScreen.tsx
index 75cdf2ef965..a8d759ee69d 100644
--- a/ts/screens/wallet/payment/PickPaymentMethodScreen.tsx
+++ b/ts/screens/wallet/payment/PickPaymentMethodScreen.tsx
@@ -18,6 +18,10 @@ import { EdgeBorderComponent } from "../../../components/screens/EdgeBorderCompo
 import FooterWithButtons from "../../../components/ui/FooterWithButtons";
 import CardComponent from "../../../components/wallet/card/CardComponent";
 import PaymentBannerComponent from "../../../components/wallet/PaymentBannerComponent";
+import { InfoBox } from "../../../components/box/InfoBox";
+import { IOColors } from "../../../components/core/variables/IOColors";
+import { Label } from "../../../components/core/typography/Label";
+
 import I18n from "../../../i18n";
 import {
   navigateToPaymentTransactionSummaryScreen,
@@ -48,7 +52,8 @@ const styles = StyleSheet.create({
   paddedLR: {
     paddingLeft: variables.contentPadding,
     paddingRight: variables.contentPadding
-  }
+  },
+  infoBoxContainer: { padding: 20, backgroundColor: IOColors.orange }
 });
 
 const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
@@ -56,6 +61,8 @@ const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
   body: "wallet.payWith.contextualHelpContent"
 };
 
+const amexPaymentWarningTreshold = 100000; // Eurocents
+
 class PickPaymentMethodScreen extends React.Component<Props> {
   public render(): React.ReactNode {
     const verifica: PaymentRequestsGetResponse = this.props.navigation.getParam(
@@ -116,6 +123,16 @@ class PickPaymentMethodScreen extends React.Component<Props> {
 
         <View spacer={true} />
 
+        {wallets.some(myWallet => myWallet.creditCard?.brand === "AMEX") &&
+          verifica.importoSingoloVersamento >= amexPaymentWarningTreshold && (
+            <View style={styles.infoBoxContainer}>
+              <InfoBox alignedCentral={true} iconColor={IOColors.white}>
+                <Label weight={"Regular"} color="white">
+                  {I18n.t("wallet.alert.amex")}
+                </Label>
+              </InfoBox>
+            </View>
+          )}
         <FooterWithButtons
           type="TwoButtonsInlineThird"
           leftButton={secondaryButtonProps}