hl-core 0.0.7-beta.9 → 0.0.8

package/.prettierrc

@@ -5,5 +5,6 @@
   "trailingComma": "all",
   "bracketSpacing": true,
   "arrowParens": "avoid",
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "printWidth": 180
 }

package/api/index.ts

@@ -1,4 +1,5 @@
 import { useAxios } from '@/composables/axios';
+import { Value, IDocument } from '@/composables/classes';
 import { AxiosRequestConfig } from 'axios';
 
 enum Methods {
@@ -7,20 +8,12 @@ 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();
-    if (
-      (dataStore.isEFO && this.baseURL) ||
-      (!dataStore.isEFO && this.baseURL && this.productUrl)
-    ) {
+    if ((dataStore.isEFO && this.baseURL) || (!dataStore.isEFO && this.baseURL && this.productUrl)) {
       const { data } = await useAxios(this.baseURL as string).request(config);
       return data;
     } else {
@@ -29,11 +22,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',
@@ -41,13 +30,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',
@@ -176,6 +159,20 @@ export class ApiClass {
     });
   }
 
+  async getQuestionList(surveyType: string, processInstanceId: string, insuredId: number | string): Promise<AnketaFirst> {
+    return this.axiosCall({
+      method: Methods.GET,
+      url: `/Baiterek/api/Application/Anketa/${surveyType}/${processInstanceId}/${insuredId}`,
+    });
+  }
+
+  async getQuestionListSecond(surveyType: string, processInstanceId: string, insuredId: number | string): Promise<AnketaSecond[]> {
+    return this.axiosCall({
+      method: Methods.GET,
+      url: `/Baiterek/api/Application/Anketa/${surveyType}/${processInstanceId}/${insuredId}`,
+    });
+  }
+
   async definedAnswers(filter: string) {
     return this.axiosCall({
       method: Methods.GET,
@@ -183,7 +180,7 @@ export class ApiClass {
     });
   }
 
-  async setSurvey(surveyData: any) {
+  async setSurvey(surveyData: AnketaFirst) {
     return this.axiosCall({
       method: Methods.POST,
       data: surveyData,
@@ -191,7 +188,7 @@ export class ApiClass {
     });
   }
 
-  async getQuestionRefs(id: string | number) {
+  async getQuestionRefs(id: string | number): Promise<Value[]> {
     return this.axiosCall({
       method: Methods.GET,
       url: `/Ekk/api/Contragentinsis/DictionaryItems/Questionary?filter=${id}`,
@@ -205,10 +202,7 @@ export class ApiClass {
     });
   }
 
-  async getAdditionalInsuranceTermsAnswers(
-    processCode: string | number,
-    questionId: string,
-  ) {
+  async getAdditionalInsuranceTermsAnswers(processCode: string | number, questionId: string) {
     return this.axiosCall({
       method: Methods.GET,
       url: `/Arm/api/Dictionary/ProcessCoverTypeSum/${processCode}/${questionId}`,
@@ -237,7 +231,7 @@ export class ApiClass {
     });
   }
 
-  async getFile(id: any) {
+  async getFile(id: string) {
     return await this.axiosCall({
       method: Methods.GET,
       url: `/Arm/api/File/DownloadFile/${id}`,
@@ -255,35 +249,35 @@ export class ApiClass {
     });
   }
 
-  async getContrAgentData(personId: any) {
+  async getContrAgentData(personId: string | number) {
     return this.axiosCall({
       method: Methods.GET,
       url: `/Ekk/api/Contragentinsis/Questionaries?PersonId=${personId}`,
     });
   }
 
-  async getContrAgentContacts(personId: any) {
+  async getContrAgentContacts(personId: string | number) {
     return this.axiosCall({
       method: Methods.GET,
       url: `/Ekk/api/Contragentinsis/Contacts?PersonId=${personId}`,
     });
   }
 
-  async getContrAgentDocuments(personId: any) {
+  async getContrAgentDocuments(personId: string | number) {
     return this.axiosCall({
       method: Methods.GET,
       url: `/Ekk/api/Contragentinsis/Documents?PersonId=${personId}`,
     });
   }
 
-  async getContrAgentAddress(personId: any) {
+  async getContrAgentAddress(personId: string | number) {
     return this.axiosCall({
       method: Methods.GET,
       url: `/Ekk/api/Contragentinsis/Address?PersonId=${personId}`,
     });
   }
 
-  async getTaskList(data: any) {
+  async getTaskList(data: any): Promise<{ items: TaskListItem[]; totalItems: number }> {
     return this.axiosCall({
       method: Methods.POST,
       url: `/Arm/api/Bpm/TaskList`,
@@ -291,13 +285,13 @@ export class ApiClass {
     });
   }
 
-  async getProcessHistory(id: any) {
+  async getProcessHistory(id: string): Promise<TaskHistory[]> {
     return this.axiosCall({
       url: `/Arm/api/Bpm/GetProcessHistory?processInstanceId=${id}`,
     });
   }
 
-  async sendSms(data: any) {
+  async sendSms(data: { phone: string; template: string; tempFlags: { url: string } }): Promise<void> {
     return this.axiosCall({
       baseURL: import.meta.env.VITE_SMS_SERVICE as string,
       method: Methods.POST,
@@ -306,7 +300,7 @@ export class ApiClass {
     });
   }
 
-  async getUserGroups() {
+  async getUserGroups(): Promise<Item[]> {
     return this.axiosCall({
       method: Methods.GET,
       url: '/Arm/api/Bpm/TaskGroups',
@@ -320,7 +314,7 @@ export class ApiClass {
     });
   }
 
-  async getOtpStatus(data: any) {
+  async getOtpStatus(data: OtpDataType): Promise<boolean> {
     return this.axiosCall({
       method: Methods.POST,
       url: '/Arm/api/Otp/OtpLifeStatus',
@@ -328,7 +322,7 @@ export class ApiClass {
     });
   }
 
-  async sendOtp(data: any) {
+  async sendOtp(data: OtpDataType): Promise<SendOtpResponse> {
     return this.axiosCall({
       method: Methods.POST,
       url: '/Arm/api/Otp/Get',
@@ -336,7 +330,7 @@ export class ApiClass {
     });
   }
 
-  async checkOtp(data: any) {
+  async checkOtp(data: { tokenId: string; phoneNumber: string; code: string }): Promise<SendOtpResponse> {
     return this.axiosCall({
       method: Methods.POST,
       url: '/Arm/api/Otp/Check',
@@ -344,7 +338,7 @@ export class ApiClass {
     });
   }
 
-  async getProcessList() {
+  async getProcessList(): Promise<Item[]> {
     return this.axiosCall({
       method: Methods.GET,
       url: '/Arm/api/Bpm/ProcessList',
@@ -352,7 +346,9 @@ export class ApiClass {
     });
   }
 
-  async startApplication(data: any) {
+  async startApplication(data: StartApplicationType): Promise<{
+    processInstanceId: string;
+  }> {
     return this.axiosCall({
       method: Methods.POST,
       url: `/${this.productUrl}/api/Application/StartApplication`,
@@ -462,7 +458,7 @@ export class ApiClass {
     });
   }
 
-  async getSignedDocList(data: any) {
+  async getSignedDocList(data: { processInstanceId: string }): Promise<IDocument[]> {
     return this.axiosCall({
       method: Methods.POST,
       url: '/Arm/api/File/List',
@@ -470,6 +466,21 @@ export class ApiClass {
     });
   }
 
+  async calculateWithoutApplication(data: RecalculationDataType): Promise<RecalculationResponseType> {
+    return this.axiosCall({
+      method: Methods.POST,
+      url: `/${this.productUrl}/api/Application/Calculate`,
+      data: data,
+    });
+  }
+
+  async getDefaultCalculationData(): Promise<RecalculationDataType> {
+    return this.axiosCall({
+      method: Methods.GET,
+      url: `/${this.productUrl}/api/Application/DefaultCalculatorValues`,
+    });
+  }
+
   async reCalculate(data: any) {
     return this.axiosCall({
       method: Methods.POST,
@@ -478,7 +489,7 @@ export class ApiClass {
     });
   }
 
-  async getValidateClientESBD(data: any) {
+  async getValidateClientESBD(data: ESBDValidationType): Promise<ESBDResponseType> {
     return this.axiosCall({
       method: Methods.POST,
       url: '/externalservices/api/ExternalServices/GetValidateClientEsbd',
@@ -486,7 +497,7 @@ export class ApiClass {
     });
   }
 
-  async isClaimTask(taskId: string) {
+  async isClaimTask(taskId: string): Promise<boolean> {
     return this.axiosCall({
       method: Methods.POST,
       url: '/Arm/api/Bpm/IsClaimTask',
@@ -502,7 +513,7 @@ export class ApiClass {
     });
   }
 
-  async getContragentFromGBDFL(data: any) {
+  async getContragentFromGBDFL(data: { iin: string; phoneNumber: string }): Promise<GBDFLResponse> {
     return this.axiosCall({
       method: Methods.POST,
       url: '/externalservices/api/ExternalServices/GetGbdflToken',
@@ -510,6 +521,14 @@ export class ApiClass {
     });
   }
 
+  async getFamilyInfo(data: { iin: string; phoneNumber: string }): Promise<FamilyInfoGKB> {
+    return this.axiosCall({
+      method: Methods.POST,
+      url: '/externalservices/api/ExternalServices/GetFamilyInfoToken',
+      data: data,
+    });
+  }
+
   async getProcessTariff(code: number | string = 5) {
     return this.axiosCall({ url: `/arm/api/Dictionary/ProcessTariff/${code}` });
   }

package/api/interceptors.ts

@@ -19,19 +19,19 @@ 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 {
           dataStore.sendToParent(constants.postActions.Error401, 401);
         }
       }
-      if (error.response.status === 500) {
+      if (error.response.status >= 500) {
         if (router.currentRoute.value.name !== 'Auth') {
-          router.push({ name: '500', query: { stack: error.stack } });
+          dataStore.showToaster('error', error.stack, 5000);
         }
       }
-      dataStore.$reset();
-      localStorage.clear();
       return Promise.reject(error);
     },
   );

package/components/Button/Btn.vue

@@ -3,7 +3,7 @@
     type="button"
     class="transition-all"
     @click="$emit('clicked')"
-    :disabled="disabled"
+    :disabled="disabled || loading"
     :class="[
       disabled ? 'disabled' : '',
       classes,
@@ -11,7 +11,8 @@
       $libStyles[`btnH${$capitalize(size)}` as keyof typeof $libStyles],
     ]"
   >
-    {{ text }}
+    <base-loader v-if="loading" :size="24" color="#FFF" bg-color="" :width="2"></base-loader>
+    <span v-if="!loading">{{ text }}</span>
   </button>
 </template>
 
@@ -35,6 +36,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
     btn: {
       type: String,
       default: new Styles().blueBtn,

package/components/Button/ScrollButtons.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="absolute bottom-[12%] right-1 flex flex-col gap-4">
+    <v-btn style="backdrop-filter: blur(5px)" color="#A0B3D8"  variant="outlined" icon="mdi mdi-arrow-up" @click="$emit('up')"></v-btn>
+    <v-btn style="backdrop-filter: blur(5px)" color="#A0B3D8"  variant="outlined" icon="mdi mdi-arrow-down" @click="$emit('down')"></v-btn>
+  </div>
+</template>

package/components/Complex/ContentBlock.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="w-full p-4" :class="[$libStyles.blueBgLight, $libStyles.rounded]">
+    <slot></slot>
+  </div>
+</template>

package/components/{Layout → Dialog}/Dialog.vue

@@ -1,8 +1,6 @@
 <template>
   <v-dialog v-model="fieldModel">
-    <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 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 }}
@@ -11,27 +9,9 @@
         <slot v-if="!subtitle" name="subtitle"></slot>
         {{ subtitle }}
       </v-card-subtitle>
-      <v-card-text>
-        <slot v-if="text" name="content"></slot>
-        {{ text }}
-      </v-card-text>
       <v-card-actions class="gap-[16px]">
-        <base-btn
-          v-if="actions === 'default'"
-          class="!w-fit px-6"
-          size="sm"
-          :text="$t('confirm.yes')"
-          :btn="$libStyles.blueBtn"
-          @click="$emit('yes')"
-        ></base-btn>
-        <base-btn
-          v-if="actions === 'default'"
-          class="!w-fit px-6"
-          size="sm"
-          :text="$t('confirm.no')"
-          :btn="$libStyles.blueBtn"
-          @click="$emit('no')"
-        />
+        <base-btn v-if="actions === 'default'" class="!w-fit px-6" size="sm" :text="$t('confirm.yes')" :btn="$libStyles.blueBtn" @click="$emit('yes')"></base-btn>
+        <base-btn v-if="actions === 'default'" class="!w-fit px-6" size="sm" :text="$t('confirm.no')" :btn="$libStyles.blueBtn" @click="$emit('no')" />
         <slot v-if="actions !== 'default'" name="actions"></slot>
       </v-card-actions>
     </v-card>
@@ -53,10 +33,6 @@ export default defineComponent({
       type: String,
       default: '',
     },
-    text: {
-      type: String,
-      default: '',
-    },
     actions: {
       type: String,
       default: 'default',

package/components/Dialog/FamilyDialog.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-list lines="two" v-if="formStore.birthInfos && formStore.birthInfos.length" class="w-full !py-0">
+    <v-list-item @click="$emit('reset')" :append-icon="selected && Object.keys(selected).length === 0 ? `mdi-radiobox-marked ${$libStyles.greenText}` : 'mdi-radiobox-blank text-[#636363]'">
+      <v-list-item-title :class="[$libStyles.greenText, $libStyles.textTitle]">{{ $t('form.notChosen') }}</v-list-item-title>
+    </v-list-item>
+    <v-list-item
+      v-for="familyMember of formStore.birthInfos"
+      :key="familyMember.childIIN"
+      @click="$emit('selectFamilyMember', familyMember)"
+      :append-icon="familyMember && selected && selected.childIIN === familyMember.childIIN ? `mdi-radiobox-marked ${$libStyles.greenText}` : 'mdi-radiobox-blank text-[#636363]'"
+    >
+      <v-list-item-title :class="[$libStyles.greenText, $libStyles.textTitle]">{{
+        `${familyMember.childSurName} ${familyMember.childName} ${familyMember.childPatronymic ? familyMember.childPatronymic : ''}`
+      }}</v-list-item-title>
+      <v-list-item-subtitle :class="[$libStyles.textSimple]"
+        ><span>{{ `${$t('form.iin')}:` }}</span
+        >{{ ` ${$reformatIin(familyMember.childIIN!)}` }}</v-list-item-subtitle
+      >
+    </v-list-item>
+  </v-list>
+  <base-list-empty class="w-full" v-else></base-list-empty>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    selected: {
+      type: Object as PropType<BirthInfoGKB>,
+    },
+  },
+  emits: ['selectFamilyMember', 'reset'],
+  setup() {
+    const formStore = useFormStore();
+    return {
+      formStore,
+    };
+  },
+});
+</script>

package/components/Form/FormBlock.vue

@@ -0,0 +1,114 @@
+<template>
+  <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="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>
+      <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="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>
+        <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="rounded-br-lg 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="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>
+      <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="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>
+
+<script lang="ts">
+import { Member } from '@/composables/classes';
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    subtitle: {
+      type: String,
+      default: '',
+    },
+    whichForm: {
+      type: String as PropType<MemberFormTypes>,
+      default: '',
+    },
+    more: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  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: Member = formStore[props.whichForm as MemberKeys];
+
+    const getMemberInfo = (memberData: Member) => {
+      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 as string).charAt(0) : null)).value,
+        birthDate: computed(() => (memberData && memberData.birthDate ? memberData.birthDate : null)).value,
+        birthPlace: computed(() => (memberData && memberData.birthPlace.nameRu ? (memberData.birthPlace.nameRu as string).substring(0, 3) : null)).value,
+        sectorCode: computed(() => (memberData && memberData.economySectorCode.ids ? (memberData.economySectorCode.ids as string).slice(-1) : null)).value,
+      };
+    };
+
+    return {
+      // State
+      formStore,
+      memberStore,
+      member,
+      isMultiple,
+
+      // Computed
+
+      // Functions
+      getMemberInfo,
+    };
+  },
+});
+</script>

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/FormTextSection.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="flex flex-col justify-between rounded-lg" :class="[$libStyles.whiteBg]">
+    <span v-if="title" class="p-4" :class="[$libStyles.textTitle]">{{ title }}</span>
+    <span v-if="subtitle" class="p-4 text-[#99A3B3] border-t-[1px]" :class="[$libStyles.textSimple]">{{ subtitle }}</span>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+    },
+    subtitle: {
+      type: String,
+    },
+  },
+});
+</script>

package/components/Form/FormToggle.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    class="h-[74px] !pl-2 md:!pl-5 flex items-center justify-start gap-4"
+    :class="[$libStyles.whiteBg, hasBorder ? 'border-[1px] rounded-lg' : 'border-b-[1px] border-b-[#f3f6fc] rounded']"
+  >
+    <v-switch
+      class="base-toggle"
+      :model-value="modelValue"
+      @update:modelValue="
+        $emit('update:modelValue', $event);
+        $emit('clicked');
+      "
+      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,
+    },
+    hasBorder: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ['update:modelValue', 'clicked'],
+});
+</script>
+
+<style>
+.v-input.base-toggle {
+  width: fit-content;
+  flex: unset !important;
+}
+</style>