Payment gateway connection & orders api connection

package-lock.json

@@ -12414,6 +12414,11 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "srcdoc-polyfill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/srcdoc-polyfill/-/srcdoc-polyfill-1.0.0.tgz",
+      "integrity": "sha1-gbbXkTHzMjHqDyBckja+kOmspxg="
+    },
     "sshpk": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",

package.json

@@ -35,6 +35,7 @@
     "core-js": "^2.5.4",
     "moment": "^2.24.0",
     "rxjs": "~6.5.1",
+    "srcdoc-polyfill": "^1.0.0",
     "tslib": "^1.9.0",
     "uuid": "^3.3.2",
     "zone.js": "~0.9.1"

src/app/app-routing.module.ts

@@ -1,23 +1,24 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'login', pathMatch: 'full' },
+  { path: 'onboarding', loadChildren: './onboarding/onboarding.module#OnboardingPageModule' },
+  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
+  { path: 'malls', loadChildren: './malls/malls.module#MallsPageModule' },
+  { path: 'mall-details', loadChildren: './mall-details/mall-details.module#MallDetailsPageModule' },
+  { path: 'outlet-details', loadChildren: './outlet-details/outlet-details.module#OutletDetailsPageModule' },
+  { path: 'cart', loadChildren: './cart/cart.module#CartPageModule' },
+  { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
+  { path: 'bookmark', loadChildren: './bookmark/bookmark.module#BookmarkPageModule' },
+  { path: 'near', loadChildren: './near/near.module#NearPageModule' },
  { path: 'in-app-browser', loadChildren: './in-app-browser/in-app-browser.module#InAppBrowserPageModule' },
 
-const routes: Routes = [
-  { path: '', redirectTo: 'login', pathMatch: 'full' },
-  { path: 'onboarding', loadChildren: './onboarding/onboarding.module#OnboardingPageModule' },
-  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
-  { path: 'malls', loadChildren: './malls/malls.module#MallsPageModule' },
-  { path: 'mall-details', loadChildren: './mall-details/mall-details.module#MallDetailsPageModule' },
-  { path: 'outlet-details', loadChildren: './outlet-details/outlet-details.module#OutletDetailsPageModule' },
-  { path: 'cart', loadChildren: './cart/cart.module#CartPageModule' },
-  { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
-  { path: 'bookmark', loadChildren: './bookmark/bookmark.module#BookmarkPageModule' },
-  { path: 'near', loadChildren: './near/near.module#NearPageModule' },
-];
-
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.module.ts

@@ -8,6 +8,9 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { IonicStorageModule } from '@ionic/storage';
 import { HttpClientModule } from '@angular/common/http';
 
+// Modal page
+import { InAppBrowserPageModule } from './in-app-browser/in-app-browser.module';
+
 // Services import
 import { AuthService } from './services/auth.service';
 import { MallService } from './services/mall.service';
@@ -31,6 +34,7 @@ import { Geolocation } from '@ionic-native/geolocation/ngx';
         AppRoutingModule,
         IonicStorageModule.forRoot(),
 		HttpClientModule,
+        InAppBrowserPageModule,
         ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })],
     providers: [
         StatusBar,

src/app/cart/cart.page.html

@@ -80,6 +80,8 @@
     <ion-button shape="round" expand="block" class="pay-button" (click)="placeOrder()"
 	[disabled]="userCart.orderedlist.length === 0"> Pay Now </ion-button>
 
+    <ion-button shape="round" expand="block" class="pay-button" (click)="requestInvoice()"> Testing Payment gateway </ion-button>
+
 	<div class="common-semi-modal filter-holder with-border" [ngClass]="{'active' : show_promocodes }">
 		<header>
             APPLY PROMOCODE <button (click)="show_promocodes = false"> Done </button>

src/app/cart/cart.page.ts

@@ -3,6 +3,8 @@ import { Location } from '@angular/common';
 import { Router } from '@angular/router';
 import { OrderService } from '../services/order.service';
 import { ToastService } from '../services/toast.service';
+import { ModalController } from '@ionic/angular';
+import { InAppBrowserPage } from '../in-app-browser/in-app-browser.page';
 import * as moment from 'moment';
 
 export type ICart = {
@@ -41,13 +43,24 @@ export class CartPage implements OnInit {
         private location: Location,
 		private orderService: OrderService,
 		private toastService: ToastService,
-		private router: Router
+		private router: Router,
+        public modalController: ModalController
     ) { }
 
     ngOnInit() {
 		this.hideMenuButton();
 	}
 
+    async presentModal(url: string) {
+        const modal = await this.modalController.create({
+          component: InAppBrowserPage,
+          componentProps: {
+              url: url
+          }
+        });
+        return await modal.present();
+    }
+
 	ngOnDestroy() {
 		this.showMenuButton();
 	}
@@ -254,4 +267,23 @@ export class CartPage implements OnInit {
 		});
 	}
 
+    requestInvoice() {
+        let invoice_data = {
+            "name": "Nikhil",
+            "email": "kj@webtrigon.com",
+            "contact": "1234567",
+            "total_amt": 1000,
+            "description": "This payment is towards testing Invoice feature",
+            "receipt": "#asdsdsdf",
+            "email_notify": 1
+        };
+
+        this.orderService.generateInvoice(invoice_data).then((data: any) => {
+            console.log(data.shorturl);
+            this.presentModal(data.shorturl);
+        }, (err) => {
+            this.toastService.presentToast("Oops, something went wrong", "danger");
+        });
+    }
+
 }

