Initial commit. Functional approach

package-lock.json

@@ -13,6 +13,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.3",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -3352,6 +3353,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -15074,6 +15083,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/App.jsx

@@ -0,0 +1,59 @@
+import imageLogo from './Logo.png';
+
+import './App.css';
+
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+import PageHome from './PageHome';
+import InputWrapped from './components/Input';
+import methods from './components/MethodsInput';
+// const makeInputJSON = methods.makeInputJSON;
+const makeInputJSON = (dictArgs) => {
+    return methods.makeInputJSON(dictArgs);
+}
+// import PageResult from './PageResult';
+//  onClick={goToPageHome}
+// require
+
+function App() {
+  /*
+  const navigate = useNavigate();
+  const goToPageHome = () => {
+    navigate.pushState('/PageHome');
+  };
+  */
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={imageLogo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+        <Router>
+          <div>
+            <Routes>
+              <Route path="/" element={<PageHome/>}></Route>
+              <Route path="/PageHome" component={<PageHome/>}></Route>
+            </Routes>
+          </div>
+          {/*
+          <Link to="/PageHome">
+            <InputWrapped data={makeInputJSON({type: "button", textLabel: "Input form"})} />
+          </Link>
+          */}
+        </Router>
+      </header>
+    </div>
+  );
+}
+
+
+export default App;

src/PageHome.jsx

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import objDefaults from './config'; // { defaultsMyBusiness, defaultsMyBusinessBank, defaultsTheirBusiness, defaultsTheirBusinessContact }
+import MainContentForm from './components/MainContentForm';
+
+const PageHome = () => {
+    const [formInvoiceData, setFormInvoiceData] = useState({
+        ...objDefaults.getValuesDefaultFormMetadata,
+        ...objDefaults.getValuesDefaultMyBusiness,
+        ...objDefaults.getValuesDefaultMyBusinessBank,
+        ...objDefaults.getValuesDefaultTheirBusiness,
+        ...objDefaults.getValuesDefaultTheirBusinessContact,
+        ...objDefaults.getValuesDefaultInvoice
+    });
+    console.log("formInvoiceData:", formInvoiceData);
+    return (
+        <div>
+            <MainContentForm data={formInvoiceData} />
+        </div>
+    )
+};
+
+export default PageHome;

src/components/BlockFormSection.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import InputWrapped from './Input';
+
+const BlockFormSection = (props) => {
+    const { titleSection, inputs } = props.data;
+
+    function report(titleSection, inputs) {
+        console.log("BlockFormSection");
+        console.log("titleSection:", titleSection);
+        console.log("inputs:", inputs);
+        console.log("");
+    }
+    report(titleSection, inputs);
+
+    return (
+        <div>
+            <label className="input_label">{titleSection}</label>
+            {inputs.map(input => (
+                <InputWrapped key={input.id} data={input} /> 
+            ))}
+        </div>
+    );
+};
+
+export default BlockFormSection;

src/components/ContentFormInvoiceOrEstimate.jsx

