From 64a4b24fcfb308f35cf283bebefee753d329fa48 Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Sun, 4 Feb 2018 14:03:42 +0700
Subject: [PATCH 1/6] Added InvoiceID component to the form

---
 app/components/form/InvoiceID.jsx | 67 +++++++++++++++++++++++++++++++
 app/containers/Form.jsx           |  9 +++++
 2 files changed, 76 insertions(+)
 create mode 100644 app/components/form/InvoiceID.jsx

diff --git a/app/components/form/InvoiceID.jsx b/app/components/form/InvoiceID.jsx
new file mode 100644
index 00000000..03d7ca73
--- /dev/null
+++ b/app/components/form/InvoiceID.jsx
@@ -0,0 +1,67 @@
+// Libraries
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+// Custom Components
+import { Section } from '../shared/Section';
+
+// Animation
+import _withFadeInAnimation from '../shared/hoc/_withFadeInAnimation';
+
+// Styles
+import styled from 'styled-components';
+const NoteContent = styled.textarea`
+  min-height: 36px;
+  border-radius: 4px;
+  padding: 10px;
+  display: block;
+  width: 100%;
+  border: 1px solid #f2f3f4;
+  color: #3a3e42;
+  font-size: 14px;
+`;
+
+// Component
+export class InvoiceID extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = { invoiceID: this.props.invoiceID };
+    this.handleInputChange = this.handleInputChange.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.invoiceID === "") {
+      this.setState({ invoiceID: "" });
+    }
+  }
+
+  handleInputChange(event) {
+    this.setState({ invoiceID: event.target.value }, () => {
+      this.props.updateFieldData('invoiceID', this.state.invoiceID);
+    });
+  }
+
+  render() {
+    const { t } = this.props;
+    return (
+      <Section>
+        <label className="itemLabel">Invoice ID</label>
+        <input
+          name="invoiceID"
+          type="text"
+          onChange={this.handleInputChange}
+          value={this.state.invoiceID}
+        />
+      </Section>
+    );
+  }
+}
+
+InvoiceID.propTypes = {
+  invoiceID: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired,
+  updateFieldData: PropTypes.func.isRequired,
+};
+
+// Export
+export default _withFadeInAnimation(InvoiceID);
diff --git a/app/containers/Form.jsx b/app/containers/Form.jsx
index 304ed3de..efc37fd8 100644
--- a/app/containers/Form.jsx
+++ b/app/containers/Form.jsx
@@ -19,6 +19,7 @@ import Discount from '../components/form/Discount';
 import DueDate from '../components/form/DueDate';
 import Tax from '../components/form/Tax';
 import Note from '../components/form/Note';
+import InvoiceID from '../components/form/InvoiceID';
 import Settings from '../components/form/Settings';
 import Button from '../components/shared/Button';
 import _withFadeInAnimation from '../components/shared/hoc/_withFadeInAnimation';
@@ -50,6 +51,7 @@ class Form extends PureComponent {
       discount,
       tax,
       note,
+      invoiceID,
       settings,
       savedSettings,
     } = this.props.currentInvoice;
