feature: onboarding experiment setup

.github/workflows/prod-deploy-api.yml

@@ -46,6 +46,26 @@ jobs:
       - name: build api
         run: pnpm build:api --skip-nx-cache
 
+      - uses: crazy-max/ghaction-setup-docker@v2
+        with:
+          version: v24.0.6
+          daemon-config: |
+            {
+              "features": {
+                "containerd-snapshotter": true
+              }
+            }
+
+      - name: Setup QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: linux/amd64,linux/arm64
+
+      - name: Set Up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver-opts: 'image=moby/buildkit:v0.12.4'
+
       - name: Set Bull MQ Env variable for EE
         if: contains(matrix.name, 'ee')
         shell: bash

.github/workflows/prod-deploy-inbound-mail.yml

@@ -36,6 +36,26 @@ jobs:
       - name: build api
         run: pnpm build:inbound-mail
 
+      - uses: crazy-max/ghaction-setup-docker@v2
+        with:
+          version: v24.0.6
+          daemon-config: |
+            {
+              "features": {
+                "containerd-snapshotter": true
+              }
+            }
+
+      - name: Setup QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: linux/amd64,linux/arm64
+
+      - name: Set Up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver-opts: 'image=moby/buildkit:v0.12.4'
+
       - name: Set Bull MQ Env variable for EE
         if: contains(matrix.name, 'ee')
         shell: bash

.github/workflows/prod-deploy-worker.yml

@@ -46,6 +46,26 @@ jobs:
       - name: build worker
         run: pnpm build:worker --skip-nx-cache
 
+      - uses: crazy-max/ghaction-setup-docker@v2
+        with:
+          version: v24.0.6
+          daemon-config: |
+            {
+              "features": {
+                "containerd-snapshotter": true
+              }
+            }
+
+      - name: Setup QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: linux/amd64,linux/arm64
+
+      - name: Set Up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver-opts: 'image=moby/buildkit:v0.12.4'
+
       - name: Set Bull MQ Env variable for EE
         if: contains(matrix.name, 'ee')
         shell: bash

.github/workflows/prod-deploy-ws.yml

@@ -46,6 +46,26 @@ jobs:
       - name: build api
         run: pnpm build:ws
 
+      - uses: crazy-max/ghaction-setup-docker@v2
+        with:
+          version: v24.0.6
+          daemon-config: |
+            {
+              "features": {
+                "containerd-snapshotter": true
+              }
+            }
+
+      - name: Setup QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: linux/amd64,linux/arm64
+
+      - name: Set Up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver-opts: 'image=moby/buildkit:v0.12.4'
+
       - name: Build, tag, and push image to Amazon ECR
         id: build-image
         env:
@@ -56,7 +76,7 @@ jobs:
           GH_PASSWORD: ${{ secrets.GH_PACKAGES }}
         run: |
           echo $GH_PASSWORD | docker login ghcr.io -u $GH_ACTOR --password-stdin 
-          BULL_MQ_PRO_NPM_TOKEN=${BULL_MQ_PRO_NPM_TOKEN} docker buildx build --secret id=BULL_MQ_PRO_NPM_TOKEN -t ghcr.io/$REGISTRY_OWNER/$DOCKER_NAME:$IMAGE_TAG --platform=linux/amd64,linux/arm64 --provenance=false -f apps/ws/Dockerfile .
+          BULL_MQ_PRO_NPM_TOKEN=${BULL_MQ_PRO_NPM_TOKEN} docker buildx build --secret id=BULL_MQ_PRO_NPM_TOKEN -t ghcr.io/$REGISTRY_OWNER/$DOCKER_NAME:$IMAGE_TAG --load --platform=linux/amd64,linux/arm64 --provenance=false -f apps/ws/Dockerfile .
           docker run --network=host --name api -dit --env NODE_ENV=test ghcr.io/$REGISTRY_OWNER/$DOCKER_NAME:$IMAGE_TAG
           docker run --network=host appropriate/curl --retry 10 --retry-delay 5 --retry-connrefused http://127.0.0.1:1340/v1/health-check | grep 'ok'
           docker tag ghcr.io/$REGISTRY_OWNER/$DOCKER_NAME:$IMAGE_TAG ghcr.io/$REGISTRY_OWNER/$DOCKER_NAME:prod

