[HOLD for payment 2024-11-29] [$250] Tax - Enable/disable option shows rates text in plural instead rate

[lanitochka17]

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.50-0
Reproducible in staging?: Y
Reproducible in production?: Y
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
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Tap profile icon - workspaces -- workspace
3. Tap more features - enable taxes
4. Create few tax rates
5. Disable a tax rate
6. Long press and select one disabled and one enabled tax rate
7. Tap dropdown on top and view options

Expected Result:

Enable/disable option must not show rates text in plural and it must show rate

Actual Result:

Enable/disable option shows rates text in plural instead rate when only one enabled and disabled rate are selected

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6637276_1729142094339.rate.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021846961178055724837
• Upwork Job ID: 1846961178055724837
• Last Price Increase: 2024-11-07

Issue Owner

Current Issue Owner: @getusha

[melvin-bot]

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

[lanitochka17]

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

[github-actions]

rzghnsy Your proposal will be dismissed because you did not follow the proposal template.

[nyomanjyotisa]

Edited by proposal-police: This proposal was edited at 2024-10-17 13:37:10 UTC.

Proposal

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

Tax - Enable/disable option shows rates text in plural instead rate

What is the root cause of that problem?

We show plural text base on isMultiple variable, without checking the enable/disable status of the selected tax

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 186 in 987ff1b

const isMultiple = selectedTaxesIDs.length > 1;

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 201 in 987ff1b

text: isMultiple ? translate('workspace.taxes.actions.disableMultiple') : translate('workspace.taxes.actions.disable'),

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 211 in 987ff1b

text: isMultiple ? translate('workspace.taxes.actions.enableMultiple') : translate('workspace.taxes.actions.enable'),

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

Create new variables to check is there multiple enabled tax selected and is there multiple disabled tax selected

        const isMultipleEnabled = selectedTaxesIDs.filter((taxID) => !policy?.taxRates?.taxes[taxID]?.isDisabled).length > 1;
        const isMultipleDisabled = selectedTaxesIDs.filter((taxID) => policy?.taxRates?.taxes[taxID]?.isDisabled).length > 1;

// `Disable rates` when at least one enabled rate is selected.
        if (selectedTaxesIDs.some((taxID) => !policy?.taxRates?.taxes[taxID]?.isDisabled)) {
            options.push({
                icon: Expensicons.DocumentSlash,
                text: isMultipleEnabled ? translate('workspace.taxes.actions.disableMultiple') : translate('workspace.taxes.actions.disable'),
                value: CONST.POLICY.BULK_ACTION_TYPES.DISABLE,
                onSelected: () => toggleTaxes(false),
            });
        }

        // `Enable rates` when at least one disabled rate is selected.
        if (selectedTaxesIDs.some((taxID) => policy?.taxRates?.taxes[taxID]?.isDisabled)) {
            options.push({
                icon: Expensicons.Document,
                text: isMultipleDisabled ? translate('workspace.taxes.actions.enableMultiple') : translate('workspace.taxes.actions.enable'),
                value: CONST.POLICY.BULK_ACTION_TYPES.ENABLE,
                onSelected: () => toggleTaxes(true),
            });
        }

What alternative solutions did you explore? (Optional)

[Nodebrute]

Proposal

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

Enable/disable option shows rates text in plural instead rate

What is the root cause of that problem?

Here we only see if selected tags are more than 1 instead of checking disable/enable tags count

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 186 in 987ff1b

const isMultiple = selectedTaxesIDs.length > 1;

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

We can create 2 new variables

        const disableTaxes = selectedTaxesIDs.filter((taxID) => policy?.taxRates?.taxes[taxID]?.isDisabled);
        const enabledTaxes = selectedTaxesIDs.filter((taxID) => !policy?.taxRates?.taxes[taxID]?.isDisabled);

and then in here we can check

   if (disableTaxes.length > 0)

and in here we can change this to

 text: disableTaxes.length === 1 ?  translate('workspace.taxes.actions.disable') : translate('workspace.taxes.actions.disableMultiple'),

We can do same for enable tags

What alternative solutions did you explore? (Optional)

[ChavdaSachin]

Edited by proposal-police: This proposal was edited at 2024-10-17 13:57:28 UTC.

Proposal

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

Tax - Enable/disable option shows rates text in plural instead rate

What is the root cause of that problem?

Irrespective of number of available rates to enable/disable, we check only for number of selections here.

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 186 in 987ff1b

const isMultiple = selectedTaxesIDs.length > 1;

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 201 in 987ff1b

text: isMultiple ? translate('workspace.taxes.actions.disableMultiple') : translate('workspace.taxes.actions.disable'),

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 211 in 987ff1b

text: isMultiple ? translate('workspace.taxes.actions.enableMultiple') : translate('workspace.taxes.actions.enable'),

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

