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 <[email protected]>
pagopa · Jan 5, 2021 · 8e171d3 · 8e171d3
1 parent d0582ef
commit 8e171d3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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,14 +52,17 @@ const styles = StyleSheet.create({
   paddedLR: {
     paddingLeft: variables.contentPadding,
     paddingRight: variables.contentPadding
-  }
+  },
+  infoBoxContainer: { padding: 20, backgroundColor: IOColors.orange }
 });
 
 const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
   title: "wallet.payWith.contextualHelpTitle",
   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}