@7365admin1/layer-common 4.1.3-staging.249 → 4.1.3-staging.251

package/components/PublicOnboarding/ContractorRegistrationForm.vue

@@ -146,7 +146,14 @@
             hide-details
             class="mb-2"
           />
-          <InputPhoneNumberV2 v-model="member.contact" density="comfortable" hide-details />
+          <InputPhoneNumberV2 v-model="member.contact" density="comfortable" hide-details class="mb-2" />
+          <v-text-field
+            v-model="member.plateNumber"
+            label="Vehicle Number (Optional)"
+            density="comfortable"
+            variant="outlined"
+            hide-details
+          />
         </div>
 
         <v-btn variant="outlined" block class="mb-3" prepend-icon="mdi-plus" @click="addDraftMember">
@@ -192,7 +199,7 @@ const visitor = reactive({
   remarks: "",
 });
 
-type TDraftMember = { name: string; nric: string; contact: string };
+type TDraftMember = { name: string; nric: string; contact: string; plateNumber: string };
 const members = ref<TDraftMember[]>([]);
 const draftMembers = ref<TDraftMember[]>([]);
 const showMembersDialog = ref(false);
@@ -201,12 +208,12 @@ watch(showMembersDialog, (open) => {
   if (open) {
     draftMembers.value = members.value.length
       ? members.value.map((m) => ({ ...m }))
-      : [{ name: "", nric: "", contact: "" }];
+      : [{ name: "", nric: "", contact: "", plateNumber: "" }];
   }
 });
 
 function addDraftMember() {
-  draftMembers.value.push({ name: "", nric: "", contact: "" });
+  draftMembers.value.push({ name: "", nric: "", contact: "", plateNumber: "" });
 }
 
 function saveMembers() {
@@ -234,6 +241,7 @@ async function submit() {
       contractorType: visitor.contractorType || undefined,
       name: visitor.name,
       contact: visitor.contact,
+      expectedCheckIn: visitor.expectedCheckIn || undefined,
       nric: visitor.nric || undefined,
       email: visitor.email || undefined,
       block: visitor.block || undefined,
@@ -246,7 +254,11 @@ async function submit() {
     };
 
     const res: any = await createVisitor(prop.site, payload);
-    emit("done", res?.status || "pending");
+    emit("done", res?.status || "pending", res?._id, {
+      name: visitor.name,
+      expectedCheckIn: visitor.expectedCheckIn,
+      members: res?.members || [],
+    });
   } catch (error: any) {
     submitError.value =
       error?.data?.message || error?.message || "Unable to submit your registration. Please try again.";

package/components/PublicOnboarding/ShareDialog.vue

@@ -0,0 +1,93 @@
+<template>
+  <v-dialog :model-value="modelValue" max-width="380" @update:model-value="emit('update:modelValue', $event)">
+    <v-card class="pa-4">
+      <div class="d-flex justify-space-between align-center mb-1">
+        <span class="text-subtitle-1 font-weight-bold">Share</span>
+        <v-btn icon variant="text" size="small" @click="emit('update:modelValue', false)">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </div>
+      <p class="text-caption text-medium-emphasis mb-4">As a message</p>
+
+      <div class="d-flex ga-4 mb-5">
+        <a :href="whatsappUrl" target="_blank" rel="noopener" class="share-icon" aria-label="Share via WhatsApp">
+          <v-avatar color="#25D366" size="44"><v-icon color="white">mdi-whatsapp</v-icon></v-avatar>
+        </a>
+        <a :href="telegramUrl" target="_blank" rel="noopener" class="share-icon" aria-label="Share via Telegram">
+          <v-avatar color="#229ED9" size="44"><v-icon color="white">mdi-telegram</v-icon></v-avatar>
+        </a>
+        <button
+          v-if="canNativeShare"
+          type="button"
+          class="share-icon share-icon--btn"
+          aria-label="More share options"
+          @click="nativeShare"
+        >
+          <v-avatar color="grey-darken-2" size="44"><v-icon color="white">mdi-dots-horizontal</v-icon></v-avatar>
+        </button>
+      </div>
+
+      <p class="text-caption text-medium-emphasis mb-2">Or copy message</p>
+      <div class="d-flex ga-2 align-start">
+        <v-textarea :model-value="message" readonly density="compact" variant="outlined" rows="3" hide-details auto-grow />
+        <v-btn color="error" variant="flat" @click="copy">COPY</v-btn>
+      </div>
+
+      <v-snackbar v-model="copied" timeout="1800" location="bottom">Copied</v-snackbar>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  modelValue: boolean;
+  message: string;
+  link: string;
+}>();
+
+const emit = defineEmits<{ (e: "update:modelValue", value: boolean): void }>();
+
+// No generic web-share URL exists for Messenger/WeChat without registering
+// an app (Facebook's Send Dialog needs an App ID, WeChat sharing needs its
+// own SDK and is region-gated) - WhatsApp and Telegram both have simple,
+// no-auth share URLs, and the native share sheet (mobile browsers) covers
+// "any other app installed" without us hand-integrating each one.
+const whatsappUrl = computed(() => `https://wa.me/?text=${encodeURIComponent(props.message)}`);
+const telegramUrl = computed(
+  () => `https://t.me/share/url?url=${encodeURIComponent(props.link)}&text=${encodeURIComponent(props.message)}`,
+);
+
+const canNativeShare = computed(() => import.meta.client && typeof navigator !== "undefined" && !!navigator.share);
+
+async function nativeShare() {
+  try {
+    await navigator.share({ text: props.message, url: props.link });
+  } catch {
+    // User cancelled the share sheet, or the browser refused - no action
+    // needed, the dialog stays open with the other options still available.
+  }
+}
+
+const copied = ref(false);
+
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(props.message);
+    copied.value = true;
+  } catch {
+    // Clipboard API can be unavailable - copy-icon fallback isn't worth
+    // the added complexity here, View Link on the card still works.
+  }
+}
+</script>
+
+<style scoped>
+.share-icon {
+  display: inline-flex;
+  text-decoration: none;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+}
+</style>

