From 653dbf3b8af822259b8039f273150c17f185bbd6 Mon Sep 17 00:00:00 2001 From: rakesh Date: Sat, 13 May 2023 16:12:37 +0530 Subject: [PATCH] fixes ui --- src/routes/retailer/address_book.vue | 450 ++++++++++++++++----------- 1 file changed, 266 insertions(+), 184 deletions(-) diff --git a/src/routes/retailer/address_book.vue b/src/routes/retailer/address_book.vue index c2cf404..2a392f8 100644 --- a/src/routes/retailer/address_book.vue +++ b/src/routes/retailer/address_book.vue @@ -3,68 +3,97 @@
-

Address Book

+

+ Address Book +

- - + + -

Default Billing Address

-

You have not set a default billing address.

+

+ Default Billing Address +

+

+ You have not set a default billing address. +

You have set a default billing address.

- +
EDIT + >EDIT -

Default Shipping Address

-

You have not set a default shipping address.

+

+ Default Shipping Address +

+

+ You have not set a default shipping address. +

-

You have set a default shipping address.

- +

+ You have set a default shipping address. +

+
EDIT + >EDIT @@ -75,20 +104,35 @@

Additional Address Entries

+ > + Additional Address Entries +

- - + + -

You have no other address entries in your address book.

+

+ You have no other address entries in your address book. +

@@ -97,40 +141,45 @@ sm="6" md="6" lg="6" - v-for="(address,index) in addresses" + v-for="(address, index) in addresses" v-bind:key="index" - v-show="address.id!==basicInfo.defaultBilling || address.id!==basicInfo.defaultShipping" + v-show=" + address.id !== basicInfo.defaultBilling || + address.id !== basicInfo.defaultShipping + " > EDIT + >EDIT DELETE + >DELETE @@ -141,67 +190,92 @@ ADD NEW ADDRESS + >ADD NEW ADDRESS
-

Add New Address

+

+ Add New Address +

-

Contact Information

+

+ Contact Information +

- + - + This field is required + >This field is required -

Address

+

+ Contact Information +

This is default billing address + v-if="addressId == basicInfo.defaultBilling" + + >This is default billing address This is default shipping address + v-if="addressId == basicInfo.defaultShipping" + >This is default shipping address - + SAVE ADDRESS + >SAVE ADDRESS -

Verify Your Address

+

+ Verify Your Address +

