@pushwoosh/dumb-components 1.1.220 → 1.1.222

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';

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

@@ -0,0 +1,29 @@
+import { Color } from '@pushwoosh/kit-constants';
+export declare const CarouselViewport: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
+} & {
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $position: string;
+}, "$gridAutoFlow" | "$position">;
+export declare const SlideCaption: import("styled-components").StyledComponent<"span", any, {
+    $color?: string | undefined;
+    $uppercase?: boolean | undefined;
+    $ellipsis?: boolean | undefined;
+    $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
+} & {
+    $clamp?: number;
+} & {
+    $color: Color;
+    $variant: "h5";
+}, "$color" | "$variant">;
+export declare const PagerDot: import("styled-components").StyledComponent<"button", any, {
+    $active?: boolean;
+}, never>;

package/InboxPreview/components/InboxCellCarousel/styles.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { INBOX_SLIDE_SCRIM, INBOX_UNREAD_DOT_SIZE } from '../../constants';
+import { ClampText } from '../../styles';
+export const CarouselViewport = styled(Vertical).attrs({
+  $position: 'relative'
+}).withConfig({
+  displayName: "CarouselViewport",
+  componentId: "sc-1fw4dgw-0"
+})(["cursor:pointer;"]);
+export const SlideCaption = styled(ClampText).attrs({
+  $color: Color.CLEAR,
+  $variant: 'h5'
+}).withConfig({
+  displayName: "SlideCaption",
+  componentId: "sc-1fw4dgw-1"
+})(["position:absolute;left:0;right:0;bottom:0;padding:14px 10px 6px;border-radius:0 0 ", " ", ";background:linear-gradient(transparent,", ");"], ShapeRadius.SECTION, ShapeRadius.SECTION, INBOX_SLIDE_SCRIM);
+export const PagerDot = styled.button.withConfig({
+  displayName: "PagerDot",
+  componentId: "sc-1fw4dgw-2"
+})(["width:", "px;height:", "px;padding:0;border:none;border-radius:50%;background:", ";cursor:pointer;"], INBOX_UNREAD_DOT_SIZE, INBOX_UNREAD_DOT_SIZE, ({
+  $active
+}) => $active ? Color.BRIGHT : Color.DIVIDER);

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

@@ -0,0 +1,8 @@
+import type { InboxPreviewContent } from '../../types';
+/** Props of {@link InboxCellCarousel}. */
+export interface InboxCellCarouselProps {
+    /** Content whose slides are drawn. */
+    content: InboxPreviewContent;
+    /** Draw the pager dots over the slide instead of under it, the way the web widget does. */
+    dotsOnImage?: boolean;
+}

package/InboxPreview/components/InboxCellCarousel/types.js

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

package/InboxPreview/components/InboxCellMedia/InboxCellMedia.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { InboxCellMediaProps } from './types';
+/** Media area of a non-classic cell: the hero image, the carousel, or the placeholder of both. */
+export declare function InboxCellMedia(props: InboxCellMediaProps): ReactElement;

package/InboxPreview/components/InboxCellMedia/InboxCellMedia.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getHeroUrl } from '../../helpers';
+import { EmptyHero, HeroImage } from '../../styles';
+import { InboxCellCarousel } from '../InboxCellCarousel';
+/** Media area of a non-classic cell: the hero image, the carousel, or the placeholder of both. */
+export function InboxCellMedia(props) {
+  const {
+    content,
+    layout,
+    isEmpty,
+    dotsOnImage = false
+  } = props;
+  if (isEmpty) {
+    return _jsx(EmptyHero, {});
+  }
+  if (layout === 'carousel') {
+    return _jsx(InboxCellCarousel, {
+      content: content,
+      dotsOnImage: dotsOnImage
+    });
+  }
+  return _jsx(HeroImage, {
+    alt: content.title || '',
+    src: getHeroUrl(content)
+  });
+}

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

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

package/InboxPreview/components/InboxCellMedia/index.js

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

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

@@ -0,0 +1,12 @@
+import type { InboxLayoutType, InboxPreviewContent } from '../../types';
+/** Props of {@link InboxCellMedia}. */
+export interface InboxCellMediaProps {
+    /** Content whose hero image or slides are drawn. */
+    content: InboxPreviewContent;
+    /** Layout the SDK would draw for this content. */
+    layout: InboxLayoutType;
+    /** Draw the dashed placeholder instead of the media. */
+    isEmpty: boolean;
+    /** Draw the carousel pager dots over the slide instead of under it. */
+    dotsOnImage?: boolean;
+}

package/InboxPreview/components/InboxCellMedia/types.js

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

package/InboxPreview/components/InboxIOSCell/InboxIOSCell.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { InboxCellProps } from '../../types';
+/** iOS inbox cell: a rounded card, with the texts on a plate below the media in the media layouts. */
+export declare function InboxIOSCell(props: InboxCellProps): ReactElement;