inital commit

resources/js/Api/auth.js

@@ -0,0 +1,11 @@
+import axiosClient from './../config/axios';
+
+export default {
+  login(user) {
+    return axiosClient.post('/login', {
+      email: user.email,
+      password: user.password,
+      lang: 'en'
+    })
+  }
+}

resources/js/Api/register.js

@@ -0,0 +1,39 @@
+import axiosClient from '@/config/axios';
+
+export default {
+    createAccount(account) {
+        return axiosClient.post('/create/account', account)
+    },
+    addProfile(data) {
+        return axiosClient.post(`/add/profile`, data)
+    },
+    getUserInfo(){
+        return axiosClient.get(`get-user-info`);
+    },
+    importCreditReportByEmail(data){
+        return axiosClient.post(`import/credit-report`,data);
+    },
+    makePayment(data){
+        return axiosClient.post(`make/payment`,data);
+    },
+    makePayments(data){
+        return axiosClient.post(`make/payments`,data);
+    },
+    getSecurityQuestion(){
+        return axiosClient.get(`get/security_question`);
+    },
+    customerCreateAndUpdate(data){
+        return axiosClient.post(`create/customer`,data);
+    },
+    verifyProfile(data){
+        return axiosClient.post(`customer/profile-verify`,data);
+    },
+    getIdentityQuestion(){
+        return axiosClient.get(`get/identity_question`);
+    },
+    postIdentityQuestion(data){
+        return axiosClient.post(`post/identity_question`,data);
+    },
+
+}
+

resources/js/Validation/useFormValidation.js

@@ -0,0 +1,77 @@
+import { reactive } from "@vue/reactivity";
+import useValidators from './validators'
+
+
+const errors = reactive({});
+const errorMessage = reactive({});
+
+
+export default function useFormValidation() {
+
+
+    const { isEmpty, minLength, isEmail, isNum,isInt,maxLength } = useValidators();
+
+    const validateNameField = (fieldName, fieldValue) => {
+        errors[fieldName] = !fieldValue ? isEmpty(fieldName, fieldValue) : minLength(fieldName, fieldValue, 4)
+    }
+
+    const validateEmailField = (fieldName, fieldValue) => {
+        errors[fieldName] = !fieldValue ? isEmpty(fieldName, fieldValue) : isEmail(fieldName, fieldValue)
+    }
+
+    const validatePhoneField = (fieldName, fieldValue) => {
+        errors[fieldName] = !fieldValue ? isEmpty(fieldName, fieldValue) : isNum(fieldName, fieldValue)
+    }
+
+    const validatePasswordField = (fieldName, fieldValue) => {
+        errors[fieldName] = !fieldValue ? isEmpty(fieldName, fieldValue) : minLength(fieldName, fieldValue, 8)
+    }
+
+    const validate = (rules,messages,fieldName, fieldValue) => {
+        let container = {}
+        container["required"] = isEmpty(fieldName,fieldValue)
+        container["email"] = !fieldValue ? isEmpty(fieldName, fieldValue) : isEmail(fieldName, fieldValue)
+        container["password"] = !fieldValue ? isEmpty(fieldName, fieldValue) : minLength(fieldName, fieldValue,6)
+        container["integer"] = !fieldValue ? isEmpty(fieldName, fieldValue) : isInt(fieldName, fieldValue)
+
+        for (let i in rules){
+            errors[fieldName] = "";
+            let value = rules[i];
+            if(container[value]){
+                errors[fieldName] = container[value];
+                break;
+            }else {
+
+                let splited = value.split(':')
+                if (splited.length == 2) {
+                    container[value] = dyanamicValidation(splited, fieldValue, fieldName)
+                    if(container[value]){
+                        errors[fieldName] = container[value];
+                        break;
+                    }
+                }
+
+            }
+        }
+
+    }
+
+    const dyanamicValidation = (splited,fieldValue,fieldName) => {
+        let result = "";
+        switch (splited[0]){
+            case "min":
+                result = !fieldValue ? isEmpty(fieldName, fieldValue) : minLength(fieldName, fieldValue,splited[1])
+                break;
+            case "max":
+                result = !fieldValue ? isEmpty(fieldName, fieldValue) : maxLength(fieldName, fieldValue,splited[1])
+                break;
+            default:
+                break
+        }
+
+        return result;
+    }
+
+
+    return { errors,validate}
+}

resources/js/Validation/useSubmitButtonState.js

@@ -0,0 +1,18 @@
+import { computed } from "vue";
+
+export default function useSubmitButtonState(user, errors) {
+
+    const isButtonDisabled = computed(() => {
+        let disabled = true;
+        for (let prop in user) {
+            if (!user[prop] || errors[prop]) {
+                disabled = true;
+                break;
+            }
+            disabled = false;
+        }
+        return disabled;
+    });
+
+    return { isButtonDisabled }
+}

resources/js/Validation/validators.js

@@ -0,0 +1,32 @@
+
+export default function useValidators() {
+
+    const isEmpty = (fieldName, fieldValue) => {
+        return !fieldValue ? `The ${fieldName} is required`:"";
+    }
+
+    const minLength = (fieldName, fieldValue, min) => {
+        return fieldValue.length < min ? `The ${fieldName} field must be at least ${min} characters long` : "";
+    }
+
+    const maxLength = (fieldName, fieldValue, max) => {
+        return fieldValue.length > max ? `The ${fieldName} cannot be greater than ${max} characters long` : "";
+    }
+
+    const isEmail = (fieldName, fieldValue) => {
+        let re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return !re.test(fieldValue) ? "The input is not a valid " + fieldName + " address" : "";
+    }
+
+    const isNum = (fieldName, fieldValue) => {
+        let isNum = /^\d+$/.test(fieldValue);
+        return !isNum ? "The " + fieldName + " field only have numbers" : "";
+    }
+
+    const isInt = (fieldName, fieldValue) => {
+        let test = /^\d+$/.test(fieldValue);
+        return !test ? "The " + fieldName + " must be integer" : "";
+    }
+
+    return { isEmpty, minLength, isEmail, isNum,isInt,maxLength}
+}

resources/js/app.js

