add see plans to tablet and mobile menu

Hubs-Foundation · Jul 5, 2023 · 00094ea · 00094ea
1 parent 8d14288
commit 00094ea
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/src/react-components/room/MoreMenuPopover.js b/src/react-components/room/MoreMenuPopover.js
@@ -9,6 +9,14 @@ import { useIntl, defineMessage } from "react-intl";
 
 function MoreMenuItem({ item, closePopover }) {
   const Icon = item.icon;
+  const imageAlt =
+    item.icon?.alt &&
+    defineMessage({
+      id: "{label}.{alt}",
+      defaultMessage: "{alt}"
+    });
+  const intl = useIntl();
+  const imageAltText = imageAlt && intl.formatMessage(imageAlt, { label: item.label, alt: item.icon.alt });
 
   return (
     <li onClick={closePopover}>
@@ -19,12 +27,12 @@ function MoreMenuItem({ item, closePopover }) {
           target={item.target || "_blank"}
           rel="noopener noreferrer"
         >
-          <Icon />
+          {item.icon?.src ? <img src={item.icon.src} alt={imageAltText} /> : <Icon />}
           <span>{item.label}</span>
         </a>
       ) : (
         <button className={styles.moreMenuItemTarget} onClick={event => item.onClick(item, event)}>
-          <Icon />
+          {item.icon?.src ? <img src={item.icon.src} alt={imageAltText} /> : <Icon />}
           <span>{item.label}</span>
         </button>
       )}
@@ -36,7 +44,10 @@ MoreMenuItem.propTypes = {
   item: PropTypes.shape({
     href: PropTypes.string,
     target: PropTypes.string,
-    icon: PropTypes.elementType.isRequired,
+    icon: PropTypes.oneOfType([
+      PropTypes.elementType,
+      PropTypes.shape({ src: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), alt: PropTypes.string })
+    ]).isRequired,
     label: PropTypes.node.isRequired,
     onClick: PropTypes.func
   }).isRequired,

diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
@@ -70,6 +70,7 @@ import { ReactComponent as VRIcon } from "./icons/VR.svg";
 import { ReactComponent as LeaveIcon } from "./icons/Leave.svg";
 import { ReactComponent as EnterIcon } from "./icons/Enter.svg";
 import { ReactComponent as InviteIcon } from "./icons/Invite.svg";
+import hubsLogo from "../assets/images/hubs-logo.png";
 import { PeopleSidebarContainer, userFromPresence } from "./room/PeopleSidebarContainer";
 import { ObjectListProvider } from "./room/hooks/useObjectList";
 import { ObjectsSidebarContainer } from "./room/ObjectsSidebarContainer";
@@ -1193,7 +1194,14 @@ class UIRoot extends Component {
             label: <FormattedMessage id="more-menu.preferences" defaultMessage="Preferences" />,
             icon: SettingsIcon,
             onClick: () => this.setState({ showPrefs: true })
-          }
+          },
+          (this.props.breakpoint === "sm" || this.props.breakpoint === "md") &&
+            isLockedDownDemo && {
+              id: "see-plans",
+              label: <FormattedMessage id="more-menu.see-plans-cta" defaultMessage={"See Plans"} />,
+              icon: { src: hubsLogo, alt: "Logo" },
+              href: "https://hubs.mozilla.com/#subscribe"
+            }
         ].filter(item => item)
       },
       {
@@ -1588,7 +1596,6 @@ class UIRoot extends Component {
                       scene={this.props.scene}
                       store={this.props.store}
                     />
-                    <SeePlansCTA />
                     {isLockedDownDemo && <SeePlansCTA />}
                   </>
                 }