@7365admin1/layer-common 3.2.2-staging.84 → 3.2.2-staging.86

package/components/ServiceProviderMain.vue

@@ -5,20 +5,16 @@
         <div class="d-flex flex-wrap align-center">
           <v-btn
             v-if="showAddButton && canAddServiceProvider"
-            class="text-none mr-2"
-            rounded="pill"
-            variant="tonal"
-            size="large"
+            class="text-none mr-2 screen-btn-primary"
+            variant="flat"
             @click="(createDialog = true), setServiceProvider({ mode: 'add' })"
           >
             Add
           </v-btn>
           <v-btn
             v-if="canInviteServiceProvider"
-            class="text-none mr-2"
-            rounded="pill"
-            variant="tonal"
-            size="large"
+            class="text-none mr-2 screen-btn-primary"
+            variant="flat"
             @click="
               (createInviteDialog = true),
                 setServiceProvider({ mode: 'invite' })
@@ -28,10 +24,8 @@
           </v-btn>
           <v-btn
             v-if="showBillingButton"
-            class="text-none mr-2"
-            rounded="pill"
-            variant="tonal"
-            size="large"
+            class="text-none mr-2 screen-btn-primary"
+            variant="flat"
             @click="
               useRouter().push({
                 name: 'org-site-service-provider-mgmt-billing',
@@ -59,9 +53,8 @@
     <v-col cols="12">
       <v-card
         width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
+        variant="flat"
+        class="table-card"
         :loading="loading"
       >
         <div class="sp-table-header">
@@ -101,7 +94,7 @@
             v-model="listTab"
             color="primary"
             density="comfortable"
-            class="sp-tabs"
+            class="sp-tabs screen-tabs"
             align-tabs="start"
           >
             <v-tab value="active" class="text-none">Service Providers</v-tab>
@@ -147,14 +140,11 @@
               4.5:1 a 12px label needs. Filled puts the colour in the
               background and lets Vuetify pick a readable foreground for it.
             -->
-            <v-chip
-              :color="statusChipColor(item.status, item.statusRaw)"
-              size="small"
-              :variant="item.source === 'invite' ? 'flat' : 'tonal'"
+            <StatusChip
               class="text-none"
-            >
-              {{ item.status }}
-            </v-chip>
+              :status="item.statusRaw || item.status"
+              :label="item.status"
+            />
             <div
               v-if="item.rejectionReason"
               class="text-caption text-medium-emphasis mt-1 sp-reject-reason"
@@ -520,7 +510,7 @@
 
   <v-dialog v-model="createInviteDialog" width="580" persistent>
     <v-card width="100%" rounded="lg" class="sp-invite-card">
-      <v-toolbar flat color="grey-lighten-4" height="76">
+      <v-toolbar flat color="transparent" class="table-card__toolbar" height="76">
         <v-row no-gutters class="fill-height px-6" align="center">
           <span class="font-weight-bold text-h5">
             Invite Service Provider
@@ -1147,24 +1137,9 @@ function statusDisplay(raw: string, source: TableRow["source"]) {
   return raw.charAt(0).toUpperCase() + raw.slice(1).toLowerCase();
 }
 
-const INVITE_STATUS_COLOURS: Record<string, string> = {
-  "awaiting-approval": "warning",
-  pending: "info",
-  complete: "success",
-  rejected: "error",
-  declined: "default",
-  cancelled: "default",
-  expired: "default",
-};
-
-function statusChipColor(statusLabel: string, statusRaw?: string) {
-  if (statusRaw) return INVITE_STATUS_COLOURS[statusRaw] ?? "primary";
-  const s = statusLabel.toLowerCase();
-  if (s === "active") return "success";
-  if (s === "pending") return "warning";
-  if (s === "in-active" || s === "inactive") return "default";
-  return "primary";
-}
+/* The status chips read their tone from the shared mapping in
+   `utils/status.ts` now - which carries every raw invitation status this map
+   carried, with the same tone. */
 
 // async function loadInviteRoles() {
 //   loadingInviteRoles.value = true;

package/components/StatusChip.vue

@@ -12,7 +12,10 @@
 <template>
   <span class="status-chip" :class="[toneClass, { 'status-chip--plain': !dot }]">
     <span v-if="dot" class="status-chip__dot" />
-    {{ label ?? status }}
+    <!-- The slot is for the chips that already carried an icon next to their
+         word - a padlock on "Closed - View Only" - so adopting the design's
+         pill does not quietly drop it. -->
+    <slot>{{ label ?? status }}</slot>
   </span>
 </template>
 
@@ -26,9 +29,20 @@ const props = defineProps({
   label: { type: String, default: undefined },
   /** The design's tag chips (pass IDs, role names) carry no leading dot. */
   dot: { type: Boolean, default: true },
+  /**
+   * For the chips that are not a status WORD at all - a countdown, a rating, a
+   * count - where the screen has already worked out the meaning and only needs
+   * the design's tone. Given, it wins over the word mapping.
+   */
+  tone: {
+    type: String as PropType<"ok" | "warn" | "err" | "info" | "neutral" | "">,
+    default: "",
+  },
 });
 
-const toneClass = computed(() => statusToneClass(props.status));
+const toneClass = computed(() =>
+  props.tone ? `tone-${props.tone}` : statusToneClass(props.status)
+);
 </script>
 
 <style scoped>

package/components/TableMain.vue

@@ -216,136 +216,3 @@ watch(
   }
 );
 </script>
-
-<style scoped>
-/* ------------------------------------------------------------------ */
-/* The card.                                                           */
-/* ------------------------------------------------------------------ */
-
-.table-card {
-  font-family: var(--font-sans);
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: var(--r-card);
-  box-shadow: var(--shadow);
-  overflow: hidden;
-}
-
-/**
- * The toolbar was `color="grey-lighten-4"` - a literal Vuetify grey, which is
- * a near-white bar sitting on a #1c1e24 card in dark mode. It is the card's
- * own surface now, with the design's rule under it.
- */
-.table-card__toolbar {
-  border-bottom: 1px solid var(--border);
-}
-
-.table-card__range {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--muted);
-  font-variant-numeric: tabular-nums;
-}
-
-/* ------------------------------------------------------------------ */
-/* The header row and the rows under it.                               */
-/* ------------------------------------------------------------------ */
-
-.table-card :deep(thead th) {
-  background: var(--thead) !important;
-  color: var(--muted) !important;
-  font-size: var(--fs-table-head) !important;
-  font-weight: var(--fw-table-head) !important;
-  letter-spacing: var(--ls-table-head);
-  text-transform: uppercase;
-  padding: 10px var(--cellpad-x) !important;
-  height: auto !important;
-  border-bottom: 1px solid var(--border) !important;
-  white-space: nowrap;
-}
-
-.table-card :deep(tbody td) {
-  font-size: var(--fs-cell);
-  font-weight: var(--fw-cell);
-  color: var(--text);
-  padding: var(--cellpad) var(--cellpad-x) !important;
-  height: auto !important;
-  font-variant-numeric: tabular-nums;
-}
-
-.table-card :deep(tbody tr:hover > td) {
-  background: var(--hover);
-}
-
-/* ------------------------------------------------------------------ */
-/* Empty state, in-card search, buttons and in-card tabs.              */
-/* ------------------------------------------------------------------ */
-
-.table-card__empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 52px 16px;
-  font-size: var(--fs-cell);
-  color: var(--muted);
-}
-
-.table-card__empty :deep(.v-icon) {
-  color: var(--muted);
-}
-
-/* The in-card variant: 34px, 10px radius, as drawn. */
-.table-card__search :deep(.v-field) {
-  border-radius: var(--r-inner);
-  font-size: var(--fs-cell);
-}
-
-.table-card__primary {
-  height: var(--btn-h);
-  border-radius: var(--r-inner);
-  padding: 0 16px;
-  font-size: var(--fs-btn);
-  font-weight: var(--fw-btn-strong);
-  letter-spacing: 0;
-  background: var(--accent-strong);
-  color: var(--on-accent-strong);
-}
-
-.table-card__ghost {
-  height: var(--btn-h);
-  border-radius: var(--r-inner);
-  padding: 0 16px;
-  font-size: var(--fs-btn);
-  font-weight: var(--fw-btn);
-  letter-spacing: 0;
-  color: var(--text2);
-  border-color: var(--border);
-  background: var(--card);
-}
-
-/**
- * Tabs that a screen puts in this card's extension slot: 13px, the active one
- * at 800 in `--accent-text` over a 2px accent underline. Tabs elsewhere in the
- * product are their own screens' and are restyled with them.
- */
-.table-card :deep(.v-tab) {
-  font-size: var(--fs-nav);
-  font-weight: var(--fw-cell);
-  letter-spacing: 0;
-  text-transform: none;
-  color: var(--muted);
-  min-width: 0;
-}
-
-.table-card :deep(.v-tab.v-tab--selected) {
-  font-weight: var(--fw-table-head);
-  color: var(--accent-text);
-}
-
-.table-card :deep(.v-tab .v-tab__slider) {
-  height: 2px;
-  background: var(--accent);
-}
-</style>