apps/web/src/api/hooks/notification-templates/useCreateOnboardingExperimentWorkflow.ts

@@ -0,0 +1,115 @@
+import { useCallback } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import { EmailProviderIdEnum, StepTypeEnum } from '@novu/shared';
+import type { IResponseError, ICreateNotificationTemplateDto, INotificationTemplate } from '@novu/shared';
+import { QueryKeys } from '@novu/shared-web';
+import { v4 as uuid4 } from 'uuid';
+
+import { createTemplate } from '../../notification-templates';
+import { parseUrl } from '../../../utils/routeUtils';
+import { ROUTES } from '../../../constants/routes.enum';
+import { errorMessage } from '../../../utils/notifications';
+import { useNotificationGroup, useTemplates, useIntegrations } from '../../../hooks';
+
+import { FIRST_100_WORKFLOWS } from '../../../constants/workflowConstants';
+import { IntegrationEntity } from '../../../pages/integrations/types';
+import { setIntegrationAsPrimary } from '../../../api/integration';
+
+export const useCreateOnboardingExperimentWorkflow = () => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const { groups, loading: areNotificationGroupLoading } = useNotificationGroup();
+
+  const { mutateAsync: createNotificationTemplate, isLoading: isCreating } = useMutation<
+    INotificationTemplate & { __source?: string },
+    IResponseError,
+    { template: ICreateNotificationTemplateDto; params: { __source?: string } }
+  >((data) => createTemplate(data.template, data.params), {
+    onSuccess: (template) => {
+      navigate(parseUrl(ROUTES.WORKFLOWS_EDIT_TEMPLATEID, { templateId: template._id as string }));
+    },
+    onError: () => {
+      errorMessage('Failed to create onboarding experiment Workflow');
+    },
+  });
+
+  const { mutate: makePrimaryIntegration } = useMutation<IntegrationEntity, IResponseError, { id: string }>(
+    ({ id }) => setIntegrationAsPrimary(id),
+    {
+      onSuccess: () => {
+        queryClient.refetchQueries({
+          predicate: ({ queryKey }) =>
+            queryKey.includes(QueryKeys.integrationsList) || queryKey.includes(QueryKeys.activeIntegrations),
+        });
+      },
+      onError: () => {
+        errorMessage("Failed to update integration's primary status");
+      },
+    }
+  );
+
+  const { templates = [], loading: templatesLoading } = useTemplates(FIRST_100_WORKFLOWS);
+
+  const { integrations } = useIntegrations();
+
+  const onboardingExperimentWorkflow = 'Onboarding Workflow';
+
+  const createOnboardingExperimentWorkflow = useCallback(() => {
+    if (templatesLoading) return;
+
+    const onboardingExperimentWorkflowExists = templates.find((template) =>
+      template.name.includes(onboardingExperimentWorkflow)
+    );
+
+    const novuEmailIntegration = integrations?.find(
+      (integration) => integration.providerId === EmailProviderIdEnum.Novu
+    );
+
+    if (novuEmailIntegration && !novuEmailIntegration?.primary) {
+      makePrimaryIntegration({ id: novuEmailIntegration?._id as string });
+    }
+    // }
+    if (onboardingExperimentWorkflowExists) {
+      navigate(
+        parseUrl(ROUTES.WORKFLOWS_EDIT_TEMPLATEID, { templateId: onboardingExperimentWorkflowExists._id as string })
+      );
+    } else {
+      const payload = {
+        name: onboardingExperimentWorkflow,
+        notificationGroupId: groups[0]._id,
+        active: true,
+        draft: false,
+        critical: false,
+        tags: ['onboarding'],
+        steps: [
+          {
+            template: {
+              subject: 'Your first email notification from Novu!',
+              senderName: 'Novu Onboarding',
+              type: StepTypeEnum.EMAIL,
+              contentType: 'customHtml',
+              content:
+                // eslint-disable-next-line max-len
+                'It\'s that simple! <br/>Learn more about creating workflows <a href="https://docs.novu.co/workflows/notification-workflows">here</a>.',
+            },
+            uuid: uuid4(),
+            active: true,
+          },
+        ],
+      };
+
+      createNotificationTemplate({
+        template: payload as any,
+        params: { __source: 'Onboarding Experiment Workflow' },
+      });
+    }
+  }, [templatesLoading, templates, integrations, makePrimaryIntegration, navigate, groups, createNotificationTemplate]);
+
+  return {
+    createOnboardingExperimentWorkflow,
+    isLoading: isCreating,
+    isDisabled: areNotificationGroupLoading || isCreating,
+  };
+};

