Update display of order details for taxes and fees.

views/dashboardPage/bundle.js

@@ -2310,7 +2310,8 @@ let orderDetails = {
 
         document.getElementById("orderDetailName").innerText = order.name;
         document.getElementById("orderDetailDate").innerText = order.date.toLocaleDateString("en-US");
-        document.getElementById("orderDetailTime").innerText = order.date.toLocaleTimeString("en-US");
+        document.getElementById("orderDetailTax").innerText = `$${(order.taxes / 100).toFixed(2)}`;
+        document.getElementById("orderDetailFee").innerText = `$${(order.fees / 100).toFixed(2)}`;
 
         let ingredientList = document.getElementById("orderIngredients");
         while(ingredientList.children.length > 0){
@@ -2326,7 +2327,6 @@ let orderDetails = {
 
             const ingredient = order.ingredients[i].ingredient;
             
-            
             ingredientDiv.children[0].innerText = order.ingredients[i].ingredient.name;
             ingredientDiv.children[2].innerText = `$${(price / 100).toFixed(2)}`;
             
@@ -2346,7 +2346,8 @@ let orderDetails = {
             ingredientList.appendChild(ingredientDiv);
         }
 
-        document.querySelector("#orderTotalPrice p").innerText = `$${(grandTotal / 100).toFixed(2)}`;
+        document.getElementById("orderDetailTotal").innerText = `$${(grandTotal / 100).toFixed(2)}`;
+        document.querySelector("#orderTotalPrice p").innerText = `$${((grandTotal + order.taxes + order.fees) / 100).toFixed(2)}`;
     },
 
     remove: function(order){

views/dashboardPage/js/orderDetails.js

@@ -4,7 +4,8 @@ let orderDetails = {
 
         document.getElementById("orderDetailName").innerText = order.name;
         document.getElementById("orderDetailDate").innerText = order.date.toLocaleDateString("en-US");
-        document.getElementById("orderDetailTime").innerText = order.date.toLocaleTimeString("en-US");
+        document.getElementById("orderDetailTax").innerText = `$${(order.taxes / 100).toFixed(2)}`;
+        document.getElementById("orderDetailFee").innerText = `$${(order.fees / 100).toFixed(2)}`;
 
         let ingredientList = document.getElementById("orderIngredients");
         while(ingredientList.children.length > 0){
@@ -20,7 +21,6 @@ let orderDetails = {
 
             const ingredient = order.ingredients[i].ingredient;
             
-            
             ingredientDiv.children[0].innerText = order.ingredients[i].ingredient.name;
             ingredientDiv.children[2].innerText = `$${(price / 100).toFixed(2)}`;
             
@@ -40,7 +40,8 @@ let orderDetails = {
             ingredientList.appendChild(ingredientDiv);
         }
 
-        document.querySelector("#orderTotalPrice p").innerText = `$${(grandTotal / 100).toFixed(2)}`;
+        document.getElementById("orderDetailTotal").innerText = `$${(grandTotal / 100).toFixed(2)}`;
+        document.querySelector("#orderTotalPrice p").innerText = `$${((grandTotal + order.taxes + order.fees) / 100).toFixed(2)}`;
     },
 
     remove: function(order){

views/dashboardPage/sidebars/orderDetails.ejs

@@ -19,12 +19,28 @@
 
     <h3 id="orderDetailDate"></h3>
 
-    <h3 id="orderDetailTime"></h3>
-
     <div id="orderIngredients"></div>
 
     <div class="lineBorder"></div>
 
+    <div class="orderDiv">
+        <div class="subOrderDiv">
+            <p>TOTAL:</p>
+            <p id="orderDetailTotal"></p>
+        </div>
+        <div class="subOrderDiv">
+            <P>TAXES:</P>
+            <p id="orderDetailTax"></p>
+        </div>
+        <div class="subOrderDiv">
+            <p>FEES:</p>
+            <p id="orderDetailFee"></p>
+        </div>
+        
+    </div>
+
+    <div class="lineBorder"></div>
+
     <div id="orderTotalPrice">
         <h3>GRAND TOTAL</h3>
         <p></p>

views/dashboardPage/sidebars/sidebars.css

@@ -561,6 +561,15 @@ Add Recipe
     width: 100%;
 }
 
+    .orderDiv{
+        width: 50%;
+    }
+
+        .subOrderDiv{
+            display: flex;
+            justify-content: space-between;
+        }
+
     #orderIngredients{
         width: 90%;
         overflow: auto;