[HOLD for payment 2023-09-06] [$1000] Add Debit Card is Accesible for Users with No Permissions

[m-natarajan]

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. Login with any account with no specific Wallet Permissions, just ordinary one
2. Open Settings -> Payments -> Add Payment Method : Notice there is no Debit Card option
3. Now, go to https://staging.new.expensify.com/settings/payments/add-debit-card
4. Notice add debit card form is accessible

Expected Result:

User should not be allowed to open add debit card page with no Wallet access

Actual Result:

User can access add debit card form through URL

Workaround:

unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.53-1
Reproducible in staging?: yes
Reproducible in production?: yes
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screencast.from.05.2023.+01.03_57_25.1.webm

Recording.362.mp4

Expensify/Expensify Issue URL:
Issue reported by: @makiour
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1691204293251729

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013031c80681e3e212
• Upwork Job ID: 1691469719452815360
• Last Price Increase: 2023-08-15
• Automatic offers:
• makiour | Contributor | 26244007
• MAkiour | Reporter | 26244010

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[m-natarajan]

Original reporter proposal:

Proposal

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

Add Debit Card through URL shows is accessible with no permission. If we want to add payment method through the normal flow, we will not have access to add debit card and will not show up in the menu. However, accessing it through the link is possible.

What is the root cause of that problem?

Investigating the issue, I found that checking for Wallet permission is happening at the level of the parent only and not within the component.
Basically, after I checked the parent component where we have the different payment options:

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

Lines 422 to 431 in 4230f28

	<AddPaymentMethodMenu
	isVisible={shouldShowAddPaymentMenu}
	onClose={hideAddPaymentMenu}
	anchorPosition={{
	horizontal: anchorPosition.anchorPositionHorizontal,
	vertical: anchorPosition.anchorPositionVertical - 10,
	}}
	onItemSelected={(method) => addPaymentMethodTypePressed(method)}
	anchorRef={addPaymentMethodAnchorRef}
	/>

This menu is what shows the different payment options. Accessing it, it clearly shows that we don't show Debit Card option unless we have Wallet Permissions:

App/src/components/AddPaymentMethodMenu.js

Lines 59 to 87 in 4230f28

	menuItems={[
	{
	text: props.translate('common.bankAccount'),
	icon: Expensicons.Bank,
	onSelected: () => {
	props.onItemSelected(CONST.PAYMENT_METHODS.BANK_ACCOUNT);
	},
	},
	...(Permissions.canUseWallet(props.betas)
	? [
	{
	text: props.translate('common.debitCard'),
	icon: Expensicons.CreditCard,
	onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD),
	},
	]
	: []),
	...(props.shouldShowPaypal && !props.payPalMeData.description
	? [
	{
	text: props.translate('common.payPalMe'),
	icon: Expensicons.PayPal,
	onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.PAYPAL),
	},
	]
	: []),
	]}
	withoutOverlay
	/>

The root cause of our bug here is that accessing the component directly through its ROUTE, does not allow us to check for permissions and we miss any kind of checks when we call the AddDebitCardPage:

App/src/pages/settings/Payments/AddDebitCardPage.js

