feat: add payment receive & bill detail footer.

src/containers/Drawers/BillDrawer/BillDetailFooter.js

@@ -1,51 +1,27 @@
 import React from 'react';
-import styled from 'styled-components';
-
 import {
-  TotalLineBorderStyle,
+  CommercialDocFooter,
-  TotalLineTextStyle,
-  FormatNumber,
   T,
-  TotalLines,
+  If,
-  TotalLine,
+  DetailsMenu,
-} from '../../../components';
+  DetailItem,
+} from 'components';
+
 import { useBillDrawerContext } from './BillDrawerProvider';
 
 /**
- * Bill read-only details footer.
+ * Bill detail footer.
+ * @returns {React.JSX}
  */
-export function BillDetailFooter() {
+export default function BillDetailFooter() {
   const { bill } = useBillDrawerContext();
-
   return (
-    <BillDetailsFooterRoot>
+    <CommercialDocFooter>
-      <BillTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
-        <TotalLine
+        <If condition={bill.note}>
-          title={<T id={'bill.details.subtotal'} />}
+          <DetailItem label={<T id={'note'} />}>{bill.note}</DetailItem>
-          value={<FormatNumber value={bill.amont} />}
+        </If>
-          borderStyle={TotalLineBorderStyle.SingleDark}
+      </DetailsMenu>
-        />
+    </CommercialDocFooter>
-        <TotalLine
-          title={<T id={'bill.details.total'} />}
-          value={bill.formatted_amount}
-          borderStyle={TotalLineBorderStyle.DoubleDark}
-          textStyle={TotalLineTextStyle.Bold}
-        />
-        <TotalLine
-          title={<T id={'bill.details.payment_amount'} />}
-          value={bill.formatted_payment_amount}
-        />
-        <TotalLine
-          title={<T id={'bill.details.due_amount'} />}
-          value={bill.formatted_due_amount}
-        />
-      </BillTotalLines>
-    </BillDetailsFooterRoot>
   );
 }
-
-export const BillDetailsFooterRoot = styled.div``;
-
-export const BillTotalLines = styled(TotalLines)`
-  margin-left: auto;
-`;

src/containers/Drawers/BillDrawer/BillDetailTab.js

@@ -4,8 +4,8 @@ import { CommercialDocBox } from 'components';
 
 import BillDetailHeader from './BillDetailHeader';
 import BillDetailTable from './BillDetailTable';
-import { BillDetailFooter } from './BillDetailFooter';
+import { BillDetailTableFooter } from './BillDetailTableFooter';
-
+import BillDetailFooter from './BillDetailFooter';
 
 /**
  * Bill detail panel tab.
@@ -15,6 +15,7 @@ export default function BillDetailTab() {
     <CommercialDocBox>
       <BillDetailHeader />
       <BillDetailTable />
+      <BillDetailTableFooter />
       <BillDetailFooter />
     </CommercialDocBox>
   );

src/containers/Drawers/BillDrawer/BillDetailTableFooter.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+  FormatNumber,
+  T,
+  TotalLines,
+  TotalLine,
+} from '../../../components';
+import { useBillDrawerContext } from './BillDrawerProvider';
+
+/**
+ * Bill read-only details table footer.
+ */
+export function BillDetailTableFooter() {
+  const { bill } = useBillDrawerContext();
+
+  return (
+    <BillDetailsFooterRoot>
+      <BillTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'bill.details.subtotal'} />}
+          value={<FormatNumber value={bill.amont} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'bill.details.total'} />}
+          value={bill.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+        <TotalLine
+          title={<T id={'bill.details.payment_amount'} />}
+          value={bill.formatted_payment_amount}
+        />
+        <TotalLine
+          title={<T id={'bill.details.due_amount'} />}
+          value={bill.formatted_due_amount}
+        />
+      </BillTotalLines>
+    </BillDetailsFooterRoot>
+  );
+}
+
+export const BillDetailsFooterRoot = styled.div``;
+
+export const BillTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js

@@ -1,13 +1,11 @@
 import React from 'react';
-import styled from 'styled-components';
 
 import {
-  FormatNumber,
+  CommercialDocFooter,
-  TotalLineTextStyle,
-  TotalLineBorderStyle,
   T,
-  TotalLine,
+  If,
-  TotalLines,
+  DetailsMenu,
+  DetailItem,
 } from 'components';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
@@ -19,28 +17,14 @@ export default function PaymentReceiveDetailFooter() {
   const { paymentReceive } = usePaymentReceiveDetailContext();
   
   return (
-    <PaymentReceiveDetailsFooterRoot>
+    <CommercialDocFooter>
-      <PaymentReceiveTotalLines
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
-        labelColWidth={'180px'}
+        <If condition={paymentReceive.statement}>
-        amountColWidth={'180px'}
+          <DetailItem label={<T id={'payment_receive.details.statement'} />}>
-      >
+            {paymentReceive.statement}
-        <TotalLine
+          </DetailItem>
-          title={<T id={'payment_receive.details.subtotal'} />}
+        </If>
-          value={<FormatNumber value={paymentReceive.amount} />}
+      </DetailsMenu>
-        />
+    </CommercialDocFooter>
-        <TotalLine
-          title={<T id={'payment_receive.details.total'} />}
-          value={paymentReceive.formatted_amount}
-          borderStyle={TotalLineBorderStyle.DoubleDark}
-          textStyle={TotalLineTextStyle.Bold}
-        />
-      </PaymentReceiveTotalLines>
-    </PaymentReceiveDetailsFooterRoot>
   );
 }
