\n })\n }\n}\n\nexport enum APIMethods {\n USER_LISTALL = \"LIST_USERS\",\n VAS_LISTALL = \"LIST_VAS\",\n TECDOC_GETCOUNTRIES = \"getCountries\",\n TECDOC_GETARTICLE = \"getArticleDirectSearchAllNumbersWithState\",\n TECDOC_GETBRANDDETAILS = \"getAmBrandAddress\",\n TECDOC_GETARTICLEDETAILS = \"getDirectArticlesByIds6\",\n TECDOC_ADDIPADDRESS = \"addDynamicAddress\",\n TECDOC_GETVEHICLELIST = \"getArticleLinkedAllLinkingTarget3\",\n TECDOC_GETVEHICLEDETAILSLIST = \"getVehicleByIds4\",\n TECDOC_GETVEHICLELISTIMMEDIATEATTRIBUTS = \"getArticleLinkedAllLinkingTargetsByIds3\",\n}\n","var map = {\n\t\"./de.json\": [\n\t\t753,\n\t\t59\n\t],\n\t\"./en.json\": [\n\t\t206\n\t],\n\t\"./es.json\": [\n\t\t754,\n\t\t60\n\t],\n\t\"./fr.json\": [\n\t\t755,\n\t\t61\n\t],\n\t\"./it.json\": [\n\t\t756,\n\t\t62\n\t]\n};\nfunction webpackAsyncContext(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\treturn Promise.resolve().then(function() {\n\t\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\t\te.code = 'MODULE_NOT_FOUND';\n\t\t\tthrow e;\n\t\t});\n\t}\n\n\tvar ids = map[req], id = ids[0];\n\treturn Promise.all(ids.slice(1).map(__webpack_require__.e)).then(function() {\n\t\treturn __webpack_require__.t(id, 3);\n\t});\n}\nwebpackAsyncContext.keys = function webpackAsyncContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackAsyncContext.id = 349;\nmodule.exports = webpackAsyncContext;","var map = {\n\t\"./af.json\": 594,\n\t\"./am.json\": 595,\n\t\"./ar.json\": 596,\n\t\"./az.json\": 597,\n\t\"./be.json\": 598,\n\t\"./bg.json\": 599,\n\t\"./bn.json\": 600,\n\t\"./br.json\": 601,\n\t\"./bs.json\": 602,\n\t\"./ca.json\": 603,\n\t\"./cs.json\": 604,\n\t\"./cy.json\": 605,\n\t\"./da.json\": 606,\n\t\"./de.json\": 607,\n\t\"./dv.json\": 608,\n\t\"./el.json\": 609,\n\t\"./en.json\": 610,\n\t\"./es.json\": 611,\n\t\"./et.json\": 612,\n\t\"./eu.json\": 613,\n\t\"./fa.json\": 614,\n\t\"./fi.json\": 615,\n\t\"./fr.json\": 616,\n\t\"./ga.json\": 617,\n\t\"./gl.json\": 618,\n\t\"./ha.json\": 619,\n\t\"./he.json\": 620,\n\t\"./hi.json\": 621,\n\t\"./hr.json\": 622,\n\t\"./hu.json\": 623,\n\t\"./hy.json\": 624,\n\t\"./id.json\": 625,\n\t\"./is.json\": 626,\n\t\"./it.json\": 627,\n\t\"./ja.json\": 628,\n\t\"./ka.json\": 629,\n\t\"./kk.json\": 630,\n\t\"./km.json\": 631,\n\t\"./ko.json\": 632,\n\t\"./ku.json\": 633,\n\t\"./ky.json\": 634,\n\t\"./lt.json\": 635,\n\t\"./lv.json\": 636,\n\t\"./mk.json\": 637,\n\t\"./ml.json\": 638,\n\t\"./mn.json\": 639,\n\t\"./mr.json\": 640,\n\t\"./ms.json\": 641,\n\t\"./nb.json\": 642,\n\t\"./nl.json\": 643,\n\t\"./nn.json\": 644,\n\t\"./no.json\": 645,\n\t\"./pl.json\": 646,\n\t\"./ps.json\": 647,\n\t\"./pt.json\": 648,\n\t\"./ro.json\": 649,\n\t\"./ru.json\": 650,\n\t\"./sd.json\": 651,\n\t\"./sk.json\": 652,\n\t\"./sl.json\": 653,\n\t\"./so.json\": 654,\n\t\"./sq.json\": 655,\n\t\"./sr.json\": 656,\n\t\"./sv.json\": 657,\n\t\"./sw.json\": 658,\n\t\"./ta.json\": 659,\n\t\"./tg.json\": 660,\n\t\"./th.json\": 661,\n\t\"./tr.json\": 662,\n\t\"./tt.json\": 663,\n\t\"./ug.json\": 664,\n\t\"./uk.json\": 665,\n\t\"./ur.json\": 666,\n\t\"./uz.json\": 667,\n\t\"./vi.json\": 668,\n\t\"./zh.json\": 669\n};\n\n\nfunction webpackContext(req) {\n\tvar id = webpackContextResolve(req);\n\treturn __webpack_require__(id);\n}\nfunction webpackContextResolve(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\te.code = 'MODULE_NOT_FOUND';\n\t\tthrow e;\n\t}\n\treturn map[req];\n}\nwebpackContext.keys = function webpackContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackContext.resolve = webpackContextResolve;\nmodule.exports = webpackContext;\nwebpackContext.id = 388;","import React, { useCallback } from \"react\"\nimport { Box, CircularProgress } from \"@mui/material\"\nimport { observer } from \"mobx-react\"\nimport { useEffect, useState } from \"react\"\n\nimport AccessDenied from \"../AccessDenied\"\n\nimport { useUserStore } from \"api/services/User\"\nimport { useMatchedRoute } from \"hooks\"\nimport { useLocation } from \"react-router-dom\"\nimport { TRoute } from \"types/Global\"\nimport { resultOrError } from \"utils/Global\"\nimport { routes as useRoutes } from \"../routes\"\n\nimport { useTranslation } from \"react-i18next\"\nimport { StyledContent } from \"../../components/Background/styles\"\nimport TopBar from \"components/TopBar\"\n\n/** set webpack public path as otherwise the chunks of translations are not loaded correctly. \n/ It is not taking a relative path but always a static one. The reason why it is determined here dynamically\n */\n__webpack_public_path__ = window.location.pathname\nif (\n __webpack_public_path__.endsWith(\".html\") ||\n __webpack_public_path__.endsWith(\".htm\")\n) {\n __webpack_public_path__ = __webpack_public_path__.substring(\n 0,\n __webpack_public_path__.lastIndexOf(\"/\") + 1\n )\n} else if (window.location.hostname.includes(\"continental-aftermarket.com\")) {\n __webpack_public_path__ = __webpack_public_path__.substring(\n 0,\n __webpack_public_path__.lastIndexOf(\"/\") + 1\n )\n} else if (!__webpack_public_path__.endsWith(\"/\")) {\n __webpack_public_path__ += \"/\"\n}\n\nconst hideSplashScreen = () => {\n const splashscreen = document.getElementById(\"app-splashscreen\")\n\n if (splashscreen) {\n splashscreen.className = \"\"\n setTimeout(() => {\n splashscreen.remove()\n }, 30)\n }\n}\nexport const namespace = __filename\n\nconst RootRouter = () => {\n const userStore = useUserStore()\n\n const location = useLocation()\n const routes = [...useRoutes] as readonly TRoute[]\n const [fallbackRoute] = routes\n const { MatchedElement } = useMatchedRoute(routes, fallbackRoute.Component, {\n matchOnSubPath: true,\n })\n\n const { t } = useTranslation(\"app\")\n const [pageTitle, setPageTitle] = useState(\"\")\n\n const checkTopBarTitle = useCallback(() => {\n let translatedTitle;\n \n switch (pageTitle) {\n case \"Start screen\":\n case \"Echtheitsüberprüfung\":\n translatedTitle = \"titleStartScreenTopBar\";\n break;\n case \"MAPPCode Screen\":\n case \"MAPPCode-Bildschirm\":\n translatedTitle = \"titleMAPPCheckTopBar\";\n break;\n case \"Authenticity Check\":\n case \"Echtheitsprüfung\":\n translatedTitle = \"titleAuthenticityTopBar\";\n break;\n case \"Scan EAN Code\":\n case \"EAN Code scannen\":\n case \"TecDoc Catalogue\":\n case \"TecDoc Katalog\":\n translatedTitle = \"titleEANCheckTopBar\";\n break;\n case \"Counterfeit Report\":\n case \"Fälschungsbericht\":\n translatedTitle = \"titleCounterfeitTopBar\";\n break;\n default:\n translatedTitle = \"titleStartScreenTopBar\";\n }\n \n return t(translatedTitle);\n }, [t, pageTitle]);\n\n useEffect(() => {\n setPageTitle(t(`routes.${location.pathname}`))\n checkTopBarTitle()\n }, [location, t])\n\n const loadingApp = false\n const accessDenied = false\n // todo: animate\n useEffect(() => {\n hideSplashScreen()\n }, [])\n\n useEffect(() => {\n ;(async () => {\n if (!userStore.user) {\n const [result, error] = await resultOrError(userStore.getOwnUser())\n if (error) {\n console.log(\"getOwnUser error\", error)\n }\n console.log(\"getOwnUser result\", result)\n }\n })()\n }, [userStore])\n\n if (accessDenied) {\n return \n }\n\n return (\n \n {loadingApp ? (\n \n \n \n ) : (\n <>\n \n {MatchedElement}\n \n )}\n
\n )\n}\n\nexport default observer(RootRouter)\n","import * as React from \"react\"\nimport { useTranslation } from \"react-i18next\"\nimport { observer } from \"mobx-react\"\nimport consola from \"consola\"\n\nimport DangerousIcon from \"@mui/icons-material/Dangerous\"\nimport { Button, Typography } from \"@mui/material\"\nimport Box from \"@mui/material/Box\"\nimport { styled, useTheme } from \"@mui/material/styles\"\n\nimport cloud from \"@osapiens/cloud-interop/lib\"\n\nimport { isCloudEnv } from \"utils/env\"\n\nconst Container = styled(\"div\")(({ theme }) => ({\n display: \"flex\",\n flex: 4,\n justifyContent: \"space-evenly\",\n flexDirection: \"column\",\n alignItems: \"center\",\n overflowY: \"scroll\",\n background: `url(${\"\"}) repeat content-box`,\n}))\nconst AccessDenied: React.FC = () => {\n const { t } = useTranslation(\"app\")\n const theme = useTheme()\n\n const color = theme.palette.error.main\n React.useEffect(() => {\n // on screen leave\n return () => {\n // clearCache()\n }\n // eslint-disable-next-line\n }, [])\n\n // TODO: aldd all i18n texts to locales and refactor file\n\n const handleLogout = () => {\n if (isCloudEnv()) {\n cloud.navigation.logout()\n } else {\n consola.error(\n \"Logout not possible: Osapiens cloud interop API (window.parent.primingcloud) not available.\"\n )\n }\n }\n\n return (\n \n \n \n \n {t(\"AccessDenied\")}\n \n {t(\"speakToYourAdmin\")}\n \n \n \n \n )\n}\n\nexport default observer(AccessDenied)\n","import React, { useEffect, useMemo, useRef, useState } from \"react\"\nimport { observer } from \"mobx-react\"\n// https://qa.osapiens.cloud/portal/portal/webbundle/OneIDTestCustomer/BrandOS/MobileResponsePage/static/\n// https://qa.osapiens.cloud/portal/portal/webbundle/BrandOSMaster/BrandOS/MobileResponsePage-generic/static/\n// https://qa.osapiens.cloud/portal/portal/webbundle/BorgWarner/BrandOS/MobileResponsePage/static/\nimport {\n Box,\n CircularProgress,\n Container,\n Typography,\n useTheme,\n} from \"@mui/material\"\n\nimport Image from \"components/Image\"\nimport CheckResultFlags from \"./components/CheckResultFlags\"\nimport { useAuthenticityCheckStore } from \"api/services/AuthenticityCheck\"\nimport ResponsiveBackground from \"../../components/ResponsiveBackground\"\nimport useScopedTranslation from \"../../hooks/useScopedTranslation\"\nimport en from \"./locales/en.json\"\nimport { SearchParameters } from \"../../types/BusinessObjects\"\nimport { isUndefined } from \"../../utils/util\"\nimport { checkGTIN, convertToHRF, getGeoLocation, isNumeric } from \"./util\"\nimport * as applicationIdentifiers from \"./ai.json\"\nimport Chip from \"@mui/material/Chip\"\nimport { styled } from \"@mui/system\"\nimport ContiSpecificButton from \"components/ContiSpecificButton\"\nimport { isCloudEnv } from \"utils/env\"\nimport { default as Conti_vehicle_use } from \"../../assets/images/CONTI_Loyalty_Program_Werbetrailer_sec22.jpg\"\n\n// use this namespace also for subcomponents and for smaller subpages\nexport const namespace = __filename\n\nconst BlurredBackground = styled(\"div\")({\n position: \"relative\",\n width: \"100%\",\n // height: \"100%\",\n height: \"200px\",\n overflow: \"hidden\",\n background: `url(${Conti_vehicle_use}) center/cover`,\n \"&:before\": {\n content: \"''\",\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n filter: \"blur(5px)\",\n backgroundColor: \"rgba(0, 0, 0, 0.6)\", // Adjust the alpha value (last parameter) for darkness\n // background: `inherit`,\n },\n})\n\nconst OverlayContent = styled(\"div\")({\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n textAlign: \"center\",\n})\n\nconst AuthenticityCheck = () => {\n const { t } = useScopedTranslation(\n namespace,\n (locale) => import(`./locales/${locale}.json`),\n en\n )\n const theme = useTheme()\n const path = window.location.pathname.split(\"#\")[0]\n const search: SearchParameters =\n window.location.search &&\n window.location.search\n .slice(1)\n .split(\"&\")\n .map((p) => p.split(\"=\"))\n .reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {})\n\n const lang = navigator.language.slice(0, 2)\n // sessionStorage.setItem(\"productCode\", \"(01)14006633314036(21)94YZPG084C6S\")\n const [productCode, setProductCode]: any = useState()\n // \"(01)14006633314036(21)94YZPG084C6S\"\n // useState(sessionStorage.getItem(\"productCode\"))\n const [latitude, setLatitude] = useState(null)\n const [longitude, setLongitude] = useState(null)\n const [geoLocationStatus, setGeoLocationStatus] = useState(\"INIT\")\n const [endpoint, setEndpoint] = useState(\"Generic 1D+ MRP\")\n const loading = useRef(false)\n\n const authenticityCheckStore = useAuthenticityCheckStore()\n const { loadingAuthenticityCheckList, authenticityCheckList } =\n authenticityCheckStore\n console.log(\"windowLocationSearch\", window.location.search)\n\n const getQuerySearchReferrer = (ref) => {\n let queryString = ref.split(\"?\")[1]\n if (queryString) {\n return queryString\n } else {\n return console.log(\"no query search params on referrer\")\n }\n }\n getQuerySearchReferrer(window.document.referrer)\n\n const searchReferrer =\n getQuerySearchReferrer(window.document.referrer) &&\n getQuerySearchReferrer(window.document.referrer)\n .split(\"&\")\n .map((p) => p.split(\"=\"))\n .reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {})\n\n const extractCode = (uid) => {\n if (uid.includes(\"%5dd2\")) {\n let stringBuilder = \"\"\n const codeArray = convertToHRF(uid, applicationIdentifiers)\n codeArray.forEach((ai) => {\n stringBuilder = stringBuilder + `(${ai.name})${ai.value}`\n })\n uid = stringBuilder\n } else if (uid.includes(\"%28\") && uid.includes(\"%29\")) {\n uid = uid.replaceAll(\"%28\", \"(\").replaceAll(\"%29\", \")\")\n }\n if (checkGTIN(uid)) return uid\n else return null\n }\n\n useEffect(() => {\n setProductCode(sessionStorage.getItem(\"productCode\"))\n return () => {\n sessionStorage.removeItem(\"productCode\")\n }\n }, [])\n\n useEffect(() => {\n const code = sessionStorage.getItem(\"code\")\n const gtin = sessionStorage.getItem(\"gtin\")\n const productCode = sessionStorage.getItem(\"productCode\")\n if (searchReferrer && isCloudEnv()) {\n if (\n productCode == null &&\n searchReferrer &&\n searchReferrer[\"gtin\"] &&\n searchReferrer[\"code\"]\n ) {\n setProductCode(\n `(01)${searchReferrer[\"gtin\"]}(21)${searchReferrer[\"code\"]}`\n )\n sessionStorage.setItem(\n \"productCode\",\n `(01)${searchReferrer[\"gtin\"]}(21)${searchReferrer[\"code\"]}`\n )\n } else {\n setProductCode(productCode)\n }\n // @ts-ignore\n } else if (search !== \"\" || path !== \"/\" || (code && gtin) || productCode) {\n if (\n productCode == null &&\n !code &&\n search &&\n search[\"gtin\"] &&\n search[\"code\"]\n ) {\n setProductCode(`(01)${search[\"gtin\"]}(21)${search[\"code\"]}`)\n sessionStorage.setItem(\n \"productCode\",\n `(01)${search[\"gtin\"]}(21)${search[\"code\"]}`\n )\n }\n if (code && gtin) {\n setProductCode(`(01)${gtin}(21)${code}`)\n sessionStorage.setItem(\"productCode\", `(01)${gtin}(21)${code}`)\n\n sessionStorage.removeItem(\"code\")\n sessionStorage.removeItem(\"gtin\")\n }\n if (productCode) {\n setProductCode(productCode)\n }\n const codeArray = path.split(\"/\")\n let stringBuilderProduct = \"\"\n\n if (codeArray?.length > 0) {\n if (!isUndefined(search.uid)) {\n const searchParameterGTIN = extractCode(search.uid)\n\n // check for old URL format\n if (searchParameterGTIN) {\n //setProductCode(searchParameterGTIN)\n sessionStorage.setItem(\"productCode\", searchParameterGTIN)\n\n const geoLocation = search.geo?.split(\"%2C\")\n if (geoLocation) {\n setLatitude(\n isNumeric(geoLocation[0]) ? parseFloat(geoLocation[0]) : null\n )\n setLongitude(\n isNumeric(geoLocation[1]) ? parseFloat(geoLocation[1]) : null\n )\n setGeoLocationStatus(\"TRACKED\")\n }\n\n !isUndefined(search.edp)\n ? setEndpoint(search.edp)\n : setEndpoint(\"Generic 1D+ MRP\")\n } else {\n //setProductCode(\"Incorrect code format\")\n }\n } else {\n // check for digital link format\n for (let i = 0; i < codeArray.length; i++) {\n if (codeArray[i] === \"\") continue\n\n stringBuilderProduct = stringBuilderProduct.concat(\n i % 2 === 0 ? codeArray[i] : `(${codeArray[i]})`\n )\n }\n\n for (const ai in search) {\n stringBuilderProduct = stringBuilderProduct.concat(\n `(${ai})${search[ai]}`\n )\n }\n\n if (stringBuilderProduct !== \"\") {\n //setProductCode(stringBuilderProduct)\n sessionStorage.setItem(\"productCode\", stringBuilderProduct)\n }\n\n if (!checkGTIN(stringBuilderProduct)) {\n setGeoLocationStatus(\"TRACKED\")\n }\n }\n }\n }\n return () => {\n sessionStorage.removeItem(\"productCode\")\n }\n }, [path, search])\n\n useEffect(() => {\n if (\n !(geoLocationStatus === \"TRACKED\") &&\n productCode !== null &&\n !search.geo\n ) {\n getGeoLocation()\n .then((geoLocation) => {\n const [latitude, longitude] = geoLocation\n setLatitude(latitude)\n setLongitude(longitude)\n setGeoLocationStatus(\"TRACKED\")\n })\n .catch((err) => {\n console.log(\"Location failed: \" + err)\n setGeoLocationStatus(\"DENIED\")\n })\n }\n }, [productCode, geoLocationStatus, search.geo])\n\n useEffect(() => {\n if (latitude !== null && longitude !== null) {\n setGeoLocationStatus(\"TRACKED\")\n }\n }, [latitude, longitude, geoLocationStatus])\n\n useEffect(() => {\n if (\n !loading.current &&\n (geoLocationStatus === \"TRACKED\" || geoLocationStatus === \"DENIED\")\n ) {\n loading.current = true\n authenticityCheckStore\n .fetchAuthenticityCheckList(\n productCode,\n lang,\n latitude,\n longitude,\n endpoint\n )\n .then(() => {\n window.history.replaceState(null, \"\", \"/#/authenticity\")\n })\n .catch((e) => {\n loading.current = false\n console.log(e)\n })\n } else {\n console.log(\"Authenticity Check List\", authenticityCheckList)\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [productCode, lang, latitude, longitude, geoLocationStatus])\n\n const authenticityResult = React.useMemo(() => {\n return authenticityCheckList\n }, [authenticityCheckList])\n const vasButtons = useMemo(() => {\n let buttons = []\n\n sessionStorage.setItem(\"organisation\", authenticityCheckList?.organization)\n\n if (authenticityCheckList.vas?.length > 0) {\n const sortedVasList = authenticityCheckList.vas.slice().sort((a, b) => {\n // if position is undefined the VAS should be at the end of the list\n const checkIfSet = (value) =>\n typeof value !== \"undefined\" ? value : 9999\n return (\n checkIfSet(a.screens[0].content.position) -\n checkIfSet(b.screens[0].content.position)\n )\n })\n Object.values(sortedVasList).forEach((item: any) => {\n if (buttons.length < 1) {\n buttons.push(\n \n )\n }\n })\n } else {\n if (buttons.length < 1) {\n buttons.push(\n \n )\n }\n }\n return buttons\n }, [authenticityCheckList])\n\n const imageVas = useMemo(() => {\n let image = []\n\n sessionStorage.setItem(\"organisation\", authenticityCheckList?.organization)\n\n if (authenticityCheckList.vas?.length > 0) {\n const sortedVasList = authenticityCheckList.vas.slice().sort((a, b) => {\n // if position is undefined the VAS should be at the end of the list\n const checkIfSet = (value) =>\n typeof value !== \"undefined\" ? value : 9999\n return (\n checkIfSet(a.screens[0].imageEan) - checkIfSet(b.screens[0].imageEan)\n )\n })\n Object.values(sortedVasList).forEach((item: any) => {\n image.push()\n })\n }\n return image[0]\n }, [authenticityCheckList])\n\n const isMobile = window.innerWidth < theme.tokens.breakpoints.breakpointTablet\n\n return (\n \n \n {loadingAuthenticityCheckList ||\n (geoLocationStatus === \"INIT\" && productCode) ? (\n \n \n \n ) : (\n <>\n \n \n \n \n \n theme.tokens.breakpoints.breakpointTablet\n ? 700\n : 600\n }\n color={theme.tokens.color.conti_typo}\n marginBottom=\"10px\"\n marginTop=\"10px\"\n sx={{\n fontSize:\n window.innerWidth <\n theme.tokens.breakpoints.breakpointTablet\n ? \"17px\"\n : \"26px\",\n lineHeight: \"35px\",\n fontFamily: \"inter\",\n textShadow:\n \"2px 2px 20px rgba(0, 0, 0, 2), -2px -2px 20px rgba(0, 0, 0, 2)\",\n }}\n >\n {t(\"screenText2\")}\n \n {vasButtons}\n \n \n \n \n {t(\"resultText\")}\n \n \n \n \n \n \n \n {authenticityResult?.responseText}\n \n \n \n \n \n \n \n \n {t(\"mappCodeTitle\")}\n \n\n \n \n {authenticityResult?.code.replace(/\\(21\\)/g, \"\\n(21)\")}\n \n }\n />\n \n \n {authenticityResult?.codeFlag === \"RED\" && (\n \n \n {t(\"entryCorrect\")}\n \n \n {t(\"contactText\")}\n \n \n )}\n \n \n \n \n )}\n \n \n )\n}\n\nexport default observer(AuthenticityCheck)\n","import { FlagTypes } from \"./types\"\nimport Image from \"components/Image\"\n\nconst CheckResultFlags: React.FC = ({ flag }) => {\n const imageStrings = {\n // GREEN:\"data:image/svg;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAzCAYAAADYfStTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAR8SURBVHgB1ZpPTBxVHMe/b3aRiTSmB40HD06Vmqi1xcREa2IKiSZLe3DRg6Ax4El7KaCHnlRID7YXoVCjnkSjEY3ajQdLokmpF6MxdmuIXkg6PXgwJpb+o0u7zOvv93Znmc4O7Pzb2dnPBXbnze58+P3mN++9HwIxkf8kv710Ve8RQj4PqRlSyp7qIcM5TkCsQFgmoJnSkuegYVHfVioWXiusIAYEIqAkruh5+pRhIUWPhNyOsAgsQuLThUPzc4hAKKFqNEZJYiyShDcmXdUcsiR3cN5EQAIL7Z99eZTSaaIJIm5MSs/jpw59OR3kJN9CuQ8HDVGWJyWlFpLFRAf6/EZL8zMod2JoWNwUZ1sgwxj83f0zQ2N+BmcaDcjNDr5LNyuHXUfr4O/Ode/fheVTS2e2GrilUFVmAumht5HUpkIplLHZUspTqFrJjiK99HYfeMxc/mHpnPtAXZVT1YwLQPPLciR4xiE75OPu6ldf5W7idNplGL5Gfoy4379NiFMNrrlXmuHHiLuc11KOU42jgzYSYjj1Otev7yiMVya3GxEqYxhtJsNw6pU0vRYlzXFkBG2KEGI0P5VX970Sys0MjiBF0dn7wBOBxqsoZWgZAztCQqVbKnjz2TfwzoG38MqTLwY6z3YQ+akRsitdRApgmece3ld7ffi7I/jzn798nWsXB62ULbViBl2HW+aLX7/1LcOotMvqPRos9KLFeMl8/ts3CIqwZF4TmtyDFhKXDCMhjCzVBYN/TZquzi68/syrsckoBPZkycVAwrDMsRfexoN33197L7JMFS3MRPTeu+7BiaGjdEEGgtJMGcLwtafghGWODVQuqHJhhu9zmyyjCCzkpKvzTt9SScgwLGQGOeHfy//h8Mkj6ifgTyopGX64hopQEKmkZBQCpkab60WEwI8U328fDL6XjAxBm/8XMjtzu/eS2VMIwbW1Vfxy/nc1O95Gkbgj24F9Dz2N/1cv4dqNVVU8WMrm458/w9d/fI8m8pWg7apeehadRgTsyue8eJblqNm8/9NH+PHvM2gqAn2aXtaLqmcTAXf6MYnLEHq5VNQK43MrMuR95MRLiklKhvtLvK9QqXLUaEIMuKUSk2GqDmrXhxd5a5m183Htx/G9tPu+R5KToWcpdf528C8qQirtpDyOmOAIJShzW4bVHqy6pU9HLQ4twqRF6pz9oibEUQKsSbQZ3LZcGN/Y367brO+fHTrraMmnndq9Y1M3l5NlOdAOqaeucR197vfrhDh8VO3GkX4mnalm49nwou5YsTu3i/4Ird8R8kSSzOi8Z0Nu05bk8sLSYiqlKjITmx3esmmcOqkGMkzDtj5L7ex/9JKAxkuMlrT2q0XqIMlMNx7rk9wUNcQyyTfEeAEqy2LAqwB4jkdA+mdeGqMdyqa3LqtRmWza//o4UdHSqEEm4u/6qe42zSt1qzRttxmDnR8R1SxjMRm+cCgJXpPRJFNfLxXCiGx8VkxwS5DbGdzNEJrgBoDB28weSxJTfbEQRVjWBamJAq80o0g4uQX0wxjOz3n7hgAAAABJRU5ErkJggg==\",\n GREEN:\n \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTIiIGhlaWdodD0iNTEiIHZpZXdCb3g9IjAgMCA1MiA1MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjUyIiBoZWlnaHQ9IjUxIiByeD0iMjUuNSIgZmlsbD0iIzQ4OTI1OCIvPgo8cGF0aCBkPSJNMTMuNSAyNUwyMi4xNzM1IDMzLjVMMzguNSAxNy41IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjMiLz4KPC9zdmc+Cg==\",\n YELLOW:'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTIiIGhlaWdodD0iNTEiIHZpZXdCb3g9IjAgMCA1MiA1MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjUyIiBoZWlnaHQ9IjUxIiByeD0iMjUuNSIgZmlsbD0iI0Y3OTQwMCIvPgo8cGF0aCBkPSJNMjcuNTY4MiAxMy43MjczTDI3LjI3MjcgMzAuMzA2OEgyNC4xMjVMMjMuODI5NSAxMy43MjczSDI3LjU2ODJaTTI1LjcwNDUgMzcuMjE1OUMyNS4wNzU4IDM3LjIxNTkgMjQuNTM3OSAzNi45OTYyIDI0LjA5MDkgMzYuNTU2OEMyMy42NDM5IDM2LjEwOTggMjMuNDI0MiAzNS41NzIgMjMuNDMxOCAzNC45NDMyQzIzLjQyNDIgMzQuMzIyIDIzLjY0MzkgMzMuNzkxNyAyNC4wOTA5IDMzLjM1MjNDMjQuNTM3OSAzMi45MDUzIDI1LjA3NTggMzIuNjgxOCAyNS43MDQ1IDMyLjY4MThDMjYuMzE4MiAzMi42ODE4IDI2Ljg0ODUgMzIuOTA1MyAyNy4yOTU1IDMzLjM1MjNDMjcuNzQyNCAzMy43OTE3IDI3Ljk2OTcgMzQuMzIyIDI3Ljk3NzMgMzQuOTQzMkMyNy45Njk3IDM1LjM1OTggMjcuODU5OCAzNS43NDI0IDI3LjY0NzcgMzYuMDkwOUMyNy40NDMyIDM2LjQzMTggMjcuMTcwNSAzNi43MDQ1IDI2LjgyOTUgMzYuOTA5MUMyNi40ODg2IDM3LjExMzYgMjYuMTEzNiAzNy4yMTU5IDI1LjcwNDUgMzcuMjE1OVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=',\n // \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARMSURBVHhe7d0/r1RVFMbhhZEoiRRIhw2ddLaGxAKigV4/BR+IT4E9RAOFCbG1w84GKv4kXpKrmatwibshwbeZWftmzzxPQji7Og2/zDnJWodzb04V8EEfjb+BDxAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAINjdRuHjO1VHT8YBztDFa1XX747DdnYXyIObVa8ejQOcoUs3qm49HIfteMSCQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQC3+btcvl21YUr49Ds+FnVi/vjwC6/zSuQLl/fq7r6/Tg0++PHql9/GAd8vHoFmz/HxQQz73VgBNJl83pcTDDzXgdGIF02R+Nigpn3OjAC6SKQvSCQLgLZCwLp4iV9Lwiki0D2gkC6CGQvCKTL5uW4mGDmvQ6MQLpsno+LCWbe68AIpMvJ03Exwcx7HRiBdPn39M8/x/9dd3p3j3f3ooVAOs0YATFm0kognQSyPIF0Opnwj3fGPQ6YQDr5BVmeQDrNmJEyh9VKIJ0EsjyBdJoxAmLMpJVAOnkHWZ5AOnnEWp5AOglkeQLpJJDlCaSTl/TlCaSTQJYnkE4CWZ5AOs3Y9LNN2EognWZs+tkmbCWQTjM2/WwTthJIp+6tQtuE7QTSrXMUxJhJO4F0E8jSBNKtc+PPNmE7gXTzC7I0gXTrnJUyh9VOIN0EsjSBdOscBTFm0k4g3byDLE0g3TxiLU0g3QSyNIF0E8jSBNLNS/rSBNJNIEsTSDeBLE0g3To3/mwTthNIt86NP9uE7QTSrXPjzzZhO4F069oqtE04hUBm6BgJMWYyhUBmEMiyBDJDx+afbcIpBDKDX5BlCWSGjpkpc1hTCGQGgSxLIDN0jIQYM5lCIDN4B1mWQGbwiLUsgcwgkGUJZAaBLEsgM3hJX9a5N6fG9XYe3Kx69WgceM/Hn1Z98uU47Mjfv1ed/DUOvOfSjapbD8dhOwJh/+wwEI9YEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAYBary+XbVReujEOz42dVL+6PA4YVV/DNT1VffDsOzZ7+XPXLd+OAYUWYRCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCO+ldPvuq6vzn49Bs87Lq9W/jgI82QOKjDTCHQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgWB3/4nn4ztVR0/GAc7QxWtV1++Ow3Z2FwjsIY9YEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAg8L+q3gKwsGZ724BDPwAAAABJRU5ErkJggg==\",\n RED: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTIiIGhlaWdodD0iNTEiIHZpZXdCb3g9IjAgMCA1MiA1MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CjxyZWN0IHdpZHRoPSI1MiIgaGVpZ2h0PSI1MSIgcng9IjI1LjUiIGZpbGw9IiNDRjZBNkEiLz4KPHJlY3QgeD0iMTMuNSIgeT0iMTMuNSIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI0IiBmaWxsPSJ1cmwoI3BhdHRlcm4wKSIvPgo8ZGVmcz4KPHBhdHRlcm4gaWQ9InBhdHRlcm4wIiBwYXR0ZXJuQ29udGVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgd2lkdGg9IjEiIGhlaWdodD0iMSI+Cjx1c2UgeGxpbms6aHJlZj0iI2ltYWdlMF8xNThfNDUxMiIgdHJhbnNmb3JtPSJtYXRyaXgoMC4wMSAwIDAgMC4wMTA0MTY3IDAuMDIgMCkiLz4KPC9wYXR0ZXJuPgo8aW1hZ2UgaWQ9ImltYWdlMF8xNThfNDUxMiIgd2lkdGg9Ijk2IiBoZWlnaHQ9Ijk2IiB4bGluazpocmVmPSJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUdBQUFBQmdDQVlBQUFEaW1IYzRBQUFBQ1hCSVdYTUFBQXNUQUFBTEV3RUFtcHdZQUFBQ1VFbEVRVlI0bk8yY1FVN2NRQkJGTzlzZ2RnRUd1RWcyT2V2Y2hCV0lSVllRSU1TblFNb0JYb1N3RlRFQzNEWWVWMWZWZitzWnFmczl0NjJadGwyS0VFSUlJWVFRUWdnaGhCQ1ZBQWZBRmpqTElnMDQ2K2Q4WUQyUXI4QUZMM1RBZVFrT3NBRWUramxmQW9jdHlDZERCRjdMeHl6Q08vSkRSK0J0K2V0SEdKRWZNZ0lmeTE4M1FuL3hxU0ZFQk9DOG4wc04yelVHZEFMY1o0aEEzWkcvL2x3elJLQlYrUmtpMExyOHlCSHdJajlpQkx6Smp4UUJyL0lqUk1DN2ZNOFJpQ0xmWXdTaXlmY1VnYWp5UFVRZ3V2eVdJNUJGZm9zUnlDYS9wUWhrbGI4VHdVUUEyZVZiaWtEeTdZUWcrWFppa0h3N1FVaStuU2drZnhvc0tFenlaOElDRVNUL2svQ0pDSksvRU15SUlQbTJOMEoxRXo4Yjh4ZnUwakJ0SlVoKzR4RTZIZmwyRVRySnQxc0puZVRiUmVna2YwRlFBRHZRS2NqTkx0cGI2RlMwMGo3eVJ5aUNvZndCUlpqNEVQUWpkZWl2Q092YlY5QUdqSjM4OHYrN3V1M0VTdjZBSWpSdzF4eGFDWHVWLzBlYjhzdkx2NXNndi9wMU9Gb0o0NEtPOXlWL1FCRU01UThvZ3FIOEFVV1lKLzl4eVZlZ3BZOWdLYjlrajlETC8yVXBQMjJFbHVTbmk5Q2kvRFFSWnNnL05SampwcFduTjlQSmIrbnB6VVVCanJ6SUR4ZWhsMzliT1pIZkxjZ1BFOEd6ZlBjUklzaDNHeUdTZkhjUklzcDNFMkdHL0UxeEJxMUd5Q0MvMlFqQUYrQzZja0RQdndlT1NxNW4xbjQrTzlyM2dINEFmMGNHOHVENXlKKzVFcDZBNzJVTlJpS0VrbDhaWVQzNUl4RkN5aCtKc0w3OGR5TGNBTjlLY0hnZHdVNytUb1NyRFBKM0lseWJ5eC9ZKzVXL1FUTE9XUWdoaEJCQ0NDR0VFTVU3L3dCbGorQ3ZzTkozSEFBQUFBQkpSVTVFcmtKZ2dnPT0iLz4KPC9kZWZzPgo8L3N2Zz4K'\n // \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAhWSURBVHhe7d1rcFRnGcDxZy/Z7GazATb3LElKRSmE2DKVIUy1CFiZXtBeuH5AKxpLDVRLi0VBsdoKxUGgtoNhjM5Q29qWzpTGGWnGKW2tdZjRD5oJo7a2jtOLIxRtkUu4xd3t0xlm3TzZW88me/6/L3mfl3za8M+ek3N21zMUJwDS8upXAGkQCGAgEMBAIICBQAADgQAGAgEMBAIYCAQwEAhgIBDAQCCAgUAAA4EABgIBDAQCGAgEMBTsFYXv3r5ETr8yoBNQPIHJbVK1/XGd8lOwQI4sbJPj/Yd0Aoon3D5NanoL88uaQyzAQCCAgUAAA4EABgIBDAQCGAgEMBAIYCAQwEAggIFAAAOBAAYCAQwEAhgIBDAQCGAgEMBAIICBQAADgQAGAgEMBAIYCAQwEAhgIBDAQCCAgUAAA4EABgIBDAQyWnj0K0YVAimi0IcnSWxbj7QcfF1a/3ZOWl8elJZfD0j9urvFP86v34ViIpAiqV21Vur2vyz+m1aKpz4W/0nEfxRlAfFMnibBrm9L7Pm3JNIxW78bxUIgRVDX9XWpWL9NxOfTnTTG10j0oeek8mOX6waKgUAcVnFpu4Tu2KzTCOLPKNUPPCXekM5wHIE4bMJt97x3OJWphokSXbpKBziNQBzkDYj4P/5pnTIXuupGXcFpBOKgQEurSHlQp8x5Jn1EV3AagTjIFwrrKjueyHhdwWkEAhgIBDAQiAM8Pkle9Bu3rEt3shQMSU3nVyU05UO6Aad4huJ0nZcjC9vkeP8hnZC4tyoyq0OqFneKf8Eikcoq/Yf8DL3xdxnc95C880S3nHrtDd3FhcLt06Smd0Cn/PAMUmCJZ4vojUukZf+fJPqL3yVvJSlUHAme2EUS/Mq3pP7A6xLr2ceV9g8YgRRQ5MorpfmZAYn88DHxTGnX3Q+Of/5npHrv75OhlLc26i4KiUAKIHHnbezBRyW65/nkzYZOS4TS0Pdq8h4vfqKFxcOZp8isWRLb/6r4r12mO0VSHpTQuvuk+ZFnpax+nG4iXwSSh+jSFRJ9+Dcijc26U3zejrnS+PSAhKdP1R3kg0ByVLf6Lonctyd+fFOmO6NH4vUlNY8dTJ4TIT8EkoP6NesldOcWnUapcESiu/cTSZ4IJEu1X+ySYKav5yi2YEiiu36ZfA0KckMgWaiaO18qNtyv0xgRfyap2f2r+Il7RDeQDQLJUPlFTTLh/ifjj9jYe8gS5yQN3X3Ji5jIDoFkIPEfq377XpHI2P3zqfeyDqm783s6IVMEkoHaNRvEM2Psv8NI8JZvcmtKlghkBIlbOEK3btRpjIsfHkbv6eFQKwsEMoLaTd05vUx2tPJccqlUf+5WnTASAjEkDkd88xbqVDrCXZt4K6EMEYhh3Jrv6qrE1NRL9Yqv6QALgQwj8b65/jnX6FR6Kr6wlp9+BniIhjF++WpdlajGZqmaM18HDIdA0kj8lSdw/QqdSldkUaeuMBwCSaNyZodItFan0uWfc7V4+JQFE4GkUTHvs7oqcZVVEpn9CR2QDoGkEeiYp6vSF5p9la6QDoGkSJx/eKd8VKfSVzZ9pq6QDoGkCE29pKSunI/EN517sywEkiLQ4rJ3Uo/WirdC1/g/BJKirKlVV+5RPvFiXSEVgaTw1brvDdjK6pp0hVQEksKT42d4jGXecOHeGrXUEEgKb7hSV+7hKSvXFVIRSCqf+y4tewv45tqlhkAAA4EABgIBDAQCGAgEMBAIYCAQwEAggIFAAAOBAAYCAQwEAhgIBDAQCGAgEMBAIICBQAADgQAGAgEMBAIYCAQwEAhgIBDAQCCAgUAAA4FcIPExAL6pM3Ryj8CM2bpCKgJRiThiPzsgnintuuMegaW3SMOGLTrhQgQS5w28F4d31id1x33KO++Sutu+oRPe5/pAPGUiTd29ro7jfaG135f6Net1QoKrA0nEEdvdK7651+kOgndsltovrdYJrg0k8Wm2TTseJY40Kjb+SGpuXqWTu7kykGQcOx8R/7XLdAepwt/ZJdXLb9bJvdwXiCcex9Ye8V+3XDcwnMp7e2TCInc/Tu4KJB5H45Yfi/+mlboBk9crVVt/LhNuWKwb7uOqQBrv3pn8mz+ykIjkBw/L+AXX6Ia7uCqQwA2f1xWy4i+T8BJ3/mJx5Uk6kCkCAQwEAhg8Q3G6zsuRhW1yvP+QTqNTS1+/CJ8JnpOzv+2TN9d16jS6hdunSU3vgE75cVUgcIdCBsIhFmAgEMBAIICBcxCHxHbuEU9Tq065GXzmCTn8kwd0wnA4SR+Dmp98UbyXX6FTbk7u2Cj/2nGvThgOJ+lj0Lk//1FXuTv9135dwSkE4pDjB/bpKkeDp+TYc0/rAKcQiEPeebZPhl77i07ZO7P3p3LuhA5wDIE45bzIvzd9WSSXU74j/5TD29bqACcRiIOOvfCCnNi6TqcMnTopR7uulzNHB3UDTiIQhx3etU1ObI4/G5yPP6WMYOg/b8vRlZ+SYwcP6g6cRiBFcLh7u7y9eKac/8OLupPi7Bk5+9QeeWvBJDn20ku6iWLgOkiRBS+eKBWXXSH+hmYZGjwpZ9/8h/z3YB+HVHngQiFg4EIh4BACAQwEAhgIBDAQCGAgEMBAIICBQAADgQAGAgEMBAIYCAQwEAhgIBDAQCCAgUAAA4EABgIBDAQCGAgEMBAIYCAQwEAggIFAAAOBAAYCAQwEAhgIBDAQCGAgEMBAIICBQAADgQAGAgEMBfsItndvXyKnXynMx14B+QhMbpOq7Y/rlJ+CBQKUIg6xAAOBAAYCAQwEAhgIBDAQCGAgEMBAIICBQAADgQAGAgEMBAIYCAQwEAhgIBDAQCCAgUCAYYn8DwllbjSJVozNAAAAAElFTkSuQmCC\",\n }\n\n return \n}\n\nexport default CheckResultFlags\n","import Tabs from \"../components/Tabs\"\nimport Info from \"./subpages/Info\"\nimport {\n mdiCar,\n mdiEarth,\n mdiFileImage,\n mdiFormatListBulletedSquare,\n mdiInformation,\n mdiOfficeBuilding,\n} from \"@mdi/js\"\nimport {\n Box,\n CircularProgress,\n Container,\n Typography,\n useTheme,\n} from \"@mui/material\"\nimport Vehicles from \"./subpages/Vehicles\"\nimport Manufacturer from \"./subpages/Manufacturer\"\nimport Documents from \"./subpages/Documents\"\nimport OE from \"./subpages/OE\"\nimport React, { useEffect, useState } from \"react\"\nimport CountrySelection from \"../components/CountrySelection\"\nimport ResponsiveBackground from \"../../../components/ResponsiveBackground\"\nimport { useTecDocStore } from \"../../../api/services/TecDoc\"\nimport i18next from \"i18next\"\nimport useScopedTranslation from \"../../../hooks/useScopedTranslation\"\nimport en from \"./locales/en.json\"\nimport ContiSpecificButton from \"components/ContiSpecificButton\"\nimport { styled } from \"@mui/system\"\nimport { default as Conti_original } from \"assets/images/Continental_Original.png\"\nimport tokens from \"themes/default/tokens\"\nimport Dialog from \"components/Dialog\"\nimport { useHistory } from \"react-router\"\nimport { uniq } from \"lodash\"\n\nexport const namespace = __filename\n\nconst BlurredBackground = styled(\"div\")({\n marginTop: \"20px\",\n position: \"relative\",\n width: \"100%\",\n // height: \"100%\",\n height: \"200px\",\n overflow: \"hidden\",\n background: `url(${Conti_original}) center/cover`,\n \"&:before\": {\n content: \"''\",\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n filter: \"blur(5px)\",\n backgroundColor: \"rgba(0, 0, 0, 0.6)\", // Adjust the alpha value (last parameter) for darkness\n // background: `inherit`,\n },\n})\nconst OverlayContent = styled(\"div\")({\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n textAlign: \"center\",\n})\nconst TecDoc = () => {\n const theme = useTheme()\n const history = useHistory()\n const lang = i18next.language\n const countryCatalogue = localStorage.getItem(\"countryCatalogueCode\") || \"de\"\n const [isHomeSelected, setIsHomeSelected] = useState(false)\n const { t } = useScopedTranslation(\n namespace,\n (locale) => import(`./locales/${locale}.json`),\n en\n )\n\n const tecDocStore = useTecDocStore()\n const {\n articleList,\n articleAttributes,\n } = tecDocStore\n\n const [loading, setLoading] = useState(false)\n const [isDialogOpen, setIsDialogOpen] = useState(false)\n\n useEffect(() => {\n //here should fix the issue on Conti env\n window.scrollTo({\n top: 0,\n left: 0,\n behavior: \"smooth\",\n })\n }, [])\n\n const handleLoading = (value: boolean) => {\n setLoading(value)\n }\n useEffect(() => {\n if (isHomeSelected) setIsHomeSelected(false)\n }, [isHomeSelected])\n\n function backToHome() {\n setIsHomeSelected(true)\n }\n\n useEffect(() => {\n if (!articleList) {\n tecDocStore\n // .fetchArticle(countryCatalogue, lang, 6, \"4006633056854\") // 4019064364931 / 4006633056854\n .fetchArticle(countryCatalogue, lang, 6, localStorage.getItem(\"data\"))\n // 4019064364931\n .catch((err) => {\n console.log(\"Error fetching articles\", err)\n setIsDialogOpen(true)\n })\n }\n return () => {\n localStorage.removeItem(\"data\")\n console.log(\"data after cleanUp\", localStorage.getItem(\"data\"))\n }\n }, [tecDocStore, countryCatalogue, lang, articleList])\n\n useEffect(() => {\n if (articleList && !articleAttributes) {\n tecDocStore\n .fetchArticleDetails(countryCatalogue, lang, articleList?.articleId)\n .catch((err) => {\n console.log(\"Error fetching articles\", err)\n setIsDialogOpen(true)\n })\n }\n }, [tecDocStore, articleList, countryCatalogue, lang, articleAttributes])\n\n const generalArticleNumber = React.useMemo(() => {\n const requiredKeys = [\"articleNo\"]\n let tempArticleList = []\n let tempDirectArticleList = []\n\n if (articleList) {\n tempArticleList = Object.entries(articleList).map((item) => {\n return {\n key: item[0],\n subItems: [\n {\n label: requiredKeys.includes(item[0]) ? t(item[0]) : item[0],\n content: String(item[1]),\n },\n ],\n }\n })\n }\n\n const tempGeneralArticleList = tempArticleList\n .concat(tempDirectArticleList)\n .filter((item) => requiredKeys.includes(item.key))\n\n return uniq(tempGeneralArticleList)\n .map((item) => item.subItems)\n .map((item) => item[0].content)\n }, [articleList, t])\n\n return (\n \n {\n setIsDialogOpen(false)\n // localStorage.removeItem(\"data\")\n }}\n // closeStyle={{\n // color: theme.palette.text.primary,\n // label: t(\"test\"),\n // }}\n confirmStyle={{\n color: tokens.color.conti_yellow,\n label: t(\"confirm\"),\n }}\n onAccept={() => {\n setIsDialogOpen(false)\n history.goBack()\n }}\n title={t(\"dialogTitle\")}\n text={t(\"dialogText\", {ean: localStorage.getItem(\"data\")})}\n hideClose={true}\n />\n \n \n \n \n {generalArticleNumber[0]}\n \n \n ,\n hasPadding: false,\n },\n { element: , hasPadding: false },\n { element: , hasPadding: false },\n { element: , hasPadding: false },\n { element: , hasPadding: false },\n {\n element: ,\n hasPadding: false,\n },\n ]}\n variant={\"horizontal\"}\n loading={loading}\n />\n {loading && (\n \n \n \n )}\n \n \n \n \n theme.tokens.breakpoints.breakpointTablet\n ? 700\n : 600\n }\n color={theme.tokens.color.conti_typo}\n marginBottom=\"20px\"\n sx={{\n textShadow:\n \"2px 2px 20px rgba(0, 0, 0, 1), -2px -2px 20px rgba(0, 0, 0, 1)\",\n }}\n >\n {t(\"textOriginal\")}\n \n\n \n \n \n \n \n \n \n )\n}\n\nexport default TecDoc\n","import * as React from \"react\"\nimport { observer } from \"mobx-react\"\n\nimport { Box, useTheme } from \"@mui/material\"\n\nimport useScopedTranslation from \"hooks/useScopedTranslation\"\nimport en from \"./locales/en.json\"\nimport List, { ListTextItemTypes } from \"../../../components/List\"\nimport { useTecDocStore } from \"../../../../../api/services/TecDoc\"\nimport { useMemo } from \"react\"\nimport { uniq } from \"../../../util\"\nimport { createItemBorder } from \"../../../util\"\nimport ListHeading from \"../../../components/List/components/ListHeading\"\nexport const namespace = __filename\n\nconst Info: React.FC = () => {\n const theme = useTheme()\n const { t } = useScopedTranslation(\n namespace,\n (locale) => {return import(`./locales/${locale}.json`)},\n en\n )\n const tecDocStore = useTecDocStore()\n const {\n articleList,\n articleAttributes,\n directArticle,\n eanNumber,\n replacedNumber,\n } = tecDocStore\n\n const generalArticleItems = useMemo(() => {\n const requiredKeys = [\n \"articleName\",\n \"articleNo\",\n \"articleStateName\",\n \"eanNumber\",\n \"replacedNumber\",\n ]\n let tempArticleList: ListTextItemTypes[] = []\n let tempDirectArticleList: ListTextItemTypes[] = []\n let tempEanNumber: ListTextItemTypes[] = []\n let tempReplacedNumberList: ListTextItemTypes[] = []\n\n if (articleList) {\n tempArticleList = Object.entries(articleList).map((item) => {\n return {\n key: item[0],\n subItems: [\n {\n label: requiredKeys.includes(item[0]) ? t(item[0]) : item[0],\n content: String(item[1]),\n },\n ],\n }\n })\n }\n if (directArticle) {\n tempDirectArticleList = Object.entries(directArticle).map((item) => {\n return {\n key: item[0],\n subItems: [\n {\n label: requiredKeys.includes(item[0]) ? t(item[0]) : item[0],\n content: String(item[1]),\n },\n ],\n }\n })\n }\n if (eanNumber) {\n tempEanNumber = Object.entries(eanNumber).map((item) => {\n return {\n key: Object.keys(item[1])[0],\n subItems: [\n {\n label: t(Object.keys(item[1])[0]),\n content: String(item[1]?.eanNumber),\n },\n ],\n }\n })\n }\n\n if (replacedNumber) {\n tempReplacedNumberList = Object.entries(replacedNumber).map((item) => {\n return {\n key: Object.keys(item[1])[0],\n subItems: [\n {\n label: Object.keys(item[1])[0],\n content: String(item[1]?.replacedNumber),\n },\n ],\n }\n })\n }\n\n const tempGeneralArticleList = tempArticleList\n .concat(tempDirectArticleList, tempEanNumber, tempReplacedNumberList)\n .filter((item) => requiredKeys.includes(item.key))\n\n return uniq(tempGeneralArticleList)\n }, [articleList, directArticle, eanNumber, replacedNumber, t])\n\n const criteriaItems = useMemo(() => {\n let tempArticleAttributes: ListTextItemTypes[] = []\n if (articleAttributes) {\n tempArticleAttributes = Object.entries(articleAttributes).map((item) => {\n return {\n key: item[1]?.attrName,\n subItems: [{ label: item[1]?.attrName, content: item[1]?.attrValue }],\n }\n })\n }\n return tempArticleAttributes //.filter((item) => [\"articleName\", \"articleSearchNo\", \"articleNo\",].includes(item.label))\n }, [articleAttributes])\n\n return (\n \n \n \n \n \n \n \n )\n}\n\nexport default observer(Info)\n","import * as React from \"react\"\nimport { observer } from \"mobx-react\"\n\nimport { Box, useTheme } from \"@mui/material\"\n\nimport useScopedTranslation from \"hooks/useScopedTranslation\"\nimport en from \"./locales/en.json\"\nimport List, { ListTextItemTypes } from \"../../../components/List\"\nimport { useTecDocStore } from \"../../../../../api/services/TecDoc\"\nimport { useEffect, useMemo } from \"react\"\nimport { getDate, getDateSingle } from \"../../../util\"\nimport { createItemBorder, groupListByValue } from \"../../../util\"\nimport i18next from \"i18next\"\nimport ListHeading from \"../../../components/List/components/ListHeading\"\nexport const namespace = __filename\n\nconst Vehicles: React.FC<{ handleLoading: (value: boolean) => void }> = (\n props\n) => {\n const theme = useTheme()\n const lang = i18next.language\n const countryCatalogue = localStorage.getItem(\"countryCatalogueCode\") || \"de\"\n\n const { t } = useScopedTranslation(\n namespace,\n (locale) => import(`./locales/${locale}.json`),\n en\n )\n const tecDocStore = useTecDocStore()\n const {\n vehicleList,\n vehicleListImmediateAttributs,\n articleList,\n loadingVehicleList,\n loadingVehicleImmediateAttributs,\n } = tecDocStore\n\n useEffect(() => {\n props.handleLoading(loadingVehicleImmediateAttributs || loadingVehicleList)\n }, [loadingVehicleList, loadingVehicleImmediateAttributs, props])\n\n const vehicleLinkages = useMemo(() => {\n let tempArticleAttributes: ListTextItemTypes[] = []\n if (vehicleListImmediateAttributs) {\n tempArticleAttributes = Object.entries(vehicleListImmediateAttributs).map(\n (item) => {\n const linkedVehicles = item[1]?.linkedVehicles.array[0]\n const linkedArticleImmediateAttributs =\n item[1]?.linkedArticleImmediateAttributs.array\n\n const vehicleLabel = [\n {\n label: String(\n `${linkedVehicles?.modelDesc} ${linkedVehicles?.carDesc}`\n ),\n hasBoldLabel: true,\n autoWidth: true,\n },\n ]\n\n const immadiateAttributsLabel = linkedArticleImmediateAttributs\n ? Object.values(linkedArticleImmediateAttributs).map((item) => {\n console.log(Object.entries(item))\n return {\n label: String(`${item?.attrName}: `),\n content: String(\n item?.attrId === 20 || item?.attrId === 21\n ? getDateSingle(item?.attrValue)\n : item?.attrValue\n ),\n hasBoldLabel: false,\n }\n })\n : []\n\n const vehicleDetails = [\n {\n label: `${t(\"type\")}:`,\n content: String(linkedVehicles?.constructionType),\n },\n {\n label: `${t(\"yearOfConstruction\")}:`,\n content: String(\n getDate(\n linkedVehicles?.yearOfConstructionFrom,\n linkedVehicles?.yearOfConstructionTo\n )\n ),\n },\n {\n label: `${t(\"power\")}:`,\n content: `${linkedVehicles?.powerHpTo} ${t(\"units.hp\")}/${\n linkedVehicles?.powerKwTo\n } ${t(\"units.kw\")}`,\n },\n {\n label: `${t(\"cylinderCapacity\")}:`,\n content: `${linkedVehicles?.cylinderCapacity} ${t(\"units.ccm\")}`,\n },\n ]\n\n const seperator = [\n {\n label: \"separator\",\n separator: true,\n },\n ]\n\n return {\n key: String(linkedVehicles?.carId),\n brand: linkedVehicles?.manuDesc,\n subItems: [\n ...vehicleLabel,\n ...vehicleDetails,\n ...seperator,\n ...immadiateAttributsLabel,\n ],\n }\n }\n )\n }\n return Object.entries(groupListByValue(tempArticleAttributes, \"brand\")).map(\n (item) => {\n return (\n \n )\n }\n ) //.filter((item) => [\"articleName\", \"articleSearchNo\", \"articleNo\",].includes(item.label))\n }, [vehicleListImmediateAttributs, t])\n\n useEffect(() => {\n if (articleList?.articleId && vehicleLinkages.length === 0) {\n tecDocStore\n .fetchVehicleList(countryCatalogue, lang, articleList.articleId)\n .catch((err) => console.log(\"Error fetching vehicles\", err))\n }\n }, [tecDocStore, articleList, vehicleLinkages, countryCatalogue, lang])\n\n useEffect(() => {\n if (vehicleList && vehicleLinkages.length === 0) {\n const linkedArticlePairs: {\n articleLinkId: number\n linkingTargetId: number\n }[] = vehicleList.map((item) => {\n return {\n articleLinkId: item.articleLinkId,\n linkingTargetId: item.linkingTargetId,\n }\n })\n\n tecDocStore\n .fetchVehicleListImmediateAttributs(\n countryCatalogue,\n lang,\n linkedArticlePairs,\n articleList.articleId\n )\n .catch((err) => console.log(\"Error fetching vehicle details\", err))\n }\n }, [tecDocStore, vehicleList, vehicleLinkages, countryCatalogue, lang])\n\n return (\n \n \n {!(\n loadingVehicleImmediateAttributs ||\n loadingVehicleList ||\n vehicleList === null\n ) && (\n \n )}\n \n \n {vehicleLinkages}\n \n \n )\n}\n\nexport default observer(Vehicles)\n","import * as React from \"react\"\nimport { useEffect, useMemo } from \"react\"\nimport { observer } from \"mobx-react\"\n\nimport { Box, useTheme } from \"@mui/material\"\nimport { useTecDocStore } from \"api/services/TecDoc\"\nimport List from \"../../../components/List/List\"\nimport { ListTextItemTypes } from \"../../../components/List\"\nimport en from \"./locales/en.json\"\nimport useScopedTranslation from \"hooks/useScopedTranslation\"\nimport { createItemBorder } from \"../../../util\"\nimport i18next from \"i18next\"\nimport ListHeading from \"../../../components/List/components/ListHeading\"\n\nexport const namespace = __filename\n\nconst Manufacturer: React.FC = () => {\n const lang = i18next.language\n const countryCatalogue = localStorage.getItem(\"countryCatalogueCode\") || \"de\"\n const theme = useTheme()\n\n const tecDocStore = useTecDocStore()\n const { articleList, brandDetails } = tecDocStore\n const { t } = useScopedTranslation(\n namespace,\n (locale) => import(`./locales/${locale}.json`),\n en\n )\n\n useEffect(() => {\n if (!brandDetails){\n tecDocStore\n .fetchBrandDetails(countryCatalogue, lang, articleList?.brandNo)\n .catch((err) => console.log(\"Error fetching brand details\", err))\n }\n }, [tecDocStore, articleList])\n\n const brandItems = useMemo(() => {\n const requiredKeys = [\n \"name2\",\n \"street\",\n \"city\",\n \"zip\",\n \"mailbox\",\n \"wwwURL\",\n \"phone\",\n \"fax\",\n \"email\",\n ]\n let tempBrandDetails: ListTextItemTypes[] = []\n if (brandDetails) {\n tempBrandDetails = Object.entries(brandDetails).map((item) => {\n return {\n key: item[0],\n subItems: [\n {\n label: requiredKeys.includes(item[0]) ? t(item[0]) : item[0],\n content: item[1],\n },\n ],\n }\n })\n }\n\n return tempBrandDetails\n .filter((item) => requiredKeys.includes(item?.key))\n .sort((a, b) =>\n requiredKeys.indexOf(a.key) > requiredKeys.indexOf(b.key) ? 1 : -1\n )\n }, [brandDetails, t])\n\n return (\n \n \n \n \n \n \n )\n}\n\nexport default observer(Manufacturer)\n","import * as React from \"react\"\nimport { observer } from \"mobx-react\"\n\nimport { Box, Typography, useTheme } from \"@mui/material\"\nimport { useEffect } from \"react\"\nimport { useTecDocStore } from \"api/services/TecDoc\"\nimport List from \"../../../components/List/List\"\nimport { useMemo } from \"react\"\nimport { ListTextItemTypes } from \"../../../components/List\"\nimport useScopedTranslation from \"hooks/useScopedTranslation\"\nimport en from \"../Documents/locales/en.json\"\nimport ListHeading from \"../../../components/List/components/ListHeading\"\n\nexport const namespace = __filename\n\nconst Documents: React.FC = () => {\n const tecDocStore = useTecDocStore()\n const { articleDocuments, dynamicIpAdded } = tecDocStore\n\n const theme = useTheme()\n const { t } = useScopedTranslation(\n namespace,\n (locale) => import(`./locales/${locale}.json`),\n en\n )\n\n const getClientIp = async (): Promise =>\n fetch(\n \"https://geolocation-db.com/json/d802faa0-10bd-11ec-b2fe-47a0872c6708\"\n )\n .then((response) => {\n return response.json()\n })\n .then((res) => {\n return res.IPv4\n })\n .catch((err: any) => console.error(\"Problem fetching my IP\", err))\n\n useEffect(() => {\n if (!dynamicIpAdded) {\n getClientIp().then((ip) => {\n tecDocStore\n .addPublicIP(ip)\n .catch((err) => console.log(\"Error fetching articles\", err))\n })\n }\n }, [dynamicIpAdded, tecDocStore])\n\n const brandItems = useMemo(() => {\n let tempDocumentDetails: ListTextItemTypes[] = []\n if (articleDocuments && dynamicIpAdded) {\n tempDocumentDetails = articleDocuments.map((item) => {\n return {\n key: item.docId,\n subItems: [\n {\n content: `https://webservice.tecalliance.services/pegasus-3-0/documents/22148/${item.docId}/0`,\n },\n ],\n }\n })\n }\n\n return tempDocumentDetails\n }, [articleDocuments, dynamicIpAdded])\n\n return (\n \n \n \n \n {articleDocuments && articleDocuments.length > 0 ? (\n
\n ) : (\n {t(\"noData\")}\n )}\n \n )\n}\n\nexport default observer(Documents)\n","import * as React from \"react\"\nimport { observer } from \"mobx-react\"\n\nimport { Box, useTheme } from \"@mui/material\"\nimport { useTecDocStore } from \"api/services/TecDoc\"\nimport List from \"../../../components/List/List\"\nimport { useMemo } from \"react\"\nimport { ListTextItemTypes } from \"../../../components/List\"\nimport { createItemBorder, groupListByValue } from \"../../../util\"\nimport ListHeading from \"../../../components/List/components/ListHeading\"\nimport useScopedTranslation from \"../../../../../hooks/useScopedTranslation\"\nimport en from \"./locales/en.json\"\n\nexport const namespace = __filename\n\nconst OE: React.FC = () => {\n const tecDocStore = useTecDocStore()\n const { oeNumber } = tecDocStore\n const theme = useTheme()\n const { t } = useScopedTranslation(\n namespace,\n (locale) => import(`./locales/${locale}.json`),\n en\n )\n\n const oeLinkages = useMemo(() => {\n let tempOeLinkages: ListTextItemTypes[] = []\n if (oeNumber) {\n tempOeLinkages = oeNumber.map((item) => {\n return {\n brand: item.brandName,\n key: item.oeNumber,\n subItems: [\n {\n label: item.oeNumber,\n content: \"\",\n },\n ],\n }\n })\n }\n\n return Object.entries(groupListByValue(tempOeLinkages, \"brand\")).map(\n (item) => {\n return (\n \n )\n }\n )\n }, [oeNumber])\n\n return (\n \n \n \n \n {oeLinkages}\n \n )\n}\n\nexport default observer(OE)\n","import * as React from \"react\"\nimport { observer } from \"mobx-react\"\n\nimport { Box, CircularProgress, Typography } from \"@mui/material\"\n\nimport useScopedTranslation from \"hooks/useScopedTranslation\"\nimport en from \"./locales/en.json\"\nimport List, { ListTextItemTypes } from \"../../../components/List\"\nimport { useTecDocStore } from \"../../../../../api/services/TecDoc\"\nimport { useEffect, useMemo, useState } from \"react\"\n\nimport { createItemBorder, getDate, groupListByValue } from \"../../../util\"\nimport { calculateDateRange } from \"../../util\"\nimport { VehicleSelectionProps } from \"./types\"\nimport i18next from \"i18next\"\nexport const namespace = __filename\n\nconst VehicleSelection: React.FC = (props) => {\n const lang = i18next.language\n const countryCatalogue = localStorage.getItem(\"countryCatalogueCode\") || \"de\"\n\n const { step, handleStep } = props\n const { t } = useScopedTranslation(\n namespace,\n (locale) => import(`./locales/${locale}.json`),\n en\n )\n const tecDocStore = useTecDocStore()\n const {\n vehicleList,\n vehicleDetailsList,\n articleList,\n loadingVehicleList,\n loadingVehicleDetailsList,\n loadingArticleList,\n } = tecDocStore\n\n const [manufacturer, setManufacturer] = useState(\"\")\n const [model, setModel] = useState(\"\")\n const [typeKey, setTypeKey] = useState(\"\")\n\n const vehicleListByManu = useMemo(() => {\n let tempArticleAttributes: ListTextItemTypes[] = []\n if (vehicleDetailsList) {\n tempArticleAttributes = Object.entries(vehicleDetailsList).map((item) => {\n return {\n key: String(item[1]?.vehicleDetails.carId),\n brand: item[1]?.vehicleDetails.manuName,\n modelName: item[1]?.vehicleDetails.modelName,\n yearFrom: item[1]?.vehicleDetails.yearOfConstrFrom,\n yearTo: item[1]?.vehicleDetails.yearOfConstrTo,\n subItems: [\n {\n label: String(\n `${item[1]?.vehicleDetails.modelName} ${item[1]?.vehicleDetails.typeName}`\n ),\n hasBoldLabel: true,\n },\n {\n label: `${t(\"motorCodes\")}:`,\n content: item[1]?.motorCodes?.array\n .map((item) => item.motorCode)\n .toString(),\n },\n {\n label: `${t(\"yearOfConstruction\")}:`,\n content: getDate(\n item[1]?.vehicleDetails.yearOfConstrFrom,\n item[1]?.vehicleDetails.yearOfConstrTo\n ),\n },\n {\n label: `${t(\"power\")}:`,\n content: `${item[1]?.vehicleDetails.powerHpTo} ${t(\"units.hp\")}/${\n item[1]?.vehicleDetails.powerKwTo\n } ${t(\"units.kw\")}`,\n },\n {\n label: `${t(\"cylinderCapacity\")}:`,\n content: `${item[1]?.vehicleDetails.ccmTech} ${t(\"units.ccm\")}`,\n },\n ],\n }\n })\n }\n const tempListByBrand = Object.entries(\n groupListByValue(tempArticleAttributes, \"brand\")\n ) //.filter((item) => [\"articleName\", \"articleSearchNo\", \"articleNo\",].includes(item.label))\n const tempListByModelAndBrand = tempListByBrand.map((item) => {\n return {\n brand: item[0],\n modelsList: groupListByValue(item[1], \"modelName\"),\n }\n })\n return tempListByModelAndBrand //.filter((item) => [\"articleName\", \"articleSearchNo\", \"articleNo\",].includes(item.label))\n }, [vehicleDetailsList, t])\n\n const manufacturerList = useMemo(() => {\n return (\n {\n return {\n key: String(item.brand),\n brand: item.brand,\n subItems: [\n {\n label: String(item.brand),\n hasBoldLabel: true,\n },\n ],\n onClick: () => {\n setManufacturer(item.brand)\n handleStep(1)\n },\n }\n })\n )}\n />\n )\n }, [vehicleListByManu, handleStep])\n\n const modelList = useMemo(() => {\n if (vehicleListByManu) {\n const manuIndex = vehicleListByManu.findIndex(\n (p) => p.brand === manufacturer\n )\n\n return manuIndex >= 0 ? (\n {\n return {\n key: String(item[0]),\n subItems: [\n {\n label: String(`${manufacturer} ${item[0]}`),\n hasBoldLabel: true,\n },\n {\n label: String(calculateDateRange(item[1])),\n hasBoldLabel: false,\n },\n ],\n onClick: () => {\n setModel(item[0])\n handleStep(1)\n },\n }\n }\n )\n )}\n />\n ) : (\n <>\n )\n }\n }, [vehicleListByManu, handleStep, manufacturer])\n\n const typeList = useMemo(() => {\n if (vehicleListByManu && step > 1) {\n console.log(model)\n\n const manuIndex = vehicleListByManu.findIndex(\n (p) => p.brand === manufacturer\n )\n\n // const tempTypeList = vehicleListByManu[0].modelsList[model]\n\n return manuIndex >= 0 ? (\n = 0\n ? createItemBorder(\n vehicleListByManu[manuIndex].modelsList[model].map((item) => {\n return {\n key: item.key,\n subItems: item.subItems,\n onClick: () => {\n setTypeKey(item.key)\n handleStep(1)\n },\n }\n })\n )\n : []\n }\n />\n ) : (\n <>\n )\n }\n }, [vehicleListByManu, manufacturer, model, step, handleStep])\n/*\n const manualList = useMemo(() => {\n return (\n {\n return {\n key: String(item.brand),\n brand: item.brand,\n subItems: [\n {\n label: String(item.brand),\n hasBoldLabel: true,\n },\n ],\n onClick: () => {\n setManufacturer(item.brand)\n handleStep(1)\n },\n }\n })\n )}\n />\n )\n }, [vehicleListByManu, handleStep])\n*/\n useEffect(() => {\n tecDocStore\n .fetchArticle(countryCatalogue, lang, 6, \"4014486413878\") // 4019064364931\n .catch((err) => console.log(\"Error fetching articles\", err))\n }, [tecDocStore])\n\n useEffect(() => {\n if (articleList?.articleId) {\n tecDocStore\n .fetchVehicleList(countryCatalogue, lang, articleList.articleId)\n .catch((err) => console.log(\"Error fetching vehicles\", err))\n }\n }, [tecDocStore, articleList])\n\n useEffect(() => {\n if (vehicleList) {\n const vehicleIds = vehicleList.map((item) => item.linkingTargetId)\n\n tecDocStore\n .fetchVehicleDetailList(countryCatalogue, lang, vehicleIds)\n .catch((err) => console.log(\"Error fetching vehicle details\", err))\n }\n }, [tecDocStore, vehicleList])\n\n return (\n \n {loadingArticleList || loadingVehicleList || loadingVehicleDetailsList ? (\n \n \n \n ) : (\n \n \n {vehicleDetailsList?.length} {t(\"linkedVehicles\")}\n \n {(step === 0 && {manufacturerList}) ||\n (step === 1 && {modelList}) ||\n (step === 2 && {typeList})}\n \n )}\n \n )\n}\n\nexport default observer(VehicleSelection)\n","import {getDate} from \"../util\";\n\nexport const calculateDateRange = (list: any[]) =>{\n let minFrom = 999999\n let maxTo = 0\n list.forEach((item) => {\n if (item?.yearFrom < minFrom) minFrom = item?.yearFrom\n if (item?.yearTo > maxTo) maxTo = item?.yearTo\n })\n return getDate(minFrom, maxTo)\n}","import React from \"react\"\nimport { Box, Container, Typography, useTheme } from \"@mui/material\"\nimport ResponsiveBackground from \"components/ResponsiveBackground\"\nimport useScopedTranslation from \"hooks/useScopedTranslation\"\nimport en from \"./locales/en.json\"\nimport Link from \"components/Link\"\n\nexport const namespace = __filename\n\nconst CounterfeitReport = () => {\n const theme = useTheme()\n const { t } = useScopedTranslation(\n namespace,\n (locale) => import(`./locales/${locale}.json`),\n en\n )\n\n return (\n \n \n \n \n {t(\"contactEmail\")}\n \n \n \n \n \n )\n}\n\nexport default CounterfeitReport\n","import {\n Box,\n Container,\n FormControl,\n Typography,\n useTheme,\n Button,\n} from \"@mui/material\"\nimport ResponsiveBackground from \"../../../components/ResponsiveBackground\"\nimport React, { useEffect, useMemo, useState } from \"react\"\nimport Dialog from \"../../../components/Dialog\"\nimport { generatePath, useHistory } from \"react-router-dom\"\nimport Image from \"../../../components/Image\"\n\nimport useScopedTranslation from \"../../../hooks/useScopedTranslation\"\nimport en from \"./locales/en.json\"\nimport { useAuthenticityCheckStore } from \"api/services/AuthenticityCheck\"\nimport ContiSpecificButton from \"components/ContiSpecificButton\"\nimport InfoOutlinedIcon from \"@mui/icons-material/InfoOutlined\"\nimport Html5QrcodePlugin from \"components/Html5-qrcode/Html5qrcodePlugin\"\nimport { StyledTextField } from \"./styles\"\nimport { EanScannerIos } from \"ean-scanner-ios\"\nimport \"ean-scanner-ios/dist/index.css\"\nimport ArrowForwardIosIcon from \"@mui/icons-material/ArrowForwardIos\"\n\nimport { default as general_eancode_image } from \"../../../assets/images/general_eancode.png\"\nimport { default as general_eancode_image_ate } from \"../../../assets/images/general_eancode_ate.png\"\nimport { default as barcode } from \"../../../assets/icons/Barcode.svg\"\nimport { default as barcode_conti } from \"../../../assets/icons/Barcode_conti.svg\"\nimport { contiEanCode, ateEanCode } from \"utils/Global\"\n\nexport const namespace = __filename\n\nconst SecondScan = () => {\n const theme = useTheme()\n const history = useHistory()\n const { t } = useScopedTranslation(\n namespace,\n (locale) => import(`./locales/${locale}.json`),\n en\n )\n\n\n const isMobile = window.innerWidth < theme.tokens.breakpoints.breakpointTablet\n\n const [data, setData] = useState(\"\")\n const [scan, setScan] = useState(false)\n const [show, setShow] = useState(false)\n const [error, setError] = useState(\"\")\n const [eanCodeImg, setEanCodeImg] = React.useState(general_eancode_image)\n const [showInfo, setShowInfo] = useState(false)\n const [showTextField, setShowTextField] = useState(!isMobile ? true : null)\n const [showPlaceholder, setShowPlaceholder] = useState(true)\n const authenticityCheckStore = useAuthenticityCheckStore()\n const { authenticityCheckList } = authenticityCheckStore\n\n //start quagga\n const [decodedText, setDecodedText] = useState(\"\" as string)\n const [scanList, setScanList] = useState([])\n\n const redirectLocation = (gtin) => {\n console.log(gtin)\n setError(\"\")\n history.replace({\n pathname: \"/scan\",\n search: \"ean=\" + gtin,\n })\n history.push({\n pathname: generatePath(\"/tecdoc\"),\n state: {\n gtin: gtin,\n },\n })\n }\n\n useEffect(() => {\n if (history.location.search) {\n const parameters = new URLSearchParams(history.location.search)\n const ean = parameters.get(\"ean\")\n if (ean && ean.length > 3) {\n setShowTextField(true)\n setDecodedText(parameters.get(\"ean\"))\n history.replace({\n pathname: \"/scan\",\n search: \"\",\n })\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n const handleKeyDown = (event) => {\n if (event.key === \"Enter\") {\n eanCheck(decodedText ? decodedText : data) && redirectLocation(data)\n }\n }\n\n const onClickHandle = () => {\n eanCheck(decodedText ? decodedText : data) && redirectLocation(data)\n }\n\n const eanCheck = (input) => {\n if (!/^\\d{13}$/.test(input)) {\n setError(t(\"eanIncorrectLength\"))\n return false\n }\n\n // Calculate the check digit using the first 12 digits\n let checkDigit = 0\n for (let i = 0; i < 12; i += 2) {\n checkDigit += Number(input[i])\n checkDigit += Number(input[i + 1]) * 3\n }\n checkDigit = (10 - (checkDigit % 10)) % 10\n\n const isCorrectDigit = checkDigit === Number(input[12])\n !isCorrectDigit && setError(`${t(\"eanIncorrectCheck\")} ${checkDigit}`)\n return isCorrectDigit\n }\n\n\n useEffect(() => {\n if (window.location.href.toLowerCase().indexOf(\"continental\") > -1){\n setEanCodeImg(contiEanCode)\n }\n else if (window.location.href.toLowerCase().indexOf(\"ate.de\") > -1){\n setEanCodeImg(ateEanCode)\n }\n else{\n setEanCodeImg(contiEanCode)\n }\n }, []);\n\n const imageVas = useMemo(() => {\n let image = []\n if (history.location.previous === \"/\") {\n image.push(\n \n )\n }\n if (authenticityCheckList.vas?.length > 0) {\n const sortedVasList = authenticityCheckList.vas.slice()\n Object.values(sortedVasList).forEach((item: any) => {\n image.push()\n })\n } else\n image.push(\n \n )\n\n return image[0]\n }, [authenticityCheckList.vas, history.location.previous])\n\n const handleShowInfo = () => {\n setShowInfo(!showInfo)\n }\n\n //initiate ios scanner\n\n const getMostRepeated = (array) => {\n if (array.length === 0) return null\n let modeMap = {}\n let maxEl = array[0]\n let maxCount = 1\n for (let i = 0; i < array.length; i++) {\n let el = array[i]\n if (modeMap[el] == null) modeMap[el] = 1\n else modeMap[el]++\n if (modeMap[el] > maxCount) {\n maxEl = el\n maxCount = modeMap[el]\n }\n }\n return maxEl\n }\n\n //check operating system in order to render the functioning scanner\n const getScannerByOperatingSystem = () => {\n const userAgent = navigator.userAgent || navigator.vendor\n\n if (/android/i.test(userAgent)) {\n return (\n \n )\n }\n\n if (/iPad|iPhone|iPod/.test(userAgent)) {\n return (\n {\n if (\n (scanList.length === 2 && scanList[0] === scanList[1]) ||\n scanList.length > 3\n ) {\n const result = getMostRepeated(scanList)\n localStorage.setItem(\"data\", result)\n setDecodedText(result)\n setScan(false)\n setShowTextField(true)\n redirectLocation(result)\n } else {\n if (eanCheck(rawScan)) {\n setScanList([...scanList, rawScan])\n }\n }\n }}\n />\n )\n }\n\n return \"Unknown\"\n }\n\n //result scanning android system\n const onNewScanResultAndroid = (decodedTextNew, decodedResult) => {\n if (decodedTextNew) {\n localStorage.setItem(\"data\", decodedTextNew)\n setDecodedText(decodedTextNew)\n\n setScan(false)\n eanCheck(decodedTextNew ? decodedTextNew : data) &&\n redirectLocation(decodedTextNew)\n setShowTextField(true)\n }\n }\n const handleShowTextField = () => {\n setShowTextField(!showTextField)\n }\n\n const handleTextFieldChange = (e) => {\n setDecodedText(e.target.value)\n setData(e.target.value)\n localStorage.setItem(\"data\", e.target.value)\n eanCheck(e.target.value ? e.target.value : data) \n }\n\n return (\n \n \n \n \n \n {window.innerWidth <\n theme.tokens.breakpoints.breakpointTablet + 200 && (\n <>\n {!isMobile && (\n \n {t(\"helpText\")}\n \n )}\n \n setScan(true)}\n isBarcode={true}\n >\n \n \n \n {t(\"manualEntry\")}\n \n \n \n \n )}\n {window.innerWidth >\n theme.tokens.breakpoints.breakpointTablet && (\n \n {t(\"helpTextTablet\")}\n \n )}\n \n \n \n \n theme.tokens.breakpoints.breakpointTablet\n }\n id=\"outlined-basic\"\n variant=\"outlined\"\n placeholder={showPlaceholder ? \"4 006633 444729\" : \"\"}\n onChange={handleTextFieldChange}\n value={decodedText}\n type={\"text\"}\n onKeyDown={handleKeyDown}\n InputLabelProps={{ shrink: false }}\n inputProps={{ min: 0, style: { textAlign: \"center\" } }}\n InputProps={{\n style: {\n borderRadius: \"30px\",\n margin: \"15px 10px\",\n textAlign: \"center\",\n fontFamily: \"inter\",\n fontSize: \"18px\",\n lineHeight: \"26px\",\n letterSpacing: \"3px\",\n width: \"100%\",\n height:\n window.innerWidth <\n theme.tokens.breakpoints.breakpointTablet\n ? \"32px\"\n : undefined,\n padding: null,\n backgroundColor: \"#ffff\",\n },\n }}\n onFocus={() => setShowPlaceholder(false)}\n onBlur={() => setShowPlaceholder(true)}\n />\n \n \n \n \n \n \n \n {error}\n \n \n\n \n \n \n \n \n\n \n {t(\"EANCodeInfo\")}\n \n \n \n \n {t(\"EANCodeInfoProduct\")}\n \n {showInfo ? : null}\n \n \n\n {\n setShow(false)\n setScan(false)\n // localStorage.removeItem(\"data\")\n }}\n closeStyle={{\n color: theme.palette.text.primary,\n label: t(\"close\"),\n }}\n confirmStyle={{\n color: theme.palette.primary.main,\n label: t(\"confirm\"),\n }}\n // onAbort={() => localStorage.removeItem(\"data\")}\n onAccept={\n show\n ? () => {\n // localStorage.removeItem(\"data\")\n redirectLocation(data)\n }\n : null\n }\n title={show ? t(\"codeScanned\") : t(\"scanCode\")}\n text={\"\"}\n content={scan && <>{getScannerByOperatingSystem()}}\n />\n \n \n \n )\n}\n\nexport default SecondScan\n","import {\n Html5Qrcode,\n Html5QrcodeScanType,\n Html5QrcodeScannerState,\n Html5QrcodeSupportedFormats,\n} from \"html5-qrcode\"\nimport { useEffect } from \"react\"\nimport \"./html5-qrcode.css\"\n\nconst qrcodeRegionId = \"reader\"\n\n// Creates the configuration object for Html5QrcodeScanner.\nconst createConfig = (props) => {\n let config = {\n fps: 15,\n qrbox: {\n width: 400,\n height: 300,\n },\n aspectRatio: undefined,\n disableFlip: undefined,\n // focusMode: \"continuous\",\n defaultZoomValueIfSupported: 1.7,\n showZoomSliderIfSupported: true,\n rememberLastUsedCamera: true,\n experimentalFeatures: {\n useBarCodeDetectorIfSupported: true,\n },\n // willReadFrequently: true,\n supportedScanTypes: [\n // Html5QrcodeScanType.SCAN_TYPE_FILE,\n Html5QrcodeScanType.SCAN_TYPE_CAMERA,\n ],\n formatsToSupport: [Html5QrcodeSupportedFormats.EAN_13],\n // videoConstraints: { facingMode: { exact: \"environment\" }, deviceId: cameraId },\n }\n if (props.fps) {\n config.fps = props.fps\n }\n if (props.qrbox) {\n config.qrbox = props.qrbox\n }\n if (props.aspectRatio) {\n config.aspectRatio = props.aspectRatio\n }\n if (props.disableFlip !== undefined) {\n config.disableFlip = props.disableFlip\n }\n return config\n}\n\n// const Html5QrcodePlugin = (props) => {\n// let cameraId = null\n// useEffect(() => {\n// // when component mounts\n\n// const verbose = props.verbose === true\n// // Suceess callback is required.\n// if (!props.qrCodeSuccessCallback) {\n// throw \"qrCodeSuccessCallback is required callback.\"\n// }\n\n// let html5QrcodeScanner = null\n// // const html5QrCode = new Html5Qrcode(\"reader\");\n// Html5Qrcode.getCameras().then((devices) => {\n// if (devices && devices.length) {\n// if (devices.length === 1) {\n// cameraId = devices[0].id\n// } else {\n// //check first for 2_0 camera as this is usally the default back one\n// for (const device of devices) {\n// const cameraLabel = device.label\n// if (\n// cameraLabel &&\n// (cameraLabel.toLowerCase().includes(\"2 0\") ||\n// cameraLabel.toLowerCase().includes(\"2.0\") ||\n// (cameraLabel.toLowerCase().includes(\"back\") &&\n// (cameraLabel.toLowerCase().includes(\"2 2\") ||\n// cameraLabel.toLowerCase().includes(\"2.2\"))))\n// ) {\n// cameraId = device.id\n// }\n// }\n// //if none is found take the first back one\n// if (cameraId == null) {\n// for (const device of devices) {\n// const cameraLabel = device.label\n// if (cameraLabel && cameraLabel.toLowerCase().includes(\"back\")) {\n// cameraId = device.id\n// }\n// }\n// }\n// }\n// }\n// })\n\n// // // html5QrCode.start(cameraId, config, props.qrCodeSuccessCallback, props.qrCodeErrorCallback)\n// // })\n\n// const config = createConfig(props, cameraId)\n// html5QrcodeScanner = new Html5QrcodeScanner(qrcodeRegionId, config, verbose)\n\n// html5QrcodeScanner.render(\n// props.qrCodeSuccessCallback,\n// props.qrCodeErrorCallback\n// )\n\n// setTimeout(function () {\n// html5QrcodeScanner.applyVideoConstraints({\n// focusMode: \"continuous\",\n// deviceId: cameraId,\n// // autoGainControl: true,\n// advanced: [{ zoom: 1.5 }],\n// facingMode: { exact: \"environment\" },\n// })\n// }, 2000)\n\n// // cleanup function when component will unmount\n// return () => {\n// html5QrcodeScanner.clear().catch((error) => {\n// console.error(\"Failed to clear html5QrcodeScanner. \", error)\n// })\n// }\n// }, [])\n\n// return \n// }\n\nconst Html5QrcodePlugin = (props) => {\n useEffect(() => {\n if (!props.qrCodeSuccessCallback) {\n throw new Error(\"qrCodeSuccessCallback is required callback.\")\n }\n\n const config = createConfig(props)\n\n const html5QrCode = new Html5Qrcode(qrcodeRegionId)\n Html5Qrcode.getCameras().then((devices) => {\n if (devices && devices.length) {\n let cameraId = devices[0].id // Default to the first camera if specific criteria are not met\n // Implement your logic to choose a cameraId based on your criteria\n // For example, choosing the first back camera\n if (devices.length === 1) {\n cameraId = devices[0].id\n } else {\n //check first for 2_0 camera as this is usally the default back one\n for (const device of devices) {\n const cameraLabel = device.label\n if (\n cameraLabel && cameraLabel.toLowerCase().includes(\"back\") &&\n (cameraLabel.toLowerCase().includes(\"2 0\") ||\n cameraLabel.toLowerCase().includes(\"2.0\") //||\n // cameraLabel.toLowerCase().includes(\"2 2\") ||\n // cameraLabel.toLowerCase().includes(\"2.2\")\n )\n ) {\n cameraId = device.id\n }\n }\n //if none is found take the first back one\n if (cameraId == null) {\n for (const device of devices) {\n const cameraLabel = device.label\n if (cameraLabel && cameraLabel.toLowerCase().includes(\"back\")) {\n cameraId = device.id\n }\n }\n }\n }\n\n html5QrCode\n .start(\n cameraId,\n config,\n props.qrCodeSuccessCallback,\n props.qrCodeErrorCallback\n )\n .catch((err) => {\n console.error(`Unable to start camera with ID ${cameraId}`, err)\n })\n\n let videoConfig = {\n focusMode: \"continuous\",\n // autoGainControl: true,\n advanced: [{ zoom: 1.7 }],\n // facingMode: { exact: \"environment\" },\n }\n startTimer(html5QrCode, videoConfig)\n }\n })\n\n return () => {\n if (html5QrCode.getState() === Html5QrcodeScannerState.SCANNING) {\n html5QrCode.stop().catch((error) => {\n console.error(\"Failed to stop html5QrCode. \", error)\n })\n }\n }\n }, [props])\n\n return \n}\n\nconst startTimer = (html5QrCode, videoConfig) => {\n setTimeout(function () {\n if (html5QrCode.getState() === Html5QrcodeScannerState.SCANNING) {\n html5QrCode.applyVideoConstraints(videoConfig)\n } else {\n startTimer(html5QrCode, videoConfig)\n }\n }, 2000)\n}\n\nexport default Html5QrcodePlugin\n","import { styled } from \"@mui/material/styles\"\nimport Box from \"@mui/material/Box\"\nimport { TextField } from \"@mui/material\"\n\nconst StyledIcon = styled(Box)(({ theme, color }) => ({\n color: color.toString(),\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n minWidth: 0,\n marginInline: \"auto\",\n \"& svg\": {\n width: \"8rem\",\n height: \"8rem\",\n },\n [theme.breakpoints.down(\"md\")]: {\n minWidth: 0,\n width: \"8rem\",\n height: \"8rem\",\n \"& svg\": {\n width: \"8rem\",\n height: \"8rem\",\n },\n },\n}))\n\nconst StyledTextField = styled(TextField)(({ theme, color }) => ({\n \"& .MuiOutlinedInput-notchedOutline legend\": { display: \"none\" },\n}))\n\nexport { StyledIcon, StyledTextField }\n","// A type of promise-like that resolves synchronously and supports only one observer\nexport const _Pact = /*#__PURE__*/(function() {\n\tfunction _Pact() {}\n\t_Pact.prototype.then = function(onFulfilled, onRejected) {\n\t\tconst result = new _Pact();\n\t\tconst state = this.s;\n\t\tif (state) {\n\t\t\tconst callback = state & 1 ? onFulfilled : onRejected;\n\t\t\tif (callback) {\n\t\t\t\ttry {\n\t\t\t\t\t_settle(result, 1, callback(this.v));\n\t\t\t\t} catch (e) {\n\t\t\t\t\t_settle(result, 2, e);\n\t\t\t\t}\n\t\t\t\treturn result;\n\t\t\t} else {\n\t\t\t\treturn this;\n\t\t\t}\n\t\t}\n\t\tthis.o = function(_this) {\n\t\t\ttry {\n\t\t\t\tconst value = _this.v;\n\t\t\t\tif (_this.s & 1) {\n\t\t\t\t\t_settle(result, 1, onFulfilled ? onFulfilled(value) : value);\n\t\t\t\t} else if (onRejected) {\n\t\t\t\t\t_settle(result, 1, onRejected(value));\n\t\t\t\t} else {\n\t\t\t\t\t_settle(result, 2, value);\n\t\t\t\t}\n\t\t\t} catch (e) {\n\t\t\t\t_settle(result, 2, e);\n\t\t\t}\n\t\t};\n\t\treturn result;\n\t}\n\treturn _Pact;\n})();\n\n// Settles a pact synchronously\nexport function _settle(pact, state, value) {\n\tif (!pact.s) {\n\t\tif (value instanceof _Pact) {\n\t\t\tif (value.s) {\n\t\t\t\tif (state & 1) {\n\t\t\t\t\tstate = value.s;\n\t\t\t\t}\n\t\t\t\tvalue = value.v;\n\t\t\t} else {\n\t\t\t\tvalue.o = _settle.bind(null, pact, state);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t\tif (value && value.then) {\n\t\t\tvalue.then(_settle.bind(null, pact, state), _settle.bind(null, pact, 2));\n\t\t\treturn;\n\t\t}\n\t\tpact.s = state;\n\t\tpact.v = value;\n\t\tconst observer = pact.o;\n\t\tif (observer) {\n\t\t\tobserver(pact);\n\t\t}\n\t}\n}\n\nexport function _isSettledPact(thenable) {\n\treturn thenable instanceof _Pact && thenable.s & 1;\n}\n\n// Converts argument to a function that always returns a Promise\nexport function _async(f) {\n\treturn function() {\n\t\tfor (var args = [], i = 0; i < arguments.length; i++) {\n\t\t\targs[i] = arguments[i];\n\t\t}\n\t\ttry {\n\t\t\treturn Promise.resolve(f.apply(this, args));\n\t\t} catch(e) {\n\t\t\treturn Promise.reject(e);\n\t\t}\n\t}\n}\n\n// Awaits on a value that may or may not be a Promise (equivalent to the await keyword in ES2015, with continuations passed explicitly)\nexport function _await(value, then, direct) {\n\tif (direct) {\n\t\treturn then ? then(value) : value;\n\t}\n\tif (!value || !value.then) {\n\t\tvalue = Promise.resolve(value);\n\t}\n\treturn then ? value.then(then) : value;\n}\n\n// Awaits on a value that may or may not be a Promise, then ignores it\nexport function _awaitIgnored(value, direct) {\n\tif (!direct) {\n\t\treturn value && value.then ? value.then(_empty) : Promise.resolve();\n\t}\n}\n\n// Proceeds after a value has resolved, or proceeds immediately if the value is not thenable\nexport function _continue(value, then) {\n\treturn value && value.then ? value.then(then) : then(value);\n}\n\n// Proceeds after a value has resolved, or proceeds immediately if the value is not thenable\nexport function _continueIgnored(value) {\n\tif (value && value.then) {\n\t\treturn value.then(_empty);\n\t}\n}\n\n// Asynchronously iterate through an object that has a length property, passing the index as the first argument to the callback (even as the length property changes)\nexport function _forTo(array, body, check) {\n\tvar i = -1, pact, reject;\n\tfunction _cycle(result) {\n\t\ttry {\n\t\t\twhile (++i < array.length && (!check || !check())) {\n\t\t\t\tresult = body(i);\n\t\t\t\tif (result && result.then) {\n\t\t\t\t\tif (_isSettledPact(result)) {\n\t\t\t\t\t\tresult = result.v;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tresult.then(_cycle, reject || (reject = _settle.bind(null, pact = new _Pact(), 2)));\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (pact) {\n\t\t\t\t_settle(pact, 1, result);\n\t\t\t} else {\n\t\t\t\tpact = result;\n\t\t\t}\n\t\t} catch (e) {\n\t\t\t_settle(pact || (pact = new _Pact()), 2, e);\n\t\t}\n\t}\n\t_cycle();\n\treturn pact;\n}\n\n// Asynchronously iterate through an object's properties (including properties inherited from the prototype)\n// Uses a snapshot of the object's properties\nexport function _forIn(target, body, check) {\n\tvar keys = [];\n\tfor (var key in target) {\n\t\tkeys.push(key);\n\t}\n\treturn _forTo(keys, function(i) { return body(keys[i]); }, check);\n}\n\n// Asynchronously iterate through an object's own properties (excluding properties inherited from the prototype)\n// Uses a snapshot of the object's properties\nexport function _forOwn(target, body, check) {\n\tvar keys = [];\n\tfor (var key in target) {\n\t\tif (Object.prototype.hasOwnProperty.call(target, key)) {\n\t\t\tkeys.push(key);\n\t\t}\n\t}\n\treturn _forTo(keys, function(i) { return body(keys[i]); }, check);\n}\n\nexport const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== \"undefined\" ? (Symbol.iterator || (Symbol.iterator = Symbol(\"Symbol.iterator\"))) : \"@@iterator\";\n\n// Asynchronously iterate through an object's values\n// Uses for...of if the runtime supports it, otherwise iterates until length on a copy\nexport function _forOf(target, body, check) {\n\tif (typeof target[_iteratorSymbol] === \"function\") {\n\t\tvar iterator = target[_iteratorSymbol](), step, pact, reject;\n\t\tfunction _cycle(result) {\n\t\t\ttry {\n\t\t\t\twhile (!(step = iterator.next()).done && (!check || !check())) {\n\t\t\t\t\tresult = body(step.value);\n\t\t\t\t\tif (result && result.then) {\n\t\t\t\t\t\tif (_isSettledPact(result)) {\n\t\t\t\t\t\t\tresult = result.v;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tresult.then(_cycle, reject || (reject = _settle.bind(null, pact = new _Pact(), 2)));\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (pact) {\n\t\t\t\t\t_settle(pact, 1, result);\n\t\t\t\t} else {\n\t\t\t\t\tpact = result;\n\t\t\t\t}\n\t\t\t} catch (e) {\n\t\t\t\t_settle(pact || (pact = new _Pact()), 2, e);\n\t\t\t}\n\t\t}\n\t\t_cycle();\n\t\tif (iterator.return) {\n\t\t\tvar _fixup = function(value) {\n\t\t\t\ttry {\n\t\t\t\t\tif (!step.done) {\n\t\t\t\t\t\titerator.return();\n\t\t\t\t\t}\n\t\t\t\t} catch(e) {\n\t\t\t\t}\n\t\t\t\treturn value;\n\t\t\t}\n\t\t\tif (pact && pact.then) {\n\t\t\t\treturn pact.then(_fixup, function(e) {\n\t\t\t\t\tthrow _fixup(e);\n\t\t\t\t});\n\t\t\t}\n\t\t\t_fixup();\n\t\t}\n\t\treturn pact;\n\t}\n\t// No support for Symbol.iterator\n\tif (!(\"length\" in target)) {\n\t\tthrow new TypeError(\"Object is not iterable\");\n\t}\n\t// Handle live collections properly\n\tvar values = [];\n\tfor (var i = 0; i < target.length; i++) {\n\t\tvalues.push(target[i]);\n\t}\n\treturn _forTo(values, function(i) { return body(values[i]); }, check);\n}\n\nexport const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== \"undefined\" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol(\"Symbol.asyncIterator\"))) : \"@@asyncIterator\";\n\n// Asynchronously iterate on a value using it's async iterator if present, or its synchronous iterator if missing\nexport function _forAwaitOf(target, body, check) {\n\tif (typeof target[_asyncIteratorSymbol] === \"function\") {\n\t\tvar pact = new _Pact();\n\t\tvar iterator = target[_asyncIteratorSymbol]();\n\t\titerator.next().then(_resumeAfterNext).then(void 0, _reject);\n\t\treturn pact;\n\t\tfunction _resumeAfterBody(result) {\n\t\t\tif (check && check()) {\n\t\t\t\treturn _settle(pact, 1, iterator.return ? iterator.return().then(function() { return result; }) : result);\n\t\t\t}\n\t\t\titerator.next().then(_resumeAfterNext).then(void 0, _reject);\n\t\t}\n\t\tfunction _resumeAfterNext(step) {\n\t\t\tif (step.done) {\n\t\t\t\t_settle(pact, 1);\n\t\t\t} else {\n\t\t\t\tPromise.resolve(body(step.value)).then(_resumeAfterBody).then(void 0, _reject);\n\t\t\t}\n\t\t}\n\t\tfunction _reject(error) {\n\t\t\t_settle(pact, 2, iterator.return ? iterator.return().then(function() { return error; }) : error);\n\t\t}\n\t}\n\treturn Promise.resolve(_forOf(target, function(value) { return Promise.resolve(value).then(body); }, check));\n}\n\n// Asynchronously implement a generic for loop\nexport function _for(test, update, body) {\n\tvar stage;\n\tfor (;;) {\n\t\tvar shouldContinue = test();\n\t\tif (_isSettledPact(shouldContinue)) {\n\t\t\tshouldContinue = shouldContinue.v;\n\t\t}\n\t\tif (!shouldContinue) {\n\t\t\treturn result;\n\t\t}\n\t\tif (shouldContinue.then) {\n\t\t\tstage = 0;\n\t\t\tbreak;\n\t\t}\n\t\tvar result = body();\n\t\tif (result && result.then) {\n\t\t\tif (_isSettledPact(result)) {\n\t\t\t\tresult = result.s;\n\t\t\t} else {\n\t\t\t\tstage = 1;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t\tif (update) {\n\t\t\tvar updateValue = update();\n\t\t\tif (updateValue && updateValue.then && !_isSettledPact(updateValue)) {\n\t\t\t\tstage = 2;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\tvar pact = new _Pact();\n\tvar reject = _settle.bind(null, pact, 2);\n\t(stage === 0 ? shouldContinue.then(_resumeAfterTest) : stage === 1 ? result.then(_resumeAfterBody) : updateValue.then(_resumeAfterUpdate)).then(void 0, reject);\n\treturn pact;\n\tfunction _resumeAfterBody(value) {\n\t\tresult = value;\n\t\tdo {\n\t\t\tif (update) {\n\t\t\t\tupdateValue = update();\n\t\t\t\tif (updateValue && updateValue.then && !_isSettledPact(updateValue)) {\n\t\t\t\t\tupdateValue.then(_resumeAfterUpdate).then(void 0, reject);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\t\t\tshouldContinue = test();\n\t\t\tif (!shouldContinue || (_isSettledPact(shouldContinue) && !shouldContinue.v)) {\n\t\t\t\t_settle(pact, 1, result);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (shouldContinue.then) {\n\t\t\t\tshouldContinue.then(_resumeAfterTest).then(void 0, reject);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tresult = body();\n\t\t\tif (_isSettledPact(result)) {\n\t\t\t\tresult = result.v;\n\t\t\t}\n\t\t} while (!result || !result.then);\n\t\tresult.then(_resumeAfterBody).then(void 0, reject);\n\t}\n\tfunction _resumeAfterTest(shouldContinue) {\n\t\tif (shouldContinue) {\n\t\t\tresult = body();\n\t\t\tif (result && result.then) {\n\t\t\t\tresult.then(_resumeAfterBody).then(void 0, reject);\n\t\t\t} else {\n\t\t\t\t_resumeAfterBody(result);\n\t\t\t}\n\t\t} else {\n\t\t\t_settle(pact, 1, result);\n\t\t}\n\t}\n\tfunction _resumeAfterUpdate() {\n\t\tif (shouldContinue = test()) {\n\t\t\tif (shouldContinue.then) {\n\t\t\t\tshouldContinue.then(_resumeAfterTest).then(void 0, reject);\n\t\t\t} else {\n\t\t\t\t_resumeAfterTest(shouldContinue);\n\t\t\t}\n\t\t} else {\n\t\t\t_settle(pact, 1, result);\n\t\t}\n\t}\n}\n\n// Asynchronously implement a do ... while loop\nexport function _do(body, test) {\n\tvar awaitBody;\n\tdo {\n\t\tvar result = body();\n\t\tif (result && result.then) {\n\t\t\tif (_isSettledPact(result)) {\n\t\t\t\tresult = result.v;\n\t\t\t} else {\n\t\t\t\tawaitBody = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t\tvar shouldContinue = test();\n\t\tif (_isSettledPact(shouldContinue)) {\n\t\t\tshouldContinue = shouldContinue.v;\n\t\t}\n\t\tif (!shouldContinue) {\n\t\t\treturn result;\n\t\t}\n\t} while (!shouldContinue.then);\n\tconst pact = new _Pact();\n\tconst reject = _settle.bind(null, pact, 2);\n\t(awaitBody ? result.then(_resumeAfterBody) : shouldContinue.then(_resumeAfterTest)).then(void 0, reject);\n\treturn pact;\n\tfunction _resumeAfterBody(value) {\n\t\tresult = value;\n\t\tfor (;;) {\n\t\t\tshouldContinue = test();\n\t\t\tif (_isSettledPact(shouldContinue)) {\n\t\t\t\tshouldContinue = shouldContinue.v;\n\t\t\t}\n\t\t\tif (!shouldContinue) {\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tif (shouldContinue.then) {\n\t\t\t\tshouldContinue.then(_resumeAfterTest).then(void 0, reject);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tresult = body();\n\t\t\tif (result && result.then) {\n\t\t\t\tif (_isSettledPact(result)) {\n\t\t\t\t\tresult = result.v;\n\t\t\t\t} else {\n\t\t\t\t\tresult.then(_resumeAfterBody).then(void 0, reject);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t_settle(pact, 1, result);\n\t}\n\tfunction _resumeAfterTest(shouldContinue) {\n\t\tif (shouldContinue) {\n\t\t\tdo {\n\t\t\t\tresult = body();\n\t\t\t\tif (result && result.then) {\n\t\t\t\t\tif (_isSettledPact(result)) {\n\t\t\t\t\t\tresult = result.v;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tresult.then(_resumeAfterBody).then(void 0, reject);\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tshouldContinue = test();\n\t\t\t\tif (_isSettledPact(shouldContinue)) {\n\t\t\t\t\tshouldContinue = shouldContinue.v;\n\t\t\t\t}\n\t\t\t\tif (!shouldContinue) {\n\t\t\t\t\t_settle(pact, 1, result);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t} while (!shouldContinue.then);\n\t\t\tshouldContinue.then(_resumeAfterTest).then(void 0, reject);\n\t\t} else {\n\t\t\t_settle(pact, 1, result);\n\t\t}\n\t}\n}\n\n// Asynchronously implement a switch statement\nexport function _switch(discriminant, cases) {\n\tvar dispatchIndex = -1;\n\tvar awaitBody;\n\touter: {\n\t\tfor (var i = 0; i < cases.length; i++) {\n\t\t\tvar test = cases[i][0];\n\t\t\tif (test) {\n\t\t\t\tvar testValue = test();\n\t\t\t\tif (testValue && testValue.then) {\n\t\t\t\t\tbreak outer;\n\t\t\t\t}\n\t\t\t\tif (testValue === discriminant) {\n\t\t\t\t\tdispatchIndex = i;\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// Found the default case, set it as the pending dispatch case\n\t\t\t\tdispatchIndex = i;\n\t\t\t}\n\t\t}\n\t\tif (dispatchIndex !== -1) {\n\t\t\tdo {\n\t\t\t\tvar body = cases[dispatchIndex][1];\n\t\t\t\twhile (!body) {\n\t\t\t\t\tdispatchIndex++;\n\t\t\t\t\tbody = cases[dispatchIndex][1];\n\t\t\t\t}\n\t\t\t\tvar result = body();\n\t\t\t\tif (result && result.then) {\n\t\t\t\t\tawaitBody = true;\n\t\t\t\t\tbreak outer;\n\t\t\t\t}\n\t\t\t\tvar fallthroughCheck = cases[dispatchIndex][2];\n\t\t\t\tdispatchIndex++;\n\t\t\t} while (fallthroughCheck && !fallthroughCheck());\n\t\t\treturn result;\n\t\t}\n\t}\n\tconst pact = new _Pact();\n\tconst reject = _settle.bind(null, pact, 2);\n\t(awaitBody ? result.then(_resumeAfterBody) : testValue.then(_resumeAfterTest)).then(void 0, reject);\n\treturn pact;\n\tfunction _resumeAfterTest(value) {\n\t\tfor (;;) {\n\t\t\tif (value === discriminant) {\n\t\t\t\tdispatchIndex = i;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tif (++i === cases.length) {\n\t\t\t\tif (dispatchIndex !== -1) {\n\t\t\t\t\tbreak;\n\t\t\t\t} else {\n\t\t\t\t\t_settle(pact, 1, result);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\t\t\ttest = cases[i][0];\n\t\t\tif (test) {\n\t\t\t\tvalue = test();\n\t\t\t\tif (value && value.then) {\n\t\t\t\t\tvalue.then(_resumeAfterTest).then(void 0, reject);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tdispatchIndex = i;\n\t\t\t}\n\t\t}\n\t\tdo {\n\t\t\tvar body = cases[dispatchIndex][1];\n\t\t\twhile (!body) {\n\t\t\t\tdispatchIndex++;\n\t\t\t\tbody = cases[dispatchIndex][1];\n\t\t\t}\n\t\t\tvar result = body();\n\t\t\tif (result && result.then) {\n\t\t\t\tresult.then(_resumeAfterBody).then(void 0, reject);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tvar fallthroughCheck = cases[dispatchIndex][2];\n\t\t\tdispatchIndex++;\n\t\t} while (fallthroughCheck && !fallthroughCheck());\n\t\t_settle(pact, 1, result);\n\t}\n\tfunction _resumeAfterBody(result) {\n\t\tfor (;;) {\n\t\t\tvar fallthroughCheck = cases[dispatchIndex][2];\n\t\t\tif (!fallthroughCheck || fallthroughCheck()) {\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdispatchIndex++;\n\t\t\tvar body = cases[dispatchIndex][1];\n\t\t\twhile (!body) {\n\t\t\t\tdispatchIndex++;\n\t\t\t\tbody = cases[dispatchIndex][1];\n\t\t\t}\n\t\t\tresult = body();\n\t\t\tif (result && result.then) {\n\t\t\t\tresult.then(_resumeAfterBody).then(void 0, reject);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t\t_settle(pact, 1, result);\n\t}\n}\n\n// Asynchronously call a function and pass the result to explicitly passed continuations\nexport function _call(body, then, direct) {\n\tif (direct) {\n\t\treturn then ? then(body()) : body();\n\t}\n\ttry {\n\t\tvar result = Promise.resolve(body());\n\t\treturn then ? result.then(then) : result;\n\t} catch (e) {\n\t\treturn Promise.reject(e);\n\t}\n}\n\n// Asynchronously call a function and swallow the result\nexport function _callIgnored(body, direct) {\n\treturn _call(body, _empty, direct);\n}\n\n// Asynchronously call a function and pass the result to explicitly passed continuations\nexport function _invoke(body, then) {\n\tvar result = body();\n\tif (result && result.then) {\n\t\treturn result.then(then);\n\t}\n\treturn then(result);\n}\n\n// Asynchronously call a function and swallow the result\nexport function _invokeIgnored(body) {\n\tvar result = body();\n\tif (result && result.then) {\n\t\treturn result.then(_empty);\n\t}\n}\n\n// Asynchronously call a function and send errors to recovery continuation\nexport function _catch(body, recover) {\n\ttry {\n\t\tvar result = body();\n\t} catch(e) {\n\t\treturn recover(e);\n\t}\n\tif (result && result.then) {\n\t\treturn result.then(void 0, recover);\n\t}\n\treturn result;\n}\n\n// Asynchronously await a promise and pass the result to a finally continuation\nexport function _finallyRethrows(body, finalizer) {\n\ttry {\n\t\tvar result = body();\n\t} catch (e) {\n\t\treturn finalizer(true, e);\n\t}\n\tif (result && result.then) {\n\t\treturn result.then(finalizer.bind(null, false), finalizer.bind(null, true));\n\t}\n\treturn finalizer(false, result);\n}\n\n// Asynchronously await a promise and invoke a finally continuation that always overrides the result\nexport function _finally(body, finalizer) {\n\ttry {\n\t\tvar result = body();\n\t} catch (e) {\n\t\treturn finalizer();\n\t}\n\tif (result && result.then) {\n\t\treturn result.then(finalizer, finalizer);\n\t}\n\treturn finalizer();\n}\n\n// Rethrow or return a value from a finally continuation\nexport function _rethrow(thrown, value) {\n\tif (thrown)\n\t\tthrow value;\n\treturn value;\n}\n\n// Empty function to implement break and other control flow that ignores asynchronous results\nexport function _empty() {\n}\n\n// Sentinel value for early returns in generators \nexport const _earlyReturn = /*#__PURE__*/ {};\n\n// Asynchronously call a function and send errors to recovery continuation, skipping early returns\nexport function _catchInGenerator(body, recover) {\n\treturn _catch(body, function(e) {\n\t\tif (e === _earlyReturn) {\n\t\t\tthrow e;\n\t\t}\n\t\treturn recover(e);\n\t});\n}\n\n// Asynchronous generator class; accepts the entrypoint of the generator, to which it passes itself when the generator should start\nexport const _AsyncGenerator = /*#__PURE__*/(function() {\n\tfunction _AsyncGenerator(entry) {\n\t\tthis._entry = entry;\n\t\tthis._pact = null;\n\t\tthis._resolve = null;\n\t\tthis._return = null;\n\t\tthis._promise = null;\n\t}\n\n\tfunction _wrapReturnedValue(value) {\n\t\treturn { value: value, done: true };\n\t}\n\tfunction _wrapYieldedValue(value) {\n\t\treturn { value: value, done: false };\n\t}\n\n\t_AsyncGenerator.prototype._yield = function(value) {\n\t\t// Yield the value to the pending next call\n\t\tthis._resolve(value && value.then ? value.then(_wrapYieldedValue) : _wrapYieldedValue(value));\n\t\t// Return a pact for an upcoming next/return/throw call\n\t\treturn this._pact = new _Pact();\n\t};\n\t_AsyncGenerator.prototype.next = function(value) {\n\t\t// Advance the generator, starting it if it has yet to be started\n\t\tconst _this = this;\n\t\treturn _this._promise = new Promise(function (resolve) {\n\t\t\tconst _pact = _this._pact;\n\t\t\tif (_pact === null) {\n\t\t\t\tconst _entry = _this._entry;\n\t\t\t\tif (_entry === null) {\n\t\t\t\t\t// Generator is started, but not awaiting a yield expression\n\t\t\t\t\t// Abandon the next call!\n\t\t\t\t\treturn resolve(_this._promise);\n\t\t\t\t}\n\t\t\t\t// Start the generator\n\t\t\t\t_this._entry = null;\n\t\t\t\t_this._resolve = resolve;\n\t\t\t\tfunction returnValue(value) {\n\t\t\t\t\t_this._resolve(value && value.then ? value.then(_wrapReturnedValue) : _wrapReturnedValue(value));\n\t\t\t\t\t_this._pact = null;\n\t\t\t\t\t_this._resolve = null;\n\t\t\t\t}\n\t\t\t\tvar result = _entry(_this);\n\t\t\t\tif (result && result.then) {\n\t\t\t\t\tresult.then(returnValue, function(error) {\n\t\t\t\t\t\tif (error === _earlyReturn) {\n\t\t\t\t\t\t\treturnValue(_this._return);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tconst pact = new _Pact();\n\t\t\t\t\t\t\t_this._resolve(pact);\n\t\t\t\t\t\t\t_this._pact = null;\n\t\t\t\t\t\t\t_this._resolve = null;\n\t\t\t\t\t\t\t_resolve(pact, 2, error);\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\treturnValue(result);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// Generator is started and a yield expression is pending, settle it\n\t\t\t\t_this._pact = null;\n\t\t\t\t_this._resolve = resolve;\n\t\t\t\t_settle(_pact, 1, value);\n\t\t\t}\n\t\t});\n\t};\n\t_AsyncGenerator.prototype.return = function(value) {\n\t\t// Early return from the generator if started, otherwise abandons the generator\n\t\tconst _this = this;\n\t\treturn _this._promise = new Promise(function (resolve) {\n\t\t\tconst _pact = _this._pact;\n\t\t\tif (_pact === null) {\n\t\t\t\tif (_this._entry === null) {\n\t\t\t\t\t// Generator is started, but not awaiting a yield expression\n\t\t\t\t\t// Abandon the return call!\n\t\t\t\t\treturn resolve(_this._promise);\n\t\t\t\t}\n\t\t\t\t// Generator is not started, abandon it and return the specified value\n\t\t\t\t_this._entry = null;\n\t\t\t\treturn resolve(value && value.then ? value.then(_wrapReturnedValue) : _wrapReturnedValue(value));\n\t\t\t}\n\t\t\t// Settle the yield expression with a rejected \"early return\" value\n\t\t\t_this._return = value;\n\t\t\t_this._resolve = resolve;\n\t\t\t_this._pact = null;\n\t\t\t_settle(_pact, 2, _earlyReturn);\n\t\t});\n\t};\n\t_AsyncGenerator.prototype.throw = function(error) {\n\t\t// Inject an exception into the pending yield expression\n\t\tconst _this = this;\n\t\treturn _this._promise = new Promise(function (resolve, reject) {\n\t\t\tconst _pact = _this._pact;\n\t\t\tif (_pact === null) {\n\t\t\t\tif (_this._entry === null) {\n\t\t\t\t\t// Generator is started, but not awaiting a yield expression\n\t\t\t\t\t// Abandon the throw call!\n\t\t\t\t\treturn resolve(_this._promise);\n\t\t\t\t}\n\t\t\t\t// Generator is not started, abandon it and return a rejected Promise containing the error\n\t\t\t\t_this._entry = null;\n\t\t\t\treturn reject(error);\n\t\t\t}\n\t\t\t// Settle the yield expression with the value as a rejection\n\t\t\t_this._resolve = resolve;\n\t\t\t_this._pact = null;\n\t\t\t_settle(_pact, 2, error);\n\t\t});\n\t};\n\n\t_AsyncGenerator.prototype[_asyncIteratorSymbol] = function() {\n\t\treturn this;\n\t};\n\t\n\treturn _AsyncGenerator;\n})();\n","import React, { useEffect, useState, useRef } from \"react\"\nimport styles from \"./styles.module.css\"\nimport \"@georapbox/resize-observer-element/dist/resize-observer-defined\"\nimport { CapturePhoto } from \"@georapbox/capture-photo-element\"\nimport { BarcodeFormat, BrowserMultiFormatReader } from \"@zxing/library\"\nimport \"barcode-detector\"\n\nCapturePhoto.defineCustomElement()\nconst formats = [\"ean_13\"]\nconst zxingReader = new BrowserMultiFormatReader()\nconst barcodeDetector = new window.BarcodeDetector({ formats })\n\nexport function EanScannerIos({ onResult }) {\n const capturePhotoEl = useRef(null)\n const zoomLevelEl = useRef(null)\n const zoomControls = useRef(null)\n const scanFrameContainer = useRef(null)\n const scanFrameEl = useRef(null)\n const defineScript = useRef(null)\n\n const [capturePhotoVideoEl, setCapturePhotoVideoEl] = useState(null)\n const [scanResult, setScanResult] = useState(null)\n const [prevScannedCode, setPrevScannedCode] = useState(Infinity)\n const [prevScannedTime, setPrevScannedTime] = useState(0)\n const [resetScanIndicator, setResetScanIndicator] = useState(0)\n const [rafId, setRafId] = useState(null)\n const [shouldRepeatScan, setShouldRepeatScan] = useState(true)\n\n useEffect(() => {\n if (!defineScript.current || !capturePhotoEl.current) return\n\n capturePhotoEl.current.addEventListener(\n \"capture-photo:video-play\",\n handleCameraPlay,\n { once: true }\n )\n capturePhotoEl.current.addEventListener(\n \"capture-photo:error\",\n handleCameraError,\n { once: true }\n )\n\n return () => {\n capturePhotoEl.current.removeEventListener(\n \"capture-photo:video-play\",\n handleCameraPlay\n )\n capturePhotoEl.current.removeEventListener(\n \"capture-photo:error\",\n handleCameraError\n )\n }\n }, [defineScript, capturePhotoEl])\n\n const handleCameraPlay = (evt) => {\n const newCapturePhotoVideoEl =\n capturePhotoEl.current.shadowRoot.querySelector(\"video\")\n setCapturePhotoVideoEl(newCapturePhotoVideoEl)\n resizeScanFrame(evt.detail.video)\n scan()\n\n zxingReader.decodeFromVideoDevice(\n 0,\n newCapturePhotoVideoEl,\n (result, err) => {\n if (result && result.format == BarcodeFormat.EAN_13) {\n setScanResult({ ean_code: result.text })\n }\n }\n )\n\n const trackSettings = capturePhotoEl.current.getTrackSettings()\n const trackCapabilities = capturePhotoEl.current.getTrackCapabilities()\n\n if (trackSettings?.zoom && trackCapabilities?.zoom) {\n const minZoom = trackCapabilities?.zoom?.min || 0\n const maxZoom = trackCapabilities?.zoom?.max || 10\n let currentZoom = trackSettings?.zoom || 1\n if (maxZoom >= 2) {\n currentZoom = 2\n }\n capturePhotoEl.current.zoom = currentZoom\n\n zoomControls.current.hidden = false\n zoomLevelEl.current.textContent = currentZoom\n\n zoomControls.current.addEventListener(\"click\", (evt) => {\n const zoomInBtn = evt.target.closest('[data-action=\"zoom-in\"]')\n const zoomOutBtn = evt.target.closest('[data-action=\"zoom-out\"]')\n\n if (zoomInBtn && currentZoom < maxZoom) {\n currentZoom += 0.5\n }\n\n if (zoomOutBtn && currentZoom > minZoom) {\n currentZoom -= 0.5\n }\n\n zoomLevelEl.current.textContent = currentZoom\n\n capturePhotoEl.current.zoom = currentZoom\n })\n }\n }\n\n const handleCameraError = (evt) => {\n const error = evt.detail.error\n\n if (error.name === \"NotFoundError\") {\n // If the browser cannot find all media tracks with the specified types that meet the constraints given.\n return\n }\n\n const errorMessage =\n error.name === \"NotAllowedError\"\n ? \"Permission to use webcam was denied or video Autoplay is disabled. Reload the page to give appropriate permissions to webcam.\"\n : error.message\n\n scanFrameContainer.current.innerHTML = /* html */ `${errorMessage}
`\n }\n\n const resizeScanFrame = (videoEl) => {\n if (!videoEl) {\n return\n }\n\n const rect = videoEl.getBoundingClientRect()\n\n scanFrameEl.current.style.cssText = `width: ${rect.width}px; height: ${rect.height}px`\n }\n\n async function scan() {\n try {\n let barcode = {}\n barcode = await detectBarcode(capturePhotoVideoEl)\n window.cancelAnimationFrame(rafId)\n\n setScanResult({ ean_code: barcode.rawValue })\n } catch (err) {\n // fail quietly\n }\n\n if (shouldRepeatScan) {\n setRafId(window.requestAnimationFrame(() => scan()))\n }\n }\n\n const detectBarcode = (source) => {\n return new Promise((resolve, reject) => {\n barcodeDetector\n .detect(source)\n .then((results) => {\n if (Array.isArray(results) && results.length > 0) {\n resolve(results[0])\n } else {\n reject({\n message: \"Could not detect barcode from provided source.\",\n })\n }\n })\n .catch((err) => {\n reject(err)\n })\n })\n }\n\n useEffect(() => {\n if (!shouldRepeatScan || !scanResult) {\n return\n }\n\n if (resetScanIndicator !== null) {\n window.clearTimeout(resetScanIndicator)\n setResetScanIndicator(null)\n }\n scanFrameEl.current.querySelector(\"path\").style.stroke = \"limegreen\"\n const newResetScanIndicator = window.setTimeout(() => {\n scanFrameEl.current.querySelector(\"path\").style.stroke = \"white\"\n }, 750)\n setResetScanIndicator(newResetScanIndicator)\n\n if (prevScannedCode !== scanResult.ean_code) {\n setPrevScannedCode(scanResult.ean_code)\n setPrevScannedTime(Date.now())\n return\n } else if (Date.now() - prevScannedTime <= 500) {\n return\n }\n setPrevScannedCode(Infinity)\n\n onResult(scanResult.ean_code)\n return\n }, [scanResult])\n\n return (\n \n
\n
\n \n \n \n \n \n Click to scan another barcode.\n \n\n \n \n \n \n \n \n Switch camera\n \n\n \n\n \n
\n \n\n \n\n \n \n \n \n \n\n
\n