refactor: fix issues reported by the i18n eslint plugin

rotki · Nov 25, 2024 · 8d8eafe · 8d8eafe
1 parent 2fd0cb1
commit 8d8eafe
Show file tree

Hide file tree

Showing 18 changed files with 683 additions and 677 deletions.
diff --git a/components/account/home/AccountDetails.vue b/components/account/home/AccountDetails.vue
@@ -28,7 +28,7 @@ const { t } = useI18n();
 <template>
   <div>
     <div class="text-h6 mb-6">
-      Details
+      {{ t('account_details.title') }}
     </div>
     <div>
       <div class="space-y-5">
@@ -56,7 +56,7 @@ const { t } = useI18n();
             append-icon="lock-line"
           />
           <div class="text-rui-text-secondary pt-2 px-3 text-xs flex">
-            To change your email, please contact our support tem via
+            {{ t('account_details.check_email') }}
             <ButtonLink
               :to="emailMailto"
               external

diff --git a/components/account/home/CancelSubscription.vue b/components/account/home/CancelSubscription.vue
@@ -51,10 +51,10 @@ const { t } = useI18n();
         >
           <template #benefits>
             <ul class="list-disc ml-5">
-              <li>{{ t('account.subscriptions.cancellation.benefits.1') }}</li>
+              <li>{{ t('account.subscriptions.cancellation.benefits.line_1') }}</li>
               <li>
                 <i18n-t
-                  keypath="account.subscriptions.cancellation.benefits.2"
+                  keypath="account.subscriptions.cancellation.benefits.line_2"
                   scope="global"
                 >
                   <template #bug_tracker>
@@ -70,7 +70,7 @@ const { t } = useI18n();
                   </template>
                 </i18n-t>
               </li>
-              <li>{{ t('account.subscriptions.cancellation.benefits.3') }}</li>
+              <li>{{ t('account.subscriptions.cancellation.benefits.line_3') }}</li>
             </ul>
           </template>
 

diff --git a/components/account/signup/SignupAddress.vue b/components/account/signup/SignupAddress.vue
@@ -99,7 +99,7 @@ const { t } = useI18n();
 <template>
   <div class="space-y-8 grow">
     <div class="text-h4 text-center">
-      Address
+      {{ t('signup_address.title') }}
     </div>
     <div class="space-y-5">
       <RuiTextField

