import React,{useContext} from "react"; import { faCreditCard } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import {GlobalCartContext} from '../../context/CartContext'; import '../../styles/Cartsummary.scss'; export default function CartSummary(props) { const {myShoppingCart}=useContext(GlobalCartContext); const vat_percentage=1.15; let cartTotal=0; let amountSaved=0; myShoppingCart.map((product) => ( cartTotal+= product.price*product.product_selected_qty )) myShoppingCart.map((product) => ( amountSaved += (product.discount > 0 ? ((product.price * product.product_selected_qty)* product.discount / 100) : 0) )) const estimatedShippingCost = 50; return ( <div className="cart-items-summary"> <h2>Cart summary</h2> <div className="row"> <div className="col-lg-7"> <h4 >Item Subtotal</h4> </div> <div className="col-lg-5"> <h3 className="cart-summary-amount-align-center"> {new Intl.NumberFormat("en-US", { style: "currency", currency: "ZAR", }).format(cartTotal)} </h3> </div> </div> <div className="row"> <div className="col-lg-6"> <h4>TAX:</h4> </div> <div className="col-lg-6"> <h4 className="cart-summary-amount-align-center"> <span > {new Intl.NumberFormat("en-US", { style: "currency", currency: "ZAR", }).format( ((cartTotal/vat_percentage)-cartTotal)* -1 )} </span> </h4> </div> </div> <div className="row"> <div className="col-lg-6"> <h4>TAX excl.:</h4> </div> <div className="col-lg-6"> <h4 className="cart-summary-amount-align-center"> <span > {new Intl.NumberFormat("en-US", { style: "currency", currency: "ZAR", }).format( cartTotal-(((cartTotal/vat_percentage)-cartTotal)* -1) )} </span> </h4> </div> </div> <div className="row"> <div className="col-lg-7"> <h4>Estimated Shipping</h4> </div> <div className="col-lg-5"> <h3 className="cart-summary-amount-align-center"> {new Intl.NumberFormat("en-US", { style: "currency", currency: "ZAR", }).format(estimatedShippingCost)} </h3> </div> </div> <div className="row"> <div className="col-lg-7"> <h4>Discounted Amount</h4> </div> <div className="col-lg-5"> <h3 className="product-discount-rate cart-summary-amount-align-center"> - {new Intl.NumberFormat("en-US", { style: "currency", currency: "ZAR", }).format(amountSaved)} </h3> </div> </div> <div className="row"> <div className="col-lg-6"> <h4>Total</h4> </div> <div className="col-lg-6"> <h3 className="cart-summary-amount-align-center"> <span className="product-price-after-discount"> {new Intl.NumberFormat("en-US", { style: "currency", currency: "ZAR", }).format( cartTotal + estimatedShippingCost - amountSaved )} </span> </h3> </div> </div> <div className="row"> <button className="btn-check-out"> <FontAwesomeIcon icon={faCreditCard} className="btn-check-out-icon" /> CHECK OUT NOW </button> </div> </div> ); }