Skip to content

Jules iou show paid preview#3404

Merged
Beamanator merged 7 commits into
mainfrom
jules-iouShowPaidPreview
Jun 8, 2021
Merged

Jules iou show paid preview#3404
Beamanator merged 7 commits into
mainfrom
jules-iouShowPaidPreview

Conversation

@Julesssss

@Julesssss Julesssss commented Jun 7, 2021

Copy link
Copy Markdown
Contributor

Details

Fixes regression where the IOUPreview would not display after a report was paid. It also fixes an issue where the 'Pay' button was displayed incorrectly after it had already been paid

Fixed Issues

Fixes https://github.com/Expensify/Expensify/issues/166443

Tests

Ensure you are testing against the latest Auth/Web-E changes

  • Create an IOU Request of any amount
  • The user who created the IOU should NOT see a 'Pay' button within the IOU Preview
  • The user who received the IOU should see a 'Pay' button within the IOU Preview

Screenshot 2021-06-07 at 18 13 53

  • Now, as the user who received the first IOU, send an IOU back to the original sender for the same amount
  • Both users should NOT see the IOU Preview

Screenshot 2021-06-07 at 18 17 22

  • As any user, create a final IOU Request of any amount
  • As the other user, settle it using the 'I'll settle it elsewhere' option

Screenshot 2021-06-07 at 18 20 21

  • As both users, you should see the 'User paid user' message within the preview, in both the chat and details page

Screenshot 2021-06-07 at 18 23 05

QA Steps

Run above tests

Tested On

  • Web
  • Mobile Web
  • Desktop
  • iOS
  • Android

Screenshots

Web

Screenshot 2021-06-07 at 18 23 05

Mobile Web

Simulator Screen Shot - iPhone 11 - 2021-06-07 at 18 36 35

Desktop

Screenshot 2021-06-07 at 18 38 52

iOS

Simulator Screen Shot - iPhone 11 - 2021-06-07 at 18 35 55

Android

device-2021-06-07-190134

@Julesssss Julesssss requested review from a team and iwiznia June 7, 2021 17:51
@Julesssss Julesssss self-assigned this Jun 7, 2021
@MelvinBot MelvinBot requested review from Beamanator and removed request for a team June 7, 2021 17:51
shouldShowViewDetailsLink={Boolean(action.originalMessage.IOUReportID)}
onViewDetailsPressed={launchDetailsModal}
/>
{isMostRecentIOUReportAction

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't get why this is not needed anymore, wouldn't this mean that we would show the preview for a paid IOU? I thought we did not want that?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, is it because of this?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah exactly. That logic had to move to within the Preview, as once the iouReport is paid we cannot guarantee it will be stored locally -- and the iouReport will be null

Comment thread src/pages/iou/IOUDetailsModal.js Outdated
<View style={[styles.flex1, styles.justifyContentBetween]}>
<ScrollView contentContainerStyle={styles.iouDetailsContainer}>
{(this.props.iouReport.hasOutstandingIOU) && (
{(this.props.iouReport.hasOutstandingIOU || isIOUPaid) && (

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't this handled here?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, good spot. I've removed that condition. Perhaps all the shouldDisplay logic should be handled by the component itself, but I don't think that change is necessary as part of this PR given that it's blocking N5.

Let me know if you disagree.

@Julesssss Julesssss requested a review from a team as a code owner June 7, 2021 18:49
@MelvinBot MelvinBot requested review from marcaaron and removed request for a team June 7, 2021 18:50
// Usually the parent determines whether the IOU Preview is displayed. But as the iouReport total cannot be known
// until it is stored locally, we need to make this check within the Component after retrieving it. This allows us
// to handle the loading UI from within this Component instead of needing to declare it within each parent, which
// would duplicate and complicate the logic

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tbh, I don't really follow what logic would be complicated by this. It seems like the logic is already kind of weird and confusing and this comment doesn't explain much about why it was set up that way.

e.g. this component perhaps should not be responsible for fetching the iou at all...

this comment made me look into how we are doing it and... I think it's a pretty bad practice to be making an API call like this when the component renders... (instead of e.g. using a lifecycle method)

https://github.com/Expensify/Expensify.cash/blob/ec0070aafa0374c2d02bdf9db757e98f10b59aaf/src/components/ReportActionItemIOUPreview.js#L102-L104

Not sure if anything needs to be done right now and I won't block on it (since the issue seems important to address), but feels like a code smell to me.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, when making these changes it became apparent that the parent should perhaps be handling the loading state. Also, only one use of the comp has any requirement for displaying the preview now, so it might be possible to further simplify the shouldDisplay logic.

I didn't want this to turn into a large refactor and risk longer delays, so I've created an issue to refactor this component that I'll make external.

@Beamanator Beamanator left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tests succeeded, thanks for the detailed steps!

Code looks good too, looks like some logic will be improved further in the future, but gotta get this in asap 👍

@Beamanator Beamanator merged commit 15b9f1f into main Jun 8, 2021
@Beamanator Beamanator deleted the jules-iouShowPaidPreview branch June 8, 2021 13:43
@OSBotify

OSBotify commented Jun 8, 2021

Copy link
Copy Markdown
Contributor

🚀 Deployed to staging in version: 1.0.64-4🚀

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

@OSBotify

OSBotify commented Jun 8, 2021

Copy link
Copy Markdown
Contributor

🚀 Deployed to production in version: 1.0.65-0🚀

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

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.

5 participants