feat: add modal on get started page for onboarding experiment v2

apps/web/src/pages/auth/components/QuestionnaireForm.tsx

@@ -66,7 +66,7 @@ export function QuestionnaireForm() {
     const createDto: ICreateOrganizationDto = { ...rest, name: organizationName };
     const organization = await createOrganizationMutation(createDto);
     const organizationResponseToken = await api.post(`/v1/auth/organizations/${organization._id}/switch`, {});
-
+    localStorage.setItem('onboarding_modal', 'true');
     setToken(organizationResponseToken);
   }
 

apps/web/src/pages/quick-start/components/OnboadingExperimentModal.tsx

@@ -0,0 +1,123 @@
+import { useState } from 'react';
+import { Modal, useMantineTheme, Grid } from '@mantine/core';
+
+import styled from '@emotion/styled';
+import { colors, shadows, Title, Button } from '@novu/design-system';
+import { useAuthContext, useSegment } from '@novu/shared-web';
+import { useCreateOnboardingExperimentWorkflow } from '../../../api/hooks/notification-templates/useCreateOnboardingExperimentWorkflow';
+
+export function OnboardingExperimentModal() {
+  const [opened, setOpened] = useState(true);
+  const theme = useMantineTheme();
+  const segment = useSegment();
+  const { currentOrganization } = useAuthContext();
+  const {
+    createOnboardingExperimentWorkflow,
+    isLoading: IsCreateOnboardingExpWorkflowLoading,
+    isDisabled: isIsCreateOnboardingExpWorkflowDisabled,
+  } = useCreateOnboardingExperimentWorkflow();
+  const handleOnClose = () => {
+    setOpened(true);
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      overlayColor={theme.colorScheme === 'dark' ? colors.BGDark : colors.BGLight}
+      overlayOpacity={0.7}
+      styles={{
+        modal: {
+          backgroundColor: theme.colorScheme === 'dark' ? colors.B15 : colors.white,
+          width: '700px',
+        },
+        body: {
+          paddingTop: '5px',
+          paddingInline: '8px',
+        },
+      }}
+      title={<Title size={2}>What would you like to do first?</Title>}
+      sx={{ backdropFilter: 'blur(10px)' }}
+      shadow={theme.colorScheme === 'dark' ? shadows.dark : shadows.medium}
+      radius="md"
+      size="lg"
+      onClose={handleOnClose}
+      centered
+      withCloseButton={false}
+    >
+      <Grid>
+        <Grid.Col xs={12} md={6} mb={20}>
+          <ChannelCard>
+            <TitleRow> {'Send test notification'}</TitleRow>
+            <Description>{'Learn how to setup a workflow and send your first email notification.'}</Description>
+            <StyledButton
+              loading={IsCreateOnboardingExpWorkflowLoading}
+              disabled={isIsCreateOnboardingExpWorkflowDisabled}
+              pulse={true}
+              variant={'gradient'}
+              onClick={async () => {
+                segment.track('Buton Clicked - [Onboarding]', {
+                  action: 'Modal - Send test notification',
+                  experiment_id: '2024-w15-onb',
+                  _organization: currentOrganization?._id,
+                });
+                localStorage.removeItem('onboarding_modal');
+                createOnboardingExperimentWorkflow();
+              }}
+            >
+              {'Send test notification now'}
+            </StyledButton>
+          </ChannelCard>
+        </Grid.Col>
+        <Grid.Col xs={12} md={6} mb={20}>
+          <ChannelCard>
+            <TitleRow> {'Look around'}</TitleRow>
+            <Description>{'Start exploring the Novu app on your own terms'}</Description>
+            <StyledButton
+              variant={'outline'}
+              onClick={async () => {
+                segment.track('Buton Clicked - [Onboarding]', {
+                  action: 'Modal - Get started',
+                  experiment_id: '2024-w15-onb',
+                  _organization: currentOrganization?._id,
+                });
+                localStorage.removeItem('onboarding_modal');
+                setOpened(false);
+              }}
+            >
+              {'Get started'}
+            </StyledButton>
+          </ChannelCard>
+        </Grid.Col>
+      </Grid>
+    </Modal>
+  );
+}
+
+const ChannelCard = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  max-width: 230px;
+`;
+
+const TitleRow = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  line-height: 32px;
+  margin-bottom: 8px;
+`;
+
+const Description = styled.div`
+  flex: auto;
+  font-size: 16px;
+  line-height: 20px;
+  margin-bottom: 20px;
+  color: ${colors.B60};
+  height: 60px;
+`;
+
+const StyledButton = styled(Button)`
+  width: fit-content;
+  outline: none;
+`;

apps/web/src/pages/quick-start/steps/GetStarted.tsx

@@ -9,6 +9,7 @@ import { ChannelsConfiguration } from '../components/ChannelsConfiguration';
 import { GetStartedLayout } from '../components/layout/GetStartedLayout';
 import { NavButton } from '../components/NavButton';
 import { getStartedSteps, OnBoardingAnalyticsEnum } from '../consts';
+import { OnboardingExperimentModal } from '../components/OnboadingExperimentModal';
 
 const ChannelsConfigurationHolder = styled.div`
   display: flex;
@@ -29,7 +30,7 @@ export function GetStarted() {
     open: boolean;
     channelType?: ChannelTypeEnum;
   }>({ open: false });
-
+  const isOnboardingModalEnabled = localStorage.getItem('onboarding_modal') === 'true';
   const onIntegrationModalClose = () => setClickedChannel({ open: false });
 
   useEffect(() => {
@@ -60,6 +61,7 @@ export function GetStarted() {
         />
         <ChannelsConfiguration setClickedChannel={setClickedChannel} />
       </ChannelsConfigurationHolder>
+      {isOnboardingModalEnabled && <OnboardingExperimentModal />}
     </GetStartedLayout>
   );
 }