feat: Brand intro banner (M2-9068) (#629)

Author: andrevitalb

src/app/providers/theme-provider.tsx

@@ -48,6 +48,7 @@ const theme = createTheme({
           },
           '.MuiAlert-icon': {
             marginLeft: 'auto',
+            opacity: 1,
           },
           '.MuiAlert-message': {
             padding: 0,

src/app/store.ts

@@ -1,4 +1,4 @@
-import { PreloadedState, combineReducers, configureStore, Reducer } from '@reduxjs/toolkit';
+import { combineReducers, configureStore, PreloadedState, Reducer } from '@reduxjs/toolkit';
 import { RenderOptions } from '@testing-library/react';
 import persistReducer from 'redux-persist/es/persistReducer';
 import persistStore from 'redux-persist/es/persistStore';
@@ -8,6 +8,7 @@ import sessionStorage from 'redux-persist/lib/storage/session';
 import { appletModel } from '~/entities/applet';
 import { bannerModel } from '~/entities/banner';
 import { BannersStore } from '~/entities/banner/model';
+import { defaultBannersModel } from '~/entities/defaultBanners';
 import { userModel } from '~/entities/user';
 import { AutoCompletionModel } from '~/features/AutoCompletion';
 import { RootState } from '~/shared/utils';
@@ -30,6 +31,7 @@ export const rootReducer = combineReducers({
     bannerPersistConfig,
     bannerModel.reducer,
   ) as unknown as Reducer<BannersStore>,
+  defaultBanners: defaultBannersModel.reducer,
   autoCompletion: AutoCompletionModel.reducer,
 });
 

src/assets/curious_icon--white.png

@@ -1,4 +1,4 @@
-import { BannerType, actions } from '..';
+import { BannerOrder, BannerType, actions } from '..';
 
 import { BannerProps } from '~/shared/ui/Banners/Banner';
 import { useAppDispatch } from '~/shared/utils';
@@ -11,31 +11,35 @@ export const useBanners = () => {
   const dispatch = useAppDispatch();
 
   /** Displays a banner having the given key, and content text or BannerProps */
-  const addBanner = (key: BannerType, banner: BannerContent) => {
+  const addBanner = (
+    key: BannerType,
+    banner: BannerContent,
+    order: BannerOrder = BannerOrder.Default,
+  ) => {
     const bannerProps =
       banner === null || typeof banner === 'string' ? { children: banner } : banner;
 
-    dispatch(actions.addBanner({ key, bannerProps }));
+    dispatch(actions.addBanner({ key, bannerProps, order }));
   };
 
   /** Shorthand function for adding a success banner */
-  const addSuccessBanner = (banner: BannerContent) => {
-    addBanner('SuccessBanner', banner);
+  const addSuccessBanner = (banner: BannerContent, order: BannerOrder = BannerOrder.Default) => {
+    addBanner('SuccessBanner', banner, order);
   };
 
   /** Shorthand function for adding an error banner */
-  const addErrorBanner = (banner: BannerContent) => {
-    addBanner('ErrorBanner', banner);
+  const addErrorBanner = (banner: BannerContent, order: BannerOrder = BannerOrder.Default) => {
+    addBanner('ErrorBanner', banner, order);
   };
 
   /** Shorthand function for adding a warning banner */
-  const addWarningBanner = (banner: BannerContent) => {
-    addBanner('WarningBanner', banner);
+  const addWarningBanner = (banner: BannerContent, order: BannerOrder = BannerOrder.Default) => {
+    addBanner('WarningBanner', banner, order);
   };
 
   /** Shorthand function for adding an info banner */
-  const addInfoBanner = (banner: BannerContent) => {
-    addBanner('InfoBanner', banner);
+  const addInfoBanner = (banner: BannerContent, order: BannerOrder = BannerOrder.Default) => {
+    addBanner('InfoBanner', banner, order);
   };
 
   const removeBanner = (key: BannerType) => {

src/entities/banner/model/hooks/useBanners.ts

@@ -1,9 +1,22 @@
 import { BannerProps } from '~/shared/ui/Banners/Banner';
 
-export const Banners = ['SuccessBanner', 'ErrorBanner', 'WarningBanner', 'InfoBanner'] as const;
+export const Banners = [
+  'SuccessBanner',
+  'ErrorBanner',
+  'WarningBanner',
+  'InfoBanner',
+  'RebrandBanner',
+] as const;
 export type BannerType = (typeof Banners)[number];
 
+export enum BannerOrder {
+  Top = 0,
+  Default = 1,
+  Bottom = 2,
+}
+
 export type BannerPayload = {
   key: BannerType;
   bannerProps?: BannerProps;
+  order: BannerOrder;
 };

src/entities/banner/model/types.ts

@@ -0,0 +1 @@
+export * as defaultBannersModel from './model';

src/entities/defaultBanners/index.ts

@@ -0,0 +1,124 @@
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useDefaultBanners } from './useDefaultBanners';
+import { useRebrandBanner } from './useRebrandBanner';
+
+import { dismissedBannersSelector } from '~/entities/defaultBanners/model/selectors';
+import { userModel } from '~/entities/user';
+import { useAppSelector } from '~/shared/utils';
+
+// Mock dependencies
+vi.mock('~/entities/user', () => ({
+  userModel: {
+    hooks: {
+      useAuthorization: vi.fn(),
+    },
+  },
+}));
+
+vi.mock('~/shared/utils', () => ({
+  useAppSelector: vi.fn(),
+}));
+
+vi.mock('~/entities/defaultBanners/model/selectors', () => ({
+  dismissedBannersSelector: 'dismissedBannersSelector',
+}));
+
+vi.mock('./useRebrandBanner', () => ({
+  useRebrandBanner: vi.fn(),
+}));
+
+describe('useDefaultBanners', () => {
+  // Setup mock values
+  const mockUserId = 'test-user-123';
+  const mockDismissedBanners = {
+    [`user-${mockUserId}`]: ['RebrandBanner'],
+    global: [],
+  };
+
+  beforeEach(() => {
+    // Reset all mocks
+    vi.clearAllMocks();
+
+    // Setup default mock returns
+    (userModel.hooks.useAuthorization as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      isAuthorized: false,
+      user: null,
+    });
+
+    (useAppSelector as unknown as ReturnType<typeof vi.fn>).mockReturnValue(mockDismissedBanners);
+
+    (useRebrandBanner as unknown as ReturnType<typeof vi.fn>).mockReturnValue(undefined);
+  });
+
+  it('should use global banner scope when user is not authorized', () => {
+    // Setup
+    (userModel.hooks.useAuthorization as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      isAuthorized: false,
+      user: null,
+    });
+
+    // Execute
+    renderHook(() => useDefaultBanners());
+
+    // Verify
+    expect(useAppSelector).toHaveBeenCalledWith(dismissedBannersSelector);
+    expect(useRebrandBanner).toHaveBeenCalledWith(mockDismissedBanners, 'global');
+  });
+
+  it('should use user-specific banner scope when user is authorized', () => {
+    // Setup
+    (userModel.hooks.useAuthorization as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      isAuthorized: true,
+      user: { id: mockUserId },
+    });
+
+    // Execute
+    renderHook(() => useDefaultBanners());
+
+    // Verify
+    expect(useAppSelector).toHaveBeenCalledWith(dismissedBannersSelector);
+    expect(useRebrandBanner).toHaveBeenCalledWith(mockDismissedBanners, `user-${mockUserId}`);
+  });
+
+  it('should handle undefined user id when authorized', () => {
+    // Setup
+    (userModel.hooks.useAuthorization as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      isAuthorized: true,
+      user: { id: undefined },
+    });
+
+    // Execute
+    renderHook(() => useDefaultBanners());
+
+    // Verify
+    expect(useRebrandBanner).toHaveBeenCalledWith(mockDismissedBanners, 'user-undefined');
+  });
+
+  it('should handle null user when authorized', () => {
+    // Setup
+    (userModel.hooks.useAuthorization as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      isAuthorized: true,
+      user: null,
+    });
+
+    // Execute
+    renderHook(() => useDefaultBanners());
+
+    // Verify
+    expect(useRebrandBanner).toHaveBeenCalledWith(mockDismissedBanners, 'user-undefined');
+  });
+
+  it('should handle empty dismissed banners', () => {
+    // Setup
+    const emptyDismissedBanners = {};
+    (useAppSelector as unknown as ReturnType<typeof vi.fn>).mockReturnValue(emptyDismissedBanners);
+
+    // Execute
+    renderHook(() => useDefaultBanners());
+
+    // Verify
+    expect(useRebrandBanner).toHaveBeenCalledWith(emptyDismissedBanners, 'global');
+  });
+});

src/entities/defaultBanners/model/hooks/useDefaultBanners.test.ts

@@ -0,0 +1,16 @@
+import { useRebrandBanner } from './useRebrandBanner';
+
+import { dismissedBannersSelector } from '~/entities/defaultBanners/model/selectors';
+import { userModel } from '~/entities/user';
+import { useAppSelector } from '~/shared/utils';
+
+export const useDefaultBanners = () => {
+  const { isAuthorized, user } = userModel.hooks.useAuthorization();
+  const userId = user?.id;
+
+  const bannerScope = isAuthorized ? `user-${userId}` : 'global';
+
+  const dismissed = useAppSelector(dismissedBannersSelector);
+
+  useRebrandBanner(dismissed, bannerScope);
+};