[HOLD for payment 2024-11-07] [$250] NetSuite & Intacct Export - Missing integration icon next to export buttons

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

Action Performed:

Precondition:

• Account has workspaces which are connected to QBO, NetSuite and Intacct

1. Go to staging.new.expensify.com
2. Go to workspace chat that is connected to QBO.
3. Submit an expense, and pay it.
4. Go to transaction thread.
5. Click on the export dropdown.
6. Note that there is QBO icon next to the buttons.
7. Click on the report header > Export.
8. Note that there is QBO icon next to the buttons.
9. Repeat Step 2 to 8 with workspaces that are connected to NetSuite and Intacct.

Expected Result:

For workspaces that are connected to NetSuite and Intacct, there will be icon next to "Export Online" and "Mark as manually entered" buttons.

Actual Result:

For workspaces that are connected to NetSuite and Intacct,

• in Step 6, there is no icon next to "Export Online" and "Mark as manually entered" buttons.
• in Step 8, it shows fallback avatar next to the buttons.

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Bug6564546_1723041233397.20240807_222803.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011bdc1b4345ec12d6
• Upwork Job ID: 1821626241215848953
• Last Price Increase: 2024-08-08
• Automatic offers:
• akinwale | Reviewer | 103498918
• Krishna2323 | Contributor | 103498920
• neonbhai | Contributor | 103511682

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

Triggered auto assignment to @miljakljajic (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 #wave-control

[IuliiaHerets]

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

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-08-07 15:47:11 UTC.

Proposal

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

NetSuite & Intacct Export - Missing integration icon next to export buttons

What is the root cause of that problem?

We already have the icon but we are not correctly using that.

App/src/components/ReportActionItem/ExportWithDropdownMenu.tsx

Line 55 in 0a33186

icon: iconToDisplay,

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

Pass icons instead of icon like we do in ReportDetailsExportPage.

App/src/pages/home/report/ReportDetailsExportPage.tsx

Lines 71 to 76 in 0a33186

	icons: [
	{
	source: iconToDisplay ?? '',
	type: CONST.ICON_TYPE_AVATAR,
	},
	],

What alternative solutions did you explore? (Optional)

[neonbhai]

Edited by proposal-police: This proposal was edited at 2024-08-07 15:47:12 UTC.

Proposal

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

NetSuite & Intacct Export - Missing integration icon next to export buttons/

What is the root cause of that problem?

We are missing the icons from the codebase:

App/src/libs/ReportUtils.ts

Lines 7431 to 7439 in 0a33186

	function getIntegrationIcon(connectionName?: ConnectionName) {
	if (connectionName === CONST.POLICY.CONNECTIONS.NAME.XERO) {
	return XeroCircle;
	}
	if (connectionName === CONST.POLICY.CONNECTIONS.NAME.QBO) {
	return QBOCircle;
	}
	return undefined;
	}

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

We will add the relevant icons here

The NetSuit and Intacct sags would be required from the design team.

[Krishna2323]

Proposal Updated

Updated RCA and solution.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~011bdc1b4345ec12d6

[melvin-bot]

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

[JmillsExpensify]

Taking this over and opening up for external so we can get this resolved.

[JmillsExpensify]

cc @akinwale proposal above for review when you get a chance.

[akinwale]

This is an easy, straightforward fix so we can go with the first proposal which is @Krishna2323's proposal.

🎀👀🎀 C+ reviewed.

[melvin-bot]

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

[neonbhai]

@akinwale hi, looks like the rca is that actual icon svgs are missing from the codebase from getIntegrationIcon here:

App/src/libs/ReportUtils.ts

Line 7477 in db669c4

function getIntegrationIcon(connectionName?: ConnectionName) {

so iconToDisplay is undefined here and here

The selected proposal has an incorrect rca. Please take a look 🙇

[Krishna2323]

@neonbhai, yep, you are right I think. if we decide to add the icons for NetSuite & Intacct Export then I think your proposal is more accurate but if we go with showing the fallback for those then my proposal would work.

[melvin-bot]

@JmillsExpensify, @AndrewGable, @akinwale Whoops! This issue is 2 days overdue. Let's get this updated quick!

[neonbhai]

Looks like there are some circle versions in there... but typically we like to use the square ones and round them with code. 🤷‍♂️

Suggesting that it is cleaner to only use the square svgs and round them off with code. I was looking at the PR where the circle svgs were added, wondering why they were added (considering we had a similar comment here),

I don't think the circle svgs came from the design team 🤔 Should we remove them from the codebase?

cc: @dubielzyk-expensify

[neonbhai]

The current icon sizes on prod seem a bit small. Are these good? (icon width of 20 right now):

If not,

Here's how it looks with an icon width of 30

cc: @dubielzyk-expensify

[dubielzyk-expensify]

I don't think the circle svgs came from the design team 🤔 Should we remove them from the codebase?

I don't know if they're used anywhere, so I'd say just leave them for now, but maybe @shawnborton knows.

The current icon sizes on prod seem a bit small. Are these good? (icon width of 20 right now): If not, Here's how it looks with an icon width of 30

Looking at the Figma file I see both 28px and 32px used. I recon 20 is definitely on the small side. I recon go with 32px. (Just FYI that we generally use a 8px grid/scale so everything should usually go up in 8 number increments 😄 ). Also keen on @shawnborton 's thoughts here

[shawnborton]

32px for the icon size sounds good to me, but I do think we want to keep the 40x40 bounding box that wraps those icons so that we maintain consistency with all other menuItems/optionRows.

[dubielzyk-expensify]

Yeah very true. I should've specified. I agree with that

[melvin-bot]

This issue has not been updated in over 15 days. @JmillsExpensify, @AndrewGable, @akinwale, @neonbhai eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.55-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix: integration icons next to export buttons #47812

If no regressions arise, payment will be issued on 2024-11-07. 🎊

For reference, here are some details about the assignees on this issue:

• @akinwale requires payment automatic offer (Reviewer)
• @neonbhai requires payment automatic offer (Contributor)

[melvin-bot]

@akinwale @JmillsExpensify The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[akinwale]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment:

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion:

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal Template

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Precondition:

• Account has workspaces which are connected to QBO, NetSuite and Intacct

Test:

1. Launch Expensify
2. Navigate to the chat report of a workspace that is connected to QBO
3. Submit an expense, and pay
4. Navigate to the transaction thread
5. Click on the Export dropdown
6. Verify that there is a QBO icon next to the buttons
7. Click on the Report header and select Export
8. Verify that there is a QBO icon next to the menu items
9. Repeat steps 2 through 8 for workspaces that are connected to Xero, NetSuite and Intacct verifying that the corresponding icons are properly displayed.

Do we agree 👍 or 👎?

[akinwale]

@JmillsExpensify bump for payment. Thanks.

[JmillsExpensify]

Payment summary:

• Contributor: @neonbhai $250 via Upwork
• Reviewer: @akinwale $250 via Upwork

[JmillsExpensify]

Contributors paid out and regression test linked. Closing this one out!