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

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}