feat(web): reference to new Inbox (#6299)

apps/api/src/app/integrations/usecases/create-novu-integrations/create-novu-integrations.usecase.ts

@@ -1,11 +1,22 @@
 import { Injectable } from '@nestjs/common';
 import { IntegrationRepository } from '@novu/dal';
-import { areNovuEmailCredentialsSet, areNovuSmsCredentialsSet } from '@novu/application-generic';
+import {
+  areNovuEmailCredentialsSet,
+  areNovuSmsCredentialsSet,
+  GetFeatureFlag,
+  GetFeatureFlagCommand,
+} from '@novu/application-generic';
 
 import { CreateNovuIntegrationsCommand } from './create-novu-integrations.command';
 import { CreateIntegration } from '../create-integration/create-integration.usecase';
 import { CreateIntegrationCommand } from '../create-integration/create-integration.command';
-import { ChannelTypeEnum, EmailProviderIdEnum, InAppProviderIdEnum, SmsProviderIdEnum } from '@novu/shared';
+import {
+  ChannelTypeEnum,
+  EmailProviderIdEnum,
+  FeatureFlagsKeysEnum,
+  InAppProviderIdEnum,
+  SmsProviderIdEnum,
+} from '@novu/shared';
 import { SetIntegrationAsPrimary } from '../set-integration-as-primary/set-integration-as-primary.usecase';
 import { SetIntegrationAsPrimaryCommand } from '../set-integration-as-primary/set-integration-as-primary.command';
 
@@ -14,7 +25,8 @@ export class CreateNovuIntegrations {
   constructor(
     private createIntegration: CreateIntegration,
     private integrationRepository: IntegrationRepository,
-    private setIntegrationAsPrimary: SetIntegrationAsPrimary
+    private setIntegrationAsPrimary: SetIntegrationAsPrimary,
+    private getFeatureFlag: GetFeatureFlag
   ) {}
 
   private async createEmailIntegration(command: CreateNovuIntegrationsCommand) {
@@ -96,12 +108,23 @@ export class CreateNovuIntegrations {
       _organizationId: command.organizationId,
       _environmentId: command.environmentId,
     });
+
     if (inAppIntegrationCount === 0) {
+      const isV2Enabled = await this.getFeatureFlag.execute(
+        GetFeatureFlagCommand.create({
+          userId: command.userId,
+          environmentId: command.environmentId,
+          organizationId: command.organizationId,
+          key: FeatureFlagsKeysEnum.IS_V2_ENABLED,
+        })
+      );
+
+      const name = isV2Enabled ? 'Novu Inbox' : 'Novu In-App';
       await this.createIntegration.execute(
         CreateIntegrationCommand.create({
+          name,
           providerId: InAppProviderIdEnum.Novu,
           channel: ChannelTypeEnum.IN_APP,
-          name: 'Novu In-App',
           active: true,
           check: false,
           userId: command.userId,

apps/api/src/app/integrations/usecases/index.ts

@@ -4,6 +4,7 @@ import {
   CalculateLimitNovuIntegration,
   ConditionsFilter,
   NormalizeVariables,
+  getFeatureFlag,
 } from '@novu/application-generic';
 
 import { GetWebhookSupportStatus } from './get-webhook-support-status/get-webhook-support-status.usecase';
@@ -35,4 +36,5 @@ export const USE_CASES = [
   SetIntegrationAsPrimary,
   CreateNovuIntegrations,
   NormalizeVariables,
+  getFeatureFlag,
 ];

apps/api/src/app/organization/e2e/create-organization.e2e.ts

@@ -10,6 +10,7 @@ import {
 import { UserSession } from '@novu/testing';
 import {
   ApiServiceLevelEnum,
+  ChannelTypeEnum,
   EmailProviderIdEnum,
   ICreateOrganizationDto,
   InAppProviderIdEnum,
@@ -110,13 +111,13 @@ describe('Create Organization - /organizations (POST) @skip-in-ee', async () =>
       const productionEnv = environments.find((e) => e.name === 'Production');
       const developmentEnv = environments.find((e) => e.name === 'Development');
       const novuEmailIntegration = integrations.filter(
-        (i) => i.active && i.name === 'Novu Email' && i.providerId === EmailProviderIdEnum.Novu
+        (i) => i.active && i.channel === ChannelTypeEnum.EMAIL && i.providerId === EmailProviderIdEnum.Novu
       );
       const novuSmsIntegration = integrations.filter(
-        (i) => i.active && i.name === 'Novu SMS' && i.providerId === SmsProviderIdEnum.Novu
+        (i) => i.active && i.channel === ChannelTypeEnum.SMS && i.providerId === SmsProviderIdEnum.Novu
       );
       const novuInAppIntegration = integrations.filter(
-        (i) => i.active && i.name === 'Novu In-App' && i.providerId === InAppProviderIdEnum.Novu
+        (i) => i.active && i.channel === ChannelTypeEnum.IN_APP && i.providerId === InAppProviderIdEnum.Novu
       );
       const novuEmailIntegrationProduction = novuEmailIntegration.filter(
         (el) => el._environmentId === productionEnv?._id

apps/web/src/pages/integrations/IntegrationsListModal.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useReducer, useState } from 'react';
 import { Group, Modal, ActionIcon, createStyles, MantineTheme } from '@mantine/core';
-import { ChannelTypeEnum } from '@novu/shared';
+import { ChannelTypeEnum, FeatureFlagsKeysEnum } from '@novu/shared';
 
-import { useKeyDown } from '../../hooks';
+import { useFeatureFlag, useKeyDown } from '../../hooks';
 import { colors, Close } from '@novu/design-system';
 import { useSegment } from '../../components/providers/SegmentProvider';
 import { IntegrationsStoreModalAnalytics } from './constants';
@@ -11,7 +11,8 @@ import { IntegrationsList } from './IntegrationsList';
 import { Row } from 'react-table';
 import { SelectProviderSidebar } from './components/multi-provider/SelectProviderSidebar';
 import { CreateProviderInstanceSidebar } from './components/multi-provider/CreateProviderInstanceSidebar';
-import { UpdateProviderSidebar } from './components/multi-provider/UpdateProviderSidebar';
+import { UpdateProviderSidebar as UpdateProviderSidebarOld } from './components/multi-provider/UpdateProviderSidebar';
+import { UpdateProviderSidebar } from './components/multi-provider/v2';
 
 enum SidebarType {
   SELECT = 'select',
@@ -85,6 +86,8 @@ export function IntegrationsListModal({
     provider: selectedProvider,
   });
 
+  const isV2Enabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_V2_ENABLED);
+
   const segment = useSegment();
   const { classes } = useModalStyles();
 
@@ -185,12 +188,22 @@ export function IntegrationsListModal({
         providerId={provider?.providerId}
         channel={provider?.channel}
       />
-      <UpdateProviderSidebar
-        key={integrationIdToEdit}
-        isOpened={sidebarType === SidebarType.UPDATE}
-        onClose={onSidebarClose}
-        integrationId={integrationIdToEdit}
-      />
+
+      {isV2Enabled ? (
+        <UpdateProviderSidebar
+          key={integrationIdToEdit}
+          isOpened={sidebarType === SidebarType.UPDATE}
+          onClose={onSidebarClose}
+          integrationId={integrationIdToEdit}
+        />
+      ) : (
+        <UpdateProviderSidebarOld
+          key={integrationIdToEdit}
+          isOpened={sidebarType === SidebarType.UPDATE}
+          onClose={onSidebarClose}
+          integrationId={integrationIdToEdit}
+        />
+      )}
     </Modal>
   );
 }

apps/web/src/pages/integrations/UpdateProviderPage.tsx

@@ -1,15 +1,22 @@
 import { useNavigate, useParams } from 'react-router-dom';
-
+import { FeatureFlagsKeysEnum } from '@novu/shared';
+import { useFeatureFlag } from '../../hooks';
 import { ROUTES } from '../../constants/routes';
-import { UpdateProviderSidebar } from './components/multi-provider/UpdateProviderSidebar';
+import { UpdateProviderSidebar } from './components/multi-provider/v2';
+import { UpdateProviderSidebar as UpdateProviderSidebarOld } from './components/multi-provider/UpdateProviderSidebar';
 
 export function UpdateProviderPage() {
   const { integrationId } = useParams();
   const navigate = useNavigate();
+  const isV2Enabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_V2_ENABLED);
 
   const onClose = () => {
     navigate(ROUTES.INTEGRATIONS);
   };
 
-  return <UpdateProviderSidebar key={integrationId} isOpened onClose={onClose} integrationId={integrationId} />;
+  return isV2Enabled ? (
+    <UpdateProviderSidebar key={integrationId} isOpened onClose={onClose} integrationId={integrationId} />
+  ) : (
+    <UpdateProviderSidebarOld key={integrationId} isOpened onClose={onClose} integrationId={integrationId} />
+  );
 }

apps/web/src/pages/integrations/components/multi-provider/CreateProviderInstanceSidebar.tsx

@@ -130,7 +130,7 @@ export function CreateProviderInstanceSidebar({
         name: data.name,
         environmentId,
       });
-      successMessage('Instance configuration is created');
+      successMessage('Integration was created');
       onIntegrationCreated(integrationId ?? '');
 
       queryClient.refetchQueries({