feat(web): Registration key linked to account status

web/components/Registration/Item.vue

@@ -35,7 +35,13 @@ const evenBgColor = computed(() => {
       class="leading-normal sm:col-span-3"
       :class="!label && 'sm:col-start-2'"
     >
-      <span v-if="text" class="select-all" :class="!error ? 'opacity-75' : ''">
+      <span
+        v-if="text"
+        class="select-all"
+        :class="{
+          'opacity-75': !error,
+        }"
+      >
         {{ text }}
       </span>
       <template v-if="$slots['right']">

web/components/Registration/KeyLinkedStatus.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import {
+  ArrowTopRightOnSquareIcon,
+  ArrowPathIcon,
+  LinkIcon,
+} from '@heroicons/vue/24/solid';
+import { storeToRefs } from 'pinia';
+
+import { useAccountStore } from '~/store/account';
+import { useReplaceRenewStore } from '~/store/replaceRenew';
+
+const accountStore = useAccountStore();
+const replaceRenewStore = useReplaceRenewStore();
+const { keyLinkedStatus, keyLinkedOutput } = storeToRefs(replaceRenewStore);
+
+defineProps<{
+  t: any;
+}>();
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-between gap-8px">
+    <BrandButton
+      v-if="keyLinkedStatus !== 'linked' && keyLinkedStatus !== 'checking'"
+      btn-style="none"
+      :no-padding="true"
+      :title="t('Refresh')"
+      class="group"
+      @click="replaceRenewStore.check(true)"
+    >
+      <UiBadge
+        v-if="keyLinkedOutput"
+        :color="keyLinkedOutput.color"
+        :icon="keyLinkedOutput.icon"
+        :icon-right="ArrowPathIcon"
+        size="16px"
+      >
+        {{ t(keyLinkedOutput.text) }}
+      </UiBadge>
+    </BrandButton>
+    <UiBadge
+      v-else
+      :color="keyLinkedOutput.color"
+      :icon="keyLinkedOutput.icon"
+      size="16px"
+    >
+      {{ t(keyLinkedOutput.text) }}
+    </UiBadge>
+
+    <span class="inline-flex flex-wrap-items-start gap-8px">
+      <BrandButton
+        v-if="keyLinkedStatus === 'notLinked'"
+        btn-style="underline"
+        :external="true"
+        :icon="LinkIcon"
+        :icon-right="ArrowTopRightOnSquareIcon"
+        :text="t('Link Key')"
+        :title="t('Learn more and link your key to your account')"
+        class="text-14px"
+        @click="accountStore.linkKey"
+      />
+      <BrandButton
+        v-else
+        btn-style="underline"
+        :external="true"
+        :icon-right="ArrowTopRightOnSquareIcon"
+        :text="t('Learn More')"
+        class="text-14px"
+        @click="accountStore.manage"
+      />
+    </span>
+  </div>
+</template>

web/components/Registration/ReplaceCheck.vue

@@ -17,7 +17,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="flex flex-wrap items-start justify-between gap-8px">
+  <div class="flex flex-wrap items-center justify-between gap-8px">
     <BrandButton
       v-if="!replaceStatusOutput"
       :icon="KeyIcon"