refactor(project): simplify layout and app routes

jwplayer · Apr 24, 2024 · 0d3e3f7 · 0d3e3f7
1 parent f2285f7
commit 0d3e3f7
Show file tree

Hide file tree

Showing 41 changed files with 1,079 additions and 901 deletions.
diff --git a/packages/common/src/stores/UIStore.ts b/packages/common/src/stores/UIStore.ts
@@ -4,6 +4,7 @@ type UIState = {
   searchQuery: string;
   searchActive: boolean;
   userMenuOpen: boolean;
+  sideBarOpen: boolean;
   languageMenuOpen: boolean;
   preSearchPage?: string;
 };
@@ -12,5 +13,6 @@ export const useUIStore = createStore<UIState>('UIStore', () => ({
   searchQuery: '',
   searchActive: false,
   userMenuOpen: false,
+  sideBarOpen: false,
   languageMenuOpen: false,
 }));
diff --git a/packages/hooks-react/src/useProfiles.ts b/packages/hooks-react/src/useProfiles.ts
@@ -10,6 +10,7 @@ import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import ProfileController from '@jwp/ott-common/src/controllers/ProfileController';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { logDev } from '@jwp/ott-common/src/utils/common';
+import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 
 export const useSelectProfile = (options?: { onSuccess: () => void; onError: () => void }) => {
   const accountController = getModule(AccountController, false);
@@ -94,7 +95,9 @@ export const useProfileErrorHandler = () => {
 };
 
 export const useProfiles = (options?: UseQueryOptions<ListProfilesResponse | undefined, unknown, ListProfilesResponse | undefined, string[]>) => {
-  const { user } = useAccountStore();
+  const user = useAccountStore((state) => state.user);
+  const accessModel = useConfigStore((state) => state.accessModel);
+  const { profile } = useProfileStore();
   const isLoggedIn = !!user;
 
   const profileController = getModule(ProfileController);
@@ -106,8 +109,11 @@ export const useProfiles = (options?: UseQueryOptions<ListProfilesResponse | und
     enabled: isLoggedIn && profilesEnabled,
   });
 
+  const shouldManageProfiles = !!user && profilesEnabled && query.data?.canManageProfiles && !profile && (accessModel === 'SVOD' || accessModel === 'AUTHVOD');
+
   return {
     query,
+    shouldManageProfiles,
     profilesEnabled: !!query.data?.canManageProfiles,
   };
 };
diff --git a/packages/ui-react/src/components/Header/Header.module.scss b/packages/ui-react/src/components/Header/Header.module.scss
@@ -131,56 +131,21 @@
 .actions {
   position: relative;
   display: flex;
+  gap: calc(variables.$base-spacing / 2);
 
   @include responsive.mobile-and-tablet() {
     // the search container wants to position itself against the header
     position: static;
   }
 }
 
