hl-core 0.0.8-beta.26 → 0.0.8-beta.28

package/components/Dialog/Dialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="fieldModel" :persistent="true">
+  <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>
@@ -41,39 +41,6 @@ export default defineComponent({
       default: 'default',
     },
   },
-  emits: ['update:modelValue', 'submitted', 'yes', 'no'],
-  setup(props, { emit }) {
-    const fieldModel = ref(props.modelValue);
-
-    const updateValue = (event: boolean) => {
-      fieldModel.value = event;
-    };
-
-    const submitted = (event: any) => {
-      emit('submitted', event);
-    };
-
-    watch(
-      fieldModel,
-      () => {
-        emit('update:modelValue', fieldModel.value);
-      },
-      { immediate: true },
-    );
-
-    watch(
-      () => props.modelValue,
-      () => {
-        fieldModel.value = props.modelValue;
-      },
-      { immediate: true },
-    );
-
-    return {
-      fieldModel,
-      submitted,
-      updateValue,
-    };
-  },
+  emits: ['update:modelValue', 'yes', 'no'],
 });
 </script>

package/components/Form/FormBlock.vue

@@ -4,7 +4,7 @@
       <div class="flex justify-between mr-5">
         <p :class="[$libStyles.textTitle, $libStyles.greenText]">{{ title }}</p>
         <div
-          v-if="isMultiple && more && !isShort"
+          v-if="isMultiple && more && !isShort && isActionsAvailable"
           :class="[$libStyles.blueBg, $libStyles.whiteText, $libStyles.textSimple, disabled ? $libStyles.disabled : 'cursor-pointer']"
           class="hidden lg:flex transition-all rounded-lg h-[36px] flex items-center font-medium justify-center opacity-50 hover:opacity-90 w-[120px]"
           @click="!disabled && memberStore.addMember(whichForm)"
@@ -69,7 +69,7 @@
       </div>
     </div>
     <div
-      v-if="isMultiple && more && !isShort"
+      v-if="isMultiple && more && !isShort && isActionsAvailable"
       :class="[$libStyles.blueBg, $libStyles.whiteText, $libStyles.textSimple, disabled ? $libStyles.disabled : 'cursor-pointer']"
       class="block lg:hidden transition-all rounded-b-lg h-[36px] flex items-center font-medium justify-center opacity-50 hover:opacity-90"
       @click="!disabled && memberStore.addMember(whichForm)"
