enhancement: Use legal names in receipts and invoices

Author: Betree

.gitignore

@@ -17,6 +17,7 @@ out
 coverage
 test/__snapshots__/*.diff.png
 test/__snapshots__/*.new.png
+test-report.junit.xml
 
 # VSCode
 .vscode

package.json

@@ -9,7 +9,7 @@
     "start": "node dist/server/index.js",
     "test": "START_SERVER=false vitest --run",
     "test:watch": "vitest --watch",
-    "test:coverage": "vitest --run --coverage --reporter=junit --outputFile=test-report.junit.xml",
+    "test:coverage": "vitest --run --coverage --reporter=junit --reporter=default --outputFile=test-report.junit.xml",
     "test:update": "rm test/__snapshots__/*.png && vitest --run",
     "type:check": "tsc --noEmit",
     "dev": "tsx watch server/index.ts",

server/components/CollectiveFooter.tsx

@@ -49,7 +49,7 @@ const CollectiveFooter = ({ collective }: { collective: Account | GraphQLV1Colle
         </View>
       )}
       <View>
-        <Text style={styles.collectiveName}>{collective.name}</Text>
+        <Text style={styles.collectiveName}>{collective.legalName || collective.name || collective.slug}</Text>
         <View style={styles.address}>
           <LocationParagraph collective={collective} />
         </View>

server/components/expenses/ExpenseInvoice.tsx

@@ -171,7 +171,7 @@ const ExpenseInvoice = ({
                   <Text style={styles.addressTitle}>
                     <FormattedMessage id="dM+p3/" defaultMessage="From" />
                   </Text>
-                  <Text style={styles.addressText}>{payee.name || payee.slug}</Text>
+                  <Text style={styles.addressText}>{payee.legalName || payee.name || payee.slug}</Text>
                   {payeeLocation?.address && <Text style={styles.addressText}>{payeeLocation.address}</Text>}
                   {payeeLocation?.country && <Text style={styles.addressText}>{payeeLocation.country}</Text>}
                 </View>
@@ -180,7 +180,9 @@ const ExpenseInvoice = ({
                   <Text style={styles.addressTitle}>
                     <FormattedMessage id="gSv0eP" defaultMessage="Bill to" />
                   </Text>
-                  <Text style={styles.addressText}>{billToAccount.name || billToAccount.slug}</Text>
+                  <Text style={styles.addressText}>
+                    {billToAccount.legalName || billToAccount.name || billToAccount.slug}
+                  </Text>
                   {billToAccount.location?.address && (
                     <Text style={styles.addressText}>{billToAccount.location.address}</Text>
                   )}
@@ -217,7 +219,7 @@ const ExpenseInvoice = ({
                   <FormattedMessage
                     id="AJ6aIN"
                     defaultMessage="Collective: {collectiveName}"
-                    values={{ collectiveName: account.name || account.slug }}
+                    values={{ collectiveName: account.legalName || account.name || account.slug }}
                   />
                 </Text>
                 <Text style={styles.expenseInfo}>

server/components/receipts/Receipt.tsx

@@ -272,7 +272,7 @@ type Props = {
     fromAccountHost?:
       | (Pick<Account, 'name' | 'slug' | 'legalName'> & { settings?: { VAT?: { number?: string } } })
       | null;
-    host: Pick<Account, 'name' | 'slug' | 'location'>;
+    host: Pick<Account, 'name' | 'slug' | 'legalName' | 'location'>;
     transactions: Array<
       Pick<
         Transaction,
@@ -592,7 +592,9 @@ export class Receipt extends React.Component<Props> {
                 <View style={[styles.flexRow, styles.flexWrap, styles.alignStart]}>
                   <View style={[styles.flexGrow, styles.mb3]}>
                     <Link src={`https://opencollective.com/${receipt.host.slug}`} style={styles.link}>
-                      <Text style={styles.accountName}>{receipt.host.name || receipt.host.slug}</Text>
+                      <Text style={styles.accountName}>
+                        {receipt.host.legalName || receipt.host.name || receipt.host.slug}
+                      </Text>
                     </Link>
                     <View style={styles.my2}>
                       <LocationParagraph collective={receipt.host as Account} />