feat: Added "Private vaults" as a Labs feature. Can be enabled from Preferences > General > Labs (#2562)

packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx

@@ -102,7 +102,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
           ) : null}
         </>
       )}
-      {application.featuresController.isEntitledToVaults() && (
+      {application.featuresController.isVaultsEnabled() && (
         <AddToVaultMenuOption
           iconClassName={iconClass}
           items={selectedFiles}

packages/web/src/javascripts/Components/Footer/VaultSelectionButton.tsx

@@ -16,7 +16,7 @@ const VaultSelectionButton = ({ isMobileNavigation = false }: { isMobileNavigati
   const [isOpen, setIsOpen] = useState(false)
   const toggleMenu = () => setIsOpen(!isOpen)
 
-  if (!application.featuresController.isEntitledToVaults()) {
+  if (!application.featuresController.isVaultsEnabled()) {
     return null
   }
 

packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx

@@ -286,7 +286,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
       )}
       <HorizontalSeparator classes="my-2" />
 
-      {application.featuresController.isEntitledToVaults() && (
+      {application.featuresController.isVaultsEnabled() && (
         <AddToVaultMenuOption iconClassName={iconClass} items={notes} disabled={!hasAdminPermissionForAllSharedNotes} />
       )}
 

packages/web/src/javascripts/Components/PasswordWizard/PasswordWizard.tsx

@@ -49,7 +49,7 @@ class PasswordWizard extends AbstractComponent<Props, State> {
       continueTitle: DEFAULT_CONTINUE_TITLE,
     }
 
-    if (props.application.featuresController.isEntitledToVaults()) {
+    if (props.application.featuresController.isVaultsEnabled()) {
       this.state = {
         ...baseState,
         lockContinue: true,

packages/web/src/javascripts/Components/Preferences/Controller/PreferencesSessionController.ts

@@ -26,7 +26,7 @@ export class PreferencesSessionController {
       ? PREFERENCES_MENU_ITEMS.slice()
       : READY_PREFERENCES_MENU_ITEMS.slice()
 
-    if (application.featuresController.isEntitledToVaults()) {
+    if (application.featuresController.isVaultsEnabled()) {
       menuItems.push({ id: 'vaults', label: 'Vaults', icon: 'safe-square', order: 5 })
     }
 

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults.tsx

@@ -31,6 +31,7 @@ const Vaults = observer(() => {
   const application = useApplication()
 
   const hasAccount = application.hasAccount()
+  const isSharedVaultsEnabled = application.featuresController.isEntitledToSharedVaults()
 
   const [vaults, setVaults] = useState<VaultListingInterface[]>([])
   const [canCreateMoreVaults, setCanCreateMoreVaults] = useState(true)
@@ -163,7 +164,7 @@ const Vaults = observer(() => {
           </PreferencesSegment>
         </PreferencesGroup>
       )}
-      {hasAccount && (
+      {hasAccount && isSharedVaultsEnabled && (
         <PreferencesGroup>
           <PreferencesSegment>
             <Title>Contacts</Title>
@@ -180,7 +181,7 @@ const Vaults = observer(() => {
           </PreferencesSegment>
         </PreferencesGroup>
       )}
-      {hasAccount && (
+      {hasAccount && isSharedVaultsEnabled && (
         <PreferencesGroup>
           <PreferencesSegment>
             <Title>CollaborationID</Title>
@@ -235,13 +236,15 @@ const Vaults = observer(() => {
           {canCreateMoreVaults ? (
             <div className="mt-2.5 flex gap-3">
               <Button label="Create Vault" onClick={createNewVault} />
-              {hasAccount && <Button label="Create Shared Vault" onClick={createNewSharedVault} />}
+              {hasAccount && isSharedVaultsEnabled && (
+                <Button label="Create Shared Vault" onClick={createNewSharedVault} />
+              )}
             </div>
           ) : (
             <div className="mt-3.5">
               <NoProSubscription
                 application={application}
-                text={<span>Please upgrade in order to increase your shared vault limit.</span>}
+                text={<span>Please upgrade in order to increase your vault limit.</span>}
               />
             </div>
           )}

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultItem.tsx

@@ -17,6 +17,8 @@ type Props = {
 const VaultItem = ({ vault }: Props) => {
   const application = useApplication()
 
+  const canEnableCollaboration = application.hasAccount() && application.featuresController.isEntitledToSharedVaults()
+
   const [isInviteModalOpen, setIsAddContactModalOpen] = useState(false)
   const closeInviteModal = () => setIsAddContactModalOpen(false)
 
@@ -128,7 +130,7 @@ const VaultItem = ({ vault }: Props) => {
             {isCurrentUserAdmin ? (
               vault.isSharedVaultListing() ? (
                 <Button colorStyle="info" label="Invite Contacts" onClick={openInviteModal} />
-              ) : application.hasAccount() ? (
+              ) : canEnableCollaboration ? (
                 <Button colorStyle="info" label="Enable Collaboration" onClick={convertToSharedVault} />
               ) : null
             ) : null}

packages/web/src/javascripts/Components/Tags/Navigation.tsx

@@ -124,7 +124,7 @@ const Navigation = forwardRef<HTMLDivElement, Props>(({ application, className,
         )}
         <PreferencesButton openPreferences={() => application.preferencesController.openPreferences()} />
         <QuickSettingsButton application={application} isMobileNavigation />
-        {application.featuresController.isEntitledToVaults() && <VaultSelectionButton isMobileNavigation />}
+        {application.featuresController.isVaultsEnabled() && <VaultSelectionButton isMobileNavigation />}
       </div>
       {children}
     </div>

packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx

@@ -81,7 +81,7 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag
           iconGridClassName="max-h-30"
         />
         <HorizontalSeparator classes="my-2" />
-        {application.featuresController.isEntitledToVaults() && (
+        {application.featuresController.isVaultsEnabled() && (
           <AddToVaultMenuOption iconClassName="mr-2 text-neutral" items={[selectedTag]} />
         )}
         <MenuItem className={'justify-between py-1.5'} onClick={onClickStar}>

packages/web/src/javascripts/Components/Vaults/AddToVaultMenuOption.tsx

@@ -120,7 +120,7 @@ const AddToVaultMenuOption = ({
     setIsSubMenuOpen((isOpen) => !isOpen)
   }, [])
 
-  if (!application.featuresController.isEntitledToVaults()) {
+  if (!application.featuresController.isVaultsEnabled()) {
     return null
   }