@pushwoosh/smart-components-kit 1.3.4 → 1.3.6

package/MediaStorage/MediaStorage.js

@@ -9,7 +9,7 @@ import { CreateCropDrawer } from './CreateCropDrawer';
 import { useDeleteMediaFile } from './hooks';
 import { formatBytes, getCropCaption, getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
-import { CropBadge, Dropzone, EmptyState, Grid, HiddenInput, Tile, TileActions, TileImage, UsageLine } from './styled';
+import { CropBadge, Dropzone, EmptyState, Grid, HiddenInput, Tile, TileActions, TileImage, UsageLine, WarningBadge } from './styled';
 const UPLOAD_PATH = '/api/media/upload';
 const ALLOWED_IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
 const isAllowedImage = file => {
@@ -26,7 +26,9 @@ export const MediaStorage = ({
   page,
   perPage,
   onPageChange,
-  onSelect
+  onSelect,
+  extensions,
+  fileWarning
 }) => {
   const lang = useLang();
   const {
@@ -56,18 +58,21 @@ export const MediaStorage = ({
   const [isDragOver, setIsDragOver] = useState(false);
   const [createCropFor, setCreateCropFor] = useState(null);
   const [pendingDelete, setPendingDelete] = useState(null);
+  // 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 () => {
     const response = await rpcGateway.mediaFiles.List({
       application,
       page,
-      perPage
+      perPage,
+      extensions
     });
     // protobuf JSON omits empty `repeated` fields, so `files` can be undefined.
     return {
       files: response.files ?? [],
       total: response.total
     };
-  }, [rpcGateway, application, page, perPage, reloadToken]);
+  }, [rpcGateway, application, page, perPage, extensions, reloadToken]);
   const usageAsync = useAsync(() => rpcGateway.mediaFiles.GetUsage({
     application
   }), [rpcGateway, application, reloadToken, usageToken]);
@@ -103,7 +108,8 @@ export const MediaStorage = ({
         try {
           const response = await rpcGateway.mediaFiles.List({
             application,
-            parentUuid: file.uuid
+            parentUuid: file.uuid,
+            extensions
           });
           if (cancelled) return;
           setCropsByUuid(prev => ({
@@ -118,7 +124,7 @@ export const MediaStorage = ({
     return () => {
       cancelled = true;
     };
-  }, [listAsync.value, rpcGateway, application]);
+  }, [listAsync.value, rpcGateway, application, extensions]);
   const uploadFiles = async selected => {
     if (selected.length === 0) return;
     const images = selected.filter(isAllowedImage);
@@ -246,6 +252,7 @@ export const MediaStorage = ({
     }), !loading && files.length > 0 && _jsx(Grid, {
       children: files.map(file => {
         const crops = cropsByUuid[file.uuid] ?? [];
+        const warning = fileWarning?.(file);
         return _jsxs(Tile, {
           children: [_jsx(TileImage, {
             src: getThumbUrl(file),
@@ -255,6 +262,9 @@ export const MediaStorage = ({
               message: 'SMART.MEDIA_STORAGE.CROPS_BADGE',
               count: crops.length
             })
+          }), warning && _jsx(WarningBadge, {
+            title: warning,
+            children: warning
           }), _jsxs(TileActions, {
             children: [crops.length > 0 ? _jsx(DropdownMenuButton, {
               color: "secondary",

package/MediaStorage/MediaStoragePaginated.js

@@ -11,7 +11,9 @@ export const MediaStoragePaginated = ({
   application,
   initialPage = 0,
   perPage = DEFAULT_PER_PAGE,
-  onSelect
+  onSelect,
+  extensions,
+  fileWarning
 }) => {
   const [page, setPage] = useState(initialPage);
   return _jsx(MediaStorage, {
@@ -19,6 +21,8 @@ export const MediaStoragePaginated = ({
     page: page,
     perPage: perPage,
     onPageChange: setPage,
-    onSelect: onSelect
+    onSelect: onSelect,
+    extensions: extensions,
+    fileWarning: fileWarning
   });
 };

package/MediaStorage/styled.d.ts

@@ -2,6 +2,7 @@ export declare const Grid: import("styled-components").StyledComponent<"div", an
 export declare const Tile: import("styled-components").StyledComponent<"div", any, {}, 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 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

@@ -17,17 +17,21 @@ export const CropBadge = styled.span.withConfig({
   displayName: "CropBadge",
   componentId: "sc-14317rj-3"
 })(["position:absolute;top:6px;right:6px;font-size:10px;font-weight:", ";line-height:1;color:", ";background:", ";border-radius:20px;padding:3px 7px;pointer-events:none;"], FontWeight.BOLD, Color.CLEAR, Color.PRIMARY);
+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 TileActions = styled.div.withConfig({
   displayName: "TileActions",
-  componentId: "sc-14317rj-4"
+  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);
 export const EmptyState = styled.div.withConfig({
   displayName: "EmptyState",
-  componentId: "sc-14317rj-5"
+  componentId: "sc-14317rj-6"
 })(["text-align:center;padding:48px 16px;color:", ";"], Color.LOCKED);
 export const Dropzone = styled.button.withConfig({
   displayName: "Dropzone",
-  componentId: "sc-14317rj-6"
+  componentId: "sc-14317rj-7"
 })(["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, ({
@@ -35,46 +39,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-7"
+  componentId: "sc-14317rj-8"
 })(["display:none;"]);
 export const UsageLine = styled.div.withConfig({
   displayName: "UsageLine",
-  componentId: "sc-14317rj-8"
+  componentId: "sc-14317rj-9"
 })(["margin-left:auto;font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
 /* ---------- CreateCropDrawer ---------- */
 export const PreviewStage = styled.div.withConfig({
   displayName: "PreviewStage",
-  componentId: "sc-14317rj-9"
+  componentId: "sc-14317rj-10"
 })(["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-10"
+  componentId: "sc-14317rj-11"
 })(["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-11"
+  componentId: "sc-14317rj-12"
 })(["width:100%;height:100%;object-fit:cover;display:block;"]);
 export const FieldLabel = styled.div.withConfig({
   displayName: "FieldLabel",
-  componentId: "sc-14317rj-12"
+  componentId: "sc-14317rj-13"
 })(["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-13"
+  componentId: "sc-14317rj-14"
 })(["&[readonly]{background:", ";color:", ";}"], Color.SOFT_LIGHT, Color.LOCKED);
 export const Chips = styled.div.withConfig({
   displayName: "Chips",
-  componentId: "sc-14317rj-14"
+  componentId: "sc-14317rj-15"
 })(["display:flex;flex-wrap:wrap;gap:7px;"]);
 export const Segment = styled.div.withConfig({
   displayName: "Segment",
-  componentId: "sc-14317rj-15"
+  componentId: "sc-14317rj-16"
 })(["display:inline-flex;border:1px solid ", ";border-radius:6px;overflow:hidden;"], Color.DIVIDER);
 export const SegmentItem = styled.button.withConfig({
   displayName: "SegmentItem",
-  componentId: "sc-14317rj-16"
+  componentId: "sc-14317rj-17"
 })(["font:inherit;font-size:13px;cursor:pointer;padding:7px 14px;border:none;background:", ";color:", ";& + &{border-left:1px solid ", ";}"], ({
   $active
 }) => $active ? Color.PRIMARY : Color.CLEAR, ({
@@ -82,17 +86,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-17"
+  componentId: "sc-14317rj-18"
 })(["display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;"]);
 export const CropThumb = styled.div.withConfig({
   displayName: "CropThumb",
-  componentId: "sc-14317rj-18"
+  componentId: "sc-14317rj-19"
 })(["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-19"
+  componentId: "sc-14317rj-20"
 })(["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-20"
+  componentId: "sc-14317rj-21"
 })(["font-size:10px;text-align:center;padding:3px 2px;color:", ";"], Color.LOCKED);

package/MediaStorage/types.d.ts

@@ -1,5 +1,20 @@
 import type { MediaFile } from '@pushwoosh/rpc-v2-http-api-data/media_files';
-export type MediaStorageProps = {
+/** Per-channel options both gallery entry points accept; `MediaStoragePaginated` forwards them as-is. */
+type MediaFileChannelOptions = {
+    /**
+     * Shows only files whose stored path ends with one of these extensions (`"jpg"` or `".jpg"`,
+     * case-insensitive); omit to show the whole library. The list goes into the `List` request,
+     * so `total` and the page count match what is rendered — filtering the response instead
+     * would let a page collapse to zero tiles while later pages still hold matches.
+     */
+    extensions?: string[];
+    /**
+     * Warning to show on a file's tile, or undefined for none. The text belongs to the caller:
+     * the kit has no opinion on why a file is risky for a particular channel.
+     */
+    fileWarning?: (file: MediaFile) => string | undefined;
+};
+export type MediaStorageProps = MediaFileChannelOptions & {
     /** Application code whose media files are listed. */
     application: string;
     /** Current page (zero-based). Controlled by the parent. */
@@ -12,7 +27,7 @@ export type MediaStorageProps = {
      * asset, `uuid` its gallery id. */
     onSelect: (file: MediaFile) => void;
 };
-export type MediaStoragePaginatedProps = {
+export type MediaStoragePaginatedProps = MediaFileChannelOptions & {
     /** Application code whose media files are listed. */
     application: string;
     /** Initial page to load (zero-based). Defaults to 0. */
@@ -23,3 +38,4 @@ export type MediaStoragePaginatedProps = {
      * asset, `uuid` its gallery id. */
     onSelect: (file: MediaFile) => void;
 };
+export {};

package/index.d.ts

@@ -8,6 +8,7 @@ export * from './ExportCSV';
 export * from './PlatformsConfigurationDrawer';
 export * from './LanguagesSelector';
 export * from './MediaStorage';
+export * from './mmsAttachments';
 export * from './ResendModal';
 export * from './RichMessageEditorSmart';
 export * from './Table';

package/index.js

@@ -8,6 +8,7 @@ export * from './ExportCSV';
 export * from './PlatformsConfigurationDrawer';
 export * from './LanguagesSelector';
 export * from './MediaStorage';
+export * from './mmsAttachments';
 export * from './ResendModal';
 export * from './RichMessageEditorSmart';
 export * from './Table';

package/mmsAttachments/index.d.ts

@@ -0,0 +1 @@
+export { MMS_ALLOWED_EXTENSIONS, MMS_MAX_ATTACHMENTS, MMS_SAFE_FILE_SIZE_BYTES, MMS_SUBJECT_MAX_ASCII_LENGTH, MMS_SUBJECT_MAX_UNICODE_LENGTH, getMmsSubjectLength, getMmsSubjectMaxLength, isMmsAttachmentOversized, isMmsAttachmentUrl, isMmsMessageAtValid, isMmsSubjectTooLong, } from './rules';

package/mmsAttachments/index.js

@@ -0,0 +1 @@
+export { MMS_ALLOWED_EXTENSIONS, MMS_MAX_ATTACHMENTS, MMS_SAFE_FILE_SIZE_BYTES, MMS_SUBJECT_MAX_ASCII_LENGTH, MMS_SUBJECT_MAX_UNICODE_LENGTH, getMmsSubjectLength, getMmsSubjectMaxLength, isMmsAttachmentOversized, isMmsAttachmentUrl, isMmsMessageAtValid, isMmsSubjectTooLong } from './rules';

package/mmsAttachments/rules.d.ts

@@ -0,0 +1,35 @@
+import type { MediaFile } from '@pushwoosh/rpc-v2-http-api-data/media_files';
+/**
+ * Limits mirrored from messaging-api validation (`internal/api/validation/content-sms.go`).
+ * Breaking any of them is a hard 2073/2074 error on send, so the form must not let it through.
+ */
+export declare const MMS_MAX_ATTACHMENTS = 3;
+export declare const MMS_SUBJECT_MAX_ASCII_LENGTH = 40;
+export declare const MMS_SUBJECT_MAX_UNICODE_LENGTH = 13;
+export declare const MMS_ALLOWED_EXTENSIONS: string[];
+/**
+ * Attachments above this stay compatible with older networks and handsets. It is a
+ * recommendation, not a provider limit — warn, never block.
+ */
+export declare const MMS_SAFE_FILE_SIZE_BYTES: number;
+/**
+ * The provider downloads the attachment itself, so it has to be a public https url whose
+ * *path* ends with a supported image extension. Checking the path (not the whole url) matches
+ * the backend and keeps query strings — signatures, cache busters — from passing as extensions.
+ *
+ * The same rule also hides WebP and the legacy media-library files stored without an extension:
+ * both are fetchable, neither is accepted downstream.
+ */
+export declare const isMmsAttachmentUrl: (url: string) => boolean;
+/** Whether the file is large enough to warrant the "may not arrive" warning. */
+export declare const isMmsAttachmentOversized: (file: MediaFile) => boolean;
+/**
+ * Subject length budget: the provider counts non-ASCII subjects against a much shorter
+ * limit, so a single non-ASCII character drops the whole subject to 13.
+ */
+export declare const getMmsSubjectMaxLength: (subject: string) => number;
+/** Subject length in characters, counting astral symbols (emoji) as one. */
+export declare const getMmsSubjectLength: (subject: string) => number;
+export declare const isMmsSubjectTooLong: (subject: string) => boolean;
+/** Whether message_at points at one of the attachments, as the backend requires. */
+export declare const isMmsMessageAtValid: (messageAt: number, attachmentsCount: number) => boolean;

package/mmsAttachments/rules.js

@@ -0,0 +1,46 @@
+/**
+ * Limits mirrored from messaging-api validation (`internal/api/validation/content-sms.go`).
+ * Breaking any of them is a hard 2073/2074 error on send, so the form must not let it through.
+ */
+export const MMS_MAX_ATTACHMENTS = 3;
+export const MMS_SUBJECT_MAX_ASCII_LENGTH = 40;
+export const MMS_SUBJECT_MAX_UNICODE_LENGTH = 13;
+export const MMS_ALLOWED_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif'];
+/**
+ * Attachments above this stay compatible with older networks and handsets. It is a
+ * recommendation, not a provider limit — warn, never block.
+ */
+export const MMS_SAFE_FILE_SIZE_BYTES = 300 * 1024;
+/**
+ * The provider downloads the attachment itself, so it has to be a public https url whose
+ * *path* ends with a supported image extension. Checking the path (not the whole url) matches
+ * the backend and keeps query strings — signatures, cache busters — from passing as extensions.
+ *
+ * The same rule also hides WebP and the legacy media-library files stored without an extension:
+ * both are fetchable, neither is accepted downstream.
+ */
+export const isMmsAttachmentUrl = url => {
+  let parsed;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return false;
+  }
+  if (parsed.protocol !== 'https:' || !parsed.host) return false;
+  const path = parsed.pathname.toLowerCase();
+  return MMS_ALLOWED_EXTENSIONS.some(extension => path.endsWith(extension));
+};
+/** Whether the file is large enough to warrant the "may not arrive" warning. */
+export const isMmsAttachmentOversized = file => file.fileSize > MMS_SAFE_FILE_SIZE_BYTES;
+/**
+ * Subject length budget: the provider counts non-ASCII subjects against a much shorter
+ * limit, so a single non-ASCII character drops the whole subject to 13.
+ */
+export const getMmsSubjectMaxLength = subject =>
+// eslint-disable-next-line no-control-regex
+/^[\x00-\x7F]*$/.test(subject) ? MMS_SUBJECT_MAX_ASCII_LENGTH : MMS_SUBJECT_MAX_UNICODE_LENGTH;
+/** Subject length in characters, counting astral symbols (emoji) as one. */
+export const getMmsSubjectLength = subject => [...subject].length;
+export const isMmsSubjectTooLong = subject => getMmsSubjectLength(subject) > getMmsSubjectMaxLength(subject);
+/** Whether message_at points at one of the attachments, as the backend requires. */
+export const isMmsMessageAtValid = (messageAt, attachmentsCount) => Number.isInteger(messageAt) && messageAt >= 0 && messageAt < attachmentsCount;

package/package.json

@@ -24,12 +24,12 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^1.1.175",
+    "@pushwoosh/dumb-components": "^1.1.182",
     "@pushwoosh/kit-constants": "^1.8.0",
     "@pushwoosh/kit-helpers": "^4.12.0",
     "@pushwoosh/kit-icons": "^2.1.22",
     "@pushwoosh/kit-typography": "^1.7.6",
-    "@pushwoosh/rpc-v2-http-api-data": "^0.2.70",
+    "@pushwoosh/rpc-v2-http-api-data": "^0.2.105",
     "@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.4"
+  "version": "1.3.6"
 }