From 8b259657194d84c53656e597624ef575c57b6333 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 4 Dec 2024 15:34:19 -0600 Subject: [PATCH 1/2] Bump cross-spawn from 7.0.3 to 7.0.6 (#295) Bumps [cross-spawn](https://github.com/moxystudio/node-cross-spawn) from 7.0.3 to 7.0.6. - [Changelog](https://github.com/moxystudio/node-cross-spawn/blob/master/CHANGELOG.md) - [Commits](https://github.com/moxystudio/node-cross-spawn/compare/v7.0.3...v7.0.6) --- updated-dependencies: - dependency-name: cross-spawn dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index a5ae3119..882b73d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22137,9 +22137,9 @@ } }, "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, "license": "MIT", "dependencies": { From 1eb4e2406a4b67bbfe0c7d88f897148f1efd1dfc Mon Sep 17 00:00:00 2001 From: wadhawh <130486914+wadhawh@users.noreply.github.com> Date: Sat, 7 Dec 2024 01:28:05 +0530 Subject: [PATCH 2/2] [ALS-1910] Map languages dropdown (#293) * updated political view config to support new country codes, desctiption to be updated * hide political view flags for windows OS, fixed map language issue for Portuguese and Chinese * added isSupportedByPlaces flag to political view * added isSupportedByPlaces flag to political view * added map language dropdown * added labels for political views and map languages * fixes failing test issue --------- Co-authored-by: Ahmad Azizi <91204996+its-aazizi@users.noreply.github.com> --- .../MapLanguageDropdown.tsx | 99 +++++++++++++++ .../atoms/MapLanguageDropdown/index.ts | 1 + .../atoms/MapLanguageDropdown/styles.scss | 117 ++++++++++++++++++ .../PoliticalViewDropdown.tsx | 16 +-- src/atomicui/atoms/index.ts | 1 + .../molecules/MapButtons/MapButtons.test.tsx | 3 +- .../molecules/MapButtons/MapButtons.tsx | 21 ++-- src/core/constants/appConfig.ts | 103 ++++++++++++--- src/hooks/useMap.ts | 10 +- src/hooks/useMapManager.ts | 18 ++- src/locales/ar/ar.json | 6 + src/locales/de/de.json | 6 + src/locales/en/en.json | 6 + src/locales/es/es.json | 6 + src/locales/fr/fr.json | 6 + src/locales/he/he.json | 6 + src/locales/hi/hi.json | 6 + src/locales/it/it.json | 6 + src/locales/ja/ja.json | 6 + src/locales/ko/ko.json | 6 + src/locales/pt-BR/pt-BR.json | 6 + src/locales/zh-CN/zh-CN.json | 6 + src/locales/zh-TW/zh-TW.json | 6 + src/services/usePlaceService.ts | 15 ++- src/setupTests.ts | 103 ++++++++++++--- src/stores/useMapStore.ts | 9 +- src/utils/getUserAgent.ts | 21 +++- 27 files changed, 551 insertions(+), 64 deletions(-) create mode 100644 src/atomicui/atoms/MapLanguageDropdown/MapLanguageDropdown.tsx create mode 100644 src/atomicui/atoms/MapLanguageDropdown/index.ts create mode 100644 src/atomicui/atoms/MapLanguageDropdown/styles.scss diff --git a/src/atomicui/atoms/MapLanguageDropdown/MapLanguageDropdown.tsx b/src/atomicui/atoms/MapLanguageDropdown/MapLanguageDropdown.tsx new file mode 100644 index 00000000..4a98176a --- /dev/null +++ b/src/atomicui/atoms/MapLanguageDropdown/MapLanguageDropdown.tsx @@ -0,0 +1,99 @@ +import { FC, useCallback, useEffect, useRef, useState } from "react"; + +import { Flex, Text } from "@aws-amplify/ui-react"; +import { IconArrow } from "@demo/assets/svgs"; +import { appConfig } from "@demo/core/constants"; +import { useMap } from "@demo/hooks"; +import { useTranslation } from "react-i18next"; +import "./styles.scss"; + +const { + MAP_RESOURCES: { MAP_LANGUAGES } +} = appConfig; + +interface MapLanguageDropdownProps { + bordered?: boolean; + arrowIconColor?: string; + width?: string; + disabled?: boolean; +} + +const MapLanguageDropdown: FC = ({ + bordered = false, + arrowIconColor, + width = "100%", + disabled = false +}) => { + const [open, setOpen] = useState(false); + const dropdownRef = useRef(null); + const { i18n, t } = useTranslation(); + const { mapLanguage, setMapLanguage } = useMap(); + const mapLanguageDir = i18n.dir(mapLanguage.value); + + const handleClickOutside = (event: MouseEvent) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { + setOpen(false); + } + }; + + useEffect(() => { + document.addEventListener("mousedown", handleClickOutside); + + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + const handleClick = useCallback( + (option: { value: string; label: string }) => { + setMapLanguage(option); + setOpen(false); + }, + [setMapLanguage] + ); + + return ( +
+
!disabled && setOpen(!open)} + > +

+ {mapLanguage.label} +

