Skip to content

Getting started: show Issue Expensify cards step when Expensify Card is selected during onboarding#94423

Draft
MelvinBot wants to merge 1 commit into
mainfrom
claude-gettingStartedExpensifyCardStep
Draft

Getting started: show Issue Expensify cards step when Expensify Card is selected during onboarding#94423
MelvinBot wants to merge 1 commit into
mainfrom
claude-gettingStartedExpensifyCardStep

Conversation

@MelvinBot

Copy link
Copy Markdown
Contributor

Explanation of Change

During manageTeam onboarding, if a user deselects Company cards and selects Expensify Card, the Getting started section still showed the Link company cards task. Pressing it called enableCompanyCards() and re-enabled a feature the user explicitly opted out of, instead of offering an Expensify Card setup step.

The cards row in useGettingStartedItems was hard-coded to always push linkCompanyCards, with no check on which card feature the workspace actually has enabled. This PR makes that slot reflect the user's onboarding choice:

  • When Expensify Card is enabled and Company cards is not (policy.areExpensifyCardsEnabled && !policy.areCompanyCardsEnabled), the section now shows an Issue Expensify cards task instead of Link company cards. It:
    • routes to ROUTES.WORKSPACE_EXPENSIFY_CARD,
    • gates on policy.areExpensifyCardsEnabled and enables the feature via enableExpensifyCard(activePolicyID, true, false) (so it never re-enables Company cards),
    • is marked complete once the workspace has an Expensify Card provisioned (hasIssuedExpensifyCard).
  • The existing Link company cards branch is preserved for every other case (Company cards enabled, or both features enabled), so current behavior and tests are unchanged.
  • GettingStartedItem gains an optional subtitle, rendered under the label in GettingStartedRow, used to show the required sub-text "Customize controls and streamline spending" on the new row only.
  • Added the issueExpensifyCards / issueExpensifyCardsSubtitle copy to all src/languages/*.ts files.

Added focused unit tests covering the new branch (shows the Expensify Card row and hides the company-cards row, navigates to the Expensify Card page, wires enableExpensifyCard and never enableCompanyCards, completes once a card is provisioned, and keeps the company-cards row when both features are enabled).

🤖 This PR was generated by MelvinBot based on the approved proposal.

Fixed Issues

$ #93826
PROPOSAL: #93826 (comment)

Tests

// TODO: The human co-author must fill out the tests you ran before marking this PR as "ready for review".

  1. Start onboarding and choose Manage my team's expenses.
  2. On the interested-features step, deselect Company cards and select Expensify Card.
  3. Complete onboarding and open the Home page.
  4. Verify the Getting started section shows an Issue Expensify cards task (sub-text "Customize controls and streamline spending") instead of Link company cards.
  5. Tap it and verify it navigates to the workspace Expensify Card page and does not enable Company cards on the workspace.
  6. Issue/provision an Expensify Card for the workspace and verify the task becomes checked/complete.
  • Verify that no errors appear in the JS console

Offline tests

Same as tests.

QA Steps

// TODO: The human co-author must fill out the QA tests you ran before marking this PR as "ready for review".

  1. Same steps as Tests above.
  • Verify that no errors appear in the JS console

PR Author Checklist

  • I linked the correct issue in the ### Fixed Issues section above
  • I wrote clear testing steps that cover the changes made in this PR
    • I added steps for local testing in the Tests section
    • I added steps for the expected offline behavior in the Offline steps section
    • I added steps for Staging and/or Production testing in the QA steps section
    • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
    • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
    • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
  • I included screenshots or videos for tests on all platforms
  • I ran the tests on all platforms & verified they passed on:
    • Android: Native
    • Android: mWeb Chrome
    • iOS: Native
    • iOS: mWeb Safari
    • MacOS: Chrome / Safari
  • I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
  • I followed proper code patterns (see Reviewing the code)
    • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
    • I verified that comments were added to code that is not self explanatory
    • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
    • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • I followed the guidelines as stated in the Review Guidelines
  • I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • If any new file was added I verified that:
    • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
  • If a new CSS style is added I verified that:
    • A similar style doesn't already exist
    • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
  • If new assets were added or existing ones were modified, I verified that:
    • The assets are optimized and compressed (for SVG files, run npm run compress-svg)
    • The assets load correctly across all supported platforms.
  • If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
  • If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
  • If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
  • If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
  • If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
    • I verified that all the inputs inside a form are aligned with each other.
    • I added Design label and/or tagged @Expensify/design so the design team can review the changes.
  • I added unit tests for any new feature or bug fix in this PR to help automatically prevent regressions in this user flow.
  • If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari

…s selected

Co-authored-by: Yauheni Horbach <ZhenjaHorbach@users.noreply.github.com>
@OSBotify

Copy link
Copy Markdown
Contributor

🦜 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 diff
diff --git a/src/languages/de.ts b/src/languages/de.ts
index 1bc14dba55d..8961249a60c 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -1044,8 +1044,8 @@ const translations: TranslationDeepObject<typeof en> = {
             connectAccountingDefault: 'Mit Buchhaltung verbinden',
             customizeCategories: 'Buchhaltungskategorien anpassen',
             linkCompanyCards: 'Firmenkarten verknüpfen',
-            issueExpensifyCards: 'Expensify-Karten ausgeben',
-            issueExpensifyCardsSubtitle: 'Kontrollen anpassen und Ausgaben optimieren',
+            issueExpensifyCards: 'Expensify Karten ausgeben',
+            issueExpensifyCardsSubtitle: 'Steuerungen anpassen und Ausgaben optimieren',
             setupRules: 'Ausgabelimits einrichten',
             inviteAccountant: 'Lade deine:n Steuerberater:in ein',
         },
@@ -9817,7 +9817,6 @@ Hier ist ein *Testbeleg*, um dir zu zeigen, wie es funktioniert:`,
         pdfFailedBody: 'Your file could not be generated. Try again, or reach out to Concierge for help.',
         readyPartialBody: ({count, total}: {count: number; total: number}) =>
             `${count} of ${total} reports exported. If it didn't automatically download, use the button below. See which reports failed in <concierge-link>Concierge</concierge-link>.`,
-
         close: 'Close',
     },
     domain: {
diff --git a/src/languages/es.ts b/src/languages/es.ts
index f6c5cf2aa3c..1cc13defbb5 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1018,7 +1018,7 @@ const translations: TranslationDeepObject<typeof en> = {
             inviteAccountant: 'Invita a tu contador',
             linkCompanyCards: 'Vincular tarjetas corporativas',
             issueExpensifyCards: 'Emitir tarjetas Expensify',
-            issueExpensifyCardsSubtitle: 'Personaliza los controles y agiliza el gasto',
+            issueExpensifyCardsSubtitle: 'Personaliza controles y optimiza los gastos',
             setupRules: 'Configurar reglas de gasto',
         },
         upcomingTravel: 'Próximos viajes',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index a6e86ea4132..3bf0b1107f6 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -1061,7 +1061,7 @@ const translations: TranslationDeepObject<typeof en> = {
             customizeCategories: 'Personnaliser les catégories comptables',
             linkCompanyCards: 'Lier des cartes d’entreprise',
             issueExpensifyCards: 'Émettre des cartes Expensify',
-            issueExpensifyCardsSubtitle: 'Personnalisez les contrôles et simplifiez les dépenses',
+            issueExpensifyCardsSubtitle: 'Personnalisez les contrôles et rationalisez les dépenses',
             setupRules: 'Configurer les règles de dépense',
             inviteAccountant: 'Inviter votre comptable',
         },
@@ -9849,7 +9849,6 @@ Voici un *reçu test* pour vous montrer comment ça fonctionne :`,
         pdfFailedBody: 'Your file could not be generated. Try again, or reach out to Concierge for help.',
         readyPartialBody: ({count, total}: {count: number; total: number}) =>
             `${count} of ${total} reports exported. If it didn't automatically download, use the button below. See which reports failed in <concierge-link>Concierge</concierge-link>.`,
-
         close: 'Close',
     },
     domain: {
diff --git a/src/languages/it.ts b/src/languages/it.ts
index ab01f52b9b7..31630cc1d59 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -1058,7 +1058,7 @@ const translations: TranslationDeepObject<typeof en> = {
             connectAccountingDefault: 'Connetti alla contabilità',
             customizeCategories: 'Personalizza le categorie contabili',
             linkCompanyCards: 'Collega carte aziendali',
-            issueExpensifyCards: 'Emetti carte Expensify',
+            issueExpensifyCards: 'Emetti Carte Expensify',
             issueExpensifyCardsSubtitle: 'Personalizza i controlli e semplifica le spese',
             setupRules: 'Configura le regole di spesa',
             inviteAccountant: 'Invita il tuo commercialista',
@@ -9805,7 +9805,6 @@ Ecco una *ricevuta di prova* per mostrarti come funziona:`,
         pdfFailedBody: 'Your file could not be generated. Try again, or reach out to Concierge for help.',
         readyPartialBody: ({count, total}: {count: number; total: number}) =>
             `${count} of ${total} reports exported. If it didn't automatically download, use the button below. See which reports failed in <concierge-link>Concierge</concierge-link>.`,
-
         close: 'Close',
     },
     domain: {
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index 1ad88882fe0..8568ad815e8 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -1044,8 +1044,8 @@ const translations: TranslationDeepObject<typeof en> = {
             connectAccountingDefault: '会計ソフトに接続',
             customizeCategories: '会計カテゴリをカスタマイズする',
             linkCompanyCards: '会社カードを連携',
-            issueExpensifyCards: 'Expensifyカードを発行',
-            issueExpensifyCardsSubtitle: 'コントロールをカスタマイズして支出を効率化',
+            issueExpensifyCards: 'Expensify カードを発行',
+            issueExpensifyCardsSubtitle: 'コントロールをカスタマイズして支出を効率化する',
             setupRules: '支出ルールを設定',
             inviteAccountant: '会計士を招待',
         },
@@ -9680,7 +9680,6 @@ ${reportName}`,
         pdfFailedBody: 'Your file could not be generated. Try again, or reach out to Concierge for help.',
         readyPartialBody: ({count, total}: {count: number; total: number}) =>
             `${count} of ${total} reports exported. If it didn't automatically download, use the button below. See which reports failed in <concierge-link>Concierge</concierge-link>.`,
-
         close: 'Close',
     },
     domain: {
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index 187a3e778df..63ece4b1f3c 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -1056,8 +1056,8 @@ const translations: TranslationDeepObject<typeof en> = {
             connectAccountingDefault: 'Verbind met boekhouding',
             customizeCategories: 'Boekhoudcategorieën aanpassen',
             linkCompanyCards: 'Bedrijfspassen koppelen',
-            issueExpensifyCards: 'Expensify-kaarten uitgeven',
-            issueExpensifyCardsSubtitle: 'Pas controles aan en stroomlijn uitgaven',
+            issueExpensifyCards: 'Expensify Kaarten uitgeven',
+            issueExpensifyCardsSubtitle: 'Pas instellingen aan en stroomlijn uitgaven',
             setupRules: 'Uitgavenregels instellen',
             inviteAccountant: 'Nodig je accountant uit',
         },
@@ -9771,7 +9771,6 @@ Hier is een *proefbon* om je te laten zien hoe het werkt:`,
         pdfFailedBody: 'Your file could not be generated. Try again, or reach out to Concierge for help.',
         readyPartialBody: ({count, total}: {count: number; total: number}) =>
             `${count} of ${total} reports exported. If it didn't automatically download, use the button below. See which reports failed in <concierge-link>Concierge</concierge-link>.`,
-
         close: 'Close',
     },
     domain: {
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index 5358dc417d0..7cde46680a3 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -1059,7 +1059,7 @@ const translations: TranslationDeepObject<typeof en> = {
             customizeCategories: 'Dostosuj kategorie księgowe',
             linkCompanyCards: 'Połącz firmowe karty',
             issueExpensifyCards: 'Wydaj karty Expensify',
-            issueExpensifyCardsSubtitle: 'Dostosuj kontrole i usprawnij wydatki',
+            issueExpensifyCardsSubtitle: 'Dostosuj kontrolę i usprawnij wydatki',
             setupRules: 'Skonfiguruj zasady wydatków',
             inviteAccountant: 'Zaproś swojego księgowego',
         },
@@ -9756,7 +9756,6 @@ Oto *paragon testowy*, żeby pokazać Ci, jak to działa:`,
         pdfFailedBody: 'Your file could not be generated. Try again, or reach out to Concierge for help.',
         readyPartialBody: ({count, total}: {count: number; total: number}) =>
             `${count} of ${total} reports exported. If it didn't automatically download, use the button below. See which reports failed in <concierge-link>Concierge</concierge-link>.`,
-
         close: 'Close',
     },
     domain: {
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index b22f9f222e3..c2f85dbfed7 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -1057,7 +1057,7 @@ const translations: TranslationDeepObject<typeof en> = {
             customizeCategories: 'Personalizar categorias contábeis',
             linkCompanyCards: 'Vincular cartões corporativos',
             issueExpensifyCards: 'Emitir cartões Expensify',
-            issueExpensifyCardsSubtitle: 'Personalize os controles e simplifique os gastos',
+            issueExpensifyCardsSubtitle: 'Personalize controles e otimize os gastos',
             setupRules: 'Configurar regras de gasto',
             inviteAccountant: 'Convide seu contador',
         },
@@ -9760,7 +9760,6 @@ Aqui está um *comprovante de teste* para mostrar como funciona:`,
         pdfFailedBody: 'Your file could not be generated. Try again, or reach out to Concierge for help.',
         readyPartialBody: ({count, total}: {count: number; total: number}) =>
             `${count} of ${total} reports exported. If it didn't automatically download, use the button below. See which reports failed in <concierge-link>Concierge</concierge-link>.`,
-
         close: 'Close',
     },
     domain: {
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index 82cecaee6bd..74f4c1956e0 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -1028,7 +1028,7 @@ const translations: TranslationDeepObject<typeof en> = {
             customizeCategories: '自定义会计类别',
             linkCompanyCards: '关联公司卡',
             issueExpensifyCards: '发放 Expensify 卡',
-            issueExpensifyCardsSubtitle: '自定义控制并简化支出',
+            issueExpensifyCardsSubtitle: '自定义管控,优化支出',
             setupRules: '设置消费规则',
             inviteAccountant: '邀请你的会计',
         },
@@ -9497,7 +9497,6 @@ ${reportName}`,
         pdfFailedBody: 'Your file could not be generated. Try again, or reach out to Concierge for help.',
         readyPartialBody: ({count, total}: {count: number; total: number}) =>
             `${count} of ${total} reports exported. If it didn't automatically download, use the button below. See which reports failed in <concierge-link>Concierge</concierge-link>.`,
-
         close: 'Close',
     },
     domain: {

Note

You can apply these changes to your branch by copying the patch to your clipboard, then running pbpaste | git apply 😉

View workflow run

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants