\n \n\n","import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { AuthService } from 'src/app/services/auth.service';\nimport { APIService } from '../../../services/api.service';\nimport { StorageService } from '../../../services/storage.service';\nimport { ObserverService } from '../../../services/observer.service';\nimport { LoadingController, AlertController, IonInput } from '@ionic/angular';\nimport * as moment from 'moment-timezone';\nimport { Decimal } from 'decimal.js';\n\n@Component({\n selector: 'app-charge',\n templateUrl: 'charge.page.html',\n styleUrls: ['charge.page.scss']\n})\nexport class ChargePage implements OnInit {\n\n @ViewChild('code_input', { static: false }) code_input: IonInput;\n\n code = null;\n price = null;\n transaction_intent_id = null;\n spinner = null;\n\n constructor(\n private apiService: APIService,\n private alertController: AlertController,\n private observerService: ObserverService\n ) {}\n\n ngOnInit() {\n\n this.observerService.subscribe(\"transaction_intent_approved\", (transaction_intent) => {\n if(this.transaction_intent_id) {\n if(transaction_intent.id == this.transaction_intent_id) {\n this.clearTransactionIntent().then(() => {\n this.presentAlert(\"Success\", \"Transaction has been approved\", \"\");\n });\n }\n }\n });\n\n this.observerService.subscribe(\"transaction_intent_declined\", (transaction_intent) => {\n if(this.transaction_intent_id) {\n if(transaction_intent.id == this.transaction_intent_id) {\n this.clearTransactionIntent().then(() => {\n this.presentAlert(\"Declined\", \"Transaction has been declined by the customer\", \"\");\n });\n }\n }\n });\n }\n\n ionViewDidEnter() {\n // NOTE: we use a timeout here so the DOM gets a chance to load and we can focus the code input\n setTimeout(() => {\n this.code_input.setFocus();\n }, 200);\n }\n\n charge() {\n\n let validated = true;\n let regex = /^-?\\d*\\.?\\d*$/;\n\n // Catch nulls\n if (this.code == null || this.code.trim() === \"\") {\n this.presentAlert(\"Problem\", \"Code required\", \"\");\n validated = false;\n }\n // Catch letters or symbols or multiple dps\n else if (!regex.test(String(this.code).toLowerCase())) {\n this.presentAlert(\"Problem\", \"Invalid code\", \"\");\n validated = false;\n }\n // Catch incorrect length\n if (Math.ceil(Math.log10(this.code)) < 6) {\n this.presentAlert(\"Problem\", \"Code must be 6 digits long\", \"\");\n validated = false;\n }\n // Catch nulls\n else if (this.price == null || this.price.trim() === \"\") {\n this.presentAlert(\"Problem\", \"Amount required\", \"\");\n validated = false;\n }\n // Catch zero\n else if (this.price == 0) {\n this.presentAlert(\"Problem\", \"Amount cannot be zero\", \"\");\n validated = false;\n }\n // Catch negative\n else if (this.price < 0) {\n this.presentAlert(\"Problem\", \"Amount cannot be a negative number\", \"\");\n validated = false;\n }\n // Catch letters, symbols or multiple dps\n else if (!regex.test(String(this.price).toLowerCase())) {\n this.presentAlert(\"Problem\", \"Invalid amount\", \"\");\n validated = false;\n }\n\n if (validated) {\n this.price = Number(new Decimal(this.price).toFixed(2));\n\n this.apiService.getConsumerTransactionIntent(this.code).then((transaction_intent: any) => {\n\n if (transaction_intent) {\n\n if (transaction_intent.status == 1) {\n\n if (moment(transaction_intent.expiry_date).isAfter()) {\n\n let data = {};\n data['status'] = 2; // awaiting approval\n data['price'] = this.price;\n\n this.apiService.updateConsumerTransactionIntent(transaction_intent.id, data).then((transaction_intent: any) => {\n this.transaction_intent_id = transaction_intent.id;\n })\n .catch((error) => {\n if (error.status === 400) {\n if(error.error.errors) {\n if(error.error.errors[0] == 'consumer_mode_different_to_merchant_mode') {\n this.presentAlert(\"Problem\", \"Mode mismatch\", \"The consumer mode is different to the merchant mode\");\n }\n else {\n this.presentAlert(\"Problem\", \"Unknown error\", \"Unfortunately something went wrong when trying to update the transaction.\");\n }\n }\n else {\n this.presentAlert(\"Problem\", \"Unknown error\", \"Unfortunately something went wrong when trying to update the transaction.\");\n }\n } else if (error.status === 404 || error.status === 0) {\n this.presentAlert(\"Problem\", \"Unavailable\", \"Unfortunately we're unable to update the transaction at this time.\");\n }\n });\n }\n else {\n this.presentAlert(\"Code expired\", \"The code has expired\", \"\");\n }\n }\n else {\n this.presentAlert(\"Code already used\", \"The code has already been used\", \"\");\n }\n }\n else {\n this.presentAlert(\"Code not found\", \"The code was not found\", \"\");\n }\n })\n .catch((error) => {\n if (error.status === 400) {\n this.presentAlert(\"Problem\", \"Unknown error\", \"Unfortunately something went wrong when trying get the transaction.\");\n } else if (error.status === 404 || error.status === 0) {\n this.presentAlert(\"Problem\", \"Unavailable\", \"Unfortunately we're unable to get the transaction at this time.\");\n }\n });\n }\n }\n\n async presentAlert(header, sub_header, message) {\n const alert = await this.alertController.create({\n header: header,\n subHeader: sub_header,\n message: message,\n buttons: [\"OK\"]\n });\n await alert.present();\n }\n\n async presentCancelTransactionConfirmation() {\n const alert = await this.alertController.create({\n header: 'Confirmation',\n message: 'Are you sure you wish to cancel this transaction?',\n buttons: [\n {\n text: 'No',\n },\n {\n text: 'Yes',\n handler: () => {\n let data = {};\n data['status'] = 3; // declined\n this.apiService.updateConsumerTransactionIntent(this.transaction_intent_id, data).then(() => {\n this.clearTransactionIntent();\n });\n }\n }\n ],\n });\n await alert.present();\n }\n\n clearTransactionIntent() {\n return new Promise