Profile structure ux

frontend/src/app/components/branding/branding.component.css

@@ -171,3 +171,45 @@
         background-color: var(--color-accentedPalette-700);
     }
 }
+
+.upgrade-required {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 48px 24px;
+    border: 1px solid var(--color-primaryPalette-100);
+    height: fit-content;
+}
+
+@media (prefers-color-scheme: dark) {
+    .upgrade-required {
+        border-color: var(--color-primaryPalette-700);
+    }
+}
+
+.upgrade-required__icon {
+    font-size: 64px;
+    width: 64px;
+    height: 64px;
+    color: rgba(0, 0, 0, 0.38);
+    margin-bottom: 24px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .upgrade-required__icon {
+        color: rgba(255, 255, 255, 0.38);
+    }
+}
+
+.upgrade-required__description {
+    color: rgba(0, 0, 0, 0.64);
+    margin-bottom: 24px;
+    max-width: 400px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .upgrade-required__description {
+        color: rgba(255, 255, 255, 0.7);
+    }
+}

frontend/src/app/components/branding/branding.component.html

@@ -12,9 +12,9 @@ <h1 class="mat-h1 branding-page-header">Branding</h1>
 
             <div class="white-label">
                 <div class="white-label-settings">
-                    <div *ngIf="(currentPlan === 'free' || currentUser.role === 'DB_ADMIN') && isSaas && !isDemo"
+                    <div *ngIf="(currentPlan === 'free' || currentUser.role !== 'ADMIN') && isSaas && !isDemo"
                         class="white-label-settings__overlay"
-                        [matTooltip]="currentUser.role === 'DB_ADMIN' ? 'Contact your Account Owner to set up white label settings.' : 'To white‑label your domain, please upgrade to the Team plan or higher.'">
+                        [matTooltip]="currentUser.role !== 'ADMIN' ? 'Contact your Account Owner to set up white label settings.' : 'To white‑label your domain, please upgrade to the Team plan or higher.'">
                     </div>
                     <form *ngIf="isSaas"
                         class="text-filed-edit"
@@ -27,7 +27,7 @@ <h1 class="mat-h1 branding-page-header">Branding</h1>
                                 angularticsAction="Company: custom domain is edited"
                                 (change)="posthog.capture('Company: custom domain is edited')"
                                 placeholder="e.g. {{companyCustomDomainPlaceholder}}"
-                                [readonly]="currentUser.role === 'DB_ADMIN' || isCustomDomain"
+                                [readonly]="currentUser.role !== 'ADMIN' || isCustomDomain"
                                 [(ngModel)]="companyCustomDomainHostname">
                             <mat-hint *ngIf="currentPlan !== 'free' && currentUser.role === 'ADMIN' && isCustomDomain" class="cname-hint">
                                 To change the domain, visit <a href="https://app.rocketadmin.com/company" target="_blank">app.rocketadmin.com/company</a>
@@ -48,7 +48,7 @@ <h1 class="mat-h1 branding-page-header">Branding</h1>
                                 (click)="handleDeleteDomainDialogOpen()">
                                 Delete
                             </button>
-                            <a *ngIf="currentUser.role === 'DB_ADMIN' && companyCustomDomainHostname"
+                            <a *ngIf="currentUser.role !== 'ADMIN' && companyCustomDomainHostname"
                                 href="https://{{companyCustomDomainHostname}}"
                                 target="_blank"
                                 mat-button color="primary">
@@ -57,7 +57,7 @@ <h1 class="mat-h1 branding-page-header">Branding</h1>
                         </div>
                     </form>
 
-                    <div class="white-label-settings-images">
+                    <div *ngIf="currentUser.role === 'ADMIN' && !isDemo" class="white-label-settings-images">
                         <form #uploadLogoForm="ngForm" class="upload-logo-form">
                             <div class="file-uploader-appearance">
                                 <button mat-stroked-button type="button" (click)="logoInput.click()">
@@ -98,7 +98,7 @@ <h1 class="mat-h1 branding-page-header">Branding</h1>
                                 angularticsAction="Company: tab title domain is edited"
                                 (change)="posthog.capture('Company: tab title domain is edited')"
                                 placeholder="e.g. {{company.name}}"
-                                [readonly]="currentUser.role === 'DB_ADMIN'"
+                                [readonly]="currentUser.role !== 'ADMIN'"
                                 [(ngModel)]="companyTabTitle">
                             <mat-hint *ngIf="currentPlan === 'free'" class="cname-hint">
                                 Set the title that appears on the browser tab.
@@ -205,7 +205,7 @@ <h1 class="mat-h1 branding-page-header">Branding</h1>
                         </defs>
                     </svg>
                 </div>
