@pushwoosh/dumb-components 1.1.222 → 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,6 +1,7 @@
-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/';
 const HTML = `
   <a href="${PROMO}?utm_source=email&amp;utm_content=img"><img src="banner.png" alt=""></a>
   <p>Подробности на <a href="${PROMO}?utm_source=email">странице акции</a>.</p>
@@ -8,12 +9,15 @@ const HTML = `
   <a href="${TICKETS}?utm_source=email">Купить билеты</a>
   <a href="${TICKETS}?utm_source=email">Купить билеты</a>
   <a href="[% param.url_unsub %]">Отписаться</a>
+  <a data-pw-lid="aaaa11112222" href="${SHOP}">В магазин</a>
+  <a data-pw-lid="bbbb33334444" href="${SHOP}">В магазин</a>
 `;
-const item = (key, link, title, clicks) => ({
+const item = (key, link, title, clicks, linkId) => ({
   key,
   link,
   title,
-  clicks
+  clicks,
+  linkId
 });
 function createDocument() {
   const frameDocument = document.implementation.createHTMLDocument('preview');
@@ -64,6 +68,33 @@ describe('matchClickMapItems', () => {
     expect(placement.pooled).toEqual(['promo']);
     expect(matches).toHaveLength(3);
   });
+  it('tells identical anchors apart by the stamped link id', () => {
+    const {
+      matches,
+      placement
+    } = matchClickMapItems(createDocument(), [item('top', SHOP, 'В магазин', 40, 'aaaa11112222'), item('bottom', SHOP, 'В магазин', 9, 'bbbb33334444')]);
+    expect(placement).toEqual({
+      placed: ['top', 'bottom'],
+      pooled: [],
+      unplaced: []
+    });
+    expect(matches.map(({
+      anchor,
+      items: matched
+    }) => [anchor.getAttribute('data-pw-lid'), matched.map(row => row.key)])).toEqual([['aaaa11112222', ['top']], ['bbbb33334444', ['bottom']]]);
+  });
+  it('falls back to link and text when the template no longer carries the recorded link id', () => {
+    const {
+      matches,
+      placement
+    } = matchClickMapItems(createDocument(), [item('old', SHOP, 'В магазин', 3, 'cccc55556666'), item('unstamped', PROMO, 'странице акции', 1)]);
+    expect(placement).toEqual({
+      placed: ['unstamped'],
+      pooled: ['old'],
+      unplaced: []
+    });
+    expect(matches).toHaveLength(3);
+  });
   it('reports rows whose link is not in the template as unplaced', () => {
     const {
       matches,
@@ -104,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;
@@ -19,7 +20,11 @@ export type EmailClickMapDecorateOptions = {
 };
 /** Attribute every badge carries, so tests and consumers can find them. */
 export declare const CLICK_MAP_BADGE_ATTRIBUTE = "data-pw-click-map-badge";
-/** Lands click-tracking rows on template anchors by (link, text), falling back to every anchor of the link. */
+/** 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

@@ -1,5 +1,11 @@
 /** Attribute every badge carries, so tests and consumers can find them. */
 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', {
@@ -10,14 +16,19 @@ const stripQuery = url => url.split('?')[0].trim();
 const normalizeText = text => text.replace(/\s+/g, ' ').trim();
 const anchorText = anchor => normalizeText(anchor.textContent ?? '');
 const anchorLink = anchor => stripQuery(anchor.getAttribute('href') ?? '');
-/** Lands click-tracking rows on template anchors by (link, text), falling back to every anchor of the link. */
+/** Lands click-tracking rows on template anchors by stamped `linkId`, else by (link, text), else every anchor of the link. */
 export function matchClickMapItems(document, items) {
   const anchorsByLink = new Map();
+  const anchorsByLinkId = new Map();
   document.querySelectorAll('a[href]').forEach(anchor => {
     const link = anchorLink(anchor);
+    const linkId = anchor.getAttribute(CLICK_MAP_LINK_ID_ATTRIBUTE);
     if (link) {
       anchorsByLink.set(link, [...(anchorsByLink.get(link) ?? []), anchor]);
     }
+    if (linkId) {
+      anchorsByLinkId.set(linkId, [...(anchorsByLinkId.get(linkId) ?? []), anchor]);
+    }
   });
   const itemsByAnchor = new Map();
   const placement = {
@@ -25,11 +36,15 @@ export function matchClickMapItems(document, items) {
     pooled: [],
     unplaced: []
   };
-  items.forEach(item => {
+  const targetsByLinkAndText = item => {
     const candidates = anchorsByLink.get(stripQuery(item.link)) ?? [];
     const title = normalizeText(item.title);
     const exact = candidates.filter(anchor => anchorText(anchor) === title);
-    const targets = exact.length > 0 ? exact : candidates;
+    return exact.length > 0 ? exact : candidates;
+  };
+  items.forEach(item => {
+    const stamped = item.linkId ? anchorsByLinkId.get(item.linkId) : undefined;
+    const targets = stamped ?? targetsByLinkAndText(item);
     if (targets.length === 0) {
       placement.unplaced.push(item.key);
       return;
@@ -85,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}`;
@@ -120,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

@@ -6,6 +6,8 @@ export type EmailClickMapItem = {
     link: string;
     /** Anchor text recorded with the click; empty for image links. */
     title: string;
+    /** Stable anchor id (`data-pw-lid`) recorded with the click; matched before link and text when set. */
+    linkId?: string;
     clicks: number;
 };
 /** How the rows of {@link EmailClickMapProps.items} landed on the rendered template. */
@@ -17,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.222",
+  "version": "1.1.224",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",