@streamscloud/embeddable 8.2.0 → 9.0.0

package/dist/posts/posts-player/index.js

@@ -1,84 +1,101 @@
+import {} from '../../media-center/config/types';
+import { MediaCenter } from '../../media-center/media-center';
 import { ModalShadowHost } from '../../ui/shadow-dom';
-import { default as PostPlayerView } from './posts-player-view.svelte';
+import { default as PostsPlayer } from './cmp.posts-player.svelte';
+import { mapToPostPlayerModel } from './mapper';
 import { mount, unmount } from 'svelte';
-export {};
+export { PostsPlayer };
+export { mapToPostPlayerModel };
 /**
  * Opens the posts player modal.
  *
- * This version works only with a posts provider and removes legacy IDs/GraphQL modes.
- *
  * @param init Configuration options.
  *
- * Required
+ * Data provider (required)
  * @param {IPlayerItemsProvider<PostPlayerModel>} init.postsProvider
  *   Provider that supplies post items to the player.
  *
- * Optional
+ * Media center (optional)
+ * @param {IMediaCenterConfig} [init.mediaCenterConfig]
+ *   Optional media-center config passed to MediaCenter.
+ *
+ * Analytics (optional)
  * @param {IPostAnalyticsHandler} [init.analyticsHandler]
- *   Analytics events handler.
+ *   Custom analytics handler for posts player events.
+ *
+ * Social interactions (optional)
  * @param {IPostSocialInteractionsHandler} [init.socialInteractionsHandler]
  *   Handler for social interactions (like, share, etc.).
- * @param {ContentPlayerSettings} [init.playerSettings]
- *   Player UI and behavior settings.
  *
- *   Fields of ContentPlayerSettings:
+ * Player settings
+ * @param {PostPlayerSettings} [init.playerSettings]
+ *   Player UI and behavior settings.
+ *   Fields of PostPlayerSettings:
  *   - {boolean} [disableBackground]
  *       If true, hides the player's background image.
  *   - {boolean} [hideCloseButton]
  *       If true, hides the close button.
- *   - {Locale} [locale='en']
- *       Localization for the player UI. Supported values: 'en' | 'no'.
- *       If omitted, the default locale 'en' is used.
+ *   - {'en'|'no'} [locale='en']
+ *       Localization for the player UI. Default is 'en'; use 'no' for Norwegian.
  *   - {boolean} [showStreamsCloudWatermark]
  *       If true, shows the StreamsCloud watermark.
  *
  * Events
- * @param {{ playerClosed?: () => void }} [init.on]
+ * @param {{ playerClosed?: () => void; postActivated?: (id: string) => void }} [init.on]
  *   Optional event handlers.
  * @param {() => void} [init.on.playerClosed]
  *   Called after the player is fully closed (after unmount and removal from the DOM).
+ * @param {(id: string) => void} [init.on.postActivated]
+ *   Called when a post becomes active (receives the post's id).
  *
  * @returns {void}
  *
  * @example
  * ```ts
- * import { openPostsPlayer } from '@streamscloud/embeddable/short-videos-player';
+ * import { openPostsPlayer } from '@streamscloud/embeddable/posts-player';
  *
  * openPostsPlayer({
  *   postsProvider: myPostsProvider,
+ *   mediaCenterConfig: myMediaCenterConfig,
  *   analyticsHandler: myAnalyticsHandler,
  *   socialInteractionsHandler: mySocialHandler,
  *   playerSettings: {
+ *     // Default locale is 'en'; set 'no' to switch to Norwegian:
+ *     locale: 'no',
  *     disableBackground: false,
  *     hideCloseButton: false,
- *     // Locale is 'en' by default; set 'no' to switch to Norwegian:
- *     locale: 'no',
  *     showStreamsCloudWatermark: true,
  *   },
  *   on: {
  *     playerClosed: () => console.log('Player closed'),
+ *     postActivated: (id) => console.log('Activated post', id),
  *   },
  * });
  * ```
  */
 export function openPostsPlayer(init) {
-    const { postsProvider, socialInteractionsHandler, playerSettings, on } = init;
-    const dataProvider = postsProvider;
-    const analyticsHandler = init.analyticsHandler;
+    const { postsProvider: dataProvider, mediaCenterConfig, analyticsHandler, socialInteractionsHandler, playerSettings, on } = init;
     const shadowHost = new ModalShadowHost();
-    const mounted = mount(PostPlayerView, {
+    const mounted = mount(MediaCenter, {
         target: shadowHost.shadowRoot,
         props: {
-            dataProvider,
-            socialInteractionsHandler,
-            playerSettings,
-            analyticsHandler,
-            on: {
-                playerClosed: async () => {
-                    await unmount(mounted);
-                    shadowHost.remove();
-                    if (on?.playerClosed) {
-                        on.playerClosed();
+            config: mediaCenterConfig || null,
+            playerProps: {
+                mode: 'posts',
+                props: {
+                    dataProvider,
+                    socialInteractionsHandler,
+                    analyticsHandler,
+                    playerSettings,
+                    on: {
+                        playerClosed: async () => {
+                            await unmount(mounted);
+                            shadowHost.remove();
+                            if (on?.playerClosed) {
+                                on.playerClosed();
+                            }
+                        },
+                        postActivated: on?.postActivated
                     }
                 }
             }

package/dist/posts/posts-player/mapper.d.ts

@@ -0,0 +1,3 @@
+import type { PostsPlayerPayloadFragment } from './operations.generated';
+import type { PostPlayerModel } from './types';
+export declare const mapToPostPlayerModel: (payload: PostsPlayerPayloadFragment) => PostPlayerModel;

package/dist/{short-videos/short-videos-player → posts/posts-player}/mapper.js

@@ -1,6 +1,6 @@
 import { ProfileType } from '../../core/enums';
-import { mapToPostModel } from '../../posts/post-viewer';
-export const mapToShortVideoPlayerModel = (payload) => {
+import { mapToPostModel } from '../post-viewer';
+export const mapToPostPlayerModel = (payload) => {
     const viewerModel = mapToPostModel(payload);
     return {
         ...viewerModel,

package/dist/posts/posts-player/operations.generated.d.ts

@@ -0,0 +1,80 @@
+import type * as SchemaTypes from '../../../gql/types';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type PostsPlayerPayloadFragment = {
+    id: string;
+    enableSocialInteractions: boolean;
+    ownerProfile: {
+        id: string;
+        type: SchemaTypes.ProfileType;
+    };
+    allProducts: Array<{
+        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;
+        };
+    }>;
+    ad: {
+        id: string;
+        title: string;
+        description: string | null;
+        price: number | null;
+        priceInfo: string | null;
+        currency: SchemaTypes.Currency | null;
+        type: SchemaTypes.AdType;
+        ctaButton: {
+            background: string;
+            textColor: string;
+            text: string;
+            url: string;
+            border: string;
+        } | null;
+        media: Array<{
+            url: string;
+            thumbnailUrl: string | null;
+            type: SchemaTypes.MediaType;
+        }>;
+    } | null;
+    postData: {
+        media: Array<{
+            url: string;
+            thumbnailUrl: string | null;
+            type: SchemaTypes.MediaType;
+        }>;
+        articleData: {
+            title: string;
+            kicker: string | null;
+            articleId: string;
+        } | null;
+        mediaData: {
+            text: string | null;
+        } | null;
+        momentData: {
+            text: string | null;
+        } | null;
+        shortVideoData: {
+            text: string | null;
+        } | null;
+        videoData: {
+            title: string | null;
+            text: string | null;
+        } | null;
+    };
+};
+export declare const PostsPlayerPayloadFragmentDoc: DocumentNode<PostsPlayerPayloadFragment, unknown>;

package/dist/posts/posts-player/operations.generated.js

@@ -0,0 +1,229 @@
+export const PostsPlayerPayloadFragmentDoc = {
+    kind: 'Document',
+    definitions: [
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'PostsPlayerPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Post' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'FragmentSpread', name: { kind: 'Name', value: 'PostViewerPayloadFragment' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'ownerProfile' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                            ]
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'PostViewerPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Post' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'enableSocialInteractions' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'allProducts' },
+                        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' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'thumbnailUrl' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
+                                            { 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: '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' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'thumbnailUrl' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                                        ]
+                                    }
+                                }
+                            ]
+                        }
+                    },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'postData' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'media' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'url' },
+                                                arguments: [
+                                                    {
+                                                        kind: 'Argument',
+                                                        name: { kind: 'Name', value: 'scale' },
+                                                        value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } }
+                                                    }
+                                                ]
+                                            },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'thumbnailUrl' },
+                                                arguments: [
+                                                    {
+                                                        kind: 'Argument',
+                                                        name: { kind: 'Name', value: 'scale' },
+                                                        value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } }
+                                                    }
+                                                ]
+                                            },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                                        ]
+                                    }
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'articleData' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'kicker' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'articleId' } }
+                                        ]
+                                    }
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'mediaData' },
+                                    selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'text' } }] }
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'momentData' },
+                                    selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'text' } }] }
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'shortVideoData' },
+                                    selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'text' } }] }
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'videoData' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'text' } }
+                                        ]
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+};

