Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/vreg/pages/portal/ |
<template>
<section class="checkout-section portal-section mt-5" v-if="ready">
<div class="container">
<div class="checkout-box">
<h3>Registration Renewal Order(s)</h3>
<div class="form-step-box flow2">
<div class="flow3-vehicle-wrapper">
<template v-for="orderObject in orders" v-if="orderObject.items.length">
<div class="contact-info">
<p>Contact and Mailing Address:</p>
<div class="row">
<div class="col-md-6">
<h6><b>{{ orderObject.full_name }}</b></h6>
<h6>{{ orderObject.email }}</h6>
<h6>{{ orderObject.phone }}</h6>
</div>
<div class="col-md-6" v-if="orderObject.mailing_address && orderObject.mailing_address.zip">
<a href="#" @click.prevent="openEditAddressModal(orderObject)">
Edit
</a>
<h6>{{ orderObject.mailing_address.street }} </h6>
<h6>{{ orderObject.mailing_address.address_2 }}</h6>
<h6>{{ orderObject.mailing_address.city }}, {{ orderObject.mailing_address.state_code }}
{{ orderObject.mailing_address.zip }}</h6>
<h6>USA</h6>
</div>
</div>
<div class="row" v-if="orderObject.status ">
<div class="col-md-6">
<a href="#" class="btn btn-sm btn-success"
@click.prevent="payOrderModal(orderObject)">
Pay order {{ orderObject.code }} - <b> {{ $money(orderObject.amount) }} </b>
</a>
</div>
</div>
</div>
<div class="vehicle-info" v-for="item in orderObject.items">
<div class="vehicle-info-header">
<component :is="splittedPlateNumberComponent" :plate="item" :small="true"/>
<div class="header-sub">
<h4>
<span v-if="item.properties.vehicle_year" class="d-block">
{{ item.properties.vehicle_year }}
</span>
<b>{{ item.properties.license_make | cleanMake }}</b>
</h4>
<p>
Order Status: <b>{{ orderObject.status_formatted }}</b>
<template v-if="item.new_plate_issued">
<br>
<b>*New Plate Issued*</b>
</template>
</p>
</div>
</div>
<div class="vehicle-info-body">
<div class="portal-row">
<div class="portal-left">
<div class="row">
<div class="col-md-4">
<p>Order ID</p>
<h6>{{ orderObject.code }} </h6>
</div>
<div class="col-md-4">
<p>Order Placed</p>
<h6>{{ orderObject.formatted_order_date }} </h6>
</div>
<div class="col-md-4">
<p>RENEWAL TYPE</p>
<h6>{{ item.renewal_type }}</h6>
</div>
</div>
</div>
<div class="portal-right body">
<a href="#" class="btn-receipt" @click.prevent="showReceiptModal(orderObject,item)">
<span v-if="orderObject.status==='chargeback'">
Payment Due
</span>
<span v-else>Show Order <br> Receipt</span>
<img src="/images/portal/receipt-icon.svg" alt="Icon">
</a>
</div>
</div>
<div class="row"
v-if="item.title_stops && orderObject.status !== 'shipped' && orderObject.status !== 'renewal_processed' && orderObject.status !== 'digital_download' && orderObject.status !== 'chargeback' ">
<div class="col">
<div class="alert alert-danger mt-3 p-2 d-flex align-items-start"
v-for="stop in item.title_stops">
<div class="d-inline-block mr-2">
<img src="/images/portal/error_icon.svg" alt="Icon">
</div>
<div class="d-inline-block" v-html="stop"></div>
</div>
</div>
</div>
</div>
<!-- <div class="vehicle-info-footer" v-if="orderObject.order_type !== 'online'"> -->
<div class="vehicle-info-footer" v-if="orderObject.state_code!=='AZ' && orderObject.state_code!=='WI'">
<div class="portal-row">
<div class="portal-left">
<p><b>Registration Digital Copy</b> <br>
Click ”Download Digital Copy” and save your registration card copy to your device or print it.
</p>
</div>
<div class="portal-right">
<a :href="item.digital_copy_link" v-if="item.has_digital_copy"
class="btn btn-primary shadow-none btn-green">Download Digital Copy
</a>
<span v-if="!item.has_digital_copy " class="ml-2 badge bg-warning text-white">
Digital Copy is Pending
</span>
</div>
</div>
</div>
</div>
<hr style="border-top: 2px rgb(0,107,205) solid">
</template>
<p class="support">If you have any questions or need assistance, please contact Customer Support by phone at
{{ appPhone }} or by email at <a :href="`mailto:${appEmail}`">{{ appEmail }}</a>
</p>
</div>
</div>
</div>
</div>
<b-modal id="portalReceiptModal" modal-class="portal-modal" hide-header hide-footer
dialog-class="modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<img src="/images/portal/logo-modal.svg" alt="Logo">
<button type="button" class="close" @click.prevent="$bvModal.hide('portalReceiptModal')">
<img src="/images/portal/close-icon.svg" alt="Close">
</button>
</div>
<div class="modal-body" v-if="selectedItem && selectedOrder">
<div class="order-details">
<div class="modal-row">
<div class="left">
<p>Order ID</p>
<h6>{{ selectedOrder.code }} </h6>
</div>
<div class="right">
<p>Order Placed</p>
<h6>{{ selectedOrder.formatted_order_date }} </h6>
</div>
</div>
<div class="modal-row">
<div class="left">
<p>Tag </p>
<h6>{{ selectedItem.licence_plate }} </h6>
</div>
<div class="right">
<p>{{ selectedItem.properties.vehicle_year }}</p>
<h6>{{ selectedItem.properties.license_make | cleanMake }}</h6>
</div>
</div>
<div class="modal-row" v-if="selectedOrder.confirmation_id">
<div class="left" style=" width: 100%;">
<p>Confirmation:</p>
<h6>{{ selectedOrder.confirmation_id }} </h6>
</div>
</div>
</div>
<p class="fees" v-for="breakDownItem in selectedOrder.break_down_items">
<span class="fee-title">{{ breakDownItem.title }}</span>
<span class="fee-number">{{ $money(breakDownItem.custom_amount || breakDownItem.pure_amount) }}</span>
</p>
<p class="fees total">
<span class="fee-title">Order Total:</span>
<span class="fee-number">{{ selectedOrder.formatted_amount }}</span>
</p>
</div>
</div>
</b-modal>
<b-modal id="payOrderModal" hide-footer no-close-on-backdrop>
<template #modal-title>
Pay order [ {{ selectedOrder.code }} ]
</template>
<pay-order-modal :order="this.selectedOrder"/>
</b-modal>
<b-modal id="lockScreenModal" hide-footer hide-header no-close-on-backdrop>
<div class="my-5 text-center">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle"
width="25"
height="25"
class="svg-inline--fa fa-exclamation-triangle fa-w-18 text-warning" role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512">
<path fill="currentColor"
d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path>
</svg>
Your session is Locked!
</div>
<button class="btn btn-primary btn-block" @click.prevent="reloadPage">
Unlock Here
</button>
</b-modal>
<v-idle
:hidden="true"
@idle="onidle"
:loop="true"
:wait="0"
:duration="600"/>
<edit-address
address-field="mailing_address"
:form="form"
:isEdit="true"
:liveUpdate="true"
:ajaxURL="editAddressAjaxURL"
v-if="showEditAddressModal"
@close-modal="closeEditAddressModal"
modal-title="Change mailing address"/>
</section>
</template>
<script>
import EditAddress from "@/components/Forms/Edit/EditAddress";
import PayOrderModal from "@/components/Portal/PayOrderModal";
export default {
name: "portal",
components: {EditAddress, PayOrderModal},
middleware({store, redirect}) {
if (!store.getters.isLoggedIn) {
store.commit('RESET_STORE');
redirect('/login');
}
},
data() {
return {
showEditAddressModal: false,
selectedOrder: null,
selectedItem: null,
currentUpdateOrder: null,
ready: false,
editAddressAjaxURL: '',
form: this.$form({
mailing_address: {},
email: '',
})
}
},
methods: {
closeEditAddressModal(data = null) {
if (data) {
let d = _.cloneDeep(data);
this.currentUpdateOrder.email = d.email;
this.currentUpdateOrder.mailing_address = d.mailing_address;
}
this.showEditAddressModal = false;
},
openEditAddressModal(order) {
this.form.mailing_address = _.cloneDeep(order.mailing_address);
this.form.email = order.email
this.currentUpdateOrder = order;
this.editAddressAjaxURL = `orders/${order.id}/update-order-fields`
this.showEditAddressModal = true;
},
reloadPage() {
window.location.reload();
},
onidle() {
this.$bvModal.show('lockScreenModal');
},
payOrderModal(targetOrder) {
this.$store.commit('SET_CURRENT_STATE_CODE', targetOrder.state_code);
this.$store.commit('SET_PAYMENTS_KEYS', targetOrder.payment_keys)
this.selectedOrder = targetOrder;
this.$bvModal.show('payOrderModal');
},
showReceiptModal(targetOrder, targetItem) {
this.selectedOrder = targetOrder;
this.selectedItem = targetItem;
this.$bvModal.show('portalReceiptModal')
}
},
mounted() {
this.$axios.post(`orders/auth/login`, {
email_phone: this.order.email || this.order.phone,
zip_code: this.order.zip_code || this.order.residential_address.zip || this.order.mailing_address.zip
}).then(({data}) => {
data = data.data;
this.$store.commit('SET_ORDER', data.order);
this.$store.commit('SET_ORDERS', data.orders);
this.$store.commit('SET_ACCESS_TOKEN', data.login_token);
this.$store.commit('SET_LOGGED_IN', 1);
this.ready = true;
})
},
computed: {
order() {
return this.$store.getters.order;
},
orders() {
return _.cloneDeep(this.$store.getters.orders || []);
}
},
filters: {
cleanMake(make) {
if (!make) {
return '';
}
return make.replace(/[()]/g, '');
},
money(value) {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2
}).format(value);
},
}
}
</script>
<style>
.alert-danger {
font-family: 'Open Sans';
text-align: justify;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
color: #1D2E59;
background: #FFECEC;
border: 1px solid #FAD9D7;
border-radius: 5px;
}
#edit-address-modal .modal-dialog {
max-width: 556px !important;
margin-top: 130px !important;
}
.modal {
background: rgba(0, 0, 0, 0.8);
}
.modal-dialog {
max-width: 446px;
margin-top: 58px;
margin-bottom: 58px;
}
.modal-content {
border-radius: 4px;
border: 1px solid #fff;
}
.modal-body {
padding: 25px 38px 31px 38px;
}
.u-modal h4 {
color: #1D2E59;
margin: 0 0 19px 0;
font: 700 20px / 20px 'Open Sans';
display: flex;
align-items: center;
}
.u-modal h4 svg {
width: 20px;
margin-right: 14px;
}
.u-modal p {
margin: 0 0 25px 0;
color: #1D2E59;
font: 16px / 26px 'Open Sans';
}
.u-modal p a {
transition: all .2s ease-in;
}
.u-modal p a:hover, .u-modal p a:focus {
text-decoration: none;
}
.portal-modal .modal-dialog {
max-width: 275px;
margin: 0 auto;
}
.portal-modal .modal-content {
border: none;
border-radius: 0;
}
.portal-modal .modal-header {
padding: 15px;
border: none;
}
.portal-modal .modal-header .close {
padding: 15px;
opacity: 1;
}
.portal-modal .modal-header .close img {
transition: all .3s ease-in;
display: block;
}
.portal-modal .modal-header .close:hover img, .portal-modal .modal-header .close:focus img {
transform: rotate(90deg);
}
.portal-modal .modal-body {
padding: 5px 15px 25px 15px;
}
.portal-modal .order-details {
padding-bottom: 10px;
border-bottom: 1px solid #B4B4BC;
margin-bottom: 10px;
}
.portal-modal .modal-row {
display: flex;
}
.portal-modal .modal-row .left {
flex-shrink: 0;
width: 50%;
}
.portal-modal .modal-row .right {
flex-grow: 1;
}
.portal-modal .modal-row p {
color: #8C92A3;
margin: 0;
font: 10px / 14px 'Open Sans';
}
.portal-modal .modal-row h6 {
margin: 0 0 10px 0;
color: #1D2E59;
font: 600 12px / 15px 'Open Sans';
}
.portal-modal .fees {
margin: 0 0 10px 0;
padding: 0 0 10px 0;
border-bottom: 1px dashed #B4B4BC;
color: #8C92A3;
font: 10px / 12px 'Open Sans';
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.portal-modal .fees .fee-number {
font-weight: 700;
margin-left: 25px;
}
.portal-modal .fees.total {
justify-content: flex-end;
border-bottom: none;
padding: 0;
margin: 0;
font: 600 12px / 14px 'Open Sans';
color: #1D2E59;
}
#payOrderModal .modal-dialog {
margin-top: 130px !important;
}
</style>