[HOLD for payment 2022-11-30] [$250] Web - Payments - "Add payment method" blinks after interacting with buttons

[kavimuru]

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:

Prerequisite: Expensfy Account has a bank account added

Add payment method is blinking:

1. Go to https://staging.new.expensify.com/ and login
2. Go to Settings/Payments
3. Click on added bank account
4. Click Delete
5. See it blink/flash and present a new modal to confirm the choice.

Expected Result:

The "delete account" confirmation modal and "Make default payment method" confirmation modals should appear without any additional blinking.

Actual Result:

"Add payment method" button blinks before Delete account confirmation modal appears on the screen

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.2.23-7
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:

Bug5804694_video_25.mp4

Upwork job URL: https://www.upwork.com/jobs/~019fbdbb2f291086ad
Issue reported by: Applause internal team
Slack conversation:

View all open jobs on GitHub

[melvin-bot]

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

[hungvu193]

Updated
Proposal
Our ConfirmPopOver disabled the animation by default, also when the delete popup's dismissed at the same time when you open the ConfirmPopOver that's why you saw the modal blink.
Solution
Enable the animation for the popover, add animationInTiming animationOutTiming also we will hide the Delete popup later.

App/src/components/ConfirmPopover.js

Lines 58 to 77 in 0724337

	const ConfirmPopover = props => (
	<Popover
	onSubmit={props.onConfirm}
	onClose={props.onCancel}
	isVisible={props.isVisible}
	anchorPosition={props.anchorPosition}
	>
	<ConfirmContent
	contentStyles={props.contentStyles}
	title={props.title}
	prompt={props.prompt}
	confirmText={props.confirmText}
	cancelText={props.cancelText}
	danger={props.danger}
	shouldShowCancelButton={props.shouldShowCancelButton}
	onConfirm={props.onConfirm}
	onCancel={props.onCancel}
	onClose={props.onCancel}
	/>
	</Popover>

 <Popover
+      disableAnimation={false}
+       animationInTiming={CONST.ANIMATION_IN_TIMING}
+       animationOutTiming={1}
        onSubmit={props.onConfirm}
        onClose={props.onCancel}
        isVisible={props.isVisible}
        anchorPosition={props.anchorPosition}
    >

Updated the way we show the ConfirmPopover and DeletePopup in BasePaymentsPage:

                        <TouchableOpacity
                            onPress={() => {
                                this.setState({
                                   shouldShowConfirmPopover: true,
                                });
                               
-                               InteractionManager.runAfterInteractions(() => {
-                                 this.setState({
-                                   shouldShowDefaultDeleteMenu: false,
-                                });
-                                });
                            }}
                            style={[
                                styles.button,
                                styles.buttonDanger,
                                shouldShowMakeDefaultButton && styles.mt4,
                                styles.alignSelfCenter,
                                styles.w100,
                            ]}
                        >
                            <Text style={[styles.buttonText, styles.textWhite]}>
                                {this.props.translate('common.delete')}
                            </Text>
                        </TouchableOpacity>

                <ConfirmPopover
                    contentStyles={!this.props.isSmallScreenWidth ? [styles.sidebarPopover] : undefined}
                    isVisible={this.state.shouldShowConfirmPopover}
                    title={this.props.translate('paymentsPage.deleteAccount')}
                    prompt={this.props.translate('paymentsPage.deleteConfirmation')}
                    confirmText={this.props.translate('common.delete')}
                    cancelText={this.props.translate('common.cancel')}
                    anchorPosition={{
                        top: this.state.anchorPositionTop,
                        right: this.state.anchorPositionRight,
                    }}
                    onConfirm={() => {
                        this.setState({
                            shouldShowConfirmPopover: false,
+                            shouldShowDefaultDeleteMenu: false,
                        });
                        this.deletePaymentMethod();
                    }}
                    onCancel={() => {
                        this.setState({
                            shouldShowConfirmPopover: false,
+                          shouldShowDefaultDeleteMenu: false,
                        });
                    }}
                    shouldShowCancelButton
                    danger
                />

Result:

Screen.Recording.2022-11-08.at.16.44.17.mov

[melvin-bot]

@michaelhaxhiu Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

Current assignee @michaelhaxhiu is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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