udpate

src/pages/AccountChangeEmailPage.vue

@@ -234,7 +234,6 @@
     },
     2: async () => {
       await authStore.confirmCurrentEmailCode(code.value)
-      console.log(code.value)
     },
     3: async () => {
       await authStore.getCodeNewEmail(code.value, newLogin.value)

src/pages/AccountPage.vue

@@ -105,7 +105,8 @@
     await router.push({ name: 'login' })
   }
 
-  function onConfirmStopUsing () {
+  async function onConfirmStopUsing () {
+    await authStore.termsRevoked()
     tg.close()
   }
 

src/pages/AgreementsPage.vue

@@ -6,37 +6,35 @@
     <pn-scroll-list>
       <div class="flex column w100 q-pa-md q-gutter-y-md">
         <div>
-          {{ $t('agreements__description') }}
+          <div v-if="route.query.type === 'update'">{{ $t('agreements__description_update') }}</div>
+          <div>{{ $t('agreements__description') }}</div>
         </div>
-        <div class="flex items-center no-wrap">
+        <div class="flex items-center no-wrap text-caption">
           <q-checkbox v-model="agreement" val="1" class="q-pr-sm"/>
           <span>
             {{ $t('agreements__checkbox_agreement_terms') + ' ' }}
             <span
               @click="router.push({ name: 'terms' })"
-              class="cursor-pointer"
-              style="text-decoration: underline;"
+              class="cursor-pointer text-primary"
               >
               {{ $t('agreements__checkbox_agreement_terms_doc') }}
             </span>
           </span>
         </div>
-        <div class="flex items-center no-wrap">
+        <div class="flex items-center no-wrap text-caption">
           <q-checkbox v-model="agreement" val="2" class="q-pr-sm"/>
           <span>
             {{ $t('agreements__checkbox_agreement_consent') + ' ' }}
             <span
               @click="router.push({ name: 'consent' })"
-              class="cursor-pointer"
-              style="text-decoration: underline;"
+              class="cursor-pointer text-primary"
               >
               {{ $t('agreements__checkbox_agreement_consent_doc') }}
             </span>
             {{ ' ' +  $t('agreements__checkbox_agreement_privacy') + ' ' }}
             <span
-              @click="router.push({ name: 'consent' })"
-              class="cursor-pointer"
-              style="text-decoration: underline;"
+              @click="router.push({ name: 'privacy' })"
+              class="cursor-pointer text-primary"
               >
               {{ $t('agreements__checkbox_agreement_privacy_doc') }}
             </span>
@@ -78,7 +76,7 @@
 
 <script setup lang="ts">
   import { ref, inject } from 'vue'
-  import { useRouter } from 'vue-router'
+  import { useRouter, useRoute } from 'vue-router'
   import { useAuthStore } from 'stores/auth'
   import type { WebApp } from '@twa-dev/types'
   const tg = inject('tg') as WebApp
@@ -87,13 +85,33 @@
     tg.close()
   }
 
+  const route = useRoute()
 
   const authStore = useAuthStore()
   const router = useRouter()
 
   async function onSubmit () {
-    await authStore.termsAccepted()
-    await router.push({ name: 'projects' })
+    
+    if (!route.query.method || !route.query.type) {
+      await authStore.logout()
+      await router.push({ name: 'login' })
+      return
+    }
+
+    if (route.query.method === 'telegram' && route.query.type === 'register') {
+      await authStore.registerWithTelegram(tg.initData)
+      await authStore.loginWithTelegram(tg.initData)
+      await router.push({ name: 'projects' })
+    }
+
+    if (route.query.method === 'email' && route.query.type === 'register') {
+      await router.push({ name: 'create_account' })
+    }
+
+    if (route.query.type === 'update') {
+      await authStore.termsAccepted()
+      await router.push({ name: 'projects' })
+    }
   }
 
   const agreement = ref([])

src/pages/ChatPage.vue

@@ -26,15 +26,13 @@
           rounded
         />
         <div
-          class="flex row items-start justify-center q-pt-md text-bold"
-          align="center"
+          class="flex row items-start justify-center q-pt-md text-bold text-center"
           >
           {{ chat.name }}
         </div>
         <div
           v-if="chat.description"
-          class="flex row items-start justify-center text-caption"
-          align="center"
+          class="flex row items-start justify-center text-caption text-center"
           >
           {{ chat.description }}
         </div>
