Aromática Store — Checkout UI Extension

/**
 * Aromática Store — Checkout UI Extension
 * Target 1: purchase.checkout.cart-line-list.render-after
 * Target 2: purchase.checkout.cart-line-item.render-after
 * version: 2026-01
 */

import "@shopify/ui-extensions/preact";
import { render } from "preact";
import { useState } from "preact/hooks";
import {
  useApi, useApplyAttributeChange, useCost,
} from "@shopify/ui-extensions/checkout";

// ── 1. Banner progreso + mensaje regalo ──
function FreeShippingAndGift() {
  const cost = useCost();
  const applyAttribute = useApplyAttributeChange();
  const [giftMessage, setGiftMessage] = useState("");
  const [submitted, setSubmitted] = useState(false);

  const FREE_THRESHOLD = 40;
  const subtotal = parseFloat(cost?.subtotalAmount?.amount ?? "0");
  const remaining = Math.max(0, FREE_THRESHOLD - subtotal);
  const progress = Math.min(1, subtotal / FREE_THRESHOLD);

  async function handleSubmit(e: Event) {
    e.preventDefault();
    await applyAttribute({
      key: "gift_message", value: giftMessage
    });
    setSubmitted(true);
  }

  return (
    <s-box padding="base">
      <s-banner tone="info" heading="Envío gratis a 40 €">
        <s-stack direction="block" gap="tight">
          <s-text>Faltan {remaining.toFixed(2)} € más.</s-text>
          <s-progress
            value={progress}
            max={1}
            tone="auto"
          ></s-progress>
        </s-stack>
      </s-banner>
      <s-section heading="¿Es un regalo?">
        <s-form onsubmit={handleSubmit}>
          <s-text-area
            label="Mensaje de regalo"
            name="gift_message"
            rows={3}
          ></s-text-area>
          <s-button type="submit" variant="secondary">
            Guardar mensaje
          </s-button>
        </s-form>
      </s-section>
    </s-box>
  );
}

// ── 2. Badge artesanal por línea ──
function ArtisanalBadge() {
  return (
    <s-box padding-block="tight">
      <s-stack direction="inline" gap="tight">
        <s-badge tone="success">Artesanal</s-badge>
        <s-text tone="subdued">
          Elaborado a mano en España
        </s-text>
      </s-stack>
    </s-box>
  );
}

render(
  "purchase.checkout.cart-line-list.render-after",
  () => <FreeShippingAndGift />
);
render(
  "purchase.checkout.cart-line-item.render-after",
  () => <ArtisanalBadge />
);