fix: invoices status.

This commit is contained in:
elforjani3
2020-12-19 17:02:37 +02:00
parent 76adff82b5
commit 5564555a3f
3 changed files with 39 additions and 71 deletions

View File

@@ -10,70 +10,41 @@ export const statusAccessor = (row) => {
return ( return (
<div className={'status-accessor'}> <div className={'status-accessor'}>
<Choose> <Choose>
<Choose.When condition={row.is_delivered}> <Choose.When condition={row.is_fully_paid && row.is_delivered}>
<Choose> <span className={'fully-paid-status'}>
<Choose.When condition={row.is_overdue && !row.is_partially_paid}> <Icon icon="checkmark-16" iconSize={17} />
<span className={'overdue_status'}>
<p>
<T id={'overdue_by'} /> {row.overdue_days} <T id={'day'} />
</p>
</span>
</Choose.When>
<Choose.When condition={!row.is_overdue && row.is_partially_paid}>
<div>
<span>
<p>
<T id={'due_in'} /> {row.remaining_days}{' '}
<T id={'day_partially_paid'} /> ${row.due_amount}{' '}
<T id={'due'} />
</p>
</span>
<ProgressBar
animate={false}
stripes={false}
intent={Intent.PRIMARY}
value={calculateStatus(row.payment_amount, row.balance)}
/>
</div>
</Choose.When>
<Choose.When condition={row.is_overdue && row.is_partially_paid}>
<div>
<span>
<p>
<T id={'overdue_by'} /> {row.overdue_days}{' '}
<T id={'day_partially_paid'} /> ${row.due_amount}{' '}
<T id={'due'} />
</p>
</span>
<ProgressBar
animate={false}
stripes={false}
intent={Intent.PRIMARY}
value={calculateStatus(row.payment_amount, row.balance)}
/>
</div>
</Choose.When>
<Choose.When condition={row.is_fully_paid}>
<span className={'fully-paid'}>
<Icon icon="checkmark-16" iconSize={20} />
</span> </span>
<span> <span>
<T id={'paid'} /> <T id={'paid'} />
</span> </span>
</Choose.When> </Choose.When>
<Choose.When condition={row.is_delivered}>
<Choose>
<Choose.When condition={row.is_overdue}>
<span className={'overdue-status'}>
<T id={'overdue_by'} values={{ overdue: row.overdue_days }} />
</span>
</Choose.When>
<Choose.Otherwise> <Choose.Otherwise>
<span className={'remaining-status'}> <span className={'remaining-status'}>
<p> <T id={'due_in'} values={{ due: row.remaining_days }} />
<T id={'due_in'} /> {row.remaining_days} <T id={'day'} />
</p>
</span> </span>
</Choose.Otherwise> </Choose.Otherwise>
</Choose> </Choose>
</Choose.When>
<If condition={row.is_partially_paid}>
<span>
<T id={'day_partially_paid'} values={{ due: row.due_amount }} />
</span>
<ProgressBar
animate={false}
stripes={false}
intent={Intent.PRIMARY}
value={calculateStatus(row.payment_amount, row.balance)}
/>
</If>
</Choose.When>
<Choose.Otherwise> <Choose.Otherwise>
<Tag minimal={true}> <Tag minimal={true}>
<T id={'draft'} /> <T id={'draft'} />

View File

@@ -869,12 +869,9 @@ export default {
save_and_deliver: 'Save & Deliver', save_and_deliver: 'Save & Deliver',
deliver_and_new: 'Deliver and new', deliver_and_new: 'Deliver and new',
deliver_continue_editing: 'Deliver (continue editing)', deliver_continue_editing: 'Deliver (continue editing)',
due_in: 'Due in', due_in: 'Due in {due} day.',
day_partially_paid: 'Day Partially paid,', day_partially_paid: 'Partially paid {due} due.',
due: 'Due.', overdue_by: 'Overdue by {overdue} day.',
overdue_by: 'Overdue by',
day: 'day.',
day_partially_paid: 'Day Partially paid',
paid: 'Paid', paid: 'Paid',
your_account_has_been_locked: your_account_has_been_locked:
'Your account has been locked due to repeated failed login attempts. Please wait a few minutes before trying again.', 'Your account has been locked due to repeated failed login attempts. Please wait a few minutes before trying again.',
@@ -931,4 +928,4 @@ export default {
'Are you sure you want to activate this item? You will be able to inactivate it later', 'Are you sure you want to activate this item? You will be able to inactivate it later',
inactivate_item: 'Inactivate Item', inactivate_item: 'Inactivate Item',
activate_item: 'Activate Item', activate_item: 'Activate Item',
}; };

View File

@@ -45,12 +45,12 @@
} }
} }
.status-accessor { .status-accessor {
span > p { span {
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
} }
.fully-paid { .fully-paid-status {
display: inline-block; display: inline-block;
border-radius: 50%; border-radius: 50%;
background: #2ba01d; background: #2ba01d;
@@ -62,14 +62,14 @@
background: rgba(92, 112, 128, 0.2); background: rgba(92, 112, 128, 0.2);
border-radius: 40px; border-radius: 40px;
display: block; display: block;
height: 6px; height: 5px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
margin-top: 5px;
width: 80%; width: 80%;
} }
} &.overdue-status {
}
.overdue-status { &.remaining-status {
} }
.remaining-status {
} }