From 3f2c1b8f0b90cd72a81640ecb49197b7cc4b3da9 Mon Sep 17 00:00:00 2001
From: Komek Hayytnazarov <komek.h@gmail.com>
Date: Tue, 27 Sep 2022 10:34:46 +0500
Subject: [PATCH] profile bugs fixed

---
 src/components/country-dropdown/Main.vue |   5 +-
 src/views/profile-forms/Business.vue     |  44 +++--
 src/views/profile-forms/Company.vue      | 235 ++++++-----------------
 src/views/profile/Main.vue               | 161 ++++++----------
 4 files changed, 145 insertions(+), 300 deletions(-)

diff --git a/src/components/country-dropdown/Main.vue b/src/components/country-dropdown/Main.vue
index 39fb500..4e8e325 100644
--- a/src/components/country-dropdown/Main.vue
+++ b/src/components/country-dropdown/Main.vue
@@ -35,8 +35,9 @@ onBeforeMount(async () => {
 
   if (props.id) {
     country.value = countries.value.find((item) => item.id === +props.id);
-  } else {
+  } 
+  /* else {
     country.value = countries.value.find((item) => item.code === "TM");
-  }
+  } */
 });
 </script>
\ No newline at end of file
diff --git a/src/views/profile-forms/Business.vue b/src/views/profile-forms/Business.vue
index db20f15..faf8788 100644
--- a/src/views/profile-forms/Business.vue
+++ b/src/views/profile-forms/Business.vue
@@ -212,6 +212,13 @@
                 :id="formData.citizenship_id"
                 @on-change="(country) => onCountryChange(country)"
               />
+              <template v-if="!isCitizenshipValid">
+                <div
+                  class="text-danger mt-2"
+                >
+                  Select citizenship
+                </div>
+              </template>
             </div>
             <!-- End Citizenship -->
 
@@ -289,6 +296,8 @@ const isLoading = ref(false);
 
 const date = ref("");
 
