\r\n
\r\n
\r\n
\r\n\r\n \r\n\r\n
\r\n\r\n \r\n\r\n
Based on your initial input, below Card(s) are suitable for you.
\r\n
\r\n
0\">\r\n\r\n \r\n
\r\n
\r\n
\r\n
\r\n
{{card.Name}}
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n\r\n
\r\n
\r\n \r\n \r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n\r\n \r\n\r\n
\r\n\r\n
\r\n
\r\n
No card is avaliable for you.
\r\n \r\n
\r\n\r\n
\r\n
\r\n
{{errorMessage}}
\r\n \r\n
\r\n\r\n \r\n\r\n
\r\n
\r\n
\r\n
\r\n ","import { Component, OnInit } from '@angular/core';\r\nimport { SharingDataService } from 'src/shared/services/sharingData/sharing-data.service';\r\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\r\nimport { Card } from 'src/app/models/card.model';\r\nimport { ValidationService } from 'src/shared/services/validation/validation.service';\r\nimport { FormattingService } from 'src/shared/services/formatting/formatting.service';\r\nimport { Router } from '@angular/router';\r\n\r\n\r\n@Component({\r\n selector: 'app-desired-credit-limit',\r\n templateUrl: './desired-credit-limit.component.html',\r\n styleUrls: ['./desired-credit-limit.component.css']\r\n})\r\nexport class DesiredCreditLimitComponent implements OnInit {\r\n\r\n constructor(private sharingDataService: SharingDataService,\r\n private formBuilder: FormBuilder,\r\n private validationService: ValidationService,\r\n private formattingService: FormattingService,\r\n private router: Router\r\n ) { }\r\n\r\n desiredCreditLimitFormGroup: FormGroup;\r\n selcetedCard: Card;\r\n submitted: boolean = false;\r\n\r\n ngOnInit(): void {\r\n this.selcetedCard = this.sharingDataService.minimumPaymtCalSharedData.SelectedCard;\r\n this.buildingForm(this.selcetedCard);\r\n }\r\n\r\n buildingForm(selcetedCard: Card) {\r\n this.desiredCreditLimitFormGroup = this.formBuilder.group({\r\n DesiredCreditLimitTxBx: ['', [Validators.required, this.validationService.DesiredCreditLimitValidation(selcetedCard.MinCreditLimit, selcetedCard.MaxCreditLimit,true)]]\r\n });\r\n this.desiredCreditLimitFormGroup.controls.DesiredCreditLimitTxBx.valueChanges.subscribe((change) => {\r\n let incomeVal = this.desiredCreditLimitFormGroup.controls.DesiredCreditLimitTxBx.value;\r\n let unwantedContentRemovedValue = incomeVal.replace(/[^0-9,.]/g, '');\r\n if (change != unwantedContentRemovedValue) {\r\n this.desiredCreditLimitFormGroup.controls.DesiredCreditLimitTxBx.setValue(unwantedContentRemovedValue);\r\n }\r\n });\r\n }\r\n calcuateBtnClick() {\r\n this.submitted = true;\r\n // stop here, if FormGroup is invalid\r\n if (this.desiredCreditLimitFormGroup.invalid) {\r\n return;\r\n }\r\n let desiredCreditLimit = this.desiredCreditLimitFormGroup.controls.DesiredCreditLimitTxBx.value\r\n this.sharingDataService.minimumPaymtCalSharedData.DesiredCreditLimit = desiredCreditLimit;\r\n this.router.navigate(['/cardinfo']);\r\n }\r\n desiredCreditLimitTxBx_Blur(event: any) {\r\n let value = event.target.value;\r\n let removeFormattedValue = this.formattingService.removeFormattedCurrency(value);\r\n let formattedValue = this.formattingService.formatCurrency(removeFormattedValue);\r\n this.desiredCreditLimitFormGroup.get('DesiredCreditLimitTxBx').setValue(formattedValue);\r\n }\r\n\r\n}\r\n","\r\n
\r\n
\r\n
\r\n
\r\n\r\n \r\n
\r\n
\r\n
\r\n
{{selcetedCard?.Name}}
\r\n
\r\n
\r\n
\r\n \r\n\r\n \r\n\r\n
\r\n\r\n \r\n\r\n
\r\n
\r\n
\r\n
\r\n\r\n","import { Component, OnInit } from '@angular/core';\r\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\r\nimport { SharingDataService } from '../../../shared/services/sharingData/sharing-data.service';\r\nimport { ValidationService } from 'src/shared/services/validation/validation.service';\r\nimport { ConfigData } from '../../models/configData.model';\r\nimport { CardService } from '../../../shared/services/card/card.service';\r\nimport { FormattingService } from 'src/shared/services/formatting/formatting.service';\r\nimport { Router, ActivatedRoute } from '@angular/router';\r\nimport { JsonResolved } from '../../models/jsonResolved.model';\r\n\r\n@Component({\r\n selector: 'app-recommendation',\r\n templateUrl: './recommendation.component.html',\r\n styleUrls: ['./recommendation.component.css'],\r\n})\r\nexport class RecommendationComponent implements OnInit {\r\n constructor(\r\n public sharingDataService: SharingDataService,\r\n private formBuilder: FormBuilder,\r\n private validationService: ValidationService,\r\n private router: Router,\r\n private cardService: CardService,\r\n private formattingService: FormattingService,\r\n private route: ActivatedRoute\r\n ) {}\r\n\r\n nationality: string;\r\n configurations: ConfigData;\r\n recommendationsFormGroup: FormGroup;\r\n submitted: boolean = false;\r\n\r\n getConfigDetails() {\r\n this.configurations = this.cardService.getConfigInfo();\r\n }\r\n\r\n ngOnInit(): void {\r\n this.getConfigDetails();\r\n this.buildingForm();\r\n console.log(this.sharingDataService.minimumPaymtCalSharedData.Nationality);\r\n console.log(\r\n this.sharingDataService.minimumPaymtCalSharedData.TranslatedData\r\n );\r\n }\r\n\r\n buildingForm() {\r\n this.recommendationsFormGroup = this.formBuilder.group({\r\n NetIncomeTxBx: [\r\n '',\r\n [\r\n Validators.required,\r\n this.validationService.DesiredCreditLimitValidation(\r\n this.configurations.NetSalaryBoundaries.min,\r\n this.configurations.NetSalaryBoundaries.max\r\n ),\r\n ],\r\n ],\r\n });\r\n this.recommendationsFormGroup.controls.NetIncomeTxBx.valueChanges.subscribe(\r\n (change) => {\r\n let incomeVal = this.recommendationsFormGroup.controls.NetIncomeTxBx\r\n .value;\r\n let unwantedContentRemovedValue = incomeVal.replace(/[^0-9,.]/g, '');\r\n if (change != unwantedContentRemovedValue) {\r\n this.recommendationsFormGroup.controls.NetIncomeTxBx.setValue(\r\n unwantedContentRemovedValue\r\n );\r\n }\r\n }\r\n );\r\n }\r\n\r\n setSaudi() {\r\n this.sharingDataService.minimumPaymtCalSharedData.Nationality = true;\r\n }\r\n\r\n setNonSaudi() {\r\n this.sharingDataService.minimumPaymtCalSharedData.Nationality = false;\r\n }\r\n\r\n NetIncomeTxBx_Blur(event: any) {\r\n let value = event.target.value;\r\n let removeFormattedValue = this.formattingService.removeFormattedCurrency(\r\n value\r\n );\r\n let formattedValue = this.formattingService.formatCurrency(\r\n removeFormattedValue\r\n );\r\n this.recommendationsFormGroup.get('NetIncomeTxBx').setValue(formattedValue);\r\n }\r\n\r\n proceed() {\r\n this.submitted = true;\r\n this.sharingDataService.minimumPaymtCalSharedData.MonthlyIncome = this.recommendationsFormGroup.get(\r\n 'NetIncomeTxBx'\r\n ).value;\r\n this.router.navigate(['/cardrecommendation']);\r\n }\r\n}\r\n","\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
TellUsAboutYourself
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n","export const configurations = {\r\n MurabahaRate: 2.75,\r\n MinPayment: 100, \r\n MinPaymentPer: 5,\r\n\r\n NetSalaryBoundaries:{\r\n min:100,\r\n max:1000000,\r\n }\r\n};\r\n","// This file can be replaced during build by using the `fileReplacements` array.\r\n// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.\r\n// The list of file replacements can be found in `angular.json`.\r\n\r\nexport const environment = {\r\n production: true,\r\n baseURI:\"http://localhost:14214/\"\r\n};\r\n\r\n/*\r\n * For easier debugging in development mode, you can import the following file\r\n * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.\r\n *\r\n * This import should be commented out in production mode because it will have a negative impact\r\n * on performance if an error is thrown.\r\n */\r\n// import 'zone.js/dist/zone-error'; // Included with Angular CLI.\r\n","import { enableProdMode } from '@angular/core';\r\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\r\n\r\nimport { AppModule } from './app/app.module';\r\nimport { environment } from './environments/environment';\r\n\r\nif (environment.production) {\r\n enableProdMode();\r\n}\r\n\r\nplatformBrowserDynamic().bootstrapModule(AppModule)\r\n .catch(err => console.error(err));\r\n","import { Injectable } from '@angular/core';\r\nimport { HttpService } from '../http.service';\r\nimport { Observable } from 'rxjs';\r\nimport { catchError } from 'rxjs/operators';\r\nimport { HttpErrorResponse } from '@angular/common/http';\r\nimport { IRequestG } from '../../../app/models/dtos/requestG.model';\r\nimport { IAprOutputData } from '../../../app/models/aprOutputData.model';\r\nimport { IResponseG } from '../../../app/models/dtos/responseG.model';\r\nimport { IAprInputData } from '../../../app/models/aprInputData.model';\r\n\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class CalculatorService {\r\n\r\n constructor(private http: HttpService) { }\r\n\r\n public getDataCalculatorPage(url: string, calDataGetReq: IRequestG
): Observable> {\r\n return this.http.post, IRequestG>(url, calDataGetReq).pipe(\r\n catchError(this.handleError)\r\n );\r\n }\r\n private handleError(error: HttpErrorResponse): Observable {\r\n console.error(error);\r\n return Observable.throw(error.message || 'Server error');\r\n }\r\n\r\n}\r\n","import { Injectable, LOCALE_ID, Inject } from '@angular/core';\r\nimport { Card } from '../../../app/models/card.model';\r\nimport { configurations } from '../../../configurations/configurations';\r\nimport { ConfigData } from '../../../app/models/configData.model';\r\nimport { SharingDataService } from '../sharingData/sharing-data.service';\r\nimport { JsonDetails } from '../../../app/models/jsonDetails.model';\r\n\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class CardService {\r\n\r\n constructor(@Inject(LOCALE_ID) private language: string) {}\r\n\r\n getRecommendedCardList(nationality: boolean, income: number,incomeUSD: number, cardDetails: Card[]): Card[] {\r\n let list: Card[] = [];\r\n\r\n if(nationality)\r\n {\r\n list = cardDetails.filter(\r\n (card) =>\r\n (card.MinIncomeSaudi <= income)\r\n );\r\n }\r\n else\r\n {\r\n list = cardDetails.filter(\r\n (card) =>\r\n (card.MinIncomeExpat <= income)\r\n ); \r\n }\r\n return list;\r\n }\r\n\r\n getConfigInfo(): ConfigData {\r\n return configurations;\r\n }\r\n\r\n public getLanguage(): string {\r\n return this.language;\r\n }\r\n\r\n}\r\n","import { Injectable } from '@angular/core';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class FormattingService {\r\n\r\n constructor() { }\r\n\r\n formatCurrency(value: number) {\r\n if (value != null) {\r\n let strVal = String(value);\r\n let commaRemoved = strVal.replace(',', '');\r\n let numbVal = Number(commaRemoved);\r\n let formattedStr = numbVal.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,');\r\n return formattedStr;\r\n }\r\n else {\r\n return \"0.00\";\r\n }\r\n }\r\n removeFormattedCurrency(value: string) {\r\n let commaRemoved = value.replace(',', '');\r\n let num = Number(commaRemoved);\r\n return num;\r\n }\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';\r\nimport { environment } from '../../environments/environment';\r\nimport { Observable, throwError } from 'rxjs';\r\nimport { catchError } from 'rxjs/operators';\r\n\r\n@Injectable()\r\n\r\nexport class HttpService {\r\n private baseUri = environment.baseURI;\r\n //options: any;\r\n constructor(private http: HttpClient) {\r\n //this.options = new HttpHeaders().set('Content-Type', 'application/json');\r\n }\r\n\r\n public get(uri: string): Observable {\r\n return this.http.get(`${this.baseUri}${uri}`).pipe(\r\n catchError(this.handleError)\r\n );\r\n }\r\n\r\n public post(uri: string, body: E): Observable {\r\n return this.http.post(`${this.baseUri}${uri}`, body).pipe(\r\n catchError(this.handleError)\r\n );\r\n }\r\n\r\n private handleError(error: HttpErrorResponse) {\r\n if (error.error instanceof ErrorEvent) {\r\n // A client-side or network error occurred. Handle it accordingly.\r\n console.error('An error occurred:', error.error.message);\r\n } else {\r\n // The backend returned an unsuccessful response code.\r\n // The response body may contain clues as to what went wrong,\r\n console.error(\r\n `Backend returned code ${error.status}, ` +\r\n `body was: ${error.error}`);\r\n }\r\n // return an observable with a user-facing error message\r\n return throwError(error);\r\n };\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { IMinimumPaymtCalSharedData } from 'src/app/models/minimumPaymtCalSharedData.model';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class SharingDataService {\r\n minimumPaymtCalSharedData: IMinimumPaymtCalSharedData;\r\n constructor() {\r\n this.minimumPaymtCalSharedData = {\r\n Nationality: true,\r\n MonthlyIncome: 0,\r\n SelectedCard: null,\r\n DesiredCreditLimit: 0,\r\n TranslatedData: null,\r\n };\r\n }\r\n}\r\n","import { Injectable, LOCALE_ID, Inject } from '@angular/core';\r\nimport { HttpErrorResponse, HttpClient } from '@angular/common/http';\r\nimport { Observable, throwError } from 'rxjs';\r\nimport { catchError } from 'rxjs/operators';\r\nimport { JsonDetails } from '../../../app/models/jsonDetails.model';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class TranslatingDataService {\r\n constructor(\r\n private http: HttpClient,\r\n @Inject(LOCALE_ID) private language: string\r\n ) {\r\n //this.translatedData = this.retrieveTranslatedData();\r\n }\r\n // private translatedData: Observable = null;\r\n\r\n private translatedData: JsonDetails;\r\n private loaded: boolean;\r\n public getTranlateddata(): JsonDetails {\r\n return this.translatedData;\r\n }\r\n\r\n public retrieveTranslatedData() {\r\n let rt: Promise;\r\n if (!this.loaded) {\r\n let language = this.getLanguage();\r\n const jsonData = this.http\r\n .get('assets/jsons/' + 'list-' + language + '.json')\r\n .toPromise();\r\n jsonData\r\n .then((data) => {\r\n this.translatedData = data;\r\n this.loaded = true;\r\n })\r\n .catch((error) => {\r\n console.log(error);\r\n this.handleError(error);\r\n });\r\n rt = jsonData;\r\n }\r\n return rt;\r\n }\r\n\r\n private getLanguage(): string {\r\n //return window.location.pathname.includes('/ar/') ? 'ar' : 'en';\r\n return this.language;\r\n }\r\n /*\r\n public getTranlateddata(): Observable {\r\n return this.translatedData;\r\n }\r\n\r\n private retrieveTranslatedData(): Observable {\r\n let language = this.getLanguage();\r\n\r\n return this.http\r\n .get>('assets/jsons/' + 'list-' + language + '.json')\r\n .pipe(catchError(this.handleError));\r\n }*/\r\n\r\n private handleError(error: HttpErrorResponse) {\r\n if (error.error instanceof ErrorEvent) {\r\n // A client-side or network error occurred. Handle it accordingly.\r\n console.error('An error occurred:', error.error.message);\r\n } else {\r\n // The backend returned an unsuccessful response code.\r\n // The response body may contain clues as to what went wrong,\r\n console.error(\r\n `JSON file not loaded ${error.status}, ` + `body was: ${error.error}`\r\n );\r\n }\r\n // return an observable with a user-facing error message\r\n return throwError(error);\r\n }\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { AbstractControl } from '@angular/forms';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class ValidationService {\r\n\r\n constructor() { }\r\n DesiredCreditLimitValidation(minValue: number, maxValue: number, isDesiredCreditLimit=false) {\r\n\r\n return (control: AbstractControl): { [key: string]: any } | null => {\r\n if (control.value == null || control.value == \"\") {\r\n return null;\r\n }\r\n let enteredValue = control.value;\r\n let enteredValueNum = Number(enteredValue.replace(',', ''));\r\n if (control.value.match(/^(\\d?\\d?\\d(,\\d\\d\\d)*|\\d+)(\\.\\d\\d)?$/)) {\r\n if (enteredValueNum >= minValue) {\r\n if (enteredValueNum <= maxValue) {\r\n return null;\r\n }\r\n else {\r\n return { 'moreThanMax': true };\r\n }\r\n\r\n }\r\n else {\r\n if(!isDesiredCreditLimit) {\r\n return { 'lessThanMin': true };\r\n } \r\n }\r\n\r\n } else {\r\n return { 'invalidcurrency': true };\r\n }\r\n\r\n };\r\n\r\n }\r\n\r\n NetIncomeValidator(minValue:number, maxValue:number){\r\n return (control: AbstractControl): { [key: string]: any } | null => {\r\n if (control.value == null || control.value == \"\") {\r\n return null;\r\n }\r\n let enteredValue = control.value;\r\n let enteredValueNum = Number(enteredValue.replace(',', ''));\r\n if (control.value.match(/^(\\d?\\d?\\d(,\\d\\d\\d)*|\\d+)(\\.\\d\\d)?$/)) {\r\n if (enteredValueNum >= minValue) {\r\n if (enteredValueNum <= maxValue) {\r\n return null;\r\n }\r\n else {\r\n return { 'moreThanMax': true };\r\n }\r\n\r\n }\r\n else {\r\n return { 'lessThanMin': true };\r\n }\r\n\r\n } else {\r\n return { 'invalidcurrency': true };\r\n }\r\n\r\n };\r\n }\r\n\r\n}\r\n"]}![\"Logo](\"assets/img/logo-amex.png\")
\r\n