@pushwoosh/smart-components-kit 1.3.16 → 1.3.18

package/ProductUpdates/ProductUpdateCard.d.ts

@@ -0,0 +1,2 @@
+import type { ProductUpdateCardProps } from './types';
+export declare function ProductUpdateCard({ update, onNavigate }: ProductUpdateCardProps): import("react").JSX.Element;

package/ProductUpdates/ProductUpdateCard.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Badge, Button } from '@pushwoosh/dumb-components';
+import { Color } from '@pushwoosh/kit-constants';
+import { Cluster, Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { Paragraph, Text } from '@pushwoosh/kit-typography';
+import { useSPAContext } from '@pushwoosh/spa-context';
+import FallbackImage from './assets/fallback.svg?url';
+import { ALERT_STATUS_UNREAD } from './constants';
+import { formatUpdateDate, openActionLink } from './helpers';
+import { useLang } from './polyglot';
+import { CardImage } from './styles';
+export function ProductUpdateCard({
+  update,
+  onNavigate
+}) {
+  const lang = useLang();
+  const {
+    history,
+    language
+  } = useSPAContext();
+  const [imageSrc, setImageSrc] = useState(update.imageUrl || FallbackImage);
+  const handleAction = link => () => {
+    if (openActionLink(link, history)) {
+      onNavigate();
+    }
+  };
+  return _jsxs(Columns, {
+    "$sizes": "256px 1fr",
+    "$gap": 32,
+    "$alignItems": "start",
+    children: [_jsx(CardImage, {
+      src: imageSrc,
+      alt: "",
+      loading: "lazy",
+      onError: () => setImageSrc(FallbackImage)
+    }), _jsxs(Vertical, {
+      "$gap": 16,
+      children: [_jsxs(Vertical, {
+        "$gap": 4,
+        children: [_jsxs(Horizontal, {
+          "$gap": 8,
+          "$alignItems": "center",
+          "$justifyContent": "start",
+          children: [_jsx(Text, {
+            "$variant": "footnote",
+            "$color": Color.LOCKED,
+            "$uppercase": true,
+            children: formatUpdateDate(update.created, language)
+          }), update.status === ALERT_STATUS_UNREAD && _jsx(Badge, {
+            color: "sky",
+            children: lang({
+              message: 'SMART.PRODUCT_UPDATES.BADGE.NEW'
+            })
+          })]
+        }), _jsxs(Vertical, {
+          children: [_jsx(Text, {
+            "$variant": "h4",
+            children: update.title
+          }), update.content && _jsx(Paragraph, {
+            children: update.content
+          })]
+        })]
+      }), (update.actionLink || update.secondaryActionLink) && _jsxs(Cluster, {
+        "$gap": 8,
+        "$flexWrap": "wrap",
+        children: [update.actionLink && _jsx(Button, {
+          color: "primary",
+          onClick: handleAction(update.actionLink),
+          children: update.actionLinkLabel || update.actionLink
+        }), update.secondaryActionLink && _jsx(Button, {
+          color: "secondary",
+          onClick: handleAction(update.secondaryActionLink),
+          children: update.secondaryActionLinkLabel || update.secondaryActionLink
+        })]
+      })]
+    })]
+  });
+}

package/ProductUpdates/ProductUpdates.d.ts

@@ -0,0 +1,2 @@
+import type { ProductUpdatesProps } from './types';
+export declare function ProductUpdates({ autoOpenOnUnread }: ProductUpdatesProps): import("react").JSX.Element | null;

package/ProductUpdates/ProductUpdates.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '@pushwoosh/dumb-components';
+import { MegaphoneIcon } from '@pushwoosh/kit-icons';
+import { useIsAllowProductUpdates } from './hooks/useIsAllowProductUpdates';
+import { useProductUpdates } from './hooks/useProductUpdates';
+import { useLang } from './polyglot';
+import { ProductUpdatesModal } from './ProductUpdatesModal';
+export function ProductUpdates({
+  autoOpenOnUnread = false
+}) {
+  const lang = useLang();
+  const [isOpen, setIsOpen] = useState(false);
+  const hasAutoOpened = useRef(false);
+  const isAllowed = useIsAllowProductUpdates();
+  const {
+    updates,
+    unreadCount,
+    isLoading,
+    hasUpdates,
+    markAllRead,
+    clearNewBadges
+  } = useProductUpdates();
+  useEffect(() => {
+    if (!isAllowed || !autoOpenOnUnread || hasAutoOpened.current || unreadCount === 0) {
+      return;
+    }
+    hasAutoOpened.current = true;
+    setIsOpen(true);
+    markAllRead();
+  }, [isAllowed, autoOpenOnUnread, unreadCount, markAllRead]);
+  const handleOpen = () => {
+    setIsOpen(true);
+    markAllRead();
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+    clearNewBadges();
+  };
+  if (!isAllowed || isLoading || !hasUpdates) {
+    return null;
+  }
+  return _jsxs(_Fragment, {
+    children: [_jsx(Button, {
+      color: "secondary",
+      view: "ghost",
+      size: "field",
+      icon: _jsx(MegaphoneIcon, {
+        size: "medium",
+        view: "lined"
+      }),
+      onClick: handleOpen,
+      children: lang({
+        message: 'SMART.PRODUCT_UPDATES.BUTTON'
+      })
+    }), _jsx(ProductUpdatesModal, {
+      isOpen: isOpen,
+      onClose: handleClose,
+      updates: updates,
+      unreadCount: unreadCount
+    })]
+  });
+}

package/ProductUpdates/ProductUpdatesModal.d.ts

@@ -0,0 +1,2 @@
+import type { ProductUpdatesModalProps } from './types';
+export declare function ProductUpdatesModal(props: ProductUpdatesModalProps): import("react").JSX.Element;

package/ProductUpdates/ProductUpdatesModal.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { Divider, Modal, ModalBody, ModalHeader, ModalTitle } from '@pushwoosh/dumb-components';
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { Text } from '@pushwoosh/kit-typography';
+import { useLang } from './polyglot';
+import { ProductUpdateCard } from './ProductUpdateCard';
+export function ProductUpdatesModal(props) {
+  const {
+    isOpen,
+    onClose,
+    updates,
+    unreadCount
+  } = props;
+  const lang = useLang();
+  // A colon only reads right when a count follows it.
+  const base = lang({
+    message: 'SMART.PRODUCT_UPDATES.TITLE'
+  });
+  const title = unreadCount > 0 ? `${base}:` : base;
+  return _jsxs(Modal, {
+    size: "large",
+    isOpen: isOpen,
+    onClose: onClose,
+    children: [_jsx(ModalHeader, {
+      children: _jsx(ModalTitle, {
+        onClose: onClose,
+        children: _jsxs(Horizontal, {
+          "$gap": 8,
+          "$alignItems": "baseline",
+          "$justifyContent": "start",
+          children: [_jsx("span", {
+            children: title
+          }), unreadCount > 0 && _jsx(Text, {
+            "$color": Color.LOCKED,
+            children: lang({
+              message: 'SMART.PRODUCT_UPDATES.UNREAD',
+              count: unreadCount
+            })
+          })]
+        })
+      })
+    }), _jsx(ModalBody, {
+      children: _jsx(Vertical, {
+        "$gap": 16,
+        "$padding": {
+          top: 8
+        },
+        children: updates.map((update, index) => _jsxs(Fragment, {
+          children: [index > 0 && _jsx(Divider, {}), _jsx(ProductUpdateCard, {
+            update: update,
+            onNavigate: onClose
+          })]
+        }, update.uuid))
+      })
+    })]
+  });
+}

package/ProductUpdates/assets/fallback.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="160" fill="none" xmlns:v="https://vecta.io/nano"><style><![CDATA[.B{fill:#f8f1f2}.C{color-interpolation-filters:sRGB}.D{flood-opacity:0}.E{fill:#fef6dc}]]></style><g clip-path="url(#M)"><path d="M0 0H256V160.121H0V0Z" fill="url(#E)"/><path d="M0 0H256V160.121H0V0Z" fill="url(#F)" fill-opacity=".8"/><path d="M100.375 15.723l.131.025c.54.382 2.935 5.782 3.5 6.798l-3.945 2.133-.04.007c-.5-.212-3.101-5.928-3.545-6.884l3.899-2.078z" class="B"/><path d="M173.172 32.816l3.98 2.787-3.917 6.102c-.944-.386-3.281-2.062-4.045-2.756l3.982-6.134z" class="E"/><g class="B"><path d="M162.016 68.984l.287-.014c.658.298 3.35 2.004 3.793 2.563-.171.605-2.636 4.86-3.127 5.338-1.258-.62-3.105-1.969-4.434-2.784l3.481-5.103zm-68.752 1.277c.667-.121.974.565 1.269 1.122.647 1.221 1.876 2.681 2.145 3.991.061.296-3.135 2.159-3.556 2.407l-.279-.093c-.46-.544-3.02-4.612-3.209-5.236.441-.377 3.035-1.859 3.63-2.192zm64.949-52.46l3.815 2.169-3.244 5.859c-.418.27-3.313-1.602-3.829-1.942l3.258-6.086z"/></g><path d="M90.04 43.218c.615.156 2.971 4.202 3.335 4.96-1.008.862-2.332 1.814-3.403 2.603-.884-1.169-2.505-3.868-3.364-5.209l3.432-2.354z" class="E"/><g class="B"><path d="M179.019 58.206c.341.114 2.681 2.363 3.115 2.768l-3.772 4.684-3.275-2.662c.997-1.395 2.794-3.512 3.932-4.79zm-100.934-.105c.382.275 3.239 4.144 3.66 4.753-.775.817-2.096 1.685-3.127 2.738-1.333-1.337-2.462-3.167-3.821-4.624l3.288-2.867z"/></g><path d="M78.363 32.098c.321.177 2.145 2.956 2.62 3.519-1.031.669-1.633 1.324-2.498 2.187-.474-.187-2.316-2.766-2.784-3.363l2.662-2.343z" class="E"/><g filter="url(#A)"><path d="M128.951 99.645l-.079 34.866-34.607-16.706V92.623l34.686 7.021zm32.554 18.482l-32.632 16.384.078-34.865 33.107-6.295-.553 24.776z" fill="url(#G)"/></g><g filter="url(#B)"><path d="M128.968 99.645l33.817-6.295-.566 24.776-33.331 16.384-35.349-16.706V92.623l35.429 7.021z" fill="url(#H)"/></g><path d="M128.888 134.51l.08-34.865 33.816-6.295-.565 24.776-33.331 16.384z" fill="url(#I)"/><path d="M128.888 134.51l.081-34.865-35.43-7.021v25.18l35.349 16.707z" fill="url(#H)"/><path d="M163.228 83.342l-34.26 16.303-36.156-16.383 34.946-10.169 35.47 10.25z" fill="url(#J)"/><g filter="url(#C)"><path d="M153.436 58.335h.585l-.146.517.146.171h-.194l-.388 1.383h-12.31v33.469l-12.08 5.77-12.906-5.836V60.405h-12.494l-.387-1.383h-.195l.146-.172-.145-.516h.584l24.893-29.274 24.891 29.275z" fill="url(#K)"/></g><path opacity=".8" d="M154.02 58.335l-.581 2.07h-49.79l-.581-2.07h50.952z" fill="#fff3d5"/><g filter="url(#D)"><path d="M154.021 59.023h-12.892v34.851l-12.08 5.77-12.906-5.836V59.023h-13.076l25.478-29.962 25.476 29.962z" fill="url(#L)"/></g><g class="B"><use href="#N"/><path d="M111.374 63.892l.524 1.414 1.413.523-1.413.523-.524 1.414-.523-1.414-1.413-.523 1.413-.523.523-1.414zm-4.68 5.165l.523 1.414 1.414.523-1.414.523-.523 1.414-.523-1.414-1.414-.523 1.414-.523.523-1.414zm-12.591-9.039l.48 1.296 1.296.48-1.296.48-.48 1.296-.48-1.296-1.296-.48 1.296-.48.48-1.296zm-6.295-4.842l.349.942.942.349-.942.349-.349.943-.349-.943-.942-.349.942-.349.349-.942zm84.257-5.488l.524 1.414 1.413.523-1.413.523-.524 1.414-.523-1.414-1.414-.523 1.414-.523.523-1.414z"/></g><path d="M146.724 101.259l-17.756-1.615 34.26-16.303 15.455 1.856-31.959 16.061z" fill="#fefcf9"/><path d="M111.213 101.258l17.755-1.614-36.156-16.383-14.608 2.018 33.009 15.98z" fill="#fefdfa"/></g><defs><filter id="A" x="93.619" y="92.623" width="69.084" height="43.178" filterUnits="userSpaceOnUse" class="C"><feFlood result="A" class="D"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="B"/><feOffset dy="0.645649"/><feGaussianBlur stdDeviation=".323"/><feComposite in2="B" operator="out"/><feColorMatrix values="0 0 0 0 0.363468 0 0 0 0 0.269585 0 0 0 0 0.457351 0 0 0 0.2 0"/><feBlend in2="A"/><feBlend in="SourceGraphic"/></filter><filter id="B" x="91.602" y="91.332" width="74.411" height="47.052" filterUnits="userSpaceOnUse" class="C"><feFlood result="A" class="D"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="B"/><feOffset dx="0.645649" dy="1.2913"/><feGaussianBlur stdDeviation="1.291"/><feComposite in2="B" operator="out"/><feColorMatrix values="0 0 0 0 0.363468 0 0 0 0 0.269585 0 0 0 0 0.457351 0 0 0 0.1 0"/><feBlend in2="A"/><feBlend in="SourceGraphic"/></filter><filter id="C" x="98.548" y="26.478" width="59.992" height="79.623" filterUnits="userSpaceOnUse" class="C"><feFlood result="A" class="D"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="B"/><feOffset dy="1.93695"/><feGaussianBlur stdDeviation="2.26"/><feComposite in2="B" operator="out"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.904522 0 0 0 0 0.713567 0 0 0 1 0"/><feBlend in2="A"/><feBlend in="SourceGraphic"/></filter><filter id="D" x="103.067" y="29.061" width="50.953" height="72.521" filterUnits="userSpaceOnUse" class="C"><feFlood class="D"/><feBlend in="SourceGraphic" result="B"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="C"/><feOffset dy="1.93695"/><feGaussianBlur stdDeviation="2.905"/><feComposite in2="C" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/><feBlend in2="B"/></filter><radialGradient id="E" cx="0" cy="0" r="1" gradientTransform="translate(128 101.061) rotate(90) scale(138.718 138.718)" href="#O"><stop stop-color="#fef6df"/><stop offset=".067" stop-color="#fef5df"/><stop offset=".133" stop-color="#fcf4df"/><stop offset=".2" stop-color="#faf1e0"/><stop offset=".267" stop-color="#f6ede0"/><stop offset=".333" stop-color="#f2e8e1"/><stop offset=".4" stop-color="#ede2e2"/><stop offset=".467" stop-color="#e7dbe3"/><stop offset=".533" stop-color="#e2d4e4"/><stop offset=".6" stop-color="#dccde5"/><stop offset=".667" stop-color="#d7c7e6"/><stop offset=".733" stop-color="#d2c2e7"/><stop offset=".8" stop-color="#cfbee8"/><stop offset=".867" stop-color="#cdbbe8"/><stop offset=".933" stop-color="#cbb9e9"/></radialGradient><radialGradient id="F" cx="0" cy="0" r="1" gradientTransform="translate(128 125.061) rotate(-90) scale(29 108.326)" href="#O"><stop stop-color="#b68fcb"/><stop offset="1" stop-color="#d0b9f5" stop-opacity="0"/></radialGradient><radialGradient id="G" cx="0" cy="0" r="1" gradientTransform="matrix(-34.7657 16.4641 -13.6341 -30.037 128.951 101.985)" href="#O"><stop stop-color="#fef1e7"/><stop offset="1" stop-color="#f7e8f5"/></radialGradient><radialGradient id="H" cx="0" cy="0" r="1" gradientTransform="translate(128.969 101.985) rotate(155.126) scale(39.1417 33.1083)" href="#O"><stop stop-color="#fef1e7"/><stop offset="1" stop-color="#f7e8f5"/></radialGradient><radialGradient id="I" cx="0" cy="0" r="1" gradientTransform="translate(128.807 100.371) rotate(36.3738) scale(37.2877 30.7075)" href="#O"><stop stop-color="#fadaca"/><stop offset="1" stop-color="#cfbede"/></radialGradient><radialGradient id="J" cx="0" cy="0" r="1" gradientTransform="translate(128 95.5281) rotate(-90) scale(24.2926 35.1879)" href="#O"><stop stop-color="#ffe5b3"/><stop offset="1" stop-color="#fffefc"/></radialGradient><linearGradient id="K" x1="128.544" y1="21.763" x2="128.544" y2="99.645" href="#O"><stop stop-color="#fff4d8"/><stop offset=".586" stop-color="#fffbf1"/><stop offset="1" stop-color="#fff3d3"/></linearGradient><linearGradient id="L" x1="128.544" y1="21.763" x2="128.544" y2="99.645" href="#O"><stop stop-color="#ffedbf"/><stop offset=".717" stop-color="#fffbf1"/><stop offset="1" stop-color="#fff3d3"/></linearGradient><clipPath id="M"><path fill="#fff" d="M0 0h256v160H0z"/></clipPath><path id="N" d="M149.79 64.053l.524 1.414 1.413.523-1.413.523-.524 1.414-.523-1.414-1.413-.523 1.413-.523.523-1.414z"/><linearGradient id="O" gradientUnits="userSpaceOnUse"/></defs></svg>

package/ProductUpdates/constants.d.ts

@@ -0,0 +1,7 @@
+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 ALERT_TYPE_PRODUCT_UPDATE: AlertType;
+export declare const ALERT_STATUS_READ: AlertStatus;
+export declare const ALERT_STATUS_UNREAD: AlertStatus;
+export declare const ORDER_BY_CREATED: OrderBy;
+export declare const ORDER_DIRECTION_DESC: OrderDirection;

package/ProductUpdates/constants.js

@@ -0,0 +1,6 @@
+export const UPDATES_PER_PAGE = 20;
+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';
+export const ORDER_BY_CREATED = 'ORDER_BY_CREATED';
+export const ORDER_DIRECTION_DESC = 'ORDER_DIRECTION_DESC';

package/ProductUpdates/helpers.d.ts

@@ -0,0 +1,4 @@
+export declare function openActionLink(link: string, history: {
+    push: (path: string) => void;
+}): boolean;
+export declare function formatUpdateDate(value: string | Date | undefined, locale: string): string;

package/ProductUpdates/helpers.js

@@ -0,0 +1,39 @@
+// 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 {
+    url = new URL(link, window.location.origin);
+  } catch {
+    return false;
+  }
+  if (url.origin !== window.location.origin) {
+    window.open(url.href, '_blank', 'noopener,noreferrer');
+    return false;
+  }
+  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
+// render turns a midnight-UTC send into the previous day west of Greenwich.
+export function formatUpdateDate(value, locale) {
+  if (!value) {
+    return '';
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+  return date.toLocaleDateString(locale, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    timeZone: 'UTC'
+  });
+}

package/ProductUpdates/hooks/useIsAllowProductUpdates.d.ts

@@ -0,0 +1 @@
+export declare function useIsAllowProductUpdates(): boolean;

package/ProductUpdates/hooks/useIsAllowProductUpdates.js

@@ -0,0 +1,9 @@
+import { useSPAContext } from '@pushwoosh/spa-context';
+// Product updates are Pushwoosh announcements; a whitelabel tenant must not see them.
+// Same gate DocsButton uses, and it is deliberately on display, not on the broadcast.
+export function useIsAllowProductUpdates() {
+  const {
+    environment
+  } = useSPAContext();
+  return !environment.isOMO;
+}

package/ProductUpdates/hooks/useProductUpdates.d.ts

@@ -0,0 +1,13 @@
+import type { ProductUpdate } from '../types';
+type UseProductUpdates = {
+    readonly updates: ProductUpdate[];
+    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

@@ -0,0 +1,64 @@
+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 { useIsAllowProductUpdates } from './useIsAllowProductUpdates';
+const EMPTY = [];
+export function useProductUpdates() {
+  const {
+    rpcGateway
+  } = useSPAContext();
+  const isAllowed = useIsAllowProductUpdates();
+  const [areBadgesCleared, setAreBadgesCleared] = useState(false);
+  const hasSentRef = useRef(false);
+  const state = useAsync(async () => {
+    if (!isAllowed) {
+      return EMPTY;
+    }
+    const response = await rpcGateway.internalAlerts.List({
+      type: ALERT_TYPE_PRODUCT_UPDATE,
+      page: 0,
+      perPage: UPDATES_PER_PAGE,
+      orderBy: ORDER_BY_CREATED,
+      orderDirection: ORDER_DIRECTION_DESC
+    });
+    return response.alerts;
+  }, [rpcGateway, isAllowed]);
+  const fetched = state.value ?? EMPTY;
+  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 => ({
+          uuid: update.uuid,
+          status: ALERT_STATUS_READ
+        }))
+      });
+    } 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,
+    clearNewBadges
+  };
+}

