[Payment due 3/6][$500] Font in "Hold Request" reason heading text is looks wrong

[m-natarajan]

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.4.43-7
Reproducible in staging?: y
Reproducible in production?: new feature
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: @puneetlath
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1708436683366409

Action Performed:

1. Create a IOU request
2. Open the IOU details and click on 3 dot and select "Hold request" option
3. Look at the Explain why you're holding this request

Expected Result:

Should match with same font in other section like display name

Actual Result:

It shows with different font.

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017627c882f3450aea
• Upwork Job ID: 1760361321264185344
• Last Price Increase: 2024-02-21
• Automatic offers:
• s77rt | Reviewer | 0
• shahinyan11 | Contributor | 0

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~017627c882f3450aea

[melvin-bot]

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

[melvin-bot]

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

[shahinyan11]

Proposal

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

Font in "Hold Request" reason heading text is looks wrong

What is the root cause of that problem?

the styles.textHeadline style is set for this text

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

Change this style with corresponding style or remove it

What alternative solutions did you explore? (Optional)

[eucool]

Proposal

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

Font in "Hold Request" reason heading text is looks wrong

What is the root cause of that problem?

We currently set the text style to textHeadline.

App/src/pages/iou/HoldReasonPage.tsx

Line 79 in 04737ae

<Text style={[styles.textHeadline, styles.mb6]}>{translate('iou.explainHold')}</Text>

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

Remove the corresponding style don't set it to anything, only keep margin

What alternative solutions did you explore? (Optional)

[eucool]

btw, regression from #33897

[dukenv0307]

Proposal

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

It shows with different font.

What is the root cause of that problem?

The Explain why you're holding this request has textHeadline which has the same fontFamily as title of HeaderWithBackButton but the font size is larger.

App/src/pages/iou/HoldReasonPage.tsx

Line 79 in 04737ae

<Text style={[styles.textHeadline, styles.mb6]}>{translate('iou.explainHold')}</Text>

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

We can use textHeadlineH1 style that we used for the title of HeaderWithBackButton or use headerText style that we used for the display name in HeaderView

App/src/pages/iou/HoldReasonPage.tsx

Line 79 in 04737ae

<Text style={[styles.textHeadline, styles.mb6]}>{translate('iou.explainHold')}</Text>

What alternative solutions did you explore? (Optional)

NA

[s77rt]

@shahinyan11 Thanks for the proposal. Your RCA is correct. The solution looks good to me.

🎀 👀 🎀 C+ reviewed
Link to proposal

[melvin-bot]

Triggered auto assignment to @hayata-suenaga, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[s77rt]

@codinggeek2023 Thanks for the proposal. Unfortunately it's a dupe.

[s77rt]

@dukenv0307 Thanks for the proposal. Your RCA is correct but the solution does not achieve the expected results.

[eucool]

@s77rt , thanks for the review, but it's not a dupe, i was working on the proposal while @shahinyan11 posted his and i didn't realize that he posted it before me and edited it over time,

No conflict with your chosen proposal but just wanted to state that I didn't copy his solution :)

[s77rt]

@codinggeek2023 No worries. I didn't imply that you copied the solution 😅. I checked the timeline both solutions posted closely at the same time (2 mins apart).

[melvin-bot]

📣 @handipriyono! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot]

📣 @s77rt 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @shahinyan11 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[hayata-suenaga]

although @codinggeek2023 posted similar proposal, @shahinyan11's proposal was slightly earlier 🙇

[eucool]

No worries @hayata-suenaga , let him do it, he rightly proposed earlier than me

hey @shahinyan11 , you can try using styles.textHeadlineLineHeightXXL over here rather than removing the heading style altogether, we already use it in business info step:

I think you should talk with the design team once before implementing this, best luck with the PR :)

[robertjchen]

Thanks @codinggeek2023 !

cc: @Expensify/design for a quick sanity check (👍 / 👎 ). Based on the Slack discussion it sounds like we're simply removing the textheadline style from the text to match that of the display name message (which has none)?

[dannymcclain]

it sounds like we're simply removing the textheadline style from the text to match that of the display name message (which has none)

That's correct! It should end up looking something like this

[hayata-suenaga]

payment should be issued after the regression period is over

[slafortune]

@s77rt can you please complete the check list?

1. The PR that introduced the bug has been identified. Link to the PR:
2. The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
3. A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
4. Determine if we should create a regression test for this bug:
5. If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again:

[s77rt]

• The PR that introduced the bug has been identified: [WAVE 7] Hold Requests: Individual Money Request Page, Reason Interstitial, Banner #33897
• The offending PR has been commented on: [WAVE 7] Hold Requests: Individual Money Request Page, Reason Interstitial, Banner #33897 (comment)
• A discussion in #expensify-bugs has been started: Not needed
• Determine if we should create a regression test for this bug: No, this kind of bug is not something that's likely to resurface

[s77rt]

@slafortune Done ^

[slafortune]

Great! Thanks @s77rt 👍
No regression test
Both @s77rt and @shahinyan11 are paid
Closing