@@ -0,0 +1,53 @@
+require('./bootstrap');
+import { createApp } from 'vue'
+import App from "./components/App";
+import '../css/loader.css'
+import '../css/spinner.css'
+import '../css/register.css'
+import '../css/payment.css'
+
+import VueSweetalert2 from 'vue-sweetalert2';
+import 'sweetalert2/dist/sweetalert2.min.css';
+import store from "./store";
+// routes
+import router from "./router";
+
+import {setSecurityKey} from "./helper";
+
+// Global component
+import AddProfile from "./components/partials/AddProfile";
+import Step from "./components/partials/step";
+import CreateAccount from "./components/partials/CreateAccount";
+import ChoosePackage from "./components/partials/ChoosePackage";
+import ValidationError from "./components/partials/ValidationError";
+import TextInput from './components/Form/TextInput';
+import SelectInput from './components/Form/SelectInput';
+import TopArea from './components/partials/TopArea';
+
+
+const app = createApp(App);
+
+app.use(store)
+app.use(router)
+app.use(VueSweetalert2);
+//app.use(DisableAutocomplete);
+
+const base_url = API_BASE_URL
+app.config.globalProperties.$base_url = base_url
+app.config.globalProperties.success_code = 100
+//app.config.globalProperties.$loader = `${base_url}/img/ajax-loader.gif`;
+app.config.globalProperties.$loader = `https://i.stack.imgur.com/FhHRx.gif`;
+
+app.component('AddProfile',AddProfile);
+app.component('Step',Step);
+app.component('CreateAccount',CreateAccount);
+app.component('ChoosePackage',ChoosePackage);
+app.component('ValidationError',ValidationError);
+app.component('TextInput',TextInput);
+app.component('SelectInput',SelectInput);
+app.component('TopArea',TopArea);
+
+app.mount('#app');
+
+setSecurityKey(SECURITY_KEY)
+

resources/js/bootstrap.js

@@ -0,0 +1,28 @@
+window._ = require('lodash');
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+window.axios = require('axios');
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo';
+
+// window.Pusher = require('pusher-js');
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: process.env.MIX_PUSHER_APP_KEY,
+//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+//     forceTLS: true
+// });

resources/js/components/App.vue

@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <div id="spinner" v-show="$store.getters['auth/getLoaderStatus']">
+            <div id="loading">
+                <span class="timer-loader">Loading…</span>
+            </div>
+        </div>
+        <router-view/>
+    </div>
+</template>
+<script>
+import {onMounted} from 'vue';
+import {unsetStep} from "../helper";
+
+export default {
+    setup() {
+        onMounted(()=>{
+            unsetStep();
+            localStorage.clear();
+        })
+    },
+}
+</script>
+
+
+
+

resources/js/components/Form/SelectInput.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="input-div">
+        <select
+            :class="className"
+            @input="$emit('update:modelValue', $event.target.value)"
+            v-model="input"
+            @change="validateInput"
+        >
+        <option v-if="empty" value="" disabled>{{empty}}</option>
+        <option :key="item.id" v-for="item in items" :value="item.id">{{item.value}}</option>
+        </select>
+        <ValidationError :msg="errors[name]"/>
+    </div>
+</template>
+
+<script>
+import { ref } from "vue";
+import useFormValidation from "@/Validation/useFormValidation";
+export default {
+    props:{
+        className:String|Object,
+        placeholder:String,
+        rules:Array,
+        items:Array,
+        empty:String
+
+    },
+    setup(props) {
+        let input = ref("");
+        const name = props.placeholder
+        const { validate, errors} = useFormValidation();
+        const validateInput = () => {
+            validate(props.rules,{},name, input.value);
+        };
+
+        if(props.errormsg){
+            errors[name] = props.errormsg
+        }
+        console.log("errors[name]",errors);
+        return { input,name, errors, validateInput };
+    },
+};
+</script>

resources/js/components/Form/TextInput.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="input-div">
+        <input
+            autocomplete="off"
+            :class="className"
+            :placeholder="placeholder"
+            :type="type"
+            @input="$emit('update:modelValue', $event.target.value)"
+            v-model="input"
+            @keyup="validateInput"
+            @blur="validateInput"
+        />
+        <ValidationError :backend="backend" :msg="messages"/>
+    </div>
+</template>
+
+<script>
+import {reactive, ref} from "vue";
+import useFormValidation from "@/Validation/useFormValidation";
+export default {
+    props:{
+        className:String|Object,
+        placeholder:String,
+        type:String,
+        rules:Array,
+        backend:String,
+        errors:Array
+    },
+    setup(props) {
+        let input = ref("");
+        let messages = ref([])
+        const name = props.placeholder
+
+        //const { validate, errors} = useFormValidation();
+
+        const validateInput = () => {
+            messages.value = []
+            if(props.errors[0]) {
+                messages.value.push(props.errors[0])
+            }
+        }
+        //console.log('ccc',messages)
+        return { input,name,messages,validateInput };
+    }
+
+};
+</script>

resources/js/components/partials/AddProfile.vue