@@ -58,13 +56,12 @@
             />
           </q-item-section>
           <q-item-section>
-            <q-item-label lines="1" class="text-bold" v-if="item.section1">
-              <q-badge
-                v-if="item.is_blocked"
-                color="negative"
-                >
-                {{ $t('chat_page__user_blocked') }}
+            <q-item-label lines="1" v-if="getUserStatus(item).status">
+              <q-badge  :color="getUserStatus(item).color">
+                {{ $t(getUserStatus(item).text) }}
               </q-badge>
+            </q-item-label>
+            <q-item-label lines="1" class="text-bold" v-if="item.section1">
               {{item.section1}}
             </q-item-label>
             <q-item-label lines="2" caption v-if="item.section3">
@@ -91,8 +88,9 @@
   import { useChatsStore } from 'stores/chats'
   import { useUsersStore } from 'stores/users'
   import { useCompaniesStore } from 'stores/companies'
-  import { parseIntString } from 'helpers/helpers'
+  import { parseIntString } from 'src/utils/helpers'
   import type { Chat } from 'types/Chat'
+  import type { User } from 'types/User'
   import type { WebApp } from '@twa-dev/types'
   import { useUserSection } from 'composables/useUserSection'
 
@@ -135,8 +133,9 @@
     return arr.map(el => ({
       ...el,
       ...userSection(el),
-      companyName: el.company_id && companiesStore.companyById(el.company_id)
-        ? companiesStore.companyById(el.company_id)?.name 
+      companyName: 
+        (el.company_id && companiesStore.companyById(el.company_id))
+        ? companiesStore.companyById(el.company_id)?.name ?? null
         : null
     }))
   })
@@ -145,4 +144,19 @@
     await router.push({ name: 'user_info', params: { id: route.params.id, userId: id }})
   }
 
+  interface chatUser extends User {
+    section1: string
+    section2_1: string
+    section2_2: string
+    section3: string
+    companyName: string | null
+  }
+
+  function getUserStatus (item: chatUser) {
+    if (item.is_blocked) return { status: 'blocked', text: 'user_block__user_blocked', color: 'negative' }
+    if (item.is_leave) return { status: 'leave', text: 'user_block__user_leave', color: 'primary' }
+    if (!item.is_terms_accepted) return { status: 'pending', text: 'user_block__user_pending', color: 'secondary' }
+    return { status: null, text: '', color: '' }
+  }
+
 </script>

src/pages/CompanyEditPage.vue

@@ -30,7 +30,7 @@
   import { useRouter, useRoute } from 'vue-router'
   import companyBlock from 'components/companyBlock.vue'
   import { useCompaniesStore } from 'stores/companies'
-  import { parseIntString } from 'helpers/helpers'
+  import { parseIntString } from 'src/utils/helpers'
   import type { CompanyParams } from 'types/Company'
 
   const router = useRouter()

src/pages/LoginPage.vue

