@7365admin1/layer-common 4.0.4-staging.241 → 4.0.4-staging.243

package/components/PublicOnboarding/LocationFields.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <p class="text-caption text-medium-emphasis mb-2">Location</p>
+    <v-row no-gutters class="flex-nowrap">
+      <v-col cols="4" class="pr-1">
+        <v-autocomplete
+          v-model="block"
+          :items="blocksArray"
+          item-title="title"
+          item-value="value"
+          label="Block"
+          :loading="blocksLoading"
+          :rules="[requiredRule]"
+          density="comfortable"
+          variant="outlined"
+          hide-details="auto"
+          @update:model-value="onBlockChange"
+        />
+      </v-col>
+      <v-col cols="4" class="px-1">
+        <v-autocomplete
+          v-model="level"
+          :items="levelsArray"
+          item-title="title"
+          item-value="value"
+          label="Level"
+          :loading="levelsLoading"
+          :disabled="!block"
+          :rules="[requiredRule]"
+          density="comfortable"
+          variant="outlined"
+          hide-details="auto"
+          @update:model-value="onLevelChange"
+        />
+      </v-col>
+      <v-col cols="4" class="pl-1">
+        <v-autocomplete
+          v-model="unit"
+          :items="unitsArray"
+          item-title="title"
+          item-value="value"
+          label="Unit"
+          :loading="unitsLoading"
+          :disabled="!level"
+          :rules="[requiredRule]"
+          density="comfortable"
+          variant="outlined"
+          hide-details="auto"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const prop = defineProps({
+  site: { type: String, required: true },
+});
+
+const block = defineModel<string>("block", { default: "" });
+const level = defineModel<string>("level", { default: "" });
+const unit = defineModel<string>("unit", { default: "" });
+
+const requiredRule = (v: any) => (v !== null && v !== undefined && v !== "") || "Required";
+
+const { getBlocks, getLevels, getUnits } = usePublicVisitorOnboarding();
+
+const blocksArray = ref<{ title: string; value: string }[]>([]);
+const levelsArray = ref<{ title: string; value: string }[]>([]);
+const unitsArray = ref<{ title: string; value: string }[]>([]);
+const blocksLoading = ref(false);
+const levelsLoading = ref(false);
+const unitsLoading = ref(false);
+
+function toArray(res: any) {
+  return Array.isArray(res?.data) ? res.data : Array.isArray(res) ? res : [];
+}
+
+async function loadBlocks() {
+  blocksLoading.value = true;
+  try {
+    const res = await getBlocks(prop.site);
+    blocksArray.value = toArray(res).map((b: any) => ({ title: b.name, value: b._id }));
+  } finally {
+    blocksLoading.value = false;
+  }
+}
+
+/**
+ * Takes the new value as an argument rather than reading `block.value` -
+ * this handler and `v-model="block"` are both bound to the same
+ * `update:model-value` event on the same element, and listener order
+ * between them isn't guaranteed, so `block.value` can still be the OLD
+ * value at the moment this runs.
+ */
+async function onBlockChange(newBlock: string | null) {
+  level.value = "";
+  unit.value = "";
+  unitsArray.value = [];
+  levelsArray.value = [];
+  if (!newBlock) return;
+  levelsLoading.value = true;
+  try {
+    const res = await getLevels(prop.site, newBlock);
+    levelsArray.value = toArray(res).map((l: any) => ({ title: l.name, value: l._id }));
+  } finally {
+    levelsLoading.value = false;
+  }
+}
+
+async function onLevelChange(newLevel: string | null) {
+  unit.value = "";
+  unitsArray.value = [];
+  if (!block.value || !newLevel) return;
+  unitsLoading.value = true;
+  try {
+    const res = await getUnits(prop.site, block.value, newLevel);
+    unitsArray.value = toArray(res).map((u: any) => ({ title: u.name, value: u._id }));
+  } finally {
+    unitsLoading.value = false;
+  }
+}
+
+onMounted(loadBlocks);
+</script>

package/components/PublicOnboarding/TypeSelectCard.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-card class="pa-0" elevation="2">
+    <v-card-title class="px-4 py-3">Self-service onboarding portal</v-card-title>
+    <v-divider />
+    <v-list class="pa-3">
+      <v-list-item
+        v-for="option in options"
+        :key="option.value"
+        class="mb-2 rounded-lg"
+        style="border: 1px solid rgba(128,128,128,0.3)"
+        @click="emit('select', option.value)"
+      >
+        <template #prepend>
+          <v-avatar color="grey-darken-3" class="mr-3">
+            <v-icon color="white">{{ option.icon }}</v-icon>
+          </v-avatar>
+        </template>
+        <v-list-item-title>{{ option.label }}</v-list-item-title>
+        <template #append>
+          <v-icon>mdi-chevron-right</v-icon>
+        </template>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+
+<script lang="ts" setup>
+const emit = defineEmits(["select"]);
+
+const options = [
+  { label: "Visitor", value: "guest", icon: "mdi-walk" },
+  { label: "Contractor", value: "contractor", icon: "mdi-account-hard-hat-outline" },
+];
+</script>

