feat(ui): add upsells for pro edition to settings menu

invoke-ai · Jul 23, 2024 · 5635f65 · 5635f65
1 parent 7c975f0
commit 5635f65
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 3 deletions.
diff --git 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
@@ -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,16 +36,20 @@ 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"
         aria-label={t('accessibility.menu')}
         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/...keai/frontend/web/src/features/system/components/SettingsModal/SettingsUpsellMenuItem.tsx b/...keai/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>
+  );
+};