@@ -89,6 +91,13 @@ class Form extends PureComponent {
             savedSettings={savedSettings.required_fields}
             updateSavedSettings={updateSavedFormSettings}
           />
+          {required_fields.invoiceID && (
+            <InvoiceID
+              t={t}
+              invoiceID={invoiceID}
+              updateFieldData={updateFieldData}
+            />
+          )}
           <Recipient />
           <ItemsList />
           {required_fields.dueDate && (

From 193e741ab49a990c4bb24b2c99362c1221a02bc3 Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Sun, 4 Feb 2018 14:04:51 +0700
Subject: [PATCH 2/6] Added setting to toggle invoiceID field

---
 app.js                              |  1 +
 app/components/form/Settings.jsx    |  9 +++++++++
 app/components/settings/Invoice.jsx | 13 ++++++++++++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/app.js b/app.js
index 2543265f..fc5de341 100644
--- a/app.js
+++ b/app.js
@@ -200,6 +200,7 @@ function setInitialValues() {
         amount: 0,
       },
       required_fields: {
+        invoiceID: false,
         dueDate: false,
         currency: false,
         discount: false,
diff --git a/app/components/form/Settings.jsx b/app/components/form/Settings.jsx
index 6d0bcbf8..180fb681 100644
--- a/app/components/form/Settings.jsx
+++ b/app/components/form/Settings.jsx
@@ -138,6 +138,15 @@ class Settings extends PureComponent {
             </Helper>
 
             <AllSettings>
+              <Setting>
+                <Label>Invoice ID</Label>
+                <Switch
+                  name="invoiceID"
+                  checked={required_fields.invoiceID}
+                  onChange={this.handleInputChange}
+                />
+              </Setting>
+
               <Setting>
                 <Label>{t('form:fields:dueDate:name')}</Label>
                 <Switch
diff --git a/app/components/settings/Invoice.jsx b/app/components/settings/Invoice.jsx
index 9c99cdd8..689a4169 100644
--- a/app/components/settings/Invoice.jsx
+++ b/app/components/settings/Invoice.jsx
@@ -191,6 +191,18 @@ class Invoice extends Component {
         <label className="itemLabel">{t('settings:fields:requiredFields')}</label>
         <Section>
           <Row>
+            <Field>
+              <label className="itemLabel">Invoice ID</label>
+              <label className="switch">
+                <input
+                  name="invoiceID"
+                  type="checkbox"
+                  checked={required_fields.invoiceID}
+                  onChange={this.handleVisibilityChange}
+                />
+                <span className="slider round" />
+              </label>
+            </Field>
             <Field>
               <label className="itemLabel">{t('form:fields:dueDate:name')}</label>
               <label className="switch">
@@ -216,7 +228,6 @@ class Invoice extends Component {
                 <span className="slider round" />
               </label>
             </Field>
-
             <Field>
               <label className="itemLabel">{t('form:fields:discount:name')}</label>
               <label className="switch">

From 019489c2b65414577cd8b61dbeadc9962ea4afa2 Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Sun, 4 Feb 2018 14:05:41 +0700
Subject: [PATCH 3/6] Added validation rule & fefactored FormReducer

---
 app/helpers/form.js          | 20 ++++++++++++++++++++
 app/reducers/FormReducer.jsx | 14 ++++++++++----
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/app/helpers/form.js b/app/helpers/form.js
index ffb66e73..d0e35fc6 100644
--- a/app/helpers/form.js
+++ b/app/helpers/form.js
@@ -5,6 +5,7 @@ import uuidv4 from 'uuid/v4';
 
 function validateFormData(formData) {
   const {
+    invoiceID,
     recipient,
     rows,
     dueDate,
@@ -16,6 +17,7 @@ function validateFormData(formData) {
   } = formData;
   // Required fields
   const { required_fields } = settings;
+  if (!validateInvoiceID(required_fields.invoiceID, invoiceID)) return false;
   if (!validateRecipient(recipient)) return false;
   if (!validateRows(rows)) return false;
   if (!validateDueDate(required_fields.dueDate, dueDate)) return false;
@@ -28,6 +30,7 @@ function validateFormData(formData) {
 
 function getInvoiceData(formData) {
   const {
+    invoiceID,
     recipient,
     rows,
     dueDate,
@@ -53,6 +56,8 @@ function getInvoiceData(formData) {
     // Migh as well filter out _rev
     invoiceData.recipient = recipient.select;
   }
+  // Set InvoiceID
+  if (required_fields.invoiceID) invoiceData.invoiceID = invoiceID;
   // Set Invoice DueDate
   if (required_fields.dueDate) invoiceData.dueDate = dueDate.selectedDate;
   // Set Invoice Currency
@@ -225,6 +230,21 @@ function validateNote(isRequired, note) {
   return true;
 }
 
+function validateInvoiceID(isRequired, invoiceID) {
+  if (isRequired) {
+    if (!invoiceID || invoiceID === '') {
+      openDialog({
+        type: 'warning',
+        title: i18n.t('dialog:validation:invoiceID:title'),
+        message: i18n.t('dialog:validation:invoiceID:message'),
+      });
+      return false;
+    }
+    return true;
+  }
+  return true;
+}
+
 // SET RECIPIENT INFORMATION IN EDIT MODE
 function setEditRecipient(allContacts, currentContact) {
   if (allContacts.length) {
diff --git a/app/reducers/FormReducer.jsx b/app/reducers/FormReducer.jsx
index ddb33e5d..d300cb89 100644
--- a/app/reducers/FormReducer.jsx
+++ b/app/reducers/FormReducer.jsx
@@ -20,6 +20,7 @@ const initialState = {
   dueDate: {},
   discount: {},
   note: {},
+  invoiceID: "",
   // Set default values for currency and tax
   currency: currencies[invoiceSettings.currency],
   tax: invoiceSettings.tax,
@@ -76,11 +77,16 @@ const FormReducer = handleActions(
 
     [ACTION_TYPES.FORM_FIELD_UPDATE_DATA]: (state, action) => {
       const { field, data } = action.payload;
+      if (typeof data === 'object') {
+        return Object.assign({}, state, {
+          [field]: {
+            ...state[field],
+            ...data,
+          },
+        });
+      }
       return Object.assign({}, state, {
-        [field]: {
-          ...state[field],
-          ...data,
-        },
+        [field]: data
       });
     },
 

From cc3b193ff8c2626b931736a04d70805a7042e3ee Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Sun, 4 Feb 2018 14:06:20 +0700
Subject: [PATCH 4/6] =?UTF-8?q?Display=20custom=20InvoiceID=20when=20it?=
 =?UTF-8?q?=E2=80=99s=20available?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/invoices/Invoice.jsx              | 12 ++++++------
 preview/templates/business/components/Header.jsx | 10 ++++++----
 preview/templates/minimal/components/Header.jsx  | 12 +++++++-----
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/app/components/invoices/Invoice.jsx b/app/components/invoices/Invoice.jsx
index 901ff341..0631c15d 100644
--- a/app/components/invoices/Invoice.jsx
+++ b/app/components/invoices/Invoice.jsx
@@ -177,7 +177,6 @@ class Invoice extends PureComponent {
           </span>
         );
       }
-
       case 'paid': {
         return (
           <span>
@@ -186,7 +185,6 @@ class Invoice extends PureComponent {
           </span>
         );
       }
-
       case 'refunded': {
         return (
           <span>
@@ -244,10 +242,12 @@ class Invoice extends PureComponent {
               <Field>
                 <label>{t('invoices:fields:invoiceID')}</label>
                 <p>
-                  {truncate(invoice._id, {
-                    length: 8,
-                    omission: '',
-                  })}
+                  { invoice.invoiceID
+                    ? invoice.invoiceID
+                    : truncate(invoice._id, {
+                        length: 8,
+                        omission: '', })
+                  }
                 </p>
               </Field>
               <Field>
diff --git a/preview/templates/business/components/Header.jsx b/preview/templates/business/components/Header.jsx
index e47ff833..39f4fe14 100644
--- a/preview/templates/business/components/Header.jsx
+++ b/preview/templates/business/components/Header.jsx
@@ -82,10 +82,12 @@ function Header({ t, invoice, profile, configs }) {
         <Heading accentColor={configs.accentColor}>{ t('preview:common:invoice') }</Heading>
         <h4>
           #
-          {truncate(invoice._id, {
-            length: 8,
-            omission: '',
-          })}
+          { invoice.invoiceID
+            ? invoice.invoiceID
+            : truncate(invoice._id, {
+                length: 8,
+                omission: '', })
+          }
         </h4>
         <p>
           { t('preview:common:created') }
diff --git a/preview/templates/minimal/components/Header.jsx b/preview/templates/minimal/components/Header.jsx
index ea604104..336606ec 100644
--- a/preview/templates/minimal/components/Header.jsx
+++ b/preview/templates/minimal/components/Header.jsx
@@ -38,11 +38,13 @@ function Header({ t, invoice, profile, configs }) {
           {t('preview:common:invoice')}
         </Heading>
         <h4 className="label">
-          #
-          {truncate(invoice._id, {
-            length: 8,
-            omission: '',
-          })}
+          # {' '}
+          { invoice.invoiceID
+            ? invoice.invoiceID
+            : truncate(invoice._id, {
+                length: 8,
+                omission: '', })
+          }
         </h4>
         <p>
           {t('preview:common:created')}:

From 25d99bab2953b2bef874d567e3a0a486eaa682cb Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Sun, 4 Feb 2018 14:06:49 +0700
Subject: [PATCH 5/6] Added unit test

---
 .../form/__tests__/InvoiceID.spec.jsx         | 70 +++++++++++++++++++
 .../__snapshots__/InvoiceID.spec.jsx.snap     | 19 +++++
 2 files changed, 89 insertions(+)
 create mode 100644 app/components/form/__tests__/InvoiceID.spec.jsx
 create mode 100644 app/components/form/__tests__/__snapshots__/InvoiceID.spec.jsx.snap

diff --git a/app/components/form/__tests__/InvoiceID.spec.jsx b/app/components/form/__tests__/InvoiceID.spec.jsx
new file mode 100644
index 00000000..f19c7506
--- /dev/null
+++ b/app/components/form/__tests__/InvoiceID.spec.jsx
@@ -0,0 +1,70 @@
+// Libs
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
+
+// Component
+import { InvoiceID } from '../InvoiceID.jsx';
+
+// Mocks
+const t = jest.fn();
+const updateFieldData = jest.fn();
+const invoiceID = "Invoice: 123-456-789"
+
+describe('InvoiceID component', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mount(
+      <InvoiceID
+        t={t}
+        invoiceID={invoiceID}
+        updateFieldData={updateFieldData}
+      />
+    );
+  });
+
+  // PROPS & STATE
+  it('receives correct props', () => {
+    expect(wrapper.prop('invoiceID')).toEqual(invoiceID);
+    expect(wrapper.prop('updateFieldData')).toEqual(updateFieldData);
+  });
+
+  // RENDER
+  it('renders necessary element', () => {
+    expect(wrapper.find('label')).toHaveLength(1);
+    expect(wrapper.find('input')).toHaveLength(1);
+  });
+
+  // LIFE CYCLE EVENTS
+  // TODO
+  it('render when necessary', () => {});
+
+  // PRIVATE METHOD
+  it('handleInputChange correctly', () => {
+    const spy = jest.spyOn(InvoiceID.prototype, 'handleInputChange');
+    const wrap = mount(
+      <InvoiceID
+        t={t}
+        invoiceID={invoiceID}
+        updateFieldData={updateFieldData}
+      />
+    );
+    const textInput = wrap.find('input');
+    textInput.simulate('change', { target: { value: 'Invoice: 987-654-321' } });
+    expect(spy).toHaveBeenCalled();
+  });
+
+  // SNAPSHOT
+  it('matches snapshot', () => {
+    const tree = renderer
+      .create(
+        <InvoiceID
+          t={t}
+          invoiceID={invoiceID}
+          updateFieldData={updateFieldData}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/app/components/form/__tests__/__snapshots__/InvoiceID.spec.jsx.snap b/app/components/form/__tests__/__snapshots__/InvoiceID.spec.jsx.snap
new file mode 100644
index 00000000..a749e96e
--- /dev/null
+++ b/app/components/form/__tests__/__snapshots__/InvoiceID.spec.jsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InvoiceID component matches snapshot 1`] = `
+<div
+  className="Section__SectionStyle-dgSKSv cwfAAu"
+>
+  <label
+    className="itemLabel"
+  >
+    Invoice ID
+  </label>
+  <input
+    name="invoiceID"
+    onChange={[Function]}
+    type="text"
+    value="Invoice: 123-456-789"
+  />
+</div>
+`;

From 32b6684af57f585798a1c9f0d90cd3b61efa5329 Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Sun, 4 Feb 2018 14:06:58 +0700
Subject: [PATCH 6/6] Refactored old tests

---
 .../form/__tests__/Settings.spec.jsx          | 23 +++++---
 .../__snapshots__/Settings.spec.jsx.snap      | 23 ++++++++
 app/helpers/__tests__/form.spec.js            | 56 ++++++++++++++-----
 3 files changed, 79 insertions(+), 23 deletions(-)

diff --git a/app/components/form/__tests__/Settings.spec.jsx b/app/components/form/__tests__/Settings.spec.jsx
index 3c70a211..ac5fc4ee 100644
--- a/app/components/form/__tests__/Settings.spec.jsx
+++ b/app/components/form/__tests__/Settings.spec.jsx
@@ -23,6 +23,7 @@ const currentInvoice = {
   settings: {
     open: false,
     required_fields: {
+      invoiceID: false,
       dueDate: false,
       currency: false,
       discount: false,
@@ -34,6 +35,7 @@ const currentInvoice = {
     tax: {},
     currency: 'USD',
     required_fields: {
+      invoiceID: false,
       dueDate: false,
       currency: false,
       discount: false,
@@ -68,13 +70,12 @@ describe('Settings component', () => {
     expect(wrapper.prop('toggleField')).toEqual(toggleField);
     expect(wrapper.prop('toggleFormSettings')).toEqual(toggleFormSettings);
     expect(wrapper.prop('updateSavedSettings')).toEqual(updateSavedSettings);
-    // expect(wrapper.prop('currentInvoice')).toEqual(currentInvoice);
   });
 
   // RENDER
   it('renders necessary element', () => {
-    expect(wrapper.find('label')).toHaveLength(11);
-    expect(wrapper.find(Switch)).toHaveLength(5);
+    expect(wrapper.find('label')).toHaveLength(13);
+    expect(wrapper.find(Switch)).toHaveLength(6);
   });
 
   // LIFE CYCLE EVENTS
@@ -84,13 +85,19 @@ describe('Settings component', () => {
   // PRIsettingsE METHOD
   it('toggle field correctly', () => {
     // Setup
-    const dueDate = wrapper.find(Switch).at(0);
-    const currency = wrapper.find(Switch).at(1);
-    const discount = wrapper.find(Switch).at(2);
-    const tax = wrapper.find(Switch).at(3);
-    const note = wrapper.find(Switch).at(4);
+    const invoiceID = wrapper.find(Switch).at(0);
+    const dueDate = wrapper.find(Switch).at(1);
+    const currency = wrapper.find(Switch).at(2);
+    const discount = wrapper.find(Switch).at(3);
+    const tax = wrapper.find(Switch).at(4);
+    const note = wrapper.find(Switch).at(5);
 
     // Execute & Assert
+    invoiceID.find('input').simulate('change');
+    expect(toggleField).toHaveBeenCalled();
+    expect(toggleField).toHaveBeenCalledWith('invoiceID');
+    expect(toggleField).not.toHaveBeenCalledWith('something-else');
+
     dueDate.find('input').simulate('change');
     expect(toggleField).toHaveBeenCalled();
     expect(toggleField).toHaveBeenCalledWith('dueDate');
diff --git a/app/components/form/__tests__/__snapshots__/Settings.spec.jsx.snap b/app/components/form/__tests__/__snapshots__/Settings.spec.jsx.snap
index b7236171..5fc49d62 100644
--- a/app/components/form/__tests__/__snapshots__/Settings.spec.jsx.snap
+++ b/app/components/form/__tests__/__snapshots__/Settings.spec.jsx.snap
@@ -37,6 +37,29 @@ exports[`Settings component matches snapshot 1`] = `
   <div
     className="Settings__AllSettings-hAEgKd cLFeXF"
   >
+    <div
+      className="Settings__Setting-iSwZaF jiKDp"
+    >
+      <label
+        className="Settings__Label-bIhYmz iPSgUQ"
+      >
+        Invoice ID
+      </label>
+      <label
+        className="Switch__SwitchStyle-cIZUZy lcgmHp"
+      >
+        <input
+          checked={false}
+          className="Switch__Input-jIJATX kGoGgc"
+          name="invoiceID"
+          onChange={[Function]}
+          type="checkbox"
+        />
+        <span
+          className="Switch__Slider-iwwTvI egztuK"
+        />
+      </label>
+    </div>
     <div
       className="Settings__Setting-iSwZaF jiKDp"
     >
diff --git a/app/helpers/__tests__/form.spec.js b/app/helpers/__tests__/form.spec.js
index 9ff0c959..60570de3 100644
--- a/app/helpers/__tests__/form.spec.js
+++ b/app/helpers/__tests__/form.spec.js
@@ -25,6 +25,7 @@ describe('getInvoiceData', () => {
   let formData;
   beforeEach(() => {
     formData = {
+      invoiceID: 'Invoice: 123-456-789',
       recipient: {
         newRecipient: true,
         select: {
@@ -61,6 +62,7 @@ describe('getInvoiceData', () => {
       settings: {
         open: false,
         required_fields: {
+          invoiceID: false,
           dueDate: false,
           currency: false,
           discount: false,
@@ -72,6 +74,7 @@ describe('getInvoiceData', () => {
         tax: {},
         currency: 'USD',
         required_fields: {
+          invoiceID: false,
           dueDate: false,
           currency: false,
           discount: false,
@@ -84,6 +87,8 @@ describe('getInvoiceData', () => {
 
   it('Should return correct data shape', () => {
     const invoiceData = getInvoiceData(formData);
+    // Include custom invoiceID
+    expect(invoiceData).not.toHaveProperty('invoiceID');
     // Include Rows & Recipient Data
     expect(invoiceData).toHaveProperty('rows');
     expect(invoiceData).toHaveProperty('recipient');
@@ -177,21 +182,6 @@ describe('getInvoiceData', () => {
     });
   });
 
-  it('should return note data when required', () => {
-    const newFormData = Object.assign({}, formData, {
-      note: {
-        content: faker.lorem.paragraph(),
-      },
-      settings: Object.assign({}, formData.settings, {
-        required_fields: Object.assign({}, formData.settings.required_fields, {
-          note: true,
-        }),
-      }),
-    });
-    const invoiceData = getInvoiceData(newFormData);
-    expect(invoiceData.note).toEqual(newFormData.note.content);
-  });
-
   it('should return tax data when required', () => {
     const newFormData = Object.assign({}, formData, {
       tax: {
@@ -227,12 +217,40 @@ describe('getInvoiceData', () => {
       amount: newFormData.discount.amount,
     });
   });
+
+  it('should return note data when required', () => {
+    const newFormData = Object.assign({}, formData, {
+      note: {
+        content: faker.lorem.paragraph(),
+      },
+      settings: Object.assign({}, formData.settings, {
+        required_fields: Object.assign({}, formData.settings.required_fields, {
+          note: true,
+        }),
+      }),
+    });
+    const invoiceData = getInvoiceData(newFormData);
+    expect(invoiceData.note).toEqual(newFormData.note.content);
+  });
+
+  it('should return invoiceID data when required', () => {
+    const newFormData = Object.assign({}, formData, {
+      settings: Object.assign({}, formData.settings, {
+        required_fields: Object.assign({}, formData.settings.required_fields, {
+          invoiceID: true,
+        }),
+      }),
+    });
+    const invoiceData = getInvoiceData(newFormData);
+    expect(invoiceData.invoiceID).toEqual('Invoice: 123-456-789');
+  });
 });
 
 describe('validateFormData', () => {
   let formData;
   beforeEach(() => {
     formData = {
+      invoiceID: 'Invoice 123-456-789',
       recipient: {
         newRecipient: true,
         select: {},
@@ -273,6 +291,7 @@ describe('validateFormData', () => {
       settings: {
         open: false,
         required_fields: {
+          invoiceID: true,
           dueDate: true,
           currency: true,
           discount: true,
@@ -288,6 +307,7 @@ describe('validateFormData', () => {
         },
         currency: 'USD',
         required_fields: {
+          invoiceID: true,
           dueDate: true,
           currency: true,
           discount: true,
@@ -348,6 +368,12 @@ describe('validateFormData', () => {
     const validation = validateFormData(formData);
     expect(validation).toEqual(false);
   });
+
+  it('should NOT pass with INCORRECT invoiceID', () => {
+    formData.invoiceID = '';
+    const validation = validateFormData(formData);
+    expect(validation).toEqual(false);
+  });
 });
 
 describe('validateRecipient', () => {