feat: show button to verify vat ID

components/account/home/AccountAddress.vue

@@ -111,6 +111,7 @@ const { t } = useI18n();
         maxlength="128"
         variant="outlined"
         color="primary"
+        dense
         autocomplete="address-line1"
         :label="t('auth.signup.address.form.address_line_1')"
         :hint="t('auth.common.required')"
@@ -124,6 +125,7 @@ const { t } = useI18n();
         maxlength="128"
         variant="outlined"
         color="primary"
+        dense
         autocomplete="address-line2"
         :label="t('auth.signup.address.form.address_line_2')"
         :hint="t('auth.common.optional')"
@@ -136,6 +138,7 @@ const { t } = useI18n();
         v-model="state.city"
         variant="outlined"
         color="primary"
+        dense
         autocomplete="address-level2"
         :label="t('auth.signup.address.form.city')"
         :hint="t('auth.common.required')"
@@ -148,6 +151,7 @@ const { t } = useI18n();
         v-model="state.postcode"
         variant="outlined"
         color="primary"
+        dense
         autocomplete="postal-code"
         :label="t('auth.signup.address.form.postal_code')"
         :hint="t('auth.common.required')"
@@ -158,6 +162,7 @@ const { t } = useI18n();
       <CountrySelect
         v-model="state.country"
         disabled
+        dense
         :error-messages="toMessages(v$.country)"
         :hint="t('account.address.country.hint', { email: supportEmail })"
         @blur="v$.country.$touch()"

components/account/home/AccountDetails.vue

@@ -36,6 +36,7 @@ const { t } = useI18n();
           id="email"
           v-model="username"
           disabled
+          dense
           class="[&_input]:!text-rui-text"
           variant="outlined"
           :label="t('auth.common.username')"
@@ -48,6 +49,7 @@ const { t } = useI18n();
             id="email"
             v-model="email"
             disabled
+            dense
             class="[&_input]:!text-rui-text"
             variant="outlined"
             :label="t('auth.common.email')"

components/account/home/AccountInformation.vue

@@ -5,6 +5,10 @@ import { get, objectOmit, set } from '@vueuse/core';
 import { storeToRefs } from 'pinia';
 import { useMainStore } from '~/store';
 import { toMessages } from '~/utils/validation';
+import { VatIdStatus } from '~/types/account';
+import { formatSeconds } from '~/utils/text';
+
+const { t } = useI18n();
 
 const store = useMainStore();
 const state = reactive({
@@ -16,13 +20,18 @@ const state = reactive({
 
 const loading = ref(false);
 const done = ref(false);
+const vatSuccessMessage = ref('');
 
 const { account } = storeToRefs(store);
 
 const movedOffline = computed(
   () => get(account)?.address.movedOffline ?? false,
 );
 
+const isVatIdValid = computed(
+  () => get(account)?.vatIdStatus === VatIdStatus.VALID || false,
+);
+
 onBeforeMount(() => {
   reset();
 });
@@ -55,13 +64,14 @@ function reset() {
 
   const unavailable = get(movedOffline);
 
+  state.vatId = userAccount.address.vatId;
+
   if (unavailable)
     return;
 
   state.firstName = userAccount.address.firstName;
   state.lastName = userAccount.address.lastName;
   state.companyName = userAccount.address.companyName;
-  state.vatId = userAccount.address.vatId;
 
   get(v$).$reset();
 }
@@ -93,10 +103,109 @@ async function update() {
   set(loading, false);
 }
 
-const { t } = useI18n();
+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);
+    pauseTimer();
+    if (result > 0) {
+      resume();
+    }
+  }
+  else if (result) {
+    set(vatSuccessMessage, t('auth.signup.vat.verified'));
+    setTimeout(() => {
+      set(vatSuccessMessage, '');
+    }, 3000);
+  }
+  set(loadingCheck, false);
+}
+
+const [DefineVAT, ReuseVAT] = createReusableTemplate();
+
+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 });
+  }
+
+  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 '';
+});
 </script>
 
 <template>
+  <DefineVAT>
+    <div class="flex gap-4 items-start">
+      <RuiTextField
+        id="vat-id"
+        v-model="state.vatId"
+        variant="outlined"
+        color="primary"
+        dense
+        class="flex-1"
+        :label="t('auth.signup.customer_information.form.vat_id')"
+        :hint="vatHint"
+        :error-messages="[...toMessages(v$.vatId), vatErrorMessage]"
+        :success-messages="vatSuccessMessage"
+        @blur="v$.vatId.$touch()"
+      >
+        <template #append>
+          <RuiIcon
+            v-if="!hideVATVerifyButton"
+            size="16"
+            :name="isVatIdValid ? 'lu-circle-check' : 'lu-circle-x'"
+            :color="isVatIdValid ? 'success' : 'error'"
+          />
+        </template>
+      </RuiTextField>
+      <RuiButton
+        v-if="!hideVATVerifyButton"
+        color="primary"
+        class="h-10"
+        :disabled="waitTime > 0"
+        :loading="loadingCheck"
+        @click="handleCheckVATClick()"
+      >
+        {{ t('auth.signup.vat.verify') }}
+      </RuiButton>
+    </div>
+  </DefineVAT>
   <div
     v-if="!movedOffline"
     class="pt-2"
