|
@@ -1,108 +0,0 @@
|
|
|
-<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>
|
|
|