@@ -0,0 +1,176 @@
+
+import React, { Component } from 'react';
+import BlockFormSection from './BlockFormSection';
+import methods from './MethodsInput';
+const makeInputJSON = (dictArgs) => {
+    return methods.makeInputJSON(dictArgs);
+}
+
+class ContentFormInvoiceOrEstimate extends Component {
+    constructor(props) {
+        super(props);
+        this.state = this.props.stateMainContentForm;
+        this.initialiseElements();
+    }
+
+    handleChangeStateContentFormInvoiceOrEstimate(stateNew) {
+        const { stateMainContentForm, handleChangeStateMainContentForm } = this.props;
+        this.setState((statePrevious) => ({
+            ...statePrevious,
+            ...stateNew
+        }));
+        handleChangeStateMainContentForm({
+            ...stateMainContentForm,
+            ...stateNew
+        });
+    }
+
+    handleChangeInput(event) {
+        const { elementInput } = event.target;
+        this.handleChangeStateContentFormInvoiceOrEstimate({[elementInput.name]: elementInput.value});
+    }
+
+    initialiseElements() {
+        let typeForm = this.state.values['typeForm'] == "0" ? "Invoice" : "Estimate";
+        let sectionsForm = [
+            {
+                titleSection: typeForm,
+                inputs: [
+                    makeInputJSON({id: 'dateBilling' + typeForm, name: 'dateBilling' + typeForm, type: 'date', placeholder: this.state.placeholders['dateBilling' + typeForm], value: this.state.values['dateBilling' + typeForm], textLabel: 'Billing date:', onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'type' + typeForm, name: 'type' + typeForm, type: 'select', placeholder: this.state.placeholders['type' + typeForm], value: this.state.values['type' + typeForm], options: [
+                        {text: 'Goods', value:'0'},
+                        {text: 'Services', value:'1'}
+                    ], textLabel: 'Invoice type:', onChange: this.handleChangeInput})
+                ]
+            }
+        ];
+        let sectionsGoods = [];
+        if (this.state.values['type' + typeForm] == '0') {
+            sectionsForm = sectionsForm.concat([
+                {
+                    titleSection: 'Goods',
+                    inputs: [
+                        makeInputJSON({id: 'quantityGoods' + typeForm, name: 'quantityGoods' + typeForm, type: 'number', placeholder: this.state.placeholders['quantityGoods' + typeForm], value: this.state.values['quantityGoods' + typeForm], textLabel: 'Number of different goods:', onChange: this.handleChangeInput})
+                    ]
+                }
+            ]);
+            if (this.state.values['quantityGoods' + typeForm] > 0) {
+                for (let i = 0; i < this.state.values['quantityGoods' + typeForm]; i++) {
+                    sectionsGoods = sectionsGoods.concat([
+                        {
+                            titleSection: 'Good ' + (i + 1),
+                            inputs: [
+                                makeInputJSON({id: 'nameGood' + typeForm + (i + 1), name: 'nameGood' + typeForm + (i + 1), type: 'text', placeholder: this.state.placeholders['nameGood' + typeForm + (i + 1)], value: this.state.values['nameGood' + typeForm + (i + 1)], textLabel: 'Name:', onChange: this.handleChangeInput}),
+                                makeInputJSON({id: 'valueGood' + typeForm + (i + 1), name: 'valueGood' + typeForm + (i + 1), type: 'number', placeholder: this.state.placeholders['valueGood' + typeForm + (i + 1)], value: this.state.values['valueGood' + typeForm + (i + 1)], textLabel: 'Value:', onChange: this.handleChangeInput}),
+                                makeInputJSON({id: 'quantityGood' + typeForm + (i + 1), name: 'quantityGood' + typeForm + (i + 1), type: 'number', placeholder: this.state.placeholders['quantityGood' + typeForm + (i + 1)], value: this.state.values['quantityGood' + typeForm + (i + 1)], textLabel: 'Quantity:', onChange: this.handleChangeInput})
+                            ]
+                        }
+                    ]);
+                }
+            }
+        }
+        let sectionsServices = [];
+        let subsectionsServices = [];
+        console.log("this.state.values[" + "type" + typeForm + "]:", this.state.values['type' + typeForm]);
+        if (this.state.values['type' + typeForm] == '1') {
+            sectionsForm = sectionsForm.concat([
+                {
+                    titleSection: 'Services',
+                    inputs: [
+                        makeInputJSON({id: 'quantityServices' + typeForm, name: 'quantityServices' + typeForm, type: 'number', placeholder: this.state.placeholders['quantityServices' + typeForm], value: this.state.values['quantityServices' + typeForm], textLabel: 'Number of different services:', onChange: this.handleChangeInput})
+                    ]
+                }
+            ]);
+            console.log("this.state.values[" + 'quantityServices' + typeForm + "]:", this.state.values['quantityServices' + typeForm]);
+            if (this.state.values['quantityServices' + typeForm] > 0) {
+                let j;
+                for (let i = 0; i < this.state.values['quantityServices' + typeForm]; i++) {
+                    console.log("adding service " + (i + 1));
+                    sectionsServices = sectionsServices.concat([
+                        {
+                            titleSection: 'Service ' + (i + 1),
+                            inputs: [
+                                makeInputJSON({id: 'discretisationRateService' + typeForm + (i + 1), name: 'discretisationRateService' + typeForm + (i + 1), type: 'select', placeholder: this.state.placeholders['discretisationRateService' + typeForm + (i + 1)], value: this.state.values['discretisationRateService' + typeForm + (i + 1)], options: [
+                                    {text: 'Minute', value:'m'},
+                                    {text: 'Hour', value:'h'},
+                                    {text: 'Day', value:'d'},
+                                    {text: 'Week', value:'w'}
+                                ], textLabel: 'Rate discretisation:', onChange: this.handleChangeInput}),
+                                makeInputJSON({id: 'quantityDiscretisationRateService' + typeForm + (i + 1), name: 'quantityDiscretisationRateService' + typeForm + (i + 1), type: 'number', placeholder: this.state.placeholders['quantityDiscretisationRateService' + typeForm + (i + 1)], value: this.state.values['quantityDiscretisationRateService' + typeForm + (i + 1)], textLabel: 'Quantity of rate discretisations per minimum unit rate:', onChange: this.handleChangeInput}),
+                                makeInputJSON({id: 'rateService' + typeForm + (i + 1), name: 'rateService' + typeForm + (i + 1), type: 'number', placeholder: this.state.placeholders['rateService' + typeForm + (i + 1)], value: this.state.values['rateService' + typeForm + (i + 1)], textLabel: 'Rate [£ / hour]:', onChange: this.handleChangeInput}),
+                                makeInputJSON({id: 'discretisationDurationService' + typeForm + (i + 1), name: 'discretisationDurationService' + typeForm + (i + 1), type: 'select', placeholder: this.state.placeholders['discretisationDurationService' + typeForm + (i + 1)], value: this.state.values['discretisationDurationService' + typeForm + (i + 1)], options: [
+                                    {text: 'Day', value:'d'},
+                                    {text: 'Week', value:'w'},
+                                    {text: 'Month', value:'M'},
+                                    {text: 'Year', value:'y'}
+                                ], textLabel: 'Duration discretisation:', onChange: this.handleChangeInput}),
+                                makeInputJSON({id: 'quantityDiscretisationDurationService' + typeForm + (i + 1), name: 'quantityDiscretisationDurationService' + typeForm + (i + 1), type: 'number', placeholder: this.state.placeholders['quantityDiscretisationDurationService' + typeForm + (i + 1)], value: this.state.values['quantityDiscretisationDurationService' + typeForm + (i + 1)], textLabel: 'Quantity of duration discretisations per billing period:', onChange: this.handleChangeInput}),
+                                makeInputJSON({id: 'quantityBillingPeriodService' + typeForm + (i + 1), name: 'quantityBillingPeriodService' + typeForm + (i + 1), type: 'number', placeholder: this.state.placeholders['quantityBillingPeriodService' + typeForm + (i + 1)], value: this.state.values['quantityBillingPeriodService' + typeForm + (i + 1)], textLabel: 'Quantity of billing periods:', onChange: this.handleChangeInput}),
+                                makeInputJSON({id: 'isIncrementalBillingPeriodIdsService' + typeForm + (i + 1), name: 'isIncrementalBillingPeriodIdsService' + typeForm + (i + 1), type: 'checkbox', placeholder: this.state.placeholders['isIncrementalBillingPeriodIdsService' + typeForm + (i + 1)], value: this.state.values['isIncrementalBillingPeriodIdsService' + typeForm + (i + 1)], textLabel: 'Are billing period IDs incremental?', onChange: this.handleChangeInput}),
+                                makeInputJSON({id: 'descriptionIncrementalService' + typeForm + (i + 1), name: 'descriptionIncrementalService' + typeForm + (i + 1), type: 'text', placeholder: this.state.placeholders['descriptionIncrementalService' + typeForm + (i + 1)], value: this.state.values['descriptionIncrementalService' + typeForm + (i + 1)], textLabel: 'Description:', onChange: this.handleChangeInput}),
+                                makeInputJSON({id: 'idBillingPeriodFirstIncrementalService' + typeForm + (i + 1), name: 'idBillingPeriodFirstIncrementalService' + typeForm + (i + 1), type: 'number', placeholder: this.state.placeholders['idBillingPeriodFirstIncrementalService' + typeForm + (i + 1)], value: this.state.values['idBillingPeriodFirstIncrementalService' + typeForm + (i + 1)], textLabel: 'First billing period ID:', onChange: this.handleChangeInput})
+                            ]
+                        }
+                    ]);
+                    let subsections = [];
+                    if (this.state.values['quantityBillingPeriodService' + typeForm + (i + 1)] > 0) {
+                        for (j = 0; j < this.state.values['quantityBillingPeriodService' + typeForm + (i + 1)]; j++) {
+                            subsections = subsections.concat([
+                                {
+                                    titleSection: 'Service billing period ' + (j + 1),
+                                    inputs: [
+                                        makeInputJSON({id: 'descriptionIncrementService' + typeForm + (i + 1) + 's' + (j + 1), name: 'descriptionIncrementService' + typeForm + (i + 1) + 's' + (j + 1), type: 'text', placeholder: this.state.placeholders['descriptionIncrementService' + typeForm + (i + 1) + 's' + (j + 1)], value: this.state.values['descriptionIncrementService' + typeForm + (i + 1) + 's' + (j + 1)], textLabel: 'Description:', onChange: this.handleChangeInput}),
+                                        makeInputJSON({id: 'quantityRatePeriodsIncrementService' + typeForm + (i + 1) + 's' + (j + 1), name: 'quantityRatePeriodsIncrementService' + typeForm + (i + 1) + 's' + (j + 1), type: 'number', placeholder: this.state.placeholders['quantityRatePeriodsIncrementService' + typeForm + (i + 1) + 's' + (j + 1)], value: this.state.values['quantityRatePeriodsIncrementService' + typeForm + (i + 1) + 's' + (j + 1)], textLabel: 'Quantity of unit rate periods worked:', onChange: this.handleChangeInput})
+                                    ]
+                                }
+                            ]);
+                        }
+                    }
+                    subsectionsServices = subsectionsServices.concat(subsections);
+                }
+            }
+        }
+        console.log("this.state.values['typeForm']:", this.state.values['typeForm']);
+        console.log("typeForm:", typeForm);
+        console.log("values:", this.state.values);
+        console.log("sectionsGoods:", sectionsGoods);
+        console.log("sectionsServices:", sectionsServices);
+        console.log("subsectionsServices:", subsectionsServices);
+        const dataInvoiceOrEstimate = {
+            // ...stateContentFormInvoiceOrEstimate,
+            sectionsForm: sectionsForm,
+            sectionsGoods: sectionsGoods,
+            sectionsServices: sectionsServices,
+            subsectionsServices: subsectionsServices,
+        };
+        this.handleChangeStateContentFormInvoiceOrEstimate(dataInvoiceOrEstimate);
+    }
+    
+    render() {
+        let typeForm = this.state.values['typeForm'] == "0" ? "Invoice" : "Estimate";
+        return (
+            <div id={"div" + typeForm} className="container-section">
+                {this.state.sectionsForm.map(section => (
+                    <BlockFormSection key={section.titleSection} data={section}/>
+                ))}
+                {(this.state.sectionsGoods.length > 0) && (
+                    this.state.sectionsGoods.map(section => (
+                        <BlockFormSection key={section.titleSection} data={section}/>
+                    ))
+                )}
+                {(this.state.sectionsServices.length > 0) && (
+                    this.state.sectionsServices.map(section => (
+                        <BlockFormSection key={section.titleSection} data={section}/>
+                    ))
+                )}
+                {(this.state.subsectionsServices.length > 0) && (
+                    this.state.subsectionsServices.map(section => (
+                        <BlockFormSection key={section.titleSection} data={section}/>
+                    ))
+                )}
+            </div>
+        );
+    }
+}
+
+export default ContentFormInvoiceOrEstimate;