Rather create new objects enabledRates and disabledRates

        const enbledRates = selectedTaxesIDs.filter((taxID) => policy?.taxRates?.taxes[taxID]?.isDisabled);
        const disabledRates = selectedTaxesIDs.filter((taxID) => !policy?.taxRates?.taxes[taxID]?.isDisabled);

now use enabledRates?.length here to saw the option

        if (enabledRates?.length) {

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 198 in 987ff1b

if (selectedTaxesIDs.some((taxID) => !policy?.taxRates?.taxes[taxID]?.isDisabled)) {

and use enabledRates?.length > 1 instead of isMultiple here

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 201 in 987ff1b

text: isMultiple ? translate('workspace.taxes.actions.disableMultiple') : translate('workspace.taxes.actions.disable'),

Similar for Enable option use 'disabledRates?.length' here.

        if (disabledRates?.length) {

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 208 in 987ff1b

if (selectedTaxesIDs.some((taxID) => policy?.taxRates?.taxes[taxID]?.isDisabled)) {

And use disabledRates?.length > 1 instead of isMultiple here.

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 211 in 987ff1b

text: isMultiple ? translate('workspace.taxes.actions.enableMultiple') : translate('workspace.taxes.actions.enable'),

This way we optimize the solution and do not have to filter array twice.

What alternative solutions did you explore? (Optional)

And since we make use of this logic only to determine length of selections, we could optimize it further.

Only create 1 object which holds count of enabled selections and use it to determine length of disabledSelectionCount.

        const enabledRatesCount = selectedTaxesIDs.filter((taxID) => !policy?.taxRates?.taxes[taxID]?.isDisabled).length;
        const disabledRatesCount = selectedTaxesIDs.length - enabledRatesCount;

and use those variables for check here

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 198 in 987ff1b

if (selectedTaxesIDs.some((taxID) => !policy?.taxRates?.taxes[taxID]?.isDisabled)) {

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 201 in 987ff1b

text: isMultiple ? translate('workspace.taxes.actions.disableMultiple') : translate('workspace.taxes.actions.disable'),

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 208 in 987ff1b

if (selectedTaxesIDs.some((taxID) => policy?.taxRates?.taxes[taxID]?.isDisabled)) {

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 211 in 987ff1b

text: isMultiple ? translate('workspace.taxes.actions.enableMultiple') : translate('workspace.taxes.actions.enable'),

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.

[ChavdaSachin]

Updated Proposal
Added perfectly optimized way to solve the issue as alternate solution.

[twilight2294]

Proposal

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

Enable/disable option shows rates text in plural instead rate

What is the root cause of that problem?

We check if multiple are selected:

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 186 in 987ff1b

const isMultiple = selectedTaxesIDs.length > 1;

If so then without checking if there are multiple selected or not, we directly show plural form of texts:

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 201 in 987ff1b

text: isMultiple ? translate('workspace.taxes.actions.disableMultiple') : translate('workspace.taxes.actions.disable'),

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 211 in 987ff1b

text: isMultiple ? translate('workspace.taxes.actions.enableMultiple') : translate('workspace.taxes.actions.enable'),

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

First we need to get the disabled and enabled taxes:

        const enabledRatesCount = selectedTaxesIDs.filter((taxID) => !policy?.taxRates?.taxes[taxID]?.isDisabled).length;
        const disabledRatesCount = selectedTaxesIDs.length - enabledRatesCount;

Now according to our Readme:

Here’s an example of how to implement plural translations:

messages: () => ({ zero: 'No messages', one: 'One message', two: 'Two messages', few: (count) => ${count} messages, many: (count) => You have ${count} messages, other: (count) => You have ${count} unread messages, })

So we should not do condition rendering here, instead we should update the text to match this plural forms:

First update the en.ts and es.ts file to unify the multi tags messages:

           disableTaxTitle: () => ({
                one: 'Disable rate',
                other: 'Disable rates',
            }),
            enableTaxTitle: () => ({
                one: 'enable rate',
                other: 'enable rates',
            }),
            

        // `Disable rates` when at least one enabled rate is selected.
        if (selectedTaxesIDs.some((taxID) => !policy?.taxRates?.taxes[taxID]?.isDisabled)) {
            options.push({
                icon: Expensicons.DocumentSlash,
                text: translate('workspace.taxes.actions.disableTaxTitle', {count: disabledRatesCount}),
                value: CONST.POLICY.BULK_ACTION_TYPES.DISABLE,
                onSelected: () => toggleTaxes(false),
            });
        }

        // `Enable rates` when at least one disabled rate is selected.
        if (selectedTaxesIDs.some((taxID) => policy?.taxRates?.taxes[taxID]?.isDisabled)) {
            options.push({
                icon: Expensicons.Document,
                text: translate('workspace.taxes.actions.enableTaxTitle', {count: enabledRatesCount}),
                value: CONST.POLICY.BULK_ACTION_TYPES.ENABLE,
                onSelected: () => toggleTaxes(true),
            });
        }

We can even optimise the conditions during PR phase

What alternative solutions did you explore? (Optional)

[melvin-bot]

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