sfp_front_nuxt_viver_cafe_landing/app/pages/checkin.vue

<template>
  <div class="flex flex-col justify-center items-center mt-10 text-center">
    <div class="bg-primary rounded-full w-26 h-26 md:w-31 md:h-31 flex justify-center items-center">
      <NuxtImg src="/img/coffee.svg" class="w-13 md:w-16" />
    </div>

    <template v-if="!checkinSuccess">
      <h1 class="text-xl md:text-2xl mt-3">Registre sua participação</h1>
      <p class="text-xs md:text-sm text-[#505050] mt-4 px-4">Digite o Código do Evento/live que recebeu para registrar sua presença</p>
      <form class="flex flex-col justify-center items-center mt-5 gap-2 w-full max-w-[361px]" @submit.prevent="handleCheckin">
        <div class="flex flex-col justify-center items-center w-full">
          <label for="name" class="text-text-2 mb-1 font-medium text-xs md:text-sm">Nome Cadastrado na plataforma <span class="text-error">*</span></label>
          <input
            v-model="name"
            type="text"
            placeholder="João da Silva"
            :disabled="isLoading"
            required
            class="border-[1px] border-border rounded-lg text-center h-10 w-full text-sm"
          >
        </div>
        <div class="flex flex-col justify-center items-center w-full">
          <label for="email" class="text-text-2 mb-1 font-medium text-xs md:text-sm">Email <span class="text-error">*</span></label>
          <input
            v-model="email"
            type="email"
            placeholder="email@email.com"
            :disabled="isLoading"
            required
            class="border-[1px] border-border rounded-lg text-center h-10 w-full text-sm"
          >
        </div>
        <div class="flex flex-col justify-center items-center w-full">
          <label for="eventCode" class="text-text-2 mb-1 font-medium text-xs md:text-sm">Código do Evento/live <span class="text-error">*</span></label>
          <input
            v-model="eventCode"
            type="text"
            placeholder="Ex. Cafe123"
            :disabled="isLoading"
            required
            class="border-[1px] border-border rounded-lg text-center h-10 w-full text-xs md:text-sm"
          >
        </div>
        <button
          type="submit"
          :disabled="isLoading"
          class="bg-primary text-white rounded-lg uppercase text-xs md:text-sm w-full h-[50px] mt-5 cursor-pointer hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {{ isLoading ? 'Registrando...' : 'Registrar Presença' }}
        </button>
      </form>

      <p v-if="statusMessage" class="text-red-500 mt-4">{{ statusMessage }}</p>
    </template>

    <div v-else class="mt-24 px-4">
      <h1 class="text-2xl max-w-[457px] text-text-2">Sua presença foi registrada em nosso evento, obrigada por participar!</h1>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

useHead({
  title: `Check-in - Viver Café`
})
definePageMeta({
  layout: 'checkin',
});

const name = ref('');
const email = ref('');
const eventCode = ref('');
const statusMessage = ref('');
const isLoading = ref(false);
const checkinSuccess = ref(false);

async function handleCheckin() {
  if (!name.value || !email.value || !eventCode.value) {
    statusMessage.value = 'Por favor, preencha todos os campos.';
    return;
  }

  isLoading.value = true;
  statusMessage.value = '';

  try {
    await new Promise(resolve => setTimeout(resolve, 1000));

    if (eventCode.value.toLowerCase() === 'fail') {
      throw new Error('Simulação de erro na API.');
    }

    checkinSuccess.value = true;

    name.value = '';
    email.value = '';
    eventCode.value = '';

  } catch (err) {
    statusMessage.value = 'Erro ao realizar o check-in. Verifique os dados e tente novamente.';
    console.error(err);
  } finally {
    isLoading.value = false;
  }
}
</script>