[HOLD for payment 2025-01-22] [$250] 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 contributors@expensify.com 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): hywnnoj+11@gmail.com
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

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021874053836834663264
• Upwork Job ID: 1874053836834663264
• Last Price Increase: 2024-12-31

Issue Owner

Current Issue Owner: @laurenreidexpensify

[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]

Edited by proposal-police: This proposal was edited at 2024-12-30 19:29:21 UTC.

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?

1. Update the ValidateCodeActionModal component in the ContactMethodDetailsPage:
   • Add the following props:
     • shouldShowThreeDotsButton
     • threeDotsMenuItems
     • shouldOverlayDots

   <ValidateCodeActionModal
       title={formattedContactMethod}
+       threeDotsMenuItems={[
+         {
+               icon: Expensicons.Trashcan,
+               text: translate('common.remove'),
+               iconFill:theme.danger,
+               onSelected: () => toggleDeleteModal(true),
+           },
+       ]}
+      shouldOverlayDots={true}
+       shouldShowThreeDotsButton={isValidateCodeActionModalVisible}
   />

2. then pass those props and threeDotsAnchorPosition to the HeaderWithBackButton inside ValidateCodeActionModal
   as:

                <HeaderWithBackButton
                      title={title}
                      onBackButtonPress={hide}
+                    shouldShowThreeDotsButton={shouldShowThreeDotsButton}
+                    threeDotsMenuItems={threeDotsMenuItems}
+                   shouldOverlayDots={shouldOverlayDots}
+                    threeDotsAnchorPosition={styles.threeDotsPopoverOffset(windowWidth)}
                />

3. We need to move the ConfirmModal from the getMenuItems and write it beneath the :
   {!isValidateCodeActionModalVisible && getMenuItems()}

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 the ThreeDotsMenu as rightComponent to the Secondary emails, we need design confirmation for this:

Screen.Recording.2025-01-02.at.5.38.19.PM.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.

[laurenreidexpensify]

I'm not sure I fully follow the last repro steps:

Paste the code from mail and click on 'Verify'
On the contact methods screen, click on the recently added unverified contact method.

It sounds like we're verifying the contact, but then looking to remove an unverified contact?

[Shahidullah-Muffakir]

It sounds like we're verifying the contact, but then looking to remove an unverified contact?

The first code we paste from the email is sent to the main email of the current user. The secondary email we are trying to add remains unverified until we enter the second code sent to that secondary email. So, until the code is entered for the secondary email, it is still considered unverified.

[parasharrajat]

Ok, it looks like a valid issue. I can see that it was caused by #51882.

[parasharrajat]

@Shahidullah-Muffakir I don't see how your proposal will open the Delete Modal.

[Shahidullah-Muffakir]

@Shahidullah-Muffakir I don't see how your proposal will open the Delete Modal.

@parasharrajat Do you mean in the alternative method?"

[parasharrajat]

No, on the main solution.

[Shahidullah-Muffakir]

No, on the main solution.

Oh, okay. Since we're passing the Remove button as a child, clicking on it triggers the
onPress={() => toggleDeleteModal(true)} function, which opens the delete modal.