Remove prediction API endpoint and integrate into stations search

Consolidate prediction functionality by merging /api/prediction endpoint into /api/stations response. Move prediction logic from PredictionController into StationController, returning prediction data alongside station results. Replace usePrediction composable with unified useStations that returns {stations, meta, prediction}. Remove PredictionRequest, related tests, and unused Vue components (FuelFinderTest, MapTest, RecommendationTest, StationListTest). Add PredictionFull component and UpsellBanner. Extend NationalFuelPredictionService to include weekly_summary (7-day series, yesterday/today averages, cheapest/priciest days) and oil signal from price_predictions table. Update Home.vue to consume prediction from stations response. Add Plan::resolveCadenceForUser helper and configure Cashier to use custom Subscription model.
2026-04-29 13:28:33 +01:00
parent ee6de23709
commit 088fd11058
29 changed files with 1046 additions and 499 deletions
--- a/resources/js/components/PredictionCard.vue
+++ b/resources/js/components/PredictionCard.vue
@@ -29,40 +29,13 @@
        </div>

        <!-- Paid: full prediction -->
-        <div
-            v-else-if="prediction"
-            class="p-6 bg-white rounded-2xl border border-zinc-300 space-y-4"
-        >
-            <p class="text-xs font-bold uppercase tracking-widest text-zinc-500">Price Prediction</p>
-
-            <h3
-                :class="['text-2xl font-black', actionTextColor]"
-            >
-                {{ actionLabel }}
-            </h3>
-
-            <div class="w-full h-2 bg-zinc-200 rounded-full overflow-hidden">
-                <div
-                    :class="['h-full rounded-full transition-all', actionBarColor]"
-                    :style="{ width: prediction.confidence_score + '%' }"
-                ></div>
-            </div>
-
-            <p class="text-sm text-zinc-500 leading-relaxed">{{ prediction.reasoning }}</p>
-
-            <div class="flex flex-wrap items-center gap-x-4 gap-y-1 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>
-        </div>
+        <PredictionFull v-else :prediction="prediction" />
    </div>
 </template>

 <script setup>
 import { computed } from 'vue'
