hl-core 0.0.7-beta.12 → 0.0.7-beta.14

package/api/index.ts

@@ -7,13 +7,8 @@ enum Methods {
 }
 
 export class ApiClass {
-  baseURL: string | undefined;
-  productUrl: string | undefined;
-
-  constructor(baseURL?: string | undefined, productUrl?: string | undefined) {
-    this.baseURL = baseURL;
-    this.productUrl = productUrl;
-  }
+  private readonly baseURL: string = import.meta.env.VITE_BASE_URL as string;
+  private readonly productUrl: string = import.meta.env.VITE_PRODUCT_URL as string;
 
   private async axiosCall(config: AxiosRequestConfig) {
     const dataStore = useDataStore();
@@ -26,7 +21,7 @@ export class ApiClass {
     }
   }
 
-  async loginUser(data: { login: string; password: string; numAttempt: number }) {
+  async loginUser(data: { login: string; password: string; numAttempt: number }): Promise<{ refreshToken: string; accessToken: string }> {
     return this.axiosCall({
       method: Methods.POST,
       url: '/identity/api/Account/login',
@@ -34,7 +29,7 @@ export class ApiClass {
     });
   }
 
-  async getNewAccessToken({ refreshToken, accessToken }: { refreshToken: string; accessToken: string }) {
+  async getNewAccessToken({ refreshToken, accessToken }: { refreshToken: string; accessToken: string }): Promise<{ refreshToken: string; accessToken: string }> {
     return this.axiosCall({
       method: Methods.POST,
       url: '/identity/api/Account/refresh',

package/api/interceptors.ts

@@ -19,6 +19,8 @@ export default function (axios: AxiosInstance) {
       const dataStore = useDataStore();
       const router = useRouter();
       if (error.response.status === 401) {
+        dataStore.$reset();
+        localStorage.clear();
         if (dataStore.isEFO) {
           router.push({ name: 'Auth', query: { error: 401 } });
         } else {
@@ -30,8 +32,6 @@ export default function (axios: AxiosInstance) {
           router.push({ name: '500', query: { stack: error.stack } });
         }
       }
-      dataStore.$reset();
-      localStorage.clear();
       return Promise.reject(error);
     },
   );

package/components/Form/FormBlock.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="pt-3 pl-5 rounded border-[1px]" :class="[$libStyles.whiteBg]">
+    <div>
+      <p :class="[$libStyles.textTitle, $libStyles.greenText]">{{ title }}</p>
+      <p v-if="!!subtitle" :class="[$libStyles.greyText, $libStyles.textSimple]">{{ subtitle }}</p>
+    </div>
+    <div class="mt-6 grid grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7 auto-rows-fr items-center">
+      <span :class="[$libStyles.textSimple]" class="font-medium">{{ $t('form.fullName') }}</span>
+      <span :class="[$libStyles.textSimple]" class="font-medium">{{ $t('form.iin') }}</span>
+      <span :class="[$libStyles.textSimple]" class="font-medium hidden lg:block"> {{ $t('form.gender') }}</span>
+      <span :class="[$libStyles.textSimple]" class="font-medium"> {{ $t('form.birthDate') }} </span>
+      <span :class="[$libStyles.textSimple]" class="font-medium hidden lg:block">{{ $t('form.Country') }} </span>
+      <span :class="[$libStyles.textSimple]" class="font-medium hidden lg:block"> {{ $t('code') }}</span>
+    </div>
+    <div v-if="isMultiple" class="flex flex-col">
+      <div v-for="(each, index) of member" :key="index" class="grid grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7 auto-rows-fr items-center relative">
+        <span :class="[getMemberInfo(each).fullName === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(each).fullName }}</span>
+        <span :class="[getMemberInfo(each).iin === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(each).iin }}</span>
+        <span :class="[getMemberInfo(each).gender === null && $libStyles.emptyBlockCol]" class="hidden lg:block">{{ getMemberInfo(each).gender }} </span>
+        <span :class="[getMemberInfo(each).birthDate === null && $libStyles.emptyBlockCol]"> {{ getMemberInfo(each).birthDate }} </span>
+        <span :class="[getMemberInfo(each).birthPlace === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(each).birthPlace }} </span>
+        <span :class="[getMemberInfo(each).sectorCode === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(each).sectorCode }} </span>
+        <div
+          class="transition-all h-[70px] w-[60px] place-self-end cursor-pointer"
+          :class="[$libStyles.blueBgLight, $libStyles.blueBgLightHover]"
+          @click="$emit('onMore', { whichForm, index })"
+        >
+          <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"> </i>
+        </div>
+      </div>
+    </div>
+    <div v-else class="grid grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7 auto-rows-fr items-center relative">
+      <span :class="[getMemberInfo(member).fullName === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(member).fullName }}</span>
+      <span :class="[getMemberInfo(member).iin === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(member).iin }}</span>
+      <span :class="[getMemberInfo(member).gender === null && $libStyles.emptyBlockCol]" class="hidden lg:block">{{ getMemberInfo(member).gender }} </span>
+      <span :class="[getMemberInfo(member).birthDate === null && $libStyles.emptyBlockCol]"> {{ getMemberInfo(member).birthDate }} </span>
+      <span :class="[getMemberInfo(member).birthPlace === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(member).birthPlace }} </span>
+      <span :class="[getMemberInfo(member).sectorCode === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(member).sectorCode }} </span>
+      <div
+        class="transition-all h-[70px] w-[60px] place-self-end cursor-pointer"
+        :class="[$libStyles.blueBgLight, $libStyles.blueBgLightHover]"
+        @click="$emit('onMore', { whichForm })"
+      >
+        <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"> </i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    subtitle: {
+      type: String,
+      default: '',
+    },
+    whichForm: {
+      type: String as PropType<'policyholderForm' | 'insuredForm' | 'beneficiaryForm' | 'beneficialOwnerForm' | 'policyholdersRepresentativeForm' | 'productConditionsForm'>,
+      default: '',
+    },
+  },
+  emits: ['onMore'],
+  setup(props) {
+    const dataStore = useDataStore();
+    const formStore = useFormStore();
+    const multipleMembers = ['insuredForm', 'beneficiaryForm', 'beneficialOwnerForm'];
+    const isMultiple = ref(multipleMembers.includes(props.whichForm));
+    const member = formStore[props.whichForm as keyof typeof formStore];
+
+    const getMemberInfo = (memberData: any) => {
+      return {
+        fullName: computed(() => (memberData && memberData.getFullNameShorted() ? memberData.getFullNameShorted() : null)).value,
+        iin: computed(() => (memberData && memberData.iin ? memberData.iin : null)).value,
+        gender: computed(() => (memberData && memberData.gender.nameRu ? memberData.gender.nameRu.charAt(0) : null)).value,
+        birthDate: computed(() => (memberData && memberData.birthDate ? memberData.birthDate : null)).value,
+        birthPlace: computed(() => (memberData && memberData.birthPlace.nameRu ? memberData.birthPlace.nameRu.substr(0, 3) : null)).value,
+        sectorCode: computed(() => (memberData && memberData.economySectorCode.ids ? memberData.economySectorCode.ids.slice(-1) : null)).value,
+      };
+    };
+
+    return {
+      // State
+      formStore,
+      member,
+      isMultiple,
+
+      // Computed
+
+      // Functions
+      getMemberInfo,
+    };
+  },
+});
+</script>

package/components/Form/FormToggle.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="h-[74px] !pl-2 md:!pl-5 rounded border-[1px] flex items-center justify-start gap-4" :class="[$libStyles.whiteBg]">
+    <v-switch class="base-toggle" :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)" color="#009C73" hide-details :disabled="disabled"> </v-switch>
+    <p :class="[$libStyles.textSimple]">{{ `${title}` }}</p>
+    <p class="mr-3" :class="[modelValue ? $libStyles.greenText : '', $libStyles.textSimple]">{{ `${modelValue ? $dataStore.t('confirm.yes') : $dataStore.t('confirm.no')}` }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue'],
+});
+</script>
+
+<style>
+.v-input.base-toggle {
+  width: fit-content;
+  flex: unset !important;
+}
+</style>

package/components/Form/ProductConditionsBlock.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="pt-3 pl-5 rounded border-[1px]" :class="[$libStyles.whiteBg]">
+    <div>
+      <p :class="[$libStyles.textTitle, $libStyles.greenText]">
+        {{ $t('productConditions') }}
+      </p>
+      <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>
+    </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">
+        {{ paymentPeriod }}
+      </span>
+      <div
+        class="transition-all h-[70px] w-[60px] relative place-self-end cursor-pointer"
+        :class="[$libStyles.blueBgLight, $libStyles.blueBgLightHover]"
+        @click="$emit('onMore', { whichForm: 'productConditions' })"
+      >
+        <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"> </i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    subtitle: {
+      type: String,
+      default: '',
+    },
+  },
+  setup() {
+    const formStore = useFormStore();
+
+    const amount = computed(() =>
+      formStore.productConditionsForm && formStore.productConditionsForm.requestedSumInsured ? formStore.productConditionsForm.requestedSumInsured : null,
+    );
+    const premium = computed(() =>
+      formStore.productConditionsForm && formStore.productConditionsForm.insurancePremiumPerMonth ? formStore.productConditionsForm.insurancePremiumPerMonth : 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,
+    );
+    return {
+      // State
+      formStore,
+
+      // Computed
+      amount,
+      premium,
+      coverPeriod,
+      paymentPeriod,
+    };
+  },
+});
+</script>

