Fixed issues (#282)

* switched to 2 letter country code, added flags * resolved unit test issue * removed VNM political view --------- Co-authored-by: Ahmad Azizi <[email protected]>
aws-geospatial · Nov 13, 2024 · b68869f · b68869f
1 parent f372845
commit b68869f
Show file tree

Hide file tree

Showing 29 changed files with 782 additions and 136 deletions.
diff --git a/src/atomicui/atoms/PoliticalViewDropdown/PoliticalViewDropdown.tsx b/src/atomicui/atoms/PoliticalViewDropdown/PoliticalViewDropdown.tsx
@@ -2,36 +2,36 @@ import { FC, useCallback, useEffect, useRef, useState } from "react";
 
 import { Flex, Text } from "@aws-amplify/ui-react";
 import { IconArrow } from "@demo/assets/svgs";
-import { SelectOption } from "@demo/types";
+import { appConfig } from "@demo/core/constants";
+import { useMap } from "@demo/hooks";
+import { getFlagEmoji } from "@demo/utils";
 import { useTranslation } from "react-i18next";
 import "./styles.scss";
+import { Tooltip } from "react-tooltip";
+
+const {
+	MAP_RESOURCES: { MAP_POLITICAL_VIEWS }
+} = appConfig;
 
 interface PoliticalViewDropdownProps {
-	defaultOption?: SelectOption | SelectOption[];
-	options: SelectOption[];
-	onSelect: (option: SelectOption) => void;
-	showSelected?: boolean;
 	bordered?: boolean;
 	arrowIconColor?: string;
-	label?: string;
 	width?: string;
 	disabled?: boolean;
 }
 
 const PoliticalViewDropdown: FC<PoliticalViewDropdownProps> = ({
-	defaultOption,
-	options,
-	onSelect,
-	showSelected = false,
 	bordered = false,
 	arrowIconColor,
-	label,
 	width = "100%",
 	disabled = false
 }) => {
 	const [open, setOpen] = useState(false);
 	const dropdownRef = useRef<HTMLDivElement>(null);
-	const { t } = useTranslation();
+	const { i18n, t } = useTranslation();
+	const langDir = i18n.dir();
+	const isLtr = langDir === "ltr";
+	const { mapPoliticalView, setMapPoliticalView } = useMap();
 
 	const handleClickOutside = (event: MouseEvent) => {
 		if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
@@ -48,25 +48,28 @@ const PoliticalViewDropdown: FC<PoliticalViewDropdownProps> = ({
 	}, []);
 
 	const handleClick = useCallback(
-		(option: { value: string; label: string }) => {
-			onSelect(option);
+		(option: { alpha2: string; alpha3: string; desc: string }) => {
+			setMapPoliticalView(option);
 			setOpen(false);
 		},
-		[onSelect]
+		[setMapPoliticalView]
 	);
 
 	return (
 		<div ref={dropdownRef} className="dropdown-container" style={{ width }}>
 			<div
-				data-testid="dropdown-trigger"
+				data-testid="dropdown-trigger-political-view"
 				style={{ cursor: disabled ? "not-allowed" : "pointer", backgroundColor: disabled ? "#ddd" : "" }}
 				className={bordered ? `trigger bordered dropdown-${open}` : "trigger"}
 				onClick={() => !disabled && setOpen(!open)}
+				data-tooltip-id="dropdown-trigger-political-view"
+				data-tooltip-place="top"
+				data-tooltip-content={t("political_view_satellite_disclaimer.text")}
 			>
-				<p data-testid="dropdown-label" className="dropdown-label">
-					{label?.split("-")[0] ||
-						t((defaultOption as SelectOption)?.label.split("-")[0] as string) ||
-						t("dropdown__placeholder.text")}
+				<p data-testid="dropdown-label" className="dropdown-label" dir={langDir}>
+					{!!mapPoliticalView.alpha3
+						? `${mapPoliticalView.alpha3}: ${t(mapPoliticalView.desc)}`
+						: t(mapPoliticalView.desc)}
 				</p>
 				<IconArrow
 					style={{
@@ -77,26 +80,45 @@ const PoliticalViewDropdown: FC<PoliticalViewDropdownProps> = ({
 					}}
 				/>
 			</div>
+			{disabled && <Tooltip id="dropdown-trigger-political-view" />}
 			{open && (
 				<ul data-testid="dropdown-options" className={bordered ? "options bordered" : "options"}>
-					{options.map(option => (
-						<li
-							data-testid={option.value}
-							key={option.value}
-							className={showSelected && (defaultOption as SelectOption)?.value === option.value ? "selected" : ""}
-							style={{ display: "flex", justifyContent: "start" }}
-							onClick={() => handleClick(option)}
-						>
-							<Flex gap={0} direction="column" padding="0.46rem 1.23rem">
-								<Text className="bold small-text" color="var(--tertiary-color)">
-									{t(option.label).split("-")[0]}
-								</Text>
-								<Text className="regular small-text" color="var(--grey-color-9)">
-									{t(option.label).split("-")[1]}
-								</Text>
-							</Flex>
-						</li>
-					))}
+					{MAP_POLITICAL_VIEWS.map(({ alpha2, alpha3, desc }) => {
+						return (
+							<li
+								data-testid={desc}
+								key={desc}
+								style={{ display: "flex", justifyContent: "start", direction: langDir }}
+								onClick={() => handleClick({ alpha2, alpha3, desc })}
+							>
+								<Flex gap={0} direction="column" padding="0.46rem 1.23rem">
+									{!!alpha2 && !!alpha3 ? (
+										<>
+											<Flex gap={0}>
+												<Flex gap={0} justifyContent="center" margin="0.07rem 0.3rem 0 0">
+													{getFlagEmoji(alpha2)}
+												</Flex>
+												<Text className="bold small-text" color="var(--tertiary-color)">
+													{alpha3}
+												</Text>
+											</Flex>
+											<Text
+												className="regular small-text"
+												color="var(--grey-color-9)"
+												textAlign={isLtr ? "left" : "right"}
+											>
+												{t(desc)}
+											</Text>
+										</>
+									) : (
+										<Text className="bold small-text" color="var(--tertiary-color)">
+											{t(desc)}
+										</Text>
+									)}
+								</Flex>
+							</li>
+						);
+					})}
 				</ul>
 			)}
 		</div>

diff --git a/src/atomicui/atoms/PoliticalViewDropdown/styles.scss b/src/atomicui/atoms/PoliticalViewDropdown/styles.scss
@@ -33,6 +33,7 @@
 				font-family: "AmazonEmber-Regular";
 				font-weight: 400;
 				font-size: 1.08rem;
+				width: 90%;
 			}
 		}
 
@@ -112,9 +113,5 @@
 				}
 			}
 		}
-
-		.selected {
-			background-color: rgba(0, 130, 150, 0.08);
-		}
 	}
 }
