slipmatz-web/app/pages/checkout/success.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-slate-950 pb-16">
    <AppNavbar />

    <section class="mx-auto flex max-w-2xl flex-col gap-6 px-4 pt-16 text-slate-100">
      <header class="space-y-4 text-center">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-300">
          <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">Payment Confirmed</h1>
          <p class="mt-2 text-sm text-slate-400">
            Thank you for purchasing your custom slipmat design. We've received your payment and sent a confirmation email.
          </p>
        </div>
      </header>

      <div v-if="!sessionId" class="rounded-2xl border border-slate-800/60 bg-slate-900/80 p-6">
        <p class="text-sm text-slate-300">
          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 bg-sky-600 px-4 py-3 text-sm font-medium text-white transition hover:bg-sky-500"
          @click="goToDesigner"
        >
          Back to Designer
        </button>
      </div>

      <div
        v-else
        class="space-y-6"
      >
        <div class="rounded-2xl border border-slate-800/60 bg-slate-900/80 p-6">
          <h2 class="text-lg font-semibold text-white">Order Summary</h2>
          <dl class="mt-4 space-y-2 text-sm text-slate-300">
            <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">{{ 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">
                  {{ 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>{{ 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-400">
                <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-700/70 px-2 py-1 text-[11px] uppercase tracking-wide text-slate-200 transition hover:border-slate-500 hover:text-white"
                  @click="copySessionId"
                >
                  {{ copyStatus === 'copied' ? 'Copied' : 'Copy' }}
                </button>
              </dd>
            </div>
          </dl>

          <div v-if="transactionStatus === 'saving'" class="mt-4 rounded-xl border border-slate-700/60 bg-slate-800/70 px-4 py-3 text-sm text-slate-200">
            Recording your transaction...
          </div>
          <div v-else-if="transactionStatus === 'error'" class="mt-4 rounded-xl border border-rose-500/50 bg-rose-500/10 px-4 py-3 text-sm text-rose-200">
            {{ 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-500/50 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-200">
            Transaction stored safely.
          </div>

          <div v-if="error" class="mt-4 rounded-xl border border-rose-500/50 bg-rose-500/10 px-4 py-3 text-sm text-rose-200">
            {{ error.message || 'We couldn\'t load the session details. Please contact support if this persists.' }}
          </div>
        </div>

        <div class="rounded-2xl border border-slate-800/60 bg-slate-900/80 p-6">
          <h2 class="text-lg font-semibold text-white">What's next?</h2>
          <ul class="mt-4 space-y-3 text-sm text-slate-300">
            <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 bg-emerald-500 px-4 py-3 text-sm font-semibold text-emerald-950 transition hover:bg-emerald-400"
            @click="goToDesigner"
          >
            Back to Designer
          </button>
        </div>
      </div>
    </section>
  </main>
</template>