From acdec703851751159764217b4bd268a316423ac3 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 20 Mar 2022 11:20:13 +0200
Subject: [PATCH] feat(S&P): Form Footer.

---
 .../Bills/BillForm/BillFormFooter.js          | 38 ++++--------
 .../Bills/BillForm/BillFormFooterLeft.js      | 31 ++++++++++
 .../Bills/BillForm/BillFormFooterRight.js     | 43 +++++++++++++
 .../VendorCreditNoteFormFooter.js             | 39 ++++++------
 .../VendorCreditNoteFormFooterLeft.js         | 31 ++++++++++
 .../VendorCreditNoteFormFooterRight.js        | 35 +++++++++++
 .../VendorCreditNoteFormHeaderFields.js       |  1 -
 .../PaymentForm/PaymentMadeFooter.js          | 33 +++++-----
 .../PaymentForm/PaymentMadeFormFooterLeft.js  | 34 +++++++++++
 .../PaymentForm/PaymentMadeFormFooterRight.js | 32 ++++++++++
 .../PaymentMadeFormHeaderFields.js            |  1 -
 .../CreditNoteForm/CreditNoteFormFooter.js    | 51 +++++-----------
 .../CreditNoteFormFooterLeft.js               | 59 ++++++++++++++++++
 .../CreditNoteFormFooterRight.js              | 32 ++++++++++
 .../CreditNoteFormHeaderFields.js             |  1 -
 .../EstimateForm/EstimateFormFooter.js        | 57 +++++-------------
 .../EstimateForm/EstimateFormFooterLeft.js    | 60 +++++++++++++++++++
 .../EstimateForm/EstimateFormFooterRight.js   | 32 ++++++++++
 .../EstimateForm/EstimateFormHeaderFields.js  |  2 +-
 .../PaymentReceiveFormFooter.js               | 35 ++++++-----
 .../PaymentReceiveFormFootetLeft.js           | 35 +++++++++++
 .../PaymentReceiveFormFootetRight.js          | 32 ++++++++++
 .../PaymentReceiveHeaderFields.js             |  1 -
 .../Receipts/ReceiptForm/ReceiptFormFooter.js | 52 ++++------------
 .../ReceiptForm/ReceiptFormFooterLeft.js      | 57 ++++++++++++++++++
 .../ReceiptForm/ReceiptFormFooterRight.js     | 43 +++++++++++++
 .../ReceiptForm/ReceiptFormHeaderFields.js    |  2 +-
 27 files changed, 665 insertions(+), 204 deletions(-)
 create mode 100644 src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.js
 create mode 100644 src/containers/Purchases/Bills/BillForm/BillFormFooterRight.js
 create mode 100644 src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.js
 create mode 100644 src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.js
 create mode 100644 src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.js
 create mode 100644 src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterRight.js
 create mode 100644 src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.js
 create mode 100644 src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterRight.js
 create mode 100644 src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.js
 create mode 100644 src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.js
 create mode 100644 src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.js
 create mode 100644 src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetRight.js
 create mode 100644 src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.js
 create mode 100644 src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.js

diff --git a/src/containers/Purchases/Bills/BillForm/BillFormFooter.js b/src/containers/Purchases/Bills/BillForm/BillFormFooter.js
index 3f0259b0c..de86f2f5f 100644
--- a/src/containers/Purchases/Bills/BillForm/BillFormFooter.js
+++ b/src/containers/Purchases/Bills/BillForm/BillFormFooter.js
@@ -1,43 +1,31 @@
 import React from 'react';
