{category}
\n {t('category_units_no', { count: filteredCount })}\n{t('accessories_list_title')}
\n{t('accessories_list_subtitle')}
\n{t('recommended_packages')}
\n\n {/*\n {item.code}\n */}\n
\n \n );\n })}\n \n {item.name}\n
\n \n onChange({ code: item.code, check: isChecked, type: 'options' })}\n >\n \n {t('choose_body_button')}\n \n
\n \n
\n \n );\n })}\n \n {item.name}\n
\n \n onChange({ code: item.code, check: isChecked, type: 'options' })}\n >\n \n \n
\n \n
\n \n );\n })}\n \n {item.name}\n
\n \n \n {!data.categories && Object.keys(mappedData).map(key =>\n \n \n )}\n \n \n \n
\n );\n};\n\nexport default FeatureCarousel;","export default __webpack_public_path__ + \"static/media/placeholder-alloy-wheel.67a6c0f8.png\";","export default __webpack_public_path__ + \"static/media/placeholder-interior.ee85adce.png\";","import { useTranslation } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport SwiperCore, { Navigation } from 'swiper';\n\nimport FeatureCarousel from 'components/AssemblySliderSelectors/FeatureCarousel';\nimport { setSelectedTab } from 'store/entities/app';\n\nimport { Tabs, Tab } from 'react-bootstrap';\nimport PlaceholderColor from 'assets/images/placeholder-color.png';\nimport PlaceholderWheels from 'assets/images/placeholder-alloy-wheel.png';\nimport PlaceholderInterior from 'assets/images/placeholder-interior.png';\n\nSwiperCore.use([Navigation]);\n\nconst AssemblySliderSelectors = ({ onChange }) => {\n const { t } = useTranslation();\n const dispatch = useDispatch();\n\n const { colorCode, interior, wheels } = useSelector(state => state.config);\n const { builderData } = useSelector(state => state.data);\n const { selectedTab } = useSelector(state => state.app);\n\n const tabsData = [\n {\n id: 0,\n title: 'exterior_color',\n dataKey: 'exteriors',\n active: colorCode,\n placeholder: PlaceholderColor,\n },\n {\n id: 1,\n title: 'wheels',\n dataKey: 'wheels',\n active: wheels,\n placeholder: PlaceholderWheels,\n },\n {\n id: 2,\n title: 'interior',\n dataKey: 'interiors',\n active: interior,\n placeholder: PlaceholderInterior,\n },\n ];\n\n return (\n \n {name}\n {!!price &&
\n {mappedData[key].map(radio =>\n setActiveItem(radio.code)}\n />\n )}\n +
\n \n \n \n
\n );\n};\n\nexport default Cart;\n","import React, { useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport { useTranslation } from 'react-i18next';\n\nimport { Button } from 'react-bootstrap';\nimport { ReactComponent as CartIco } from 'assets/images/icons/Cart.svg';\nimport { ReactComponent as ArrowUp } from 'assets/images/icons/ArrowUp.svg';\n\nimport { useDisableBodyScroll } from 'hooks/useDisableBodyScroll';\nimport useBreakPoints from 'hooks/useBreakPoints';\nimport useTotalPrice from 'hooks/useTotalPrice';\n\nimport Cart from 'components/BottomBar/Cart';\nimport Price from 'components/Price';\n\nconst BottomBar = ({ action }) => {\n const { t } = useTranslation();\n const totalPrice = useTotalPrice();\n\n const [isExpanded, setIsExpanded] = useState(false);\n\n const { builderData } = useSelector(state => state.data);\n const { isSmallerThanLg } = useBreakPoints();\n useDisableBodyScroll(isExpanded && isSmallerThanLg);\n\n const toggleExpand = () => {\n setIsExpanded(!isExpanded);\n };\n\n return (\n \n );\n};\n\nexport default BottomBar;\n","import { useEffect } from 'react';\n\nexport const useDisableBodyScroll = isDisabled => {\n useEffect(() => {\n if (isDisabled) {\n document.body.style.overflow = 'hidden';\n } else {\n document.body.style.overflow = 'unset';\n }\n }, [isDisabled]);\n};\n","import { Col, Row } from 'react-bootstrap';\nimport { useTranslation } from 'react-i18next';\n\nconst FinishScreen = ({ code, option }) => {\n const { t, i18n } = useTranslation();\n const configUrl = `${window.origin}/${i18n.language}/config?id=${code}`;\n\n return (\n {builderData.model?.name}
\n{builderData.name}
\n\n \n \n {t('price')}\n \n {selectedExterior &&\n \n {selectedExterior.name}\n \n }\n {selectedInterior &&\n \n {selectedInterior.name}\n \n }\n {selectedWheel &&\n \n {selectedWheel.name}\n \n }\n \n
\n \n {t('config_save_succ_title')}
\n {option === 'lead' &&MISSING_TRANSLATION
}\n\n {t('config_save_succ_text')} {configUrl}\n
\n \n{t('config_send_err_title')}
\n{t('config_send_err_text')}
\n \n\n {saveConfig.isFetching && (\n
\n {key}
\n{key}
\n- \n {mappedEquipmentData[key].map((item, idx) => (\n
- {item.name} \n ))}\n
{key}
\n- \n {mappedEquipmentData[key].map((item, idx) => (\n
- {item.name} \n ))}\n
\n
\n {t(action ? 'package_remove' : 'package_add')}
\n- \n
- \n \n
\n {data.option.name}\n {data.option.code}\n
\n\n \n
{t('will_removed')}
\n- \n {data.incompatibleOptions.map((set) => set.map((item) =>\n
- \n \n
\n {item.name}\n {item.code}\n
\n\n \n ))}\n
{t('will_added')}
\n- \n {data.requiredOptions.map((set) => set.map((item) =>\n
- \n \n
\n {item.name}\n {item.code}\n
\n\n \n ))}\n
\n
\n \n {t('initial_price')}:\n
\n \n {t('new_price')}:\n
\n \n \n \n
\n {t('error_title', 'Something goes wrong...')}
\n {/*{t('error_descr', 'Please try later')}
*/}\n{error?.message}
\n\n {error?.redirect && (\n \n )}\n {error?.refetch && (\n \n )}\n {error?.route && (\n
\n {\n this.imageContainerRef = inputEl;\n }}\n >\n {this.props.boxShadow ? : ''}\n {!this.state.imagesLoaded ? (\n
\n \n\n \n \n \n \n
\n ) : (\n ''\n )}\n \n \n \n
\n \n \n \n );\n }\n}\n\nexport default React360Viewer;\n","import PlaceholderInterior from 'assets/images/placeholder-interior.png';\n\nexport const getExteriorPictures = (exteriors, code) => {\n const foundExteriors = exteriors?.filter(item => item.code === code);\n\n if (foundExteriors?.length) {\n return foundExteriors[0].pictures;\n }\n return {};\n};\n\nexport const getActiveInteriorPicture = (interiors, code) => {\n const found = interiors?.find(item => item.code === code);\n return found?.pictures?.main || PlaceholderInterior;\n};","import { useTranslation } from 'react-i18next';\n\nconst useLocale = () => {\n const { i18n } = useTranslation();\n\n const language = i18n.language;\n const languageTags = language.split('-');\n\n if (languageTags[1]) return languageTags.join('_');\n\n const domain = window.location.hostname.split('.').pop();\n const supportedLngs = i18n.options.supportedLngs;\n const fallbackLng = i18n.options.fallbackLng?.[0] || 'en';\n const locale = supportedLngs.includes(domain) ? domain : 'ee';\n\n return [language, locale.toUpperCase()].join('_');\n};\n\nexport default useLocale;","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign || 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); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgExitFullscreen(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 20,\n height: 20,\n viewBox: \"-2 -2 20 20\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M7 8a1 1 0 011 1v4.8a1 1 0 01-2 0v-2.387l-4.293 4.294a1 1 0 01-1.414-1.414L4.584 10H2.2a1 1 0 110-2H7zM15.695.305a1 1 0 01.012 1.402l-4.293 4.292L13.8 6a1 1 0 010 2H9a1 1 0 01-1-1V2.2a1 1 0 112 0v2.385L14.293.293a1 1 0 011.402.012z\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgExitFullscreen);\nexport default __webpack_public_path__ + \"static/media/ExitFullscreen.932d47bf.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _path2;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign || 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); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgInfo(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 30 30\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M28.5 12.6c-.7 0-1.1.7-1 1.3.63 12.05-14.4 18.01-22.2 8.8C1.7 18.4 1.5 12.4 4.6 8c3.1-4.4 8.9-6.5 14.1-4.8.4.1.9 0 1.2-.2.3-.2.5-.8.4-1.2-.1-.4-.4-.8-.8-.9C14-.9 7.8.8 3.9 5.1c-8.96 10.03-.99 25.84 12.4 24.6 8.2-.7 14.3-7.8 13.5-16-.1-.62-.67-1.16-1.3-1.1z\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M15 11.7c-.7 0-1.3.5-1.3 1.2v9c0 .6.6 1.2 1.2 1.2s1.3-.6 1.3-1.2v-9c0-.7-.6-1.2-1.3-1.2zm1.2-3.4c0-.7-.6-1.2-1.3-1.2s-1.2.5-1.2 1.2.6 1.2 1.2 1.2 1.3-.5 1.3-1.2z\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgInfo);\nexport default __webpack_public_path__ + \"static/media/Info.9978fc3a.svg\";\nexport { ForwardRef as ReactComponent };","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAxgAAAG8CAYAAABdbwO1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTgyMDgzN0U0QjIxMTFFOUFGMzhFNEFCQUNCODFENTkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTgyMDgzN0Y0QjIxMTFFOUFGMzhFNEFCQUNCODFENTkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMjhGRTUwNTRCMUYxMUU5QUYzOEU0QUJBQ0I4MUQ1OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMjhGRTUwNjRCMUYxMUU5QUYzOEU0QUJBQ0I4MUQ1OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnqTjF8AABsASURBVHja7N1pd9tGmoDRorV7X7N0ku4P8///1JyeaWeVLdvaKJGDNygMEUYWKRIksdx7Do4cJ3HiokzgYaEKo+l0mgAAAJrwyBAAAAACAwAAEBgAAIDAAAAAEBgAAIDAAAAABAYAACAwAAAABAYAACAwAAAAgQEAACAwAAAAgQEAAAgMAABAYAAAAAgMAABAYAAAAAIDAABAYAAAAAIDAAAQGAAAgMAAAAAQGAAAgMAAAAAEBgAAgMAAAAAEBgAAIDAAAACBAQAAIDAAAACBAQAACAwAAACBAQAACAwAAEBgAAAAAgMAAEBgAAAAAgMAABAYAAAAAgMAABAYAACAwAAAAAQGAACAwAAAAAQGAAAgMAAAAAQGAAAgMAAAAIEBAAAIDAAAAIEBAAAIDAAAQGAAAAACAwAAQGAAAAACAwAAEBgAAAACAwAAEBgAAIDAAAAABAYAAIDAAAAABAYAACAwAAAABAYAACAwAAAAgQEAAAgMAAAAgQEAAAgMAABAYAAAAAgMAABAYAAAAAIDAAAQGAAAAAIDAAAQGAAAgMAAAAAQGAAAgMAAAAAEBgAAIDAAAAAEBgAAIDAAAACBAQAAIDAAAACBAQAACAwAAEBgAAAACAwAAEBgAAAAAgMAAEBgAAAAAgMAABAYAACAwAAAABAYAACAwAAAAAQGAACAwAAAAAQGAAAgMAAAAIEBAAAgMAAAAIEBAAAIDAAAQGAAAAAIDAAAQGAAAAACAwAAQGAAAAACAwAA6Jx9Q9BNo9HIIAAAgzKdTg1CB5jBAAAABAZsyCgfAAAIDFjbUXG8NAwAAAIDmnBdHAfFcWIoAAAEBqwjbo2aFMeH4nia3CoFACAwYA3V1hQxi3GTIwMAAIEBaztL5W1Se4YCAEBgwLpui2NcHM8NBQCAwIAmxCzGcfJASgAAgQFrigXeMYtxWRyvDAcAgMCAdVQLvj/k2Dg2JAAAAgOaCI3zZC0GAIDAgIZ8SeVuUo8NBQCAwIB1xO1RMYvxuTheGw4AAIEB66jWYnxK5QP4ntXCAwAAgQEri21rX+Q/N1PDAQAgMGAdsWXtbY4MAAAEBqysuiXqNJW3SXn4HgCAwICVVbdEXSYP3wMAEBjQoD+K46g4Dg0FAIDAgHXdFMdVcbwxFAAAAgOaEGsxjvMRbFsLACAwYGUxixEP33ubZg/jAwAQGIYAVvZ7/jP01FAAAAgMWNcklU/4jh2l3CIFACAwYG0fimOvOF4aCgAAgQHrirUXv+XA8OcJABAYhgDWFrdJjdNs21q3SwEAAgNYSRUT8fC9WOy9n8pZDZEBAAgM4MGq7WnPUzmL8Xru5wEABAbwIPVZjFiL4eF7AIDAAFZWn8WIXaXezv08AIDAAFYSgXFYHM8MBQAgMIB1XRfH51Q+fA8AYHD2DQE0LmYxfkrlLMYnw9GIUZqtaYmvq+zU1dT73fED//nLBX//5p6/N60dACAwYKBiFuMslbMYQwyMR/m9ZXTHxfLhV/6dvXv+XjhKsxnXSVpt9vUg/3cqt/mvbx/46+w98J+/XfDrXC+IjPsiZf7nx7X4ulnh9wYAaxtNpz4Y6+QLN7JBUcvFxeMPxXGaI6P61H2n3zZ3XHDXL7QP5i5I93IoHN5z0f+1wDho8AKdh8XMpPa9dnNPkIxrr/e49s/etuT7FeBvXLd2gxkM2MyF/G2+mItZjPO0mU+SR/livvrEurqon+Y/2/U/34e1C/9xjoO99NeZABf+/QjbvbnXve7xPf/u9VyUXM6FybgWI27bAuDrFyhKsKMvnBmMNsdFdcEf6zCO88XZRSpnM24e8GtVF4ujuWCoLhqP0mzWoR4LQoFNie+1q/zjqzS7vas63JIFbJTrVoGBwBiyuPj/ce5iP0Lj9/y1CoZRLQqqcHiUZrcfHYgGOhIecWvWeC48xunvt20BCAyBgcBgmZckx8BRDoeT4nj6lQuxcfr7gmPoa3hUMx7jHB5X+efNeAACQ2AgMKipdkqKoHicY+FENMBSxvnP0EX+cbXGo4oOJyZAYAgMBEb3h3SJi5pHOSIe57A4EhTQmGo2Yz46YtZjYngAgSEwEBhdjYhFUfHYMMJWo6Oa2bjIX6/z4eQFAgOBgcBonUc5OvZqP64WVVczFAfp/mc6AA1fP6TFT2mvdmaLr1dptnUuIDAQGAiMh//WH3AhMR8M1c8d5x9XX/droQF0S7VF7kUtPG4MCwgMBAYCY9XYqM887Nei4SjNFmKn5KGSMBRxW9UfxfElmdkAgYHAQGAsiIkqIqqtYPfTbLtXtzEB86HxuTh+ERkgMBAYCIxHcyFxLCSAFcWC8NM0253KSQ8EBgKDgQRGhMSzHBDHYgJo2Dgfn1J5+5R1GiAwEBj0PDC+z4EBsI3YiNunzvPhRAgCA4FBDwPjVXG888oC27xWSeVMRsTGx+QWKhAYCAyB0TvPcmTY8QnYhZjNiFuoYr3GteEAgYHAEBj9EHHxojieJ2swgN3GxmlyCxUIDASGwOiN2Enq22RdBrDDa5lUzmZEaMRD/G4NCQgMBIbA6LbD4vgxuWUK2L1qYfinHBuAwEBgCIwu/jaL47tkFgNo0fVNmj1Xw+1TIDC4g0+GafuJ/FJgAC0SH3y8zj+O52lUsxoTQwMgMGj/Sby6/xmgjZ7kIzamiNmMs2T3KQC3SHX2hRvGLVLxRO+3xfHYKw50gNunYNN/yFy3CgwExhritqjYReqRVxvooOr2qTOhAQJDYCAwdvRbqp2EPdUb6ItYR/Yxx4ZtbkFgCAwExpbjImYr4paol15hoGfitqmz5CnhIDAEBgJja3GxVxzfJ+stgJ5fH6VynYYF4SAwBAYCY8Nx8UMqF3UDDMXHfHhwHwgMgYHAaJC4AIYuFoT/LjRAYAgMBMb6Iiq+ERcAfzKjAQJDYCAwVvlfT+VtUREV/0ge9ggwz4wGCAyBgcB4IHEBsFg1o3GVPEsDBIbAQGD8/X85mbkAWEX1LA0P7UNguG4VGAiMubg4SuWCbnEBIDRAYAgMBMZacWG3KAChAQJDYCAwGouMiAsP0QMQGiAwBAYCY22xFe1LrxqA0ACBITAQGOt6kw8AhAYIDIGBwFjLs+L43qsFsFXxHI3PQgOBgcCgb4ER6y1+9EoB7DQ0PLAPgYHAoNOBYTtagPapHtgnNBAYCAw6FxghtqP9Z3EceJUAWuWPVN42dW0oEBgIDLoSGI9S+ZRu29ECtDs04pgYCgQGAoM2BcZhcTzJP45boeITsWfiAqATLorjNJWLwUFgIDDYeWBESLxL1lgAdF0sBP8oNBAYCAx2GRgnxfGTVwCgVywER2AgMATGzgIjFnHHsy3cCgXQz9CIrW1vDAUCA4EhMLYpZjFiG9pHXgmAXrIQHIGBwBAY2/tPp/JZF69SuQ4DgH6yEByBwUos0uXBf7ZzZBwbCoBeO8lHLAT/kL8uq/owChggMxhdfeF2e4vUN8Xx0qsAMCgRGLE2I7Ylj1unrvLPT/LPT0UFm+a6tRvMYLB00+QTx3NxATBIT77y8+PiuJ0LjuscHbf5r6uvrg5hCBeNSrCjL9x2ZzCquIjbon5MFncDsJxxPmdM7oiQ87lAmSazICzgulVg0I/AqOIitqf9IVl7AUDzETL/tQqQ+gzIraHCdavAoPuBUV+kF8++eGbkAdiy6/z1JsfHZZrdflV9dTEjMBAYdCQwQsxcvEnWXQDQzviIyKhuvapmParbrhAYCAxaFhgxY/G2OA6MOAAdUq3v+JS/XuXDRY/AQGCw5cCoboka5bB4ZaQBeMj1Xz6HtFHcWlUtNI8fj9NsvQcCA4HBBgKjHhffJestAOi/i/w1brX6IjoEBgJDYGzglxUXAPBneNSj4yZ5jofAQGAIDHEBwHCuO9PXb82a1s5zq6pmNmJNR30XKwQGAkNg3CPWW7wzsgCwMFrOc3BUu1hd57/2oECBQWHfEFA4SeVWtABA6b5P8h7fESLVLEe4SrMtc6vbq6zrYDh/eJRgR1+4ZmcwPEQPADZjmmbb5FbP6LjK4TFNbrV62GC6bu0EMxjE98CJYQCAjYhPBI/zMS8Wk09ycFThMUmzWQ8QGHTuDW+a48L3AQBsX/UB35M7wiPWdcTsxuccG9UaD2j/Raappo6+cM3dIvVNcbw0ogDQalV0xC5W1YzH4LbOdd3aDT655tgQAEDrneTjxT3RcZ3cWoXAYMf2DAEA9CY66sERP3ZbFQKDnQSG7wEA6HdwfMk/tmMVAgMAgEaCox4b1dPIQWDQmGoHqX3fAwAwuNhIOTQ+58PMBgKDxliDAQDD9CQfz9NsZiMOazYQGGxMvMGMDAMA9Nr8bVRxxKzGpaFBYPDQeFhEXADAMGPjdXF8zIfQQGAAALC2F/mIyDhN5W1UIDD4qmqR9yJukwKA4bjrvC80EBgs/QayzOsvLgBgOO4779dDw61T3OuRIRi0A0MAACwwnQuNfxbHW9eRCAwAAFZx18xGLAT/oTiODQ8Cgzp7XQMAq4odp6rZDBAY/MkaCwBgXTGb8VPyAF8EBskMBgDQjJjN+K/ieGooEBgAADTlH8ktUwLDEAAA0KC4ZeqdYRguz8EYNtvUAgCb8CqVH2T/Vhy3hmNYzGAMVyzEOjIMAMCGxDMz3C4lMBiQg2QGAwDYfGR8axgEBsNg9gIA+Jomd5qMyHhlSAUGXnsAYLhx0fSzsmLR9xND6yITAIDh2dSDeONWqWPDKzDor4khAAC2KHYvPTEMAoP+ujIEAMCWHRoCgQEAAE2x4Ftg0GNxi9SNYQAAtiwWfFuLITDoobHAAAB25JtUPvQXgQEAAGuLGQxP+RYYAAB03LRF/y8vklulBAa9e+1NTQLAsIxa9v9j21qBQY8c5AMAYN50w/88AoMeMnsBADRlZAgQGN4APOgGANh1MLhFSmDQA9UU5hNDAQCAwGAd1acRj5NdGwAAEBisKWYv4taod157AKDB64td/LsIDFogFnbHkzOPDAUA0JDRGtFgcbjAoOOep/L2KACAbQXHfWKRt41nBAYdFYu63xkGAKBF9pKdpAQGnfXGEAAALWRnS4FBB8WOUaYfAYA2eprsbikw6JxXXmsAoMX2DIHAoDti5sK9jQCAa1K8mDQitqTdNwwAQIs9MwQCg+4QFwBA21mHITAQGAAAjTKLITDoCE/IBADabpoDw66XAgMAANYWH4jGXReeiSEwaLnY8s39jABAV8TW+mYxBAYAADTCLIbAoOVui+PSMAAAHYsMBAYttecPKQDQMQeGQGDQPtXOUU/zAQDQFfvJLpgCg9aJrd5i9uKFoQAAOmZiCAQG7fQ22UEKAOjm9akZDIFBy0RYuDUKAOgia0gFBi38Q/k6fwUA6OL1qWtUgUGLxM4LZi8AABAYNOK1IQAAQGDQBGsvAICui90w7SQlMGgJsxcAQNfFAu8TwyAw2L1jfxgBgJ54YggEBrsXcWHnKACgD+KW70PDIDDYfWAAALi2QWCwtih8T+0GAFyn4oWjscL3xEsAoE9c2wgMdsg9igBA37hFSmCwQweGAADombj9+8gwCAy2L3aOMoUIAPTRc0MgMAAAAIEBAACtc20IBAYAADThsjguDEP3uHe/+27zH0DPwQAAuu68OM5SOXMxztc5CAx2YGoIAIAeOC2OL4ah29wi1W2j/PXGUAAAPfA0lTtkIjDYkWrmwgIoAKAPXhTHa8PQbW6R6odxPjxwDwDooklxfEzlom4LuzvODEY/xAyGRVAAQJevSeN65rNrGoFBe3wyBABAh32bylukEBi0ROy4YLE3AND1yHhiGAQG7RDTipeGAQDouDfJTlICg9awbzQA0HXx8OCnhkFg0A4xgzE2DABAx8VaDLMYAoMWuErl7gsAAF1mFkNg0CKxh7RZDACg6yz2Fhi0RCz2/mAYAICOO84HAoMWOEt2lAIAum2/OI4Mg8CgHeIJmB8NAwDQcXGblMXeAoOWiMDwdG8AoMtOBIbAoF1+TxZ8AwDdFXFxYBgEBu0wSuWC718MBQDQYfuGQGDQDtP8NZ7u/bPhAAA6yk5SAoMWivUY/1McE0MBAHSMnTEFBi0VMxn/9ocUAACBQZOfAMRMxq/FcWU4AABomkUzwxPPyDhN5cP4nqdyf+ljsQkAtNSNIRAYtN+oFhpxHObQiOMk/30AgDbEhS33BQYdMJ376+t8RGwc58gwswEA7NplvkZBYNDxP8hxxC1U8XCboxwaR4IDANiyL4ZAYNAft/mITw0+pfK2qXiSZsxuPM6xsSc4qJnmw/cEAE2IDzw/G4buGU2nU6PQxRdutPNlEns5UEc5OiI+DvPXA6/QIMXuZBfF8W0qZ7wAYB2x8+VfZjBctwoM+h0YX4uOVIuMkxwhB/nrXgP/jVjsNc1hMxUzrYqL0+rbszhepnIdz57YAGAFp/nckgSGwGB4gVFd6C8Kj4NaaBznf++oFgi3c5FS/dwv+Wt1O1Y8v2NS+2//y3dDO08C2bPi+N4QAfAA1XO7bgVGN1mDwbqW+ZNeree4nIuO8Dh/H37J4RCzHi/yz8dC809L/Pdtq7s79ZmLh4YnANwVF+/vigsEBqQFF53VG8d8QMRfnxfH0zRb2HXfxarA2J3Tr8RFPTyv0mx240kOR6Cbblw7sOHvr7gG+ENcCAx4iGU/0Y43lo8L/r0qOmLWw65FuzkR/LrEP1c9YyV8SOXajHdL/jciTpZ9uFJ8Dxxs6Hthz8sNf/6Z/9/8nvsmlbc/wkNNauf5cX7Pjq+f83u+510IDGhFrNz4Pt6Jy7nQu8/ojlC8qcXAfBTEDFa19may4xCI/7ddLlKvNkloQ/jXx+R4AOeuR6l/s6O3tT9/4XDJ32MVF9Wf+//kC8LXySYO3B8TkxwNVTxc1P7+OLmVVmBAS1234GJnqOO+7MXptHYx8yxfnNRnJuYvUC7Sap9i3Wz498pmY27+wqQen/OhuanZqnTHf2fU4K912OD4H6bFt5Hspdks4nntz8g4/70fl7wOuEl/XUMXqttZIzKeJjv6UbrM31/V07dvclwgMKBTvHF1Z9zjYuj9HRfsl4bzXm37FH2atnd/9O2Oo6+t35t7c3E/mnt9RkuMY/XJ8v4a35fx68atknFL6wuhsXM/5wv6eF1iw5TjfGziNbmpHdWHQtVtT7df+X4xWyEwoDMuDMFOrHLhdevEs/IFPdsNr/pF+rSh/9cmX8fbBsZrmpZf43Sx4PvyOs12lItZypdCY+vm1y5W79ERGDFTte6MX7VO4ibNZiZuHvC96H1MYECnuH1lNxe84wYvmpx4aOP3zbRD/6+r/j/ELU4vGvxv3KTZznLvfItu1eXce3L14+v89+Z38Jvc8eP7rgk/p+U29gCBQS9M8sWuT8u2x21p0A8RGPGp9949ERR/79OSv151UXuRbCG+bRdzr+G0do6MTTOezIXgeO49PW5v+35BPKZkxhmBwYBcCoytn8iSkwx0Xtze8nODv179+Tdx2IBje77c8/fq24Uveu0WBYb3fZbi+QH0wWdDsFVnhgBYcLH6yTBszTI7NY1qx/zPh8sFv4YH3yEwGJwvyacq2zJJbpECFjv3vrw1y3zINq0d8z9fRcq/lwhDt70hMBjURa/F3tuLOYBF4oMIu/xtR1OzRTFLEc8p+vWOc+zEMCMwGJLq0xS3SW3HR0MALPm+7P1i8643EHKxE1jMZtzUwsMaDAQGgzKtvSF649us+ATr3DAAS74vxwc/Y8OxUWdpM7ctnefIiK+XyRoMBAYDvvi1NmCzqlki9+ACy4aGWYzNj++mPly7zpHxPvkAD4HBgP1uCLYyvk40wLLiAtin390eW+/5CAwGLRYgfzAMGxHj6lYH4KHiAvi/XaRu5KL/1DAgMGA7rMVwIgPaJT6c8PycZp0lH/ogMMCJzIkMGLC4xdJWp82YJLcEIzDAicyJDBi42ObUTGgzTtNs21gQGOBE5kQGDNYfyUNR13WdxxEEBjiROZEBgxfruX4xDGv5JVlniMAAJzInMoD/Fw9us9vfaj4kDztFYIATmRMZwN/8mjwY9aGu8riBwAAnMicygDkxM/qfZDOOZU3yeJlRRmCAE5kTGcBXxBqv94ZhKe+TNYUIDHAicyIDWOhzcfxmGO71Wx4nEBjgROZEBrCE2KnOWrm7fUh28kNggBOZExnAg8WOdWeG4S/Okp0QERjgROZEBrCy996b//Ke7LZeBAY4kTmRATTw3jz0WeYP3pPpg9F0arOYTr5wo5FBWN83xfFy4CcyMxdA27wujrcD/H3HOji3qi7gulVgIDCcyJzIAFbxtDi+S8O40yK2B49ZC5tsCAyBgcBwInMiA9igg+L4vjiOe/x7vEzls4fGXm6BITAQGE5kTmQAWzjdpXKW+VUPf2+nqZxNdiEmMAQGAsOJzIkMYMsep3Ld3GEPfi/xMNNY/3buZRUYAgOB4UTmRAaww1NfKj8AirVzXbylNW5RjbVv8YGPiy+BITAQGE5kTmQALbFfHG+K43l+r279NXEqtwT/vThuvHwCQ2AgMHAiA2inWDsXHwS9aOn7c7wff0zlBz3WvgkMgYHAwIkMoCP28ntzfBDUhltb49bUs/yefOvlERgCA4GBExlAd50Ux7NUbj++v8X/bswYx/bfn4rjwssgMASGF0pg4EQG0D9HxfEkv1fHFuR7Df7a8YHOZX4P/lIcV4ZbYCAwBAZOZADDcpDfqw/zjw/ye3Uco7n37XjfneavcYzzcZ3fg92KKjAQGAIDJzIAEBgIDAAAoFMeGQIAAEBgAAAAAgMAABAYAAAAAgMAABAYAACAwAAAAAQGAACAwAAAAAQGAAAgMAAAAAQGAAAgMAAAAIEBAAAIDAAAAIEBAAAIDAAAQGAAAAAIDAAAQGAAAAACAwAAEBgAAAACAwAAEBgAAIDAAAAAEBgAAIDAAAAABAYAACAwAAAABAYAACAwAAAAgQEAACAwAAAAgQEAAAgMAABAYAAAAAgMAABAYAAAAAIDAABAYAAAAAIDAAAQGAAAgMAAAAAQGAAAgMAAAAAEBgAAgMAAAAAEBgAAIDAAAACBAQAAIDAAAACBAQAACAwAAEBgAAAACAwAAEBgAAAAAgMAAEBgAAAAAgMAABAYAACAwAAAABAYAACAwAAAAAQGAACAwAAAAAQGAAAgMAAAAIEBAAAgMAAAAIEBAAAIDAAAAIEBAAAIDAAAQGAAAAACAwAAYFX/J8AAtmecbLQrySgAAAAASUVORK5CYII=\"","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport { FullScreen, useFullScreenHandle } from 'react-full-screen';\nimport { Button, Container, Image } from 'react-bootstrap';\n\nimport Accessories from 'components/Accessories';\nimport Packages from 'components/Packages';\nimport AssemblySliderSelectors from 'components/AssemblySliderSelectors';\nimport LocalizedLink from 'components/LocalizedLink';\nimport RewindButton from 'components/RewindButton';\nimport BottomBar from 'components/BottomBar';\nimport { PackagesModal } from 'components/modals';\nimport LoadingSpinner from 'components/LoadingSpinner';\nimport Price from 'components/Price';\nimport NotFound from 'components/NotFound';\nimport ThreeSixty from 'components/360Viewer/index';\n\nimport { getActiveInteriorPicture } from 'utils/dataUtils';\nimport { setColor, setInterior, setWheels, updateAccessories, updateExtraPackages } from 'store/entities/config';\nimport { setCompatibilityData, setErrorData } from 'store/entities/data';\n\nimport useLocale from 'hooks/useLocale';\nimport useBreakPoints from 'hooks/useBreakPoints';\n\nimport { ReactComponent as FullscreenIco } from 'assets/images/icons/Fullscreen.svg';\nimport { ReactComponent as CloseFullscreenIco } from 'assets/images/icons/ExitFullscreen.svg';\nimport { ReactComponent as ArrowRight } from 'assets/images/icons/ArrowRight.svg';\nimport PlaceholderCar from 'assets/images/placeholder-car.png';\n\nimport { useSpecificationDataRequest, useCompatibilityDataRequest } from 'api/requests';\n\nconst Assemble = () => {\n const { t } = useTranslation();\n const dispatch = useDispatch();\n const locale = useLocale();\n\n const [option, setOption] = React.useState(null);\n const [resolve, setResolve] = React.useState(null);\n const [pictures, setPictures] = React.useState([]);\n\n const { model, specification, colorCode, interior, wheels, extraPackages, accessories } = useSelector(state => state.config);\n const { builderData, errorData } = useSelector(state => state.data);\n const { selectedTab } = useSelector(state => state.app);\n\n const ENV = window.ENV[window.location.hostname] || window.ENV.default;\n\n const handleFullScreen = useFullScreenHandle();\n const { isSmallerThanLg } = useBreakPoints();\n\n const packagesData = builderData?.options || [];\n const selectedPackages = packagesData.filter(item => extraPackages.includes(item.id)).map(item => item.code);\n\n const accessoriesData = builderData?.accessories || {};\n const allAccessories = Object.keys(accessoriesData).reduce((result, key) => result.concat(accessoriesData[key]), []);\n const selectedAccessories = allAccessories.filter(item => accessories.includes(item.id)).map(item => item.code);\n\n const imageMain = builderData?.exteriors?.find(item => item.code === colorCode)?.pictures.main;\n const isInteriorTab = selectedTab === 'interiors';\n\n const resolveConfirm = () => {\n let resolvedPackages = [...extraPackages];\n let resolvedAccessories = [...accessories];\n const equipment = {\n 'options': packagesData,\n 'accessories': allAccessories\n };\n const apperance = {\n 'exteriors': {\n value: colorCode,\n code: builderData.default.colorCode\n },\n 'interiors': {\n value: interior,\n code: builderData.default.interior\n },\n 'wheels': {\n value: wheels,\n code: builderData.default.wheels\n }\n };\n const updateArray = (array, el, remove) => {\n if (remove) {\n const index = array.indexOf(el);\n if (~index) array.splice(index, 1);\n } else {\n array.push(el);\n }\n };\n const updateOptions = (type, item, remove) => {\n switch (type) {\n case 'options':\n updateArray(resolvedPackages, item.id, remove);\n break;\n case 'accessories':\n updateArray(resolvedAccessories, item.id, remove);\n break;\n case 'exteriors':\n dispatch(setColor(item.code));\n break;\n case 'wheels':\n dispatch(setWheels(item.code));\n break;\n case 'interiors':\n dispatch(setInterior(item.code));\n break;\n }\n };\n resolve.incompatibleOptions?.forEach(set => // remove conflict options\n set.forEach(item => {\n Object.keys(equipment).forEach(type => updateOptions(type, item, true));\n Object.keys(apperance).forEach(type => {\n if (type !== option.type && apperance[type].value === item.code) updateOptions(type, apperance[type]);\n });\n })\n );\n resolve.requiredOptions?.forEach(set => // add additional options\n set.forEach(item => {\n Object.keys(apperance).forEach(type => {\n if (builderData[type].some(el => el.code === item.code)) updateOptions(type, item);\n });\n Object.keys(equipment).forEach(type => {\n if (equipment[type].some(el => el.id === item.id)) updateOptions(type, item);\n });\n })\n );\n updateOptions(option.type, resolve.option, option.check);\n dispatch(updateAccessories(resolvedAccessories));\n dispatch(updateExtraPackages(resolvedPackages));\n dispatch(setCompatibilityData(resolve));\n setOption(null);\n setResolve(null);\n };\n\n const resolveCancel = () => {\n setOption(null);\n setResolve(null);\n };\n\n const dataSpecification = useSpecificationDataRequest({\n params: {\n specification,\n params: {\n brand: ENV.BRAND_NAME,\n [option?.check ? 'remove' : 'add']: option?.code,\n 'options.code': [\n colorCode,\n //interior,\n wheels\n ].filter(item => item),\n language: locale\n }\n },\n config: {\n enabled: false,\n },\n success: (result) => {\n const pics = result.data.exterior.pictures['360'] || [];\n setPictures(pics);\n },\n error: (error) => {\n console.log('Specification error: ', error.message);\n }\n });\n\n const dataCompatibility = useCompatibilityDataRequest({\n params: {\n specification,\n params: {\n brand: ENV.BRAND_NAME,\n [option?.check ? 'remove' : 'add']: option?.code,\n 'options.code': [\n ...selectedPackages,\n ...selectedAccessories,\n colorCode,\n interior,\n wheels\n ].filter(item => item),\n language: locale\n }\n },\n config: {\n enabled: false,\n },\n success: (result) => {\n if (result.data?.requiredOptions || result.data?.incompatibleOptions) result.data.resolve = true; // need confirmation for resolving\n setResolve(result.data);\n },\n error: (error) => {\n console.log('Compatibility error: ', error.message);\n }\n });\n\n React.useEffect(() => {\n if (resolve && !resolve.resolve) resolveConfirm();\n }, [resolve]);\n\n React.useEffect(() => {\n if (option) dataCompatibility.refetch();\n }, [option]);\n\n React.useEffect(() => {\n if (!!colorCode) dataSpecification.refetch();\n }, [colorCode, wheels]);\n\n React.useEffect(() => {\n dispatch(setErrorData(!specification ? {\n type: 'model',\n message: 'Model ID or model CODE is missing',\n redirect: '/'\n } : {}));\n }, [specification]);\n\n const packagesModalProps = {\n show: resolve?.resolve,\n data: resolve,\n target: option,\n onConfirm: resolveConfirm,\n onCancel: resolveCancel\n };\n\n const threeSixtyProps = {\n buttonClass: 'button',\n amount: pictures.length,\n autoplay: true,\n spinReverse: true,\n key: pictures,\n images: pictures\n };\n\n const isThreeSixtyShow = pictures.length && !dataSpecification.isFetching;\n\n return (<>\n {dataCompatibility.isFetching && (\n \n
\n {!isSmallerThanLg && (\n {builderData.model?.name}
\n{builderData.name}
\n\n {t('price')}\n
\n
\n {handleFullScreen.active ? (\n \n ) : (\n \n )}\n
\n )}\n\n \n \n
\n \n
\n {title}
\n\n {price && (\n
\n \n \n \n {t('starting_price', { price: renderToString(
{info}
\n )}\n- \n
- \n {data.type && (\n \n \n {data.type}\n\n )}\n {typeof doors !== 'undefined' && (\n\n {doors}\n Doors\n\n )}\n \n
- \n {data.transmission && (\n \n \n {data.transmission}\n\n )}\n {typeof seats !== 'undefined' && (\n\n {seats}\n Seats\n\n )}\n \n
\n \n
\n\n
\n \n \n 
\n \n
\n );\n};\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport { Container, Image, Button } from 'react-bootstrap';\nimport { Swiper, SwiperSlide } from 'swiper/react/swiper-react';\nimport { Navigation, Pagination, Mousewheel, Keyboard } from 'swiper';\n\nimport useLocale from 'hooks/useLocale';\n\nimport { setBuilderData, setRawBuilderData, setErrorData } from 'store/entities/data';\nimport { setConfig, setBody, setEngine, setSpecification } from 'store/entities/config';\n\nimport { CarPartCard } from 'components/Cards';\nimport { TechDataModal } from 'components/modals';\n\nimport LocalizedLink from 'components/LocalizedLink';\nimport RewindButton from 'components/RewindButton';\nimport BottomBar from 'components/BottomBar';\nimport Price from 'components/Price';\n\nimport LoadingSpinner from 'components/LoadingSpinner';\nimport NotFound from 'components/NotFound';\n\nimport PlaceholderCar from 'assets/images/placeholder-car.png';\nimport { ReactComponent as ArrowLeft } from 'assets/images/icons/ArrowLeft.svg';\nimport { ReactComponent as ArrowRight } from 'assets/images/icons/ArrowRight.svg';\n\nimport { useBuilderDataRequest } from 'api/requests';\n\nconst CarPartSelection = () => {\n const { t } = useTranslation();\n const locale = useLocale();\n const dispatch = useDispatch();\n\n const [isModalOpen, setIsModalOpen] = React.useState(false);\n const [modalType, setModalType] = React.useState('equipment');\n\n const { model, specification, body } = useSelector(state => state.config);\n const { builderData, bodyData, errorData } = useSelector(state => state.data);\n\n const ENV = window.ENV[window.location.hostname] || window.ENV.default;\n\n const image = builderData.pictures?.main || builderData.exteriors?.[0]?.pictures?.main || PlaceholderCar;\n\n const engines = bodyData[body]?.engines || [];\n const bodies = Object.keys(bodyData || {});\n\n const handleSelectEngine = (engineId, eic) => {\n dispatch(setEngine(engineId));\n dispatch(setSpecification(eic));\n };\n\n const handleSelectBody = (bodyId, engineId, eic) => {\n dispatch(setBody(bodyId));\n if (engineId || eic) handleSelectEngine(engineId, eic);\n };\n\n const handleModal = (type) => {\n setModalType(type);\n setIsModalOpen(true);\n };\n\n const dataBuilder = useBuilderDataRequest({\n params: {\n specification,\n params: {\n brand: ENV.BRAND_NAME,\n language: locale\n }\n },\n config: {\n enabled: false,\n },\n success: (result) => {\n dispatch(setBuilderData(result.data));\n dispatch(setRawBuilderData(result.data));\n dispatch(setConfig(result.data.default));\n dispatch(setErrorData({}));\n },\n error: (error) => {\n dispatch(setErrorData({\n type: 'builder-data',\n message: error.message,\n refetch: true\n }));\n }\n });\n\n React.useEffect(() => {\n specification ? dataBuilder.refetch() : dispatch(setErrorData({\n type: 'model',\n message: 'Model ID or model CODE is missing',\n redirect: '/'\n }));\n }, [specification]);\n\n const swiperProps = {\n className: 'card-swiper carpart-swiper',\n cssMode: true,\n slidesPerView: 'auto',\n navigation: {\n prevEl: '.swiper-button-prev',\n nextEl: '.swiper-button-next',\n },\n pagination: {\n clickable: true,\n },\n mousewheel: true,\n keyboard: true,\n modules: [Navigation, Pagination, Mousewheel, Keyboard]\n };\n\n return (<>\n {dataBuilder.isFetching && (\n \n
\n {gradeName}
\n \n {engineType}\n \n\n \n {t('starting_price', {\n price: renderToString(
\n
\n {bodyName}
\n\n \n
\n\n \n \n \n \n
\n \n
\n {builderData.name}
\n\n {t('price')}\n
\n
\n
\n {t('equipment')}
\n- \n {builderData.equipment?.slice(0, 4).map(item => (\n
- {item.name} \n ))}\n
\n \n
\n{t('choose_body')}
\n{t('choose_engine')}
\n {engines.length ? (\nNo engines found
\n )}\n{t('tire_labels_text')}
\n - \n {tireLabelsData.map((item) => \n
- \n
\n \n \n {t('tire_labels_more')}\n \n\n \n )}\n
\n \n \n
\n \n
\n \n
\n {builderData.model?.name}
\n{builderData.name}
\n\n
{t('your_selected_accessories')}
\n\n {t('consent_short_text')}\n
{t('grade_selection_descr')}
\nNo cars found
\n )}\n\n
\n {model.name}
\n{t('model_selection_descr')}
\n\n {renderModel(modelsData)}\n
\n {noData && (\n No cars found
\n )}\nError 404
\nConfig not found
\n \n);\n\nexport default ConfigFailedLoading;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useDispatch } from 'react-redux';\nimport { useLocation, useNavigate } from 'react-router';\nimport queryString from 'query-string';\n\nimport { Container, Row } from 'react-bootstrap';\n\nimport ConfigLoadingPlaceholder from 'views/Config/ConfigLoadingPlaceholder';\nimport ConfigFailedLoading from 'views/Config/ConfigFailedLoading';\nimport LoadingSpinner from 'components/LoadingSpinner';\n\nimport useLocale from 'hooks/useLocale';\nimport { setConfig } from 'store/entities/config';\nimport { setBuilderData } from 'store/entities/data';\nimport { useBuilderDataRequest, useConfigDataRequest } from 'api/requests';\n\nconst Config = () => {\n const { i18n } = useTranslation();\n const locale = useLocale();\n const location = useLocation();\n const dispatch = useDispatch();\n const navigate = useNavigate();\n\n const [isConfigLoading, setIsConfigLoading] = React.useState(true);\n const [fetchedConfig, setFetchedConfig] = React.useState(null);\n\n const ENV = window.ENV[window.location.hostname] || window.ENV.default;\n\n const { id } = queryString.parse(location.search);\n\n const dataBuilder = useBuilderDataRequest({\n params: {\n specification: fetchedConfig.specification,\n params: {\n brand: ENV.BRAND_NAME,\n language: locale,\n 'options.code': [\n fetchedConfig.colorCode,\n fetchedConfig.wheels,\n ],\n }\n },\n config: {\n enabled: false,\n },\n success: (result) => {\n saveBuilderData(result.data);\n },\n error: (error) => {\n setIsConfigLoading(false)\n }\n });\n\n const dataConfig = useConfigDataRequest({\n params: {\n id\n },\n config: {\n enabled: false,\n },\n success: (result) => {\n saveSpecification(result);\n },\n error: (error) => {\n setIsConfigLoading(false)\n }\n });\n\n React.useEffect(() => {\n if (fetchedConfig) dataBuilder.refetch();\n }, [fetchedConfig]);\n\n React.useEffect(() => {\n if (id) dataConfig.refetch();\n }, [id]);\n\n const saveBuilderData = (data) => {\n dispatch(setBuilderData(data));\n navigate(`/${i18n.language}/conclusion`);\n };\n\n const saveSpecification = (result) => {\n if (!result.data) return;\n const { config } = result.data;\n dispatch(setConfig(config));\n setFetchedConfig(config);\n };\n\n return (<>\n {isConfigLoading && (\n\n \n \n \n \n
\n