div#contenido {
  height: 170px;
  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 }) => {
  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({});
  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>
      {loading && <div id="contenido">Cargando ...</div>}
      {!loading && (
        <div id="contenido">
          {<OrderList order={order} />}
          {<OrderTotal order={order} />}
        </div>
      )}
      <button disabled={!order.total || order.total === 0}>
        {"Poner Orden"}
      </button>
    </div>
  );
};

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