feat(web): display 'Remove Novu branding' toggle in In-App integratio…

…n panel (#6500)
novuhq · Sep 16, 2024 · 3ba10e9 · 3ba10e9
1 parent d71ab0d
commit 3ba10e9
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 2 deletions.
diff --git a/apps/web/src/pages/integrations/components/NovuInAppRemoveBranding.tsx b/apps/web/src/pages/integrations/components/NovuInAppRemoveBranding.tsx
@@ -0,0 +1,79 @@
+import styled from '@emotion/styled';
+import { Controller } from 'react-hook-form';
+import { Switch, Tooltip } from '@novu/design-system';
+import { useSubscription } from '../../../ee/billing/hooks/useSubscription';
+import { ApiServiceLevelEnum, FeatureFlagsKeysEnum } from '@novu/shared';
+import { useFeatureFlag } from '../../../hooks';
+
+const InputWrapper = styled.div`
+  > div {
+    width: 100%;
+  }
+`;
+
+const SwitchWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const SwitchDescription = styled.div`
+  color: ${({ theme }) => `${theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[6]}`};
+  font-size: 14px !important;
+  font-weight: 400;
+  margin-top: '0px';
+  margin-bottom: '10px';
+  line-height: '17px';
+`;
+
+const SwitchLabel = styled.div`
+  color: ${({ theme }) => `${theme.colorScheme === 'dark' ? theme.white : theme.colors.gray[8]}`};
+  font-size: 14px !important;
+  font-weight: 700;
+  margin: 5px auto 5px 0px;
+  line-height: 17px;
+`;
+
+export const NovuInAppRemoveBranding = ({ control }: { control: any }) => {
+  const { apiServiceLevel } = useSubscription();
+  const isImprovedBillingEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_IMPROVED_BILLING_ENABLED);
+
+  if (!isImprovedBillingEnabled) {
+    return null;
+  }
+
+  return (
+    <InputWrapper key="removeNovuBranding">
+      <Controller
+        name="removeNovuBranding"
+        control={control}
+        defaultValue={false}
+        render={({ field }) => (
+          <>
+            <SwitchWrapper>
+              <SwitchLabel>Remove Novu branding</SwitchLabel>
+              <Tooltip
+                disabled={apiServiceLevel !== ApiServiceLevelEnum.FREE}
+                withinPortal={false}
+                position="bottom"
+                width={250}
+                multiline
+                label="Please upgrade your plan to enable this feature"
+              >
+                <span>
+                  <Switch
+                    label={field.value ? 'Active' : 'Disabled'}
+                    data-test-id="remove-novu-branding"
+                    disabled={apiServiceLevel === ApiServiceLevelEnum.FREE}
+                    checked={field.value}
+                    onChange={field.onChange}
+                  />
+                </span>
+              </Tooltip>
+            </SwitchWrapper>
+            <SwitchDescription>Removes Novu branding from the Inbox when active</SwitchDescription>
+          </>
+        )}
+      />
+    </InputWrapper>
+  );
+};
diff --git a/apps/web/src/pages/integrations/components/multi-provider/UpdateProviderSidebar.tsx b/apps/web/src/pages/integrations/components/multi-provider/UpdateProviderSidebar.tsx
@@ -37,13 +37,15 @@ import { ShareableUrl } from '../Modal/ConnectIntegrationForm';
 import { Conditions, IConditions } from '../../../../components/conditions';
 import { useWebhookSupportStatus } from '../../../../api/hooks';
 import { defaultIntegrationConditionsProps } from '../../constants';
+import { NovuInAppRemoveBranding } from '../NovuInAppRemoveBranding';
 
 interface IProviderForm {
   name: string;
   credentials: ICredentialsDto;
   active: boolean;
   identifier: string;
   conditions: IConditions[];
+  removeNovuBranding?: boolean;
 }
 
 enum SidebarStateEnum {
@@ -154,6 +156,7 @@ export function UpdateProviderSidebar({
       }, {} as any),
       conditions: foundProvider.conditions,
       active: foundProvider.active,
+      removeNovuBranding: foundProvider.removeNovuBranding,
     });
   }, [reset, integrationId, providers]);
 
