{"version":3,"sources":["webpack:///./Scripts/Components/ProductsViewListItem.js","webpack:///./Scripts/Components/ProductsViewList.js","webpack:///./Scripts/Components/ProductsViewTable.js","webpack:///./Scripts/Components/ProductsView.js","webpack:///./Scripts/Components/ProductsViewGalleryItem.js","webpack:///./Scripts/Components/ProductsViewGallery.js"],"names":["props","product","className","brandLogoUrl","hideBrandInfoInListings","src","alt","brand","loading","images","baseProductName","threePeakMountainSF","title","translate","nordicFriction","msMark","tags","map","tag","key","text","id","style","backgroundColor","color","CopyButton","showSimplifiedName","href","url","name","itemProp","season","fuelClass","size","wetGrip","db","noiseWavesNW","ProductInStockTag","productPriceModel","ProductPriceModel","BuyButton","quantity","articleNumber","quantityFieldId","label","showBuyButton","userIsAuthenticated","disabled","products","hasRearProducts","Product","useCallback","wheelDimension","formattedDimensionLabel","rearProductItem","Separator","columns","height","Array","_","i","Math","random","ProductTableRow","showQuantityInputButtons","totalHits","p","Fragment","LIST_TYPE_TABLE","LIST_TYPE_LIST","LIST_TYPE_GALLERY","ProductsView","isLoading","productsWrapper","listType","useSelector","state","productsView","pagination","LoadingDots","totalCount","ProductsViewGallery","renderForServer","itemScope","itemType","content","description","cardClassName","hasRear","length"],"mappings":"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","file":"9121.7de39b22fb02c7d7611e.js","sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport CopyButton from './CopyButton';\nimport { Tooltip } from '@material-ui/core';\nimport { translate } from '../Services/translation';\nimport { CloudRain, GasPump, Package, SpeakerHigh } from 'phosphor-react';\nimport BuyButton from './BuyButton';\nimport colors from 'Exports/colors.scss';\nimport ConsumerPriceModel from './ConsumerPriceModel';\nimport ProductPriceModel from './ProductPriceModel';\nimport { showLogin } from '../Actions/Login.action';\nimport ProductInStockTag from './ProductInStockTag';\n\nconst ProductsViewListItem = (props) => {\n  const { product } = props;\n\n  return (\n    <div className=\"product-list-card\">\n      <div className=\"product-list-card__left\">\n        <div>\n          <div className=\"product-list-card__left--images\">\n            {product.brandLogoUrl && !product.hideBrandInfoInListings && (\n              <img\n                src={product.brandLogoUrl}\n                alt={product.brand}\n                loading=\"lazy\"\n              />\n            )}\n            <img\n              src={product.images[0]}\n              alt={product.baseProductName}\n              loading=\"lazy\"\n            />\n          </div>\n        </div>\n        <div>\n          <div className=\"product-list-card__left--environment-icons\">\n            {product.threePeakMountainSF && (\n              <Tooltip title={translate('product.tooltip.snow')}>\n                <img\n                  src=\"/ui/images/IceMountain.svg\"\n                  loading=\"lazy\"\n                  alt={translate('product.tooltip.snow')}\n                />\n              </Tooltip>\n            )}\n            {product.nordicFriction && (\n              <Tooltip title={translate('product.tooltip.ice')}>\n                <img\n                  src=\"/ui/images/snowForSnowAndIce.svg\"\n                  loading=\"lazy\"\n                  alt={translate('product.tooltip.ice')}\n                />\n              </Tooltip>\n            )}\n          </div>\n          {product.msMark && (\n            <div className=\"product-list-card__left--ms ms-icon\">\n              <Tooltip title={translate('product.tooltip.m-s')}>\n                <span>M + S</span>\n              </Tooltip>\n            </div>\n          )}\n          <div className=\"product-list-card__left--tags\">\n            {product.tags &&\n              product.tags.map((tag) => (\n                <span key={tag.text + product.id} className=\"product-tag\" style={{backgroundColor:tag.color}}>\n                  {tag.text}\n                </span>\n              ))}\n          </div>\n        </div>\n      </div>\n      <div className=\"product-list-card__middle\">\n        <div className=\"product-list-card__middle--top\">\n          <div className=\"product-list-card__middle--art-nr art-nr-copy\">\n            <span>{product.id}</span>\n            <CopyButton text={product.id} />\n          </div>\n          {product.showSimplifiedName ? (\n            <>\n              <a href={product.url} title={product.name}>\n                <h4\n                  itemProp=\"name\"\n                  className=\"product-list-card__middle--title product-title\"\n                >\n                  {!product.hideBrandInfoInListings && product.brand}{' '}\n                  {product.baseProductName}\n                </h4>\n              </a>\n              <div className=\"product-list-card__middle--product-name\"></div>\n            </>\n          ) : (\n            <>\n              <a href={product.url} title={product.name}>\n                <h4\n                  itemProp=\"name\"\n                  className=\"product-list-card__middle--title product-title\"\n                >\n                  {product.name}\n                </h4>\n              </a>\n            </>\n          )}\n\n          {product.season && (\n            <div className=\"product-list-card__middle--tire-type\">\n              {product.season}\n            </div>\n          )}\n        </div>\n        <div className=\"product-list-card__middle--bottom\">\n          <div className=\"product-list-card__middle--enviroment\">\n            {product.fuelClass && (\n              <span className=\"enviroment-icon\">\n                <GasPump size={20} />\n                {product.fuelClass}\n              </span>\n            )}\n            {product.wetGrip && (\n              <span className=\"enviroment-icon\">\n                <CloudRain size={20} />\n                {product.wetGrip}\n              </span>\n            )}\n            {product.db && (\n              <span className=\"enviroment-icon\">\n                <SpeakerHigh size={20} />\n                {product.noiseWavesNW} / {product.db}\n              </span>\n            )}\n          </div>\n          <ProductInStockTag {...product} />\n        </div>\n      </div>\n      <div className=\"product-list-card__right\">\n        {product.productPriceModel && (\n          <ProductPriceModel {...product.productPriceModel} />\n        )}\n        <div>\n          <div>\n            <BuyButton\n              quantity={product.quantity}\n              articleNumber={product.id}\n              quantityFieldId={product.quantityFieldId}\n              label={\n                product.showBuyButton\n                  ? translate('product.add-to-cart')\n                  : product.userIsAuthenticated\n                  ? translate('product.show-product')\n                  : translate('product.login-to-proceed')\n              }\n              disabled={!product.userIsAuthenticated || !product.showBuyButton}\n              userIsAuthenticated={product.userIsAuthenticated}\n              href={product.url}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default ProductsViewListItem;\n","import React, { useCallback } from 'react';\nimport { translate } from '../Services/translation';\nimport ProductsViewListItem from './ProductsViewListItem';\n\nconst ProductsViewList = (props) => {\n  const { products, hasRearProducts } = props;\n\n  const Product = useCallback(\n    (product) => (\n      <>\n        {!hasRearProducts && <ProductsViewListItem product={product} />}\n        {hasRearProducts && (\n          <div className=\"products-view__rear-products-list\">\n            <div className=\"products-view__rear-products-list-wrapper\">\n              <label>\n                {translate('general.front')}:{' '}\n                {product.wheelDimension.formattedDimensionLabel}\n              </label>\n              <ProductsViewListItem product={product} />\n            </div>\n            {product.rearProductItem && (\n              <div className=\"products-view__rear-products-list-wrapper\">\n                <label>\n                  {translate('general.rear')}:{' '}\n                  {product.rearProductItem.wheelDimension.formattedDimensionLabel}\n                </label>\n                <ProductsViewListItem product={product.rearProductItem} />\n              </div>\n            )}\n            {!product.rearProductItem && (\n              <div className=\"products-view__rear-products-list-wrapper products-view__rear-products-list-wrapper--no-product\">\n                <label>{translate('general.rear')}:</label>\n                <div>\n                  <span>{translate('product.no-matching-product')}</span>\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n      </>\n    ),\n    [hasRearProducts]\n  );\n\n  return (\n    <div>\n      {products.map((product) => (\n        <Product key={product.id + 'list'} {...product} />\n      ))}\n    </div>\n  );\n};\n\nexport default ProductsViewList;\n","import React, { Fragment } from 'react';\nimport BuyButton from './BuyButton';\nimport CopyButton from './CopyButton';\nimport { translate } from '../Services/translation';\nimport ConsumerPriceModel from './ConsumerPriceModel';\nimport ProductPriceModel from './ProductPriceModel';\nimport { User } from 'phosphor-react';\nimport ProductInStockTag from './ProductInStockTag';\n\nconst Separator = ({ columns, height }) => (\n  <tbody className=\"separator\">\n    <tr style={{ height: height }}>\n      {[...Array(columns)].map((_, i) => (\n        <td key={'separator-' + Math.random()}></td>\n      ))}\n    </tr>\n  </tbody>\n);\n\nconst ProductTableRow = ({ product, className }) => (\n  <tr className={'products-view-table__product-row ' + (className ?? '')}>\n    <td className=\"products-view-table__brand-logo\">\n      {product.brandLogoUrl && !product.hideBrandInfoInListings && (\n        <img src={product.brandLogoUrl} alt={product.brand} />\n      )}\n    </td>\n    <td className=\"products-view-table__base-name\">\n      <a href={product.url}>\n        {!product.hideBrandInfoInListings && product.brand}{' '}\n        {product.baseProductName}\n      </a>\n      <div className=\"art-nr-copy\">\n        {product.id} <CopyButton text={product.id} />\n      </div>\n    </td>\n    <td className=\"products-view-table__name\">\n      <a href={product.url}>{product.name}</a>\n    </td>\n    <td>\n      <ProductInStockTag {...product} />\n    </td>\n    <td className=\"text-right\">\n      {product.productPriceModel && (\n        <ProductPriceModel {...product.productPriceModel} />\n      )}\n      {!product.userIsAuthenticated && translate('product.login-to-proceed')}\n    </td>\n    <td className=\"products-view-table__buy-wrapper\">\n      <BuyButton\n        quantity={product.quantity}\n        disabled={!product.userIsAuthenticated || !product.showBuyButton}\n        articleNumber={product.id}\n        quantityFieldId={product.quantityFieldId}\n        label={!product.userIsAuthenticated ? <User /> : ''}\n        href={product.url}\n        showQuantityInputButtons={false}\n        userIsAuthenticated={product.userIsAuthenticated}\n      />\n    </td>\n  </tr>\n);\n\nconst ProductsViewTable = ({ products, totalHits, hasRearProducts }) => {\n  const COL_COUNT = 7;\n\n  return (\n    <table\n      className={`products-view-table ${\n        hasRearProducts ? 'products-view-table--rear-products' : ''\n      }`}\n    >\n      <thead>\n        <tr>\n          <th>{translate('product-table.brands')}</th>\n          <th>{translate('product-table.name')}</th>\n          <th>{translate('general.variant')}</th>\n          <th>{translate('product-table.stock-status')}</th>\n          <th className=\"text-right\">{translate('product-table.price')}</th>\n          <th></th>\n        </tr>\n      </thead>\n      {hasRearProducts && <Separator columns={COL_COUNT} />}\n      {products.map((p) => (\n        <Fragment key={'table-' + p.id}>\n          {!hasRearProducts && <ProductTableRow product={p} />}\n          {hasRearProducts && (\n            <>\n              <tbody className=\"products-view-table__product-wrapper\">\n                {hasRearProducts && (\n                  <tr className=\"products-view-table__rear-product-label\">\n                    <td>\n                      {translate('general.front')}:{' '}\n                      {p?.wheelDimension?.formattedDimensionLabel}\n                    </td>\n                  </tr>\n                )}\n                <ProductTableRow product={p} />\n                {hasRearProducts && (\n                  <>\n                    <tr className=\"products-view-table__rear-product-label\">\n                      <td>\n                        {translate('general.rear')}:{' '}\n                        {p.rearProductItem?.wheelDimension?.formattedDimensionLabel}\n                      </td>\n                    </tr>\n                    {!p.rearProductItem && (\n                      <tr className=\"products-view-table__no-rear-product\">\n                        <td>{translate('product.no-matching-product')}</td>\n                      </tr>\n                    )}\n                    {p.rearProductItem && (\n                      <ProductTableRow product={p.rearProductItem} />\n                    )}\n                    <tr>\n                      <td style={{ height: '12px' }}></td>\n                    </tr>\n                  </>\n                )}\n              </tbody>\n              <Separator columns={COL_COUNT} />\n            </>\n          )}\n        </Fragment>\n      ))}\n    </table>\n  );\n};\n\nexport default ProductsViewTable;\n","import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport KransensGummiMuiTheme from '../KransensGummiMuiTheme';\nimport renderForServer from '../render-for-server';\nimport LoadingDots from './LoadingDots';\nimport ProductsViewGallery from './ProductsViewGallery';\nimport ProductsViewList from './ProductsViewList';\nimport ProductsViewTable from './ProductsViewTable';\n\nexport const LIST_TYPE_TABLE = 'table';\nexport const LIST_TYPE_LIST = 'list';\nexport const LIST_TYPE_GALLERY = 'gallery';\n\nconst ProductsView = () => {\n  const {\n    isLoading,\n    productsWrapper,\n    listType = LIST_TYPE_GALLERY,\n    hasRearProducts,\n  } = useSelector((state) => state.productsView);\n\n  const { products, pagination } = productsWrapper;\n\n  return (\n    <div\n      className={`products-view products-view--${listType} ${\n        hasRearProducts ? 'products-view--rear-products' : ''\n      } ${isLoading ? 'products-view--loading' : ''}`}\n    >\n      {isLoading && (\n        <div className=\"products-view__loading-wrapper\">\n          <LoadingDots />\n        </div>\n      )}\n      {listType == LIST_TYPE_TABLE && (\n        <ProductsViewTable\n          products={products}\n          totalHits={pagination?.totalCount}\n          hasRearProducts={hasRearProducts}\n        />\n      )}\n      {listType == LIST_TYPE_LIST && (\n        <ProductsViewList\n          products={products}\n          hasRearProducts={hasRearProducts}\n        />\n      )}\n      {listType == LIST_TYPE_GALLERY && (\n        <ProductsViewGallery\n          products={products}\n          hasRearProducts={hasRearProducts}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default (props) => renderForServer(ProductsView, props);\n","import React from 'react';\nimport CopyButton from './CopyButton';\nimport { Tooltip } from '@material-ui/core';\nimport { translate } from '../Services/translation';\nimport { CloudRain, GasPump, Package, SpeakerHigh } from 'phosphor-react';\nimport BuyButton from './BuyButton';\nimport colors from 'Exports/colors.scss';\nimport ConsumerPriceModel from './ConsumerPriceModel';\nimport ProductPriceModel from './ProductPriceModel';\nimport ProductInStockTag from './ProductInStockTag';\n\nconst ProductsViewGalleryItem = (props) => {\n  const { product } = props;\n\n  return (\n    <div\n      itemScope\n      itemType=\"http://schema.org/Product\"\n      className=\"product__wrapper\"\n    >\n      <div className=\"product__top-section-wrapper\">\n        <figure className=\"product__figure\">\n          {product.brandLogoUrl && !product.hideBrandInfoInListings && (\n            <img\n              className=\"product__figure--brand-logo\"\n              alt={product.brand}\n              src={product.brandLogoUrl}\n              loading=\"lazy\"\n            />\n          )}\n          <a href={product.url} itemProp=\"url\" className=\"product__image-link\">\n            <img\n              className=\"product__image\"\n              src={product.images[0]}\n              alt={product.baseProductName}\n              loading=\"lazy\"\n              itemProp=\"image\"\n            />\n          </a>\n          <div className=\"product__figure--info-icons\">\n            <div className=\"product__figure--info-icons--icons\">\n              {product.threePeakMountainSF && (\n                <Tooltip title={translate('product.tooltip.snow')}>\n                  <img src=\"/ui/images/snowForSnowAndIce.svg\" loading=\"lazy\" />\n                </Tooltip>\n              )}\n              {product.nordicFriction && (\n                <Tooltip title={translate('product.tooltip.ice')}>\n                  <img src=\"/ui/images/IceMountain.svg\" loading=\"lazy\" />\n                </Tooltip>\n              )}\n            </div>\n            {product.msMark && (\n              <div className=\"product__figure--info-icons--ms\">\n                <Tooltip title={translate('product.tooltip.m-s')}>\n                  <span>M + S</span>\n                </Tooltip>\n              </div>\n            )}\n          </div>\n          <div className=\"product__figure--tags\" >\n            {product.tags &&\n              product.tags.map((tag) => (\n                <span key={tag.text + product.id} style={{backgroundColor:tag.color}}>\n                  {tag.text}\n                </span>\n              ))}\n          </div>\n        </figure>\n\n        <div>\n          <div className=\"product__info\">\n            <meta itemProp=\"description\" content={product.description} />\n            <span className=\"product__info--art-nr\">\n              <span>{product.id}</span>\n              <CopyButton text={product.id} />\n            </span>\n            {product.showSimplifiedName ? (\n              <>\n                <a href={product.url} title={product.name}>\n                  <h3\n                    itemProp=\"name\"\n                    className=\"product__info--name product__info--name-centered\"\n                  >\n                    {product.name}\n                  </h3>\n                </a>\n              </>\n            ) : (\n              <>\n                <a href={product.url} title={product.name}>\n                  <h3 itemProp=\"name\" className=\"product__info--name\">\n                    {!product.hideBrandInfoInListings && product.brand}{' '}\n                    {product.baseProductName}\n                  </h3>\n                </a>\n                <span className=\"product__info--dimensions\">\n                  {product.name}\n                </span>\n                <div className=\"product__info--surface\">\n                  <span>{product.season}</span>\n                </div>\n              </>\n            )}\n\n            <div className=\"product__info--environment-icons\">\n              {product.fuelClass && (\n                <span className=\"enviroment-icon\">\n                  <GasPump size={20} />\n                  {product.fuelClass}\n                </span>\n              )}\n              {product.wetGrip && (\n                <span className=\"enviroment-icon\">\n                  <CloudRain size={20} />\n                  {product.wetGrip}\n                </span>\n              )}\n              {product.db && (\n                <span className=\"enviroment-icon\">\n                  <SpeakerHigh size={20} />\n                  {product.noiseWavesNW} / {product.db}\n                </span>\n              )}\n            </div>\n            <div\n              className=\"product__price product__price--mobile\"\n              itemProp=\"offers\"\n              itemScope\n              itemType=\"http://schema.org/Offer\"\n            >\n              {product.productPriceModel && (\n                <ProductPriceModel {...product.productPriceModel} />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"product__footer\">\n        <div\n          className=\"product__price product__price--desktop\"\n          itemProp=\"offers\"\n          itemScope\n          itemType=\"http://schema.org/Offer\"\n        >\n          {product.productPriceModel && (\n            <ProductPriceModel {...product.productPriceModel} />\n          )}\n        </div>\n        <BuyButton\n          articleNumber={product.id}\n          quantityFieldId={product.quantityFieldId}\n          label={\n            product.showBuyButton\n              ? translate('product.add-to-cart')\n              : product.userIsAuthenticated\n              ? translate('product.show-product')\n              : translate('product.login-to-proceed')\n          }\n          disabled={!product.userIsAuthenticated || !product.showBuyButton}\n          userIsAuthenticated={product.userIsAuthenticated}\n          href={product.url}\n        />\n        <div className=\"product__stock-wrapper\">\n          <ProductInStockTag {...product} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default ProductsViewGalleryItem;\n","import React, { useCallback } from 'react';\nimport { translate } from '../Services/translation';\nimport ProductsViewGalleryItem from './ProductsViewGalleryItem';\n\nconst ProductsViewGallery = (props) => {\n  const { products, hasRearProducts, cardClassName, className } = props;\n\n  const Product = useCallback(\n    (product) => (\n      <li\n        className={\n          cardClassName ??\n          `product columns small-12 ${\n            !hasRearProducts ? 'medium-6 xlarge-4 xxlarge-3' : ''\n          }`\n        }\n      >\n        {!hasRearProducts && (\n          <ProductsViewGalleryItem\n            key={product.url}\n            product={product}\n            hasRear={hasRearProducts}\n          />\n        )}\n        {hasRearProducts && (\n          <div className=\"products-view__rear-products-gallery\">\n            <div className=\"products-view__rear-products-card-wrapper\">\n              <div>\n                <label>\n                  {translate('general.front')}:{' '}\n                  {product.wheelDimension.formattedDimensionLabel}\n                </label>\n                <ProductsViewGalleryItem key={product.url} product={product} />\n              </div>\n            </div>\n            {product.rearProductItem && (\n              <div className=\"products-view__rear-products-card-wrapper\">\n                <div>\n                  <label>\n                    {translate('general.rear')}:{' '}\n                    {product.rearProductItem.wheelDimension.formattedDimensionLabel}\n                  </label>\n                  <ProductsViewGalleryItem\n                    key={product.rearProductItem.url}\n                    product={product.rearProductItem}\n                  />\n                </div>\n              </div>\n            )}\n            {!product.rearProductItem && (\n              <div className=\"products-view__rear-products-card-wrapper products-view__rear-products-card-wrapper--no-product\">\n                <label>{translate('general.rear')}:</label>\n                <div>\n                  <span>{translate('product.no-matching-product')}</span>\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n      </li>\n    ),\n    [hasRearProducts]\n  );\n\n  return products?.length > 0 ? (\n    <ul className={className ?? 'row expanded no-padding product-list'}>\n      {products.map((product) => (\n        <Product key={product.id + 'gallery'} {...product} />\n      ))}\n    </ul>\n  ) : null;\n};\n\nexport default ProductsViewGallery;\n"],"sourceRoot":""}