@7365admin1/layer-common 4.43.1 → 4.44.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 4.44.0
+
+### Minor Changes
+
+- 8d20975: Notification Settings: Email per module, with an "Email address for notifications" card (send code, verify, resend, change). New `/notifications/open` page turns a notification email link into the right page, using the bell's own target table.
+
 ## 4.43.1
 
 ### Patch Changes
@@ -1496,11 +1502,11 @@
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                              GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                              GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                              owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                              staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/components/NotificationBell.vue

@@ -137,7 +137,7 @@ import {
   timeAgo,
   type TInboxItem,
 } from "../utils/notification-inbox";
-import { chooseNavigation, notificationTarget } from "../utils/notification-target";
+import { appUrlsFrom, chooseNavigation, notificationTarget } from "../utils/notification-target";
 
 /**
  * The top-bar notification feed for the web, in every signed-in app.
@@ -331,17 +331,7 @@ function hasLocalPage(path: string) {
 
 /** Every web app's URL, keyed like `TAppKey`, from the layer's runtime config. */
 function appUrls() {
-  const p = appConfig?.public ?? {};
-  return {
-    org: String(p.APP_ORG ?? ""),
-    security: String(p.APP_SECURITY ?? ""),
-    "property-management": String(p.APP_PROPERTY_MANAGEMENT ?? ""),
-    hygiene: String(p.APP_HYGIENE ?? ""),
-    "mechanical-electrical": String(p.APP_MECHANICAL_ELECTRICAL ?? ""),
-    "pest-control": String(p.APP_PEST_CONTROL ?? ""),
-    landscaping: String(p.APP_LANDSCAPING ?? ""),
-    "pool-maintenance": String(p.APP_POOL_MAINTENANCE ?? ""),
-  };
+  return appUrlsFrom(appConfig?.public as Record<string, unknown>);
 }
 
 /** The decision is `chooseNavigation` (unit-tested); this only carries it out. */

package/components/NotificationSettings.vue

@@ -56,6 +56,90 @@
             </AppCard>
           </v-col>
 
+          <!-- where notification emails go. Only when the server offers email to
+               this person; a module's Email switch does nothing until the
+               address below is verified. -->
+          <v-col v-if="email?.available" cols="12" class="mt-4">
+            <AppCard>
+              <div class="pa-6">
+                <div class="screen-card-title">Email address for notifications</div>
+
+                <!-- verified, nothing waiting -->
+                <template v-if="emailMode === 'verified'">
+                  <div class="screen-hint summary-line mt-1">
+                    Emails go to <strong>{{ email.address }}</strong>.
+                  </div>
+                  <AppButton variant="ghost" class="mt-4" :disabled="emailBusy" @click="startChange">
+                    Change
+                  </AppButton>
+                </template>
+
+                <!-- a code is on its way -->
+                <template v-else-if="emailMode === 'pending'">
+                  <div class="screen-hint summary-line mt-1">
+                    We sent a 6-digit code to <strong>{{ email.pendingAddress }}</strong>.
+                    Enter it here.
+                  </div>
+                  <div v-if="email.verified" class="screen-hint summary-line mt-1">
+                    Emails still go to {{ email.address }} until then.
+                  </div>
+                  <div class="d-flex flex-wrap align-end ga-3 mt-4">
+                    <AppField
+                      v-model="codeInput"
+                      label="Code"
+                      inputmode="numeric"
+                      autocomplete="one-time-code"
+                      maxlength="6"
+                      aria-label="6-digit code"
+                      :disabled="emailBusy"
+                      class="email-code"
+                    />
+                    <AppButton :disabled="emailBusy || codeInput.trim().length !== 6" @click="verifyCode">
+                      Verify
+                    </AppButton>
+                    <AppButton variant="ghost" :disabled="emailBusy" @click="sendCode(email.pendingAddress || '')">
+                      Resend code
+                    </AppButton>
+                    <AppButton variant="ghost" :disabled="emailBusy" @click="startChange">
+                      Change
+                    </AppButton>
+                  </div>
+                </template>
+
+                <!-- no address yet, or changing it -->
+                <template v-else>
+                  <div class="d-flex flex-wrap align-end ga-3 mt-4">
+                    <AppField
+                      v-model="addressInput"
+                      label="Email address"
+                      type="email"
+                      autocomplete="email"
+                      aria-label="Email address for notifications"
+                      :disabled="emailBusy"
+                      class="email-address"
+                    />
+                    <AppButton :disabled="emailBusy || !addressInput.trim()" @click="sendCode(addressInput)">
+                      Send code
+                    </AppButton>
+                    <AppButton
+                      v-if="changing"
+                      variant="ghost"
+                      :disabled="emailBusy"
+                      @click="changing = false"
+                    >
+                      Cancel
+                    </AppButton>
+                  </div>
+                </template>
+
+                <div v-if="emailError" class="email-error mt-3" role="alert">{{ emailError }}</div>
+                <div v-if="!email.verified" class="screen-hint summary-line mt-3">
+                  Emails start once your address is verified.
+                </div>
+              </div>
+            </AppCard>
+          </v-col>
+
           <!-- one panel per module, collapsed by default so a person with many
                modules gets a short list rather than a wall of switches -->
           <v-col cols="12" class="mt-4">