@@ -119,6 +119,7 @@ export default defineComponent({
     const member: Member = formStore[props.whichForm as MemberKeys];
 
     const isShort = computed(() => props.type === 'short');
+    const isActionsAvailable = computed(() => memberStore.isStatementEditible(props.whichForm));
 
     const getMemberInfo = (memberData: Member) => {
       return {
@@ -140,6 +141,7 @@ export default defineComponent({
 
       // Computed
       isShort,
+      isActionsAvailable,
 
       // Functions
       getMemberInfo,

package/components/Form/ManagerAttachment.vue

@@ -117,6 +117,7 @@ export default defineComponent({
       () =>
         props.disabled ||
         route.params.taskId === '0' ||
+        !dataStore.isInitiator() ||
         (route.params.taskId !== '0' && (!dataStore.isProcessEditable(formStore.applicationData.statusCode) || !dataStore.isTask())),
     );
 

package/components/Input/FormInput.vue

@@ -31,11 +31,16 @@
   >
     <template v-if="appendInnerIcon && appendInnerIcon.length" v-slot:append-inner>
       <v-icon
-        v-if="appendInnerIcon !== 'mdi mdi-calendar-blank-outline'"
+        v-if="appendInnerIcon.includes('mdi-calendar-blank-outline') === false"
         :icon="appendInnerIcon"
         @click="appendInnerIcon.includes('mdi-magnify') ? $emit('append') : !props.readonly && $emit('append')"
       ></v-icon>
-      <base-datepicker v-else :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)" :teleport="teleport"></base-datepicker>
+      <base-datepicker
+        v-if="appendInnerIcon.includes('mdi-calendar-blank-outline') && !props.readonly"
+        :model-value="modelValue"
+        @update:modelValue="$emit('update:modelValue', $event)"
+        :teleport="teleport"
+      ></base-datepicker>
     </template>
     <template v-if="loading" #loader>
       <v-progress-linear :active="loading" :color="color" absolute height="1" indeterminate></v-progress-linear>
@@ -148,9 +153,9 @@ export default defineComponent({
   border: none !important;
   outline: none !important;
 }
-.form-input input {
+/* .form-input input {
   padding-top: 30px;
-}
+} */
 .form-input .v-field {
   box-shadow: none;
   font-size: 14px;
@@ -159,7 +164,6 @@ export default defineComponent({
   top: 20px;
 }
 .form-input .v-field__append-inner {
-  padding-top: 18px;
   padding-right: 6px;
 }
 .form-input .v-field__append-inner i {

package/components/Menu/MenuNavItem.vue

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

package/components/Pages/Anketa.vue

@@ -69,7 +69,7 @@
           </base-form-text-section>
         </section>
       </v-form>
-      <base-btn class="my-[14px] self-center" :loading="isButtonLoading" :disabled="formStore.isDisabled[whichSurvey]" @click="submitForm" :text="$t('buttons.save')"></base-btn>
+      <base-btn class="my-[14px] self-center" :loading="isButtonLoading" :disabled="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()" @click="submitForm" :text="$t('buttons.save')"></base-btn>
     </section>
     <v-btn
       v-if="secondQuestionList && secondQuestionList.length && firstPanel"

package/components/Pages/Auth.vue

@@ -1,5 +1,6 @@
 <template>
   <section class="flex h-full" :class="$libStyles.blueBgLight">
+    <!-- @vue-ignore -->
     <aside :class="{ '!hidden': !$display().lgAndUp.value }" class="w-full lg:w-1/4 bg-white flex flex-col justify-between border-r-2 relative px-8">
       <img draggable="false" class="w-[50%] mt-8" src="~/assets/auth-logo.svg" />
       <div class="self-center flex flex-col items-center justify-center base-auth">
@@ -16,6 +17,7 @@
       <base-btn :text="$t('buttons.more')" :disabled="true" class="mb-28"></base-btn>
     </aside>
     <section v-if="isLogin" class="w-full lg:w-3/4 flex flex-col justify-center">
+      <!-- @vue-ignore -->
       <img :class="{ '!block': !$display().lgAndUp.value }" draggable="false" class="hidden w-2/4 sm:w-1/3 mb-10 self-center" src="~/assets/auth-logo.svg" />
       <div class="flex flex-col items-center mb-8 text-center">
         <h1 class="text-[28px] font-medium mb-1">{{ $t('labels.welcomeHL') }}</h1>
@@ -158,7 +160,7 @@ export default defineComponent({
             numAttempts.value++;
             authLoading.value = false;
             if (!!dataStore.user.id) {
-              router.push({ name: 'index' });
+              await router.push({ name: 'index' });
             }
           } else {
             // TODO Reset password

package/components/Pages/MemberForm.vue

@@ -1,12 +1,36 @@
 <template>
   <section class="flex flex-col gap-4 px-[10px]">
     <v-form v-if="member" ref="vForm" @submit="submitForm" class="max-h-[82svh] overflow-y-scroll">
-      <base-form-section :title="$t('form.personalData')">
+      <div v-if="memberSetting.has === true && memberSetting.isMultiple === true" class="flex items-center mt-[14px] min-h-[54px]">
+        <div :class="[$libStyles.blueBgLight]" class="flex flex-wrap items-center gap-2 p-1 rounded-t-[8px] h-full">
+          <div
+            v-for="(each, index) of formStore[whichForm as MemberKeys]"
+            :key="index"
+            class="pl-3 pr-1 py-1 rounded-[8px] cursor-pointer flex items-center"
+            :class="[Number($route.query.i) === index ? `${$libStyles.blueBg} ${$libStyles.whiteText}` : '', $libStyles.textSimple]"
+            @click.self="selectMember(index)"
+          >
+            {{ `${$dataStore.menu.selectedItem.title} ${index + 1}` }}
+            <v-btn
+              icon="mdi-close !text-[20px]"
+              size="x-small"
+              :disabled="!memberStore.canMemberDeleted((whichForm as MemberKeys), index) && !memberStore.canMemberCleared((whichForm as MemberKeys), index)"
+              variant="plain"
+              :color="Number($route.query.i) === index ? '#FFF' : '#A0B3D8'"
+              @click.prevent="
+                memberStore.canMemberDeleted(whichForm as MemberKeys, index) || memberStore.canMemberCleared(whichForm as MemberKeys, index) ? deleteMember(index) : null
+              "
+            ></v-btn>
+          </div>
+        </div>
+        <v-btn class="ml-2" icon="mdi-plus !text-[24px]" @click="memberStore.addMember(whichForm as MemberKeys)" size="small" color="#A0B3D8" variant="tonal"></v-btn>
+      </div>
+      <base-form-section :title="$t('form.personalData')" :class="[memberSetting.has === true && memberSetting.isMultiple === true ? 'rounded-t-0 mt-[-5px]' : 'mt-[14px]']">
         <base-form-input
           v-model="member.phoneNumber"
           :label="$t('form.phoneNumber')"
           :maska="$maska.phone"
-          :readonly="isDisabled || isIinPhoneDisabled"
+          :readonly="!!isDisabled || !!isIinPhoneDisabled"
           :clearable="!isDisabled"
           :append-inner-icon="otpCondition ? 'mdi mdi-phone-message' : ''"
           @append="openCustomPanel('otp')"
@@ -17,10 +41,11 @@
           v-model="member.iin"
           :label="$t('form.iin')"
           :maska="$maska.iin"
-          :readonly="isDisabled || isIinPhoneDisabled"
+          :readonly="!!isDisabled || !!isIinPhoneDisabled"
           :clearable="!isDisabled"
           :append-inner-icon="showSaveButton ? 'mdi mdi-magnify' : ''"
           @append="searchMember"
+          @input="onIinInput"
           :rules="$rules.required.concat($rules.iinRight)"
         ></base-form-input>
         <base-form-input
@@ -488,6 +513,7 @@
             :append-inner-icon="hasOtp ? 'mdi-cellphone-message text-[17px]' : ''"
             hide-details
             @keyup.enter.prevent="hasOtp ? checkOtp() : null"
+            @input="onOtpCodeInput"
           ></base-rounded-input>
         </base-fade-transition>
         <base-btn v-if="!member.otpTokenId" :disabled="otpSending" :loading="otpSending" :text="$t('buttons.sendOtp')" @click="sendOtp(false)"></base-btn>
@@ -505,7 +531,7 @@
 
 <script lang="ts">
 import { LocationQueryValue } from 'vue-router';
-import { Value, DocumentItem } from '@/composables/classes';
+import { Value, DocumentItem, Member } from '@/composables/classes';
 import { uuid } from 'vue-uuid';
 
 export default {
@@ -530,6 +556,7 @@ export default {
     const isDocumentOpen = ref<boolean>(false);
     const isOtpPanelOpen = ref<boolean>(false);
     const isPanelLoading = ref<boolean>(false);
+    const isChangingMember = ref<boolean>(false);
     const familyDialog = ref<boolean>(false);
     const sameAddress = ref<boolean>(false);
     const panelValue = ref<Value>(new Value());
@@ -540,6 +567,7 @@ export default {
 
     const whichForm = computed(() => route.query.tab);
     const whichIndex = computed(() => route.query.i);
+    const memberSetting = computed(() => dataStore.members[memberStore.getMemberApplicationCode(whichForm.value as MemberKeys) as keyof typeof dataStore.members]);
     const hasOtp = computed(() => member.value.otpCode && member.value.otpCode.length === useMask().otp.length);
     const isDisabled = computed(() => !memberStore.isStatementEditible(whichForm.value as string));
     const isTask = computed(() => route.params.taskId === '0' || dataStore.isTask());
@@ -689,7 +717,7 @@ export default {
     const searchMember = async () => {
       if (!isDisabled.value) {
         dataStore.panelAction = null;
-        dataStore.panel.title = 'Поиск клиента';
+        dataStore.panel.title = 'Поиск контрагента';
         dataStore.panel.open = true;
         isSearchOpen.value = true;
         isDocumentOpen.value = false;
@@ -781,55 +809,6 @@ export default {
       }
     };
 
-    const setAddress = () => {
-      const beneficiary = formStore.beneficiaryForm[Number(whichIndex.value)];
-      const policyholder = formStore.policyholderForm;
-      if (sameAddress.value === true) {
-        beneficiary.registrationCity = policyholder.registrationCity;
-        beneficiary.registrationCountry = policyholder.registrationCountry;
-        beneficiary.birthPlace = policyholder.birthPlace;
-        beneficiary.registrationMicroDistrict = policyholder.registrationMicroDistrict;
-        beneficiary.registrationNumberApartment = policyholder.registrationNumberApartment;
-        beneficiary.registrationNumberApartment = policyholder.registrationNumberApartment;
-        beneficiary.registrationNumberHouse = policyholder.registrationNumberHouse;
-        beneficiary.registrationProvince = policyholder.registrationProvince;
-        beneficiary.registrationQuarter = policyholder.registrationQuarter;
-        beneficiary.registrationRegion = policyholder.registrationRegion;
-        beneficiary.registrationRegionType = policyholder.registrationRegionType;
-        beneficiary.registrationStreet = policyholder.registrationStreet;
-      } else {
-        if (beneficiary.id === 0) {
-          beneficiary.registrationCity = new Value();
-          beneficiary.registrationCountry = new Value();
-          beneficiary.registrationMicroDistrict = '';
-          beneficiary.registrationNumberApartment = '';
-          beneficiary.registrationNumberApartment = '';
-          beneficiary.registrationNumberHouse = '';
-          beneficiary.registrationProvince = new Value();
-          beneficiary.registrationQuarter = '';
-          beneficiary.registrationRegion = new Value();
-          beneficiary.registrationRegionType = new Value();
-          beneficiary.registrationStreet = '';
-        } else {
-          const country = dataStore.countries.find(i => (i.nameRu as string).match(new RegExp(beneficiary.response?.addresses[0].countryName, 'i')));
-          const city = dataStore.cities.find(i => i.nameRu === beneficiary.response?.addresses[0].cityName.replace('г.', ''));
-          const province = dataStore.states.find(i => i.ids === beneficiary.response?.addresses[0].stateCode);
-          const localityType = dataStore.localityTypes.find(i => i.nameRu === beneficiary.response?.addresses[0].cityTypeName);
-          const region = dataStore.regions.find(i => i.ids == beneficiary.response?.addresses[0].regionCode);
-          beneficiary.registrationCountry = country ?? new Value();
-          beneficiary.registrationCity = city ?? new Value();
-          beneficiary.registrationMicroDistrict = beneficiary.response?.addresses[0].microRaion ?? '';
-          beneficiary.registrationNumberApartment = beneficiary.response?.addresses[0].apartmentNumber ?? '';
-          beneficiary.registrationNumberHouse = beneficiary.response?.addresses[0].blockNumber ?? '';
-          beneficiary.registrationProvince = province ?? new Value();
-          beneficiary.registrationQuarter = beneficiary.response?.addresses[0].kvartal ?? '';
-          beneficiary.registrationRegion = region ?? new Value();
-          beneficiary.registrationRegionType = localityType ?? new Value();
-          beneficiary.registrationStreet = beneficiary.response?.addresses[0].streetName ?? '';
-        }
-      }
-    };
-
     const uploadFile = async (processInstanceId: string | number) => {
       const selectedDocument = dataStore.dicFileTypeList.find((i: Value) => i.nameRu === member.value.documentType.nameRu);
       const formData = new FormData();
@@ -1019,6 +998,7 @@ export default {
       if (typeof member.value.id !== 'number' || (typeof member.value.id === 'number' && member.value.id > 0 === false)) {
         return false;
       }
+      const wasInsuredAction = ref<boolean>(false);
       const isSaved = await dataStore.saveMember(member.value, memberStore.getMemberCode(whichForm.value as MemberKeys), memberFromApplicaiton);
       if (!isSaved) return false;
       if (whichForm.value === formStore.policyholderFormKey) {
@@ -1030,13 +1010,17 @@ export default {
             memberStore.getMemberFromApplication(formStore.insuredFormKey as MemberKeys, formStore.insuredFormIndex),
           );
           if (!isInsuredSaved) return false;
+          wasInsuredAction.value = true;
         }
       }
+      if (whichForm.value === formStore.insuredFormKey) {
+        wasInsuredAction.value = true;
+      }
       await router.replace({
         name: route.name!,
         query: { ...route.query, id: member.value.id },
       });
-      await dataStore.getApplicationData(route.params.taskId, false, false, true, false);
+      await dataStore.getApplicationData(route.params.taskId, false, false, true, wasInsuredAction.value);
       if (dataStore.controls.hasCalculator) {
         if (formStore.additionalInsuranceTermsWithout && formStore.additionalInsuranceTermsWithout.length !== 0) {
           formStore.additionalInsuranceTerms.forEach((term: any) => {
@@ -1180,27 +1164,40 @@ export default {
       }
     };
 
-    const onInit = async () => {
-      if (route.params.taskId === '0' || (route.params.taskId !== '0' && dataStore.isProcessEditable(formStore.applicationData.statusCode))) {
-        await dataStore.getSignedDocList(formStore.applicationData.processInstanceId);
+    const selectMember = async (index: number) => {
+      dataStore.panel.open = false;
+      isButtonLoading.value = true;
+      isChangingMember.value = true;
+      //@ts-ignore
+      await router.replace({ query: { ...route.query, i: index, id: getMember(route.query.tab, index).id } });
+      isChangingMember.value = false;
+    };
+
+    const deleteMember = async (index: number) => {
+      const formLength = formStore[whichForm.value as MemberKeys].length;
+      await memberStore.deleteMember(route.params.taskId as string, whichForm.value as MemberKeys, index);
+      const currendIndex = Number(whichIndex.value);
+      if (index <= currendIndex) {
+        const newIndex = ref<number>(currendIndex - 1 > 0 ? currendIndex - 1 : 0);
+        await selectMember(newIndex.value);
       }
+    };
+
+    const onInit = async () => {
+      // if (route.params.taskId === '0' || (route.params.taskId !== '0' && dataStore.isProcessEditable(formStore.applicationData.statusCode))) {
+      //   await dataStore.getSignedDocList(formStore.applicationData.processInstanceId);
+      // }
       if (getOtpConditionByMember()) {
         await sendOtp(true);
       } else {
         if (member.value.hasAgreement === null) member.value.hasAgreement = true;
       }
-      if (route.query.id !== '0' && !member.value.id) {
-        await dataStore.getContragentById(route.query.id, whichForm.value, true);
-      }
-      if (member.value.id && route.query.id === '0') {
-        await router.replace({
-          name: route.name!,
-          query: { ...route.query, id: member.value.id },
-        });
-      }
-      if (member.value.id) {
-        const filteredDocuments: DocumentItem[] = dataStore.getFilesByIIN(member.value.iin!.replace(/-/g, '')) as DocumentItem[];
-        if (filteredDocuments && filteredDocuments.length) memberDocument.value = filteredDocuments[0];
+      if (!member.value.id) {
+        await router.replace({ query: { ...route.query, id: 0 } });
+      } else {
+        if (route.query.id !== String(member.value.id)) await router.replace({ query: { ...route.query, id: member.value.id } });
+        // const filteredDocuments: DocumentItem[] = dataStore.getFilesByIIN(member.value.iin!.replace(/-/g, '')) as DocumentItem[];
+        // if (filteredDocuments && filteredDocuments.length) memberDocument.value = filteredDocuments[0];
       }
       await setDefaultValues();
     };
@@ -1209,30 +1206,26 @@ export default {
       await onInit();
     });
 
-    onBeforeRouteUpdate(to => {
-      if ('tab' in to.query && to.query.tab !== 'productConditions') {
-        member.value = getMember(to.query.tab, to.query.i);
-      }
-    });
-
     watch(
       () => sameAddress.value,
       () => {
-        if (whichForm.value === formStore.beneficiaryFormKey) setAddress();
+        if (whichForm.value === formStore.beneficiaryFormKey) setAddressBeneficiary(Number(whichIndex.value), sameAddress.value);
       },
     );
 
     watch(
       () => member.value.percentageOfPayoutAmount,
       val => {
-        const percentage = typeof val === 'string' ? Number(val) : val;
-        if (percentage) {
-          if (percentage < 0) {
-            member.value.percentageOfPayoutAmount = 0;
-            dataStore.showToaster('error', dataStore.t('toaster.incorrectInput'), 1000);
-          } else if (percentage > 100) {
-            member.value.percentageOfPayoutAmount = 100;
-            dataStore.showToaster('error', dataStore.t('toaster.incorrectInput'), 1000);
+        if (isChangingMember.value === false) {
+          const percentage = typeof val === 'string' ? Number(val) : val;
+          if (percentage) {
+            if (percentage < 0) {
+              member.value.percentageOfPayoutAmount = 0;
+              dataStore.showToaster('error', dataStore.t('toaster.incorrectInput'), 1000);
+            } else if (percentage > 100) {
+              member.value.percentageOfPayoutAmount = 100;
+              dataStore.showToaster('error', dataStore.t('toaster.incorrectInput'), 1000);
+            }
           }
         }
       },
@@ -1241,21 +1234,28 @@ export default {
     watch(
       () => member.value.birthDate,
       val => {
-        if (val && val.length === useMask().date.length) {
+        if (val && val.length === useMask().date.length && isChangingMember.value === false) {
           const calculatedAge = member.value.getAgeByBirthDate();
           if (calculatedAge) member.value.age = calculatedAge;
         }
       },
     );
 
-    // watch(
-    //   () => member.value.otpCode,
-    //   async () => {
-    //     if (member.value.otpCode && member.value.otpCode.length === useMask().otp.length) {
-    //       await checkOtp();
-    //     }
-    //   },
-    // );
+    const onIinInput = () => {
+      if (!!member.value.iin && member.value.iin.length === useMask().iin.length && memberSetting.value.isMultiple === true) {
+        const alreadyInStatement = formStore[whichForm.value as MemberKeys].findIndex((i: Member) => i.iin === member.value.iin);
+        if (alreadyInStatement !== -1 && alreadyInStatement !== Number(whichIndex.value)) {
+          dataStore.showToaster('error', dataStore.t('toaster.hasAlreadyMember'), 3000);
+          member.value.iin = null;
+        }
+      }
+    };
+
+    const onOtpCodeInput = async () => {
+      if (member.value.otpCode && member.value.otpCode.length === useMask().otp.length) {
+        await checkOtp();
+      }
+    };
 
     watch(
       () => dataStore.panel.open,
@@ -1304,6 +1304,7 @@ export default {
       // Computed
       whichForm,
       whichIndex,
+      memberSetting,
       otpCondition,
       hasOtp,
       isDisabled,
@@ -1337,6 +1338,10 @@ export default {
       selectFamilyMember,
       closeFamilyDialog,
       scrollForm,
+      onIinInput,
+      onOtpCodeInput,
+      deleteMember,
+      selectMember,
     };
   },
 };

package/components/Pages/ProductConditions.vue

@@ -670,6 +670,7 @@ export default defineComponent({
           }
           isCalculating.value = true;
           if (props.isRecalculation) {
+            //@ts-ignore
             await dataStore.calculateWithoutApplication(true, whichProduct.value);
             additionalTerms.value = formStore.additionalInsuranceTermsWithout;
           } else {
@@ -735,7 +736,7 @@ export default defineComponent({
         whichSum.value = 'requestedSumInsured';
       }
       if (dataStore.isCalculator) {
-        dataStore.processCode = constants.products[whichProduct.value];
+        dataStore.processCode = constants.products[whichProduct.value as keyof typeof constants.products];
         await dataStore.getProcessPaymentPeriod();
       }
       if (whichProduct.value === 'halykkazyna') {

package/components/Utilities/Chip.vue

@@ -0,0 +1,27 @@
+<template>
+  <label v-if="chip && chip.title" class="transition-all leading-6 px-3 py-1 rounded-pill border-[1px] border-white mr-4 whitespace-nowrap" :class="[textSize, color]"
+    >{{ chip.title }}<v-tooltip v-if="chip.description" activator="parent" location="bottom" :max-width="maxWidth">{{ chip.description }}</v-tooltip></label
+  >
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    chip: {
+      type: Object as PropType<ChipComponent>,
+    },
+    color: {
+      type: String,
+      default: 'bg-[#A0B3D8] text-white group-hover:bg-white group-hover:!text-black',
+    },
+    textSize: {
+      type: String,
+      default: '!text-[10px]',
+    },
+    maxWidth: {
+      type: [String, Number],
+      default: 230,
+    },
+  },
+});
+</script>

package/composables/classes.ts

@@ -16,6 +16,7 @@ class MenuItemConfig {
   disabled?: ComputedRef;
   color?: string;
   show?: ComputedRef;
+  chip?: ChipComponent;
 
   constructor(
     id: any = null,
@@ -30,6 +31,7 @@ class MenuItemConfig {
     disabled?: ComputedRef,
     color?: string,
     show?: ComputedRef,
+    chip?: ChipComponent,
   ) {
     this.id = id;
     this.title = title;
@@ -43,12 +45,13 @@ class MenuItemConfig {
     this.disabled = disabled;
     this.color = color;
     this.show = show;
+    this.chip = chip;
   }
 }
 
 export class MenuItem extends MenuItemConfig {
-  constructor({ id, title, link, hasLine, description, url, initial, icon, action, disabled, color, show }: MenuItemConfig = new MenuItemConfig()) {
-    super(id, title, link, hasLine, description, url, initial, icon, action, disabled, color, show);
+  constructor({ id, title, link, hasLine, description, url, initial, icon, action, disabled, color, show, chip }: MenuItemConfig = new MenuItemConfig()) {
+    super(id, title, link, hasLine, description, url, initial, icon, action, disabled, color, show, chip);
   }
 }
 
@@ -799,10 +802,12 @@ export class MemberSettings {
   has?: boolean;
   isMultiple?: boolean;
   required?: boolean;
-  constructor(options?: { has?: boolean; isMultiple?: boolean; required?: boolean }) {
+  limit?: number;
+  constructor(options?: { has?: boolean; isMultiple?: boolean; required?: boolean; limit?: number }) {
     if (options) {
       this.has = options.has;
       this.isMultiple = options.isMultiple;
+      this.limit = options.limit;
       if (this.has === true) {
         this.required = options.required;
       } else {