OpenClaw
9ec7613ee5
- Add Subscription interface to auth store - Add subscription computed properties (isTrialActive, isExpired, etc.) - Add SubscriptionBanner component (trial warning, expired notice) - Add SubscriptionExpiredView (blocked access screen) - Update AppLayout to show banner - Update router to redirect expired subscriptions
59 lines
1.7 KiB
Vue
59 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
|
|
const authStore = useAuthStore()
|
|
|
|
const bannerType = computed(() => {
|
|
if (authStore.isSubscriptionExpired) return 'expired'
|
|
if (authStore.showTrialWarning) return 'trial-warning'
|
|
if (authStore.isTrialActive) return 'trial'
|
|
return null
|
|
})
|
|
|
|
const bannerClass = computed(() => {
|
|
switch (bannerType.value) {
|
|
case 'expired': return 'bg-red-600 text-white'
|
|
case 'trial-warning': return 'bg-yellow-500 text-yellow-900'
|
|
case 'trial': return 'bg-blue-500 text-white'
|
|
default: return ''
|
|
}
|
|
})
|
|
|
|
const message = computed(() => {
|
|
const days = authStore.trialDaysRemaining
|
|
|
|
switch (bannerType.value) {
|
|
case 'expired':
|
|
return authStore.subscription?.status === 'paused'
|
|
? '⚠️ Ihr Account wurde pausiert. Bitte kontaktieren Sie den Support.'
|
|
: '⚠️ Ihre Testphase ist abgelaufen. Bitte wählen Sie ein Abonnement.'
|
|
case 'trial-warning':
|
|
return `⏰ Nur noch ${days} Tag${days === 1 ? '' : 'e'} in der Testphase! Jetzt Abo wählen.`
|
|
case 'trial':
|
|
return `🎉 Testphase: Noch ${days} Tag${days === 1 ? '' : 'e'} kostenlos testen`
|
|
default:
|
|
return ''
|
|
}
|
|
})
|
|
|
|
const showBanner = computed(() => bannerType.value !== null)
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="showBanner"
|
|
:class="['px-4 py-2 text-center text-sm font-medium', bannerClass]"
|
|
>
|
|
{{ message }}
|
|
<a
|
|
v-if="bannerType === 'expired' || bannerType === 'trial-warning'"
|
|
href="https://secu.kronos-soulution.de/#preise"
|
|
target="_blank"
|
|
class="ml-2 underline font-bold hover:no-underline"
|
|
>
|
|
Preise ansehen →
|
|
</a>
|
|
</div>
|
|
</template>
|