+const isCitizenshipValid = ref(true);
+
 const formData = reactive({
   surname: "",
   name: "",
@@ -296,6 +305,11 @@ const formData = reactive({
   date_of_birth: "",
   birth_place: "",
   citizenship_id: "",
+  citizenship: {
+    id : 0,
+    code:"",
+    name: "",
+  },
   registration_address: "",
 });
 
@@ -332,31 +346,30 @@ const rules = {
 const validate = useVuelidate(rules, toRefs(formData));
 
 watch(date, (currentValue, oldValue) => {
-  formData.date_of_birth = currentValue;
+  console.log("currentValue: " + currentValue)
+  formData.date_of_birth = $h.changeDateFormat(currentValue);
 });
 
 const onCountryChange = (value) => {
-  console.log("onCountryChange: ", value);
-
   formData.citizenship_id = value.id;
+  
+  isCitizenshipValid.value = true;
 
-  localStorage.removeItem("country");
-  localStorage.setItem("country", value.name);
+  formData.citizenship = value;
 };
 
 const onRegister = async () => {
+  console.log("onRegister");
   console.log("formData.account_date: ", formData.date_of_birth);
 
-  formData.date_of_birth = $h.changeDateFormat(formData.date_of_birth);
-
   console.log("formData: ", formData);
 
+  if (!formData.citizenship_id) { isCitizenshipValid.value = false; }
+
   validate.value.$touch();
 
   if (validate.value.$invalid) { console.log("invalid form: "); return; }
 
-  console.log("onRegister");
-
   try {
     isLoading.value = true;
 
@@ -366,13 +379,11 @@ const onRegister = async () => {
     );
 
     isLoading.value = false;
-    console.log("response onRegister: ", response);
 
     // refresh LS "entrepreneurInfo"
     localStorage.removeItem("profile");
     localStorage.setItem("profile", JSON.stringify(formData));
 
-    //TODO: clean up
     router.push({ name: "profile", params: { loadFromLS: true } });
   } catch (error) {
     isLoading.value = false;
@@ -380,20 +391,13 @@ const onRegister = async () => {
 };
 
 onMounted(() => {
-  const params = _.isEmpty(route.params)
-    ? JSON.parse(localStorage.getItem("profile"))
-    : route.params;
-
-  console.log("Params: ", params);
+  const params = JSON.parse(localStorage.getItem("profile"))
 
   if (params) {
-    localStorage.setItem("profile", JSON.stringify(params));
     Object.assign(formData, params);
     date.value = $h.formatDate(formData.date_of_birth, "DD.MM.YYYY");
+    formData.citizenship_id = formData.citizenship.id;
   }
 
-  const country = JSON.parse(localStorage.getItem("country"));
-  console.log("country: ", country);
-  formData.citizenship_id = country.id;
 });
 </script>
\ No newline at end of file
diff --git a/src/views/profile-forms/Company.vue b/src/views/profile-forms/Company.vue
index b308b87..a779dce 100644
--- a/src/views/profile-forms/Company.vue
+++ b/src/views/profile-forms/Company.vue
@@ -6,9 +6,7 @@
     <div class="intro-y col-span-12 lg:col-span-6">
       <!-- BEGIN: Form Validation -->
       <PreviewComponent class="intro-y box">
-        <div
-          class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
-        >
+        <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">Company Form</h2>
         </div>
         <div class="p-5">
@@ -16,30 +14,14 @@
           <form class="validate-form" @submit.prevent="onRegister">
             <!-- Begin name -->
             <div class="input-form">
-              <label
-                for="validation-form-6"
-                class="form-label w-full flex flex-col sm:flex-row"
-              >
+              <label for="validation-form-6" class="form-label w-full flex flex-col sm:flex-row">
                 Name
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required, at least 10 characters</span
-                >
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required, at least 10 characters</span>
               </label>
-              <input
-                type="text"
-                id="validation-form-6"
-                v-model.trim="validate.name.$model"
-                class="form-control"
-                :class="{ 'border-danger': validate.name.$error }"
-                name="name"
-                placeholder="Type company name"
-              />
+              <input type="text" id="validation-form-6" v-model.trim="validate.name.$model" class="form-control"
+                :class="{ 'border-danger': validate.name.$error }" name="name" placeholder="Type company name" />
               <template v-if="validate.name.$error">
-                <div
-                  v-for="(error, index) in validate.name.$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
+                <div v-for="(error, index) in validate.name.$errors" :key="index" class="text-danger mt-2">
                   {{ error.$message }}
                 </div>
               </template>
@@ -48,30 +30,15 @@
 
             <!-- Begin Short name -->
             <div class="input-form mt-3">
-              <label
-                for="validation-form-6"
-                class="form-label w-full flex flex-col sm:flex-row"
-              >
+              <label for="validation-form-6" class="form-label w-full flex flex-col sm:flex-row">
                 Short name
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required</span
-                >
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
               </label>
-              <input
-                type="text"
-                id="validation-form-6"
-                v-model.trim="validate.short_name.$model"
-                class="form-control"
-                :class="{ 'border-danger': validate.short_name.$error }"
-                name="short_name"
-                placeholder="Type company short name"
-              />
+              <input type="text" id="validation-form-6" v-model.trim="validate.short_name.$model" class="form-control"
+                :class="{ 'border-danger': validate.short_name.$error }" name="short_name"
+                placeholder="Type company short name" />
               <template v-if="validate.short_name.$error">
-                <div
-                  v-for="(error, index) in validate.short_name.$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
+                <div v-for="(error, index) in validate.short_name.$errors" :key="index" class="text-danger mt-2">
                   {{ error.$message }}
                 </div>
               </template>
@@ -80,32 +47,17 @@
 
             <!-- Begin Registration number -->
             <div class="input-form mt-3">
-              <label
-                for="validation-form-6"
-                class="form-label w-full flex flex-col sm:flex-row"
-              >
+              <label for="validation-form-6" class="form-label w-full flex flex-col sm:flex-row">
                 Registration number
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required</span
-                >
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
               </label>
-              <input
-                type="text"
-                id="validation-form-6"
-                v-model.trim="validate.registration_number.$model"
-                class="form-control"
-                :class="{
+              <input type="text" id="validation-form-6" v-model.trim="validate.registration_number.$model"
+                class="form-control" :class="{
                   'border-danger': validate.registration_number.$error,
-                }"
-                name="registration_number"
-                placeholder="Type registration number"
-              />
+                }" name="registration_number" placeholder="Type registration number" />
               <template v-if="validate.registration_number.$error">
-                <div
-                  v-for="(error, index) in validate.registration_number.$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
+                <div v-for="(error, index) in validate.registration_number.$errors" :key="index"
+                  class="text-danger mt-2">
                   {{ error.$message }}
                 </div>
               </template>
@@ -114,14 +66,9 @@
 
             <!-- Begin Registration Date -->
             <div class="input-form mt-3">
-              <label
-                for="validation-form-2"
-                class="form-label w-full flex flex-col sm:flex-row"
-              >
+              <label for="validation-form-2" class="form-label w-full flex flex-col sm:flex-row">
                 Registration Date
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required</span
-                >
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
               </label>
               <!-- <input
                   id="validation-form-2"
@@ -135,32 +82,23 @@
               <!-- Begin Date picker -->
               <div class="relative mx-auto mt-3">
                 <div
-                  class="absolute rounded-l w-10 h-full flex items-center justify-center bg-slate-100 border text-slate-500 dark:bg-darkmode-700 dark:border-darkmode-800 dark:text-slate-400"
-                >
+                  class="absolute rounded-l w-10 h-full flex items-center justify-center bg-slate-100 border text-slate-500 dark:bg-darkmode-700 dark:border-darkmode-800 dark:text-slate-400">
                   <CalendarIcon class="w-4 h-4" />
                 </div>
-                <Litepicker
-                  v-model="date"
-                  :options="{
-                    maxDate: maxDate,
-                    format: 'DD.MM.YYYY',
-                    dropdowns: {
-                      minYear: 1900,
-                      maxYear: null,
-                      months: true,
-                      years: true,
-                    },
-                  }"
-                  class="form-control pl-12"
-                />
+                <Litepicker v-model="date" :options="{
+                  maxDate: maxDate,
+                  format: 'DD.MM.YYYY',
+                  dropdowns: {
+                    minYear: 1900,
+                    maxYear: null,
+                    months: true,
+                    years: true,
+                  },
+                }" class="form-control pl-12" />
               </div>
               <!-- End Date picker -->
               <template v-if="validate.registration_date.$error">
-                <div
-                  v-for="(error, index) in validate.registration_date.$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
+                <div v-for="(error, index) in validate.registration_date.$errors" :key="index" class="text-danger mt-2">
                   {{ error.$message }}
                 </div>
               </template>
@@ -169,33 +107,17 @@
 
             <!-- Begin State Registration Agency -->
             <div class="input-form mt-3">
-              <label
-                for="validation-form-4"
-                class="form-label w-full flex flex-col sm:flex-row"
-              >
+              <label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
                 State Registration Agency
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required</span
-                >
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
               </label>
-              <input
-                id="validation-form-4"
-                v-model.trim="validate.state_registration_agency.$model"
-                type="text"
-                name="state_registration_agency"
-                class="form-control"
-                :class="{
+              <input id="validation-form-4" v-model.trim="validate.state_registration_agency.$model" type="text"
+                name="state_registration_agency" class="form-control" :class="{
                   'border-danger': validate.state_registration_agency.$error,
-                }"
-                placeholder="Type state registration agency"
-              />
+                }" placeholder="Type state registration agency" />
               <template v-if="validate.state_registration_agency.$error">
