[HOLD for payment 2022-06-13] [$250] Update the IOU "Cancel" button so that it has a fixed size - reported by @Puneet-here

[mvtglobally]

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. Request money from someone
2. Cancel the money request the button size will increase when loading

Expected Result:

Update the logic of the Cancel button so that it doesn't re-size at all.

Actual Result:

After being clicked, the IOU Cancel button size increases momentarily and then disappears. That's strange visually.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.56-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

XRecorder_Edited_31032022_001537.mp4

Upwork job link: https://www.upwork.com/jobs/~019f02e58e1d9ac630
Issue reported by: @Puneet-here
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1648666290760469

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @flaviadefaria (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[melvin-bot]

Triggered auto assignment to @francoisl (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[thesahindia]

Proposal

We can just set a minWidth for this button.
minWidth: 61 will be good for cancel/decline button and minWidth: 69 for spanish ones. We can add a function in StyleUtils which will return minWidth based on the preferredLocale.

Or instead of this we can just set the minWidth to larger one (that's what we did for the resend link button #6958)
We can add the style like this -

App/src/styles/styles.js

Lines 937 to 939 in 65432d6

	resendLinkButton: {
	minWidth: 124,
	},

We will have to use the style here and we can remove line 96-

App/src/components/ReportTransaction.js

Lines 92 to 97 in 65432d6

	style={[
	styles.buttonSmall,
	styles.chatItemComposeSecondaryRowOffset,
	styles.mb3,
	this.isBeingRejected() ? styles.w20 : styles.wAuto,
	]}

[melvin-bot]

Triggered auto assignment to @michaelhaxhiu (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (Exported)

[melvin-bot]

Triggered auto assignment to @roryabraham (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[michaelhaxhiu]

@Santhosh-Sellavel nice to see you get auto-assigned 😄 (lol, yesterday we almost convinced ourselves that the "random" assignment wasn't random!)

[Santhosh-Sellavel]

@michaelhaxhiu let's assign it to @thesahindia!

[melvin-bot]

📣 @thesahindia You have been assigned to this job by @michaelhaxhiu!
Please apply to this job in Upwork 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 📖

[michaelhaxhiu]

Hired, let's get this party started.

[roryabraham]

Waiting for consensus in slack to move forward.

[michaelhaxhiu]

Thanks for linking that @roryabraham, I was just about to do the same :D

[Santhosh-Sellavel]

@thesahindia
Any update on this?

[thesahindia]

Was just experimenting some things to find the best approach for this. I will just update the PR as we already have a better way to fix this.

[thesahindia]

Updated the PR
cc: @Santhosh-Sellavel

[michaelhaxhiu]

Seems the PR is seeing gradual progress. It needs some conflicts to be resolved and then can be reviewed.

[Santhosh-Sellavel]

PR got merged today, it's already on staging.

I'm going OOO, If there are any new breakages/regression while I am away, feel free to un-assign me and add a new C+ here thanks!

cc: @roryabraham

[michaelhaxhiu]

@Santhosh-Sellavel want to apply for the job before you go OOO? https://www.upwork.com/jobs/~019f02e58e1d9ac630

[Santhosh-Sellavel]

Ya, sure thanks! @michaelhaxhiu

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.71-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Update the IOU "Cancel" button  #8877

If no regressions arise, payment will be issued on 2022-06-13. 🎊

[michaelhaxhiu]

All are paid. Closing. Thanks for your assistance!