hl-core 0.0.7-beta.13 → 0.0.7-beta.15

package/api/index.ts

@@ -21,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',
@@ -29,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/components/Form/FormBlock.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="pt-3 pl-5 rounded border-[1px]" :class="[$libStyles.whiteBg]">
-    <div>
+  <div class="pt-3 rounded-lg border-[1px]" :class="[$libStyles.whiteBg]">
+    <div class="ml-5">
       <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">
+    <div class="ml-5 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>
@@ -12,7 +12,7 @@
       <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-if="isMultiple" class="ml-5 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>
@@ -21,7 +21,7 @@
         <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="rounded-br-lg transition-all h-[70px] w-[60px] place-self-end cursor-pointer"
           :class="[$libStyles.blueBgLight, $libStyles.blueBgLightHover]"
           @click="$emit('onMore', { whichForm, index })"
         >
@@ -29,7 +29,7 @@
         </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">
+    <div v-else class="ml-5 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>
@@ -37,13 +37,21 @@
       <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="rounded-br-lg 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
+      v-if="isMultiple && more"
+      :class="[$libStyles.blueBg, $libStyles.whiteText, $libStyles.textSimple]"
+      class="cursor-pointer rounded-b-lg h-[36px] flex items-center font-medium justify-center"
+      @click="memberStore.addMember(whichForm)"
+    >
+      {{ $t('buttons.add') }}
+    </div>
   </div>
 </template>
 
@@ -62,11 +70,16 @@ export default defineComponent({
       type: String as PropType<'policyholderForm' | 'insuredForm' | 'beneficiaryForm' | 'beneficialOwnerForm' | 'policyholdersRepresentativeForm' | 'productConditionsForm'>,
       default: '',
     },
+    more: {
+      type: Boolean,
+      default: false,
+    },
   },
-  emits: ['onMore'],
+  emits: ['onMore', 'addMember'],
   setup(props) {
     const dataStore = useDataStore();
     const formStore = useFormStore();
+    const memberStore = useMemberStore();
     const multipleMembers = ['insuredForm', 'beneficiaryForm', 'beneficialOwnerForm'];
     const isMultiple = ref(multipleMembers.includes(props.whichForm));
     const member = formStore[props.whichForm as keyof typeof formStore];
@@ -85,6 +98,7 @@ export default defineComponent({
     return {
       // State
       formStore,
+      memberStore,
       member,
       isMultiple,
 

package/components/Form/FormSection.vue

@@ -0,0 +1,18 @@
+<template>
+  <section :class="[$libStyles.blueBgLight, $libStyles.rounded]" class="mt-[14px] p-4 flex flex-col gap-[1px]">
+    <h2 :class="[$libStyles.textTitle]" class="font-medium text-center w-full mb-4">{{ title }}</h2>
+    <slot></slot>
+  </section>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: 'Заголовок',
+      required: true,
+    },
+  },
+});
+</script>

package/components/Form/FormToggle.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-[74px] !pl-2 md:!pl-5 rounded border-[1px] flex items-center justify-start gap-4" :class="[$libStyles.whiteBg]">
+  <div class="h-[74px] !pl-2 md:!pl-5 rounded-lg 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>

package/components/Form/MemberForm.vue

