433 lines
20 KiB
Vue
433 lines
20 KiB
Vue
<template>
|
|
<div class="modal-backdrop" id="payment-modal-view">
|
|
<div class="modal">
|
|
<section class="modal-body" >
|
|
<slot name="body">
|
|
<form @submit.prevent="paymentFormSubmit" autocomplete="off"
|
|
class="form-element was-validated form-element--login" method="post"
|
|
novalidate="novalidate">
|
|
<div class="row body" id="payment-modal">
|
|
<div class="center">
|
|
|
|
<div class="payment-container">
|
|
<div class="row">
|
|
<div class="col-50 text" style="text-align: center;" v-if="message">
|
|
<p style="color:red;text-align:center;margin-top: -20px">{{ message[0] }}</p>
|
|
</div>
|
|
<button type="button" class="close" style="width: 20px;height: 20px;"
|
|
@click.prevent="closePaymentModal"> X
|
|
</button>
|
|
</div>
|
|
<div class="row header-panel">
|
|
<ScPartnerCzLogo/>
|
|
</div>
|
|
<div class="row">
|
|
<p class="top-text">$24.97/mo Cancel Anytime</p>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-50">
|
|
<h3 class="text-center-sm" style="padding-bottom: 10px;">Billing Information</h3>
|
|
<label for="fname" class="text-center-sm">Customer Information</label>
|
|
<label for="fname"><i class="fa fa-user"></i> Full Name</label>
|
|
<input
|
|
type="text"
|
|
placeholder="Full Name"
|
|
name="firstname"
|
|
:backend="errors.full_name"
|
|
v-model="data.full_name"
|
|
:rules="['required']"
|
|
disabled
|
|
:class="{'warning':errors.full_name}"
|
|
/>
|
|
<!-- <label class="text-warning" v-text="errors.full_name"></label>-->
|
|
<!-- <ValidationError :backend="errors.full_name" :msg="v$.formData.full_name.$errors"/>-->
|
|
<!-- <input type="text" id="fname" name="firstname" placeholder="John M. Doe">-->
|
|
<label for="email"><i class="fa fa-envelope"></i> Email</label>
|
|
<input
|
|
type="text"
|
|
placeholder="john@example.com"
|
|
name="email"
|
|
:backend="errors.email"
|
|
v-model="data.email"
|
|
:rules="['required']"
|
|
disabled
|
|
:class="{'warning':errors.email}"
|
|
/>
|
|
<div v-if="errors.email" class="invalid-feedback">
|
|
{{errors.email[0]}}
|
|
</div>
|
|
|
|
<label for="city"><i class="fa fa-institution"></i> City</label>
|
|
<input
|
|
type="text"
|
|
placeholder="New York"
|
|
name="city"
|
|
:backend="errors.city"
|
|
v-model="data.city"
|
|
:rules="['required']"
|
|
disabled
|
|
:class="{'warning':errors.city}"
|
|
/>
|
|
<div class="row">
|
|
<div class="col-50">
|
|
<label for="state">State</label>
|
|
<input
|
|
type="text"
|
|
placeholder="NY"
|
|
name="state"
|
|
:backend="errors.state"
|
|
v-model="data.state"
|
|
:rules="['required']"
|
|
disabled
|
|
:class="{'warning':errors.state}"
|
|
/>
|
|
|
|
<!-- <label class="text-warning" v-text="errors.state"></label>-->
|
|
<!-- <ValidationError :backend="errors.state" :msg="v$.formData.state.$errors"/>-->
|
|
<!-- <input type="text" id="state" name="state" placeholder="NY">-->
|
|
</div>
|
|
<div class="col-50">
|
|
<label for="zip">Zip</label>
|
|
<input
|
|
type="text"
|
|
placeholder="10001"
|
|
name="zip_code"
|
|
:backend="errors.zip_code"
|
|
v-model="data.zip_code"
|
|
:rules="['required']"
|
|
disabled
|
|
:class="{'warning':errors.zip_code}"
|
|
/>
|
|
<!-- <ValidationError :backend="errors.state" :msg="v$.data.state.$errors"/>-->
|
|
<!-- <input type="text" id="zip" name="zip" placeholder="10001">-->
|
|
</div>
|
|
</div>
|
|
<!-- <label class="text-warning" v-text="errors.city"></label>-->
|
|
<!-- <ValidationError :backend="errors.city" :msg="v$.formData.city.$errors"/>-->
|
|
<!-- <input type="text" id="city" name="city" placeholder="New York">-->
|
|
|
|
|
|
</div>
|
|
|
|
<div class="col-50">
|
|
<h3 class="text-center-sm" style="margin-bottom: 10px;">Payment</h3>
|
|
<label for="fname" class="text-center-sm">Accepted Cards</label>
|
|
<div class="text-center-sm" style="margin-bottom: 10px">
|
|
<img :src="`${app_base_url}/img/card.png`"
|
|
alt="card" class="provider-logo" style="height: 40px">
|
|
</div>
|
|
<label for="ccnum">Credit card number</label>
|
|
<input
|
|
autocomplete="off"
|
|
:class="{'warning':errors.card_number}"
|
|
|
|
placeholder="e.g, 4111111111111111"
|
|
type="text"
|
|
v-model="data.card_number"
|
|
/>
|
|
<!-- <label class="text-warning" v-text="errors.card_number"></label>-->
|
|
<div class="row">
|
|
<div class="col-50">
|
|
<label for="expyear">Expiry</label>
|
|
<input
|
|
autocomplete="off"
|
|
:class="{'warning':errors.expiry}"
|
|
placeholder="e.g, DD/YY"
|
|
type="text"
|
|
v-model="data.expiry"
|
|
@keyup.prevent="cardExpiryCompleted($event)"
|
|
:maxlength="5"
|
|
/>
|
|
</div>
|
|
<div class="col-50">
|
|
<label for="cvv">CVV</label>
|
|
<input
|
|
autocomplete="off"
|
|
:class="{'warning':errors.cvv_no}"
|
|
placeholder="e.g, 352"
|
|
type="text"
|
|
v-model="data.cvv_no"
|
|
/>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-50">
|
|
<label for="expmonth">Amount</label>
|
|
<input
|
|
autocomplete="off"
|
|
:class="{'warning':errors.amount}"
|
|
placeholder="amount"
|
|
type="text"
|
|
disabled
|
|
v-model="data.amount"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-50">
|
|
<p class="aggrement">
|
|
<label class="terms-service-text">
|
|
<input v-model="data.is_authorized" type="checkbox" @change.prevent="checkTermsAndService($event)" />
|
|
Yes I have read the <a href="/terms-of-service" target="_blank"> <span v-if="reportProvider === '3'">SmartCredit</span> <span v-if="reportProvider === '1'">{{ company_Name }}</span> terms of services</a> for this purchase and I totally Agree and Authorize this Charge of ${{ data.amount }}
|
|
</label>
|
|
<span style="color:red;font-size: 12px" v-if="message">{{ message[1] }}</span>
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-50 text bottom-panel">
|
|
<button type="submit" value="Pay" class="btn btn2" style="width:unset;">Pay</button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-50">
|
|
<div class="col-50 bottom-panel">
|
|
<img :src="`${app_base_url}/img/sequrity.png`"
|
|
alt="security" class="provider-logo" style="height: 100px">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</slot>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import useVuelidate from '@vuelidate/core'
|
|
import {required, email, integer,minLength} from '@vuelidate/validators'
|
|
import router from "../../router";
|
|
import register from "../../Api/register";
|
|
import pkg from "../../helper/package";
|
|
import {
|
|
getFormData,
|
|
setCustomerToken,
|
|
setFormData,
|
|
setReferenceNumber,
|
|
setStep,
|
|
setTrackingToken,
|
|
getLocalStorage,
|
|
setLocalStorage,
|
|
unsetLocalStorage
|
|
} from "../../helper";
|
|
import SmartCreditPkgView from "./SmartCreditPkgView.vue";
|
|
import ScPartnerCzLogo from "./sc_partner_cz_logo.vue";
|
|
|
|
import store from "../../store";
|
|
export default {
|
|
components: {SmartCreditPkgView,ScPartnerCzLogo },
|
|
name: 'PaymentModal.vue',
|
|
setup() {
|
|
return {v$: useVuelidate()}
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default:{},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
formData: {
|
|
full_name:"",
|
|
first_name: "",
|
|
last_name: "",
|
|
email: "",
|
|
password: "",
|
|
street_no: "",
|
|
street_name: "",
|
|
city: "",
|
|
ssn: "",
|
|
state: "",
|
|
zip_code: "",
|
|
phone: "",
|
|
full_ssn:"",
|
|
package_id: 0,
|
|
birth_date:"",
|
|
amount:0,
|
|
card_number:"",
|
|
expiry:"",
|
|
cvv_no:"",
|
|
address:"",
|
|
is_authorized:null,
|
|
is_free:5
|
|
},
|
|
errors:{},
|
|
message: [""],
|
|
isButtonDisabled:false,
|
|
disabled: 1,
|
|
package: pkg,
|
|
value: null,
|
|
roleOptions:[],
|
|
min:4,
|
|
app_base_url: APP_URL,
|
|
reportProvider: REPORT_PROVIDER,
|
|
company_Name:COMPANY_NAME
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
|
|
methods: {
|
|
|
|
closePaymentModal(data){
|
|
this.$emit('close',data);
|
|
},
|
|
async paymentFormSubmit() {
|
|
this.formData = this.$props.data;
|
|
this.v$.$validate();
|
|
this.errors = {};
|
|
this.formValidation();
|
|
if(!this.v$.$invalid && this.formData.is_authorized) {
|
|
setLocalStorage('formData', JSON.stringify(this.$props.data));
|
|
const data = await register.customerCreateAndUpdate(this.$props.data);
|
|
if (data.status_code == "100") {
|
|
|
|
if (this.reportProvider === '3') {
|
|
|
|
setTrackingToken(data.data.tracking_token);
|
|
setCustomerToken(data.data.customer_token);
|
|
setReferenceNumber(data.data.customer_token);
|
|
setReferenceNumber(data.data.questionAnswer.idVerificationCriteria.referenceNumber);
|
|
this.closePaymentModal(data.data.questionAnswer);
|
|
|
|
}else if(this.reportProvider === '1'){
|
|
|
|
unsetLocalStorage('formData');
|
|
setStep(6);
|
|
router.push({name: "success"});
|
|
|
|
}
|
|
|
|
} else {
|
|
this.message[0] = data.message;
|
|
this.errors = data.data;
|
|
//this.closePaymentModal(true)
|
|
//this.$swal(data.message);
|
|
}
|
|
}
|
|
},
|
|
showModal() {
|
|
this.isQuestionModalVisible = true;
|
|
},
|
|
cardExpiryCompleted(e){
|
|
if(this.$props.data.expiry.length===2){
|
|
this.$props.data.expiry+='/';
|
|
}
|
|
},
|
|
formValidation(){
|
|
for (let i in this.v$.$errors){
|
|
let key = this.v$.$errors[i].$property;
|
|
let msg = this.v$.$errors[i].$message
|
|
|
|
if(key && msg){
|
|
this.errors[key] = msg;
|
|
}
|
|
}
|
|
if(!this.formData.is_authorized)
|
|
{
|
|
this.message[1]= 'You have to agree the terms and privacy condition.';
|
|
|
|
}
|
|
},
|
|
checkTermsAndService(e){
|
|
if(e.target.checked){
|
|
this.$props.data.is_authorized = e.target.checked;
|
|
this.$props.data.is_free = 2;
|
|
this.message[1]=null;
|
|
}
|
|
else {
|
|
this.$props.data.is_authorized = null;
|
|
}
|
|
},
|
|
},
|
|
validations() {
|
|
return {
|
|
formData: {
|
|
first_name: {required}, // Matches this.firstName
|
|
last_name: {required},
|
|
email: {required, email},
|
|
password: {required},
|
|
card_number: {required},
|
|
street_no: {required},
|
|
street_name: {required},
|
|
city: {required},
|
|
ssn: {required,minLength:minLength(4)},
|
|
state: {required},
|
|
zip_code: {required},
|
|
phone: {required},
|
|
amount: {required},
|
|
full_ssn: {required,minLength:minLength(this.min)},
|
|
birth_date: {required},
|
|
expiry:{required},
|
|
cvv_no:{required},
|
|
address:{required},
|
|
full_name:{required}
|
|
|
|
}
|
|
}
|
|
},
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
|
|
#payment-modal .smart-credit-pkg .p-3 {
|
|
padding: 0px !important;
|
|
}
|
|
#payment-modal .smart-credit-pkg .p-2 {
|
|
padding: 0px !important;
|
|
}
|
|
#payment-modal .terms-service-text{
|
|
font-weight:bold;
|
|
color:purple;
|
|
font-size: 12px;
|
|
margin-bottom: 5px;
|
|
line-height: 1.5;
|
|
}
|
|
#payment-modal-view .warning{
|
|
border: 1px solid red
|
|
}
|
|
#payment-modal-view .text-warning{
|
|
color: red;
|
|
}
|
|
|
|
.aggrement p {
|
|
margin: 20px;
|
|
background-color: #eee;
|
|
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
|
|
}
|
|
.aggrement input {
|
|
margin:0 0px 0 0;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.invalid-feedback {
|
|
width: 100%;
|
|
margin-top: -20px;
|
|
font-size: .875em;
|
|
color: #dc3545;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
|
|
|