From 5635f65ee9e286e0a234580f392f9081a6fd9086 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Tue, 23 Jul 2024 10:34:11 -0400
Subject: [PATCH] feat(ui): add upsells for pro edition to settings menu

---
 invokeai/frontend/web/public/locales/en.json  |  6 +++++
 .../components/SettingsModal/SettingsMenu.tsx | 18 ++++++++++---
 .../SettingsModal/SettingsUpsellMenuItem.tsx  | 27 +++++++++++++++++++
 3 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsUpsellMenuItem.tsx

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 8fc600d6c96..70b44a301f6 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1654,6 +1654,12 @@
         "missingUpscaleModel": "Missing upscale model",
         "missingTileControlNetModel": "No valid tile ControlNet models installed"
     },
+    "upsell": {
+        "inviteTeammates": "Invite Teammates",
+        "professional": "Professional",
+        "professionalUpsell": "Available in Invoke’s Professional Edition. Click here or visit invoke.com/pricing for more details.",
+        "shareAccess": "Share Access"
+    },
     "ui": {
         "tabs": {
             "generation": "Generation",
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
index b424a129ee5..2e0bd637c1a 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
@@ -14,10 +14,18 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { discordLink, githubLink } from 'features/system/store/constants';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiBugBeetleBold, PiInfoBold, PiKeyboardBold, PiToggleRightFill } from 'react-icons/pi';
+import {
+  PiBugBeetleBold,
+  PiInfoBold,
+  PiKeyboardBold,
+  PiShareNetworkFill,
+  PiToggleRightFill,
+  PiUsersBold,
+} from 'react-icons/pi';
 import { RiDiscordFill, RiGithubFill, RiSettings4Line } from 'react-icons/ri';
 
 import SettingsModal from './SettingsModal';
+import { SettingsUpsellMenuItem } from './SettingsUpsellMenuItem';
 const SettingsMenu = () => {
   const { t } = useTranslation();
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -28,7 +36,7 @@ const SettingsMenu = () => {
   const isGithubLinkEnabled = useFeatureStatus('githubLink');
 
   return (
-    <Menu isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
+    <Menu isOpen={isOpen} onOpen={onOpen} onClose={onClose} autoSelect={false}>
       <MenuButton
         as={IconButton}
         variant="link"
@@ -36,8 +44,12 @@ const SettingsMenu = () => {
         icon={<RiSettings4Line fontSize={20} />}
         boxSize={8}
       />
+      <MenuList zIndex={1}>
+        <MenuGroup title={t('upsell.professional')}>
+          <SettingsUpsellMenuItem menuText={t('upsell.inviteTeammates')} menuIcon={PiUsersBold} />
+          <SettingsUpsellMenuItem menuText={t('upsell.shareAccess')} menuIcon={PiShareNetworkFill} />
+        </MenuGroup>
 
-      <MenuList>
         <MenuGroup title={t('common.communityLabel')}>
           {isGithubLinkEnabled && (
             <MenuItem as="a" href={githubLink} target="_blank" icon={<RiGithubFill />}>
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsUpsellMenuItem.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsUpsellMenuItem.tsx
new file mode 100644
index 00000000000..f9d9f88f114
--- /dev/null
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsUpsellMenuItem.tsx
@@ -0,0 +1,27 @@
+import { Box, Flex, Icon, MenuItem, Text, Tooltip } from '@invoke-ai/ui-library';
+import { useTranslation } from 'react-i18next';
+import type { IconType } from 'react-icons';
+import { PiArrowUpBold } from 'react-icons/pi';
+
+export const SettingsUpsellMenuItem = ({ menuText, menuIcon }: { menuText: string; menuIcon: IconType }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip label={t('upsell.professionalUpsell')} placement="right" zIndex={2}>
+      <MenuItem as="a" href="http://invoke.com/pricing" target="_blank" icon={menuIcon({})}>
+        <Flex gap="1" alignItems="center">
+          <Text pb="2px">{menuText}</Text>
+          <Box>
+            <Icon
+              as={PiArrowUpBold}
+              sx={{
+                mt: '2px',
+                fill: 'invokeYellow.500',
+              }}
+            />
+          </Box>
+        </Flex>
+      </MenuItem>
+    </Tooltip>
+  );
+};