feat(trip-form): support config mode subsetting

ibi-group · Aug 4, 2023 · bc682aa · bc682aa
1 parent 6eb85fb
commit bc682aa
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git a/packages/trip-form/i18n/en-US.yml b/packages/trip-form/i18n/en-US.yml
@@ -25,6 +25,7 @@ otpUi:
       rail-label: Train
       subway-label: Subway
       tram-label: Tram
+      walkReluctance-label: Avoid Walking?
       walkTolerance-label: Walking Tolerance
       walkTolerance-labelHigh: More Walking
       walkTolerance-labelLow: Less Walking

diff --git a/packages/trip-form/modeSettings.yml b/packages/trip-form/modeSettings.yml
@@ -17,8 +17,9 @@
   step: 0.1
   type: SLIDER
 - applicableMode: TRANSIT
-  default: true
+  default: false
   graphQLQueryParam: true
+  id: walkReluctance
   key: walkReluctance
   truthValue: 5
   type: CHECKBOX
diff --git a/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx b/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx
@@ -145,22 +145,31 @@ const ModeSettingRenderer = ({
 interface Props {
   modeButton: ModeButtonDefinition;
   onSettingUpdate: (QueryParamChangeEvent) => void;
+  subsettingOverrides: Array<ModeSetting>;
 }
 export default function SubSettingsPane({
   modeButton,
-  onSettingUpdate
+  onSettingUpdate,
+  subsettingOverrides
 }: Props): ReactElement {
   const intl = useIntl();
   const label = generateModeButtonLabel(modeButton.key, intl, modeButton.label);
 
+  const overridesIds = subsettingOverrides?.map(x => x.id);
+
   // Split the mode settings out based on whether they're submodes or not
   // This is so we can display submodes in a grid at the top
   const {
     settingsNoSubmodes,
     settingsOnlySubmodes
   } = modeButton.modeSettings.reduce(
     (accumulator, cur) => {
-      if (cur.type === "SUBMODE") {
+      const overrideIndex = overridesIds?.indexOf(cur.id);
+
+      // If there is a setting override in the config, use that setting instead of the default.
+      if (subsettingOverrides && overrideIndex > -1) {
+        accumulator.settingsNoSubmodes.push(subsettingOverrides[overrideIndex]);
+      } else if (cur.type === "SUBMODE") {
         accumulator.settingsOnlySubmodes.push(cur);
       } else {
         accumulator.settingsNoSubmodes.push(cur);

diff --git a/packages/trip-form/src/MetroModeSelector/index.tsx b/packages/trip-form/src/MetroModeSelector/index.tsx
@@ -11,7 +11,7 @@ import {
   useInteractions,
   useRole
 } from "@floating-ui/react";
-import { ModeButtonDefinition } from "@opentripplanner/types";
+import { ModeButtonDefinition, ModeSetting } from "@opentripplanner/types";
 import { CaretDown } from "@styled-icons/fa-solid/CaretDown";
 import { CaretUp } from "@styled-icons/fa-solid/CaretUp";
 import React, { ReactElement, useCallback, useRef, useState } from "react";
@@ -193,6 +193,7 @@ interface ModeButtonProps {
   onPopupKeyboardExpand: (id: string) => void;
   onSettingsUpdate: (QueryParamChangeEvent) => void;
   onToggle: () => void;
+  subsettingOverrides?: Array<ModeSetting>;
 }
 
 function ModeButton({
@@ -205,7 +206,8 @@ function ModeButton({
   onPopupClose,
   onPopupKeyboardExpand,
   onSettingsUpdate,
-  onToggle
+  onToggle,
+  subsettingOverrides
 }: ModeButtonProps) {
   const intl = useIntl();
 
@@ -360,6 +362,7 @@ function ModeButton({
               <SubSettingsPane
                 modeButton={modeButton}
                 onSettingUpdate={onSettingsUpdate}
+                subsettingOverrides={subsettingOverrides}
               />
             </HoverInnerContainer>
           </HoverPanel>
@@ -399,6 +402,11 @@ interface Props {
    * @param key Mode button to be toggled
    */
   onToggleModeButton: (key: string, newState: boolean) => void;
+  /**
+   * Array of configurable overrides for mode subsettings. For example, walk reluctance defaults
+   * to checkmark but slider is also supported.
+   */
+  subsettingOverrides?: Array<ModeSetting>;
 }
 
 export default function ModeSelector({
@@ -408,7 +416,8 @@ export default function ModeSelector({
   label,
   modeButtons = [],
   onSettingsUpdate,
-  onToggleModeButton
+  onToggleModeButton,
+  subsettingOverrides
 }: Props): ReactElement {
   // State that holds the id of the active mode combination popup that was triggered via keyboard.
   // It is used to enable/disable hover effects to avoid keyboard focus being stolen
@@ -434,6 +443,7 @@ export default function ModeSelector({
           onToggle={useCallback(() => {
             onToggleModeButton(button.key, !button.enabled);
           }, [button, onToggleModeButton])}
+          subsettingOverrides={subsettingOverrides}
         />
       ))}
     </ModeBar>