diff --git a/apps/web/src/pages/integrations/components/NovuInAppRemoveBranding.tsx b/apps/web/src/pages/integrations/components/NovuInAppRemoveBranding.tsx new file mode 100644 index 00000000000..bb707d00147 --- /dev/null +++ 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 ( + + ( + <> + + Remove Novu branding + + + + + + + Removes Novu branding from the Inbox when active + + )} + /> + + ); +}; diff --git a/apps/web/src/pages/integrations/components/multi-provider/UpdateProviderSidebar.tsx b/apps/web/src/pages/integrations/components/multi-provider/UpdateProviderSidebar.tsx index 725427a4420..fd52fcf461f 100644 --- a/apps/web/src/pages/integrations/components/multi-provider/UpdateProviderSidebar.tsx +++ b/apps/web/src/pages/integrations/components/multi-provider/UpdateProviderSidebar.tsx @@ -37,6 +37,7 @@ 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; @@ -44,6 +45,7 @@ interface IProviderForm { 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({ )} - {isNovuInAppProvider && } + {isNovuInAppProvider && ( + <> + + + + )} )} - {isNovuInAppProvider && } + {isNovuInAppProvider && ( + <> + + + + )}