online applications page done

src/views/online-applications/Main.vue

@@ -1,19 +1,272 @@
 <template>
     <div class="intro-y grid grid-cols-1 lg:grid-cols-2 gap-6 mt-5">
-        <PreviewComponent class="box ">
+        <!-- BEGIN: Legalization -->
-            Hello 1
+        <PreviewComponent class="intro-y box flex flex-col">
+            <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
+                <h2 class="font-medium text-base mr-auto">{{ $t('LEGALIZATION') }}</h2>
+                <div class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0 text-center">
+                    <a href="javascript:;" @click.prevent="onLegalBtnTapped" class="btn btn-primary">
+                        <EditIcon class="w-4 h-4 mr-3" /> {{ $t(legalBtnTitle) }}
+                        <LoadingIcon icon="oval" color="white" class="w-4 h-4 ml-2" v-if="isLegalBtnLoading" />
+                    </a>
+                </div>
+            </div>
+            <div class="p-5 border-b border-slate-200/60 dark:border-darkmode-400">
+                <div class="flex flex-col md:flex-row min-h-max">
+                    <div class="flex-1">
+                        <!-- Begin  column -->
+                        <div class="sm:flex m-2 items-center">
+                            <div class="sm:w-1/4 font-medium">{{ $t('LEG_NUM') }}:</div>
+                            <div class="sm:w-3/4 sm:pl-3">{{ legal.number }}</div>
+                        </div>
+                        <div class="sm:flex m-2 items-center">
+                            <div class="sm:w-1/4 font-medium">{{ $t('EXP_DATE') }}:</div>
+                            <div class="sm:w-3/4 sm:pl-3">{{ legal.expires_at }}</div>
+                        </div>
+                    </div>
+                    <!-- End  column -->
+                </div>
+            </div>
+            <!--  <div v-if="!legalNumber" class="flex flex-row items-center p-5">
+          <InfoIcon class="w-6 h-6  w-14 text-danger mr-4" />
+          <span class="font-medium text-danger">{{ $t('LEG_WARN_INFO') }}</span>
+        </div> -->
         </PreviewComponent>
-        <PreviewComponent class="box ">
+        <!-- END: Legalization -->
-            Hello 2
+
+
+        <!-- BEGIN: Broker -->
+        <PreviewComponent class="intro-y box flex flex-col">
+            <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
+                <h2 class="font-medium text-base mr-auto">{{ $t('BROKER') }}</h2>
+                <div class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0 text-center">
+                    <a href="javascript:;" @click.prevent="onBrokerBtnTapped" class="btn btn-primary">
+                        <EditIcon class="w-4 h-4 mr-3" /> {{ $t(brokerBtnTitle) }}
+                        <LoadingIcon icon="oval" color="white" class="w-4 h-4 ml-2" v-if="isBrokerBtnLoading" />
+                    </a>
+                </div>
+            </div>
+            <div class="p-5 border-b border-slate-200/60 dark:border-darkmode-400">
+                <div class="flex flex-col md:flex-row min-h-max">
+                    <div class="flex-1">
+                        <!-- Begin  column -->
+                        <div class="sm:flex m-2 items-center">
+                            <div class="sm:w-1/4 font-medium">{{ $t('LEG_NUM') }}:</div>
+                            <div class="sm:w-3/4 sm:pl-3">{{ broker.number }}</div>
+                        </div>
+                        <div class="sm:flex m-2 items-center">
+                            <div class="sm:w-1/4 font-medium">{{ $t('EXP_DATE') }}:</div>
+                            <div class="sm:w-3/4 sm:pl-3">{{ broker.expires_at }}</div>
+                        </div>
+                    </div>
+                    <!-- End  column -->
+                </div>
+            </div>
+            <!--  <div v-if="!legalNumber" class="flex flex-row items-center p-5">
+          <InfoIcon class="w-6 h-6  w-14 text-danger mr-4" />
+          <span class="font-medium text-danger">{{ $t('LEG_WARN_INFO') }}</span>
+        </div> -->
         </PreviewComponent>
-        <PreviewComponent class="box ">
+        <!-- END: Broker -->
+
+        <!-- <PreviewComponent class="box ">
             Hello 3
         </PreviewComponent>
         <PreviewComponent class="box ">
             Hello 4
-        </PreviewComponent>
+        </PreviewComponent> -->
     </div>
 </template>
 
 <script setup>
