(\n FormattedTooltipComponent\n);\n","import * as React from 'react';\n\ninterface TWrapperEnabled {\n wrapperEnabled?: boolean;\n children?: React.ReactNode;\n}\n\ntype ConditionalWrapper = React.FC;\n\nexport function withConditionalWrapper>(\n Wrapper: React.FC\n): ConditionalWrapper {\n return ({ wrapperEnabled, children, ...wrapperProps }: TWrapperEnabled) =>\n wrapperEnabled ? (\n {children}\n ) : (\n // eslint-disable-next-line react/jsx-no-useless-fragment\n <>{children}>\n );\n}\n","import styled, { css } from 'styled-components';\n\nimport { Tag, breakpoints, theme } from '@notino/react-styleguide';\n\nexport const StyledTag = styled(Tag)<{ newDesign: boolean }>`\n @media (max-width: ${breakpoints.sm}) {\n font-size: 0.75rem !important;\n }\n ${({ newDesign }) =>\n newDesign &&\n css`\n text-transform: none;\n ${theme.typography.labelSmall}\n `}\n`;\n\n// This wraps around all visualized tags so they stay together\nexport const StyledTagWrapper = styled.div<{ nowrapLg: boolean }>`\n @media (min-width: ${breakpoints.lg}) {\n ${(props) => (props.nowrapLg ? 'white-space: nowrap;' : '')}\n }\n`;\n","import * as React from 'react';\n\nimport { TagModel } from '@notino/react-styleguide';\n\nimport { useTagAttributes } from '@components/Universals/ProductItem/useTagAttributes';\nimport { useNewPdDesignEnabled } from '@containers/ProductDetailContainer/ProductDetail/hooks/useNewPdDesignEnabled';\nimport { IStock } from '@containers/ProductListing/model';\n\nimport { FormattedTooltip } from './FormattedTooltip';\nimport { ITagsProps } from './model';\nimport { StyledTag, StyledTagWrapper } from './styled';\n\nexport const Tags: React.FC = ({\n type = TagModel.Types.default,\n onClick,\n nowrapLg = false,\n ...props\n}) => {\n const newDesign = useNewPdDesignEnabled();\n const tagAttributes = useTagAttributes(props.attributes, {\n multiple: props?.multiple,\n });\n if (props.stockAvailability === IStock.outOfStock || !tagAttributes) {\n return null;\n }\n\n const size = props.small ? TagModel.Sizes.small : TagModel.Sizes.default;\n\n return (\n \n {tagAttributes.map(\n ({ style, icon, tooltipMessage, label, attribute }) => (\n \n onClick?.(attribute)}\n key={label}\n tagStyle={style}\n icon={icon}\n tagType={type}\n tagSize={size}\n className={`pd-variant-tag-${label}`}\n >\n {label}\n \n \n )\n )}\n \n );\n};\n","import styled, { css } from 'styled-components';\n\nimport { breakpoints, InfoCircleIcon, theme } from '@notino/react-styleguide';\nexport const TagDiscountFlexRow = styled.div<{ newDesign: boolean }>`\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n gap: 0.4rem;\n\n @media (min-width: ${breakpoints.md}) {\n margin-top: auto;\n }\n\n ${({ newDesign }) =>\n newDesign\n ? css`\n min-height: 2.5rem;\n `\n : css`\n height: 2.5rem;\n margin-bottom: 1rem;\n `}\n`;\n\nexport const DiscountWrapper = styled.div`\n text-align: right;\n line-height: 1.25rem;\n`;\n\nexport const OriginalPriceWrapper = styled.span<{ newDesign: boolean }>`\n display: flex;\n justify-content: flex-end;\n flex-wrap: wrap;\n\n ${({ newDesign }) =>\n newDesign\n ? css`\n color: ${theme.palette.neutralDark};\n ${theme.typography.labelRegular400}\n `\n : css`\n color: ${theme.palette.neutralDarker};\n padding-left: 0.625rem;\n font-weight: 300;\n font-size: 0.875rem;\n\n @media (min-width: ${breakpoints.sm}) {\n font-size: 0.8rem;\n }\n `}\n`;\n\nexport const FlexEnd = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n`;\n\nexport const LineThrough = styled.span<{ active: boolean }>`\n ${({ active }) => active && 'text-decoration: line-through'};\n white-space: nowrap;\n`;\n\nexport const Discount = styled.span<{ newDesign: boolean }>`\n color: ${theme.palette.primary};\n\n ${({ newDesign }) =>\n newDesign\n ? css`\n ${theme.typography.labelLarge}\n `\n : css`\n font-size: 0.875rem;\n font-weight: bold;\n text-transform: uppercase;\n\n @media (min-width: ${breakpoints.sm}) {\n font-size: 1.2rem;\n }\n `}\n`;\n\nexport const PriceWrapper = styled.span`\n font-size: 0.8rem;\n`;\n\nexport const CurrencyWrapper = styled(PriceWrapper)`\n ::before {\n content: ' ';\n }\n`;\n\nexport const StyledInfoIcon = styled(InfoCircleIcon)`\n margin-bottom: 4px;\n`;\n\nexport const Slash = styled.span`\n padding: 0 0.25rem;\n`;\n","import * as React from 'react';\n\nimport * as Cookie from 'js-cookie';\n\nimport {\n breakpoints,\n Tooltip,\n TooltipModel,\n Colors,\n} from '@notino/react-styleguide';\n\nimport PriceLabel from '@components/PriceLabel';\nimport { useIsDualPriceForCroatia } from '@containers/ProductDetailContainer/ProductDetail/hooks/useIsDualPriceForCroatia';\nimport { useNewPdDesignEnabled } from '@containers/ProductDetailContainer/ProductDetail/hooks/useNewPdDesignEnabled';\nimport { usePriceLogic } from '@containers/ProductDetailContainer/ProductDetail/hooks/usePriceLogic';\nimport { variantFragment } from '@containers/ProductDetailContainer/queries/__generated__/variantFragment';\n\nimport {\n DiscountWrapper,\n OriginalPriceWrapper,\n StyledInfoIcon,\n LineThrough,\n Discount,\n PriceWrapper,\n CurrencyWrapper,\n Slash,\n FlexEnd,\n} from './styled';\n\nconst NO_RESP = 'noresp';\n\ninterface IProps {\n variant: variantFragment;\n}\n\nexport const OriginalPrice = ({ variant }: IProps) => {\n // need topLeft position for desktop version on mobile\n const [tooltipProps, setTooltipProps] = React.useState({});\n const {\n isDualPriceForCroatia,\n leftSideCurrency,\n rightSideCurrency,\n getLeftSideFormattedPrice,\n getRightSidePrice,\n } = useIsDualPriceForCroatia();\n const { discountText, topPrice } = usePriceLogic(variant);\n const newDesign = useNewPdDesignEnabled();\n\n React.useEffect(() => {\n if (Number(Cookie.get(NO_RESP))) {\n setTooltipProps({\n position: TooltipModel.Position.topLeft,\n alignDesktop: true,\n });\n }\n }, []);\n\n if (!topPrice) {\n return null;\n }\n\n return (\n \n \n {isDualPriceForCroatia && (\n <>\n \n \n {getLeftSideFormattedPrice(topPrice.value.value)}{' '}\n {leftSideCurrency}\n \n \n /\n >\n )}\n\n \n \n \n \n\n \n \n \n \n \n\n {discountText}\n \n );\n};\n","import { snakeCase } from 'lodash';\n\nimport { ProductTileModel } from '@notino/react-styleguide';\n\nimport { dispatchTrackingEvent } from '@context/tracking/utils';\n\nconst NON_TRACKABLE_TAGS = [\n ProductTileModel.TagAttributes.Damaged,\n ProductTileModel.TagAttributes.Returned,\n];\n\nexport const trackTagClick = (\n attr: ProductTileModel.TagAttributes,\n timing: number\n) => {\n if (NON_TRACKABLE_TAGS.includes(attr)) {\n return;\n }\n\n dispatchTrackingEvent({\n event: 'element_click',\n _clear: true,\n element: {\n action: 'click_on_element',\n name: attr,\n type: 'tag_discount_label',\n promo_labels: snakeCase(attr),\n interaction: 'click',\n timing,\n },\n });\n};\n","import * as React from 'react';\n\nimport { Tags } from '@components/Tags';\nimport { useNewPdDesignEnabled } from '@containers/ProductDetailContainer/ProductDetail/hooks/useNewPdDesignEnabled';\nimport { IStock } from '@containers/ProductListing/model';\nimport { useTrackingContext } from '@context/tracking/TrackingContext';\n\nimport { variantFragment } from '../../../../queries/__generated__/variantFragment';\n\nimport { OriginalPrice } from './OriginalPrice';\nimport { TagDiscountFlexRow } from './styled';\nimport { trackTagClick } from './tracking';\n\ninterface ITagDiscountProps {\n variant: variantFragment;\n}\n\nexport const TagDiscount = ({ variant }: ITagDiscountProps) => {\n const { getTimeFromInit } = useTrackingContext();\n const newDesign = useNewPdDesignEnabled();\n\n return (\n \n trackTagClick(attr, getTimeFromInit())}\n multiple={true}\n attributes={variant.attributes}\n stockAvailability={variant.stockAvailability.code}\n nowrapLg={true}\n />\n\n {variant.stockAvailability.code !== IStock.outOfStock && (\n \n )}\n \n );\n};\n","import styled, { css } from 'styled-components';\n\nimport { breakpoints, theme } from '@notino/react-styleguide';\n\nimport { Wrapper, Currency } from '@components/PriceLabel/components';\nexport const Container = styled.div<{ newDesign: boolean }>`\n margin-top: 0;\n\n ${({ newDesign }) =>\n newDesign\n ? css`\n @media (min-width: ${breakpoints.lg}) {\n margin-top: 1rem;\n }\n `\n : css`\n @media (min-width: ${breakpoints.md}) {\n margin-top: 1.25rem;\n }\n `}\n`;\n\nexport const FlexWrapper = styled.div<{ newDesign: boolean }>`\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n\n ${({ newDesign }) =>\n newDesign\n ? css`\n margin-top: 1.5rem;\n min-height: 2rem;\n `\n : css`\n min-height: 2.1875rem;\n\n @media (min-width: ${breakpoints.sm}) {\n min-height: 3.25rem;\n }\n `}\n`;\n\nexport const LineWrapper = styled.div<{ newDesign: boolean }>`\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n ${({ newDesign }) =>\n newDesign\n ? css`\n margin: 0.75rem 0;\n @media (min-width: ${breakpoints.lg}) {\n margin-top: 0.5rem;\n }\n `\n : css`\n min-height: 0.9375rem;\n margin-bottom: 0.5625rem;\n `}\n`;\n\nexport const Line = styled.hr<{ dashedLine: boolean }>`\n flex: 1;\n ${({ dashedLine }) =>\n dashedLine\n ? `border-top: 1px dashed ${theme.palette.neutralLight};`\n : `border-top: 1px solid ${theme.palette.neutralDark};`};\n height: 0.0625rem;\n margin: 0;\n border-bottom: none;\n`;\n\nexport const Name = styled.div<{ newDesign: boolean }>`\n padding: 0 0.5rem 0.05rem 0;\n ${({ newDesign }) =>\n newDesign\n ? css`\n ${theme.typography.labelRegular400}\n `\n : css`\n font-weight: 400;\n font-size: 1.25rem;\n\n @media (min-width: ${breakpoints.sm}) {\n font-size: 1.3rem;\n padding: 0 0.5rem 0.2rem 0;\n }\n @media (min-width: ${breakpoints.md}) {\n font-size: 1.3rem;\n padding: 0 0.5rem 0.3rem 0;\n }\n `}\n`;\n\nexport const PriceWrapper = styled(Wrapper)`\n ${theme.typography.titleDisplay}\n`;\n\nexport const CurrencyWrapper = styled(Currency)`\n ${theme.typography.titleLarge}\n`;\n\nexport const DualPriceWrapper = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n`;\n\nexport const DualPrice = styled.div<{ newDesign: boolean }>`\n font-size: 1.55rem;\n font-weight: 700;\n ${({ newDesign }) => newDesign && theme.typography.titleLarge}\n`;\n\nexport const DualPriceSplitter = styled.div<{ newDesign: boolean }>`\n padding: 0 0.3rem;\n font-size: 1.55rem;\n font-weight: 700;\n ${({ newDesign }) => newDesign && theme.typography.titleLarge}\n`;\n","import * as React from 'react';\n\nimport { VariantDisplayType } from '@notino/shared/__generated__/globalSPATypes';\n\nimport ErrorBoundary from '@components/ErrorBoundary';\nimport PriceLabel from '@components/PriceLabel';\nimport { IStock } from '@containers/ProductListing/model';\n\nimport { variantFragment } from '../../../queries/__generated__/variantFragment';\nimport { useIsDualPriceForCroatia } from '../../hooks/useIsDualPriceForCroatia';\nimport { useNewPdDesignEnabled } from '../../hooks/useNewPdDesignEnabled';\nimport { TagDiscount } from '../VariantsInSelectBox/TagDiscount';\n\nimport {\n Container,\n FlexWrapper,\n Name,\n Line,\n LineWrapper,\n PriceWrapper,\n CurrencyWrapper,\n DualPriceSplitter,\n DualPrice,\n DualPriceWrapper,\n} from './styled';\n\nexport interface ISelectedVariantProps {\n variant: variantFragment;\n displayType: VariantDisplayType;\n singleVariant?: boolean;\n renderTagDiscount: boolean;\n variantName: React.ReactNode;\n\n hideLine?: boolean;\n hideVariantName?: boolean;\n}\n\nexport const SelectedVariant: React.FC = React.memo(\n ({\n variant,\n renderTagDiscount,\n variantName,\n hideLine = false,\n hideVariantName = false,\n }) => {\n const newDesign = useNewPdDesignEnabled();\n const {\n isDualPriceForCroatia,\n getLeftSideFormattedPrice,\n getRightSideFormattedPrice,\n leftSideCurrency,\n rightSideCurrency,\n } = useIsDualPriceForCroatia();\n const inStock = variant.stockAvailability.code !== IStock.outOfStock;\n\n return (\n \n \n {renderTagDiscount && }\n \n \n {hideVariantName ? null : variantName}\n \n\n {inStock && !isDualPriceForCroatia && (\n \n )}\n\n {inStock && isDualPriceForCroatia && (\n \n \n {getLeftSideFormattedPrice(variant.price.value)}{' '}\n {leftSideCurrency}\n \n\n /\n\n \n {getRightSideFormattedPrice(variant.price.value)}{' '}\n {rightSideCurrency}\n \n \n )}\n \n \n {hideLine ? null : (\n \n )}\n \n \n \n );\n }\n);\n\nSelectedVariant.displayName = 'SelectedVariant';\n","import { snakeCase } from 'lodash';\n\nimport { VariantDisplayTypes } from '@containers/ProductListing/model';\nimport { dispatchTrackingEvent } from '@context/tracking/utils';\n\nexport const trackTryItFirstAddToCart = (productCode: string) => {\n dispatchTrackingEvent({\n event: 'general_event',\n general_parameters: {\n id: undefined,\n type: 'try_it_first',\n action: 'try_it_first_product_added',\n description_data: productCode,\n value_units: 'product_code',\n interaction: 'add',\n },\n _clear: true,\n });\n};\n\nexport const trackVariantClick = (\n timing: number,\n type: VariantDisplayTypes,\n promoLabel?: string\n) => {\n dispatchTrackingEvent({\n event: 'element_click',\n element: {\n timing,\n action: 'click_on_variant_tile',\n type,\n name: '',\n interaction: 'click',\n promo_labels: snakeCase(promoLabel),\n },\n _clear: true,\n });\n};\n","import styled, { css } from 'styled-components';\n\nimport { IBasicStyledProps, theme } from '@notino/react-styleguide';\ninterface IDisabledText extends IBasicStyledProps {\n disabled: boolean;\n}\n\nexport const Container = styled.div<{ newPdDesignEnabled: boolean }>`\n padding: 1rem 0;\n display: block;\n\n label {\n ${({ newPdDesignEnabled }) =>\n newPdDesignEnabled\n ? theme.typography.labelRegular\n : css`\n font-weight: 700;\n `}\n }\n\n svg {\n vertical-align: middle;\n padding-left: 0.4rem;\n }\n`;\n\nexport const TooltipWrapper = styled.div`\n text-align: left !important;\n font-size: 0.9rem;\n padding: 0.2rem;\n`;\n\nexport const Description = styled.div<{ newDesign: boolean }>`\n padding-left: 2.25rem;\n a {\n text-decoration: underline;\n }\n a:hover {\n cursor: pointer;\n }\n\n ${({ newDesign }) =>\n newDesign\n ? css`\n margin-top: 0.25rem;\n color: ${theme.palette.neutralDarker};\n ${theme.typography.bodyRegular}\n `\n : css`\n line-height: 1.313rem;\n font-size: 0.875rem;\n\n a {\n color: ${(props) => props.theme.palette.basic};\n }\n `}\n`;\n\nexport const DisabledTextWrapper = styled.div`\n color: ${(props: IDisabledText) =>\n props.disabled ? props.theme.palette.neutral : props.theme.palette.basic};\n`;\n","import * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Checkbox } from '@notino/react-styleguide';\nimport { AdditionalServicesAvailability } from '@notino/web-tracking';\n\nimport { useNewPdDesignEnabled } from '../../hooks/useNewPdDesignEnabled';\nimport { useEngravingTryItFirstContext } from '../context/EngravingTryItFirst';\n\nimport { Container, Description, DisabledTextWrapper } from './styled';\nimport { messages } from './tryItFirstMessages';\n\ninterface ITryItFirstProps {\n availability?: AdditionalServicesAvailability;\n}\n\nexport const TryItFirst = ({ availability }: ITryItFirstProps) => {\n const {\n state: { withTryItFirst, withEngraving },\n actions: { toggleTryItFirst },\n } = useEngravingTryItFirstContext();\n const newDesign = useNewPdDesignEnabled();\n\n const isTryItFirstDisabled =\n availability !== AdditionalServicesAvailability.available || withEngraving;\n\n const toggle = () => {\n toggleTryItFirst(!withTryItFirst);\n };\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nTryItFirst.displayName = 'TryItFirst';\n","import { getRenderableAttributes } from '@components/Tags/utils';\nimport { variantFragment } from '@containers/ProductDetailContainer/queries/__generated__/variantFragment';\nimport { IStock } from '@containers/ProductListing/model';\n\nconst hasTagOrDiscount = (variant: variantFragment): boolean => {\n const attributes = getRenderableAttributes(variant.attributes);\n const hasAttributes = Object.keys(attributes).length > 0;\n const hasDiscount =\n variant.stockAvailability.code !== IStock.outOfStock &&\n Boolean(variant.originalPrice) &&\n variant.originalPrice.value > 0;\n return hasAttributes || hasDiscount;\n};\n\nexport const shouldRenderTagDiscount = (variants: variantFragment[]): boolean =>\n variants.some(hasTagOrDiscount);\n","import { Link } from 'react-router-dom';\n\nimport styled, { css } from 'styled-components';\n\nimport { breakpoints, theme } from '@notino/react-styleguide';\n\nimport { ICurrencyProps } from '@components/PriceLabel/components/Currency';\n\nimport { IVariantNameProps } from '../../model';\n\nexport const VariantListItem = styled.li<{ minWidth?: string }>`\n list-style-type: none;\n display: inline-block;\n flex-shrink: 0;\n padding: 0;\n margin: 0;\n min-width: ${(props) => props.minWidth || '28vw'};\n\n &:before {\n display: none;\n }\n\n @media (min-width: ${breakpoints.sm}) {\n min-width: auto;\n }\n`;\n\nexport const VariantLink = styled(Link)`\n text-decoration: none;\n`;\n\nexport const VariantCommon = styled.div`\n position: relative;\n margin: 0 0.25rem 0.25rem 0;\n font-weight: normal;\n line-height: 1.375rem;\n cursor: pointer;\n`;\n\nexport const Name = styled.div<{ newDesign: boolean } & IVariantNameProps>`\n ${({ newDesign, isOnStock }) =>\n newDesign\n ? css`\n ${theme.typography.labelRegular}\n color: ${isOnStock ? theme.palette.basic : theme.palette.neutralDark}\n `\n : css`\n color: ${isOnStock ? theme.palette.basic : theme.palette.neutral};\n font-size: 0.8rem;\n `}\n`;\n\nexport const PriceLabelCurrency = styled.span`\n padding-left: ${(props: ICurrencyProps) =>\n props.isSpaced && !props.isPrefix ? '0.3rem' : 0};\n padding-right: ${(props: ICurrencyProps) =>\n props.isSpaced && props.isPrefix ? '0.3rem' : 0};\n`;\n\nexport const Container = styled.div<{ newDesign: boolean }>`\n width: 100%;\n overflow-y: hidden;\n\n @media (min-width: ${breakpoints.md}) {\n height: initial;\n }\n\n ${({ newDesign }) =>\n !newDesign &&\n css`\n margin-bottom: 1.25rem;\n `}\n`;\n\nexport const VariantList = styled.ul<{\n newDesign: boolean;\n itemsCount: number;\n}>`\n ${({ newDesign, itemsCount }) =>\n newDesign\n ? css`\n display: flex;\n gap: 0.5rem;\n margin: 0;\n @media (min-width: ${breakpoints.lg}) {\n display: grid;\n grid-gap: 0.5rem;\n grid-template-columns: repeat(${itemsCount >= 3 ? 3 : 2}, 1fr);\n }\n `\n : css`\n display: flex;\n flex-wrap: nowrap;\n overflow-x: scroll;\n -webkit-overflow-scrolling: touch;\n margin: 0;\n\n @media (min-width: ${breakpoints.md}) {\n flex-wrap: wrap;\n height: auto;\n overflow-x: auto;\n padding: 0;\n }\n `}\n`;\n","var t;!function(t){t.TO_RIGHT=\"to right\",t.TO_BOTTOM_RIGHT=\"to bottom right\"}(t||(t={}));export{t as Directions};\n//# sourceMappingURL=ColorRectangleModel.js.map\n","import{b as e}from\"./_rollupPluginBabelHelpers-fc5c8eb1.js\";import{breakpoints as n}from\"./breakpoints.js\";import{styled as t}from\"./styled.js\";import{theme as r}from\"./theme.js\";import{Directions as i}from\"./ColorRectangleModel.js\";import\"styled-components\";var o,m=/^(#?ffffff.*|#?fff.*|transparent)$/i,a=\"1px solid \"+String(r.palette&&r.palette.neutral),l=function(e){return e.some((function(e){return m.test(e)}))?a:\"none\"},f=function(e){if(0===e.length)return r.palette.neutral;var n=100/e.length;return(50===n?i.TO_BOTTOM_RIGHT:i.TO_RIGHT)+\", \"+e.map((function(e,t){return e.toLowerCase()+\" \"+n*t+\"%, \"+e.toLowerCase()+\" \"+n*(t+1)+\"%\"})).join(\",\")},s=t.div.attrs((function(e){var n=e.colors;return{style:{backgroundColor:\"\"+(0===n.length?r.palette.neutral:n[0]),backgroundImage:\"linear-gradient(\"+f(n)+\")\",border:l(n)}}}))(o||(o=e([\"\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n margin: 0.125rem;\\n width: \",\"rem;\\n height: \",\"rem;\\n min-width: 2.5rem;\\n min-height: 2.5rem;\\n\\n @media (min-width: \",\") {\\n min-width: 2rem;\\n min-height: 2rem;\\n }\\n\"])),(function(e){return e.width}),(function(e){return e.height}),n.md);export{s as ColorRectangle};\n//# sourceMappingURL=ColorRectangle.js.map\n","import styled, { css } from 'styled-components';\n\nimport {\n breakpoints,\n ColorRectangle,\n IBasicStyledProps,\n theme,\n} from '@notino/react-styleguide';\n\nimport { TooltipContent } from '@components/Tooltip/Content';\n\nexport const Container = styled.div<{ newDesign: boolean }>`\n width: 100%;\n\n ${({ newDesign }) =>\n !newDesign &&\n css`\n margin-bottom: 0.625rem;\n `}\n`;\n\nexport const VariantsList = styled.ul`\n display: flex;\n flex-wrap: wrap;\n`;\n\ninterface IVariantProps extends IBasicStyledProps {\n isSelected: boolean;\n isOnStock: boolean;\n touch: boolean;\n newDesign: boolean;\n}\n\nexport const Variant = styled.div`\n position: relative;\n border: 1px solid\n ${({ isSelected }) =>\n isSelected ? theme.palette.neutralDarker : theme.palette.basicInverse};\n\n cursor: pointer;\n\n ${({ newDesign }) =>\n newDesign\n ? css`\n margin: 0;\n `\n : css`\n margin: 0 0.3125rem 0.3125rem 0;\n `}\n\n display: ${(props: IVariantProps) => (props.touch ? 'flex' : 'none')};\n @media (hover: hover) {\n display: ${(props: IVariantProps) => (props.touch ? 'none' : 'flex')};\n }\n`;\n\nexport const StyledColorRectangle = styled(ColorRectangle)<{\n newDesign: boolean;\n bordered?: boolean;\n}>`\n ${({ bordered }) =>\n bordered &&\n css`\n border: 1px solid ${theme.palette.neutralDarker} !important;\n `}\n\n ${({ newDesign }) =>\n newDesign\n ? css`\n width: 2.5rem;\n height: 2.5rem;\n margin: 0.25em;\n @media (min-width: ${breakpoints.lg}) {\n width: 2rem;\n height: 2rem;\n }\n `\n : css``}\n`;\n\nexport const ColorPickerContent = styled(TooltipContent)`\n width: max-content;\n min-width: 0;\n`;\n","import * as React from 'react';\n\nimport { CloseIcon, Colors, Tooltip } from '@notino/react-styleguide';\n\nimport ErrorBoundary from '@components/ErrorBoundary';\nimport { useNewPdDesignEnabled } from '@containers/ProductDetailContainer/ProductDetail/hooks/useNewPdDesignEnabled';\nimport { variantFragment } from '@containers/ProductDetailContainer/queries/__generated__/variantFragment';\nimport { IStock, VariantDisplayTypes } from '@containers/ProductListing/model';\nimport { useTrackingContext } from '@context/tracking/TrackingContext';\nimport { hexToDec, dataLabelsProp } from '@helpers/utils';\n\nimport { trackVariantClick } from '../../tracking';\nimport { VariantLink, VariantListItem } from '../../variantsStyled';\n\nimport { StyledColorRectangle, Variant, ColorPickerContent } from './styled';\n\nexport interface IVariantItemProps {\n item: variantFragment;\n isSelected: boolean;\n}\n\nexport const getContrastingIconColor = (colors: string[]) => {\n if (colors.length === 0) {\n return Colors.basic;\n }\n\n const avgColor =\n colors\n .map(\n (c) =>\n 0.2126 * hexToDec(c, 0) +\n 0.7152 * hexToDec(c, 2) +\n 0.0722 * hexToDec(c, 4)\n )\n .reduce((a, b) => a + b) / colors.length;\n\n return avgColor > 0.179 ? Colors.basicInverse : Colors.basic;\n};\n\nexport const ColorPicker: React.FC = ({\n item,\n isSelected,\n}) => {\n const newDesign = useNewPdDesignEnabled();\n const { getTimeFromInit } = useTrackingContext();\n const isOnStock = item.stockAvailability.code !== IStock.outOfStock;\n\n const withoutColor = !item.colors || item.colors.length === 0;\n const colors = withoutColor ? [Colors.basic] : item.colors;\n\n const handleClick = () =>\n trackVariantClick(getTimeFromInit(), VariantDisplayTypes.ColorPicker);\n\n const ColorTile = (\n \n {!isOnStock && (\n \n )}\n \n );\n\n return (\n \n \n \n \n {item.additionalInfo}\n }\n >\n {ColorTile}\n \n \n \n {ColorTile}\n \n \n \n \n );\n};\n","import * as React from 'react';\n\nimport { useNewPdDesignEnabled } from '@containers/ProductDetailContainer/ProductDetail/hooks/useNewPdDesignEnabled';\n\nimport { IVariantsProps } from '../../../../model';\n\nimport { ColorPicker } from './ColorPicker';\nimport { Container, VariantsList } from './styled';\n\nexport const VariantsColorPickers: React.FC = ({\n selectedId,\n variants,\n}) => {\n const newDesign = useNewPdDesignEnabled();\n\n return (\n \n \n {variants.map((item) => (\n \n ))}\n \n \n );\n};\n","export const VARIANT_CHEVRON_SIZE = '1.5rem';\nexport const COLOR_CIRCLE_SIZE = 2.25;\n","import { defineMessages } from 'react-intl';\n\nexport const messages = defineMessages({\n pickVariant: {\n id: 'pd.variant.drawer.pickVariant',\n defaultMessage: 'Zvolte si odstín',\n },\n});\n","import{b as o}from\"./_rollupPluginBabelHelpers-fc5c8eb1.js\";import{styled as r}from\"./styled.js\";import{ColorRectangle as e}from\"./ColorRectangle.js\";import\"styled-components\";import\"./breakpoints.js\";import\"./theme.js\";import\"./ColorRectangleModel.js\";var t,s=r(e)(t||(t=o([\"\\n border-radius: 50%;\\n\"])));export{s as ColorCircle};\n//# sourceMappingURL=ColorCircle.js.map\n","import {\n styled,\n ColorCircle,\n theme,\n breakpoints,\n} from '@notino/react-styleguide';\n\nimport { COLOR_CIRCLE_SIZE } from './constants';\n\nexport const Button = styled.button`\n width: 100%;\n padding: 1rem;\n\n cursor: pointer;\n\n background: ${theme.palette.basicInverse};\n border: 0.1rem solid ${theme.palette.neutralLight};\n`;\n\nexport const ShadesVariantsList = styled.ul`\n display: flex;\n flex-wrap: wrap;\n`;\n\nexport const VariantInfo = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const OffsetScrollDiv = styled.div`\n position: relative;\n top: -4rem;\n\n @media (min-width: ${breakpoints.md}) {\n top: -40vh;\n }\n`;\n\nexport const AdditionalInfo = styled.span`\n color: ${theme.palette.basic};\n margin-left: 1rem;\n font-size: 1rem;\n`;\n\nexport const TagOrWatchdogWrapper = styled.div`\n margin-left: auto;\n`;\n\nexport const WatchDogLink = styled.button`\n text-decoration: underline;\n white-space: nowrap;\n\n background: transparent;\n border: 0;\n font-size: 0.875rem;\n`;\n\nexport const ChevronWrapper = styled.div`\n margin-left: auto;\n`;\n\nexport const BorderedColorCircle = styled(ColorCircle)<{\n darkerBorder: boolean;\n}>`\n border: 0.1rem solid\n ${({ darkerBorder }) =>\n darkerBorder\n ? theme.palette.neutralDarker\n : theme.palette.basicInverse} !important;\n min-height: ${COLOR_CIRCLE_SIZE}rem;\n min-width: ${COLOR_CIRCLE_SIZE}rem;\n overflow: hidden;\n`;\n\nexport const ButtonColorCircle = styled(ColorCircle)`\n min-width: 2rem;\n min-height: 2rem;\n`;\n\nexport const Title = styled.h4`\n margin: 0;\n\n font-size: 1rem;\n font-weight: bold;\n`;\n\nexport const VariantListItem = styled.li`\n width: 100%;\n\n // override layout styles for li\n padding: 0;\n margin: 0;\n :before {\n content: none;\n }\n`;\n\nexport const Variant = styled.div<{ isSelected: boolean }>`\n display: flex;\n align-items: center;\n padding: 1rem 1.25rem;\n\n color: ${theme.palette.basic};\n\n background: ${(props) =>\n props.isSelected\n ? props.theme.palette.neutralLight\n : props.theme.palette.basicInverse};\n\n &:hover {\n background: ${(props) =>\n props.isSelected\n ? props.theme.palette.neutralLight\n : props.theme.palette.neutralLighter};\n }\n`;\n\nexport const VariantListItemInfo = styled.div<{ isOutOfStock: boolean }>`\n display: flex;\n align-items: center;\n margin-right: 1rem;\n\n ${({ isOutOfStock }) => (isOutOfStock ? 'opacity: 0.25;' : '')}\n`;\n\nexport const Tag = styled.small`\n color: ${theme.palette.neutralDark};\n`;\n","import { getProductView_productDetailByMasterId } from '@containers/ProductDetailContainer/queries/__generated__/getProductView';\nimport { variantFragment } from '@containers/ProductDetailContainer/queries/__generated__/variantFragment';\nimport { TrackingAttributes } from '@context/tracking/types';\nimport { dispatchTrackingEvent } from '@context/tracking/utils';\nimport { ProductEventWither } from '@helpers/googleTagManager';\nimport { resolveDrawerCloseType } from '@utils/drawer';\n\nconst trackDrawerEvent = (args: {\n timing: number;\n mode: string;\n interaction: string;\n}) => {\n dispatchTrackingEvent({\n event: 'element_click',\n element: {\n mode: 'open',\n name: 'Drawer',\n interaction: 'click',\n action: '',\n promo_labels: undefined,\n type: 'drawer',\n ...args,\n },\n _clear: true,\n });\n};\n\nexport const trackDrawerOpen = ({\n timing,\n}: Pick) => {\n trackDrawerEvent({\n mode: 'open',\n timing,\n interaction: 'click',\n });\n};\n\nexport const trackDrawerClose = ({\n timing,\n closeType,\n}: Omit, 'variant'>) => {\n const eventLabel = resolveDrawerCloseType(closeType);\n\n trackDrawerEvent({\n mode: 'close',\n interaction: eventLabel,\n timing,\n });\n};\n\nexport const trackResizeToTop = ({\n timing,\n}: Pick) => {\n trackDrawerEvent({\n mode: 'open',\n interaction: 'resize+',\n timing,\n });\n};\n\nexport const trackResizeToMiddle = ({\n timing,\n}: Pick) => {\n trackDrawerEvent({\n mode: 'open',\n interaction: 'resize-',\n timing,\n });\n};\n\nexport const trackDrawerVariantClick = ({\n timing,\n}: Pick) => {\n trackDrawerEvent({\n mode: undefined,\n interaction: 'select_variant',\n timing,\n });\n};\n\nexport const trackDrawerWatchdogClick = (\n product: getProductView_productDetailByMasterId,\n variant: variantFragment\n) => {\n dispatchTrackingEvent({\n event: 'watchdog_click',\n watchdog: {\n action: 'wt_add_watchdog',\n interaction: 'button',\n type: 'Drawer',\n products: [\n ProductEventWither()\n .withProduct(product)\n .withPartialVariant({\n ...variant,\n price: {\n __typename: 'Price',\n ...variant.price,\n },\n stockAvailability: {\n code: variant.stockAvailability.code,\n __typename: 'StockInfo',\n count: undefined,\n },\n })\n .build(),\n ],\n },\n _clear: true,\n });\n};\n","import { ProductTileModel, theme } from '@notino/react-styleguide';\n\nconst availableTagsForShadesDrawer = [\n ProductTileModel.TagAttributes.Damaged,\n ProductTileModel.TagAttributes.Returned,\n];\n\nexport const isAvailableTagForShadesDrawer = (\n tag: ProductTileModel.TagAttributes\n) => {\n return availableTagsForShadesDrawer.includes(tag);\n};\n\n/**\n * Resolves color for item\n * @param item\n * @return color for color circle\n */\nexport const getItemColors = (item: {\n colors: Array;\n color: string;\n}): Array => {\n if (item?.colors?.length > 0) {\n return item.colors;\n }\n return [item?.color || theme.palette.basicInverse];\n};\n","import{_ as e}from\"./_rollupPluginBabelHelpers-fc5c8eb1.js\";import*as r from\"react\";import{Icon as t}from\"./index.js\";import\"./ThemeContext.js\";import\"styled-components\";var o=function(o){return r.createElement(t,e({},o,{viewBox:\"0 0 50 64\"}),r.createElement(\"path\",{d:\"M3 51L51 3\",stroke:\"currentColor\",strokeWidth:\"4\",strokeLinecap:\"square\"}))};export{o as CloseLineIcon};\n//# sourceMappingURL=CloseLineIcon.js.map\n","import * as React from 'react';\n\nimport { OffsetScrollDiv } from '../styled';\n\nexport const OffsetScroll: React.FC = () => {\n const ref = React.useRef();\n\n React.useEffect(() => {\n if (ref.current) {\n ref.current.scrollIntoView(true);\n }\n }, []);\n return ;\n};\n","import * as React from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { useTagAttributes } from '@components/Universals/ProductItem/useTagAttributes';\nimport { Watchdog } from '@sharedComponents/Watchdog';\nimport { watchdogMessages } from '@sharedComponents/Watchdog/watchdogMessages';\n\nimport { WatchDogLink, Tag, TagOrWatchdogWrapper } from './styled';\nimport { trackDrawerWatchdogClick } from './tracking';\nimport { isAvailableTagForShadesDrawer } from './utils';\nimport { ColorCirclePickerProps } from './VariantColorListItem';\n\nexport const ItemStatus: React.FC<\n Pick\n> = ({ item, product }) => {\n const { formatMessage } = useIntl();\n const tagAttributes = useTagAttributes(item.attributes, {\n multiple: false,\n customFilter: isAvailableTagForShadesDrawer,\n });\n const tagLabel = tagAttributes?.[0]?.label;\n\n if (!item.showWatchdog && !tagLabel) {\n return null;\n }\n\n const handleWatchdogClick = (e) => {\n e.preventDefault();\n trackDrawerWatchdogClick(product, item);\n };\n\n return (\n \n {item.showWatchdog ? (\n \n \n {formatMessage(watchdogMessages.watchAvailability)}\n \n \n ) : (\n {tagLabel}\n )}\n \n );\n};\n","import * as React from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DrawerContext, CloseLineIcon } from '@notino/react-styleguide';\n\nimport ErrorBoundary from '@components/ErrorBoundary';\nimport messages from '@containers/ProductDetailContainer/messages';\nimport { getProductView_productDetailByMasterId } from '@containers/ProductDetailContainer/queries/__generated__/getProductView';\nimport { useAppendDisplayTypeForAbTest } from '@containers/ProductDetailContainer/utils';\nimport { IStock } from '@containers/ProductListing/model';\nimport { dataLabelsProp } from '@helpers/utils';\n\nimport { VariantLink } from '../../variantsStyled';\nimport {\n IVariantItemProps,\n getContrastingIconColor,\n} from '../VariantsColorPickers/ColorPicker';\n\nimport { OffsetScroll } from './components/OffsetScroll';\nimport { COLOR_CIRCLE_SIZE } from './constants';\nimport { ItemStatus } from './ItemStatus';\nimport {\n VariantListItem,\n Variant,\n BorderedColorCircle,\n AdditionalInfo,\n VariantListItemInfo,\n} from './styled';\nimport { trackDrawerVariantClick } from './tracking';\nimport { getItemColors } from './utils';\n\nexport interface ColorCirclePickerProps extends IVariantItemProps {\n getTimeFromInit: () => number;\n product: getProductView_productDetailByMasterId;\n}\n\nexport const ColorCirclePicker: React.FC = ({\n item,\n isSelected,\n getTimeFromInit,\n product,\n}) => {\n const { closeDrawer } = DrawerContext.useDrawerContext();\n const variantUrl = useAppendDisplayTypeForAbTest(item.url);\n\n const { formatMessage } = useIntl();\n\n const isOutOfStock = item.stockAvailability.code === IStock.outOfStock;\n const withoutColors = !item.colors || item.colors.length === 0;\n const colors = getItemColors(item);\n\n const handleClick = () => {\n trackDrawerVariantClick({ timing: getTimeFromInit() });\n closeDrawer();\n };\n\n return (\n \n {isSelected && }\n \n \n \n \n \n {isOutOfStock && (\n \n )}\n \n {item.additionalInfo}\n \n\n \n \n \n \n \n );\n};\n","import * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { DrawerContext, Colors } from '@notino/react-styleguide';\n\nimport { IVariantsProps as ICommonVariantsProps } from '@containers/ProductDetailContainer/model';\nimport { useProductDetailContext } from '@containers/ProductDetailContainer/ProductDetail/ProductDetailContext';\nimport { useTrackingContext } from '@context/tracking/TrackingContext';\nimport { HorizontalChevron } from '@sharedComponents/Icons/HorizontalChevron';\n\nimport { VARIANT_CHEVRON_SIZE } from './constants';\nimport { messages } from './messages';\nimport {\n Button,\n Title,\n VariantInfo,\n ChevronWrapper,\n AdditionalInfo,\n ShadesVariantsList,\n ButtonColorCircle,\n} from './styled';\nimport {\n trackDrawerOpen,\n trackResizeToTop,\n trackResizeToMiddle,\n trackDrawerClose,\n} from './tracking';\nimport { getItemColors } from './utils';\nimport { ColorCirclePicker } from './VariantColorListItem';\n\nexport const VariantsShadesDrawer: React.FC = ({\n variants,\n selectedId,\n selectedVariant,\n}) => {\n const { openDrawer, closeDrawer } = DrawerContext.useDrawerContext();\n const { getTimeFromInit: getTime } = useTrackingContext();\n const { product } = useProductDetailContext();\n\n const handleOpenDrawer: React.MouseEventHandler = () => {\n trackDrawerOpen({ timing: getTime() });\n openDrawer(\n \n {variants.map((item) => (\n \n ))}\n ,\n {\n title: (\n \n \n \n ),\n interceptBrowserBackButtonToCloseDrawer: true,\n onClose: (closeType) => {\n trackDrawerClose({ closeType, timing: getTime() });\n closeDrawer();\n },\n onResizeToTop: () => trackResizeToTop({ timing: getTime() }),\n onResizeToMiddle: () => trackResizeToMiddle({ timing: getTime() }),\n }\n );\n };\n\n return (\n \n
\n
\n );\n};\n","import styled, { css } from 'styled-components';\n\nimport { breakpoints, theme } from '@notino/react-styleguide';\n\nimport { CdnImage } from '@components/CdnImage';\n\nimport { IStyledVariantProps } from '../../../../model';\nimport { VariantCommon } from '../../variantsStyled';\n\nconst variantBorderColor = (props: IStyledVariantProps) => {\n const { isSelected } = props;\n return isSelected ? theme.palette.neutral : theme.palette.neutralLight;\n};\n\ntype VariantProps = { newDesign: boolean } & IStyledVariantProps;\nexport const Variant = styled(VariantCommon)`\n ${({ newDesign, isSelected }) =>\n newDesign\n ? css`\n border: 1px solid\n ${isSelected\n ? theme.palette.neutralDarker\n : theme.palette.neutralLight};\n padding: 0.625rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n margin: 0;\n width: 6.5rem;\n height: 7.5rem;\n\n @media (min-width: ${breakpoints.lg}) {\n flex-direction: row;\n flex-wrap: wrap;\n height: auto;\n width: auto;\n }\n `\n : css`\n border: 1px solid ${variantBorderColor};\n margin-right: 0.625rem;\n margin-bottom: 0.625rem;\n padding: 0.625rem;\n min-height: 7.75rem;\n `}\n`;\n\ninterface IImgWrapperProps {\n isOnStock: boolean;\n isSelected: boolean;\n newDesign: boolean;\n}\n\nexport const ImgWrapper = styled.span`\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ${(props) => props.theme.palette.basicInverse};\n\n img {\n opacity: ${(props) =>\n props.isSelected || props.isOnStock ? 1 : props.newDesign ? 0.5 : 0.6};\n overflow: hidden;\n }\n\n ${({ newDesign }) =>\n newDesign\n ? css`\n img {\n height: 4rem;\n width: 4rem;\n object-fit: contain;\n }\n `\n : css`\n width: 5rem;\n height: 5rem;\n img {\n max-width: 4.375rem !important;\n max-height: 4.375rem !important;\n }\n `}\n`;\n\ninterface IPriceLabelWrapperProps {\n isOnStock: boolean;\n isSelected: boolean;\n newDesign: boolean;\n}\n\nexport const PriceLabelWrapper = styled.div`\n text-align: center;\n\n ${({ newDesign, isOnStock, isSelected }) =>\n newDesign\n ? css`\n ${isSelected\n ? theme.typography.labelRegular\n : theme.typography.labelRegular400}\n color: ${isSelected\n ? theme.palette.basic\n : theme.palette.neutralDarker};\n `\n : css`\n color: ${isOnStock ? theme.palette.basic : theme.palette.neutral};\n font-weight: ${isSelected ? 'bold' : 'normal'};\n font-size: 0.9rem;\n `}\n`;\n\n// has to be used because of isVideo prop warning, as we attempt to pass to dom element isVideo prop\nexport const Img = styled(CdnImage)``;\n\nexport const VariantList = styled.ul<{\n newDesign: boolean;\n itemsCount: number;\n}>`\n ${({ newDesign, itemsCount }) =>\n newDesign\n ? css`\n display: flex;\n gap: 0.5rem;\n\n @media (min-width: ${breakpoints.lg}) {\n display: grid;\n grid-gap: 0.5rem;\n grid-template-columns: repeat(${itemsCount >= 3 ? 3 : 2}, 1fr);\n }\n `\n : css`\n display: flex;\n flex-wrap: nowrap;\n overflow-x: scroll;\n -webkit-overflow-scrolling: touch;\n margin: 0;\n\n @media (min-width: ${breakpoints.md}) {\n flex-wrap: wrap;\n height: auto;\n overflow-x: auto;\n padding: 0;\n }\n `}\n`;\n\nexport const VariantListItem = styled.li<{ newDesign: boolean }>`\n list-style-type: none;\n display: inline-block;\n flex-shrink: 0;\n padding: 0;\n margin: 0;\n\n &:before {\n display: none;\n }\n\n ${({ newDesign }) =>\n !newDesign &&\n css`\n min-width: 28vw;\n @media (min-width: ${breakpoints.sm}) {\n min-width: auto;\n }\n `}\n`;\n","import * as React from 'react';\n\nimport { TagModel } from '@notino/react-styleguide';\n\nimport ErrorBoundary from '@components/ErrorBoundary';\nimport PriceLabel from '@components/PriceLabel';\nimport { Tags } from '@components/Tags';\nimport { useIsDualPriceForCroatia } from '@containers/ProductDetailContainer/ProductDetail/hooks/useIsDualPriceForCroatia';\nimport { useNewPdDesignEnabled } from '@containers/ProductDetailContainer/ProductDetail/hooks/useNewPdDesignEnabled';\nimport { IStock, VariantDisplayTypes } from '@containers/ProductListing/model';\nimport { useTrackingContext } from '@context/tracking/TrackingContext';\nimport { dataLabelsProp } from '@helpers/utils';\n\nimport { IVariantProps } from '../../../../model';\nimport { trackVariantClick } from '../../tracking';\nimport { VariantLink, PriceLabelCurrency } from '../../variantsStyled';\n\nimport {\n PriceLabelWrapper,\n Variant,\n ImgWrapper,\n Img,\n VariantListItem,\n} from './styled';\n\nexport const VariantThumbnail: React.FC = ({\n item,\n isSelected,\n displayPrice,\n}) => {\n const isOnStock = item.stockAvailability.code !== IStock.outOfStock;\n const { getTimeFromInit } = useTrackingContext();\n const newDesign = useNewPdDesignEnabled();\n const { isDualPriceForCroatia } = useIsDualPriceForCroatia();\n\n const handleClick = () =>\n trackVariantClick(getTimeFromInit(), VariantDisplayTypes.Thumbnail);\n\n return (\n \n \n \n \n {item.attributes && (\n \n )}\n\n \n
\n \n\n {displayPrice && isOnStock && !isDualPriceForCroatia && (\n (\n \n )}\n currencyComponent={PriceLabelCurrency}\n />\n )}\n \n \n \n \n );\n};\n","import * as React from 'react';\n\nimport { useNewPdDesignEnabled } from '@containers/ProductDetailContainer/ProductDetail/hooks/useNewPdDesignEnabled';\n\nimport { IVariantsProps } from '../../../../model';\nimport { Container } from '../../variantsStyled';\n\nimport { isPriceSame } from './isPriceSame';\nimport { VariantList } from './styled';\nimport { VariantThumbnail } from './VariantThumbnail';\n\nexport const VariantsThumbnail: React.FC = ({\n locale,\n unit,\n selectedId,\n variants,\n currency,\n}) => {\n const samePrice = isPriceSame(variants);\n const newDesign = useNewPdDesignEnabled();\n\n return (\n \n \n {variants.map((item) => (\n \n ))}\n \n \n );\n};\n","import { variantFragment } from '@containers/ProductDetailContainer/queries/__generated__/variantFragment';\n\nexport const isPriceSame = (variants: variantFragment[]): boolean =>\n variants.every(\n (variant, _, array) => variant.price.value === array[0].price.value\n );\n","import { defineMessages } from 'react-intl';\n\nexport const messages = defineMessages({\n unavailable: {\n id: 'pd.variants.tile.unavailable',\n defaultMessage: 'Nedostupné',\n },\n});\n","import styled, { css } from 'styled-components';\n\nimport { breakpoints, theme } from '@notino/react-styleguide';\n\nimport { IStyledVariantProps } from '../../../../model';\nimport { VariantCommon } from '../../variantsStyled';\n\ntype VariantProps = IStyledVariantProps & {\n newDesign: boolean;\n isDualPriceForCroatia: boolean;\n};\nexport const Variant = styled(VariantCommon)`\n ${({ newDesign, isSelected, isOnStock, isDualPriceForCroatia }) =>\n newDesign\n ? css`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: ${isOnStock && isDualPriceForCroatia\n ? 'center'\n : 'space-between'};\n margin: 0;\n background-color: ${theme.palette.basicInverse};\n height: 3.5rem;\n width: 6.5rem;\n padding: 0.625rem 0.5rem;\n border: 1px solid\n ${isSelected\n ? theme.palette.basic\n : isOnStock\n ? theme.palette.neutral\n : theme.palette.neutralLight};\n @media (min-width: ${breakpoints.lg}) {\n width: auto;\n }\n `\n : css`\n min-height: 3.625rem;\n border: 1px solid\n ${(props: IStyledVariantProps) =>\n props.isSelected\n ? props.theme.palette.neutral\n : props.theme.palette.neutralLighter};\n background-color: ${(props) =>\n props.isSelected\n ? props.theme.palette.basicInverse\n : props.theme.palette.neutralLighter};\n\n &:hover {\n border: 1px solid\n ${(props: IStyledVariantProps) =>\n props.isSelected\n ? props.theme.palette.neutral\n : props.theme.palette.neutralLight};\n background-color: ${(props) =>\n props.isSelected\n ? props.theme.palette.basicInverse\n : props.theme.palette.neutralLight};\n }\n\n padding: 0.375rem 1.875rem 0.375rem 0.625rem;\n @media (min-width: ${breakpoints.sm}) {\n min-width: 6.8rem;\n }\n `}\n`;\n\ninterface IPriceLabelWrapperProps {\n isOnStock: boolean;\n isSelected: boolean;\n newDesign: boolean;\n}\n\nexport const PriceLabelWrapper = styled.div`\n ${({ newDesign, isOnStock, isSelected }) =>\n newDesign\n ? css`\n ${theme.typography.labelSmall400}\n color:${theme.palette.neutralDarker}\n `\n : css`\n color: ${isOnStock ? theme.palette.basic : theme.palette.neutral};\n font-weight: ${isSelected ? 'bold' : 'normal'};\n font-size: 0.9rem;\n `}\n`;\n\nexport const Unavailable = styled.p`\n ${theme.typography.labelSmall400}\n color:${theme.palette.neutralDark}\n`;\n","import { snakeCase } from 'lodash';\n\nimport { ProductTileModel } from '@notino/react-styleguide';\n\nimport { dispatchTrackingEvent } from '@context/tracking/utils';\n\nconst tagAttributeToNameMap: Record = {\n Action: 'V akci/růžový štítek s procenty',\n FreeDelivery: 'Doprava zdarma/náklaďák',\n Clearance: 'Výprodej/černý štítek s procentem',\n New: 'Novinka/hvězdička',\n Damaged: null, // not tracked\n Returned: null, // not tracked\n};\n\nexport const trackTagClick = (\n attr: ProductTileModel.TagAttributes,\n timing: number\n) => {\n const name = tagAttributeToNameMap[attr];\n if (!name) {\n return;\n }\n\n dispatchTrackingEvent({\n event: 'element_click',\n _clear: true,\n element: {\n action: 'click_on_element',\n name,\n type: 'variant_tile_label',\n promo_labels: snakeCase(attr),\n interaction: 'click',\n timing,\n },\n });\n};\n","import * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { TagModel } from '@notino/react-styleguide';\n\nimport ErrorBoundary from '@components/ErrorBoundary';\nimport PriceLabel from '@components/PriceLabel';\nimport { Tags } from '@components/Tags';\nimport { getRenderableAttributes } from '@components/Tags/utils';\nimport { useIsDualPriceForCroatia } from '@containers/ProductDetailContainer/ProductDetail/hooks/useIsDualPriceForCroatia';\nimport { useNewPdDesignEnabled } from '@containers/ProductDetailContainer/ProductDetail/hooks/useNewPdDesignEnabled';\nimport { IStock, VariantDisplayTypes } from '@containers/ProductListing/model';\nimport { useTrackingContext } from '@context/tracking/TrackingContext';\nimport { dataLabelsProp } from '@helpers/utils';\n\nimport { IVariantProps } from '../../../../model';\nimport { trackVariantClick } from '../../tracking';\nimport {\n VariantListItem,\n VariantLink,\n PriceLabelCurrency,\n Name,\n} from '../../variantsStyled';\n\nimport { messages } from './messages';\nimport { Variant, PriceLabelWrapper, Unavailable } from './styled';\nimport { trackTagClick } from './tracking';\n\nexport const VariantTile: React.FC = ({\n item,\n isSelected,\n unit,\n}) => {\n const { getTimeFromInit } = useTrackingContext();\n const { isDualPriceForCroatia } = useIsDualPriceForCroatia();\n const newDesign = useNewPdDesignEnabled();\n const isOnStock = item.stockAvailability.code !== IStock.outOfStock;\n\n const handleClick = () => {\n const attributes = Object.keys(getRenderableAttributes(item.attributes));\n trackVariantClick(\n getTimeFromInit(),\n VariantDisplayTypes.Tiles,\n isOnStock ? attributes?.[0] : undefined\n );\n };\n\n return (\n \n \n \n \n trackTagClick(attr, getTimeFromInit())}\n type={TagModel.Types.corner}\n small={newDesign}\n attributes={item.attributes}\n stockAvailability={item.stockAvailability.code}\n />\n\n