775e076bb7
Add current_period_start, current_period_end, and stripe_data columns to subscriptions table via migration. Extend Subscription model with datetime casts for new fields. Create comprehensive prediction engine documentation covering signals, aggregation, confidence calibration, and weekly summary logic. Add PredictionFull Vue component displaying action label, reasoning, and 7-day context. Refactor StationList to collapse outdated stations behind expandable section. Add UpsellBanner component with station count formatting. Create .claude/settings.json denying .env file access. Add todo.md tracking Stripe dashboard setup, production deployment steps, and E2E QA checklist. Update .env.example with fuel-finder credentials, Anthropic config, and complete Stripe price IDs.
53 lines
2.2 KiB
Vue
53 lines
2.2 KiB
Vue
<template>
|
|
<div
|
|
v-if="!isPaidTier"
|
|
class="relative overflow-hidden rounded-2xl border border-accent/30 bg-gradient-to-r from-accent/10 via-accent/5 to-transparent p-5 sm:p-6"
|
|
>
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="flex items-start gap-4">
|
|
<div class="shrink-0 w-11 h-11 rounded-2xl bg-accent text-white flex items-center justify-center shadow-md">
|
|
<iconify-icon class="text-xl" icon="lucide:sparkles"></iconify-icon>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<h3 class="text-lg sm:text-xl font-black text-zinc-800 leading-tight">
|
|
Stop guessing. Get a buy-or-wait alert before every fill-up.
|
|
</h3>
|
|
<p class="text-sm text-zinc-500">
|
|
14-day predictions + daily price-drop alerts across
|
|
<span class="font-bold text-zinc-800">{{ stationCountLabel }}</span> UK stations.
|
|
From <span class="font-bold text-zinc-800">£0.99/mo</span>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<a
|
|
:href="ctaHref"
|
|
class="shrink-0 inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-accent text-white text-sm font-black shadow-lg hover:bg-accent-content transition-colors"
|
|
>
|
|
{{ ctaLabel }}
|
|
<iconify-icon class="text-base" icon="lucide:arrow-right"></iconify-icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useAuth } from '../composables/useAuth.js'
|
|
|
|
const props = defineProps({
|
|
stationCount: { type: Number, default: null },
|
|
})
|
|
|
|
const { isAuthenticated, isPaidTier } = useAuth()
|
|
|
|
const stationCountLabel = computed(() => {
|
|
if (!props.stationCount) {
|
|
return '14,500+'
|
|
}
|
|
return new Intl.NumberFormat('en-GB').format(props.stationCount)
|
|
})
|
|
|
|
const ctaHref = computed(() => isAuthenticated.value ? '#pricing' : '/register?tier=plus&cadence=monthly')
|
|
const ctaLabel = computed(() => isAuthenticated.value ? 'See plans' : 'Start saving')
|
|
</script>
|