-
-export const PaymentReceiveDetailsFooterRoot = styled.div``;
-
-export const PaymentReceiveTotalLines = styled(TotalLines)`
-  margin-left: auto;
-`;

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js

@@ -5,6 +5,7 @@ import { CommercialDocBox } from 'components';
 
 import PaymentReceiveDetailHeader from './PaymentReceiveDetailHeader';
 import PaymentReceiveDetailTable from './PaymentReceiveDetailTable';
+import PaymentReceiveDetailTableFooter from './PaymentReceiveDetailTableFooter';
 import PaymentReceiveDetailFooter from './PaymentReceiveDetailFooter';
 
 /**
@@ -17,6 +18,7 @@ export default function PaymentReceiveDetailTab() {
       <CommercialDocBox>
         <PaymentReceiveDetailHeader />
         <PaymentReceiveDetailTable />
+        <PaymentReceiveDetailTableFooter />
         <PaymentReceiveDetailFooter />
       </CommercialDocBox>
     </PaymentReceiveDetailsTabPanelRoot>

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTableFooter.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  FormatNumber,
+  TotalLineTextStyle,
+  TotalLineBorderStyle,
+  T,
+  TotalLine,
+  TotalLines,
+} from 'components';
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+/**
+ * Payment receive detail table footer.
+ * @returns {React.JSX}
+ */
+export default function PaymentReceiveDetailTableFooter() {
+  const { paymentReceive } = usePaymentReceiveDetailContext();
+
+  return (
+    <PaymentReceiveDetailsFooterRoot>
+      <PaymentReceiveTotalLines
+        labelColWidth={'180px'}
+        amountColWidth={'180px'}
+      >
+        <TotalLine
+          title={<T id={'payment_receive.details.subtotal'} />}
+          value={<FormatNumber value={paymentReceive.amount} />}
+        />
+        <TotalLine
+          title={<T id={'payment_receive.details.total'} />}
+          value={paymentReceive.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </PaymentReceiveTotalLines>
+    </PaymentReceiveDetailsFooterRoot>
+  );
+}
+
+export const PaymentReceiveDetailsFooterRoot = styled.div``;
+
+export const PaymentReceiveTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

src/lang/ar/index.json

@@ -1659,7 +1659,8 @@
   "transactions": "معاملات ",
   "item.drawer_transactions_by": "معاملات حسب :",
   "item.drawer_quantity_sold": "الكمية المباعة",
-  "journal_entries.amount_displayed_base_currency":"يتم عرض المبلغ بالعملة الأساسية الخاصة بك "
+  "journal_entries.amount_displayed_base_currency":"يتم عرض المبلغ بالعملة الأساسية الخاصة بك ",
+  "inventory_adjustment.column.product":"المنتج"
 
 }
 

src/lang/en/index.json

@@ -1195,6 +1195,7 @@
   "payment_receive.details.payment_number": "Payment #",
   "payment_receive.details.total": "TOTAL",
   "payment_receive.details.subtotal": "Subtotal",
+  "payment_receive.details.statement": "Statement",
   "estimate.details.estimate_number": "Estimate #",
   "estimate.details.subtotal": "Subtotal",
   "estimate.details.total": "TOTAL",
@@ -1202,12 +1203,15 @@
   "estimate.details.due_amount": "Due amount",
   "estimate.details.note": "Note",
   "estimate.details.created_at": "Created at",
+  "estimate.details.terms_conditions": "Terms & Conditions",
   "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",
+  "receipt.details.receipt_message": "Receipt Message",
+  "receipt.details.statement": "Statement",
   "invoice.details.created_at": "Created at",
   "invoice.details.total": "TOTAL",
   "invoice.details.subtotal": "Subtotal",
@@ -1523,6 +1527,7 @@
   "credit_note.drawer.label_subtotal": "Subtotal",
   "credit_note.drawer.label_refund_transactions": "Refund Transactions",
   "credit_note.drawer.label_invoices_reconciled": "Invoices Reconciled",
+  "credit_note.drawer.terms_conditions": "Terms Conditions",
  
   "sidebar_vendor_credits": "Vendor Credits",
   "vendor_credits.lable_vendor_credit_list": "Vendor Credits List",
@@ -1655,5 +1660,8 @@
   "item.drawer_transactions_by": "Transactions by:",
   "item.drawer_quantity_sold": "Quantity Sold",
   "role_name": "Role name",
-  "journal_entries.amount_displayed_base_currency":"Amount is displayed in your base currency"
+  "journal_entries.amount_displayed_base_currency":"Amount is displayed in your base currency",
+  "inventory_adjustment.column.product":"Product",
+  "convert_to_credit_note":"Convert to Credit Note",
+  "convert_to_vendor_credit":"Convert to Vendor Credit"
 }