Feature als 1591 web responsive (#67)

* fixed the banner issue when user connected back once it is closed (#21) * fixed dynamic text issue on auto when toggling units * unauth simulation, analytics, localization, translation script and update default CF template * add footer in TriggeredByEnum and fix tests (#39) * localization fixes for terms page, auth geofence box * add pageViewDuration in LEAVE_PAGE event (#40) * Improve leave page event attr (#44) * fix pageViewDuration * add pageViewIdentifier to track actions per page view * placeholder for the loading state during the search operation. (#45) * merged lib approach * translated chinese in language dropdown * improve pageViewIdentifier storage (#46) * fixed text responsive issues with button (#42) * updated README * Dynamically Localize Number Formats for International User Support (#47) * fixed text & added new script to update translation (#48) * updated regex to support geofence name in multiple languages * Updated CF templates (#49) * Remove useRecordViewPage from DemoPlaceholderPage and amend page identifier key (#50) * Update main-cf-template.yaml * Update main-cf-template.yaml * fixes callback to show auth tracker box * removed log * Improve analytics (#51) * log session_end event and improve page identifiers storage * remove pageViewDuration * amend pageViewIdentifier * Add Open Data Maps to demo app (#52) * Addeede open data provider * completed adding open data provider * fixed attribute color issue with visualization dark mode * fixed build issues and updated name for translation script * Feat/change country approach (#53) * change the country fetching approach, also remove initiateAnalytics * add COUNTRY_EVALUATION_URL env variable * fix env variables * return undefined if the country code is Unknown getCountryCode * revert stopsession debouce time and remove logs * set default COUNTRY_EVALUATION_URL * unauth simulation fixes - removed geofence border, fixed animation, updated icons * Add the ability to dynamic evaluate and assign fastest region (#54) * change env variable for multiple identity pool ids (#56) * change env variable for multiple identity pool ids * fix useEffect error in useRecordViewPage * Fixed unauth simulation ui issues (#55) * fixed unauth simulation ui issues * removed unused import * fixed unauth tracking history left icon alignment * fixed notification icon size * Allowed duplicates geeofence notifications for unauth * fixed button hover for primary button * updated env and websocket urls approach * removed log * updated env * library format changed from es to cjs (#57) * Revert "library format changed from es to cjs (#57)" (#58) This reverts commit c4f2fa2. * updated language icon ins settings modal * added option in settings modal to select region * updated translations * add geofence notification case in cypress tests (#60) * fixed dot issue in arabic and hebrew, fixed the RTL issue with short distance unit (#61) * fixed dot issue in arabic and hebrew, fixed the rtl issue with short unit * fixed short units translation * fixed paused simulation issue when active the other routes & fixed spelling for trackers * improved the short distance unit ui * region and opendata ui fix * fixes for unauth simulation * Added kinesis resources & updated pinpoint event stream (#62) Co-authored-by: Harshit Wadhawan <[email protected]> * updated readme * updated readme * fixed translation issues (#63) * introduced react-spring-bottom-sheet * add unit test for Pinpoint Analytics (#64) * add security.txt (#65) * switched to npm and locked dep versions * added CSP to meta tag * implemented the Explore UI for mobile and tablet * added manifest-src to CSP meta tag * added manifest-src data to CSP meta tag * Update default-unauth-resources-template.yaml * updated readme * added fix for unauth creds expiry issue * Update default-unauth-resources-template.yaml * updated CSP * Improve enahnce analytics test (#68) * mock countryUtil.getCountryCode * add more failure test cases in PinpointAnalytics test * remove recording of search value in location search * removed CSP meta tag * updated default CF template * potential fix for multi notifications for unauth and auth simulations, reset map to default when region switched * udpated translations * completed map style responsive UI * updated E2E tests * added cory's feedback * updated e2e tests * fixed failing E2E tests * updated CSP * on going search box * fixed POI Card * fixed issues with direction * updated attribution setting logic * added hash to script-src * on going routes ui * [ALS-1636] geofence tooltip position update * search issue, udpated short unit notation * updated websocket URL logic * updated default CF template * [ALS-1643] render geofences on list view * ongoing routes * ongoing responsiveness task for tracker & geofence * tracker & geofence * built UI for tracker & geofence for tablet and mobile * fixed search issue * applied edit icon along with mobile icon for simulation * fixed close icon for geofence * fixed & complete settings & about UI for tablet and mobile * built routes/direction * improved experience * removed extra // onBlur={() => isBothInputFilled && onFocus(InputType.FROM, true)} * removed unsued import * fixed arrow up down issue with routes * Merge branch 'main' into feature_ALS-1591_web-responsive_main * fixed logo position * cleanup * hid the mapbutton, tracker and geofence on the map according to responsiveness need * cleanup * fixed closing of unath simulation * fixed type issues for build * [ALS-1591] updated state issue * fixed few issues with responsiveness * removed console.log * removed extra css * fixed scroll issue with search * map focus on routing fix * blank white space fix * changed mobile breakpoint to 430px * fixed map provider search param issue and current location issue * fixed sticky search bar and blank space issue * fixed poi card styling * fixed welcome modal, about modal * fixed scrolling issue * fixed close button issue with auth tracker * fixes for unauth simulation UI * changed explore min height * fixed ui issues with scrolling and padding * fixed few things * fixed route UI for mobile and tablet * fixed map styles UI issues along with closing issue on ios and updated a text * uncommented connect to aws click handler * fixed button active state on tablet and mobile * fixed button active state on tablet and mobile * fixed pull refresh issue * fixed pull refresh issue * fixed welcome modal UI, dropdown and connect AWS modal * removed extra css * fixed welcome modal UI and About modal UI * fixed auth simulation zoom and focus issues, added links to logo * fixed routes steps * fixed map styles opening * implemented arrow icons on bottom sheet header * fixed routes step * fixed vancouver bounds for tablet and mobile * fixed few issues * implemented scrollbar hidding and fixed attribute button styling * removed body overflow hidden * enabled route history for all devices * fixed logo issue * [ALS-1671] fixed space issue for numbers in french * removed log * updated failing tests * updated github workflow * updated failing tests * mocked reload * refined secrets * refined secrets * updated e2e test * updated workflow files * reverted workflow file changes * updated attributions and data provider search param * loggin env for all workflows * logging env for all workflows * removed log * logging env in workflow * reverted logging env in workflow * updated security-tests .env.example * responsive fixes * fixed few issues * fix height of auth tracker/geofence * cleanup * added close icon in bottom sheet header & fixed ui * fixed build failure * fixed closing issue on routes and poi card * cleanup * fixed minor issues * fixed placeholder glitch for mobile * cleanup * fixed minor issues raised in regression * fixed setting modal initial option issue * fixed replaceAll issue * fixed replaceAll issue * resolved build errors * updated toast implementation to be overlapping * fixed socket banner padding issue * fixed exit simulation modal, bottom sheet expanding issue with search, routes and map styles * removed comment * fixed scroll issue in bottom sheet, glitch issue with bottom sheet * fixes failing tests and updated map styles responsive logic * fixes failing tests and updated map styles responsive logic * unauth simulation exit modal fix * fixed map styles issues on tablet during unauth simulation, added and updated notifications for enter and exit events during unauth simulaiton * removed geofence and tracker shortcuts when unauth simulation enabled * implemented 40 percent height on bottom sheet * fixed search placeholder * fixed geofence and tracker shortcut functionality * fixed opening issue with routes and explore ui * updated fitbounds for route on mobile screen * fixed my location selection issue * minor fix * fixed poi card issue * removed background * resolved unauth simulation issue * fitbounds functionality update, and updated unit tests * removed log * poi card issue * fixed height issue on ipad * mapstyles search fix * fixed routes and search issues with height * fixed routes and search issues with height * unauth exit modal for mobile and tablet fix * updated simulation speed * fixed aws connect modal keyboard closing and routes issue * fixed route not found on poi card * hide GrabMaps when unauth simulation is open * fixed tootip greyed out issue * resolved region issue with connecting AWS account --------- Co-authored-by: Dabeer Raza <[email protected]> Co-authored-by: Ahmad Azizi <[email protected]> Co-authored-by: NihaalAftab-Makeen <[email protected]> Co-authored-by: harshit-makeen <[email protected]> Co-authored-by: Harshit Wadhawan <[email protected]> Co-authored-by: wadhawh <[email protected]>
aws-geospatial · Oct 18, 2023 · 41564f6 · 41564f6
1 parent 5f6f461
commit 41564f6
Show file tree

Hide file tree

Showing 17 changed files with 266 additions and 229 deletions.
diff --git a/src/atomicui/molecules/ConnectAwsAccountModal/ConnectAwsAccountModal.test.tsx b/src/atomicui/molecules/ConnectAwsAccountModal/ConnectAwsAccountModal.test.tsx
@@ -12,7 +12,7 @@ Object.defineProperty(window, "location", {
 	value: { reload: mockReload }
 });
 
-const props: ConnectAwsAccountModalProps = {
+const mockProps: ConnectAwsAccountModalProps = {
 	open: true,
 	onClose: jest.fn(),
 	handleCurrentLocationAndViewpoint: jest.fn()
@@ -25,7 +25,10 @@ const mockUseAmplifyAuthData = {
 	setIsUserAwsAccountConnected: jest.fn(),
 	clearCredentials: jest.fn(),
 	onLogin: jest.fn(),
-	validateFormValues: jest.fn()
+	validateFormValues: jest.fn(),
+	stackRegion: "ap-southeast-1",
+	cloudFormationLink: "https://link.com",
+	handleStackRegion: jest.fn()
 };
 
 const mockUseAmplifyMapData = {
@@ -57,7 +60,7 @@ describe("<ConnectAwsAccountModal />", () => {
 	const renderComponent = () =>
 		render(
 			<I18nextProvider i18n={i18n} defaultNS={"fr"}>
-				<ConnectAwsAccountModal {...props} />
+				<ConnectAwsAccountModal {...mockProps} />
 			</I18nextProvider>
 		);
 
@@ -121,7 +124,7 @@ describe("<ConnectAwsAccountModal />", () => {
 			fireEvent.click(getByTestId("continue-to-explore"));
 		});
 		waitFor(() => {
-			expect(props.onClose).toHaveBeenCalled();
+			expect(mockProps.onClose).toHaveBeenCalled();
 			expect(mockReload).toHaveBeenCalled();
 		});
 	});
@@ -135,7 +138,7 @@ describe("<ConnectAwsAccountModal />", () => {
 			fireEvent.click(getByTestId("sign-in-button"));
 		});
 		waitFor(() => {
-			expect(props.onClose).toHaveBeenCalled();
+			expect(mockProps.onClose).toHaveBeenCalled();
 			expect(mockUseAmplifyAuthData.onLogin).toHaveBeenCalled();
 		});
 	});
@@ -154,7 +157,7 @@ describe("<ConnectAwsAccountModal />", () => {
 			fireEvent.click(getByTestId("modal-container"));
 		});
 		waitFor(() => {
-			expect(props.onClose).toHaveBeenCalled();
+			expect(mockProps.onClose).toHaveBeenCalled();
 			expect(mockUseAmplifyAuthData.onLogin).toHaveBeenCalled();
 		});
 	});

diff --git a/src/atomicui/molecules/ConnectAwsAccountModal/ConnectAwsAccountModal.tsx b/src/atomicui/molecules/ConnectAwsAccountModal/ConnectAwsAccountModal.tsx
@@ -1,7 +1,7 @@
 /* Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. */
 /* SPDX-License-Identifier: MIT-0 */
 
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { Button, Flex, Link, Text, View } from "@aws-amplify/ui-react";
 import { IconAwsCloudFormation, IconCheckMarkCircle } from "@demo/assets";
@@ -13,17 +13,15 @@ import useDeviceMediaQuery from "@demo/hooks/useDeviceMediaQuery";
 import { ConnectFormValuesType, EsriMapEnum, MapProviderEnum } from "@demo/types";
 import { AnalyticsEventActionsEnum, EventTypeEnum, TriggeredByEnum } from "@demo/types/Enums";
 import { record } from "@demo/utils/analyticsUtils";
-import { transformCloudFormationLink } from "@demo/utils/transformCloudFormationLink";
+import { isAndroid, isIOS } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import "./styles.scss";
 
 const {
-	ENV: { CF_TEMPLATE },
 	ROUTES: { HELP },
 	MAP_RESOURCES: { GRAB_SUPPORTED_AWS_REGIONS },
 	LINKS: { AWS_TERMS_AND_CONDITIONS }
 } = appConfig;
-
 let scrollTimeout: NodeJS.Timer | undefined;
 
 export interface ConnectAwsAccountModalProps {
@@ -44,16 +42,16 @@ const ConnectAwsAccountModal: React.FC<ConnectAwsAccountModalProps> = ({
 		UserPoolId: "",
 		WebSocketUrl: ""
 	});
-	const [cloudFormationLink, setCloudFormationLink] = useState(CF_TEMPLATE);
-	const [stackRegion, setStackRegion] = useState<{ value: string; label: string }>();
 	const {
-		region,
 		isUserAwsAccountConnected,
 		setConnectFormValues,
 		setIsUserAwsAccountConnected,
 		clearCredentials,
 		onLogin,
-		validateFormValues
+		validateFormValues,
+		stackRegion,
+		cloudFormationLink,
+		handleStackRegion
 	} = useAmplifyAuth();
 	const { resetStore: resetAwsStore } = useAws();
 	const { mapProvider: currentMapProvider, setMapProvider, setMapStyle } = useAmplifyMap();
@@ -62,32 +60,30 @@ const ConnectAwsAccountModal: React.FC<ConnectAwsAccountModalProps> = ({
 	const langDir = i18n.dir();
 	const isLtr = langDir === "ltr";
 	const isOverflowing = ["de", "es", "fr", "it", "pt-BR"].includes(i18n.language);
-	const { isDesktop } = useDeviceMediaQuery();
-
-	const handleStackRegion = useCallback(
-		(option: { value: string; label: string }) => {
-			const { label, value } = option;
+	const { isDesktop, isDesktopBrowser } = useDeviceMediaQuery();
+	const contentRef = useRef<HTMLDivElement | null>(null);
 
-			if (isDesktop) {
-				setStackRegion(option);
-			} else {
-				const translatedLabel = t(label);
-				const l = translatedLabel.slice(0, translatedLabel.indexOf(")") + 1);
-				setStackRegion({ label: l, value });
+	const handleScroll = useCallback(() => {
+		if (contentRef.current) {
+			for (const key of Object.keys(formValues)) {
+				const inputField = document.querySelector(`input[name=${key}]`) as HTMLInputElement;
+				if (inputField) inputField.blur();
 			}
-		},
-		[isDesktop, t]
-	);
+		}
+	}, [formValues]);
 
 	useEffect(() => {
-		const regionOption = region && regionsData.find(option => option.value === region);
+		if (!isDesktop && (isAndroid || isIOS) && open) {
+			setTimeout(() => {
+				const currentContentRef = contentRef.current;
+				if (currentContentRef) currentContentRef.addEventListener("touchmove", handleScroll);
 
-		if (regionOption) {
-			const newUrl = transformCloudFormationLink(region);
-			setCloudFormationLink(newUrl);
-			handleStackRegion(regionOption);
+				return () => {
+					if (currentContentRef) currentContentRef.removeEventListener("touchmove", handleScroll);
+				};
+			}, 500);
 		}
-	}, [region, handleStackRegion]);
+	}, [handleScroll, isDesktop, isDesktopBrowser, contentRef, open]);
 
 	useEffect(() => {
 		if (isOverflowing) {
@@ -112,11 +108,12 @@ const ConnectAwsAccountModal: React.FC<ConnectAwsAccountModalProps> = ({
 		isUserAwsAccountConnected && window.location.reload();
 	};
 
-	const _onSelect = (option: { value: string; label: string }) => {
-		const newUrl = transformCloudFormationLink(option.value);
-		setCloudFormationLink(newUrl);
-		handleStackRegion(option);
-	};
+	const _onSelect = useCallback(
+		(option: { value: string; label: string }) => {
+			handleStackRegion(option);
+		},
+		[handleStackRegion]
+	);
 
 	const isBtnEnabled = useMemo(
 		() => keyArr.filter(key => !!formValues[key as keyof typeof formValues]).length === keyArr.length,
@@ -198,7 +195,7 @@ const ConnectAwsAccountModal: React.FC<ConnectAwsAccountModalProps> = ({
 			onClose={handleModalClose}
 			className="connect-aws-account-modal"
 			content={
-				<Flex className="content-container">
+				<Flex className="content-container" ref={contentRef}>
 					<Flex
 						className="left-col"
 						style={
@@ -371,6 +368,7 @@ const ConnectAwsAccountModal: React.FC<ConnectAwsAccountModalProps> = ({
 											value={formValues[key as keyof ConnectFormValuesType]}
 											onChange={e => onChangeFormValues(key, e.target.value.trim())}
 											dir={langDir}
+											name={key}
 										/>
 									);
 								})}

diff --git a/src/atomicui/molecules/GrabConfirmationModal/GrabConfirmationModal.test.tsx b/src/atomicui/molecules/GrabConfirmationModal/GrabConfirmationModal.test.tsx
@@ -4,18 +4,17 @@ import { I18nextProvider } from "react-i18next";
 
 import GrabConfirmationModal from "./GrabConfirmationModal";
 
-describe("GrabConfirmationModal", () => {
-	const props = {
-		open: true,
-		onClose: jest.fn(),
-		onConfirm: jest.fn(),
-		isUnauthSimulationOpen: false
-	};
+const mockProps = {
+	open: true,
+	onClose: jest.fn(),
+	onConfirm: jest.fn()
+};
 
+describe("GrabConfirmationModal", () => {
 	const renderComponent = () => {
 		return render(
 			<I18nextProvider i18n={i18n}>
-				<GrabConfirmationModal {...props} />
+				<GrabConfirmationModal {...mockProps} />
 			</I18nextProvider>
 		);
 	};
@@ -28,12 +27,12 @@ describe("GrabConfirmationModal", () => {
 	it("triggers onClose when Cancel button is clicked", () => {
 		const { getByText } = renderComponent();
 		fireEvent.click(getByText("Cancel"));
-		expect(props.onClose).toHaveBeenCalled();
+		expect(mockProps.onClose).toHaveBeenCalled();
 	});
 
 	it("triggers onConfirm when Enable Grab button is clicked", () => {
 		const { getByTestId } = renderComponent();
 		fireEvent.click(getByTestId("confirmation-button"));
-		expect(props.onConfirm).toHaveBeenCalled();
+		expect(mockProps.onConfirm).toHaveBeenCalled();
 	});
 });
diff --git a/src/atomicui/molecules/GrabConfirmationModal/GrabConfirmationModal.tsx b/src/atomicui/molecules/GrabConfirmationModal/GrabConfirmationModal.tsx
@@ -19,22 +19,20 @@ interface GrabConfirmationModalProps {
 	onConfirm: () => void;
 	showDoNotAskAgainCheckbox?: boolean;
 	onConfirmationCheckboxOnChange?: (e: boolean) => void;
-	isUnauthSimulationOpen: boolean;
 }
 
 const GrabConfirmationModal: React.FC<GrabConfirmationModalProps> = ({
 	open,
 	onClose,
 	onConfirm,
 	showDoNotAskAgainCheckbox,
-	onConfirmationCheckboxOnChange,
-	isUnauthSimulationOpen
+	onConfirmationCheckboxOnChange
 }) => {
 	const { t } = useTranslation();
 
 	return (
 		<ConfirmationModal
-			className={`grab-confirmation-modal ${isUnauthSimulationOpen ? "increased-max-height" : ""}`}
+			className={"grab-confirmation-modal"}
 			open={open}
 			onClose={onClose}
 			heading={t("grab_cm__heading.text") as string}
@@ -49,17 +47,6 @@ const GrabConfirmationModal: React.FC<GrabConfirmationModalProps> = ({
 					>
 						{t("grab_cm__desc.text")}
 					</Text>
-					{isUnauthSimulationOpen && (
-						<Text
-							className="small-text bold"
-							variation="tertiary"
-							marginTop="1.23rem"
-							textAlign="center"
-							whiteSpace="pre-line"
-						>
-							{t("grab_cm__unauth_simulaiton.text")}
-						</Text>
-					)}
 				</>
 			}
 			onConfirm={onConfirm}

diff --git a/src/atomicui/molecules/InputField/InputField.tsx b/src/atomicui/molecules/InputField/InputField.tsx
@@ -23,6 +23,7 @@ interface InputFieldProps {
 	onBlur?: FocusEventHandler<HTMLInputElement>;
 	onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
 	searchInputRef?: React.RefObject<HTMLInputElement>;
+	name?: string;
 }
 
 const InputField: React.FC<InputFieldProps> = ({
@@ -41,7 +42,8 @@ const InputField: React.FC<InputFieldProps> = ({
 	onBlur,
 	innerStartComponent,
 	searchInputRef,
-	onKeyDown
+	onKeyDown,
+	name
 }) => {
 	return (
 		<Flex gap={0} direction="column" width="100%" margin={containerMargin}>
@@ -65,6 +67,7 @@ const InputField: React.FC<InputFieldProps> = ({
 					onFocus={onFocus}
 					onBlur={onBlur}
 					onKeyDown={onKeyDown}
+					name={name}
 				/>
 				{innerEndComponent}
 			</Flex>

diff --git a/src/atomicui/molecules/MapButtons/MapButtons.tsx b/src/atomicui/molecules/MapButtons/MapButtons.tsx
@@ -470,7 +470,6 @@ const MapButtons: React.FC<MapButtonsProps> = ({
 							value={searchValue}
 							onChange={e => setSearchValue(e.target.value)}
 							onClick={() => {
-								console.log("clicked");
 								isHandDevice && setSearchWidth(searchDesktopWidth);
 								!!showFilter && setShowFilter(false);
 

diff --git a/src/atomicui/molecules/Popup/Popup.tsx b/src/atomicui/molecules/Popup/Popup.tsx
@@ -51,6 +51,7 @@ const Popup: React.FC<Props> = ({ active, info, select, onClosePopUp, setInfo })
 	const isLtr = langDir === "ltr";
 	const isLanguageRTL = ["ar", "he"].includes(currentLang);
 	const POICardRef = useRef<HTMLDivElement>(null);
+	const [isLoading, setIsLoading] = useState(true);
 
 	const geodesicDistance = useMemo(
 		() =>
@@ -102,8 +103,13 @@ const Popup: React.FC<Props> = ({ active, info, select, onClosePopUp, setInfo })
 			DistanceUnit: currentMapUnit === METRIC ? KILOMETERS : MILES,
 			TravelMode: TravelMode.CAR
 		};
-		const r = await getRoute(params as CalculateRouteRequest, TriggeredByEnum.PLACES_POPUP);
-		setRouteData(r);
+		try {
+			setIsLoading(true);
+			const r = await getRoute(params as CalculateRouteRequest, TriggeredByEnum.PLACES_POPUP);
+			setRouteData(r);
+		} finally {
+			setIsLoading(false);
+		}
 	}, [currentLocationData, longitude, latitude, currentMapUnit, getRoute]);
 
 	useEffect(() => {
@@ -175,15 +181,19 @@ const Popup: React.FC<Props> = ({ active, info, select, onClosePopUp, setInfo })
 			return (
 				<Flex data-testid="here-message-container" gap={0} direction={"column"}>
 					<Flex className="localize-geofence-distance" gap="0.3rem" direction={isLanguageRTL ? "row-reverse" : "row"}>
-						<Text className="bold" variation="secondary" marginRight="0.3rem">
-							{localizeGeodesicDistance}
-						</Text>
-						<Text className="bold" variation="secondary">
-							{geodesicDistanceUnit}
-						</Text>
+						{!isLoading && (
+							<>
+								<Text className="bold" variation="secondary" marginRight="0.3rem">
+									{localizeGeodesicDistance}
+								</Text>
+								<Text className="bold" variation="secondary">
+									{geodesicDistanceUnit}
+								</Text>
+							</>
+						)}
 					</Flex>
 					<Text style={{ marginTop: "0px" }} variation="info">
-						{t("popup__route_not_found.text")}
+						{!isLoading && t("popup__route_not_found.text")}
 					</Text>
 				</Flex>
 			);
@@ -224,11 +234,12 @@ const Popup: React.FC<Props> = ({ active, info, select, onClosePopUp, setInfo })
 		routeData,
 		isLtr,
 		t,
+		isLanguageRTL,
 		localizeGeodesicDistance,
 		geodesicDistanceUnit,
 		currentMapUnit,
-		currentLang,
-		isLanguageRTL
+		isLoading,
+		currentLang
 	]);
 
 	const address = useMemo(() => {
@@ -310,7 +321,7 @@ const Popup: React.FC<Props> = ({ active, info, select, onClosePopUp, setInfo })
 
 	useEffect(() => {
 		if (!isDesktop) {
-			const ch = POICardRef?.current?.clientHeight || 230;
+			const ch = POICardRef?.current?.clientHeight || 140;
 			ui !== ResponsiveUIEnum.poi_card && setUI(ResponsiveUIEnum.poi_card);
 			setPOICard(<POIBody />);
 			setBottomSheetMinHeight(ch + 60);