"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { Button } from "./button"; import { CardInput } from "./card-input"; import { Checkbox } from "./checkbox"; import { Field, Input } from "./input"; import { PhoneInput } from "./phone-input"; import { RadioCard, RadioGroup } from "./radio-group"; import { Separator } from "./card"; import { Stepper } from "./stepper"; import { toast } from "./toast"; import { LockIcon, TagIcon } from "@kineticui/icons"; const items = [ { id: "1", name: "Kinetic Pro", detail: "Annual · 5 seats", price: 1200, color: "#C6F432" }, { id: "2", name: "Priority support", detail: "Add-on", price: 240, color: "#7C8CFF" }, ]; const usd = (n: number) => `$${n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`; /** Checkout: contact, shipping speed and card payment on the left; order summary with coupon on the right. */ export function CheckoutPage() { const [shipping, setShipping] = React.useState("standard"); const [coupon, setCoupon] = React.useState(""); const [discount, setDiscount] = React.useState(0); const [couponError, setCouponError] = React.useState(null); const [paid, setPaid] = React.useState(false); const [busy, setBusy] = React.useState(false); const subtotal = items.reduce((a, i) => a + i.price, 0); const ship = shipping === "express" ? 25 : 0; const tax = Math.round((subtotal - discount) * 0.18 * 100) / 100; const total = subtotal - discount + ship + tax; return (

{paid ? (

Payment confirmed

A receipt for {usd(total)} is on its way to your inbox.

) : ( { e.preventDefault(); setBusy(true); setTimeout(() => { setBusy(false); setPaid(true); }, 1100); }} >

Contact

Delivery

Free} /> $25} />

Payment

)}

Order summary

{i.name} {i.detail}
{usd(i.price)}

{ e.preventDefault(); if (coupon.trim().toUpperCase() === "KINETIC20") { setDiscount(Math.round(subtotal * 0.2)); setCouponError(null); toast({ title: "Coupon applied: 20% off", tone: "success" }); } else setCouponError("That code isn't valid. Try KINETIC20."); }} > setCoupon(e.target.value)} placeholder="Coupon code" leading={} invalid={!!couponError} wrapperClassName="flex-1" aria-label="Coupon code" /> {couponError ?

{couponError}

: null}

Subtotal: {usd(subtotal)}
Discount: −{usd(discount)}
Delivery: {ship ? usd(ship) : "Free"}
GST (18%): {usd(tax)}
Total: {usd(total)}

Secured with 256-bit encryption. Cancel anytime.

); }

Checkout

Installation