src/app/modules/plus/marketing.component.html

@@ -16,7 +16,29 @@
         </p>
 
         <div class="m-plusMarketing__subscription">
-          <m-plus--subscription></m-plus--subscription>
+          <m-plus--subscription
+            (onEnable)="detectChanges()"
+            (onDisable)="detectChanges()"
+          ></m-plus--subscription>
+        </div>
+
+        <div class="m-plusMarketing__verify" *ngIf="isPlus">
+          <i
+            class="material-icons"
+            [class.m-plusMarketingVerify__verifiedIcon]="isVerified"
+            [class.m-plusMarketingVerify__unverifiedIcon]="!isVerified"
+            >verified_user</i
+          >
+
+          <ng-container *ngIf="!isVerified; else alreadyVerifiedView">
+            <a (click)="openVerifyModal()" i18n
+              >Click here to request to be verified</a
+            >
+          </ng-container>
+
+          <ng-template #alreadyVerifiedView>
+            <span i18n>You are verified!</span>
+          </ng-template>
         </div>
       </div>
 
@@ -36,3 +58,8 @@
 
   <m-marketing__asFeaturedIn slot="2"></m-marketing__asFeaturedIn>
 </m-marketing>
+
+<m-plus--verify
+  *ngIf="showVerifyModal"
+  (closed)="closeVerifyModal()"
+></m-plus--verify>

src/app/modules/plus/marketing.component.scss

+@import '../../foundation/grid-values';
+
 .m-plus__marketing {
-  .m-marketing--hero--slogans ul {
-    font-size: 20px;
-    padding: 0 0 0 16px;
-    margin: 32px 0;
+  .m-plusMarketing__verify {
+    margin-top: 50px;
 
     @include m-theme() {
-      color: themed($m-white);
+      color: themed($m-black);
+    }
+
+    @media screen and (max-width: $m-grid-min-vp) {
+      margin-top: 30px;
+      text-align: center;
+    }
+
+    > * {
+      vertical-align: middle;
+      color: inherit;
+    }
+
+    > i.material-icons {
+      margin-right: 0.35em;
+
+      &.m-plusMarketingVerify__verifiedIcon {
+        @include m-theme() {
+          color: themed($m-blue);
+        }
+      }
+
+      &.m-plusMarketingVerify__unverifiedIcon {
+        opacity: 0.2;
+      }
     }
 
-    li {
-      margin-bottom: 8px;
+    > a {
+      border-bottom: 1px solid;
+      cursor: pointer;
 
-      &:last-child {
-        margin-bottom: 0;
+      @include m-theme() {
+        border-color: themed($m-grey-400);
       }
     }
   }

src/app/modules/plus/marketing.component.ts

-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+} from '@angular/core';
 
 @Component({
   selector: 'm-plus--marketing',
@@ -6,5 +10,33 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PlusMarketingComponent {
+  showVerifyModal: boolean = false;
+
   readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
+
+  readonly minds = window.Minds;
+
+  constructor(protected cd: ChangeDetectorRef) {}
+
+  openVerifyModal() {
+    this.showVerifyModal = true;
+  }
+
+  closeVerifyModal() {
+    this.showVerifyModal = false;
+    this.detectChanges();
+  }
+
+  detectChanges() {
+    this.cd.markForCheck();
+    this.cd.detectChanges();
+  }
+
+  get isPlus() {
+    return this.minds.user && this.minds.user.plus;
+  }
+
+  get isVerified() {
+    return this.minds.user && this.minds.user.verified;
+  }
 }

src/app/modules/plus/subscription/subscription.component.ts

@@ -142,6 +142,10 @@ export class PlusSubscriptionComponent implements OnInit {
   }
 
   async disable() {
+    if (!confirm('Click OK if you want to cancel your Plus subscription...')) {
+      return;
+    }
+
     this.inProgress = true;
     this.error = '';
     this.detectChanges();

src/app/modules/pro/subscription/subscription.component.ts

@@ -141,6 +141,10 @@ export class ProSubscriptionComponent implements OnInit {
   }
 
   async disable() {
+    if (!confirm('Click OK if you want to cancel your Pro subscription...')) {
+      return;
+    }
+
     this.inProgress = true;
     this.error = '';
     this.detectChanges();