Minor styling + fixed the calculation of discount and taxes and added new calculations

4 files changed, 78 insertions, 16 deletions

diff --git a/src/components/Display/Display.css b/src/components/Display/Display.css
index 528e837..21a9815 100644
--- a/src/components/Display/Display.css
+++ b/src/components/Display/Display.css
@@ -44,4 +44,18 @@ $defShadow: 0px 0px 4px #232627;
   font-size: 1.7rem; }
 
 .SummaryDisplay {
-  border: 1px solid pink; }
+  width: 30%;
+  padding: 0.5rem 2rem; }
+
+.SummaryDisplay h1 {
+  font-size: 3rem;
+  margin: 0.5rem -1.5rem;
+  border-bottom: 1px dotted lightblue; }
+
+.SummaryDisplay table {
+  width: 100%;
+  margin: auto; }
+
+.SummaryDisplay td {
+  font-size: 1.25rem;
+  padding: 0.2rem 0; }
diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss
index 7fa37a3..3c49b7e 100644
--- a/src/components/Display/Display.scss
+++ b/src/components/Display/Display.scss
@@ -41,5 +41,22 @@
 }
 
 .SummaryDisplay {
-  border: 1px solid pink;
+  width: 30%;
+  padding: 0.5rem 2rem;
+}
+
+.SummaryDisplay h1 {
+  font-size: 3rem;
+  margin: 0.5rem -1.5rem;
+  border-bottom: 1px dotted $labelUnderlineColor;
+}
+
+.SummaryDisplay table {
+  width: 100%;
+  margin: auto;
+}
+
+.SummaryDisplay td {
+  font-size: 1.25rem;
+  padding: 0.2rem 0;
 }
diff --git a/src/components/Display/Form.css b/src/components/Display/Form.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/Display/Form.css
diff --git a/src/components/Display/SummaryDisplay.js b/src/components/Display/SummaryDisplay.js
index 97c24b5..d823713 100644
--- a/src/components/Display/SummaryDisplay.js
+++ b/src/components/Display/SummaryDisplay.js
@@ -25,22 +25,24 @@ const getFullSummary = (items) => {
 
   for (let i = 0; i < items.length; i++) {
     const itemTotalPrice = items[i].TotalPrice;
-    const itemDiscount = items[i].Discount;
+    const itemDiscount = (items[i].Discount / 100) * itemTotalPrice;
 
     totalRawPrice += itemTotalPrice;
-    totalDiscount += (itemDiscount / 100) * itemTotalPrice;
-    totalTax += (items[i].GST / 100) * itemTotalPrice;
+    totalDiscount += itemDiscount;
+    totalTax += (items[i].GST / 100) * (itemTotalPrice - itemDiscount);
   }
 
-  // TODO: add support for calculating gst from TotalPriceAfterDiscount
-
+  const totalPriceAfterTax = (totalRawPrice - totalDiscount) + totalTax;
+  const totalRoundedOff = Math.abs(totalPriceAfterTax - Math.round(totalPriceAfterTax));
   return (
     {
-      "TotalRawPrice":           totalRawPrice,
-      "TotalDiscountPrice":      totalDiscount,
-      "TotalPriceAfterDiscount": totalRawPrice - totalDiscount,
-      "TotalTaxAmount":          totalTax,
-      "TotalPrice":              (totalRawPrice - totalDiscount) + totalTax,
+      "TotalRawPrice":           totalRawPrice.toFixed(2),
+      "TotalDiscountPrice":      totalDiscount.toFixed(2),
+      "TotalPriceAfterDiscount": (totalRawPrice - totalDiscount).toFixed(2),
+      "TotalTaxAmount":          totalTax.toFixed(2),
+      "TotalPriceAfterTax":      totalPriceAfterTax.toFixed(2),
+      "RoundedOff":              totalRoundedOff.toFixed(2),
+      "TotalPrice":              Math.round(totalPriceAfterTax)
     }
   );
 }
@@ -67,10 +69,39 @@ const SummaryDisplay = (props) => {
 
   return (
     <div className={"SummaryDisplay"}>
-      <p>Total raw: {summary.TotalRawPrice}</p>
-      <p>Total after discount: {summary.TotalRawPrice} - {summary.TotalDiscountPrice} = {summary.TotalPriceAfterDiscount}</p>
-      <p>Total tax: {summary.TotalTaxAmount}</p>
-      <p>Total: {summary.TotalPriceAfterDiscount} + {summary.TotalTaxAmount} = {summary.TotalPrice}</p>
+      <h1>Summary</h1>
+      <table>
+        <tr>
+          <td>Base Total</td>
+          <td>{summary.TotalRawPrice}</td>
+        </tr>
+
+        {true &&// summary.TotalDiscountPrice !== 0 &&
+          <tr>
+            <td>After Discount</td>
+            <td>{summary.TotalPriceAfterDiscount}</td>
+            <td>(-{summary.TotalDiscountPrice})</td>
+          </tr>
+        }
+
+        <tr>
+          <td>After Tax</td>
+          <td>{summary.TotalPriceAfterTax}</td>
+          <td>(+{summary.TotalTaxAmount})</td>
+        </tr>
+
+        {true && //summary.RoundedOff !== 0 &&
+          <tr>
+            <td>Rounded Off</td>
+            <td>{summary.RoundedOff}</td>
+          </tr>
+        }
+
+        <tr>
+          <td>Grand Total</td> 
+          <td>{summary.TotalPrice}</td>
+        </tr>
+      </table>
     </div>
   );
 }