package/ProductUpdates/index.d.ts

@@ -0,0 +1,5 @@
+export { ProductUpdates } from './ProductUpdates';
+export { ProductUpdatesModal } from './ProductUpdatesModal';
+export { useProductUpdates } from './hooks/useProductUpdates';
+export { useIsAllowProductUpdates } from './hooks/useIsAllowProductUpdates';
+export type { ProductUpdate, ProductUpdateCardProps, ProductUpdatesModalProps, ProductUpdatesProps, } from './types';

package/ProductUpdates/index.js

@@ -0,0 +1,4 @@
+export { ProductUpdates } from './ProductUpdates';
+export { ProductUpdatesModal } from './ProductUpdatesModal';
+export { useProductUpdates } from './hooks/useProductUpdates';
+export { useIsAllowProductUpdates } from './hooks/useIsAllowProductUpdates';

package/ProductUpdates/polyglot/index.d.ts

@@ -0,0 +1,2 @@
+import { type ProductUpdatesMessages } from './types';
+export declare const Lang: import("react").FC<import("@pushwoosh/dumb-components/polyglot").LangProps<ProductUpdatesMessages>>, useLang: () => (props: import("@pushwoosh/dumb-components/polyglot").LangProps<ProductUpdatesMessages>) => string;

package/ProductUpdates/polyglot/index.js

