[ADD] Added feature for payment gateway

src/app/app.module.ts

@@ -7,12 +7,14 @@ import { TranslationModule, LocaleService, TranslationService, LocalizationModul
 import { AppComponent } from './app.component';
 import { FlightDetailComponent } from './modules/flights/flight-detail/flight-detail.component';
 import { FlightSearchComponent } from './modules/flights/flight-search/flight-search.component';
+import { PaymentModeComponent } from './shared/components/payment-mode/payment-mode.component';
 import { SharedModule } from './shared/shared.module';
 import { HeaderService } from './shared/components/header';
 
 const appRoutes: Routes = [
   { path: 'search', component: FlightSearchComponent },
-  { path: 'detail/:fid', component: FlightDetailComponent }
+  { path: 'detail/:fid', component: FlightDetailComponent },
+  { path: 'payment/:fid', component: PaymentModeComponent }
 ];
 
 @NgModule({

src/app/modules/flights/flight-detail/flight-detail.component.html

@@ -1,4 +1,20 @@
+<header class="cols-row-header cf page-header">
+  <h1 class="section-header-main">{{ 'REVIEW_YOUR_TRIP' | translate:lang }}</h1>
+</header>
 <div class="main">
+  <section class="tripSummaryContainer">
+    <div class="tripSummary">
+      <h2 class="tripSummaryHeader">Trip Summary</h2>
+      <div class="totalContainer">
+        <div class="packagePriceList">
+          <div class="tripTotals">
+            <span class="trip-total">{{ 'TRIP_TOTAL' | translate:lang }}: {{flight?.fare | currency:'INR': true : '1.0-2' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <button class="btn-primary" [routerLink]="['/payment', flight?.flightId]">{{ 'PAY_ONLINE' | translate:lang }}</button>
+  </section>
   <section class="flightSummaryContainer">
     <div class="flex-card">
       <div class="flex-container">

src/app/modules/flights/flight-detail/flight-detail.component.scss

@@ -3,6 +3,19 @@
   padding: 40px 40px 50px;
 }
 
+@media only screen and (min-width: 60em) {
+  .tripSummaryContainer {
+    width: 33.33%;
+    padding-left: .7em;
+    float: right;
+  }
+  .flightSummaryContainer {
+    width: 66.67%;
+    float: left;
+    clear: left;
+  }
+}
+
 .flex-area-primary {
   .dateAndOD {
     .date {

src/app/modules/flights/flight-search/flight-search.component.html

@@ -102,7 +102,7 @@ <h2>{{ 'PICK_YOUR_DESTINATION' | translate:lang }}</h2>
             <div class="price-button-wrapper">
               <div class="price-column">
                 <div class="offer-price">
-                  <span class="price-emphasis">{{flight.totalfare}}</span>
+                  <span class="price-emphasis">{{flight.fare | currency:'INR': true : '1.0-2' }}</span>
                 </div>
               </div>
               <button [routerLink]="['/detail', flight.flightId]" class="select">Select</button>

src/app/shared/components/payment-mode/payment-mode.component.html

@@ -0,0 +1,44 @@
+<div class="container">
+  <div class="row">
+    <div class="paymentCont">
+      <div class="headingWrap">
+        <h3 class="headingTop text-center">{{ 'SELECT_PAYMENT_MODE' | translate:lang }}</h3>
+      </div>
+      <div class="paymentWrap">
+        <div class="btn-group paymentBtnGroup btn-group-justified" data-toggle="buttons">
+          <label class="btn paymentMethod active">
+            <div class="method visa"></div>
+            <input type="radio" name="options" checked>
+          </label>
+          <label class="btn paymentMethod">
+            <div class="method master-card"></div>
+            <input type="radio" name="options">
+          </label>
+          <label class="btn paymentMethod">
+            <div class="method paytm"></div>
+            <input type="radio" name="options">
+          </label>
+          <label class="btn paymentMethod">
+            <div class="method paypal"></div>
+            <input type="radio" name="options">
+          </label>
+          <label class="btn paymentMethod">
+            <div class="method ez-cash"></div>
+            <input type="radio" name="options">
+          </label>
+
+        </div>
+      </div>
+      <div class="footerNavWrap clearfix">
+        <div class="btn btn-success pull-left btn-fyi" (click)="back()">
+          <span class="glyphicon glyphicon-chevron-left"></span>
+          {{ 'BACK' | translate:lang }}
+        </div>
+        <div class="btn btn-success pull-right btn-fyi" (click)="pay()">{{ 'PAY' | translate:lang }}
+          <span class="glyphicon glyphicon-chevron-right"></span>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

src/app/shared/components/payment-mode/payment-mode.component.scss

@@ -0,0 +1,51 @@
+.paymentWrap {
+  padding: 50px;
+  .paymentBtnGroup {
+    max-width: 800px;
+    margin: auto;
+    .paymentMethod {
+      padding: 40px;
+      box-shadow: none;
+      position: relative;
+      &.active {
+        outline: none;
+        .method {
+          border-color: #4cd264;
+          outline: none;
+          box-shadow: 0px 3px 22px 0px #7b7b7b;
+        }
+      }
+      .method {
+        position: absolute;
+        right: 3px;
+        top: 3px;
+        bottom: 3px;
+        left: 3px;
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
+        border: 2px solid transparent;
+        transition: all 0.5s;
+        &.visa {
+          background-image: url("/assets/images/payment-mode/visa.png");
+        }
+        &.master-card {
+          background-image: url("/assets/images/payment-mode/master.jpg");
+        }
+        &.paytm {
+          background-image: url("/assets/images/payment-mode/paytm.png");
+        }
+        &.paypal {
+          background-image: url("/assets/images/payment-mode/paypal.png");
+        }
+        &.ez-cash {
+          background-image: url("/assets/images/payment-mode/ez-cash.png");
+        }
+        &:hover {
+          border-color: #4cd264;
+          outline: none;
+        }
+      }
+    }
+  }
+}

src/app/shared/components/payment-mode/payment-mode.component.spec.ts

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

src/app/shared/components/payment-mode/payment-mode.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { Language } from 'angular-l10n';
+
+@Component({
+  selector: 'app-payment-mode',
+  templateUrl: './payment-mode.component.html',
+  styleUrls: ['./payment-mode.component.scss']
+})
+export class PaymentModeComponent implements OnInit {
+
+  @Language() lang;
+
+  constructor(private location: Location) { }
+
+  ngOnInit() {
+  }
+
+  back() {
+    this.location.back();
+  }
+
+  pay() {
+    alert('Feature not implemented');
+  }
+
+}

src/app/shared/resources/flights.ts

@@ -1,3 +1,7 @@
+export interface RemoteFare {
+    grossamount: string;
+}
+
 export interface RemoteFlight {
     origin: string;
     deptime: string;
@@ -10,6 +14,7 @@ export interface RemoteFlight {
     fid: string;
     destination: string;
     styleUrl: string;
+    fare: RemoteFare;
 }
 
 export interface Flight {
@@ -24,6 +29,7 @@ export interface Flight {
     flightId: string;
     destination: string;
     styleUrl: string;
+    fare: string;
 }
 
 export class Flight implements Flight {
@@ -38,14 +44,15 @@ export class Flight implements Flight {
         public logoUrl: string,
         public flightId: string,
         public destination: string,
-        public styleUrl: string
+        public styleUrl: string,
+        public fare: string
     ) {
     }
 }
 
 export function FlightFromRemote(flight: RemoteFlight): Flight {
     return new Flight(flight.origin, flight.deptime, flight.duration,
         flight.flightno, flight.airline, flight.arrtime, flight.stops,
-        flight.logoUrl, flight.fid, flight.destination, flight.styleUrl);
+        flight.logoUrl, flight.fid, flight.destination, flight.styleUrl, flight.fare.grossamount);
 }
 

src/app/shared/shared.module.ts

@@ -1,8 +1,15 @@
 import { NgModule } from '@angular/core';
+import { TranslationModule, LocaleService, TranslationService, LocalizationModule } from 'angular-l10n';
 import { HeaderComponent } from './components/';
+import { PaymentModeComponent } from './components/payment-mode/payment-mode.component';
 
 @NgModule({
-    declarations: [HeaderComponent],
-    exports: [HeaderComponent]
+    declarations: [HeaderComponent, PaymentModeComponent],
+    exports: [HeaderComponent],
+    imports: [
+        // Translation
+        TranslationModule.forRoot(),
+        LocalizationModule.forRoot()
+    ]
 })
 export class SharedModule { }

src/assets/translations/locale-en.json

@@ -4,5 +4,11 @@
   "DEPARTURE_DATE": "Departure Date",
   "SEARCH": "search",
   "STOP": "stop",
-  "PICK_YOUR_DESTINATION": "Pick your destination"
+  "PICK_YOUR_DESTINATION": "Pick your destination",
+  "REVIEW_YOUR_TRIP": "Review your trip",
+  "TRIP_TOTAL": "Trip Total",
+  "PAY_ONLINE": "Pay Online",
+  "SELECT_PAYMENT_MODE": "Select your payment method",
+  "PAY": "Pay",
+  "BACK": "Back"
 }

src/assets/translations/locale-ru.json

@@ -4,5 +4,8 @@
   "DEPARTURE_DATE": "Дата отбытия",
   "SEARCH": "поиск",
   "STOP": "стоп",
-  "PICK_YOUR_DESTINATION": "Выберите пункт назначения"
+  "PICK_YOUR_DESTINATION": "Выберите пункт назначения",
+  "REVIEW_YOUR_TRIP": "Review your trip",
+  "TRIP_TOTAL": "Trip Total",
+  "PAY_ONLINE": "Pay Online"
 }