@7365admin1/layer-common 4.2.2-staging.264 → 4.2.2-staging.265

package/components/PublicOnboarding/ContractorRegistrationForm.vue

@@ -46,7 +46,7 @@
           label="Email"
           density="comfortable"
           variant="outlined"
-          hide-details
+          :rules="[emailRule]"
         />
       </v-col>
 
@@ -146,6 +146,15 @@
             hide-details
             class="mb-2"
           />
+          <v-text-field
+            v-model="member.email"
+            type="email"
+            label="Email"
+            density="comfortable"
+            variant="outlined"
+            :rules="[requiredRule, emailRule]"
+            class="mb-2"
+          />
           <InputPhoneNumberV2 v-model="member.contact" density="comfortable" hide-details class="mb-2" />
           <v-text-field
             v-model="member.plateNumber"
@@ -156,6 +165,10 @@
           />
         </div>
 
+        <v-alert v-if="membersError" type="error" variant="tonal" density="compact" class="mb-3">
+          {{ membersError }}
+        </v-alert>
+
         <v-btn variant="outlined" block class="mb-3" prepend-icon="mdi-plus" @click="addDraftMember">
           Add
         </v-btn>
@@ -166,6 +179,8 @@
 </template>
 
 <script lang="ts" setup>
+import { isLikelyEmail } from "../../utils/self-service-links";
+
 const prop = defineProps({
   site: { type: String, required: true },
 });
@@ -176,6 +191,10 @@ const { createVisitor } = usePublicVisitorOnboarding();
 const { isSupported: isContactPickerSupported, pickContact } = useContactPicker();
 
 const requiredRule = (v: any) => (v !== null && v !== undefined && v !== "") || "This field is required";
+// Optional, but if typed it has to be sendable - the API validates it with Joi
+// and would otherwise reject the whole submission with a message about a field
+// the visitor cannot see.
+const emailRule = (v: any) => !v || isLikelyEmail(v) || "Enter a valid email address";
 
 const contractorTypes = [
   { title: "Home Contractor", value: "home-contractor" },
@@ -199,25 +218,40 @@ const visitor = reactive({
   remarks: "",
 });
 
-type TDraftMember = { name: string; nric: string; contact: string; plateNumber: string };
+type TDraftMember = { name: string; nric: string; email: string; contact: string; plateNumber: string };
 const members = ref<TDraftMember[]>([]);
 const draftMembers = ref<TDraftMember[]>([]);
 const showMembersDialog = ref(false);
+const membersError = ref("");
 
 watch(showMembersDialog, (open) => {
   if (open) {
     draftMembers.value = members.value.length
       ? members.value.map((m) => ({ ...m }))
-      : [{ name: "", nric: "", contact: "", plateNumber: "" }];
+      : [{ name: "", nric: "", email: "", contact: "", plateNumber: "" }];
+    membersError.value = "";
   }
 });
 
 function addDraftMember() {
-  draftMembers.value.push({ name: "", nric: "", contact: "", plateNumber: "" });
+  draftMembers.value.push({ name: "", nric: "", email: "", contact: "", plateNumber: "" });
 }
 
 function saveMembers() {
-  members.value = draftMembers.value.filter((m) => m.name && m.contact);
+  // The members dialog is lazy (no `eager`), so its fields unmount when it
+  // closes and stop counting towards the form's own `formValid` - which is what
+  // gates Submit. Without this guard a malformed member address would sail past
+  // both, and the API would reject the entire submission with a Joi message
+  // naming a field the contractor can no longer see. Blank stays allowed: an
+  // email is optional per member, it just means no mail of their own.
+  const invalid = draftMembers.value.find((m) => m.email && !isLikelyEmail(m.email));
+  if (invalid) {
+    membersError.value = `Enter a valid email address for ${invalid.name || "this member"}, or leave it blank.`;
+    return;
+  }
+
+  membersError.value = "";
+  members.value = draftMembers.value.filter((m) => m.name && m.contact && m.email);
   showMembersDialog.value = false;
 }
 
@@ -256,6 +290,7 @@ async function submit() {
     const res: any = await createVisitor(prop.site, payload);
     emit("done", res?.status || "pending", res?._id, {
       name: visitor.name,
+      email: visitor.email,
       expectedCheckIn: visitor.expectedCheckIn,
       members: res?.members || [],
     });

package/components/PublicOnboarding/VisitorQrCodeLinksCard.vue

@@ -14,30 +14,59 @@
       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-for="(row, index) in rows" :key="row._id">
+      <p v-if="index === 1" class="text-caption text-medium-emphasis mb-2">Members</p>
+
+      <div class="link-row pa-3 mb-3">
+        <p class="text-body-2 font-weight-medium mb-2">{{ row.name }}</p>
 
-    <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))">
+          <v-btn variant="outlined" color="error" size="small" class="flex-grow-1" @click="copyLink(linkFor(row._id))">
             Copy Link
           </v-btn>
