feat(web): hide consumption toggle behind ff

web/src/App.tsx

@@ -8,15 +8,18 @@ import { AppStoreBanner } from 'components/AppStoreBanner';
 import LoadingOverlay from 'components/LoadingOverlay';
 import { OnboardingModal } from 'components/modals/OnboardingModal';
 import ErrorComponent from 'features/error-boundary/ErrorBoundary';
+import { useFeatureFlag } from 'features/feature-flags/api';
 import Header from 'features/header/Header';
 import UpdatePrompt from 'features/service-worker/UpdatePrompt';
 import { useDarkMode } from 'hooks/theme';
 import { useGetCanonicalUrl } from 'hooks/useGetCanonicalUrl';
+import { useSetAtom } from 'jotai';
 import { lazy, ReactElement, Suspense, useEffect, useLayoutEffect } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import trackEvent from 'utils/analytics';
-import { metaTitleSuffix, TrackEvent } from 'utils/constants';
+import { metaTitleSuffix, Mode, TrackEvent } from 'utils/constants';
+import { productionConsumptionAtom } from 'utils/state/atoms';
 
 const MapWrapper = lazy(async () => import('features/map/MapWrapper'));
 const LeftPanel = lazy(async () => import('features/panels/LeftPanel'));
@@ -46,6 +49,14 @@ export default function App(): ReactElement {
   const shouldUseDarkMode = useDarkMode();
   const { t, i18n } = useTranslation();
   const canonicalUrl = useGetCanonicalUrl();
+  const setConsumptionAtom = useSetAtom(productionConsumptionAtom);
+  const isConsumptionOnlyMode = useFeatureFlag('consumption-only');
+
+  useEffect(() => {
+    if (isConsumptionOnlyMode) {
+      setConsumptionAtom(Mode.CONSUMPTION);
+    }
+  }, [isConsumptionOnlyMode, setConsumptionAtom]);
 
   // Update classes on theme change
   useLayoutEffect(() => {

web/src/features/map-controls/MapControls.tsx

@@ -1,3 +1,4 @@
+import { useFeatureFlag } from 'features/feature-flags/api';
 import { useAtom, useAtomValue } from 'jotai';
 import { EyeOff, Sun, Wind } from 'lucide-react';
 import { useTransition } from 'react';
@@ -112,10 +113,12 @@ function DesktopMapControls() {
     trackEvent(TrackEvent.COLORBLIND_MODE_TOGGLED);
   };
 
+  const isConsumptionOnlyMode = useFeatureFlag('consumption-only');
+
   return (
     <div className="pointer-events-none absolute right-3 top-2 z-20 hidden flex-col items-end md:flex">
       <div className="pointer-events-auto mb-16 flex flex-col items-end space-y-2">
-        <ConsumptionProductionToggle />
+        {!isConsumptionOnlyMode && <ConsumptionProductionToggle />}
         <SpatialAggregatesToggle />
       </div>
       <div className="mt-5 space-y-2">

web/src/features/map-controls/ZoomControls.tsx

@@ -1,12 +1,15 @@
+import { useFeatureFlag } from 'features/feature-flags/api';
 import { ReactElement } from 'react';
 import { NavigationControl } from 'react-map-gl/maplibre';
 
 export default function ZoomControls(): ReactElement {
+  const isConsumptionOnlyMode = useFeatureFlag('consumption-only');
+  const marginTop = isConsumptionOnlyMode ? 54 : 98;
   return (
     <NavigationControl
       style={{
         marginRight: 12,
-        marginTop: 98,
+        marginTop: marginTop,
         width: '33px',
         boxShadow: '0px 1px 1px  rgb(0 0 0 / 0.1)',
         border: 0,

web/src/features/modals/SettingsModal.tsx

@@ -1,5 +1,6 @@
 import { Button } from 'components/Button';
 import Modal from 'components/Modal';
+import { useFeatureFlag } from 'features/feature-flags/api';
 import ConsumptionProductionToggle from 'features/map-controls/ConsumptionProductionToggle';
 import { LanguageSelector } from 'features/map-controls/LanguageSelector';
 import { weatherButtonMap } from 'features/map-controls/MapControls';
@@ -67,12 +68,12 @@ export function SettingsModalContent() {
   const areWeatherLayersAllowed = useAtomValue(areWeatherLayersAllowedAtom);
   const [isColorblindModeEnabled, setIsColorblindModeEnabled] =
     useAtom(colorblindModeAtom);
-
+  const isConsumptionOnlyMode = useFeatureFlag('consumption-only');
   const { t } = useTranslation();
   return (
     <div className="flex flex-col items-center space-y-2">
       <div className="rounded-full bg-gray-500">
-        <ConsumptionProductionToggle />
+        {!isConsumptionOnlyMode && <ConsumptionProductionToggle />}
       </div>
       <div className="rounded-full bg-gray-500">
         <SpatialAggregatesToggle />