refactor: update UniversalSearch components with TypeScript and TextStatus

This commit is contained in:
Ahmed Bouhuolia
2026-02-09 19:26:26 +02:00
parent 1972861c97
commit 7375512fec
10 changed files with 484 additions and 316 deletions

View File

@@ -1,10 +1,10 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import { MenuItem } from '@blueprintjs/core';
import { MenuItem, Intent } from '@blueprintjs/core';
import { formattedAmount } from '@/utils';
import { T, Icon, Choose, If } from '@/components';
import { T, Icon, Choose, If, TextStatus } from '@/components';
import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
import { AbilitySubject, BillAction } from '@/constants/abilityOption';
@@ -41,35 +41,35 @@ export function BillStatus({ bill }) {
return (
<Choose>
<Choose.When condition={bill.is_fully_paid && bill.is_open}>
<span class="fully-paid-text">
<TextStatus intent={Intent.SUCCESS}>
<T id={'paid'} />
</span>
</TextStatus>
</Choose.When>
<Choose.When condition={bill.is_open}>
<Choose>
<Choose.When condition={bill.is_overdue}>
<span className={'overdue-status'}>
<TextStatus intent={Intent.DANGER}>
{intl.get('overdue_by', { overdue: bill.overdue_days })}
</span>
</TextStatus>
</Choose.When>
<Choose.Otherwise>
<span className={'due-status'}>
<TextStatus intent={Intent.WARNING}>
{intl.get('due_in', { due: bill.remaining_days })}
</span>
</TextStatus>
</Choose.Otherwise>
</Choose>
<If condition={bill.is_partially_paid}>
<span className="partial-paid">
<TextStatus intent={Intent.WARNING}>
{intl.get('day_partially_paid', {
due: formattedAmount(bill.due_amount, bill.currency_code),
})}
</span>
</TextStatus>
</If>
</Choose.When>
<Choose.Otherwise>
<span class="draft">
<TextStatus intent={Intent.NONE}>
<T id={'draft'} />
</span>
</TextStatus>
</Choose.Otherwise>
</Choose>
);

View File

@@ -1,9 +1,9 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import { MenuItem } from '@blueprintjs/core';
import { MenuItem, Intent } from '@blueprintjs/core';
import { Choose, T, Icon } from '@/components';
import { Choose, T, Icon, TextStatus } from '@/components';
import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
import { AbilitySubject, SaleEstimateAction } from '@/constants/abilityOption';
@@ -37,28 +37,28 @@ export const EstimateUniversalSearchSelect = withDrawerActions(
export const EstimateStatus = ({ estimate }) => (
<Choose>
<Choose.When condition={estimate.is_delivered && estimate.is_approved}>
<span class="approved">
<TextStatus intent={Intent.SUCCESS}>
<T id={'approved'} />
</span>
</TextStatus>
</Choose.When>
<Choose.When condition={estimate.is_delivered && estimate.is_rejected}>
<span class="reject">
<TextStatus intent={Intent.DANGER}>
<T id={'rejected'} />
</span>
</TextStatus>
</Choose.When>
<Choose.When
condition={
estimate.is_delivered && !estimate.is_rejected && !estimate.is_approved
}
>
<span class="delivered">
<TextStatus intent={Intent.SUCCESS}>
<T id={'delivered'} />
</span>
</TextStatus>
</Choose.When>
<Choose.Otherwise>
<span class="draft">
<TextStatus intent={Intent.NONE}>
<T id={'draft'} />
</span>
</TextStatus>
</Choose.Otherwise>
</Choose>
);

View File

@@ -1,9 +1,9 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import { MenuItem } from '@blueprintjs/core';
import { MenuItem, Intent } from '@blueprintjs/core';
import { T, Choose, Icon } from '@/components';
import { T, Choose, Icon, TextStatus } from '@/components';
import { highlightText } from '@/utils';
import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
@@ -39,29 +39,29 @@ function InvoiceStatus({ customer }) {
return (
<Choose>
<Choose.When condition={customer.is_fully_paid && customer.is_delivered}>
<span class="status status-success">
<TextStatus intent={Intent.SUCCESS}>
<T id={'paid'} />
</span>
</TextStatus>
</Choose.When>
<Choose.When condition={customer.is_delivered}>
<Choose>
<Choose.When condition={customer.is_overdue}>
<span className={'status status-warning'}>
<TextStatus intent={Intent.DANGER}>
{intl.get('overdue_by', { overdue: customer.overdue_days })}
</span>
</TextStatus>
</Choose.When>
<Choose.Otherwise>
<span className={'status status-warning'}>
<TextStatus intent={Intent.WARNING}>
{intl.get('due_in', { due: customer.remaining_days })}
</span>
</TextStatus>
</Choose.Otherwise>
</Choose>
</Choose.When>
<Choose.Otherwise>
<span class="status status--gray">
<TextStatus intent={Intent.NONE}>
<T id={'draft'} />
</span>
</TextStatus>
</Choose.Otherwise>
</Choose>
);
@@ -94,7 +94,6 @@ export function InvoiceUniversalSearchItem(
</>
}
onClick={handleClick}
className={'universal-search__item--invoice'}
/>
);
}

View File

@@ -1,9 +1,8 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import { MenuItem } from '@blueprintjs/core';
import { Icon, Choose, T } from '@/components';
import { MenuItem, Intent } from '@blueprintjs/core';
import { Icon, Choose, T, TextStatus } from '@/components';
import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
import { AbilitySubject, SaleReceiptAction } from '@/constants/abilityOption';
import { withDrawerActions } from '@/containers/Drawer/withDrawerActions';
@@ -39,15 +38,15 @@ function ReceiptStatus({ receipt }) {
return (
<Choose>
<Choose.When condition={receipt.is_closed}>
<span class="closed">
<TextStatus intent={Intent.SUCCESS}>
<T id={'closed'} />
</span>
</TextStatus>
</Choose.When>
<Choose.Otherwise>
<span class="draft">
<TextStatus intent={Intent.NONE}>
<T id={'draft'} />
</span>
</TextStatus>
</Choose.Otherwise>
</Choose>
);