Added HSN support

8 files changed, 44 insertions, 49 deletions

diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index a47616f..fbd9732 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -1,33 +1,39 @@
 import React, { useState } from "react";
 import AddNewItemForm from "./Form/AddNewItemForm";
 import ItemsDisplay from "./Display/ItemsDisplay";
-// import SummaryDisplay from "./Display/SummaryDisplay";
+import SummaryDisplay from "./Display/SummaryDisplay";
 
 const sampleData = [
   {
     "Model": "Kisan Chair",
     "Description": "Very good chair",
     "Price": 10000,
+    "HSN": 9403
   }, {
     "Model": "Supreme Chair",
     "Description": "Even better chair",
     "Price": "2134983",
+    "HSN": 9403
   }, {
     "Model": "Action Houseware",
     "Description": "Not a chair",
     "Price": 69,
+    "HSN": 69
   }, {
     "Model": "Coirfit Mattress",
     "Description": "Not a chair (neither houseware)",
     "Price": 19,
+    "HSN": 420
   }, {
     "Model": "AVRO Chair",
     "Description": "Formerly AVON lol",
     "Price": 291,
+    "HSN": 9403
   }, {
     "Model": "Mystery Item",
     "Description": "hehe heheheheheh",
     "Price": 1212312,
+    "HSN": 42069
   }
 ];
 
@@ -46,6 +52,7 @@ const BillingPage = () => {
     <div>
       <AddNewItemForm savedItems={sampleData} addItem={getItems} defGSTValue={defGSTValue}/>
       <ItemsDisplay items={items} defGSTValue={defGSTValue}/>
+      <SummaryDisplay items={items}/>
     </div>
   );
 }
diff --git a/src/components/BillingPage.js~ b/src/components/BillingPage.js~
deleted file mode 100644
index 6f5b18b..0000000
--- a/src/components/BillingPage.js~
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from "react";
-import AddNewItemForm from "./Form/AddNewItemForm.js";
-
-
-const sampleData = [
-  {
-    "Model": "Kisan Chair",
-    "Description": "Very good chair",
-    "Price": 10000,
-    "Discount": 0
-  }, {
-    "Model": "Supreme Chair",
-    "Description": "Even better chair",
-    "Price": "2134983",
-    "Discount": 0
-  }, {
-    "Model": "Action Houseware",
-    "Description": "Not a chair",
-    "Price": 69,
-    "Discount": 0
-  }
-];
-
-let addedItems = [];
-const getAddedItems = (item) => {
-  console.log(item);
-  addedItems.push(item);
-  console.log(addedItems);
-}
-
-const BillingPage = () => {
-  return (
-    <>
-      <AddNewItemForm savedItems={sampleData} addItem={getAddedItems} defGSTValue={18}/>
-    </>
-  );
-}
-
-export default BillingPage;
diff --git a/src/components/Display/Display.css b/src/components/Display/Display.css
index 74aa31e..bbec236 100644
--- a/src/components/Display/Display.css
+++ b/src/components/Display/Display.css
@@ -39,5 +39,6 @@ $defShadow: 0px 0px 4px #232627;
 .ItemsDisplay .leftAlign {
   text-align: left; }
 
-.SummaryDisplayTR {
-  color: #FF79C6; }
+.SummaryDisplayTR td {
+  color: #FF79C6;
+  font-size: 1.7rem; }
diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss
index ec6cc65..34a30f4 100644
--- a/src/components/Display/Display.scss
+++ b/src/components/Display/Display.scss
@@ -35,8 +35,9 @@
   text-align: left;
 }
 
