feat: add mobile condition with modal

novuhq · Apr 18, 2024 · 3c1b7bb · 3c1b7bb
1 parent c4c7e69
commit 3c1b7bb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/apps/web/src/pages/quick-start/components/OnboardingExperimentModal.tsx b/apps/web/src/pages/quick-start/components/OnboardingExperimentModal.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Modal, useMantineTheme, Grid } from '@mantine/core';
 
 import styled from '@emotion/styled';
@@ -22,6 +22,13 @@ export function OnboardingExperimentModal() {
     setOpened(true);
   };
 
+  useEffect(() => {
+    segment.track('Welcome modal open - [Onboarding]', {
+      experiment_id: '2024-w15-onb',
+      _organization: currentOrganization?._id,
+    });
+  }, [currentOrganization?._id, segment]);
+
   return (
     <Modal
       opened={opened}

diff --git a/apps/web/src/pages/quick-start/steps/GetStarted.tsx b/apps/web/src/pages/quick-start/steps/GetStarted.tsx
@@ -34,18 +34,13 @@ export function GetStarted() {
     channelType?: ChannelTypeEnum;
   }>({ open: false });
 
-  const isOnboardingModalEnabled = localStorage.getItem(OnboardingExperimentV2ModalKey) === 'true';
+  const isOnboardingModalEnabled =
+    localStorage.getItem(OnboardingExperimentV2ModalKey) === 'true' && window.innerWidth > 768;
 
   const onIntegrationModalClose = () => setClickedChannel({ open: false });
 
   useEffect(() => {
     segment.track(OnBoardingAnalyticsEnum.CONFIGURE_PROVIDER_VISIT);
-    if (isOnboardingModalEnabled) {
-      segment.track('Welcome modal open - [Onboarding]', {
-        experiment_id: '2024-w15-onb',
-        _organization: currentOrganization?._id,
-      });
-    }
   }, [currentOrganization?._id, isOnboardingModalEnabled, segment]);
 
   function handleOnClick() {