Cleaner payment method description in Receipt (#965)

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>

lib/graphql/queries.js

@@ -221,6 +221,7 @@ export async function fetchTransactionInvoice(transactionId, accessToken, apiKey
         paymentMethod {
           id
           type
+          service
           name
         }
         ... on Credit {

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}`;
+  }
+};