+ +
+ {open && ( +
    + {MAP_LANGUAGES.map(({ value, label }) => { + return ( +
  • handleClick({ value, label })} + > + + + {t(label)} + + +
    • + ); + })} +
+ )} +
+ ); +}; + +export default MapLanguageDropdown; diff --git a/src/atomicui/atoms/MapLanguageDropdown/index.ts b/src/atomicui/atoms/MapLanguageDropdown/index.ts new file mode 100644 index 00000000..465cc03e --- /dev/null +++ b/src/atomicui/atoms/MapLanguageDropdown/index.ts @@ -0,0 +1 @@ +export { default as MapLanguageDropdown } from "./MapLanguageDropdown"; diff --git a/src/atomicui/atoms/MapLanguageDropdown/styles.scss b/src/atomicui/atoms/MapLanguageDropdown/styles.scss new file mode 100644 index 00000000..9bd5ed4d --- /dev/null +++ b/src/atomicui/atoms/MapLanguageDropdown/styles.scss @@ -0,0 +1,117 @@ +/* Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. */ +/* SPDX-License-Identifier: MIT-0 */ + +.dropdown-container { + position: relative; + display: inline-block; + + .trigger { + display: flex; + justify-content: center; + align-items: center; + max-width: 18.15rem; + height: 2.46rem; + outline: none; + cursor: pointer; + background-color: transparent; + padding: 0.62rem 1rem; + + @media only screen and (max-width: 1023px) { + max-width: unset; + } + + &.bordered { + padding: 12px 16px; + min-width: 100%; + border: 1px solid var(--grey-color-3); + border-radius: 7px; + height: 40px; + justify-content: space-between; + + .dropdown-label { + color: var(--grey-color); + font-family: "AmazonEmber-Regular"; + font-weight: 400; + font-size: 1.08rem; + width: 90%; + } + } + + &.bordered.dropdown-true { + border-color: var(--primary-color); + } + + &.bordered.dropdown-false { + background-color: var(--grey-color-4); + border: 1px solid var(--grey-color-3); + + p { + color: var(--tertiary-color); + } + } + + p { + font-family: "AmazonEmber-Bold"; + font-size: 1.08rem; + color: var(--primary-color); + margin-right: 0.5rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + + .options { + position: absolute; + right: 0; + display: flex; + flex-direction: column; + width: 21.5rem; + height: 16rem; + overflow: auto; + list-style: none; + background-color: var(--white-color); + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.202633); + border-radius: 0.62rem; + margin-top: 0.62rem; + padding: 0; + z-index: 1; + + @media only screen and (max-width: 562px) { + width: 12rem; + left: -10%; + } + + &.bordered { + left: 0; + height: auto; + width: 100%; + border-radius: 4px; + max-height: calc(100vh - 40rem); + box-shadow: none; + border: 1px solid var(--grey-color-5); + + li { + padding: 0; + + &:hover { + background-color: var(--primary-alpha-light-color); + } + } + } + + li { + cursor: pointer; + padding: 8px 16px; + user-select: none; + + &:hover { + background-color: var(--primary-alpha-light-color); + + @media only screen and (min-width: 1023px) { + background-color: rgba(0, 130, 150, 0.08); + } + } + } + } +} diff --git a/src/atomicui/atoms/PoliticalViewDropdown/PoliticalViewDropdown.tsx b/src/atomicui/atoms/PoliticalViewDropdown/PoliticalViewDropdown.tsx index a5ed55d1..e38d54d2 100644 --- a/src/atomicui/atoms/PoliticalViewDropdown/PoliticalViewDropdown.tsx +++ b/src/atomicui/atoms/PoliticalViewDropdown/PoliticalViewDropdown.tsx @@ -4,7 +4,7 @@ import { Flex, Text } from "@aws-amplify/ui-react"; import { IconArrow } from "@demo/assets/svgs"; import { appConfig } from "@demo/core/constants"; import { useMap } from "@demo/hooks"; -import { getFlagEmoji } from "@demo/utils"; +import { getFlagEmoji, isUserDeviceIsWin } from "@demo/utils"; import { useTranslation } from "react-i18next"; import "./styles.scss"; import { Tooltip } from "react-tooltip"; @@ -48,7 +48,7 @@ const PoliticalViewDropdown: FC = ({ }, []); const handleClick = useCallback( - (option: { alpha2: string; alpha3: string; desc: string }) => { + (option: { alpha2: string; alpha3: string; desc: string; isSupportedByPlaces: boolean }) => { setMapPoliticalView(option); setOpen(false); }, @@ -83,21 +83,23 @@ const PoliticalViewDropdown: FC = ({ {disabled && } {open && (
    - {MAP_POLITICAL_VIEWS.map(({ alpha2, alpha3, desc }) => { + {MAP_POLITICAL_VIEWS.map(({ alpha2, alpha3, desc, isSupportedByPlaces }) => { return (
  • handleClick({ alpha2, alpha3, desc })} + onClick={() => handleClick({ alpha2, alpha3, desc, isSupportedByPlaces })} > {!!alpha2 && !!alpha3 ? ( <> - - {getFlagEmoji(alpha2)} - + {!isUserDeviceIsWin() && ( + + {getFlagEmoji(alpha2)} + + )} {alpha3} diff --git a/src/atomicui/atoms/index.ts b/src/atomicui/atoms/index.ts index 6ab868f5..1c70b228 100644 --- a/src/atomicui/atoms/index.ts +++ b/src/atomicui/atoms/index.ts @@ -11,3 +11,4 @@ export * from "./ExploreButton"; export * from "./NLSearchLoader"; export * from "./ToggleSwitch"; export * from "./PoliticalViewDropdown"; +export * from "./MapLanguageDropdown"; diff --git a/src/atomicui/molecules/MapButtons/MapButtons.test.tsx b/src/atomicui/molecules/MapButtons/MapButtons.test.tsx index 84681499..1851f206 100644 --- a/src/atomicui/molecules/MapButtons/MapButtons.test.tsx +++ b/src/atomicui/molecules/MapButtons/MapButtons.test.tsx @@ -51,7 +51,8 @@ const mockUseMapData = { alpha2: "", alpha3: "", desc: faker.random.word() - } + }, + mapLanguage: { value: "en", label: "English" } }; const mockUseGeofenceData = { diff --git a/src/atomicui/molecules/MapButtons/MapButtons.tsx b/src/atomicui/molecules/MapButtons/MapButtons.tsx index a52694fe..c2fc497e 100644 --- a/src/atomicui/molecules/MapButtons/MapButtons.tsx +++ b/src/atomicui/molecules/MapButtons/MapButtons.tsx @@ -5,7 +5,7 @@ import { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from "rea import { Card, Divider, Flex, Placeholder, Text } from "@aws-amplify/ui-react"; import { IconClose, IconDark, IconGeofencePlusSolid, IconLight, IconMapSolid, IconRadar } from "@demo/assets/svgs"; -import { PoliticalViewDropdown } from "@demo/atomicui/atoms"; +import { MapLanguageDropdown, PoliticalViewDropdown } from "@demo/atomicui/atoms"; import { appConfig } from "@demo/core/constants"; import { useAuth, useGeofence, useMap, useUnauthSimulation } from "@demo/hooks"; import useBottomSheet from "@demo/hooks/useBottomSheet"; @@ -154,7 +154,7 @@ const MapButtons: FC = ({ if (mapStyle !== style) { onShowGridLoader(); style === MapStyleEnum.SATELLITE && - setMapPoliticalView({ alpha2: "", alpha3: "", desc: "no_political_view.text" }); + setMapPoliticalView({ alpha2: "", alpha3: "", desc: "no_political_view.text", isSupportedByPlaces: false }); setMapStyle(style); record([ { @@ -230,7 +230,7 @@ const MapButtons: FC = ({ ))} - + = ({ ))} - - - - + + + {t("political_views.text")} + + + + + + {t("map_languages.text")} + + diff --git a/src/core/constants/appConfig.ts b/src/core/constants/appConfig.ts index b8481ccd..0ff2103b 100644 --- a/src/core/constants/appConfig.ts +++ b/src/core/constants/appConfig.ts @@ -121,20 +121,95 @@ const appConfig = { { id: MapColorSchemeEnum.DARK.toLowerCase(), name: MapColorSchemeEnum.DARK } ], MAP_POLITICAL_VIEWS: [ - { alpha2: "", alpha3: "", desc: "no_political_view.text" }, - { alpha2: "AR", alpha3: "ARG", desc: "argentina_political_view_desc.text" }, - { alpha2: "EG", alpha3: "EGY", desc: "egypt_political_view_desc.text" }, - { alpha2: "IN", alpha3: "IND", desc: "india_political_view_desc.text" }, - { alpha2: "KE", alpha3: "KEN", desc: "kenya_political_view_desc.text" }, - { alpha2: "MA", alpha3: "MAR", desc: "morocco_political_view_desc.text" }, - { alpha2: "RU", alpha3: "RUS", desc: "russia_political_view_desc.text" }, - { alpha2: "SD", alpha3: "SDN", desc: "sudan_political_view_desc.text" }, - { alpha2: "RS", alpha3: "SRB", desc: "serbia_political_view_desc.text" }, - { alpha2: "SR", alpha3: "SUR", desc: "suriname_political_view_desc.text" }, - { alpha2: "SY", alpha3: "SYR", desc: "syria_political_view_desc.text" }, - { alpha2: "TR", alpha3: "TUR", desc: "turkey_political_view_desc.text" }, - { alpha2: "TZ", alpha3: "TZA", desc: "tanzania_political_view_desc.text" }, - { alpha2: "UY", alpha3: "URY", desc: "uruguay_political_view_desc.text" } + { alpha2: "", alpha3: "", desc: "no_political_view.text", isSupportedByPlaces: false }, + { alpha2: "AR", alpha3: "ARG", desc: "argentina_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "EG", alpha3: "EGY", desc: "egypt_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "IN", alpha3: "IND", desc: "india_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "KE", alpha3: "KEN", desc: "kenya_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "MA", alpha3: "MAR", desc: "morocco_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "RU", alpha3: "RUS", desc: "russia_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "SD", alpha3: "SDN", desc: "sudan_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "RS", alpha3: "SRB", desc: "serbia_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "SR", alpha3: "SUR", desc: "suriname_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "SY", alpha3: "SYR", desc: "syria_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "TR", alpha3: "TUR", desc: "turkey_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "TZ", alpha3: "TZA", desc: "tanzania_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "UY", alpha3: "URY", desc: "uruguay_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "GE", alpha3: "GEO", desc: "georgia_political_view_desc.text", isSupportedByPlaces: false }, + { alpha2: "CY", alpha3: "CYP", desc: "cyprus_political_view_desc.text", isSupportedByPlaces: false }, + { alpha2: "PS", alpha3: "PSE", desc: "palestine_political_view_desc.text", isSupportedByPlaces: false }, + { alpha2: "GR", alpha3: "GRC", desc: "greece_political_view_desc.text", isSupportedByPlaces: false } + ], + MAP_LANGUAGES: [ + { value: "en", label: "English" }, // English + { value: "ar", label: "العربية" }, // Arabic + { value: "as", label: "অসমীয়া" }, // Assamese + { value: "az", label: "Azərbaycan dili" }, // Azerbaijani + { value: "be", label: "беларуская" }, // Belarusian + { value: "bg", label: "български" }, // Bulgarian + { value: "bn", label: "বাংলা" }, // Bengali + { value: "bs", label: "Bosanski" }, // Bosnian + { value: "ca", label: "Català" }, // Catalan + { value: "cs", label: "Čeština" }, // Czech + { value: "cy", label: "Cymraeg" }, // Welsh + { value: "da", label: "Dansk" }, // Danish + { value: "de", label: "Deutsch" }, // German + { value: "el", label: "Ελληνικά" }, // Greek + { value: "es", label: "Español" }, // Spanish + { value: "et", label: "Eesti" }, // Estonian + { value: "eu", label: "Euskara" }, // Basque + { value: "fi", label: "Suomi" }, // Finnish + { value: "fo", label: "Føroyskt" }, // Faroese + { value: "fr", label: "Français" }, // French + { value: "ga", label: "Gaeilge" }, // Irish + { value: "gl", label: "Galego" }, // Galician + { value: "gn", label: "Avañe'ẽ" }, // Guarani + { value: "gu", label: "ગુજરાતી" }, // Gujarati + { value: "he", label: "עברית" }, // Hebrew + { value: "hi", label: "हिन्दी" }, // Hindi + { value: "hr", label: "Hrvatski" }, // Croatian + { value: "hu", label: "Magyar" }, // Hungarian + { value: "hy", label: "Հայերեն" }, // Armenian + { value: "id", label: "Bahasa Indonesia" }, // Indonesian + { value: "is", label: "Íslenska" }, // Icelandic + { value: "it", label: "Italiano" }, // Italian + { value: "ja", label: "日本語" }, // Japanese + { value: "ka", label: "ქართული" }, // Georgian + { value: "kk", label: "Қазақша" }, // Kazakh + { value: "km", label: "ភាសាខ្មែរ" }, // Khmer + { value: "kn", label: "ಕನ್ನಡ" }, // Kannada + { value: "ko", label: "한국어" }, // Korean + { value: "ky", label: "Кыргызча" }, // Kyrgyz + { value: "lt", label: "Lietuvių" }, // Lithuanian + { value: "lv", label: "Latviešu" }, // Latvian + { value: "mk", label: "Македонски" }, // Macedonian + { value: "ml", label: "മലയാളം" }, // Malayalam + { value: "mr", label: "मराठी" }, // Marathi + { value: "ms", label: "Bahasa Melayu" }, // Malay + { value: "mt", label: "Malti" }, // Maltese + { value: "my", label: "မြန်မာ" }, // Burmese + { value: "nl", label: "Nederlands" }, // Dutch + { value: "no", label: "Norsk" }, // Norwegian + { value: "or", label: "ଓଡ଼ିଆ" }, // Odia + { value: "pa", label: "ਪੰਜਾਬੀ" }, // Punjabi + { value: "pl", label: "Polski" }, // Polish + { value: "pt", label: "Português" }, // Portuguese + { value: "ro", label: "Română" }, // Romanian + { value: "ru", label: "Русский" }, // Russian + { value: "sk", label: "Slovenčina" }, // Slovak + { value: "sl", label: "Slovenščina" }, // Slovenian + { value: "sq", label: "Shqip" }, // Albanian + { value: "sr", label: "Српски" }, // Serbian + { value: "sv", label: "Svenska" }, // Swedish + { value: "ta", label: "தமிழ்" }, // Tamil + { value: "te", label: "తెలుగు" }, // Telugu + { value: "th", label: "ไทย" }, // Thai + { value: "tr", label: "Türkçe" }, // Turkish + { value: "uk", label: "Українська" }, // Ukrainian + { value: "uz", label: "Oʻzbekcha" }, // Uzbek + { value: "vi", label: "Tiếng Việt" }, // Vietnamese + { value: "zh", label: "中文 (简体)" }, // Chinese (Simplified) + { value: "zh-Hant", label: "中文 (繁體)" } // Chinese (Traditional) ], GEOFENCE_COLLECTION: "location.aws.com.demo.geofences.GeofenceCollection", DEVICE_ID_WEB: "web_browser_device", diff --git a/src/hooks/useMap.ts b/src/hooks/useMap.ts index cec96c3a..7a84fe98 100644 --- a/src/hooks/useMap.ts +++ b/src/hooks/useMap.ts @@ -49,12 +49,20 @@ const useMap = () => { setMapColorScheme: (mapColorScheme: MapColorSchemeEnum) => { setState({ mapColorScheme }); }, - setMapPoliticalView: (mapPoliticalView: { alpha2: string; alpha3: string; desc: string }) => { + setMapPoliticalView: (mapPoliticalView: { + alpha2: string; + alpha3: string; + desc: string; + isSupportedByPlaces: boolean; + }) => { setState({ mapPoliticalView }); }, setBiasPosition: (biasPosition: number[]) => { setState({ biasPosition }); }, + setMapLanguage: (mapLanguage: { value: string; label: string }) => { + setState({ mapLanguage }); + }, resetStore() { setState({ currentLocationData: undefined diff --git a/src/hooks/useMapManager.ts b/src/hooks/useMapManager.ts index 89a9efc2..237c3d7f 100644 --- a/src/hooks/useMapManager.ts +++ b/src/hooks/useMapManager.ts @@ -50,14 +50,20 @@ const useMapManager = ({ const [mapStyleWithLanguageUrl, setMapStyleWithLanguageUrl] = useState(); const [gridLoader, setGridLoader] = useState(true); const { handleStackRegion, stackRegion, baseValues, apiKey } = useAuth(); - const { currentLocationData, setCurrentLocation, setViewpoint, mapStyle, mapColorScheme, mapPoliticalView } = - useMap(); + const { + currentLocationData, + setCurrentLocation, + setViewpoint, + mapStyle, + mapColorScheme, + mapPoliticalView, + mapLanguage + } = useMap(); const { setMarker, marker, selectedMarker, clearPoiList, setZoom, setSelectedMarker } = usePlace(); const { routeData, setRouteData, resetStore: resetRouteStore } = useRoute(); const { resetStore: resetGeofenceStore } = useGeofence(); const { isEditingRoute, trackerPoints, setTrackerPoints, resetStore: resetTrackerStore } = useTracker(); - const { t, i18n } = useTranslation(); - const language = i18n.language; + const { t } = useTranslation(); const fastestRegion = localStorage.getItem(FASTEST_REGION) ?? fallbackRegion; const defaultRegion = regionsData.find(option => option.value === fastestRegion) as { value: string; label: string }; const apiKeyRegion = useMemo( @@ -80,10 +86,10 @@ const useMapManager = ({ useEffect(() => { (async () => { - const styleWithLanguage = await getStyleWithPreferredLanguage(mapStyleUrl, language); + const styleWithLanguage = await getStyleWithPreferredLanguage(mapStyleUrl, mapLanguage.value); setMapStyleWithLanguageUrl(styleWithLanguage); })(); - }, [mapStyleUrl, language]); + }, [mapStyleUrl, mapLanguage]); const onLoad = useCallback(() => { clearPoiList(); diff --git a/src/locales/ar/ar.json b/src/locales/ar/ar.json index 24776c8d..e95265a4 100644 --- a/src/locales/ar/ar.json +++ b/src/locales/ar/ar.json @@ -3865,5 +3865,11 @@ }, "industry_overview": { "text": "نظرة عامة على الصناعة" + }, + "political_views": { + "text": "وجهات نظر سياسية" + }, + "map_languages": { + "text": "لغات الخريطة" } } \ No newline at end of file diff --git a/src/locales/de/de.json b/src/locales/de/de.json index 7d615acd..d98859bb 100644 --- a/src/locales/de/de.json +++ b/src/locales/de/de.json @@ -3865,5 +3865,11 @@ }, "industry_overview": { "text": "Überblick über die Branche" + }, + "political_views": { + "text": "Politische Ansichten" + }, + "map_languages": { + "text": "Sprachen der Karte" } } \ No newline at end of file diff --git a/src/locales/en/en.json b/src/locales/en/en.json index 3072c68b..753d493f 100644 --- a/src/locales/en/en.json +++ b/src/locales/en/en.json @@ -3865,5 +3865,11 @@ }, "industry_overview": { "text": "Industry overview" + }, + "political_views": { + "text": "Political Views" + }, + "map_languages": { + "text": "Map Languages" } } \ No newline at end of file diff --git a/src/locales/es/es.json b/src/locales/es/es.json index 8564b1ff..ac25d4be 100644 --- a/src/locales/es/es.json +++ b/src/locales/es/es.json @@ -3865,5 +3865,11 @@ }, "industry_overview": { "text": "Descripción general de la industria" + }, + "political_views": { + "text": "Puntos de vista políticos" + }, + "map_languages": { + "text": "Idiomas del mapa" } } \ No newline at end of file diff --git a/src/locales/fr/fr.json b/src/locales/fr/fr.json index 2a0b0d61..034a9745 100644 --- a/src/locales/fr/fr.json +++ b/src/locales/fr/fr.json @@ -3865,5 +3865,11 @@ }, "industry_overview": { "text": "Vue d'ensemble du secteur" + }, + "political_views": { + "text": "Opinions politiques" + }, + "map_languages": { + "text": "Langues de la carte" } } \ No newline at end of file diff --git a/src/locales/he/he.json b/src/locales/he/he.json index 92b88ad2..9602380f 100644 --- a/src/locales/he/he.json +++ b/src/locales/he/he.json @@ -3865,5 +3865,11 @@ }, "industry_overview": { "text": "סקירה כללית של התעשייה" + }, + "political_views": { + "text": "דעות פוליטיות" + }, + "map_languages": { + "text": "שפות מפה" } } \ No newline at end of file diff --git a/src/locales/hi/hi.json b/src/locales/hi/hi.json index bd050e9a..5c19bb05 100644 --- a/src/locales/hi/hi.json +++ b/src/locales/hi/hi.json @@ -3865,5 +3865,11 @@ }, "industry_overview": { "text": "उद्योग का अवलोकन" + }, + "political_views": { + "text": "राजनीतिक विचार" + }, + "map_languages": { + "text": "मानचित्र भाषाएं" } } \ No newline at end of file diff --git a/src/locales/it/it.json b/src/locales/it/it.json index 0fe94b21..26fbc735 100644 --- a/src/locales/it/it.json +++ b/src/locales/it/it.json @@ -3865,5 +3865,11 @@ }, "industry_overview": { "text": "Panoramica del settore" + }, + "political_views": { + "text": "Opinioni politiche" + }, + "map_languages": { + "text": "Lingue della mappa" } } \ No newline at end of file diff --git a/src/locales/ja/ja.json b/src/locales/ja/ja.json index a59de4cd..09d63c7b 100644 --- a/src/locales/ja/ja.json +++ b/src/locales/ja/ja.json @@ -3865,5 +3865,11 @@ }, "industry_overview": { "text": "業界概要" + }, + "political_views": { + "text": "政治的見解" + }, + "map_languages": { + "text": "マップ言語" } } \ No newline at end of file diff --git a/src/locales/ko/ko.json b/src/locales/ko/ko.json index 83372c56..ed59a5ab 100644 --- a/src/locales/ko/ko.json +++ b/src/locales/ko/ko.json @@ -3865,5 +3865,11 @@ }, "industry_overview": { "text": "업계 개요" + }, + "political_views": { + "text": "정치적 견해" + }, + "map_languages": { + "text": "맵 언어" } } \ No newline at end of file diff --git a/src/locales/pt-BR/pt-BR.json b/src/locales/pt-BR/pt-BR.json index d1c2f2ad..28c1a5a6 100644 --- a/src/locales/pt-BR/pt-BR.json +++ b/src/locales/pt-BR/pt-BR.json @@ -3865,5 +3865,11 @@ }, "industry_overview": { "text": "Visão geral do setor" + }, + "political_views": { + "text": "Visões políticas" + }, + "map_languages": { + "text": "Idiomas do mapa" } } \ No newline at end of file diff --git a/src/locales/zh-CN/zh-CN.json b/src/locales/zh-CN/zh-CN.json index 65f00536..09f56af4 100644 --- a/src/locales/zh-CN/zh-CN.json +++ b/src/locales/zh-CN/zh-CN.json @@ -3861,5 +3861,11 @@ }, "industry_overview": { "text": "行业概述" + }, + "political_views": { + "text": "政治观点" + }, + "map_languages": { + "text": "地图语言" } } \ No newline at end of file diff --git a/src/locales/zh-TW/zh-TW.json b/src/locales/zh-TW/zh-TW.json index 991d1a71..1a495a6f 100644 --- a/src/locales/zh-TW/zh-TW.json +++ b/src/locales/zh-TW/zh-TW.json @@ -3865,5 +3865,11 @@ }, "industry_overview": { "text": "產業概述" + }, + "political_views": { + "text": "政治觀點" + }, + "map_languages": { + "text": "地圖語言" } } \ No newline at end of file diff --git a/src/services/usePlaceService.ts b/src/services/usePlaceService.ts index 70b3bd56..14cb41bf 100644 --- a/src/services/usePlaceService.ts +++ b/src/services/usePlaceService.ts @@ -23,7 +23,10 @@ const { const usePlaceService = () => { const { placesClient } = useClient(); - const { mapPoliticalView, biasPosition: BiasPosition } = useMap(); + const { + mapPoliticalView: { alpha3, isSupportedByPlaces }, + biasPosition: BiasPosition + } = useMap(); const { i18n } = useTranslation(); const Language = i18n.language; @@ -35,7 +38,7 @@ const usePlaceService = () => { BiasPosition, Language, AdditionalFeatures: ["Core"], - PoliticalView: mapPoliticalView.alpha3 || undefined + PoliticalView: isSupportedByPlaces ? alpha3 : undefined }; const command = new SuggestCommand(input); return await placesClient?.send(command); @@ -45,7 +48,7 @@ const usePlaceService = () => { PlaceId, Language, AdditionalFeatures: ["Contact"], - PoliticalView: mapPoliticalView.alpha3 || undefined + PoliticalView: isSupportedByPlaces ? alpha3 : undefined }; const command = new GetPlaceCommand(input); return await placesClient?.send(command); @@ -56,7 +59,7 @@ const usePlaceService = () => { QueryId: isQueryId ? QueryTextOrId : undefined, BiasPosition: isQueryId ? undefined : BiasPosition, Language: isQueryId ? undefined : Language, - PoliticalView: mapPoliticalView.alpha3 || undefined + PoliticalView: isSupportedByPlaces ? alpha3 : undefined }; const command = new SearchTextCommand(input); return await placesClient?.send(command); @@ -65,7 +68,7 @@ const usePlaceService = () => { const input: ReverseGeocodeCommandInput = { QueryPosition, Language, - PoliticalView: mapPoliticalView.alpha3 || undefined + PoliticalView: isSupportedByPlaces ? alpha3 : undefined }; const command = new ReverseGeocodeCommand(input); return await placesClient?.send(command); @@ -93,7 +96,7 @@ const usePlaceService = () => { return responseBody; } }), - [BiasPosition, Language, mapPoliticalView.alpha3, placesClient] + [BiasPosition, Language, alpha3, isSupportedByPlaces, placesClient] ); }; diff --git a/src/setupTests.ts b/src/setupTests.ts index 917e01fa..0d01003d 100644 --- a/src/setupTests.ts +++ b/src/setupTests.ts @@ -109,20 +109,95 @@ jest.mock("@demo/core/constants/appConfig", () => ({ { id: "dark", name: "Dark" } ], MAP_POLITICAL_VIEWS: [ - { alpha2: "", alpha3: "", desc: "no_political_view.text" }, - { alpha2: "AR", alpha3: "ARG", desc: "argentina_political_view_desc.text" }, - { alpha2: "EG", alpha3: "EGY", desc: "egypt_political_view_desc.text" }, - { alpha2: "IN", alpha3: "IND", desc: "india_political_view_desc.text" }, - { alpha2: "KE", alpha3: "KEN", desc: "kenya_political_view_desc.text" }, - { alpha2: "MA", alpha3: "MAR", desc: "morocco_political_view_desc.text" }, - { alpha2: "RU", alpha3: "RUS", desc: "russia_political_view_desc.text" }, - { alpha2: "SD", alpha3: "SDN", desc: "sudan_political_view_desc.text" }, - { alpha2: "RS", alpha3: "SRB", desc: "serbia_political_view_desc.text" }, - { alpha2: "SR", alpha3: "SUR", desc: "suriname_political_view_desc.text" }, - { alpha2: "SY", alpha3: "SYR", desc: "syria_political_view_desc.text" }, - { alpha2: "TR", alpha3: "TUR", desc: "turkey_political_view_desc.text" }, - { alpha2: "TZ", alpha3: "TZA", desc: "tanzania_political_view_desc.text" }, - { alpha2: "UY", alpha3: "URY", desc: "uruguay_political_view_desc.text" } + { alpha2: "", alpha3: "", desc: "no_political_view.text", isSupportedByPlaces: false }, + { alpha2: "AR", alpha3: "ARG", desc: "argentina_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "EG", alpha3: "EGY", desc: "egypt_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "IN", alpha3: "IND", desc: "india_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "KE", alpha3: "KEN", desc: "kenya_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "MA", alpha3: "MAR", desc: "morocco_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "RU", alpha3: "RUS", desc: "russia_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "SD", alpha3: "SDN", desc: "sudan_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "RS", alpha3: "SRB", desc: "serbia_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "SR", alpha3: "SUR", desc: "suriname_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "SY", alpha3: "SYR", desc: "syria_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "TR", alpha3: "TUR", desc: "turkey_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "TZ", alpha3: "TZA", desc: "tanzania_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "UY", alpha3: "URY", desc: "uruguay_political_view_desc.text", isSupportedByPlaces: true }, + { alpha2: "GE", alpha3: "GEO", desc: "georgia_political_view_desc.text", isSupportedByPlaces: false }, + { alpha2: "CY", alpha3: "CYP", desc: "cyprus_political_view_desc.text", isSupportedByPlaces: false }, + { alpha2: "PS", alpha3: "PSE", desc: "palestine_political_view_desc.text", isSupportedByPlaces: false }, + { alpha2: "GR", alpha3: "GRC", desc: "greece_political_view_desc.text", isSupportedByPlaces: false } + ], + MAP_LANGUAGES: [ + { value: "en", label: "English" }, // English + { value: "ar", label: "العربية" }, // Arabic + { value: "as", label: "অসমীয়া" }, // Assamese + { value: "az", label: "Azərbaycan dili" }, // Azerbaijani + { value: "be", label: "беларуская" }, // Belarusian + { value: "bg", label: "български" }, // Bulgarian + { value: "bn", label: "বাংলা" }, // Bengali + { value: "bs", label: "Bosanski" }, // Bosnian + { value: "ca", label: "Català" }, // Catalan + { value: "cs", label: "Čeština" }, // Czech + { value: "cy", label: "Cymraeg" }, // Welsh + { value: "da", label: "Dansk" }, // Danish + { value: "de", label: "Deutsch" }, // German + { value: "el", label: "Ελληνικά" }, // Greek + { value: "es", label: "Español" }, // Spanish + { value: "et", label: "Eesti" }, // Estonian + { value: "eu", label: "Euskara" }, // Basque + { value: "fi", label: "Suomi" }, // Finnish + { value: "fo", label: "Føroyskt" }, // Faroese + { value: "fr", label: "Français" }, // French + { value: "ga", label: "Gaeilge" }, // Irish + { value: "gl", label: "Galego" }, // Galician + { value: "gn", label: "Avañe'ẽ" }, // Guarani + { value: "gu", label: "ગુજરાતી" }, // Gujarati + { value: "he", label: "עברית" }, // Hebrew + { value: "hi", label: "हिन्दी" }, // Hindi + { value: "hr", label: "Hrvatski" }, // Croatian + { value: "hu", label: "Magyar" }, // Hungarian + { value: "hy", label: "Հայերեն" }, // Armenian + { value: "id", label: "Bahasa Indonesia" }, // Indonesian + { value: "is", label: "Íslenska" }, // Icelandic + { value: "it", label: "Italiano" }, // Italian + { value: "ja", label: "日本語" }, // Japanese + { value: "ka", label: "ქართული" }, // Georgian + { value: "kk", label: "Қазақша" }, // Kazakh + { value: "km", label: "ភាសាខ្មែរ" }, // Khmer + { value: "kn", label: "ಕನ್ನಡ" }, // Kannada + { value: "ko", label: "한국어" }, // Korean + { value: "ky", label: "Кыргызча" }, // Kyrgyz + { value: "lt", label: "Lietuvių" }, // Lithuanian + { value: "lv", label: "Latviešu" }, // Latvian + { value: "mk", label: "Македонски" }, // Macedonian + { value: "ml", label: "മലയാളം" }, // Malayalam + { value: "mr", label: "मराठी" }, // Marathi + { value: "ms", label: "Bahasa Melayu" }, // Malay + { value: "mt", label: "Malti" }, // Maltese + { value: "my", label: "မြန်မာ" }, // Burmese + { value: "nl", label: "Nederlands" }, // Dutch + { value: "no", label: "Norsk" }, // Norwegian + { value: "or", label: "ଓଡ଼ିଆ" }, // Odia + { value: "pa", label: "ਪੰਜਾਬੀ" }, // Punjabi + { value: "pl", label: "Polski" }, // Polish + { value: "pt", label: "Português" }, // Portuguese + { value: "ro", label: "Română" }, // Romanian + { value: "ru", label: "Русский" }, // Russian + { value: "sk", label: "Slovenčina" }, // Slovak + { value: "sl", label: "Slovenščina" }, // Slovenian + { value: "sq", label: "Shqip" }, // Albanian + { value: "sr", label: "Српски" }, // Serbian + { value: "sv", label: "Svenska" }, // Swedish + { value: "ta", label: "தமிழ்" }, // Tamil + { value: "te", label: "తెలుగు" }, // Telugu + { value: "th", label: "ไทย" }, // Thai + { value: "tr", label: "Türkçe" }, // Turkish + { value: "uk", label: "Українська" }, // Ukrainian + { value: "uz", label: "Oʻzbekcha" }, // Uzbek + { value: "vi", label: "Tiếng Việt" }, // Vietnamese + { value: "zh", label: "中文 (简体)" }, // Chinese (Simplified) + { value: "zh-Hant", label: "中文 (繁體)" } // Chinese (Traditional) ], GEOFENCE_COLLECTION: "location.aws.com.demo.geofences.GeofenceCollection", DEVICE_ID_WEB: "web_browser_device", diff --git a/src/stores/useMapStore.ts b/src/stores/useMapStore.ts index b9020091..fedbf2fd 100644 --- a/src/stores/useMapStore.ts +++ b/src/stores/useMapStore.ts @@ -31,8 +31,9 @@ interface MapStoreProps { mapUnit: MapUnitEnum; mapStyle: MapStyleEnum; mapColorScheme: MapColorSchemeEnum; - mapPoliticalView: { alpha2: string; alpha3: string; desc: string }; + mapPoliticalView: { alpha2: string; alpha3: string; desc: string; isSupportedByPlaces: boolean }; biasPosition: number[]; + mapLanguage: { value: string; label: string }; } const initialState: IStateProps = { @@ -47,9 +48,11 @@ const initialState: IStateProps = { mapPoliticalView: { alpha2: "", alpha3: "", - desc: "no_political_view.text" + desc: "no_political_view.text", + isSupportedByPlaces: false }, - biasPosition: [US.longitude, US.latitude] + biasPosition: [US.longitude, US.latitude], + mapLanguage: { value: "en", label: "English" } }; export default createStore(initialState, true, localStorageKey); diff --git a/src/utils/getUserAgent.ts b/src/utils/getUserAgent.ts index d02534c5..650e30d3 100644 --- a/src/utils/getUserAgent.ts +++ b/src/utils/getUserAgent.ts @@ -11,11 +11,22 @@ const iosCheck = /* iPad on iOS 13 detection */ (navigator.userAgent.includes("Mac") && "ontouchend" in document); -function isUserDeviceIsIOS() { +const isUserDeviceIsIOS = () => { return iosCheck && androidCheck === false ? IOS : undefined; -} -function isUserDeviceIsAndroid(): string | undefined { +}; + +const isUserDeviceIsAndroid = () => { return androidCheck && iosCheck === false ? ANDROID : undefined; -} +}; + +const isUserDeviceIsWin = (): boolean => { + const userAgentData = (navigator as Navigator & { userAgentData?: { platform: string } }).userAgentData; + + if (userAgentData) { + return userAgentData.platform.includes("Win"); + } + + return /Windows/.test(navigator.userAgent); +}; -export { isUserDeviceIsIOS, isUserDeviceIsAndroid }; +export { isUserDeviceIsIOS, isUserDeviceIsAndroid, isUserDeviceIsWin };