-          <v-btn variant="outlined" color="error" size="small" class="flex-grow-1" :href="linkFor(m._id)" target="_blank">
+          <v-btn variant="outlined" color="error" size="small" class="flex-grow-1" :href="linkFor(row._id)" target="_blank">
             View Link
           </v-btn>
+          <v-btn
+            variant="outlined"
+            color="error"
+            size="small"
+            class="flex-grow-1"
+            :loading="resendState[row._id] === 'sending'"
+            :disabled="resendState[row._id] === 'sending'"
+            @click="onResend(row)"
+          >
+            {{ resendState[row._id] === "sent" ? "Sent" : "Resend" }}
+          </v-btn>
+        </div>
+
+        <div v-if="showEmailInput[row._id]" class="d-flex ga-2 mt-3 align-start">
+          <v-text-field
+            v-model="emailDrafts[row._id]"
+            type="email"
+            label="Email"
+            density="compact"
+            variant="outlined"
+            hide-details
+            :disabled="resendState[row._id] === 'sending'"
+            @keyup.enter="onResend(row)"
+          />
+          <v-btn
+            color="error"
+            variant="flat"
+            size="small"
+            class="mt-1"
+            :loading="resendState[row._id] === 'sending'"
+            :disabled="resendState[row._id] === 'sending' || !isLikelyEmail(emailDrafts[row._id])"
+            @click="onResend(row)"
+          >
+            Send
+          </v-btn>
         </div>
+
+        <p v-if="resendError[row._id]" class="text-caption text-error mt-2 mb-0">
+          {{ resendError[row._id] }}
+        </p>
       </div>
     </template>
 
@@ -46,27 +75,116 @@
     </v-btn>
 
     <v-snackbar v-model="copied" timeout="1800" location="bottom">Link copied</v-snackbar>
+    <v-snackbar v-model="resent" timeout="2400" location="bottom">Email sent</v-snackbar>
 
     <PublicOnboardingShareDialog v-model="showShare" :message="shareMessage" :link="leadLink" />
   </v-card>
 </template>
 
 <script lang="ts" setup>
+import { isLikelyEmail, needsEmailInput, passLink, type TPassRow } from "../../utils/self-service-links";
+
 const props = defineProps<{
   leadId: string;
   leadName: string;
+  leadEmail?: string | null;
   status: string;
   expectedCheckIn?: string | null;
-  members: { _id: string; name: string }[];
+  members: { _id: string; name: string; email?: string | null }[];
 }>();
 
+const { resendSelfServicePass } = usePublicVisitorOnboarding();
+
+/**
+ * Addresses typed into a row's inline field and accepted by the server. The
+ * props are a snapshot of the moment the group was created, so without this a
+ * row would keep asking for an address it has already been given.
+ */
+const sentEmails = ref<Record<string, string>>({});
+
+/**
+ * The lead and every member as one list - they get the identical row, and the
+ * lead is simply the first of them. Index 1 is where the "Members" caption
+ * goes.
+ */
+const rows = computed<TPassRow[]>(() =>
+  [
+    { _id: props.leadId, name: props.leadName, email: props.leadEmail ?? null },
+    ...props.members,
+  ].map((row) => ({ ...row, email: sentEmails.value[row._id] || row.email })),
+);
+
 function linkFor(id: string) {
   const origin = import.meta.client ? window.location.origin : "";
-  return `${origin}/public-view/visitor-onboarding/pass/${id}`;
+  return passLink(origin, id);
 }
 
 const leadLink = computed(() => linkFor(props.leadId));
 
