From 128b8f1a2ca71b1469d67246f466184dcd852ce1 Mon Sep 17 00:00:00 2001
From: Konstantinos Paparas <kelsos86@gmail.com>
Date: Wed, 11 Dec 2024 16:06:35 +0100
Subject: [PATCH 1/2] fix: add local state for vat id check timeout

---
 .../account/home/AccountInformation.vue       | 115 ++++++++++--------
 1 file changed, 61 insertions(+), 54 deletions(-)

diff --git a/components/account/home/AccountInformation.vue b/components/account/home/AccountInformation.vue
index 06ca3a44..3c1e28cc 100644
--- a/components/account/home/AccountInformation.vue
+++ b/components/account/home/AccountInformation.vue
@@ -21,21 +21,12 @@ const state = reactive({
 const loading = ref(false);
 const done = ref(false);
 const vatSuccessMessage = ref('');
+const loadingCheck = ref<boolean>(false);
+const $externalResults = ref<Record<string, string[]>>({});
+const remainingTime = ref<number>(0);
 
 const { account } = storeToRefs(store);
 
-const movedOffline = computed(
-  () => get(account)?.address.movedOffline ?? false,
-);
-
-const isVatIdValid = computed(
-  () => get(account)?.vatIdStatus === VatIdStatus.VALID || false,
-);
-
-onBeforeMount(() => {
-  reset();
-});
-
 const rules = {
   firstName: { required },
   lastName: { required },
@@ -43,19 +34,60 @@ const rules = {
   vatId: {},
 };
 
-const $externalResults = ref<Record<string, string[]>>({});
+const waitUntilTime = useLocalStorage<number>('rotki.vat_check.wait_until_time', 0);
+
+const [DefineVAT, ReuseVAT] = createReusableTemplate();
 
 const v$ = useVuelidate(rules, state, {
   $autoDirty: true,
   $externalResults,
 });
 
+const { pause: pauseTimer, resume } = useIntervalFn(() => {
+  if (!updateRemainingTime()) {
+    set(remainingTime, 0);
+    pauseTimer();
+  }
+}, 1000, { immediate: false });
+
 const {
   public: {
     contact: { supportEmail, supportEmailMailto },
   },
 } = useRuntimeConfig();
 
+const movedOffline = computed<boolean>(() => get(account)?.address.movedOffline ?? false);
+const isVatIdValid = computed<boolean>(() => get(account)?.vatIdStatus === VatIdStatus.VALID || false);
+
+const vatHint = computed<string>(() => {
+  const wait = get(remainingTime);
+  if (wait > 0) {
+    const formatted = formatSeconds(wait);
+    const time = `${(formatted.minutes || '00').toString().padStart(2, '0')}:${(formatted.seconds || '00').toString().padStart(2, '0')}`;
+    return t('auth.signup.vat.timer', { time });
+  }
+
+  return t('auth.signup.customer_information.form.vat_id_hint');
+});
+
+const hideVATVerifyButton = computed<boolean>(() => {
+  const status = get(account)?.vatIdStatus;
+  return status === VatIdStatus.NON_EU_ID;
+});
+
+const vatErrorMessage = computed<string>(() => {
+  if (get(remainingTime) > 0)
+    return '';
+  const status = get(account)?.vatIdStatus;
+  if (status === VatIdStatus.NOT_VALID) {
+    return t('auth.signup.vat.invalid');
+  }
+  else if (status === VatIdStatus.NOT_CHECKED) {
+    return t('auth.signup.vat.not_verified');
+  }
+  return '';
+});
+
 function reset() {
   const userAccount = get(account);
 
@@ -103,26 +135,15 @@ async function update() {
   set(loading, false);
 }
 
-const waitTime = ref<number>(0);
-const loadingCheck = ref<boolean>(false);
-
-const { pause: pauseTimer, resume } = useIntervalFn(() => {
-  const wait = get(waitTime);
-  if (wait > 0) {
-    set(waitTime, wait - 1);
-  }
-  else {
-    pauseTimer();
-  }
-}, 1000, { immediate: false });
-
 async function handleCheckVATClick() {
   set(loadingCheck, true);
   const result = await store.checkVAT();
   await store.refreshVATCheckStatus();
 
   if (typeof result === 'number') {
-    set(waitTime, result);
+    const now = Math.round(Date.now() / 1000);
+    set(waitUntilTime, now + result);
+    set(remainingTime, result);
     pauseTimer();
     if (result > 0) {
       resume();
@@ -137,35 +158,21 @@ async function handleCheckVATClick() {
   set(loadingCheck, false);
 }
 
-const [DefineVAT, ReuseVAT] = createReusableTemplate();
+function updateRemainingTime(): boolean {
+  const now = Math.round(Date.now() / 1000);
+  const endTime = get(waitUntilTime);
 
-const vatHint = computed(() => {
-  const wait = get(waitTime);
-  if (wait > 0) {
-    const formatted = formatSeconds(wait);
-    const time = `${(formatted.minutes || '00').toString().padStart(2, '0')}:${(formatted.seconds || '00').toString().padStart(2, '0')}`;
-    return t('auth.signup.vat.timer', { time });
+  if (endTime > now) {
+    set(remainingTime, endTime - now);
+    return true;
   }
+  return false;
+}
 
-  return t('auth.signup.customer_information.form.vat_id_hint');
-});
-
-const hideVATVerifyButton = computed(() => {
-  const status = get(account)?.vatIdStatus;
-  return status === VatIdStatus.NON_EU_ID;
-});
-
-const vatErrorMessage = computed(() => {
-  if (get(waitTime) > 0)
-    return '';
-  const status = get(account)?.vatIdStatus;
-  if (status === VatIdStatus.NOT_VALID) {
-    return t('auth.signup.vat.invalid');
-  }
-  else if (status === VatIdStatus.NOT_CHECKED) {
-    return t('auth.signup.vat.not_verified');
-  }
-  return '';
+onBeforeMount(() => {
+  reset();
+  resume();
+  updateRemainingTime();
 });
 </script>
 
@@ -198,7 +205,7 @@ const vatErrorMessage = computed(() => {
         v-if="!hideVATVerifyButton"
         color="primary"
         class="h-10"
-        :disabled="waitTime > 0"
+        :disabled="remainingTime > 0 || !state.vatId"
         :loading="loadingCheck"
         @click="handleCheckVATClick()"
       >

From 8ea6c6931f87c5acb598740aa97ff99aa42004ba Mon Sep 17 00:00:00 2001
From: Konstantinos Paparas <kelsos86@gmail.com>
Date: Wed, 11 Dec 2024 17:14:07 +0100
Subject: [PATCH 2/2] fix: properly handle errors when check vat fails

---
 .../account/home/AccountInformation.vue       |  46 +++++---
 composables/use-vat-check.ts                  | 106 ++++++++++++++++++
 store/index.ts                                |  49 --------
 3 files changed, 135 insertions(+), 66 deletions(-)
 create mode 100644 composables/use-vat-check.ts

diff --git a/components/account/home/AccountInformation.vue b/components/account/home/AccountInformation.vue
index 3c1e28cc..e0203338 100644
--- a/components/account/home/AccountInformation.vue
+++ b/components/account/home/AccountInformation.vue
@@ -3,6 +3,7 @@ import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { get, objectOmit, set } from '@vueuse/core';
 import { storeToRefs } from 'pinia';
+import { useVatCheck } from '~/composables/use-vat-check';
 import { useMainStore } from '~/store';
 import { toMessages } from '~/utils/validation';
 import { VatIdStatus } from '~/types/account';
@@ -18,9 +19,10 @@ const state = reactive({
   vatId: '',
 });
 
-const loading = ref(false);
-const done = ref(false);
-const vatSuccessMessage = ref('');
+const loading = ref<boolean>(false);
+const done = ref<boolean>(false);
+const vatSuccessMessage = ref<string>('');
+const vatErrorMessage = ref<string>('');
 const loadingCheck = ref<boolean>(false);
 const $externalResults = ref<Record<string, string[]>>({});
 const remainingTime = ref<number>(0);
@@ -37,6 +39,7 @@ const rules = {
 const waitUntilTime = useLocalStorage<number>('rotki.vat_check.wait_until_time', 0);
 
 const [DefineVAT, ReuseVAT] = createReusableTemplate();
+const { refreshVATCheckStatus, checkVAT } = useVatCheck();
 
 const v$ = useVuelidate(rules, state, {
   $autoDirty: true,
@@ -75,8 +78,8 @@ const hideVATVerifyButton = computed<boolean>(() => {
   return status === VatIdStatus.NON_EU_ID;
 });
 
-const vatErrorMessage = computed<string>(() => {
-  if (get(remainingTime) > 0)
+const vatStatusErrorMessage = computed<string>(() => {
+  if (get(remainingTime) > 0 || state.vatId === '')
     return '';
   const status = get(account)?.vatIdStatus;
   if (status === VatIdStatus.NOT_VALID) {
@@ -137,22 +140,31 @@ async function update() {
 
 async function handleCheckVATClick() {
   set(loadingCheck, true);
-  const result = await store.checkVAT();
-  await store.refreshVATCheckStatus();
+  const checkResult = await checkVAT();
+  await refreshVATCheckStatus();
 
-  if (typeof result === 'number') {
+  if ('seconds' in checkResult) {
     const now = Math.round(Date.now() / 1000);
-    set(waitUntilTime, now + result);
-    set(remainingTime, result);
+    set(waitUntilTime, now + checkResult.seconds);
+    set(remainingTime, checkResult.seconds);
     pauseTimer();
-    if (result > 0) {
+    if (checkResult.seconds > 0) {
       resume();
     }
   }
-  else if (result) {
-    set(vatSuccessMessage, t('auth.signup.vat.verified'));
+  else if (checkResult.success) {
+    const status = get(account)?.vatIdStatus;
+    if (status === VatIdStatus.VALID) {
+      set(vatSuccessMessage, t('auth.signup.vat.verified'));
+      setTimeout(() => {
+        set(vatSuccessMessage, '');
+      }, 3000);
+    }
+  }
+  else {
+    set(vatErrorMessage, checkResult.message);
     setTimeout(() => {
-      set(vatSuccessMessage, '');
+      set(vatErrorMessage, '');
     }, 3000);
   }
   set(loadingCheck, false);
@@ -169,7 +181,7 @@ function updateRemainingTime(): boolean {
   return false;
 }
 
-onBeforeMount(() => {
+onMounted(() => {
   reset();
   resume();
   updateRemainingTime();
@@ -188,13 +200,13 @@ onBeforeMount(() => {
         class="flex-1"
         :label="t('auth.signup.customer_information.form.vat_id')"
         :hint="vatHint"
-        :error-messages="[...toMessages(v$.vatId), vatErrorMessage]"
+        :error-messages="[...toMessages(v$.vatId), vatStatusErrorMessage, vatErrorMessage]"
         :success-messages="vatSuccessMessage"
         @blur="v$.vatId.$touch()"
       >
         <template #append>
           <RuiIcon
-            v-if="!hideVATVerifyButton"
+            v-if="!hideVATVerifyButton && state.vatId"
             size="16"
             :name="isVatIdValid ? 'lu-circle-check' : 'lu-circle-x'"
             :color="isVatIdValid ? 'success' : 'error'"
diff --git a/composables/use-vat-check.ts b/composables/use-vat-check.ts
new file mode 100644
index 00000000..54fc1b57
--- /dev/null
+++ b/composables/use-vat-check.ts
@@ -0,0 +1,106 @@
+import { get, set } from '@vueuse/core';
+import { FetchError } from 'ofetch';
+import { useMainStore } from '~/store';
+import { fetchWithCsrf } from '~/utils/api';
+import type { ApiResponse } from '~/types';
+
+interface VATCheckSuccess {
+  readonly success: true;
+}
+
+interface VATCheckFailure {
+  readonly success: false;
+  readonly message: string;
+}
+
+type VATCheckResult = VATCheckSuccess | VATCheckFailure;
+
+interface VATCheckRateLimited {
+  readonly seconds: number;
+}
+
+interface UseVATCheckReturn {
+  checkVAT: () => Promise<VATCheckResult | VATCheckRateLimited>;
+  refreshVATCheckStatus: () => Promise<void>;
+}
+
+export function useVatCheck(): UseVATCheckReturn {
+  const { account } = storeToRefs(useMainStore());
+
+  const refreshVATCheckStatus = async (): Promise<void> => {
+    try {
+      const response = await fetchWithCsrf<ApiResponse<string>>(
+        'webapi/account/vat',
+        {
+          method: 'GET',
+        },
+      );
+      const { result } = response;
+      if (result) {
+        set(account, {
+          ...get(account),
+          vatIdStatus: result,
+        });
+      }
+    }
+    catch (error) {
+      logger.error(error);
+    }
+  };
+
+  /**
+   * Asynchronous function to check the validity of a VAT (Value Added Tax) ID.
+   *
+   * @async
+   * @function
+   * @returns {Promise<VATCheckResult | VATCheckRateLimited>} Returns a promise that resolves to either a VATCheckResult object
+   * containing the validation result and message, or a VATCheckRateLimited object indicating the rate limit status with remaining time.
+   *
+   * Possible return values:
+   * - An object with `result: true` if the VAT ID check task was spawned successfully.
+   * It provides no information about the validity of the VAT ID itself.
+   * A check to the account's vat id status property is required.
+   * - An object with `result: false` and a message if the VAT validation fails.
+   * - A VATCheckRateLimited object with `seconds` indicating the number of seconds until the rate limit is lifted, in case of rate-limiting.
+   * - A response with `message: 'Unknown error'` in case of unspecified errors.
+   *
+   * Handles potential errors during the fetch operation and logs them.
+   */
+  const checkVAT = async (): Promise<VATCheckResult | VATCheckRateLimited> => {
+    try {
+      const response = await fetchWithCsrf<ApiResponse<boolean>>(
+        'webapi/account/vat',
+        {
+          method: 'POST',
+        },
+      );
+      if (response.result) {
+        return { success: true };
+      }
+
+      return { message: response.message, success: false };
+    }
+    catch (error) {
+      logger.error(error);
+      if (error instanceof FetchError) {
+        const status = error?.status || -1;
+        const result = error.data.result;
+        const isBadRequest = status === 400;
+        if (isBadRequest) {
+          if (typeof result === 'number') {
+            return { seconds: result };
+          }
+          else if (error.data.message) {
+            return { message: error.data.message, success: false };
+          }
+        }
+      }
+      return { message: 'Unknown error', success: false };
+    }
+  };
+
+  return {
+    checkVAT,
+    refreshVATCheckStatus,
+  };
+}
diff --git a/store/index.ts b/store/index.ts
index 0199a28f..af46f668 100644
--- a/store/index.ts
+++ b/store/index.ts
@@ -61,53 +61,6 @@ export const useMainStore = defineStore('main', () => {
     }
   };
 
-  const refreshVATCheckStatus = async (): Promise<void> => {
-    try {
-      const response = await fetchWithCsrf<ApiResponse<string>>(
-        'webapi/account/vat',
-        {
-          method: 'GET',
-        },
-      );
-      const { result } = response;
-      if (result) {
-        set(account, {
-          ...get(account),
-          vatIdStatus: result,
-        });
-      }
-    }
-    catch (error) {
-      logger.error(error);
-    }
-  };
-
-  const checkVAT = async (): Promise<number | boolean> => {
-    try {
-      const response = await fetchWithCsrf<ApiResponse<boolean>>(
-        'webapi/account/vat',
-        {
-          method: 'POST',
-        },
-      );
-      if (response.result) {
-        return response.result;
-      }
-
-      return false;
-    }
-    catch (error) {
-      logger.error(error);
-      if (error instanceof FetchError) {
-        const status = error?.status || -1;
-        const result = error.data.result;
-        if (status === 400 && typeof result === 'number')
-          return result;
-      }
-      return false;
-    }
-  };
-
   const resendVerificationCode = async (t: ComposerTranslation): Promise<ActionResult> => {
     const onError = (data: ResendVerificationResponse) => {
       let message = data.message;
@@ -635,7 +588,6 @@ export const useMainStore = defineStore('main', () => {
     changePassword,
     checkout,
     checkPendingCryptoPayment,
-    checkVAT,
     cryptoPayment,
     deleteAccount,
     deletePendingPayment,
@@ -648,7 +600,6 @@ export const useMainStore = defineStore('main', () => {
     pay,
     plans,
     refreshSession,
-    refreshVATCheckStatus,
     resendVerificationCode,
     resumeError,
     subscriptions,