472 lines
22 KiB
Vue
472 lines
22 KiB
Vue
<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>
|