hl-core 0.0.8 → 0.0.9-beta.10

package/components/Pages/ContragentForm.vue

@@ -0,0 +1,505 @@
+<template>
+  <section v-show="showForm" class="flex flex-col gap-4 px-[10px]">
+    <v-form v-if="member" ref="vForm" @submit="submitForm" class="max-h-[75vh] overflow-y-scroll">
+      <base-form-section :title="$dataStore.t('form.personalData')" class="mt-[14px]">
+        <base-form-input
+          v-model="member.phoneNumber"
+          :label="$dataStore.t('form.phoneNumber')"
+          :readonly="disabled"
+          :clearable="!disabled"
+          :maska="$maska.phone"
+          :rules="$rules.required.concat($rules.phoneFormat)"
+        />
+        <base-form-input
+          v-model="member.iin"
+          :label="$dataStore.t('form.iin')"
+          :readonly="disabled"
+          :clearable="!disabled"
+          :maska="$maska.iin"
+          :rules="$rules.required.concat($rules.iinRight)"
+        />
+        <base-form-input
+          v-model.trim="member.lastName"
+          :label="$dataStore.t('form.lastName')"
+          :readonly="disabled"
+          :clearable="!disabled"
+          :rules="$rules.required.concat($rules.cyrillic)"
+        />
+        <base-form-input
+          v-model.trim="member.firstName"
+          :label="$dataStore.t('form.firstName')"
+          :readonly="disabled"
+          :clearable="!disabled"
+          :rules="$rules.required.concat($rules.cyrillic)"
+        />
+        <base-form-input
+          v-model.trim="member.middleName"
+          :label="$dataStore.t('form.middleName')"
+          :readonly="disabled"
+          :clearable="!disabled"
+          :rules="$rules.cyrillicNonRequired"
+        />
+        <base-form-input
+          v-model="member.birthDate"
+          :label="$dataStore.t('form.birthDate')"
+          :readonly="disabled"
+          :clearable="!disabled"
+          :rules="$rules.required.concat($rules.birthDate)"
+          :maska="$maska.date"
+          append-inner-icon="mdi mdi-calendar-blank-outline"
+        />
+        <base-form-input v-model="member.age" :label="$dataStore.t('form.age')" :readonly="disabled" :clearable="!disabled" :rules="$rules.numbers.concat($rules.age18)" />
+        <base-panel-input
+          v-model="member.gender"
+          :value="member.gender?.nameRu"
+          :readonly="disabled"
+          :clearable="!disabled"
+          :label="$dataStore.t('form.gender')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($dataStore.t('form.gender'), $dataStore.gender, 'gender')"
+        />
+      </base-form-section>
+      <!-- <base-form-section :title="$dataStore.t('form.jobData')">
+        <base-form-input v-model.trim="member.job" :label="$dataStore.t('form.job')"  :readonly="disabled" :clearable="!disabled" :rules="$rules.required" />
+        <base-form-input v-model.trim="member.jobPosition" :label="$dataStore.t('form.jobPosition')"  :readonly="disabled" :clearable="!disabled" :rules="$rules.required" />
+        <base-form-input v-model.trim="member.jobPlace" :label="$dataStore.t('form.jobPlace')"  :readonly="disabled" :clearable="!disabled" :rules="$rules.required" />
+      </base-form-section> -->
+      <base-form-section :title="$dataStore.t('form.placeRegistration')">
+        <base-panel-input
+          v-model="member.registrationCountry"
+          :value="member.registrationCountry?.nameRu"
+          :label="$dataStore.t('form.Country')"
+          :readonly="disabled"
+          :clearable="!disabled"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($dataStore.t('form.Country'), [], 'registrationCountry', $dataStore.getCountries)"
+        />
+        <base-fade-transition>
+          <div class="flex flex-col gap-[1px]" v-if="member.registrationCountry.nameRu === 'Казахстан' || member.registrationCountry.nameRu === null">
+            <base-panel-input
+              v-model="member.registrationProvince"
+              :value="member.registrationProvince?.nameRu"
+              :label="$dataStore.t('form.Province')"
+              :readonly="disabled"
+              :clearable="!disabled"
+              :rules="$rules.objectRequired"
+              append-inner-icon="mdi mdi-chevron-right"
+              @append="openPanel($dataStore.t('form.Province'), [], 'registrationProvince', $dataStore.getStates, 'registrationCountry')"
+            />
+            <base-panel-input
+              v-model="member.registrationRegionType"
+              :value="member.registrationRegionType?.nameRu"
+              :label="$dataStore.t('form.RegionType')"
+              :readonly="disabled"
+              :clearable="!disabled"
+              :rules="$rules.objectRequired"
+              append-inner-icon="mdi mdi-chevron-right"
+              @append="openPanel($dataStore.t('form.RegionType'), [], 'registrationRegionType', $dataStore.getLocalityTypes)"
+            />
+            <base-panel-input
+              v-if="member.registrationRegionType.nameRu !== 'город'"
+              v-model="member.registrationRegion"
+              :value="member.registrationRegion?.nameRu"
+              :label="$dataStore.t('form.Region')"
+              :readonly="disabled"
+              :clearable="!disabled"
+              :rules="$rules.objectRequired"
+              append-inner-icon="mdi mdi-chevron-right"
+              @append="openPanel($dataStore.t('form.Region'), [], 'registrationRegion', $dataStore.getRegions, 'registrationProvince')"
+            />
+            <base-panel-input
+              v-model="member.registrationCity"
+              :value="member.registrationCity?.nameRu"
+              :label="$dataStore.t('form.City')"
+              :readonly="disabled"
+              :clearable="!disabled"
+              :rules="$rules.objectRequired"
+              append-inner-icon="mdi mdi-chevron-right"
+              @append="openPanel($dataStore.t('form.City'), [], 'registrationCity', $dataStore.getCities, 'registrationProvince')"
+            />
+            <base-form-input v-model.trim="member.registrationQuarter" :label="$dataStore.t('form.Quarter')" :readonly="disabled" :clearable="!disabled" />
+            <base-form-input v-model.trim="member.registrationMicroDistrict" :label="$dataStore.t('form.MicroDistrict')" :readonly="disabled" :clearable="!disabled" />
+            <base-form-input v-model.trim="member.registrationStreet" :rules="$rules.required" :label="$dataStore.t('form.Street')" :readonly="disabled" :clearable="!disabled" />
+            <base-form-input
+              v-model.trim="member.registrationNumberHouse"
+              :rules="$rules.required"
+              :label="$dataStore.t('form.NumberHouse')"
+              :readonly="disabled"
+              :clearable="!disabled"
+            />
+            <base-form-input v-model.trim="member.registrationNumberApartment" :label="$dataStore.t('form.NumberApartment')" :readonly="disabled" :clearable="!disabled" />
+          </div>
+        </base-fade-transition>
+      </base-form-section>
+      <base-form-section :title="$dataStore.t('form.birthData')">
+        <base-panel-input
+          v-model="member.birthPlace"
+          :value="member.birthPlace?.nameRu"
+          :label="$dataStore.t('form.Country')"
+          :readonly="disabled"
+          :clearable="!disabled"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($dataStore.t('form.Country'), [], 'birthPlace', $dataStore.getCountries)"
+        />
+      </base-form-section>
+      <base-form-section :title="$dataStore.t('form.documentData')">
+        <base-panel-input
+          v-model="member.documentType"
+          :value="member.documentType?.nameRu"
+          :label="$dataStore.t('form.documentType')"
+          :readonly="disabled"
+          :clearable="!disabled"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($dataStore.t('form.documentType'), [], 'documentType', $dataStore.getDocumentTypes)"
+        />
+        <base-form-input v-model.trim="member.documentNumber" :label="$dataStore.t('form.documentNumber')" :readonly="disabled" :clearable="!disabled" :rules="$rules.required" />
+        <!-- <base-file-input v-if="!memberDocument" :disabled="isDisabled" :clearable="!isDisabled" @input="attachFile($event)" />
+        <base-empty-form-field v-if="memberDocument" @click="!isDisabled && openCustomPanel('document')" class="justify-between">
+          {{ `${memberDocument.fileTypeName} - ${memberDocument.fileName}` }}
+          <i class="cursor-pointer mdi mdi-file-document mr-6 text-[#a0b3d8] text-xl"></i>
+        </base-empty-form-field> -->
+        <base-panel-input
+          v-model="member.documentIssuers"
+          :value="member.documentIssuers?.nameRu"
+          :label="$dataStore.t('form.documentIssuers')"
+          :readonly="disabled"
+          :clearable="!disabled"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($dataStore.t('form.documentIssuers'), [], 'documentIssuers', $dataStore.getDocumentIssuers)"
+        />
+        <base-form-input
+          v-model="member.documentDate"
+          :label="$dataStore.t('form.documentDate')"
+          :rules="$rules.required.concat($rules.date)"
+          :readonly="disabled"
+          :clearable="!disabled"
+          :maska="$maska.date"
+          append-inner-icon="mdi mdi-calendar-blank-outline"
+        />
+        <base-fade-transition>
+          <base-form-input
+            v-if="member.documentType.ids !== 'SBI' && member.documentType.ids !== 'VNZ'"
+            v-model="member.documentExpire"
+            :label="$dataStore.t('form.documentExpire')"
+            :readonly="disabled"
+            :clearable="!disabled"
+            :rules="$rules.required.concat($rules.date)"
+            :maska="$maska.date"
+            append-inner-icon="mdi mdi-calendar-blank-outline"
+          />
+        </base-fade-transition>
+        <base-panel-input
+          v-model="member.signOfResidency"
+          :value="member.signOfResidency?.nameRu"
+          :label="$dataStore.t('form.signOfResidency')"
+          :readonly="disabled"
+          :clearable="!disabled"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($dataStore.t('form.signOfResidency'), [], 'signOfResidency', $dataStore.getResidents)"
+        />
+        <base-panel-input
+          v-model="member.countryOfTaxResidency"
+          :value="member.countryOfTaxResidency?.nameRu"
+          :label="$dataStore.t('form.countryOfTaxResidency')"
+          :readonly="disabled"
+          :clearable="!disabled"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($dataStore.t('form.countryOfTaxResidency'), [], 'countryOfTaxResidency', $dataStore.getTaxCountries)"
+        />
+        <base-fade-transition>
+          <base-panel-input
+            v-if="member.countryOfTaxResidency.ids === '500014.3'"
+            v-model="member.addTaxResidency"
+            :value="member.addTaxResidency?.nameRu"
+            :label="$dataStore.t('form.addTaxResidency')"
+            :readonly="disabled"
+            :clearable="!disabled"
+            :rules="$rules.objectRequired"
+            append-inner-icon="mdi mdi-chevron-right"
+            @append="openPanel($dataStore.t('form.addTaxResidency'), [], 'addTaxResidency', $dataStore.getAdditionalTaxCountries)"
+          />
+        </base-fade-transition>
+        <base-panel-input
+          v-model="member.countryOfCitizenship"
+          :value="member.countryOfCitizenship?.nameRu"
+          :label="$dataStore.t('form.countryOfCitizenship')"
+          :readonly="disabled"
+          :clearable="!disabled"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($dataStore.t('form.countryOfCitizenship'), [], 'countryOfCitizenship', $dataStore.getCitizenshipCountries)"
+        />
+        <base-panel-input
+          v-model="member.economySectorCode"
+          :value="member.economySectorCode?.nameRu"
+          :label="$dataStore.t('form.economySectorCode')"
+          :readonly="disabled"
+          :clearable="!disabled"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($dataStore.t('form.economySectorCode'), [], 'economySectorCode', $dataStore.getSectorCodeList)"
+        />
+      </base-form-section>
+      <base-form-section :title="$dataStore.t('form.contactsData')">
+        <base-form-input
+          v-model="member.homePhone"
+          :maska="$maska.phone"
+          placeholder="+7 7"
+          :label="$dataStore.t('form.homePhone')"
+          :readonly="disabled"
+          :clearable="!disabled"
+          :rules="$rules.phoneFormat"
+        />
+        <base-form-input v-model.trim="member.email" :label="$dataStore.t('form.email')" :readonly="disabled" :clearable="!disabled" :rules="$rules.email" />
+      </base-form-section>
+    </v-form>
+    <base-btn v-if="showSaveButton && !disabled" :loading="isButtonLoading" :text="$dataStore.t('buttons.save')" @click="submitForm" />
+    <Teleport v-if="isPanelOpen" to="#panel-actions">
+      <div :class="[$styles.scrollPage]" class="relative flex flex-col items-center">
+        <i
+          v-if="type === 'panel'"
+          class="mdi mdi-arrow-left cursor-pointer absolute text-xl left-0 top-0 rounded-br-full bg-white border-[1px] pb-3 pt-1 pl-1 pr-3 z-10"
+          @click="closeDictPanel"
+        ></i>
+        <base-rounded-input v-model="searchQuery" :label="$dataStore.t('labels.search')" class="w-full p-2 mt-2" :hide-details="true" />
+        <div v-if="panelList && isPanelLoading === false" class="w-full flex flex-col gap-2 p-2">
+          <base-panel-select-item :text="$dataStore.t('form.notChosen')" :selected="panelValue.nameRu === null" @click="pickPanelValue(new Value())" />
+          <base-panel-select-item
+            v-for="(item, index) of panelList.filter(i => i.nameRu && (i.nameRu as string).match(new RegExp(searchQuery ?? '', 'i')))"
+            :key="index"
+            :text="(item.nameRu as string)"
+            :selected="item.nameRu === panelValue.nameRu"
+            @click="pickPanelValue(item)"
+          />
+        </div>
+        <base-loader v-if="isPanelLoading" class="absolute mt-10" :size="50" />
+      </div>
+    </Teleport>
+  </section>
+  <base-scroll-buttons @up="scrollForm('up')" @down="scrollForm('down')" />
+</template>
+
+<script lang="ts">
+import { StoreMembers } from '../../types/enum';
+import { Member, Value } from '../../composables/classes';
+
+export default defineComponent({
+  props: {
+    member: {
+      type: Object as PropType<Member>,
+      default: {},
+    },
+    type: {
+      type: String as PropType<'default' | 'panel'>,
+      default: 'default',
+    },
+    whichForm: {
+      type: String as PropType<'contragent' | keyof typeof StoreMembers>,
+      default: 'contragent',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['success'],
+  setup(props, { emit }) {
+    const dataStore = useDataStore();
+
+    const vForm = ref<any>();
+    const searchQuery = ref<string>();
+    const currentPanel = ref<keyof typeof props.member>();
+    const showForm = ref<boolean>(true);
+    const isPanelOpen = ref<boolean>(false);
+    const isPanelLoading = ref<boolean>(false);
+    const isButtonLoading = ref<boolean>(false);
+    const panelValue = ref<Value>(new Value());
+    const panelList = ref<Value[]>([]);
+
+    const showSaveButton = computed(() => {
+      const generalCondition = dataStore.isAgent();
+      return generalCondition;
+    });
+
+    const scrollForm = (direction: 'up' | 'down') => {
+      vForm.value.scrollTo({ top: direction === 'up' ? 0 : screen.height * 10, behavior: 'smooth' });
+    };
+
+    const closeDictPanel = () => {
+      isPanelOpen.value = false;
+      showForm.value = true;
+    };
+
+    const openPanel = async (title: string, list: Value[], key: string, asyncFunction?: Function, filterKey?: string) => {
+      searchQuery.value = '';
+      // @ts-ignore
+      currentPanel.value = key as keyof typeof props.member;
+      isPanelOpen.value = true;
+      dataStore.panelAction = null;
+      if (props.type === 'default') {
+        dataStore.panel.open = true;
+        dataStore.panel.title = title;
+      }
+
+      let newList = list;
+      if (asyncFunction) {
+        isPanelLoading.value = true;
+        newList = await asyncFunction(filterKey, props.member);
+      }
+      if (props.type === 'panel') {
+        showForm.value = false;
+      }
+      panelList.value = newList;
+      panelValue.value = props.member[currentPanel.value!];
+      isPanelLoading.value = false;
+    };
+
+    const pickPanelValue = (item: Value) => {
+      if (props.type === 'default') {
+        dataStore.panel.open = false;
+      }
+      showForm.value = true;
+      isPanelOpen.value = false;
+      // @ts-ignore
+      props.member[currentPanel.value] = item.nameRu === null ? new Value() : item;
+    };
+
+    const validateESBD = async (docTypeNumber: number) => {
+      const data: ESBDValidationType = {
+        personType: 1,
+        iin: props.member.iin!.replaceAll('-', ''),
+        lastName: props.member.lastName ?? '',
+        firstName: props.member.firstName ?? '',
+        middleName: props.member.middleName ?? '',
+        birthDate: props.member.getDateByKey('birthDate') ?? '',
+        sex: Number(props.member.gender.id),
+        docType: docTypeNumber,
+        docNumber: props.member.documentNumber ?? '',
+        docIssuedDate: props.member.getDateByKey('documentDate') ?? '',
+        docIssuedBy: props.member.documentIssuers.nameRu ?? '',
+        activityKindId: 0,
+        economicsSectorId: Number((props.member.economySectorCode.ids! as string).at(-1)),
+        resident: props.member.signOfResidency.ids === '500011.2' || props.member.signOfResidency.ids === null ? 0 : 1,
+        countryId: Number((props.member.countryOfTaxResidency.ids! as string).at(-1)),
+      };
+      return await dataStore.getValidateClientESBD(data);
+    };
+
+    const saveMember = async () => {
+      const hasSaved = await dataStore.saveContragent(props.member, props.whichForm, null, true);
+      if (hasSaved === false) {
+        return false;
+      }
+      dataStore.showToaster('success', dataStore.t('toaster.successSaved'));
+      dataStore.isLoading = false;
+      scrollForm('up');
+      emit('success', hasSaved);
+    };
+
+    const submitForm = async () => {
+      await vForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
+        if (v.valid) {
+          isButtonLoading.value = true;
+          const docType = props.member.documentType.ids;
+          if (props.member.gotFromInsis === true && (docType === '1UDL' || docType === 'SBI')) {
+            dataStore.isLoading = true;
+            const ESBDResponse = await validateESBD(docType === '1UDL' ? 1 : 3);
+            if (!ESBDResponse) {
+              dataStore.isLoading = false;
+              return;
+            }
+            const initialPoint = `${props.member.iin!.replaceAll('-', '')}.`;
+            const RESPONSE = ESBDMessage(ESBDResponse, initialPoint);
+            let errorMessage = RESPONSE !== false ? RESPONSE : 'Что-то произошло не так';
+            if (typeof ESBDResponse === 'object' && ESBDResponse.errorCode === 0) {
+              props.member.verifyType = 'ESBD';
+              props.member.verifyDate = ESBDResponse.verifiedDate;
+              const hasMemberSaved = await saveMember();
+            } else {
+              dataStore.isLoading = false;
+              dataStore.showToaster('error', errorMessage, 5000);
+            }
+          } else {
+            const hasMemberSaved = await saveMember();
+          }
+          isButtonLoading.value = false;
+        } else {
+          const errors = document.querySelector('.v-input--error');
+          if (errors) {
+            const errorText = errors.querySelector('.v-label.v-field-label');
+            if (errorText) {
+              dataStore.showToaster('error', dataStore.t('toaster.errorFormField', { text: errorText.innerHTML?.replace(/[-<>!//.]/g, '') }));
+            } else {
+              const errorFieldText = errors.querySelector('.v-input__control');
+              if (errorFieldText) {
+                dataStore.showToaster('error', dataStore.t('toaster.errorFormField', { text: errorFieldText.innerHTML?.replace(/[-<>!//.]/g, '') }));
+              }
+            }
+            errors.scrollIntoView({
+              behavior: 'smooth',
+              block: 'center',
+              inline: 'nearest',
+            });
+          }
+        }
+      });
+    };
+
+    watch(
+      () => props.member!.birthDate,
+      val => {
+        if (props.member && val && val.length === useMask().date.length) {
+          const calculatedAge = props.member.getAgeByBirthDate();
+          if (calculatedAge) props.member.age = calculatedAge;
+        }
+      },
+    );
+
+    watch(
+      () => dataStore.panel.open,
+      () => {
+        if (dataStore.panel.open === false) {
+          isPanelOpen.value = false;
+          dataStore.panelAction = null;
+        }
+      },
+      { immediate: true },
+    );
+
+    watch(searchQuery, () => {
+      if (searchQuery.value === null) {
+        searchQuery.value = '';
+      }
+    });
+
+    return {
+      // State
+      vForm,
+      showForm,
+      panelList,
+      panelValue,
+      searchQuery,
+      isPanelOpen,
+      isPanelLoading,
+      isButtonLoading,
+
+      //Computed
+      showSaveButton,
+
+      // Functions
+      openPanel,
+      submitForm,
+      scrollForm,
+      pickPanelValue,
+      closeDictPanel,
+    };
+  },
+});
+</script>

package/components/Pages/Documents.vue

@@ -1,32 +1,32 @@
 <template>
-  <section class="w-full px-[10px] pt-[14px] flex flex-col gap-2" :class="[$libStyles.scrollPage]" v-if="formStore.signedDocumentList && formStore.signedDocumentList.length">
-    <base-content-block v-for="document of formStore.signedDocumentList as DocumentItem[]" :key="document.id" :class="[$libStyles.textSimple]">
+  <section class="w-full px-[10px] pt-[14px] flex flex-col gap-2" :class="[$styles.scrollPage]" v-if="formStore.signedDocumentList && formStore.signedDocumentList.length">
+    <base-content-block v-for="document of formStore.signedDocumentList" :key="document.id" :class="[$styles.textSimple]">
       <h5 class="text-center font-medium mb-4">
         {{ document.fileTypeName }}
       </h5>
-      <div :class="[$libStyles.whiteBg, $libStyles.rounded]" class="p-2 h-12 flex items-center relative">
+      <div :class="[$styles.whiteBg, $styles.rounded]" class="p-2 h-12 flex items-center relative">
         <span class="ml-2">{{ document.fileName }}</span>
         <i
           class="transition-all cursor-pointer mdi mdi-dots-vertical pl-2 mr-3 border-l-[1px] text-xl absolute right-0"
-          :class="[$libStyles.greenTextHover]"
+          :class="[$styles.greenTextHover]"
           @click="openPanel(document)"
         ></i>
       </div>
     </base-content-block>
   </section>
-  <base-list-empty v-else></base-list-empty>
+  <base-list-empty v-else />
   <Teleport v-if="$dataStore.panelAction === null" to="#panel-actions">
     <base-fade-transition>
-      <div :class="[$libStyles.flexColNav]">
-        <base-btn :disabled="documentLoading" :loading="documentLoading" text="Открыть" @click="getFile('view')"></base-btn>
-        <base-btn :disabled="documentLoading" :loading="documentLoading" text="Скачать" @click="getFile('download')"></base-btn>
+      <div :class="[$styles.flexColNav]">
+        <base-btn :disabled="documentLoading" :loading="documentLoading" text="Открыть" @click="getFile('view')" />
+        <base-btn :disabled="documentLoading" :loading="documentLoading" text="Скачать" @click="getFile('download')" />
       </div>
     </base-fade-transition>
   </Teleport>
 </template>
 
 <script lang="ts">
-import { DocumentItem } from '@/composables/classes';
+import { DocumentItem } from '../../composables/classes';
 
 export default defineComponent({
   setup() {
@@ -40,9 +40,9 @@ export default defineComponent({
       text: '',
     });
     const object_list = computed(() => Object.values(formStore.signedDocumentList));
-    const unSignedList = computed(() => document_list.value.filter(doc => doc.signed === false || doc.signed === null));
+    const unSignedList = computed(() => document_list.value.filter((doc: DocumentItem) => doc.signed === false || doc.signed === null));
     const document_list = computed(() =>
-      object_list.value.filter(obj => {
+      object_list.value.filter((obj: DocumentItem) => {
         if (obj.fileTypeCode === '19' || obj.fileTypeCode === '5') {
           return obj;
         }

package/components/Pages/InvoiceInfo.vue

@@ -0,0 +1,30 @@
+<template>
+  <section class="w-full px-[10px] pt-[14px] flex flex-col gap-4" :class="[$styles.scrollPage]" v-if="!!invoiceData">
+    <lazy-base-form-section :title="$dataStore.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))" />
+      </template>
+      <lazy-base-json-viewer :data="invoiceData" class="bg-white p-4 rounded" />
+    </lazy-base-form-section>
+    <lazy-base-form-section v-if="invoiceData.paymentLink && invoiceData.status !== 1" :title="$dataStore.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>