@wayke-se/components-react 3.8.0 → 3.9.0-beta.1

package/dist-node/index.js

@@ -8,11 +8,12 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
+var reactI18next = require('react-i18next');
 var dateFns = require('date-fns');
 var locale = require('date-fns/locale');
+var i18next = _interopDefault(require('i18next'));
 var ReactDOM = _interopDefault(require('react-dom'));
 var reactCompoundSlider = require('react-compound-slider');
-var LazyLoad = _interopDefault(require('react-lazyload'));
 var WaykeEcomWeb = _interopDefault(require('@wayke-se/ecom-web'));
 var Slider$1 = _interopDefault(require('react-slick'));
 var scrollIntoView = _interopDefault(require('scroll-into-view-if-needed'));
@@ -194,12 +195,17 @@ const BarActive = styled__default.div.attrs(() => ({
 `;
 
 const ProgressBar = ({
-  unit,
   valueCurrent,
   valueMax
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const barWidth = valueCurrent / valueMax * 100;
-  return React__default.createElement(Wrapper$2, null, React__default.createElement(Description, null, "Visar ", valueCurrent.toString(), " av ", valueMax.toString(), " ", unit), React__default.createElement(Bar, null, React__default.createElement(BarActive, {
+  return React__default.createElement(Wrapper$2, null, React__default.createElement(Description, null, t('other.showingNumberOfResults', {
+    current: valueCurrent,
+    count: valueMax
+  })), React__default.createElement(Bar, null, React__default.createElement(BarActive, {
     style: {
       width: `${barWidth}%`
     },
@@ -491,12 +497,17 @@ const SrOnly = styled__default.div`
 const Loader = ({
   inline,
   center
-}) => React.createElement(Wrapper$3, {
-  inline: inline,
-  center: center
-}, React.createElement(Spinner, {
-  "aria-hidden": "true"
-}), React.createElement(SrOnly, null, "Laddar..."));
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  return React.createElement(Wrapper$3, {
+    inline: inline,
+    center: center
+  }, React.createElement(Spinner, {
+    "aria-hidden": "true"
+  }), React.createElement(SrOnly, null, t('other.loading')));
+};
 
 const MANUFACTURER = 'manufacturer';
 const MODEL_SERIES = 'modelSeries';
@@ -512,6 +523,7 @@ const MILEAGE = 'mileage';
 const MODEL_YEAR = 'modelYear';
 const LEASING_PRICE = 'leasingPrice';
 const BUSINESS_LEASING_PRICE = 'businessLeasingPrice';
+const ODOMETER_VALUE_AS_KM = 'odometerValueAsKm';
 const COLOR_WHITE = {
   displayName: 'Vit',
   hex: '#ffffff'
@@ -576,40 +588,6 @@ const numberSeparator = (value, n = 0, x = 3, s = ' ', c = '.') => {
   const num = value.toFixed(Math.max(0, ~~n));
   return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), `$&${s || ','}`);
 };
-const FacetIdToTitle = f => {
-  switch (f) {
-    case MANUFACTURER:
-      return 'Tillverkare';
-    case MODEL_SERIES:
-      return 'Modell';
-    case FUEL_TYPE:
-      return 'Drivmedel';
-    case GEARBOX_TYPE:
-      return 'Växellåda';
-    case SEGMENT:
-      return 'Segment';
-    case DRIVING_WHEEL:
-      return 'Drivhjul';
-    case ENVIRONMENT_CLASS:
-      return 'Miljöklass';
-    case COLOR:
-      return 'Färg';
-    case PRICE:
-      return 'Pris';
-    case BRANCH:
-      return 'Anläggning';
-    case MILEAGE:
-      return 'Miltal';
-    case MODEL_YEAR:
-      return 'Modellår';
-    case LEASING_PRICE:
-      return 'Privatleasing';
-    case BUSINESS_LEASING_PRICE:
-      return 'Företagsleasing';
-    default:
-      return f;
-  }
-};
 const dateTimeFormat = {
   YearMonth: 1,
   DayMonth: 2,
@@ -806,17 +784,22 @@ const SortSelect = ({
   options,
   onChange,
   unit
-}) => React__default.createElement(Wrapper$4, null, React__default.createElement(Select, {
-  value: value,
-  onChange: onChange,
-  title: "Sortering",
-  "aria-label": "Sortering"
-}, options.map(option => React__default.createElement(Option, {
-  key: option.value,
-  value: option.value
-}, option.displayName || option.value, unit ? ` ${unit}` : ''))), React__default.createElement(Icon, null, React__default.createElement(IconChevronDown, {
-  block: true
-})));
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  return React__default.createElement(Wrapper$4, null, React__default.createElement(Select, {
+    value: value,
+    onChange: onChange,
+    title: t('search.sortButton.text'),
+    "aria-label": t('search.sortButton.text')
+  }, options.map(option => React__default.createElement(Option, {
+    key: option.value,
+    value: option.value
+  }, option.displayName || option.value, unit ? ` ${unit}` : ''))), React__default.createElement(Icon, null, React__default.createElement(IconChevronDown, {
+    block: true
+  })));
+};
 
 const SortOptionDisplayName = {
   PublishedAsc: 'published-asc',
@@ -831,21 +814,21 @@ const SortOptionDisplayName = {
 const getTranslatedSortOptionDisplayName = str => {
   switch (str) {
     case SortOptionDisplayName.PublishedAsc:
-      return 'Publicerad äldst';
+      return i18next.t('search.sortOptions.publishedAsc');
     case SortOptionDisplayName.PublishedDesc:
-      return 'Publicerad senast';
+      return i18next.t('search.sortOptions.publishedDesc');
     case SortOptionDisplayName.PriceAsc:
-      return 'Pris lägst';
+      return i18next.t('search.sortOptions.priceAsc');
     case SortOptionDisplayName.Pricedesc:
-      return 'Pris högst';
+      return i18next.t('search.sortOptions.priceDesc');
     case SortOptionDisplayName.ModelAsc:
-      return 'Årsmodell äldst';
+      return i18next.t('search.sortOptions.modelAsc');
     case SortOptionDisplayName.Modeldesc:
-      return 'Årsmodell nyast';
+      return i18next.t('search.sortOptions.modelDesc');
     case SortOptionDisplayName.MileageAsc:
-      return 'Miltal lägst';
+      return i18next.t('search.sortOptions.mileageAsc');
     case SortOptionDisplayName.Mileagedesc:
-      return 'Miltal högst';
+      return i18next.t('search.sortOptions.mileageDesc');
     default:
       return str;
   }
@@ -867,7 +850,7 @@ const Result = ({
   const numberOfDocuments = (documents === null || documents === void 0 ? void 0 : documents.length) || 0;
   const numberOfHits = (response === null || response === void 0 ? void 0 : response.documentList.numberOfHits) || 0;
   const useSkeletons = !!(queryFilter !== null && queryFilter !== void 0 && queryFilter.concatResult);
-  const selectedSortOption = response === null || response === void 0 ? void 0 : (_response$documentLis = response.documentList.sortOptions.find(x => x.selected)) === null || _response$documentLis === void 0 ? void 0 : _response$documentLis.query;
+  const selectedSortOption = response === null || response === void 0 || (_response$documentLis = response.documentList.sortOptions.find(x => x.selected)) === null || _response$documentLis === void 0 ? void 0 : _response$documentLis.query;
   const sortOptions = response === null || response === void 0 ? void 0 : response.documentList.sortOptions.filter(x => x.displayName !== 'relevance').map(so => ({
     value: so.query,
     displayName: getTranslatedSortOptionDisplayName(so.displayName)
@@ -880,7 +863,6 @@ const Result = ({
     options: sortOptions,
     onChange: onSortOptionChange
   }))), React__default.createElement(Body, null, children), React__default.createElement(Footer, null, React__default.createElement(FooterProgress, null, React__default.createElement(ProgressBar, {
-    unit: "bilar",
     valueCurrent: numberOfDocuments,
     valueMax: numberOfHits
   })), numberOfDocuments !== numberOfHits && React__default.createElement(FooterAction, null, React__default.createElement(ButtonSecondary, {
@@ -891,26 +873,26 @@ const Result = ({
   }, React__default.createElement(ButtonContent, null, "Visa fler")))));
 };
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
   }
-  return keys;
+  return t;
 }
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
-  return target;
+  return e;
 }
 function _defineProperty(obj, key, value) {
   key = _toPropertyKey(key);
@@ -1246,16 +1228,18 @@ const Panel = ({
   onClose,
   children
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   return React.createElement(Portal$1, {
     id: id || DefaultPortal
   }, React.createElement(Wrapper$5, null, React.createElement(UiBlock, {
-    title: "St\u00E4ng panel",
+    title: t('other.closePanel') || '',
     onClick: onClose
   }), React.createElement(PanelWrapper, null, React.createElement(Header$1, null, React.createElement(Heading, null, React.createElement(H1, {
     noMargin: true
   }, title)), React.createElement(Close, null, React.createElement(CloseBtn, {
-    title: "St\u00E4ng panel",
-    "aria-label": "St\u00E4ng panel",
+    title: t('other.closePanel') || '',
     onClick: onClose
   }, React.createElement(IconCancel, {
     block: true
@@ -1359,13 +1343,16 @@ const AccordionItem = ({
   activeCount,
   isActive
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [extend, setExtend] = React.useState(isActive || false);
   const onToggleExtend = React.useCallback(() => setExtend(!extend), [extend]);
   return React__default.createElement(Item$1, {
     isOpen: extend
   }, React__default.createElement(Header$2, {
     onClick: onToggleExtend,
-    title: "Visa mer"
+    title: t('common.showMore') || ''
   }, React__default.createElement(Label$1, null, React__default.createElement(Heading$1, {
     className: activeCount && activeCount > 0 ? 'wayke__theme wayke__font--bold' : ''
   }, heading), activeCount && activeCount > 0 && React__default.createElement(Indicator$1, null, React__default.createElement(IndicatorValue$1, null, activeCount))), React__default.createElement(Icon$2, null, React__default.createElement(IconChevronDown, {
@@ -1929,7 +1916,7 @@ const RangeFacet = ({
   unit,
   formatValues
 }) => {
-  var _initialFacet$filters, _initialFacet$filters2, _queryFilter$searchPa3;
+  var _initialFacet$filters, _queryFilter$searchPa3;
   const {
     loading,
     queryFilter,
@@ -1937,7 +1924,7 @@ const RangeFacet = ({
     onFilterUpdate
   } = useSearch();
   const initialFacet = initialFacets === null || initialFacets === void 0 ? void 0 : initialFacets.find(x => x.id === facet.id);
-  const maxPrefix = initialFacet === null || initialFacet === void 0 ? void 0 : (_initialFacet$filters = initialFacet.filters[(initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.filters.length) - 1]) === null || _initialFacet$filters === void 0 ? void 0 : (_initialFacet$filters2 = _initialFacet$filters.displayName) === null || _initialFacet$filters2 === void 0 ? void 0 : _initialFacet$filters2.includes('+');
+  const maxPrefix = initialFacet === null || initialFacet === void 0 || (_initialFacet$filters = initialFacet.filters[(initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.filters.length) - 1]) === null || _initialFacet$filters === void 0 || (_initialFacet$filters = _initialFacet$filters.displayName) === null || _initialFacet$filters === void 0 ? void 0 : _initialFacet$filters.includes('+');
   const [state, setValues] = React.useState(undefined);
   React.useEffect(() => {
     const _initialAllValues = (initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.filters.map(f => parseInt(f.displayName.replace(/[\<\>+-]+/g, ''), 10))) || [1, 2];
@@ -1999,6 +1986,9 @@ const RangeFacet = ({
 const FacetSelector = ({
   facet
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   switch (facet.id) {
     case MANUFACTURER:
     case MODEL_SERIES:
@@ -2018,20 +2008,26 @@ const FacetSelector = ({
     case PRICE:
       return React__default.createElement(RangeFacet, {
         facet: facet,
-        unit: "kr",
+        unit: t('currency.default'),
         formatValues: true
       });
     case BUSINESS_LEASING_PRICE:
     case LEASING_PRICE:
       return React__default.createElement(RangeFacet, {
         facet: facet,
-        unit: "kr/m\u00E5n",
+        unit: t('currency.monthly'),
+        formatValues: true
+      });
+    case ODOMETER_VALUE_AS_KM:
+      return React__default.createElement(RangeFacet, {
+        facet: facet,
+        unit: t('odometer.Kilometer'),
         formatValues: true
       });
     case MILEAGE:
       return React__default.createElement(RangeFacet, {
         facet: facet,
-        unit: "mil",
+        unit: t('odometer.ScandinavianMile'),
         formatValues: true
       });
     case MODEL_YEAR:
@@ -2052,19 +2048,25 @@ const FilterPanel = ({
   onFilterUpdate,
   onClose
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const onClearFilters = React.useCallback(() => onFilterUpdate(''), []);
   return React__default.createElement(Panel, {
-    title: "Filtrera",
+    title: t('search.filter'),
     onClose: onClose,
     footer: React__default.createElement(React__default.Fragment, null, React__default.createElement(FooterAction$1, null, React__default.createElement(FooterActionItem, null, React__default.createElement(ButtonSecondary, {
       fullWidth: true,
       disabled: loading,
       onClick: onClearFilters
-    }, React__default.createElement(ButtonContent, null, "Rensa alla"))), React__default.createElement(FooterActionItem, null, React__default.createElement(ButtonPrimary, {
+    }, React__default.createElement(ButtonContent, null, t('search.clearAllFilters.text')))), React__default.createElement(FooterActionItem, null, React__default.createElement(ButtonPrimary, {
       fullWidth: true,
       disabled: loading,
       onClick: onClose
-    }, React__default.createElement(ButtonContent, null, `Visa ${numberOfHits} ${numberOfHits === 1 ? 'bil' : 'bilar'}`)))))
+    }, React__default.createElement(ButtonContent, null, t('search.showNumberOfCustomUnit', {
+      count: numberOfHits || 0,
+      unit: t(`search.result.${(numberOfHits || 0) === 1 ? 'singular' : 'plural'}`)
+    }))))))
   }, React__default.createElement(Accordion, null, filteredFacets.filter(x => x.filters.length).map(f => React__default.createElement(AccordionItem, {
     key: f.displayName,
     heading: f.displayName,
@@ -2086,10 +2088,24 @@ const isSelected = (f, searchParams) => {
       return f.filters.filter(filter => filter.selected).length;
   }
 };
+const filterOdometer = (id, marketCode = 'SE', filterList) => {
+  if (filterList) return true;
+  if (id === 'mileage') {
+    return marketCode === 'SE' ? true : false;
+  }
+  if (id === 'odometerValueAsKm') {
+    return marketCode === 'NO' ? true : false;
+  }
+  return true;
+};
 const Filter = ({
+  marketCode,
   filterList
 }) => {
   var _facets$filter;
+  const {
+    t
+  } = reactI18next.useTranslation();
   const {
     queryFilter,
     initialFacets,
@@ -2105,7 +2121,7 @@ const Filter = ({
     return null;
   }
   const filterNames = filterList ? filterList.map(x => x.filterName) : undefined;
-  const filteredFacets = facets === null || facets === void 0 ? void 0 : (_facets$filter = facets.filter(x => x.id !== 'segment')) === null || _facets$filter === void 0 ? void 0 : _facets$filter.filter(f => filterNames ? filterNames.includes(f.id) : true).sort((a, b) => filterNames ? filterNames.indexOf(a.id) - filterNames.indexOf(b.id) : 0).map(x => {
+  const filteredFacets = facets === null || facets === void 0 || (_facets$filter = facets.filter(x => x.id !== 'segment' && filterOdometer(x.id, marketCode, filterNames))) === null || _facets$filter === void 0 ? void 0 : _facets$filter.filter(f => filterNames ? filterNames.includes(f.id) : true).sort((a, b) => filterNames ? filterNames.indexOf(a.id) - filterNames.indexOf(b.id) : 0).map(x => {
     const match = filterList === null || filterList === void 0 ? void 0 : filterList.find(y => y.filterName === x.id);
     if (match !== null && match !== void 0 && match.displayName) {
       return _objectSpread2(_objectSpread2({}, x), {}, {
@@ -2113,7 +2129,7 @@ const Filter = ({
       });
     }
     return _objectSpread2(_objectSpread2({}, x), {}, {
-      displayName: FacetIdToTitle(x.id)
+      displayName: t(`filter.${x.id}`)
     });
   });
   return React__default.createElement(React__default.Fragment, null, initialFacets && facet && React__default.createElement(FilterPanel, {
@@ -2415,6 +2431,29 @@ const usePath = () => {
   return context;
 };
 
+const useIsInViewport = options => {
+  const containerRef = React.useRef(null);
+  const [isVisible, setIsVisible] = React.useState(false);
+  const [intersectionRatio, setIntersectionRatio] = React.useState(0);
+  const callbackFunction = (entries, observer) => {
+    const [entry] = entries;
+    setIsVisible(entry.isIntersecting);
+    setIntersectionRatio(entry.intersectionRatio);
+    if (entry.isIntersecting && options !== null && options !== void 0 && options.persistVisibility && containerRef.current) {
+      observer.unobserve(containerRef.current);
+      containerRef.current = null;
+    }
+  };
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(callbackFunction, options);
+    if (containerRef.current) observer.observe(containerRef.current);
+    return () => {
+      if (containerRef.current) observer.unobserve(containerRef.current);
+    };
+  }, [containerRef, options]);
+  return [containerRef, isVisible, intersectionRatio];
+};
+
 const ProductCard = ({
   id,
   title,
@@ -2431,6 +2470,12 @@ const ProductCard = ({
   businessLeasingPrice,
   onClick
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const [containerRef, isVisible] = useIsInViewport({
+    persistVisibility: true
+  });
   const {
     pushState
   } = usePath();
@@ -2446,7 +2491,9 @@ const ProductCard = ({
   }, [id, pathRoute, href]);
   return React__default.createElement(Wrapper$8, {
     onClick: _onClick
-  }, React__default.createElement(Image, null, React__default.createElement(LazyLoad, null, image ? React__default.createElement(React__default.Fragment, null, React__default.createElement(Picture, null, React__default.createElement(Source, {
+  }, React__default.createElement(Image, {
+    ref: containerRef
+  }, isVisible && image ? React__default.createElement(React__default.Fragment, null, React__default.createElement(Picture, null, React__default.createElement(Source, {
     type: "image/webp",
     srcSet: `${image}?spec=822x548&format=webp 822w, ${image}?spec=750x500&format=webp 750w, ${image}?spec=411x274&format=webp 411w`,
     sizes: "(min-width: 600px) calc(((100vw - 48px) / 2) - 8px), (min-width: 900px) calc(((100vw - 48px) / 3) - 10.666px), (min-width: 1312px) 410px, calc(100vw - 32px)"
@@ -2457,7 +2504,7 @@ const ProductCard = ({
     alt: title
   }))) : React__default.createElement(Picture, null, React__default.createElement(Img, {
     src: placeholderImage || DEFAULT_PLACEHOLDER_IMAGE
-  })))), React__default.createElement(Content, null, React__default.createElement(ContentBody, null, branchName && React__default.createElement(PreHeading, null, branchName), React__default.createElement(Heading$2, null, href ? React__default.createElement(Link, {
+  }))), React__default.createElement(Content, null, React__default.createElement(ContentBody, null, branchName && React__default.createElement(PreHeading, null, branchName), React__default.createElement(Heading$2, null, href ? React__default.createElement(Link, {
     onClick: onHrefClick,
     href: href,
     title: title,
@@ -2465,12 +2512,12 @@ const ProductCard = ({
   }, title) : title), description && React__default.createElement(Description$1, null, description), uspList && React__default.createElement(Usp, null, React__default.createElement(UspList, {
     small: true,
     items: uspList
-  }))), React__default.createElement(ContentFooter, null, React__default.createElement(Price, null, React__default.createElement(PriceCell, null, oldPrice ? React__default.createElement(OldPrice, null, oldPrice) : React__default.createElement(Label$3, null, "Pris"), React__default.createElement(CurrentPrice, null, price)), leasingPrice && React__default.createElement(PriceCell, null, React__default.createElement(Label$3, null, "Privatleasing"), React__default.createElement(CurrentPrice, null, leasingPrice)), businessLeasingPrice && React__default.createElement(PriceCell, null, React__default.createElement(Label$3, null, "F\u00F6retagsleasing"), React__default.createElement(CurrentPrice, null, businessLeasingPrice))))));
+  }))), React__default.createElement(ContentFooter, null, React__default.createElement(Price, null, React__default.createElement(PriceCell, null, oldPrice ? React__default.createElement(OldPrice, null, oldPrice) : React__default.createElement(Label$3, null, t('productCard.price')), React__default.createElement(CurrentPrice, null, price)), leasingPrice && React__default.createElement(PriceCell, null, React__default.createElement(Label$3, null, t('productCard.privateLeasing')), React__default.createElement(CurrentPrice, null, leasingPrice)), businessLeasingPrice && React__default.createElement(PriceCell, null, React__default.createElement(Label$3, null, t('productCard.businessLeasing')), React__default.createElement(CurrentPrice, null, businessLeasingPrice))))));
 };
 
 const resolveImage = document => {
-  var _document$featuredIma, _document$featuredIma2, _document$featuredIma3;
-  const img = (_document$featuredIma = document.featuredImage) === null || _document$featuredIma === void 0 ? void 0 : (_document$featuredIma2 = _document$featuredIma.files) === null || _document$featuredIma2 === void 0 ? void 0 : (_document$featuredIma3 = _document$featuredIma2[0]) === null || _document$featuredIma3 === void 0 ? void 0 : _document$featuredIma3.url;
+  var _document$featuredIma;
+  const img = (_document$featuredIma = document.featuredImage) === null || _document$featuredIma === void 0 || (_document$featuredIma = _document$featuredIma.files) === null || _document$featuredIma === void 0 || (_document$featuredIma = _document$featuredIma[0]) === null || _document$featuredIma === void 0 ? void 0 : _document$featuredIma.url;
   if (img) {
     return `${img}?w=567&q=72`;
   }
@@ -2488,7 +2535,7 @@ const Grid = ({
     return null;
   }
   return React__default.createElement(Wrapper$7, null, React__default.createElement(List$4, null, documents.map(document => {
-    var _document$branches, _document$branches$;
+    var _document$branches, _document$odometerRea, _document$odometerRea2;
     /*
     const _path = pathRoute?.replace(/^\/|\/$/g, '');
        const prefix = _path ? `/${_path}/` : '/';
@@ -2517,20 +2564,20 @@ const Grid = ({
       image: resolveImage(document),
       placeholderImage: placeholderImage,
       description: document.shortDescription,
-      branchName: displayBranchName ? (_document$branches = document.branches) === null || _document$branches === void 0 ? void 0 : (_document$branches$ = _document$branches[0]) === null || _document$branches$ === void 0 ? void 0 : _document$branches$.name : undefined,
+      branchName: displayBranchName ? (_document$branches = document.branches) === null || _document$branches === void 0 || (_document$branches = _document$branches[0]) === null || _document$branches === void 0 ? void 0 : _document$branches.name : undefined,
       uspList: [{
         title: document.modelYear
       }, {
-        title: `${numberSeparator(document.mileage)} mil`
+        title: `${numberSeparator(((_document$odometerRea = document.odometerReading) === null || _document$odometerRea === void 0 ? void 0 : _document$odometerRea.value) || document.mileage)} ${i18next.t(`odometer.${((_document$odometerRea2 = document.odometerReading) === null || _document$odometerRea2 === void 0 ? void 0 : _document$odometerRea2.unit) || 'ScandinavianMile'}`)}`
       }, {
         title: document.gearboxType
       }, {
         title: document.fuelType
       }],
-      price: `${numberSeparator(document.price)} kr`,
-      oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice ? `${numberSeparator(document.oldPrice)} kr` : undefined,
-      leasingPrice: document.leasingPrice !== undefined ? `${numberSeparator(document.leasingPrice)} kr/mån` : undefined,
-      businessLeasingPrice: document.businessLeasingPrice !== undefined ? `${numberSeparator(document.businessLeasingPrice)} kr/mån` : undefined
+      price: `${numberSeparator(document.price)} ${i18next.t('currency.default')}`,
+      oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice ? `${numberSeparator(document.oldPrice)} ${i18next.t('currency.default')}` : undefined,
+      leasingPrice: document.leasingPrice !== undefined ? `${numberSeparator(document.leasingPrice)} ${i18next.t('currency.monthly')}` : undefined,
+      businessLeasingPrice: document.businessLeasingPrice !== undefined ? `${numberSeparator(document.businessLeasingPrice)} ${i18next.t('currency.monthly')}` : undefined
     }));
   })));
 };
@@ -2604,12 +2651,17 @@ const SearchTerm = ({
   children,
   onClear,
   clearTitle
-}) => React__default.createElement(Wrapper$9, null, React__default.createElement(Query, null, children), onClear && React__default.createElement(Clear, {
-  onClick: onClear,
-  title: clearTitle ? clearTitle : 'Rensa fritext'
-}, React__default.createElement(IconCancel, {
-  block: true
-})));
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  return React__default.createElement(Wrapper$9, null, React__default.createElement(Query, null, children), onClear && React__default.createElement(Clear, {
+    onClick: onClear,
+    title: clearTitle ? clearTitle : t('search.freeText')
+  }, React__default.createElement(IconCancel, {
+    block: true
+  })));
+};
 
 const Wrapper$a = styled__default.div.attrs(() => ({
   role: 'search'
@@ -2746,6 +2798,9 @@ const SearchBar = ({
   setValue,
   onSearch
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const ref = React.useRef(null);
   const onChange = React.useCallback(e => setValue(e.currentTarget.value), []);
   useOutsideClick(ref, () => setValue(''));
@@ -2763,8 +2818,8 @@ const SearchBar = ({
     onChange: onChange,
     onKeyDown: onKeyDown,
     onSearch: _onSearch,
-    placeholder: "S\u00F6k",
-    label: "S\u00F6k",
+    placeholder: t('searchBar.placeholder'),
+    label: t('searchBar.placeholder'),
     id: "main-search"
   });
 };
@@ -2961,7 +3016,932 @@ PubSub.publish = (eventName, ...args) => {
   }
 };
 
+const getLanguage = marketCode => {
+  switch (marketCode) {
+    case 'NO':
+      return 'nb-NO';
+    case 'SE':
+      return 'sv-SE';
+    default:
+      return 'en-US';
+  }
+};
+const initializeI18n = (marketCode = 'SE') => {
+  return new Promise(resolve => {
+    if (i18next.isInitialized) {
+      resolve(true);
+      return;
+    }
+    i18next.use(reactI18next.initReactI18next).init({
+      lng: getLanguage(marketCode),
+      fallbackLng: 'en-US',
+      interpolation: {
+        escapeValue: false
+      },
+      debug: true,
+      resources: {
+        'sv-SE': {
+          translation: {
+            navigation: {
+              backToSearch: 'Tillbaka till bilsök'
+            },
+            filter: {
+              manufacturer: 'Tillverkare',
+              modelSeries: 'Modell',
+              fuelType: 'Drivmedel',
+              gearboxType: 'Växellåda',
+              branch: 'Anläggning',
+              color: 'Färg',
+              environmentClass: 'Miljöklass',
+              'properties.segment': 'Segment',
+              drivingWheel: 'Drivhjul',
+              price: 'Pris',
+              mileage: 'Miltal',
+              modelYear: 'Modellår',
+              odometerValueAsKm: 'Mätarställning',
+              leasingPrice: 'Privatleasing',
+              businessLeasingPrice: 'Företagsleasa'
+            },
+            currency: {
+              default: 'kr',
+              monthly: 'kr/mån'
+            },
+            category: {
+              basic: 'Basuppgifter',
+              engineAndPerformance: 'Motor & Prestanda'
+            },
+            subCategory: {
+              engine: 'Motor'
+            },
+            customProperty: {
+              manufacturer: {
+                displayName: 'Varumärke',
+                hint: ''
+              },
+              modelSeries: {
+                displayName: 'Modell',
+                hint: ''
+              },
+              modelName: {
+                displayName: 'Version',
+                hint: 'Vilket utförande av bilmodellen det är.'
+              },
+              modelYear: {
+                displayName: 'Modellår',
+                hint: 'Modellår sätts av tillverkaren. Handlaren ändrar ibland modellåret för att matcha transportstyrelsens definition för <i>årsmodell</i>. Definitionen för årsmodell innebär att bilar tillverkade andra halvan av året får nästa års modellår.'
+              },
+              manufactureYear: {
+                displayName: 'Tillverkningsår',
+                hint: 'Året bilen tillverkades.'
+              },
+              odometer: {
+                displayName: 'Mätarställning',
+                hint: ''
+              },
+              gearboxType: {
+                displayName: 'Växellåda',
+                hint: ''
+              },
+              registrationNumber: {
+                displayName: 'Registreringsnummer',
+                hint: ''
+              },
+              fuelType: {
+                displayName: 'Bränslegrupp',
+                hint: 'Vad bilen ska tankas med och drivs av.'
+              },
+              enginePower: {
+                displayName: 'Effekt',
+                unit: 'hk'
+              }
+            },
+            odometer: {
+              Kilometer: 'km',
+              ScandinavianMile: 'mil'
+            },
+            common: {
+              yes: 'Ja',
+              no: 'Nej',
+              logotype: 'Logotyp',
+              close: 'Stäng',
+              showMore: 'Visa mer',
+              readMore: 'Läs mer',
+              showMoreInformation: 'Visa mer information',
+              showLessInformation: 'Visa mindre information',
+              choose: 'Välj',
+              address: 'Adress',
+              mondayShort: 'Mån',
+              tuesdayShort: 'Tis',
+              wednesdayShort: 'Ons',
+              thursdayShort: 'Tor',
+              fridayShort: 'Fre',
+              saturdayShort: 'Lör',
+              sundayShort: 'Sön',
+              moreInformation: 'Mer information',
+              lessInformation: 'Mindre information',
+              anErrorHasOccured: 'Ett fel har inträffat',
+              opensInNewTab: 'Öppnas i ny flik',
+              open: 'Öppna',
+              imageIndex: 'Bild {{index}}'
+            },
+            item: {
+              relatedVehicles: 'Relaterade fordon',
+              latestVehicles: 'Senast inkomna',
+              readMoreInNewTab: 'Läs mer (öppnas i ny flik)',
+              moreInfoAboutSubject: 'Mer information om {{subject}}',
+              dataNotAvailable: 'Uppgift saknas',
+              showOnGoogleMaps: 'Visa på Google Maps',
+              googleMapsMapAlt: 'Karta',
+              googleMapsPlaceholderInit: 'Visa karta',
+              demoCar: 'Demobil',
+              demoCarDescription: 'En demobil är en bil som stått i utställning eller som på annat sätt använts för att visa upp en viss modell. Bilarna är ofta välutrustade och har blivit väl omhändertagna. Dessutom har de vanligtvis gått få mil och har fortfarande nybilsgarantierna kvar.',
+              carData: 'Biluppgifter',
+              carDataDescription: 'Information direkt från Transportstyrelsen och tillverkaren.',
+              equipment: 'Utrustning',
+              equipmentDescription: 'Kompletterande uppgifter om bilen.',
+              documents: 'Dokument',
+              documentTypes: {
+                tireEnergyDeclaration: 'Energideklaration för däck',
+                goodsDeclaration: 'Varudeklaration',
+                other: 'Övriga dokument'
+              },
+              carIsReserved: 'Bilen är reserverad',
+              carIsReservedDescription: 'Denna bil är reserverad av en annan köpare.',
+              carIsReservedModalBody: 'Denna bil är reserverad av en annan köpare.',
+              centralWarehouseCar: 'Centrallagerbil',
+              centralWarehouseCarDescription: 'Denna bil tillhör ett centrallager och går att köpa genom flera anläggningar. Byt anläggning för att visa kontaktuppgifter till just den anläggningen.',
+              centralWarehouseCarDescriptionShort: 'Denna bil tillhör ett centrallager och går att köpa genom flera anläggningar.',
+              clickHereToShowContactToAnotherBranch: ' Klicka här för att visa kontaktuppgifter till en annan anläggning',
+              switchBranch: 'Byt anläggning',
+              switchBranchDescription: 'Välj den anläggning du vill visa kontaktuppgifter för.',
+              chooseBranch: 'Välj anläggning',
+              chooseSelectedBranch: 'Välj vald anläggning',
+              availableFromDate: 'Tillgänglig från {{date}}',
+              includingShort: 'Inkl.',
+              usedWarrany: 'Begagnatgaranti',
+              homeDelivery: 'Hemleverans',
+              thisCarsIsLocatedAt: 'Den här bilen finns på',
+              thisCarIsAvailableAtOurBranch: 'Den här bilen finns på vår anläggning i {{location}}',
+              contact: 'Kontakt',
+              start360Exterior: 'Starta 360° exteriört',
+              start360Interior: 'Starta 360° interiört',
+              openingHoursToday: 'Öppetider idag',
+              closedToday: 'Stängt idag',
+              open: 'Öppet',
+              closed: 'Stängt',
+              addInsurance: 'Välj till försäkring',
+              getInsuranceQuote: 'Få prisförslag',
+              insurance: 'Försäkring',
+              readMoreAboutInsuranceInNewTab: 'Läs mer om försäkringen (öppnas i ny flik)',
+              personalNumber: 'Personnummer',
+              estimatedAnualMileage: 'Uppskattad körsträcka per år',
+              showInsurances: 'Visa försäkringar',
+              savePersonalNumberOnThisDevice: 'Spara personnummer på denna enhet',
+              savePersonalNumberOnThisDeviceHelp: 'Spara personnummer på denna dator för att direkt visa försäkringskostnaderna i Wayke. Personnumret lagras inte hos Wayke utan finns bara sparad i din webbläsare.',
+              couldNotfetchInsurances: 'Kunde inte hämta försäkringar. Vänligen försök igen.',
+              openPrePurchaseInformationInNewTab: 'Förköpsinformation och villkor (öppnas i ny flik)',
+              insuranceIncludes: 'Försäkringen innehåller',
+              addInsuranceHeading: 'Lägg till',
+              financialOptions: {
+                otherFinancialOptions: 'Andra finansieringsalternativ',
+                privateLease: 'Privatleasa',
+                businessLease: 'Företagsleasa',
+                monthlyCost: 'Månadskostnad',
+                bindingTime: 'Bindningstid',
+                annualMileage: 'Årlig körsträcka',
+                payInInstallments: 'Delbetala',
+                payInInstallmentsDetailed: 'Delbetala {{amount}} i {{duration}} mån',
+                disclaimer: 'Beräknat på {{interest}} ränta.',
+                loanOptions: 'Lånealternativ',
+                downPayment: 'Kontantinsats',
+                duration: 'Avbetalning',
+                residual: 'Restskuld',
+                interest: 'Ränta',
+                effectiveinterest: 'Effektiv ränta',
+                setupFee: 'Uppläggningskostnad',
+                administrationFee: 'Administrativa avgifter',
+                totalCreditCost: 'Total kreditkostnad',
+                milagePerYear: 'mil/år',
+                months: 'mån',
+                loanOptionsDisclaimer: 'Beräknat på {{interest}} % ränta (effektivt {{effectiveInterest}} %).',
+                loanOptionsDisclaimerMileage: 'Beräknat på {{interest}} % ränta (effektivt {{effectiveInterest}} %) och en årlig körsträcka om {{mileage}} mil.'
+              },
+              actions: {
+                emailSubject: '{{hostName}} – Jag är intresserad av {{vehicle}}',
+                openform: 'Öppna formulär',
+                buyOnline: 'Köp bilen online',
+                showEmail: 'Visa mailadress',
+                showPhoneNumber: 'Visa telefonnummer',
+                callNumber: 'Ring',
+                sendEmailTo: 'Skicka ett mail till'
+              },
+              accessories: {
+                accessories: 'Tillbehör',
+                accessoriesDescription: 'Tillbehör som passar till detta fordon.',
+                price: 'Kontantpris',
+                oldPrice: 'Tidigare pris',
+                installationCost: 'Monteringskostnad',
+                articleNumberShort: 'Art. nr.',
+                moreInformationAboutAccessory: 'Mer information om {{accessory}}'
+              }
+            },
+            productCard: {
+              price: 'Pris',
+              privateLeasing: 'Privatleasing'
+            },
+            search: {
+              filter: 'Filter',
+              sort: 'Sortera',
+              showMore: {
+                text: 'Visa fler',
+                title: 'Visa fler resultat'
+              },
+              filterButton: {
+                text: 'Filtrera',
+                title: 'Visa filter'
+              },
+              sortButton: {
+                text: 'Sortera',
+                title: 'Välj sorteringsordning'
+              },
+              searchResult: 'Sökresultat',
+              snackbarNoSearchResults: {
+                heading: 'Inga resultat',
+                body: 'Sökningen gav inga resultat'
+              },
+              snackBarClearFreeText: {
+                heading: 'Inga resultat',
+                body: 'Rensa fritexten för att se alla filter'
+              },
+              sortOptions: {
+                relevance: 'Relevans',
+                publishedAsc: 'Publicerad (äldst)',
+                publishedDesc: 'Publicerad (senast)',
+                priceAsc: 'Pris (lägst)',
+                priceDesc: 'Pris (högst)',
+                modelAsc: 'Årsmodell (äldst)',
+                modelDesc: 'Årsmodell (nyast)',
+                mileageAsc: 'Miltal (lägst)',
+                mileageDesc: 'Miltal (högst)'
+              },
+              clearAllFilters: {
+                text: 'Rensa alla filter',
+                title: 'Rensa alla filter'
+              },
+              showNumberOfCustomUnit: 'Visa {{count}} {{unit}}',
+              result: {
+                singular: 'Bil',
+                plural: 'Bilar'
+              },
+              freeText: 'Fritext',
+              from: 'Från',
+              to: 'Till',
+              min: 'Min',
+              max: 'Max'
+            },
+            searchBar: {
+              title: 'Sök',
+              placeholder: 'Sök din bil',
+              button: {
+                text: 'Sök',
+                title: 'Sök'
+              },
+              searchResults: 'Sökträffar',
+              showAllRsults: 'Visa alla bilar'
+            },
+            other: {
+              loading: 'Laddar...',
+              error404: '404',
+              showingNumberOfResults_one: 'Visar {{current}} av {{count}} resultat',
+              showingNumberOfResults_other: 'Visar {{current}} av {{count}} resultat',
+              closeModal: 'Stäng modal',
+              closePanel: 'Stäng panel',
+              goToHeading: 'Gå till {{heading}}',
+              openDoumentt: 'Öppna {{document}}',
+              previousImage: 'Föregående bild',
+              nextImage: 'Nästa bild',
+              goToImageIndex: 'Gå till bild {{index}}',
+              phoneNumber: 'Telefonnummer',
+              showPhoneNumber: 'Visa telefonnummer',
+              callPhoneNumber: 'Ring {{phoneNumber}}',
+              price: 'Pris',
+              privateLeasingPrice: 'Privatleasing',
+              video: 'Video',
+              playVideo: 'Spela video',
+              searchResults: 'Sökträffar',
+              showAllCars: 'Visa alla bilar'
+            }
+          }
+        },
+        'nb-NO': {
+          translation: {
+            navigation: {
+              backToSearch: 'Tilbake til bilsøk'
+            },
+            filter: {
+              manufacturer: 'Produsent',
+              modelSeries: 'Modell',
+              fuelType: 'Drivstofftype',
+              gearboxType: 'Girkassetype',
+              branch: 'Anlegget',
+              color: 'Farge',
+              environmentClass: 'Miljøklasse',
+              'properties.segment': 'Segment',
+              drivingWheel: 'Drivhjul',
+              price: 'Pris',
+              mileage: 'Kilometerstand',
+              modelYear: 'Modellår',
+              odometerValueAsKm: 'Kilometerstand',
+              leasingPrice: 'Privatleasing',
+              businessLease: 'Bedriftsleasing'
+            },
+            currency: {
+              default: 'kr',
+              monthly: 'kr/mnd'
+            },
+            category: {
+              basic: 'Grunnopplysninger',
+              engineAndPerformance: 'Motor og ytelse'
+            },
+            subCategory: {
+              engine: 'Motor'
+            },
+            customProperty: {
+              manufacturer: {
+                displayName: 'Produsent',
+                hint: ''
+              },
+              modelSeries: {
+                displayName: 'Modell',
+                hint: ''
+              },
+              modelName: {
+                displayName: 'Versjon',
+                hint: 'Hvilken versjon av bilmodellen det er.'
+              },
+              modelYear: {
+                displayName: 'Årsmodell',
+                hint: 'Modellåret settes av produsenten. Forhandlere endrer av og til modellåret for å matche transportmyndighetens definisjon av modellåret. Definisjonen av modellåret innebærer at biler produsert i den siste halvdelen av året får neste års modellår.'
+              },
+              manufactureYear: {
+                displayName: 'Produksjonsår',
+                hint: 'Året bilen ble produsert.'
+              },
+              odometer: {
+                displayName: 'Kilometerstand',
+                hint: ''
+              },
+              gearboxType: {
+                displayName: 'Girkasse',
+                hint: ''
+              },
+              registrationNumber: {
+                displayName: 'Registreringsnummer',
+                hint: ''
+              },
+              fuelType: {
+                displayName: 'Drivstofftype',
+                hint: 'Hva bilen skal tankes med og drives av.'
+              },
+              enginePower: {
+                displayName: 'Effekt',
+                unit: 'hk'
+              }
+            },
+            odometer: {
+              Kilometer: 'km',
+              ScandinavianMile: 'mil'
+            },
+            common: {
+              yes: 'Ja',
+              no: 'nei',
+              logotype: 'Logotype',
+              close: 'Close',
+              showMore: 'Vis mer',
+              readMore: 'Les mer',
+              showMoreInformation: 'Vis mer informasjon',
+              showLessInformation: 'Vis mindre informasjon',
+              choose: 'Velg',
+              address: 'Adresse',
+              mondayShort: 'man',
+              tuesdayShort: 'tirs',
+              wednesdayShort: 'Wednesday',
+              thursdayShort: 'Thursday',
+              FridayShort: 'fre',
+              saturdayShort: 'lørdag',
+              sundayShort: 'Søn',
+              moreInformation: 'Mer informasjon',
+              lessInformation: 'Mindre informasjon',
+              anErrorHasOccured: 'Det har oppstått en feil',
+              opensInNewTab: 'Åpnes i ny fane',
+              open: 'Åpne',
+              imageIndex: 'Bilde {{indeks}}'
+            },
+            item: {
+              relatedVehicles: 'Relaterte kjøretøy',
+              latestVehicles: 'Sist mottatt',
+              readMoreInNewTab: 'Les mer (åpnes i ny fane)',
+              moreInfoAboutSubject: 'Mer informasjon om {{subject}}',
+              dataNotAvailable: 'Data ikke tilgjengelig',
+              showOnGoogleMaps: 'Vis på Google Maps',
+              googleMapsMapAlt: 'Kart',
+              googleMapsPlaceholderInit: 'Vis kart',
+              demoCar: 'Demo Car',
+              demoCarDescription: 'En demobil er en bil som har vært utstilt eller som har blitt brukt på annen måte for å vise frem en bestemt modell. Bilene er ofte godt utstyrt og har blitt tatt godt vare på. Dessuten har de vanligvis bare noen få kilometer på seg og har fortsatt garantien på nybilen.',
+              carData: 'Bildata',
+              carDataDescription: 'Informasjon direkte fra Transportstyrelsen og produsenten.',
+              equipment: 'Utstyr',
+              equipmentDescription: 'Ytterligere informasjon om bilen.',
+              documents: 'Dokumenter',
+              documentTypes: {
+                tireEnergyDeclaration: 'Energideklarasjon for dekk',
+                goodsDeclaration: 'Varedeklarasjon',
+                other: 'Andre dokumenter'
+              },
+              carIsReserved: 'Bilen er reservert',
+              carIsReservedDescription: 'Denne bilen er reservert av en annen kjøper.',
+              carIsReservedModalBody: 'Denne bilen er reservert av en annen kjøper.',
+              centralWarehouseCar: 'Sentrallagerbil',
+              centralWarehouseCarDescription: 'Denne bilen tilhører et sentrallager og kan kjøpes gjennom flere fasiliteter. Endre anlegget for å vise kontaktinformasjon for det bestemte anlegget.',
+              centralWarehouseCarDescriptionShort: 'Denne bilen tilhører et sentrallager og kan kjøpes gjennom flere fasiliteter.',
+              clickHereToShowContactToAnotherBranch: 'Klikk her for å se kontaktdetaljer for et annet anlegg',
+              switchBranch: 'Switch Branch',
+              switchBranchDescription: 'Velg filialen du vil vise kontaktdetaljer for.',
+              selectBranch: 'Choose Branch',
+              chooseSelectedBranch: 'Velg valgt gren',
+              availableFromDate: 'Tilgjengelig fra {{date}}',
+              includingShort: 'Inkl.',
+              usedWarrany: 'Bruktgaranti',
+              homeDelivery: 'Hjemlevering',
+              thisCarsIsLocatedAt: 'Denne bilen er på',
+              thisCarIsAvailableAtOurBranch: 'Denne bilen er tilgjengelig i vår filial i {{location}}',
+              contact: 'Kontakt',
+              start360Exterior: 'Start 360° eksteriør',
+              start360Interior: 'Start 360° interiør',
+              openingHoursToday: 'Åpningstider i dag',
+              closedToday: 'Stengt i dag',
+              open: 'Åpne',
+              closed: 'Stengt',
+              addInsurance: 'Velg til forsikring',
+              getInsuranceQuote: 'Få tilbud',
+              insurance: 'Forsikring',
+              readMoreAboutInsuranceInNewTab: 'Les mer om forsikring (åpnes i ny fane)',
+              personalNumber: 'Personnummer',
+              estimatedAnualMileage: 'Estimert kjørelengde per år',
+              showInsurances: 'Vis forsikringer',
+              savePersonalNumberOnThisDevice: 'Lagre personlig nummer på denne enheten',
+              savePersonalNumberOnThisDeviceHelp: 'Lagre personnummeret på denne datamaskinen for å direkte se forsikringskostnadene i Wayke. Personnummeret lagres ikke hos Wayke, men lagres kun i nettleseren din.',
+              couldNotfetchInsurances: 'Kunne ikke hente forsikringer. Vær så snill, prøv på nytt.',
+              openPrePurchaseInformationInNewTab: 'Informasjon og vilkår før kjøp (åpnes i ny fane)',
+              insuranceIncludes: 'Forsikringen inkluderer',
+              addInsuranceHeading: 'Add',
+              financialOptions: {
+                otherFinancialOptions: 'Andre finansieringsalternativer',
+                privateLease: 'PrivateLease',
+                businessLease: 'Etagslease',
+                monthlyCost: 'Månedlig kostnad',
+                bindingTime: 'Bindingstid',
+                annualMileage: 'Annual Mileage',
+                payInInstallments: 'Betal i avdrag',
+                payInInstallmentsDetailed: 'Betal delvis {{amount}} i {{duration}} måneder',
+                disclaimer: 'Beregnet til {{interest}} rente.',
+                loanOptions: 'Lånealternativer',
+                downPayment: 'Kontantinnskudd',
+                duration: 'Avbetaling',
+                residual: 'Restgjeld',
+                interesse: 'Interesse',
+                effectiveinterest: 'Effektiv interesse',
+                setupFee: 'Oppsettskostnad',
+                administrationFee: 'Administrative gebyrer',
+                totalCreditCost: 'Total kredittkostnad',
+                milagePerYear: 'skandinaviske mil/år',
+                months: 'mnd',
+                loanOptionsDisclaimer: 'Beregnet til {{interest}} % rente (effektiv {{effectiveInterest}} %).',
+                loanOptionsDisclaimerMileage: 'Beregnet på {{interest}} % rente (effektiv {{effectiveInterest}} %) og en årlig kjørelengde på {{mileage}} miles.'
+              },
+              actions: {
+                emailSubject: '{{hostName}} - Jeg er interessert i {{vehicle}}',
+                openform: 'Åpent skjema',
+                buyOnline: 'Kjøp bilen på nett',
+                showEmail: 'Vis e-postadresse',
+                showPhoneNumber: 'Vis telefonnummer',
+                callNumber: 'Ring',
+                sendEmailTo: 'Send en e-post til'
+              },
+              accessories: {
+                accessories: 'Tilbehør',
+                accessoriesDescription: 'Tilbehør som passer for dette kjøretøyet.',
+                price: 'Kontantpris',
+                oldPrice: 'Forrige pris',
+                installationCost: 'Installasjonskostnad',
+                articleNumberShort: 'Art. Nei.',
+                moreInformationAboutAccessory: 'Mer informasjon om {{accessory}}'
+              }
+            },
+            productCard: {
+              price: 'Pris',
+              privateLeasing: 'Privatleasing'
+            },
+            search: {
+              filter: 'Filter',
+              sort: 'Sorter',
+              showMore: {
+                text: 'Vis mer',
+                title: 'Vis flere resultater'
+              },
+              filterButton: {
+                text: 'Filter',
+                title: 'Vis filter'
+              },
+              sortButton: {
+                text: 'Sorter',
+                title: 'Velg sorteringsrekkefølge'
+              },
+              searchResult: 'Søkeresultat',
+              snackbarNoSearchResults: {
+                heading: 'Ingen resultater',
+                body: 'Søket ga ingen resultater'
+              },
+              snackBarClearFreeText: {
+                heading: 'Ingen resultater',
+                body: 'Tøm friteksten for å se alle filtre'
+              },
+              sortOptions: {
+                relevance: 'Relevans',
+                publishedAsc: 'Publisert (eldste)',
+                publishedDesc: 'Publisert (siste)',
+                priceAsc: 'Pris (laveste)',
+                priceDesc: 'Pris (maksimum)',
+                modelAsc: 'Årsmodell (eldste)',
+                modelDesc: 'Årsmodell (nyeste)',
+                mileageAsc: 'Kilometerstand (lavest)',
+                mileageDesc: 'Kilometerstand (maksimum)'
+              },
+              clearAllFilters: {
+                text: 'Tøm alle filtre',
+                title: 'Tøm alle filtre'
+              },
+              showNumberOfCustomUnit: 'Vis {{count}} {{unit}}',
+              result: {
+                singular: 'Bil',
+                plural: 'Biler'
+              },
+              freeText: 'Gratis tekst',
+              from: 'Fra',
+              to: 'Til',
+              min: 'Min',
+              max: 'Max'
+            },
+            searchBar: {
+              title: 'Søk',
+              placeholder: 'Søk i bilen din',
+              button: {
+                text: 'Søk',
+                title: 'Søk'
+              },
+              searchResults: 'Søkeresultater',
+              showAllRsults: 'Vis alle biler'
+            },
+            other: {
+              loading: 'Laster...',
+              error404: '404',
+              showingNumberOfResults_one: 'Viser {{current}} av {{count}} resultater',
+              showingNumberOfResults_other: 'Viser {{current}} av {{count}} resultater',
+              closeModal: 'Close Modal',
+              closePanel: 'Lukk panel',
+              goToHeading: 'Gå til {{heading}}',
+              openDoumentt: 'Åpne {{dokument}}',
+              previousImage: 'Forrige bilde',
+              nextImage: 'Neste bilde',
+              goToImageIndex: 'Gå til bilde {{indeks}}',
+              phoneNumber: 'Phone Number',
+              showPhoneNumber: 'Vis telefonnummer',
+              callPhoneNumber: 'Ring {{phoneNumber}}',
+              price: 'Pris',
+              privateLeasingPrice: 'Privatleasing',
+              video: 'Video',
+              playVideo: 'Spill av video',
+              searchResults: 'Søkeresultater',
+              showAllCars: 'Vis alle biler'
+            }
+          }
+        },
+        'en-US': {
+          translation: {
+            navigation: {
+              backToSearch: 'Back to car search'
+            },
+            filter: {
+              manufacturer: 'Manufacturer',
+              modelSeries: 'Model',
+              fuelType: 'Fuel Type',
+              gearboxType: 'Gearbox Type',
+              branch: 'Branch',
+              color: 'Color',
+              environmentClass: 'Environmental Class',
+              'properties.segment': 'Segment',
+              drivingWheel: 'Driving Wheel',
+              price: 'Price',
+              mileage: 'Mileage',
+              modelYear: 'Model Year',
+              odometerValueAsKm: 'Meter setting',
+              leasingPrice: 'Private leasing',
+              businessLeasingPrice: 'Business leasing'
+            },
+            currency: {
+              default: 'kr',
+              monthly: 'kr/month'
+            },
+            category: {
+              basic: 'Basic Information',
+              engineAndPerformance: 'Engine & Performance'
+            },
+            subCategory: {
+              engine: 'Engine'
+            },
+            customProperty: {
+              manufacturer: {
+                displayName: 'Brand',
+                hint: ''
+              },
+              modelSeries: {
+                displayName: 'Model',
+                hint: ''
+              },
+              modelName: {
+                displayName: 'Version',
+                hint: 'Which version of the car model it is.'
+              },
+              modelYear: {
+                displayName: 'Model year',
+                hint: 'The model year is set by the manufacturer. Dealers sometimes change the model year to match the transport authority`s definition of the model year. The definition of the model year means that cars manufactured in the latter half of the year are given the next year`s model year.'
+              },
+              manufactureYear: {
+                displayName: 'Manufacture year',
+                hint: 'The year the car was manufactured.'
+              },
+              odometer: {
+                displayName: 'Odometer reading',
+                hint: ''
+              },
+              gearboxType: {
+                displayName: 'Gearbox',
+                hint: ''
+              },
+              registrationNumber: {
+                displayName: 'Registration number',
+                hint: ''
+              },
+              fuelType: {
+                displayName: 'Fuel type',
+                hint: 'What the car should be fueled with and powered by.'
+              },
+              enginePower: {
+                displayName: 'Power',
+                unit: 'hp'
+              }
+            },
+            odometer: {
+              Kilometer: 'km',
+              ScandinavianMile: 'mil'
+            },
+            common: {
+              yes: 'Yes',
+              no: 'No',
+              logotype: 'Logotype',
+              close: 'Close',
+              showMore: 'Show more',
+              readMore: 'Read more',
+              showMoreInformation: 'Show more information',
+              showLessInformation: 'Show less information',
+              choose: 'Choose',
+              address: 'Address',
+              mondayShort: 'Mon',
+              tuesdayShort: 'Tues',
+              wednesdayShort: 'Wednesday',
+              thursdayShort: 'Thursday',
+              fridayShort: 'Fri',
+              saturdayShort: 'Sat',
+              sundayShort: 'Sun',
+              moreInformation: 'More information',
+              lessInformation: 'Less information',
+              anErrorHasOccured: 'An error has occurred',
+              opensInNewTab: 'Opens in new tab',
+              open: 'Open',
+              imageIndex: 'Image {{index}}'
+            },
+            item: {
+              relatedVehicles: 'Related Vehicles',
+              latestVehicles: 'Latest received',
+              readMoreInNewTab: 'Read more (opens in new tab)',
+              moreInfoAboutSubject: 'More information about {{subject}}',
+              dataNotAvailable: 'Data not available',
+              showOnGoogleMaps: 'Show on Google Maps',
+              googleMapsMapAlt: 'Map',
+              googleMapsPlaceholderInit: 'Show Map',
+              demoCar: 'Demo Car',
+              demoCarDescription: 'A demo car is a car that has been on display or that has been used in some other way to show off a certain model. The cars are often well equipped and have been well looked after. Also, they usually have only a few miles on them and still have their new car warranties.',
+              carData: 'Car Data',
+              carDataDescription: 'Information directly from the Swedish Transport Agency and the manufacturer.',
+              equipment: 'Equipment',
+              equipmentDescription: 'Additional information about the car.',
+              documents: 'Documents',
+              documentTypes: {
+                tireEnergyDeclaration: 'Energy declaration for tyres',
+                goodsDeclaration: 'Goods declaration',
+                other: 'Other documents'
+              },
+              carIsReserved: 'The car is reserved',
+              carIsReservedDescription: 'This car is reserved by another buyer.',
+              carIsReservedModalBody: 'This car is reserved by another buyer.',
+              centralWarehouseCar: 'Central warehouse car',
+              centralWarehouseCarDescription: 'This car belongs to a central warehouse and can be purchased through several facilities. Change facility to display contact information for that particular facility.',
+              centralWarehouseCarDescriptionShort: 'This car belongs to a central warehouse and can be purchased through several facilities.',
+              clickHereToShowContactToAnotherBranch: 'Click here to view contact details for another facility',
+              switchBranch: 'Switch Branch',
+              switchBranchDescription: 'Select the branch you want to display contact details for.',
+              chooseBranch: 'Choose branch',
+              chooseSelectedBranch: 'Choose selected branch',
+              availableFromDate: 'Available from {{date}}',
+              includingShort: 'Incl.',
+              usedWarrany: 'Used Warranty',
+              homeDelivery: 'Home delivery',
+              thisCarsIsLocatedAt: 'This car is on',
+              thisCarIsAvailableAtOurBranch: 'This car is available at our branch in {{location}}',
+              contact: 'Contact',
+              start360Exterior: 'Start 360° exterior',
+              start360Interior: 'Start 360° interior',
+              openingHoursToday: 'Opening hours today',
+              closedToday: 'Closed today',
+              open: 'Open',
+              closed: 'Closed',
+              addInsurance: 'Select insurance',
+              getInsuranceQuote: 'Get Quote',
+              insurance: 'Insurance',
+              readMoreAboutInsuranceInNewTab: 'Read more about insurance (opens in new tab)',
+              personalNumber: 'Personal number',
+              estimatedAnnualMileage: 'Estimated mileage per year',
+              showInsurances: 'Show insurances',
+              savePersonalNumberOnThisDevice: 'Save personal number on this device',
+              savePersonalNumberOnThisDeviceHelp: 'Save social security number on this computer to directly view the insurance costs in Wayke. The social security number is not stored at Wayke, but is only saved in your browser.',
+              couldNotfetchInsurances: 'Could not fetch insurances. Please try again.',
+              openPrePurchaseInformationInNewTab: 'Pre-Purchase Information and Terms (opens in new tab)',
+              insuranceIncludes: 'The insurance includes',
+              addInsuranceHeading: 'Add',
+              financialOptions: {
+                otherFinancialOptions: 'Other financing options',
+                privateLease: 'PrivateLease',
+                businessLease: 'Etagslease',
+                monthlyCost: 'Monthly cost',
+                bindingTime: 'Binding Time',
+                annualMileage: 'Annual Mileage',
+                payInInstallments: 'Pay In Installments',
+                payInInstallmentsDetailed: 'Partially pay {{amount}} in {{duration}} months',
+                disclaimer: 'Calculated at {{interest}} interest.',
+                loanOptions: 'Loan Options',
+                downPayment: 'Cash Deposit',
+                duration: 'Instalment',
+                residual: 'Residual debt',
+                interest: 'Interest',
+                effectiveinterest: 'Effective interest',
+                setupFee: 'Setup cost',
+                administrationFee: 'Administrative fees',
+                totalCreditCost: 'Total Credit Cost',
+                milagePerYear: 'mil/år',
+                months: 'mnd',
+                loanOptionsDisclaimer: 'Calculated at {{interest}} % interest (effective {{effectiveInterest}} %).',
+                loanOptionsDisclaimerMileage: 'Calculated on {{interest}} % interest (effective {{effectiveInterest}} %) and an annual mileage of {{mileage}} miles.'
+              },
+              actions: {
+                emailSubject: "{{hostName}} - I'm interested in {{vehicle}}",
+                openform: 'Open form',
+                buyOnline: 'Buy the car online',
+                showEmail: 'Show email address',
+                showPhoneNumber: 'Show phone number',
+                callNumber: 'Call',
+                sendEmailTo: 'Send an email to'
+              },
+              accessories: {
+                accessories: 'Accessories',
+                accessoriesDescription: 'Accessories suitable for this vehicle.',
+                price: 'Cash price',
+                oldPrice: 'Previous Price',
+                installationCost: 'Installation cost',
+                articleNumberShort: 'Art. no.',
+                moreInformationAboutAccessory: 'More information about {{accessory}}'
+              }
+            },
+            productCard: {
+              price: 'Price',
+              privateLeasing: 'Privatleasing'
+            },
+            search: {
+              filter: 'Filter',
+              sort: 'Sort',
+              showMore: {
+                text: 'Show more',
+                title: 'Show more results'
+              },
+              filterButton: {
+                text: 'Filter',
+                title: 'Show filter'
+              },
+              sortButton: {
+                text: 'Sort',
+                title: 'Select sort order'
+              },
+              searchResult: 'Search Result',
+              snackbarNoSearchResults: {
+                heading: 'No results',
+                body: 'The search returned no results'
+              },
+              snackBarClearFreeText: {
+                heading: 'No results',
+                body: 'Clear the free text to see all filters'
+              },
+              sortOptions: {
+                relevance: 'Relevance',
+                publishedAsc: 'Published (oldest)',
+                publishedDesc: 'Published (latest)',
+                priceAsc: 'Price (Lowest)',
+                priceDesc: 'Price (Maximum)',
+                modelAsc: 'Year model (oldest)',
+                modelDesc: 'Year Model (Newest)',
+                mileageAsc: 'Mileage (lowest)',
+                mileageDesc: 'Mileage (maximum)'
+              },
+              clearAllFilters: {
+                text: 'Clear all filters',
+                title: 'Clear all filters'
+              },
+              showNumberOfCustomUnit: 'Show {{count}} {{unit}}',
+              result: {
+                singular: 'Car',
+                plural: 'Cars'
+              },
+              freeText: 'Free text',
+              from: 'From',
+              to: 'To',
+              min: 'Min',
+              max: 'Max'
+            },
+            searchBar: {
+              title: 'Search',
+              placeholder: 'Search your car',
+              button: {
+                text: 'Search',
+                title: 'Search'
+              },
+              searchResults: 'Search Results',
+              showAllRsults: 'Show all cars'
+            },
+            other: {
+              loading: 'Loading...',
+              error404: '404',
+              showingNumberOfResults_one: 'Showing {{current}} of {{count}} results',
+              showingNumberOfResults_other: 'Showing {{current}} of {{count}} results',
+              closeModal: 'Close Modal',
+              closePanel: 'Close panel',
+              goToHeading: 'Go to {{heading}}',
+              openDoumentt: 'Open {{document}}',
+              previousImage: 'Previous Image',
+              nextImage: 'Next Image',
+              goToImageIndex: 'Go to image {{index}}',
+              phoneNumber: 'Phone Number',
+              showPhoneNumber: 'Show phone number',
+              callPhoneNumber: 'Call {{phoneNumber}}',
+              price: 'Price',
+              privateLeasingPrice: 'Private Leasing',
+              video: 'Video',
+              playVideo: 'Play video',
+              searchResults: 'Search Results',
+              showAllCars: 'Show all cars'
+            }
+          }
+        }
+      }
+    }, () => {
+      resolve(true);
+    });
+  });
+};
+
+const useInitializeTranslation = marketCode => {
+  const [initialized, setInitialized] = React.useState(() => !!i18next.isInitialized);
+  const initialize = React.useCallback(async m => {
+    await initializeI18n(m);
+    setInitialized(true);
+  }, []);
+  React.useEffect(() => {
+    if (!i18next.isInitialized) {
+      initialize(marketCode);
+    }
+  }, []);
+  return initialized;
+};
+
 const WaykeSearch = ({
+  marketCode,
   filterList,
   initialQueryParams,
   hashRoute,
@@ -2980,6 +3960,7 @@ const WaykeSearch = ({
     onFilterUpdate,
     onInitialize
   } = useSearch();
+  const initialized = useInitializeTranslation(marketCode);
   React.useEffect(() => {
     if (modifyDocumentTitleSearch) {
       document.title = modifyDocumentTitleSearch;
@@ -2998,10 +3979,12 @@ const WaykeSearch = ({
     onFilterUpdate(nextQuery.toString());
   }, [queryFilter.searchParams]);
   const searchQuery = React.useMemo(() => queryFilter.searchParams.get('query'), [documents]);
+  if (!initialized) return null;
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(Page, null, !removeSearchBar && React__default.createElement(PageSection, null, React__default.createElement(Container, null, React__default.createElement(SearchFilter, null))), searchQuery && React__default.createElement(PageSection, null, React__default.createElement(Container, null, React__default.createElement(SearchTerm, {
     onClear: onClearQuery
   }, searchQuery))), !removeFilterOptions && React__default.createElement(PageSection, null, React__default.createElement(Container, null, React__default.createElement(Filter, {
-    filterList: filterList
+    filterList: filterList,
+    marketCode: marketCode
   }))), React__default.createElement(PageSection, {
     accent: true,
     fillSpace: true,
@@ -3020,8 +4003,8 @@ const WaykeSearch = ({
   }), !error && documents && documents.length === 0 && React__default.createElement(Snackbar, {
     severity: "warning",
     icon: true,
-    heading: "Inga resultat"
-  }, "Det finns inga resultat som matchar din s\u00F6kning.")))))), React__default.createElement(PortalElement, {
+    heading: i18next.t('search.snackbarNoSearchResults.heading') || undefined
+  }, i18next.t('search.snackbarNoSearchResults.body'))))))), React__default.createElement(PortalElement, {
     id: DefaultPortal
   }));
 };
@@ -3060,7 +4043,12 @@ const OldPrice$1 = styled__default.div`
 const PriceTable = ({
   price,
   discount
-}) => React__default.createElement(List$6, null, React__default.createElement(Item$6, null, React__default.createElement(Label$5, null, React__default.createElement(VisualHeading, null, "Pris")), React__default.createElement(Value, null, React__default.createElement(Price$1, null, numberSeparator(price), " kr"))), discount !== undefined && React__default.createElement(Item$6, null, React__default.createElement(Label$5, null), React__default.createElement(Value, null, React__default.createElement(OldPrice$1, null, numberSeparator(price + discount), " kr"))));
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  return React__default.createElement(List$6, null, React__default.createElement(Item$6, null, React__default.createElement(Label$5, null, React__default.createElement(VisualHeading, null, t('other.price'))), React__default.createElement(Value, null, React__default.createElement(Price$1, null, numberSeparator(price), " ", t('currency.default')))), discount !== undefined && React__default.createElement(Item$6, null, React__default.createElement(Label$5, null), React__default.createElement(Value, null, React__default.createElement(OldPrice$1, null, numberSeparator(price + discount), " ", t('currency.default')))));
+};
 
 const Logo = styled__default.img`
   display: block;
@@ -4040,36 +5028,8 @@ const Wrapper$j = styled__default.div`
   }
 `;
 
-const ReactPannellum = React.lazy(() => Promise.resolve().then(() => require('react-pannellum')));
-const config = {
-  type: 'equirectangular',
-  autoRotate: -2,
-  autoLoad: true,
-  uiText: {
-    bylineLabel: 'by %s',
-    noPanoramaError: 'No panorama image was specified.',
-    fileAccessError: 'The file %s could not be accessed.',
-    malformedURLError: 'There is something wrong with the panorama URL.',
-    iOS8WebGLError: "Due to iOS 8's broken WebGL implementation, only progressive encoded JPEGs work for your device (this panorama uses standard encoding).",
-    genericWebGLError: 'Your browser does not have the necessary WebGL support to display this panorama.',
-    textureSizeError: "This panorama is too big for your device! It's %spx wide, but your device only supports images up to %spx wide. Try another device. (If you're the author, try scaling down the image.)",
-    unknownError: 'Unknown error. Check developer console.',
-    loadButtonLabel: 'Starta 360° interiört',
-    loadingLabel: 'Laddar...'
-  },
-  preview: '/images/placeholders/placeholder_product_card.jpg',
-  compass: true,
-  showZoomCtrl: true,
-  keyboardZoom: false,
-  mouseZoom: false,
-  hfov: 180
-};
-const style = {
-  height: 0,
-  width: '100%',
-  paddingBottom: '66.666%',
-  touchAction: 'manipulation'
-};
+// Skip loading pannellum with video
+const Pannellum = React.lazy(() => Promise.resolve().then(() => require('@wayke-se/pannellum-react')));
 const SphereViewer = ({
   id,
   src,
@@ -4086,18 +5046,16 @@ const SphereViewer = ({
       }
     }, 100);
   }, []);
-  const c = _objectSpread2(_objectSpread2({}, config), {}, {
-    preview,
-    autoLoad
-  });
-  return React__default.createElement(Wrapper$j, null, React__default.createElement(React__default.Suspense, {
+  return React__default.createElement(Wrapper$j, null, React__default.createElement(React.Suspense, {
     fallback: React__default.createElement(Loader, null)
-  }, React__default.createElement(ReactPannellum, {
+  }, React__default.createElement(Pannellum, {
     id: `a-${id}-${number}`,
-    sceneId: src,
-    imageSource: src,
-    config: c,
-    style: style
+    panorama: src,
+    hfov: 120,
+    autoLoad: autoLoad,
+    compass: true,
+    width: '100%',
+    preview: preview
   })));
 };
 
@@ -4235,6 +5193,9 @@ const Rotation = ({
 const ThreeSixtyLightbox = ({
   urls
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [started, setStarted] = React.useState(false);
   const onStart = React.useCallback(() => setStarted(true), []);
   if (!started) {
@@ -4242,14 +5203,16 @@ const ThreeSixtyLightbox = ({
       src: urls[0],
       alt: "alt"
     }), React__default.createElement(MediaButton, {
-      text: "Starta 360\u00B0 exteri\u00F6rt",
+      text: t('item.start360Exterior'),
       onClick: onStart
     }));
   }
   return React__default.createElement(Rotation, null, urls.map((image, i) => React__default.createElement(Img$1, {
     key: image,
     src: image,
-    alt: `Bild ${i + 1}`
+    alt: t('common.imageIndex', {
+      index: i + 1
+    }) || ''
   })));
 };
 
@@ -4258,6 +5221,9 @@ const Lightbox = ({
   media,
   onClose
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const onRef = ref => {
     if (ref) {
       setTimeout(() => {
@@ -4283,7 +5249,9 @@ const Lightbox = ({
   }, m.type === 'image' && React__default.createElement(Img$1, {
     id: `lightbox-image-${i}`,
     src: m.files[0].url,
-    alt: `Bild ${i + 1}`
+    alt: t('common.imageIndex', {
+      index: i + 1
+    }) || ''
   }), m.type === 'threesixty' && React__default.createElement(ThreeSixtyLightbox, {
     urls: m.files.map(x => x.url)
   }), m.type === 'sphere' && React__default.createElement(SphereLightbox, {
@@ -4292,7 +5260,7 @@ const Lightbox = ({
     url: m.files[0].url
   }))), React__default.createElement(CloseBtn$1, {
     onClick: onClose,
-    title: "St\u00E4ng"
+    title: t('common.close') || ''
   }, React__default.createElement(IconCancel, {
     block: true
   })));
@@ -4515,18 +5483,21 @@ const Modal = ({
   onClose,
   children
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   return React.createElement(Portal$1, {
     id: id || DefaultPortal
   }, React.createElement(Wrapper$k, {
     onClick: e => e.stopPropagation()
   }, React.createElement(UiBlock$2, {
     onClick: onClose,
-    title: "St\u00E4ng modal"
+    title: t('other.closeModal') || ''
   }), React.createElement(Dialog, null, React.createElement(Content$3, null, React.createElement(Header$3, null, React.createElement(Heading$4, null, React.createElement(H1, {
     noMargin: true
   }, title)), React.createElement(Close$1, null, React.createElement(CloseBtn$2, {
     onClick: onClose,
-    title: "St\u00E4ng modal"
+    title: t('other.closeModal') || ''
   }, React.createElement(IconCancel, {
     block: true
   })))), React.createElement(Body$3, null, children)))));
@@ -4536,6 +5507,9 @@ const GalleryEmbed = ({
   src,
   index
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [modal, setModal] = React.useState();
   const thumbnail = useThumbnail(src);
   const onClick = e => {
@@ -4554,12 +5528,14 @@ const GalleryEmbed = ({
       onLoad: onLoad,
       src: thumbnail[0],
       onError: onError,
-      alt: `Bild ${index + 1}`
+      alt: t('common.imageIndex', {
+        index: index + 1
+      }) || ''
     }), React__default.createElement(MediaButton, {
-      text: "Spela video",
+      text: t('other.playVideo'),
       onClick: onClick
     }), modal && React__default.createElement(Modal, {
-      title: "Video",
+      title: t('other.video'),
       onClose: onCloseModal
     }, React__default.createElement(VideoPlayer, {
       url: modal
@@ -4571,10 +5547,10 @@ const GalleryEmbed = ({
     controls: false,
     url: src
   }), React__default.createElement(MediaButton, {
-    text: "Spela video",
+    text: t('other.playVideo'),
     onClick: onClick
   }), modal && React__default.createElement(Modal, {
-    title: "Video",
+    title: t('other.video'),
     onClose: onCloseModal
   }, React__default.createElement(VideoPlayer, {
     url: modal
@@ -4586,6 +5562,9 @@ const QuickNavEmbeded = ({
   src,
   index
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const thumbnail = useThumbnail(src);
   const onError = React.useCallback(e => onImageError(e, thumbnail), [thumbnail]);
   const onLoad = React.useCallback(e => onImageLoad(e, thumbnail), [thumbnail]);
@@ -4594,7 +5573,9 @@ const QuickNavEmbeded = ({
     onLoad: onLoad,
     src: thumbnail[0],
     onError: onError,
-    alt: `Bild ${index + 1}`
+    alt: t('common.imageIndex', {
+      index: index + 1
+    }) || ''
   });
   if (customVideo) return React__default.createElement(CustomPlayer, {
     key: index,
@@ -4616,12 +5597,15 @@ const Sphere = ({
   onDisableNavigation,
   navigationDisabled
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   if (!visible || !navigationDisabled && visible) {
     return React__default.createElement(React__default.Fragment, null, React__default.createElement(ImageFull, {
       src: preview,
       alt: "alt"
     }), React__default.createElement(MediaButton, {
-      text: "Starta 360\u00B0 interi\u00F6rt",
+      text: t('item.start360Interior'),
       onClick: e => onMediaClick(e, onDisableNavigation)
     }));
   }
@@ -4648,12 +5632,15 @@ const ThreeSixty = ({
   onDisableNavigation,
   navigationDisabled
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   if (!visible || !navigationDisabled && visible) {
     return React__default.createElement(React__default.Fragment, null, React__default.createElement(Image$1, {
       src: urls[0],
       alt: "alt"
     }), React__default.createElement(MediaButton, {
-      text: "Starta 360\u00B0 exteri\u00F6rt",
+      text: t('item.start360Exterior'),
       onClick: e => onMediaClick$1(e, onDisableNavigation)
     }));
   }
@@ -4666,7 +5653,9 @@ const ThreeSixty = ({
     }, React__default.createElement(Rotation, null, urls.map((image, i) => React__default.createElement(Image$1, {
       key: image,
       src: image,
-      alt: `Bild ${i + 1}`
+      alt: t('common.imageIndex', {
+        index: i + 1
+      }) || ''
     }))));
   }
   return null;
@@ -4684,6 +5673,9 @@ const Gallery = ({
   media,
   placeholderImage
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const slider = React.useRef(null);
   const quickNavRef = React.useRef(null);
   const isDragging = React.useRef(false);
@@ -4691,8 +5683,8 @@ const Gallery = ({
   const [lightbox, setLightbox] = React.useState(false);
   const [navigationDisabled, setNavigationDisabled] = React.useState(false);
   const beforeChange = React.useCallback((_, newIndex) => {
-    var _quickNavRef$current, _quickNavRef$current$;
-    const element = (_quickNavRef$current = quickNavRef.current) === null || _quickNavRef$current === void 0 ? void 0 : (_quickNavRef$current$ = _quickNavRef$current.querySelectorAll('li')) === null || _quickNavRef$current$ === void 0 ? void 0 : _quickNavRef$current$[newIndex];
+    var _quickNavRef$current;
+    const element = (_quickNavRef$current = quickNavRef.current) === null || _quickNavRef$current === void 0 || (_quickNavRef$current = _quickNavRef$current.querySelectorAll('li')) === null || _quickNavRef$current === void 0 ? void 0 : _quickNavRef$current[newIndex];
     if (element) {
       scrollIntoView(element, {
         scrollMode: 'if-needed',
@@ -4766,7 +5758,9 @@ const Gallery = ({
       key: m.files[0].url || i
     }, m.type === 'image' && React__default.createElement(Image$1, {
       src: (_m$files$0$formats$fi = m.files[0].formats.filter(notEmpty).find(x => x.format === '1170x')) === null || _m$files$0$formats$fi === void 0 ? void 0 : _m$files$0$formats$fi.url,
-      alt: `Bild ${i + 1}`
+      alt: t('common.imageIndex', {
+        index: i + 1
+      }) || ''
     }), m.type === 'threesixty' && React__default.createElement(ThreeSixty, {
       urls: m.files.map(x => x.url),
       visible: i === index,
@@ -4786,18 +5780,20 @@ const Gallery = ({
     key: placeholder
   }, React__default.createElement(Image$1, {
     src: placeholder,
-    alt: `Bild 1`
+    alt: t('common.imageIndex', {
+      index: 1
+    }) || ''
   }))), navigationDisabled && mediaLength > 1 && React__default.createElement(EnableNavigationButton, null, React__default.createElement(ButtonSecondary, {
     onClick: onEnableNavigation,
-    title: "St\u00E4ng"
-  }, React__default.createElement(ButtonContent, null, "St\u00E4ng")))), !navigationDisabled && mediaLength > 1 && React__default.createElement(React__default.Fragment, null, React__default.createElement(ArrowLeft, null, React__default.createElement(NavButton, {
+    title: t('common.close') || ''
+  }, React__default.createElement(ButtonContent, null, t('common.close'))))), !navigationDisabled && mediaLength > 1 && React__default.createElement(React__default.Fragment, null, React__default.createElement(ArrowLeft, null, React__default.createElement(NavButton, {
     onClick: prevImage,
-    title: "F\u00F6reg\u00E5ende bild"
+    title: t('other.previousImage') || ''
   }, React__default.createElement(IconChevronLeft, {
     block: true
   }))), React__default.createElement(ArrowRight, null, React__default.createElement(NavButton, {
     onClick: nextImage,
-    title: "N\u00E4sta bild"
+    title: t('other.nextImage') || ''
   }, React__default.createElement(IconChevronRight, {
     block: true
   }))))), React__default.createElement(Alt, null, React__default.createElement(QuickNav, {
@@ -4810,29 +5806,41 @@ const Gallery = ({
       active: index === i
     }, React__default.createElement(QuickNavBtn, {
       onClick: () => goTo(i),
-      title: `Gå till bild ${i + 1}`
+      title: t('other.goToImageIndex', {
+        index: i + 1
+      }) || ''
     }, m.type === 'image' && React__default.createElement(QuickNavImg, {
       src: src,
-      alt: `Bild ${i + 1}`
+      alt: t('common.imageIndex', {
+        index: i + 1
+      }) || ''
     }), m.type === 'threesixty' && React__default.createElement(QuickNavImg, {
       src: src,
-      alt: `Bild ${i + 1}`
+      alt: t('common.imageIndex', {
+        index: i + 1
+      }) || ''
     }), m.type === 'embedded' && React__default.createElement(QuickNavEmbeded, {
       src: src,
       index: i
     }), m.type === 'sphere' && React__default.createElement(QuickNavImg, {
       src: m.files[0].url,
-      alt: `Bild ${i + 1}`
+      alt: t('common.imageIndex', {
+        index: i + 1
+      }) || ''
     })));
   }) : React__default.createElement(QuickNavItem, {
     key: placeholder,
     active: true
   }, React__default.createElement(QuickNavBtn, {
     onClick: () => goTo(0),
-    title: `Gå till bild 0`
+    title: t('other.goToImageIndex', {
+      index: 1
+    }) || ''
   }, React__default.createElement(QuickNavImg, {
     src: placeholder,
-    alt: `Bild 1`
+    alt: t('common.imageIndex', {
+      index: 1
+    }) || ''
   })))))), lightbox && !!(media !== null && media !== void 0 && media.length) && React__default.createElement(Lightbox, {
     media: media,
     index: index,
@@ -5082,6 +6090,10 @@ const SEARCH_ITEM_QUERY = client.gql`
         manufactureYear
         manufacturer
         mileage
+        odometerReading {
+          value
+          unit
+        }
         modelName
         modelSeries
         modelYear
@@ -5276,6 +6288,9 @@ const DataList = ({
 const Leasing = ({
   financialOption
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [modal, setModal] = React.useState(false);
   const toggleModal = React.useCallback(() => setModal(!modal), [modal]);
   const {
@@ -5287,7 +6302,7 @@ const Leasing = ({
     type,
     name
   } = financialOption;
-  const title = type === 'leasing' ? 'Privatleasa' : type === 'business-leasing' ? 'Företagsleasa' : type;
+  const title = type === 'leasing' ? t('item.financialOptions.privateLease') : type === 'business-leasing' ? t('item.financialOptions.businessLease') : type;
   return React__default.createElement(React__default.Fragment, null, modal && React__default.createElement(Modal, {
     title: title,
     onClose: toggleModal
@@ -5300,18 +6315,18 @@ const Leasing = ({
     }
   }), React__default.createElement(ModalFoldout, null, React__default.createElement(ModalFoldoutBody, null, React__default.createElement(DataList, {
     items: [{
-      label: 'Månadskostnad',
-      value: `${numberSeparator(monthlyCost || 0)} kr/mån`
+      label: t('item.financialOptions.monthlyCost'),
+      value: `${numberSeparator(monthlyCost || 0)} ${t('currency.monthly')}`
     }, {
-      label: 'Bindningstid',
+      label: t('item.financialOptions.bindingTime'),
       value: `${duration === null || duration === void 0 ? void 0 : duration.current} månader`
     }, {
-      label: 'Årlig körsträcka',
-      value: `${numberSeparator((mileage === null || mileage === void 0 ? void 0 : mileage.current) || 0)} mil/år`
+      label: t('item.financialOptions.annualMileage'),
+      value: `${numberSeparator((mileage === null || mileage === void 0 ? void 0 : mileage.current) || 0)} ${t('item.financialOptions.mileagePeryear')}`
     }]
-  })))), React__default.createElement(OptionBox, null, React__default.createElement(React__default.Fragment, null, monthlyCost !== null && monthlyCost !== undefined && React__default.createElement(OptionBoxHeading, null, `ca ${numberSeparator(monthlyCost)} kr/mån`)), React__default.createElement(OptionBoxContent, null, React__default.createElement("p", null, title, ' ', (mileage === null || mileage === void 0 ? void 0 : mileage.current) && (duration === null || duration === void 0 ? void 0 : duration.current) && React__default.createElement(React__default.Fragment, null, React__default.createElement(UtilityTextPrimary, null, numberSeparator(mileage === null || mileage === void 0 ? void 0 : mileage.current), " mil/\u00E5r"), ' ', "i ", React__default.createElement(UtilityTextPrimary, null, duration === null || duration === void 0 ? void 0 : duration.current, " m\u00E5n"), ".", ' ')), name && React__default.createElement("p", null, React__default.createElement(ButtonInline, {
+  })))), React__default.createElement(OptionBox, null, React__default.createElement(React__default.Fragment, null, monthlyCost !== null && monthlyCost !== undefined && React__default.createElement(OptionBoxHeading, null, `ca ${numberSeparator(monthlyCost)} ${t('currency.monthly')}`)), React__default.createElement(OptionBoxContent, null, React__default.createElement("p", null, title, ' ', (mileage === null || mileage === void 0 ? void 0 : mileage.current) && (duration === null || duration === void 0 ? void 0 : duration.current) && React__default.createElement(React__default.Fragment, null, React__default.createElement(UtilityTextPrimary, null, numberSeparator(mileage === null || mileage === void 0 ? void 0 : mileage.current), " ", t('item.financialOptions.mileagePeryear')), ' ', "i", ' ', React__default.createElement(UtilityTextPrimary, null, duration === null || duration === void 0 ? void 0 : duration.current, " ", t('item.financialOptions.months')), ".", ' ')), name && React__default.createElement("p", null, React__default.createElement(ButtonInline, {
     onClick: toggleModal
-  }, "L\u00E4s mer")))));
+  }, t('common.readMore'))))));
 };
 
 const FinancialOptionDetail$1 = client.gql`
@@ -5520,6 +6535,9 @@ const LoanModal = ({
   onClose
 }) => {
   var _financialOption$dura, _financialOption$down, _financialOption$resi, _loan$downPayment, _loan$downPayment2, _loan$downPayment3, _loan$downPayment4, _loan$duration, _loan$duration2, _loan$duration3, _loan$duration4, _loan$residual, _loan$residual2, _loan$residual3, _loan$residual4;
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [tmp, setTmp] = React.useState();
   const [extend, setExtend] = React__default.useState(false);
   const onToggleExtend = React__default.useCallback(() => {
@@ -5544,20 +6562,20 @@ const LoanModal = ({
   } = useLoanCalculation(id, duration, downPayment, residual);
   React.useEffect(() => {
     if (data) {
-      var _data$loan, _data$loan$duration, _data$loan2, _data$loan2$downPayme, _data$loan3, _data$loan3$residual;
+      var _data$loan, _data$loan2, _data$loan3;
       setTmp(data);
       setVariables({
-        duration: (data === null || data === void 0 ? void 0 : (_data$loan = data.loan) === null || _data$loan === void 0 ? void 0 : (_data$loan$duration = _data$loan.duration) === null || _data$loan$duration === void 0 ? void 0 : _data$loan$duration.current) || 0,
-        downPayment: (data === null || data === void 0 ? void 0 : (_data$loan2 = data.loan) === null || _data$loan2 === void 0 ? void 0 : (_data$loan2$downPayme = _data$loan2.downPayment) === null || _data$loan2$downPayme === void 0 ? void 0 : _data$loan2$downPayme.current) || 0,
-        residual: (data === null || data === void 0 ? void 0 : (_data$loan3 = data.loan) === null || _data$loan3 === void 0 ? void 0 : (_data$loan3$residual = _data$loan3.residual) === null || _data$loan3$residual === void 0 ? void 0 : _data$loan3$residual.current) || 0
+        duration: (data === null || data === void 0 || (_data$loan = data.loan) === null || _data$loan === void 0 || (_data$loan = _data$loan.duration) === null || _data$loan === void 0 ? void 0 : _data$loan.current) || 0,
+        downPayment: (data === null || data === void 0 || (_data$loan2 = data.loan) === null || _data$loan2 === void 0 || (_data$loan2 = _data$loan2.downPayment) === null || _data$loan2 === void 0 ? void 0 : _data$loan2.current) || 0,
+        residual: (data === null || data === void 0 || (_data$loan3 = data.loan) === null || _data$loan3 === void 0 || (_data$loan3 = _data$loan3.residual) === null || _data$loan3 === void 0 ? void 0 : _data$loan3.current) || 0
       });
     }
   }, [data]);
   const loan = (data === null || data === void 0 ? void 0 : data.loan) || (tmp === null || tmp === void 0 ? void 0 : tmp.loan);
-  const downPaymentCurrent = (loan === null || loan === void 0 ? void 0 : (_loan$downPayment = loan.downPayment) === null || _loan$downPayment === void 0 ? void 0 : _loan$downPayment.current) || 0;
-  const downPaymentMin = (loan === null || loan === void 0 ? void 0 : (_loan$downPayment2 = loan.downPayment) === null || _loan$downPayment2 === void 0 ? void 0 : _loan$downPayment2.min) || 0;
-  const downPaymentMax = (loan === null || loan === void 0 ? void 0 : (_loan$downPayment3 = loan.downPayment) === null || _loan$downPayment3 === void 0 ? void 0 : _loan$downPayment3.max) || 0;
-  const downPaymentStep = (loan === null || loan === void 0 ? void 0 : (_loan$downPayment4 = loan.downPayment) === null || _loan$downPayment4 === void 0 ? void 0 : _loan$downPayment4.step) || 0;
+  const downPaymentCurrent = (loan === null || loan === void 0 || (_loan$downPayment = loan.downPayment) === null || _loan$downPayment === void 0 ? void 0 : _loan$downPayment.current) || 0;
+  const downPaymentMin = (loan === null || loan === void 0 || (_loan$downPayment2 = loan.downPayment) === null || _loan$downPayment2 === void 0 ? void 0 : _loan$downPayment2.min) || 0;
+  const downPaymentMax = (loan === null || loan === void 0 || (_loan$downPayment3 = loan.downPayment) === null || _loan$downPayment3 === void 0 ? void 0 : _loan$downPayment3.max) || 0;
+  const downPaymentStep = (loan === null || loan === void 0 || (_loan$downPayment4 = loan.downPayment) === null || _loan$downPayment4 === void 0 ? void 0 : _loan$downPayment4.step) || 0;
   const downPaymentSteps = stepGenerator(downPaymentStep, downPaymentMax);
   const onDownPaymentChange = React.useCallback(values => {
     PubSub.publish('FinanceInterest');
@@ -5565,10 +6583,10 @@ const LoanModal = ({
       downPayment: values[0]
     }));
   }, [variables]);
-  const durationCurrent = (loan === null || loan === void 0 ? void 0 : (_loan$duration = loan.duration) === null || _loan$duration === void 0 ? void 0 : _loan$duration.current) || 0;
-  const durationMin = (loan === null || loan === void 0 ? void 0 : (_loan$duration2 = loan.duration) === null || _loan$duration2 === void 0 ? void 0 : _loan$duration2.min) || 0;
-  const durationMax = (loan === null || loan === void 0 ? void 0 : (_loan$duration3 = loan.duration) === null || _loan$duration3 === void 0 ? void 0 : _loan$duration3.max) || 0;
-  const durationStep = (loan === null || loan === void 0 ? void 0 : (_loan$duration4 = loan.duration) === null || _loan$duration4 === void 0 ? void 0 : _loan$duration4.step) || 0;
+  const durationCurrent = (loan === null || loan === void 0 || (_loan$duration = loan.duration) === null || _loan$duration === void 0 ? void 0 : _loan$duration.current) || 0;
+  const durationMin = (loan === null || loan === void 0 || (_loan$duration2 = loan.duration) === null || _loan$duration2 === void 0 ? void 0 : _loan$duration2.min) || 0;
+  const durationMax = (loan === null || loan === void 0 || (_loan$duration3 = loan.duration) === null || _loan$duration3 === void 0 ? void 0 : _loan$duration3.max) || 0;
+  const durationStep = (loan === null || loan === void 0 || (_loan$duration4 = loan.duration) === null || _loan$duration4 === void 0 ? void 0 : _loan$duration4.step) || 0;
   const durationSteps = stepGenerator(durationStep, durationMax);
   const onDurationChange = React.useCallback(values => {
     PubSub.publish('FinanceInterest');
@@ -5576,10 +6594,10 @@ const LoanModal = ({
       duration: values[0]
     }));
   }, [variables]);
-  const residualCurrent = ((loan === null || loan === void 0 ? void 0 : (_loan$residual = loan.residual) === null || _loan$residual === void 0 ? void 0 : _loan$residual.current) || 0) * 100 || 0;
-  const residualMin = ((loan === null || loan === void 0 ? void 0 : (_loan$residual2 = loan.residual) === null || _loan$residual2 === void 0 ? void 0 : _loan$residual2.min) || 0) * 100 || 0;
-  const residualMax = ((loan === null || loan === void 0 ? void 0 : (_loan$residual3 = loan.residual) === null || _loan$residual3 === void 0 ? void 0 : _loan$residual3.max) || 0) * 100 || 0;
-  const residualStep = ((loan === null || loan === void 0 ? void 0 : (_loan$residual4 = loan.residual) === null || _loan$residual4 === void 0 ? void 0 : _loan$residual4.step) || 0) * 100 || 0;
+  const residualCurrent = ((loan === null || loan === void 0 || (_loan$residual = loan.residual) === null || _loan$residual === void 0 ? void 0 : _loan$residual.current) || 0) * 100 || 0;
+  const residualMin = ((loan === null || loan === void 0 || (_loan$residual2 = loan.residual) === null || _loan$residual2 === void 0 ? void 0 : _loan$residual2.min) || 0) * 100 || 0;
+  const residualMax = ((loan === null || loan === void 0 || (_loan$residual3 = loan.residual) === null || _loan$residual3 === void 0 ? void 0 : _loan$residual3.max) || 0) * 100 || 0;
+  const residualStep = ((loan === null || loan === void 0 || (_loan$residual4 = loan.residual) === null || _loan$residual4 === void 0 ? void 0 : _loan$residual4.step) || 0) * 100 || 0;
   const residualSteps = stepGenerator(residualStep, residualMax);
   const onResidualChange = React.useCallback(values => {
     PubSub.publish('FinanceInterest');
@@ -5589,59 +6607,67 @@ const LoanModal = ({
   }, [variables]);
   const interestText = (((loan === null || loan === void 0 ? void 0 : loan.interest) || 0) * 100).toFixed(2);
   const effectiveInterestText = (((loan === null || loan === void 0 ? void 0 : loan.effectiveInterest) || 0) * 100).toFixed(2);
+  const monthlyCost = loan === null || loan === void 0 ? void 0 : loan.monthlyCost;
   return React__default.createElement(Modal, {
-    title: "L\u00E5nealternativ",
+    title: t('item.financialOptions.loanOptions'),
     onClose: onClose
   }, React__default.createElement(Repeat, null, React__default.createElement(ContentLogo, null, (financialOption === null || financialOption === void 0 ? void 0 : financialOption.description) && React__default.createElement(ContentLogoText, null, React__default.createElement(Content$2, null, React__default.createElement("p", null, financialOption.description))), (financialOption === null || financialOption === void 0 ? void 0 : financialOption.image) && React__default.createElement(ContentLogoMedia, null, React__default.createElement(LogoBox, {
     logo: financialOption.image,
-    alt: financialOption.name || 'Logotyp',
+    alt: financialOption.name || t('common.logotype'),
     wide: true
   })))), React__default.createElement(Repeat, null, React__default.createElement(RepeatSmall, null, React__default.createElement(SliderWithLabel, {
-    label: "Kontantinsatts",
+    label: t('item.financialOptions.downPayment'),
     values: [downPaymentCurrent],
     domain: [downPaymentMin, downPaymentMax],
     steps: downPaymentSteps,
-    unit: "kr",
+    unit: t('currency.default'),
     formatValues: true,
     loading: loading,
     onChange: onDownPaymentChange
   })), React__default.createElement(RepeatSmall, null, React__default.createElement(SliderWithLabel, {
-    label: "Avbetalning",
+    label: t('item.financialOptions.duration'),
     values: [durationCurrent],
     domain: [durationMin, durationMax],
     steps: durationSteps,
-    unit: "m\u00E5n",
+    unit: t('item.financialOptions.months'),
     loading: loading,
     onChange: onDurationChange
   })), residual !== undefined && residualMax !== 0 && React__default.createElement(RepeatSmall, null, React__default.createElement(SliderWithLabel, {
-    label: "Restskuld",
+    label: t('item.financialOptions.residual'),
     values: [residualCurrent],
     domain: [residualMin, residualMax],
     steps: residualSteps,
     unit: "%",
     loading: loading,
     onChange: onResidualChange
-  })), React__default.createElement(RepeatSmall, null, React__default.createElement(RepeatTiny, null, React__default.createElement(Content$2, {
+  })), React__default.createElement(RepeatSmall, null, React__default.createElement(RepeatTiny, null, monthlyCost !== null && monthlyCost !== undefined && React__default.createElement(Content$2, null, `${numberSeparator(monthlyCost)} ${t('currency.monthly')}*`), React__default.createElement(Content$2, {
     small: true
-  }, React__default.createElement("p", null, `*Beräknat på ${interestText} % ränta (effektivt ${effectiveInterestText} %)${(loan === null || loan === void 0 ? void 0 : loan.mileage) !== null ? `och en årlig körsträcka om ${loan === null || loan === void 0 ? void 0 : loan.mileage} mil.` : ''}`)))), React__default.createElement(RepeatSmall, null, React__default.createElement(ButtonClear, {
+  }, React__default.createElement("p", null, "*", (loan === null || loan === void 0 ? void 0 : loan.mileage) !== null ? t('item.financialOptions.loanOptionsDisclaimerMileage', {
+    interest: interestText,
+    effectiveInterest: effectiveInterestText,
+    mileage: loan === null || loan === void 0 ? void 0 : loan.mileage
+  }) : t('item.financialOptions.loanOptionsDisclaimer', {
+    interest: interestText,
+    effectiveInterest: effectiveInterestText
+  }))))), React__default.createElement(RepeatSmall, null, React__default.createElement(ButtonClear, {
     onClick: onToggleExtend,
-    title: extend ? 'Visa mindre information' : 'Visa mer information'
-  }, React__default.createElement(ButtonContent, null, extend ? 'Mindre information' : 'Mer information'))), React__default.createElement(React__default.Fragment, null, extend && React__default.createElement(ModalFoldout, null, React__default.createElement(ModalFoldoutBody, null, React__default.createElement(DataList, {
+    title: extend ? t('common.showLessInformation') || '' : t('common.showMoreInformation') || ''
+  }, React__default.createElement(ButtonContent, null, extend ? t('common.lessInformation') : t('common.showMoreInformation')))), React__default.createElement(React__default.Fragment, null, extend && React__default.createElement(ModalFoldout, null, React__default.createElement(ModalFoldoutBody, null, React__default.createElement(DataList, {
     items: [{
-      label: 'Ränta',
+      label: t('item.financialOptions.interest'),
       value: `${interestText} %`
     }, {
-      label: 'Effektiv ränta',
+      label: t('item.financialOptions.effectiveinterest'),
       value: `${effectiveInterestText} %`
     }, {
-      label: 'Uppläggningskostnad',
-      value: `${numberSeparator((financialOption === null || financialOption === void 0 ? void 0 : financialOption.setupFee) || 0)} kr`
+      label: t('item.financialOptions.setupFee'),
+      value: `${numberSeparator((financialOption === null || financialOption === void 0 ? void 0 : financialOption.setupFee) || 0)} ${t('currency.default')}`
     }, {
-      label: 'Administrativa avgifter',
-      value: `${numberSeparator((financialOption === null || financialOption === void 0 ? void 0 : financialOption.administrationFee) || 0)} kr/mån`
+      label: t('item.financialOptions.administrationFee'),
+      value: `${numberSeparator((financialOption === null || financialOption === void 0 ? void 0 : financialOption.administrationFee) || 0)} ${t('currency.monthly')}`
     }, {
-      label: 'Total kreditkostnad',
-      value: `${numberSeparator((loan === null || loan === void 0 ? void 0 : loan.totalCreditCost) || 0)} kr`
+      label: t('item.financialOptions.totalCreditCost'),
+      value: `${numberSeparator((loan === null || loan === void 0 ? void 0 : loan.totalCreditCost) || 0)} ${t('currency.default')}`
     }]
   }))))));
 };
@@ -5650,22 +6676,25 @@ const Loan = ({
   id,
   financialOption
 }) => {
-  var _financialOption$dura, _financialOption$down, _financialOption$resi, _data$loan, _data$loan2, _data$loan2$duration, _data$loan3;
+  var _financialOption$dura, _financialOption$down, _financialOption$resi, _data$loan, _data$loan2, _data$loan3;
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [modal, setModal] = React.useState(false);
   const toggleModal = React.useCallback(() => setModal(!modal), [modal]);
   const {
     data
   } = useLoanCalculation(id, (_financialOption$dura = financialOption.duration) === null || _financialOption$dura === void 0 ? void 0 : _financialOption$dura.current, (_financialOption$down = financialOption.downPayment) === null || _financialOption$down === void 0 ? void 0 : _financialOption$down.current, (_financialOption$resi = financialOption.residual) === null || _financialOption$resi === void 0 ? void 0 : _financialOption$resi.current);
-  const interest = data === null || data === void 0 ? void 0 : (_data$loan = data.loan) === null || _data$loan === void 0 ? void 0 : _data$loan.interest;
-  const duration = data === null || data === void 0 ? void 0 : (_data$loan2 = data.loan) === null || _data$loan2 === void 0 ? void 0 : (_data$loan2$duration = _data$loan2.duration) === null || _data$loan2$duration === void 0 ? void 0 : _data$loan2$duration.current;
-  const monthlyCost = data === null || data === void 0 ? void 0 : (_data$loan3 = data.loan) === null || _data$loan3 === void 0 ? void 0 : _data$loan3.monthlyCost;
+  const interest = data === null || data === void 0 || (_data$loan = data.loan) === null || _data$loan === void 0 ? void 0 : _data$loan.interest;
+  const duration = data === null || data === void 0 || (_data$loan2 = data.loan) === null || _data$loan2 === void 0 || (_data$loan2 = _data$loan2.duration) === null || _data$loan2 === void 0 ? void 0 : _data$loan2.current;
+  const monthlyCost = data === null || data === void 0 || (_data$loan3 = data.loan) === null || _data$loan3 === void 0 ? void 0 : _data$loan3.monthlyCost;
   const logo = (financialOption === null || financialOption === void 0 ? void 0 : financialOption.logotype) || 'https://placehold.it/67x10';
   // Skeleton?
   if (financialOption.loanAmount === undefined || financialOption.loanAmount === null || interest === undefined || duration === undefined || monthlyCost === undefined || interest === null || duration === null || monthlyCost === null) {
     return React__default.createElement(OptionBox, {
       logo: logo,
-      logoAlt: "Logotyp"
-    }, React__default.createElement(OptionBoxHeading, null, "Laddar..."), React__default.createElement(OptionBoxContent, null, React__default.createElement("p", null, "Laddar...")));
+      logoAlt: t('common.logotype')
+    }, React__default.createElement(OptionBoxHeading, null, t('other.loading')), React__default.createElement(OptionBoxContent, null, React__default.createElement("p", null, t('other.loading'))));
   }
   return React__default.createElement(React__default.Fragment, null, modal && React__default.createElement(LoanModal, {
     id: id,
@@ -5673,23 +6702,33 @@ const Loan = ({
     onClose: toggleModal
   }), React__default.createElement(OptionBox, {
     logo: logo,
-    logoAlt: "Logotyp"
-  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(OptionBoxHeading, null, `${numberSeparator(monthlyCost)} kr/mån*`), React__default.createElement(OptionBoxContent, null, React__default.createElement("p", null, "Delbetala", ' ', financialOption.loanAmount && duration && React__default.createElement(React__default.Fragment, null, React__default.createElement(UtilityTextPrimary, null, numberSeparator(financialOption.loanAmount), " kr"), ' ', "i ", React__default.createElement(UtilityTextPrimary, null, duration, " m\u00E5n"), ".")), React__default.createElement("p", null, `*Beräknat på ${(interest * 100).toFixed(2)}% ränta. `, React__default.createElement(ButtonInline, {
+    logoAlt: t('common.logotype')
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(OptionBoxHeading, null, `${numberSeparator(monthlyCost)} ${t('currency.monthly')}*`), React__default.createElement(OptionBoxContent, null, React__default.createElement("p", null, financialOption.loanAmount && duration ? t('item.financialOptions.payInInstallmentsDetailed', {
+    amount: `${numberSeparator(financialOption.loanAmount)} kr`,
+    duration
+  }) : t('item.financialOptions.payInInstallments')), React__default.createElement("p", null, "*", t('item.financialOptions.disclaimer', {
+    interest: `${(interest * 100).toFixed(2)}%`
+  }), ' ', React__default.createElement(ButtonInline, {
     onClick: toggleModal
-  }, "L\u00E4s mer"))))));
+  }, t('common.readMore')))))));
 };
 
 const FinancialOptions = ({
   id,
   financialOptions
-}) => React__default.createElement(Repeat, null, React__default.createElement(RepeatTiny, null, React__default.createElement(VisualHeading, null, "Andra finansieringsalternativ")), React__default.createElement(RepeatTiny, null, financialOptions.map((financialOption, index) => React__default.createElement(React.Fragment, {
-  key: index
-}, (financialOption.type === 'leasing' || financialOption.type === 'business-leasing') && React__default.createElement(Leasing, {
-  financialOption: financialOption
-}), financialOption.type === 'loan' && React__default.createElement(Loan, {
-  id: id,
-  financialOption: financialOption
-})))));
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  return React__default.createElement(Repeat, null, React__default.createElement(RepeatTiny, null, React__default.createElement(VisualHeading, null, t('item.financialOptions.otherFinancialOptions'))), React__default.createElement(RepeatTiny, null, financialOptions.map((financialOption, index) => React__default.createElement(React.Fragment, {
+    key: index
+  }, (financialOption.type === 'leasing' || financialOption.type === 'business-leasing') && React__default.createElement(Leasing, {
+    financialOption: financialOption
+  }), financialOption.type === 'loan' && React__default.createElement(Loan, {
+    id: id,
+    financialOption: financialOption
+  })))));
+};
 
 const Wrapper$n = styled__default.article`
   box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
@@ -5721,9 +6760,12 @@ const DetailBox = ({
   description,
   children
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [extend, setExtend] = React__default.useState(false);
   const onToggleExtend = React__default.useCallback(() => setExtend(!extend), [extend]);
-  const extendBtnText = extend ? 'Mindre information' : 'Mer information';
+  const extendBtnText = extend ? t('common.lessInformation') : t('common.moreInformation');
   return React__default.createElement(Wrapper$n, null, React__default.createElement(Main$1, null, React__default.createElement(Heading$5, null, heading), description && React__default.createElement(Description$2, null, description), React__default.createElement(Footer$2, null, React__default.createElement(ButtonClear, {
     onClick: onToggleExtend
   }, React__default.createElement(ButtonContent, null, extendBtnText)))), extend && React__default.createElement(Foldout, null, children));
@@ -5787,11 +6829,14 @@ const ExtendInfo = ({
   title,
   children
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [extend, setExtend] = React.useState(false);
   const onToggleExtend = React.useCallback(() => setExtend(!extend), [extend]);
   return React__default.createElement(Wrapper$o, null, React__default.createElement(Header$4, null, React__default.createElement(Title, null, title), children && React__default.createElement(Info$1, null, React__default.createElement(InfoBtn, {
     onClick: onToggleExtend,
-    title: "Mer information"
+    title: t('common.moreInformation') || ''
   }, React__default.createElement(IconInfo, {
     block: true
   })))), extend && React__default.createElement(Extend$1, null, children));
@@ -6145,6 +7190,9 @@ const InsuranceModal = ({
   onClose,
   insuranceOptions
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [form, setForm] = React.useState({
     ssn: '',
     drivingDistance: DrivingDistance.Between0And1000
@@ -6187,40 +7235,40 @@ const InsuranceModal = ({
     displayName: '2500+'
   }];
   return React__default.createElement(Modal, {
-    title: "F\u00F6rs\u00E4kring",
+    title: t('item.insurance'),
     onClose: onClose
   }, ((insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.description) || (insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.logotype)) && React__default.createElement(Repeat, null, React__default.createElement(ContentLogo, null, insuranceOptions.description && React__default.createElement(ContentLogoText, null, React__default.createElement(Content$2, null, React__default.createElement("p", null, insuranceOptions.description))), insuranceOptions.logotype && React__default.createElement(ContentLogoMedia, null, React__default.createElement(LogoBox, {
     logo: insuranceOptions.logotype,
-    alt: insuranceOptions.name || 'Logotyp',
+    alt: insuranceOptions.name || t('common.logotype'),
     wide: true
   })))), React__default.createElement(Repeat, null, React__default.createElement(RepeatSmall, null, React__default.createElement(RepeatTiny, null, React__default.createElement(InputGroup, null, React__default.createElement(InputGroupColumn, null, React__default.createElement(InputLabel, {
     htmlFor: "input-insurance-personalnumber"
-  }, "Personnummer"), React__default.createElement(InputText, {
+  }, t('item.personalNumber')), React__default.createElement(InputText, {
     placeholder: "\u00C5\u00C5\u00C5\u00C5MMDD-XXXX",
-    label: "Personnummer",
+    label: t('item.personalNumber'),
     value: form.ssn,
     onChange: onChangeSsn,
     onKeyDown: onKeyDown,
     id: "input-insurance-personalnumber"
   })), React__default.createElement(InputGroupColumn, null, React__default.createElement(InputLabel, {
     htmlFor: "input-insurance-mileage"
-  }, "Uppskattad k\u00F6rstr\u00E4cka per \u00E5r"), React__default.createElement(InputSelect, {
+  }, t('item.estimatedAnualMileage')), React__default.createElement(InputSelect, {
     value: form.drivingDistance,
     onChange: onChangeDrivingDistance,
     options: options,
     unit: "mil",
-    title: "Uppskattad k\u00F6rstr\u00E4cka per \u00E5r"
+    title: t('item.estimatedAnualMileage')
   })))), React__default.createElement(RepeatTiny, null, React__default.createElement(ButtonPrimary, {
     fullWidth: true,
     disabled: !ssnIsValid(form.ssn) || loading,
     onClick: onShowInsurances
-  }, React__default.createElement(ButtonContent, null, "Visa f\u00F6rs\u00E4kringar")))), false , React__default.createElement(RepeatSmall, null, React__default.createElement(Content$2, {
+  }, React__default.createElement(ButtonContent, null, t('item.showInsurances'))))), false , React__default.createElement(RepeatSmall, null, React__default.createElement(Content$2, {
     small: true
-  }, React__default.createElement("p", null, "Spara personnummer p\u00E5 denna dator f\u00F6r att direkt visa f\u00F6rs\u00E4kringskostnaderna i Wayke. Personnumret lagras inte hos Wayke utan finns bara sparad i din webbl\u00E4sare.")))), loading && React__default.createElement(Repeat, null, React__default.createElement(Loader, null)), error && React__default.createElement(Repeat, null, React__default.createElement(Snackbar, {
+  }, React__default.createElement("p", null, t('item.savePersonalNumberOnThisDeviceHelp'))))), loading && React__default.createElement(Repeat, null, React__default.createElement(Loader, null)), error && React__default.createElement(Repeat, null, React__default.createElement(Snackbar, {
     severity: "error",
     icon: true,
-    heading: "Ett fel har intr\u00E4ffat"
-  }, "Kunde inte h\u00E4mta f\u00F6rs\u00E4kringar. V\u00E4nligen f\u00F6rs\u00F6k igen.")), React__default.createElement(React__default.Fragment, null, (data === null || data === void 0 ? void 0 : data.insurances) && React__default.createElement(Repeat, null, data === null || data === void 0 ? void 0 : data.insurances.map(insurance => React__default.createElement(Repeat, {
+    heading: t('common.anErrorHasOccured') || undefined
+  }, t('item.couldNotfetchInsurances'))), React__default.createElement(React__default.Fragment, null, (data === null || data === void 0 ? void 0 : data.insurances) && React__default.createElement(Repeat, null, data === null || data === void 0 ? void 0 : data.insurances.map(insurance => React__default.createElement(Repeat, {
     key: insurance.name
   }, React__default.createElement(DetailBox, {
     heading: `${numberSeparator(insurance.price)} ${insurance.unit}`,
@@ -6229,12 +7277,13 @@ const InsuranceModal = ({
     as: "a",
     href: insurance.url || '',
     target: "_blank",
-    rel: "noopener noreferrer nofollow"
-  }, "F\u00F6rk\u00F6psinformation och villkor (\u00F6ppnas i ny flik)")))), insurance.items && insurance.items.length > 0 && React__default.createElement(Repeat, null, React__default.createElement(H4, null, "F\u00F6rs\u00E4kringen inneh\u00E5ller"), insurance.items.map(item => React__default.createElement(RepeatSmall, {
+    rel: "noopener noreferrer nofollow",
+    title: t('item.openPrePurchaseInformationInNewTab') || ''
+  }, t('item.openPrePurchaseInformationInNewTab'))))), insurance.items && insurance.items.length > 0 && React__default.createElement(Repeat, null, React__default.createElement(H4, null, t('item.insuranceIncludes')), insurance.items.map(item => React__default.createElement(RepeatSmall, {
     key: item.name || ''
   }, React__default.createElement(ExtendInfo, {
     title: item.name || ''
-  }, item.description)))), insurance.addons && insurance.addons.length > 0 && React__default.createElement(Repeat, null, React__default.createElement(H4, null, "V\u00E4lj till"), insurance.addons.map(addon => React__default.createElement(RepeatSmall, {
+  }, item.description)))), insurance.addons && insurance.addons.length > 0 && React__default.createElement(Repeat, null, React__default.createElement(H4, null, t('item.addInsuranceHeading')), insurance.addons.map(addon => React__default.createElement(RepeatSmall, {
     key: addon.title || ''
   }, React__default.createElement(ColumnRow, null, React__default.createElement(ColumnRowItem, null, React__default.createElement(ExtendInfo, {
     title: addon.title || ''
@@ -6246,6 +7295,9 @@ const Insurance = ({
   branch,
   insuranceOptions
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [modal, setModal] = React.useState(false);
   const toggleModal = React.useCallback(() => setModal(!modal), [modal]);
   if (!insuranceOptions.length) {
@@ -6256,13 +7308,13 @@ const Insurance = ({
     branch: branch,
     onClose: toggleModal,
     insuranceOptions: insuranceOptions[0]
-  }), React__default.createElement(Repeat, null, React__default.createElement(RepeatTiny, null, React__default.createElement(VisualHeading, null, "V\u00E4lj till f\u00F6rs\u00E4kring")), React__default.createElement(RepeatTiny, null, React__default.createElement(React__default.Fragment, null, insuranceOptions.map((insuranceOption, index) => React__default.createElement(OptionBox, {
+  }), React__default.createElement(Repeat, null, React__default.createElement(RepeatTiny, null, React__default.createElement(VisualHeading, null, t('item.addInsurance'))), React__default.createElement(RepeatTiny, null, React__default.createElement(React__default.Fragment, null, insuranceOptions.map((insuranceOption, index) => React__default.createElement(OptionBox, {
     key: `${insuranceOption.url}-${index}`,
     logo: insuranceOption.logotype || undefined,
-    logoAlt: insuranceOption.name || 'Logotyp'
-  }, React__default.createElement(OptionBoxHeading, null, "F\u00E5 prisf\u00F6rslag"), React__default.createElement(OptionBoxContent, null, React__default.createElement("p", null, React__default.createElement(ButtonInline, {
+    logoAlt: insuranceOption.name || t('common.logotype')
+  }, React__default.createElement(OptionBoxHeading, null, t('item.getInsuranceQuote')), React__default.createElement(OptionBoxContent, null, React__default.createElement("p", null, React__default.createElement(ButtonInline, {
     onClick: toggleModal
-  }, "Mer information")))))))));
+  }, t('common.moreInformation'))))))))));
 };
 
 const InsuranceFreeModal = ({
@@ -6270,8 +7322,11 @@ const InsuranceFreeModal = ({
   insuranceOptions
 }) => {
   var _insuranceOptions$ins;
+  const {
+    t
+  } = reactI18next.useTranslation();
   return React__default.createElement(Modal, {
-    title: (_insuranceOptions$ins = insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.insuranceHeader) !== null && _insuranceOptions$ins !== void 0 ? _insuranceOptions$ins : 'Försäkring',
+    title: (_insuranceOptions$ins = insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.insuranceHeader) !== null && _insuranceOptions$ins !== void 0 ? _insuranceOptions$ins : t('item.insurance'),
     onClose: onClose
   }, (insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.longDescription) && React__default.createElement(Repeat, null, React__default.createElement(Content$2, {
     dangerouslySetInnerHTML: {
@@ -6280,11 +7335,12 @@ const InsuranceFreeModal = ({
   })), (insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.url) && React__default.createElement(Repeat, null, React__default.createElement(ButtonInline, {
     as: "a",
     href: insuranceOptions.url,
+    title: t('item.readMoreAboutInsuranceInNewTab') || '',
     target: "_blank",
     rel: "noopener noreferrer"
-  }, "L\u00E4s mer om f\u00F6rs\u00E4kringen (\u00D6ppnas i ett nytt f\u00F6nster)")), (insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.logotype) && React__default.createElement(Repeat, null, React__default.createElement(LogoBox, {
+  }, t('item.readMoreAboutInsuranceInNewTab'))), (insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.logotype) && React__default.createElement(Repeat, null, React__default.createElement(LogoBox, {
     logo: insuranceOptions.logotype,
-    alt: insuranceOptions.name || 'Logotyp',
+    alt: insuranceOptions.name || t('common.logotype'),
     wide: true
   })));
 };
@@ -6293,6 +7349,9 @@ const Insurance$1 = ({
   insuranceOptions
 }) => {
   var _insuranceOptions$0$i, _insuranceOptions$;
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [modal, setModal] = React.useState(false);
   const toggleModal = React.useCallback(() => setModal(!modal), [modal]);
   if (!insuranceOptions.length) {
@@ -6301,17 +7360,17 @@ const Insurance$1 = ({
   return React__default.createElement(React__default.Fragment, null, modal && React__default.createElement(InsuranceFreeModal, {
     onClose: toggleModal,
     insuranceOptions: insuranceOptions[0]
-  }), React__default.createElement(Repeat, null, React__default.createElement(RepeatTiny, null, React__default.createElement(VisualHeading, null, (_insuranceOptions$0$i = (_insuranceOptions$ = insuranceOptions[0]) === null || _insuranceOptions$ === void 0 ? void 0 : _insuranceOptions$.insuranceHeader) !== null && _insuranceOptions$0$i !== void 0 ? _insuranceOptions$0$i : 'Försäkring')), React__default.createElement(RepeatTiny, null, React__default.createElement(React__default.Fragment, null, insuranceOptions.map((insuranceOption, index) => React__default.createElement(OptionBox, {
+  }), React__default.createElement(Repeat, null, React__default.createElement(RepeatTiny, null, React__default.createElement(VisualHeading, null, (_insuranceOptions$0$i = (_insuranceOptions$ = insuranceOptions[0]) === null || _insuranceOptions$ === void 0 ? void 0 : _insuranceOptions$.insuranceHeader) !== null && _insuranceOptions$0$i !== void 0 ? _insuranceOptions$0$i : t('item.insurance'))), React__default.createElement(RepeatTiny, null, React__default.createElement(React__default.Fragment, null, insuranceOptions.map((insuranceOption, index) => React__default.createElement(OptionBox, {
     key: `${insuranceOption.url}-${index}`,
     logo: insuranceOption.logotype || undefined,
-    logoAlt: insuranceOption.name || 'Logotyp'
+    logoAlt: insuranceOption.name || t('common.logotype')
   }, insuranceOption.description && React__default.createElement(Content$2, {
     dangerouslySetInnerHTML: {
       __html: marked.marked(insuranceOption.description)
     }
   }), React__default.createElement(OptionBoxContent, null, React__default.createElement("p", null, React__default.createElement(ButtonInline, {
     onClick: toggleModal
-  }, "Mer information")))))))));
+  }, t('common.moreInformation'))))))))));
 };
 
 const InsuranceOptions = ({
@@ -6339,6 +7398,9 @@ const ManufacturerPackageOption = ({
   packageOption
 }) => {
   var _packageOption$link;
+  const {
+    t
+  } = reactI18next.useTranslation();
   if (!packageOption) {
     return null;
   }
@@ -6353,9 +7415,9 @@ const ManufacturerPackageOption = ({
     href: packageOption.link.url,
     target: "_blank",
     rel: "noopener noreferrer"
-  }, packageOption.link.title ? packageOption.link.title : 'Läs mer (Öppnas i ett nytt fönster)')), packageOption.image && React__default.createElement(Repeat, null, React__default.createElement(LogoBox, {
+  }, packageOption.link.title ? packageOption.link.title : t('item.readMoreInNewTab'))), packageOption.image && React__default.createElement(Repeat, null, React__default.createElement(LogoBox, {
     logo: packageOption.image,
-    alt: "Logotyp",
+    alt: t('common.logotype') || '',
     wide: true
   })));
 };
@@ -6367,6 +7429,9 @@ const ToggleItem = ({
   onClickVisible,
   onClickValue
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [visible, setVisible] = React.useState(false);
   const _onClickValue = React.useCallback(() => {
     if (onClickValue) {
@@ -6381,7 +7446,7 @@ const ToggleItem = ({
       }
     }
   }, [visible]);
-  const visibleTitle = type === 'tel' ? 'Ring' : type === 'mailto' ? 'Skicka ett mail till' : '';
+  const visibleTitle = type === 'tel' ? t('item.actions.callNumber') : type === 'mailto' ? t('item.actions.sendEmailTo') : '';
   return React__default.createElement(RepeatTiny, null, visible ? React__default.createElement(ButtonSecondary, {
     onClick: _onClickValue,
     as: "a",
@@ -6421,8 +7486,11 @@ const ActionList = ({
   branch
 }) => {
   var _branch$contact, _branch$contact2;
-  const email = (contact === null || contact === void 0 ? void 0 : contact.email) || (branch === null || branch === void 0 ? void 0 : (_branch$contact = branch.contact) === null || _branch$contact === void 0 ? void 0 : _branch$contact.email);
-  const phonenumber = (contact === null || contact === void 0 ? void 0 : contact.phonenumber) || (branch === null || branch === void 0 ? void 0 : (_branch$contact2 = branch.contact) === null || _branch$contact2 === void 0 ? void 0 : _branch$contact2.phonenumber);
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const email = (contact === null || contact === void 0 ? void 0 : contact.email) || (branch === null || branch === void 0 || (_branch$contact = branch.contact) === null || _branch$contact === void 0 ? void 0 : _branch$contact.email);
+  const phonenumber = (contact === null || contact === void 0 ? void 0 : contact.phonenumber) || (branch === null || branch === void 0 || (_branch$contact2 = branch.contact) === null || _branch$contact2 === void 0 ? void 0 : _branch$contact2.phonenumber);
   const onClickMailVisible = React.useCallback(() => PubSub.publish('MailVisible'), []);
   const onClickPhoneVisible = React.useCallback(() => PubSub.publish('PhonenumberVisible'), []);
   const onClickPhoneValue = React.useCallback(() => PubSub.publish('PhonenumberCall'), []);
@@ -6431,11 +7499,11 @@ const ActionList = ({
   }
   return React__default.createElement(React__default.Fragment, null, email && React__default.createElement(ToggleItem, {
     onClickVisible: onClickMailVisible,
-    title: "Visa mailadress",
+    title: t('item.actions.showEmail'),
     value: email,
     type: "mailto"
   }), phonenumber && React__default.createElement(ToggleItem, {
-    title: "Visa telefonnummer",
+    title: t('item.actions.showPhoneNumber'),
     value: formatPhonenumber(phonenumber),
     type: "tel",
     onClickVisible: onClickPhoneVisible,
@@ -6649,11 +7717,14 @@ const SwitchBar = ({
   children,
   onClick
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [info, setInfo] = React.useState(false);
   const onToggleInfo = React.useCallback(() => setInfo(!info), [info]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(Wrapper$t, null, React__default.createElement(Header$5, null, React__default.createElement(Info$2, null, React__default.createElement(InfoContent, null, React__default.createElement(Title$1, null, title)), children && React__default.createElement(InfoContent, null, React__default.createElement(InfoBtn$1, {
     onClick: onToggleInfo,
-    title: "Mer information"
+    title: t('common.moreInformation') || ''
   }, React__default.createElement(IconInfo, {
     block: true
   })))), actionTitle && React__default.createElement(Action$6, null, React__default.createElement(ButtonInline, {
@@ -6674,6 +7745,9 @@ const BranchModal = ({
   connections,
   onClose
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const {
     centralStorageId,
     setCentralStorageId
@@ -6689,21 +7763,22 @@ const BranchModal = ({
     return null;
   }
   return React__default.createElement(Modal, {
-    title: "Byt anl\u00E4ggning",
+    title: t('item.switchBranch'),
     onClose: onClose
-  }, React__default.createElement(Repeat, null, React__default.createElement(RepeatTiny, null, React__default.createElement(Content$2, null, React__default.createElement("p", null, "V\u00E4lj den anl\u00E4ggning du vill visa kontaktuppgifter f\u00F6r."))), React__default.createElement(RepeatTiny, null, React__default.createElement(InputLabel, null, "V\u00E4lj anl\u00E4ggning"), React__default.createElement(InputSelect, {
+  }, React__default.createElement(Repeat, null, React__default.createElement(RepeatTiny, null, React__default.createElement(Content$2, null, React__default.createElement("p", null, t('item.switchBranchDescription')))), React__default.createElement(RepeatTiny, null, React__default.createElement(InputLabel, null, t('item.chooseBranch')), React__default.createElement(InputSelect, {
     value: localValue,
     onChange: onChange,
     options: connections === null || connections === void 0 ? void 0 : connections.map(x => ({
       value: x.id,
       displayName: x.name
     })),
-    title: "V\u00E4lj anl\u00E4ggning"
+    title: t('item.chooseBranch')
   }))), React__default.createElement(Repeat, null, React__default.createElement(ButtonPrimary, {
     disabled: loading,
     fullWidth: true,
-    onClick: () => onConfirm(localValue)
-  }, React__default.createElement(ButtonContent, null, "V\u00E4lj"))));
+    onClick: () => onConfirm(localValue),
+    title: t('item.chooseSelectedBranch') || ''
+  }, React__default.createElement(ButtonContent, null, t('common.choose')))));
 };
 
 const PackageOptionModal = ({
@@ -6740,6 +7815,9 @@ const CheckList = ({
   toggleEcomModal,
   loadingCentralStorageVehicle
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [modalBranch, setModalBranch] = React.useState(false);
   const openModalBranch = React.useCallback(() => setModalBranch(true), []);
   const closeModalBranch = React.useCallback(() => setModalBranch(false), []);
@@ -6763,10 +7841,10 @@ const CheckList = ({
     disabled: !!ecommerce.reserved,
     fullWidth: true,
     onClick: toggleEcomModal
-  }, React__default.createElement(ButtonContent, null, "K\u00F6p bilen online"))), (ecommerce === null || ecommerce === void 0 ? void 0 : ecommerce.reserved) && React__default.createElement(RepeatTiny, null, React__default.createElement(SwitchBar, {
-    title: "Bilen \u00E4r reserverad",
-    body: "Denna bil \u00E4r reserverad av en annan k\u00F6pare."
-  }, React__default.createElement(Content$2, null, React__default.createElement("p", null, "Denna bil \u00E4r reserverad av en annan k\u00F6pare.")))), React__default.createElement(ActionList, {
+  }, React__default.createElement(ButtonContent, null, t('item.actions.buyOnline')))), (ecommerce === null || ecommerce === void 0 ? void 0 : ecommerce.reserved) && React__default.createElement(RepeatTiny, null, React__default.createElement(SwitchBar, {
+    title: t('item.carIsReserved'),
+    body: t('item.carIsReservedDescription') || undefined
+  }, React__default.createElement(Content$2, null, React__default.createElement("p", null, t('item.carIsReservedModalBody'))))), React__default.createElement(ActionList, {
     branch: branch,
     contact: contact
   })), React__default.createElement(Repeat, null, availableFrom && new Date(availableFrom).valueOf() > new Date().valueOf() && React__default.createElement(RepeatTiny, null, React__default.createElement(Columns, {
@@ -6776,29 +7854,31 @@ const CheckList = ({
     noShrink: true
   }, React__default.createElement(StateIndicator, {
     "$tone": "pending"
-  })), React__default.createElement(Column, null, React__default.createElement(UtilityFontSizeSmall, null, "Tillg\u00E4nglig fr\u00E5n ", esm.format(new Date(availableFrom), 'dd MMMM yyyy', {
-    locale: sv
-  }))))), React__default.createElement(RepeatTiny, null, React__default.createElement(CheckMarkList, null, (packageOption === null || packageOption === void 0 ? void 0 : packageOption.title) && React__default.createElement(CheckMarkListItem, null, React__default.createElement(React__default.Fragment, null, "Inkl.", ' ', React__default.createElement(ButtonInline, {
+  })), React__default.createElement(Column, null, React__default.createElement(UtilityFontSizeSmall, null, t('item.availableFromDate', {
+    date: esm.format(new Date(availableFrom), 'dd MMMM yyyy', {
+      locale: sv
+    })
+  }))))), React__default.createElement(RepeatTiny, null, React__default.createElement(CheckMarkList, null, (packageOption === null || packageOption === void 0 ? void 0 : packageOption.title) && React__default.createElement(CheckMarkListItem, null, React__default.createElement(React__default.Fragment, null, t('item.includingShort'), ' ', React__default.createElement(ButtonInline, {
     onClick: () => onOpen({
       title: packageOption === null || packageOption === void 0 ? void 0 : packageOption.title,
       image: packageOption === null || packageOption === void 0 ? void 0 : packageOption.image,
       description: packageOption === null || packageOption === void 0 ? void 0 : packageOption.description,
       link: packageOption === null || packageOption === void 0 ? void 0 : packageOption.link
     })
-  }, packageOption.title), ' ', "begagnatgaranti")), packageOptions === null || packageOptions === void 0 ? void 0 : packageOptions.map((packageOption, index) => React__default.createElement(CheckMarkListItem, {
+  }, packageOption.title), ' ', t('item.usedWarrany').toLowerCase())), packageOptions === null || packageOptions === void 0 ? void 0 : packageOptions.map((packageOption, index) => React__default.createElement(CheckMarkListItem, {
     key: packageOption.title || index
-  }, React__default.createElement(React__default.Fragment, null, "Inkl.", ' ', React__default.createElement(ButtonInline, {
+  }, React__default.createElement(React__default.Fragment, null, t('item.includingShort'), ' ', React__default.createElement(ButtonInline, {
     onClick: () => onOpen({
       title: packageOption === null || packageOption === void 0 ? void 0 : packageOption.title,
       image: packageOption === null || packageOption === void 0 ? void 0 : packageOption.image,
       description: packageOption === null || packageOption === void 0 ? void 0 : packageOption.description,
       link: packageOption === null || packageOption === void 0 ? void 0 : packageOption.link
     })
-  }, packageOption.title)))), (ecommerce === null || ecommerce === void 0 ? void 0 : ecommerce.withHomeDelivery) && React__default.createElement(CheckMarkListItem, null, "Hemleverans")))), ((branch === null || branch === void 0 ? void 0 : branch.connections.length) || 0) > 1 && React__default.createElement(Repeat, null, React__default.createElement(SwitchBar, {
-    title: "Centrallagerbil",
-    actionTitle: "Byt anl\u00E4ggning",
+  }, packageOption.title)))), (ecommerce === null || ecommerce === void 0 ? void 0 : ecommerce.withHomeDelivery) && React__default.createElement(CheckMarkListItem, null, t('item.homeDelivery'))))), ((branch === null || branch === void 0 ? void 0 : branch.connections.length) || 0) > 1 && React__default.createElement(Repeat, null, React__default.createElement(SwitchBar, {
+    title: t('item.centralWarehouseCar'),
+    actionTitle: t('item.switchBranch') || '',
     onClick: openModalBranch
-  }, React__default.createElement(Content$2, null, React__default.createElement("p", null, "Denna bil tillh\u00F6r ett centrallager och g\u00E5r att k\u00F6pa genom flera anl\u00E4ggningar. Byt anl\u00E4ggning f\u00F6r att visa kontaktuppgifter till just den anl\u00E4ggningen.")))));
+  }, React__default.createElement(Content$2, null, React__default.createElement("p", null, t('item.centralWarehouseCarDescription'))))));
 };
 
 const Wrapper$u = styled__default.div`
@@ -6987,7 +8067,7 @@ const OverflowGrid = ({
     const scrollLeft = ((_overflowElement$curr2 = overflowElement.current) === null || _overflowElement$curr2 === void 0 ? void 0 : _overflowElement$curr2.scrollLeft) || 0;
     if (scrollLeft > 0) {
       var _overflowElement$curr3;
-      (_overflowElement$curr3 = overflowElement.current) === null || _overflowElement$curr3 === void 0 ? void 0 : _overflowElement$curr3.scroll({
+      (_overflowElement$curr3 = overflowElement.current) === null || _overflowElement$curr3 === void 0 || _overflowElement$curr3.scroll({
         left: scrollLeft - itemWidth,
         behavior: 'smooth'
       });
@@ -7002,7 +8082,7 @@ const OverflowGrid = ({
     const overflowElementScrollWidth = scrollWidth - overflowElementWidth;
     if (overflowElementScrollWidth !== scrollLeft) {
       var _overflowElement$curr8;
-      (_overflowElement$curr8 = overflowElement.current) === null || _overflowElement$curr8 === void 0 ? void 0 : _overflowElement$curr8.scroll({
+      (_overflowElement$curr8 = overflowElement.current) === null || _overflowElement$curr8 === void 0 || _overflowElement$curr8.scroll({
         left: scrollLeft + itemWidth,
         behavior: 'smooth'
       });
@@ -7023,7 +8103,7 @@ const OverflowGrid = ({
   React.useEffect(() => {
     var _overflowElement$curr12;
     onScroll();
-    (_overflowElement$curr12 = overflowElement.current) === null || _overflowElement$curr12 === void 0 ? void 0 : _overflowElement$curr12.addEventListener('scroll', onScroll);
+    (_overflowElement$curr12 = overflowElement.current) === null || _overflowElement$curr12 === void 0 || _overflowElement$curr12.addEventListener('scroll', onScroll);
     return () => {
       var _overflowElement$curr13;
       return (_overflowElement$curr13 = overflowElement.current) === null || _overflowElement$curr13 === void 0 ? void 0 : _overflowElement$curr13.removeEventListener('scroll', onScroll);
@@ -7091,6 +8171,9 @@ const Related = ({
   displayBranchName,
   onClickSearchItem
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const {
     loading,
     response,
@@ -7116,19 +8199,19 @@ const Related = ({
     onClick: () => {}
   }, React__default.createElement(H2, {
     noMargin: true
-  }, "Relaterade fordon"))) : React__default.createElement(Repeat, null, React__default.createElement(SectionHeader, {
+  }, t('item.relatedVehicles')))) : React__default.createElement(Repeat, null, React__default.createElement(SectionHeader, {
     onClick: () => {},
     actionTitle: "Visa alla"
   }, React__default.createElement(H2, {
     noMargin: true
-  }, "Senast inkomna"))), React__default.createElement(Repeat, null, React__default.createElement(OverflowGrid, {
+  }, t('item.latestVehicles')))), React__default.createElement(Repeat, null, React__default.createElement(OverflowGrid, {
     accentBg: true,
     columns: 1.05,
     columnsSm: 2.1,
     columnsMd: 3,
     spacing: 2,
     items: response === null || response === void 0 ? void 0 : response.documentList.documents.map(document => {
-      var _document$featuredIma, _document$featuredIma2, _document$featuredIma3, _document$branches, _document$branches$;
+      var _document$featuredIma, _document$branches, _document$odometerRea, _document$odometerRea2;
       const prefix = pathRoute ? `/${pathRoute}` : '/';
       const r = regexPathGuid();
       const pathRouteUrl = window.location.pathname === '/' ? `${prefix}${document._id}` : r.test(`${pathRoute}${id}`) ? window.location.pathname.replace(r, document._id) : `${window.location.pathname}${prefix}${document._id}`;
@@ -7138,22 +8221,22 @@ const Related = ({
         onClick: onItemClicked,
         title: document.title,
         href: pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined,
-        image: (_document$featuredIma = document.featuredImage) === null || _document$featuredIma === void 0 ? void 0 : (_document$featuredIma2 = _document$featuredIma.files) === null || _document$featuredIma2 === void 0 ? void 0 : (_document$featuredIma3 = _document$featuredIma2[0]) === null || _document$featuredIma3 === void 0 ? void 0 : _document$featuredIma3.url,
+        image: (_document$featuredIma = document.featuredImage) === null || _document$featuredIma === void 0 || (_document$featuredIma = _document$featuredIma.files) === null || _document$featuredIma === void 0 || (_document$featuredIma = _document$featuredIma[0]) === null || _document$featuredIma === void 0 ? void 0 : _document$featuredIma.url,
         description: document.shortDescription,
-        branchName: displayBranchName ? (_document$branches = document.branches) === null || _document$branches === void 0 ? void 0 : (_document$branches$ = _document$branches[0]) === null || _document$branches$ === void 0 ? void 0 : _document$branches$.name : undefined,
+        branchName: displayBranchName ? (_document$branches = document.branches) === null || _document$branches === void 0 || (_document$branches = _document$branches[0]) === null || _document$branches === void 0 ? void 0 : _document$branches.name : undefined,
         uspList: [{
           title: document.modelYear
         }, {
-          title: `${numberSeparator(document.mileage)} mil`
+          title: `${numberSeparator(((_document$odometerRea = document.odometerReading) === null || _document$odometerRea === void 0 ? void 0 : _document$odometerRea.value) || document.mileage)} ${t(`odometer.${((_document$odometerRea2 = document.odometerReading) === null || _document$odometerRea2 === void 0 ? void 0 : _document$odometerRea2.unit) || 'ScandinavianMile'}`)}`
         }, {
           title: document.gearboxType
         }, {
           title: document.fuelType
         }],
-        price: `${numberSeparator(document.price)} kr`,
-        oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice ? `${numberSeparator(document.oldPrice)} kr` : undefined,
-        leasingPrice: document.leasingPrice !== undefined ? `${numberSeparator(document.leasingPrice)} kr/mån` : undefined,
-        businessLeasingPrice: document.businessLeasingPrice !== undefined ? `${numberSeparator(document.businessLeasingPrice)} kr/mån` : undefined,
+        price: `${numberSeparator(document.price)} ${t('currency.default')}`,
+        oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice ? `${numberSeparator(document.oldPrice)} ${t('currency.default')}` : undefined,
+        leasingPrice: document.leasingPrice !== undefined ? `${numberSeparator(document.leasingPrice)} ${t('currency.monthly')}` : undefined,
+        businessLeasingPrice: document.businessLeasingPrice !== undefined ? `${numberSeparator(document.businessLeasingPrice)} ${t('currency.monthly')}` : undefined,
         pathRoute: pathRoute
       });
     })
@@ -7163,6 +8246,9 @@ const Related = ({
 const PackageOptions = ({
   packageOptions
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   if (!packageOptions) {
     return null;
   }
@@ -7181,9 +8267,9 @@ const PackageOptions = ({
       href: packageOption.link.url,
       target: "_blank",
       rel: "noopener noreferrer"
-    }, packageOption.link.title ? packageOption.link.title : 'Läs mer (Öppnas i ett nytt fönster)')), packageOption.image && React__default.createElement(Repeat, null, React__default.createElement(LogoBox, {
+    }, packageOption.link.title ? packageOption.link.title : t('item.readMoreInNewTab'))), packageOption.image && React__default.createElement(Repeat, null, React__default.createElement(LogoBox, {
       logo: packageOption.image,
-      alt: "Logotyp",
+      alt: t('common.logotype') || '',
       wide: true
     })));
   }));
@@ -7234,19 +8320,19 @@ const KeyOrder = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'satur
 const TranslateWeekDays = d => {
   switch (d) {
     case 'monday':
-      return 'Mån';
+      return i18next.t('common.mondayShort');
     case 'tuesday':
-      return 'Tis';
+      return i18next.t('common.tuesdayShort');
     case 'wednesday':
-      return 'Ons';
+      return i18next.t('common.wednesdayShort');
     case 'thursday':
-      return 'Tor';
+      return i18next.t('common.thursdayShort');
     case 'friday':
-      return 'Fre';
+      return i18next.t('common.fridayShort');
     case 'saturday':
-      return 'Lör';
+      return i18next.t('common.saturdayShort');
     case 'sunday':
-      return 'Sön';
+      return i18next.t('common.sundayShort');
   }
 };
 const arr = [];
@@ -7270,7 +8356,7 @@ const GetOpeningHoursToday = o => {
   const day = KeyOrder[dayNumber === 0 ? 6 : dayNumber - 1];
   const current = o[day];
   return {
-    title: current ? 'Öppetider idag' : 'Stängt idag',
+    title: current ? i18next.t('item.openingHoursToday') : i18next.t('item.closedToday'),
     from: current === null || current === void 0 ? void 0 : current.from,
     until: current === null || current === void 0 ? void 0 : current.until
   };
@@ -7282,6 +8368,9 @@ const valuOfDateString = s => {
 const OpeningHours = ({
   openingHours
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const today = React.useMemo(() => openingHours ? GetOpeningHoursToday(openingHours) : null, [openingHours]);
   const currentlyOpen = React.useMemo(() => {
     try {
@@ -7300,26 +8389,31 @@ const OpeningHours = ({
     return null;
   }
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(RepeatSmall, null, React__default.createElement(Badge, {
-    label: currentlyOpen ? 'Öppet' : 'Stängt',
+    label: currentlyOpen ? t('item.open') : t('item.closed'),
     severity: currentlyOpen ? 'positive' : 'negative'
-  })), React__default.createElement(RepeatSmall, null, React__default.createElement(TableColumn, null, React__default.createElement(TableColumnRow, null, React__default.createElement(TableColumnCell, null, React__default.createElement(UtilityTextBold, null, today === null || today === void 0 ? void 0 : today.title)), React__default.createElement(TableColumnCell, null, React__default.createElement(UtilityTextBold, null, today !== null && today !== void 0 && today.from ? `${today.from}-${today.until}` : 'Stängt'))), oh.map(o => React__default.createElement(TableColumnRow, {
+  })), React__default.createElement(RepeatSmall, null, React__default.createElement(TableColumn, null, React__default.createElement(TableColumnRow, null, React__default.createElement(TableColumnCell, null, React__default.createElement(UtilityTextBold, null, today === null || today === void 0 ? void 0 : today.title)), React__default.createElement(TableColumnCell, null, React__default.createElement(UtilityTextBold, null, today !== null && today !== void 0 && today.from ? `${today.from}-${today.until}` : t('item.closed')))), oh.map(o => React__default.createElement(TableColumnRow, {
     key: o.titleFrom
-  }, React__default.createElement(TableColumnCell, null, o.titleTo ? `${o.titleFrom}-${o.titleTo}` : o.titleFrom), React__default.createElement(TableColumnCell, null, o.from ? `${o.from}-${o.until}` : 'Stängt'))))));
+  }, React__default.createElement(TableColumnCell, null, o.titleTo ? `${o.titleFrom}-${o.titleTo}` : o.titleFrom), React__default.createElement(TableColumnCell, null, o.from ? `${o.from}-${o.until}` : t('item.closed')))))));
 };
 
 const PhoneNumber = ({
   phoneNumber
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [visible, setVisible] = React.useState(false);
   const onClick = React.useCallback(() => !visible && setVisible(true), [visible]);
-  return React__default.createElement(TableColumnRow, null, React__default.createElement(TableColumnCell, null, "Telefonnummer"), React__default.createElement(TableColumnCell, null, visible ? React__default.createElement(ButtonInlineBold, {
+  return React__default.createElement(TableColumnRow, null, React__default.createElement(TableColumnCell, null, t('other.phoneNumber')), React__default.createElement(TableColumnCell, null, visible ? React__default.createElement(ButtonInlineBold, {
     as: "a",
     href: `tel:${phoneNumber}`,
-    title: `Ring ${phoneNumber}`
+    title: t('other.callPhoneNumber', {
+      phoneNumber
+    }) || ''
   }, React__default.createElement(ButtonContent, null, phoneNumber)) : React__default.createElement(ButtonInlineBold, {
     onClick: onClick,
-    title: "Visa telefonnummer"
-  }, React__default.createElement(ButtonContent, null, "Visa telefonnummer"))));
+    title: t('other.showPhoneNumber') || ''
+  }, React__default.createElement(ButtonContent, null, t('other.showPhoneNumber')))));
 };
 
 const SettingsContext = React.createContext({});
@@ -7354,6 +8448,9 @@ const PlaceholderAction = styled__default.div`
 const StaticMap = ({
   position
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const {
     googleMapsApiKey,
     googleMapsMarker
@@ -7375,12 +8472,12 @@ const StaticMap = ({
   if (visible && googleMapsApiKey) {
     return React__default.createElement(Wrapper$x, {
       href: `http://maps.google.com/maps?q=${latitude},${longitude}`,
-      title: "Visa p\u00E5 Google Maps",
+      title: t('item.showOnGoogleMaps'),
       target: "_blank",
       rel: "nofollow noopener noreferrer"
     }, React__default.createElement(Image$3, {
       src: `https://maps.googleapis.com/maps/api/staticmap?center=${latitude},${longitude}&zoom=10&size=640x280&maptype=roadmap&markers=${googleMapsMarker ? `icon:${encodeURIComponent(googleMapsMarker)}` : ''}%7C${latitude},${longitude}&key=${googleMapsApiKey}`,
-      alt: "Karta"
+      alt: t('item.googleMapsMapAlt')
     }));
   }
   return React__default.createElement(Placeholder, {
@@ -7390,7 +8487,7 @@ const StaticMap = ({
     onClick: onShowMap
   }, React__default.createElement(PlaceholderAction, null, React__default.createElement(ButtonSecondary, {
     as: "div"
-  }, React__default.createElement(ButtonContent, null, "Visa karta"))));
+  }, React__default.createElement(ButtonContent, null, t('item.googleMapsPlaceholderInit')))));
 };
 
 const Branch = ({
@@ -7399,6 +8496,9 @@ const Branch = ({
   displayBranchName
 }) => {
   var _branch$location, _branch$location2, _branch$location3, _branch$connections, _branch$location4, _branch$location5, _branch$location6, _branch$location7, _branch$contact;
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [modal, setModal] = React.useState(false);
   const openModal = React.useCallback(() => setModal(true), []);
   const closeModal = React.useCallback(() => setModal(false), []);
@@ -7416,14 +8516,17 @@ const Branch = ({
     onClose: closeModal
   }), React__default.createElement(Repeat, null, React__default.createElement(H2, {
     noMargin: true
-  }, displayBranchName ? `Den här bilen finns på ${branch.name}` : branch !== null && branch !== void 0 && (_branch$location = branch.location) !== null && _branch$location !== void 0 && _branch$location.city ? `Den här bilen finns på vår anläggning i ${branch === null || branch === void 0 ? void 0 : (_branch$location2 = branch.location) === null || _branch$location2 === void 0 ? void 0 : _branch$location2.city}` : 'Kontakt')), React__default.createElement(Repeat, null, React__default.createElement(StaticMap, {
-    position: branch === null || branch === void 0 ? void 0 : (_branch$location3 = branch.location) === null || _branch$location3 === void 0 ? void 0 : _branch$location3.position
-  })), ((branch === null || branch === void 0 ? void 0 : (_branch$connections = branch.connections) === null || _branch$connections === void 0 ? void 0 : _branch$connections.length) || 0) > 1 && React__default.createElement(Repeat, null, React__default.createElement(Content$2, null, React__default.createElement("p", null, "Denna bil tillh\u00F6r ett centrallager och g\u00E5r att k\u00F6pa genom flera anl\u00E4ggningar.", ' ', React__default.createElement(ButtonInline, {
+  }, displayBranchName ? `${t('item.thisCarsIsLocatedAt')} ${branch.name}` : branch !== null && branch !== void 0 && (_branch$location = branch.location) !== null && _branch$location !== void 0 && _branch$location.city ? t('item.thisCarIsAvailableAtOurBranch', {
+    location: branch === null || branch === void 0 || (_branch$location2 = branch.location) === null || _branch$location2 === void 0 ? void 0 : _branch$location2.city
+  }) : t('item.contact'))), React__default.createElement(Repeat, null, React__default.createElement(StaticMap, {
+    position: branch === null || branch === void 0 || (_branch$location3 = branch.location) === null || _branch$location3 === void 0 ? void 0 : _branch$location3.position
+  })), ((branch === null || branch === void 0 || (_branch$connections = branch.connections) === null || _branch$connections === void 0 ? void 0 : _branch$connections.length) || 0) > 1 && React__default.createElement(Repeat, null, React__default.createElement(Content$2, null, React__default.createElement("p", null, t('item.centralWarehouseCarDescriptionShort'), ' ', React__default.createElement(ButtonInline, {
     as: "span",
     role: "button",
     onClick: openModal,
-    inline: true
-  }, "Klicka h\u00E4r f\u00F6r att visa kontaktuppgifter till en annan anl\u00E4ggning"), "."))), React__default.createElement(Repeat, null, React__default.createElement(ProductPageContentLimit, null, React__default.createElement(Repeat, null, React__default.createElement(TableColumn, null, (branch === null || branch === void 0 ? void 0 : (_branch$location4 = branch.location) === null || _branch$location4 === void 0 ? void 0 : _branch$location4.streetAddress) && (branch === null || branch === void 0 ? void 0 : (_branch$location5 = branch.location) === null || _branch$location5 === void 0 ? void 0 : _branch$location5.city) && React__default.createElement(TableColumnRow, null, React__default.createElement(TableColumnCell, null, "Adress"), React__default.createElement(TableColumnCell, null, React__default.createElement(ButtonInlineBold, null, React__default.createElement(ButtonContent, null, `${branch === null || branch === void 0 ? void 0 : (_branch$location6 = branch.location) === null || _branch$location6 === void 0 ? void 0 : _branch$location6.streetAddress}, ${branch === null || branch === void 0 ? void 0 : (_branch$location7 = branch.location) === null || _branch$location7 === void 0 ? void 0 : _branch$location7.city}`)))), (branch === null || branch === void 0 ? void 0 : (_branch$contact = branch.contact) === null || _branch$contact === void 0 ? void 0 : _branch$contact.phonenumber) && React__default.createElement(PhoneNumber, {
+    inline: true,
+    title: t('item.clickHereToShowContactToAnotherBranch') || ''
+  }, t('item.clickHereToShowContactToAnotherBranch')), "."))), React__default.createElement(Repeat, null, React__default.createElement(ProductPageContentLimit, null, React__default.createElement(Repeat, null, React__default.createElement(TableColumn, null, (branch === null || branch === void 0 || (_branch$location4 = branch.location) === null || _branch$location4 === void 0 ? void 0 : _branch$location4.streetAddress) && (branch === null || branch === void 0 || (_branch$location5 = branch.location) === null || _branch$location5 === void 0 ? void 0 : _branch$location5.city) && React__default.createElement(TableColumnRow, null, React__default.createElement(TableColumnCell, null, t('common.address')), React__default.createElement(TableColumnCell, null, React__default.createElement(ButtonInlineBold, null, React__default.createElement(ButtonContent, null, `${branch === null || branch === void 0 || (_branch$location6 = branch.location) === null || _branch$location6 === void 0 ? void 0 : _branch$location6.streetAddress}, ${branch === null || branch === void 0 || (_branch$location7 = branch.location) === null || _branch$location7 === void 0 ? void 0 : _branch$location7.city}`)))), (branch === null || branch === void 0 || (_branch$contact = branch.contact) === null || _branch$contact === void 0 ? void 0 : _branch$contact.phonenumber) && React__default.createElement(PhoneNumber, {
     phoneNumber: formatPhonenumber(branch.contact.phonenumber)
   }))), (branch === null || branch === void 0 ? void 0 : branch.openingHours) && React__default.createElement(Repeat, null, React__default.createElement(OpeningHours, {
     openingHours: branch.openingHours
@@ -7579,8 +8682,8 @@ const useCentralStorage = vehicle => {
     centralStorageId,
     setCentralStorageId
   } = React.useContext(CentralStorageContext);
-  const connections = vehicle === null || vehicle === void 0 ? void 0 : (_vehicle$branch = vehicle.branch) === null || _vehicle$branch === void 0 ? void 0 : _vehicle$branch.connections;
-  const branchId = centralStorageId ? connections === null || connections === void 0 ? void 0 : (_connections$find = connections.find(x => x.id === centralStorageId)) === null || _connections$find === void 0 ? void 0 : _connections$find.id : undefined;
+  const connections = vehicle === null || vehicle === void 0 || (_vehicle$branch = vehicle.branch) === null || _vehicle$branch === void 0 ? void 0 : _vehicle$branch.connections;
+  const branchId = centralStorageId ? connections === null || connections === void 0 || (_connections$find = connections.find(x => x.id === centralStorageId)) === null || _connections$find === void 0 ? void 0 : _connections$find.id : undefined;
   const {
     data,
     loading
@@ -7602,11 +8705,16 @@ const useCentralStorage = vehicle => {
   };
 };
 
-const Page404 = () => React__default.createElement(Page, null, React__default.createElement(PageSection, {
-  large: true
-}, React__default.createElement(Container, null, React__default.createElement(H1, {
-  noMargin: true
-}, "404"))));
+const Page404 = () => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  return React__default.createElement(Page, null, React__default.createElement(PageSection, {
+    large: true
+  }, React__default.createElement(Container, null, React__default.createElement(H1, {
+    noMargin: true
+  }, t('other.error404')))));
+};
 
 const PageLoading = () => React__default.createElement(Page, null, React__default.createElement(PageSection, {
   large: true
@@ -7626,13 +8734,13 @@ class PropertyTreeCreator {
       return ((_this$properties$prop2 = this.properties[propertyKey].category) === null || _this$properties$prop2 === void 0 ? void 0 : _this$properties$prop2.id) === categoryId;
     };
     this.propertiesWithSubCategory = propertyKey => {
-      var _this$properties$prop3, _this$properties$prop4;
-      return !!((_this$properties$prop3 = this.properties[propertyKey].category) !== null && _this$properties$prop3 !== void 0 && (_this$properties$prop4 = _this$properties$prop3.subCategory) !== null && _this$properties$prop4 !== void 0 && _this$properties$prop4.id);
+      var _this$properties$prop3;
+      return !!((_this$properties$prop3 = this.properties[propertyKey].category) !== null && _this$properties$prop3 !== void 0 && (_this$properties$prop3 = _this$properties$prop3.subCategory) !== null && _this$properties$prop3 !== void 0 && _this$properties$prop3.id);
     };
     this.propertiesWithoutSubCategory = propertyKey => !this.propertiesWithSubCategory(propertyKey);
     this.hasSubCategoryWithId = (propertyKey, categoryId) => {
-      var _this$properties$prop5, _this$properties$prop6;
-      return ((_this$properties$prop5 = this.properties[propertyKey].category) === null || _this$properties$prop5 === void 0 ? void 0 : (_this$properties$prop6 = _this$properties$prop5.subCategory) === null || _this$properties$prop6 === void 0 ? void 0 : _this$properties$prop6.id) === categoryId;
+      var _this$properties$prop4;
+      return ((_this$properties$prop4 = this.properties[propertyKey].category) === null || _this$properties$prop4 === void 0 || (_this$properties$prop4 = _this$properties$prop4.subCategory) === null || _this$properties$prop4 === void 0 ? void 0 : _this$properties$prop4.id) === categoryId;
     };
     this.properties = properties;
   }
@@ -7816,203 +8924,19 @@ const sort = tree => {
  */
 const deepCopy = object => JSON.parse(JSON.stringify(object));
 
-const HINTS = Object.freeze({
-  abs: 'Förhindrar att bromsarna låser sig och reducerar bromssträckan.',
-  acceleration: 'Antal sekunder som bilen behöver för att ta sig till 100 km/h.',
-  adultOccupantNCAP: 'Poängen för skydd av vuxna bestäms genom tester av frontalkrockar, sidokrockar och whiplash som utförs för att bedöma det skydd som bilen erbjuder för vuxna förare och passagerare samt bedöma tillgängliga åtgärder för snabb och säker räddning.',
-  aeb: 'Bilen är utrustad med ett bromssystem som hjälper dig att undvika olyckor. Beroende på vilken nivå av AEB bilen är utrustad med kan de upptäcka även cyklister och fotgängare, främst i lägre hastigheter i stadsmiljö men även vid högre hastigheter och landsvägskörning. Bilen förvarnar föraren om potentiell fara och hjälper även till att bromsa för att säkerställa att olyckor undviks så långt det går.',
-  airbagCutOffSwitch: 'Det går att koppla ur krockkudden på passagerarsidan för att kunna sätta dit en barnstol.',
-  airbagDriver: 'Krockkudde för föraren.',
-  airbagFrontal: '',
-  airbagFrontalHead: '',
-  airbagKnees: '',
-  airbagPassenger: 'Krockkudde för passagerare.',
-  airbagSideChest: '',
-  airbagSidePelvis: '',
-  alcolock: 'För att kunna starta bilen behövs ett blåstest som mäter alkoholnivån.',
-  androidAuto: 'Bilen har stöd för dig med Androidtelefon att koppla upp den direkt till bilen. Då följer bland annat navigering, meddelanden samt musiken med från telefonen.',
-  annualBonus: 'Det här fordonet är berättigat till klimatbonus. Bonusen delas ut till den första registrerade ägaren efter 6 månader. Klicka <a target="_blank" rel="noopener noreferrer" title="Läs mer om bonus/malus" href="https://www.transportstyrelsen.se/bonusmalus">här</a> för att läsa mer.',
-  annualMalus: 'Bilen har en förhöjd skatt de tre första åren och därefter gäller ordinarie skatt.',
-  annualTax: 'Summan fordonsskatt som måste betalas varje år.',
-  antiTheftAlarm: 'Bilen har ett larmsystem vid försök till inbrott.',
-  appConnect: 'Med App Connect kan du koppla din mobiltelefon så att anpassade appar syns direkt i bilens display. Fungerar både för iPhone och Android.',
-  appleCarPlay: 'Bilen har stöd för Apple i bilens inbyggda display, så du enkelt kan koppla upp din telefon och prata med bilen med hjälp av Siri.',
-  aux: 'Bilen har en AUX-ingång, för att exempelvis spela musik från en telefon.',
-  auxiliaryLamps: '',
-  batteryCapacity: 'Anger hur många kilowatt-timmar batteriet innehar.',
-  batteryWarrantyDistance: '',
-  batteryWarrantyTime: '',
-  blindSpotWarner: 'En varningslampa indikerar i ytterbackspegeln när ett fordon befinner sig i döda vinkeln.',
-  bluetooth: 'Bilen kan ansluta enheter via Bluetooth, för exempelvis mobilsamtal eller musik.',
-  bluetoothAudio: 'Bilen kan ansluta enheter via Bluetooth för att lyssna på musik.',
-  bluetoothPhone: 'Bilen kan ansluta enheter via Bluetooth för telefonsamtal.',
-  brakeAssistance: 'Säkerhetssystem som kan hjälpa till att bromsa och undvika olyckor.',
-  carDamageWarrantyDistance: '',
-  carDamageWarrantyTime: '',
-  centerDisplay: 'Bilen har en skärm mitt i bilen, mellan förare och passagerare.',
-  centralLocking: 'Elektriskt låssystem, som gör att alla dörrar låses och öppnas samtidigt.',
-  chargeTimeNormal: 'Hur lång tid tar det att ladda bilen i ett standard elnät.',
-  chargeTimeQuick: 'Hur lång tid tar det att ladda bilen med en snabbladdare anpassad för laddning av elbilar.',
-  chassis: 'Vilken typ/form bilen har.',
-  childOccupantNCAP: 'Bedömningen av skyddet av barn täcker tre viktiga aspekter: det skydd som erbjuds av bilbarnstolar i frontal- och sidokrockstest; fordonets möjligheter att inhysa bilbarnstolar med olika storlek och utformning; och tillgängliga åtgärder för säker transport av barn i bilen.',
-  childSafetyLocks: 'Dörrarna låses automatiskt när man kör iväg, så att de inte ska öppnas under körning.',
-  childSeatBeltPassenger: 'Passagerarsätet har utfällbar sittkudde för barn.',
-  childSeatBeltRear: 'Baksätet har utfällbar sittkudde för barn.',
-  co2: 'Anger hur mycket koldioxid fordonet släpper ut enligt mätmetoden NEDC baserat på teoretisk körning.',
-  colorName: '',
-  combinedEmissionsWLTP: 'Anger hur mycket koldioxid fordonet släpper ut enligt mätmetoden WLTP baserat på verklig körning.',
-  cruiseControl: 'Hjälpmedel som håller bilens hastighet automatiskt.',
-  curtainAirbags: '',
-  displacementCC: 'Den sammanlagda volymen av motorns cylindrar. Mäts i kubikcentimeter.',
-  displacementLitres: 'Den sammanlagda volymen av motorns cylindrar. Mäts i liter.',
-  driverAlertnessDetection: 'Varningssignal uppstår när körningssättet tyder på bristande uppmärksamhet.',
-  drivingWheel: 'Vilka hjul som motorn ger kraft till och snurrar.',
-  electricalEngine: '',
-  electricalRange: 'Räckvidd enligt mätmetoden WLTP baserat på verklig körning',
-  electricalRangeEPA: 'Räckvidd enligt den amerikanska mätmetoden EPA. Enligt många den allra strängaste metoden.',
-  electricalRangeNEDC: 'Räckvidd enligt mätmetoden NEDC baserat på teoretisk körning.',
-  electricalRangeWLTP: 'Räckvidd enligt mätmetoden WLTP baserat på verklig körning.',
-  electricalSeatDriver: 'Bilens förarstol går att manövrera med el för mjukare och mer precis positionering.',
-  electricalSeatPassenger: 'Bilens passagerarstol går att manövrera med el.',
-  emergencyCalling: 'Bilen kan automatiskt larma SOS vid en olycka.',
-  engineConfiguration: 'Anger fordonets typ av motor, vilken typ av cylindrar den innehar.',
-  engineCylinders: "Antalet ger en indikation på motorns storlek. Ett 'vanligt' antal ligger på 4 st.",
-  engineName: '',
-  engineVolume: '',
-  enrichmentProviderEquipPackages: '',
-  enrichmentProviderExteriorPackages: '',
-  enrichmentProviderInteriorPackages: '',
-  enrichmentProviderTrimPackages: '',
-  environmentClass: 'Används för att ställa krav på fordonets utsläpp.',
-  finish: '',
-  fuelConsumptionCityDriving: 'Bränsleförbrukning vid stadskörning.',
-  fuelConsumptionCountryRoadDriving: 'Bränsleförbrukning vid landsvägskörning.',
-  fuelConsumptionMixedDrivingNEDC: 'Bränsleförbrukning vid blandad körning.',
-  fuelConsumptionMixedDrivingWLTP: 'Bränsleförbrukning vid blandad körning.',
-  fuelConsumptionMixedDriving: 'Bränsleförbrukning vid blandad körning. Dvs. stadskörning och landsvägskörning under en och samma färd.',
-  fuelType: 'Vad bilen ska tankas med och drivs av.',
-  gearboxName: '',
-  gestureControls: 'Mittskärmen går att manövrera med rörelser.',
-  gps: 'Bilen är utrustad med navigationsutrustning så du enkelt kan ta dig dit du ska.',
-  grossWeight: 'Anger bilens vikt inklusive max tillåten lastvikt.',
-  groundClearence: 'Avståndet mellan bilens undersida och marken.',
-  hasAutomaticGearbox: '',
-  hdmi: 'Bilen har en HDMI-port.',
-  headRoomFront: 'Lägsta takhöjden i framsätet.',
-  headRoomRear: 'Lägsta takhöjden i baksätet.',
-  headUpDisplay: 'Bilen är utrustad med en projicerad display i ditt synfält, så du kan se exempelvis nuvarande hastighet utan att behöva vända bort blicken från vägen.',
-  heatedSteeringWheel: '',
-  height: 'Avståndet från bilens undersida till översida.',
-  hybridComponentsWarrantyDistance: '',
-  hybridComponentsWarrantyTime: '',
-  interiorMaterial: 'Material på interiören i bilen, dvs detaljer i bilens insida.',
-  isofixRearSeat: 'Universell fästanordning för barnstolar.',
-  keylessEntry: 'Bilens dörrar och bagage öppnas när den känner av att bilnyckeln är i närheten och du tar tag i handtaget. Du behöver därmed inte använda nyckeln i sig för att öppna bilens dörrar. ',
-  keylessStart: 'Bilen startas med ett knapptryck istället för att bilnyckeln behöver vridas om. Det räcker med att bilnyckeln befinner sig i bilen (kan du mao ha den i fickan hela bilresan).',
-  laneAssistance: 'Funktion som hjälper till att hålla bilen inom körfältet.',
-  legRoomFront: 'Avstånd mellan instrumentpanelen och framsäte.',
-  legRoomRear: 'Avstånd mellan framsätets rygg och baksätet',
-  length: 'Avståndet från bilens baksida till framsida.',
-  lowBeam: '',
-  mainBeam: '',
-  mainBeamAssistance: 'Bilen slår på och av helljuset per automatik, så du slipper göra det själv.',
-  manufactureYear: 'Året bilen tillverkades.',
-  massage: 'Bilens säte har inbyggd massage.',
-  maxLoadWeight: '',
-  maxRoofWeight: 'Hur många kilo last taket klarar av.',
-  maxSpeed: 'Högsta hastigheten som bilen går att köra.',
-  maxTrailerLoadBraked8Percent: '',
-  maxTrailerLoadUnbraked: 'Vikten du får dra på ett släp som inte är utrustat med egna bromsar.',
-  mildHybrid: 'Bilen är utrustad med en elmotor som fungerar både som startmotor och generator och stöttar förbränningsmotorn, vilket ger lägre bränsleförbrukning och därmed minskade utsläppsnivåer.',
-  mileage: 'Antal mil som bilen har körts. I bilen anges det i kilometer istället.',
-  modelName: 'Vilket utförande av bilmodellen det är.',
-  modelYear: 'Modellår sätts av tillverkaren. Handlaren ändrar ibland modellåret för att matcha transportstyrelsens definition för <i>årsmodell</i>. Definitionen för årsmodell innebär att bilar tillverkade andra halvan av året får nästa års modellår.',
-  ncapStar: 'Universellt säkerhetsbetyg för bilar, fler stjärnor innebär högre säkerhet. Skalan går från 0 till 5 där 5 är det högsta betyget. Så här beskriver Euro NCAP själva att slutbetyget ska utläsas: <br/>' + '<br/>' + '5 stjärnor: Som helhet utmärkt prestanda inom krockskydd och väl utrustad med omfattande teknik för att undvika kollisioner<br/><br/>' + '4 stjärnor: Som helhet bra prestanda inom krockskydd, det kan finnas ytterligare teknik för att undvika kollisioner<br/><br/>' + '3 stjärnor: Åtminstone genomsnittligt passagerarskydd men inte alltid utrustad med de senaste funktionerna för att undvika kollisioner<br/><br/>' + '2 stjärnor: Nominellt krockskydd men saknar teknik för att undvika kollisioner<br/><br/>' + '1 stjärna: Marginellt krockskydd och viss teknik för att undvika kollisioner<br/><br/>' + '0 stjärnor: Uppfyller standarder för typgodkännande så att fordonet får säljas men saknar kritisk modern säkerhetsteknik.',
-  ncapYear: 'Året som bilen säkerhets- och krocktestades.',
-  newVehicleWarrantyDistance: '',
-  newVehicleWarrantyTime: '',
-  noiseReducingWindows: 'Bilens rutor är ljudisolerade för högre komfort.',
-  numberOfGears: 'Antal växlar i växellådan.',
-  numberOfSpeakers: 'Anger totalt antal högtalare i bilen, ju fler högtalare desto häftigare ljud!',
-  numberOfUSBPorts: '',
-  otherAirbags: '',
-  parkingAssistance: 'Funktion som assisterar vid fickparkering.',
-  parkingSensorsFront: 'Ljudsignal som indikerar när bilens främre del närmar sig ett objekt.',
-  parkingSensorsRear: 'Ljudsignal som indikerar när bilens bakre del närmar sig ett objekt.',
-  pedestrianNCAP: 'Euro NCAP bedömer hur väl bilar skyddar sina passagerare men testar även hur bilar skyddar oskyddade trafikanter – fotgängare och cyklister – som de kan kollidera med.',
-  preHeater: 'Värmer motorn när det är kallt ute för att underlätta start.',
-  rainSensors: 'Vindrutetorkarna aktiveras och anpassas automatiskt i förhållande till regnet.',
-  remoteStart: 'Möjliggör att du kan starta bilens motor med hjälp av exempelvis en app i telefonen',
-  rimSize: 'Fälgstorlek angivet i tum.',
-  roofColor: 'Någon del av bilen, ex taket skiljer sig i kulör mot övriga bilen.',
-  roofRailing: 'Bilen har takreling som du kan fästa takräcken i.',
-  safetyAssistNCAP: 'Poängen för förarstödsystem bestäms genom tester av de viktigaste förarstöd teknikerna som stöder säker körning för att undvika och begränsa olyckor.',
-  seats: 'Antal personer som får åka i bilen.',
-  segment: 'Vilken typ av bil det handlar om - t.ex. familjebil',
-  serviceWeight: 'Anger hur mycket bilen väger med en passagerare som väger ca 75kg.',
-  shoulderRoomFront: 'Avstånd i bredd för bilens framsäte.',
-  shoulderRoomRear: 'Avstånd i bredd för bilens baksäte.',
-  sideMirrorFolding: 'Bilens yttre backspeglar går att automatiskt fälla in, exempelvis bra på trånga parkeringar.',
-  speakerBrand: '',
-  startAndStop: 'Bilens motor stoppas när bilen står still för att minska utsläppen.',
-  steeringWheelMaterial: '',
-  sunRoof: '',
-  tankVolume: 'Antal liter bränsle som ryms i tanken.',
-  timingBeltServiceIntervalDistance: 'Bilen är utrustad med kamrem som måste bytas vid olika distansintervall.',
-  timingBeltServiceIntervalTime: 'Bilen är utrustad med kamrem som måste bytas vid olika tidsintervall.',
-  tintedWindows: 'Bilens rutor har en mörkare toning.',
-  tiresFront: 'Däckdimension fram. Presenteras i höjd/bredd och inom ett spann. Däcken som sitter på bilen måste alltså falla inom det spannet.',
-  tiresRear: 'Däckdimension bak. Presenteras i höjd/bredd och inom ett spann. Däcken som sitter på bilen måste alltså falla inom det spannet.',
-  torque: 'Bilens vridkraft. Hög siffra möjliggör att t.ex. dra tunga släp. Dieselmotorer har generellt mer vridmoment.',
-  touchScreen: 'Mittskärmen i bilen är en pekskärm.',
-  towHitch: '',
-  towHitchDetachable: '',
-  towHitchFoldable: '',
-  trafficSignRecognition: 'Bilen är utrustad med kameror som läser av gällande trafikskyltar.',
-  trailerTotalWeightB: 'Vikten man får dra med släp och ett vanligt B-körkort.',
-  transmissionKnobMaterial: '',
-  trcSystem: 'Får bilen att skicka kraft till hjulet som har bästa kontakt med underlaget.',
-  tripComputer: 'I färddatorn som sitter framför ratten kan du se lite information om motorn och bränsleförbrukningen, bland annat kan du ofta läsa ut den återstående körsträckan på nuvarande bränslevolym.',
-  trunkDepth: '',
-  trunkHeight: '',
-  trunkOutlet: '',
-  trunkSpace: 'Volym på bagageutrymmet med uppfällda säten. Det mäts i liter.',
-  trunkSpaceFront: '',
-  trunkWidth: '',
-  typeOfElectricCar: 'Anger om bilen drivs av el eller om den är en hybrid av el och bränsle.',
-  upholstery: '',
-  usb: 'Bilen är utrustad med en USB-port',
-  ventilatedSeats: 'Bilens stolar har ventilation inbyggd, bland annat bra för att få bort fukt från sätena.',
-  wheelBase: 'Avståndet mellan fram- och bakhjul.',
-  wiFi: 'Bilen är utrustad med ett internt WIFI som du kan koppla upp dina egna enheter mot.',
-  width: 'Avståndet mellan bilens båda yttre långsidor.',
-  windowLifts: '',
-  wirelessPhoneCharger: 'Bilen är utrustad med induktionsladdare, så att telefoner som stödjer trådlös laddning kan laddas i bilen utan laddningssladd.'
-});
-const enrichWithHint = properties => {
-  const clone = deepCopy(properties);
-  const keys = Object.keys(clone);
-  keys.forEach(key => {
-    if (!!HINTS[key]) {
-      clone[key].hint = HINTS[key];
-    }
-  });
-  return clone;
-};
-
 const TEXT_TYPE = 'text';
 const NUMBER_TYPE = 'number';
 const BASIC_CATEGORY = Object.freeze({
   id: 1000,
-  name: 'Basuppgifter',
+  name: i18next.t('category.basic'),
   subCategory: null
 });
 const ENGINE_SUBCATEGORY = Object.freeze({
   id: 6,
-  name: 'Motor & Prestanda',
+  name: i18next.t('category.engineAndPerformance'),
   subCategory: {
     id: 54,
-    name: 'Motor',
+    name: i18next.t('subCategory.engine'),
     subCategory: null
   }
 });
@@ -8029,6 +8953,12 @@ class PropertyBuilder {
     this.name = name;
     return this;
   }
+  withHint(hint) {
+    if (hint) {
+      this.hint = hint;
+    }
+    return this;
+  }
   withValue(value) {
     this.value = value;
     return this;
@@ -8059,34 +8989,36 @@ class PropertyBuilder {
 var addCustomProperties = ((item, properties) => {
   const newProperties = deepCopy(properties);
   if (!!item.manufacturer) {
-    newProperties.manufacturer = new PropertyBuilder().withName('Varumärke').withValue(item.manufacturer).withType(TEXT_TYPE).withCategory(BASIC_CATEGORY).build();
+    newProperties.manufacturer = new PropertyBuilder().withName(i18next.t('customProperty.manufacturer.displayName')).withValue(item.manufacturer).withType(TEXT_TYPE).withCategory(BASIC_CATEGORY).build();
   }
   if (!!item.modelSeries) {
-    newProperties.modelSeries = new PropertyBuilder().withName('Modell').withValue(item.modelSeries).withType(TEXT_TYPE).withCategory(BASIC_CATEGORY).build();
+    newProperties.modelSeries = new PropertyBuilder().withName(i18next.t('customProperty.modelSeries.displayName')).withValue(item.modelSeries).withType(TEXT_TYPE).withCategory(BASIC_CATEGORY).build();
   }
   if (!!item.modelName) {
-    newProperties.modelName = new PropertyBuilder().withName('Version').withValue(item.modelName).withType(TEXT_TYPE).withCategory(BASIC_CATEGORY).build();
+    newProperties.modelName = new PropertyBuilder().withName(i18next.t('customProperty.modelName.displayName')).withValue(item.modelName).withHint(i18next.t('customProperty.modelName.hint')).withType(TEXT_TYPE).withCategory(BASIC_CATEGORY).build();
   }
   if (!!item.modelYear) {
-    newProperties.modelYear = new PropertyBuilder().withName('Modellår').withValue(item.modelYear).withType(NUMBER_TYPE).withCategory(BASIC_CATEGORY).build();
+    newProperties.modelYear = new PropertyBuilder().withName(i18next.t('customProperty.modelYear.displayName')).withValue(item.modelYear).withHint(i18next.t('customProperty.modelYear.hint')).withType(NUMBER_TYPE).withCategory(BASIC_CATEGORY).build();
   }
   if (!!item.manufactureYear) {
-    newProperties.manufactureYear = new PropertyBuilder().withName('Tillverkningsår').withValue(item.manufactureYear).withType(NUMBER_TYPE).withCategory(BASIC_CATEGORY).build();
+    newProperties.manufactureYear = new PropertyBuilder().withName(i18next.t('customProperty.manufactureYear.displayName')).withValue(item.manufactureYear).withHint(i18next.t('customProperty.manufactureYear.hint')).withType(NUMBER_TYPE).withCategory(BASIC_CATEGORY).build();
   }
-  if (!!item.mileage) {
-    newProperties.mileage = new PropertyBuilder().withName('Mätarställning').withValue(item.mileage).withType(NUMBER_TYPE).withCategory(BASIC_CATEGORY).withUnit('mil').build();
+  if (item.odometerReading) {
+    newProperties.mileage = new PropertyBuilder().withName(i18next.t('customProperty.odometer.displayName')).withValue(item.odometerReading.value).withHint(i18next.t('customProperty.odometer.hint')).withType(NUMBER_TYPE).withCategory(BASIC_CATEGORY).withUnit(i18next.t(`odometer.${item.odometerReading.unit}`)).build();
+  } else if (!!item.mileage) {
+    newProperties.mileage = new PropertyBuilder().withName(i18next.t('customProperty.odometer.displayName')).withValue(item.mileage).withHint(i18next.t('customProperty.odometer.hint')).withType(NUMBER_TYPE).withCategory(BASIC_CATEGORY).withUnit(i18next.t('odometer.ScandinavianMile')).build();
   }
   if (!!item.gearboxType) {
-    newProperties.gearboxType = new PropertyBuilder().withName('Växellåda').withValue(item.gearboxType).withType(TEXT_TYPE).withCategory(BASIC_CATEGORY).build();
+    newProperties.gearboxType = new PropertyBuilder().withName(i18next.t('customProperty.gearboxType.displayName')).withValue(item.gearboxType).withType(TEXT_TYPE).withCategory(BASIC_CATEGORY).build();
   }
   if (!!item.registrationNumber) {
-    newProperties.registrationNumber = new PropertyBuilder().withName('Registreringsnummer').withValue(item.registrationNumber).withType(TEXT_TYPE).withCategory(BASIC_CATEGORY).build();
+    newProperties.registrationNumber = new PropertyBuilder().withName(i18next.t('customProperty.registrationNumber.displayName')).withValue(item.registrationNumber).withType(TEXT_TYPE).withCategory(BASIC_CATEGORY).build();
   }
   if (!!item.fuelType) {
-    newProperties.fuelType = new PropertyBuilder().withName('Bränslegrupp').withValue(item.fuelType).withType(TEXT_TYPE).withCategory(BASIC_CATEGORY).build();
+    newProperties.fuelType = new PropertyBuilder().withName(i18next.t('customProperty.fuelType.displayName')).withValue(item.fuelType).withHint(i18next.t('customProperty.fuelType.hint')).withType(TEXT_TYPE).withCategory(BASIC_CATEGORY).build();
   }
   if (item.enginePower) {
-    newProperties.enginePower = new PropertyBuilder().withName('Effekt').withValue(item.enginePower).withUnit('hk').withType(NUMBER_TYPE).withCategory(ENGINE_SUBCATEGORY).build();
+    newProperties.enginePower = new PropertyBuilder().withName(i18next.t('customProperty.enginePower.displayName')).withValue(item.enginePower).withUnit(i18next.t('customProperty.enginePower.unit')).withType(NUMBER_TYPE).withCategory(ENGINE_SUBCATEGORY).build();
   }
   return newProperties;
 });
@@ -8142,12 +9074,12 @@ const TableListBooleanNeg = styled__default.div`
 const formatValue = (value, unit) => {
   if (typeof value === 'boolean') {
     return value ? React__default.createElement(TableListBooleanPos, {
-      title: "Ja"
-    }, React__default.createElement(SrOnly, null, "Ja"), React__default.createElement(IconCheck, {
+      title: i18next.t('common.yes') || ''
+    }, React__default.createElement(SrOnly, null, i18next.t('common.yes')), React__default.createElement(IconCheck, {
       block: true
     })) : React__default.createElement(TableListBooleanNeg, {
-      title: "Nej"
-    }, React__default.createElement(SrOnly, null, "Nej"), React__default.createElement(IconCancel, {
+      title: i18next.t('common.no') || ''
+    }, React__default.createElement(SrOnly, null, i18next.t('common.no')), React__default.createElement(IconCancel, {
       block: true
     }));
   }
@@ -8165,13 +9097,18 @@ const MetadataItem = ({
   value,
   unit
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [foldout, setFoldout] = React.useState(false);
   const onToggleFoldout = React.useCallback(() => setFoldout(!foldout), [foldout]);
   const presentedValue = formatValue(value, unit);
   return React__default.createElement(TableListItem, null, React__default.createElement(TableListKey, null, hint ? React__default.createElement(ButtonInline, {
     onClick: onToggleFoldout,
-    title: `Mer information om ${name}`
-  }, name) : name), React__default.createElement(TableListValue, null, value !== undefined ? presentedValue : 'Uppgift saknas'), hint && foldout && React__default.createElement(Modal, {
+    title: t('item.moreInfoAboutSubject', {
+      subject: name
+    }) || ''
+  }, name) : name), React__default.createElement(TableListValue, null, value !== undefined ? presentedValue : t('item.dataNotAvailable')), hint && foldout && React__default.createElement(Modal, {
     title: name,
     onClose: onToggleFoldout
   }, React__default.createElement(Content$2, {
@@ -8296,24 +9233,23 @@ const PropertySet = ({
     if (!propertySet) {
       return undefined;
     }
-    let newProperties = removeProperties(propertySet);
-    newProperties = addCustomProperties(vehicleData, newProperties);
-    const enrichedProperties = enrichWithHint(newProperties);
+    const newProperties = removeProperties(propertySet);
+    const enrichedProperties = addCustomProperties(vehicleData, newProperties);
     const tree = new PropertyTreeCreator(enrichedProperties).create();
     sort(tree);
     return tree;
   }, [propertySet]);
   React.useEffect(() => {
     var _mappedProperties$cat;
-    const categories = (mappedProperties === null || mappedProperties === void 0 ? void 0 : (_mappedProperties$cat = mappedProperties.categories) === null || _mappedProperties$cat === void 0 ? void 0 : _mappedProperties$cat.length) !== undefined ? mappedProperties === null || mappedProperties === void 0 ? void 0 : mappedProperties.categories : undefined;
+    const categories = (mappedProperties === null || mappedProperties === void 0 || (_mappedProperties$cat = mappedProperties.categories) === null || _mappedProperties$cat === void 0 ? void 0 : _mappedProperties$cat.length) !== undefined ? mappedProperties === null || mappedProperties === void 0 ? void 0 : mappedProperties.categories : undefined;
     if (activeCategoryId < 0 && categories !== undefined && categories.length > 0) {
       setActiveCategoryId(categories[0].id);
     }
   }, [mappedProperties]);
   const onTab = React.useCallback(id => setActiveCategoryId(parseInt(id, 10)), []);
-  const activeCategory = mappedProperties === null || mappedProperties === void 0 ? void 0 : (_mappedProperties$cat2 = mappedProperties.categories) === null || _mappedProperties$cat2 === void 0 ? void 0 : _mappedProperties$cat2.find(category => category.id === activeCategoryId);
+  const activeCategory = mappedProperties === null || mappedProperties === void 0 || (_mappedProperties$cat2 = mappedProperties.categories) === null || _mappedProperties$cat2 === void 0 ? void 0 : _mappedProperties$cat2.find(category => category.id === activeCategoryId);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(Repeat, null, React__default.createElement(Tabs, {
-    tabs: (mappedProperties === null || mappedProperties === void 0 ? void 0 : (_mappedProperties$cat3 = mappedProperties.categories) === null || _mappedProperties$cat3 === void 0 ? void 0 : _mappedProperties$cat3.map(category => ({
+    tabs: (mappedProperties === null || mappedProperties === void 0 || (_mappedProperties$cat3 = mappedProperties.categories) === null || _mappedProperties$cat3 === void 0 ? void 0 : _mappedProperties$cat3.map(category => ({
       name: `${category.id}`,
       displayName: category.name
     }))) || [],
@@ -8327,10 +9263,15 @@ const PropertySet = ({
 
 const DemoCarModal = ({
   onClose
-}) => React__default.createElement(Modal, {
-  title: "Demobil",
-  onClose: onClose
-}, React__default.createElement(Content$2, null, React__default.createElement("p", null, "En demobil \u00E4r en bil som st\u00E5tt i utst\u00E4llning eller som p\u00E5 annat s\u00E4tt anv\u00E4nts f\u00F6r att visa upp en viss modell. Bilarna \u00E4r ofta v\u00E4lutrustade och har blivit v\u00E4l omh\u00E4ndertagna. Dessutom har de vanligtvis g\u00E5tt f\u00E5 mil och har fortfarande nybilsgarantierna kvar.")));
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  return React__default.createElement(Modal, {
+    title: t('item.demoCar'),
+    onClose: onClose
+  }, React__default.createElement(Content$2, null, React__default.createElement("p", null, t('item.demoCarDescription'))));
+};
 
 const PdfListItem = styled__default.li.attrs(() => ({
   className: 'wayke__theme wayke__color--primary-text'
@@ -8400,12 +9341,18 @@ const translateContentType = document => {
 const PdfDownloadItem = ({
   document
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const contentType = React.useMemo(() => translateContentType(document), [document]);
   return React__default.createElement(PdfListItem, null, React__default.createElement(PdfListInner, null, React__default.createElement(PdfColumn, null, React__default.createElement(PdfTitle, null, document.name), React__default.createElement(PdfSubtitle, null, contentType)), React__default.createElement(PdfColumn, null, React__default.createElement(PdfLink, {
     href: document.url,
     rel: "noopener noreferrer nofollow",
-    target: "_blank"
-  }, "\u00D6ppna"))));
+    target: "_blank",
+    title: t('other.openDocument', {
+      document: document.name
+    })
+  }, t('common.open')))));
 };
 const DocumentList = ({
   documents
@@ -8415,9 +9362,9 @@ const DocumentList = ({
 })));
 
 const Translation = {
-  'tyre-label': 'Energideklaration för däck',
-  'content declaration': 'Varudeklaration',
-  other: 'Övriga dokument'
+  'tyre-label': i18next.t('item.documentTypes.tireEnergyDeclaration'),
+  'content declaration': i18next.t('item.documentTypes.goodsDeclaration'),
+  other: i18next.t('item.documentTypes.other')
 };
 const SortOrder = {
   'tyre-label': 2,
@@ -8427,6 +9374,9 @@ const SortOrder = {
 const Documents = ({
   documents
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const categorised = documents.reduce((prev, curr) => {
     const index = prev.findIndex(x => x.category === (curr.category || 'others'));
     if (index > -1) {
@@ -8446,11 +9396,13 @@ const Documents = ({
   const manyCategories = categorised.length > 1;
   return React__default.createElement(ProductPageMainSection, null, React__default.createElement(Repeat, null, React__default.createElement(H2, {
     noMargin: true
-  }, "Dokument")), categorised.map(group => React__default.createElement(Repeat, {
+  }, t('item.documents'))), React__default.createElement(Repeat, null, React__default.createElement(ExtendContent, {
+    actionTitle: t('common.showMore')
+  }, categorised.map(group => React__default.createElement(Repeat, {
     key: group.category
   }, manyCategories && React__default.createElement(H3, null, (Translation === null || Translation === void 0 ? void 0 : Translation[group.category]) || Translation.other), React__default.createElement(DocumentList, {
     documents: group.documents
-  }))));
+  }))))));
 };
 
 const Wrapper$z = styled__default.div`
@@ -8548,17 +9500,23 @@ const AccessoryCard = ({
   price,
   preamble,
   readMoreCta
-}) => React__default.createElement(Wrapper$z, null, image ? React__default.createElement(Image$4, {
-  src: image.src,
-  srcSet: image.srcSet,
-  alt: image.alt
-}) : React__default.createElement(ImageaPlaceholder, null, React__default.createElement(IconImage, null)), React__default.createElement(Body$5, null, React__default.createElement(Heading$7, null, React__default.createElement(Title$2, null, title), branding && React__default.createElement(Branding, {
-  src: branding.src,
-  srcSet: branding.srcSet,
-  alt: branding.alt
-})), price && React__default.createElement(Price$2, null, price), preamble && React__default.createElement(Preamble, null, preamble), readMoreCta && React__default.createElement(ReadMoreBtn, {
-  onClick: readMoreCta
-}, "L\u00E4s mer")));
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  return React__default.createElement(Wrapper$z, null, image ? React__default.createElement(Image$4, {
+    src: image.src,
+    srcSet: image.srcSet,
+    alt: image.alt
+  }) : React__default.createElement(ImageaPlaceholder, null, React__default.createElement(IconImage, null)), React__default.createElement(Body$5, null, React__default.createElement(Heading$7, null, React__default.createElement(Title$2, null, title), branding && React__default.createElement(Branding, {
+    src: branding.src,
+    srcSet: branding.srcSet,
+    alt: branding.alt
+  })), price && React__default.createElement(Price$2, null, price), preamble && React__default.createElement(Preamble, null, preamble), readMoreCta && React__default.createElement(ReadMoreBtn, {
+    onClick: readMoreCta,
+    title: t('common.readMore') || ''
+  }, t('common.readMore'))));
+};
 
 const Image$5 = styled__default.img`
   display: block;
@@ -8640,22 +9598,25 @@ const AccesoryModal = ({
   onClose
 }) => {
   var _accessory$images;
+  const {
+    t
+  } = reactI18next.useTranslation();
   const priceList = [{
-    label: 'Kontantpris',
-    price: `${numberSeparator(accessory.price)} kr`,
+    label: t('item.accessories.price'),
+    price: `${numberSeparator(accessory.price)} ${t('currency.default')}`,
     oldPrice: false
   }];
   if (accessory.salePrice) {
     priceList.push({
-      label: 'Tidigare pris',
-      price: `${numberSeparator(accessory.salePrice)} kr`,
+      label: t('item.accessories.oldPrice'),
+      price: `${numberSeparator(accessory.salePrice)} ${t('currency.default')}`,
       oldPrice: true
     });
   }
   if (accessory.assemblyPrice) {
     priceList.push({
-      label: 'Monteringskostnad',
-      price: `${numberSeparator(accessory.assemblyPrice)} kr`,
+      label: t('item.accessories.installationCost'),
+      price: `${numberSeparator(accessory.assemblyPrice)} ${t('currency.default')}`,
       oldPrice: false
     });
   }
@@ -8668,7 +9629,7 @@ const AccesoryModal = ({
   })), accessory.logotype && React__default.createElement(Repeat, null, React__default.createElement(LogoBox, {
     logo: `${accessory.logotype}?w=160`,
     logo2x: `${accessory.logotype}?w=320`,
-    alt: accessory.manufacturer || 'Logotyp',
+    alt: accessory.manufacturer || t('common.logotype') || '',
     wide: true
   })), React__default.createElement(Repeat, null, React__default.createElement(PriceBox, {
     prices: priceList
@@ -8678,17 +9639,22 @@ const AccesoryModal = ({
     }
   })), accessory.articleNumber && React__default.createElement(Repeat, null, React__default.createElement(UtilityTextBold, {
     as: "div"
-  }, "Art. nr."), React__default.createElement("div", null, accessory.articleNumber)), accessory.productPage && accessory.productPage.url && React__default.createElement(Repeat, null, React__default.createElement(Link$1, {
+  }, t('item.accessories.articleNumberShort')), React__default.createElement("div", null, accessory.articleNumber)), accessory.productPage && accessory.productPage.url && React__default.createElement(Repeat, null, React__default.createElement(Link$1, {
     href: accessory.productPage.url,
-    title: `Mer information om ${accessory.name}`,
+    title: t('item.accessories.moreInformationAboutAccessory', {
+      accessory: accessory.name
+    }) || '',
     target: "_blank",
     rel: "noopener noreferrer nofollow"
-  }, accessory.productPage.title || 'Läs mer', " (\u00F6ppnas i ny flik)")));
+  }, accessory.productPage.title || t('common.readMore'), " (", t('common.opensInNewTab'), ")")));
 };
 
 const AccessoriesSection = ({
   accessories
 }) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [modal, setModal] = React.useState();
   const onOpenModal = accessory => setModal(accessory);
   const onCloseModal = () => setModal(undefined);
@@ -8698,7 +9664,7 @@ const AccessoriesSection = ({
     onClose: onCloseModal
   }), React__default.createElement(ProductPageMainSection, null, React__default.createElement(Repeat, null, React__default.createElement(H2, {
     noMargin: true
-  }, "Tillbeh\u00F6r")), React__default.createElement(Repeat, null, React__default.createElement(Content$2, null, React__default.createElement("p", null, "Tillbeh\u00F6r som passar till detta fordon."))), React__default.createElement(Repeat, null, React__default.createElement(OverflowGrid, {
+  }, t('item.accessories.accessories'))), React__default.createElement(Repeat, null, React__default.createElement(Content$2, null, React__default.createElement("p", null, t('item.accessories.accessoriesDescription')))), React__default.createElement(Repeat, null, React__default.createElement(OverflowGrid, {
     columns: 1.05,
     columnsSm: 2.1,
     columnsMd: 2,
@@ -8712,7 +9678,7 @@ const AccessoriesSection = ({
           src: `${(_accessory$images2 = accessory.images) === null || _accessory$images2 === void 0 ? void 0 : _accessory$images2[0]}?w=539&h=303`,
           alt: accessory.name
         } : undefined,
-        price: `${numberSeparator(accessory.price)} kr`,
+        price: `${numberSeparator(accessory.price)} ${t('currency.default')}`,
         preamble: accessory.excerpt,
         readMoreCta: () => onOpenModal(accessory)
       });
@@ -8721,6 +9687,7 @@ const AccessoriesSection = ({
 };
 
 const WaykeSearchItem = ({
+  marketCode,
   id,
   hashRoute,
   pathRoute,
@@ -8730,7 +9697,8 @@ const WaykeSearchItem = ({
   displayBranchName,
   onClickSearchItem
 }) => {
-  var _result$vehicle3, _result$vehicle3$data, _result$vehicle4, _branch$flags;
+  var _result$vehicle3, _result$vehicle4, _branch$flags;
+  const initialized = useInitializeTranslation(marketCode);
   const {
     ecomSettings
   } = useSettings();
@@ -8786,12 +9754,13 @@ const WaykeSearchItem = ({
     }
   }, [result]);
   const options = React.useMemo(() => {
-    var _result$vehicle2, _result$vehicle2$data, _result$vehicle2$data2;
-    return result === null || result === void 0 ? void 0 : (_result$vehicle2 = result.vehicle) === null || _result$vehicle2 === void 0 ? void 0 : (_result$vehicle2$data = _result$vehicle2.data) === null || _result$vehicle2$data === void 0 ? void 0 : (_result$vehicle2$data2 = _result$vehicle2$data.options) === null || _result$vehicle2$data2 === void 0 ? void 0 : _result$vehicle2$data2.filter(notEmpty).map(opt => ({
+    var _result$vehicle2;
+    return result === null || result === void 0 || (_result$vehicle2 = result.vehicle) === null || _result$vehicle2 === void 0 || (_result$vehicle2 = _result$vehicle2.data) === null || _result$vehicle2 === void 0 || (_result$vehicle2 = _result$vehicle2.options) === null || _result$vehicle2 === void 0 ? void 0 : _result$vehicle2.filter(notEmpty).map(opt => ({
       title: opt
     }));
-  }, [result === null || result === void 0 ? void 0 : (_result$vehicle3 = result.vehicle) === null || _result$vehicle3 === void 0 ? void 0 : (_result$vehicle3$data = _result$vehicle3.data) === null || _result$vehicle3$data === void 0 ? void 0 : _result$vehicle3$data.options]);
+  }, [result === null || result === void 0 || (_result$vehicle3 = result.vehicle) === null || _result$vehicle3 === void 0 || (_result$vehicle3 = _result$vehicle3.data) === null || _result$vehicle3 === void 0 ? void 0 : _result$vehicle3.options]);
   const onShowMoreOptionsClick = React.useCallback(() => PubSub.publish('OptionsClick'), []);
+  if (!initialized) return null;
   if (loading) {
     return React__default.createElement(PageLoading, null);
   }
@@ -8824,6 +9793,7 @@ const WaykeSearchItem = ({
   const {
     fuelType,
     mileage,
+    odometerReading,
     gearbox,
     modelYear,
     propertySet
@@ -8833,12 +9803,12 @@ const WaykeSearchItem = ({
   }];
   if (flags !== null && flags !== void 0 && flags.demoVersion) {
     uspList.push({
-      title: 'Demobil',
+      title: i18next.t('item.demoCar'),
       onClick: onToggleDemoCarModal
     });
   }
   uspList.push({
-    title: `${numberSeparator(mileage)} mil`
+    title: `${numberSeparator((odometerReading === null || odometerReading === void 0 ? void 0 : odometerReading.value) || mileage)} ${i18next.t(`odometer.${(odometerReading === null || odometerReading === void 0 ? void 0 : odometerReading.unit) || 'ScandinavianMile'}`)}`
   });
   if (gearbox) {
     uspList.push({
@@ -8857,10 +9827,10 @@ const WaykeSearchItem = ({
   }, !pathRoute && hashRoute ? React__default.createElement(Repeat, null, React__default.createElement(UtilityFontSizeSmall, null, React__default.createElement(ButtonInlineLight, {
     as: "a",
     href: "#",
-    title: "Tillbaka till bils\u00F6k"
+    title: i18next.t('navigation.backToSearch')
   }, React__default.createElement(ButtonContent, null, React__default.createElement(IconChevronLeft, {
     block: true
-  })), React__default.createElement(ButtonContent, null, "Tillbaka till bils\u00F6k")))) : null, (manufacturer === null || manufacturer === void 0 ? void 0 : manufacturer.logotype) && React__default.createElement(Repeat, null, React__default.createElement(LogoBox, {
+  })), React__default.createElement(ButtonContent, null, i18next.t('navigation.backToSearch'))))) : null, (manufacturer === null || manufacturer === void 0 ? void 0 : manufacturer.logotype) && React__default.createElement(Repeat, null, React__default.createElement(LogoBox, {
     logo: manufacturer.logotype,
     alt: manufacturer.name
   })), React__default.createElement(Repeat, null, React__default.createElement(RepeatSmall, null, React__default.createElement(H1, {
@@ -8903,7 +9873,7 @@ const WaykeSearchItem = ({
     placeholderImage: placeholderImage
   })), React__default.createElement(ProductPageMainSection, null, React__default.createElement(Repeat, null, React__default.createElement(H2, {
     noMargin: true
-  }, "Biluppgifter")), React__default.createElement(Repeat, null, React__default.createElement(Content$2, null, React__default.createElement("p", null, "Information direkt fr\u00E5n Transportstyrelsen och tillverkaren."))), React__default.createElement(Repeat, null, React__default.createElement(PropertySet, {
+  }, i18next.t('item.carData'))), React__default.createElement(Repeat, null, React__default.createElement(Content$2, null, React__default.createElement("p", null, i18next.t('item.carDataDescription')))), React__default.createElement(Repeat, null, React__default.createElement(PropertySet, {
     propertySet: propertySet,
     vehicleData: vehicle.data
   }))), description && React__default.createElement(ProductPageMainSection, null, React__default.createElement(Blockquote, {
@@ -8912,8 +9882,8 @@ const WaykeSearchItem = ({
     avatar: (contact === null || contact === void 0 ? void 0 : contact.avatar) || undefined
   }, !!description && React__default.createElement("p", null, description))), ((options === null || options === void 0 ? void 0 : options.length) || 0) > 0 && React__default.createElement(ProductPageMainSection, null, React__default.createElement(Repeat, null, React__default.createElement(H2, {
     noMargin: true
-  }, "Utrustning")), React__default.createElement(Repeat, null, React__default.createElement(Content$2, null, React__default.createElement("p", null, "Kompletterande uppgifter om bilen."))), React__default.createElement(Repeat, null, React__default.createElement(ExtendContent, {
-    actionTitle: "Visa mer",
+  }, i18next.t('item.equipment'))), React__default.createElement(Repeat, null, React__default.createElement(Content$2, null, React__default.createElement("p", null, i18next.t('item.equipmentDescription')))), React__default.createElement(Repeat, null, React__default.createElement(ExtendContent, {
+    actionTitle: i18next.t('common.showMore'),
     onClick: onShowMoreOptionsClick
   }, React__default.createElement(UspList, {
     items: options
@@ -9104,7 +10074,7 @@ const SearchProvider = ({
     if (response) {
       var _response$documentLis;
       setQueryFilter({
-        searchParams: new URLSearchParams(response === null || response === void 0 ? void 0 : (_response$documentLis = response.documentList.pagination.nextPage) === null || _response$documentLis === void 0 ? void 0 : _response$documentLis.query),
+        searchParams: new URLSearchParams(response === null || response === void 0 || (_response$documentLis = response.documentList.pagination.nextPage) === null || _response$documentLis === void 0 ? void 0 : _response$documentLis.query),
         concatResult: true
       });
     }
@@ -9117,7 +10087,7 @@ const SearchProvider = ({
         _initialQueryParams.forEach((value, key) => {
           var _initialQueryParams$g;
           if (!(initialQueryParams !== null && initialQueryParams !== void 0 && (_initialQueryParams$g = initialQueryParams.getAll(key)) !== null && _initialQueryParams$g !== void 0 && _initialQueryParams$g.some(v => v === value))) {
-            initialQueryParams === null || initialQueryParams === void 0 ? void 0 : initialQueryParams.append(key, value);
+            initialQueryParams === null || initialQueryParams === void 0 || initialQueryParams.append(key, value);
           }
         });
       }
@@ -9400,6 +10370,7 @@ const useHashGuid = () => {
 };
 
 const WaykeComposite = ({
+  marketCode,
   filterList,
   initialQueryParams,
   removeSearchBar,
@@ -9415,6 +10386,7 @@ const WaykeComposite = ({
   const {
     id: pathId
   } = usePath();
+  const initialized = useInitializeTranslation(marketCode);
   React.useEffect(() => {
     if (!pathRoute) {
       if (hashId) {
@@ -9425,6 +10397,7 @@ const WaykeComposite = ({
     }
   }, [hashId]);
   const id = pathId || hashId;
+  if (!initialized) return null;
   return React__default.createElement(React__default.Fragment, null, id ? React__default.createElement(WaykeSearchItem, {
     id: id,
     hashRoute: !pathRoute,
@@ -9434,6 +10407,7 @@ const WaykeComposite = ({
     modifyDocumentTitleItem: modifyDocumentTitleItem,
     displayBranchName: displayBranchName
   }) : React__default.createElement(WaykeSearch, {
+    marketCode: marketCode,
     filterList: filterList,
     initialQueryParams: initialQueryParams,
     removeSearchBar: removeSearchBar,