Refactor/phase 2 (#252)

* Fixes for order persistence. * Added Order merging for guest & logged-in user. * Added fixes for order creation process. ## This change addresses the need by * Now order will be persisted even if user logged-in into system. * order as guest will be merge with the existing order(if any) for after user login. * Line item quantity validation will prevent user to add more quantity greater than available stock. [delivers #160279601] [Story](https://www.pivotaltracker.com/story/show/160279601)
aviabird · Oct 9, 2018 · 67f7cc7 · 67f7cc7
1 parent 1132061
commit 67f7cc7
Show file tree

Hide file tree

Showing 30 changed files with 393 additions and 265 deletions.
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -3,13 +3,15 @@
   min-height: 100vh;
   display: block;
   .main-body {
-    margin-top: 50px;
+    @media screen and (min-width: 768px) {
+      margin-top: 50px;
+    }
   }
 }
 
 .issearchopen :host /deep/ .main-body {
-  @media screen and(min-width: 320px) and(max-width: 768px) {
-    margin-top: 48px;
+  @media screen and (min-width: 320px) and(max-width: 768px) {
+    margin-top: 45px;
   }
 }
 

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -3,10 +3,9 @@ import { LayoutState } from './layout/reducers/layout.state';
 import { getlayoutStateJS } from './layout/reducers/layout.selector';
 import { environment } from './../environments/environment';
 import { filter } from 'rxjs/operators';
-import { getAuthStatus } from './auth/reducers/selectors';
 import { AppState } from './interfaces';
 import { Store } from '@ngrx/store';
-import { Subscription, Observable } from 'rxjs';
+import { Observable } from 'rxjs';
 import { CheckoutService } from './core/services/checkout.service';
 import { Component, OnInit, OnDestroy, Inject, PLATFORM_ID } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
@@ -19,7 +18,6 @@ import { isPlatformBrowser } from '../../node_modules/@angular/common';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit, OnDestroy {
-  orderSub$: Subscription;
   currentUrl: string;
   currentStep: string;
   checkoutUrls = ['/checkout/cart', '/checkout/address', '/checkout/payment'];
@@ -28,7 +26,6 @@ export class AppComponent implements OnInit, OnDestroy {
 
   constructor(
     private router: Router,
-    private checkoutService: CheckoutService,
     private store: Store<AppState>,
     private metaTitle: Title,
     private meta: Meta,
@@ -54,10 +51,6 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.store.select(getAuthStatus).subscribe(() => {
-      this.orderSub$ = this.checkoutService.fetchCurrentOrder().subscribe();
-    });
-
     this.layoutState$ = this.store.select(getlayoutStateJS);
 
     this.addFaviconIcon();
@@ -86,7 +79,6 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.orderSub$.unsubscribe();
   }
 
   private addMetaInfo() {

diff --git a/src/app/auth/components/login/login.component.ts b/src/app/auth/components/login/login.component.ts
@@ -45,13 +45,18 @@ export class LoginComponent implements OnInit, OnDestroy {
 
     if (this.signInForm.valid) {
       this.loginSubs = this.authService
-        .login(values).pipe(
-        tap(_ => _, (user) => {
-          const errors = user.error.error || 'Something went wrong';
-          keys.forEach(val => {
-            this.pushErrorFor(val, errors);
-          });
-        })).subscribe();
+        .login(values)
+        .pipe(
+          tap(
+            _ => _,
+            (user) => {
+              const errors = user.error.error || 'Something went wrong';
+              keys.forEach(val => {
+                this.pushErrorFor(val, errors);
+              });
+            }
+          )
+        ).subscribe();
     } else {
       keys.forEach(val => {
         const ctrl = this.signInForm.controls[val];

diff --git a/src/app/auth/components/sign-up/sign-up.component.html b/src/app/auth/components/sign-up/sign-up.component.html
@@ -27,7 +27,7 @@ <h3 class="panel-title">Signup to {{title}}</h3>
                       autocomplete="off">
                     <div *ngIf="signUpForm.get('email').errors && signUpForm.get('email').touched">
                       <span class="register-error-icon">!</span>
-                      <p class="register-error-message">{{signUpForm.get('email').errors['msg']  || 'Please enter a valid email id'}}</p>
+                      <p class="register-error-message">{{signUpForm.get('email').errors.msg  || 'Please enter a valid email id'}}</p>
                     </div>
                   </div>
 
@@ -36,7 +36,7 @@ <h3 class="panel-title">Signup to {{title}}</h3>
                       placeholder="Choose Password" autocomplete="off">
                     <div *ngIf="signUpForm.get('password').errors && signUpForm.get('password').touched">
                       <span class="register-error-icon">!</span>
-                      <p class="register-error-message">{{signUpForm.get('password').errors['msg']  || 'Password must be at least 6 characters'}}</p>
+                      <p class="register-error-message">{{signUpForm.get('password').errors.msg  || 'Password must be at least 6 characters'}}</p>
                     </div>
                   </div>
 
@@ -53,7 +53,7 @@ <h3 class="panel-title">Signup to {{title}}</h3>
                     <input type="number" class="register-user-input-mobile register-user-input" name="mobile" formControlName="mobile" placeholder="Mobile Number (For order status updates)">
                     <div *ngIf="signUpForm.get('mobile').errors && signUpForm.get('mobile').touched">
                       <span class="register-error-icon">!</span>
-                      <p class="register-error-message">{{signUpForm.get('mobile').errors['msg']  || 'Please enter a valid mobile number (10 digits)'}}</p>
+                      <p class="register-error-message">{{signUpForm.get('mobile').errors.msg  || 'Please enter a valid mobile number (10 digits)'}}</p>
                     </div>
                   </div>
 
@@ -68,7 +68,7 @@ <h3 class="panel-title">Signup to {{title}}</h3>
 
                     <div *ngIf="signUpForm.get('gender').errors && signUpForm.get('gender').touched">
                       <span class="register-gender-error-icon register-error-icon">!</span>
-                      <p class="register-gender-error-message register-error-message">{{signUpForm.get('gender').errors['msg']  || 'Please select your gender'}}</p>
+                      <p class="register-gender-error-message register-error-message">{{signUpForm.get('gender').errors.msg  || 'Please select your gender'}}</p>
                     </div>
                   </fieldset>
                 </fieldset>

diff --git a/src/app/auth/components/sign-up/sign-up.component.ts b/src/app/auth/components/sign-up/sign-up.component.ts
@@ -37,6 +37,7 @@ export class SignUpComponent implements OnInit, OnDestroy {
   }
 
   onSubmit() {
+    debugger
     const values = this.signUpForm.value;
     const keys = Object.keys(values);
     this.formSubmit = true;
@@ -106,9 +107,9 @@ export class SignUpComponent implements OnInit, OnDestroy {
       const password = group.controls[passwordKey];
       const confirmPassword = group.controls[confirmPasswordKey];
 
-      return {
-        mismatchedPasswords: password.value !== confirmPassword.value
-      };
+      if (password.value !== confirmPassword.value) {
+        return { mismatchedPasswords: true }
+      }
     }
   }
 

diff --git a/src/app/auth/components/update-password/update-password.component.ts b/src/app/auth/components/update-password/update-password.component.ts
@@ -88,9 +88,9 @@ export class UpdatePasswordComponent implements OnInit {
       const password = group.controls[passwordKey];
       const confirmPassword = group.controls[confirmPasswordKey];
 
-      return {
-        mismatchedPasswords: password.value !== confirmPassword.value
-      };
+      if (password.value !== confirmPassword.value) {
+        return { mismatchedPasswords: true }
+      }
     }
   }
 

diff --git a/src/app/auth/effects/auth.effects.ts b/src/app/auth/effects/auth.effects.ts
@@ -1,37 +1,56 @@
+import { CheckoutActions } from './../../checkout/actions/checkout.actions';
 import { Injectable } from '@angular/core';
-import { filter, switchMap, map } from 'rxjs/operators';
-import { Observable } from 'rxjs';
+import { switchMap, map } from 'rxjs/operators';
+import { Observable} from 'rxjs';
 import { Actions, Effect } from '@ngrx/effects';
 import { Action } from '@ngrx/store';
 
 import { User } from './../../core/models/user';
 import { AuthService } from '../../core/services/auth.service';
 import { AuthActions } from '../actions/auth.actions';
+import { CheckoutService } from '../../core/services/checkout.service';
+import { Order } from '../../core/models/order';
 
 @Injectable()
 export class AuthenticationEffects {
-  constructor(
-    private actions$: Actions,
-    private authService: AuthService,
-    private authActions: AuthActions
-  ) {}
 
-  // tslint:disable-next-line:member-ordering
   @Effect()
   Authorized$: Observable<Action> = this.actions$
     .ofType(AuthActions.AUTHORIZE)
     .pipe(
-      switchMap<Action, {status: string} & User>(() => this.authService.authorized()),
-      filter(data => data.status !== 'unauthorized'),
-      map(() => this.authActions.loginSuccess())
+      switchMap<Action, { status: string } & User>(() => {
+        return this.authService.authorized();
+      }),
+      switchMap((data) => this.checkoutService.fetchCurrentOrder().pipe(map(() => data))),
+      map(data => {
+        if (data.status === 'unauthorized') {
+          return this.authActions.noOp();
+        } else {
+          return this.authActions.loginSuccess();
+        }
+      })
+    );
+
+  @Effect()
+  AfterLoginSuccess$: Observable<Action> = this.actions$
+    .ofType(AuthActions.LOGIN_SUCCESS)
+    .pipe(
+      switchMap(() => this.checkoutService.fetchCurrentOrder()),
+      map(_ => this.authActions.noOp())
+    );
+
+  @Effect()
+  AfterLogoutSuccess$: Observable<Action> = this.actions$
+    .ofType(AuthActions.LOGOUT_SUCCESS)
+    .pipe(
+      map(_ => this.checkoutActions.orderCompleteSuccess())
     );
 
-  // tslint:disable-next-line:member-ordering
   @Effect()
   OAuthLogin: Observable<Action> = this.actions$
     .ofType(AuthActions.O_AUTH_LOGIN)
     .pipe(
-      switchMap<Action & {payload: string}, string | User>(action => {
+      switchMap<Action & { payload: string }, string | User>(action => {
         return this.authService.socialLogin(action.payload);
       }),
       map(data => {
@@ -42,4 +61,12 @@ export class AuthenticationEffects {
         }
       })
     );
+
+  constructor(
+    private actions$: Actions,
+    private checkoutActions: CheckoutActions,
+    private authService: AuthService,
+    private authActions: AuthActions,
+    private checkoutService: CheckoutService
+  ) { }
 }
diff --git a/src/app/checkout/address/add-address/add-address.component.html b/src/app/checkout/address/add-address/add-address.component.html
@@ -10,8 +10,6 @@
 </form>
 <form class="form" [formGroup]="addressForm" (ngSubmit)="onSubmit()">
   <div class="row">
-
-
     <div class="form-group col-sm-6">
       <label>Pin Code
         <span class="required">*</span>

diff --git a/src/app/checkout/address/address.component.html b/src/app/checkout/address/address.component.html
@@ -37,4 +37,4 @@
 			</app-add-address>
 		</div>
 	</div>
-</div>
+</div>
diff --git a/src/app/checkout/address/delivery-options/delivery-options.component.ts b/src/app/checkout/address/delivery-options/delivery-options.component.ts
@@ -33,7 +33,7 @@ export class DeliveryOptionsComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.orderSub$ = this.checkoutService.fetchCurrentOrder().subscribe();
   }
-  
+
   ngOnDestroy() {
     this.orderSub$.unsubscribe();
   }

diff --git a/src/app/checkout/address/services/address.service.ts b/src/app/checkout/address/services/address.service.ts
@@ -1,3 +1,4 @@
+import { CheckoutService } from './../../../core/services/checkout.service';
 import { ToastrService } from 'ngx-toastr';
 import { map, tap } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
@@ -11,7 +12,8 @@ export class AddressService {
   constructor(
     private fb: FormBuilder,
     private http: HttpClient,
-    private toastrService: ToastrService
+    private toastrService: ToastrService,
+    private checkoutService: CheckoutService
   ) { }
 
   initAddressForm() {
@@ -70,6 +72,7 @@ export class AddressService {
       + `&address[zipcode]=${updatedAddress.zipcode}`
       + `&address[state_id]=${updatedAddress.state_id}`
       + `&address[country_id]=${updatedAddress.country_id}`
+      + `&order_token=${this.checkoutService.getOrderToken()}`
     return this.http.put(url, {})
       .pipe(
         tap(

diff --git a/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts b/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts
@@ -5,6 +5,7 @@ import { CheckoutService } from './../../../../../core/services/checkout.service
 import { CheckoutActions } from './../../../../actions/checkout.actions';
 import { AppState } from './../../../../../interfaces';
 import { LineItem } from './../../../../../core/models/line_item';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-line-item',
@@ -24,6 +25,7 @@ export class LineItemComponent implements OnInit {
     private store: Store<AppState>,
     private checkoutService: CheckoutService,
     private checkoutActions: CheckoutActions,
+    private toastyService: ToastrService
   ) { }
 
   ngOnInit() {
@@ -55,7 +57,14 @@ export class LineItemComponent implements OnInit {
   }
 
   addQuantity() {
-    this.quantityCount += 1;
-    this.store.dispatch(this.checkoutActions.addToCart(this.lineItem.variant_id, 1));
+    const productInHands = this.lineItem.variant.total_on_hand;
+    const backOrderable = this.lineItem.variant.is_backorderable;
+
+    if (productInHands >= (this.quantityCount + 1) || backOrderable === true) {
+      this.quantityCount += 1;
+      this.store.dispatch(this.checkoutActions.addToCart(this.lineItem.variant_id, 1));
+    } else {
+      this.toastyService.error('Sorry! You can not add more quantity for this product.')
+    }
   }
 }
diff --git a/src/app/checkout/order-failed/order-failed.component.ts b/src/app/checkout/order-failed/order-failed.component.ts
@@ -3,15 +3,15 @@ import { AppState } from './../../interfaces';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import { LayoutState } from './../../layout/reducers/layout.state';
-import { tap } from 'rxjs/operators';
+import { tap, switchMap } from 'rxjs/operators';
 import { LineItem } from './../../core/models/line_item';
 import { Order } from './../../core/models/order';
 import { UserService } from './../../user/services/user.service';
 import { ActivatedRoute, Router, Params } from '@angular/router';
 import { Component, OnInit, PLATFORM_ID, Inject, OnDestroy } from '@angular/core';
 import { CheckoutService } from '../../core/services/checkout.service';
 import { isPlatformBrowser } from '../../../../node_modules/@angular/common';
-import { Subscription } from 'rxjs';
+import { Subscription, of } from 'rxjs';
 
 @Component({
   selector: 'app-order-failed',
@@ -40,18 +40,19 @@ export class OrderFailedComponent implements OnInit, OnDestroy {
     this.subscriptionList$.push(
       this.activatedRouter.queryParams
         .pipe(
-          tap(({ orderReferance }) => {
-            this.subscriptionList$.push(
-              this.userService
+          switchMap(params => {
+            const { reason, orderReferance } = params;
+            this.errorReason = reason;
+            if (!orderReferance) {
+              this.route.navigate(['/'])
+              return of(params);
+            }
+            return this.userService
               .getOrderDetail(orderReferance)
-              .subscribe(order => this.orderDetails = order)
-            )
+              .pipe(tap(order => this.orderDetails = order));
           })
         )
-        .subscribe(({ reason, orderReferance }) => {
-          this.errorReason = reason;
-          if (!orderReferance) { this.route.navigate(['/']) }
-        })
+        .subscribe()
     );
   }