WIP: Arabic localization.|

client/src/containers/Purchases/Bills/BillForm/BillFloatingActions.js

@@ -9,7 +9,7 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { useHistory } from 'react-router-dom';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';

client/src/containers/Purchases/Bills/BillForm/BillForm.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { useHistory } from 'react-router-dom';
 import { isEmpty, omit } from 'lodash';
 import { CLASSES } from 'common/classes';
@@ -28,17 +28,11 @@ function BillForm({
   // #withSettings
   baseCurrency,
 }) {
-  const { formatMessage } = useIntl();
   const history = useHistory();
 
   // Bill form context.
-  const {
-    bill,
-    isNewMode,
-    submitPayload,
-    createBillMutate,
-    editBillMutate,
-  } = useBillFormContext();
+  const { bill, isNewMode, submitPayload, createBillMutate, editBillMutate } =
+    useBillFormContext();
 
   // Initial values in create and edit mode.
   const initialValues = useMemo(
@@ -61,7 +55,7 @@ function BillForm({
   const handleErrors = (errors, { setErrors }) => {
     if (errors.some((e) => e.type === ERROR.BILL_NUMBER_EXISTS)) {
       setErrors({
-        bill_number: formatMessage({ id: 'bill_number_exists' }),
+        bill_number: intl.get('bill_number_exists'),
       });
     }
   };
@@ -78,9 +72,7 @@ function BillForm({
 
     if (totalQuantity === 0) {
       AppToaster.show({
-        message: formatMessage({
-          id: 'quantity_cannot_be_zero_or_empty',
-        }),
+        message: intl.get('quantity_cannot_be_zero_or_empty'),
         intent: Intent.DANGER,
       });
       setSubmitting(false);
@@ -94,12 +86,10 @@ function BillForm({
     // Handle the request success.
     const onSuccess = (response) => {
       AppToaster.show({
-        message: formatMessage(
-          {
-            id: isNewMode
-              ? 'the_bill_has_been_created_successfully'
-              : 'the_bill_has_been_edited_successfully',
-          },
+        message: intl.get(
+          isNewMode
+            ? 'the_bill_has_been_created_successfully'
+            : 'the_bill_has_been_edited_successfully',
           { number: values.bill_number },
         ),
         intent: Intent.SUCCESS,

client/src/containers/Purchases/Bills/BillForm/BillForm.schema.js

@@ -1,27 +1,27 @@
 import * as Yup from 'yup';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 import { isBlank } from 'utils';
 
 const BillFormSchema = Yup.object().shape({
   vendor_id: Yup.number()
     .required()
-    .label(formatMessage({ id: 'vendor_name_' })),
+    .label(intl.get('vendor_name_')),
   bill_date: Yup.date()
     .required()
-    .label(formatMessage({ id: 'bill_date_' })),
+    .label(intl.get('bill_date_')),
   due_date: Yup.date()
     .required()
-    .label(formatMessage({ id: 'due_date_' })),
+    .label(intl.get('due_date_')),
   bill_number: Yup.string()
     .max(DATATYPES_LENGTH.STRING)
-    .label(formatMessage({ id: 'bill_number_' })),
+    .label(intl.get('bill_number_')),
   reference_no: Yup.string().nullable().min(1).max(DATATYPES_LENGTH.STRING),
   note: Yup.string()
     .trim()
     .min(1)
     .max(DATATYPES_LENGTH.TEXT)
-    .label(formatMessage({ id: 'note' })),
+    .label(intl.get('note')),
   open: Yup.boolean(),
   entries: Yup.array().of(
     Yup.object().shape({

client/src/containers/Purchases/Bills/BillForm/BillFormFooter.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { FastField } from 'formik';
 import classNames from 'classnames';
 import { Postbox, Row, Col } from 'components';

client/src/containers/Purchases/Bills/BillForm/BillFormHeader.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { sumBy } from 'lodash';
 import { useFormikContext } from 'formik';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
 import { CLASSES } from 'common/classes';
 
@@ -29,7 +29,7 @@ function BillFormHeader({
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <BillFormHeaderFields />
       <PageFormBigNumber
-        label={formatMessage({id:'due_amount'})}
+        label={intl.get('due_amount')}
         amount={totalDueAmount}
         currencyCode={baseCurrency}
       />

client/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormGroup, InputGroup, Position } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { FastField, ErrorMessage } from 'formik';
 import classNames from 'classnames';
 

client/src/containers/Purchases/Bills/BillForm/utils.js

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import { transformToForm, repeatValue } from 'utils';
@@ -47,9 +47,7 @@ export const handleDeleteErrors = (errors) => {
     errors.find((error) => error.type === 'BILL_HAS_ASSOCIATED_PAYMENT_ENTRIES')
   ) {
     AppToaster.show({
-      message: formatMessage({
-        id: 'cannot_delete_bill_that_has_payment_transactions',
-      }),
+      message: intl.get('cannot_delete_bill_that_has_payment_transactions'),
       intent: Intent.DANGER,
     });
   }

client/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js

@@ -13,7 +13,8 @@ import {
 
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { If, DashboardActionViewsList } from 'components';
@@ -33,7 +34,7 @@ function BillActionsBar({
   const history = useHistory();
 
   // React intl.
-  const { formatMessage } = useIntl();
+  
 
   // Bills list context.
   const { billsViews } = useBillsListContext();
@@ -79,7 +80,7 @@ function BillActionsBar({
               true ? (
                 <T id={'filter'} />
               ) : (
-                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
+                `${filterCount} ${intl.get('filters_applied')}`
               )
             }
             icon={<Icon icon={'filter-16'} iconSize={16} />}

client/src/containers/Purchases/Bills/BillsLanding/BillsEmptyStatus.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 export default function BillsEmptyStatus() {
   const history = useHistory();

client/src/containers/Purchases/Bills/BillsLanding/components.js

@@ -10,7 +10,8 @@ import {
   Tag,
   ProgressBar,
 } from '@blueprintjs/core';
-import { useIntl, FormattedMessage as T } from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T } from 'components';
 import { Icon, If, Choose, Money } from 'components';
 import { safeCallback, isBlank, calculateStatus } from 'utils';
 import moment from 'moment';
@@ -22,38 +23,38 @@ export function ActionsMenu({
   payload: { onEdit, onOpen, onDelete, onQuick },
   row: { original },
 }) {
-  const { formatMessage } = useIntl();
+  
 
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
-        text={formatMessage({ id: 'view_details' })}
+        text={intl.get('view_details')}
       />
       <MenuDivider />
       <MenuItem
         icon={<Icon icon="pen-18" />}
-        text={formatMessage({ id: 'edit_bill' })}
+        text={intl.get('edit_bill')}
         onClick={safeCallback(onEdit, original)}
       />
 
       <If condition={!original.is_open}>
         <MenuItem
           icon={<Icon icon={'check'} iconSize={18} />}
-          text={formatMessage({ id: 'mark_as_opened' })}
+          text={intl.get('mark_as_opened')}
           onClick={safeCallback(onOpen, original)}
         />
       </If>
       <If condition={original.is_open && !original.is_fully_paid}>
         <MenuItem
           icon={<Icon icon="quick-payment-16" iconSize={16} />}
-          text={formatMessage({ id: 'add_payment' })}
+          text={intl.get('add_payment')}
           onClick={safeCallback(onQuick, original)}
         />
       </If>
 
       <MenuItem
-        text={formatMessage({ id: 'delete_bill' })}
+        text={intl.get('delete_bill')}
         intent={Intent.DANGER}
         onClick={safeCallback(onDelete, original)}
         icon={<Icon icon="trash-16" iconSize={16} />}
@@ -148,60 +149,60 @@ export function ActionsCell(props) {
  * Retrieve bills table columns.
  */
 export function useBillsTableColumns() {
-  const { formatMessage } = useIntl();
+  
 
   return React.useMemo(
     () => [
       {
         id: 'bill_date',
-        Header: formatMessage({ id: 'bill_date' }),
+        Header: intl.get('bill_date'),
         accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'),
         width: 110,
         className: 'bill_date',
       },
       {
         id: 'vendor',
-        Header: formatMessage({ id: 'vendor_name' }),
+        Header: intl.get('vendor_name'),
         accessor: 'vendor.display_name',
         width: 180,
         className: 'vendor',
       },
       {
         id: 'bill_number',
-        Header: formatMessage({ id: 'bill_number' }),
+        Header: intl.get('bill_number'),
         accessor: (row) => (row.bill_number ? `#${row.bill_number}` : null),
         width: 100,
         className: 'bill_number',
       },
       {
         id: 'amount',
-        Header: formatMessage({ id: 'amount' }),
+        Header: intl.get('amount'),
         accessor: AmountAccessor,
         width: 120,
         className: 'amount',
       },
       {
         id: 'status',
-        Header: formatMessage({ id: 'status' }),
+        Header: intl.get('status'),
         accessor: StatusAccessor,
         width: 160,
         className: 'status',
       },
       {
         id: 'due_date',
-        Header: formatMessage({ id: 'due_date' }),
+        Header: intl.get('due_date'),
         accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
         width: 110,
         className: 'due_date',
       },
       {
         id: 'reference_no',
-        Header: formatMessage({ id: 'reference_no' }),
+        Header: intl.get('reference_no'),
         accessor: 'reference_no',
         width: 90,
         className: 'reference_no',
       },
     ],
-    [formatMessage],
+    [],
   );
 }

client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeEntriesTable.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { CloudLoadingIndicator } from 'components';
 import classNames from 'classnames';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import { CLASSES } from 'common/classes';
 import { DataTableEditable } from 'components';

client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.js

@@ -9,7 +9,7 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { useHistory } from 'react-router-dom';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';

client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFooter.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { FormGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { FastField } from 'formik';
 import { Postbox, Row, Col } from 'components';
 import { CLASSES } from 'common/classes';

client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { sumBy, pick, defaultTo } from 'lodash';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
@@ -32,7 +32,6 @@ function PaymentMadeForm({
   baseCurrency,
 }) {
   const history = useHistory();
-  const { formatMessage } = useIntl();
 
   // Payment made form context.
   const {
@@ -80,10 +79,8 @@ function PaymentMadeForm({
 
     if (totalPaymentAmount <= 0) {
       AppToaster.show({
-        message: formatMessage({
-          id: 'you_cannot_make_payment_with_zero_total_amount',
-          intent: Intent.WARNING,
-        }),
+        message: intl.get('you_cannot_make_payment_with_zero_total_amount'),
+        intent: Intent.WARNING,
       });
       return;
     }
@@ -92,11 +89,11 @@ function PaymentMadeForm({
     // Triggers once the save request success.
     const onSaved = (response) => {
       AppToaster.show({
-        message: formatMessage({
-          id: isNewMode
+        message: intl.get(
+          isNewMode
             ? 'the_payment_made_has_been_edited_successfully'
             : 'the_payment_made_has_been_created_successfully',
-        }),
+        ),
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);
@@ -117,7 +114,7 @@ function PaymentMadeForm({
       if (getError(ERRORS.PAYMENT_NUMBER_NOT_UNIQUE)) {
         setFieldError(
           'payment_number',
-          formatMessage({ id: 'payment_number_is_not_unique' }),
+          intl.get('payment_number_is_not_unique'),
         );
       }
       setSubmitting(false);

client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.schema.js

@@ -1,22 +1,22 @@
 import * as Yup from 'yup';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
   vendor_id: Yup.string()
-    .label(formatMessage({ id: 'vendor_name_' }))
+    .label(intl.get('vendor_name_'))
     .required(),
   payment_date: Yup.date()
     .required()
-    .label(formatMessage({ id: 'payment_date_' })),
+    .label(intl.get('payment_date_')),
   payment_account_id: Yup.number()
     .required()
-    .label(formatMessage({ id: 'payment_account_' })),
+    .label(intl.get('payment_account_')),
   payment_number: Yup.string()
     .nullable()
     .max(DATATYPES_LENGTH.STRING)
     .nullable()
-    .label(formatMessage({ id: 'payment_no_' })),
+    .label(intl.get('payment_no_')),
   reference: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
   description: Yup.string().max(DATATYPES_LENGTH.TEXT),
   entries: Yup.array().of(

client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.js

@@ -5,7 +5,7 @@ import { sumBy } from 'lodash';
 import { CLASSES } from 'common/classes';
 import { compose } from 'utils';
 import { Money } from 'components';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import PaymentMadeFormHeaderFields from './PaymentMadeFormHeaderFields';
 import withSettings from 'containers/Settings/withSettings';

client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js

@@ -9,7 +9,7 @@ import {
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { toSafeInteger } from 'lodash';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';

client/src/containers/Purchases/PaymentMades/PaymentForm/components.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import moment from 'moment';
 import { Money } from 'components';
 import { safeSumBy, formattedAmount } from 'utils';
@@ -51,7 +51,7 @@ function MoneyTableCell({ row: { original }, value }) {
  * Payment made entries table columns
  */
 export function usePaymentMadeEntriesTableColumns() {
-  const { formatMessage } = useIntl();
+  
 
   return React.useMemo(
     () => [
@@ -65,7 +65,7 @@ export function usePaymentMadeEntriesTableColumns() {
         className: 'index',
       },
       {
-        Header: formatMessage({ id: 'Date' }),
+        Header: intl.get('Date'),
         id: 'bill_date',
         accessor: 'bill_date',
         Cell: BillDateCell,
@@ -74,13 +74,13 @@ export function usePaymentMadeEntriesTableColumns() {
         className: 'bill_date',
       },
       {
-        Header: formatMessage({ id: 'bill_number' }),
+        Header: intl.get('bill_number'),
         accessor: BillNumberAccessor,
         disableSortBy: true,
         className: 'bill_number',
       },
       {
-        Header: formatMessage({ id: 'bill_amount' }),
+        Header: intl.get('bill_amount'),
         accessor: 'amount',
         Cell: MoneyTableCell,
         Footer: AmountFooterCell,
@@ -88,7 +88,7 @@ export function usePaymentMadeEntriesTableColumns() {
         className: 'amount',
       },
       {
-        Header: formatMessage({ id: 'amount_due' }),
+        Header: intl.get('amount_due'),
         accessor: 'due_amount',
         Cell: MoneyTableCell,
         Footer: DueAmountFooterCell,
@@ -96,7 +96,7 @@ export function usePaymentMadeEntriesTableColumns() {
         className: 'due_amount',
       },
       {
-        Header: formatMessage({ id: 'payment_amount' }),
+        Header: intl.get('payment_amount'),
         accessor: 'payment_amount',
         Cell: MoneyFieldCell,
         Footer: PaymentAmountFooterCell,
@@ -104,6 +104,6 @@ export function usePaymentMadeEntriesTableColumns() {
         className: 'payment_amount',
       },
     ],
-    [formatMessage],
+    [],
   );
 }

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js

@@ -13,7 +13,8 @@ import {
 
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { If, DashboardActionViewsList } from 'components';
@@ -31,7 +32,7 @@ function PaymentMadeActionsBar({
   setPaymentMadesTableState,
 }) {
   const history = useHistory();
-  const { formatMessage } = useIntl();
+  
 
   // Payment receives list context.
   const { paymentMadesViews } = usePaymentMadesListContext();
@@ -73,7 +74,7 @@ function PaymentMadeActionsBar({
               true ? (
                 <T id={'filter'} />
               ) : (
-                `${0} ${formatMessage({ id: 'filters_applied' })}`
+                `${0} ${intl.get('filters_applied')}`
               )
             }
             icon={<Icon icon={'filter-16'} iconSize={16} />}

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeViewTabs.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useHistory } from 'react-router';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
 import { pick } from 'lodash';
 

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesEmptyStatus.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 export default function PaymentMadesEmptyStatus() {
   const history = useHistory();

client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js

@@ -9,7 +9,7 @@ import {
   MenuDivider,
   Position,
 } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { Icon, Money } from 'components';
 import { safeCallback } from 'utils';
 
@@ -28,22 +28,22 @@ export function ActionsMenu({
   row: { original },
   payload: { onEdit, onDelete },
 }) {
-  const { formatMessage } = useIntl();
+  
 
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
-        text={formatMessage({ id: 'view_details' })}
+        text={intl.get('view_details')}
       />
       <MenuDivider />
       <MenuItem
         icon={<Icon icon="pen-18" />}
-        text={formatMessage({ id: 'edit_payment_made' })}
+        text={intl.get('edit_payment_made')}
         onClick={safeCallback(onEdit, original)}
       />
       <MenuItem
-        text={formatMessage({ id: 'delete_payment_made' })}
+        text={intl.get('delete_payment_made')}
         intent={Intent.DANGER}
         onClick={safeCallback(onDelete, original)}
         icon={<Icon icon="trash-16" iconSize={16} />}
@@ -70,13 +70,13 @@ export function ActionsCell(props) {
  * Retrieve payment mades table columns.
  */
 export function usePaymentMadesTableColumns() {
-  const { formatMessage } = useIntl();
+  
 
   return React.useMemo(
     () => [
       {
         id: 'payment_date',
-        Header: formatMessage({ id: 'payment_date' }),
+        Header: intl.get('payment_date'),
         Cell: DateCell,
         accessor: 'payment_date',
         width: 140,
@@ -84,14 +84,14 @@ export function usePaymentMadesTableColumns() {
       },
       {
         id: 'vendor',
-        Header: formatMessage({ id: 'vendor_name' }),
+        Header: intl.get('vendor_name'),
         accessor: 'vendor.display_name',
         width: 140,
         className: 'vendor_id',
       },
       {
         id: 'payment_number',
-        Header: formatMessage({ id: 'payment_number' }),
+        Header: intl.get('payment_number'),
         accessor: (row) =>
           row.payment_number ? `#${row.payment_number}` : null,
         width: 140,
@@ -99,26 +99,26 @@ export function usePaymentMadesTableColumns() {
       },
       {
         id: 'payment_account',
-        Header: formatMessage({ id: 'payment_account' }),
+        Header: intl.get('payment_account'),
         accessor: 'payment_account.name',
         width: 140,
         className: 'payment_account_id',
       },
       {
         id: 'amount',
-        Header: formatMessage({ id: 'amount' }),
+        Header: intl.get('amount'),
         accessor: AmountAccessor,
         width: 140,
         className: 'amount',
       },
       {
         id: 'reference_no',
-        Header: formatMessage({ id: 'reference' }),
+        Header: intl.get('reference'),
         accessor: 'reference',
         width: 140,
         className: 'reference',
       },
     ],
-    [formatMessage],
+    [],
   );
 }