package.json

@@ -33,6 +33,7 @@
  "braintree-web": "3.41.0",
  "core-js": "~2.6.2",
  "dexie": "^2.0.4",
+ "dialog-polyfill": "^0.5.0",
  "ethjs": "~0.4.0",
  "ethjs-account": "^0.1.4",
  "ethjs-provider-signer": "^0.1.4",

src/app/common/components/dialog/dialog.component.html

+<dialog class="mdl-dialog" #dialog>
+ <h3 class="mdl-dialog__title">{{ title }}</h3>
+ <div class="mdl-dialog__content">
+ <p>{{ message }}</p>
+ </div>
+ <div class="mdl-dialog__actions">
+ <button type="button" class="mdl-button" (click)="confirmClick()">
+ {{ confirmButtonText }}
+ </button>
+ <button type="button" class="mdl-button" (click)="cancelClick()">
+ {{ cancelButtonText }}
+ </button>
+ </div>
+</dialog>

src/app/common/components/dialog/dialog.component.scss

+minds-dialog {
+ .mdl-dialog {
+ width: 50%;
+ height: auto;
+ }
+
+ .mdl-dialog__title {
+ font-size: 24px;
+ font-weight: 600;
+ text-align: center;
+ }
+
+ .mdl-dialog__content {
+ font-size: 16px;
+ text-align: left;
+ }
+
+ .mdl-dialog__actions {
+ text-align: center;
+ }
+}

src/app/common/components/dialog/dialog.component.ts

+import {
+ Component,
+ ElementRef,
+ EventEmitter,
+ Input,
+ Output,
+ ViewChild,
+} from '@angular/core';
+import dialogPolyfill from 'dialog-polyfill';
+
+@Component({
+ selector: 'minds-dialog',
+ templateUrl: 'dialog.component.html',
+})
+export class MindsDialog {
+ @Input() id: string;
+ @Input() title = 'Minds Dialog';
+ @Input() message = 'Confirm to continue';
+ @Input() confirmButtonText = 'Confirm';
+ @Input() cancelButtonText = 'Cancel';
+ @Input() showDialog = false;
+
+ @Output() confirmed: EventEmitter<boolean> = new EventEmitter();
+
+ @ViewChild('dialog', { static: true }) dialogElement: ElementRef;
+ private nativeDialogElement: any;
+
+ ngOnInit() {
+ dialogPolyfill.registerDialog(this.dialogElement.nativeElement);
+ this.nativeDialogElement = this.dialogElement.nativeElement;
+ }
+
+ ngOnChanges() {
+ if (this.showDialog) {
+ this.nativeDialogElement.showModal();
+ }
+ }
+
+ close() {
+ this.showDialog = false;
+ this.nativeDialogElement.close();
+ }
+
+ confirmClick() {
+ this.close();
+ this.confirmed.emit(true);
+ }
+
+ cancelClick() {
+ this.close();
+ this.confirmed.emit(false);
+ }
+}

src/app/modules/boost/boost.module.ts

@@ -35,6 +35,7 @@ import { BoostCampaignsCreatorComponent } from './campaigns/creator/creator.comp
 import { BoostCampaignsViewComponent } from './campaigns/view/view.component';
 import { BoostCampaignsListComponent } from './campaigns/list/list.component';
 import { BoostCampaignsCreatorContentSelectorComponent } from './campaigns/creator/content-selector.component';
