@streamscloud/embeddable 4.0.0 → 5.1.0

package/dist/ads/ad-card/cmp.ad-card.svelte

@@ -2,7 +2,7 @@
 import { Button, ButtonSize } from '../../ui/button';
 import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
-let { ad, inert } = $props();
+let { ad, inert = false } = $props();
 </script>
 
 <div class="ad-card" inert={inert}>
@@ -24,7 +24,12 @@ let { ad, inert } = $props();
     </div>
     <div class="ad-card__price-container">
       {#if ad.price && ad.currency}
-        <div class="ad-card__price">{toPriceRepresentation({ amount: ad.price, currency: ad.currency })}</div>
+        <div class="ad-card__price">
+          {#if ad.priceInfoLabel}
+            <span class="ad-card__price-info-label">{ad.priceInfoLabel}</span>
+          {/if}
+          {toPriceRepresentation({ amount: ad.price, currency: ad.currency })}
+        </div>
       {/if}
     </div>
     <div class="ad-card__button-container">
@@ -62,7 +67,8 @@ let { ad, inert } = $props();
   position: relative;
   container-type: inline-size;
   aspect-ratio: 10/16;
-  background-color: #ffffff;
+  color: #000000;
+  background-color: rgba(255, 255, 255, 0.9);
   border: 0.038125rem solid #f2f2f3;
   border-radius: 0.5rem;
   padding: 0.75rem 0.75rem 1.125rem;
@@ -70,6 +76,11 @@ let { ad, inert } = $props();
   gap: 0.5rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }
+:global([data-theme="dark"]) .ad-card {
+  background-color: rgba(18, 18, 18, 0.9);
+  color: #ffffff;
+  border-color: #1e1e1e;
+}
 @container (width < 230px) {
   .ad-card {
     padding: 0.5rem 0.5rem 0.75rem;
@@ -179,6 +190,9 @@ let { ad, inert } = $props();
   font-size: 1.875rem;
   font-weight: 700;
   text-align: right;
+  display: flex;
+  align-items: end;
+  gap: 0.625rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 230px) {
@@ -186,8 +200,21 @@ let { ad, inert } = $props();
     font-size: 1.25rem;
   }
 }
-:global([data-theme="dark"]) .ad-card {
-  background-color: #121212;
-  color: #ffffff;
-  border-color: #1e1e1e;
+.ad-card__price-info-label {
+  font-family: "Inter", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  letter-spacing: 0;
+  text-align: right;
+  color: #6b7280;
+  white-space: nowrap;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .ad-card__price-info-label {
+    font-size: 0.625rem;
+    line-height: 0.875rem;
+  }
 }</style>

package/dist/ads/ad-card/cmp.ad-card.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { AdCardModel } from './types';
 type Props = {
     ad: AdCardModel;
-    inert: boolean;
+    inert?: boolean;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ads/ad-card/mapper.js

@@ -7,6 +7,7 @@ export const mapToAdCardModel = (payload) => {
         title: payload.title,
         description: payload.description,
         price: payload.price,
+        priceInfoLabel: payload.priceInfo,
         currency: payload.currency,
         ctaButton: payload.ctaButton
     };

package/dist/ads/ad-card/operations.generated.d.ts

@@ -6,6 +6,7 @@ export type AdCardPayloadFragment = {
     description: string | null;
     price: number | null;
     currency: SchemaTypes.Currency | null;
+    priceInfo: string | null;
     type: SchemaTypes.AdType;
     ctaButton: {
         background: string;

package/dist/ads/ad-card/operations.generated.js

@@ -13,6 +13,7 @@ export const AdCardPayloadFragmentDoc = {
                     { kind: 'Field', name: { kind: 'Name', value: 'description' } },
                     { kind: 'Field', name: { kind: 'Name', value: 'price' } },
                     { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'priceInfo' } },
                     {
                         kind: 'Field',
                         name: { kind: 'Name', value: 'ctaButton' },

package/dist/ads/ad-card/operations.graphql

@@ -4,6 +4,7 @@ fragment AdCardPayloadFragment on Ad {
   description
   price
   currency
+  priceInfo
   ctaButton {
     background
     textColor

package/dist/ads/ad-card/types.d.ts

@@ -7,6 +7,7 @@ export type AdCardModel = {
     description: string | null;
     price: number | null;
     currency: Currency | null;
+    priceInfoLabel: string | null;
     ctaButton: {
         background: string;
         textColor: string;

package/dist/products/product-card/cmp.product-card.svelte

@@ -77,7 +77,8 @@ const onProductClicked = (event) => {
   position: relative;
   container-type: inline-size;
   aspect-ratio: 10/16;
-  background-color: #ffffff;
+  color: #000000;
+  background-color: rgba(255, 255, 255, 0.9);
   border: 0.038125rem solid #f2f2f3;
   border-radius: 0.5rem;
   padding: 0.75rem 0.75rem 1.125rem;
@@ -85,7 +86,7 @@ const onProductClicked = (event) => {
   /* Set 'container-type: inline-size;' to reference container*/
 }
 :global([data-theme="dark"]) .product-card {
-  background-color: #121212;
+  background-color: rgba(18, 18, 18, 0.9);
   color: #ffffff;
   border-color: #1e1e1e;
 }

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

@@ -15,9 +15,13 @@ 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);
+let { model, socialInteractionsHandler, on } = $props();
+const showSocialInteractions = $derived(!!socialInteractionsHandler && model.enableSocialInteractions);
+let isLikedStore = $state.raw({
+    get isLiked() {
+        return false;
+    }
+});
 const availableActionsCount = $derived.by(() => {
     let actionsCount = 0;
     if (model.products.length || model.ad) {
@@ -42,24 +46,22 @@ const onMuteClicked = () => {
     MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;
 };
 const onLikeClicked = () => __awaiter(void 0, void 0, void 0, function* () {
-    if (!socialInteractions) {
+    if (!socialInteractionsHandler) {
         return;
     }
-    yield socialInteractions.onToggleLike(model.id);
-    yield refreshIsLiked();
+    yield socialInteractionsHandler.onToggleLike(model.id);
 });
 const onShareClicked = () => __awaiter(void 0, void 0, void 0, function* () {
-    if (!socialInteractions) {
+    if (!socialInteractionsHandler) {
         return;
     }
-    yield socialInteractions.onShare(model.id);
+    yield socialInteractionsHandler.onShare(model.id);
 });
 const refreshIsLiked = () => __awaiter(void 0, void 0, void 0, function* () {
-    if (!socialInteractions) {
+    if (!socialInteractionsHandler) {
         return;
     }
-    console.warn('refereshIsLiked called');
-    isLiked = yield socialInteractions.isLiked(model.id);
+    isLikedStore = yield socialInteractionsHandler.isLiked(model.id);
 });
 </script>
 
@@ -72,8 +74,13 @@ const refreshIsLiked = () => __awaiter(void 0, void 0, void 0, function* () {
     {/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
+        type="button"
+        class="short-video-controls__action"
+        onclick={onLikeClicked}
+        aria-label="none"
+        class:short-video-controls__action--liked={isLikedStore.isLiked}>
+        <Icon src={isLikedStore.isLiked ? IconHeartFilled : IconHeart} />
       </button>
 
       <button type="button" class="short-video-controls__action" onclick={onShareClicked}>
@@ -131,4 +138,8 @@ const refreshIsLiked = () => __awaiter(void 0, void 0, void 0, function* () {
 }
 .short-video-controls__action--liked {
   --icon--color: #e71d36;
+}
+.short-video-controls__action:hover {
+  transform: scale(1.2);
+  transition: 0.3s;
 }</style>

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

@@ -1,4 +1,4 @@
-import type { ShortVideoSocialInteractions } from './types';
+import type { ShortVideoSocialInteractionsHandler } from './types';
 type Props = {
     model: {
         id: string;
@@ -9,7 +9,7 @@ type Props = {
             isImage: boolean;
         };
     };
-    socialInteractions?: ShortVideoSocialInteractions;
+    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
     on?: {
         attachmentsClicked?: () => void;
     };

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

@@ -6,7 +6,7 @@ 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, showControls = true, autoplay = 'on-appearance', localization: localizationInit, on } = $props();
+let { model, socialInteractionsHandler, availableSideSpace = 0, showAttachments = true, showControls = true, autoplay = 'on-appearance', localization: localizationInit = 'en', on } = $props();
 const localization = $derived(new ShortVideoViewerLocalization(localizationInit));
 let actionsPanelRef = $state.raw(null);
 const uiManager = new ShortVideoViewerUiManager();
@@ -59,7 +59,7 @@ $effect(() => {
       <AttachmentsInline model={model} />
     {/if}
     {#if uiManager.showControls}
-      <ShortVideoControls model={model} on={{ attachmentsClicked: uiManager.toggleEnableAttachments }} />
+      <ShortVideoControls model={model} socialInteractionsHandler={socialInteractionsHandler} on={{ attachmentsClicked: uiManager.toggleEnableAttachments }} />
     {/if}
   </div>
   <div class="short-video-viewer__description">
@@ -70,7 +70,7 @@ $effect(() => {
     {/if}
     <div class="short-video-viewer__text">
       {#if model.text}
-        <LineClamp value={model.text} maxLines={2} />
+        <LineClamp value={model.text} maxLines={2} enableShowMore={true} />
       {/if}
     </div>
   </div>
@@ -155,4 +155,5 @@ $effect(() => {
   color: #ffffff;
   font-size: 1.125rem;
   font-weight: 400;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
 }</style>

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

@@ -1,13 +1,14 @@
 import type { Locale } from '../../core/locale';
 import { type IShortVideoViewerLocalization } from './short-video-viewer-localization';
-import type { ShortVideoViewerModel } from './types';
+import type { ShortVideoSocialInteractionsHandler, ShortVideoViewerModel } from './types';
 type Props = {
     model: ShortVideoViewerModel;
+    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
     availableSideSpace?: number;
     showAttachments?: boolean;
     showControls?: boolean;
     autoplay?: true | false | 'on-appearance';
-    localization: IShortVideoViewerLocalization | Locale;
+    localization?: IShortVideoViewerLocalization | Locale;
     on?: {
         progress?: (progress: number) => void;
     };

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

@@ -2,7 +2,7 @@ export { default as ShortVideoViewer } from './cmp.short-video-viewer.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 type { ShortVideoViewerModel, ShortVideoSocialInteractions } from './types';
+export type { ShortVideoViewerModel, ShortVideoSocialInteractionsHandler, ShortVideoAdCardModel, ShortVideoProductCardModel } from './types';
 export type { IShortVideoViewerLocalization } from './short-video-viewer-localization';
 export type { IShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
-export { mapShortVideoViewerModel } from './mapper';
+export { mapToShortVideoViewerModel } from './mapper';

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

@@ -2,4 +2,4 @@ export { default as ShortVideoViewer } from './cmp.short-video-viewer.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 { mapShortVideoViewerModel } from './mapper';
+export { mapToShortVideoViewerModel } from './mapper';

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

@@ -1,3 +1,3 @@
 import type { ShortVideoViewerPayloadFragment } from './operations.generated';
 import type { ShortVideoViewerModel } from './types';
-export declare const mapShortVideoViewerModel: (payload: ShortVideoViewerPayloadFragment) => ShortVideoViewerModel;
+export declare const mapToShortVideoViewerModel: (payload: ShortVideoViewerPayloadFragment) => ShortVideoViewerModel;

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

@@ -1,7 +1,7 @@
-import { mapToAdCardModel } from '../../ads/ad-card';
 import { MediaType } from '../../core/enums';
-import { mapToProductCard } from '../../products/product-card';
-export const mapShortVideoViewerModel = (payload) => {
+import { getMediaItemImageUrl } from '../../core/media';
+import { shouldUseSalePrice } from '../../products/price-helper';
+export const mapToShortVideoViewerModel = (payload) => {
     const mediaBlob = payload.postData.media[0];
     return {
         id: payload.id,
@@ -15,8 +15,8 @@ export const mapShortVideoViewerModel = (payload) => {
         text: payload.postData.shortVideoData.text,
         enableSocialInteractions: payload.enableSocialInteractions,
         heading: null,
-        ad: payload.ad ? mapToAdCardModel(payload.ad) : null,
-        products: payload.allProducts.map((x) => mapToProductCard(x))
+        ad: payload.ad ? mapToShortVideoAdCardModel(payload.ad) : null,
+        products: payload.allProducts.map((x) => mapToShortVideoProductCard(x))
         // uncomment if you want to test many products behavior
         // .flatMap(x =>
         //   Array.from({ length: 20 }, (_, i) => ({
@@ -26,3 +26,36 @@ export const mapShortVideoViewerModel = (payload) => {
         // )
     };
 };
+const mapToShortVideoAdCardModel = (payload) => {
+    return {
+        id: payload.id,
+        type: payload.type,
+        image: getMediaItemImageUrl(payload.media[0]),
+        title: payload.title,
+        description: payload.description,
+        price: payload.price,
+        priceInfoLabel: payload.priceInfo,
+        currency: payload.currency,
+        ctaButton: payload.ctaButton
+    };
+};
+const mapToShortVideoProductCard = (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/short-videos/short-video-viewer/operations.generated.d.ts

@@ -31,6 +31,7 @@ export type ShortVideoViewerPayloadFragment = {
         title: string;
         description: string | null;
         price: number | null;
+        priceInfo: string | null;
         currency: SchemaTypes.Currency | null;
         type: SchemaTypes.AdType;
         ctaButton: {

package/dist/short-videos/short-video-viewer/operations.generated.js

@@ -13,12 +13,97 @@ export const ShortVideoViewerPayloadFragmentDoc = {
                     {
                         kind: 'Field',
                         name: { kind: 'Name', value: 'allProducts' },
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ProductCardPayloadFragment' } }] }
+                        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' } }
+                                                    ]
+                                                }
+                                            }
+                                        ]
+                                    }
+                                }
+                            ]
+                        }
                     },
                     {
                         kind: 'Field',
                         name: { kind: 'Name', value: 'ad' },
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'AdCardPayloadFragment' } }] }
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'description' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'price' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'priceInfo' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'ctaButton' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            { kind: 'Field', name: { kind: 'Name', value: 'background' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'textColor' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'text' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'url' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'border' } }
+                                        ]
+                                    }
+                                },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } },
+                                {
+                                    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',
@@ -68,102 +153,6 @@ export const ShortVideoViewerPayloadFragmentDoc = {
                     }
                 ]
             }
-        },
-        {
-            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' } }
-                                        ]
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                ]
-            }
-        },
-        {
-            kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'AdCardPayloadFragment' },
-            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Ad' } },
-            selectionSet: {
-                kind: 'SelectionSet',
-                selections: [
-                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'description' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'price' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'ctaButton' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'background' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'textColor' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'text' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'url' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'border' } }
-                            ]
-                        }
-                    },
-                    { kind: 'Field', name: { kind: 'Name', value: 'type' } },
-                    {
-                        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' } }
-                            ]
-                        }
-                    }
-                ]
-            }
         }
     ]
 };

package/dist/short-videos/short-video-viewer/operations.graphql

@@ -2,10 +2,48 @@ fragment ShortVideoViewerPayloadFragment on Post {
   id
   enableSocialInteractions
   allProducts {
-    ...ProductCardPayloadFragment
+    id
+    title
+    shortDescription
+    link
+    media {
+      url
+      thumbnailUrl
+      type
+    }
+    brand {
+      name
+    }
+    priceAndAvailability {
+      currency
+      price
+      productSalePrices {
+        salePrice
+        salePriceEffectiveDateFrom
+        salePriceEffectiveDateTo
+      }
+    }
   }
   ad {
-    ...AdCardPayloadFragment
+    id
+    title
+    description
+    price
+    priceInfo
+    currency
+    ctaButton {
+      background
+      textColor
+      text
+      url
+      border
+    }
+    type
+    media {
+      url
+      thumbnailUrl
+      type
+    }
   }
   postData {
     media {