-import { FormGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import { FastField } from 'formik';
 import classNames from 'classnames';
-import { Postbox, Row, Col } from 'components';
+import styled from 'styled-components';
+
 import { CLASSES } from 'common/classes';
-import Dragzone from 'components/Dragzone';
-import { inputIntent } from 'utils';
+import { Paper, Row, Col } from 'components';
+import { BillFormFooterLeft } from './BillFormFooterLeft';
+import { BillFormFooterRight } from './BillFormFooterRight';
 
 // Bill form floating actions.
 export default function BillFormFooter() {
   return (
     <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox title={<T id={'bill_details'} />} defaultOpen={false}>
+      <BillFooterPaper>
         <Row>
           <Col md={8}>
-            <FastField name={'note'}>
-              {({ field, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'note'} />}
-                  className={'form-group--note'}
-                  intent={inputIntent({ error, touched })}
-                >
-                  <TextArea growVertically={true} {...field} />
-                </FormGroup>
-              )}
-            </FastField>
+            <BillFormFooterLeft />
           </Col>
 
           <Col md={4}>
-            <Dragzone
-              initialFiles={[]}
-              // onDrop={onDropFiles}
-              // onDeleteFile={onDropFiles}
-              hint={<T id={'attachments_maximum'} />}
-            />
+            <BillFormFooterRight />
           </Col>
         </Row>
-      </Postbox>
+      </BillFooterPaper>
     </div>
   );
 }
+
+const BillFooterPaper = styled(Paper)`
+  padding: 20px;
+`;
diff --git a/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.js b/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.js
new file mode 100644
index 000000000..fb827ead2
--- /dev/null
+++ b/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
+
+export function BillFormFooterLeft() {
+  return (
+    <React.Fragment>
+      {/* --------- note --------- */}
+      <TermsConditsFormGroup label={<T id={'note'} />} name={'note'}>
+        <FEditableText
+          name={'note'}
+          placeholder={
+            'Enter the terms and conditions of your business to be displayed in your transaction'
+          }
+        />
+      </TermsConditsFormGroup>
+    </React.Fragment>
+  );
+}
+
+const TermsConditsFormGroup = styled(FFormGroup)`
+  &.bp3-form-group {
+    .bp3-label {
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .bp3-form-content {
+      margin-left: 10px;
+    }
+  }
+`;
diff --git a/src/containers/Purchases/Bills/BillForm/BillFormFooterRight.js b/src/containers/Purchases/Bills/BillForm/BillFormFooterRight.js
new file mode 100644
index 000000000..f5f5b385e
--- /dev/null
+++ b/src/containers/Purchases/Bills/BillForm/BillFormFooterRight.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+
+export function BillFormFooterRight() {
+  return (
+    <BillTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+      <TotalLine
+        title={<T id={'bill.details.subtotal'} />}
+        value={'$5000.00'}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'bill.details.total'} />}
+        value={'$5000.00'}
+        borderStyle={TotalLineBorderStyle.SingleDark}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+      <TotalLine
+        title={<T id={'bill.details.payment_amount'} />}
+        value={'$0.00'}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'bill.details.due_amount'} />}
+        value={'$5000.00'}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+    </BillTotalLines>
+  );
+}
+
+const BillTotalLines = styled(TotalLines)`
+  width: 100%;
+  color: #555555;
+`;
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.js
index 88a99e574..eeebd913b 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import { FastField } from 'formik';
-import { FormGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import { CLASSES } from 'common/classes';
-import { Row, Col, Postbox } from 'components';
-import { inputIntent } from 'utils';
 import classNames from 'classnames';
+import styled from 'styled-components';
+
+import { CLASSES } from 'common/classes';
+import { Row, Col, Paper } from 'components';
+import { VendorCreditNoteFormFooterLeft } from './VendorCreditNoteFormFooterLeft';
+import { VendorCreditNoteFormFooterRight } from './VendorCreditNoteFormFooterRight';
 
 /**
  * Vendor Credit note form footer.
@@ -13,26 +13,21 @@ import classNames from 'classnames';
 export default function VendorCreditNoteFormFooter() {
   return (
     <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox
-        title={<T id={'vendor_credits_note.label_credit_note_details'} />}
-        defaultOpen={false}
-      >
+      <VendorCreditNoteFooterPaper>
         <Row>
           <Col md={8}>
-            <FastField name={'note'}>
-              {({ field, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'note'} />}
-                  className={'form-group--note'}
-                  intent={inputIntent({ error, touched })}
-                >
-                  <TextArea growVertically={true} {...field} />
-                </FormGroup>
-              )}
-            </FastField>
+            <VendorCreditNoteFormFooterLeft />
+          </Col>
+
+          <Col md={4}>
+            <VendorCreditNoteFormFooterRight />
           </Col>
         </Row>
-      </Postbox>
+      </VendorCreditNoteFooterPaper>
     </div>
   );
 }
+
+const VendorCreditNoteFooterPaper = styled(Paper)`
+  padding: 20px;
+`;
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.js
new file mode 100644
index 000000000..835900052
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
+
+export function VendorCreditNoteFormFooterLeft() {
+  return (
+    <React.Fragment>
+      {/* --------- Terms and conditions --------- */}
+      <TermsConditsFormGroup label={<T id={'note'} />} name={'note'}>
+        <FEditableText
+          name={'note'}
+          placeholder={
+            'Enter the terms and conditions of your business to be displayed in your transaction'
+          }
+        />
+      </TermsConditsFormGroup>
+    </React.Fragment>
+  );
+}
+
+const TermsConditsFormGroup = styled(FFormGroup)`
+  &.bp3-form-group {
+    .bp3-label {
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .bp3-form-content {
+      margin-left: 10px;
+    }
+  }
+`;
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.js
new file mode 100644
index 000000000..f85aa8acd
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+
+export function VendorCreditNoteFormFooterRight() {
+  return (
+    <VendorCreditNoteTotalLines
+      labelColWidth={'180px'}
+      amountColWidth={'180px'}
+    >
+      <TotalLine
+        title={<T id={'credit_note.drawer.label_subtotal'} />}
+        value={'$5000.00'}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'credit_note.drawer.label_total'} />}
+        value={'$5000.00'}
+        // borderStyle={TotalLineBorderStyle.SingleDark}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+    </VendorCreditNoteTotalLines>
+  );
+}
+
+const VendorCreditNoteTotalLines = styled(TotalLines)`
+  width: 100%;
+  color: #555555;
+`;
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js
index bfe2477e6..3b1b74a94 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js
@@ -113,7 +113,6 @@ function VendorCreditNoteFormHeaderFields({
                 popoverFill={true}
                 allowCreate={true}
               />
-              <VendorCreditNoteFormCurrencyTag />
             </ControlVendorGroup>
           </FormGroup>
         )}
