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

src/components/Common/QRCamera.vue

@@ -6,6 +6,8 @@ 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: {
@@ -27,6 +29,9 @@ 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
 const scannerType = route.params.scannerType
@@ -46,6 +51,9 @@ async function processQR() {
   if (props.qrType === 'eventyaycheckin') {
     await processEventyayCheckIn.checkIn()
   }
+  if (props.qrType === 'eventyaylead') {
+    await processLeadScan.scanLead()
+  }
   cameraStore.paused = false
 }
 </script>
@@ -57,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/EventyayEventSelection.vue

@@ -8,7 +8,7 @@ loadingStore.contentLoaded()
 
 const router = useRouter()
 function checkIn() {
-  router.push({ name: 'eventyayevents' })
+  router.push({ name: 'eventyaycheckin' })
 }
 function leadscan() {
   router.push({ name: 'eventyayleedlogin' })

src/components/Eventyay/EventyayEvents.vue

@@ -12,18 +12,16 @@ const url = ref('')
 const eventyayEventStore = useEventyayEventStore()
 const selectedEvent = ref(null)
 const router = useRouter()
-const { events, loading, error, fetchEvents } = eventyayEventStore
+const { events, error, fetchEvents } = eventyayEventStore
 
-watchEffect(() => {
-  apiToken.value = localStorage.getItem('api_token')
-  organiser.value = localStorage.getItem('organizer')
-  url.value = localStorage.getItem('url')
+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()
-  }
-})
+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')) {
@@ -36,7 +34,7 @@ const submitForm = () => {
     if (selectedEventData) {
       localStorage.setItem('selectedEventSlug', selectedEventData.slug)
       localStorage.setItem('selectedEventName', selectedEventData.name.en)
-      router.push({ name: 'eventyaycheckin' })
+      router.push({ name: 'eventyayselect' })
     }
   } else {
     console.error('Please select an event.')
@@ -62,7 +60,7 @@ const submitForm = () => {
         />
       </div>
     </form>
-    <div v-if="!loading && !events.length && !error">
+    <div v-if="!events.length && !error">
       No events available
       <StandardButton
         :text="'Refresh'"

src/components/Eventyay/EventyayLeedLogin.vue

@@ -23,9 +23,10 @@ async function submitLogin() {
     email: email.value,
     key: password.value
   }
-  console.log(payload)
   const response = await leedauth.leedlogin(payload)
-  console.log(response)
+  if (response.success) {
+    router.push({ name: 'leadscan' })
+  }
 }
 loadingStore.contentLoaded()
 </script>

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

@@ -56,7 +56,6 @@ async function submitLogin() {
 }
 
 function registerDevice() {
-  console.log(server.value)
   if (server.value === '' || server.value === 'Select a Server') {
     errmessage.value = 'Please select a server first'
     showServerError.value = true
@@ -150,7 +149,7 @@ onMounted(() => {
       </p>
       <StandardButton
         :type="'button'"
-        :text="'Register-Device'"
+        text="Register-Device"
         :disabled="false"
         class="btn-primary mt-6 w-full justify-center"
         @click="registerDevice"

src/router/index.js

@@ -5,6 +5,7 @@ import EventyayEventCheckIn from '@/components/Eventyay/EventyayEventCheckIn.vue
 import EventyayEvents from '@/components/Eventyay/EventyayEvents.vue'
 import EventyayEventSelection from '@/components/Eventyay/EventyayEventSelection.vue'
 import EventyayLeedLogin from '@/components/Eventyay/EventyayLeedLogin.vue'
+import LeadScanning from '@/components/Eventyay/LeadScanning.vue'
 import Device from '@/components/Registration/Device/Device.vue'
 import RegistrationKiosk from '@/components/Registration/Kiosk/KioskOverview.vue'
 import RegistrationStats from '@/components/Registration/Station/RegistrationStats.vue'
@@ -50,6 +51,11 @@ const router = createRouter({
       name: 'eventyayleedlogin',
       component: EventyayLeedLogin
     },
+    {
+      path: '/leadscan',
+      name: 'leadscan',
+      component: LeadScanning
+    },
     {
       path: '/panel',
       name: 'auth',

src/stores/eventyayEvent.js

@@ -4,27 +4,22 @@ import { ref } from 'vue'
 
 export const useEventyayEventStore = defineStore('eventyayEvent', () => {
   const events = ref([])
-  const loading = ref(false)
   const error = ref(null)
 
   async function fetchEvents(url, apiToken, organizer) {
-    loading.value = true
     error.value = null
 
     try {
-      const api = mande(url, { headers: { Authorization: `Device ${apiToken}` } })
+      const api = mande(url, { headers: { authorization: `Device ${apiToken}` } })
       const response = await api.get(`/api/v1/organizers/${organizer}/events/`)
       events.value = response.results
     } catch (err) {
       error.value = err.message
-    } finally {
-      loading.value = false
     }
   }
 
   return {
     events,
-    loading,
     error,
     fetchEvents
   }

src/stores/leadscan.js

@@ -0,0 +1,69 @@
+import { useCameraStore } from '@/stores/camera'
+import { mande } from 'mande'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useLeadScanStore = defineStore('processLeadScan', () => {
+  const cameraStore = useCameraStore()
+  const message = ref('')
+  const showSuccess = ref(false)
+  const showError = ref(false)
+
+  function $reset() {
+    message.value = ''
+    showSuccess.value = false
+    showError.value = false
+  }
+
+  function showErrorMsg(msg) {
+    message.value = msg
+    showSuccess.value = false
+    showError.value = true
+  }
+
+  function showSuccessMsg(msg) {
+    message.value = msg
+    showSuccess.value = true
+    showError.value = false
+  }
+
+  async function scanLead() {
+    const qrData = JSON.parse(cameraStore.qrCodeValue)
+
+    const apiToken = localStorage.getItem('api_token')
+    const url = localStorage.getItem('url')
+    const key = localStorage.getItem('exhikey')
+    const slug = localStorage.getItem('selectedEventSlug')
+
+    // Prepare the POST request body
+    const requestBody = {
+      lead: qrData.lead,
+      scanned: 'null',
+      scan_type: 'lead',
+      device_name: 'Test'
+    }
+
+    try {
+      const headers = {
+        Authorization: `Device ${apiToken}`,
+        Accept: 'application/json',
+        Exhibitor: key
+      }
+
+      const api = mande(`${url}/api/v1/event/admin/${slug}/exhibitors/lead/create`, {
+        headers: headers
+      })
+      const response = await api.post(requestBody)
+    } catch (err) {
+      showErrorMsg('Check-in failed: ' + err.message)
+    }
+  }
+
+  return {
+    message,
+    showSuccess,
+    showError,
+    scanLead,
+    $reset
+  }
+})

src/stores/leedauth.js

@@ -4,24 +4,26 @@ import { defineStore } from 'pinia'
 export const useleedauth = defineStore('leedauth', () => {
   async function leedlogin(payload) {
     try {
-      console.log('leedlogin')
       const url = localStorage.getItem('url')
       const organizer = localStorage.getItem('organizer')
       const slug = localStorage.getItem('selectedEventSlug')
       const apiToken = localStorage.getItem('api_token')
-      console.log(url, organizer, slug, apiToken, payload)
       const headers = {
         Authorization: `Device ${apiToken}`,
         Accept: 'application/json'
       }
       const api = mande(url, { headers: headers })
       const response = await api.post(`/api/v1/event/${organizer}/${slug}/exhibitors/auth`, payload)
-      console.log('here', response)
+      if (response.success) {
+        if (localStorage.getItem('exhikey')) {
+          localStorage.removeItem('exhikey')
+        }
+        localStorage.setItem('exhikey', payload.key)
+      }
+
       return response
     } catch (error) {
-      console.log(error)
       console.log('error')
-      return 'wt'
     }
   }
 

src/stores/processDevice.js

@@ -72,7 +72,7 @@ export const useProcessDeviceStore = defineStore('processDevice', () => {
         localStorage.setItem('api_token', data.api_token)
         localStorage.setItem('organizer', data.organizer)
         localStorage.setItem('url', url)
-        router.push({ name: 'eventyayselect' })
+        router.push({ name: 'eventyayevents' })
         showSuccessMsg()
       } else {
         showErrorMsg()