hl-core 0.0.8 → 0.0.9-beta.10

package/api/interceptors.ts

@@ -1,13 +1,15 @@
-import { AxiosInstance } from 'axios';
+import { AxiosError, AxiosInstance } from 'axios';
 
 export default function (axios: AxiosInstance) {
   axios.interceptors.request.use(
     request => {
       const dataStore = useDataStore();
-      request.headers.Authorization = `Bearer ${dataStore.accessToken}`;
+      if (dataStore.accessToken) {
+        request.headers.Authorization = `Bearer ${dataStore.accessToken}`;
+      }
       return request;
     },
-    error => {
+    (error: AxiosError) => {
       return Promise.reject(error);
     },
   );
@@ -15,21 +17,25 @@ export default function (axios: AxiosInstance) {
     response => {
       return response;
     },
-    error => {
+    (error: AxiosError) => {
       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 (router.currentRoute.value.name !== 'Auth') {
-          dataStore.showToaster('error', error.stack, 5000);
+      if (!dataStore.isCalculator) {
+        const router = useRouter();
+        if (error && error.response && error.response.status) {
+          if (error.response.status === 401) {
+            dataStore.$reset();
+            localStorage.clear();
+            if (dataStore.isBridge) {
+              router.push({ name: 'Auth', query: { error: 401 } });
+            } else {
+              dataStore.sendToParent(constants.postActions.Error401, 401);
+            }
+          }
+          if (error.response.status >= 500) {
+            if (router.currentRoute.value.name !== 'Auth') {
+              dataStore.showToaster('error', error.stack ?? dataStore.t('toaster.error'), 5000);
+            }
+          }
         }
       }
       return Promise.reject(error);

package/components/Button/Btn.vue

@@ -1,18 +1,18 @@
 <template>
   <button
     type="button"
-    class="transition-all"
+    class="transition-all border-solid"
     @click="$emit('clicked')"
     :disabled="disabled || loading"
     :class="[
       disabled ? 'disabled' : '',
       classes,
       btn,
-      $libStyles[`btnH${$capitalize(size)}` as keyof typeof $libStyles],
+      $styles[`btnH${$capitalize(size)}` as keyof typeof $styles],
     ]"
   >
-    <base-loader v-if="loading" :size="24" color="#FFF" bg-color="" :width="2"></base-loader>
-    <span v-if="!loading">{{ text }}</span>
+    <base-loader v-if="loading" :size="24" color="#FFF" bg-color="" :width="2" />
+    <span class="!text-inherit" v-if="!loading">{{ text }}</span>
   </button>
 </template>
 

package/components/Button/ScrollButtons.vue

@@ -1,6 +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>
+    <v-btn style="backdrop-filter: blur(5px)" color="#A0B3D8" variant="outlined" icon="mdi mdi-arrow-up" @click="$emit('up')" />
+    <v-btn style="backdrop-filter: blur(5px)" color="#A0B3D8" variant="outlined" icon="mdi mdi-arrow-down" @click="$emit('down')" />
   </div>
 </template>

package/components/Complex/ContentBlock.vue

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

package/components/Complex/MessageBlock.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="text-left p-6" :class="[color, $styles.rounded, $styles.textTitle]">
+    <v-icon :icon="icon" class="mr-4"></v-icon>
+    {{ text }}
+  </div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: 'BaseMessageBlock',
+  props: {
+    text: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: 'mdi-alert',
+    },
+    color: {
+      type: String,
+      default: 'bg-rose-500 text-white',
+    },
+  },
+});
+</script>

package/components/Complex/Page.vue

@@ -1,6 +1,7 @@
 <template>
-  <base-content class="flex-col" :class="[$libStyles.whiteBg]">
+  <base-content class="flex-col" :class="[$styles.whiteBg]">
     <base-header
+      v-if="customHeader === false"
       class="justify-center lg:pl-14"
       :has-back="hasBack"
       :back-icon="backIcon"
@@ -9,7 +10,8 @@
       :title="title"
       @onBack="$emit('onBack')"
       @onMore="$emit('onMore')"
-    ></base-header>
+    />
+    <slot name="header"></slot>
     <slot></slot>
   </base-content>
 </template>
@@ -37,6 +39,10 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    customHeader: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['onBack', 'onMore'],
 });

