Feature/add support for coupon duration (#743)

* Add support for coupon duration

* Update changelog

apps/client/src/app/components/admin-overview/admin-overview.component.ts

@@ -20,6 +20,7 @@ import {
   parseISO
 } from 'date-fns';
 import { uniq } from 'lodash';
+import { StringValue } from 'ms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -29,6 +30,7 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './admin-overview.html'
 })
 export class AdminOverviewComponent implements OnDestroy, OnInit {
+  public couponDuration: StringValue = '30 days';
   public coupons: Coupon[];
   public customCurrencies: string[];
   public dataGatheringInProgress: boolean;
@@ -105,7 +107,10 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
   }
 
   public onAddCoupon() {
-    const coupons = [...this.coupons, { code: this.generateCouponCode(16) }];
+    const coupons = [
+      ...this.coupons,
+      { code: this.generateCouponCode(16), duration: this.couponDuration }
+    ];
     this.putCoupons(coupons);
   }
 
@@ -118,6 +123,10 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
     }
   }
 
+  public onChangeCouponDuration(aCouponDuration: StringValue) {
+    this.couponDuration = aCouponDuration;
+  }
+
   public onDeleteCoupon(aCouponCode: string) {
     const confirmation = confirm('Do you really want to delete this coupon?');
 

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -156,11 +156,14 @@
               ></mat-slide-toggle>
             </div>
           </div>
-          <div *ngIf="hasPermissionForSubscription" class="d-flex my-3">
+          <div
+            *ngIf="hasPermissionForSubscription"
+            class="d-flex my-3 subscription"
+          >
             <div class="w-50" i18n>Coupons</div>
             <div class="w-50">
               <div *ngFor="let coupon of coupons">
-                <span>{{ coupon.code }}</span>
+                <span>{{ coupon.code }} ({{ coupon.duration }})</span>
                 <button
                   class="mini-icon mx-1 no-min-width px-2"
                   mat-button
@@ -170,10 +173,25 @@
                 </button>
               </div>
               <div class="mt-2">
-                <button color="primary" mat-flat-button (click)="onAddCoupon()">
-                  <ion-icon class="mr-1" name="add-outline"></ion-icon>
-                  <span i18n>Add Coupon</span>
-                </button>
+                <form #couponForm="ngForm">
+                  <mat-form-field appearance="outline" class="mr-2">
+                    <mat-select
+                      name="duration"
+                      [value]="couponDuration"
+                      (selectionChange)="onChangeCouponDuration($event.value)"
+                    >
+                      <mat-option value="30 days">30 Days</mat-option>
+                      <mat-option value="1 year">1 Year</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                  <button
+                    color="primary"
+                    mat-flat-button
+                    (click)="onAddCoupon()"
+                  >
+                    <span i18n>Add</span>
+                  </button>
+                </form>
               </div>
             </div>
           </div>

apps/client/src/app/components/admin-overview/admin-overview.module.ts

@@ -1,7 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
 import { GfValueModule } from '@ghostfolio/ui/value';
@@ -12,11 +14,14 @@ import { AdminOverviewComponent } from './admin-overview.component';
   declarations: [AdminOverviewComponent],
   exports: [],
   imports: [
+    FormsModule,
     CommonModule,
     GfValueModule,
     MatButtonModule,
     MatCardModule,
-    MatSlideToggleModule
+    MatSelectModule,
+    MatSlideToggleModule,
+    ReactiveFormsModule
   ],
   providers: [CacheService],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

apps/client/src/app/components/admin-overview/admin-overview.scss

@@ -20,4 +20,10 @@
       }
     }
   }
+
+  .subscription {
+    .mat-form-field {
+      max-width: 100%;
+    }
+  }
 }