069a85cf11
Replace all hardcoded hex color values with semantic Tailwind design tokens: - `#bb5b3e` → `accent` - `#a34a31` → `accent-content` / `primary-dark` - `#4a3f3b`, `#89726c` → `zinc-800`, `zinc-500` - `#e5ded7`, `#faf6f3` → `zinc-300`, `zinc-50` - `#8
88 lines
3.6 KiB
Vue
88 lines
3.6 KiB
Vue
<template>
|
|
<div class="relative">
|
|
<!-- Gated overlay for free/guest users -->
|
|
<div
|
|
v-if="!isPaidTier"
|
|
class="absolute inset-0 z-10 rounded-2xl backdrop-blur-sm bg-white/60 flex flex-col items-center justify-center gap-3 text-center px-6"
|
|
>
|
|
<iconify-icon class="text-accent text-3xl" icon="lucide:lock"></iconify-icon>
|
|
<p class="font-bold text-zinc-800">Price predictions are available on paid plans</p>
|
|
<a
|
|
href="/pricing"
|
|
class="px-6 py-2 bg-accent text-white rounded-full text-sm font-bold hover:bg-accent-content transition-colors"
|
|
>
|
|
Upgrade from £0.99/mo
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Card content (blurred for free users, fully visible for paid) -->
|
|
<div
|
|
:class="['p-6 bg-white rounded-2xl border border-zinc-300 space-y-4', !isPaidTier && 'select-none pointer-events-none']"
|
|
>
|
|
<p class="text-xs font-bold uppercase tracking-widest text-zinc-500">Price Prediction</p>
|
|
|
|
<!-- Loading state -->
|
|
<template v-if="loading">
|
|
<div class="animate-pulse space-y-2">
|
|
<div class="h-8 bg-zinc-300 rounded w-1/2"></div>
|
|
<div class="h-4 bg-zinc-300 rounded w-3/4"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Loaded state -->
|
|
<template v-else-if="prediction">
|
|
<h3
|
|
class="text-2xl font-black"
|
|
:class="prediction.action === 'fill_now' ? 'text-mauve' : prediction.action === 'wait' ? 'text-teal' : 'text-tan'"
|
|
>
|
|
{{ actionLabel }}
|
|
</h3>
|
|
|
|
<div class="w-full h-2 bg-zinc-200 rounded-full overflow-hidden">
|
|
<div
|
|
class="h-full rounded-full transition-all"
|
|
:class="prediction.action === 'fill_now' ? 'bg-mauve' : 'bg-teal'"
|
|
:style="{ width: prediction.confidence_score + '%' }"
|
|
></div>
|
|
</div>
|
|
|
|
<p class="text-sm text-zinc-500 leading-relaxed">{{ prediction.reasoning }}</p>
|
|
|
|
<div class="flex items-center gap-4 text-xs text-zinc-500 font-medium">
|
|
<span>Avg: {{ prediction.current_avg }}p</span>
|
|
<span>Confidence: {{ prediction.confidence_label }}</span>
|
|
<span v-if="prediction.predicted_change_pence">
|
|
{{ prediction.predicted_change_pence > 0 ? '+' : '' }}{{ prediction.predicted_change_pence.toFixed(1) }}p expected
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Empty state (placeholder for gated view) -->
|
|
<template v-else>
|
|
<h3 class="text-2xl font-black text-mauve">Fill up now</h3>
|
|
<div class="h-2 bg-zinc-200 rounded-full"><div class="h-full bg-mauve w-4/5 rounded-full"></div></div>
|
|
<p class="text-sm text-zinc-500">Prices in your area are rising — best to fill up today.</p>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
prediction: { type: Object, default: null },
|
|
loading: { type: Boolean, default: false },
|
|
isPaidTier: { type: Boolean, default: false },
|
|
})
|
|
|
|
const actionLabel = computed(() => {
|
|
if (!props.prediction) return ''
|
|
return {
|
|
fill_now: 'Fill up now',
|
|
wait: 'Wait — prices falling',
|
|
no_signal: 'No clear signal',
|
|
}[props.prediction.action] ?? 'Check local prices'
|
|
})
|
|
</script>
|