\r\n {\r\n !isFetching\r\n && vehicleNews.map(news => (\r\n \r\n \r\n ))\r\n }\r\n
\r\n \r\n setSelectedBrand(value)}\r\n renderInput={params => setSelectedModel(value)}\r\n renderInput={params => setSelectedYear(value)}\r\n renderInput={params =>
\r\n )}\r\n \r\n )\r\n}\r\n\r\nexport default MultiSearchbar\r\n","/* eslint-disable no-nested-ternary */\r\n/* eslint-disable radix */\r\nimport { brandsNameCompare } from \"./brandHelper\"\r\nimport { modelNameCompare } from \"./modelHelper\"\r\nimport yearCompare from \"./yearHelper\"\r\n\r\nconst addYearPrefix = year => {\r\n if (year === undefined) return \"\"\r\n if (year === \"\") return \"\"\r\n return year.replace(/\\D/, \"\") > parseInt(46) // Denna går antagligen sönder 2047\r\n ? `19${year}`\r\n : `20${year}`\r\n}\r\n\r\nexport const getYearString = yearInterval => {\r\n const [start, end] = yearInterval.split(\"-\")\r\n const startYear = addYearPrefix(start)\r\n const endYear = addYearPrefix(end)\r\n return `${startYear}-${endYear}`\r\n}\r\n\r\n// Comparer for sort.\r\nexport const sortModelVersions = (a, b) => {\r\n let compareResult = brandsNameCompare(a.brand, b.brand)\r\n if (compareResult === 0) {\r\n compareResult = modelNameCompare(a.model, b.model)\r\n }\r\n if (compareResult === 0) {\r\n compareResult = yearCompare(getYearString(a.years), getYearString(b.years))\r\n }\r\n return compareResult\r\n}\r\n\r\nexport const compatibleModelText = comp => {\r\n const list = [`${comp.brand} `, `${comp.model} `, comp.years ? `${getYearString(comp.years)} ` : \"\", comp.placement ? `(${comp.placement}) ` : \"\"]\r\n const result = list.join(\"\").trimEnd()\r\n return result\r\n}\r\n","/* eslint-disable no-nested-ternary */\r\nimport ProductCardTemplate from \"./Components/ProductCardTemplate\"\r\nimport { useLanguage } from \"../../../lib/hooks/languageHooks\"\r\nimport usePrice from \"../../../redux/hook/priceHooks\"\r\nimport { useProxyPath } from \"../../../redux/hook/settingsHooks\"\r\nimport { useIsUserAuthorized } from \"../../../redux/hook/userHooks\"\r\nimport { useGetModTekProductsQuery } from \"../../../redux/services/broditWebApi\"\r\nimport React from \"react\"\r\n\r\nconst ProductCard = (\r\n {\r\n product,\r\n handleShowMoreCompsClick,\r\n listView = false,\r\n grid,\r\n onSelect,\r\n restorationRef,\r\n backGroundColor,\r\n compare,\r\n showSearchDealerLink,\r\n productInfo = false,\r\n modTek = {},\r\n modTekInformation = {},\r\n altNameList = []\r\n }\r\n) => {\r\n const isAuthorized = useIsUserAuthorized()\r\n const price = usePrice(product?.originalId)\r\n const displayPrice = isAuthorized && price !== undefined\r\n const language = useLanguage()\r\n const proxyPath = useProxyPath()\r\n const { data: modtekProduct } = useGetModTekProductsQuery(modTek?.originalId)\r\n const information = modtekProduct\r\n ? modTekInformation\r\n : product?.information\r\n const info = (information !== undefined && information !== null)\r\n ? Object.keys(information).length > 0\r\n ? modTekInformation?.[language]\r\n : information?.[language]\r\n : \"\"\r\n\r\n return (\r\n - \r\n {replacementProducts?.map(productId => (\r\n
- \r\n {\r\n compatibleModels\r\n ? [...compatibleModels]\r\n .sort((a, b) => moveWordsToTopComparer(\r\n compatibleModelText(a),\r\n compatibleModelText(b),\r\n [brand, model, year]\r\n ))\r\n .slice(0, 2)\r\n .filter(x => x.brand !== \",\")\r\n .map((comp, i) => (\r\n
- \r\n
\r\n {compatibleModelText(comp)}\r\n {\r\n (\r\n compatibleModels.length > 2\r\n && handleShowMoreCompsClick === null\r\n & i === 1\r\n )\r\n ? Localization.moreSmall\r\n : null\r\n }\r\n \r\n {compatibleModels.length > 2 && i === 1 ? (\r\n\r\n {handleShowMoreCompsClick !== null ? (\r\n\r\n ) : null}\r\n\r\n \r\n ) : (null)}\r\n\r\n {Localization.showMore}\r\n \r\n \r\n ))\r\n : null\r\n }\r\n
\r\n
\r\n )\r\n }\r\n\r\n if (type === \"pagePagination\") {\r\n let pageOptions = [...Array(amountOfPages)].map(\r\n (_, i) => i + 1\r\n )\r\n\r\n if (amountOfPages <= 0) pageOptions = [1]\r\n\r\n return (\r\n \r\n {name} \r\n {isExpandable && 
}\r\n {/* */}\r\n
\r\n \r\n {currentCollection.name}
\r\n {\r\n (loading && collectionStructure.collections.length <= 0)\r\n && (\r\n- \r\n {\r\n currentCollection.collections.map(collection => {\r\n if (collection === undefined) return null\r\n return (\r\n
- \r\n {col.collections.map(collection => {\r\n if (collection === undefined) return null\r\n return (\r\n
\r\n {product.isNew &&
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n 
\r\n
\r\n \r\n )\r\n}\r\n\r\nexport default AsyncSearch\r\n","import { tabletBreakpoint } from \"../../../lib/helper/viewportHelper\"\r\nimport { makeStyles } from \"@mui/styles\"\r\n\r\nexport default makeStyles(theme => ({\r\n steeringButton: {\r\n position: \"relative\",\r\n display: \"flex\",\r\n backgroundColor: \"transparent\",\r\n cursor: \"pointer\",\r\n borderRadius: \"6px\",\r\n padding: 0,\r\n overflow: \"hidden\",\r\n border: \"1px solid #F09057\",\r\n [theme.breakpoints.down(tabletBreakpoint)]: {\r\n flex: \"0 0 100%\"\r\n }\r\n },\r\n option: {\r\n flex: \"0 0 50%\",\r\n position: \"relative\",\r\n zIndex: 2,\r\n padding: \"6px\",\r\n background: 0,\r\n border: 0,\r\n transition: \"all 0.1s ease-in\",\r\n cursor: \"pointer\",\r\n color: \"#2d2d2d\"\r\n },\r\n active: {\r\n color: \"white\",\r\n cursor: \"auto\"\r\n },\r\n slide: {\r\n position: \"absolute\",\r\n top: 0,\r\n bottom: 0,\r\n left: \"50%\",\r\n right: 0,\r\n backgroundColor: \"#F09057\",\r\n transition: \"all 0.1s ease-in\",\r\n zIndex: 1\r\n },\r\n slideRight: {\r\n left: \"0\",\r\n right: \"50%\"\r\n }\r\n}))\r\n","import useStyles from \"./styles\"\r\nimport { useSteering, useUserAuthToken, useIsUserAuthorized } from \"../../../redux/hook/userHooks\"\r\nimport { useSetPreferredSteeringMutation } from \"../../../redux/services/broditWebApi\"\r\nimport { changeSteering } from \"../../../redux/userSlice\"\r\nimport React from \"react\"\r\nimport { useDispatch } from \"react-redux\"\r\n\r\nfunction LeftRightSteeringFilter({ mobileSearchArea }) {\r\n const classes = useStyles()\r\n const dispatch = useDispatch()\r\n const steering = useSteering()\r\n\r\n const isUserAuthorized = useIsUserAuthorized()\r\n const authToken = useUserAuthToken()\r\n\r\n const [setPreferredSteering] = useSetPreferredSteeringMutation()\r\n\r\n const handleButtonPress = preferredSteering => {\r\n if (isUserAuthorized) {\r\n setPreferredSteering({\r\n preferredSteering: preferredSteering,\r\n authToken: authToken\r\n })\r\n }\r\n\r\n dispatch(changeSteering(preferredSteering))\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n handleButtonPress(\"1\")}\r\n className={`${classes.option} ${steering === \"1\" ? classes.active : \"\"}`}\r\n >\r\n LHD\r\n \r\n handleButtonPress(\"2\")}\r\n className={`${classes.option} ${steering === \"2\" ? classes.active : \"\"}`}\r\n >\r\n RHD\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default LeftRightSteeringFilter\r\n","import { mobileBreakpoint, tabletBreakpoint } from \"../../lib/helper/viewportHelper\"\r\nimport { makeStyles } from \"@mui/styles\"\r\n\r\nexport default makeStyles(theme => ({\r\n userInfoWrapper: {\r\n flex: \"0 1 100%\"\r\n },\r\n titleRow: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: \"8px\",\r\n fontSize: \"18px\",\r\n fontWeight: 500,\r\n marginBottom: \"8px\"\r\n },\r\n customerGrid: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"auto\"\r\n },\r\n addressGrid: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"400px 400px\",\r\n marginBottom: \"100px\",\r\n [theme.breakpoints.down(tabletBreakpoint)]: {\r\n gridTemplateColumns: \"300px 300px\"\r\n },\r\n [theme.breakpoints.down(mobileBreakpoint)]: {\r\n gap: \"20px\",\r\n gridTemplateColumns: \"auto\"\r\n }\r\n }\r\n}))\r\n","import useStyles from \"./styles\"\r\nimport { strings as Localization } from \"../../lib/Localization\"\r\nimport { useUser, useUserData } from \"../../redux/hook/userHooks\"\r\nimport { LocalShipping, Payment, PersonOutline } from \"@mui/icons-material\"\r\nimport React from \"react\"\r\n\r\nconst UserInfo = () => {\r\n const user = useUser()\r\n const userData = useUserData()\r\n const classes = useStyles()\r\n\r\n const addresses = [\r\n {\r\n icon: \r\n
\r\n )\r\n }\r\n\r\n return (\r\n <>\r\n \r\n {icon}\r\n {title || \"Untitled\"}\r\n
\r\n {rows.map((row, index) => (\r\n {row}
\r\n ))}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {`${Localization.customerNumber} ${userData?.customerNumber}`}
\r\n {`${Localization.name} ${userData?.name}`}
\r\n {`${Localization.myPagesEmail} ${userData?.email}`}
\r\n \r\n {addresses.map(address => renderAddressField(address.icon, address.title, address.rows))}\r\n
\r\n \r\n )\r\n}\r\n\r\nexport default UserInfo\r\n","import { makeStyles } from \"@mui/styles\"\r\n\r\nexport default makeStyles(() => ({\r\n iconButton: {\r\n padding: 4\r\n }\r\n}))\r\n","import useStyles from \"./styles\"\r\nimport { addToCompare, removeFromCompare } from \"../../redux/compareProductsReducer\"\r\nimport { useCompareCount } from \"../../redux/hook/compareHooks\"\r\nimport { strings as Localization } from \"../../lib/Localization\"\r\nimport { setSnackbarMessage } from \"../../redux/userMessageSlice\"\r\nimport React from \"react\"\r\nimport { IconButton, Tooltip } from \"@mui/material\"\r\nimport { useDispatch, useSelector } from \"react-redux\"\r\nimport CompareIcon from \"@mui/icons-material/Compare\"\r\n\r\nconst CompareToggleButton = ({ productId }) => {\r\n const dispatch = useDispatch()\r\n const classes = useStyles()\r\n const compareCount = useCompareCount()\r\n\r\n const addItemToCompare = () => {\r\n dispatch(addToCompare(productId))\r\n }\r\n\r\n const removeItemFromCompare = () => {\r\n dispatch(removeFromCompare(productId))\r\n }\r\n\r\n const productInCompare = useSelector(state => {\r\n const productIds = state.compareProduct.productIds;\r\n return productIds.includes(productId);\r\n })\r\n\r\n const onClick = () => {\r\n if (!productInCompare) {\r\n if (compareCount < 2) {\r\n addItemToCompare()\r\n } else {\r\n dispatch(setSnackbarMessage(Localization.compareMaxTwoArticles, \"warning\"))\r\n }\r\n } else {\r\n removeItemFromCompare()\r\n }\r\n }\r\n\r\n return (\r\n - \r\n {customerOrder.Shipments.map((shipment, i) => (\r\n
- \r\n {customerOrder.Rows.filter(x => x.Type === 1).map((row, i) => (\r\n
\r\n \r\n {new Date(news.dateTime).toLocaleDateString()}\r\n \r\n \r\n
\r\n )\r\n}\r\nexport default NewsItem\r\n","import { mobileMenuBreakpoint } from \"../../../lib/helper/viewportHelper\"\r\nimport { makeStyles } from \"@mui/styles\"\r\n\r\nexport default makeStyles(theme => ({\r\n publishedText: {\r\n marginTop: 50,\r\n marginBottom: 15\r\n },\r\n itemThumbnail: {\r\n width: \"100%\",\r\n minHeight: 500\r\n },\r\n container: {\r\n backgroundColor: theme.palette.background.default,\r\n padding: theme.spacing(3)\r\n },\r\n pageTitle: {\r\n display: \"flex\",\r\n gap: 25,\r\n marginTop: 50,\r\n flexWrap: \"wrap\"\r\n },\r\n skeletonText: {\r\n marginTop: 50,\r\n marginBottom: 15,\r\n width: \"33%\"\r\n },\r\n skeletonRect: {\r\n height: 500\r\n },\r\n newsGrid: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"50% 50%\",\r\n gap: \"10px\",\r\n [theme.breakpoints.down(mobileMenuBreakpoint)]: {\r\n gridTemplateColumns: \"100%\"\r\n }\r\n },\r\n newsCard: {\r\n display: \"flex\",\r\n flexDirection: \"column\"\r\n },\r\n link: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n flex: \"1 1 100%\",\r\n color: \"#2D2D2D\",\r\n textDecoration: \"none\"\r\n },\r\n textWrapper: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n justifyContent: \"flex-end\",\r\n background: \"#FFFFFF\",\r\n padding: \"10px 16px 16px 16px\",\r\n gap: \"8px\",\r\n borderRadius: \"0 0 6px 6px\"\r\n },\r\n titleWrapper: {\r\n display: \"flex\"\r\n },\r\n title: {\r\n fontFamily: \"Rubik\",\r\n fontWeight: 400,\r\n fontSize: \"20px\",\r\n borderBottom: \"1px solid transparent\",\r\n \"&:hover\": {\r\n borderBottom: \"1px solid #2D2D2D\"\r\n }\r\n },\r\n subtitle: {\r\n fontFamily: \"Rubik\",\r\n fontWeight: 400,\r\n fontSize: \"16px\"\r\n }\r\n}))\r\n","import { mobileBreakpoint, tabletBreakpoint } from \"../../../../lib/helper/viewportHelper\"\r\nimport { makeStyles } from \"@mui/styles\"\r\n\r\nexport default makeStyles(theme => ({\r\n cardRoot: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n justifyContent: \"space-between\",\r\n flexGrow: 1,\r\n height: \"auto\",\r\n \"& .MuiOutlinedInput-inputMarginDense\": {\r\n paddingTop: 5.5,\r\n paddingBottom: 5.5\r\n },\r\n boxShadow: \"none\",\r\n [theme.breakpoints.down(mobileBreakpoint)]: {\r\n width: \"auto\"\r\n },\r\n [theme.breakpoints.between(mobileBreakpoint, tabletBreakpoint)]: {\r\n width: 400\r\n }\r\n },\r\n cardRootMni: {\r\n \"& .MuiOutlinedInput-inputMarginDense\": {\r\n paddingTop: 5.5,\r\n paddingBottom: 5.5\r\n },\r\n boxShadow: \"none\",\r\n [theme.breakpoints.down(mobileBreakpoint)]: {\r\n width: \"auto\"\r\n },\r\n [theme.breakpoints.between(mobileBreakpoint, tabletBreakpoint)]: {\r\n width: 400\r\n }\r\n },\r\n media: {\r\n height: 0,\r\n paddingTop: \"50.00%\",\r\n backgroundSize: \"contain\"\r\n },\r\n cardContent: {\r\n display: \"flex\",\r\n flex: \"1 0 auto\",\r\n justifyContent: \"space-between\",\r\n marginLeft: theme.spacing(2),\r\n marginRight: theme.spacing(2),\r\n flexDirection: \"column\",\r\n alignItems: \"flex-start\"\r\n },\r\n cardContentMini: {\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n flexDirection: \"column\",\r\n alignItems: \"center\",\r\n padding: 0\r\n },\r\n flexColumn: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n flexGrow: 1\r\n },\r\n flexRow: {\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n flexGrow: 1\r\n },\r\n flexRowMini: {\r\n display: \"flex\",\r\n flexDirection: \"row\"\r\n },\r\n bannerArea: {\r\n display: \"flex\",\r\n height: \"auto\",\r\n alignItems: \"flex-start\",\r\n whiteSpace: \"nowrap\"\r\n },\r\n rowContent: {\r\n display: \"flex\",\r\n flexDirection: \"row\"\r\n },\r\n avatarLarge: {\r\n width: theme.spacing(10),\r\n height: theme.spacing(10)\r\n },\r\n heading: {\r\n fontWeight: \"bold!important\",\r\n fontSize: \"14px!important\"\r\n },\r\n paperRoot: {\r\n marginBottom: theme.spacing(2),\r\n boxShadow: \"none\",\r\n padding: theme.spacing(2),\r\n width: \"100%\"\r\n },\r\n flexEnd: {\r\n display: \"flex\",\r\n justifyContent: \"flex-end\"\r\n },\r\n centerColumn: {\r\n alignItems: \"center\"\r\n },\r\n verticalAlign: {\r\n alignItems: \"flex-start\"\r\n },\r\n noDisplayLink: {\r\n textDecoration: \"none\",\r\n color: \"#000\"\r\n },\r\n addButton: {\r\n \"& span > .MuiButton-startIcon\": {\r\n marginRight: 0,\r\n marginLeft: -4\r\n }\r\n },\r\n swipableImageListView: {\r\n maxWidth: 250,\r\n display: \"flex\",\r\n flexBasis: 250\r\n },\r\n swipableImageModTekView: {\r\n maxWidth: 250,\r\n display: \"flex\"\r\n },\r\n swipableImageGridView: {\r\n width: \"auto\",\r\n display: \"flex\",\r\n flexBasis: 300,\r\n minHeight: 175,\r\n maxWidth: \"none\",\r\n [theme.breakpoints.only(mobileBreakpoint)]: {\r\n maxWidth: 400\r\n }\r\n },\r\n spacingTop: {\r\n paddingTop: theme.spacing(1)\r\n },\r\n productCard: {\r\n display: \"flex\",\r\n width: \"100%\",\r\n justifyContent: \"center\"\r\n },\r\n flexBox: {\r\n display: \"flex\"\r\n },\r\n cardFooter: {\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n alignItems: \"center\",\r\n width: \"100%\"\r\n },\r\n gridButtons: {\r\n display: \"flex\",\r\n justifyContent: \"flex-end\",\r\n alignItems: \"center\"\r\n },\r\n paddingBottom8: {\r\n paddingBottom: 8\r\n },\r\n paperBox: {\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n gap: 32\r\n },\r\n listImage: {\r\n width: \"25%\"\r\n },\r\n listProductNumber: {\r\n width: \"10%\"\r\n },\r\n productText: {\r\n width: \"35%\"\r\n },\r\n buttonBox: {\r\n width: \"30%\",\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n justifyContent: \"space-between\"\r\n },\r\n h5Styling: {\r\n margin: 0,\r\n fontFamily: \"Roboto, Helvetica, Arial, sans-serif\",\r\n fontWeight: 400,\r\n fontSize: \"1.5rem\",\r\n lineHeight: 1.334,\r\n letterSpacing: \"0em\",\r\n marginBottom: \"0.35em\"\r\n },\r\n subtitle1Styling: {\r\n margin: 0,\r\n fontFamily: \"Roboto, Helvetica, Arial, sans-serif\",\r\n fontWeight: 400,\r\n fontSize: \"1rem\",\r\n lineHeight: 1.75,\r\n letterSpacing: \"0.00938em\"\r\n }\r\n}))\r\n","import useStyles from \"./styles\"\r\nimport { useLanguage } from \"../../../../lib/hooks/languageHooks\"\r\nimport { Typography } from \"@mui/material\"\r\nimport { NavLink } from \"react-router-dom\"\r\nimport React from \"react\"\r\nimport classnames from \"classnames\"\r\n\r\nexport function GridTitle({\r\n listView, onClick, product, to, altNameList = []\r\n}) {\r\n const classes = useStyles()\r\n const language = useLanguage()\r\n const altName = altNameList?.find(alt => (\r\n alt.language_id.toLowerCase() === `${language}1` && product?.originalId === alt?.product_id\r\n ))\r\n return (\r\n listView\r\n ? (\r\n \r\n
\r\n \r\n \r\n
\r\n {!isDevice && \r\n {getTitle()}\r\n
\r\n {getSubtitle()}
}\r\n \r\n \r\n {Localization.itemNumber}\r\n \r\n \r\n {originalId}\r\n \r\n
\r\n )\r\n}\r\n\r\nexport function GridProductNumber({ originalId }) {\r\n const classes = useStyles()\r\n return (\r\n \r\n \r\n \r\n {title}\r\n \r\n \r\n {Localization.seeProduct}\r\n \r\n \r\n )}\r\n
\r\n \r\n )\r\n : \r\n {ReactHtmlParser(text)}\r\n
\r\n ) : {newText}
\r\n )\r\n}\r\n","import NewlineText from \"./NewlineText\"\r\nimport React from \"react\"\r\n\r\nexport default function Text({ text, technicalInformation = false }) {\r\n return (\r\n {material.information}
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default CustomerOrderInfo\r\n","import { strings as Localization } from \"../../lib/Localization\"\r\nimport React from \"react\"\r\nimport { Snackbar, Button } from \"@mui/material\"\r\n\r\nconst ErrorMessage = ({ open, handleClose }) => {\r\n const handleClick = () => {\r\n handleClose()\r\n }\r\n\r\n const action = (\r\n \r\n \r\n {title}\r\n \r\n \r\n {text}\r\n \r\n
\r\n {link.title}\r\n \r\n {(heroNews?.[selectedHeroIndex]?.active) && (\r\n
\r\n \r\n )}\r\n \r\n )\r\n}\r\n\r\nexport default HeroNews\r\n","export default __webpack_public_path__ + \"static/media/MoveClip_Start.d586b0d2.jpg\";","export default __webpack_public_path__ + \"static/media/Suction_Start.c9dca1d6.jpg\";","export default __webpack_public_path__ + \"static/media/Workstation_Start.5897f6d5.jpg\";","export default __webpack_public_path__ + \"static/media/Workstation_Mobile.f22e2c86.jpg\";","export default __webpack_public_path__ + \"static/media/Pipe_Mobile.ac37673b.jpg\";","export default __webpack_public_path__ + \"static/media/Pedestal_Mobile.f5c86cdc.jpg\";","export default __webpack_public_path__ + \"static/media/solutions_mob.cbad34bb.jpg\";","export default __webpack_public_path__ + \"static/media/piedestal.b56f23f5.png\";","export default __webpack_public_path__ + \"static/media/ror.0d0f3e2a.png\";","export default __webpack_public_path__ + \"static/media/truck.44c2e90e.png\";","import {\r\n desktopBreakpoint, midSizeBreakpoint, mobileMenuBreakpoint\r\n} from \"../../lib/helper/viewportHelper\"\r\nimport { makeStyles } from \"@mui/styles\"\r\n\r\nexport default makeStyles(theme => ({\r\n wrapper: {\r\n display: \"flex\",\r\n maxWidth: \"1110px\",\r\n flexWrap: \"wrap\",\r\n justifyContent: \"center\"\r\n },\r\n title: {\r\n flex: \"0 0 100%\",\r\n fontFamily: \"Rubik\",\r\n fontSize: \"20px\",\r\n fontWeight: 500,\r\n lineHeight: \"40px\",\r\n textAlign: \"center\",\r\n [theme.breakpoints.down(mobileMenuBreakpoint)]: {\r\n marginTop: \"30px\"\r\n }\r\n },\r\n list: {\r\n display: \"grid\",\r\n justifyContent: \"space-between\",\r\n flex: \"0 0 100%\",\r\n gridTemplateColumns: \"350px 350px 350px\",\r\n [theme.breakpoints.down(midSizeBreakpoint)]: {\r\n gridTemplateColumns: \"300px 300px 300px\",\r\n justifyContent: \"center\",\r\n gap: \"20px\"\r\n },\r\n [theme.breakpoints.down(mobileMenuBreakpoint)]: {\r\n gridTemplateColumns: \"345px\",\r\n justifyContent: \"center\",\r\n gap: \"30px\"\r\n },\r\n [theme.breakpoints.down(390)]: {\r\n gridTemplateColumns: \"100%\"\r\n }\r\n },\r\n item: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n borderRadius: \"6px\",\r\n boxShadow: \"rgba(45, 45, 45, 0.1) 0px 0px 20px 0px\",\r\n overflow: \"hidden\",\r\n textDecoration: \"none\",\r\n backgroundColor: \"#FFFFFF\",\r\n \"&:visited\": {\r\n color: \"inherit\"\r\n }\r\n },\r\n imageWrapper: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n justifyContent: \"center\",\r\n flex: \"0 0 220px\",\r\n backgroundColor: \"#FFFFFF\",\r\n [theme.breakpoints.down(midSizeBreakpoint)]: {\r\n flex: \"0 0 188px\"\r\n },\r\n [theme.breakpoints.down(mobileMenuBreakpoint)]: {\r\n flex: \"0 0 220px\"\r\n }\r\n },\r\n image: {\r\n width: \"350px\",\r\n height: \"220px\",\r\n [theme.breakpoints.down(mobileMenuBreakpoint)]: {\r\n width: \"345px\",\r\n height: \"217px\"\r\n }\r\n },\r\n bottomWrapper: {\r\n display: \"flex\",\r\n flex: \"1 0 auto\",\r\n flexDirection: \"column\",\r\n justifyContent: \"space-between\",\r\n paddingTop: \"10px\",\r\n paddingLeft: \"20px\",\r\n paddingRight: \"20px\",\r\n paddingBottom: \"20px\",\r\n backgroundColor: \"#FFFFFF\"\r\n },\r\n textWrapper: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n justifyContent: \"space-between\"\r\n },\r\n cardTitle: {\r\n flex: \"0 0 100%\",\r\n fontFamily: \"Rubik\",\r\n fontSize: \"20px\",\r\n fontWeight: 400,\r\n lineHeight: \"32px\",\r\n color: \"#2D2D2D\",\r\n margin: 0,\r\n textDecoration: \"none\"\r\n },\r\n cardUnderTitle: {\r\n fontFamily: \"Rubik\",\r\n fontSize: \"16px\",\r\n fontWeight: 400,\r\n lineHeight: \"32px\",\r\n color: \"#2D2D2D\",\r\n margin: 0\r\n },\r\n anchor: {\r\n marginTop: \"8px\",\r\n fontFamily: \"Arial\",\r\n fontSize: \"14px\",\r\n fontWeight: 700,\r\n lineHeight: \"16px\",\r\n letterSpacing: \"0.5px\",\r\n display: \"inline-block\",\r\n position: \"relative\",\r\n color: \"#2D2D2D\"\r\n },\r\n isActive: {\r\n \"&:after\": {\r\n transform: \"scaleX(1)\",\r\n transformOrigin: \"bottom left\"\r\n }\r\n },\r\n buttonWrapperRow: {\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n flex: \"0 0 100%\"\r\n },\r\n seeMoreButton: {\r\n fontFamily: \"Arial\",\r\n fontSize: \"14px\",\r\n fontWeight: 700,\r\n lineHeight: \"16px\",\r\n letterSpacing: \"0.5px\",\r\n textAlign: \"left\",\r\n marginTop: \"10px\",\r\n textTransform: \"none\"\r\n },\r\n newsAnchor: {\r\n position: \"relative\",\r\n fontFamily: \"Arial\",\r\n fontSize: \"14px\",\r\n fontWeight: 700,\r\n lineHeight: \"16px\",\r\n letterSpacing: \"0.5px\",\r\n textAlign: \"left\",\r\n color: \"#2D2D2D\",\r\n textDecoration: \"none\",\r\n marginTop: \"30px\",\r\n display: \"inline-block\",\r\n [theme.breakpoints.up(desktopBreakpoint)]: {\r\n \"&:after\": {\r\n content: \"''\",\r\n position: \"absolute\",\r\n width: \"100%\",\r\n transform: \"scaleX(0)\",\r\n height: \"2px\",\r\n bottom: 0,\r\n left: 0,\r\n backgroundColor: \"#F09057\",\r\n transformOrigin: \"bottom right\",\r\n transition: \"transform 0.25s ease-out\"\r\n },\r\n \"&:hover:after\": {\r\n transform: \"scaleX(1)\",\r\n transformOrigin: \"bottom left\"\r\n }\r\n },\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n textDecoration: \"2px underline #F09057\"\r\n },\r\n [theme.breakpoints.down(mobileMenuBreakpoint)]: {\r\n marginTop: \"10px\"\r\n }\r\n }\r\n}))\r\n","import useStyles from \"./styles\"\r\nimport { strings as Localization } from \"../../lib/Localization\"\r\nimport { NavLink } from \"react-router-dom\"\r\nimport React from \"react\"\r\n\r\nconst NewsCard = ({\r\n item, type, language, index\r\n}) => {\r\n const classes = useStyles()\r\n\r\n const urlParts = item.originalId.split(\"\\\\\")\r\n const urlByType = type !== \"device\" ? `/${language}/product/${item.products?.[0]}` : `/${language}/news/${urlParts[0]}/${urlParts[1]}`\r\n\r\n const isVehicle = type === \"vehicle\"\r\n\r\n return (\r\n \r\n \r\n \r\n {heroNews?.[selectedHeroIndex]?.name}\r\n \r\n \r\n {heroNews?.[selectedHeroIndex]?.alt}\r\n \r\n {isTablet\r\n ? (\r\n \r\n {Localization.readMore}\r\n \r\n {Localization.readMore}\r\n \r\n )}\r\n
\r\n {heroNews.length > 1 && (\r\n \r\n \r\n \r\n {Localization.new}\r\n \r\n
\r\n \r\n {Localization.about}\r\n {\" \"}\r\n {heroNews?.[selectedHeroIndex]?.name}\r\n
\r\n \r\n )\r\n : (\r\n\r\n
\r\n )}\r\n \r\n {heroNews?.map((item, i) => (\r\n handleSelectHero(i)}\r\n className={classes.thumbNailIndicatorCircle}\r\n variant={i === selectedHeroIndex ? \"contained\" : \"outlined\"}\r\n />\r\n ))}\r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n 20 ? \"flex\" : \"block\", flexWrap: \"wrap\" }}>\r\n = 20 ? 1 : 0, marginRight: item?.title?.length >= 20 ? \"0px\" : \"8px\" }}>{`${item?.title} ${(item?.title?.length <= 20 && isVehicle) ? item?.year : \"\"}`}\r\n {(isVehicle && item?.title?.length > 20) && 20 ? 1 : 0 }}>{item?.year}}\r\n \r\n
\r\n {isVehicle\r\n && (\r\n \r\n {`${item?.placement} (${item?.products[0]})`}\r\n \r\n )}\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default NewsCardList\r\n","import useStyles from \"./styles\"\r\nimport HolderComponent from \"./components/Holder\"\r\nimport Row from \"./components/Row\"\r\nimport HeroNews from \"./components/Heronews\"\r\nimport CarMount from \"../../assets/carMount.png\"\r\nimport MoveClip from \"../../assets/MoveClip_Start.jpg\"\r\nimport Suction from \"../../assets/Suction_Start.jpg\"\r\nimport Workstation from \"../../assets/Workstation_Start.jpg\"\r\nimport WorkstationMobile from \"../../assets/Workstation_Mobile.jpg\"\r\nimport PipeMobile from \"../../assets/Pipe_Mobile.jpg\"\r\nimport PedestalMobile from \"../../assets/Pedestal_Mobile.jpg\"\r\nimport Holder from \"../../assets/holder.png\"\r\nimport SolutionsMob from \"../../assets/solutions_mob.jpg\"\r\nimport Piedestal from \"../../assets/piedestal.png\"\r\nimport Ror from \"../../assets/ror.png\"\r\nimport Truck from \"../../assets/truck.png\"\r\nimport CustomSolutions from \"../../assets/customizedSolutions.png\"\r\nimport { strings as Localization } from \"../../lib/Localization\"\r\nimport { LeftRightSteeringFilter } from \"../AutocompleteSearch\"\r\nimport { useLanguage } from \"../../lib/hooks/languageHooks\"\r\nimport theme from \"../../theme\"\r\nimport { desktopBreakpoint, mobileMenuBreakpoint, tabletBreakpoint } from \"../../lib/helper/viewportHelper\"\r\nimport NewsCardList from \"../News/NewsCardList\"\r\nimport MultiSearchbar from \"../AutocompleteSearch/MultiSearchbar/MultiSearchbar\"\r\nimport ConsentMessage from \"../ConsentMessage/ConsentMessage\"\r\nimport React from \"react\"\r\nimport {\r\n Box, Button, Typography, useMediaQuery\r\n} from \"@mui/material\"\r\nimport { Link, NavLink } from \"react-router-dom\"\r\nimport classnames from \"classnames\"\r\nimport { useCookieConsent } from \"react-cookie-manager\"\r\n\r\nconst Home = () => {\r\n const classes = useStyles()\r\n const language = useLanguage()\r\n const isDesktop = useMediaQuery(theme.breakpoints.up(desktopBreakpoint))\r\n const isTablet = useMediaQuery(theme.breakpoints.down(tabletBreakpoint))\r\n const showCards = useMediaQuery(theme.breakpoints.up(1170))\r\n const isMobile = useMediaQuery(theme.breakpoints.down(mobileMenuBreakpoint))\r\n const { detailedConsent } = useCookieConsent()\r\n\r\n return (\r\n {title}
\r\n\r\n {list.map((item, i) =>
\r\n {!isDesktop\r\n && (\r\n \r\n \r\n
\r\n )}\r\n \r\n {Localization.showMoreNews} \r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n {Localization.readMore}\r\n \r\n
\r\n {isTablet && (\r\n \r\n {Localization.aboutProclip}\r\n
\r\n{Localization.findProClip}
\r\n\r\n {language === \"en\" &&
\r\n {language === \"en\" &&
}\r\n {Localization.findDeviceHolder}
\r\n\r\n {language === \"en\" && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n )}\r\n \r\n 
\r\n
\r\n \r\n 
\r\n
\r\n \r\n 
\r\n
\r\n \r\n {Localization.aboutProductDevelopment}\r\n
\r\n \r\n\r\n \r\n {/* { person icon} */}\r\n \r\n {!anchorEl\r\n ? \r\n
\r\n )\r\n}\r\n\r\nexport default NavbarMenu\r\n","export default __webpack_public_path__ + \"static/media/eng.9931805a.svg\";","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAMAAADDpiTIAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAFdQTFRF////QXPNQXPNQXPNQXPNQXPNQXPNQXPNQXPNQXPNQXPNQXPNQXPNQXPNQXPNUn3DQXPNQXPNx8B81slzQXPNQXPNQXPNU33CmqeXo6yR6NRo89ph/+Fa4V8orAAAABZ0Uk5TAAEFDhwwQGp0e4Wmrri8vc/h5ev0/L9BfX0AAANzSURBVHja7djdauMwEIDR0Y/TQNv3f88uocG25F4se93UsFStzrk32DMfcpwIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJhXioiIUnLJI95ericuOjZ7/UxvvbV/AaTLax61z+XMw+0W/MiY/qxHRImoLy9p2AOqnDkBuu0+MttraT1K5NengW9SAP9RLeuR43oxiVldrpGXZ3OY1/OSazKGiX8H1FxMYWYlL4Yws0UAswdgBnMTgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAAvlcdu4B06iJVfyGA+vueKVV79QpAAAgAASAABIAAEAACQAAIAAEgAAQgACMQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIgPHUfejbS+XERUez18cD6L8wgG6vXgEIAAEgAASAABAAAkAACAABIAAEgAAEYAQCQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAABGIEAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAHwIwLYzGBmmwBmD6AZwsxa3g9TmNex5+1mDPO6bTnuqznMar1HiWNPddg7TOXMudat9iH3W4sS0df9kgQwnf723iP+br6UXIb8SyifOZwOn7afb7/15gMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgOl9AO6gRrzHx4BRAAAAAElFTkSuQmCC\"","import NavbarMenu from \"../NavbarMenu/NavbarMenu\"\r\nimport { strings as Localization } from \"../../../lib/Localization\"\r\nimport useStyles from \"../styles\"\r\nimport { LeftRightSteeringFilter } from \"../../AutocompleteSearch\"\r\nimport { useLanguage } from \"../../../lib/hooks/languageHooks\"\r\nimport { useIsUserAuthorized } from \"../../../redux/hook/userHooks\"\r\nimport AsyncSearch from \"../../AsyncSearch/AsyncSearch\"\r\nimport SpeedOrderNavbar from \"../../SpeedOrder/SpeedOrderNavbar\"\r\nimport engFlag from \"../../../assets/eng.svg\"\r\nimport sweFlag from \"../../../assets/swe.png\"\r\nimport MultiSearchbar from \"../../AutocompleteSearch/MultiSearchbar/MultiSearchbar\"\r\nimport {\r\n Box, Button, Tooltip, Badge, Typography\r\n} from \"@mui/material\"\r\nimport ExpandMoreIcon from \"@mui/icons-material/ExpandMore\"\r\nimport classnames from \"classnames\"\r\nimport { ShoppingCart } from \"@mui/icons-material\"\r\nimport React from \"react\"\r\nimport { useSelector } from \"react-redux\"\r\nimport { Link, NavLink } from \"react-router-dom\"\r\nimport { HashLink } from \"react-router-hash-link\"\r\n\r\nfunction DesktopSearchArea({ handleOpenDrawer, drawerIsOpen }) {\r\n const classes = useStyles()\r\n const language = useLanguage()\r\n const otherLang = language === \"sv\" ? \"en\" : \"sv\"\r\n const isAuthorized = useIsUserAuthorized()\r\n const cart = useSelector(state => state.cart)\r\n\r\n const changeLanguage = () => window.location.pathname.replace(language, otherLang)\r\n\r\n const scrollWithOffset = el => {\r\n const yCoordinate = el.getBoundingClientRect().top + window.scrollY\r\n const yOffset = -100\r\n window.scrollTo({ top: yCoordinate + yOffset, behavior: \"smooth\" })\r\n }\r\n const signedInStyles = isAuthorized && ({ paddingTop: \"5px\", paddingBottom: \"5px\" })\r\n return (\r\n \r\n {element}\r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default MobileDrawer\r\n","import MobileDrawer from \"./MobileDrawer/MobileDrawer\"\r\nimport { strings as Localization } from \"../../../lib/Localization\"\r\nimport { useLanguage } from \"../../../lib/hooks/languageHooks\"\r\nimport { useIsUserAuthorized } from \"../../../redux/hook/userHooks\"\r\nimport useStyles from \"../styles\"\r\n/* eslint-disable import/no-cycle */\r\nimport sweFlag from \"../../../assets/swe.png\"\r\nimport engFlag from \"../../../assets/eng.svg\"\r\nimport { useSearchQuery } from \"../../../redux/hook/searchHooks\"\r\nimport NavbarMenu from \"../NavbarMenu/NavbarMenu\"\r\nimport {\r\n Badge, Box, Button, Tooltip\r\n} from \"@mui/material\"\r\nimport { ShoppingCart } from \"@mui/icons-material\"\r\nimport React, { useEffect } from \"react\"\r\nimport { useSelector } from \"react-redux\"\r\nimport { Link } from \"react-router-dom\"\r\n\r\nfunction MobileSearchArea({ toggleShowSearch }) {\r\n const classes = useStyles()\r\n const language = useLanguage()\r\n const isAuthorized = useIsUserAuthorized()\r\n const cart = useSelector(state => state.cart)\r\n const otherLang = language === \"sv\" ? \"en\" : \"sv\"\r\n const changeLanguage = () => window.location.pathname.replace(language, otherLang)\r\n const search = useSearchQuery()\r\n\r\n const [anchorEl, setAnchorEl] = React.useState(null)\r\n\r\n const handleClick = event => {\r\n setAnchorEl(event.currentTarget)\r\n }\r\n\r\n const handleClose = () => {\r\n setAnchorEl(null)\r\n }\r\n\r\n useEffect(() => {\r\n toggleShowSearch(false)\r\n }, [search])\r\n\r\n return (\r\n \r\n
\r\n \r\n {links.map(link => (\r\n link.type === \"button\"\r\n ? (\r\n \r\n )\r\n : (\r\n \r\n {link.text}\r\n \r\n )))}\r\n {renderLoginLogoutButton()}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {isDesktop\r\n && (\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {Localization.itemNumber}\r\n {\" \"}\r\n {id}\r\n \r\n
\r\n \r\n \r\n {Localization.thisProductIsNotAvailableOrder}\r\n \r\n \r\n
\r\n \r\n {text} \r\n
\r\n \r\n {formatAmount(quantity)} \r\n
\r\n {deliveredQuantity !== undefined ? (\r\n \r\n {formatAmount(deliveredQuantity) || \"0\"} \r\n
\r\n ) : (null)}\r\n \r\n {formatPrice(price)} \r\n
\r\n \r\n {formatPrice(price * quantity)} \r\n
\r\n \r\n {isModifiable\r\n ? (\r\n <>\r\n \r\n \r\n \r\n \r\n )\r\n : null}\r\n
\r\n {Localization.moreInformation}
\r\n \r\n- \r\n {customerOrder.Shipments.map((shipment, i) => (\r\n
- \r\n {customerOrder.Rows.filter(x => x.Type === 1).map((row, i) => (\r\n
Product undefined
\r\n )\r\n }\r\n\r\n // Product was found, return a cart\r\n return (\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default MobileCartItem\r\n","import useStyles from \"./styles\"\r\nimport ConfirmationDialog from \"./ConfirmationDialog/ConfirmationDialog\"\r\nimport { formatAmount, formatPrice } from \"../../../lib/helper/numberHelper\"\r\nimport { tabletBreakpoint } from \"../../../lib/helper/viewportHelper\"\r\nimport { useLanguage } from \"../../../lib/hooks/languageHooks\"\r\nimport { strings as Localization } from \"../../../lib/Localization\"\r\nimport { nextCartStep } from \"../../../redux/cartSlice\"\r\nimport { useUser, useUserAuthToken } from \"../../../redux/hook/userHooks\"\r\nimport { simulateOrder } from \"../../../redux/monitorSlice\"\r\nimport MobileCartItem from \"../ProductCardOrder/MobileCartItem\"\r\nimport ProductCardOrder from \"../ProductCardOrder/ProductCardOrder\"\r\nimport { useProducts } from \"../../../redux/hook/productHooks\"\r\nimport { useClearCartMutation } from \"../../../redux/services/cartApi\"\r\nimport {\r\n Box, Button, ButtonGroup, CircularProgress, Link as SimpleLink, Typography, useMediaQuery, useTheme, IconButton, Tooltip\r\n} from \"@mui/material\"\r\nimport ArrowBackIcon from \"@mui/icons-material/ArrowBack\"\r\nimport ArrowForwardIcon from \"@mui/icons-material/ArrowForward\"\r\nimport InfoIcon from \"@mui/icons-material/Info\"\r\nimport ReceiptIcon from \"@mui/icons-material/Receipt\"\r\nimport classnames from \"classnames\"\r\nimport React, { useEffect, useMemo, useState } from \"react\"\r\nimport { useDispatch, useSelector } from \"react-redux\"\r\nimport { Link } from \"react-router-dom\"\r\nimport DeleteForeverIcon from \"@mui/icons-material/DeleteForever\"\r\n\r\nconst SummaryButtons = () => {\r\n const lang = useLanguage()\r\n const dispatch = useDispatch()\r\n\r\n const classes = useStyles()\r\n\r\n const handleNext = () => {\r\n dispatch(nextCartStep())\r\n }\r\n\r\n return (\r\n \r\n
\r\n {!isTablet\r\n && (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n {product.name}\r\n
\r\n \r\n {isModifiable\r\n ? (\r\n <>\r\n \r\n \r\n \r\n \r\n )\r\n : null}\r\n
\r\n {product.originalId}
\r\n {isTablet\r\n && (\r\n \r\n {product.description}\r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n {Localization.description}\r\n :\r\n \r\n \r\n {product.description}\r\n \r\n \r\n {Localization.compatibleProducts}\r\n :\r\n \r\n \r\n
\r\n {Localization.moreInformation}
\r\n \r\n\r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n {`x ${formatPrice(price)} ${currency}`}\r\n
\r\n \r\n {`${formatPrice(price * quantity)} ${currency}`}\r\n
\r\n \r\n {[...cart.items].map((item, i) => ((isSmall)\r\n ? (\r\n x.PartNumber === item.id)?.PriceInfo.SuggestedPrice}\r\n currency={user?.currency}\r\n quantity={item.quantity}\r\n isModifiable\r\n index={i}\r\n text={item.note}\r\n product={products?.find(product => product.id === `${lang}-${item.id}`)}\r\n />\r\n )\r\n : (\r\n x.PartNumber === item.id)?.PriceInfo.SuggestedPrice}\r\n currency={user?.currency}\r\n quantity={item.quantity}\r\n isModifiable\r\n index={i}\r\n text={item.note}\r\n product={products?.find(product => product.id === `${lang}-${item.id}`)}\r\n />\r\n )))}\r\n
\r\n - \r\n {[...cart.items].map((item, i) => (\r\n
\r\n \r\n {step} \r\n \r\n )\r\n })}\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default Order\r\n","import { tabletBreakpoint } from \"../../../lib/helper/viewportHelper\"\r\nimport { makeStyles } from \"@mui/styles\"\r\n\r\nexport default makeStyles(theme => ({\r\n listRoot: {\r\n width: \"100%\",\r\n maxWidth: 360,\r\n backgroundColor: theme.palette.background.paper,\r\n maxHeight: \"400px\",\r\n overflowY: \"auto\"\r\n },\r\n root: {\r\n marginTop: 72\r\n },\r\n marginBottom: {\r\n marginBottom: 15\r\n },\r\n capitalized: {\r\n textTransform: \"uppercase\"\r\n },\r\n icon: {\r\n color: \"rgba(0,0,0,0.3)\",\r\n \"&$checked\": {\r\n color: \"#7c7c7c\"\r\n }\r\n },\r\n checked: {},\r\n dense: {\r\n paddingTop: 0,\r\n paddingBottom: 0\r\n },\r\n buttonRoot: {\r\n minWidth: \"auto\"\r\n },\r\n button: {\r\n marginLeft: theme.spacing(1),\r\n color: \"#2d2d2d\"\r\n },\r\n select: {\r\n width: \"80%!important\",\r\n marginLeft: \"1em\"\r\n },\r\n flexGrow1: {\r\n flexGrow: 1\r\n },\r\n productBox: {\r\n position: \"relative\",\r\n display: \"flex\",\r\n flexDirection: \"row\"\r\n },\r\n productsContainerWithFilter: {\r\n flex: \"0 0 300px\",\r\n overflowY: \"auto\",\r\n overflowX: \"hidden\",\r\n height: \"100%\",\r\n padding: \"16px\",\r\n [theme.breakpoints.down(tabletBreakpoint)]: {\r\n flex: \"unset\"\r\n }\r\n },\r\n buttonWrapper: {\r\n display: \"flex\",\r\n justifyContent: \"flex-end\"\r\n }\r\n}))\r\n","/* eslint-disable react/destructuring-assignment */\r\nimport { Box } from \"@mui/material\"\r\nimport React from \"react\"\r\n\r\nconst ShowMore = props => {\r\n const { showAll, open } = props\r\n const items = (open || showAll) ? props.children : []\r\n return (\r\n \r\n {renderStep(activeStep)}\r\n
\r\n \r\n \r\n \r\n \r\n {heading} \r\n {!showAll\r\n && (\r\n \r\n {\r\n open ? \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default CheckboxList\r\n","import useStyles from \"../../styles\"\r\nimport { Box, Button, Typography } from \"@mui/material\"\r\nimport React from \"react\"\r\nimport ExpandMoreIcon from \"@mui/icons-material/ExpandMore\"\r\nimport ExpandLessIcon from \"@mui/icons-material/ExpandLess\"\r\nimport classnames from \"classnames\"\r\n\r\nconst ExpandableHeader = ({\r\n open, setOpen, text, showAll\r\n}) => {\r\n const classes = useStyles()\r\n const toggleShowMore = () => setOpen(x => !x)\r\n\r\n return (\r\n - \r\n
- \r\n {properties.map(property => {\r\n const labelId = `checkbox-list-label-${title}`\r\n return (\r\n
- \r\n {Object.entries(propertiesPerName).map(([name, props], index) => (\r\n
\r\n {props.children}\r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n */ }\r\n {!props.noShow &&
\r\n )\r\n}\r\n\r\nexport default ProductNavigation\r\n","import FunnelIcon from \"../../../lib/icons/Funnel/FunnelIcon\"\r\nimport ProductNavigation from \"../ProductNavigation/ProductNavigation\"\r\nimport PageHandler from \"../../PageHandler/PageHandler\"\r\nimport { strings as Localization } from \"../../../lib/Localization\"\r\nimport { useSearchQuery } from \"../../../redux/hook/searchHooks\"\r\nimport {\r\n Box, IconButton, Tooltip, Typography\r\n} from \"@mui/material\"\r\nimport React, { useRef } from \"react\"\r\n\r\nfunction FilterProductToolbar({ toggleFilter, productTotalCount, ...props }) {\r\n const rowRef = useRef()\r\n const allSearchQueriesCombined = useSearchQuery()\r\n\r\n const searchQueriesAsText = () => {\r\n const {\r\n brands,\r\n models,\r\n years,\r\n texts\r\n } = allSearchQueriesCombined\r\n\r\n const allSearchTerms = [\r\n texts,\r\n brands,\r\n models,\r\n years\r\n ]\r\n\r\n const allSearchTexts = allSearchTerms.map(\r\n searchTerms => (searchTerms ? searchTerms.join(\" \") : \"\")\r\n )\r\n\r\n const result = allSearchTexts.filter(text => text !== \"\").join(\" \")\r\n\r\n return result\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default Contact\r\n","import useStyles from \"./styles\"\r\nimport Logotype from \"./assets/logotype.svg\"\r\nimport Contact from \"./components/Contact/Contact\"\r\nimport { useLanguage } from \"../../lib/hooks/languageHooks\"\r\nimport React from \"react\"\r\nimport { Link } from \"react-router-dom\"\r\n\r\nconst Footer = () => {\r\n const language = useLanguage()\r\n const classes = useStyles()\r\n const [data, setData] = React.useState(null)\r\n\r\n const fetchStaticData = async () => {\r\n const response = await fetch(`/files/DynamicPages/Footer-${language}.json`)\r\n return response.json()\r\n }\r\n\r\n React.useEffect(() => {\r\n fetchStaticData().then(result => setData(result))\r\n }, [false, language])\r\n\r\n const cleanPhoneNumber = phone => phone.replace(/\\(0\\)|\\s+|-/g, \"\")\r\n\r\n const handleOnClick = () => {\r\n window.scrollTo(0, 0)\r\n }\r\n\r\n const renderLink = link => {\r\n const url = `/${language}/${link.url}`\r\n\r\n switch (link.type) {\r\n case \"anchor\":\r\n return handleOnClick(url)} key={link.text}>{link.text}\r\n case \"button\":\r\n return handleOnClick(url)} key={link.text}>{link.text}\r\n case \"external\":\r\n return {link.text}\r\n default:\r\n return handleOnClick(url)} key={link.text}>{link.text}\r\n }\r\n }\r\n\r\n const linkGroup = group => (\r\n \r\n )\r\n\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport default Footer\r\n","import { makeStyles } from \"@mui/styles\"\r\n\r\nexport default makeStyles(theme => ({\r\n content: {\r\n flexGrow: 1,\r\n padding: theme.spacing(3)\r\n },\r\n capitalized: {\r\n textTransform: \"uppercase\"\r\n },\r\n flexColumn: {\r\n display: \"flex\",\r\n flexDirection: \"column\"\r\n },\r\n listArea: {\r\n backgroundColor: theme.palette.background.default,\r\n padding: theme.spacing(2)\r\n },\r\n infoText: {\r\n width: 250\r\n },\r\n infoArea: {\r\n marginBottom: 50\r\n },\r\n flexRow: {\r\n display: \"flex\",\r\n flexDirection: \"row\"\r\n },\r\n flexItem: {\r\n flex: \"1 1 0px\"\r\n },\r\n headerRoot: {\r\n padding: 10\r\n },\r\n gray: {\r\n color: \"#a3a3a3\"\r\n },\r\n root: {\r\n padding: 10,\r\n marginBottom: 32,\r\n boxShadow: \"none\"\r\n },\r\n flexWrap: {\r\n flexWrap: \"wrap\",\r\n justifyContent: \"space-between\",\r\n gap: \"2rem\"\r\n },\r\n wrapItem: {\r\n marginBottom: \"1rem\",\r\n \"& .MuiTypography-h6\": {\r\n display: \"inline\"\r\n }\r\n },\r\n bold: {\r\n fontWeight: \"bold\"\r\n },\r\n textCenter: {\r\n alignItems: \"center\"\r\n },\r\n h3Styling: {\r\n margin: 0,\r\n fontFamily: \"Roboto, Helvetica, Arial, sans-serif\",\r\n fontWeight: 400,\r\n fontSize: \"3rem\",\r\n lineHeight: 1.167,\r\n letterSpacing: \"0em\",\r\n marginBottom: \"0.35em\"\r\n },\r\n h6Styling: {\r\n margin: 0,\r\n fontFamily: \"Roboto, Helvetica, Arial, sans-serif\",\r\n fontWeight: 500,\r\n fontSize: \"1.25rem\",\r\n lineHeight: 1.6,\r\n letterSpacing: \"0.0075em\"\r\n }\r\n}))\r\n","import { tabletBreakpoint } from \"../../../lib/helper/viewportHelper\"\r\nimport { useLanguage } from \"../../../lib/hooks/languageHooks\"\r\nimport { strings as Localization } from \"../../../lib/Localization\"\r\nimport theme from \"../../../theme\"\r\nimport useStyles from \"../styles\"\r\nimport { Link } from \"react-router-dom\"\r\nimport React from \"react\"\r\nimport classnames from \"classnames\"\r\nimport SearchIcon from \"@mui/icons-material/Search\"\r\nimport {\r\n Box, IconButton, Link as SimpleLink, Tooltip, Typography, useMediaQuery\r\n} from \"@mui/material\"\r\n\r\nconst TrackingButton = ({ orderNumber, shippingArray }) => {\r\n const classes = useStyles()\r\n const language = useLanguage()\r\n const isSmall = useMediaQuery(theme.breakpoints.down(tabletBreakpoint))\r\n\r\n return (\r\n \r\n \r\n {Localization.contactBrodit}\r\n \r\n
\r\n \r\n {Localization.homeSection5Title}\r\n
\r\n \r\n {Localization.homeSection5Text}\r\n \r\n- \r\n {customerOrders.map((item, i) => (\r\n
\r\n \r\n e.key === \"Enter\" && handleSave}\r\n onClick={handleSave}\r\n style={{ display: \"flex\", alignItems: \"center\" }}\r\n >\r\n 
\r\n \r\n \r\n \r\n e.key === \"Enter\" && handleCancel}\r\n onClick={handleCancel}\r\n style={{ display: \"flex\", alignItems: \"center\" }}\r\n >\r\n 
\r\n \r\n \r\n
\r\n \r\n )}\r\n {(!isEditing && expandedAccordion === index) && (\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n {Localization.yourFavorites} \r\n
\r\n \r\n {!isEditing && (\r\n e.key === \"Enter\" && toggleEdit()}\r\n style={{\r\n display: \"flex\",\r\n padding: \"10px 12px\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n gap: \"10px\",\r\n borderRadius: \"4px\",\r\n background: \"#F09057\",\r\n height: 31\r\n }}\r\n >\r\n \r\n {Localization.newList}\r\n \r\n \r\n )}\r\n {isEditing && (\r\n \r\n \r\n {Localization.errorCreatingFavoriteList}\r\n \r\n \r\n
\r\n \r\n {\r\n userLists?.map((list, index) => (\r\n \r\n
\r\n )}\r\n \r\n (\r\n \r\n e.key === \"Enter\" && handleSave()}\r\n onClick={handleSave}\r\n style={{ display: \"flex\", alignItems: \"flex-end\" }}\r\n >\r\n \r\n \r\n \r\n \r\n e.key === \"Enter\" && handleCancel()}\r\n onClick={handleCancel}\r\n style={{ display: \"flex\", alignItems: \"flex-end\" }}\r\n >\r\n \r\n \r\n \r\n
\r\n \r\n setShowNotInList(!showNotInList)}\r\n onKeyDown={e => e.key === \"Enter\" && setShowNotInList(!showNotInList)}\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n gap: \"10px\",\r\n borderRadius: \"4px\",\r\n background: \"#F09057\",\r\n height: 24\r\n }}\r\n >\r\n \r\n {showNotInList ? Localization.showAllFavorites : Localization.showUnlisted}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {/* {Localization.published}: */}\r\n {new Date(data.dateTime).toLocaleDateString()}\r\n \r\n {(data.video && detailedConsent?.Advertising.consented)\r\n && (\r\n ((imageIndex > 0)\r\n ? \r\n \r\n {data.title}\r\n \r\n \r\n {data.preamble}\r\n \r\n \r\n \r\n {\r\n (data?.products ?? []).length > 0\r\n && (\r\n <>\r\n \r\n \r\n {Localization.products.toUpperCase()}\r\n \r\n \r\n
\r\n )\r\n }\r\n {\r\n isFetching\r\n && \r\n
\r\n )}\r\n\r\n {!data.video && (\r\n \r\n
\r\n \r\n )\r\n }\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default User\r\n","export const formatPrice = price => {\r\n if (!price) return null\r\n\r\n // Adds spaces, commas and restrict the number of fraction digits.\r\n return price.toLocaleString(\"sv\", {\r\n minimumFractionDigits: 2,\r\n maximumFractionDigits: 2\r\n })\r\n}\r\n\r\nexport const formatAmount = amount => {\r\n if (!amount) return null\r\n\r\n // Adds spaces, hide fraction digits if there are none present.\r\n return amount.toLocaleString(\"sv\", {\r\n minimumFractionDigits: 0\r\n })\r\n}\r\n","import { makeStyles } from \"@mui/styles\";\r\n\r\nexport default makeStyles(theme => ({\r\n content: {\r\n flexGrow: 1,\r\n // backgroundColor: theme.palette.background.default,\r\n padding: theme.spacing(3)\r\n },\r\n capitalize: {\r\n textTransform: \"uppercase\"\r\n }\r\n}));\r\n","/* eslint-disable no-restricted-globals */\r\nimport { strings as Localization } from \"../../../lib/Localization\"\r\nimport React, { useRef, useState } from \"react\"\r\nimport {\r\n Button, ButtonGroup, Box, Typography\r\n} from \"@mui/material\"\r\nimport PublishIcon from \"@mui/icons-material/Publish\"\r\nimport FileCopyIcon from \"@mui/icons-material/FileCopy\"\r\n\r\nconst CsvReader = ({ callbackFn }) => {\r\n const [csvFile, setCsvFile] = useState(null)\r\n const ref = useRef()\r\n\r\n const processCSV = (str, delim = \";\") => {\r\n let success = true\r\n let rows = str.split(/\\r\\n|\\n|\\r/)\r\n\r\n // Remove all empty rows.\r\n rows = rows.filter(x => x !== \"\")\r\n\r\n rows = rows.map(row => {\r\n // Extract the value for the first column as the 'article'\r\n // and the second column as 'quantity' for each row.\r\n const [article, quantity] = row.split(delim).map(val => val.trim())\r\n\r\n return {\r\n article,\r\n quantity,\r\n original: row,\r\n success: false\r\n }\r\n })\r\n\r\n const failedRows = []\r\n const successfulRows = []\r\n rows.forEach(row => {\r\n const correctedQuantity = row.quantity.replace(\",\", \".\")\r\n\r\n const isNumber = (\r\n !isNaN(parseFloat(correctedQuantity))\r\n && isFinite(correctedQuantity)\r\n )\r\n\r\n if (isNumber) {\r\n successfulRows.push(\r\n {\r\n ...row,\r\n quantity: parseInt(correctedQuantity, 10),\r\n success: true\r\n }\r\n )\r\n } else {\r\n success = false\r\n failedRows.push(row)\r\n }\r\n })\r\n\r\n return {\r\n success,\r\n successfulRows,\r\n failedRows\r\n }\r\n }\r\n\r\n const submit = () => {\r\n const file = csvFile\r\n const reader = new FileReader()\r\n\r\n reader.onload = e => {\r\n const text = e.target.result\r\n const delim = text.includes(\";\") ? \";\" : \",\"\r\n const { success, successfulRows } = processCSV(text, delim)\r\n\r\n if (success) {\r\n const articles = successfulRows.map(\r\n ({ article, quantity }) => ({ article, quantity })\r\n )\r\n callbackFn(true, articles)\r\n } else {\r\n callbackFn(false, null)\r\n }\r\n\r\n ref.current.reset()\r\n setCsvFile(null)\r\n }\r\n\r\n reader.readAsText(file)\r\n }\r\n\r\n const handleFormSubmit = () => {\r\n if (csvFile) submit()\r\n }\r\n\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport default CsvReader\r\n","export default __webpack_public_path__ + \"static/media/orderByFileExample.301e71ae.jpg\";","import useStyles from \"./styles\"\r\nimport CsvReader from \"./CsvReader/CsvReader\"\r\nimport image from \"../../assets/orderByFileExample.jpg\"\r\nimport { strings as Localization } from \"../../lib/Localization\"\r\nimport { batchAddToCart } from \"../../redux/cartSlice\"\r\nimport { setDialogMessage } from \"../../redux/userMessageSlice\"\r\nimport { useLanguage } from \"../../lib/hooks/languageHooks\"\r\nimport { checkMonitorArticles } from \"../../lib/helper/userHelper\"\r\nimport { useSelector, useDispatch } from \"react-redux\"\r\nimport FileCopyIcon from \"@mui/icons-material/FileCopy\"\r\nimport { Alert, Typography, Box } from \"@mui/material\"\r\n\r\nimport React, { useState } from \"react\"\r\n\r\nconst OrderUpload = () => {\r\n const classes = useStyles()\r\n const cart = useSelector(state => state.cart)\r\n const dispatch = useDispatch()\r\n const lang = useLanguage()\r\n const [_loading, setLoading] = useState(false)\r\n\r\n const callback = async (readSuccess, array) => {\r\n if (cart.items.length > 0) {\r\n dispatch(setDialogMessage(\r\n \r\n
\r\n \r\n
\r\n {`${Localization.hello} ${userData.name ?? \"\"}`}
\r\n\r\n {Localization.youMustThenAcceptTheTermsAgain}\r\n
\r\n \r\n {Localization.contactBroditVia}\r\n info@brodit.se\r\n {Localization.ifYouWantToChangeAnyInformation}\r\n
\r\n \r\n 
\r\n
\r\n \r\n {notInMonitor.map(article => (
\r\n
\r\n {Localization.thePasswordMustAlsoComplyToTheFollowingRules}\r\n
\r\n- \r\n {passwordRequirements.map(requirement => (\r\n
\r\n \r\n {requirement.valid ? \r\n {requirement.text}\r\n
\r\n {requirement.explanation\r\n && (\r\n \r\n \r\n \r\n {Localization.newProductsForDevices.toUpperCase()}\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default NewsListPage\r\n","import { makeStyles } from \"@mui/styles\"\r\n\r\nexport default makeStyles(() => ({\r\n page: {\r\n width: \"100%\"\r\n }\r\n}))\r\n","import useStyles from \"./styles\"\r\nimport { Box } from \"@mui/material\"\r\nimport React, { useEffect } from \"react\"\r\n\r\nconst TITLE_PREFIX = \"Brodit | \"\r\n\r\nconst Page = ({ title, ...props }) => {\r\n const classes = useStyles()\r\n useEffect(() => {\r\n document.title = TITLE_PREFIX + title\r\n window.scrollTo(0, 0)\r\n }, [title])\r\n\r\n return (\r\n \r\n {\r\n newsArticles.map(news => (\r\n
\r\n \r\n
\r\n ))\r\n }\r\n - \r\n {compareProds.map(prod => (\r\n
\r\n {!product && loading &&
\r\n )\r\n}\r\n\r\nexport default ProductInfo\r\n","import Menu2 from \"./Menu2\"\r\nimport useStyles from \"./styles\"\r\nimport { setSearchQuery } from \"../../redux/searchReducer\"\r\nimport { resetCurrentPage } from \"../../redux/pageReducer\"\r\nimport React from \"react\"\r\nimport { useDispatch } from \"react-redux\"\r\n\r\nfunction Menu2Drawer({ toggleDrawer, open, onClose }) {\r\n const dispatch = useDispatch()\r\n const classes = useStyles()\r\n\r\n const onItemClick = id => {\r\n dispatch(resetCurrentPage())\r\n dispatch(setSearchQuery({\r\n type: \"menu2Drawer\",\r\n value: { collections: [id] },\r\n clearFilter: true\r\n }))\r\n toggleDrawer()\r\n }\r\n\r\n const openClass = open ? classes.open : \"\"\r\n\r\n return (\r\n \r\n {language === \"en\" &&
\r\n \r\n
\r\n \r\n {title}\r\n
\r\n {textArray.map((text, index) => (\r\n{item.title}
\r\n\r\n \r\n {item.text} \r\n \r\n \r\n {item.imageText} \r\n \r\n
\r\n {i < data.timeline.length - 1 && (\r\n {item.title}
\r\n\r\n
\r\n {data.topInfo.title}
\r\n{data.story.title}
\r\n\r\n {data && renderTopSection()}\r\n {data && (isDesktop ?
\r\n )\r\n}\r\n\r\nexport default About\r\n","import { useEffect } from \"react\"\r\nimport { useLocation } from \"react-router-dom\"\r\nimport ReactGA from \"react-ga4\"\r\n\r\nfunction RouteChangeTracker() {\r\n const location = useLocation()\r\n\r\n useEffect(() => {\r\n ReactGA.set({ page: location.pathname + location.search })\r\n ReactGA.send({ hitType: \"pageview\", pathname: location.pathname + location.search })\r\n }, [location])\r\n\r\n return null\r\n}\r\n\r\nexport default RouteChangeTracker\r\n","/* eslint-disable jsx-a11y/control-has-associated-label */\r\nimport useStyles from \"./styles\"\r\nimport { checkMonitorArticles } from \"../../lib/helper/userHelper\"\r\nimport { useLanguage } from \"../../lib/hooks/languageHooks\"\r\nimport { strings as Localization } from \"../../lib/Localization\"\r\nimport { addToCart } from \"../../redux/cartSlice\"\r\nimport { setSnackbarMessage } from \"../../redux/userMessageSlice\"\r\nimport React, { useRef, useState } from \"react\"\r\nimport { useDispatch } from \"react-redux\"\r\nimport AddShoppingCartIcon from \"@mui/icons-material/AddShoppingCart\"\r\nimport CloseIcon from \"@mui/icons-material/Close\"\r\nimport RemoveCircleIcon from \"@mui/icons-material/RemoveCircle\"\r\nimport AddCircleIcon from \"@mui/icons-material/AddCircle\"\r\nimport ShoppingCartIcon from \"@mui/icons-material/ShoppingCart\"\r\nimport CircularProgress from \"@mui/material/CircularProgress\"\r\nimport WarningIcon from \"@mui/icons-material/Warning\"\r\nimport DoneIcon from \"@mui/icons-material/Done\"\r\n\r\nconst QuickShop = () => {\r\n const dispatch = useDispatch()\r\n const classes = useStyles()\r\n const lang = useLanguage()\r\n const ref = useRef()\r\n const [isOpen, setIsOpen] = useState(false)\r\n const [quantity, setQuantity] = useState(null)\r\n const [sku, setSku] = useState(\"\")\r\n const [addState, setAddState] = useState(\"ready\")\r\n\r\n const parse = i => parseInt(i, 10)\r\n\r\n const increaseQuantity = () => {\r\n setQuantity(quantity + 1)\r\n }\r\n\r\n const decreaseQuantity = () => {\r\n if (quantity && quantity >= 0) {\r\n setQuantity(quantity - 1)\r\n } else {\r\n setQuantity(null)\r\n }\r\n }\r\n\r\n const setFail = () => {\r\n setAddState(\"error\")\r\n setTimeout(() => setAddState(\"ready\"), 1000)\r\n }\r\n\r\n const setSuccess = () => {\r\n setAddState(\"success\")\r\n setQuantity(null)\r\n setSku(\"\")\r\n ref.current?.focus()\r\n setTimeout(() => {\r\n setAddState(\"ready\")\r\n }, 1000)\r\n }\r\n\r\n const onSubmit = e => {\r\n e.preventDefault()\r\n checkMonitorArticles(lang, [sku], result => {\r\n if (!result.includes(sku) && quantity > 0) {\r\n const q = parse(quantity)\r\n dispatch(addToCart(sku, q))\r\n dispatch(setSnackbarMessage(`${Localization.itemNumber} ${sku} ${Localization.hasBeenAddedToCart}`, \"success\"))\r\n setSuccess()\r\n } else if (quantity === 0) {\r\n dispatch(setSnackbarMessage(Localization.articleCouldNotBeAddedQuantityZero, \"error\"))\r\n setFail()\r\n } else {\r\n dispatch(setSnackbarMessage(`${Localization.itemNumber} ${sku} ${Localization.couldNotBePlacedInCart}`, \"error\"))\r\n setFail()\r\n }\r\n }, setAddState(\"loading\"))\r\n }\r\n\r\n const icon = () => (isOpen ? \r\n 
\r\n
\r\n )\r\n}\r\n\r\nexport default ErrorPage\r\n","import theme from \"../../theme\"\r\nimport { desktopBreakpoint, mobileBreakpoint, mobileMenuBreakpoint } from \"../../lib/helper/viewportHelper\"\r\nimport { makeStyles } from \"@mui/styles\"\r\n\r\nexport default makeStyles(() => ({\r\n main: {\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n flexDirection: \"column\",\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n width: \"100%\"\r\n }\r\n },\r\n section1: {\r\n maxWidth: \"688px\",\r\n height: \"auto\",\r\n backgroundColor: \"#FFF\",\r\n paddingBottom: \"50px\",\r\n paddingTop: \"40px\",\r\n [theme.breakpoints.down(mobileBreakpoint)]: {\r\n paddingTop: \"20px\",\r\n paddingLeft: \"24px\",\r\n paddingRight: \"24px\",\r\n paddingBottom: \"40px\"\r\n }\r\n },\r\n section1Wrapper: {\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n flexDirection: \"column\",\r\n flex: \"\"\r\n },\r\n section2: {\r\n width: \"80%\",\r\n height: \"auto\",\r\n flexShrink: 0,\r\n backgroundColor: \"#FFF\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n flexDirection: \"column\",\r\n paddingLeft: \"10%\",\r\n paddingRight: \"10%\",\r\n paddingBottom: \"75px\",\r\n gap: 50,\r\n [theme.breakpoints.down(mobileBreakpoint)]: {\r\n width: \"100%\",\r\n paddingBottom: \"unset\",\r\n paddingLeft: \"unset\",\r\n paddingRight: \"unset\"\r\n }\r\n },\r\n section3: {\r\n backgroundColor: \"#F8F8F8\",\r\n width: \"100%\",\r\n paddingTop: \"75px\",\r\n paddingBottom: \"75px\",\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n alignItems: \"center\",\r\n [theme.breakpoints.down(mobileBreakpoint)]: {\r\n paddingTop: \"40px\",\r\n paddingBottom: \"40px\"\r\n }\r\n },\r\n section3Wrapper: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n alignItems: \"center\",\r\n gap: \"20px\",\r\n width: \"80%\"\r\n },\r\n whiteText: {\r\n color: \"#FFF\",\r\n fontFamily: \"Arial\",\r\n fontSize: \"18px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"700\",\r\n lineHeight: \"16px\", /* 88.889% */\r\n letterSpacing: \"0.5px\"\r\n },\r\n whiteLargerText: {\r\n color: \"#FFF\",\r\n fontFamily: \"Arial\",\r\n fontSize: \"20px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"400\",\r\n lineHeight: \"24px\", /* 120% */\r\n letterSpacing: \"0.5px\",\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n textAlign: \"center\",\r\n /* Mobil/P */\r\n fontSize: \"14px\",\r\n lineHeight: \"20px\" /* 142.857% */\r\n }\r\n },\r\n whiteH2Roboto: {\r\n color: \"#FFF\",\r\n fontFamily: \"Roboto\",\r\n fontSize: \"30px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"700\",\r\n lineHeight: \"123.688%\" /* 37.106px */,\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n textAlign: \"center\",\r\n /* Mobil/H CTA */\r\n fontSize: \"25px\",\r\n lineHeight: \"normal\"\r\n }\r\n },\r\n blackH1: {\r\n color: \"#2D2D2D\",\r\n fontFamily: \"Rubik\",\r\n fontSize: \"30px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"500\",\r\n lineHeight: \"40px\",\r\n marginTop: \"40px\",\r\n marginBottom: \"45px\",\r\n textAlign: \"center\",\r\n [theme.breakpoints.down(mobileMenuBreakpoint)]: {\r\n textAlign: \"center\",\r\n fontSize: \"25px\",\r\n marginTop: \"20px\",\r\n lineHeight: \"26.8px\",\r\n marginBottom: \"unset\"\r\n }\r\n },\r\n blackH2: {\r\n color: \"#2D2D2D\",\r\n fontFamily: \"Rubik\",\r\n fontSize: \"24px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"500\",\r\n lineHeight: \"40px\",\r\n marginTop: 0,\r\n textAlign: \"center\",\r\n [theme.breakpoints.down(mobileBreakpoint)]: {\r\n textAlign: \"center\",\r\n fontSize: \"20px\",\r\n lineHeight: \"26.8px\",\r\n marginTop: 0,\r\n marginBottom: \"10px\"\r\n },\r\n [theme.breakpoints.down(mobileMenuBreakpoint)]: {\r\n marginTop: \"20px\",\r\n marginBottom: \"20px\"\r\n }\r\n },\r\n blackText: {\r\n color: \"#2D2D2D\",\r\n fontFamily: \"Arial\",\r\n fontSize: \"17px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"400\",\r\n lineHeight: \"24px\", /* 142.857% */\r\n letterSpacing: \"0.5px\",\r\n textAlign: \"center\",\r\n width: \"100%\",\r\n [theme.breakpoints.down(mobileBreakpoint)]: {\r\n textAlign: \"left\",\r\n fontSize: \"14px\",\r\n lineHeight: \"20px\"\r\n }\r\n },\r\n fatBlackText: {\r\n color: \"#2D2D2D\",\r\n fontFamily: \"Arial\",\r\n fontSize: \"14px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"700\",\r\n lineHeight: \"16px\", /* 114.286% */\r\n letterSpacing: \" 0.5px\",\r\n \"& .MuiTypography-root\": {\r\n marginBottom: \"10px\"\r\n }\r\n },\r\n anchor: {\r\n color: \"#2D2D2D\",\r\n fontFamily: \"Arial\",\r\n fontSize: \"14px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"700\",\r\n lineHeight: \"16px\",\r\n letterSpacing: \"0.5px\",\r\n textDecoration: \"none\",\r\n borderBottom: \"1px solid transparent\",\r\n \"&:hover\": {\r\n borderBottom: \"1px solid #F09057\"\r\n }\r\n },\r\n blackH3: {\r\n flex: \"0 0 100%\",\r\n color: \"#332D2D\",\r\n /* M3/title/medium */\r\n fontFamily: \"Rubik\",\r\n fontSize: \"20px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"400\",\r\n lineHeight: \"32px\",\r\n letterSpacing: \"0.15px\",\r\n textAlign: \"center\",\r\n [theme.breakpoints.down(mobileBreakpoint)]: {\r\n fontWeight: 500,\r\n textAlign: \"left\"\r\n }\r\n },\r\n card: {\r\n width: \"100%\",\r\n margin: \"10px\",\r\n maxWidth: \"350px\",\r\n padding: \"0px\",\r\n borderRadius: \"6px\",\r\n boxShadow: \"0px 0px 20px 0px #2D2D2D1A\"\r\n },\r\n cardContent: {\r\n paddingTop: \"8px\",\r\n paddingLeft: \"20px\",\r\n paddingRight: \"20px\",\r\n paddingBottom: \"20px\"\r\n },\r\n cardTitle: {\r\n color: \"#2D2D2D\",\r\n fontFamily: \"Rubik\",\r\n fontSize: \"18px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"400\",\r\n lineHeight: \"32px\" /* 177.778% */\r\n },\r\n cardText: {\r\n color: \"#2D2D2D\",\r\n fontFamily: \"Arial\",\r\n fontSize: \"17px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"400\",\r\n lineHeight: \"24px\",\r\n letterSpacing: \"0.5px\",\r\n marginBottom: \"10px\"\r\n },\r\n alignCenter: {\r\n alignSelf: \"center\"\r\n },\r\n link: {\r\n color: \"black\",\r\n \"&:link\": {\r\n color: \"black\"\r\n },\r\n \"&visited\": {\r\n color: \"black\"\r\n }\r\n },\r\n textWrapper: {\r\n flex: \"0 0 50%\",\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n marginTop: \"40px\",\r\n marginBottom: \"50px\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n \"&:last-child\": {\r\n marginBottom: \"unset\"\r\n },\r\n [theme.breakpoints.down(mobileMenuBreakpoint)]: {\r\n flex: \"0 1 100%\",\r\n padding: \"20px\",\r\n marginTop: \"20px\"\r\n }\r\n },\r\n adImageWrapper: {\r\n flex: \"0 0 40%\",\r\n padding: \"16% 10% 10% 10%\",\r\n [theme.breakpoints.down(mobileMenuBreakpoint)]: {\r\n flex: \"0 0 100%\",\r\n padding: \"unset\"\r\n }\r\n },\r\n adImage: {\r\n width: \"100%\",\r\n borderRadius: \"5px\"\r\n },\r\n hero: {\r\n display: \"flex\",\r\n width: \"90%\",\r\n justifyContent: \"center\",\r\n marginBottom: \"20px\",\r\n [theme.breakpoints.down(mobileBreakpoint)]: {\r\n width: \"100%\",\r\n marginTop: \"20px\"\r\n }\r\n },\r\n youtube: {\r\n aspectRatio: \"16 / 9\",\r\n flex: \"0 1 1400px\"\r\n },\r\n youtubeNoConsent: {\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n aspectRatio: \"16 / 9\",\r\n flex: \"0 1 1400px\",\r\n backgroundColor: \"#f6f6f6\"\r\n },\r\n adWrapper: {\r\n display: \"flex\",\r\n \"&:nth-child(odd)\": {\r\n flexDirection: \"row-reverse\"\r\n },\r\n [theme.breakpoints.down(mobileMenuBreakpoint)]: {\r\n flexWrap: \"wrap\"\r\n }\r\n },\r\n paragraph: {\r\n display: \"flex\",\r\n flex: \"0 0 100%\",\r\n flexWrap: \"wrap\"\r\n }\r\n}))\r\n","export default __webpack_public_path__ + \"static/media/mont.0fba934a.png\";","export default __webpack_public_path__ + \"static/media/mont_mob.a1061b3b.jpg\";","export default __webpack_public_path__ + \"static/media/cnc.c2a47ed9.jpg\";","export default __webpack_public_path__ + \"static/media/cnc_mob.b04eab40.jpg\";","import useStyles from \"./styles\"\r\nimport Assembly from \"./assets/mont.png\"\r\nimport AssemblyMob from \"./assets/mont_mob.jpg\"\r\nimport CNC from \"./assets/cnc.jpg\"\r\nimport CNCMob from \"./assets/cnc_mob.jpg\"\r\nimport { strings as Localization } from \"../../lib/Localization\"\r\nimport { useLanguage } from \"../../lib/hooks/languageHooks\"\r\nimport theme from \"../../theme\"\r\nimport { desktopBreakpoint, mobileMenuBreakpoint } from \"../../lib/helper/viewportHelper\"\r\nimport ConsentMessage from \"../ConsentMessage/ConsentMessage\"\r\nimport React from \"react\"\r\nimport {\r\n Box, Typography, useMediaQuery, Card, CardContent, CardMedia\r\n} from \"@mui/material\"\r\nimport classnames from \"classnames\"\r\nimport { Link } from \"react-router-dom\"\r\nimport { useCookieConsent } from \"react-cookie-manager\"\r\n\r\nconst Career = () => {\r\n const classes = useStyles()\r\n const language = useLanguage()\r\n const isDesktop = useMediaQuery(theme.breakpoints.up(desktopBreakpoint))\r\n const isTablet = useMediaQuery(theme.breakpoints.down(mobileMenuBreakpoint))\r\n const { detailedConsent } = useCookieConsent()\r\n\r\n const test = [\r\n { text: \"Gillar du CNC-maskiner och en välutrustad maskinpark? Det gör vi också! Vi söker nu engagerade CNC-operatörer till vår produktion. I denna roll kommer du att ställa och övervaka CNC-maskiner för att tillverka högkvalitativa komponenter inom plastindustrin.\" },\r\n { title: \"Din profil\", text: \"Vi söker dig som tycker om att arbeta inom industrin. För att lyckas i rollen är det viktigt att du har god teknisk förståelse och kan arbeta noggrant. Du är flexibel, har god samarbetsförmåga och kan arbeta både självständigt och i grupp samt ta egna initiativ. Tidigare erfarenhet av liknande arbetsuppgifter är meriterande.\" },\r\n { title: \"Vi erbjuder\", text: \"Vi erbjuder en arbetsmiljö där våra värdegrundsord Respekt, Utveckling, Engagemang, Mod och Målinriktning står i centrum. Vi vill skapa de bästa förutsättningarna för både vår personal och våra kunder genom att jobba mot dessa principer. Här får du möjligheten att bli en del av Broditfamiljen och vår framgångsrika och växande verksamhet.\" }\r\n ]\r\n\r\n const mont = [\r\n { text: \"Vi söker nu flera engagerade personer till vår monteringsavdelning. Är du en praktiker med känsla för kvalitet? Då har vi jobbet för dig! Vi söker nu montörer inför höstens utmaningar. Arbetet innefattar bland annat montering av komponenter, packning samt kvalitetssäkring inom plastindustrin.\" },\r\n { title: \"Din profil\", text: \"Vi söker dig som gillar att arbeta med händerna. För att lyckas i rollen är det viktigt att du förstår vikten av både tempo och noggrannhet. Du är flexibel, har god samarbetsförmåga och kan arbeta både självständigt och i grupp samt ta egna initiativ. Tidigare erfarenhet av liknande arbetsuppgifter är meriterande.\" },\r\n { title: \"Vi erbjuder\", text: \"Vi erbjuder en arbetsmiljö där våra värdegrundsord Respekt, Utveckling, Engagemang, Mod och Målinriktning står i centrum. Vi vill skapa de bästa förutsättningarna för både vår personal och våra kunder genom att jobba mot dessa principer. Här får du möjligheten att bli en del av Broditfamiljen och vår framgångsrika och växande verksamhet.\" }\r\n ]\r\n\r\n const contacts = [\r\n {\r\n name: \"Lena Johansson\",\r\n country: \"HR\",\r\n phone: \"0505-177 84\",\r\n email: \"lena@brodit.se\",\r\n image: \"/files/ImagesStatic/lena.jpg\"\r\n }\r\n ]\r\n\r\n const renderImageTextSection = (title, textArray, imageSrc) => (\r\n {Localization.somethingWentWrong}
\r\n{Localization.pleaseTryAgainLaterOrContactBroditsSupportIfTheProblemPersists}
\r\n {Localization.refreshToContinue}
\r\n \r\n \r\n {isTablet\r\n && (\r\n \r\n För att läsa mer om Brodit och vår historia, tryck\r\n {\" \"}\r\n här\r\n \r\n\r\n \r\n Tillträde enligt överenskommelse.\r\n
\r\n Urval sker löpande.\r\n \r\n\r\n \r\n Skicka din ansökan till:\r\n
\r\n lena@brodit.se\r\n \r\n \r\n {!isTablet\r\n && (\r\n
\r\n )\r\n\r\n const renderContactCard = contact => (\r\n \r\n 
\r\n
\r\n )}\r\n \r\n {title}\r\n
\r\n\r\n {textArray.map((text, index) => (\r\n\r\n {text.title && (\r\n \r\n {text.text}\r\n \r\n
\r\n ))}\r\n\r\n \r\n {text.title}\r\n
\r\n )}\r\n\r\n Urval sker löpande.\r\n
\r\n lena@brodit.se\r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n Lediga tjänster
\r\nUnknown component
\r\n }\r\n }\r\n\r\n return (\r\n \r\n {placeholder\r\n && placeholder === \"woman\" ?
\r\n )\r\n\r\n const renderContactCard = contact => (\r\n \r\n {contact.image !== null\r\n ? 
\r\n : imagePlaceholder(contact.placeholder)}\r\n
\r\n )\r\n\r\n const renderContactSection = section => (\r\n \r\n
\r\n \r\n {contact.name}\r\n {contact.roles[0].names.filter(x => x.lang === language)[0].text}\r\n
\r\n {contact.email}\r\n {contact.phone.filter(x => x.lang === language)[0].number}\r\n \r\n
\r\n )\r\n\r\n return (\r\n \r\n
\r\n {section.title.filter(x => x.lang === language)[0].text}
\r\n\r\n {section.list.map(contact => renderContactCard(contact))}\r\n
\r\n \r\n 
\r\n
\r\n )\r\n}\r\n\r\nexport default ContactPage\r\n","import { useLanguage } from \"../../lib/hooks/languageHooks\"\r\nimport React from \"react\"\r\nimport { Helmet } from \"react-helmet\"\r\n\r\nfunction AboutPageMetaDescription() {\r\n const language = useLanguage()\r\n\r\n const title = language === \"sv\"\r\n ? \"Om Oss - Brodit\"\r\n : \"About us - Brodit\"\r\n const description = language === \"sv\"\r\n ? \"Världsledande tillverkare inom monteringslösningar för kommunikationsenheter i fordon. Brodit AB grundades år 1983 och ligger i Karlsborg, Västergötland. Brodit har 145 anställda och exporterar till 30 länder.\"\r\n : \"World-leading manufacturer of mounting solutions for communication devices in vehicles. Brodit AB was founded in 1983 and is located in Karlsborg, Västergötland. Brodit has 145 employees and exports to 30 countries.\"\r\n\r\n const keywords = language === \"sv\"\r\n ? \"om oss, Brodit\"\r\n : \"about us, Brodit\"\r\n\r\n return (\r\n \r\n
\r\n {data && data.content.sections.map(section => renderContactSection(section))}\r\n \r\n
\r\n \r\n
\r\n {Localization.contactUs}
\r\n \r\n\r\n {data\r\n && (\r\n
\r\n \r\n
\r\n )}\r\n {Localization.contactOfficeAndManufacturing}
\r\n\r\n
\r\n \r\n {data.content.generalContactInfo.company}\r\n {data.content.generalContactInfo.street}\r\n {data.content.generalContactInfo.zipCode}\r\n
\r\n \r\n \r\n {data.content.generalContactInfo.phone.filter(x => x.lang === language)[0].number}\r\n \r\n \r\n {data.content.generalContactInfo.email}\r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n return null\r\n }\r\n\r\n return (\r\n \r\n {text !== \"\" && }\r\n {children}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {isAuthorized && isTablet && location.pathname.match(/[^/]+$/)?.[0] !== \"categories\" &&
\r\n