BIG-40: fix localize invoice, bill, estimate, expense receipt details drawer.

client/src/containers/Drawers/BillDrawer/BillDetailFooter.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'classnames';
 
-import { TotalLines, TotalLine } from 'components';
+import { T, TotalLines, TotalLine } from 'components';
 import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
 import { useBillDrawerContext } from './BillDrawerProvider';
 
@@ -12,22 +12,22 @@ export function BillDetailFooter() {
     <div className={clsx(BillDrawerCls.detail_panel_footer)}>
       <TotalLines>
         <TotalLine
-          title={'Subtotal'}
+          title={<T id={'bill.details.subtotal'} />}
           value={bill.amount}
           className={BillDrawerCls.total_line_subtotal}
         />
         <TotalLine
-          title={'TOTAL'}
+          title={<T id={'bill.details.total'} />}
           value={bill.amount}
           className={BillDrawerCls.total_line_total}
         />
         <TotalLine
-          title={'Payment made'}
+          title={<T id={'bill.details.payment_amount'} />}
           value={bill.payment_amount}
           className={BillDrawerCls.total_line_payment}
         />
         <TotalLine
-          title={'Due amount'}
+          title={<T id={'bill.details.due_amount'} />}
           value={bill.formatted_due_amount}
           className={BillDrawerCls.total_line_dueAmount}
         />

client/src/containers/Drawers/BillDrawer/BillDetailHeader.js

@@ -48,7 +48,10 @@ export default function BillDetailHeader() {
           label={intl.get('reference')}
           children={defaultTo(bill.reference_no, '--')}
         />
-        <DetailItem label={'Created at'} children={'2020 Ang 21'} />
+        <DetailItem
+          label={intl.get('bill.details.created_at')}
+          children={'2020 Ang 21'}
+        />
       </DetailsMenu>
     </div>
   );

client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'classnames';
 
-import { TotalLines, TotalLine, If } from 'components';
+import { T, TotalLines, TotalLine, If } from 'components';
 
 import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
 
@@ -13,22 +13,22 @@ export default function EstimateDetailFooter() {
     <div className={clsx(EstimateDetailsCls.detail_panel_footer)}>
       <TotalLines className={clsx(EstimateDetailsCls.total_lines)}>
         <TotalLine
-          title={'Subtotal'}
+          title={<T id={'estimate.details.subtotal'} />}
           value={'1000'}
           className={EstimateDetailsCls.total_line_subtotal}
         />
         <TotalLine
-          title={'TOTAL'}
+          title={<T id={'estimate.details.total'} />}
           value={'1000'}
           className={EstimateDetailsCls.total_line_total}
         />
         <TotalLine
-          title={'Payment made'}
+          title={<T id={'estimate.details.payment_made'} />}
           value={'1000'}
           className={EstimateDetailsCls.total_line_payment}
         />
         <TotalLine
-          title={'Due amount'}
+          title={<T id={'estimate.details.due_amount'} />}
           value={'1000'}
           className={EstimateDetailsCls.total_line_dueAmount}
         />
@@ -37,7 +37,7 @@ export default function EstimateDetailFooter() {
       <If condition={false}>
         <div className={clsx(EstimateDetailsCls.detail_panel_note)}>
           <p>
-            <b>Note:</b> --
+            <b><T id={'estimate.details.note'} />:</b> --
           </p>
         </div>
       </If>

client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js

@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
 import clsx from 'classnames';
 
-import { DetailsMenu, DetailItem } from 'components';
+import { T, DetailsMenu, DetailItem } from 'components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 
 import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
@@ -43,7 +43,10 @@ export default function EstimateDetailHeader() {
           label={intl.get('reference')}
           children={defaultTo(estimate.reference, '-')}
         />
-        <DetailItem label={'Created at'} children={'2020 Ang 21'} />
+        <DetailItem
+          label={<T id={'estimate.details.created_at'} />}
+          children={'2020 Ang 21'}
+        />
       </DetailsMenu>
     </div>
   );

client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { T } from 'components';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
 
 export default function ExpenseDrawerFooter() {
@@ -8,11 +9,11 @@ export default function ExpenseDrawerFooter() {
     <div className="expense-drawer__content-footer">
       <div class="total-lines">
         <div class="total-lines__line total-lines__line--subtotal">
-          <div class="title">Subtotal</div>
+          <div class="title"><T id={'expense.details.subtotal'} /></div>
           <div class="amount">{total_amount}</div>
         </div>
         <div class="total-lines__line total-lines__line--total">
-          <div class="title">TOTAL</div>
+          <div class="title"><T id={'expense.details.total'} /></div>
           <div class="amount">{total_amount}</div>
         </div>
       </div>

client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'classnames';
 
-import { TotalLines, TotalLine } from 'components';
+import { T, TotalLines, TotalLine } from 'components';
 import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
@@ -15,22 +15,22 @@ export function InvoiceDetailFooter() {
     <div className={clsx(InvoiceDrawerCls.detail_panel_footer)}>
       <TotalLines>
         <TotalLine
-          title={'Subtotal'}
+          title={<T id={'invoice.details.subtotal'} />}
           value={invoice.balance}
           className={InvoiceDrawerCls.total_line_subtotal}
         />
         <TotalLine
-          title={'TOTAL'}
+          title={<T id={'invoice.details.total'} />}
           value={invoice.balance}
           className={InvoiceDrawerCls.total_line_total}
         />
         <TotalLine
-          title={'Payment made'}
+          title={<T id={'invoice.details.payment_amount'} />}
           value={invoice.payment_amount}
           className={InvoiceDrawerCls.total_line_payment}
         />
         <TotalLine
-          title={'Due amount'}
+          title={<T id={'invoice.details.due_amount'} />}
           value={'1000'}
           className={InvoiceDrawerCls.total_line_dueAmount}
         />

client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js

@@ -47,7 +47,10 @@ export default function InvoiceDetailHeader() {
           label={intl.get('reference')}
           children={defaultTo(invoice.reference_no, '--')}
         />
-        <DetailItem label={'Created at'} children={'2020 Ang 21'} />
+        <DetailItem
+          label={intl.get('invoice.details.created_at')}
+          children={'2020 Ang 21'}
+        />
       </DetailsMenu>
     </div>
   );

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js

@@ -1,28 +1,24 @@
 import React from 'react';
 import clsx from 'classnames';
 
-import { TotalLines, TotalLine } from 'components';
-
-import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
-
+import { T, TotalLines, TotalLine } from 'components';
 import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
 
 /**
  * Payment made - Details panel - Footer.
  */
 export default function PaymentMadeDetailFooter() {
-  const { } = usePaymentMadeDetailContext();
 
   return (
     <div className={clsx(PaymentDrawerCls.detail_panel_footer)}>
       <TotalLines>
         <TotalLine
-          title={'Subtotal'}
+          title={<T id={'payment_made.details.subtotal'} />}
           value={1000}
           className={clsx(PaymentDrawerCls.total_line_subtotal)}
         />
         <TotalLine
-          title={'TOTAL'}
+          title={<T id={'payment_made.details.total'} />}
           value={1000}
           className={clsx(PaymentDrawerCls.total_line_total)}
         />

client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'classnames';
 
-import { TotalLine, TotalLines } from 'components';
+import { T, TotalLine, TotalLines } from 'components';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
 import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
@@ -16,12 +16,12 @@ export default function PaymentReceiveDetailFooter() {
     <div className={clsx(PaymentDrawerCls.detail_panel_footer)}>
       <TotalLines>
         <TotalLine
-          title={'Subtotal'}
+          title={<T id={'payment_receive.details.subtotal'} />}
           value={paymentReceive.amount}
           className={PaymentDrawerCls.total_line_subtotal}
         />
         <TotalLine
-          title={'TOTAL'}
+          title={<T id={'payment_receive.details.total'} />}
           value={paymentReceive.amount}
           className={PaymentDrawerCls.total_line_total}
         />

client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'classnames';
 
-import { TotalLines, TotalLine } from 'components';
+import { T, TotalLines, TotalLine } from 'components';
 
 import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss';
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
@@ -13,22 +13,22 @@ export function ReceiptDetailFooter() {
     <div className={clsx(ReceiptDrawerCls.detail_panel_footer)}>
       <TotalLines>
         <TotalLine
-          title={'Subtotal'}
+          title={<T id={'receipt.details.subtotal'} />}
           value={receipt.amount}
           className={ReceiptDrawerCls.total_line_subtotal}
         />
         <TotalLine
-          title={'TOTAL'}
+          title={<T id={'receipt.details.total'} />}
           value={receipt.amount}
           className={ReceiptDrawerCls.total_line_total}
         />
         <TotalLine
-          title={'Payment made'}
+          title={<T id={'receipt.details.payment_amount'} />}
           value={receipt.amount}
           className={ReceiptDrawerCls.total_line_payment}
         />
         <TotalLine
-          title={'Due amount'}
+          title={<T id={'receipt.details.due_amount'} />}
           value={'0'}
           className={ReceiptDrawerCls.total_line_dueAmount}
         />

client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js

@@ -40,7 +40,7 @@ export default function ReceiptDetailHeader() {
       </DetailsMenu>
 
       <DetailsMenu direction={'horizantal'}>
-      <DetailItem
+        <DetailItem
           label={intl.get('deposit_account')}
           children={receipt.deposit_account?.name}
         />
@@ -48,7 +48,10 @@ export default function ReceiptDetailHeader() {
           label={intl.get('reference')}
           children={defaultTo(receipt.reference_no, '--')}
         />
-        <DetailItem label={'Created at'} children={'2020 Ang 21'} />
+        <DetailItem
+          label={intl.get('receipt.details.created_at')}
+          children={'2020 Ang 21'}
+        />
       </DetailsMenu>
     </div>
   );