adata-ui 2.1.39 → 2.1.40-beta

package/components/navigation/header/TopHeader.vue

@@ -1,196 +0,0 @@
-<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>