[HOLD for payment 2023-05-23] [$1000] IOUPreview height should adjust based on content

[Julesssss]

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

---

Action Performed:

1. Create an iou request to any user without adding a comment
2. Settle the IOU
3. Create an iou request to any user without adding a comment
4. Settle the IOU

Expected Result:

• The Card heights should be different

Actual Result:

• The card heights are the same
• The card without a description has a large gap where the comment would have shown

Native mobile

Web

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.13-0
Issue reported by: @thesahindia here

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d6ca19ff51a2559a
• Upwork Job ID: 1656655701807489024
• Last Price Increase: 2023-05-11

[melvin-bot]

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

[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

[huzaifa-99]

Proposal

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

We want the IOUPreview to adjust its height based on content, specifically if it has a comment/description

What is the root cause of that problem?

The <Text> element for comment/description here is rendering always, regardless if there is any comment/description

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

We should conditionally render the <Text> component that displays comment/description here by first calculating description/value like this

const requestDescription = Str.htmlDecode(lodashGet(props.action, 'originalMessage.comment', ''))

and then render it like so

{requestDescription && <Text>{requestDescription}</Text>}

Result

What alternative solutions did you explore? (Optional)

N/A

[allroundexperts]

Proposal

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

IOUPreview height does not adjust based on comment

What is the root cause of that problem?

The root cause is that we're always rendering the Text here.

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

We should render the text only if a comment exists for IOU. This gets replaced with:

// This can be saved in a variable as well
{lodashGet(props.action, 'originalMessage.comment', '') ? <Text style={[styles.colorMuted]}>{Str.htmlDecode(lodashGet(props.action, 'originalMessage.comment', ''))}</Text> : null}

Using && condition above will cause this regression. We should be using ternary instead.

Although not strictly required, we can also convert this and this into ternary expressions as well.

What alternative solutions did you explore? (Optional)

None

[Julesssss]

thanks both. This is pretty straight forward so I'm going with the first passable proposal (#18770 (comment)). Also creating requestDescription on a separate line is a bit more readable.

[Julesssss]

@huzaifa-99 feel free to make a start on the PR, I'll assign you once the UpWork job has been created 👍

[Julesssss]

Actually I don't think anything will break if I do this now