\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default NavbarMenu;\r\n","import { mobileBreakpoint, tabletBreakpoint } from \"../../lib/helper/viewportHelper\"\r\nimport { makeStyles } from \"@material-ui/core/styles\"\r\n\r\nconst menuWidth = \"fit-content\"\r\n\r\nexport default makeStyles(theme => ({\r\n appBar: {\r\n boxShadow: \"none\",\r\n borderBottom: \"1px solid rgba(0, 0, 0, 0.12)\",\r\n width: \"100%\",\r\n [theme.breakpoints.up(mobileBreakpoint)]: {\r\n marginLeft: 0\r\n }\r\n },\r\n image: {\r\n marginRight: \"10px\"\r\n },\r\n productButton: {\r\n minWidth: 140,\r\n fontSize: \"1rem\"\r\n },\r\n mobileMenuButton: {\r\n justifyContent: \"flex-start\",\r\n display: \"flex\"\r\n },\r\n searchArea: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n paddingLeft: \"1rem\",\r\n gap: 8,\r\n marginRight: 8,\r\n [theme.breakpoints.down(\"lg\")]: {\r\n justifyContent: \"flex-end\"\r\n }\r\n },\r\n flexContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n boxSizing: \"border-box\",\r\n width: \"100%\"\r\n },\r\n desktopSearchAreaBox: {\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n width: \"100%\"\r\n },\r\n flexWrap: {\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n flexWrap: \"wrap\"\r\n },\r\n toolbar: {\r\n display: \"flex\",\r\n width: \"100%\",\r\n maxWidth: 1600,\r\n margin: \"5px auto\",\r\n alignItems: \"flex-start\",\r\n [theme.breakpoints.down(tabletBreakpoint)]: {\r\n alignItems: \"center\"\r\n }\r\n },\r\n logo: {\r\n height: \"80px\",\r\n margin: \"10px\"\r\n },\r\n drawerPaper: {\r\n position: \"relative\",\r\n whiteSpace: \"nowrap\",\r\n width: menuWidth,\r\n color: \"#404040\",\r\n [theme.breakpoints.down(mobileBreakpoint)]: {\r\n width: \"auto\"\r\n }\r\n },\r\n badgePos: {\r\n transform: \"scale(1) translate(60%, 0%)\"\r\n },\r\n badge: {\r\n height: 25,\r\n minWidth: 25,\r\n fontSize: \"0.85rem\",\r\n borderRadius: 15\r\n },\r\n leftRightFilter: {\r\n width: 75,\r\n height: 60,\r\n paddingLeft: 4,\r\n marginTop: 4\r\n },\r\n flexRow: {\r\n display: \"flex\",\r\n flexDirection: \"row\"\r\n }\r\n}))\r\n","import { makeStyles } from \"@material-ui/core/styles\"\r\n\r\nexport default makeStyles(() => ({\r\n fieldMargin: {\r\n margin: \"5px 0px 5px\"\r\n }\r\n}))\r\n","/* eslint-disable no-param-reassign */\r\nimport { strings as Localization } from \"../Localization\"\r\n\r\nexport const brandsNameCompare = (brandNameA, brandNameB) => {\r\n // Force \"Other models\" to the top.\r\n if (brandNameA === Localization.otherModels) {\r\n return -1\r\n } if (brandNameB === Localization.otherModels) {\r\n return 1\r\n }\r\n return brandNameA.localeCompare(brandNameB)\r\n}\r\n\r\nexport const sortBrands = brandList => [...brandList].sort(\r\n (a, b) => brandsNameCompare(a.name, b.name)\r\n)\r\n\r\nexport const replaceNameForBrandOther = brandList => {\r\n // Make the result mutable\r\n const result = [...brandList.map(\r\n brand => ({ ...brand })\r\n )]\r\n\r\n // Replace the name of \",\" brand.\r\n const otherBrandIndex = result.findIndex(\r\n brand => brand.name === \",\"\r\n )\r\n if (otherBrandIndex !== -1) {\r\n result[otherBrandIndex].name = Localization.otherModels\r\n }\r\n\r\n return result\r\n}\r\n\r\nexport const restoreNameForBrandOther = brandNames => {\r\n // Make the result mutable\r\n const result = [...brandNames]\r\n\r\n // Replace the name of \",\" brand.\r\n const otherBrandIndex = result.findIndex(\r\n brandName => brandName === Localization.otherModels\r\n )\r\n if (otherBrandIndex !== -1) {\r\n result[otherBrandIndex] = \",\"\r\n }\r\n\r\n return result\r\n}\r\n\r\n// Is used by brands, models and years.\r\nexport const GroupByName = brandList => {\r\n const combinedBrands = brandList.reduce(\r\n (result, brand) => {\r\n const groupBy = brand.name\r\n const name = brand.name\r\n const value = [...(result[groupBy]?.value ?? []), brand]\r\n result[groupBy] = { id: name, name, value }\r\n\r\n return result\r\n },\r\n {}\r\n )\r\n\r\n return Object.values(combinedBrands)\r\n}\r\n\r\n/**\r\n * Searches through a list of items and attempts to find all items,\r\n * whose specified attribute is, present in the list of identifiers.\r\n * @param {*} identifiers The list of identifiers.\r\n * @param {*} items The list of items being \"filtered\"/searched.\r\n * @param {*} attributeToCompare Specifies a function for extracting an\r\n * attribute from the item. Used to match nested attributes against identifiers.\r\n * @returns A list of two items.\r\n * First item: A list of the items who matched against the identifiers.\r\n * Second item: A list of the identifiers without a match.\r\n */\r\n// Används inte just nu finns därför inte tester för denna\r\nexport const findItemsUsingIdentifier = (\r\n identifiers,\r\n items,\r\n attributeToCompare = (item => item)\r\n) => {\r\n const noMatchIds = [...(identifiers ?? [])]\r\n return [\r\n (\r\n items.filter(\r\n item => {\r\n const itemAttribute = attributeToCompare(item)\r\n const hasMatch = (identifiers ?? []).includes(itemAttribute)\r\n if (hasMatch) noMatchIds.splice(noMatchIds.indexOf(itemAttribute), 1)\r\n return hasMatch\r\n }\r\n )\r\n ),\r\n noMatchIds\r\n ]\r\n}\r\n\r\n/**\r\n * Finds the name of each object with a corresponding id.\r\n * @param {*} brandIds The ids to find the names for.\r\n * @param {*} allBrands The list of objects containing an 'id' key and a 'name' key.\r\n * @returns A list of two items.\r\n * First item: A list of names corresponding to the given ids.\r\n * Second item: A list of ids without a corresponding name.\r\n */\r\n// Används inte just nu finns därför inte tester för denna\r\nexport const findNamesFromIds = (brandIds, allBrands) => {\r\n const [matchedBrands, noMatchIds] = findItemsUsingIdentifier(\r\n brandIds,\r\n allBrands,\r\n brand => brand.id\r\n )\r\n\r\n return [\r\n matchedBrands.map(brand => brand.name),\r\n noMatchIds\r\n ]\r\n}\r\n\r\n/**\r\n * Finds the ids of each object with a corresponding name.\r\n * @param {*} brandNames The names to find the ids for.\r\n * @param {*} allBrands The list of objects containing an 'id' key and a 'name' key.\r\n * @returns A list of two items.\r\n * First item: A list of ids corresponding to the given names.\r\n * Second item: A list of names without any corresponding id.\r\n */\r\n// Används inte just nu finns därför inte tester för denna\r\nexport const findIdsFromNames = (brandNames, allBrands) => {\r\n const brandNamesLowerCase = brandNames.map(brandName => brandName.toLowerCase())\r\n const [matchedBrands, noMatchNames] = findItemsUsingIdentifier(\r\n brandNamesLowerCase,\r\n allBrands,\r\n brand => brand.name.toLowerCase()\r\n )\r\n\r\n return [\r\n matchedBrands.map(brand => brand.id),\r\n noMatchNames\r\n ]\r\n}\r\n","/* eslint-disable no-restricted-syntax */\r\nexport const mailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\r\n\r\nexport const removeTrailingSlash = str => str.replace(/\\/+$/, \"\")\r\n\r\n/**\r\n * Moves the items containing the substring the top of the list.\r\n * @param {*} a The first string.\r\n * @param {*} b The second string.\r\n * @param {*} substringToTop The substring to search for.\r\n * @returns The new order represented as an integer.\r\n */\r\nexport const moveToTopComparer = (a, b, substringToTop, fullString) => {\r\n const partialString = JSON.stringify(fullString.split(\" \").splice(0, 3))\r\n const partialA = JSON.stringify(a.split(\" \").splice(0, 3))\r\n const partialB = JSON.stringify(b.split(\" \").splice(0, 3))\r\n\r\n if (fullString === a) {\r\n return [true, -1]\r\n }\r\n\r\n const aIncludesWord = a.includes(substringToTop) || partialString === partialA\r\n const bIncludesWord = b.includes(substringToTop) || partialString === partialB\r\n\r\n if (aIncludesWord && bIncludesWord) return [true, 0]\r\n if (aIncludesWord) {\r\n return [true, -1]\r\n } if (bIncludesWord) {\r\n return [true, 1]\r\n }\r\n return [false, 0]\r\n}\r\n\r\n/**\r\n * Forces all strings that contain the words in the list to the top.\r\n * Starts with the first item. Will only move to the next word if\r\n * the previous word is present in the string.\r\n * @param a The first string.\r\n * @param b The second string.\r\n * @param words The words (in order) to be pushed to the top.\r\n * @returns A list sorted where the item containing the most\r\n * words will be moved to the top.\r\n */\r\nexport const moveWordsToTopComparer = (a, b, words) => {\r\n const fullString = words.join(\" \").trimEnd()\r\n const results = words.map(word => moveToTopComparer(a, b, word, fullString))\r\n\r\n let resultingOrder = 0\r\n results.every(result => {\r\n const [foundWord, order] = result\r\n if (!foundWord) {\r\n resultingOrder = 0\r\n return false // Breaks the loop.\r\n }\r\n if (order !== 0) {\r\n resultingOrder = order\r\n return false // Breaks the loop.\r\n }\r\n\r\n return true // Continues the loop.\r\n })\r\n\r\n return resultingOrder\r\n}\r\n\r\nexport const isProductIdRegex = /([0-9]{6})/\r\n\r\nexport const removeKey = (obj, keyRoRemove) => {\r\n // eslint-disable-next-line no-prototype-builtins\r\n if (!obj.hasOwnProperty(keyRoRemove)) {\r\n console.log(\"key doesn't exsist in obj\")\r\n return obj\r\n }\r\n const { [keyRoRemove]: foo, ...objWithRestKeys } = obj\r\n return objWithRestKeys\r\n}\r\n\r\nexport const isObjectOnlyNull = obj => {\r\n // eslint-disable-next-line no-restricted-syntax\r\n for (const key of Object.keys(obj)) {\r\n if (obj[key] !== null) {\r\n return false\r\n }\r\n }\r\n\r\n return true\r\n}\r\n\r\nfunction groupingBy(array, key) {\r\n return array.reduce((result, obj) => {\r\n // eslint-disable-next-line no-param-reassign\r\n (result[obj[key]] = result[obj[key]] || []).push(obj)\r\n return result\r\n }, {})\r\n}\r\n\r\nexport const groupBy = (arr, func) => groupingBy(arr, func)\r\n\r\nexport const findObjectById = (obj, targetId) => {\r\n // Base case: if the current object has the target ID, return the object\r\n if (obj.id === targetId) {\r\n return obj\r\n }\r\n\r\n // Check if the current object has collections\r\n if (obj.collections && obj.collections.length > 0) {\r\n // Iterate through collections and recursively search for the target ID\r\n for (const collection of obj.collections) {\r\n const foundObject = findObjectById(collection, targetId)\r\n // If the target ID is found, return the object\r\n if (foundObject) {\r\n return foundObject\r\n }\r\n }\r\n }\r\n\r\n // If the target ID is not found in the current object or its collections, return null\r\n return null\r\n}\r\n","/**\r\n* @param {*} valueObject The searchQuery object you want to remove faulty entries from.\r\n* Note: The object must follow the standard, that for each\r\n* key the value must be represented as an array, for example:\r\n* { customKeyword: [\"value1\", \"value2\", ...], anotherCustomKeyword: [\"another value\"], thirdCustomKeyword: [], ...}\r\n* @returns The searchQuery object without faulty entries. Examples of faulty\r\n* entries are keys containing empty arrays, keys containing arrays with empty strings or falsy values.\r\n*/\r\nexport const filterFaultyValues = valueObject => Object.entries(valueObject)\r\n .map(\r\n ([key, values]) => [key, values.filter(Boolean)]\r\n )\r\n .filter(\r\n // eslint-disable-next-line no-unused-vars\r\n ([_, values]) => (values && values.length > 0)\r\n ).reduce(\r\n (result, [key, values]) => ({ ...result, [key]: values }),\r\n {}\r\n )\r\n\r\n/**\r\n * Converts a URLSearchParams object into a searchQuery object.\r\n * @param {URLSearchParams} urlSearchParams A URLSearchParams object.\r\n * @returns A searchQuery object.\r\n */\r\nexport const extractSearchQueryFromUrlSearchParams = urlSearchParams => {\r\n // Convert to array.\r\n const urlEntries = [...urlSearchParams.entries()]\r\n\r\n // Convert values into arrays.\r\n const parsedEntries = urlEntries.map(([key, value]) => {\r\n // Handle \"Other models\" edge case.\r\n if (value === \",\") return [key, [value]]\r\n\r\n return [key, value.split(\",\")]\r\n })\r\n\r\n const searchQuery = parsedEntries.reduce(\r\n (result, [key, value]) => ({ ...result, [key]: value }),\r\n {}\r\n )\r\n\r\n return filterFaultyValues(searchQuery)\r\n}\r\n\r\n/**\r\n * Evaluates if a searchQuery object is empty.\r\n * @param {*} searchQueryObject A search query object.\r\n * @returns Returns true if the search query object does not contain any values.\r\n */\r\nexport const isSearchQueryEmpty = searchQueryObject => {\r\n const filteredSearchQuery = filterFaultyValues(searchQueryObject)\r\n const flatValues = Object.values(filteredSearchQuery).flat()\r\n return flatValues.length <= 0\r\n}\r\n","import { isSearchQueryEmpty } from \"../../lib/helper/searchHelper\"\r\nimport React, { useMemo } from \"react\"\r\nimport { useSelector } from \"react-redux\"\r\n\r\n/**\r\n * Combines all or the specified search queries into a single search query object.\r\n * @param {...string} searchQueryTypes The name of the search queries from\r\n * state.search.searchQueries you want to combine into a single search query.\r\n * Note: Combines all available queries if left empty.\r\n * @returns A search query object.\r\n *\r\n * @example\r\n * // Set the search queries.\r\n * dispatch(setSearchQuery({ type: \"mySearchQuery\", value: { toys: [\"Airplane\", \"Firetruck\"] } }))\r\n * dispatch(setSearchQuery({ type: \"mySecondSearchQuery\", value: { toys: [\"Racecar\"] } }))\r\n *\r\n * // Provide a type to only fetch the value of the specified type.\r\n * useSearchQuery(\"mySearchQuery\")\r\n * // #=> { toys:['Airplane', 'Firetruck'] }\r\n *\r\n * // Provide multiple types to get a combined value of the types specified.\r\n * useSearchQuery(\"mySearchQuery\", \"mySecondSearchQuery\")\r\n * // #=> { toys:['Airplane', 'Firetruck', 'Racecar'] }\r\n *\r\n * // Providing no type will combine all available types into a single value.\r\n * useSearchQuery()\r\n * // #=> { toys:['Airplane', 'Firetruck', 'Racecar'] }\r\n *\r\n */\r\nexport const useSearchQuery = (...searchQueryTypes) => {\r\n const searchQueries = useSelector(state => state.search.searchQueries)\r\n\r\n let selectedSearchQueries\r\n let dependencies\r\n if (searchQueryTypes.length > 0) {\r\n selectedSearchQueries = searchQueryTypes.reduce(\r\n (result, type) => [...result, searchQueries[type]],\r\n []\r\n )\r\n dependencies = selectedSearchQueries\r\n selectedSearchQueries = selectedSearchQueries.filter(value => Boolean(value))\r\n } else {\r\n selectedSearchQueries = Object.values(searchQueries)\r\n dependencies = [searchQueries]\r\n }\r\n\r\n const memorizedSearchQuery = React.useMemo(\r\n () => {\r\n if (selectedSearchQueries.length === 1) {\r\n return { ...selectedSearchQueries[0] }\r\n }\r\n\r\n // Combines a list of objects into a single object, where each\r\n // key in each object contains an array.\r\n //\r\n // -- Example input --\r\n // selectedSearchQueries: [\r\n // { brands: [\"a\"], models: [\"x\"] },\r\n // { brands: [\"b\"] },\r\n // ]\r\n // result => { brands: [\"a\", \"b\"], models: [\"x\"] }\r\n const searchQuery = selectedSearchQueries.reduce(\r\n (previousValue, currentValue) => {\r\n const result = { ...previousValue, ...currentValue }\r\n\r\n Object.keys(result).forEach(key => {\r\n result[key] = [\r\n ...previousValue?.[key] ?? [],\r\n ...currentValue?.[key] ?? []\r\n ]\r\n })\r\n\r\n return result\r\n },\r\n {}\r\n )\r\n\r\n Object.keys(searchQuery).forEach(key => {\r\n // Converting to and from a Set removes the duplicates.\r\n searchQuery[key] = [...new Set(searchQuery[key])]\r\n })\r\n\r\n return searchQuery\r\n },\r\n\r\n // Both the warnings about missing dependencies here are indirectly\r\n // included in the dependencies array. If \"searchQueryTypes\" or\r\n // \"selectedSearchQueries\" change, so will \"dependencies\" since\r\n // it is constructed from these two variables.\r\n dependencies\r\n )\r\n\r\n return memorizedSearchQuery\r\n}\r\n\r\n/**\r\n * Evaluates if a searchQuery object is empty.\r\n * @param {*} searchQueryObject A search query object.\r\n * @returns Returns true if the search query object does not contain any values.\r\n */\r\nexport const useIsSearchQueryEmpty = searchQueryObject => useMemo(\r\n () => isSearchQueryEmpty(searchQueryObject),\r\n [searchQueryObject]\r\n)\r\n","/* eslint-disable no-param-reassign */\r\nimport { filterFaultyValues } from \"../lib/helper/searchHelper\"\r\nimport { createSlice } from \"@reduxjs/toolkit\"\r\n\r\nconst searchSlice = createSlice({\r\n name: \"search\",\r\n reducers: {\r\n /**\r\n * Creates a new search query entry with the name of \"type\" containing\r\n * the value of \"value\".\r\n * @param {*} state The current state (using \"Immer\").\r\n * @param {object} payload An object containing two keys { type, value }.\r\n * payload.type {string} The name of the entry to create/override.\r\n * payload.value {object} The value of the search query entry.\r\n * Note: The payload.value object must follow the standard, that for each\r\n * key the value must be represented as an array, for example:\r\n * { customKeyword: [\"value1\", \"value2\", ...], anotherCustomKeyword: [\"another value\"], thirdCustomKeyword: [], ...}\r\n * Keys with faulty values, for example empty arrays and falsy values\r\n * will not be added.\r\n */\r\n setSearchQuery: (state, { payload }) => {\r\n const { type, value, clearFilter } = payload\r\n if (clearFilter) state.searchQueries = {}\r\n state.searchQueries[type] = filterFaultyValues(value)\r\n // console.log(\"(SearchReducer) setSearchQuery: \", type, value);\r\n },\r\n\r\n /**\r\n * Overrides a part of a search query entry with the name of \"type\" and\r\n * spreads in the value of \"value\".\r\n * @param {*} state The current state (using \"Immer\").\r\n * @param {object} payload An object containing two keys { type, value }.\r\n * payload.type {string} The name of the entry to create/update.\r\n * payload.value {object} The value you want to spread into the\r\n * search querys existing value.\r\n * Note: The payload.value object must follow the standard, that for each\r\n * key the value must be represented as an array, for example:\r\n * { customKeyword: [\"value1\", \"value2\", ...], anotherCustomKeyword: [\"another value\"], thirdCustomKeyword: [], ...}\r\n * Keys with faulty values, for example empty arrays and falsy values\r\n * will not be added.\r\n */\r\n updateSearchQuery: (state, { payload }) => {\r\n const { type, value } = payload\r\n\r\n const newValue = {\r\n ...state.searchQueries[type],\r\n ...value\r\n }\r\n\r\n state.searchQueries[type] = filterFaultyValues(newValue)\r\n },\r\n\r\n /**\r\n * Removes all filters in the search query.\r\n * @param {*} state The current state (using \"Immer\").\r\n * @param {object} payload (Optional) An object containing the key { exclude }.\r\n * payload.exclude {Array\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 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 {replacementProducts?.map(productId => (\r\n
- \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 \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 {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 \"@material-ui/core\"\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","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 { useProxyPath } from \"../../../redux/hook/settingsHooks\"\r\nimport { useUser, useUserAuthToken } from \"../../../redux/hook/userHooks\"\r\nimport { simulateOrder } from \"../../../redux/monitorSlice\"\r\nimport MobileProductCardOrder from \"../ProductCardOrder/MobileProductCardOrder\"\r\nimport ProductCardOrder from \"../ProductCardOrder/ProductCardOrder\"\r\nimport HeadingRow from \"../ProductCardOrder/HeadingRow/HeadingRow\"\r\nimport {\r\n Box, Button, ButtonGroup, CircularProgress, Link as SimpleLink, List, Typography, useMediaQuery, useTheme, IconButton, Tooltip\r\n} from \"@material-ui/core\"\r\nimport ArrowBackIcon from \"@material-ui/icons/ArrowBack\"\r\nimport ArrowForwardIcon from \"@material-ui/icons/ArrowForward\"\r\nimport CheckCircleOutlineIcon from \"@material-ui/icons/CheckCircleOutline\"\r\nimport InfoIcon from \"@material-ui/icons/Info\"\r\nimport ReceiptIcon from \"@material-ui/icons/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 \"@material-ui/icons/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 const proxyPath = useProxyPath()\r\n\r\n const handleNext = () => {\r\n dispatch(nextCartStep())\r\n }\r\n\r\n return (\r\n - \r\n {[...cart.items].map((item, i) => ((isSmall)\r\n ? (\r\n
- \r\n {[...cart.items].map((item, i) => (\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 isMobile ? selectCollection(collection): null}>{name} \r\n
\r\n }\r\n \r\n \r\n \r\n { toggleDrawer(); makeHistory(null) }}> \r\n \r\n\r\n { setCurrentCollection(current => current?.parent ?? current) }}>\r\n \r\n \r\n
\r\n {\r\n (loading && collectionStructure.collections.length <= 0)\r\n && (\r\n - \r\n {\r\n activeCollection.map((collection, i) => {\r\n if (collection !== undefined) {\r\n return (\r\n
- \r\n {customerOrders.map((item, i) => (\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 '@material-ui/core';\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
\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) {\r\n pageOptions = [1]\r\n }\r\n\r\n return (\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 { Box, Button, Typography } from '@material-ui/core'\r\nimport React from 'react'\r\nimport ExpandMoreIcon from \"@material-ui/icons/ExpandMore\"\r\nimport ExpandLessIcon from \"@material-ui/icons/ExpandLess\"\r\nimport classnames from 'classnames'\r\nimport useStyles from '../../styles'\r\n\r\nconst ExpandableHeader = ({ 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 \"@material-ui/core\"\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 {notInMonitor.map(article => (
\r\n
\r\n icons[String(icon)]\r\n //
\r\n )\r\n}\r\n\r\nRegisterRetailerStepIcon.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 RegisterRetailerStepIcon\r\n","import React, { useEffect, useState, useRef } from 'react';\r\nimport { strings as Localization } from '../../lib/Localization';\r\nimport {\r\n Box,\r\n Typography,\r\n TextField,\r\n Button,\r\n Checkbox,\r\n FormControlLabel,\r\n Link,\r\n Accordion,\r\n AccordionDetails,\r\n AccordionSummary,\r\n Container,\r\n FormControl,\r\n FormGroup,\r\n FormHelperText,\r\n CircularProgress,\r\n} from '@material-ui/core';\r\nimport ReCAPTCHA from \"react-google-recaptcha\";\r\n// import RegisterRetailerStepConnector from './RegisterRetailerStepConnector';\r\nimport RegisterRetailerStepIcon from './RegisterRetailerStepIcon';\r\nimport { Error, ExpandMore, Send } from '@material-ui/icons';\r\nimport { useForm } from 'react-hook-form'\r\nimport axios from 'axios';\r\nimport { setSnackbarMessage } from '../../redux/userMessageSlice';\r\nimport { useDispatch } from 'react-redux';\r\nimport { useLanguage } from '../../lib/hooks/languageHooks';\r\nimport { useRecaptchaSiteKey } from '../../redux/hook/settingsHooks';\r\n\r\nconst formDefaultValues = {\r\n companyName: \"\",\r\n organizationNumber: \"\",\r\n website: \"\",\r\n contactName: \"\",\r\n contactPhone: \"\",\r\n contactEmail: \"\",\r\n deliveryAddress: \"\",\r\n deliveryPostalCode: \"\",\r\n deliveryTown: \"\",\r\n boxDeliveryAddress: \"\",\r\n boxDeliveryPostalCode: \"\",\r\n boxDeliveryTown: \"\",\r\n billingAddress: \"\",\r\n billingPostalCode: \"\",\r\n billingTown: \"\",\r\n billingEmail: \"\",\r\n nameSign: \"\",\r\n dateSign: \"\",\r\n townSign: \"\",\r\n registrationCertificate: undefined,\r\n agreement: false,\r\n recaptcha: undefined,\r\n};\r\n\r\nconst RegisterRetailer = ({ ...props }) => {\r\n const { register, setValue, setError, clearErrors, handleSubmit, watch, formState: { errors } } = useForm({ defaultValues: formDefaultValues });\r\n const recaptchaRef = useRef()\r\n const [isLoading, setIsLoading] = useState(false);\r\n const dispatch = useDispatch();\r\n const recaptchaSiteKey = useRecaptchaSiteKey();\r\n const language = useLanguage();\r\n\r\n const onChangeRecaptcha = (value) => {\r\n if (value) {\r\n clearErrors('recaptcha')\r\n }\r\n\r\n setValue('recaptcha', value)\r\n };\r\n\r\n const onExpired = (value) => {\r\n setValue('recaptcha', undefined)\r\n }\r\n\r\n const handleRegisterRetailer = async (data) => {\r\n if (data.recaptcha === undefined) {\r\n setError(\"recaptcha\", {\r\n type: \"manual\",\r\n message: \"Please verify that you are not a robot using Recaptcha!\",\r\n })\r\n return\r\n }\r\n\r\n // Move data into a FormData object\r\n let formData = new FormData()\r\n Object.entries(data).forEach(([key, value]) => {\r\n formData.append(key, value)\r\n })\r\n formData.set(\"registrationCertificate\", data.registrationCertificate[0], data.registrationCertificate[0].name)\r\n\r\n setIsLoading(true)\r\n let status = undefined\r\n try {\r\n const response = await axios.post(\r\n `/api/Users/RegisterRetailer?token=${data.recaptcha}`\r\n , formData\r\n , { headers: { 'content-type': 'multipart/form-data' } }\r\n )\r\n status = response.status\r\n\r\n } catch (exception) {\r\n status = exception?.response?.status\r\n }\r\n setIsLoading(false)\r\n\r\n switch (status) {\r\n case 200: {\r\n dispatch(setSnackbarMessage(Localization.yourApplicationHasBeenSent, \"success\"));\r\n return\r\n }\r\n case undefined: {\r\n console.error(`Failed to send the request to register retailer.`)\r\n dispatch(setSnackbarMessage(\r\n `${Localization.couldNotConnectToTheServer}`\r\n , \"error\"\r\n ))\r\n return\r\n }\r\n case 401: {\r\n setError(\"recaptcha\", {\r\n type: \"manual\",\r\n message: \"Recaptcha returned an error whilst validating!\",\r\n })\r\n break\r\n }\r\n default: {\r\n setError(\"recaptcha\", {\r\n type: \"manual\",\r\n message: \"An error occured on the server!\",\r\n })\r\n break\r\n }\r\n }\r\n\r\n console.error(`Failed with the status of ${status} when trying to register retailer.`)\r\n setValue('recaptcha', undefined)\r\n recaptchaRef.current.reset()\r\n dispatch(setSnackbarMessage(\r\n `${Localization.aProblemOccuredWhileProccessingYourApplication} ${Localization.pleaseTryAgainLaterOrContactBroditsSupportIfTheProblemPersists}`\r\n , \"error\"\r\n ))\r\n }\r\n\r\n return (\r\n - \r\n {compareProds.map(prod => (\r\n
\r\n \r\n (\r\n \r\n \r\n )}\r\n />\r\n (\r\n \r\n \r\n )}\r\n />\r\n (\r\n \r\n \r\n )}\r\n />\r\n (\r\n \r\n \r\n )}\r\n />\r\n (\r\n \r\n \r\n )}\r\n />\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\r\n ? ( (\r\n !isAuthorized\r\n ? (\r\n \r\n {/* \r\n )\r\n : (isAuthorized\r\n ? ( (\r\n \r\n \r\n )}\r\n />\r\n (isAuthorized\r\n ? ( (isAuthorized\r\n ? ( (isAuthorized\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