feat(pos): improve linking of nfc

Improved NFC linking by having an icon and a dialog making it more clear to users when they can scan their cards.

apps/point-of-sale/src/components/ScannersUpdateComponent.vue

@@ -1,12 +1,34 @@
 <template>
-  <div class="scanners" />
+  <div class="nfc-icon"
+       @click="() => nfcModalVisible = true">
+    <div class="pi pi-id-card text-6xl"/>
+  </div>
+  <Dialog v-model:visible="nfcModalVisible" ref="nfcModal" modal header="Link NFC"
+          :style="{ width: '30vw', class: ['container'] }"
+          @show="addListenerOnDialogueOverlay(nfcModal)"
+          :pt="{
+        header: () => ({class: ['dialog-header']}),
+        closeButton: () => ({class: ['dialog-close']})}" >
+
+    <div class="flex flex-column align-items-center">
+      <div class="scanners" id="scanners"/>
+      <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="6" fill="transparent"
+                               animationDuration="1s" :style="{ display : 'flex' }"/>
+      <b style="font-weight: bold!important;">Scan your NFC card now!</b><br>
+      <b>Note: Credit cards and ID cards will not work</b><br>
+    </div>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, PropType } from "vue";
+import { PropType } from "vue";
 import { useToast } from "primevue/usetoast";
+import { Ref, ref, watch } from 'vue';
+import { addListenerOnDialogueOverlay } from "@sudosos/sudosos-frontend-common";
 
 const toast = useToast();
+const nfcModalVisible: Ref<boolean> = ref < boolean > (false);
+const nfcModal: Ref<null | any> = ref(null);
 
 const props = defineProps({
   handleNfcUpdate: {
@@ -15,6 +37,14 @@ const props = defineProps({
   }
 });
 
+watch(nfcModalVisible, (newVal) => {
+  if (newVal) {
+    document.addEventListener('keydown', onInput);
+  } else {
+    document.removeEventListener('keydown', onInput);
+  }
+});
+
 let captures: KeyboardEvent[] = [];
 
 /**
@@ -45,16 +75,24 @@ const onInput = (event: KeyboardEvent): void => {
       captures.push(event);
   }
 };
-
-onMounted(() => {
-  document.addEventListener('keydown', onInput);
-});
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', onInput);
-});
 </script>
 
 <style scoped lang="scss">
+.dialog-header {
+  background: var(--accent-color)!important;
+  color: white!important;
+}
 
+.dialog-close {
+  color: white!important;
+}
+.nfc-icon {
+  height: 100px;
+  position: fixed;
+  left: 120px;
+  font-size: 70px;
+  cursor: pointer;
+  bottom: 0;
+  color: var(--accent-color);
+}
 </style>