Set cookie to hide an alert for N days

ee/app/assets/javascripts/admin/components/qrtly_reconciliation_alert.vue

 <script>
+import Cookie from 'js-cookie';
 import { GlAlert, GlSprintf } from '@gitlab/ui';
 import Cookie from 'js-cookie';
 import { formatDate, getDayDifference } from '~/lib/utils/datetime_utility';
@@ -26,17 +27,20 @@ export default {
   },
   props: {
     date: {
-      type: Date,
+      type: Number,
       required: true,
     },
-    cookieId: {
+    cookieKey: {
       type: String,
       required: true,
     },
   },
   computed: {
     alertTitle() {
-      return sprintf(this.$options.i18n.title, { qrtlyDate: this.date });
+      return sprintf(this.$options.i18n.title, { qrtlyDate: this.formattedDate });
+    },
+    formattedDate() {
+      return formatDate(this.date, 'isoDate');
     },
   },
   methods: {
@@ -53,7 +57,6 @@ export default {
 
 <template>
   <gl-alert
-    ref="alert"
     data-testid="qrtly-reconciliation-alert"
     variant="info"
     :title="alertTitle"
@@ -64,7 +67,7 @@ export default {
   >
     <gl-sprintf :message="$options.i18n.description">
       <template #qrtlyDate>
-        <span>{{ date }}</span>
+        <span>{{ formattedDate }}</span>
       </template>
     </gl-sprintf>
   </gl-alert>

ee/app/assets/javascripts/admin/init_qrtly_reconciliation_alert.js

-import Cookie from 'js-cookie';
 import Vue from 'vue';
 import QrtlyReconciliationAlert from './components/qrtly_reconciliation_alert.vue';
 
-function shouldShowAlert(userId = null, namespaceId = null) {
-  const cookieName = [userId, namespaceId].filter(Boolean);
-  const cookieValue = Cookie.get('qrtly_reconciliation_alert_#{}');
-
-  return Cookie.get('qrtly_reconciliation_alert_#{}');
-}
-
 export const initQrtlyReconciliationAlert = (selector = '#js-qrtly-reconciliation-alert') => {
   const el = document.querySelector(selector);
 
@@ -21,7 +13,8 @@ export const initQrtlyReconciliationAlert = (selector = '#js-qrtly-reconciliatio
     render(createElement) {
       return createElement(QrtlyReconciliationAlert, {
         props: {
-          date: new Date(el.dataset.date),
+          date: Date.parse(el.dataset.reconciliationDate),
+          cookieKey: el.dataset.cookieKey,
         },
       });
     },