@pushwoosh/dumb-components 1.1.221 → 1.1.223

package/EmailTemplatePreview/__tests__/clickMap.test.js

@@ -1,6 +1,7 @@
 import { CLICK_MAP_BADGE_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,

package/EmailTemplatePreview/clickMap.d.ts

@@ -19,7 +19,9 @@ 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";
+/** 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. */
 export declare function decorateClickMap(document: Document, options: EmailClickMapDecorateOptions): () => void;

package/EmailTemplatePreview/clickMap.js

@@ -1,5 +1,7 @@
 /** 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';
 const ACTIVE_COLOR = '#00b2ff';
 const IDLE_COLOR = 'rgba(36, 48, 66, 0.82)';
 const compactNumber = new Intl.NumberFormat('en', {
@@ -10,14 +12,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 +32,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;

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. */

package/InboxPreview/InboxPreview.d.ts

@@ -0,0 +1,13 @@
+import { type ReactElement } from 'react';
+import type { InboxPreviewProps } from './types';
+/**
+ * Renders an Inbox cell the way the SDK of the chosen platform draws it
+ * (`platform`: iOS card, Android flat list row, or Web widget card), with the
+ * SDK degradation rules: a layout that cannot render falls back to classic and
+ * a carousel shows at most five valid slides. Content without a single filled
+ * field renders the dashed placeholder of the requested layout.
+ *
+ * @example
+ * <InboxPreview platform="ios" localizedContent={preset.localizedContent} language="en" />
+ */
+export declare function InboxPreview(props: InboxPreviewProps): ReactElement;

package/InboxPreview/InboxPreview.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { InboxAndroidCell } from './components/InboxAndroidCell';
+import { InboxIOSCell } from './components/InboxIOSCell';
+import { InboxWebCell } from './components/InboxWebCell';
+import { INBOX_PREVIEW_MAX_WIDTH, INBOX_PREVIEW_MIN_WIDTH, INBOX_PREVIEW_SKELETON_HEIGHT } from './constants';
+import { getEmptyLayout, getPreviewContent, getPreviewTexts, isEmptyContent, resolveInboxLayout } from './helpers';
+import { Lang } from './polyglot';
+import { RichMessageViewer } from '../RichMessageEditor';
+import { LIGHT_ISLAND_PROPS } from '../shared/lightIsland';
+const CELL_BY_PLATFORM = {
+  ios: InboxIOSCell,
+  android: InboxAndroidCell,
+  web: InboxWebCell
+};
+/**
+ * Renders an Inbox cell the way the SDK of the chosen platform draws it
+ * (`platform`: iOS card, Android flat list row, or Web widget card), with the
+ * SDK degradation rules: a layout that cannot render falls back to classic and
+ * a carousel shows at most five valid slides. Content without a single filled
+ * field renders the dashed placeholder of the requested layout.
+ *
+ * @example
+ * <InboxPreview platform="ios" localizedContent={preset.localizedContent} language="en" />
+ */
+export function InboxPreview(props) {
+  const {
+    platform = 'ios',
+    content,
+    localizedContent,
+    language,
+    dateLabel = '12:12',
+    unread = true,
+    isLoading = false,
+    emptyTitle = _jsx(Lang, {
+      message: "DUMB.INBOX_PREVIEW.EMPTY_TITLE"
+    }),
+    emptyDescription = _jsx(Lang, {
+      message: "DUMB.INBOX_PREVIEW.EMPTY_DESCRIPTION"
+    }),
+    width = '100%'
+  } = props;
+  if (isLoading) {
+    return _jsx(Vertical, {
+      ...LIGHT_ISLAND_PROPS,
+      "$bgColor": Color.SOFT_LIGHT,
+      "$borderRadius": ShapeRadius.SECTION,
+      "$maxWidth": INBOX_PREVIEW_MAX_WIDTH,
+      "$minHeight": INBOX_PREVIEW_SKELETON_HEIGHT,
+      "$minWidth": INBOX_PREVIEW_MIN_WIDTH,
+      "$width": width
+    });
+  }
+  const picked = getPreviewContent(content, localizedContent, language) || {};
+  const isEmpty = isEmptyContent(picked);
+  const layout = isEmpty ? getEmptyLayout(picked) : resolveInboxLayout(picked);
+  const texts = getPreviewTexts(picked, layout);
+  const Cell = CELL_BY_PLATFORM[platform];
+  return _jsx(Vertical, {
+    ...LIGHT_ISLAND_PROPS,
+    "$maxWidth": INBOX_PREVIEW_MAX_WIDTH,
+    "$minWidth": INBOX_PREVIEW_MIN_WIDTH,
+    "$position": "relative",
+    "$width": width,
+    children: _jsx(Cell, {
+      body: isEmpty ? emptyDescription : texts.body && _jsx(RichMessageViewer, {
+        flat: true,
+        value: texts.body
+      }),
+      content: picked,
+      dateLabel: dateLabel,
+      isEmpty: isEmpty,
+      layout: layout,
+      title: isEmpty ? emptyTitle : _jsx(RichMessageViewer, {
+        flat: true,
+        value: texts.title
+      }),
+      unread: unread
+    })
+  });
+}

package/InboxPreview/__tests__/helpers.test.d.ts

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

package/InboxPreview/__tests__/helpers.test.js

@@ -0,0 +1,201 @@
+import { MAX_CAROUSEL_SLIDES } from '../constants';
+import { getEmptyLayout, getPreviewContent, getPreviewTexts, getValidSlides, isEmptyContent, resolveInboxLayout } from '../helpers';
+const HERO = 'https://cdn.example.com/hero.jpg';
+const SLIDE = {
+  imageUrl: 'https://cdn.example.com/slide.jpg'
+};
+describe('resolveInboxLayout', () => {
+  it('renders the requested layout when it can', () => {
+    expect(resolveInboxLayout({
+      layoutType: 'classic',
+      title: 't',
+      body: 'b'
+    })).toBe('classic');
+    expect(resolveInboxLayout({
+      layoutType: 'banner',
+      bannerUrl: HERO
+    })).toBe('banner');
+    expect(resolveInboxLayout({
+      layoutType: 'captioned',
+      title: 't',
+      body: 'b',
+      bannerUrl: HERO
+    })).toBe('captioned');
+    expect(resolveInboxLayout({
+      layoutType: 'carousel',
+      title: 't',
+      body: 'b',
+      carousel: [SLIDE]
+    })).toBe('carousel');
+  });
+  it('degrades banner and captioned without a hero image into classic', () => {
+    expect(resolveInboxLayout({
+      layoutType: 'banner'
+    })).toBe('classic');
+    expect(resolveInboxLayout({
+      layoutType: 'captioned',
+      title: 't',
+      body: 'b'
+    })).toBe('classic');
+  });
+  it('degrades captioned and carousel without title or body into classic', () => {
+    expect(resolveInboxLayout({
+      layoutType: 'captioned',
+      body: 'b',
+      bannerUrl: HERO
+    })).toBe('classic');
+    expect(resolveInboxLayout({
+      layoutType: 'captioned',
+      title: 't',
+      bannerUrl: HERO
+    })).toBe('classic');
+    expect(resolveInboxLayout({
+      layoutType: 'carousel',
+      body: 'b',
+      carousel: [SLIDE]
+    })).toBe('classic');
+    expect(resolveInboxLayout({
+      layoutType: 'carousel',
+      title: 't',
+      carousel: [SLIDE]
+    })).toBe('classic');
+  });
+  it('degrades a carousel without valid slides into classic', () => {
+    expect(resolveInboxLayout({
+      layoutType: 'carousel',
+      title: 't',
+      body: 'b'
+    })).toBe('classic');
+    expect(resolveInboxLayout({
+      layoutType: 'carousel',
+      title: 't',
+      body: 'b',
+      carousel: [{
+        caption: 'no image'
+      }]
+    })).toBe('classic');
+  });
+  it('uses the icon as the hero fallback', () => {
+    expect(resolveInboxLayout({
+      layoutType: 'banner',
+      iconUrl: HERO
+    })).toBe('banner');
+  });
+  it('applies the SDK heuristic to unknown or absent layouts', () => {
+    expect(resolveInboxLayout({
+      bannerUrl: HERO
+    })).toBe('banner');
+    expect(resolveInboxLayout({
+      title: 't',
+      body: 'b',
+      bannerUrl: HERO
+    })).toBe('captioned');
+    expect(resolveInboxLayout({
+      title: 't',
+      body: 'b'
+    })).toBe('classic');
+    expect(resolveInboxLayout({
+      layoutType: 'video',
+      title: 't',
+      body: 'b'
+    })).toBe('classic');
+  });
+});
+describe('getValidSlides', () => {
+  it('drops slides without an image and keeps at most the SDK limit', () => {
+    const slides = [...Array.from({
+      length: MAX_CAROUSEL_SLIDES + 2
+    }, (_, index) => ({
+      imageUrl: `https://cdn.example.com/${index}.jpg`
+    })), {
+      caption: 'no image'
+    }];
+    const valid = getValidSlides(slides);
+    expect(valid).toHaveLength(MAX_CAROUSEL_SLIDES);
+    expect(valid.every(slide => !!slide.imageUrl)).toBe(true);
+  });
+});
+describe('getPreviewContent', () => {
+  const en = {
+    title: 'en'
+  };
+  const de = {
+    title: 'de'
+  };
+  it('prefers the explicit content over the localized map', () => {
+    expect(getPreviewContent(de, {
+      en
+    }, 'en')).toBe(de);
+  });
+  it('picks by language with default/en/first fallbacks', () => {
+    expect(getPreviewContent(null, {
+      en,
+      de
+    }, 'de')).toBe(de);
+    expect(getPreviewContent(null, {
+      en,
+      de
+    }, 'fr')).toBe(en);
+    expect(getPreviewContent(null, {
+      de
+    }, 'fr')).toBe(de);
+    expect(getPreviewContent(null, undefined, 'en')).toBeNull();
+    expect(getPreviewContent(null, {}, 'en')).toBeNull();
+  });
+});
+describe('empty state', () => {
+  it('detects content with nothing to render', () => {
+    expect(isEmptyContent({
+      layoutType: 'captioned'
+    })).toBe(true);
+    expect(isEmptyContent({
+      carousel: [{
+        caption: 'no image'
+      }]
+    })).toBe(true);
+    expect(isEmptyContent({
+      title: 't'
+    })).toBe(false);
+    expect(isEmptyContent({
+      bannerUrl: 'https://cdn.example.com/hero.jpg'
+    })).toBe(false);
+  });
+  it('shows the placeholder of the requested layout, classic for unknown', () => {
+    expect(getEmptyLayout({
+      layoutType: 'banner'
+    })).toBe('banner');
+    expect(getEmptyLayout({
+      layoutType: 'video'
+    })).toBe('classic');
+    expect(getEmptyLayout({})).toBe('classic');
+  });
+});
+describe('getPreviewTexts', () => {
+  it('moves the body into the title slot for classic without a title', () => {
+    expect(getPreviewTexts({
+      body: 'b'
+    }, 'classic')).toEqual({
+      title: 'b',
+      body: ''
+    });
+    expect(getPreviewTexts({
+      title: 't',
+      body: 'b'
+    }, 'classic')).toEqual({
+      title: 't',
+      body: 'b'
+    });
+  });
+  it('keeps the fields as-is for media layouts', () => {
+    expect(getPreviewTexts({
+      body: 'b'
+    }, 'captioned')).toEqual({
+      title: '',
+      body: 'b'
+    });
+    expect(getPreviewTexts({}, 'classic')).toEqual({
+      title: '',
+      body: ''
+    });
+  });
+});

package/InboxPreview/components/InboxAndroidCell/InboxAndroidCell.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { InboxCellProps } from '../../types';
+/** Android inbox cell: a flat list row with the time trailing the title. */
+export declare function InboxAndroidCell(props: InboxCellProps): ReactElement;

package/InboxPreview/components/InboxAndroidCell/InboxAndroidCell.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Color } from '@pushwoosh/kit-constants';
+import { FlexContainer, Vertical } from '@pushwoosh/kit-helpers';
+import { Text } from '@pushwoosh/kit-typography';
+import { ClampText } from '../../styles';
+import { InboxCellAvatar } from '../InboxCellAvatar';
+import { InboxCellMedia } from '../InboxCellMedia';
+/** Android inbox cell: a flat list row with the time trailing the title. */
+export function InboxAndroidCell(props) {
+  const {
+    content,
+    layout,
+    isEmpty,
+    title,
+    body,
+    dateLabel
+  } = props;
+  const texts = _jsxs(Vertical, {
+    "$flex": 1,
+    "$gap": 8,
+    "$minWidth": 0,
+    children: [_jsxs(Text, {
+      "$color": Color.MAIN,
+      "$ellipsis": true,
+      "$variant": "footnote",
+      children: [title, ' ', _jsx(Text, {
+        "$color": Color.LOCKED,
+        "$variant": "footnote",
+        children: dateLabel
+      })]
+    }), !!body && _jsx(ClampText, {
+      "$clamp": 3,
+      "$color": Color.MAIN,
+      "$variant": "footnote",
+      children: body
+    })]
+  });
+  if (layout === 'classic') {
+    return _jsx(Vertical, {
+      "$bgColor": Color.CLEAR,
+      "$border": {
+        bottom: `1px solid ${Color.DIVIDER}`
+      },
+      "$gap": 16,
+      "$padding": 16,
+      children: _jsxs(FlexContainer, {
+        "$alignItems": "start",
+        "$gap": 12,
+        children: [_jsx(InboxCellAvatar, {
+          content: content,
+          isEmpty: isEmpty,
+          platform: "android"
+        }), texts]
+      })
+    });
+  }
+  return _jsxs(Vertical, {
+    "$bgColor": Color.CLEAR,
+    "$border": {
+      bottom: `1px solid ${Color.DIVIDER}`
+    },
+    "$gap": 16,
+    "$padding": 16,
+    children: [_jsx(InboxCellMedia, {
+      content: content,
+      isEmpty: isEmpty,
+      layout: layout
+    }), layout !== 'banner' && texts]
+  });
+}

