Expensify Card - "Smart limit" is not shown as grayed-out option when "Add approval' is disabled

[vincdargento]

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: 9.0.93-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A https://expensify.testrail.io/index.php?/tests/view/5544625
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Mac 15.0 / Chrome
App Component: Workspace Settings

Action Performed:

Precondition:

• Workspace admin has assigned a virtual card to self.

1. Go to staging.new.expensify.com
2. Go to workspace settings > Workflows.
3. Enable Add approvals.
4. Go to workspace settings > Expensify card.
5. Click on the virtual card.
6. Click Limit type.
7. Select Smart limit and save it.
8. Go to workspace settings > Workflows.
9. Disable Add approvals.
10. Go to workspace settings > Expensify card.
11. Click Limit type.

Expected Result:

When "Smart limit" is selected and "Add approvals" is disabled, opening Limit type field should still display the list with the selected "Smart limit" in grayed-out style (like when a disabled category is selected in expense details page).

Actual Result:

When "Smart limit" is selected and "Add approvals" is disabled, Limit type field list does not display the selected "Smart limit" at all.
It is only visible from the card details page.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

[melvin-bot]

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

[twilight2294]

Proposal

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

"Smart limit" is not shown as grayed-out option when "Add approval' is disabled

What is the root cause of that problem?

We do not display the option if the add approval flow is disabled:

App/src/pages/workspace/expensifyCard/WorkspaceEditCardLimitTypePage.tsx

Line 109 in e69cf96

if (areApprovalsConfigured) {

This causes the value to be hidden

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

We need to show the option if it is selected and add pending action if approvals is not enabled:

if (areApprovalsConfigured || typeSelected === CONST.EXPENSIFY_CARD.LIMIT_TYPES.SMART) {
            options.push({
                value: CONST.EXPENSIFY_CARD.LIMIT_TYPES.SMART,
                text: translate('workspace.card.issueNewCard.smartLimit'),
                alternateText: translate('workspace.card.issueNewCard.smartLimitDescription'),
                keyForList: CONST.EXPENSIFY_CARD.LIMIT_TYPES.SMART,
                isSelected: typeSelected === CONST.EXPENSIFY_CARD.LIMIT_TYPES.SMART,
                isDisabled: !areApprovalsConfigured,
            });
        }

According to OP we need to disable the option if the approval flow is disable

Additionally, we can disable the save button if the selected type is still smartLimit (and also have some text to tell user this option can't be selected further

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

N/a this is a UI bug, or we can write a UI test to mock this condition and check if the option is not pressable and the submit button is disabled too (but it's not necessary tbh)

What alternative solutions did you explore? (Optional)

N/A

[hoangzinh]

Proposal

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

"Smart limit" is not shown as grayed-out option when "Smart limit" is selected and "Add approval' is disabled

What is the root cause of that problem?

At the moment, we only display "Smart limit" when "Add approval" is configured

App/src/pages/workspace/expensifyCard/WorkspaceEditCardLimitTypePage.tsx

Line 40 in 741bd4a

const areApprovalsConfigured = PolicyUtils.getApprovalWorkflow(policy) !== CONST.POLICY.APPROVAL_MODE.OPTIONAL;

App/src/pages/workspace/expensifyCard/WorkspaceEditCardLimitTypePage.tsx

Lines 109 to 117 in 741bd4a

	if (areApprovalsConfigured) {
	options.push({
	value: CONST.EXPENSIFY_CARD.LIMIT_TYPES.SMART,
	text: translate('workspace.card.issueNewCard.smartLimit'),
	alternateText: translate('workspace.card.issueNewCard.smartLimitDescription'),
	keyForList: CONST.EXPENSIFY_CARD.LIMIT_TYPES.SMART,
	isSelected: typeSelected === CONST.EXPENSIFY_CARD.LIMIT_TYPES.SMART,
	});
	}

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

• We need to adjust above condition to also show "smart limit" if "smart limit" was already selected previously. We can use initialLimitType variable here to check if it was selected

if (areApprovalsConfigured || initialLimitType === CONST.EXPENSIFY_CARD.LIMIT_TYPES.SMART) {

• We also need to disable the "Smart limit" option if "Add approval' is disabled in order to show "Smart limit" in grayed-out style

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

N/A

What alternative solutions did you explore? (Optional)