{"version":3,"file":"index.c8ejw9l1.js","sources":["../../../wwwdev/esm/components/connectedContent/productDisplayConnectedContent/card.tsx","../../../wwwdev/esm/components/connectedContent/productDisplayConnectedContent/productDisplayConnectedContent.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { colors, breakpoint, sizes } from 'variables';\r\nimport { percentage } from 'modules/helpers/style';\r\nimport type { LiveEventStatus } from 'autogen/sharedEnums';\r\nimport type { IResponsiveImageModel } from 'shared/interfaces/responsiveImage';\r\nimport { CardLogo, AnimatedCardLogo, AnimatedPlayLogo } from 'components/live/cardIcons';\r\nimport UAEventTracking from 'modules/tracking/UAEventTracking';\r\nimport type { ConnectedContentProductDisplayModel } from 'autogen/swagger/all';\r\nimport { Spacing12 } from 'autogen/design-tokens/tokens';\r\nimport ArticleCard from 'components/ArticleCard/ArticleCard';\r\nimport Tag from 'components/generic/tag/Tag';\r\nimport { firstCharacterToLower } from 'modules/helpers/strings';\r\nimport Image from 'components/generic/Image';\r\nimport { getLargestPictureSrc } from 'helpers/imageScalingHelper';\r\nimport PageAction from 'components/shared/Routing/PageAction';\r\n\r\nconst Container = styled(PageAction)`\r\n    display: flex;\r\n    flex: none;\r\n    scroll-snap-align: start;\r\n    cursor: pointer;\r\n    min-width: 0;\r\n    text-align: left;\r\n`;\r\n\r\nconst StyledArticleCard = styled(ArticleCard)`\r\n    flex: 1 1 auto;\r\n    height: 360px;\r\n`;\r\n\r\nconst ImageContainer = styled.div`\r\n    position: relative;\r\n    overflow: hidden;\r\n    height: 200px;\r\n`;\r\n\r\nconst StyledTag = styled(Tag)`\r\n    position: absolute;\r\n    top: ${Spacing12};\r\n    left: ${Spacing12};\r\n`;\r\n\r\nconst StyledImage = styled(Image.WithScaling)`\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n`;\r\n\r\nconst NoImage = styled.div`\r\n    width: 100%;\r\n    padding-bottom: ${percentage(4, 4)};\r\n    background: ${colors.liveLabel};\r\n\r\n    ${Container}:only-child & {\r\n        padding-bottom: ${percentage(9, 21)};\r\n    }\r\n`;\r\n\r\nconst playButtonSize = css`\r\n    ${breakpoint.up(sizes.xl)} {\r\n        width: 52px;\r\n        height: 52px;\r\n    }\r\n`;\r\n\r\nconst StyledCardIcon = styled(CardLogo)`\r\n    ${breakpoint.up(sizes.xl)} {\r\n        width: 100px;\r\n        height: 100px;\r\n    }\r\n`;\r\nconst StyledAnimatedPlayLogo = styled(AnimatedPlayLogo)`\r\n    ${playButtonSize}\r\n`;\r\nconst StyledAnimatedCardLogo = styled(AnimatedCardLogo)`\r\n    ${playButtonSize}\r\n`;\r\n\r\nexport interface ILiveEventPDPCard {\r\n    name: string;\r\n    image?: IResponsiveImageModel;\r\n    status: LiveEventStatus;\r\n    bambuserShowId: string;\r\n}\r\n\r\nconst trackClick = (layoutType: ConnectedContentProductDisplayModel['layoutType'], trackingIndex: number): void => {\r\n    if (!window?.dataLayer) return;\r\n\r\n    if (layoutType) {\r\n        UAEventTracking({\r\n            eventCategory: 'connectedContent',\r\n            eventAction: firstCharacterToLower(layoutType),\r\n            eventLabel: `item_${trackingIndex}`\r\n        });\r\n    }\r\n};\r\n\r\nasync function openBambuser(bambuserShowId: string, deepLink?: string) {\r\n    const { importBambuserLiveShopping, initBambuserLiveShopping } = await import(\r\n        /* webpackChunkName: \"liveFunctions\" */ 'components/live/liveFunctions'\r\n    );\r\n\r\n    importBambuserLiveShopping();\r\n    initBambuserLiveShopping();\r\n    window.initBambuserLiveShopping({\r\n        showId: bambuserShowId,\r\n        type: 'overlay',\r\n        deeplink: deepLink\r\n    });\r\n}\r\n\r\nasync function openVimeoModal(vimeoUrl) {\r\n    const { default: videoModal } = await import(/* webpackChunkName: \"videoModal\" */ 'modules/modal/videoModal');\r\n    const modal = videoModal();\r\n\r\n    modal({ url: vimeoUrl, platform: 'Vimeo' });\r\n}\r\n\r\nexport interface IConnectedContentProductDisplayModel {\r\n    card: ConnectedContentProductDisplayModel;\r\n    trackingIndex: number;\r\n}\r\n\r\nconst LiveEventPDPCard = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, IConnectedContentProductDisplayModel>(\r\n    ({ card, trackingIndex }, ref) => {\r\n        const { heading, image, contentLabel, layoutType, dataLayer, link: maybeLink, layoutText, ctaText } = card;\r\n        const { pageAction, liveEventModel } = maybeLink || {};\r\n        const largestImage = getLargestPictureSrc(image);\r\n\r\n        const getPlayIcon = (type) => {\r\n            const { status } = liveEventModel || {};\r\n\r\n            if (type === 'PdpLive' || type === 'PdpVideo') {\r\n                switch (status) {\r\n                    case 'Live':\r\n                        return <StyledAnimatedPlayLogo />;\r\n                    case 'Upcoming':\r\n                        return <StyledCardIcon sprite=\"LiveSoonCard\" />;\r\n                    default:\r\n                        return <StyledAnimatedCardLogo />;\r\n                }\r\n            }\r\n\r\n            return null;\r\n        };\r\n\r\n        if (!pageAction) return null;\r\n\r\n        return (\r\n            <Container\r\n                action={pageAction}\r\n                onClick={() => trackClick(layoutType, trackingIndex)}\r\n                data-datalayer={JSON.stringify(dataLayer)}\r\n                ref={ref}\r\n            >\r\n                <StyledArticleCard\r\n                    textBox={{\r\n                        title: heading || '',\r\n                        overline: layoutText,\r\n                        action: { buttonText: ctaText }\r\n                    }}\r\n                >\r\n                    <ImageContainer>\r\n                        {layoutType !== 'PdpStories' && getPlayIcon(layoutType)}\r\n                        {image?.fallBackUrl ? (\r\n                            <StyledImage alt=\"\" sizes={250} src={largestImage} transformType=\"WidthScale\" />\r\n                        ) : (\r\n                            <NoImage />\r\n                        )}\r\n                        {contentLabel && <StyledTag>{contentLabel}</StyledTag>}\r\n                    </ImageContainer>\r\n                </StyledArticleCard>\r\n            </Container>\r\n        );\r\n    }\r\n);\r\nexport default LiveEventPDPCard;\r\n","import type { ConnectedContentProductDisplayModel } from 'autogen/swagger/all';\r\nimport { ThemeProvider, css } from 'styled-components';\r\nimport { stringToKey } from 'modules/helpers/strings';\r\nimport { useRecoilValue } from 'recoil';\r\nimport { requestDataState } from 'recoilState/atoms/requestDataState';\r\nimport { type DesignTheme, getTheme } from 'helpers/designThemes';\r\nimport DynamicItemCarousel from 'components/generic/ScrollSnapSlider/components/DynamicItemCarousel';\r\nimport { breakpoint, sizes } from 'variables';\r\nimport Card from './card';\r\nimport { Spacing16 } from 'autogen/design-tokens/tokens';\r\nimport ConnectedContentSurveyItem from 'components/surveySystem/components/ConnectedContentSurveyItem';\r\nimport type { ColorTheme } from 'types/tokens';\r\n\r\nconst scrollContainerCss = css`\r\n    && {\r\n        padding: 0 ${Spacing16};\r\n        margin: 0 -${Spacing16};\r\n        scroll-padding-inline-end: ${Spacing16};\r\n        scroll-padding-inline-start: ${Spacing16};\r\n\r\n        ${breakpoint.up(sizes.xl)} {\r\n            padding: 0;\r\n            margin: 0;\r\n        }\r\n    }\r\n`;\r\n\r\nexport interface IProductDisplayConnectedContent {\r\n    model: ConnectedContentProductDisplayModel[];\r\n}\r\n\r\nfunction listTheme(theme: DesignTheme, i: number) {\r\n    const { color3, color4 } = theme;\r\n\r\n    switch ((i + 1) % 3) {\r\n        case 1:\r\n            return { ...theme, color1: color3 };\r\n        case 2:\r\n            return { ...theme, color1: color4 };\r\n        case 0:\r\n        default:\r\n            return theme;\r\n    }\r\n}\r\n\r\nfunction ProductDisplayConnectedContent(props: IProductDisplayConnectedContent) {\r\n    const { model } = props;\r\n    const { javascriptPageContext } = useRecoilValue(requestDataState);\r\n    const { designThemeName } = javascriptPageContext;\r\n    const globalTheme = getTheme((designThemeName || 'NordicGrey') as ColorTheme);\r\n\r\n    return (\r\n        <DynamicItemCarousel\r\n            gapSize={Spacing16}\r\n            items={model}\r\n            scrollContainerCss={scrollContainerCss}\r\n            itemRenderer={(item, index) => {\r\n                const { heading, layoutType } = item;\r\n                const keySuffix = heading ? stringToKey(heading) : index;\r\n\r\n                if (item.surveyQuestion) {\r\n                    return (\r\n                        <ConnectedContentSurveyItem\r\n                            key={`${layoutType}_${keySuffix}`}\r\n                            model={item}\r\n                            type=\"ConnectedContentProductDisplay\"\r\n                        />\r\n                    );\r\n                }\r\n\r\n                return (\r\n                    <ThemeProvider theme={listTheme(globalTheme, index)} key={`${layoutType}_${keySuffix}`}>\r\n                        <Card card={item} trackingIndex={index + 1} />\r\n                    </ThemeProvider>\r\n                );\r\n            }}\r\n        />\r\n    );\r\n}\r\n\r\nexport default ProductDisplayConnectedContent;\r\n"],"names":["Container","styled","PageAction","withConfig","displayName","componentId","StyledArticleCard","ArticleCard","ImageContainer","div","StyledTag","Tag","Spacing12","StyledImage","Image","WithScaling","NoImage","percentage","colors","liveLabel","playButtonSize","css","breakpoint","up","sizes","xl","StyledCardIcon","CardLogo","StyledAnimatedPlayLogo","AnimatedPlayLogo","StyledAnimatedCardLogo","AnimatedCardLogo","trackClick","layoutType","trackingIndex","window","dataLayer","UAEventTracking","eventCategory","eventAction","firstCharacterToLower","eventLabel","LiveEventPDPCard","React","forwardRef","card","ref","heading","image","contentLabel","link","maybeLink","layoutText","ctaText","pageAction","liveEventModel","largestImage","getLargestPictureSrc","getPlayIcon","type","status","jsx","JSON","stringify","title","overline","action","buttonText","fallBackUrl","scrollContainerCss","Spacing16","listTheme","theme","i","color3","color4","color1","ProductDisplayConnectedContent","props","model","javascriptPageContext","useRecoilValue","requestDataState","designThemeName","globalTheme","getTheme","DynamicItemCarousel","item","index","keySuffix","stringToKey","surveyQuestion","ConnectedContentSurveyItem","ThemeProvider","Card"],"mappings":"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"}