\r\n {\r\n !isFetching\r\n && vehicleNews.map(news => (\r\n \r\n \r\n ))\r\n }\r\n
\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 {replacementProducts?.map(productId => (\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\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","/* eslint-disable no-param-reassign */\r\nimport { productAdapter } from \"./adapter/productAdapter\"\r\nimport { requestProduct, requestProducts, requestFilteredProducts } from \"./thunk/productThunk\"\r\nimport { prepareProducts } from \"../components/CompareProducts/helperFunctions\"\r\nimport { createSlice } from \"@reduxjs/toolkit\"\r\n\r\nconst slice = createSlice({\r\n name: \"product\",\r\n initialState: productAdapter.getInitialState({\r\n lastProductFetch: [],\r\n lastFetchItemCount: 0,\r\n lastFetchProperties: {\r\n brands: [],\r\n productNames: []\r\n },\r\n loading: false,\r\n pendingRequests: 0\r\n }),\r\n reducers: {\r\n reset: () => {\r\n productAdapter.removeAll()\r\n },\r\n deleteSearchResult: state => {\r\n state.lastProductFetch = []\r\n state.lastFetchItemCount = 0\r\n state.lastFetchProperties = {\r\n brands: [],\r\n productNames: []\r\n }\r\n }\r\n },\r\n extraReducers: builder => {\r\n // Request one\r\n builder.addCase(requestProduct.pending, state => {\r\n state.pendingRequests += 1\r\n state.loading = Boolean(state.pendingRequests)\r\n })\r\n builder.addCase(requestProduct.fulfilled, (state, action) => {\r\n state.pendingRequests -= 1\r\n state.loading = Boolean(state.pendingRequests)\r\n\r\n const pagedList = action.payload?.pagedList.response\r\n if (!pagedList || pagedList.list.length === 0) {\r\n return\r\n }\r\n\r\n const products = prepareProducts(pagedList.list, action.meta.arg.lang)\r\n productAdapter.addOne(state, products[0])\r\n })\r\n\r\n builder.addCase(requestProduct.rejected, state => {\r\n state.pendingRequests -= 1\r\n state.loading = Boolean(state.pendingRequests)\r\n })\r\n\r\n builder.addCase(requestProducts.pending, state => {\r\n state.pendingRequests += 1\r\n state.loading = Boolean(state.pendingRequests)\r\n })\r\n builder.addCase(requestProducts.fulfilled, (state, action) => {\r\n state.pendingRequests -= 1\r\n state.loading = Boolean(state.pendingRequests)\r\n\r\n const pagedList = action.payload?.pagedList.response\r\n if (!pagedList || pagedList.list.length === 0) {\r\n return\r\n }\r\n\r\n const products = prepareProducts(pagedList.list, action.meta.arg.lang)\r\n productAdapter.addMany(state, products)\r\n })\r\n builder.addCase(requestProducts.rejected, state => {\r\n state.pendingRequests -= 1\r\n state.loading = Boolean(state.pendingRequests)\r\n })\r\n\r\n // Request many\r\n builder.addCase(requestFilteredProducts.pending, state => {\r\n state.pendingRequests += 1\r\n state.loading = Boolean(state.pendingRequests)\r\n })\r\n builder.addCase(requestFilteredProducts.fulfilled, (state, action) => {\r\n state.pendingRequests -= 1\r\n state.loading = Boolean(state.pendingRequests)\r\n\r\n const pagedList = action.payload?.pagedList.response\r\n if (!pagedList) {\r\n return\r\n }\r\n\r\n const products = prepareProducts(pagedList.list, action.meta.arg.lang)\r\n state.lastProductFetch = products.map(x => x.originalId)\r\n state.lastFetchItemCount = pagedList.pagingHeader.totalItems\r\n state.lastFetchProperties = {\r\n brands: action.payload.brands,\r\n productNames: action.payload.names\r\n }\r\n\r\n productAdapter.addMany(state, products)\r\n })\r\n builder.addCase(requestFilteredProducts.rejected, state => {\r\n state.pendingRequests -= 1\r\n state.loading = Boolean(state.pendingRequests)\r\n })\r\n }\r\n})\r\n\r\nconst { reset, deleteSearchResult } = slice.actions\r\n\r\nexport default slice.reducer\r\n\r\nexport const resetProductsCache = () => dispatch => {\r\n dispatch(reset())\r\n}\r\n\r\nexport const clearSearchResult = () => dispatch => {\r\n dispatch(deleteSearchResult())\r\n}\r\n","/* eslint-disable import/prefer-default-export */\r\nimport { selectById } from \"../adapter/materialAdapter\"\r\nimport { createAsyncThunk } from \"@reduxjs/toolkit\"\r\nimport axios from \"axios\"\r\n\r\nconst internalLangConvert = lang => (lang === \"en\" ? \"EN1\" : \"SV1\")\r\n\r\nconst fetchMaterial = async (id, lang) => {\r\n const a = await axios.get(\r\n `/api/ProductInfo/MaterialDetails?materialId=${id}&lang=${internalLangConvert(lang)}`\r\n )\r\n return a.data\r\n}\r\n\r\nexport const requestMaterial = createAsyncThunk(\r\n \"material/fetchById\",\r\n async params => {\r\n const { id, lang } = params\r\n return fetchMaterial(id, lang)\r\n },\r\n {\r\n condition: (params, { getState }) => {\r\n const { id, lang } = params\r\n const existing = selectById(getState(), `${lang}-${id}`)\r\n return !existing\r\n }\r\n }\r\n)\r\n","export default __webpack_public_path__ + \"static/media/carMount.54f0099a.png\";","import { makeStyles } from \"@mui/styles\"\r\n\r\nconst drawerWidth = \"100%\"\r\n\r\nexport default makeStyles(() => ({\r\n appMenu: {\r\n width: \"auto\"\r\n },\r\n navList: {\r\n width: drawerWidth\r\n },\r\n menuItem: {\r\n width: drawerWidth\r\n },\r\n menuItemIcon: {\r\n color: \"#97c05c\"\r\n },\r\n drawer: {\r\n position: \"absolute\",\r\n left: 0,\r\n right: 0,\r\n bottom: \"0\",\r\n top: \"auto\",\r\n zIndex: -1,\r\n backgroundColor: \"#FFFFFF\",\r\n transition: \"all 0.1s ease-in\",\r\n boxShadow: \"0px 0px 5px 0px rgba(45, 45, 45, 0.05)\"\r\n },\r\n open: {\r\n transform: \"translateY(99%)\"\r\n },\r\n backButton: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n backgroundColor: \"#F8F8F8\",\r\n paddingTop: \"8px\",\r\n paddingBottom: \"8px\",\r\n paddingLeft: \"20px\",\r\n border: 0,\r\n cursor: \"pointer\",\r\n fontFamily: \"Arial\",\r\n fontSize: \"14px\",\r\n fontWeight: 400,\r\n letterSpacing: \"0.25px\",\r\n gap: \"5px\",\r\n color: \"#2d2d2d\"\r\n },\r\n collectionTitle: {\r\n margin: 0,\r\n textAlign: \"right\",\r\n paddingTop: \"20px\",\r\n paddingRight: \"20px\",\r\n paddingLeft: \"20px\",\r\n paddingBottom: \"14px\",\r\n fontFamily: \"Arial\",\r\n fontSize: \"17px\",\r\n fontWeight: 700,\r\n lineHeight: \"20px\",\r\n letterSpacing: \"0.5px\"\r\n },\r\n readMoreLink: {\r\n textDecoration: \"none\",\r\n padding: \"10px 20px 10px 20px\",\r\n background: \"#F09057\",\r\n fontFamily: \"Arial\",\r\n fontSize: \"14px\",\r\n fontWeight: 700,\r\n lineHeight: \"16px\",\r\n letterSpacing: \"0.5px\",\r\n textAlign: \"center\",\r\n borderRadius: \"4px\",\r\n transition: \"all 0.1s ease-in\",\r\n color: \"#2D2D2D\",\r\n \"&:hover\": {\r\n backgroundColor: \"#ef7830\"\r\n }\r\n }\r\n}))\r\n","export default __webpack_public_path__ + \"static/media/largelogo.cea58660.png\";","import { useState, useEffect } from \"react\";\r\n\r\nfunction getWindowDimensions() {\r\n const { innerWidth: width, innerHeight: height } = window;\r\n return {\r\n width,\r\n height\r\n };\r\n}\r\n\r\nexport default function useWindowDimensions() {\r\n const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());\r\n\r\n useEffect(() => {\r\n function handleResize() {\r\n setWindowDimensions(getWindowDimensions());\r\n }\r\n\r\n window.addEventListener(\"resize\", handleResize);\r\n return () => window.removeEventListener(\"resize\", handleResize);\r\n }, []);\r\n\r\n return windowDimensions;\r\n}\r\n","export default __webpack_public_path__ + \"static/media/holder.b0b5d705.png\";","import { declineCookies } from '../../redux/gdprSlice'\r\nimport { signOut } from '../../redux/userSlice'\r\n\r\n// eslint-disable-next-line import/prefer-default-export, max-len\r\nexport const withdrawCookiesConsent = (skipReload = false) => (dispatch) => {\r\n dispatch(declineCookies())\r\n dispatch(signOut())\r\n\r\n // Couldn't find a good way to uninitialize GA4.\r\n // The GA4 cookie is recreated if removed.\r\n // Quick fix: Reloading the page prevents it from reinitializing GA4,\r\n // and the cookie is removed again in StateHandler.\r\n if (!skipReload) window.location.reload()\r\n}\r\n","import { makeStyles } from \"@mui/styles\"\r\n\r\nexport default makeStyles(theme => ({\r\n capitalized: {\r\n textTransform: \"uppercase\"\r\n },\r\n flexColumn: {\r\n display: \"flex\",\r\n flexDirection: \"column\"\r\n },\r\n marginBottom: {\r\n marginBottom: 40\r\n },\r\n flexRow: {\r\n display: \"flex\",\r\n flexDirection: \"row\"\r\n },\r\n flexEnd: {\r\n justifyContent: \"flex-end\",\r\n marginLeft: 50\r\n },\r\n spaceEven: {\r\n justifyContent: \"space-evenly\"\r\n },\r\n orderLineContent: {\r\n backgroundColor: theme.palette.background.default,\r\n padding: theme.spacing(2)\r\n },\r\n listItemGutters: {\r\n padding: 0\r\n },\r\n externalLinkIcon: {\r\n padding: 4,\r\n verticalAlign: \"middle\"\r\n }\r\n}))\r\n","/* eslint-disable react/no-array-index-key */\r\nimport useStyles from \"./styles\"\r\nimport { formatAmount, formatPrice } from \"../../../lib/helper/numberHelper\"\r\nimport { useLanguage } from \"../../../lib/hooks/languageHooks\"\r\nimport ExternalLinkIcon from \"../../../lib/icons/ExternalLink/ExternalLinkIcon\"\r\nimport { strings as Localization } from \"../../../lib/Localization\"\r\nimport { useUser } from \"../../../redux/hook/userHooks\"\r\nimport HeadingRow from \"../../Order/ProductCardOrder/HeadingRow/HeadingRow\"\r\nimport ProductCardOrder from \"../../Order/ProductCardOrder/ProductCardOrder\"\r\nimport getStatusText from \"../functions\"\r\nimport { Link } from \"react-router-dom\"\r\nimport React from \"react\"\r\nimport classnames from \"classnames\"\r\nimport LocalShippingIcon from \"@mui/icons-material/LocalShipping\"\r\nimport AssignmentTurnedInIcon from \"@mui/icons-material/AssignmentTurnedIn\"\r\nimport {\r\n ArrowBack, CheckCircleOutline,\r\n ConfirmationNumber, CreditCard, Notes, PersonOutline, Receipt, ThumbUp\r\n} from \"@mui/icons-material\"\r\nimport {\r\n Box, Button, Link as SimpleLink, List, ListItem, Typography\r\n} from \"@mui/material\"\r\n\r\nconst OrderInfo = ({ customerOrder, isOrderConfirmation }) => {\r\n const classes = useStyles()\r\n const lang = useLanguage()\r\n const user = useUser()\r\n\r\n const getDate = a => {\r\n const date = new Date(a)\r\n return date.toLocaleDateString()\r\n }\r\n\r\n const findComment = position => customerOrder.Rows.find(\r\n x => x.Position === position && x.Type === 4 && x.TextType === 7\r\n )?.Text\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 { useLanguage } from \"../../lib/hooks/languageHooks\"\r\nimport { useSelector } from \"react-redux\"\r\n\r\n// Uses the user steering setting on english website,\r\n// and defaults to LHD on swedish language.\r\nexport const useSteering = () => {\r\n const language = useLanguage()\r\n return useSelector(\r\n state => (\r\n language === \"en\"\r\n ? (state.user.steering ?? \"1\")\r\n : \"1\"\r\n )\r\n )\r\n}\r\n\r\nexport const useUser = () => useSelector(state => state.user)\r\n\r\nexport const useIsUserAuthorized = () => {\r\n const isAuthorized = useSelector(state => Boolean(state.user.authToken))\r\n const item = sessionStorage.getItem(\"isAuthorized\")\r\n\r\n return isAuthorized && !!item\r\n}\r\n\r\nexport const useUserAuthToken = () => useSelector(state => state.user.authToken)\r\n\r\nexport const useUserData = () => useSelector(state => state.user.user)\r\n\r\nexport const useSelectedModTek = () => useSelector(state => state.user.selectedModTek)\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\",\r\n fontSize: 14\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}))\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\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 {props.originalId}\r\n \r\n
\r\n );\r\n}\r\n\r\nexport function GridProductNumber(props) {\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
\r\n )\r\n}\r\n\r\nexport default CustomerOrderInfo\r\n","import React from 'react';\r\nimport { Snackbar, Button } from '@mui/material';\r\nimport { strings as Localization } from '../../lib/Localization';\r\n\r\nconst ErrorMessage = ({ open, handleClose }) => {\r\n\r\n const handleClick = () => {\r\n handleClose();\r\n }\r\n\r\n const action = (\r\n <>\r\n \r\n \r\n )\r\n\r\n // Todo: kanske inte ska ha en sån här (Snackbar) som visar att det inträffat fel.. \r\n\r\n return (\r\n - \r\n {replacementResponse.replacementProducts.map(prod => (\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 - \r\n {\r\n [...product.compatibleModels]\r\n .sort((a, b) => moveWordsToTopComparer(\r\n compatibleModelText(a),\r\n compatibleModelText(b),\r\n [brand, model, year]\r\n ))\r\n .map(item => {\r\n const key = `${item.brand}${item.model}${item.years}`\r\n return (\r\n // eslint-disable-next-line max-len\r\n
- \r\n
\r\n {compatibleModelText(item)}\r\n \r\n {\r\n item.brandType === \"Vehicles\"\r\n && (\r\n \r\n (\r\n {\r\n ([...item.countries]\r\n // eslint-disable-next-line max-len\r\n .sort((a, b) => a.localeCompare(b))\r\n // eslint-disable-next-line max-len\r\n .map(country => country.toUpperCase())\r\n .join(\", \"))\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 files.map(fileName => (\r\n
- \r\n
\r\n {!product && loading &&
\r\n )\r\n}\r\n\r\nexport default ProductInfo\r\n","import {\r\n desktopBreakpoint, mobileBreakpoint, mobileMenuBreakpoint, tabletBreakpoint\r\n} from \"../../lib/helper/viewportHelper\"\r\nimport { makeStyles } from \"@mui/styles\"\r\n\r\nexport default makeStyles(theme => ({\r\n main: {\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n flexDirection: \"column\"\r\n },\r\n section1: {\r\n maxWidth: \"100%\",\r\n display: \"flex\",\r\n height: \"auto\",\r\n flexShrink: 0,\r\n backgroundColor: \"#FFF\",\r\n [theme.breakpoints.between(mobileBreakpoint, mobileMenuBreakpoint)]: {\r\n width: \"100%\"\r\n }\r\n },\r\n heroBoxWrapper: {\r\n display: \"flex\",\r\n justifyContent: \"flex-end\",\r\n flex: \"0 1 1920px\",\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n justifyContent: \"center\"\r\n },\r\n [theme.breakpoints.down(mobileBreakpoint)]: {\r\n display: \"none\"\r\n }\r\n },\r\n heroBox: {\r\n display: \"flex\",\r\n padding: \"15px 30px\",\r\n flexDirection: \"column\",\r\n alignItems: \"flex-start\",\r\n gap: \"20px\",\r\n borderRadius: \"10px\",\r\n background: \"rgba(255, 255, 255, 0.90)\",\r\n marginRight: \"200px\",\r\n [theme.breakpoints.down(tabletBreakpoint)]: {\r\n padding: \"15px\"\r\n },\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n marginRight: \"unset\"\r\n }\r\n },\r\n heroBoxHeader: {\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 position: \"relative\",\r\n [theme.breakpoints.down(tabletBreakpoint)]: {\r\n leadingTrim: \"both\",\r\n textEdge: \"cap\",\r\n fontSize: \"8px\"\r\n }\r\n },\r\n heroBoxTitle: {\r\n color: \"#2D2D2D\",\r\n fontFamily: \"Rubik\",\r\n fontSize: \"40px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"500\",\r\n lineHeight: \"40px\" /* 100% */,\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n textAlign: \"center\",\r\n leadingTrim: \"both\",\r\n textEdge: \"cap\",\r\n fontSize: \"18px\",\r\n lineHeight: \"0px\", /* 0% */\r\n width: \"100%\"\r\n }\r\n },\r\n heroBoxText: {\r\n color: \"#2D2D2D\",\r\n fontFamily: \"Rubik\",\r\n fontSize: \"20px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"400\",\r\n lineHeight: \"32px\" /* 160% */,\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n textAlign: \"center\",\r\n fontSize: \"13px\",\r\n lineHeight: \"normal\",\r\n width: \"100%\"\r\n }\r\n },\r\n videoWrapper: {\r\n [theme.breakpoints.down(mobileBreakpoint)]: {\r\n aspectRatio: \"16 / 9\",\r\n width: \"100%\"\r\n }\r\n },\r\n youtube: {\r\n width: \"700px\",\r\n height: \"368px\",\r\n border: 0,\r\n borderRadius: 6,\r\n [theme.breakpoints.down(1400)]: {\r\n width: \"450px\",\r\n height: \"234px\"\r\n },\r\n [theme.breakpoints.between(1400, 1700)]: {\r\n width: \"550px\",\r\n height: \"286px\"\r\n },\r\n [theme.breakpoints.down(mobileBreakpoint)]: {\r\n width: \"100%\",\r\n height: \"100%\"\r\n }\r\n },\r\n searchWrapper: {\r\n display: \"flex\",\r\n padding: \"40px 0px 75px 0px\",\r\n alignItems: \"center\",\r\n gap: \"60px\",\r\n width: \"auto\",\r\n maxWidth: \"1400px\",\r\n [theme.breakpoints.down(tabletBreakpoint)]: {\r\n flexDirection: \"column-reverse\",\r\n maxWidth: \"100%\"\r\n }\r\n },\r\n search: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"55px\",\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n flexDirection: \"column\"\r\n }\r\n },\r\n section2Wrapper: {\r\n flex: \"0 0 100%\",\r\n backgroundColor: \"#F8F8F8\",\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n paddingTop: \"75px\",\r\n paddingBottom: \"75px\"\r\n },\r\n section2: {\r\n width: \"80%\",\r\n height: \"auto\",\r\n flexShrink: 0,\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n flexDirection: \"column\",\r\n paddingLeft: \"10%\",\r\n paddingRight: \"10%\",\r\n gap: 50,\r\n [theme.breakpoints.between(mobileBreakpoint, mobileMenuBreakpoint)]: {\r\n maxWidth: \"550px\",\r\n width: \"100%\",\r\n paddingLeft: \"0%\",\r\n paddingRight: \"0%\"\r\n },\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n width: \"80%\"\r\n }\r\n },\r\n section2Text: {\r\n maxWidth: \"782px\",\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"20px\"\r\n },\r\n holders: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n justifyContent: \"center\",\r\n gap: \"30px\",\r\n maxWidth: \"1399px\",\r\n [theme.breakpoints.down(mobileBreakpoint)]: {\r\n width: \"100%\"\r\n },\r\n [theme.breakpoints.down(mobileMenuBreakpoint)]: {\r\n alignItems: \"center\",\r\n flexDirection: \"column\"\r\n }\r\n },\r\n section3: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n width: \"80%\",\r\n flexDirection: \"column\",\r\n paddingTop: 40,\r\n paddingBottom: 40\r\n },\r\n [theme.breakpoints.between(mobileBreakpoint, mobileMenuBreakpoint)]: {\r\n width: \"50%\"\r\n }\r\n },\r\n section3Wrappper: {\r\n width: \"50%\",\r\n maxWidth: \"618px\",\r\n height: \"550px\",\r\n flexShrink: 0,\r\n backgroundColor: \"#FFF\",\r\n display: \"flex\",\r\n justifyContent: \"flex-start\",\r\n alignItems: \"center\",\r\n paddingLeft: \"60px\",\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n padding: 0,\r\n width: \"100%\",\r\n height: \"auto\",\r\n maxWidth: \"unset\"\r\n }\r\n },\r\n section3TextBox: {\r\n display: \"inlineFlex\",\r\n flexDirection: \"column\",\r\n alignItems: \"flex-start\",\r\n gap: \"5px\",\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n flexWrap: \"wrap\",\r\n justifyContent: \"center\"\r\n }\r\n },\r\n customSolutionImg: {\r\n width: \"956px\",\r\n height: \"545px\",\r\n flexShrink: 0,\r\n objectFit: \"cover\",\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n width: \"485px\",\r\n height: \"282px\"\r\n },\r\n [theme.breakpoints.down(505)]: {\r\n width: \"250px\",\r\n height: \"146px\"\r\n }\r\n },\r\n section4Wrapper: {\r\n flex: \"0 0 100%\",\r\n backgroundColor: \"#F8F8F8\",\r\n display: \"flex\",\r\n justifyContent: \"center\"\r\n },\r\n section4: {\r\n flexShrink: 0,\r\n backgroundColor: \"#F8F8F8\",\r\n width: \"80%\",\r\n paddingLeft: \"10%\",\r\n paddingRight: \"10%\",\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n flexDirection: \"column\",\r\n [theme.breakpoints.between(mobileBreakpoint, mobileMenuBreakpoint)]: {\r\n maxWidth: \"550px\",\r\n width: \"100%\",\r\n paddingLeft: \"0%\",\r\n paddingRight: \"0%\"\r\n }\r\n },\r\n section4News: {\r\n maxWidth: \"822px\",\r\n display: \"inline-flex\",\r\n paddingTop: \"75px\",\r\n flexDirection: \"column\",\r\n alignItems: \"center\",\r\n gap: \"10px\",\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n width: \"80%\",\r\n paddingTop: 40\r\n },\r\n [theme.breakpoints.between(mobileBreakpoint, mobileMenuBreakpoint)]: {\r\n width: \"100%\"\r\n }\r\n },\r\n deviceHolder: {\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n flexDirection: \"column\",\r\n marginBottom: \"60px\"\r\n },\r\n vehicleHolder: {\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n flexDirection: \"column\",\r\n marginBottom: \"150px\"\r\n },\r\n blackH2: {\r\n color: \"#2D2D2D\",\r\n fontFamily: \"Rubik\",\r\n fontSize: \"30px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"500\",\r\n lineHeight: \"40px\" /* 133.333% */,\r\n [theme.breakpoints.down(tabletBreakpoint)]: {\r\n textAlign: \"center\",\r\n fontSize: \"20px\",\r\n lineHeight: \"26.8px\"\r\n }\r\n },\r\n blackH3Medium: {\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 },\r\n blackText: {\r\n color: \"#2D2D2D\",\r\n fontFamily: \"Arial\",\r\n fontSize: \"14px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"400\",\r\n lineHeight: \"20px\", /* 142.857% */\r\n letterSpacing: \"0.5px\",\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n textAlign: \"center\"\r\n }\r\n },\r\n blackH2Roboto: {\r\n color: \"#2D2D2D\",\r\n fontSize: \"20px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"700\",\r\n lineHeight: \"40px\" /* 200% */,\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n fontSize: \"18px\",\r\n fontWeight: \"400\",\r\n lineHeight: \"32px\" /* 177.778% */\r\n }\r\n },\r\n blackH3Roboto: {\r\n color: \"#2D2D2D\",\r\n fontSize: \"20px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"700\",\r\n lineHeight: \"32px\" /* 160% */,\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n fontSize: \"16px\",\r\n fontWeight: \"500px\",\r\n lineHeight: \"normal\"\r\n }\r\n },\r\n blackArialText: {\r\n color: \"#2D2D2D\",\r\n fontFamily: \"Arial\",\r\n fontSize: \"17px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"400\",\r\n lineHeight: \"24px\", /* 141.176% */\r\n letterSpacing: \"0.5px\",\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n fontSize: \"14px\",\r\n lineHeight: \"20px\"/* 142.857% */\r\n }\r\n },\r\n holderTextBox: {\r\n backgroundColor: \"blue\",\r\n borderRadius: \"0px 0px 6px 6px\",\r\n background: \"#FFF\",\r\n height: \"128px\",\r\n paddingTop: 20,\r\n paddingBottom: 20,\r\n marginTop: -5,\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n alignItems: \"center\",\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n height: \"auto\",\r\n alignItems: \"flex-start\",\r\n paddingLeft: \"20px\"\r\n }\r\n },\r\n section3Button: {\r\n /* M3/label/medium */\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 textTransform: \"none\",\r\n color: \"#2d2d2d\"\r\n },\r\n section1Button: {\r\n display: \"flex\",\r\n padding: \"10px 20px\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n gap: \"10px\",\r\n borderRadius: \"4px\",\r\n background: \"#F09057\",\r\n textDecoration: \"none\"\r\n },\r\n alignTextCenter: {\r\n [theme.breakpoints.down(tabletBreakpoint)]: {\r\n textAlign: \"center\"\r\n }\r\n },\r\n thumbNailIndicator: {\r\n width: \"30px\",\r\n height: \"30px\",\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\"\r\n },\r\n thumbNailIndicatorCircle: {\r\n \"&.MuiButton-root\": {\r\n width: 12.5,\r\n height: 12.5,\r\n borderRadius: \"50%\",\r\n minWidth: 0,\r\n padding: 0\r\n },\r\n \"&.MuiButton-contained\": {\r\n backgroundColor: \"black\"\r\n }\r\n },\r\n heroWrapper: {\r\n display: \"flex\",\r\n flex: \"0 0 100%\",\r\n overflow: \"hidden\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n maxWidth: \"100%\",\r\n backgroundImage: \"url(/files/ImagesStatic/Hero/1920.webp)\",\r\n backgroundPosition: \"center center\",\r\n backgroundSize: \"cover\",\r\n height: \"351px\",\r\n [theme.breakpoints.up(mobileMenuBreakpoint)]: {\r\n height: \"600px\"\r\n },\r\n [theme.breakpoints.between(desktopBreakpoint, 2560)]: {\r\n backgroundImage: \"url(/files/ImagesStatic/Hero/2560.webp)\"\r\n },\r\n [theme.breakpoints.up(2560)]: {\r\n backgroundImage: \"url(/files/ImagesStatic/Hero/3840.webp)\"\r\n },\r\n [theme.breakpoints.down(mobileBreakpoint)]: {\r\n backgroundImage: \"url(/files/ImagesStatic/Hero/768.webp)\"\r\n }\r\n },\r\n fadeIn: {\r\n animation: \"$fadeIn 500ms ease-in\"\r\n },\r\n newsWrapper: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n alignItems: \"center\",\r\n marginTop: \"40px\",\r\n marginBottom: \"40px\"\r\n },\r\n selectorWrapper: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n justifyContent: \"center\",\r\n flex: \"1 0 235px\"\r\n },\r\n selectorTitle: {\r\n flex: \"0 0 100%\",\r\n height: \"48px\",\r\n textAlign: \"center\",\r\n fontFamily: \"Arial\",\r\n fontSize: \"18px\",\r\n fontWeight: 700,\r\n lineHeight: \"24px\",\r\n [theme.breakpoints.down(1700)]: {\r\n fontSize: \"16px\"\r\n }\r\n },\r\n steeringWrapper: {\r\n flex: \"0 0 250px\",\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n justifyContent: \"center\"\r\n },\r\n steering: {\r\n flex: \"0 0 200px\",\r\n marginBottom: \"10px\"\r\n },\r\n anchorButtonStyle: {\r\n fontFamily: \"Arial\",\r\n fontWeight: 700,\r\n fontSize: \"14px\",\r\n lineHeight: \"16px\",\r\n letterSpacing: \"0.5px\",\r\n padding: \"10px 20px 10px 20px\",\r\n borderRadius: \"4px\",\r\n textAlign: \"center\",\r\n textDecoration: \"none\",\r\n color: \"#2D2D2D\",\r\n backgroundColor: \"#F09057\",\r\n marginTop: \"10px\",\r\n maxWidth: \"60%\",\r\n transition: \"all 0.1s ease-in\",\r\n \"&:hover\": {\r\n backgroundColor: \"#ef7830\"\r\n }\r\n },\r\n downloadAnchor: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: \"5px\",\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 borderBottom: \"1px solid transparent\",\r\n \"&:hover\": {\r\n borderBottom: \"1px solid #F09057\"\r\n }\r\n },\r\n \"@keyframes fadeIn\": {\r\n \"0%\": { opacity: 0, transform: \"translateX(-15px)\" },\r\n \"100%\": { opacity: 1, transform: \"translateX(0)\" }\r\n },\r\n fadeOut: {\r\n animation: \"$fadeOut 500ms ease-out\"\r\n },\r\n \"@keyframes fadeOut\": {\r\n \"0%\": { opacity: 1, transform: \"translateX(0)\" },\r\n \"100%\": { opacity: 0, transform: \"translateX(15px)\" }\r\n },\r\n readmore: {\r\n display: \"flex\",\r\n width: \"auto\",\r\n alignItems: \"center\",\r\n gap: \"5px\",\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 [theme.breakpoints.up(desktopBreakpoint)]: {\r\n display: \"inline-block\",\r\n position: \"relative\",\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 borderBottom: \"2px solid #F09057\"\r\n }\r\n },\r\n readmoreParent: {\r\n display: \"flex\",\r\n marginTop: \"8px\",\r\n [theme.breakpoints.down(tabletBreakpoint)]: {\r\n justifyContent: \"center\"\r\n }\r\n },\r\n downloadCatalog: {\r\n textDecoration: \"none\",\r\n [theme.breakpoints.up(desktopBreakpoint)]: {\r\n display: \"inline-block\",\r\n position: \"relative\",\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 borderBottom: \"2px solid #F09057\"\r\n }\r\n },\r\n imageGrid: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"repeat(2, 1fr)\",\r\n gap: \"5px\",\r\n marginBottom: \"16px\"\r\n },\r\n imageGridItem: {\r\n gridColumn: \"span 1\",\r\n \"&:last-child\": {\r\n gridColumn: \"span 2\"\r\n }\r\n },\r\n imageGridItemImage: {\r\n display: \"block\",\r\n width: \"100%\",\r\n borderRadius: \"4px\"\r\n }\r\n}))\r\n","import { desktopBreakpoint, mobileMenuBreakpoint } from \"../../../lib/helper/viewportHelper\"\r\nimport { makeStyles } from \"@mui/styles\"\r\n\r\nexport default makeStyles(theme => ({\r\n outerWrapper: {\r\n flex: \"0 1 446px\",\r\n [theme.breakpoints.down(mobileMenuBreakpoint)]: {\r\n flex: \"1 1 auto\"\r\n }\r\n },\r\n holderWrapper: {\r\n display: \"flex\",\r\n flex: \"0 1 446px\",\r\n height: \"100%\",\r\n flexDirection: \"column\",\r\n overflow: \"hidden\",\r\n borderRadius: 10,\r\n boxShadow: \"0px 0px 20px 0px rgba(45, 45, 45, 0.1)\"\r\n // [theme.breakpoints.down(mobileMenuBreakpoint)]: {\r\n // height: \"auto\"\r\n // }\r\n },\r\n holderTextBox: {\r\n flex: \"1 1 auto\",\r\n backgroundColor: \"#FFFFFF\",\r\n background: \"#FFF\",\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n alignItems: \"center\",\r\n padding: \"20px\",\r\n textAlign: \"center\",\r\n justifyContent: \"space-between\",\r\n gap: \"10px\",\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n height: \"auto\"\r\n }\r\n },\r\n blackH3Roboto: {\r\n color: \"#2D2D2D\",\r\n fontSize: \"20px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"700\",\r\n lineHeight: \"32px\" /* 160% */,\r\n marginBottom: \"5px\",\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n fontSize: \"16px\",\r\n fontWeight: \"500px\",\r\n lineHeight: \"normal\"\r\n }\r\n },\r\n blackArialText: {\r\n color: \"#2D2D2D\",\r\n fontFamily: \"Arial\",\r\n fontSize: \"17px\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"400\",\r\n lineHeight: \"24px\", /* 141.176% */\r\n letterSpacing: \"0.5px\",\r\n [theme.breakpoints.down(desktopBreakpoint)]: {\r\n fontSize: \"14px\",\r\n lineHeight: \"20px\"/* 142.857% */\r\n }\r\n },\r\n link: {\r\n fontFamily: \"Arial\",\r\n fontSize: \"14px\",\r\n fontWeight: 700,\r\n letterSpacing: \"0.5px\",\r\n textAlign: \"left\",\r\n color: \"#2D2D2D\",\r\n textDecoration: \"none\",\r\n paddingBottom: \"2px\",\r\n [theme.breakpoints.up(desktopBreakpoint)]: {\r\n position: \"relative\",\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 }\r\n}))\r\n","import useStyles from \"./Holder.styles\"\r\nimport { useLanguage } from \"../../../lib/hooks/languageHooks\"\r\nimport React from \"react\"\r\nimport {\r\n Box, Typography\r\n} from \"@mui/material\"\r\nimport { Link } from \"react-router-dom\"\r\n\r\nconst HolderElement = ({\r\n id, src, isDesktop, alt, title, text, link\r\n}) => {\r\n const classes = useStyles()\r\n const lang = useLanguage()\r\n\r\n return (\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,\r\n microBreakpoint, 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: \"100%\"\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 { NavLink } from \"react-router-dom\"\r\nimport React from \"react\"\r\n\r\nconst NewsCard = ({ item, type, language }) => {\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 {isDesktop\r\n ? (\r\n \r\n {Localization.readMore}\r\n \r\n )\r\n : (\r\n \r\n {Localization.readMore}\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n {Localization.new}\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\n// eslint-disable-next-line import/no-cycle\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 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\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\r\n return (\r\n {title}
\r\n\r\n {list.map(item =>
\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 {Localization.readMore}\r\n \r\n
\r\n {isTablet && (\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 \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
\r\n // {icons[String(icon)]}\r\n //
\r\n )\r\n}\r\n\r\nOrderStepIcon.propTypes = {\r\n /**\r\n * Whether this step is active.\r\n */\r\n active: PropTypes.bool,\r\n /**\r\n * Mark the step as completed. Is passed to child components.\r\n */\r\n completed: PropTypes.bool,\r\n /**\r\n * The label displayed in the step icon.\r\n */\r\n icon: PropTypes.node\r\n};\r\n\r\nexport default OrderStepIcon\r\n","import { makeStyles } from \"@mui/styles\"\r\n\r\nexport default makeStyles(theme => ({\r\n cartContainerRow: {\r\n backgroundColor: theme.palette.background.paper,\r\n paddingTop: 0,\r\n paddingBottom: 0\r\n },\r\n content: {\r\n width: \"100%\",\r\n backgroundColor: \"#f3f3f3\" // theme.palette.background.default,\r\n },\r\n cartItemsContainer: {\r\n padding: 16\r\n },\r\n flexLeft: {\r\n justifyContent: \"flex-end\",\r\n display: \"flex\"\r\n },\r\n headerArea: {\r\n width: \"100%\",\r\n height: 100\r\n },\r\n capitalize: {\r\n textTransform: \"uppercase\"\r\n },\r\n root: {\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n flexGrow: 1,\r\n justifyContent: \"center\",\r\n margin: theme.spacing(4)\r\n },\r\n flexRow: {\r\n display: \"flex\",\r\n flexDirection: \"row\"\r\n },\r\n flexColumn: {\r\n display: \"flex\",\r\n flexDirection: \"column\"\r\n },\r\n marginBottomTheme2: {\r\n marginBottom: theme.spacing(2)\r\n },\r\n flexGrow1: {\r\n flexGrow: 1\r\n },\r\n flexBetween: {\r\n justifyContent: \"space-between\"\r\n },\r\n flexCenter: {\r\n justifyContent: \"center\"\r\n },\r\n half: {\r\n width: \"50%\"\r\n },\r\n orderDetails: {\r\n width: 250\r\n },\r\n orderSummary: {\r\n width: 150\r\n },\r\n summaryButtons: {\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n flexGrow: 1,\r\n width: \"50%\",\r\n justifyContent: \"center\"\r\n },\r\n mobileSummaryButtons: {\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n flexGrow: 1,\r\n justifyContent: \"center\"\r\n },\r\n itemsCenter: {\r\n alignItems: \"center\"\r\n },\r\n summaryMain: {\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n width: \"60%\",\r\n justifyContent: \"space-between\",\r\n gap: \"1rem\"\r\n },\r\n topButtonWrapper: {\r\n display: \"flex\",\r\n justifyContent: \"flex-end\"\r\n }\r\n}))\r\n","/* eslint-disable no-restricted-globals */\r\nimport useStyles from \"./styles\"\r\nimport { formatPrice } from \"../../../lib/helper/numberHelper\"\r\nimport { strings as Localization } from \"../../../lib/Localization\"\r\nimport { deleteCartRow, editCartNote, setQuantity } from \"../../../redux/cartSlice\"\r\nimport { useProductsLoading } from \"../../../redux/hook/productHooks\"\r\nimport FavoriteButton from \"../../Favorites/FavoriteButton\"\r\nimport CompatibleModels from \"../../Products/ProductInfo/components/CompatibleModels/CompatibleModels\"\r\nimport { mobileBreakpoint } from \"../../../lib/helper/viewportHelper\"\r\nimport theme from \"../../../theme\"\r\nimport { useLanguage } from \"../../../lib/hooks/languageHooks\"\r\nimport {\r\n Accordion, AccordionDetails, AccordionSummary,\r\n IconButton,\r\n TextField, Tooltip, Typography,\r\n useMediaQuery,\r\n Skeleton\r\n} from \"@mui/material\"\r\nimport DeleteIcon from \"@mui/icons-material/Delete\"\r\nimport ExpandMoreIcon from \"@mui/icons-material/ExpandMore\"\r\n\r\nimport classnames from \"classnames\"\r\nimport React from \"react\"\r\nimport { useDispatch } from \"react-redux\"\r\nimport { Link } from \"react-router-dom\"\r\n\r\nconst MobileCartItem = ({\r\n id, price, currency, quantity, isModifiable, index, text, product\r\n}) => {\r\n const classes = useStyles()\r\n const loading = useProductsLoading()\r\n const dispatch = useDispatch()\r\n const isTablet = useMediaQuery(theme.breakpoints.up(mobileBreakpoint))\r\n const lang = useLanguage()\r\n\r\n const quantityChanged = e => {\r\n const n = e.target.value !== \"\" ? e.target.value : 0\r\n const isNumber = !isNaN(parseFloat(n)) && isFinite(n)\r\n if (!isNumber) return\r\n const parsed = parseInt(n, 10)\r\n dispatch(setQuantity(parsed, index))\r\n }\r\n\r\n const deleteProduct = () => {\r\n dispatch(deleteCartRow(index))\r\n }\r\n\r\n const noteChanged = e => {\r\n const t = e.target.value\r\n dispatch(editCartNote(t, index))\r\n }\r\n\r\n // Product is not yet loaded..\r\n if (product === undefined && loading) {\r\n return (\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 { emptyCart, 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 {\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(open => !open)\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, properties], 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 {/* { 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\n// eslint-disable-next-line import/no-cycle\r\nimport { LeftRightSteeringFilter } from \"../../AutocompleteSearch\"\r\n// eslint-disable-next-line import/no-cycle\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 useCookiesConsent from \"../../../redux/hook/gdprHooks\"\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 const acceptedCookies = useCookiesConsent()\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\n// eslint-disable-next-line import/no-cycle\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 useCookiesConsent from \"../../../redux/hook/gdprHooks\"\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 acceptedCookies = useCookiesConsent()\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\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}));\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 { useProxyPath } from \"../../../redux/hook/settingsHooks\"\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 proxyPath = useProxyPath()\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 \r\n {/* {Localization.published}: */}\r\n {new Date(data.dateTime).toLocaleDateString()}\r\n \r\n {data.video\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 }\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default User\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","import { 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 handleFormSubmit = () => {\r\n if (csvFile) submit();\r\n }\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 isNumber = (\r\n !isNaN(parseFloat(row.quantity))\r\n && isFinite(row.quantity)\r\n );\r\n\r\n if (isNumber) {\r\n successfulRows.push(\r\n {\r\n ...row,\r\n quantity: parseInt(row.quantity, 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 = function (e) {\r\n const text = e.target.result;\r\n const delim = text.includes(\";\") ? \";\" : \",\";\r\n const { success, successfulRows, failedRows } = 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 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.ifYouWantToWithdrawConsent}\r\n dispatch(withdrawCookiesConsent())}>\r\n {Localization.here}\r\n \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 { tabletBreakpoint } from \"../../lib/helper/viewportHelper\"\r\nimport { makeStyles } from \"@mui/styles\"\r\n\r\nexport default makeStyles(theme => ({\r\n container: {\r\n padding: theme.spacing(3),\r\n minWidth: theme.spacing(80),\r\n backgroundColor: theme.palette.grey[200],\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n flexDirection: \"column\",\r\n [theme.breakpoints.down(tabletBreakpoint)]: {\r\n minWidth: \"80%\"\r\n }\r\n },\r\n buttonBox: {\r\n display: \"flex\",\r\n justifyContent: \"space-between\"\r\n },\r\n buttonContainer: {\r\n display: \"flex\",\r\n alignItems: \"flex-end\"\r\n },\r\n maxWidth600: {\r\n maxWidth: 600\r\n }\r\n}))\r\n","import useStyles from \"./styles\"\r\nimport { strings as Localization } from \"../../lib/Localization\"\r\nimport { acceptCookies } from \"../../redux/gdprSlice\"\r\nimport useCookiesConsent from \"../../redux/hook/gdprHooks\"\r\nimport React from \"react\"\r\nimport {\r\n Snackbar,\r\n Link,\r\n Button,\r\n Typography,\r\n Paper,\r\n FormControlLabel,\r\n Checkbox,\r\n Box\r\n} from \"@mui/material\"\r\nimport { useDispatch } from \"react-redux\"\r\n\r\nconst GDPRWarning = () => {\r\n const [hasReadTerms, setHasReadTerms] = React.useState(false)\r\n const dispatch = useDispatch()\r\n const hasAllowedCookies = useCookiesConsent()\r\n const classes = useStyles()\r\n\r\n const handleAccept = () => {\r\n dispatch(acceptCookies())\r\n }\r\n\r\n const handleCheckboxChanged = event => {\r\n setHasReadTerms(event.target.checked)\r\n }\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
\r\n {Localization.yourFavorites} \r\n
\r\n - \r\n {compareProds.map(prod => (\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{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\n/* eslint-disable no-unused-vars */\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, useEffect } 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 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\n// eslint-disable-next-line import/no-cycle\r\nimport { useLanguage } from \"../../lib/hooks/languageHooks\"\r\nimport theme from \"../../theme\"\r\nimport { desktopBreakpoint, mobileMenuBreakpoint } from \"../../lib/helper/viewportHelper\"\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\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\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 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","/* eslint-disable react/jsx-filename-extension */\r\n/* eslint-disable max-len */\r\n/* eslint-disable no-unused-vars */\r\nimport useStyles from \"./styles\"\r\nimport theme from \"./theme\"\r\nimport { useLanguage } from \"./lib/hooks/languageHooks\"\r\nimport { strings as Localization } from \"./lib/Localization\"\r\nimport { clearCustomerOrderErrors } from \"./redux/customerOrderReducer\"\r\nimport useErrors from \"./redux/hook/errorHooks\"\r\nimport { useIsUserAuthorized } from \"./redux/hook/userHooks\"\r\nimport { saveReducers } from \"./redux/localStorage\"\r\nimport { clearPriceErrors } from \"./redux/priceSlice\"\r\nimport { store, persistor } from \"./redux/store\"\r\nimport ProclipAndHolders from \"./components/ProclipAndHolders/ProclipAndHolders\"\r\nimport ProductDevelopment from \"./components/ProductDevelopment/ProductDevelopment\"\r\nimport { tabletBreakpoint } from \"./lib/helper/viewportHelper\"\r\nimport About from \"./components/About/About\"\r\nimport RouteChangeTracker from \"./components/RouteChangeTracker/RouteChangeTracker\"\r\nimport QuickShop from \"./components/SpeedOrder/QuickShop\"\r\nimport WelcomeSplash from \"./components/Welcomesplash/WelcomeSplash\"\r\nimport ErrorPage from \"./components/ErrorPage/ErrorPage\"\r\nimport { useLogFrontendErrorMutation } from \"./redux/services/broditWebApi\"\r\nimport Career from \"./components/Career/Career\"\r\nimport CategoriesPage from \"./components/CategoriesPage/CategoriesPage\"\r\nimport ContactPage from \"./components/ContactPage/ContactPage\"\r\nimport { ErrorBoundary } from \"react-error-boundary\"\r\nimport { Helmet } from \"react-helmet\"\r\nimport {\r\n Box, StyledEngineProvider, ThemeProvider, useMediaQuery\r\n} from \"@mui/material\"\r\nimport { useDispatch } from \"react-redux\"\r\nimport {\r\n BrowserRouter as Router, Route, Routes, Navigate, useLocation\r\n} from \"react-router-dom\"\r\nimport React, { lazy } from \"react\"\r\nimport { PersistGate } from \"redux-persist/integration/react\"\r\n\r\nconst CompareOverview = lazy(() => import(\"./components/CompareOverview/CompareOverview\"))\r\nconst CompareProducts = lazy(() => import(\"./components/CompareProducts/CompareProducts\"))\r\nconst CustomerOrderInfo = lazy(() => import(\"./components/CustomerOrders/CustomerOrderInfo/CustomerOrderInfo\"))\r\nconst CustomerOrders = lazy(() => import(\"./components/CustomerOrders/CustomerOrders\"))\r\nconst DynamicContentPage = lazy(() => import(\"./components/DynamicContentPage/DynamicContentPage\"))\r\nconst ErrorMessage = lazy(() => import(\"./components/ErrorMessage/ErrorMessage\"))\r\nconst FavoriteProductsPage = lazy(() => import(\"./components/Favorites/FavoriteProductPage/FavoriteProductsPage\"))\r\nconst FileDownload = lazy(() => import(\"./components/FileDownload/FileDownload\"))\r\nconst FilterMetaDescription = lazy(() => import(\"./components/MetaData/FilterMetaDescription\"))\r\nconst FilterProducts = lazy(() => import(\"./components/Products/FilterProducts/FilterProducts\"))\r\nconst FlashMessage = lazy(() => import(\"./components/FlashMessage/FlashMessage\"))\r\nconst Footer = lazy(() => import(\"./components/Footer/Footer\"))\r\nconst GDPRWarning = lazy(() => import(\"./components/GDPRWarning/GDPRWarning\"))\r\nconst Home = lazy(() => import(\"./components/Home/Home\"))\r\nconst LandingPageMetaDescription = lazy(() => import(\"./components/MetaData/LandingPageMetaDescription\"))\r\nconst MessageNotification = lazy(() => import(\"./components/MessageNotification/MessageNotification\"))\r\nconst Navbar = lazy(() => import(\"./components/Navbar/Navbar\"))\r\nconst NewsLetter = lazy(() => import(\"./components/NewsLetter/NewsLetter\"))\r\nconst NewsListPage = lazy(() => import(\"./components/News/NewsListPage/NewsListPage\"))\r\nconst NewsMetaDescription = lazy(() => import(\"./components/MetaData/NewsMetaDescription\"))\r\nconst NewsPage = lazy(() => import(\"./components/News/NewsPage/NewsPage\"))\r\nconst NotFound = lazy(() => import(\"./components/NotFound/NotFound\"))\r\nconst Order = lazy(() => import(\"./components/Order/Order\"))\r\nconst OrderUpload = lazy(() => import(\"./components/OrderUpload/OrderUpload\"))\r\nconst Page = lazy(() => import(\"./components/Page/Page\"))\r\nconst ProclipMetaDescription = lazy(() => import(\"./components/MetaData/ProclipMetaDescription\"))\r\nconst ProductInfo = lazy(() => import(\"./components/Products/ProductInfo\"))\r\nconst ResetPassword = lazy(() => import(\"./components/ResetPassword/ResetPassword\"))\r\nconst SignIn = lazy(() => import(\"./components/SignIn/SignIn\"))\r\nconst SignInMetaDescription = lazy(() => import(\"./components/MetaData/SignInMetaDescription\"))\r\nconst SpeedOrder = lazy(() => import(\"./components/SpeedOrder/SpeedOrder\"))\r\nconst SpeedOrderNavbar = lazy(() => import(\"./components/SpeedOrder/SpeedOrderNavbar\"))\r\nconst StateHandler = lazy(() => import(\"./components/StateHandler/StateHandler\"))\r\nconst User = lazy(() => import(\"./components/User/User\"))\r\nconst VehicleNewsListPage = lazy(() => import(\"./components/News/VehicleNewsListPage/VehicleNewsListPage\"))\r\nconst WithdrawCookiesConsent = lazy(() => import(\"./components/WithdrawCookiesConsent/WithdrawCookiesConsent\"))\r\n\r\n// https://dev.to/link2twenty/react-redux-and-localstorage-2lih\r\n// https://medium.com/edonec/redux-can-be-made-easier-with-redux-toolkit-b1d2d17b90ba\r\n\r\nconst App = () => {\r\n const classes = useStyles()\r\n const language = useLanguage()\r\n const isAuthorized = useIsUserAuthorized()\r\n const errors = useErrors()\r\n const dispatch = useDispatch()\r\n const isTablet = useMediaQuery(theme.breakpoints.down(tabletBreakpoint))\r\n const [logFrontendError] = useLogFrontendErrorMutation()\r\n const location = useLocation()\r\n\r\n Localization.setLanguage(language)\r\n store.subscribe(() => saveReducers(store.getState()))\r\n\r\n const handleCloseError = () => {\r\n dispatch(clearPriceErrors())\r\n dispatch(clearCustomerOrderErrors())\r\n }\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 \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