diff --git a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFooter.js b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFooter.js
index 98dc4522a..c95441891 100644
--- a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFooter.js
+++ b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFooter.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import classNames from 'classnames';
-import { FormGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import { FastField } from 'formik';
-import { Postbox, Row, Col } from 'components';
+import styled from 'styled-components';
+
 import { CLASSES } from 'common/classes';
+import { Row, Col, Paper } from 'components';
+import { PaymentMadeFormFooterLeft } from './PaymentMadeFormFooterLeft';
+import { PaymentMadeFormFooterRight } from './PaymentMadeFormFooterRight';
 
 /**
  * Payment made form footer.
@@ -12,23 +13,21 @@ import { CLASSES } from 'common/classes';
 export default function PaymentMadeFooter() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox title={<T id={'payment_made_details'} />} defaultOpen={false}>
+      <PaymentReceiveFooterPaper>
         <Row>
           <Col md={8}>
-            {/* --------- Statement --------- */}
-            <FastField name={'statement'}>
-              {({ form, field, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'statement'} />}
-                  className={'form-group--statement'}
-                >
-                  <TextArea growVertically={true} {...field} />
-                </FormGroup>
-              )}
-            </FastField>
+            <PaymentMadeFormFooterLeft />
+          </Col>
+
+          <Col md={4}>
+            <PaymentMadeFormFooterRight />
           </Col>
         </Row>
-      </Postbox>
+      </PaymentReceiveFooterPaper>
     </div>
   );
 }