diff --git a/src/atomicui/molecules/MapButtons/MapButtons.test.tsx b/src/atomicui/molecules/MapButtons/MapButtons.test.tsx
@@ -46,7 +46,12 @@ const mockUseAuthData = {
 
 const mockUseMapData = {
 	mapStyle: MapStyleEnum.STANDARD,
-	setMapStyle: jest.fn()
+	setMapStyle: jest.fn(),
+	mapPoliticalView: {
+		alpha2: "",
+		alpha3: "",
+		desc: faker.random.word()
+	}
 };
 
 const mockUseGeofenceData = {

diff --git 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, ToggleSwitch } from "@demo/atomicui/atoms";
+import { 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";
@@ -25,12 +25,8 @@ import "./styles.scss";
 
 const { map_styles } = ResponsiveUIEnum;
 const {
-	MAP_RESOURCES: { MAP_STYLES, MAP_COLOR_SCHEMES, MAP_POLITICAL_VIEWS }
+	MAP_RESOURCES: { MAP_STYLES, MAP_COLOR_SCHEMES }
 } = appConfig;
-const mapPoliticalViewOptions = Object.entries(MAP_POLITICAL_VIEWS).map(([key, value]) => ({
-	value: key,
-	label: `${key}-${value}`
-}));
 
 export interface MapButtonsProps {
 	renderedUpon: string;
@@ -66,7 +62,6 @@ const MapButtons: FC<MapButtonsProps> = ({
 	isAuthGeofenceBoxOpen,
 	onSetShowAuthGeofenceBox,
 	isAuthTrackerBoxOpen,
-	isSettingsModal = false,
 	onSetShowAuthTrackerBox,
 	isUnauthGeofenceBoxOpen,
 	isUnauthTrackerBoxOpen,
@@ -77,13 +72,12 @@ const MapButtons: FC<MapButtonsProps> = ({
 	const stylesCardRef = useRef<HTMLDivElement | null>(null);
 	const stylesCardTogglerRef = useRef<HTMLDivElement | null>(null);
 	const { credentials, userProvidedValues } = useAuth();
-	const { mapStyle, setMapStyle, mapColorScheme, setMapColorScheme, mapPoliticalView, setMapPoliticalView } = useMap();
+	const { mapStyle, setMapStyle, mapColorScheme, setMapColorScheme, setMapPoliticalView } = useMap();
 	const { isAddingGeofence, setIsAddingGeofence } = useGeofence();
 	const isAuthenticated = !!credentials?.authenticated;
-	const { isTablet, isMobile, isDesktop } = useDeviceMediaQuery();
+	const { isMobile, isDesktop } = useDeviceMediaQuery();
 	const { t } = useTranslation();
 	const { ui } = useBottomSheet();
-	const settingsTablet = isTablet && isSettingsModal;
 	const { hideGeofenceTrackerShortcut } = useUnauthSimulation();
 
 	const isColorSchemeDisabled = useMemo(
@@ -159,7 +153,8 @@ const MapButtons: FC<MapButtonsProps> = ({
 		(id: string, style: MapStyleEnum) => {
 			if (mapStyle !== style) {
 				onShowGridLoader();
-				style === MapStyleEnum.SATELLITE && !!mapPoliticalView && setMapPoliticalView();
+				style === MapStyleEnum.SATELLITE &&
+					setMapPoliticalView({ alpha2: "", alpha3: "", desc: "no_political_view.text" });
 				setMapStyle(style);
 				record([
 					{
@@ -169,7 +164,7 @@ const MapButtons: FC<MapButtonsProps> = ({
 				]);
 			}
 		},
-		[mapPoliticalView, mapStyle, onShowGridLoader, renderedUpon, setMapPoliticalView, setMapStyle]
+		[mapStyle, onShowGridLoader, renderedUpon, setMapPoliticalView, setMapStyle]
 	);
 
 	const handleMapColorSchemeChange = useCallback(
@@ -193,14 +188,17 @@ const MapButtons: FC<MapButtonsProps> = ({
 			<Flex data-testid="map-styles-wrapper" className="map-styles-wrapper">
 				<Flex gap={0} width="100%" direction="column" marginBottom={isHandDevice ? "5rem" : "0"}>
 					<Flex data-testid="map-styles-container" gap={0} direction="column" className="maps-container">
-						<Flex gap={0} padding={onlyMapStyles ? "0 0 1.23rem" : "0 0.7rem 1.23rem 0.5rem"} wrap="wrap">
+						<Flex gap={0} padding="0 1rem 1.23rem 1rem" wrap="wrap" justifyContent="space-between">
 							{MAP_STYLES.map(({ id, name, image }) => (
 								<Flex
 									key={id}
-									width={settingsTablet ? "auto" : "33.33%"}
-									height="130px"
+									width="100%"
+									maxWidth="6.54rem"
+									height="100%"
+									maxHeight="8.08rem"
 									alignItems="center"
 									justifyContent="center"
+									marginTop="0.5rem"
 								>
 									<Flex
 										data-testid={`map-style-item-${name}`}
@@ -292,21 +290,8 @@ const MapButtons: FC<MapButtonsProps> = ({
 							</Flex>
 						</Flex>
 						<Flex gap={0} padding="2rem 1rem 0rem 1rem" direction="column">
-							<ToggleSwitch
-								isToggled={!!mapPoliticalView}
-								setIsToggled={isToggle => (isToggle ? setMapPoliticalView("ARG") : setMapPoliticalView())}
-								label="Political view"
-								disabled={mapStyle === MapStyleEnum.SATELLITE}
-							/>
 							<Flex gap={0} padding="1rem 0rem">
-								<PoliticalViewDropdown
-									label={!!mapPoliticalView ? mapPoliticalView : "Enable political view"}
-									options={mapPoliticalViewOptions}
-									onSelect={option => setMapPoliticalView(option.value)}
-									bordered
-									showSelected
-									disabled={!mapPoliticalView || mapStyle === MapStyleEnum.SATELLITE}
-								/>
+								<PoliticalViewDropdown bordered disabled={mapStyle === MapStyleEnum.SATELLITE} />
 							</Flex>
 						</Flex>
 					</Flex>
@@ -322,11 +307,8 @@ const MapButtons: FC<MapButtonsProps> = ({
 			isLoadingImg,
 			isMobile,
 			mapColorScheme,
-			mapPoliticalView,
 			mapStyle,
 			onlyMapStyles,
-			setMapPoliticalView,
-			settingsTablet,
 			t
 		]
 	);

diff --git a/src/atomicui/molecules/MapButtons/styles.scss b/src/atomicui/molecules/MapButtons/styles.scss
@@ -89,7 +89,7 @@
 }
 
 .amplify-card.map-styles-card {
-	width: 27.85rem;
+	width: 34.15rem;
 	position: absolute;
 	top: 1.54rem;
 	right: 5.38rem;
@@ -128,7 +128,6 @@
 	gap: 0;
 
 	.maps-container {
-		height: 35rem;
 		-webkit-overflow-scrolling: touch;
 	}
 
@@ -157,10 +156,10 @@
 
 		.map-image {
 			border-radius: 0.62rem;
-			min-width: 7.6rem;
-			max-height: 6.31rem;
-			width: 100%;
-			height: 100%;
+			min-width: 6.54rem;
+			max-width: 6.54rem;
+			min-height: 6.15rem;
+			max-height: 6.15rem;
 
 			&.only-map {
 				min-width: auto;

diff --git a/src/atomicui/organisms/SearchBox/SearchBox.tsx b/src/atomicui/organisms/SearchBox/SearchBox.tsx
@@ -461,16 +461,16 @@ const SearchBox: FC<SearchBoxProps> = ({
 		(e: FormEvent<HTMLFormElement>) => {
 			e.preventDefault();
 			handleSearch(value, true, AnalyticsEventActionsEnum.ENTER_BUTTON);
-			console.log({ options });
+
 			if (!!options?.length) {
-				// setTimeout(() => {
-				// 	setBottomSheetMinHeight(window.innerHeight * 0.4 - 10);
-				// 	setBottomSheetHeight(window.innerHeight * 0.4);
-				// }, 200);
-				// searchInputRef?.current?.blur();
+				setTimeout(() => {
+					setBottomSheetMinHeight(window.innerHeight * 0.4 - 10);
+					setBottomSheetHeight(window.innerHeight * 0.4);
+				}, 200);
+				searchInputRef?.current?.blur();
 			}
 		},
-		[handleSearch, options, value]
+		[handleSearch, options, setBottomSheetHeight, setBottomSheetMinHeight, value]
 	);
 
 	return (

diff --git a/src/atomicui/organisms/SettingsModal/SettingsModal.tsx b/src/atomicui/organisms/SettingsModal/SettingsModal.tsx
@@ -707,7 +707,8 @@ const SettingsModal: FC<SettingsModalProps> = ({ open, onClose, resetAppState, m
 	const modalCloseHandler = useCallback(() => {
 		!isMobile && setSettingsOptions(SettingOptionEnum.UNITS);
 		onClose();
-	}, [isMobile, setSettingsOptions, onClose]);
+		!isDesktop && window.location.reload();
+	}, [isMobile, setSettingsOptions, onClose, isDesktop]);
 
 	return (
 		<Modal

diff --git a/src/atomicui/pages/DemoPage/DemoPage.tsx b/src/atomicui/pages/DemoPage/DemoPage.tsx
@@ -386,7 +386,7 @@ const DemoPage: FC = () => {
 				}
 				mapStyle={`https://maps.geo.${apiKeyRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}${
 					!isColorSchemeDisabled ? `&color-scheme=${mapColorScheme}` : ""
-				}${!!mapPoliticalView ? `&political-view=${mapPoliticalView}` : ""}`}
+				}${!!mapPoliticalView?.alpha3 ? `&political-view=${mapPoliticalView.alpha3}` : ""}`}
 				minZoom={2}
 				maxBounds={
 					(show.unauthGeofenceBox || show.unauthTrackerBox) && show.unauthSimulationBounds