hl-core 0.0.8-beta.3 → 0.0.8-beta.31

package/components/Layout/SettingsPanel.vue

@@ -9,8 +9,16 @@
       <v-text-field v-model="$dataStore.user.fullName" :readonly="true" hide-details variant="plain" :label="$dataStore.user.roles?.join(', ')"></v-text-field>
       <i class="mdi mdi-account-outline text-2xl text-[#A0B3D8]"></i
     ></base-panel-item>
+    <base-panel-item v-if="$dataStore.isEFO" @click="changeBridge('lka')" class="cursor-pointer">
+      {{ $t('labels.lkaLong') }}
+      <i class="mdi mdi-chevron-right text-2xl text-[#A0B3D8]"></i
+    ></base-panel-item>
+    <base-panel-item v-if="$dataStore.isLKA" @click="changeBridge('efo')" class="cursor-pointer">
+      {{ $t('labels.efoLong') }}
+      <i class="mdi mdi-web text-2xl text-[#A0B3D8]"></i
+    ></base-panel-item>
     <base-panel-item
-      v-for="panelItem of dataStore.settings.items.filter(i => (typeof i.show === 'boolean' ? i.show : true))"
+      v-for="panelItem of dataStore.settings.items.filter(i => $dataStore.filters.show(i))"
       :key="panelItem.title!"
       class="cursor-pointer"
       @click="panelItem.action ? panelItem.action() : null"
@@ -18,23 +26,31 @@
       {{ panelItem.title }}
       <i v-if="panelItem.icon" class="mdi text-xl text-[#A0B3D8]" :class="[panelItem.icon]"></i>
     </base-panel-item>
-    <base-panel-item @click="dialog = true" class="cursor-pointer">
-      Выход
-      <i class="mdi mdi-logout text-xl text-[#A0B3D8]"></i>
+    <base-panel-item v-if="hasHistory" @click="openHistory" class="cursor-pointer">
+      {{ $t('historyStatementsAndStatuses') }}
+      <i class="mdi mdi-history text-xl text-[#A0B3D8]"></i>
     </base-panel-item>
-
-    <base-dialog v-model="dialog" :title="$t('dialog.exit')" :subtitle="$t('dialog.dataWillClear')" actions="default" @yes="logoutUser" @no="dialog = false"> </base-dialog
+    <base-panel-item @click="dialogSignOut = true" class="cursor-pointer" :class="[$libStyles.redText]">
+      {{ $t('buttons.logout') }}
+      <i class="mdi mdi-logout text-xl"></i>
+    </base-panel-item>
+    <div v-if="$dataStore.settings.open" class="absolute bottom-2 w-full flex items-center justify-center opacity-30 text-sm">
+      <p>{{ pkg.version }}</p>
+    </div>
+    <base-dialog v-model="dialogSignOut" :title="$t('dialog.exit')" :subtitle="$t('dialog.dataWillClear')" actions="default" @yes="logoutUser" @no="dialogSignOut = false">
+    </base-dialog
   ></base-drawer>
 </template>
 
 <script lang="ts" setup>
