const products = [
  { name: "T-Shirt", unitPrice: 15.00, units: 3, totalPrice: 45.00 },
  { name: "Jeans", unitPrice: 30.00, units: 1, totalPrice: 30.00 },
];
const placedOrder = {
  products,
  subTotal: 75.00,
  fees: 7.50,
  total: 82.50,
  currency: "$",
};

const OrderTotal = ({ order }) => {
  if (!order?.products) {
    return null;
  }

  return (
    <table>
      <tr>
        <th>Sub-total</th>
        <th>{order.currency} {order.subTotal}</th>
      </tr>
      <tr>
        <th>Impuestos</th>
        <th>{order.currency} {order.fees}</th>
      </tr>
      <tr>
        <th>Total</th>
        <th>{order.currency} {order.total}</th>
      </tr>
    </table>
  )
}

const OrderList = ({ order }) => {
  if (!order?.products) {
    return null;
  }

  const productList = order.products && order.products.length > 0 && order.products.map(product =>
    <tr>
      <td>{product.name}</td>
      <td>{product.units}</td>
      <td>{order.currency} {product.unitPrice}</td>
      <td>{order.currency} {product.totalPrice}</td>
    </tr>
  );
  
  return (
     <table>
      <thead>
        <th>{'Producto'}</th>
        <th>{'Unidades'}</th>
        <th>{'Precio unitario'}</th>
        <th>{'Total'}</th>
      </thead>
      <tbody>
        {productList}
      </tbody>
     </table>
  );
}

const App = () => {
  const [order, setOrder] = React.useState({});
  
  React.useEffect(() => {
    let timer = setTimeout(() => setOrder(placedOrder), 2000);
    
    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      <h1>{'Carrito de Compra'}</h1>
      {<OrderList order={order} />}
      {<OrderTotal order={order} />}
      <button disabled={!order.total || order.total === 0}>{'Poner Orden'}</button>
    </div>
  );
};
      
ReactDOM.render(<App />, document.getElementById('app'))