apps/web/src/hooks/useOnboardingExperiment.ts

@@ -0,0 +1,16 @@
+import { ChannelTypeEnum, EmailProviderIdEnum, InAppProviderIdEnum, SmsProviderIdEnum } from '@novu/shared';
+import { useIntegrations } from './integrations';
+import { IS_DOCKER_HOSTED } from '../config';
+
+export function useOnboardingExperiment() {
+  const { integrations } = useIntegrations();
+
+  const emailIntegrationOtherThanNovu = integrations?.find(
+    (integration) =>
+      integration.channel === ChannelTypeEnum.EMAIL && integration.providerId !== EmailProviderIdEnum.Novu
+  );
+
+  return {
+    isOnboardingExperimentEnabled: !emailIntegrationOtherThanNovu && !IS_DOCKER_HOSTED,
+  };
+}

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

@@ -11,30 +11,41 @@ import { useSegment } from '../../../components/providers/SegmentProvider';
 import { useActiveIntegrations, useIntegrationLimit } from '../../../hooks';
 import type { IntegrationEntity } from '../../integrations/types';
 import { useCreateInAppIntegration } from '../../../hooks/useCreateInAppIntegration';
+import { useCreateOnboardingExperimentWorkflow } from '../../../api/hooks/notification-templates/useCreateOnboardingExperimentWorkflow';
+import { useOnboardingExperiment } from '../../../hooks/useOnboardingExperiment';
 
 export function ChannelsConfiguration({ setClickedChannel }: { setClickedChannel: Dispatch<any> }) {
   const segment = useSegment();
   const navigate = useNavigate();
   const { integrations } = useActiveIntegrations();
   const { isLimitReached } = useIntegrationLimit(ChannelTypeEnum.EMAIL);
   const { create, isLoading } = useCreateInAppIntegration((data: any) => {});
+  const { createOnboardingExperimentWorkflow } = useCreateOnboardingExperimentWorkflow();
+  const { isOnboardingExperimentEnabled } = useOnboardingExperiment();
 
   function trackClick(channel: IQuickStartChannelConfiguration, integrationActive: boolean) {
-    if (integrationActive) {
-      let providerId = getActiveIntegration(integrations, channel)?.providerId;
-
-      if (channel.type === ChannelTypeEnum.EMAIL && !providerId) {
-        providerId = InAppProviderIdEnum.Novu;
-      }
-
-      segment.track(OnBoardingAnalyticsEnum.UPDATE_PROVIDER_CLICK, {
-        channel: channel.type,
-        provider: providerId,
+    if (isOnboardingExperimentEnabled && channel.type === ChannelTypeEnum.EMAIL) {
+      segment.track(OnBoardingAnalyticsEnum.ONBOARDING_EXPERIMENT_TEST_NOTIFICATION, {
+        action: 'Get started - Send test notification',
+        experiment_id: '2024-w9-onb',
       });
     } else {
-      segment.track(OnBoardingAnalyticsEnum.CONFIGURE_PROVIDER_CLICK, {
-        channel: channel.type,
-      });
+      if (integrationActive) {
+        let providerId = getActiveIntegration(integrations, channel)?.providerId;
+
+        if (channel.type === ChannelTypeEnum.EMAIL && !providerId) {
+          providerId = InAppProviderIdEnum.Novu;
+        }
+
+        segment.track(OnBoardingAnalyticsEnum.UPDATE_PROVIDER_CLICK, {
+          channel: channel.type,
+          provider: providerId,
+        });
+      } else {
+        segment.track(OnBoardingAnalyticsEnum.CONFIGURE_PROVIDER_CLICK, {
+          channel: channel.type,
+        });
+      }
     }
   }
 
@@ -46,6 +57,7 @@ export function ChannelsConfiguration({ setClickedChannel }: { setClickedChannel
         if (channel.type === ChannelTypeEnum.EMAIL) {
           isIntegrationActive = isIntegrationActive || !isLimitReached;
         }
+        const isOnboardingExperiment = isOnboardingExperimentEnabled && channel.type === ChannelTypeEnum.EMAIL;
 
         return (
           <CardCol span={5} key={index}>
@@ -63,22 +75,31 @@ export function ChannelsConfiguration({ setClickedChannel }: { setClickedChannel
                 <Description>{channel.description}</Description>
                 <StyledButton
                   loading={isLoading}
-                  variant={'outline'}
+                  pulse={isOnboardingExperiment}
+                  fullWidth={isOnboardingExperiment}
+                  variant={isOnboardingExperiment ? 'gradient' : 'outline'}
                   onClick={async () => {
                     trackClick(channel, isIntegrationActive);
 
                     if (channel.type === ChannelTypeEnum.IN_APP) {
                       await create();
                     }
-
-                    channel.clickHandler({
-                      navigate,
-                      setClickedChannel,
-                      channelType: channel.type,
-                    });
+                    if (isOnboardingExperiment) {
+                      createOnboardingExperimentWorkflow();
+                    } else {
+                      channel.clickHandler({
+                        navigate,
+                        setClickedChannel,
+                        channelType: channel.type,
+                      });
+                    }
                   }}
                 >
-                  {isIntegrationActive ? 'Change Provider' : `Configure ${channel.displayName}`}
+                  {isOnboardingExperiment
+                    ? 'Send test notification now'
+                    : isIntegrationActive
+                    ? 'Change Provider'
+                    : `Configure ${channel.displayName}`}
                 </StyledButton>
               </ChannelCard>
             </Container>

apps/web/src/pages/quick-start/consts.tsx

@@ -279,6 +279,9 @@ export enum OnBoardingAnalyticsEnum {
   IN_APP_SANDBOX_SUCCESS_VISIT = 'Success Page Visit - [In-App Sandbox - Success]',
   IN_APP_SANDBOX_RUN_TRIGGER_CLICK = 'Run Trigger Clicked - [In-App Sandbox]',
   CONFIGURE_LATER_CLICK = 'Configure Later Click',
+
+  // Onboarding Experiment
+  ONBOARDING_EXPERIMENT_TEST_NOTIFICATION = 'Button Clicked - [Onboarding]',
 }
 
 export enum FlowTypeEnum {
@@ -287,16 +290,6 @@ export enum FlowTypeEnum {
 }
 
 export const quickStartChannels: IQuickStartChannelConfiguration[] = [
-  {
-    Icon: Bell,
-    title: 'In-App notifications',
-    displayName: 'In-App',
-    type: ChannelTypeEnum.IN_APP,
-    description: 'A set of APIs and components to create a customized notification center',
-    clickHandler: (options) => {
-      options.navigate(ROUTES.QUICK_START_NOTIFICATION_CENTER);
-    },
-  },
   {
     Icon: Mail,
     title: 'Email',
@@ -307,6 +300,16 @@ export const quickStartChannels: IQuickStartChannelConfiguration[] = [
       options.setClickedChannel({ open: true, channelType: options.channelType });
     },
   },
+  {
+    Icon: Bell,
+    title: 'In-App notifications',
+    displayName: 'In-App',
+    type: ChannelTypeEnum.IN_APP,
+    description: 'A set of APIs and components to create a customized notification center',
+    clickHandler: (options) => {
+      options.navigate(ROUTES.QUICK_START_NOTIFICATION_CENTER);
+    },
+  },
   {
     Icon: Mobile,
     title: 'Push',