inital commit
This commit is contained in:
432
resources/js/components/partials/PaymentModal.vue
Normal file
432
resources/js/components/partials/PaymentModal.vue
Normal file
@@ -0,0 +1,432 @@
|
||||
<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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user