hl-core 0.0.9-beta.4 → 0.0.9-beta.40

package/api/interceptors.ts

@@ -1,4 +1,4 @@
-import { AxiosInstance } from 'axios';
+import { AxiosError, AxiosInstance } from 'axios';
 
 export default function (axios: AxiosInstance) {
   axios.interceptors.request.use(
@@ -7,9 +7,51 @@ export default function (axios: AxiosInstance) {
       if (dataStore.accessToken) {
         request.headers.Authorization = `Bearer ${dataStore.accessToken}`;
       }
+      if (request.url && request.baseURL) {
+        const host = window.location.hostname;
+        if (host.startsWith('bpmsrv02')) {
+          if (request.baseURL === 'https://products.halyklife.kz/api/v1/insis') {
+            request.baseURL = 'http://bpmsrv02.halyklife.nb';
+          }
+          if (request.baseURL === 'https://products.halyklife.kz/efo/api') {
+            request.baseURL = 'http://efo-prod.halyklife.nb/api';
+          }
+          if (request.baseURL === 'https://products.halyklife.kz/aml/api') {
+            request.baseURL = 'http://aml-prod.halyklife.nb/api';
+          }
+        }
+        if (host.startsWith('vega')) {
+          if (request.baseURL === 'https://products.halyklife.kz/api/v1/test/insis') {
+            request.baseURL = 'http://vega:84';
+          }
+          if (request.baseURL === 'https://products.halyklife.kz/test/efo/api') {
+            request.baseURL = 'http://efo-dev.halyklife.nb/api';
+          }
+          if (request.baseURL === 'https://products.halyklife.kz/test/aml/api') {
+            request.baseURL = 'http://aml-dev.halyklife.nb/api';
+          }
+        }
+        if (import.meta.env.VITE_ON_NEW_API === 'true') {
+          if (request.url.includes('api/Application')) {
+            if (request.baseURL === 'http://vega:84') {
+              request.baseURL = 'http://efo-dev.halyklife.nb/api';
+            }
+            if (request.baseURL === 'http://bpmsrv02.halyklife.nb') {
+              request.baseURL = 'http://efo-prod.halyklife.nb/api';
+            }
+            request.url = request.url.replace('/api/Application', '');
+            if (request.baseURL.includes('api/v1/insis')) {
+              request.baseURL = request.baseURL.replace('api/v1/insis', 'efo/api');
+            }
+            if (request.baseURL.includes('api/v1/test/insis')) {
+              request.baseURL = request.baseURL.replace('api/v1/test/insis', 'test/efo/api');
+            }
+          }
+        }
+      }
       return request;
     },
-    error => {
+    (error: AxiosError) => {
       return Promise.reject(error);
     },
   );
@@ -17,22 +59,24 @@ export default function (axios: AxiosInstance) {
     response => {
       return response;
     },
-    error => {
+    (error: AxiosError) => {
       const dataStore = useDataStore();
       if (!dataStore.isCalculator) {
         const router = useRouter();
-        if (error.response.status === 401) {
-          dataStore.$reset();
-          localStorage.clear();
-          if (dataStore.isBridge) {
-            router.push({ name: 'Auth', query: { error: 401 } });
-          } else {
-            dataStore.sendToParent(constants.postActions.Error401, 401);
+        if (error && error.response && error.response.status) {
+          if (error.response.status === 401) {
+            dataStore.$reset();
+            localStorage.clear();
+            if (dataStore.isBridge) {
+              router.push({ name: 'Auth', query: { error: 401 } });
+            } else {
+              dataStore.sendToParent(constants.postActions.Error401, 401);
+            }
           }
-        }
-        if (error.response.status >= 500) {
-          if (router.currentRoute.value.name !== 'Auth') {
-            dataStore.showToaster('error', error.stack, 5000);
+          if (error.response.status >= 500) {
+            if (router.currentRoute.value.name !== 'Auth') {
+              dataStore.showToaster('error', error.stack ?? dataStore.t('toaster.error'), 5000);
+            }
           }
         }
       }

package/components/Button/Btn.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    class="transition-all"
+    class="transition-all border-solid"
     @click="$emit('clicked')"
     :disabled="disabled || loading"
     :class="[
@@ -12,7 +12,7 @@
     ]"
   >
     <base-loader v-if="loading" :size="24" color="#FFF" bg-color="" :width="2" />
-    <span v-if="!loading">{{ text }}</span>
+    <span class="!text-inherit" v-if="!loading">{{ text }}</span>
   </button>
 </template>
 

package/components/Complex/MessageBlock.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="text-left p-6 mb-4" :class="[color, $styles.rounded, $styles.textTitle]">
-    <v-icon :icon="icon" class="mr-4"></v-icon>
+  <div class="text-left p-6" :class="[color, $styles.rounded, $styles.textTitle]">
+    <v-icon :icon="icon" class="mr-4" />
     {{ text }}
   </div>
 </template>

package/components/Complex/Page.vue

@@ -33,7 +33,7 @@ export default defineComponent({
     },
     moreIcon: {
       type: String,
-      default: 'mdi-cog-outline',
+      default: 'mdi-dots-vertical',
     },
     title: {
       type: String,

package/components/Dialog/Dialog.vue

@@ -1,18 +1,25 @@
 <template>
-  <v-dialog :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)" :persistent="true">
-    <v-card class="self-center w-full sm:w-3/4 md:w-2/3 lg:w-2/4 xl:w-[600px] rounded-lg !p-2">
-      <v-card-title>
-        <slot v-if="!title" name="title"></slot>
-        {{ title }}
-        <v-btn class="!absolute top-2 right-3" icon="mdi mdi-window-close" variant="plain" @click="$emit('update:modelValue', null)" />
-      </v-card-title>
-      <v-card-subtitle>
-        <slot v-if="!subtitle" name="subtitle"></slot>
-        {{ subtitle }}
-      </v-card-subtitle>
-      <v-card-actions class="gap-[16px] m-2">
-        <base-btn v-if="actions === 'default'" class="!w-fit px-6" size="sm" :text="$dataStore.t('confirm.yes')" :btn="$styles.blueBtn" @click="$emit('yes')" />
-        <base-btn v-if="actions === 'default'" class="!w-fit px-6" size="sm" :text="$dataStore.t('confirm.no')" :btn="$styles.blueBtn" @click="$emit('no')" />
+  <v-dialog class="base-dialog" :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)" :persistent="true">
+    <v-card class="self-center w-full sm:w-4/4 md:w-2/3 lg:w-[35%] xl:w-[500px] rounded-lg !p-[36px]">
+      <div class="flex sm:flex-row flex-col place-items-center sm:place-items-start">
+        <div class="h-20 w-20 place-items-start pt-1">
+          <div class="bg-[#F7F7F7] h-24 w-24 sm:h-16 sm:w-16 rounded grid place-items-center invisible sm:visible">
+            <i :class="'mdi-' + icon.mdi" class="mdi text-[100px] sm:text-[30px] color-blue visible !ml-[-10px] sm:!ml-[0px] mt-[-50px] sm:mt-0" :style="{ color: icon.color }"></i>
+          </div>
+        </div>
+        <v-card-title class="!text-center sm:!text-start text-[34px]">
+          <slot v-if="!title" name="title"></slot>
+          <div></div>
+          {{ title }}
+          <v-card-subtitle class="!p-0">
+            <slot v-if="!subtitle" name="subtitle"></slot>
+            {{ subtitle }}
+          </v-card-subtitle>
+        </v-card-title>
+      </div>
+      <v-card-actions class="!p-0 pt-5 gap-[16px] sm:flex-row flex-col place-items-stretch sm:place-items-center">
+        <base-btn v-if="actions === 'default'" class="px-6" size="sm" :text="confirm" :btn="$styles.whiteBorderBtn" :classes="$styles.blueText" @click="$emit('yes')" />
+        <base-btn v-if="actions === 'default'" class="px-6" size="sm" :text="$dataStore.t('confirm.cancel')" :btn="$styles.blueBtn" @click="$emit('no')" />
         <slot v-if="actions !== 'default'" name="actions"></slot>
       </v-card-actions>
     </v-card>
@@ -29,7 +36,7 @@ export default defineComponent({
     title: {
       type: String,
       default() {
-        return useDataStore().t('dialog.title');
+        return useDataStore().t('dialog.confirmDo');
       },
     },
     subtitle: {
@@ -40,7 +47,45 @@ export default defineComponent({
       type: String,
       default: 'default',
     },
+    confirm: {
+      type: String,
+      default() {
+        return useDataStore().t('confirm.yes');
+      },
+    },
+    icon: {
+      type: Object as PropType<{ mdi?: string; color?: string; bg?: string }>,
+      default: {
+        mdi: 'information',
+        color: '#FAB31C',
+      },
+    },
   },
   emits: ['update:modelValue', 'yes', 'no'],
 });
 </script>
+<style>
+.base-dialog .v-card-title {
+  font-size: 18px;
+}
+.base-dialog .v-card-subtitle {
+  font-size: 14px;
+}
+@media (max-width: 640px) {
+  .base-dialog .v-card-title {
+    margin-top: 10px;
+    font-size: 20px;
+  }
+  .base-dialog .v-card-subtitle {
+    font-size: 14px;
+  }
+}
+.base-dialog .v-card-title,
+.base-dialog .v-card-subtitle {
+  padding-top: 0;
+  flex: 1;
+  overflow-wrap: normal;
+  overflow: visible;
+  white-space: normal;
+}
+</style>

package/components/Form/DynamicForm.vue

@@ -0,0 +1,100 @@
+<template>
+  <v-form class="dynamic-form">
+    <base-form-section v-for="(section, sectionIndex) in form.sections" :key="sectionIndex" class="rounded-lg" :title="section.title">
+      <base-dynamic-input :fields="section.fields" @onClickField="onClickField" />
+    </base-form-section>
+    <Teleport v-if="isPanelOpen" to="#right-panel-actions">
+      <div :class="[$styles.scrollPage]" class="flex flex-col items-center">
+        <base-rounded-input v-model="searchQuery" :label="$dataStore.t('labels.search')" class="w-full p-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"
+            @click="pickPanelValue(item)"
+          />
+        </div>
+        <base-loader v-if="isPanelLoading" class="absolute mt-10" :size="50" />
+      </div>
+    </Teleport>
+  </v-form>
+</template>
+
+<script lang="ts">
+import { Value } from '#imports';
+
+export default defineComponent({
+  props: {
+    form: {
+      type: Object as PropType<DynamicForm>,
+      required: true,
+    },
+  },
+  setup() {
+    const dataStore = useDataStore();
+    const isPanelOpen = ref<boolean>(false);
+    const panelValue = ref<any>(new Value());
+    const panelList = ref<Value[]>([]);
+    const isPanelLoading = ref<boolean>(false);
+    const searchQuery = ref<string>('');
+    const listOfPanelTitles: {
+      [key in FetchFunctions]: string;
+    } = {
+      getResidents: 'form.signOfResidency',
+      getFamilyStatuses: 'form.familyStatus',
+      getRelationTypes: 'form.relations',
+      getCountries: 'form.Country',
+      getLocalityTypes: 'form.RegionType',
+      getStates: 'form.Province',
+      getCities: 'form.City',
+      getRegions: 'form.Region',
+      getDocumentTypes: 'form.documentType',
+      getTaxCountries: 'form.countryOfTaxResidency',
+      getCitizenshipCountries: 'form.countryOfCitizenship',
+      getSectorCodeList: 'form.economySectorCode',
+      getInsurancePay: 'form.insurancePay',
+      getEconomicActivityType: 'form.typeEconomicActivity',
+      getBanks: 'form.bankName',
+      getDocumentIssuers: 'form.documentIssuers',
+      getGenderList: 'form.gender',
+    };
+
+    const currentField = ref<InputType | null>(null);
+
+    const pickPanelValue = (item: Value) => {
+      if (currentField.value) {
+        currentField.value.modelValue = item;
+        dataStore.rightPanel.open = false;
+        searchQuery.value = '';
+        currentField.value = null;
+      }
+      isPanelOpen.value = false;
+    };
+
+    const onClickField = async (field: InputType) => {
+      currentField.value = field;
+      if (field.fetchFrom) {
+        isPanelLoading.value = true;
+        isPanelOpen.value = true;
+        dataStore.rightPanel.open = true;
+        dataStore.rightPanel.title = dataStore.t(listOfPanelTitles[field.fetchFrom]);
+        panelValue.value = field.modelValue;
+        panelList.value = (await dataStore[field.fetchFrom]()) as Value[];
+        isPanelLoading.value = false;
+      }
+    };
+
+    return {
+      panelValue,
+      panelList,
+      isPanelOpen,
+      isPanelLoading,
+      searchQuery,
+      pickPanelValue,
+      onClickField,
+    };
+  },
+});
+</script>

package/components/Form/FormBlock.vue

@@ -6,7 +6,7 @@
         <div
           v-if="isMultiple && more && !isShort && isActionsAvailable"
           :class="[$styles.blueBg, $styles.whiteText, $styles.textSimple, disabled ? $styles.disabled : 'cursor-pointer']"
-          class="lg:flex transition-all rounded-lg h-[36px] flex items-center font-medium justify-center opacity-50 hover:opacity-90 w-[120px]"
+          class="hidden lg:flex transition-all rounded-lg h-[36px] items-center font-medium justify-center opacity-50 hover:opacity-90 w-[120px]"
           @click="!disabled && memberStore.addMember(whichForm)"
         >
           {{ $dataStore.t('buttons.add') }}
@@ -33,7 +33,7 @@
         :class="[isShort ? 'grid-cols-2 md:gap-5 md:grid-cols-2 lg:grid-cols-2' : 'grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7']"
       >
         <span :class="[getMemberInfo(each).fullName === null && $styles.emptyBlockCol]">{{ getMemberInfo(each).fullName }}</span>
-        <span :class="[getMemberInfo(each).iin === null && $styles.emptyBlockCol]">{{ getMemberInfo(each).iin }}</span>
+        <span :class="[getMemberInfo(each).iin === null && $styles.emptyBlockCol]">{{ getMemberIIN(each) }}</span>
         <span v-if="!isShort" :class="[getMemberInfo(each).gender === null && $styles.emptyBlockCol]" class="hidden lg:block">{{ getMemberInfo(each).gender }} </span>
         <span v-if="!isShort" :class="[getMemberInfo(each).birthDate === null && $styles.emptyBlockCol]"> {{ getMemberInfo(each).birthDate }} </span>
         <span v-if="!isShort" :class="[getMemberInfo(each).birthPlace === null && $styles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(each).birthPlace }} </span>
@@ -75,7 +75,7 @@
     <div
       v-if="isMultiple && more && !isShort && isActionsAvailable"
       :class="[$styles.blueBg, $styles.whiteText, $styles.textSimple, disabled ? $styles.disabled : 'cursor-pointer']"
-      class="lg:hidden transition-all rounded-b-lg h-[36px] flex items-center font-medium justify-center opacity-50 hover:opacity-90"
+      class="flex lg:hidden transition-all rounded-b-lg h-[36px] items-center font-medium justify-center opacity-50 hover:opacity-90"
       @click="!disabled && memberStore.addMember(whichForm)"
     >
       {{ $dataStore.t('buttons.add') }}
@@ -116,6 +116,7 @@ export default defineComponent({
   },
   emits: ['onMore', 'addMember'],
   setup(props) {
+    const dataStore = useDataStore();
     const formStore = useFormStore();
     const memberStore = useMemberStore();
     const isMultiple = computed(() => [StoreMembers.insuredForm, StoreMembers.beneficiaryForm, StoreMembers.beneficialOwnerForm].includes(props.whichForm as StoreMembers));
@@ -128,6 +129,13 @@ export default defineComponent({
 
     const isShort = computed(() => props.type === 'short');
     const isActionsAvailable = computed(() => memberStore.isStatementEditible(props.whichForm));
+    const getMemberIIN = (each: Member) => {
+      const iin = getMemberInfo(each).iin;
+      if (dataStore.isFinCenter() && iin) {
+        return iin.replaceAll('-', '');
+      }
+      return iin;
+    };
 
     const getMemberInfo = (memberData: Member) => {
       return {
@@ -153,6 +161,7 @@ export default defineComponent({
       isActionsAvailable,
 
       // Functions
+      getMemberIIN,
       getMemberInfo,
     };
   },

package/components/Form/FormData.vue

@@ -0,0 +1,114 @@
+<template>
+  <base-animation :type="animation">
+    <div
+      v-if="block && !!block.show === true"
+      class="form-data-block rounded-lg border-[1px] relative transition-all"
+      :class="[$styles.whiteBg, block.disabled && $styles.disabled]"
+    >
+      <div class="py-3 px-6">
+        <div class="flex items-center justify-between">
+          <p :class="[$styles.textTitle, $styles.greenText]">{{ block.title }}</p>
+          <div
+            v-if="typeof block.headerBtn === 'object'"
+            :class="[$styles.blueBg, $styles.whiteText, $styles.textSimple, block.disabled ? $styles.disabled : 'cursor-pointer']"
+            class="hidden lg:flex transition-all rounded-lg h-[36px] items-center font-medium justify-center opacity-50 hover:opacity-90 w-[120px]"
+            @click="!block.disabled && block.headerBtn.action()"
+          >
+            {{ block.headerBtn.text }}
+          </div>
+        </div>
+        <p v-if="block.subtitle" :class="[$styles.greyText, $styles.textSimple]">{{ block.subtitle }}</p>
+        <v-row class="mt-1 max-w-[97%]">
+          <v-col v-for="(label, index) in visibleLabels" :key="index" :cols="block.shrinkLabels === true ? false : label.size">
+            <p :class="[$styles.textSimple]" class="font-medium">
+              {{ label.text }}
+            </p>
+          </v-col>
+        </v-row>
+        <div v-if="hasBlockData(block.data)">
+          <v-row v-for="(row, index) in getBlockDataValue(block.data)" :key="index" class="min-h-[65px] max-w-[97%]">
+            <v-col
+              v-if="row.every((i: any) => !!i)"
+              v-for="each of row.filter((_: any, i: number) => $display().lgAndUp.value ? true : block.labels[i].hideOnMobile === false)"
+              :key="each"
+            >
+              <p :class="[$styles.textSimple]">
+                {{ each }}
+              </p>
+            </v-col>
+            <v-col v-else :class="[$styles.textSimple, $styles.blueText]">{{ block.noValueText ?? $dataStore.t('clients.necessaryFillForm') }}</v-col>
+            <base-animation type="fade">
+              <div
+                v-if="block.btn && !!block.btn.showBtn === true"
+                class="absolute right-0 rounded-br-lg transition-all h-[70px] w-[60px] place-self-end flex items-center justify-center"
+                :class="[$styles.blueBgLight, $styles.blueBgLightHover, block.disabled ? $styles.disabled : 'cursor-pointer']"
+                @click="!block.disabled && block.btn.action({ value: row, index: index })"
+              >
+                <i class="mdi text-xl" :class="[block.btn.icon]"></i>
+              </div>
+            </base-animation>
+          </v-row>
+        </div>
+      </div>
+      <div
+        v-if="typeof block.headerBtn === 'object'"
+        :class="[$styles.blueBg, $styles.whiteText, $styles.textSimple, block.disabled ? $styles.disabled : 'cursor-pointer']"
+        class="flex lg:hidden transition-all rounded-b-lg h-[36px] items-center font-medium justify-center opacity-50 hover:opacity-90"
+        @click="!block.disabled && block.headerBtn.action()"
+      >
+        {{ block.headerBtn.text }}
+      </div>
+    </div>
+  </base-animation>
+</template>
+
+<script lang="ts">
+import { ComputedRefWithControl } from '@vueuse/core';
+import { FormBlock } from '../../composables/fields';
+
+export default defineComponent({
+  props: {
+    block: {
+      type: Object as PropType<FormBlock>,
+      required: true,
+    },
+    animation: {
+      type: String as PropType<VuetifyAnimations>,
+      required: false,
+    },
+  },
+  setup(props) {
+    const display = useDisplayInfo();
+    const visibleLabels = computed(() => (display.lgAndUp.value ? props.block.labels : props.block.labels.filter(i => i.hideOnMobile === false)));
+
+    const hasBlockData = (data: ComputedRefWithControl<any> | string[][]) => {
+      if (data) {
+        if ('value' in data && data.value && data.value.length) {
+          return true;
+        }
+        if ('value' in data === false && Array.isArray(data) && data.length) {
+          return true;
+        }
+      }
+      return false;
+    };
+    const getBlockDataValue = (data: ComputedRefWithControl<any> | string[][]) => ('value' in data ? data.value : data);
+
+    return {
+      // Computed
+      visibleLabels,
+
+      // Functions
+      hasBlockData,
+      getBlockDataValue,
+    };
+  },
+});
+</script>
+
+<style>
+.form-data-block .v-col {
+  display: flex;
+  align-items: center;
+}
+</style>

package/components/Form/FormToggle.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="h-[74px] !pl-2 md:!pl-5 flex items-center justify-start gap-4"
+    class="min-h-[74px] !pl-2 md:!pl-5 flex items-center justify-start gap-5"
     :class="[$styles.whiteBg, hasBorder ? 'border-[1px] rounded-lg' : 'border-b-[1px] border-b-[#f3f6fc] rounded']"
   >
     <v-switch
@@ -14,8 +14,10 @@
       hide-details
       :disabled="disabled"
     />
-    <p :class="[$styles.textSimple]">{{ `${title}` }}</p>
-    <p class="mr-3" :class="[modelValue ? $styles.greenText : '', $styles.textSimple]">{{ `${modelValue ? $dataStore.t('confirm.yes') : $dataStore.t('confirm.no')}` }}</p>
+    <p class="p-2" :class="[$styles.textSimple]">{{ `${title}` }}</p>
+    <p v-if="showValue" class="mr-3" :class="[modelValue ? $styles.greenText : '', $styles.textSimple]">
+      {{ `${modelValue ? $dataStore.t('confirm.yes') : $dataStore.t('confirm.no')}` }}
+    </p>
   </div>
 </template>
 
@@ -38,6 +40,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    showValue: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ['update:modelValue', 'clicked'],
 });