@genesislcap/pbc-notify-ui 14.487.0 → 14.488.0

package/src/components/foundation-inbox/inbox-base/inbox-base.ts

@@ -16,11 +16,18 @@ import debounce from 'lodash.debounce';
 import { Subscription } from 'rxjs';
 import { AlertService } from '../../../services/alert.service';
 import { FoundationInboxService, INBOX_PAGE_SIZE } from '../../../services/inbox.service';
+import {
+  NotifyChannel,
+  NotifyRoute,
+  NotifyRouteService,
+} from '../../../services/notify-route.service';
 import { RuleService } from '../../../services/rule.service';
 import { TemplateService } from '../../../services/template.service';
 import { logger } from '../../../utils';
+import { NotifyPermission } from '../../../utils/notifyPermissions';
 import { showNotificationError } from '../../foundation-notification-dashboard/notification-dashboard.utils';
 import { Alert, InboxTab, NotificationRuleTemplateReply, Rule, RuleTemplate } from '../inbox.types';
+import { extractTopic } from '../inbox.utils';
 
 dayjs.extend(utc);
 
@@ -54,6 +61,15 @@ export class FoundationInboxBase extends GenesisElement {
   @observable templates: RuleTemplate[] = [];
   @observable templatesFilter: RuleTemplate[] = [];
 
+  @NotifyRouteService routeService: NotifyRouteService;
+  @observable channelAvailability: Record<string, Record<NotifyChannel, boolean>> = {};
+  @observable userChannelRoutes: Record<string, Record<NotifyChannel, NotifyRoute | null>> = {};
+  @observable channelTogglePending: Record<string, Partial<Record<NotifyChannel, boolean>>> = {};
+
+  // Bumped on each refreshChannelRoutes call so a slower earlier run can detect it
+  // has been superseded and skip writing stale results.
+  private channelRoutesQueryId = 0;
+
   @observable searchAlertLog: string = null;
   @observable titleSearchValue: string = null;
   @observable bodySearchValue: string = null;
@@ -297,9 +313,67 @@ export class FoundationInboxBase extends GenesisElement {
     });
     this.subscribedTemplateIds = subscribed;
 
+    await this.refreshChannelRoutes();
+
     this.templatesChanged();
   }
 
+  private async refreshChannelRoutes() {
+    if (!this.auth.currentUser?.hasPermission(NotifyPermission.NotificationRouteView)) {
+      this.channelAvailability = {};
+      this.userChannelRoutes = {};
+      return;
+    }
+
+    const username = this.auth.currentUser?.username;
+    this.channelRoutesQueryId += 1;
+    const queryId = this.channelRoutesQueryId;
+
+    // Two snapshots total (one per channel) instead of two per template: fetch every
+    // route once and match it to templates by TOPIC_MATCH in memory below.
+    const [popupRoutes, emailRoutes] = await Promise.all([
+      this.routeService.getAllRoutes('popup'),
+      this.routeService.getAllRoutes('email'),
+    ]);
+
+    // A newer refresh started while this one was in flight; its data is fresher, so
+    // drop ours rather than clobber it with a now-stale snapshot.
+    if (queryId !== this.channelRoutesQueryId) {
+      return;
+    }
+
+    const availability: Record<string, Record<NotifyChannel, boolean>> = {};
+    const userRoutes: Record<string, Record<NotifyChannel, NotifyRoute | null>> = {};
+
+    this.templates.forEach((template) => {
+      const topic = extractTopic(template.RESULT_EXPRESSION);
+      if (!topic) {
+        availability[template.ID] = { popup: false, email: false };
+        userRoutes[template.ID] = { popup: null, email: null };
+        return;
+      }
+
+      const popupForTopic = popupRoutes.filter((route) => route.TOPIC_MATCH === topic);
+      const emailForTopic = emailRoutes.filter((route) => route.TOPIC_MATCH === topic);
+
+      availability[template.ID] = {
+        popup: popupForTopic.length > 0,
+        email: emailForTopic.length > 0,
+      };
+      userRoutes[template.ID] = {
+        popup: popupForTopic.find((route) => this.isOwnRoute(route, username)) ?? null,
+        email: emailForTopic.find((route) => this.isOwnRoute(route, username)) ?? null,
+      };
+    });
+
+    this.channelAvailability = availability;
+    this.userChannelRoutes = userRoutes;
+  }
+
+  private isOwnRoute(route: NotifyRoute, username: string): boolean {
+    return !!username && route.ENTITY_ID_TYPE === 'USER_NAME' && route.ENTITY_ID === username;
+  }
+
   findSubscribedRule(template: RuleTemplate): Rule | undefined {
     return this.rules.find((rule) => rule.NAME === template.NAME);
   }
