Updates

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

@@ -30,6 +30,7 @@ type Props = {
   id?: string;
   as?: 'button' | 'a';
   activeClassname?: string;
+  target?: string;
 } & React.AriaAttributes;
 
 const Button: React.FC<Props> = ({

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

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
+import Button from '../Button/Button';
+
+type Props = {
+  label: string;
+  url: string;
+};
+
+export type CTAItem = {
+  label: string;
+  url: string;
+  description?: string;
+};
+
+const CTAButton = ({ label, url }: Props) => {
+  const breakpoint = useBreakpoint();
+
+  return <Button label={label} to={url} fullWidth={breakpoint < Breakpoint.md} target="_blank" />;
+};
+
+export default CTAButton;

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

@@ -50,7 +50,7 @@ function Card({
   url,
   tabIndex = 0,
 }: CardProps): JSX.Element {
-  const { title, duration, episodeNumber, seasonNumber, cardImage: image, mediaStatus, scheduledStart } = item;
+  const { title, duration, episodeNumber, seasonNumber, cardImage: image, mediaStatus, scheduledStart, series_label } = item;
   const {
     t,
     i18n: { language },
@@ -78,7 +78,7 @@ function Card({
     if (loading || disabled || !title) return null;
 
     if (isSeriesItem) {
-      return <div className={styles.tag}>{t('video:series')}</div>;
+      return <div className={styles.tag}>{(series_label as string) || t('video:series')}</div>;
     } else if (episodeNumber) {
       return <div className={styles.tag}>{formatSeriesMetaString(seasonNumber, episodeNumber)}</div>;
     } else if (duration) {

packages/ui-react/src/components/Header/Header.module.scss

@@ -255,3 +255,10 @@
     width: 80px;
   }
 }
+
+// Custom
+@include responsive.mobile-only() {
+  .customActions {
+    display: none;
+  }
+}

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

@@ -66,6 +66,15 @@ type Props = {
     selectProfile: ({ avatarUrl, id }: { avatarUrl: string; id: string }) => void;
     isSelectingProfile: boolean;
   };
+
+  rightSideItems?: CustomMenuItem[];
+};
+
+type CustomMenuItem = {
+  label: string;
+  url: string;
+  position?: 'before' | 'right' | 'after';
+  key: string;
 };
 
 const Header: React.FC<Props> = ({
@@ -97,6 +106,7 @@ const Header: React.FC<Props> = ({
   siteName,
   profilesData: { currentProfile, profiles, profilesEnabled, selectProfile, isSelectingProfile } = {},
   navItems = [],
+  rightSideItems,
 }) => {
   const { t } = useTranslation('menu');
   const [logoLoaded, setLogoLoaded] = useState(false);
@@ -236,6 +246,11 @@ const Header: React.FC<Props> = ({
           </div>
         )}
         <nav className={styles.nav}>{logoLoaded || !logoSrc ? renderNav() : null}</nav>
+        <div className={styles.customActions}>
+          {rightSideItems?.map((item) => (
+            <Button key={item.key} label={item.label} to={item.url} variant="text" />
+          ))}
+        </div>
         <div className={styles.actions}>
           {renderSearch()}
           {renderLanguageDropdown()}

packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss

@@ -182,3 +182,15 @@
   border: 3px solid white;
   border-radius: 100%;
 }
+
+// Custom
+
+/* stylelint-disable no-duplicate-selectors */
+
+.buttonBar {
+  flex-wrap: wrap;
+
+  > a {
+    margin: 6px;
+  }
+}

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

@@ -19,6 +19,8 @@ type Props = {
   favoriteButton?: React.ReactNode;
   trailerButton?: React.ReactNode;
   children: React.ReactNode;
+  ctaButton?: React.ReactNode;
+  extraButtons?: React.ReactNode[];
 };
 
 const VideoDetails: React.VFC<Props> = ({
@@ -32,6 +34,7 @@ const VideoDetails: React.VFC<Props> = ({
   favoriteButton,
   trailerButton,
   children,
+  extraButtons = [],
 }) => {
   const breakpoint: Breakpoint = useBreakpoint();
   const isMobile = breakpoint === Breakpoint.xs;
@@ -56,6 +59,9 @@ const VideoDetails: React.VFC<Props> = ({
               {trailerButton}
               {favoriteButton}
               {shareButton}
+              {extraButtons.map((button, index) => (
+                <React.Fragment key={index}>{button}</React.Fragment>
+              ))}
             </div>
           </div>
         </div>

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

@@ -14,9 +14,10 @@ type Props = {
   favoriteButton: React.ReactNode;
   trailerButton: React.ReactNode;
   live?: boolean;
+  extraButtons?: React.ReactNode[];
 };
 
-const VideoDetailsInline: React.FC<Props> = ({ title, description, primaryMetadata, shareButton, favoriteButton, trailerButton }) => {
+const VideoDetailsInline: React.FC<Props> = ({ title, description, primaryMetadata, shareButton, favoriteButton, trailerButton, extraButtons = [] }) => {
   const breakpoint: Breakpoint = useBreakpoint();
   const isMobile = breakpoint === Breakpoint.xs;
 
@@ -30,6 +31,9 @@ const VideoDetailsInline: React.FC<Props> = ({ title, description, primaryMetada
         {trailerButton}
         {favoriteButton}
         {shareButton}
+        {extraButtons.map((button, index) => (
+          <React.Fragment key={index}>{button}</React.Fragment>
+        ))}
       </div>
       <CollapsibleText text={description} className={styles.description} maxHeight={isMobile ? 60 : 'none'} />
     </div>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import type { Playlist, PlaylistItem } from '@jwp/ott-common/types/playlist';
 import type { AccessModel } from '@jwp/ott-common/types/config';
@@ -10,6 +10,8 @@ import Filter from '../Filter/Filter';
 import VideoDetails from '../VideoDetails/VideoDetails';
 import VideoDetailsInline from '../VideoDetailsInline/VideoDetailsInline';
 import VideoList from '../VideoList/VideoList';
+import useCustomCtaButtons from '../../hooks/useCustomCTAButtons';
+import CTAButton from '../CTAButton/CTAButton';
 
 import styles from './VideoLayout.module.scss';
 
@@ -161,6 +163,17 @@ const VideoLayout: React.FC<Props> = ({
     );
   };
 
+  const customCTAs = useCustomCtaButtons(player);
+
+  // Check and setup CTAs
+  const extraButtons: React.ReactNode[] = useMemo(() => {
+    return customCTAs.map((cta, index) => {
+      if (!cta) return undefined;
+
+      return <CTAButton key={index + cta.label} label={cta.label} url={cta.url} />;
+    });
+  }, [customCTAs]);
+
   if (inlineLayout) {
     return (
       <div className={styles.videoInlineLayout} data-testid={testId('inline-layout')}>
@@ -174,6 +187,7 @@ const VideoLayout: React.FC<Props> = ({
             shareButton={shareButton}
             favoriteButton={favoriteButton}
             trailerButton={trailerButton}
+            extraButtons={extraButtons}
           />
         </div>
         {renderRelatedVideos(isTablet)}
@@ -193,6 +207,7 @@ const VideoLayout: React.FC<Props> = ({
       shareButton={shareButton}
       primaryMetadata={primaryMetadata}
       secondaryMetadata={secondaryMetadata}
+      extraButtons={extraButtons}
     >
       {playlist && <div className={styles.relatedVideos}>{renderRelatedVideos(true)}</div>}
       {children}

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

@@ -41,6 +41,23 @@ const Layout = () => {
   const isLoggedIn = !!useAccountStore(({ user }) => user);
   const favoritesEnabled = !!config.features?.favoritesList;
   const { menu, assets, siteName, description, features, styling, custom } = config;
+
+  const customItems = useMemo(() => {
+    if (!custom) return [];
+
+    return Object.keys(custom)
+      .filter((key) => key.startsWith('navItem'))
+      .map((key) => {
+        const item = JSON.parse(custom[key] as string);
+        item.key = Math.random().toString();
+        return item;
+      });
+  }, [custom]);
+
+  const beforeItems = customItems.filter((item) => item.position === 'before');
+  const rightItems = customItems.filter((item) => item.position === 'right');
+  const afterItems = customItems.filter((item) => !['before', 'right'].includes(item.position));
+
   const metaDescription = description || t('default_description');
   const { footerText: configFooterText } = styling || {};
   const footerText = configFooterText || unicodeToChar(env.APP_FOOTER_TEXT);
@@ -199,8 +216,12 @@ const Layout = () => {
             selectProfile: ({ avatarUrl, id }) => selectProfile.mutate({ id, avatarUrl }),
             isSelectingProfile: selectProfile.isLoading,
           }}
-          navItems={navItems}
-        />
+        >
+          <Button activeClassname={styles.headerButton} label={t('home')} to="/" variant="text" />
+          {menu.map((item) => (
+            <Button activeClassname={styles.headerButton} key={item.contentId} label={item.label} to={playlistURL(item.contentId)} variant="text" />
+          ))}
+        </Header>
         <main id="content" className={styles.main} tabIndex={-1}>
           <Outlet />
         </main>
@@ -211,12 +232,21 @@ const Layout = () => {
           <li>
             <MenuButton label={t('home')} to="/" />
           </li>
-          {menu.map((item) => (
+          {beforeItems.map((item) => (
+          <MenuButton key={item.key} label={item.label} to={item.url} tabIndex={sideBarOpen ? 0 : -1} />
+        ))}
+        {menu.map((item) => (
             <li key={item.contentId}>
               <MenuButton label={item.label} to={playlistURL(item.contentId)} />
             </li>
           ))}
+        {afterItems.map((item) => (
+          <MenuButton key={item.key} label={item.label} to={item.url} tabIndex={sideBarOpen ? 0 : -1} />
+        ))}
         </ul>
+        {rightItems.map((item) => (
+          <MenuButton key={item.key} label={item.label} to={item.url} tabIndex={sideBarOpen ? 0 : -1} />
+        ))}
         {renderUserActions(sideBarOpen)}
       </Sidebar>
     </div>

packages/ui-react/src/hooks/useCustomCTAButtons.ts

@@ -0,0 +1,32 @@
+// React hook
+import { useMemo } from 'react';
+
+import type { CTAItem } from '../components/CTAButton/CTAButton';
+
+const useCustomCtaButtons = (player: any) => {
+  const itemData = player.props.seriesItem;
+
+  // Check and setup CTAs
+  const customItems = useMemo(() => {
+    const allowedKeys = ['cta_exam', 'cta_slides', 'cta_resource1', 'cta_resource2', 'cta_resource3'];
+    return allowedKeys.map((key) => {
+      if (itemData && !itemData[key]) {
+        return undefined;
+      }
+      if (itemData && itemData[key] && typeof itemData[key] === 'string') {
+        try {
+          const data = JSON.parse(itemData[key] as string) as CTAItem;
+          return data;
+        } catch (error: unknown) {
+          console.error(`Failed to parse custom item ${key}`);
+          console.error(error);
+          return undefined;
+        }
+      }
+    });
+  }, [itemData]);
+
+  return customItems;
+};
+
+export default useCustomCtaButtons;