Add functionality to use check-in app for QR code scanning with eventyay

.env

@@ -1,2 +1,3 @@
-VITE_TEST_API_URL=https://test-api.eventyay.com/v1
-VITE_PROD_API_URL=https://api.eventyay.com/v1
+VITE_TEST_API_URL=https://app.eventyay.com/v1
+VITE_PROD_API_URL=https://app.eventyay.com/v1
+VITE_LOCAL_PORT=8000

src/components/Common/QRCamera.vue

@@ -4,6 +4,10 @@ import QRCamera from '@/components/Utilities/QRCamera.vue'
 import { useCameraStore } from '@/stores/camera'
 import { useProcessRegistrationStore } from '@/stores/processRegistration'
 import { useProcessCheckInStore } from '@/stores/processCheckIn'
+import { useProcessDeviceStore } from '@/stores/processDevice'
+import { useProcessEventyayCheckInStore } from '@/stores/processEventyayCheckIn'
+import { useLeadScanStore } from '@/stores/leadscan'
+import { storeToRefs } from 'pinia'
 
 const props = defineProps({
   qrType: {
@@ -23,6 +27,10 @@ const props = defineProps({
 const cameraStore = useCameraStore()
 const processRegistrationStore = useProcessRegistrationStore()
 const processCheckInStore = useProcessCheckInStore()
+const processDeviceStore = useProcessDeviceStore()
+const processEventyayCheckIn = useProcessEventyayCheckInStore()
+const processLeadScan = useLeadScanStore()
+const { message, showSuccess, showError } = storeToRefs(processEventyayCheckIn)
 
 const route = useRoute()
 const stationId = route.params.stationId
@@ -37,6 +45,15 @@ async function processQR() {
   if (props.qrType === 'checkIn') {
     await processCheckInStore.checkInAttendeeScannerToRoom(stationId, scannerType)
   }
+  if (props.qrType === 'device') {
+    await processDeviceStore.authDevice()
+  }
+  if (props.qrType === 'eventyaycheckin') {
+    await processEventyayCheckIn.checkIn()
+  }
+  if (props.qrType === 'eventyaylead') {
+    await processLeadScan.scanLead()
+  }
   cameraStore.paused = false
 }
 </script>
@@ -48,5 +65,8 @@ async function processQR() {
     </h2>
     <h3 v-if="details" class="mb-3">{{ details }}</h3>
     <QRCamera @scanned="processQR"></QRCamera>
+    <p :class="{ 'text-green-500': showSuccess, 'text-red-500': showError }" class="mt-4">
+      {{ message }}
+    </p>
   </div>
 </template>

src/components/Eventyay/EventyayEventCheckIn.vue

@@ -0,0 +1,14 @@
+<script setup>
+import QRCamera from '@/components/Common/QRCamera.vue'
+import { useLoadingStore } from '@/stores/loading'
+const loadingStore = useLoadingStore()
+loadingStore.contentLoaded()
+</script>
+
+<template>
+  <div
+    class="-mt-16 grid h-screen w-full grid-cols-1 place-items-center items-center justify-center align-middle"
+  >
+    <QRCamera qr-type="eventyaycheckin" scan-type="Check-In" />
+  </div>
+</template>

src/components/Eventyay/EventyayEvents.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { useLoadingStore } from '@/stores/loading'
+import { useEventyayApi } from '@/stores/eventyayapi'
+import { useEventyayEventStore } from '@/stores/eventyayEvent'
+
+import { ref, onMounted, watchEffect } from 'vue'
+import StandardButton from '@/components/Common/StandardButton.vue'
+import { useRouter } from 'vue-router'
+
+const loadingStore = useLoadingStore()
+const router = useRouter()
+
+const selectedEvent = ref(null)
+const eventyayEventStore = useEventyayEventStore()
+const { events, error } = eventyayEventStore
+const processApi = useEventyayApi()
+const { apitoken, url, organizer, selectedRole } = processApi
+
+loadingStore.contentLoaded()
+eventyayEventStore.fetchEvents(url, apitoken, organizer)
+
+const submitForm = () => {
+  if (selectedEvent.value) {
+    const selectedEventData = events.find((event) => event.slug === selectedEvent.value)
+    if (selectedEventData) {
+      processApi.setEventSlug(selectedEventData.slug)
+      if (selectedRole === 'exhibitor') router.push({ name: 'eventyayleedlogin' })
+      if (selectedRole === 'checkin' || selectedRole === 'badge')
+        router.push({ name: 'eventyaycheckin' })
+    }
+  } else {
+    console.error('Please select an event.')
+  }
+}
+</script>
+<template>
+  <div class="-mt-16 flex h-screen flex-col justify-center">
+    <div v-if="error" class="text-danger">{{ error }}</div>
+    <form v-if="events.length" @submit.prevent="submitForm">
+      <div v-for="event in events" :key="event.slug" class="mb-2">
+        <label>
+          <input type="radio" :value="event.slug" v-model="selectedEvent" />
+          {{ event.name.en }}
+        </label>
+      </div>
+      <div>
+        <StandardButton
+          type="submit"
+          text="Select Event"
+          class="btn-primary mt-6 w-full justify-center"
+        />
+      </div>
+    </form>
+    <div v-if="!events.length && !error">
+      No events available
+      <StandardButton
+        text="Refresh"
+        class="btn-primary mt-6 w-1/2 justify-center"
+        @click="fetchEvents(url.value, apiToken.value, organiser.value)"
+      />
+    </div>
+  </div>
+</template>

src/components/Eventyay/EventyayLeedLogin.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useLoadingStore } from '@/stores/loading'
+import { useAuthStore } from '@/stores/auth'
+import { useUserStore } from '@/stores/user'
+import { useleedauth } from '@/stores/leedauth'
+import StandardButton from '@/components/Common/StandardButton.vue'
+
+const loadingStore = useLoadingStore()
+const authStore = useAuthStore()
+const userStore = useUserStore()
+const leedauth = useleedauth()
+const showError = ref(false)
+const userId = ref('')
+const password = ref('')
+const server = ref('')
+// router
+const router = useRouter()
+
+async function submitLogin() {
+  const payload = {
+    email: email.value,
+    key: password.value
+  }
+  const response = await leedauth.leedlogin(payload)
+  if (response.success) {
+    router.push({ name: 'leadscan' })
+  }
+}
+loadingStore.contentLoaded()
+</script>
+
+<template>
+  <div class="-mt-16 flex h-screen flex-col justify-center">
+    <div class="my-auto sm:mx-auto sm:w-full sm:max-w-sm">
+      <h2 class="text-center">Sign in with your Exhibitor credentials</h2>
+      <form class="mt-10 space-y-3" @submit.prevent="submitLogin">
+        <div>
+          <label for="email">Contact Email</label>
+          <div class="mt-2">
+            <input
+              id="email"
+              v-model="email"
+              name="email"
+              type="email"
+              required="true"
+              class="block w-full"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label for="password">Exhibitor Key</label>
+          <div class="mt-2">
+            <input
+              id="password"
+              v-model="password"
+              name="password"
+              type="password"
+              autocomplete="current-password"
+              required="true"
+              class="block w-full"
+            />
+          </div>
+        </div>
+
+        <div>
+          <StandardButton
+            type="submit"
+            text="Login"
+            class="btn-primary mt-6 w-full justify-center"
+          />
+        </div>
+
+        <div v-if="showError">
+          <p class="text-sm text-danger">Wrong credentials or account does not exist</p>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>

src/components/Eventyay/LeadScanning.vue

@@ -0,0 +1,14 @@
+<script setup>
+import QRCamera from '@/components/Common/QRCamera.vue'
+import { useLoadingStore } from '@/stores/loading'
+const loadingStore = useLoadingStore()
+loadingStore.contentLoaded()
+</script>
+
+<template>
+  <div
+    class="-mt-16 grid h-screen w-full grid-cols-1 place-items-center items-center justify-center align-middle"
+  >
+    <QRCamera qr-type="eventyaylead" scan-type="Lead-Scan" />
+  </div>
+</template>