dropdown

superpage/src/pages/[slug].astro

@@ -5,6 +5,7 @@ import { Icon } from "astro-icon/components";
 import Layout from "~/layouts/Layout.astro";
 import Container from "~/components/Container.astro";
 import HeaderNav from "~/components/Course/HeaderNav.astro";
+import BuyButton from "./_components/BuyButton.astro";
 
 import placeholder from "~/assets/placeholder.png";
 
@@ -120,17 +121,11 @@ const { Content } = await render(course);
                             <div
                                 class="flex flex-col justify-center gap-2.5 max-lg:w-full"
                             >
-                                <a
-                                    href="#"
-                                    class="text-black font-semibold bg-lime-400 rounded p-2.5 max-lg:text-center hover:bg-white hover:text-black transition"
-                                >
-                                    Contratar {
-                                        new Intl.NumberFormat("pt-BR", {
-                                            style: "currency",
-                                            currency: "BRL",
-                                        }).format(data.course.unit_price)
-                                    } p/ matrícula
-                                </a>
+                                <BuyButton
+                                    id={data.id}
+                                    name={data.title}
+                                    unitPrice={data.course.unit_price}
+                                />
                                 <a
                                     href="#solutions"
                                     class="text-blue-400 underline hover:no-underline text-center"

superpage/src/pages/_components/BuyButton.astro

@@ -0,0 +1,76 @@
+---
+interface Props {
+    id: string;
+    name: string;
+    unitPrice: number;
+}
+
+import { Icon } from "astro-icon/components";
+const { id, name, unitPrice } = Astro.props;
+const currency = new Intl.NumberFormat("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+}).format(unitPrice);
+---
+
+<button
+    data-toggle="buy"
+    data-id={id}
+    data-name={name}
+    data-unit_price={unitPrice}
+    class="text-black font-semibold bg-lime-400 rounded p-2.5 max-lg:text-center hover:bg-white hover:text-black transition cursor-pointer disabled:pointer-events-none relative overflow-hidden group"
+>
+    <div
+        class="absolute bg-lime-400 inset-0 hidden group-disabled:flex items-center justify-center"
+    >
+        <Icon name="spinner" class="size-5 animate-spin" />
+    </div>
+    Contratar {currency} p/ matrícula
+</button>
+
+<script>
+    type Item = {
+        id: string;
+        name: string;
+        quantity: number;
+        unit_price: number;
+    };
+
+    async function checkout(item: Item): Promise<Response> {
+        const r = await fetch("https://api.saladeaula.digital/carts/", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ items: [item] }),
+        });
+
+        return r;
+    }
+
+    const button = document.querySelector(
+        "[data-toggle=buy]",
+    ) as HTMLButtonElement;
+
+    button.addEventListener("click", async (e) => {
+        const target = e.target as HTMLButtonElement;
+        const { id, name, unit_price } = target.dataset as {
+            id: string;
+            name: string;
+            unit_price: string;
+        };
+
+        const item: Item = {
+            id,
+            name,
+            quantity: 1,
+            unit_price: parseFloat(unit_price),
+        };
+
+        target.disabled = true;
+
+        const r = await checkout(item);
+        const json = await r.json();
+        location.href = `https://checkout.betaeducacao.com.br/${json.id}`;
+    });
+</script>