BIG-71: localize moment date formats.

client/src/containers/Sales/Estimates/EstimatesLanding/components.js

@@ -1,18 +1,17 @@
 import React from 'react';
-import {
-  Intent,
-  Tag,
-  Button,
-  Popover,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Position,
-} from '@blueprintjs/core';
+import { Intent, Tag, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import moment from 'moment';
+import clsx from 'classnames';
 
-import { FormattedMessage as T, Money, Choose, Icon, If } from 'components';
+import { CLASSES } from '../../../../common/classes';
+import {
+  FormatDateCell,
+  FormattedMessage as T,
+  Money,
+  Choose,
+  Icon,
+  If,
+} from 'components';
 import { safeCallback } from 'utils';
 
 /**
@@ -130,25 +129,10 @@ export function ActionsMenu({
   );
 }
 
-function DateCell({ value }) {
-  return moment(value).format('YYYY MMM DD');
-}
-
 function AmountAccessor({ amount, currency_code }) {
   return <Money amount={amount} currency={currency_code} />;
 }
 
-function ActionsCell(props) {
-  return (
-    <Popover
-      content={<ActionsMenu {...props} />}
-      position={Position.RIGHT_BOTTOM}
-    >
-      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-    </Popover>
-  );
-}
-
 export function useEstiamtesTableColumns() {
   return React.useMemo(
     () => [
@@ -156,7 +140,7 @@ export function useEstiamtesTableColumns() {
         id: 'estimate_date',
         Header: intl.get('estimate_date'),
         accessor: 'estimate_date',
-        Cell: DateCell,
+        Cell: FormatDateCell,
         width: 140,
         className: 'estimate_date',
         clickable: true,
@@ -175,7 +159,7 @@ export function useEstiamtesTableColumns() {
         id: 'expiration_date',
         Header: intl.get('expiration_date'),
         accessor: 'expiration_date',
-        Cell: DateCell,
+        Cell: FormatDateCell,
         width: 140,
         className: 'expiration_date',
         clickable: true,
@@ -198,6 +182,7 @@ export function useEstiamtesTableColumns() {
         width: 140,
         align: 'right',
         clickable: true,
+        className: clsx(CLASSES.FONT_BOLD),
       },
       {
         id: 'status',

client/src/containers/Sales/Invoices/InvoicesLanding/components.js

@@ -8,9 +8,17 @@ import {
   ProgressBar,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import moment from 'moment';
+import clsx from 'classnames';
 
-import { FormattedMessage as T, AppToaster, Choose, If, Icon } from 'components';
+import { CLASSES } from '../../../../common/classes';
+import {
+  FormatDateCell,
+  FormattedMessage as T,
+  AppToaster,
+  Choose,
+  If,
+  Icon,
+} from 'components';
 import { formattedAmount, safeCallback, calculateStatus } from 'utils';
 
 export const statusAccessor = (row) => {
@@ -150,7 +158,8 @@ export function useInvoicesTableColumns() {
       {
         id: 'invoice_date',
         Header: intl.get('invoice_date'),
-        accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'),
+        accessor: 'invoice_date',
+        Cell: FormatDateCell,
         width: 110,
         className: 'invoice_date',
         clickable: true,
@@ -183,6 +192,7 @@ export function useInvoicesTableColumns() {
         align: 'right',
         clickable: true,
         textOverview: true,
+        className: clsx(CLASSES.FONT_BOLD),
       },
       {
         id: 'status',
@@ -195,7 +205,8 @@ export function useInvoicesTableColumns() {
       {
         id: 'due_date',
         Header: intl.get('due_date'),
-        accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
+        accessor: 'due_date',
+        Cell: FormatDateCell,
         width: 110,
         className: 'due_date',
         clickable: true,

client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js

@@ -9,10 +9,11 @@ import {
   Position,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import moment from 'moment';
+import clsx from 'classnames';
 
-import { Money, Icon } from 'components';
+import { FormatDateCell, Money, Icon } from 'components';
 import { safeCallback } from 'utils';
+import { CLASSES } from '../../../../common/classes';
 
 /**
  * Table actions menu.
@@ -56,13 +57,6 @@ export function AmountAccessor(row) {
   return <Money amount={row.amount} currency={row.currency_code} />;
 }
 
-/**
- * Payment date accessor.
- */
-export function PaymentDateAccessor(row) {
-  return moment(row.payment_date).format('YYYY MMM DD');
-}
-
 /**
  * Actions cell.
  */
@@ -86,7 +80,8 @@ export function usePaymentReceivesColumns() {
       {
         id: 'payment_date',
         Header: intl.get('payment_date'),
-        accessor: PaymentDateAccessor,
+        accessor: 'payment_date',
+        Cell: FormatDateCell,
         width: 140,
         className: 'payment_date',
         clickable: true,
@@ -109,6 +104,7 @@ export function usePaymentReceivesColumns() {
         align: 'right',
         clickable: true,
         textOverview: true,
+        className: clsx(CLASSES.FONT_BOLD),
       },
       {
         id: 'payment_receive_no',

client/src/containers/Sales/Receipts/ReceiptsLanding/components.js

@@ -11,10 +11,11 @@ import {
   Tag,
   Button,
 } from '@blueprintjs/core';
-import moment from 'moment';
+import clsx from 'classnames';
 
+import { CLASSES } from '../../../../common/classes';
 import { safeCallback } from 'utils';
-import { Choose, Money, Icon, If } from 'components';
+import { FormatDateCell, Choose, Money, Icon, If } from 'components';
 
 export function ActionsMenu({
   payload: { onEdit, onDelete, onClose, onDrawer, onViewDetails, onPrint },
@@ -99,7 +100,8 @@ export function useReceiptsTableColumns() {
       {
         id: 'receipt_date',
         Header: intl.get('receipt_date'),
-        accessor: (r) => moment(r.receipt_date).format('YYYY MMM DD'),
+        accessor: 'receipt_date',
+        Cell: FormatDateCell,
         width: 140,
         className: 'receipt_date',
         clickable: true,
@@ -140,6 +142,7 @@ export function useReceiptsTableColumns() {
         align: 'right',
         clickable: true,
         textOverview: true,
+        className: clsx(CLASSES.FONT_BOLD),
       },
       {
         id: 'status',