{title}
\r\n {bodyText && numPerRow <= 4 && (\r\n{bodyText}
\r\n )}\r\n {link?.text && link.href && (\r\n \r\n )}\r\n \r\n {overlay && (\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default BannerItem;\r\n","import React, { useMemo } from 'react';\r\nimport BannerItem, { BannerItemProps } from './_banner-item';\r\nimport clsx from 'clsx';\r\ninterface BannerBlockProps {\r\n systemId: string;\r\n banners: BannerItemProps[];\r\n numPerRow: number;\r\n fullwidth: boolean;\r\n}\r\n\r\nconst BannerBlock = (props: BannerBlockProps) => {\r\n const { banners, numPerRow, systemId, fullwidth } = props;\r\n const cellsClass = useMemo(() => {\r\n switch (numPerRow) {\r\n case 1:\r\n default:\r\n return 'grid-cols-1';\r\n case 2:\r\n return 'grid-cols-1 md:grid-cols-2';\r\n case 3:\r\n return 'md:grid-cols-3';\r\n case 4:\r\n return 'grid-cols-2 md:grid-cols-4';\r\n case 5:\r\n return 'grid-cols-2 md:grid-cols-6 lg:grid-cols-5';\r\n case 6:\r\n return 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6';\r\n }\r\n }, [numPerRow]);\r\n\r\n return banners?.length > 0 ? (\r\n\r\n
\r\n ) : null;\r\n};\r\n\r\nexport default BannerBlock;\r\n","import React from 'react';\r\nimport LinkModel from '../../Types/LinkModel';\r\nimport clsx from 'clsx';\r\n\r\nexport interface BannerSliderItemProps {\r\n title?: string;\r\n bodyText?: string;\r\n link?: LinkModel;\r\n imageUrl: string;\r\n imageAlt?: string;\r\n mobileImageUrl?: string;\r\n mobileImageAlt?: string;\r\n overlay?: boolean;\r\n textPlacement?: string;\r\n}\r\n\r\nconst BannerSliderItem = (props: BannerSliderItemProps) => {\r\n const {\r\n title,\r\n bodyText,\r\n link,\r\n imageUrl,\r\n mobileImageUrl,\r\n overlay,\r\n textPlacement,\r\n imageAlt,\r\n mobileImageAlt,\r\n } = props;\r\n const hasLinkButton = link?.text;\r\n\r\n return (\r\n \r\n {banners.map((banner, idx) => (\r\n
\r\n \r\n {title}\r\n
\r\n {bodyText &&{bodyText}
}\r\n {hasLinkButton && (\r\n\r\n {title && title != \"\" &&\r\n window.location.href = url.href}\r\n className=\"additional__btn\"\r\n >\r\n {linkText}\r\n \r\n }\r\n
\r\n {title}
\r\n }\r\n {url?.href && url.href != \"\" &&\r\n- \r\n {pages.map((page, idx) => (\r\n
- \r\n \r\n {!page.imageUrl || page.imageUrl == \"\"\r\n ?
{page.text}
\r\n :}\r\n \r\n
\r\n ))}\r\n
\r\n {children} \r\n
\r\n \r\n );\r\n};\r\n","import React from 'react';\r\nimport { EditorStringModel } from '../../Types/EditorString';\r\n\r\nconst EditorString = ({ value }: EditorStringModel) => {\r\n return value ? (\r\n \r\n {title} \r\n \r\n {links.map((item, idx) => (\r\n \r\n ))}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default LinkBlock;\r\n","import styled from 'styled-components';\r\nimport { breakpoint } from '../../../styling/mixins/breakpoints';\r\nimport { cells } from '../../../styling/utils/grid';\r\nimport { text, fontFamilyBold } from '../../../styling/mixins/typography';\r\n\r\n\r\nexport const StyledLinkListSection = styled.section`\r\n padding-top: 2.4rem;\r\n padding-bottom: 3.2rem;\r\n\r\n ${breakpoint('medium')} {\r\n padding-top: 3.2rem;\r\n padding-bottom: 4rem;\r\n }\r\n\r\n ${breakpoint('large')} {\r\n padding-top: 4rem;\r\n padding-bottom: 4.8rem;\r\n }\r\n\r\n .cells-2, .cells-3, .cells-4 {\r\n ${cells(1)}\r\n }\r\n\r\n .cells-2 {\r\n ${breakpoint('medium')} {\r\n ${cells(2)}\r\n } \r\n }\r\n\r\n .cells-3 {\r\n ${breakpoint('medium')} {\r\n ${cells(3)}\r\n }\r\n }\r\n\r\n .cells-4 {\r\n ${breakpoint('medium')} {\r\n ${cells(2)}\r\n }\r\n\r\n ${breakpoint('large')} {\r\n ${cells(4)}\r\n }\r\n }\r\n\r\n .link-list-block {\r\n &__header {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 2.4rem;\r\n }\r\n\r\n &__list {\r\n gap: 2.4rem; \r\n\r\n &--item {\r\n\r\n h5 {\r\n ${text('xlarge')}\r\n ${fontFamilyBold};\r\n line-height: 2.2rem;\r\n text-transform: uppercase;\r\n margin-top: 2.4rem;\r\n margin-bottom: 3.7rem;\r\n }\r\n\r\n div {\r\n margin-bottom: 1.6rem;\r\n }\r\n\r\n img{\r\n width: 100%;\r\n }\r\n\r\n &__link {\r\n ${text('medium')}\r\n ${fontFamilyBold};\r\n line-height: 2.4rem;\r\n letter-spacing: 0.5px;\r\n text-decoration-line: underline;\r\n text-transform: uppercase;\r\n }\r\n } \r\n }\r\n }\r\n`;","import React, { useMemo } from 'react';\r\nimport LinkModel from '../../Types/LinkModel';\r\nimport LinkListCardModel from '../../Types/LinkListCardModel';\r\nimport Button from '../../Components/Button';\r\nimport { StyledLinkListSection } from './Styles/LinkList-block.styling';\r\n\r\ninterface LinkListBlockModel {\r\n title: string;\r\n link: LinkModel;\r\n linksPerRow: number;\r\n allowThumbnails: boolean;\r\n links: LinkListCardModel[];\r\n}\r\n\r\nconst LinkListBlock = (props: LinkListBlockModel) => {\r\n const { title, link, linksPerRow, allowThumbnails, links } = props;\r\n\r\n let cells = useMemo(() => {\r\n switch (linksPerRow) {\r\n case 2:\r\n return 'cells-2';\r\n case 3:\r\n return 'cells-3';\r\n case 4:\r\n return 'cells-4';\r\n }\r\n }, [linksPerRow]);\r\n\r\n return (\r\n \r\n {title && title != \"\" &&\r\n window.location.href = link.href}\r\n className=\"additional__btn\"\r\n >\r\n {link.text}\r\n \r\n }\r\n
\r\n {title}
\r\n }\r\n {link?.href && link.href != \"\" &&\r\n- \r\n {links.map((linkCard, idx) => (\r\n
- \r\n {allowThumbnails && linkCard.imageUrl && linkCard.imageUrl != \"\" &&
}\r\n {linkCard.title && linkCard.title != \"\" &&
{linkCard.title}
}\r\n {linkCard.text && linkCard.text != \"\" && }\r\n {linkCard.link?.text && linkCard.link.text != \"\" && linkCard.link.href && linkCard.link.href != \"\" &&\r\n \r\n {linkCard.link.text}\r\n \r\n }\r\n \r\n ))}\r\n
{title}
\r\n }\r\n {text && text != \"\" &&\r\n \r\n }\r\n \r\n\r\n
\r\n ) : null;\r\n};\r\n\r\nexport default ProductCardLipscoreStars;\r\n","import React, { useState } from 'react';\r\nimport Icon from '../Icon';\r\nimport Product from '../../Types/Product';\r\nimport {\r\n addProductToWishList,\r\n removeProductFromWishList,\r\n removeWishListItem,\r\n addWishListItem,\r\n} from '../../Reducers/WishList.reducer';\r\nimport { useDispatch } from 'react-redux';\r\nimport { translate } from '../../Services/translation';\r\n\r\nconst FavoriteButton = ({\r\n product,\r\n border = true,\r\n}: {\r\n product: Product;\r\n border?: boolean;\r\n}) => {\r\n const dispatch = useDispatch();\r\n const { wished } = product;\r\n const [isWished, setIsWished] = useState\r\n {Array.from({ length: 5 }).map((_, idx) => (\r\n
\r\n {showReviewsCount && (\r\n \r\n {`(${ratings[productModel.productId]?.votes})`}\r\n
\r\n )}\r\n \r\n
\r\n \r\n );\r\n};\r\nexport default FavoriteButton;\r\n","import { post } from './http';\r\nimport { dataLayerAddToCart } from '../Services/Gtm.service';\r\n\r\nexport const add = async ({\r\n articleNumber,\r\n quantity = 1,\r\n email,\r\n clickSource,\r\n}) => {\r\n if (!quantity || isNaN(quantity) || parseFloat(quantity) <= 0) {\r\n throw 'Invalid quantity';\r\n }\r\n\r\n const response = await post('/api/cart/add', {\r\n articleNumber,\r\n quantity: parseFloat(quantity),\r\n });\r\n\r\n var result = await response.json();\r\n\r\n try {\r\n addToDataLayer(\r\n [{ articleNumber, quantity }],\r\n result.orderRows,\r\n email,\r\n clickSource\r\n );\r\n } catch (err) {\r\n console.log(err);\r\n }\r\n\r\n return result;\r\n};\r\n\r\nexport const reorder = async (orderId) => {\r\n const response = await post('/api/cart/reorder', { orderId });\r\n return response.json();\r\n};\r\n\r\nconst addToDataLayer = (products, orderRows, email, clickSource) => {\r\n let responseProducts = [];\r\n orderRows.map((row) => {\r\n for (const i in products) {\r\n if (Object.hasOwnProperty.call(products, i)) {\r\n if (products[i].articleNumber === row.articleNumber) {\r\n const index = responseProducts.findIndex(\r\n (e) => e.articleNumber === row.articleNumber\r\n );\r\n if (index === -1) {\r\n row.gtmEcommerceItem.quantity = products[i].quantity;\r\n row.gtmEcommerceItem.index = responseProducts.length;\r\n responseProducts.push(row);\r\n }\r\n }\r\n }\r\n }\r\n });\r\n\r\n const gtmEcommerceItems = responseProducts.map(\r\n (p) => p.gtmEcommerceItem\r\n );\r\n if (gtmEcommerceItems) {\r\n dataLayerAddToCart(gtmEcommerceItems, email, clickSource);\r\n }\r\n};\r\n","export const catchError = (ex, onError) => (dispatch) => {\r\n if (ex.response) {\r\n ex.response.json().then((error) => dispatch(onError(error)));\r\n } else {\r\n dispatch(onError(ex));\r\n }\r\n};\r\n","import { get, put } from '../Services/http';\r\nimport { catchError } from './Error.action';\r\nimport { SUGGESTED_PRODUCTS_RECEIVED } from '../constants';\r\n\r\nexport const loadSuggestedProducts = () => (dispatch) => {\r\n return get('/api/suggestedProducts')\r\n .then((response) => response.json())\r\n .then((suggestedproducts) => {\r\n dispatch(receive(suggestedproducts));\r\n })\r\n .catch((ex) => {\r\n console.log(ex);\r\n return error;\r\n });\r\n};\r\n\r\nexport const receive = (suggestedproducts) => (dispatch) => {\r\n return dispatch({\r\n type: SUGGESTED_PRODUCTS_RECEIVED,\r\n payload: suggestedproducts,\r\n });\r\n};\r\n","import { get, put } from '../Services/http';\r\nimport { catchError } from './Error.action';\r\nimport {\r\n CART_LOAD_ERROR,\r\n CART_RECEIVE,\r\n CART_SHOW_MINI_CART,\r\n CART_ADD_TO_CART_ANIMATION,\r\n} from '../constants';\r\nimport { loadSuggestedProducts } from './SuggestedProducts.action';\r\n\r\nexport const load = () => (dispatch, getState) => {\r\n return get('/api/cart')\r\n .then((response) => response.json())\r\n .then((cart) => {\r\n dispatch(receive(cart));\r\n })\r\n .catch((ex) => {\r\n dispatch(catchError(ex, (error) => loadError(error)));\r\n return error;\r\n });\r\n};\r\n\r\nexport const loadError = (error) => ({\r\n type: CART_LOAD_ERROR,\r\n payload: {\r\n error,\r\n },\r\n});\r\n\r\nexport const receive = (cart) => (dispatch, getState) => {\r\n if (getState().cart.quantity != cart.quantity) {\r\n dispatch(triggerAddToCartAnimation());\r\n }\r\n\r\n return dispatch({\r\n type: CART_RECEIVE,\r\n payload: cart,\r\n });\r\n};\r\n\r\nexport const toggle = () => (dispatch, getState) => {\r\n dispatch(show(!getState().cart.showMiniCart));\r\n};\r\n\r\nexport const setShowMiniCart = (showMiniCart) => (dispatch) => {\r\n if (showMiniCart === true) {\r\n dispatch(loadSuggestedProducts(dispatch));\r\n }\r\n dispatch({\r\n type: CART_SHOW_MINI_CART,\r\n payload: {\r\n showMiniCart,\r\n },\r\n });\r\n};\r\n\r\nexport const update = (\r\n articleNumber,\r\n quantity,\r\n abortController = null\r\n) => (dispatch) => {\r\n return put(\r\n `/api/cart/update`,\r\n { articleNumber, quantity },\r\n abortController\r\n )\r\n .then((response) => response.json())\r\n .then((cart) => dispatch(receive(cart)))\r\n .catch((ex) => {\r\n dispatch(catchError(ex, (error) => loadError(error)));\r\n throw ex;\r\n });\r\n};\r\n\r\nlet addToCartAnimationTimeoutId;\r\nexport const triggerAddToCartAnimation = () => (dispatch, getState) => {\r\n const addToCartAnimating = getState().cart.addToCartAnimating;\r\n if (!addToCartAnimating) {\r\n if (addToCartAnimationTimeoutId) {\r\n clearTimeout(addToCartAnimationTimeoutId);\r\n }\r\n\r\n dispatch(setAddToCartAnimating(true));\r\n addToCartAnimationTimeoutId = setTimeout(\r\n () => dispatch(setAddToCartAnimating(false)),\r\n 500\r\n );\r\n }\r\n};\r\n\r\nconst setAddToCartAnimating = (addToCartAnimating) => ({\r\n type: CART_ADD_TO_CART_ANIMATION,\r\n payload: {\r\n addToCartAnimating,\r\n },\r\n});\r\n","import { css } from 'styled-components';\r\n\r\nexport const displayFlex = css`\r\n display: flex;\r\n`;\r\nexport const flexRow = css`\r\n flex-direction: row;\r\n`;\r\nexport const flexColumn = css`\r\n flex-direction: column;\r\n`;\r\nexport const spaceBetween = css`\r\n justify-content: space-between;\r\n`;\r\nexport const justifyCenter = css`\r\n justify-content: center;\r\n`;\r\nexport const alignCenter = css`\r\n align-items: center;\r\n`;\r\nexport const alignEnd = css`\r\n align-items: flex-end;\r\n`;\r\nexport const alignStart = css`\r\n align-items: flex-start;\r\n`;\r\nexport const flexGrow = css`\r\n flex-grow: 1;\r\n`;\r\nexport const flex1 = css`\r\n flex: 1;\r\n`;\r\n","import styled from 'styled-components';\r\nimport { getColor } from '../../../styling/mixins/colors';\r\nimport { fontFamilyBold, text } from '../../../styling/mixins/typography';\r\nimport { alignCenter, flexColumn } from '../../../styling/utils/flex';\r\nimport Icon from '../../Icon';\r\nimport {\r\n InputSize,\r\n InputState,\r\n StyledCheckboxProps,\r\n} from '../types/Input.types';\r\n\r\ninterface StyledInputWrapperProps {\r\n $inputState: InputState;\r\n $hasIcon: boolean;\r\n}\r\n\r\ninterface StyledInputProps {\r\n $inputSize: InputSize;\r\n $inputState: InputState;\r\n $hasIcon: boolean;\r\n}\r\n\r\nconst getColorByState = (inputState: InputState) => {\r\n switch (inputState) {\r\n case 'default':\r\n default:\r\n return null;\r\n case 'success':\r\n return getColor('success');\r\n case 'error':\r\n return getColor('alert');\r\n case 'warning':\r\n return getColor('warning');\r\n }\r\n};\r\n\r\nexport const StyledInputWrapper = styled.div\r\n {errorText}\r\n
\r\n )}\r\n \r\n\r\n )\r\n}\r\n\r\nexport default ExpressCheckoutButton;","import React, { useState, useMemo } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { add as addToCart } from '../../Services/Cart.service';\r\nimport { setShowMiniCart } from '../../Actions/Cart.action';\r\nimport {\r\n receive as receiveCart,\r\n triggerAddToCartAnimation,\r\n} from '../../Actions/Cart.action';\r\nimport { translate } from '../../Services/translation';\r\nimport QuantityInput from '../QuantityInput/QuantityInput';\r\nimport LoadingSpinner from '../LoadingSpinner';\r\nimport { useCallback } from 'react';\r\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\r\nimport { setBuyButtonLoading } from '../../Actions/BuyButton.action';\r\nimport Icon from '../Icon';\r\nimport clsx from 'clsx';\r\nimport ExpressCheckoutButton from \"../ExpressCheckout/ExpressCheckoutButton\";\r\nimport { initExpressCheckoutFromCart, initExpressCheckoutFromProduct } from '../../utils/vippsUtils';\r\nimport { OrderRow } from '../../Types/OrderRow';\r\n\r\nexport interface BuyButtonAttributes {\r\n articleNumber?: string;\r\n disabled?: boolean;\r\n showQuantityInput?: boolean;\r\n onClick?: Function;\r\n className?: string;\r\n label?: string;\r\n quantity?: number;\r\n href?: string;\r\n hideText?: boolean;\r\n expressCheckoutEnabled?: boolean;\r\n clickSource?: string;\r\n}\r\n\r\nconst BuyButton = (props: BuyButtonAttributes) => {\r\n const {\r\n articleNumber: localArticleNumber,\r\n showQuantityInput = true,\r\n className = '',\r\n onClick: customOnClick,\r\n label,\r\n quantity: initialQuantity,\r\n href,\r\n disabled: disabledProp,\r\n hideText = false,\r\n expressCheckoutEnabled = false,\r\n clickSource\r\n } = props;\r\n\r\n const {\r\n articleNumber: reducerArticleNumber,\r\n disabled = false,\r\n isLoading = false,\r\n } = useTypedSelector((state) => state.buyButton);\r\n\r\n const dispatch = useDispatch();\r\n const { current: userInfo } = useTypedSelector(\r\n (state) => state.userInfo\r\n );\r\n\r\n const {\r\n orderRows,\r\n expressCheckoutEnabled: cartExpressCheckoutEnabled,\r\n } = useTypedSelector((state) => state.cart);\r\n\r\n const [email] = useState\r\n {showQuantityInput && (\r\n setQuantity(value)}\r\n className=\"flex-1\"\r\n />\r\n )}\r\n {href && (\r\n \r\n {showLoadingSpinner && \r\n {showLoadingSpinner &&
\r\n\r\n {\r\n isExpressCheckoutEnabled(expressCheckoutEnabled, cartExpressCheckoutEnabled, orderRows) && (\r\n \r\n {errorText}\r\n
\r\n )}\r\n\r\n {props.data.isDisabled == true ? (\r\n {translate('product-listing.is-not-available')}\r\n ) : (\r\n <>\r\n )}\r\n {props.data.stockStatus < 1 &&\r\n props.data.isBackOrder == false &&\r\n props.data.isDisabled == false ? (\r\n <>\r\n \r\n \r\n <>\r\n
\r\n \r\n );\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ProductCardVariantPicker;\r\n","import React from 'react';\r\nimport ProductCardProps from './types/ProductCardProps';\r\nimport ResponsiveImage from '../ResponsiveImage/ResponsiveImage';\r\nimport ProductTag from '../ProductTags/ProductTag';\r\nimport { translate } from '../../Services/translation';\r\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\r\nimport ProductCardLipscoreStars from '../Lipscore/ProductCard.LipscoreStars';\r\nimport clsx from 'clsx';\r\nimport FavoriteButton from '../FavoriteButton/FavoriteButton';\r\nimport BuyButton from '../BuyButton/BuyButton';\r\nimport ProductCardVariantPicker from './ProductCardVariantPicker';\r\n\r\nconst ProductCard = (props: ProductCardProps) => {\r\n const { product, lazyLoadImage, showBuyButton } = props;\r\n\r\n const userInfo = useTypedSelector((state) => state.userInfo);\r\n const checkout = useTypedSelector((state) => state.checkout);\r\n const isBusinessCustomer = userInfo?.current?.isBusinessCustomer;\r\n\r\n return (\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n {product.images && product.images.length > 0 && (\r\n \r\n {product.tags.map((tag) => (\r\n \r\n {tag.name}\r\n \r\n ))}\r\n {product.discountPercantage && (\r\n \r\n {product.discountPercantage}\r\n \r\n )}\r\n {product.isNew && (\r\n \r\n {translate('product-tag.is-new')}\r\n \r\n )}\r\n
\r\n ) : (\r\n <>\r\n {(product.discountPercantage || product.isNew) && (\r\n \r\n {product.discountPercantage && (\r\n \r\n {product.discountPercantage}\r\n \r\n )}\r\n {product.isNew && (\r\n \r\n {translate('product-tag.is-new')}\r\n \r\n )}\r\n
\r\n )}\r\n \r\n )}\r\n \r\n \r\n {product.name}\r\n \r\n {product.productCardDescription && (\r\n
\r\n \r\n {product.productCardDescription}\r\n
\r\n )}\r\n \r\n {product.lipscoreProduct?.productModel && (\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default ProductCard;\r\n","import React, { useMemo } from 'react';\r\nimport ProductCard from '../Components/ProductCards/ProductCard';\r\nimport Product from '../Types/Product';\r\nimport clsx from 'clsx';\r\n\r\ninterface ProductNoSliderProps {\r\n products: Product[];\r\n numPerRow: number;\r\n title?: string;\r\n footerLinkText?: string;\r\n footerLinkUrl?: string;\r\n}\r\n\r\nconst ProductBlockNoSlider = (props: ProductNoSliderProps) => {\r\n const {\r\n products,\r\n numPerRow,\r\n title,\r\n footerLinkText,\r\n footerLinkUrl,\r\n } = props;\r\n\r\n let cellsClasses = useMemo(() => {\r\n switch (numPerRow) {\r\n case 1:\r\n return 'grid-cols-2';\r\n case 2:\r\n return 'grid-cols-2';\r\n case 3:\r\n return 'cells-3 md:grid-cols-3';\r\n case 4:\r\n return 'grid-cols-2 md:grid-cols-4';\r\n case 5:\r\n return 'grid-cols-2 md:grid-cols-3 lg:grid-cols-5';\r\n case 6:\r\n return 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6';\r\n }\r\n }, [numPerRow]);\r\n\r\n return (\r\n <>\r\n \r\n {product.fromPrice.hasFromPrice && (\r\n \r\n {translate('product-page.from-product-price')}\r\n \r\n )}\r\n {product.fromPrice.fromPrice.campaignPrice ? (\r\n
\r\n \r\n {product.fromPrice.fromPrice.formattedCampaignPrice}{' '}\r\n {isBusinessCustomer &&\r\n translate('product-card.without-vat')}{' '}\r\n \r\n {product.fromPrice.fromPrice.formattedPrice}{' '}\r\n \r\n
\r\n ) : (\r\n product.fromPrice.fromPrice.price && (\r\n \r\n {product.fromPrice.fromPrice.formattedPrice}{' '}\r\n {isBusinessCustomer &&\r\n translate('product-card.without-vat')}\r\n
\r\n )\r\n )}\r\n \r\n
\r\n {showBuyButton &&\r\n (product.variantPickerOptions ? (\r\n \r\n {product.hasVariants ? (\r\n \r\n {product.stockStatus.inStock\r\n ? translate('product-listing.is-in-stock')\r\n : translate('product-listing.is-not-in-stock')}\r\n \r\n ) : (\r\n product.stockStatus.description\r\n )}\r\n
\r\n {product.colorRelationAmount != undefined &&\r\n product.colorRelationAmount > 1 && (\r\n \r\n {product.colorRelationAmount +\r\n ' ' +\r\n translate('product-card.colors')}\r\n
\r\n )}\r\n \r\n {title && title != '' && (\r\n (window.location.href = footerLinkUrl)}\r\n className=\"btn btn--medium btn--outlined\"\r\n >\r\n {footerLinkText}\r\n \r\n )}\r\n
\r\n \r\n {title}\r\n
\r\n )}\r\n {footerLinkText &&\r\n footerLinkText != '' &&\r\n footerLinkUrl &&\r\n footerLinkUrl != '' && (\r\n\r\n {products.map((product, idx) => (\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default ProductBlockNoSlider;\r\n","import { Swiper, SwiperSlide } from 'swiper/react';\r\nimport React, { useEffect, useState } from 'react';\r\nimport ProductCard from '../Components/ProductCards/ProductCard';\r\nimport { Pagination, Navigation, Autoplay } from 'swiper';\r\nimport Product from '../Types/Product';\r\nimport clsx from 'clsx';\r\nimport ProductBlockNoSlider from './ProductBlockNoSlider';\r\n\r\ninterface ProductSliderProps {\r\n products: Product[];\r\n title: string;\r\n footerLinkText: string;\r\n footerLinkUrl: string;\r\n numPerRow?: number;\r\n showBuyButton?: boolean;\r\n}\r\n\r\nconst ProductSlider = ({\r\n products,\r\n title,\r\n footerLinkText,\r\n footerLinkUrl,\r\n numPerRow = 5,\r\n showBuyButton,\r\n}: ProductSliderProps) => {\r\n const [renderSlider, setRenderSlider] = useState(false);\r\n\r\n useEffect(() => setRenderSlider(true), []);\r\n\r\n return renderSlider ? (\r\n <>\r\n {title && (\r\n \r\n (window.location.href = footerLinkUrl)}\r\n className=\"btn btn--medium btn--gray-border\"\r\n >\r\n {footerLinkText}\r\n \r\n )}\r\n
\r\n )}\r\n {title}
\r\n {footerLinkText && footerLinkUrl && (\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default ProductSlider;\r\n","import React, { useMemo } from 'react';\r\nimport ProductCard from '../Components/ProductCards/ProductCard';\r\nimport BannerItem from './BannerBlock/_banner-item';\r\nimport { BannerBlockProps } from './BannerBlock/BannerBlock';\r\nimport { ProductNoSliderProps } from './ProductBlockNoSlider';\r\nimport { LinkModel } from '../Types/LinkModel';\r\nimport clsx from 'clsx';\r\n\r\ninterface ProductAndBannerProps {\r\n products: ProductNoSliderProps;\r\n banners: BannerBlockProps;\r\n showBannerToTheRight: boolean;\r\n productQuantity: number;\r\n title?: string;\r\n link?: LinkModel;\r\n}\r\n\r\nconst ProductsAndBannerBlock = ({\r\n products: productsBlock,\r\n banners: bannersBlock,\r\n showBannerToTheRight,\r\n title,\r\n link,\r\n}: ProductAndBannerProps) => {\r\n const bannerBlockItem = useMemo(\r\n () => (bannersBlock.banners?.length ? bannersBlock.banners[0] : null),\r\n [bannersBlock.banners]\r\n );\r\n\r\n const firstTwoProducts = useMemo(\r\n () => productsBlock.products?.slice(0, 2),\r\n [productsBlock]\r\n );\r\n const remainingProducts = useMemo(\r\n () => productsBlock.products?.slice(3),\r\n [productsBlock]\r\n );\r\n\r\n if (!bannerBlockItem) return null;\r\n return (\r\n <>\r\n {title && (\r\n \r\n
\r\n )}\r\n \r\n {title &&
\r\n {title}
}\r\n\r\n {link?.href && (\r\n \r\n {link.text}\r\n \r\n )}\r\n
\r\n \r\n
\r\n {remainingProducts?.length ? (\r\n \r\n
\r\n {firstTwoProducts && (\r\n \r\n {firstTwoProducts.map((product, idx) => (\r\n
\r\n )}\r\n {showBannerToTheRight && (\r\n \r\n
\r\n )}\r\n \r\n {remainingProducts.map((product, idx) => (\r\n
\r\n ) : null}\r\n \r\n );\r\n};\r\n\r\nexport default ProductsAndBannerBlock;\r\n","import React from 'react';\r\nimport { EditorStringModel } from '../Types/EditorString';\r\nimport EditorString from '../Components/EditorString/EditorString';\r\nimport clsx from 'clsx';\r\n\r\ninterface RichTextBlockProps {\r\n rowLayout: 'slim' | 'container' | 'fullwidth' | 'fullwidth-nopadding';\r\n columns: RichTextColumn[];\r\n slimContainerMaxWidth: number;\r\n verticalAlignment?: 'flex-start' | 'center' | 'flex-end';\r\n reverseColumnOrderForMobile: boolean;\r\n}\r\n\r\ninterface RichTextColumn {\r\n columnCount: number;\r\n columnCountMobile?: number;\r\n text: EditorStringModel;\r\n textMobile?: EditorStringModel;\r\n}\r\n\r\nconst RichTextBlock = ({\r\n rowLayout,\r\n columns,\r\n slimContainerMaxWidth,\r\n verticalAlignment,\r\n reverseColumnOrderForMobile,\r\n}: RichTextBlockProps) => {\r\n return (\r\n \r\n
\r\n )}\r\n \r\n ))}\r\n \r\n );\r\n};\r\n\r\nexport default RichTextBlock;\r\n","import React from 'react';\r\nimport styled from 'styled-components';\r\nimport { breakpoint } from '../styling/mixins/breakpoints';\r\nimport { text } from '../styling/mixins/typography';\r\nimport { cells, section } from '../styling/utils/grid';\r\nimport EditorString from '../Components/EditorString/EditorString';\r\nimport { EditorStringModel } from '../Types/EditorString';\r\n\r\ninterface UspBlockProps {\r\n title?: string;\r\n items: UspItem[];\r\n}\r\n\r\ninterface UspItem {\r\n title: string;\r\n imageUrl: string;\r\n text: EditorStringModel;\r\n}\r\n\r\nconst StyledUspWrapper = styled.div`\r\n ${section}\r\n padding-top: 2.4rem;\r\n padding-bottom: 2.4rem;\r\n\r\n ${breakpoint('medium')} {\r\n padding-top: 2.4rem;\r\n padding-bottom: 2.4rem;\r\n }\r\n ${breakpoint('large')} {\r\n padding-top: 4rem;\r\n padding-bottom: 4rem;\r\n }\r\n`;\r\n\r\nconst StyledUspList = styled.ul`\r\n display: grid;\r\n ${cells(2)}\r\n gap: 1.6rem;\r\n\r\n ${breakpoint('medium')} {\r\n ${cells(4)}\r\n }\r\n`;\r\n\r\nconst StyledUspItem = styled.li`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n\r\n img {\r\n margin-bottom: 1.6rem;\r\n max-height: 24px;\r\n }\r\n\r\n h6 {\r\n margin-bottom: 0.8rem;\r\n }\r\n\r\n div {\r\n ${text('medium')}\r\n text-align: center;\r\n }\r\n`;\r\n\r\nconst UspBlock = ({ items, title }: UspBlockProps) => {\r\n return (\r\n {item.title}
\r\n\r\n {foundCategory ? (\r\n {currentCategory.name}\r\n ) : (\r\n currentCategory.name\r\n )}\r\n
\r\n {title}
\r\n {titleRight}\r\n{children}
;\r\n\r\nexport default CheckoutSectionContent;\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nconst useDebouncedOnChange = (initialValue, action, wait = 300) => {\r\n const [internalValue, setInternalValue] = useState(initialValue);\r\n const [timeoutId, setTimeoutId] = useState(-1);\r\n\r\n useEffect(() => {\r\n if (timeoutId !== -1) {\r\n setTimeoutId(clearTimeout(timeoutId));\r\n }\r\n\r\n setTimeoutId(setTimeout(action, wait));\r\n }, [internalValue]);\r\n\r\n return [internalValue, setInternalValue];\r\n};\r\n\r\nexport default useDebouncedOnChange;\r\n","import { post, put, remove } from '../Services/http';\r\nimport { load as loadCart } from './Cart.action';\r\nimport { catchError } from './Error.action';\r\n\r\nimport {\r\n CHECKOUT_SET_SELECTED_BILLING_ADDRESS,\r\n CHECKOUT_SET_SELECTED_DELIVERY_ADDRESS,\r\n CHECKOUT_SET_PRIVATE_CUSTOMER,\r\n CHECKOUT_SET_SIGN_UP,\r\n CHECKOUT_SET_DELIVERY,\r\n CHECKOUT_SET_COUNTRY,\r\n CHECKOUT_SET_PAYMENT,\r\n CHECKOUT_SET_DISCOUNT_CODE,\r\n CHECKOUT_SET_ORDER_NOTE,\r\n CHECKOUT_SET_B2C_ZIP_CODE,\r\n CHECKOUT_SET_B2C_ZIP_CODE_SUCCESS,\r\n CHECKOUT_ACCEPT_TERMS_OF_CONDITION,\r\n CHECKOUT_ACCEPT_NEWS_LETTER_SIGN_UP,\r\n CHECKOUT_SUBMIT,\r\n CHECKOUT_SUBMIT_ERROR,\r\n CHECKOUT_SET_PAYMENT_WIDGET,\r\n CHECKOUT_SET_USED_DISCOUNT_CODE,\r\n CHECKOUT_UPDATE_CUSTOMER_INFO,\r\n CHECKOUT_SET_SHOW_ALTERNATIVE_ADDRESS,\r\n CLEAR_ERROR,\r\n CHECKOUT_SET_STATUS_SUBMIT_BUTTON,\r\n CHECKOUT_VALIDATE_ADDRESS,\r\n CHECKOUT_SET_CUSTOMER_INFO,\r\n CHECKOUT_SET_VALIDATION_ERRORS,\r\n CHECKOUT_SET_IS_SUBMITTING,\r\n} from '../constants';\r\n\r\nexport const setBusinessCustomer = (isBusinessCustomer) => ({\r\n type: CHECKOUT_SET_PRIVATE_CUSTOMER,\r\n payload: {\r\n isBusinessCustomer,\r\n },\r\n});\r\n\r\nexport const setSignUp = (signUp) => ({\r\n type: CHECKOUT_SET_SIGN_UP,\r\n payload: {\r\n signUp,\r\n },\r\n});\r\n\r\nexport const updateCustomerDetails = (key, data) => ({\r\n type: CHECKOUT_UPDATE_CUSTOMER_INFO,\r\n payload: {\r\n key,\r\n data,\r\n },\r\n});\r\n\r\nexport const setSelectedBillingAddress = (selectedBillingAddressId) => ({\r\n type: CHECKOUT_SET_SELECTED_BILLING_ADDRESS,\r\n payload: {\r\n selectedBillingAddressId,\r\n },\r\n});\r\n\r\nexport const setSelectedDeliveryAddress = (selectedDeliveryAddressId) => ({\r\n type: CHECKOUT_SET_SELECTED_DELIVERY_ADDRESS,\r\n payload: {\r\n selectedDeliveryAddressId,\r\n },\r\n});\r\n\r\nexport const setCheckoutIsSubmitting = (checkoutIsSubmitting) => ({\r\n type: CHECKOUT_SET_IS_SUBMITTING,\r\n payload: {\r\n checkoutIsSubmitting,\r\n },\r\n});\r\n\r\nexport const setDelivery = (method) => (dispatch, getState) => {\r\n dispatch({\r\n type: CHECKOUT_SET_DELIVERY,\r\n payload: {\r\n selectedDeliveryMethod: method,\r\n },\r\n });\r\n const { payload } = getState().checkout;\r\n return put('/api/checkout/setDeliveryProvider', payload)\r\n .then((response) => response.json())\r\n .then((result) => {\r\n dispatch(loadCart());\r\n if (result !== null && result.paymentWidget) {\r\n dispatch(setPaymentWidget(result.paymentWidget));\r\n }\r\n })\r\n .catch((ex) => dispatch(catchError(ex, (error) => submitError(error))));\r\n};\r\n\r\nexport const setCountry = (systemId) => (dispatch, getState) => {\r\n dispatch({\r\n type: CHECKOUT_SET_COUNTRY,\r\n payload: {\r\n selectedCountry: systemId,\r\n },\r\n });\r\n const { payload } = getState().checkout;\r\n\r\n // reset paymentWidget to null to avoid sending unnecessary request to payment provider\r\n dispatch(setPaymentWidget(null));\r\n\r\n return put('/api/checkout/setCountry', payload)\r\n .then((response) => response.json())\r\n .then((result) => {\r\n dispatch(loadCart());\r\n dispatch(setPaymentWidget(result.paymentWidget));\r\n dispatch({\r\n type: CHECKOUT_SET_DELIVERY,\r\n payload: {\r\n deliveryMethods: result.deliveryMethods,\r\n selectedDeliveryMethod: result.selectedDeliveryMethod,\r\n },\r\n });\r\n dispatch({\r\n type: CHECKOUT_SET_PAYMENT,\r\n payload: {\r\n paymentMethods: result.paymentMethods,\r\n selectedPaymentMethod: result.selectedPaymentMethod,\r\n },\r\n });\r\n })\r\n .catch((ex) => dispatch(catchError(ex, (error) => submitError(error))));\r\n};\r\n\r\nexport const setPayment = (method) => (dispatch, getState) => {\r\n dispatch({\r\n type: CHECKOUT_SET_PAYMENT,\r\n payload: {\r\n selectedPaymentMethod: method,\r\n },\r\n });\r\n\r\n const { payload } = getState().checkout;\r\n // reset paymentWidget to null to avoid sending unnecessary request to payment provider\r\n dispatch(setPaymentWidget(null));\r\n // reset payment error on the checkout\r\n dispatch(\r\n submitError({\r\n modelState: {\r\n payment: [],\r\n },\r\n })\r\n );\r\n\r\n return put('/api/checkout/setPaymentProvider', payload)\r\n .then((response) => response.json())\r\n .then((result) => {\r\n dispatch(loadCart());\r\n dispatch(setPaymentWidget(result.paymentWidget));\r\n })\r\n .catch((ex) => dispatch(catchError(ex, (error) => submitError(error))));\r\n};\r\n\r\nexport const reloadPayment = ( abortController = null) => (dispatch, getState) => {\r\n const { payload } = getState().checkout;\r\n return put('/api/checkout/reloadPaymentWidget', payload, abortController)\r\n .then((response) => response.json())\r\n .then((result) => {\r\n if (result && result.paymentWidget) {\r\n dispatch(setPaymentWidget(result.paymentWidget));\r\n }\r\n })\r\n .catch((ex) => dispatch(catchError(ex, (error) => submitError(error))));\r\n};\r\n\r\nconst setPaymentWidget = (paymentWidget) => ({\r\n type: CHECKOUT_SET_PAYMENT_WIDGET,\r\n payload: {\r\n paymentWidget,\r\n },\r\n});\r\n\r\nexport const setOrderNote = (orderNote) => ({\r\n type: CHECKOUT_SET_ORDER_NOTE,\r\n payload: {\r\n orderNote,\r\n },\r\n});\r\n\r\nexport const setB2CZipCode = (b2cZipCode) => ({\r\n type: CHECKOUT_SET_B2C_ZIP_CODE,\r\n payload: {\r\n b2cZipCode,\r\n },\r\n});\r\n\r\nexport const setB2CZipCodeSuccess = (b2cZipCodeCorrect) => ({\r\n type: CHECKOUT_SET_B2C_ZIP_CODE_SUCCESS,\r\n payload: {\r\n b2cZipCodeCorrect,\r\n },\r\n});\r\n\r\nexport const acceptTermsOfCondition = (acceptTermsOfCondition) => ({\r\n type: CHECKOUT_ACCEPT_TERMS_OF_CONDITION,\r\n payload: {\r\n acceptTermsOfCondition,\r\n },\r\n});\r\n\r\nexport const acceptNewsLetterSignUp = (acceptNewsLetterSignUp) => ({\r\n type: CHECKOUT_ACCEPT_NEWS_LETTER_SIGN_UP,\r\n payload: {\r\n acceptNewsLetterSignUp,\r\n },\r\n});\r\n\r\nexport const setDiscountCode = (discountCode) => ({\r\n type: CHECKOUT_SET_DISCOUNT_CODE,\r\n payload: {\r\n discountCode,\r\n },\r\n});\r\n\r\nexport const acceptNewsLetterSignUpB2C = (accept) => (dispatch, getState) => {\r\n const { payload } = getState().checkout;\r\n\r\n if (accept == payload.acceptNewsLetterSignUp) {\r\n return;\r\n }\r\n\r\n payload.acceptNewsLetterSignUp = accept;\r\n return put('/api/checkout/setNewsLetterOptInForB2C', payload)\r\n .then((response) => response.json())\r\n .then((result) => {\r\n dispatch(acceptNewsLetterSignUp(accept))\r\n dispatch(loadCart());\r\n dispatch(setPaymentWidget(result.paymentWidget));\r\n })\r\n .catch((ex) => {\r\n dispatch(catchError(ex, (error) => submitError(error)));\r\n // restore the initial cart\r\n dispatch(loadCart());\r\n });\r\n};\r\n\r\nexport const setOrderNoteForB2C = (comment) => (dispatch, getState) => {\r\n const { payload } = getState().checkout;\r\n\r\n if (comment == payload.orderNote) {\r\n return;\r\n }\r\n\r\n payload.orderNote = comment;\r\n return put('/api/checkout/setOrderCommentForB2C', payload)\r\n .then((response) => response.json())\r\n .then((result) => {\r\n dispatch(setOrderNote(comment))\r\n dispatch(loadCart());\r\n dispatch(setPaymentWidget(result.paymentWidget));\r\n })\r\n .catch((ex) => {\r\n dispatch(catchError(ex, (error) => submitError(error)));\r\n // restore the initial cart\r\n dispatch(loadCart());\r\n });\r\n};\r\n\r\nexport const setB2cZipCodeAction = () => (dispatch, getState) => {\r\n const { payload } = getState().checkout;\r\n\r\n return put('/api/checkout/setB2CZipCode', payload)\r\n .then((response) => response.json())\r\n .then((result) => {\r\n dispatch(loadCart());\r\n dispatch(setPayment(payload.selectedPaymentMethod));\r\n dispatch(setB2CZipCodeSuccess(result.b2cZipCodeCorrect));\r\n })\r\n .catch((ex) => {\r\n dispatch(catchError(ex, (error) => submitError(error)));\r\n dispatch(setB2CZipCodeSuccess(result.b2cZipCodeCorrect));\r\n // restore the initial cart\r\n dispatch(loadCart());\r\n });\r\n};\r\n\r\nexport const submitDiscountCode = () => (dispatch, getState) => {\r\n const { payload } = getState().checkout;\r\n return put('/api/checkout/setDiscountCode', payload)\r\n .then((response) => response.json())\r\n .then((result) => {\r\n dispatch(setUsedDiscountCodes(result.usedDiscountCodes));\r\n dispatch(loadCart());\r\n dispatch(setPaymentWidget(result.paymentWidget));\r\n // reset error of campaign code\r\n dispatch(\r\n submitError({\r\n modelState: {\r\n discountCode: [],\r\n },\r\n })\r\n );\r\n })\r\n .catch((ex) => {\r\n dispatch(catchError(ex, (error) => submitError(error)));\r\n // restore the initial cart\r\n dispatch(loadCart());\r\n });\r\n};\r\n\r\nexport const deleteDiscountCode = (discountCode) => (dispatch, getState) => {\r\n const { payload } = getState().checkout;\r\n payload.discountCode = discountCode;\r\n return remove('/api/checkout/deleteDiscountCode', payload)\r\n .then((response) => response.json())\r\n .then((result) => {\r\n dispatch(setUsedDiscountCodes(result.usedDiscountCodes));\r\n dispatch(loadCart());\r\n dispatch(setPaymentWidget(result.paymentWidget));\r\n dispatch(setDiscountCode(''));\r\n // reset error of campaign code\r\n dispatch(\r\n submitError({\r\n modelState: {\r\n discountCode: [],\r\n },\r\n })\r\n );\r\n })\r\n .catch((ex) => {\r\n dispatch(catchError(ex, (error) => submitError(error)));\r\n // restore the initial cart\r\n dispatch(loadCart());\r\n });\r\n};\r\n\r\nconst setUsedDiscountCodes = (usedDiscountCodes) => ({\r\n type: CHECKOUT_SET_USED_DISCOUNT_CODE,\r\n payload: {\r\n usedDiscountCodes,\r\n },\r\n});\r\n\r\nexport const setAlternativeAddress = (propName, value) => ({\r\n type: CHECKOUT_SET_CUSTOMER_INFO,\r\n payload: {\r\n key: 'alternativeAddress',\r\n data: {\r\n [propName]: value,\r\n },\r\n },\r\n});\r\n\r\nexport const setCustomerDetails = (propName, value) => ({\r\n type: CHECKOUT_SET_CUSTOMER_INFO,\r\n payload: {\r\n key: 'customerDetails',\r\n data: {\r\n [propName]: value,\r\n },\r\n },\r\n});\r\n\r\nexport const submit = () => (dispatch, getState) => {\r\n const { payload } = getState().checkout;\r\n return _submit('/api/checkout', payload, dispatch);\r\n};\r\n\r\nconst _submit = (url, model, dispatch) => {\r\n return post(url, model)\r\n .then((response) => response.json())\r\n .then((result) => {\r\n dispatch(submitDone(result));\r\n if (result.redirectUrl) {\r\n location.href = result.redirectUrl;\r\n } else {\r\n dispatch(setCheckoutIsSubmitting(false));\r\n }\r\n })\r\n .catch((ex) => {\r\n dispatch(setCheckoutIsSubmitting(false));\r\n if (ex.response) {\r\n ex.response.json().then((error) => {\r\n dispatch(submitError(error));\r\n dispatch(submitDone(null));\r\n // reload the cart, it might be changed after validation\r\n dispatch(loadCart());\r\n });\r\n } else {\r\n dispatch(submitError(ex));\r\n }\r\n });\r\n};\r\n\r\nexport const saveCustomerDetail = () => (dispatch, getState) => {\r\n const { payload } = getState().checkout;\r\n return put('api/checkout/setCustomerDetail', payload)\r\n .then((response) => response.json())\r\n .catch((ex) => {\r\n if (ex.response) {\r\n ex.response.json().then((error) => {\r\n dispatch(submitError(error));\r\n });\r\n } else {\r\n dispatch(submitError(ex));\r\n }\r\n throw ex;\r\n });\r\n};\r\n\r\nexport const clearError = () => ({\r\n type: CLEAR_ERROR,\r\n payload: {\r\n errors: [],\r\n },\r\n});\r\n\r\nexport const submitDone = (result) => ({\r\n type: CHECKOUT_SUBMIT,\r\n payload: {\r\n result,\r\n },\r\n});\r\n\r\nexport const submitError = (error) => ({\r\n type: CHECKOUT_SUBMIT_ERROR,\r\n payload: {\r\n error,\r\n },\r\n});\r\n\r\nexport const setValidationErrors = (validationErrors) => ({\r\n type: CHECKOUT_SET_VALIDATION_ERRORS,\r\n payload: {\r\n validationErrors,\r\n },\r\n});\r\n\r\nexport const setStatusSubmitButton = (value) => ({\r\n type: CHECKOUT_SET_STATUS_SUBMIT_BUTTON,\r\n payload: {\r\n enableConfirmButton: value,\r\n },\r\n});\r\n\r\nexport const setShowAlternativeAddress = (showAlternativeAddress) => ({\r\n type: CHECKOUT_SET_SHOW_ALTERNATIVE_ADDRESS,\r\n payload: {\r\n showAlternativeAddress,\r\n },\r\n});\r\nexport const setValidateStatus = (isValidating) => ({\r\n type: CHECKOUT_VALIDATE_ADDRESS,\r\n payload: {\r\n isValidating,\r\n },\r\n});\r\n","import React from 'react';\r\nimport { useMemo } from 'react';\r\nimport Icon from '../Icon';\r\nimport {\r\n StyledInputIconWrapper,\r\n StyledInputWrapper,\r\n StyledTextArea,\r\n StyledTextAreaIcon,\r\n} from './styles/Inputs.styled';\r\nimport { InputProps } from './types/Input.types';\r\n\r\nconst TextArea: React.FC<\r\n InputProps & React.InputHTMLAttributes\r\n {row.image && (\r\n \r\n 
\r\n \r\n )}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {row.brand}
\r\n \r\n {row.name}\r\n
\r\n {row.extraInfo && (\r\n \r\n {row.extraInfo.items.map((item) => (\r\n
\r\n )}\r\n \r\n {item.key}: {item.value}\r\n
\r\n ))}\r\n \r\n \r\n {row.stockStatus.description}\r\n \r\n
\r\n \r\n {onRemoveClick && !row.isFreeGift && (\r\n \r\n )}\r\n
\r\n \r\n handleOnQuantityChange(quantity)}\r\n />\r\n \r\n {row.totalCampaignPrice != ''\r\n ? row.totalCampaignPrice\r\n : row.totalPrice}\r\n {row.totalCampaignPrice != '' && (\r\n
\r\n {row.totalPrice}
\r\n )}\r\n {children}
;\r\n\r\nexport default CheckoutSectionFooter;\r\n","import { post } from '../Services/http';\r\nimport { ORDER_SUMMARY_RECEIVED } from '../constants';\r\n\r\nexport const updateOrderSummary = (shippingCost) => (dispatch) => {\r\n const cost = Number(shippingCost);\r\n if (isNaN(cost)) {\r\n console.error('Invalid shipping cost value');\r\n return;\r\n }\r\n\r\n return post('/api/checkout/updateOrderSummary', { shippingCost: cost })\r\n .then((response) => response.json())\r\n .then((orderSummary) => {\r\n dispatch(receive(orderSummary));\r\n })\r\n .catch((ex) => {\r\n console.log(ex);\r\n throw ex;\r\n });\r\n};\r\n\r\nexport const receive = (orderSummary) => (dispatch) => {\r\n return dispatch({\r\n type: ORDER_SUMMARY_RECEIVED,\r\n payload: orderSummary,\r\n });\r\n};\r\n","import { translate } from '../../Services/translation';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\r\nimport { useDispatch } from 'react-redux';\r\nimport styled from 'styled-components';\r\nimport { flex1 } from '../../styling/utils/flex';\r\nimport { text, fontFamilyBold } from '../../styling/mixins/typography';\r\nimport { getColor } from '../../styling/mixins/colors';\r\nimport CheckoutSectionFooter from './utils/Checkout.SectionFooter';\r\nimport CheckoutSection from './utils/Checkout.Section';\r\nimport { updateOrderSummary } from '../../Actions/OrderSummary.action';\r\nconst StyledPriceRow = styled.div`\r\n display: flex;\r\n ${flex1}\r\n justify-content: space-between;\r\n ${text('large')}\r\n margin-bottom: 0.4rem;\r\n &:last-child {\r\n margin-bottom: unset;\r\n }\r\n`;\r\n\r\nconst StyledDiscountRow = styled.div`\r\n display: flex;\r\n ${flex1}\r\n justify-content: space-between;\r\n ${text('large')}\r\n margin-bottom: 0.4rem;\r\n color: ${getColor('primary')};\r\n &:last-child {\r\n margin-bottom: unset;\r\n }\r\n`;\r\n\r\nconst StyledGrandTotal = styled.div`\r\n ${text('large')}\r\n ${fontFamilyBold};\r\n display: flex;\r\n ${flex1}\r\n justify-content: space-between;\r\n margin-bottom: 0.4rem;\r\n &:last-child {\r\n margin-bottom: unset;\r\n }\r\n`;\r\n\r\ndeclare global {\r\n interface Window {\r\n _klarnaCheckout: (callback: (api: any) => void) => void;\r\n Vipps: any;\r\n }\r\n}\r\n\r\nconst CheckoutOrderSummary = () => {\r\n const cart = useTypedSelector((state) => state.cart);\r\n const checkout = useTypedSelector((state) => state.checkout);\r\n const orderSummary = useTypedSelector((state) => state.orderSummary);\r\n const dispatch = useDispatch();\r\n\r\n useEffect(() => {\r\n dispatch(updateOrderSummary(orderSummary.shippingMethodCost));\r\n }, [cart]);\r\n\r\n\r\n useEffect(() => {\r\n window.Vipps = window.Vipps || {};\r\n window.Vipps.shipping_option_selected = function (data) {\r\n dispatch(updateOrderSummary(data.price.fractionalDenomination / 100));\r\n }\r\n }, [dispatch, cart, orderSummary]);\r\n\r\n useEffect(() => {\r\n if (!checkout.payload.paymentWidget) return;\r\n\r\n const setupKlarnaListener = () => {\r\n if (window._klarnaCheckout) {\r\n window._klarnaCheckout(function (api) {\r\n api.on({\r\n 'shipping_option_change': function (data) {\r\n dispatch(updateOrderSummary(data.price / 100));\r\n }\r\n });\r\n });\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n if (!setupKlarnaListener()) {\r\n // If failed, set up observer to wait for Klarna\r\n const observer = new MutationObserver((mutations, obs) => {\r\n if (setupKlarnaListener()) {\r\n obs.disconnect();\r\n }\r\n });\r\n\r\n observer.observe(document.body, {\r\n childList: true,\r\n subtree: true\r\n });\r\n\r\n return () => observer.disconnect();\r\n }\r\n }, [checkout.payload.paymentWidget, dispatch, cart, orderSummary]);\r\n\r\n return (\r\n \r\n {children} \r\n
\r\n \r\n \r\n submitDiscount(inputDiscountCode)}\r\n disabled={!inputDiscountCode || isLoading}\r\n className='mt-0'\r\n >\r\n {translate('checkout.discount.submit')}\r\n \r\n
\r\n )}\r\n {usedDiscountCodes && (\r\n \r\n {usedDiscountCodes.map((code) => (\r\n dispatch(deleteDiscountCode(code))}\r\n >\r\n {code}\r\n \r\n ))}\r\n
\r\n )}\r\n {errors[\"general\"][0]}
}\r\n\r\n {orderRowCards} \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {showMessageIcon && messageIcon}\r\n {message}\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default Checkbox;\r\n","import React, { useCallback, useMemo } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport CheckoutSection from './utils/Checkout.Section';\r\nimport CheckoutSectionContent from './utils/Checkout.SectionContent';\r\nimport CheckoutSectionFooter from './utils/Checkout.SectionFooter';\r\nimport {\r\n acceptTermsOfCondition as setAcceptTermsOfCondition,\r\n acceptNewsLetterSignUp as setAcceptNewsLetterSignUp,\r\n setStatusSubmitButton,\r\n setValidationErrors,\r\n submit,\r\n submitDone,\r\n setCheckoutIsSubmitting,\r\n saveCustomerDetail,\r\n} from '../../Actions/Checkout.action';\r\nimport {\r\n alwaysRequiredSchema,\r\n businessCustomerDetailsSchema,\r\n privateCustomerAddressSchema,\r\n privateCustomerAlternativeAddressSchema,\r\n} from './utils/Checkout.ValidationSchema';\r\nimport { translate } from '../../Services/translation';\r\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\r\nimport Checkbox from '../Inputs/Checkbox';\r\nimport styled from 'styled-components';\r\nimport Button from '../Button';\r\nimport { getColor } from '../../styling/mixins/colors';\r\nimport { text } from '../../styling/mixins/typography';\r\nimport { fontFamilyBold } from \"../../styling/mixins/typography\";\r\n\r\nconst StyledCheckoutSectionFooter = styled(CheckoutSectionFooter)`\r\n display: flex;\r\n margin-top: 2.4rem;\r\n\r\n button, .submit-button:hover {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: ${getColor('primary')};\r\n ${text('medium')}\r\n ${fontFamilyBold};\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n border: none;\r\n }\r\n`;\r\n\r\nconst ConfirmOrder = () => {\r\n const dispatch = useDispatch();\r\n const checkout = useTypedSelector((state) => state.checkout);\r\n const { payload, validationErrors = {}, checkoutIsSubmitting } = checkout;\r\n const {\r\n customerDetails,\r\n alternativeAddress,\r\n selectedDeliveryAddressId,\r\n selectedBillingAddressId,\r\n selectedDeliveryMethod,\r\n selectedPaymentMethod,\r\n showAlternativeAddress,\r\n isBusinessCustomer,\r\n acceptTermsOfCondition,\r\n acceptNewsLetterSignUp,\r\n } = payload;\r\n\r\n const onSubmit = useCallback(() => dispatch(submit()), [dispatch]);\r\n\r\n const placeOrder = useCallback(async () => {\r\n dispatch(setCheckoutIsSubmitting(true));\r\n const notCustomerDetailFields = [\r\n 'selectedDeliveryAddressId',\r\n 'selectedBillingAddressId',\r\n 'selectedPaymentMethod',\r\n 'selectedDeliveryMethod',\r\n 'acceptTermsOfCondition',\r\n 'acceptNewsLetterSignUp',\r\n ];\r\n\r\n const onValidationFailed = (stateKey: string, errors: any[]) => {\r\n const key = (err: any) =>\r\n stateKey && !notCustomerDetailFields.includes(err.path)\r\n ? `${stateKey}-${err.path}`\r\n : err.path;\r\n\r\n const newValidationErrors = errors.reduce(\r\n (prev, err) => ({\r\n ...prev,\r\n [key(err)]: err.errors,\r\n }),\r\n {}\r\n );\r\n\r\n console.log(\"validation errors:\", newValidationErrors);\r\n\r\n dispatch(\r\n setValidationErrors({ ...validationErrors, ...newValidationErrors })\r\n );\r\n dispatch(setStatusSubmitButton(true));\r\n dispatch(submitDone(null));\r\n };\r\n\r\n dispatch(setStatusSubmitButton(false));\r\n\r\n // Validate, then submit. Not proud of this validation, but better than Litium default\r\n try {\r\n if (isBusinessCustomer) {\r\n // Business customer\r\n try {\r\n await businessCustomerDetailsSchema.validate(\r\n {\r\n ...customerDetails,\r\n selectedDeliveryAddressId,\r\n selectedBillingAddressId,\r\n },\r\n { abortEarly: false }\r\n );\r\n } catch (ex) {\r\n // re-throw the error with the scheme's state key\r\n throw { stateKey: 'customerDetails', error: ex.inner };\r\n }\r\n } else {\r\n // Private customer\r\n try {\r\n await privateCustomerAddressSchema.validate(\r\n {\r\n ...customerDetails,\r\n },\r\n { abortEarly: false }\r\n );\r\n } catch (ex) {\r\n // re-throw the error with the scheme's state key\r\n throw { stateKey: 'customerDetails', error: ex.inner };\r\n }\r\n\r\n // Alternative address\r\n if (showAlternativeAddress) {\r\n try {\r\n await privateCustomerAlternativeAddressSchema.validate(\r\n {\r\n ...alternativeAddress,\r\n },\r\n { abortEarly: false }\r\n );\r\n } catch (ex) {\r\n // re-throw the error with the scheme's state key\r\n throw { stateKey: 'alternativeAddress', error: ex.inner };\r\n }\r\n }\r\n }\r\n\r\n // Always required\r\n try {\r\n await alwaysRequiredSchema.validate(\r\n {\r\n acceptTermsOfCondition,\r\n selectedPaymentMethod,\r\n selectedDeliveryMethod,\r\n },\r\n { abortEarly: false }\r\n );\r\n } catch (ex) {\r\n // re-throw the error with the scheme's state key\r\n throw { stateKey: null, error: ex.inner };\r\n }\r\n\r\n // Will not be reached if any validation failed\r\n dispatch(saveCustomerDetail()).then(() => onSubmit());\r\n } catch (err) {\r\n dispatch(setCheckoutIsSubmitting(false));\r\n onValidationFailed(err.stateKey, err.error);\r\n }\r\n }, [\r\n dispatch,\r\n validationErrors,\r\n isBusinessCustomer,\r\n customerDetails,\r\n selectedDeliveryAddressId,\r\n selectedBillingAddressId,\r\n showAlternativeAddress,\r\n alternativeAddress,\r\n acceptTermsOfCondition,\r\n acceptNewsLetterSignUp,\r\n selectedPaymentMethod,\r\n selectedDeliveryMethod,\r\n onSubmit,\r\n ]);\r\n\r\n const acceptTermsError = useMemo(\r\n () =>\r\n validationErrors['acceptTermsOfCondition']\r\n ? validationErrors['acceptTermsOfCondition'][0]\r\n : null,\r\n [validationErrors]\r\n );\r\n\r\n return (\r\n \r\n {title}\r\n {description && {description}}\r\n {extraInfo && extraInfo != \"\" && {extraInfo}}\r\n
\r\n \r\n {cost}\r\n {logo && {logo}}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default CheckoutRadio;\r\n","import React, { useEffect } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport CheckoutSection from './utils/Checkout.Section';\r\nimport CheckoutSectionContent from './utils/Checkout.SectionContent';\r\nimport Radio from './utils/Checkout.Radio';\r\nimport { setDelivery } from '../../Actions/Checkout.action';\r\nimport { translate } from '../../Services/translation';\r\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\r\n\r\nconst DeliveryMethods = () => {\r\n const dispatch = useDispatch();\r\n const checkout = useTypedSelector((state) => state.checkout);\r\n const { deliveryMethods, selectedDeliveryMethod, selectedPaymentMethod } = checkout.payload;\r\n\r\n\r\n // Try without setting the delivery method async. Done in init code in BE\r\n // useEffect(() => {\r\n // if (!selectedDeliveryMethod) return;\r\n\r\n // dispatch(setDelivery(selectedDeliveryMethod));\r\n // }, []);\r\n\r\n return selectedPaymentMethod && selectedPaymentMethod.integrationType != \"IframeCheckout\" ? (\r\n \r\n {label}\r\n {stockStatus > 0 && inStock ? (\r\n \r\n
\r\n );\r\n};\r\nexport default VariantOptionLabel;\r\n","import React, { useEffect, useMemo, useRef, useState } from 'react';\r\nimport Icon from './Icon';\r\nimport VariantOptionLabel from './VariantOptionLabel';\r\nimport clsx from 'clsx';\r\n\r\nexport interface DropdownOption {\r\n value: string;\r\n label?: string;\r\n stockStatusDescription?: string;\r\n inStock: boolean;\r\n stockstatus?: number;\r\n articlenumber: string;\r\n disabled?: boolean;\r\n}\r\n\r\ninterface DropdownAttributes {\r\n options: DropdownOption[];\r\n onChange?: (option: DropdownOption) => void;\r\n selectedValue?: string;\r\n className?: string;\r\n size?: 'small' | 'large';\r\n placeholder?: string;\r\n disabled?: boolean;\r\n isVariantDropdown?: boolean;\r\n}\r\n\r\nconst Dropdown = ({\r\n options,\r\n selectedValue: initialSelectedValue,\r\n onChange,\r\n className = '',\r\n size = 'large',\r\n placeholder,\r\n disabled = false,\r\n isVariantDropdown = false,\r\n}: DropdownAttributes) => {\r\n const [selectedValue, setSelectedValue] = useState\r\n {translate('checkout.selectdelivery')}\r\n
\r\n \r\n {translate('checkout.order.delivery')}\r\n \r\n {selectedDeliveryAddress ? payload.companyName : translate('checkout.no.delivery.address')}\r\n \r\n \r\n {selectedDeliveryAddress?.address}\r\n \r\n \r\n {selectedDeliveryAddress?.zipCode}{' '}\r\n {selectedDeliveryAddress?.city}\r\n \r\n \r\n {getCountry(selectedDeliveryAddress)}\r\n \r\n
\r\n \r\n {translate('checkout.selectbilling')}\r\n
\r\n \r\n {translate('checkout.order.billing')}\r\n \r\n {payload.companyName}\r\n \r\n \r\n {selectedBillingAddress?.address}\r\n \r\n \r\n {selectedBillingAddress?.zipCode} {selectedBillingAddress?.city}\r\n \r\n \r\n {getCountry(selectedBillingAddress)}\r\n \r\n
\r\n \r\n
\r\n {translate('checkout.empty.title')}
\r\n {emptyCartMessage && (\r\n{translate('checkout.b2czipcode.selected')}{payload.b2cZipCode}
\r\n\r\n {product.price.formattedCampaignPrice}{' '}\r\n
\r\n ) : (\r\n \r\n {product.price.formattedPrice}{' '}\r\n
\r\n )\r\n }\r\n \r\n )\r\n}\r\n\r\nexport default SuggestProductCardPrice","import React from 'react'\r\n\r\nconst SuggestedProductCardImage = ({ product, className = \"\" }) => {\r\n return (\r\n \r\n {product.imageUrl && (\r\n \r\n 
\r\n \r\n )}\r\n
\r\n )\r\n}\r\n\r\nexport default SuggestedProductCardImage","import styled from \"styled-components\";\r\nimport { getColor } from \"../../../styling/mixins/colors\";\r\nimport { text } from \"../../../styling/mixins/typography\";\r\nimport { fontFamilyBold } from \"../../../styling/variables/typography\";\r\n\r\nexport const SuggestedProductCardRow = styled.div`\r\n background-color: ${getColor('white')};\r\n display: flex;\r\n flex-direction: row;\r\n gap: 0 1.6rem;\r\n margin-top: 0.4rem;\r\n border: 1px solid ${getColor('gray', 200)};\r\n padding: 1.6rem 5rem 1.6rem 4.5rem;\r\n\r\n .top-section {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n .right-section {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n }\r\n\r\n .image-wrapper {\r\n background-color: ${getColor('white')};\r\n width: 64px;\r\n height: 64px;\r\n }\r\n\r\n .image {\r\n width: 100%;\r\n aspect-ratio: 1/1;\r\n object-fit: contain;\r\n }\r\n\r\n .content {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n }\r\n\r\n .name {\r\n ${text('medium')}\r\n ${fontFamilyBold}\r\n margin-bottom: 0.8rem;\r\n }\r\n\r\n .description {\r\n margin-bottom: 0.8rem;\r\n .name-description {\r\n ${text('small')};\r\n color: ${getColor('gray', 600)};\r\n }\r\n }\r\n\r\n .price-wrapper {\r\n ${text('large')}\r\n ${fontFamilyBold}\r\n text-align: right;\r\n &--discount {\r\n color: ${getColor('alert')};\r\n .price {\r\n }\r\n }\r\n }\r\n\r\n .price {\r\n ${text('small')}\r\n text-decoration: line-through;\r\n color: ${getColor('grey', 500)};\r\n }\r\n\r\n .footer {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n }\r\n`;\r\n\r\n\r\n\r\nexport const SuggestedProductCardRowDesktop = styled.div`\r\n background-color: ${getColor('white')};\r\n display: flex;\r\n flex-direction: row;\r\n padding: 1.6rem 5rem 1.6rem 4.5rem;\r\n border: 1px solid ${getColor('gray', 200)};\r\n\r\n .image-wrapper {\r\n background-color: ${getColor('white')};\r\n width: 71px;\r\n height: 78px;\r\n }\r\n\r\n .image {\r\n width: 100%;\r\n aspect-ratio: 1/1;\r\n object-fit: contain;\r\n }\r\n`;\r\n\r\nexport const SuggestedProductCardCheckoutRow = styled.div`\r\n background-color: ${getColor('white')};\r\n display: grid;\r\n grid-template-rows: 145px 34px 24px 24px 17px 34px;\r\n gap: 10px;\r\n height: 100%;\r\n align-content: start; // Ensures content starts from the top\r\n text-align: center;\r\n align-items: baseline;\r\n padding: 10px 0px;\r\n\r\n .image-wrapper {\r\n background-color: ${getColor('white')};\r\n width: 133px;\r\n min-height: 145px;\r\n justify-self: center;\r\n }\r\n\r\n .image {\r\n width: 100%;\r\n aspect-ratio: 1/1;\r\n object-fit: contain;\r\n }\r\n`;","import React, { useState } from 'react';\r\nimport { useTypedSelector } from '../../../Hooks/useTypedSelector';\r\nimport ProductCardLipscoreStars from '../../Lipscore/ProductCard.LipscoreStars';\r\nimport AddSuggestedProductToCartButton from '../Utils/SuggestedProductAddToCartButton';\r\nimport SuggestProductCardPrice from '../Utils/SuggestProductCardPrice';\r\nimport SuggestedProductCardImage from '../Utils/SuggestedProductCardImage';\r\nimport { SUGGESTED_PRODUCT_SECTION } from '../../../constants';\r\nimport { SuggestedProduct } from '../../../Types/SuggestedProduct';\r\nimport { SuggestedProductCardCheckoutRow } from '../Styles/SuggestedProductCard.styling';\r\n\r\n\r\ninterface SuggestedRowProductCardProps {\r\n product: SuggestedProduct;\r\n className?: string;\r\n}\r\n\r\nconst SuggestedProductCardCheckout = ({\r\n product,\r\n className = '',\r\n}: SuggestedRowProductCardProps) => {\r\n\r\n const { current: userInfo } = useTypedSelector(\r\n (state) => state.userInfo\r\n );\r\n const [email] = useState\r\n
\r\n\r\n \r\n {product.name}\r\n
\r\n\r\n \r\n \r\n {product.productCardDescription}\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n {suggestedProducts.map((product) => (\r\n \r\n \r\n ))}\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default SuggestedProductsSliderCheckout","import React, { useCallback, useState, useEffect, useMemo } from 'react';\r\nimport Icon from '../Icon';\r\nimport AdditionalOrderInfo from './Checkout.AdditionalOrderInfo';\r\nimport Cart from './Checkout.Cart';\r\nimport ConfirmOrder from './Checkout.ConfirmOrder';\r\nimport DeliveryMethods from './Checkout.DeliveryMethods';\r\nimport PaymentMethods from './Checkout.PaymentMethods';\r\nimport PrivateCustomerInfo from './Checkout.PrivateCustomerInfo';\r\nimport BusinessCustomerInfo from './Checkout.BusinessCustomerInfo';\r\nimport EmptyCart from './Checkout.EmptyCart';\r\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\r\nimport { StyledCheckout } from './styles/Checkout.styling';\r\nimport PaymentWidget from '../Payments/PaymentWidget';\r\nimport BlockArea from './Checkout.BlockArea';\r\nimport {\r\n PaymentIntegrationType,\r\n ShippingIntegrationType,\r\n} from '../../constants';\r\nimport { CartState } from '../../Reducers/Cart.reducer';\r\nimport CheckoutSection from './utils/Checkout.Section';\r\nimport CheckoutSectionContent from './utils/Checkout.SectionContent';\r\nimport SuggestedProductsSliderCheckout from '../SuggestedProducts/Checkout/SuggestedProductSlider.Checkout';\r\nimport { translate } from '../../Services/translation';\r\nimport { useDispatch } from 'react-redux';\r\nimport { loadSuggestedProducts } from '../../Actions/SuggestedProducts.action';\r\n\r\nconst Checkout = (cart: CartState) => {\r\n const dispatch = useDispatch();\r\n const { payload } = useTypedSelector((state) => state.checkout);\r\n const suggestedProducts = useTypedSelector((state) => state.suggestedProducts);\r\n const orderRows = cart.orderRows;\r\n const hasOrderRows = orderRows && Object.keys(orderRows).length > 0;\r\n const numProducts = hasOrderRows\r\n ? Object.values(orderRows).length\r\n : 0;\r\n const {\r\n message,\r\n isBusinessCustomer,\r\n paymentWidget,\r\n deliveryMethods,\r\n selectedDeliveryMethod,\r\n selectedPaymentMethod,\r\n paymentMethods,\r\n } = payload;\r\n\r\n const [headerBlockElements, setHeaderBlockElements] = useState\r\n {message && (\r\n
\r\n {footerBlockElements && (\r\n \r\n
\r\n )}\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {suggestedProductSliderCheckout}\r\n \r\n
\r\n \r\n {!isBusinessCustomer && customerDetailsVisibility && (\r\n
\r\n {paymentWidget && paymentWidgetVisibility && (\r\n \r\n
\r\n )}\r\n {value}
\r\n \r\n {filters?.length > 0\r\n ? filters.map((filter, idx) => (\r\n \r\n MAX_FILTERS_BEFORE_SHOW_MORE\r\n }\r\n />\r\n \r\n ))\r\n : null}\r\n
\r\n );\r\n};\r\n\r\nexport default ProductFiltering;\r\n","import {\r\n OVERLAY_ADD_OVERLAY,\r\n OVERLAY_CLOSE_OVERLAY,\r\n OVERLAY_REMOVE_OVERLAY,\r\n OVERLAY_UPDATE_OVERLAY,\r\n} from '../constants';\r\n\r\nexport const addOverlay = (componentName, onOverlayClick) => ({\r\n type: OVERLAY_ADD_OVERLAY,\r\n payload: {\r\n componentName,\r\n onOverlayClick,\r\n },\r\n});\r\n\r\nexport const updateOverlay = (componentName, onOverlayClick) => ({\r\n type: OVERLAY_UPDATE_OVERLAY,\r\n payload: {\r\n componentName,\r\n onOverlayClick,\r\n },\r\n});\r\n\r\nexport const removeOverlay = (componentName) => ({\r\n type: OVERLAY_REMOVE_OVERLAY,\r\n payload: {\r\n componentName,\r\n },\r\n});\r\n\r\nexport const closeOverlay = () => ({\r\n type: OVERLAY_CLOSE_OVERLAY,\r\n payload: {\r\n activeOverlays: [],\r\n },\r\n});\r\n","import { breakpoint } from '../../../styling/mixins/breakpoints';\r\nimport styled from 'styled-components';\r\nimport { getColor } from '../../../styling/mixins/colors';\r\nimport { fontFamilyBold, text } from '../../../styling/mixins/typography';\r\nimport { header } from '../../../styling/mixins/typography';\r\n\r\nimport {\r\n alignCenter,\r\n displayFlex,\r\n flexColumn,\r\n justifyCenter,\r\n} from '../../../styling/utils/flex';\r\nimport Icon from '../../Icon';\r\n\r\ninterface StyledSideMenuProps {\r\n $from: string;\r\n $open: boolean;\r\n}\r\n\r\nexport const StyledSideMenu = styled.div{title}
}\r\n {components?.Content && (\r\nTODO
\r\n{translate('filter.categories')}
\r\n ) : null}\r\n {currentMenu == 'filters' ?{translate('filter.filter')}
: null}\r\n {currentMenu == 'sorting' ?{translate('filter.sort')}
: null}\r\n \r\n );\r\n\r\n const Content = () => (\r\n <>\r\n {currentMenu == 'categories' ?\r\n setCurrentMenu('filters')}\r\n >\r\n setCurrentMenu('sorting')}\r\n >\r\n
\r\n\r\n {ready && (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default FilterBar;\r\n","import React, { useState } from 'react';\r\nimport Icon from '../Icon';\r\nimport { translate } from '../../Services/translation';\r\nimport { post } from '../../Services/http';\r\nimport clsx from 'clsx';\r\nimport { dataLayerGtmSignUp } from '../../Services/Gtm.service';\r\n\r\ninterface SignInResponse {\r\n success: boolean;\r\n}\r\n\r\nexport const UspSign = () => {\r\n const [email, setEmail] = useState('');\r\n const [isErrorMessageVisible, setIsErrorMessageVisible] = useState(\r\n false\r\n );\r\n const [isSuccessMessageVisible, setIsSuccessMessageVisible] = useState(\r\n false\r\n );\r\n\r\n const handleTextChanged = (event) => {\r\n setEmail(event.target.value);\r\n };\r\n\r\n const handleSuccess = async (data: SignInResponse) => {\r\n if (data.success) {\r\n setIsSuccessMessageVisible(true);\r\n setEmail('');\r\n setTimeout(function () {\r\n setIsSuccessMessageVisible(false);\r\n }, 10000);\r\n } else {\r\n await handleError();\r\n }\r\n };\r\n\r\n const handleError = async () => {\r\n setIsErrorMessageVisible(true);\r\n setEmail('');\r\n setTimeout(function () {\r\n setIsErrorMessageVisible(false);\r\n }, 10000);\r\n };\r\n\r\n const signMail = () => {\r\n var optInModel = {\r\n Email: email,\r\n Source: 'NewsletterFooterWeb',\r\n };\r\n post('/api/mailchimp/optin', optInModel)\r\n .then((response) => response.json())\r\n .then((data) => {\r\n dataLayerGtmSignUp({ email: optInModel.Email })\r\n handleSuccess(data)\r\n })\r\n .catch(() => handleError());\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n {totalProductsCount}{' '}\r\n {translate('general.products').toLowerCase()}\r\n
\r\n \r\n
\r\n \r\n \r\n dispatch(setProductListingType(ProductListingType.Grid))\r\n }\r\n />\r\n \r\n dispatch(setProductListingType(ProductListingType.List))\r\n }\r\n />\r\n
\r\n {/*{productsPerLoadDropdownValues &&*/}\r\n {/* productsPerLoadDropdownValues.length > 0 && (*/}\r\n {/* */}\r\n {/* ({*/}\r\n {/* value: item.value,*/}\r\n {/* label: item.text,*/}\r\n {/* }))}*/}\r\n {/* selectedValue={*/}\r\n {/* productsPerLoadDropdownValues.find((s) => s.selected)?.value*/}\r\n {/* }*/}\r\n {/* onChange={onProductsPerLoadDropdownValuesChanged}*/}\r\n {/* size=\"small\"*/}\r\n {/* />*/}\r\n {/*
*/}\r\n {/* )}*/}\r\n {sortItems && (\r\n \r\n ({\r\n value: item.query,\r\n label: item.name,\r\n }))}\r\n selectedValue={sortItems.find((s) => s.selected)?.query}\r\n onChange={onSortingChanged}\r\n size=\"small\"\r\n />\r\n
\r\n )}\r\n \r\n \r\n {translate('general.register')}\r\n \r\n\r\n {isErrorMessageVisible && (\r\n
\r\n );\r\n};\r\n","import React from 'react';\r\nimport Icon from '../Icon';\r\nimport { UspSign } from './FooterSign';\r\n\r\ninterface UspItemProps {\r\n text: string;\r\n}\r\n\r\nconst UspItem = ({ text }: UspItemProps) => {\r\n return (\r\n \r\n
\r\n )}\r\n\r\n {isSuccessMessageVisible && (\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport const Usp = ({ header, lines }: FooterUsp) => {\r\n const items = lines.map((line, idx) => {\r\n return \r\n
\r\n );\r\n};\r\n","import React, { useState } from 'react';\r\nimport Icon from '../Icon';\r\nimport clsx from 'clsx';\r\n\r\ninterface MenuContentProps {\r\n links: Link[];\r\n isHidden: boolean;\r\n open: boolean;\r\n}\r\n\r\nconst MenuContent = ({ links, isHidden, open }: MenuContentProps) => {\r\n const elements = links.map((item, idx) => {\r\n return (\r\n \r\n
\r\n \r\n {header}\r\n
\r\n \r\n
\r\n \r\n {items}\r\n
\r\n \r\n
\r\n - \r\n {elements}\r\n
\r\n \r\n \r\n {menu.sectionTitle}\r\n
\r\n );\r\n};\r\n","import React from 'react';\r\n\r\nconst BannerItem = ({\r\n title,\r\n subTitle,\r\n url,\r\n imageUrl,\r\n imageAlt,\r\n}: FooterBannerIconItem) => {\r\n return (\r\n \r\n 
\r\n \r\n {subTitle}\r\n \r\n )}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport const Banner = ({\r\n title,\r\n subTitle,\r\n items,\r\n imageUrl,\r\n}: FooterBanner) => {\r\n const bannerItems = items.map((item, idx) => {\r\n return \r\n
\r\n )}\r\n {url && (\r\n {title}
\r\n {!url && (\r\n {title}
\r\n\r\n {subTitle}\r\n
\r\n \r\n {bannerItems}\r\n
\r\n \r\n );\r\n};\r\n","import React from 'react';\r\n\r\nexport const Socials = ({ title, items }: FooterSocials) => {\r\n const socials = items.map((item, idx) => {\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n","import React from 'react';\r\nimport { LinkMenu } from './FooterLinkMenu';\r\nimport { Banner } from './FooterBanner';\r\nimport { Socials } from './FooterSocials';\r\n\r\ninterface MenusProps {\r\n banner: FooterBanner;\r\n socials: FooterSocials;\r\n firstMenu: FooterSection | undefined;\r\n secondMenu: FooterSection | undefined;\r\n}\r\n\r\nexport const Menus = ({\r\n banner,\r\n socials,\r\n firstMenu,\r\n secondMenu,\r\n}: MenusProps) => {\r\n return (\r\n {title}
\r\n{socials}
\r\n \r\n
\r\n );\r\n};\r\n","import React from 'react';\r\n\r\nexport const TopImage = ({\r\n footerTopImageUrl,\r\n footerTopImageAlt,\r\n}: FooterTop) => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n","import React from 'react';\r\n\r\ninterface FooterLogoProps {\r\n imageUrl: string;\r\n imageAlt: string;\r\n}\r\n\r\nconst FooterLogo = ({ imageUrl, imageAlt }: FooterLogoProps) => {\r\n return (\r\n \r\n {logos}\r\n
\r\n );\r\n};\r\n\r\nexport const Payments = ({\r\n imageUrl,\r\n imageAlt,\r\n items,\r\n}: FooterPaymentAndDelivery) => {\r\n return (\r\n \r\n
\r\n );\r\n};\r\n","import React from 'react';\r\n// import { Payments } from './FooterPayments';\r\nimport { Usp } from './FooterUsp';\r\nimport { Menus } from './FooterMenus';\r\nimport { TopImage } from './FooterTopImage';\r\nimport { Payments } from './FooterPayments';\r\n\r\nconst Footer = (props: FooterProps) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Footer;\r\n","import {\r\n LOGIN_SET_IS_LOADING,\r\n LOGIN_SET_ORGANIZATIONS,\r\n LOGIN_SET_USERNAME_PASSWORD,\r\n LOGIN_SET_MODAL_OPEN,\r\n LOGIN_SET_LOGIN_MODE,\r\n LOGIN_ERROR,\r\n LOGIN_SET_REDIRECT_URL,\r\n LOGIN_SET_MAGIC_LINK_MODEL,\r\n} from '../constants';\r\nimport { RootState } from '../reducers';\r\nimport { post } from '../Services/http';\r\nimport { translate } from '../Services/translation';\r\nimport LoginMode from '../Types/LoginMode';\r\nimport LoginOrganization from '../Types/LoginOrganization';\r\nimport LoginResponse from '../Types/LoginResponse';\r\nimport { MagicLinkModel } from '../Types/MagicLinkModel';\r\n\r\nexport const performLogin = (username: string, password: string) => (\r\n dispatch\r\n) => {\r\n dispatch(setLoginFormLoading(true));\r\n const redirectUrl = new URLSearchParams(location.search.toLowerCase()).get(\r\n 'redirecturl'\r\n );\r\n\r\n post(`/api/login${redirectUrl ? `?redirectUrl=${redirectUrl}` : ''}`, {\r\n username,\r\n password,\r\n redirectUrl,\r\n })\r\n .then((res) => res.json())\r\n .then((response: LoginResponse) => dispatch(handleLoginResponse(response)))\r\n .catch((err) => dispatch(handleErrorResponse(err)));\r\n};\r\n\r\nexport const selectOrganization = (selectedOrganizationId: string) => (\r\n dispatch,\r\n getState: () => RootState\r\n) => {\r\n dispatch(setLoginFormLoading(true));\r\n const redirectUrl = getState().login.redirectUrl;\r\n post(\r\n `/api/login/organizations/${selectedOrganizationId}${\r\n redirectUrl ? `?redirectUrl=${redirectUrl}` : ''\r\n }`,\r\n {}\r\n )\r\n .then((res) => res.json())\r\n .then((response: LoginResponse) => {\r\n dispatch(onError(response.error));\r\n if (response.success) {\r\n onSuccessfulLogin(response);\r\n } else {\r\n dispatch(setLoginFormLoading(false));\r\n }\r\n })\r\n .catch((err) => dispatch(handleErrorResponse(err)));\r\n};\r\n\r\nexport const submitChangePassword = (\r\n username,\r\n oldPassword,\r\n newPassword,\r\n passwordConfirmation\r\n) => (dispatch, getState: () => RootState) => {\r\n if (newPassword !== passwordConfirmation) {\r\n dispatch(onError(translate('login.password-mismatch')));\r\n return;\r\n }\r\n\r\n const { redirectUrl, magicLinkModel } = getState().login;\r\n dispatch(setLoginFormLoading(true));\r\n post(\r\n `/api/login/changepassword${\r\n redirectUrl ? `?redirectUrl=${redirectUrl}` : ''\r\n }`,\r\n {\r\n username,\r\n oldPassword,\r\n newPassword,\r\n magicLinkModel,\r\n }\r\n )\r\n .then((res) => res.json())\r\n .then((response: LoginResponse) => {\r\n if (response.success) {\r\n dispatch(handleLoginResponse(response));\r\n } else {\r\n dispatch(onError(response.error));\r\n dispatch(setLoginFormLoading(false));\r\n }\r\n })\r\n .catch((err) => dispatch(handleErrorResponse(err)));\r\n};\r\n\r\nexport const submitForgotPassword = (username: string): any => (\r\n dispatch\r\n): Promise\r\n
\r\n {translate('login.change-password')}
\r\n \r\n\r\n {!magicLinkModel ? (\r\n translate('login.forgot-password')\r\n ) : (\r\n <>{translate('general.loading')}...\r\n )}\r\n
\r\n {!isSuccessful && !magicLinkModel && (\r\n <>\r\n \r\n\r\n dispatch(setLoginMode(LoginMode.Login))}\r\n disabled={isLoading}\r\n btnType=\"clear\"\r\n btnSize=\"large\"\r\n >\r\n {!isLoading && translate('general.back')}\r\n {isLoading && translate('general.loading')}\r\n \r\n
\r\n \r\n )}\r\n {isSuccessful && (\r\n <>\r\n \r\n {translate('login.forgot-password.success')}\r\n
\r\n\r\n dispatch(setLoginMode(LoginMode.Login))}\r\n btnType=\"clear\"\r\n btnSize=\"large\"\r\n >\r\n {translate('general.back')}\r\n \r\n
\r\n \r\n )}\r\n {translate('general.login')}
\r\n\r\n\r\n\r\n {registerUserUrl && registerUserUrl != '' &&\r\n window.location.href = registerUserUrl}\r\n disabled={isLoading}\r\n className=\"submit\"\r\n >\r\n {translate('login.opprett-ny-konto')}\r\n \r\n }\r\n\r\n
\r\n {translate('login.choose-organization')}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {product.name}\r\n
\r\n \r\n \r\n {product.productCardDescription}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {product.name}\r\n {product.productCardDescription}\r\n
\r\n \r\n (swiperRef.current = swiper)}\r\n onSlideChange={handleSlideChange}\r\n initialSlide={activeIndex}\r\n\r\n pagination={false}\r\n navigation={true}\r\n modules={[Navigation, Autoplay]}\r\n lazy={true}\r\n autoplay={sliderIntervalInSec ? { delay: sliderIntervalInSec * 1000 } : false}\r\n >\r\n {suggestedProducts.map((product) => (\r\n \r\n {breakpoint === \"sm\" ?\r\n \r\n ))}\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default SuggestedProductsSlider","import React from 'react';\r\nimport { useMemo } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { setShowMiniCart, update } from '../../Actions/Cart.action';\r\nimport { translate } from '../../Services/translation';\r\nimport SideMenu from '../SideMenu/SideMenu';\r\nimport OrderRowProductCard from '../OrderRowProductCard/OrderRowProductCard';\r\nimport Icon from '../Icon';\r\nimport styled, { createGlobalStyle } from 'styled-components';\r\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\r\nimport {\r\n alignCenter,\r\n displayFlex,\r\n flex1,\r\n spaceBetween,\r\n} from '../../styling/utils/flex';\r\nimport { StyledSideMenuContent } from '../SideMenu/styles/SideMenu.styling';\r\nimport Button from '../Button';\r\nimport { breakpoint } from '../../styling/mixins/breakpoints';\r\nimport { getColor } from '../../styling/mixins/colors';\r\nimport { fontFamilyBold, text } from '../../styling/mixins/typography';\r\nimport EditorString from '../EditorString/EditorString';\r\nimport ExpressCheckoutButton from '../ExpressCheckout/ExpressCheckoutButton';\r\nimport { initExpressCheckoutFromCart } from '../../utils/vippsUtils';\r\nimport SuggestedProductsSlider from '../SuggestedProducts/MiniCart/SuggestedProductSlider.MiniCart';\r\n\r\ninterface StyledMiniCartSideMenuProps {\r\n $empty: boolean;\r\n $hasSuggestedProducts: boolean;\r\n}\r\n\r\nconst MiniCart = () => {\r\n const dispatch = useDispatch();\r\n\r\n const showMiniCart = useTypedSelector((state) => state.cart.showMiniCart);\r\n const orderRows = useTypedSelector((state) => state.cart.orderRows);\r\n const emptyCartLink = useTypedSelector((state) => state.cart.emptyCartLink);\r\n const emptyCartText = useTypedSelector((state) => state.cart.emptyCartText);\r\n const emptyCartUsps = useTypedSelector((state) => state.cart.emptyCartUsps);\r\n const orderTotal = useTypedSelector((state) => state.cart.orderTotal);\r\n const checkoutUrl = useTypedSelector((state) => state.cart.checkoutUrl);\r\n const errors = useTypedSelector((state) => state.cart.errors);\r\n const expressCheckoutEnabled = useTypedSelector((state) => state.cart.expressCheckoutEnabled);\r\n const suggestedProducts = useTypedSelector((state) => state.suggestedProducts)\r\n\r\n const hasOrderRows = useMemo(() => orderRows?.length > 0, [orderRows]);\r\n const hasSuggestedProducts = useMemo(() => suggestedProducts.products.length > 0, [suggestedProducts]);\r\n\r\n const userInfo = useTypedSelector((state) => state.userInfo);\r\n const isBusinessCustomer = userInfo?.current?.isBusinessCustomer;\r\n const quantity = useMemo(\r\n () => orderRows.reduce((prev, current) => prev + current.quantity, 0),\r\n [orderRows]\r\n );\r\n\r\n const closeMiniCart = () => dispatch(setShowMiniCart(false));\r\n const Header = () => (\r\n \r\n {translate('general.cart')} {quantity > 0 ? `(${quantity})` : ''}\r\n
\r\n\r\n
\r\n \r\n {translate('general.total')}
\r\n\r\n {orderTotal}{' '}\r\n {isBusinessCustomer && (\r\n \r\n {translate('cart.price-without-vat')}\r\n \r\n )}\r\n
\r\n\r\n
\r\n \r\n {usp.title &&
\r\n {usp.title}
}\r\n {usp.description && {errors['general'][0]}
\r\n ), [errors])\r\n\r\n\r\n const Content = () => (\r\n\r\n \r\n {userInfo?.currentOrganizationName ??\r\n translate('mypage.site.title')}\r\n \r\n
\r\n \r\n {userInfo?.firstName} {userInfo?.lastName}\r\n
\r\n- \r\n {navigation.map((option) => (\r\n
{err}
),\r\n [errors]\r\n );\r\n\r\n useEffect(() => {\r\n if (errors['general']?.length || !!successMessage) {\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n }\r\n }, [errors, successMessage]);\r\n\r\n return (\r\n{translate('mypage.info.title')}
\r\n\r\n
\r\n {hasErrors('general') ? (\r\n \r\n
\r\n \r\n {translate('orderlist.column.ordernumber')}: {order.orderNumber}\r\n
\r\n {showTrackingNumber && (\r\n\r\n {translate('orderlist.column.trackingnumber')}:{' '}\r\n {order.shipments.map((shipment, index) => (\r\n \r\n {shipment.trackingLink ? (\r\n
\r\n onClick && onClick(order)}\r\n className=\"btn--read-more\"\r\n >\r\n {translate('orderlist.column.readmore')}\r\n \r\n
\r\n \r\n
\r\n \r\n {translate('orderlist.column.quantity')}\r\n
\r\n{order.orderItemsCount}
\r\n\r\n
\r\n \r\n {translate('orderlist.column.grandtotal')}\r\n
\r\n{order.orderTotalInclVat}
\r\n\r\n
\r\n \r\n {translate('orderlist.column.orderdate')}\r\n
\r\n{order.placedDate}
\r\n\r\n
\r\n \r\n {translate('orderlist.column.status')}\r\n
\r\n{order.status}
\r\n\r\n {[...Array(cells - 1)].map((e, index) => (\r\n
\r\n \r\n \r\n \r\n
\r\n ))}\r\n {translate('mypage.order.title')}
\r\n\r\n
\r\n - \r\n
- \r\n
\r\n \r\n {translate('orderdetail.grandtotal')}\r\n \r\n \r\n {translate('orderdetail.trackingnumber')}\r\n \r\n )}\r\n
\r\n \r\n {translate('general.ordernumber')}\r\n
\r\n\r\n {translate('general.quantity')}\r\n
\r\n\r\n {translate('orderdetail.orderdate')}\r\n
\r\n {showTrackingNumber && (\r\n\r\n {translate('orderdetail.orderstatus')}\r\n
\r\n\r\n
\r\n )}\r\n {translate('mypage.order.no-orders')}
\r\n\r\n onPageIndexChanged(index)}\r\n />\r\n
\r\n \r\n \r\n {product.name}\r\n \r\n \r\n {translate('product.articleno')}: {product.articleNumber}\r\n \r\n {product.extraInfo &&\r\n product.extraInfo.items.map((item) => (\r\n \r\n {item.key}: {item.value}\r\n \r\n ))}\r\n \r\n {translate('product.quantity')}: {product.quantityString}\r\n \r\n \r\n {translate('product.total')}: {product.totalPrice}\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n ) : (\r\n {confirmationTitle}
\r\n\r\n \r\n {translate('general.ordernumber')}:\r\n {order.externalOrderID}\r\n \r\n \r\n {translate('orderdetail.orderdate')}:\r\n {order.orderDate}\r\n \r\n
\r\n {confirmationText?.value && (\r\n \r\n
\r\n )}\r\n \r\n {translate('general.ordernumber')}: {order.externalOrderID}\r\n
\r\n\r\n \r\n {translate('orderdetail.orderdate')}:\r\n {order.orderDate}\r\n \r\n \r\n {translate('orderdetail.orderstatus')}:\r\n {order.status}\r\n \r\n
\r\n \r\n {order.orderRows.map((product) => (\r\n
\r\n \r\n
\r\n \r\n {translate('checkout.order.sum')}\r\n {order.orderTotalWithVat}\r\n
\r\n {order.orderTotalDiscountAmount && (\r\n \r\n {translate('checkout.order.saved')}\r\n {order.orderTotalDiscountAmount}\r\n
\r\n )}\r\n \r\n {translate('checkout.order.shipping')}\r\n {order.orderTotalDeliveryCost}\r\n
\r\n {order.orderTotalFee && (\r\n \r\n {translate('checkout.order.fee')}\r\n {order.orderTotalFee}\r\n
\r\n )}\r\n \r\n {translate('orderdetail.grandtotal')}\r\n {order.orderGrandTotal}\r\n
\r\n \r\n {translate('checkout.order.vat')}\r\n {order.orderTotalVat}\r\n
\r\n \r\n {deliveryAddress && (\r\n
\r\n {isConfirmation && confirmationExtraText?.value && (\r\n \r\n \r\n {translate('orderdetail.deliveryaddress')}\r\n \r\n
\r\n )}\r\n {order.billingAddress && (\r\n \r\n \r\n {translate('orderdetail.billingadress')}\r\n \r\n
\r\n )}\r\n \r\n \r\n {translate('orderdetail.paymentmethod')}\r\n \r\n {order.paymentMethod}\r\n
\r\n \r\n \r\n {translate('orderdetail.deliverymethod')}\r\n \r\n {order.deliveries && order.deliveries.length > 0 ? order.deliveries[0].deliveryMethodTitle : order.deliveryMethod}\r\n
\r\n {order?.comments && order.comments != '' && (\r\n \r\n \r\n {translate('checkout.order.message')}\r\n \r\n {order.comments}\r\n
\r\n )}\r\n \r\n {\r\n dispatch(setError({ general: [] }));\r\n navigate(-1);\r\n }}\r\n >\r\n
\r\n {generalError && \r\n \r\n \r\n
\r\n {generalError}
}\r\n {order ?\r\n {person.firstName} {person.lastName}\r\n
\r\n\r\n
\r\n \r\n
\r\n {translate('mypage.person.email')}:
\r\n{person.email}
\r\n\r\n
\r\n {translate('mypage.person.phone')}:
\r\n{person.phone}
\r\n\r\n
\r\n {person.role !== 'Admin' && (\r\n {translate('mypage.person.role')}:
\r\n{person.role}
\r\n\r\n navigate(`edit/${person.systemId}`)}\r\n >\r\n {\r\n dispatch(removeUser(person.systemId));\r\n }}\r\n >\r\n
\r\n )}\r\n \r\n {person.firstName} {person.lastName}\r\n
\r\n{person.email}
\r\n{person.phone}
\r\n{person.role}
\r\n {person.role !== 'Admin' && (\r\n\r\n navigate(`edit/${person.systemId}`)}\r\n >\r\n {\r\n dispatch(removeUser(person.systemId));\r\n }}\r\n >\r\n
\r\n )}\r\n {translate('mypage.person.title')}
\r\n\r\n
\r\n - \r\n
- \r\n
\r\n
\r\n {translate('mypage.person.name')}
\r\n{translate('mypage.person.email')}
\r\n{translate('mypage.person.phone')}
\r\n{translate('mypage.person.role')}
\r\n{translate('mypage.person.adduser')}
\r\n \r\n \r\n\r\n \r\n \r\n
\r\n {translate('mypage.person.edituser')}
\r\n \r\n \r\n\r\n submitForm()}\r\n disabled={isLoading}\r\n >\r\n {translate('general.save')}\r\n \r\n \r\n
\r\n {address.address}
\r\n{address.zipCode}
\r\n{address.city}
\r\n{address.country}
\r\n\r\n navigate(`edit/${address.systemId}`)}\r\n >\r\n {\r\n dispatch(removeAddress(address.systemId));\r\n }}\r\n >\r\n
\r\n \r\n
\r\n {address.address}
\r\n\r\n {address.zipCode} {address.city}\r\n
\r\n{address.country}
\r\n\r\n navigate(`edit/${address.systemId}`)}\r\n >\r\n {\r\n dispatch(removeAddress(address.systemId));\r\n }}\r\n >\r\n
\r\n {translate('mypage.address.title')}
\r\n\r\n
\r\n - \r\n
- \r\n
\r\n
\r\n {translate('mypage.address.address')}
\r\n{translate('mypage.address.zipcode')}
\r\n{translate('mypage.address.city')}
\r\n{translate('mypage.address.country')}
\r\n{translate('mypage.address.addaddress')}
\r\n \r\n \r\n{translate('mypage.address.editaddress')}
\r\n \r\n\r\n \r\n{translate('mypage.frontpage.title')}
\r\n {blockContent &&\r\n \r\n \r\n ) : null}\r\n {successMessage ? (\r\n \r\n \r\n ) : null}\r\n\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default MyPagesMyConsents;\r\n\r\n\r\nconst SubTitle = ({ value }) => {\r\n return (\r\n {translate('mypage.consents.title')}
\r\n\r\n {introText && introText.value && (\r\n\r\n
\r\n )}\r\n\r\n {hasErrors('general') ? (\r\n {value}
\r\n )\r\n}\r\n\r\nconst Paragraph = ({ value }) => {\r\n return (\r\n{value}
\r\n )\r\n}\r\n\r\nconst CheckboxWrapper = ({ children }) => {\r\n return (\r\n\r\n {children}\r\n
\r\n )\r\n}\r\n\r\nconst ContentSection = ({ children }) => {\r\n return (\r\n \r\n {children}\r\n
\r\n )\r\n}","import React, { useEffect, useMemo, useState } from 'react';\r\nimport { HashRouter, Route, Routes } from 'react-router-dom';\r\nimport MyPagesMobileMenu from './MyPagesMobileMenu';\r\nimport MyPagesDesktopMenu from './MyPagesDesktopMenu';\r\nimport MyPagesSettings from './MyPagesSettings';\r\nimport MyPagesOrderHistory from './MyPagesOrderHistory';\r\nimport MyPagesOrderHistoryOmnium from './MyPagesOrderHistoryOmnium';\r\nimport MyPagesOrderDetail from './MyPagesOrderDetail';\r\nimport MyPagesUsers from './MyPagesUsers';\r\nimport MyPagesAddUser from './MyPagesAddUser';\r\nimport MyPagesEditUser from './MyPagesEditUser';\r\nimport MyPagesAddresses from './MyPagesAddresses';\r\nimport MyPagesAddAddress from './MyPagesAddAddress';\r\nimport MyPagesEditAddress from './MyPagesEditAddress';\r\nimport { translate } from '../../Services/translation';\r\nimport { breakpoint } from '../../styling/mixins/breakpoints';\r\nimport styled, { css } from 'styled-components';\r\nimport { getColor } from '../../styling/mixins/colors';\r\nimport { cells, section } from '../../styling/utils/grid';\r\nimport ScrollToTop from './ui/ScrollToTop';\r\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\r\nimport MyPagesFrontPage from './MyPagesFrontPage';\r\nimport MyPagesMyConsents from './MyPagesMyConsents';\r\n\r\nconst StyledMyPagesContainer = styled.section<{ customProp: boolean }>`\r\n ${section}\r\n padding-top: 1.6rem;\r\n padding-bottom: 2.4rem;\r\n color: ${getColor('grey', 900)};\r\n min-height: 72vh;\r\n\r\n ${(props) => css`\r\n ${props.customProp\r\n ? css`\r\n ${breakpoint('xlarge')} {\r\n display: grid;\r\n ${cells(4)}\r\n padding-top: 4rem;\r\n padding-bottom: 4.8rem;\r\n gap: 4.8rem;\r\n }\r\n `\r\n : css`\r\n ${breakpoint('large')} {\r\n display: grid;\r\n ${cells(4)}\r\n padding-top: 4rem;\r\n padding-bottom: 4.8rem;\r\n gap: 4.8rem;\r\n }\r\n `}\r\n `};\r\n`;\r\n\r\nconst navigation = [\r\n {\r\n name: translate('mypage.info.title'),\r\n url: '/',\r\n isB2bOnly: false,\r\n hideForCustomerType: ''\r\n },\r\n {\r\n name: translate('mypage.order.title'),\r\n url: '/orders',\r\n isB2bOnly: false,\r\n hideForCustomerType: ''\r\n },\r\n {\r\n name: translate('mypage.frontpage.title'),\r\n url: '/club',\r\n isB2bOnly: false,\r\n hideForCustomerType: ''\r\n },\r\n {\r\n name: translate('mypage.consents.title'),\r\n url: '/consents',\r\n isB2bOnly: false,\r\n hideForCustomerType: 'b2b'\r\n },\r\n {\r\n name: translate('mypage.person.title'),\r\n url: '/users',\r\n isB2bOnly: true,\r\n hideForCustomerType: 'b2c'\r\n },\r\n {\r\n name: translate('mypage.address.addresses'),\r\n url: '/addresses',\r\n isB2bOnly: true,\r\n hideForCustomerType: 'b2c'\r\n },\r\n];\r\n\r\nconst MyPagesContainer = (props) => {\r\n const [\r\n myPagesStartPageBlockElements,\r\n setMyPagesStartPageBlockElements,\r\n ] = useState\r\n 0 && 'w-[65%]')}\r\n >\r\n \r\n \r\n {translate('second.level.show.all.text')\r\n .replace('{MENU}', activeSubMegaMenuLink.name)\r\n .replace('{SECOND-MENU}', link.name) ?? <> }\r\n \r\n \r\n
\r\n )}\r\n {blocks.length > 0 && (\r\n \r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default MegaMenu;\r\n","import React from 'react';\r\nimport MegaMenu from '../MegaMenu/MegaMenu';\r\nimport clsx from 'clsx';\r\n\r\ninterface NavigationLinkProps {\r\n link: any;\r\n isActive: boolean;\r\n onLinkHover: (e: React.MouseEvent\r\n {link.links?.length > 0 && (\r\n \r\n {\r\n if (subLink.links?.length > 0) {\r\n onSubLinkHover(subLink);\r\n }\r\n }}\r\n onMouseOver={() => onSubLinkHover(subLink)}\r\n >\r\n
\r\n\r\n {activeSubMegaMenuLink?.links?.length > 0 && (\r\n \r\n {translate('first.level.show.all.text').replace(\r\n '{MENU}',\r\n link.name\r\n ) ?? <> }\r\n
\r\n \r\n )}\r\n {link.links?.length > 0 &&\r\n link.links\r\n .filter((link) => link.extraInfo != 'mobile')\r\n .map((subLink, idx) => (\r\n\r\n {subLink.name ?? <> }\r\n
\r\n {subLink.links?.length > 0 && (\r\n\r\n {activeSubMegaMenuLink.links\r\n .filter(\r\n (subSubLink) =>\r\n subSubLink.name != '' &&\r\n subSubLink.extraInfo != 'mobile'\r\n )\r\n .map((subSubLink, idx) => (\r\n \r\n {subSubLink.name}\r\n \r\n ))}\r\n
\r\n \r\n
\r\n ) : null;\r\n};\r\n\r\nexport default Navigation;\r\n","import { get } from '../Services/http';\r\nimport { catchError } from './Error.action';\r\nimport { NAVIGATION_LOAD_ERROR, NAVIGATION_RECEIVE } from '../constants';\r\n\r\nexport const load = () => (dispatch, getState) => {\r\n return get('/api/navigation')\r\n .then((response) => response.json())\r\n .then((data) => dispatch(receive(data)))\r\n .catch((ex) => dispatch(catchError(ex, (error) => loadError(error))));\r\n};\r\n\r\nexport const loadError = (error) => ({\r\n type: NAVIGATION_LOAD_ERROR,\r\n payload: {\r\n error,\r\n },\r\n});\r\n\r\nexport const receive = (data) => ({\r\n type: NAVIGATION_RECEIVE,\r\n payload: {\r\n contentLinks: data.contentLinks,\r\n mobileMenuLinks: data.MobileMenuLinks\r\n },\r\n});\r\n\r\nexport const toggleMobileMenu = (value) => ({\r\n type: NAVIGATION_RECEIVE,\r\n payload: {\r\n mobileMenuOpen: value,\r\n },\r\n});\r\n\r\nexport const setMobileMenuCurrentCategory = (mobileMenuCurrentCategory) => ({\r\n type: NAVIGATION_RECEIVE,\r\n payload: {\r\n mobileMenuCurrentCategory\r\n },\r\n});","import React from 'react';\r\nimport Icon from '../../Icon';\r\nimport styled from 'styled-components';\r\nimport { text, fontFamilyBold } from '../../../styling/mixins/typography';\r\nimport { getColor } from '../../../styling/mixins/colors';\r\n\r\nconst StyledMenuItem = styled.li`\r\n display: flex;\r\n justify-content: space-between;\r\n ${text('small')};\r\n ${fontFamilyBold};\r\n line-height: 2.4rem;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n\r\n &:not(:last-child) {\r\n border-bottom: 1px solid ${getColor('grey', 300)};\r\n }\r\n\r\n a {\r\n padding: 1.6rem;\r\n color: ${getColor('grey', 900)};\r\n flex: 1;\r\n cursor: pointer;\r\n }\r\n`;\r\n\r\nconst StyledIconWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n padding: 1.5rem;\r\n cursor: pointer;\r\n`;\r\n\r\nconst StyledIcon = styled(Icon)`\r\n font-size: 2.4rem;\r\n color: ${getColor('grey', 900)};\r\n`;\r\n\r\nconst MobileNavigationItem = ({ link, onLinkClick }) => {\r\n return (\r\n \r\n {contentLinks.map((link) => (\r\n !link.mobileOnly && (\r\n onLinkHover(link)}\r\n onMouseLeaveLink={onMouseLeaveLink}\r\n onMegaMenuClose={onMegaMenuClose}\r\n blocks={blockElements?.filter(\r\n (b) =>\r\n link.blockSystemIds.indexOf(b.dataset['litiumBlockId']) !=\r\n -1\r\n )}\r\n />\r\n )\r\n ))}\r\n
\r\n \r\n {rightContentLinks?.map((link) => (\r\n !link.mobileOnly && (\r\n onLinkHover(link)}\r\n onMouseLeaveLink={onMouseLeaveLink}\r\n onMegaMenuClose={onMegaMenuClose}\r\n blocks={blockElements?.filter(\r\n (b) =>\r\n link.blockSystemIds.indexOf(b.dataset['litiumBlockId']) !=\r\n -1\r\n )}\r\n right={true}\r\n />\r\n )\r\n ))}\r\n
\r\n \r\n
\r\n {showLabel && (\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default ProgressBar;\r\n","import React, { forwardRef, useEffect, useState } from 'react';\r\nimport ProgressBar from '../ProgressBar/ProgressBar';\r\nimport { translate } from '../../Services/translation';\r\nimport clsx from 'clsx';\r\n\r\ninterface LoadMoreButtonAttributes {\r\n onClick: () => void;\r\n disabled?: boolean;\r\n count?: number;\r\n totalCount?: number;\r\n isLoading?: boolean;\r\n productsPerLoad: number;\r\n canLoadMore: boolean;\r\n}\r\n\r\nconst LoadMoreButton = forwardRef<\r\n HTMLDivElement,\r\n LoadMoreButtonAttributes\r\n>((props, wrapperRef) => {\r\n const {\r\n onClick,\r\n disabled = false,\r\n count,\r\n totalCount,\r\n isLoading = false,\r\n productsPerLoad,\r\n canLoadMore,\r\n } = props;\r\n\r\n const [crawlerCount, setCrawlerCount] = useState(\r\n count >= totalCount\r\n ? count\r\n : count + productsPerLoad < totalCount\r\n ? count + productsPerLoad\r\n : totalCount\r\n );\r\n\r\n useEffect(() => {\r\n if (count >= totalCount) {\r\n setCrawlerCount(count);\r\n } else {\r\n if (count + productsPerLoad < totalCount) {\r\n setCrawlerCount(count + productsPerLoad);\r\n } else {\r\n setCrawlerCount(totalCount);\r\n }\r\n }\r\n }, [count, productsPerLoad, totalCount]);\r\n\r\n return (\r\n \r\n {isModalOpen && (\r\n \r\n {\r\n e.stopPropagation();\r\n }}\r\n >\r\n \r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default BackInStockdModal;\r\n","import { post } from './http';\r\n\r\nexport const subcribeToBackInStock = async (articleNumber, email) => {\r\n return post('/api/backinstock', { articleNumber, email });\r\n};\r\n","import React, { useState } from 'react';\r\nimport { translate } from '../../Services/translation';\r\nimport Icon from '../Icon';\r\nimport QuantityInput from '../QuantityInput/QuantityInput';\r\nimport clsx from 'clsx';\r\n\r\ninterface BackInStockButtonProps {\r\n onButtonClick: () => void;\r\n}\r\n\r\nconst BackInStockButton: React.FC\r\n handleSubmit(e)}\r\n className=\"w-full flex flex-col gap-4\"\r\n >\r\n \r\n {translate('out-of-stock.modal-sendbutton')}\r\n \r\n \r\n
\r\n ) : (\r\n \r\n {size !== '' ? (\r\n \r\n {translate('out-of-stock.modal-storrelse')} {size}\r\n {' '}\r\n \r\n ) : (\r\n \r\n {translate('out-of-stock.modal-produkten')} {' '}\r\n \r\n )}\r\n {translate('out-of-stock.modal-header')}\r\n
\r\n \r\n {translate('out-of-stock.modal-text')}\r\n
\r\n\r\n {translate('out-of-stock.modal-mail')}\r\n
\r\n \r\n {error && (\r\n
\r\n {errorMessage}
\r\n )}\r\n \r\n \r\n {translate('out-of-stock.modal-privacypolicy')}\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n {translate('out-of-stock.modal-successheader')}\r\n
\r\n{translate('out-of-stock.modal-successmessage')}
\r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default BackInStockButton;\r\n","import React, { useEffect, useState } from 'react';\r\nimport styled from 'styled-components';\r\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\r\nimport { translate } from '../../Services/translation';\r\nimport BuyButton from '../BuyButton/BuyButton';\r\nimport VariantMultiPickerDropdown from '../VariantPicker/VariantMultiPicker.Dropdown';\r\nimport VariantPickerDropdown from '../VariantPicker/VariantPicker.Dropdown';\r\nimport { useDispatch } from 'react-redux';\r\nimport { setBuyButtonArticleNumber, setBuyButtonStockStatuses, setBuyButtonStockStatus } from '../../Actions/BuyButton.action';\r\nimport BackInStockdModal from '../BackInStock/BackInStockModal';\r\nimport BackInStockButton from '../BackInStock/BackInStockButton';\r\nimport ExpressCheckoutButton from '../ExpressCheckout/ExpressCheckoutButton';\r\nimport { get } from '../../Services/http';\r\n\r\nconst StyledVariantSelectBuyButtonContainer = styled.div`\r\n display: flex;\r\n justify-content: center;\r\n flex-direction: column;\r\n`;\r\n\r\nconst VariantSelectBuyButtonContainer = ({\r\n product,\r\n isCategoryPage,\r\n hideText,\r\n dropDownSize,\r\n isVariantListing,\r\n personalDataPagePointer,\r\n clickSource\r\n}) => {\r\n const GetInitialVariant = () => {\r\n return product.id;\r\n // if (product.hasQueryVariant) {\r\n // return product.id;\r\n // }\r\n // return '';\r\n };\r\n\r\n const [isModalOpen, setIsModalOpen] = useState(false);\r\n const [variantPickerOptions, setVariantPickerOptions] = useState(product.variantPickerOptions);\r\n const [expressCheckoutEnabled, setExpressCheckoutEnabled] = useState(false);\r\n\r\n useEffect(() => {\r\n get('/api/client-context/product/' + product.id)\r\n .then(res => res.json())\r\n .then((data) => {\r\n setVariantPickerOptions(data.variantPickerOptions);\r\n setExpressCheckoutEnabled(data.expressCheckoutEnabled);\r\n dispatch(setBuyButtonStockStatuses(data.stockStatuses));\r\n dispatch(setBuyButtonStockStatus(data.stockStatus));\r\n });\r\n }, [product.variantPickerOptions]);\r\n\r\n const handleButtonClick = () => {\r\n setIsModalOpen(!isModalOpen);\r\n };\r\n\r\n const CheckIfVariantIsInStock = () => {\r\n const options = variantPickerOptions?.options;\r\n if (options && Array.isArray(options)) {\r\n const matchingVariant = options.find(\r\n (x) => x?.variantId === selectedVariantId && x?.inStock\r\n );\r\n return matchingVariant ? true : false;\r\n }\r\n return product?.stockStatus?.inStock || false;\r\n };\r\n\r\n const GetSize = () => {\r\n const options = variantPickerOptions?.options;\r\n if (options && Array.isArray(options)) {\r\n const matchingVariant = options.find(\r\n (x) => x?.variantId === selectedVariantId\r\n );\r\n if (matchingVariant) {\r\n const { firstVariantValue, secondVariantValue } = matchingVariant;\r\n return (firstVariantValue ?? '') + (secondVariantValue ?? '');\r\n }\r\n }\r\n return '';\r\n };\r\n\r\n let dispatch = useDispatch();\r\n const [selectedVariantId, setSelectedVariantId] = useState(\r\n GetInitialVariant()\r\n );\r\n\r\n useEffect(() => {\r\n if (selectedVariantId) {\r\n dispatch(setBuyButtonArticleNumber(selectedVariantId));\r\n }\r\n }, [selectedVariantId])\r\n\r\n const [inStock, setInStock] = useState(CheckIfVariantIsInStock());\r\n const [size, setSize] = useState(GetSize());\r\n const userInfo = useTypedSelector((state) => state.userInfo);\r\n const isBusinessCustomer = userInfo?.current?.isBusinessCustomer;\r\n\r\n const onChange = (event) => {\r\n setSelectedVariantId(event.variantId);\r\n setInStock(event.inStock);\r\n setSize(event.firstVariantValue);\r\n if (event.articleNumber && !isCategoryPage) {\r\n var newurl =\r\n window.location.protocol +\r\n '//' +\r\n window.location.host +\r\n window.location.pathname +\r\n `?variant=${event.articleNumber}`;\r\n window.history.pushState({ path: newurl }, '', newurl);\r\n }\r\n };\r\n\r\n const GetLayout = (product, isBusinessCustomer, isCategoryPage) => {\r\n if (/*isBusinessCustomer != true &&*/ isCategoryPage) {\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ProductCardLandscape;\r\n","import React from 'react';\r\n\r\nconst LandscapeProductCardPlaceholder = () => {\r\n return (\r\n \r\n
\r\n \r\n {product.images && product.images.length > 0 && (\r\n \r\n
\r\n \r\n {product.tags && product.tags.length > 0 ? (\r\n \r\n {product.name}\r\n \r\n {product.productCardDescription && (\r\n
\r\n \r\n {product.tags.map((tag) => (\r\n \r\n {tag.name}\r\n \r\n ))}\r\n {product.discountPercantage && (\r\n \r\n {product.discountPercantage}\r\n \r\n )}\r\n {product.isNew && (\r\n \r\n {translate('product-tag.is-new')}\r\n \r\n )}\r\n
\r\n ) : (\r\n <>\r\n {(product.discountPercantage || product.isNew) && (\r\n \r\n {product.discountPercantage && (\r\n \r\n {product.discountPercantage}\r\n \r\n )}\r\n {product.isNew && (\r\n \r\n {translate('product-tag.is-new')}\r\n \r\n )}\r\n
\r\n )}\r\n \r\n )}\r\n \r\n {product.productCardDescription}\r\n
\r\n )}\r\n \r\n {product.lipscoreProduct?.productModel && (\r\n
\r\n \r\n {product.fromPrice.hasFromPrice ? (\r\n \r\n {translate('product-page.from-product-price')}\r\n \r\n ) : (\r\n ''\r\n )}\r\n {product.fromPrice.fromPrice.campaignPrice ? (\r\n
\r\n\r\n \r\n {product.fromPrice.fromPrice.formattedCampaignPrice}{' '}\r\n {isBusinessCustomer &&\r\n translate('product-card.without-vat')}{' '}\r\n \r\n {product.fromPrice.fromPrice.formattedPrice}{' '}\r\n \r\n
\r\n ) : (\r\n product.fromPrice.fromPrice.price && (\r\n \r\n {product.fromPrice.fromPrice.formattedPrice}{' '}\r\n {isBusinessCustomer &&\r\n translate('product-card.without-vat')}\r\n
\r\n )\r\n )}\r\n \r\n
\r\n \r\n {product.hasVariants ? (\r\n \r\n {product.stockStatus.inStock\r\n ? translate('product-listing.is-in-stock')\r\n : translate('product-listing.is-not-in-stock')}\r\n \r\n ) : (\r\n product.stockStatus.description\r\n )}\r\n
\r\n {product.colorRelationAmount != undefined &&\r\n product.colorRelationAmount > 1 && (\r\n \r\n {product.colorRelationAmount +\r\n ' ' +\r\n translate('product-card.colors')}\r\n
\r\n )}\r\n \r\n {product.hasVariants ? (\r\n \r\n {product.stockStatus.inStock\r\n ? translate('product-listing.is-in-stock')\r\n : translate('product-listing.is-not-in-stock')}\r\n \r\n ) : (\r\n product.stockStatus.description\r\n )}\r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default LandscapeProductCardPlaceholder;\r\n","import React from 'react';\r\n\r\nconst ProductCardPlaceholder = () => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ProductCardPlaceholder;\r\n","import { useEffect, useState } from 'react';\r\nimport useBreakpoint from './useBreakpoint';\r\n\r\nconst isMobileBreakpoint = (breakpoint?: string) => {\r\n switch (breakpoint) {\r\n case 'sm':\r\n case 'md':\r\n return true;\r\n default:\r\n return false;\r\n }\r\n};\r\n\r\nconst useIsMobile = () => {\r\n const currentBreakpoint = useBreakpoint();\r\n const [isMobile, setIsMobile] = useState(\r\n isMobileBreakpoint(currentBreakpoint)\r\n );\r\n\r\n useEffect(() => {\r\n setIsMobile(isMobileBreakpoint(currentBreakpoint));\r\n }, [currentBreakpoint]);\r\n\r\n return isMobile;\r\n};\r\n\r\nexport default useIsMobile;\r\n","import React, { useEffect, useCallback } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport {\r\n setProductListingType,\r\n setProductsPerRow,\r\n} from '../../Actions/ProductListing.action';\r\nimport useBreakpoint from '../../Hooks/useBreakpoint';\r\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\r\nimport useIsMobile from '../../Hooks/useIsMobile';\r\nimport { ProductListingType } from '../../Reducers/ProductListing.reducer';\r\n\r\nconst ProductListingResizeObserver = () => {\r\n const { productListingType } = useTypedSelector(\r\n (state) => state.productListing\r\n );\r\n\r\n const dispatch = useDispatch();\r\n\r\n const breakpoint = useBreakpoint();\r\n const isMedium = useIsMobile('medium');\r\n\r\n const getProductsPerRowForBreakpoint = useCallback(() => {\r\n switch (breakpoint) {\r\n case 'sm':\r\n return 2;\r\n case 'md':\r\n return 3;\r\n case 'lg':\r\n return 4;\r\n default:\r\n return 5;\r\n }\r\n }, [breakpoint]);\r\n\r\n useEffect(() => {\r\n switch (productListingType) {\r\n case ProductListingType.Grid:\r\n dispatch(setProductsPerRow(getProductsPerRowForBreakpoint()));\r\n return;\r\n case ProductListingType.List:\r\n dispatch(setProductsPerRow(1));\r\n return;\r\n case ProductListingType.SingleCard:\r\n if (isMedium) {\r\n dispatch(setProductsPerRow(1));\r\n } else {\r\n dispatch(setProductListingType(ProductListingType.List));\r\n }\r\n return;\r\n }\r\n }, [\r\n dispatch,\r\n getProductsPerRowForBreakpoint,\r\n productListingType,\r\n breakpoint,\r\n isMedium,\r\n ]);\r\n\r\n return null;\r\n};\r\n\r\nexport default ProductListingResizeObserver;\r\n","import clsx from 'clsx';\r\nimport React, {\r\n HTMLAttributes,\r\n useCallback,\r\n useEffect,\r\n useLayoutEffect,\r\n useMemo,\r\n useState,\r\n} from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport {\r\n AutoSizer,\r\n CellMeasurer,\r\n CellMeasurerCache,\r\n Index,\r\n InfiniteLoader,\r\n List,\r\n WindowScroller,\r\n} from 'react-virtualized';\r\nimport { queryProductFiltering } from '../../Actions/ProductFiltering.action';\r\nimport {\r\n addPlaceholderProducts,\r\n fetchProducts,\r\n setIsLoadingMore,\r\n setIsLoadingReverse,\r\n} from '../../Actions/ProductListing.action';\r\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\r\nimport { ProductListingType } from '../../Reducers/ProductListing.reducer';\r\nimport { pushEcommerce } from '../../Services/Gtm.service';\r\nimport { translate } from '../../Services/translation';\r\nimport LoadMoreButton from '../LoadMoreButton/LoadMoreButton';\r\nimport ProductCard from '../ProductCards/ProductCard';\r\nimport ProductCardLandscape from '../ProductCards/ProductCardLandscape';\r\nimport LandscapeProductCardPlaceholder from '../ProductCards/ProductCardLandscapePlaceholder';\r\nimport ProductCardPlaceholder from '../ProductCards/ProductCardPlaceholder';\r\nimport ProductListingResizeObserver from './ProductListingResizeObserver';\r\n\r\nconst PRODUCTS_PER_LOAD = 60;\r\nconst DEFAULT_ROW_HEIGHT = 400;\r\n\r\nconst cache = new CellMeasurerCache({\r\n defaultWidth: 150,\r\n minWidth: 70,\r\n defaultHeight: 400, // TODO denna bör ändras beroende på vilken typ av vy som används på listan\r\n fixedWidth: true,\r\n fixedHeight: false,\r\n});\r\n\r\nconst ProductListing = () => {\r\n const dispatch = useDispatch();\r\n\r\n /* Updates with delayToUpdate ms after resize.\r\n Prevents spamming of resize */\r\n useLayoutEffect(() => {\r\n var delay;\r\n function updateSize() {\r\n clearTimeout(delay);\r\n delay = setTimeout(() => {\r\n cache.clearAll();\r\n listRef?.recomputeRowHeights(0);\r\n }, 100);\r\n }\r\n\r\n window.addEventListener('resize', updateSize);\r\n updateSize();\r\n return () => window.removeEventListener('resize', updateSize);\r\n }, []);\r\n\r\n const {\r\n products,\r\n isLoadingMore,\r\n isLoadingReverse,\r\n totalProductsCount,\r\n productsPerRow = 5,\r\n canLoadMore,\r\n productListingType = ProductListingType.Grid,\r\n pageSize,\r\n gtmViewModel,\r\n } = useTypedSelector((state) => state.productListing);\r\n\r\n const [prevProducts, setPrevProducts] = useState(DEFAULT_ROW_HEIGHT);\r\n\r\n const [rowHeight, setRowHeight] = useState(400);\r\n\r\n const [ready, setReady] = useState(false);\r\n const rowCount = useMemo(\r\n () => Math.ceil(products.length / productsPerRow),\r\n [products.length, productsPerRow]\r\n );\r\n\r\n let listRef: List | null = null;\r\n\r\n const RowComponent = useCallback(\r\n ({ children, ...props }: HTMLAttributes\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {!ready && (\r\n \r\n {products.map((product, idx) =>\r\n product && ready ? (\r\n \r\n {({ height, isScrolling, onChildScroll, scrollTop }) => {\r\n return (\r\n \r\n {({ width }) => (\r\n \r\n {({ onRowsRendered, registerChild }) => (\r\n {\r\n if (ref) {\r\n registerChild(ref);\r\n if (\r\n productListingType ==\r\n ProductListingType.List\r\n )\r\n listRef = ref;\r\n }\r\n }}\r\n height={height}\r\n onRowsRendered={onRowsRendered}\r\n width={width}\r\n isScrolling={isScrolling}\r\n onScroll={onChildScroll}\r\n scrollTop={scrollTop}\r\n rowCount={rowCount}\r\n rowRenderer={rowRenderer}\r\n rowHeight={\r\n productListingType == ProductListingType.Grid\r\n ? rowHeight\r\n : cache.rowHeight\r\n }\r\n />\r\n )}\r\n \r\n )}\r\n \r\n );\r\n }}\r\n \r\n )}\r\n = totalProductsCount\r\n }\r\n isLoading={isLoadingMore}\r\n count={products.length}\r\n totalCount={totalProductsCount}\r\n productsPerLoad={PRODUCTS_PER_LOAD}\r\n canLoadMore={canLoadMore}\r\n />\r\n
\r\n ) : (\r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default ProductListing;\r\n","import React from 'react';\r\nimport styled from 'styled-components';\r\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\r\nimport { translate } from '../../Services/translation';\r\nimport { fontFamilyBold, header } from '../../styling/mixins/typography';\r\n\r\ninterface ProductListingTitleProps {\r\n name: string;\r\n}\r\n\r\nconst ProductListingTitle = styled.div`\r\n display: flex;\r\n gap: 1.6rem;\r\n & > span {\r\n ${header('h1')}\r\n ${fontFamilyBold};\r\n text-transform: uppercase;\r\n margin-bottom: 0.8rem;\r\n }\r\n`\r\n\r\nconst ProductListingTitleComponent = (category: ProductListingTitleProps) => {\r\n const filteredBrands = useTypedSelector((state) => {\r\n var selectedBrands = state.productFiltering.filters.find(x => x.id == \"Brand\")?.selectedOptions\r\n return selectedBrands\r\n });\r\n\r\n return (\r\n \r\n {translate('product-list.no-products-match-your-search')}\r\n
\r\n\r\n {showCloseButton && (\r\n onZoom(swiper.realIndex, scale)}\r\n pagination={{\r\n dynamicBullets: imageCount > 8 ? true : false,\r\n dynamicMainBullets: 3,\r\n }}\r\n >\r\n {images.map((img, idx) => (\r\n \r\n
\r\n \r\n setOpen(false)}\r\n className=\"w-10 h-10\"\r\n />\r\n
\r\n )}\r\n\r\n \r\n
\r\n )}\r\n {rendered && (\r\n <>\r\n \r\n 
\r\n
\r\n \r\n ))}\r\n \r\n \r\n
\r\n \r\n ))}\r\n \r\n \r\n )}\r\n {fullscreenOpen && (\r\n \r\n {price?.recommendedSalesPrice}\r\n
\r\n )}\r\n\r\n | {field.name} | \r\n{field.value} | \r\n
{activeTabContent}
\r\n \r\n {usp.title &&
\r\n {usp.title}
}\r\n {usp.description && \r\n {translate('product.articlenumber')}\r\n {variantArticleNumber\r\n ? variantArticleNumber\r\n : translate('product-page.please-select-variant')}\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default ProductPageVariantIdentifier;\r\n","import React from 'react';\r\nimport styled from 'styled-components';\r\nimport { breakpoint } from '../../styling/mixins/breakpoints';\r\nimport Product from '../../Types/Product';\r\nimport ProductCardLandscape from '../ProductCards/ProductCardLandscape';\r\n\r\ninterface ProductPageVariantListProps {\r\n variants: Product[];\r\n}\r\n\r\nconst StyledProductPageVariantList = styled.div`\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 0.8rem;\r\n margin-top: 1.6rem;\r\n ${breakpoint('medium')} {\r\n margin-top: 2.4rem;\r\n }\r\n`;\r\n\r\nconst ProductPageVariantList = ({ variants }: ProductPageVariantListProps) => {\r\n return (\r\n \r\n | {translate('product.gtin')} {variantGtin}\r\n
\r\n \r\n {title &&
\r\n {title}
}\r\n {description && (\r\n\r\n 
\r\n
\r\n )}\r\n \r\n {product.tags?.length && product.tags.length > 0 ? (\r\n \r\n {product.tags.map((tag) => (\r\n \r\n {tag.name}\r\n \r\n ))}\r\n {product.discountPercantage && (\r\n \r\n {product.discountPercantage}\r\n \r\n )}\r\n {product.isNew && (\r\n \r\n {translate('product-tag.is-new')}\r\n \r\n )}\r\n \r\n ) : (\r\n <>\r\n {(product.discountPercantage || product.isNew) && (\r\n \r\n {product.discountPercantage && (\r\n \r\n {product.discountPercantage}\r\n \r\n )}\r\n {product.isNew && (\r\n \r\n {translate('product-tag.is-new')}\r\n \r\n )}\r\n \r\n )}\r\n \r\n )}\r\n \r\n {product.name}\r\n \r\n \r\n
\r\n \r\n {product.lipscoreProduct?.productModel && (\r\n
\r\n {product.price.formattedCampaignPrice ? (\r\n \r\n {product.price.formattedCampaignPrice}{' '}\r\n \r\n {product.price.formattedPrice}\r\n \r\n
\r\n ) : (\r\n product.price.formattedPrice && (\r\n {product.price.formattedPrice}
\r\n )\r\n )}\r\n \r\n \r\n {product.stock?.inStock \r\n ? translate('product-listing.is-in-stock')\r\n : translate('product-listing.is-not-in-stock')}\r\n \r\n \r\n {totalNumResults > 0 &&\r\n item?.items?.length > 0 && (\r\n
\r\n {totalNumResults == 0 && (\r\n \r\n {/* `\r\n ${text('large')}\r\n display: flex;\r\n width: 100%;\r\n flex-grow: 1;\r\n padding: 0 1.2rem;\r\n height: 4rem;\r\n ${fontFamily}\r\n line-height: 150%;\r\n color: ${getColor('gray', 900)};\r\n background-color: ${getColor('white')};\r\n border: 1px solid ${getColor('grey', 700)};\r\n border-color: ${(props) => props.$inputActive ? getColor('grey', 600) : getColor('grey', 700)};\r\n border-radius: 4px;\r\n -webkit-appearance: none;\r\n -webkit-border-radius: 0px;\r\n border-radius: 5px;\r\n ${breakpoint('large')} {\r\n // color: ${getColor('white')};\r\n // border-radius: 0;\r\n // background-color: ${getColor('grey', 700)};\r\n \r\n // &::placeholder {\r\n // color: ${getColor('white')} !important;\r\n // };\r\n }\r\n &:active,\r\n &:focus {\r\n background-color: ${getColor('white')};\r\n color: ${getColor('gray', 900)};\r\n &::placeholder {\r\n color: ${getColor('gray', 900)};\r\n }\r\n }\r\n &::-webkit-search-decoration,\r\n &::-webkit-search-cancel-button,\r\n &::-webkit-search-results-button,\r\n &::-webkit-search-results-decoration {\r\n display: none;\r\n }\r\n &::placeholder {\r\n color: ${getColor('grey', 700)};\r\n } \r\n`;\r\n\r\nexport const QuickSearchIcon = styled(Icon)`\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n right: 1.2rem;\r\n margin: 0;\r\n font-size: 2.4rem;\r\n fill: ${getColor('white')}!important;\r\n color: ${(props) => (props.$inputActive ? getColor('white') : null)};\r\n width: 2rem;\r\n height: 2rem;\r\n`;\r\n\r\nexport const FooterBarQuickSearchIcon = styled(Icon)`\r\n margin: 0;\r\n // font-size: 2.4rem;\r\n // fill: ${getColor('white')}!important;\r\n // color: ${(props) => (props.$inputActive ? getColor('white') : null)};\r\n // scale: 1.5;\r\n`;\r\n","import React, { useRef, useEffect, useState } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { debounce } from 'lodash-es';\r\nimport QuickSearchResult from './QuickSearchResult';\r\nimport { uniqueId } from 'lodash';\r\nimport { translate } from '../../Services/translation';\r\nimport { addOverlay, removeOverlay } from '../../Actions/Overlay.action';\r\nimport {\r\n query,\r\n setSearchQuery,\r\n handleKeyDown,\r\n toggleInputActive,\r\n} from '../../Actions/QuickSearch.action';\r\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\r\nimport {\r\n QuickSearchWrapper,\r\n QuickSearchInput,\r\n QuickSearchIcon,\r\n} from './styles/QuickSearch.styling';\r\nimport { QuickSearchModel } from '../../Types/QuickSearchModel';\r\nimport { setLoginModalOpen } from '../../Actions/Login.action';\r\n\r\nconst debouncedQuery = debounce(\r\n (dispatch, text) => dispatch(query(text)),\r\n 200\r\n);\r\n\r\n// const QuickSearch = (props: { model: QuickSearchModel, forScreen: string }) => {\r\n// const quickSearch = useTypedSelector((state) => state.quickSearch);\r\n// const {\r\n// query,\r\n// result,\r\n// showResult,\r\n// activeTab,\r\n// inputActive,\r\n// } = quickSearch;\r\n\r\nconst QuickSearch = (props: QuickSearchModel) => {\r\n const quickSearch = useTypedSelector((state) => state.quickSearch);\r\n const {\r\n query,\r\n result,\r\n showResult,\r\n inputActive,\r\n } = quickSearch;\r\n\r\n const [id] = useState(uniqueId());\r\n const searchContainer = useRef(null);\r\n const searchInput = useRef(null);\r\n const dispatch = useDispatch();\r\n let searchUrl =\r\n global['LitiumQuickSearchUrl'] +\r\n (query.length > 0 ? `?q=${query}` : '');\r\n\r\n if (result?.brandSearchUrl) {\r\n searchUrl = result?.brandSearchUrl\r\n }\r\n\r\n useEffect(() => {\r\n if (inputActive) {\r\n searchInput.current?.focus();\r\n\r\n dispatch(\r\n addOverlay('quick-search__' + id, () =>\r\n dispatch(toggleInputActive(false))\r\n )\r\n );\r\n } else {\r\n dispatch(removeOverlay('quick-search__' + id));\r\n }\r\n }, [dispatch, inputActive, id]);\r\n return (\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default QuickSearch;\r\n","import styled from 'styled-components';\r\nimport { text, fontFamilyBold } from '../../../styling/mixins/typography';\r\nimport { getColor } from '../../../styling/mixins/colors';\r\nimport Dropdown from '../../Dropdown';\r\n\r\nexport const StyledRegister = styled.div`\r\n h1 {\r\n ${fontFamilyBold};\r\n margin-bottom: 8px;\r\n text-transform: uppercase;\r\n }\r\n\r\n p {\r\n ${text('large')}\r\n }\r\n\r\n h4 {\r\n ${fontFamilyBold};\r\n font-size: 2.025rem;\r\n text-transform: uppercase;\r\n margin-top: 2.4rem;\r\n margin-bottom: 1.6rem;\r\n }\r\n\r\n .form {\r\n margin-top: 2.4rem;\r\n }\r\n\r\n .input__wrapper {\r\n margin-bottom: 1.6rem;\r\n\r\n &:nth-child(2) {\r\n margin-bottom: 1.2rem;\r\n }\r\n }\r\n\r\n .submit {\r\n margin-top: 1.2rem;\r\n }\r\n\r\n .additional {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n margin-top: 1.6rem;\r\n\r\n &__btn {\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n .news-checkbox {\r\n ${text('large')}\r\n margin-bottom: 1.2rem; \r\n\r\n div {\r\n height: 23px;\r\n }\r\n }\r\n\r\n .country-select-container {\r\n display: flex; \r\n flex-direction: column;\r\n\r\n .country-label {\r\n ${text('large')}\r\n ${fontFamilyBold}\r\n margin-bottom: 0.8rem;\r\n }\r\n }\r\n`;\r\n\r\nexport const StyledCheckoutDropdown = styled(Dropdown)`\r\n margin-bottom: 1.6rem;\r\n\r\n .dropdown-select {\r\n background-color: ${getColor('white')};\r\n padding-top: 1.2rem;\r\n padding-bottom: 1.2rem;\r\n }\r\n`;","import React from 'react';\r\nimport styled from 'styled-components';\r\nimport { StyledRegister } from '../styles/RegisterForm.styles';\r\nimport RegisterProps from '../types/RegisterProps';\r\n\r\nconst StyledRegisterSuccess = styled(StyledRegister)``;\r\n\r\nconst RegisterSuccess = (props: RegisterProps) => {\r\n return (\r\n */}\r\n \r\n {translate('quicksearch.showmore')}\r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default QuickSearchResult;\r\n","import { getColor } from '../../../styling/mixins/colors';\r\nimport { breakpoint } from '../../../styling/mixins/breakpoints';\r\nimport styled from 'styled-components';\r\nimport Icon from '../../Icon';\r\nimport { fontFamily, text } from '../../../styling/mixins/typography';\r\n\r\nexport const QuickSearchWrapper = styled.div`\r\n z-index: 62;\r\n display: flex;\r\n flex-grow: 1;\r\n ${breakpoint('large')} {\r\n max-width: 584px;\r\n }\r\n\r\n .quick-search__form {\r\n width: 100%;\r\n }\r\n\r\n .quick-search__input-section {\r\n width: 100%;\r\n margin: 0;\r\n\r\n ${breakpoint('large')} {\r\n padding: 0;\r\n }\r\n }\r\n .quick-search__input-wrapper {\r\n position: relative;\r\n width: 100%;\r\n }\r\n`;\r\n\r\ninterface QuickSearchInputProps {\r\n $inputActive: boolean;\r\n}\r\n\r\nexport const QuickSearchInput = styled.input\r\n
\r\n {showResult && inputActive && result && (\r\n \r\n \r\n dispatch(toggleInputActive(!inputActive, inputActive))\r\n }\r\n />\r\n {\r\n const text = encodeURIComponent(event.target.value);\r\n dispatch(setSearchQuery(text));\r\n debouncedQuery(dispatch, text);\r\n }}\r\n onClick={() => {\r\n dispatch(toggleInputActive(true));\r\n dispatch(setLoginModalOpen(false));\r\n }}\r\n onKeyDown={(event) =>\r\n dispatch(handleKeyDown(event, { searchUrl }))\r\n }\r\n ref={searchInput}\r\n />\r\n
\r\n {props.successTitle}
\r\n \r\n{props.title}
\r\n \r\n\r\n\r\n props.onClick(B2C_CUSTOMER_TYPE)}\r\n />\r\n |\r\n props.onClick(B2B_CUSTOMER_TYPE)}\r\n />\r\n
\r\n {props.text}
\r\n )\r\n}\r\n\r\nfunction RegisterB2CForm({ isLoading, onInputChange, matchingPasswordError, payload }) {\r\n return (\r\n <>\r\n {translate('register.company.info.header')}
\r\n\r\n{translate('register.contact.info.header')}
\r\n\r\n{translate('changepassword.passwordconfirmationdoesnotmatch')}
\r\n )}\r\n \r\n\r\n )}\r\n \r\n )\r\n}\r\n\r\nfunction DeliveryAddress({ isLoading, onInputChange, payload }) {\r\n return (\r\n <>\r\n {translate(\"register.delivery.info.header\")}
\r\n\r\n \r\n ({\r\n value: country.value,\r\n label: country.text,\r\n }))}\r\n disabled={LitiumConstants.countries.length <= 1}\r\n />\r\n
\r\n \r\n )\r\n}\r\n\r\nfunction InputField({ keyName, mandatory = false, autoComplete = '', type = 'text', isLoading, onInputChange }) {\r\n return (\r\n \r\n {props.totalHits > 0 && (\r\n \r\n {props.productListing.totalProductsCount > 0 && (\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default SearchNavigation;\r\n","import React from 'react';\r\nimport styled from 'styled-components';\r\nimport { cells, span, grid } from '../../styling/utils/grid';\r\nimport { breakpoint } from '../../styling/mixins/breakpoints';\r\nimport { text } from '../../styling/mixins/typography';\r\nimport { getColor } from '../../styling/mixins/colors';\r\n\r\nconst StyledResultLinkWrapper = styled.div`\r\n ${grid}\r\n margin-bottom: 1.6rem;\r\n ${breakpoint('small')} {\r\n ${cells(1)}\r\n }\r\n ${breakpoint('medium')} {\r\n ${cells(4)}\r\n }\r\n .link-item {\r\n ${text('medium')}\r\n ${span(1)}\r\n text-decoration: none;\r\n cursor: pointer;\r\n color: ${getColor('grey', 900)};\r\n }\r\n`;\r\n\r\nconst SearchResultLinkTab = ({ items }) => {\r\n return (\r\n \r\n {props.productListing?.totalProductsCount > 0 && activeTab == 'products' && (\r\n \r\n \r\n \r\n )}\r\n {props.brandListing?.total > 0 && activeTab == 'brands' && (\r\n
\r\n );\r\n};\r\n\r\nexport default SearchResult;\r\n","import styled from 'styled-components';\r\nimport { getColor } from '../../../styling/mixins/colors';\r\nimport { breakpoint } from '../../../styling/mixins/breakpoints';\r\nimport { text } from '../../../styling/mixins/typography';\r\nimport SideMenu from '../../SideMenu/SideMenu';\r\n\r\nexport const StyledSizeGuideContainer = styled.div`\r\n .section {\r\n padding-left: 0 !important;\r\n padding-right: 0 !important;\r\n }\r\n`;\r\nexport const StyledSizeGuideTrigger = styled.button`\r\n text-decoration: underline;\r\n ${text('small')};\r\n ${getColor('black')};\r\n`;\r\n\r\nexport const StyledSizeGuideMenu = styled(SideMenu)`\r\n overflow-y: auto;\r\n ${breakpoint('large')} {\r\n width: 840px !important;\r\n max-width: 840px !important;\r\n }\r\n .side-menu-content {\r\n background-color: ${getColor('gray', 100)};\r\n padding-top: 2.4rem;\r\n padding-left: 2.4rem;\r\n padding-right: 2.4rem;\r\n flex: 1;\r\n table {\r\n overflow-x: auto;\r\n display: block;\r\n tbody {\r\n border-radius: 0.4rem;\r\n border-top: 1px solid ${getColor('gray', 300)};\r\n td {\r\n border-bottom: 1px solid ${getColor('gray', 300)};\r\n border-right: 1px solid ${getColor('gray', 300)};\r\n padding: 0.8rem;\r\n min-width: 100px;\r\n }\r\n tr {\r\n border-left: 1px solid ${getColor('gray', 300)};\r\n &:nth-of-type(odd) {\r\n background-color: white;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n`;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { translate } from '../../Services/translation';\r\nimport {\r\n StyledSizeGuideContainer,\r\n StyledSizeGuideMenu,\r\n StyledSizeGuideTrigger,\r\n} from './styles/SizeGuideContainer.styling';\r\n\r\nconst SizeGuideContainer = ({ SizeGuide }: any) => {\r\n const [modalOpen, setModalOpen] = useState(false);\r\n const [sizeGuideContainerRef, setSizeGuideContainerRef] = useState<\r\n HTMLDivElement | undefined\r\n >();\r\n const [children, setChildren] = useState\r\n
\r\n \r\n {children} \r\n
\r\n \r\n );\r\n};\r\n","import React from 'react';\r\nimport SubNavigationCollapsible from './SubNavigationCollapsible';\r\nimport styled from 'styled-components';\r\nimport { getColor } from '../../styling/mixins/colors';\r\nimport { fontFamilyBold, text } from '../../styling/mixins/typography';\r\nimport { breakpoint } from '../../styling/mixins/breakpoints';\r\nimport { SubNavigationLinkModel } from '../../Types/SubNavigationLinkModel';\r\n\r\nconst StyledSecondLevelNavigationList = styled.ul`\r\n > li {\r\n background-color: ${getColor('white')};\r\n &:not(:last-child) {\r\n border-bottom: 1px solid ${getColor('gray', 300)};\r\n }\r\n &.has-children {\r\n border-bottom: none;\r\n }\r\n a {\r\n height: 40px;\r\n display: flex;\r\n align-items: center;\r\n padding-left: 1.2rem;\r\n ${text('medium')};\r\n &:hover {\r\n background-color: ${getColor('gray', 100)};\r\n }\r\n }\r\n }\r\n .collapsible {\r\n border-top: none !important;\r\n border-bottom: none !important;\r\n }\r\n li.is-selected {\r\n background: ${getColor('gray', 100)};\r\n a {\r\n ${fontFamilyBold}\r\n }\r\n }\r\n`;\r\nconst StyledNavigationList = styled.ul`\r\n .title {\r\n background-color: ${getColor('white')};\r\n a {\r\n text-transform: uppercase;\r\n ${fontFamilyBold};\r\n }\r\n }\r\n border-radius: 0 0 4px 4px;\r\n overflow: hidden;\r\n border-top: 1px solid ${getColor('gray', 300)};\r\n ${breakpoint('medium')} {\r\n border-radius: 4px;\r\n border: 1px solid ${getColor('gray', 300)};\r\n margin-bottom: 1.6rem;\r\n }\r\n\r\n > li {\r\n &:not(:last-child) {\r\n border-bottom: 1px solid ${getColor('gray', 300)};\r\n }\r\n a {\r\n height: 40px;\r\n display: flex;\r\n align-items: center;\r\n padding-left: 1.2rem;\r\n ${text('medium')};\r\n ${fontFamilyBold}\r\n &:hover {\r\n background-color: ${getColor('gray', 100)};\r\n }\r\n }\r\n }\r\n`;\r\nconst SubNavigation = ({ links, name, url }: SubNavigationLinkModel) => {\r\n return (\r\n - \r\n {link.links.map((secondLevelLink, idx) => (\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default SubNavigationContainer;\r\n","import React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { breakpoint } from '../styling/mixins/breakpoints';\r\nimport { getColor } from '../styling/mixins/colors';\r\nimport Button from './Button';\r\nimport Checkbox from './Inputs/Checkbox';\r\nimport Input from './Inputs/Input';\r\nimport RadioButton from './Inputs/Radiobutton';\r\nimport TextArea from './Inputs/TextArea';\r\nimport FilterRangeSlider from './ProductFiltering/FilterOptions/FilterRangeSlider';\r\nimport { FilterGroupType } from './ProductFiltering/types/FilterGroupType';\r\n\r\nconst Wrapper = styled.div`\r\n background-color: ${(props) => props.color};\r\n color: ${(props) => props.theme.colors.primary};\r\n font-size: 32px;\r\n padding: 0 120px;\r\n\r\n .xD {\r\n background-color: cyan;\r\n }\r\n`;\r\n\r\nconst StyledSpan = styled.span`\r\n background-color: ${getColor('grey', 800)};\r\n ${breakpoint('large')} {\r\n background-color: red;\r\n }\r\n`;\r\n\r\nconst Test = ({ color }: { color: string }) => {\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default TestContainerForReact;\r\n","import React, { useState } from 'react';\r\nimport { Collapse } from 'react-collapse';\r\nimport { useCookies } from 'react-cookie';\r\nimport Icon from '../Icon';\r\n\r\nconst TopMessage = ({ systemId, message, link }) => {\r\n const [isOpen, setIsOpen] = useState(true);\r\n const [_, setCookie] = useCookies([`top-message-${systemId}-visible`]);\r\n\r\n return (\r\n <>\r\n {message && (\r\n \r\n
\r\n \r\n \r\n {\r\n setCookie(`top-message-${systemId}-visible`, 'close');\r\n setIsOpen(false);\r\n }}\r\n />\r\n
\r\n {translate('wishlist.emptyMessage')}
\r\n\r\n {children}\r\n
\r\n );\r\n};\r\n\r\nexport default MobileFooterMenuIconWrapper;\r\n","import React from 'react'\r\nimport { useTypedSelector } from '../../Hooks/useTypedSelector'\r\nimport { useDispatch, useSelector } from 'react-redux'\r\nimport { toggleInputActive } from '../../Actions/QuickSearch.action';\r\nimport { translate } from '../../Services/translation';\r\nimport { RootState } from '../../reducers';\r\nimport { toggleMobileMenu } from '../../Actions/Navigation.action';\r\nimport styled from 'styled-components';\r\nimport { getColor } from '../../styling/mixins/colors';\r\nimport Icon from '../Icon';\r\nimport MobileFooterMenuIconWrapper from './MobileFooterMenuIconWrapper';\r\nimport IconText from './IconText';\r\nimport { setLoginModalOpen } from '../../Actions/Login.action';\r\nimport { setShowMiniCart } from '../../Actions/Cart.action';\r\n\r\nconst StyledQuickSearchIcon = styled(Icon) <{ $inputActive: boolean }>`\r\n cursor: pointer;\r\n color: ${(props) => (props.$inputActive ? getColor('white') : getColor('grey', 900))};\r\n`;\r\n\r\nexport default function QuickSearchLinkMobile() {\r\n const quickSearch = useTypedSelector((state) => state.quickSearch);\r\n const dispatch = useDispatch();\r\n const mobileMenuOpen = useSelector((state: RootState) => state.navigation.mobileMenuOpen);\r\n\r\n return (\r\n \r\n {!userInfo && (\r\n
\r\n )\r\n}\r\n\r\nexport default HeaderNavigationIconLinks","import React from 'react';\r\nimport AccordionBlock from '../Blocks/AccordionBlock';\r\nimport BannerBlock from '../Blocks/BannerBlock/BannerBlock';\r\nimport BannerSliderBlock from '../Blocks/BannerSliderBlock/BannerSliderBlock';\r\nimport BrandsBlock from '../Blocks/BrandsBlock/BrandsBlock';\r\nimport FaqAccordion from '../Blocks/FaqAccordion';\r\nimport LinkBlock from '../Blocks/LinkBlock/LinkBlock';\r\nimport LinkListBlock from '../Blocks/LinkListBlock/LinkListBlock';\r\nimport MegaMenuBannerBlock from '../Blocks/MegaMenuBannerBlock/MegaMenuBannerBlock';\r\nimport ProductBlockNoSlider from '../Blocks/ProductBlockNoSlider';\r\nimport ProductSlider from '../Blocks/ProductSlider';\r\nimport ProductsAndBannerBlock from '../Blocks/ProductsAndBannerBlock';\r\nimport RichTextBlock from '../Blocks/RichTextBlock';\r\nimport UspBlock from '../Blocks/UspBlock';\r\nimport ActiveFilterChips from '../Components/ActiveFilterChips/ActiveFilterChips';\r\nimport BuyButton from '../Components/BuyButton/BuyButton';\r\nimport CategoryHeaderText from '../Components/Category.HeaderText';\r\nimport CategoryNavigation from '../Components/CategoryNavigation/CategoryNavigation';\r\nimport Checkout from '../Components/Checkout/Checkout';\r\nimport EditorString from '../Components/EditorString/EditorString';\r\nimport FavoriteButton from '../Components/FavoriteButton/FavoriteButton';\r\nimport FilterBar from '../Components/FilterBar/FilterBar';\r\nimport Footer from '../Components/Footer/Footer';\r\nimport LoginModal from '../Components/Login/LoginModal';\r\nimport LoginModalTrigger from '../Components/Login/LoginModalTrigger';\r\nimport LoginPage from '../Components/Login/LoginPage';\r\nimport MiniCart from '../Components/MiniCart/MiniCart';\r\nimport MiniCartButton from '../Components/MiniCart/MiniCartButton';\r\nimport MyPagesContainer from '../Components/MyPages/MyPagesContainer';\r\nimport Navigation from '../Components/Navigation/Navigation';\r\nimport NavigationMobile from '../Components/Navigation/NavigationMobile';\r\nimport NavigationMobileTrigger from '../Components/Navigation/NavigationMobileTrigger';\r\nimport OrderConfirmation from '../Components/OrderConfirmation/OrderConfirmation';\r\nimport Overlay from '../Components/Overlay';\r\nimport ProductFiltering from '../Components/ProductFiltering/ProductFiltering';\r\nimport ProductListHeaderText from '../Components/ProductList.HeaderText';\r\nimport ProductListing from '../Components/ProductListing/ProductListing';\r\nimport ProductListingTitle from '../Components/ProductListing/ProductListing.Title';\r\nimport ProductPageImageSlider from '../Components/ProductPageImageSlider/ProductPage.ImageSlider';\r\nimport ProductPagePrice from '../Components/ProductPagePrice/ProductPage.Price';\r\nimport ProductTabsContainer from '../Components/ProductPageTabs/ProductTabsContainer';\r\nimport ProductTabsContainerMobile from '../Components/ProductPageTabs/ProductTabsContainerMobile';\r\nimport ProductPageUsps from '../Components/ProductPageUsps/ProductPageUsps';\r\nimport ProductPageVariantIdentifier from '../Components/ProductPageVariantIdentifier/ProductPageVariantIdentifier';\r\nimport ProductPageVariantList from '../Components/ProductPageVariantList/ProductPage.VariantList';\r\nimport ProductSorting from '../Components/ProductSorting/ProductSorting';\r\nimport QuickSearch from '../Components/QuickSearch/QuickSearch';\r\nimport RegisterPage from '../Components/Register/RegisterPage';\r\nimport ResponsiveImage from '../Components/ResponsiveImage/ResponsiveImage';\r\nimport ScrollToElementButton from '../Components/ScrollToElementButton/ScrollToElementButton';\r\nimport SearchNavigation from '../Components/SearchResult/SearchNavigation';\r\nimport SearchResult from '../Components/SearchResult/SearchResult';\r\nimport SizeGuideContainer from '../Components/SizeGuide/SizeGuideContainer';\r\nimport StockStatus from '../Components/StockStatus/StockStatus';\r\nimport SubNavigationContainer from '../Components/SubNavigationContainer/SubNavigationContainer';\r\nimport Test from '../Components/Test';\r\nimport TestContainerForReact from '../Components/TestContainerForReact';\r\nimport TopMessage from '../Components/TopMessage/TopMessage';\r\nimport VariantMultiPickerDropdown from '../Components/VariantPicker/VariantMultiPicker.Dropdown';\r\nimport VariantPickerButtons from '../Components/VariantPicker/VariantPicker.Buttons';\r\nimport VariantPickerDropdown from '../Components/VariantPicker/VariantPicker.Dropdown';\r\nimport VariantSelectBuyButtonContainer from '../Components/VariantSelectBuyButton/VariantSelectBuyButtonContainer';\r\nimport WishList from '../Components/WishList/WishList';\r\nimport WishListButton from '../Components/WishList/WishListButton';\r\nimport { GLOBAL_STYLING_COMPONENT_NAME } from '../constants';\r\nimport { GlobalStyle } from '../styling/global.styled';\r\nimport ContentPage from '../styling/razor/pages/content-page';\r\nimport NewsList from '../styling/razor/pages/news-list';\r\nimport renderWrapper from './render-wrapper';\r\nimport { UspSign } from \"../Components/Footer/FooterSign\";\r\nimport QuickSearchLinkMobile from \"../Components/MobileFooterMenu/QuickSearchLinkMobile\";\r\nimport LoginIconLink from '../Components/Login/ui/LoginIconLink';\r\nimport CustomerServiceLink from '../Components/CustomerService/CustomerServiceLink';\r\nimport LoginIconLinkMobile from '../Components/MobileFooterMenu/LoginIconLinkMobile';\r\nimport LoginModalTriggerMobile from '../Components/MobileFooterMenu/LoginModalTriggerMobile';\r\nimport MiniCartButtonMobile from '../Components/MobileFooterMenu/MiniCartButtonMobile';\r\nimport WishListButtonMobileMenu from '../Components/MobileFooterMenu/WishListButtonMobileMenu';\r\nimport RegisterCustomerLink from '../Components/Register/RegisterCustomerLink';\r\nimport ClientContextLoader from '../Components/ClientContextLoader/ClientContextLoader';\r\nimport HeaderNavigationIconLinks from '../Components/Header/HeaderNavigationIconLinks';\r\n\r\nglobal['Components'] = {\r\n ProductListing: (props) => renderWrapper(ProductListing, props),\r\n MiniCart: (props) => renderWrapper(MiniCart, props),\r\n MiniCartButton: (props) => renderWrapper(MiniCartButton, props),\r\n WishListButton: (props) => renderWrapper(WishListButton, props),\r\n WishList: (props) => renderWrapper(WishList, props),\r\n FavoriteButton: (props) => renderWrapper(FavoriteButton, props),\r\n StockStatus: (props) => renderWrapper(StockStatus, props),\r\n ProductFiltering: (props) => renderWrapper(ProductFiltering, props),\r\n ProductSorting: (props) => renderWrapper(ProductSorting, props),\r\n MyPagesContainer: (props) => renderWrapper(MyPagesContainer, props),\r\n Checkout: (props) => renderWrapper(Checkout, props),\r\n BuyButton: (props) => renderWrapper(BuyButton, props),\r\n FilterBar: (props) => renderWrapper(FilterBar, props),\r\n QuickSearch: (props) => renderWrapper(QuickSearch, props),\r\n SearchResult: (props) => renderWrapper(SearchResult, props),\r\n SearchNavigation: (props) => renderWrapper(SearchNavigation, props),\r\n ProductBlockNoSlider: (props) => renderWrapper(ProductBlockNoSlider, props),\r\n ProductListHeaderText: (props) => renderWrapper(ProductListHeaderText, props),\r\n CategoryHeaderText: (props) => renderWrapper(CategoryHeaderText, props),\r\n Navbar: (props) => renderWrapper(Navigation, props),\r\n TestContainerForReact: (props) =>\r\n renderWrapper(TestContainerForReact, props),\r\n ProductPageImageSlider: (props) =>\r\n renderWrapper(ProductPageImageSlider, props),\r\n BannerSliderBlock: (props) => renderWrapper(BannerSliderBlock, props),\r\n BannerBlock: (props) => renderWrapper(BannerBlock, props),\r\n ProductSlider: (props) => renderWrapper(ProductSlider, props),\r\n ActiveFilterChips: (props) => renderWrapper(ActiveFilterChips, props),\r\n NavigationMobileTrigger: (props) =>\r\n renderWrapper(NavigationMobileTrigger, props),\r\n NavigationMobile: (props) => renderWrapper(NavigationMobile, props),\r\n Overlay: (props) => renderWrapper(Overlay, props),\r\n VariantPickerDropdown: (props) =>\r\n renderWrapper(VariantPickerDropdown, props),\r\n VariantPickerButtons: (props) =>\r\n renderWrapper(VariantPickerButtons, props),\r\n VariantMultiPickerDropdown: (props) =>\r\n renderWrapper(VariantMultiPickerDropdown, props),\r\n LoginModal: (props) => renderWrapper(LoginModal, props),\r\n LoginPage: (props) => renderWrapper(LoginPage, props),\r\n LoginModalTrigger: (props) => renderWrapper(LoginModalTrigger, props),\r\n TopMessage: (props) => renderWrapper(TopMessage, props),\r\n OrderConfirmation: (props) => renderWrapper(OrderConfirmation, props),\r\n ProductsAndBannerBlock: (props) =>\r\n renderWrapper(ProductsAndBannerBlock, props),\r\n Test: (props) => renderWrapper(Test, props),\r\n LinkBlock: (props) => renderWrapper(LinkBlock, props),\r\n BrandsBlock: (props) => renderWrapper(BrandsBlock, props),\r\n EditorString: (props) => renderWrapper(EditorString, props),\r\n RichTextBlock: (props) => renderWrapper(RichTextBlock, props),\r\n LinkListBlock: (props) => renderWrapper(LinkListBlock, props),\r\n AccordionBlock: (props) => renderWrapper(AccordionBlock, props),\r\n Footer: (props) => renderWrapper(Footer, props),\r\n MegaMenuBannerBlock: (props) =>\r\n renderWrapper(MegaMenuBannerBlock, props),\r\n ProductPageUsps: (props) => renderWrapper(ProductPageUsps, props),\r\n SizeGuideContainer: (props) => renderWrapper(SizeGuideContainer, props),\r\n FaqAccordion: (props) => renderWrapper(FaqAccordion, props),\r\n UspBlock: (props) => renderWrapper(UspBlock, props),\r\n ResponsiveImage: (props) => renderWrapper(ResponsiveImage, props),\r\n ProductPageVariantList: (props) =>\r\n renderWrapper(ProductPageVariantList, props),\r\n ScrollToElementButton: (props) =>\r\n renderWrapper(ScrollToElementButton, props),\r\n ProductTabsContainer: (props) =>\r\n renderWrapper(ProductTabsContainer, props),\r\n ProductTabsContainerMobile: (props) =>\r\n renderWrapper(ProductTabsContainerMobile, props),\r\n ProductPageVariantIdentifier: (props) =>\r\n renderWrapper(ProductPageVariantIdentifier, props),\r\n ProductPagePrice: (props) => renderWrapper(ProductPagePrice, props),\r\n ProductListingTitle: (props) =>\r\n renderWrapper(ProductListingTitle, props),\r\n RegisterPage: (props) => renderWrapper(RegisterPage, props),\r\n CategoryNavigation: (props) => renderWrapper(CategoryNavigation, props),\r\n SubNavigationContainer: (props) =>\r\n renderWrapper(SubNavigationContainer, props),\r\n VariantSelectBuyButtonContainer: (props) =>\r\n renderWrapper(VariantSelectBuyButtonContainer, props),\r\n UspSign: (props) => renderWrapper(UspSign, props),\r\n QuickSearchLinkMobile: (props) => renderWrapper(QuickSearchLinkMobile, props),\r\n CustomerServiceLink: (props) => renderWrapper(CustomerServiceLink, props),\r\n LoginIconLink: (props) => renderWrapper(LoginIconLink, props),\r\n LoginIconLinkMobile: (props) => renderWrapper(LoginIconLinkMobile, props),\r\n LoginModalTriggerMobile: (props) =>\r\n renderWrapper(LoginModalTriggerMobile, props),\r\n MiniCartButtonMobile: (props) => renderWrapper(MiniCartButtonMobile, props),\r\n WishListButtonMobileMenu: (props) =>\r\n renderWrapper(WishListButtonMobileMenu, props),\r\n RegisterCustomerLink: (props) => renderWrapper(RegisterCustomerLink, props),\r\n HeaderNavigationIconLinks: (props) => renderWrapper(HeaderNavigationIconLinks, props),\r\n ClientContextLoader: () => renderWrapper(ClientContextLoader, {}),\r\n \r\n [GLOBAL_STYLING_COMPONENT_NAME]: () => (\r\n <>\r\n