Lines 37 to 191 in 4230f28

	function DebitCardPage(props) {
	const {translate} = useLocalize();
	const prevFormDataSetupComplete = usePrevious(props.formData.setupComplete);
	const nameOnCardRef = useRef(null);
	useEffect(() => {
	PaymentMethods.clearDebitCardFormErrorAndSubmit();
	}, []);
	useEffect(() => {
	if (prevFormDataSetupComplete || !props.formData.setupComplete) {
	return;
	}
	PaymentMethods.continueSetup();
	return () => {
	PaymentMethods.clearDebitCardFormErrorAndSubmit();
	};
	}, [prevFormDataSetupComplete, props.formData.setupComplete]);
	/**
	* @param {Object} values - form input values passed by the Form component
	* @returns {Boolean}
	*/
	const validate = (values) => {
	const errors = {};
	if (!values.nameOnCard || !ValidationUtils.isValidLegalName(values.nameOnCard)) {
	errors.nameOnCard = 'addDebitCardPage.error.invalidName';
	}
	if (!values.cardNumber || !ValidationUtils.isValidDebitCard(values.cardNumber.replace(/ /g, ''))) {
	errors.cardNumber = 'addDebitCardPage.error.debitCardNumber';
	}
	if (!values.expirationDate || !ValidationUtils.isValidExpirationDate(values.expirationDate)) {
	errors.expirationDate = 'addDebitCardPage.error.expirationDate';
	}
	if (!values.securityCode || !ValidationUtils.isValidSecurityCode(values.securityCode)) {
	errors.securityCode = 'addDebitCardPage.error.securityCode';
	}
	if (!values.addressStreet || !ValidationUtils.isValidAddress(values.addressStreet)) {
	errors.addressStreet = 'addDebitCardPage.error.addressStreet';
	}
	if (!values.addressZipCode || !ValidationUtils.isValidZipCode(values.addressZipCode)) {
	errors.addressZipCode = 'addDebitCardPage.error.addressZipCode';
	}
	if (!values.addressState || !values.addressState) {
	errors.addressState = 'addDebitCardPage.error.addressState';
	}
	if (!values.acceptTerms) {
	errors.acceptTerms = 'common.error.acceptTerms';
	}
	return errors;
	};
	return (
	<ScreenWrapper
	onEntryTransitionEnd={() => nameOnCardRef.current && nameOnCardRef.current.focus()}
	includeSafeAreaPaddingBottom={false}
	>
	<HeaderWithBackButton
	title={translate('addDebitCardPage.addADebitCard')}
	onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PAYMENTS)}
	/>
	<Form
	formID={ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM}
	validate={validate}
	onSubmit={PaymentMethods.addPaymentCard}
	submitButtonText={translate('common.save')}
	scrollContextEnabled
	style={[styles.mh5, styles.flexGrow1]}
	>
	<TextInput
	inputID="nameOnCard"
	label={translate('addDebitCardPage.nameOnCard')}
	accessibilityLabel={translate('addDebitCardPage.nameOnCard')}
	accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
	ref={(ref) => (nameOnCardRef.current = ref)}
	spellCheck={false}
	/>
	<TextInput
	inputID="cardNumber"
	label={translate('addDebitCardPage.debitCardNumber')}
	accessibilityLabel={translate('addDebitCardPage.debitCardNumber')}
	accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
	containerStyles={[styles.mt4]}
	keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
	/>
	<View style={[styles.flexRow, styles.mt4]}>
	<View style={[styles.flex1, styles.mr2]}>
	<TextInput
	inputID="expirationDate"
	label={translate('addDebitCardPage.expiration')}
	accessibilityLabel={translate('addDebitCardPage.expiration')}
	accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
	placeholder={translate('addDebitCardPage.expirationDate')}
	keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
	maxLength={4}
	/>
	</View>
	<View style={[styles.flex1]}>
	<TextInput
	inputID="securityCode"
	label={translate('addDebitCardPage.cvv')}
	accessibilityLabel={translate('addDebitCardPage.cvv')}
	accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
	maxLength={4}
	keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
	/>
	</View>
	</View>
	<View>
	<AddressSearch
	inputID="addressStreet"
	label={translate('addDebitCardPage.billingAddress')}
	containerStyles={[styles.mt4]}
	maxInputLength={CONST.FORM_CHARACTER_LIMIT}
	/>
	</View>
	<TextInput
	inputID="addressZipCode"
	label={translate('common.zip')}
	accessibilityLabel={translate('common.zip')}
	accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
	keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
	maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
	hint={translate('common.zipCodeExampleFormat', {zipSampleFormat: CONST.COUNTRY_ZIP_REGEX_DATA.US.samples})}
	containerStyles={[styles.mt4]}
	/>
	<View style={[styles.mt4, styles.mhn5]}>
	<StatePicker inputID="addressState" />
	</View>
	<CheckboxWithLabel
	accessibilityLabel={`${translate('common.iAcceptThe')} ${translate('common.expensifyTermsOfService')}`}
	inputID="acceptTerms"
	LabelComponent={() => (
	<Text>
	{`${translate('common.iAcceptThe')}`}
	<TextLink href={CONST.TERMS_URL}>{`${translate('common.expensifyTermsOfService')}`}</TextLink>
	</Text>
	)}
	style={[styles.mt4]}
	/>
	</Form>
	</ScreenWrapper>
	);
	}

The solution here is to also fetch the user beta permissions and to check if we do have Wallet under the granted permissions, if not we don't show the addDebitCardPage. Here is the list of the beta permissions to a user with no wallet access for example:

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

First, we need to get the beta permissions granted to the user. This is will be done via withOnyx() by adding to:

App/src/pages/settings/Payments/AddDebitCardPage.js

Lines 196 to 200 in 4230f28

	export default withOnyx({
	formData: {
	key: ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM,
	},
	})(DebitCardPage);

