hl-core 0.0.9-beta.3 → 0.0.9-beta.31

package/components/Panel/PanelHandler.vue

@@ -1,6 +1,6 @@
 <template>
   <section v-if="sendingActions">
-    <div :class="[$libStyles.flexColNav]">
+    <div :class="[$styles.flexColNav]">
       <v-form ref="vForm">
         <base-rounded-input v-model.trim="actionCause" placeholder="Причина" :rules="$rules.required" />
       </v-form>
@@ -8,7 +8,7 @@
     </div>
   </section>
   <section v-if="acceptAction">
-    <div :class="[$libStyles.flexColNav]">
+    <div :class="[$styles.flexColNav]">
       <base-content-block v-if="hasConditionsInfo" class="flex flex-col gap-3">
         <span
           >{{ `Сумма страховой премии ${paymentPeriod}:` }} <b>{{ `${insurancePremiumPerMonth}₸` }}</b></span
@@ -17,58 +17,94 @@
           >{{ `Запрашиваемая страховая сумма: ` }} <b>{{ `${requestedSumInsured}₸` }}</b>
         </span>
       </base-content-block>
+      <base-content-block v-if="$dataStore.isLifetrip" class="flex flex-col gap-3">
+        <span
+          >{{ `Стоимость на страховую сумму ${insuredAmount}:` }} <b>{{ `${price}₸` }}</b></span
+        >
+      </base-content-block>
       <base-btn :text="$dataStore.t('confirm.yes')" @click="handleTask" />
-      <base-btn :btn="$libStyles.blueLightBtn" :text="$dataStore.t('confirm.no')" @click="closePanel" />
+      <base-btn :btn="$styles.blueLightBtn" :text="$dataStore.t('confirm.no')" @click="closePanel" />
+    </div>
+  </section>
+  <section v-if="chooseSignActions">
+    <div v-if="!isElectronicContract && !isPaperContract && !isScansDocuments && !isQr" :class="[$styles.flexColNav]">
+      <base-btn :text="$dataStore.t('buttons.sendOnPaper')" :disabled="isPaperDisabled" @click="handleSignAction('paper')" />
+      <base-btn :text="$dataStore.t('buttons.sendElectronically')" :disabled="isElectronicDisabled" @click="handleSignAction('electronic')" />
+      <base-btn :text="$dataStore.t('buttons.generatePrintedForms')" :disabled="isScansDisabled" @click="handleSignAction('scans')" />
+      <base-btn :text="$dataStore.t('buttons.sendEgovMob')" :disabled="isQrDisabled" @click="handleSignAction('qr')" />
+    </div>
+    <div v-if="isPaperContract" :class="[$styles.flexColNav]">
+      <base-btn :text="$dataStore.t('buttons.downloadContract')" :loading="$dataStore.isButtonsLoading" @click="generateDocument" />
+    </div>
+    <div v-if="isScansDocuments" :class="[$styles.flexColNav]">
+      <base-btn :text="$dataStore.t('buttons.downloadStatement')" />
+      <base-btn :text="$dataStore.t('buttons.downloadContract')" />
+      <base-btn :text="$dataStore.t('buttons.downloadApplication')" />
+      <base-btn :text="$dataStore.t('buttons.downloadPowerOfAttorney')" />
+
+      <base-form-section class="mt-4 flex flex-col !gap-2" :title="$dataStore.t('clients.attachScansSignDocs')">
+        <base-file-input :label="$dataStore.t('labels.attachStatement')" @input.prevent="onFileChangeScans($event)" />
+        <base-file-input :label="$dataStore.t('labels.attachContract')" @input.prevent="onFileChangeScans($event)" />
+        <base-file-input :label="$dataStore.t('labels.attachApplication')" @input.prevent="onFileChangeScans($event)" />
+        <base-file-input :label="$dataStore.t('labels.attachPowerOfAttorney')" @input.prevent="onFileChangeScans($event)" />
+      </base-form-section>
+      <base-btn :text="$dataStore.t('buttons.sign')" :loading="$dataStore.isButtonsLoading" @click="sendFiles" />
+      <base-btn :text="$dataStore.t('buttons.cancel')" :btn="$styles.whiteBtn" @click="isScansDocuments = false" />
+    </div>
+    <div v-if="isQr" :class="[$styles.flexColNav]">
+      <base-form-section :title="''">
+        <img width="135" height="135" class="ma-auto" v-if="qrUrl" :src="qrUrl" alt="" />
+        <span :class="[$styles.textSimple]" class="mt-3 text-center">{{ $dataStore.t('sign.scanQrCode') }}</span>
+        <base-btn class="mt-10" :loading="loading" :text="$dataStore.t('sign.copyEgov')" @click="$dataStore.copyToClipboard(qrUrl)" />
+        <base-btn :text="$dataStore.t('buttons.cancel')" :btn="$styles.whiteBtn" @click="isQr = false" />
+      </base-form-section>
     </div>
   </section>
   <section v-if="signingActions" class="relative">
