From 3f42ae4295a6bddefbebd2576a19b0040c8febd2 Mon Sep 17 00:00:00 2001
From: Benjamin Piouffle <benjamin@opencollective.com>
Date: Thu, 26 Oct 2023 12:41:30 +0200
Subject: [PATCH] Cleaner payment method description in Receipt (#965)

---
 components/Receipt.js  |  3 ++-
 lib/graphql/queries.js |  1 +
 lib/payment-methods.js | 11 +++++++++++
 3 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 lib/payment-methods.js

diff --git a/components/Receipt.js b/components/Receipt.js
index cfdff804..2551615f 100644
--- a/components/Receipt.js
+++ b/components/Receipt.js
@@ -29,6 +29,7 @@ import Container from '@opencollective/frontend-components/components/Container'
 import StyledTag from '@opencollective/frontend-components/components/StyledTag';
 import StyledHr from '@opencollective/frontend-components/components/StyledHr';
 import { EventDescription } from './EventDescription';
+import { formatPaymentMethodName } from '../lib/payment-methods';
 
 export class Receipt extends React.Component {
   static propTypes = {
@@ -409,7 +410,7 @@ export class Receipt extends React.Component {
                           <label>
                             <FormattedMessage defaultMessage="Payment Method:" />
                           </label>{' '}
-                          {`${transactions[0].paymentMethod.type} ${transactions[0].paymentMethod.name}`}
+                          {formatPaymentMethodName(transactions[0].paymentMethod)}
                         </div>
                       )}
                     </Box>
diff --git a/lib/graphql/queries.js b/lib/graphql/queries.js
index 84e25990..f0a06184 100644
--- a/lib/graphql/queries.js
+++ b/lib/graphql/queries.js
@@ -221,6 +221,7 @@ export async function fetchTransactionInvoice(transactionId, accessToken, apiKey
         paymentMethod {
           id
           type
+          service
           name
         }
         ... on Credit {
diff --git a/lib/payment-methods.js b/lib/payment-methods.js
new file mode 100644
index 00000000..5320ebfe
--- /dev/null
+++ b/lib/payment-methods.js
@@ -0,0 +1,11 @@
+import { startCase } from 'lodash';
+
+export const formatPaymentMethodName = (paymentMethod) => {
+  if (!paymentMethod) {
+    return null;
+  } else if (paymentMethod.service === 'paypal') {
+    return `PayPal ${paymentMethod.type.toLowerCase()} ${paymentMethod.name}`;
+  } else {
+    return `${startCase(paymentMethod.type)} ${paymentMethod.name}`;
+  }
+};