@@ -0,0 +1,10 @@
+import { createLang } from '@pushwoosh/dumb-components/polyglot';
+import { messages as en } from './messages_en';
+import { messages as ru } from './messages_ru';
+export const {
+  Lang,
+  useLang
+} = createLang({
+  en,
+  ru
+});

package/ProductUpdates/polyglot/messages_en.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type ProductUpdatesMessages } from './types';
+export declare const messages: LangMessages<ProductUpdatesMessages>;

package/ProductUpdates/polyglot/messages_en.js

@@ -0,0 +1,6 @@
+export const messages = {
+  'SMART.PRODUCT_UPDATES.BUTTON': 'Product updates',
+  'SMART.PRODUCT_UPDATES.TITLE': 'Product updates',
+  'SMART.PRODUCT_UPDATES.UNREAD': '{{count}} unread',
+  'SMART.PRODUCT_UPDATES.BADGE.NEW': 'NEW'
+};

package/ProductUpdates/polyglot/messages_ru.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type ProductUpdatesMessages } from './types';
+export declare const messages: LangMessages<ProductUpdatesMessages>;

package/ProductUpdates/polyglot/messages_ru.js

@@ -0,0 +1,6 @@
+export const messages = {
+  'SMART.PRODUCT_UPDATES.BUTTON': 'Обновления продукта',
+  'SMART.PRODUCT_UPDATES.TITLE': 'Обновления продукта',
+  'SMART.PRODUCT_UPDATES.UNREAD': 'непрочитанных: {{count}}',
+  'SMART.PRODUCT_UPDATES.BADGE.NEW': 'NEW'
+};

