feat(webapp): add activate/inactivate tax rate buttons on details drawer

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

@@ -4,17 +4,26 @@ import {
   Button,
   Classes,
   Intent,
+  Menu,
+  MenuItem,
   NavbarDivider,
   NavbarGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
 } from '@blueprintjs/core';
 import * as R from 'ramda';
-import { Can, DashboardActionsBar, Icon } from '@/components';
+import { AppToaster, Can, DashboardActionsBar, Icon } from '@/components';
 import { AbilitySubject, TaxRateAction } from '@/constants/abilityOption';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { useTaxRateDetailsContext } from './TaxRateDetailsContentBoot';
 import { DialogsName } from '@/constants/dialogs';
+import {
+  useActivateTaxRate,
+  useInactivateTaxRate,
+} from '@/hooks/query/taxRates';
 
 /**
  * Tax rate details content actions bar.
@@ -27,7 +36,10 @@ function TaxRateDetailsContentActionsBar({
   // #withAlertsActions
   openAlert,
 }) {
-  const { taxRateId } = useTaxRateDetailsContext();
+  const { taxRateId, taxRate } = useTaxRateDetailsContext();
+
+  const { mutateAsync: activateTaxRateMutate } = useActivateTaxRate();
+  const { mutateAsync: inactivateTaxRateMutate } = useInactivateTaxRate();
 
   // Handle edit tax rate.
   const handleEditTaxRate = () => {
@@ -37,6 +49,38 @@ function TaxRateDetailsContentActionsBar({
   const handleDeleteTaxRate = () => {
     openAlert('tax-rate-delete', { taxRateId });
   };
+  // Handle activate tax rate.
+  const handleActivateTaxRate = () => {
+    activateTaxRateMutate(taxRateId)
+      .then(() => {
+        AppToaster.show({
+          message: 'The tax rate has been activated successfully.',
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: 'Something went wrong.',
+          intent: Intent.DANGER,
+        });
+      });
+  };
+  // Handle inactivate tax rate.
+  const handleInactivateTaxRate = () => {
+    inactivateTaxRateMutate(taxRateId)
+      .then(() => {
+        AppToaster.show({
+          message: 'The tax rate has been inactivated successfully.',
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: 'Something went wrong.',
+          intent: Intent.DANGER,
+        });
+      });
+  };
 
   return (
     <DashboardActionsBar>
@@ -59,6 +103,39 @@ function TaxRateDetailsContentActionsBar({
             onClick={handleDeleteTaxRate}
           />
         </Can>
+
+        <Can I={TaxRateAction.Edit} a={AbilitySubject.TaxRate}>
+          <NavbarDivider />
+          <Popover
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+            modifiers={{
+              offset: { offset: '0, 4' },
+            }}
+            content={
+              <Menu>
+                {!taxRate.active && (
+                  <MenuItem
+                    text={'Activate Tax Rate'}
+                    onClick={handleActivateTaxRate}
+                  />
+                )}
+                {!!taxRate.active && (
+                  <MenuItem
+                    text={'Inactivate Tax Rate'}
+                    onClick={handleInactivateTaxRate}
+                  />
+                )}
+              </Menu>
+            }
+          >
+            <Button
+              icon={<Icon icon="more-vert" iconSize={16} />}
+              minimal={true}
+            />
+          </Popover>
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );
@@ -67,5 +144,5 @@ function TaxRateDetailsContentActionsBar({
 export default R.compose(
   withDrawerActions,
   withDialogActions,
-  withAlertsActions
+  withAlertsActions,
 )(TaxRateDetailsContentActionsBar);

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

@@ -13,9 +13,15 @@ export default function TaxRateDetailsContentDetails() {
       <div>
         <TaxRateHeader>
           <TaxRateAmount>{taxRate.rate}%</TaxRateAmount>
-          <TaxRateActiveTag round={false} intent={Intent.SUCCESS} minimal>
+          {taxRate.active ? (
-            Active
+            <TaxRateActiveTag round={false} intent={Intent.SUCCESS} minimal>
-          </TaxRateActiveTag>
+              Active
+            </TaxRateActiveTag>
+          ) : (
+            <TaxRateActiveTag round={false} intent={Intent.NONE} minimal>
+              Inactive
+            </TaxRateActiveTag>
+          )}
         </TaxRateHeader>
         <DetailsMenu direction={'horizantal'} minLabelSize={200}>
           <DetailItem label={'Tax Rate Name'} children={taxRate.name} />