package/dist/posts/posts-player/operations.graphql

@@ -0,0 +1,7 @@
+fragment PostsPlayerPayloadFragment on Post {
+  ...PostViewerPayloadFragment
+  ownerProfile {
+    id
+    type
+  }
+}

package/dist/posts/posts-player/posts-player-view.svelte

@@ -7,13 +7,14 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { PostType } from '../..';
 import { ContentPlayer, ContentPlayerConfig } from '../../content-player';
 import { ContentPlayerSettings } from '../../content-player/content-player-settings';
 import { preloadImage } from '../../core/image-preloader';
 import { getPostCoverImage } from '../model';
 import { PlayerBuffer } from '../../ui/player-slider';
 import { untrack } from 'svelte';
-let { dataProvider, socialInteractionsHandler, playerSettings, analyticsHandler, on } = $props();
+let { dataProvider, socialInteractionsHandler, playerSettings, analyticsHandler, on, mediaCenterData } = $props();
 $effect(() => {
     void dataProvider;
     untrack(() => {
@@ -21,7 +22,11 @@ $effect(() => {
         initBuffer(dataProvider);
     });
 });
+$effect(() => contentPlayerConfig.updateMediaCenterData(mediaCenterData));
 const initBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, function* () {
+    if (dataProvider.prefetch) {
+        yield dataProvider.prefetch();
+    }
     new PlayerBuffer(dataProvider, {
         preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
             if (instance.loaded.length) {
@@ -33,20 +38,45 @@ const initBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, function*
         })
     });
 });
