From 120a4b556d01d65e2016d0f69b5a9806c8e750df Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Wed, 14 Aug 2019 18:04:48 +0300
Subject: [PATCH] TransactionPanel: savePaymentMethodFailed flag used

---
 .../TransactionPanel/TransactionPanel.css     | 12 ++++++++
 .../TransactionPanel/TransactionPanel.js      | 29 +++++++++++++++++--
 src/translations/en.json                      |  2 ++
 3 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/components/TransactionPanel/TransactionPanel.css b/src/components/TransactionPanel/TransactionPanel.css
index 58cf8109..29de8c30 100644
--- a/src/components/TransactionPanel/TransactionPanel.css
+++ b/src/components/TransactionPanel/TransactionPanel.css
@@ -34,6 +34,18 @@
   }
 }
 
+.genericError {
+  color: var(--failColor);
+  margin: 24px 24px 0 24px;
+
+  @media (--viewportMedium) {
+    margin: 32px 24px 0 24px;
+  }
+  @media (--viewportLarge) {
+    margin: 32px 0 0 0;
+  }
+}
+
 /* DetailCardImage subcomponent */
 .detailCardImageWrapper {
   /* Layout */
diff --git a/src/components/TransactionPanel/TransactionPanel.js b/src/components/TransactionPanel/TransactionPanel.js
index 7274219d..3587a25e 100644
--- a/src/components/TransactionPanel/TransactionPanel.js
+++ b/src/components/TransactionPanel/TransactionPanel.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { array, arrayOf, bool, func, number, string } from 'prop-types';
-import { injectIntl, intlShape } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
 import {
   TRANSITION_REQUEST_PAYMENT_AFTER_ENQUIRY,
@@ -22,7 +22,13 @@ import {
 } from '../../util/data';
 import { isMobileSafari } from '../../util/userAgent';
 import { formatMoney } from '../../util/currency';
-import { AvatarLarge, BookingPanel, ReviewModal, UserDisplayName } from '../../components';
+import {
+  AvatarLarge,
+  BookingPanel,
+  NamedLink,
+  ReviewModal,
+  UserDisplayName,
+} from '../../components';
 import { SendMessageForm } from '../../forms';
 import config from '../../config';
 
@@ -164,6 +170,7 @@ export class TransactionPanelComponent extends Component {
       oldestMessagePageFetched,
       messages,
       initialMessageFailed,
+      savePaymentMethodFailed,
       fetchMessagesInProgress,
       fetchMessagesError,
       sendMessageInProgress,
@@ -318,6 +325,12 @@ export class TransactionPanelComponent extends Component {
       id: 'TransactionPanel.sendingMessageNotAllowed',
     });
 
+    const paymentMethodsPageLink = (
+      <NamedLink name="PaymentMethodsPage">
+        <FormattedMessage id="TransactionPanel.paymentMethodsPageLink" />
+      </NamedLink>
+    );
+
     const classes = classNames(rootClassName || css.root, className);
 
     return (
@@ -359,6 +372,14 @@ export class TransactionPanelComponent extends Component {
               <BreakdownMaybe transaction={currentTransaction} transactionRole={transactionRole} />
             </div>
 
+            {savePaymentMethodFailed ? (
+              <p className={css.genericError}>
+                <FormattedMessage
+                  id="TransactionPanel.savePaymentMethodFailed"
+                  values={{ paymentMethodsPageLink }}
+                />
+              </p>
+            ) : null}
             <FeedSection
               rootClassName={css.feedContainer}
               currentTransaction={currentTransaction}
@@ -460,7 +481,8 @@ TransactionPanelComponent.defaultProps = {
   acceptSaleError: null,
   declineSaleError: null,
   fetchMessagesError: null,
-  initialMessageFailed: null,
+  initialMessageFailed: false,
+  savePaymentMethodFailed: false,
   sendMessageError: null,
   sendReviewError: null,
   timeSlots: null,
@@ -478,6 +500,7 @@ TransactionPanelComponent.propTypes = {
   oldestMessagePageFetched: number.isRequired,
   messages: arrayOf(propTypes.message).isRequired,
   initialMessageFailed: bool,
+  savePaymentMethodFailed: bool,
   fetchMessagesInProgress: bool.isRequired,
   fetchMessagesError: propTypes.error,
   sendMessageInProgress: bool.isRequired,
diff --git a/src/translations/en.json b/src/translations/en.json
index 69c0f5c7..e7238c9d 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -929,6 +929,7 @@
   "TransactionPanel.orderPreauthorizedInfo": "{providerName} has been notified about the booking request. Sit back and relax.",
   "TransactionPanel.orderPreauthorizedSubtitle": "You have requested to book {listingLink}.",
   "TransactionPanel.orderPreauthorizedTitle": "Great success, {customerName}!",
+  "TransactionPanel.paymentMethodsPageLink": "payment methods page",
   "TransactionPanel.perDay": "per day",
   "TransactionPanel.perNight": "per night",
   "TransactionPanel.perUnit": "per unit",
@@ -943,6 +944,7 @@
   "TransactionPanel.salePaymentPendingTitle": "Payment for {listingLink} is not yet confirmed",
   "TransactionPanel.saleRequestedInfo": "{customerName} is waiting for your response.",
   "TransactionPanel.saleRequestedTitle": "{customerName} has requested to book {listingLink}.",
+  "TransactionPanel.savePaymentMethodFailed": "Saving default payment method failed. Go to {paymentMethodsPageLink} to try again.",
   "TransactionPanel.sendingMessageNotAllowed": "This user has been removed. Sending message to the user is not possible anymore.",
   "TransactionPanel.sendMessagePlaceholder": "Send a message to {name}…",
   "UserCard.contactUser": "Contact",