+
{{ $t('subscribe__current_plan') }}
-
+
{{ currentPlanData?.name }}
-
- {{ $t('subscribe__plan_exp') }}
- {{ date.formatDate(currentPlanData.exp * 1000, 'DD.MM.YYYY') }}
-
+
-
-
{{ $t('subscribe__plan_active_chats') }}
-
-
{{ currentPlanData?.active_chats }}
-
/{{ currentPlanData?.chatsQty }}
+
+
+ {{ $t('subscribe__plan_date') }}
-
-
-
-
{{ $t('subscribe__plans')}}
-
-
-
-
-
-
- {{ item.name }}
-
-
- {{ $t('subscribe__chats_max') }}
-
-
- {{ item.chatsQty }}
-
-
-
- {{ $t('subscribe__chats')}}
-
-
-
-
-
-
-
- {{ formatNumber(item.price) }}
- {{ $t('subscribe__per_month') }}
-
-
-
- {{ $t('subscribe__free_tax') }}
-
-
-
-
-
- {{ $t('subscribe__plans_description') }}
-
-
-
-
-
- {{ period.sale }}% off
- {{ $t(period.name) }}
- ({{ $t(period.name_in_days) }})
-
-
-
-
-
- {{ $t('subscribe__plans_period_notes') + ' ' }}
-
- {{ $t('subscribe__plans_period_notes_more_info') }}
+
+ {{ date.formatDate(currentPlanData.exp * 1000, 'DD.MM.YYYY') }}
+
+
+ {{ $t('subscribe__plan_active_chats') }}
+
+
+ {{ currentPlanData?.active_chats }}
+ /{{ currentPlanData?.chatsQty }}
+
+
+
+
+
+
+ {{ $t('subscribe__plans')}}
+
+ {{ $t('subscribe__plans_description') }}
+
+
+
+
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+ {{ $t('subscribe__chats_max') + ' ' + item.chatsQty }}
+
+
+
+ {{ $t('subscribe__chats')}}
+
+
+
+ {{ $t('subscribe__TEST_via_support')}}
+
+
+
+
+
+
+
+
+ {{ formatNumber(item.price) }}
+ {{ $t('subscribe__per_month') }}
+
+
+
+ {{ $t('subscribe__free_tax') }}
+
+
+
+
+
+
+
+ {{ $t('subscribe__plans_interval') }}
+
+
+
+
+
+
+
+ {{ $t(period.name) }}
+
+
+
+ {{ $t(period.name_in_days) }}
+
+ -{{ period.sale }}%
+
+
+
+
+
+
+ {{ $t('subscribe__plans_period_notes') + ' ' }}
+
+ {{ $t('subscribe__plans_period_notes_more_info') }}
+
+
+
+
+
+
+
+
@@ -121,12 +191,12 @@
import { date } from 'quasar'
import { useI18n } from 'vue-i18n'
import type { WebApp } from '@twa-dev/types'
- import { colors } from 'quasar';
+ import { colors } from 'quasar'
+ import { useQuasar } from 'quasar'
const router = useRouter()
const tg = inject('tg') as WebApp
- tg.MainButton.show()
// @ts-expect-error: get hex text
tg.MainButton.color = colors.getPaletteColor('primary')
@@ -146,7 +216,7 @@
const selectPeriod = ref(periods[1]?.value)
- const newPlan = ref(plans[1])
+ const newPlan = ref(plans[0])
interface CurrentPlan {
plan: string
@@ -155,7 +225,7 @@
}
const currentPlan = ref
({ // temp, this get from api
- plan: plans[0].val,
+ plan: plans[1].val,
active_chats: 20,
exp: Date.now() / 1000 + 500000
})
@@ -186,12 +256,12 @@
)
const newDateExp = date.addToDate(Date.now(), { months: Number(selectPeriod.value) })
- return t('subscribe__pay') + ' ⭐' + stars +
+ return t(newPlan.value.id !== currentPlanData.value.id ? 'subscribe__pay' : 'subscribe__pay_renew') +
+ ' ⭐' + stars +
' (' + t('subscribe__plan_exp') + ' ' +
date.formatDate(newDateExp, 'DD.MM.YYYY') + ')'
})
-
function formatNumber (number: string | number) {
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")
}
@@ -201,6 +271,43 @@
watch(textBtn, () => tg.MainButton.setText(textBtn.value),
{ immediate: true })
+ watch(newPlan, () =>
+ // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+ { newPlan.value.name === 'TEST' ? tg.MainButton.hide() : tg.MainButton.show() },
+ { immediate: true })
+
+ const maxWidthStarsSection = ref(0)
+
+ interface sizeParams {
+ height: number,
+ width: number
+ }
+
+ function updateMaxWidthStarsSection (size: sizeParams) {
+ if (size.width > maxWidthStarsSection.value) {
+ maxWidthStarsSection.value = size.width
+ }
+ }
+
+ const promocode = ref('')
+
+ function sendPromocode () {
+ promocode.value = ''
+ showNotify('fail')
+ }
+
+ const $q = useQuasar()
+
+ const showNotify = (message: 'success' | 'fail') => {
+ $q.notify({
+ message: t(message === 'success' ? 'subscribe__promocode_success' : 'subscribe__promocode_fail'),
+ type: message === 'success' ? 'positive' : 'negative',
+ position: 'bottom',
+ timeout: 1000,
+ multiLine: true
+ })
+ }
+