@pushwoosh/smart-components-kit 1.3.17 → 1.3.19

package/ProductUpdates/ProductUpdates.js

@@ -18,7 +18,8 @@ export function ProductUpdates({
     unreadCount,
     isLoading,
     hasUpdates,
-    markAllRead
+    markAllRead,
+    clearNewBadges
   } = useProductUpdates();
   useEffect(() => {
     if (!isAllowed || !autoOpenOnUnread || hasAutoOpened.current || unreadCount === 0) {
@@ -26,10 +27,15 @@ export function ProductUpdates({
     }
     hasAutoOpened.current = true;
     setIsOpen(true);
-  }, [isAllowed, autoOpenOnUnread, unreadCount]);
+    markAllRead();
+  }, [isAllowed, autoOpenOnUnread, unreadCount, markAllRead]);
+  const handleOpen = () => {
+    setIsOpen(true);
+    markAllRead();
+  };
   const handleClose = () => {
     setIsOpen(false);
-    markAllRead();
+    clearNewBadges();
   };
   if (!isAllowed || isLoading || !hasUpdates) {
     return null;
@@ -43,7 +49,7 @@ export function ProductUpdates({
         size: "medium",
         view: "lined"
       }),
-      onClick: () => setIsOpen(true),
+      onClick: handleOpen,
       children: lang({
         message: 'SMART.PRODUCT_UPDATES.BUTTON'
       })

package/ProductUpdates/constants.d.ts

@@ -1,5 +1,5 @@
 import type { AlertStatus, AlertType, OrderBy, OrderDirection } from '@pushwoosh/rpc-v2-http-api-data/pushwoosh_accounts_alerts_v1';
-export declare const UPDATES_PER_PAGE = 20;
+export declare const MAX_VISIBLE_UPDATES = 10;
 export declare const ALERT_TYPE_PRODUCT_UPDATE: AlertType;
 export declare const ALERT_STATUS_READ: AlertStatus;
 export declare const ALERT_STATUS_UNREAD: AlertStatus;

package/ProductUpdates/constants.js

@@ -1,4 +1,6 @@
-export const UPDATES_PER_PAGE = 20;
+// Product updates carry no expiry, so the feed only grows. The modal shows the newest
+// slice and never paginates into the past: older ones stay in the notification history.
+export const MAX_VISIBLE_UPDATES = 10;
 export const ALERT_TYPE_PRODUCT_UPDATE = 'ALERT_TYPE_PRODUCT_UPDATE';
 export const ALERT_STATUS_READ = 'ALERT_STATUS_READ';
 export const ALERT_STATUS_UNREAD = 'ALERT_STATUS_UNREAD';

package/ProductUpdates/helpers.js

@@ -1,5 +1,6 @@
-// Same-origin links stay inside the SPA; the root config resolves the /applications/app-code
-// placeholder on the routing event, so a deeplink needs no application code here.
+// The root config resolves the app-code placeholder only on a real page load; the same
+// push inside the SPA answers 404 for the literal "app-code" and lands on /projects.
+const APP_CODE_PLACEHOLDER = /^\/(applications|journeys)\/app-code(?=\/|$)/i;
 export function openActionLink(link, history) {
   let url;
   try {
@@ -11,7 +12,12 @@ export function openActionLink(link, history) {
     window.open(url.href, '_blank', 'noopener,noreferrer');
     return false;
   }
-  history.push(`${url.pathname}${url.search}${url.hash}`);
+  const path = `${url.pathname}${url.search}${url.hash}`;
+  if (APP_CODE_PLACEHOLDER.test(url.pathname)) {
+    window.location.assign(path);
+    return false;
+  }
+  history.push(path);
   return true;
 }
 // UTC on purpose: an announcement is dated once for everyone, and a local-time

package/ProductUpdates/hooks/useProductUpdates.d.ts

@@ -4,7 +4,10 @@ type UseProductUpdates = {
     readonly unreadCount: number;
     readonly isLoading: boolean;
     readonly hasUpdates: boolean;
+    /** Sends the read marks. Call on open: showing the modal is the delivery. */
     readonly markAllRead: () => Promise<void>;
+    /** Drops the NEW badges and the unread counter. Call on close, so they last while reading. */
+    readonly clearNewBadges: () => void;
 };
 export declare function useProductUpdates(): UseProductUpdates;
 export {};

package/ProductUpdates/hooks/useProductUpdates.js

@@ -1,7 +1,7 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useAsync } from '@pushwoosh/kit-helpers';
 import { useSPAContext } from '@pushwoosh/spa-context';
-import { ALERT_STATUS_READ, ALERT_STATUS_UNREAD, ALERT_TYPE_PRODUCT_UPDATE, ORDER_BY_CREATED, ORDER_DIRECTION_DESC, UPDATES_PER_PAGE } from '../constants';
+import { ALERT_STATUS_READ, ALERT_STATUS_UNREAD, ALERT_TYPE_PRODUCT_UPDATE, ORDER_BY_CREATED, ORDER_DIRECTION_DESC, MAX_VISIBLE_UPDATES } from '../constants';
 import { useIsAllowProductUpdates } from './useIsAllowProductUpdates';
 const EMPTY = [];
 export function useProductUpdates() {
@@ -9,7 +9,8 @@ export function useProductUpdates() {
     rpcGateway
   } = useSPAContext();
   const isAllowed = useIsAllowProductUpdates();
-  const [isMarkedRead, setIsMarkedRead] = useState(false);
+  const [areBadgesCleared, setAreBadgesCleared] = useState(false);
+  const hasSentRef = useRef(false);
   const state = useAsync(async () => {
     if (!isAllowed) {
       return EMPTY;
@@ -17,24 +18,28 @@ export function useProductUpdates() {
     const response = await rpcGateway.internalAlerts.List({
       type: ALERT_TYPE_PRODUCT_UPDATE,
       page: 0,
-      perPage: UPDATES_PER_PAGE,
+      perPage: MAX_VISIBLE_UPDATES,
       orderBy: ORDER_BY_CREATED,
       orderDirection: ORDER_DIRECTION_DESC
     });
     return response.alerts;
   }, [rpcGateway, isAllowed]);
   const fetched = state.value ?? EMPTY;
-  // Read is all-or-nothing: closing the modal marks everything it showed,
-  // so one flag is enough to reflect it without refetching.
-  const updates = isMarkedRead ? fetched.map(update => ({
+  const updates = areBadgesCleared ? fetched.map(update => ({
     ...update,
     status: ALERT_STATUS_READ
   })) : fetched;
+  // The mark goes out on open, not on close: a reload with the modal still open is not
+  // a close, and the same updates used to pop again.
   const markAllRead = useCallback(async () => {
+    if (hasSentRef.current) {
+      return;
+    }
     const unread = fetched.filter(update => update.status === ALERT_STATUS_UNREAD);
     if (unread.length === 0) {
       return;
     }
+    hasSentRef.current = true;
     try {
       await rpcGateway.internalAlerts.UpdateStatus({
         alerts: unread.map(update => ({
@@ -42,16 +47,18 @@ export function useProductUpdates() {
           status: ALERT_STATUS_READ
         }))
       });
-      setIsMarkedRead(true);
     } catch (error) {
       console.error('Failed to mark product updates as read:', error);
+      hasSentRef.current = false;
     }
   }, [rpcGateway, fetched]);
+  const clearNewBadges = useCallback(() => setAreBadgesCleared(true), []);
   return {
     updates,
     unreadCount: updates.filter(update => update.status === ALERT_STATUS_UNREAD).length,
     isLoading: state.loading,
     hasUpdates: updates.length > 0,
-    markAllRead
+    markAllRead,
+    clearNewBadges
   };
 }

package/package.json

@@ -52,5 +52,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.3.17"
+  "version": "1.3.19"
 }