feat(web): remove inbox branding nudge (#6508)

novuhq · Sep 17, 2024 · 63dc207 · 63dc207
1 parent 0586af4
commit 63dc207
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 64 deletions.
diff --git a/apps/web/src/pages/integrations/components/NovuInAppRemoveBranding.tsx b/apps/web/src/pages/integrations/components/NovuInAppRemoveBranding.tsx
@@ -1,30 +1,19 @@
 import styled from '@emotion/styled';
 import { Controller } from 'react-hook-form';
-import { Switch, Tooltip } from '@novu/design-system';
+import { Popover, Switch, Text, Button, useColorScheme } 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%;
-  }
-`;
+import { Group } from '@mantine/core';
+import { useNavigate } from 'react-router-dom';
+import { ROUTES } from '../../../constants/routes';
+import { IS_EE_AUTH_ENABLED } from '../../../config/index';
 
 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;
@@ -33,47 +22,73 @@ const SwitchLabel = styled.div`
   line-height: 17px;
 `;
 
+const PopoverContent = () => {
+  const navigate = useNavigate();
+
+  return (
+    <Group spacing={8}>
+      <Text>Upgrade your billing plan to remove Novu branding</Text>
+      <Button
+        size="xs"
+        variant="light"
+        onClick={() => {
+          navigate(ROUTES.MANAGE_ACCOUNT_BILLING);
+        }}
+      >
+        View plans
+      </Button>
+    </Group>
+  );
+};
+
 export const NovuInAppRemoveBranding = ({ control }: { control: any }) => {
   const { apiServiceLevel } = useSubscription();
+  const { colorScheme } = useColorScheme();
   const isImprovedBillingEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_IMPROVED_BILLING_ENABLED);
 
-  if (!isImprovedBillingEnabled) {
+  if (!isImprovedBillingEnabled && !IS_EE_AUTH_ENABLED) {
     return null;
   }
 
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>, field: any) => {
+    if (apiServiceLevel === ApiServiceLevelEnum.FREE) {
+      // If it's a free tier, don't change the value, just show the popover
+      e.preventDefault();
+      return;
+    }
+
+    field.onChange(!e.target.checked);
+  };
+
   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>
+    <Controller
+      name="removeNovuBranding"
+      control={control}
+      defaultValue={false}
+      render={({ field }) => (
+        <SwitchWrapper>
+          <SwitchLabel>Powered by Novu label</SwitchLabel>
+          <Popover
+            disabled={apiServiceLevel !== ApiServiceLevelEnum.FREE}
+            position="top"
+            withArrow={false}
+            offset={12}
+            styles={{
+              dropdown: { backgroundColor: colorScheme === 'dark' ? '#1C1C1F !important' : 'transparent' },
+            }}
+            width={192}
+            target={
+              <Switch
+                label={field.value ? 'Disabled' : 'Active'}
+                data-test-id="remove-novu-branding"
+                checked={!field.value}
+                onChange={(e) => onChange(e, field)}
+              />
+            }
+            content={<PopoverContent />}
+          />
+        </SwitchWrapper>
+      )}
+    />
   );
 };
diff --git a/apps/web/src/pages/integrations/components/multi-provider/UpdateProviderSidebar.tsx b/apps/web/src/pages/integrations/components/multi-provider/UpdateProviderSidebar.tsx
@@ -369,6 +369,7 @@ export function UpdateProviderSidebar({
               />
             </InputWrapper>
           ))}
+          {isNovuInAppProvider && <NovuInAppRemoveBranding control={control} />}
           {isWebhookEnabled && (
             <InputWrapper>
               <Input
@@ -385,12 +386,7 @@ export function UpdateProviderSidebar({
             </InputWrapper>
           )}
           <ShareableUrl provider={selectedProvider?.providerId} hmacEnabled={!!hmacEnabled} />
-          {isNovuInAppProvider && (
-            <>
-              <NovuInAppFrameworks onFrameworkClick={onFrameworkClickCallback} />
-              <NovuInAppRemoveBranding control={control} />
-            </>
-          )}
+          {isNovuInAppProvider && <NovuInAppFrameworks onFrameworkClick={onFrameworkClickCallback} />}
         </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
@@ -367,6 +367,7 @@ export function UpdateProviderSidebar({
               />
             </InputWrapper>
           ))}
+          {isNovuInAppProvider && <NovuInAppRemoveBranding control={control} />}
           {isWebhookEnabled && (
             <InputWrapper>
               <Input
@@ -383,12 +384,7 @@ export function UpdateProviderSidebar({
             </InputWrapper>
           )}
           <ShareableUrl provider={selectedProvider?.providerId} hmacEnabled={!!hmacEnabled} />
-          {isNovuInAppProvider && (
-            <>
-              <NovuInAppFrameworks onFrameworkClick={onFrameworkClickCallback} />
-              <NovuInAppRemoveBranding control={control} />
-            </>
-          )}
+          {isNovuInAppProvider && <NovuInAppFrameworks onFrameworkClick={onFrameworkClickCallback} />}
         </When>
         <When truthy={isNovuInAppProvider && sidebarState === SidebarStateEnum.EXPANDED}>
           <SetupTimeline

diff --git a/libs/design-system/src/button/Button.styles.ts b/libs/design-system/src/button/Button.styles.ts
@@ -14,6 +14,13 @@ const getLabelStyles = (disabled: boolean, variant?: string): any => {
     return {};
   }
 
+  if (variant === 'light') {
+    return {
+      fontWeight: 'normal',
+      fontSize: '12px',
+    };
+  }
+
   return {
     backgroundImage: colors.horizontal,
     backgroundClip: 'text',
@@ -115,6 +122,21 @@ export const getPulseStyles = () => {
   };
 };
 
+export const getLightStyles = (theme) => {
+  const dark = theme.colorScheme === 'dark';
+
+  return {
+    border: '1px solid transparent',
+    background: dark ? '#34343A' : colors.BGLight,
+    color: dark ? theme.white : colors.B17,
+    boxShadow: 'none',
+    '&:hover:not(:disabled)': {
+      background: dark ? '#34343A' : colors.BGLight,
+      filter: 'brightness(0.9)',
+    },
+  };
+};
+
 export default createStyles(
   (
     theme: MantineTheme,
@@ -131,6 +153,10 @@ export default createStyles(
       overrides = getSubtleStyles(theme);
     }
 
+    if (variant === 'light') {
+      overrides = getLightStyles(theme);
+    }
+
     if (pulse) {
       overrides = { ...overrides, ...getPulseStyles() };
     }

diff --git a/libs/design-system/src/button/Button.tsx b/libs/design-system/src/button/Button.tsx
@@ -3,13 +3,13 @@ import { Button as MantineButton, ButtonProps, Sx } from '@mantine/core';
 
 import useStyles from './Button.styles';
 
-export type Size = 'md' | 'lg' | undefined;
+export type Size = 'xs' | 'md' | 'lg' | undefined;
 
 export interface IButtonProps extends ButtonProps {
   id?: string;
   loading?: boolean;
   size?: Size;
-  variant?: 'outline' | 'gradient' | 'subtle';
+  variant?: 'outline' | 'gradient' | 'subtle' | 'light';
   disabled?: boolean;
   icon?: React.ReactNode;
   fullWidth?: boolean;