236 lines
8.6 KiB
Vue
236 lines
8.6 KiB
Vue
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const sessionId = computed(() => {
|
|
const raw = route.query.session_id
|
|
if (Array.isArray(raw)) {
|
|
return raw[0]
|
|
}
|
|
return typeof raw === 'string' ? raw : null
|
|
})
|
|
|
|
const { data: session, pending, error } = useAsyncData('checkout-session', async () => {
|
|
if (!sessionId.value) {
|
|
return null
|
|
}
|
|
|
|
return await $fetch(`/api/checkout/${sessionId.value}`)
|
|
}, {
|
|
watch: [sessionId],
|
|
})
|
|
|
|
const amountLabel = computed(() => {
|
|
if (!session.value?.amountTotal) {
|
|
return null
|
|
}
|
|
|
|
const currencyCode = session.value.currency?.toUpperCase() ?? 'USD'
|
|
return new Intl.NumberFormat('en-US', {
|
|
style: 'currency',
|
|
currency: currencyCode,
|
|
}).format(session.value.amountTotal / 100)
|
|
})
|
|
|
|
const copyStatus = ref<'idle' | 'copied' | 'error'>('idle')
|
|
const supportsClipboard = ref(false)
|
|
const transactionStatus = ref<'idle' | 'saving' | 'saved' | 'error'>('idle')
|
|
const transactionMessage = ref<string | null>(null)
|
|
|
|
onMounted(() => {
|
|
supportsClipboard.value = typeof navigator !== 'undefined' && !!navigator.clipboard
|
|
})
|
|
|
|
watch(
|
|
() => session.value,
|
|
async (sessionValue) => {
|
|
if (!process.client) {
|
|
return
|
|
}
|
|
if (transactionStatus.value !== 'idle') {
|
|
return
|
|
}
|
|
if (!sessionId.value || !sessionValue?.id) {
|
|
return
|
|
}
|
|
if (sessionValue.paymentStatus !== 'paid') {
|
|
return
|
|
}
|
|
|
|
transactionStatus.value = 'saving'
|
|
|
|
try {
|
|
await $fetch('/api/transactions', {
|
|
method: 'POST',
|
|
body: {
|
|
stripeSessionId: sessionValue.id,
|
|
designId: sessionValue.metadata?.designId ?? `unknown-${sessionValue.id}`,
|
|
templateId: sessionValue.metadata?.templateId ?? null,
|
|
amount: sessionValue.amountTotal
|
|
? (sessionValue.amountTotal / 100).toFixed(2)
|
|
: "0",
|
|
currency: sessionValue.currency ?? 'usd',
|
|
customerEmail: sessionValue.customerEmail ?? null,
|
|
customerDetails: sessionValue.customerDetails,
|
|
},
|
|
})
|
|
transactionStatus.value = 'saved'
|
|
} catch (err: any) {
|
|
console.error('Failed to persist transaction', err)
|
|
transactionStatus.value = 'error'
|
|
transactionMessage.value = err?.message ?? 'Unable to record this transaction.'
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
const copySessionId = async () => {
|
|
if (!supportsClipboard.value || !sessionId.value) {
|
|
return
|
|
}
|
|
|
|
try {
|
|
await navigator.clipboard.writeText(sessionId.value)
|
|
copyStatus.value = 'copied'
|
|
setTimeout(() => {
|
|
copyStatus.value = 'idle'
|
|
}, 2000)
|
|
} catch (err) {
|
|
console.error('Failed to copy session id', err)
|
|
copyStatus.value = 'error'
|
|
setTimeout(() => {
|
|
copyStatus.value = 'idle'
|
|
}, 2000)
|
|
}
|
|
}
|
|
|
|
const goToDesigner = () => {
|
|
const metadata = (session.value?.metadata ?? {}) as Record<string, unknown>
|
|
const designId = typeof metadata.designId === 'string' ? metadata.designId : null
|
|
|
|
if (designId) {
|
|
router.push({ path: '/', query: { designId } })
|
|
} else {
|
|
router.push('/')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<main class="min-h-screen bg-white pb-16">
|
|
<AppNavbar />
|
|
|
|
<section class="mx-auto flex max-w-2xl flex-col gap-6 px-4 pt-16 text-slate-900">
|
|
<header class="space-y-4 text-center">
|
|
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100 text-emerald-600">
|
|
<svg viewBox="0 0 24 24" class="h-10 w-10 fill-current">
|
|
<path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.7 7.3-5.2 5.2a1 1 0 0 1-1.4 0l-2-2a1 1 0 0 1 1.4-1.4l1.3 1.29 4.5-4.49a1 1 0 0 1 1.4 1.4Z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-3xl font-semibold text-slate-900">Payment Confirmed</h1>
|
|
<p class="mt-2 text-sm text-slate-600">
|
|
Thank you for purchasing your custom jersey design. We've received your payment and sent a confirmation email.
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div v-if="!sessionId" class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
|
|
<p class="text-sm text-slate-700">
|
|
We couldn't find a Stripe session ID in the URL. Please return to the designer and try again.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
class="mt-4 w-full rounded-xl border-2 border-slate-900 bg-slate-900 px-4 py-3 text-sm font-medium text-white transition hover:bg-white hover:text-slate-900"
|
|
@click="goToDesigner"
|
|
>
|
|
Back to Designer
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
v-else
|
|
class="space-y-6"
|
|
>
|
|
<div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
|
|
<h2 class="text-lg font-semibold text-slate-900">Order Summary</h2>
|
|
<dl class="mt-4 space-y-2 text-sm text-slate-700">
|
|
<div class="flex items-center justify-between">
|
|
<dt>Total Paid</dt>
|
|
<dd>
|
|
<span v-if="pending" class="text-slate-500">Loading...</span>
|
|
<span v-else-if="amountLabel" class="font-semibold text-slate-900">{{ amountLabel }}</span>
|
|
<span v-else class="text-slate-500">Pending</span>
|
|
</dd>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<dt>Payment Status</dt>
|
|
<dd>
|
|
<span v-if="pending" class="text-slate-500">Loading...</span>
|
|
<span v-else-if="session?.paymentStatus" class="font-semibold text-slate-900">
|
|
{{ session.paymentStatus === 'paid' ? 'Paid' : session.paymentStatus }}
|
|
</span>
|
|
<span v-else class="text-slate-500">Unknown</span>
|
|
</dd>
|
|
</div>
|
|
<div v-if="session?.customerEmail" class="flex items-center justify-between">
|
|
<dt>Receipt sent to</dt>
|
|
<dd class="font-semibold text-slate-900">{{ session.customerEmail }}</dd>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<dt>Session ID</dt>
|
|
<dd class="flex items-center gap-2 text-xs text-slate-600">
|
|
<span class="truncate max-w-[180px] sm:max-w-xs" :title="sessionId">{{ sessionId }}</span>
|
|
<button
|
|
v-if="supportsClipboard"
|
|
type="button"
|
|
class="rounded-md border border-slate-300 px-2 py-1 text-[11px] uppercase tracking-wide text-slate-700 transition hover:border-slate-900 hover:text-slate-900"
|
|
@click="copySessionId"
|
|
>
|
|
{{ copyStatus === 'copied' ? 'Copied' : 'Copy' }}
|
|
</button>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<div v-if="transactionStatus === 'saving'" class="mt-4 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">
|
|
Recording your transaction...
|
|
</div>
|
|
<div v-else-if="transactionStatus === 'error'" class="mt-4 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
|
|
{{ transactionMessage || 'We could not record this transaction. Please contact support with your session ID.' }}
|
|
</div>
|
|
<div v-else-if="transactionStatus === 'saved'" class="mt-4 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
|
|
Transaction stored safely.
|
|
</div>
|
|
|
|
<div v-if="error" class="mt-4 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
|
|
{{ error.message || 'We couldn\'t load the session details. Please contact support if this persists.' }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
|
|
<h2 class="text-lg font-semibold text-slate-900">What's next?</h2>
|
|
<ul class="mt-4 space-y-3 text-sm text-slate-700">
|
|
<li>
|
|
We'll email you a confirmation that includes your payment details and a link to download the production-ready files once they're generated.
|
|
</li>
|
|
<li>
|
|
Need to tweak the design? Use the button below to reopen this project; your saved layout will load automatically.
|
|
</li>
|
|
<li>
|
|
Have questions? Reply directly to the confirmation email and our team will help out.
|
|
</li>
|
|
</ul>
|
|
<button
|
|
type="button"
|
|
class="mt-6 w-full rounded-xl border-2 border-emerald-600 bg-emerald-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-white hover:text-emerald-600"
|
|
@click="goToDesigner"
|
|
>
|
|
Back to Designer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</template>
|