adata-ui 2.1.40-beta.18 → 2.1.40-beta.19

package/components/navigation/header/ProfileMenu.vue

@@ -1,196 +1,167 @@
 <script setup lang="ts">
+import { useHeaderMenuLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
+import Calendar from '#adata-ui/icons/calendar.vue'
+import Gauge from '#adata-ui/icons/gauge.vue'
 import IconLogout from '#adata-ui/icons/logout.vue'
 import { useMediaQuery } from '@vueuse/core'
-import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
-import { useHeaderMenuLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
+
+const props = withDefaults(defineProps<Props>(), {
+  daysRemaining: 0,
+  limitRemaining: 0,
+})
+
+defineEmits(['logout'])
 
 const isLargeScreen = useMediaQuery('(min-width: 1024px)')
 
 interface Props {
   rate: string
-  daysRemaining: number
-  limitRemaining: number
+  daysRemaining?: number
+  limitRemaining?: number
   balance: number
+  email?: string
   replenish?: string
   oldVersion?: string
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  daysRemaining: 0,
-  limitRemaining: 0
-})
-
-defineEmits(['logout'])
+const formattedBalance = computed(() => props.balance.toLocaleString('ru-RU'))
 
 const { t } = useI18n()
 
-const { locale } = useI18n()
-
-// const { topUpSidePanel } = usePayment()
-
 const items = useHeaderMenuLinks()
 
 const { topUpSidePanel, rateId } = usePayment()
 
-const onReplenish = () => {
-  // if (myLayer.authMode === 'locale') {
-  //   topUpSidePanel.value = true
-  //   return
-  // }
+function onReplenish() {
   rateId.value = ''
   topUpSidePanel.value = true
 }
 </script>
 
 <template>
-  <div class="max-w-full lg:w-[300px]">
-    <!--    desktop  -->
-    <div
-      class="gradient-bg hidden px-4 py-4 text-white dark:text-gray-900 lg:block lg:rounded-t-[0.5rem] lg:px-8 lg:dark:text-white"
-    >
-      <div class="hidden text-sm lg:block">
-        {{ t('header.profile.tariff') }}
-      </div>
-      <div class="flex items-center justify-between gap-4 lg:mt-2">
-        <div class="flex items-center justify-between lg:w-full">
-          <span class="mr-2 font-semibold lg:text-lg">{{ rate }}</span>
-          <a-status-badge
-            type="success"
-            class="!px-3 font-semibold text-white"
-            size="sm"
-          >
-            {{ t('header.profile.connected') }}
-          </a-status-badge>
-        </div>
-        <span class="bg-deepblue ml-2 rounded-xl px-2 py-1 text-xs lg:hidden">{{ balance.toLocaleString('RU-ru') }} ₸</span>
-      </div>
-      <div class="mt-2 hidden items-center justify-between lg:flex lg:flex-col">
-        <div class="items-center justify-between lg:flex lg:w-full text-xs">
-          {{ t('header.profile.currentBalance') }}
-          <span class="ml-2 rounded-xl bg-deepblue-900 px-2 py-1">{{ balance.toLocaleString('RU-ru') }} ₸</span>
-        </div>
-        <a-button
-          size="sm"
-          class="w-full mt-4"
-          view="outline"
-          variant="ghost"
-          @click="onReplenish"
-        >
-          <a-icon-plus-circle />
-          {{ t('header.profile.addBalance') }}
-        </a-button>
-      </div>
-    </div>
-    <!--    mobile  -->
-    <div class="gradient-bg px-4 py-4 text-white dark:text-gray-900 lg:hidden">
-      <div class="flex justify-between gap-4 lg:mt-2">
-        <div class="flex flex-col items-center">
-          <div class="font-semibold">
-            {{ rate }}
+  <div class="w-full overflow-hidden bg-white text-deepblue-900 dark:bg-gray-900 dark:text-gray-200 lg:w-[320px] lg:rounded-lg lg:border lg:border-gray-200 lg:dark:border-gray-800">
+    <div class="p-2">
+      <div class="relative overflow-hidden rounded-lg bg-gradient-to-br from-blue-700/95 to-blue-500/85 p-3 text-white">
+        <div class="pointer-events-none absolute -right-8 -top-10 size-28 rounded-full bg-white/20 blur-2xl" aria-hidden="true" />
+
+        <div class="relative">
+          <p class="text-overline-medium uppercase text-white/70">
+            {{ t('header.profile.tariff') }}
+          </p>
+          <div class="mt-0.5 flex items-center justify-between gap-2">
+            <p class="truncate text-h4">
+              {{ rate }}
+            </p>
+            <span class="inline-flex shrink-0 items-center gap-1.5 rounded-full px-2 py-0.5 text-body-sm-medium text-white ring-1 ring-inset ring-white/20">
+              <span class="relative flex size-1.5 items-center justify-center">
+                <span class="absolute inline-flex size-full animate-ping rounded-full bg-green-400/80" />
+                <span class="relative inline-flex size-1.5 rounded-full bg-green-400" />
+              </span>
+              {{ t('header.profile.connected') }}
+            </span>
           </div>
-          <a-status-badge
-            type="success"
-            class="!px-3 font-semibold text-white dark:text-gray-900"
-            size="sm"
+
+          <p
+            v-if="email"
+            class="mt-1 truncate text-body-sm text-white/75 lg:hidden"
+            data-test-id="profile-menu-email"
           >
-            {{ t('header.profile.connected') }}
-          </a-status-badge>
-        </div>
-        <div class="flex min-w-[90px] flex-col">
-          <div class="font-semibold">
-            {{ t('header.profile.balance') }}
+            {{ email }}
+          </p>
+
+          <div class="my-2 h-px bg-white/15" />
+
+          <div class="flex items-center justify-between gap-2">
+            <span class="text-body-sm text-white/80">{{ t('header.profile.currentBalance') }}</span>
+            <span class="text-body-lg font-bold tabular-nums">{{ formattedBalance }} ₸</span>
           </div>
-          <div class="flex gap-1">
-            <a-status-badge
-              size="sm"
-              class="!px-3 font-semibold text-white dark:!bg-[#E3E5E8] dark:text-gray-900"
-              type="gray"
-            >
-              {{ balance.toLocaleString('RU-ru') }} ₸
-            </a-status-badge>
-            <button
-              class="flex h-[23px] w-[23px] items-center justify-center rounded-md bg-white text-deepblue-900 dark:bg-gray-900 dark:text-[#E3E5E8]"
-              @click="onReplenish"
-            >
-              <a-icon-plus
-                width="16px"
-                height="16px"
-              />
-            </button>
+
+          <div class="mt-2 grid grid-cols-2 gap-2 lg:hidden">
+            <div class="flex items-center gap-2 rounded-md px-2 py-1.5 ring-1 ring-inset ring-white/15">
+              <gauge class="size-4 shrink-0 text-white/80" />
+              <div class="min-w-0">
+                <p class="truncate text-body-sm uppercase leading-none text-white/70">
+                  {{ t('header.profile.requests') }}
+                </p>
+                <p class="mt-1 text-body-md font-bold tabular-nums leading-none">
+                  {{ limitRemaining }}
+                </p>
+              </div>
+            </div>
+            <div class="flex items-center gap-2 rounded-md px-2 py-1.5 ring-1 ring-inset ring-white/15">
+              <calendar class="size-4 shrink-0 text-white/80" />
+              <div class="min-w-0">
+                <p class="truncate text-body-sm uppercase leading-none text-white/70">
+                  {{ t('header.profile.daysLeft') }}
+                </p>
+                <p class="mt-1 text-body-md font-bold tabular-nums leading-none">
+                  {{ daysRemaining }}
+                </p>
+              </div>
+            </div>
           </div>
+
+          <button
+            type="button"
+            class="mt-2.5 inline-flex h-8 w-full cursor-pointer items-center justify-center gap-1.5 rounded-full bg-white px-3 text-body-md-strong text-blue-700 shadow-sm transition-all duration-150 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-600 active:scale-[0.98]"
+            @click="onReplenish"
+          >
+            <a-icon-plus-circle class="size-4" />
+            <span class="bg-gradient-to-r from-blue-700 to-blue-500 bg-clip-text text-transparent">
+              {{ t('header.profile.addBalance') }}
+            </span>
+          </button>
         </div>
       </div>
     </div>
-    <div class="rounded-b-[0.5rem] bg-white p-4 dark:bg-[#232324]">
-      <div class="mb-2 flex justify-between gap-2 lg:hidden">
-        <a-status-badge
-          size="sm"
-          class="w-full py-[6px] font-semibold"
-          :class="daysRemaining > 1 ? '': 'h-auto'"
-        >
-          <span>
-            {{ t('header.profile.requests') }}
-          </span>
-          {{ limitRemaining }}
-        </a-status-badge>
-        <a-status-badge
-          size="sm"
-          class="w-full py-[6px] font-semibold"
-          :class="daysRemaining > 1 ? '': 'flex flex-col h-fit'"
-        >
-          <span>
-            {{ t('header.profile.daysLeft') }}
-          </span>
-          {{ daysRemaining }}
-        </a-status-badge>
-      </div>
-      <div class="grid grid-cols-2 gap-2 lg:flex lg:flex-col">
-        <nuxt-link-locale
-          v-for="item in items"
-          :key="item.title"
-          class="hover:text-blue-700 dark:hover:text-blue-500 flex flex-col lg:flex-row lg:gap-3 items-center rounded-[6px] bg-gray-50 lg:bg-white lg:dark:bg-[#232324] lg:hover:bg-blue-100 py-[10px] text-center text-sm hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:bg-[#161617] active:dark:bg-[#E3E5E8] active:dark:text-gray-900 lg:px-4  lg:dark:hover:bg-gray-900"
-          :to="item.to"
-          :data-test-id="item?.dataTestId"
-          target="_blank"
-        >
-          <component
-            :is="item.icon"
-            class="h-[24px] w-[24px]"
-          />
-          <span class="dark:text-[#E3E5E8] text-[#2C3E50]">{{ item.title }}</span>
-        </nuxt-link-locale>
-      </div>
-      <div class="mt-2">
-        <a-change-version
-          v-if="oldVersion"
-          :url="oldVersion"
-        />
-      </div>
+
+    <nav class="flex flex-col px-2 pb-2">
+      <nuxt-link-locale
+        v-for="item in items"
+        :key="item.title"
+        class="group flex items-center gap-3 rounded-md px-2.5 py-2 text-body-md transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/60"
+        :to="item.to"
+        :data-test-id="item?.dataTestId"
+        target="_blank"
+      >
+        <!--        <span -->
+        <!--          class="flex size-8 shrink-0 items-center justify-center rounded-md border border-blue-100 bg-blue-50 text-blue-700 dark:border-blue-900/40 dark:bg-blue-900/30 dark:text-blue-400" -->
+        <!--        > -->
+        <!--          <component -->
+        <!--            :is="item.icon" -->
+        <!--            class="size-4" -->
+        <!--          /> -->
+        <!--        </span> -->
+        <span class="truncate text-deepblue-900 group-hover:text-blue-700 dark:text-gray-200 dark:group-hover:text-blue-400">
+          {{ item.title }}
+        </span>
+      </nuxt-link-locale>
+    </nav>
+
+    <div class="border-t border-gray-100 p-2 dark:border-gray-800">
+      <a-change-version
+        v-if="oldVersion"
+        :url="oldVersion"
+        class="mb-2"
+      />
+
       <div
         v-if="!isLargeScreen"
-        class="my-4 flex items-center justify-between text-sm"
+        class="flex items-center justify-between rounded-md px-2.5 py-2 text-body-md text-deepblue-900 dark:text-gray-200"
       >
-        <span>
-          {{ t('header.profile.colorScheme') }}
-        </span>
+        <span>{{ t('header.profile.colorScheme') }}</span>
         <a-color-mode />
       </div>
 
-      <div
-        class="flex items-center justify-center lg:justify-start gap-3 pb-2 pt-4 px-4 cursor-pointer text-red-500 hover:text-red-700 border-t"
+      <button
+        type="button"
+        class="flex w-full cursor-pointer items-center gap-3 rounded-md px-2.5 py-2 text-body-md-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
         data-test-id="logout-button"
         @click="$emit('logout')"
       >
-        <icon-logout class="h-5 w-5" />
-        <span>
-          {{ t('header.profile.logout') }}
-        </span>
-      </div>
+        <icon-logout class="size-4 shrink-0" />
+        <span>{{ t('header.profile.logout') }}</span>
+      </button>
     </div>
   </div>
 </template>
-<style scoped>
-.gradient-bg {
-  background: linear-gradient(236.46deg, #479fff -2.39%, #0070eb 79.1%);
-}
-</style>

package/components/navigation/header/SystemNotification.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { useCurrentModule } from '#adata-ui/composables/projectState'
+
+defineOptions({ name: 'SystemNotification' })
+
+interface SystemMessageDetail {
+  message: string
+  message_en: string
+  message_kz: string
+}
+
+const { locale } = useI18n()
+const { myLayer } = useAppConfig()
+const env = myLayer.mode
+
+const currentModule = useCurrentModule()
+const message = useCookie('message')
+
+const systemMessage = ref<string | null>(null)
+const isOpen = ref(false)
+
+const moduleName = computed(() => (currentModule.value === 'pk' ? 'counterparty' : currentModule.value))
+
+function localizedMessage(detail: SystemMessageDetail): string {
+  switch (locale.value) {
+    case 'en':
+      return detail.message_en
+    case 'kk':
+      return detail.message_kz
+    default:
+      return detail.message
+  }
+}
+
+async function fetchNotification() {
+  if (message.value !== undefined) return
+
+  try {
+    const res = await $fetch<{ data: { details?: SystemMessageDetail[] } }>(
+      `https://users.${env}.kz/api/v1/system-messages/active-list/`,
+      { query: { module_name: moduleName.value } },
+    )
+
+    const detail = res.data?.details?.[0]
+    if (detail) {
+      systemMessage.value = localizedMessage(detail)
+      isOpen.value = true
+    }
+  }
+  catch (e) {
+    console.error(e instanceof Error ? e.message : e)
+  }
+}
+
+function close() {
+  message.value = false
+  isOpen.value = false
+}
+
+onMounted(fetchNotification)
+</script>
+
+<template>
+  <client-only>
+    <transition name="system-notification">
+      <div
+        v-if="isOpen && systemMessage"
+        class="bg-[#FFF5E6] px-2 py-3 dark:bg-[#161617] md:px-0"
+      >
+        <div class="a-container flex items-center justify-between gap-4">
+          <div class="flex items-center gap-2">
+            <a-icon-info-circle
+              class="max-h-[16px] w-full max-w-[16px] shrink-0 stroke-orange-500"
+            />
+            <span class="text-body-md-strong text-orange-500">{{ systemMessage }}</span>
+          </div>
+          <a-icon-x-mark
+            class="max-h-[16px] w-full max-w-[16px] shrink-0 cursor-pointer stroke-orange-500"
+            @click="close"
+          />
+        </div>
+      </div>
+    </transition>
+  </client-only>
+</template>
+
+<style scoped>
+.system-notification-enter-active,
+.system-notification-leave-active {
+  transition:
+    opacity 200ms ease,
+    transform 200ms ease;
+  overflow: hidden;
+}
+
+.system-notification-enter-from,
+.system-notification-leave-to {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .system-notification-enter-active,
+  .system-notification-leave-active {
+    transition: none;
+  }
+}
+</style>

package/components/navigation/mobile-navigation/AMobileNavigation.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import IconMenu from '#adata-ui/icons/menu-filled.vue'
-import IconInvoice from '#adata-ui/icons/invoice.vue'
-import ContentNavigationModal from '#adata-ui/components/modals/ContentNavigationModal.vue'
+import type { ProjectKeys } from '#adata-ui/components/navigation/header/types'
 import ContactsMobileModel from '#adata-ui/components/modals/ContactsMobileModel.vue'
+import ContentNavigationModal from '#adata-ui/components/modals/ContentNavigationModal.vue'
 import ProfileMenu from '#adata-ui/components/navigation/header/ProfileMenu.vue'
-import type { ProjectKeys } from '#adata-ui/components/navigation/header/types'
+import AModal from '#adata-ui/components/overlays/modal/AModal.vue'
 import { useCurrentModule } from '#adata-ui/composables/projectState'
-import AModal from "#adata-ui/components/overlays/modal/AModal.vue";
 import { useUrls } from '#adata-ui/composables/useUrls'
+import IconInvoice from '#adata-ui/icons/invoice.vue'
+import IconMenu from '#adata-ui/icons/menu-filled.vue'
 
 interface Props {
   replenish?: string
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
   balance: 0,
   rate: 'Базовый',
   showLogIn: true,
-  module: 'pk'
+  module: 'pk',
 })
 const emit = defineEmits(['logout'])
 useCurrentModule().value = props.module
@@ -42,13 +42,13 @@ const items = [
   {
     label: 'modals.mobile_navigation.type_tariff',
     icon: IconInvoice,
-    value: 'tariff'
+    value: 'tariff',
   },
   {
     label: 'modals.mobile_navigation.type_main',
     icon: IconMenu,
-    value: 'main'
-  }
+    value: 'main',
+  },
 ]
 function onLogout() {
   emit('logout')
@@ -57,11 +57,14 @@ function onLogout() {
 watch(activeModule, (e) => {
   if (e === 'main') {
     isMain.value = true
-  } else if (e === 'contacts') {
+  }
+  else if (e === 'contacts') {
     isContacts.value = true
-  } else if (e === 'profile') {
+  }
+  else if (e === 'profile') {
     isProfile.value = true
-  } else if (e === 'tariff') {
+  }
+  else if (e === 'tariff') {
     navigateTo(`${landing}/tariffs`, { external: true })
   }
   activeModule.value = ''
@@ -72,9 +75,14 @@ watch(activeModule, (e) => {
   <div>
     <content-navigation-modal v-model="isMain" @push-main="isMain = false" />
     <contacts-mobile-model v-model="isContacts" @push-main="isContacts = false" />
-    <a-modal v-model="isProfile" @logout="isProfile = false" @push-main="isProfile = false">
+    <a-modal
+      v-model="isProfile"
+      @logout="isProfile = false"
+      @push-main="isProfile = false"
+    >
       <div class="-mx-4">
         <profile-menu
+          :email="email"
           :balance="balance"
           :days-remaining="daysRemaining"
           :limit-remaining="limitRemaining"
@@ -87,15 +95,15 @@ watch(activeModule, (e) => {
     </a-modal>
     <div ref="bottom" class="sticky bottom-0 z-[10000] lg:hidden">
       <a-bottom-navigation
+        v-model="activeModule"
         :is-authenticated="isAuthenticated"
         :email="email"
         :days-remaining="daysRemaining"
         :limit-remaining="limitRemaining"
         :rate="rate"
         :balance="balance"
-        @logout="onLogout"
-        v-model="activeModule"
         :items="items"
+        @logout="onLogout"
       />
     </div>
   </div>

package/components/navigation/pill-tabs/APillTabs.vue

@@ -115,14 +115,14 @@ const viewTypeValues: ViewType = {
 }
 
 const defaultClasses = (isDisabled: boolean) => [
-  'text-sm rounded-md outline-none select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
+  'text-sm rounded-sm outline-none select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
   isDisabled ? 'bg-deepblue-900/5 dark:bg-gray-200/5 text-gray-500 dark:text-gray-500' : '',
   props.view === 'transparent' && isDisabled ? 'bg-transparent' : '',
   viewTypeValues[props.view]['default'],
   props.block ? 'w-full' : ''
 ]
 const selectedClasses = () => [
-  'text-sm rounded-md select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
+  'text-sm rounded-sm select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
   viewTypeValues[props.view]['selected'],
   props.block ? 'w-full' : ''
 ]