package/components/Complex/WhiteBlock.vue

@@ -0,0 +1,7 @@
+<template>
+  <div :class="[$styles.rounded, $styles.whiteBg]" class="p-4 shadow">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

package/components/Dialog/Dialog.vue

@@ -1,17 +1,18 @@
 <template>
-  <v-dialog v-model="fieldModel">
+  <v-dialog :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)" :persistent="true">
     <v-card class="self-center w-full sm:w-3/4 md:w-2/3 lg:w-2/4 xl:w-[600px] rounded-lg !p-2">
       <v-card-title>
         <slot v-if="!title" name="title"></slot>
         {{ title }}
+        <v-btn class="!absolute top-2 right-3" icon="mdi mdi-window-close" variant="plain" @click="$emit('update:modelValue', null)" />
       </v-card-title>
       <v-card-subtitle>
         <slot v-if="!subtitle" name="subtitle"></slot>
         {{ subtitle }}
       </v-card-subtitle>
-      <v-card-actions class="gap-[16px]">
-        <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')" />
+      <v-card-actions class="gap-[16px] m-2">
+        <base-btn v-if="actions === 'default'" class="!w-fit px-6" size="sm" :text="$dataStore.t('confirm.yes')" :btn="$styles.blueBtn" @click="$emit('yes')" />
+        <base-btn v-if="actions === 'default'" class="!w-fit px-6" size="sm" :text="$dataStore.t('confirm.no')" :btn="$styles.blueBtn" @click="$emit('no')" />
         <slot v-if="actions !== 'default'" name="actions"></slot>
       </v-card-actions>
     </v-card>
