sidharth.kothari
/
retailer-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixes ui

This commit is contained in:
rakesh 2023-05-22 18:41:54 +05:30
parent b83eccf0ea
commit 95976f6006
2 changed files with 50 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/retailer/address/ShippingAddressFormComponent.vue
View File

@ -118,22 +118,24 @@
@update:modelValue="checkRegionName()" @update:modelValue="checkRegionName()"
:rules="[(v) => !!v || 'Please select the State']" :rules="[(v) => !!v || 'Please select the State']"
></v-select> ></v-select>
<vue-tel-input
type="number" <v-text-field
label="Telephone"
ref="telephone"
:rules="phoneNumberRules"
v-model="telephone" v-model="telephone"
:defaultCountry="setCountryCode" variant="outlined"
:class=" density="compact"
phoneNumberError @input="acceptNumber"
? 'phonenumber-input-error-border' class="shipping-address-form pt-2"
: 'phonenumber-custom-input' color="primary"
" v-show="hideAndShowFields"
@input="validateNumber" ></v-text-field>
ref="phoneNumber" <span class="red--text caption ml-3" v-show="hideAndShowFields && phoneNumberError"
v-show="hideAndShowFields"
></vue-tel-input>
<span class="red--text caption ml-3" v-show="hideAndShowFields && phoneNumberError"
>This field is required</span >This field is required</span
> >
</v-col> </v-col>
</v-row> </v-row>
</v-form> </v-form>
@ -143,7 +145,6 @@
//import { mapState } from "vuex"; //import { mapState } from "vuex";
import { createHelpers } from "vuex-map-fields"; import { createHelpers } from "vuex-map-fields";
import { fetchStates } from "@/services/util.service"; import { fetchStates } from "@/services/util.service";
import { VueTelInput } from "vue3-tel-input";
const { mapFields } = createHelpers({ const { mapFields } = createHelpers({
getterType: "accountOne/getField", getterType: "accountOne/getField",
@ -181,7 +182,6 @@ export default {
], ],
}), }),
components: { components: {
VueTelInput,
}, },
computed: { computed: {
...mapFields([ ...mapFields([
@ -230,6 +230,10 @@ export default {
}, },
}, },
methods: { methods: {
acceptNumber() {
let x = this.telephone.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
this.telephone = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
},
verifyAddress() { verifyAddress() {
this.$emit("verifyAddress"); this.$emit("verifyAddress");
}, },

35
src/routes/retailer/checkout_page.vue
View File

@ -236,6 +236,7 @@
@click=" @click="
editLocalAddress(userLocalAddress, false) editLocalAddress(userLocalAddress, false)
" "
color="primary"
>Edit</v-btn >Edit</v-btn
> >
</v-col> </v-col>
@ -340,9 +341,12 @@
cols="12" cols="12"
v-else-if="estimatedShippingMethods.length > 0" v-else-if="estimatedShippingMethods.length > 0"
> >
<v-radio-group <v-radio-group
mandatory mandatory
v-model="estimatedShipping" v-model="estimatedShipping"
:model-value="estimatedShipping"
> >
<div <div
v-for="( v-for="(
@ -355,6 +359,7 @@
<v-radio <v-radio
:label="method.carrierTitle" :label="method.carrierTitle"
:value="method" :value="method"
v-model="estimatedShipping"
class="text-black" class="text-black"
color="primary" color="primary"
></v-radio> ></v-radio>
@ -495,6 +500,7 @@
@click="editBillBook()" @click="editBillBook()"
depressed depressed
tile tile
color="primary"
>Edit</v-btn >Edit</v-btn
> >
</v-col> </v-col>
@ -539,7 +545,7 @@
return-object return-object
color="primary" color="primary"
class="billing-address-select" class="billing-address-select"
@change="changeBillingAddress()" @update:modelValue="changeBillingAddress()"
item-value="id" item-value="id"
> >
<template v-slot:selection="{ item }"> <template v-slot:selection="{ item }">
@ -621,7 +627,7 @@
<v-col <v-col
cols="12" cols="12"
class="d-flex justify-end pa-0 mb-6" class="d-flex justify-end pa-0 mb-6"
v-if="!sshowNewBillingForm" v-if="!showNewBillingForm"
> >
<v-btn <v-btn
class="primary ma-3 text-uppercase" class="primary ma-3 text-uppercase"
@ -653,6 +659,7 @@
class="mt-0" class="mt-0"
density="compact" density="compact"
hide-details hide-details
color="success"
></v-checkbox> ></v-checkbox>
</v-col> </v-col>
</v-row> </v-row>
@ -675,11 +682,13 @@
<v-btn <v-btn
class="primary ma-3 text-uppercase" class="primary ma-3 text-uppercase"
@click="cancelBillingAddress" @click="cancelBillingAddress"
color="primary"
>Cancel</v-btn >Cancel</v-btn
> >
<v-btn <v-btn
class="success ma-3 text-uppercase" class="success ma-3 text-uppercase"
@click="newBillingAddress" @click="newBillingAddress"
color="success"
>Update</v-btn >Update</v-btn
> >
</v-col> </v-col>
@ -1791,9 +1800,10 @@ export default {
); );
} }
}, },
newBillingAddress() { async newBillingAddress() {
this.previousAddress = this.address; this.previousAddress = this.address;
if (this.$refs.billingForm.$refs.shippingAddressform.validate()) { let validate = await this.$refs.billingForm.$refs.shippingAddressform.validate();
if (validate && validate.valid) {
if (this.saveInBillingAddressBook) { if (this.saveInBillingAddressBook) {
this.$store.dispatch("accountOne/updateAddress"); this.$store.dispatch("accountOne/updateAddress");
localStorage.setItem( localStorage.setItem(
@ -1900,6 +1910,9 @@ export default {
} }
}, },
next: function () { next: function () {
if(this.estimatedShipping)
{
this.tabs = "reviewTab"; this.tabs = "reviewTab";
if (this.userAuth) { if (this.userAuth) {
if (this.addressesList.length == 0) { if (this.addressesList.length == 0) {
@ -2003,6 +2016,16 @@ export default {
window.scrollTo(0, 0); window.scrollTo(0, 0);
} }
} }
}
else
{
this.snackbar = {
message: 'Please select shipping method.',
color: "error",
show: true,
timeout: 5000,
};
}
}, },
saveUserAddress() { saveUserAddress() {
let phoneNumber = this.$refs.dialogShippingAddressForm.$refs.phoneNumber let phoneNumber = this.$refs.dialogShippingAddressForm.$refs.phoneNumber
@ -2077,8 +2100,8 @@ export default {
}, },
async placeOrderFree(e) { async placeOrderFree(e) {
try { try {
e.preventDefault(); let validate = await this.$refs.poNumberForm.validate()
if (this.$refs.poNumberForm.validate()) { if (validate && validate.valid ) {
this.isPageLoader = true; this.isPageLoader = true;
if (this.userAuth) { if (this.userAuth) {
try { try {