feat: change navbar2 link behavior and tracking props (#481)

src/components/Navbar2/Navbar2.tsx

@@ -24,7 +24,7 @@ export const Navbar2 = React.memo((props: Navbar2Props) => {
     i18nNavbar = i18nNavbarTitlesDefault,
     i18nUserMenu = i18nUserMenuDefault,
     submenuItems = navbarSubmenu,
-    onClickMenuItem,
+    onClickNavbarItem,
     ...userMenuProps
   } = props
   const [toggle, setToggle] = useState(false)
@@ -52,11 +52,11 @@ export const Navbar2 = React.memo((props: Navbar2Props) => {
   const handleClickMenu = useCallback(
     (
       event: React.MouseEvent<HTMLElement, MouseEvent>,
-      eventTracking: string
+      options: { eventTrackingName: string; url?: string; isExternal?: boolean }
     ) => {
-      onClickMenuItem && onClickMenuItem(event, eventTracking)
+      onClickNavbarItem && onClickNavbarItem(event, options)
     },
-    [onClickMenuItem]
+    [onClickNavbarItem]
   )
 
   return (
@@ -106,7 +106,6 @@ export const Navbar2 = React.memo((props: Navbar2Props) => {
               {...userMenuProps}
               isSignedIn={isSignedIn}
               i18n={i18nUserMenu}
-              onClickMenuItem={onClickMenuItem}
             ></UserMenu>
           </div>
         </div>

src/components/Navbar2/Navbar2.types.ts

@@ -51,4 +51,8 @@ export type Navbar2Props = Omit<UserMenuProps, 'i18n'> & {
   i18nUserMenu?: UserMenuI18N
   activePage: Navbar2Pages | string
   className?: string
+  onClickNavbarItem?: (
+    event: React.MouseEvent<HTMLElement, MouseEvent>,
+    options: { eventTrackingName: string; url?: string; isExternal?: boolean }
+  ) => void
 }

src/components/Navbar2/SubMenu/SubMenu.types.ts

@@ -10,7 +10,7 @@ export type SubMenuProps = {
   ) => void
   onClickMenuOption?: (
     event: React.MouseEvent<HTMLElement, MouseEvent>,
-    eventTracking: string
+    options: { eventTrackingName: string; url?: string; isExternal?: boolean }
   ) => void
   isMobile?: boolean
 }

src/components/Navbar2/SubMenuItem/SubMenuItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 
 import classNames from 'classnames'
 import { SubMenuItemProps } from './SubMenuItem.types'
@@ -16,6 +16,22 @@ export const SubMenuItem = (props: SubMenuItemProps) => {
     eventTrackingName,
     onClickMenuOption
   } = props
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+      event.preventDefault()
+      onClickMenuOption &&
+        onClickMenuOption(event, { eventTrackingName, url: href, isExternal })
+      setTimeout(
+        () => {
+          window.open(href, isExternal ? '_blank' : '_self', 'noopener')
+        },
+        onClickMenuOption ? 300 : 0
+      )
+    },
+    [onClickMenuOption, eventTrackingName, href, isExternal]
+  )
+
   return (
     <div
       className={classNames(
@@ -24,7 +40,7 @@ export const SubMenuItem = (props: SubMenuItemProps) => {
         isExternal && 'dui-submenu-item-external'
       )}
     >
-      <a href={href} onClick={(e) => onClickMenuOption(e, eventTrackingName)}>
+      <a href={href} onClick={handleClick}>
         <h1>{title}</h1>
         <p>{description}</p>
         {isExternal && <ExternalIcon />}

src/components/Navbar2/SubMenuItem/SubMenuItem.types.ts

@@ -7,6 +7,6 @@ export type SubMenuItemProps = {
   className?: string
   onClickMenuOption?: (
     event: React.MouseEvent<HTMLElement, MouseEvent>,
-    eventTrackingName: string
+    options: { eventTrackingName: string; url?: string; isExternal?: boolean }
   ) => void
 }

src/components/UserMenu/UserMenu.tsx

@@ -22,7 +22,7 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
     onClickBalance,
     onClickOpen,
     onClickJumpIn,
-    onClickMenuItem,
+    onClickUserMenuItem,
     ...signInProps
   } = props
 
@@ -50,29 +50,37 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
 
   const handleClickJumpIn = useCallback(
     (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-      onClickMenuItem &&
-        onClickMenuItem(event, UserMenuEventId.JUMP_IN, trackingId)
+      onClickUserMenuItem &&
+        onClickUserMenuItem(event, {
+          eventTrackingName: UserMenuEventId.JUMP_IN,
+          trackingId,
+          url: config.get('EXPLORER_URL')
+        })
 
       setTimeout(
         () => {
           onClickJumpIn
             ? onClickJumpIn(event)
             : window.open(config.get('EXPLORER_URL'), '_blank', 'noopener')
         },
-        onClickMenuItem ? 300 : 0
+        onClickUserMenuItem ? 300 : 0
       )
     },
-    [onClickJumpIn, onClickMenuItem, trackingId]
+    [onClickJumpIn, onClickUserMenuItem, trackingId]
   )
 
   const handleClickSignIn = useCallback(
     (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-      onClickMenuItem &&
-        onClickMenuItem(event, UserMenuEventId.SIGN_IN, trackingId)
+      onClickUserMenuItem &&
+        onClickUserMenuItem(event, {
+          eventTrackingName: UserMenuEventId.SIGN_IN,
+          trackingId,
+          url: config.get('MARKETPLACE_URL')
+        })
 
       onClickSignIn(event)
     },
-    [onClickSignIn, onClickMenuItem, trackingId]
+    [onClickSignIn, onClickUserMenuItem, trackingId]
   )
 
   return (
@@ -91,7 +99,7 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
               isOpen={isOpen}
               i18n={i18n}
               onClickToggle={handleToggle}
-              onClickMenuItem={onClickMenuItem}
+              onClickUserMenuItem={onClickUserMenuItem}
               onClickBalance={onClickBalance}
             />
           )}

src/components/UserMenu/UserMenuSignedIn/UserMenuSignedIn.css

@@ -145,16 +145,21 @@
 .dui-user-menu-signed-in .menu-actions li,
 .dui-user-menu-signed-in .menu-actions .item {
   cursor: pointer;
-  padding: 40px 0 23.66px;
-  display: flex;
-  align-items: center;
+  padding: 0;
   border-bottom-color: var(--usermenu-item-border-enabled);
   color: var(--usermenu-item-text-enabled);
   font-size: 20px;
   font-style: normal;
   font-weight: 400;
   line-height: 18px;
   border-bottom-style: solid;
+}
+
+.dui-user-menu-signed-in .menu-actions li > div {
+  padding: 40px 0 23.66px;
+  width: 100%;
+  display: flex;
+  align-items: center;
   justify-content: space-between;
 }
 
@@ -219,7 +224,7 @@
   font-weight: normal;
 }
 
-.dui-user-menu-signed-in .menu-actions li .dui-icon-container {
+.dui-user-menu-signed-in .menu-actions li div .dui-icon-container {
   display: none;
 }
 
@@ -287,13 +292,14 @@
     position: relative;
   }
 
-  .dui-user-menu-signed-in .menu-actions li .dui-icon-container {
+  .dui-user-menu-signed-in .menu-actions li div.dui-icon-container {
     display: flex;
   }
 
   .dui-user-menu-signed-in
     .menu-actions
     li
+    div
     .dui-icon-container.centered
     svg
     path {
@@ -303,6 +309,7 @@
   .dui-user-menu-signed-in
     .menu-actions
     li:hover
+    div
     .dui-icon-container.centered
     svg
     path {