From ac336f98786caf74f9cab7009b7ded7869fb51ad Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Wed, 20 Sep 2023 19:25:07 +0200
Subject: [PATCH] feat(webapp): add tax compund tag to tax rates

---
 .../containers/TaxRates/containers/_utils.tsx | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/webapp/src/containers/TaxRates/containers/_utils.tsx b/packages/webapp/src/containers/TaxRates/containers/_utils.tsx
index 1f623540e..29fe64649 100644
--- a/packages/webapp/src/containers/TaxRates/containers/_utils.tsx
+++ b/packages/webapp/src/containers/TaxRates/containers/_utils.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { Intent, Tag } from '@blueprintjs/core';
 import { Align } from '@/constants';
+import styled from 'styled-components';
 
 const codeAccessor = (taxRate) => {
   return (
@@ -23,6 +24,19 @@ const statusAccessor = (taxRate) => {
   );
 };
 
+const nameAccessor = (taxRate) => {
+  return (
+    <>
+      <span>{taxRate.name}</span>
+      {!!taxRate.is_compound && <CompoundText>(Compound tax)</CompoundText>}
+    </>
+  );
+};
+
+const DescriptionAccessor = (taxRate) => {
+  return <DescriptionText>{taxRate.description}</DescriptionText>;
+};
+
 /**
  * Retrieves the tax rates table columns.
  */
@@ -30,8 +44,8 @@ export const useTaxRatesTableColumns = () => {
   return [
     {
       Header: 'Name',
-      accessor: 'name',
-      width: 50,
+      accessor: nameAccessor,
+      width: 60,
     },
     {
       Header: 'Code',
@@ -46,8 +60,8 @@ export const useTaxRatesTableColumns = () => {
     },
     {
       Header: 'Description',
-      accessor: 'description',
-      width: 110,
+      accessor: DescriptionAccessor,
+      width: 100,
     },
     {
       Header: 'Status',
@@ -57,3 +71,12 @@ export const useTaxRatesTableColumns = () => {
     },
   ];
 };
+
+const CompoundText = styled('span')`
+  color: #738091;
+  margin-left: 5px;
+`;
+
+const DescriptionText = styled('span')`
+  color: #5f6b7c;
+`;