[HOLD for payment 2024-10-16] [$250] Category rules - Approver field in category editor shows user email instead of user name

[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: 9.0.35-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

Precondition:

• Rules is enabled.
• User has custom name.

1. Go to staging.new.expensify.com
2. Go to workspace settings > Workflows.
3. Click on the existing approval workflow under Add approvals.
4. Note that Approver field shows user name.
5. Go to workspace settings > Categories.
6. Click on any category.
7. Click Approver.
8. Select a user with custom name.

Expected Result:

Approver field in category editor will show user name.

Actual Result:

Approver field in category editor shows user email instead of user name.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6604520_1726417968746.20240916_002851.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021842664254232202531
• Upwork Job ID: 1842664254232202531
• Last Price Increase: 2024-10-05
• Automatic offers:
• suneox | Reviewer | 104295831
• cretadn22 | Contributor | 104295833

Issue Owner

Current Issue Owner: @anmurali

[melvin-bot]

Triggered auto assignment to @anmurali (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]

@anmurali 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

[nyomanjyotisa]

Proposal

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

Approver field in category editor shows user email instead of user name

What is the root cause of that problem?

App/src/libs/CategoryUtils.ts

Lines 47 to 49 in d860f2d

	function getCategoryApprover(approvalRules: ApprovalRule[], categoryName: string) {
	return approvalRules?.find((rule) => rule.applyWhen.some((when) => when.value === categoryName))?.approver;
	}

We display the approver field here which is the approver email

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

Update getCategoryApprover to get the approver display name using the email, and return the display name

function getCategoryApprover(approvalRules: ApprovalRule[], categoryName: string) {
    const approverEmail = approvalRules?.find((rule) => rule.applyWhen.some((when) => when.value === categoryName))?.approver;

    if(!approverEmail){
        return;
    }

    const approver = PersonalDetailsUtils.getPersonalDetailByEmail(approverEmail);

    return approver?.displayName ?? approverEmail;
}

What alternative solutions did you explore? (Optional)

[cretadn22]

Proposal

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

Approver field in category editor shows user email instead of user name

What is the root cause of that problem?

We show the approver field here which is email of approver

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

We should avoid updating the getCategoryApprover function, as changes could impact other places

App/src/pages/workspace/categories/CategorySettingsPage.tsx

Lines 85 to 88 in d860f2d

	const approverText = useMemo(() => {
	const categoryApprover = CategoryUtils.getCategoryApprover(policy?.rules?.approvalRules ?? [], categoryName);
	return categoryApprover ?? '';
	}, [categoryName, policy?.rules?.approvalRules]);

We should retrieve the display name from PersonalDetails and show that instead of displaying the email address directly.

    const approverText = useMemo(() => {
        const categoryApprover = CategoryUtils.getCategoryApprover(policy?.rules?.approvalRules ?? [], categoryName);
        const approver = PersonalDetailsUtils.getPersonalDetailByEmail(categoryApprover ?? '');
        return approver.displayName ?? categoryApprover ?? '';
    }, [categoryName, policy?.rules?.approvalRules]);

What alternative solutions did you explore? (Optional)

[nkdengineer]

Proposal

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

Approver field in category editor shows user email instead of user name.

What is the root cause of that problem?

categoryApprover here is the email of approver

App/src/pages/workspace/categories/CategorySettingsPage.tsx

Line 86 in 14b99ca

const categoryApprover = CategoryUtils.getCategoryApprover(policy?.rules?.approvalRules ?? [], categoryName);

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

We should get the personal details of the approver based on the email then use getDisplayNameOrDefault function to get the display name of the approver

const approverText = useMemo(() => {
    const categoryApprover = CategoryUtils.getCategoryApprover(policy?.rules?.approvalRules ?? [], categoryName);
    if (!categoryApprover) {
        return '';
    }
    const personalDetails = getPersonalDetailByEmail(categoryApprover);
    return getDisplayNameOrDefault(personalDetails) ?? '';
}, [categoryName, policy?.rules?.approvalRules]);

App/src/pages/workspace/categories/CategorySettingsPage.tsx

Line 86 in 14b99ca

const categoryApprover = CategoryUtils.getCategoryApprover(policy?.rules?.approvalRules ?? [], categoryName);

getDisplayNameOrDefault function will cover all cases of the user like remove SMS domain of phone number user, ....

What alternative solutions did you explore? (Optional)

We can create a new util like getCategoryApproverDisplayName and use getCategoryApprover function and the logic above to return the display name of the approver

[melvin-bot]

@anmurali Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@anmurali Still overdue 6 days?! Let's take care of this!

[anmurali]

I am not sure where to go to turn on rules. I'll have to circle back to this one.

[melvin-bot]

@anmurali this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!