package/InboxPreview/components/InboxAndroidCell/index.d.ts

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

package/InboxPreview/components/InboxAndroidCell/index.js

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

package/InboxPreview/components/InboxCellAvatar/InboxCellAvatar.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { InboxCellAvatarProps } from './types';
+/** Inbox icon of a cell: the uploaded image, the colored initial the SDK falls back to, or the placeholder. */
+export declare function InboxCellAvatar(props: InboxCellAvatarProps): ReactElement;

package/InboxPreview/components/InboxCellAvatar/InboxCellAvatar.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Text } from '@pushwoosh/kit-typography';
+import { AvatarImage } from './styles';
+import { INBOX_AVATAR } from '../../constants';
+import { getIconInitial } from '../../helpers';
+/** Inbox icon of a cell: the uploaded image, the colored initial the SDK falls back to, or the placeholder. */
+export function InboxCellAvatar(props) {
+  const {
+    content,
+    isEmpty,
+    platform
+  } = props;
+  const {
+    size,
+    radius,
+    initialVariant
+  } = INBOX_AVATAR[platform];
+  if (isEmpty) {
+    return _jsx(Horizontal, {
+      "$bgColor": Color.BRIGHT_LIGHT_HOVER,
+      "$border": `1px dashed ${Color.BRIGHT}`,
+      "$borderRadius": radius,
+      "$height": size,
+      "$shrink": 0,
+      "$width": size
+    });
+  }
+  return _jsx(Horizontal, {
+    "$alignItems": "center",
+    "$bgColor": Color.PHANTOM,
+    "$borderRadius": radius,
+    "$height": size,
+    "$justifyContent": "center",
+    "$overflow": "hidden",
+    "$shrink": 0,
+    "$width": size,
+    children: content.iconUrl ? _jsx(AvatarImage, {
+      alt: content.title || '',
+      src: content.iconUrl
+    }) : _jsx(Text, {
+      "$color": Color.MAIN,
+      "$variant": initialVariant,
+      children: getIconInitial(content)
+    })
+  });
+}

