feat(TotalLine): add extra border style.

src/components/TotalLines/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 export const TotalLineBorderStyle = {
+  None: 'None',
   SingleDark: 'SingleDark',
   DoubleDark: 'DoubleDark',
 };
@@ -80,6 +81,11 @@ export const TotalLineRoot = styled.div`
       `
       border-bottom: 1px double #000;
     `}
+    ${(props) =>
+      props.borderStyle === TotalLineBorderStyle.None &&
+      `
+      border-bottom-color: transparent;
+    `}
     ${(props) =>
       props.textStyle === TotalLineTextStyle.Bold &&
       `

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

@@ -14,13 +14,14 @@ import intl from 'react-intl-universal';
 import { defaultFastFieldShouldUpdate } from 'utils';
 import { ERROR } from 'common/errors';
 import { AppToaster } from 'components';
+import { getEntriesTotal } from 'containers/Entries/utils';
 import { useInvoiceFormContext } from './InvoiceFormProvider';
 import {
   updateItemsEntriesTotal,
   ensureEntriesHaveEmptyLine,
 } from 'containers/Entries/utils';
 
-export const MIN_LINES_NUMBER = 4;
+export const MIN_LINES_NUMBER = 1;
 
 // Default invoice entry object.
 export const defaultInvoiceEntry = {
@@ -201,13 +202,11 @@ export const useSetPrimaryBranchToForm = () => {
   }, [isBranchesSuccess, setFieldValue, branches]);
 };
 
-export const useSetForeignCurrencyToEditForm = () => {
+export const useInvoiceTotal = () => {
-  const { values } = useFormikContext();
+  const {
-  const { isNewMode, setSelectCustomer } = useInvoiceFormContext();
+    values: { entries },
+  } = useFormikContext();
 
-  React.useEffect(() => {
+  // Calculate the total due amount of invoice entries.
-    if (!isNewMode) {
+  return React.useMemo(() => getEntriesTotal(entries), [entries]);
-      setSelectCustomer({ currency_code: values.currency_code });
-    }
-  }, [isNewMode, setSelectCustomer, values]);
 };

src/static/json/icons.js

@@ -534,4 +534,10 @@ export default {
     ],
     viewBox: '0 0 24 24',
   },
+  'more-13': {
+    path: [
+      'M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 10a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0-5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z',
+    ],
+    viewBox: '0 0 3 13',
+  },
 };

src/style/components/PageForm.scss

@@ -42,11 +42,6 @@
         margin-bottom: 0;
       }
     }
-    #{$self}__body,
-    #{$self}__footer {
-      max-width: 1400px;
-    }
-
     #{$self}__header {
       background-color: #FFF;
       padding: 25px 32px;

src/style/pages/SaleInvoice/PageForm.scss

@@ -22,6 +22,7 @@ body.page-invoice-edit {
     .bp3-label {
       min-width: 150px;
     }
+
     .bp3-form-content {
       width: 100%;
     }
@@ -31,34 +32,33 @@ body.page-invoice-edit {
         max-width: 450px;
       }
     }
+
     .row {
       display: flex;
       flex-wrap: nowrap;
+
       .col {
         max-width: 470px;
 
-        &--terms,
         &--due-date {
           .bp3-form-group {
             margin: 0px 15px 15px;
+
             .bp3-label {
-              min-width: 70px;
+              min-width: 100px;
             }
           }
         }
-        &--due-date {
-          .bp3-input-group .bp3-input {
-            border: 1px dashed #ced4da;
-          }
-        }
       }
     }
+
     .col--invoice-date {
       max-width: 435px;
     }
   }
 
   #{$self}__footer {
+
     .form-group--invoice_message,
     .form-group--terms_conditions {
       max-width: 450px;
@@ -71,12 +71,14 @@ body.page-invoice-edit {
     }
   }
 }
+
 .status-accessor {
   span {
     font-size: 13px;
     font-weight: 400;
     line-height: 1.5;
   }
+
   .fully-paid-status {
     height: 19px;
     width: 19px;
@@ -97,8 +99,8 @@ body.page-invoice-edit {
     margin-top: 5px;
     width: 80%;
   }
-  &.overdue-status {
+
-  }
+  &.overdue-status {}
-  &.remaining-status {
+
-  }
+  &.remaining-status {}
-}
+}