fix: update design

rotki · Dec 11, 2024 · 24dd28d · 24dd28d
1 parent e0dcd45
commit 24dd28d
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 45 deletions.
diff --git a/components/account/home/AccountAddress.vue b/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()"

diff --git a/components/account/home/AccountDetails.vue b/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')"

diff --git a/components/account/home/AccountInformation.vue b/components/account/home/AccountInformation.vue
@@ -5,6 +5,8 @@ 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();
 
@@ -18,6 +20,7 @@ const state = reactive({
 
 const loading = ref(false);
 const done = ref(false);
+const vatSuccessMessage = ref('');
 
 const { account } = storeToRefs(store);
 
@@ -26,7 +29,7 @@ const movedOffline = computed(
 );
 
 const isVatIdValid = computed(
-  () => get(account)?.vatIdStatus === 'Valid' || false,
+  () => get(account)?.vatIdStatus === VatIdStatus.VALID || false,
 );
 
 onBeforeMount(() => {
@@ -125,10 +128,45 @@ async function handleCheckVATClick() {
       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>
@@ -139,53 +177,33 @@ const [DefineVAT, ReuseVAT] = createReusableTemplate();
         v-model="state.vatId"
         variant="outlined"
         color="primary"
+        dense
         class="flex-1"
         :label="t('auth.signup.customer_information.form.vat_id')"
-        :hint="t('auth.signup.customer_information.form.vat_id_hint')"
-        :error-messages="toMessages(v$.vatId)"
+        :hint="vatHint"
+        :error-messages="[...toMessages(v$.vatId), vatErrorMessage]"
+        :success-messages="vatSuccessMessage"
         @blur="v$.vatId.$touch()"
-      />
-      <RuiTooltip persist-on-tooltip-hover>
-        <template #activator>
+      >
+        <template #append>
           <RuiIcon
-            class="mt-4"
+            v-if="!hideVATVerifyButton"
+            size="16"
             :name="isVatIdValid ? 'lu-circle-check' : 'lu-circle-x'"
             :color="isVatIdValid ? 'success' : 'error'"
           />
         </template>
-        <div v-if="!isVatIdValid">
-          <div
-            v-if="waitTime > 0"
-            class="flex flex-col gap-1.5 items-center py-1.5"
-          >
-            {{ t('auth.signup.vat.cooldown') }}
-            <div class="text-grey-500">
-              {{ t('auth.signup.vat.timer', { waitTime }) }}
-            </div>
-          </div>
-          <div
-            v-else
-            class="flex flex-col gap-1.5 items-center py-1.5"
-          >
-            {{ t('auth.signup.vat.unverified') }}
-            <RuiButton
-              color="primary"
-              size="sm"
-              :disabled="waitTime > 0"
-              :loading="loadingCheck"
-              @click="handleCheckVATClick()"
-            >
-              {{ t('auth.signup.vat.verify_now') }}
-            </RuiButton>
-          </div>
-        </div>
-        <div
-          v-else
-          class="flex flex-col gap-1.5 items-center py-1.5"
-        >
-          {{ t('auth.signup.vat.verified') }}
-        </div>
-      </RuiTooltip>
+      </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
@@ -198,6 +216,7 @@ const [DefineVAT, ReuseVAT] = createReusableTemplate();
         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')"
@@ -210,6 +229,7 @@ const [DefineVAT, ReuseVAT] = createReusableTemplate();
         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')"
@@ -222,6 +242,7 @@ const [DefineVAT, ReuseVAT] = createReusableTemplate();
         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')"

diff --git a/components/account/home/ApiKeys.vue b/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"
       >

diff --git a/components/account/home/ChangePassword.vue b/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"

diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -278,11 +278,11 @@
         }
       },
       "vat": {
-        "cooldown": "VAT ID Verification Cooldown",
-        "timer": "Please wait {waitTime} seconds before trying again",
-        "unverified": "VAT ID Haven't Verified",
-        "verify_now": "Verify Now",
-        "verified": "VAT ID Verified"
+        "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"
       }
     }
   },

diff --git a/types/account.ts b/types/account.ts
@@ -19,3 +19,10 @@ export interface ProfilePayload {
 export interface DeleteAccountPayload {
   username: string;
 }
+
+export enum VatIdStatus {
+  NOT_CHECKED = 'Not checked',
+  VALID = 'Valid',
+  NOT_VALID = 'Not valid',
+  NON_EU_ID = 'ID outside the EU',
+}