+import { ref, reactive, onMounted } from "vue";
+import { fetchWrapper } from "@/api";
+import { helper as $h } from "@/utils/helper";
+import { useAuthStore } from "@/stores";
+import router from "@/router";
+
+const baseUrl = `${import.meta.env.VITE_API_URL}/api`;
+
+const isLoading = ref(false);
+
+const broker = reactive({});
+const brokerBtnTitle = ref("");
+const isBrokerBtnLoading = ref(false);
+
+// legalization
+const legal = reactive({});
+const legalBtnTitle = ref("");
+const isLegalBtnLoading = ref(false);
+
+
+const createLegalApplication = async () => {
+    isLegalBtnLoading.value = true;
+    try {
+        const response = await fetchWrapper.get(`${baseUrl}/application/new`);
+        const data = response.data;
+
+        isLegalBtnLoading.value = false;
+        return true;
+    } catch (error) {
+        isLegalBtnLoading.value = false;
+        return false;
+    }
+};
+
+const createBrokerApplication = async () => {
+    isBrokerBtnLoading.value = true;
+    try {
+        const response = await fetchWrapper.get(`${baseUrl}/broker-application/new`);
+        const data = response.data;
+
+        console.log('DDDDDDD: ' + data);
+        isBrokerBtnLoading.value = false;
+        return true;
+    } catch (error) {
+        isBrokerBtnLoading.value = false;
+        return false;
+    }
+};
+
+const onLegalBtnTapped = async () => {
+    console.log("onLegalBtnTapped: ", legal.can_extend, legal.can_apply);
+
+    if (legal.can_apply || legal.can_extend) {
+        const response = await createLegalApplication();
+        if (response) router.push({ name: "documents" });
+    } else router.push({ name: "documents" });
+};
+
+const onBrokerBtnTapped = async () => {
+    console.log("onBrokerBtnTapped: ", broker.can_extend, broker.can_apply);
+
+    if (broker.can_apply || broker.can_extend) {
+        const response = await createBrokerApplication();
+        if (response) router.push({ name: "broker-applications" });
+    } else router.push({ name: "broker-applications" });
+};
+
+const prepareLegalBtnTitle = () => {
+
+    // statuses
+
+    // draft
+    // new
+    // accepted
+    // acceptedBy
+    // refine
+    // approved
+    // approvedBy
+
+
+    if (legal.can_extend) {
+        legalBtnTitle.value = "LEG_BTN_NULL";
+        return;
+    }
+
+    if (legal == null || legal.app_status == "" || legal.app_status == null) {
+        legalBtnTitle.value = "LEG_BTN_NULL";
+    }
+    else if (legal.app_status == "draft") {
+        legalBtnTitle.value = "LEG_BTN_DRAFT";
+    }
+    else if (legal.app_status == "new") {
+        legalBtnTitle.value = "LEG_BTN_NEW";
+    }
+    else if (legal.app_status == "refine") {
+        legalBtnTitle.value = "LEG_BTN_REFINE";
+    }
+    else if (legal.app_status == "accepted") {
+        // set accepted by, accepted date
+        legalBtnTitle.value = "LEG_BTN_ACCEPTED";
+    }
+    else if (legal.app_status == "approved") {
+        // set approved by. approved date
+        legalBtnTitle.value = "LEG_BTN_APPROVED";
+    }
+};
+
+const prepareBrokerBtnTitle = () => {
+
+    // statuses
+
+    // draft
+    // new
+    // accepted
+    // acceptedBy
+    // refine
+    // approved
+    // approvedBy
+
+
+    if (broker.can_extend) {
+        brokerBtnTitle.value = "BRK_BTN_NULL";
+        return;
+    }
+
+    if (broker == null || broker.app_status == "" || broker.app_status == null) {
+        brokerBtnTitle.value = "BRK_BTN_NULL";
+    }
+    else if (broker.app_status == "draft") {
+        brokerBtnTitle.value = "BRK_BTN_DRAFT";
+    }
+    else if (broker.app_status == "new") {
+        brokerBtnTitle.value = "BRK_BTN_NEW";
+    }
+    else if (broker.app_status == "refine") {
+        brokerBtnTitle.value = "BRK_BTN_REFINE";
+    }
+    else if (broker.app_status == "accepted") {
+        // set accepted by, accepted date
+        brokerBtnTitle.value = "BRK_BTN_ACCEPTED";
+    }
+    else if (broker.app_status == "approved") {
+        // set approved by. approved date
+        brokerBtnTitle.value = "BRK_BTN_APPROVED";
+    }
+};
+
+const fetchStatus = async () => {
+    console.log("fetchBroker");
+    try {
+        isLoading.value = true;
+
+        const response = await fetchWrapper.get(`${baseUrl}/account/legalization-broker-status`);
+        const data = response.data;
+
+        console.info("fetchBroker data: ", data);
+
+        if (data.broker) {
+            Object.assign(broker, data.broker);
+            if (broker.expires_at) {
+                // convert date format
+                broker.expires_at = $h.formatDate(broker.expires_at, "DD.MM.YYYY");
+            }
+        }
+
+        if (data.legal) {
+            Object.assign(legal, data.legal);
+
+            if (legal.expires_at) {
+                // convert date format
+                legal.expires_at = $h.formatDate(legal.expires_at, "DD.MM.YYYY");
+            }
+        }
+
+        prepareLegalBtnTitle();
+        prepareBrokerBtnTitle();
+
+        isLoading.value = false;
+    } catch (error) {
+        isLoading.value = false;
+
+        // logout on error
+        const authStore = useAuthStore();
+        await authStore.logout();
+    }
+};
+
+onMounted(async () => {
+    await fetchStatus();
+});
 </script>

src/views/profile/Main.vue

@@ -249,8 +249,6 @@ const fetchAccount = async () => {
     const response = await fetchWrapper.get(`${baseUrl}/account`);
     const data = response.data;
 
-    console.warn("profile fetchAccount data: ", data);
-
     legalAppStatus.value = data.legal_app_status;
     legalExpiresAt.value = data.legal_expires_at;
     legalNumber.value = data.legal_number;
@@ -288,6 +286,8 @@ const fetchAccount = async () => {
     isLoading.value = false;
   } catch (error) {
     isLoading.value = false;
+
+    // logout on error
     const authStore = useAuthStore();
     await authStore.logout();
   }