Added shadow plugin & UI fixes

app/App_Resources/Android/src/main/AndroidManifest.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
 	package="__PACKAGE__"
-	android:versionCode="10003"
+	android:versionCode="10004"
 	android:versionName="1.1">
 
 	<supports-screens

app/_app-common.scss

@@ -1,19 +1,16 @@
-// Place any CSS rules you want to apply on both iOS and Android here.
-// This is where the vast majority of your CSS code goes.
-// Font icon class
 @import './app-variables';
 
 .fa {
   font-family: "FontAwesome";
 }
 
 .page-container{
-  background-color: #dfdfdf;
+  background-color: #efefef;
 }
 
 .action-btn {
   background-color: $action-color;
-  border-radius: 5;
+  border-radius: 1;
   color: $white;
   font-size: 16;
   font-weight: 600;
@@ -24,7 +21,7 @@
   background-color: $action-color;
   border-radius: 5;
   color: $white;
-  height: 45;
+  height: 40;
   width: 50%;
   font-size: 14;
 }

app/app.component.ts

@@ -12,9 +12,6 @@ import { User } from "./core/models/user";
 import { AuthService } from "./core/services/auth.service";
 import { CheckoutService } from "./core/services/checkout.service";
 require("nativescript-localstorage");
-import { registerElement } from "nativescript-angular/element-registry";
-import { CardView } from "nativescript-cardview";
-registerElement("CardView", () => CardView);
 
 @Component({
   selector: "ns-app",

app/app.module.ts

@@ -8,7 +8,6 @@ import { NativeScriptFormsModule } from "nativescript-angular/forms";
 import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
-import { NgShadowModule } from "nativescript-ngx-shadow";
 import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";
 import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular/side-drawer-directives";
 import { AppRoutingModule } from "~/app-routing.module";
@@ -49,8 +48,7 @@ import { SharedModule } from "./shared/shared.module";
   exports: [
 
   ],
-  providers: [
-  ]
+  providers: []
 })
 
 export class AppModule { }

app/auth/component/login-register/login-register.component.html

@@ -1,4 +1,5 @@
-<ab-component [showName]="'Login/Signup'" [showBackArrow]=true></ab-component>
+<ab-component *ngIf="isLoggingIn" [showName]="'Login'" [showBackArrow]=true></ab-component>
+<ab-component *ngIf="!isLoggingIn" [showName]="'Create Account'" [showBackArrow]=true></ab-component>
 <GridLayout class="page-container">
   <!-- signIn -->
   <StackLayout class="page-element" [formGroup]="signInForm" *ngIf="isLoggingIn">
@@ -19,12 +20,13 @@
     </StackLayout>
     <Label class="error-lable" text="Password is required" *ngIf="signInForm.get('password').errors && signInForm.get('password').touched"></Label>
     <StackLayout paddingTop="20">
-      <Button [disabled]="isProcessing" class="action-btn" text="Login" (tap)="login()"></Button>
+      <Button [disabled]="isProcessing" class="action-btn" borderRadius="5" text="Login" (tap)="login()"></Button>
     </StackLayout>
     <StackLayout paddingTop="20">
       <Button [disabled]="isProcessing" class="normal-btn" text="New to {{appName}}? SIGNUP" (tap)="toggleForm()"></Button>
     </StackLayout>
   </StackLayout>
+
   <!-- signUp -->
   <StackLayout class="page-element" [formGroup]="signUpForm" *ngIf="!isLoggingIn">
     <StackLayout paddingTop="20" borderBottomWidth="1" borderColor="lightgray">
@@ -52,7 +54,7 @@
       <Button [disabled]="isProcessing" class="action-btn" text="Create Account" (tap)="register()"></Button>
     </StackLayout>
     <StackLayout paddingTop="20">
-      <Button [disabled]="isProcessing" class="normal-btn" text="Already have an account? LOGIN" (tap)="toggleForm()"></Button>
+      <Button [disabled]="isProcessing" class="normal-btn" borderRadius="5" text="Already have an account? LOGIN" (tap)="toggleForm()"></Button>
     </StackLayout>
   </StackLayout>
   <ActivityIndicator [busy]="isProcessing" backgroundColor="white" borderRadius="50" color="green" width="50" height="50"></ActivityIndicator>

app/checkout/actions/checkout.actions.ts

@@ -1,3 +1,4 @@
+import { CState } from "~/core/models/state";
 import { LineItem } from "./../../core/models/line_item";
 import { Order } from "./../../core/models/order";
 
