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

package/components/navigation/header/ProfileMenu.vue

@@ -1,167 +1,196 @@
-<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'
-
-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
-  balance: number
-  email?: string
-  replenish?: string
-  oldVersion?: string
-}
-
-const formattedBalance = computed(() => props.balance.toLocaleString('ru-RU'))
-
-const { t } = useI18n()
-
-const items = useHeaderMenuLinks()
-
-const { topUpSidePanel, rateId } = usePayment()
-
-function onReplenish() {
-  rateId.value = ''
-  topUpSidePanel.value = true
-}
-</script>
-
-<template>
-  <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>
-
-          <p
-            v-if="email"
-            class="mt-1 truncate text-body-sm text-white/75 lg:hidden"
-            data-test-id="profile-menu-email"
-          >
-            {{ 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="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>
-
-    <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="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>
-        <a-color-mode />
-      </div>
-
-      <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="size-4 shrink-0" />
-        <span>{{ t('header.profile.logout') }}</span>
-      </button>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+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 isLargeScreen = useMediaQuery('(min-width: 1024px)')
+
+interface Props {
+  rate: string
+  daysRemaining: number
+  limitRemaining: number
+  balance: number
+  replenish?: string
+  oldVersion?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  daysRemaining: 0,
+  limitRemaining: 0
+})
+
+defineEmits(['logout'])
+
+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
+  // }
+  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>
+          <a-status-badge
+            type="success"
+            class="!px-3 font-semibold text-white dark:text-gray-900"
+            size="sm"
+          >
+            {{ t('header.profile.connected') }}
+          </a-status-badge>
+        </div>
+        <div class="flex min-w-[90px] flex-col">
+          <div class="font-semibold">
+            {{ t('header.profile.balance') }}
+          </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>
+        </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>
+      <div
+        v-if="!isLargeScreen"
+        class="my-4 flex items-center justify-between text-sm"
+      >
+        <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"
+        data-test-id="logout-button"
+        @click="$emit('logout')"
+      >
+        <icon-logout class="h-5 w-5" />
+        <span>
+          {{ t('header.profile.logout') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.gradient-bg {
+  background: linear-gradient(236.46deg, #479fff -2.39%, #0070eb 79.1%);
+}
+</style>

package/components/navigation/header/TopHeader.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import ArrowCurrency from '#adata-ui/icons/currency/currency-down.vue'
+import UsdIcon from '#adata-ui/icons/currency/currency-usd.vue'
+import EurIcon from '#adata-ui/icons/currency/currency-eur.vue'
+import RubIcon from '#adata-ui/icons/currency/currency-rub.vue'
+import YuanIcon from '#adata-ui/icons/currency/currency-yuan.vue'
+
+interface Props {
+  daysRemaining: number
+  limitRemaining: number
+  moduleName: string
+  isAuthenticated: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  moduleName: 'counterparty'
+})
+
+const { t, locale } = useI18n()
+
+interface ResponseData<DataResult> {
+  success: boolean
+  message: string
+  data: DataResult
+}
+
+interface Currency {
+  buy: number
+  buy_state: string
+  currency: 'USD' | 'EUR' | 'RUB' | 'CNY'
+  sell: number
+  sell_state: string
+}
+
+interface Currencies {
+  currencies: Currency[]
+  request_time: string
+  time: string
+}
+
+const currencies = ref<Currency[]>([])
+const systemMessage = ref(null)
+const isOpenNotification = ref(false)
+const message = useCookie('message')
+
+const { myLayer } = useAppConfig()
+const env = myLayer.mode
+
+const mode = computed(() => {
+  if (props.moduleName === 'pk') {
+    return 'counterparty'
+  } else {
+    return props.moduleName
+  }
+})
+
+const fetchCurrencies = async () => {
+  try {
+    const response = await fetch('https://users.adata.kz/api/v1/information/currency')
+    const { data } = await response.json()
+
+    if (data.currencies) {
+      currencies.value = data.currencies
+    }
+  } catch (e) {
+    console.error(e.message)
+  }
+}
+
+const Symbols = {
+  USD: UsdIcon,
+  EUR: EurIcon,
+  RUB: RubIcon,
+  CNY: YuanIcon
+}
+
+const computedClass = (state: string) =>
+  state === 'UP' ? 'text-green-400 rotate-180' : 'text-red-400'
+
+const fetchNotification = async () => {
+  try {
+    if (message.value === undefined) {
+      const link = `https://users.${env}.kz/api/v1/system-messages/active-list/?module_name=${mode.value}`
+      const response = await fetch(link)
+      const { data } = await response.json()
+
+      if (data.details?.length) {
+        switch (locale.value) {
+          case 'ru':
+            systemMessage.value = data.details[0].message
+            break
+          case 'en':
+            systemMessage.value = data.details[0].message_en
+            break
+          case 'kk':
+            systemMessage.value = data.details[0].message_kz
+            break
+        }
+        isOpenNotification.value = true
+      }
+    }
+  } catch (e) {
+    console.error(e.message)
+  }
+}
+
+onMounted(() => {
+  fetchNotification()
+  fetchCurrencies()
+})
+
+const closeMessage = () => {
+  message.value = false
+  isOpenNotification.value = false
+}
+</script>
+
+<template>
+  <div class="min-h-[40px]" :class="[isOpenNotification && systemMessage ? '' : 'hidden lg:block']">
+    <client-only>
+      <transition name="fade">
+        <div
+          v-if="isOpenNotification && systemMessage"
+          class="bg-[#FFF5E6] px-2 py-3 text-[#FCA204] dark:bg-[#161617] md:px-0"
+        >
+          <div class="a-container flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <a-icon-info-circle
+                class="max-h-[16px] w-full max-w-[16px] stroke-orange-500 dark:stroke-orange-500"
+              />
+              <span class="text-sm font-semibold text-orange-500">{{ systemMessage }}</span>
+            </div>
+            <a-icon-x-mark
+              class="max-h-[16px] w-full max-w-[16px] cursor-pointer stroke-orange-500"
+              @click="closeMessage"
+            />
+          </div>
+        </div>
+      </transition>
+      <div
+        v-if="!isOpenNotification || !systemMessage"
+        class="hidden min-h-10 bg-gray-50 dark:bg-gray-950 lg:block"
+      >
+        <div class="a-container flex justify-between py-2 items-center text-sm">
+          <div class="flex items-center leading-[24px]" data-test-id="header-currency-bar">
+            <div v-for="currency in currencies" :key="currency.currency" class="mr-4 flex gap-2">
+              <div class="flex items-center">
+                <component
+                  :is="Symbols[currency.currency]"
+                  class="mr-2 size-4 rounded-sm border border-solid border-[#E0E3E6] dark:border-[#2B2B2C]"
+                />
+                {{ currency.buy }}
+                <div :class="computedClass(currency.sell_state)">
+                  <arrow-currency />
+                </div>
+              </div>
+              <div class="flex items-center">
+                {{ currency.sell }}
+                <div :class="computedClass(currency.sell_state)">
+                  <arrow-currency />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-if="isAuthenticated" class="flex items-center gap-5">
+            <div v-if="limitRemaining != null || limitRemaining != undefined">
+              <span class="mr-2 text-xs">{{ t('header.top.requestLimit') }}</span>
+              <a-status-badge size="sm" data-test-id="header-daily-requests-count">
+                {{ limitRemaining }}
+              </a-status-badge>
+            </div>
+            <div v-if="daysRemaining">
+              <span class="mr-2 text-xs">{{ t('header.top.daysLeft') }}</span>
+              <a-status-badge size="sm" data-test-id="header-tariff-days-remaining-count">
+                {{ daysRemaining }}
+              </a-status-badge>
+            </div>
+          </div>
+        </div>
+      </div>
+    </client-only>
+  </div>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: 0.1s ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+  top: 0px;
+}
+</style>

package/components/navigation/header/types.ts

@@ -1,28 +1,28 @@
-export type NavChild = {
-  key: string,
-  name: string
-  items: NavChildItem[]
-}
-export type NavChildItem = {
-  title: string
-  subtitle?: string
-  icon?: any
-  to: string
-}
-
-export type NavLink = {
-  label: string
-  to: string
-  items?: NavChild[],
-  options?:any
-  icon?: any
-}
-export type ProjectKeys =
-  | 'counterparty'
-  | 'pk'
-  | 'work'
-  | 'tenders'
-  | 'fines'
-  | 'analytics'
-  | 'fea'
-  | 'compliance';
+export type NavChild = {
+  key: string,
+  name: string
+  items: NavChildItem[]
+}
+export type NavChildItem = {
+  title: string
+  subtitle?: string
+  icon?: any
+  to: string
+}
+
+export type NavLink = {
+  label: string
+  to: string
+  items?: NavChild[],
+  options?:any
+  icon?: any
+}
+export type ProjectKeys =
+  | 'counterparty'
+  | 'pk'
+  | 'work'
+  | 'tenders'
+  | 'fines'
+  | 'analytics'
+  | 'fea'
+  | 'compliance';