feat(InvoiceFormFooter): add invoice form footer the total lines.

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

@@ -1,57 +1,30 @@
 import React from 'react';
-import { FastField } from 'formik';
 import classNames from 'classnames';
-import { FormGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import { CLASSES } from 'common/classes';
-import { Row, Col, Postbox } from 'components';
-import Dragzone from 'components/Dragzone';
+import styled from 'styled-components';
 
-import { inputIntent } from 'utils';
+import { CLASSES } from 'common/classes';
+import { Paper, Row, Col } from 'components';
+import { InvoiceFormFooterLeft } from './InvoiceFormFooterLeft';
+import { InvoiceFormFooterRight } from './InvoiceFormFooterRight';
 
 export default function InvoiceFormFooter() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox title={<T id={'invoice_details'} />} defaultOpen={false}>
+      <InvoiceFooterPaper>
         <Row>
           <Col md={8}>
-            {/* --------- Invoice message --------- */}
-            <FastField name={'invoice_message'}>
-              {({ field, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'invoice_message'} />}
-                  className={'form-group--invoice_message'}
-                  intent={inputIntent({ error, touched })}
-                >
-                  <TextArea growVertically={true} {...field} />
-                </FormGroup>
-              )}
-            </FastField>
-
-            {/* --------- Terms and conditions --------- */}
-            <FastField name={'terms_conditions'}>
-              {({ field, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'terms_conditions'} />}
-                  className={'form-group--terms_conditions'}
-                  intent={inputIntent({ error, touched })}
-                >
-                  <TextArea growVertically={true} {...field} />
-                </FormGroup>
-              )}
-            </FastField>
+            <InvoiceFormFooterLeft />
           </Col>
 
           <Col md={4}>
-            <Dragzone
-              initialFiles={[]}
-              // onDrop={handleDropFiles}
-              // onDeleteFile={handleDeleteFile}
-              hint={<T id={'attachments_maximum'} />}
-            />
+            <InvoiceFormFooterRight />
           </Col>
         </Row>
-      </Postbox>
+      </InvoiceFooterPaper>
     </div>
   );
 }
+
+const InvoiceFooterPaper = styled(Paper)`
+  padding: 20px;
+`;

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
+
+export function InvoiceFormFooterLeft() {
+  return (
+    <React.Fragment>
+      {/* --------- Invoice message --------- */}
+      <InvoiceMsgFormGroup
+        name={'invoice_message'}
+        label={<T id={'invoice_message'} />}
+        hintText={'Will be displayed on the invoice'}
+      >
+        <FEditableText
+          name={'invoice_message'}
+          placeholder={'Thanks for your business and have a great day!'}
+        />
+      </InvoiceMsgFormGroup>
+
+      {/* --------- Terms and conditions --------- */}
+      <TermsConditsFormGroup
+        label={<T id={'terms_conditions'} />}
+        name={'terms_conditions'}
+      >
+        <FEditableText
+          name={'terms_conditions'}
+          placeholder={
+            'Enter the terms and conditions of your business to be displayed in your transaction'
+          }
+        />
+      </TermsConditsFormGroup>
+    </React.Fragment>
+  );
+}
+
+const InvoiceMsgFormGroup = styled(FFormGroup)`
+  &.bp3-form-group {
+    margin-bottom: 40px;
+
+    .bp3-label {
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .bp3-form-content {
+      margin-left: 10px;
+    }
+  }
+`;
+
+const TermsConditsFormGroup = styled(FFormGroup)`
+  &.bp3-form-group {
+
+    .bp3-label {
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .bp3-form-content {
+      margin-left: 10px;
+    }
+  }
+`;

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+import { useInvoiceTotal } from './utils';
+
+export function InvoiceFormFooterRight() {
+  // Calculate the total due amount of invoice entries.
+  const totalInvoice = useInvoiceTotal();
+
+  return (
+    <InvoiceTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+      <TotalLine
+        title={<T id={'invoice.details.subtotal'} />}
+        value={'$5000.00'}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'invoice.details.total'} />}
+        value={'$5000.00'}
+        borderStyle={TotalLineBorderStyle.SingleDark}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+      <TotalLine
+        title={<T id={'invoice.details.payment_amount'} />}
+        value={'$0.00'}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'invoice.details.due_amount'} />}
+        value={'$5000.00'}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+    </InvoiceTotalLines>
+  );
+}
+
+const InvoiceTotalLines = styled(TotalLines)`
+  width: 100%;
+  color: #555555;
+`;