feat(leng): add leng.

client/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooter.js

@@ -15,7 +15,7 @@ import { inputIntent } from 'utils';
 export default function EstiamteFormFooter({}) {
   return (
     <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox title={'Estimate details'} defaultOpen={false}>
+      <Postbox title={<T id={'estimate_details'} />} defaultOpen={false}>
         <Row>
           <Col md={8}>
             {/* --------- Customer Note --------- */}
@@ -50,7 +50,7 @@ export default function EstiamteFormFooter({}) {
               initialFiles={[]}
               // onDrop={handleDropFiles}
               // onDeleteFile={handleDeleteFile}
-              hint={'Attachments: Maxiumum size: 20MB'}
+              hint={<T id={'attachments_maximum'} />}
             />
           </Col>
         </Row>

client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.js

@@ -2,6 +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 { CLASSES } from 'common/classes';
 
@@ -18,15 +19,16 @@ function EstimateFormHeader({
   const { values } = useFormikContext();
 
   // Calculate the total due amount of bill entries.
-  const totalDueAmount = useMemo(() => sumBy(values.entries, 'total'), [
-    values.entries,
-  ]);
+  const totalDueAmount = useMemo(
+    () => sumBy(values.entries, 'total'),
+    [values.entries],
+  );
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <EstimateFormHeaderFields />
       <PageFormBigNumber
-        label={'Amount'}
+        label={formatMessage({ id: 'amount' })}
         amount={totalDueAmount}
         currencyCode={baseCurrency}
       />

client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js

@@ -170,7 +170,7 @@ function EstimateFormHeader({
                 }}
                 tooltip={true}
                 tooltipProps={{
-                  content: 'Setting your auto-generated estimate number',
+                  content: <T id={'setting_your_auto_generated_estimate_number'}/>,
                   position: Position.BOTTOM_LEFT,
                 }}
               />

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

@@ -2,17 +2,17 @@ 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';
 
 export default function EstimatesEmptyStatus() {
   const history = useHistory();
 
   return (
     <EmptyStatus
-      title={"It's time to send estimates to your customers."}
+      title={<T id={'it_s_time_to_send_estimates_to_your_customers'} />}
       description={
         <p>
-          It is a long established fact that a reader will be distracted by the
-          readable content of a page when looking at its layout.
+          <T id={'it_is_a_long_established_fact_that_a_reader'} />
         </p>
       }
       action={
@@ -24,10 +24,10 @@ export default function EstimatesEmptyStatus() {
               history.push('/estimates/new');
             }}
           >
-            New sale estimate
+            <T id={'new_sale_estimate'} />
           </Button>
           <Button intent={Intent.NONE} large={true}>
-            Learn more
+            <T id={'learn_more'} />
           </Button>
         </>
       }

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooter.js

@@ -12,7 +12,7 @@ import { inputIntent } from 'utils';
 export default function InvoiceFormFooter() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox title={'Invoice details'} defaultOpen={false}>
+      <Postbox title={<T id={'invoice_details'} />} defaultOpen={false}>
         <Row>
           <Col md={8}>
             {/* --------- Invoice message --------- */}
@@ -47,7 +47,7 @@ export default function InvoiceFormFooter() {
               initialFiles={[]}
               // onDrop={handleDropFiles}
               // onDeleteFile={handleDeleteFile}
-              hint={'Attachments: Maxiumum size: 20MB'}
+              hint={<T id={'attachments_maximum'} />}
             />
           </Col>
         </Row>

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.js

@@ -2,6 +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 { CLASSES } from 'common/classes';
 import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
@@ -21,15 +22,16 @@ function InvoiceFormHeader({
   const { values } = useFormikContext();
 
   // Calculate the total due amount of invoice entries.
-  const totalDueAmount = useMemo(() => sumBy(values.entries, 'total'), [
-    values.entries,
-  ]);
+  const totalDueAmount = useMemo(
+    () => sumBy(values.entries, 'total'),
+    [values.entries],
+  );
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <InvoiceFormHeaderFields />
       <PageFormBigNumber
-        label={'Due Amount'}
+        label={formatMessage({ id: 'due_amount' })}
         amount={totalDueAmount}
         currencyCode={baseCurrency}
       />

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js

@@ -168,7 +168,7 @@ function InvoiceFormHeaderFields({
                 }}
                 tooltip={true}
                 tooltipProps={{
-                  content: 'Setting your auto-generated invoice number',
+                  content: <T id={'setting_your_auto_generated_invoice_number'}/>,
                   position: Position.BOTTOM_LEFT,
                 }}
               />

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFooter.js

@@ -12,7 +12,7 @@ import { CLASSES } from 'common/classes';
 export default function PaymentReceiveFormFooter({ getFieldProps }) {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox title={'Payment receive details'} defaultOpen={false}>
+      <Postbox title={<T id={'payment_receive_details'} />} defaultOpen={false}>
         <Row>
           <Col md={8}>
             {/* --------- Statement --------- */}

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.js

@@ -3,6 +3,7 @@ import { sumBy } from 'lodash';
 import { useFormikContext } from 'formik';
 import classNames from 'classnames';
 import { Money } from 'components';
+import { FormattedMessage as T } from 'react-intl';
 
 import { CLASSES } from 'common/classes';
 import PaymentReceiveHeaderFields from './PaymentReceiveHeaderFields';
@@ -33,7 +34,9 @@ function PaymentReceiveFormHeader({
 
         <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
           <div class="big-amount">
-            <span class="big-amount__label">Amount Received</span>
+            <span class="big-amount__label">
+              <T id={'amount_received'} />
+            </span>
             <h1 class="big-amount__number">
               <Money amount={paymentFullAmount} currency={baseCurrency} />
             </h1>

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js

@@ -70,9 +70,10 @@ function PaymentReceiveHeaderFields({
   const customerFieldRef = useAutofocus();
 
   // Calculates the full-amount received.
-  const totalDueAmount = useMemo(() => safeSumBy(entries, 'due_amount'), [
-    entries,
-  ]);
+  const totalDueAmount = useMemo(
+    () => safeSumBy(entries, 'due_amount'),
+    [entries],
+  );
   // Handle receive full-amount link click.
   const handleReceiveFullAmountClick = () => {
     const newEntries = fullAmountPaymentEntries(entries);
@@ -200,7 +201,7 @@ function PaymentReceiveHeaderFields({
               small={true}
               minimal={true}
             >
-              Receive full amount (
+              <T id={'receive_full_amount'} /> (
               <Money amount={totalDueAmount} currency={baseCurrency} />)
             </Button>
           </FormGroup>
@@ -232,7 +233,11 @@ function PaymentReceiveHeaderFields({
                 }}
                 tooltip={true}
                 tooltipProps={{
-                  content: 'Setting your auto-generated Payment Receive number',
+                  content: (
+                    <T
+                      id={'setting_your_auto_generated_payment_receive_number'}
+                    />
+                  ),
                   position: Position.BOTTOM_LEFT,
                 }}
               />

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.js

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { CloudLoadingIndicator } from 'components';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'react-intl';
 
 import { CLASSES } from 'common/classes';
 import { usePaymentReceiveInnerContext } from './PaymentReceiveInnerProvider';
@@ -15,32 +16,37 @@ import { compose, updateTableRow } from 'utils';
 export default function PaymentReceiveItemsTable({
   entries,
   onUpdateData,
-  currencyCode
+  currencyCode,
 }) {
   // Payment receive form context.
-  const {
-    isDueInvoicesFetching,
-  } = usePaymentReceiveInnerContext();
+  const { isDueInvoicesFetching } = usePaymentReceiveInnerContext();
 
   // Payment receive entries form context.
   const columns = usePaymentReceiveEntriesColumns();
 
   // Formik context.
-  const { values: { customer_id } } = useFormikContext();
+  const {
+    values: { customer_id },
+  } = useFormikContext();
 
   // No results message.
-  const noResultsMessage = customer_id
-    ? 'There is no receivable invoices for this customer that can be applied for this payment'
-    : 'Please select a customer to display all open invoices for it.';
+  const noResultsMessage = customer_id ? (
+    <T id={'there_is_no_receivable_invoices_for_this_customer'} />
+  ) : (
+    <T id={'please_select_a_customer_to_display_all_open_invoices_for_it'} />
+  );
 
   // Handle update data.
-  const handleUpdateData = useCallback((rowIndex, columnId, value) => {
-    const newRows = compose(
-      updateTableRow(rowIndex, columnId, value),
-    )(entries);
+  const handleUpdateData = useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = compose(updateTableRow(rowIndex, columnId, value))(
+        entries,
+      );
 
-    onUpdateData(newRows);
-  }, [entries, onUpdateData]);
+      onUpdateData(newRows);
+    },
+    [entries, onUpdateData],
+  );
 
   return (
     <CloudLoadingIndicator isLoading={isDueInvoicesFetching}>
@@ -53,11 +59,11 @@ export default function PaymentReceiveItemsTable({
         payload={{
           errors: [],
           updateData: handleUpdateData,
-          currencyCode
+          currencyCode,
         }}
         noResults={noResultsMessage}
         footer={true}
       />
     </CloudLoadingIndicator>
   );
-}
+}

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

@@ -2,17 +2,17 @@ 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';
 
 export default function PaymentReceivesEmptyStatus() {
   const history = useHistory();
 
   return (
     <EmptyStatus
-      title={"The organization does't receive money, yet!"}
+      title={<T id={'the_organization_doesn_t_receive_money_yet'} />}
       description={
         <p>
-          It is a long established fact that a reader will be distracted by the
-          readable content of a page when looking at its layout.
+          <T id={'it_is_a_long_established_fact_that_a_reader'} />
         </p>
       }
       action={
@@ -24,11 +24,11 @@ export default function PaymentReceivesEmptyStatus() {
               history.push('/payment-receives/new');
             }}
           >
-            New payment receive
+            <T id={'new_payment_receive'} />
           </Button>
 
           <Button intent={Intent.NONE} large={true}>
-            Learn more
+            <T id={'learn_more'} />
           </Button>
         </>
       }

client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js

@@ -65,10 +65,7 @@ function ReceiptFormHeader({
   };
 
   // Synsc receipt number settings with the form.
-  useObserveReceiptNoSettings(
-    receiptNumberPrefix,
-    receiptNextNumber,
-  );
+  useObserveReceiptNoSettings(receiptNumberPrefix, receiptNextNumber);
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
@@ -175,7 +172,11 @@ function ReceiptFormHeader({
                 }}
                 tooltip={true}
                 tooltipProps={{
-                  content: 'Setting your auto-generated receipt number',
+                  content: (
+                    <T
+                      id={'setting_your_auto_generated_payment_receive_number'}
+                    />
+                  ),
                   position: Position.BOTTOM_LEFT,
                 }}
                 inputProps={{