[HOLD for payment 2022-04-12] [$500] iOS - App freezes when try to delete PayPal payment

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Launch App as login user
2. Navigate to Settings >Payments.
3. Try to remove existing PayPal

Expected Result:

PayPal must be deleted and app should not freeze

Actual Result:

PayPal cannot be deleted and app freeze.

Workaround:

Unknown

Platform:

Where is this issue occurring?

• iOS

Version Number: 1.1.39-1

Reproducible in staging?: Y

Reproducible in production?: Y

Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Bug5455298_Paypal_1502.mp4

Expensify/Expensify Issue URL:
Issue reported by: Applause @aswin-s
Slack conversation:

View all open jobs on GitHub

[MelvinBot]

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

[tylerkaraszewski]

Seems like an issue to fix. Probably doable by an external contributor.

[MelvinBot]

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

[Christinadobrzyn]

Created job post in Upwork

• Internal post - https://www.upwork.com/ab/applicants/1494155927379894272/job-details
• External post - https://www.upwork.com/jobs/~01041a83a6ab91e727

[MelvinBot]

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

[MelvinBot]

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

[sobitneupane]

It looks like it has something to do with ConfirmPopover opening before the DeleteMenu Popover is closed.

App/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js

Lines 318 to 324 in 4b04f73

	<TouchableOpacity
	onPress={() => {
	this.setState({
	shouldShowDefaultDeleteMenu: false,
	shouldShowConfirmPopover: true,
	});
	}}

This solves the issue but it might not be the best thing to do. It might help someone to find the solution.

  <TouchableOpacity
      onPress={() => {
          this.setState({
              shouldShowDefaultDeleteMenu: false,
          }, () => {
              setTimeout(()=>{
                  this.setState({
                      shouldShowConfirmPopover: true,
                  });
              },1);
          });
      }}

[parasharrajat]

You are correct @sobitneupane This is the real issue behind this problem. We have faced the same issue before. I was trying to solve it yesterday for one of the Deploy blocker issues. And I did something like your solution which worked but
There was a stage where this solution didn't work. When we close the PasswordModal via clicking in the backdrop. I am trying to find a fix for that before proposing a solution here.

[parasharrajat]

Proposal

This is a nasty bug with RN. It is somehow related to Modals. There are many related issues open to RN. Maybe upgrading the RN version will solve it. But I don't think that upgrading RN would be a safe or easier option. it could break many dependencies.

When two modal instances are opened at the same time then App freezes in React Native. Basically, all of the app is functioning but a small transparent layer is left behind when the modal closes which blocks all the interactions.

this also causes other types of issues like

App/src/components/AttachmentPicker/index.native.js

Line 277 in d3efed1

