hl-core 0.0.8-beta.2 → 0.0.8-beta.20

package/components/Form/ProductConditionsBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pt-3 pl-5 rounded-lg border-[1px]" :class="[$libStyles.whiteBg]">
+  <div class="pt-3 pl-5 rounded-lg border-[1px]" :class="[$libStyles.whiteBg, disabled && $libStyles.disabled]">
     <div>
       <p :class="[$libStyles.textTitle, $libStyles.greenText]">
         {{ $t('productConditions') }}
@@ -7,22 +7,26 @@
       <p v-if="!!subtitle" :class="[$libStyles.greyText, $libStyles.textSimple]">{{ subtitle }}</p>
     </div>
     <div class="mt-6 grid grid-cols-3 lg:grid-cols-5 auto-rows-fr items-center">
-      <span :class="[$libStyles.textSimple]" class="font-medium">{{ $t('productConditionsForm.requestedSumInsured') }}</span>
-      <span :class="[$libStyles.textSimple]" class="font-medium">{{ $t('productConditionsForm.insurancePremiumPerMonth') }}</span>
-      <span :class="[$libStyles.textSimple]" class="font-medium hidden lg:block">{{ $t('productConditionsForm.coverPeriod') }}</span>
-      <span :class="[$libStyles.textSimple]" class="font-medium hidden lg:block">{{ $t('productConditionsForm.payPeriod') }}</span>
+      <span v-if="hasSum" :class="[$libStyles.textSimple]" class="font-medium">{{ $t('productConditionsForm.requestedSumInsured') }}</span>
+      <span v-if="hasPremium" :class="[$libStyles.textSimple]" class="font-medium">{{ $t('productConditionsForm.insurancePremiumPerMonth') }}</span>
+      <span v-if="hasPolicyNumber" :class="[$libStyles.textSimple]" class="font-medium">{{ $t('buttons.InsuranceContract') }}</span>
+      <span v-if="hasContractDate" :class="[$libStyles.textSimple]" class="font-medium">{{ $t('productConditionsForm.contractDate') }}</span>
+      <span v-if="hasCoverPeriod" :class="[$libStyles.textSimple]" class="font-medium hidden lg:block">{{ $t('productConditionsForm.coverPeriod') }}</span>
+      <span v-if="hasPayPeriod" :class="[$libStyles.textSimple]" class="font-medium hidden lg:block">{{ $t('productConditionsForm.payPeriod') }}</span>
     </div>
     <div class="grid grid-cols-3 lg:grid-cols-5 auto-rows-fr items-center">
-      <span :class="[amount === null && $libStyles.emptyBlockCol]">{{ amount }} </span>
-      <span :class="[premium === null && $libStyles.emptyBlockCol]"> {{ premium }}</span>
-      <span :class="[coverPeriod === null && $libStyles.emptyBlockCol]" class="hidden lg:block">{{ coverPeriod }} </span>
-      <span :class="[paymentPeriod === null && $libStyles.emptyBlockCol]" class="hidden lg:block">
+      <span v-if="hasSum" :class="[amount === null && $libStyles.emptyBlockCol]">{{ amount }} </span>
+      <span v-if="hasPremium" :class="[premium === null && $libStyles.emptyBlockCol]"> {{ premium }}</span>
+      <span v-if="hasPolicyNumber" :class="[policyNumber === null && $libStyles.emptyBlockCol]"> {{ policyNumber }}</span>
+      <span v-if="hasContractDate" :class="[policyNumber === null && $libStyles.emptyBlockCol]"> {{ contractDate }}</span>
+      <span v-if="hasCoverPeriod" :class="[coverPeriod === null && $libStyles.emptyBlockCol]" class="hidden lg:block">{{ coverPeriod }} </span>
+      <span v-if="hasPayPeriod" :class="[paymentPeriod === null && $libStyles.emptyBlockCol]" class="hidden lg:block">
         {{ paymentPeriod }}
       </span>
       <div
-        class="rounded-br-lg transition-all h-[70px] w-[60px] relative place-self-end cursor-pointer"
-        :class="[$libStyles.blueBgLight, $libStyles.blueBgLightHover]"
-        @click="$emit('onMore', { whichForm: 'productConditions' })"
+        class="rounded-br-lg transition-all h-[70px] w-[60px] relative place-self-end"
+        :class="[$libStyles.blueBgLight, $libStyles.blueBgLightHover, disabled ? $libStyles.disabled : 'cursor-pointer']"
+        @click="!disabled && $emit('onMore', { whichForm: 'productConditions' })"
       >
         <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"> </i>
       </div>