-                <div
-                  v-for="(error, index) in validate.state_registration_agency
-                    .$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
+                <div v-for="(error, index) in validate.state_registration_agency
+                .$errors" :key="index" class="text-danger mt-2">
                   {{ error.$message }}
                 </div>
               </template>
@@ -204,30 +126,17 @@
 
             <!-- Begin Registration Place -->
             <div class="input-form mt-3">
-              <label
-                for="validation-form-4"
-                class="form-label w-full flex flex-col sm:flex-row"
-              >
+              <label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
                 Registration Place
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required</span
-                >
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
               </label>
-              <input
-                id="validation-form-4"
-                v-model.trim="validate.registration_place.$model"
-                type="text"
-                name="registration_place"
-                class="form-control"
+              <input id="validation-form-4" v-model.trim="validate.registration_place.$model" type="text"
+                name="registration_place" class="form-control"
                 :class="{ 'border-danger': validate.registration_place.$error }"
-                placeholder="Type company registration place"
-              />
+                placeholder="Type company registration place" />
               <template v-if="validate.registration_place.$error">
-                <div
-                  v-for="(error, index) in validate.registration_place.$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
+                <div v-for="(error, index) in validate.registration_place.$errors" :key="index"
+                  class="text-danger mt-2">
                   {{ error.$message }}
                 </div>
               </template>
