feat(js): hide branding (#6513)

packages/js/src/ui/components/elements/Footer.tsx

@@ -1,11 +1,17 @@
 /* eslint-disable local-rules/no-class-without-style */
+import { Show } from 'solid-js';
+import { useInboxContext } from 'src/ui/context';
 import { Novu } from '../../icons';
 
 export const Footer = () => {
+  const { hideBranding } = useInboxContext();
+
   return (
-    <div class="nt-flex nt-shrink-0 nt-justify-center nt-items-center nt-gap-1 nt-mt-auto nt-pt-9 nt-pb-3 nt-text-foreground-alpha-200">
-      <Novu />
-      <span class="nt-text-xs">Powered by Novu</span>
-    </div>
+    <Show when={!hideBranding()}>
+      <div class="nt-flex nt-shrink-0 nt-justify-center nt-items-center nt-gap-1 nt-mt-auto nt-pt-9 nt-pb-3 nt-text-foreground-alpha-200">
+        <Novu />
+        <span class="nt-text-xs">Powered by Novu</span>
+      </div>
+    </Show>
   );
 };

packages/js/src/ui/context/InboxContext.tsx

@@ -1,6 +1,7 @@
 import { Accessor, createContext, createEffect, createSignal, ParentProps, Setter, useContext } from 'solid-js';
 import { NotificationFilter, Redirect } from '../../types';
 import { DEFAULT_REFERRER, DEFAULT_TARGET } from '../helpers';
+import { useNovuEvent } from '../helpers/useNovuEvent';
 import { NotificationStatus, RouterPush, Tab } from '../types';
 
 type InboxContextType = {
@@ -15,6 +16,7 @@ type InboxContextType = {
   isOpened: Accessor<boolean>;
   setIsOpened: Setter<boolean>;
   navigate: (url?: string, target?: Redirect['target']) => void;
+  hideBranding: Accessor<boolean>;
 };
 
 const InboxContext = createContext<InboxContextType | undefined>(undefined);
@@ -42,6 +44,7 @@ export const InboxProvider = (props: InboxProviderProps) => {
     ...STATUS_TO_FILTER[NotificationStatus.UNREAD_READ],
     tags: props.tabs.length > 0 ? props.tabs[0].value : [],
   });
+  const [hideBranding, setHideBranding] = createSignal(false);
 
   const setNewStatus = (newStatus: NotificationStatus) => {
     setStatus(newStatus);
@@ -88,6 +91,17 @@ export const InboxProvider = (props: InboxProviderProps) => {
     setFilter((old) => ({ ...old, tags: firstTab?.value ?? [] }));
   });
 
+  useNovuEvent({
+    event: 'session.initialize.resolved',
+    eventHandler: ({ data }) => {
+      if (!data) {
+        return;
+      }
+
+      setHideBranding(data.removeNovuBranding);
+    },
+  });
+
   return (
     <InboxContext.Provider
       value={{
@@ -102,6 +116,7 @@ export const InboxProvider = (props: InboxProviderProps) => {
         isOpened,
         setIsOpened,
         navigate,
+        hideBranding,
       }}
     >
       {props.children}