88 lines
3.7 KiB
Vue
88 lines
3.7 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 icon="lucide:lock" class="text-[#bb5b3e] text-3xl"></iconify-icon>
|
|
<p class="font-bold text-[#4a3f3b]">Price predictions are available on paid plans</p>
|
|
<a
|
|
href="/pricing"
|
|
class="px-6 py-2 bg-[#bb5b3e] text-white rounded-full text-sm font-bold hover:bg-[#a34a31] 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-[#e5ded7] space-y-4', !isPaidTier && 'select-none pointer-events-none']"
|
|
>
|
|
<p class="text-xs font-bold uppercase tracking-widest text-[#89726c]">Price Prediction</p>
|
|
|
|
<!-- Loading state -->
|
|
<template v-if="loading">
|
|
<div class="animate-pulse space-y-2">
|
|
<div class="h-8 bg-[#e5ded7] rounded w-1/2"></div>
|
|
<div class="h-4 bg-[#e5ded7] 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-[#8B4860]' : prediction.action === 'wait' ? 'text-[#4A7C7E]' : 'text-[#9B8B6B]'"
|
|
>
|
|
{{ actionLabel }}
|
|
</h3>
|
|
|
|
<div class="w-full h-2 bg-[#eeeae5] rounded-full overflow-hidden">
|
|
<div
|
|
class="h-full rounded-full transition-all"
|
|
:class="prediction.action === 'fill_now' ? 'bg-[#8B4860]' : 'bg-[#4A7C7E]'"
|
|
:style="{ width: prediction.confidence_score + '%' }"
|
|
></div>
|
|
</div>
|
|
|
|
<p class="text-sm text-[#89726c] leading-relaxed">{{ prediction.reasoning }}</p>
|
|
|
|
<div class="flex items-center gap-4 text-xs text-[#89726c] 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-[#8B4860]">Fill up now</h3>
|
|
<div class="h-2 bg-[#eeeae5] rounded-full"><div class="h-full bg-[#8B4860] w-4/5 rounded-full"></div></div>
|
|
<p class="text-sm text-[#89726c]">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>
|