@@ -236,33 +145,17 @@
 
             <!-- Begin Registration Address -->
             <div class="input-form mt-3">
-              <label
-                for="validation-form-4"
-                class="form-label w-full flex flex-col sm:flex-row"
-              >
+              <label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
                 Registration Address
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required</span
-                >
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
               </label>
-              <input
-                id="validation-form-4"
-                v-model.trim="validate.registration_address.$model"
-                type="text"
-                name="registration_address"
-                class="form-control"
-                :class="{
+              <input id="validation-form-4" v-model.trim="validate.registration_address.$model" type="text"
+                name="registration_address" class="form-control" :class="{
                   'border-danger': validate.registration_address.$error,
-                }"
-                placeholder="Type registration address"
-              />
+                }" placeholder="Type registration address" />
               <template v-if="validate.registration_address.$error">
-                <div
-                  v-for="(error, index) in validate.registration_address
-                    .$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
+                <div v-for="(error, index) in validate.registration_address
+                .$errors" :key="index" class="text-danger mt-2">
                   {{ error.$message }}
                 </div>
               </template>
@@ -271,12 +164,7 @@
 
             <button type="submit" class="btn btn-primary mt-5">
               Register
-              <LoadingIcon
-                icon="oval"
-                color="white"
-                class="w-4 h-4 ml-2"
-                v-if="isLoading"
-              />
+              <LoadingIcon icon="oval" color="white" class="w-4 h-4 ml-2" v-if="isLoading" />
             </button>
           </form>
           <!-- END: Validation Form -->
