[HOLD for payment 2023-11-17] [$500] [Wave 6: Tags] Billable and Tag category are not spaced enough like other sections

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.3.95-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause-Internal Team
Slack conversation: @

Action Performed:

Pre-condition: In employee account, must have enabled category, tag and billable option

1. Go to https://staging.new.expensify.com/
2. Tap on Employee Workspace
3. Tap plus icon and select request money
4. Tap Scan
5. Upload an image
6. Tap request
7. Tap on scan request created to open scan request details page
8. Tap on amount, description, merchant, date, category, tag (while tapping on each section, note the gap between the selected and next section)

Expected Result:

There should be enough spacing between Tags (custom name-shahrukh khan) and Billable section.

Actual Result:

While tapping on tag(custom name-shahrukh khan) section, there is no enough spacing between selected Tag(shahrukh khan) and Billable section. The selected tag section and Billable toggle box appears too close. There is no enough spacing like other sections.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6261802_1698991304382.raisespace.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ed40e13d720ed9c6
• Upwork Job ID: 1720351887160328192
• Last Price Increase: 2023-11-03
• Automatic offers:
• tienifr | Contributor | 27544000

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01ed40e13d720ed9c6

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (External)

[DrLoopFall]

Proposal

Please re-state the problem that we are trying to solve in this issue.

IOU-Billable and Tag category are not spaced enough like other sections

What is the root cause of that problem?

Currently there is no padding/margin on top

App/src/components/ReportActionItem/MoneyRequestView.js

Line 277 in 4322ad9

<View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>

What changes do you think we should make in order to solve the problem?

Adding styles.mt4 or replace styles.mb4 with styles.mv4 to the styles here would fix the issue.

<View style={[styles.flexRow, styles.mv4, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>

[tienifr]

Proposal

Please re-state the problem that we are trying to solve in this issue.

IOU-Billable and Tag category are not spaced enough like other sections

What is the root cause of that problem?

We did not add paddingTop/ marginTop for this component

App/src/components/ReportActionItem/MoneyRequestView.js

Line 277 in 4322ad9

<View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>

What changes do you think we should make in order to solve the problem?

Solution 1: In order to be consistency with MoneyRequestConfirmationList, we should remove styles.mb4 and add styles.optionRow here

Solution2: Remove styles.mb4 and add styles.pv4 in here

What alternative solutions did you explore? (Optional)

We can create the common component for billable switch and use it in MoneyRequestConfirmationList and MoneyRequestView

[parasharrajat]

@tienifr's solution 1 looks more aligned with what we have currently.

But I am not rejecting the first proposal from @DrLoopFall as the difference is only an implementation detail so they are equally eligible.

I leave the final decision to the Engineer.

🎀 👀 🎀 C+ reviewed