Release v0.6.1

src/app/advertiser/campaign-details/ad-list/ad-list-item/ad-list-item.component.scss

@@ -9,7 +9,7 @@
 
     &:focus,
     &:hover {
-      animation: slide-right 0.5s ease-in;
+      animation: slide-right 0.5s cubic-bezier(0.42, 0, 0, 1.45);
       animation-fill-mode: forwards;
     }
   }

src/app/advertiser/campaign-details/campaign-details.component.ts

@@ -65,7 +65,6 @@ export class CampaignDetailsComponent extends HandleSubscription implements OnIn
         this.getChartData(this.currentChartFilterSettings, id)
       });
 
-
     const campaignSubscription = this.store.select('state', 'advertiser', 'campaigns')
       .subscribe((campaigns: Campaign[]) => {
         if (!campaigns || !campaigns.length) return;
@@ -80,7 +79,6 @@ export class CampaignDetailsComponent extends HandleSubscription implements OnIn
         }
       });
 
-
     this.subscriptions.push(chartFilterSubscription, campaignSubscription);
   }
 

src/app/advertiser/campaign-list/campaign-list-item/campaign-list-item.component.scss

@@ -4,7 +4,7 @@
   &__item-campaign-details {
     &:focus,
     &:hover {
-      animation: slide-right 0.5s ease-in;
+      animation: slide-right 0.5s cubic-bezier(0.42, 0, 0, 1.45);
       animation-fill-mode: forwards;
     }
   }

src/app/advertiser/edit-campaign/edit-campaign-basic-info/edit-campaign-basic-information.component.ts

@@ -62,7 +62,7 @@ export class EditCampaignBasicInformationComponent extends HandleSubscription im
 
   onSubmit() {
     this.campaignBasicInformationSubmitted = true;
-    if (!this.campaignBasicInfoForm.valid || !this.dateStart) {
+    if (!this.campaignBasicInfoForm.valid || !this.dateStart.value) {
       return;
     }
     this.campaignBasicInformationSubmitted =false

src/app/advertiser/edit-campaign/edit-campaign-create-ads/edit-campaign-create-ads.component.html

@@ -138,9 +138,23 @@
                 col-md-offset-1
                 col-md-3
                 col-xxl-2
-                col-xxxl-1"
+                col-xxxl-1
+                col"
             >
-              <div class="dwmth-form-input__box">
+              <div *ngIf="adForm.get('image') && adForm.get('size').value"
+                   class="dwmth-form-input__box">
+                <span class="dwmth-form-input__box
+                             dwmth-form-label
+                             campaign-edit-create-bnr__size-label">
+                  Size
+                </span>
+                <span class="dwmth-copy">
+                  {{adSizes[adForm.get('size').value]}}
+                </span>
+              </div>
+
+              <div *ngIf="adForm.get('html') && adForm.get('size').value !== null"
+                   class="dwmth-form-input__box">
                 <label class="dwmth-form-label">
                   Size
                 </label>
@@ -153,8 +167,7 @@
                   <mat-option
                     *ngFor="let adSize of adSizes; let i = index"
                     [value]="i"
-                    data-test="advertiser-edit-campaign-create-ads-form-size-option"
-                  >
+                    data-test="advertiser-edit-campaign-create-ads-form-size-option">
                     {{ adSize }}
                   </mat-option>
                 </mat-select>
@@ -383,7 +396,7 @@
                 dwmth-box--no-padding">
               Preview
             </div>
-            <div *ngIf="isImageTypeChosen(adForm) && adForm.get('image').value.src"
+            <div *ngIf="isImageTypeChosen(adForm) && adForm.get('image').value.src && adForm.get('size').value"
                  class="banner image-poster"
                  [ngStyle]="{
                 'width': adSizes[adForm.get('size').value].split('x')[0] + 'px',

src/app/advertiser/edit-campaign/edit-campaign-create-ads/edit-campaign-create-ads.component.scss

@@ -93,6 +93,10 @@
     background: pal(gray, x-light);
     border: 1px solid pal(gray, light);
   }
+
+  &__size-label {
+    margin-bottom: 14px;
+  }
 }
 
 .drag-and-drop-box {

src/app/advertiser/edit-campaign/edit-campaign-create-ads/edit-campaign-create-ads.component.ts

@@ -149,7 +149,7 @@ export class EditCampaignCreateAdsComponent extends HandleSubscription implement
   fileOverDropArea(isOverDrop, adIndex): void {
     this.imagesStatus.overDrop[adIndex] = isOverDrop;
     if (!isOverDrop && this.uploader.queue[0]) {
-      this.uploadBanner(this.uploader.queue[0]);
+      this.uploadBanner(this.uploader.queue[0], true);
     }
   }
 
@@ -159,8 +159,8 @@ export class EditCampaignCreateAdsComponent extends HandleSubscription implement
     });
   }
 
