diff --git a/src/atomicui/organisms/ResponsiveBottomSheet/ResponsiveBottomSheet.tsx b/src/atomicui/organisms/ResponsiveBottomSheet/ResponsiveBottomSheet.tsx index 25a60011..f79ab9c7 100644 --- a/src/atomicui/organisms/ResponsiveBottomSheet/ResponsiveBottomSheet.tsx +++ b/src/atomicui/organisms/ResponsiveBottomSheet/ResponsiveBottomSheet.tsx @@ -17,6 +17,7 @@ import { import { Flex, Loader, Text } from "@aws-amplify/ui-react"; import { IconClose, IconNotificationBell } from "@demo/assets/svgs"; +import { ConfirmationModal } from "@demo/atomicui/molecules"; import appConfig from "@demo/core/constants/appConfig"; import BottomSheetHeights from "@demo/core/constants/bottomSheetHeights"; import { useGeofence, useMap, usePersistedData, useRoute, useTracker } from "@demo/hooks"; @@ -37,9 +38,6 @@ const Explore = lazy(() => import("../Explore").then(module => ({ default: modul const UnauthSimulation = lazy(() => import("../UnauthSimulation").then(module => ({ default: module.UnauthSimulation })) ); -const ConfirmationModal = lazy(() => - import("@demo/atomicui/molecules/ConfirmationModal").then(module => ({ default: module.ConfirmationModal })) -); const { ROUTES: { DEMO } diff --git a/src/atomicui/pages/DemoPage/DemoPage.tsx b/src/atomicui/pages/DemoPage/DemoPage.tsx index 5dd14180..c8ecf2d1 100644 --- a/src/atomicui/pages/DemoPage/DemoPage.tsx +++ b/src/atomicui/pages/DemoPage/DemoPage.tsx @@ -137,7 +137,8 @@ const UnauthSimulationExitModal = lazy(() => const { MAP_RESOURCES: { MAX_BOUNDS }, - LINKS: { AMAZON_LOCATION_TERMS_AND_CONDITIONS, AWS_LOCATION } + LINKS: { AMAZON_LOCATION_TERMS_AND_CONDITIONS, AWS_LOCATION }, + ROUTES: { DEMO } } = appConfig; const initShow = { sidebar: false, @@ -192,7 +193,7 @@ const DemoPage: FC = () => { const { resetStore: resetGeofenceStore } = useGeofence(); const { isEditingRoute, resetStore: resetTrackerStore } = useTracker(); const { showWelcomeModal, setShowWelcomeModal, setSettingsOptions } = usePersistedData(); - const { isDesktop, isMobile, isTablet } = useDeviceMediaQuery(); + const { isDesktop, isMobile, isTablet, isMax766 } = useDeviceMediaQuery(); const { setUI, ui, bottomSheetCurrentHeight = 0, setBottomSheetHeight, setBottomSheetMinHeight } = useBottomSheet(); const { clearCredsAndClients } = useCredsManager(); const { @@ -237,6 +238,21 @@ const DemoPage: FC = () => { const isLtr = langDir === "ltr"; const geoLocateTopValue = `${bottomSheetCurrentHeight / 13 + 0.59}rem`; + const handlePopState = () => { + if (isMax766 && window.location.pathname === DEMO) { + history.go(); + } + }; + + useEffect(() => { + window.addEventListener("popstate", handlePopState); + + return () => { + window.removeEventListener("popstate", handlePopState); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + useEffect(() => { let previousWidth = document.body.clientWidth;