-                <div *ngIf="isSaas" class="white-label-how-to">
+                <div *ngIf="isSaas && currentPlan !== 'free'" class="white-label-how-to">
                     <h3>Configure DNS Records</h3>
                     <p>
                         These instructions will guide you in setting up domain to have your admin panel on it.
@@ -225,6 +225,16 @@ <h3>Configure DNS Records</h3>
                     <br/>
                     <p>Done! Now wait for the server's updates; it might take 1-2 hours.</p>
                 </div>
+                <div *ngIf="isSaas && currentPlan === 'free'" class="upgrade-required">
+                    <mat-icon class="upgrade-required__icon">lock</mat-icon>
+                    <h2 class="mat-h2">White-label is available on Team plan</h2>
+                    <p class="upgrade-required__description">
+                        Upgrade to enable white-label settings for your organization.
+                    </p>
+                    <a mat-flat-button color="primary" routerLink="/upgrade">
+                        Upgrade
+                    </a>
+                </div>
             </div>
         </div>
     </div>

frontend/src/app/components/company/company.component.css

@@ -48,39 +48,6 @@
     gap: 4px;
 }
 
-.company-plan {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 32px;
-}
-
-.company-plan-name {
-    text-transform: capitalize;
-}
-
-.company-plan__paymnent-buttons {
-    display: flex;
-    gap: 12px;
-    margin-left: auto;
-}
-
-@media (width <= 600px) {
-    .upgrade-button__caption_desktop {
-        display: none;
-    }
-}
-
-.upgrade-button__caption_mobile {
-    display: none;
-}
-
-@media (width <= 600px) {
-    .upgrade-button__caption_mobile {
-        display: initial;
-    }
-}
-
 .tableHeader {
     display: flex;
     align-items: center;

frontend/src/app/components/company/company.component.html

@@ -31,37 +31,8 @@ <h1 class="mat-h1 companyPageHeader">
                 {{submittingChangedName ? 'Saving' : 'Save'}}
             </button>
         </div>
-
     </form>
 
-    <div *ngIf="isSaas" class="company-plan">
-        <div>
-            <strong>Current plan: </strong>
-            <span class="company-plan-name" data-testid="company-plan-string">{{currentPlan}}</span>
-        </div>
-        <div class="company-plan__paymnent-buttons">
-            <a *ngIf="currentUser && currentUser.role === 'ADMIN' && company.portal_link"
-                mat-button color="accent" class="upgrade-button"
-                [href]="company.portal_link" target="_blank"
-                data-testid="company-payment-portal-link"
-                angulartics2On="click"
-                angularticsAction="Company: Payment settings is clicked"
-                (click)="posthog.capture('Company: Payment settings is clicked')">
-                <span class="upgrade-button__caption_desktop">Payment settings</span>
-                <span class="upgrade-button__caption_mobile">Stripe</span>
-            </a>
-            <a *ngIf="currentUser && currentUser.role === 'ADMIN'"
-                mat-stroked-button color="accent" class="upgrade-button"
-                routerLink="/upgrade"
-                data-testid="company-payment-upgrade-link"
-                angulartics2On="click"
-                angularticsAction="Company: Upgrade is clicked"
-                (click)="posthog.capture('Company: Upgrade is clicked')">
-                {{ company.portal_link ? 'Change' : 'Upgrade'}}
-            </a>
-        </div>
-    </div>
-
     <div class="tableHeader">
         <h2 class="heading-2 tableHeader__heading">Members <span *ngIf="currentPlan === 'free' && isSaas" data-testid="company-members-max-string">(max 3)</span></h2>
         <div class="tableHeader__actions">

frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.html

@@ -41,13 +41,13 @@
         <a mat-list-item
             *ngIf="isSaas"
             routerLink="/upgrade"
-            [class.active-link]="activeTab() === 'pricing'"
+            [class.active-link]="activeTab() === 'subscription'"
             class="sidebar-nav-item"
             [class.sidebar-nav-item_collapsed]="collapsed()"
-            [matTooltip]="collapsed() ? 'Pricing' : ''"
+            [matTooltip]="collapsed() ? 'Subscription' : ''"
             matTooltipPosition="right">
             <mat-icon matListItemIcon>payments</mat-icon>
-            <span *ngIf="!collapsed()" matListItemTitle>Pricing</span>
+            <span *ngIf="!collapsed()" matListItemTitle>Subscription</span>
         </a>
         <a mat-list-item
             routerLink="/branding"
@@ -60,6 +60,7 @@
             <span *ngIf="!collapsed()" matListItemTitle>Branding</span>
         </a>
         <a mat-list-item
+            *ngIf="isSaas"
             routerLink="/saml"
             [class.active-link]="activeTab() === 'saml'"
             class="sidebar-nav-item"

frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.ts

@@ -22,7 +22,7 @@ import { environment } from 'src/environments/environment';
 	],
 })
 export class ProfileSidebarComponent implements OnInit, AfterViewInit {
-	activeTab = input<'account' | 'company' | 'pricing' | 'branding' | 'saml' | 'api' | 'secrets' | 'zapier'>('account');
+	activeTab = input<'account' | 'company' | 'subscription' | 'branding' | 'saml' | 'api' | 'secrets' | 'zapier'>('account');
 
 	collapsed = signal(false);
 	initialized = signal(false);

frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.css

@@ -3,6 +3,10 @@
     margin-bottom: 16px;
 }
 
