[$250] Secondary contact - Technical message is displayed when clicking unlink button

[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.19-9
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): natnael.expensify+3@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Click on Account Settings > Profile > Contact methods > Add secondary contact method and DON'T VERIFY it
2. Logout > Enter the secondary login email address
3. Click on 'Unlink' button

Expected Result:

Link sent message should be displayed

Actual Result:

unlinkLoginForm.linkSent is displayed

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6570039_1723475134465.Screen_Recording_2024-08-12_at_4.37.26_in_the_afternoon.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01804377f1573ea50d
• Upwork Job ID: 1823344270082051171
• Last Price Increase: 2024-08-13
• Automatic offers:
• etCoderDysto | Contributor | 103559320

Issue Owner

Current Issue Owner: @mananjadhav

[melvin-bot]

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

[IuliiaHerets]

We think that this bug might be related to #vip-vsb

[IuliiaHerets]

@bfitzexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[etCoderDysto]

Proposal

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

Technical message is displayed when clicking unlink button

What is the root cause of that problem?

Here we pass a key (unlinkLoginForm.linkSent) to translation content to DotIndicatorMessage

App/src/pages/signin/UnlinkLoginForm.tsx

Lines 58 to 62 in 88ad9c7

	<DotIndicatorMessage
	style={[styles.mb5, styles.flex0]}
	type="success"
	// eslint-disable-next-line @typescript-eslint/naming-convention
	messages={{0: account.message}}

Here we are displaying a key to translation content that is located in en.ts and es.ts rather than fetching the translation content from en.ts and es.ts

App/src/components/DotIndicatorMessage.tsx

Lines 84 to 89 in de8c7af

	<Text
	// eslint-disable-next-line react/no-array-index-key
	key={i}
	style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage), textStyles]}
	>
	{message}

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

We should call transalte method with account.message here

messages={{0: translate(account.message)}}

What alternative solutions did you explore? (Optional)

[BhuvaneshPatil]

Proposal

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

Secondary contact - Technical message is displayed when clicking unlink button

What is the root cause of that problem?

When we click on unlink button we call - Session.requestUnlinkValidationLink()

We build success data here -

App/src/libs/actions/Session/index.ts

Lines 787 to 825 in 420c2a1

	function requestUnlinkValidationLink() {
	const optimisticData = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.ACCOUNT,
	value: {
	isLoading: true,
	errors: null,
	message: null,
	loadingForm: CONST.FORMS.UNLINK_LOGIN_FORM,
	},
	},
	];
	const successData = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.ACCOUNT,
	value: {
	isLoading: false,
	message: 'unlinkLoginForm.linkSent',
	loadingForm: null,
	},
	},
	];
	const failureData = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.ACCOUNT,
	value: {
	isLoading: false,
	loadingForm: null,
	},
	},
	];
	const params: RequestUnlinkValidationLinkParams = {email: credentials.login};
	API.write(WRITE_COMMANDS.REQUEST_UNLINK_VALIDATION_LINK, params, {optimisticData, successData, failureData});
	}

We directly use unlinkLoginForm.linkSent (which is key) instead of using the message related to that key.

App/src/languages/en.ts

Lines 1581 to 1587 in 420c2a1

	unlinkLoginForm: {
	toValidateLogin: ({primaryLogin, secondaryLogin}: ToValidateLoginParams) =>
	`To validate ${secondaryLogin}, please resend the magic code from the Account Settings of ${primaryLogin}.`,
	noLongerHaveAccess: ({primaryLogin}: NoLongerHaveAccessParams) => `If you no longer have access to ${primaryLogin}, please unlink your accounts.`,
	unlink: 'Unlink',
	linkSent: 'Link sent!',
	succesfullyUnlinkedLogin: 'Secondary login successfully unlinked!',

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

We should use the message instead of key.

We can use something like - Localize.translateLocal() for that.

We should for other actions related to unlink

What alternative solutions did you explore? (Optional)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01804377f1573ea50d

[melvin-bot]

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

[mananjadhav]

Will review the proposals by tomorrow. I was OOO.

[mananjadhav]

@etCoderDysto's proposal looks good to me.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @etCoderDysto 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

@mananjadhav, @bfitzexpensify, @stitesExpensify, @etCoderDysto Whoops! This issue is 2 days overdue. Let's get this updated quick!

[etCoderDysto]

PR will be ready for review today

[etCoderDysto]

@mananjadhav PR is ready for review

[mananjadhav]

@bfitzexpensify This should be ready for payout as I can see it's deployed to production last week. We don't have an offending PR as we never added the fix for this I cannot pinpoint when it should've been added.

I also don't think we need a regression test for this one.

[etCoderDysto]

@bfitzexpensify I think this issue is ready for payout. Automation is failing here. It has been more than 7 days since PR was deployed to prod

[bfitzexpensify]

Payment summary:

$250 to @etCoderDysto - offer sent via Upwork
$250 to @mananjadhav - to be paid via manual request

[etCoderDysto]

@bfitzexpensify I have accepted the offer. Thanks!

[etCoderDysto]

@bfitzexpensify I think I have accepted a duplicate offer. One received here, and the other received here. Should I end the contract sent here?

[garrettmknight]

$250 approved for @mananjadhav