[ALS-1839] Route avoidance options

cypress/support/routeSupport.js

@@ -37,7 +37,7 @@ Cypress.Commands.add("searchRouteWithAvoidTollOption", isResponsive => {
 	cy.wait(2000);
 	cy.get('[placeholder="To"]').click().type("manly beach sydney", { delay: 200 });
 	cy.contains("Beach").click({ force: true });
-	isResponsive ? cy.get('[data-testid="more-action-icon-container"]').click() : cy.contains("Route Options").click();
+	isResponsive ? cy.get('[data-testid="more-action-icon-container"]').click() : cy.get('[data-testid="route-avoidance-dropdown"]').click();
 	cy.contains("Avoid tolls").click();
 	isResponsive
 		? cy.get('[data-testid="bottomsheet-header-close-icon"]').click()
@@ -50,7 +50,7 @@ Cypress.Commands.add("searchRouteWithAvoidFerryOption", isResponsive => {
 	cy.wait(2000);
 	cy.get('[placeholder="To"]').click().type("port said", { delay: 200 });
 	cy.contains("Port Said").click();
-	isResponsive ? cy.get('[data-testid="more-action-icon-container"]').click() : cy.contains("Route Options").click();
+	isResponsive ? cy.get('[data-testid="more-action-icon-container"]').click() : cy.get('[data-testid="route-avoidance-dropdown"]').click();
 	cy.contains("Avoid ferries").click();
 	isResponsive
 		? cy.get('[data-testid="bottomsheet-header-close-icon"]').click()

cypress/support/trackerAndGeofenceSupport.js

@@ -52,13 +52,14 @@ Cypress.Commands.add("addTrackerAndGeofenceEnterExit", (isResponsive, geofenceNa
 		: cy.get('[class="maplibregl-canvas"]').click("right", { force: true });
 	cy.wait(5000);
 	cy.get('[class="maplibregl-canvas"]').click("right", { force: true });
+	if (isResponsive) {
+		cy.wait(5000);
+		cy.get('[class="maplibregl-canvas"]').click(200, 200, { force: true });
+	}
 	cy.wait(5000);
 	cy.contains("Save").click();
 	cy.wait(5000);
 	cy.get('[class="amplify-button amplify-field-group__control amplify-button--primary play-pause-button"]').click();
-	if (isResponsive) {
-		cy.wait(5000);
-	}
 	cy.get(
 		'[class="Toastify__toast Toastify__toast-theme--dark Toastify__toast--info Toastify__toast--close-on-click enter-geofence"]',
 		{ timeout: 50000 }

extra/translation-script-content/update-en.json

@@ -1 +1 @@
-{}
+{}

src/atomicui/atoms/DropdownEl/DropdownEl.tsx

@@ -19,6 +19,7 @@ export interface DropdownElProps {
 	arrowIconColor?: string;
 	label?: string;
 	width?: string;
+	dataTestId?: string;
 }
 
 const DropdownEl: FC<DropdownElProps> = ({
@@ -31,7 +32,8 @@ const DropdownEl: FC<DropdownElProps> = ({
 	isRadioBox = false,
 	arrowIconColor,
 	label,
-	width = "100%"
+	width = "100%",
+	dataTestId
 }) => {
 	const [open, setOpen] = useState(false);
 	const dropdownRef = useRef<HTMLDivElement>(null);
@@ -62,7 +64,7 @@ const DropdownEl: FC<DropdownElProps> = ({
 	);
 
 	return (
-		<div ref={dropdownRef} className="dropdown-container" style={{ width }}>
+		<div ref={dropdownRef} data-testid={dataTestId} className="dropdown-container" style={{ width }}>
 			<div
 				data-testid="dropdown-trigger"
 				className={

src/atomicui/organisms/RouteBox/RouteBox.tsx

@@ -29,6 +29,7 @@ import {
 	IconTruckSolid,
 	IconWalking
 } from "@demo/assets/svgs";
+import { DropdownEl } from "@demo/atomicui/atoms";
 import { NotFoundCard, StepCard } from "@demo/atomicui/molecules";
 import { appConfig } from "@demo/core/constants";
 import BottomSheetHeights from "@demo/core/constants/bottomSheetHeights";
@@ -129,7 +130,6 @@ const RouteBox: FC<RouteBoxProps> = ({
 		setDirections
 	} = useRoute();
 	const { defaultRouteOptions } = usePersistedData();
-	const [expandRouteOptions, setExpandRouteOptions] = useState(false);
 	const [routeOptions, setRouteOptions] = useState<RouteOptionsType>({ ...defaultRouteOptions });
 	const { isDesktop, isDesktopBrowser } = useDeviceMediaQuery();
 	const { t, i18n } = useTranslation();
@@ -257,20 +257,34 @@ const RouteBox: FC<RouteBoxProps> = ({
 			const obj = getDestDept();
 
 			if (obj?.DeparturePosition && obj?.DestinationPosition) {
+				const isModePedestrianOrScooter = mode === TravelMode.PEDESTRIAN || mode === TravelMode.SCOOTER;
+				const uturnAvoidanceOption = isModePedestrianOrScooter ? {} : { UTurns: routeOptions.avoidUTurns };
+
 				const params: CalculateRoutesCommandInput = {
 					Origin: obj.DeparturePosition,
 					Destination: obj.DestinationPosition,
 					TravelMode: mode,
 					Avoid: {
 						TollRoads: routeOptions.avoidTolls,
-						Ferries: routeOptions.avoidFerries
+						Ferries: routeOptions.avoidFerries,
+						DirtRoads: routeOptions.avoidDirtRoads,
+						Tunnels: routeOptions.avoidTunnels,
+						...uturnAvoidanceOption
 					},
 					InstructionsMeasurementSystem: mapUnit
 				};
 				return params;
 			}
 		},
-		[getDestDept, mapUnit, routeOptions.avoidFerries, routeOptions.avoidTolls]
+		[
+			getDestDept,
+			mapUnit,
+			routeOptions.avoidFerries,
+			routeOptions.avoidTolls,
+			routeOptions.avoidDirtRoads,
+			routeOptions.avoidTunnels,
+			routeOptions.avoidUTurns
+		]
 	);
 
 	const calculateRouteDataForAllTravelModes = useCallback(async () => {
@@ -508,9 +522,7 @@ const RouteBox: FC<RouteBoxProps> = ({
 		value.to.length
 	]);
 
-	const onClickRouteOptions = useCallback(() => setExpandRouteOptions(!expandRouteOptions), [expandRouteOptions]);
-
-	const MoreOptionsUI = useCallback(
+	const MoreOptionsUIMobile = useCallback(
 		() => (
 			<View className="route-option-items">
 				<CheckboxField
@@ -539,6 +551,48 @@ const RouteBox: FC<RouteBoxProps> = ({
 					}}
 					crossOrigin={undefined}
 				/>
+
+				<CheckboxField
+					className="option-item"
+					label={t("avoid_dirtroads.text")}
+					name={t("avoid_dirtroads.text")}
+					value="Avoid Dirtroads"
+					checked={routeOptions.avoidDirtRoads}
+					onChange={e => {
+						setRouteOptions({ ...routeOptions, avoidDirtRoads: e.target.checked });
+						setRouteData(undefined);
+						setRouteDataForMobile(undefined);
+					}}
+					crossOrigin={undefined}
+				/>
+
+				<CheckboxField
+					className="option-item"
+					label={t("avoid_uturns.text")}
+					name={t("avoid_uturns.text")}
+					value="Avoid Uturns"
+					checked={routeOptions.avoidUTurns}
+					onChange={e => {
+						setRouteOptions({ ...routeOptions, avoidUTurns: e.target.checked });
+						setRouteData(undefined);
+						setRouteDataForMobile(undefined);
+					}}
+					crossOrigin={undefined}
+				/>
+
+				<CheckboxField
+					className="option-item"
+					label={t("avoid_tunnels.text")}
+					name={t("avoid_tunnels.text")}
+					value="Avoid Tunnels"
+					checked={routeOptions.avoidTunnels}
+					onChange={e => {
+						setRouteOptions({ ...routeOptions, avoidTunnels: e.target.checked });
+						setRouteData(undefined);
+						setRouteDataForMobile(undefined);
+					}}
+					crossOrigin={undefined}
+				/>
 			</View>
 		),
 		[routeOptions, setRouteData, t]
@@ -557,32 +611,59 @@ const RouteBox: FC<RouteBoxProps> = ({
 						: "route-options-container bottom-border-radius"
 				}
 			>
-				{!expandRouteOptions ? (
-					<Text className="collapsed-route-options-text" onClick={onClickRouteOptions}>
-						{t("route_box__route_options.text")}
-					</Text>
-				) : (
-					<View className="expanded-route-options">
-						<Text className="text-1">{t("route_box__route_options.text")}</Text>
-						<Text className="text-2" onClick={onClickRouteOptions}>
-							{t("route_box__close.text")}
-						</Text>
-					</View>
-				)}
-				{expandRouteOptions && <MoreOptionsUI />}
+				{/* Placeholder for another dropdown to be added later */}
+				<div style={{ width: "100%" }} />
+				<DropdownEl
+					dataTestId="route-avoidance-dropdown"
+					label={t("avoid.text")}
+					defaultOption={Object.entries(routeOptions)
+						.filter(([_, value]) => value)
+						.map(([key]) => ({ value: key, label: t(key) }))}
+					options={[
+						{ value: "avoidTolls", label: t("avoid_tolls.text") },
+						{ value: "avoidFerries", label: t("avoid_ferries.text") },
+						{ value: "avoidDirtRoads", label: t("avoid_dirtroads.text") },
+						{ value: "avoidUTurns", label: t("avoid_uturns.text") },
+						{ value: "avoidTunnels", label: t("avoid_tunnels.text") }
+					]}
+					onSelect={option => {
+						switch (option.value) {
+							case "avoidTolls":
+								setRouteOptions({ ...routeOptions, avoidTolls: !routeOptions.avoidTolls });
+								break;
+							case "avoidFerries":
+								setRouteOptions({ ...routeOptions, avoidFerries: !routeOptions.avoidFerries });
+								break;
+							case "avoidDirtRoads":
+								setRouteOptions({ ...routeOptions, avoidDirtRoads: !routeOptions.avoidDirtRoads });
+								break;
+							case "avoidUTurns":
+								setRouteOptions({ ...routeOptions, avoidUTurns: !routeOptions.avoidUTurns });
+								break;
+							case "avoidTunnels":
+								setRouteOptions({ ...routeOptions, avoidTunnels: !routeOptions.avoidTunnels });
+								break;
+							default:
+								break;
+						}
+						setRouteData(undefined);
+						setRouteDataForMobile(undefined);
+					}}
+					showSelected={false}
+					isCheckbox={true}
+				/>
 			</View>
 		),
 		[
+			setRouteData,
+			routeOptions,
 			inputFocused,
 			isCurrentLocationSelected,
 			suggestions.from?.length,
 			suggestions.to?.length,
 			isSearching,
 			routeData,
-			expandRouteOptions,
-			onClickRouteOptions,
-			t,
-			MoreOptionsUI
+			t
 		]
 	);
 
@@ -899,7 +980,7 @@ const RouteBox: FC<RouteBoxProps> = ({
 						<Text fontFamily="AmazonEmber-Bold" fontSize="1.23rem">
 							{t("route_box__route_options.text")}
 						</Text>
-						<MoreOptionsUI />
+						<MoreOptionsUIMobile />
 					</Flex>
 				</Flex>
 				{routeFromMarker}
@@ -1050,9 +1131,7 @@ const RouteBox: FC<RouteBoxProps> = ({
 							{renderTravelModes}
 						</Flex>
 					)}
-					{isDesktop &&
-						[TravelMode.CAR, TravelMode.TRUCK].includes(travelMode as TravelMode) &&
-						renderRouteOptionsContainer}
+					{isDesktop && renderRouteOptionsContainer}
 					<View
 						className={`search-results-container ${!isDesktop ? "search-results-container-mobile" : ""}`}
 						maxHeight={!isDesktop ? bottomSheetCurrentHeight - 230 : window.innerHeight - 260}

src/atomicui/organisms/RouteBox/styles.scss

@@ -134,6 +134,7 @@
 			&.no-duration {
 				background-color: var(--light-color-2) !important;
 				border: 1px solid var(--grey-color-3) !important;
+
 				svg {
 					fill: #8e8e93 !important;
 				}
@@ -165,6 +166,7 @@
 		border-radius: 8px;
 		padding: 4px;
 		margin-right: 0.5rem;
+
 		&:hover {
 			background-color: var(--ghost-white);
 		}
@@ -182,6 +184,7 @@
 
 			.inputs-container {
 				width: 100%;
+
 				input {
 					background-color: var(--light-color-2);
 				}
@@ -196,6 +199,7 @@
 					width: 16px;
 					height: 16px;
 				}
+
 				.dashed-line {
 					height: 3px;
 				}
@@ -292,8 +296,13 @@
 	}
 
 	.route-options-container {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		gap: 10px;
 		background-color: var(--light-color-2);
-		padding: 11px 15px 11px 15px;
+		padding: 11px 15px;
+		cursor: pointer !important;
 
 		.collapsed-route-options-text {
 			opacity: 1 !important;
@@ -304,7 +313,6 @@
 			letter-spacing: 0px !important;
 			text-align: right !important;
 			line-height: 18px !important;
-			cursor: pointer !important;
 		}
 
 		.expanded-route-options {
@@ -532,6 +540,7 @@
 
 			&.steps-container-mobile {
 				padding: 0;
+
 				.step-card-icon-container {
 					margin-left: 0;
 				}
@@ -625,4 +634,4 @@
 	position: absolute;
 	top: 11px;
 	right: 10px;
-}
+}

src/atomicui/organisms/SettingsModal/SettingsModal.tsx

@@ -326,6 +326,33 @@ const SettingsModal: FC<SettingsModalProps> = ({ open, onClose, resetAppState, m
 							onChange={e => handleRouteOptionChange(e, "avoidFerries")}
 							crossOrigin={undefined}
 						/>
+						<CheckboxField
+							className="sm-checkbox"
+							label={t("avoid_dirtroads.text")}
+							name={t("avoid_dirtroads.text")}
+							value="Avoid Dirtroads"
+							checked={defaultRouteOptions.avoidDirtRoads}
+							onChange={e => handleRouteOptionChange(e, "avoidDirtRoads")}
+							crossOrigin={undefined}
+						/>
+						<CheckboxField
+							className="sm-checkbox"
+							label={t("avoid_uturns.text")}
+							name={t("avoid_uturns.text")}
+							value="Avoid Uturns"
+							checked={defaultRouteOptions.avoidUTurns}
+							onChange={e => handleRouteOptionChange(e, "avoidUTurns")}
+							crossOrigin={undefined}
+						/>
+						<CheckboxField
+							className="sm-checkbox"
+							label={t("avoid_tunnels.text")}
+							name={t("avoid_tunnels.text")}
+							value="Avoid Tunnels"
+							checked={defaultRouteOptions.avoidTunnels}
+							onChange={e => handleRouteOptionChange(e, "avoidTunnels")}
+							crossOrigin={undefined}
+						/>
 					</Flex>
 				)
 			},
@@ -595,6 +622,9 @@ const SettingsModal: FC<SettingsModalProps> = ({ open, onClose, resetAppState, m
 			mapButtons,
 			defaultRouteOptions.avoidTolls,
 			defaultRouteOptions.avoidFerries,
+			defaultRouteOptions.avoidDirtRoads,
+			defaultRouteOptions.avoidUTurns,
+			defaultRouteOptions.avoidTunnels,
 			autoRegion,
 			baseValues?.region,
 			langDir,