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_PROD_API_URL=https://api.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/EventyayEventSelection.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { useLoadingStore } from '@/stores/loading'
+import StandardButton from '@/components/Common/StandardButton.vue'
+import { useRouter } from 'vue-router'
+
+const loadingStore = useLoadingStore()
+loadingStore.contentLoaded()
+
+const router = useRouter()
+function checkIn() {
+  router.push({ name: 'eventyaycheckin' })
+}
+function leadscan() {
+  router.push({ name: 'eventyayleedlogin' })
+}
+</script>
+
+<template>
+  <div
+    class="-mt-16 grid h-screen w-full grid-cols-1 place-items-center items-center justify-center align-middle"
+  >
+    <div class="flex h-1/4 w-1/2 flex-col items-center justify-around">
+      <StandardButton
+        :text="'Lead Scanning'"
+        class="btn-primary h-14 w-full justify-center"
+        @click="leadscan()"
+      />
+      <p class="text-xl">OR</p>
+      <StandardButton
+        :text="'Check-In'"
+        class="btn-primary h-14 w-full justify-center"
+        @click="checkIn()"
+      />
+    </div>
+  </div>
+</template>

src/components/Eventyay/EventyayEvents.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { useLoadingStore } from '@/stores/loading'
+import { ref, onMounted, watchEffect } from 'vue'
+import { useEventyayEventStore } from '@/stores/eventyayEvent'
+import StandardButton from '@/components/Common/StandardButton.vue'
+import { useRouter } from 'vue-router'
+const loadingStore = useLoadingStore()
+
+const apiToken = ref('')
+const organiser = ref('')
+const url = ref('')
+const eventyayEventStore = useEventyayEventStore()
+const selectedEvent = ref(null)
+const router = useRouter()
+const { events, error, fetchEvents } = eventyayEventStore
+
+apiToken.value = localStorage.getItem('api_token')
+organiser.value = localStorage.getItem('organizer')
+url.value = localStorage.getItem('url')
+
+if (apiToken.value && organiser.value && url.value) {
+  fetchEvents(url.value, apiToken.value, organiser.value)
+  loadingStore.contentLoaded()
+}
+
+const submitForm = () => {
+  if (localStorage.getItem('selectedEventSlug') || localStorage.getItem('selectedEventName')) {
+    localStorage.removeItem('selectedEventSlug')
+    localStorage.removeItem('selectedEventName')
+  }
+
+  if (selectedEvent.value) {
+    const selectedEventData = events.find((event) => event.slug === selectedEvent.value)
+    if (selectedEventData) {
+      localStorage.setItem('selectedEventSlug', selectedEventData.slug)
+      localStorage.setItem('selectedEventName', selectedEventData.name.en)
+      router.push({ name: 'eventyayselect' })
+    }
+  } else {
+    console.error('Please select an event.')
+  }
+}
+</script>
+<template>
+  <div class="-mt-16 flex h-screen flex-col justify-center">
+    <div v-if="loading">Loading events...</div>
+    <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 credentials</h2>
+      <form class="mt-10 space-y-3" @submit.prevent="submitLogin">
+        <div>
+          <label for="email">User ID</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">Password</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>

src/components/LoginForm.vue

@@ -13,12 +13,25 @@ const userStore = useUserStore()
 
 const email = ref('')
 const password = ref('')
+const server = ref('')
 const showError = ref(false)
-
+const showServerError = ref(false)
+const errmessage = ref('')
+const DEFAULT_SERVER_VALUE = 'Select a Server'
 // router
 const router = useRouter()
 
 async function submitLogin() {
+  if (server.value === '' || server.value === DEFAULT_SERVER_VALUE) {
+    showServerError.value = true
+    return
+  }
+  if (server.value === 'Eventyay') {
+    errmessage.value = 'Please Register a Device for Eventyay'
+    showServerError.value = true
+    return
+  }
+  showServerError.value = false
   loadingStore.contentLoading()
   showError.value = false
 
@@ -42,6 +55,23 @@ async function submitLogin() {
   loadingStore.contentLoaded()
 }
 
+function registerDevice() {
+  if (server.value === '' || server.value === 'Select a Server') {
+    errmessage.value = 'Please select a server first'
+    showServerError.value = true
+    return
+  }
+  if (server.value === 'Open-Event') {
+    errmessage.value = 'Please Login with credentials for Open-Event'
+    showServerError.value = true
+    return
+  }
+  showServerError.value = false
+  router.push({
+    name: 'device'
+  })
+}
+
 onMounted(() => {
   if (authStore.isAuthenticated) {
     router.push({
@@ -88,6 +118,15 @@ onMounted(() => {
           </div>
         </div>
 
+        <div>
+          <label for="select">Select a Server</label>
+          <select id="select" v-model="server" class="mt-2 block w-full">
+            <option>Open-Event</option>
+            <option>Eventyay</option>
+            <option>Testing</option>
+          </select>
+        </div>
+
         <div>
           <StandardButton
             :type="'submit'"
@@ -101,13 +140,24 @@ onMounted(() => {
         </div>
       </form>
 
-      <p class="mt-10 text-center text-sm">
+      <p class="mt-5 text-center text-sm">
         <span>Forgot password?</span>
         {{ ' ' }}
         <a href="https://eventyay.com/reset-password" class="font-medium leading-6 text-primary"
           >Click here to reset password</a
         >
       </p>
+      <StandardButton
+        :type="'button'"
+        text="Register-Device"
+        :disabled="false"
+        class="btn-primary mt-6 w-full justify-center"
+        @click="registerDevice"
+      >
+      </StandardButton>
+      <div v-if="showServerError" class="mt-5">
+        <p class="text-center text-sm text-danger">{{ errmessage }}</p>
+      </div>
     </div>
   </div>
 </template>