[HOLD for payment 2024-09-09] [$250] Subscription - Clicking Outside the Modal Doesn't Close It, Causing Inconsistency

[izarutskaya]

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

---

Version Number: v9.0.21-1
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+tw23478102034@applause.expensifail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to Account Settings > Subscription.
2. Add Payment Card > Click on the three-dot menu > Change Payment Currency.
3. Select a currency > Click outside the modal. Notice the modal doesn't close.
4. Repeat: Click the three-dot menu > Change Payment Card > Currency > Click outside. This time, the modal closes, creating inconsistency.

Expected Result:

After opening the Change Payment Currency modal and selecting a currency, clicking outside the modal should close it.

Actual Result:

After opening the Change Payment Currency modal and selecting a currency, clicking outside the modal does not close it. This creates an inconsistency compared to other instances (e.g., when changing payment card>Currency), where clicking outside the modal closes it.

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6573696_1723796516623.Screen_Recording_2024-08-16_at_1.20.18_AM.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a4445f00bf760f92
• Upwork Job ID: 1824461014015831545
• Last Price Increase: 2024-08-16
• Automatic offers:
• shubham1206agra | Reviewer | 103587586
• Krishna2323 | Contributor | 103587588

Issue Owner

Current Issue Owner: @shubham1206agra

[melvin-bot]

Triggered auto assignment to @puneetlath (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[izarutskaya]

We think this issue might be related to the #collect project.

[nkdengineer]

Proposal

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

After opening the Change Payment Currency modal and selecting a currency, clicking outside the modal does not close it. This creates an inconsistency compared to other instances (e.g., when changing payment card>Currency), where clicking outside the modal closes it.

What is the root cause of that problem?

Two places use different ways.

1. PaymentCardForm, we are using CurrencySelector as a separate page then when we click outside, it's closed
   

   App/src/components/AddPaymentCard/PaymentCardForm.tsx

   Lines 296 to 301 in 9940e99

   	<InputWrapper
   	currencySelectorRoute={currencySelectorRoute}
   	value={data?.currency ?? CONST.PAYMENT_CARD_CURRENCY.USD}
   	InputComponent={CurrencySelector}
   	inputID={INPUT_IDS.CURRENCY}
   	/>

2. PaymentCardChangeCurrencyForm, we're using a currency modal. Then when we click outside, only the PaymentCardCurrencyModal is closed
   

   App/src/components/AddPaymentCard/PaymentCardChangeCurrencyForm.tsx

   Line 110 in 9940e99

   <PaymentCardCurrencyModal

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

We should handle the currency as a separate page by using CurrencySelector as we do in PaymentCardForm. Since PaymentCardChangeCurrencyForm is used in two places, we can add currencySelectorRoute prop and use a unique route for each place.

What alternative solutions did you explore? (Optional)

Or we can use the same way as we do in PaymentCardChangeCurrencyForm for PaymentCardForm

[Krishna2323]

Proposal

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

Subscription - Clicking Outside the Modal Doesn't Close It, Causing Inconsistency

What is the root cause of that problem?

We aren't using onBackdropPress={Navigation.dismissModal} prop to dismiss the modal when backdrop is pressed. The same is done here & here.

App/src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx

Lines 51 to 59 in 9940e99

	<Modal
	type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
	isVisible={isVisible}
	onClose={() => onClose?.()}
	onModalHide={onClose}
	hideModalContentWhileAnimating
	innerContainerStyle={styles.RHPNavigatorContainer(isSmallScreenWidth)}
	useNativeDriver
	>

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

Pass onBackdropPress={Navigation.dismissModal} prop to Modal.

Optional: We can introduce new props to pass onBackdropPress prop from ChangeBillingCurrency & ChangeCurrency.

What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal Updated

• Added references of similar components and an optional change.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01a4445f00bf760f92

[melvin-bot]

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