Your app, written in Markdown.

// Edition 4 · from tell/features/product-page.tell.md
export function ProductPage({ product, cart }) {
  const priced = usePrice(cart);               // C1
  const [notice, setNotice] = useState(null);

  async function redeem(code) {
    const res = await api.cart.redeem(cart.id, code);
    if (res.error === "cart.voucher.used") {   // C2
      setNotice(t("cart.voucher.used"));
    }
  }

  return (
    <main className="product">
      <Photo src={product.photo} />            // C4
      <aside className="buy">                  // C3
        <Price value={product.price} />
        <AddToCart product={product} />
        <Voucher onRedeem={redeem} notice={notice} />
      </aside>
    </main>
  );
}

// Edition 5 · from tell/features/product-page.tell.md
export const FREE_FROM = eur(50);              // C1

export async function redeem(cart: Cart, code: string) {
  if (cart.vouchers.length > 0) {              // C2
    return err("cart.voucher.used");
  }
  return ok(price(await cart.apply(code)));
}

export const ProductPage = ({ product }: Props) => (
  <main className="product">
    <Gallery photos={product.photos} />        // C4
    <BuyPanel sticky>                          // C3
      <Price value={product.price} />
      <AddToCart product={product} />
    </BuyPanel>
  </main>
);