+.full-width:first-child {
+    margin-top: 12px;
+}
+
 .master-encryption-section {
     margin-top: 8px;
     padding: 16px;

frontend/src/app/components/sso/sso.component.css

@@ -61,3 +61,37 @@
     margin-top: 16px;
     padding-bottom: 32px;
 }
+
+.upgrade-required {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 48px 24px;
+}
+
+.upgrade-required__icon {
+    font-size: 64px;
+    width: 64px;
+    height: 64px;
+    color: rgba(0, 0, 0, 0.38);
+    margin-bottom: 24px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .upgrade-required__icon {
+        color: rgba(255, 255, 255, 0.38);
+    }
+}
+
+.upgrade-required__description {
+    color: rgba(0, 0, 0, 0.64);
+    margin-bottom: 24px;
+    max-width: 400px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .upgrade-required__description {
+        color: rgba(255, 255, 255, 0.7);
+    }
+}

frontend/src/app/components/sso/sso.component.html

@@ -6,7 +6,20 @@
 
         <app-placeholder-sso *ngIf="!company"></app-placeholder-sso>
 
-        <div *ngIf="company" class="sso-page">
+        <div *ngIf="company && !hasEnterprisePlan" class="sso-page">
+            <div class="upgrade-required">
+                <mat-icon class="upgrade-required__icon">lock</mat-icon>
+                <h2 class="mat-h2">SAML SSO is available on Enterprise plan</h2>
+                <p class="upgrade-required__description">
+                    Upgrade to enable SAML Single Sign-On for your organization.
+                </p>
+                <a mat-flat-button color="primary" routerLink="/upgrade">
+                    Upgrade to Enterprise
+                </a>
+            </div>
+        </div>
+
+        <div *ngIf="company && hasEnterprisePlan" class="sso-page">
             <h1 class="mat-h1">SAML SSO Configuration</h1>
             <p class="sso-description">Configure SAML Single Sign-On for your organization.</p>
 

frontend/src/app/components/sso/sso.component.spec.ts

@@ -16,7 +16,7 @@ describe('SsoComponent', () => {
 		name: 'Test Company',
 		address: {},
 		portal_link: '',
-		subscriptionLevel: 'FREE_PLAN',
+		subscriptionLevel: 'ENTERPRISE_PLAN',
 		connections: [],
 		invitations: [],
 		is_payment_method_added: false,

frontend/src/app/components/sso/sso.component.ts

@@ -10,6 +10,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { SamlConfig, Company } from 'src/app/models/company';
+import { SubscriptionPlans } from 'src/app/models/user';
 import { CompanyService } from 'src/app/services/company.service';
 import { AlertComponent } from '../ui-components/alert/alert.component';
 import { ProfileSidebarComponent } from '../profile/profile-sidebar/profile-sidebar.component';
@@ -36,6 +37,7 @@ import { PlaceholderSsoComponent } from '../skeletons/placeholder-sso/placeholde
 })
 export class SsoComponent implements OnInit {
 	public company: Company = null;
+	public hasEnterprisePlan: boolean = false;
 
 	public samlConfigInitial: SamlConfig = {
 		name: '',
@@ -71,9 +73,14 @@ export class SsoComponent implements OnInit {
 
 		this._company.fetchCompany().subscribe(res => {
 			this.company = res;
-			this._company.fetchSamlConfiguration(res.id).subscribe((config) => {
-				if (config.length) this.samlConfig = config[0];
-			});
+			this.hasEnterprisePlan = res.subscriptionLevel === SubscriptionPlans.enterprise ||
+				res.subscriptionLevel === SubscriptionPlans.enterpriseAnnual;
+
+			if (this.hasEnterprisePlan) {
+				this._company.fetchSamlConfiguration(res.id).subscribe((config) => {
+					if (config.length) this.samlConfig = config[0];
+				});
+			}
 		});
 	}