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 = (
+
+