+import PredictionFull from './PredictionFull.vue'

 const props = defineProps({
    prediction: { type: Object, default: null },
@@ -70,31 +43,6 @@ const props = defineProps({
    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'
-})
-
-const actionTextColor = computed(() => {
-    if (!props.prediction) return 'text-zinc-800'
-    return {
-        fill_now: 'text-mauve',
-        wait: 'text-teal',
-    }[props.prediction.action] ?? 'text-tan'
-})
-
-const actionBarColor = computed(() => {
-    if (!props.prediction) return 'bg-zinc-400'
-    return {
-        fill_now: 'bg-mauve',
-        wait: 'bg-teal',
-    }[props.prediction.action] ?? 'bg-tan'
-})
-
 const direction = computed(() => props.prediction?.predicted_direction ?? 'stable')

 const genericSentence = computed(() => ({
--- a/resources/js/components/StationCard.vue
+++ b/resources/js/components/StationCard.vue
@@ -57,7 +57,7 @@
            leave-to-class="opacity-0"
        >
            <div v-if="expanded" class="border-t border-zinc-200 pt-3 space-y-3">
-                <p v-if="brandLabel" class="text-[10px] font-black uppercase tracking-widest text-zinc-500">
+                <p v-if="brandLabel" class="font-mono text-[10px] uppercase tracking-widest text-zinc-500 mb-1 truncate">
                    {{ brandLabel }}
                </p>

--- a/resources/js/composables/useAuth.js
+++ b/resources/js/composables/useAuth.js
@@ -19,6 +19,22 @@ export function useAuth() {
        return ['basic', 'plus', 'pro'].includes(userTier.value)
    })

+    const subscriptionCancelled = computed(() => {
+        return user.value?.subscription_cancelled ?? false
+    })
+
+    const subscriptionCadence = computed(() => {
+        return user.value?.subscription_cadence ?? null
+    })
+
+    const subscribedAt = computed(() => {
+        return user.value?.subscribed_at ?? null
+    })
+
+    const subscriptionExpiresAt = computed(() => {
+        return user.value?.subscription_expires_at ?? null
+    })
+
    async function fetchUser() {
        if (fetched.value) {
            return
@@ -68,6 +84,10 @@ export function useAuth() {
        isAuthenticated,
        userTier,
        isPaidTier,
+        subscriptionCancelled,
+        subscriptionCadence,
+        subscribedAt,
+        subscriptionExpiresAt,
        fetchUser,
        clearUser,
        logout,
--- a/resources/js/composables/usePrediction.js
+++ b/resources/js/composables/usePrediction.js
@@ -1,31 +0,0 @@
-import { ref } from 'vue'
-import api from '../axios.js'
-
-export function usePrediction() {
-    const prediction = ref(null)
-    const loading = ref(false)
-    const error = ref(null)
-
-    async function fetch({ lat, lng } = {}) {
-        loading.value = true
-        error.value = null
-        prediction.value = null
-
-        const params = {}
-        if (lat && lng) {
-            params.lat = lat
-            params.lng = lng
-        }
-
-        try {
-            const response = await api.get('/prediction', { params })
-            prediction.value = response.data
-        } catch (err) {
-            error.value = 'Unable to load prediction.'
-        } finally {
-            loading.value = false
-        }
-    }
-
-    return { prediction, loading, error, fetch }
-}
--- a/resources/js/composables/useStations.js
+++ b/resources/js/composables/useStations.js
@@ -4,6 +4,7 @@ import api from '../axios.js'
 export function useStations() {
    const stations = ref([])
    const meta = ref(null)
+    const prediction = ref(null)
    const loading = ref(false)
    const error = ref(null)

@@ -12,6 +13,7 @@ export function useStations() {
        error.value = null
        stations.value = []
        meta.value = null
+        prediction.value = null

        const params = { fuel_type: fuelType, radius, sort }

@@ -26,6 +28,7 @@ export function useStations() {
            const response = await api.get('/stations', { params })
            stations.value = response.data.data
            meta.value = response.data.meta
+            prediction.value = response.data.prediction ?? null
        } catch (err) {
            error.value = err.response?.data?.errors
                ?? { general: ['Unable to load stations. Please try again.'] }
@@ -37,9 +40,10 @@ export function useStations() {
    function reset() {
        stations.value = []
        meta.value = null
+        prediction.value = null
        error.value = null
        loading.value = false
    }

-    return { stations, meta, loading, error, search, reset }
+    return { stations, meta, prediction, loading, error, search, reset }
 }
--- a/resources/js/views/Home.vue
+++ b/resources/js/views/Home.vue
@@ -39,7 +39,7 @@
                <!-- Prediction box (sits above filter results) -->
                <PredictionCard
                    :is-paid-tier="showFullPrediction"
-                    :loading="predictionLoading"
+                    :loading="loading"
                    :prediction="prediction"
                />

@@ -81,6 +81,7 @@
                            :radius-miles="radiusMiles"
                            :stations="filteredStations"
                        />
+                        <UpsellBanner :station-count="liveStats.stationCount" />
                        <StationList
                            :current-sort="sort"
                            :origin="searchOrigin"
@@ -236,7 +237,7 @@
                            </div>
                        </div>
                        <ul class="space-y-4 mb-8 flex-1">
-                            <li class="text-sm flex gap-2"><iconify-icon class="text-accent" icon="lucide:check"></iconify-icon> Ad-free Experience</li>
+                            <li class="text-sm flex gap-2"><iconify-icon class="text-accent" icon="lucide:check"></iconify-icon> Buy-or-Wait Score</li>
                            <li class="text-sm flex gap-2"><iconify-icon class="text-accent" icon="lucide:check"></iconify-icon> 14-day Trend Data</li>
                            <li class="text-sm flex gap-2"><iconify-icon class="text-accent" icon="lucide:check"></iconify-icon> 3 Daily Price Alerts</li>
                        </ul>
@@ -385,7 +386,7 @@ import api from '../axios.js'
 import PostSearchFilters from '../components/PostSearchFilters.vue'
 import PredictionCard from '../components/PredictionCard.vue'
 import StationList from '../components/StationList.vue'
-import { usePrediction } from '../composables/usePrediction.js'
+import UpsellBanner from '../components/UpsellBanner.vue'

 const LeafletMap = defineAsyncComponent(() => import('../components/LeafletMap.vue'))
 import LandingNav from '../components/landing/LandingNav.vue'
@@ -395,8 +396,6 @@ import HeroSearch from '../components/landing/HeroSearch.vue'
 import StatsRow from '../components/landing/StatsRow.vue'

 const { isAuthenticated, userTier } = useAuth()
-const { prediction, loading: predictionLoading, fetch: fetchPrediction } = usePrediction()
-const showFullPrediction = computed(() => Boolean(prediction.value) && !prediction.value.tier_locked)

 const liveStats = ref({ stationCount: null, latestPriceAt: null })

@@ -446,7 +445,8 @@ const PRICES = {
    annual: { basic: '£9.90', plus: '£24.90', pro: '£39.90' },
 }
 const PRICE_SUFFIX = { monthly: '/mo', annual: '/yr' }
-const { stations, meta, loading, error, search, reset } = useStations()
+const { stations, meta, prediction, loading, error, search, reset } = useStations()
+const showFullPrediction = computed(() => Boolean(prediction.value) && !prediction.value.tier_locked)

 watch(loading, (isLoading) => {
    if (!isLoading) return
@@ -557,9 +557,6 @@ async function runSearch(params) {
    radiusMiles.value = params.radius ?? radiusMiles.value
    searchAttempted.value = true
    await search(params)
-    const lat = meta.value?.lat ?? params.lat ?? null
-    const lng = meta.value?.lng ?? params.lng ?? null
-    fetchPrediction(lat && lng ? { lat, lng } : {})
 }

 async function onSearch(params) {
--- a/resources/js/views/dashboard/Overview.vue
+++ b/resources/js/views/dashboard/Overview.vue
@@ -19,11 +19,39 @@
        </div>

        <div class="p-6 bg-white rounded-2xl border border-zinc-300 space-y-2">
-            <p class="text-sm font-bold uppercase tracking-widest text-zinc-500">Your plan</p>
+            <p class="font-mono text-[10px] uppercase tracking-widest text-zinc-500 mb-1 truncate">Your plan</p>
            <p class="text-xl font-black text-zinc-800 capitalize">{{ userTier }}</p>
            <a v-if="userTier === 'free'" class="inline-block text-sm font-bold text-accent hover:underline" href="/pricing">
                Upgrade for alerts + predictions →
            </a>
+            <dl v-if="isPaidTier" class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-3 mt-3 border-t border-zinc-200">
+                <div v-if="subscribedAt">
+                    <dt class="font-mono text-[10px] uppercase tracking-widest text-zinc-500 mb-1 truncate">Subscribed</dt>
+                    <dd class="text-sm font-semibold text-zinc-800 mt-0.5">{{ formatDate(subscribedAt) }}</dd>
+                </div>
+                <div v-if="subscriptionCadence">
+                    <dt class="font-mono text-[10px] uppercase tracking-widest text-zinc-500 mb-1 truncate">Billed</dt>
+                    <dd class="text-sm font-semibold text-zinc-800 mt-0.5 capitalize">{{ subscriptionCadence }}</dd>
+                </div>
+                <div v-if="subscriptionExpiresAt">
+                    <dt class="font-mono text-[10px] uppercase tracking-widest text-zinc-500 mb-1 truncate">
+                        {{ subscriptionCancelled ? 'Ends on' : 'Renews on' }}
+                    </dt>
+                    <dd class="text-sm font-semibold text-zinc-800 mt-0.5">{{ formatDate(subscriptionExpiresAt) }}</dd>
+                </div>
+            </dl>
+            <div v-if="isPaidTier && !subscriptionCancelled" class="pt-3 mt-3 border-t border-zinc-200">
+                <a
+                    class="inline-flex items-center gap-1.5 text-sm font-semibold text-mauve hover:text-zinc-800 transition-colors"
+                    href="/billing/portal"
+                >
+                    <iconify-icon class="text-base" icon="lucide:circle-x"></iconify-icon>
+                    Cancel subscription
+                </a>
+                <p class="text-xs text-zinc-500 mt-1">
+                    You'll keep your features until the end of the billing period.
+                </p>
+            </div>
        </div>
    </div>
 </template>
@@ -32,7 +60,25 @@
 import { RouterLink } from 'vue-router'
 import { useAuth } from '../../composables/useAuth.js'

-const { user, userTier } = useAuth()
+const {
+    user,
+    userTier,
+    isPaidTier,
+    subscriptionCancelled,
+    subscriptionCadence,
+    subscribedAt,
+    subscriptionExpiresAt,
+} = useAuth()
+
+const dateFormatter = new Intl.DateTimeFormat('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })
+
+function formatDate(value) {
+    if (!value) {
+        return ''
+    }
+    const date = new Date(value)
+    return Number.isNaN(date.getTime()) ? '' : dateFormatter.format(date)
+}

 const quickLinks = [
    { to: '/dashboard/saved-stations', label: 'Saved Stations', icon: 'lucide:bookmark', description: 'Stations you\'ve bookmarked for quick access.' },
--- a/resources/js/views/dashboard/settings/Security.vue
+++ b/resources/js/views/dashboard/settings/Security.vue
@@ -76,7 +76,7 @@
                    <!-- eslint-disable-next-line vue/no-v-html -->
                    <div v-html="setupData.svg" class="[&_svg]:w-40 [&_svg]:h-40"></div>
                    <div class="space-y-1">
-                        <p class="text-xs font-bold text-zinc-500 uppercase tracking-widest">Or enter setup key manually</p>
+                        <p class="font-mono text-[10px] uppercase tracking-widest text-zinc-500 mb-1 truncate">Or enter setup key manually</p>
                        <code class="text-xs bg-zinc-50 px-3 py-2 rounded-lg font-mono text-zinc-800 break-all block">{{ setupData.secretKey }}</code>
                    </div>
                </div>