[Onboarding] - Groundwork for all use cases

apps/web/src/pages/get-started/components/GetStartedAnimationContainer.tsx

@@ -0,0 +1,45 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { FC, ReactNode } from 'react';
+
+type GetStartedAnimationElement = ReactNode;
+
+interface IGetStartedAnimationContainerProps {
+  assetDark: GetStartedAnimationElement;
+  assetLight: GetStartedAnimationElement;
+}
+
+// TODO: add styles for consistent display of animations across tabs
+const AnimationContainer = styled.div``;
+
+export const GetStartedAnimationContainer: FC<IGetStartedAnimationContainerProps> = ({ assetDark, assetLight }) => {
+  const { colorScheme } = useTheme();
+  const isDarkMode = colorScheme === 'dark';
+
+  // TODO remove Placeholder wrapping when assets are available
+  return (
+    <AnimationContainer>
+      {isDarkMode ? <Placeholder placeholder={assetDark} /> : <Placeholder placeholder={assetLight} />}
+    </AnimationContainer>
+  );
+};
+
+function Placeholder({ placeholder }: { placeholder: ReactNode }) {
+  const { colorScheme, colors } = useTheme();
+  const isDarkMode = colorScheme === 'dark';
+
+  return (
+    <div
+      style={{
+        height: '520px',
+        backgroundColor: isDarkMode ? colors.dark[4] : colors.gray[4],
+        display: 'flex',
+        borderRadius: '2%',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <h1>{placeholder}</h1>
+    </div>
+  );
+}

apps/web/src/pages/get-started/components/timeline/Timeline.styles.ts

@@ -26,20 +26,30 @@ export default createStyles((theme: MantineTheme, { expandSteps }: ITimelinePara
       '&:not(:first-of-type)': {
         marginTop: '1rem',
       },
+      // timeline dashed connector line
       '&::before': {
-        backgroundColor: theme.colorScheme === 'dark' ? colors.B30 : colors.B30,
+        backgroundColor: 'transparent',
+        borderColor: theme.colorScheme === 'dark' ? colors.B30 : colors.B85,
       },
     },
 
-    itemTitle: { margin: 0, lineHeight: '1.5rem', fontWeight: 600 },
+    itemTitle: {
+      margin: 0,
+      lineHeight: '1.5rem',
+      fontWeight: 600,
+      color: theme.colorScheme === 'dark' ? colors.white : colors.B40,
+    },
     itemBullet: {
       '&[data-with-child]': {
         fontWeight: 600,
-        backgroundColor: theme.colorScheme === 'dark' ? colors.B30 : colors.B30,
+        border: 'none',
+        backgroundColor: theme.colorScheme === 'dark' ? colors.B30 : colors.BGLight,
+        color: theme.colorScheme === 'dark' ? colors.white : colors.B40,
       },
     },
     itemBody: {
       lineHeight: '1.25rem',
+      color: colors.B60,
     },
 
     itemContent: {

apps/web/src/pages/get-started/consts/DelayUseCase.const.tsx

@@ -1,4 +1,6 @@
 import { CreateWorkflowButton } from '../components/CreateWorkflowButton';
+import { ROUTES } from '@novu/shared-web';
+import { GetStartedAnimationContainer } from '../components/GetStartedAnimationContainer';
 import { Link, StepDescription, StepText } from './shared';
 import { OnboardingUseCase } from './types';
 
@@ -16,7 +18,7 @@ export const DelayUseCaseConst: OnboardingUseCase = {
             <StepText>
               Novu has set up trial email and SMS providers for you. To expand your options, add more providers in the
             </StepText>
-            <Link children={' Integration store'} href={'https://mantine.dev/core/timeline/'} />
+            <Link href={ROUTES.INTEGRATIONS}> Integration store</Link>
             <StepText>.</StepText>
           </StepDescription>
         );
@@ -27,15 +29,15 @@ export const DelayUseCaseConst: OnboardingUseCase = {
       Description: function () {
         return (
           <StepDescription>
-            <StepText>Novu pre-built workflow with a digest node.</StepText>
-            <CreateWorkflowButton children={' Customize '} blueprintIdentifier={USECASE_BLUEPRINT_IDENTIFIER} />
-            <StepText>the workflow or create a new one on the Workflows page.</StepText>
+            <StepText>Novu pre-built workflow with a delay node.</StepText>
+            <CreateWorkflowButton blueprintIdentifier={USECASE_BLUEPRINT_IDENTIFIER}> Customize </CreateWorkflowButton>
+            <StepText> the workflow or create a new one on the Workflows page.</StepText>
           </StepDescription>
         );
       },
     },
     {
-      title: 'Set-up a delay preferences',
+      title: 'Set-up delay preferences',
       Description: function () {
         return (
           <StepDescription>
@@ -65,7 +67,7 @@ export const DelayUseCaseConst: OnboardingUseCase = {
         return (
           <StepDescription>
             <StepText>Discover</StepText>
-            <Link children={' activity feed '} href={'https://mantine.dev/core/timeline/'} />
+            <Link href={ROUTES.ACTIVITIES}> activity feed </Link>
             <StepText>
               to monitor notifications activity and see potential issues with a specific provider or channel.
             </StepText>
@@ -74,7 +76,5 @@ export const DelayUseCaseConst: OnboardingUseCase = {
       },
     },
   ],
-  Demo: () => {
-    return <h1>GIF</h1>;
-  },
+  Demo: () => <GetStartedAnimationContainer assetDark={'Dark Placeholder'} assetLight={'Light Placeholder'} />,
 };

apps/web/src/pages/get-started/consts/DigestUseCase.const.tsx

@@ -1,3 +1,5 @@
+import { ROUTES } from '@novu/shared-web';
+import { GetStartedAnimationContainer } from '../components/GetStartedAnimationContainer';
 import { Link, StepDescription, StepText } from './shared';
 import { OnboardingUseCase } from './types';
 import { CreateWorkflowButton } from '../components/CreateWorkflowButton';
@@ -17,7 +19,7 @@ export const DigestUseCaseConst: OnboardingUseCase = {
             <StepText>
               Novu has set up trial email and SMS providers for you. To expand your options, add more providers in the
             </StepText>
-            <Link children={' Integration store'} href={'https://mantine.dev/core/timeline/'} />
+            <Link href={ROUTES.INTEGRATIONS}> Integration store</Link>
             <StepText>.</StepText>
           </StepDescription>
         );
@@ -68,7 +70,7 @@ export const DigestUseCaseConst: OnboardingUseCase = {
         return (
           <StepDescription>
             <StepText>Discover</StepText>
-            <Link children={' activity feed '} href={'https://mantine.dev/core/timeline/'} />
+            <Link href={ROUTES.ACTIVITIES}> activity feed </Link>
             <StepText>
               to monitor notifications activity and see potential issues with a specific provider or channel.
             </StepText>
@@ -77,7 +79,5 @@ export const DigestUseCaseConst: OnboardingUseCase = {
       },
     },
   ],
-  Demo: () => {
-    return <h1>GIF</h1>;
-  },
+  Demo: () => <GetStartedAnimationContainer assetDark={'Dark Placeholder'} assetLight={'Light Placeholder'} />,
 };

apps/web/src/pages/get-started/consts/InAppUseCase.const.tsx

@@ -1,3 +1,8 @@
+import { useTheme } from '@emotion/react';
+import { ChannelTypeEnum } from '@novu/shared';
+import { ROUTES } from '@novu/shared-web';
+import { useGetIntegrationsByChannel } from '../../integrations/useGetIntegrationsByChannel';
+import { GetStartedAnimationContainer } from '../components/GetStartedAnimationContainer';
 import { Link, StepDescription, StepText } from './shared';
 import { OnboardingUseCase } from './types';
 import { CreateWorkflowButton } from '../components/CreateWorkflowButton';
@@ -13,9 +18,20 @@ export const InAppUseCaseConst: OnboardingUseCase = {
     {
       title: 'Configure In-App provider',
       Description: function () {
+        const { integrations } = useGetIntegrationsByChannel({ channelType: ChannelTypeEnum.IN_APP });
+
+        const getInAppIntegrationUrl = () => {
+          const inAppIntegration = integrations?.[0];
+          if (!inAppIntegration) {
+            return `${ROUTES.INTEGRATIONS_CREATE}?scrollTo=${ChannelTypeEnum.IN_APP}`;
+          }
+
+          return `${ROUTES.INTEGRATIONS}/${inAppIntegration._id}`;
+        };
+
         return (
           <StepDescription>
-            <Link children={'Create In-app provider'} href={'https://mantine.dev/core/timeline/'} />
+            <Link href={getInAppIntegrationUrl()}>Create In-app provider</Link>
             <StepText>
               {' instance, and select a framework to set up credentials in the Novu’s Integration store.'}
             </StepText>
@@ -54,7 +70,7 @@ export const InAppUseCaseConst: OnboardingUseCase = {
         return (
           <StepDescription>
             <StepText>Discover</StepText>
-            <Link children={' activity feed '} href={'https://mantine.dev/core/timeline/'} />
+            <Link href={ROUTES.ACTIVITIES}> activity feed </Link>
             <StepText>
               to monitor notifications activity and see potential issues with a specific provider or channel.
             </StepText>
@@ -63,20 +79,5 @@ export const InAppUseCaseConst: OnboardingUseCase = {
       },
     },
   ],
-  Demo: () => {
-    return (
-      <div
-        style={{
-          height: '520px',
-          backgroundColor: '#525266',
-          display: 'flex',
-          borderRadius: '2%',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <h1>Placeholder</h1>
-      </div>
-    );
-  },
+  Demo: () => <GetStartedAnimationContainer assetDark={'Dark Placeholder'} assetLight={'Light Placeholder'} />,
 };

apps/web/src/pages/get-started/consts/MultiChannelUseCase.const.tsx

@@ -1,3 +1,5 @@
+import { ROUTES } from '@novu/shared-web';
+import { GetStartedAnimationContainer } from '../components/GetStartedAnimationContainer';
 import { Link, StepDescription, StepText } from './shared';
 import { OnboardingUseCase } from './types';
 import { CreateWorkflowButton } from '../components/CreateWorkflowButton';
@@ -19,7 +21,7 @@ export const MultiChannelUseCaseConst: OnboardingUseCase = {
             <StepText>
               Novu has set up trial email and SMS providers for you. To expand your options, add more providers in the
             </StepText>
-            <Link children={' Integration store'} href={'https://mantine.dev/core/timeline/'} />
+            <Link href={ROUTES.INTEGRATIONS}> Integration store</Link>
             <StepText>.</StepText>
           </StepDescription>
         );
@@ -56,7 +58,7 @@ export const MultiChannelUseCaseConst: OnboardingUseCase = {
         return (
           <StepDescription>
             <StepText>Discover</StepText>
-            <Link children={' activity feed '} href={'https://mantine.dev/core/timeline/'} />
+            <Link href={ROUTES.ACTIVITIES}> activity feed </Link>
             <StepText>
               to monitor notifications activity and see potential issues with a specific provider or channel.
             </StepText>
@@ -65,7 +67,5 @@ export const MultiChannelUseCaseConst: OnboardingUseCase = {
       },
     },
   ],
-  Demo: () => {
-    return <h1>GIF</h1>;
-  },
+  Demo: () => <GetStartedAnimationContainer assetDark={'Dark Placeholder'} assetLight={'Light Placeholder'} />,
 };

apps/web/src/pages/get-started/consts/TranslationUseCase.const.tsx

@@ -1,10 +1,12 @@
+import { ROUTES } from '@novu/shared-web';
+import { GetStartedAnimationContainer } from '../components/GetStartedAnimationContainer';
 import { Link, StepDescription, StepText } from './shared';
 import { OnboardingUseCase } from './types';
 
 export const TranslationUseCaseConst: OnboardingUseCase = {
   title: 'Translate content',
   description:
-    'Upload translations to use them as variables or for auto-upload in the editor in a workflow.' +
+    'Upload translations to use them as variables or for auto-upload in the editor in a workflow. ' +
     'This feature is available for business and enterprise plan.',
   steps: [
     {
@@ -15,7 +17,7 @@ export const TranslationUseCaseConst: OnboardingUseCase = {
             <StepText>
               Novu has set up trial email and SMS providers for you. To expand your options, add more providers in the
             </StepText>
-            <Link children={' Integration store '} href={'https://mantine.dev/core/timeline/'} />
+            <Link href={ROUTES.INTEGRATIONS}> Integration store</Link>
             <StepText>.</StepText>
           </StepDescription>
         );
@@ -27,7 +29,7 @@ export const TranslationUseCaseConst: OnboardingUseCase = {
         return (
           <StepDescription>
             <StepText>Add a translation group and specify the languages in the</StepText>
-            <Link children={' Translations page'} href={'https://mantine.dev/core/timeline/'} />
+            <Link children={' Translations page'} href={ROUTES.TRANSLATIONS} />
             <StepText>.</StepText>
           </StepDescription>
         );
@@ -58,7 +60,5 @@ export const TranslationUseCaseConst: OnboardingUseCase = {
       },
     },
   ],
-  Demo: () => {
-    return <h1>GIF</h1>;
-  },
+  Demo: () => <GetStartedAnimationContainer assetDark={'Dark Placeholder'} assetLight={'Light Placeholder'} />,
 };

apps/web/src/pages/get-started/consts/shared.tsx

@@ -10,9 +10,9 @@ export const StepDescription = styled.div`
   margin: 0;
 `;
 
-export function Link({ href, children }: { href: string; children: string }) {
+export function Link({ children, ...linkProps }: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
   return (
-    <StyledLink href={href} target="_blank" rel="noreferrer noopener">
+    <StyledLink {...linkProps} target="_blank" rel="noreferrer noopener">
       {children}
     </StyledLink>
   );

apps/web/src/pages/integrations/useGetIntegrationsByChannel.ts

@@ -0,0 +1,31 @@
+import { ChannelTypeEnum } from '@novu/shared';
+import { useMemo } from 'react';
+import { useEnvController, useIntegrations } from '../../hooks';
+
+export interface IUseGetIntegrationsByChannelProps {
+  channelType: ChannelTypeEnum;
+}
+
+/**
+ * Fetch the integrations for a specified channel type in the current environment.
+ */
+export const useGetIntegrationsByChannel = ({ channelType }: IUseGetIntegrationsByChannelProps) => {
+  const { environment, isLoading: isEnvLoading } = useEnvController();
+  const { integrations: allIntegrations, loading: areIntegrationsLoading } = useIntegrations();
+  const isLoading = isEnvLoading || areIntegrationsLoading;
+
+  const integrations = useMemo(() => {
+    if (isLoading || !environment || !allIntegrations) {
+      return [];
+    }
+
+    return allIntegrations.filter(
+      (integration) => integration.channel === channelType && integration._environmentId === environment._id
+    );
+  }, [allIntegrations, isLoading, environment, channelType]);
+
+  return {
+    isLoading,
+    integrations,
+  };
+};