-  uploadBanner(event): void {
-    const file = event.target.files[0];
+  uploadBanner(event, dropped: boolean = false): void {
+    const file = dropped ? event.file.rawFile : event.target.files[0];
     const adIndex = this.getExpandedPanelIndex();
     const form = this.adForms[adIndex];
     const isUploadedTypeValid = this.isImageTypeChosen(form) ?
@@ -192,7 +192,9 @@ export class EditCampaignCreateAdsComponent extends HandleSubscription implement
 
   adjustBannerName(form: FormGroup): void {
     if (form.get('name').dirty === false) {
-      let name = `${adTypesEnum[form.get('type').value]} ${adSizesEnum[form.get('size').value]}`;
+      let name = adSizesEnum[form.get('size').value] ?
+        `${adTypesEnum[form.get('type').value]} ${adSizesEnum[form.get('size').value]}` :
+        `${adTypesEnum[form.get('type').value]}`;
       const matchingNames = this.adForms.filter(form => form.get('name').value.includes(name));
       if (matchingNames.length > 0) {
         name = `${name} ${matchingNames.length}`
@@ -299,13 +301,18 @@ export class EditCampaignCreateAdsComponent extends HandleSubscription implement
     if (adForm.get('image') && adForm.get('image').value.src) {
       const deleteAdSubscription = this.advertiserService.deleteAdImage(this.ads[adIndex].id, this.ads[adIndex].id).subscribe();
       this.subscriptions.push(deleteAdSubscription);
-
       this.imagesStatus.validation.splice(adIndex, 1);
     }
 
     this.adTypes.forEach((type) => delete adForm.controls[type]);
     adForm.controls[adTypeName] = new FormControl({src: ''});
     adForm.updateValueAndValidity();
+
+    if (adForm.get('html') && adForm.get('size').value === null) {
+      adForm.get('size').setValue(0);
+    } else {
+      adForm.get('size').setValue(null);
+    }
     this.adjustBannerName(adForm);
   }
 

src/app/models/initial-state/ad.ts

@@ -1,12 +1,15 @@
 import { Ad } from 'models/campaign.model';
-import { adSizesEnum, adStatusesEnum, adTypesEnum } from 'models/enum/ad.enum';
+import {
+  adStatusesEnum,
+  adTypesEnum
+} from 'models/enum/ad.enum';
 
 export const adInitialState: Ad = {
   id: 0,
   status: adStatusesEnum.ACTIVE,
   name: '',
   type: adTypesEnum.IMAGE,
-  size: adSizesEnum['728x90'],
+  size: null,
   clicks: 0,
   impressions: 0,
   ctr: 0,

src/app/models/initial-state/campaign.ts

@@ -1,9 +1,6 @@
-import * as moment from 'moment';
-
 import {Campaign, CampaignTotals} from 'models/campaign.model';
 import {campaignStatusesEnum} from 'models/enum/campaign.enum';
 import {classificationStatusesEnum} from 'models/enum/classification.enum';
-import { DATE_AND_TIME_FORMAT } from "common/utilities/consts";
 
 export const campaignsTotalsInitialState: CampaignTotals = {
   clicks: 0,
@@ -22,7 +19,7 @@ export const campaignInitialState: Campaign = {
     maxCpc: null,
     maxCpm: null,
     budget: null,
-    dateStart: moment(new Date()).format(DATE_AND_TIME_FORMAT),
+    dateStart: `${new Date()}`,
   },
 
   targeting: {
@@ -36,8 +33,6 @@ export const campaignInitialState: Campaign = {
   },
 
   ads: [],
-
   id: 0,
-
   classificationStatus: classificationStatusesEnum.DISABLED,
 };

src/app/publisher/resolvers/site.resolver.ts

@@ -1,16 +1,19 @@
-import {Injectable} from '@angular/core';
-import {ActivatedRouteSnapshot, Resolve} from '@angular/router';
-import {Observable} from 'rxjs/Observable';
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
 import * as moment from 'moment';
-import {Site} from 'models/site.model';
-import {Store} from "@ngrx/store";
-import {AppState} from "models/app-state.model";
+import { Site } from 'models/site.model';
+import { Store } from "@ngrx/store";
+import { AppState } from "models/app-state.model";
 import { LoadSite, LoadSiteTotals, SetLastEditedSite } from "store/publisher/publisher.actions";
+import { ChartFilterSettings } from "models/chart/chart-filter-settings.model";
+import { HandleSubscription } from "common/handle-subscription";
 
 
 @Injectable()
-export class SiteResolver implements Resolve<Site> {
+export class SiteResolver extends HandleSubscription implements Resolve<Site> {
   constructor(private store: Store<AppState>) {
+    super();
   }
 
   resolve(route: ActivatedRouteSnapshot): Observable<Site> {
@@ -22,25 +25,22 @@ export class SiteResolver implements Resolve<Site> {
   }
 
   initSiteData(id: number): void {
-    this.store.take(1).subscribe(store => {
-      const currentSite = store.state.publisher.sites
-        .find(site => site.id === id);
-
-      if (!currentSite) {
-        this.store.dispatch(new LoadSite(id));
-      } else {
-        const dateTo = moment().format();
-        const dateFrom = moment().subtract(7, 'd').format();
-        this.store.dispatch(new LoadSiteTotals({from: dateFrom, to: dateTo, id}));
-      }
-    });
+    const subscription = this.store.select('state', 'common', 'chartFilterSettings')
+      .subscribe((filterSetting: ChartFilterSettings) => {
+        this.store.dispatch(new LoadSite({
+          from: filterSetting.currentFrom,
+          to: filterSetting.currentTo,
+          id
+        }));
+      });
+    this.subscriptions.push(subscription)
   }
 
   waitForSiteDataToLoad(id: number, isInEditMode: boolean): Observable<Site> {
     return this.store.select('state', 'publisher', 'sites')
       .map(sites => sites.find(site => site.id === id))
       .filter(site => !!site)
-      .do((site)=> {
+      .do((site) => {
         if (isInEditMode) {
           this.store.dispatch(new SetLastEditedSite(site))
         } else {

src/app/publisher/site-list/site-list-item/site-list-item.component.scss

@@ -16,7 +16,7 @@
   &__item-site-details {
     &:focus,
     &:hover {
-      animation: slide-right 0.5s ease-in;
+      animation: slide-right 0.5s cubic-bezier(0.42, 0, 0, 1.45);
       animation-fill-mode: forwards;
     }
   }

src/app/store/publisher/publisher.actions.ts

@@ -77,7 +77,7 @@ export class LoadSitesFailure implements Action {
 export class LoadSite implements Action {
   readonly type: string = LOAD_SITE;
 
-  constructor(public payload: number) {
+  constructor(public payload:  {from: string, to: string, id: number}) {
   }
 }
 

src/app/store/publisher/publisher.effects.ts

@@ -45,10 +45,8 @@ export class PublisherEffects {
   loadSite$ = this.actions$
     .ofType(publisherActions.LOAD_SITE)
     .map(toPayload)
-    .switchMap((id) => this.service.getSite(id)
+    .switchMap(({id, from, to}) => this.service.getSite(id)
       .switchMap((site) => {
-        const to = moment().format();
-        const from = moment().subtract(30, 'd').format();
         return [
           new publisherActions.LoadSiteSuccess(site),
           new publisherActions.LoadSiteTotals({from, to, id})

src/app/store/publisher/publisher.reducers.ts

@@ -10,6 +10,18 @@ const initialState: PublisherState = {
   languagesList: [],
   filteringCriteria: [],
 };
+const unitStatsInitialState = {
+  clicks: 0,
+  impressions: 0,
+  ctr: 0,
+  averageRpm: 0,
+  averageRpc: 0,
+  revenue: 0,
+};
+
+/** FIXME -> PAN-364 -> refactor reducer by creating class containing needed helper function and data
+ * set to help modify data in less repetitive more readable way
+ */
 
 export function publisherReducers(state = initialState, action: PublisherActions.actions | authActions.actions) {
   switch (action.type) {
@@ -81,12 +93,20 @@ export function publisherReducers(state = initialState, action: PublisherActions
           }],
         };
       }
+
+      const resetUnitStats = selectedSite.adUnits.map(el => {
+        return {
+          ...el,
+          ...unitStatsInitialState
+        }
+      });
       return {
         ...state,
         sites: [
           ...filteredSites,
           {
             ...selectedSite,
+            adUnits: resetUnitStats,
             ...action.payload.total
           }
         ]

src/app/store/settings/settings.actions.ts

@@ -73,7 +73,7 @@ export class CancelAwaitingTransaction implements Action {
 export class CancelAwaitingTransactionSuccess implements Action {
   readonly type: string = CANCEL_AWAITING_TRANSACTION_SUCCESS;
 
-  constructor(public payload: number) {
+  constructor(public payload?: number) {
   }
 }
 

src/app/store/settings/settings.effects.ts

@@ -18,7 +18,7 @@ import {
   GetBillingHistoryFailure,
   CANCEL_AWAITING_TRANSACTION,
   CancelAwaitingTransactionSuccess,
-  CancelAwaitingTransactionFailure,
+  CancelAwaitingTransactionFailure, GetBillingHistory,
 } from './settings.actions';
 import { SettingsService } from 'settings/settings.service';
 import { ApiAuthService } from "../../api/auth.service";
@@ -64,7 +64,8 @@ export class SettingsEffects {
     .map(toPayload)
     .switchMap((payload) => this.service.cancelAwaitingTransaction(payload)
       .switchMap(() => [
-        new CancelAwaitingTransactionSuccess(payload),
+        new CancelAwaitingTransactionSuccess(),
+        new GetBillingHistory({}),
         new ShowSuccessSnackbar(TRANSACTION_DELETE_SUCCESS),
       ])
       .catch(err => Observable.of(new CancelAwaitingTransactionFailure(err.error.message || ''))

src/app/store/settings/settings.reducers.ts

@@ -37,15 +37,6 @@ export function settingsReducers(state = initialState, action: actions) {
         ...state,
         billingHistory: action.payload
       };
-    case CANCEL_AWAITING_TRANSACTION_SUCCESS:
-      const items = state.billingHistory.items.filter(el => el.id !== action.payload);
-      return {
-        ...state,
-        billingHistory: {
-          ...state.billingHistory,
-          items,
-        }
-      };
     default:
       return state;
   }