[Debug Mode] Show reason for RBR/GBR on LHN tabs by pac-guerreiro · Pull Request #49962 · Expensify/App

pac-guerreiro · 2024-09-30T22:41:41Z

Details

Fixed Issues

$#49600
PROPOSAL: N/A

Tests

To trigger a GBR in Inbox

Make sure there are no reports with RBR

Open any report from Inbox page
Click on the + on the chat editor and select Assign Task
Fill all the necessary data and assign the task to your self
The inbox should now show a green indicator and a message saying 'There's a report awaiting action' above the bottom bar
Open another report, then click on View button after the message
You should be redirected to the report where you assigned the task to yourself

To trigger a RBR in Inbox

Create a new expense
Remove a required property from expense (e.g. Category)
The inbox indicator should be red
A message saying 'There's a report with errors' should be shown above the bottom bar
If you click on View, you should be redirected to the expense report

To trigger a GBR in Settings

Go to Profile, then open Contact method
Add new contact method
The new contact method should show a GBR indicator, so as settings avatar in the bottom bar
A message saying 'A contact method requires verification' should be displayed above the bottom bar
If you click on View, you should be redirected to the contact method page

To trigger a RBR in Settings

Go to Profile, then open Contact method
Add new contact method
During verification phase enter any code, then continue
The new contact method should show a RBR indicator, so as settings avatar in the bottom bar
A message saying 'There's a problem with a contact method' should be displayed above the bottom bar
If you click on View, you should be redirected to the contact method page

Offline tests

Same as tests

QA Steps

Same as tests

PR Author Checklist

Screenshots/Videos

Android: Native

Android.-.Native.mp4

Android: mWeb Chrome

Android.-.Chrome.mp4

iOS: Native

iOS.-.Native.mp4

iOS: mWeb Safari

iOS.-.Safari.mp4

MacOS: Chrome / Safari

MacOS.-.Chrome.mp4

MacOS: Desktop

MacOS.-.Native.mp4

pac-guerreiro · 2024-09-30T22:47:14Z

I need to add unit tests for the new hook that I created - useSettingsStatus - to make sure that it's working property since I extracted it's logic from Indicator.tsx, so it could be reused in debug mode.

Besides this, I also have to:

Finish english translations
Translate english to spanish
Make useSettingsStatus return and optional policyID which is necessary to redirect user's to the policy pages that contain errors or require attention
Test if the translations fit in the UI
Take screenshots and add them to the PR
Add testing steps to the PR

…rbr-gbr-on-lhn-tabs # Conflicts: # src/languages/en.ts

…ing UI

pac-guerreiro · 2024-10-01T20:05:08Z

Today's update:

Finish english translations
Make useSettingsStatus return and optional policyID which is necessary to redirect user's to the policy pages that contain errors or require attention
STARTED Add unit tests for useSettingStatus hook

To continue tomorrow:

Add unit tests for useSettingStatus hook
Translate english to spanish
Test if the translations fit in the UI
Take screenshots and add them to the PR
Add testing steps to the PR

fabioh8010

Partial review

src/libs/WorkspacesSettingsUtils.ts

src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/DebugTabView.tsx

src/CONST.ts

src/hooks/useSettingsStatus.ts

src/languages/en.ts

…rbr-gbr-on-lhn-tabs # Conflicts: # src/CONST.ts # src/languages/en.ts # src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

pac-guerreiro · 2024-10-07T23:29:23Z

Today's update:

Add unit tests for useSettingStatus hook
Addressed @fabioh8010's feedback

To continue tomorrow:

Translate english to spanish
Test if the translations fit in the UI
Take screenshots and add them to the PR
Add testing steps to the PR

…rbr-gbr-on-lhn-tabs

pac-guerreiro · 2024-10-08T23:49:23Z

Today's update:

Improved english translations
Fixed wrong routes being used for contact method error or info
Fixed GBR/RBR message not fitting in the UI

Todo:

Test subscription GBR/RBR, reimbursement account RBR, workspace employee list RBR and workspace custom unit RBR
Translate english to spanish
Take screenshots and add them to the PR
Add testing steps to the PR

src/hooks/useIndicatorStatus.ts

src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/DebugTabView.tsx

src/libs/WorkspacesSettingsUtils.ts

tests/unit/useIndicatorStatusTest.tsx

…rbr-gbr-on-lhn-tabs

pac-guerreiro · 2024-10-11T09:36:40Z

I forgot to leave my update yesterday, here it is:

Test subscription GBR/RBR, reimbursement account RBR, workspace employee list RBR and workspace custom unit RBR
Improve english translations
Translate english to spanish
Apply @fabioh8010's feedback

Todo:

Take screenshots and add them to the PR
Add testing steps to the PR

…lations

…rbr-gbr-on-lhn-tabs

pac-guerreiro · 2024-10-14T10:18:55Z

All tasks done. This PR is now ready for review!

pac-guerreiro · 2024-10-15T18:47:34Z

Still waiting on final review from @DylanDylann

pac-guerreiro · 2024-10-16T22:47:07Z