src/components/ControlsFillDefaults.jsx

@@ -0,0 +1,113 @@
+import React from 'react';
+
+function date2str(date_in) {
+    return date_in.getFullYear().toString() + '-' + (date_in.getMonth() + 1).toString().padStart(2, '0') + '-' + date_in.getDate().toString().padStart(2, '0');
+}
+function getDateBilling() {
+    return date2str(new Date(Date.now.getFullYear(), Date.now.getMonth(), -1));
+}
+function getValuesDefault() {
+    return {
+        typeForm: '0',
+        currency: '0',
+        nameMyBusiness: 'Precision And Research Technology Systems Limited',
+        companyNumberMyBusiness: '13587499',
+        emailMyBusiness: 'edward.middletonsmith@gmail.com',
+        address1MyBusiness: 'Unit 12a',
+        address2MyBusiness: 'Somers Road',
+        address3MyBusiness: 'Rugby',
+        address4MyBusiness: 'Warwickshire',
+        address5MyBusiness: 'CV22 7DH',
+        bankNameMyBusiness: 'Starling',
+        accountNameMyBusiness: 'Precision And Research Technology Systems Limited',
+        accountNumberMyBusiness: '40168366',
+        sortCodeMyBusiness: '60-83-71',
+        nameTheirBusiness: 'Contechs Technical Resourcing Limited',
+        codeTheirBusiness: 'Contechs',
+        emailTheirBusiness: 'account@contechs.co.uk',
+        phoneTheirBusiness: '01268 582900',
+        address1TheirBusiness: '2 Sable Court',
+        address2TheirBusiness: 'Southfields Business Park',
+        address3TheirBusiness: 'Basildon',
+        address4TheirBusiness: 'Essex',
+        address5TheirBusiness: 'SS15 6SR',
+        nameContactTheirBusiness: 'Simon Bant',
+        address1ContactTheirBusiness: 'Jaguar Land Rover',
+        address2ContactTheirBusiness: 'Banbury Road',
+        address3ContactTheirBusiness: 'Gaydon',
+        address4ContactTheirBusiness: 'Warwickshire',
+        address5ContactTheirBusiness: 'CV35 0RR',
+        dateBillingInvoice: getDateBilling(),
+        typeInvoice: '1', // services
+        quantityServicesInvoice: 1,
+
+        discretisationRateServiceInvoice1: 'h',
+        quantityDiscretisationRateServiceInvoice1: 1,
+        rateServiceInvoice1: 23.94,
+        discretisationDurationServiceInvoice1: 'w',
+        quantityDiscretisationDurationServiceInvoice1: 1,
+        quantityBillingPeriodServiceInvoice1: 4,
+        isIncrementalBillingPeriodIdsServiceInvoice1: true,
+        descriptionIncrementalServiceInvoice1: "Contractor services - week ",
+        idBillingPeriodFirstIncrementalServiceInvoice1: 1,
+
+        descriptionIncrementServiceInvoice1s1: "Contractor services - week 1",
+        quantityRatePeriodsIncrementServiceInvoice1s1: 40,
+        descriptionIncrementServiceInvoice1s2: "Contractor services - week 2",
+        quantityRatePeriodsIncrementServiceInvoice1s2: 40,
+        descriptionIncrementServiceInvoice1s3: "Contractor services - week 3",
+        quantityRatePeriodsIncrementServiceInvoice1s3: 40,
+        descriptionIncrementServiceInvoice1s4: "Contractor services - week 4",
+        quantityRatePeriodsIncrementServiceInvoice1s4: 40,
+    };
+}
+
+const ControlsFillDefaults = () => {
+    const defaults = getValuesDefault();
+
+    function getDefaultsMyBusiness() {
+        localStorage.setItem('nameMyBusiness', 'Precision And Research Technology Systems Limited');
+        localStorage.setItem('companyNumberMyBusiness', '13587499');
+        localStorage.setItem('emailMyBusiness', 'edward.middletonsmith@gmail.com');
+        localStorage.setItem('address1', 'Unit 12a');
+        localStorage.setItem('address2', 'Somers Road');
+        localStorage.setItem('address3', 'Rugby');
+        localStorage.setItem('address4', 'Warwickshire');
+        localStorage.setItem('address5', 'CV22 7DH');
+    }
+    function getDefaultsMyBusinessBank() {
+        localStorage.setItem('bankName', 'Starling');
+        localStorage.setItem('accountName', 'Precision And Research Technology Systems Limited');
+        localStorage.setItem('accountNumber', '40168366');
+        localStorage.setItem('sortCode', '60-83-71');
+    }
+    function getDefaultsTheirBusiness() {
+        localStorage.setItem('name', 'Contechs Technical Resourcing Limited');
+        localStorage.setItem('code', 'Contechs');
+        localStorage.setItem('email', 'account@contechs.co.uk');
+        localStorage.setItem('phone', '01268 582900');
+        localStorage.setItem('address1', '2 Sable Court');
+        localStorage.setItem('address2', 'Southfields Business Park');
+        localStorage.setItem('address3', 'Basildon');
+        localStorage.setItem('address4', 'Essex');
+        localStorage.setItem('address5', 'SS15 6SR');
+    }
+    function getDefaultsTheirBusinessContact() {
+        localStorage.setItem('name', 'Simon Bant');
+        localStorage.setItem('address1', 'Jaguar Land Rover');
+        localStorage.setItem('address2', 'Banbury Road');
+        localStorage.setItem('address3', 'Gaydon');
+        localStorage.setItem('address4', 'Warwickshire');
+        localStorage.setItem('address5', 'CV35 0RR');
+    }
+
+    return (
+        <div>
+            <button type="button" id="btn_defaults_inv">Defaults - Invoice</button>
+            <button type="button" id="btn_defaults_est">Defaults - Estimate</button>
+            <button type="button" id="btn_defaults_pay">Defaults - Payment Plan</button>
+        </div>
+    )
+};
+
+export default ControlsFillDefaults;

src/components/Input.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+const makeInputJSON = (dictArgs) => {
+    const {id, name, value = null, textLabel = null, type = null, placeholder = null, stepValue = null, minValue = null, options = null, onChange = function() {}} = dictArgs;
+    return {
+        id: id,
+        name: name,
+        value: value,
+        textLabel: textLabel,
+        type: type,
+        placeholder: placeholder,
+        stepValue: stepValue,
+        minValue: minValue,
+        options: options,
+        onChange: onChange
+    };
+};
+
+const InputWrapped = (props) => {
+    const { id, name, value, textLabel, type, placeholder, step, valueMin, options, onChange } = props.data;
+
+    return (
+        <div className="container-input">
+            <label className="input_label">{textLabel}</label>
+        {(type == 'date') && (
+            <input type="date" id={id} name={name} value={value == null ? "" : value} onChange={onChange}/>
+        )}
+        {(type == 'text') && (
+            <input type="text" id={id} name={name} value={value == null ? "" : value} placeholder={placeholder} onChange={onChange}/>
+        )}
+        {(type == 'number') && (
+            <input type="number" id={id} name={name} value={value == null ? "" : value} placeholder={placeholder} step={step} min={valueMin} onChange={onChange}/>
+        )}
+        {(type == 'checkbox') && (
+            <input type="checkbox" id={id} name={name} value={value == null ? "" : value} onChange={onChange}/>
+        )}
+        {(type == 'select') && (
+            <select id={id} name={name} value={value == null ? "" : value} onChange={onChange}>
+                {options.map((item, index) => (
+                    <option key={index} id={item['id']}>{item['textLabel']}</option>
+                ))}    
+            </select>
+        )}
+        {(type == 'button') && (
+            <button id={id} name={name} value={value == null ? "" : value} onChange={onChange}>{textLabel}</button>
+        )}
+        </div>
+    )
+};
+
+export default InputWrapped; // { InputWrapped, makeInputJSON };

