adata-ui 2.1.40-beta.9 → 2.1.40

package/components/features/payment/banner/PaymentBanner.vue

@@ -1,108 +1,108 @@
-<script setup lang="ts">
-import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
-import {removeTrailingSlash} from "#adata-ui/components/utils/removeTrailingSlash";
-import { useUrls } from '#adata-ui/composables/useUrls'
-
-const props = defineProps<{
-  balance?: number
-}>()
-
-const { $toast } = useNuxtApp()
-
-const { t, locale } = useI18n()
-const accessToken = useCookie('accessToken')
-
-const { topUpSidePanel } = usePayment()
-const { commonAuth } = useAppConfig()
-
-const { landing } = useUrls()
-const userApiURL = commonAuth.userApiURL
-
-const isLoading = ref(false)
-
-async function updateUserRate() {
-  try {
-    isLoading.value = true
-    await $fetch(`${removeTrailingSlash(userApiURL)}/user/rate`, {
-      method: 'PUT',
-      credentials: 'include',
-      headers: {
-        Authorization: `Bearer ${accessToken.value}`,
-        lang: locale.value,
-      },
-      body: {
-        rate_code: 'basic_plus',
-      },
-    })
-    window.location.reload()
-  }
-  catch (error) {
-    $toast.error(error.data.message)
-  }
-  finally {
-    isLoading.value = false
-  }
-}
-
-function onBuy() {
-  if (props.balance && props.balance >= 1000) {
-    updateUserRate()
-  }
-  else {
-    topUpSidePanel.value = true
-  }
-}
-
-</script>
-
-<template>
-  <div class="gradient flex justify-between rounded-lg p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
-    <div>
-      <p class="mb-2 font-semibold">
-        {{ t('payment.banner.title') }}
-      </p>
-      <i18n-t
-        keypath="payment.banner.subtitle"
-        tag="p"
-        class="text-sm text-gray-600 dark:text-gray-200"
-      >
-        <template #tariffs>
-          <nuxt-link
-            class="font-semibold text-blue-700 dark:text-blue-500"
-            :to="buildLocalizedUrl(locale, landing, '/tariffs')"
-          >
-            {{ t('payment.banner.tariffs') }}
-          </nuxt-link>
-        </template>
-      </i18n-t>
-    </div>
-
-    <a-button
-      size="md"
-      class="self-end"
-      @click="onBuy"
-    >
-      {{ t('actions.buy') }}
-    </a-button>
-  </div>
-</template>
-
-<style scoped>
-.gradient {
-  background: linear-gradient(
-    239.71deg,
-    #B3D5F9 -7.48%,
-    #E6F1FD 39.62%,
-    #CCE2FB 85.82%
-  );
-}
-
-.dark .gradient {
-  background: linear-gradient(
-    239.71deg,
-    #17303F -7.48%,
-    #161617 39.62%,
-    #17303F 85.82%
-  );
-}
-</style>
+<script setup lang="ts">
+import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+import {removeTrailingSlash} from "#adata-ui/components/utils/removeTrailingSlash";
+import { useUrls } from '#adata-ui/composables/useUrls'
+
+const props = defineProps<{
+  balance?: number
+}>()
+
+const { $toast } = useNuxtApp()
+
+const { t, locale } = useI18n()
+const accessToken = useCookie('accessToken')
+
+const { topUpSidePanel } = usePayment()
+const { commonAuth } = useAppConfig()
+
+const { landing } = useUrls()
+const userApiURL = commonAuth.userApiURL
+
+const isLoading = ref(false)
+
+async function updateUserRate() {
+  try {
+    isLoading.value = true
+    await $fetch(`${removeTrailingSlash(userApiURL)}/user/rate`, {
+      method: 'PUT',
+      credentials: 'include',
+      headers: {
+        Authorization: `Bearer ${accessToken.value}`,
+        lang: locale.value,
+      },
+      body: {
+        rate_code: 'basic_plus',
+      },
+    })
+    window.location.reload()
+  }
+  catch (error) {
+    $toast.error(error.data.message)
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+function onBuy() {
+  if (props.balance && props.balance >= 1000) {
+    updateUserRate()
+  }
+  else {
+    topUpSidePanel.value = true
+  }
+}
+
+</script>
+
+<template>
+  <div class="gradient flex justify-between rounded-md p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+    <div>
+      <p class="mb-2 text-h5">
+        {{ t('payment.banner.title') }}
+      </p>
+      <i18n-t
+        keypath="payment.banner.subtitle"
+        tag="p"
+        class="text-body-md text-gray-600 dark:text-gray-200"
+      >
+        <template #tariffs>
+          <nuxt-link
+            class="font-semibold text-blue-700 dark:text-blue-500"
+            :to="buildLocalizedUrl(locale, landing, '/tariffs')"
+          >
+            {{ t('payment.banner.tariffs') }}
+          </nuxt-link>
+        </template>
+      </i18n-t>
+    </div>
+
+    <a-button
+      size="md"
+      class="self-end"
+      @click="onBuy"
+    >
+      {{ t('actions.buy') }}
+    </a-button>
+  </div>
+</template>
+
+<style scoped>
+.gradient {
+  background: linear-gradient(
+    239.71deg,
+    #B3D5F9 -7.48%,
+    #E6F1FD 39.62%,
+    #CCE2FB 85.82%
+  );
+}
+
+.dark .gradient {
+  background: linear-gradient(
+    239.71deg,
+    #17303F -7.48%,
+    #161617 39.62%,
+    #17303F 85.82%
+  );
+}
+</style>

package/components/features/payment/banner/UpSellBanner.vue

@@ -1,125 +1,125 @@
-<script setup lang="ts">
-import { useUrls } from '#adata-ui/composables/useUrls'
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
-import { PAGES } from '#adata-ui/shared/constans/pages'
-
-const props = defineProps<{
-  code: string
-  balance: number
-}>()
-
-const emit = defineEmits<{
-  (e: 'closeBanner'): void
-}>()
-
-const { landing } = useUrls()
-const { $toast } = useNuxtApp()
-
-const { t, locale } = useI18n()
-const accessToken = useCookie('accessToken')
-
-const { commonAuth } = useAppConfig()
-
-const userApiURL = commonAuth.userApiURL
-
-const isLoading = ref(false)
-
-const tariffCodes = {
-  active_usage_basic: {
-    tariff: 'adata',
-  },
-  regular_usage_basic: {
-    tariff: 'adata',
-  },
-  overpayment_basic: {
-    tariff: 'adata',
-  },
-  regular_usage_adata: {
-    tariff: 'adata_year',
-  },
-  overpayment_adata: {
-    tariff: 'adata_year',
-  },
-}
-
-async function updateUserRate() {
-  try {
-    isLoading.value = true
-    await $fetch(`${removeTrailingSlash(userApiURL)}/user/rate`, {
-      method: 'PUT',
-      credentials: 'include',
-      headers: {
-        Authorization: `Bearer ${accessToken.value}`,
-        lang: locale.value,
-      },
-      body: {
-        rate_code: tariffCodes[props.code].tariff
-      },
-    })
-    window.location.reload()
-  }
-  catch (error) {
-    $toast.error(error.data.message)
-  }
-  finally {
-    isLoading.value = false
-  }
-}
-
-function onBuy() {
-  navigateToLocalizedPage({locale, projectUrl: landing, path: PAGES.tariffs, target: '_blank'})
-}
-</script>
-
-<template>
-  <div class="relative gradient flex justify-between rounded-lg p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
-    <div class="flex flex-col gap-3">
-      <p class="font-semibold">
-        {{ t(`payment.upsell.${code}.title`) }}
-      </p>
-
-      <i18n-t
-        :keypath="`payment.upsell.${code}.description`"
-        tag="p"
-        class="text-sm whitespace-pre-line"
-      >
-        <template #highlight>
-          <span class="font-semibold">{{ t(`payment.upsell.${code}.highlight`) }}</span>
-        </template>
-      </i18n-t>
-    </div>
-
-    <a-icon-x-mark
-      class="absolute top-4 right-4 size-4 cursor-pointer"
-      @click="emit('closeBanner')"
-    />
-
-    <a-button
-      size="md"
-      class="self-end"
-      @click="onBuy"
-    >
-      {{ t('payment.upsell.goToAdataPlan') }}
-    </a-button>
-  </div>
-</template>
-
-<style scoped>
-.gradient {
-  background: linear-gradient(
-    239.71deg,
-    #B3D5F9 -7.48%,
-    #E6F1FD 39.62%,
-    #CCE2FB 85.82%
-  );
-}
-
-.dark .gradient {
-  background: linear-gradient(
-    239.71deg,
-    #17303F -7.48%,
-    #161617 39.62%,
-    #17303F 85.82%
-  );
-}
-</style>
+<script setup lang="ts">
+import { useUrls } from '#adata-ui/composables/useUrls'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { PAGES } from '#adata-ui/shared/constans/pages'
+
+const props = defineProps<{
+  code: string
+  balance: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'closeBanner'): void
+}>()
+
+const { landing } = useUrls()
+const { $toast } = useNuxtApp()
+
+const { t, locale } = useI18n()
+const accessToken = useCookie('accessToken')
+
+const { commonAuth } = useAppConfig()
+
+const userApiURL = commonAuth.userApiURL
+
+const isLoading = ref(false)
+
+const tariffCodes = {
+  active_usage_basic: {
+    tariff: 'adata',
+  },
+  regular_usage_basic: {
+    tariff: 'adata',
+  },
+  overpayment_basic: {
+    tariff: 'adata',
+  },
+  regular_usage_adata: {
+    tariff: 'adata_year',
+  },
+  overpayment_adata: {
+    tariff: 'adata_year',
+  },
+}
+
+async function updateUserRate() {
+  try {
+    isLoading.value = true
+    await $fetch(`${removeTrailingSlash(userApiURL)}/user/rate`, {
+      method: 'PUT',
+      credentials: 'include',
+      headers: {
+        Authorization: `Bearer ${accessToken.value}`,
+        lang: locale.value,
+      },
+      body: {
+        rate_code: tariffCodes[props.code].tariff
+      },
+    })
+    window.location.reload()
+  }
+  catch (error) {
+    $toast.error(error.data.message)
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+function onBuy() {
+  navigateToLocalizedPage({locale, projectUrl: landing, path: PAGES.tariffs, target: '_blank'})
+}
+</script>
+
+<template>
+  <div class="relative gradient flex justify-between rounded-md p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+    <div class="flex flex-col gap-3">
+      <p class="text-h5">
+        {{ t(`payment.upsell.${code}.title`) }}
+      </p>
+
+      <i18n-t
+        :keypath="`payment.upsell.${code}.description`"
+        tag="p"
+        class="text-body-md whitespace-pre-line"
+      >
+        <template #highlight>
+          <span class="font-semibold">{{ t(`payment.upsell.${code}.highlight`) }}</span>
+        </template>
+      </i18n-t>
+    </div>
+
+    <a-icon-x-mark
+      class="absolute top-4 right-4 size-4 cursor-pointer"
+      @click="emit('closeBanner')"
+    />
+
+    <a-button
+      size="md"
+      class="self-end"
+      @click="onBuy"
+    >
+      {{ t('payment.upsell.goToAdataPlan') }}
+    </a-button>
+  </div>
+</template>
+
+<style scoped>
+.gradient {
+  background: linear-gradient(
+    239.71deg,
+    #B3D5F9 -7.48%,
+    #E6F1FD 39.62%,
+    #CCE2FB 85.82%
+  );
+}
+
+.dark .gradient {
+  background: linear-gradient(
+    239.71deg,
+    #17303F -7.48%,
+    #161617 39.62%,
+    #17303F 85.82%
+  );
+}
+</style>