+const getLoadedItemById = (id) => {
+    if (!contentPlayerConfig.playerBuffer) {
+        return null;
+    }
+    return contentPlayerConfig.playerBuffer.loaded.find((item) => item.id === id) || null;
+};
 const contentPlayerConfig = new ContentPlayerConfig({
     playerBuffer: null,
     mappers: {
         postModelFromCurrentItem: (item) => item
     },
     socialInteractionsHandler,
+    mediaCenterData,
     settings: new ContentPlayerSettings(playerSettings),
     callbacks: {
-        close: on === null || on === void 0 ? void 0 : on.playerClosed
+        close: on === null || on === void 0 ? void 0 : on.playerClosed,
+        productClick: (id, postId) => {
+            var _a;
+            if (((_a = getLoadedItemById(postId)) === null || _a === void 0 ? void 0 : _a.postType) === PostType.ShortVideo) {
+                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClick(id, postId);
+            }
+        },
+        productImpression: (id, postId) => {
+            var _a;
+            if (((_a = getLoadedItemById(postId)) === null || _a === void 0 ? void 0 : _a.postType) === PostType.ShortVideo) {
+                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(id, postId);
+            }
+        },
+        adClick: (id) => {
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdClick(id);
+        },
+        adImpression: (id) => {
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(id);
+        }
     },
     playerSliderCallbacks: {
         itemActivated: (id) => {
             var _a;
-            const post = (_a = contentPlayerConfig.playerBuffer) === null || _a === void 0 ? void 0 : _a.loaded.find((x) => x.id === id);
+            const post = getLoadedItemById(id);
             if (!post) {
                 return;
             }
@@ -54,9 +84,13 @@ const contentPlayerConfig = new ContentPlayerConfig({
             if (post.analyticsOrganizationId) {
                 analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(post.analyticsOrganizationId);
             }
-            if (post.analyticsOrganizationId) {
+            if (post.postType === PostType.ShortVideo) {
+                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(id);
+            }
+            else if (post.analyticsOrganizationId) {
                 analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackPostOpened(id, post.analyticsOrganizationId);
             }
+            (_a = on === null || on === void 0 ? void 0 : on.postActivated) === null || _a === void 0 ? void 0 : _a.call(on, id);
         }
     }
 });

package/dist/posts/posts-player/posts-player-view.svelte.d.ts

@@ -1,4 +1,8 @@
+import type { MediaCenterData } from '../../media-center/model/types';
 import type { PostPlayerProps } from './types';
-declare const PostsPlayerView: import("svelte").Component<PostPlayerProps, {}, "">;
+type $$ComponentProps = PostPlayerProps & {
+    mediaCenterData?: MediaCenterData;
+};
+declare const PostsPlayerView: import("svelte").Component<$$ComponentProps, {}, "">;
 type PostsPlayerView = ReturnType<typeof PostsPlayerView>;
 export default PostsPlayerView;

package/dist/posts/posts-player/types.d.ts

@@ -5,6 +5,11 @@ import type { IPlayerItemsProvider } from '../../ui/player-slider';
 export interface IPostAnalyticsHandler {
     setOrganizationId: (organizationId: string) => void;
     trackPostOpened: (postId: string, ownerId: string) => void;
+    trackShortVideoView: (videoId: string) => void;
+    trackShortVideoProductImpression: (productId: string, videoId: string) => void;
+    trackShortVideoProductClick: (productId: string, videoId: string) => void;
+    trackAdClick: (adId: string) => void;
+    trackAdImpression: (adId: string) => void;
 }
 export type PostPlayerModel = IPostModel & {
     analyticsOrganizationId: string | null;
@@ -16,6 +21,7 @@ export type PostPlayerProps = {
     playerSettings?: PostPlayerSettings;
     on?: {
         playerClosed?: () => void;
+        postActivated?: (id: string) => void;
     };
 };
-export type PostPlayerSettings = Pick<IContentPlayerSettingsInitializer, 'disableBackground' | 'hideCloseButton' | 'locale' | 'showStreamsCloudWatermark'>;
+export type PostPlayerSettings = IContentPlayerSettingsInitializer;

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

@@ -1,9 +1,10 @@
-<script lang="ts">import { toPriceRepresentation } from '../price-helper';
+<script lang="ts">import { enrichProductLinkWithTracking } from '../../marketing-tracking';
+import { toPriceRepresentation } from '../price-helper';
 import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
 import { ProportionalContainer } from '../../ui/proportional-container';
 import { ProductCardLocalization } from './product-card-localization';
-let { product, includeBeforeNowPrefix, inert = false, locale = 'en', on } = $props();
+let { product, includeBeforeNowPrefix, trackingParams, inert = false, locale = 'en', on } = $props();
 const localization = $derived(new ProductCardLocalization(locale));
 const shortDescriptionPresented = $derived(product.shortDescription && product.shortDescription.length > 0);
 const trackImpression = (node) => {
@@ -25,16 +26,16 @@ const trackImpression = (node) => {
         };
     }
 };
+const enrichedLink = $derived(product.link ? enrichProductLinkWithTracking({ link: product.link, productId: product.id, trackingParams }) : null);
 const onProductClicked = (event) => {
     event.preventDefault();
     event.stopPropagation();
     if (on === null || on === void 0 ? void 0 : on.click) {
         on.click(product.id);
     }
-    if (!product.link) {
-        return;
+    if (enrichedLink) {
+        window.open(enrichedLink, '_blank', 'noopener noreferrer');
     }
-    window.open(product.link, '_blank', 'noopener noreferrer');
 };
 </script>
 
@@ -68,8 +69,10 @@ const onProductClicked = (event) => {
     </div>
   </div>
 
-  {#if product.link || on?.click}
-    <a href={product.link} onclick={onProductClicked} target="_blank" rel="noopener noreferrer" class="product-card__link" aria-label="none">&nbsp;</a>
+  {#if enrichedLink}
+    <a href={enrichedLink.href} onclick={onProductClicked} target="_blank" rel="noopener noreferrer" class="product-card__link" aria-label="none">&nbsp;</a>
+  {:else if on?.click}
+    <button type="button" onclick={onProductClicked} class="product-card__link" aria-label="none">&nbsp;</button>
   {/if}
 </div>
 

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

@@ -1,10 +1,12 @@
 import type { Locale } from '../../core/locale';
+import { type TrackingParams } from '../../marketing-tracking';
 import type { ProductCardModel } from './types';
 type Props = {
     product: ProductCardModel;
     locale?: Locale;
     includeBeforeNowPrefix?: boolean;
     inert?: boolean;
+    trackingParams: TrackingParams;
     on?: {
         click?: (id: string) => void;
         impression?: (id: string) => void;

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

@@ -1,3 +1,5 @@
 import type { ProductCardPayloadFragment } from './operations.generated';
 import type { ProductCardModel } from './types';
-export declare const mapToProductCard: (payload: ProductCardPayloadFragment, referenceDate?: string | null) => ProductCardModel;
+export declare const mapToProductCard: (payload: ProductCardPayloadFragment, options?: Partial<{
+    referenceDate: string | null;
+}>) => ProductCardModel;