CXL lite: SSO redirect, videos access

packages/hooks-react/src/useContentProtection.ts

@@ -9,6 +9,7 @@ import AccountController from '@jwp/ott-common/src/controllers/AccountController
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { isTruthyCustomParamValue } from '@jwp/ott-common/src/utils/common';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
+import env from '@jwp/ott-common/src/env';
 
 import { generateJwtSignedContentToken, useOAuth } from './useOAuth';
 
@@ -57,11 +58,15 @@ const useContentProtection = <T>(
       // if self-signed is enabled in jwp dashboard
       // and
       // isOAuthMode is enabled and user is logged in and in premium mode
-      if (!!id && signingEnabled && isOAuthMode && !!user && !!user?.isPremium) {
+      if (!!id && signingEnabled && isOAuthMode && !!user && (env.APP_OAUTH_UNLOCK_ONLY_PREMIUM ? !!user?.isPremium : true)) {
         return generateJwtSignedContentToken(id, `Bearer ${bearerToken}`);
       }
     },
-    { enabled: signingEnabled && enabled && !!id && (isOAuthMode ? !!user?.isPremium : false), keepPreviousData: false, staleTime: 15 * 60 * 1000 },
+    {
+      enabled: signingEnabled && enabled && !!id && (isOAuthMode ? (env.APP_OAUTH_UNLOCK_ONLY_PREMIUM ? !!user?.isPremium : true) : false),
+      keepPreviousData: false,
+      staleTime: 15 * 60 * 1000,
+    },
   );
 
   const queryResult = useQuery<T | undefined>([type, id, params, token], async () => callback(token, drmPolicyId), {

packages/hooks-react/src/useProtectedMedia.ts

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import ApiService from '@jwp/ott-common/src/services/ApiService';
 import { getModule } from '@jwp/ott-common/src/modules/container';
+import env from '@jwp/ott-common/src/env';
 
 import useContentProtection from './useContentProtection';
 
@@ -15,7 +16,7 @@ export default function useProtectedMedia(item: PlaylistItem) {
   useEffect(() => {
     const m3u8 = contentProtectionQuery.data?.sources.find((source) => source.file.indexOf('.m3u8') !== -1);
     if (!m3u8) {
-      setIsUserBlocked(!contentProtectionQuery?.user?.isPremium);
+      setIsUserBlocked(env.APP_OAUTH_UNLOCK_ONLY_PREMIUM ? !contentProtectionQuery?.user?.isPremium : false);
       return;
     }
     fetch(m3u8.file, { method: 'HEAD' }).then((response) => {

packages/ui-react/src/components/Header/Header.test.tsx

@@ -39,6 +39,7 @@
         openLanguageMenu={vi.fn()}
         closeLanguageMenu={vi.fn()}
         isLoggedIn={false}
+        isPremium={false}
         canLogin={true}
         showPaymentsMenuItem={true}
         supportedLanguages={[]}
@@ -50,7 +51,7 @@
       </Header>,
     );
 
     expect(container).toMatchSnapshot();
   });
 
   test('renders header with nav buttons', () => {
@@ -77,6 +78,7 @@
         openLanguageMenu={vi.fn()}
         closeLanguageMenu={vi.fn()}
         isLoggedIn={false}
+        isPremium={false}
         canLogin={true}
         showPaymentsMenuItem={true}
         supportedLanguages={[]}
@@ -87,6 +89,6 @@
       />,
     );
 
     expect(container).toMatchSnapshot();
   });
 });

packages/ui-react/src/components/Header/Header.tsx

@@ -49,6 +49,7 @@ type Props = {
   closeLanguageMenu: () => void;
   children?: ReactNode;
   isLoggedIn: boolean;
+  isPremium: boolean;
   sideBarOpen: boolean;
   userMenuOpen: boolean;
   languageMenuOpen: boolean;
@@ -92,6 +93,7 @@ const Header: React.FC<Props> = ({
   onCloseSearchButtonClick,
   onSignUpButtonClick,
   isLoggedIn,
+  isPremium,
   sideBarOpen,
   userMenuOpen,
   languageMenuOpen,
@@ -154,7 +156,7 @@ const Header: React.FC<Props> = ({
 
     // FEAT:: back to main account cta if oauth mode
     if (isLoggedIn && isOAuthMode) {
-      return <OAuthBackToAccountButton targetUrl={env.APP_OAUTH_DASHBOARD_URL as string} className={styles.backToAccountButton} />;
+      return isPremium ? <OAuthBackToAccountButton targetUrl={env.APP_OAUTH_DASHBOARD_URL as string} className={styles.backToAccountButton} /> : null;
     }
 
     return isLoggedIn ? (

packages/ui-react/src/containers/Layout/Layout.tsx

@@ -41,6 +41,7 @@ const Layout = () => {
   );
   const userMenuTitleId = useOpaqueId('usermenu-title');
   const isLoggedIn = !!useAccountStore(({ user }) => user);
+  const isPremium = !!useAccountStore(({ user }) => user)?.isPremium;
   const favoritesEnabled = !!config.features?.favoritesList;
   const { menu, assets, siteName, description, features, styling, custom } = config;
 
@@ -228,6 +229,7 @@ const Layout = () => {
           supportedLanguages={supportedLanguages}
           currentLanguage={currentLanguage}
           isLoggedIn={isLoggedIn}
+          isPremium={isPremium}
           sideBarOpen={sideBarOpen}
           userMenuOpen={userMenuOpen}
           languageMenuOpen={languageMenuOpen}

packages/ui-react/src/pages/RedirectToExternal/RedirectToSSO.ts

@@ -0,0 +1,16 @@
+import React, { useEffect } from 'react';
+import { useOAuth } from '@jwp/ott-hooks-react/src/useOAuth';
+import { useNavigate } from 'react-router-dom';
+
+const RedirectToSSO: React.FC = () => {
+  const navigate = useNavigate();
+  const { login: oAuthLogin } = useOAuth();
+
+  useEffect(() => {
+    oAuthLogin();
+  }, [navigate, oAuthLogin]);
+
+  return null; // Render nothing
+};
+
+export default RedirectToSSO;

platforms/web/src/containers/AppRoutes/AppRoutes.tsx

@@ -15,6 +15,7 @@ import Home from '@jwp/ott-ui-react/src/pages/Home/Home';
 import Search from '@jwp/ott-ui-react/src/pages/Search/Search';
 import User from '@jwp/ott-ui-react/src/pages/User/User';
 import LegacySeries from '@jwp/ott-ui-react/src/pages/LegacySeries/LegacySeries';
+import RedirectToSSO from '@jwp/ott-ui-react/src/pages/RedirectToExternal/RedirectToSSO';
 import MediaScreenRouter from '@jwp/ott-ui-react/src/pages/ScreenRouting/MediaScreenRouter';
 import PlaylistScreenRouter from '@jwp/ott-ui-react/src/pages/ScreenRouting/PlaylistScreenRouter';
 import Layout from '@jwp/ott-ui-react/src/containers/Layout/Layout';
@@ -92,6 +93,7 @@ export default function AppRoutes() {
           element={<ErrorPage title={t('notfound_error_heading', 'Not found')} message={t('notfound_error_description', "This page doesn't exist.")} />}
         />
       </Route>
+      <Route path="/cxl-sso" element={<RedirectToSSO />} />
     </Routes>
   );
 }