-const dialog = ref(false);
+import pkg from '@/package.json';
+const dialogSignOut = ref(false);
 const dataStore = useDataStore();
 
 const handleFontSize = (action: 'increase' | 'decrease') => {
   if (action === 'increase' && dataStore.fontSize < 24) dataStore.fontSize += 2;
   if (action === 'decrease' && dataStore.fontSize > 14) dataStore.fontSize -= 2;
-  if (dataStore.isEFO) {
+  if (dataStore.isBridge) {
     dataStore.sendToChild(constants.postActions.font, dataStore.fontSize);
   } else {
     dataStore.sendToParent(constants.postActions.font, dataStore.fontSize);
@@ -42,7 +58,21 @@ const handleFontSize = (action: 'increase' | 'decrease') => {
 };
 
 const logoutUser = async () => {
-  dialog.value = false;
+  dialogSignOut.value = false;
   await dataStore.logoutUser();
 };
+
+const hasHistory = computed(() => {
+  return !dataStore.isLKA;
+});
+
+const openHistory = async () => {
+  dataStore.sendToParent(constants.postActions.toStatementHistory, dataStore.isBridge ? '' : dataStore.product);
+};
+
+const changeBridge = async (toBridge: 'efo' | 'lka') => {
+  const bridgeUrl = import.meta.env[`VITE_${toBridge.toUpperCase()}_URL`] as string;
+  if (!bridgeUrl) return;
+  window.open(`${bridgeUrl}/#/Token?token=${dataStore.accessToken}`, '_blank');
+};
 </script>

package/components/Menu/MenuHover.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-menu v-if="items.length" :activator="activator" location="bottom center" :offset="top" transition="scale-transition">
+    <base-form-text-section class="p-4 border-[1px] flex flex-col gap-3 elevation-3 w-[250px]">
+      <div v-for="item of items.filter(i => $dataStore.filters.show(i))" :key="item.id">
+        <base-menu-nav-item :class="[$libStyles.textSimple]" :menu-item="item" @click="$emit(item.id)"></base-menu-nav-item>
+      </div>
+    </base-form-text-section>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { MenuItem } from '@/composables/classes';
+
+export default defineComponent({
+  props: {
+    items: {
+      type: Array as PropType<MenuItem[]>,
+      default: [],
+    },
+    activator: {
+      type: String,
+      default: 'parent',
+    },
+    top: {
+      type: Number,
+      default: 10,
+    },
+  },
+});
+</script>

package/components/Menu/MenuNav.vue

@@ -6,7 +6,7 @@
       :has-back="hasBack"
       :back-icon="backIcon"
       :has-more="hasMore"
-      :hide-more-on-lg="hideMoreOnLg"
+      :hide-more-on-lg="hideOnLg"
       :more-icon="moreIcon"
       @onBack="$emit('onBack')"
       @onMore="$emit('onMore')"
@@ -16,11 +16,11 @@
       <slot name="start"></slot>
       <base-fade-transition>
         <div v-if="$dataStore.menuItems && $dataStore.menuItems.length" class="flex flex-col gap-[10px]">
-          <div v-for="(item, index) of $dataStore.menuItems.filter(i => (typeof i.show === 'boolean' ? i.show : true))" :key="index">
+          <div v-for="(item, index) of $dataStore.menuItems.filter(i => $dataStore.filters.show(i))" :key="index">
             <base-menu-nav-item
               :menu-item="item"
               :selected="!!selected.title && !!item.title && selected.title === item.title"
-              :disabled="typeof item.disabled === 'boolean' ? item.disabled : false"
+              :disabled="$dataStore.filters.disabled(item)"
               @click.left="pickItem(item)"
               @click.middle="openTab(item)"
             >
@@ -32,10 +32,18 @@
       <slot name="end"></slot>
       <slot name="actions"></slot>
       <base-fade-transition>
-        <div v-if="$dataStore.buttons && $dataStore.buttons.length" class="flex flex-col gap-[10px] justify-self-end absolute bottom-5 lg:bottom-[30%] w-full pr-4">
+        <div v-if="$dataStore.buttons && $dataStore.buttons.length" class="flex flex-col gap-[10px] justify-self-end absolute bottom-5 lg:bottom-[10%] w-full pr-4">
           <div v-for="(item, index) of $dataStore.buttons" :key="index">
             <transition enter-active-class="animate__animated animate__fadeIn animate__faster" leave-active-class="animate__animated animate__fadeOut animate__faster">
-              <base-btn v-if="typeof item.show === 'boolean' ? item.show : true" :text="item.title!" :btn="item.color" :disabled="item.disabled" :loading="$dataStore.isButtonsLoading" @click="item.action"> </base-btn>
+              <base-btn
+                v-if="$dataStore.filters.show(item)"
+                :text="item.title!"
+                :btn="item.color"
+                :disabled="item.disabled"
+                :loading="$dataStore.isButtonsLoading"
+                @click="item.action"
+              >
+              </base-btn>
             </transition>
           </div></div
       ></base-fade-transition>
@@ -69,10 +77,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    hideMoreOnLg: {
-      type: Boolean,
-      default: false,
-    },
     moreIcon: {
       type: String,
       default: 'mdi-cog-outline',
@@ -84,7 +88,7 @@ export default defineComponent({
     const router = useRouter();
 
     const pickItem = async (item: MenuItem) => {
-      if (item.title !== dataStore.menu.selectedItem.title && (typeof item.disabled === 'boolean' ? !item.disabled : true)) {
+      if (item.title !== dataStore.menu.selectedItem.title && !dataStore.filters.disabled(item)) {
         if (typeof item.link === 'object') {
           if (item.link && 'name' in item.link) {
             await router.push(item.link as RouteLocationNormalized);
@@ -102,7 +106,20 @@ export default defineComponent({
       }
     };
 
-    return { pickItem, openTab };
+    const hideOnLg = computed(() => {
+      switch (router.currentRoute.value.name) {
+        case 'Insurance-Product':
+        case 'Menu':
+        case 'History':
+        case 'Main':
+        case 'taskId':
+          return false;
+        default:
+          return true;
+      }
+    });
+
+    return { pickItem, openTab, hideOnLg };
   },
 });
 </script>

package/components/Menu/MenuNavItem.vue

@@ -7,10 +7,13 @@
       $libStyles.textSimple,
       disabled ? 'cursor-not-allowed opacity-50' : '',
     ]"
-    class="h-[60px] flex items-center justify-between hover:bg-[#A0B3D8] hover:!text-white pl-4 cursor-pointer transition-all"
+    class="h-[60px] flex items-center justify-between hover:bg-[#A0B3D8] hover:!text-white pl-4 cursor-pointer transition-all group"
   >
     <span>{{ menuItem.title }}</span>
-    <i v-if="menuItem.icon" class="mdi text-xl pr-4" :class="[menuItem.icon]"></i>
+    <div class="flex items-center">
+      <i v-if="menuItem.icon" class="mdi text-xl pr-4" :class="[menuItem.icon]"></i>
+      <base-chip :chip="menuItem.chip"></base-chip>
+    </div>
     <v-tooltip v-if="menuItem.description" activator="parent" location="bottom">{{ menuItem.description }}</v-tooltip>
   </div>
 </template>

package/components/Pages/Anketa.vue

@@ -39,13 +39,17 @@
                 class="rounded-t-lg pl-6 py-1 cursor-pointer"
                 @click="openFirstPanel(question)"
               >
-                {{ $t('questionnaireType.pleaseAnswer').replace('{text}', `${secondQuestionList.length}`) }}
+                {{ $t('questionnaireType.pleaseAnswer', { text: secondQuestionList.length }) }}
               </div>
             </base-fade-transition>
             <span :class="[$libStyles.textTitle]" class="border-b-[1px] border-b-[#F3F6FC] p-6 flex items-center justify-between">
               {{ question.first.name }}
               <base-fade-transition>
-                <i v-if="question.first.answerName === 'Да' && secondQuestionList" class="mdi mdi-chevron-right text-2xl cursor-pointer" @click="openFirstPanel(question)"></i>
+                <i
+                  v-if="question.first.answerName === 'Да' && secondQuestionList && secondQuestionList.length"
+                  class="mdi mdi-chevron-right text-2xl cursor-pointer"
+                  @click="openFirstPanel(question)"
+                ></i>
               </base-fade-transition>
             </span>
             <div class="flex items-center justify-start gap-5 px-4 pt-4" :class="[$libStyles.textSimple]">
@@ -65,24 +69,30 @@
           </base-form-text-section>
         </section>
       </v-form>
-      <base-btn class="my-[14px] self-center" :loading="isButtonLoading" :disabled="formStore.isDisabled[whichSurvey]" @click="submitForm" :text="$t('buttons.save')"></base-btn>
+      <base-btn
+        class="my-[14px] self-center"
+        :loading="isButtonLoading"
+        :disabled="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
+        @click="submitForm"
+        :text="$t('buttons.save')"
+      ></base-btn>
     </section>
+    <v-btn
+      v-if="secondQuestionList && secondQuestionList.length && firstPanel"
+      icon="mdi mdi-close"
+      class="ml-3 !absolute z-10"
+      @click="
+        firstPanel = false;
+        secondPanel = false;
+      "
+    ></v-btn>
     <section
       ref="firstPanelSection"
       v-if="secondQuestionList && secondQuestionList.length && firstPanel"
-      class="flex flex-col px-[10px] py-[14px]"
+      class="flex flex-col px-[10px] pb-[14px]"
       :class="[$libStyles.scrollPage]"
     >
-      <v-btn
-        icon="mdi mdi-close"
-        variant="text"
-        size="large"
-        @click="
-          firstPanel = false;
-          secondPanel = false;
-        "
-      ></v-btn>
-      <section v-if="currentQuestion" :class="[$libStyles.blueBgLight, $libStyles.rounded]" class="mx-[10px] my-[14px] p-4 flex flex-col gap-4">
+      <section v-if="currentQuestion" :class="[$libStyles.blueBgLight, $libStyles.rounded]" class="mx-[10px] mt-[14px] p-4 flex flex-col gap-4">
         <base-form-text-section v-for="question in currentQuestion.second" :title="question.name" :key="question.name">
           <base-form-input
             v-if="question.definedAnswers === 'N'"
@@ -132,7 +142,15 @@ export default defineComponent({
     const firstPanel = ref<boolean>(false);
     const secondPanel = ref<boolean>(false);
     const surveyType = ref<'health' | 'critical'>('tab' in route.query && route.query.tab === 'criticalBase' ? 'critical' : 'health');
-    const whichSurvey = computed(() => (surveyType.value === 'health' ? 'surveyByHealthBase' : 'surveyByCriticalBase'));
+    const whichSurvey = computed(() =>
+      surveyType.value === 'health'
+        ? whichMember.value === 'insured'
+          ? 'surveyByHealthBase'
+          : 'surveyByHealthBasePolicyholder'
+        : whichMember.value === 'insured'
+        ? 'surveyByCriticalBase'
+        : 'surveyByCriticalBasePolicyholder',
+    );
     const firstQuestionList = ref<AnketaBody[]>();
     const secondQuestionList = ref<AnketaSecond[]>([]);
     const currentQuestion = ref<AnketaBody>();
@@ -140,6 +158,7 @@ export default defineComponent({
     const isPanelLoading = ref<boolean>(false);
     const searchQuery = ref<string>('');
 
+    const whichMember = computed(() => ('member' in route.query && !!route.query.member ? (route.query.member as string) : 'insured'));
     const scrollForm = (direction: 'up' | 'down') => {
       const scrollObject = { top: direction === 'up' ? 0 : screen.height * 10, behavior: 'smooth' };
       if (firstPanel.value) {
@@ -169,11 +188,11 @@ export default defineComponent({
           if (errors) {
             const errorText = errors.querySelector('.v-label.v-field-label');
             if (errorText) {
-              dataStore.showToaster('error', dataStore.t('toaster.errorFormField').replace('{text}', errorText.innerHTML?.replace(/[-<>!//.]/g, '')));
+              dataStore.showToaster('error', dataStore.t('toaster.errorFormField', { text: errorText.innerHTML?.replace(/[-<>!//.]/g, '') }));
             } else {
               const errorFieldText = errors.parentElement?.parentElement?.children[0].innerHTML;
               if (errorFieldText) {
-                dataStore.showToaster('error', dataStore.t('toaster.errorFormField').replace('{text}', errorFieldText));
+                dataStore.showToaster('error', dataStore.t('toaster.errorFormField', { text: errorFieldText }));
               }
             }
             errors.scrollIntoView({
@@ -255,9 +274,10 @@ export default defineComponent({
       await dataStore.getQuestionList(
         surveyType.value,
         formStore.applicationData.processInstanceId,
-        formStore.applicationData.insuredApp[0].id,
+        whichMember.value === 'insured' ? formStore.applicationData.insuredApp[0].id : formStore.applicationData.clientApp.id,
         whichSurvey.value,
         surveyType.value === 'health' ? 'surveyByHealthSecond' : 'surveyByCriticalSecond',
+        whichMember.value,
       );
       firstQuestionList.value = formStore[whichSurvey.value]!.body;
       secondQuestionList.value = formStore[surveyType.value === 'health' ? 'surveyByHealthSecond' : 'surveyByCriticalSecond']!;
@@ -271,9 +291,6 @@ export default defineComponent({
           await dataStore.definedAnswers(question.first.id, whichSurvey.value);
         }),
       );
-      if (formStore.isDisabled.surveyByHealthBase) {
-        dataStore.showToaster('error', dataStore.t('toaster.viewErrorText'));
-      }
     };
 
     onMounted(async () => {

package/components/Pages/Auth.vue

@@ -1,27 +1,86 @@
 <template>
-  <section class="flex flex-col justify-evenly">
-    <img draggable="false" class="w-2/3 lg:w-[25vw] self-center" src="~/assets/auth-logo.svg" />
-    <v-form ref="vForm" class="w-2/3 lg:w-[35vw] self-center">
-      <base-rounded-input
-        class="mb-1"
-        v-model="login"
-        :rules="$rules.required"
-        :loading="authLoading"
-        :placeholder="$t('buttons.userLogin')"
-        type="text"
-        @submitted="submitAuthForm"
-      ></base-rounded-input>
-      <base-rounded-input
-        class="mb-1"
-        v-model="password"
-        :rules="$rules.required"
-        :loading="authLoading"
-        :placeholder="$t('buttons.password')"
-        type="password"
-        @submitted="submitAuthForm"
-      ></base-rounded-input>
-      <base-btn :text="$t('buttons.login')" :disabled="authLoading" :btn="$libStyles.greenBtn" @click="submitAuthForm"></base-btn>
-    </v-form>
+  <section class="flex h-full" :class="$libStyles.blueBgLight">
+    <!-- @vue-ignore -->
+    <aside :class="{ '!hidden': !$display().lgAndUp.value }" class="w-full lg:w-1/4 bg-white flex flex-col justify-between border-r-2 relative px-8">
+      <img draggable="false" class="w-[50%] mt-8" src="~/assets/auth-logo.svg" />
+      <div class="self-center flex flex-col items-center justify-center base-auth">
+        <v-carousel :show-arrows="false" color="#009C73">
+          <v-carousel-item v-for="(item, index) of carouselItems" :key="index">
+            <img draggable="false" class="mx-auto" :src="item.img" />
+            <div class="flex flex-col items-center justify-center mt-12 mb-8 text-center">
+              <h2 class="text-[22px] font-medium mb-1">{{ item.title }}</h2>
+              <h4 class="text-[16px]">{{ item.subtitle }}</h4>
+            </div>
+          </v-carousel-item>
+        </v-carousel>
+      </div>
+      <base-btn :text="$t('buttons.more')" :disabled="true" class="mb-28"></base-btn>
+    </aside>
+    <section v-if="isLogin" class="w-full lg:w-3/4 flex flex-col justify-center">
+      <!-- @vue-ignore -->
+      <img :class="{ '!block': !$display().lgAndUp.value }" draggable="false" class="hidden w-2/4 sm:w-1/3 mb-10 self-center" src="~/assets/auth-logo.svg" />
+      <div class="flex flex-col items-center mb-8 text-center">
+        <h1 class="text-[28px] font-medium mb-1">{{ $t('labels.welcomeHL') }}</h1>
+        <span :class="[$libStyles.greyTextDark]" class="text-[16px]">{{ $t('labels.needAuth') }}</span>
+      </div>
+      <v-form ref="vForm" class="w-2/3 lg:w-[25vw] self-center">
+        <base-rounded-input
+          class="mb-1"
+          v-model.trim="login"
+          :rules="$rules.required"
+          :loading="authLoading"
+          :placeholder="$t('buttons.userLogin')"
+          type="text"
+        ></base-rounded-input>
+        <base-rounded-input
+          class="mb-1"
+          v-model.trim="password"
+          :rules="$rules.required"
+          :loading="authLoading"
+          :placeholder="$t('buttons.password')"
+          :append-inner-icon="showPassword ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
+          @append="showPassword = !showPassword"
+          :type="showPassword ? ('' as InputTypes) : 'password'"
+        ></base-rounded-input>
+        <span v-if="$dataStore.isLKA" class="inline-block w-full text-end mb-4" :class="[$libStyles.textSimple, $libStyles.greyTextDark]" @click="isLogin = false">{{
+          $t('labels.resetPassword')
+        }}</span>
+        <base-btn :text="$t('buttons.login')" :disabled="authLoading" :btn="$libStyles.greenBtn" @click="submitAuthForm"></base-btn>
+      </v-form>
+    </section>
+    <section v-if="isLogin === false" class="w-full lg:w-3/4 flex flex-col justify-center items-center">
+      <div class="flex flex-col items-center mb-4">
+        <h1 class="text-[28px] font-medium mb-1">{{ $t('labels.resetPassword') }}</h1>
+        <span :class="[$libStyles.greyTextDark]" class="text-[16px]">{{ $t('labels.resetType') }}</span>
+      </div>
+      <div class="p-[2px] mb-8 rounded-[12px] border-[1px] w-2/3 lg:w-[25vw]" :class="[$libStyles.whiteBg]">
+        <v-tabs v-model="resetPasswordType" density="compact" slider-color="#009c73" class="w-full base-reset-password rounded-[12px]" :class="[$libStyles.whiteBg]">
+          <v-tab :ripple="false" value="phone"> {{ $t('form.phoneNumber') }} </v-tab>
+          <v-tab :ripple="false" value="email"> {{ $t('form.email') }} </v-tab>
+        </v-tabs>
+      </div>
+      <v-form ref="vForm" class="w-2/3 lg:w-[25vw] self-center">
+        <base-rounded-input
+          v-if="resetPasswordType === 'phone'"
+          v-model.trim="phone"
+          :maska="$maska.phone"
+          :rules="$rules.required.concat($rules.phoneFormat)"
+          :loading="authLoading"
+          :placeholder="$t('form.phoneNumber')"
+          type="text"
+        ></base-rounded-input>
+        <base-rounded-input
+          v-if="resetPasswordType === 'email'"
+          v-model.trim="email"
+          :rules="$rules.required.concat($rules.email)"
+          :loading="authLoading"
+          :placeholder="$t('form.email')"
+          type="text"
+        ></base-rounded-input>
+        <span class="inline-block w-full text-end mb-4" :class="[$libStyles.textSimple, $libStyles.greyTextDark]" @click="isLogin = true">{{ $t('buttons.login') }}</span>
+        <base-btn :text="$t('buttons.reset')" :disabled="authLoading" :btn="$libStyles.greenBtn" @click="submitAuthForm"></base-btn>
+      </v-form>
+    </section>
   </section>
 </template>
 
@@ -33,6 +92,11 @@ export default defineComponent({
     const dataStore = useDataStore();
 
     const vForm = ref<any>(null);
+    const isLogin = ref<boolean>(true);
+    const showPassword = ref<boolean>(false);
+    const phone = ref<string>();
+    const email = ref<string>();
+    const resetPasswordType = ref<string>();
 
     const credentials = {
       production: { login: '', password: '' },
@@ -41,6 +105,24 @@ export default defineComponent({
       vercel: { login: '', password: 'asdqwe123' },
     };
 
+    const carouselItems = [
+      {
+        title: 'Все полисы в один клик!',
+        subtitle: 'Мгновенный доступ к информации о ваших полисах',
+        img: '/left-side-1.png',
+      },
+      {
+        title: 'Все полисы в один клик!',
+        subtitle: 'Мгновенный доступ к информации о ваших полисах',
+        img: '/left-side-1.png',
+      },
+      {
+        title: 'Все полисы в один клик!',
+        subtitle: 'Мгновенный доступ к информации о ваших полисах',
+        img: '/left-side-1.png',
+      },
+    ];
+
     const useEnv = {
       envMode: import.meta.env.VITE_MODE,
       isDev: import.meta.env.VITE_MODE === 'development',
@@ -68,24 +150,57 @@ export default defineComponent({
     const submitAuthForm = async () => {
       await vForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
         if (v.valid) {
-          authLoading.value = true;
-          await dataStore.loginUser(login.value, password.value, numAttempts.value);
-          numAttempts.value++;
-          authLoading.value = false;
-          if (!!dataStore.user.id) {
-            router.push({ name: 'index' });
+          if (isLogin.value === true) {
+            authLoading.value = true;
+            await dataStore.loginUser(login.value, password.value, numAttempts.value);
+            numAttempts.value++;
+            authLoading.value = false;
+            if (!!dataStore.user.id) {
+              await router.push({ name: 'index' });
+            }
+          } else {
+            // TODO Reset password
           }
         }
       });
     };
 
     return {
+      // State
       login,
-      password,
       vForm,
+      phone,
+      email,
+      isLogin,
+      password,
       authLoading,
+      showPassword,
+      carouselItems,
+      resetPasswordType,
+
+      // Functions
       submitAuthForm,
     };
   },
 });
 </script>
+
+<style>
+.base-auth .v-carousel__controls {
+  background: white !important;
+}
+.base-reset-password .v-tab__slider {
+  z-index: -1;
+  height: 100% !important;
+  border-radius: 12px;
+}
+.base-reset-password .v-tab {
+  width: 50%;
+  color: #566681;
+  text-transform: unset;
+  font-size: 12px;
+}
+.base-reset-password .v-tab--selected {
+  color: white !important;
+}
+</style>

package/components/Pages/InvoiceInfo.vue

@@ -0,0 +1,30 @@
+<template>
+  <section class="w-full px-[10px] pt-[14px] flex flex-col gap-4" :class="[$libStyles.scrollPage]" v-if="!!invoiceData">
+    <lazy-base-form-section :title="$t('labels.jsonObject')">
+      <template #icon>
+        <v-btn icon="mdi mdi-content-copy !text-[18px]" size="x-small" variant="plain" color="#A0B3D8" @click="$dataStore.copyToClipboard(JSON.stringify(invoiceData))"></v-btn>
+      </template>
+      <lazy-base-json-viewer :data="invoiceData" class="bg-white p-4 rounded"></lazy-base-json-viewer>
+    </lazy-base-form-section>
+    <lazy-base-form-section v-if="invoiceData.paymentLink && invoiceData.status !== 1" :title="$t('labels.epayPage')" class="flex items-center">
+      <div class="w-full lg:w-[70%] bg-white">
+        <iframe :src="invoiceData.paymentLink" frameborder="0" class="w-full h-[70vh]"></iframe>
+      </div>
+    </lazy-base-form-section>
+  </section>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  setup() {
+    const formStore = useFormStore();
+    const invoiceData = formStore.invoiceData;
+
+    return {
+      // State
+      formStore,
+      invoiceData,
+    };
+  },
+});
+</script>