@@ -212,7 +212,7 @@
 
   async function createAccount() {
     sessionStorage.setItem('pendingLogin', login.value)
-    await router.push({ name: 'create_account' })
+    await router.push({ name: 'agreements', query: { method: 'email', type: 'register' }})
   }
 
   const isTelegramApp = computed(() => {
@@ -221,10 +221,12 @@
     })
 
   async function handleTelegramLogin () {
-    // @ts-expect-ignore
-    const initData = window.Telegram.WebApp.initData
-    await authStore.loginWithTelegram(initData)
-    await router.push({ name: 'projects' })
+    try {
+      await authStore.loginWithTelegram(tg.initData)
+      await router.push({ name: 'projects' })
+    } catch {
+      await router.push({ name: 'agreements', query: { method: 'telegram', type: 'register' }})
+    }
   }
 
   onUnmounted(() => {

src/pages/TelegramOnlyPage.vue

@@ -0,0 +1,38 @@
+<template>
+  <div
+    class="q-pa-md flex items-center justify-center"
+    style="height: 100vh"
+    >
+    <mesh-background/>
+    <q-card
+      class="q-py-md q-px-xl flex column q-gutter-y-lg justify-center items-center"
+      style="opacity: 0.8"
+      >
+      <base-logo class="text-h6"/>
+      <span class="text-h6 text-center">
+        {{$t('only_telegram__continue')}}
+      </span>
+      <q-btn
+        @click="openWebsite"
+        color="primary"
+        rounded
+        class="q-mb-lg"
+        >
+        <div class="flex items-center">
+          <q-icon name="telegram"/>
+          Telegram
+        </div>
+      </q-btn>
+    </q-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import baseLogo from 'components/BaseLogo.vue'
+  import meshBackground from 'components/meshBackground.vue'
+  import { BOT_NAME } from 'src/utils/constants'
+
+  function openWebsite () {
+    window.open('https://t.me/'+ BOT_NAME)
+  }
+</script>

src/pages/UserEditPage.vue

@@ -13,8 +13,8 @@
   import { useRouter, useRoute } from 'vue-router'
   import userBlock from 'components/userBlock.vue'
   import { useUsersStore } from 'stores/users'
-  import { parseIntString } from 'helpers/helpers'
-  import type { User } from 'types/Users'
+  import { parseIntString } from 'src/utils/helpers'
+  import type { User } from 'types/User'
 
   const router = useRouter()
   const route = useRoute()

src/pages/account/ChangePlanRules.vue

@@ -0,0 +1,10 @@
+<template>
+  <doc-block title="subscription_guide__title" document-name="Subscription_guide"/>
+</template>
+
+<script setup lang="ts">
+  import docBlock from 'components/docBlock.vue'
+</script>
+
+<style>
+</style>

src/pages/account/ConsentPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <doc-block type="consent"/>
+  <doc-block title="consent__title" document-name="Consent_to_Personal_Data_Processing"/>
 </template>
 
 <script setup lang="ts">

src/pages/account/PrivacyPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <doc-block type="privacy"/>
+  <doc-block title="privacy__title" document-name="Privacy-Policy"/>
 </template>
 
 <script setup lang="ts">

src/pages/account/SubscribePage.vue

@@ -1,72 +1,205 @@
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <template>
   <pn-page-card>
     <template #title>
       {{$t('subscribe__title')}}
     </template>
 
-    <pn-scroll-list class="q-px-md">
-      <div id="subscribe-current-balance" class="flex w100 justify-between items-center no-wrap text-h6">
-        <span>
-          {{ $t('subscribe__current_balance') }}
-        </span>
+    <pn-scroll-list >
+      <div class="q-px-md">
+        <div
+          id="subscribe-current-balance"
+          class="flex w100 q-px-md q-py-sm row"
+          style="border-radius: var(--top-raduis); border: 1px solid var(--q-primary);"
+          >
 
-        <div class="flex items-center">
-          <q-icon name = "mdi-crown-circle-outline" color="orange" size="sm"/>
-          <div class="text-bold q-pa-xs ">
-            50
-          </div>
-        </div>
-      </div>
-      <div id="subscribe-need-tocken" :style = "{ borderLeft: 'solid 5px var(--q-info)' }" class="q-pl-sm">
-       <q-icon name = "mdi-crown-circle-outline" color="orange" size="xs"/>{{ $t('subscribe__token_formula') }}
-       <div class="text-caption">{{ $t('subscribe__token_formula_description') }}</div>
-      </div>
-      
-      <div id="qty_chats" class="flex column q-pt-lg w100">
-          <div class="text-h6 flex items-center">
-            <span>{{ $t('account__chats') }}</span>
-          </div>
-          <div class="flex row justify-between">
-            <qty-chat-card
-              v-for = "chat in chats"
-              :key = chat.title
-              :qty = chat.qty
-              :bgColor = chat.color
-              :title = chat.title
-            />
-          </div>
-        </div>
+          <div class="flex w100 justify-between items-center no-wrap">
+            <div class="flex no-wrap items-center text-h6 col-9">
+              {{ $t('subscribe__current_plan') }}
+            </div>
 
+            <div class="flex items-center column col-3">
+              <span class="text-bold">
+                {{ currentPlanData?.name }}
+              </span>
+              <span class="text-caption" style="line-height: 0.5em;">
+                {{ $t('subscribe__plan_exp') }}
+                {{ date.formatDate(currentPlanData.exp * 1000, 'DD.MM.YYYY') }}
+              </span>
+            </div>
+          </div>
+
+          <div class="flex row w100 ow-wrap items-center text-caption q-pt-sm">
+            <div class="col-9">{{ $t('subscribe__plan_active_chats') }}</div>
+            <div class="col-3" align="center">
+              <span class="text-brand2 text-bold q-pr-xs">{{ currentPlanData?.active_chats }}</span>
+              <span class="text-grey">/{{ currentPlanData?.chatsQty }}</span>
+            </div>
+          </div>
+
+        </div>
+          <div class="flex w100 justify-center text-grey q-pt-md q-pb-none">{{ $t('subscribe__plans')}}</div>
+          <q-list separator>
+            <q-item
+              v-for="item in plans"
+              :key="item.id"
+              >
+              <q-item-section avatar>
+                <q-radio v-model="newPlan" :val="item" v-if="item.name!=='TEST'"/>
+              </q-item-section>
+              <q-item-section>
+                <q-item-label class="text-bold">{{ item.name }}</q-item-label>
+                <div class="flex no-wrap items-center text-caption">
+                  <span v-if="item.chatsQty" class="q-pr-xs">
+                    {{ $t('subscribe__chats_max') }}
+                  </span>
+                  <span v-if="item.chatsQty">
+                    {{ item.chatsQty }}
+                  </span>
+                  <q-icon v-else name="mdi-all-inclusive" size="sm"/>
+                  <span class="q-pl-xs">
+                    {{ $t('subscribe__chats')}}
+                  </span>
+                </div>
+              </q-item-section>
+              <q-item-section side>
+                <div v-if="item.price" class="flex column items-center">
+                  <div class="flex no-wrap items-center">
+                    <telegram-star color="gold" size="18px" class="q-mr-xs"/>
+                    <span class="text-h6">{{ formatNumber(item.price) }}</span>
+                    <span class="text-caption q-pl-xs">{{ $t('subscribe__per_month') }}</span>
+                  </div>
+                </div>
+                <div v-else class="text-bold">
+                  {{ $t('subscribe__free_tax') }}
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-list>
+          <div class="flex w100 justify-center text-caption text-grey q-pt-sm text-center">
+            {{ $t('subscribe__plans_description') }}
+          </div>
+          
+          <q-btn-group spread flat class="w100 q-py-sm">  
+            <q-btn
+              v-for="period in periods"
+              :key="period.id"
+              :color="selectPeriod === period.value ? 'primary' : 'white'"
+              :text-color="selectPeriod === period.value ? 'white' : 'primary'"
+              @click="selectPeriod = period.value"
+              no-caps
+              >
+              <div class="column items-center w100 self-end">
+                <q-badge v-show="period.sale" color="red">{{ period.sale }}% off</q-badge>
+                <span>{{ $t(period.name) }}</span>
+                <span class="text-caption">({{ $t(period.name_in_days) }})</span>
+              </div>
+            </q-btn>
+          </q-btn-group>
+
+          <div class="text-caption column text-grey">
+            <span>{{ $t('subscribe__plans_period_notes') + ' ' }}</span>
+            <span
+              @click="router.push({ name: 'change_plan_rules' })"
+              class="text-info cursor-pointer"  
+              >
+              {{ $t('subscribe__plans_period_notes_more_info') }}
+            </span>
+          </div>
+
+      </div>
     </pn-scroll-list>
   </pn-page-card>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
-  // import { useRouter } from 'vue-router'
-  // import { useAuthStore } from 'stores/auth'
-  // import type { WebApp } from '@twa-dev/types'
-  import qtyChatCard from 'components/account-page/qtyChatCard.vue'
-  // import optionPayment from 'components/admin/account-page/optionPayment.vue'
+  import { ref, computed, inject, onUnmounted, watch } from 'vue'
+  import telegramStar from 'components/TelegramStar.vue'
+  import { useRouter } from 'vue-router'
+  import { date } from 'quasar'
+  import { useI18n } from 'vue-i18n'
+  import type { WebApp } from '@twa-dev/types'
+  import { colors } from 'quasar';
 
-  // const router = useRouter()
-  // const authStore = useAuthStore()
+  const router = useRouter()
 
-  // const tg = inject('tg') as WebApp
-  // const tgUser = tg.initDataUnsafe.user
+  const tg = inject('tg') as WebApp
+  tg.MainButton.show()
 
-  const chats = ref([
-    { title: 'account__chats_active', qty: 8, color: 'var(--q-primary)' },
-    { title: 'account__chats_unbound', qty: 2, color: 'grey' },
-    { title: 'account__chats_free', qty: 5, color: 'green' },
-    { title: 'account__chats_total', qty: 15, color: 'var(--q-info)' },
-  ])
+  // @ts-expect-error: get hex text
+  tg.MainButton.color = colors.getPaletteColor('primary')
 
-  /* const payment=ref([
-    { id: 1, qty: 50, stars: 200, discount: 0 },
-    { id: 2, qty: 120, stars: 400, discount: 20 },
-    { id: 3, qty: 220, stars: 500, discount: 30 }
-  ]) */
+  const plans = [
+    { id: 1, name: 'TEST', val: 'test', price: null, chatsQty: 5 },
+    { id: 2, name: 'START', val: 'start', price: 1000, chatsQty: 15 },
+    { id: 3, name: 'PRO', val: 'pro', price: 5000, chatsQty: 40 },
+    { id: 4, name: 'VIP', val: 'vip', price: 12000, chatsQty: null }
+  ] as const
+
+  const periods = [
+    { id: 1, name: 'subscribe__1month', name_in_days: 'subscribe__30days', value: 30, sale: 0 },
+    { id: 2, name: 'subscribe__3months', name_in_days: 'subscribe__91days', value: 91, sale: 5 },
+    { id: 3, name: 'subscribe__1year', name_in_days: 'subscribe__365days', value: 365, sale: 15 }
+  ]
+
+  const selectPeriod = ref(periods[1]?.value)
+
+  const newPlan = ref(plans[1])
+
+  interface CurrentPlan {
+    plan: string
+    exp: number | null
+    active_chats: number | null
+  }
+  
+  const currentPlan =  ref<CurrentPlan>({ // temp, this get from api
+    plan: plans[0].val,
+    active_chats: 20,
+    exp: Date.now() / 1000 + 500000
+  })
+
+  interface CurrentPlanData extends CurrentPlan {
+    price: number | null
+  }
+  
+  const currentPlanData = computed((): CurrentPlanData => ({
+    active_chats: currentPlan.value.active_chats ?? null,
+    exp: currentPlan.value.exp ?? null,
+    ...plans.find(el=> el?.val === currentPlan.value.plan)
+  }))
+
+  const { t } = useI18n()
+  const textBtn = computed(() => {
+    const prorata = currentPlanData.value.price
+      ? Math.ceil(
+        currentPlanData.value?.price / 30 * 
+        date.getDateDiff(new Date(currentPlan.value.exp * 1000), Date.now())
+      )
+      : 0
+    const k = 1 - Number(periods.find(el => el.value === selectPeriod.value)?.sale) / 100
+    const stars = formatNumber(
+      Number(selectPeriod.value) *
+      Number(newPlan.value?.price) *
+      k - prorata
+    )
+    const newDateExp = date.addToDate(Date.now(), { months: Number(selectPeriod.value) })
+
+    return t('subscribe__pay') + ' ⭐' + 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, " ")
+  }
+
+  onUnmounted(() => tg.MainButton.hide())
+
+  watch(textBtn, () => tg.MainButton.setText(textBtn.value),
+  { immediate: true })
 
 </script>
 

src/pages/account/TermsPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <doc-block type="terms_of_use"/>
+  <doc-block title="terms_of_use__title" document-name="Terms_of_use"/>
 </template>
 
 <script setup lang="ts">

src/pages/project-page/ProjectPageUsers.vue

@@ -42,6 +42,11 @@
               />
             </q-item-section>
             <q-item-section>
+              <q-item-label lines="1" v-if="!item.is_terms_accepted">
+                <q-badge  color="secondary">
+                  {{ $t('user_block__user_pending') }}
+                </q-badge>
+              </q-item-label>
               <q-item-label lines="1" class="text-bold" v-if="item.section1">
                 {{item.section1}}
               </q-item-label>
@@ -239,6 +244,7 @@
   import { useUsersStore } from 'stores/users'
   import { useCompaniesStore } from 'stores/companies'
   import { useUserSection } from 'composables/useUserSection'
+  
   defineOptions({ inheritAttrs: false })
 
   const router = useRouter()
@@ -261,7 +267,7 @@
     ...el,
     ...userSection(el),
     companyName: el.company_id && companiesStore.companyById(el.company_id)
-      ? companiesStore.companyById(el.company_id)?.name 
+      ? companiesStore.companyById(el.company_id)?.name ?? null
       : null
   })))