@@ -350,11 +238,10 @@ const rules = {
 const validate = useVuelidate(rules, toRefs(formData));
 
 watch(date, (currentValue, oldValue) => {
-  formData.registration_date = currentValue;
+  formData.registration_date = $h.changeDateFormat(currentValue);
 });
 
 const onRegister = async () => {
-  formData.registration_date = $h.changeDateFormat(formData.registration_date);
 
   validate.value.$touch();
 
@@ -373,11 +260,10 @@ const onRegister = async () => {
     isLoading.value = false;
     console.log("response onRegister: ", response);
 
-    // refresh LS "entrepreneurInfo"
+    // refresh LS "profile"
     localStorage.removeItem("profile");
     localStorage.setItem("profile", JSON.stringify(formData));
 
-    //TODO: clean up
     router.push({ name: "profile", params: { loadFromLS: true } });
   } catch (error) {
     isLoading.value = false;
@@ -385,14 +271,9 @@ const onRegister = async () => {
 };
 
 onMounted(() => {
-  const params = _.isEmpty(route.params)
-    ? JSON.parse(localStorage.getItem("profile"))
-    : route.params;
-
-  console.log("Params: ", params);
+  const params = JSON.parse(localStorage.getItem("profile"))
 
   if (params) {
-    localStorage.setItem("profile", JSON.stringify(params));
     Object.assign(formData, params);
     date.value = $h.formatDate(formData.registration_date, "DD.MM.YYYY");
   }
diff --git a/src/views/profile/Main.vue b/src/views/profile/Main.vue
index 19e97a5..9bb4d2c 100644
--- a/src/views/profile/Main.vue
+++ b/src/views/profile/Main.vue
@@ -4,23 +4,13 @@
   </div>
   <div class="intro-y grid grid-cols-1 lg:grid-cols-2 gap-6 mt-5">
     <!-- BEGIN: Company -->
-    <PreviewComponent
-      v-if="accountType == 'company'"
-      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"
-      >
+    <PreviewComponent v-if="accountType == 'company'" 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">Company</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="onEdit(accountType, profile)"
-            class="btn btn-primary"
-            ><EditIcon class="w-4 h-4"
-          /></a>
+        <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="onEdit(accountType, profile)" class="btn btn-primary">
+            <EditIcon class="w-4 h-4" />
+          </a>
         </div>
       </div>
       <div class="p-5">
@@ -41,7 +31,7 @@
             </div>
             <div class="flex m-2">
               <div class="flex font-medium">Registration date:</div>
-              <div class="flex pl-2">{{ profile.registration_date }}</div>
+              <div class="flex pl-2">{{ formattedDate }}</div>
             </div>
           </div>
           <!-- End first column -->
@@ -69,27 +59,17 @@
     <!-- END: Company -->
 
     <!-- BEGIN: Entrepreneur -->
-    <PreviewComponent
-      v-else="accountType == 'business'"
-      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">Entrepreneur</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="onEdit(accountType, profile)"
-            class="btn btn-primary"
-            ><EditIcon class="w-4 h-4"
-          /></a>
+    <PreviewComponent v-else="accountType == 'business'" 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">Personal</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="onEdit(accountType, profile)" class="btn btn-primary">
+            <EditIcon class="w-4 h-4" />
+          </a>
         </div>
       </div>
       <div class="p-5">
-        <div class="text-base font-medium">Personal</div>
+
         <div class="flex flex-col md:flex-row">
           <div class="flex-1">
             <!-- Begin first column -->
@@ -103,7 +83,7 @@
             </div>
             <div class="flex m-2">
               <div class="flex font-medium">Date of birth:</div>
-              <div class="flex pl-2">{{ dateOfBirth }}</div>
+              <div class="flex pl-2">{{ formattedDate }}</div>
             </div>
             <div class="flex m-2">
               <div class="flex font-medium">Place of birth:</div>
@@ -119,7 +99,7 @@
             </div>
             <div class="flex m-2">
               <div class="flex font-medium">Citizenship:</div>
-              <div class="flex pl-2">{{ country.name }}</div>
+              <div v-if="profile && profile.citizenship" class="flex pl-2">{{ profile.citizenship.name }}</div>
             </div>
             <div class="flex m-2">
               <div class="flex font-medium">Registration address:</div>
@@ -134,19 +114,12 @@
 
     <!-- BEGIN: Contacts -->
     <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"
-      >
+      <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">Contacts</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="onEdit(`contacts`, contacts)"
-            class="btn btn-primary"
-            ><EditIcon class="w-4 h-4"
-          /></a>
+        <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="onEdit(`contacts`, contacts)" class="btn btn-primary">
+            <EditIcon class="w-4 h-4" />
+          </a>
         </div>
       </div>
       <div class="p-5">
@@ -178,19 +151,12 @@
 
     <!-- BEGIN: Bank -->
     <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"
-      >
+      <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">Bank</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="onEdit(`bank-account`, bankAccount)"
-            class="btn btn-primary"
-            ><EditIcon class="w-4 h-4"
-          /></a>
+        <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="onEdit(`bank-account`, bankAccount)" class="btn btn-primary">
+            <EditIcon class="w-4 h-4" />
+          </a>
         </div>
       </div>
       <div class="p-5">
@@ -226,25 +192,13 @@
 
     <!-- BEGIN: Legalization -->
     <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"
-      >
+      <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">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" /> {{ legalBtnTitle }} 
-              <LoadingIcon
-                  icon="oval"
-                  color="white"
-                  class="w-4 h-4 ml-2"
-                  v-if="isLegalBtnLoading"
-                /> </a
-          >
+        <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" /> {{ legalBtnTitle }}
+            <LoadingIcon icon="oval" color="white" class="w-4 h-4 ml-2" v-if="isLegalBtnLoading" />
+          </a>
         </div>
       </div>
       <div class="p-5">
@@ -281,9 +235,7 @@ const isLoading = ref(false);
 
 const accountType = ref("");
 
-const dateOfBirth = ref("");
-
-const country = reactive({});
+const formattedDate = ref("");
 
 const profile = reactive({});
 
@@ -341,7 +293,7 @@ const prepareLegalBtnTitle = () => {
     legalBtnTitle.value = "Create New Application";
   } else if (legalAppStatus.value == "new") {
     legalBtnTitle.value = "Apply Form";
-  } else if (legalAppStatus.value == "new") {
+  } else if (legalAppStatus.value == "applied") {
     legalBtnTitle.value = "Approve Form";
   } else if (legalAppStatus.value == "approved") {
     legalBtnTitle.value = "Approved";
@@ -349,6 +301,7 @@ const prepareLegalBtnTitle = () => {
 };
 
 const fetchAccount = async () => {
+  console.log("fetchAccount");
   try {
     isLoading.value = true;
 
@@ -373,22 +326,21 @@ const fetchAccount = async () => {
       localStorage.setItem("bankAccount", JSON.stringify(bankAccount));
     }
 
-    if (data.profile) {
-      Object.assign(profile, data.profile);
-      localStorage.setItem("profile", JSON.stringify(profile));
-      dateOfBirth.value = $h.formatDate(profile.date_of_birth, "DD.MM.YYYY");
-    }
-
-    if (data.country) {
-      Object.assign(country, data.country);
-      localStorage.setItem("country", JSON.stringify(country));
-    }
-
     if (data.account_type) {
       accountType.value = data.account_type;
       localStorage.setItem("account_type", data.account_type);
     }
 
+    if (data.profile) {
+      Object.assign(profile, data.profile);
+      localStorage.setItem("profile", JSON.stringify(profile));
+      if (accountType.value == "company") {
+        formattedDate.value = $h.formatDate(profile.registration_date, "DD.MM.YYYY");
+      } else {
+        formattedDate.value = $h.formatDate(profile.date_of_birth, "DD.MM.YYYY");
+      }
+    }
+
     prepareLegalBtnTitle();
 
     isLoading.value = false;
@@ -399,34 +351,41 @@ const fetchAccount = async () => {
 
 // get the account from localStorage
 const getAccount = async () => {
+  console.log("getAccount ");
+
   try {
     isLoading.value = true;
 
-    console.log("getAccountFromLS ");
-
     const contactsLS = JSON.parse(localStorage.getItem("contacts"));
 
+    console.log("contactsLS: ", contactsLS);
+
     const bankAccountLS = JSON.parse(localStorage.getItem("bankAccount"));
 
+    console.log("bankAccountLS: ", bankAccountLS);
+
     const profileLS = JSON.parse(localStorage.getItem("profile"));
 
-    const countryLS = JSON.parse(localStorage.getItem("country"));
+    console.log("Profile LS: " + profileLS);
 
     accountType.value = localStorage.getItem("account_type");
 
     if (
       contactsLS === null ||
       bankAccountLS === null ||
-      profileLS === null ||
-      countryLS === null
+      profileLS === null
     ) {
       await fetchAccount();
     } else {
+      console.log("IN ELSE");
       Object.assign(contacts, contactsLS);
       Object.assign(bankAccount, bankAccountLS);
       Object.assign(profile, profileLS);
-      dateOfBirth.value = $h.formatDate(profile.date_of_birth, "DD.MM.YYYY");
-      Object.assign(country, profileLS);
+      if (accountType.value == "company") {
+        formattedDate.value = $h.formatDate(profile.registration_date, "DD.MM.YYYY");
+      } else {
+        formattedDate.value = $h.formatDate(profile.date_of_birth, "DD.MM.YYYY");
+      }
       prepareLegalBtnTitle();
     }