File: /var/www/vhost/disk-apps/pwa.sports-crowd.com/src/app/pages/card-add/card-add.ts
import { Component, OnInit } from "@angular/core";
import { TranslateService } from "@ngx-translate/core";
import { AlertController, NavController } from "@ionic/angular";
import { UserService } from "../../services/user.service";
import { UtilsService } from "../../services/utils.service";
import { StorageService } from '../../services/storage.service';
@Component({
selector: "page-card-add",
templateUrl: "card-add.html",
styleUrls: ["./card-add.scss"],
})
export class CardAddPage implements OnInit {
statusInvalidNumberCard: boolean = false;
statusInvalidDate: boolean = false;
statusInvalidCVC: boolean = false;
statusInvalidName: boolean = false;
numberCardAdd: any;
dateAdd: any;
cvcAdd: any;
nameAdd: any;
messageText: any;
typeImage: string = "default.png";
typeCardText: string = "";
constructor(
private storage: StorageService,
public userProvider: UserService,
public translateService: TranslateService,
private utilsService: UtilsService,
private alertCtrl: AlertController,
private navCtrl: NavController
) {
// traduccion para textos
this.translateService.get(["SUCCESS_ADD_CARD"]).subscribe((values) => {
this.messageText = {
successAddCard: values.SUCCESS_ADD_CARD,
};
});
}
ngOnInit() {
}
ionViewDidLoad() {}
ionViewWillEnter() {}
formatCardNumber(value) {
let ccNumString = value;
ccNumString = ccNumString.replace(/[^0-9]/g, "");
let typeCheck = ccNumString.substring(0, 2);
let cType = "";
let block1 = "";
let block2 = "";
let block3 = "";
let block4 = "";
let formatted = "";
if (typeCheck.length == 2) {
typeCheck = parseInt(typeCheck);
if (typeCheck >= 40 && typeCheck <= 49) {
cType = "Visa";
this.typeImage = "VISA.png";
this.typeCardText = "VISA";
} else if (typeCheck >= 51 && typeCheck <= 55) {
cType = "Master Card";
this.typeImage = "MASTERCARD.png";
this.typeCardText = "MASTERCARD";
} else if ((typeCheck >= 60 && typeCheck <= 62) || typeCheck == 64 || typeCheck == 65) {
cType = "Discover";
this.typeImage = "DISCOVER.png";
this.typeCardText = "DISCOVER";
} else if (typeCheck == 34 || typeCheck == 37) {
cType = "American Express";
this.typeImage = "AMEX.png";
this.typeCardText = "AMEX";
} else if (typeCheck == 36 || typeCheck == 38) {
cType = "Diners Club";
this.typeImage = "DINERS.png";
this.typeCardText = "DINERS";
} else {
cType = "Invalid";
this.typeImage = "default.png";
this.typeCardText = "";
}
} else if (typeCheck.length <= 1) {
this.typeImage = "default.png";
}
block1 = ccNumString.substring(0, 4);
if (block1.length == 4) {
block1 = block1 + " ";
}
if (cType == "Visa" || cType == "Master Card" || cType == "Discover") {
block2 = ccNumString.substring(4, 8);
if (block2.length == 4) {
block2 = block2 + " ";
}
block3 = ccNumString.substring(8, 12);
if (block3.length == 4) {
block3 = block3 + " ";
}
block4 = ccNumString.substring(12, 16);
} else if (cType == "American Express" || cType == "Diners Club") {
block2 = ccNumString.substring(4, 10);
if (block2.length == 6) {
block2 = block2 + " ";
}
block3 = ccNumString.substring(10, 15);
block4 = "";
} else if (cType == "Invalid") {
block1 = typeCheck;
block2 = "";
block3 = "";
block4 = "";
}
if ((cType == "American Express" && value.replace(/ /g, "").length >= 14) || (cType == "Diners Club" && value.replace(/ /g, "").length >= 14)) {
this.validateCard(value.replace(/ /g, ""), "cardNumber");
} else if (value.replace(/ /g, "").length == 16) {
this.validateCard(value.replace(/ /g, ""), "cardNumber");
} else {
this.statusInvalidNumberCard = false;
}
formatted = block1 + block2 + block3 + block4;
this.numberCardAdd = formatted;
return formatted;
}
formatCardDate(event) {
// let inputChar = String.fromCharCode(event.keyCode);
let code = event.keyCode;
let allowedKeys = [8];
if (allowedKeys.indexOf(code) !== -1) {
return;
}
if (event.target.value.length == 5) {
let valueDate = event.target.value.split("/");
let data = {
month: valueDate[0],
year: valueDate[1],
};
this.validateCard(data, "cardDate");
} else {
this.statusInvalidDate = false;
}
event.target.value = event.target.value
.replace(
/^([1-9]\/|[2-9])$/g,
"0$1/" // 3 > 03/
)
.replace(
/^(0[1-9]|1[0-2])$/g,
"$1/" // 11 > 11/
)
.replace(
/^([0-1])([3-9])$/g,
"0$1/$2" // 13 > 01/3
)
.replace(
/^(0?[1-9]|1[0-2])([0-9]{2})$/g,
"$1/$2" // 141 > 01/41
)
.replace(
/^([0]+)\/|[0]+$/g,
"0" // 0/ > 0 and 00 > 0
)
.replace(
/[^\d\/]|^[\/]*$/g,
"" // To allow only digits and `/`
)
.replace(
/\/\//g,
"/" // Prevent entering more than 1 `/`
);
}
formatCardCvv(event) {
if (event.target.value.length >= 3 && event.target.value.length <= 4) {
this.validateCard(event.target.value, "cardCvv");
} else {
this.statusInvalidCVC = false;
}
}
cardScanning() {
// this.cardIO.canScan().then((res: boolean) => {
// if (res) {
// let options = {
// scanExpiry: true,
// requireExpiry: true,
// requireCVV: true,
// requireCardholderName: true,
// hideCardIOLogo: true,
// requirePostalCode: false,
// };
// this.cardIO
// .scan(options)
// .then((card) => {
// // console.log('card scan: ', card);
// this.numberCardAdd = this.formatCardNumber(card.cardNumber);
// let year = card.expiryYear.toString();
// if (card.expiryMonth < 10) {
// this.dateAdd = "0" + card.expiryMonth + "/" + year.substr(2, 3);
// } else {
// this.dateAdd = card.expiryMonth + "/" + year.substr(2, 3);
// }
// this.cvcAdd = card.cvv;
// this.nameAdd = card.cardholderName;
// })
// .catch((error) => {
// console.log("error cardScanning: ", error);
// });
// }
// });
}
validateCard(value, type) {
// if (type == "cardNumber") {
// this.stripe
// .validateCardNumber(value)
// .then((statusCard) => {
// this.statusInvalidNumberCard = false;
// })
// .catch((error) => {
// // this.statusInvalidNumberCard = true;
// });
// } else if (type == "cardDate") {
// this.stripe
// .validateExpiryDate(value.month, value.year)
// .then((statusDate) => {
// this.statusInvalidDate = false;
// })
// .catch((error) => {
// // this.statusInvalidDate = true;
// });
// } else if (type == "cardCvv") {
// this.stripe
// .validateCVC(value)
// .then((statusCvv) => {
// this.statusInvalidCVC = false;
// })
// .catch((error) => {
// // this.statusInvalidCVC = true;
// });
// } else if (type == "cardType") {
// this.stripe
// .getCardType(value)
// .then((cardType) => {
// console.log("cardType: ", cardType);
// })
// .catch((error) => {
// console.log("error cardType: ", error);
// });
// }
}
saveCard(formAddCard) {
if (!formAddCard.controls.numberCard.valid || formAddCard.value.numberCard.length < 16 || this.statusInvalidNumberCard) {
this.statusInvalidNumberCard = true;
return;
}
if (!formAddCard.controls.date.valid || formAddCard.value.date.length < 5 || this.statusInvalidDate) {
this.statusInvalidDate = true;
return;
}
if (!formAddCard.controls.cvc.valid || formAddCard.value.cvc.length < 3 || this.statusInvalidCVC) {
this.statusInvalidCVC = true;
return;
}
if (!formAddCard.controls.name.valid) {
this.statusInvalidName = true;
return;
}
this.storage.get("token").then(async (token) => {
if (token) {
(await this.userProvider.saveCardCredit(formAddCard.value, this.typeCardText, token.access_token)).subscribe(
(resp) => {
this.utilsService.dismissLoading();
if (resp["r"]) {
this.verifyCard(resp["d"]);
} else {
this.utilsService.presentToast(3000, "error", "top", resp["m"]);
}
},
(error) => {
console.log("error saveCardCredit", error);
this.utilsService.dismissLoading().catch();
}
);
}
});
}
verifyCard(id) {
this.storage.get("token").then((token) => {
if (token) {
this.utilsService.presentLoading(this.translateService.instant("all.loading"));
this.userProvider.generateVerifyCard(id, token.access_token).subscribe(
(resp) => {
console.log("resp generateVerifyCard: ", resp);
this.utilsService.dismissLoading();
if (resp["r"] && resp["b"].transactionResponse.state == "APPROVED") {
this.verifyCardSUCESS(resp, token, id);
} else {
this.verifyCardANOTHER(resp);
}
},
(error) => {
console.log("error listCreditCard", error);
this.utilsService.dismissLoading();
}
);
}
});
}
async verifyCardANOTHER(resp) {
const prompt = await this.alertCtrl.create({
header: "Verificación",
message: resp["m"],
buttons: [
{
text: "Cancelar",
handler: (data) => {
console.log("Cancel clicked");
},
},
],
});
prompt.present();
}
async verifyCardSUCESS(resp, token, id) {
const prompt = await this.alertCtrl.create({
header: "Verificación",
message: resp["m"],
inputs: [
{
name: "value",
placeholder: "Valor cobrado",
},
],
buttons: [
{
text: "Cancelar",
handler: (data) => {
console.log("Cancel clicked");
},
},
{
text: "Enviar",
handler: (data) => {
console.log("data: ", data);
this.utilsService.presentLoading(this.translateService.instant("all.loading"));
this.userProvider.sendValueVerifyCard(id, data.value, token.access_token).subscribe(
(result) => {
console.log("result: ", result);
this.utilsService.dismissLoading();
this.utilsService.presentToast(3000, "success", "top", result["m"]);
this.navCtrl.back();
},
(error) => {
console.log("error sendValueVerifyCard: ", error);
this.utilsService.dismissLoading();
}
);
},
},
],
});
prompt.present();
}
}