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();