+const resendState = reactive<Record<string, "idle" | "sending" | "sent">>({});
+const resendError = reactive<Record<string, string>>({});
+const emailDrafts = reactive<Record<string, string>>({});
+const showEmailInput = reactive<Record<string, boolean>>({});
+const resent = ref(false);
+
+/**
+ * One button, two jobs. A row that already has an address just sends. A row
+ * that has none opens its inline field first, and the second press - or Enter
+ * in the field - is the one that sends what was typed.
+ */
+async function onResend(row: TPassRow) {
+  // The inline Send button and the Enter key both land here, and neither is
+  // gone from the DOM while a send is in flight. Without this, a double press
+  // fires two requests for one row: the second reliably trips the server's own
+  // cooldown (it is stamped before the send), and if it settles last it
+  // overwrites a successful send with a cooldown error the visitor cannot act on.
+  if (resendState[row._id] === "sending") return;
+
+  const draft = String(emailDrafts[row._id] ?? "").trim();
+
+  if (needsEmailInput(row) && !isLikelyEmail(draft)) {
+    showEmailInput[row._id] = true;
+    resendError[row._id] = "";
+    return;
+  }
+
+  resendError[row._id] = "";
+  resendState[row._id] = "sending";
+
+  try {
+    // Only sent for a row with no address of its own - the server refuses to
+    // redirect one that has, so there is nothing to gain by sending it anyway.
+    await resendSelfServicePass(row._id, needsEmailInput(row) ? draft : undefined);
+    resendState[row._id] = "sent";
+    // "Sent" is a moment-in-time confirmation, not a permanent state - the
+    // button still works on a later press, so it must not be stuck reading
+    // "Sent" for the rest of the page's life. Guarded: a later press may have
+    // already moved the row on to "sending" by the time this fires.
+    setTimeout(() => {
+      if (resendState[row._id] === "sent") resendState[row._id] = "idle";
+    }, 3000);
+    if (needsEmailInput(row)) {
+      sentEmails.value = { ...sentEmails.value, [row._id]: draft };
+      showEmailInput[row._id] = false;
+    }
+    resent.value = true;
+  } catch (error: any) {
+    resendState[row._id] = "idle";
+    const statusCode = error?.statusCode ?? error?.response?.status;
+    // The server's own words: the cooldown says how many seconds are left, and
+    // a rejected address says so. Both are written to be read by a visitor.
+    // The per-IP limiter's 429 is the one response here with no JSON body -
+    // it answers plain text, so `error.message` would otherwise put the raw
+    // "[POST] ... 429 Too Many Requests" fetch error on the row.
+    resendError[row._id] =
+      error?.data?.message ||
+      (statusCode === 429
+        ? "Too many attempts. Please wait a moment and try again."
+        : error?.message) ||
+      "Unable to send that email. Please try again.";
+  }
+}
+
 const arrivalDateDisplay = computed(() => {
   if (!props.expectedCheckIn) return "";
   const d = new Date(props.expectedCheckIn);

package/composables/usePublicVisitorOnboarding.ts

@@ -74,6 +74,19 @@ export default function usePublicVisitorOnboarding() {
     );
   }
 
+  // The Resend button on the links card. `email` is only meaningful for a
+  // registration that carries no address of its own - the server refuses to
+  // redirect one that does, so sending it for an addressed row is harmless but
+  // pointless. A 429 (per-record cooldown, or the per-IP limiter) and a 400
+  // both arrive as a thrown error carrying the server's own message, which the
+  // card shows on the row.
+  function resendSelfServicePass(id: string, email?: string) {
+    return useNuxtApp().$api<{ message: string }>(
+      `/api/visitor-transactions/self-service/resend/${id}`,
+      { method: "POST", body: email ? { email } : {} },
+    );
+  }
+
   return {
     getOnboardingSettings,
     getBlocks,
@@ -83,5 +96,6 @@ export default function usePublicVisitorOnboarding() {
     getOvernightParkingHours,
     getSelfServicePreview,
     getSelfServiceQrCode,
+    resendSelfServicePass,
   };
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.2.2-staging.264",
+  "version": "4.2.2-staging.265",
   "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.",

package/utils/self-service-links.ts

@@ -0,0 +1,45 @@
+/**
+ * The pure part of the self-service links card.
+ *
+ * The card hands a lead contractor and each of their members a Copy Link /
+ * View Link / Resend row. Which of those rows still has to ask for an email
+ * address before Resend can do anything is the whole of the interaction, so it
+ * is decided here rather than inline in the template.
+ */
+
+export type TPassRow = {
+  _id: string;
+  name: string;
+  email?: string | null;
+};
+
+/**
+ * The public preview/QR page for one registration. `origin` is empty during
+ * the server render (there is no `window`), which correctly yields a relative
+ * link - the card only ever renders it into an href or the clipboard, both of
+ * which resolve it against the page the visitor is already on.
+ */
+export function passLink(origin: string, id: string): string {
+  return `${origin}/public-view/visitor-onboarding/pass/${id}`;
+}
+
+/**
+ * True when this row has nobody to send to yet, which is the card's cue to
+ * open its inline email field instead of sending. A whitespace-only value is
+ * no address - the API would refuse it.
+ */
+export function needsEmailInput(row: TPassRow): boolean {
+  return !String(row.email ?? "").trim();
+}
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+
+/**
+ * Deliberately the same loose check the API applies
+ * (`isLikelySelfServiceEmail` in @7365admin1/core), so the Send button is not
+ * offered for something the server will only refuse. The server stays the
+ * authority; this just avoids a pointless round trip.
+ */
+export function isLikelyEmail(value?: string | null): boolean {
+  return EMAIL_PATTERN.test(String(value ?? "").trim());
+}