@@ -265,15 +346,24 @@ to class="text-decoration-none black--text fontcolor-black-light" > -
X
+
X
- - + + - + EDIT ADDRESS + v-bind="props" + :variant="isHovering ? 'outlined' : 'outlined'" + :class=" + isHovering ? ' bg-white text-primary' : 'bg-primary' + " + rounded="0" + size="large" + @click="dialog = false" + >EDIT ADDRESS - + @@ -316,7 +409,8 @@ color="success" indeterminate v-if="inProgress" - >SAVE ADDRESS + >SAVE ADDRESS @@ -329,21 +423,6 @@ - !!v || "This field is required", - v => (v && v.length >= 3) || "This field must be at least 3 characters" + (v) => !!v || "This field is required", + (v) => + (v && v.length >= 3) || "This field must be at least 3 characters", ], phoneNumberRules: [ - v => !!v || "This field is required", - v => - (v && v.length >= 8) || "Phone Number must be at least 8 characters" - ] + (v) => !!v || "This field is required", + (v) => + (v && v.length >= 8) || "Phone Number must be at least 8 characters", + ], }; }, components: { @@ -415,24 +495,24 @@ export default { BillingAddressComponent, ShippingAddressComponent, ConfirmationDialog, - VueTelInput + VueTelInput, //BillingAddressComponent }, computed: { - hideAndShowFields: function() { - let currentName = this.$route.name + hideAndShowFields: function () { + let currentName = this.$route.name; if (currentName === "AddressBook") { return false; } return null; }, - basicInfo: function() { + basicInfo: function () { return this.$store.state.accountOne.one; }, - addressFields: function() { + addressFields: function () { return this.$store.state.accountOne.address; }, - errorMessage: function() { + errorMessage: function () { return this.$store.state.accountOne.errorMessage; }, ...mapFields([ @@ -447,29 +527,29 @@ export default { "allCountries", "countryAllStates", "inProgress", - "addressIndex" + "addressIndex", ]), - userAuth: function() { + userAuth: function () { return this.$store.state.auth.userAuth; }, - addressId: function() { + addressId: function () { return this.$route.params.addressId; }, - shippingAddressDetails: function() { + shippingAddressDetails: function () { return this.$store.state.accountOne.shippingAddressDetails; }, - billingAddressDetails: function() { + billingAddressDetails: function () { return this.$store.state.accountOne.billingAddressDetails; }, - addresses: function() { + addresses: function () { return this.$store.state.accountOne.addresses; }, - address: function() { + address: function () { return this.$store.state.accountOne.address; }, - fetchInProgress: function() { + fetchInProgress: function () { return this.$store.state.accountOne.fetchInProgress; - } + }, }, methods: { resetForm() { @@ -482,35 +562,37 @@ export default { } }, phoneNumberValidation() {}, - submit: async function() { - try{ + submit: async function () { + try { if ( this.$refs.contactForm.validate() && this.$refs.addressForm.$refs.shippingAddressform.validate() ) { this.addressInProgress = true; this.dialog = true; - let response = await this.$store - .dispatch("accountOne/validateAddress", this.addressFields) - if(typeof(response) == "string"){ - this.geoCodedAddress = response; - this.geoCodedAddressFlag = false; - }else if(typeof(response) == "object"){ - this.geoCodedAddress = "Address is geocoded."; - this.geoCodedAddressFlag = true; - } + let response = await this.$store.dispatch( + "accountOne/validateAddress", + this.addressFields + ); + if (typeof response == "string") { + this.geoCodedAddress = response; + this.geoCodedAddressFlag = false; + } else if (typeof response == "object") { + this.geoCodedAddress = "Address is geocoded."; + this.geoCodedAddressFlag = true; } - this.addressInProgress = false; - }catch(error){ + } + this.addressInProgress = false; + } catch (error) { this.snackbar = { - message: error, - color: "error", - show: true, - timeout: 3000 - }; + message: error, + color: "error", + show: true, + timeout: 3000, + }; } }, - saveAddress: function() { + saveAddress: function () { this.$store .dispatch("accountOne/updateAddress") .then(() => { @@ -518,30 +600,30 @@ export default { message: "Address Updated Successfully", color: "success", show: true, - timeout: 3000 + timeout: 3000, }; let page = localStorage.getItem("cr_meCurrentPage"); setTimeout(() => { if (page == "addressBook") this.$router.push({ - name: "AddressBook" + name: "AddressBook", }); else this.$router.push({ - name: "AccountDashboard" + name: "AccountDashboard", }); }, 1000); }) - .catch(error => { + .catch((error) => { this.snackbar = { message: error, color: "error", show: true, - timeout: 3000 + timeout: 3000, }; setTimeout(() => { this.$router.push({ - name: "AccountDashboard" + name: "AccountDashboard", }); }, 1000); }); @@ -562,14 +644,14 @@ export default { localStorage.setItem("cr_meCurrentPage", "addressBook"); this.$router.push({ name: "EditAddressBook", - params: { addressId: addressId } + params: { addressId: addressId }, }); }, deleteAddress(address) { this.addressObj = address; (this.confirmationDialog = true), (this.confirmation = { - confirmationMessage: "Are you sure you want to delete this address?" + confirmationMessage: "Are you sure you want to delete this address?", }); }, removeAddress(action) { @@ -578,14 +660,14 @@ export default { } (this.confirmationDialog = false), (this.confirmation = { - confirmationMessage: "" + confirmationMessage: "", }); this.addressObj = ""; }, validateNumber(number, data) { if (data.possible && data.valid) this.phoneNumberError = false; else this.phoneNumberError = true; - } + }, }, async created() { if (this.$route.params.addressId == "new") { @@ -604,7 +686,7 @@ export default { this.$store.dispatch("accountOne/setAddress", null); } } - } + }, };