feat: refactor billing components and add payment history
- Remove BillingWalletRow.vue component. - Update PlayerConfigsTable.vue to use JSX syntax and improve rendering logic. - Enhance auth store with currency and date formatting utilities. - Add ListIcon and MoneyCheck icon components. - Implement PaymentHistory component for displaying payment history with download functionality. - Create PlanSelection component for selecting billing plans with improved UI. - Introduce UpgradeDialog component for handling plan upgrades and payment methods.
This commit is contained in:
3
bun.lock
3
bun.lock
@@ -17,6 +17,7 @@
|
||||
"@unhead/vue": "^2.1.12",
|
||||
"@vueuse/core": "^14.2.1",
|
||||
"aws4fetch": "^1.0.20",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"hono": "^4.12.7",
|
||||
"i18next": "^25.8.18",
|
||||
@@ -433,6 +434,8 @@
|
||||
|
||||
"chokidar": ["chokidar@5.0.0", "", { "dependencies": { "readdirp": "^5.0.0" } }, "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw=="],
|
||||
|
||||
"class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
|
||||
|
||||
"cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", "wrap-ansi": "^7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="],
|
||||
|
||||
"clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
|
||||
|
||||
4
components.d.ts
vendored
4
components.d.ts
vendored
@@ -57,8 +57,10 @@ declare module 'vue' {
|
||||
Layout: typeof import('./src/components/icons/Layout.vue')['default']
|
||||
LayoutDashboard: typeof import('./src/components/icons/LayoutDashboard.vue')['default']
|
||||
LinkIcon: typeof import('./src/components/icons/LinkIcon.vue')['default']
|
||||
ListIcon: typeof import('./src/components/icons/ListIcon.vue')['default']
|
||||
LockIcon: typeof import('./src/components/icons/LockIcon.vue')['default']
|
||||
MailIcon: typeof import('./src/components/icons/MailIcon.vue')['default']
|
||||
MoneyCheck: typeof import('./src/components/icons/MoneyCheck.vue')['default']
|
||||
MonitorIcon: typeof import('./src/components/icons/MonitorIcon.vue')['default']
|
||||
NotificationDrawer: typeof import('./src/components/NotificationDrawer.vue')['default']
|
||||
OfflineOverlay: typeof import('./src/components/OfflineOverlay.vue')['default']
|
||||
@@ -142,8 +144,10 @@ declare global {
|
||||
const Layout: typeof import('./src/components/icons/Layout.vue')['default']
|
||||
const LayoutDashboard: typeof import('./src/components/icons/LayoutDashboard.vue')['default']
|
||||
const LinkIcon: typeof import('./src/components/icons/LinkIcon.vue')['default']
|
||||
const ListIcon: typeof import('./src/components/icons/ListIcon.vue')['default']
|
||||
const LockIcon: typeof import('./src/components/icons/LockIcon.vue')['default']
|
||||
const MailIcon: typeof import('./src/components/icons/MailIcon.vue')['default']
|
||||
const MoneyCheck: typeof import('./src/components/icons/MoneyCheck.vue')['default']
|
||||
const MonitorIcon: typeof import('./src/components/icons/MonitorIcon.vue')['default']
|
||||
const NotificationDrawer: typeof import('./src/components/NotificationDrawer.vue')['default']
|
||||
const OfflineOverlay: typeof import('./src/components/OfflineOverlay.vue')['default']
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
"@unhead/vue": "^2.1.12",
|
||||
"@vueuse/core": "^14.2.1",
|
||||
"aws4fetch": "^1.0.20",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"hono": "^4.12.7",
|
||||
"i18next": "^25.8.18",
|
||||
|
||||
@@ -503,7 +503,7 @@
|
||||
"username": "Username",
|
||||
"email": "Email Address",
|
||||
"storageUsage": "Storage Usage",
|
||||
"storageUsedOfLimit": "{{used}} of {{limit}} used",
|
||||
"storageUsedOfLimit": "{{used}} used",
|
||||
"editProfile": "Edit Profile",
|
||||
"changePassword": "Change Password"
|
||||
},
|
||||
@@ -534,9 +534,9 @@
|
||||
"processing": "Processing...",
|
||||
"upgrade": "Upgrade",
|
||||
"storage": "Storage",
|
||||
"storageUsedOfLimit": "{{used}} of {{limit}} used",
|
||||
"storageUsedOfLimit": "{{used}} used",
|
||||
"totalVideos": "Total videos",
|
||||
"totalVideosUsedOfLimit": "{{used}} of {{limit}} videos",
|
||||
"totalVideosUsedOfLimit": "{{used}} videos",
|
||||
"paymentHistory": "Payment History",
|
||||
"paymentHistorySubtitle": "Your past payments and invoices",
|
||||
"noPaymentHistory": "No payment history found.",
|
||||
@@ -552,9 +552,9 @@
|
||||
},
|
||||
"subscription": {
|
||||
"activeTitle": "Plan active",
|
||||
"activeDescription": " {{plan}} is active until {{date}}",
|
||||
"activeDescription": " Active until {{date}}",
|
||||
"expiringTitle": "Expiring soon",
|
||||
"expiringDescription": " {{plan}} expires on {{date}}",
|
||||
"expiringDescription": " Expires on {{date}}",
|
||||
"expiredTitle": "Plan expired",
|
||||
"expiredDescription": "Your last subscription ended on {{date}}",
|
||||
"freeTitle": "Free access",
|
||||
|
||||
@@ -503,7 +503,7 @@
|
||||
"username": "Tên người dùng",
|
||||
"email": "Địa chỉ email",
|
||||
"storageUsage": "Dung lượng sử dụng",
|
||||
"storageUsedOfLimit": "Đã dùng {{used}} trên {{limit}}",
|
||||
"storageUsedOfLimit": "Đã dùng {{used}}",
|
||||
"editProfile": "Chỉnh sửa hồ sơ",
|
||||
"changePassword": "Đổi mật khẩu"
|
||||
},
|
||||
@@ -534,9 +534,9 @@
|
||||
"processing": "Đang xử lý...",
|
||||
"upgrade": "Nâng cấp",
|
||||
"storage": "Dung lượng",
|
||||
"storageUsedOfLimit": "Đã dùng {{used}} trên {{limit}}",
|
||||
"storageUsedOfLimit": "Đã dùng {{used}}",
|
||||
"totalVideos": "Tổng video",
|
||||
"totalVideosUsedOfLimit": "{{used}} trên {{limit}} video",
|
||||
"totalVideosUsedOfLimit": "{{used}} video",
|
||||
"paymentHistory": "Lịch sử thanh toán",
|
||||
"paymentHistorySubtitle": "Các khoản thanh toán và hóa đơn trước đây của bạn",
|
||||
"noPaymentHistory": "Không tìm thấy lịch sử thanh toán.",
|
||||
@@ -551,9 +551,9 @@
|
||||
},
|
||||
"subscription": {
|
||||
"activeTitle": "Gói đang hoạt động",
|
||||
"activeDescription": " {{plan}} có hiệu lực đến {{date}}",
|
||||
"activeDescription": " Hiệu lực đến {{date}}",
|
||||
"expiringTitle": "Sắp hết hạn",
|
||||
"expiringDescription": " {{plan}} sẽ hết hạn vào {{date}}",
|
||||
"expiringDescription": "Hết hạn vào {{date}}",
|
||||
"expiredTitle": "Gói đã hết hạn",
|
||||
"expiredDescription": "Gói gần nhất của bạn đã kết thúc vào {{date}}",
|
||||
"freeTitle": "Gói miễn phí",
|
||||
|
||||
7
src/components/icons/ListIcon.vue
Normal file
7
src/components/icons/ListIcon.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 468"><path d="M10 170v224c0 35 29 64 64 64h320c35 0 64-29 64-64V170H10zm96 88c0-13 11-24 24-24h208c13 0 24 11 24 24s-11 24-24 24H130c-13 0-24-11-24-24zm0 112c0-13 11-24 24-24h208c13 0 24 11 24 24s-11 24-24 24H130c-13 0-24-11-24-24z" fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)"/><path d="M74 10c-35 0-64 29-64 64v96h448V74c0-35-29-64-64-64H74zm240 48h64c7 0 12 4 15 10 2 6 1 13-4 17l-32 32c-6 7-16 7-22 0l-32-32c-5-4-6-11-4-17 3-6 9-10 15-10z" fill="var(--colors-primary-DEFAULT)"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="-10 -226 468 468"><path d="M64-184h320c18 0 32 14 32 32v64H32v-64c0-18 14-32 32-32zM32-56h384v224c0 18-14 32-32 32H64c-18 0-32-14-32-32V-56zM0-152v320c0 35 29 64 64 64h320c35 0 64-29 64-64v-320c0-35-29-64-64-64H64c-35 0-64 29-64 64zM112 8c-9 0-16 7-16 16s7 16 16 16h224c9 0 16-7 16-16s-7-16-16-16H112zm0 96c-9 0-16 7-16 16s7 16 16 16h224c9 0 16-7 16-16s-7-16-16-16H112zm200-260c-5 0-9 3-11 7-2 5-1 10 3 14l24 24c4 4 12 4 17 0l24-24c3-4 4-9 2-14-2-4-6-7-11-7h-48z" fill="currentColor"/></svg>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
defineProps<{ filled?: boolean }>();
|
||||
</script>
|
||||
10
src/components/icons/MoneyCheck.vue
Normal file
10
src/components/icons/MoneyCheck.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<script lang="ts" setup>
|
||||
defineProps<{
|
||||
filled?: boolean;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 610 500"><path d="M10 74c0-35 29-64 64-64h384c35 0 64 29 64 64v73c-21 3-41 13-58 29l-58 58H306c-13 0-24 11-24 24s11 24 24 24h52l-64 64c-13 14-23 30-28 48H74c-35 0-64-29-64-64V74zm76 93c0 25 19 47 44 51l42 7c6 1 10 7 10 13 0 7-5 12-12 12h-56c-11 0-20 9-20 20s9 20 20 20h24v4c0 11 9 20 20 20s20-9 20-20v-5c25-4 44-25 44-51s-18-48-44-52l-41-7c-6-1-11-6-11-12 0-7 6-13 13-13h47c11 0 20-9 20-20s-9-20-20-20h-8v-4c0-11-9-20-20-20s-20 9-20 20v4c-29 0-52 24-52 53zm196-21c0 13 11 24 24 24h128c13 0 24-11 24-24s-11-24-24-24H306c-13 0-24 11-24 24z" fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)"/><path d="m298 473 12-60c3-12 9-24 18-33l119-119 80 80-119 119c-9 9-20 15-33 18l-59 12h-3c-8 0-15-7-15-15v-3zm0 0zm251-154-80-80 29-29c22-22 58-22 80 0s22 58 0 80l-29 29z" fill="var(--colors-primary-DEFAULT)"/></svg>
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 607 500"><path d="M74 42h384c18 0 32 14 32 32v81c11-3 22-5 32-5V74c0-35-28-64-64-64H74c-35 0-64 29-64 64v256c0 35 29 64 64 64h189l1-4c1-9 4-19 8-28H74c-17 0-32-14-32-32V74c0-18 15-32 32-32zm240 192c-8 0-16 7-16 16s8 16 16 16h44l32-32h-76zm-16-80c0 9 8 16 16 16h96c9 0 16-7 16-16s-7-16-16-16h-96c-8 0-16 7-16 16zM170 98c-8 0-16 7-16 16v8h-1c-26 0-47 21-47 46 0 23 17 42 39 46l45 8c7 1 12 7 12 14 0 8-6 14-14 14h-58c-8 0-16 7-16 16s8 16 16 16h24v8c0 9 8 16 16 16 9 0 16-7 16-16v-8h2c26 0 46-21 46-46 0-23-16-42-38-46l-46-8c-6-1-12-7-12-14 0-8 7-14 15-14h49c9 0 16-7 16-16s-7-16-16-16h-16v-8c0-9-7-16-16-16zm182 288 102-102 50 51-102 102c-4 5-11 8-17 9l-51 8 9-51c1-6 4-12 8-17zm0 0zm124-125 21-20c14-14 37-14 51 0s14 36 0 50l-21 21-51-51zM311 398l-12 75c0 1-1 1-1 2 0 8 7 15 15 15h3l74-13c13-2 26-8 35-17l145-146c27-26 27-69 0-96-26-26-69-26-96 0L329 364c-9 9-16 21-18 34z" fill="currentColor"/></svg>
|
||||
</template>
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
import { cva } from "class-variance-authority";
|
||||
import { ButtonHTMLAttributes, computed } from 'vue';
|
||||
type UiButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
|
||||
type UiButtonSize = 'sm' | 'md' | 'lg';
|
||||
|
||||
@@ -12,6 +13,7 @@ const props = withDefaults(
|
||||
disabled?: boolean;
|
||||
loading?: boolean;
|
||||
type?: 'button' | 'submit' | 'reset';
|
||||
onClick?: ButtonHTMLAttributes['onClick'];
|
||||
}>(),
|
||||
{
|
||||
variant: 'primary',
|
||||
@@ -24,32 +26,37 @@ const props = withDefaults(
|
||||
);
|
||||
|
||||
const isDisabled = computed(() => props.disabled || props.loading);
|
||||
const buttonVariants = cva(":uno: inline-flex items-center justify-center gap-2 rounded-md border font-medium whitespace-nowrap shadow-[0_1px_0_rgba(27,31,36,0.04),0_1px_3px_rgba(27,31,36,0.12)] outline-none transition-[transform,box-shadow,background-color,border-color,color,opacity] duration-150 ease-out active:translate-y-[0.5px] hover:shadow-[0_2px_0_rgba(27,31,36,0.06)] disabled:cursor-not-allowed disabled:opacity-60 focus-visible:ring-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
primary: 'border-transparent bg-primary text-white hover:bg-primaryHover focus-visible:ring-primary/25',
|
||||
secondary: 'border-border bg-white text-text hover:bg-header focus-visible:ring-#0969da/20',
|
||||
ghost: 'border-transparent bg-transparent text-text hover:bg-header focus-visible:ring-#0969da/20 shadow-none',
|
||||
danger: 'border-transparent bg-danger text-white hover:opacity-92 focus-visible:ring-danger/20',
|
||||
},
|
||||
size: {
|
||||
sm: 'min-h-[28px] px-3 text-[12px] leading-[20px]',
|
||||
md: 'min-h-[32px] px-3 text-[14px] leading-[20px]',
|
||||
lg: 'min-h-[36px] px-4 text-[14px] leading-[20px]',
|
||||
},
|
||||
block: {
|
||||
true: 'w-full',
|
||||
false: '',
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: props.variant,
|
||||
size: props.size,
|
||||
block: props.block,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const classes = computed(() => {
|
||||
const variants: Record<UiButtonVariant, string> = {
|
||||
primary: 'border-transparent bg-primary text-white hover:bg-primaryHover focus-visible:ring-primary/25',
|
||||
secondary: 'border-border bg-white text-text hover:bg-header focus-visible:ring-#0969da/20',
|
||||
ghost: 'border-transparent bg-transparent text-text hover:bg-header focus-visible:ring-#0969da/20 shadow-none',
|
||||
danger: 'border-transparent bg-danger text-white hover:opacity-92 focus-visible:ring-danger/20',
|
||||
};
|
||||
|
||||
const sizes: Record<UiButtonSize, string> = {
|
||||
sm: 'min-h-[28px] px-3 text-[12px] leading-[20px]',
|
||||
md: 'min-h-[32px] px-3 text-[14px] leading-[20px]',
|
||||
lg: 'min-h-[36px] px-4 text-[14px] leading-[20px]',
|
||||
};
|
||||
|
||||
return [
|
||||
'inline-flex items-center justify-center gap-2 rounded-md border font-medium whitespace-nowrap shadow-primer outline-none transition-[transform,box-shadow,background-color,border-color,color,opacity] duration-150 ease-out active:translate-y-[0.5px] hover:shadow-[0_2px_0_rgba(27,31,36,0.06)] disabled:cursor-not-allowed disabled:opacity-60 focus-visible:ring-4',
|
||||
variants[props.variant],
|
||||
sizes[props.size],
|
||||
props.block ? 'w-full' : '',
|
||||
].join(' ');
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button :type="type" :disabled="isDisabled" :class="classes" :aria-busy="loading || undefined">
|
||||
<button :type="type" :disabled="isDisabled" :class="cn(buttonVariants({variant, size, block}))" v-on:click="onClick" :aria-busy="loading || undefined">
|
||||
<span
|
||||
v-if="loading"
|
||||
class="h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-current border-r-transparent"
|
||||
|
||||
@@ -2,14 +2,9 @@
|
||||
import XIcon from '@/components/icons/XIcon.vue';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useTranslation } from 'i18next-vue';
|
||||
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import { onBeforeUnmount, watch } from 'vue';
|
||||
|
||||
// Ensure client-side only rendering to avoid hydration mismatch
|
||||
const isMounted = ref(false);
|
||||
onMounted(() => {
|
||||
isMounted.value = true;
|
||||
});
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
visible: boolean;
|
||||
title?: string;
|
||||
@@ -43,8 +38,14 @@ watch(
|
||||
() => props.visible,
|
||||
(v) => {
|
||||
if (typeof window === 'undefined') return;
|
||||
if (v) window.addEventListener('keydown', onKeydown);
|
||||
else window.removeEventListener('keydown', onKeydown);
|
||||
if (v) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
window.addEventListener('keydown', onKeydown);
|
||||
}
|
||||
else {
|
||||
document.body.style.overflow = 'unset';
|
||||
window.removeEventListener('keydown', onKeydown);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
@@ -56,58 +57,60 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport v-if="isMounted" to="body">
|
||||
<Transition
|
||||
enter-active-class="transition-all duration-200 ease-out"
|
||||
enter-from-class="opacity-0"
|
||||
enter-to-class="opacity-100"
|
||||
leave-active-class="transition-all duration-150 ease-in"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div v-if="visible" class="fixed inset-0 z-[9999]">
|
||||
<!-- Backdrop -->
|
||||
<div
|
||||
class="absolute inset-0 bg-black/30"
|
||||
@click="closable && close()"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<ClientOnly>
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
enter-active-class="transition-all duration-200 ease-out"
|
||||
enter-from-class="opacity-0"
|
||||
enter-to-class="opacity-100"
|
||||
leave-active-class="transition-all duration-150 ease-in"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div v-if="visible" class="fixed inset-0 z-[9999]">
|
||||
<!-- Backdrop -->
|
||||
<div
|
||||
class="absolute inset-0 bg-black/40"
|
||||
@click="closable && close()"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<!-- Panel -->
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4">
|
||||
<div :class="cn('w-full bg-header border border-border rounded-lg shadow-lg overflow-hidden', maxWidthClass)">
|
||||
<!-- Header slot -->
|
||||
<div v-if="$slots.header" class="px-5 py-4 border-b border-border">
|
||||
<slot name="header" :close="close" />
|
||||
</div>
|
||||
<!-- Default title -->
|
||||
<div v-else-if="title" class="flex items-center justify-between gap-3 px-5 py-4 border-b border-border">
|
||||
<h3 class="text-sm font-semibold text-foreground">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<button
|
||||
v-if="closable"
|
||||
type="button"
|
||||
class="p-1 rounded-md text-foreground/60 hover:text-foreground hover:bg-muted/50 transition-all"
|
||||
@click="close"
|
||||
:aria-label="t('common.close')"
|
||||
>
|
||||
<XIcon class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<!-- Panel -->
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4">
|
||||
<div :class="cn('w-full bg-white border border-border rounded-lg shadow-lg overflow-hidden', maxWidthClass)">
|
||||
<!-- Header slot -->
|
||||
<div v-if="$slots.header" class="px-5 py-4 border-b border-border">
|
||||
<slot name="header" :close="close" />
|
||||
</div>
|
||||
<!-- Default title -->
|
||||
<div v-else-if="title" class="flex items-center justify-between gap-3 px-5 py-4 border-b border-border">
|
||||
<h3 class="font-semibold text-foreground">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<button
|
||||
v-if="closable"
|
||||
type="button"
|
||||
class="p-1 rounded-md text-foreground/60 hover:text-foreground hover:bg-muted/50 transition-all"
|
||||
@click="close"
|
||||
:aria-label="t('common.close')"
|
||||
>
|
||||
<XIcon class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="p-5">
|
||||
<slot />
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="p-5 max-h-[80vh] overflow-y-auto">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<!-- Footer slot -->
|
||||
<div v-if="$slots.footer" class="px-5 py-4 border-t border-border bg-muted/20">
|
||||
<slot name="footer" />
|
||||
<!-- Footer slot -->
|
||||
<div v-if="$slots.footer" class="px-5 py-4 border-t border-border bg-muted/20">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
|
||||
106
src/lib/utils.ts
106
src/lib/utils.ts
@@ -5,7 +5,10 @@ import { twMerge } from "tailwind-merge";
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
export function debounce<Func extends (...args: any[]) => any>(func: Func, wait: number): Func {
|
||||
export function debounce<Func extends (...args: any[]) => any>(
|
||||
func: Func,
|
||||
wait: number
|
||||
): Func {
|
||||
let timeout: ReturnType<typeof setTimeout> | null;
|
||||
return function (this: any, ...args: any[]) {
|
||||
if (timeout) clearTimeout(timeout);
|
||||
@@ -17,8 +20,8 @@ export function debounce<Func extends (...args: any[]) => any>(func: Func, wait:
|
||||
type AspectInfo = {
|
||||
width: number;
|
||||
height: number;
|
||||
ratio: string; // ví dụ: "16:9"
|
||||
float: number; // ví dụ: 1.777...
|
||||
ratio: string; // ví dụ: "16:9"
|
||||
float: number; // ví dụ: 1.777...
|
||||
};
|
||||
|
||||
function gcd(a: number, b: number): number {
|
||||
@@ -39,7 +42,7 @@ export function getImageAspectRatio(url: string): Promise<AspectInfo> {
|
||||
width: w,
|
||||
height: h,
|
||||
ratio: `${w / g}:${h / g}`,
|
||||
float: w / h
|
||||
float: w / h,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -50,9 +53,9 @@ export function getImageAspectRatio(url: string): Promise<AspectInfo> {
|
||||
}
|
||||
|
||||
export const formatBytes = (bytes?: number) => {
|
||||
if (!bytes) return '0 B';
|
||||
if (!bytes) return "0 B";
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
const sizes = ["B", "KB", "MB", "GB", "TB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
const value = parseFloat((bytes / Math.pow(k, i)).toFixed(2));
|
||||
return `${value} ${sizes[i]}`;
|
||||
@@ -60,44 +63,89 @@ export const formatBytes = (bytes?: number) => {
|
||||
};
|
||||
|
||||
export const formatDuration = (seconds?: number) => {
|
||||
if (!seconds) return '0:00';
|
||||
if (!seconds) return "0:00";
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
const s = Math.floor(seconds % 60);
|
||||
|
||||
if (h > 0) {
|
||||
return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
|
||||
return `${h}:${m.toString().padStart(2, "0")}:${s
|
||||
.toString()
|
||||
.padStart(2, "0")}`;
|
||||
}
|
||||
return `${m}:${s.toString().padStart(2, '0')}`;
|
||||
return `${m}:${s.toString().padStart(2, "0")}`;
|
||||
};
|
||||
|
||||
export const formatDate = (dateString: string = "", dateOnly: boolean = false) => {
|
||||
if (!dateString) return '';
|
||||
const locale = typeof document !== 'undefined'
|
||||
? document.documentElement.lang === 'vi' ? 'vi-VN' : 'en-US'
|
||||
: 'en-US';
|
||||
export const formatDate = (
|
||||
dateString: string = "",
|
||||
dateOnly: boolean = false
|
||||
) => {
|
||||
if (!dateString) return "";
|
||||
const locale =
|
||||
typeof document !== "undefined"
|
||||
? document.documentElement.lang === "vi"
|
||||
? "vi-VN"
|
||||
: "en-US"
|
||||
: "en-US";
|
||||
return new Date(dateString).toLocaleDateString(locale, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
...(dateOnly ? {} : { hour: '2-digit', minute: '2-digit' })
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
...(dateOnly ? {} : { hour: "2-digit", minute: "2-digit" }),
|
||||
});
|
||||
};
|
||||
|
||||
export const getStatusSeverity = (status: string = "") => {
|
||||
type Status = "success" | "failed" | "pending" | string;
|
||||
export const getStatusSeverity = (status: Status = "") => {
|
||||
switch (status) {
|
||||
case 'success':
|
||||
case 'ready':
|
||||
return 'success';
|
||||
case 'failed':
|
||||
return 'danger';
|
||||
case 'pending':
|
||||
return 'warn';
|
||||
case "success":
|
||||
case "ready":
|
||||
return "success";
|
||||
case "failed":
|
||||
return "danger";
|
||||
case "pending":
|
||||
return "warn";
|
||||
default:
|
||||
return 'info';
|
||||
return "info";
|
||||
}
|
||||
};
|
||||
export const getStatusStyles = (status: Status = "") => {
|
||||
switch (status) {
|
||||
case "success":
|
||||
return "bg-success/10 text-success";
|
||||
case "failed":
|
||||
return "bg-danger/10 text-danger";
|
||||
case "pending":
|
||||
return "bg-warning/10 text-warning";
|
||||
default:
|
||||
return "bg-info/10 text-info";
|
||||
}
|
||||
};
|
||||
export const isAdmin = (role: string = "") => {
|
||||
const r = String(role).toLowerCase();
|
||||
return r === "admin" || r === "superadmin";
|
||||
};
|
||||
};
|
||||
export type ApiErrorPayload = {
|
||||
code?: number;
|
||||
message?: string;
|
||||
data?: Record<string, any>;
|
||||
};
|
||||
export const getApiErrorPayload = (error: unknown): ApiErrorPayload | null => {
|
||||
if (!error || typeof error !== "object") return null;
|
||||
const candidate = error as {
|
||||
error?: ApiErrorPayload;
|
||||
data?: ApiErrorPayload;
|
||||
message?: string;
|
||||
};
|
||||
|
||||
if (candidate.error && typeof candidate.error === "object")
|
||||
return candidate.error;
|
||||
if (candidate.data && typeof candidate.data === "object")
|
||||
return candidate.data;
|
||||
if (candidate.message) return { message: candidate.message };
|
||||
|
||||
return null;
|
||||
};
|
||||
export const getApiErrorMessage = (error: unknown, fallback: string) => {
|
||||
const payload = getApiErrorPayload(error);
|
||||
return payload?.message || fallback;
|
||||
};
|
||||
|
||||
@@ -9,7 +9,7 @@ import { useTranslation } from 'i18next-vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import AdsVastDialog from './components/AdsVastDialog.vue';
|
||||
import AdsVastNotices from './components/AdsVastNotices.vue';
|
||||
import AdsVastTable from './components/AdsVastTable.tsx';
|
||||
import AdsVastTable from './components/AdsVastTable';
|
||||
import AdsVastToolbar from './components/AdsVastToolbar.vue';
|
||||
import type {
|
||||
AdTemplate,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { defineComponent, computed, type PropType } from 'vue';
|
||||
import { useTranslation } from 'i18next-vue';
|
||||
import { useAppToast } from '@/composables/useAppToast';
|
||||
import type { ColumnDef } from '@tanstack/vue-table';
|
||||
import { useTranslation } from 'i18next-vue';
|
||||
import { computed, defineComponent, type PropType } from 'vue';
|
||||
import type { AdTemplate } from '../types';
|
||||
|
||||
// Components
|
||||
|
||||
@@ -5,63 +5,31 @@ import AppDialog from '@/components/ui/AppDialog.vue';
|
||||
import AppInput from '@/components/ui/AppInput.vue';
|
||||
import { useAppToast } from '@/composables/useAppToast';
|
||||
import { useUsageQuery } from '@/composables/useUsageQuery';
|
||||
import { formatBytes } from '@/lib/utils';
|
||||
import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
|
||||
import BillingHistorySection from '@/routes/settings/Billing/components/BillingHistorySection.vue';
|
||||
import BillingPlansSection from '@/routes/settings/Billing/components/BillingPlansSection.vue';
|
||||
import { getApiErrorMessage, getApiErrorPayload } from '@/lib/utils';
|
||||
import BillingTopupDialog from '@/routes/settings/Billing/components/BillingTopupDialog.vue';
|
||||
import BillingUsageSection from '@/routes/settings/Billing/components/BillingUsageSection.vue';
|
||||
import BillingWalletRow from '@/routes/settings/Billing/components/BillingWalletRow.vue';
|
||||
import type { Plan as ModelPlan, PaymentHistoryItem as PaymentHistoryApiItem } from '@/server/gen/proto/app/v1/common';
|
||||
import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
|
||||
import type { Plan as ModelPlan } from '@/server/gen/proto/app/v1/common';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import { useQuery } from '@pinia/colada';
|
||||
import { useTranslation } from 'i18next-vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import SettingsRow from '../components/SettingsRow.vue';
|
||||
import PaymentHistory from './components/PaymentHistory';
|
||||
import PlanSelection from './components/PlanSelection';
|
||||
|
||||
const TERM_OPTIONS = [1, 3, 6, 12] as const;
|
||||
type UpgradePaymentMethod = 'wallet' | 'topup';
|
||||
|
||||
type InvoiceDownloadResponse = {
|
||||
filename?: string;
|
||||
contentType?: string;
|
||||
content?: string;
|
||||
};
|
||||
|
||||
type PaymentHistoryItem = {
|
||||
id: string;
|
||||
date: string;
|
||||
amount: number;
|
||||
plan: string;
|
||||
status: string;
|
||||
invoiceId: string;
|
||||
currency: string;
|
||||
kind: string;
|
||||
details?: string[];
|
||||
};
|
||||
|
||||
type ApiErrorPayload = {
|
||||
code?: number;
|
||||
message?: string;
|
||||
data?: Record<string, any>;
|
||||
};
|
||||
|
||||
const toast = useAppToast();
|
||||
const auth = useAuthStore();
|
||||
const { t, i18next } = useTranslation();
|
||||
|
||||
const { data: plansResponse, isLoading } = useQuery({
|
||||
key: () => ['billing-plans'],
|
||||
query: () => rpcClient.listPlans(),
|
||||
});
|
||||
const { data: usageSnapshot, refetch: refetchUsage } = useUsageQuery();
|
||||
const { refetch: refetchUsage } = useUsageQuery();
|
||||
|
||||
const topupDialogVisible = ref(false);
|
||||
const topupAmount = ref<number | null>(null);
|
||||
const topupLoading = ref(false);
|
||||
const historyLoading = ref(false);
|
||||
const downloadingInvoiceId = ref<string | null>(null);
|
||||
const topupPresets = [10, 20, 50, 100];
|
||||
const paymentHistory = ref<PaymentHistoryItem[]>([]);
|
||||
|
||||
const upgradeDialogVisible = ref(false);
|
||||
const selectedPlan = ref<ModelPlan | null>(null);
|
||||
@@ -71,40 +39,8 @@ const purchaseTopupAmount = ref<number | null>(null);
|
||||
const purchaseLoading = ref(false);
|
||||
const purchaseError = ref<string | null>(null);
|
||||
|
||||
const plans = computed(() => plansResponse.value?.plans || [] as ModelPlan[]);
|
||||
|
||||
const currentPlanId = computed(() => auth.user?.plan_id || undefined);
|
||||
const currentPlan = computed(() => plans.value.find(plan => plan.id === currentPlanId.value));
|
||||
const currentPlanName = computed(() => currentPlan.value?.name || t('settings.billing.unknownPlan'));
|
||||
const walletBalance = computed(() => auth.user?.wallet_balance || 0);
|
||||
const storageUsed = computed(() => usageSnapshot.value?.totalStorage ?? 0);
|
||||
const uploadsUsed = computed(() => usageSnapshot.value?.totalVideos ?? 0);
|
||||
const storageLimit = computed(() => {
|
||||
const activePlan = plans.value.find(plan => plan.id === currentPlanId.value);
|
||||
return activePlan?.storageLimit || 10737418240;
|
||||
});
|
||||
const uploadsLimit = computed(() => {
|
||||
const activePlan = plans.value.find(plan => plan.id === currentPlanId.value);
|
||||
return activePlan?.uploadLimit || 50;
|
||||
});
|
||||
const storagePercentage = computed(() =>
|
||||
Math.min(Math.round((storageUsed.value / storageLimit.value) * 100), 100),
|
||||
);
|
||||
const uploadsPercentage = computed(() =>
|
||||
Math.min(Math.round((uploadsUsed.value / uploadsLimit.value) * 100), 100),
|
||||
);
|
||||
|
||||
const localeTag = computed(() => i18next.resolvedLanguage === 'vi' ? 'vi-VN' : 'en-US');
|
||||
const currencyFormatter = computed(() => new Intl.NumberFormat(localeTag.value, {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
maximumFractionDigits: 2,
|
||||
}));
|
||||
const shortDateFormatter = computed(() => new Intl.DateTimeFormat(localeTag.value, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
}));
|
||||
|
||||
const selectedPlanId = computed(() => upgradeDialogVisible.value ? selectedPlan.value?.id || null : null);
|
||||
const selectedPlanPrice = computed(() => selectedPlan.value?.price || 0);
|
||||
@@ -125,195 +61,17 @@ const upgradeSubmitLabel = computed(() => {
|
||||
return t('settings.billing.upgradeDialog.payWithWallet');
|
||||
});
|
||||
|
||||
const formatMoney = (amount: number) => currencyFormatter.value.format(amount);
|
||||
|
||||
const formatDuration = (seconds?: number) => {
|
||||
if (!seconds) return t('settings.billing.durationMinutes', { minutes: 0 });
|
||||
if (seconds < 0) return t('settings.billing.durationMinutes', { minutes: -1 }).replace("-1", "∞")
|
||||
return t('settings.billing.durationMinutes', { minutes: Math.floor(seconds / 60) });
|
||||
};
|
||||
|
||||
const formatHistoryDate = (value?: string) => {
|
||||
if (!value) return '-';
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return '-';
|
||||
return shortDateFormatter.value.format(date);
|
||||
};
|
||||
|
||||
const formatTermLabel = (months: number) => t('settings.billing.termOption', { months });
|
||||
|
||||
const formatPaymentMethodLabel = (value?: string) => {
|
||||
switch ((value || '').toLowerCase()) {
|
||||
case 'topup':
|
||||
return t('settings.billing.paymentMethod.topup');
|
||||
case 'wallet':
|
||||
default:
|
||||
return t('settings.billing.paymentMethod.wallet');
|
||||
}
|
||||
};
|
||||
|
||||
const getPlanStorageText = (plan: ModelPlan) => t('settings.billing.planStorage', { storage: formatBytes(plan.storageLimit || 0) });
|
||||
const getPlanDurationText = (plan: ModelPlan) => t('settings.billing.planDuration', { duration: formatDuration(plan.durationLimit) });
|
||||
const getPlanUploadsText = (plan: ModelPlan) => t('settings.billing.planUploads', { count: plan.uploadLimit || 0 });
|
||||
|
||||
const getStatusStyles = (status: string) => {
|
||||
switch (status) {
|
||||
case 'success':
|
||||
return 'bg-success/10 text-success';
|
||||
case 'failed':
|
||||
return 'bg-danger/10 text-danger';
|
||||
case 'pending':
|
||||
return 'bg-warning/10 text-warning';
|
||||
default:
|
||||
return 'bg-info/10 text-info';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusLabel = (status: string) => {
|
||||
const map: Record<string, string> = {
|
||||
success: t('settings.billing.status.success'),
|
||||
failed: t('settings.billing.status.failed'),
|
||||
pending: t('settings.billing.status.pending'),
|
||||
};
|
||||
return map[status] || status;
|
||||
};
|
||||
|
||||
const normalizeHistoryStatus = (status?: string) => {
|
||||
switch ((status || '').toLowerCase()) {
|
||||
case 'success':
|
||||
case 'succeeded':
|
||||
case 'paid':
|
||||
return 'success';
|
||||
case 'failed':
|
||||
case 'error':
|
||||
case 'canceled':
|
||||
case 'cancelled':
|
||||
return 'failed';
|
||||
case 'pending':
|
||||
case 'processing':
|
||||
default:
|
||||
return 'pending';
|
||||
}
|
||||
};
|
||||
|
||||
const getApiErrorPayload = (error: unknown): ApiErrorPayload | null => {
|
||||
if (!error || typeof error !== 'object') return null;
|
||||
const candidate = error as { error?: ApiErrorPayload; data?: ApiErrorPayload; message?: string };
|
||||
|
||||
if (candidate.error && typeof candidate.error === 'object') return candidate.error;
|
||||
if (candidate.data && typeof candidate.data === 'object') return candidate.data;
|
||||
if (candidate.message) return { message: candidate.message };
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const getApiErrorMessage = (error: unknown, fallback: string) => {
|
||||
const payload = getApiErrorPayload(error);
|
||||
return payload?.message || fallback;
|
||||
};
|
||||
|
||||
const getApiErrorData = (error: unknown) => getApiErrorPayload(error)?.data || null;
|
||||
|
||||
const mapHistoryItem = (item: PaymentHistoryApiItem): PaymentHistoryItem => {
|
||||
const details: string[] = [];
|
||||
|
||||
if (item.kind !== 'wallet_topup' && item.termMonths) {
|
||||
details.push(formatTermLabel(item.termMonths));
|
||||
}
|
||||
if (item.kind !== 'wallet_topup' && item.paymentMethod) {
|
||||
details.push(formatPaymentMethodLabel(item.paymentMethod));
|
||||
}
|
||||
if (item.kind !== 'wallet_topup' && item.expiresAt) {
|
||||
details.push(t('settings.billing.history.validUntil', { date: formatHistoryDate(item.expiresAt) }));
|
||||
}
|
||||
|
||||
return {
|
||||
id: item.id || '',
|
||||
date: formatHistoryDate(item.createdAt),
|
||||
amount: item.amount || 0,
|
||||
plan: item.kind === 'wallet_topup'
|
||||
? t('settings.billing.walletTopup')
|
||||
: (item.planName || t('settings.billing.unknownPlan')),
|
||||
status: normalizeHistoryStatus(item.status),
|
||||
invoiceId: item.invoiceId || '-',
|
||||
currency: item.currency || 'USD',
|
||||
kind: item.kind || 'subscription',
|
||||
details,
|
||||
};
|
||||
};
|
||||
|
||||
const loadPaymentHistory = async () => {
|
||||
historyLoading.value = true;
|
||||
try {
|
||||
const response = await rpcClient.listPaymentHistory();
|
||||
paymentHistory.value = (response.payments || []).map(mapHistoryItem);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
paymentHistory.value = [];
|
||||
} finally {
|
||||
historyLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const refreshBillingState = async () => {
|
||||
await Promise.allSettled([
|
||||
auth.fetchMe(),
|
||||
loadPaymentHistory(),
|
||||
// loadPaymentHistory(),
|
||||
refetchUsage(),
|
||||
]);
|
||||
};
|
||||
|
||||
void loadPaymentHistory();
|
||||
|
||||
const subscriptionSummary = computed(() => {
|
||||
const expiresAt = auth.user?.planExpiresAt || auth.user?.plan_expires_at;
|
||||
const formattedDate = formatHistoryDate(expiresAt);
|
||||
|
||||
if (auth.user?.plan_id) {
|
||||
if (auth.user?.plan_expiring_soon && expiresAt) {
|
||||
return {
|
||||
title: t('settings.billing.subscription.expiringTitle'),
|
||||
description: t('settings.billing.subscription.expiringDescription', {
|
||||
plan: currentPlanName.value,
|
||||
date: formattedDate,
|
||||
}),
|
||||
tone: 'warning' as const,
|
||||
};
|
||||
}
|
||||
|
||||
if (expiresAt) {
|
||||
return {
|
||||
title: t('settings.billing.subscription.activeTitle'),
|
||||
description: t('settings.billing.subscription.activeDescription', {
|
||||
plan: currentPlanName.value,
|
||||
date: formattedDate,
|
||||
}),
|
||||
tone: 'default' as const,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: t('settings.billing.subscription.activeTitle'),
|
||||
description: currentPlanName.value,
|
||||
tone: 'default' as const,
|
||||
};
|
||||
}
|
||||
|
||||
if (expiresAt) {
|
||||
return {
|
||||
title: t('settings.billing.subscription.expiredTitle'),
|
||||
description: t('settings.billing.subscription.expiredDescription', { date: formattedDate }),
|
||||
tone: 'warning' as const,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: t('settings.billing.subscription.freeTitle'),
|
||||
description: t('settings.billing.subscription.freeDescription'),
|
||||
tone: 'default' as const,
|
||||
};
|
||||
});
|
||||
// void loadPaymentHistory();
|
||||
|
||||
const resetUpgradeState = () => {
|
||||
selectedPlan.value = null;
|
||||
@@ -410,7 +168,8 @@ const submitUpgrade = async () => {
|
||||
summary: t('settings.billing.toast.subscriptionSuccessSummary'),
|
||||
detail: t('settings.billing.toast.subscriptionSuccessDetail', {
|
||||
plan: selectedPlan.value.name || '',
|
||||
term: formatTermLabel(selectedTermMonths.value),
|
||||
term: t('settings.billing.termOption', { months: selectedTermMonths.value })
|
||||
// term: formatTermLabel(selectedTermMonths.value),
|
||||
}),
|
||||
life: 3000,
|
||||
});
|
||||
@@ -446,7 +205,7 @@ const handleTopup = async (amount: number) => {
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: t('settings.billing.toast.topupSuccessSummary'),
|
||||
detail: t('settings.billing.toast.topupSuccessDetail', { amount: formatMoney(amount) }),
|
||||
detail: t('settings.billing.toast.topupSuccessDetail', { amount: auth.formatMoney(amount) }),
|
||||
life: 3000,
|
||||
});
|
||||
topupDialogVisible.value = false;
|
||||
@@ -464,51 +223,6 @@ const handleTopup = async (amount: number) => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadInvoice = async (item: PaymentHistoryItem) => {
|
||||
if (!item.id) return;
|
||||
|
||||
downloadingInvoiceId.value = item.id;
|
||||
toast.add({
|
||||
severity: 'info',
|
||||
summary: t('settings.billing.toast.downloadingSummary'),
|
||||
detail: t('settings.billing.toast.downloadingDetail', { invoiceId: item.invoiceId }),
|
||||
life: 2000,
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await rpcClient.downloadInvoice({ id: item.id }) as InvoiceDownloadResponse;
|
||||
const content = response.content || '';
|
||||
const contentType = response.contentType || 'text/plain;charset=utf-8';
|
||||
const filename = response.filename || `${item.invoiceId}.txt`;
|
||||
const blob = new Blob([content], { type: contentType });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const anchor = document.createElement('a');
|
||||
anchor.href = url;
|
||||
anchor.download = filename;
|
||||
document.body.appendChild(anchor);
|
||||
anchor.click();
|
||||
document.body.removeChild(anchor);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: t('settings.billing.toast.downloadedSummary'),
|
||||
detail: t('settings.billing.toast.downloadedDetail', { invoiceId: item.invoiceId }),
|
||||
life: 3000,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
summary: t('settings.billing.toast.downloadFailedSummary'),
|
||||
detail: getApiErrorMessage(error, t('settings.billing.toast.downloadFailedDetail')),
|
||||
life: 5000,
|
||||
});
|
||||
} finally {
|
||||
downloadingInvoiceId.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const openTopupDialog = () => {
|
||||
topupAmount.value = null;
|
||||
topupDialogVisible.value = true;
|
||||
@@ -520,206 +234,168 @@ const selectPreset = (amount: number) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SettingsSectionCard
|
||||
:title="t('settings.content.billing.title')"
|
||||
:description="t('settings.content.billing.subtitle')"
|
||||
>
|
||||
<BillingWalletRow
|
||||
:title="t('settings.billing.walletBalance')"
|
||||
:description="t('settings.billing.currentBalance', { balance: formatMoney(walletBalance) })"
|
||||
:button-label="t('settings.billing.topUp')"
|
||||
:subscription-title="subscriptionSummary.title"
|
||||
:subscription-description="subscriptionSummary.description"
|
||||
:subscription-tone="subscriptionSummary.tone"
|
||||
@topup="openTopupDialog"
|
||||
/>
|
||||
<SettingsSectionCard :title="$t('settings.content.billing.title')"
|
||||
:description="$t('settings.content.billing.subtitle')">
|
||||
<SettingsRow :title="$t('settings.billing.walletBalance')"
|
||||
:description="$t('settings.billing.currentBalance', { balance: auth.formatMoney(walletBalance) })"
|
||||
iconBoxClass="bg-primary/10">
|
||||
<template #icon>
|
||||
<CoinsIcon class="w-5 h-5 text-primary" />
|
||||
</template>
|
||||
|
||||
<BillingPlansSection
|
||||
:title="t('settings.billing.availablePlans')"
|
||||
:description="t('settings.billing.availablePlansHint')"
|
||||
:is-loading="isLoading"
|
||||
:plans="plans"
|
||||
:current-plan-id="currentPlanId"
|
||||
:selecting-plan-id="selectedPlanId"
|
||||
:format-money="formatMoney"
|
||||
:get-plan-storage-text="getPlanStorageText"
|
||||
:get-plan-duration-text="getPlanDurationText"
|
||||
:get-plan-uploads-text="getPlanUploadsText"
|
||||
:current-plan-label="t('settings.billing.currentPlan')"
|
||||
:selecting-label="t('settings.billing.upgradeDialog.selecting')"
|
||||
:choose-label="t('settings.billing.upgradeDialog.choosePlan')"
|
||||
@select="openUpgradeDialog"
|
||||
/>
|
||||
<template #actions>
|
||||
<div class="flex flex-col items-end gap-2">
|
||||
<AppButton size="sm" @click="openTopupDialog">
|
||||
<template #icon>
|
||||
<PlusIcon class="w-4 h-4" />
|
||||
</template>
|
||||
{{ $t('settings.billing.topUp') }}
|
||||
</AppButton>
|
||||
</div>
|
||||
</template>
|
||||
</SettingsRow>
|
||||
|
||||
<BillingUsageSection
|
||||
:storage-title="t('settings.billing.storage')"
|
||||
:storage-description="t('settings.billing.storageUsedOfLimit', { used: formatBytes(storageUsed), limit: formatBytes(storageLimit) })"
|
||||
:storage-percentage="storagePercentage"
|
||||
:uploads-title="t('settings.billing.totalVideos')"
|
||||
:uploads-description="t('settings.billing.totalVideosUsedOfLimit', { used: uploadsUsed, limit: uploadsLimit })"
|
||||
:uploads-percentage="uploadsPercentage"
|
||||
/>
|
||||
|
||||
<BillingHistorySection
|
||||
:title="t('settings.billing.paymentHistory')"
|
||||
:description="t('settings.billing.paymentHistorySubtitle')"
|
||||
:items="paymentHistory"
|
||||
:loading="historyLoading"
|
||||
:downloading-id="downloadingInvoiceId"
|
||||
:format-money="formatMoney"
|
||||
:get-status-styles="getStatusStyles"
|
||||
:get-status-label="getStatusLabel"
|
||||
:date-label="t('settings.billing.table.date')"
|
||||
:amount-label="t('settings.billing.table.amount')"
|
||||
:plan-label="t('settings.billing.table.plan')"
|
||||
:status-label="t('settings.billing.table.status')"
|
||||
:invoice-label="t('settings.billing.table.invoice')"
|
||||
:empty-label="t('settings.billing.noPaymentHistory')"
|
||||
:download-label="t('settings.billing.download')"
|
||||
@download="handleDownloadInvoice"
|
||||
/>
|
||||
<PlanSelection :current-plan-id="currentPlanId" :selectedPlanId="String(selectedPlanId)"
|
||||
@upgrade="openUpgradeDialog" />
|
||||
<BillingUsageSection />
|
||||
<PaymentHistory />
|
||||
</SettingsSectionCard>
|
||||
|
||||
<AppDialog
|
||||
:visible="upgradeDialogVisible"
|
||||
:title="t('settings.billing.upgradeDialog.title')"
|
||||
maxWidthClass="max-w-2xl"
|
||||
@update:visible="onUpgradeDialogVisibilityChange"
|
||||
@close="closeUpgradeDialog"
|
||||
>
|
||||
<AppDialog :visible="upgradeDialogVisible" :title="$t('settings.billing.upgradeDialog.title')"
|
||||
maxWidthClass="max-w-2xl" @update:visible="onUpgradeDialogVisibilityChange" @close="closeUpgradeDialog">
|
||||
<div v-if="selectedPlan" class="space-y-5">
|
||||
<div class="rounded-lg border border-border bg-muted/20 p-4">
|
||||
<div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
|
||||
<div>
|
||||
<p class="text-xs font-medium uppercase tracking-[0.18em] text-foreground/50">
|
||||
{{ t('settings.billing.upgradeDialog.selectedPlan') }}
|
||||
{{ $t('settings.billing.upgradeDialog.selectedPlan') }}
|
||||
</p>
|
||||
<h3 class="mt-1 text-lg font-semibold text-foreground">{{ selectedPlan.name }}</h3>
|
||||
<p class="mt-1 text-sm text-foreground/70">
|
||||
{{ selectedPlan.description || t('settings.billing.availablePlansHint') }}
|
||||
{{ selectedPlan.description || $t('settings.billing.availablePlansHint') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="text-left md:text-right">
|
||||
<p class="text-xs text-foreground/50">{{ t('settings.billing.upgradeDialog.basePrice') }}</p>
|
||||
<p class="mt-1 text-2xl font-semibold text-foreground">{{ formatMoney(selectedPlan.price || 0) }}</p>
|
||||
<p class="text-xs text-foreground/60">{{ t('settings.billing.upgradeDialog.perMonthBase') }}</p>
|
||||
<p class="text-xs text-foreground/50">{{ $t('settings.billing.upgradeDialog.basePrice') }}</p>
|
||||
<p class="mt-1 text-2xl font-semibold text-foreground">{{ auth.formatMoney(selectedPlan.price ||
|
||||
0)
|
||||
}}</p>
|
||||
<p class="text-xs text-foreground/60">{{ $t('settings.billing.upgradeDialog.perMonthBase') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-foreground">{{ t('settings.billing.upgradeDialog.termTitle') }}</p>
|
||||
<p class="mt-1 text-xs text-foreground/60">{{ t('settings.billing.upgradeDialog.termHint') }}</p>
|
||||
<p class="text-sm font-medium text-foreground">{{ $t('settings.billing.upgradeDialog.termTitle') }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-foreground/60">{{ $t('settings.billing.upgradeDialog.termHint') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3 md:grid-cols-4">
|
||||
<button
|
||||
v-for="months in TERM_OPTIONS"
|
||||
:key="months"
|
||||
type="button"
|
||||
:class="[
|
||||
'rounded-lg border px-4 py-3 text-left transition-all',
|
||||
selectedTermMonths === months
|
||||
? 'border-primary bg-primary/5 text-primary'
|
||||
: 'border-border bg-header text-foreground hover:border-primary/30 hover:bg-muted/30',
|
||||
]"
|
||||
@click="selectedTermMonths = months"
|
||||
>
|
||||
<p class="text-sm font-medium">{{ formatTermLabel(months) }}</p>
|
||||
<p class="mt-1 text-xs text-foreground/60">{{ formatMoney((selectedPlan.price || 0) * months) }}</p>
|
||||
<button v-for="months in TERM_OPTIONS" :key="months" type="button" :class="[
|
||||
'rounded-lg border px-4 py-3 text-left transition-all',
|
||||
selectedTermMonths === months
|
||||
? 'border-primary bg-primary/5 text-primary'
|
||||
: 'border-border bg-header text-foreground hover:border-primary/30 hover:bg-muted/30',
|
||||
]" @click="selectedTermMonths = months">
|
||||
<p class="text-sm font-medium">{{ $t('settings.billing.termOption', { months }) }}</p>
|
||||
<p class="mt-1 text-xs text-foreground/60">{{ auth.formatMoney((selectedPlan.price || 0) *
|
||||
months)
|
||||
}}</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-3 md:grid-cols-3">
|
||||
<div class="rounded-lg border border-border bg-header p-4">
|
||||
<p class="text-xs uppercase tracking-wide text-foreground/50">{{ t('settings.billing.upgradeDialog.totalLabel') }}</p>
|
||||
<p class="mt-2 text-xl font-semibold text-foreground">{{ formatMoney(selectedTotalAmount) }}</p>
|
||||
<p class="text-xs uppercase tracking-wide text-foreground/50">{{
|
||||
$t('settings.billing.upgradeDialog.totalLabel') }}</p>
|
||||
<p class="mt-2 text-xl font-semibold text-foreground">{{ auth.formatMoney(selectedTotalAmount) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-border bg-header p-4">
|
||||
<p class="text-xs uppercase tracking-wide text-foreground/50">{{ t('settings.billing.upgradeDialog.walletBalanceLabel') }}</p>
|
||||
<p class="mt-2 text-xl font-semibold text-foreground">{{ formatMoney(walletBalance) }}</p>
|
||||
<p class="text-xs uppercase tracking-wide text-foreground/50">{{
|
||||
$t('settings.billing.upgradeDialog.walletBalanceLabel') }}</p>
|
||||
<p class="mt-2 text-xl font-semibold text-foreground">{{ auth.formatMoney(walletBalance) }}</p>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg border p-4"
|
||||
:class="selectedNeedsTopup
|
||||
? 'border-warning/30 bg-warning/10'
|
||||
: 'border-success/20 bg-success/5'"
|
||||
>
|
||||
<p class="text-xs uppercase tracking-wide text-foreground/50">{{ t('settings.billing.upgradeDialog.shortfallLabel') }}</p>
|
||||
<div class="rounded-lg border p-4" :class="selectedNeedsTopup
|
||||
? 'border-warning/30 bg-warning/10'
|
||||
: 'border-success/20 bg-success/5'">
|
||||
<p class="text-xs uppercase tracking-wide text-foreground/50">{{
|
||||
$t('settings.billing.upgradeDialog.shortfallLabel') }}</p>
|
||||
<p class="mt-2 text-xl font-semibold" :class="selectedNeedsTopup ? 'text-warning' : 'text-success'">
|
||||
{{ formatMoney(selectedShortfall) }}
|
||||
{{ auth.formatMoney(selectedShortfall) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedNeedsTopup" class="space-y-3">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-foreground">{{ t('settings.billing.upgradeDialog.paymentMethodTitle') }}</p>
|
||||
<p class="mt-1 text-xs text-foreground/60">{{ t('settings.billing.upgradeDialog.paymentMethodHint') }}</p>
|
||||
<p class="text-sm font-medium text-foreground">{{
|
||||
$t('settings.billing.upgradeDialog.paymentMethodTitle') }}</p>
|
||||
<p class="mt-1 text-xs text-foreground/60">{{ $t('settings.billing.upgradeDialog.paymentMethodHint')
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-3 md:grid-cols-2">
|
||||
<button
|
||||
type="button"
|
||||
:class="[
|
||||
'rounded-lg border p-4 text-left transition-all',
|
||||
selectedPaymentMethod === 'wallet'
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border bg-header hover:border-primary/30 hover:bg-muted/30',
|
||||
]"
|
||||
@click="selectUpgradePaymentMethod('wallet')"
|
||||
>
|
||||
<p class="text-sm font-medium text-foreground">{{ t('settings.billing.paymentMethod.wallet') }}</p>
|
||||
<button type="button" :class="[
|
||||
'rounded-lg border p-4 text-left transition-all',
|
||||
selectedPaymentMethod === 'wallet'
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border bg-header hover:border-primary/30 hover:bg-muted/30',
|
||||
]" @click="selectUpgradePaymentMethod('wallet')">
|
||||
<p class="text-sm font-medium text-foreground">{{ $t('settings.billing.paymentMethod.wallet') }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-foreground/60">
|
||||
{{ t('settings.billing.upgradeDialog.walletOptionDescription') }}
|
||||
{{ $t('settings.billing.upgradeDialog.walletOptionDescription') }}
|
||||
</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
:class="[
|
||||
'rounded-lg border p-4 text-left transition-all',
|
||||
selectedPaymentMethod === 'topup'
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border bg-header hover:border-primary/30 hover:bg-muted/30',
|
||||
]"
|
||||
@click="selectUpgradePaymentMethod('topup')"
|
||||
>
|
||||
<p class="text-sm font-medium text-foreground">{{ t('settings.billing.paymentMethod.topup') }}</p>
|
||||
<button type="button" :class="[
|
||||
'rounded-lg border p-4 text-left transition-all',
|
||||
selectedPaymentMethod === 'topup'
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border bg-header hover:border-primary/30 hover:bg-muted/30',
|
||||
]" @click="selectUpgradePaymentMethod('topup')">
|
||||
<p class="text-sm font-medium text-foreground">{{ $t('settings.billing.paymentMethod.topup') }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-foreground/60">
|
||||
{{ t('settings.billing.upgradeDialog.topupOptionDescription', { shortfall: formatMoney(selectedShortfall) }) }}
|
||||
{{ $t('settings.billing.upgradeDialog.topupOptionDescription', {
|
||||
shortfall:
|
||||
auth.formatMoney(selectedShortfall) }) }}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="rounded-lg border border-success/20 bg-success/5 p-4 text-sm text-success">
|
||||
{{ t('settings.billing.upgradeDialog.walletCoveredHint') }}
|
||||
{{ $t('settings.billing.upgradeDialog.walletCoveredHint') }}
|
||||
</div>
|
||||
|
||||
<div v-if="selectedNeedsTopup && selectedPaymentMethod === 'topup'" class="grid gap-2">
|
||||
<label class="text-sm font-medium text-foreground">{{ t('settings.billing.upgradeDialog.topupAmountLabel') }}</label>
|
||||
<AppInput
|
||||
:model-value="purchaseTopupAmount"
|
||||
type="number"
|
||||
min="0.01"
|
||||
step="0.01"
|
||||
:placeholder="t('settings.billing.upgradeDialog.topupAmountPlaceholder')"
|
||||
@update:model-value="updatePurchaseTopupAmount"
|
||||
/>
|
||||
<label class="text-sm font-medium text-foreground">{{
|
||||
$t('settings.billing.upgradeDialog.topupAmountLabel')
|
||||
}}</label>
|
||||
<AppInput :model-value="purchaseTopupAmount" type="number" min="0.01" step="0.01"
|
||||
:placeholder="$t('settings.billing.upgradeDialog.topupAmountPlaceholder')"
|
||||
@update:model-value="updatePurchaseTopupAmount" />
|
||||
<p class="text-xs text-foreground/60">
|
||||
{{ t('settings.billing.upgradeDialog.topupAmountHint', { shortfall: formatMoney(selectedShortfall) }) }}
|
||||
{{ $t('settings.billing.upgradeDialog.topupAmountHint', {
|
||||
shortfall:
|
||||
auth.formatMoney(selectedShortfall)
|
||||
}) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="selectedNeedsTopup && selectedPaymentMethod === 'wallet'"
|
||||
class="rounded-lg border border-warning/30 bg-warning/10 p-4 text-sm text-warning"
|
||||
>
|
||||
{{ t('settings.billing.upgradeDialog.walletInsufficientHint', { shortfall: formatMoney(selectedShortfall) }) }}
|
||||
<div v-if="selectedNeedsTopup && selectedPaymentMethod === 'wallet'"
|
||||
class="rounded-lg border border-warning/30 bg-warning/10 p-4 text-sm text-warning">
|
||||
{{ $t('settings.billing.upgradeDialog.walletInsufficientHint', {
|
||||
shortfall:
|
||||
auth.formatMoney(selectedShortfall) }) }}
|
||||
</div>
|
||||
|
||||
<div v-if="purchaseError" class="rounded-lg border border-danger bg-danger/10 p-4 text-sm text-danger">
|
||||
@@ -730,23 +406,14 @@ const selectPreset = (amount: number) => {
|
||||
<template #footer>
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p class="text-xs text-foreground/60">
|
||||
{{ t('settings.billing.upgradeDialog.footerHint') }}
|
||||
{{ $t('settings.billing.upgradeDialog.footerHint') }}
|
||||
</p>
|
||||
<div class="flex justify-end gap-3">
|
||||
<AppButton
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
:disabled="purchaseLoading"
|
||||
@click="closeUpgradeDialog"
|
||||
>
|
||||
{{ t('common.cancel') }}
|
||||
<AppButton variant="secondary" size="sm" :disabled="purchaseLoading" @click="closeUpgradeDialog">
|
||||
{{ $t('common.cancel') }}
|
||||
</AppButton>
|
||||
<AppButton
|
||||
size="sm"
|
||||
:loading="purchaseLoading"
|
||||
:disabled="!canSubmitUpgrade"
|
||||
@click="submitUpgrade"
|
||||
>
|
||||
<AppButton size="sm" :loading="purchaseLoading" :disabled="!canSubmitUpgrade"
|
||||
@click="submitUpgrade">
|
||||
{{ upgradeSubmitLabel }}
|
||||
</AppButton>
|
||||
</div>
|
||||
@@ -754,22 +421,11 @@ const selectPreset = (amount: number) => {
|
||||
</template>
|
||||
</AppDialog>
|
||||
|
||||
<BillingTopupDialog
|
||||
:visible="topupDialogVisible"
|
||||
:title="t('settings.billing.topupDialog.title')"
|
||||
:subtitle="t('settings.billing.topupDialog.subtitle')"
|
||||
:presets="topupPresets"
|
||||
:amount="topupAmount"
|
||||
:loading="topupLoading"
|
||||
:custom-amount-label="t('settings.billing.topupDialog.customAmount')"
|
||||
<BillingTopupDialog :visible="topupDialogVisible" :title="$t('settings.billing.topupDialog.title')"
|
||||
:subtitle="t('settings.billing.topupDialog.subtitle')" :presets="topupPresets" :amount="topupAmount"
|
||||
:loading="topupLoading" :custom-amount-label="t('settings.billing.topupDialog.customAmount')"
|
||||
:amount-placeholder="t('settings.billing.topupDialog.enterAmount')"
|
||||
:hint="t('settings.billing.topupDialog.hint')"
|
||||
:cancel-label="t('common.cancel')"
|
||||
:proceed-label="t('settings.billing.topupDialog.proceed')"
|
||||
:format-money="formatMoney"
|
||||
@update:visible="topupDialogVisible = $event"
|
||||
@update:amount="topupAmount = $event"
|
||||
@selectPreset="selectPreset"
|
||||
@submit="handleTopup(topupAmount || 0)"
|
||||
/>
|
||||
:hint="t('settings.billing.topupDialog.hint')" :cancel-label="t('common.cancel')"
|
||||
:proceed-label="t('settings.billing.topupDialog.proceed')" @update:visible="topupDialogVisible = $event"
|
||||
@update:amount="topupAmount = $event" @selectPreset="selectPreset" @submit="handleTopup(topupAmount || 0)" />
|
||||
</template>
|
||||
|
||||
@@ -1,114 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import DownloadIcon from '@/components/icons/DownloadIcon.vue';
|
||||
|
||||
type PaymentHistoryItem = {
|
||||
id: string;
|
||||
date: string;
|
||||
amount: number;
|
||||
plan: string;
|
||||
status: string;
|
||||
invoiceId: string;
|
||||
currency: string;
|
||||
kind: string;
|
||||
details?: string[];
|
||||
};
|
||||
|
||||
defineProps<{
|
||||
title: string;
|
||||
description: string;
|
||||
items: PaymentHistoryItem[];
|
||||
loading?: boolean;
|
||||
downloadingId?: string | null;
|
||||
formatMoney: (amount: number) => string;
|
||||
getStatusStyles: (status: string) => string;
|
||||
getStatusLabel: (status: string) => string;
|
||||
dateLabel: string;
|
||||
amountLabel: string;
|
||||
planLabel: string;
|
||||
statusLabel: string;
|
||||
invoiceLabel: string;
|
||||
emptyLabel: string;
|
||||
downloadLabel: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'download', item: PaymentHistoryItem): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="px-6 py-4">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-10 h-10 rounded-md bg-info/10 flex items-center justify-center shrink-0">
|
||||
<DownloadIcon class="w-5 h-5 text-info" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-foreground">{{ title }}</p>
|
||||
<p class="text-xs text-foreground/60 mt-0.5">{{ description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border border-border rounded-lg overflow-hidden">
|
||||
<div class="grid grid-cols-12 gap-4 px-4 py-3 text-xs font-medium text-foreground/60 uppercase tracking-wider bg-muted/30">
|
||||
<div class="col-span-3">{{ dateLabel }}</div>
|
||||
<div class="col-span-2">{{ amountLabel }}</div>
|
||||
<div class="col-span-3">{{ planLabel }}</div>
|
||||
<div class="col-span-2">{{ statusLabel }}</div>
|
||||
<div class="col-span-2 text-right">{{ invoiceLabel }}</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="px-4 py-6 space-y-3">
|
||||
<div v-for="index in 3" :key="index" class="grid grid-cols-12 gap-4 items-center animate-pulse">
|
||||
<div class="col-span-3 h-4 rounded bg-muted/50" />
|
||||
<div class="col-span-2 h-4 rounded bg-muted/50" />
|
||||
<div class="col-span-3 h-4 rounded bg-muted/50" />
|
||||
<div class="col-span-2 h-6 rounded bg-muted/50" />
|
||||
<div class="col-span-2 h-8 rounded bg-muted/50" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="items.length === 0" class="text-center py-12 text-foreground/60">
|
||||
<div class="w-16 h-16 rounded-full bg-muted/50 flex items-center justify-center mx-auto mb-4">
|
||||
<DownloadIcon class="w-8 h-8 text-foreground/40" />
|
||||
</div>
|
||||
<p>{{ emptyLabel }}</p>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
class="grid grid-cols-12 gap-4 px-4 py-3 items-center hover:bg-muted/30 transition-all border-t border-border"
|
||||
>
|
||||
<div class="col-span-3">
|
||||
<p class="text-sm font-medium text-foreground">{{ item.date }}</p>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<p class="text-sm text-foreground">{{ formatMoney(item.amount) }}</p>
|
||||
</div>
|
||||
<div class="col-span-3">
|
||||
<p class="text-sm text-foreground">{{ item.plan }}</p>
|
||||
<p v-if="item.details?.length" class="mt-1 text-xs text-foreground/60">
|
||||
{{ item.details.join(' · ') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<span :class="`inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium ${getStatusStyles(item.status)}`">
|
||||
{{ getStatusLabel(item.status) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-span-2 flex justify-end">
|
||||
<button
|
||||
class="flex items-center gap-2 px-3 py-1.5 text-sm text-foreground/70 hover:text-foreground hover:bg-muted/50 rounded-md transition-all disabled:opacity-60 disabled:cursor-wait"
|
||||
:disabled="downloadingId === item.id"
|
||||
@click="emit('download', item)"
|
||||
>
|
||||
<DownloadIcon class="w-4 h-4" />
|
||||
<span>{{ downloadingId === item.id ? '...' : downloadLabel }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,98 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import CheckIcon from '@/components/icons/CheckIcon.vue';
|
||||
import CreditCardIcon from '@/components/icons/CreditCardIcon.vue';
|
||||
import type { Plan as ModelPlan } from '@/server/gen/proto/app/v1/common';
|
||||
|
||||
defineProps<{
|
||||
title: string;
|
||||
description: string;
|
||||
isLoading: boolean;
|
||||
plans: ModelPlan[];
|
||||
currentPlanId?: string;
|
||||
selectingPlanId?: string | null;
|
||||
formatMoney: (amount: number) => string;
|
||||
getPlanStorageText: (plan: ModelPlan) => string;
|
||||
getPlanDurationText: (plan: ModelPlan) => string;
|
||||
getPlanUploadsText: (plan: ModelPlan) => string;
|
||||
currentPlanLabel: string;
|
||||
selectingLabel: string;
|
||||
chooseLabel: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'select', plan: ModelPlan): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="px-6 py-4">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-10 h-10 rounded-md bg-primary/10 flex items-center justify-center shrink-0">
|
||||
<CreditCardIcon class="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-foreground">{{ title }}</p>
|
||||
<p class="text-xs text-foreground/60 mt-0.5">{{ description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isLoading" class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div v-for="i in 3" :key="i">
|
||||
<div class="h-[200px] rounded-lg bg-muted/50 animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div
|
||||
v-for="plan in plans.sort((a,b) => (a.price || 0) - (b.price || 0))"
|
||||
:key="plan.id"
|
||||
:class="[
|
||||
'border rounded-lg p-4 hover:bg-muted/30 transition-all flex flex-col',
|
||||
plan.id === currentPlanId ? 'border-primary/40 bg-primary/5' : 'border-border',
|
||||
]"
|
||||
>
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<h3 class="text-lg font-semibold text-foreground">{{ plan.name }}</h3>
|
||||
<span
|
||||
v-if="plan.id === currentPlanId"
|
||||
class="inline-flex items-center rounded-full bg-primary/10 px-2 py-1 text-[11px] font-medium text-primary"
|
||||
>
|
||||
{{ currentPlanLabel }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-foreground/60 mt-1 min-h-[2.5rem]">{{ plan.description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<span class="text-2xl font-bold text-foreground">{{ formatMoney(plan.price || 0) }}</span>
|
||||
<span class="text-foreground/60 text-sm"> / {{ $t('settings.billing.cycle.'+plan.cycle) }}</span>
|
||||
</div>
|
||||
<ul class="space-y-2 mb-4 text-sm">
|
||||
<li
|
||||
v-for="feature in plan.features || []"
|
||||
:key="feature"
|
||||
class="flex items-center gap-2 text-foreground/70"
|
||||
>
|
||||
<CheckIcon class="w-4 h-4 text-success shrink-0" />
|
||||
{{ feature }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button
|
||||
v-if="plan.id !== currentPlanId"
|
||||
:disabled="selectingPlanId === plan.id"
|
||||
:class="[
|
||||
'w-full py-2 px-4 rounded-md text-sm font-medium transition-all mt-a',
|
||||
selectingPlanId === plan.id
|
||||
? 'bg-muted/50 text-foreground/60 cursor-wait'
|
||||
: 'bg-primary text-white hover:bg-primary/90'
|
||||
]"
|
||||
@click="emit('select', plan)"
|
||||
>
|
||||
{{ selectingPlanId === plan.id ? selectingLabel : chooseLabel }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,53 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
import ActivityIcon from '@/components/icons/ActivityIcon.vue';
|
||||
import UploadIcon from '@/components/icons/UploadIcon.vue';
|
||||
import Video from '@/components/icons/Video.vue';
|
||||
import { useUsageQuery } from '@/composables/useUsageQuery';
|
||||
import { formatBytes } from '@/lib/utils';
|
||||
|
||||
defineProps<{
|
||||
storageTitle: string;
|
||||
storageDescription: string;
|
||||
storagePercentage: number;
|
||||
uploadsTitle: string;
|
||||
uploadsDescription: string;
|
||||
uploadsPercentage: number;
|
||||
}>();
|
||||
defineProps<{}>();
|
||||
const { data: usageSnapshot } = useUsageQuery();
|
||||
const dataList = computed(() => [
|
||||
{
|
||||
id: 'storage',
|
||||
title: 'settings.billing.storage',
|
||||
description: { key: 'settings.billing.storageUsedOfLimit', params: { used: formatBytes(usageSnapshot.value?.totalStorage ?? 0) } },
|
||||
icon: ActivityIcon,
|
||||
},
|
||||
{
|
||||
id: 'videos',
|
||||
title: 'settings.billing.totalVideos',
|
||||
description: { key: 'settings.billing.totalVideosUsedOfLimit', params: { used: usageSnapshot.value?.totalVideos ?? 0 } },
|
||||
icon: Video,
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="px-6 py-4 hover:bg-muted/30 transition-all">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="px-6 py-4 hover:bg-muted/30 transition-all grid grid-cols-1 md:grid-cols-2 gap-6 rounded-md">
|
||||
<div v-for="item in dataList" :key="item.id" class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-md bg-accent/10 flex items-center justify-center shrink-0">
|
||||
<ActivityIcon class="w-5 h-5 text-accent" />
|
||||
<component :is="item.icon" class="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-foreground">{{ storageTitle }}</p>
|
||||
<p class="text-xs text-foreground/60 mt-0.5">{{ storageDescription }}</p>
|
||||
<div class="hover:underline">
|
||||
<p class="text-sm font-medium text-foreground">{{ $t(item.title) }}</p>
|
||||
<p class="text-xs text-foreground/60 mt-0.5">{{ $t(item.description.key, item.description.params) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full bg-muted/50 rounded-full overflow-hidden" style="height: 6px">
|
||||
<div
|
||||
class="bg-primary h-full rounded-full transition-all duration-300"
|
||||
:style="{ width: `${storagePercentage}%` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-4 hover:bg-muted/30 transition-all border-t border-border">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="w-10 h-10 rounded-md bg-info/10 flex items-center justify-center shrink-0">
|
||||
<UploadIcon class="w-5 h-5 text-info" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-foreground">{{ uploadsTitle }}</p>
|
||||
<p class="text-xs text-foreground/60 mt-0.5">{{ uploadsDescription }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full bg-muted/50 rounded-full overflow-hidden" style="height: 6px">
|
||||
<div
|
||||
class="bg-info h-full rounded-full transition-all duration-300"
|
||||
:style="{ width: `${uploadsPercentage}%` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import AppButton from '@/components/ui/AppButton.vue';
|
||||
import CoinsIcon from '@/components/icons/CoinsIcon.vue';
|
||||
import PlusIcon from '@/components/icons/PlusIcon.vue';
|
||||
import SettingsRow from '@/routes/settings/components/SettingsRow.vue';
|
||||
|
||||
defineProps<{
|
||||
title: string;
|
||||
description: string;
|
||||
buttonLabel: string;
|
||||
subscriptionTitle?: string;
|
||||
subscriptionDescription?: string;
|
||||
subscriptionTone?: 'default' | 'warning';
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'topup'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SettingsRow :title="title" :description="description" iconBoxClass="bg-primary/10">
|
||||
<template #icon>
|
||||
<CoinsIcon class="w-5 h-5 text-primary" />
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<div class="flex flex-col items-end gap-2">
|
||||
<!-- <div
|
||||
v-if="subscriptionTitle || subscriptionDescription"
|
||||
class="rounded-md border px-3 py-2 text-right"
|
||||
:class="subscriptionTone === 'warning'
|
||||
? 'border-warning/30 bg-warning/10 text-warning'
|
||||
: 'border-border bg-muted/30 text-foreground/70'"
|
||||
>
|
||||
<p v-if="subscriptionTitle" class="text-xs font-medium">{{ subscriptionTitle }}</p>
|
||||
<p v-if="subscriptionDescription" class="mt-0.5 text-xs">{{ subscriptionDescription }}</p>
|
||||
</div> -->
|
||||
|
||||
<AppButton size="sm" @click="emit('topup')">
|
||||
<template #icon>
|
||||
<PlusIcon class="w-4 h-4" />
|
||||
</template>
|
||||
{{ buttonLabel }}
|
||||
</AppButton>
|
||||
</div>
|
||||
</template>
|
||||
</SettingsRow>
|
||||
</template>
|
||||
200
src/routes/settings/Billing/components/PaymentHistory.tsx
Normal file
200
src/routes/settings/Billing/components/PaymentHistory.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
import { client } from "@/api/rpcclient";
|
||||
import DownloadIcon from "@/components/icons/DownloadIcon.vue";
|
||||
import ListIcon from "@/components/icons/ListIcon.vue";
|
||||
import { useAppToast } from "@/composables/useAppToast";
|
||||
import { getApiErrorMessage, getStatusStyles } from "@/lib/utils";
|
||||
import { PaymentHistoryItem } from "@/server/gen/proto/app/v1/common";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import { useQuery } from "@pinia/colada";
|
||||
import { useTranslation } from "i18next-vue";
|
||||
|
||||
const normalizeHistoryStatus = (status?: string) => {
|
||||
switch ((status || '').toLowerCase()) {
|
||||
case 'success':
|
||||
case 'succeeded':
|
||||
case 'paid':
|
||||
return 'success';
|
||||
case 'failed':
|
||||
case 'error':
|
||||
case 'canceled':
|
||||
case 'cancelled':
|
||||
return 'failed';
|
||||
case 'pending':
|
||||
case 'processing':
|
||||
default:
|
||||
return 'pending';
|
||||
}
|
||||
};
|
||||
|
||||
const PaymentHistory = defineComponent({
|
||||
name: 'PaymentHistory',
|
||||
setup(props, ctx) {
|
||||
const auth = useAuthStore();
|
||||
const { t } = useTranslation();
|
||||
const toast = useAppToast();
|
||||
const downloadingInvoiceId = ref<string | null>(null);
|
||||
|
||||
const formatTermLabel = (months: number) => t('settings.billing.termOption', { months });
|
||||
const formatPaymentMethodLabel = (value?: string) => {
|
||||
switch ((value || '').toLowerCase()) {
|
||||
case 'topup':
|
||||
return t('settings.billing.paymentMethod.topup');
|
||||
case 'wallet':
|
||||
default:
|
||||
return t('settings.billing.paymentMethod.wallet');
|
||||
}
|
||||
};
|
||||
const mapHistoryItem = (item: PaymentHistoryItem) => {
|
||||
const details: string[] = [];
|
||||
|
||||
if (item.kind !== 'wallet_topup' && item.termMonths) {
|
||||
details.push(formatTermLabel(item.termMonths));
|
||||
}
|
||||
if (item.kind !== 'wallet_topup' && item.paymentMethod) {
|
||||
details.push(formatPaymentMethodLabel(item.paymentMethod));
|
||||
}
|
||||
if (item.kind !== 'wallet_topup' && item.expiresAt) {
|
||||
details.push(t('settings.billing.history.validUntil', { date: auth.formatHistoryDate(item.expiresAt) }));
|
||||
}
|
||||
|
||||
return {
|
||||
id: item.id || '',
|
||||
date: auth.formatHistoryDate(item.createdAt),
|
||||
amount: item.amount || 0,
|
||||
plan: item.kind === 'wallet_topup'
|
||||
? t('settings.billing.walletTopup')
|
||||
: (item.planName || t('settings.billing.unknownPlan')),
|
||||
status: normalizeHistoryStatus(item.status),
|
||||
invoiceId: item.invoiceId || '-',
|
||||
currency: item.currency || 'USD',
|
||||
kind: item.kind || 'subscription',
|
||||
details,
|
||||
};
|
||||
};
|
||||
const { data, isLoading } = useQuery({
|
||||
key: ['paymentHistory'],
|
||||
query: () => client.listPaymentHistory().then(res => (res.payments || []).map(mapHistoryItem)),
|
||||
});
|
||||
|
||||
const handleDownloadInvoice = async (item: PaymentHistoryItem) => {
|
||||
if (!item.id) return;
|
||||
|
||||
downloadingInvoiceId.value = item.id;
|
||||
toast.add({
|
||||
severity: 'info',
|
||||
summary: t('settings.billing.toast.downloadingSummary'),
|
||||
detail: t('settings.billing.toast.downloadingDetail', { invoiceId: item.invoiceId }),
|
||||
life: 2000,
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await client.downloadInvoice({ id: item.id });
|
||||
const content = response.content || '';
|
||||
const contentType = response.contentType || 'text/plain;charset=utf-8';
|
||||
const filename = response.filename || `${item.invoiceId}.txt`;
|
||||
const blob = new Blob([content], { type: contentType });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const anchor = document.createElement('a');
|
||||
anchor.href = url;
|
||||
anchor.download = filename;
|
||||
document.body.appendChild(anchor);
|
||||
anchor.click();
|
||||
document.body.removeChild(anchor);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: t('settings.billing.toast.downloadedSummary'),
|
||||
detail: t('settings.billing.toast.downloadedDetail', { invoiceId: item.invoiceId }),
|
||||
life: 3000,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
summary: t('settings.billing.toast.downloadFailedSummary'),
|
||||
detail: getApiErrorMessage(error, t('settings.billing.toast.downloadFailedDetail')),
|
||||
life: 5000,
|
||||
});
|
||||
} finally {
|
||||
downloadingInvoiceId.value = null;
|
||||
}
|
||||
};
|
||||
return () => (
|
||||
<div class="px-6 py-4">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-10 h-10 rounded-md bg-info/10 flex items-center justify-center shrink-0">
|
||||
<ListIcon class="w-6 h-6 text-info" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-foreground">{t('settings.billing.paymentHistory')}</p>
|
||||
<p class="text-xs text-foreground/60 mt-0.5">{t('settings.billing.paymentHistorySubtitle')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border border-border rounded-lg overflow-hidden">
|
||||
<div class="grid grid-cols-12 gap-4 px-4 py-3 text-xs font-medium text-foreground/60 uppercase tracking-wider bg-muted/30">
|
||||
<div class="col-span-3">{t('settings.billing.table.date')}</div>
|
||||
<div class="col-span-2">{t('settings.billing.table.amount')}</div>
|
||||
<div class="col-span-3">{t('settings.billing.table.plan')}</div>
|
||||
<div class="col-span-2">{t('settings.billing.table.status')}</div>
|
||||
<div class="col-span-2 text-right">{t('settings.billing.table.invoice')}</div>
|
||||
</div>
|
||||
{isLoading.value && (<div class="px-4 py-6 space-y-3">
|
||||
{Array.from({ length: 3 }).map((_, index) => (
|
||||
<div key={index} class="grid grid-cols-12 gap-4 items-center animate-pulse">
|
||||
<div class="col-span-3 h-4 rounded bg-muted/50" />
|
||||
<div class="col-span-2 h-4 rounded bg-muted/50" />
|
||||
<div class="col-span-3 h-4 rounded bg-muted/50" />
|
||||
<div class="col-span-2 h-6 rounded bg-muted/50" />
|
||||
<div class="col-span-2 h-8 rounded bg-muted/50" />
|
||||
</div>
|
||||
))}
|
||||
</div>)}
|
||||
{data.value?.length === 0 && !isLoading.value && (<div class="text-center py-12 text-foreground/60">
|
||||
<div class="w-16 h-16 rounded-full bg-muted/50 flex items-center justify-center mx-auto mb-4">
|
||||
<DownloadIcon class="w-8 h-8 text-foreground/40" />
|
||||
</div>
|
||||
<p>{t('settings.billing.noPaymentHistory')}</p>
|
||||
</div>)}
|
||||
|
||||
{data.value?.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
class="grid grid-cols-12 gap-4 px-4 py-3 items-center hover:bg-muted/30 transition-all border-t border-border"
|
||||
>
|
||||
<div class="col-span-3">
|
||||
<p class="text-sm font-medium text-foreground">{item.date}</p>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<p class="text-sm text-foreground">{auth.formatMoney(item.amount)}</p>
|
||||
</div>
|
||||
<div class="col-span-3">
|
||||
<p class="text-sm text-foreground">{item.plan}</p>
|
||||
<p v-if="item.details?.length" class="mt-1 text-xs text-foreground/60">
|
||||
{item.details.join(' · ')}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<span class={`inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium ${getStatusStyles(item.status)}`}>
|
||||
{t('settings.billing.status.' + item.status)}
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-span-2 flex justify-end">
|
||||
<button
|
||||
class="flex items-center gap-2 px-3 py-1.5 text-sm text-foreground/70 hover:text-foreground hover:bg-muted/50 rounded-md transition-all disabled:opacity-60 disabled:cursor-wait"
|
||||
disabled={downloadingInvoiceId.value === item.id}
|
||||
onClick={() => handleDownloadInvoice(item)}
|
||||
>
|
||||
<DownloadIcon class="w-4 h-4" />
|
||||
<span>{downloadingInvoiceId.value === item.id ? '...' : t('settings.billing.download')}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
export default PaymentHistory;
|
||||
158
src/routes/settings/Billing/components/PlanSelection.tsx
Normal file
158
src/routes/settings/Billing/components/PlanSelection.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
import { client as rpcClient } from '@/api/rpcclient';
|
||||
import CheckIcon from '@/components/icons/CheckIcon.vue';
|
||||
import CreditCardIcon from '@/components/icons/CreditCardIcon.vue';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import { useQuery } from '@pinia/colada';
|
||||
import { useTranslation } from 'i18next-vue';
|
||||
import { computed, defineComponent } from 'vue';
|
||||
const PlanSelection = defineComponent({
|
||||
name: 'PlanSelection',
|
||||
props: {
|
||||
currentPlanId: { type: String, default: '', required: true },
|
||||
selectedPlanId: { type: String, default: null, required: true },
|
||||
},
|
||||
emits: ['upgrade'],
|
||||
setup(props, { emit }) {
|
||||
const { t } = useTranslation();
|
||||
const auth = useAuthStore();
|
||||
const { data, isLoading } = useQuery({
|
||||
key: () => ['billing-plans'],
|
||||
query: () => rpcClient.listPlans(),
|
||||
});
|
||||
const subscriptionSummary = computed(() => {
|
||||
const expiresAt = auth.user?.planExpiresAt || auth.user?.plan_expires_at;
|
||||
const formattedDate = auth.formatHistoryDate(expiresAt);
|
||||
const currentPlanName = data.value?.plans?.find((p) => p.id === auth.user?.plan_id)?.name || t('settings.billing.subscription.unknownPlan');
|
||||
if (auth.user?.plan_id) {
|
||||
if (auth.user?.plan_expiring_soon && expiresAt) {
|
||||
return {
|
||||
title: t('settings.billing.subscription.expiringTitle'),
|
||||
description: t('settings.billing.subscription.expiringDescription', {
|
||||
date: formattedDate,
|
||||
}),
|
||||
tone: 'warning' as const,
|
||||
};
|
||||
}
|
||||
|
||||
if (expiresAt) {
|
||||
return {
|
||||
title: t('settings.billing.subscription.activeTitle'),
|
||||
description: t('settings.billing.subscription.activeDescription', {
|
||||
date: formattedDate,
|
||||
}),
|
||||
tone: 'default' as const,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: t('settings.billing.subscription.activeTitle'),
|
||||
description: currentPlanName,
|
||||
tone: 'default' as const,
|
||||
};
|
||||
}
|
||||
|
||||
if (expiresAt) {
|
||||
return {
|
||||
title: t('settings.billing.subscription.expiredTitle'),
|
||||
description: t('settings.billing.subscription.expiredDescription', { date: formattedDate }),
|
||||
tone: 'warning' as const,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: t('settings.billing.subscription.freeTitle'),
|
||||
description: t('settings.billing.subscription.freeDescription'),
|
||||
tone: 'default' as const,
|
||||
};
|
||||
});
|
||||
// Sắp xếp plan theo giá tăng dần
|
||||
const sortedPlans = computed(() =>
|
||||
[...(data.value?.plans || [])].sort((a, b) => (a.price || 0) - (b.price || 0))
|
||||
);
|
||||
|
||||
return () => (
|
||||
<div class="px-6 py-4">
|
||||
{/* Header Section */}
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-10 h-10 rounded-md bg-primary/10 flex items-center justify-center shrink-0">
|
||||
<CreditCardIcon class="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-foreground">{t('settings.billing.availablePlans')}</p>
|
||||
<p class="text-xs text-foreground/60 mt-0.5">{t('settings.billing.availablePlansHint')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading State */}
|
||||
{isLoading.value ? (
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i}>
|
||||
<div class="h-[200px] rounded-lg bg-muted/50 animate-pulse"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
/* Plans Grid */
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{sortedPlans.value.map((plan) => (
|
||||
<div
|
||||
key={plan.id}
|
||||
class={[
|
||||
'border rounded-lg p-4 hover:bg-muted/30 transition-all flex flex-col',
|
||||
plan.id === props.currentPlanId ? 'border-primary/40 bg-primary/5' : 'border-border',
|
||||
]}
|
||||
>
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<h3 class="text-lg font-semibold text-foreground">{plan.name}</h3>
|
||||
{plan.id === props.currentPlanId && (
|
||||
<span class={cn("inline-flex items-center rounded-full bg-primary/10 px-2 py-1 text-[11px] font-medium text-primary", subscriptionSummary.value.tone === 'warning' && 'bg-warning/10 text-warning')}>
|
||||
{subscriptionSummary.value.description}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p class="text-sm text-foreground/60 mt-1 min-h-[2.5rem]">{plan.description}</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<span class="text-2xl font-bold text-foreground">{auth.formatMoney(plan.price || 0)}</span>
|
||||
<span class="text-foreground/60 text-sm"> / {t(`settings.billing.cycle.${plan.cycle}`)}</span>
|
||||
</div>
|
||||
|
||||
<ul class="space-y-2 mb-4 text-sm">
|
||||
{(plan.features || []).map((feature: string) => (
|
||||
<li key={feature} class="flex items-center gap-2 text-foreground/70">
|
||||
<CheckIcon class="w-4 h-4 text-success shrink-0" />
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{plan.id !== props.currentPlanId && (
|
||||
<button
|
||||
disabled={props.selectedPlanId === plan.id}
|
||||
class={[
|
||||
'w-full py-2 px-4 rounded-md text-sm font-medium transition-all mt-auto',
|
||||
props.selectedPlanId === plan.id
|
||||
? 'bg-muted/50 text-foreground/60 cursor-wait'
|
||||
: 'bg-primary text-white hover:bg-primary/90',
|
||||
]}
|
||||
onClick={() => emit('upgrade', plan)}
|
||||
>
|
||||
{props.selectedPlanId === plan.id
|
||||
? t('settings.billing.upgradeDialog.selecting')
|
||||
: t('settings.billing.upgradeDialog.choosePlan')
|
||||
}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
export default PlanSelection;
|
||||
189
src/routes/settings/Billing/components/UpgradeDialog.vue
Normal file
189
src/routes/settings/Billing/components/UpgradeDialog.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<script lang="ts" setup>
|
||||
import AppDialog from '@/components/ui/AppDialog.vue';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
defineProps<{
|
||||
visible: boolean;
|
||||
selectedPlan: {
|
||||
name: string;
|
||||
description?: string;
|
||||
price: number;
|
||||
} | null;
|
||||
selectedTermMonths: number;
|
||||
walletBalance: number;
|
||||
purchaseTopupAmount: number | null;
|
||||
purchaseError: string | null;
|
||||
purchaseLoading: boolean;
|
||||
onUpgradeDialogVisibilityChange: (visible: boolean) => void;
|
||||
selectUpgradePaymentMethod: (method: 'wallet' | 'topup') => void;
|
||||
closeUpgradeDialog: () => void;
|
||||
}>();
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void;
|
||||
(e: 'selectUpgradePaymentMethod', method: 'wallet' | 'topup'): void;
|
||||
(e: 'closeUpgradeDialog'): void;
|
||||
}>();
|
||||
const TERM_OPTIONS = [1, 3, 6, 12] as const;
|
||||
|
||||
const auth = useAuthStore();
|
||||
</script>
|
||||
<template>
|
||||
<AppDialog :visible="visible" :title="$t('settings.billing.upgradeDialog.title')"
|
||||
maxWidthClass="max-w-2xl" @update:visible="onUpgradeDialogVisibilityChange" @close="closeUpgradeDialog">
|
||||
<div v-if="selectedPlan" class="space-y-5">
|
||||
<div class="rounded-lg border border-border bg-muted/20 p-4">
|
||||
<div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
|
||||
<div>
|
||||
<p class="text-xs font-medium uppercase tracking-[0.18em] text-foreground/50">
|
||||
{{ $t('settings.billing.upgradeDialog.selectedPlan') }}
|
||||
</p>
|
||||
<h3 class="mt-1 text-lg font-semibold text-foreground">{{ selectedPlan.name }}</h3>
|
||||
<p class="mt-1 text-sm text-foreground/70">
|
||||
{{ selectedPlan.description || $t('settings.billing.availablePlansHint') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="text-left md:text-right">
|
||||
<p class="text-xs text-foreground/50">{{ $t('settings.billing.upgradeDialog.basePrice') }}</p>
|
||||
<p class="mt-1 text-2xl font-semibold text-foreground">{{ auth.formatMoney(selectedPlan.price ||
|
||||
0)
|
||||
}}</p>
|
||||
<p class="text-xs text-foreground/60">{{ $t('settings.billing.upgradeDialog.perMonthBase') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-foreground">{{ $t('settings.billing.upgradeDialog.termTitle') }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-foreground/60">{{ $t('settings.billing.upgradeDialog.termHint') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3 md:grid-cols-4">
|
||||
<button v-for="months in TERM_OPTIONS" :key="months" type="button" :class="[
|
||||
'rounded-lg border px-4 py-3 text-left transition-all',
|
||||
selectedTermMonths === months
|
||||
? 'border-primary bg-primary/5 text-primary'
|
||||
: 'border-border bg-header text-foreground hover:border-primary/30 hover:bg-muted/30',
|
||||
]" @click="selectedTermMonths = months">
|
||||
<p class="text-sm font-medium">{{ $t('settings.billing.termOption', { months }) }}</p>
|
||||
<p class="mt-1 text-xs text-foreground/60">{{ auth.formatMoney((selectedPlan.price || 0) *
|
||||
months)
|
||||
}}</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-3 md:grid-cols-3">
|
||||
<div class="rounded-lg border border-border bg-header p-4">
|
||||
<p class="text-xs uppercase tracking-wide text-foreground/50">{{
|
||||
$t('settings.billing.upgradeDialog.totalLabel') }}</p>
|
||||
<p class="mt-2 text-xl font-semibold text-foreground">{{ auth.formatMoney(selectedTotalAmount) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-border bg-header p-4">
|
||||
<p class="text-xs uppercase tracking-wide text-foreground/50">{{
|
||||
$t('settings.billing.upgradeDialog.walletBalanceLabel') }}</p>
|
||||
<p class="mt-2 text-xl font-semibold text-foreground">{{ auth.formatMoney(walletBalance) }}</p>
|
||||
</div>
|
||||
<div class="rounded-lg border p-4" :class="selectedNeedsTopup
|
||||
? 'border-warning/30 bg-warning/10'
|
||||
: 'border-success/20 bg-success/5'">
|
||||
<p class="text-xs uppercase tracking-wide text-foreground/50">{{
|
||||
$t('settings.billing.upgradeDialog.shortfallLabel') }}</p>
|
||||
<p class="mt-2 text-xl font-semibold" :class="selectedNeedsTopup ? 'text-warning' : 'text-success'">
|
||||
{{ auth.formatMoney(selectedShortfall) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedNeedsTopup" class="space-y-3">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-foreground">{{
|
||||
$t('settings.billing.upgradeDialog.paymentMethodTitle') }}</p>
|
||||
<p class="mt-1 text-xs text-foreground/60">{{ $t('settings.billing.upgradeDialog.paymentMethodHint')
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-3 md:grid-cols-2">
|
||||
<button type="button" :class="[
|
||||
'rounded-lg border p-4 text-left transition-all',
|
||||
selectedPaymentMethod === 'wallet'
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border bg-header hover:border-primary/30 hover:bg-muted/30',
|
||||
]" @click="selectUpgradePaymentMethod('wallet')">
|
||||
<p class="text-sm font-medium text-foreground">{{ $t('settings.billing.paymentMethod.wallet') }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-foreground/60">
|
||||
{{ $t('settings.billing.upgradeDialog.walletOptionDescription') }}
|
||||
</p>
|
||||
</button>
|
||||
|
||||
<button type="button" :class="[
|
||||
'rounded-lg border p-4 text-left transition-all',
|
||||
selectedPaymentMethod === 'topup'
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border bg-header hover:border-primary/30 hover:bg-muted/30',
|
||||
]" @click="selectUpgradePaymentMethod('topup')">
|
||||
<p class="text-sm font-medium text-foreground">{{ $t('settings.billing.paymentMethod.topup') }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-foreground/60">
|
||||
{{ $t('settings.billing.upgradeDialog.topupOptionDescription', {
|
||||
shortfall:
|
||||
auth.formatMoney(selectedShortfall) }) }}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="rounded-lg border border-success/20 bg-success/5 p-4 text-sm text-success">
|
||||
{{ $t('settings.billing.upgradeDialog.walletCoveredHint') }}
|
||||
</div>
|
||||
|
||||
<div v-if="selectedNeedsTopup && selectedPaymentMethod === 'topup'" class="grid gap-2">
|
||||
<label class="text-sm font-medium text-foreground">{{
|
||||
$t('settings.billing.upgradeDialog.topupAmountLabel')
|
||||
}}</label>
|
||||
<AppInput :model-value="purchaseTopupAmount" type="number" min="0.01" step="0.01"
|
||||
:placeholder="$t('settings.billing.upgradeDialog.topupAmountPlaceholder')"
|
||||
@update:model-value="updatePurchaseTopupAmount" />
|
||||
<p class="text-xs text-foreground/60">
|
||||
{{ $t('settings.billing.upgradeDialog.topupAmountHint', {
|
||||
shortfall:
|
||||
auth.formatMoney(selectedShortfall)
|
||||
}) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedNeedsTopup && selectedPaymentMethod === 'wallet'"
|
||||
class="rounded-lg border border-warning/30 bg-warning/10 p-4 text-sm text-warning">
|
||||
{{ $t('settings.billing.upgradeDialog.walletInsufficientHint', {
|
||||
shortfall:
|
||||
auth.formatMoney(selectedShortfall) }) }}
|
||||
</div>
|
||||
|
||||
<div v-if="purchaseError" class="rounded-lg border border-danger bg-danger/10 p-4 text-sm text-danger">
|
||||
{{ purchaseError }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p class="text-xs text-foreground/60">
|
||||
{{ $t('settings.billing.upgradeDialog.footerHint') }}
|
||||
</p>
|
||||
<div class="flex justify-end gap-3">
|
||||
<AppButton variant="secondary" size="sm" :disabled="purchaseLoading" @click="closeUpgradeDialog">
|
||||
{{ $t('common.cancel') }}
|
||||
</AppButton>
|
||||
<AppButton size="sm" :loading="purchaseLoading" :disabled="!canSubmitUpgrade"
|
||||
@click="submitUpgrade">
|
||||
{{ upgradeSubmitLabel }}
|
||||
</AppButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</AppDialog>
|
||||
</template>
|
||||
@@ -1,4 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
<script setup lang="tsx">
|
||||
import LinkIcon from '@/components/icons/LinkIcon.vue';
|
||||
import PencilIcon from '@/components/icons/PencilIcon.vue';
|
||||
import TrashIcon from '@/components/icons/TrashIcon.vue';
|
||||
@@ -8,9 +8,9 @@ import BaseTable from '@/components/ui/BaseTable.vue';
|
||||
import SettingsTableSkeleton from '@/routes/settings/components/SettingsTableSkeleton.vue';
|
||||
import type { ColumnDef } from '@tanstack/vue-table';
|
||||
import { useTranslation } from 'i18next-vue';
|
||||
import { computed, h } from 'vue';
|
||||
import PlayerConfigSettingsBadges from './PlayerConfigSettingsBadges.vue';
|
||||
import { computed } from 'vue';
|
||||
import type { PlayerConfig } from '../types';
|
||||
import PlayerConfigSettingsBadges from './PlayerConfigSettingsBadges.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
configs: PlayerConfig[];
|
||||
@@ -37,19 +37,30 @@ const columns = computed<ColumnDef<PlayerConfig>[]>(() => [
|
||||
id: 'config',
|
||||
header: t('settings.playerConfigs.table.name'),
|
||||
accessorFn: row => row.name,
|
||||
cell: ({ row }) => h('div', [
|
||||
h('div', { class: 'flex flex-wrap items-center gap-2' }, [
|
||||
h('span', { class: 'text-sm font-medium text-foreground cursor-pointer hover:underline', onClick: () => emit('edit', row.original) }, row.original.name),
|
||||
row.original.isDefault
|
||||
? h('span', {
|
||||
class: 'inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary',
|
||||
}, t('settings.playerConfigs.defaultBadge'))
|
||||
: null,
|
||||
]),
|
||||
row.original.description
|
||||
? h('p', { class: 'mt-0.5 text-xs text-foreground/50' }, row.original.description)
|
||||
: h('p', { class: 'mt-0.5 text-xs text-foreground/40' }, t('settings.playerConfigs.createdOn', { date: row.original.createdAt || '-' })),
|
||||
]),
|
||||
cell: ({ row }) => (
|
||||
<div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span
|
||||
class="text-sm font-medium text-foreground cursor-pointer hover:underline"
|
||||
onClick={() => emit('edit', row.original)}
|
||||
>
|
||||
{row.original.name}
|
||||
</span>
|
||||
{row.original.isDefault && (
|
||||
<span class="inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
|
||||
{t('settings.playerConfigs.defaultBadge')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{row.original.description ? (
|
||||
<p class="mt-0.5 text-xs text-foreground/50">{row.original.description}</p>
|
||||
) : (
|
||||
<p class="mt-0.5 text-xs text-foreground/40">
|
||||
{t('settings.playerConfigs.createdOn', { date: row.original.createdAt || '-' })}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
meta: {
|
||||
headerClass: 'px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50',
|
||||
cellClass: 'px-6 py-3',
|
||||
@@ -69,7 +80,7 @@ const columns = computed<ColumnDef<PlayerConfig>[]>(() => [
|
||||
row.encrytionM3u8 ? 'encrytionM3u8' : '',
|
||||
row.logoUrl ? 'logo' : '',
|
||||
].filter(Boolean).join(', '),
|
||||
cell: ({ row }) => h(PlayerConfigSettingsBadges, { config: row.original }),
|
||||
cell: ({ row }) => <PlayerConfigSettingsBadges config={row.original} />,
|
||||
meta: {
|
||||
headerClass: 'px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50',
|
||||
cellClass: 'px-6 py-3',
|
||||
@@ -79,13 +90,23 @@ const columns = computed<ColumnDef<PlayerConfig>[]>(() => [
|
||||
id: 'status',
|
||||
header: t('common.status'),
|
||||
accessorFn: row => Number(row.isActive),
|
||||
cell: ({ row }) => h('div', { class: 'text-center' }, [
|
||||
h(AppSwitch, {
|
||||
modelValue: row.original.isActive,
|
||||
disabled: !props.canManageExistingConfig || props.saving || props.deletingId !== null || props.defaultingId !== null || props.togglingId === row.original.id,
|
||||
'onUpdate:modelValue': (value: boolean) => emit('toggle-active', { config: row.original, value }),
|
||||
}),
|
||||
]),
|
||||
cell: ({ row }) => (
|
||||
<div class="text-center">
|
||||
<AppSwitch
|
||||
modelValue={row.original.isActive}
|
||||
disabled={
|
||||
!props.canManageExistingConfig ||
|
||||
props.saving ||
|
||||
props.deletingId !== null ||
|
||||
props.defaultingId !== null ||
|
||||
props.togglingId === row.original.id
|
||||
}
|
||||
onUpdate:modelValue={(value: boolean) =>
|
||||
emit('toggle-active', { config: row.original, value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
meta: {
|
||||
headerClass: 'px-6 py-3 text-center text-xs font-medium uppercase tracking-wider text-foreground/50',
|
||||
cellClass: 'px-6 py-3 text-center',
|
||||
@@ -95,35 +116,48 @@ const columns = computed<ColumnDef<PlayerConfig>[]>(() => [
|
||||
id: 'actions',
|
||||
header: t('common.actions'),
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => h('div', { class: 'flex flex-wrap items-center justify-end gap-2' }, [
|
||||
row.original.isDefault
|
||||
? h('span', {
|
||||
class: 'inline-flex items-center rounded-full bg-primary/10 px-2 py-1 text-xs font-medium text-primary',
|
||||
}, t('settings.playerConfigs.actions.default'))
|
||||
: h(AppButton, {
|
||||
variant: 'ghost',
|
||||
size: 'sm',
|
||||
loading: props.defaultingId === row.original.id,
|
||||
disabled: !props.canManageExistingConfig || props.saving || props.deletingId !== null || props.togglingId !== null || props.defaultingId !== null || !row.original.isActive,
|
||||
onClick: () => emit('set-default', row.original),
|
||||
}, () => t('settings.playerConfigs.actions.setDefault')),
|
||||
h(AppButton, {
|
||||
variant: 'ghost',
|
||||
size: 'sm',
|
||||
disabled: !props.canManageExistingConfig,
|
||||
onClick: () => emit('edit', row.original),
|
||||
}, {
|
||||
icon: () => h(PencilIcon, { class: 'h-4 w-4' }),
|
||||
}),
|
||||
h(AppButton, {
|
||||
variant: 'ghost',
|
||||
size: 'sm',
|
||||
disabled: !props.canDeleteConfig,
|
||||
onClick: () => emit('delete', row.original),
|
||||
}, {
|
||||
icon: () => h(TrashIcon, { class: 'h-4 w-4 text-danger' }),
|
||||
}),
|
||||
]),
|
||||
cell: ({ row }) => (<div class="flex flex-wrap items-center justify-end gap-2">
|
||||
{row.original.isDefault ? (
|
||||
<span class="inline-flex items-center rounded-full bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
|
||||
{t('settings.playerConfigs.actions.default')}
|
||||
</span>
|
||||
) : (
|
||||
<AppButton
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
loading={props.defaultingId === row.original.id}
|
||||
disabled={
|
||||
!props.canManageExistingConfig ||
|
||||
props.saving ||
|
||||
props.deletingId !== null ||
|
||||
props.togglingId !== null ||
|
||||
props.defaultingId !== null ||
|
||||
!row.original.isActive
|
||||
}
|
||||
onClick={() => emit('set-default', row.original)}
|
||||
>
|
||||
{t('settings.playerConfigs.actions.setDefault')}
|
||||
</AppButton>
|
||||
)}
|
||||
<AppButton
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={!props.canManageExistingConfig}
|
||||
onClick={() => emit('edit', row.original)}
|
||||
v-slots={{
|
||||
icon: () => <PencilIcon class="h-4 w-4" />,
|
||||
}}
|
||||
/>
|
||||
<AppButton
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={!props.canDeleteConfig}
|
||||
onClick={() => emit('delete', row.original)}
|
||||
v-slots={{
|
||||
icon: () => <TrashIcon class="h-4 w-4 text-danger" />,
|
||||
}}
|
||||
/>
|
||||
</div>),
|
||||
meta: {
|
||||
headerClass: 'px-6 py-3 text-center text-xs font-medium uppercase tracking-wider text-foreground/50 [&>div]:justify-center',
|
||||
cellClass: 'px-6 py-3 text-right',
|
||||
|
||||
@@ -41,9 +41,26 @@ export const useAuthStore = defineStore("auth", () => {
|
||||
const loading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
const initialized = ref(false);
|
||||
const localeTag = computed(() => i18next.resolvedLanguage === 'vi' ? 'vi-VN' : 'en-US');
|
||||
const currencyFormatter = computed(() => new Intl.NumberFormat(localeTag.value, {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
maximumFractionDigits: 2,
|
||||
}));
|
||||
const shortDateFormatter = computed(() => new Intl.DateTimeFormat(localeTag.value, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
}));
|
||||
const formatHistoryDate = (value?: string) => {
|
||||
if (!value) return '-';
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return '-';
|
||||
return shortDateFormatter.value.format(date);
|
||||
};
|
||||
const formatMoney = (amount: number) => currencyFormatter.value.format(amount);
|
||||
|
||||
let mqttClient: TinyMqttClient | undefined;
|
||||
|
||||
const clearMqttClient = () => {
|
||||
mqttClient?.disconnect();
|
||||
mqttClient = undefined;
|
||||
@@ -233,6 +250,8 @@ export const useAuthStore = defineStore("auth", () => {
|
||||
changePassword,
|
||||
setLanguage,
|
||||
logout,
|
||||
formatHistoryDate,
|
||||
formatMoney,
|
||||
$reset: () => {
|
||||
clearMqttClient();
|
||||
clearState();
|
||||
|
||||
Reference in New Issue
Block a user