package/components/PublicOnboarding/VisitorQrCodeLinksCard.vue

@@ -0,0 +1,113 @@
+<template>
+  <v-card class="pa-6" elevation="2">
+    <div class="d-flex flex-column align-center mb-4">
+      <v-avatar color="grey-darken-3" size="48" class="mb-3">
+        <v-icon icon="mdi-qrcode" color="white" size="24" />
+      </v-avatar>
+      <h1 class="text-subtitle-1 font-weight-bold text-center">Visitor QR Code Links</h1>
+      <p class="text-caption text-medium-emphasis text-center mt-1">
+        {{ status === "approved" ? "Invitation generated successful!" : "Registration submitted - awaiting approval" }}
+      </p>
+    </div>
+
+    <p class="text-body-2 mb-4">
+      Hi {{ leadName }}, here {{ members.length ? "are the check-in links for you and your team" : "is your check-in link" }}.
+    </p>
+
+    <div class="link-row pa-3 mb-3">
+      <p class="text-body-2 font-weight-medium mb-2">{{ leadName }}</p>
+      <div class="d-flex ga-2">
+        <v-btn variant="outlined" color="error" size="small" class="flex-grow-1" @click="copyLink(leadLink)">
+          Copy Link
+        </v-btn>
+        <v-btn variant="outlined" color="error" size="small" class="flex-grow-1" :href="leadLink" target="_blank">
+          View Link
+        </v-btn>
+      </div>
+    </div>
+
+    <template v-if="members.length">
+      <p class="text-caption text-medium-emphasis mb-2">Members</p>
+      <div v-for="m in members" :key="m._id" class="link-row pa-3 mb-3">
+        <p class="text-body-2 font-weight-medium mb-2">{{ m.name }}</p>
+        <div class="d-flex ga-2">
+          <v-btn variant="outlined" color="error" size="small" class="flex-grow-1" @click="copyLink(linkFor(m._id))">
+            Copy Link
+          </v-btn>
+          <v-btn variant="outlined" color="error" size="small" class="flex-grow-1" :href="linkFor(m._id)" target="_blank">
+            View Link
+          </v-btn>
+        </div>
+      </div>
+    </template>
+
+    <v-btn color="error" variant="flat" block size="large" class="mt-2" @click="showShare = true">
+      Share
+    </v-btn>
+
+    <v-snackbar v-model="copied" timeout="1800" location="bottom">Link copied</v-snackbar>
+
+    <PublicOnboardingShareDialog v-model="showShare" :message="shareMessage" :link="leadLink" />
+  </v-card>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  leadId: string;
+  leadName: string;
+  status: string;
+  expectedCheckIn?: string | null;
+  members: { _id: string; name: string }[];
+}>();
+
+function linkFor(id: string) {
+  const origin = import.meta.client ? window.location.origin : "";
+  return `${origin}/public-view/visitor-onboarding/pass/${id}`;
+}
+
+const leadLink = computed(() => linkFor(props.leadId));
+
+const arrivalDateDisplay = computed(() => {
+  if (!props.expectedCheckIn) return "";
+  const d = new Date(props.expectedCheckIn);
+  if (Number.isNaN(d.getTime())) return "";
+  return `${d.getDate()}/${d.getMonth() + 1}/${d.getFullYear()}`;
+});
+
+const shareMessage = computed(() => {
+  const lines = [
+    `Hi ${props.leadName},`,
+    "",
+    `Your visit registration has been submitted${props.members.length ? " along with your team" : ""}.`,
+  ];
+  if (arrivalDateDisplay.value) lines.push("", `Arrival: ${arrivalDateDisplay.value}`);
+  lines.push("", `Link: ${leadLink.value}`);
+  if (props.members.length) {
+    lines.push("", "Team Members:");
+    for (const m of props.members) {
+      lines.push(m.name, `Link: ${linkFor(m._id)}`, "");
+    }
+  }
+  return lines.join("\n");
+});
+
+const showShare = ref(false);
+const copied = ref(false);
+
+async function copyLink(link: string) {
+  try {
+    await navigator.clipboard.writeText(link);
+    copied.value = true;
+  } catch {
+    // Clipboard API can be unavailable (insecure context, permission
+    // denied) - the visitor still has View Link as a fallback.
+  }
+}
+</script>
+
+<style scoped>
+.link-row {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+}
+</style>

