ngx-jenga-api
Version:
Angular wrapper for Equity's Jenga API. Still in progress
598 lines (581 loc) • 64.5 kB
JavaScript
import * as i1 from '@angular/common/http';
import { HttpParams, HttpClient, HttpHeaders, HttpErrorResponse, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, Inject, Component, Input, ViewChild, ErrorHandler, NgModule } from '@angular/core';
import { map, BehaviorSubject, Subject, takeUntil, finalize, catchError } from 'rxjs';
import * as i3 from '@angular/forms';
import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
import * as i4 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1$1 from '@angular/material/snack-bar';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import * as i8 from '@angular/material/sort';
import { MatSort, MatSortModule } from '@angular/material/sort';
import * as i6 from '@angular/material/paginator';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import * as i7 from '@angular/material/table';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import * as i5 from '@angular/material/progress-bar';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import * as i5$1 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i6$1 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i7$1 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i8$1 from '@angular/material/card';
import { MatCardModule } from '@angular/material/card';
import * as i7$2 from '@angular/material/select';
import { MatSelectModule } from '@angular/material/select';
import * as i8$2 from '@angular/material/core';
const link = new URL('https://uat.finserve.africa/v3-apis/transaction-api/v3.0');
const authLink = new URL('https://uat.finserve.africa/authentication/api/v3/authenticate/merchant');
const BaseURL = {
myUrl: link,
myAuthUrl: authLink
};
class ApiService {
constructor(api) {
this.api = api;
}
// ***************************GET REQUESTS***************************
// Get All EazzyPay Merchants
getAllEazzyPayMerchants(page, per_page) {
let params = new HttpParams()
.set('page', page)
.set('per_page', per_page);
return this.api.get(`${BaseURL.myUrl}/merchants`, { params });
}
// Get All Billers
getAllBillers(page, per_page, category) {
let params = new HttpParams()
.set('page', page)
.set('per_page', per_page)
.set('category', category);
return this.api.get(`${BaseURL.myUrl}/billers`, { params });
}
// ***************************POST REQUESTS***************************
// Receive Payments - Bill Payments
receiveBillPayments(data) {
return this.api.post(`${BaseURL.myUrl}/bills/pay`, data);
}
// Receive Payments - Merchant Payments
receiveMerchantPayments(data) {
return this.api.post(`${BaseURL.myUrl}/tills/pay`, data);
}
}
ApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: ApiService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
ApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: ApiService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: ApiService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
const JENGA_API_KEYS = new InjectionToken('jenga.keys');
class AuthService {
constructor(handler, token) {
this.token = token;
this.httpClient = new HttpClient(handler);
}
authenticateMerchant() {
const httpOptions = {
headers: new HttpHeaders({
'API-Key': `${this.token.api_key}`
})
};
return this.httpClient.post(`${BaseURL.myAuthUrl}`, {
merchantCode: this.token.merchant_code,
consumerSecret: this.token.consumer_secret,
}, httpOptions).pipe(map((res) => {
this.isAuthenticated() == true;
return res;
}));
}
isAuthenticated() {
return false;
}
}
AuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: AuthService, deps: [{ token: i1.HttpBackend }, { token: JENGA_API_KEYS }], target: i0.ɵɵFactoryTarget.Injectable });
AuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: AuthService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: AuthService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: i1.HttpBackend }, { type: undefined, decorators: [{
type: Inject,
args: [JENGA_API_KEYS]
}] }]; } });
class NgxJengaApiComponent {
}
NgxJengaApiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxJengaApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxJengaApiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NgxJengaApiComponent, selector: "lib-ngx-jenga-api", ngImport: i0, template: ``, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxJengaApiComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-ngx-jenga-api', template: `` }]
}] });
class ApiKeyInterceptor {
constructor(token) {
this.token = token;
}
intercept(request, next) {
request = request.clone({
setHeaders: {
'API-Key': `${this.token.api_key}`
}
});
return next.handle(request);
}
}
ApiKeyInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: ApiKeyInterceptor, deps: [{ token: JENGA_API_KEYS }], target: i0.ɵɵFactoryTarget.Injectable });
ApiKeyInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: ApiKeyInterceptor });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: ApiKeyInterceptor, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Inject,
args: [JENGA_API_KEYS]
}] }]; } });
class AuthInterceptor {
constructor() { }
intercept(request, next) {
const token = localStorage.getItem("jenga-tkn");
request = request.clone({
setHeaders: {
Authorization: `Bearer ${token}`,
}
});
return next.handle(request);
}
}
AuthInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: AuthInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
AuthInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: AuthInterceptor });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: AuthInterceptor, decorators: [{
type: Injectable
}], ctorParameters: function () { return []; } });
class ErrorService {
getClientErrorMessage(error) {
return error.message ? error.message : error.toString();
}
getServerErrorMessage(error) {
return navigator.onLine ? error.message : 'Kindly check your internet connection';
}
}
ErrorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: ErrorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
ErrorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: ErrorService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: ErrorService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class LoggingService {
constructor() { }
logError(message, stack) {
// send the errors to database
// console.log("LoggingService:" + message)
}
}
LoggingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: LoggingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
LoggingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: LoggingService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: LoggingService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
class NotificationService {
constructor(zone, snack) {
this.zone = zone;
this.snack = snack;
}
showSuccess(message) {
this.zone.run(() => {
this.snack.open(message, 'close', {
duration: 4000
});
});
}
showWarning(message) {
this.zone.run(() => {
this.snack.open(message, 'close', {
duration: 6000
});
});
}
showError(message) {
this.zone.run(() => {
this.snack.open(message, 'close', {
duration: 4000
});
});
}
}
NotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NotificationService, deps: [{ token: i0.NgZone }, { token: i1$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable });
NotificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NotificationService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NotificationService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$1.MatSnackBar }]; } });
class GlobalErrorHndler {
constructor(injector) {
this.injector = injector;
}
handleError(error) {
const errorService = this.injector.get(ErrorService);
const logger = this.injector.get(LoggingService);
const notifier = this.injector.get(NotificationService);
let message;
let stackTrace;
if (error instanceof HttpErrorResponse) {
message = errorService.getServerErrorMessage(error);
notifier.showError(message);
}
else {
message = errorService.getClientErrorMessage(error);
notifier.showError(message);
}
logger.logError(message, stackTrace);
}
}
GlobalErrorHndler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: GlobalErrorHndler, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
GlobalErrorHndler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: GlobalErrorHndler });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: GlobalErrorHndler, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i0.Injector }]; } });
class LoaderService {
constructor() {
this.isLoading$$ = new BehaviorSubject(false);
this.isLoading$ = this.isLoading$$.asObservable();
}
setLoading(isLoading) {
this.isLoading$$.next(isLoading);
}
}
LoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
LoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: LoaderService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: LoaderService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class MerchantsComponent {
constructor(api, loadingService, authenticateEndpoint) {
this.api = api;
this.loadingService = loadingService;
this.authenticateEndpoint = authenticateEndpoint;
this.destroyComponent = new Subject();
this.tableShadow = true;
this.showSearchBar = true;
this.authenticateEndpoint.authenticateMerchant().subscribe({
next: (res) => {
localStorage.setItem('jenga-tkn', res.accessToken);
},
error: (e) => {
throw new Error(e.error.message);
}
});
}
ngAfterViewInit() {
this.getMerchants();
}
ngOnDestroy() {
this.destroyComponent.next();
this.destroyComponent.complete();
}
getMerchants(per_page = 25) {
this.api.getAllEazzyPayMerchants(1, per_page)
.pipe(takeUntil(this.destroyComponent))
.subscribe({
next: (res) => {
this.merchantList = res.data.merchants;
this.dataSource = new MatTableDataSource(res.data.merchants);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
},
error: (e) => {
throw new Error(e.error.message);
}
});
}
updatePageSize(event) {
const per_page = event.pageSize;
this.getMerchants(per_page);
}
applyFilter(event) {
const filterValue = event.target.value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}
MerchantsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MerchantsComponent, deps: [{ token: ApiService }, { token: LoaderService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
MerchantsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: MerchantsComponent, selector: "jenga-all-merchants", inputs: { tableShadow: "tableShadow", showSearchBar: "showSearchBar" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"table\">\n <div class=\"searchBar\" *ngIf=\"showSearchBar\">\n <input (keyup)=\"applyFilter($event)\" id=\"searchQueryInput\" type=\"text\" name=\"searchQueryInput\" placeholder=\"Search {{ merchantList?.length }} merchants\" />\n </div>\n <table mat-table [dataSource]=\"dataSource\" matSort [class.mat-elevation-z8]=\"tableShadow\">\n\n <ng-container matColumnDef=\"name\">\n <th class=\"table-header\" mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by name\">Name</th>\n <td mat-cell *matCellDef=\"let row\"> {{ row.name }} </td>\n </ng-container>\n\n <ng-container matColumnDef=\"tillNumber\">\n <th class=\"table-header\" mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by tillNumber\">Till Number</th>\n <td mat-cell *matCellDef=\"let row\"> {{ row.tillNumber }} </td>\n </ng-container>\n\n\n <!-- <ng-container matColumnDef=\"outlets\">\n <th class=\"table-header\" mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by tillnumber\">Outlets</th>\n\n <td mat-cell *matCellDef=\"let row\">\n <table mat-table [dataSource]=\"row.outlets\">\n\n <ng-container matColumnDef=\"Oname\">\n <th class=\"sub-table\" mat-header-cell *matHeaderCellDef>Name</th>\n <td mat-cell *matCellDef=\"let row\"> {{ row.name }} </td>\n </ng-container>\n\n <ng-container matColumnDef=\"Otillnumber\">\n <th class=\"sub-table\" mat-header-cell *matHeaderCellDef>Till Number</th>\n <td mat-cell *matCellDef=\"let row\"> {{ row.tillnumber }} </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"['Oname', 'Otillnumber']\" RowDef=\"['Oname', 'Otillnumber']\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['Oname', 'Otillnumber'];\"></tr>\n </table>\n </td>\n </ng-container> -->\n\n\n <tr mat-header-row *matHeaderRowDef=\"['name', 'tillNumber']\" RowDef=\"['name', 'tillNumber']\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['name', 'tillNumber'];\"></tr>\n </table>\n <mat-progress-bar *ngIf=\"loadingService.isLoading$ | async\" mode=\"indeterminate\"></mat-progress-bar>\n <mat-paginator #paginator [pageSizeOptions]=\"[25, 50, 100]\" showFirstLastButtons (page)=\"updatePageSize($event)\"></mat-paginator>\n</div>", styles: [".table{padding:40px;min-width:400px;overflow:auto}.sub-table{min-width:200px;font-weight:500}.table-header{font-weight:600}.searchBar{padding-bottom:10px;width:100%;display:flex;flex-direction:row;align-items:center}#searchQueryInput{width:100%;height:2.8rem;background:#f5f5f5;outline:none;border:none;border-radius:1.625rem;padding:0 3.5rem 0 1.5rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i6.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MerchantsComponent, decorators: [{
type: Component,
args: [{ selector: 'jenga-all-merchants', template: "<div class=\"table\">\n <div class=\"searchBar\" *ngIf=\"showSearchBar\">\n <input (keyup)=\"applyFilter($event)\" id=\"searchQueryInput\" type=\"text\" name=\"searchQueryInput\" placeholder=\"Search {{ merchantList?.length }} merchants\" />\n </div>\n <table mat-table [dataSource]=\"dataSource\" matSort [class.mat-elevation-z8]=\"tableShadow\">\n\n <ng-container matColumnDef=\"name\">\n <th class=\"table-header\" mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by name\">Name</th>\n <td mat-cell *matCellDef=\"let row\"> {{ row.name }} </td>\n </ng-container>\n\n <ng-container matColumnDef=\"tillNumber\">\n <th class=\"table-header\" mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by tillNumber\">Till Number</th>\n <td mat-cell *matCellDef=\"let row\"> {{ row.tillNumber }} </td>\n </ng-container>\n\n\n <!-- <ng-container matColumnDef=\"outlets\">\n <th class=\"table-header\" mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by tillnumber\">Outlets</th>\n\n <td mat-cell *matCellDef=\"let row\">\n <table mat-table [dataSource]=\"row.outlets\">\n\n <ng-container matColumnDef=\"Oname\">\n <th class=\"sub-table\" mat-header-cell *matHeaderCellDef>Name</th>\n <td mat-cell *matCellDef=\"let row\"> {{ row.name }} </td>\n </ng-container>\n\n <ng-container matColumnDef=\"Otillnumber\">\n <th class=\"sub-table\" mat-header-cell *matHeaderCellDef>Till Number</th>\n <td mat-cell *matCellDef=\"let row\"> {{ row.tillnumber }} </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"['Oname', 'Otillnumber']\" RowDef=\"['Oname', 'Otillnumber']\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['Oname', 'Otillnumber'];\"></tr>\n </table>\n </td>\n </ng-container> -->\n\n\n <tr mat-header-row *matHeaderRowDef=\"['name', 'tillNumber']\" RowDef=\"['name', 'tillNumber']\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['name', 'tillNumber'];\"></tr>\n </table>\n <mat-progress-bar *ngIf=\"loadingService.isLoading$ | async\" mode=\"indeterminate\"></mat-progress-bar>\n <mat-paginator #paginator [pageSizeOptions]=\"[25, 50, 100]\" showFirstLastButtons (page)=\"updatePageSize($event)\"></mat-paginator>\n</div>", styles: [".table{padding:40px;min-width:400px;overflow:auto}.sub-table{min-width:200px;font-weight:500}.table-header{font-weight:600}.searchBar{padding-bottom:10px;width:100%;display:flex;flex-direction:row;align-items:center}#searchQueryInput{width:100%;height:2.8rem;background:#f5f5f5;outline:none;border:none;border-radius:1.625rem;padding:0 3.5rem 0 1.5rem;font-size:1rem}\n"] }]
}], ctorParameters: function () { return [{ type: ApiService }, { type: LoaderService }, { type: AuthService }]; }, propDecorators: { tableShadow: [{
type: Input
}], showSearchBar: [{
type: Input
}], paginator: [{
type: ViewChild,
args: [MatPaginator]
}], sort: [{
type: ViewChild,
args: [MatSort, { static: false }]
}] } });
class GeneralService {
// general functions and such
constructor() { }
generateRandomString(length) {
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
}
GeneralService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: GeneralService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
GeneralService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: GeneralService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: GeneralService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
class BillPaymentsComponent {
constructor(api, gs, formbuilder, authenticateEndpoint) {
this.api = api;
this.gs = gs;
this.formbuilder = formbuilder;
this.authenticateEndpoint = authenticateEndpoint;
this.cardShadow = true;
this.authenticateEndpoint.authenticateMerchant().subscribe({
next: (res) => {
localStorage.setItem('jenga-tkn', res.accessToken);
},
error: (e) => {
throw new Error(e.error.message);
}
});
}
ngOnInit() {
this.billForm = this.formbuilder.group({
billerCode: [this.billerCode, [Validators.required]],
countryCode: [this.countryCode, [Validators.required]],
reference: [this.reference, [Validators.required]],
amount: [this.amount, [Validators.required]],
currency: [this.currency, [Validators.required]],
name: [this.name, [Validators.required]],
account: [this.account, [Validators.required]],
reference2: [this.gs.generateRandomString(12), [Validators.required]],
partnerId: [this.partnerId, [Validators.required]],
mobileNumber: [this.mobileNumber, [Validators.required]],
remarks: [this.remarks, [Validators.required]],
});
}
billPayments() {
this.paymentData = {
biller: {
billerCode: this.billForm.value.billerCode,
countryCode: this.billForm.value.countryCode
},
bill: {
reference: this.billForm.value.reference,
amount: this.billForm.value.amount,
currency: this.billForm.value.currency
},
payer: {
name: this.billForm.value.name,
account: this.billForm.value.reference,
reference: this.billForm.value.reference2,
mobileNumber: this.billForm.value.mobileNumber
},
partnerId: this.billForm.value.partnerId,
remarks: this.billForm.value.remarks
};
this.api.receiveBillPayments(this.paymentData).subscribe({
next: (res) => {
console.log("Bill payment is: ", res);
},
error: (e) => {
throw new Error(e.error.message);
}
});
}
}
BillPaymentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BillPaymentsComponent, deps: [{ token: ApiService }, { token: GeneralService }, { token: i3.FormBuilder }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
BillPaymentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: BillPaymentsComponent, selector: "jenga-bill-payments", inputs: { billerCode: "billerCode", countryCode: "countryCode", reference: "reference", amount: "amount", currency: "currency", name: "name", account: "account", reference2: "reference2", partnerId: "partnerId", authorization: "authorization", signature: "signature", mobileNumber: "mobileNumber", remarks: "remarks", cardShadow: "cardShadow" }, ngImport: i0, template: "<mat-card [class.mat-elevation-z8]=\"cardShadow\">\n <form class=\"user-form\" [formGroup]=\"billForm\">\n\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Name</mat-label>\n <input matInput formControlName=\"name\">\n <mat-error>Kindly add your name</mat-error>\n </mat-form-field>\n <br>\n\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Account Number</mat-label>\n <input matInput formControlName=\"reference\">\n <mat-error>Kindly add yur account number</mat-error>\n </mat-form-field>\n <br>\n\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Mobile Number</mat-label>\n <input matInput formControlName=\"mobileNumber\">\n <mat-error>Kindly add a mobile number</mat-error>\n </mat-form-field>\n <br>\n\n <mat-form-field class=\"form-field full-width\" appearance=\"outline\" class=\"example-full-width\">\n <mat-label>Leave a Remark</mat-label>\n <textarea matInput formControlName=\"remarks\"></textarea>\n <mat-error>Kindly add a remark</mat-error>\n </mat-form-field>\n <br>\n\n <button (click)=\"billPayments()\" mat-raised-button color=\"primary\">Make Payment</button>\n\n </form>\n</mat-card>", styles: ["mat-card{width:inherit}.user-form{display:inline-grid;padding:30px}\n"], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i6$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BillPaymentsComponent, decorators: [{
type: Component,
args: [{ selector: 'jenga-bill-payments', template: "<mat-card [class.mat-elevation-z8]=\"cardShadow\">\n <form class=\"user-form\" [formGroup]=\"billForm\">\n\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Name</mat-label>\n <input matInput formControlName=\"name\">\n <mat-error>Kindly add your name</mat-error>\n </mat-form-field>\n <br>\n\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Account Number</mat-label>\n <input matInput formControlName=\"reference\">\n <mat-error>Kindly add yur account number</mat-error>\n </mat-form-field>\n <br>\n\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Mobile Number</mat-label>\n <input matInput formControlName=\"mobileNumber\">\n <mat-error>Kindly add a mobile number</mat-error>\n </mat-form-field>\n <br>\n\n <mat-form-field class=\"form-field full-width\" appearance=\"outline\" class=\"example-full-width\">\n <mat-label>Leave a Remark</mat-label>\n <textarea matInput formControlName=\"remarks\"></textarea>\n <mat-error>Kindly add a remark</mat-error>\n </mat-form-field>\n <br>\n\n <button (click)=\"billPayments()\" mat-raised-button color=\"primary\">Make Payment</button>\n\n </form>\n</mat-card>", styles: ["mat-card{width:inherit}.user-form{display:inline-grid;padding:30px}\n"] }]
}], ctorParameters: function () { return [{ type: ApiService }, { type: GeneralService }, { type: i3.FormBuilder }, { type: AuthService }]; }, propDecorators: { billerCode: [{
type: Input
}], countryCode: [{
type: Input
}], reference: [{
type: Input
}], amount: [{
type: Input
}], currency: [{
type: Input
}], name: [{
type: Input
}], account: [{
type: Input
}], reference2: [{
type: Input
}], partnerId: [{
type: Input
}], authorization: [{
type: Input
}], signature: [{
type: Input
}], mobileNumber: [{
type: Input
}], remarks: [{
type: Input
}], cardShadow: [{
type: Input
}] } });
class MerchantPaymentsComponent {
constructor(api, general, formbuilder, authenticateEndpoint) {
this.api = api;
this.general = general;
this.formbuilder = formbuilder;
this.authenticateEndpoint = authenticateEndpoint;
this.destroyComponent = new Subject();
this.authenticateEndpoint.authenticateMerchant().subscribe({
next: (res) => {
localStorage.setItem('jenga-tkn', res.accessToken);
},
error: (e) => {
throw new Error(e.error.message);
}
});
}
ngOnInit() {
this.merchantForm = this.formbuilder.group({
till: [this.till, [Validators.required]],
uniqueRef: [this.general.generateRandomString(12), [Validators.required]],
amount: [this.amount, [Validators.required]],
currency: [this.currency, [Validators.required]],
bankId: [this.bankId, [Validators.required]],
mobileNumber: [this.mobileNumber, [Validators.required]],
});
}
ngOnDestroy() {
this.destroyComponent.next();
this.destroyComponent.complete();
}
merchantPayments() {
const data = {
merchant: {
till: this.merchantForm.value.till
},
payment: {
ref: this.merchantForm.value.uniqueRef,
amount: this.merchantForm.value.amount,
currency: this.merchantForm.value.currency
},
partner: {
id: this.merchantForm.value.bankId,
ref: this.merchantForm.value.mobileNumber
}
};
this.api.receiveMerchantPayments(data).pipe(takeUntil(this.destroyComponent)).subscribe({
next: (res) => {
console.log(res);
},
error: (e) => {
throw new Error(e.error.message);
}
});
}
}
MerchantPaymentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MerchantPaymentsComponent, deps: [{ token: ApiService }, { token: GeneralService }, { token: i3.FormBuilder }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
MerchantPaymentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: MerchantPaymentsComponent, selector: "jenga-merchant-payments", inputs: { till: "till", uniqueRef: "uniqueRef", amount: "amount", currency: "currency", bankId: "bankId", mobileNumber: "mobileNumber" }, ngImport: i0, template: "<mat-card>\n <form class=\"user-form\" [formGroup]=\"merchantForm\">\n\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Till number</mat-label>\n <input matInput formControlName=\"till\">\n <mat-error>Kindly add the till number</mat-error>\n </mat-form-field>\n <br>\n\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Amount</mat-label>\n <input matInput formControlName=\"amount\">\n <mat-error>Kindly add your amount</mat-error>\n </mat-form-field>\n <br>\n\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Mobile Number</mat-label>\n <input matInput formControlName=\"mobileNumber\">\n <mat-error>Kindly add a mobile number</mat-error>\n </mat-form-field>\n <br>\n\n <button [disabled]=\"!merchantForm.valid\" (click)=\"merchantPayments()\" mat-raised-button color=\"primary\">Make Payment</button>\n\n </form>\n</mat-card>", styles: ["mat-card{width:inherit}.user-form{display:inline-grid;padding:30px}\n"], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i6$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MerchantPaymentsComponent, decorators: [{
type: Component,
args: [{ selector: 'jenga-merchant-payments', template: "<mat-card>\n <form class=\"user-form\" [formGroup]=\"merchantForm\">\n\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Till number</mat-label>\n <input matInput formControlName=\"till\">\n <mat-error>Kindly add the till number</mat-error>\n </mat-form-field>\n <br>\n\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Amount</mat-label>\n <input matInput formControlName=\"amount\">\n <mat-error>Kindly add your amount</mat-error>\n </mat-form-field>\n <br>\n\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Mobile Number</mat-label>\n <input matInput formControlName=\"mobileNumber\">\n <mat-error>Kindly add a mobile number</mat-error>\n </mat-form-field>\n <br>\n\n <button [disabled]=\"!merchantForm.valid\" (click)=\"merchantPayments()\" mat-raised-button color=\"primary\">Make Payment</button>\n\n </form>\n</mat-card>", styles: ["mat-card{width:inherit}.user-form{display:inline-grid;padding:30px}\n"] }]
}], ctorParameters: function () { return [{ type: ApiService }, { type: GeneralService }, { type: i3.FormBuilder }, { type: AuthService }]; }, propDecorators: { till: [{
type: Input
}], uniqueRef: [{
type: Input
}], amount: [{
type: Input
}], currency: [{
type: Input
}], bankId: [{
type: Input
}], mobileNumber: [{
type: Input
}] } });
class BillersComponent {
constructor(api, loadingService, authenticateEndpoint) {
this.api = api;
this.loadingService = loadingService;
this.authenticateEndpoint = authenticateEndpoint;
this.showSearchBar = true;
this.tableShadow = true;
this.categories = 'utilities';
this.authenticateEndpoint.authenticateMerchant().subscribe({
next: (res) => {
localStorage.setItem('jenga-tkn', res.accessToken);
},
error: (e) => {
throw new Error(e.error.message);
}
});
}
ngAfterViewInit() {
this.getBillers(25);
}
getBillers(per_page) {
this.api.getAllBillers(1, per_page, this.categories)
.subscribe({
next: (res) => {
this.billersList = res.data.billers;
this.dataSource = new MatTableDataSource(res.data.billers);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
},
error: (e) => {
throw new Error(e.error.message);
}
});
}
updatePageSize(event) {
const per_page = event.pageSize;
this.getBillers(per_page);
}
onCategorySelected(event) {
console.log('event is: ', event);
this.api.getAllBillers(1, 25, event.value).subscribe({
next: (res) => {
this.billersList = res.data.billers;
this.dataSource = new MatTableDataSource(res.data.billers);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
},
error: (e) => {
throw new Error(e.error.message);
}
});
}
applyFilter(event) {
const filterValue = event.target.value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}
BillersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: BillersComponent, deps: [{ token: ApiService }, { token: LoaderService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
BillersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: BillersComponent, selector: "jenga-all-billers", inputs: { showSearchBar: "showSearchBar", tableShadow: "tableShadow", categories: "categories" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"table\">\n <div class=\"searchBar\" *ngIf=\"showSearchBar\">\n <input (keyup)=\"applyFilter($event)\" id=\"searchQueryInput\" type=\"text\" name=\"searchQueryInput\" placeholder=\"Search {{ billersList?.length }} merchants\" />\n <br>\n </div>\n <table mat-table [dataSource]=\"dataSource\" matSort [class.mat-elevation-z8]=\"tableShadow\">\n\n <ng-container [style.width]=\"'170px'\" matColumnDef=\"category\">\n <th [style.width]=\"'170px'\" class=\"table-header\" mat-header-cell *matHeaderCellDef>\n <mat-select (selectionChange)=\"onCategorySelected($event)\" [style.width]=\"'170px'\" [(value)]=\"categories\">\n <mat-option value=\"utilities\">Utilities</mat-option>\n <mat-option value=\"services\">Services</mat-option>\n </mat-select>\n </th>\n <td mat-cell *matCellDef=\"let row\"></td>\n </ng-container>\n\n\n <ng-container matColumnDef=\"name\">\n <th class=\"table-header\" mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by name\">Name</th>\n <td mat-cell *matCellDef=\"let row\"> {{ row.name }} </td>\n </ng-container>\n\n <ng-container matColumnDef=\"code\">\n <th class=\"table-header\" mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by code\">Code</th>\n <td mat-cell *matCellDef=\"let row\"> {{ row.code }} </td>\n </ng-container>\n\n\n <!-- <ng-container matColumnDef=\"outlets\">\n <th class=\"table-header\" mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by tillnumber\">Outlets</th>\n\n <td mat-cell *matCellDef=\"let row\">\n <table mat-table [dataSource]=\"row.outlets\">\n\n <ng-container matColumnDef=\"Oname\">\n <th class=\"sub-table\" mat-header-cell *matHeaderCellDef>Name</th>\n <td mat-cell *matCellDef=\"let row\"> {{ row.name }} </td>\n </ng-container>\n\n <ng-container matColumnDef=\"Otillnumber\">\n <th class=\"sub-table\" mat-header-cell *matHeaderCellDef>Till Number</th>\n <td mat-cell *matCellDef=\"let row\"> {{ row.tillnumber }} </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"['Oname', 'Otillnumber']\" RowDef=\"['Oname', 'Otillnumber']\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['Oname', 'Otillnumber'];\"></tr>\n </table>\n </td>\n </ng-container> -->\n\n\n <tr mat-header-row *matHeaderRowDef=\"['category', 'name', 'code']\" RowDef=\"['category', 'name', 'code']\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['category', 'name', 'code'];\"></tr>\n </table>\n <mat-progress-bar *ngIf=\"loadingService.isLoading$ | async\" mode=\"indeterminate\"></mat-progress-bar>\n <mat-paginator #paginator [pageSizeOptions]=\"[25, 50, 100]\" showFirstLastButtons (page)=\"updatePageSize($event)\"></mat-paginator>\n</div>", styles: [".table{width:inherit}.drop-down-header{width:70px}.searchBar{padding-bottom:10px;width:100%;display:flex;flex-direction:row;align-items:center}#searchQueryInput{width:100%;height:2.8rem;background:#f5f5f5;outline:none;border:none;border-radius:1.625rem;padding:0 3.5rem 0 1.5rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i6.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i7$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "mat