src/components/MainContentForm.jsx

@@ -0,0 +1,175 @@
+import React, { Component } from 'react';
+import BlockFormSection from './BlockFormSection';
+// import getValuesDefault from './ControlsFillDefaults';
+import InputWrapped from './Input';
+import ContentFormInvoiceOrEstimate from './ContentFormInvoiceOrEstimate';
+import methods from './MethodsInput';
+const makeInputJSON = (dictArgs) => {
+    return methods.makeInputJSON(dictArgs);
+}
+
+class MainContentForm extends Component {
+
+    constructor(props) {
+        super(props);
+        const values = {
+            typeForm: "0",
+            currency: '0',
+            nameMyBusiness: '',
+            companyNumberMyBusiness: '',
+            emailMyBusiness: '',
+            address1MyBusiness: '',
+            address2MyBusiness: '',
+            address3MyBusiness: '',
+            address4MyBusiness: '',
+            address5MyBusiness: '',
+            bankNameMyBusiness: '',
+            accountNameMyBusiness: '',
+            accountNumberMyBusiness: '',
+            sortCodeMyBusiness: '',
+            nameTheirBusiness: '',
+            codeTheirBusiness: '',
+            emailTheirBusiness: '',
+            phoneTheirBusiness: '',
+            address1TheirBusiness: '',
+            address2TheirBusiness: '',
+            address3TheirBusiness: '',
+            address4TheirBusiness: '',
+            address5TheirBusiness: '',
+            nameContactTheirBusiness: '',
+            address1ContactTheirBusiness: '',
+            address2ContactTheirBusiness: '',
+            address3ContactTheirBusiness: '',
+            address4ContactTheirBusiness: '',
+            address5ContactTheirBusiness: '',
+            typeInvoice: '', 
+            quantityServicesInvoice: '',
+            discretisationRateServiceInvoice1: '',
+            quantityDiscretisationRateServiceInvoice1: '',
+            rateServiceInvoice1: '',
+            discretisationDurationServiceInvoice1: '',
+            quantityDiscretisationDurationServiceInvoice1: '',
+            quantityBillingPeriodServiceInvoice1: '',
+            isIncrementalBillingPeriodIdsServiceInvoice1: '',
+            descriptionIncrementalServiceInvoice1: '',
+            idBillingPeriodFirstIncrementalServiceInvoice1: '',
+            descriptionIncrementServiceInvoice1s1: '',
+            quantityRatePeriodsIncrementServiceInvoice1s1: '',
+            descriptionIncrementServiceInvoice1s2: '',
+            quantityRatePeriodsIncrementServiceInvoice1s2: '',
+            descriptionIncrementServiceInvoice1s3: '',
+            quantityRatePeriodsIncrementServiceInvoice1s3: '',
+            descriptionIncrementServiceInvoice1s4: '',
+            quantityRatePeriodsIncrementServiceInvoice1s4: ''
+        };
+        this.state = { values: {...values, ...props.values }, placeholders: props.placeholders, sectionsMainContentForm: [], sectionsForm: [], sectionsGoods: [], sectionsServices: [], subsectionsServices: []};
+        console.log("placeholders: ", props.placeholders);
+        this.initialiseElements();
+    }
+
+    handleChangeStateMainContentForm(stateNew) {
+        this.setState((statePrevious) => ({
+            ...statePrevious,
+            ...stateNew
+        }));
+    }
+
+    handleChangeInput(event) {
+        const { elementInput } = event.target;
+        this.handleChangeStateMainContentForm({[elementInput.name]: elementInput.value});
+    }
+
+    initialiseElements() {
+        let sectionsMainContentForm = [
+            {
+                titleSection: 'Invoice Metadata',
+                inputs: [
+                    makeInputJSON({id: 'typeForm', name: 'typeForm', value: this.state.values['typeForm'], textLabel: 'Form type:', type: 'select', placeholder: this.state.placeholders['typeForm'], options: [
+                        {text: '-', value: '0'}, 
+                        {text: 'INVOICE', value: '1'}, 
+                        {text: 'ESTIMATE', value: '2'}, 
+                        {text: 'PAYMENT-PLAN', value: '3'}
+                    ], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'currency', name: 'currency', value: this.state.values['currency'], textLabel: 'Currency:', type: 'select', options: [
+                        {text: '£', value: '0'}, 
+                        {text: '$', value: '1'}, 
+                        {text: '€', value: '2'}, 
+                        {text: 'Other', value: '3'}
+                    ], onChange: this.handleChangeInput})
+                ]
+            },
+            {
+                titleSection: 'My Business Details',
+                inputs: [
+                    makeInputJSON({id: 'nameMyBusiness', name: 'nameMyBusiness', value: this.state.values['nameMyBusiness'], textLabel: 'Name:', type: 'text', placeholder: this.state.placeholders['nameMyBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'companyNumberMyBusiness', name: 'companyNumberMyBusiness', value: this.state.values['companyNumberMyBusiness'], textLabel: 'Company number:', type: 'text', placeholder: this.state.placeholders['companyNumberMyBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'emailMyBusiness', name: 'emailMyBusiness', value: this.state.values['emailMyBusiness'], textLabel: 'Email:', type:'text', placeholder: this.state.placeholders['emailMyBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'address1MyBusiness', name: 'address1MyBusiness', value: this.state.values['address1MyBusiness'], textLabel: 'Address line 1:', type:'text', placeholder: this.state.placeholders['address1MyBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'address2MyBusiness', name: 'address2MyBusiness', value: this.state.values['address2MyBusiness'], textLabel: 'Address line 2:', type:'text', placeholder: this.state.placeholders['address2MyBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'address3MyBusiness', name: 'address3MyBusiness', value: this.state.values['address3MyBusiness'], textLabel: 'Address line 3:', type:'text', placeholder: this.state.placeholders['address3MyBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'address4MyBusiness', name: 'address4MyBusiness', value: this.state.values['address4MyBusiness'], textLabel: 'Address line 4:', type:'text', placeholder: this.state.placeholders['address4MyBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'address5MyBusiness', name: 'address5MyBusiness', value: this.state.values['address5MyBusiness'], textLabel: 'Address line 5:', type:'text', placeholder: this.state.placeholders['address5MyBusiness'], onChange: this.handleChangeInput})
+                ]
+            },
+            {
+                titleSection: 'My Business Bank Details',
+                inputs: [
+                    makeInputJSON({id: 'nameBankMyBusiness', name: 'nameBankMyBusiness', value: this.state.values['nameBankMyBusiness'], textLabel: 'Bank name:', type:'text', placeholder: this.state.placeholders['nameBankMyBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'accountNameBankMyBusiness', name: 'accountNameBankMyBusiness', value: this.state.values['accountNameBankMyBusiness'], textLabel: 'Account name:', type:'text', placeholder: this.state.placeholders['accountNameBankMyBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'accountNumberBankMyBusiness', name: 'accountNumberBankMyBusiness', value: this.state.values['accountNumberBankMyBusiness'], textLabel: 'Account number:', type:'text', placeholder: this.state.placeholders['accountNumberBankMyBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'sortCodeBankMyBusiness', name: 'sortCodeBankMyBusiness', value: this.state.values['sortCodeBankMyBusiness'], textLabel: 'Sort code:', type:'text', placeholder: this.state.placeholders['sortCodeBankMyBusiness'], onChange: this.handleChangeInput})
+                ]
+            },
+            {
+                titleSection: 'Their Business Details',
+                inputs: [
+                    makeInputJSON({id: 'nameTheirBusiness', name: 'nameTheirBusiness', value: this.state.values['nameTheirBusiness'], textLabel: 'Name:', type:'text', placeholder: this.state.placeholders['nameTheirBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'codeTheirBusiness', name: 'codeTheirBusiness', value: this.state.values['codeTheirBusiness'], textLabel: 'Code:', type:'text', placeholder: this.state.placeholders['codeTheirBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'emailTheirBusiness', name: 'emailTheirBusiness', value: this.state.values['emailTheirBusiness'], textLabel: 'Email:', type:'text', placeholder: this.state.placeholders['emailTheirBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'phoneTheirBusiness', name: 'phoneTheirBusiness', value: this.state.values['phoneTheirBusiness'], textLabel: 'Phone:', type:'text', placeholder: this.state.placeholders['phoneTheirBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'address1TheirBusiness', name: 'address1TheirBusiness', value: this.state.values['address1TheirBusiness'], textLabel: 'Address line 1:', type:'text', placeholder: this.state.placeholders['address1TheirBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'address2TheirBusiness', name: 'address2TheirBusiness', value: this.state.values['address2TheirBusiness'], textLabel: 'Address line 2:', type:'text', placeholder: this.state.placeholders['address2TheirBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'address3TheirBusiness', name: 'address3TheirBusiness', value: this.state.values['address3TheirBusiness'], textLabel: 'Address line 3:', type:'text', placeholder: this.state.placeholders['address3TheirBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'address4TheirBusiness', name: 'address4TheirBusiness', value: this.state.values['address4TheirBusiness'], textLabel: 'Address line 4:', type:'text', placeholder: this.state.placeholders['address4TheirBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'address5TheirBusiness', name: 'address5TheirBusiness', value: this.state.values['address5TheirBusiness'], textLabel: 'Address line 5:', type:'text', placeholder: this.state.placeholders['address5TheirBusiness'], onChange: this.handleChangeInput})
+                ]
+            },
+            {
+                titleSection: 'Their Business Contact Details',
+                inputs: [
+                    makeInputJSON({id: 'nameContactTheirBusiness', name: 'nameContactTheirBusiness', value: this.state.values['nameContactTheirBusiness'], textLabel: 'Name:', type:'text', placeholder: this.state.placeholders['nameContactTheirBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'address1ContactTheirBusiness', name: 'address1ContactTheirBusiness', value: this.state.values['address1ContactTheirBusiness'], textLabel: 'Address line 1:', type:'text', placeholder: this.state.placeholders['address1ContactTheirBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'address2ContactTheirBusiness', name: 'address2ContactTheirBusiness', value: this.state.values['address2ContactTheirBusiness'], textLabel: 'Address line 2:', type:'text', placeholder: this.state.placeholders['address2ContactTheirBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'address3ContactTheirBusiness', name: 'address3ContactTheirBusiness', value: this.state.values['address3ContactTheirBusiness'], textLabel: 'Address line 3:', type:'text', placeholder: this.state.placeholders['address3ContactTheirBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'address4ContactTheirBusiness', name: 'address4ContactTheirBusiness', value: this.state.values['address4ContactTheirBusiness'], textLabel: 'Address line 4:', type:'text', placeholder: this.state.placeholders['address4ContactTheirBusiness'], onChange: this.handleChangeInput}),
+                    makeInputJSON({id: 'address5ContactTheirBusiness', name: 'address5ContactTheirBusiness', value: this.state.values['address5ContactTheirBusiness'], textLabel: 'Address line 5:', type:'text', placeholder: this.state.placeholders['address5ContactTheirBusiness'], onChange: this.handleChangeInput})
+                ]
+            }
+        ];
+        this.handleChangeStateMainContentForm({ sectionsMainContentForm: sectionsMainContentForm });
+    }
+    handleSubmit() { };
+    clearForm() { };
+    
+    render() {
+        let typeForm = this.state.values['typeForm'] == "0" ? "Invoice" : "Estimate";
+        return (
+            <form onSubmit={this.handleSubmit} align="center">
+                {this.state.sectionsMainContentForm.map(section => (
+                    <BlockFormSection key={section.titleSection} data={section} />
+                ))}
+                {/* <makeSectionsForm data={ {valuesDefault: valuesDefault, placeholdersDefault: placeholdersDefault} } /> */}
+                {typeForm}
+                {(typeForm == 'Invoice' || typeForm == 'Estimate') &&
+                    <ContentFormInvoiceOrEstimate stateMainContentForm={this.state} handleChangeStateMainContentForm={this.handleChangeStateMainContentForm} />
+                }
+                <div>
+                    <button type="button" id="buttonFormClear" onClick={this.clearForm}>Clear Form</button>
+                    <input type="submit" value="Submit" id="buttonFormSubmit"/>
+                </div>
+            </form>
+        );
+    }
+}
+
+export default MainContentForm;

src/components/MainContentForm_functional.jsx

@@ -0,0 +1,322 @@
+import React, {useEffect, useState} from 'react';
+import BlockFormSection from './BlockFormSection';
+import getValuesDefault from './ControlsFillDefaults';
+import InputWrapped from './Input';
+import ContentFormInvoiceOrEstimate from './ContentFormInvoiceOrEstimate';
+import methods from './MethodsInput';
+const makeInputJSON = (dictArgs) => {
+    return methods.makeInputJSON(dictArgs);
+}
+
+const getValuesDefaultFromPlaceholders = (placeholdersDefault) => {
+    const values = {
+        typeForm: "0",
+        currency: '0',
+        nameMyBusiness: '',
+        companyNumberMyBusiness: '',
+        emailMyBusiness: '',
+        address1MyBusiness: '',
+        address2MyBusiness: '',
+        address3MyBusiness: '',
+        address4MyBusiness: '',
+        address5MyBusiness: '',
+        bankNameMyBusiness: '',
+        accountNameMyBusiness: '',
+        accountNumberMyBusiness: '',
+        sortCodeMyBusiness: '',
+        nameTheirBusiness: '',
+        codeTheirBusiness: '',
+        emailTheirBusiness: '',
+        phoneTheirBusiness: '',
+        address1TheirBusiness: '',
+        address2TheirBusiness: '',
+        address3TheirBusiness: '',
+        address4TheirBusiness: '',
+        address5TheirBusiness: '',
+        nameContactTheirBusiness: '',
+        address1ContactTheirBusiness: '',
+        address2ContactTheirBusiness: '',
+        address3ContactTheirBusiness: '',
+        address4ContactTheirBusiness: '',
+        address5ContactTheirBusiness: '',
+        typeInvoice: '', 
+        quantityServicesInvoice: '',
+        discretisationRateServiceInvoice1: '',
+        quantityDiscretisationRateServiceInvoice1: '',
+        rateServiceInvoice1: '',
+        discretisationDurationServiceInvoice1: '',
+        quantityDiscretisationDurationServiceInvoice1: '',
+        quantityBillingPeriodServiceInvoice1: '',
+        isIncrementalBillingPeriodIdsServiceInvoice1: '',
+        descriptionIncrementalServiceInvoice1: '',
+        idBillingPeriodFirstIncrementalServiceInvoice1: '',
+        descriptionIncrementServiceInvoice1s1: '',
+        quantityRatePeriodsIncrementServiceInvoice1s1: '',
+        descriptionIncrementServiceInvoice1s2: '',
+        quantityRatePeriodsIncrementServiceInvoice1s2: '',
+        descriptionIncrementServiceInvoice1s3: '',
+        quantityRatePeriodsIncrementServiceInvoice1s3: '',
+        descriptionIncrementServiceInvoice1s4: '',
+        quantityRatePeriodsIncrementServiceInvoice1s4: ''
+    }; // = placeholdersDefault;
+    /*
+    const combined = {};
+    for (const key in values) {
+        if (placeholdersDefault.hasOwnProperty(key)) {
+            combined[key] = placeholdersDefault[key];
+        }
+        else {
+            combined[key] = values[key];
+        }
+    }
+    return combined;
+    */
+    return Object.keys(values).reduce((result, key) => {
+        if (placeholdersDefault.hasOwnProperty(key)) {
+            result[key] = placeholdersDefault[key];
+        } else {
+            result[key] = values[key];
+        }
+        return result;
+    }, {});
+    /*{
+        typeForm: typeForm,
+        currency: currency,
+        nameMyBusiness: nameMyBusiness,
+        companyNumberMyBusiness: companyNumberMyBusiness,
+        emailMyBusiness: emailMyBusiness,
+        address1MyBusiness: address1MyBusiness,
+        address2MyBusiness: address2MyBusiness,
+        address3MyBusiness: address3MyBusiness,
+        address4MyBusiness: address4MyBusiness,
+        address5MyBusiness: address5MyBusiness,
+        bankNameMyBusiness: bankNameMyBusiness,
+        accountNameMyBusiness: accountNameMyBusiness,
+        accountNumberMyBusiness: accountNumberMyBusiness,
+        sortCodeMyBusiness: sortCodeMyBusiness,
+        nameTheirBusiness: nameTheirBusiness,
+        codeTheirBusiness: codeTheirBusiness,
+        emailTheirBusiness: emailTheirBusiness,
+        phoneTheirBusiness: phoneTheirBusiness,
+        address1TheirBusiness: address1TheirBusiness,
+        address2TheirBusiness: address2TheirBusiness,
+        address3TheirBusiness: address3TheirBusiness,
+        address4TheirBusiness: address4TheirBusiness,
+        address5TheirBusiness: address5TheirBusiness,
+        nameContactTheirBusiness: nameContactTheirBusiness,
+        address1ContactTheirBusiness: address1ContactTheirBusiness,
+        address2ContactTheirBusiness: address2ContactTheirBusiness,
+        address3ContactTheirBusiness: address3ContactTheirBusiness,
+        address4ContactTheirBusiness: address4ContactTheirBusiness,
+        address5ContactTheirBusiness: address5ContactTheirBusiness,
+        typeInvoice: typeInvoice, 
+        quantityServicesInvoice: quantityServicesInvoice,
+        discretisationRateServiceInvoice1: discretisationRateServiceInvoice1,
+        quantityDiscretisationRateServiceInvoice1: quantityDiscretisationRateServiceInvoice1,
+        rateServiceInvoice1: rateServiceInvoice1,
+        discretisationDurationServiceInvoice1: discretisationDurationServiceInvoice1,
+        quantityDiscretisationDurationServiceInvoice1: quantityDiscretisationDurationServiceInvoice1,
+        quantityBillingPeriodServiceInvoice1: quantityBillingPeriodServiceInvoice1,
+        isIncrementalBillingPeriodIdsServiceInvoice1: isIncrementalBillingPeriodIdsServiceInvoice1,
+        descriptionIncrementalServiceInvoice1: descriptionIncrementalServiceInvoice1,
+        idBillingPeriodFirstIncrementalServiceInvoice1: idBillingPeriodFirstIncrementalServiceInvoice1,
+        descriptionIncrementServiceInvoice1s1: descriptionIncrementServiceInvoice1s1,
+        quantityRatePeriodsIncrementServiceInvoice1s1: quantityRatePeriodsIncrementServiceInvoice1s1,
+        descriptionIncrementServiceInvoice1s2: descriptionIncrementServiceInvoice1s2,
+        quantityRatePeriodsIncrementServiceInvoice1s2: quantityRatePeriodsIncrementServiceInvoice1s2,
+        descriptionIncrementServiceInvoice1s3: descriptionIncrementServiceInvoice1s3,
+        quantityRatePeriodsIncrementServiceInvoice1s3: quantityRatePeriodsIncrementServiceInvoice1s3,
+        descriptionIncrementServiceInvoice1s4: descriptionIncrementServiceInvoice1s4,
+        quantityRatePeriodsIncrementServiceInvoice1s4: quantityRatePeriodsIncrementServiceInvoice1s4
+    };*/
+}
+
+const MainContentForm = (props) => {
+    const placeholdersDefault = props.data;
+    // const valuesDefault = getValuesDefault();
+    console.log("placeholders: ", placeholdersDefault);
+    const values = {
+        typeForm: "0",
+        currency: '0',
+        nameMyBusiness: '',
+        companyNumberMyBusiness: '',
+        emailMyBusiness: '',
+        address1MyBusiness: '',
+        address2MyBusiness: '',
+        address3MyBusiness: '',
+        address4MyBusiness: '',
+        address5MyBusiness: '',
+        bankNameMyBusiness: '',
+        accountNameMyBusiness: '',
+        accountNumberMyBusiness: '',
+        sortCodeMyBusiness: '',
+        nameTheirBusiness: '',
+        codeTheirBusiness: '',
+        emailTheirBusiness: '',
+        phoneTheirBusiness: '',
+        address1TheirBusiness: '',
+        address2TheirBusiness: '',
+        address3TheirBusiness: '',
+        address4TheirBusiness: '',
+        address5TheirBusiness: '',
+        nameContactTheirBusiness: '',
+        address1ContactTheirBusiness: '',
+        address2ContactTheirBusiness: '',
+        address3ContactTheirBusiness: '',
+        address4ContactTheirBusiness: '',
+        address5ContactTheirBusiness: '',
+        typeInvoice: '', 
+        quantityServicesInvoice: '',
+        discretisationRateServiceInvoice1: '',
+        quantityDiscretisationRateServiceInvoice1: '',
+        rateServiceInvoice1: '',
+        discretisationDurationServiceInvoice1: '',
+        quantityDiscretisationDurationServiceInvoice1: '',
+        quantityBillingPeriodServiceInvoice1: '',
+        isIncrementalBillingPeriodIdsServiceInvoice1: '',
+        descriptionIncrementalServiceInvoice1: '',
+        idBillingPeriodFirstIncrementalServiceInvoice1: '',
+        descriptionIncrementServiceInvoice1s1: '',
+        quantityRatePeriodsIncrementServiceInvoice1s1: '',
+        descriptionIncrementServiceInvoice1s2: '',
+        quantityRatePeriodsIncrementServiceInvoice1s2: '',
+        descriptionIncrementServiceInvoice1s3: '',
+        quantityRatePeriodsIncrementServiceInvoice1s3: '',
+        descriptionIncrementServiceInvoice1s4: '',
+        quantityRatePeriodsIncrementServiceInvoice1s4: ''
+    };
+    const valuesDefault = { ...values, ...placeholdersDefault }; // getValuesDefaultFromPlaceholders(placeholdersDefault);
+    let typeForm = valuesDefault['typeForm'] == 0 ? 'Invoice' : 'Estimate';
+    
+    const [stateMainContentForm, setStateMainContentForm] = useState({ sectionsMainContentForm: [], sectionsForm: [], sectionsGoods: [], sectionsServices: [], subsectionsServices: []});
+    const handleChangeStateMainContentForm = (stateNew) => {
+        setStateMainContentForm(stateNew);
+    };
+    const handleChangeInputMainContentForm = (event) => {
+        const { elementInput } = event.target;
+        let valueInput = {};
+        valueInput[elementInput.name] = elementInput.value;
+        handleChangeStateMainContentForm({
+            ...stateMainContentForm,
+            ...valueInput
+        });
+    };
+
+    useEffect(() => {
+        const dataMainContentForm = {
+            ...stateMainContentForm,
+            sectionsMainContentForm: [
+                {
+                    titleSection: 'Invoice Metadata',
+                    inputs: [
+                        makeInputJSON({id: 'typeForm', name: 'typeForm', value: valuesDefault['typeForm'], textLabel: 'Form type:', type: 'select', placeholder: placeholdersDefault['typeForm'], options: [
+                            {text: '-', value: '0'}, 
+                            {text: 'INVOICE', value: '1'}, 
+                            {text: 'ESTIMATE', value: '2'}, 
+                            {text: 'PAYMENT-PLAN', value: '3'}
+                        ], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'currency', name: 'currency', value: valuesDefault['currency'], textLabel: 'Currency:', type: 'select', options: [
+                            {text: '£', value: '0'}, 
+                            {text: '$', value: '1'}, 
+                            {text: '€', value: '2'}, 
+                            {text: 'Other', value: '3'}
+                        ], onChange: handleChangeInputMainContentForm})
+                    ]
+                },
+                {
+                    titleSection: 'My Business Details',
+                    inputs: [
+                        makeInputJSON({id: 'nameMyBusiness', name: 'nameMyBusiness', value: valuesDefault['nameMyBusiness'], textLabel: 'Name:', type: 'text', placeholder: placeholdersDefault['nameMyBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'companyNumberMyBusiness', name: 'companyNumberMyBusiness', value: valuesDefault['companyNumberMyBusiness'], textLabel: 'Company number:', type: 'text', placeholder: placeholdersDefault['companyNumberMyBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'emailMyBusiness', name: 'emailMyBusiness', value: valuesDefault['emailMyBusiness'], textLabel: 'Email:', type:'text', placeholder: placeholdersDefault['emailMyBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'address1MyBusiness', name: 'address1MyBusiness', value: valuesDefault['address1MyBusiness'], textLabel: 'Address line 1:', type:'text', placeholder: placeholdersDefault['address1MyBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'address2MyBusiness', name: 'address2MyBusiness', value: valuesDefault['address2MyBusiness'], textLabel: 'Address line 2:', type:'text', placeholder: placeholdersDefault['address2MyBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'address3MyBusiness', name: 'address3MyBusiness', value: valuesDefault['address3MyBusiness'], textLabel: 'Address line 3:', type:'text', placeholder: placeholdersDefault['address3MyBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'address4MyBusiness', name: 'address4MyBusiness', value: valuesDefault['address4MyBusiness'], textLabel: 'Address line 4:', type:'text', placeholder: placeholdersDefault['address4MyBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'address5MyBusiness', name: 'address5MyBusiness', value: valuesDefault['address5MyBusiness'], textLabel: 'Address line 5:', type:'text', placeholder: placeholdersDefault['address5MyBusiness'], onChange: handleChangeInputMainContentForm})
+                    ]
+                },
+                {
+                    titleSection: 'My Business Bank Details',
+                    inputs: [
+                        makeInputJSON({id: 'nameBankMyBusiness', name: 'nameBankMyBusiness', value: valuesDefault['nameBankMyBusiness'], textLabel: 'Bank name:', type:'text', placeholder: placeholdersDefault['nameBankMyBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'accountNameBankMyBusiness', name: 'accountNameBankMyBusiness', value: valuesDefault['accountNameBankMyBusiness'], textLabel: 'Account name:', type:'text', placeholder: placeholdersDefault['accountNameBankMyBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'accountNumberBankMyBusiness', name: 'accountNumberBankMyBusiness', value: valuesDefault['accountNumberBankMyBusiness'], textLabel: 'Account number:', type:'text', placeholder: placeholdersDefault['accountNumberBankMyBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'sortCodeBankMyBusiness', name: 'sortCodeBankMyBusiness', value: valuesDefault['sortCodeBankMyBusiness'], textLabel: 'Sort code:', type:'text', placeholder: placeholdersDefault['sortCodeBankMyBusiness'], onChange: handleChangeInputMainContentForm})
+                    ]
+                },
+                {
+                    titleSection: 'Their Business Details',
+                    inputs: [
+                        makeInputJSON({id: 'nameTheirBusiness', name: 'nameTheirBusiness', value: valuesDefault['nameTheirBusiness'], textLabel: 'Name:', type:'text', placeholder: placeholdersDefault['nameTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'codeTheirBusiness', name: 'codeTheirBusiness', value: valuesDefault['codeTheirBusiness'], textLabel: 'Code:', type:'text', placeholder: placeholdersDefault['codeTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'emailTheirBusiness', name: 'emailTheirBusiness', value: valuesDefault['emailTheirBusiness'], textLabel: 'Email:', type:'text', placeholder: placeholdersDefault['emailTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'phoneTheirBusiness', name: 'phoneTheirBusiness', value: valuesDefault['phoneTheirBusiness'], textLabel: 'Phone:', type:'text', placeholder: placeholdersDefault['phoneTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'address1TheirBusiness', name: 'address1TheirBusiness', value: valuesDefault['address1TheirBusiness'], textLabel: 'Address line 1:', type:'text', placeholder: placeholdersDefault['address1TheirBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'address2TheirBusiness', name: 'address2TheirBusiness', value: valuesDefault['address2TheirBusiness'], textLabel: 'Address line 2:', type:'text', placeholder: placeholdersDefault['address2TheirBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'address3TheirBusiness', name: 'address3TheirBusiness', value: valuesDefault['address3TheirBusiness'], textLabel: 'Address line 3:', type:'text', placeholder: placeholdersDefault['address3TheirBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'address4TheirBusiness', name: 'address4TheirBusiness', value: valuesDefault['address4TheirBusiness'], textLabel: 'Address line 4:', type:'text', placeholder: placeholdersDefault['address4TheirBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'address5TheirBusiness', name: 'address5TheirBusiness', value: valuesDefault['address5TheirBusiness'], textLabel: 'Address line 5:', type:'text', placeholder: placeholdersDefault['address5TheirBusiness'], onChange: handleChangeInputMainContentForm})
+                    ]
+                },
+                {
+                    titleSection: 'Their Business Contact Details',
+                    inputs: [
+                        makeInputJSON({id: 'nameContactTheirBusiness', name: 'nameContactTheirBusiness', value: valuesDefault['nameContactTheirBusiness'], textLabel: 'Name:', type:'text', placeholder: placeholdersDefault['nameContactTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'address1ContactTheirBusiness', name: 'address1ContactTheirBusiness', value: valuesDefault['address1ContactTheirBusiness'], textLabel: 'Address line 1:', type:'text', placeholder: placeholdersDefault['address1ContactTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'address2ContactTheirBusiness', name: 'address2ContactTheirBusiness', value: valuesDefault['address2ContactTheirBusiness'], textLabel: 'Address line 2:', type:'text', placeholder: placeholdersDefault['address2ContactTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'address3ContactTheirBusiness', name: 'address3ContactTheirBusiness', value: valuesDefault['address3ContactTheirBusiness'], textLabel: 'Address line 3:', type:'text', placeholder: placeholdersDefault['address3ContactTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'address4ContactTheirBusiness', name: 'address4ContactTheirBusiness', value: valuesDefault['address4ContactTheirBusiness'], textLabel: 'Address line 4:', type:'text', placeholder: placeholdersDefault['address4ContactTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+                        makeInputJSON({id: 'address5ContactTheirBusiness', name: 'address5ContactTheirBusiness', value: valuesDefault['address5ContactTheirBusiness'], textLabel: 'Address line 5:', type:'text', placeholder: placeholdersDefault['address5ContactTheirBusiness'], onChange: handleChangeInputMainContentForm})
+                    ]
+                }
+            ]
+        };
+        handleChangeStateMainContentForm(dataMainContentForm);
+    }, [placeholdersDefault, valuesDefault]);
+
+    /*
+    const handleButtonClick = () => {
+        const inputsUpdated = dataForm.inputs.map(input => ({
+            ...input,
+            value: 'Default value for input ${input.id}'
+        }));
+        setDataForm({
+            ...dataForm,
+            inputs: inputsUpdated
+        });
+    };
+    */
+    const handleSubmit = () => {
+    };
+    const clearForm = () => {
+    };
+
+    const fillDefaults = () => {
+        /*
+        for (let i = 0; i < valuesDefault.length; i++)
+        {
+
+        }
+        */
+    };
+
+    return (
+        <form onSubmit={handleSubmit} align="center">
+            {stateMainContentForm.sectionsMainContentForm.map(section => (
+                <BlockFormSection key={section.titleSection} data={section} />
+            ))}
+            {/* <makeSectionsForm data={ {valuesDefault: valuesDefault, placeholdersDefault: placeholdersDefault} } /> */}
+            {typeForm}
+            {(typeForm == 'Invoice' || typeForm == 'Estimate') &&
+                <ContentFormInvoiceOrEstimate valuesDefault={valuesDefault} placeholdersDefault={placeholdersDefault} handleChangeStateMainContentForm={handleChangeStateMainContentForm} />
+            }
+            <div>
+                <button type="button" id="buttonFormClear" onClick={clearForm}>Clear Form</button>
+                <input type="submit" value="Submit" id="buttonFormSubmit"/>
+            </div>
+        </form>
+    );
+};
+
+export default MainContentForm;

src/components/MethodsInput.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const makeInputJSON = (dictArgs) => {
+    const {id, name, value = null, textLabel = null, type = null, placeholder = null, stepValue = null, minValue = null, options = null, onChange = null} = dictArgs;
+    return {
+        id: id,
+        name: name,
+        value: value,
+        textLabel: textLabel,
+        type: type,
+        placeholder: placeholder,
+        stepValue: stepValue,
+        minValue: minValue,
+        options: options,
+        onChange: onChange
+    };
+};
+
+const methods = { makeInputJSON }
+export default methods;

src/config.js

@@ -0,0 +1,77 @@
+
+
+const getValuesDefaultFormMetadata = {
+    typeForm: '0',
+    currency: '0',
+};
+const getValuesDefaultMyBusiness = {
+    nameMyBusiness: 'Precision And Research Technology Systems Limited',
+    companyNumberMyBusiness: '13587499',
+    emailMyBusiness: 'edward.middletonsmith@gmail.com',
+    address1MyBusiness: 'Unit 12a',
+    address2MyBusiness: 'Somers Road',
+    address3MyBusiness: 'Rugby',
+    address4MyBusiness: 'Warwickshire',
+    address5MyBusiness: 'CV22 7DH',
+};
+const getValuesDefaultMyBusinessBank = {
+    bankNameMyBusiness: 'Starling',
+    accountNameMyBusiness: 'Precision And Research Technology Systems Limited',
+    accountNumberMyBusiness: '40168366',
+    sortCodeMyBusiness: '60-83-71',
+};
+const getValuesDefaultTheirBusiness = {
+    nameTheirBusiness: 'Contechs Technical Resourcing Limited',
+    codeTheirBusiness: 'Contechs',
+    emailTheirBusiness: 'account@contechs.co.uk',
+    phoneTheirBusiness: '01268 582900',
+    address1TheirBusiness: '2 Sable Court',
+    address2TheirBusiness: 'Southfields Business Park',
+    address3TheirBusiness: 'Basildon',
+    address4TheirBusiness: 'Essex',
+    address5TheirBusiness: 'SS15 6SR',
+};
+const getValuesDefaultTheirBusinessContact = {
+    nameContactTheirBusiness: 'Simon Bant',
+    address1ContactTheirBusiness: 'Jaguar Land Rover',
+    address2ContactTheirBusiness: 'Banbury Road',
+    address3ContactTheirBusiness: 'Gaydon',
+    address4ContactTheirBusiness: 'Warwickshire',
+    address5ContactTheirBusiness: 'CV35 0RR',
+};
+
+
+function date2str(date_in) {
+    return date_in.getFullYear().toString() + '-' + (date_in.getMonth() + 1).toString().padStart(2, '0') + '-' + date_in.getDate().toString().padStart(2, '0');
+}
+function getDateBilling() {
+    let nowTime = new Date(Date.now());
+    return date2str(new Date(nowTime.getFullYear(), nowTime.getMonth(), -1));
+}
+const getValuesDefaultInvoice = {
+    dateBillingInvoice: getDateBilling(),
+    typeInvoice: '1', // services
+    quantityServicesInvoice: 1,
+
+    discretisationRateServiceInvoice1: 'h',
+    quantityDiscretisationRateServiceInvoice1: 1,
+    rateServiceInvoice1: 23.94,
+    discretisationDurationServiceInvoice1: 'w',
+    quantityDiscretisationDurationServiceInvoice1: 1,
+    quantityBillingPeriodServiceInvoice1: 4,
+    isIncrementalBillingPeriodIdsServiceInvoice1: true,
+    descriptionIncrementalServiceInvoice1: "Contractor services - week ",
+    idBillingPeriodFirstIncrementalServiceInvoice1: 1,
+
+    descriptionIncrementServiceInvoice1s1: "Contractor services - week 1",
+    quantityRatePeriodsIncrementServiceInvoice1s1: 40,
+    descriptionIncrementServiceInvoice1s2: "Contractor services - week 2",
+    quantityRatePeriodsIncrementServiceInvoice1s2: 40,
+    descriptionIncrementServiceInvoice1s3: "Contractor services - week 3",
+    quantityRatePeriodsIncrementServiceInvoice1s3: 40,
+    descriptionIncrementServiceInvoice1s4: "Contractor services - week 4",
+    quantityRatePeriodsIncrementServiceInvoice1s4: 40,
+};
+
+const objReturn = { getValuesDefaultFormMetadata, getValuesDefaultMyBusiness, getValuesDefaultMyBusinessBank, getValuesDefaultTheirBusiness, getValuesDefaultTheirBusinessContact, getValuesDefaultInvoice };
+export default objReturn;

src/index.css

@@ -1,13 +1,155 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: 'Arial', 'Helvetica', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: lightpink;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+div {
+  width: 100%;
+  display: inline-block;
+}
+
+/* Inputs */
+input, button {
+  margin: 5px;
+  height: 4vh;
+  width: 20vw;
+  border-radius: 1vh;
+  border-color: darkviolet;
+  padding: 3px 10px 3px;
+}
+
+select {
+  height: 3vh;
+  width: 100px;
+  border-radius: 1vh;
+  border-width: 2px;
+  border-color: darkviolet;
+  padding: 3px 10px 3px;
+}
+
+
+datalist {
+  
+  /* display: flex;
+  display: block;
+  position: relative; */
+}
+option {
+  border-color: darkviolet;
+}
+
+input[type="text"] {
+  border-radius: 1vh;
+}
+
+input[type="number"] {
+  width: 3vw;
+}
+
+input[type="date"] {
+  width: 8vw;
+}
+
+input[type="checkbox"] {
+-moz-appearance:none;
+-webkit-appearance:none;
+-o-appearance:none;
+  outline: none;
+  content: none;
+  width: 50px;
+}
+input[type="checkbox"]:before {
+  width: 30px;
+  height: 30px;
+  content: '✓';
+  font-size: 20px;
+  font-style: bold;
+  text-align: center;
+  border-radius: 5px;
+  border: 2px solid darkviolet;
+  background-color: white;
+  color: transparent;
+  display: inline-block;
+  margin-top: 0px;
+  margin-bottom: 20px;
+}
+input[type="checkbox"]:checked:before {
+  color: black;
+}
+
+
+/* Labels */
+label {
+  margin: 5px;
+}
+
+.div_title {
+  font-size: 24px;
+}
+
+.input_title {
+  font-size: 20px;
+}
+
+.input_subtitle {
+  font-size: 18px;
+}
+
+.errmsg {
+  display: none;
+  visibility: hidden;
+}
+
+
+
+/* table */
+.div_label_input {
+  margin: auto;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.input_label {
+  box-sizing: border-box;
+  flex: 1;
+  margin: 1rem;
+  padding: 1rem;
+  border-radius: 5px;
+  width: 100%;
+}
+
+.input_label.label_title {
+  margin: 0;
+  padding: 0;
+  font-size: 20px;
+}
+
+.tbl_container {
+  display: flex;
+  flex-wrap: flex;
+  justify-content: center;
+}
+
+label.input_label {
+  padding-left: 5% !important;
+  padding-right: 5% !important;
+}
+
+.column {
+  align-items: center;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}

src/index.html

@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div id="root"></div>