package/ProductUpdates/polyglot/types.d.ts

@@ -0,0 +1,9 @@
+import type { NoParams } from '@pushwoosh/dumb-components/polyglot';
+export type ProductUpdatesMessages = {
+    'SMART.PRODUCT_UPDATES.BUTTON': NoParams;
+    'SMART.PRODUCT_UPDATES.TITLE': NoParams;
+    'SMART.PRODUCT_UPDATES.UNREAD': {
+        count: number;
+    };
+    'SMART.PRODUCT_UPDATES.BADGE.NEW': NoParams;
+};

package/ProductUpdates/polyglot/types.js

@@ -0,0 +1 @@
+export {};

package/ProductUpdates/styles.d.ts

@@ -0,0 +1 @@
+export declare const CardImage: import("styled-components").StyledComponent<"img", any, {}, never>;

package/ProductUpdates/styles.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { ShapeRadius } from '@pushwoosh/kit-constants';
+// The only rule kit-helpers cannot express: object-fit has no prop there, and it is
+// what keeps a wrongly proportioned upload from stretching the card.
+export const CardImage = styled.img.withConfig({
+  displayName: "CardImage",
+  componentId: "sc-11vonu6-0"
+})(["width:256px;height:160px;object-fit:cover;border-radius:", ";display:block;"], ShapeRadius.SECTION);

