premium callout

src/app/settings/premium.component.html

@@ -2,7 +2,7 @@
     <h1>{{'goPremium' | i18n}}</h1>
 </div>
 <app-callout type="success">
-    <p>{{'premiumSignUpAndGet' | i18n}}</p>
+    <p>{{'premiumUpgradeUnlockFeatures' | i18n}}</p>
     <ul class="fa-ul">
         <li>
             <i class="fa fa-check text-success fa-li"></i>

src/app/vault/vault.component.html

@@ -72,6 +72,17 @@
                     </a>
                 </div>
             </div>
+            <div class="card border-success mb-4" *ngIf="showPremiumCallout">
+                <div class="card-header bg-success text-white">
+                    <i class="fa fa-star fa-fw"></i> {{'goPremium' | i18n}}
+                </div>
+                <div class="card-body">
+                    <p>{{'premiumUpgradeUnlockFeatures' | i18n}}</p>
+                    <a class="btn btn-block btn-outline-secondary" routerLink="/settings/premium">
+                        {{'goPremium' | i18n}}
+                    </a>
+                </div>
+            </div>
             <div class="card">
                 <div class="card-header d-flex">
                     {{'organizations' | i18n}}

src/app/vault/vault.component.ts

@@ -33,6 +33,7 @@ import { ShareComponent } from './share.component';
 import { CryptoService } from 'jslib/abstractions/crypto.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { SyncService } from 'jslib/abstractions/sync.service';
 import { TokenService } from 'jslib/abstractions/token.service';
 import { UserService } from 'jslib/abstractions/user.service';
@@ -62,6 +63,7 @@ export class VaultComponent implements OnInit {
     showVerifyEmail = false;
     showBrowserOutdated = false;
     showUpdateKey = false;
+    showPremiumCallout = false;
 
     private modal: ModalComponent = null;
 
@@ -69,13 +71,17 @@ export class VaultComponent implements OnInit {
         private router: Router, private location: Location,
         private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
         private tokenService: TokenService, private cryptoService: CryptoService,
-        private messagingService: MessagingService, private userService: UserService) { }
+        private messagingService: MessagingService, private userService: UserService,
+        private platformUtilsService: PlatformUtilsService) { }
 
     async ngOnInit() {
         this.showVerifyEmail = !(await this.tokenService.getEmailVerified());
         this.showBrowserOutdated = window.navigator.userAgent.indexOf('MSIE') !== -1;
         const hasEncKey = await this.cryptoService.hasEncKey();
         this.showUpdateKey = !hasEncKey;
+        const isPremium = await this.tokenService.getPremium();
+        this.showPremiumCallout = !this.showVerifyEmail && !isPremium &&
+            !this.platformUtilsService.isSelfHost();
 
         this.route.queryParams.subscribe(async (params) => {
             await this.syncService.fullSync(false);

src/locales/en/messages.json

@@ -1267,8 +1267,8 @@
   "premiumUpdated": {
     "message": "You've upgraded to premium."
   },
-  "premiumSignUpAndGet": {
+  "premiumUpgradeUnlockFeatures": {
-    "message": "Sign up for a premium membership and get:"
+    "message": "Upgrade your account to a premium membership and unlock some great additional features."
   },
   "premiumSignUpStorage": {
     "message": "1 GB of encrypted file storage."