[Home Page] Update Your Expensify Cards to Your spend to streamline common points of customer confusion#89899
Conversation
|
Hey, I noticed you changed If you want to automatically generate translations for other locales, an Expensify employee will have to:
Alternatively, if you are an external contributor, you can run the translation script locally with your own OpenAI API key. To learn more, try running: npx ts-node ./scripts/generateTranslations.ts --helpTypically, you'd want to translate only what you changed by running |
|
🚧 @grgia has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
|
🚧 @mountiny has triggered a test Expensify/App build. You can view the workflow run here. |
🦜 Polyglot Parrot! 🦜Squawk! Looks like you added some shiny new English strings. Allow me to parrot them back to you in other tongues: View the translation diffdiff --git a/src/languages/de.ts b/src/languages/de.ts
index 4de93e2a..4a8d1ebe 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -1037,6 +1037,12 @@ const translations: TranslationDeepObject<typeof en> = {
other: (pluralCount: number) => `Verbleibende Zeit: ${pluralCount} Tage`,
}),
},
+ yourSpend: {
+ title: 'Ihre Ausgaben',
+ awaitingApproval: 'Ausstehende Genehmigung',
+ repaidLast30Days: 'In den letzten 30 Tagen zurückgezahlt',
+ recentTransactions: ({lastFour}: {lastFour: string}) => `Aktuelle Transaktionen • ${lastFour}`,
+ },
},
allSettingsScreen: {
subscription: 'Abonnement',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index 580833a8..e4af99e3 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -1040,6 +1040,12 @@ const translations: TranslationDeepObject<typeof en> = {
setupRules: 'Configurer les règles de dépense',
inviteAccountant: 'Inviter votre comptable',
},
+ yourSpend: {
+ title: 'Vos dépenses',
+ awaitingApproval: 'En attente d’approbation',
+ repaidLast30Days: 'Remboursé au cours des 30 derniers jours',
+ recentTransactions: ({lastFour}: {lastFour: string}) => `Transactions récentes • ${lastFour}`,
+ },
},
allSettingsScreen: {
subscription: 'Abonnement',
diff --git a/src/languages/it.ts b/src/languages/it.ts
index 85412c27..faaf7d26 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -1038,6 +1038,12 @@ const translations: TranslationDeepObject<typeof en> = {
setupRules: 'Configura le regole di spesa',
inviteAccountant: 'Invita il tuo commercialista',
},
+ yourSpend: {
+ title: 'Le tue spese',
+ awaitingApproval: 'In attesa di approvazione',
+ repaidLast30Days: 'Rimborsato negli ultimi 30 giorni',
+ recentTransactions: ({lastFour}: {lastFour: string}) => `Transazioni recenti • ${lastFour}`,
+ },
},
allSettingsScreen: {
subscription: 'Abbonamento',
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index 35666c34..03f8c75e 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -1021,6 +1021,12 @@ const translations: TranslationDeepObject<typeof en> = {
setupRules: '支出ルールを設定',
inviteAccountant: '会計士を招待',
},
+ yourSpend: {
+ title: 'あなたの支出',
+ awaitingApproval: '承認待ち',
+ repaidLast30Days: '過去30日間に返済済み',
+ recentTransactions: ({lastFour}: {lastFour: string}) => `最近の取引 • ${lastFour}`,
+ },
},
allSettingsScreen: {
subscription: 'サブスクリプション',
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index 11864eee..0f819689 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -1036,6 +1036,12 @@ const translations: TranslationDeepObject<typeof en> = {
setupRules: 'Uitgavenregels instellen',
inviteAccountant: 'Nodig je accountant uit',
},
+ yourSpend: {
+ title: 'Je uitgaven',
+ awaitingApproval: 'In afwachting van goedkeuring',
+ repaidLast30Days: 'Terugbetaald in de afgelopen 30 dagen',
+ recentTransactions: ({lastFour}: {lastFour: string}) => `Recente transacties • ${lastFour}`,
+ },
},
allSettingsScreen: {
subscription: 'Abonnement',
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index fee79580..713de369 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -1038,6 +1038,12 @@ const translations: TranslationDeepObject<typeof en> = {
setupRules: 'Skonfiguruj zasady wydatków',
inviteAccountant: 'Zaproś swojego księgowego',
},
+ yourSpend: {
+ title: 'Twoje wydatki',
+ awaitingApproval: 'Oczekuje na zatwierdzenie',
+ repaidLast30Days: 'Spłacono w ciągu ostatnich 30 dni',
+ recentTransactions: ({lastFour}: {lastFour: string}) => `Ostatnie transakcje • ${lastFour}`,
+ },
},
allSettingsScreen: {
subscription: 'Subskrypcja',
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index d44b4ef4..932460a4 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -1036,6 +1036,12 @@ const translations: TranslationDeepObject<typeof en> = {
setupRules: 'Configurar regras de gasto',
inviteAccountant: 'Convide seu contador',
},
+ yourSpend: {
+ title: 'Seus gastos',
+ awaitingApproval: 'Aguardando aprovação',
+ repaidLast30Days: 'Reembolsado nos últimos 30 dias',
+ recentTransactions: ({lastFour}: {lastFour: string}) => `Transações recentes • ${lastFour}`,
+ },
},
allSettingsScreen: {
subscription: 'Assinatura',
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index d416e611..71ba0ff5 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -1004,6 +1004,7 @@ const translations: TranslationDeepObject<typeof en> = {
setupRules: '设置消费规则',
inviteAccountant: '邀请你的会计',
},
+ yourSpend: {title: '您的支出', awaitingApproval: '等待审批', repaidLast30Days: '过去30天内已偿还', recentTransactions: ({lastFour}: {lastFour: string}) => `最近交易 • ${lastFour}`},
},
allSettingsScreen: {
subscription: '订阅',
Note You can apply these changes to your branch by copying the patch to your clipboard, then running |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
Here's on my account: 
Cards for ref: 
Screen.Recording.2026-05-07.at.3.32.47.PM.movClicking on the cards shows a view that doesnt seem to correlate with the results old home page: 
|
|
@grgia Okay, testing this on fake data on my end doesn't seem to work well 😄 I will try to figure out a better way of testing |
|
No worries. We can test again tomorrow. |
|
🚧 @mountiny has triggered a test Expensify/App build. You can view the workflow run here. |
|
But overall changes look good! |
@dubielzyk-expensify @shawnborton This is the updated version. Is it okay, or should I make the second row shorter, like in the for you section? |
|
Shorter second row would be great! |
|
@shawnborton done ✅ |
|
Looks good 👍 |
|
@grgia I think it's good to go |
|
🚧 @grgia has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by https://github.com/grgia in version: 9.3.79-1 🚀
Bundle Size Analysis (Sentry): |
|
Yes, help site changes are required. The PR replaces the Assigned cards section on Home with a broader Your spend section, and the help site article I've created a draft PR with the necessary updates: #91361 Changes made:
Please mark it as "Ready for review" when it is ready for review. |
|
Deploy Blocker ##91370 was identified to be related to this PR. |
|
Deploy Blocker #91371 was identified to be related to this PR. |
11 participants
Explanation of Change
Your Expensify Cardsslot on the Home page with a broaderYour spendslot.Awaiting approvalandRepaid in the last 30 daysrows showing summed totals across workspaces.Recent transactions • <lastFour>and switch its total to last‑30‑days spend.Spend > Expensesquery; rows without data are hidden, and the slot is hidden when nothing applies.Fixed Issues
$ #87743
PROPOSAL:
Tests
Offline tests
QA Steps
Your spendslot renders withAwaiting approvalandRepaid in the last 30 daysrows and bold summed totals.Spend > Expenseswith the correct filters (status:outstanding/status:paid+ last 30 days).Recent transactions • <last4>row per card with the doughnut filling proportionally to spend (red at 100%).Spend > Expensesfiltered by that card and the last 30 days.PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari