@streamscloud/embeddable 3.4.2 → 4.0.0

package/dist/products/product-card/mapper.js

@@ -0,0 +1,22 @@
+import { getMediaItemImageUrl } from '../../core/media';
+import { shouldUseSalePrice } from '../price-helper';
+export const mapToProductCard = (payload, referenceDate) => {
+    const effectiveSalePrice = payload.priceAndAvailability.productSalePrices?.find((x) => shouldUseSalePrice({
+        price: payload.priceAndAvailability.price,
+        salePrice: x.salePrice,
+        effectiveDateFrom: x.salePriceEffectiveDateFrom,
+        effectiveDateTo: x.salePriceEffectiveDateTo,
+        referenceDate
+    }));
+    return {
+        id: payload.id,
+        title: payload.title,
+        shortDescription: payload.shortDescription,
+        link: payload.link,
+        brandName: payload.brand?.name || null,
+        image: getMediaItemImageUrl(payload.media[0]),
+        currency: payload.priceAndAvailability.currency,
+        price: payload.priceAndAvailability.price,
+        salePrice: effectiveSalePrice?.salePrice ?? null
+    };
+};

package/dist/products/product-card/operations.generated.d.ts

@@ -0,0 +1,26 @@
+import type * as SchemaTypes from '../../../gql/types';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type ProductCardPayloadFragment = {
+    id: string;
+    title: string;
+    shortDescription: string | null;
+    link: string | null;
+    media: Array<{
+        url: string;
+        thumbnailUrl: string | null;
+        type: SchemaTypes.MediaType;
+    }>;
+    brand: {
+        name: string;
+    } | null;
+    priceAndAvailability: {
+        currency: SchemaTypes.Currency;
+        price: number;
+        productSalePrices: Array<{
+            salePrice: number;
+            salePriceEffectiveDateFrom: any | null;
+            salePriceEffectiveDateTo: any | null;
+        }> | null;
+    };
+};
+export declare const ProductCardPayloadFragmentDoc: DocumentNode<ProductCardPayloadFragment, unknown>;

package/dist/products/product-card/operations.generated.js

@@ -0,0 +1,59 @@
+export const ProductCardPayloadFragmentDoc = {
+    kind: 'Document',
+    definitions: [
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ProductCardPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Product' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'shortDescription' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'link' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'media' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'url' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                            ]
+                        }
+                    },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'brand' },
+                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'name' } }] }
+                    },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'priceAndAvailability' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'price' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'productSalePrices' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePrice' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateFrom' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateTo' } }
+                                        ]
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+};

package/dist/products/product-card/operations.graphql

@@ -0,0 +1,23 @@
+fragment ProductCardPayloadFragment on Product {
+  id
+  title
+  shortDescription
+  link
+  media {
+    url
+    thumbnailUrl
+    type
+  }
+  brand {
+    name
+  }
+  priceAndAvailability {
+    currency
+    price
+    productSalePrices {
+      salePrice
+      salePriceEffectiveDateFrom
+      salePriceEffectiveDateTo
+    }
+  }
+}

package/dist/products/product-card/product-card-localization.d.ts

@@ -0,0 +1,8 @@
+import { type Locale } from '../../core/locale';
+export interface IProductCardLocalization {
+    beforeNowPrefix?: string | null;
+}
+export declare class ProductCardLocalization {
+    beforeNowPrefix: string | null;
+    constructor(init: IProductCardLocalization | Locale);
+}

package/dist/{short-videos/short-video-viewer/short-video-product-localization.js → products/product-card/product-card-localization.js}

@@ -1,5 +1,5 @@
 import { isLocale } from '../../core/locale';
-export class ShortVideoProductLocalization {
+export class ProductCardLocalization {
     beforeNowPrefix;
     constructor(init) {
         this.beforeNowPrefix = isLocale(init) ? loc.beforeNowPrefix[init] : init?.beforeNowPrefix || loc.beforeNowPrefix.en;

package/dist/products/product-card/types.d.ts

@@ -0,0 +1,12 @@
+import type { Currency } from '../..';
+export type ProductCardModel = {
+    id: string;
+    title: string;
+    shortDescription?: string | null;
+    link: string | null;
+    image: string | null;
+    brandName: string | null;
+    price: number;
+    currency: Currency;
+    salePrice: number | null;
+};

package/dist/products/product-card/types.js

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

package/dist/short-videos/short-video-viewer/cmp.attachments.svelte

@@ -1,27 +1,21 @@
-<script lang="ts">import { default as ShortVideoAdViewer } from './cmp.ad.svelte';
-import { default as ShortVideoProductViewer } from './cmp.product.svelte';
+<script lang="ts">import { AdCard } from '../../ads/ad-card';
+import { ProductCard } from '../../products/product-card';
 import { ShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
 import {} from './types';
-let { shortVideo, localization: localizationInit, on } = $props();
+let { shortVideo, localization: localizationInit = 'en', on } = $props();
 const localization = $derived(new ShortVideoAttachmentsLocalization(localizationInit));
 </script>
 
 {#if shortVideo.products.length || shortVideo.ad}
   <div class="short-video-attachments">
-    {#if shortVideo.products.length}
-      <div class="short-video-attachments__section-header">{localization.productsSection}</div>
-      <div class="short-video-attachments__products">
-        {#each shortVideo.products as product (product.id)}
-          <ShortVideoProductViewer product={product} localization={localization.productLocalization} on={on} />
-        {/each}
-      </div>
+    {#if shortVideo.ad}
+      <AdCard ad={shortVideo.ad} />
     {/if}
 
-    {#if shortVideo.ad}
-      <div class="short-video-attachments__section-header">{localization.offersSection}</div>
-      <div class="short-video-attachments__offer">
-        <ShortVideoAdViewer ad={shortVideo.ad} />
-      </div>
+    {#if shortVideo.products.length}
+      {#each shortVideo.products as product (product.id)}
+        <ProductCard product={product} localization={localization.productLocalization} on={on} />
+      {/each}
     {/if}
   </div>
 {/if}
@@ -38,31 +32,9 @@ const localization = $derived(new ShortVideoAttachmentsLocalization(localization
   }
 }
 .short-video-attachments {
-  --_short-video-attachments--margin-vertical: var(--short-video-attachments--margin-vertical, 0);
-  --_short-video-attachments--spacing-vertical: var(--short-video-attachments--spacing-vertical, 1.25rem);
-  --_short-video-attachments--spacing-horizontal: var(--short-video-attachments--spacing-horizontal, 1rem);
+  --_short-video-attachments--gap: var(--short-video-attachments--gap, 2.75rem);
   display: flex;
   flex-direction: column;
-  gap: var(--_short-video-attachments--spacing-vertical);
-  padding: var(--_short-video-attachments--margin-vertical) 0;
-}
-.short-video-attachments__section-header {
-  color: #d1d5db;
-  font-size: 1rem;
-  font-weight: 700;
-  line-height: 1.2;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 0.5rem;
-  padding: 0.5625rem var(--_short-video-attachments--spacing-horizontal) 0;
-}
-.short-video-attachments__products {
-  padding: 0 var(--_short-video-attachments--spacing-horizontal);
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  grid-column-gap: var(--_short-video-attachments--spacing-horizontal);
-  grid-row-gap: var(--_short-video-attachments--spacing-vertical);
-}
-.short-video-attachments__offer {
-  padding: 0 var(--_short-video-attachments--spacing-horizontal);
+  gap: var(--_short-video-attachments--gap);
+  padding: 0;
 }</style>

package/dist/short-videos/short-video-viewer/cmp.attachments.svelte.d.ts

@@ -3,7 +3,7 @@ import { type IShortVideoAttachmentsLocalization } from './short-video-attachmen
 import { type ShortVideoViewerModel } from './types';
 type Props = {
     shortVideo: ShortVideoViewerModel;
-    localization: IShortVideoAttachmentsLocalization | Locale;
+    localization?: IShortVideoAttachmentsLocalization | Locale;
     on?: {
         productClick?: (productId: string) => void;
     };

package/dist/short-videos/short-video-viewer/cmp.short-video-controls.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Icon } from '../../ui/icon';
+import { MediaVolumeManager } from '../../ui/media-playback';
+import IconHeartFilled from '@fluentui/svg-icons/icons/heart_20_filled.svg?raw';
+import IconHeart from '@fluentui/svg-icons/icons/heart_28_regular.svg?raw';
+import IconShare from '@fluentui/svg-icons/icons/share_28_regular.svg?raw';
+import IconShoppingBag from '@fluentui/svg-icons/icons/shopping_bag_28_regular.svg?raw';
+import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_28_regular.svg?raw';
+import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_28_regular.svg?raw';
+let { model, socialInteractions, on } = $props();
+const showSocialInteractions = $derived(!!socialInteractions && model.enableSocialInteractions);
+let isLiked = $state(false);
+const availableActionsCount = $derived.by(() => {
+    let actionsCount = 0;
+    if (model.products.length || model.ad) {
+        actionsCount++;
+    }
+    if (showSocialInteractions) {
+        actionsCount++;
+    }
+    if (!model.media.isImage) {
+        actionsCount++;
+    }
+    return actionsCount;
+});
+$effect(() => {
+    refreshIsLiked();
+});
+const onAttachmentsClicked = () => {
+    var _a;
+    (_a = on === null || on === void 0 ? void 0 : on.attachmentsClicked) === null || _a === void 0 ? void 0 : _a.call(on);
+};
+const onMuteClicked = () => {
+    MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;
+};
+const onLikeClicked = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (!socialInteractions) {
+        return;
+    }
+    yield socialInteractions.onToggleLike(model.id);
+    yield refreshIsLiked();
+});
+const onShareClicked = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (!socialInteractions) {
+        return;
+    }
+    yield socialInteractions.onShare(model.id);
+});
+const refreshIsLiked = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (!socialInteractions) {
+        return;
+    }
+    console.warn('refereshIsLiked called');
+    isLiked = yield socialInteractions.isLiked(model.id);
+});
+</script>
+
+{#if availableActionsCount}
+  <div class="short-video-controls" class:short-video-controls--single-action={availableActionsCount === 1}>
+    {#if model.products.length || model.ad}
+      <button type="button" class="short-video-controls__action" onclick={onAttachmentsClicked}>
+        <Icon src={IconShoppingBag} />
+      </button>
+    {/if}
+
+    {#if showSocialInteractions}
+      <button type="button" class="short-video-controls__action" onclick={onLikeClicked} aria-label="none" class:short-video-controls__action--liked={isLiked}>
+        <Icon src={isLiked ? IconHeartFilled : IconHeart} />
+      </button>
+
+      <button type="button" class="short-video-controls__action" onclick={onShareClicked}>
+        <Icon src={IconShare} />
+      </button>
+    {/if}
+
+    {#if !model.media.isImage}
+      <button type="button" class="short-video-controls__action" onclick={onMuteClicked}>
+        {#if MediaVolumeManager.isMuted}
+          <Icon src={IconSpeakerMute} />
+        {:else}
+          <Icon src={IconSpeaker2} />
+        {/if}
+      </button>
+    {/if}
+  </div>
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.short-video-controls {
+  --_short-video-controls--icon--size: var(--short-video-controls--icon--size, 1.75rem);
+  --_short-video-controls--padding-vertical: 1rem;
+  --_short-video-controls--padding-horizontal: 0.625rem;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1.125rem;
+  border-radius: 1.25rem;
+  border: 0.0625rem solid #1c1c1c;
+  background: rgba(0, 0, 0, 0.6);
+  padding: var(--_short-video-controls--padding-vertical) var(--_short-video-controls--padding-horizontal);
+}
+.short-video-controls--single-action {
+  padding: var(--_short-video-controls--padding-horizontal);
+  border-radius: calc((var(--_short-video-controls--padding-horizontal) * 2 + var(--_short-video-controls--icon--size)) / 2);
+}
+.short-video-controls__action {
+  --icon--size: var(--_short-video-controls--icon--size);
+  --icon--color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.short-video-controls__action--liked {
+  --icon--color: #e71d36;
+}</style>

package/dist/short-videos/short-video-viewer/cmp.short-video-controls.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { ShortVideoSocialInteractions } from './types';
+type Props = {
+    model: {
+        id: string;
+        enableSocialInteractions: boolean;
+        products: unknown[];
+        ad: unknown | null;
+        media: {
+            isImage: boolean;
+        };
+    };
+    socialInteractions?: ShortVideoSocialInteractions;
+    on?: {
+        attachmentsClicked?: () => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">import { Image } from '../../ui/image';
+import { LineClamp } from '../../ui/line-clamp';
 import { Video } from '../../ui/video';
 import { default as AttachmentsInline } from './cmp.attachments-inline.svelte';
-import { default as ShortVideoDescription } from './description.svelte';
+import { default as ShortVideoControls } from './cmp.short-video-controls.svelte';
+import { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
 import { ShortVideoViewerLocalization } from './short-video-viewer-localization';
 import { ShortVideoViewerUiManager } from './ui-manager.svelte';
-let { model, availableSideSpace = 0, showAttachments = true, autoplay = 'on-appearance', localization: localizationInit, on } = $props();
+let { model, availableSideSpace = 0, showAttachments = true, showControls = true, autoplay = 'on-appearance', localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideoViewerLocalization(localizationInit));
 let actionsPanelRef = $state.raw(null);
 const uiManager = new ShortVideoViewerUiManager();
@@ -26,13 +28,24 @@ $effect(() => {
 });
 $effect(() => {
     uiManager.updateCanShowAttachments(showAttachments);
+    uiManager.updateCanShowControls(showControls);
 });
 </script>
 
 <div class="short-video-viewer" style={uiManager.globalCssVariables}>
   <div class="short-video-viewer__media">
     {#if !model.media.isImage}
-      <Video controls={false} autoplay={autoplay} src={model.media.url} loop={true} poster={model.media.thumbnailUrl} id={model.id} on={on} />
+      <Video
+        src={model.media.url}
+        poster={model.media.thumbnailUrl}
+        controls={false}
+        autoplay={autoplay}
+        loop={true}
+        id={model.id}
+        hideSpeaker={true}
+        on={{
+          progress: on?.progress
+        }} />
     {:else}
       <Image src={model.media.url} />
     {/if}
@@ -45,9 +58,21 @@ $effect(() => {
     {#if uiManager.showAttachments}
       <AttachmentsInline model={model} />
     {/if}
+    {#if uiManager.showControls}
+      <ShortVideoControls model={model} on={{ attachmentsClicked: uiManager.toggleEnableAttachments }} />
+    {/if}
   </div>
   <div class="short-video-viewer__description">
-    <ShortVideoDescription model={model} localization={localization} />
+    {#if model.heading}
+      <div class="short-video-viewer__heading">
+        <ShortVideoHeading model={model.heading} localization={localization} />
+      </div>
+    {/if}
+    <div class="short-video-viewer__text">
+      {#if model.text}
+        <LineClamp value={model.text} maxLines={2} />
+      {/if}
+    </div>
   </div>
 </div>
 
@@ -65,8 +90,6 @@ $effect(() => {
 .short-video-viewer {
   --_short-video-viewer--actions-panel--top: var(--short-video-viewer--actions-panel--top, 0.9375rem);
   --_short-video-viewer--actions-panel--bottom: var(--short-video-viewer--actions-panel--bottom, 0.9375rem);
-  --_short-video-viewer--button--background-color: #f3f4f6;
-  --_short-video-viewer--button--font-color: #2e2e2e;
   --video--media-fit: cover;
   width: 100%;
   min-width: 100%;
@@ -75,13 +98,6 @@ $effect(() => {
   min-height: 100%;
   max-height: 100%;
   position: relative;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .short-video-viewer {
-    --_short-video-viewer--button--background-color: #ffffff;
-    --_short-video-viewer--button--font-color: #2e2e2e;
-  }
 }
 .short-video-viewer__media {
   height: 100%;
@@ -122,12 +138,21 @@ $effect(() => {
 }
 .short-video-viewer__description {
   position: absolute;
-  bottom: 0.9375rem;
-  left: 0.625rem;
-  right: calc(1.25rem + var(--_short-video-viewer--button--size));
-  --short-video-viewer--description--font--primary-color: #ffffff;
-  --short-video-viewer--description--font--secondary-color: #ffffff;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 1.875rem 1.25rem;
+  padding-right: calc(1.25rem + var(--_short-video-viewer--button--size));
+  background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
+  border-radius: 0rem 0.375rem 0.375rem;
+}
+.short-video-viewer__heading {
+  --short-video-heading--padding: 0 0 0.875rem 0;
+  --short-video-heading--text--color: #ffffff;
+  --short-video-heading--meta--color: #ffffff;
 }
-:global([data-theme="dark"]) .short-video-viewer__description {
-  --short-video-viewer--description--font--primary-color: #ffffff;
+.short-video-viewer__text {
+  color: #ffffff;
+  font-size: 1.125rem;
+  font-weight: 400;
 }</style>

package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte.d.ts

@@ -5,6 +5,7 @@ type Props = {
     model: ShortVideoViewerModel;
     availableSideSpace?: number;
     showAttachments?: boolean;
+    showControls?: boolean;
     autoplay?: true | false | 'on-appearance';
     localization: IShortVideoViewerLocalization | Locale;
     on?: {

package/dist/short-videos/short-video-viewer/index.d.ts

@@ -1,12 +1,8 @@
 export { default as ShortVideoViewer } from './cmp.short-video-viewer.svelte';
-export { default as ShortVideoAdViewer } from './cmp.ad.svelte';
-export { default as ShortVideoProductViewer } from './cmp.product.svelte';
-export { default as ShortVideoSocialInteractions } from './cmp.social-interactions.svelte';
+export { default as ShortVideoControls } from './cmp.short-video-controls.svelte';
 export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte';
 export { default as ShortVideoViewerAttachmentsInline } from './cmp.attachments-inline.svelte';
-export { default as ShortVideoDetails } from './cmp.short-video-details.svelte';
-export type { ShortVideoViewerModel, ShortVideoViewerAdModel, ShortVideoViewerProductModel } from './types';
+export type { ShortVideoViewerModel, ShortVideoSocialInteractions } from './types';
 export type { IShortVideoViewerLocalization } from './short-video-viewer-localization';
-export type { IShortVideoDetailsLocalization } from './short-video-details-localization';
 export type { IShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
 export { mapShortVideoViewerModel } from './mapper';

package/dist/short-videos/short-video-viewer/index.js

@@ -1,8 +1,5 @@
 export { default as ShortVideoViewer } from './cmp.short-video-viewer.svelte';
-export { default as ShortVideoAdViewer } from './cmp.ad.svelte';
-export { default as ShortVideoProductViewer } from './cmp.product.svelte';
-export { default as ShortVideoSocialInteractions } from './cmp.social-interactions.svelte';
+export { default as ShortVideoControls } from './cmp.short-video-controls.svelte';
 export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte';
 export { default as ShortVideoViewerAttachmentsInline } from './cmp.attachments-inline.svelte';
-export { default as ShortVideoDetails } from './cmp.short-video-details.svelte';
 export { mapShortVideoViewerModel } from './mapper';

package/dist/short-videos/short-video-viewer/mapper.js

@@ -1,6 +1,6 @@
+import { mapToAdCardModel } from '../../ads/ad-card';
 import { MediaType } from '../../core/enums';
-import { getMediaItemImageUrl } from '../../core/media';
-import { shouldUseSalePrice } from '../../products/price-helper';
+import { mapToProductCard } from '../../products/product-card';
 export const mapShortVideoViewerModel = (payload) => {
     const mediaBlob = payload.postData.media[0];
     return {
@@ -13,46 +13,16 @@ export const mapShortVideoViewerModel = (payload) => {
                 thumbnailUrl: mediaBlob.thumbnailUrl
             },
         text: payload.postData.shortVideoData.text,
-        heading: {
-            image: payload.postHeading.sourceImage,
-            name: payload.postHeading.sourceName,
-            displayDate: payload.postHeading.postDisplayDate,
-            viewsCount: payload.postHeading.postViewsCount
-        },
-        ad: payload.ad ? mapToShortVideoViewerAdModel(payload.ad) : null,
-        products: payload.allProducts.map(mapToShortVideoViewerProductModel)
+        enableSocialInteractions: payload.enableSocialInteractions,
+        heading: null,
+        ad: payload.ad ? mapToAdCardModel(payload.ad) : null,
+        products: payload.allProducts.map((x) => mapToProductCard(x))
         // uncomment if you want to test many products behavior
-        /*.flatMap((x) => [
-          { ...x, id: x.id + '1' },
-          { ...x, id: x.id + '2' },
-          { ...x, id: x.id + '3' },
-          { ...x, id: x.id + '4' },
-          { ...x, id: x.id + '5' }
-        ])*/
-    };
-};
-const mapToShortVideoViewerAdModel = (payload) => {
-    return {
-        id: payload.id,
-        type: payload.type,
-        image: getMediaItemImageUrl(payload.media[0]),
-        title: payload.title,
-        description: payload.description,
-        price: payload.price,
-        currency: payload.currency,
-        ctaButton: payload.ctaButton
-    };
-};
-const mapToShortVideoViewerProductModel = (payload) => {
-    const effectiveSalePrice = payload.priceAndAvailability.productSalePrices?.find((x) => shouldUseSalePrice(payload.priceAndAvailability.price, x.salePrice, x.salePriceEffectiveDateFrom, x.salePriceEffectiveDateTo));
-    return {
-        id: payload.id,
-        title: payload.title,
-        image: getMediaItemImageUrl(payload.media[0]),
-        link: payload.link,
-        currency: payload.priceAndAvailability.currency,
-        price: payload.priceAndAvailability.price,
-        salePrice: effectiveSalePrice?.salePrice ?? null,
-        shortDescription: payload.shortDescription ?? null
+        // .flatMap(x =>
+        //   Array.from({ length: 20 }, (_, i) => ({
+        //     ...x,
+        //     id: x.id + String(i + 1)
+        //   }))
+        // )
     };
 };

package/dist/short-videos/short-video-viewer/operations.generated.d.ts

@@ -3,22 +3,19 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
 export type ShortVideoViewerPayloadFragment = {
     id: string;
     enableSocialInteractions: boolean;
-    postHeading: {
-        sourceImage: string | null;
-        sourceName: string;
-        postDisplayDate: any;
-        postViewsCount: number;
-    };
     allProducts: Array<{
-        title: string;
         id: string;
-        link: string | null;
+        title: string;
         shortDescription: string | null;
+        link: string | null;
         media: Array<{
             url: string;
             thumbnailUrl: string | null;
             type: SchemaTypes.MediaType;
         }>;
+        brand: {
+            name: string;
+        } | null;
         priceAndAvailability: {
             currency: SchemaTypes.Currency;
             price: number;