feat: add terms and conditions to invoice details.

src/components/CommercialDoc/index.js

@@ -19,3 +19,7 @@ export const CommercialDocEntriesTable = styled(DataTable)`
     border-bottom: 1px solid #d2dce2;
   }
 `;
+
+export const CommercialDocFooter = styled.div`
+  margin-top: 25px;
+`

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js

@@ -1,52 +1,33 @@
 import React from 'react';
-import styled from 'styled-components';
 
-import {
+import { CommercialDocFooter, If, DetailsMenu, DetailItem } from 'components';
-  T,
-  TotalLines,
-  FormatNumber,
-  TotalLine,
-  TotalLineBorderStyle,
-  TotalLineTextStyle,
-} from 'components';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
 /**
  * Invoice details footer.
+ * @returns {React.JSX}
  */
 export function InvoiceDetailFooter() {
   const { invoice } = useInvoiceDetailDrawerContext();
 
+  if (!invoice.terms_conditions && !invoice.invoice_message) {
+    return null;
+  }
   return (
-    <InvoiceDetailsFooterRoot>
+    <CommercialDocFooter>
-      <InvoiceTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
-        <TotalLine
+        <If condition={invoice.terms_conditions}>
-          title={<T id={'invoice.details.subtotal'} />}
+          <DetailItem label={'Terms & Conditions'}>
-          value={<FormatNumber value={invoice.balance} />}
+            {invoice.terms_conditions}
-          borderStyle={TotalLineBorderStyle.SingleDark}
+          </DetailItem>
-        />
+        </If>
-        <TotalLine
+
-          title={<T id={'invoice.details.total'} />}
+        <If condition={invoice.invoice_message}>
-          value={invoice.formatted_amount}
+          <DetailItem label={'Invoice Message'}>
-          borderStyle={TotalLineBorderStyle.DoubleDark}
+            {invoice.invoice_message}
-          textStyle={TotalLineTextStyle.Bold}
+          </DetailItem>
-        />
+        </If>
-        <TotalLine
+      </DetailsMenu>
-          title={<T id={'invoice.details.payment_amount'} />}
+    </CommercialDocFooter>
-          value={invoice.formatted_payment_amount}
-        />
-        <TotalLine
-          title={<T id={'invoice.details.due_amount'} />}
-          value={invoice.formatted_due_amount}
-          textStyle={TotalLineTextStyle.Bold}
-        />
-      </InvoiceTotalLines>
-    </InvoiceDetailsFooterRoot>
   );
 }
-
-const InvoiceDetailsFooterRoot = styled.div``;
-
-const InvoiceTotalLines = styled(TotalLines)`
-  margin-left: auto;
-`;

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js

@@ -4,6 +4,7 @@ import { CommercialDocBox } from 'components';
 
 import InvoiceDetailHeader from './InvoiceDetailHeader';
 import InvoiceDetailTable from './InvoiceDetailTable';
+import { InvoiceDetailTableFooter } from './InvoiceDetailTableFooter';
 import { InvoiceDetailFooter } from './InvoiceDetailFooter';
 
 /**
@@ -14,6 +15,7 @@ export default function InvoiceDetailTab() {
     <CommercialDocBox>
       <InvoiceDetailHeader />
       <InvoiceDetailTable />
+      <InvoiceDetailTableFooter />
       <InvoiceDetailFooter />
     </CommercialDocBox>
   );

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTableFooter.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  FormatNumber,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
+
+/**
+ * Invoice details footer.
+ */
+export function InvoiceDetailTableFooter() {
+  const { invoice } = useInvoiceDetailDrawerContext();
+
+  return (
+    <InvoiceDetailsFooterRoot>
+      <InvoiceTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'invoice.details.subtotal'} />}
+          value={<FormatNumber value={invoice.balance} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'invoice.details.total'} />}
+          value={invoice.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+        <TotalLine
+          title={<T id={'invoice.details.payment_amount'} />}
+          value={invoice.formatted_payment_amount}
+        />
+        <TotalLine
+          title={<T id={'invoice.details.due_amount'} />}
+          value={invoice.formatted_due_amount}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </InvoiceTotalLines>
+    </InvoiceDetailsFooterRoot>
+  );
+}
+
+const InvoiceDetailsFooterRoot = styled.div``;
+
+const InvoiceTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;