\n
\n
\n
\n );\n}\n","import { Container, Row, Col } from 'react-bootstrap';\nimport _chunk from 'lodash.chunk';\n\nimport useBreakPoints from '../../hooks/useBreakPoints';\n\nimport ModelFamilyCard from './ModelFamilyCard';\nimport Loader from '../Loader';\n\nconst GridView = ({ models = [], loading }) => {\n const { isLg } = useBreakPoints();\n\n if (loading) return \n {t('ErrorTechnical')} \n
\n );\n\n return (\n \n {t('SpecialOffers')} \n
\n );\n};\n\nexport default Landing;\n","var _path;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nfunction SvgDoor(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 22,\n height: 22,\n viewBox: \"0 0 22 22\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M14.8557 2C12.1021 2 9.85359 2.48481 8.1 3.8C7.19835 4.47624 5.64268 6.14135 4.25071 7.72313C3.56959 8.49713 2.9497 9.22549 2.49986 9.76064C2.42851 9.84552 2.36147 9.92551 2.29918 10L20 10V2H14.8557ZM20 12L2 12V20H20V12ZM0 21C0 21.5523 0.447715 22 1 22H21C21.5523 22 22 21.5523 22 21V1C22 0.447715 21.5523 0 21 0H14.8557C11.8979 0 9.14641 0.515195 6.9 2.2C5.80165 3.02376 4.10732 4.85865 2.74929 6.40187C2.05541 7.19037 1.4253 7.93076 0.968889 8.47374C0.74055 8.74538 0.555365 8.96799 0.427038 9.12297C0.362867 9.20047 0.312893 9.26108 0.278827 9.30248L0.239868 9.34989L0.226353 9.36638C0.226292 9.36646 0.226043 9.36676 1 10L0.226353 9.36638C0.0801746 9.54505 0 9.76916 0 10V21ZM18 15L16 15C15.4477 15 15 14.5523 15 14C15 13.4477 15.4477 13 16 13L18 13C18.5523 13 19 13.4477 19 14C19 14.5523 18.5523 15 18 15Z\",\n fill: \"#8B8C90\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgDoor);\nexport default __webpack_public_path__ + \"static/media/Door.e8e85e21.svg\";\nexport { ForwardRef as ReactComponent };","import { useQuery } from 'react-query';\n\nimport { apiRequest } from '../utils/apiUtils';\n\nexport default function useRetailers(retailer) {\n return useQuery(\n ['retailers', retailer],\n () => apiRequest(`/api/retailers${retailer ? `?code=${retailer}` : ''}`),\n {\n refetchOnWindowFocus: false,\n }\n );\n}\n","import * as React from 'react';\n\nexport default function useAsyncDebounce(defaultFn, defaultWait = 0) {\n const debounceRef = React.useRef({});\n\n const getDefaultFn = useGetLatest(defaultFn);\n const getDefaultWait = useGetLatest(defaultWait);\n\n return React.useCallback(\n async (...args) => {\n if (!debounceRef.current.promise) {\n debounceRef.current.promise = new Promise((resolve, reject) => {\n debounceRef.current.resolve = resolve;\n debounceRef.current.reject = reject;\n });\n }\n\n if (debounceRef.current.timeout) {\n clearTimeout(debounceRef.current.timeout);\n }\n\n debounceRef.current.timeout = setTimeout(async () => {\n delete debounceRef.current.timeout;\n try {\n debounceRef.current.resolve(await getDefaultFn()(...args));\n } catch (err) {\n debounceRef.current.reject(err);\n } finally {\n delete debounceRef.current.promise;\n }\n }, getDefaultWait());\n\n return debounceRef.current.promise;\n },\n [getDefaultFn, getDefaultWait]\n );\n}\n\nfunction useGetLatest(obj) {\n const ref = React.useRef();\n ref.current = obj;\n\n return React.useCallback(() => ref.current, []);\n}\n","import { useHistory, useParams } from 'react-router-dom';\nimport { useTranslation } from 'react-i18next';\nimport { Button, Col, Container, Row } from 'react-bootstrap';\nimport Icon from '@mdi/react';\nimport { mdiChevronLeft } from '@mdi/js';\n\nimport useBreakPoints from '../../hooks/useBreakPoints';\n\nimport { Title } from '../UIComponents/Typography';\n\nexport default function Hero({ img, model, price }) {\n const { t } = useTranslation();\n const history = useHistory();\n const { retailer } = useParams();\n const { isXs } = useBreakPoints();\n\n const handleBackBtn = () => {\n history.push(`/${retailer ? retailer : ''}`);\n };\n\n return (\n \n \n \n {filters &&\n Object.keys(filtersToRender).map((filter, idx) => (\n \n {renderFilters(filter)}\n \n ))}\n
\n \n
\n );\n};\n\nexport default Filters;\n","import { Trans, useTranslation } from 'react-i18next';\n\nimport { formatPrice } from '../../utils';\n\nimport { Text } from '../UIComponents/Typography';\n\nimport './styles.scss';\n\nexport default function PriceBox({\n MonthlyPmt,\n Prices,\n InterestRate,\n IsHybrid,\n SpecialInterest,\n EuriborText,\n IsDetailsView = false,\n}) {\n const { t } = useTranslation();\n const { CurrentPrice, OriginalPrice } = Prices;\n\n const hasDiscount = CurrentPrice < OriginalPrice;\n\n let interest;\n\n if (!IsDetailsView) {\n interest = (SpecialInterest || InterestRate)\n .toString()\n .split('.')\n .join(',');\n }\n\n return (\n \n {hasDiscount ? (\n <>\n {`${t('RegularPrice')} ${formatPrice(\n OriginalPrice\n )} €`} \n \n {t('SpecialPrice')}{' '}\n {`${formatPrice(\n CurrentPrice\n )} €`} \n \n \n ) : (\n \n {t('Price')}{' '}\n {`${formatPrice(CurrentPrice)} €`} \n \n )}\n \n Kuumaks {{ MonthlyPmt }} € \n \n \n {t('TaxIncluded')}\n \n {!IsDetailsView && (\n
\n )}\n \n );\n}\n","import { Col, Row } from 'react-bootstrap';\nimport './styles.scss';\n\nexport default function LeasingInterest({ isDetailView, CampaignIcons = [] }) {\n if (!isDetailView) {\n return (\n \n \n \n {IsHybrid ? t('HybridLeasingInterest') : t('LeasingInterest')}\n \n {EuriborText} \n
\n \n {`${interest}%`} \n
\n : null}\n
\n \n \n \n \n
\n );\n}\n","import './styles.scss';\n\nexport default function ToyotaStripe() {\n return ;\n}\n","import * as React from 'react';\nimport { Button, Container, Row } from 'react-bootstrap';\nimport { Trans, useTranslation } from 'react-i18next';\nimport { useHistory, useParams } from 'react-router-dom';\n\nimport useSearch from '../hooks/useSearch';\nimport useFilters from '../hooks/useFilters';\nimport useRetailers from '../hooks/useRetailers';\nimport useAsyncDebounce from '../hooks/useDebounce';\nimport useModelFamily from '../hooks/useModelFamily';\n\nimport { formatPrice, priceSorter } from '../utils';\n\nimport Hero from '../components/ModelList/Hero';\nimport Filters from '../components/ModelList/Filters';\nimport ListCard from '../components/ModelList/ListCard';\nimport Loader from '../components/Loader';\nimport OfferModal from '../components/OfferModal';\nimport Disclaimers from '../components/Disclaimers';\nimport ToyotaStripe from '../components/ToyotaStripe';\nimport Select from '../components/UIComponents/Select';\nimport { Title } from '../components/UIComponents/Typography';\n\nconst sortOptions = [\n {\n id: 'asc',\n value: 'PriceAscending',\n },\n {\n id: 'desc',\n value: 'PriceDescending',\n },\n {\n id: 'availability',\n value: 'SortByAvailability',\n },\n {\n id: 'priceDiff',\n value: 'BiggestDiscount',\n },\n];\n\nconst ModelList = props => {\n const history = useHistory();\n const { t } = useTranslation();\n const { modelFamily, retailer } = useParams();\n const { isLoading, data, isError } = useModelFamily(modelFamily);\n const { data: retailers, isError: retailersError } = useRetailers(retailer);\n const { data: filters, isLoading: filtersLoading } = useFilters(modelFamily);\n\n const [sortOrder, setSortOrder] = React.useState('asc');\n const [isModalVisible, setIsModalVisible] = React.useState(false);\n const [filterValues, setFilterValues] = React.useState(null);\n const [hasFilterChanged, setHasFilterChanged] = React.useState(false);\n const [currentVehicle, setCurrentVehicle] = React.useState(null);\n\n React.useEffect(() => {\n if (filters) {\n setFilterValues({\n TransmissionTypes: [],\n BodyTypes: [],\n FuelTypes: [],\n DriveTrainTypes: [],\n CO2: filters.CO2,\n PriceRange: filters.PriceRange,\n ModelFamilyName: modelFamily,\n });\n }\n }, [filters, modelFamily]);\n\n React.useEffect(() => {\n if (props.location.search) {\n const lastSelected = document.getElementById(\n props.location.search.split('=')[1]\n );\n lastSelected?.scrollIntoView();\n }\n }, [props.location.search]);\n\n const {\n data: filteredCars,\n refetch,\n isLoading: filteredCarsLoading,\n } = useSearch(filterValues);\n const onFetchDataDebounce = useAsyncDebounce(refetch, 500);\n\n React.useEffect(() => {\n if (hasFilterChanged) onFetchDataDebounce(filterValues);\n }, [filterValues, hasFilterChanged, onFetchDataDebounce, refetch]);\n\n const currentData = hasFilterChanged ? filteredCars : data;\n const modelCount = currentData?.length ?? data?.length;\n const cheapestModel = data?.reduce((prev, curr) => {\n return prev.CurrentPrice < curr.CurrentPrice ? prev : curr;\n });\n const mostExpensiveModel = data?.reduce((prev, curr) => {\n return prev.CurrentPrice > curr.CurrentPrice ? prev : curr;\n });\n\n const handleSortOrder = id => setSortOrder(id);\n\n const handleModal = modelId => {\n const found = data.find(e => e.URN === modelId);\n setCurrentVehicle(found);\n setIsModalVisible(modelId ? modelId : false);\n };\n\n const handleOtherBtn = () => history.push(`/${retailer ? retailer : ''}`);\n\n const handleCreateBtn = () =>\n window.open(\n `${t('ToyotaHomePage')}/new-cars/${modelFamily}/index.json`,\n '_blank'\n );\n\n const handleScrollToTop = () => window.scrollTo(0, 0);\n\n if (isLoading) return \n \n \n {t('NoSuitableCar')}\n \n \n \n {t('BackToTop')}\n \n \n {t('ShowAllOffers')}\n \n \n
\n \n {isModalVisible ? (\n
\n );\n};\n\nexport default ModelList;\n","import { useQuery } from 'react-query';\n\nimport { apiRequest } from '../utils/apiUtils';\n\nexport default function useModelFamily(familyUrl) {\n return useQuery(\n ['modelFamily', familyUrl],\n async () => {\n const data = await apiRequest(`/api/vehicles?modelFamily=${familyUrl}`);\n const indexedData = data.map((vehicle, index) => ({\n index,\n ...vehicle,\n }));\n return indexedData;\n },\n {\n refetchOnWindowFocus: false,\n }\n );\n}\n","import { useQuery } from 'react-query';\n\nimport { apiRequest } from '../utils/apiUtils';\n\nexport default function useFilters(modelFamily) {\n return useQuery(\n ['filters', modelFamily],\n () => apiRequest(`/api/vehicles/${modelFamily}/search`),\n {\n refetchOnWindowFocus: false,\n }\n );\n}\n","import { useQuery } from 'react-query';\n\nimport { apiRequest, postRequest } from '../utils/apiUtils';\n\nexport default function useSearch(searchBody) {\n return useQuery(\n ['search', searchBody],\n async () => {\n const data = await apiRequest(\n `/api/vehicles/search`,\n postRequest(searchBody)\n );\n const indexedData = data.map((vehicle, index) => ({\n index,\n ...vehicle,\n }));\n return indexedData;\n },\n {\n refetchOnWindowFocus: false,\n refetchOnMount: false,\n enabled: false,\n keepPreviousData: true,\n }\n );\n}\n","import * as React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Col, Container, Form, FormControl, InputGroup } from 'react-bootstrap';\n\nimport useLeasing from '../../hooks/useLeasing';\n\nimport { Text, Title } from '../UIComponents/Typography';\n\nconst initialState = {\n downp: 15,\n residual: 30,\n period: 5,\n leasingtype: 1,\n};\nconst numbersRegex = /^[0-9]*$/;\n\nexport default function Leasing({ price, interest, isHybrid }) {\n const { t } = useTranslation();\n\n const [formValues, setFormValues] = React.useState({\n ...initialState,\n residual: isHybrid ? 40 : 30,\n price,\n interest,\n downpNr: Math.round((initialState.downp * price) / 100),\n residualNr: Math.round(((isHybrid ? 40 : 30) * price) / 100),\n });\n const { data } = useLeasing(formValues);\n\n const handleFormChange = (value, type) => {\n if (!value.match(numbersRegex)) return;\n if (type === 'downpNr' || type === 'residualNr') {\n const percentage = Math.round((value * 100) / price);\n\n setFormValues(prevState => ({\n ...prevState,\n [type.slice(0, -2)]: percentage,\n [type]: value,\n }));\n return;\n }\n\n if (type === 'downp' || type === 'residual') {\n const nrValue = Math.round((value * price) / 100);\n\n setFormValues(prevState => ({\n ...prevState,\n [type]: value,\n [`${type}Nr`]: nrValue,\n }));\n return;\n }\n\n setFormValues(prevState => ({ ...prevState, [type]: value }));\n };\n\n return (\n \n {filteredCarsLoading ? (\n \n <Trans i18nKey=\"ModelsAvailable\">\n Saadaval on {{ modelcount: modelCount }} autot,\n </Trans>\n \n \n {t('NoSuchModelsAvailable')}\n \n )}\n
\n \n \n {t('SortedBy')}\n \n
\n \n ) : (\n \n {priceSorter(currentData, sortOrder).map(model => (\n
\n \n \n \n {t('Leaseing')}\n \n \n \n
\n );\n}\n","import { useQuery } from 'react-query';\n\nimport { apiRequest } from '../utils/apiUtils';\n\nexport default function useLeasing(regBody) {\n const { downp, residual, period, interest, price, leasingtype } = regBody;\n\n return useQuery(\n ['leasing', regBody],\n () =>\n apiRequest(\n `/api/model/leasing/${downp}/${residual}/${period}/${interest}/${price}/${leasingtype}`\n ),\n {\n refetchOnWindowFocus: false,\n refetchOnMount: false,\n }\n );\n}\n","import * as React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Row, Col, Container } from 'react-bootstrap';\nimport Icon from '@mdi/react';\nimport { mdiCheck } from '@mdi/js';\n\nimport Loader from '../Loader';\nimport { Text, Title } from '../UIComponents/Typography';\n\nconst iconColor = '#8B8C90';\n\nexport default function Equipment({ list = {}, isLoading }) {\n const { t } = useTranslation();\n\n const columns = [[], []];\n const subEquipment = {};\n\n for (const [idx, pack] of Object.keys(list).entries()) {\n if (idx < Object.keys(list).length / 2) {\n columns[0].push(pack);\n } else {\n columns[1].push(pack);\n }\n }\n\n for (const type in list) {\n if (Object.hasOwnProperty.call(list, type)) {\n const element = list[type];\n const subEquipments = element.filter(\n ({ SubEquipment }) => Object.keys(SubEquipment).length\n );\n subEquipments.forEach(({ SubEquipment }) => {\n const subEquipmentKey = Object.keys(SubEquipment)[0];\n if (!subEquipment.length) {\n subEquipment[type] = SubEquipment;\n }\n if (!subEquipment?.[type]?.[subEquipmentKey]) {\n const prevSubs = { ...subEquipment[type] };\n subEquipment[type] = [...prevSubs, SubEquipment];\n }\n });\n }\n }\n\n if (isLoading) return \n {list[pack].map(({ Name }) => (\n \n {Name}\n \n ))}\n
\n {subEquipment?.[pack]\n ? Object.keys(subEquipment[pack]).map(key => (\n \n \n \n
\n ))\n : null}\n \n {subEquipment[pack][key].map(({ Name }) => (\n \n {Name}\n \n ))}\n
\n \n
\n \n \n
\n \n \n \n \n \n \n {t('ShareWithFriend')}\n \n \n {t('BackToModels')}\n \n \n
\n \n
\n );\n } else {\n const nextPath = removeLastPathSegment(pathname);\n return \n 
\n
\n \n {t('AlternateCountryUrl') === '-' ? null : (\n \n {t('AlternativeCountryText')}\n
\n )}\n {currentRetailer ? (\n \n 
\n
\n \n \n
\n \n \n \n {init() && \n \n
\n