@@ -37,8 +41,13 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup() {
+    const dataStore = useDataStore();
     const formStore = useFormStore();
 
     const amount = computed(() =>
@@ -47,12 +56,47 @@ export default defineComponent({
     const premium = computed(() =>
       formStore.productConditionsForm && formStore.productConditionsForm.insurancePremiumPerMonth ? formStore.productConditionsForm.insurancePremiumPerMonth : null,
     );
+    const policyNumber = computed(() => (formStore.applicationData && formStore.applicationData.policyAppDto ? formStore.applicationData.policyAppDto.policyNumber : null));
+    const contractDate = computed(() =>
+      formStore.applicationData && formStore.applicationData.policyAppDto ? reformatDate(formStore.applicationData.policyAppDto.contractDate) : null,
+    );
     const coverPeriod = computed(() => (formStore.productConditionsForm && formStore.productConditionsForm.coverPeriod ? formStore.productConditionsForm.coverPeriod : null));
     const paymentPeriod = computed(() =>
       formStore.productConditionsForm && formStore.productConditionsForm.paymentPeriod && !!formStore.productConditionsForm.paymentPeriod.nameRu
         ? formStore.productConditionsForm.paymentPeriod.nameRu
         : null,
     );
+
+    const hasSum = computed(() => {
+      return true;
+    });
+    const hasPremium = computed(() => {
+      return true;
+    });
+    const hasPolicyNumber = computed(() => {
+      if (dataStore.isFinCenter()) {
+        return true;
+      }
+      return false;
+    });
+    const hasContractDate = computed(() => {
+      if (dataStore.isFinCenter()) {
+        return true;
+      }
+      return false;
+    });
+    const hasCoverPeriod = computed(() => {
+      if (dataStore.isFinCenter()) {
+        return false;
+      }
+      return true;
+    });
+    const hasPayPeriod = computed(() => {
+      if (dataStore.isFinCenter()) {
+        return false;
+      }
+      return true;
+    });
     return {
       // State
       formStore,
@@ -60,8 +104,16 @@ export default defineComponent({
       // Computed
       amount,
       premium,
+      policyNumber,
+      contractDate,
       coverPeriod,
       paymentPeriod,
+      hasSum,
+      hasPremium,
+      hasPolicyNumber,
+      hasContractDate,
+      hasPayPeriod,
+      hasCoverPeriod,
     };
   },
 });

package/components/Input/FormInput.vue

@@ -20,15 +20,16 @@
     :append-icon="appendIcon ? appendIcon : ''"
     :prepend-inner-icon="prependInnerIcon ? prependInnerIcon : ''"
     :bg-color="bgColor ? bgColor : ''"
+    :suffix="suffix"
+    @input="$emit('input', $event)"
     @keyup.enter.prevent="submitted"
     @click:append="!props.readonly && $emit('append-out')"
     @click:prepend="!props.readonly && $emit('prepend-out')"
-    @click:append-inner="!props.readonly && $emit('append')"
     @click:prepend-inner="!props.readonly && $emit('prepend')"
     @update:modelValue="$emit('update:modelValue', $event)"
   >
     <template v-if="appendInnerIcon && appendInnerIcon.length" v-slot:append-inner>
-      <v-icon v-if="appendInnerIcon !== 'mdi mdi-calendar-blank-outline'" icon="appendInnerIcon"></v-icon>
+      <v-icon v-if="appendInnerIcon !== 'mdi mdi-calendar-blank-outline'" :icon="appendInnerIcon" @click="!props.readonly && $emit('append')"></v-icon>
       <base-datepicker v-else :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)"></base-datepicker>
     </template>
     <template v-if="loading" #loader>
@@ -68,6 +69,10 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    suffix: {
+      type: String,
+      default: '',
+    },
     messages: {
       type: [String, Array<string>],
     },
@@ -115,7 +120,7 @@ export default defineComponent({
       type: String,
     },
   },
-  emits: ['update:modelValue', 'submitted', 'prepend', 'append', 'prepend-out', 'append-out'],
+  emits: ['update:modelValue', 'submitted', 'prepend', 'append', 'prepend-out', 'append-out', 'input'],
 
   setup(props, { emit }) {
     const submitted = (event: any) => {
@@ -171,4 +176,8 @@ export default defineComponent({
 .form-input .v-field--error {
   border-color: #ff5449;
 }
+.form-input .v-text-field__suffix {
+  padding-top: 30px;
+  font-size: 16px !important;
+}
 </style>

package/components/Input/PanelInput.vue

@@ -21,6 +21,7 @@
     :prepend-inner-icon="prependInnerIcon ? prependInnerIcon : ''"
     :append-inner-icon="appendInnerIcon ? appendInnerIcon : ''"
     :bg-color="bgColor ? bgColor : ''"
+    :suffix="suffix"
     @keyup.enter.prevent="submitted"
     @click:control="!props.readonly && $emit('append')"
     @click:clear="(props.readonly ? false : clearable) && $emit('update:modelValue', new Value())"
@@ -115,6 +116,10 @@ export default defineComponent({
     bgColor: {
       type: String,
     },
+    suffix: {
+      type: String,
+      default: '',
+    },
   },
   emits: ['update:modelValue', 'submitted', 'prepend', 'append', 'prepend-out', 'append-out', 'clear'],
 

package/components/Layout/Drawer.vue

@@ -13,6 +13,7 @@
       <slot></slot>
     </div>
     <base-panel-handler v-else></base-panel-handler>
+    <slot name="panel"></slot>
   </v-navigation-drawer>
 </template>
 

package/components/Layout/Header.vue

@@ -1,8 +1,14 @@
 <template>
   <header class="relative w-full h-[70px] text-center font-medium align-middle flex items-center border-b-[1px]" :class="[$libStyles.blueBgLight, $libStyles.textSimple]">
-    <i v-if="hasBack" @click="$emit('onBack')" class="absolute left-5 mdi text-xl cursor-pointer" :class="[backIcon]"></i>
+    <i v-if="hasBack" @click="$emit('onBack')" class="absolute left-5 mdi text-xl cursor-pointer transition-all" :class="[backIcon, backIconAnim]"></i>
     <span class="mx-10">{{ title }}</span>
-    <i v-if="hasMore" @click="$emit('onMore')" class="mdi absolute right-5 text-xl cursor-pointer" :class="[moreIcon, hideMoreOnLg ? 'lg:!hidden' : '']"> </i>
+    <i
+      v-if="hasMore"
+      @click="$emit('onMore')"
+      class="mdi absolute right-5 text-xl cursor-pointer transition-all"
+      :class="[moreIcon, hideMoreOnLg ? 'lg:!hidden' : '', moreIconAnim]"
+    >
+    </i>
   </header>
 </template>
 
@@ -35,14 +41,44 @@ export default defineComponent({
     },
   },
   emits: ['onBack', 'onMore'],
-  setup() {
+  setup(props) {
     const dataStore = useDataStore();
 
     const onClickOutside = () => {
       dataStore.settings.open = false;
     };
 
-    return { onClickOutside };
+    const backIconAnim = computed(() => {
+      const icon = props.backIcon;
+      switch (icon) {
+        case 'mdi-arrow-left':
+        case 'mdi-account-arrow-left':
+          return 'hover:-translate-x-[2px]';
+        case 'mdi-close':
+          return 'hover:scale-110';
+        default:
+          return '';
+      }
+    });
+
+    const moreIconAnim = computed(() => {
+      const icon = props.moreIcon;
+      switch (icon) {
+        case 'mdi-cog-outline':
+          return 'hover:rotate-[30deg]';
+        default:
+          return '';
+      }
+    });
+
+    return {
+      // Computed
+      backIconAnim,
+      moreIconAnim,
+
+      // Functions
+      onClickOutside,
+    };
   },
 });
 </script>

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,28 @@
       {{ 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-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>
 
-    <base-dialog v-model="dialog" :title="$t('dialog.exit')" :subtitle="$t('dialog.dataWillClear')" actions="default" @yes="logoutUser" @no="dialog = false"> </base-dialog
+    <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);
+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 +55,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.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)"
             >
@@ -35,7 +35,15 @@
         <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-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" @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/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]">
@@ -169,11 +173,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({