feat(Warehouses|Branches): highlight the primary warehouses and branches.

src/containers/Preferences/Branches/BranchesDataTable.js

@@ -55,7 +55,6 @@ function BranchesDataTable({
     });
   };
 
-
   return (
     <BranchesTableCard>
       <BranchesTable
@@ -86,5 +85,14 @@ const BranchesTableCard = styled(Card)`
 const BranchesTable = styled(DataTable)`
   .table .tr {
     min-height: 38px;
+
+    .td.td-name {
+      .bp3-icon {
+        margin: 0;
+        margin-left: 2px;
+        vertical-align: top;
+        color: #e1b31d;
+      }
+    }
   }
 `;

src/containers/Preferences/Branches/components.js

@@ -37,6 +37,17 @@ export function ActionsMenu({
   );
 }
 
+/**
+ * Branch name cell.
+ */
+function BranchNameCell({ value, row: { original } }) {
+  return (
+    <span>
+      {value} {original.primary && <Icon icon={'star-18dp'} iconSize={16} />}
+    </span>
+  );
+}
+
 /**
  * Retrieve branches table columns
  * @returns
@@ -48,7 +59,7 @@ export function useBranchesTableColumns() {
         id: 'name',
         Header: intl.get('branches.column.branch_name'),
         accessor: 'name',
-        className: 'name',
+        Cell: BranchNameCell,
         width: '120',
         disableSortBy: true,
         textOverview: true,
@@ -57,7 +68,6 @@ export function useBranchesTableColumns() {
         id: 'code',
         Header: intl.get('branches.column.code'),
         accessor: 'code',
-        className: 'code',
         width: '100',
         disableSortBy: true,
         textOverview: true,
@@ -65,7 +75,6 @@ export function useBranchesTableColumns() {
       {
         Header: intl.get('branches.column.address'),
         accessor: 'address',
-        className: 'address',
         width: '180',
         disableSortBy: true,
         textOverview: true,
@@ -73,7 +82,6 @@ export function useBranchesTableColumns() {
       {
         Header: intl.get('branches.column.phone_number'),
         accessor: 'phone_number',
-        className: 'phone_number',
         width: '120',
         disableSortBy: true,
       },

src/containers/Preferences/Warehouses/WarehousesGrid.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { isEmpty } from 'lodash';
 import WarehousesEmptyStatus from './WarehousesEmptyStatus';
 import { useWarehousesContext } from './WarehousesProvider';
 import { WarehousesList, WarehousesSkeleton } from './components';

src/containers/Preferences/Warehouses/WarehousesGridItems.js

@@ -62,6 +62,7 @@ function WarehouseGridItem({
         country={warehouse.country}
         email={warehouse.email}
         phoneNumber={warehouse.phone_number}
+        primary={warehouse.primary}
       />
     </ContextMenu2>
   );

src/containers/Preferences/Warehouses/components.js

@@ -80,11 +80,14 @@ export function WarehousesGridItemBox({
   country,
   email,
   phoneNumber,
+  primary,
 }) {
   return (
     <WarehouseBoxRoot>
       <WarehouseHeader>
-        <WarehouseTitle>{title}</WarehouseTitle>
+        <WarehouseTitle>
+          {title} {primary && <Icon icon={'star-18dp'} iconSize={16} />}
+        </WarehouseTitle>
         <WarehouseCode>{code}</WarehouseCode>
         <WarehouseIcon>
           <Icon icon="warehouse-16" iconSize={20} />
@@ -145,6 +148,13 @@ export const WarehouseTitle = styled.div`
   white-space: nowrap;
   font-weight: 500;
   line-height: 1;
+
+  .bp3-icon {
+    margin: 0;
+    margin-left: 2px;
+    vertical-align: top;
+    color: #e1b31d;
+  }
 `;
 
 const WarehouseCode = styled.div`

src/static/json/icons.js

@@ -540,4 +540,10 @@ export default {
     ],
     viewBox: '0 0 3 13',
   },
+  'star-18dp': {
+    path: [
+      'M12,17.27L18.18,21l-1.64-7.03L22,9.24l-7.19-0.61L12,2L9.19,8.63L2,9.24l5.46,4.73L5.82,21L12,17.27z',
+    ],
+    viewBox: '0 0 24 24',
+  }
 };