-    <div>
-      <base-fade-transition>
-        <div v-if="!isSendNumberOpen" :class="[$libStyles.flexColNav]">
-          <div :class="[$libStyles.blueBgLight]" class="rounded-lg p-4">
-            <v-expansion-panels v-if="formStore.signUrls && formStore.signUrls.length" variant="accordion" multiple>
-              <v-expansion-panel v-for="signUrl of formStore.signUrls" :key="signUrl.iin!" class="border-[1px]" elevation="0" bg-color="#FFF">
-                <v-expansion-panel-title class="h-[80px]" :class="$libStyles.textTitle">{{ `${signUrl.longName} - ${signUrl.iin}` }}</v-expansion-panel-title>
-                <v-expansion-panel-text class="border-t-[1px]">
-                  <section class="flex flex-col gap-4 py-3" :class="$libStyles.textSimple">
-                    <base-btn :loading="loading" :text="$dataStore.t('sign.copyCloud')" @click="$dataStore.copyToClipboard(signUrl.uri)" />
-                    <base-btn :loading="loading" :btn="$libStyles.blueLightBtn" :text="$dataStore.t('sign.recipientNumber')" @click="openSmsPanel(signUrl)" />
-                  </section>
-                </v-expansion-panel-text>
-              </v-expansion-panel>
-            </v-expansion-panels>
-            <base-list-empty v-else />
-          </div>
-        </div>
-        <div v-if="isSendNumberOpen" :class="[$libStyles.flexColNav]">
-          <i
-            class="mdi mdi-arrow-left cursor-pointer absolute text-xl left-0 top-0 rounded-br-full bg-white border-[1px] pb-3 pt-1 pl-1 pr-3"
-            @click="isSendNumberOpen = false"
-          ></i>
-          <base-form-section :title="selectedClient && selectedClient.longName ? selectedClient.longName : ''">
-            <v-form ref="vForm">
-              <base-rounded-input
-                v-model="phoneNumber"
-                :maska="$maska.phone"
-                :rules="$rules.required.concat($rules.phoneFormat)"
-                :label="$dataStore.t('form.phoneNumber')"
-                placeholder="+7 7"
-              />
-            </v-form>
-            <base-btn :text="$dataStore.t('buttons.sendSMS')" :loading="loading" @click="submitForm"
-          /></base-form-section>
+    <base-fade-transition>
+      <div v-if="!isSendNumberOpen" :class="[$styles.flexColNav]">
+        <div :class="[$styles.blueBgLight]" class="rounded-lg p-4">
+          <v-expansion-panels v-if="formStore.signUrls && formStore.signUrls.length" variant="accordion" multiple>
+            <v-expansion-panel v-for="signUrl of formStore.signUrls" :key="signUrl.iin!" class="border-[1px]" elevation="0" bg-color="#FFF">
+              <v-expansion-panel-title class="h-[80px]" :class="$styles.textTitle">
+                {{ `${signUrl.longName} - ${signUrl.iin}` }}
+              </v-expansion-panel-title>
+              <v-expansion-panel-text class="border-t-[1px]">
+                <section class="flex flex-col gap-4 py-3" :class="$styles.textSimple">
+                  <base-btn :loading="loading" :text="$dataStore.t('sign.copyCloud')" @click="$dataStore.copyToClipboard(signUrl.uri)" />
+                  <base-btn :loading="loading" :btn="$styles.blueLightBtn" :text="$dataStore.t('sign.recipientNumber')" @click="openSmsPanel(signUrl)" />
+                </section>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+          </v-expansion-panels>
+          <base-list-empty v-else />
         </div>
