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/components/Pages/ |
<template>
<div>
<div class="order-status-box-mobile blue-bg d-md-none"
:class="{'opened':mobileOrderSummaryVisible}">
<div class="order-status-header-mobile" v-b-toggle.mobile-order-summary
@click="mobileOrderSummaryVisible = !mobileOrderSummaryVisible">
<h5>Order summary
<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.20006 6.56466C5.80008 7.04961 5.05714 7.04961 4.65715 6.56466L1.21089 2.38628C0.672927 1.73404 1.13687 0.749999 1.98234 0.749999L8.87487 0.75C9.72034 0.75 10.1843 1.73404 9.64633 2.38628L6.20006 6.56466Z"
fill="#182D40"/>
</svg>
</h5>
<p>{{ $money(orderTotal) }}</p>
</div>
<b-collapse id="mobile-order-summary" class="mt-2">
<order-summary-calculations :mobile="true"/>
</b-collapse>
</div>
<client-only>
<user-info-edit-wrapper :form="form" :include-edit-address="includeEditAddress"/>
</client-only>
<h5>Payment </h5>
<p class="description"
>All transactions are secure and encrypted. </p>
<ValidationObserver v-slot="{ invalid }" ref="form">
<form action="">
<!--Other payment Options-->
<payments-gateways ref="payments-gateways"
@payment-form-submitted="()=>canSubmit=true"
@payment-form-submitting="()=>canSubmit=false"
@ready-to-submit="submitForm"
:form="form"/>
<form-error-msg :msg="formErrorMsg"/>
<div class="form-button-wrapper">
<nuxt-link :to=" prevPath ? prevPath :`/${currentStateCode}/step-5`" class="btn-return">
<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 9L1 5L5 1" stroke="#182D40" stroke-width="1.2" stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
Return to renewal type
</nuxt-link>
<button type="submit" class="btn btn-form-green" @click.prevent="frontendFormSubmitHandler"
id="payment-form-submit"
:disabled="!canSubmit || invalid">
<b-spinner class="mr-1" small v-if="!canSubmit"></b-spinner>
Execute Payment
<svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1.5L6 6.5L1 11.5" stroke="white" stroke-width="1.2" stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</button>
</div>
</form>
</ValidationObserver>
</div>
</template>
<script>
import UserInfoEditWrapper from "@/components/Forms/Edit/UserInfoEditWrapper";
import OrderSummaryCalculations from "@/components/Forms/Sidebars/OrderSummaryCalculations";
import FormErrorMsg from "@/components/Forms/FormErrorMsg";
import forms from "@/mixins/forms";
import PaymentsGateways from "../Forms/PaymentsGateways";
export default {
name: "CheckoutPage",
mixins: [forms],
props: {
includeEditAddress: {
required: false,
default: true
},
prevPath: {
required: false,
}
},
components: {
PaymentsGateways,
FormErrorMsg,
OrderSummaryCalculations,
UserInfoEditWrapper
},
data() {
let state = this.$store.state,
step1Form = this.$copyObject(state.step1Form),
step2Form = this.$copyObject(state.step2Form),
step3Form = this.$copyObject(state.step3Form);
return {
formErrorMsg: '',
mobileOrderSummaryVisible: false,
canSubmit: true,
form: this.$form({
gateway: '',
cardReference: '',
payment_account_key: '',
checkoutToken: '',
is_intent: '',
order_type: state.emptyEstimates ? 'unverified' : 'verified',
selected_items: [],
utm_medium: this.getUTMMedium,
lineItems: [],
amount: '',
card_last_four: '',
card_brand: '',
card_number: '',
card_expiry_month: '',
card_expiry_year: '',
cvv: '',
billing_information: {
email: step1Form.email,
cardholder_name: `${step1Form.first_name} ${step1Form.middle_name || ''} ${step1Form.last_name}`,
zip_code: step3Form.mailing_address ? step3Form.mailing_address.zip : ''
},
...step1Form,
...step2Form,
...step3Form,
website: process.env.app_domain,
isUTMMedium: this.isUTMMedium,
sessionId: '',
AFFID: '',
next_try_number: 0,
original_order_type: state.originalOrderType
})
}
},
methods: {
submit() {
this.$refs['payments-gateways'].submit();
},
submitForm() {
this.showHideCheckoutLoader(true);
this.canSubmit = false;
this.formErrorMsg = '';
let formData = new FormData(),
data = this.$copyObject(this.form.data());
for (let property in data) {
let propertyValue = data[property];
if (_.isNull(propertyValue)) {
propertyValue = '';
}
if (typeof propertyValue == 'object' && !(propertyValue instanceof File)) {
this.appendObjectToFormData(formData, propertyValue, property);
} else {
formData.append(property, propertyValue);
}
}
this.$axios.post(`orders/checkout/${this.$store.state.orderId}`,
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
this.form.onSuccess(response.data)
this.formSubmittedSuccessfully(response.data);
}).catch(error => {
if (error.response) {
this.form.onFail(error.response.data);
this.formSubmitFailed(error.response.data);
} else {
this.form.onFail({});
}
}).finally(() => {
this.showHideCheckoutLoader(false);
this.canSubmit = true
});
},
appendObjectToFormData(formData, object, property) {
for (let subProp in object) {
if (_.isNull(object[subProp])) {
object[subProp] = '';
}
if (_.isObject(object[subProp]) && !(object[subProp] instanceof File)) {
formData = this.appendObjectToFormData(formData, object[subProp], [property, '[', subProp, ']'].join(''))
} else {
formData.append([property, '[', subProp, ']'].join(''), object[subProp]);
}
}
return formData;
},
formSubmittedSuccessfully(data) {
this.$store.commit('SET_ORDER', data.data.order);
if (data.status === 'redirect' && data.data.redirect_to === 'checkout-success') {
this.$router.push({path: `/${this.currentStateCode}/thanks-page`});
}
},
formSubmitFailed(response) {
if (response.hasOwnProperty('message')) {
this.formErrorMsg = response.message;
} else {
this.formErrorMsg = 'Something went wrong!!';
}
if (response.hasOwnProperty('data')) {
let order = response.data;
// this.$store.commit('SET_ERROR_MESSAGE', response.message);
// if (order.next_try_number >= this.allowed_max_tries) {
//
// // this.$router.push({'path': '/messages/card-declined'});
//
// return false;
// }
this.form.order_id = order.code;
this.form.next_try_number = order.next_try_number;
if (response.status == 'error') {
this.formErrorMsg = response.message;
}
// if (!order.reached_max_tries) {
// this.$bvModal.show('modal-1');
// } else {
// this.$router.push({path: '/messages/card-declined'});
// }
}
}
},
mounted() {
this.form.lineItems = this.getLineItems;
this.form.selected_items = this.offlineFormPlates;
this.form.amount = this.orderTotal;
},
computed: {
isUTMMedium() {
return !!this.getUTMMedium;
},
getUTMMedium() {
let indexHref = this.$store.state.indexHref;
if (indexHref) {
return new URL(indexHref).searchParams.get('utm_medium');
}
return '';
}
},
watch: {
orderTotal() {
this.form.amount = this.orderTotal;
},
getLineItems() {
this.form.lineItems = this.getLineItems;
}
}
}
</script>
<style scoped>
.step-radio-label {
margin: 0 !important;
}
</style>