@@ -174,9 +258,18 @@
 import type {
   TNotificationCategorySetting,
   TNotificationChannelSetting,
+  TNotificationEmailSetting,
 } from "../composables/useNotificationPreference";
 
-const { getPreferences, savePreferences } = useNotificationPreference();
+const { getPreferences, savePreferences, requestEmailCode, verifyEmailCode } =
+  useNotificationPreference();
+
+const email = ref<TNotificationEmailSetting | null>(null);
+const addressInput = ref("");
+const codeInput = ref("");
+const changing = ref(false);
+const emailBusy = ref(false);
+const emailError = ref("");
 
 const categories = ref<TNotificationCategorySetting[]>([]);
 const loading = ref(true);
@@ -193,8 +286,20 @@ let confirmAccept: (() => void) | null = null;
 const switchableIn = (category: TNotificationCategorySetting) =>
   category.channels.filter((c) => c.supported);
 
+/**
+ * In the app and Phone alerts. "All on" is measured on these alone: Email is
+ * opt-in, so a module with Email off is still "all on" - and no bulk "on"
+ * button ever turns Email on (nobody gets email they did not pick one by one).
+ */
+const alertChannelsIn = (category: TNotificationCategorySetting) =>
+  switchableIn(category).filter((c) => c.key !== "email");
+
+/** What a bulk switch moves: every channel when turning off, never Email when turning on. */
+const bulkChannelsIn = (category: TNotificationCategorySetting, value: boolean) =>
+  value ? alertChannelsIn(category) : switchableIn(category);
+
 const categoryAllOn = (category: TNotificationCategorySetting) =>