-      </base-fade-transition>
-    </div>
+      </div>
+      <div v-if="isSendNumberOpen" :class="[$styles.flexColNav]">
+        <i class="mdi mdi-arrow-left cursor-pointer absolute text-xl left-0 top-0 rounded-br-full bg-white border-[1px] pb-3 pt-1 pl-1 pr-3" @click="isSendNumberOpen = false"></i>
+        <base-form-section :title="selectedClient && selectedClient.longName ? selectedClient.longName : ''">
+          <v-form ref="vForm">
+            <base-rounded-input
+              v-model="phoneNumber"
+              :maska="$maska.phone"
+              :rules="$rules.required.concat($rules.phoneFormat)"
+              :label="$dataStore.t('form.phoneNumber')"
+              placeholder="+7 7"
+            />
+          </v-form>
+          <base-btn :text="$dataStore.t('buttons.sendSMS')" :loading="loading" @click="submitForm" />
+        </base-form-section>
+      </div>
+    </base-fade-transition>
   </section>
   <section v-if="payingActions" class="relative">
     <div>
       <base-fade-transition>
-        <div v-if="!isSendNumberOpen" :class="[$libStyles.flexColNav]">
+        <div v-if="!isSendNumberOpen" :class="[$styles.flexColNav]">
           <base-btn :loading="loading" :text="$dataStore.t('payment.copyUrl')" @click="$dataStore.copyToClipboard(formStore.epayLink)" />
-          <base-btn :loading="loading" :btn="$libStyles.blueLightBtn" :text="$dataStore.t('payment.recipientNumber')" @click="openEpayPanel" />
+          <base-btn :loading="loading" :btn="$styles.blueLightBtn" :text="$dataStore.t('payment.recipientNumber')" @click="openEpayPanel" />
         </div>
-        <div v-if="isSendNumberOpen" :class="[$libStyles.flexColNav]">
+        <div v-if="isSendNumberOpen" :class="[$styles.flexColNav]">
           <i
             class="mdi mdi-arrow-left cursor-pointer absolute text-xl left-0 top-0 rounded-br-full bg-white border-[1px] pb-3 pt-1 pl-1 pr-3"
             @click="isSendNumberOpen = false"
@@ -90,7 +126,7 @@
     </div>
   </section>
   <section v-if="affiliateActions">
-    <div :class="[$libStyles.flexColNav]">
+    <div :class="[$styles.flexColNav]">
       <v-form ref="vForm">
         <base-content-block class="flex flex-col gap-3">
           <base-form-input v-model.trim="formStore.affilationResolution.number" :rules="$rules.required" :label="$dataStore.t('form.documentNumber')" />
@@ -99,27 +135,54 @@
             :maska="$maska.date"
             :rules="$rules.required"
             :label="$dataStore.t('form.date')"
-            append-inner-icon="mdi mdi-calendar-blank-outline" />
+            append-inner-icon="mdi mdi-calendar-blank-outline"
+          />
           <base-file-input v-if="!affiliationDocument" @input.prevent="onFileChange($event)" />
           <base-empty-form-field v-if="affiliationDocument" class="justify-between">
             {{ `${affiliationDocument.fileTypeName} - ${affiliationDocument.fileName}` }}
-            <i class="cursor-pointer mdi mdi-file-document mr-6 text-[#a0b3d8] text-xl"></i></base-empty-form-field
-        ></base-content-block>
+            <i class="cursor-pointer mdi mdi-file-document mr-6 text-[#a0b3d8] text-xl"></i
+          ></base-empty-form-field>
+        </base-content-block>
       </v-form>
       <base-btn :text="buttonText" :loading="loading" @click="submitForm" />
     </div>
   </section>
+  <section v-if="templateAction">
+    <div :class="[$styles.flexColNav]">
+      <base-content-block>
+        <base-panel-item class="cursor-pointer bg-white mb-4 border-b-0 rounded" @click.prevent="downloadTemplate">
+          {{ $dataStore.t('downloadTemplate') }}
+          <i class="mdi mdi-download text-2xl text-[#A0B3D8]"></i
+        ></base-panel-item>
+      </base-content-block>
+      <base-content-block>
+        <v-form ref="vForm" class="mb-3">
+          <base-form-input v-model.trim="email" :label="$dataStore.t('form.email')" :rules="$rules.required" />
+        </v-form>
+        <base-btn :text="$dataStore.t('form.sendToEmail')" :loading="loading" @click="sendTemplateToEmail" />
+      </base-content-block>
+    </div>
+  </section>
 </template>
 
 <script lang="ts">