@@ -0,0 +1,376 @@
+<template>
+  <section class="flex flex-col gap-4 px-[10px]">
+    <v-form v-if="member" ref="vForm" @submit="submitForm" class="max-h-[75vh] md:max-h-[77vh] overflow-y-scroll">
+      <base-form-section :title="$t('form.personalData')">
+        <base-form-input
+          v-model="member.iin"
+          :label="$t('form.iin')"
+          maska="###-###-###-###"
+          append-inner-icon="mdi mdi-magnify"
+          @append="searchMember"
+          :rules="$rules.required.concat($rules.iinRight)"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.phoneNumber"
+          :label="$t('form.phoneNumber')"
+          maska="+7 (7##) ### ## ##"
+          placeholder="+7 7"
+          :rules="$rules.required.concat($rules.phoneFormat)"
+        ></base-form-input>
+        <base-form-input v-model="member.lastName" :label="$t('form.lastName')" :rules="$rules.required.concat($rules.cyrillic)"></base-form-input>
+        <base-form-input v-model="member.firstName" :label="$t('form.firstName')" :rules="$rules.required.concat($rules.cyrillic)"></base-form-input>
+        <base-form-input v-model="member.middleName" :label="$t('form.middleName')" :rules="$rules.required.concat($rules.cyrillic)"></base-form-input>
+        <base-form-input
+          v-model="member.birthDate"
+          :label="$t('form.birthDate')"
+          :rules="$rules.required.concat($rules.birthDate)"
+          maska="##.##.####"
+          append-inner-icon="mdi mdi-calendar-blank-outline"
+        ></base-form-input>
+        <base-form-input v-model="member.age" :label="$t('form.age')" :rules="$rules.required.concat($rules.numbers)"></base-form-input>
+        <base-panel-input
+          v-model="member.gender"
+          :value="member.gender.nameRu"
+          :label="$t('form.gender')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.gender'), $dataStore.gender, 'gender')"
+        ></base-panel-input>
+        <base-panel-input
+          v-model="member.familyStatus"
+          :value="member.familyStatus.nameRu"
+          :label="$t('form.familyStatus')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.familyStatus'), [], 'familyStatus', $dataStore.getFamilyStatuses)"
+        ></base-panel-input>
+      </base-form-section>
+      <base-form-section :title="$t('form.jobData')">
+        <base-form-input v-model="member.job" :label="$t('form.job')" :rules="$rules.required"></base-form-input>
+        <base-form-input v-model="member.jobPosition" :label="$t('form.jobPosition')" :rules="$rules.required"></base-form-input>
+        <base-form-input v-model="member.jobPlace" :label="$t('form.jobPlace')" :rules="$rules.required"></base-form-input>
+      </base-form-section>
+      <base-form-section :title="$t('form.placeRegistration')">
+        <base-panel-input
+          v-model="member.registrationCountry"
+          :value="member.registrationCountry.nameRu"
+          :label="$t('form.Country')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.Country'), [], 'registrationCountry', $dataStore.getCountries)"
+        ></base-panel-input>
+        <div class="flex flex-col gap-[1px]" v-if="member.registrationCountry.nameRu === 'Казахстан' || member.registrationCountry.nameRu === null">
+          <base-panel-input
+            v-model="member.registrationProvince"
+            :value="member.registrationProvince.nameRu"
+            :label="$t('form.Province')"
+            :rules="$rules.objectRequired"
+            append-inner-icon="mdi mdi-chevron-right"
+            @append="openPanel($t('form.Province'), [], 'registrationProvince', $dataStore.getStates, 'registrationCountry')"
+          ></base-panel-input>
+          <base-panel-input
+            v-model="member.registrationRegionType"
+            :value="member.registrationRegionType.nameRu"
+            :label="$t('form.RegionType')"
+            :rules="$rules.objectRequired"
+            append-inner-icon="mdi mdi-chevron-right"
+            @append="openPanel($t('form.RegionType'), [], 'registrationRegionType', $dataStore.getLocalityTypes)"
+          ></base-panel-input>
+          <base-panel-input
+            v-if="member.registrationRegionType.nameRu !== 'город'"
+            v-model="member.registrationRegion"
+            :value="member.registrationRegion.nameRu"
+            :label="$t('form.Region')"
+            :rules="$rules.objectRequired"
+            append-inner-icon="mdi mdi-chevron-right"
+            @append="openPanel($t('form.Region'), [], 'registrationRegion', $dataStore.getRegions, 'registrationProvince')"
+          ></base-panel-input>
+          <base-panel-input
+            v-model="member.registrationCity"
+            :value="member.registrationCity.nameRu"
+            :label="$t('form.City')"
+            :rules="$rules.objectRequired"
+            append-inner-icon="mdi mdi-chevron-right"
+            @append="openPanel($t('form.City'), [], 'registrationCity', $dataStore.getCities, 'registrationProvince')"
+          ></base-panel-input>
+          <base-form-input v-model="member.registrationQuarter" :label="$t('form.Quarter')"></base-form-input>
+          <base-form-input v-model="member.registrationMicroDistrict" :label="$t('form.MicroDistrict')"></base-form-input>
+          <base-form-input v-model="member.registrationStreet" :rules="$rules.required" :label="$t('form.Street')"></base-form-input>
+          <base-form-input v-model="member.registrationNumberHouse" :rules="$rules.required" :label="$t('form.NumberHouse')"></base-form-input>
+          <base-form-input v-model="member.registrationNumberApartment" :label="$t('form.NumberApartment')"></base-form-input>
+        </div>
+      </base-form-section>
+      <base-form-section :title="$t('form.birthData')">
+        <base-panel-input
+          v-model="member.birthPlace"
+          :value="member.birthPlace.nameRu"
+          :label="$t('form.Country')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.Country'), [], 'birthPlace', $dataStore.getCountries)"
+        ></base-panel-input>
+        <!-- TODO -->
+        <!-- <base-panel-input
+          v-model="member.birthRegion"
+          :value="member.birthRegion.nameRu"
+          :label="$t('form.Region')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.Region'), [], 'birthRegion', $dataStore.getRegions)"
+        ></base-panel-input> -->
+      </base-form-section>
+      <base-form-section :title="$t('form.documentData')">
+        <base-panel-input
+          v-model="member.documentType"
+          :value="member.documentType.nameRu"
+          :label="$t('form.documentType')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.documentType'), [], 'documentType', $dataStore.getDocumentTypes)"
+        ></base-panel-input>
+        <base-form-input v-model="member.documentNumber" :label="$t('form.documentNumber')" :rules="$rules.required"></base-form-input>
+        <base-panel-input
+          v-model="member.documentIssuers"
+          :value="member.documentIssuers.nameRu"
+          :label="$t('form.documentIssuers')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.documentIssuers'), [], 'documentIssuers', $dataStore.getDocumentIssuers)"
+        ></base-panel-input>
+        <base-form-input
+          v-model="member.documentDate"
+          :label="$t('form.documentDate')"
+          :rules="$rules.required.concat($rules.date)"
+          maska="##.##.####"
+          append-inner-icon="mdi mdi-calendar-blank-outline"
+        ></base-form-input>
+        <base-form-input
+          v-if="member.documentType.ids !== 'SBI' && member.documentType.ids !== 'VNZ'"
+          v-model="member.documentExpire"
+          :label="$t('form.documentExpire')"
+          :rules="$rules.required.concat($rules.date)"
+          maska="##.##.####"
+          append-inner-icon="mdi mdi-calendar-blank-outline"
+        ></base-form-input>
+        <base-panel-input
+          v-model="member.signOfResidency"
+          :value="member.signOfResidency.nameRu"
+          :label="$t('form.signOfResidency')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.signOfResidency'), [], 'signOfResidency', $dataStore.getResidents)"
+        ></base-panel-input>
+        <base-panel-input
+          v-model="member.countryOfTaxResidency"
+          :value="member.countryOfTaxResidency.nameRu"
+          :label="$t('form.countryOfTaxResidency')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.countryOfTaxResidency'), [], 'countryOfTaxResidency', $dataStore.getTaxCountries)"
+        ></base-panel-input>
+        <base-panel-input
+          v-if="member.countryOfTaxResidency.ids === '500014.3'"
+          v-model="member.addTaxResidency"
+          :value="member.addTaxResidency.nameRu"
+          :label="$t('form.addTaxResidency')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.addTaxResidency'), [], 'addTaxResidency', $dataStore.getAdditionalTaxCountries)"
+        ></base-panel-input>
+        <base-panel-input
+          v-model="member.signOfIPDL"
+          :value="member.signOfIPDL.nameRu"
+          :label="$t('form.signOfIPDL')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.signOfIPDL'), $dataStore.ipdl, 'signOfIPDL')"
+        ></base-panel-input>
+        <base-panel-input
+          v-model="member.countryOfCitizenship"
+          :value="member.countryOfCitizenship.nameRu"
+          :label="$t('form.countryOfCitizenship')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.countryOfCitizenship'), [], 'countryOfCitizenship', $dataStore.getCitizenshipCountries)"
+        ></base-panel-input>
+        <base-panel-input
+          v-model="member.economySectorCode"
+          :value="member.economySectorCode.nameRu"
+          :label="$t('form.economySectorCode')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.economySectorCode'), [], 'economySectorCode', $dataStore.getSectorCodeList)"
+        ></base-panel-input>
+      </base-form-section>
+      <base-form-section :title="$t('form.contactsData')">
+        <base-form-input
+          v-model="member.homePhone"
+          maska="+7 (7##) ### ## ##"
+          placeholder="+7 7"
+          :label="$t('form.homePhone')"
+          :rules="whichForm === formStore.beneficiaryFormKey ? [] : $rules.phoneFormat"
+        ></base-form-input>
+        <base-form-input v-model="member.email" :label="$t('form.email')" :rules="$rules.email"></base-form-input>
+      </base-form-section>
+    </v-form>
+    <base-btn :text="$t('buttons.save')" @click="submitForm"></base-btn>
+    <Teleport v-if="isPanelOpen" to="#panel-actions">
+      <div :class="[$libStyles.scrollPage]">
+        <base-rounded-input v-model="searchQuery" :label="$t('labels.search')" class="p-2" :hide-details="true"></base-rounded-input>
+        <div v-if="panelList && isPanelLoading === false">
+          <base-panel-item class="cursor-pointer border-t-[1px]" @click="pickPanelValue(new Value())">{{ $t('form.notChosen') }}</base-panel-item>
+          <base-panel-item
+            v-for="(item, index) of panelList.filter(i => i.nameRu && (i.nameRu as string).match(new RegExp(searchQuery, 'i')))"
+            :key="index"
+            class="cursor-pointer"
+            :class="[item.nameRu === panelValue.nameRu && $libStyles.greenText]"
+            @click="pickPanelValue(item)"
+          >
+            {{ item.nameRu }}
+          </base-panel-item>
+        </div>
+        <base-loader v-if="isPanelLoading" class="absolute mx-auto mt-10" :size="50"></base-loader>
+      </div>
+    </Teleport>
+  </section>
+</template>
+
+<script lang="ts">
+import { LocationQueryValue } from 'vue-router';
+import { Value } from '@/composables/classes';
+
+export default defineComponent({
+  setup() {
+    const componentKey = ref<number>(0);
+    const vForm = ref<any>();
+    const route = useRoute();
+    const router = useRouter();
+    const dataStore = useDataStore();
+    const formStore = useFormStore();
+    const memberStore = useMemberStore();
+    const getMember = (whichForm: LocationQueryValue | LocationQueryValue[], whichIndex?: LocationQueryValue | LocationQueryValue[]) =>
+      memberStore.getMemberFromStore(whichForm as keyof typeof formStore, Number((whichIndex ? whichIndex : '0') as string))!;
+    const member = ref(getMember(route.query.tab, route.query.i));
+    const isPanelOpen = ref<boolean>(false);
+    const isPanelLoading = ref<boolean>(false);
+    const panelValue = ref<Value>(new Value());
+    const panelList = ref<Value[]>([]);
+    const currentPanel = ref<string>('');
+    const searchQuery = ref<string>('');
+
+    const whichForm = computed(() => route.query.tab);
+    const whichIndex = computed(() => route.query.i);
+
+    const searchMember = async () => {
+      console.log('Search');
+    };
+
+    const openPanel = async (title: string, list: Value[], key: string, asyncFunction?: Function, filterKey?: string) => {
+      if (formStore.isDisabled[whichForm.value as keyof typeof formStore.isDisabled] === false) {
+        const notAllowedToChange = ['gender', 'documentType', 'documentIssuers'];
+        if (member.value.gotFromInsis === false && notAllowedToChange.includes(key)) {
+          return;
+        }
+        currentPanel.value = key;
+        isPanelOpen.value = true;
+        dataStore.panelAction = null;
+        dataStore.panel.open = true;
+        dataStore.panel.title = title;
+
+        let newList = list;
+        if (asyncFunction) {
+          isPanelLoading.value = true;
+          newList = await asyncFunction(filterKey, whichForm.value);
+        }
+        panelList.value = newList;
+        panelValue.value = member.value[key as keyof typeof member.value];
+        isPanelLoading.value = false;
+      } else {
+        dataStore.showToaster('error', dataStore.t('toaster.viewErrorText'));
+      }
+    };
+
+    const pickPanelValue = (item: Value) => {
+      if (formStore.isDisabled[whichForm.value as keyof typeof formStore.isDisabled] === false) {
+        dataStore.panel.open = false;
+        isPanelOpen.value = false;
+        member.value[currentPanel.value as keyof typeof member.value] = item.nameRu === null ? new Value() : item;
+      } else {
+        dataStore.showToaster('error', dataStore.t('toaster.viewErrorText'));
+      }
+    };
+
+    const submitForm = async () => {
+      await vForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
+        if (v.valid) {
+          console.log(v);
+        } else {
+          const errors = document.querySelector('.v-input--error');
+          if (errors) {
+            const errorText = errors.querySelector('.v-label.v-field-label');
+            if (errorText) {
+              dataStore.showToaster('error', dataStore.t('toaster.errorFormField').replace('{text}', errorText.innerHTML?.replace(/[-<>!//.]/g, '')));
+            } else {
+              const errorFieldText = errors.querySelector('.v-input__control');
+              if (errorFieldText) {
+                dataStore.showToaster('error', dataStore.t('toaster.errorFormField').replace('{text}', errorFieldText.innerHTML?.replace(/[-<>!//.]/g, '')));
+              }
+            }
+            errors.scrollIntoView({
+              behavior: 'smooth',
+              block: 'center',
+              inline: 'nearest',
+            });
+          }
+        }
+      });
+    };
+
+    onBeforeRouteUpdate(to => {
+      member.value = getMember(to.query.tab, to.query.i);
+      componentKey.value++;
+    });
+
+    watch(
+      () => dataStore.panel.open,
+      () => {
+        if (dataStore.panel.open === false) {
+          isPanelOpen.value = false;
+        }
+      },
+      { immediate: true },
+    );
+
+    watch(searchQuery, () => {
+      if (searchQuery.value === null) {
+        searchQuery.value = '';
+      }
+    });
+
+    return {
+      // State
+      vForm,
+      formStore,
+      memberStore,
+      member,
+      isPanelOpen,
+      isPanelLoading,
+      componentKey,
+      panelValue,
+      panelList,
+      searchQuery,
+      Value,
+
+      // Computed
+      whichForm,
+      whichIndex,
+
+      // Functions
+      searchMember,
+      openPanel,
+      pickPanelValue,
+      submitForm,
+    };
+  },
+});
+</script>

package/components/Form/ProductConditions.vue

@@ -0,0 +1,43 @@
+<template>
+  <section class="flex flex-col gap-4 px-[10px]">
+    <v-form ref="vForm" @submit="submitForm">
+      <base-form-section :title="$t('generalConditions')">
+        <base-form-input
+          v-model="formStore.productConditionsForm.requestedSumInsured"
+          :rules="$dataStore.rules.numbers"
+          :label="$t('productConditionsForm.requestedSumInsured')"
+        ></base-form-input>
+        <base-form-input
+          v-model="formStore.productConditionsForm.insurancePremiumPerMonth"
+          :rules="$dataStore.rules.numbers"
+          :label="$t('productConditionsForm.insurancePremiumAmount')"
+        ></base-form-input>
+      </base-form-section>
+    </v-form>
+    <base-btn :text="$t('buttons.calculate')" @click="submitForm"></base-btn>
+  </section>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  setup() {
+    const formStore = useFormStore();
+    const vForm = ref<any>();
+
+    const submitForm = async () => {
+      vForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
+        console.log(v);
+      });
+    };
+
+    return {
+      // State
+      formStore,
+      vForm,
+
+      // Functions
+      submitForm,
+    };
+  },
+});
+</script>

package/components/Form/ProductConditionsBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pt-3 pl-5 rounded border-[1px]" :class="[$libStyles.whiteBg]">
+  <div class="pt-3 pl-5 rounded-lg border-[1px]" :class="[$libStyles.whiteBg]">
     <div>
       <p :class="[$libStyles.textTitle, $libStyles.greenText]">
         {{ $t('productConditions') }}
@@ -20,7 +20,7 @@
         {{ paymentPeriod }}
       </span>
       <div
-        class="transition-all h-[70px] w-[60px] relative place-self-end cursor-pointer"
+        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' })"
       >