chore(migration): added hiding migration info bar after clicking accept button

src/App.vue

@@ -25,7 +25,7 @@ registerSW({
 
 onMounted(() => {
   loadStockDataFromStorage();
-  showMigrationInfo();
+  handleMigrationInfo();
   store.setupAPIData();
 });
 
@@ -37,9 +37,9 @@ watchEffect(() => {
   }
 });
 
-function showMigrationInfo() {
+function handleMigrationInfo() {
   // Show only on old domain
-  if (location.hostname !== 'pojazdownik-td2.web.app' && location.hostname !== 'localhost') return;
+  if (location.hostname !== 'pojazdownik-td2.web.app') return;
 
   const showInfo = localStorage.getItem('showMigrationInfo');
 

src/components/app/MigrationInfo.vue

@@ -1,12 +1,26 @@
 <template>
   <div class="migrate-info">
-    <i18n-t keypath="migrate-info.line-1" for="migrate-info">
+    <div class="info-content">
-      <a href="https://pojazdownik-td2.spythere.eu/" target="_blank">{{ $t('migrate-info.link') }}</a>
+      <i18n-t keypath="migrate-info.line-1" for="migrate-info" tag="div">
-    </i18n-t>
+        <a href="https://pojazdownik-td2.spythere.eu/" target="_blank">{{ t('migrate-info.link') }}</a>
+      </i18n-t>
+      <button class="btn accept-btn" @click="onAcceptButtonClick">{{ t('migrate-info.accept-btn') }}</button>
+    </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useStore } from '../../store';
+
+const store = useStore();
+const { t } = useI18n();
+
+function onAcceptButtonClick() {
+  store.isMigrationInfoOpen = false;
+  localStorage.setItem('showMigrationInfo', 'false');
+}
+</script>
 
 <style lang="scss" scoped>
 .migrate-info {
@@ -26,6 +40,14 @@
   font-size: 1.1em;
 }
 
+.info-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
 a {
   color: black;
   text-decoration: underline;

src/locales/en.json

@@ -342,6 +342,7 @@
   },
   "migrate-info": {
     "line-1": "Pojazdownik is being moved to a new domain - {0}! You can still use the current website, but it will no longer be updated and will be shut down in the nearest future!",
-    "link": "https://pojazdownik-td2.spythere.eu/"
+    "link": "https://pojazdownik-td2.spythere.eu/",
+    "accept-btn": "ROGER THAT!"
   }
 }

src/locales/pl.json

@@ -341,6 +341,7 @@
   },
   "migrate-info": {
     "line-1": "Pojazdownik zostaje przeniesiony na nową domenę - {0}! Możesz korzystać z obecnej strony, jednak nie będzie ona otrzymywać już aktualizacji i w przyszłości zostanie wyłączona!",
-    "link": "https://pojazdownik-td2.spythere.eu/"
+    "link": "https://pojazdownik-td2.spythere.eu/",
+    "accept-btn": "PRZYJĄŁEM!"
   }
 }