Contact method - There is no feature to delete unverified contact methods.

[IuliiaHerets]

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

---

Version Number: v9.0.79-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5288103
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: macOS Sequoia 15.1.1 / Web
App Component: undefined

Action Performed:

1. Open the URL: https://staging.new.expensify.com
2. Loggin
3. Click on 'Settings'
4. Click on 'Profile'
5. Click on 'Contact methods'
6. Click on 'New contact method'
7. Enter a valid email & click on 'Add'
8. Paste the code from mail and click on 'Verify'
9. On the contact methods screen, click on the recently added unverified contact method.

Expected Result:

The user should be able to delete the contact method as long as it is unverified

Actual Result:

It is not possible to delete a univerified contact methods because there is no feature for that

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6682518_1733188311399.There_is_no_feature_for_delete_unverified_contact_methods.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @laurenreidexpensify (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.

[Shahidullah-Muffakir]

Proposal

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

User is not able to remove an unverified contact method

What is the root cause of that problem?

New feature

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

We can accept the children prop in the ValidateCodeActionModal component as:

<View style={[themeStyles.borderTop, themeStyles.mv4]} />
{children}

Then, we simply pass the "Remove" button to it in the ContactMethodDetailsPage component as shown below:
here: ContactMethodDetailsPage

<ValidateCodeActionModal
                   title={formattedContactMethod}
                   onModalHide={() => {}}
                   hasMagicCodeBeenSent={hasMagicCodeBeenSent}
                   isVisible={isValidateCodeActionModalVisible && !loginData.validatedDate && !!loginData}
                   validatePendingAction={loginData.pendingFields?.validateCodeSent}
                   handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode)}
                   validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
                   clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
                   onClose={() => {
                       Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
                       setIsValidateCodeActionModalVisible(false);
                   }}
                   sendValidateCode={() => User.requestContactMethodValidateCode(contactMethod)}
                   descriptionPrimary={translate('contacts.enterMagicCode', {contactMethod: formattedContactMethod})}
               >
+                <OfflineWithFeedback
+                   pendingAction={loginData.pendingFields?.deletedLogin}
+                   errors={ErrorUtils.getLatestErrorField(loginData, 'deletedLogin')}
+                    errorRowStyles={[themeStyles.mt6, themeStyles.ph5]}
+                    onClose={() => User.clearContactMethodErrors(contactMethod, 'deletedLogin')}
+                >
+                    <MenuItem
+                       title={translate('common.remove')}
+                        icon={Expensicons.Trashcan}
+                        iconFill={theme.danger}
+                       onPress={() => toggleDeleteModal(true)}
+                    />
+               </OfflineWithFeedback>
               </ValidateCodeActionModal>

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

We can pass a new prop hasRemoveBtn to the ValidateCodeActionModal component to control whether the remove button is shown. If hasRemoveBtn is true, we add the "Remove" button, which displays a Delete confirmation modal. This modal allows the user to delete a contact method.
in the

App/src/components/ValidateCodeActionModal/index.tsx

Lines 79 to 82 in f593c21

	<Text style={[themeStyles.mb3]}>{descriptionPrimary}</Text>
	{!!descriptionSecondary && <Text style={[themeStyles.mb3]}>{descriptionSecondary}</Text>}
	<ValidateCodeForm
	isLoading={isLoading}

                    {hasRemoveBtn && (
                        <OfflineWithFeedback
                            pendingAction={loginData.pendingFields?.deletedLogin}
                            errors={ErrorUtils.getLatestErrorField(loginData, 'deletedLogin')}
                            errorRowStyles={[themeStyles.mt6, themeStyles.ph5]}
                            onClose={() => User.clearContactMethodErrors(contactMethod, 'deletedLogin')}
                        >
                            <MenuItem
                                title={translate('common.remove')}
                                icon={Expensicons.Trashcan}
                                iconFill={theme.danger}
                                onPress={() => toggleDeleteModal(true)}
                            />
                        </OfflineWithFeedback>
                    )}

Screen.Recording.2024-12-28.at.12.15.37.AM.mov

[huult]

Edited by proposal-police: This proposal was edited at 2024-12-29 08:39:48 UTC.

Proposal

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

There is no feature to delete unverified contact methods.

What is the root cause of that problem?

We are able to remove the contact method when it is verified and not the default contact.

App/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx

Line 154 in 6bdeffb

setIsValidateCodeActionModalVisible(!loginData?.validatedDate);

App/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx

Line 195 in 6bdeffb

{isDefaultContactMethod ? (

App/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx

Line 278 in 6bdeffb

{!isValidateCodeActionModalVisible && getMenuItems()}

And in the case of this ticket, the contact method is unable to be removed. This is a new feature

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

If we want to remove the contact method when it is not yet verified, we need to add getMenuItems to the footer props of ValidateCodeActionModal and update the parameters of getMenuItems to suit this case.

1 update ValidateCodeActionModal

App/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx

Line 261 in 6bdeffb

<ValidateCodeActionModal

update to:

    <ValidateCodeActionModal
        title={formattedContactMethod}
        onModalHide={() => {}}
        hasMagicCodeBeenSent={hasMagicCodeBeenSent}
        isVisible={isValidateCodeActionModalVisible && !loginData.validatedDate && !!loginData}
        validatePendingAction={loginData.pendingFields?.validateCodeSent}
        handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode)}
        validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
        clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
        onClose={() => {
            Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
            setIsValidateCodeActionModalVisible(false);
        }}
        sendValidateCode={() => User.requestContactMethodValidateCode(contactMethod)}
        descriptionPrimary={translate('contacts.enterMagicCode', {contactMethod: formattedContactMethod})}
        footer={() => getMenuItems(true)} // Add this line
    />

2 update getMenuItems

App/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx

Line 180 in 6bdeffb

const getMenuItems = () => (

const getMenuItems = (onlyRemove = false) => {
        if (onlyRemove) { // Add this block
            if (isDefaultContactMethod) {
                return <View />;
            }
            return (
                <>
                    <OfflineWithFeedback
                        pendingAction={loginData.pendingFields?.deletedLogin}
                        errors={ErrorUtils.getLatestErrorField(loginData, 'deletedLogin')}
                        errorRowStyles={[themeStyles.mt6, themeStyles.ph5]}
                        onClose={() => User.clearContactMethodErrors(contactMethod, 'deletedLogin')}
                    >
                        <MenuItem
                            title={translate('common.remove')}
                            icon={Expensicons.Trashcan}
                            iconFill={theme.danger}
                            onPress={() => toggleDeleteModal(true)}
                        />
                    </OfflineWithFeedback>
                    <ConfirmModal
                        title={translate('contacts.removeContactMethod')}
                        onConfirm={confirmDeleteAndHideModal}
                        onCancel={() => toggleDeleteModal(false)}
                        onModalHide={() => {
                            InteractionManager.runAfterInteractions(() => {
                                validateCodeFormRef.current?.focusLastSelected?.();
                            });
                        }}
                        prompt={translate('contacts.removeAreYouSure')}
                        confirmText={translate('common.yesContinue')}
                        cancelText={translate('common.cancel')}
                        isVisible={isDeleteModalOpen && !isDefaultContactMethod}
                        danger
                    />
                </>
            );
        }

        ...
    };

POC

Screen.Recording.2024-12-29.at.15.47.31.mov

Note: I will test the other case and optimize the code during the pull request phase

Test branch

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

This issue updates the logic to allow removing the contact method when it is not verified, so I think we don’t need to test here

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.