Still waiting on final review from @DylanDylann

DylanDylann · 2024-10-17T02:43:51Z

Screen.Recording.2024-10-17.at.09.41.43.mov

Let's use text color to be suitable with the background color

DylanDylann · 2024-10-17T02:50:09Z

src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

    useEffect(() => {
        setChatTabBrickRoad(getChatTabBrickRoad(activeWorkspaceID));
-    }, [activeWorkspaceID, transactionViolations]);
+    }, [activeWorkspaceID, transactionViolations, reports, reportActions]);


Nice change 🥇

DylanDylann · 2024-10-17T03:31:11Z

src/languages/es.ts

            hasChildReportAwaitingAction: 'Informe secundario pendiente de acción',
            hasMissingInvoiceBankAccount: 'Falta la cuenta bancaria de la factura',
        },
+        indicatorStatus: {


@pac-guerreiro NAB: Did you confirm these translations?

@DylanDylann thanks for the reminder! I just requested confirmation on expensify-open-source 😄

src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/DebugTabView.tsx

…rbr-gbr-on-lhn-tabs

- Fix text color in debug tab view when using light theme - Update route for custom units error

pac-guerreiro · 2024-10-17T15:25:27Z

@DylanDylann all feedback addressed!

I'll let you know when someone confirms the spanish translations 😄

DylanDylann · 2024-10-18T03:16:02Z

@pac-guerreiro We have conflicts, please help to resolve it

DylanDylann · 2024-10-18T03:45:10Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible 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 checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android: Native
- Android: mWeb Chrome
- iOS: Native
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (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 the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
- 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 shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- 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)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
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 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.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
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.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

Screen.Recording.2024-10-18.at.10.50.23.mov

Android: mWeb Chrome

Screen.Recording.2024-10-18.at.10.46.20.mov

iOS: Native

Screen.Recording.2024-10-18.at.10.50.08.mov

iOS: mWeb Safari

Screen.Recording.2024-10-18.at.10.47.40.mov

MacOS: Chrome / Safari

Screen.Recording.2024-10-18.at.10.44.13.mov

MacOS: Desktop

Screen.Recording.2024-10-18.at.10.44.43.mov

src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

…rbr-gbr-on-lhn-tabs # Conflicts: # src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

pac-guerreiro · 2024-10-18T09:57:02Z

@DylanDylann I just resolved the conflict and applied a fix for the problem you encountered 😄

pac-guerreiro · 2024-10-19T01:07:56Z

Thank you @DylanDylann for the review! 😄 The spanish translations were confirmed by @Gonals 🙌

The PR is ready to be merged!

puneetlath

This looks great and very thorough. Thank you!

melvin-bot · 2024-10-21T14:24:13Z

@puneetlath looks like this was merged without a test passing. Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

puneetlath · 2024-10-21T14:24:26Z

Hmm, all the tests are passing.

OSBotify · 2024-10-21T14:34:03Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

github-actions · 2024-10-22T04:47:48Z

🚀 Deployed to staging by https://github.com/puneetlath in version: 9.0.52-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

github-actions · 2024-10-23T16:25:15Z

🚀 Deployed to production by https://github.com/yuwenmemon in version: 9.0.52-5 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

ntdiary · 2025-03-20T10:17:19Z

src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/DebugTabView.tsx

+                {message && <Text style={[StyleUtils.getColorStyle(theme.text), styles.lh20]}>{translate(message)}</Text>}
+            </View>
+            <Button
+                text="View"


Coming from #57974, applied translation to this text . :)

chore(debug): initial implementation for LHN and settings GBR/RBR debug

858a2f0

pac-guerreiro added 2 commits October 1, 2024 18:45

Merge branch 'main' into pac-guerreiro/feature/49600-show-reason-for-…

4cbea3a

…rbr-gbr-on-lhn-tabs # Conflicts: # src/languages/en.ts

chore(debug): add missing translations and routes for settings debugg…

e494903

…ing UI

style: apply linter

d67fda0

fabioh8010 reviewed Oct 2, 2024

View reviewed changes

pac-guerreiro added 3 commits October 8, 2024 00:15

chore: add tests for useIndicatorStatus

0a8bd76

refactor: apply suggestions

76296bc

Merge branch 'main' into pac-guerreiro/feature/49600-show-reason-for-…

0ea56fd

…rbr-gbr-on-lhn-tabs # Conflicts: # src/CONST.ts # src/languages/en.ts # src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

pac-guerreiro added 6 commits October 8, 2024 00:31

chore: apply suggestions

4a10d7d

refactor: simplify test structure of useIndicatorStatusTest

5ba4eea

Merge branch 'main' into pac-guerreiro/feature/49600-show-reason-for-…

0b3d4ba

…rbr-gbr-on-lhn-tabs

fix(debug mode): message not fitting in the UI

a969249

fix(debug mode): wrong routes used to redirect user to settings problems

afb71fc

feat(debug mode): improve english translations

3ba4af8

fabioh8010 reviewed Oct 9, 2024

View reviewed changes

pac-guerreiro added 2 commits October 10, 2024 16:40

Merge branch 'main' into pac-guerreiro/feature/49600-show-reason-for-…

b982f41

…rbr-gbr-on-lhn-tabs

refactor(debug mode): apply suggestions

e03d762

pac-guerreiro added 4 commits October 11, 2024 13:35

chore(debug mode): improve english translations and add spanish trans…

6a5423e

…lations

fix(debug mode): incorrect route for reimbursement account problems

03db4d5

Merge branch 'main' into pac-guerreiro/feature/49600-show-reason-for-…

417a838

…rbr-gbr-on-lhn-tabs

chore: remove old todo

d640a57

pac-guerreiro mentioned this pull request Oct 11, 2024

Debug Mode - "Has RBR" is not shown for report that has RBR in LHN #50468

Merged

48 tasks

Merge branch 'main' into pac-guerreiro/feature/49600-show-reason-for-…

584458f

…rbr-gbr-on-lhn-tabs

pac-guerreiro changed the title ~~[WIP] [Debug Mode] Show reason for RBR/GBR on LHN tabs~~ [Debug Mode] Show reason for RBR/GBR on LHN tabs Oct 14, 2024

DylanDylann reviewed Oct 17, 2024

View reviewed changes

pac-guerreiro added 2 commits October 17, 2024 16:05

Merge branch 'main' into pac-guerreiro/feature/49600-show-reason-for-…

0e87f1e

…rbr-gbr-on-lhn-tabs

chore(debug mode): apply suggestions

0bef463

- Fix text color in debug tab view when using light theme - Update route for custom units error

DylanDylann reviewed Oct 18, 2024

View reviewed changes

src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx Outdated Show resolved Hide resolved

pac-guerreiro added 2 commits October 18, 2024 10:52

Merge branch 'main' into pac-guerreiro/feature/49600-show-reason-for-…

42b3f45

…rbr-gbr-on-lhn-tabs # Conflicts: # src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

fix(debug mode): showing debug tab view when debug mode is disabled

6b64ae8

DylanDylann approved these changes Oct 18, 2024

View reviewed changes

melvin-bot bot requested a review from puneetlath October 18, 2024 11:15

puneetlath approved these changes Oct 21, 2024

View reviewed changes

puneetlath merged commit 9147240 into Expensify:main Oct 21, 2024

melvin-bot bot added the Emergency label Oct 21, 2024

puneetlath removed the Emergency label Oct 21, 2024

github-actions bot mentioned this pull request Oct 22, 2024

Deploy Checklist: New Expensify 2024-10-22 #51219

Closed

74 tasks

mkhutornyi mentioned this pull request Oct 22, 2024

[HOLD for payment 2024-11-21] [$250] Inbox showing GBR when there’s a report with RBR #50927

Closed

8 tasks

melvin-bot bot mentioned this pull request Oct 23, 2024

[HOLD for payment 2024-10-30] [Debug Mode] Show reason for RBR/GBR on LHN tabs #49600

Closed

daledah mentioned this pull request Mar 7, 2025

[Due for payment 2025-03-21] [$250] "View" button is not translated to Spanish in Debug Tab view #57974

Closed

8 tasks

ntdiary reviewed Mar 20, 2025

View reviewed changes

Conversation

pac-guerreiro commented Sep 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

pac-guerreiro commented Sep 30, 2024

Uh oh!

pac-guerreiro commented Oct 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabioh8010 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pac-guerreiro commented Oct 7, 2024

Uh oh!

pac-guerreiro commented Oct 8, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pac-guerreiro commented Oct 11, 2024

Uh oh!

pac-guerreiro commented Oct 14, 2024

Uh oh!

pac-guerreiro commented Oct 15, 2024

Uh oh!

pac-guerreiro commented Oct 16, 2024

Uh oh!

DylanDylann commented Oct 17, 2024

Uh oh!

DylanDylann Oct 17, 2024

Choose a reason for hiding this comment

Uh oh!

DylanDylann Oct 17, 2024

Choose a reason for hiding this comment

Uh oh!

pac-guerreiro Oct 17, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

pac-guerreiro commented Oct 17, 2024

Uh oh!

DylanDylann commented Oct 18, 2024

Uh oh!

DylanDylann commented Oct 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviewer Checklist

Screenshots/Videos

Uh oh!

Uh oh!

pac-guerreiro commented Oct 18, 2024

Uh oh!

pac-guerreiro commented Oct 19, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

puneetlath left a comment

Choose a reason for hiding this comment

Uh oh!

melvin-bot bot commented Oct 21, 2024

Uh oh!

puneetlath commented Oct 21, 2024

Uh oh!

pac-guerreiro commented Sep 30, 2024 •

edited

Loading

pac-guerreiro commented Oct 1, 2024 •

edited

Loading

pac-guerreiro Oct 17, 2024 •

edited

Loading

DylanDylann commented Oct 18, 2024 •

edited

Loading

pac-guerreiro commented Oct 19, 2024 •

edited

Loading