package/components/VisitorForm.vue

@@ -515,13 +515,49 @@
           </div>
 
           <div class="hid-qr-image-shell my-5">
-            <v-img :src="hidQrPreview.imageUrl" width="280" height="280" alt="Visitor access QR code" />
+            <v-img v-if="hidQrVisible" :src="hidQrPreview.imageUrl" width="280" height="280" alt="Visitor access QR code" />
+            <button v-else type="button" class="hid-qr-reveal" aria-label="Show QR code" @click="hidQrVisible = true">
+              <v-icon icon="mdi-eye-outline" size="42" />
+              <span>Click to show QR code</span>
+            </button>
           </div>
 
+          <v-btn
+            variant="text"
+            density="comfortable"
+            class="text-none"
+            :prepend-icon="hidQrVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+            @click="hidQrVisible = !hidQrVisible"
+          >
+            {{ hidQrVisible ? "Hide QR code" : "Show QR code" }}
+          </v-btn>
+
           <div class="text-h6 font-weight-bold">{{ visitor.name }}</div>
           <div v-if="hidQrPreview.expiresAt" class="text-caption text-medium-emphasis mt-1">
             Valid until {{ formatHidQrExpiry(hidQrPreview.expiresAt) }}
           </div>
+          <v-chip
+            v-if="hidQrPreview.expiresAt"
+            class="mt-2"
+            size="small"
+            :color="hidQrExpired ? 'error' : 'success'"
+            variant="tonal"
+          >
+            {{ hidQrExpired ? "Expired" : `Expires in ${formatHidQrCountdown(hidQrRemainingSeconds)}` }}
+          </v-chip>
+
+          <v-btn
+            v-if="hidQrExpired"
+            block
+            class="mt-4 text-none"
+            color="primary-button"
+            variant="flat"
+            prepend-icon="mdi-refresh"
+            :loading="hidQrRegenerating"
+            @click="regenerateHidQrCode"
+          >
+            Generate QR again
+          </v-btn>
 
           <v-alert v-if="hidQrPreviewError" type="error" variant="tonal" density="compact" class="mt-4 text-left">
             {{ hidQrPreviewError }}