src/app/in-app-browser/in-app-browser.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { InAppBrowserPage } from './in-app-browser.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: InAppBrowserPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [InAppBrowserPage]
+})
+export class InAppBrowserPageModule {}

src/app/in-app-browser/in-app-browser.page.html

@@ -0,0 +1,10 @@
+<ion-content>
+    <div class="header-bar">
+        <div class="heading-holder">
+            <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
+            <h3> Payment Page </h3>
+        </div>
+    </div>
+
+    <iframe #frame></iframe>
+</ion-content>

src/app/in-app-browser/in-app-browser.page.scss

@@ -0,0 +1,55 @@
+.header-bar {
+    background-image: url('../../assets/custom/background-5.svg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: left top;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px;
+    height: 75px;
+    z-index: 3;
+    top: 0;
+    left: 0;
+    width: 100%;
+    position: sticky;
+    box-shadow: 0px 3px 5px var(--brand-grey);
+    margin-bottom: 20px;
+
+    .heading-holder {
+        display: flex;
+        align-items: center;
+    }
+
+    button, a {
+        background-color: white;
+        color: var(--brand-blue);
+        font-size: 18px;
+        padding: 5px;
+        border-radius: 50%;
+        height: 30px;
+        width: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &.active {
+            color: white;
+            background-color: var(--brand-blue);
+        }
+    }
+
+    h3 {
+        font-size: 16px;
+        color: white;
+        letter-spacing: 0.5px;
+        margin-left: 10px;
+        font-weight: 600;
+    }
+}
+
+
+iframe {
+    width: 100vw;
+    height: 80vh;
+}

src/app/in-app-browser/in-app-browser.page.spec.ts

@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InAppBrowserPage } from './in-app-browser.page';
+
+describe('InAppBrowserPage', () => {
+  let component: InAppBrowserPage;
+  let fixture: ComponentFixture<InAppBrowserPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InAppBrowserPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InAppBrowserPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/in-app-browser/in-app-browser.page.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { ModalController, NavParams } from '@ionic/angular';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as srcDoc from 'srcdoc-polyfill';
+
+
+@Component({
+    selector: 'app-in-app-browser',
+    templateUrl: './in-app-browser.page.html',
+    styleUrls: ['./in-app-browser.page.scss'],
+})
+export class InAppBrowserPage implements OnInit {
+    @ViewChild('frame', null)
+    public iframe:ElementRef;
+    url: any;
+
+    constructor(
+        public modalController: ModalController,
+        public navParams: NavParams,
+        private sanitizer: DomSanitizer
+    ) {
+        this.url = this.navParams.get('url');
+    }
+
+    ngAfterViewInit() {
+        // srcDoc.set(this.iframe.nativeElement, this.url);
+        this.iframe.nativeElement.src = this.url;
+    }
+
+    ngOnInit() {
+    }
+
+    back() {
+        this.modalController.dismiss();
+    }
+
+}

src/app/orders/orders.component.ts

@@ -11,17 +11,20 @@ export class OrdersComponent implements OnInit {
 	userOrders: any = [];
 	selected_order: any;
 	selected_rating: number = 0;
+    userInfo: any;
 
     constructor(
 		private orderService: OrderService,
     ) { }
 
     ngOnInit() {
-		this.orderService.getOrders().then((resp: any)=> {
+        this.userInfo = JSON.parse(localStorage.userInfo)['User Info'];
+
+		this.orderService.getOrders(this.userInfo.id).then((resp: any)=> {
 			this.userOrders = resp.reverse();
 		}, (err) => {
 			console.log(err);
-		});
+		});        
 	}
 
 	getFormattedDate(date, format) {

src/app/services/order.service.ts

@@ -11,7 +11,7 @@ export class OrderService {
 		private http: HttpClient
 	) { }
 
-	async createOrder(userCart) {
+	async createOrder(userCart: any) {
 		const httpOptions = {
 			headers: new HttpHeaders({
 				'Access-Control-Allow-Origin': '*',
@@ -23,7 +23,7 @@ export class OrderService {
 		return await this.http.post(URL + '/api/maioraservice/orders/v1/create/', userCart, httpOptions).toPromise();
 	}
 
-	async getOrders() {
+	async getOrders(id: any) {
 		const httpOptions = {
 			headers: new HttpHeaders({
 				'Access-Control-Allow-Origin': '*',
@@ -32,6 +32,18 @@ export class OrderService {
 			})
 		};
 
-		return await this.http.get(URL + '/api/maioraservice/orders/getallOrders', httpOptions).toPromise();
+		return await this.http.get(URL + '/api/maioraservice/orders/getorders/user_id/' + id, httpOptions).toPromise();
 	}
+
+    async generateInvoice(data: any) {
+        const httpOptions = {
+			headers: new HttpHeaders({
+				'Access-Control-Allow-Origin': '*',
+				'Content-Type': 'application/json',
+				'Authorization': 'Bearer ' + localStorage.access_Token
+			})
+		};
+
+		return await this.http.post(URL + '/Payment/v1/invoice/create', data, httpOptions).toPromise();
+    }
 }