package/components/PublicOnboarding/VisitorRegistrationForm.vue

@@ -0,0 +1,273 @@
+<template>
+  <v-form v-model="formValid" @submit.prevent="submit">
+    <v-row no-gutters>
+      <v-col cols="12" class="mb-4">
+        <p class="text-caption text-medium-emphasis mb-2">Visitor Arrival</p>
+        <InputDatePicker v-model="visitor.expectedCheckIn" placeholder="DD/MM/YYYY" :rules="[requiredRule]" />
+      </v-col>
+
+      <v-col cols="6" class="mb-4 pr-1">
+        <v-text-field
+          v-model="visitor.arrivalTime"
+          type="time"
+          label="Time"
+          density="comfortable"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+      <v-col cols="6" class="mb-4 pl-1">
+        <v-text-field
+          v-model.number="visitor.duration"
+          type="number"
+          min="0"
+          label="Duration Hour(s)"
+          density="comfortable"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-2">
+        <p class="text-caption text-medium-emphasis">Visitor Information</p>
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-text-field
+          v-model="visitor.name"
+          label="Name"
+          density="comfortable"
+          variant="outlined"
+          :rules="[requiredRule]"
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-1">
+        <InputPhoneNumberV2 v-model="visitor.contact" density="comfortable" :rules="[requiredRule]" />
+      </v-col>
+      <v-col v-if="isContactPickerSupported" cols="12" class="mb-4 text-right">
+        <a href="#" class="text-caption" @click.prevent="fillFromContactPicker">
+          or select contact in your phone book
+        </a>
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <PublicOnboardingLocationFields
+          :site="site"
+          v-model:block="visitor.block"
+          v-model:level="visitor.level"
+          v-model:unit="visitor.unit"
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-text-field
+          v-model="visitor.email"
+          type="email"
+          label="Email"
+          density="comfortable"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <div class="d-flex align-center justify-space-between pa-3 bordered-field">
+          <span>Overnight Parking</span>
+          <v-switch
+            :model-value="visitor.isOvernightParking"
+            color="primary"
+            base-color="grey-lighten-1"
+            hide-details
+            @update:model-value="onToggleOvernightParking"
+          />
+        </div>
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <div class="d-flex align-center justify-space-between pa-3 bordered-field">
+          <span>No. of passenger (Optional)</span>
+          <div class="d-flex align-center ga-3">
+            <v-btn icon size="small" variant="outlined" :disabled="!visitor.numberOfPassengers" @click="visitor.numberOfPassengers = Math.max(0, (visitor.numberOfPassengers || 0) - 1)">
+              <v-icon>mdi-minus</v-icon>
+            </v-btn>
+            <span>{{ visitor.numberOfPassengers || 0 }}</span>
+            <v-btn icon size="small" variant="outlined" @click="visitor.numberOfPassengers = (visitor.numberOfPassengers || 0) + 1">
+              <v-icon>mdi-plus</v-icon>
+            </v-btn>
+          </div>
+        </div>
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-textarea
+          v-model="visitor.purpose"
+          label="Enter purpose of visit"
+          density="comfortable"
+          variant="outlined"
+          rows="4"
+          auto-grow
+        />
+      </v-col>
+
+      <v-col v-if="submitError" cols="12" class="mb-4">
+        <v-alert type="error" variant="tonal" density="compact">{{ submitError }}</v-alert>
+      </v-col>
+
+      <v-col cols="12">
+        <v-btn color="primary" variant="flat" block size="large" :loading="submitting" :disabled="!formValid" type="submit">
+          Submit
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <v-dialog v-model="showOvernightDialog" max-width="420" persistent>
+      <v-card class="pa-6">
+        <p class="text-body-1 text-center mb-4">
+          Overnight Parking requests outside our below business hours will not
+          be guaranteed a response
+        </p>
+        <div class="mb-4">
+          <div v-for="day in overnightScheduleDisplay" :key="day.label" class="d-flex justify-space-between text-body-2 py-1">
+            <span class="text-capitalize">{{ day.label }}</span>
+            <span>{{ day.text }}</span>
+          </div>
+        </div>
+        <v-row no-gutters class="ga-2">
+          <v-col>
+            <v-btn color="success" variant="tonal" block @click="confirmOvernightParking(true)">Yes</v-btn>
+          </v-col>
+          <v-col>
+            <v-btn color="error" variant="tonal" block @click="confirmOvernightParking(false)">No</v-btn>
+          </v-col>
+        </v-row>
+      </v-card>
+    </v-dialog>
+  </v-form>
+</template>
+
+<script lang="ts" setup>
+const prop = defineProps({
+  site: { type: String, required: true },
+});
+
+const emit = defineEmits(["done"]);
+
+const { createVisitor, getOvernightParkingHours } = usePublicVisitorOnboarding();
+const { isSupported: isContactPickerSupported, pickContact } = useContactPicker();
+
+const requiredRule = (v: any) => (v !== null && v !== undefined && v !== "") || "This field is required";
+
+const visitor = reactive({
+  expectedCheckIn: null as string | null,
+  arrivalTime: "",
+  duration: null as number | null,
+  name: "",
+  contact: "",
+  block: "",
+  level: "",
+  unit: "",
+  email: "",
+  isOvernightParking: false,
+  numberOfPassengers: 0,
+  purpose: "",
+});
+
+const formValid = ref(false);
+const submitting = ref(false);
+const submitError = ref("");
+
+async function fillFromContactPicker() {
+  const contact = await pickContact();
+  if (!contact) return;
+  if (contact.name) visitor.name = contact.name;
+  if (contact.tel) visitor.contact = contact.tel;
+}
+
+const DAY_LABELS = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"];
+const overnightSchedule = ref<Record<string, any>>({});
+const showOvernightDialog = ref(false);
+
+const overnightScheduleDisplay = computed(() =>
+  DAY_LABELS.map((day) => {
+    const d = overnightSchedule.value[day];
+    return {
+      label: day,
+      text: d?.isEnabled && d?.startTime && d?.endTime ? `${d.startTime} - ${d.endTime}` : "Closed",
+    };
+  }),
+);
+
+async function onToggleOvernightParking(value: boolean | null) {
+  if (!value) {
+    visitor.isOvernightParking = false;
+    return;
+  }
+  try {
+    const res: any = await getOvernightParkingHours(prop.site);
+    overnightSchedule.value = res?.data ?? res ?? {};
+  } catch {
+    overnightSchedule.value = {};
+  }
+  showOvernightDialog.value = true;
+}
+
+function confirmOvernightParking(confirmed: boolean) {
+  visitor.isOvernightParking = confirmed;
+  showOvernightDialog.value = false;
+}
+
+async function submit() {
+  submitError.value = "";
+  submitting.value = true;
+  try {
+    const payload: Record<string, any> = {
+      type: "guest",
+      name: visitor.name,
+      contact: visitor.contact,
+      email: visitor.email || undefined,
+      block: visitor.block || undefined,
+      level: visitor.level || undefined,
+      unit: visitor.unit || undefined,
+      expectedCheckIn: visitor.expectedCheckIn || undefined,
+      arrivalTime: visitor.arrivalTime || undefined,
+      duration: visitor.duration ?? undefined,
+      isOvernightParking: visitor.isOvernightParking,
+      numberOfPassengers: visitor.numberOfPassengers || undefined,
+      purpose: visitor.purpose || undefined,
+    };
+
+    const res: any = await createVisitor(prop.site, payload);
+    emit("done", res?.status || "pending", res?._id);
+  } catch (error: any) {
+    submitError.value =
+      error?.data?.message || error?.message || "Unable to submit your registration. Please try again.";
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>
+
+<style scoped>
+/* Matches the surrounding v-text-field/v-select "outlined" variant's own
+   border exactly (Vuetify's field border color/opacity/radius tokens),
+   rather than an approximated color - these two rows aren't real Vuetify
+   fields, so without this they were the only inconsistent borders on the
+   form (one had a mismatched color/radius, the other had none at all). */
+.bordered-field {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+}
+
+/* InputDatePicker/InputPhoneNumberV2 hardcode `.filter-field` on their own
+   internal v-text-field/v-select, independent of anything on this form's
+   own markup - that class sets border-radius: var(--r-inner) globally
+   (assets/css/screens.css), which is why they never matched the other
+   plain fields' 4px default no matter what class this component's own
+   elements had. Scoped :deep() here targets just their rendering within
+   this form (not the shared components' other usages elsewhere in the
+   app) with higher specificity than that global rule. */
+:deep(.filter-field .v-field) {
+  border-radius: 4px;
+}
+</style>