/* setTimeout delays execution to the frame after the modal closes

.

Good read
facebook/react-native#32329 (comment)
software-mansion/react-native-reanimated#2244

So to solve this we have to make sure that we don't open two modals at a time.

Now there are two modals that open on this BasePaymentPage component. DeleteConfirm Modal and Password Modal.

These modals are opened after Main Payment Menu.

App/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js

Line 280 in d3efed1

<Popover

To safely open these we can rely on InteractionManager.runafterInteractions.

So we will update Both onPress handlers to use it.

App/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js

Line 304 in d3efed1

onPress={() => {

App/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js

Line 320 in d3efed1

this.setState({

E.g.

onPress={() => {
                                        this.setState({
                                            shouldShowDefaultDeleteMenu: false,
                                        });
                                        InteractionManager.runAfterInteractions(() => {
                                            this.setState({
                                                shouldShowPasswordPrompt: true,
                                                passwordButtonText: this.props.translate('paymentsPage.setDefaultConfirmation'),
                                            });
                                        });
                                    }}

This will make sure that both are visible.

But I saw one strange issue when we close the PasswordPopover via clicking the backdrop, the App froze. There is nothing in the code that tells me why this is happening only for PasswordPopover. So to fix this I used this snippet to close the modal.

 hidePasswordPrompt() {
      this.setState({shouldShowPasswordPrompt: false});
// Only for iOS , no visible effect on UI
      LayoutAnimation.configureNext(LayoutAnimation.create(50, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity));
  }

Here Layoutshift causes hanged animation to flush. It fixes the issues.

[rushatgabhane]

@mountiny Rajat doesn't need a C+ review, unassigning myself.

[parasharrajat]

I am very busy but I would like to test this via upgrading the RN version. Upgrading RN could be challenging. If this is an urgent issue, then I am happy to go with the above fix but I think we should wait till I test it on the newer RN version.

[mountiny]

@parasharrajat I dont think this is very urgent in terms of production since this should still be in beta. What would be your ETA for trying to update RN?

[parasharrajat]

Can't really tell. By weekend maybe.

[mountiny]

I think we can wait for you to try to update the RN version, it could be beneficial in other ways too and as mentioned this bug is still behind beta, so hopefully no problem. If it would become a bigger problem, we have a solution to deploy if the need be.

[mountiny]

@parasharrajat Any updates here?

[mountiny]

Updated the title and Awaiting Payment label, we will wait for the other PR to address the missing case.

[parasharrajat]

PR will be ready by EOD.

[parasharrajat]

I was facing many issues with MAC. I finally manage to fix the MAC and build setup. I will create the PR by tomorrow ⏲️

[mountiny]

Thanks for keeping us updated @parasharrajat

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[parasharrajat]

@mountiny I can't reproduce this issue anymore. Are you able to provide the steps?

[mountiny]

@parasharrajat that is good to hear it si not reproducible. The steps I followed were same as in the PR, would you be fine with holding the payment for the second week of retest by QA @mvtglobally so in 7 days and then if issue does not persist, the payment would be released? To follow the classic KI retest process?

[parasharrajat]

Sure. No problem.

[mountiny]

Updated the title to be one week from the first re-test. @mvtglobally once you confirm next week the issue is not reproducible we are good to close this one out 🙌

The steps which led to the problem noticed before:

1. Open the Payment Page from Settings => Payments.
2. Click/Tap on any existing payment method Except Paypal.
3. A new menu modal should open.
4. Now select Make default payment Method.

Then the modal closed but the app froze.

[mvtglobally]

Issue not reproducible during KI retests. (Second week)
@mountiny good to close it

[mountiny]

@Christinadobrzyn This is good to be paid out to Rajat and closed then! Thanks!

Thank you @mvtglobally

[Christinadobrzyn]

Original job expired so created new one - https://www.upwork.com/ab/applicants/1514041584503480320/job-details

Sent an offer to Rajat. I'll track and pay asap.

[Christinadobrzyn]

Paid @parasharrajat and closed the job in Upwork. Closing this GH

[aswin-s]

@Christinadobrzyn Reporting bonus was not paid for this issue.

[Christinadobrzyn]

Ah, sorry about that @aswin-s. I thought this was reported by our QA team. I can only find this instance of the issue being reported in our #open-source room by our QA team.

Can you please send me a link to the Bug report you posted in the open-source room? Thanks!

[aswin-s]

@Christinadobrzyn
https://expensify.slack.com/archives/C01GTK53T8Q/p1644613736619309

[Christinadobrzyn]

Amazing! Thank you! Let me reopen the job and hire you so I can pay you.

@aswin-s I just sent an offer to this job - https://www.upwork.com/ab/applicants/1514123199221063680/job-details Thanks!

[aswin-s]

Amazing! Thank you! Let me reopen the job and hire you so I can pay you.

@aswin-s I just sent an offer to this job - https://www.upwork.com/ab/applicants/1514123199221063680/job-details Thanks!

@Christinadobrzyn Applied. Thanks.

[Christinadobrzyn]

Thank you! just issued payment through the Upwork job. Thanks again for reaching out about that and sorry I missed that!