@pushwoosh/smart-components-kit 1.3.15 → 1.3.17

package/MediaStorage/MediaStorage.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { Button, DropdownMenuButton, DropdownMenuItem, DropdownMenuSection, ModalConfirm, useToast } from '@pushwoosh/dumb-components';
+import { Button, Checkbox, DropdownMenuButton, DropdownMenuItem, DropdownMenuSection, ModalConfirm, useToast } from '@pushwoosh/dumb-components';
 import { FlexContainer, useAsync } from '@pushwoosh/kit-helpers';
 import { CheckIcon, EditIcon, TrashIcon, UploadIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import { CreateCropDrawer } from './CreateCropDrawer';
-import { useDeleteMediaFile } from './hooks';
+import { useDeleteMediaFile, useDeleteMediaFiles } from './hooks';
 import { formatBytes, getCropCaption, getThumbUrl } from './mediaFile.utils';
-import { useLang } from './polyglot';
-import { CropBadge, Dropzone, EmptyState, Grid, HiddenInput, Tile, TileActions, TileImage, UsageLine, WarningBadge } from './styled';
+import { Lang, useLang } from './polyglot';
+import { CropBadge, Dropzone, EmptyState, Grid, HiddenInput, SelectionBar, SelectionCount, Tile, TileActions, TileCheckbox, TileImage, UsageLine, WarningBadge } from './styled';
 const UPLOAD_PATH = '/api/media/upload';
 const ALLOWED_IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
 const isAllowedImage = file => {
@@ -42,6 +42,7 @@ export const MediaStorage = ({
     openToast
   } = useToast();
   const deleteMediaFile = useDeleteMediaFile(application);
+  const deleteMediaFiles = useDeleteMediaFiles(application);
   const uploadInputRef = useRef(null);
   // `uploadFiles` resolves asynchronously; read the latest page from the ref so
   // the post-upload decision isn't made on a value captured at click time.
@@ -58,6 +59,9 @@ export const MediaStorage = ({
   const [isDragOver, setIsDragOver] = useState(false);
   const [createCropFor, setCreateCropFor] = useState(null);
   const [pendingDelete, setPendingDelete] = useState(null);
+  const [selectedUuids, setSelectedUuids] = useState([]);
+  const [isBulkDeleteOpen, setIsBulkDeleteOpen] = useState(false);
+  const [isBulkDeleting, setIsBulkDeleting] = useState(false);
   // Format filtering belongs to the query, not the response: `total` and the page count come
   // from the filtered set, so a client-side filter would paginate over files it then hides.
   const listAsync = useAsync(async () => {
@@ -102,6 +106,7 @@ export const MediaStorage = ({
     const originals = listAsync.value?.files;
     if (!originals) return undefined;
     setCropsByUuid({});
+    setSelectedUuids([]);
     let cancelled = false;
     originals.forEach(file => {
       void (async () => {
@@ -209,6 +214,31 @@ export const MediaStorage = ({
     }
     setReloadToken(token => token + 1);
   };
+  const handleBulkDeleteConfirmed = async () => {
+    const uuids = selectedUuids;
+    setIsBulkDeleteOpen(false);
+    if (uuids.length === 0 || isBulkDeleting) return;
+    // The batch outlives the page it started on, so the step-back decision uses
+    // the page and count captured here and is skipped if the page moved since.
+    const pageAtStart = pageRef.current;
+    const countAtStart = filesCountRef.current;
+    setIsBulkDeleting(true);
+    try {
+      const deleted = await deleteMediaFiles(uuids);
+      if (deleted === 0) return;
+      setSelectedUuids([]);
+      if (deleted >= countAtStart && pageAtStart > 0 && pageRef.current === pageAtStart) {
+        onPageChange(pageAtStart - 1);
+      }
+      setReloadToken(token => token + 1);
+    } finally {
+      setIsBulkDeleting(false);
+    }
+  };
+  const toggleSelected = uuid => {
+    setSelectedUuids(prev => prev.includes(uuid) ? prev.filter(item => item !== uuid) : [...prev, uuid]);
+  };
+  const isAllSelected = files.length > 0 && selectedUuids.length === files.length;
   const totalPages = Math.ceil(total / perPage);
   const showPagination = !loading && files.length > 0 && totalPages > 1;
   return _jsxs(_Fragment, {
@@ -249,14 +279,55 @@ export const MediaStorage = ({
       children: lang({
         message: 'SMART.MEDIA_STORAGE.EMPTY'
       })
+    }), !loading && files.length > 0 && _jsxs(SelectionBar, {
+      children: [_jsx(Checkbox, {
+        label: lang({
+          message: 'SMART.MEDIA_STORAGE.SELECT_ALL'
+        }),
+        isChecked: isAllSelected,
+        isDisabled: isBulkDeleting,
+        isIndeterminate: selectedUuids.length > 0 && !isAllSelected,
+        onChange: () => setSelectedUuids(isAllSelected ? [] : files.map(file => file.uuid))
+      }), selectedUuids.length > 0 && _jsxs(_Fragment, {
+        children: [_jsx(SelectionCount, {
+          children: _jsx(Lang, {
+            message: "SMART.MEDIA_STORAGE.SELECTED_COUNT",
+            count: selectedUuids.length
+          })
+        }), _jsx(Button, {
+          color: "danger",
+          size: "compact",
+          view: "ghost",
+          icon: _jsx(TrashIcon, {
+            size: "small",
+            view: "lined"
+          }),
+          isLoading: isBulkDeleting,
+          isDisabled: isBulkDeleting,
+          onClick: () => setIsBulkDeleteOpen(true),
+          children: _jsx(Lang, {
+            message: "SMART.MEDIA_STORAGE.BULK_DELETE_BUTTON"
+          })
+        })]
+      })]
     }), !loading && files.length > 0 && _jsx(Grid, {
       children: files.map(file => {
         const crops = cropsByUuid[file.uuid] ?? [];
         const warning = fileWarning?.(file);
         return _jsxs(Tile, {
+          "$selected": selectedUuids.includes(file.uuid),
           children: [_jsx(TileImage, {
             src: getThumbUrl(file),
             alt: file.filename
+          }), _jsx(TileCheckbox, {
+            title: lang({
+              message: 'SMART.MEDIA_STORAGE.SELECT_FILE_HINT'
+            }),
+            children: _jsx(Checkbox, {
+              isChecked: selectedUuids.includes(file.uuid),
+              isDisabled: isBulkDeleting,
+              onChange: () => toggleSelected(file.uuid)
+            })
           }), crops.length > 0 && _jsx(CropBadge, {
             children: lang({
               message: 'SMART.MEDIA_STORAGE.CROPS_BADGE',
@@ -315,6 +386,7 @@ export const MediaStorage = ({
               "aria-label": lang({
                 message: 'SMART.MEDIA_STORAGE.DELETE_HINT'
               }),
+              isDisabled: isBulkDeleting,
               onClick: () => setPendingDelete(file)
             })]
           })]
@@ -332,7 +404,7 @@ export const MediaStorage = ({
           view: "ghost",
           color: "secondary",
           size: "field",
-          isDisabled: page <= 0,
+          isDisabled: page <= 0 || isBulkDeleting,
           onClick: () => onPageChange(page - 1),
           children: lang({
             message: 'SMART.MEDIA_STORAGE.PREV_BUTTON'
@@ -343,7 +415,7 @@ export const MediaStorage = ({
           view: "ghost",
           color: "secondary",
           size: "field",
-          isDisabled: page + 1 >= totalPages,
+          isDisabled: page + 1 >= totalPages || isBulkDeleting,
           onClick: () => onPageChange(page + 1),
           children: lang({
             message: 'SMART.MEDIA_STORAGE.NEXT_BUTTON'
@@ -378,6 +450,21 @@ export const MediaStorage = ({
       confirmButtonColor: "danger",
       onAccept: () => void handleDeleteConfirmed(),
       onCancel: () => setPendingDelete(null)
+    }), _jsx(ModalConfirm, {
+      isOpen: isBulkDeleteOpen,
+      title: lang({
+        message: 'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.TITLE',
+        count: selectedUuids.length
+      }),
+      description: lang({
+        message: 'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.DESCRIPTION'
+      }),
+      confirmButtonText: lang({
+        message: 'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.BUTTON'
+      }),
+      confirmButtonColor: "danger",
+      onAccept: () => void handleBulkDeleteConfirmed(),
+      onCancel: () => setIsBulkDeleteOpen(false)
     })]
   });
 };

package/MediaStorage/hooks.d.ts

@@ -1,7 +1,4 @@
-/**
- * Returns a function that deletes a media file (original or crop) and shows the
- * success/error toast. Resolves to `true` on success so the caller can run its
- * own post-delete routing (refetch, state update, pagination), `false` on
- * failure. Both `MediaStorage` and `CreateCropDrawer` share this.
- */
+/** Deletes one media file with its own toast; resolves to `true` on success. */
 export declare function useDeleteMediaFile(application: string): (uuid: string) => Promise<boolean>;
+/** Deletes media files in a bounded-concurrency batch; resolves to the number deleted. */
+export declare function useDeleteMediaFiles(application: string): (uuids: string[]) => Promise<number>;

package/MediaStorage/hooks.js

@@ -2,12 +2,7 @@ import { useToast } from '@pushwoosh/dumb-components';
 import { usePersistentFunction } from '@pushwoosh/kit-helpers';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import { useLang } from './polyglot';
-/**
- * Returns a function that deletes a media file (original or crop) and shows the
- * success/error toast. Resolves to `true` on success so the caller can run its
- * own post-delete routing (refetch, state update, pagination), `false` on
- * failure. Both `MediaStorage` and `CreateCropDrawer` share this.
- */
+/** Deletes one media file with its own toast; resolves to `true` on success. */
 export function useDeleteMediaFile(application) {
   const {
     rpcGateway
@@ -39,4 +34,54 @@ export function useDeleteMediaFile(application) {
       return false;
     }
   });
+}
+const DELETE_CONCURRENCY = 5;
+/** Deletes media files in a bounded-concurrency batch; resolves to the number deleted. */
+export function useDeleteMediaFiles(application) {
+  const {
+    rpcGateway
+  } = useSPAContext();
+  const {
+    openToast
+  } = useToast();
+  const lang = useLang();
+  return usePersistentFunction(async uuids => {
+    const queue = [...uuids];
+    let failed = 0;
+    const worker = async () => {
+      for (let uuid = queue.shift(); uuid !== undefined; uuid = queue.shift()) {
+        try {
+          await rpcGateway.mediaFiles.Delete({
+            application,
+            uuid
+          });
+        } catch {
+          failed += 1;
+        }
+      }
+    };
+    await Promise.all(Array.from({
+      length: Math.min(DELETE_CONCURRENCY, queue.length)
+    }, () => worker()));
+    const deleted = uuids.length - failed;
+    if (deleted > 0) {
+      openToast({
+        title: lang({
+          message: 'SMART.MEDIA_STORAGE.BULK_DELETE_SUCCESS',
+          count: deleted
+        }),
+        type: 'success'
+      });
+    }
+    if (failed > 0) {
+      openToast({
+        title: lang({
+          message: 'SMART.MEDIA_STORAGE.BULK_DELETE_ERROR',
+          count: failed
+        }),
+        type: 'error'
+      });
+    }
+    return deleted;
+  });
 }

package/MediaStorage/polyglot/messages_en.js

@@ -17,6 +17,15 @@ export const messages = {
   'SMART.MEDIA_STORAGE.DELETE_HINT': 'Delete',
   'SMART.MEDIA_STORAGE.DELETE_SUCCESS': 'Deleted',
   'SMART.MEDIA_STORAGE.DELETE_ERROR': 'Failed to delete',
+  'SMART.MEDIA_STORAGE.SELECT_ALL': 'Select all on page',
+  'SMART.MEDIA_STORAGE.SELECT_FILE_HINT': 'Select file',
+  'SMART.MEDIA_STORAGE.SELECTED_COUNT': '{{count}} selected',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_BUTTON': 'Delete selected',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_SUCCESS': '{{count}} files deleted',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_ERROR': 'Failed to delete {{count}} files',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.TITLE': 'Delete {{count}} files?',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.DESCRIPTION': 'Deleting an original also removes all of its crops. This can’t be undone.',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.BUTTON': 'Delete',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.TITLE': 'Delete this file?',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION': 'Deleting the original also removes all of its crops. This can’t be undone.',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.BUTTON': 'Delete',

package/MediaStorage/polyglot/messages_ru.js

@@ -17,6 +17,15 @@ export const messages = {
   'SMART.MEDIA_STORAGE.DELETE_HINT': 'Удалить',
   'SMART.MEDIA_STORAGE.DELETE_SUCCESS': 'Удалено',
   'SMART.MEDIA_STORAGE.DELETE_ERROR': 'Не удалось удалить',
+  'SMART.MEDIA_STORAGE.SELECT_ALL': 'Выбрать все на странице',
+  'SMART.MEDIA_STORAGE.SELECT_FILE_HINT': 'Выбрать файл',
+  'SMART.MEDIA_STORAGE.SELECTED_COUNT': 'Выбрано: {{count}}',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_BUTTON': 'Удалить выбранные',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_SUCCESS': 'Удалено файлов: {{count}}',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_ERROR': 'Не удалось удалить файлов: {{count}}',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.TITLE': 'Удалить {{count}} файлов?',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.DESCRIPTION': 'Удаление оригинала также удалит все его кропы. Действие необратимо.',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.BUTTON': 'Удалить',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.TITLE': 'Удалить файл?',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION': 'Удаление оригинала также удалит все его кропы. Действие необратимо.',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.BUTTON': 'Удалить',

package/MediaStorage/polyglot/types.d.ts

@@ -23,6 +23,23 @@ export type MediaStorageMessages = {
     'SMART.MEDIA_STORAGE.DELETE_HINT': NoParams;
     'SMART.MEDIA_STORAGE.DELETE_SUCCESS': NoParams;
     'SMART.MEDIA_STORAGE.DELETE_ERROR': NoParams;
+    'SMART.MEDIA_STORAGE.SELECT_ALL': NoParams;
+    'SMART.MEDIA_STORAGE.SELECT_FILE_HINT': NoParams;
+    'SMART.MEDIA_STORAGE.SELECTED_COUNT': {
+        count: number;
+    };
+    'SMART.MEDIA_STORAGE.BULK_DELETE_BUTTON': NoParams;
+    'SMART.MEDIA_STORAGE.BULK_DELETE_SUCCESS': {
+        count: number;
+    };
+    'SMART.MEDIA_STORAGE.BULK_DELETE_ERROR': {
+        count: number;
+    };
+    'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.TITLE': {
+        count: number;
+    };
+    'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.DESCRIPTION': NoParams;
+    'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.BUTTON': NoParams;
     'SMART.MEDIA_STORAGE.DELETE_CONFIRM.TITLE': NoParams;
     'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION': NoParams;
     'SMART.MEDIA_STORAGE.DELETE_CONFIRM.BUTTON': NoParams;

package/MediaStorage/styled.d.ts

@@ -1,8 +1,13 @@
 export declare const Grid: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Tile: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Tile: import("styled-components").StyledComponent<"div", any, {
+    $selected?: boolean;
+}, never>;
 export declare const TileImage: import("styled-components").StyledComponent<"img", any, {}, never>;
 export declare const CropBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const WarningBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TileCheckbox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SelectionBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SelectionCount: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const TileActions: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const EmptyState: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Dropzone: import("styled-components").StyledComponent<"button", any, {

package/MediaStorage/styled.js

@@ -8,7 +8,11 @@ export const Grid = styled.div.withConfig({
 export const Tile = styled.div.withConfig({
   displayName: "Tile",
   componentId: "sc-14317rj-1"
-})(["position:relative;border-radius:6px;overflow:hidden;border:1px solid ", ";transition:border-color 0.15s;&:hover{border-color:", ";}"], Color.DIVIDER, Color.PRIMARY);
+})(["position:relative;border-radius:6px;overflow:hidden;border:1px solid ", ";box-shadow:", ";transition:border-color 0.15s,box-shadow 0.15s;&:hover{border-color:", ";}"], ({
+  $selected
+}) => $selected ? Color.PRIMARY : Color.DIVIDER, ({
+  $selected
+}) => $selected ? `0 0 0 1px ${Color.PRIMARY}` : 'none', Color.PRIMARY);
 export const TileImage = styled.img.withConfig({
   displayName: "TileImage",
   componentId: "sc-14317rj-2"
@@ -21,17 +25,29 @@ export const WarningBadge = styled.span.withConfig({
   displayName: "WarningBadge",
   componentId: "sc-14317rj-4"
 })(["position:absolute;bottom:0;left:0;right:0;font-size:10px;line-height:1.2;text-align:center;color:", ";background:", ";padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;"], Color.CLEAR, Color.WARNING);
+export const TileCheckbox = styled.div.withConfig({
+  displayName: "TileCheckbox",
+  componentId: "sc-14317rj-5"
+})(["position:absolute;top:6px;left:6px;z-index:2;padding:2px;border-radius:4px;background:", ";"], Color.CLEAR);
+export const SelectionBar = styled.div.withConfig({
+  displayName: "SelectionBar",
+  componentId: "sc-14317rj-6"
+})(["display:flex;align-items:center;gap:12px;min-height:32px;margin-bottom:12px;"]);
+export const SelectionCount = styled.span.withConfig({
+  displayName: "SelectionCount",
+  componentId: "sc-14317rj-7"
+})(["font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
 export const TileActions = styled.div.withConfig({
   displayName: "TileActions",
-  componentId: "sc-14317rj-5"
-})(["position:absolute;top:6px;left:6px;display:flex;gap:6px;padding:4px;border-radius:8px;background:rgba(0,0,0,0.45);backdrop-filter:blur(2px);opacity:0;transition:opacity 0.15s;", ":hover &{opacity:1;}@media (hover:none){opacity:1;}"], Tile);
+  componentId: "sc-14317rj-8"
+})(["position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(0,0,0,0.45);backdrop-filter:blur(2px);opacity:0;transition:opacity 0.15s;", ":hover &{opacity:1;}@media (hover:none){opacity:1;}"], Tile);
 export const EmptyState = styled.div.withConfig({
   displayName: "EmptyState",
-  componentId: "sc-14317rj-6"
+  componentId: "sc-14317rj-9"
 })(["text-align:center;padding:48px 16px;color:", ";"], Color.LOCKED);
 export const Dropzone = styled.button.withConfig({
   displayName: "Dropzone",
-  componentId: "sc-14317rj-7"
+  componentId: "sc-14317rj-10"
 })(["width:100%;min-height:96px;margin-bottom:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;font:inherit;font-size:13px;color:", ";cursor:pointer;border:2px dashed ", ";border-radius:8px;background:", ";transition:border-color 0.15s,background 0.15s;&:hover{border-color:", ";}&:disabled{cursor:default;opacity:0.7;}"], Color.LOCKED, ({
   $dragOver
 }) => $dragOver ? Color.PRIMARY : Color.DIVIDER, ({
@@ -39,46 +55,46 @@ export const Dropzone = styled.button.withConfig({
 }) => $dragOver ? Color.SOFT_LIGHT : Color.CLEAR, Color.PRIMARY);
 export const HiddenInput = styled.input.withConfig({
   displayName: "HiddenInput",
-  componentId: "sc-14317rj-8"
+  componentId: "sc-14317rj-11"
 })(["display:none;"]);
 export const UsageLine = styled.div.withConfig({
   displayName: "UsageLine",
-  componentId: "sc-14317rj-9"
+  componentId: "sc-14317rj-12"
 })(["margin-left:auto;font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
 /* ---------- CreateCropDrawer ---------- */
 export const PreviewStage = styled.div.withConfig({
   displayName: "PreviewStage",
-  componentId: "sc-14317rj-10"
+  componentId: "sc-14317rj-13"
 })(["display:flex;align-items:center;justify-content:center;min-height:200px;max-height:360px;padding:12px;border:1px solid ", ";border-radius:6px;overflow:hidden;background:", ";"], Color.DIVIDER, Color.SOFT_LIGHT);
 export const PreviewFrame = styled.div.withConfig({
   displayName: "PreviewFrame",
-  componentId: "sc-14317rj-11"
+  componentId: "sc-14317rj-14"
 })(["aspect-ratio:", ";max-width:100%;max-height:336px;overflow:hidden;border-radius:4px;"], ({
   $ratio
 }) => $ratio);
 export const PreviewImage = styled.img.withConfig({
   displayName: "PreviewImage",
-  componentId: "sc-14317rj-12"
+  componentId: "sc-14317rj-15"
 })(["width:100%;height:100%;object-fit:cover;display:block;"]);
 export const FieldLabel = styled.div.withConfig({
   displayName: "FieldLabel",
-  componentId: "sc-14317rj-13"
+  componentId: "sc-14317rj-16"
 })(["font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:", ";margin-bottom:6px;"], Color.LOCKED);
 export const SizeInput = styled(NativeInput).withConfig({
   displayName: "SizeInput",
-  componentId: "sc-14317rj-14"
+  componentId: "sc-14317rj-17"
 })(["&[readonly]{background:", ";color:", ";}"], Color.SOFT_LIGHT, Color.LOCKED);
 export const Chips = styled.div.withConfig({
   displayName: "Chips",
-  componentId: "sc-14317rj-15"
+  componentId: "sc-14317rj-18"
 })(["display:flex;flex-wrap:wrap;gap:7px;"]);
 export const Segment = styled.div.withConfig({
   displayName: "Segment",
-  componentId: "sc-14317rj-16"
+  componentId: "sc-14317rj-19"
 })(["display:inline-flex;border:1px solid ", ";border-radius:6px;overflow:hidden;"], Color.DIVIDER);
 export const SegmentItem = styled.button.withConfig({
   displayName: "SegmentItem",
-  componentId: "sc-14317rj-17"
+  componentId: "sc-14317rj-20"
 })(["font:inherit;font-size:13px;cursor:pointer;padding:7px 14px;border:none;background:", ";color:", ";& + &{border-left:1px solid ", ";}"], ({
   $active
 }) => $active ? Color.PRIMARY : Color.CLEAR, ({
@@ -86,17 +102,17 @@ export const SegmentItem = styled.button.withConfig({
 }) => $active ? Color.CLEAR : Color.MAIN, Color.DIVIDER);
 export const CropStrip = styled.div.withConfig({
   displayName: "CropStrip",
-  componentId: "sc-14317rj-18"
+  componentId: "sc-14317rj-21"
 })(["display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;"]);
 export const CropThumb = styled.div.withConfig({
   displayName: "CropThumb",
-  componentId: "sc-14317rj-19"
+  componentId: "sc-14317rj-22"
 })(["position:relative;width:88px;border:1px solid ", ";border-radius:6px;overflow:hidden;background:", ";"], Color.DIVIDER, Color.SOFT_LIGHT);
 export const CropThumbDelete = styled.div.withConfig({
   displayName: "CropThumbDelete",
-  componentId: "sc-14317rj-20"
+  componentId: "sc-14317rj-23"
 })(["position:absolute;top:4px;right:4px;opacity:0;transition:opacity 0.15s;", ":hover &{opacity:1;}@media (hover:none){opacity:1;}"], CropThumb);
 export const CropThumbCaption = styled.div.withConfig({
   displayName: "CropThumbCaption",
-  componentId: "sc-14317rj-21"
+  componentId: "sc-14317rj-24"
 })(["font-size:10px;text-align:center;padding:3px 2px;color:", ";"], Color.LOCKED);

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,57 @@
+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
+  } = useProductUpdates();
+  useEffect(() => {
+    if (!isAllowed || !autoOpenOnUnread || hasAutoOpened.current || unreadCount === 0) {
+      return;
+    }
+    hasAutoOpened.current = true;
+    setIsOpen(true);
+  }, [isAllowed, autoOpenOnUnread, unreadCount]);
+  const handleClose = () => {
+    setIsOpen(false);
+    markAllRead();
+  };
+  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: () => setIsOpen(true),
+      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,33 @@
+// 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.
+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;
+  }
+  history.push(`${url.pathname}${url.search}${url.hash}`);
+  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,10 @@
+import type { ProductUpdate } from '../types';
+type UseProductUpdates = {
+    readonly updates: ProductUpdate[];
+    readonly unreadCount: number;
+    readonly isLoading: boolean;
+    readonly hasUpdates: boolean;
+    readonly markAllRead: () => Promise<void>;
+};
+export declare function useProductUpdates(): UseProductUpdates;
+export {};

package/ProductUpdates/hooks/useProductUpdates.js

@@ -0,0 +1,57 @@
+import { useCallback, 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 [isMarkedRead, setIsMarkedRead] = useState(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;
+  // 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 => ({
+    ...update,
+    status: ALERT_STATUS_READ
+  })) : fetched;
+  const markAllRead = useCallback(async () => {
+    const unread = fetched.filter(update => update.status === ALERT_STATUS_UNREAD);
+    if (unread.length === 0) {
+      return;
+    }
+    try {
+      await rpcGateway.internalAlerts.UpdateStatus({
+        alerts: unread.map(update => ({
+          uuid: update.uuid,
+          status: ALERT_STATUS_READ
+        }))
+      });
+      setIsMarkedRead(true);
+    } catch (error) {
+      console.error('Failed to mark product updates as read:', error);
+    }
+  }, [rpcGateway, fetched]);
+  return {
+    updates,
+    unreadCount: updates.filter(update => update.status === ALERT_STATUS_UNREAD).length,
+    isLoading: state.loading,
+    hasUpdates: updates.length > 0,
+    markAllRead
+  };
+}

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.15"
+  "version": "1.3.17"
 }