+import { MindsDialog } from '../../common/components/dialog/dialog.component';
 
 const boostRoutes: Routes = [
  { path: 'boost', component: BoostMarketingComponent, pathMatch: 'full' },
@@ -170,6 +171,7 @@ const boostRoutes: Routes = [
  BoostCampaignsCreatorComponent,
  BoostCampaignsCreatorContentSelectorComponent,
  BoostCampaignsViewComponent,
+ MindsDialog,
  ],
  exports: [
  BoostConsoleNetworkListComponent,

src/app/modules/boost/campaigns/creator/creator.component.html

@@ -206,21 +206,34 @@
  </div>
  </div>
 
- <div class="m-form--field">
- <label class="m-form--field-label">
- <span i18n>Impressions</span>
- <m-tooltip icon="help" i18n>TBD</m-tooltip>
- </label>
+ <div class="m-form--fieldset">
+ <div class="m-form--field">
+ <label class="m-form--field-label">
+ <span i18n>Impressions</span>
+ <m-tooltip icon="help" i18n
+ >Number of Impressions Requested</m-tooltip
+ >
+ </label>
 
- <div class="m-form--read-only-value">
- <span>
- {{ campaign.impressions | number }}
+ <div class="m-form--read-only-value">
+ <span>
+ {{ campaign.impressions | number }}
+ <m-tooltip icon="warning" *ngIf="!preview?.canBeDelivered" i18n>
+ There might be issues trying to fulfill the impressions per day
+ goal for this campaign.
+ </m-tooltip>
+ </span>
+ </div>
 
- <m-tooltip icon="warning" *ngIf="preview?.cannot_fulfill_daily" i18n>
- There might be issues trying to fulfill the impressions per day goal
- for this campaign.
- </m-tooltip>
- </span>
+ <label class="m-form--field-label">
+ <span i18n>Avg Per Day</span>
+ <m-tooltip icon="help" i18n
+ >Calculated Average Impressions Per Day</m-tooltip
+ >
+ </label>
+ <div class="m-form--read-only-value">
+ <span>{{ preview.viewsPerDayRequested | number }}</span>
+ </div>
  </div>
  </div>
 
@@ -231,7 +244,7 @@
  [disabled]="!canSubmit() || inProgress"
  >
  <ng-container *ngIf="!isEditing; else isEditingSaveButtonTemplate" i18n
- >Pay and Create</ng-container
+ >Create Campaign</ng-container
  >
  </button>
 
@@ -260,3 +273,12 @@
 <div class="m-border m-error" *ngIf="isEditing && !campaign && currentError">
  {{ currentError }}
 </div>
+
+<minds-dialog
+ id="m-confirm-dialog"
+ title="Confirm Campaign"
+ message="The daily rate of impressions for your campaign may exceed our current available capacity.
+ Consider lowering the impressions requested or increasing the campaign end date."
+ [showDialog]="showCampaignWarningDialog"
+ (confirmed)="getCampaignWarningDialogStatus($event)"
+></minds-dialog>

src/app/modules/boost/campaigns/creator/creator.component.ts

@@ -13,10 +13,10 @@ import {
  CampaignPreview,
 } from '../campaigns.type';
 import { CampaignsService } from '../campaigns.service';
-import { Subject, Subscription } from 'rxjs';
+import { Observable, of, Subject, Subscription } from 'rxjs';
 import { Tag } from '../../../hashtags/types/tag';
 import { CampaignPaymentsService } from '../campaign-payments.service';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, takeUntil } from 'rxjs/operators';
 
 @Component({
  providers: [CampaignsService, CampaignPaymentsService],
@@ -36,16 +36,18 @@ export class BoostCampaignsCreatorComponent implements OnInit, OnDestroy {
  currentError: string = '';
 
  preview: CampaignPreview = {
- canBeDelivered: true,
+ canBeDelivered: false,
  durationDays: 0,
  globalViewsPerDay: 0,
  viewsPerDayRequested: 0,
  };
 
- protected route$: Subscription;
+ showCampaignWarningDialog = false;
+ confirmCampaignWarningDialog: Observable<boolean>;
+ dialogWaitActionSubscription;
 
+ protected route$: Subscription;
  protected previewSubject: Subject<Campaign> = new Subject();
-
  protected preview$: Subscription;
 
  constructor(
@@ -58,6 +60,7 @@ export class BoostCampaignsCreatorComponent implements OnInit, OnDestroy {
 
  ngOnInit() {
  this.reset();
+ of(this.confirmCampaignWarningDialog, false);
 
  this.route$ = this.route.params.subscribe(params => {
  if (params.from || params.type) {
@@ -206,6 +209,21 @@ export class BoostCampaignsCreatorComponent implements OnInit, OnDestroy {
  return;
  }
 
+ if (this.preview.canBeDelivered) {
+ this.submitAction();
+ } else {
+ this.showCampaignWarningDialog = true;
+ }
+ }
+
+ getCampaignWarningDialogStatus(status: boolean) {
+ this.showCampaignWarningDialog = false;
+ if (status) {
+ this.submitAction();
+ }
+ }
+
+ async submitAction() {
  this.currentError = '';
  this.inProgress = true;
  this.detectChanges();