Merge pull request #13 from conversionxl/pawel/feat/custom-buttons

conversionxl · Nov 4, 2024 · b250968 · b250968
2 parents 746b4cf + 38559b2
commit b250968
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/packages/ui-react/src/components/Header/Header.tsx b/packages/ui-react/src/components/Header/Header.tsx
@@ -61,6 +61,8 @@ type Props = {
   favoritesEnabled?: boolean;
   siteName?: string;
   navItems?: NavItem[];
+  beforeItems?: CustomMenuItem[];
+  afterItems?: CustomMenuItem[];
 
   profilesData?: {
     currentProfile: Profile | null;
@@ -112,6 +114,8 @@ const Header: React.FC<Props> = ({
   navItems = [],
   isOAuthMode,
   rightSideItems,
+  beforeItems = [],
+  afterItems = [],
 }) => {
   const { t } = useTranslation('menu');
   const [logoLoaded, setLogoLoaded] = useState(false);
@@ -231,13 +235,26 @@ const Header: React.FC<Props> = ({
     if (navItems.length === 0) {
       return children;
     }
+
     return (
       <ul>
+        {beforeItems.length > 0 &&
+          beforeItems.map((item, index) => (
+            <li key={index}>
+              <Button activeClassname={styles.navButton} label={item.label} to={item.url} variant="text" />
+            </li>
+          ))}
         {navItems.map((item, index) => (
           <li key={index}>
             <Button activeClassname={styles.navButton} label={item.label} to={item.to} variant="text" />
           </li>
         ))}
+        {afterItems.length > 0 &&
+          afterItems.map((item, index) => (
+            <li key={index}>
+              <Button activeClassname={styles.navButton} label={item.label} to={item.url} variant="text" />
+            </li>
+          ))}
       </ul>
     );
   };

diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -250,6 +250,8 @@ const Layout = () => {
           }}
           navItems={navItems}
           isOAuthMode={isOAuthMode}
+          beforeItems={beforeItems}
+          afterItems={afterItems}
         >
           <Button activeClassname={styles.headerButton} label={t('home')} to="/" variant="text" />
           {menu.map((item) => (

diff --git a/packages/ui-react/src/hooks/useCustomCTAButtons.ts b/packages/ui-react/src/hooks/useCustomCTAButtons.ts
@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import type { CTAItem } from '../components/CTAButton/CTAButton';
 
 const useCustomCtaButtons = (player: any) => {
-  const itemData = player.props.seriesItem;
+  const itemData = player.props.seriesItem || player.props.item;
 
   // Check and setup CTAs
   const customItems = useMemo(() => {