@@ -27,7 +28,9 @@ export default defineComponent({
     },
     title: {
       type: String,
-      default: '',
+      default() {
+        return useDataStore().t('dialog.title');
+      },
     },
     subtitle: {
       type: String,
@@ -38,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/Dialog/FamilyDialog.vue

@@ -1,24 +1,27 @@
 <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
+      @click="$emit('reset')"
+      :append-icon="selected && Object.keys(selected).length === 0 ? `mdi-radiobox-marked ${$styles.greenText}` : 'mdi-radiobox-blank text-[#636363]'"
+    >
+      <v-list-item-title :class="[$styles.greenText, $styles.textTitle]">{{ $dataStore.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]'"
+      :append-icon="familyMember && selected && selected.childIIN === familyMember.childIIN ? `mdi-radiobox-marked ${$styles.greenText}` : 'mdi-radiobox-blank text-[#636363]'"
     >
-      <v-list-item-title :class="[$libStyles.greenText, $libStyles.textTitle]">{{
+      <v-list-item-title :class="[$styles.greenText, $styles.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
+      <v-list-item-subtitle :class="[$styles.textSimple]"
+        ><span>{{ `${$dataStore.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>
+  <base-list-empty class="w-full" v-else />
 </template>
 
 <script lang="ts">

package/components/Form/FormBlock.vue

@@ -1,62 +1,91 @@
 <template>
-  <div class="pt-3 rounded-lg border-[1px]" :class="[$libStyles.whiteBg]">
+  <div class="pt-3 rounded-lg border-[1px]" :class="[$styles.whiteBg, disabled && $styles.disabled]">
     <div class="ml-5">
-      <p :class="[$libStyles.textTitle, $libStyles.greenText]">{{ title }}</p>
-      <p v-if="!!subtitle" :class="[$libStyles.greyText, $libStyles.textSimple]">{{ subtitle }}</p>
+      <div class="flex justify-between mr-5">
+        <p :class="[$styles.textTitle, $styles.greenText]">{{ title }}</p>
+        <div
+          v-if="isMultiple && more && !isShort && isActionsAvailable"
+          :class="[$styles.blueBg, $styles.whiteText, $styles.textSimple, disabled ? $styles.disabled : 'cursor-pointer']"
+          class="lg:flex transition-all rounded-lg h-[36px] flex items-center font-medium justify-center opacity-50 hover:opacity-90 w-[120px]"
+          @click="!disabled && memberStore.addMember(whichForm)"
+        >
+          {{ $dataStore.t('buttons.add') }}
+        </div>
+      </div>
+      <p v-if="!!subtitle" :class="[$styles.greyText, $styles.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
+      class="ml-5 mt-6 grid auto-rows-fr items-center"
+      :class="[isShort ? 'grid-cols-2 md:gap-5 md:grid-cols-2 lg:grid-cols-2 mb-6' : 'grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7 ']"
+    >
+      <span :class="[$styles.textSimple]" class="font-medium">{{ $dataStore.t('form.fullName') }}</span>
+      <span :class="[$styles.textSimple]" class="font-medium">{{ $dataStore.t('form.iin') }}</span>
+      <span v-if="!isShort" :class="[$styles.textSimple]" class="font-medium hidden lg:block"> {{ $dataStore.t('form.gender') }}</span>
+      <span v-if="!isShort" :class="[$styles.textSimple]" class="font-medium"> {{ $dataStore.t('form.birthDate') }} </span>
+      <span v-if="!isShort" :class="[$styles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('form.Country') }} </span>
+      <span v-if="!isShort" :class="[$styles.textSimple]" class="font-medium hidden lg:block"> {{ $dataStore.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 v-if="isMultiple && multipleMember !== null" class="ml-5 flex flex-col" :class="[isShort ? 'mb-6' : '']">
+      <div
+        v-for="(each, index) of multipleMember"
+        :key="index"
+        class="grid auto-rows-fr items-center relative"
+        :class="[isShort ? 'grid-cols-2 md:gap-5 md:grid-cols-2 lg:grid-cols-2' : 'grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7']"
+      >
+        <span :class="[getMemberInfo(each).fullName === null && $styles.emptyBlockCol]">{{ getMemberInfo(each).fullName }}</span>
+        <span :class="[getMemberInfo(each).iin === null && $styles.emptyBlockCol]">{{ getMemberInfo(each).iin }}</span>
+        <span v-if="!isShort" :class="[getMemberInfo(each).gender === null && $styles.emptyBlockCol]" class="hidden lg:block">{{ getMemberInfo(each).gender }} </span>
+        <span v-if="!isShort" :class="[getMemberInfo(each).birthDate === null && $styles.emptyBlockCol]"> {{ getMemberInfo(each).birthDate }} </span>
+        <span v-if="!isShort" :class="[getMemberInfo(each).birthPlace === null && $styles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(each).birthPlace }} </span>
+        <span v-if="!isShort" :class="[getMemberInfo(each).sectorCode === null && $styles.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 })"
+          v-if="!isShort"
+          class="rounded-br-lg transition-all h-[70px] w-[60px] place-self-end"
+          :class="[$styles.blueBgLight, $styles.blueBgLightHover, disabled ? $styles.disabled : 'cursor-pointer']"
+          @click="!disabled && $emit('onMore', { whichForm, index })"
         >
-          <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"> </i>
+          <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
+      v-if="singleMember !== null"
+      class="ml-5 grid auto-rows-fr items-center relative"
+      :class="[isShort ? 'grid-cols-2 md:gap-5 md:grid-cols-2 lg:grid-cols-2' : 'grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7']"
+    >
+      <span :class="[getMemberInfo(singleMember).fullName === null && $styles.emptyBlockCol]">{{ getMemberInfo(singleMember).fullName }}</span>
+      <span :class="[getMemberInfo(singleMember).iin === null && $styles.emptyBlockCol]">{{ getMemberInfo(singleMember).iin }}</span>
+      <span v-if="!isShort" :class="[getMemberInfo(singleMember).gender === null && $styles.emptyBlockCol]" class="hidden lg:block">{{ getMemberInfo(singleMember).gender }} </span>
+      <span v-if="!isShort" :class="[getMemberInfo(singleMember).birthDate === null && $styles.emptyBlockCol]"> {{ getMemberInfo(singleMember).birthDate }} </span>
+      <span v-if="!isShort" :class="[getMemberInfo(singleMember).birthPlace === null && $styles.emptyBlockCol]" class="hidden lg:block">
+        {{ getMemberInfo(singleMember).birthPlace }}
+      </span>
+      <span v-if="!isShort" :class="[getMemberInfo(singleMember).sectorCode === null && $styles.emptyBlockCol]" class="hidden lg:block">
+        {{ getMemberInfo(singleMember).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 })"
+        v-if="!isShort"
+        class="rounded-br-lg transition-all h-[70px] w-[60px] place-self-end"
+        :class="[$styles.blueBgLight, $styles.blueBgLightHover, disabled ? $styles.disabled : 'cursor-pointer']"
+        @click="!disabled && $emit('onMore', { whichForm })"
       >
-        <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"> </i>
+        <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)"
+      v-if="isMultiple && more && !isShort && isActionsAvailable"
+      :class="[$styles.blueBg, $styles.whiteText, $styles.textSimple, disabled ? $styles.disabled : 'cursor-pointer']"
+      class="lg:hidden transition-all rounded-b-lg h-[36px] flex items-center font-medium justify-center opacity-50 hover:opacity-90"
+      @click="!disabled && memberStore.addMember(whichForm)"
     >
-      {{ $t('buttons.add') }}
+      {{ $dataStore.t('buttons.add') }}
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Member } from '@/composables/classes';
+import { StoreMembers } from '../../types/enum';
+import { Member } from '../../composables/classes';
 
 export default defineComponent({
   props: {
@@ -69,22 +98,36 @@ export default defineComponent({
       default: '',
     },
     whichForm: {
-      type: String as PropType<MemberFormTypes>,
+      type: String as PropType<keyof typeof StoreMembers>,
       default: '',
     },
     more: {
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String as PropType<'short' | 'default'>,
+      default: 'default',
+    },
   },
   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 isMultiple = computed(() => [StoreMembers.insuredForm, StoreMembers.beneficiaryForm, StoreMembers.beneficialOwnerForm].includes(props.whichForm as StoreMembers));
+    const singleMember: Member | null =
+      props.whichForm === StoreMembers.policyholderForm || props.whichForm === StoreMembers.policyholdersRepresentativeForm ? formStore[props.whichForm] : null;
+    const multipleMember: Member[] | null =
+      props.whichForm === StoreMembers.insuredForm || props.whichForm === StoreMembers.beneficiaryForm || props.whichForm === StoreMembers.beneficialOwnerForm
+        ? formStore[props.whichForm]
+        : null;
+
+    const isShort = computed(() => props.type === 'short');
+    const isActionsAvailable = computed(() => memberStore.isStatementEditible(props.whichForm));
 
     const getMemberInfo = (memberData: Member) => {
       return {
@@ -101,10 +144,13 @@ export default defineComponent({
       // State
       formStore,
       memberStore,
-      member,
+      singleMember,
+      multipleMember,
       isMultiple,
 
       // Computed
+      isShort,
+      isActionsAvailable,
 
       // Functions
       getMemberInfo,

package/components/Form/FormSection.vue

@@ -1,6 +1,9 @@
 <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>
+  <section :class="[$styles.blueBgLight, $styles.rounded]" class="mt-[14px] p-4 flex flex-col gap-[1px]">
+    <h2 :class="[$styles.textTitle]" class="font-medium text-center w-full mb-4">
+      {{ title }}
+      <slot name="icon"></slot>
+    </h2>
     <slot></slot>
   </section>
 </template>

package/components/Form/FormTextSection.vue

@@ -1,7 +1,7 @@
 <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>
+  <div class="flex flex-col justify-between rounded-lg" :class="[$styles.whiteBg]">
+    <span v-if="title" class="p-4" :class="[$styles.textTitle]">{{ title }}</span>
+    <span v-if="subtitle" class="p-4 text-[#99A3B3] border-t-[1px]" :class="[$styles.textSimple]">{{ subtitle }}</span>
     <slot></slot>
   </div>
 </template>

package/components/Form/FormToggle.vue

@@ -1,7 +1,7 @@
 <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']"
+    :class="[$styles.whiteBg, hasBorder ? 'border-[1px] rounded-lg' : 'border-b-[1px] border-b-[#f3f6fc] rounded']"
   >
     <v-switch
       class="base-toggle"
@@ -13,10 +13,9 @@
       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>
+    />
+    <p :class="[$styles.textSimple]">{{ `${title}` }}</p>
+    <p class="mr-3" :class="[modelValue ? $styles.greenText : '', $styles.textSimple]">{{ `${modelValue ? $dataStore.t('confirm.yes') : $dataStore.t('confirm.no')}` }}</p>
   </div>
 </template>