initial commit
This commit is contained in:
493
resources/js/components/partials/AddProfile.vue
Normal file
493
resources/js/components/partials/AddProfile.vue
Normal file
@@ -0,0 +1,493 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<div class="form">
|
||||
<div class="left-side">
|
||||
<div class="left-heading">
|
||||
<h3>{{company_Name}}</h3>
|
||||
</div>
|
||||
<Step step="2"/>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<form @submit.prevent="makePayment" autocomplete="off"
|
||||
class="form-element was-validated form-element--login" method="post"
|
||||
novalidate="novalidate">
|
||||
<div class="main active">
|
||||
<TopArea :is_show_login="false"/>
|
||||
<div class="text">
|
||||
<h3> {{company_Name}}
|
||||
<span v-if="reportProvider==='3'"> Partnered with {{reportProviders.labels[reportProvider]}}</span>
|
||||
<span v-if="reportProvider==='1'"> Powerful Software System </span>
|
||||
</h3>
|
||||
<p>Let's start with some basic info.</p>
|
||||
</div>
|
||||
<SmartCreditLogo :package_id="formData.package_id" />
|
||||
<!-- <SmartCreditLogo :package_id="formData.package_id" v-if="reportProvider==='3'"/>-->
|
||||
<!-- <IdentityIqLogo :package_id="formData.package_id" v-if="reportProvider==='1'"/>-->
|
||||
<div class="text" v-if="isButtonDisabled">
|
||||
<p style="color:red;text-align:center">All fields are required</p>
|
||||
</div>
|
||||
<div class="text" v-if="message">
|
||||
<p style="color:red;text-align:center">{{ message[0] }}</p>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<p class="edit-text">
|
||||
<a href="#" @click.prevent="toggle('first_name')">Edit</a>
|
||||
</p>
|
||||
<input
|
||||
ref="first_name"
|
||||
autocomplete="off"
|
||||
:class="{'warning':v$.formData.first_name.$errors.length}"
|
||||
placeholder="First Name"
|
||||
type="text"
|
||||
v-model="formData.first_name"
|
||||
:readonly="disabled == 1"
|
||||
/>
|
||||
<ValidationError :backend="errors.first_name"
|
||||
:msg="v$.formData.first_name.$errors"/>
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<p class="edit-text">
|
||||
<a href="#" @click.prevent="toggle('last_name')">Edit</a>
|
||||
</p>
|
||||
<input
|
||||
ref="last_name"
|
||||
autocomplete="off"
|
||||
:class="{'warning':v$.formData.last_name.$errors.length}"
|
||||
placeholder="Last Name"
|
||||
type="text"
|
||||
v-model="v$.formData.last_name.$model"
|
||||
:readonly="disabled == 1"
|
||||
/>
|
||||
<ValidationError :backend="errors.last_name" :msg="v$.formData.last_name.$errors"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<p class="edit-text">
|
||||
<a href="#" @click.prevent="toggle('email')">Edit</a>
|
||||
</p>
|
||||
<input
|
||||
ref="email"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.email}"
|
||||
placeholder="Email"
|
||||
type="text"
|
||||
v-model="v$.formData.email.$model"
|
||||
:readonly="disabled == 1"
|
||||
/>
|
||||
<ValidationError :backend="errors.email" :msg="v$.formData.email.$errors"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<p class="edit-text">
|
||||
<a href="#" @click.prevent="toggle('password')">Edit</a>
|
||||
</p>
|
||||
<input
|
||||
ref="password"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.password}"
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
v-model="v$.formData.password.$model"
|
||||
:readonly="disabled == 1"
|
||||
/>
|
||||
<ValidationError :backend="errors.password" :msg="v$.formData.password.$errors"/>
|
||||
</div>
|
||||
<div class="input-div" style="margin-top: 20px">
|
||||
<input
|
||||
ref="phone"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.phone}"
|
||||
placeholder="Phone, e,g. 954-604-4220"
|
||||
type="text"
|
||||
v-model="v$.formData.phone.$model"
|
||||
/>
|
||||
<ValidationError :backend="errors.phone" :msg="v$.formData.phone.$errors"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<input
|
||||
ref="full_ssn"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.full_ssn}"
|
||||
placeholder="Last 4 digit of SSN"
|
||||
type="text"
|
||||
@keyup.prevent="ssnCompleted($event)"
|
||||
v-model="v$.formData.full_ssn.$model"
|
||||
:maxlength="min"
|
||||
/>
|
||||
<ValidationError :backend="errors.full_ssn" :msg="v$.formData.full_ssn.$errors"/>
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<input
|
||||
ref="full_ssn"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.birth_date}"
|
||||
placeholder="Birth Date e.g, mm/dd/yyyy"
|
||||
type="text"
|
||||
v-model="v$.formData.birth_date.$model"
|
||||
@keyup.prevent="birthDateCompleted($event)"
|
||||
:maxlength="10"
|
||||
/>
|
||||
<ValidationError :backend="errors.birth_date" :msg="v$.formData.birth_date.$errors"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<input
|
||||
ref="street_no"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.street_no}"
|
||||
placeholder="Street No."
|
||||
type="text"
|
||||
v-model="v$.formData.street_no.$model"
|
||||
/>
|
||||
<ValidationError :backend="errors.street_no" :msg="v$.formData.street_no.$errors"/>
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<input
|
||||
ref="street_name"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.street_name}"
|
||||
placeholder="Street Name"
|
||||
type="text"
|
||||
v-model="v$.formData.street_name.$model"
|
||||
|
||||
/>
|
||||
<ValidationError :backend="errors.street_name"
|
||||
:msg="v$.formData.street_name.$errors"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<input
|
||||
ref="city"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.city}"
|
||||
placeholder="City"
|
||||
type="text"
|
||||
v-model="v$.formData.city.$model"
|
||||
/>
|
||||
<ValidationError :backend="errors.city" :msg="v$.formData.city.$errors"/>
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<select ref="state" v-model="v$.formData.state.$model" >
|
||||
<option value="">Please select state</option>
|
||||
<option :key="item.id" v-for="item in stateList" :value="item.id">
|
||||
{{ item.value }}
|
||||
</option>
|
||||
</select>
|
||||
<ValidationError :backend="errors.state" :msg="v$.formData.state.$errors"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
|
||||
<input
|
||||
ref="zip_code"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.zip_code}"
|
||||
placeholder="Zip Code"
|
||||
type="text"
|
||||
v-model="v$.formData.zip_code.$model"
|
||||
|
||||
/>
|
||||
<ValidationError :backend="errors.zip_code" :msg="v$.formData.zip_code.$errors"/>
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<input
|
||||
ref="ssn"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.ssn}"
|
||||
placeholder="Last 4 digit of SSN"
|
||||
type="text"
|
||||
v-model="v$.formData.ssn.$model"
|
||||
:maxlength="4"
|
||||
@keyup.prevent="ssnCompleted($event)"
|
||||
/>
|
||||
<ValidationError :backend="errors.ssn" :msg="v$.formData.ssn.$errors"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-text" >
|
||||
<div class="input-div buttons" style="text-align: left">
|
||||
<button type="button" value="Back" class="back_button" @click.prevent="backToProfile" >
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
<div class="input-div buttons" style="text-align: left">
|
||||
<button :disabled="v$.formData.$invalid" type="submit" value="Next" class="next_button" >
|
||||
Next Step
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<SmartCreditPkg :package_id="formData.package_id" v-if="reportProvider === '3'" />
|
||||
|
||||
<IdentityIQPkg :package_id="formData.package_id" v-if="reportProvider === '1'" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PaymentModal @close="closeModal" :data="prepareformData" v-if="isModalVisible" />
|
||||
|
||||
<!-- <modal :questionAnswer="questionList" v-if="isQuestionModalVisible && reportProvider === '3' " />-->
|
||||
</div>
|
||||
<Footer/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
import {required, email, integer,minLength} from '@vuelidate/validators'
|
||||
import register from "./../../Api/register";
|
||||
import {
|
||||
getFormData,
|
||||
setCustomerToken,
|
||||
setFormData,
|
||||
setReferenceNumber,
|
||||
setStep,
|
||||
setTrackingToken,
|
||||
getLocalStorage,
|
||||
setLocalStorage,
|
||||
unsetLocalStorage
|
||||
} from "../../helper";
|
||||
import router from "../../router";
|
||||
import state from "../../helper/state";
|
||||
import pkg from "../../helper/package";
|
||||
import SmartCreditLogo from "./SmartCreditLogo";
|
||||
import SmartCreditPkg from "./SmartCreditPkg";
|
||||
import modal from "./modal";
|
||||
import PaymentModal from "./PaymentModal.vue";
|
||||
import store from "../../store";
|
||||
import Footer from "./Footer.vue";
|
||||
import IdentityIQPkg from "./IdentityIQPkg";
|
||||
import reportProviders from "../../helper/report_provider"
|
||||
import IdentityIqLogo from "./IdentityIqLogo.vue";
|
||||
|
||||
export default {
|
||||
components: {IdentityIqLogo, SmartCreditPkg, SmartCreditLogo,PaymentModal,modal,Footer,IdentityIQPkg },
|
||||
setup() {
|
||||
return {v$: useVuelidate()}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
reportProvider: REPORT_PROVIDER,
|
||||
prepareformData:{},
|
||||
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,
|
||||
question_id:"",
|
||||
answer:"",
|
||||
address:"",
|
||||
card_number:"",
|
||||
expiry:"",
|
||||
cvv_no:"",
|
||||
is_authorized:false
|
||||
},
|
||||
stateList: state,
|
||||
errors:{},
|
||||
message: [
|
||||
"All fields are required"
|
||||
],
|
||||
isButtonDisabled:false,
|
||||
disabled: 1,
|
||||
package: pkg,
|
||||
reportProviders:reportProviders,
|
||||
value: null,
|
||||
roleOptions:[],
|
||||
isOpen: false,
|
||||
min:4,
|
||||
isModalVisible: false,
|
||||
isQuestionModalVisible:false,
|
||||
questionList:null,
|
||||
appName : APP_NAME,
|
||||
company_Name:COMPANY_NAME
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
const userData = JSON.parse(getLocalStorage('formData')) || [];
|
||||
|
||||
this.formData.first_name = userData.first_name;
|
||||
this.formData.last_name = userData.last_name;
|
||||
this.formData.email = userData.email;
|
||||
this.formData.password = userData.password;
|
||||
this.formData.package_id = userData.package_id;
|
||||
this.formData.amount = userData.amount;
|
||||
this.formData.street_no= userData.street_no;
|
||||
this.formData.street_name=userData.street_name;
|
||||
this.formData.city=userData.city;
|
||||
this.formData.ssn=userData.ssn;
|
||||
this.formData.full_ssn= userData.full_ssn;
|
||||
this.formData.state=userData.state??'';
|
||||
this.formData.zip_code=userData.zip_code;
|
||||
this.formData.phone=userData.phone;
|
||||
this.formData.package_id=2;
|
||||
this.formData.birth_date=userData.birth_date;
|
||||
this.formData.amount = pkg.prices[this.formData.package_id];
|
||||
this.formData.source_type = 1;
|
||||
},
|
||||
methods: {
|
||||
async makePayment() {
|
||||
const subscription_info = await register.reportProviderValidsation(this.formData);
|
||||
if(subscription_info.status_code === 100) {
|
||||
const data = await register.customerCreateAndUpdate(this.formData);
|
||||
if (data.status_code == "100") {
|
||||
unsetLocalStorage('formData');
|
||||
setStep(6);
|
||||
router.push({name: "success"});
|
||||
} else {
|
||||
this.message = [data.message];
|
||||
this.errors = data.data
|
||||
}
|
||||
}else {
|
||||
this.message = [subscription_info.message];
|
||||
this.errors = subscription_info.data
|
||||
}
|
||||
},
|
||||
toggle: function (refId) {
|
||||
let attribute = "readonly"
|
||||
if (refId === "state") {
|
||||
attribute = "disabled"
|
||||
}
|
||||
this.$refs[refId].toggleAttribute(attribute)
|
||||
},
|
||||
backToProfile:function (){
|
||||
setStep(1);
|
||||
router.push({name: 'create-account'});
|
||||
},
|
||||
checkTermsAndService(e){
|
||||
if(e.target.checked){
|
||||
this.formData.is_authorized=e.target.checked;
|
||||
}
|
||||
else {
|
||||
this.formData.is_authorized=null;
|
||||
}
|
||||
},
|
||||
ssnCompleted(e) {
|
||||
// if(this.formData.full_ssn.length === 3 || this.formData.full_ssn.length === 6) {
|
||||
// this.formData.full_ssn += '-';
|
||||
// }
|
||||
// if(this.formData.full_ssn.length === 11){
|
||||
// this.formData.ssn = this.formData.full_ssn.substring( 7, 11 );
|
||||
// }
|
||||
|
||||
if(this.formData.full_ssn.length === 4){
|
||||
this.formData.ssn = this.formData.full_ssn;
|
||||
}
|
||||
},
|
||||
birthDateCompleted(e) {
|
||||
if(this.formData.birth_date.length===2 || this.formData.birth_date.length===5){
|
||||
this.formData.birth_date+='/';
|
||||
}
|
||||
},
|
||||
showModal() {
|
||||
this.isModalVisible = true;
|
||||
},
|
||||
closeModal(data) {
|
||||
this.isModalVisible = false;
|
||||
if(typeof(data.order_id) !== "undefined") {
|
||||
this.showQuestionModal(data);
|
||||
}
|
||||
|
||||
},
|
||||
showQuestionModal(data) {
|
||||
this.questionList = data;
|
||||
this.isQuestionModalVisible = true;
|
||||
},
|
||||
closeQuestionModal() {
|
||||
this.isQuestionModalVisible = false;
|
||||
},
|
||||
},
|
||||
validations() {
|
||||
return {
|
||||
formData: {
|
||||
first_name: {required},
|
||||
last_name: {required},
|
||||
email: {required, email},
|
||||
password: {required},
|
||||
street_no: {required},
|
||||
street_name: {required},
|
||||
city: {required},
|
||||
ssn: {required,minLength:minLength(4)},
|
||||
state: {required},
|
||||
zip_code: {required},
|
||||
phone: {required},
|
||||
full_ssn: {required,minLength:minLength(this.min)},
|
||||
birth_date: {required},
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container .card {
|
||||
width: 1300px;
|
||||
}
|
||||
|
||||
.input-text {
|
||||
margin: 15px 0;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.container .card .form {
|
||||
background-image: unset;
|
||||
}
|
||||
|
||||
.container .card .left-side {
|
||||
width: 25%;
|
||||
background-image: -webkit-linear-gradient(-90deg, #8ba8e0 0%, #4e74f2 100%);
|
||||
}
|
||||
|
||||
.container .card .right-side {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
.container .card .right-side {
|
||||
width: 100%;
|
||||
border-bottom-left-radius: 20px !important;
|
||||
border-top-right-radius: 0px !important;
|
||||
}
|
||||
.container .card .left-side {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-top-left-radius: 20px !important;
|
||||
border-top-right-radius: 20px !important;
|
||||
border-bottom-left-radius: 0px !important;
|
||||
border-bottom-right-radius: 0px !important;
|
||||
}
|
||||
.container .card .form {
|
||||
display: block;
|
||||
}
|
||||
.smart-credit-pkg {
|
||||
width: 100%;
|
||||
padding-top: 1%;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
152
resources/js/components/partials/ChoosePackage.vue
Normal file
152
resources/js/components/partials/ChoosePackage.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<div class="form">
|
||||
<div class="left-side">
|
||||
<div class="left-heading">
|
||||
<h3>Creditzombies</h3>
|
||||
</div>
|
||||
<Step step="3"/>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<div class="main active" style="padding: 30px 40px 0px 20px">
|
||||
<TopArea/>
|
||||
</div>
|
||||
<div class="row" style="padding:10px 20px">
|
||||
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
|
||||
<div @click="getPackage(1)" class="listing listing-radius listing-primary package-1" :class="{'listing-highlight':is_highlight1}">
|
||||
<div class="shape">
|
||||
<div class="shape-text">Best offer</div>
|
||||
</div>
|
||||
<div class="listing-content">
|
||||
<h3 class="lead text-white text-bold">SmartCredit</h3>
|
||||
<p class="text-white text-bold">${{ package.prices[1] }} (Basic)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
|
||||
<div @mouseover="toggleClassForPackage" @click="getPackage(2)" class="listing listing-radius listing-success">
|
||||
<div class="shape">
|
||||
<div class="shape-text">50%</div>
|
||||
</div>
|
||||
<div class="listing-content">
|
||||
<h3 class="lead text-success text-bold">SmartCredit</h3>
|
||||
<p class="text-success text-bold">${{ package.prices[2] }} (Premium)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
|
||||
<div @mouseover="toggleClassForPackage" @click="getPackage(3)" class="listing listing-danger listing-radius">
|
||||
<div class="shape">
|
||||
<div class="shape-text">hot</div>
|
||||
</div>
|
||||
<div class="listing-content">
|
||||
<h3 class="lead text-danger text-bold">Identity IQ</h3>
|
||||
<p class="text-danger text-bold">Unavailable at this time
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import pkg from "../../helper/package";
|
||||
import {setAmount, setPackageId, setStep} from "../../helper";
|
||||
import router from "../../router";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
package:pkg,
|
||||
is_highlight1:true
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
toggleClassForPackage(){
|
||||
this.is_highlight1 = false
|
||||
},
|
||||
conditionalAlert(message,package_id){
|
||||
this.$swal({
|
||||
title: 'Warning',
|
||||
text: message,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Yes'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
setStep(5);
|
||||
setPackageId(package_id)
|
||||
setAmount(this.package.prices[package_id])
|
||||
router.push({name: 'make-payment'})
|
||||
}
|
||||
});
|
||||
},
|
||||
getPackage(package_id) {
|
||||
if(package_id == 3){
|
||||
this.$swal(
|
||||
"Currently this package is not available",
|
||||
"",
|
||||
"warning"
|
||||
)
|
||||
}else {
|
||||
this.conditionalAlert("Are you sure want to take the $"+this.package.prices[package_id]+ ' ('+this.package.labels[package_id]+") package?", package_id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import '../../../css/credit_report.css';
|
||||
|
||||
.container .card {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.listing{
|
||||
font-family: "Lato", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
.text-white{
|
||||
color: white;
|
||||
}
|
||||
.package-1{
|
||||
background-color: #FF440A;
|
||||
}
|
||||
|
||||
.listing-highlight{
|
||||
-webkit-transform: scale(1.1);
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
.package-1 .shape {
|
||||
border-style: solid;
|
||||
border-width: 0 100px 55px 0;
|
||||
float: right;
|
||||
height: 0;
|
||||
width: 0;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
.package-1 .shape-text {
|
||||
color: #FF440A;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
right: -45px;
|
||||
top: -2px;
|
||||
white-space: nowrap;
|
||||
transform: rotate(28deg);
|
||||
}
|
||||
|
||||
.package-1.listing-primary .shape{
|
||||
border-color: transparent #fff transparent transparent;
|
||||
}
|
||||
</style>
|
||||
239
resources/js/components/partials/CreateAccount.vue
Normal file
239
resources/js/components/partials/CreateAccount.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<div class="form">
|
||||
<div class="left-side">
|
||||
<div class="left-heading">
|
||||
<h3>{{company_Name}}</h3>
|
||||
</div>
|
||||
<Step step="1"/>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<form @submit.prevent="createAccount" autocomplete="off" class="form-element was-validated form-element--login" method="post" id="createAccountForm"
|
||||
novalidate="novalidate">
|
||||
<div class="main active">
|
||||
<TopArea/>
|
||||
<div class="text">
|
||||
<h3>Creating your account only takes a few seconds.</h3>
|
||||
<p>Let's start with some basic info.</p>
|
||||
</div>
|
||||
<div class="text" v-if="isButtonDisabled">
|
||||
<p class="error-text">All fields are required</p>
|
||||
</div>
|
||||
<div class="text" v-else-if="errorMsg.message">
|
||||
<p class="error-text">{{errorMsg.message[0]}}</p>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="First Name"
|
||||
name="first_name"
|
||||
:backend="errors.first_name"
|
||||
:errors="v$.formData.first_name.$errors"
|
||||
v-model="formData.first_name"
|
||||
:rules="['required']"
|
||||
:className="{'warning':errors.first_name}"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Last Name"
|
||||
name="last_name"
|
||||
:backend="errors.last_name"
|
||||
v-model="formData.last_name"
|
||||
:errors="v$.formData.last_name.$errors"
|
||||
:rules="['required']"
|
||||
:className="{'warning':errors.last_name}"
|
||||
/>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Email"
|
||||
v-model="formData.email"
|
||||
:errors="v$.formData.email.$errors"
|
||||
:rules="['required','email']"
|
||||
:className="{'warning':errors.email}"
|
||||
/>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
:backend="errors.password"
|
||||
v-model="formData.password"
|
||||
:errors="v$.formData.password.$errors"
|
||||
:rules="['required','password']"
|
||||
:className="{'warning':errors.password}"
|
||||
/>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<VueRecaptcha
|
||||
:sitekey="siteKey"
|
||||
:load-recaptcha-script="true"
|
||||
@verify="handleSuccess"
|
||||
@error="handleError"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<input type="checkbox" v-model="formData.is_click_acknowledge" @change.prevent="checkClickAcknowledge($event)">
|
||||
<span style="font-weight:bold;color:purple;font-size: 12px;margin-top:5px">
|
||||
By clicking on the "Next " button on the left, I acknowledge that I have read the Service Agreement, <a href="/terms-of-service" target="_blank">Terms of Use</a> and <a href="/terms-of-service" target="_blank">Privacy Policy</a> , and that I agree to their terms.
|
||||
</span>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button :disabled="v$.formData.$invalid" type="submit" value="Next" class="next_button">Next Step</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<Footer/>
|
||||
</template>
|
||||
<script>
|
||||
import register from "@/Api/register";
|
||||
import {
|
||||
setStep,
|
||||
setUserEmail,
|
||||
setUserId,
|
||||
setSecurityKey,
|
||||
setPackageId,
|
||||
setAmount,
|
||||
setUserLastName,
|
||||
getPackageId,
|
||||
setUserFirstName,
|
||||
setUserPassword,
|
||||
getUserFirstName,
|
||||
getUserLastName,
|
||||
getUserPassword,
|
||||
getUserEmail,
|
||||
getUserId, getLocalStorage,setLocalStorage
|
||||
} from "../../helper";
|
||||
import router from "../../router";
|
||||
import { VueRecaptcha } from 'vue-recaptcha';
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
import { required, email } from '@vuelidate/validators'
|
||||
import { GOOGLE_CAPTCHA_SITEKEY } from "../../config/constants";
|
||||
import pkg from "../../helper/package";
|
||||
import Footer from "./Footer.vue";
|
||||
|
||||
export default {
|
||||
components: {VueRecaptcha,Footer},
|
||||
setup() {
|
||||
return {v$: useVuelidate()};
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
formData:{
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
email: "",
|
||||
password: "",
|
||||
captcha:"",
|
||||
is_click_acknowledge:null
|
||||
},
|
||||
siteKey:GOOGLE_CAPTCHA_SITEKEY,
|
||||
message:"",
|
||||
errors:{},
|
||||
errorMsg:{},
|
||||
isButtonDisabled:true,
|
||||
package:pkg,
|
||||
appName : APP_NAME,
|
||||
company_Name: COMPANY_NAME
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
const userData = JSON.parse(getLocalStorage('formData'))|| [];
|
||||
this.formData.first_name = userData.first_name;
|
||||
this.formData.last_name = userData.last_name;
|
||||
this.formData.email = userData.email;
|
||||
this.formData.password = userData.password;
|
||||
},
|
||||
|
||||
methods:{
|
||||
|
||||
handleSuccess(response){
|
||||
if(response) {
|
||||
this.formData.captcha = response;
|
||||
}
|
||||
},
|
||||
handleError(){
|
||||
this.formData.captcha = "";
|
||||
},
|
||||
async createAccount(){
|
||||
const result = await register.createAccount(this.formData);
|
||||
this.errors = {};
|
||||
this.errorMsg = {};
|
||||
if (result.status_code == 100) {
|
||||
setLocalStorage('formData', JSON.stringify(this.formData));
|
||||
setStep(2);
|
||||
router.push({name: 'add-profile'});
|
||||
} else {
|
||||
this.errors = result.data
|
||||
|
||||
if(result.status_code == 400)
|
||||
{
|
||||
this.errorMsg.message = [result.message];
|
||||
}else {
|
||||
if (this.errors?.email) {
|
||||
this.errorMsg.message = this.errors?.email;
|
||||
}else if (this.errors?.password) {
|
||||
this.errorMsg.message = this.errors?.password;
|
||||
} else {
|
||||
this.errorMsg.message = this.errors?.captcha;
|
||||
}
|
||||
}
|
||||
if (this.errorMsg.message){
|
||||
this.isButtonDisabled = false
|
||||
}
|
||||
}
|
||||
},
|
||||
checkClickAcknowledge(e){
|
||||
if(e.target.checked){
|
||||
this.formData.is_click_acknowledge=e.target.checked;
|
||||
}
|
||||
else {
|
||||
this.formData.is_click_acknowledge=null;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
validations () {
|
||||
this.errors = {};
|
||||
return {
|
||||
formData: {
|
||||
first_name: {required},
|
||||
last_name: {required},
|
||||
email:{required,email},
|
||||
password:{required},
|
||||
is_click_acknowledge:{required}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@media (max-width: 750px) {
|
||||
.container .card .right-side {
|
||||
width: 100%;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.container .card .left-side {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.container .card .form {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.error-text {
|
||||
color: red;
|
||||
text-align: center
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
213
resources/js/components/partials/CreateCreditReportAccount.vue
Normal file
213
resources/js/components/partials/CreateCreditReportAccount.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<div class="form">
|
||||
<div class="left-side">
|
||||
<div class="left-heading">
|
||||
<h3>Creditzombies</h3>
|
||||
</div>
|
||||
<Step step="3"/>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<form @submit.prevent autocomplete="off" class="form-element was-validated form-element--login" method="post"
|
||||
novalidate="novalidate">
|
||||
<div class="main active">
|
||||
<TopArea/>
|
||||
<div class="text">
|
||||
<h2>Please input your smart credit email and password</h2>
|
||||
<p>Let's start with some basic info.</p>
|
||||
</div>
|
||||
<div class="text" v-if="isButtonDisabled">
|
||||
<p style="color:red;text-align:center">All fields are required</p>
|
||||
</div>
|
||||
<div class="text" v-if="errorMsg.message">
|
||||
<p style="color:red;text-align:center">{{errorMsg.message[0]}}</p>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<p class="edit-text">
|
||||
<a href="#" @click.prevent="editable('fname')">Edit</a>
|
||||
</p>
|
||||
<input
|
||||
:readonly="inputReadOnly.fname"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.first_name}"
|
||||
placeholder="First Name"
|
||||
type="text"
|
||||
v-model="formData.first_name"
|
||||
@keyup="validateInput"
|
||||
@blur="validateInput"
|
||||
/>
|
||||
<ValidationError :msg="errors.first_name"/>
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<p class="edit-text">
|
||||
<a href="#" @click.prevent="editable('lname')">Edit</a>
|
||||
</p>
|
||||
<input
|
||||
:readonly="inputReadOnly.lname"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.last_name}"
|
||||
placeholder="Last Name"
|
||||
type="text"
|
||||
v-model="formData.last_name"
|
||||
@keyup="validateInput"
|
||||
@blur="validateInput"
|
||||
/>
|
||||
<ValidationError :msg="errors.last_name"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<p class="edit-text">
|
||||
<a href="#" @click.prevent="editable('email')">Edit</a>
|
||||
</p>
|
||||
<input
|
||||
:readonly="inputReadOnly.email"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.email}"
|
||||
placeholder="Email"
|
||||
type="text"
|
||||
v-model="formData.email"
|
||||
@keyup="validateInput"
|
||||
@blur="validateInput"
|
||||
/>
|
||||
<ValidationError :msg="errors.email"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<input
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.password}"
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
v-model="formData.password"
|
||||
@keyup="validateInput"
|
||||
@blur="validateInput"
|
||||
/>
|
||||
<ValidationError :msg="errors.password"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons" style="text-align: center">
|
||||
<button :disabled="isButtonDisabled" @click="importCreditReport" type="button" value="Next" class="next_button">Import Credit Report</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import useFormValidation from "@/Validation/useFormValidation";
|
||||
import useSubmitButtonState from "@/Validation/useSubmitButtonState";
|
||||
import register from "@/Api/register";
|
||||
import {inject, onMounted, reactive, ref} from "vue";
|
||||
import state from "../../helper/state";
|
||||
import {getPackageId, getUserEmail, getUserId, setStep} from "../../helper";
|
||||
import router from "../../router";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const swal = inject('$swal');
|
||||
let formData = ref({
|
||||
"first_name": "",
|
||||
"last_name": "",
|
||||
"email": "",
|
||||
"password": ""
|
||||
})
|
||||
|
||||
let inputReadOnly = ref({
|
||||
"fname":true,
|
||||
"lname":true,
|
||||
"email":true
|
||||
})
|
||||
const stateList = state;
|
||||
|
||||
const errorMsg = reactive({
|
||||
"message":""
|
||||
})
|
||||
let success = {}
|
||||
|
||||
let {errors} = useFormValidation();
|
||||
// let {isButtonDisabled} = useSubmitButtonState(formData, errors);
|
||||
let isButtonDisabled = ref(true)
|
||||
const validateInput = () =>{
|
||||
let f = formData.value;
|
||||
let count = 0;
|
||||
isButtonDisabled.value = true
|
||||
if(f.first_name){
|
||||
count++
|
||||
}
|
||||
|
||||
if(f.last_name){
|
||||
count++
|
||||
}
|
||||
|
||||
if(f.email){
|
||||
count++
|
||||
}
|
||||
|
||||
if(f.password){
|
||||
count++
|
||||
}
|
||||
|
||||
if(count == 4){
|
||||
isButtonDisabled.value = false
|
||||
}
|
||||
|
||||
}
|
||||
const editable = (value) =>{
|
||||
inputReadOnly.value[value] = !inputReadOnly.value[value]
|
||||
}
|
||||
const importCreditReport = async () => {
|
||||
if(isButtonDisabled){
|
||||
const params = {
|
||||
"email":formData.value.email,
|
||||
"password":formData.value.password,
|
||||
"package_id":getPackageId(),
|
||||
"user_id":getUserId()
|
||||
}
|
||||
const response = await register.importCreditReportByEmail(params)
|
||||
if(response.status_code == 100){
|
||||
router.push({name:"success"})
|
||||
}else{
|
||||
swal(
|
||||
response.message,
|
||||
"",
|
||||
"warning"
|
||||
)
|
||||
}
|
||||
console.log('response',response)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
console.log('errors',errors,isButtonDisabled)
|
||||
|
||||
onMounted(async ()=>{
|
||||
let email = getUserEmail()
|
||||
const userInfo = await register.getUserInfo()
|
||||
if(userInfo.status_code == 100){
|
||||
formData.value = userInfo.data
|
||||
}
|
||||
})
|
||||
console.log('count',isButtonDisabled)
|
||||
console.log('userInfo',formData)
|
||||
return {validateInput,editable,inputReadOnly, formData,errors,importCreditReport, isButtonDisabled,stateList,errorMsg };
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.next_button{
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.container .card {
|
||||
height: 550px;
|
||||
}
|
||||
</style>
|
||||
35
resources/js/components/partials/Footer.vue
Normal file
35
resources/js/components/partials/Footer.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="panel panel-default" style="text-align: center;padding: 10px">
|
||||
<strong>
|
||||
Secure SSL Area | This website is protected by secure portal © 2025 Clickletters LLC/M2C Academy LLC. All rights reserved.
|
||||
</strong>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
|
||||
export default {
|
||||
|
||||
name: 'Footer',
|
||||
setup() {
|
||||
return {v$: useVuelidate()};
|
||||
},
|
||||
|
||||
data() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
|
||||
validations() {
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
78
resources/js/components/partials/IdentityIQPkg.vue
Normal file
78
resources/js/components/partials/IdentityIQPkg.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div class="smart-credit-pkg">
|
||||
<div class="link-area">
|
||||
<a :href="`${app_base_url}/login`">
|
||||
Already a member? Log In
|
||||
</a>
|
||||
</div>
|
||||
<div style="margin-top: 40%;" class="report-card p-3 report-card--best report-card__aside mt-5 report-card--info">
|
||||
<div class="report-card__header pb-3">
|
||||
<h5>
|
||||
<strong>
|
||||
<img :src="`${img_url}`" alt="SmartCredit" class="provider-logo">
|
||||
{{package.labels[package_id]}}
|
||||
</strong>
|
||||
</h5>
|
||||
</div>
|
||||
<!-- <div class="report-card__price p-2">-->
|
||||
|
||||
<!-- <h4> ${{package.prices[package_id]}}/mo </h4>-->
|
||||
<!-- <span> Cancel Anytime </span>-->
|
||||
|
||||
<!-- </div>-->
|
||||
<div class="report-card__points py-2 pt-3">
|
||||
<ul class="points">
|
||||
<li>
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<strong> Unlimited {{company_Name}} Challenges/Letter Attacks </strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="report-card__points py-2">
|
||||
<ul class="points" >
|
||||
<li v-for="subitem in reportProviders.IdentityIQPoints"><i class="fas fa-check-circle"></i> {{subitem}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="report-card__text py-2">
|
||||
<p>
|
||||
Includes Full 6 Wave attacks,
|
||||
that will allow you to effectively and efficiently
|
||||
challenge all inaccurate negative items
|
||||
with a click of a button in 45 seconds or less.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="report-card__action">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pkg from "../../helper/package";
|
||||
import reportProviders from "../../helper/report_provider";
|
||||
|
||||
export default {
|
||||
props:{
|
||||
package_id:{
|
||||
required:true
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
package:pkg,
|
||||
app_base_url: APP_URL,
|
||||
reportProviders : reportProviders,
|
||||
img_url : APP_URL+'/images/'+APP_NAME+'_logo.png',
|
||||
company_Name:COMPANY_NAME
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
@import url("./../../../css/smartcredit.css");
|
||||
|
||||
</style>
|
||||
24
resources/js/components/partials/IdentityIqLogo.vue
Normal file
24
resources/js/components/partials/IdentityIqLogo.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="smart-credit-logo">
|
||||
<img :src="`${img_url}`" class="provider-logo" alt="">
|
||||
<strong> {{ package.labels[package_id] }}</strong>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pkg from "../../helper/package";
|
||||
export default {
|
||||
props:{
|
||||
package_id:{
|
||||
required:true
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
package:pkg,
|
||||
image_base_url: APP_URL,
|
||||
img_url : APP_URL+'/images/'+APP_NAME+'_logo.png',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
471
resources/js/components/partials/MakePayment.vue
Normal file
471
resources/js/components/partials/MakePayment.vue
Normal file
@@ -0,0 +1,471 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<div class="form">
|
||||
<div class="left-side">
|
||||
<div class="left-heading">
|
||||
<h3>Creditzombies</h3>
|
||||
</div>
|
||||
<Step step="3"/>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<form @submit.prevent="makePayment" autocomplete="off"
|
||||
class="form-element was-validated form-element--login" method="post"
|
||||
novalidate="novalidate">
|
||||
<div class="main active">
|
||||
<TopArea :is_show_login="false"/>
|
||||
<div class="text">
|
||||
<h2> Credit Counsel Elite Partnered with SmartCredit</h2>
|
||||
<p>Let's start with some basic info.</p>
|
||||
</div>
|
||||
<SmartCreditLogo :package_id="formData.package_id" />
|
||||
<div class="text" style="margin-top: 10px" v-if="isButtonDisabled">
|
||||
<p style="color:red;text-align:center">All fields are required</p>
|
||||
</div>
|
||||
<div class="text" v-if="message">
|
||||
<p style="color:red;text-align:center">{{ message[0] }}</p>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<input
|
||||
ref="first_name"
|
||||
autocomplete="off"
|
||||
:class="{'warning':v$.formData.first_name.$errors.length}"
|
||||
placeholder="First Name"
|
||||
type="text"
|
||||
v-model="formData.first_name"
|
||||
:readonly="disabled == 1"
|
||||
/>
|
||||
<ValidationError :backend="errors.first_name"
|
||||
:msg="v$.formData.first_name.$errors"/>
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<input
|
||||
ref="last_name"
|
||||
autocomplete="off"
|
||||
:class="{'warning':v$.formData.last_name.$errors.length}"
|
||||
placeholder="Last Name"
|
||||
type="text"
|
||||
v-model="v$.formData.last_name.$model"
|
||||
:readonly="disabled == 1"
|
||||
/>
|
||||
<ValidationError :backend="errors.last_name" :msg="v$.formData.last_name.$errors"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<input
|
||||
ref="email"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.email}"
|
||||
placeholder="Email"
|
||||
type="text"
|
||||
v-model="v$.formData.email.$model"
|
||||
:readonly="disabled == 1"
|
||||
/>
|
||||
<ValidationError :backend="errors.email" :msg="v$.formData.email.$errors"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<input
|
||||
ref="password"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.password}"
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
v-model="v$.formData.password.$model"
|
||||
:readonly="disabled == 1"
|
||||
/>
|
||||
<ValidationError :backend="errors.password" :msg="v$.formData.password.$errors"/>
|
||||
</div>
|
||||
<div class="input-div" >
|
||||
<input
|
||||
ref="phone"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.phone}"
|
||||
placeholder="Phone, e,g. 954-604-4220"
|
||||
type="text"
|
||||
v-model="v$.formData.phone.$model"
|
||||
:readonly="disabled == 1"
|
||||
/>
|
||||
<ValidationError :backend="errors.phone" :msg="v$.formData.phone.$errors"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<input
|
||||
ref="full_ssn"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.full_ssn}"
|
||||
placeholder="Full SSN e.g, 555-55-5555"
|
||||
type="text"
|
||||
@keyup.prevent="ssnCompleted($event)"
|
||||
v-model="v$.formData.full_ssn.$model"
|
||||
:maxlength="min"
|
||||
:readonly="disabled == 1"
|
||||
/>
|
||||
<ValidationError :backend="errors.full_ssn" :msg="v$.formData.full_ssn.$errors"/>
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<input
|
||||
ref="birth_date"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.birth_date}"
|
||||
placeholder="Birth Date e.g, mm/dd/yyyy"
|
||||
type="text"
|
||||
v-model="v$.formData.birth_date.$model"
|
||||
@keyup.prevent="birthDateCompleted($event)"
|
||||
:maxlength="10"
|
||||
:readonly="disabled == 1"
|
||||
/>
|
||||
<ValidationError :backend="errors.birth_date" :msg="v$.formData.birth_date.$errors"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<input
|
||||
ref="street_no"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.street_no}"
|
||||
placeholder="Street No."
|
||||
type="text"
|
||||
v-model="v$.formData.street_no.$model"
|
||||
:readonly="disabled == 1"
|
||||
/>
|
||||
<ValidationError :backend="errors.street_no" :msg="v$.formData.street_no.$errors"/>
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<input
|
||||
ref="street_name"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.street_name}"
|
||||
placeholder="Street Name"
|
||||
type="text"
|
||||
v-model="v$.formData.street_name.$model"
|
||||
:readonly="disabled == 1"
|
||||
|
||||
/>
|
||||
<ValidationError :backend="errors.street_name"
|
||||
:msg="v$.formData.street_name.$errors"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<input
|
||||
ref="city"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.city}"
|
||||
placeholder="City"
|
||||
type="text"
|
||||
v-model="v$.formData.city.$model"
|
||||
:readonly="disabled == 1"
|
||||
/>
|
||||
<ValidationError :backend="errors.city" :msg="v$.formData.city.$errors"/>
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<select ref="state" v-model="v$.formData.state.$model" :aria-readonly="disabled">
|
||||
<option value="">Please select state</option>
|
||||
<option :key="item.id" v-for="item in stateList" :value="item.id">
|
||||
{{ item.value }}
|
||||
</option>
|
||||
</select>
|
||||
<ValidationError :backend="errors.state" :msg="v$.formData.state.$errors"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<input
|
||||
ref="zip_code"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.zip_code}"
|
||||
placeholder="Zip Code"
|
||||
type="text"
|
||||
v-model="v$.formData.zip_code.$model"
|
||||
:readonly="disabled == 1"
|
||||
/>
|
||||
<ValidationError :backend="errors.zip_code" :msg="v$.formData.zip_code.$errors"/>
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<input
|
||||
ref="ssn"
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.ssn}"
|
||||
placeholder="SSN"
|
||||
type="text"
|
||||
v-model="v$.formData.ssn.$model"
|
||||
:maxlength="4"
|
||||
@keyup.prevent="ssnCompleted($event)"
|
||||
:readonly="disabled == 1"
|
||||
/>
|
||||
<ValidationError :backend="errors.ssn" :msg="v$.formData.ssn.$errors"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p>Provide Card Information</p>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="input-div">
|
||||
<input
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.card_number}"
|
||||
placeholder="Card Number"
|
||||
type="text"
|
||||
v-model="v$.formData.card_number.$model"
|
||||
/>
|
||||
<ValidationError :backend="errors.card_number"
|
||||
:msg="v$.formData.card_number.$errors"/>
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<input
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.expiry}"
|
||||
placeholder="Expiry e.g mm/yy"
|
||||
type="text"
|
||||
v-model="v$.formData.expiry.$model"
|
||||
@keyup.prevent="cardExpiryCompleted($event)"
|
||||
:maxlength="5"
|
||||
/>
|
||||
<ValidationError :backend="errors.expiry" :msg="v$.formData.expiry.$errors"/>
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<input
|
||||
autocomplete="off"
|
||||
:class="{'warning':errors.amount}"
|
||||
placeholder="Amount"
|
||||
type="text"
|
||||
v-model="v$.formData.amount.$model"
|
||||
disabled="disabled"
|
||||
/>
|
||||
<ValidationError :backend="errors.amount" :msg="v$.formData.amount.$errors"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-text" style="gap:5px">
|
||||
<input type="checkbox" v-model="formData.is_authorized" @change.prevent="checkTermsAndService($event)">
|
||||
<span style="font-weight:bold;color:purple;font-size: 12px;margin-top:15px">
|
||||
Yes I have read the <a href="/terms-of-service" target="_blank">SmartCredit terms of services</a> for this purchase and I totally Agree and Authorize this Charge of ${{ formData.amount }}</span>
|
||||
</div>
|
||||
<div class="input-text" >
|
||||
<div class="input-div buttons" style="text-align: center">
|
||||
<button :disabled="v$.formData.$invalid" ref="purchase-btn" type="submit" value="Next" class="next_button" >
|
||||
Purchase
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<SmartCreditPkg :package_id="formData.package_id"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
import {required, email, integer,minLength} from '@vuelidate/validators'
|
||||
import register from "./../../Api/register";
|
||||
import {
|
||||
getFormData, getLocalStorage,
|
||||
getPackageId, getUserQuestionAnswer,
|
||||
setStep,
|
||||
setUserId, unsetFormData, unsetUserQuestionAnswer,unsetLocalStorage
|
||||
} from "../../helper";
|
||||
import router from "../../router";
|
||||
import state from "../../helper/state";
|
||||
import pkg from "../../helper/package";
|
||||
import SmartCreditLogo from "./SmartCreditLogo";
|
||||
import SmartCreditPkg from "./SmartCreditPkg";
|
||||
export default {
|
||||
components: {SmartCreditPkg, SmartCreditLogo },
|
||||
setup() {
|
||||
return {v$: useVuelidate()}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
is_disable:true,
|
||||
formData: {
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
email: "",
|
||||
password: "",
|
||||
street_no: "",
|
||||
street_name: "",
|
||||
city: "",
|
||||
ssn: "",
|
||||
state: "",
|
||||
zip_code: "",
|
||||
phone: "",
|
||||
card_number: "",
|
||||
full_ssn:"",
|
||||
expiry: "",
|
||||
amount: "",
|
||||
package_id: 0,
|
||||
birth_date:"",
|
||||
is_authorized: null,
|
||||
// questionList:[]
|
||||
|
||||
},
|
||||
stateList: state,
|
||||
errors: {},
|
||||
message: [
|
||||
"All fields are required"
|
||||
],
|
||||
disabled: 1,
|
||||
package: pkg,
|
||||
value: null,
|
||||
roleOptions:[],
|
||||
isOpen: false,
|
||||
min:11
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
const userData = JSON.parse(getLocalStorage('formData')) || [];
|
||||
this.formData.first_name = userData.first_name;
|
||||
this.formData.last_name = userData.last_name;
|
||||
this.formData.email = userData.email;
|
||||
this.formData.password = userData.password;
|
||||
this.formData.package_id = userData.package_id;
|
||||
this.formData.amount = userData.amount;
|
||||
this.formData.street_no= userData.street_no;
|
||||
this.formData.street_name=userData.street_name;
|
||||
this.formData.city=userData.city;
|
||||
this.formData.ssn=userData.ssn;
|
||||
this.formData.full_ssn=userData.full_ssn;
|
||||
this.formData.state=userData.state;
|
||||
this.formData.zip_code=userData.zip_code;
|
||||
this.formData.phone=userData.phone;
|
||||
this.formData.package_id=userData.package_id;
|
||||
this.formData.birth_date=userData.birth_date;
|
||||
|
||||
this.$refs['state'].toggleAttribute("disabled")
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
async makePayment() {
|
||||
this.$refs['purchase-btn'].toggleAttribute("disabled")
|
||||
this.errors = {};
|
||||
const data = await register.makePayment(this.formData);
|
||||
if (data.status_code == "100") {
|
||||
unsetLocalStorage('formData');
|
||||
setUserId(data.data.id);
|
||||
setStep(6);
|
||||
router.push({name: "success"});
|
||||
} else {
|
||||
this.message[0] = data.message;
|
||||
}
|
||||
},
|
||||
toggle: function (refId) {
|
||||
let attribute = "readonly"
|
||||
if (refId === "state") {
|
||||
attribute = "disabled"
|
||||
}
|
||||
this.$refs[refId].toggleAttribute(attribute)
|
||||
},
|
||||
backToProfile:function (){
|
||||
setStep(2);
|
||||
router.push({name: 'add-profile'});
|
||||
},
|
||||
checkTermsAndService(e){
|
||||
if(e.target.checked){
|
||||
this.formData.is_authorized=e.target.checked;
|
||||
}
|
||||
else {
|
||||
this.formData.is_authorized=null;
|
||||
}
|
||||
},
|
||||
ssnCompleted(e) {
|
||||
if(this.formData.full_ssn.length === 3 || this.formData.full_ssn.length === 6) {
|
||||
this.formData.full_ssn += '-';
|
||||
}
|
||||
if(this.formData.full_ssn.length === 11){
|
||||
this.formData.ssn = this.formData.full_ssn.substring( 7, 11 );
|
||||
}
|
||||
},
|
||||
birthDateCompleted(e) {
|
||||
if(this.formData.birth_date.length===2 ||this.formData.birth_date.length===5){
|
||||
this.formData.birth_date+='/';
|
||||
}
|
||||
},
|
||||
cardExpiryCompleted(e){
|
||||
if(this.formData.expiry.length===2){
|
||||
this.formData.expiry+='/';
|
||||
}
|
||||
}
|
||||
},
|
||||
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},
|
||||
expiry: {required},
|
||||
amount: {required},
|
||||
full_ssn: {required,minLength:minLength(this.min)},
|
||||
birth_date: {required},
|
||||
is_authorized:{required}
|
||||
// questionList: {required}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container .card {
|
||||
width: 1300px;
|
||||
}
|
||||
|
||||
.input-text {
|
||||
margin: 15px 0;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.container .card .form {
|
||||
background-image: unset;
|
||||
}
|
||||
|
||||
.container .card .left-side {
|
||||
width: 25%;
|
||||
background-image: -webkit-linear-gradient(-90deg, #8ba8e0 0%, #4e74f2 100%);
|
||||
}
|
||||
|
||||
.container .card .right-side {
|
||||
width: 50%;
|
||||
}
|
||||
@media (max-width: 750px) {
|
||||
.container .card .right-side {
|
||||
width: 100%;
|
||||
border-bottom-left-radius: 20px !important;
|
||||
border-top-right-radius: 0px !important;
|
||||
}
|
||||
.container .card .left-side {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-top-left-radius: 20px !important;
|
||||
border-top-right-radius: 20px !important;
|
||||
border-bottom-left-radius: 0px !important;
|
||||
border-bottom-right-radius: 0px !important;
|
||||
}
|
||||
.container .card .form {
|
||||
display: block;
|
||||
}
|
||||
.smart-credit-pkg {
|
||||
width: 100%;
|
||||
padding-top: 1%;
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
430
resources/js/components/partials/PaymentModal.vue
Normal file
430
resources/js/components/partials/PaymentModal.vue
Normal file
@@ -0,0 +1,430 @@
|
||||
<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
|
||||
},
|
||||
errors:{},
|
||||
message: [""],
|
||||
isButtonDisabled:false,
|
||||
disabled: 1,
|
||||
package: pkg,
|
||||
value: null,
|
||||
roleOptions:[],
|
||||
min:11,
|
||||
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.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>
|
||||
|
||||
|
||||
24
resources/js/components/partials/SmartCreditLogo.vue
Normal file
24
resources/js/components/partials/SmartCreditLogo.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="smart-credit-logo">
|
||||
<img :src="`${img_url}`" class="provider-logo" alt="">
|
||||
<strong>{{ package.labels[package_id] }}</strong>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pkg from "../../helper/package";
|
||||
export default {
|
||||
props:{
|
||||
package_id:{
|
||||
required:true
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
package:pkg,
|
||||
image_base_url: APP_URL,
|
||||
img_url : APP_URL+'/images/'+APP_NAME+'_logo.png',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
74
resources/js/components/partials/SmartCreditPkg.vue
Normal file
74
resources/js/components/partials/SmartCreditPkg.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="smart-credit-pkg">
|
||||
<div class="link-area">
|
||||
<a :href="`${app_base_url}/login`">
|
||||
Already a member? Log In
|
||||
</a>
|
||||
</div>
|
||||
<div style="margin-top: 65%;" class="report-card p-3 report-card--best report-card__aside mt-5 report-card--info">
|
||||
<div class="report-card__header pb-3">
|
||||
<h5>
|
||||
<!-- :src="`${app_base_url}/img/smartcredit_logo.png`"-->
|
||||
<strong> <img
|
||||
:src="`${img_url}`"
|
||||
alt="SmartCredit" class="provider-logo"> {{package.labels[package_id]}}</strong>
|
||||
</h5>
|
||||
</div>
|
||||
<!-- <div class="report-card__price p-2">-->
|
||||
<!-- <h4>${{package.prices[package_id]}}/mo</h4> <span>Cancel Anytime</span>-->
|
||||
<!-- </div>-->
|
||||
<div class="report-card__points py-2 pt-3">
|
||||
<ul class="points">
|
||||
<!-- <li><i class="fas fa-check-circle"></i> <strong>Unlimited Creditzombies-->
|
||||
<!-- Challenges</strong></li>-->
|
||||
<li><i class="fas fa-check-circle"></i> <strong>Monthly 3 Bureau Reports &
|
||||
Scores</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="report-card__points py-2 ">
|
||||
<ul class="points">
|
||||
<li><i class="fas fa-check-circle"></i> Identity Theft Insurance ($1m)</li>
|
||||
<li><i class="fas fa-check-circle"></i> Credit Monitoring & Alerts (TU)</li>
|
||||
<li><i class="fas fa-check-circle"></i> ScoreTracker</li>
|
||||
<li><i class="fas fa-check-circle"></i> ScoreBuilder</li>
|
||||
<li><i class="fas fa-check-circle"></i> ScoreBoost</li>
|
||||
<li><i class="fas fa-check-circle"></i> Money Manager</li>
|
||||
<li><i class="fas fa-check-circle"></i> Smart Credit Report</li>
|
||||
<li><i class="fas fa-check-circle"></i> PrivacyMaster</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="report-card__text py-2">
|
||||
<p>Includes SmartCredit Money Manager with <strong>{{package.updateLimit[package_id]}}</strong> Transunion Report
|
||||
& Score updates in SmartCredit.</p>
|
||||
</div>
|
||||
<div class="report-card__action">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pkg from "../../helper/package";
|
||||
export default {
|
||||
props:{
|
||||
package_id:{
|
||||
required:true
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
package:pkg,
|
||||
app_base_url: APP_URL,
|
||||
img_url : APP_URL+'/images/'+APP_NAME+'_logo.png',
|
||||
company_Name:COMPANY_NAME
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
@import url("./../../../css/smartcredit.css");
|
||||
|
||||
</style>
|
||||
39
resources/js/components/partials/SmartCreditPkgView.vue
Normal file
39
resources/js/components/partials/SmartCreditPkgView.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="smart-credit-pkg">
|
||||
<div class="report-card p-3 report-card--best report-card__aside mt-5 report-card--info">
|
||||
<div class="report-card__header pb-3">
|
||||
<h5>
|
||||
<strong>
|
||||
<img :src="`${app_base_url}/img/smartcredit_logo.png`"
|
||||
alt="SmartCredit" class="provider-logo"> {{package.labels[package_id]}}
|
||||
</strong>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="report-card__price p-2">
|
||||
<h4>${{package.prices[package_id]}}/mo</h4> <span>Cancel Anytime</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pkg from "../../helper/package";
|
||||
export default {
|
||||
props:{
|
||||
package_id:{
|
||||
required:true
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
package:pkg,
|
||||
app_base_url: APP_URL,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
@import url("./../../../css/smartcredit.css");
|
||||
|
||||
</style>
|
||||
141
resources/js/components/partials/Success.vue
Normal file
141
resources/js/components/partials/Success.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<div class="form">
|
||||
<div class="left-side">
|
||||
<div class="left-heading">
|
||||
<h3>{{ company_Name }}</h3>
|
||||
</div>
|
||||
<div class="steps-content">
|
||||
<h3>Step <span class="step-number">3</span></h3>
|
||||
<p class="step-number-content active">Enter your personal information to get closer to
|
||||
companies.</p>
|
||||
<p class="step-number-content d-none">Get to know better by adding your diploma,certificate and
|
||||
education life.</p>
|
||||
<p class="step-number-content d-none">Help companies get to know you better by telling then about
|
||||
your past experiences.</p>
|
||||
<p class="step-number-content d-none">Add your profile picture and let companies find youy
|
||||
fast.</p>
|
||||
</div>
|
||||
<ul class="progress-bar">
|
||||
<li class="active">Create Account</li>
|
||||
<li class="active">Add Profile</li>
|
||||
<li class="active">Credit Report</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<div class="main active">
|
||||
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
|
||||
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
|
||||
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
|
||||
</svg>
|
||||
|
||||
<div class="text congrats">
|
||||
<h2 style="color:purple">Congratulations!</h2>
|
||||
<p style="color:purple">On your sign up, please allow 24 hours or less for Admin to check your email and name to turn you on appropriately. </p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="input-text">
|
||||
|
||||
<div class="input-div buttons" style="text-align: center" >
|
||||
<button @click.prevent="makePayment" type="submit" value="Next" class="next_button">
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer/>
|
||||
</template>
|
||||
<script>
|
||||
import pkg from "../../helper/package";
|
||||
import {onMounted} from 'vue';
|
||||
import {
|
||||
unsetStep,
|
||||
getPackageId,
|
||||
getUserId
|
||||
} from "../../helper";
|
||||
import register from "../../Api/register";
|
||||
import router from "../../router";
|
||||
import Footer from "./Footer.vue";
|
||||
|
||||
export default {
|
||||
components: {Footer},
|
||||
setup() {
|
||||
onMounted(()=>{
|
||||
unsetStep()
|
||||
})
|
||||
return {APP_URL};
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
package_id:0,
|
||||
package:pkg,
|
||||
app_base_url: APP_URL,
|
||||
company_Name:COMPANY_NAME
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.package_id = getPackageId();
|
||||
},
|
||||
created() {
|
||||
this.fbEvents();
|
||||
},
|
||||
methods:{
|
||||
fbEvents(){
|
||||
window.fbq('init', '450475028484130');
|
||||
window.fbq('track', 'PageView');
|
||||
window.fbq('track', 'Purchase');
|
||||
},
|
||||
async makePayment() {
|
||||
localStorage.removeItem('formData');
|
||||
window.location.href = `${this.app_base_url}/login`;
|
||||
// const userData = JSON.parse(localStorage.getItem('formData')) || [];
|
||||
// this.errors = {}
|
||||
// let formData= {'user_id': getUserId(),'email':userData.email,'card_number':userData.card_number, 'expiry':userData.expiry,'amount':userData.amount,'full_ssn':userData.full_ssn,'phone':userData.phone ,'zip_code':userData.zip_code};
|
||||
// const data = await register.makePayments(formData);
|
||||
// if (data.status_code == "100") {
|
||||
// localStorage.removeItem('formData');
|
||||
// this.isOpen=false;
|
||||
// this.isView=false;
|
||||
// window.location.href = `${APP_URL}/login`;
|
||||
// } else if (data.status_code == "402") {
|
||||
// this.errors = data.data;
|
||||
// } else {
|
||||
// this.message[0] = data.message;
|
||||
// }
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '../../../css/credit_report.css';
|
||||
.container .card {
|
||||
height: 550px;
|
||||
}
|
||||
@media (max-width: 750px) {
|
||||
.container .card .right-side {
|
||||
width: 100%;
|
||||
border-bottom-left-radius: 20px !important;
|
||||
border-top-right-radius: 0px !important;
|
||||
}
|
||||
.container .card .left-side {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-top-left-radius: 20px !important;
|
||||
border-top-right-radius: 20px !important;
|
||||
border-bottom-left-radius: 0px !important;
|
||||
border-bottom-right-radius: 0px !important;
|
||||
}
|
||||
.container .card .form {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
45
resources/js/components/partials/TopArea.vue
Normal file
45
resources/js/components/partials/TopArea.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="top-area">
|
||||
<div class="img-area">
|
||||
<img class="login-logo" :src="`${img_url}`" alt="">
|
||||
</div>
|
||||
<div v-if="is_show_login" class="link-area">
|
||||
<a href="#" @click="cookiesClear">
|
||||
Already a member? Log In
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {unsetStep, unsetLocalStorage} from "../../helper";
|
||||
|
||||
export default {
|
||||
props:{
|
||||
is_show_login:{
|
||||
default:true
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
APP_URL : APP_URL,
|
||||
img_url : APP_URL+'/images/'+APP_NAME+'_logo.png',
|
||||
is_show_login:this.$props.is_show_login
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
cookiesClear(){
|
||||
unsetLocalStorage('formData');
|
||||
unsetLocalStorage('userQuestionAnswer');
|
||||
unsetStep();
|
||||
window.location.href = `${APP_URL}/login`;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.login-logo {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
25
resources/js/components/partials/ValidationError.vue
Normal file
25
resources/js/components/partials/ValidationError.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div v-for="error of msg" :key="error.$uid" class="field-validation-error">
|
||||
<span>
|
||||
{{ error.$message }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="backend" class="field-validation-error">
|
||||
<span>
|
||||
{{ backend[0] }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Error',
|
||||
props: {
|
||||
msg: Array|String,
|
||||
backend:Array
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.props.msg)
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
266
resources/js/components/partials/modal.vue
Normal file
266
resources/js/components/partials/modal.vue
Normal file
@@ -0,0 +1,266 @@
|
||||
|
||||
<template>
|
||||
<div class="modal-backdrop">
|
||||
<div class="modal" >
|
||||
<header class="modal-header">
|
||||
<slot name="header">
|
||||
Complete The Identity Question
|
||||
</slot>
|
||||
<!-- <button type="button" class="btn-close" @click="close" > x </button>-->
|
||||
</header>
|
||||
|
||||
<section class="modal-body">
|
||||
<div class="text" style="margin-top: 10px" v-if="isButtonDisabled">
|
||||
<p style="color:red;text-align:center">All fields are required</p>
|
||||
</div>
|
||||
<div class="text" v-if="message">
|
||||
<p style="color:red;text-align:center">{{ message[0] }}</p>
|
||||
</div>
|
||||
<slot name="body">
|
||||
<fieldset class="fieldset-body">
|
||||
<legend class="label-text">Complete The Identity Questions Below<br></legend>
|
||||
<div v-for="(item,key) in questionAnswer.idVerificationCriteria">
|
||||
<div class="input-text" v-if="getQuestionCounter(key) > 0">
|
||||
<div class="input-div">
|
||||
<label class="label-text" > {{item.displayName}} </label>
|
||||
<div class="radio-text" v-for="subitem in item.choiceList.choice">
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" @change="radioButtonEvent($event,getQuestionCounter(key))" v-model="answers['answer'+getQuestionCounter(key)]" :value="{id: subitem.key, name: subitem.display}">
|
||||
{{subitem.display}}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</slot>
|
||||
</section>
|
||||
|
||||
<footer class="modal-footer">
|
||||
<!-- <div class="input-div buttons" style="text-align: left">-->
|
||||
<!-- <button type="button" value="Back" class="back_button" @click="close">-->
|
||||
<!-- Skip-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
<div class="input-div buttons" style="text-align: right">
|
||||
<button :disabled="isNotValid" type="submit" value="Next" class="next_button" @click="submitQuestion" >
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
import {required} from "@vuelidate/validators";
|
||||
import {
|
||||
getCustomerToken,
|
||||
setStep,
|
||||
getTrackingToken,
|
||||
getReferenceNumber,
|
||||
unsetTrackingToken,
|
||||
unsetCustomerToken,
|
||||
unsetReferenceNumber, setUserQuestionAnswer, getLocalStorage, setLocalStorage, unsetLocalStorage
|
||||
} from "../../helper";
|
||||
import router from "../../router";
|
||||
import register from "../../Api/register";
|
||||
|
||||
export default {
|
||||
name: 'modal.vue',
|
||||
setup() {
|
||||
|
||||
return {v$: useVuelidate()}
|
||||
},
|
||||
data() {
|
||||
let finalFormData = {};
|
||||
let qa = this.questionAnswer.idVerificationCriteria;
|
||||
finalFormData['email'] = "";
|
||||
finalFormData['customerToken'] = "";
|
||||
finalFormData['trackingToken'] = "";
|
||||
finalFormData['referenceNumber'] = "";
|
||||
let totalQuestion = 0;
|
||||
let qa_assoc = {};
|
||||
for (let q in qa){
|
||||
if(this.getQuestionCounter(q) > 0) {
|
||||
// qa_assoc[q] = qa[q].displayName;
|
||||
qa_assoc[`answer${this.getQuestionCounter(q)}`] = {
|
||||
'question':qa[q].displayName,
|
||||
'answer':""
|
||||
};
|
||||
totalQuestion++;
|
||||
}
|
||||
}
|
||||
finalFormData['security_question_answer'] = qa_assoc;
|
||||
console.log('qa', 'key ', finalFormData)
|
||||
return {
|
||||
formData: finalFormData,
|
||||
answers:{},
|
||||
totalQuestion:totalQuestion,
|
||||
isNotValid:true,
|
||||
message: [
|
||||
"All fields are required"
|
||||
],
|
||||
}
|
||||
},
|
||||
props: {
|
||||
questionAnswer: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
// close() {
|
||||
// this.$emit('close');
|
||||
// },
|
||||
radioButtonEvent(event,counter){
|
||||
this.isNotValid = true;
|
||||
if(this.totalQuestion == Object.keys(this.answers).length){
|
||||
console.log('correct')
|
||||
this.isNotValid = false;
|
||||
}
|
||||
},
|
||||
getQuestionCounter(key){
|
||||
let result = "";
|
||||
|
||||
if(key){
|
||||
result = key.replace('question','')
|
||||
}
|
||||
|
||||
return result > 0 ? result : 0;
|
||||
},
|
||||
async submitQuestion (){
|
||||
if(!this.isNotValid) {
|
||||
const userData = JSON.parse(getLocalStorage('formData')) || [];
|
||||
this.formData.email = userData.email;
|
||||
this.formData.customerToken = getCustomerToken();
|
||||
this.formData.trackingToken = getTrackingToken();
|
||||
this.formData.referenceNumber = getReferenceNumber();
|
||||
let security_question_answer = this.formData.security_question_answer
|
||||
for(let ans in this.answers){
|
||||
security_question_answer[ans].answer = this.answers[ans];
|
||||
}
|
||||
|
||||
this.formData.security_question_answer = security_question_answer;
|
||||
}
|
||||
/*console.log('dddd',this.formData);
|
||||
return false*/
|
||||
// this.formData.questionAnswer = this.questionAnswer;
|
||||
const data = await register.postIdentityQuestion(this.formData);
|
||||
if (data.status_code == "100") {
|
||||
unsetCustomerToken();
|
||||
unsetTrackingToken();
|
||||
unsetReferenceNumber();
|
||||
unsetLocalStorage('formData');
|
||||
setStep(6);
|
||||
router.push({name: "success"});
|
||||
// setLocalStorage('userQuestionAnswer', JSON.stringify(this.formData));
|
||||
// setStep(5);
|
||||
// router.push({name: "make-payment"});
|
||||
}else {
|
||||
this.message[0] = data.message;
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
validations() {
|
||||
return {
|
||||
formData: {
|
||||
question1:{required},
|
||||
question2:{required},
|
||||
question3:{required},
|
||||
answer1:{required},
|
||||
answer2:{required},
|
||||
answer3:{required},
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal {
|
||||
width: 650px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 2px 2px 20px 1px;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.modal-header,
|
||||
.modal-footer {
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
position: relative;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
color: #4AAE9B;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: 1px solid #eeeeee;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
margin: 0px 20px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
position: relative;
|
||||
padding: 0px 10px 10px 10px;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
color: #4AAE9B;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
color: white;
|
||||
background: #4AAE9B;
|
||||
border: 1px solid #4AAE9B;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.fieldset-body{
|
||||
height:400px;
|
||||
overflow: auto;
|
||||
padding: 0px 20px;
|
||||
border-radius: 10px;
|
||||
margin: 0px 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
138
resources/js/components/partials/sc_partner_cz_logo.vue
Normal file
138
resources/js/components/partials/sc_partner_cz_logo.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<ul class="sc-partner-cz-logo brand-list list-inline">
|
||||
<li class="brand-parent" v-if="reportProvider === '3'" >
|
||||
<a class="brand-link" href="https://www.smartcredit.com">
|
||||
<img :src="`${img_url}`" alt="SmartCredit" class="brand-logo">
|
||||
</a>
|
||||
</li>
|
||||
<li class="hidden-xs" v-if="reportProvider === '3'" ><div class="separator"></div></li>
|
||||
<li class="partner-text hidden-xs" v-if="reportProvider === '3'" ><p>Partnered<br>with</p></li>
|
||||
<li class="brand-parent cobrand-parent hidden-xs">
|
||||
<a class="brand-link" data-trigger="focus" tabindex="0" data-original-title="" title="">
|
||||
<img src="https://cdn.consumerdirect.com/live/cobrand/11885/logo-uwq6q8hx.png" alt="" class="brand-logo" data-pagespeed-url-hash="4237170943" data-pagespeed-onload="pagespeed.CriticalImages.checkImageForCriticality(this);" onload="var elem=this;if (this==window) elem=document.body;elem.setAttribute('data-pagespeed-loaded', 1)" data-pagespeed-loaded="1">
|
||||
</a>
|
||||
</li>
|
||||
<li class="partner-text hidden-xs" v-if="reportProvider === '1'" ><p> Powerful Software System </p></li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "sc_partner_cz_logo",
|
||||
data(){
|
||||
return {
|
||||
reportProvider: REPORT_PROVIDER,
|
||||
image_base_url: APP_URL,
|
||||
img_url : APP_URL+'/images/'+APP_NAME+'_logo.png',
|
||||
company_Name:COMPANY_NAME
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media (min-width: 768px) {
|
||||
.sc-partner-cz-logo .brand-list {
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.sc-partner-cz-logo .separator {
|
||||
border-right: 1px solid #ccc;
|
||||
display: inline-block;
|
||||
height: 36px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sc-partner-cz-logo{
|
||||
display: inherit;
|
||||
list-style: none;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
.sc-partner-cz-logo .brand-list {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sc-partner-cz-logo .list-inline {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.sc-partner-cz-logo .brand-parent {
|
||||
height: 56px;
|
||||
position: relative;
|
||||
width: 187px;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.sc-partner-cz-logo .brand-link {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
-o-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.sc-partner-cz-logo .brand-logo {
|
||||
display: inline;
|
||||
height: auto;
|
||||
width: 167px;
|
||||
}
|
||||
|
||||
.sc-partner-cz-logo.brand-list li {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.sc-partner-cz-logo.brand-list .partner-text {
|
||||
padding-right: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sc-partner-cz-logo.brand-list .cobrand-parent {
|
||||
padding-left: 0;
|
||||
}
|
||||
.sc-partner-cz-logo.brand-list li {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.sc-partner-cz-logo .brand-parent {
|
||||
height: 56px;
|
||||
position: relative;
|
||||
width: 187px;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.sc-partner-cz-logo.list-inline > li {
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.sc-partner-cz-logo.brand-list .partner-text {
|
||||
padding-right: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sc-partner-cz-logo .partner-text p {
|
||||
font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
|
||||
font-size: 65% !important;
|
||||
font-style: italic !important;
|
||||
line-height: 10px !important;
|
||||
margin-bottom: 0 !important;
|
||||
padding: 17px 0 !important;
|
||||
padding-right: 10px !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.sc-partner-cz-logo.list-inline > li {
|
||||
display: inline-block;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.sc-partner-cz-logo .separator {
|
||||
border-bottom: 1px solid #E9E9E9;
|
||||
}
|
||||
</style>
|
||||
28
resources/js/components/partials/step.vue
Normal file
28
resources/js/components/partials/step.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="steps-content">
|
||||
<h3>Step <span v-if="step > 0" class="step-number">{{step}}</span></h3>
|
||||
<p class="step-number-content active">Enter your personal information to get closer to
|
||||
companies.</p>
|
||||
<p class="step-number-content d-none">Get to know better by adding your diploma,certificate and
|
||||
education life.</p>
|
||||
<p class="step-number-content d-none">Help companies get to know you better by telling then about
|
||||
your past experiences.</p>
|
||||
<p class="step-number-content d-none">Add your profile piccture and let companies find youy
|
||||
fast.</p>
|
||||
</div>
|
||||
<ul class="progress-bar">
|
||||
<li :class="{'active':!step || step >= 1}">Create Account</li>
|
||||
<li :class="{'active':step >= 2}">Add Profile</li>
|
||||
<li :class="{'active':step >= 3}">Credit Report</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Step',
|
||||
props: {
|
||||
step: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user