feat: telegram updated, invoices on partner page (#238)

* feat: telegram updated, invoices on partner page

* chore: type

* chore: logic

Author: hmbanan666

apps/atrium-telegram/app/app.vue

@@ -16,7 +16,7 @@
 
 <script setup lang="ts">
 import * as locales from '@nuxt/ui/locale'
-import { retrieveLaunchParams, themeParams } from '@telegram-apps/sdk-vue'
+import { retrieveLaunchParams, themeParams } from '@tma.js/sdk-vue'
 
 const { locale } = useI18n()
 
@@ -35,11 +35,14 @@ useHead({
 })
 
 // App
-const isDev = (retrieveLaunchParams().startParam === 'debug' || import.meta.env.DEV) ?? false
+const launchParams = retrieveLaunchParams()
+const { tgWebAppPlatform: platform } = launchParams
+const debug = (launchParams.tgWebAppStartParam || '').includes('debug') || import.meta.env.DEV
+
 await init({
-  debug: false,
-  eruda: isDev,
-  mockForMacOS: false,
+  debug,
+  eruda: debug && ['ios', 'android'].includes(platform),
+  mockForMacOS: platform === 'macos',
 })
 
 // Telegram

apps/atrium-telegram/app/components/PageContainer.vue

@@ -15,9 +15,9 @@
 </template>
 
 <script setup lang="ts">
-import { hideBackButton } from '@telegram-apps/sdk-vue'
+import { backButton } from '@tma.js/sdk-vue'
 
 const { back = true, class: className } = defineProps<{ back?: boolean, class?: string }>()
 
-onMounted(() => !back && hideBackButton())
+onMounted(() => !back && backButton.hide())
 </script>

apps/atrium-telegram/app/components/PartnerCard.vue

@@ -55,6 +55,14 @@
       </div>
 
       <div class="min-h-20 h-full px-4 pb-4 flex flex-col gap-2.5">
+        <UBadge
+          :color="partner.balance >= 0 ? 'neutral' : 'error'"
+          variant="soft"
+          size="md"
+          class="rounded-lg justify-center font-semibold"
+          :label="`Баланс ${new Intl.NumberFormat().format(partner.balance)} ₽`"
+        />
+
         <h3 class="text-sm/4 font-bold">
           {{ partner.legalEntity?.name }}
         </h3>

apps/atrium-telegram/app/components/PartnerInvoiceCard.vue

@@ -0,0 +1,78 @@
+<template>
+  <ActiveCard>
+    <Section>
+      <div class="flex flex-row gap-2 items-center">
+        <UIcon name="i-lucide-banknote-arrow-up" class="size-8 text-primary" />
+
+        <div v-if="invoice.status === 'paid'" class="flex flex-row items-center gap-1.5 text-primary">
+          <UIcon
+            name="i-lucide-bookmark-check"
+            class="size-8"
+          />
+          <p class="max-w-22 text-sm/4 font-bold">
+            Оплачено
+          </p>
+        </div>
+        <div v-else class="flex flex-row items-center gap-1.5 text-muted">
+          <UIcon
+            name="i-lucide-loader-circle"
+            class="size-8 motion-preset-spin motion-duration-4000"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-1">
+        <h3 class="text-xl/5 font-bold">
+          {{ new Intl.NumberFormat().format(invoice.total) }} ₽
+        </h3>
+
+        <div class="text-base/5 font-bold">
+          {{ getInfoByType(invoice.type) }}
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-1">
+        <div class="text-base/5">
+          {{ invoice.title }}
+        </div>
+
+        <div class="text-base/5 text-muted">
+          {{ invoice.description }}
+        </div>
+      </div>
+
+      <div class="text-sm/4 text-muted">
+        Создан {{ format(new Date(invoice.createdAt), 'd MMMM в HH:mm', { locale: ru }) }}
+      </div>
+    </Section>
+  </ActiveCard>
+</template>
+
+<script setup lang="ts">
+import type { Invoice } from '@roll-stack/database'
+import { format } from 'date-fns'
+import { ru } from 'date-fns/locale/ru'
+
+defineProps<{
+  invoice: Invoice
+}>()
+
+function getInfoByType(type: Invoice['type']) {
+  switch (type) {
+    case 'replenishment':
+      return 'Пополнение'
+    case 'royalties':
+      return 'Роялти'
+    case 'lump_sum_fee':
+      return 'Паушальный взнос'
+    case 'marketing_fee':
+      return 'Маркетинговый сбор'
+    case 'rospatent_fee':
+      return 'Роспатент'
+    case 'other':
+      return 'Другое'
+    default:
+      return 'Другое'
+  }
+}
+</script>

apps/atrium-telegram/app/components/StaffBlock.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { openTelegramLink, showPopup } from '@telegram-apps/sdk-vue'
+import { openTelegramLink, popup } from '@tma.js/sdk-vue'
 
 const { vibrate } = useFeedback()
 
@@ -80,8 +80,8 @@ async function handleClick(userId: string) {
     return
   }
 
-  if (showPopup.isAvailable()) {
-    const buttonId = await showPopup({
+  if (popup.show.isAvailable()) {
+    const buttonId = await popup.show({
       title: `${user.name} ${user.surname}`,
       message: user.caption,
       buttons: [

apps/atrium-telegram/app/composables/useBackButton.ts

@@ -1,4 +1,4 @@
-import { backButton } from '@telegram-apps/sdk-vue'
+import { backButton } from '@tma.js/sdk-vue'
 
 function _useBackButton() {
   let offClick: () => void = () => {}

apps/atrium-telegram/app/composables/useFeedback.ts

@@ -1,4 +1,4 @@
-import { hapticFeedback } from '@telegram-apps/sdk-vue'
+import { hapticFeedback } from '@tma.js/sdk-vue'
 
 function _useFeedback() {
   function vibrate(type: 'light' | 'success' | 'error' = 'light') {

apps/atrium-telegram/app/composables/useGyroscope.ts

@@ -1,5 +1,5 @@
-import type { EventListener } from '@telegram-apps/sdk-vue'
-import { off, on } from '@telegram-apps/sdk-vue'
+import type { EventListener } from '@tma.js/sdk-vue'
+import { off, on } from '@tma.js/sdk-vue'
 
 function _useGyroscope() {
   const x = ref(0)

apps/atrium-telegram/app/pages/partner/[partnerId]/index.vue

@@ -18,6 +18,10 @@
         <div class="flex flex-row gap-2 items-start text-base/5">
           <UIcon name="i-lucide-map" class="shrink-0 size-5" /> {{ partner?.city }}
         </div>
+
+        <div class="flex flex-row gap-2 items-start text-base/5">
+          <UIcon name="i-lucide-banknote" class="shrink-0 size-5" /> Баланс {{ new Intl.NumberFormat().format(partner?.balance ?? 0) }} ₽
+        </div>
       </div>
     </Section>
 
@@ -85,6 +89,22 @@
         </div>
       </div>
     </div>
+
+    <div v-if="invoices?.length" class="flex flex-col gap-2.5">
+      <div class="flex flex-row justify-between items-center">
+        <SectionTitle title="Счета" />
+      </div>
+
+      <div class="flex flex-col gap-4">
+        <div
+          v-for="invoice in invoices"
+          :key="invoice.id"
+          class="motion-preset-slide-left"
+        >
+          <PartnerInvoiceCard :invoice="invoice" />
+        </div>
+      </div>
+    </div>
   </PageContainer>
 </template>
 
@@ -99,4 +119,6 @@ const { params } = useRoute('partner-partnerId')
 const partnerStore = usePartnerStore()
 const partner = computed(() => partnerStore.partners.find((partner) => partner.id === params.partnerId))
 const partnerUser = computed(() => partner.value?.users.find((user) => user.type === 'partner'))
+
+const invoices = computed(() => partner.value?.invoices.toSorted((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()))
 </script>

apps/atrium-telegram/app/pages/partner/index.vue

@@ -2,12 +2,25 @@
   <PageContainer>
     <div class="flex flex-row gap-2.5 items-center">
       <SectionTitle title="Партнеры" />
-      <CounterBadge :value="partnerStore.partners.length" />
+      <CounterBadge :value="filteredPartners.length" />
+    </div>
+
+    <div class="grid grid-cols-1 gap-2.5 items-center">
+      <UInput
+        v-model="search"
+        size="xl"
+        trailing-icon="i-lucide-search"
+        placeholder="Найти..."
+        :ui="{
+          base: 'rounded-lg text-lg/5 font-bold ring-0',
+        }"
+        class="motion-preset-slide-down"
+      />
     </div>
 
     <div class="grid grid-cols-2 gap-2.5 items-start">
       <NuxtLink
-        v-for="partner in partnerStore.partners"
+        v-for="partner in filteredPartners"
         :key="partner.id"
         :to="`/partner/${partner.id}`"
         class="h-full motion-preset-slide-left"
@@ -20,4 +33,19 @@
 
 <script setup lang="ts">
 const partnerStore = usePartnerStore()
+
+const search = ref('')
+
+const filteredPartners = computed(() => {
+  if (!search.value) {
+    // Show all
+    return partnerStore.partners
+  }
+
+  const filteredBySearch = partnerStore.partners.filter((partner) => {
+    return partner.legalEntity?.name?.toLowerCase().includes(search.value.toLowerCase()) ?? false
+  })
+
+  return filteredBySearch
+})
 </script>