hl-core 0.0.7 → 0.0.8-beta.10

package/components/Panel/PanelHandler.vue

@@ -0,0 +1,233 @@
+<template>
+  <section v-if="sendingActions">
+    <div :class="[$libStyles.flexColNav]">
+      <v-form ref="vForm">
+        <base-rounded-input v-model="actionCause" placeholder="Причина" :rules="$rules.required"></base-rounded-input>
+      </v-form>
+      <base-btn :text="buttonText" :loading="loading" @click="submitForm"></base-btn>
+    </div>
+  </section>
+  <section v-if="acceptAction">
+    <div :class="[$libStyles.flexColNav]">
+      <base-content-block class="flex flex-col gap-3">
+        <span
+          >{{ `Сумма страховой премии ${paymentPeriod}:` }} <b>{{ `${insurancePremiumPerMonth}₸` }}</b></span
+        >
+        <span
+          >{{ `Запрашиваемая страховая сумма: ` }} <b>{{ `${requestedSumInsured}₸` }}</b>
+        </span>
+      </base-content-block>
+      <base-btn :text="$t('confirm.yes')" @click="handleTask"></base-btn>
+      <base-btn :btn="$libStyles.blueLightBtn" :text="$t('confirm.no')" @click="closePanel"></base-btn>
+    </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="$t('sign.copyCloud')" @click="$dataStore.copyToClipboard(signUrl.uri)"></base-btn>
+                    <base-btn :loading="loading" :btn="$libStyles.blueLightBtn" :text="$t('sign.recipientNumber')" @click="openSmsPanel(signUrl)"></base-btn>
+                  </section>
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+            </v-expansion-panels>
+            <base-list-empty v-else></base-list-empty>
+          </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="$t('form.phoneNumber')"
+                placeholder="+7 7"
+              ></base-rounded-input>
+            </v-form>
+            <base-btn :text="$t('buttons.sendSMS')" :loading="loading" @click="submitForm"></base-btn
+          ></base-form-section>
+        </div>
+      </base-fade-transition>
+    </div>
+  </section>
+  <section v-if="payingActions" class="relative">
+    <div>
+      <base-fade-transition>
+        <div v-if="!isSendNumberOpen" :class="[$libStyles.flexColNav]">
+          <base-btn :loading="loading" :text="$t('payment.copyUrl')" @click="$dataStore.copyToClipboard(formStore.epayLink)"></base-btn>
+          <base-btn :loading="loading" :btn="$libStyles.blueLightBtn" :text="$t('payment.recipientNumber')" @click="openEpayPanel"></base-btn>
+        </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="">
+            <v-form ref="vForm">
+              <base-rounded-input
+                v-model="phoneNumber"
+                :maska="$maska.phone"
+                :rules="$rules.required.concat($rules.phoneFormat)"
+                :label="$t('form.phoneNumber')"
+                placeholder="+7 7"
+              ></base-rounded-input>
+            </v-form>
+            <base-btn :text="$t('buttons.sendSMS')" :loading="loading" @click="submitForm"></base-btn>
+          </base-form-section>
+        </div>
+      </base-fade-transition>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  setup() {
+    const route = useRoute();
+    const dataStore = useDataStore();
+    const formStore = useFormStore();
+    const actionCause = ref<string>('');
+    const loading = ref<boolean>(false);
+    const vForm = ref<any>();
+    const isSendNumberOpen = ref<boolean>(false);
+    const phoneNumber = ref<string | null>(formStore.policyholderForm.phoneNumber ?? '');
+    const selectedClient = ref<SignUrlType>();
+
+    const openSmsPanel = (signInfo: SignUrlType) => {
+      if (signInfo) {
+        isSendNumberOpen.value = true;
+        selectedClient.value = signInfo;
+        phoneNumber.value = signInfo.phoneNumber;
+      }
+    };
+
+    const openEpayPanel = () => {
+      isSendNumberOpen.value = true;
+    };
+
+    const closePanel = () => {
+      dataStore.panel.open = false;
+      dataStore.panelAction = null;
+    };
+
+    const submitForm = async () => {
+      await vForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
+        if (v.valid) {
+          loading.value = true;
+          switch (dataStore.panelAction) {
+            case constants.actions.pay:
+              await dataStore.sendSMS('PayUrl', phoneNumber.value, formStore.epayLink);
+              break;
+            case constants.actions.sign:
+              await dataStore.sendSMS('SignUrl', phoneNumber.value, selectedClient.value?.uri);
+              break;
+            default:
+              await handleTask();
+          }
+          loading.value = false;
+        }
+      });
+    };
+
+    const handleTask = async () => {
+      loading.value = true;
+      await dataStore.handleTask(dataStore.panelAction, route.params.taskId, actionCause.value);
+      loading.value = false;
+    };
+
+    const buttonText = computed(() => {
+      switch (dataStore.panelAction) {
+        case constants.actions.reject:
+        case constants.actions.rejectclient:
+          return dataStore.t('buttons.rejectStatement');
+        case constants.actions.return:
+          return dataStore.t('buttons.returnStatement');
+        case constants.actions.accept:
+          return dataStore.t('buttons.approve');
+        case constants.actions.sign:
+          return dataStore.t('buttons.sign');
+        case constants.actions.pay:
+          return dataStore.t('buttons.pay');
+      }
+    });
+
+    watch(
+      () => dataStore.panelAction,
+      val => {
+        if (!!val) {
+          dataStore.panel.title = buttonText.value!;
+          dataStore.panel.open = true;
+        }
+      },
+      { immediate: true },
+    );
+    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 signingActions = computed(() => dataStore.panelAction === constants.actions.sign);
+    const payingActions = computed(() => dataStore.panelAction === constants.actions.pay);
+    const paymentPeriod = computed(() => formStore.productConditionsForm.paymentPeriod.nameRu);
+    const insurancePremiumPerMonth = computed(() => dataStore.getNumberWithSpaces(formStore.productConditionsForm.insurancePremiumPerMonth));
+    const requestedSumInsured = computed(() => dataStore.getNumberWithSpaces(formStore.productConditionsForm.requestedSumInsured));
+
+    return {
+      // State
+      formStore,
+      loading,
+      actionCause,
+      vForm,
+      isSendNumberOpen,
+      phoneNumber,
+      selectedClient,
+
+      // Functions
+      closePanel,
+      submitForm,
+      handleTask,
+      openSmsPanel,
+      openEpayPanel,
+
+      // Computed
+      buttonText,
+      sendingActions,
+      signingActions,
+      payingActions,
+      acceptAction,
+      paymentPeriod,
+      insurancePremiumPerMonth,
+      requestedSumInsured,
+    };
+  },
+});
+</script>
+
+<style>
+.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;
+}
+</style>

package/components/Panel/PanelItem.vue

@@ -0,0 +1,5 @@
+<template>
+  <p class="transition-all h-[64px] px-4 flex justify-between items-center border-b-[1px] hover:border-b-[#A0B3D8] text-[16px]">
+    <slot></slot>
+  </p>
+</template>

package/components/Panel/PanelSelectItem.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="flex justify-between px-4 items-center cursor-pointer h-[60px]" :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>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    text: {
+      type: [String, Number],
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+});
+</script>

package/components/Transitions/FadeTransition.vue

@@ -0,0 +1,5 @@
+<template>
+  <transition-group enter-active-class="animate__animated animate__fadeIn">
+    <slot></slot>
+  </transition-group>
+</template>

package/components/Transitions/SlideTransition.vue

@@ -0,0 +1,5 @@
+<template>
+  <transition-group enter-active-class="animate__animated animate__slideInRight">
+    <slot></slot>
+  </transition-group>
+</template>

package/composables/axios.ts

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