popertots/Crussell
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): redesign loyalty stamp card on account page

Browse Source 
Restructure loyalty card: show completed-card banner above card, support multi-card display (stamps % 10), move from gradient to flat bg, update text to reflect multi-card and remaining stamps.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
popertots
2026-06-19 11:34:42 +01:00
co-authored by Sisyphus
parent 0e727818e1
commit 895d5dd5e9
1 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/account/+page.svelte
+16 -15
View File
@@ -1439,16 +1439,27 @@
{#if authStore.currentUser?.role !== 'admin'}
<Separator class="my-4" />
{#if stamps >= 10}
<div
class="mb-3 rounded-xl border-2 border-emerald-200 bg-emerald-50 p-4 text-center"
>
<p class="text-sm font-bold tracking-wide text-emerald-800">
Card Completed — 10% Off Your Next Booking!
</p>
</div>
{/if}
<div
class="rounded-xl border-2 border-fuchsia-200 bg-gradient-to-br from-fuchsia-50 via-fuchsia-100/30 to-fuchsia-50 p-5 sm:p-6"
class="rounded-xl border-2 border-fuchsia-200 bg-fuchsia-50 p-5 sm:p-6"
>
{#if userData}
<div class="mb-5 text-center sm:text-left">
<h3 class="text-sm font-semibold text-gray-900">Loyalty Stamp Card</h3>
<p class="mt-0.5 text-xs text-gray-500">
{stamps < 10
? 'Collect 10 stamps to get 10% off your next booking.'
: 'Your card is full — enjoy 10% off your next service!'}
? `Collect ${10 - stamps} more stamp${10 - stamps === 1 ? '' : 's'} to get 10% off your next booking.`
: (() => { const fc = Math.floor(stamps / 10); return `You have ${fc === 1 ? 'a' : fc} full stampcard${fc === 1 ? '' : 's'} ready to take advantage of at your next booking!`; })()}
</p>
</div>
@@ -1456,7 +1467,7 @@
{#each Array(10) as _, i}
{@const slotNum = i + 1}
{@const rot = ((slotNum * 37 + 13) % 7) - 3}
{#if slotNum <= stamps}
{#if slotNum <= (stamps > 0 ? (stamps % 10 || 10) : 0)}
<div
class="aspect-square transition-transform duration-200 hover:scale-110"
>
@@ -1508,16 +1519,6 @@
{/if}
{/each}
</div>
{#if stamps >= 10}
<div
class="mt-5 rounded-lg bg-gradient-to-r from-fuchsia-500 to-pink-500 px-4 py-3 text-center"
>
<p class="text-sm font-bold tracking-wide text-white">
🎉 Card Completed — 10% Off Your Next Booking!
</p>
</div>
{/if}
{/if}
</div>
{/if}
@@ -1706,7 +1707,7 @@
</div>
<Card.Root
class="mt-6 border-amber-200/60 bg-gradient-to-r from-amber-50 to-amber-100/50"
class="mt-6 border-amber-200/60 bg-amber-50"
>
<Card.Content class="pt-4 md:pt-6">
<div class="space-y-2 text-sm text-amber-900">