@@ -16,6 +17,8 @@ export class CheckoutActions {
   static ORDER_COMPLETE_SUCCESS = "ORDER_COMPLETE_SUCCESS";
   static GET_ORDER_DETAILS = "GET_ORDER_DETAILS";
   static GET_ORDER_DETAILS_SUCCESS = "GET_ORDER_DETAILS_SUCCESS";
+  static GET_STATES_LIST = "GET_STATES_LIST";
+  static GET_STATES_LIST_SUCCESS = "GET_STATES_LIST_SUCCESS";
 
   fetchCurrentOrderSuccess(order: Order) {
     return {
@@ -102,4 +105,17 @@ export class CheckoutActions {
       payload: order
     };
   }
+
+  getStatesLists() {
+    return {
+      type: CheckoutActions.GET_STATES_LIST
+    };
+  }
+
+  getStatesListSuccess(states: Array<CState>) {
+    return {
+      type: CheckoutActions.GET_STATES_LIST_SUCCESS,
+      payload: states
+    };
+  }
 }

app/checkout/address/add-address/add-address.component.html

@@ -64,14 +64,16 @@
             </StackLayout>
           </StackLayout>
         </StackLayout>
+
         <!-- address -->
         <StackLayout paddingTop="20">
           <StackLayout borderBottomWidth="1" borderColor="lightgray">
             <Label horizontalAlign="center" text="Address" fontSize="14"></Label>
-            <TextView class="textfield" formControlName="address1"></TextView>
+            <TextField class="textfield" formControlName="address1"></TextField>
           </StackLayout>
           <Label class="error-lable" text="Address can't be blank!" *ngIf="addressForm.get('address1').errors && addressForm.get('address1').touched"></Label>
         </StackLayout>
+
         <!-- phone -->
         <StackLayout paddingTop="20">
           <StackLayout borderBottomWidth="1" borderColor="lightgray">
@@ -80,10 +82,11 @@
           </StackLayout>
           <Label class="error-lable" text="Mobile number can't be blank!" *ngIf="addressForm.get('phone').hasError('pattern')"></Label>
         </StackLayout>
-        <Button [disabled]="isProcessing" text="Save Address" (tap)="saveAddress()" class="action-btn m-t-20"></Button>
+
+        <Button [disabled]="isProcessing" text="Save Address" (tap)="saveAddress()" class="action-btn m-t-20"
+          borderRadius="5"></Button>
       </StackLayout>
-      </FlexboxLayout>
+    </FlexboxLayout>
   </ScrollView>
-  <ActivityIndicator [busy]="isProcessing" backgroundColor="white" borderRadius="50" color="green" width="50"
-        height="50"></ActivityIndicator>
+  <ActivityIndicator [busy]="isProcessing" backgroundColor="white" borderRadius="50" color="green" width="50" height="50"></ActivityIndicator>
 </GridLayout>

app/checkout/address/add-address/add-address.component.ts

@@ -6,7 +6,7 @@ import { RouterExtensions } from "nativescript-angular/router";
 import { Subscription } from "rxjs";
 import { Page } from "tns-core-modules/ui/page/page";
 import { IappState } from "~/app.reducers";
-import { getOrderNumber, getOrderState, getShipAddress } from "~/checkout/reducers/selectors";
+import { getOrderNumber, getOrderState, getShipAddress, getStatesList } from "~/checkout/reducers/selectors";
 import { Address } from "~/core/models/address";
 import { CState } from "~/core/models/state";
 import { AddressService } from "~/core/services/address.service";
@@ -53,7 +53,7 @@ export class AddAddressComponent implements OnInit, OnDestroy {
     });
 
     this.subscriptionList$.push(
-      this.addrService.getAllStates().subscribe((states) => this.states = states),
+      this.store.select(getStatesList).subscribe((states) => this.states = states),
       this.store.select(getOrderState).subscribe((oState) => this.orderState = oState),
       this.store.select(getShipAddress).subscribe((ship) => this.shipAddress = ship),
       this.store.select(getOrderNumber).subscribe((oNumber) => this.orderNumber = oNumber)
@@ -129,7 +129,7 @@ export class AddAddressComponent implements OnInit, OnDestroy {
     const options: ModalDialogOptions = {
       viewContainerRef: this._vcRef,
       context: "",
-      fullscreen: false
+      fullscreen: true
     };
 
     this._modalService.showModal(StatesModalComponent, options).then((state: CState) => {

app/checkout/address/add-address/states-modal/states-modal.component.html

@@ -1,7 +1,14 @@
-<ListView [items]="states" class="list-group">
-    <ng-template let-state="item" let-i="index" let-odd="odd" let-even="even">
-        <StackLayout orientation="horizontal" class="list-group-item" (tap)="selectedState(state)">
-            <Label [text]="state.name"></Label>
+<StackLayout borderRadius="5">
+    <StackLayout backgroundColor="teal">
+        <StackLayout class="m-10">
+            <Label text="Select State" fontSize="18" color="white"></Label>
         </StackLayout>
-    </ng-template>
-</ListView>
+    </StackLayout>
+    <ListView [items]="states" class="list-group">
+        <ng-template let-state="item" let-i="index" let-odd="odd" let-even="even">
+            <StackLayout orientation="horizontal" class="list-group-item" (tap)="selectedState(state)">
+                <Label [text]="state.name" textSize="12"></Label>
+            </StackLayout>
+        </ng-template>
+    </ListView>
+</StackLayout>

app/checkout/address/add-address/states-modal/states-modal.component.ts

@@ -1,8 +1,11 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { Store } from "@ngrx/store";
+import { ModalDialogParams } from "nativescript-angular/modal-dialog";
+import { Subscription } from "rxjs";
+import { Page } from "tns-core-modules/ui/page/page";
+import { IappState } from "~/app.reducers";
+import { getStatesList } from "~/checkout/reducers/selectors";
 import { CState } from "~/core/models/state";
-import { AddressService } from "~/core/services/address.service";
-import { ModalDialogService, ModalDialogParams } from 'nativescript-angular/modal-dialog';
-import { topmost } from "ui/frame";
 
 @Component({
   moduleId: module.id,
@@ -11,22 +14,33 @@ import { topmost } from "ui/frame";
   styleUrls: ["./states-modal.component.css"]
 })
 
-export class StatesModalComponent implements OnInit {
+export class StatesModalComponent implements OnInit, OnDestroy {
+
   states: Array<CState> = [];
+  subscriptionList$: Array<Subscription> = [];
 
   constructor(
-    private addrService: AddressService,
-    private params: ModalDialogParams
-  ) { //
-  }
+    private params: ModalDialogParams,
+    private store: Store<IappState>,
+    private page: Page
+  ) { }
+
+  ngOnInit() {
 
-  ngOnInit() { //
-    this.addrService.getAllStates().subscribe((states) => {
-      this.states = states;
+    this.page.on("navigatingFrom", (data) => {
+      this.ngOnDestroy();
     });
+
+    this.subscriptionList$.push(
+      this.store.select(getStatesList).subscribe((states) => this.states = states)
+    );
   }
 
   selectedState(state: CState) {
     this.params.closeCallback(state);
   }
+
+  ngOnDestroy() {
+    this.subscriptionList$.map((sub$) => sub$.unsubscribe());
+  }
 }

app/checkout/address/address.component.ts

@@ -6,6 +6,7 @@ import { Observable, Subscription } from "rxjs";
 import { tap } from "rxjs/operators";
 import { Page } from "tns-core-modules/ui/page/page";
 import { IappState } from "~/app.reducers";
+import { CheckoutActions } from "../actions/checkout.actions";
 import { Address } from "./../../core/models/address";
 import { CheckoutService } from "./../../core/services/checkout.service";
 import { getOrderNumber, getOrderState, getShipAddress } from "./../reducers/selectors";
@@ -30,6 +31,7 @@ export class AddressComponent implements OnInit, OnDestroy {
   constructor(
     private store: Store<IappState>,
     private checkoutService: CheckoutService,
+    private checkoutAction: CheckoutActions,
     private router: Router,
     private page: Page) { }
 
@@ -38,6 +40,7 @@ export class AddressComponent implements OnInit, OnDestroy {
       this.ngOnDestroy();
     });
 
+    this.store.dispatch(this.checkoutAction.getStatesLists());
     this.orderNumber$ = this.store.select(getOrderNumber);
 
     this.subscriptionList$.push(

app/checkout/address/address.module.ts

@@ -3,13 +3,13 @@ import { ReactiveFormsModule } from "@angular/forms";
 import { NativeScriptCommonModule } from "nativescript-angular/common";
 import { NativeScriptFormsModule } from "nativescript-angular/forms";
 import { ModalDialogService } from "nativescript-angular/modal-dialog";
+import { NgShadowModule } from "nativescript-ngx-shadow";
 import { AddressService } from "~/core/services/address.service";
 import { SharedModule } from "~/shared/shared.module";
 import { AddAddressComponent } from "./add-address/add-address.component";
 import { StatesModalComponent } from "./add-address/states-modal/states-modal.component";
 import { AddressComponent } from "./address.component";
 import { DeliveryAddressComponent } from "./delivery-address/delivery-address.component";
-import { NgShadowModule } from 'nativescript-ngx-shadow';
 @NgModule({
     imports: [
         NativeScriptCommonModule,

app/checkout/address/delivery-address/delivery-address.component.html

@@ -1,26 +1,23 @@
-<GridLayout rows="*,60" class="page-container" *ngIf="itemTotal">
+<GridLayout rows="*, 45" class="page-container" *ngIf="itemTotal">
   <ScrollView row="0">
     <GridLayout rows="*,*">
-      <StackLayout row="0">
-        <CardView class="cardStyle" margin="5 5 5 5" elevation="10" radius="5">
-          <StackLayout class="address-content">
-            <Label class="heading" text="Delivery Address"></Label>
-            <Label class="address-bold" text="{{address.firstname}} {{address.lastname}}"></Label>
-            <Label class="address-field" text="{{address.address1}}, {{address.address2}}"></Label>
-            <Label class="address-field" text="{{address.city}}-{{address.zipcode}}"></Label>
-            <Label class="address-field" text="{{address.state?.name}}"></Label>
-            <Label class="address-bold" text="{{address.phone}}"></Label>
-            <StackLayout height="55">
-              <Button ripple="true" class="action-btn-small" (tap)="editAddress()" text="Change Address"></Button>
-            </StackLayout>
+      <StackLayout row="0" class="m-t-20 m-l-5 m-r-5" shadow="5" borderRadius="5">
+        <StackLayout class="address-content">
+          <Label class="heading" text="Delivery Address"></Label>
+          <Label class="address-bold" text="{{address.firstname}} {{address.lastname}}"></Label>
+          <Label class="address-field" text="{{address.address1}}, {{address.address2}}"></Label>
+          <Label class="address-field" text="{{address.city}}-{{address.zipcode}}"></Label>
+          <Label class="address-field" text="{{address.state?.name}}"></Label>
+          <Label class="address-bold" text="{{address.phone}}"></Label>
+          <StackLayout class="m-b-10">
+            <Button fontWeight="500" class="action-btn-small" (tap)="editAddress()" text="Change Address"></Button>
           </StackLayout>
-        </CardView>
+        </StackLayout>
       </StackLayout>
-      <StackLayout row="1" paddingTop="10">
-        <CardView class="cardStyle" margin="5 5 5 5" elevation="10" radius="5">
+      <StackLayout row="1">
+        <FlexBoxLayout class="m-t-20 m-l-5 m-r-5 m-b-20" shadow="5" borderRadius="5" flexDirection="column">
           <StackLayout class="address-content">
             <Label class="heading" text="order summery"></Label>
-
             <StackLayout orientation="horizontal" class="order-details">
               <Label class="left" text="Price({{totalCartItems}} item)" width="50%"> </Label>
               <Label class="right" text="{{currency}}{{itemTotal | number:'1.2-2'}}" width="50%"></Label>
@@ -47,18 +44,12 @@
               <Label class="right" fontWeight="500" text="{{currency}}{{totalCartValue | number:'1.2-2'}}" width="50%"></Label>
             </StackLayout>
           </StackLayout>
-        </CardView>
+        </FlexBoxLayout>
       </StackLayout>
     </GridLayout>
   </ScrollView>
 
-  <StackLayout row="1" >
-    <CardView class="cardStyle" margin="5 0 0 0" elevation="10" radius="5">
-      <StackLayout class="button-container">
-
-        <Button class="action-btn m-t-5 m-b-10" (tap)="checkoutToPayment()" text="Continue To Payment">
-        </Button>
-      </StackLayout>
-    </CardView>
+  <StackLayout row="1">
+      <Button text="Continue To Payment" class="action-btn" (tap)="checkoutToPayment()"></Button>
   </StackLayout>
 </GridLayout>

app/checkout/address/delivery-address/delivery-address.component.scss

@@ -5,14 +5,12 @@
   background-color: $white;
   padding: 2px 10px;
   width: 100%;
-  // border-width: 1 0 0 1;
-  // border-color: $accent-dark;
 }
 
 .address-content {
   background-color: white;
   padding-top: 10;
-  padding-bottom: 10;
+  border-radius: 5;
   .address-field {
     font-size: 14em;
     padding-left: 15;

app/checkout/address/delivery-address/delivery-address.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, OnDestroy, OnInit, EventEmitter, Output } from "@angular/core";
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from "@angular/core";
 import { Router } from "@angular/router";
 import { Store } from "@ngrx/store";
-import { Observable, Subscription } from "rxjs";
+import { Subscription } from "rxjs";
 import { tap } from "rxjs/operators";
 import { Page } from "tns-core-modules/ui/page/page";
 import { IappState } from "~/app.reducers";