@@ -382,7 +385,12 @@ export function UpdateProviderSidebar({
             </InputWrapper>
           )}
           <ShareableUrl provider={selectedProvider?.providerId} hmacEnabled={!!hmacEnabled} />
-          {isNovuInAppProvider && <NovuInAppFrameworks onFrameworkClick={onFrameworkClickCallback} />}
+          {isNovuInAppProvider && (
+            <>
+              <NovuInAppFrameworks onFrameworkClick={onFrameworkClickCallback} />
+              <NovuInAppRemoveBranding control={control} />
+            </>
+          )}
         </When>
         <When truthy={isNovuInAppProvider && sidebarState === SidebarStateEnum.EXPANDED}>
           <SetupTimeline

diff --git a/apps/web/src/pages/integrations/components/multi-provider/v2/UpdateProviderSidebarV2.tsx b/apps/web/src/pages/integrations/components/multi-provider/v2/UpdateProviderSidebarV2.tsx
@@ -30,6 +30,7 @@ import { useProviders } from '../../../useProviders';
 import { IntegrationInput } from '../../IntegrationInput';
 import { ShareableUrl } from '../../Modal/ConnectIntegrationForm';
 import { NovuInAppFrameworkHeader } from '../../NovuInAppFrameworkHeader';
+import { NovuInAppRemoveBranding } from '../../NovuInAppRemoveBranding';
 import { SetupWarning } from '../../SetupWarning';
 import { UpdateIntegrationCommonFields } from '../../UpdateIntegrationCommonFields';
 import { UpdateIntegrationSidebarHeader } from '../../UpdateIntegrationSidebarHeader';
@@ -43,6 +44,7 @@ interface IProviderForm {
   active: boolean;
   identifier: string;
   conditions: IConditions[];
+  removeNovuBranding?: boolean;
 }
 
 enum SidebarStateEnum {
@@ -153,6 +155,7 @@ export function UpdateProviderSidebar({
       }, {} as any),
       conditions: foundProvider.conditions,
       active: foundProvider.active,
+      removeNovuBranding: foundProvider.removeNovuBranding,
     });
   }, [reset, integrationId, providers]);
 
@@ -380,7 +383,12 @@ export function UpdateProviderSidebar({
             </InputWrapper>
           )}
           <ShareableUrl provider={selectedProvider?.providerId} hmacEnabled={!!hmacEnabled} />
-          {isNovuInAppProvider && <NovuInAppFrameworks onFrameworkClick={onFrameworkClickCallback} />}
+          {isNovuInAppProvider && (
+            <>
+              <NovuInAppFrameworks onFrameworkClick={onFrameworkClickCallback} />
+              <NovuInAppRemoveBranding control={control} />
+            </>
+          )}
         </When>
         <When truthy={isNovuInAppProvider && sidebarState === SidebarStateEnum.EXPANDED}>
           <SetupTimeline

diff --git a/apps/web/src/pages/integrations/types.ts b/apps/web/src/pages/integrations/types.ts
@@ -34,6 +34,7 @@ export interface IIntegratedProvider {
   docReference: string;
   comingSoon: boolean;
   active: boolean;
+  removeNovuBranding?: boolean;
   connected: boolean;
   conditions?: IConditions[];
   logoFileName: ILogoFileName;
@@ -56,6 +57,7 @@ export interface IntegrationEntity {
   credentials: ICredentials;
   conditions?: IConditions[];
   active: boolean;
+  removeNovuBranding?: boolean;
   deleted: boolean;
   order: number;
   primary: boolean;

diff --git a/apps/web/src/pages/integrations/useProviders.ts b/apps/web/src/pages/integrations/useProviders.ts
@@ -86,6 +86,7 @@ function initializeProvidersByIntegration(integrations: IntegrationEntity[]): II
         identifier: integrationItem?.identifier,
         primary: integrationItem?.primary ?? false,
         conditions: integrationItem?.conditions ?? [],
+        removeNovuBranding: integrationItem?.removeNovuBranding ?? false,
       };
     });
 }