We will make it:

          export default withOnyx({
              formData: {
                  key: ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM,
              },
              **betas: {
                  key: ONYXKEYS.BETAS,
              },**
          })(DebitCardPage);

With this, we need to modify the props as well to include the list of beta permissions granted to user:

App/src/pages/settings/Payments/AddDebitCardPage.js

Lines 24 to 36 in 4230f28

	const propTypes = {
	/* Onyx Props */
	formData: PropTypes.shape({
	setupComplete: PropTypes.bool,
	}),
	};
	const defaultProps = {
	formData: {
	setupComplete: false,
	},
	};

Changing to:

      const propTypes = {
          /* Onyx Props */
          formData: PropTypes.shape({
              setupComplete: PropTypes.bool,
          }),
          betas: PropTypes.arrayOf(PropTypes.string),
      };
      const defaultProps = {
          formData: {
              setupComplete: false,
          },
          betas: [],
      };

The next step is to check at the beginning of our render function if WalletPermission is among the Beta permissions available to the user. This will be done using the Permissions function canUseWallet here:

App/src/libs/Permissions.js

Lines 46 to 52 in 4230f28

	/**
	* @param {Array<String>} betas
	* @returns {Boolean}
	*/
	function canUseWallet(betas) {
	return _.contains(betas, CONST.BETAS.BETA_EXPENSIFY_WALLET) || canUseAllBetas(betas);
	}

Thus we will add here:

App/src/pages/settings/Payments/AddDebitCardPage.js

Lines 37 to 41 in 4230f28

	function DebitCardPage(props) {
	const {translate} = useLocalize();
	const prevFormDataSetupComplete = usePrevious(props.formData.setupComplete);
	const nameOnCardRef = useRef(null);

The following:

function DebitCardPage(props) {
    if (!Permissions.canUseWallet(props.betas)) {
        // Options listed below
    }
    const {translate} = useLocalize();
    const prevFormDataSetupComplete = usePrevious(props.formData.setupComplete);
    const nameOnCardRef = useRef(null);

We can also store it in variable for cleaner code
Concerning what should we do if Permission to useWallet is not granted:

Option 1: Preview page not found component:

    if (!Permissions.canUseWallet(props.betas)) {
        return <NotFoundPage />;
    }

*Result
Screencast from 05 غشت, 2023 +01 03:45:19 .webm

Option 2: Preferred: Navigate back to Payment Settings Page

    if (!Permissions.canUseWallet(props.betas)) {
        Navigation.navigate(ROUTES.SETTINGS_PAYMENTS);
    }

*Result
Screencast from 05 غشت, 2023 +01 03:47:20 .webm

What alternative solutions did you explore? (Optional)

N/A**

[makiour]

Here are the results from my solution above with preview shared by @m-natarajan, thank you!

Option 1: Preview page not found component:

    if (!Permissions.canUseWallet(props.betas)) {
        return <NotFoundPage />;
    }

Result

Screencast.from.05.2023.+01.03.45.19.webm

Option 2: Preferred: Navigate back to Payment Settings Page

    if (!Permissions.canUseWallet(props.betas)) {
        Navigation.navigate(ROUTES.SETTINGS_PAYMENTS);
    }

Result

Screencast.from.05.2023.+01.03.47.20.webm

[hungvu193]

Proposal

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

Add Debit Card is Accesible for Users with No Permissions

What is the root cause of that problem?

We only hide the Add debit button in AddPaymentMethodMenu but we didn't prevent user from accessing it via deeplink.

App/src/components/AddPaymentMethodMenu.js

Lines 67 to 76 in a03a21d

	...(Permissions.canUseWallet(props.betas)
	? [
	{
	text: props.translate('common.debitCard'),
	icon: Expensicons.CreditCard,
	onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD),
	},
	]
	: []),
	...(props.shouldShowPaypal && !props.payPalMeData.description

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

Solution 1: Wrap our AddDebitCardPage with FullPageNotFoundView and add the props shouldShow={!Permissions.canUseWallet(props.betas) }

Solution 2: Add a condition inside our useEffect, if user doesn't have permission, bring them back to SETTINGS_PAYMENTS screen:

    useEffect(() => {
        PaymentMethods.clearDebitCardFormErrorAndSubmit();
        if (!Permissions.canUseWallet(props.betas)) {
            Navigation.goBack(ROUTES.SETTINGS_PAYMENTS, true)
        }
    }, [props.betas]);

What alternative solutions did you explore? (Optional)

N/A

[CortneyOfstad]

Was able to recreate, so getting eyes on this 👍

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~013031c80681e3e212

[melvin-bot]

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