Use "everyone" in the expense card if it was paid for all participants (#398)

messages/en-US.json

@@ -43,6 +43,7 @@
   },
   "ExpenseCard": {
     "paidBy": "Paid by <strong>{paidBy}</strong> for <paidFor></paidFor>",
+    "everyone": "everyone",
     "receivedBy": "Received by <strong>{paidBy}</strong> for <paidFor></paidFor>",
     "yourBalance": "Your balance:",
     "notInvolved": "You are not involved"

messages/nl-NL.json

@@ -43,6 +43,7 @@
   },
   "ExpenseCard": {
     "paidBy": "Betaald door <strong>{paidBy}</strong> voor <paidFor></paidFor>",
+    "everyone": "iedereen",
     "receivedBy": "Ontvangen door <strong>{paidBy}</strong> voor <paidFor></paidFor>",
     "yourBalance": "Jouw balans:"
   },

src/app/groups/[groupId]/expenses/expense-card.tsx

@@ -13,15 +13,27 @@ import { Fragment } from 'react'
 
 type Expense = Awaited<ReturnType<typeof getGroupExpenses>>[number]
 
-function Participants({ expense }: { expense: Expense }) {
+function Participants({
+  expense,
+  participantCount,
+}: {
+  expense: Expense
+  participantCount: number
+}) {
   const t = useTranslations('ExpenseCard')
   const key = expense.amount > 0 ? 'paidBy' : 'receivedBy'
-  const paidFor = expense.paidFor.map((paidFor, index) => (
+  const paidFor =
-    <Fragment key={index}>
+    expense.paidFor.length == participantCount && participantCount >= 4 ? (
-      {index !== 0 && <>, </>}
+      <strong>{t('everyone')}</strong>
-      <strong>{paidFor.participant.name}</strong>
+    ) : (
-    </Fragment>
+      expense.paidFor.map((paidFor, index) => (
-  ))
+        <Fragment key={index}>
+          {index !== 0 && <>, </>}
+          <strong>{paidFor.participant.name}</strong>
+        </Fragment>
+      ))
+    )
+
   const participants = t.rich(key, {
     strong: (chunks) => <strong>{chunks}</strong>,
     paidBy: expense.paidBy.name,
@@ -35,9 +47,15 @@ type Props = {
   expense: Expense
   currency: string
   groupId: string
+  participantCount: number
 }
 
-export function ExpenseCard({ expense, currency, groupId }: Props) {
+export function ExpenseCard({
+  expense,
+  currency,
+  groupId,
+  participantCount,
+}: Props) {
   const router = useRouter()
   const locale = useLocale()
 
@@ -61,7 +79,7 @@ export function ExpenseCard({ expense, currency, groupId }: Props) {
           {expense.title}
         </div>
         <div className="text-xs text-muted-foreground">
-          <Participants expense={expense} />
+          <Participants expense={expense} participantCount={participantCount} />
         </div>
         <div className="text-xs text-muted-foreground">
           <ActiveUserBalance {...{ groupId, currency, expense }} />

src/app/groups/[groupId]/expenses/expense-list.tsx

@@ -172,6 +172,7 @@ const ExpenseListForSearch = ({
                 expense={expense}
                 currency={group.currency}
                 groupId={groupId}
+                participantCount={group.participants.length}
               />
             ))}
           </div>