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-200 bg-white p-6 shadow-sm">
|
|
<div class="space-y-4">
|
|
<button
|
|
type="button"
|
|
class="w-full rounded-xl border-2 border-emerald-600 bg-emerald-600 px-6 py-4 text-base font-semibold text-white transition hover:bg-white hover:text-emerald-600 disabled:cursor-not-allowed disabled:opacity-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-200 bg-rose-50 px-4 py-3 text-sm text-rose-700"
|
|
>
|
|
{{ props.checkoutError }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|