@@ -0,0 +1,513 @@
+<template>
+    <div class="container">
+        <div class="card">
+            <div class="form">
+                <div class="left-side">
+                    <div class="left-heading">
+                        <h3>{{appName}}</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">
+                                <h2> {{company_Name}}
+                                    <span v-if="reportProvider==='3'"> Partnered with {{reportProviders.labels[reportProvider]}}</span>
+                                    <span v-if="reportProvider==='1'"> Powerful Software System </span>
+                                </h2>
+                                <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,
+                is_free:IS_FREE,
+            },
+            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];
+    },
+    methods: {
+        async makePayment() {
+
+            if(this.formData.is_free === "1") {
+                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 {
+
+                const data = await register.verifyProfile(this.formData);
+                if (data.status_code == "100") {
+
+                    this.formData.full_name = this.formData.first_name + ' ' + this.formData.last_name;
+                    this.formData.address = this.formData.street_no + ' ' + this.formData.street_name;
+                    this.prepareformData = this.formData;
+                    setLocalStorage('formData', JSON.stringify(this.formData));
+                    this.errors = {};
+                    this.showModal();
+
+                }else{
+                    this.message = [data.message];
+                    this.errors = data.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, #54c7dc 0%, #4361c2 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>

resources/js/components/partials/ChoosePackage.vue

@@ -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>

resources/js/components/partials/CreateAccount.vue

@@ -0,0 +1,240 @@
+<template>
+    <div class="container">
+        <div class="card">
+            <div class="form">
+                <div class="left-side">
+                    <div class="left-heading">
+                        <h3>{{appName}}</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">
+                                <h2>Creating your account only takes a few seconds.</h2>
+                                <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,
+                is_free:IS_FREE,
+            },
+            siteKey:GOOGLE_CAPTCHA_SITEKEY,
+            message:"",
+            errors:{},
+            errorMsg:{},
+            isButtonDisabled:true,
+            package:pkg,
+            appName : APP_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(){
+            this.formData.is_free = IS_FREE;
+            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>
+
+

resources/js/components/partials/CreateCreditReportAccount.vue

@@ -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>

resources/js/components/partials/Footer.vue

@@ -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>
+

resources/js/components/partials/IdentityIQPkg.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="smart-credit-pkg">
+        <div class="link-area">
+            <a href='#' @click="goToLogin">
+                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 v-if="is_free !== '1'"> ${{package.prices[package_id]}}/mo  </h4>
+                <h3 v-if="is_free === '1'" style="color: red"> Free Limited Time  </h3>
+                <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 v-if="is_free === '1'" style="margin-top: 100px">-->
+<!--            <img :src="`${freesignup_img_url}`" alt="SmartCredit" class="provider-logo" style="width: 350px;height: 600px">-->
+<!--        </div>-->
+    </div>
+</template>
+
+<script>
+import pkg from "../../helper/package";
+import reportProviders from "../../helper/report_provider";
+import {unsetStep} from "../../helper";
+
+export default {
+    props:{
+        package_id:{
+            required:true
+        },
+    },
+    data(){
+        return {
+            is_free: IS_FREE,
+            package:pkg,
+            app_base_url: APP_URL,
+            reportProviders : reportProviders,
+            img_url : APP_URL+'/images/'+APP_NAME+'_logo.png',
+            company_Name:COMPANY_NAME,
+            freesignup_img_url:APP_URL+'/images/'+'freesignup.png'
+        }
+    },
+    methods: {
+        async goToLogin() {
+            unsetStep();
+            localStorage.clear();
+            window.location.href = `${this.app_base_url}/login`;
+        }
+    }
+}
+</script>
+<style>
+
+@import url("./../../../css/smartcredit.css");
+
+</style>

resources/js/components/partials/IdentityIqLogo.vue

@@ -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>

resources/js/components/partials/MakePayment.vue

@@ -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 Zombies 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, #54c7dc 0%, #4361c2 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>

resources/js/components/partials/PaymentModal.vue

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

resources/js/components/partials/SmartCreditLogo.vue

@@ -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>

resources/js/components/partials/SmartCreditPkg.vue

@@ -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 &amp;
+                        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 &amp; 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
+                    &amp; 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>

resources/js/components/partials/SmartCreditPkgView.vue

@@ -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>

resources/js/components/partials/Success.vue

@@ -0,0 +1,133 @@
+<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" v-if="is_free !== '1'">
+                            <h2 style="color:purple">Congratulations!</h2>
+                            <p style="color:purple">Your purchase for ${{ package.prices[package_id] }}({{ package.labels[package_id] }}) went though. </p>
+                            <p style="color:purple">This is a reoccurring payment that you authorized.</p>
+                            <p style="color:purple">Important you will see a charge form <span style="font-size: large !important;"> Clickletters LLC </span>  </p>
+                            <p style="color:purple">on your bank statement each month or until you cancel.</p>
+                        </div>
+                        <div class="text congrats" v-if="is_free === '1'">
+                            <h2 style="color:purple">Congratulations!</h2>
+                        </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 {
+            is_free: IS_FREE,
+            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`;
+        },
+    }
+}
+
+
+
+</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>

resources/js/components/partials/TopArea.vue

@@ -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>

resources/js/components/partials/ValidationError.vue

@@ -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>

resources/js/components/partials/modal.vue

@@ -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>
+
+

resources/js/components/partials/sc_partner_cz_logo.vue

@@ -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>

resources/js/components/partials/step.vue

@@ -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>

resources/js/config/axios.js

@@ -0,0 +1,85 @@
+import axios from "axios"
+import router from "../router";
+import store from "../store";
+import {getSecurityKey} from "../helper";
+
+
+const axiosClient = axios.create({
+  baseURL: API_BASE_URL
+});
+
+const actionScope = `loading`;
+
+let requestsPending = 0;
+
+const req = {
+  pending: () => {
+    requestsPending++;
+    store.dispatch('auth/setLoader', true)
+  },
+  done: () => {
+    requestsPending--;
+    store.dispatch('auth/setLoader', false)
+  }
+};
+axiosClient.interceptors.request.use(function (config) {
+  req.pending();
+
+  const security_key = getSecurityKey();
+
+  if(security_key) {
+      config.headers['security-key'] = security_key;
+  }
+/*  const token = getToken();
+
+  config.headers.Authorization = 'Bearer ' + token;
+  config.headers['Content-Type'] = 'application/json';
+  config.headers['Accept'] = 'application/json';
+  config.headers['Permission-Version'] = store.getters['auth/user']?.permission_version;*/
+  console.log('resquest.success', config);
+  //console.log('request loader_status', store.getters['auth/getLoaderStatus']);
+
+  return config;
+
+}, function (error) {
+  req.done();
+  console.log('resquest.error', error);
+  return Promise.reject(error);
+});
+
+axiosClient.interceptors.response.use(
+  response => {
+    req.done();
+    console.log('response.success', response);
+    console.log('response loader_status', store.getters['auth/getLoaderStatus']);
+
+    return response.data;
+  },
+  async error => {
+    req.done();
+    console.log('resquest.error', error);
+
+    var originalRequest = error.config;
+
+    /*if (error.response.status == 500) {
+      router.push({ name: 'error-500' })
+    } else if (error.response.status == 401 && !originalRequest._retry) {
+
+
+      if (getRefreshToken()) {
+        const response = await store.dispatch('auth/authenticateWithRefreshToken')
+        if (isApiSuccess(response)) {
+          originalRequest._retry = true;
+          return axiosClient(originalRequest);
+        }
+      }
+
+      store.dispatch('auth/logout')
+      router.push({ name: 'error-401' })
+    }*/
+
+    return Promise.reject(error);
+  }
+);
+
+export default axiosClient

resources/js/config/constants.js

@@ -0,0 +1 @@
+export const GOOGLE_CAPTCHA_SITEKEY = "6Lei2nQhAAAAAChSi_OiYy63AxlI_vJKm0b-LyN3"

resources/js/helper/index.js

@@ -0,0 +1,368 @@
+import Cookies from 'js-cookie'
+import state from "./state";
+
+export const setCookie = (key,value) =>{
+    Cookies.set(key, value);
+}
+export const getCookie = (key) =>{
+    return Cookies.get(key);
+}
+export const unsetCookie = (key) =>{
+    return Cookies.remove(key);
+}
+export const setLocalStorage = (key,value) =>{
+    localStorage.setItem(key, value);
+}
+export const getLocalStorage = (key) =>{
+    return localStorage.getItem(key);
+}
+export const unsetLocalStorage = (key) =>{
+    return localStorage.removeItem(key);
+}
+
+
+export const getAmount = ()=> {
+    return Cookies.get('amount');
+}
+
+export const setAmount = (amount)=> {
+    Cookies.set('amount', amount);
+}
+
+export const getSecurityKey = ()=> {
+    return getCookie('security_key'); //Cookies.get('security_key');
+}
+
+export const setSecurityKey = (key)=> {
+    setCookie('security_key',key);
+    //Cookies.set('security_key', key);
+}
+
+export const setPackageId = (package_id) => {
+    Cookies.set('package_id', package_id);
+}
+
+export const getPackageId = () => {
+  //return Cookies.get('package_id');
+    return 2;
+}
+
+export const setStep = (step) => {
+    Cookies.set('step', step);
+}
+
+export const getStep = () => {
+    return Cookies.get('step');
+}
+
+export const setToken = (token) => {
+    Cookies.set('access_token', token);
+}
+
+export const unsetStep = () => {
+    Cookies.remove('step');
+}
+
+export const setUserId = (user_id) => {
+    Cookies.set('user_id', user_id);
+}
+
+export const setUserEmail = (email) => {
+    Cookies.set('user_email', email);
+}
+
+export const getUserId = () => {
+    return Cookies.get('user_id');
+}
+
+export const getUserEmail = () => {
+    return Cookies.get('user_email');
+}
+
+
+export const setRefreshToken = (token) => {
+    Cookies.set('refresh_token', token);
+}
+
+export const getToken = () => {
+    return Cookies.get('access_token');
+}
+
+export const getRefreshToken = () => {
+    return Cookies.get('refresh_token');
+}
+
+export const removeToken = () => {
+    Cookies.remove('access_token');
+    Cookies.remove('refresh_token');
+}
+
+export const isApiSuccess = (response) => {
+    return response.statuscode == 100;
+}
+export const setUserFirstName = (name) => {
+    Cookies.set('user_first_name', name);
+}
+export const setUserLastName = (name) => {
+    Cookies.set('user_last_name', name);
+}
+export const setUserPassword = (password) => {
+    Cookies.set('user_password', password);
+}
+export const setFormData = (form_data) => {
+    setCookie('user_input_data',form_data)
+}
+export const getFormData = () => {
+   return getCookie('user_input_data');
+}
+export const unsetFormData = () => {
+    unsetCookie('user_input_data');
+}
+export const setUserQuestionAnswer = (data) => {
+    setCookie('user_answer_data',data)
+}
+export const getUserQuestionAnswer = () => {
+    return getCookie('user_answer_data');
+}
+export const unsetUserQuestionAnswer = () => {
+    unsetCookie('user_answer_data');
+}
+
+export const setCardNumber = (cardNumber) => {
+    Cookies.set('card_number', cardNumber);
+}
+export const setExpiry = (expiry) => {
+    Cookies.set('expiry', expiry);
+}
+export const setFullSsn = (expiry) => {
+    Cookies.set('full_ssn', expiry);
+}
+export const setPhone = (phone) => {
+    Cookies.set('phone',phone);
+}
+export const setZip_Code = (zip_code) => {
+    Cookies.set('zip_code',zip_code);
+}
+export const setStreetNo=(data)=>{
+    Cookies.set('street_no',data);
+}
+export const setStreetName=(data)=>{
+    Cookies.set('street_name',data);
+}
+export const setCity=(data)=>{
+    Cookies.set('city',data);
+}
+export const setState=(data)=>{
+    Cookies.set('state',data);
+}
+export const setBirthDate=(data)=>{
+    Cookies.set('birth_date',data);
+}
+export const setQuestionId=(data)=>{
+    Cookies.set('question_id',data);
+}
+export const setAnswer=(data)=>{
+    Cookies.set('answer',data);
+}
+
+export const getFullSsn = () => {
+    return Cookies.get('full_ssn');
+}
+export const getUserFirstName = () => {
+    return Cookies.get('user_first_name');
+}
+export const getUserLastName = () => {
+    return Cookies.get('user_last_name');
+}
+export const getUserPassword = () => {
+    return Cookies.get('user_password');
+}
+
+export const getCardNumber = () => {
+    return   Cookies.get('card_number');
+}
+export const getExpiry = () => {
+    return Cookies.get('expiry');
+}
+export const getPhone = () => {
+    return   Cookies.get('phone');
+}
+export const getZip_Code = () => {
+    return Cookies.get('zip_code');
+}
+
+export const getStreetNo=()=>{
+    Cookies.get('street_no');
+}
+export const getStreetName=()=>{
+    Cookies.get('street_name');
+}
+export const getCity=()=>{
+    Cookies.get('city');
+}
+export const getState=()=>{
+    Cookies.get('state');
+}
+export const getBirthDate=()=>{
+    Cookies.get('birth_date');
+}
+export const getQuestionId=()=>{
+    Cookies.get('question_id');
+}
+export const getAnswer=()=>{
+    Cookies.get('answer');
+}
+
+export const setTrackingToken = (value) => {
+    Cookies.set('tracking_token', value);
+}
+
+export const getTrackingToken = () => {
+    return Cookies.get('tracking_token');
+}
+export const unsetTrackingToken = () => {
+    Cookies.remove('tracking_token');
+}
+
+
+export const setCustomerToken = (value) => {
+    Cookies.set('customer_token', value);
+}
+export const getCustomerToken = () => {
+    return Cookies.get('customer_token');
+}
+export const unsetCustomerToken = () => {
+    Cookies.remove('customer_token');
+}
+
+export const setReferenceNumber = (value) => {
+    Cookies.set('reference_number', value);
+}
+export const getReferenceNumber = () => {
+    return Cookies.get('reference_number');
+}
+export const unsetReferenceNumber = () => {
+    Cookies.remove('reference_number');
+}
+
+
+export const unsetUserFirstName = () => {
+    Cookies.remove('user_first_name');
+}
+export const unsetUserLastName = () => {
+    Cookies.remove('user_last_name');
+}
+export const unsetUserEmail = () => {
+    Cookies.remove('user_email');
+}
+export const unsetUserPassword = () => {
+    Cookies.remove('user_password');
+}
+
+export const unsetExpiry = () => {
+    Cookies.remove('expiry');
+}
+export const unsetCardNumber = () => {
+    Cookies.remove('card_number');
+}
+export const unsetFullSsn = () => {
+    Cookies.remove('full_ssn');
+}
+
+export const unsetStreetNo=()=>{
+    Cookies.remove('street_no');
+}
+export const unsetStreetName=()=>{
+    Cookies.remove('street_name');
+}
+export const unsetCity=()=>{
+    Cookies.remove('city');
+}
+export const unsetState=()=>{
+    Cookies.remove('state');
+}
+export const unsetBirthDate=()=>{
+    Cookies.remove('birth_date');
+}
+export const unsetQuestionId=()=>{
+    Cookies.remove('question_id');
+}
+export const unsetAnswer=()=>{
+    Cookies.remove('answer');
+}
+
+export const generateSidebarMenuItems = () => {
+    return [
+        {
+            title: "Dashboard",
+            route: "dashboard",
+            icon_classes: "sidebar-item-icon ti-home",
+            permit: true,
+            is_active: isSameRoute('dashboard')
+        },
+        {
+            title: "Merchants",
+            route: "merchants",
+            icon_classes: "sidebar-item-icon fa fa-users",
+            permit: true,
+            is_active: isSameRoute('merchants')
+        },
+        {
+            title: "Transactions",
+            aria_expands: ["all-transactions", "refunds", "chargeback"].includes(router.currentRoute.value.name),
+            sub_routes: ["all-transactions", "refunds", "chargeback"],
+            submenu: [
+                {
+                    title: "All Transactions",
+                    route: "all-transactions",
+                    permit: hasPermission(constants.permissions.show_all_transaction_of_merchant),
+                    is_active: isSameRoute('all-transactions')
+                },
+                {
+                    title: "Refunds",
+                    route: "refunds",
+                    permit: hasPermission(constants.permissions.show_merchant_refunds),
+                    is_active: isSameRoute('refunds')
+                },
+                {
+                    title: "Chargeback",
+                    route: "chargeback",
+                    permit: hasPermission(constants.permissions.show_merchant_chargebacks),
+                    is_active: isSameRoute('chargeback')
+                },
+            ],
+            permit: true,
+        },
+        {
+            title: "Information",
+            route: "information",
+            icon_classes: "sidebar-item-icon ti-info",
+            permit: true,
+            is_active: isSameRoute('information')
+        },
+    ]
+}
+
+export const hasPermission = (permission) => {
+    return store.getters['auth/getPermissions'][permission?.code]?.permit
+}
+
+export const getCurrentRouteQueries = (queriesProxy) => {
+    return Object.assign({}, queriesProxy)
+}
+
+export const isSameRoute = (route_name) => {
+    return router.currentRoute.value.name === route_name
+}
+
+export const getFormattedDaterangeFromDates = (start_date = new Date(new Date().setDate(new Date().getDate() - 30)), end_date = new Date()) => {
+    return `${start_date.getFullYear()}/${start_date.getMonth() + 1}/${start_date.getDate()} - ${end_date.getFullYear()}/${end_date.getMonth() + 1}/${end_date.getDate()}`
+}
+
+export const showNotification = (action, message, type = "default") => {
+    notify({
+        title: action,
+        text: message,
+        type: type
+    });
+}

resources/js/helper/package.js

@@ -0,0 +1,17 @@
+export default {
+    labels:{
+        "1":"Basic",
+        "2":"Premium",
+        "3":"",
+    },
+    prices:{
+        "1":"19.97",
+        "2":"24.97",
+        "3":"14.99"
+    },
+    updateLimit:{
+        "1":"2 monthly",
+        "2":"Unlimited",
+        "3":"",
+    }
+}

resources/js/helper/packagePrices.js

@@ -0,0 +1,5 @@
+export default {
+    "1":"99.7",
+    "2":"29.00",
+    "3":"14.99"
+}

resources/js/helper/report_provider.js

@@ -0,0 +1,28 @@
+export default {
+    labels:{
+        "3":"SmartCredit",
+        "1":"Identity IQ",
+
+    },
+    SmartCreditPoints : [
+                             "Identity Theft Insurance ($1m)",
+                             "Credit Monitoring & Alerts (TU)",
+                            "ScoreTracker" ,
+                            "ScoreBuilder",
+                             "ScoreBoost",
+                            "Money Manager",
+                             "Smart Credit Report",
+                             "PrivacyMaster"
+                         ],
+
+    IdentityIQPoints : [
+        "Access to the powerful proprietary Metro 2 Method 5 points of Compliance process",
+        "Auto-import software systems",
+        "Full library of training" ,
+        "Auto load letters",
+        "Auto import items into letters",
+        "Processing reminder system",
+        "Customer support",
+        "Facebook group help"
+    ],
+}

resources/js/helper/securityQuestion.js

@@ -0,0 +1,135 @@
+export default {
+    security_question: [
+        {
+            "id": "",
+            "value": "Please select security question"
+        },
+    {
+        "id": "1",
+        "value": "What was your high school mascot?"
+    },
+        {
+            "id": "2",
+            "value": "What was your first grade teacher's last name?"
+        },
+        {
+            "id": "3",
+            "value": "What was the make and model of your first car?"
+        },
+        {
+            "id": "4",
+            "value": "What is your mother's middle name?"
+        }, {
+            "id": "5",
+            "value": "What is your father's middle name?"
+        },
+        {
+            "id": "6",
+            "value": "What city were you born in?"
+        },
+        {
+            "id": "7",
+            "value": "What is your grandmother's first name (on your mother's side)?"
+        },
+        {
+            "id": "8",
+            "value": "What is your grandfather's first name (on your father's side)?"
+        }],
+    security_question_answer:{
+        '1':{'1':'1980','2':'1969','3':'2012','4':'2003','5':'None of the above'},
+        '2':{ '6':'Experian','7':'ConsumerDirect','8':'Equifax','9':'TransUnion','10':'None of the above'},
+        '3':{'11':'J. C. R. Licklider','12':'George Clooney','13':'Al Gore','14':'Howard Stark','15':'None of the above'},
+    },
+    security_question_and_answer: {
+    "idVerificationCriteria": {
+    "referenceNumber": "07271524018421870957",
+        "question1": {
+        "name": "YEAR_FOUNDED",
+            "displayName": "What year was ConsumerDirect (aka PathwayData, aka MyPerfectCredit) founded?",
+            "type": "MC",
+            "choiceList": {
+            "choice": [
+                {
+                    "key": "1980",
+                    "display": "1980"
+                },
+                {
+                    "key": "1969",
+                    "display": "1969"
+                },
+                {
+                    "key": "2012",
+                    "display": "2012"
+                },
+                {
+                    "key": "2003",
+                    "display": "2003"
+                },
+                {
+                    "key": "!(1980^1969^2012^2003)",
+                    "display": "None of the above"
+                }
+            ]
+        }
+    },
+    "question2": {
+        "name": "NOT_CREDIT_BUREAU",
+            "displayName": "Which company is NOT a credit bureau?",
+            "type": "MC",
+            "choiceList": {
+            "choice": [
+                {
+                    "key": "Experian",
+                    "display": "Experian"
+                },
+                {
+                    "key": "ConsumerDirect",
+                    "display": "ConsumerDirect"
+                },
+                {
+                    "key": "Equifax",
+                    "display": "Equifax"
+                },
+                {
+                    "key": "TransUnion",
+                    "display": "TransUnion"
+                },
+                {
+                    "key": "!(Experian^ConsumerDirect^Equifax^TransUnion^)",
+                    "display": "None of the above"
+                }
+            ]
+        }
+    },
+    "question3": {
+        "name": "INVENTED_INTERNET",
+            "displayName": "Who invented the internet?",
+            "type": "MC",
+            "choiceList": {
+            "choice": [
+                {
+                    "key": "J. C. R. Licklider",
+                    "display": "J. C. R. Licklider"
+                },
+                {
+                    "key": "George Clooney",
+                    "display": "George Clooney"
+                },
+                {
+                    "key": "Al Gore",
+                    "display": "Al Gore"
+                },
+                {
+                    "key": "Howard Stark",
+                    "display": "Howard Stark"
+                },
+                {
+                    "key": "!(J. C. R. Licklider^George Clooney^Al Gore^Howard Stark^)",
+                    "display": "None of the above"
+                }
+            ]
+        }
+    }
+}
+}
+}

resources/js/helper/state.js

@@ -0,0 +1,230 @@
+export default [
+    {
+        "id": "AA",
+        "value": "AA"
+    },
+    {
+        "id": "AE",
+        "value": "AE"
+    },
+    {
+        "id": "AL",
+        "value": "AL"
+    },
+    {
+        "id": "AK",
+        "value": "AK"
+    },
+    {
+        "id": "AP",
+        "value": "AP"
+    },
+    {
+        "id": "AR",
+        "value": "AR"
+    },
+    {
+        "id": "AZ",
+        "value": "AZ"
+    },
+    {
+        "id": "CA",
+        "value": "CA"
+    },
+    {
+        "id": "CO",
+        "value": "CO"
+    },
+    {
+        "id": "CT",
+        "value": "CT"
+    },
+    {
+        "id": "DC",
+        "value": "DC"
+    },
+    {
+        "id": "DE",
+        "value": "DE"
+    },
+    {
+        "id": "FL",
+        "value": "FL"
+    },
+    {
+        "id": "GA",
+        "value": "GA"
+    },
+    {
+        "id": "GU",
+        "value": "GU"
+    },
+    {
+        "id": "HI",
+        "value": "HI"
+    },
+    {
+        "id": "IA",
+        "value": "IA"
+    },
+    {
+        "id": "ID",
+        "value": "ID"
+    },
+    {
+        "id": "IL",
+        "value": "IL"
+    },
+    {
+        "id": "IN",
+        "value": "IN"
+    },
+    {
+        "id": "KS",
+        "value": "KS"
+    },
+    {
+        "id": "KY",
+        "value": "KY"
+    },
+    {
+        "id": "LA",
+        "value": "LA"
+    },
+    {
+        "id": "MA",
+        "value": "MA"
+    },
+    {
+        "id": "MD",
+        "value": "MD"
+    },
+    {
+        "id": "ME",
+        "value": "ME"
+    },
+    {
+        "id": "MI",
+        "value": "MI"
+    },
+    {
+        "id": "MN",
+        "value": "MN"
+    },
+    {
+        "id": "MO",
+        "value": "MO"
+    },
+    {
+        "id": "MS",
+        "value": "MS"
+    },
+    {
+        "id": "MT",
+        "value": "MT"
+    },
+    {
+        "id": "NC",
+        "value": "NC"
+    },
+    {
+        "id": "ND",
+        "value": "ND"
+    },
+    {
+        "id": "NE",
+        "value": "NE"
+    },
+    {
+        "id": "NH",
+        "value": "NH"
+    },
+    {
+        "id": "NJ",
+        "value": "NJ"
+    },
+    {
+        "id": "NM",
+        "value": "NM"
+    },
+    {
+        "id": "NV",
+        "value": "NV"
+    },
+    {
+        "id": "NY",
+        "value": "NY"
+    },
+    {
+        "id": "OK",
+        "value": "OK"
+    },
+    {
+        "id": "OH",
+        "value": "OH"
+    },
+    {
+        "id": "OR",
+        "value": "OR"
+    },
+    {
+        "id": "PA",
+        "value": "PA"
+    },
+    {
+        "id": "PR",
+        "value": "PR"
+    },
+    {
+        "id": "RI",
+        "value": "RI"
+    },
+    {
+        "id": "SC",
+        "value": "SC"
+    },
+    {
+        "id": "SD",
+        "value": "SD"
+    },
+    {
+        "id": "TN",
+        "value": "TN"
+    },
+    {
+        "id": "TX",
+        "value": "TX"
+    },
+    {
+        "id": "UT",
+        "value": "UT"
+    },
+    {
+        "id": "VA",
+        "value": "VA"
+    },
+    {
+        "id": "VI",
+        "value": "VI"
+    },
+    {
+        "id": "VT",
+        "value": "VT"
+    },
+    {
+        "id": "WA",
+        "value": "WA"
+    },
+    {
+        "id": "WI",
+        "value": "WI"
+    },
+    {
+        "id": "WV",
+        "value": "WV"
+    },
+    {
+        "id": "WY",
+        "value": "WY"
+    }
+];

resources/js/router/index.js

@@ -0,0 +1,80 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import routes from './routes'
+import store from './../store'
+import {getStep} from "../helper";
+
+const router = createRouter({
+  history: createWebHistory(APP_BASE_ROUTE),
+  routes: routes
+})
+
+function isAuthenticated() {
+  return store.getters['auth/authenticated'];
+}
+
+router.beforeEach((to, from, next) => {
+  /*if (!isAuthenticated() && to.matched.some(record => record.meta.requires_auth)) {
+    next({ name: 'login' })
+  } else if (isAuthenticated() && to.matched.some(record => record.meta.is_auth_route)) {
+    next({ name: 'dashboard' })
+  }
+
+  next()*/
+    const step = getStep();
+   // console.clear()
+   // console.log(from.path,to.path)
+    if(to.name == "add-profile"){
+        if(!step){
+            next({name:'create-account'})
+        }else if(step == 3){
+            next({name:'choose-package'})
+        }else if(step == 4){
+            next({name:'create-cr-account'})
+        }
+    }else if(to.name == "choose-package"){
+        if(!step){
+            next({name:'create-account'})
+        }else if(step == 2){
+            next({name:'add-profile'})
+        }else if(step == 4){
+            next({name:'create-cr-account'})
+        }
+    }else if(to.name == "create-account") {
+        if(step == 2){
+            next({name:'add-profile'})
+        }else if(step == 3){
+            next({name:'choose-package'})
+        }else if(step == 4){
+            next({name:'create-cr-account'})
+        }
+    }else if(to.name == "success"){
+        if(!step){
+            next({name:'create-account'})
+        }
+    }else if(to.name == "create-cr-account"){
+        if(!step){
+            next({name:'create-account'})
+        }else if(step == 2){
+            next({name:'add-profile'})
+        }else if(step == 3){
+            next({name:'choose-package'})
+        }else if(step == 5){
+            next({name:'make-payment'})
+        }
+    }else if(to.name == "make-payment"){
+        if(!step){
+            next({name:'create-account'})
+        }else if(step == 2){
+            next({name:'add-profile'})
+        }else if(step == 3){
+            next({name:'choose-package'})
+        }else if(step == 4){
+            next({name:'create-cr-account'})
+        }
+    }
+
+    next()
+
+})
+
+export default router

resources/js/router/routes.js

@@ -0,0 +1,63 @@
+import CreateAccount from "../components/partials/CreateAccount";
+import AddProfile from "../components/partials/AddProfile";
+import ChoosePackage from "../components/partials/ChoosePackage";
+import CreateCreditReportAccount from "../components/partials/CreateCreditReportAccount";
+import Success from "../components/partials/Success";
+import MakePayment from "../components/partials/MakePayment";
+
+const routes = [
+    {
+        path: '/',
+        redirect: { name: 'create-account' }
+    },
+  {
+    path: '/create/account',
+    name: 'create-account',
+    component: CreateAccount,
+    meta: {
+        is_step: false
+    },
+  },
+  {
+    path: '/add/profile',
+    name: 'add-profile',
+    component: AddProfile,
+    meta: {
+        is_step: true
+    },
+  },
+  {
+    path: '/choose/package',
+    name: 'choose-package',
+    component: ChoosePackage,
+    meta: {
+        is_step: true
+    },
+  },
+    {
+        path: '/create/cr-account',
+        name: 'create-cr-account',
+        component: CreateCreditReportAccount,
+        meta: {
+            is_step: true
+        },
+    },
+    {
+        path: '/success',
+        name: 'success',
+        component: Success,
+        meta: {
+            is_step: true
+        },
+    },
+    {
+        path: '/make/payment',
+        name: 'make-payment',
+        component: MakePayment,
+        meta: {
+            is_step: true
+        },
+    },
+]
+
+export default routes;

resources/js/store/auth/actions.js

@@ -0,0 +1,105 @@
+import axiosClient from '@/config/axios'
+import { removeToken, isApiSuccess, setToken, setRefreshToken, getRefreshToken } from '@/helper'
+
+
+export const login = ({ commit }, formData) => {
+  return axiosClient
+    .post('login', formData)
+    .then(response => {
+
+      if (isApiSuccess(response)) {
+        commit('SET_USER', response.data.user)
+        commit('SET_AUTHENTICATED', false)
+      }
+
+      return Promise.resolve(response)
+    }).catch(exception => {
+      commit('SET_USER', {})
+      commit('SET_AUTHENTICATED', false)
+      console.log('Login Action Exception', exception);
+    })
+}
+
+export const verifyOTP = ({ commit }, formData) => {
+  return axiosClient.post('verifysms', formData)
+    .then(response => {
+
+      if (isApiSuccess(response)) {
+        commit('SET_AUTHENTICATED', true)
+
+        setToken(response.data.access_token)
+        setRefreshToken(response.data.refresh_token)
+      }
+
+      return Promise.resolve(response)
+    }).catch(exception => {
+      console.log('verifyOTP Action Exception', exception);
+    })
+}
+
+export const authenticateWithRefreshToken = ({ commit }) => {
+  return axiosClient.post('refreshtoken', { refresh_token: getRefreshToken() })
+    .then(response => {
+
+      if (isApiSuccess(response)) {
+        commit('SET_AUTHENTICATED', true)
+
+        setToken(response.data.access_token)
+        setRefreshToken(response.data.refresh_token)
+      }
+
+      return Promise.resolve(response)
+    }).catch(exception => {
+      console.log('authenticateWithRefreshToken Action Exception', exception);
+    })
+}
+
+export const resendOTP = ({ commit }, formData) => {
+  return axiosClient.post('resendotp', formData)
+    .then(response => {
+      return Promise.resolve(response)
+    }).catch(exception => {
+      console.log('Login Action Exception', exception);
+    })
+}
+
+export const authUser = ({ commit }) => {
+  return axiosClient.get('get-authinfo')
+    .then(response => {
+      commit('SET_AUTHENTICATED', true)
+      commit('SET_USER', response.data.user)
+      commit('SET_PERMISSIONS', response.data.permissions)
+      return Promise.resolve(response)
+    }).catch(exception => {
+      console.log('Get Auth User Action Exception', exception);
+    })
+}
+
+export const logout = ({ commit }) => {
+  commit('SET_USER', {})
+  commit('SET_AUTHENTICATED', false)
+  removeToken()
+}
+
+export const setLoader = ({ commit }, status) => {
+  commit('SET_LOADER', status)
+}
+
+export const loadPermissions = ({ commit }) => {
+  return axiosClient
+    .get('getpermission')
+    .then(response => {
+      commit('SET_PERMISSIONS', response.data.permissions)
+      return Promise.resolve(response)
+    }).catch(exception => {
+      console.log('Permissions API Exception', exception);
+    })
+}
+
+export const isModalShow = ({ commit }, status) => {
+    commit('SHOW_MODAL', status)
+}
+
+export const userFormData = ({ commit }, value) => {
+    commit('SET_USER_FORM_DATA', value)
+}

resources/js/store/auth/getters.js

@@ -0,0 +1,22 @@
+export const authenticated = (state) => {
+  return state.authenticated
+}
+
+export const user = (state) => {
+  return state.user
+}
+
+export const getLoaderStatus = (state) => {
+  return state.loader;
+}
+
+export const getPermissions = (state) => {
+  return state.permissions;
+}
+
+export const getModalShowStatus = (state) => {
+    return state.isModalShow;
+}
+export const getUserFormData = (state) => {
+    return state.userFormData;
+}

resources/js/store/auth/index.js

@@ -0,0 +1,12 @@
+import state from "./state";
+import * as getters from "./getters";
+import * as mutations from "./mutations";
+import * as actions from "./actions";
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    mutations,
+    actions
+}

resources/js/store/auth/mutations.js

@@ -0,0 +1,22 @@
+export const SET_AUTHENTICATED = (state, value) => {
+  state.authenticated = value
+}
+export const SET_USER = (state, value) => {
+  state.user = value
+}
+
+export const SET_LOADER = (state, value) => {
+  state.loader = value
+}
+
+export const SET_PERMISSIONS = (state, value) => {
+  state.permissions = value
+}
+
+export const SHOW_MODAL = (state, value) => {
+    state.isModalShow = value
+}
+
+export const SET_USER_FORM_DATA = (state, value) => {
+    state.userFormData = value
+}

resources/js/store/auth/state.js

@@ -0,0 +1,8 @@
+export default {
+    authenticated: false,
+    user: {},
+    permissions: {},
+    loader: false,
+    isModalShow: false,
+    userFormData: {}
+}

resources/js/store/dashboard/actions.js

@@ -0,0 +1,55 @@
+import axiosClient from '../../config/axios'
+import { isApiSuccess } from './../../helper'
+
+
+export const load = ({ commit }) => {
+  return axiosClient
+    .get('dashboard')
+    .then(response => {
+
+      if (isApiSuccess(response)) {
+        commit('SET_MERCHANTS', response.data.merchants)
+        commit('SET_ANNOUNCEMENTS', response.data.announcements)
+      }
+
+      return Promise.resolve(response)
+    }).catch(exception => {
+      commit('SET_MERCHANTS', [])
+      commit('SET_ANNOUNCEMENTS', [])
+      console.log('Dashboard Data Load Exception: ', exception);
+    })
+}
+
+export const approveChargebackRequest = ({ commit }, payload) => {
+  return axiosClient
+    .post('chargeback/approve', payload)
+    .then(response => {
+      return Promise.resolve(response)
+    }).catch(exception => {
+      console.log('Approve Chargeback Request Exception: ', exception);
+    })
+}
+
+export const rejectChargebackRequest = ({ commit }, payload) => {
+  return axiosClient
+    .post('chargeback/reject', payload)
+    .then(response => {
+      return Promise.resolve(response)
+    }).catch(exception => {
+      console.log('Reject Chargeback Request Exception: ', exception);
+    })
+}
+
+export const refundRequest = ({ commit }, payload) => {
+  return axiosClient
+    .post('refundrequest', payload,{
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    })
+    .then(response => {
+      return Promise.resolve(response)
+    }).catch(exception => {
+      console.log('Refund Request Exception: ', exception);
+    })
+}

resources/js/store/dashboard/getters.js

@@ -0,0 +1,11 @@
+export const merchants = (state) => {
+  return state.merchants
+}
+
+export const announcements = (state) => {
+  return state.announcements
+}
+
+export const getSidebarMenuItems = (state) => {
+  return state.sidebar_menu_items
+}

resources/js/store/dashboard/index.js

@@ -0,0 +1,12 @@
+import state from "./state";
+import * as getters from "./getters";
+import * as mutations from "./mutations";
+import * as actions from "./actions";
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    mutations,
+    actions
+}

resources/js/store/dashboard/mutations.js

@@ -0,0 +1,13 @@
+import { generateSidebarMenuItems } from "@/helper"
+
+export const SET_MERCHANTS = (state, value) => {
+  state.merchants = value
+}
+
+export const SET_ANNOUNCEMENTS = (state, value) => {
+  state.announcements = value
+}
+
+export const SET_SIDEBAR_MENU_ITEMS = (state) => {
+  state.sidebar_menu_items = generateSidebarMenuItems()
+}

resources/js/store/dashboard/state.js

@@ -0,0 +1,5 @@
+export default {
+  merchants: [],
+  announcements: [],
+  sidebar_menu_items: []
+}

resources/js/store/global/actions.js

@@ -0,0 +1,51 @@
+import axiosClient from '@/config/axios'
+
+export const loadMerchants = ({ commit }, filter_data) => {
+  return axiosClient
+    .post('merchantlist', filter_data)
+    .then(response => {
+      return Promise.resolve(response)
+    }).catch(exception => {
+      console.log('Merchants API Exception', exception);
+    })
+}
+
+export const allTransactions = ({ commit }, filter_data) => {
+  return axiosClient
+    .post('alltransaction', filter_data)
+    .then(response => {
+      return Promise.resolve(response)
+    }).catch(exception => {
+      console.log('All Transaction API Exception', exception);
+    })
+}
+
+export const loadRefundedTransactions = ({ commit }, filter_data) => {
+  return axiosClient
+    .post('refundedtransaction', filter_data)
+    .then(response => {
+      return Promise.resolve(response)
+    }).catch(exception => {
+      console.log('Refunded API Exception', exception);
+    })
+}
+
+export const loadChargebackTransactions = ({ commit }, filter_data) => {
+  return axiosClient
+    .get('chargeback/list', { params: filter_data })
+    .then(response => {
+      return Promise.resolve(response)
+    }).catch(exception => {
+      console.log('Chargeback API Exception', exception);
+    })
+}
+
+export const loadIntegratorInformation = () => {
+  return axiosClient
+    .get('integratorinfo')
+    .then(response => {
+      return Promise.resolve(response)
+    }).catch(exception => {
+      console.log('Integrator Information API Exception', exception);
+    })
+}

resources/js/store/global/index.js

@@ -0,0 +1,12 @@
+import state from "./state";
+import * as getters from "./getters";
+import * as mutations from "./mutations";
+import * as actions from "./actions";
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    mutations,
+    actions
+}

resources/js/store/global/state.js

@@ -0,0 +1 @@
+export default {}

resources/js/store/index.js

@@ -0,0 +1,13 @@
+import { createStore } from 'vuex';
+
+import auth from "./auth";
+import dashboard from "./dashboard";
+import global from "./global";
+
+export default createStore({
+  modules: {
+    auth,
+    dashboard,
+    global
+  },
+});