{"version":3,"sources":["Shared/Breadcrumb/Breadcrumb.tsx","Shared/Icons/CheckIcon.tsx","Shared/ContentContainer/ContentContainer.tsx","ProductPage/AttributeArea.tsx","ProductPage/ProductImagesContainer.tsx","ProductPage/ProductPage.tsx","Shared/Icons/ArrowLeftIconPrimary.tsx"],"names":["BreadcrumbContainer","styled","div","position","top","theme","desktopHeaderHeight","fontSize","beta","left","right","margin","x","maxWidth","screenMaxWidth","width","paddingTop","alignItems","display","paddingLeft","lineHeight","letterSpacing","SelectedSpan","span","fontWeight","bold","LinkText","textDecoration","BreadcrumbLink","KexLink","opacity","color","breadText","Seperator","normal","Breadcrumb","breadcrumb","useMedia","mediaQuery","mediaMinLarge","map","link","index","length","key","text","href","compose","Svg","xmlns","viewBox","css","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","ContentContainer","children","style","rest","Container","contentMaxWidth","padding","y","none","StyledLoadingCircle","LoadingCircle","white","height","gamma","xy","bottom","ButtonText","transition","property","duration","timingFunction","pseudo","visibility","Heading","h1","spacing","font","size","psi","weight","tight","wider","black","media","zeta","BrandAndCategory","p","middleGray","textTransform","marginTop","StockStatus","marginBottom","StyledCheckIcon","CheckIcon","marginLeft","ItemAddedText","justifyContent","StockStatusCircle","borderRadius","backgroundColor","notInStockRed","marginRight","inStockGreen","StockStatusText","alpha","InformationListItem","ListItemTitle","headerMainLink","ListItem","StyledDivider","Divider","grayLine","delta","mediaMaxMedium","PriceContainer","theta","MainPriceContainer","QuantityPriceWrapper","Price","nearGreat","PerPackageText","QuantityText","QuantityTextBold","AddToCart","QuantitySelector","MinusButton","button","cursor","QuantityInput","input","textAlign","MozAppearance","WebkitAppearance","StyledPlusIcon","PlusToggleIcon","StyledMinusIcon","MinusToggleIcon","AddToCartButton","CtaButton","moreLarge","ProductAttrListWrapper","whiteSpace","AttrContainerWrapper","mediaMinSmall","AttributeArea","variation","totalPrice","eanCode","articleNumber","price","inStock","quantity","unitPrice","code","recommendedPrice","productPage","bookingNumber","planogramInputQuantity","useState","inputQuantity","setInputQuantity","isLoading","setIsLoading","itemAdded","setItemAdded","useAppSettingsData","translations","addToCartLabel","articleNumberLabel","eanCodeLabel","productSizeLabel","inStockLabel","notInStockLabel","addedToCartLabel","quantityLabel","perPackageLabel","unitPriceLabel","pieceLabel","recommendedPriceLabel","currencyLabel","languageRoute","mainCategory","displayName","data-instock","disabled","onClick","type","min","max","value","onChange","e","target","Number","onBlur","numb","UpdateCart","setTimeout","data-isloading","MainImageDiv","paddingBottom","filter","shadows","productImageShadow","MainImage","img","maxHeight","productImageMaxHeight","objectFit","mediaMinMedium","ProductImagesContainer","flexDirection","thumbnailImageHeight","timings","threeTenths","image","toggleModal","mediaMaxSmall","src","alt","BackLinkWrapper","ArrowLeftIcon","ArrowLeftIconPrimary","linkColor","BackLink","Section","section","primaryBackground","large","great","Top","gridTemplateColumns","gridGap","mediaMinHuge","massive","ProductImage","gridColumn","start","end","ModalProductImage","ProductPage","productPageData","useCurrentPage","backToPlanogramLabel","productPlaceholderImg","placeholderImages","productPlaceholder","variationCollection","sliderImages","planogramUrl","transform"],"mappings":"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","file":"Dist/build-client/static/js/ProductPage-ProductPage.4d0a84c9.chunk.js","sourcesContent":["import React from 'react';\r\nimport KexLink from '../../Shared/KexLink/KexLink';\r\nimport { styled, theme } from '../../../Features/Theme';\r\nimport Link from '../../Shared/Models/Link.interface';\r\nimport useMedia from '../Hooks/useMedia';\r\n\r\ntype PropTypes = {\r\n  breadcrumb: Link[];\r\n};\r\n\r\nfunction Breadcrumb({ breadcrumb }: PropTypes) {\r\n  const isDesktop = useMedia(theme.mediaQuery.mediaMinLarge);\r\n  return isDesktop ? (\r\n    <BreadcrumbContainer>\r\n      {breadcrumb.map((link, index) =>\r\n        breadcrumb.length === index + 1 ? (\r\n          <div key={index}>\r\n            <SelectedSpan>{link.text}</SelectedSpan>\r\n          </div>\r\n        ) : (\r\n          <BreadcrumbLink key={index} href={link.href}>\r\n            <LinkText>{link.text}</LinkText>\r\n            <Seperator> / </Seperator>\r\n          </BreadcrumbLink>\r\n        )\r\n      )}\r\n    </BreadcrumbContainer>\r\n  ) : (\r\n    <></>\r\n  );\r\n}\r\n\r\nconst BreadcrumbContainer = styled.div({\r\n  position: 'absolute',\r\n  top: theme.desktopHeaderHeight,\r\n  fontSize: theme.beta,\r\n  left: 0,\r\n  right: 0,\r\n  margin: { x: 'auto' },\r\n  maxWidth: theme.screenMaxWidth,\r\n  width: '100%',\r\n  paddingTop: '18px',\r\n  alignItems: 'center',\r\n  display: 'flex',\r\n  paddingLeft: '32px',\r\n  lineHeight: 1.33,\r\n  letterSpacing: 0.45,\r\n});\r\n\r\nconst SelectedSpan = styled.span({\r\n  fontWeight: theme.fontWeight.bold,\r\n  lineHeight: 1.33,\r\n});\r\n\r\nconst LinkText = styled.span({\r\n  textDecoration: 'underline',\r\n});\r\n\r\nconst BreadcrumbLink = styled(KexLink, {\r\n  display: 'flex',\r\n  opacity: 0.9,\r\n  color: theme.breadText,\r\n});\r\n\r\nconst Seperator = styled.span({\r\n  margin: { x: '6px' },\r\n  fontWeight: theme.fontWeight.normal,\r\n  textDecoration: 'none',\r\n});\r\n\r\nexport default Breadcrumb;\r\n","import React from 'react';\r\nimport { styled, StyledProps } from '@glitz/react';\r\n\r\nfunction CartIcon({ compose }: StyledProps) {\r\n  return (\r\n    <styled.Svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 16 16\"\r\n      css={compose()}\r\n      fill=\"none\"\r\n    >\r\n      <path\r\n        d=\"M13.3334 4L6.00008 11.3333L2.66675 8\"\r\n        stroke=\"#FFF\"\r\n        strokeWidth=\"1.25\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n      />\r\n    </styled.Svg>\r\n  );\r\n}\r\n\r\nexport default styled(CartIcon);\r\n","import React from 'react';\r\nimport { styled, theme } from '../../Theme';\r\nimport { StyleOrStyleArray } from '@glitz/type';\r\n\r\ntype PropType = {\r\n  children: React.ReactNode;\r\n  style?: StyleOrStyleArray;\r\n};\r\n\r\nfunction ContentContainer({ children, style, ...rest }: PropType) {\r\n  return (\r\n    <Container css={style} {...rest}>\r\n      {children}\r\n    </Container>\r\n  );\r\n}\r\n\r\nexport default ContentContainer;\r\n\r\nconst Container = styled.div({\r\n  width: '100%',\r\n  maxWidth: theme.contentMaxWidth,\r\n  margin: {\r\n    x: 'auto',\r\n  },\r\n  padding: {\r\n    y: theme.none,\r\n  },\r\n});\r\n","import React, { useState } from 'react';\r\n\r\nimport { styled, theme } from '../Theme';\r\nimport { UpdateCart } from '../Cart/Cart';\r\nimport IProductPage from './Models/ProductPageModel.interface';\r\nimport { useAppSettingsData } from '../Shared/AppSettingsProvider/AppSettingsProvider';\r\nimport { media, pseudo } from '@glitz/core';\r\nimport { LoadingCircle } from '../Shared/Icons';\r\nimport CtaButton from '../Shared/CtaButton/CtaButton';\r\nimport PlusToggleIcon from '../Shared/Icons/PlusToggleIcon';\r\nimport MinusToggleIcon from '../Shared/Icons/MinusToggleIcon';\r\nimport Divider from '../Shared/Divider/Divider';\r\nimport { mediaQuery } from '../Theme/mediaQueries';\r\nimport VariationModel from '../KexVariation/Models/VariationModel.interface';\r\nimport CheckIcon from '../Shared/Icons/CheckIcon';\r\n\r\ntype AttributeArea = {\r\n  productPage: IProductPage;\r\n  variation: VariationModel;\r\n  bookingNumber: string;\r\n  planogramInputQuantity: number;\r\n};\r\n\r\nfunction AttributeArea({\r\n  variation: {\r\n    totalPrice,\r\n    eanCode,\r\n    size,\r\n    price,\r\n    articleNumber,\r\n    inStock,\r\n    quantity,\r\n    unitPrice,\r\n    code,\r\n    recommendedPrice,\r\n  },\r\n  productPage,\r\n  bookingNumber,\r\n  planogramInputQuantity,\r\n}: AttributeArea) {\r\n  const [inputQuantity, setInputQuantity] = useState<number>(\r\n    planogramInputQuantity\r\n  );\r\n  const [isLoading, setIsLoading] = useState<boolean>(false);\r\n  const [itemAdded, setItemAdded] = useState(false);\r\n\r\n  const {\r\n    translations: {\r\n      'productPage/addToCart': addToCartLabel,\r\n      'productPage/articleNumber': articleNumberLabel,\r\n      'productPage/eanCode': eanCodeLabel,\r\n      'productPage/size': productSizeLabel,\r\n      'productPage/inStock': inStockLabel,\r\n      'productPage/notInStock': notInStockLabel,\r\n      'productPage/addedToCart': addedToCartLabel,\r\n      'common/quantity': quantityLabel,\r\n      'common/perPackage': perPackageLabel,\r\n      'common/unitPrice': unitPriceLabel,\r\n      'common/piece': pieceLabel,\r\n      'productPage/recommendedPrice': recommendedPriceLabel,\r\n      'common/currency': currencyLabel,\r\n    },\r\n    languageRoute,\r\n  } = useAppSettingsData();\r\n\r\n  const onInputChange = (value: string) => {\r\n    if (Number(value) < 0) {\r\n      setInputQuantity(1);\r\n      return;\r\n    }\r\n    setInputQuantity(Number(value));\r\n  };\r\n\r\n  const onInputBlur = (numb: string) => {\r\n    Number(numb) < 1 && setInputQuantity(1);\r\n  };\r\n\r\n  const addToCart = () => {\r\n    const updated = UpdateCart(\r\n      code,\r\n      inputQuantity,\r\n      languageRoute,\r\n      bookingNumber ? bookingNumber : '',\r\n      setIsLoading\r\n    );\r\n    if (updated) {\r\n      setItemAdded(true);\r\n      setTimeout(() => {\r\n        setItemAdded(false);\r\n      }, 2000);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <AttrContainerWrapper>\r\n      <BrandAndCategory>{productPage.mainCategory}</BrandAndCategory>\r\n      <Heading>{productPage.displayName}</Heading>\r\n      <StockStatus>\r\n        {inStock ? (\r\n          <>\r\n            <StockStatusCircle data-instock={inStock} />\r\n            <StockStatusText>{inStockLabel}</StockStatusText>\r\n          </>\r\n        ) : (\r\n          <>\r\n            <StockStatusCircle />\r\n            <StockStatusText>{notInStockLabel}</StockStatusText>\r\n          </>\r\n        )}\r\n      </StockStatus>\r\n      <div>\r\n        <StyledDivider />\r\n        {articleNumber && (\r\n          <>\r\n            <InformationListItem>\r\n              <ListItemTitle>{articleNumberLabel}</ListItemTitle>{' '}\r\n              <ListItem>{articleNumber}</ListItem>\r\n            </InformationListItem>\r\n            <StyledDivider />\r\n          </>\r\n        )}\r\n        {eanCode && (\r\n          <>\r\n            <InformationListItem>\r\n              <ListItemTitle>{eanCodeLabel}</ListItemTitle>{' '}\r\n              <ListItem>{eanCode}</ListItem>\r\n            </InformationListItem>\r\n            <StyledDivider />\r\n          </>\r\n        )}\r\n        {size && (\r\n          <>\r\n            <InformationListItem>\r\n              <ListItemTitle>{productSizeLabel}</ListItemTitle>{' '}\r\n              <ListItem>{size}</ListItem>\r\n            </InformationListItem>\r\n            <StyledDivider />\r\n          </>\r\n        )}\r\n        {recommendedPrice && (\r\n          <>\r\n            <InformationListItem>\r\n              <ListItemTitle>{recommendedPriceLabel}</ListItemTitle>{' '}\r\n              <ListItem>{recommendedPrice}</ListItem>\r\n            </InformationListItem>\r\n            <StyledDivider />\r\n          </>\r\n        )}\r\n      </div>\r\n      {inStock && (\r\n        <>\r\n          <PriceContainer>\r\n            <MainPriceContainer>\r\n              <Price>{totalPrice}</Price>\r\n              <PerPackageText>/{perPackageLabel}</PerPackageText>\r\n            </MainPriceContainer>\r\n            <div>\r\n              <QuantityPriceWrapper>\r\n                <QuantityTextBold>\r\n                  {quantityLabel}/{perPackageLabel}:&nbsp;\r\n                </QuantityTextBold>\r\n                <QuantityText>\r\n                  {quantity}\r\n                  {pieceLabel}\r\n                </QuantityText>\r\n              </QuantityPriceWrapper>\r\n              <QuantityPriceWrapper>\r\n                <QuantityTextBold>{unitPriceLabel}:&nbsp;</QuantityTextBold>\r\n                <QuantityText>\r\n                  {unitPrice}\r\n                  {currencyLabel}\r\n                </QuantityText>\r\n              </QuantityPriceWrapper>\r\n            </div>\r\n          </PriceContainer>\r\n          <div>\r\n            <AddToCart>\r\n              <QuantitySelector>\r\n                <MinusButton\r\n                  disabled={inputQuantity === 1}\r\n                  onClick={() => setInputQuantity(inputQuantity - 1)}\r\n                >\r\n                  <StyledMinusIcon />\r\n                </MinusButton>\r\n                <QuantityInput\r\n                  type={'number'}\r\n                  min={'1'}\r\n                  max={'99'}\r\n                  value={inputQuantity}\r\n                  onChange={e => onInputChange(e.target.value)}\r\n                  onBlur={e => onInputBlur(e.target.value)}\r\n                />\r\n                <button onClick={() => setInputQuantity(inputQuantity + 1)}>\r\n                  <StyledPlusIcon />\r\n                </button>\r\n              </QuantitySelector>\r\n              <AddToCartButton onClick={() => addToCart()}>\r\n                <ButtonText data-isloading={isLoading || itemAdded}>\r\n                  {addToCartLabel}\r\n                </ButtonText>\r\n                {isLoading && <StyledLoadingCircle isLoading={isLoading} />}\r\n                {itemAdded && !isLoading && (\r\n                  <ItemAddedText>\r\n                    {addedToCartLabel}\r\n                    <StyledCheckIcon />\r\n                  </ItemAddedText>\r\n                )}\r\n              </AddToCartButton>\r\n            </AddToCart>\r\n          </div>\r\n        </>\r\n      )}\r\n      <ProductAttrListWrapper></ProductAttrListWrapper>\r\n    </AttrContainerWrapper>\r\n  );\r\n}\r\n\r\nconst StyledLoadingCircle = styled(LoadingCircle, {\r\n  color: theme.white,\r\n  height: theme.gamma,\r\n  margin: { xy: 'auto' },\r\n  position: 'absolute',\r\n  top: 0,\r\n  left: 0,\r\n  right: 0,\r\n  bottom: 0,\r\n});\r\n\r\nconst ButtonText = styled.span({\r\n  transition: {\r\n    property: 'all',\r\n    duration: '0.2s',\r\n    timingFunction: 'linear',\r\n  },\r\n  ...pseudo([':nth-child(n)[data-isloading=\"true\"]'], {\r\n    visibility: 'hidden',\r\n    opacity: 0,\r\n  }),\r\n});\r\n\r\nconst Heading = styled.h1({\r\n  padding: {\r\n    bottom: theme.spacing(5),\r\n  },\r\n  font: {\r\n    size: theme.psi,\r\n    weight: theme.fontWeight.bold,\r\n  },\r\n  lineHeight: theme.lineHeight.tight,\r\n  letterSpacing: theme.letterSpacing.wider,\r\n  color: theme.black,\r\n  ...media(theme.mediaQuery.mediaMinLarge, {\r\n    font: {\r\n      size: '32px',\r\n    },\r\n    padding: { bottom: theme.zeta },\r\n  }),\r\n});\r\n\r\nconst BrandAndCategory = styled.p({\r\n  margin: { top: theme.spacing(6), bottom: theme.spacing(2) },\r\n  color: theme.middleGray,\r\n  textTransform: 'uppercase',\r\n  font: {\r\n    size: theme.beta,\r\n    weight: theme.fontWeight.normal,\r\n  },\r\n  ...media(mediaQuery.mediaMinLarge, {\r\n    marginTop: theme.spacing(8),\r\n    fontSize: theme.gamma,\r\n  }),\r\n});\r\n\r\nconst StockStatus = styled.div({\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  margin: { bottom: theme.spacing(8) },\r\n  ...media(mediaQuery.mediaMinLarge, {\r\n    marginBottom: theme.spacing(6),\r\n  }),\r\n});\r\n\r\nconst StyledCheckIcon = styled(CheckIcon, {\r\n  height: '18px',\r\n  width: '18px',\r\n  marginLeft: '8px',\r\n});\r\n\r\nconst ItemAddedText = styled.div({\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  justifyContent: 'center',\r\n  color: theme.white,\r\n  height: theme.gamma,\r\n  margin: { xy: 'auto' },\r\n  position: 'absolute',\r\n  top: 0,\r\n  left: 0,\r\n  right: 0,\r\n  bottom: 0,\r\n});\r\n\r\nconst StockStatusCircle = styled.div({\r\n  borderRadius: '50%',\r\n  width: '8px',\r\n  height: '8px',\r\n  backgroundColor: theme.notInStockRed,\r\n  marginRight: theme.spacing(2),\r\n  ...pseudo([':nth-child(n)[data-instock=\"true\"]'], {\r\n    backgroundColor: theme.inStockGreen,\r\n  }),\r\n});\r\n\r\nconst StockStatusText = styled.span({\r\n  color: theme.black,\r\n  font: { size: theme.alpha, weight: theme.fontWeight.bold },\r\n  textTransform: 'uppercase',\r\n});\r\n\r\nconst InformationListItem = styled.div({\r\n  display: 'flex',\r\n  justifyContent: 'space-between',\r\n  alignItems: 'center',\r\n  padding: { x: theme.spacing(4) },\r\n});\r\n\r\nconst ListItemTitle = styled.span({\r\n  color: theme.middleGray,\r\n  fontSize: theme.headerMainLink,\r\n  textTransform: 'uppercase',\r\n});\r\n\r\nconst ListItem = styled.span({\r\n  fontSize: theme.beta,\r\n  color: theme.black,\r\n});\r\n\r\nconst StyledDivider = styled(Divider, {\r\n  width: '100%',\r\n  backgroundColor: theme.grayLine,\r\n  margin: { y: theme.delta },\r\n  ...media(theme.mediaQuery.mediaMaxMedium, {\r\n    margin: { y: theme.delta },\r\n  }),\r\n});\r\n\r\nconst PriceContainer = styled.div({\r\n  display: 'flex',\r\n  justifyContent: 'space-between',\r\n  margin: {\r\n    top: theme.theta,\r\n    bottom: theme.psi,\r\n  },\r\n});\r\n\r\nconst MainPriceContainer = styled.div({\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n});\r\n\r\nconst QuantityPriceWrapper = styled.div({\r\n  fontSize: '15px',\r\n  display: 'flex',\r\n  justifyContent: 'end',\r\n  ...pseudo(':not(:last-child)', { marginBottom: theme.spacing(3) }),\r\n});\r\n\r\nconst Price = styled.span({\r\n  font: {\r\n    size: theme.nearGreat,\r\n    weight: theme.fontWeight.bold,\r\n  },\r\n  marginTop: theme.spacing(2),\r\n  lineHeight: theme.lineHeight.tight,\r\n  letterSpacing: theme.letterSpacing.wider,\r\n  color: theme.black,\r\n});\r\n\r\nconst PerPackageText = styled.p({\r\n  marginTop: theme.spacing(4),\r\n  fontSize: '17px',\r\n  marginLeft: '6px',\r\n});\r\n\r\nconst QuantityText = styled.span({ color: theme.middleGray });\r\n\r\nconst QuantityTextBold = styled.span({\r\n  fontWeight: theme.fontWeight.bold,\r\n  color: theme.black,\r\n});\r\n\r\nconst AddToCart = styled.div({\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  justifyContent: 'space-between',\r\n});\r\n\r\nconst QuantitySelector = styled.div({\r\n  backgroundColor: theme.white,\r\n  borderRadius: '100px',\r\n  display: 'flex',\r\n  justifyContent: 'space-between',\r\n  width: '35%',\r\n  alignItems: 'center',\r\n  padding: { x: theme.spacing(5), y: '14px' },\r\n  ...media(mediaQuery.mediaMinLarge, {\r\n    padding: { y: '18px' },\r\n  }),\r\n});\r\n\r\nconst MinusButton = styled.button({\r\n  ':disabled': {\r\n    cursor: 'default',\r\n    opacity: 0.6,\r\n  },\r\n});\r\n\r\nconst QuantityInput = styled.input({\r\n  width: theme.spacing(7),\r\n  backgroundColor: theme.white,\r\n  textAlign: 'center',\r\n  MozAppearance: 'textfield', // hide number arrows Firefox\r\n  ...pseudo(['::-webkit-outer-spin-button', '::-webkit-inner-spin-button'], {\r\n    WebkitAppearance: 'none', // hide number arrows Chrome, Safari, Edge, Opera\r\n    margin: { xy: 0 },\r\n  }),\r\n});\r\n\r\nconst StyledPlusIcon = styled(PlusToggleIcon, {\r\n  height: '20px',\r\n  width: '20px',\r\n  fill: theme.black,\r\n});\r\n\r\nconst StyledMinusIcon = styled(MinusToggleIcon, {\r\n  height: '20px',\r\n  width: '20px',\r\n  fill: theme.black,\r\n});\r\n\r\nconst AddToCartButton = styled(CtaButton, {\r\n  position: 'relative',\r\n  width: '65%',\r\n  fontSize: theme.moreLarge,\r\n  textAlign: 'center',\r\n  lineHeight: '1.3em',\r\n  padding: { x: theme.spacing(5), y: '15px' },\r\n  marginLeft: theme.spacing(5),\r\n  ...media(theme.mediaQuery.mediaMinLarge, {\r\n    padding: { y: theme.spacing(5) },\r\n  }),\r\n});\r\n\r\nconst ProductAttrListWrapper = styled.div({\r\n  whiteSpace: 'pre-line',\r\n  textAlign: 'center',\r\n});\r\n\r\nconst AttrContainerWrapper = styled.div({\r\n  width: '100%',\r\n  ...media(theme.mediaQuery.mediaMinSmall, {\r\n    padding: { x: theme.none },\r\n  }),\r\n});\r\n\r\nexport default AttributeArea;\r\n","import React, { useState } from 'react';\r\nimport { styled, theme } from '../Theme';\r\nimport ImageModel from '../Assets/Models/ImageModel.interface';\r\nimport useMedia from '../Shared/Hooks/useMedia';\r\nimport { useAppSettingsData } from '../Shared/AppSettingsProvider/AppSettingsProvider';\r\nimport { pseudo, media } from '@glitz/core';\r\nimport Modal from '../Shared/Modal/Modal';\r\nimport ModalImage from '../Shared/Modal/Content/Image';\r\nimport { StyleOrStyleArray } from '@glitz/type';\r\n\r\ntype ProductImages = {\r\n  image: ImageModel;\r\n};\r\n\r\nfunction ProductImagesContainer({ image }: ProductImages) {\r\n  const [showModal, toggleModal] = useState(false);\r\n\r\n  const {\r\n    translations: { 'productPage/close': closeLabel },\r\n  } = useAppSettingsData();\r\n\r\n  const isSmall = useMedia(theme.mediaQuery.mediaMaxSmall);\r\n\r\n  return (\r\n    <MainImageDiv>\r\n      {/* {!isSmall && images.length > 1 && (\r\n        <ThumbnailContainer>\r\n          {images.map((image, index) => (\r\n            <Thumbnail key={index} onClick={() => setMainImage(image)}>\r\n              <ThumbnailImage\r\n                src={image.src}\r\n                css={mainImage === image ? Selected : {}}\r\n              />\r\n            </Thumbnail>\r\n          ))}\r\n        </ThumbnailContainer>\r\n      )}\r\n      {showModal && (\r\n        <Modal\r\n          overlay={true}\r\n          toggle={() => toggleModal(false)}\r\n          closeLable={closeLabel}\r\n        >\r\n          <ModalImage image={mainImage} />\r\n        </Modal>\r\n      )} */}\r\n      <MainImage\r\n        src={image.src}\r\n        alt={image.alt}\r\n        onClick={() => toggleModal(true)}\r\n      />\r\n    </MainImageDiv>\r\n  );\r\n}\r\n\r\nconst Selected: StyleOrStyleArray = {\r\n  border: {\r\n    xy: {\r\n      color: theme.black,\r\n    },\r\n  },\r\n};\r\n\r\nconst MainImageDiv = styled.div({\r\n  position: 'relative',\r\n  display: 'flex',\r\n  padding: {\r\n    xy: theme.gamma,\r\n  },\r\n  paddingBottom: 0,\r\n  filter: theme.shadows.productImageShadow,\r\n  margin: { x: `-${theme.gamma}` },\r\n  ...media(theme.mediaQuery.mediaMinLarge, {\r\n    margin: { x: theme.none },\r\n  }),\r\n});\r\n\r\nconst MainImage = styled.img({\r\n  width: '100%',\r\n  maxHeight: theme.productImageMaxHeight,\r\n  objectFit: 'contain',\r\n  ...pseudo(':hover', {\r\n    cursor: 'pointer',\r\n  }),\r\n  ...media(theme.mediaQuery.mediaMinMedium, {\r\n    maxHeight: theme.productImageMaxHeight,\r\n  }),\r\n});\r\n\r\nconst ThumbnailContainer = styled.div({\r\n  height: 'auto',\r\n  width: 'auto',\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  marginLeft: '13px',\r\n});\r\n\r\nconst ThumbnailImage = styled.img({\r\n  maxHeight: theme.thumbnailImageHeight,\r\n  width: 'auto',\r\n  transition: {\r\n    property: 'all',\r\n    duration: theme.timings.threeTenths,\r\n    timingFunction: 'linear',\r\n  },\r\n  ':hover': {\r\n    opacity: 0.6,\r\n  },\r\n});\r\n\r\nconst Thumbnail = styled.button({\r\n  backgroundColor: 'transparent',\r\n  height: theme.thumbnailImageHeight,\r\n  width: 'auto',\r\n  maxWidth: theme.thumbnailImageHeight,\r\n});\r\n\r\nexport default ProductImagesContainer;\r\n","import React from 'react';\r\nimport IProductPage from './Models/ProductPageModel.interface';\r\nimport useCurrentPage from '../Shared/Hooks/useCurrentPage';\r\nimport { styled, theme } from '../Theme';\r\nimport ContentContainer from '../Shared/ContentContainer/ContentContainer';\r\nimport AttributeArea from '../ProductPage/AttributeArea';\r\nimport ProductImagesContainer from './ProductImagesContainer';\r\nimport { media } from '@glitz/core';\r\nimport Breadcrumb from '../Shared/Breadcrumb/Breadcrumb';\r\nimport KexLink from '../Shared/KexLink/KexLink';\r\nimport ArrowLeftIconPrimary from '../Shared/Icons/ArrowLeftIconPrimary';\r\nimport { useAppSettingsData } from '../Shared/AppSettingsProvider/AppSettingsProvider';\r\n\r\nfunction ProductPage() {\r\n  const productPageData = useCurrentPage<IProductPage>();\r\n  const {\r\n    translations: { 'productPage/backToPlanogram': backToPlanogramLabel },\r\n    placeholderImages: { productPlaceholder: productPlaceholderImg },\r\n  } = useAppSettingsData();\r\n  const variation = productPageData.variationCollection[0];\r\n  const {\r\n    sliderImages,\r\n    code,\r\n    breadcrumb,\r\n    planogramUrl,\r\n    bookingNumber,\r\n    inputQuantity,\r\n  } = productPageData;\r\n\r\n  return (\r\n    <main>\r\n      {!planogramUrl ? (\r\n        !!breadcrumb.length && <Breadcrumb breadcrumb={breadcrumb} />\r\n      ) : (\r\n        <BackLinkWrapper>\r\n          <ArrowLeftIcon />\r\n          <BackLink href={planogramUrl}>{backToPlanogramLabel}</BackLink>\r\n        </BackLinkWrapper>\r\n      )}\r\n      <Section>\r\n        <ContentContainer>\r\n          <Top>\r\n            {sliderImages && !!sliderImages.length ? (\r\n              <ProductImage>\r\n                <ProductImagesContainer key={code} image={sliderImages[0]} />\r\n              </ProductImage>\r\n            ) : (\r\n              <ModalProductImage\r\n                src={productPlaceholderImg?.src}\r\n              ></ModalProductImage>\r\n            )}\r\n            <AttributeArea\r\n              key={code}\r\n              productPage={productPageData}\r\n              variation={variation}\r\n              bookingNumber={bookingNumber}\r\n              planogramInputQuantity={inputQuantity}\r\n            />\r\n          </Top>\r\n        </ContentContainer>\r\n      </Section>\r\n    </main>\r\n  );\r\n}\r\n\r\nconst BackLinkWrapper = styled.div({\r\n  position: 'absolute',\r\n  top: theme.desktopHeaderHeight,\r\n  left: 0,\r\n  right: 0,\r\n  margin: { x: 'auto' },\r\n  maxWidth: theme.screenMaxWidth,\r\n  width: '100%',\r\n  paddingTop: '18px',\r\n  alignItems: 'center',\r\n  display: 'flex',\r\n  paddingLeft: '32px',\r\n  lineHeight: 1.33,\r\n  letterSpacing: 0.45,\r\n});\r\n\r\nconst ArrowLeftIcon = styled(ArrowLeftIconPrimary, {\r\n  fill: theme.linkColor,\r\n  marginRight: theme.spacing(4),\r\n});\r\n\r\nconst BackLink = styled(KexLink, {\r\n  fontSize: theme.gamma,\r\n  color: theme.linkColor,\r\n  cursor: 'pointer',\r\n  textDecoration: 'underline',\r\n});\r\n\r\nconst Section = styled.section({\r\n  backgroundColor: theme.primaryBackground,\r\n  position: 'relative',\r\n  maxWidth: '100%',\r\n  margin: { top: theme.spacing(16), bottom: theme.spacing(16) },\r\n  padding: { x: theme.large },\r\n  ...media(theme.mediaQuery.mediaMinSmall, {\r\n    padding: { x: theme.great },\r\n  }),\r\n  ...media(theme.mediaQuery.mediaMinLarge, {\r\n    margin: { top: theme.spacing(13), bottom: theme.spacing(32) },\r\n  }),\r\n});\r\n\r\nconst Top = styled.div({\r\n  display: 'grid',\r\n  gridTemplateColumns: '1fr',\r\n  gridGap: theme.none,\r\n  width: '100%',\r\n  ...media(theme.mediaQuery.mediaMinHuge, {\r\n    gridTemplateColumns: '1fr 1fr',\r\n  }),\r\n  ...media(theme.mediaQuery.mediaMinLarge, {\r\n    gridTemplateColumns: '1fr 1fr',\r\n    gridGap: theme.massive,\r\n  }),\r\n});\r\n\r\nconst ProductImage = styled.div({\r\n  maxWidth: '100%',\r\n  ...media(theme.mediaQuery.mediaMinMedium, {\r\n    gridColumn: {\r\n      start: 1,\r\n      end: 3,\r\n    },\r\n  }),\r\n  ...media(theme.mediaQuery.mediaMinLarge, {\r\n    gridColumn: {\r\n      start: 1,\r\n      end: 1,\r\n    },\r\n  }),\r\n});\r\n\r\nconst ModalProductImage = styled.img({\r\n  height: '100%',\r\n  width: '100%',\r\n  objectFit: 'contain',\r\n});\r\n\r\nexport default ProductPage;\r\n","import React from 'react';\r\nimport { styled, StyledProps } from '@glitz/react';\r\nimport { theme } from '../../Theme';\r\n\r\nfunction ArrowLeftIconPrimary({ compose }: StyledProps) {\r\n  return (\r\n    <styled.Svg\r\n      width=\"14\"\r\n      height=\"14\"\r\n      css={compose()}\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 16 16\"\r\n    >\r\n      <path\r\n        d=\"M7.841 6.134c.18.168.208.437.08.636l-.055.071L1.65 13.5H15.5c.276 0 .5.224.5.5s-.224.5-.5.5H1.652l6.214 6.659c.167.18.177.45.035.64l-.06.067c-.18.167-.45.177-.64.035l-.067-.06-7-7.5c-.156-.168-.176-.417-.058-.606l.058-.076 7-7.5c.189-.202.505-.213.707-.025z\"\r\n        transform=\"translate(-512 -118) translate(512 112)\"\r\n      />\r\n    </styled.Svg>\r\n  );\r\n}\r\n\r\nexport default styled(ArrowLeftIconPrimary);\r\n"],"sourceRoot":""}