package/InboxPreview/components/InboxCellAvatar/index.d.ts

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

package/InboxPreview/components/InboxCellAvatar/index.js

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

package/InboxPreview/components/InboxCellAvatar/styles.d.ts

@@ -0,0 +1 @@
+export declare const AvatarImage: import("styled-components").StyledComponent<"img", any, {}, never>;

package/InboxPreview/components/InboxCellAvatar/styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const AvatarImage = styled.img.withConfig({
+  displayName: "AvatarImage",
+  componentId: "sc-1mitg2x-0"
+})(["width:100%;height:100%;object-fit:cover;"]);

package/InboxPreview/components/InboxCellAvatar/types.d.ts

@@ -0,0 +1,10 @@
+import type { InboxPreviewContent, InboxPreviewPlatform } from '../../types';
+/** Props of {@link InboxCellAvatar}. */
+export interface InboxCellAvatarProps {
+    /** Content whose icon is drawn. */
+    content: InboxPreviewContent;
+    /** Draw the dashed placeholder instead of the icon. */
+    isEmpty: boolean;
+    /** Platform whose icon geometry is used. */
+    platform: InboxPreviewPlatform;
+}

package/InboxPreview/components/InboxCellAvatar/types.js

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

package/InboxPreview/components/InboxCellCarousel/InboxCellCarousel.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { InboxCellCarouselProps } from './types';
+/** Carousel cell: the slides the SDK would keep, switched by a tap on the image or by a pager dot. */
+export declare function InboxCellCarousel(props: InboxCellCarouselProps): ReactElement;

