TransactionPanel: savePaymentMethodFailed flag used

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 */

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,

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",