@@ -308,6 +382,94 @@ export class FoundationInboxBase extends GenesisElement {
     return !!this.subscribedTemplateIds[template.ID];
   }
 
+  isChannelAvailable(template: RuleTemplate, channel: NotifyChannel): boolean {
+    return !!this.channelAvailability[template.ID]?.[channel];
+  }
+
+  isChannelEnabled(template: RuleTemplate, channel: NotifyChannel): boolean {
+    return !!this.userChannelRoutes[template.ID]?.[channel];
+  }
+
+  private isLastEnabledChannel(template: RuleTemplate, channel: NotifyChannel): boolean {
+    const otherChannel: NotifyChannel = channel === 'popup' ? 'email' : 'popup';
+    return !(
+      this.isChannelAvailable(template, otherChannel) &&
+      this.isChannelEnabled(template, otherChannel)
+    );
+  }
+
+  isChannelTogglePending(template: RuleTemplate, channel: NotifyChannel): boolean {
+    return !!this.channelTogglePending[template.ID]?.[channel];
+  }
+
+  private setChannelRoute(templateId: string, channel: NotifyChannel, route: NotifyRoute | null) {
+    this.userChannelRoutes = {
+      ...this.userChannelRoutes,
+      [templateId]: { ...this.userChannelRoutes[templateId], [channel]: route },
+    };
+    this.channelAvailability = {
+      ...this.channelAvailability,
+      [templateId]: {
+        ...this.channelAvailability[templateId],
+        [channel]: this.channelAvailability[templateId]?.[channel] || !!route,
+      },
+    };
+  }
+
+  private setChannelTogglePending(templateId: string, channel: NotifyChannel, pending: boolean) {
+    this.channelTogglePending = {
+      ...this.channelTogglePending,
+      [templateId]: { ...this.channelTogglePending[templateId], [channel]: pending },
+    };
+  }
+
+  async toggleChannel(template: RuleTemplate, channel: NotifyChannel) {
+    if (!this.isTemplateSubscribed(template) || this.isChannelTogglePending(template, channel)) {
+      return;
+    }
+
+    const topic = extractTopic(template.RESULT_EXPRESSION);
+    if (!topic) {
+      return;
+    }
+
+    const existingRoute = this.userChannelRoutes[template.ID]?.[channel];
+
+    if (existingRoute && this.isLastEnabledChannel(template, channel)) {
+      showNotificationError([
+        {
+          CODE: 'VALIDATION_ERROR',
+          TEXT: 'At least one channel (Pop-up or Email) must stay enabled.',
+        },
+      ]);
+      return;
+    }
+
+    // Flip the chip instantly and let the network call catch up in the background —
+    // waiting on the round trip before updating the UI reads as an unresponsive click.
+    const optimisticRoute = existingRoute ? null : ({ NOTIFY_ROUTE_ID: 'pending' } as NotifyRoute);
+    this.setChannelRoute(template.ID, channel, optimisticRoute);
+    this.setChannelTogglePending(template.ID, channel, true);
+
+    const username = this.auth.currentUser?.username;
+    let updatedRoute: NotifyRoute | null;
+    try {
+      updatedRoute = existingRoute
+        ? await this.routeService
+            .deleteRoute(channel, existingRoute.NOTIFY_ROUTE_ID)
+            .then(() => null)
+        : await this.routeService.createUserRoute(channel, topic, username);
+    } catch (error) {
+      this.setChannelRoute(template.ID, channel, existingRoute ?? null);
+      this.setChannelTogglePending(template.ID, channel, false);
+      showNotificationError([{ CODE: 'ROUTE_ERROR', TEXT: (error as Error).message }]);
+      return;
+    }
+
+    this.setChannelRoute(template.ID, channel, updatedRoute);
+    this.setChannelTogglePending(template.ID, channel, false);
+  }
+
   async handleTemplateToggle(template: RuleTemplate, event: Event) {
     const target = event.target as HTMLInputElement;
     const checked = target.checked;
@@ -327,6 +489,7 @@ export class FoundationInboxBase extends GenesisElement {
       if (parameters.length === 0) {
         await this.ruleService.subscribeRule(template.ID, {});
         await this.refreshSubscribeData();
+        await this.ensureDefaultChannel(template);
         return;
       }
 
@@ -358,6 +521,49 @@ export class FoundationInboxBase extends GenesisElement {
     this.pendingSubscribeTemplateId = null;
     this.ruleTemplateDetails = null;
     await this.refreshSubscribeData();
+
+    const template = id && this.templates.find((t) => t.ID === id);
+    if (template) {
+      await this.ensureDefaultChannel(template);
+    }
+  }
+
+  // First-time subscribers start with no channel routes at all, which means no
+  // delivery until they notice and pick one themselves — default the first available
+  // channel (Pop-up preferred, else Email) on so a fresh subscription is never
+  // silently inert.
+  private async ensureDefaultChannel(template: RuleTemplate) {
+    if (!this.auth.currentUser?.hasPermission(NotifyPermission.NotificationRouteView)) {
+      return;
+    }
+
+    if (this.isChannelEnabled(template, 'popup') || this.isChannelEnabled(template, 'email')) {
+      return;
+    }
+
+    let defaultChannel: NotifyChannel | null = null;
+    if (this.isChannelAvailable(template, 'popup')) {
+      defaultChannel = 'popup';
+    } else if (this.isChannelAvailable(template, 'email')) {
+      defaultChannel = 'email';
+    }
+
+    if (!defaultChannel) {
+      return;
+    }
+
+    const topic = extractTopic(template.RESULT_EXPRESSION);
+    const username = this.auth.currentUser?.username;
+    if (!topic || !username) {
+      return;
+    }
+
+    try {
+      const route = await this.routeService.createUserRoute(defaultChannel, topic, username);
+      this.setChannelRoute(template.ID, defaultChannel, route);
+    } catch (error) {
+      logger.error(`Failed to enable default ${defaultChannel} channel:`, error);
+    }
   }
 
   cancelPendingSubscribe() {

package/src/components/foundation-inbox/inbox.styles.ts

@@ -326,6 +326,33 @@ export const ruleAndTemplate = css`
       font-size: var(--type-ramp-minus-1-font-size);
       color: var(--neutral-foreground-hint);
     }
+
+    .channel-chip-row {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--design-unit) * 1px);
+      margin-top: calc(var(--design-unit) * 1px);
+      justify-content: flex-end;
+    }
+
+    .channel-chip {
+      border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+      border-radius: calc(var(--control-corner-radius) * 999px);
+      font-size: var(--type-ramp-minus-2-font-size);
+
+      &[appearance='selected'] {
+        background-color: color-mix(in srgb, #7acc79, transparent 20%);
+        color: #fff;
+        border-color: transparent;
+      }
+
+      &[disabled] {
+        opacity: 50%;
+        background-color: var(--neutral-layer-3);
+        color: var(--neutral-foreground-hint);
+        cursor: not-allowed;
+      }
+    }
   }
 
   .rule {

package/src/components/foundation-inbox/inbox.template.ts

@@ -267,9 +267,6 @@ export const FoundationInboxTemplate = html<FoundationInbox>`
                       <div class="template-details">
                         <div class="template-name">${(x) => x.NAME}</div>
                         <div class="template-description">${(x) => x.DESCRIPTION}</div>
-                        <div class="template-datetime">
-                          ${(x, c) => getFormattedDate(x.DATETIME)}
-                        </div>
                       </div>
                       <rapid-switch
                         class="template-subscribe-toggle"
@@ -278,6 +275,54 @@ export const FoundationInboxTemplate = html<FoundationInbox>`
                         @click=${(_, c) => c.event.stopPropagation()}
                       ></rapid-switch>
                     </div>
+                    ${when(
+                      (x, c) =>
+                        c.parent.auth.currentUser?.hasPermission(
+                          NotifyPermission.NotificationRouteView,
+                        ),
+                      html<RuleTemplate, FoundationInbox>`
+                        <div class="channel-chip-row">
+                          ${when(
+                            (x, c) => c.parent.isChannelAvailable(x, 'popup'),
+                            html<RuleTemplate, FoundationInbox>`
+                              <rapid-button
+                                class="channel-chip"
+                                appearance=${(x, c) =>
+                                  c.parent.isChannelEnabled(x, 'popup') ? 'selected' : ''}
+                                ?disabled=${(x, c) =>
+                                  !c.parent.isTemplateSubscribed(x) ||
+                                  c.parent.isChannelTogglePending(x, 'popup')}
+                                @click=${(x, c) => {
+                                  c.event.stopPropagation();
+                                  c.parent.toggleChannel(x, 'popup');
+                                }}
+                              >
+                                Pop-up
+                              </rapid-button>
+                            `,
+                          )}
+                          ${when(
+                            (x, c) => c.parent.isChannelAvailable(x, 'email'),
+                            html<RuleTemplate, FoundationInbox>`
+                              <rapid-button
+                                class="channel-chip"
+                                appearance=${(x, c) =>
+                                  c.parent.isChannelEnabled(x, 'email') ? 'selected' : ''}
+                                ?disabled=${(x, c) =>
+                                  !c.parent.isTemplateSubscribed(x) ||
+                                  c.parent.isChannelTogglePending(x, 'email')}
+                                @click=${(x, c) => {
+                                  c.event.stopPropagation();
+                                  c.parent.toggleChannel(x, 'email');
+                                }}
+                              >
+                                Email
+                              </rapid-button>
+                            `,
+                          )}
+                        </div>
+                      `,
+                    )}
                     ${when(
                       (x, c) => c.parent.pendingSubscribeTemplateId === x.ID,
                       html`

package/src/components/foundation-inbox/inbox.utils.ts

@@ -5,6 +5,14 @@ import {
   SEVERITY_WARNING,
 } from '../foundation-notification-dashboard/types/severity';
 
+// Matches TOPIC = "VALUE" or TOPIC = 'VALUE'; the backreference keeps the
+// opening and closing quote the same so mismatched quotes don't match.
+const TOPIC_ASSIGNMENT = /TOPIC\s*=\s*(['"])([^'"]+)\1/;
+
+export function extractTopic(resultExpression: string): string | null {
+  return resultExpression?.match(TOPIC_ASSIGNMENT)?.[2] ?? null;
+}
+
 export const getFormattedDate = (dateTimeInMills) => {
   const dateTime = new Date(dateTimeInMills);
   return `${dateTime.toLocaleDateString()} ${dateTime.toLocaleTimeString()}`;

package/src/components/foundation-notification-dashboard/notification-dashboard.utils.ts

@@ -1,4 +1,8 @@
-import { showNotification } from '@genesislcap/foundation-notifications';
+import {
+  showNotification,
+  ToastVerticalEdge,
+  ToastHorizontalEdge,
+} from '@genesislcap/foundation-notifications';
 import { UUID } from '@genesislcap/foundation-utils';
 import {
   ConditionBuilderEntity,
@@ -764,6 +768,8 @@ export function showNotificationError(error) {
       config: {
         snackbar: {
           type: 'error',
+          verticalEdge: ToastVerticalEdge.Top,
+          horizontalEdge: ToastHorizontalEdge.Right,
         },
       },
     },

package/src/services/notify-route.service.ts

@@ -0,0 +1,164 @@
+import { Connect } from '@genesislcap/foundation-comms';
+import { DI } from '@genesislcap/web-core';
+
+export type NotifyChannel = 'popup' | 'email';
+
+// CREATE events don't return the generated NOTIFY_ROUTE_ID, so the new row is
+// polled for by its identifying fields: retry a few times with a short delay.
+const ROUTE_LOOKUP_MAX_ATTEMPTS = 8;
+const ROUTE_LOOKUP_RETRY_DELAY_MS = 250;
+
+export interface NotifyRoute {
+  NOTIFY_ROUTE_ID: string;
+  TOPIC_MATCH: string;
+  GATEWAY_ID: string;
+  ROUTE_ENABLED: boolean;
+  ENTITY_ID: string;
+  ENTITY_ID_TYPE: string;
+}
+
+const GATEWAY_ID: Record<NotifyChannel, string> = {
+  popup: 'Screen',
+  email: 'Email',
+};
+
+const RESOURCE_NAME: Record<NotifyChannel, string> = {
+  popup: 'ALL_SCREEN_ROUTES',
+  email: 'ALL_EMAIL_USER_ROUTES',
+};
+
+const CREATE_EVENT: Record<NotifyChannel, string> = {
+  popup: 'EVENT_SCREEN_NOTIFY_ROUTE_CREATE',
+  email: 'EVENT_EMAIL_USER_ROUTE_CREATE',
+};
+
+const DELETE_EVENT: Record<NotifyChannel, string> = {
+  popup: 'EVENT_SCREEN_NOTIFY_ROUTE_DELETE',
+  email: 'EVENT_EMAIL_USER_ROUTE_DELETE',
+};
+
+/**
+ * Per-user notification channel routing, backed by the platform's own
+ * NOTIFY_ROUTE / SCREEN_NOTIFY_ROUTE_EXT / EMAIL_USER_NOTIFY_ROUTE_EXT
+ * tables — the same CRUD events the admin Route Management screens use.
+ *
+ * A topic "supports" a channel when any route exists for that
+ * TOPIC_MATCH + GATEWAY_ID (admin-configured marker rows, entity-blank).
+ * A specific user has that channel enabled when a route additionally
+ * exists scoped to ENTITY_ID_TYPE=USER_NAME, ENTITY_ID=<username>.
+ */
+export interface NotifyRouteService {
+  getAllRoutes(channel: NotifyChannel): Promise<NotifyRoute[]>;
+  findUserRoute(
+    channel: NotifyChannel,
+    topic: string,
+    username: string,
+  ): Promise<NotifyRoute | null>;
+  createUserRoute(channel: NotifyChannel, topic: string, username: string): Promise<NotifyRoute>;
+  deleteRoute(channel: NotifyChannel, notifyRouteId: string): Promise<void>;
+}
+
+class NotifyRouteServiceImpl implements NotifyRouteService {
+  @Connect private connect: Connect;
+
+  // Fetch every route for a channel in one snapshot, so callers can index many
+  // topics in memory instead of issuing one query per topic.
+  public async getAllRoutes(channel: NotifyChannel): Promise<NotifyRoute[]> {
+    return this.queryRoutes(channel);
+  }
+
+  public async findUserRoute(
+    channel: NotifyChannel,
+    topic: string,
+    username: string,
+  ): Promise<NotifyRoute | null> {
+    const criteriaMatch = `TOPIC_MATCH == '${this.escape(topic)}' && ENTITY_ID == '${this.escape(username)}' && ENTITY_ID_TYPE == 'USER_NAME'`;
+    const [route] = await this.queryRoutes(channel, criteriaMatch);
+    return route ?? null;
+  }
+
+  public async createUserRoute(
+    channel: NotifyChannel,
+    topic: string,
+    username: string,
+  ): Promise<NotifyRoute> {
+    // The dataserver can lag briefly behind an ACK, so a route that already exists
+    // (e.g. a prior create whose post-create lookup below timed out) must be reused
+    // instead of blindly creating a duplicate.
+    const existing = await this.findUserRoute(channel, topic, username);
+    if (existing) {
+      return existing;
+    }
+
+    const response = await this.connect.commitEvent(CREATE_EVENT[channel], {
+      DETAILS: {
+        TOPIC_MATCH: topic,
+        GATEWAY_ID: GATEWAY_ID[channel],
+        ROUTE_ENABLED: true,
+        ENTITY_ID: username,
+        ENTITY_ID_TYPE: 'USER_NAME',
+        EXCLUDE_SENDER: false,
+      },
+      IGNORE_WARNINGS: true,
+      VALIDATE: false,
+    });
+
+    if (response.MESSAGE_TYPE !== 'EVENT_ACK') {
+      throw new Error(
+        `Failed to create ${channel} route for ${topic}: ${JSON.stringify(response.ERROR)}`,
+      );
+    }
+
+    // These CREATE events don't return the generated NOTIFY_ROUTE_ID in GENERATED,
+    // so the newly created row has to be looked up by its own identifying fields.
+    for (let attempt = 0; attempt < ROUTE_LOOKUP_MAX_ATTEMPTS; attempt += 1) {
+      // eslint-disable-next-line no-await-in-loop -- sequential poll: each retry waits for the previous lookup + delay
+      const created = await this.findUserRoute(channel, topic, username);
+      if (created) {
+        return created;
+      }
+      // eslint-disable-next-line no-await-in-loop -- intentional back-off between lookup attempts
+      await new Promise((resolve) => {
+        setTimeout(resolve, ROUTE_LOOKUP_RETRY_DELAY_MS);
+      });
+    }
+
+    throw new Error(`Created ${channel} route for ${topic} but could not find it afterwards`);
+  }
+
+  public async deleteRoute(channel: NotifyChannel, notifyRouteId: string): Promise<void> {
+    const response = await this.connect.commitEvent(DELETE_EVENT[channel], {
+      DETAILS: {
+        NOTIFY_ROUTE_ID: notifyRouteId,
+      },
+      IGNORE_WARNINGS: true,
+      VALIDATE: false,
+    });
+
+    if (response.MESSAGE_TYPE !== 'EVENT_ACK') {
+      throw new Error(
+        `Failed to delete ${channel} route ${notifyRouteId}: ${JSON.stringify(response.ERROR)}`,
+      );
+    }
+  }
+
+  private async queryRoutes(
+    channel: NotifyChannel,
+    criteriaMatch?: string,
+  ): Promise<NotifyRoute[]> {
+    const response = await this.connect.snapshot(
+      RESOURCE_NAME[channel],
+      criteriaMatch ? { CRITERIA_MATCH: criteriaMatch } : {},
+    );
+
+    return (response.ROW ?? []) as NotifyRoute[];
+  }
+
+  private escape(value: string): string {
+    return value ? value.replace(/'/g, "\\'") : '';
+  }
+}
+
+export const NotifyRouteService = DI.createInterface<NotifyRouteService>((x) =>
+  x.singleton(NotifyRouteServiceImpl),
+);