package/ProductUpdates/types.d.ts

@@ -0,0 +1,16 @@
+import type { Alert } from '@pushwoosh/rpc-v2-http-api-data/internal_alerts';
+export type ProductUpdate = Alert;
+export type ProductUpdatesProps = {
+    /** Opens the modal by itself once, when the user has never-read updates. */
+    readonly autoOpenOnUnread?: boolean;
+};
+export type ProductUpdatesModalProps = {
+    readonly isOpen: boolean;
+    readonly onClose: () => void;
+    readonly updates: ProductUpdate[];
+    readonly unreadCount: number;
+};
+export type ProductUpdateCardProps = {
+    readonly update: ProductUpdate;
+    readonly onNavigate: () => void;
+};

package/ProductUpdates/types.js

@@ -0,0 +1 @@
+export {};

package/index.d.ts

@@ -6,6 +6,7 @@ export * from './DynamicContentPickerForm';
 export * from './EmailTemplatePreview';
 export * from './ExportCSV';
 export * from './PlatformsConfigurationDrawer';
+export * from './ProductUpdates';
 export * from './LanguagesSelector';
 export * from './MediaStorage';
 export * from './mmsAttachments';

package/index.js

@@ -6,6 +6,7 @@ export * from './DynamicContentPickerForm';
 export * from './EmailTemplatePreview';
 export * from './ExportCSV';
 export * from './PlatformsConfigurationDrawer';
+export * from './ProductUpdates';
 export * from './LanguagesSelector';
 export * from './MediaStorage';
 export * from './mmsAttachments';

package/package.json

@@ -24,12 +24,12 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^1.1.202",
+    "@pushwoosh/dumb-components": "^1.1.209",
     "@pushwoosh/kit-constants": "^1.11.1",
     "@pushwoosh/kit-helpers": "^4.12.0",
-    "@pushwoosh/kit-icons": "^2.1.22",
+    "@pushwoosh/kit-icons": "^2.2.3",
     "@pushwoosh/kit-typography": "^1.7.6",
-    "@pushwoosh/rpc-v2-http-api-data": "^0.2.114",
+    "@pushwoosh/rpc-v2-http-api-data": "^0.2.151",
     "@pushwoosh/spa-context": "^1.7.1",
     "idb-keyval": "^6.2.2",
     "react-hook-form": "^7.68.0",
@@ -52,5 +52,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.3.16"
+  "version": "1.3.18"
 }