1. Changed tosty notification timeout

2. added method to submit review
3. Added componant & rating plugin
4. Added routes for review
5. Added tosty for favorite product

package.json

@@ -37,6 +37,7 @@
     "@ngrx/effects": "^6.0.1",
     "@ngrx/router-store": "^6.0.1",
     "@ngrx/store": "^6.0.1",
+    "@ngx-lite/input-star-rating": "^0.1.5",
     "@ngx-progressbar/core": "^5.0.1",
     "@ngx-progressbar/http": "^5.0.1",
     "bootstrap": "^4.1.1",
@@ -89,4 +90,4 @@
   "main": "index.js",
   "repository": "[email protected]:aviabird/angularspree.git",
   "author": "Pankaj Rawat <[email protected]>"
-}
+}

src/app/app.module.ts

@@ -27,6 +27,7 @@ import { DragScrollModule } from 'ngx-drag-scroll';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ToastrModule } from 'ngx-toastr';
 
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -66,7 +67,7 @@ import { ToastrModule } from 'ngx-toastr';
     Ng2UiAuthModule.forRoot(myAuthConfig),
     DragScrollModule,
     ToastrModule.forRoot({
-      timeOut: 3000,
+      timeOut: 1500,
       positionClass: 'toast-top-right',
       preventDuplicates: true,
       progressBar: true,
@@ -78,4 +79,4 @@ import { ToastrModule } from 'ngx-toastr';
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule { }

src/app/core/services/product.service.ts

@@ -1,10 +1,12 @@
+import { ToastrService } from 'ngx-toastr';
 import { getUserFavoriteProducts } from './../../user/reducers/selector';
 import { getTaxonomies } from './../../product/reducers/selectors';
 import { Taxonomy } from './../models/taxonomy';
 import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
 import { Injectable } from '@angular/core';
 import { Product } from '../models/product';
+import { catchError, map, tap } from 'rxjs/operators';
+import { of as observableOf, Observable } from 'rxjs';
 
 @Injectable()
 export class ProductService {
@@ -15,7 +17,8 @@ export class ProductService {
    *
    * @memberof ProductService
    */
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient,
+    private toastrService: ToastrService) { }
 
   /**
    *
@@ -72,4 +75,18 @@ export class ProductService {
   getRecentlyViewedProducts() {
     return this.http.get(`api/v1/products?per_page=20`);
   }
+
+  submitReview(productId: any, params: any) {
+    return this.http.post(`products/${productId}/reviews`, params)
+      .pipe(
+      map(_ => this.toastrService.success(
+        'Review Submitted.',
+        'Success')
+      ),
+      tap(
+        _ => _,
+        _ => this.toastrService.error('something went wrong (reviws)', 'ERROR!!')
+      )
+      )
+  }
 }

src/app/product/components/product-detail-page/product-details/product-details.component.html

@@ -16,7 +16,7 @@
 
     <app-product-variants [customOptionTypesHash]="customOptionTypesHash" [currentSelectedOptions]="currentSelectedOptions" (onOptionClickEvent)="onOptionClick($event)"
       [correspondingOptions]="correspondingOptions" [mainOptions]="mainOptions" class="row"></app-product-variants>
-
+    <button (click)="showReviewForm()">Write Review</button>
   </div>
 </div>
 <div class="row">

src/app/product/components/product-detail-page/product-details/product-details.component.ts

@@ -1,3 +1,5 @@
+import { ToastrService } from 'ngx-toastr';
+import { Router } from '@angular/router';
 import { AppState } from './../../../../interfaces';
 import { Store } from '@ngrx/store';
 import { CheckoutActions } from './../../../../checkout/actions/checkout.actions';
@@ -24,13 +26,16 @@ export class ProductDetailsComponent implements OnInit {
   variantId: any;
   productID: any
   productdata: any;
+
   constructor(
     private variantParser: VariantParserService,
     private variantRetriver: VariantRetriverService,
     private checkoutActions: CheckoutActions,
     private store: Store<AppState>,
     private productService: ProductService,
-  ) {}
+    private router: Router,
+    private toastrService: ToastrService
+  ) { }
 
   ngOnInit() {
     this.description = this.product.description;
@@ -93,8 +98,15 @@ export class ProductDetailsComponent implements OnInit {
 
   markAsFavorite() {
     this.productService.markAsFavorite(this.product.id).subscribe((res) => {
-      alert(res['message']);
+      this.toastrService.info(res['message'], 'info')
     });
   }
 
+  showReviewForm() {
+    this.router.navigate([this.product.slug, 'write_review'], { queryParams: { 'prodId': this.productID } });
+  }
+
 }
+
+
+

src/app/product/components/product-detail-page/write-product-review/write-product-review.component.html

@@ -0,0 +1,31 @@
+<br>
+<div class="container">
+  <div class="row">
+    <div class="col-md-8" *ngIf="!showThanks">
+      <h3>Write Review</h3>
+      <form [formGroup]="reviewForm" (ngSubmit)="onSubmit()" data-toggle="validator">
+        <div class="form-group">
+          <label for="exampleInputEmail1">Rate this product</label>
+          <ngx-input-star-rating formControlName="rating" class="form-control" required></ngx-input-star-rating>
+        </div>
+        <div class="form-group">
+          <label for="exampleInputEmail1">Title</label>
+          <input type="text" class="form-control" aria-describedby="emailHelp" placeholder="Headline for your review" formControlName="title"
+            required>
+        </div>
+        <div class="form-group">
+          <label for="exampleFormControlTextarea1">Content</label>
+          <textarea class="form-control" rows="3" placeholder="Your review" formControlName="review" required></textarea>
+        </div>
+        <button type="submit" class="btn btn-primary">Submit Review</button>
+      </form>
+    </div>
+    <div class="col-md-8" *ngIf="showThanks">
+      <h3>Thanks for your review!</h3>
+      <i class="fa fa-check-circle fa-3x"></i>
+      <p>Your review has been submitted.Please note that your review may take up to 48 hours to appear.</p>
+      <button type="normal" class="btn btn-primary" (click)="goToProduct()">Continew Shopping</button>
+    </div>
+  </div>
+</div>
+<br>

src/app/product/components/product-detail-page/write-product-review/write-product-review.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WriteProductReviewComponent } from './write-product-review.component';
+
+describe('WriteProductReviewComponent', () => {
+  let component: WriteProductReviewComponent;
+  let fixture: ComponentFixture<WriteProductReviewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WriteProductReviewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WriteProductReviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/product/components/product-detail-page/write-product-review/write-product-review.component.ts

@@ -0,0 +1,73 @@
+import { ToastrService } from 'ngx-toastr';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ProductService } from './../../../../core/services/product.service';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-write-product-review',
+  templateUrl: './write-product-review.component.html',
+  styleUrls: ['./write-product-review.component.scss']
+})
+export class WriteProductReviewComponent implements OnInit {
+
+  reviewForm: FormGroup;
+  queryParams: any
+  showThanks = false
+  constructor(private fb: FormBuilder,
+    private productService: ProductService,
+    private activeRoute: ActivatedRoute,
+    private toastrService: ToastrService,
+    private router: Router) {
+    this.activeRoute.queryParams
+      .subscribe(params => {
+        this.queryParams = params
+      });
+  }
+
+  ngOnInit() {
+    this.initForm();
+  }
+
+  initForm() {
+    const rating = '';
+    const name = '';
+    const title = '';
+    const review = '';
+
+    this.reviewForm = this.fb.group({
+      rating: [rating, Validators.required],
+      name: [JSON.parse(localStorage.getItem('user')).email],
+      title: [title, Validators.required],
+      review: [review, Validators.required]
+    }
+    );
+  }
+
+  parse(formData) {
+    return {
+      review: {
+        rating: formData.rating.toString(),
+        name: formData.name,
+        title: formData.title,
+        review: formData.review
+      }
+    }
+  }
+
+  onSubmit() {
+    if (this.reviewForm.valid) {
+      const values = this.reviewForm.value;
+      const params = this.parse(values)
+      this.productService.submitReview(this.queryParams.prodId, params)
+        .subscribe((res) => {
+          this.showThanks = true
+        })
+    } else {
+      this.toastrService.error('Enter data in all fields', 'Error!')
+    }
+  }
+  goToProduct() {
+    this.router.navigate([this.queryParams.prodId])
+  }
+}

src/app/product/index.ts

@@ -16,15 +16,15 @@ import { ProductPriceInfoComponent } from './components/product-detail-page/prod
 import { ProductCountComponent } from './components/product-detail-page/product-price-info/product-count/product-count.component';
 import { ProductVariantsComponent } from './components/product-detail-page/product-variants/product-variants.component';
 import { ProductComponent } from './product.component';
-
+import { WriteProductReviewComponent } from './components/product-detail-page/write-product-review/write-product-review.component';
 
 // Routes
 import { ProductRoutes as routes } from './product.routes';
 
 // Effects
 import { EffectsModule } from '@ngrx/effects';
 import { ProductEffects } from './effects/product.effects';
-
+import { NgxInputStarRatingModule } from '@ngx-lite/input-star-rating';
 
 @NgModule({
   declarations: [
@@ -36,7 +36,8 @@ import { ProductEffects } from './effects/product.effects';
     ProductPriceInfoComponent,
     ProductDescriptionComponent,
     ProductVariantsComponent,
-    ProductCountComponent
+    ProductCountComponent,
+    WriteProductReviewComponent
     // pipes
   ],
   exports: [
@@ -52,8 +53,10 @@ import { ProductEffects } from './effects/product.effects';
   imports: [
     SharedModule,
     RouterModule.forChild(routes),
+    NgxInputStarRatingModule,
+
   ],
   providers: [
   ]
 })
-export class ProductModule {}
+export class ProductModule { }

src/app/product/product.routes.ts

@@ -1,9 +1,11 @@
+import { WriteProductReviewComponent } from './components/product-detail-page/write-product-review/write-product-review.component';
 import { Routes } from '@angular/router';
 import { ProductDetailPageComponent } from './components/product-detail-page/product-detail-page.component';
 import { ProductComponent } from './product.component';
 
 export const ProductRoutes: Routes = [
   { path: '', component: ProductComponent, pathMatch: 'full' },
-  { path: ':id', component: ProductDetailPageComponent }
+  { path: ':id', component: ProductDetailPageComponent },
+  { path: ':id/write_review', component: WriteProductReviewComponent }
 ];
 

yarn.lock

@@ -273,6 +273,12 @@
     tree-kill "^1.0.0"
     webpack-sources "^1.1.0"
 
+"@ngx-lite/input-star-rating@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@ngx-lite/input-star-rating/-/input-star-rating-0.1.5.tgz#dbfa3e74a540e619d332058bc5af49de3cb2fa9d"
+  dependencies:
+    tslib "^1.9.0"
+
 "@ngx-progressbar/core@^5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@ngx-progressbar/core/-/core-5.0.1.tgz#a8566384638512b7e53945a3995ccbd79ce21c31"