fix(Receipt): adapt for refunds (#1050)

opencollective · Sep 4, 2024 · 47f0fb0 · 47f0fb0
1 parent a2e53a8
commit 47f0fb0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 21 deletions.
diff --git a/components/Receipt.js b/components/Receipt.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import { get, chunk, sumBy, max, isNil, round, uniqBy } from 'lodash';
 import { Box, Flex } from './styled-components/Grid';
 import moment from 'moment';
@@ -36,6 +36,7 @@ export class Receipt extends React.Component {
   static propTypes = {
     /** The receipt data */
     receipt: PropTypes.shape({
+      isRefundOnly: PropTypes.bool,
       dateFrom: PropTypes.string,
       dateTo: PropTypes.string,
       currency: PropTypes.string.isRequired,
@@ -94,9 +95,6 @@ export class Receipt extends React.Component {
      * document.
      */
     debug: PropTypes.bool,
-    /** CSS zoom applied */
-    zoom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    intl: PropTypes.object.isRequired, // from withIntl
   };
 
   static defaultProps = {
@@ -387,7 +385,11 @@ export class Receipt extends React.Component {
                     </Box>
                     <Box mt={80} pr={3} css={{ minHeight: 100 }}>
                       <H2 fontSize="16px" lineHeight="18px">
-                        <FormattedMessage id="billTo" defaultMessage="Bill to" />
+                        {receipt.isRefundOnly ? (
+                          <FormattedMessage id="refundTo" defaultMessage="Refund to" />
+                        ) : (
+                          <FormattedMessage id="billTo" defaultMessage="Bill to" />
+                        )}
                       </H2>
                       <Box my={2}>
                         <P fontWeight={500} fontSize="13px">
@@ -402,7 +404,9 @@ export class Receipt extends React.Component {
                   <Flex justifyContent="space-between">
                     <Box>
                       <H2 fontSize="16px" lineHeight="18px">
-                        {receipt.template?.title || (
+                        {receipt.template?.title || receipt.isRefundOnly ? (
+                          <FormattedMessage defaultMessage="Payment refund" />
+                        ) : (
                           <FormattedMessage id="invoice.donationReceipt" defaultMessage="Payment Receipt" />
                         )}
                       </H2>
@@ -499,7 +503,7 @@ export class Receipt extends React.Component {
                 <Flex flex="3" flexDirection="column" justifyContent="space-between">
                   <Box>
                     <P fontSize="11px" textAlign="left" whiteSpace="pre-wrap">
-                      {receipt?.template?.info}
+                      {receipt.template?.info}
                     </P>
                   </Box>
                   <CollectiveFooter collective={receipt.host} />
@@ -513,4 +517,4 @@ export class Receipt extends React.Component {
   }
 }
 
-export default injectIntl(Receipt);
+export default Receipt;
diff --git a/lib/graphql/queries.js b/lib/graphql/queries.js
@@ -30,6 +30,7 @@ const receiptTransactionFragment = gql`
     description
     hostCurrencyFxRate
     invoiceTemplate
+    isRefund
     host {
       ...ReceiptTransactionHostFieldsFragment
     }
@@ -59,6 +60,12 @@ const receiptTransactionFragment = gql`
       rate
     }
     type
+    paymentMethod {
+      id
+      type
+      service
+      name
+    }
     fromAccount {
       id
       slug
@@ -218,15 +225,7 @@ export async function fetchTransactionInvoice(transactionId, authorizationHeader
         permissions {
           canDownloadInvoice
         }
-        paymentMethod {
-          id
-          type
-          service
-          name
-        }
-        ... on Credit {
-          ...ReceiptTransactionFragment
-        }
+        ...ReceiptTransactionFragment
         ... on Debit {
           oppositeTransaction {
             ...ReceiptTransactionFragment

diff --git a/pages/receipts/transactions/[id]/[filename].js b/pages/receipts/transactions/[id]/[filename].js
@@ -26,8 +26,9 @@ class TransactionReceipt extends React.Component {
     return { pageFormat: ctx.query?.pageFormat };
   }
 
-  static getReceiptFromData(transaction) {
-    if (transaction.type === 'DEBIT' && transaction.oppositeTransaction) {
+  static getReceiptFromData(originalTransaction) {
+    let transaction = originalTransaction;
+    if (transaction.type === 'DEBIT' && transaction.oppositeTransaction && !transaction.isRefund) {
       transaction = transaction.oppositeTransaction;
     }
 
@@ -38,13 +39,15 @@ class TransactionReceipt extends React.Component {
 
     const invoiceName = transaction.invoiceTemplate || transaction.order?.tier?.invoiceTemplate;
     const template = host.settings?.invoice?.templates?.[invoiceName] || host?.settings?.invoice?.templates?.default;
+    const fromAccount = transaction.isRefund ? transaction.toAccount : transaction.fromAccount;
     return {
+      isRefundOnly: transaction.isRefund,
       currency: transaction.amountInHostCurrency.currency,
       totalAmount: transaction.amountInHostCurrency.valueInCents,
       transactions: [transaction],
       host,
-      fromAccount: transaction.fromAccount,
-      fromAccountHost: transaction.fromAccount.host,
+      fromAccount: fromAccount,
+      fromAccountHost: fromAccount.host,
       template,
     };
   }