diff --git a/components/checkout/pay/CardPayment.vue b/components/checkout/pay/CardPayment.vue
@@ -127,8 +127,8 @@ async function submit() {
     else {
       const status = (threeDSecureInfo as any)?.status as string | undefined;
       set(error, {
-        title: t('subscription.error.3d_auth_failed'),
-        message: t('subscription.error.3d_auth_failed_message', {
+        title: t('subscription.error.auth_failed_3d_secure'),
+        message: t('subscription.error.auth_failed_3d_secure_message', {
           status: status?.replaceAll('_', ' '),
         }),
       });

diff --git a/components/checkout/pay/CryptoPage.vue b/components/checkout/pay/CryptoPage.vue
@@ -10,7 +10,7 @@ import type { CryptoPayment, PaymentStep } from '~/types';
 const { t } = useI18n();
 
 const loading = ref(false);
-const data = ref<CryptoPayment | null>(null);
+const data = ref<CryptoPayment>();
 
 const { cryptoPayment, switchCryptoPlan, deletePendingPayment, subscriptions } = useMainStore();
 
@@ -36,16 +36,12 @@ const step = computed<PaymentStep>(() => {
   else if (state === 'pending') {
     return {
       type: 'pending',
-      title: t('subscription.error.payment_progress'),
-      message: t('subscription.error.payment_progress_message'),
+      title: t('subscription.progress.payment_progress'),
+      message: t('subscription.progress.payment_progress_message'),
     };
   }
   else if (state === 'success') {
-    return {
-      type: 'success',
-      title: t('subscription.error.transaction_pending'),
-      message: t('subscription.error.transaction_pending_message'),
-    };
+    return { type: 'success' };
   }
   return { type: 'idle' };
 });

diff --git a/components/checkout/pay/SavedCardDisplay.vue b/components/checkout/pay/SavedCardDisplay.vue
@@ -26,6 +26,16 @@ const emit = defineEmits<{
   (e: 'update:initializing', initializing: boolean): void;
 }>();
 
+const { client, card } = toRefs(props);
+
+const deleteLoading = ref(false);
+const showDeleteConfirmation = ref(false);
+const submitPayload = ref<{ nonce: string; bin: string }>({
+  nonce: '',
+  bin: '',
+});
+const payloadError = ref<string>('');
+
 function updateError(error: ErrorMessage) {
   emit('update:error', error);
 }
@@ -38,9 +48,6 @@ function updateInitializing(valid: boolean) {
   emit('update:initializing', valid);
 }
 
-const { client, card } = toRefs(props);
-const css = useCssModule();
-
 function setupVaults() {
   let _vaults: VaultManager | null = null;
 
@@ -66,41 +73,12 @@ function setupVaults() {
     teardown,
   };
 }
-
+const { deleteCard } = usePaymentCardsStore();
 const vaults = setupVaults();
-
+const css = useCssModule();
 const { t } = useI18n();
 
-const submitPayload = ref<{ nonce: string; bin: string }>({
-  nonce: '',
-  bin: '',
-});
-const payloadError = ref<string>('');
-
-onMounted(async () => {
-  try {
-    updateInitializing(true);
-    await vaults.create(get(client));
-    await checkPaymentMethods();
-  }
-  catch (error_: any) {
-    updateError({
-      title: t('subscription.error.init_error'),
-      message: error_.message,
-    });
-  }
-  finally {
-    updateInitializing(false);
-  }
-});
-
-watchImmediate(payloadError, (payloadError) => {
-  updateFormValid(!payloadError);
-});
-
-onUnmounted(() => {
-  vaults.teardown();
-});
+const last4Digits = computed<string>(() => `**** **** **** ${props.card.last4}`);
 
 async function checkPaymentMethods() {
   const methods = await vaults.get().fetchPaymentMethods();
@@ -137,12 +115,6 @@ function submit() {
   return get(submitPayload);
 }
 
-const { deleteCard } = usePaymentCardsStore();
-
-const deleteLoading = ref(false);
-
-const showDeleteConfirmation = ref(false);
-
 function deleteCardClick() {
   set(showDeleteConfirmation, true);
 }
@@ -154,6 +126,31 @@ async function handleDeleteCard() {
   set(deleteLoading, false);
 }
 
+watchImmediate(payloadError, (payloadError) => {
+  updateFormValid(!payloadError);
+});
+
+onMounted(async () => {
+  try {
+    updateInitializing(true);
+    await vaults.create(get(client));
+    await checkPaymentMethods();
+  }
+  catch (error_: any) {
+    updateError({
+      title: t('subscription.error.init_error'),
+      message: error_.message,
+    });
+  }
+  finally {
+    updateInitializing(false);
+  }
+});
+
+onUnmounted(() => {
+  vaults.teardown();
+});
+
 defineExpose({ submit });
 </script>
 
@@ -168,14 +165,10 @@ defineExpose({ submit });
     </div>
     <div class="grow">
       <div>
-        **** **** **** {{ card.last4 }}
+        {{ last4Digits }}
       </div>
       <div class="text-rui-text-secondary">
-        {{
-          t('home.plans.tiers.step_3.saved_card.expiry', {
-            expiresAt: card.expiresAt,
-          })
-        }}
+        {{ t('home.plans.tiers.step_3.saved_card.expiry', { expiresAt: card.expiresAt }) }}
       </div>
     </div>
     <RuiButton

diff --git a/components/common/CopyButton.vue b/components/common/CopyButton.vue
@@ -5,8 +5,10 @@ const props = defineProps<{ modelValue: string; disabled?: boolean }>();
 
 const { modelValue } = toRefs(props);
 const copied = ref(false);
+
 const { start, stop } = useTimeoutFn(() => set(copied, false), 4000);
 const { copy } = useClipboard({ source: modelValue });
+const { t } = useI18n();
 
 function copyToClipboard() {
   stop();
@@ -35,6 +37,6 @@ function copyToClipboard() {
         />
       </RuiButton>
     </template>
-    {{ copied ? 'Copied to clipboard' : 'Copy to clipboard' }}
+    {{ copied ? t('copy_button.copied') : t('copy_button.copy') }}
   </RuiTooltip>
 </template>
diff --git a/components/common/Recaptcha.client.vue b/components/common/Recaptcha.client.vue
@@ -33,6 +33,7 @@ const rendered = ref(false);
 
 // this will be populated once the deferred captcha script is loaded
 const grecaptcha = toRef(window, 'grecaptcha');
+const { t } = useI18n();
 
 /**
  * Renders the captcha if not rendered and required fields are available
@@ -89,7 +90,7 @@ onMounted(() => {
       v-if="invalid"
       :class="css.error"
     >
-      Invalid or expired captcha, please try again
+      {{ t('recaptcha.expired_captcha') }}
     </p>
   </div>
 </template>

diff --git a/components/error/NotFoundError.vue b/components/error/NotFoundError.vue
@@ -19,12 +19,12 @@ const otherHeight = inject('otherHeight', 0);
       </h6>
 
       <h3 :class="css.heading">
-        Page not found
+        {{ t('not_found.title') }}
       </h3>
 
       <p :class="css.description">
-        You may have mis-typed the URL or the page has been removed. <br />
-        Actually, there is nothing to see here...
+        {{ t('not_found.description.line_one') }} <br />
+        {{ t('not_found.description.line_two') }}
       </p>
 
       <RuiButton

diff --git a/components/footer/PageFooter.vue b/components/footer/PageFooter.vue
@@ -11,6 +11,7 @@ withDefaults(
 const { t } = useI18n();
 
 const year = new Date().getFullYear().toString();
+const copyright = computed<string>(() => `&copy; Rotki Solutions GmbH 2018-${year}.`);
 </script>
 
 <template>
@@ -50,8 +51,8 @@ const year = new Date().getFullYear().toString();
         <div
           class="flex flex-wrap space-x-1 text-rui-text-secondary mt-6 lg:mt-0"
         >
-          <div>&copy; Rotki Solutions GmbH 2018-{{ year }}.</div>
-          <div>All Rights Reserved.</div>
+          <div> {{ copyright }} </div>
+          <div> {{ t('page_footer.all_rights_reseved') }}</div>
         </div>
         <div>
           <FooterIconLinks />

diff --git a/components/values/ValueBody.vue b/components/values/ValueBody.vue
@@ -22,52 +22,43 @@ const { t } = useI18n();
         </div>
       </div>
       <div class="border-t border-rui-grey-300 self-center" />
-      <ValueBodyItem>
-        <template #number>
-          01
-        </template>
+      <ValueBodyItem number="01">
         <template #title>
-          {{ t('values.values_section.list.1.title') }}
+          {{ t('values.values_section.list.line_1.title') }}
         </template>
         <template #values>
-          {{ t('values.values_section.list.1.value') }}
+          {{ t('values.values_section.list.line_1.value') }}
         </template>
       </ValueBodyItem>
-      <ValueBodyItem>
-        <template #number>
-          02
-        </template>
+      <ValueBodyItem number="02">
         <template #title>
-          {{ t('values.values_section.list.2.title') }}
+          {{ t('values.values_section.list.line_2.title') }}
         </template>
         <template #values>
           <i18n-t
-            keypath="values.values_section.list.2.value"
+            keypath="values.values_section.list.line_2.value"
             scope="global"
           >
             <template #open_source>
               <strong>
-                {{ t('values.values_section.list.2.open_source') }}
+                {{ t('values.values_section.list.line_2.open_source') }}
               </strong>
             </template>
             <template #local_first>
               <strong>
-                {{ t('values.values_section.list.2.local_first') }}
+                {{ t('values.values_section.list.line_2.local_first') }}
               </strong>
             </template>
           </i18n-t>
         </template>
       </ValueBodyItem>
       <div class="hidden md:block border-t border-rui-grey-300 self-center" />
-      <ValueBodyItem>
-        <template #number>
-          03
-        </template>
+      <ValueBodyItem number="03">
         <template #title>
-          {{ t('values.values_section.list.3.title') }}
+          {{ t('values.values_section.list.line_3.title') }}
         </template>
         <template #values>
-          {{ t('values.values_section.list.3.value') }}
+          {{ t('values.values_section.list.line_3.value') }}
         </template>
       </ValueBodyItem>
     </div>

diff --git a/components/values/ValueBodyItem.vue b/components/values/ValueBodyItem.vue
@@ -1,9 +1,17 @@
+<script setup lang="ts">
+defineProps<{
+  number?: string | number;
+}>();
+</script>
+
 <template>
   <div class="flex gap-5 items-start">
     <div
       class="border-r-[3px] border-rui-primary pb-2.5 pr-5 text-h5 text-rui-primary"
     >
-      <slot name="number" />
+      <slot name="number">
+        {{ number }}
+      </slot>
     </div>
     <div class="space-y-4">
       <div class="text-h5">

diff --git a/components/values/ValueVision.vue b/components/values/ValueVision.vue
@@ -4,13 +4,10 @@ import type { RuiIcons } from '@rotki/ui-library';
 const { t } = useI18n();
 
 const values: { icon: RuiIcons; label: string }[] = [
-  { icon: 'bank-line', label: t('values.vision_section.list.1') },
-  {
-    icon: 'money-dollar-circle-line',
-    label: t('values.vision_section.list.2'),
-  },
-  { icon: 'calendar-todo-line', label: t('values.vision_section.list.3') },
-  { icon: 'hand-coin-line', label: t('values.vision_section.list.4') },
+  { icon: 'bank-line', label: t('values.vision_section.list.line_1') },
+  { icon: 'money-dollar-circle-line', label: t('values.vision_section.list.line_2') },
+  { icon: 'calendar-todo-line', label: t('values.vision_section.list.line_3') },
+  { icon: 'hand-coin-line', label: t('values.vision_section.list.line_4') },
 ];
 </script>