From 7ddc7403cfb60805e8ced02ca335a32a6dde4b87 Mon Sep 17 00:00:00 2001
From: Benjamin Piouffle <benjamin@opencollective.com>
Date: Wed, 11 Sep 2024 10:40:46 +0200
Subject: [PATCH] feat(Expense): add reference (#1053)

---
 components/ExpenseInvoice.js | 10 ++++++++++
 lib/graphql/queries.js       |  1 +
 2 files changed, 11 insertions(+)

diff --git a/components/ExpenseInvoice.js b/components/ExpenseInvoice.js
index 01f5850a..c00944f8 100644
--- a/components/ExpenseInvoice.js
+++ b/components/ExpenseInvoice.js
@@ -107,6 +107,15 @@ const ExpenseInvoice = ({ expense, pageFormat }) => {
                     />
                   </H2>
                 </StyledLink>
+                {expense.reference && (
+                  <P fontSize="13px" color="black.900">
+                    <FormattedMessage
+                      id="Expense.Reference"
+                      defaultMessage="Reference: {reference}"
+                      values={{ reference: expense.reference }}
+                    />
+                  </P>
+                )}
                 <FormattedMessage
                   id="CollectiveColumn"
                   defaultMessage="Collective: {collectiveName}"
@@ -176,6 +185,7 @@ ExpenseInvoice.propTypes = {
   expense: PropTypes.shape({
     id: PropTypes.string,
     legacyId: PropTypes.number,
+    reference: PropTypes.string,
     description: PropTypes.string,
     currency: PropTypes.string,
     type: PropTypes.oneOf(['INVOICE', 'RECEIPT']),
diff --git a/lib/graphql/queries.js b/lib/graphql/queries.js
index 4d4385d2..15d1980c 100644
--- a/lib/graphql/queries.js
+++ b/lib/graphql/queries.js
@@ -275,6 +275,7 @@ export async function fetchExpenseInvoiceData(expenseId, authorizationHeaders) {
         type
         invoiceInfo
         amount
+        reference
         permissions {
           canSeeInvoiceInfo
         }