package/components/VehicleManagement.vue

@@ -109,7 +109,7 @@
                               @click="handleRestoreVehicle(plateNumberItem as TPlateNumber)" />
                             <v-list-item
                               v-if="((plateNumberItem as TPlateNumber)?.type === 'whitelist' || (plateNumberItem as TPlateNumber)?.type === 'blocklist') && plateNumberItem?.status == 'active'"
-                              :title="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'Whitelist' : 'Blocklist'"
+                              :title="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'Unblock' : 'Block'"
                               prepend-icon="mdi-swap-horizontal"
                               :base-color="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'primary' : 'error'"
                               @click="handleUpdateType(plateNumberItem as TPlateNumber)" />

package/components/VisitorManagement.vue

@@ -428,7 +428,7 @@
             {{ item.arrivalTime ?? "N/A" }}
           </span>
 
-          <span v-if="!item.checkIn && canUpdateVisitor">
+          <span v-if="!item.checkIn && item?.status !== 'pending' && item?.status !== 'rejected' && canUpdateVisitor">
             <span class="d-flex align-center ga-2 cursor-pointer">
               <v-icon
                 icon="mdi-clock-time-eight-outline"

package/composables/usePublicVisitorOnboarding.ts

@@ -61,6 +61,19 @@ export default function usePublicVisitorOnboarding() {
     );
   }
 
+  // The QR the preview page renders once approved - the SAME `qrCodeId`
+  // check-in credential a staff-invited visitor gets (scanned by a guard
+  // through ScanVisitorQRCode.vue, same check-in dialog/flow). It's minted
+  // (or reused if still valid) on every call and expires 5 minutes after
+  // being minted, so the preview page re-calls this periodically rather
+  // than fetching it once.
+  function getSelfServiceQrCode(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/visitors/self-service/qr-code/${id}`,
+      { method: "GET" },
+    );
+  }
+
   return {
     getOnboardingSettings,
     getBlocks,
@@ -69,5 +82,6 @@ export default function usePublicVisitorOnboarding() {
     createVisitor,
     getOvernightParkingHours,
     getSelfServicePreview,
+    getSelfServiceQrCode,
   };
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.1.3-staging.249",
+  "version": "4.1.3-staging.251",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",