+
+const PaymentReceiveFooterPaper = styled(Paper)`
+  padding: 20px;
+`;
diff --git a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.js b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.js
new file mode 100644
index 000000000..bd872e7ca
--- /dev/null
+++ b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
+
+export function PaymentMadeFormFooterLeft() {
+  return (
+    <React.Fragment>
+      {/* --------- Statement--------- */}
+      <StatementFormGroup
+        name={'statement'}
+        label={<T id={'statement'} />}
+        hintText={'Will be displayed on the Payment'}
+      >
+        <FEditableText
+          name={'statement'}
+          placeholder={'Thanks for your business and have a great day!'}
+        />
+      </StatementFormGroup>
+    </React.Fragment>
+  );
+}
+const StatementFormGroup = styled(FFormGroup)`
+  &.bp3-form-group {
+    margin-bottom: 40px;
+
+    .bp3-label {
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .bp3-form-content {
+      margin-left: 10px;
+    }
+  }
+`;
diff --git a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterRight.js b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterRight.js
new file mode 100644
index 000000000..8a6e1b533
--- /dev/null
+++ b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterRight.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+
+export function PaymentMadeFormFooterRight() {
+  return (
+    <PaymentMadeTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+      <TotalLine
+        title={<T id={'estimate.details.subtotal'} />}
+        value={'$5000.00'}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'estimate.details.total'} />}
+        value={'$5000.00'}
+        // borderStyle={TotalLineBorderStyle.SingleDark}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+    </PaymentMadeTotalLines>
+  );
+}
+
+const PaymentMadeTotalLines = styled(TotalLines)`
+  width: 100%;
+  color: #555555;
+`;
diff --git a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
index b190805c3..03074306f 100644
--- a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
+++ b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
@@ -118,7 +118,6 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
                 popoverFill={true}
                 allowCreate={true}
               />
-              <PaymentMadeFormCurrencyTag />
             </ControlVendorGroup>
           </FormGroup>
         )}
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.js
index 1bf8cd89c..5d72e918b 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import { FastField } from 'formik';
-import { FormGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import { CLASSES } from 'common/classes';
-import { Row, Col, Postbox } from 'components';
-import { inputIntent } from 'utils';
 import classNames from 'classnames';
+import styled from 'styled-components';
+
+import { CLASSES } from 'common/classes';
+import { Row, Col, Paper } from 'components';
+import { CreditNoteFormFooterLeft } from './CreditNoteFormFooterLeft';
+import { CreditNoteFormFooterRight } from './CreditNoteFormFooterRight';
 
 /**
  * Credit note form footer.
@@ -13,39 +13,20 @@ import classNames from 'classnames';
 export default function CreditNoteFormFooter() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox
-        title={<T id={'credit_note.label_credit_note_details'} />}
-        defaultOpen={false}
-      >
+      <CreditNoteFooterPaper>
         <Row>
           <Col md={8}>
-            {/* --------- Customer notes --------- */}
-            <FastField name={'note'}>
-              {({ field, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'credit_note.label_customer_note'} />}
-                  className={'form-group--note'}
-                  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>
+            <CreditNoteFormFooterLeft />
+          </Col>
+
+          <Col md={4}>
+            <CreditNoteFormFooterRight />
           </Col>
         </Row>
-      </Postbox>
+      </CreditNoteFooterPaper>
     </div>
   );
 }
