@pushwoosh/dumb-components 1.1.223 → 1.1.224

package/EmailTemplatePreview/EmailTemplatePreview.js

@@ -42,6 +42,7 @@ export function EmailTemplatePreview(props) {
     onReady
   } = props;
   const clickMapItems = clickMap?.items;
+  const clickMapMode = clickMap?.mode;
   const clickMapActiveKey = clickMap?.activeKey;
   const clickMapOnSelect = clickMap?.onSelect;
   const clickMapOnPlaced = clickMap?.onPlaced;
@@ -60,6 +61,7 @@ export function EmailTemplatePreview(props) {
   const handleReady = useCallback(frameDocument => {
     const cleanups = [onReady?.(frameDocument), clickMapItems && decorateClickMap(frameDocument, {
       items: clickMapItems,
+      mode: clickMapMode,
       activeKey: clickMapActiveKey,
       scale,
       onSelect: clickMapOnSelect,
@@ -68,7 +70,7 @@ export function EmailTemplatePreview(props) {
     return () => {
       cleanups.forEach(cleanup => cleanup?.());
     };
-  }, [onReady, clickMapItems, clickMapActiveKey, clickMapOnSelect, clickMapOnPlaced, scale]);
+  }, [onReady, clickMapItems, clickMapMode, clickMapActiveKey, clickMapOnSelect, clickMapOnPlaced, scale]);
   return _jsx(IframeStyled, {
     ...LIGHT_ISLAND_PROPS,
     "$scale": scale,

package/EmailTemplatePreview/__tests__/clickMap.test.js

@@ -1,4 +1,4 @@
-import { CLICK_MAP_BADGE_ATTRIBUTE, decorateClickMap, matchClickMapItems } from '../clickMap';
+import { CLICK_MAP_BADGE_ATTRIBUTE, CLICK_MAP_HEAT_ATTRIBUTE, decorateClickMap, matchClickMapItems } from '../clickMap';
 const PROMO = 'http://spartak.com/matchtowin';
 const TICKETS = 'https://tickets.spartak.com/zones/18956';
 const SHOP = 'https://shop.spartak.com/';
@@ -135,4 +135,34 @@ describe('decorateClickMap', () => {
     expect(frameDocument.querySelectorAll(`[${CLICK_MAP_BADGE_ATTRIBUTE}]`)).toHaveLength(0);
     expect(frameDocument.querySelector('a strong')?.parentElement?.style.outline).toBe('');
   });
+});
+describe('decorateClickMap in heat mode', () => {
+  it('tints every matched anchor by its share of clicks and counts only the active one', () => {
+    const frameDocument = createDocument();
+    const items = [item('button', PROMO, 'Перейти на страницу акции', 1000), item('image', PROMO, '', 250), item('gone', 'https://old.example.com/', 'x', 5)];
+    const cleanup = decorateClickMap(frameDocument, {
+      items,
+      mode: 'heat',
+      activeKey: 'image'
+    });
+    const heats = [...frameDocument.querySelectorAll(`[${CLICK_MAP_HEAT_ATTRIBUTE}]`)];
+    const badges = [...frameDocument.querySelectorAll(`[${CLICK_MAP_BADGE_ATTRIBUTE}]`)];
+    const alpha = heat => Number(heat.style.backgroundColor.match(/[\d.]+\)$/)?.[0].slice(0, -1));
+    expect(heats.map(heat => heat.getAttribute(CLICK_MAP_HEAT_ATTRIBUTE))).toEqual(['button', 'image']);
+    expect(alpha(heats[0])).toBeGreaterThan(alpha(heats[1]));
+    expect(badges.map(badge => [badge.getAttribute(CLICK_MAP_BADGE_ATTRIBUTE), badge.textContent])).toEqual([['image', '250']]);
+    cleanup();
+    expect(frameDocument.querySelectorAll(`[${CLICK_MAP_HEAT_ATTRIBUTE}], [${CLICK_MAP_BADGE_ATTRIBUTE}]`)).toHaveLength(0);
+  });
+  it('selects a row by clicking its heat overlay', () => {
+    const frameDocument = createDocument();
+    const onSelect = jest.fn();
+    decorateClickMap(frameDocument, {
+      items: [item('text', PROMO, 'странице акции', 1)],
+      mode: 'heat',
+      onSelect
+    });
+    frameDocument.querySelector(`[${CLICK_MAP_HEAT_ATTRIBUTE}]`)?.click();
+    expect(onSelect).toHaveBeenCalledWith('text');
+  });
 });

package/EmailTemplatePreview/clickMap.d.ts

@@ -1,4 +1,4 @@
-import type { EmailClickMapItem, EmailClickMapPlacement } from './types';
+import type { EmailClickMapItem, EmailClickMapMode, EmailClickMapPlacement } from './types';
 /** An anchor of the rendered template together with the rows recorded on it. */
 export type EmailClickMapMatch = {
     anchor: HTMLAnchorElement;
@@ -12,6 +12,7 @@ export type EmailClickMapMatchResult = {
 /** Options of {@link decorateClickMap}. */
 export type EmailClickMapDecorateOptions = {
     items: EmailClickMapItem[];
+    mode?: EmailClickMapMode;
     activeKey?: string | null;
     scale?: number;
     onSelect?: (key: string) => void;
@@ -21,7 +22,9 @@ export type EmailClickMapDecorateOptions = {
 export declare const CLICK_MAP_BADGE_ATTRIBUTE = "data-pw-click-map-badge";
 /** Stable anchor id stamped into the template html on save; the click carries it as `linkId`. */
 export declare const CLICK_MAP_LINK_ID_ATTRIBUTE = "data-pw-lid";
+/** Attribute every heat overlay carries, so tests and consumers can find them. */
+export declare const CLICK_MAP_HEAT_ATTRIBUTE = "data-pw-click-map-heat";
 /** Lands click-tracking rows on template anchors by stamped `linkId`, else by (link, text), else every anchor of the link. */
 export declare function matchClickMapItems(document: Document, items: EmailClickMapItem[]): EmailClickMapMatchResult;
-/** Draws click-count badges over matched anchors, outlines `activeKey`; returns a cleanup. */
+/** Draws the click map over matched anchors (counts in `badges` mode, tints in `heat`), outlines `activeKey`; returns a cleanup. */
 export declare function decorateClickMap(document: Document, options: EmailClickMapDecorateOptions): () => void;

package/EmailTemplatePreview/clickMap.js

@@ -2,6 +2,10 @@
 export const CLICK_MAP_BADGE_ATTRIBUTE = 'data-pw-click-map-badge';
 /** Stable anchor id stamped into the template html on save; the click carries it as `linkId`. */
 export const CLICK_MAP_LINK_ID_ATTRIBUTE = 'data-pw-lid';
+/** Attribute every heat overlay carries, so tests and consumers can find them. */
+export const CLICK_MAP_HEAT_ATTRIBUTE = 'data-pw-click-map-heat';
+const HEAT_MIN_ALPHA = 0.18;
+const HEAT_MAX_ALPHA = 0.7;
 const ACTIVE_COLOR = '#00b2ff';
 const IDLE_COLOR = 'rgba(36, 48, 66, 0.82)';
 const compactNumber = new Intl.NumberFormat('en', {
@@ -96,29 +100,64 @@ function createBadge(document, match, options) {
   });
   return badge;
 }
-/** Draws click-count badges over matched anchors, outlines `activeKey`; returns a cleanup. */
+const matchClicks = match => match.items.reduce((sum, item) => sum + item.clicks, 0);
+const isActiveMatch = (match, options) => options.activeKey != null && match.items.some(item => item.key === options.activeKey);
+function createHeat(document, match, maxClicks, options) {
+  const share = maxClicks > 0 ? matchClicks(match) / maxClicks : 0;
+  const heat = document.createElement('span');
+  heat.setAttribute(CLICK_MAP_HEAT_ATTRIBUTE, match.items.map(item => item.key).join(' '));
+  heat.title = match.items.map(item => `${item.title || item.link}: ${item.clicks}`).join('\n');
+  Object.assign(heat.style, {
+    position: 'absolute',
+    zIndex: '2147483646',
+    borderRadius: `${4 * (options.scale ?? 1)}px`,
+    backgroundColor: `rgba(0, 178, 255, ${(HEAT_MIN_ALPHA + (HEAT_MAX_ALPHA - HEAT_MIN_ALPHA) * share).toFixed(2)})`,
+    cursor: options.onSelect ? 'pointer' : 'default'
+  });
+  heat.addEventListener('click', event => {
+    event.preventDefault();
+    event.stopPropagation();
+    options.onSelect?.(match.items[0].key);
+  });
+  return heat;
+}
+/** Draws the click map over matched anchors (counts in `badges` mode, tints in `heat`), outlines `activeKey`; returns a cleanup. */
 export function decorateClickMap(document, options) {
   const view = document.defaultView;
+  const heatMode = options.mode === 'heat';
   const {
     matches,
     placement
   } = matchClickMapItems(document, options.items);
-  const badges = matches.map(match => createBadge(document, match, options));
-  const outlined = matches.filter(match => options.activeKey != null && match.items.some(item => item.key === options.activeKey)).map(match => [match.anchor, match.anchor.style.outline]);
+  const maxClicks = Math.max(0, ...matches.map(matchClicks));
+  const heats = heatMode ? matches.map(match => createHeat(document, match, maxClicks, options)) : [];
+  const badged = heatMode ? matches.filter(match => isActiveMatch(match, options)) : matches;
+  const badges = badged.map(match => createBadge(document, match, options));
+  const outlined = matches.filter(match => isActiveMatch(match, options)).map(match => [match.anchor, match.anchor.style.outline]);
   const isInlineText = anchor => view?.getComputedStyle(anchor).display === 'inline' && !anchor.querySelector('img');
   const layout = () => {
     const maxRight = document.documentElement.clientWidth;
-    matches.forEach((match, index) => {
+    const scrollX = view?.scrollX ?? 0;
+    const scrollY = view?.scrollY ?? 0;
+    heats.forEach((heat, index) => {
+      const rect = anchorRect(matches[index].anchor);
+      heat.style.top = `${rect.top + scrollY}px`;
+      heat.style.left = `${rect.left + scrollX}px`;
+      heat.style.width = `${rect.width}px`;
+      heat.style.height = `${rect.height}px`;
+    });
+    badged.forEach((match, index) => {
       const badge = badges[index];
       const rect = anchorRect(match.anchor);
       const right = Math.min(rect.right, maxRight);
       const inline = isInlineText(match.anchor);
       const left = inline ? Math.min(right, maxRight - badge.offsetWidth) : right - badge.offsetWidth;
       const top = inline ? rect.top + rect.height / 2 : rect.top;
-      badge.style.top = `${top + (view?.scrollY ?? 0)}px`;
-      badge.style.left = `${left + (view?.scrollX ?? 0)}px`;
+      badge.style.top = `${top + scrollY}px`;
+      badge.style.left = `${left + scrollX}px`;
     });
   };
+  heats.forEach(heat => document.body.appendChild(heat));
   badges.forEach(badge => document.body.appendChild(badge));
   outlined.forEach(([anchor]) => {
     anchor.style.outline = `${2 * (options.scale ?? 1)}px solid ${ACTIVE_COLOR}`;
@@ -131,6 +170,7 @@ export function decorateClickMap(document, options) {
   return () => {
     observer?.disconnect();
     view?.removeEventListener('resize', layout);
+    heats.forEach(heat => heat.remove());
     badges.forEach(badge => badge.remove());
     outlined.forEach(([anchor, outline]) => {
       anchor.style.outline = outline;

package/EmailTemplatePreview/index.d.ts

@@ -1,5 +1,5 @@
 export { EmailTemplatePreview } from './EmailTemplatePreview';
 export { NoEmailTemplatePreview } from './components/NoEmailTemplatePreview';
 export { replaceLocalization, replacePlaceholders } from './helpers';
-export { matchClickMapItems, decorateClickMap, CLICK_MAP_BADGE_ATTRIBUTE, type EmailClickMapMatch, type EmailClickMapMatchResult, type EmailClickMapDecorateOptions, } from './clickMap';
-export type { EmailClickMapItem, EmailClickMapPlacement, EmailClickMapProps, PreviewIframeProps, } from './types';
+export { matchClickMapItems, decorateClickMap, CLICK_MAP_BADGE_ATTRIBUTE, CLICK_MAP_HEAT_ATTRIBUTE, CLICK_MAP_LINK_ID_ATTRIBUTE, type EmailClickMapMatch, type EmailClickMapMatchResult, type EmailClickMapDecorateOptions, } from './clickMap';
+export type { EmailClickMapItem, EmailClickMapMode, EmailClickMapPlacement, EmailClickMapProps, PreviewIframeProps, } from './types';

package/EmailTemplatePreview/index.js

@@ -1,4 +1,4 @@
 export { EmailTemplatePreview } from './EmailTemplatePreview';
 export { NoEmailTemplatePreview } from './components/NoEmailTemplatePreview';
 export { replaceLocalization, replacePlaceholders } from './helpers';
-export { matchClickMapItems, decorateClickMap, CLICK_MAP_BADGE_ATTRIBUTE } from './clickMap';
+export { matchClickMapItems, decorateClickMap, CLICK_MAP_BADGE_ATTRIBUTE, CLICK_MAP_HEAT_ATTRIBUTE, CLICK_MAP_LINK_ID_ATTRIBUTE } from './clickMap';

package/EmailTemplatePreview/types.d.ts

@@ -19,9 +19,12 @@ export type EmailClickMapPlacement = {
     /** Keys with no matching anchor in the current template. */
     unplaced: string[];
 };
+/** `badges` draws a count on every anchor; `heat` tints anchors by their share and shows the count on the active one only. */
+export type EmailClickMapMode = 'badges' | 'heat';
 /** Click counts to overlay on the rendered email, see {@link EmailTemplatePreview}. */
 export type EmailClickMapProps = {
     items: EmailClickMapItem[];
+    mode?: EmailClickMapMode;
     /** Key whose badge and anchor are highlighted. */
     activeKey?: string | null;
     /** Called with the key of the badge the user clicked. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.223",
+  "version": "1.1.224",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",