NewsletterBox

<template>  <div class="relative">  <div class="p-4 text-center bg-neutral-100 sm:p-10">  <p class="font-bold typography-headline-4 sm:typography-headline-3">  Subscribe and get discount on your first purchase!  </p>  <p class="my-2 mb-4 typography-text-sm sm:typography-text-base">  Be aware of upcoming sales and events. Receive gifts and special offers!  </p>  <form  class="mb-4 flex flex-col sm:flex-row gap-4 max-w-[688px] mx-auto"  @submit.prevent="subscribeNewsletter(inputValue)"  >  <SfInput  v-model="inputValue"  size="lg"  type="email"  wrapper-class="grow rounded-full"  placeholder="Type your email"  />  <SfButton type="submit" size="lg"> Subscribe to Newsletter </SfButton>  </form>  <div class="typography-text-xs text-neutral-600">  To learn how we process your data, visit our <SfLink href="#" class="!text-neutral-600">Privacy Notice</SfLink>.  You can <SfLink href="#" class="!text-neutral-600">unsubscribe</SfLink> at any time without costs.  </div>  </div>  <div class="absolute top-0 right-0 mx-2 mt-2 sm:mr-6">  <div  v-if="showPositiveAlert"  role="alert"  class="flex items-start md:items-center shadow-md max-w-[600px] bg-positive-100 pr-2 pl-4 mb-2 ring-1 ring-positive-200 typography-text-sm md:typography-text-base py-1 rounded-md"  >  <SfIconCheckCircle class="my-2 mr-2 text-positive-700" />  <p class="py-2 mr-2">Your email has been added to the newsletter subscription.</p>  <button  type="button"  class="p-1.5 md:p-2 ml-auto rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900"  aria-label="Close positive alert"  @click="showPositiveAlert = false"  >  <SfIconClose class="hidden md:block" />  <SfIconClose size="sm" class="block md:hidden" />  </button>  </div>  <div  v-if="showErrorAlert"  role="alert"  class="flex items-start md:items-center max-w-[600px] shadow-md bg-negative-100 pr-2 pl-4 ring-1 ring-negative-300 typography-text-sm md:typography-text-base py-1 rounded-md"  >  <p class="py-2 mr-2">This email is already subscribed for our newsletter.</p>  <button  type="button"  class="p-1.5 md:p-2 ml-auto rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900"  aria-label="Close error alert"  @click="showErrorAlert = false"  >  <SfIconClose class="hidden md:block" />  <SfIconClose size="sm" class="block md:hidden" />  </button>  </div>  </div>  </div> </template>  <script lang="ts" setup> import { ref, type Ref } from 'vue'; import { SfButton, SfInput, SfLink, SfIconCheckCircle, SfIconClose } from '@storefront-ui/vue';  const inputValue = ref(''); const showPositiveAlert = ref(false); const showErrorAlert = ref(false); const emailDataBase: Ref<string[]> = ref([]);  const checkEmailDataBase = (email: string) => emailDataBase.value.find((element) => element === email);  const subscribeNewsletter = (email: string) => {  if (!email) return;  if (checkEmailDataBase(email)) {  showErrorAlert.value = true;  setTimeout(() => (showErrorAlert.value = false), 5000);  } else {  showPositiveAlert.value = true;  emailDataBase.value.push(email);  setTimeout(() => (showPositiveAlert.value = false), 5000);  }  console.log(email);  inputValue.value = ''; }; </script>