package/components/Input/FormInput.vue

@@ -1,7 +1,7 @@
 <template>
   <v-text-field
     class="rounded-input"
-    v-model="fieldModel"
+    :model-value="modelValue"
     v-maska="maska"
     :rules="rules"
     :loading="loading"
@@ -17,6 +17,7 @@
     :append-icon="appendIcon ? appendIcon : ''"
     :bg-color="bgColor ? bgColor : ''"
     @keyup.enter.prevent="submitted"
+    @update:modelValue="$emit('update:modelValue', $event)"
   >
     <template v-if="loading" #loader>
       <v-progress-linear :active="loading" :color="color" absolute height="1" indeterminate></v-progress-linear>
@@ -91,26 +92,11 @@ export default defineComponent({
   emits: ['update:modelValue', 'submitted'],
 
   setup(props, { emit }) {
-    const fieldModel = ref(props.modelValue || '');
-
-    const updateValue = (event: any) => {
-      emit('update:modelValue', fieldModel.value);
-    };
-
     const submitted = (event: any) => {
       emit('submitted', event);
     };
 
-    watch(
-      fieldModel,
-      () => {
-        updateValue(fieldModel.value);
-      },
-      { immediate: true },
-    );
-
     return {
-      fieldModel,
       submitted,
     };
   },
@@ -124,11 +110,11 @@ export default defineComponent({
 }
 
 /* .rounded-input .v-field {
-    border-radius: 8px;
-    border: 1px solid #dadada;
-    box-shadow: none;
-    font-size: 14px;
-  } */
+  border-radius: 8px;
+  border: 1px solid #dadada;
+  box-shadow: none;
+  font-size: 14px;
+} */
 
 .rounded-input .v-field--error {
   border-color: #ff5449;

package/components/Input/RoundedInput.vue

@@ -1,7 +1,7 @@
 <template>
   <v-text-field
     class="rounded-input"
-    v-model="fieldModel"
+    :model-value="modelValue"
     v-maska="maska"
     :rules="rules"
     :loading="loading"
@@ -17,6 +17,7 @@
     :append-icon="appendIcon ? appendIcon : ''"
     :bg-color="bgColor ? bgColor : ''"
     @keyup.enter.prevent="submitted"
+    @update:modelValue="$emit('update:modelValue', $event)"
   >
     <template v-if="loading" #loader>
       <v-progress-linear :active="loading" :color="color" absolute height="1" indeterminate></v-progress-linear>
@@ -91,26 +92,11 @@ export default defineComponent({
   emits: ['update:modelValue', 'submitted'],
 
   setup(props, { emit }) {
-    const fieldModel = ref(props.modelValue || '');
-
-    const updateValue = (event: any) => {
-      emit('update:modelValue', fieldModel.value);
-    };
-
     const submitted = (event: any) => {
       emit('submitted', event);
     };
 
-    watch(
-      fieldModel,
-      () => {
-        updateValue(fieldModel.value);
-      },
-      { immediate: true },
-    );
-
     return {
-      fieldModel,
       submitted,
     };
   },

package/components/Panel/PanelItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="transition-all h-[64px] px-4 flex justify-between items-center border-b-[1px] hover:border-b-[#A0B3D8]">
+  <p class="transition-all h-[64px] px-4 flex justify-between items-center border-b-[1px] hover:border-b-[#A0B3D8] text-[16px]">
     <slot></slot>
-  </span>
+  </p>
 </template>

package/composables/classes.ts

@@ -159,7 +159,7 @@ export const InitialColumns = () => {
 export class User {
   login: string | null;
   password: string | null;
-  roles: string[] | null;
+  roles: string[];
   id: string | null;
   fullName: string | null;
 
@@ -761,7 +761,7 @@ export class ProductConditions {
 
 export class DataStoreClass {
   hasLayoutMargins: boolean;
-  product: string | null;
+  readonly product: string | null;
   showNav: boolean;
   menuItems: MenuItem[];
   menu: {
@@ -784,6 +784,7 @@ export class DataStoreClass {
     open: boolean;
     overlay: boolean;
     title: string;
+    clear: Function | void;
   };
   historyPageIndex: number;
   historyPageSize: number;
@@ -871,7 +872,7 @@ export class DataStoreClass {
     this.ManagerPolicyList = [];
     this.AgentDataList = [];
     this.signUrl = null;
-    this.product = null;
+    this.product = import.meta.env.VITE_PRODUCT ? (import.meta.env.VITE_PRODUCT as string) : null;
     this.showNav = true;
     this.menuItems = [];
     this.menu = {
@@ -893,6 +894,12 @@ export class DataStoreClass {
       open: false,
       overlay: false,
       title: '',
+      clear: function () {
+        const panelActions = document.getElementById('panel-actions');
+        if (panelActions) {
+          panelActions.innerHTML = '';
+        }
+      },
     };
     this.panelAction = null;
     this.historyPageIndex = 1;
@@ -1003,7 +1010,17 @@ export class FormStoreClass {
   isPolicyholderBeneficiary: boolean = false;
   isActOwnBehalf: boolean = true;
   hasRepresentative: boolean = false;
-  applicationData: { processInstanceId: number | string };
+  isPolicyholderIPDL: boolean = false;
+  applicationData: {
+    processInstanceId: number | string;
+    statusCode?: string | null;
+    clientApp?: any;
+    insuredApp?: any;
+    beneficiaryApp?: any;
+    beneficialOwnerApp?: any;
+    spokesmanApp?: any;
+    isTask?: boolean | null;
+  };
   policyholderForm: PolicyholderForm;
   policyholderFormKey: string;
   policyholdersRepresentativeForm: PolicyholdersRepresentativeForm;
@@ -1024,7 +1041,7 @@ export class FormStoreClass {
   canBeClaimed: boolean | null;
   applicationTaskId: string | null;
   otpTokenId: string | null;
-  constructor(procuctConditionsTitle: string) {
+  constructor(procuctConditionsTitle?: string) {
     this.birthInfos = [];
     this.SaleChanellPolicy = new Value();
     this.AgentData = {

package/composables/index.ts

@@ -1,6 +1,7 @@
 import { useDisplay } from 'vuetify';
 import jwt_decode from 'jwt-decode';
 import { XMLParser } from 'fast-xml-parser';
+import { AxiosError } from 'axios';
 
 export const useDisplayInfo = useDisplay;
 
@@ -135,3 +136,13 @@ export const ESBDMessage = (ESBDObject: any, initialPoint: any) => {
   }
   return result;
 };
+
+export const ErrorHandler = (err: unknown) => {
+  console.log(err);
+  if (err instanceof AxiosError) {
+    if ('response' in err && err.response && err.response.data) {
+      useDataStore().showToaster('error', err.response.data);
+    }
+  }
+  return false;
+};

package/composables/styles.ts

@@ -10,7 +10,7 @@ export class Styles {
   blueBg: string = 'bg-[#A0B3D8]';
   blueBgHover: string = 'hover:bg-[#96abd6]';
   blueBgLight: string = 'bg-[#F3F6FC]';
-  blueBgLightHover: string = 'hover:bg-[#F3F6FC]';
+  blueBgLightHover: string = 'hover:bg-[#f5f8fd]';
   blueText: string = 'text-[#A0B3D8]';
   blueTextLight: string = 'text-[#F3F6FC]';
 
@@ -58,6 +58,8 @@ export class Styles {
 
   // Complex
   flexColNav: string;
+  emptyBlockCol: string;
+  scrollPage: string;
 
   // Muted or disabled
   mutedText: string = 'text-[#99A3B3]';
@@ -72,5 +74,7 @@ export class Styles {
 
     // Complex
     this.flexColNav = 'flex flex-col gap-[10px] px-2 pt-[14px]';
+    this.emptyBlockCol = 'w-[110px] h-[30%] rounded-[8px] bg-[#f5f5f5]';
+    this.scrollPage = 'max-h-[90vh] overflow-y-scroll';
   }
 }

package/layouts/default.vue

@@ -37,22 +37,29 @@ const openSettings = async () => {
 </script>
 <style>
 .mainpage,
-label .v-label .v-field-label,
-.v-field__input,
-.v-label.v-field-label,
-.v-field,
-.v-input,
 span,
 header,
-p {
+*[class='text-[14px]'],
+.text-\[14px\] {
   font-size: v-bind('dataStore.fontSize + "px"') !important;
-  line-height: v-bind('dataStore.fontSize*1.5 + "px"') !important;
+  /* line-height: v-bind('dataStore.fontSize*1.5 + "px"') !important; */
+}
+
+*[class='text-[16px]'],
+.text-\[16px\],
+label .v-label .v-field-label,
+.v-field__input,
+.v-label,
+.v-field,
+.v-input {
+  font-size: v-bind('dataStore.fontSize+2 + "px"') !important;
+  /* line-height: v-bind('dataStore.fontSize*2 + "px"') !important; */
 }
 
 .v-input__details,
 .v-messages__message {
   font-size: v-bind('dataStore.fontSize*0.8 + "px"') !important;
-  line-height: v-bind('dataStore.fontSize*1 + "px"') !important;
+  /* line-height: v-bind('dataStore.fontSize*1 + "px"') !important; */
   padding-bottom: 3px;
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hl-core",
-  "version": "0.0.7-beta.12",
+  "version": "0.0.7-beta.14",
   "license": "MIT",
   "private": false,
   "main": "nuxt.config.ts",

package/store/data.store.js

@@ -1400,7 +1400,7 @@ export const useDataStore = defineStore('data', {
         this.isLoading = true;
         this.AgentDataList = await this.api.searchAgentByName(name);
         if (!this.AgentDataList.length) {
-          showToaster('error', this.t('toaster.notFound'), 1500);
+          this.showToaster('error', this.t('toaster.notFound'), 1500);
         }
       } catch (err) {
         console.log(err);
@@ -1476,7 +1476,7 @@ export const useDataStore = defineStore('data', {
       try {
         this.isLoading = true;
         await this.api.setConfirmation(data);
-        showToaster('success', this.t('toaster.successSaved'));
+        this.showToaster('success', this.t('toaster.successSaved'));
         return true;
       } catch (err) {
         this.showToaster('error', this.t('toaster.error'));
@@ -1489,7 +1489,7 @@ export const useDataStore = defineStore('data', {
       try {
         this.isLoading = true;
         await this.api.sendUnderwritingCouncilTask(data);
-        showToaster('success', this.t('toaster.successOperation'), 5000);
+        this.showToaster('success', this.t('toaster.successOperation'), 5000);
         return true;
       } catch (err) {
         console.log(err);
@@ -2532,7 +2532,7 @@ export const useDataStore = defineStore('data', {
         );
       } catch (err) {
         console.log(err);
-        showToaster('error', err.response.data, 3000);
+        this.showToaster('error', err.response.data, 3000);
       }
     },
     async sendOtp(iin, phone, processInstanceId = null, onInit = false) {
@@ -2543,7 +2543,7 @@ export const useDataStore = defineStore('data', {
         if (iin && iin.length === 15 && phone && phone.length === 18) {
           const status = await this.getOtpStatus(iin, phone, processInstanceId);
           if (status === true) {
-            showToaster('success', this.t('toaster.hasSuccessOtp'), 3000);
+            this.showToaster('success', this.t('toaster.hasSuccessOtp'), 3000);
             otpStatus = true;
             this.isLoading = false;
             return { otpStatus, otpResponse };
@@ -2564,31 +2564,31 @@ export const useDataStore = defineStore('data', {
             this.isLoading = false;
             if (!!otpResponse) {
               if ('errMessage' in otpResponse && otpResponse.errMessage !== null) {
-                showToaster('error', otpResponse.errMessage, 3000);
+                this.showToaster('error', otpResponse.errMessage, 3000);
                 return { otpStatus };
               }
               if ('result' in otpResponse && otpResponse.result === null) {
                 if ('statusName' in otpResponse && !!otpResponse.statusName) {
-                  showToaster('error', otpResponse.statusName, 3000);
+                  this.showToaster('error', otpResponse.statusName, 3000);
                   return { otpStatus };
                 }
                 if ('status' in otpResponse && !!otpResponse.status) {
-                  showToaster('error', otpResponse.status, 3000);
+                  this.showToaster('error', otpResponse.status, 3000);
                   return { otpStatus };
                 }
               }
               if ('tokenId' in otpResponse && otpResponse.tokenId) {
                 this.formStore.otpTokenId = otpResponse.tokenId;
-                showToaster('success', this.t('toaster.successOtp'), 3000);
+                this.showToaster('success', this.t('toaster.successOtp'), 3000);
               }
             } else {
-              showToaster('error', this.t('toaster.undefinedError'), 3000);
+              this.showToaster('error', this.t('toaster.undefinedError'), 3000);
               return { otpStatus };
             }
           }
         } else {
           if (onInit === false) {
-            showToaster('error', this.t('toaster.errorFormField', { text: 'Номер телефона, ИИН' }));
+            this.showToaster('error', this.t('toaster.errorFormField', { text: 'Номер телефона, ИИН' }));
             this.isLoading = false;
           }
         }
@@ -2597,11 +2597,11 @@ export const useDataStore = defineStore('data', {
         this.isLoading = false;
         if ('response' in err) {
           if ('statusName' in err.response.data && !!err.response.data.statusName) {
-            showToaster('error', this.t('toaster.phoneNotFoundInBMG'), 3000);
+            this.showToaster('error', this.t('toaster.phoneNotFoundInBMG'), 3000);
             return { otpStatus };
           }
           if ('status' in err.response.data && !!err.response.data.status) {
-            showToaster('error', err.response.data.status, 3000);
+            this.showToaster('error', err.response.data.status, 3000);
             return { otpStatus };
           }
         }

package/store/member.store.ts

@@ -0,0 +1,143 @@
+import { defineStore } from 'pinia';
+import { useDataStore } from './data.store';
+import { useFormStore } from './form.store';
+import { ErrorHandler } from '../composables';
+
+export const useMemberStore = defineStore('members', {
+  state: () => ({
+    route: useRoute(),
+    router: useRouter(),
+    dataStore: useDataStore(),
+    formStore: useFormStore(),
+  }),
+  getters: {},
+  actions: {
+    hasMemberData(whichForm: keyof typeof this.formStore, whichIndex?: number, key: string = 'id', emptyValue: any = 0) {
+      if (!this.validateInitiator(false)) return false;
+      return typeof whichIndex === 'number' ? this.formStore[whichForm][whichIndex][key] != emptyValue : this.formStore[whichForm][key] != emptyValue;
+    },
+    canMemberDeleted(whichForm: keyof typeof this.formStore, whichIndex?: number) {
+      if (!whichForm) return false;
+      if (!this.validateInitiator(false)) return false;
+      if (this.dataStore.isTask() && this.dataStore.isProcessEditable(this.formStore.applicationData.statusCode)) {
+        if (whichForm !== this.formStore.policyholderFormKey) {
+          return this.hasMemberData(whichForm, whichIndex);
+        }
+      }
+      return false;
+    },
+    getMemberFromStore(whichForm: keyof typeof this.formStore, whichIndex?: number) {
+      if (!whichForm) return false;
+      switch (whichForm) {
+        case this.formStore.policyholderFormKey:
+          return this.formStore.policyholderForm;
+        case this.formStore.policyholdersRepresentativeFormKey:
+          return this.formStore.policyholdersRepresentativeForm;
+        case this.formStore.insuredFormKey:
+          return this.formStore.insuredForm[whichIndex!];
+        case this.formStore.beneficiaryFormKey:
+          return this.formStore.beneficiaryForm[whichIndex!];
+        case this.formStore.beneficialOwnerFormKey:
+          return this.formStore.beneficialOwnerForm[whichIndex!];
+      }
+    },
+    getMemberFromApplication(whichForm: keyof typeof this.formStore, whichIndex?: number) {
+      const id = typeof whichIndex === 'number' ? this.formStore[whichForm][whichIndex].id : this.formStore[whichForm].id;
+      switch (whichForm) {
+        case this.formStore.policyholderFormKey:
+          return this.formStore.applicationData.clientApp;
+        case this.formStore.policyholdersRepresentativeFormKey:
+          return this.formStore.applicationData.spokesmanApp;
+        case this.formStore.insuredFormKey: {
+          const inStore = this.formStore.applicationData.insuredApp.find((member: any) => member.insisId === id);
+          return !!inStore ? inStore : false;
+        }
+        case this.formStore.beneficiaryFormKey: {
+          const inStore = this.formStore.applicationData.beneficiaryApp.find((member: any) => member.insisId === id);
+          return !!inStore ? inStore : false;
+        }
+        case this.formStore.beneficialOwnerFormKey: {
+          const inStore = this.formStore.applicationData.beneficialOwnerApp.find((member: any) => member.insisId === id);
+          return !!inStore ? inStore : false;
+        }
+      }
+    },
+    getMemberClass(whichForm: keyof typeof this.formStore) {
+      if (!whichForm) return false;
+      switch (whichForm) {
+        case this.formStore.policyholderFormKey:
+          return new PolicyholderForm();
+        case this.formStore.insuredFormKey:
+          return new InsuredForm();
+        case this.formStore.beneficiaryFormKey:
+          return new BeneficiaryForm();
+        case this.formStore.beneficialOwnerFormKey:
+          return new BeneficialOwnerForm();
+        case this.formStore.policyholdersRepresentativeFormKey:
+          return new PolicyholdersRepresentativeForm();
+        default:
+          return false;
+      }
+    },
+    getMemberCode(whichForm: keyof typeof this.formStore) {
+      switch (whichForm) {
+        case this.formStore.insuredFormKey:
+          return 'Insured';
+        case this.formStore.beneficiaryFormKey:
+          return 'Beneficiary';
+        case this.formStore.beneficialOwnerFormKey:
+          return 'BeneficialOwner';
+        case this.formStore.policyholdersRepresentativeFormKey:
+          return 'Spokesman';
+      }
+    },
+    validateInitiator(showToaster: boolean = true) {
+      if (!this.dataStore.isInitiator()) {
+        if (showToaster) this.dataStore.showToaster('error', this.dataStore.t('toaster.viewErrorText'));
+        return false;
+      }
+      return true;
+    },
+    clearMember(whichForm: keyof typeof this.formStore, whichIndex?: number) {
+      if (!whichForm) return false;
+      if (!this.validateInitiator()) return false;
+      const memberClass = this.getMemberClass(whichForm);
+      if (!memberClass) return false;
+      if (whichForm === this.formStore.policyholderFormKey) {
+        this.formStore[whichForm].resetForm();
+      }
+      if (whichForm === this.formStore.policyholdersRepresentativeFormKey) {
+        this.formStore[whichForm].resetMember();
+      }
+      if (typeof whichIndex === 'number') {
+        if (this.formStore[whichForm].length === 1) {
+          this.formStore[whichForm][whichIndex] = memberClass;
+        } else {
+          this.formStore[whichForm].splice(whichIndex, 1);
+        }
+      }
+      return true;
+    },
+    async deleteMember(whichForm: keyof typeof this.formStore, whichIndex?: number) {
+      if (!whichForm) return false;
+      if (!this.validateInitiator()) return false;
+      try {
+        const memberCode = this.getMemberCode(whichForm);
+        if (!memberCode) return false;
+        if (typeof whichIndex !== 'number') {
+          if (whichForm === this.formStore.policyholdersRepresentativeFormKey) {
+            await this.dataStore.api.deleteMember(memberCode, this.formStore.applicationData.processInstanceId);
+          }
+        } else {
+          const memberData = this.getMemberFromApplication(whichForm, whichIndex);
+          if (!memberData) return false;
+          await this.dataStore.api.deleteMember(memberCode, memberData.id as number);
+        }
+        await this.dataStore.getApplicationData(this.route.params.taskId, true, true, true, false);
+        return this.clearMember(whichForm, whichIndex);
+      } catch (err) {
+        return ErrorHandler(err);
+      }
+    },
+  },
+});

package/store/messages.ts

@@ -104,6 +104,7 @@ export const messages = {
       create: 'Создать',
       becomeAgent: 'Стать агентом',
       close: 'Закрыть',
+      reload: 'Обновить',
       makeIssueInvoice: 'Создать Счет на оплату',
       open: 'Открыть',
       edit: 'Редактировать',
@@ -180,16 +181,19 @@ export const messages = {
     questionnaireHealth: 'Анкета по здоровью Застрахованного',
     chooseAll: 'Выбрать все',
     statement: 'Заявление',
-    policyholder: 'Страхователь',
-    insured: 'Застрахованный',
-    beneficiary: 'Выгодоприобретатель',
-    beneficialOwner: 'Бенефициарный собственник',
-    policyholdersRepresentativeTitle: 'Представитель страхователя',
+    policyholderForm: 'Страхователь',
+    policyholderAndInsured: 'Застрахованный / Страхователь',
+    policyholderAndInsuredSame: 'Застрахованный / Страхователь является одним лицом',
+    insuredForm: 'Застрахованный',
+    beneficiaryForm: 'Выгодоприобретатель',
+    beneficialOwnerForm: 'Бенефициарный собственник',
+    policyholdersRepresentativeForm: 'Представитель страхователя',
     productConditions: 'Условия продукта и расчеты',
     underwriterDecision: 'Решение андеррайтингового совета',
     recalculationInfo: 'Данные для перерасчета',
     generalConditions: 'Основные условия страхования',
     isPolicyholderInsured: 'Является ли страхователь застрахованным?',
+    isPolicyholderIPDL: 'Принадлежит ли и/или причастен ли Застрахованный / Страхователь или его члены семьи и близкие родственники к иностранному публичному должностному лицу?',
     isPolicyholderBeneficiary: 'Является ли страхователь выгодоприобретателем?',
     hasRepresentative: 'Подписантом договора выступает представитель? ',
     isActOwnBehalf: ' Клиент действует от своего имени и в своих интересах?',
@@ -215,12 +219,12 @@ export const messages = {
     recalculation: 'Перерасчет',
     survey: 'Анкета',
     productConditionsForm: {
-      coverPeriod: 'Срок страхования (в годах)',
+      coverPeriod: 'Срок страхования',
       payPeriod: 'Период оплаты страховой премии',
       processIndexRate: 'Запрашиваемый размер коэффициента индексации (от 3% до 7%)',
       processPaymentPeriod: 'Периодичность оплаты страховой премии:',
-      requestedSumInsured: 'Запрашиваемая Страховая сумма',
-      insurancePremiumPerMonth: 'Размер страховой премии (тенге)',
+      requestedSumInsured: 'Страховая сумма',
+      insurancePremiumPerMonth: 'Страховая премия',
       hint: 'Сумма рассчитывается автоматически',
       additional: 'Дополнительные условия страхования',
       possibilityToChange: 'Возможность изменения страховой суммы и страховых взносов (индексация)',
@@ -287,7 +291,7 @@ export const messages = {
       ageMycar: 'Пороговое значение по возрасту с 21 по 65',
       noResident: 'Нерезидентам отказано',
     },
-    code: 'Код',
+    code: 'КЭС',
     fontSize: 'Размер шрифта',
     policyholdersRepresentative: {
       name: 'ФИО',