div#contenido {
  height: 90px;
  overflow-y: scroll;
}

const products = [
  { name: "T-Shirt", unitPrice: 15.0, units: 3, totalPrice: 45.0 },
  { name: "Jeans", unitPrice: 30.0, units: 1, totalPrice: 30.0 },
];
const placedOrder = {
  products,
  subTotal: 75.0,
  fees: 7.5,
  total: 82.5,
  currency: "$",
};

const OrderTotal = ({ order, loading }) => {
  return (
    <table>
      <tr>
        <th>Sub-total</th>
        <th>
          {!loading ? `${order.currency} ${order.subTotal}` : '-'}
        </th>
      </tr>
      <tr>
        <th>Impuestos</th>
        <th>
          {!loading ? `${order.currency} ${order.fees}` : '-'}
        </th>
      </tr>
      <tr>
        <th>Total</th>
        <th>
          {!loading ? `${order.currency} ${order.total}` : '-'}
        </th>
      </tr>
    </table>
  );
};

const OrderList = ({ order, loading }) => {
  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>
    ));
  const loadingTable = (
    <tr>
      <td colSpan={4}>{'Cargando ...'}</td>
    </tr>
  )

  return (
    <table>
      <thead>
        <th>{"Producto"}</th>
        <th>{"Unidades"}</th>
        <th>{"Precio unitario"}</th>
        <th>{"Total"}</th>
      </thead>
      <tbody>{loading ? loadingTable : productList}</tbody>
    </table>
  );
};

const App = () => {
  const [order, setOrder] = React.useState({});
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    let timer = setTimeout(() => {
      setOrder(placedOrder);
      setLoading(false);
    }, 2000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      <h1>{"Carrito de Compra"}</h1>
      <div id="contenido">
        {<OrderList order={order} loading={loading} />}
      </div>
      {<OrderTotal order={order} loading={loading} />}
      <button disabled={!order.total || order.total === 0}>
        {"Poner Orden"}
      </button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("app"));