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 />}
  </>
  }