+const CreditNoteFooterPaper = styled(Paper)`
+  padding: 20px;
+`;
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.js
new file mode 100644
index 000000000..ea7849202
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
+
+export function CreditNoteFormFooterLeft() {
+  return (
+    <React.Fragment>
+      {/* --------- Customer notes --------- */}
+      <CreditNoteMsgFormGroup
+        name={'note'}
+        label={<T id={'credit_note.label_customer_note'} />}
+        hintText={'Will be displayed on the invoice'}
+      >
+        <FEditableText
+          name={'note'}
+          placeholder={'Thanks for your business and have a great day!'}
+        />
+      </CreditNoteMsgFormGroup>
+      {/* --------- 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 CreditNoteMsgFormGroup = 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;
+    }
+  }
+`;
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterRight.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterRight.js
new file mode 100644
index 000000000..16c702767
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterRight.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+
+export function CreditNoteFormFooterRight() {
+  return (
+    <CreditNoteTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+      <TotalLine
+        title={<T id={'credit_note.drawer.label_subtotal'} />}
+        value={'$5000.00'}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'credit_note.drawer.label_total'} />}
+        value={'$5000.00'}
+        // borderStyle={TotalLineBorderStyle.SingleDark}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+    </CreditNoteTotalLines>
+  );
+}
+
+const CreditNoteTotalLines = styled(TotalLines)`
+  width: 100%;
+  color: #555555;
+`;
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js
index a118abfb7..ee8a9f086 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js
@@ -113,7 +113,6 @@ function CreditNoteFormHeaderFields({
                 popoverFill={true}
                 allowCreate={true}
               />
-              <CreditNotetFormCurrencyTag />
             </ControlCustomerGroup>
           </FormGroup>
         )}
diff --git a/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooter.js b/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooter.js
index f8c290f3b..9093523cf 100644
--- a/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooter.js
+++ b/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooter.js
@@ -1,60 +1,33 @@
 import React from 'react';
-import { FormGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import { FastField } from 'formik';
 import classNames from 'classnames';
-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 { Row, Col, Paper } from 'components';
+import { EstimateFormFooterLeft } from './EstimateFormFooterLeft';
+import { EstimateFormFooterRight } from './EstimateFormFooterRight';
 
 /**
  * Estimate form footer.
  */
-export default function EstiamteFormFooter({}) {
+export default function EstiamteFormFooter() {
   return (
-    <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox title={<T id={'estimate_details'} />} defaultOpen={false}>
+    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+      <EstimateFooterPaper>
         <Row>
           <Col md={8}>
-            {/* --------- Customer Note --------- */}
-            <FastField name={'note'}>
-              {({ form, field, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'customer_note'} />}
-                  className={'form-group--customer_note'}
-                  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>
+            <EstimateFormFooterLeft />
           </Col>
 
           <Col md={4}>
-            <Dragzone
-              initialFiles={[]}
-              // onDrop={handleDropFiles}
-              // onDeleteFile={handleDeleteFile}
-              hint={<T id={'attachments_maximum'} />}
-            />
+            <EstimateFormFooterRight />
           </Col>
         </Row>
-      </Postbox>
+      </EstimateFooterPaper>
     </div>
   );
 }
+
+const EstimateFooterPaper = styled(Paper)`
+  padding: 20px;
+`;
diff --git a/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.js b/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.js
new file mode 100644
index 000000000..bc4a4e047
--- /dev/null
+++ b/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
+
+export function EstimateFormFooterLeft() {
+  return (
+    <React.Fragment>
+      {/* --------- Customer Note --------- */}
+      <EstimateMsgFormGroup
+        name={'note'}
+        label={<T id={'customer_note'} />}
+        hintText={'Will be displayed on the invoice'}
+      >
+        <FEditableText
+          name={'note'}
+          placeholder={'Thanks for your business and have a great day!'}
+        />
+      </EstimateMsgFormGroup>
+
+      {/* --------- 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 EstimateMsgFormGroup = 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;
+    }
+  }
+`;
diff --git a/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.js b/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.js
new file mode 100644
index 000000000..38b76c3b8
--- /dev/null
+++ b/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+
+export function EstimateFormFooterRight() {
+  return (
+    <EstimateTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+      <TotalLine
+        title={<T id={'estimate.details.subtotal'} />}
+        value={'$5000.00'}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'estimate.details.total'} />}
+        value={'$5000.00'}
+        // borderStyle={TotalLineBorderStyle.SingleDark}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+    </EstimateTotalLines>
+  );
+}
+
+const EstimateTotalLines = styled(TotalLines)`
+  width: 100%;
+  color: #555555;
+`;
diff --git a/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js b/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
index 1609b015e..7a84fc318 100644
--- a/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
+++ b/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
@@ -106,7 +106,7 @@ function EstimateFormHeader({
                 intent={inputIntent({ error, touched })}
                 allowCreate={true}
               />
-              <EstimateFormCurrencyTag />
+
             </ControlCustomerGroup>
           </FormGroup>
         )}
diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFooter.js b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFooter.js
index 9b7bb9dfb..3c47e090d 100644
--- a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFooter.js
+++ b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFooter.js
@@ -1,34 +1,33 @@
 import React from 'react';
 import classNames from 'classnames';
-import { FormGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import { FastField } from 'formik';
-import { Row, Col, Postbox } from 'components';
+import styled from 'styled-components';
+
 import { CLASSES } from 'common/classes';
+import { Row, Col, Paper } from 'components';
+import { PaymentReceiveFormFootetLeft } from './PaymentReceiveFormFootetLeft';
+import { PaymentReceiveFormFootetRight } from './PaymentReceiveFormFootetRight';
 
 /**
  * Payment receive form footer.
  */
-export default function PaymentReceiveFormFooter({ getFieldProps }) {
+export default function PaymentReceiveFormFooter() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox title={<T id={'payment_receive_details'} />} defaultOpen={false}>
+      <PaymentReceiveFooterPaper>
         <Row>
           <Col md={8}>
-            {/* --------- Statement --------- */}
-            <FastField name={'statement'}>
-              {({ form, field, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'statement'} />}
-                  className={'form-group--statement'}
-                >
-                  <TextArea growVertically={true} {...field} />
-                </FormGroup>
-              )}
-            </FastField>
+            <PaymentReceiveFormFootetLeft />
+          </Col>
+
+          <Col md={4}>
+            <PaymentReceiveFormFootetRight />
           </Col>
         </Row>
-      </Postbox>
+      </PaymentReceiveFooterPaper>
     </div>
   );
 }
+
+const PaymentReceiveFooterPaper = styled(Paper)`
+  padding: 20px;
+`;
diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.js b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.js
new file mode 100644
index 000000000..470bcea50
--- /dev/null
+++ b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
+
+export function PaymentReceiveFormFootetLeft() {
+  return (
+    <React.Fragment>
+      {/* --------- Statement--------- */}
+      <StatementFormGroup
+        name={'statement'}
+        label={<T id={'statement'} />}
+        hintText={'Will be displayed on the Payment'}
+      >
+        <FEditableText
+          name={'statement'}
+          placeholder={'Thanks for your business and have a great day!'}
+        />
+      </StatementFormGroup>
+    </React.Fragment>
+  );
+}
+
+const StatementFormGroup = styled(FFormGroup)`
+  &.bp3-form-group {
+    margin-bottom: 40px;
+
+    .bp3-label {
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .bp3-form-content {
+      margin-left: 10px;
+    }
+  }
+`;
diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetRight.js b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetRight.js
new file mode 100644
index 000000000..d185510dd
--- /dev/null
+++ b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetRight.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+
+export function PaymentReceiveFormFootetRight() {
+  return (
+    <PaymentReceiveTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+      <TotalLine
+        title={<T id={'estimate.details.subtotal'} />}
+        value={'$5000.00'}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'estimate.details.total'} />}
+        value={'$5000.00'}
+        // borderStyle={TotalLineBorderStyle.SingleDark}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+    </PaymentReceiveTotalLines>
+  );
+}
+
+const PaymentReceiveTotalLines = styled(TotalLines)`
+  width: 100%;
+  color: #555555;
+`;
diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
index f4bc370c9..50200edcd 100644
--- a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
+++ b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
@@ -163,7 +163,6 @@ function PaymentReceiveHeaderFields({
                 }}
                 allowCreate={true}
               />
-              <PaymentReceiveFormCurrencyTag />
             </ControlCustomerGroup>
           </FormGroup>
         )}
diff --git a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.js b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.js
index 5ad04e1f9..2a1f5204e 100644
--- a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.js
+++ b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.js
@@ -1,56 +1,30 @@
 import React from 'react';
-import { FormGroup, TextArea } from '@blueprintjs/core';
-import { FastField } from 'formik';
 import classNames from 'classnames';
-import { FormattedMessage as T } from 'components';
-import { Dragzone, Postbox, Row, Col } from 'components';
+import styled from 'styled-components';
+
 import { CLASSES } from 'common/classes';
-import { inputIntent } from 'utils';
+import { Paper, Row, Col } from 'components';
+import { ReceiptFormFooterLeft } from './ReceiptFormFooterLeft';
+import { ReceiptFormFooterRight } from './ReceiptFormFooterRight';
 
 export default function ReceiptFormFooter({}) {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox title={<T id={'receipt_details'}/>} defaultOpen={false}>
+      <ReceiptFooterPaper>
         <Row>
           <Col md={8}>
-            {/* --------- Receipt message --------- */}
-            <FastField name={'receipt_message'}>
-              {({ field, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'receipt_message'} />}
-                  className={'form-group--receipt_message'}
-                  intent={inputIntent({ error, touched })}
-                >
-                  <TextArea growVertically={true} {...field} />
-                </FormGroup>
-              )}
-            </FastField>
-
-            {/* --------- Statement--------- */}
-            <FastField name={'statement'}>
-              {({ field, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'statement'} />}
-                  className={'form-group--statement'}
-                  intent={inputIntent({ error, touched })}
-                >
-                  <TextArea growVertically={true} {...field} />
-                </FormGroup>
-              )}
-            </FastField>
+            <ReceiptFormFooterLeft />
           </Col>
 
           <Col md={4}>
-            <Dragzone
-              initialFiles={[]}
-              // onDrop={handleDropFiles}
-              // onDeleteFile={handleDeleteFile}
-              hint={<T id={'attachments_maximum'} />}
-
-            />
+            <ReceiptFormFooterRight />
           </Col>
         </Row>
-      </Postbox>
+      </ReceiptFooterPaper>
     </div>
   );
 }
