Skip Production Toggle Onboarding View (#7317)

* chore: handle onboarding panel for production toggle

* fix: onboarding modal cypress test

web/src/components/modals/OnboardingModal.cy.tsx

@@ -1,16 +1,28 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { I18nextProvider } from 'react-i18next';
 import { BrowserRouter } from 'react-router-dom';
 import i18n from 'translation/i18n';
 
 import { OnboardingModal } from './OnboardingModal';
 
-it('mounts', () => {
-  cy.mount(
-    <I18nextProvider i18n={i18n}>
-      <BrowserRouter>
-        <OnboardingModal />
-      </BrowserRouter>
-    </I18nextProvider>
-  );
-  cy.contains('Electricity Maps');
+const queryClient = new QueryClient();
+
+describe('OnboardingModal', () => {
+  beforeEach(() => {
+    cy.intercept('/feature-flags', {
+      body: { 'consumption-only': false },
+    });
+  });
+  it('mounts', () => {
+    cy.mount(
+      <QueryClientProvider client={queryClient}>
+        <I18nextProvider i18n={i18n}>
+          <BrowserRouter>
+            <OnboardingModal />
+          </BrowserRouter>
+        </I18nextProvider>
+      </QueryClientProvider>
+    );
+    cy.contains('Electricity Maps');
+  });
 });

web/src/components/modals/OnboardingModal.tsx

@@ -1,3 +1,4 @@
+import { useFeatureFlag } from 'features/feature-flags/api';
 import { TFunction } from 'i18next';
 import { useAtom } from 'jotai';
 import { useCallback } from 'react';
@@ -11,7 +12,7 @@ interface ViewContentProps {
   translationKey: string;
   isDangerouslySet?: boolean;
 }
-
+const TOGGLE_MODE_IDX = 3;
 const BODY_STYLE = 'text-sm px-4 sm:text-base pb-4';
 
 function ViewContent({ t, translationKey, isDangerouslySet = false }: ViewContentProps) {
@@ -81,13 +82,18 @@ export function OnboardingModal() {
   const handleDismiss = useCallback(() => {
     setHasOnboardingBeenSeen(true);
   }, [setHasOnboardingBeenSeen]);
+  const isConsumptionOnlyMode = useFeatureFlag('consumption-only');
+  const onboardingViews = isConsumptionOnlyMode
+    ? [...views.slice(0, TOGGLE_MODE_IDX), ...views.slice(TOGGLE_MODE_IDX + 1)]
+    : views;
+
   return (
     <Modal
       modalName="onboarding"
       data-test-id="onboarding"
       visible={visible}
       onDismiss={handleDismiss}
-      views={views}
+      views={onboardingViews}
     />
   );
 }