37 lines
1.1 KiB
Vue
37 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
isCheckoutPending: boolean;
|
|
checkoutPrice: number;
|
|
checkoutError: string | null;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "checkout"): void;
|
|
}>();
|
|
|
|
const handleCheckout = () => emit("checkout");
|
|
|
|
const priceLabel = computed(() => props.checkoutPrice.toFixed(2));
|
|
</script>
|
|
|
|
<template>
|
|
<section class="rounded-2xl border border-slate-800/60 bg-slate-900/80 p-6 shadow-lg shadow-slate-950/40">
|
|
<div class="space-y-4">
|
|
<button
|
|
type="button"
|
|
class="w-full rounded-xl bg-emerald-500 px-6 py-4 text-base font-semibold text-emerald-950 transition hover:bg-emerald-400 disabled:cursor-not-allowed disabled:bg-emerald-500/60 disabled:text-emerald-900/60"
|
|
:disabled="props.isCheckoutPending"
|
|
@click="handleCheckout"
|
|
>
|
|
{{ props.isCheckoutPending ? "Redirecting…" : `Buy This Design ($${priceLabel})` }}
|
|
</button>
|
|
<div
|
|
v-if="props.checkoutError"
|
|
class="rounded-xl border border-rose-500/60 bg-rose-500/10 px-4 py-3 text-sm text-rose-200"
|
|
>
|
|
{{ props.checkoutError }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|