@@ -684,6 +720,11 @@ const isNricFieldFocused = ref(false);
 const hidQrPrinting = ref(false);
 const hidQrPreviewDialog = ref(false);
 const hidQrPreviewError = ref("");
+const hidQrVisible = ref(false);
+const hidQrRegenerating = ref(false);
+const hidQrVisitorId = ref("");
+const hidQrNow = ref(Date.now());
+let hidQrTimer: ReturnType<typeof setInterval> | null = null;
 const hidQrPendingCompletion = ref<"done" | "done:more" | null>(null);
 const hidQrPreview = reactive({
   imageUrl: "",
@@ -691,6 +732,24 @@ const hidQrPreview = reactive({
   expiresAt: "",
 });
 
+const hidQrRemainingSeconds = computed(() => {
+  const expiry = new Date(hidQrPreview.expiresAt).getTime();
+  return Number.isFinite(expiry) ? Math.max(0, Math.ceil((expiry - hidQrNow.value) / 1000)) : 0;
+});
+const hidQrExpired = computed(() => Boolean(hidQrPreview.expiresAt) && hidQrRemainingSeconds.value === 0);
+
+watch(hidQrPreviewDialog, (open) => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+  hidQrTimer = null;
+  if (!open) return;
+  hidQrNow.value = Date.now();
+  hidQrTimer = setInterval(() => { hidQrNow.value = Date.now(); }, 1000);
+});
+
+onBeforeUnmount(() => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+});
+
 const registeredUnitCompanyName = ref("N/A");
 
 const dialog = reactive({
@@ -818,10 +877,6 @@ const hidQrValidityMinutes = computed(() => {
 });
 
 const hidQrReaderId = computed(() => String(hidQrCodePassConfig.value?.readerId || ""));
-const hidQrFormat = computed<"0" | "1" | "2">(() => {
-  const value = String(hidQrCodePassConfig.value?.qrFormat || "0");
-  return value === "1" || value === "2" ? value : "0";
-});
 
 const hidQrCodePassAllowed = computed(() => {
   return (
@@ -2088,10 +2143,10 @@ async function prepareHidQrCodePreview(visitorId: string) {
   }
 
   try {
+    hidQrVisitorId.value = visitorId;
     const response = await issueVisitorQr(hidQrReaderId.value, {
       visitorId,
       validityMinutes: hidQrValidityMinutes.value,
-      qrFormat: hidQrFormat.value,
     });
     const credential = "data" in response ? response.data : response;
     hidQrPrintPayload.value = credential.qrValue;
@@ -2107,14 +2162,37 @@ async function prepareHidQrCodePreview(visitorId: string) {
     });
     hidQrPreview.issuedAt = credential.issuedAt || "";
     hidQrPreview.expiresAt = credential.expiresAt || "";
+    hidQrVisible.value = false;
+    hidQrNow.value = Date.now();
     hidQrPreviewDialog.value = true;
     return true;
   } catch (error: unknown) {
-    errorMessage.value = errorConverter(error) || "Unable to generate HID QR Code.";
+    const message = errorConverter(error) || "Unable to generate HID QR Code.";
+    if (hidQrPreviewDialog.value) hidQrPreviewError.value = message;
+    else errorMessage.value = message;
     return false;
   }
 }
 
+function formatHidQrCountdown(totalSeconds: number) {
+  const safe = Math.max(0, totalSeconds);
+  const hours = Math.floor(safe / 3600);
+  const minutes = Math.floor((safe % 3600) / 60);
+  const seconds = safe % 60;
+  return [hours, minutes, seconds].map((part) => String(part).padStart(2, "0")).join(":");
+}
+
+async function regenerateHidQrCode() {
+  if (!hidQrVisitorId.value) return;
+  hidQrRegenerating.value = true;
+  hidQrPreviewError.value = "";
+  try {
+    await prepareHidQrCodePreview(hidQrVisitorId.value);
+  } finally {
+    hidQrRegenerating.value = false;
+  }
+}
+
 async function printHidQrCodePass() {
   if (hidQrPrinted.value) return true;
 
@@ -2335,4 +2413,19 @@ onMounted(() => {
   border: 1px solid #dce3e8;
   background: #ffffff;
 }
+
+.hid-qr-reveal {
+  display: flex;
+  width: 280px;
+  height: 280px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: #f5f7f9;
+  color: #344054;
+  cursor: pointer;
+  flex-direction: column;
+  gap: 10px;
+  font: inherit;
+}
 </style>

package/components/VisitorManagement.vue

@@ -303,6 +303,18 @@
             >
           </div>
 
+          <v-btn
+            v-if="hidQrEnabled"
+            icon="mdi-eye-outline"
+            size="x-small"
+            variant="text"
+            color="primary"
+            title="View HID QR code"
+            aria-label="View HID QR code"
+            class="align-self-start mt-1"
+            @click.stop="openVisitorHidQr(item)"
+          />
+
           <v-menu :close-on-content-click="true">
             <template v-slot:activator="{ props: menuProps }">
               <div
@@ -1177,12 +1189,52 @@
       </v-card>
     </v-dialog>
 
+    <v-dialog v-model="hidQrDialog" max-width="440" persistent>
+      <v-card>
+        <v-toolbar color="transparent" density="comfortable" class="px-2">
+          <v-toolbar-title class="text-subtitle-1 font-weight-bold">Visitor QR Code</v-toolbar-title>
+          <v-btn icon="mdi-close" variant="text" title="Close" @click="hidQrDialog = false" />
+        </v-toolbar>
+        <v-card-text class="px-8 pb-6 text-center">
+          <v-progress-circular v-if="hidQrLoading" indeterminate color="primary" class="my-10" />
+          <template v-else-if="hidQrImageUrl">
+            <div class="text-h6 font-weight-bold">{{ hidQrVisitor?.name || "Visitor Access Pass" }}</div>
+            <div class="visitor-hid-qr my-5">
+              <v-img :src="hidQrImageUrl" width="280" height="280" alt="Visitor HID QR code" />
+            </div>
+            <div class="text-caption text-medium-emphasis">
+              Valid until {{ formatHidQrExpiry(hidQrExpiresAt) }}
+            </div>
+            <v-chip class="mt-2" size="small" :color="hidQrExpired ? 'error' : 'success'" variant="tonal">
+              {{ hidQrExpired ? "Expired" : `Expires in ${formatHidQrCountdown(hidQrRemainingSeconds)}` }}
+            </v-chip>
+          </template>
+          <v-alert v-if="hidQrError" type="warning" variant="tonal" density="compact" class="mt-4 text-left">
+            {{ hidQrError }}
+          </v-alert>
+          <v-btn
+            v-if="!hidQrLoading && (!hidQrImageUrl || hidQrExpired)"
+            block
+            color="primary-button"
+            variant="flat"
+            class="mt-4 text-none"
+            prepend-icon="mdi-refresh"
+            :loading="hidQrGenerating"
+            @click="generateVisitorHidQr"
+          >
+            {{ hidQrExpired ? "Generate QR again" : "Generate HID QR code" }}
+          </v-btn>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
 </template>
 
 <script setup lang="ts">
 import moment from "moment-timezone";
+import QRCode from "qrcode";
 
 definePageMeta({
   middleware: ["01-auth", "02-org"],
@@ -1244,6 +1296,8 @@ const {
 } = useUtils();
 const { formatLocation } = useSecurityUtils();
 const { getFileUrlAnpr } = useFile();
+const { getSiteById } = useSite();
+const { getIdentities, issueVisitorQr } = useHidAmico();
 // const { status: visitorStatus, search } = useRoute().query as { status: string, search: string};
 
 const routeName = route.name;
@@ -1255,6 +1309,106 @@ const pageRange = ref("-- - -- of --");
 const activeTab = ref("registered");
 const activeVisitorFormType = ref<TVisitorType | null>(null);
 const selectedVisitorId = ref<string | null>(""); // selected visitor for viewing/actions
+const hidQrDialog = ref(false);
+const hidQrLoading = ref(false);
+const hidQrGenerating = ref(false);
+const hidQrError = ref("");
+const hidQrImageUrl = ref("");
+const hidQrExpiresAt = ref("");
+const hidQrNow = ref(Date.now());
+const hidQrVisitor = ref<Record<string, any> | null>(null);
+const hidQrConfig = ref({ enabled: false, readerId: "", validityMinutes: 60 });
+let hidQrTimer: ReturnType<typeof setInterval> | null = null;
+const hidQrEnabled = computed(() => hidQrConfig.value.enabled && Boolean(hidQrConfig.value.readerId));
+const hidQrRemainingSeconds = computed(() => {
+  const expiry = new Date(hidQrExpiresAt.value).getTime();
+  return Number.isFinite(expiry) ? Math.max(0, Math.ceil((expiry - hidQrNow.value) / 1000)) : 0;
+});
+const hidQrExpired = computed(() => Boolean(hidQrExpiresAt.value) && hidQrRemainingSeconds.value === 0);
+
+async function loadHidQrConfig() {
+  try {
+    const response: any = await getSiteById(siteId);
+    const site = response?.data ?? response;
+    const config = site?.metadata?.hidQrCodePass ?? {};
+    hidQrConfig.value = {
+      enabled: Boolean(config.enabled && config.onlineMode !== false),
+      readerId: String(config.readerId || ""),
+      validityMinutes: Number(config.validityMinutes) > 0 ? Number(config.validityMinutes) : 60,
+    };
+  } catch {
+    hidQrConfig.value = { enabled: false, readerId: "", validityMinutes: 60 };
+  }
+}
+
+function extractIdentityItems(response: any) {
+  return response?.items ?? response?.data?.items ?? [];
+}
+
+async function openVisitorHidQr(visitor: Record<string, any>) {
+  hidQrVisitor.value = visitor;
+  hidQrDialog.value = true;
+  hidQrLoading.value = true;
+  hidQrError.value = "";
+  hidQrImageUrl.value = "";
+  hidQrExpiresAt.value = "";
+  try {
+    const response = await getIdentities(hidQrConfig.value.readerId, { type: "visitor", limit: 100 });
+    const identity = extractIdentityItems(response).find(
+      (item: any) => String(item.visitor || item.metadata?.visitor || "") === String(visitor._id),
+    );
+    const qrValue = String(identity?.metadata?.qrValue || identity?.cardNo || "");
+    hidQrExpiresAt.value = String(identity?.metadata?.expiresAt || "");
+    if (!qrValue || !hidQrExpiresAt.value) {
+      hidQrError.value = "This visitor does not have an HID QR code yet.";
+      return;
+    }
+    hidQrImageUrl.value = await QRCode.toDataURL(qrValue, { width: 360, margin: 2, errorCorrectionLevel: "M" });
+    hidQrNow.value = Date.now();
+  } catch (error: unknown) {
+    hidQrError.value = errorConverter(error) || "Unable to load the visitor HID QR code.";
+  } finally {
+    hidQrLoading.value = false;
+  }
+}
+
+async function generateVisitorHidQr() {
+  if (!hidQrVisitor.value?._id || !hidQrConfig.value.readerId) return;
+  hidQrGenerating.value = true;
+  hidQrError.value = "";
+  try {
+    const response = await issueVisitorQr(hidQrConfig.value.readerId, {
+      visitorId: String(hidQrVisitor.value._id),
+      validityMinutes: hidQrConfig.value.validityMinutes,
+    });
+    const credential = "data" in response ? response.data : response;
+    hidQrImageUrl.value = await QRCode.toDataURL(credential.qrValue, { width: 360, margin: 2, errorCorrectionLevel: "M" });
+    hidQrExpiresAt.value = credential.expiresAt;
+    hidQrNow.value = Date.now();
+  } catch (error: unknown) {
+    hidQrError.value = errorConverter(error) || "Unable to generate the visitor HID QR code.";
+  } finally {
+    hidQrGenerating.value = false;
+  }
+}
+
+function formatHidQrExpiry(value: string) {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+}
+
+function formatHidQrCountdown(totalSeconds: number) {
+  const safe = Math.max(0, totalSeconds);
+  const hours = Math.floor(safe / 3600);
+  const minutes = Math.floor((safe % 3600) / 60);
+  const seconds = safe % 60;
+  return [hours, minutes, seconds].map((part) => String(part).padStart(2, "0")).join(":");
+}
+
+watch(hidQrDialog, (open) => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+  hidQrTimer = open ? setInterval(() => { hidQrNow.value = Date.now(); }, 1000) : null;
+});
 
 //filter states
 const searchInput = ref("");
@@ -2346,7 +2500,14 @@ const syncVisitorFiltersFromRoute = () => {
   }
 };
 
-onMounted(syncVisitorFiltersFromRoute);
+onMounted(() => {
+  syncVisitorFiltersFromRoute();
+  void loadHidQrConfig();
+});
+
+onBeforeUnmount(() => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+});
 
 watch(() => route.query, syncVisitorFiltersFromRoute, { deep: true });
 
@@ -2397,4 +2558,11 @@ watchEffect(async () => {
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.visitor-hid-qr {
+  display: inline-flex;
+  padding: 12px;
+  border: 1px solid #dce3e8;
+  background: #fff;
+}
+</style>