Replace Firebase Storage with MinIO and add user account features
- Storage Integration: * Remove Firebase Storage dependency and useFirebaseStorage composable * Implement direct MinIO uploads via POST /storage/upload with multipart/form-data * Upload canvas JSON, preview PNG, and production PNG as separate objects * Store public URLs and metadata in design records - Authentication & Registration: * Add email/password registration page with validation * Integrate backend user session via /auth/login endpoint * Store backendUser.id as ownerId in design records * Auto-sync backend session on Firebase auth state changes - User Account Pages: * Create profile page showing user details and backend session info * Create orders page with transaction history filtered by customerEmail * Add server proxy /api/orders to forward GET /transactions queries - Navigation Improvements: * Replace inline auth buttons with avatar dropdown menu * Add Profile, Orders, and Logout options to dropdown * Implement outside-click and route-change handlers for dropdown * Display user initials in avatar badge - API Updates: * Update transactions endpoint to accept amount as string * Format amount with .toFixed(2) in checkout success flow * Query orders by customerEmail instead of ownerId for consistency
This commit is contained in:
Frank John Begornia
235
app/pages/checkout/success.vue
Normal file
235
app/pages/checkout/success.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user