feat(webapp): add icon to convert to invoice button

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx

@@ -14,14 +14,18 @@ import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
-import { SaleEstimateAction, AbilitySubject } from '@/constants/abilityOption';
+import {
+  SaleEstimateAction,
+  AbilitySubject,
+  SaleInvoiceAction,
+} from '@/constants/abilityOption';
 import { EstimateMoreMenuItems } from './components';
 import {
   DrawerActionsBar,
   Icon,
   FormattedMessage as T,
   Can,
-  Choose,
+  If,
 } from '@/components';
 
 import { compose } from '@/utils';
@@ -42,7 +46,7 @@ function EstimateDetailActionsBar({
   closeDrawer,
 }) {
   // Estimate details drawer context.
-  const { estimateId } = useEstimateDetailDrawerContext();
+  const { estimateId, estimate } = useEstimateDetailDrawerContext();
 
   // History.
   const history = useHistory();
@@ -91,14 +95,19 @@ function EstimateDetailActionsBar({
           />
           <NavbarDivider />
         </Can>
-
+        <Can I={SaleInvoiceAction.Create} a={AbilitySubject.Invoice}>
+          <If condition={!estimate.is_converted_to_invoice}>
+            <Button
+              className={Classes.MINIMAL}
+              intent={Intent.SUCCESS}
+              icon={<Icon icon="tick" />}
+              text={<T id={'convert_to_invoice'} />}
+              onClick={handleConvertEstimate}
+            />
+            <NavbarDivider />
+          </If>
+        </Can>
         <Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
-          <Button
-            className={Classes.MINIMAL}
-            icon={<Icon icon="convert_to" />}
-            text={<T id={'convert_to_invoice'} />}
-            onClick={handleConvertEstimate}
-          />
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="envelope" />}

packages/webapp/src/static/json/icons.tsx

@@ -382,6 +382,12 @@ export default {
     ],
     viewBox: '0 0 20 20',
   },
+  tick: {
+    path: [
+      'M14,3c-0.28,0-0.53,0.11-0.71,0.29L6,10.59L2.71,7.29C2.53,7.11,2.28,7,2,7C1.45,7,1,7.45,1,8c0,0.28,0.11,0.53,0.29,0.71l4,4C5.47,12.89,5.72,13,6,13s0.53-0.11,0.71-0.29l8-8C14.89,4.53,15,4.28,15,4C15,3.45,14.55,3,14,3z',
+    ],
+    viewBox: '0 0 16 16',
+  },
   'swap-vert': {
     path: [
       'M10.6,10.9V5.4H9v5.5H6.7L9.8,14l3.1-3.1ZM5.1,0,2,3.1H4.3V8.6H5.9V3.1H8.2Z',

packages/webapp/src/style/pages/Dashboard/Dashboard.scss

@@ -212,6 +212,16 @@ $dashboard-views-bar-height: 44px;
             background: rgba(219, 55, 55, 0.1);
           }
         }
+        &.#{$ns}-minimal.#{$ns}-intent-success{
+          color: #1c6e42;
+
+          &:hover,
+          &:focus {
+            background: rgba(35, 133, 81, 0.1);
+            color: #1c6e42;
+          }
+        }
+
 
         &.button--blue-highlight {
           background-color: #ebfaff;