-.SummaryDisplayTR {
+.SummaryDisplayTR td {
   color: $altFG;
+  font-size: 1.7rem;
 }
 
 
diff --git a/src/components/Display/DisplayItem.js b/src/components/Display/DisplayItem.js
index 849bfc5..472ae47 100644
--- a/src/components/Display/DisplayItem.js
+++ b/src/components/Display/DisplayItem.js
@@ -13,6 +13,7 @@ const DisplayItem = (props) => {
       <td>{item.Quantity}</td>
       <td className={item.Discount === 0 ? "disabledBorder" : ""}>{item.Discount}</td>
       <td className={item.GST === props.defGSTValue ? "" : "warningBorder"}>{item.GST}</td>
+      <td>{item.HSN}</td>
       <td>{item.Price}</td>
     </tr>
   );
diff --git a/src/components/Display/ItemsDisplay.js b/src/components/Display/ItemsDisplay.js
index 599dd8e..bdf1a40 100644
--- a/src/components/Display/ItemsDisplay.js
+++ b/src/components/Display/ItemsDisplay.js
@@ -1,7 +1,7 @@
 import React from "react";
 import "./Display.css";
 import DisplayItem from "./DisplayItem";
-import SummaryDisplayTR from "./SummaryDisplay";
+import {SummaryDisplayTR} from "./SummaryDisplay";
 
 const ItemsDisplay = (props) => {
   const items = props.items;
@@ -18,6 +18,7 @@ const ItemsDisplay = (props) => {
         <th>Quantity(NOS)</th>
         <th>Discount(%)</th>
         <th>GST(%)</th>
+        <th>HSN</th>
         <th>Price</th>
       </tr>
 
diff --git a/src/components/Display/SummaryDisplay.js b/src/components/Display/SummaryDisplay.js
index ebc382c..1110358 100644
--- a/src/components/Display/SummaryDisplay.js
+++ b/src/components/Display/SummaryDisplay.js
@@ -18,7 +18,7 @@ const getSummary = (items) => {
   );
 }
 
-const SummaryDisplayTR = (props) => {
+export const SummaryDisplayTR = (props) => {
   const summary = getSummary(props.items);
 
   return (
@@ -29,9 +29,18 @@ const SummaryDisplayTR = (props) => {
       <td>{summary.TotalQuantity}</td>
       <td className={"disabledBorder"}></td>
       <td className={"disabledBorder"}></td>
+      <td className={"disabledBorder"}></td>
       <td>{summary.TotalRawPrice}</td>
     </tr>
   );
 }
 
-export default SummaryDisplayTR;
+const SummaryDisplay = (props) => {
+  const summary = getSummary(props.items);
+
+  return (
+    <p>Total: {summary.TotalRawPrice}</p>
+  );
+}
+
+export default SummaryDisplay;
diff --git a/src/components/Form/AddNewItemForm.js b/src/components/Form/AddNewItemForm.js
index 09536b1..798bfc9 100644
--- a/src/components/Form/AddNewItemForm.js
+++ b/src/components/Form/AddNewItemForm.js
@@ -9,8 +9,9 @@ const AddNewItemForm = (props) => {
   const [itemDiscountValue, setItemDiscountValue] = useState(0.00);
   const [itemGSTValue, setItemGSTValue] = useState(props.defGSTValue);
   const [itemQtyValue, setItemQtyValue] = useState(1);
+  const [itemHSNValue, setItemHSNValue] = useState(0);
 
-  const enterItemNamePrompt = "Start typing here";
+  const enterItemNamePrompt = "start typing here";
   const registerItemPrompt = "add new";
 
   const emptyItemNames = [enterItemNamePrompt, registerItemPrompt, ""];
@@ -25,14 +26,16 @@ const AddNewItemForm = (props) => {
   // set description and price
   // when item is entered
   const setItemInfo = (itemName) => {
-    for (let i = 0; i < props.savedItems.length - 1; i++) {
+    for (let i = 0; i < props.savedItems.length; i++) {
       const mod = props.savedItems[i].Model.toLowerCase();
       const desc = props.savedItems[i].Description;
       const price = props.savedItems[i].Price;
+      const hsn = props.savedItems[i].HSN;
 
       if (mod === itemName) {
         setItemDescValue(desc);
         setItemPriceValue(price);
+        setItemHSNValue(hsn);
         break;
       }
     }
@@ -44,6 +47,7 @@ const AddNewItemForm = (props) => {
     setItemQtyValue(1);
     setItemPriceValue(1);
     setItemDiscountValue(0);
+    setItemHSNValue(0);
     setItemGSTValue(props.defGSTValue);
   }
 
@@ -58,6 +62,7 @@ const AddNewItemForm = (props) => {
             "Quantity": parseInt(itemQtyValue),
             "Price": parseFloat(itemPriceValue),
             "Discount": parseInt(itemDiscountValue),
+            "HSN": parseInt(itemHSNValue),
             "GST": parseInt(itemGSTValue)
           };
           props.addItem(newInvoiceItem);
@@ -123,6 +128,15 @@ const AddNewItemForm = (props) => {
           </label>
 
           <label>
+            HSN: <input type="number" min="0" value={itemHSNValue} onChange={
+              (event) => {
+                const value = event.target.value;
+                setItemHSNValue(value);
+              }
+            } required />
+          </label>
+
+          <label>
             GST: <input type="number" min="0" value={itemGSTValue} onChange={
               (event) => {
                 const value = event.target.value;
@@ -136,7 +150,7 @@ const AddNewItemForm = (props) => {
           <input type="button" value="Placeholder1" />
           <input type="button" value="Placeholder2" />
           <input type="button" value="Placeholder3" />
-          <input type="submit" value="Placeholder4" />
+          <input type="submit" value="Panic" />
           <input 
             type="submit" 
             value="add"