-.actionButton {
-  margin-left: calc(#{variables.$base-spacing} / 2);
-}
-
 //
 // Header search
 //
 .search {
   max-width: 180px;
 }
 
-//
-// Header search container
-//
-.searchContainer {
-  position: absolute;
-  left: -#{variables.$search-bar-width-desktop};
-  display: flex;
-  width: variables.$search-bar-width-desktop;
-
-  > div:first-child {
-    flex: 1;
-  }
-
-  @include responsive.mobile-and-tablet() {
-    right: 0;
-    left: 0;
-    width: auto;
-  }
-}
-
-//
-// Container for the user button(s)
-//
-.buttonContainer {
-  // this is a visual fix for putting a button with background besides a transparent button
-  margin-left: variables.$base-spacing;
-
-  > button:first-child {
-    margin-right: calc(#{variables.$base-spacing} / 2);
-  }
-}
-
 .brandCentered {
   .brand {
     text-align: center;
@@ -231,8 +196,7 @@
   .searchActive {
     .menu,
     .brand,
-    .buttonContainer,
-    .actionButton {
+    .actions > *:not(:first-child) { // all action buttons except the search bar
       display: none;
     }
   }

diff --git a/packages/ui-react/src/components/Header/Header.test.tsx b/packages/ui-react/src/components/Header/Header.test.tsx
@@ -1,52 +1,35 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AccountController from '@jwp/ott-common/src/controllers/AccountController';
-import { mockService } from '@jwp/ott-common/test/mockService';
-import { DEFAULT_FEATURES } from '@jwp/ott-common/src/constants';
+import Language from '@jwp/ott-theme/assets/icons/language.svg?react';
 
-import Button from '../Button/Button';
+import Icon from '../Icon/Icon';
 
 import Header from './Header';
+import HeaderSkipLink from './HeaderSkipLink';
+import HeaderMenu from './HeaderMenu';
+import HeaderBrand from './HeaderBrand';
+import HeaderNavigation from './HeaderNavigation';
+import HeaderActions from './HeaderActions';
+import HeaderActionButton from './HeaderActionButton';
 
 vi.mock('react-router-dom', () => ({
   NavLink: () => 'a',
+  Link: () => 'a',
 }));
 
 describe('<Header />', () => {
-  beforeEach(() => {
-    // TODO: remove AccountController from component
-    mockService(AccountController, { getFeatures: () => DEFAULT_FEATURES });
-  });
-
   test('renders header', () => {
-    const homeButton = [<Button key="key" label="Home" to="/" />];
     const { container } = render(
-      <Header
-        onMenuButtonClick={vi.fn()}
-        searchBarProps={{
-          query: '',
-          onQueryChange: vi.fn(),
-        }}
-        searchEnabled
-        searchActive={false}
-        onSearchButtonClick={vi.fn()}
-        onCloseSearchButtonClick={vi.fn()}
-        onLoginButtonClick={vi.fn()}
-        userMenuOpen={false}
-        sideBarOpen={false}
-        openUserPanel={vi.fn()}
-        closeUserPanel={vi.fn()}
-        openLanguageMenu={vi.fn()}
-        closeLanguageMenu={vi.fn()}
-        isLoggedIn={false}
-        canLogin={true}
-        showPaymentsMenuItem={true}
-        supportedLanguages={[]}
-        languageMenuOpen={false}
-        currentLanguage={undefined}
-        onLanguageClick={vi.fn()}
-      >
-        {homeButton}
+      <Header searchActive={false}>
+        <HeaderSkipLink />
+        <HeaderMenu onClick={vi.fn()} sideBarOpen={false} />
+        <HeaderBrand logoSrc={undefined} setLogoLoaded={vi.fn()} siteName="OTT Web App" />
+        <HeaderNavigation navItems={[]} />
+        <HeaderActions>
+          <HeaderActionButton>
+            <Icon icon={Language} />
+          </HeaderActionButton>
+        </HeaderActions>
       </Header>,
     );
 
@@ -59,32 +42,17 @@ describe('<Header />', () => {
       { label: 'Button test', to: '/test' },
     ];
     const { container } = render(
-      <Header
-        onMenuButtonClick={vi.fn()}
-        searchBarProps={{
-          query: '',
-          onQueryChange: vi.fn(),
-        }}
-        searchEnabled
-        searchActive={false}
-        onSearchButtonClick={vi.fn()}
-        onCloseSearchButtonClick={vi.fn()}
-        onLoginButtonClick={vi.fn()}
-        userMenuOpen={false}
-        sideBarOpen={false}
-        openUserPanel={vi.fn()}
-        closeUserPanel={vi.fn()}
-        openLanguageMenu={vi.fn()}
-        closeLanguageMenu={vi.fn()}
-        isLoggedIn={false}
-        canLogin={true}
-        showPaymentsMenuItem={true}
-        supportedLanguages={[]}
-        languageMenuOpen={false}
-        currentLanguage={undefined}
-        onLanguageClick={vi.fn()}
-        navItems={navItems}
-      />,
+      <Header searchActive={false}>
+        <HeaderSkipLink />
+        <HeaderMenu onClick={vi.fn()} sideBarOpen={false} />
+        <HeaderBrand logoSrc="/logo.png" setLogoLoaded={vi.fn()} siteName="OTT Web App" />
+        <HeaderNavigation navItems={navItems} />
+        <HeaderActions>
+          <HeaderActionButton>
+            <Icon icon={Language} />
+          </HeaderActionButton>
+        </HeaderActions>
+      </Header>,
     );
 
     expect(container).toMatchSnapshot();