@@ -107,6 +216,7 @@ const { t } = useI18n();
         v-model="state.firstName"
         variant="outlined"
         color="primary"
+        dense
         autocomplete="given-name"
         :label="t('auth.signup.customer_information.form.first_name')"
         :hint="t('auth.signup.customer_information.form.name_hint')"
@@ -119,6 +229,7 @@ const { t } = useI18n();
         v-model="state.lastName"
         variant="outlined"
         color="primary"
+        dense
         autocomplete="family-name"
         :label="t('auth.signup.customer_information.form.last_name')"
         :hint="t('auth.signup.customer_information.form.name_hint')"
@@ -131,23 +242,15 @@ const { t } = useI18n();
         v-model="state.companyName"
         variant="outlined"
         color="primary"
+        dense
         autocomplete="organization"
         :label="t('auth.signup.customer_information.form.company')"
         :hint="t('auth.signup.customer_information.form.company_hint')"
         :error-messages="toMessages(v$.companyName)"
         @blur="v$.companyName.$touch()"
       />
 
-      <RuiTextField
-        id="vat-id"
-        v-model="state.vatId"
-        variant="outlined"
-        color="primary"
-        :label="t('auth.signup.customer_information.form.vat_id')"
-        :hint="t('auth.signup.customer_information.form.vat_id_hint')"
-        :error-messages="toMessages(v$.vatId)"
-        @blur="v$.vatId.$touch()"
-      />
+      <ReuseVAT />
     </div>
 
     <div class="mt-10 mb-5 border-t border-grey-50" />
@@ -194,6 +297,13 @@ const { t } = useI18n();
     </i18n-t>
   </RuiAlert>
 
+  <div
+    v-if="movedOffline"
+    class="mt-4"
+  >
+    <ReuseVAT />
+  </div>
+
   <FloatingNotification
     type="success"
     closeable

components/account/home/ApiKeys.vue

@@ -51,6 +51,7 @@ const { t } = useI18n();
         variant="outlined"
         :label="t('account.api_keys.api_key')"
         readonly
+        dense
         hide-details
         color="primary"
       >
@@ -67,6 +68,7 @@ const { t } = useI18n();
         variant="outlined"
         :label="t('account.api_keys.api_secret')"
         readonly
+        dense
         hide-details
         color="primary"
       >

components/account/home/ChangePassword.vue

@@ -77,6 +77,7 @@ const { t } = useI18n();
           v-model="state.currentPassword"
           variant="outlined"
           color="primary"
+          dense
           :error-messages="toMessages(v$.currentPassword)"
           :hint="t('account.change_password.current_password.hint')"
           :label="t('account.change_password.current_password.label')"
@@ -89,6 +90,7 @@ const { t } = useI18n();
             v-model="state.newPassword"
             color="primary"
             variant="outlined"
+            dense
             hide-details
             :label="t('account.change_password.new_password.label')"
             autocomplete="new-password"
@@ -124,6 +126,7 @@ const { t } = useI18n();
           color="primary"
           :error-messages="toMessages(v$.passwordConfirmation)"
           variant="outlined"
+          dense
           :label="t('auth.signup.account.form.confirm_password')"
           :hint="t('auth.common.confirm_hint')"
           autocomplete="new-password"

i18n/locales/en.json

@@ -276,6 +276,13 @@
           "description": "Will only be used for payment invoices",
           "title": "Address"
         }
+      },
+      "vat": {
+        "invalid": "VAT ID is invalid. Please enter your correct VAT ID.",
+        "not_verified": "VAT ID not verified. Please verify your VAT ID before updating your customer information",
+        "timer": "VAT ID verification cooldown in progress. Please try again in {time}",
+        "verified": "Your VAT ID is successfully verified!",
+        "verify": "Verify"
       }
     }
   },

modules/ui-library/runtime/plugin.ts

@@ -1,4 +1,6 @@
 import {
+  LuCircleCheck,
+  LuCircleX,
   RiAccountCircleLine,
   RiAppleLine,
   RiArrowDownSLine,
@@ -102,6 +104,8 @@ export default defineNuxtPlugin((nuxtApp) => {
         RiLink,
         RiLockLine,
         RiLinksLine,
+        LuCircleX,
+        LuCircleCheck,
       ],
       mode: 'light',
     },