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 { T, TotalLines, TotalLine } from 'components';
-
-import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
-
 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>
   );

client/src/lang/ar/index.json

@@ -1155,7 +1155,7 @@
   "valuation": "القيمة",
   "select_transaction": "حدد حساب المعاملة",
   "details": "التفاصيل",
-  "located_landed_cost": "Located Landed Cost",
+  "located_landed_cost": "تكاليف اضافية المحملة",
   "delete_transaction": "مسح العملية",
   "all_items": "كل الاصناف",
   "Specific items": "اصناف محددة",
@@ -1215,14 +1215,41 @@
   "estimate_preview.dialog.title": "معاينة عرض PDF",
   "receipt_preview.dialog.title":"معاينة إيصال PDF",
   "edit_contact": "Edit {name}",
-  "item.sell_description": "Sell description",
+  "item.sell_description": "وصف البيع",
-  "item.purchase_description": "Purchase description",
+  "item.purchase_description": "وصف الشراء",
-  "closed_date": "Closed date",
+  "closed_date": "تاريخ الاغلاق",
-  "payment_made.details.payment_number": "Payment #",
+  "payment_made.details.payment_number": "رقم العملية",
-  "payment_receive.details.payment_number": "Payment #",
+  "payment_made.details.subtotal": "المجموع",
-  "estimate.details.estimate_number": "Estimate #",
+  "payment_made.details.total": "إجمالي",
-  "receipt.details.receipt_number": "Receipt #",
+  "payment_receive.details.payment_number": "رقم العملية",
-  "bill.details.bill_number": "Bill #",
+  "payment_receive.details.total": "إجمالي",
+  "payment_receive.details.subtotal": "المجموع",
+  "estimate.details.estimate_number": "رقم العرض",
+  "estimate.details.subtotal": "المجموع",
+  "estimate.details.total": "إجمالي",
+  "estimate.details.payment_made": "مبلغ المدفوع",
+  "estimate.details.due_amount": "مبلغ المستحق",
+  "estimate.details.note": "ملاحظة",
+  "estimate.details.created_at": "أنشئت في",
+  "receipt.details.receipt_number": "رقم إيصال",
+  "receipt.details.subtotal": "المجموع",
+  "receipt.details.total": "إجمالي",
+  "receipt.details.payment_amount": "مبلغ المدفوع",
+  "receipt.details.due_amount": "مبلغ المستحق",
+  "receipt.details.created_at": "أنشئت في",
+  "bill.details.bill_number": "رقم الفاتورة",
+  "bill.details.created_at": "أنشئت في",
+  "bill.details.total": "إجمالي",
+  "bill.details.subtotal": "المجموع",
+  "bill.details.payment_amount": "مبلغ المدفوع",
+  "bill.details.due_amount": "مبلغ المستحق",
+  "invoice.details.created_at": "أنشئت في",
+  "invoice.details.total": "إجمالي",
+  "invoice.details.subtotal": "المجموع",
+  "invoice.details.due_amount": "مبلغ المستحق",
+  "invoice.details.payment_amount": "مبلغ المدفوع",
+  "expense.details.subtotal": "المجموع",
+  "expense.details.total": "إجمالي",
   "setup.left_side.title": "سجل منشأة جديدة الأن.",
   "setup.left_side.description": "حسابك علي Bigcapital",
   "setup.left_side.footer_help": "نحن هنا للمساعدة!",

client/src/lang/en/index.json

@@ -1190,10 +1190,37 @@
   "item.purchase_description": "Purchase description",
   "closed_date": "Closed date",
   "payment_made.details.payment_number": "Payment #",
+  "payment_made.details.subtotal": "Subtotal",
+  "payment_made.details.total": "TOTAL",
   "payment_receive.details.payment_number": "Payment #",
+  "payment_receive.details.total": "TOTAL",
+  "payment_receive.details.subtotal": "Subtotal",
   "estimate.details.estimate_number": "Estimate #",
+  "estimate.details.subtotal": "Subtotal",
+  "estimate.details.total": "TOTAL",
+  "estimate.details.payment_made": "Payment made",
+  "estimate.details.due_amount": "Due amount",
+  "estimate.details.note": "Note",
+  "estimate.details.created_at": "Created at",
   "receipt.details.receipt_number": "Receipt #",
+  "receipt.details.subtotal": "Subtotal",
+  "receipt.details.total": "TOTAL",
+  "receipt.details.payment_amount": "Payment amount",
+  "receipt.details.due_amount": "Due amount",
+  "receipt.details.created_at": "Created at",
+  "invoice.details.created_at": "Created at",
+  "invoice.details.total": "TOTAL",
+  "invoice.details.subtotal": "Subtotal",
+  "invoice.details.due_amount": "Due amount",
+  "invoice.details.payment_amount": "Payment amount",
   "bill.details.bill_number": "Bill #",
+  "bill.details.created_at": "Created at",
+  "bill.details.total": "TOTAL",
+  "bill.details.subtotal": "Subtotal",
+  "bill.details.payment_amount": "Payment amount",
+  "bill.details.due_amount": "Due amount",
+  "expense.details.subtotal": "Subtotal",
+  "expense.details.total": "Total",
   "setup.left_side.title": "Register a New Organization now!.",
   "setup.left_side.description": "You have a Bigcapital account",
   "setup.left_side.footer_help": "We’re Here to Help!",