-import { DocumentItem } from '../../composables/classes';
+import { DocumentItem, Value } from '../../composables/classes';
+
 export default defineComponent({
-  setup() {
+  emits: ['task'],
+  setup(props, { emit }) {
     const route = useRoute();
     const dataStore = useDataStore();
     const formStore = useFormStore();
     const actionCause = ref<string>('');
     const loading = ref<boolean>(false);
+    const isPaperContract = ref<boolean>(false);
+    const isScansDocuments = ref<boolean>(false);
+    const isQr = ref<boolean>(false);
+    const isElectronicContract = ref<boolean>(true);
+    const email = ref<string>('');
+    const qrUrl = ref<string>('');
+
     const vForm = ref<any>();
     const isSendNumberOpen = ref<boolean>(false);
     const phoneNumber = ref<string | null>(formStore.policyholderForm.phoneNumber ?? '');
@@ -137,6 +200,8 @@ export default defineComponent({
       fileTypeCode: documentDict.value ? documentDict.value.code : '',
     });
     const affiliationFormData = ref(new FormData());
+    const scansFormData = ref(new FormData());
+    const scansFiles = ref<any[]>([]);
 
     const openSmsPanel = (signInfo: SignUrlType) => {
       if (signInfo) {
@@ -166,6 +231,41 @@ export default defineComponent({
       }
     };
 
+    const onFileChangeScans = async (event: InputEvent) => {
+      if (event.target) {
+        const files = (event.target as HTMLInputElement).files;
+        if (files && files.length) {
+          const name = files[0].name.substring(0, files[0].name.indexOf('.'));
+          const selectedDocument = dataStore.dicFileTypeList.find((i: Value) => i.nameRu === String(name));
+          const data = {
+            processInstanceId: formStore.applicationData.processInstanceId,
+            fileTypeCode: selectedDocument ? selectedDocument.code : null,
+            fileTypeId: selectedDocument ? selectedDocument.id : null,
+            fileName: files[0].name,
+          };
+          scansFiles.value.push({
+            file: files[0],
+            fileData: JSON.stringify([data]),
+          });
+        }
+      }
+    };
+
+    const sendFiles = async () => {
+      if (scansFiles.value.length !== 4) {
+        dataStore.showToaster('warning', dataStore.t('toaster.notAllDocumentsAttached'));
+        return;
+      }
+      for (const item of scansFiles.value) {
+        scansFormData.value.append('file', item.file);
+        scansFormData.value.append('fileData', item.fileData);
+        await dataStore.uploadFiles(scansFormData.value);
+        scansFormData.value = new FormData();
+      }
+      closePanel();
+      dataStore.showToaster('success', dataStore.t('toaster.successOperation'));
+      await dataStore.handleTask(constants.actions.signed, route.params.taskId as string, actionCause.value);
+    };
     const submitForm = async () => {
       await vForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
         if (v.valid) {
@@ -198,10 +298,32 @@ export default defineComponent({
 
     const handleTask = async () => {
       loading.value = true;
-      await dataStore.handleTask(dataStore.panelAction, route.params.taskId as string, actionCause.value);
+      // Пока не нужно, на всякий оставить
+      // if (needRecalculation.value) {
+      //   dataStore.showToaster('info', dataStore.t('toaster.needToRecalculate'));
+      //   loading.value = false;
+      //   return;
+      // }
+      if (dataStore.isAML || dataStore.isCheckContract || dataStore.isCheckContragent) {
+        emit('task', [dataStore.panelAction, route.params.taskId as string, actionCause.value]);
+      } else {
+        await dataStore.handleTask(dataStore.panelAction, route.params.taskId as string, actionCause.value);
+      }
       loading.value = false;
     };
 
+    const onInit = async () => {
+      if (dataStore.controls.hasChooseSign) {
+        if (dataStore.isGons || dataStore.isLifeBusiness) {
+          isElectronicContract.value = false;
+        }
+      }
+    };
+
+    onMounted(async () => {
+      await onInit();
+    });
+
     const buttonText = computed(() => {
       switch (dataStore.panelAction) {
         case constants.actions.reject:
@@ -218,36 +340,136 @@ export default defineComponent({
         case constants.actions.register:
           return dataStore.t('buttons.register');
         case constants.actions.affiliate:
+        case constants.actions.template:
           return dataStore.t('buttons.send');
+        default:
+          return dataStore.t('buttons.send');
+      }
+    });
+
+    const panelTitle = computed(() => {
+      if (dataStore.isLifeBusiness && dataStore.panelAction === constants.actions.template) {
+        return dataStore.t('template');
       }
+      return buttonText.value;
     });
 
     watch(
       () => dataStore.panelAction,
       val => {
         if (!!val) {
-          dataStore.panel.title = buttonText.value!;
+          dataStore.panel.title = panelTitle.value;
           dataStore.panel.open = true;
         }
       },
       { immediate: true },
     );
+
+    const needRecalculation = computed(
+      () =>
+        dataStore.isGons &&
+        formStore.applicationData.statusCode === 'UnderwriterForm' &&
+        dataStore.panelAction === constants.actions.accept &&
+        formStore.productConditionsForm.isRecalculated === false,
+    );
     const sendingActions = computed(
       () => dataStore.panelAction === constants.actions.reject || dataStore.panelAction === constants.actions.return || dataStore.panelAction === constants.actions.rejectclient,
     );
     const acceptAction = computed(() => dataStore.panelAction === constants.actions.accept);
+    const templateAction = computed(() => dataStore.panelAction === constants.actions.template);
     const signingActions = computed(() => dataStore.panelAction === constants.actions.sign);
     const payingActions = computed(() => dataStore.panelAction === constants.actions.pay);
     const affiliateActions = computed(() => dataStore.panelAction === constants.actions.affiliate);
+    const chooseSignActions = computed(() => dataStore.controls.hasChooseSign && dataStore.panelAction === constants.actions.chooseSign);
+
     const paymentPeriod = computed(() => formStore.productConditionsForm.paymentPeriod.nameRu);
     const insurancePremiumPerMonth = computed(() => dataStore.getNumberWithSpaces(formStore.productConditionsForm.insurancePremiumPerMonth));
-    const requestedSumInsured = computed(() => dataStore.getNumberWithSpaces(formStore.productConditionsForm.requestedSumInsured));
+    const requestedSumInsured = computed(() => {
+      if (dataStore.isLifeBusiness && formStore.productConditionsForm.requestedSumInsured === null) {
+        dataStore.getNumberWithSpaces(formStore.applicationData.policyAppDto!.mainInsSum);
+      }
+      return dataStore.getNumberWithSpaces(formStore.productConditionsForm.requestedSumInsured);
+    });
+    const price = computed(() => dataStore.getNumberWithSpaces(formStore.productConditionsForm.calculatorForm.price));
+    const insuredAmount = computed(() => formStore.productConditionsForm.calculatorForm.amount!.nameRu! + dataStore.currency);
     const hasConditionsInfo = computed(() => {
+      if (dataStore.isLifetrip) {
+        return false;
+      }
       if (dataStore.isFinCenter()) {
         return false;
       }
       return true;
     });
+    const isPaperDisabled = computed(() => {
+      if (dataStore.isGons) {
+        return false;
+      }
+      return true;
+    });
+    const isElectronicDisabled = computed(() => {
+      if (dataStore.isGons) {
+        return true;
+      }
+      return false;
+    });
+    const isScansDisabled = computed(() => {
+      if (dataStore.isGons) {
+        return true;
+      }
+      return false;
+    });
+    const isQrDisabled = computed(() => {
+      if (dataStore.isLifeBusiness) {
+        return false;
+      }
+      return true;
+    });
+    const downloadTemplate = async () => {
+      dataStore.panel.open = false;
+      dataStore.panelAction = null;
+      await dataStore.downloadTemplate();
+    };
+
+    const sendTemplateToEmail = async () => {
+      await vForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
+        if (v.valid) {
+          dataStore.panel.open = false;
+          dataStore.panelAction = null;
+          await dataStore.sendTemplateToEmail(email.value);
+        }
+      });
+    };
+
+    const handleSignAction = async (type: 'paper' | 'electronic' | 'scans' | 'qr') => {
+      if (type === 'electronic') {
+        await dataStore.signDocument();
+        isElectronicContract.value = true;
+      }
+      if (type === 'paper') {
+        isPaperContract.value = true;
+      }
+      if (type === 'scans') {
+        isScansDocuments.value = true;
+      }
+      if (type === 'qr') {
+        await generateQR();
+        isQr.value = true;
+      }
+    };
+
+    // TODO Рефактор QR c npm
+    const generateQR = async () => {
+      const uuid = crypto.randomUUID();
+      const qrValue = `${getValuePerEnv('qrGenUrl')}/${uuid}`;
+      qrUrl.value = `https://api.qrserver.com/v1/create-qr-code/?size=135x135&data=${qrValue}`;
+    };
+
+    const generateDocument = async () => {
+      dataStore.panel.open = false;
+      dataStore.panelAction = null;
+      await dataStore.generateDocument();
+    };
 
     return {
       // State
@@ -258,7 +480,11 @@ export default defineComponent({
       isSendNumberOpen,
       phoneNumber,
       selectedClient,
-
+      isPaperContract,
+      isScansDocuments,
+      email,
+      isQr,
+      qrUrl,
       // Functions
       closePanel,
       submitForm,
@@ -266,7 +492,10 @@ export default defineComponent({
       openSmsPanel,
       openEpayPanel,
       onFileChange,
-
+      downloadTemplate,
+      sendTemplateToEmail,
+      onFileChangeScans,
+      sendFiles,
       // Computed
       buttonText,
       sendingActions,
@@ -274,11 +503,22 @@ export default defineComponent({
       payingActions,
       acceptAction,
       affiliateActions,
+      chooseSignActions,
       paymentPeriod,
       insurancePremiumPerMonth,
       requestedSumInsured,
       affiliationDocument,
       hasConditionsInfo,
+      price,
+      insuredAmount,
+      templateAction,
+      isElectronicContract,
+      handleSignAction,
+      generateDocument,
+      isPaperDisabled,
+      isElectronicDisabled,
+      isScansDisabled,
+      isQrDisabled,
     };
   },
 });
@@ -288,16 +528,19 @@ export default defineComponent({
 .v-expansion-panel-title__overlay {
   background: #ffffff;
 }
+
 .v-expansion-panel-title {
   height: 70px !important;
   padding: 10px 20px !important;
 }
+
 .v-expansion-panels--variant-accordion > :last-child {
   border-top-left-radius: 0.5rem !important;
   border-top-right-radius: 0.5rem !important;
   border-top-left-radius: 0.5rem !important;
   border-radius: 0.5rem !important;
 }
+
 .v-expansion-panel-text__wrapper {
   padding: 10px 20px !important;
 }

package/components/Panel/PanelSelectItem.vue

@@ -1,7 +1,10 @@
 <template>
-  <div class="flex justify-between p-4 items-center cursor-pointer" :class="[$libStyles.rounded, $libStyles.blueBgLight, $libStyles.blueBgLightHover]">
-    <span :class="[$libStyles.textSimple]">{{ text }}</span>
-    <i class="mdi text-xl" :class="[selected ? `mdi-radiobox-marked ${$libStyles.greenText}` : 'mdi-radiobox-blank text-[#636363]']"></i>
+  <div
+    class="transition-all flex justify-between p-4 items-center cursor-pointer"
+    :class="[$styles.rounded, $styles.blueBgLight, $styles.blueBgLightHover, disabled ? $styles.disabled : '']"
+  >
+    <span :class="[$styles.textSimple]">{{ text }}</span>
+    <i class="mdi text-xl" :class="[selected ? `${trueIcon} ${$styles.greenText}` : `${falseIcon} text-[#636363]`]"></i>
   </div>
 </template>
 
@@ -15,6 +18,18 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    trueIcon: {
+      type: String,
+      default: 'mdi-radiobox-marked',
+    },
+    falseIcon: {
+      type: String,
+      default: 'mdi-radiobox-blank ',
+    },
   },
 });
 </script>

package/components/Panel/RightPanelCloser.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const dataStore = useDataStore();
+
+onUnmounted(() => {
+  dataStore.rightPanel.open = false;
+});
+</script>

package/components/Utilities/IconBorder.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="border-[1px] border-[#F1F2F6] rounded-[12px] p-[10px]">
+    <slot v-if="!icon"></slot>
+    <i v-else :class="icon"></i>
+  </div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    icon: {
+      type: String,
+      default: '',
+    },
+  },
+});
+</script>

package/composables/axios.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import interceptors from '../api/interceptors';
 
-export const useAxios = (baseURL: string) => {
+export const useAxiosInstance = (baseURL: string) => {
   const axiosInstance = axios.create({
     baseURL: baseURL,
   });