package/InboxPreview/components/InboxCellCarousel/InboxCellCarousel.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { CarouselViewport, PagerDot, SlideCaption } from './styles';
+import { getValidSlides } from '../../helpers';
+import { HeroImage } from '../../styles';
+/** Carousel cell: the slides the SDK would keep, switched by a tap on the image or by a pager dot. */
+export function InboxCellCarousel(props) {
+  const {
+    content,
+    dotsOnImage = false
+  } = props;
+  const slides = getValidSlides(content.carousel);
+  const [index, setIndex] = useState(0);
+  const activeIndex = Math.min(index, slides.length - 1);
+  const current = slides[activeIndex];
+  const dots = slides.length > 1 && slides.map((_slide, slideIndex) => _jsx(PagerDot, {
+    "$active": slideIndex === activeIndex,
+    onClick: event => {
+      event.stopPropagation();
+      setIndex(slideIndex);
+    },
+    type: "button"
+  }, slideIndex));
+  return _jsxs(_Fragment, {
+    children: [_jsxs(CarouselViewport, {
+      onClick: () => setIndex((activeIndex + 1) % slides.length),
+      children: [_jsx(HeroImage, {
+        alt: current.caption || '',
+        src: current.imageUrl
+      }), !!current.caption && _jsx(SlideCaption, {
+        children: current.caption
+      }), dotsOnImage && dots && _jsx(Horizontal, {
+        "$alignItems": "center",
+        "$bottom": 8,
+        "$gap": 6,
+        "$justifyContent": "center",
+        "$left": 0,
+        "$position": "absolute",
+        "$right": 0,
+        children: dots
+      })]
+    }), !dotsOnImage && dots && _jsx(Horizontal, {
+      "$alignItems": "center",
+      "$gap": 6,
+      "$justifyContent": "center",
+      "$padding": {
+        top: 2
+      },
+      children: dots
+    })]
+  });
+}

package/InboxPreview/components/InboxCellCarousel/index.d.ts

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

package/InboxPreview/components/InboxCellCarousel/index.js

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