Merge pull request #949 from bigcapitalhq/fix-tax-rates

fix: tax rates API and UI improvements

packages/server/src/modules/TaxRates/TaxRate.application.ts

@@ -62,10 +62,11 @@ export class TaxRatesApplication {
 
   /**
    * Retrieves the tax rates list.
-   * @returns {Promise<ITaxRate[]>}
+   * @returns {Promise<{ data: ITaxRate[] }>}
    */
-  public getTaxRates() {
-    return this.getTaxRatesService.getTaxRates();
+  public async getTaxRates() {
+    const taxRates = await this.getTaxRatesService.getTaxRates();
+    return { data: taxRates };
   }
 
   /**

packages/server/src/modules/TaxRates/TaxRate.controller.ts

@@ -85,9 +85,14 @@ export class TaxRatesController {
     status: 200,
     description: 'The tax rates have been successfully retrieved.',
     schema: {
-      type: 'array',
-      items: {
-        $ref: getSchemaPath(TaxRateResponseDto),
+      type: 'object',
+      properties: {
+        data: {
+          type: 'array',
+          items: {
+            $ref: getSchemaPath(TaxRateResponseDto),
+          },
+        },
       },
     },
   })

packages/server/src/modules/TaxRates/dtos/TaxRate.dto.ts

@@ -1,3 +1,4 @@
+import { ToNumber } from '@/common/decorators/Validators';
 import { ApiProperty } from '@nestjs/swagger';
 import { Transform } from 'class-transformer';
 import {
@@ -30,6 +31,7 @@ export class CommandTaxRateDto {
    */
   @IsNumber()
   @IsNotEmpty()
+  @ToNumber()
   @ApiProperty({
     description: 'The rate of the tax rate.',
     example: 10,

packages/webapp/src/containers/TaxRates/containers/_utils.tsx

@@ -1,8 +1,8 @@
 // @ts-nocheck
 import React from 'react';
-import { Intent, Tag } from '@blueprintjs/core';
+import { Intent, Tag, Classes } from '@blueprintjs/core';
 import { Align } from '@/constants';
-import styled from 'styled-components';
+import clsx from 'classnames';
 
 const codeAccessor = (taxRate) => {
   return (
@@ -28,13 +28,17 @@ const nameAccessor = (taxRate) => {
   return (
     <>
       <span>{taxRate.name}</span>
-      {!!taxRate.is_compound && <CompoundText>(Compound tax)</CompoundText>}
+      {!!taxRate.is_compound && (
+        <span className={clsx(Classes.TEXT_MUTED)}>(Compound tax)</span>
+      )}
     </>
   );
 };
 
 const DescriptionAccessor = (taxRate) => {
-  return <DescriptionText>{taxRate.description}</DescriptionText>;
+  return (
+    <span className={clsx(Classes.TEXT_MUTED)}>{taxRate.description}</span>
+  );
 };
 
 /**
@@ -72,11 +76,3 @@ export const useTaxRatesTableColumns = () => {
   ];
 };
 
-const CompoundText = styled('span')`
-  color: #738091;
-  margin-left: 5px;
-`;
-
-const DescriptionText = styled('span')`
-  color: #5f6b7c;
-`;

packages/webapp/src/containers/TaxRates/drawers/TaxRateDetailsDrawer/TaxRateDetailsContentDetails.tsx

@@ -74,9 +74,13 @@ const TaxRateHeader = styled(`div`)`
 const TaxRateAmount = styled('div')`
   line-height: 1;
   font-size: 30px;
-  color: #565b71;
   font-weight: 600;
   display: inline-block;
+  color: var(--x-color-amount-text, #565b71);
+
+  .bp4-dark & {
+    color: rgba(255, 255, 255, 0.9);
+  }
 `;
 
 const TaxRateActiveTag = styled(Tag)`

packages/webapp/src/hooks/query/taxRates.ts

@@ -37,10 +37,10 @@ export function useTaxRate(taxRateId: string, props) {
     [QUERY_TYPES.TAX_RATES, taxRateId],
     {
       method: 'get',
-      url: `tax-rates/${taxRateId}}`,
+      url: `tax-rates/${taxRateId}`,
     },
     {
-      select: (res) => res.data.data,
+      select: (res) => res.data,
       ...props,
     },
   );
@@ -106,7 +106,7 @@ export function useActivateTaxRate(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
-  return useMutation((id) => apiRequest.post(`tax-rates/${id}/active`), {
+  return useMutation((id) => apiRequest.put(`tax-rates/${id}/activate`), {
     onSuccess: (res, id) => {
       commonInvalidateQueries(queryClient);
       queryClient.invalidateQueries([QUERY_TYPES.TAX_RATES, id]);
@@ -122,7 +122,7 @@ export function useInactivateTaxRate(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
-  return useMutation((id) => apiRequest.post(`tax-rates/${id}/inactive`), {
+  return useMutation((id) => apiRequest.put(`tax-rates/${id}/inactivate`), {
     onSuccess: (res, id) => {
       commonInvalidateQueries(queryClient);
       queryClient.invalidateQueries([QUERY_TYPES.TAX_RATES, id]);