@pushwoosh/smart-components-kit 1.3.21 → 1.3.23

package/DynamicContentPickerForm/SimpleDynamicContentPickerFormSmart.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { FieldBox, NativeInput, Select, Spinner } from '@pushwoosh/dumb-components';
+import { Combobox, FieldBox, NativeInput, Spinner } from '@pushwoosh/dumb-components';
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { useDynamicContentTags } from './hooks';
 import { useLang } from './polyglot';
 import { SimpleTagPickerDiv } from './styled';
-import { buildOptions } from './utils';
+import { allDynamicContentModifiers, buildOptions } from './utils';
+const defaultModifier = 'regular';
+const matchesQuery = (value, query) => value.toLowerCase().includes(query.trim().toLowerCase());
 const defaultDynamicContent = {
   tagName: '',
-  modifier: 'regular',
+  modifier: defaultModifier,
   defaultValue: ''
 };
 export const SimpleDynamicContentPickerFormSmart = ({
@@ -37,10 +39,19 @@ export const SimpleDynamicContentPickerFormSmart = ({
     });
   }
   const options = buildOptions(systemVariables ?? [], asyncResult.value || []);
-  const selectedTag = options.find(option => option.name === dc.tagName) || {
-    name: '',
-    label: '',
-    modifiers: ['regular']
+  const pickedOption = options.find(option => option.name === dc.tagName);
+  const modifiers = pickedOption?.modifiers ?? allDynamicContentModifiers;
+  const isEmpty = !dc.tagName.trim();
+  const labelOf = name => options.find(option => option.name === name)?.label ?? name;
+  const changeTagName = (tagName, isPicked) => {
+    const option = options.find(item => item.name === tagName);
+    const nextModifiers = option?.modifiers ?? allDynamicContentModifiers;
+    const keepModifier = !isPicked && nextModifiers.includes(dc.modifier);
+    onChange({
+      tagName,
+      modifier: keepModifier ? dc.modifier : nextModifiers[0] ?? defaultModifier,
+      defaultValue: isPicked ? '' : dc.defaultValue
+    });
   };
   return _jsxs(SimpleTagPickerDiv, {
     children: [_jsx(FieldBox, {
@@ -49,43 +60,30 @@ export const SimpleDynamicContentPickerFormSmart = ({
       }),
       children: _jsxs(Vertical, {
         "$gap": 8,
-        children: [_jsx(Select, {
-          width: "auto",
-          menuPlacement: "auto",
-          value: {
-            value: dc.tagName,
-            label: selectedTag.name ? selectedTag.label : dc.tagName
-          },
-          onChange: option => {
-            const picked = options.find(item => item.name === option.value);
-            onChange({
-              tagName: option.value,
-              modifier: picked?.modifiers[0] ?? 'regular',
-              defaultValue: ''
-            });
-          },
-          options: options.map(option => ({
-            value: option.name,
-            label: option.label
-          }))
-        }), _jsx(Select, {
-          width: "auto",
-          menuPlacement: "auto",
-          value: {
-            value: dc.modifier,
-            label: dc.modifier
-          },
-          onChange: option => {
+        children: [_jsx(Combobox, {
+          value: dc.tagName,
+          onChange: (value, meta) => changeTagName(value, meta.source === 'select'),
+          items: options.map(option => option.name),
+          getLabel: name => name,
+          renderItem: name => labelOf(name),
+          filter: (name, query) => matchesQuery(name, query) || matchesQuery(labelOf(name), query),
+          placeholder: lang({
+            message: 'SMART.DYNAMIC_CONTENT_PICKER_FORM.TAG.PLACEHOLDER'
+          }),
+          fullWidth: true
+        }), _jsx(Combobox, {
+          select: true,
+          value: dc.modifier || null,
+          onChange: modifier => {
             onChange({
               ...dc,
-              modifier: option.value
+              modifier: modifier ?? ''
             });
           },
-          options: selectedTag.modifiers.map(modifier => ({
-            value: modifier,
-            label: modifier
-          })),
-          isDisabled: !selectedTag.name
+          items: modifiers,
+          getLabel: modifier => modifier,
+          disabled: isEmpty,
+          fullWidth: true
         })]
       })
     }), _jsx(FieldBox, {
@@ -100,7 +98,7 @@ export const SimpleDynamicContentPickerFormSmart = ({
             defaultValue: e.target.value
           });
         },
-        disabled: !selectedTag.name
+        disabled: isEmpty
       })
     }), children]
   });

package/DynamicContentPickerForm/utils.d.ts

@@ -1,3 +1,4 @@
 import { type FullTagData, type PickerOption, type SystemVariable, type VariedDynamicContent } from './types';
 export declare function buildOptions(systemVariables: SystemVariable[], tags: FullTagData[]): PickerOption[];
 export declare function createDefaultDynamicContent(kind: 'tag' | 'event' | 'customText'): VariedDynamicContent;
+export declare const allDynamicContentModifiers: string[];

package/DynamicContentPickerForm/utils.js

@@ -1,3 +1,4 @@
+import { DynamicContentModifiers } from '@pushwoosh/kit-constants';
 export function buildOptions(systemVariables, tags) {
   const taken = new Set(systemVariables.map(v => v.name));
   const system = systemVariables.map(v => ({
@@ -40,4 +41,5 @@ export function createDefaultDynamicContent(kind) {
         }
       };
   }
-}
+}
+export const allDynamicContentModifiers = [...DynamicContentModifiers.string, ...DynamicContentModifiers.integer.filter(modifier => !DynamicContentModifiers.string.includes(modifier))];

package/ProductUpdates/ProductUpdates.js

@@ -19,16 +19,20 @@ export function ProductUpdates({
     isLoading,
     hasUpdates,
     markAllRead,
-    clearNewBadges
+    clearNewBadges,
+    isImpersonation,
+    isImpersonationResolved
   } = useProductUpdates();
+  // Staff in impersonation must not auto-open: the modal would spend the client's read marks.
+  // Unresolved means the token is still being read, so hold rather than open and find out later.
   useEffect(() => {
-    if (!isAllowed || !autoOpenOnUnread || hasAutoOpened.current || unreadCount === 0) {
+    if (!isAllowed || !autoOpenOnUnread || hasAutoOpened.current || unreadCount === 0 || !isImpersonationResolved || isImpersonation) {
       return;
     }
     hasAutoOpened.current = true;
     setIsOpen(true);
     markAllRead();
-  }, [isAllowed, autoOpenOnUnread, unreadCount, markAllRead]);
+  }, [isAllowed, autoOpenOnUnread, unreadCount, markAllRead, isImpersonation, isImpersonationResolved]);
   const handleOpen = () => {
     setIsOpen(true);
     markAllRead();

package/ProductUpdates/hooks/useProductUpdates.d.ts

@@ -8,6 +8,10 @@ type UseProductUpdates = {
     readonly markAllRead: () => Promise<void>;
     /** Drops the NEW badges and the unread counter. Call on close, so they last while reading. */
     readonly clearNewBadges: () => void;
+    /** Staff viewing a client account from the super admin: no marks are written for them. */
+    readonly isImpersonation: boolean;
+    /** False until the access token is read, so an auto-open effect can hold instead of racing it. */
+    readonly isImpersonationResolved: boolean;
 };
 export declare function useProductUpdates(): UseProductUpdates;
 export {};

package/ProductUpdates/hooks/useProductUpdates.js

@@ -1,6 +1,7 @@
 import { useCallback, useRef, useState } from 'react';
 import { useAsync } from '@pushwoosh/kit-helpers';
 import { useSPAContext } from '@pushwoosh/spa-context';
+import { useIsStaffImpersonation } from '../../staffImpersonation';
 import { ALERT_STATUS_READ, ALERT_STATUS_UNREAD, ALERT_TYPE_PRODUCT_UPDATE, ORDER_BY_CREATED, ORDER_DIRECTION_DESC, MAX_VISIBLE_UPDATES } from '../constants';
 import { useIsAllowProductUpdates } from './useIsAllowProductUpdates';
 const EMPTY = [];
@@ -9,6 +10,10 @@ export function useProductUpdates() {
     rpcGateway
   } = useSPAContext();
   const isAllowed = useIsAllowProductUpdates();
+  const {
+    isImpersonation,
+    isResolved
+  } = useIsStaffImpersonation();
   const [areBadgesCleared, setAreBadgesCleared] = useState(false);
   const hasSentRef = useRef(false);
   const state = useAsync(async () => {
@@ -32,7 +37,9 @@ export function useProductUpdates() {
   // 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) {
+    // Read marks belong to the client's user, so staff writes none, and an unresolved check holds
+    // the mark rather than guessing. The flag is set before the first await: two calls send once.
+    if (hasSentRef.current || isImpersonation || !isResolved) {
       return;
     }
     const unread = fetched.filter(update => update.status === ALERT_STATUS_UNREAD);
@@ -51,7 +58,7 @@ export function useProductUpdates() {
       console.error('Failed to mark product updates as read:', error);
       hasSentRef.current = false;
     }
-  }, [rpcGateway, fetched]);
+  }, [rpcGateway, fetched, isImpersonation, isResolved]);
   const clearNewBadges = useCallback(() => setAreBadgesCleared(true), []);
   return {
     updates,
@@ -59,6 +66,8 @@ export function useProductUpdates() {
     isLoading: state.loading,
     hasUpdates: updates.length > 0,
     markAllRead,
-    clearNewBadges
+    clearNewBadges,
+    isImpersonation,
+    isImpersonationResolved: isResolved
   };
 }

package/RichMessageEditorSmart/NewDynamicContentForm.js

@@ -21,7 +21,7 @@ export const NewDynamicContentForm = ({
       children: _jsx(Button, {
         color: "secondary",
         onClick: () => onSubmit(dc),
-        isDisabled: !dc,
+        isDisabled: !dc?.tagName.trim(),
         children: lang({
           message: 'SMART.RICH_MESSAGE_EDITOR.INSERT'
         })

package/index.d.ts

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

package/index.js

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

package/package.json

@@ -33,6 +33,7 @@
     "@pushwoosh/rpc-v2-http-api-data": "^0.2.151",
     "@pushwoosh/spa-context": "^1.7.1",
     "idb-keyval": "^6.2.2",
+    "jwt-decode": "^4.0.0",
     "react-hook-form": "^7.68.0",
     "react-router-dom": "^5.3.4"
   },
@@ -54,5 +55,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.3.21"
+  "version": "1.3.23"
 }

package/staffImpersonation/index.d.ts

@@ -0,0 +1 @@
+export { useIsStaffImpersonation } from './useIsStaffImpersonation';

package/staffImpersonation/index.js

@@ -0,0 +1 @@
+export { useIsStaffImpersonation } from './useIsStaffImpersonation';

package/staffImpersonation/isStaffImpersonation.d.ts

@@ -0,0 +1,5 @@
+type AccessTokenSource = {
+    readonly getAccessToken: () => Promise<string>;
+};
+export declare function isStaffImpersonation(httpClient: AccessTokenSource): Promise<boolean>;
+export {};

package/staffImpersonation/isStaffImpersonation.js

@@ -0,0 +1,13 @@
+import { jwtDecode } from 'jwt-decode';
+// Staff coming from the super admin gets is_su with no parent user; a client switched into
+// their own child account gets is_su too, but with the parent user id filled in.
+export async function isStaffImpersonation(httpClient) {
+  try {
+    const claims = jwtDecode(await httpClient.getAccessToken());
+    const hasParentUser = claims.parent_user_id != null && claims.parent_user_id !== '0';
+    return claims.is_su === true && !hasParentUser;
+  } catch {
+    // Fail open: a client must not lose the feature because the token could not be read.
+    return false;
+  }
+}

package/staffImpersonation/isStaffImpersonation.test.d.ts

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

package/staffImpersonation/isStaffImpersonation.test.js

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest';
+import { isStaffImpersonation } from './isStaffImpersonation';
+function tokenWith(claims) {
+  const payload = Buffer.from(JSON.stringify(claims)).toString('base64url');
+  return `eyJhbGciOiJub25lIn0.${payload}.signature`;
+}
+function clientWith(token) {
+  return {
+    getAccessToken: async () => {
+      if (token instanceof Error) {
+        throw token;
+      }
+      return token;
+    }
+  };
+}
+describe('isStaffImpersonation', () => {
+  it('is false for a plain client login', async () => {
+    await expect(isStaffImpersonation(clientWith(tokenWith({
+      account_id: 42
+    })))).resolves.toBe(false);
+  });
+  it('is true for staff impersonation without parent_user_id', async () => {
+    await expect(isStaffImpersonation(clientWith(tokenWith({
+      is_su: true
+    })))).resolves.toBe(true);
+  });
+  it('is true for staff impersonation with parent_user_id "0"', async () => {
+    await expect(isStaffImpersonation(clientWith(tokenWith({
+      is_su: true,
+      parent_user_id: '0'
+    })))).resolves.toBe(true);
+  });
+  it('is false for a client switched into their own child account', async () => {
+    await expect(isStaffImpersonation(clientWith(tokenWith({
+      is_su: true,
+      parent_user_id: '77123'
+    })))).resolves.toBe(false);
+  });
+  it('is false when the token carries no claims at all', async () => {
+    await expect(isStaffImpersonation(clientWith(tokenWith({})))).resolves.toBe(false);
+  });
+  it('is false for a garbage token', async () => {
+    await expect(isStaffImpersonation(clientWith('not-a-jwt'))).resolves.toBe(false);
+  });
+  it('is false when there is no token to read', async () => {
+    await expect(isStaffImpersonation(clientWith(new Error('Unauthorized!')))).resolves.toBe(false);
+  });
+});

package/staffImpersonation/useIsStaffImpersonation.d.ts

@@ -0,0 +1,7 @@
+type UseIsStaffImpersonation = {
+    readonly isImpersonation: boolean;
+    /** False until the token is read, so a caller can hold an effect instead of racing it. */
+    readonly isResolved: boolean;
+};
+export declare function useIsStaffImpersonation(): UseIsStaffImpersonation;
+export {};

package/staffImpersonation/useIsStaffImpersonation.js

@@ -0,0 +1,13 @@
+import { useAsync } from '@pushwoosh/kit-helpers';
+import { useSPAContext } from '@pushwoosh/spa-context';
+import { isStaffImpersonation } from './isStaffImpersonation';
+export function useIsStaffImpersonation() {
+  const {
+    httpClient
+  } = useSPAContext();
+  const state = useAsync(() => isStaffImpersonation(httpClient), [httpClient]);
+  return {
+    isImpersonation: state.value ?? false,
+    isResolved: !state.loading
+  };
+}