MyEMS/myems

import React, { Fragment, useState, useContext } from 'react';
import ContentWithAsideLayout from '../../layouts/ContentWithAsideLayout';
import { ProductContext } from '../../context/Context';
import { calculateSale, getTotalPrice } from '../../helpers/utils';
import CheckoutAside from './checkout/CheckoutAside';
import CheckoutShippingAddress from './checkout/CheckoutShippingAddress';
import CheckoutPaymentMethod from './checkout/CheckoutPaymentMethod';

const Checkout = () => {
  const { products, shoppingCart, appliedPromo } = useContext(ProductContext);
  const [shippingAddress, setShippingAddress] = useState('address-1');
  const [paymentMethod, setPaymentMethod] = useState('credit-card');

  const calculatedShippingCost = parseFloat(
    shoppingCart
      .map(shoppingCartItem => products.find(product => product.id === shoppingCartItem.id))
      .filter(product => product.hasOwnProperty('shippingCost') && product.shippingCost !== 0)
      .reduce((accumulated, product) => (accumulated > product.shippingCost ? accumulated : product.shippingCost), 0)
  );
  const subTotal = parseFloat(getTotalPrice(shoppingCart, products).toFixed(2));
  const payableTotal = parseFloat(
    (parseFloat(calculateSale(subTotal, !!appliedPromo ? appliedPromo.discount : 0)) + calculatedShippingCost).toFixed(
      2
    )
  );

  return (
    <ContentWithAsideLayout
      aside={
        <CheckoutAside
          calculatedShippingCost={calculatedShippingCost}
          subTotal={subTotal}
          payableTotal={payableTotal}
        />
      }
      isStickyAside={false}
    >
      <Fragment>
        <CheckoutShippingAddress shippingAddress={shippingAddress} setShippingAddress={setShippingAddress} />
        <CheckoutPaymentMethod
          payableTotal={payableTotal}
          paymentMethod={paymentMethod}
          setPaymentMethod={setPaymentMethod}
        />
      </Fragment>
    </ContentWithAsideLayout>
  );
};

export default Checkout;