{title}
}\n {components?.Content && (\n\n
\n );\n};\nexport default StockStatus;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { useDispatch } from 'react-redux';\nimport styled from 'styled-components';\nimport { update } from '../../Actions/Cart.action';\nimport { translate } from '../../Services/translation';\nimport { getColor } from '../../styling/mixins/colors';\nimport { text } from '../../styling/mixins/typography';\nimport { OrderRow } from '../../Types/OrderRow';\nimport QuantityInput from '../QuantityInput/QuantityInput';\nimport StockStatus from '../StockStatus/StockStatus';\n\ninterface OrderRowProductCardProps {\n row: OrderRow;\n onRemoveClick?: (row: OrderRow) => void;\n className?: string;\n}\n\nconst StyledOrderRowProductCard = styled.div`\n display: flex;\n gap: 0 1.6rem;\n background-color: ${getColor('grey', 100)};\n padding: 1.6rem;\n\n .image-wrapper {\n background-color: ${getColor('grey', 200)};\n width: 64px;\n height: 64px;\n }\n\n .image {\n width: 100%;\n aspect-ratio: 1/1;\n object-fit: cover;\n }\n\n .content {\n display: flex;\n flex-direction: column;\n flex: 1;\n }\n\n .overline {\n ${text('medium')}\n color: ${getColor('grey', 500)};\n margin-bottom: 0.2rem;\n }\n\n .name {\n ${text('medium')}\n font-weight: bold;\n margin-bottom: 0.4rem;\n }\n\n .extra-row {\n ${text('medium')}\n color: ${getColor('grey', 500)}\n }\n\n .quantity-input {\n max-width: 112px;\n }\n\n .stock-status {\n margin-top: 0.8rem;\n margin-bottom: 1.6rem;\n }\n\n .right-col {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-end;\n ${text('large')}\n font-weight: bold;\n }\n\n .price {\n ${text('small')}\n text-decoration: line-through;\n ${getColor('grey', 500)}\n }\n\n .btn--remove {\n ${text('medium')}\n color: ${getColor('grey', 500)};\n text-decoration: underline;\n cursor: pointer;\n margin-left: 1.6rem;\n }\n\n .footer {\n display: flex;\n align-items: center;\n\n input {\n background-color: ${getColor('white')};\n padding: 0.4rem 0.8rem;\n }\n }\n`;\n\nconst StyledImageBackground = styled.div`\n position: relative;\n background: ${getColor('white')};\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.04);\n pointer-events: none;\n z-index: 2;\n }\n`;\n\nconst OrderRowProductCard = ({\n row,\n onRemoveClick,\n className = '',\n}: OrderRowProductCardProps) => {\n const dispatch = useDispatch();\n\n const [abortController, setAbortController] = useState<\n AbortController | undefined\n >();\n\n useEffect(() => setAbortController(new AbortController()), []);\n\n const onQuantityChange = useCallback(\n (row, quantity) => {\n dispatch(update(row.articleNumber, quantity, abortController));\n },\n [abortController, dispatch]\n );\n\n return (\n \n \n {row.image && (\n \n 
\n \n )}\n \n
\n \n
\n {row.brand}
\n \n {row.name}\n
\n {row.extraInfo && (\n \n {row.extraInfo.items.map((item) => (\n
\n )}\n \n {item.key}: {item.value}\n
\n ))}\n \n onQuantityChange(row, quantity)}\n />\n
\n \n {row.totalCampaignPrice != '' ? row.totalCampaignPrice : row.totalPrice}\n {row.totalCampaignPrice != '' && (\n onRemoveClick && onRemoveClick(row)}\n >\n {translate('general.remove')}\n
\n )}\n \n {row.totalPrice}
\n )}\n {onRemoveClick && !row.isFreeGift && (\n \n {translate('general.cart')} {quantity > 0 ? `(${quantity})` : ''}\n
\n\n
\n \n {translate('general.total')}
\n{orderTotal}
\n{translate('cart.empty')}
\n {emptyCartLink && (\n \n{title}
\n {titleRight}\n{children}
;\n\nexport default CheckoutSectionContent;\n","import React, { useEffect, useState } from 'react';\n\nconst useDebouncedOnChange = (initialValue, action, wait = 300) => {\n const [internalValue, setInternalValue] = useState(initialValue);\n const [timeoutId, setTimeoutId] = useState(-1);\n\n useEffect(() => {\n if (timeoutId !== -1) {\n setTimeoutId(clearTimeout(timeoutId));\n }\n\n setTimeoutId(setTimeout(action, wait));\n }, [internalValue]);\n\n return [internalValue, setInternalValue];\n};\n\nexport default useDebouncedOnChange;\n","import { post, put, remove } from '../Services/http';\nimport { load as loadCart } from './Cart.action';\nimport { catchError } from './Error.action';\n\nimport {\n CHECKOUT_SET_SELECTED_COMPANY_ADDRESS,\n CHECKOUT_SET_SELECTED_BILLING_ADDRESS,\n CHECKOUT_SET_SELECTED_DELIVERY_ADDRESS,\n CHECKOUT_SET_PRIVATE_CUSTOMER,\n CHECKOUT_SET_SIGN_UP,\n CHECKOUT_SET_DELIVERY,\n CHECKOUT_SET_COUNTRY,\n CHECKOUT_SET_PAYMENT,\n CHECKOUT_SET_DISCOUNT_CODE,\n CHECKOUT_SET_ORDER_NOTE,\n CHECKOUT_ACCEPT_TERMS_OF_CONDITION,\n CHECKOUT_SUBMIT,\n CHECKOUT_SUBMIT_ERROR,\n CHECKOUT_SET_PAYMENT_WIDGET,\n CHECKOUT_SET_USED_DISCOUNT_CODE,\n CHECKOUT_UPDATE_CUSTOMER_INFO,\n CHECKOUT_SET_SHOW_ALTERNATIVE_ADDRESS,\n CLEAR_ERROR,\n CHECKOUT_SET_STATUS_SUBMIT_BUTTON,\n CHECKOUT_VALIDATE_ADDRESS,\n CHECKOUT_SET_CUSTOMER_INFO,\n CHECKOUT_SET_VALIDATION_ERRORS,\n CHECKOUT_SET_IS_SUBMITTING,\n} from '../constants';\n\nexport const setBusinessCustomer = (isBusinessCustomer) => ({\n type: CHECKOUT_SET_PRIVATE_CUSTOMER,\n payload: {\n isBusinessCustomer,\n },\n});\n\nexport const setSignUp = (signUp) => ({\n type: CHECKOUT_SET_SIGN_UP,\n payload: {\n signUp,\n },\n});\n\nexport const submitSignup = () => (dispatch, getState) => {\n const { payload } = getState().checkout;\n\n return put('/api/checkout/setSignup', payload)\n .then((response) => response.json())\n .catch((ex) => {\n if (ex.response) {\n ex.response.json().then((error) => {\n dispatch(submitError(error));\n });\n } else {\n dispatch(submitError(ex));\n }\n throw ex;\n });\n};\n\nexport const updateCustomerDetails = (key, data) => ({\n type: CHECKOUT_UPDATE_CUSTOMER_INFO,\n payload: {\n key,\n data,\n },\n});\n\nexport const setSelectedBillingAddress = (selectedBillingAddressId) => ({\n type: CHECKOUT_SET_SELECTED_BILLING_ADDRESS,\n payload: {\n selectedBillingAddressId,\n },\n});\n\nexport const setSelectedDeliveryAddress = (selectedDeliveryAddressId) => ({\n type: CHECKOUT_SET_SELECTED_DELIVERY_ADDRESS,\n payload: {\n selectedDeliveryAddressId,\n },\n});\n\nexport const setCheckoutIsSubmitting = (checkoutIsSubmitting) => ({\n type: CHECKOUT_SET_IS_SUBMITTING,\n payload: {\n checkoutIsSubmitting,\n },\n});\n\nexport const setDelivery = (method) => (dispatch, getState) => {\n dispatch({\n type: CHECKOUT_SET_DELIVERY,\n payload: {\n selectedDeliveryMethod: method,\n },\n });\n const { payload } = getState().checkout;\n return put('/api/checkout/setDeliveryProvider', payload)\n .then((response) => response.json())\n .then((result) => {\n dispatch(loadCart());\n if (result !== null && result.paymentWidget) {\n dispatch(setPaymentWidget(result.paymentWidget));\n }\n })\n .catch((ex) => dispatch(catchError(ex, (error) => submitError(error))));\n};\n\nexport const setCountry = (systemId) => (dispatch, getState) => {\n dispatch({\n type: CHECKOUT_SET_COUNTRY,\n payload: {\n selectedCountry: systemId,\n },\n });\n const { payload } = getState().checkout;\n\n // reset paymentWidget to null to avoid sending unnecessary request to payment provider\n dispatch(setPaymentWidget(null));\n\n return put('/api/checkout/setCountry', payload)\n .then((response) => response.json())\n .then((result) => {\n dispatch(loadCart());\n dispatch(setPaymentWidget(result.paymentWidget));\n dispatch({\n type: CHECKOUT_SET_DELIVERY,\n payload: {\n deliveryMethods: result.deliveryMethods,\n selectedDeliveryMethod: result.selectedDeliveryMethod,\n },\n });\n dispatch({\n type: CHECKOUT_SET_PAYMENT,\n payload: {\n paymentMethods: result.paymentMethods,\n selectedPaymentMethod: result.selectedPaymentMethod,\n },\n });\n })\n .catch((ex) => dispatch(catchError(ex, (error) => submitError(error))));\n};\n\nexport const setPayment = (method) => (dispatch, getState) => {\n dispatch({\n type: CHECKOUT_SET_PAYMENT,\n payload: {\n selectedPaymentMethod: method,\n },\n });\n\n const { payload } = getState().checkout;\n // reset paymentWidget to null to avoid sending unnecessary request to payment provider\n dispatch(setPaymentWidget(null));\n // reset payment error on the checkout\n dispatch(\n submitError({\n modelState: {\n payment: [],\n },\n })\n );\n\n return put('/api/checkout/setPaymentProvider', payload)\n .then((response) => response.json())\n .then((result) => {\n dispatch(loadCart());\n dispatch(setPaymentWidget(result.paymentWidget));\n })\n .catch((ex) => dispatch(catchError(ex, (error) => submitError(error))));\n};\n\nexport const reloadPayment = () => (dispatch, getState) => {\n const { payload } = getState().checkout;\n return put('/api/checkout/reloadPaymentWidget', payload)\n .then((response) => response.json())\n .then((result) => {\n dispatch(loadCart());\n if (result && result.paymentWidget) {\n dispatch(setPaymentWidget(result.paymentWidget));\n }\n })\n .catch((ex) => dispatch(catchError(ex, (error) => submitError(error))));\n};\n\nconst setPaymentWidget = (paymentWidget) => ({\n type: CHECKOUT_SET_PAYMENT_WIDGET,\n payload: {\n paymentWidget,\n },\n});\n\nexport const setOrderNote = (orderNote) => ({\n type: CHECKOUT_SET_ORDER_NOTE,\n payload: {\n orderNote,\n },\n});\n\nexport const acceptTermsOfCondition = (acceptTermsOfCondition) => ({\n type: CHECKOUT_ACCEPT_TERMS_OF_CONDITION,\n payload: {\n acceptTermsOfCondition,\n },\n});\n\nexport const setDiscountCode = (discountCode) => ({\n type: CHECKOUT_SET_DISCOUNT_CODE,\n payload: {\n discountCode,\n },\n});\n\nexport const submitDiscountCode = () => (dispatch, getState) => {\n const { payload } = getState().checkout;\n return put('/api/checkout/setDiscountCode', payload)\n .then((response) => response.json())\n .then((result) => {\n dispatch(setUsedDiscountCodes(result.usedDiscountCodes));\n dispatch(loadCart());\n dispatch(setPaymentWidget(result.paymentWidget));\n // reset error of campaign code\n dispatch(\n submitError({\n modelState: {\n discountCode: [],\n },\n })\n );\n })\n .catch((ex) => {\n dispatch(catchError(ex, (error) => submitError(error)));\n // restore the initial cart\n dispatch(loadCart());\n });\n};\n\nexport const deleteDiscountCode = (discountCode) => (dispatch, getState) => {\n const { payload } = getState().checkout;\n payload.discountCode = discountCode;\n return remove('/api/checkout/deleteDiscountCode', payload)\n .then((response) => response.json())\n .then((result) => {\n dispatch(setUsedDiscountCodes(result.usedDiscountCodes));\n dispatch(loadCart());\n dispatch(setPaymentWidget(result.paymentWidget));\n dispatch(setDiscountCode(''));\n // reset error of campaign code\n dispatch(\n submitError({\n modelState: {\n discountCode: [],\n },\n })\n );\n })\n .catch((ex) => {\n dispatch(catchError(ex, (error) => submitError(error)));\n // restore the initial cart\n dispatch(loadCart());\n });\n};\n\nconst setUsedDiscountCodes = (usedDiscountCodes) => ({\n type: CHECKOUT_SET_USED_DISCOUNT_CODE,\n payload: {\n usedDiscountCodes,\n },\n});\n\nexport const setAlternativeAddress = (propName, value) => ({\n type: CHECKOUT_SET_CUSTOMER_INFO,\n payload: {\n key: 'alternativeAddress',\n data: {\n [propName]: value,\n },\n },\n});\n\nexport const setCustomerDetails = (propName, value) => ({\n type: CHECKOUT_SET_CUSTOMER_INFO,\n payload: {\n key: 'customerDetails',\n data: {\n [propName]: value,\n },\n },\n});\n\nexport const submit = () => (dispatch, getState) => {\n const { payload } = getState().checkout;\n return _submit('/api/checkout', payload, dispatch);\n};\n\nconst _submit = (url, model, dispatch) => {\n return post(url, model)\n .then((response) => response.json())\n .then((result) => {\n dispatch(submitDone(result));\n if (result.redirectUrl) {\n location.href = result.redirectUrl;\n } else {\n dispatch(setCheckoutIsSubmitting(false));\n }\n })\n .catch((ex) => {\n dispatch(setCheckoutIsSubmitting(false));\n if (ex.response) {\n ex.response.json().then((error) => {\n dispatch(submitError(error));\n dispatch(submitDone(null));\n // reload the cart, it might be changed after validation\n dispatch(loadCart());\n });\n } else {\n dispatch(submitError(ex));\n }\n });\n};\n\nexport const saveCustomerDetail = () => (dispatch, getState) => {\n const { payload } = getState().checkout;\n return put('/api/checkout/setCustomerDetail', payload)\n .then((response) => response.json())\n .catch((ex) => {\n if (ex.response) {\n ex.response.json().then((error) => {\n dispatch(submitError(error));\n });\n } else {\n dispatch(submitError(ex));\n }\n throw ex;\n });\n};\n\nexport const clearError = () => ({\n type: CLEAR_ERROR,\n payload: {\n errors: [],\n },\n});\n\nexport const submitDone = (result) => ({\n type: CHECKOUT_SUBMIT,\n payload: {\n result,\n },\n});\n\nexport const submitError = (error) => ({\n type: CHECKOUT_SUBMIT_ERROR,\n payload: {\n error,\n },\n});\n\nexport const setValidationErrors = (validationErrors) => ({\n type: CHECKOUT_SET_VALIDATION_ERRORS,\n payload: {\n validationErrors,\n },\n});\n\nexport const setStatusSubmitButton = (value) => ({\n type: CHECKOUT_SET_STATUS_SUBMIT_BUTTON,\n payload: {\n enableConfirmButton: value,\n },\n});\n\nexport const setShowAlternativeAddress = (showAlternativeAddress) => ({\n type: CHECKOUT_SET_SHOW_ALTERNATIVE_ADDRESS,\n payload: {\n showAlternativeAddress,\n },\n});\nexport const setValidateStatus = (isValidating) => ({\n type: CHECKOUT_VALIDATE_ADDRESS,\n payload: {\n isValidating,\n },\n});\n","import React from 'react';\nimport { useMemo } from 'react';\nimport Icon from '../Icon';\nimport {\n StyledInputIconWrapper,\n StyledInputWrapper,\n StyledTextArea,\n StyledTextAreaIcon,\n} from './styles/Inputs.styled';\nimport { InputProps } from './types/Input.types';\n\nconst TextArea: React.FC<\n InputProps & React.InputHTMLAttributes{children}
;\n\nexport default CheckoutSectionFooter;\n","import React, { HTMLAttributes } from 'react';\nimport Icon from './Icon';\nimport styled from 'styled-components';\nimport { getColor } from '../styling/mixins/colors';\nimport { text } from '../styling/mixins/typography';\n\ninterface ChipAttributes {\n children?: any;\n showDelete?: boolean;\n onDeleteClick?: Function;\n chipProps?: HTMLAttributes\n \n submitDiscount(inputDiscountCode)}\n disabled={!inputDiscountCode || isLoading}\n >\n {translate('general.use')}\n \n
\n )}\n {usedDiscountCodes.length > 0 && (\n \n {usedDiscountCodes.map((code) => (\n dispatch(deleteDiscountCode(code))}\n >\n {code}\n \n ))}\n
\n )}\n \n \n {translate('checkout.order.sum')}\n {cart.orderTotal}\n \n {cart.discount && (\n \n {translate('checkout.order.saved')}\n {cart.discount}\n \n )}\n {cart.deliveryCost && (\n \n {translate('checkout.order.shipping')}\n {cart.deliveryCost}\n \n )}\n {cart.paymentCost && (\n \n {translate('checkout.order.fee')}\n {cart.paymentCost}\n \n )}\n\n \n {translate('checkout.order.grandTotal')}\n {cart.grandTotal}\n \n \n {translate('checkout.order.vat')}\n {cart.vat}\n \n
\n \n {showMessageIcon && messageIcon}\n {message}\n
\n )}\n \n );\n};\n\nexport default Checkbox;\n","import React, { useCallback, useMemo } from 'react';\nimport { useDispatch } from 'react-redux';\nimport CheckoutSection from './utils/Checkout.Section';\nimport CheckoutSectionContent from './utils/Checkout.SectionContent';\nimport CheckoutSectionFooter from './utils/Checkout.SectionFooter';\nimport {\n acceptTermsOfCondition as setAcceptTermsOfCondition,\n setStatusSubmitButton,\n setValidationErrors,\n submit,\n submitDone,\n setCheckoutIsSubmitting,\n saveCustomerDetail,\n} from '../../Actions/Checkout.action';\nimport {\n alwaysRequiredSchema,\n businessCustomerDetailsSchema,\n privateCustomerAddressSchema,\n privateCustomerAlternativeAddressSchema,\n} from './utils/Checkout.ValidationSchema';\nimport { translate } from '../../Services/translation';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport Checkbox from '../Inputs/Checkbox';\nimport styled from 'styled-components';\nimport Button from '../Button';\n\nconst StyledCheckoutSectionFooter = styled(CheckoutSectionFooter)`\n display: flex;\n margin-top: 2.4rem;\n\n button {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n`;\n\nconst ConfirmOrder = () => {\n const dispatch = useDispatch();\n const checkout = useTypedSelector((state) => state.checkout);\n const { payload, validationErrors = {}, checkoutIsSubmitting } = checkout;\n const {\n customerDetails,\n alternativeAddress,\n selectedDeliveryAddressId,\n selectedBillingAddressId,\n selectedDeliveryMethod,\n selectedPaymentMethod,\n showAlternativeAddress,\n isBusinessCustomer,\n acceptTermsOfCondition,\n } = payload;\n\n const onSubmit = useCallback(() => dispatch(submit()), [dispatch]);\n\n const placeOrder = useCallback(async () => {\n dispatch(setCheckoutIsSubmitting(true));\n const notCustomerDetailFields = [\n 'selectedDeliveryAddressId',\n 'selectedBillingAddressId',\n 'selectedPaymentMethod',\n 'selectedDeliveryMethod',\n 'acceptTermsOfCondition',\n ];\n\n const onValidationFailed = (stateKey: string, errors: any[]) => {\n const key = (err: any) =>\n stateKey && !notCustomerDetailFields.includes(err.path)\n ? `${stateKey}-${err.path}`\n : err.path;\n\n const newValidationErrors = errors.reduce(\n (prev, err) => ({\n ...prev,\n [key(err)]: err.errors,\n }),\n {}\n );\n dispatch(\n setValidationErrors({ ...validationErrors, ...newValidationErrors })\n );\n dispatch(setStatusSubmitButton(true));\n dispatch(submitDone(null));\n };\n\n dispatch(setStatusSubmitButton(false));\n\n // Validate, then submit. Not proud of this validation, but better than Litium default\n try {\n if (isBusinessCustomer) {\n // Business customer\n try {\n await businessCustomerDetailsSchema.validate(\n {\n ...customerDetails,\n selectedDeliveryAddressId,\n selectedBillingAddressId,\n },\n { abortEarly: false }\n );\n } catch (ex) {\n // re-throw the error with the scheme's state key\n throw { stateKey: 'customerDetails', error: ex.inner };\n }\n } else {\n // Private customer\n try {\n await privateCustomerAddressSchema.validate(\n {\n ...customerDetails,\n },\n { abortEarly: false }\n );\n } catch (ex) {\n // re-throw the error with the scheme's state key\n throw { stateKey: 'customerDetails', error: ex.inner };\n }\n\n // Alternative address\n if (showAlternativeAddress) {\n try {\n await privateCustomerAlternativeAddressSchema.validate(\n {\n ...alternativeAddress,\n },\n { abortEarly: false }\n );\n } catch (ex) {\n // re-throw the error with the scheme's state key\n throw { stateKey: 'alternativeAddress', error: ex.inner };\n }\n }\n }\n\n // Always required\n try {\n await alwaysRequiredSchema.validate(\n {\n acceptTermsOfCondition,\n selectedPaymentMethod,\n selectedDeliveryMethod,\n },\n { abortEarly: false }\n );\n } catch (ex) {\n // re-throw the error with the scheme's state key\n throw { stateKey: null, error: ex.inner };\n }\n\n // Will not be reached if any validation failed\n dispatch(saveCustomerDetail()).then(() => onSubmit());\n } catch (err) {\n dispatch(setCheckoutIsSubmitting(false));\n onValidationFailed(err.stateKey, err.error);\n }\n }, [\n dispatch,\n validationErrors,\n isBusinessCustomer,\n customerDetails,\n selectedDeliveryAddressId,\n selectedBillingAddressId,\n showAlternativeAddress,\n alternativeAddress,\n acceptTermsOfCondition,\n selectedPaymentMethod,\n selectedDeliveryMethod,\n onSubmit,\n ]);\n\n const acceptTermsError = useMemo(\n () =>\n validationErrors['acceptTermsOfCondition']\n ? validationErrors['acceptTermsOfCondition'][0]\n : null,\n [validationErrors]\n );\n\n return (\n \n {title}\n {description && {description}}\n
\n \n {cost}\n {logo && {logo}}\n
\n \n );\n};\n\nexport default CheckoutRadio;\n","import React, { useEffect } from 'react';\nimport { useDispatch } from 'react-redux';\nimport CheckoutSection from './utils/Checkout.Section';\nimport CheckoutSectionContent from './utils/Checkout.SectionContent';\nimport Radio from './utils/Checkout.Radio';\nimport { setDelivery } from '../../Actions/Checkout.action';\nimport { translate } from '../../Services/translation';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\n\nconst DeliveryMethods = () => {\n const dispatch = useDispatch();\n const checkout = useTypedSelector((state) => state.checkout);\n const { deliveryMethods, selectedDeliveryMethod } = checkout.payload;\n\n useEffect(() => {\n if (!selectedDeliveryMethod) return;\n\n dispatch(setDelivery(selectedDeliveryMethod));\n }, []);\n\n return (\n \n {selectedOption?.legendLabel ?\n <>\n \n {selectedOption?.legendLabel} \n \n \n {selectedOption?.label ?? selectedOption?.value ?? placeholder}\n \n \n : selectedOption?.label ?? selectedOption?.value ?? placeholder\n }\n
\n - \n {options.map((option, index) => (\n
\n {translate('checkout.selectdelivery')}\n
\n \n {translate('checkout.order.delivery')}\n
\n \n {payload.companyName}\n \n {selectedDeliveryAddress?.address}\n \n \n {selectedDeliveryAddress?.zipCode}{' '}\n {selectedDeliveryAddress?.city}\n \n \n {selectedDeliveryAddress?.country}\n \n
\n \n {translate('checkout.selectbilling')}\n
\n \n {translate('checkout.order.billing')}\n
\n \n {payload.companyName}\n \n {selectedBillingAddress?.address}\n \n \n {selectedBillingAddress?.zipCode} {selectedBillingAddress?.city}\n \n \n {selectedBillingAddress?.country}\n \n
\n \n
\n {translate('checkout.empty.title')}
\n {emptyCartMessage && (\n\n {translate('checkout.signup.description')}\n
\n \n
\n {translate('checkout.title')}
\n {message &&\n
\n \n \n \n \n \n {paymentOptionVisibility &&
\n \n
\n \n {children} \n
\n \n );\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport { getColor } from '../../../styling/mixins/colors';\nimport { text } from '../../../styling/mixins/typography';\nimport Checkbox from '../../Inputs/Checkbox';\nimport RadioButton from '../../Inputs/Radiobutton';\nimport { FilterElementAttributes } from '../types/FilterElementAttributes';\n\n\nconst FilterCheckbox = ({\n filter,\n option,\n onChange,\n}: FilterElementAttributes) => {\n return option ? (\n \n ) : null;\n};\n\nexport default FilterCheckbox;\n","import React, { useState, useMemo, useEffect } from 'react';\nimport { FilterElementAttributes } from '../types/FilterElementAttributes';\nimport { Range, getTrackBackground } from 'react-range';\nimport {\n IRenderThumbParams,\n IRenderTrackParams,\n} from 'react-range/lib/types';\n\nconst FilterRangeSlider = ({\n filter,\n onChange,\n}: FilterElementAttributes) => {\n const [values, setValues] = useState\n \n {typeof icon == 'string' &&
\n {helperText && {helperText}}\n {message && (\n \n {showMessageIcon && messageIcon}\n {message}\n \n )}\n \n );\n};\n\nexport default Input;\n","import React from 'react';\nimport { useEffect } from 'react';\nimport { useState } from 'react';\nimport { useMemo } from 'react';\nimport { translate } from '../../Services/translation';\nimport Input from './FilterInput';\nimport { FilterGroup } from './types/FilterGroup';\n\ninterface FilterSearchInputAttributes {\n filter: FilterGroup;\n onSearch?: Function;\n}\n\nconst FilterSearchInput = ({\n filter,\n onSearch,\n}: FilterSearchInputAttributes) => {\n const [value, setValue] = useState('');\n\n const matchingOptions = useMemo(\n () =>\n value != ''\n ? filter.options.filter(\n (opt) =>\n filter.selectedOptions.includes(opt.id) ||\n opt.label.toLowerCase().includes(value.toLowerCase())\n )\n : null,\n [value, filter]\n );\n\n useEffect(() => {\n onSearch && onSearch(filter, matchingOptions);\n }, [filter, onSearch, matchingOptions]);\n\n return (\n \n setValue(e.target.value)}\n placeholder={translate('general.search')}\n />\n
\n );\n};\n\nexport default FilterSearchInput;\n","import React from 'react';\nimport { useCallback } from 'react';\nimport { useDispatch } from 'react-redux';\nimport {\n onOptionChanged as onOptionChangedAction,\n onRangeChanged as onRangeChangedAction,\n queryProductFiltering,\n} from '../../Actions/ProductFiltering.action';\nimport { translate } from '../../Services/translation';\nimport Button from '../Button';\nimport FilterCheckbox from './FilterOptions/FilterCheckbox';\nimport FilterRangeSlider from './FilterOptions/FilterRangeSlider';\nimport FilterSearchInput from './FilterSearchInput';\nimport { FilterGroup } from './types/FilterGroup';\nimport { FilterGroupOption } from './types/FilterGroupOption';\nimport { FilterGroupType } from './types/FilterGroupType';\n\ninterface FilterGroupFactoryAttributes {\n filter: FilterGroup;\n options: FilterGroupOption[];\n showAll?: boolean;\n showAllButtonVisible?: boolean;\n onShowHideAllClick?: Function;\n onSearch?: Function;\n onChange?: Function;\n}\n\nconst FilterGroupElement = ({\n filter,\n options,\n showAll,\n showAllButtonVisible,\n onShowHideAllClick,\n onSearch,\n}: FilterGroupFactoryAttributes) => {\n const dispatch = useDispatch();\n\n // When a filter checkbox/radiobutton is changed, this is called, which triggers a filter query\n const onOptionChanged = useCallback(\n async (filterId: string, optionId: string) => {\n dispatch(onOptionChangedAction(filterId, optionId));\n dispatch(queryProductFiltering());\n },\n [dispatch]\n );\n\n // When a filter range is changed, this is called, which triggers a filter query\n const onRangeChanged = useCallback(\n async (filterId: string, values: number[]) => {\n dispatch(onRangeChangedAction(filterId, values));\n dispatch(queryProductFiltering());\n },\n [dispatch]\n );\n\n // Renders each filter group depending on the filter group type\n const renderFilterOptions = useCallback(\n (filter: FilterGroup) => {\n switch (filter.filterGroupType) {\n case FilterGroupType.Checkbox:\n return (\n <>\n \n {showQuantityInput && (\n setQuantity(value)}\n className=\"flex-1\"\n />\n )}\n {href && (\n \n {showLoadingSpinner && \n {showLoadingSpinner ?
\n );\n};\n\nexport default BuyButton;\n","import React from 'react';\nimport { useDispatch } from 'react-redux';\nimport styled from 'styled-components';\nimport { onSortItemSelected } from '../../Actions/ProductFiltering.action';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport { getColor } from '../../styling/mixins/colors';\nimport { text } from '../../styling/mixins/typography';\nimport RadioButton from '../Inputs/Radiobutton';\n\nconst StyledProductSortingList = styled.ul`\n padding: 2.4rem 1.6rem;\n`;\n\nconst StyledSortingItem = styled.li`\n ${text('large')}\n display: flex;\n justify-content: space-between;\n cursor: pointer;\n\n & div {\n margin: 0;\n }\n\n &:not(:last-child) {\n margin-bottom: 1.6rem;\n }\n\n &:hover .sort-radio-button {\n box-shadow: 0 0 0 1px ${getColor('primary')};\n }\n`;\n\nconst StyledRadioButton = styled(RadioButton)`\n margin-right: 0;\n`;\n\nconst ProductSortingRadios = () => {\n const dispatch = useDispatch();\n const { sortCriteria } =\n useTypedSelector((state) => state.productFiltering) ?? {};\n const selectedSortItem = sortCriteria?.sortItems.find((s) => s.selected);\n\n return (\n \n
\n )}\n \n {foundCategory ? (\n {currentCategory.name}\n ) : (\n currentCategory.name\n )}\n
\n {translate('filter.categories')}
\n ) : null}\n {currentMenu == 'filters' ?{translate('filter.filter')}
: null}\n {currentMenu == 'sorting' ?{translate('filter.sort')}
: null}\n \n );\n\n const Content = () => (\n <>\n {currentMenu == 'categories' ?\n {totalProductsCount} {translate('general.products').toLowerCase()}\n
\n \n
\n \n \n dispatch(setProductListingType(ProductListingType.Grid))\n }\n />\n \n dispatch(setProductListingType(ProductListingType.List))\n }\n />\n \n dispatch(setProductListingType(ProductListingType.SingleCard))\n }\n />\n
\n {sortItems && (\n \n ({\n value: item.query,\n label: item.name,\n }))}\n selectedValue={sortItems.find((s) => s.selected)?.query}\n onChange={onSortingChanged}\n size=\"small\"\n />\n
\n )}\n \n \n {userInfo?.currentOrganizationName ?? translate('mypage.site.title')}\n \n
\n \n {userInfo?.firstName} {userInfo?.lastName}\n
\n- \n {navigation.map((option) => (\n
{err}
),\n [errors]\n );\n\n useEffect(() => {\n if (errors['general']?.length || !!successMessage) {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n }, [errors, successMessage]);\n\n return (\n{translate('mypage.info.title')}
\n {description?.value && (\n\n {translate('general.ordernumber')}: {order.externalOrderID}\n
\n\n onClick && onClick(order)}\n className=\"btn--read-more\"\n >\n {translate('general.show-more')}\n \n
\n \n
\n {translate('general.quantity')}
\n{order.orderRows.length}
\n\n
\n \n {translate('orderlist.column.grandtotal')}\n
\n{order.orderGrandTotal}
\n\n
\n {translate('orderlist.column.orderdate')}
\n{order.orderDate}
\n\n
\n {translate('orderlist.column.status')}
\n{order.status}
\n\n {[...Array(cells - 1)].map((e, index) => (\n
\n \n \n \n
\n ))}\n {translate('mypage.order.title')}
\n {description?.value && (\n{generalError}
}\n{translate('mypage.order.no-orders')}
\n )}\n- \n
- \n
\n
\n \n {translate('general.ordernumber')}\n
\n\n {translate('general.quantity')}\n
\n\n {translate('orderdetail.grandtotal')}\n
\n\n {translate('orderdetail.orderdate')}\n
\n\n {translate('orderdetail.orderstatus')}\n
\n\n \n index !== currentPageIndex && setCurrentPageIndex(index)\n }\n />\n
\n \n \n {product.name}\n \n \n {translate('product.articleno')}: {product.articleNumber}\n \n {product.extraInfo &&\n product.extraInfo.items.map((item) => (\n \n {item.key}: {item.value}\n \n ))}\n \n {translate('product.quantity')}: {product.quantityString}\n \n \n {translate('product.unitprice')}: {product.totalPrice}\n \n \n {translate('product.total')}: {product.totalPrice}\n \n
\n \n
\n {confirmationText?.value && (\n {confirmationTitle}
\n\n \n {translate('general.ordernumber')}:\n {order.externalOrderID}\n \n \n {translate('orderdetail.orderdate')}:\n {order.orderDate}\n \n
\n \n
\n )}\n \n ) : (\n \n {confirmationReviewItems.map((reviewItem, index) => (\n \n
\n )}\n \n
\n )}\n \n {translate('general.ordernumber')}: {order.externalOrderID}\n
\n\n \n {translate('orderdetail.orderdate')}:\n {order.orderDate}\n \n \n {translate('orderdetail.orderstatus')}:\n {order.status}\n \n
\n \n {order.orderRows.map((product) => (\n
\n {isConfirmation && confirmationExtraText?.value && (\n \n
\n \n {translate('checkout.order.sum')}\n {order.orderTotal}\n
\n {order.orderTotalDiscountAmount && (\n \n {translate('checkout.order.saved')}\n {order.orderTotalDiscountAmount}\n
\n )}\n \n {translate('checkout.order.shipping')}\n {order.orderTotalDeliveryCost}\n
\n {order.orderTotalFee && (\n \n {translate('checkout.order.fee')}\n {order.orderTotalFee}\n
\n )}\n \n {translate('orderdetail.grandtotal')}\n {order.orderGrandTotal}\n
\n \n {translate('checkout.order.vat')}\n {order.orderTotalVat}\n
\n \n {(deliveryAddress || order.pickupLocation) && (\n
\n \n );\n};\n\nexport default OrderDetail;\n","import React, { useEffect, useMemo } from 'react';\nimport { translate } from '../../Services/translation';\nimport { useNavigate, useParams } from 'react-router-dom';\nimport { useDispatch } from 'react-redux';\nimport { getOrder } from '../../Actions/Order.action';\nimport Icon from '../Icon';\nimport OrderDetail from '../OrderDetail/OrderDetail';\nimport { breakpoint } from '../../styling/mixins/breakpoints';\nimport styled from 'styled-components';\nimport Button from '../Button';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport { reorder } from '../../Services/Cart.service';\nimport { receive, loadError } from '../../Actions/Cart.action';\nimport { catchError } from '../../Actions/Error.action';\nimport { text } from '../../styling/mixins/typography';\nimport { getColor } from '../../styling/mixins/colors';\nimport { setError } from '../../Actions/Order.action';\n\nconst StyledMyPagesOrderDetail = styled.div`\n grid-column: span 3;\n\n .menu {\n display: flex;\n flex-direction: column;\n gap: 0.8rem;\n margin-bottom: 1.6rem;\n\n ${breakpoint('medium')} {\n gap: unset;\n flex-direction: row;\n justify-content: space-between;\n }\n\n ${breakpoint('xlarge')} {\n margin-bottom: 2.4rem;\n }\n }\n\n .btn--back {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 100%;\n font-weight: bold;\n\n ${breakpoint('medium')} {\n width: unset;\n }\n }\n\n .btn__wrapper {\n display: flex;\n gap: 0.8rem;\n\n ${breakpoint('medium')} {\n gap: 2.4rem;\n }\n\n button {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 50%;\n font-weight: bold;\n\n ${breakpoint('medium')} {\n width: unset;\n }\n }\n }\n\n .order-icon {\n width: 16px;\n height: 16px;\n margin-right: 0.8rem;\n }\n\n .error {\n ${text('medium')};\n color: ${getColor('alert')};\n }\n`;\n\nconst MyPagesOrderDetail = () => {\n const navigate = useNavigate();\n const { id } = useParams();\n const dispatch = useDispatch();\n const { order, errors = {} } = useTypedSelector(\n (state) => state.myPage.orders\n );\n const generalError = useMemo(\n () => (errors && errors['general']?.length ? errors['general'][0] : null),\n [errors]\n );\n\n useEffect(() => {\n if (!order) {\n dispatch(getOrder(id));\n }\n }, []);\n\n const addOrderToCart = async () => {\n try {\n const cart = await reorder(id);\n dispatch(receive(cart));\n return true;\n } catch (ex) {\n dispatch(catchError(ex, (error) => loadError(error)));\n return false;\n }\n };\n\n return (\n \n \n {translate('orderdetail.deliveryaddress')}\n \n
\n )}\n {order.billingAddress && (\n \n \n {translate('orderdetail.billingaddress')}\n \n
\n )}\n \n \n {translate('orderdetail.paymentmethod')}\n \n {order.paymentMethod}\n
\n \n \n {translate('orderdetail.deliverymethod')}\n \n {order.deliveryMethod}\n
\n \n {\n dispatch(setError({ general: [] }));\n navigate(-1);\n }}\n >\n
\n {generalError && \n \n \n
\n {generalError}
}\n {order ?\n {person.firstName} {person.lastName}\n
\n\n
\n \n
\n {translate('mypage.person.email')}:
\n{person.email}
\n\n
\n {translate('mypage.person.phone')}:
\n{person.phone}
\n\n
\n {person.role !== 'Admin' && (\n {translate('mypage.person.role')}:
\n{person.role}
\n\n navigate(`edit/${person.systemId}`)}\n >\n {\n dispatch(removeUser(person.systemId));\n }}\n >\n
\n )}\n \n {person.firstName} {person.lastName}\n
\n{person.email}
\n{person.phone}
\n{person.role}
\n {person.role !== 'Admin' && (\n\n navigate(`edit/${person.systemId}`)}\n >\n {\n dispatch(removeUser(person.systemId));\n }}\n >\n
\n )}\n {translate('mypage.person.title')}
\n {description?.value && (\n- \n
- \n
\n
\n {translate('mypage.person.name')}
\n{translate('mypage.person.email')}
\n{translate('mypage.person.phone')}
\n{translate('mypage.person.role')}
\n{translate('mypage.person.adduser')}
\n {description?.value && (\n\n \n \n
\n {translate('mypage.person.edituser')}
\n {description?.value && (\n\n submitForm()}\n disabled={isLoading}\n >\n {translate('general.save')}\n \n \n
\n {address.address}
\n{address.zipCode}
\n{address.city}
\n{address.country}
\n\n navigate(`edit/${address.systemId}`)}\n >\n {\n dispatch(removeAddress(address.systemId));\n }}\n >\n
\n \n
\n {address.address}
\n\n {address.zipCode} {address.city}\n
\n{address.country}
\n\n navigate(`edit/${address.systemId}`)}\n >\n {\n dispatch(removeAddress(address.systemId));\n }}\n >\n
\n {translate('mypage.address.title')}
\n {description?.value && (\n- \n
- \n
\n
\n {translate('mypage.address.address')}
\n{translate('mypage.address.zipcode')}
\n{translate('mypage.address.city')}
\n{translate('mypage.address.country')}
\n{translate('mypage.address.addaddress')}
\n {description?.value && (\n{translate('mypage.address.editaddress')}
\n {description?.value && (\n\n
\n );\n};\n\nexport default TestContainerForReact;\n","import { uniqueId } from 'lodash';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { addOverlay, removeOverlay } from '../../Actions/Overlay.action';\nimport clsx from 'clsx';\n\nconst MegaMenu = ({\n open,\n onMegaMenuClose,\n onMouseOverMegaMenu,\n onMouseLeaveMegaMenu,\n link,\n blocks,\n}) => {\n const dispatch = useDispatch();\n const blockContainerRef = useRef\n
\n 0 ? 'pr-0' : null,\n )}>\n
\n \n );\n};\n\nexport default MegaMenu;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport MegaMenu from '../MegaMenu/MegaMenu';\nimport clsx from 'clsx';\n\nconst NavigationLink = ({\n link,\n isActive,\n onLinkHover,\n onMouseLeaveLink,\n onMegaMenuClose,\n blocks,\n right = false,\n}) => {\n return (\n <>\n \n {link.links?.length > 0 &&\n link.links.map((subLink, idx) => (\n
\n {blocks.length > 0 && (\n \n )}\n 0 ? 'flex-1' : null,\n )}\n >\n \n \n {subSubLink.name}\n \n ))}\n
\n ))}\n {subLink.name ?? <> }
\n \n {subLink.links?.length > 0 &&\n subLink.links.map((subSubLink) => (\n\n
\n ) : null;\n};\n\nexport default Navigation;\n","import React, { createRef, useEffect, useMemo, useState } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { addOverlay, removeOverlay } from '../../Actions/Overlay.action';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport { Pagination, Thumbs, FreeMode, Zoom } from 'swiper';\nimport 'swiper/css/bundle';\nimport 'swiper/css/zoom';\nimport Icon from '../Icon';\nimport { translate } from '../../Services/translation';\nimport { text } from '../../styling/mixins/typography';\nimport SliderImage from '../../Types/SliderImage';\nimport styled, { createGlobalStyle } from 'styled-components';\nimport { getColor } from '../../styling/mixins/colors';\nimport { showFor } from '../../styling/utils/visibility';\n\ninterface FullscreenImageSliderProps {\n showCloseButton?: boolean;\n images: SliderImage[];\n initialSlide?: number;\n onClosed?: () => void;\n}\n\ninterface ZoomInfoProps {\n $zoomInfoVisible: boolean;\n}\n\nconst StyledSwiper = styled(Swiper)`\n height: 100%;\n\n & .swiper-pagination {\n bottom: 3.2rem !important;\n }\n`;\n\nconst StyledImageSliderWrapper = styled.div`\n z-index: 55;\n position: fixed;\n inset: 0;\n width: 100%;\n height: 100vh;\n background-color: ${getColor('white')};\n\n .content {\n height: 100%;\n }\n\n img {\n height: 100%;\n }\n`;\n\nconst StyledCloseButton = styled(Icon)`\n position: absolute;\n top: 1.6rem;\n right: 1.6rem;\n cursor: pointer;\n z-index: 55;\n font-size: 2rem;\n`;\n\nconst StyledZoomInfo = styled.div\n {contentLinks.map((link) => (\n 0 && activeMegaMenuLink == link}\n onLinkHover={() => onLinkHover(link)}\n onMouseLeaveLink={onMouseLeaveLink}\n onMegaMenuClose={onMegaMenuClose}\n blocks={getBlocks(blockElements, link)}\n />\n ))}\n
\n \n {rightContentLinks?.map((link) => (\n 0 && activeMegaMenuLink == link}\n onLinkHover={() => onLinkHover(link)}\n onMouseLeaveLink={onMouseLeaveLink}\n onMegaMenuClose={onMegaMenuClose}\n blocks={getBlocks(blockElements, link)}\n right={true}\n />\n ))}\n
\n \n {showCloseButton && (\n setOpen(false)} />\n )}\n\n onZoom(swiper.realIndex, scale)}\n pagination={{\n dynamicBullets: imageCount > 8 ? true : false,\n dynamicMainBullets: 3,\n }}\n >\n {images.map((img, idx) => (\n \n
\n \n
\n )}\n {rendered && (\n <>\n \n {children}\n
\n );\n};\nDialogContent.displayName = 'DialogContent';\nconst DialogHeader: FC\n \n
\n );\n};\n\nexport default NavigatorCTADialogItem;\n","import React, { useEffect, useState } from 'react';\nimport Dialog from '../../Dialog/Dialog';\nimport NavigatorCTADialogItem, {\n NavigatorCTAItem,\n} from './NavigatorCTADialogItem';\nimport { get } from '../../../Services/http';\nimport LoadingSpinner from '../../LoadingSpinner';\nimport { translate } from '../../../Services/translation';\n\ninterface NavigatorCTADialogProps {\n modalHeader?: string;\n isOpen: boolean;\n onClose: () => void;\n}\n\nconst NavigatorCTADialog = ({\n modalHeader,\n isOpen,\n onClose,\n}: NavigatorCTADialogProps) => {\n const [items, setItems] = useState\n
\n \n
\n \n {item.description}\n \n {item.title}
\n\n
\n \n );\n};\n\nexport default NavigatorCTADialog;\n","import React, { useState } from 'react';\nimport Button from '../Button';\nimport NavigatorCTADialog from './NavigatorCTADialog/NavigatorCTADialog';\nimport { NavigatorCTAHeaderButtonProps } from './NavigatorCTAHeaderButtonProps';\nimport clsx from 'clsx';\n\nconst NavigatorCTAHeaderButton = ({\n className,\n btnSizeLarge,\n buttonText,\n headerText,\n isDesktop,\n}: NavigatorCTAHeaderButtonProps) => {\n const [isDialogOpen, setIsDialogOpen] = useState(false);\n\n const handleButtonClick = () => {\n setIsDialogOpen(true);\n };\n\n const handleCloseDialog = () => {\n setIsDialogOpen(false);\n };\n\n return (\n \n
\n {isLoading && (\n {modalHeader}
\n\n
\n )}\n {hasError && !isLoading && (\n \n {translate('general.navigator.error')}\n
\n )}\n \n {!isLoading && !hasError &&\n items.map((item, idx) => (\n
\n \n \n {buttonText}\n \n
\n );\n};\n\nexport default NavigatorCTAHeaderButton;\n","import React from 'react';\nimport Button from '../../Components/Button';\nimport Icon from '../../Components/Icon';\nimport { LinkModel } from '../../Types/LinkModel';\nimport StyledBannerItem from './Styles/Banner-item.styling';\nimport NavigatorCTAHeaderButton from '../../Components/NavigatorCTA/NavigatorCTAHeaderButton';\nimport clsx from 'clsx';\n\nexport interface BannerItemProps {\n imageUrl: string;\n mobileImageUrl?: string;\n linkText?: string;\n actionText?: string;\n overlay: boolean;\n triggerCTAModal: boolean;\n link?: LinkModel;\n bodyText?: string;\n lazyLoadImage?: boolean;\n className?: string;\n modalHeader?: string;\n}\n\nconst BannerItem = ({\n imageUrl,\n mobileImageUrl,\n linkText,\n actionText,\n overlay,\n link,\n bodyText,\n triggerCTAModal,\n lazyLoadImage = false,\n className,\n modalHeader,\n}: BannerItemProps) => {\n const hasLinkButton = link && actionText;\n\n return (\n \n {linkText &&
\n {overlay && }\n \n );\n};\n\nexport default BannerItem;\n","import styled from 'styled-components';\nimport { Swiper } from 'swiper/react';\nimport { breakpoint } from '../../../styling/mixins/breakpoints';\nimport { getColor } from '../../../styling/mixins/colors';\n\nimport swiperCss from '!!raw-loader!node_modules/swiper/swiper.min.css';\nimport swiperPagination from '!!raw-loader!node_modules/swiper/modules/pagination/pagination.min.css';\nimport swiperNavigation from '!!raw-loader!node_modules/swiper/modules/navigation/navigation.min.css';\nimport { section } from '../../../styling/utils/grid';\n\ninterface BannerSliderStylingProps {\n $fullwidth: boolean;\n}\nexport const StyledBannerSliderSection = styled.div{linkText}
}\n {bodyText &&{bodyText}
}\n {triggerCTAModal && actionText && (\n\n {banners.map((banner, idx) => (\n
\n \n ) : null;\n};\n\nexport default BannerBlock;\n","import React, { useState, useEffect } from 'react';\nimport { SwiperSlide } from 'swiper/react';\nimport { Pagination, Navigation } from 'swiper';\nimport BannerItem, { BannerItemProps } from './_banner-item';\nimport {\n StyledBannerSliderSection,\n StyledSwiper,\n} from './Styles/Banner-Slider.styling';\nimport BannerBlock from './BannerBlock';\nimport styled from 'styled-components';\nimport { breakpoint } from '../../styling/mixins/breakpoints';\nimport { displayHeader, header } from '../../styling/mixins/typography';\nimport { section } from '../../styling/utils/grid';\n\ninterface BannerBlockProps {\n slides: BannerItemProps[];\n numPerRow: number;\n systemId: string;\n fullwidth: boolean;\n}\n\nconst StyledSwiperPlaceholder = styled.div`\n .banner__section {\n ${section}\n max-width: 1608px;\n padding-left: 0 !important;\n padding-right: 0 !important;\n }\n\n .banner-item__title {\n ${header('h1')}\n margin-bottom: 2.4rem;\n ${breakpoint('medium')} {\n ${displayHeader('small')}\n }\n }\n\n .banner-item__content {\n justify-content: center;\n padding: 0 1.6rem 0 1.6rem;\n ${breakpoint('large')} {\n padding: 0 6.4rem 0 6.4rem;\n }\n\n .banner-item__arrow {\n display: none;\n }\n }\n\n .banner-item__overlay {\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0.75) 0%,\n rgba(0, 0, 0, 0) 50%\n );\n }\n`;\n\nconst BannerSliderBlock = ({\n systemId,\n slides,\n numPerRow,\n fullwidth,\n}: BannerBlockProps) => {\n const [ready, setReady] = useState(false);\n\n useEffect(() => setReady(true), []);\n\n if (!slides || slides.length == 0) {\n return null;\n }\n\n return !ready ? (\n \n 
\n \n {product.images && product.images.length > 0 && (\n
\n );\n};\n\nexport default ProductCard;\n","import React, { useMemo } from 'react';\nimport styled from 'styled-components';\nimport ProductCard from '../Components/ProductCards/ProductCard';\nimport { breakpoint } from '../styling/mixins/breakpoints';\nimport { cells } from '../styling/utils/grid';\nimport Product from '../Types/Product';\n\nexport interface ProductNoSliderProps {\n products: Product[];\n numPerRow: number;\n}\n\nconst StyledNoSliderProductBlock = styled.div`\n display: grid;\n\n .product-block-wrapper {\n display: grid;\n gap: 2.4rem;\n }\n .cells-1 {\n ${cells(1)};\n }\n\n .cells-2 {\n ${cells(1)}\n ${breakpoint('medium')} {\n ${cells(2)}\n }\n }\n .cells-3 {\n ${cells(1)}\n ${breakpoint('small')} {\n ${cells(2)}\n }\n ${breakpoint('medium')} {\n ${cells(3)}\n }\n }\n .cells-4 {\n ${cells(2)}\n ${breakpoint('large')} {\n ${cells(4)}\n }\n }\n .cells-5 {\n ${cells(6)}\n ${breakpoint('large')} {\n ${cells(5)}\n }\n }\n .cells-6 {\n ${cells(2)}\n ${breakpoint('medium')} {\n ${cells(3)}\n }\n ${breakpoint('large')} {\n ${cells(6)}\n }\n }\n`;\n\nconst ProductBlockNoSlider = (props: ProductNoSliderProps) => {\n const { products, numPerRow } = props;\n\n let cells = useMemo(() => {\n switch (numPerRow) {\n case 1:\n return 'cells-1';\n case 2:\n return 'cells-2';\n case 3:\n return 'cells-3';\n case 4:\n return 'cells-4';\n case 5:\n return 'cells-5';\n case 6:\n return 'cells-6';\n }\n }, [numPerRow]);\n\n return (\n \n {product.tags.map((tag) => (\n \n {tag.name}\n \n ))}\n
\n ) : null}\n \n \n
\n \n \n {product.name}\n \n {product.showRating && product.baseProductId && (\n
\n \n {isVariantListing &&
\n \n {translate('product.fr')} {product.fromPrice.formattedPrice}\n
\n ) : product.price.formattedCampaignPrice ? (\n\n {product.price.formattedCampaignPrice}{' '}\n \n {product.price.formattedPrice}\n \n
\n ) : (\n product.price.formattedPrice && (\n{product.price.formattedPrice}
\n )\n )}\n\n
\n \n {products.map((product, idx) => (\n
\n \n
\n {title}
}\n {description && (\n\n \n \n
\n )}\n \n {product.brandImageUrl != null ? (\n \n \n ) : (\n {product.brand} \n )}\n \n {product.name}\n \n {product?.description?.value && (\n
\n \n
\n {totalNumResults == 0 && (\n - \n {items?.map(\n (item, idx) =>\n item.items.length > 0 && (\n
\n \n \n \n
\n )}\n \n {sectionList.map((listItem, index) => (\n
\n \n \n {subListItem.text}\n \n ))}\n
\n ))}\n {listItem.sectionTitle}
\n {listItem.sectionLinkList.map((subListItem, index) => (\n\n
\n \n );\n};\n\nexport default QuickSearch;\n","import React, { useMemo } from 'react';\nimport { translate } from '../../Services/translation';\n\ninterface ProgressBarProps {\n progress?: number;\n maxProgress?: number;\n showLabel?: boolean;\n}\n\nconst ProgressBar = ({\n progress = 0,\n maxProgress = 100,\n showLabel = true,\n}: ProgressBarProps) => {\n if (maxProgress == 0) console.warn('maxProgress cannot be 0');\n\n const progressPercent = useMemo(\n () => Math.min((progress / maxProgress) * 100, 100),\n [progress, maxProgress]\n );\n\n return (\n <>\n \n
\n {showResult && inputActive && result && (\n \n \n dispatch(toggleInputActive(!inputActive, inputActive))\n }\n />\n {\n const text = encodeURIComponent(event.target.value);\n dispatch(setSearchQuery(text));\n debouncedQuery(dispatch, text);\n }}\n onClick={() => {\n dispatch(toggleInputActive(true));\n }}\n onKeyDown={(event) =>\n dispatch(handleKeyDown(event, { searchUrl }))\n }\n ref={searchInput}\n />\n
\n \n
\n \n {showLabel && (\n \n )}\n \n );\n};\n\nexport default ProgressBar;","import React, { forwardRef, useEffect, useState } from 'react';\nimport ProgressBar from '../ProgressBar/ProgressBar';\nimport { translate } from '../../Services/translation';\nimport clsx from 'clsx';\n\ninterface LoadMoreButtonAttributes\n extends React.HTMLAttributes\n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n );\n};\n\nexport default ProductCardPlaceholder;\n","import styled from 'styled-components';\nimport { getColor } from '../../../styling/mixins/colors';\nimport { text } from '../../../styling/mixins/typography';\n\nexport const StyledLandscapeProductCard = styled.div`\n display: flex;\n background-color: ${getColor('grey', 100)};\n padding: 1.2rem;\n gap: 1.2rem;\n\n .buy-button {\n flex-direction: column;\n\n .quantity-input input {\n ${text('large')}\n padding: 0.8rem 1.2rem;\n max-width: 100%;\n }\n\n button {\n display: flex;\n align-items: center;\n }\n }\n\n .image-wrapper {\n background-color: ${getColor('white')};\n max-width: 180px;\n width: 100%;\n height: 180px;\n position: relative;\n\n img {\n width: 100%;\n aspect-ratio: 1/1;\n object-fit: cover;\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.04);\n pointer-events: none;\n }\n }\n\n .information {\n display: flex;\n flex-direction: column;\n gap: 0.8rem;\n flex: 1;\n }\n\n .overline {\n ${text('medium')}\n color: ${getColor('grey', 500)};\n margin-bottom: 0.2rem;\n }\n\n .name {\n ${text('large')}\n font-weight: bold;\n }\n\n .description {\n ${text('medium')};\n }\n\n .price {\n display: flex;\n flex-direction: column;\n text-align: right;\n }\n\n .original-price {\n ${text('small')}\n text-decoration: line-through;\n font-weight: 400;\n color: ${getColor('grey', 500)};\n }\n\n .campaign-price {\n color: ${getColor('red')};\n }\n\n .right-col {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n min-width: 180px;\n }\n`;\n\nexport const StyledProductTagWrapperLandscape = styled.div`\n display: flex;\n gap: 0.8rem;\n margin-bottom: 0.4rem;\n`;\n\nexport const StyledBrandLogo = styled.img`\n height: 20px;\n width: auto;\n`;\n","import React from 'react';\nimport StockStatus from '../StockStatus/StockStatus';\nimport ProductCardProps from './types/ProductCardProps';\nimport {\n StyledBrandLogo,\n StyledLandscapeProductCard,\n StyledProductTagWrapperLandscape,\n} from './styles/ProductCardLandscape.styling';\nimport ResponsiveImage from '../ResponsiveImage/ResponsiveImage';\nimport ProductTag from '../ProductTags/ProductTag';\nimport ProductCardBuyButton from './ProductCardBuyButton';\nimport EditorString from '../EditorString/EditorString';\nimport { translate } from '../../Services/translation';\n\nconst ProductCardLandscape = ({\n product,\n isVariantListing = false,\n lazyLoadImage,\n}: ProductCardProps) => {\n return (\n \n {product.images && product.images.length > 0 && (\n \n
\n \n {product.tags?.length ? (\n \n {product.tags.map((tag) => (\n \n {tag.name}\n \n ))}\n \n ) : null}\n \n \n \n {product.name}\n \n {product.descriptionShort && (\n
\n \n {!isVariantListing && product.fromPrice.useFromPrice ? (\n
\n \n {translate('product.fr')} {product.fromPrice.formattedPrice}\n
\n ) : product.price.formattedCampaignPrice ? (\n\n {product.price.formattedCampaignPrice}{' '}\n \n {product.price.formattedPrice}\n \n
\n ) : product.price.formattedPrice ? (\n{product.price.formattedPrice}
\n ) : (\n\n )}\n
\n \n \n \n \n
\n \n \n \n
\n \n {children}\n
\n )}\n {productListingType == ProductListingType.SingleCard && (\n \n {children}\n
\n )}\n \n ),\n [productListingType]\n );\n\n const [ProductComponent, ProductPlaceholderComponent] = useMemo(() => {\n switch (productListingType) {\n case ProductListingType.Grid:\n case ProductListingType.SingleCard:\n default:\n return [ProductCard, ProductCardPlaceholder];\n case ProductListingType.List:\n return [ProductCardLandscape, LandscapeProductCardPlaceholder];\n }\n }, [productListingType]);\n\n useEffect(() => {\n if (!ready) return;\n cache.clearAll();\n listRef?.recomputeRowHeights(0);\n }, [listRef, ready, productListingType, products]);\n\n useEffect(() => {\n if (!ready) {\n pushEcommerce(gtmViewModel);\n }\n setReady(true);\n }, []);\n\n const loadMoreClick = () => {\n const productsPerLoad = PRODUCTS_PER_LOAD;\n const startIndex = rowCount;\n const endIndex = rowCount + Math.ceil(productsPerLoad / productsPerRow);\n\n dispatch(addPlaceholderProducts(startIndex, endIndex));\n dispatch(setIsLoadingMore(true));\n };\n\n const isRowLoaded = ({ index }: Index) => {\n if (isLoadingReverse) return true;\n\n return index >= rowCount || !!products[index * productsPerRow];\n };\n\n const loadMoreRows = ({ startIndex, stopIndex }): Promise\n \n {productsForRow.length > 0 &&\n productsForRow.map((product, idx) =>\n product ? (\n \n
\n \n );\n },\n [products, productsPerRow]\n );\n\n return (\n <>\n {!ready && (\n \n
\n \n {props.totalHits > 0 && (\n \n {props.productListing.totalProductsCount > 0 && (\n \n )}\n
\n );\n};\n\nexport default SearchNavigation;\n","import { get } from '../Services/http';\nimport { catchError } from './Error.action';\nimport { NAVIGATION_LOAD_ERROR, NAVIGATION_RECEIVE } from '../constants';\n\nexport const load = () => (dispatch, getState) => {\n return get('/api/navigation')\n .then((response) => response.json())\n .then((data) => dispatch(receive(data)))\n .catch((ex) => dispatch(catchError(ex, (error) => loadError(error))));\n};\n\nexport const loadError = (error) => ({\n type: NAVIGATION_LOAD_ERROR,\n payload: {\n error,\n },\n});\n\nexport const receive = (data) => ({\n type: NAVIGATION_RECEIVE,\n payload: {\n contentLinks: data.contentLinks,\n },\n});\n\nexport const setMobileMenuOpen = (mobileMenuOpen) => ({\n type: NAVIGATION_RECEIVE,\n payload: {\n mobileMenuOpen,\n },\n});\n","import Icon from '../Icon';\nimport React from 'react';\nimport { useDispatch } from 'react-redux';\nimport { setMobileMenuOpen } from '../../Actions/Navigation.action';\nimport styled from 'styled-components';\nimport { getColor } from '../../styling/mixins/colors';\n\nconst StyledNavMobileTrigger = styled(Icon)`\n width: 24px !important;\n height: 24px !important;\n cursor: pointer;\n color: ${getColor('grey', 900)};\n`;\n\nconst NavigationMobileTrigger = () => {\n const dispatch = useDispatch();\n\n return (\n {title}
\n \n );\n};\n\nexport default FloorHeatingNavigationCard;\n","import Icon from '../../Icon';\nimport SideMenu from '../../SideMenu/SideMenu';\nimport styled, { createGlobalStyle } from 'styled-components';\nimport { StyledSideMenuContent } from '../../SideMenu/styles/SideMenu.styling';\nimport { breakpoint } from '../../../styling/mixins/breakpoints';\nimport { getColor } from '../../../styling/mixins/colors';\nimport { text } from '../../../styling/mixins/typography';\n\nexport const StyledSideMenu = styled(SideMenu)`\n z-index: 60;\n max-width: 480px;\n\n ${breakpoint('small')} {\n border-right: 1px solid ${getColor('grey', 300)};\n }\n`;\n\nexport const StyledMenuIcon = styled(Icon)`\n font-size: 2.4rem;\n color: ${getColor('grey', 900)};\n`;\n\nexport const StyledCloseIcon = styled.div`\n padding: 1.6rem;\n border-left: 1px solid ${getColor('grey', 300)};\n cursor: pointer;\n margin: -1.6rem; //override standard side-menu-header padding\n`;\n\nexport const StyledHeader = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex: 1;\n`;\n\nexport const StyledHeaderImg = styled.img`\n max-height: 32px;\n`;\n\nexport const StyledContent = styled(StyledSideMenuContent)`\n padding: 0;\n overflow-y: auto;\n`;\n\nexport const StyledIconWrapper = styled.div`\n display: flex;\n align-items: center;\n cursor: pointer;\n flex: 1;\n`;\n\nexport const StyledLinks = styled.ul`\n display: flex;\n flex-direction: column;\n`;\n\nexport const StyledSocialWrapper = styled.div`\n display: flex;\n gap: 2.4rem;\n\n & .social {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 40px;\n height: 40px;\n background-color: ${getColor('primary')};\n border-radius: 50%;\n\n img {\n width: 20px;\n height: 20px;\n }\n }\n`;\n\nexport const StyledFHGuideNavigationCard = styled.li`\n .navigation-wrapper {\n display: flex !important;\n padding: 1.2rem 1.6rem;\n flex: 1;\n border-bottom: 1px solid ${getColor('grey', 300)};\n justify-content: flex-start;\n margin: 0;\n }\n\n .navigation-title {\n ${text('large')}\n font-weight: bold;\n }\n`;\n\nexport const GlobalNavigationMobileStyling = createGlobalStyle`\nbody #overlay-container .overlay--navigation-mobile {\n z-index: 55;\n}\n`;\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { translate } from '../../../Services/translation';\nimport { text } from '../../../styling/mixins/typography';\nimport Button from '../../Button';\nimport Dropdown from '../../Dropdown';\n\nconst StyledLanguageMenu = styled.div`\n display: flex;\n flex-direction: column;\n padding: 1.6rem;\n gap: 1.6rem;\n\n button {\n max-width: fit-content;\n margin: 0 auto;\n }\n\n p {\n ${text('large')}\n font-weight: bold;\n\n span {\n font-weight: 400;\n }\n }\n`;\n\nconst LanguageMenu = () => {\n const countriesList = globalThis.LitiumConstants.countries;\n const [currentCountry, setCurrentCountry] = useState\n {translate('general.currency')}: kr / SEK\n
\n \n\n
\n )}\n {!currentLink && !navigatorCTAHeaderButtonText && fhGuide && (\n {translate('login.change-password')}
\n \n\n {!magicLinkModel ? (\n translate('login.forgot-password')\n ) : (\n <>{translate('general.loading')}...\n )}\n
\n {!isSuccessful && !magicLinkModel && (\n <>\n \n\n dispatch(setLoginMode(LoginMode.Login))}\n disabled={isLoading}\n btnType=\"clear\"\n btnSize=\"large\"\n >\n {!isLoading && translate('general.back')}\n {isLoading && translate('general.loading')}\n \n
\n \n )}\n {isSuccessful && (\n <>\n \n {translate('login.forgot-password.success')}\n
\n\n dispatch(setLoginMode(LoginMode.Login))}\n btnType=\"clear\"\n btnSize=\"large\"\n >\n {translate('general.back')}\n \n
\n \n )}\n {translate('general.login')}
\n \n\n dispatch(setLoginMode(LoginMode.ForgotPassword))}\n disabled={isLoading}\n className=\"additional__btn\"\n >\n {translate('login.forgot-password')}\n \n
\n {translate('login.choose-organization')}
\n\n
\n \n
\n \n
\n {item.link.text}
\n\n
\n {item.link?.text}
\n{title}
\n {link && {link.text}}\n{title}
\n{item.title}
\n';\nconst DESC_HEADER2_TAG = '';\n\nconst StyledCategoryDescription = styled.div<{ $showMore: boolean }>`\n ${section}\n padding-top: 1.6rem;\n padding-bottom: 2.4rem;\n\n ${breakpoint('medium')} {\n padding-bottom: 3.2rem;\n }\n\n ${breakpoint('large')} {\n margin-bottom: 3.2rem;\n }\n\n .content {\n display: flex;\n flex-direction: column;\n gap: 0.8rem;\n\n ${breakpoint('large')} {\n max-width: 660px;\n }\n }\n\n .content__text {\n position: relative;\n max-height: ${(p) => (p.$showMore ? '160px' : 'unset')};\n overflow: hidden;\n -webkit-mask-image: ${(p) =>\n p.$showMore ? 'linear-gradient(#000 92%, transparent 100%)' : 'none'};\n }\n`;\n\nconst StyledExpandButton = styled(Button)`\n text-transform: uppercase;\n font-weight: bold;\n border: none;\n border-bottom: 2px solid ${getColor('primary')};\n max-width: max-content;\n padding: 0;\n\n &:not(:disabled):hover {\n background-color: transparent;\n border-color: ${getColor('primary', 600)};\n }\n`;\n\nconst GlobalCategoryDescriptionStyling = createGlobalStyle`\n.category-page .breadcrumbs__container, .category-description {\n background-color: ${getColor('grey', 100)};\n}`;\n\nconst CategoryDescription = ({ name, description }) => {\n const [showMore, setShowMore] = useState(true);\n const descriptionLength = useMemo(() => description?.length, [description]);\n\n useEffect(() => {\n setShowMore(descriptionLength >= MAX_DESCRIPTION_LENGTH);\n }, [descriptionLength]);\n\n return (\n \n \n \n {name &&\n !description?.includes(DESC_HEADER1_TAG) &&\n !description?.includes(DESC_HEADER2_TAG) ? (\n {name}
\n ) : null}\n {description && setShowMore(!showMore)}\n >\n {!showMore\n ? translate('general.showless')\n : translate('general.showmore')}\n \n )}\n \n setInputValue(e.target.value)}\n type=\"number\"\n wrapperClassName=\"FHGuide__selection-input\"\n />\n ) : (\n \n );\n};\n\nexport default FHGuideModuleItem;\n","import React, { useState } from 'react';\nimport { EditorStringModel as EditorStringType } from '../../Types/EditorStringModel';\nimport FHGuideModuleItem from './_fhGuideContainerModuleItem';\n\ninterface FHGuideModuleProps {\n module: FHGuideModuleProps;\n title: string;\n description: EditorStringType;\n helpText?: string;\n type: string;\n handleIsSelected: Function;\n index: number;\n}\n\nconst FHGuideModule = ({\n module,\n title,\n description,\n helpText,\n type,\n handleIsSelected,\n index,\n}: FHGuideModuleProps) => {\n const [selected, setSelected] = useState(-1);\n\n const onChange = (itemIndex) => {\n setSelected(itemIndex);\n handleIsSelected(index, itemIndex);\n };\n\n return (\n \n {title && (\n \n {index + 1}
\n {title}
\n \n )}\n \n {helpText && {helpText}}\n {description && {description}}\n {module &&\n module.length > 0 &&\n module.map((module, index) => (\n \n {props.title}
\n setShowResults(true)}\n disabled={btnDisabled || showResults}\n >\n {translate('fhguide.show-results')}\n \n \n {showResults && (\n <>\n {results.length >= 1 ? (\n <>\n \n {results.map((product) => (\n {translate('fhguide.no-results')} \n )}\n \n )}\n \n );\n};\n\nexport default FHGuideContainer;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { breakpoint } from '../../styling/mixins/breakpoints';\nimport Product from '../../Types/Product';\nimport ProductCardLandscape from '../ProductCards/ProductCardLandscape';\n\ninterface ProductPageVariantListProps {\n variants: Product[];\n}\n\nconst StyledProductPageVariantList = styled.div`\n display: grid;\n grid-template-columns: 1fr;\n gap: 0.8rem;\n margin-top: 1.6rem;\n ${breakpoint('medium')} {\n margin-top: 2.4rem;\n }\n`;\n\nconst ProductPageVariantList = ({ variants }: ProductPageVariantListProps) => {\n return (\n \n {variants.map((p) => (\n \n );\n};\n\nexport default ProductPageVariantList;\n","import React, { useCallback, useMemo } from 'react';\nimport Button from '../Button';\nimport Icon from '../Icon';\n\ninterface ScrollToElementButtonProps {\n btnType: 'default' | 'primary' | 'secondary' | 'outlined';\n btnSize: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\n selector: string;\n label: string | JSX.Element;\n fullwidth?: boolean;\n iconBefore?: string | JSX.Element;\n iconAfter?: string | JSX.Element;\n}\n\nconst ScrollToElementButton = ({\n btnType,\n btnSize,\n selector,\n label,\n fullwidth = false,\n iconBefore,\n iconAfter,\n}: ScrollToElementButtonProps) => {\n const onClick = () => {\n const elementTopPosition =\n document.querySelector(selector)?.getBoundingClientRect().top ?? 0;\n if (!elementTopPosition) return;\n\n const headerHeight =\n document.querySelector('#header')?.getBoundingClientRect().height ?? 0;\n\n window.scrollTo({\n top: elementTopPosition - headerHeight,\n behavior: 'smooth',\n });\n };\n\n const IconElement = useCallback(\n ({ icon }: { icon: string | JSX.Element }) => {\n if (typeof icon == 'string') {\n return \n {iconBefore && `\n transform: ${(p) => (p.$isOpen ? 'rotate(180deg)' : 'rotate(0)')};\n transition-duration: ${(p) => p.$transitionDuration};\n height: 20px;\n width: 20px;\n`;\n\nexport default ({\n children,\n label,\n className = '',\n transitionDuration = '0.2s',\n onStateChange: externalStateChange,\n isOpen: externalIsOpen,\n hideBorder,\n}: CollapsibleAttributes) => {\n const [isOpen, setIsOpen] = useState(externalIsOpen ?? false);\n\n const onStateChange = (open: boolean) => {\n externalStateChange && externalStateChange(open);\n setIsOpen(open);\n };\n\n useEffect(() => {\n setIsOpen(externalIsOpen ?? false);\n }, [externalIsOpen]);\n\n return (\n \n \n \n {children} \n \n \n );\n};\n","import React from 'react';\nimport SubNavigationCollapsible from './SubNavigationCollapsible';\nimport styled from 'styled-components';\nimport { getColor } from '../../styling/mixins/colors';\nimport { text } from '../../styling/mixins/typography';\nimport { breakpoint } from '../../styling/mixins/breakpoints';\nimport { SubNavigationLinkModel } from '../../Types/SubNavigationLinkModel';\n\nconst StyledSecondLevelNavigationList = styled.ul`\n > li {\n &:not(:last-child) {\n border-bottom: 1px solid ${getColor('gray', 300)};\n }\n &.has-children {\n border-bottom: none;\n }\n a {\n height: 40px;\n display: flex;\n align-items: center;\n padding-left: 1.6rem;\n ${text('medium')};\n &:hover {\n background-color: ${getColor('gray', 100)};\n }\n }\n }\n .collapsible {\n border-top: none !important;\n border-bottom: none !important;\n }\n li.is-selected {\n background: ${getColor('gray', 100)};\n a {\n font-weight: bold;\n }\n }\n`;\nconst StyledNavigationList = styled.ul`\n border-radius: 0 0 4px 4px;\n border-top: 1px solid ${getColor('gray', 300)};\n ${breakpoint('medium')} {\n border-radius: 4px;\n border: 1px solid ${getColor('gray', 300)};\n margin-bottom: 1.6rem;\n }\n\n > li {\n &:not(:last-child) {\n border-bottom: 1px solid ${getColor('gray', 300)};\n }\n a {\n height: 40px;\n display: flex;\n align-items: center;\n padding-left: 0.8rem;\n ${text('medium')};\n font-weight: bold;\n &:hover {\n background-color: ${getColor('gray', 100)};\n }\n }\n }\n`;\nconst SubNavigation = ({ links, name, url }: SubNavigationLinkModel) => {\n return (\n \n \n {name}\n \n {links?.length >= 1 && (\n \n {links.map((link, idx) =>\n link.links?.length >= 1 ? (\n \n l.isSelected == true)\n }\n label={\n \n {link.name}\n \n }\n >\n \n {link.links.map((secondLevelLink, idx) => (\n \n {secondLevelLink.name}\n
\n ))}\n \n \n \n ) : (\n \n {link.name}\n \n )\n )}\n \n )}\n \n );\n};\n\nexport default SubNavigation;\n","import React from 'react';\nimport SubNavigation from './SubNavigation';\nimport Collapsible from '../Collapsible';\nimport { getColor } from '../../styling/mixins/colors';\nimport styled from 'styled-components';\nimport { translate } from '../../Services/translation';\nimport { SubNavigationLinkModel } from '../../Types/SubNavigationLinkModel';\n\nconst StyledMobileCollapsible = styled(Collapsible)`\n border: 1px solid ${getColor('gray', 300)};\n border-radius: 4px;\n margin-bottom: 2.4rem;\n padding-bottom: 0 !important;\n .ReactCollapse--content {\n padding-bottom: 0 !important;\n }\n > label {\n font-weight: bold;\n padding-left: 1.6rem !important;\n padding-right: 1.6rem !important;\n }\n`;\n\nconst SubNavigationContainer = ({\n links,\n name,\n url,\n}: SubNavigationLinkModel) => {\n return (\n <>\n \n \n \n \n \n {title && {title}
}\n {link?.href && {link.text}}\n \n \n \n \n {firstTwoProducts && (\n \n {firstTwoProducts.map((product, idx) => (\n \n )}\n {showBannerToTheRight && (\n \n \n )}\n \n {remainingProducts?.length ? (\n \n {remainingProducts.map((product, idx) => (\n \n ) : null}\n \n );\n};\n\nexport default ProductsAndBannerBlock;\n","import React, { useEffect, useState } from 'react';\nimport Collapsible from '../Collapsible';\nimport styled from 'styled-components';\nimport { getColor } from '../../styling/mixins/colors';\nimport {\n InstallationData,\n InstallationType,\n} from '../../Types/MaterialCalculator';\nimport Dropdown from '../Dropdown';\nimport Checkbox from '../Inputs/Checkbox';\nimport { useDispatch } from 'react-redux';\nimport { materialCalculatorActions } from '../../Reducers/MaterialCalculator.reducer';\nimport { translate } from '../../Services/translation';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport Input from '../Inputs/Input';\nimport { flexColumn } from '../../styling/utils/flex';\n\nconst StyledCollapsible = styled(Collapsible)`\n .label {\n font-size: 1.4rem;\n line-height: 150%;\n color: ${getColor('grey', 500)};\n font-weight: 400;\n }\n .dropdown-wrapper {\n display: flex;\n ${flexColumn}\n flex: 1;\n width: 100%;\n }\n\n .ReactCollapse--content {\n padding: unset !important;\n }\n .room-row {\n display: flex;\n flex-direction: column !important;\n gap: 1.6rem;\n align-items: center;\n }\n`;\n\nconst MaterialCalculatorAdvancedTab = ({\n installationData,\n installationType,\n floorIndex,\n roomIndex,\n}: {\n installationData: InstallationData;\n installationType: InstallationType;\n floorIndex: number;\n roomIndex: number;\n}) => {\n const dispatch = useDispatch();\n const { installationTypes, defaultDistanceToDistributor } = useTypedSelector(\n (state) => state.materialCalculator\n );\n\n const [distanceToDistributor, setDistanceToDistributor] = useState<\n number | undefined\n >(defaultDistanceToDistributor);\n\n useEffect(() => {\n dispatch(\n materialCalculatorActions.setRoomInstallationData({\n floorIndex: floorIndex,\n roomIndex: roomIndex,\n data: distanceToDistributor,\n key: 'distanceToDistributor',\n })\n );\n }, [distanceToDistributor, dispatch, floorIndex, roomIndex]);\n\n return (\n \n \n {installationType?.showCCInput && (\n \n \n {installationType?.availableCCs && (\n ({\n label: cc.toString(),\n value: cc,\n }))}\n onChange={({ value }) =>\n dispatch(\n materialCalculatorActions.setRoomInstallationData({\n floorIndex: floorIndex,\n roomIndex: roomIndex,\n data: value,\n key: 'cc',\n })\n )\n }\n />\n )}\n \n )}\n {installationType?.showMillCheckbox && (\n \n \n dispatch(\n materialCalculatorActions.setRoomInstallationData({\n floorIndex: floorIndex,\n roomIndex: roomIndex,\n data: e.target.checked,\n key: 'millSelfChecked',\n })\n )\n }\n />\n \n )}\n {!installationData?.millSelfChecked &&\n installationType?.showTurnZoneInput && (\n \n {installationTypes && (\n \n dispatch(\n materialCalculatorActions.setRoomInstallationData({\n floorIndex: floorIndex,\n roomIndex: roomIndex,\n data: e.target.valueAsNumber,\n key: 'turnZone',\n })\n )\n }\n />\n )}\n \n )}\n \n {installationTypes && (\n \n setDistanceToDistributor(e.target.valueAsNumber ?? 0)\n }\n />\n )}\n \n \n \n );\n};\n\nexport default MaterialCalculatorAdvancedTab;\n","import React, { useEffect, useState } from 'react';\nimport { addOverlay, removeOverlay } from '../../Actions/Overlay.action';\nimport { useDispatch } from 'react-redux';\nimport Modal from 'react-modal';\nimport styled from 'styled-components';\nimport { getColor } from '../../styling/mixins/colors';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport EditorString from '../EditorString/EditorString';\nimport Icon from '../Icon';\nimport { breakpoint } from '../../styling/mixins/breakpoints';\ninterface MoreInfoProps {\n onClosed?: () => void;\n}\n\nconst StyledMoreInfo = styled.div`\n z-index: 150;\n position: fixed;\n inset: 0;\n margin: auto;\n width: 50%;\n height: max-content;\n max-height: 100%;\n background-color: white;\n padding: 4rem;\n box-sizing: border-box;\n overflow-y: auto;\n ${breakpoint('small', 'down')} {\n width: 100%;\n height: 100%;\n padding: 1.6rem;\n }\n\n .moreInfo-title {\n display: flex;\n justify-content: space-between;\n align-items: center;\n ${breakpoint('small', 'down')} {\n display: none;\n }\n }\n .mobileMoreInfo-title {\n display: flex;\n flex-direction: column;\n align-items: center;\n ${breakpoint('small', 'up')} {\n display: none;\n }\n }\n .moreInfo-description {\n margin-top: 1.6rem;\n }\n .icon {\n cursor: pointer;\n }\n .icon-mobile {\n align-self: flex-end;\n }\n .title-mobile {\n align-self: flex-start;\n }\n`;\n\nconst MaterialCalculatorMoreInfo = ({ onClosed }: MoreInfoProps) => {\n const { moreInfoTitle, moreInfoDescription } = useTypedSelector(\n (state) => state.materialCalculator\n );\n\n const dispatch = useDispatch();\n const [open, setOpen] = useState(true);\n const onKeyDown = (e) => {\n if (e.key == 'Escape') {\n setOpen(false);\n }\n };\n\n useEffect(() => {\n dispatch(\n addOverlay('MaterialCalculatorMoreInfo', () => {\n setOpen(false);\n })\n );\n document.addEventListener('keydown', onKeyDown, false);\n\n return () => {\n document.removeEventListener('keydown', onKeyDown, false);\n };\n }, [dispatch]);\n\n useEffect(() => {\n if (!open) {\n dispatch(removeOverlay('MaterialCalculatorMoreInfo'));\n onClosed && onClosed();\n }\n }, [dispatch, open, onClosed]);\n\n const onClick = () => {\n setOpen(false);\n };\n\n return (\n \n {moreInfoTitle && (\n \n {moreInfoTitle}{' '}\n
\n )}\n {moreInfoTitle ? (\n \n
\n ) : null}\n {moreInfoDescription?.value ? (\n \n );\n};\n\nexport default MaterialCalculatorMoreInfo;\n","import React, { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport { getColor } from '../../styling/mixins/colors';\nimport { text } from '../../styling/mixins/typography';\nimport { flexColumn } from '../../styling/utils/flex';\nimport {\n MaterialCalculatorFloor,\n MaterialCalculatorRoom,\n} from '../../Types/MaterialCalculator';\nimport MaterialCalculatorAdvancedTab from './MaterialCalculator.Advanced';\nimport Dropdown from '../Dropdown';\nimport Input from '../Inputs/Input';\nimport { materialCalculatorActions } from '../../Reducers/MaterialCalculator.reducer';\nimport { useDispatch } from 'react-redux';\nimport Checkbox from '../Inputs/Checkbox';\nimport Collapsible from '../Collapsible';\nimport { translate } from '../../Services/translation';\nimport { breakpoint } from '../../styling/mixins/breakpoints';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport { addOverlay, removeOverlay } from '../../Actions/Overlay.action';\nimport MaterialCalculatorMoreInfo from './MaterialCalculator.MoreInfo';\n\nconst StyledFloorItem = styled.div`\n display: grid;\n align-items: center;\n box-sizing: border-box;\n\n border-bottom: 1px solid ${getColor('grey', 300)};\n h5 {\n margin-bottom: 0.8rem;\n }\n\n .labelWrapper {\n background-color: ${getColor('primary')};\n padding: 0.8rem 1.6rem;\n margin-bottom: 0;\n }\n\n .collapsible {\n border: none !important;\n margin-bottom: 0.4rem;\n }\n\n .ReactCollapse--content {\n display: flex;\n flex-direction: column;\n gap: 1.6rem;\n padding: 1.6rem;\n border-bottom: 1px solid ${getColor('grey', 300)};\n\n button {\n max-width: fit-content;\n }\n }\n\n .dropdown-wrapper {\n display: flex;\n ${flexColumn}\n flex: 1;\n width: 100%;\n }\n\n .installationType-label {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .more-info {\n cursor: pointer;\n }\n\n .checkbox-wrapper {\n flex: 1;\n }\n\n .input-wrapper {\n flex: 1;\n\n ${breakpoint('large')} {\n & input {\n max-height: 42px;\n }\n }\n }\n\n .room-row {\n display: flex;\n flex-direction: column !important;\n gap: 1.6rem;\n align-items: center;\n }\n\n .add-room {\n padding-left: unset !important;\n ${breakpoint('small', 'down')} {\n padding-left: 1rem !important;\n }\n }\n\n .mc-room__footer {\n display: flex;\n\n & button {\n color: ${getColor('alert')};\n }\n }\n`;\n\nconst MCCalculatorFloorItem = ({\n floor,\n room,\n roomIndex,\n floorIndex,\n}: {\n floor: MaterialCalculatorFloor;\n room: MaterialCalculatorRoom;\n roomIndex: number;\n floorIndex: number;\n}) => {\n const { installationTypes, DisplayMoreInfo } = useTypedSelector(\n (state) => state.materialCalculator\n );\n\n const calculateTurnZone = (area: number) => {\n return (Math.sqrt(area) * 2).toFixed(2);\n };\n const dispatch = useDispatch();\n\n const [moreInfoOpen, setMoreInfoOpen] = useState(false);\n const OnClick = () => {\n setMoreInfoOpen(true);\n };\n\n useEffect(() => {\n room.area &&\n room.installationType?.showTurnZoneInput &&\n dispatch(\n materialCalculatorActions.setRoomInstallationData({\n floorIndex: floorIndex,\n roomIndex: roomIndex,\n data: calculateTurnZone(room.area),\n key: 'turnZone',\n })\n );\n }, [\n room.installationData,\n dispatch,\n floorIndex,\n room.area,\n roomIndex,\n room.installationType?.showTurnZoneInput,\n ]);\n\n const roomNo = roomIndex + 1;\n\n return floor ? (\n \n {moreInfoOpen ? (\n setMoreInfoOpen(false)} />\n ) : null}\n {translate('materialcalculator.room') + ' ' + roomNo}
\n \n {\n dispatch(\n materialCalculatorActions.setRoomArea({\n floorIndex: floorIndex,\n roomIndex: roomIndex,\n area: e.target.valueAsNumber,\n })\n );\n room.installationType?.showTurnZoneInput &&\n dispatch(\n materialCalculatorActions.setRoomInstallationData({\n floorIndex: floorIndex,\n roomIndex: roomIndex,\n data: calculateTurnZone(e.target.valueAsNumber),\n key: 'turnZone',\n })\n );\n }}\n />\n \n {installationTypes && (\n <>\n \n ({\n label: type.name,\n value: JSON.stringify(type),\n }))}\n onChange={({ value }) =>\n dispatch(\n materialCalculatorActions.setRoomInstallationType({\n floorIndex: floorIndex,\n roomIndex: roomIndex,\n installationType: JSON.parse(value),\n })\n )\n }\n />\n \n )}\n \n \n \n dispatch(\n materialCalculatorActions.removeRoom({\n floorIndex: floorIndex,\n roomIndex: roomIndex,\n })\n )\n }\n >\n {translate('materialcalculator.removeroom')}\n \n \n \n ) : null;\n};\n\nexport default MCCalculatorFloorItem;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { getColor } from '../../styling/mixins/colors';\nimport MCCalculatorRoomItem from './MaterialCalculator.RoomItem';\nimport { materialCalculatorActions } from '../../Reducers/MaterialCalculator.reducer';\nimport { useDispatch } from 'react-redux';\nimport { MaterialCalculatorFloor } from '../../Types/MaterialCalculator';\nimport { translate } from '../../Services/translation';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport { cells, grid } from '../../styling/utils/grid';\nimport { breakpoint } from '../../styling/mixins/breakpoints';\n\nconst StyledMCFloorWrapper = styled.div`\n margin-top: 2rem;\n padding: 1.6rem;\n box-sizing: border-box;\n border: 1px solid ${getColor('grey', 300)};\n background: ${getColor('grey', 100)};\n\n .mc-floor__header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1.6rem;\n }\n\n .room-grid {\n ${grid}\n ${cells(3)}\n ${breakpoint('small', 'down')} {\n ${cells(2)}\n }\n ${breakpoint('xsmall', 'down')} {\n ${cells(1)}\n }\n }\n\n .addButton {\n color: ${getColor('grey')};\n & .icon {\n color: ${getColor('grey')};\n }\n }\n\n .mc-floor__footer {\n margin-top: 1.2rem;\n }\n\n & input,\n .dropdown-select,\n .options-list {\n background: ${getColor('white')};\n }\n`;\n\nconst MCFloorItemWrapper = ({\n floor,\n index,\n}: {\n floor: MaterialCalculatorFloor;\n index: number;\n}) => {\n const dispatch = useDispatch();\n const floorNumber = index + 1;\n return (\n \n \n \n {translate('materialcalculator.floor')} {floorNumber}\n
\n \n dispatch(\n materialCalculatorActions.removeFloor({ floorIndex: index })\n )\n }\n >\n \n \n {floor.rooms?.map((room, roomIndex) => (\n \n dispatch(\n materialCalculatorActions.setRooms({\n floorIndex: index,\n floorId: floor.id,\n })\n )\n }\n >\n \n \n );\n};\n\nexport default MCFloorItemWrapper;\n","import styled from 'styled-components';\nimport { getColor } from '../../../../styling/mixins/colors';\nimport { text } from '../../../../styling/mixins/typography';\n\nexport const StyledLandscapeProductCard = styled.div`\n display: flex;\n background-color: ${getColor('grey', 100)};\n padding: 1.2rem;\n gap: 1.2rem;\n margin-bottom: 0.8rem;\n\n .buy-button {\n flex-direction: column;\n\n .quantity-input input {\n ${text('large')}\n padding: 0.8rem 1.2rem;\n max-width: 100%;\n }\n\n button {\n display: flex;\n align-items: center;\n }\n }\n\n .image-wrapper {\n background-color: ${getColor('white')};\n max-width: 100px;\n width: 100%;\n height: 100px;\n position: relative;\n\n img {\n width: 100%;\n aspect-ratio: 1/1;\n object-fit: cover;\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.04);\n pointer-events: none;\n }\n }\n\n .information {\n display: flex;\n flex-direction: column;\n gap: 0.8rem;\n flex: 1;\n }\n\n .overline {\n ${text('medium')}\n color: ${getColor('grey', 500)};\n margin-bottom: 0.2rem;\n }\n\n .name {\n ${text('large')}\n font-weight: bold;\n }\n\n .description {\n ${text('medium')};\n }\n\n .price {\n display: flex;\n flex-direction: column;\n text-align: right;\n }\n\n .original-price {\n ${text('small')}\n text-decoration: line-through;\n font-weight: 400;\n color: ${getColor('grey', 500)};\n }\n\n .campaign-price {\n color: ${getColor('red')};\n }\n\n .right-col {\n display: flex;\n flex-direction: column;\n text-align: right;\n }\n`;\n\nexport const StyledProductTagWrapperLandscape = styled.div`\n display: flex;\n gap: 0.8rem;\n margin-bottom: 0.4rem;\n`;\n\nexport const StyledBrandLogo = styled.img`\n height: 20px;\n width: auto;\n`;\n","import React from 'react';\nimport StockStatus from '../../StockStatus/StockStatus';\nimport ProductCardProps from '../../ProductCards/types/ProductCardProps';\nimport {\n StyledBrandLogo,\n StyledLandscapeProductCard,\n StyledProductTagWrapperLandscape,\n} from './styles/ProductCardLandscape.styling';\nimport ResponsiveImage from '../../ResponsiveImage/ResponsiveImage';\nimport ProductTag from '../../ProductTags/ProductTag';\n\nconst MaterialCalculatorProductCard = ({\n product,\n isVariantListing = false,\n lazyLoadImage,\n}: ProductCardProps) => {\n return (\n \n \n {product.images && product.images.length > 0 && (\n \n \n {product.tags.map((tag) => (\n \n {tag.name}\n \n ))}\n \n ) : null}\n \n {product.name}\n \n {product.id}
\n \n {product.price.formattedCampaignPrice}{' '}\n \n {product.price.formattedPrice}\n \n
\n ) : (\n product.price.formattedPrice && (\n {product.price.formattedPrice}
\n )\n )}\n {product.quantity > 1 && (\n \n {product.quantity} st
\n \n )}\n \n \n \n );\n};\n\nexport default MaterialCalculatorProductCard;\n","import { MaterialCalculatorRoom } from '../../../Types/MaterialCalculator';\nimport React from 'react';\nimport Collapsible from '../../Collapsible';\nimport styled from 'styled-components';\nimport { getColor } from '../../../styling/mixins/colors';\nimport { text } from '../../../styling/mixins/typography';\nimport { translate } from '../../../Services/translation';\nimport { breakpoint } from '../../../styling/mixins/breakpoints';\n\nconst StyledMenuItem = styled.div`\n margin-bottom: 0.8rem;\n\n h5 {\n margin-top: 10px;\n }\n\n .disclaimer-list {\n display: flex;\n gap: 0.8rem;\n flex-direction: column;\n ${breakpoint('small', 'up')} {\n flex-direction: row;\n }\n }\n li {\n font-size: 1.4rem;\n ${text('bold')}\n }\n`;\nconst MCDisclaimerItem = ({\n room,\n index,\n}: {\n room: MaterialCalculatorRoom;\n index: number;\n}) => {\n const roomNo = index + 1;\n return (\n \n {room.materialCalculatorFormulas && (\n \n \n - \n {' '}\n {translate('materialcalculator.room')} \n {roomNo}\n
\n {room.materialCalculatorFormulas?.coilQuantity && (\n - \n {translate('materialcalculator.coilquantity')}: \n {room.materialCalculatorFormulas?.coilQuantity}\n
\n )}\n {room.materialCalculatorFormulas?.coilLength && (\n - \n {translate('materialcalculator.coillength')}: \n {room.materialCalculatorFormulas?.coilLength.toFixed(2)}\n
\n )}\n
\n \n )}\n \n );\n};\n\nexport default MCDisclaimerItem;\n","import React from 'react';\nimport { useDispatch } from 'react-redux';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport MCDisclaimerItem from './utils/_materialCalculatorDisclaimerItem';\nimport styled from 'styled-components';\nimport { getColor } from '../../styling/mixins/colors';\nimport EditorString from '../EditorString/EditorString';\nimport { translate } from '../../Services/translation';\nimport Icon from '../Icon';\n\nconst StyledDisclaimer = styled.div`\n background-color: ${getColor('primary', 100)};\n border: 1px solid ${getColor('primary', 800)};\n gap: 0.8rem;\n\n .disclaimer-title {\n padding: 1.2rem;\n gap: 0.8rem;\n padding-bottom: unset;\n display: flex;\n align-items: center;\n }\n .disclaimer-description {\n font-size: 1.6rem;\n margin-bottom: 0.8rem;\n }\n .disclaimer-content {\n padding: 0.4rem 1.2rem 1.2rem 4.4rem;\n }\n .floor-item {\n margin-bottom: 1.2rem;\n }\n`;\n\nconst MaterialCalculatorDisclaimer = () => {\n const { floors, result, shunt, disclaimerDescription } = useTypedSelector(\n (state) => state.materialCalculator\n );\n\n const dispatch = useDispatch();\n\n return (\n \n \n
\n \n \n {translate('materialcalculator.floor')} {floorIndex + 1}\n
\n {floor.rooms?.map((room, roomIndex) => (\n \n );\n};\n\nexport default MaterialCalculatorDisclaimer;\n","import Product from '../../Types/Product';\nimport React, { useCallback, useState } from 'react';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport MaterialCalculatorProductCard from './utils/_materialCalculatorProductCard';\nimport { addMultiple } from '../../Services/MaterialCalculator.service';\nimport {\n receive as receiveCart,\n triggerAddToCartAnimation,\n} from '../../Actions/Cart.action';\nimport Button from '../Button';\nimport { useDispatch } from 'react-redux';\nimport LoadingSpinner from '../LoadingSpinner';\nimport styled, { keyframes } from 'styled-components';\nimport { breakpoint } from '../../styling/mixins/breakpoints';\nimport { translate } from '../../Services/translation';\nimport MaterialCalculatorDisclaimer from './MaterialCalculator.Disclaimer';\n\nconst rotate = keyframes`\nfrom {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n`;\n\nconst StyledProductListing = styled.div`\n .buy-button {\n flex-grow: 1;\n align-self: stretch;\n position: relative;\n width: 100%;\n margin-top: 1.6rem;\n margin-bottom: 0.8rem;\n }\n .loading-spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto;\n & svg {\n width: 1.6rem;\n height: 1.6rem;\n animation: ${rotate} 2s linear infinite;\n ${breakpoint('large')} {\n width: 2.4rem;\n height: 2.4rem;\n }\n }\n }\n`;\n\nconst MaterialCalculatorProductListing = () => {\n const { result } = useTypedSelector((state) => state.materialCalculator);\n\n const dispatch = useDispatch();\n\n const [isLoading, setIsLoading] = useState(false);\n const [showLoadingSpinner, setShowLoadingSpinner] = useState(false);\n\n const onClick = async () => {\n setIsLoading(true);\n const loadingSpinnerTimeout = setTimeout(\n () => setShowLoadingSpinner(true),\n 150\n );\n try {\n const cart = await addMultiple(\n result?.products ? result?.products : null\n );\n dispatch(receiveCart(cart));\n dispatch(triggerAddToCartAnimation());\n } catch (err) {\n // TODO Error handling\n alert('Kunde inte lägga i varukorgen');\n console.log(err);\n } finally {\n clearTimeout(loadingSpinnerTimeout);\n setShowLoadingSpinner(false);\n setIsLoading(false);\n }\n };\n\n const LoadingComponent = useCallback(\n () => (\n <>\n \n \n \n {result?.rooms && (\n \n {result?.rooms.map((room) => (\n \n {room.materialCalculatorFormulas?.coilQuantity && (\n {room.materialCalculatorFormulas.coilQuantity}
\n )}\n {room.materialCalculatorFormulas?.coilLength && (\n {room.materialCalculatorFormulas.coilLength}
\n )}\n \n ))}\n \n )}\n {result?.products &&\n result.products.map((product) => (\n onClick()}\n disabled={isLoading}\n >\n {showLoadingSpinner ? (\n {translate('materialcalculator.buypackage')}
\n )}\n \n \n );\n};\n\nexport default MaterialCalculatorProductListing;\n","import { post, put } from '../Services/http';\nimport Product from '../Types/Product';\nimport { pushEcommerce, dataLayerAddToCart } from '../Services/Gtm.service';\n\nexport const addMultiple = async (products: Product[]) => {\n if (\n products.filter((p) => !p.quantity || isNaN(p.quantity) || p.quantity <= 0)\n .length > 0\n ) {\n throw 'Invalid quantity';\n }\n\n const response = await post(\n '/api/cart/addMultiple',\n products.map((product) => {\n return {\n articleNumber: product.id,\n quantity: product.quantity,\n };\n })\n );\n\n try {\n let gtmProducts = products.map((prod) => prod.gtmProduct);\n if (gtmProducts) {\n pushEcommerce({\n event: 'productImpressions',\n ecommerce: {\n currencyCode: gtmProducts[0].currency,\n add: {\n products: gtmProducts,\n },\n },\n });\n }\n } catch (error) {\n console.log('error', error);\n }\n\n return response.json();\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport { getColor } from '../../../styling/mixins/colors';\nimport { materialCalculatorActions } from '../../../Reducers/MaterialCalculator.reducer';\nimport { useDispatch } from 'react-redux';\nimport { useTypedSelector } from '../../../Hooks/useTypedSelector';\nimport { translate } from '../../../Services/translation';\n\nconst StyledInput = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n input[type='checkbox'] {\n height: 0;\n width: 0;\n visibility: hidden;\n }\n\n label {\n cursor: pointer;\n text-indent: -9999px;\n width: 4rem;\n height: 2rem;\n background: grey;\n display: block;\n border-radius: 100px;\n position: relative;\n margin-bottom: unset !important;\n }\n\n label:after {\n content: '';\n position: absolute;\n top: 2px;\n left: 2px;\n width: 1.6rem;\n height: 1.6rem;\n background: #fff;\n border-radius: 90px;\n transition: 0.3s;\n }\n\n input:checked + label {\n background: ${getColor('primary', 500)};\n }\n\n input:checked + label:after {\n left: calc(100% - 2px);\n transform: translateX(-100%);\n }\n span {\n margin-left: 1.2rem;\n color: #171717;\n cursor: pointer;\n font-size: 1.6rem;\n line-height: 150%;\n font-weight: 700;\n }\n`;\n\nconst MaterialCalculatorToggle = () => {\n const dispatch = useDispatch();\n const { shunt } = useTypedSelector((state) => state.materialCalculator);\n\n return (\n \n \n dispatch(\n materialCalculatorActions.setShunt({\n shunt: e.target.checked,\n })\n )\n }\n type=\"checkbox\"\n id=\"switch\"\n />\n \n \n dispatch(\n materialCalculatorActions.setShunt({\n shunt: !shunt,\n })\n )\n }\n >\n {translate('materialcalculator.addshunt')}\n \n \n );\n};\n\nexport default MaterialCalculatorToggle;\n","import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { cells, section, span } from '../../styling/utils/grid';\nimport EditorString from '../EditorString/EditorString';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport Dropdown from '../Dropdown';\nimport { DropdownOption } from '../Dropdown';\nimport MCFloorItemWrapper from './MaterialCalculator.FloorItemWrapper';\nimport { useDispatch } from 'react-redux';\nimport {\n getProducts,\n materialCalculatorActions,\n} from '../../Reducers/MaterialCalculator.reducer';\nimport Button from '../Button';\nimport MaterialCalculatorProductListing from './MaterialCalculator.ProductListing';\nimport MCSideMenu from './MaterialCalculator.SideMenu';\nimport { breakpoint } from '../../styling/mixins/breakpoints';\nimport { translate } from '../../Services/translation';\nimport { text } from '../../styling/mixins/typography';\nimport { getColor } from '../../styling/mixins/colors';\nimport Checkbox from '../Inputs/Checkbox';\nimport MaterialCalculatorMoreInfo from './MaterialCalculator.MoreInfo';\nimport MaterialCalculatorToggle from './utils/_materialCalculatorToggle';\nimport LoadingSpinner from '../LoadingSpinner';\n\nconst rotate = keyframes`\nfrom {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n`;\n\ninterface StyledMaterialCalculatorProps {\n $error?: boolean;\n}\n\nconst StyledMcWrapperContainer = styled.div`\n margin-top: 2.4rem;\n label {\n ${text('large')}\n color: ${getColor('grey', 900)};\n font-weight: 700;\n margin-bottom: 0.8rem;\n }\n .mc-options {\n display: flex;\n flex-direction: row;\n margin-top: 2.4rem;\n gap: 3.2rem;\n align-items: center;\n justify-content: space-between;\n ${breakpoint('small', 'down')} {\n flex-direction: column;\n gap: 1.4rem;\n }\n & .mc-checkbox label {\n margin-bottom: 0;\n }\n }\n\n .add-floor-button {\n width: unset;\n ${breakpoint('small', 'down')} {\n width: 100%;\n }\n }\n\n .button {\n margin-top: 1.6rem;\n margin-bottom: 0.8rem;\n width: 100%;\n background-color: ${(p) => (p.$error ? getColor('alert', 500) : null)};\n border-color: ${(p) => (p.$error ? getColor('alert', 500) : null)};\n :hover {\n background-color: ${(p) => (p.$error ? getColor('alert', 300) : null)};\n border-color: ${(p) => (p.$error ? getColor('alert', 500) : null)};\n }\n }\n\n .loading-spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto;\n & svg {\n width: 1.6rem;\n height: 1.6rem;\n animation: ${rotate} 2s linear infinite;\n ${breakpoint('large')} {\n width: 2.4rem;\n height: 2.4rem;\n }\n }\n }\n`;\n\nconst MCContainer = () => {\n const {\n errors,\n floors,\n result,\n shunt,\n productsLoading,\n error,\n } = useTypedSelector((state) => state.materialCalculator);\n\n var materialCalculatorState = useTypedSelector(\n (state) => state.materialCalculator\n );\n const dispatch = useDispatch();\n\n useEffect(() => {\n dispatch(materialCalculatorActions.setFloors());\n }, []);\n\n useEffect(() => {\n dispatch(\n materialCalculatorActions.setError({\n error: false,\n })\n );\n }, [dispatch, floors]);\n\n const LoadingComponent = useCallback(\n () => (\n <>\n \n \n \n {floors?.map((floor, index) => (\n dispatch(materialCalculatorActions.setFloors())}\n >\n {translate('materialcalculator.addfloor')}\n \n \n \n floors && dispatch(getProducts(materialCalculatorState))\n }\n disabled={productsLoading}\n >\n {productsLoading ? (\n {translate('general.error')}
\n ) : (\n {translate('materialcalculator.calculate')}
\n )}\n \n {result?.products && result?.products.length > 0 && (\n \n );\n};\n\nexport default MCContainer;\n","import React, { useEffect, useState } from 'react';\nimport { translate } from '../../../Services/translation';\nimport Icon from '../../Icon';\nimport Input from '../../Inputs/Input';\nimport Dropdown from '../../Dropdown';\nconst ROOM_TYPES = [\n 'Sovrum',\n 'Hall',\n 'Kök',\n 'Badrum',\n 'Vardagsrum',\n 'WC',\n 'Garage/Verkstad',\n 'Uterum',\n 'Övrigt',\n];\nconst ROOM_FLOORING = [\n 'På träbjälklag',\n 'På befintligt trägolv',\n 'I Glespanel',\n 'På befintlig betong',\n 'I ny betongplatta',\n];\nconst ROOM_MATERIAL = ['Klinker/Sten/Betong', 'Trä/Parkett'];\n\nconst RoomContainer = ({ room, idx, removeRoom, updateRoom }) => {\n const [roomSpecs, setRoomSpecs] = useState(room);\n\n const onChange = (value, key) => {\n const updatedRoomSpecs = roomSpecs;\n updatedRoomSpecs[key] = value;\n setRoomSpecs(updatedRoomSpecs);\n updateRoom(idx, updatedRoomSpecs);\n };\n\n return (\n \n \n \n {translate('quotation.room')} {idx + 1}\n
\n {idx > 0 && (\n \n )}\n \n \n \n onChange(e.target.value, 'yta')}\n label={translate('quotation.room-area')}\n type=\"number\"\n />\n ({\n value: roomType,\n label: roomType,\n }))}\n selectedValue={roomSpecs.rum}\n onChange={({ value }) => onChange(value, 'rum')}\n label={translate('quotation.room-type')}\n placeholder={translate('general.select')}\n />\n \n \n ({\n value: flooring,\n label: flooring,\n }))}\n selectedValue={roomSpecs.typ}\n onChange={({ value }) => onChange(value, 'typ')}\n label={translate('quotation.room-flooring')}\n placeholder={translate('general.select')}\n />\n ({\n value: material,\n label: material,\n }))}\n selectedValue={roomSpecs.material}\n onChange={({ value }) => onChange(value, 'material')}\n label={translate('quotation.room-material')}\n placeholder={translate('general.select')}\n />\n \n \n \n );\n};\n\nexport default RoomContainer;\n","import React, { useState } from 'react';\nimport RadioButton from '../../Inputs/Radiobutton';\nimport { translate } from '../../../Services/translation';\nimport Icon from '../../Icon';\nimport RoomContainer from './RoomContainer';\nimport { v4 } from 'uuid';\nconst ERROR_CLASSES = ['!border-2', 'border-solid', '!border-error-500'];\n\nconst FloorContainer = ({ floor, idx, updateFloor, onInvalid }) => {\n const [rooms, setRooms] = useState(floor.r);\n const [plan, setPlan] = useState(floor.plan);\n const floorIdx = idx;\n const generateNewRoom = () => {\n return {\n yta: 0,\n rum: '',\n typ: '',\n material: '',\n key: v4(),\n };\n };\n\n const removeRoom = (idx) => {\n const updatedRooms = rooms.filter((_, i) => i !== idx);\n setRooms(updatedRooms);\n updateFloor(floorIdx, updatedRooms, null);\n };\n\n const updateRoom = (roomIdx, roomSpecs) => {\n const updatedRooms = rooms;\n updatedRooms[roomIdx] = roomSpecs;\n setRooms(updatedRooms);\n updateFloor(floorIdx, updatedRooms, null);\n };\n\n const addRoom = () => {\n const newRoom = generateNewRoom();\n const updatedRooms = [...rooms, newRoom];\n setRooms(updatedRooms);\n updateFloor(floorIdx, updatedRooms, null);\n };\n\n const updateFloorType = (type) => {\n setPlan(type);\n updateFloor(floorIdx, null, type);\n };\n\n const onRadioClick = (e) => {\n updateFloorType(e.target.value);\n\n if (e.target.classList.contains(...ERROR_CLASSES)) {\n removeErrorClasses(e.target);\n }\n };\n\n const removeErrorClasses = (input) => {\n if (input.type == 'radio') {\n const radioButtons = document.getElementsByName(input.name);\n\n radioButtons.forEach((radioButton) => {\n radioButton.classList.remove(...ERROR_CLASSES);\n });\n }\n };\n\n return (\n \n \n {translate('quotation.floor')} {idx + 1}\n
\n \n {translate('quotation.floortype')}\n \n \n onRadioClick(e)}\n onInvalid={(e) => onInvalid(e)}\n required\n />\n onRadioClick(e)}\n onInvalid={(e) => onInvalid(e)}\n />\n onRadioClick(e)}\n onInvalid={(e) => onInvalid(e)}\n />\n \n {rooms.length > 0 && (\n \n {rooms.map((room, idx) => (\n addRoom()}\n >\n {translate('quotation.add-room')}
\n \n \n );\n};\n\nexport default FloorContainer;\n","import React, { useEffect } from 'react';\nimport { translate } from '../../../Services/translation';\n\nconst StatusMessage = ({\n status,\n setStatus,\n}: {\n status: string;\n setStatus: React.Dispatch>;\n}) => {\n const onClick = (event) => {\n event.preventDefault();\n if (status == 'success') {\n window.location.href = event.target.href;\n } else \n setStatus('');\n };\n\n useEffect(() => {\n window.scrollTo({\n top: 0,\n behavior: 'smooth',\n });\n }, []);\n\n return (\n \n \n {translate(\n status == 'success'\n ? 'quotation.success-title'\n : 'quotation.error-title'\n )}\n
\n \n {translate(\n status == 'success'\n ? 'quotation.success-message'\n : 'quotation.error-message'\n )}\n \n \n {translate(\n status == 'success'\n ? 'quotation.success-btn'\n : 'quotation.error-btn'\n )}\n \n \n );\n};\n\nexport default StatusMessage;\n","import React, { useEffect, useState } from 'react';\nimport EditorString from '../EditorString/EditorString';\nimport { translate } from '../../Services/translation';\nimport RadioButton from '../Inputs/Radiobutton';\nimport FloorContainer from './ui/FloorContainer';\nimport Input from '../Inputs/Input';\nimport TextArea from '../Inputs/TextArea';\nimport Checkbox from '../Inputs/Checkbox';\nimport { v4 } from 'uuid';\nimport StatusMessage from './ui/StatusMessage';\nimport clsx from 'clsx';\nconst QUOTATION_TYPE = ['Nybyggnation', 'Renovering', 'Tillbyggnad'];\nconst ERROR_CLASSES = ['!border-2', 'border-solid', '!border-error-500'];\n\nconst QuotationRequest = ({\n title,\n description,\n termsAndConditionsLink,\n}) => {\n const [status, setStatus] = useState('');\n const [currentError, setCurrentError] = useState(false);\n const [generalInfo, setGeneralInfo] = useState({\n typ: '',\n befintliga_vattenradiatorer: '',\n });\n const [floors, setFloors] = useState([\n {\n plan: '',\n r: [{ yta: 0, rum: '', typ: '', material: '', key: v4() }],\n key: v4(),\n },\n ]);\n const [userInfo, setUserInfo] = useState({\n namn: '',\n adress: '',\n postnummer: '',\n ort: '',\n email: '',\n telefonnummer: '',\n fastighetsbeteckning: '',\n information: '',\n files: null,\n });\n\n const generateNewFloor = () => {\n return {\n plan: '',\n r: [{ yta: 0, rum: '', typ: '', material: '', key: v4() }],\n key: v4(),\n };\n };\n\n const updateFloor = (floorIdx, rooms, type) => {\n const updatedFloors = [...floors];\n if (rooms != null) {\n const updatedRooms = rooms;\n updatedFloors[floorIdx]!.r = updatedRooms;\n } else {\n updatedFloors[floorIdx]!.plan = type;\n }\n setFloors(updatedFloors);\n };\n\n const changeFloorAmount = (num) => {\n let updatedFloors = [...floors];\n\n if (num > floors.length) {\n for (let i = floors.length; i < num; i++) {\n const newFloor = generateNewFloor();\n updatedFloors = [...updatedFloors, newFloor];\n }\n } else {\n updatedFloors = updatedFloors.slice(0, num);\n }\n setFloors(updatedFloors);\n };\n\n const updateGeneralInfo = (value, key) => {\n const updatedInfo = Object.assign({}, generalInfo);\n updatedInfo[key] = value;\n setGeneralInfo(updatedInfo);\n };\n\n const updateUserInfo = (value, key) => {\n const updatedInfo = Object.assign({}, userInfo);\n updatedInfo[key] = value;\n setUserInfo(updatedInfo);\n };\n\n const handleInvalidInput = (e) => {\n e.preventDefault();\n\n setCurrentError(true);\n\n const invalidInput = e.target;\n\n invalidInput.classList.add(...ERROR_CLASSES);\n };\n\n const removeErrorClasses = (input) => {\n if (input.type == 'radio') {\n const radioButtons = document.getElementsByName(input.name);\n\n radioButtons.forEach((radioButton) => {\n radioButton.classList.remove(...ERROR_CLASSES);\n });\n } else {\n input.classList.remove(...ERROR_CLASSES);\n }\n };\n\n const onRadioClick = (e, key) => {\n updateGeneralInfo(e.target.value, key);\n\n if (e.target.classList.contains(...ERROR_CLASSES)) {\n removeErrorClasses(e.target);\n }\n };\n\n const onInputChange = (e, key) => {\n updateUserInfo(e.target.value, key);\n\n if (e.target.classList.contains(...ERROR_CLASSES)) {\n removeErrorClasses(e.target);\n }\n };\n\n const onSubmit = async (e) => {\n e.preventDefault();\n\n const formData = new FormData();\n\n formData.append('OffertFormSent', 'yes');\n\n for (const key in generalInfo) {\n formData.append(key, generalInfo[key]);\n }\n\n formData.append('antal_plan', `${floors.length}`);\n\n for (let i = 0; i < floors.length; i++) {\n const floor = floors[i];\n\n formData.append(`p${i + 1}_antal_rum`, `${floor!.r.length}`);\n\n for (const objKey in floor) {\n if (objKey === 'r') {\n for (let j = 0; j < floor[objKey].length; j++) {\n for (const roomKey in floor[objKey][j]) {\n formData.append(\n `p${i + 1}_${objKey}${j + 1}_${roomKey}`,\n floor[objKey][j]![roomKey]\n );\n }\n }\n } else {\n formData.append(`p${i + 1}_${objKey}`, floor[objKey]);\n }\n }\n }\n\n for (const key in userInfo) {\n formData.append(key, userInfo[key]);\n }\n\n try {\n const response = await fetch(\n 'https://www.idrelay.com/customers/14/kelvin/offertformgvb.asp',\n {\n method: 'POST',\n body: formData,\n }\n );\n\n if (response.ok) {\n setStatus('success');\n } else {\n setStatus('error');\n }\n } catch (error) {\n setStatus('error');\n }\n };\n\n useEffect(() => {\n setCurrentError(false);\n }, [generalInfo, userInfo]);\n\n useEffect(() => {\n const errorMessage = document.getElementById('error-message');\n if (currentError) {\n errorMessage?.scrollIntoView({\n behavior: 'smooth',\n block: 'end',\n inline: 'start',\n });\n }\n }, [currentError]);\n\n return (\n \n {status ? (\n {title}
}\n {description && \n {translate('quotation.submit-error')}\n \n )}\n {' '}\n \n )}\n \n );\n};\n\nexport default QuotationRequest;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport { translate } from '../../Services/translation';\nimport { getColor } from '../../styling/mixins/colors';\nimport { text } from '../../styling/mixins/typography';\nimport { cells } from '../../styling/utils/grid';\n\ninterface VariantSpecRow {\n name: string;\n value: string | number | undefined;\n}\n\nconst StyledTechnicalTable = styled.div`\n border: 1px solid ${getColor('grey', 300)};\n`;\n\nconst StyledTableRow = styled.div`\n padding: 0.8rem;\n display: grid;\n ${cells(2)}\n gap: 1.6rem;\n\n &:nth-child(even) {\n background: ${getColor('grey', 100)};\n }\n\n &:not(:last-child) {\n border-bottom: 1px solid ${getColor('grey', 300)};\n }\n`;\n\nconst StyledPlaceholderRow = styled(StyledTableRow)`\n span {\n grid-column: span 2;\n ${text('large')}\n font-weight: bold;\n }\n`;\n\nconst ProductPageTechnicalTable = () => {\n const [variantSpecs, setVariantSpecs] = useState([]);\n const { selectedVariant } = useTypedSelector((state) => state.productPage);\n\n useEffect(() => {\n selectedVariant &&\n setVariantSpecs([\n { name: 'product.id', value: selectedVariant.id },\n { name: 'product.dimension', value: selectedVariant.dimension },\n { name: 'product.effect', value: selectedVariant.effect },\n { name: 'product.height', value: selectedVariant.height },\n { name: 'product.length', value: selectedVariant.length },\n { name: 'product.weight', value: selectedVariant.weight },\n { name: 'product.width', value: selectedVariant.width },\n ]);\n }, [selectedVariant]);\n\n return (\n <>\n \n {selectedVariant ? (\n <>\n {variantSpecs.length > 0 &&\n variantSpecs\n .filter((spec) => spec.value)\n .map((spec, idx) => (\n \n {translate(spec.name)}\n {spec.value}\n \n ))}{' '}\n \n ) : (\n \n {translate('product.no-variant')}\n \n )}\n \n \n );\n};\n\nexport default ProductPageTechnicalTable;\n","import React from 'react';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport { translate } from '../../Services/translation';\n\nconst ProductPageArticleNumber = () => {\n const { selectedVariant } = useTypedSelector((state) => state.productPage);\n return (\n <>\n {selectedVariant ? (\n \n {translate('product.id')} {selectedVariant?.id}\n \n ) : null}\n \n );\n};\n\nexport default ProductPageArticleNumber;\n","import React from 'react';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport { translate } from '../../Services/translation';\nimport PriceModel from '../../Types/PriceModel';\n\nconst ProductPagePrice = (price: PriceModel) => {\n const priceFrom = price.formattedPrice;\n const { selectedVariant } = useTypedSelector((state) => state.productPage);\n return (\n <>\n {selectedVariant ? (\n \n {selectedVariant.price?.formattedCampaignPrice ? (\n <>\n \n {selectedVariant.price?.formattedCampaignPrice}\n \n \n {selectedVariant.price?.formattedPrice}\n \n
\n ) : (\n \n {translate('product.from')} {priceFrom}\n
\n )}\n \n );\n};\n\nexport default ProductPagePrice;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport StockStatus from '../StockStatus/StockStatus';\n\nconst StyledStockStatusPlaceholder = styled.div`\n height: 24px;\n width: 100%;\n`;\n\nconst ProductPageStockStatus = () => {\n const { selectedVariant } = useTypedSelector((state) => state.productPage);\n\n return selectedVariant ? (\n (hasSelectedVariant);\n const [selectedVariant, setSelectedVariant] = useState(\n hasVariant ? productItem! : null\n );\n\n useEffect(() => {\n if (selectedVariant) {\n dispatch(setBuyButtonArticleNumber(selectedVariant?.id!));\n dispatch(setProductPageSelectedVariant(selectedVariant!));\n setProductPageSelectedVariantQuery(selectedVariant);\n }\n }, [selectedVariant]);\n\n const getOptions = () => {\n return variants.map((variant) => {\n var filteredVariant = variantPickerOptions?.options?.filter(v => v.variantId == variant.id);\n return {\n value: variant.id,\n label: filteredVariant[0]?.firstVariantValue ?? variant.name,\n disabled: false,\n legendLabel: filteredVariant[0]?.firstVariantLabel,\n };\n });\n };\n\n const onChange = (event) => {\n setHasVariant(false);\n let selectedVariantObj = variants.find((v) => v.id == event.value);\n setSelectedVariant(selectedVariantObj);\n };\n\n const compare = (a, b) => {\n if (a.label < b.label) {\n return -1;\n }\n if (a.label > b.label) {\n return 1;\n }\n return 0;\n };\n\n return (\n \n {newsLetterText} \n submitNewsLetterSignUp(e)}>\n {\n setStatus('default');\n setEmaiInputValue(e.target.value);\n }}\n />\n \n {translate('general.add')}\n \n \n {status !== 'default' && (\n \n {status == 'success' && translate('newsletter.success')}\n {status == 'error' && translate('newsletter.error')}\n \n )}\n \n );\n};\n\nexport default NewsLetter;\n","import React, { useCallback } from 'react';\nimport styled from 'styled-components';\nimport Modal from 'react-modal';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport { useDispatch } from 'react-redux';\nimport { setPriceHistoryModalOpen } from '../../Actions/PriceHistory.actions';\nimport Icon from '../Icon';\nimport { text } from '../../styling/mixins/typography';\nimport { breakpoint } from '../../styling/mixins/breakpoints';\nimport { getColor } from '../../styling/mixins/colors';\n\nconst customModalStyles = {\n content: {\n background: 'none',\n padding: 0,\n border: 'none',\n },\n overlay: {\n background: 'rgba(0, 0, 0, 0.8)',\n zIndex: 2003,\n },\n};\n\nconst StyledModalContent = styled.div`\n background-color: ${getColor('grey', 100)};\n margin: auto;\n border: 1px solid ${getColor('grey', 400)};\n border-radius: 4px;\n max-width: 640px;\n transform: translateY(-50%);\n top: 40%;\n position: relative;\n padding: 2.8rem;\n ${breakpoint('large')} {\n padding: 4rem;\n }\n\n .close-button-container {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n font-size: 2.4rem;\n }\n .close {\n position: absolute;\n width: 14px;\n height: 14px;\n top: 5px;\n right: 5px;\n color: ${getColor('grey', 400)};\n cursor: pointer;\n }\n .modal-body {\n ${text('large')}\n }\n .modal-header {\n margin-bottom: 0.8rem;\n }\n .lowest-price {\n margin-top: 0.8rem;\n }\n`;\n\nconst PriceHistoryModal = () => {\n const {\n modalOpen,\n previouslyLowestPrice,\n numberOfDays,\n description,\n title,\n } = useTypedSelector((state) => state.priceHistory);\n\n const dispatch = useDispatch();\n\n const close = useCallback(() => {\n dispatch(\n setPriceHistoryModalOpen(\n false,\n previouslyLowestPrice,\n numberOfDays,\n description,\n title\n )\n );\n }, [dispatch, previouslyLowestPrice, numberOfDays, description, title]);\n\n return (\n \n \n \n \n \n {title}
\n {previouslyLowestPrice}
\n \n \n {description}
\n \n \n \n \n );\n};\n\nexport default PriceHistoryModal;\n","import React from 'react';\nimport { LinkModel } from '../../Types/LinkModel';\nimport styled from 'styled-components';\nimport { cells } from '../../styling/utils/grid';\nimport { getColor } from '../../styling/mixins/colors';\nimport { text } from '../../styling/mixins/typography';\nimport { breakpoint } from '../../styling/mixins/breakpoints';\n\ninterface CardList {\n links: CardItem[];\n}\n\ninterface CardItem {\n link: LinkModel;\n title: string;\n description: string;\n imageUrl: string;\n}\n\nconst StyledWrapper = styled.div<{ amountOfLinks: number }>`\n display: grid;\n gap: 2.4rem;\n position: relative;\n ${(p) => cells(p.amountOfLinks)}\n padding-right: 1.6rem;\n\n ${breakpoint('large')} {\n padding-right: 2.4rem;\n }\n`;\n\nconst StyledLink = styled.a`\n padding: 0;\n display: flex;\n\n img {\n aspect-ratio: 3/2;\n object-fit: cover;\n max-height: 250px;\n width: 100%;\n }\n\n .content {\n display: flex;\n flex-direction: column;\n gap: 0.4rem;\n width: 100%;\n\n .title {\n ${text('medium')}\n font-weight: bold;\n }\n\n .description {\n ${text('small')}\n }\n }\n\n &:hover .icon {\n background-color: ${getColor('primary', 600)};\n }\n`;\n\nconst StyledLinkCard = styled.div`\n display: flex;\n flex-direction: column;\n gap: 0.8rem;\n width: 100%;\n`;\n\nconst MegaMenuCardBlock = ({ links }: CardList) => {\n const Link = React.memo<{ item: CardItem }>(({ item }) => (\n \n \n {item.imageUrl && (\n 
\n )}\n \n {item.title}\n {item.description}\n \n \n \n ));\n\n return (\n \n {links?.map((item) => (\n \n ))}\n \n );\n};\n\nexport default MegaMenuCardBlock;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { StyledBrandLogo } from '../ProductCards/styles/ProductCard.styling';\n\nconst StyledBrandImage = styled.img`\n height: 2.4rem;\n width: auto;\n`;\n\nconst ProductPageBrandImage = ({ brandLogoUrl }: { brandLogoUrl: string }) => {\n return (\n \n };\n title: string;\n}\n\ninterface KeyValuePair {\n key: K;\n value: V;\n}\n\nconst StyledNoSwiperWrapper = styled.div`\n padding-bottom: 3.2rem;\n`;\n\nconst StyledProductSwiper = styled(Swiper)`\n ${swiperCss}\n ${swiperPagination}\n padding-bottom: 3.2rem;\n & .swiper-slide {\n height: auto;\n }\n\n & .swiper-wrapper {\n padding-bottom: 45px;\n }\n\n & .swiper-pagination {\n height: auto;\n bottom: 0;\n }\n\n .swiper-pagination-bullet {\n &-active {\n background-color: ${getColor('primary')};\n }\n }\n`;\n\nconst SimilarProductsSlider = ({ relationProducts, title }: SimilarProductsProps) => {\n const [renderSlider, setRenderSlider] = useState(false);\n const [productList, setProductList] = useState();\n\n useEffect(() => setRenderSlider(true), []);\n\n const { selectedVariant } = useTypedSelector((state) => state.productPage);\n \n useEffect(() => {}, [selectedVariant]);\n\n useEffect(() => {\n if(selectedVariant){\n Object.keys(relationProducts).forEach(key => {\n if(key === selectedVariant.id){\n setProductList(relationProducts[key]?.value)\n }\n })\n }\n else {\n Object.keys(relationProducts).forEach(key => {\n if(key.startsWith('b')){\n setProductList(relationProducts[key]?.value)\n }\n })\n }\n }, [selectedVariant]);\n\n return productList?.length > 0 && renderSlider ? (\n \n {title}
\n \n {productList?.map((product, idx) => (\n \n \n ))}\n \n \n ) : productList?.length > 0 && (\n //Render product block without slider on server to avoid layout shifting\n \n \n );\n};\n\nexport default SimilarProductsSlider;","import { css, createGlobalStyle } from 'styled-components';\nimport { breakpoint } from '../../mixins/breakpoints';\nimport { getColor } from '../../mixins/colors';\nimport { section } from '../../utils/grid';\nimport { hideFor } from '../../utils/visibility';\n\nconst Header = createGlobalStyle`\n #header.header {\n position: sticky;\n top: 0;\n left: 0;\n right: 0;\n z-index: 50;\n background-color: ${getColor('white')};\n }\n .header {\n &__top-section {\n background-color: ${getColor('primary', 500)};\n }\n\n &__main-content {\n ${section}\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 0.8rem;\n padding-bottom: 0.8rem;\n gap: 2.4rem;\n height: ${(p) => p.theme.header.headerMainContentHeightMobile};\n\n ${breakpoint('large')} {\n padding-top: 1.6rem;\n padding-bottom: 1.6rem;\n height: auto;\n }\n }\n\n &__menu-wrapper {\n ${hideFor('large')}\n flex: 1;\n justify-content: start;\n align-items: center;\n }\n\n &__logo-wrapper {\n display: flex;\n flex: 1;\n justify-content: center;\n align-items: center;\n padding: 0;\n\n ${breakpoint('large')} {\n flex: none;\n }\n }\n\n &__logo {\n & img {\n height: 32px;\n width: auto;\n max-width: max-content;\n\n ${breakpoint('large')} {\n height: 40px;\n width: 235px;\n }\n }\n }\n\n &__quick-search {\n &--mobile {\n display: flex;\n padding-bottom: 1.2rem;\n background-color: ${getColor('white')};\n border-bottom: 1px solid ${getColor('grey', 300)};\n height: ${(p) => p.theme.header.headerQuickSearchHeightMobile};\n }\n\n ${breakpoint('large')} {\n display: none;\n }\n\n &--desktop {\n display: none;\n\n ${breakpoint('large')} {\n display: flex;\n flex-grow: 1;\n }\n }\n }\n\n &__components {\n display: flex;\n flex: 1;\n justify-content: flex-end;\n align-items: center;\n box-sizing: border-box;\n gap: 1.6rem;\n padding-left: 0.4rem;\n text-decoration: none;\n\n ${breakpoint('large')} {\n flex: none;\n }\n\n & img {\n width: 20px;\n height: auto;\n }\n\n & .icon {\n font-size: 2rem;\n }\n }\n\n &__navigation {\n border-top: 1px solid ${getColor('grey', 300)};\n border-bottom: 1px solid ${getColor('grey', 300)};\n box-sizing: border-box;\n display: none;\n position: relative;\n z-index: 1;\n\n ${breakpoint('large')} {\n display: block;\n }\n }\n\n &__mobile-button {\n height: 1.5em !important;\n width: 1.5em !important;\n }\n\n & .quick-search {\n padding-bottom: 0.8rem;\n border-bottom: 1px solid ${getColor('grey', 300)};\n\n &__form {\n position: relative;\n }\n\n &__icon {\n position: absolute;\n right: 0;\n margin: 0 1rem;\n max-height: 20px;\n max-width: 20px;\n }\n\n &__magnifier {\n color: ${getColor('grey', 500)} !important;\n }\n\n &__input {\n flex-grow: 1;\n padding: 0 12px 0 12px;\n height: 40px;\n font-family: ${(p) => p.theme.typography.fontFamily};\n font-weight: 400;\n line-height: 150%;\n color: ${getColor('grey', 500)};\n border: 1px solid ${getColor('grey', 400)};\n border-radius: 4px;\n }\n }\n & .navigation {\n position: static;\n }\n\n & .login__btn {\n font-size: 2rem;\n cursor: pointer;\n }\n }\n`;\n\nexport default Header;\n","import { css, createGlobalStyle } from 'styled-components';\nimport { breakpoint } from '../../mixins/breakpoints';\nimport { getColor } from '../../mixins/colors';\nimport { text } from '../../mixins/typography';\nimport { section } from '../../utils/grid';\n\nconst TopMenu = createGlobalStyle`\n .top-menu {\n ${section}\n padding-top: 0.4rem;\n padding-bottom: 0.4rem;\n display: none;\n justify-content: space-between;\n\n ${breakpoint('large')} {\n display: flex;\n }\n\n &__navigation {\n display: flex;\n gap: 1.6rem;\n\n &--left{\n gap: 0.4rem;\n }\n }\n\n &__item {\n ${text('small')}\n color: ${getColor('grey', 900)};\n\n &:hover {\n opacity: 0.8;\n }\n }\n\n &__phoneNumber{\n ${text('medium')}\n color: ${getColor('grey', 900)};\n }\n }\n`;\n\nexport default TopMenu;\n","import { createGlobalStyle } from 'styled-components';\nimport { breakpoint } from '../../mixins/breakpoints';\nimport { getColor } from '../../mixins/colors';\nimport { text } from '../../mixins/typography';\nimport { section } from '../../utils/grid';\n\nconst Breadcrumbs = createGlobalStyle`\n .breadcrumbs {\n &__container {\n overflow-x: auto;\n white-space: nowrap;\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n &__list {\n ${section}\n padding-top: 0.8rem;\n padding-bottom: 0.8rem;\n display: flex;\n align-items: center;\n }\n\n &__item {\n ${text('small')}\n display: flex;\n align-items: center;\n\n ${breakpoint('medium')} {\n ${text('medium')}\n }\n\n &--anchor {\n color: ${getColor('grey', 500)};\n\n &:hover {\n text-decoration: underline;\n }\n\n &:last-child {\n color: ${getColor('grey', 900)};\n pointer-events: none;\n padding-right: 0.8rem;\n }\n }\n }\n\n &__icon {\n margin: 0 0.8rem;\n color: ${getColor('grey', 400)};\n }\n }\n`;\n\nexport default Breadcrumbs;\n","import { createGlobalStyle } from 'styled-components';\nimport { breakpoint } from '../../mixins/breakpoints';\nimport { getColor } from '../../mixins/colors';\nimport { displayHeader, text } from '../../mixins/typography';\nimport { section } from '../../utils/grid';\n\nconst BrandsList = createGlobalStyle`\n .brands-list {\n width: 100%;\n\n &__container {\n ${section}\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 2.4rem;\n\n ${breakpoint('medium')} {\n padding-top: 3.2rem;\n padding-bottom: 0.8rem;\n }\n\n ${breakpoint('large')} {\n padding-top: 4rem;\n padding-bottom: 1.6rem;\n }\n }\n\n &__header {\n margin-bottom: 4.4rem;\n\n ${breakpoint('large')} {\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-bottom: 5.2rem;\n }\n\n ${breakpoint('xlarge')} {\n margin-bottom: 6.8rem;\n }\n }\n\n &__title {\n margin-bottom: 0.8rem;\n }\n\n &__para {\n ${text('xlarge')}\n margin-bottom: 3.6rem;\n\n ${breakpoint('large')} {\n margin-bottom: 4.2rem;\n max-width: 640px;\n }\n\n ${breakpoint('xlarge')} {\n margin-bottom: 6rem;\n max-width: 680px;\n }\n\n ${breakpoint('xxlarge')} {\n max-width: 760px;\n }\n }\n\n &__filtering {\n display: flex;\n justify-content: center;\n padding: 0 1.2rem;\n gap: 2.8rem;\n }\n\n &__filtering-item {\n &:last-child {\n margin-right: 0;\n }\n\n &--anchor {\n ${text('xlarge')}\n font-weight: bold;\n text-transform: uppercase;\n }\n }\n\n &__group {\n margin-bottom: 1.6rem;\n }\n\n &__group-letter {\n ${displayHeader('small')}\n margin-bottom: 1.6rem;\n border-bottom: 1px solid ${getColor('grey', 200)};\n padding-bottom: 0.8rem;\n }\n\n &__sublist {\n display: flex;\n flex-direction: column;\n\n ${breakpoint('medium')} {\n flex-direction: row;\n flex-wrap: wrap;\n }\n }\n\n &__sublist-item {\n margin-bottom: 1.6rem;\n\n ${breakpoint('medium')} {\n width: 50%;\n }\n\n ${breakpoint('large')} {\n width: 25%;\n }\n\n &--anchor {\n ${text('xlarge')}\n }\n }\n }\n`;\n\nexport default BrandsList;\n","var _path;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nconst SvgCheck = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"1em\",\n height: \"1em\",\n viewBox: \"0 0 24 24\",\n xmlns: \"http://www.w3.org/2000/svg\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z\"\n})));\nexport default SvgCheck;","import React from 'react';\nimport ReactDOMServer from 'react-dom/server';\nimport { createGlobalStyle } from 'styled-components';\nimport { breakpoint } from '../../mixins/breakpoints';\nimport CheckIcon from '../../../../icons/check.svg';\nimport base64 from 'base-64';\nimport { getColor } from '../../mixins/colors';\nimport { header, text } from '../../mixins/typography';\nimport { cells } from '../../utils/grid';\nconst svgTest = ReactDOMServer.renderToString({props.title}
\n {props.description}
\n \n \n {props.buttonText} \n \n \n
\n setShowMore(!showMore)}\n >\n {!showMore\n ? translate('general.showless')\n : translate('general.showmore')}\n \n )}\n
\n \n {name &&\n !description?.includes(DESC_HEADER1_TAG) &&\n !description?.includes(DESC_HEADER2_TAG) ? (\n
\n {descriptionLength >= MAX_DESCRIPTION_LENGTH && (\n {name}
\n ) : null}\n {description &&\n {props.type === 'input' ? (\n setInputValue(e.target.value)}\n type=\"number\"\n wrapperClassName=\"FHGuide__selection-input\"\n />\n ) : (\n
\n );\n};\n\nexport default FHGuideModuleItem;\n","import React, { useState } from 'react';\nimport { EditorStringModel as EditorStringType } from '../../Types/EditorStringModel';\nimport FHGuideModuleItem from './_fhGuideContainerModuleItem';\n\ninterface FHGuideModuleProps {\n module: FHGuideModuleProps;\n title: string;\n description: EditorStringType;\n helpText?: string;\n type: string;\n handleIsSelected: Function;\n index: number;\n}\n\nconst FHGuideModule = ({\n module,\n title,\n description,\n helpText,\n type,\n handleIsSelected,\n index,\n}: FHGuideModuleProps) => {\n const [selected, setSelected] = useState(-1);\n\n const onChange = (itemIndex) => {\n setSelected(itemIndex);\n handleIsSelected(index, itemIndex);\n };\n\n return (\n \n {title && (\n
\n );\n};\n\nexport default FHGuideModule;\n","import { breakpoint } from '../../../styling/mixins/breakpoints';\nimport styled from 'styled-components';\nimport { getColor } from '../../../styling/mixins/colors';\nimport { cells, section } from '../../../styling/utils/grid';\nimport { text } from '../../../styling/mixins/typography';\nimport { hideFor, showFor } from '../../../styling/utils/visibility';\n\nexport const StyledFHContainer = styled.div`\n ${section}\n padding-bottom: 2.4rem;\n ${breakpoint('medium')} {\n padding-bottom: 3.2rem;\n }\n ${breakpoint('large')} {\n padding-bottom: 4rem;\n }\n .module-container {\n display: flex;\n flex-direction: column;\n max-width: 1100px;\n gap: 1.6rem;\n margin: 0 auto 2.4rem auto;\n\n ${breakpoint('medium')} {\n margin: 0 auto 3.2rem auto;\n }\n ${breakpoint('large')} {\n gap: 2.4rem;\n }\n }\n\n .FHGuide {\n &__container-title {\n text-align: center;\n margin-bottom: 0.8rem;\n }\n\n &__desc {\n max-width: 800px;\n text-align: center;\n margin: 0 auto 1.6rem auto;\n ${breakpoint('medium')} {\n margin: 0 auto 2.4rem auto;\n }\n }\n\n &__item {\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n\n &__title-wrapper {\n height: 64px;\n display: flex;\n background-color: ${getColor('graphic')};\n }\n\n &__title-index {\n width: 64px;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: ${getColor('primary')};\n color: ${getColor('graphic')};\n }\n\n &__title {\n display: flex;\n align-items: center;\n padding: 0 1.6rem;\n color: ${getColor('white')};\n }\n\n &__content {\n flex: 1;\n padding: 2.4rem 1.6rem;\n border: 1px solid ${getColor('grey', 300)};\n border-top: none;\n background-color: ${getColor('grey', 100)};\n }\n\n &__help-text {\n ${text('medium')}\n max-width: 560px;\n margin-bottom: 1.6rem;\n }\n\n &__selection {\n ${text('medium')}\n display: flex;\n flex-direction: column;\n gap: 0.4rem;\n\n &:not(:last-child) {\n margin-bottom: 1.6rem;\n }\n\n &-radio label span {\n font-weight: bold;\n }\n\n &-input input {\n background-color: ${getColor('white')};\n }\n\n &-help-text {\n max-width: 560px;\n }\n\n & input {\n &:checked {\n background-color: ${getColor('primary')};\n }\n }\n }\n\n &__results {\n ${showFor('medium')}\n display: flex;\n flex-direction: column;\n gap: 1.6rem;\n max-width: 1100px;\n margin: 0 auto;\n\n &-mobile {\n ${hideFor('medium')}\n display: grid;\n gap: 1.6rem;\n max-width: 1100px;\n margin: 0 auto;\n ${breakpoint('small')} {\n ${cells(2)}\n }\n }\n }\n }\n`;\n\nexport const StyledNoResults = styled.h4`\n text-align: center;\n`;\n","import React, { useState } from 'react';\nimport { EditorStringModel as EditorStringType } from '../../Types/EditorStringModel';\nimport EditorString from '../EditorString/EditorString';\nimport FHGuideModule from './_fhGuideContainerModule';\nimport {\n StyledFHContainer,\n StyledNoResults,\n} from './styles/FHGuideContainer.styling';\nimport { post } from '../../Services/http';\nimport ProductCardLandscape from '../ProductCards/ProductCardLandscape';\nimport ProductCard from '../ProductCards/ProductCard';\nimport { translate } from '../../Services/translation';\nimport Button from '../Button';\n\ninterface FHGuideContainerProps {\n title: string;\n description: EditorStringType;\n helpText: string;\n type: string;\n mapVal: string;\n}\n\nconst FHGuideContainer = (props: FHGuideContainerProps) => {\n const [showResults, setShowResults] = useState(false);\n const [results, setResults] = useState([]);\n const [btnDisabled, setBtnDisabled] = useState(true);\n const [guideModules, setGuideModules] = useState([\n {\n Title: translate('fhconst1.title'),\n HelpText: '',\n Type: 'radio',\n SelectedChoiceIndex: -1,\n Items: [\n {\n title: translate('fhconst1.item1.title'),\n description: translate('fhconst1.item1.description'),\n mapVal: '100',\n },\n {\n title: translate('fhconst1.item2.title'),\n description: translate('fhconst1.item2.description'),\n mapVal: '50',\n },\n ],\n },\n {\n Title: translate('fhconst2.title'),\n HelpText: translate('fhconst2.helptext'),\n Type: 'radio',\n SelectedChoiceIndex: -1,\n Items: [\n { title: translate('fhconst2.item1.title'), mapVal: '0.15' },\n { title: translate('fhconst2.item2.title'), mapVal: '0.25' },\n ],\n },\n {\n Title: translate('fhconst3.title'),\n HelpText: translate('fhconst3.helptext'),\n Type: 'radio',\n SelectedChoiceIndex: -1,\n Items: [\n { title: translate('fhconst3.item1.title'), mapVal: '1.1' },\n { title: translate('fhconst3.item2.title'), mapVal: '1.1' },\n { title: translate('fhconst3.item3.title'), mapVal: '1' },\n { title: translate('fhconst3.item4.title'), mapVal: '1' },\n { title: translate('fhconst3.item5.title'), mapVal: '0.9' },\n { title: translate('fhconst3.item6.title'), mapVal: '1.5' },\n { title: translate('fhconst3.item7.title'), mapVal: '0.8' },\n ],\n },\n {\n Title: translate('fhconst4.title'),\n HelpText: translate('fhconst4.helptext'),\n Type: 'radio',\n SelectedChoiceIndex: -1,\n Items: [\n { title: translate('fhconst4.item1.title'), mapVal: 'Trä' },\n { title: translate('fhconst4.item2.title'), mapVal: 'Kakel' },\n { title: translate('fhconst4.item3.title'), mapVal: 'Trä' },\n { title: translate('fhconst4.item4.title'), mapVal: 'Plastmatta' },\n { title: translate('fhconst4.item5.title'), mapVal: 'Kakel' },\n { title: translate('fhconst4.item6.title'), mapVal: 'Trä' },\n ],\n },\n {\n Title: translate('fhconst5.title'),\n HelpText: translate('fhconst5.helptext'),\n Type: 'input',\n SelectedChoiceIndex: -1,\n Items: [{ title: translate('fhconst5.item1.title'), mapVal: '-1' }],\n },\n ]);\n\n const handleIsSelected = (objectIndex, selectionIndex) => {\n setShowResults(false);\n let tempGuideModule = guideModules;\n tempGuideModule[objectIndex].SelectedChoiceIndex = selectionIndex;\n setGuideModules(tempGuideModule);\n\n if (\n tempGuideModule.filter((x) => x.SelectedChoiceIndex === -1).length === 0\n ) {\n let m2 = Number(tempGuideModule[4].SelectedChoiceIndex);\n let heatingType = Number(\n tempGuideModule[0].Items[tempGuideModule[0].SelectedChoiceIndex].mapVal\n );\n let roomType = Number(\n tempGuideModule[2].Items[tempGuideModule[2].SelectedChoiceIndex].mapVal\n );\n let projectType = Number(\n tempGuideModule[1].Items[tempGuideModule[1].SelectedChoiceIndex].mapVal\n );\n\n let filterItem = {\n Effect: m2 * heatingType * roomType,\n CableLength: m2 / projectType,\n Area: m2,\n Wetroom: tempGuideModule[2].SelectedChoiceIndex === 0,\n FloorType:\n tempGuideModule[3].Items[tempGuideModule[3].SelectedChoiceIndex]\n .mapVal,\n };\n\n post('/api/filteredsearch', filterItem)\n .then((response) => response.json())\n .then((result) => {\n setResults(result.products);\n setBtnDisabled(false);\n })\n .catch((ex) => {\n console.log('Something went wrong: ' + ex);\n });\n } else {\n setBtnDisabled(true);\n }\n };\n\n return (\n \n
\n )}\n {index + 1}
\n{title}
\n\n {helpText &&
\n {helpText}
}\n {description && {description}
}\n {module &&\n module.length > 0 &&\n module.map((module, index) => (\n {props.title}
\n\n {guideModules.map((module, index) => (\n setShowResults(true)}\n disabled={btnDisabled || showResults}\n >\n {translate('fhguide.show-results')}\n \n
\n {showResults && (\n <>\n {results.length >= 1 ? (\n <>\n \n {results.map((product) => (\n
\n \n {results.map((product) => (\n
\n \n ) : (\n \n {children} \n
\n \n );\n};\n","import React from 'react';\nimport SubNavigationCollapsible from './SubNavigationCollapsible';\nimport styled from 'styled-components';\nimport { getColor } from '../../styling/mixins/colors';\nimport { text } from '../../styling/mixins/typography';\nimport { breakpoint } from '../../styling/mixins/breakpoints';\nimport { SubNavigationLinkModel } from '../../Types/SubNavigationLinkModel';\n\nconst StyledSecondLevelNavigationList = styled.ul`\n > li {\n &:not(:last-child) {\n border-bottom: 1px solid ${getColor('gray', 300)};\n }\n &.has-children {\n border-bottom: none;\n }\n a {\n height: 40px;\n display: flex;\n align-items: center;\n padding-left: 1.6rem;\n ${text('medium')};\n &:hover {\n background-color: ${getColor('gray', 100)};\n }\n }\n }\n .collapsible {\n border-top: none !important;\n border-bottom: none !important;\n }\n li.is-selected {\n background: ${getColor('gray', 100)};\n a {\n font-weight: bold;\n }\n }\n`;\nconst StyledNavigationList = styled.ul`\n border-radius: 0 0 4px 4px;\n border-top: 1px solid ${getColor('gray', 300)};\n ${breakpoint('medium')} {\n border-radius: 4px;\n border: 1px solid ${getColor('gray', 300)};\n margin-bottom: 1.6rem;\n }\n\n > li {\n &:not(:last-child) {\n border-bottom: 1px solid ${getColor('gray', 300)};\n }\n a {\n height: 40px;\n display: flex;\n align-items: center;\n padding-left: 0.8rem;\n ${text('medium')};\n font-weight: bold;\n &:hover {\n background-color: ${getColor('gray', 100)};\n }\n }\n }\n`;\nconst SubNavigation = ({ links, name, url }: SubNavigationLinkModel) => {\n return (\n - \n {link.links.map((secondLevelLink, idx) => (\n
\n \n
\n \n
\n \n );\n};\n\nexport default SubNavigationContainer;\n","import React, { useMemo } from 'react';\nimport ProductCard from '../Components/ProductCards/ProductCard';\nimport BannerItem from './BannerBlock/_banner-item';\nimport { breakpoint } from '../styling/mixins/breakpoints';\nimport styled from 'styled-components';\nimport { cells, grid } from '../styling/utils/grid';\nimport { BannerBlockProps } from './BannerBlock/BannerBlock';\nimport { ProductNoSliderProps } from './ProductBlockNoSlider';\nimport { LinkModel } from '../Types/LinkModel';\nimport { text } from '../styling/mixins/typography';\n\ninterface ProductAndBannerProps {\n products: ProductNoSliderProps;\n banners: BannerBlockProps;\n showBannerToTheRight: boolean;\n productQuantity: number;\n title?: string;\n link?: LinkModel;\n}\n\nconst StyledWrapper = styled.div`\n ${grid}\n ${cells(1)}\n ${breakpoint('large')} {\n ${cells(2)}\n }\n\n ${breakpoint('large')} {\n .banner-item {\n height: 100%;\n }\n img.banner-item__image {\n height: 100%;\n aspect-ratio: unset;\n }\n }\n`;\n\nconst StyledProductsWrapper = styled.div<{ $numPerRow: number }>`\n ${grid};\n ${cells(2)}\n\n ${breakpoint('large')} {\n ${(p) => cells(p.$numPerRow)}\n }\n\n &.remaining {\n margin-top: 1.6rem;\n ${breakpoint('medium')} {\n margin-top: 2.4rem;\n }\n }\n`;\n\nconst StyledTitleWrapper = styled.div`\n ${grid};\n ${cells(2)}\n margin-bottom: 2.4rem;\n\n div {\n display: flex;\n align-items: center;\n\n &:last-child {\n justify-content: flex-end;\n }\n\n a {\n ${text('xlarge')}\n text-decoration: underline;\n }\n }\n`;\n\nconst LeftBannerItemWrapper = styled.div<{ $showBannerToRight: boolean }>`\n ${breakpoint('large')} {\n display: ${(p) => (p.$showBannerToRight ? 'none' : null)};\n }\n`;\n\nconst RightBannerItemWrapper = styled.div`\n ${breakpoint('medium', 'down')} {\n display: none;\n }\n`;\n\nconst ProductsAndBannerBlock = ({\n products: productsBlock,\n banners: bannersBlock,\n showBannerToTheRight,\n title,\n link,\n}: ProductAndBannerProps) => {\n const bannerBlockItem = useMemo(\n () => (bannersBlock.banners?.length ? bannersBlock.banners[0] : null),\n [bannersBlock.banners]\n );\n\n const firstTwoProducts = useMemo(() => productsBlock.products?.slice(0, 2), [\n productsBlock,\n ]);\n const remainingProducts = useMemo(() => productsBlock.products?.slice(3), [\n productsBlock,\n ]);\n\n if (!bannerBlockItem) return null;\n return (\n <>\n {title &&
\n {title}
}{link?.href && {link.text}}
\n \n {installationType?.showCCInput && (\n
\n \n );\n};\n\nexport default MaterialCalculatorAdvancedTab;\n","import React, { useEffect, useState } from 'react';\nimport { addOverlay, removeOverlay } from '../../Actions/Overlay.action';\nimport { useDispatch } from 'react-redux';\nimport Modal from 'react-modal';\nimport styled from 'styled-components';\nimport { getColor } from '../../styling/mixins/colors';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport EditorString from '../EditorString/EditorString';\nimport Icon from '../Icon';\nimport { breakpoint } from '../../styling/mixins/breakpoints';\ninterface MoreInfoProps {\n onClosed?: () => void;\n}\n\nconst StyledMoreInfo = styled.div`\n z-index: 150;\n position: fixed;\n inset: 0;\n margin: auto;\n width: 50%;\n height: max-content;\n max-height: 100%;\n background-color: white;\n padding: 4rem;\n box-sizing: border-box;\n overflow-y: auto;\n ${breakpoint('small', 'down')} {\n width: 100%;\n height: 100%;\n padding: 1.6rem;\n }\n\n .moreInfo-title {\n display: flex;\n justify-content: space-between;\n align-items: center;\n ${breakpoint('small', 'down')} {\n display: none;\n }\n }\n .mobileMoreInfo-title {\n display: flex;\n flex-direction: column;\n align-items: center;\n ${breakpoint('small', 'up')} {\n display: none;\n }\n }\n .moreInfo-description {\n margin-top: 1.6rem;\n }\n .icon {\n cursor: pointer;\n }\n .icon-mobile {\n align-self: flex-end;\n }\n .title-mobile {\n align-self: flex-start;\n }\n`;\n\nconst MaterialCalculatorMoreInfo = ({ onClosed }: MoreInfoProps) => {\n const { moreInfoTitle, moreInfoDescription } = useTypedSelector(\n (state) => state.materialCalculator\n );\n\n const dispatch = useDispatch();\n const [open, setOpen] = useState\n \n {installationType?.availableCCs && (\n ({\n label: cc.toString(),\n value: cc,\n }))}\n onChange={({ value }) =>\n dispatch(\n materialCalculatorActions.setRoomInstallationData({\n floorIndex: floorIndex,\n roomIndex: roomIndex,\n data: value,\n key: 'cc',\n })\n )\n }\n />\n )}\n
\n )}\n {installationType?.showMillCheckbox && (\n \n \n dispatch(\n materialCalculatorActions.setRoomInstallationData({\n floorIndex: floorIndex,\n roomIndex: roomIndex,\n data: e.target.checked,\n key: 'millSelfChecked',\n })\n )\n }\n />\n
\n )}\n {!installationData?.millSelfChecked &&\n installationType?.showTurnZoneInput && (\n \n {installationTypes && (\n \n dispatch(\n materialCalculatorActions.setRoomInstallationData({\n floorIndex: floorIndex,\n roomIndex: roomIndex,\n data: e.target.valueAsNumber,\n key: 'turnZone',\n })\n )\n }\n />\n )}\n
\n )}\n \n {installationTypes && (\n \n setDistanceToDistributor(e.target.valueAsNumber ?? 0)\n }\n />\n )}\n
\n \n {moreInfoTitle}{' '}\n
\n )}\n {moreInfoTitle ? (\n \n
\n ) : null}\n {moreInfoDescription?.value ? (\n {translate('materialcalculator.room') + ' ' + roomNo}
\n\n {\n dispatch(\n materialCalculatorActions.setRoomArea({\n floorIndex: floorIndex,\n roomIndex: roomIndex,\n area: e.target.valueAsNumber,\n })\n );\n room.installationType?.showTurnZoneInput &&\n dispatch(\n materialCalculatorActions.setRoomInstallationData({\n floorIndex: floorIndex,\n roomIndex: roomIndex,\n data: calculateTurnZone(e.target.valueAsNumber),\n key: 'turnZone',\n })\n );\n }}\n />\n
\n \n {installationTypes && (\n <>\n \n ({\n label: type.name,\n value: JSON.stringify(type),\n }))}\n onChange={({ value }) =>\n dispatch(\n materialCalculatorActions.setRoomInstallationType({\n floorIndex: floorIndex,\n roomIndex: roomIndex,\n installationType: JSON.parse(value),\n })\n )\n }\n />\n \n )}\n
\n \n \n dispatch(\n materialCalculatorActions.removeRoom({\n floorIndex: floorIndex,\n roomIndex: roomIndex,\n })\n )\n }\n >\n {translate('materialcalculator.removeroom')}\n \n
\n \n \n dispatch(\n materialCalculatorActions.removeFloor({ floorIndex: index })\n )\n }\n >\n
\n \n {translate('materialcalculator.floor')} {floorNumber}\n
\n\n {floor.rooms?.map((room, roomIndex) => (\n
\n \n \n dispatch(\n materialCalculatorActions.setRooms({\n floorIndex: index,\n floorId: floor.id,\n })\n )\n }\n >\n
\n \n {product.images && product.images.length > 0 && (\n \n
\n \n {product.tags?.length ? (\n \n {product.tags.map((tag) => (\n \n {tag.name}\n \n ))}\n \n ) : null}\n \n {product.name}\n \n
\n {product.id}
\n\n {product.price.formattedCampaignPrice ? (\n
\n \n \n {product.price.formattedCampaignPrice}{' '}\n \n {product.price.formattedPrice}\n \n
\n ) : (\n product.price.formattedPrice && (\n{product.price.formattedPrice}
\n )\n )}\n {product.quantity > 1 && (\n \n{product.quantity} st
\n \n )}\n\n
\n )}\n - \n
- \n {' '}\n {translate('materialcalculator.room')} \n {roomNo}\n \n {room.materialCalculatorFormulas?.coilQuantity && (\n
- \n {translate('materialcalculator.coilquantity')}: \n {room.materialCalculatorFormulas?.coilQuantity}\n \n )}\n {room.materialCalculatorFormulas?.coilLength && (\n
- \n {translate('materialcalculator.coillength')}: \n {room.materialCalculatorFormulas?.coilLength.toFixed(2)}\n \n )}\n
\n
\n \n
\n \n
\n ))}\n \n {translate('materialcalculator.floor')} {floorIndex + 1}\n
\n {floor.rooms?.map((room, roomIndex) => (\n\n {result?.rooms.map((room) => (\n \n {room.materialCalculatorFormulas?.coilQuantity && (\n
\n )}\n {result?.products &&\n result.products.map((product) => (\n {room.materialCalculatorFormulas.coilQuantity}
\n )}\n {room.materialCalculatorFormulas?.coilLength && (\n{room.materialCalculatorFormulas.coilLength}
\n )}\n \n ))}\n{translate('materialcalculator.buypackage')}
\n )}\n \n\n dispatch(materialCalculatorActions.setFloors())}\n >\n {translate('materialcalculator.addfloor')}\n \n
\n {translate('general.error')}
\n ) : (\n{translate('materialcalculator.calculate')}
\n )}\n \n {result?.products && result?.products.length > 0 && (\n\n
\n );\n};\n\nexport default RoomContainer;\n","import React, { useState } from 'react';\nimport RadioButton from '../../Inputs/Radiobutton';\nimport { translate } from '../../../Services/translation';\nimport Icon from '../../Icon';\nimport RoomContainer from './RoomContainer';\nimport { v4 } from 'uuid';\nconst ERROR_CLASSES = ['!border-2', 'border-solid', '!border-error-500'];\n\nconst FloorContainer = ({ floor, idx, updateFloor, onInvalid }) => {\n const [rooms, setRooms] = useState(floor.r);\n const [plan, setPlan] = useState(floor.plan);\n const floorIdx = idx;\n const generateNewRoom = () => {\n return {\n yta: 0,\n rum: '',\n typ: '',\n material: '',\n key: v4(),\n };\n };\n\n const removeRoom = (idx) => {\n const updatedRooms = rooms.filter((_, i) => i !== idx);\n setRooms(updatedRooms);\n updateFloor(floorIdx, updatedRooms, null);\n };\n\n const updateRoom = (roomIdx, roomSpecs) => {\n const updatedRooms = rooms;\n updatedRooms[roomIdx] = roomSpecs;\n setRooms(updatedRooms);\n updateFloor(floorIdx, updatedRooms, null);\n };\n\n const addRoom = () => {\n const newRoom = generateNewRoom();\n const updatedRooms = [...rooms, newRoom];\n setRooms(updatedRooms);\n updateFloor(floorIdx, updatedRooms, null);\n };\n\n const updateFloorType = (type) => {\n setPlan(type);\n updateFloor(floorIdx, null, type);\n };\n\n const onRadioClick = (e) => {\n updateFloorType(e.target.value);\n\n if (e.target.classList.contains(...ERROR_CLASSES)) {\n removeErrorClasses(e.target);\n }\n };\n\n const removeErrorClasses = (input) => {\n if (input.type == 'radio') {\n const radioButtons = document.getElementsByName(input.name);\n\n radioButtons.forEach((radioButton) => {\n radioButton.classList.remove(...ERROR_CLASSES);\n });\n }\n };\n\n return (\n \n
\n \n {translate('quotation.room')} {idx + 1}\n
\n {idx > 0 && (\n \n )}\n\n
\n \n onChange(e.target.value, 'yta')}\n label={translate('quotation.room-area')}\n type=\"number\"\n />\n ({\n value: roomType,\n label: roomType,\n }))}\n selectedValue={roomSpecs.rum}\n onChange={({ value }) => onChange(value, 'rum')}\n label={translate('quotation.room-type')}\n placeholder={translate('general.select')}\n />\n
\n \n ({\n value: flooring,\n label: flooring,\n }))}\n selectedValue={roomSpecs.typ}\n onChange={({ value }) => onChange(value, 'typ')}\n label={translate('quotation.room-flooring')}\n placeholder={translate('general.select')}\n />\n ({\n value: material,\n label: material,\n }))}\n selectedValue={roomSpecs.material}\n onChange={({ value }) => onChange(value, 'material')}\n label={translate('quotation.room-material')}\n placeholder={translate('general.select')}\n />\n
\n \n {translate('quotation.floor')} {idx + 1}\n
\n\n {translate('quotation.floortype')}\n
\n \n onRadioClick(e)}\n onInvalid={(e) => onInvalid(e)}\n required\n />\n onRadioClick(e)}\n onInvalid={(e) => onInvalid(e)}\n />\n onRadioClick(e)}\n onInvalid={(e) => onInvalid(e)}\n />\n
\n {rooms.length > 0 && (\n \n {rooms.map((room, idx) => (\n
\n )}\n {translate('quotation.add-room')}
\n \n \n );\n};\n\nexport default FloorContainer;\n","import React, { useEffect } from 'react';\nimport { translate } from '../../../Services/translation';\n\nconst StatusMessage = ({\n status,\n setStatus,\n}: {\n status: string;\n setStatus: React.Dispatch\n \n {translate(\n status == 'success'\n ? 'quotation.success-btn'\n : 'quotation.error-btn'\n )}\n \n
\n );\n};\n\nexport default StatusMessage;\n","import React, { useEffect, useState } from 'react';\nimport EditorString from '../EditorString/EditorString';\nimport { translate } from '../../Services/translation';\nimport RadioButton from '../Inputs/Radiobutton';\nimport FloorContainer from './ui/FloorContainer';\nimport Input from '../Inputs/Input';\nimport TextArea from '../Inputs/TextArea';\nimport Checkbox from '../Inputs/Checkbox';\nimport { v4 } from 'uuid';\nimport StatusMessage from './ui/StatusMessage';\nimport clsx from 'clsx';\nconst QUOTATION_TYPE = ['Nybyggnation', 'Renovering', 'Tillbyggnad'];\nconst ERROR_CLASSES = ['!border-2', 'border-solid', '!border-error-500'];\n\nconst QuotationRequest = ({\n title,\n description,\n termsAndConditionsLink,\n}) => {\n const [status, setStatus] = useState('');\n const [currentError, setCurrentError] = useState(false);\n const [generalInfo, setGeneralInfo] = useState({\n typ: '',\n befintliga_vattenradiatorer: '',\n });\n const [floors, setFloors] = useState([\n {\n plan: '',\n r: [{ yta: 0, rum: '', typ: '', material: '', key: v4() }],\n key: v4(),\n },\n ]);\n const [userInfo, setUserInfo] = useState({\n namn: '',\n adress: '',\n postnummer: '',\n ort: '',\n email: '',\n telefonnummer: '',\n fastighetsbeteckning: '',\n information: '',\n files: null,\n });\n\n const generateNewFloor = () => {\n return {\n plan: '',\n r: [{ yta: 0, rum: '', typ: '', material: '', key: v4() }],\n key: v4(),\n };\n };\n\n const updateFloor = (floorIdx, rooms, type) => {\n const updatedFloors = [...floors];\n if (rooms != null) {\n const updatedRooms = rooms;\n updatedFloors[floorIdx]!.r = updatedRooms;\n } else {\n updatedFloors[floorIdx]!.plan = type;\n }\n setFloors(updatedFloors);\n };\n\n const changeFloorAmount = (num) => {\n let updatedFloors = [...floors];\n\n if (num > floors.length) {\n for (let i = floors.length; i < num; i++) {\n const newFloor = generateNewFloor();\n updatedFloors = [...updatedFloors, newFloor];\n }\n } else {\n updatedFloors = updatedFloors.slice(0, num);\n }\n setFloors(updatedFloors);\n };\n\n const updateGeneralInfo = (value, key) => {\n const updatedInfo = Object.assign({}, generalInfo);\n updatedInfo[key] = value;\n setGeneralInfo(updatedInfo);\n };\n\n const updateUserInfo = (value, key) => {\n const updatedInfo = Object.assign({}, userInfo);\n updatedInfo[key] = value;\n setUserInfo(updatedInfo);\n };\n\n const handleInvalidInput = (e) => {\n e.preventDefault();\n\n setCurrentError(true);\n\n const invalidInput = e.target;\n\n invalidInput.classList.add(...ERROR_CLASSES);\n };\n\n const removeErrorClasses = (input) => {\n if (input.type == 'radio') {\n const radioButtons = document.getElementsByName(input.name);\n\n radioButtons.forEach((radioButton) => {\n radioButton.classList.remove(...ERROR_CLASSES);\n });\n } else {\n input.classList.remove(...ERROR_CLASSES);\n }\n };\n\n const onRadioClick = (e, key) => {\n updateGeneralInfo(e.target.value, key);\n\n if (e.target.classList.contains(...ERROR_CLASSES)) {\n removeErrorClasses(e.target);\n }\n };\n\n const onInputChange = (e, key) => {\n updateUserInfo(e.target.value, key);\n\n if (e.target.classList.contains(...ERROR_CLASSES)) {\n removeErrorClasses(e.target);\n }\n };\n\n const onSubmit = async (e) => {\n e.preventDefault();\n\n const formData = new FormData();\n\n formData.append('OffertFormSent', 'yes');\n\n for (const key in generalInfo) {\n formData.append(key, generalInfo[key]);\n }\n\n formData.append('antal_plan', `${floors.length}`);\n\n for (let i = 0; i < floors.length; i++) {\n const floor = floors[i];\n\n formData.append(`p${i + 1}_antal_rum`, `${floor!.r.length}`);\n\n for (const objKey in floor) {\n if (objKey === 'r') {\n for (let j = 0; j < floor[objKey].length; j++) {\n for (const roomKey in floor[objKey][j]) {\n formData.append(\n `p${i + 1}_${objKey}${j + 1}_${roomKey}`,\n floor[objKey][j]![roomKey]\n );\n }\n }\n } else {\n formData.append(`p${i + 1}_${objKey}`, floor[objKey]);\n }\n }\n }\n\n for (const key in userInfo) {\n formData.append(key, userInfo[key]);\n }\n\n try {\n const response = await fetch(\n 'https://www.idrelay.com/customers/14/kelvin/offertformgvb.asp',\n {\n method: 'POST',\n body: formData,\n }\n );\n\n if (response.ok) {\n setStatus('success');\n } else {\n setStatus('error');\n }\n } catch (error) {\n setStatus('error');\n }\n };\n\n useEffect(() => {\n setCurrentError(false);\n }, [generalInfo, userInfo]);\n\n useEffect(() => {\n const errorMessage = document.getElementById('error-message');\n if (currentError) {\n errorMessage?.scrollIntoView({\n behavior: 'smooth',\n block: 'end',\n inline: 'start',\n });\n }\n }, [currentError]);\n\n return (\n \n {translate(\n status == 'success'\n ? 'quotation.success-title'\n : 'quotation.error-title'\n )}\n
\n\n {translate(\n status == 'success'\n ? 'quotation.success-message'\n : 'quotation.error-message'\n )}\n
\n \n {status ? (\n \n {translate('quotation.submit-error')}\n
\n )}\n {' '}\n \n )}\n \n );\n};\n\nexport default QuotationRequest;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport { translate } from '../../Services/translation';\nimport { getColor } from '../../styling/mixins/colors';\nimport { text } from '../../styling/mixins/typography';\nimport { cells } from '../../styling/utils/grid';\n\ninterface VariantSpecRow {\n name: string;\n value: string | number | undefined;\n}\n\nconst StyledTechnicalTable = styled.div`\n border: 1px solid ${getColor('grey', 300)};\n`;\n\nconst StyledTableRow = styled.div`\n padding: 0.8rem;\n display: grid;\n ${cells(2)}\n gap: 1.6rem;\n\n &:nth-child(even) {\n background: ${getColor('grey', 100)};\n }\n\n &:not(:last-child) {\n border-bottom: 1px solid ${getColor('grey', 300)};\n }\n`;\n\nconst StyledPlaceholderRow = styled(StyledTableRow)`\n span {\n grid-column: span 2;\n ${text('large')}\n font-weight: bold;\n }\n`;\n\nconst ProductPageTechnicalTable = () => {\n const [variantSpecs, setVariantSpecs] = useState\n {title &&
\n {currentError && (\n {title}
}\n {description &&\n {translate('product.id')} {selectedVariant?.id}\n
\n ) : null}\n \n );\n};\n\nexport default ProductPageArticleNumber;\n","import React from 'react';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport { translate } from '../../Services/translation';\nimport PriceModel from '../../Types/PriceModel';\n\nconst ProductPagePrice = (price: PriceModel) => {\n const priceFrom = price.formattedPrice;\n const { selectedVariant } = useTypedSelector((state) => state.productPage);\n return (\n <>\n {selectedVariant ? (\n \n {selectedVariant.price?.formattedCampaignPrice ? (\n <>\n \n {selectedVariant.price?.formattedCampaignPrice}\n \n \n {selectedVariant.price?.formattedPrice}\n \n
\n ) : (\n \n {translate('product.from')} {priceFrom}\n
\n )}\n \n );\n};\n\nexport default ProductPagePrice;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { useTypedSelector } from '../../Hooks/useTypedSelector';\nimport StockStatus from '../StockStatus/StockStatus';\n\nconst StyledStockStatusPlaceholder = styled.div`\n height: 24px;\n width: 100%;\n`;\n\nconst ProductPageStockStatus = () => {\n const { selectedVariant } = useTypedSelector((state) => state.productPage);\n\n return selectedVariant ? (\n\n \n \n \n \n
\n );\n};\n\nexport default PriceHistoryModal;\n","import React from 'react';\nimport { LinkModel } from '../../Types/LinkModel';\nimport styled from 'styled-components';\nimport { cells } from '../../styling/utils/grid';\nimport { getColor } from '../../styling/mixins/colors';\nimport { text } from '../../styling/mixins/typography';\nimport { breakpoint } from '../../styling/mixins/breakpoints';\n\ninterface CardList {\n links: CardItem[];\n}\n\ninterface CardItem {\n link: LinkModel;\n title: string;\n description: string;\n imageUrl: string;\n}\n\nconst StyledWrapper = styled.div<{ amountOfLinks: number }>`\n display: grid;\n gap: 2.4rem;\n position: relative;\n ${(p) => cells(p.amountOfLinks)}\n padding-right: 1.6rem;\n\n ${breakpoint('large')} {\n padding-right: 2.4rem;\n }\n`;\n\nconst StyledLink = styled.a`\n padding: 0;\n display: flex;\n\n img {\n aspect-ratio: 3/2;\n object-fit: cover;\n max-height: 250px;\n width: 100%;\n }\n\n .content {\n display: flex;\n flex-direction: column;\n gap: 0.4rem;\n width: 100%;\n\n .title {\n ${text('medium')}\n font-weight: bold;\n }\n\n .description {\n ${text('small')}\n }\n }\n\n &:hover .icon {\n background-color: ${getColor('primary', 600)};\n }\n`;\n\nconst StyledLinkCard = styled.div`\n display: flex;\n flex-direction: column;\n gap: 0.8rem;\n width: 100%;\n`;\n\nconst MegaMenuCardBlock = ({ links }: CardList) => {\n const Link = React.memo<{ item: CardItem }>(({ item }) => (\n \n
\n \n
\n {title}
\n{previouslyLowestPrice}
\n\n
\n {description}
\n\n
\n {item.title}
\n {item.description}
\n \n
\n );\n};\n\nexport default ProductPageBrandImage;\n","import { Swiper, SwiperSlide } from 'swiper/react';\nimport React, { useEffect, useState } from 'react';\nimport ProductCard from '../Components/ProductCards/ProductCard';\nimport swiperCss from '!!raw-loader!../../../node_modules/swiper/swiper.min.css';\nimport swiperPagination from '!!raw-loader!../../../node_modules/swiper/modules/pagination/pagination.min.css';\nimport { Pagination } from 'swiper';\nimport Product from '../Types/Product';\nimport ProductBlockNoSlider from './ProductBlockNoSlider';\nimport styled from 'styled-components';\nimport { getColor } from '../styling/mixins/colors';\nimport { useTypedSelector } from '../Hooks/useTypedSelector';\n\ninterface SimilarProductsProps {\n relationProducts: {[key: string]: KeyValuePair\n \n {productList?.map((product, idx) => (\n \n \n ))}\n \n
\n ) : productList?.length > 0 && (\n //Render product block without slider on server to avoid layout shifting\n {title}
\n\n
\n );\n};\n\nexport default NavigatorCTAContainer;\n","import renderWrapper from './render-wrapper';\nimport MiniCart from '../Components/MiniCart/MiniCart';\nimport MiniCartButton from '../Components/MiniCart/MiniCartButton';\nimport StockStatus from '../Components/StockStatus/StockStatus';\nimport Checkout from '../Components/Checkout/Checkout';\nimport ProductFiltering from '../Components/ProductFiltering/ProductFiltering';\nimport ProductSorting from '../Components/ProductSorting/ProductSorting';\nimport BuyButton from '../Components/BuyButton/BuyButton';\nimport FilterBar from '../Components/FilterBar/FilterBar';\nimport MyPagesContainer from '../Components/MyPages/MyPagesContainer';\nimport TestContainerForReact from '../Components/TestContainerForReact';\nimport Navigation from '../Components/Navigation/Navigation';\nimport ProductPageImageSlider from '../Components/ProductPage/ProductPage.ImageSlider';\nimport BannerSliderBlock from '../Blocks/BannerBlock/BannerSliderBlock';\nimport BannerBlock from '../Blocks/BannerBlock/BannerBlock';\nimport ProductSlider from '../Blocks/ProductSlider';\nimport ProductListHeaderText from '../Components/ProductList.HeaderText';\nimport ActiveFilterChips from '../Components/ActiveFilterChips/ActiveFilterChips';\nimport ProductBlockNoSlider from '../Blocks/ProductBlockNoSlider';\nimport QuickSearch from '../Components/QuickSearch/QuickSearch';\nimport SearchResult from '../Components/SearchResult/SearchResult';\nimport SearchNavigation from '../Components/SearchResult/SearchNavigation';\nimport NavigationMobileTrigger from '../Components/Navigation/NavigationMobileTrigger';\nimport NavigationMobile from '../Components/Navigation/NavigationMobile';\nimport Overlay from '../Components/Overlay';\nimport VariantMultiPickerDropdown from '../Components/VariantPicker/VariantMultiPicker.Dropdown';\nimport VariantPickerButtons from '../Components/VariantPicker/VariantPicker.Buttons';\nimport LoginModal from '../Components/Login/LoginModal';\nimport LoginPage from '../Components/Login/LoginPage';\nimport LoginModalTrigger from '../Components/Login/LoginModalTrigger';\nimport Test from '../Components/Test';\nimport ProductListing from '../Components/ProductListing/ProductListing';\nimport PriceHistoryModalTrigger from '../Components/ProductPage/PriceHistoryModalTrigger';\nimport LinkBlock from '../Blocks/LinkBlock/LinkBlock';\nimport LinkCardBlock from '../Blocks/LinkCardBlock/LinkCardBlock';\nimport OrderConfirmation from '../Components/OrderConfirmation/OrderConfirmation';\nimport BrandsBlock from '../Blocks/BrandsBlock';\nimport EditorString from '../Components/EditorString/EditorString';\nimport TopMessage from '../Components/TopMessage/TopMessage';\nimport FaqAccordion from '../Blocks/FaqAccordion';\nimport FHGuideCard from '../Components/FloorHeatingGuide/FHGuideCard';\nimport FloorHeatingNavigationCard from '../Components/FloorHeatingGuide/FHGuideNavigationCard';\nimport ResponsiveImage from '../Components/ResponsiveImage/ResponsiveImage';\nimport UspBlock from '../Blocks/UspBlock';\nimport CategoryDescription from '../Components/ProductListing/CategoryDescription';\nimport FHGuideContainer from '../Components/FHGuide/FHGuideContainer';\nimport ProductPageVariantList from '../Components/ProductPage/ProductPage.VariantList';\nimport ScrollToElementButton from '../Components/ScrollToElementButton/ScrollToElementButton';\nimport SubNavigationContainer from '../Components/SubNavigationContainer/SubNavigationContainer';\nimport ProductsAndBannerBlock from '../Blocks/ProductsAndBannerBlock';\nimport MCContainer from '../Components/MaterialCalculator/MaterialCalculator.Container';\nimport QuotationRequest from '../Components/QuotationRequest/QuotationRequest';\nimport ProductPageTechnicalTable from '../Components/ProductPage/ProductPageTechnicalTable';\nimport ProductPageArticleNumber from '../Components/ProductPage/ProductPageArticleNumber';\nimport ProductPagePrice from '../Components/ProductPage/ProductPagePrice';\nimport ProductPageStockStatus from '../Components/ProductPage/ProductPageStockStatus';\nimport ProductPageBuyButton from '../Components/ProductPage/ProductPageBuyButton';\nimport VariantDropdown from '../Components/VariantPicker/Variant.Dropdown';\nimport NewsLetter from '../Components/NewsLetter/NewsLetter';\nimport PriceHistoryModal from '../Components/ProductPage/PriceHistoryModal';\nimport CategoryNavigation from '../Components/ProductListing/CategoryNavigation';\nimport MegaMenuCardBlock from '../Blocks/MegaMenuCardBlock/MegaMenuCardBlock';\nimport ProductPageBrandImage from '../Components/ProductPage/ProductPageBrandImage';\nimport SimilarProductsSlider from '../Blocks/SimilarProductsSlider';\nimport './expose-styling';\nimport NavigatorCTAContainer from '../Components/NavigatorCTA/NavigatorCTAContainer';\nimport NavigatorCTAHeaderButton from '../Components/NavigatorCTA/NavigatorCTAHeaderButton';\n\nglobal['Components'] = {\n ProductListing: (props) => renderWrapper(ProductListing, props),\n MiniCart: (props) => renderWrapper(MiniCart, props),\n MiniCartButton: (props) => renderWrapper(MiniCartButton, props),\n StockStatus: (props) => renderWrapper(StockStatus, props),\n ProductFiltering: (props) => renderWrapper(ProductFiltering, props),\n ProductSorting: (props) => renderWrapper(ProductSorting, props),\n MyPagesContainer: (props) => renderWrapper(MyPagesContainer, props),\n Checkout: (props) => renderWrapper(Checkout, props),\n BuyButton: (props) => renderWrapper(BuyButton, props),\n FilterBar: (props) => renderWrapper(FilterBar, props),\n QuickSearch: (props) => renderWrapper(QuickSearch, props),\n SearchResult: (props) => renderWrapper(SearchResult, props),\n SearchNavigation: (props) => renderWrapper(SearchNavigation, props),\n ProductBlockNoSlider: (props) =>\n renderWrapper(ProductBlockNoSlider, props),\n ProductListHeaderText: (props) =>\n renderWrapper(ProductListHeaderText, props),\n Navbar: (props) => renderWrapper(Navigation, props),\n TestContainerForReact: (props) =>\n renderWrapper(TestContainerForReact, props),\n ProductPageImageSlider: (props) =>\n renderWrapper(ProductPageImageSlider, props),\n BannerSliderBlock: (props) => renderWrapper(BannerSliderBlock, props),\n BannerBlock: (props) => renderWrapper(BannerBlock, props),\n ProductSlider: (props) => renderWrapper(ProductSlider, props),\n ActiveFilterChips: (props) => renderWrapper(ActiveFilterChips, props),\n NavigationMobileTrigger: (props) =>\n renderWrapper(NavigationMobileTrigger, props),\n NavigationMobile: (props) => renderWrapper(NavigationMobile, props),\n Overlay: (props) => renderWrapper(Overlay, props),\n VariantMultiPickerDropdown: (props) =>\n renderWrapper(VariantMultiPickerDropdown, props),\n VariantPickerButtons: (props) =>\n renderWrapper(VariantPickerButtons, props),\n LoginModal: (props) => renderWrapper(LoginModal, props),\n LoginPage: (props) => renderWrapper(LoginPage, props),\n LoginModalTrigger: (props) => renderWrapper(LoginModalTrigger, props),\n TopMessage: (props) => renderWrapper(TopMessage, props),\n OrderConfirmation: (props) => renderWrapper(OrderConfirmation, props),\n ProductsAndBannerBlock: (props) =>\n renderWrapper(ProductsAndBannerBlock, props),\n Test: (props) => renderWrapper(Test, props),\n LinkBlock: (props) => renderWrapper(LinkBlock, props),\n LinkCardBlock: (props) => renderWrapper(LinkCardBlock, props),\n BrandsBlock: (props) => renderWrapper(BrandsBlock, props),\n EditorString: (props) => renderWrapper(EditorString, props),\n FaqAccordion: (props) => renderWrapper(FaqAccordion, props),\n FloorHeatingNavigationCard: (props) =>\n renderWrapper(FloorHeatingNavigationCard, props),\n NavigatorCTAHeaderButton: (props) => renderWrapper(NavigatorCTAHeaderButton, props),\n UspBlock: (props) => renderWrapper(UspBlock, props),\n ResponsiveImage: (props) => renderWrapper(ResponsiveImage, props),\n FHGuideContainer: (props) => renderWrapper(FHGuideContainer, props),\n NavigatorCTAContainer: (props) => renderWrapper(NavigatorCTAContainer, props),\n FHGuideCard: (props) => renderWrapper(FHGuideCard, props),\n CategoryDescription: (props) =>\n renderWrapper(CategoryDescription, props),\n ProductPageVariantList: (props) =>\n renderWrapper(ProductPageVariantList, props),\n ScrollToElementButton: (props) =>\n renderWrapper(ScrollToElementButton, props),\n MCContainer: (props) => renderWrapper(MCContainer, props),\n QuotationRequest: (props) => renderWrapper(QuotationRequest, props),\n SubNavigationContainer: (props) =>\n renderWrapper(SubNavigationContainer, props),\n ProductPageTechnicalTable: (props) =>\n renderWrapper(ProductPageTechnicalTable, props),\n ProductPageArticleNumber: (props) =>\n renderWrapper(ProductPageArticleNumber, props),\n ProductPagePrice: (props) => renderWrapper(ProductPagePrice, props),\n VariantDropdown: (props) => renderWrapper(VariantDropdown, props),\n NewsLetter: (props) => renderWrapper(NewsLetter, props),\n PriceHistoryModalTrigger: (props) =>\n renderWrapper(PriceHistoryModalTrigger, props),\n PriceHistoryModal: (props) => renderWrapper(PriceHistoryModal, props),\n CategoryNavigation: (props) => renderWrapper(CategoryNavigation, props),\n MegaMenuCardBlock: (props) => renderWrapper(MegaMenuCardBlock, props),\n ProductPageStockStatus: (props) =>\n renderWrapper(ProductPageStockStatus, props),\n ProductPageBuyButton: (props) =>\n renderWrapper(ProductPageBuyButton, props),\n ProductPageBrandImage: (props) =>\n renderWrapper(ProductPageBrandImage, props),\n SimilarProductsSlider: (props) =>\n renderWrapper(SimilarProductsSlider, props),\n};\n"],"sourceRoot":""}\n \n {props.buttonText} \n \n
\n \n
\n {props.title}
\n{props.description}
\n