Receipt: better support for host currency (#973)

* enhancement(Receipt): better support for host currency

* test: Add codecov config

* enhancement(Receipt): more fixes on host currency

babel.config.js

@@ -0,0 +1,32 @@
+module.exports = {
+  presets: [
+    [
+      'next/babel',
+      {
+        'preset-env': {
+          modules: 'auto',
+          targets: { node: 'current' },
+        },
+        'transform-runtime': {
+          useESModules: false,
+        },
+      },
+    ],
+  ],
+  plugins: [
+    'lodash',
+    'babel-plugin-styled-components',
+    [
+      'formatjs',
+      {
+        idInterpolationPattern: '[sha512:contenthash:base64:6]',
+        ast: true,
+      },
+    ],
+  ],
+  env: {
+    development: {
+      compact: false,
+    },
+  },
+};

codecov.yml

@@ -0,0 +1,2 @@
+ignore:
+  - test

components/Receipt.js

@@ -48,20 +48,20 @@ export class Receipt extends React.Component {
             number: PropTypes.string,
           }),
         }),
-        host: PropTypes.shape({
-          slug: PropTypes.string.isRequired,
-          website: PropTypes.string,
-          imageUrl: PropTypes.string,
-        }),
       }).isRequired,
-      host: PropTypes.shape({
+      fromAccountHost: PropTypes.shape({
         slug: PropTypes.string.isRequired,
         website: PropTypes.string.isRequired,
         imageUrl: PropTypes.string.isRequired,
       }),
+      host: PropTypes.shape({
+        slug: PropTypes.string.isRequired,
+        website: PropTypes.string,
+        imageUrl: PropTypes.string,
+      }),
       transactions: PropTypes.arrayOf(
         PropTypes.shape({
-          id: PropTypes.number.isRequired,
+          id: PropTypes.string.isRequired,
           paymentMethod: PropTypes.object,
           toAccount: PropTypes.shape({
             type: PropTypes.string,
@@ -140,8 +140,8 @@ export class Receipt extends React.Component {
   }
 
   getBillTo() {
-    const { fromAccount } = this.props.receipt;
-    return fromAccount.host || fromAccount;
+    const { fromAccount, fromAccountHost } = this.props.receipt;
+    return fromAccountHost || fromAccount;
   }
 
   /** Generate a prettier reference for receipt by taking only the first part of the hash */
@@ -177,22 +177,22 @@ export class Receipt extends React.Component {
   }
 
   getTaxTotal() {
-    const getTaxAmountInHostCurrency = (t) => Math.abs(t.taxAmount.valueInCents) * (t.hostCurrencyFxRate || 1);
+    const getTaxAmountInHostCurrency = (t) => Math.abs(t.taxAmount?.valueInCents) * (t.hostCurrencyFxRate || 1);
     return Math.round(sumBy(this.props.receipt.transactions, (t) => getTaxAmountInHostCurrency(t) || 0));
   }
 
   /** Returns the VAT number of the collective */
-  renderTaxIdNumbers() {
-    const { fromAccount, transactions } = this.props.receipt;
+  renderBillToTaxIdNumbers() {
+    const { fromAccount, fromAccountHost, transactions } = this.props.receipt;
     const taxesSummary = getTaxIdNumbersFromTransactions(transactions);
 
     // Expenses rely solely on the tax info stored in transactions. For orders, we look in the fromCollective
     if (!transactions.every((t) => t.kind === 'EXPENSE')) {
       const getVatNumberFromAccount = (a) => a?.settings?.VAT?.number;
       if (getVatNumberFromAccount(fromAccount)) {
         taxesSummary.push({ type: 'VAT', idNumber: getVatNumberFromAccount(fromAccount) });
-      } else if (getVatNumberFromAccount(fromAccount.host)) {
-        taxesSummary.push({ type: 'VAT', idNumber: getVatNumberFromAccount(fromAccount.host) });
+      } else if (getVatNumberFromAccount(fromAccountHost)) {
+        taxesSummary.push({ type: 'VAT', idNumber: getVatNumberFromAccount(fromAccountHost) });
       }
     }
 
@@ -262,12 +262,12 @@ export class Receipt extends React.Component {
           {transactions.map((transaction) => {
             const quantity = get(transaction, 'order.quantity') || 1;
             const amountInHostCurrency = transaction.amountInHostCurrency.valueInCents;
-            const taxAmount = Math.abs(transaction.taxAmount.valueInCents || 0);
+            const taxAmount = Math.abs(transaction.taxAmount?.valueInCents || 0);
             const hostCurrencyFxRate = transaction.hostCurrencyFxRate || 1;
             const taxAmountInHostCurrency = taxAmount * hostCurrencyFxRate;
-            const grossPrice =
+            const grossPriceInHostCurrency =
               amountInHostCurrency - (transaction.isRefund ? -taxAmountInHostCurrency : taxAmountInHostCurrency);
-            const unitGrossPrice = Math.abs(grossPrice / quantity);
+            const unitGrossPriceInHostCurrency = Math.abs(grossPriceInHostCurrency / quantity);
             const transactionCurrency = transaction.hostCurrency || this.props.receipt.currency;
             const isRefunded = !transaction.isRefund && transaction.refundTransaction;
             return (
@@ -296,7 +296,7 @@ export class Receipt extends React.Component {
                   {quantity}
                 </Td>
                 <Td fontSize="11px" textAlign="center">
-                  {formatCurrency(unitGrossPrice, transaction.currency)}
+                  {formatCurrency(unitGrossPriceInHostCurrency, transactionCurrency)}
                   {transaction.amountInHostCurrency.currency !== transaction.amount.currency && (
                     <P fontSize="8px" color="black.600" mt={1}>
                       (
@@ -380,7 +380,7 @@ export class Receipt extends React.Component {
                           <AccountName account={billTo} />
                         </P>
                         <CollectiveAddress collective={billTo} />
-                        {this.renderTaxIdNumbers()}
+                        {this.renderBillToTaxIdNumbers()}
                       </Box>
                     </Box>
                   </Flex>
@@ -433,7 +433,7 @@ export class Receipt extends React.Component {
                   <EventDescription event={receipt.transactions[0].toAccount} />
                 </P>
               )}
-              <Box width={1} css={{ flexGrow: 1 }}>
+              <Box id="invoice-content" width={1} css={{ flexGrow: 1 }}>
                 {this.renderTransactionsTable(transactionsChunk)}
                 {pageNumber === chunkedTransactions.length - 1 && (
                   <Flex justifyContent="flex-end" mt={3}>

jest.config.js

@@ -0,0 +1,8 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  setupFilesAfterEnv: ['<rootDir>/test/setup.js'],
+  transformIgnorePatterns: ['/node_modules/(?!@opencollective/frontend-components)'],
+  moduleNameMapper: {
+    '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$': '<rootDir>/test/__mocks__/fileMock.js',
+  },
+};

lib/graphql/queries.js

@@ -32,6 +32,11 @@ const receiptTransactionFragment = gql`
     host {
       ...ReceiptTransactionHostFieldsFragment
     }
+    oppositeTransaction {
+      host {
+        ...ReceiptTransactionHostFieldsFragment
+      }
+    }
     amount {
       valueInCents
       currency
@@ -65,16 +70,6 @@ const receiptTransactionFragment = gql`
         address
         country
       }
-      ... on AccountWithHost {
-        host {
-          ...ReceiptTransactionHostFieldsFragment
-        }
-      }
-      ... on Organization {
-        host {
-          ...ReceiptTransactionHostFieldsFragment
-        }
-      }
     }
     toAccount {
       id
@@ -88,16 +83,6 @@ const receiptTransactionFragment = gql`
         address
         country
       }
-      ... on AccountWithHost {
-        host {
-          ...ReceiptTransactionHostFieldsFragment
-        }
-      }
-      ... on Organization {
-        host {
-          ...ReceiptTransactionHostFieldsFragment
-        }
-      }
       ... on Event {
         startsAt
         endsAt
@@ -163,16 +148,6 @@ export async function fetchInvoiceByDateRange(
           address
           country
         }
-        ... on AccountWithHost {
-          host {
-            ...ReceiptTransactionHostFieldsFragment
-          }
-        }
-        ... on Organization {
-          host {
-            ...ReceiptTransactionHostFieldsFragment
-          }
-        }
       }
       transactions(
         fromAccount: { slug: $fromCollectiveSlug }
@@ -319,6 +294,7 @@ export async function fetchExpenseInvoiceData(expenseId, accessToken, apiKey) {
             host {
               id
               name
+              legalName
               slug
               type
               expensePolicy

lib/transactions.js

@@ -75,13 +75,3 @@ export const getTaxesBreakdown = (transactions) => {
     ),
   }));
 };
-
-export const getHostFromTransaction = (transaction) => {
-  if (transaction.host) {
-    return transaction.host;
-  } else if (transaction.type === 'CREDIT') {
-    return transaction.fromAccount?.host;
-  } else {
-    return transaction.toAccount?.host;
-  }
-};