From 03c02acc508c472d78d87ec11e538f786b221fdc Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Mon, 30 Sep 2024 14:54:51 -0500
Subject: [PATCH] Change configuration from boolean to other first, instead to
 array of geocoder options

---
 packages/location-field/src/index.tsx         | 115 ++++++++++--------
 .../src/stories/Desktop.story.tsx             |  51 +++-----
 packages/location-field/src/types.ts          |   6 +-
 3 files changed, 88 insertions(+), 84 deletions(-)

diff --git a/packages/location-field/src/index.tsx b/packages/location-field/src/index.tsx
index 81eb5dff3..3b1cad2a8 100644
--- a/packages/location-field/src/index.tsx
+++ b/packages/location-field/src/index.tsx
@@ -159,6 +159,7 @@ const LocationField = ({
   GeocodedOptionIconComponent = GeocodedOptionIcon,
   geocoderConfig,
   getCurrentPosition,
+  geocoderResultsOrder = ["STATIONS", "STOPS", "OTHER"],
   hideExistingValue = false,
   initialSearchResults = null,
   inputPlaceholder = null,
@@ -174,7 +175,6 @@ const LocationField = ({
   onTextInputClick = null,
   operatorIconMap = {},
   preferredLayers = [],
-  renderOtherFirst = false,
   sessionOptionIcon = <Search size={ICON_SIZE} />,
   sessionSearches = [],
   showClearButton = true,
@@ -645,57 +645,76 @@ const LocationField = ({
     const transitFeaturesPresent =
       stopFeatures.length > 0 || stationFeatures.length > 0;
 
-    const OtherFeaturesHeader = () => (
-      <S.MenuGroupHeader as={headingType} bgColor="#333" key="other-header">
-        <FormattedMessage
-          description="Text for header above the 'other' category of geocoder results"
-          id="otpUi.LocationField.other"
-        />
-      </S.MenuGroupHeader>
-    );
-
-    const otherFeaturesElements = otherFeatures.map(feature =>
-      renderFeature(itemIndex++, feature)
-    );
-
-    // Iterate through the geocoder results
-    menuItems = menuItems.concat(
-      renderOtherFirst &&
-        transitFeaturesPresent &&
-        otherFeatures.length > 0 && <OtherFeaturesHeader />,
-      renderOtherFirst && otherFeaturesElements,
-      stationFeatures.length > 0 && (
-        <S.MenuGroupHeader
-          as={headingType}
-          bgColor={layerColorMap.stations}
-          key="gtfs-stations-header"
-        >
+    const FeaturesElements = ({
+      bgColor,
+      key,
+      titleId,
+      featuresArray
+    }: {
+      bgColor: string;
+      key: string;
+      titleId: string;
+      featuresArray: JSX.Element[];
+    }) => {
+      const Header = () => (
+        <S.MenuGroupHeader as={headingType} bgColor={bgColor} key={key}>
           <FormattedMessage
-            description="Text for header above Stations"
-            id="otpUi.LocationField.stations"
+            description="Text for header above the 'other' category of geocoder results"
+            id={`otpUi.LocationField.${titleId}`}
           />
         </S.MenuGroupHeader>
-      ),
-      stationFeatures.map(feature => renderFeature(itemIndex++, feature)),
-
-      stopFeatures.length > 0 && (
-        <S.MenuGroupHeader
-          as={headingType}
-          bgColor={layerColorMap.stops}
-          key="gtfs-stops-header"
-        >
-          <FormattedMessage
-            description="Text for header above Stops"
-            id="otpUi.LocationField.stops"
+      );
+      return (
+        <>
+          {/* Only include the header if there are features to show */}
+          {titleId === "other" ? (
+            <Header />
+          ) : (
+            transitFeaturesPresent && <Header />
+          )}
+          {featuresArray.map(feature => renderFeature(itemIndex++, feature))}
+        </>
+      );
+    };
+
+    // Create an array of results to display based on the geocoderResultsOrder
+    const featuresElementsArray = geocoderResultsOrder.map(result => {
+      let Element;
+      if (result === "OTHER") {
+        Element = (
+          <FeaturesElements
+            bgColor="#333"
+            key="other-header"
+            featuresArray={otherFeatures}
+            titleId="other"
           />
-        </S.MenuGroupHeader>
-      ),
-      stopFeatures.map(feature => renderFeature(itemIndex++, feature)),
-      !renderOtherFirst &&
-        transitFeaturesPresent &&
-        otherFeatures.length > 0 && <OtherFeaturesHeader />,
-      !renderOtherFirst && otherFeaturesElements
-    );
+        );
+      }
+      if (result === "STATIONS") {
+        Element = (
+          <FeaturesElements
+            bgColor={layerColorMap.stations}
+            key="gtfs-stations-header"
+            featuresArray={stationFeatures}
+            titleId="stations"
+          />
+        );
+      }
+      if (result === "STOPS") {
+        Element = (
+          <FeaturesElements
+            bgColor={layerColorMap.stops}
+            key="gtfs-stops-header"
+            featuresArray={stopFeatures}
+            titleId="stops"
+          />
+        );
+      }
+      return Element;
+    });
+
+    // Iterate through the geocoder results
+    menuItems = menuItems.concat(featuresElementsArray);
   }
 
   /* 2) Process nearby transit stop options */
diff --git a/packages/location-field/src/stories/Desktop.story.tsx b/packages/location-field/src/stories/Desktop.story.tsx
index 6a6b2b6fd..60b0ec066 100644
--- a/packages/location-field/src/stories/Desktop.story.tsx
+++ b/packages/location-field/src/stories/Desktop.story.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { ComponentMeta } from "@storybook/react";
 
 import { Ship } from "@styled-icons/fa-solid/Ship";
@@ -252,34 +252,21 @@ export const WithUserSettings = (): JSX.Element => (
   />
 );
 
-export const WithOtherFirst = (): JSX.Element => {
-  const [otherControl, setOtherControl] = useState(false);
-  return (
-    <>
-      <label htmlFor="other-input">
-        renderOtherFirst?
-        <input
-          id="other-input"
-          type="checkbox"
-          checked={otherControl}
-          onChange={() => setOtherControl(!otherControl)}
-        />
-      </label>
-      <LocationField
-        currentPosition={currentPosition}
-        geocoderConfig={geocoderConfig}
-        getCurrentPosition={getCurrentPosition}
-        preferredLayers={["example_layer"]}
-        initialSearchResults={mockedGeocoderResponse.features}
-        inputPlaceholder="Select from location"
-        layerColorMap={layerColorMap}
-        locationType="from"
-        onLocationSelected={onLocationSelected}
-        renderOtherFirst={otherControl}
-        sortByDistance
-        style={{ fontFamily: "sans-serif" }}
-      />
-    </>
-  );
-};
-WithOtherFirst.parameters = a11yOverrideParameters;
+export const WithCustomResultsOrder = (): JSX.Element => (
+  <LocationField
+    currentPosition={currentPosition}
+    geocoderConfig={geocoderConfig}
+    getCurrentPosition={getCurrentPosition}
+    preferredLayers={["example_layer"]}
+    initialSearchResults={mockedGeocoderResponse.features}
+    inputPlaceholder="Select from location"
+    layerColorMap={layerColorMap}
+    locationType="from"
+    onLocationSelected={onLocationSelected}
+    geocoderResultsOrder={["OTHER", "STATIONS", "STOPS"]}
+    sortByDistance
+    style={{ fontFamily: "sans-serif" }}
+  />
+);
+
+WithCustomResultsOrder.parameters = a11yOverrideParameters;
diff --git a/packages/location-field/src/types.ts b/packages/location-field/src/types.ts
index a262622b4..a69b72f43 100644
--- a/packages/location-field/src/types.ts
+++ b/packages/location-field/src/types.ts
@@ -113,6 +113,8 @@ export interface LocationFieldProps {
     maxNearbyStops?: number;
     type: string;
   };
+  /** Order of geocoder results to display */
+  geocoderResultsOrder?: Array<"STATIONS" | "STOPS" | "OTHER">;
   /**
    * This is dispatched when the current position is null. This indicates that
    * the user has requested to use the current position, but that the current
@@ -214,10 +216,6 @@ export interface LocationFieldProps {
    * Results are sorted by distance, but favored layers will always appear first.
    */
   preferredLayers?: string[];
-  /**
-   * If true, make "Other" category (addresses, POIs, etc.) first in the results container.
-   */
-  renderOtherFirst?: boolean;
   /**
    * A slot for the icon to display for an option that was used during the
    * current session.