-  switchableIn(category).every((c) => c.enabled);
+  alertChannelsIn(category).every((c) => c.enabled);
 
 const allOn = computed(
   () =>
@@ -230,6 +335,7 @@ async function load() {
   try {
     const res = await getPreferences();
     categories.value = res.data.categories;
+    setEmail(res.data.email);
   } catch {
     loadError.value =
       "We could not load your notification settings. Please refresh the page and try again.";
@@ -247,6 +353,7 @@ async function persist(previous: TNotificationCategorySetting[]) {
   try {
     const res = await savePreferences({ channels: [], categories: categories.value });
     categories.value = res.data.categories;
+    if (res.data.email) setEmail(res.data.email);
     notice.value = "Saved.";
   } catch {
     categories.value = previous;
@@ -276,7 +383,8 @@ function onToggle(
   const commit = () => apply(() => (channel.enabled = value));
 
   // switching a safety alert OFF is the only thing worth stopping to confirm
-  if (category.safety && !value) {
+  // Email is opt-in, so turning it off needs no warning.
+  if (category.safety && !value && channel.key !== "email") {
     confirmText.value = safetyOffConfirmation(category.label, channel.label);
     confirmAccept = commit;
     confirmOpen.value = true;
@@ -289,7 +397,7 @@ function onToggle(
 function setCategory(category: TNotificationCategorySetting, value: boolean) {
   const commit = () =>
     apply(() => {
-      for (const channel of switchableIn(category)) channel.enabled = value;
+      for (const channel of bulkChannelsIn(category, value)) channel.enabled = value;
     });
 
   if (category.safety && !value) {
@@ -306,7 +414,7 @@ function setAll(value: boolean) {
   const commit = () =>
     apply(() => {
       for (const category of categories.value) {
-        for (const channel of switchableIn(category)) channel.enabled = value;
+        for (const channel of bulkChannelsIn(category, value)) channel.enabled = value;
       }
     });
 
@@ -320,6 +428,67 @@ function setAll(value: boolean) {
   commit();
 }
 
+/** "pending" and "verified" show the address; "enter" shows the field. */
+const emailMode = computed(() => {
+  if (changing.value || !email.value) return "enter";
+  if (email.value.pendingAddress) return "pending";
+  if (email.value.verified) return "verified";
+  return "enter";
+});
+
+function setEmail(next?: TNotificationEmailSetting) {
+  email.value = next ?? null;
+  if (!addressInput.value) {
+    addressInput.value = next?.address || next?.pendingAddress || next?.accountEmail || "";
+  }
+}
+
+/** The server's own sentence when it has one ("That code is not right..."). */
+function messageOf(err: any, fallback: string) {
+  return String(err?.data?.message || err?.response?._data?.message || fallback);
+}
+
+function startChange() {
+  changing.value = true;
+  emailError.value = "";
+  addressInput.value = email.value?.pendingAddress || email.value?.address || email.value?.accountEmail || "";
+}
+
+async function sendCode(address: string) {
+  emailBusy.value = true;
+  emailError.value = "";
+  try {
+    const res = await requestEmailCode(address.trim());
+    categories.value = res.data.categories;
+    setEmail(res.data.email);
+    changing.value = false;
+    codeInput.value = "";
+    notice.value = res.data.email?.pendingAddress ? "Code sent. Check your email." : "Saved.";
+    noticeOpen.value = true;
+  } catch (err) {
+    emailError.value = messageOf(err, "We could not send the code. Please try again.");
+  } finally {
+    emailBusy.value = false;
+  }
+}
+
+async function verifyCode() {
+  emailBusy.value = true;
+  emailError.value = "";
+  try {
+    const res = await verifyEmailCode(codeInput.value.trim());
+    categories.value = res.data.categories;
+    setEmail(res.data.email);
+    codeInput.value = "";
+    notice.value = "Email address verified.";
+    noticeOpen.value = true;
+  } catch (err) {
+    emailError.value = messageOf(err, "We could not check that code. Please try again.");
+  } finally {
+    emailBusy.value = false;
+  }
+}
+
 function acceptConfirm() {
   confirmOpen.value = false;
   confirmAccept?.();
@@ -354,6 +523,20 @@ onMounted(load);
   color: var(--text);
 }
 
+.email-address {
+  flex: 1 1 260px;
+  max-width: 360px;
+}
+
+.email-code {
+  width: 140px;
+}
+
+.email-error {
+  font-size: var(--fs-breadcrumb);
+  color: rgb(var(--v-theme-error));
+}
+
 .channel-note {
   font-family: var(--font-sans);
   font-size: var(--fs-breadcrumb);

package/composables/useNotificationPreference.ts

@@ -32,17 +32,59 @@ export type TNotificationCategorySetting = {
   channels: TNotificationChannelSetting[];
 };
 
+/**
+ * Where notification emails go. Sent only because this screen asks with
+ * `?include=email`; `available: false` means email is not offered to this
+ * person yet and the screen shows nothing about it.
+ */
+export type TNotificationEmailSetting = {
+  available: boolean;
+  /** the VERIFIED address emails go to */
+  address: string | null;
+  verified: boolean;
+  verifiedAt: string | null;
+  /** an address waiting for its 6-digit code */
+  pendingAddress: string | null;
+  /** the sign-in address, suggested when nothing is set */
+  accountEmail: string;
+};
+
 export type TNotificationPreferences = {
   channels: Array<{ key: string; label: string }>;
   categories: TNotificationCategorySetting[];
+  email?: TNotificationEmailSetting;
 };
 
 const EMPTY: TNotificationPreferences = { channels: [], categories: [] };
 
+const PREF_URL = "/api/notification-preferences";
+
+/**
+ * The PUT body: the switches that are OFF for in-app/phone (absent is on), and
+ * the modules with Email ON (email is opt-in, so it is sent as its own list).
+ */
+export function preferencesBody(preferences: Pick<TNotificationPreferences, "categories">) {
+  const off = preferences.categories.flatMap((category) =>
+    category.channels
+      .filter((channel) => channel.key !== "email" && channel.supported && !channel.enabled)
+      .map((channel) => ({ category: category.key, channel: channel.key })),
+  );
+  // No Email row on screen (email not offered to this person): send no list,
+  // so the server leaves whatever is saved alone.
+  const hasEmail = preferences.categories.some((c) => c.channels.some((ch) => ch.key === "email"));
+  if (!hasEmail) return { off };
+  const email = preferences.categories
+    .filter((category) =>
+      category.channels.some((c) => c.key === "email" && c.supported && c.enabled),
+    )
+    .map((category) => category.key);
+  return { off, email };
+}
+
 export default function useNotificationPreference() {
   function getPreferences() {
     return useNuxtApp().$api<{ data: TNotificationPreferences }>(
-      "/api/notification-preferences",
+      `${PREF_URL}?include=email`,
       { method: "GET" },
     );
   }
@@ -55,19 +97,35 @@ export default function useNotificationPreference() {
    * all, and behaves exactly as they did before this screen existed.
    */
   function savePreferences(preferences: TNotificationPreferences) {
-    const off = preferences.categories.flatMap((category) =>
-      category.channels
-        .filter((channel) => channel.supported && !channel.enabled)
-        .map((channel) => ({ category: category.key, channel: channel.key })),
-    );
-
     return useNuxtApp().$api<{ data: TNotificationPreferences }>(
-      "/api/notification-preferences",
-      { method: "PUT", body: { off } },
+      `${PREF_URL}?include=email`,
+      { method: "PUT", body: preferencesBody(preferences) },
     );
   }
 
-  return { getPreferences, savePreferences, EMPTY_PREFERENCES: EMPTY };
+  /** Email a 6-digit code to the address the person wants emails at. */
+  function requestEmailCode(address: string) {
+    return useNuxtApp().$api<{ data: TNotificationPreferences }>(`${PREF_URL}/email`, {
+      method: "POST",
+      body: { address },
+    });
+  }
+
+  /** The code from that email. Verifies the address; emails start after this. */
+  function verifyEmailCode(code: string) {
+    return useNuxtApp().$api<{ data: TNotificationPreferences }>(`${PREF_URL}/email/verify`, {
+      method: "POST",
+      body: { code },
+    });
+  }
+
+  return {
+    getPreferences,
+    savePreferences,
+    requestEmailCode,
+    verifyEmailCode,
+    EMPTY_PREFERENCES: EMPTY,
+  };
 }
 
 /**

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.43.1",
+  "version": "4.44.0",
   "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/pages/notifications/open.vue

@@ -0,0 +1,85 @@
+<template>
+  <v-row no-gutters class="pa-8" justify="center">
+    <v-col cols="12" md="6">
+      <v-skeleton-loader v-if="!nowhere" type="list-item-two-line" />
+      <AppCard v-else>
+        <div class="pa-6">
+          <div class="screen-card-title">Open it in the app</div>
+          <div class="screen-hint mt-2">
+            This opens in the iService365 app on your phone.
+          </div>
+          <AppButton class="mt-6" @click="router.replace('/notification-settings')">
+            Notification settings
+          </AppButton>
+        </div>
+      </AppCard>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+/**
+ * Where the "Open in iService365" button in a notification email lands.
+ *
+ * The email carries what the notification is about (`?kind=&id=&site=&org=&app=`,
+ * core `openLink`); this page turns it into the page for it with the SAME table
+ * and the same rules as the bell (`notificationTarget` + `chooseNavigation`), so
+ * there is one list of destinations. A link grants nothing: the page it opens
+ * still checks the person may see it.
+ */
+import {
+  appUrlsFrom,
+  chooseNavigation,
+  notificationTarget,
+  rowFromEmailLink,
+} from "../../utils/notification-target";
+
+definePageMeta({
+  middleware: ["01-auth"],
+});
+
+const { authenticate, currentUser } = useLocalAuth();
+const route = useRoute();
+const router = useRouter();
+const appConfig = useRuntimeConfig();
+const nowhere = ref(false);
+authenticate();
+
+/** The link's organisation, else the person's own default one (as the bell does). */
+async function organizationFor(fromLink: string): Promise<string> {
+  if (fromLink) return fromLink;
+  if (currentUser.value?.defaultOrg) return String(currentUser.value.defaultOrg);
+  try {
+    const { cookieConfig } = appConfig.public as any;
+    const id = useCookie("user", cookieConfig).value;
+    const user = await useNuxtApp().$api<Record<string, any>>(`/api/users/id/${id}`);
+    return String(user?.defaultOrg ?? "");
+  } catch {
+    return "";
+  }
+}
+
+function hasLocalPage(path: string) {
+  try {
+    const resolved = router.resolve(path);
+    return resolved.matched.length > 0 && !resolved.matched.some((m) => m.path.includes("pathMatch"));
+  } catch {
+    return false;
+  }
+}
+
+onMounted(async () => {
+  const { row, organization } = rowFromEmailLink(route.query as Record<string, unknown>);
+  const nav = chooseNavigation(
+    notificationTarget(row, { organization: await organizationFor(organization) }),
+    {
+      hasRoute: (name) => typeof router.hasRoute === "function" && router.hasRoute(name),
+      hasPage: hasLocalPage,
+      appUrls: appUrlsFrom(appConfig?.public as Record<string, unknown>),
+    },
+  );
+  if (nav?.type === "href") return window.location.replace(nav.href);
+  if (nav?.type === "route") return router.replace(nav.to as any).catch(() => (nowhere.value = true));
+  nowhere.value = true;
+});
+</script>

package/utils/notification-target.ts

@@ -342,3 +342,43 @@ export function chooseNavigation(
   const href = externalTargetUrl(target, app.appUrls);
   return href ? { type: "href", href } : null;
 }
+
+/** Every web app's URL, keyed like `TAppKey`, from the layer's public runtime config. */
+export function appUrlsFrom(p: Record<string, unknown> | null | undefined): Record<TAppKey, string> {
+  const c = p ?? {};
+  return {
+    org: String(c.APP_ORG ?? ""),
+    security: String(c.APP_SECURITY ?? ""),
+    "property-management": String(c.APP_PROPERTY_MANAGEMENT ?? ""),
+    hygiene: String(c.APP_HYGIENE ?? ""),
+    "mechanical-electrical": String(c.APP_MECHANICAL_ELECTRICAL ?? ""),
+    "pest-control": String(c.APP_PEST_CONTROL ?? ""),
+    landscaping: String(c.APP_LANDSCAPING ?? ""),
+    "pool-maintenance": String(c.APP_POOL_MAINTENANCE ?? ""),
+  };
+}
+
+/**
+ * The row a notification-email link stands for. The email's button carries
+ * `?kind=&id=&site=&org=&app=` (core `openLink`); this turns that back into
+ * the same shape a bell row has, so the same table decides where it lands.
+ */
+export function rowFromEmailLink(query: Record<string, unknown>): {
+  row: TTargetRow;
+  organization: string;
+} {
+  const one = (k: string) => {
+    const v = query?.[k];
+    return String((Array.isArray(v) ? v[0] : v) ?? "").trim();
+  };
+  const kind = one("kind");
+  const id = one("id");
+  return {
+    row: {
+      params: kind || id ? { kind, id, ...(one("org") ? { org: one("org") } : {}) } : null,
+      siteId: one("site") || null,
+      appSlug: one("app"),
+    },
+    organization: one("org"),
+  };
+}