+
+const ReceiptFooterPaper = styled(Paper)`
+  padding: 20px;
+`;
diff --git a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.js b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.js
new file mode 100644
index 000000000..38663439d
--- /dev/null
+++ b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
+
+export function ReceiptFormFooterLeft() {
+  return (
+    <React.Fragment>
+      {/* --------- Receipt message --------- */}
+      <ReceiptMsgFormGroup
+        name={'receipt_message'}
+        label={<T id={'receipt_message'} />}
+        hintText={'Will be displayed on the Receipt'}
+      >
+        <FEditableText
+          name={'receipt_message'}
+          placeholder={'Thanks for your business and have a great day!'}
+        />
+      </ReceiptMsgFormGroup>
+
+      {/* --------- Statement--------- */}
+      <StatementFormGroup label={<T id={'statement'} />} name={'statement'}>
+        <FEditableText
+          name={'statement'}
+          placeholder={
+            'Enter the terms and conditions of your business to be displayed in your transaction'
+          }
+        />
+      </StatementFormGroup>
+    </React.Fragment>
+  );
+}
+
+const ReceiptMsgFormGroup = styled(FFormGroup)`
+  &.bp3-form-group {
+    margin-bottom: 40px;
+
+    .bp3-label {
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .bp3-form-content {
+      margin-left: 10px;
+    }
+  }
+`;
+
+const StatementFormGroup = styled(FFormGroup)`
+  &.bp3-form-group {
+    .bp3-label {
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .bp3-form-content {
+      margin-left: 10px;
+    }
+  }
+`;
diff --git a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.js b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.js
new file mode 100644
index 000000000..a297162ae
--- /dev/null
+++ b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+
+export function ReceiptFormFooterRight() {
+  return (
+    <ReceiptTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+      <TotalLine
+        title={<T id={'receipt.details.subtotal'} />}
+        value={'$5000.00'}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'receipt.details.total'} />}
+        value={'$5000.00'}
+        borderStyle={TotalLineBorderStyle.SingleDark}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+      <TotalLine
+        title={<T id={'receipt.details.payment_amount'} />}
+        value={'$0.00'}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'receipt.details.due_amount'} />}
+        value={'$5000.00'}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+    </ReceiptTotalLines>
+  );
+}
+
+const ReceiptTotalLines = styled(TotalLines)`
+  width: 100%;
+  color: #555555;
+`;
diff --git a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js
index f2953aa6c..3bf129059 100644
--- a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js
+++ b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js
@@ -113,7 +113,7 @@ function ReceiptFormHeader({
                 popoverFill={true}
                 allowCreate={true}
               />
-              <ReceiptFormCurrencyTag />
+
             </ControlCustomerGroup>
           </FormGroup>
         )}