save data and generate html for payment summary

Author: ibrahimmoalim

basic-projects/amazon-project/checkout.html

@@ -40,7 +40,7 @@
     </div>
 
     <div class="main">
-      <div class="page-title">Review your order</div>
+      <div class="page-title js-page-title">Review your order</div>
 
       <div class="checkout-grid">
         <div class="order-summary js-order-summary">

basic-projects/amazon-project/data/cart.js

@@ -1,4 +1,5 @@
-import deliveryOptions from '../data/delivery-options.js';
+import {deliveryOptions} from '../data/delivery-options.js';
+import { renderPaymentSummary } from '../scripts/checkout/payment-summary.js';
 
 // named export, used when there are multiple exports in the file
 export let cart = JSON.parse(localStorage.getItem('cart')) || [];
@@ -44,6 +45,7 @@ export function removeFromCart(itemId){
   });
   cart = newCart;
   saveToStorage();
+  renderPaymentSummary();
 };
 
 

basic-projects/amazon-project/data/delivery-options.js

@@ -1,6 +1,6 @@
 import dayjs from 'https://cdn.jsdelivr.net/npm/dayjs/+esm';
 
-const deliveryOptions = [{
+export const deliveryOptions = [{
   id: '1',
   date: dayjs().add(7, 'days').format('dddd, MMMM D'),
   priceCents: 0 
@@ -16,4 +16,13 @@ const deliveryOptions = [{
   priceCents: 999
 }];
 
-export default deliveryOptions;
+export function getDeliveryOption(deliveryOptionId){
+  let deliveryOption;
+
+    deliveryOptions.forEach((option) => {
+      if (option.id === deliveryOptionId){
+        deliveryOption = option
+      }
+    });
+  return deliveryOption || deliveryOptions[0];
+}

basic-projects/amazon-project/data/products.js

@@ -1,3 +1,15 @@
+export function getProduct(productId){
+
+  let matchingProduct;
+    // get the full product just using id
+    products.forEach((product) => {
+      if (product.id === productId){
+        matchingProduct = product;
+      }
+    });
+  return matchingProduct;
+}
+
 export const products = [
   {
     id: "e43638ce-6aa0-4b85-b27f-e1d07eb678c6",

basic-projects/amazon-project/scripts/checkout.js

@@ -1,5 +1,5 @@
 import { renderOrderSummary } from "./checkout/orderSummary.js";
 import { renderPaymentSummary } from "./checkout/payment-summary.js";
 
-renderPaymentSummary()
-renderOrderSummary();
+renderOrderSummary();
+renderPaymentSummary();

basic-projects/amazon-project/scripts/checkout/orderSummary.js

@@ -1,7 +1,8 @@
 import {cart, removeFromCart, calculateCartQuantity, updateQuantityLabel, updateDeliveryOption} from '../../data/cart.js'
-import {products} from '../../data/products.js'
+import {getProduct} from '../../data/products.js'
 import formatCurrency from '../utils/price.js';
-import deliveryOptions from '../../data/delivery-options.js';
+import {deliveryOptions, getDeliveryOption} from '../../data/delivery-options.js';
+import { renderPaymentSummary } from './payment-summary.js';
 
 
 
@@ -13,26 +14,13 @@ export function renderOrderSummary(){
     // get productId out of cartItem
     const {productId} = cartItem;
 
-    let matchingProduct;
-    // get the full product just using id
-    products.forEach((product) => {
-      if (product.id === productId){
-        matchingProduct = product;
-      }
-    });
+    const matchingProduct = getProduct(productId);
+    
 
     const deliveryOptionId = cartItem.deliveryOptionId;
 
-    let deliveryOption;
-
-    deliveryOptions.forEach((option) => {
-      if (option.id === deliveryOptionId){
-        deliveryOption = option
-      }
-    });
-
-
-
+    const deliveryOption = getDeliveryOption(deliveryOptionId);
+    
 
     cartSummaryHTML += `
       <div class="cart-item-container js-cart-item-${matchingProduct.id}">
@@ -169,7 +157,7 @@ export function renderOrderSummary(){
 
     updateQuantityLabel(newQuantity, itemId);
     updateCartQuantity();
-    
+    renderPaymentSummary();
     quantityInput.value = null;
   };
 
@@ -189,6 +177,7 @@ export function renderOrderSummary(){
             updateDeliveryOption(productId, deliveryOptionId);
             // regenerate the whole page, to update delivery data automatically when delivery option is selected
             renderOrderSummary();
+            renderPaymentSummary();
           })
       });
 };

basic-projects/amazon-project/scripts/checkout/payment-summary.js

@@ -1,67 +1,84 @@
 import { cart, calculateCartQuantity } from "../../data/cart.js"
-import { products } from "../../data/products.js";
+import { getProduct } from "../../data/products.js";
 import formatCurrency from "../utils/price.js";
+import { getDeliveryOption } from "../../data/delivery-options.js";
 
 
 
 
+export function renderPaymentSummary(){
+
+let paymentHTML = document.querySelector('.js-payment-summary')
+
+if (cart.length === 0){
+  paymentHTML.remove();
+  document.querySelector('.js-page-title').innerHTML = 'Cart is empty'
+} else {
 
-let itemsPrice = 0;
+  let itemsPriceCents = 0;
+  let deliveryShipping = 0;
 
-cart.forEach((cartItem) => {
-    // get productId out of cartItem
-    const {productId} = cartItem;
+  cart.forEach((cartItem) => {
 
-    let matchingProduct;
-    // get the full product just using id
-    products.forEach((product) => {
-      if (product.id === productId){
-        matchingProduct = product;
-      }
+      const product = getProduct(cartItem.productId)
+      itemsPriceCents += product.priceCents * cartItem.quantity;
+
+      const deliveryOption = getDeliveryOption(cartItem.deliveryOptionId)
+      deliveryShipping += deliveryOption.priceCents;
     });
-    itemsPrice += Number(formatCurrency(matchingProduct.priceCents * cartItem.quantity))
-  });    
 
-export function renderPaymentSummary(){
+  const totalBeforeTax = formatCurrency(itemsPriceCents + deliveryShipping)
+  const tax = totalBeforeTax /10
+  const orderTotal = (Number(totalBeforeTax) + tax)
 
 
-  document.querySelector('.js-payment-summary')
-    .innerHTML = `
+
+  
+    paymentHTML.innerHTML = `
 
       <div class="payment-summary-title">
         Order Summary
       </div>
 
       <div class="payment-summary-row">
         <div>Items (${calculateCartQuantity()}):</div>
-        <div class="payment-summary-money">$${itemsPrice}</div>
+        <div class="payment-summary-money">$
+          ${formatCurrency(itemsPriceCents)}
+        </div>
       </div>
 
       <div class="payment-summary-row">
         <div>Shipping &amp; handling:</div>
-        <div class="payment-summary-money">$4.99</div>
+        <div class="payment-summary-money">$
+          ${formatCurrency(deliveryShipping)}
+        </div>
       </div>
 
       <div class="payment-summary-row subtotal-row">
         <div>Total before tax:</div>
-        <div class="payment-summary-money">$47.74</div>
+        <div class="payment-summary-money">$
+          ${totalBeforeTax}
+        </div>
       </div>
 
       <div class="payment-summary-row">
         <div>Estimated tax (10%):</div>
-        <div class="payment-summary-money">$4.77</div>
+        <div class="payment-summary-money">$
+          ${tax.toFixed(2)}
+        </div>
       </div>
 
       <div class="payment-summary-row total-row">
         <div>Order total:</div>
-        <div class="payment-summary-money">$52.51</div>
+        <div class="payment-summary-money">$
+          ${orderTotal.toFixed(2)}
+        </div>
       </div>
 
       <button class="place-order-button button-primary">
         Place your order
       </button>
 
     `
-
-  
 }
+}