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-13 16:12:37 +05:30
parent 72183bf5f4
commit 653dbf3b8a
1 changed files with 266 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

450
src/routes/retailer/address_book.vue
View File

@ -3,68 +3,97 @@
<v-row> <v-row>
<v-col cols="12" sm="12" class="fontcolor-black-light"> <v-col cols="12" sm="12" class="fontcolor-black-light">
<div v-show="!addressId"> <div v-show="!addressId">
<p class="h2 mb-5 body-font text-uppercase text-primary pb-2">Address Book</p> <p class="h2 mb-5 body-font text-uppercase text-primary pb-2">
Address Book
</p>
<div class="address-book-line my-1"></div> <div class="address-book-line my-1"></div>
<v-row class="mt-12" align="center" justify="center" v-if="inProgress"> <v-row
<v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular> class="mt-12"
align="center"
justify="center"
v-if="inProgress"
>
<v-progress-circular
:size="60"
color="primary"
indeterminate
></v-progress-circular>
</v-row> </v-row>
<v-row class="mt-4" v-else> <v-row class="mt-4" v-else>
<v-col cols="12" sm="6" md="6" lg="6"> <v-col cols="12" sm="6" md="6" lg="6">
<p <p class="body-font text-uppercase text-primary font-weight-bold">
class="body-font text-uppercase text-primary font-weight-bold" Default Billing Address
>Default Billing Address</p> </p>
<p <p class="body-font" v-if="!billingAddressDetails.address">
class="body-font" You have not set a default billing address.
v-if="!billingAddressDetails.address" </p>
>You have not set a default billing address.</p>
<div v-else> <div v-else>
<p class="body-font">You have set a default billing address.</p> <p class="body-font">You have set a default billing address.</p>
<BillingAddressComponent :address="billingAddressDetails.address" /> <BillingAddressComponent
:address="billingAddressDetails.address"
/>
</div> </div>
<v-row> <v-row>
<v-col cols="12"> <v-col cols="12">
<v-hover v-slot:default="{ isHovering, props }"> <v-hover v-slot:default="{ isHovering, props }">
<v-btn <v-btn
@click="editAddress(billingAddressDetails.address,billingAddressDetails.index)" @click="
editAddress(
billingAddressDetails.address,
billingAddressDetails.index
)
"
v-bind="props" v-bind="props"
:variant="isHovering" :variant="isHovering ? 'outlined' : 'outlined'"
:color="isHovering?'white':'primary'" :class="
:class="isHovering?'text-primary':'text-white'" isHovering ? ' bg-white text-primary' : 'bg-primary'
depressed "
:large="$vuetify.display.mdAndUp?true:false" rounded="0"
tile size="large"
:large="$vuetify.display.mdAndUp ? true : false"
class="body-font my-2 address-book-button" class="body-font my-2 address-book-button"
>EDIT</v-btn> >EDIT</v-btn
>
</v-hover> </v-hover>
</v-col> </v-col>
</v-row> </v-row>
</v-col> </v-col>
<v-col cols="12" sm="6" md="6" lg="6"> <v-col cols="12" sm="6" md="6" lg="6">
<p <p class="body-font text-uppercase text-primary font-weight-bold">
class="body-font text-uppercase text-primary font-weight-bold" Default Shipping Address
>Default Shipping Address</p> </p>
<p <p class="body-font" v-if="!shippingAddressDetails.address">
class="body-font" You have not set a default shipping address.
v-if="!shippingAddressDetails.address" </p>
>You have not set a default shipping address.</p>
<div v-else> <div v-else>
<p class="body-font">You have set a default shipping address.</p> <p class="body-font">
<ShippingAddressComponent :address="shippingAddressDetails.address" /> You have set a default shipping address.
</p>
<ShippingAddressComponent
:address="shippingAddressDetails.address"
/>
</div> </div>
<v-row> <v-row>
<v-col cols="12"> <v-col cols="12">
<v-hover v-slot:default="{ isHovering, props }"> <v-hover v-slot:default="{ isHovering, props }">
<v-btn <v-btn
@click="editAddress(shippingAddressDetails.address,shippingAddressDetails.index)" @click="
depressed editAddress(
:large="$vuetify.display.mdAndUp?true:false" shippingAddressDetails.address,
tile shippingAddressDetails.index
)
"
:large="$vuetify.display.mdAndUp ? true : false"
v-bind="props" v-bind="props"
:variant="isHovering" :variant="isHovering ? 'outlined' : 'outlined'"
:color="isHovering?'white':'primary'" :class="
:class="isHovering?'text-primary':'text-white'" isHovering ? ' bg-white text-primary' : 'bg-primary'
"
rounded="0"
size="large"
class="body-font my-2 address-book-button" class="body-font my-2 address-book-button"
>EDIT</v-btn> >EDIT</v-btn
>
</v-hover> </v-hover>
</v-col> </v-col>
</v-row> </v-row>
@ -75,20 +104,35 @@
<v-row class="mt-4"> <v-row class="mt-4">
<p <p
class="h3 body-font text-uppercase text-primary pb-2 mb-1 mr-3" class="h3 body-font text-uppercase text-primary pb-2 mb-1 mr-3"
>Additional Address Entries</p> >
Additional Address Entries
</p>
</v-row> </v-row>
</v-col> </v-col>
<div class="address-book-line my-1"></div> <div class="address-book-line my-1"></div>
<v-row class="mt-12" justify="center" align="center" v-if="fetchInProgress"> <v-row
<v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular> class="mt-12"
justify="center"
align="center"
v-if="fetchInProgress"
>
<v-progress-circular
:size="60"
color="primary"
indeterminate
></v-progress-circular>
</v-row> </v-row>
<v-row <v-row
v-else-if="addresses.length < 2 && address.id==basicInfo.defaultBilling && address.id==basicInfo.defaultShipping" v-else-if="
addresses.length < 2 &&
address.id == basicInfo.defaultBilling &&
address.id == basicInfo.defaultShipping
"
> >
<v-col> <v-col>
<p <p class="body-font mb-1 mr-3">
class="body-font mb-1 mr-3" You have no other address entries in your address book.
>You have no other address entries in your address book.</p> </p>
</v-col> </v-col>
</v-row> </v-row>
<v-row v-else> <v-row v-else>
@ -97,40 +141,45 @@
sm="6" sm="6"
md="6" md="6"
lg="6" lg="6"
v-for="(address,index) in addresses" v-for="(address, index) in addresses"
v-bind:key="index" v-bind:key="index"
v-show="address.id!==basicInfo.defaultBilling || address.id!==basicInfo.defaultShipping" v-show="
address.id !== basicInfo.defaultBilling ||
address.id !== basicInfo.defaultShipping
"
> >
<ShippingAddressComponent :address="address" /> <ShippingAddressComponent :address="address" />
<v-row> <v-row>
<v-col cols="2"> <v-col cols="2">
<v-hover v-slot:default="{ isHovering, props }"> <v-hover v-slot:default="{ isHovering, props }">
<v-btn <v-btn
@click="editAddress(address,index)" @click="editAddress(address, index)"
depressed
tile
dense
v-bind="props" v-bind="props"
:variant="isHovering" variant="isHovering ? 'outlined' : 'outlined'"
:color="isHovering?'white':'primary'" :class="
:class="isHovering?'text-primary':'text-white'" isHovering ? ' bg-white text-primary' : 'bg-primary'
"
rounded="0"
size="large"
class="body-font my-2 address-book-button" class="body-font my-2 address-book-button"
>EDIT</v-btn> >EDIT</v-btn
>
</v-hover> </v-hover>
</v-col> </v-col>
<v-col cols="2"> <v-col cols="2">
<v-hover v-slot:default="{ isHovering, props }"> <v-hover v-slot:default="{ isHovering, props }">
<v-btn <v-btn
@click="deleteAddress(address)" @click="deleteAddress(address)"
depressed
tile
dense
v-bind="props" v-bind="props"
:variant="isHovering" :variant="isHovering ? 'outlined' : 'outlined'"
:color="isHovering?'white':'red'" :class="
:class="isHovering?'text-red':'text-white'" isHovering ? ' bg-white text-primary' : 'bg-primary'
"
rounded="0"
size="large"
class="body-font my-2 white--text" class="body-font my-2 white--text"
>DELETE</v-btn> >DELETE</v-btn
>
</v-hover> </v-hover>
</v-col> </v-col>
</v-row> </v-row>
@ -141,67 +190,92 @@
<v-hover v-slot:default="{ isHovering, props }"> <v-hover v-slot:default="{ isHovering, props }">
<v-btn <v-btn
@click="editAddress()" @click="editAddress()"
depressed :large="$vuetify.display.mdAndUp ? true : false"
:large="$vuetify.display.mdAndUp?true:false"
tile
v-bind="props" v-bind="props"
:variant="isHovering" :variant="isHovering ? 'outlined' : 'outlined'"
:color="isHovering?'white':'primary'" :class="
:class="isHovering?'text-primary':'text-white'" isHovering ? ' bg-white text-primary' : 'bg-primary'
"
rounded="0"
size="large"
class="body-font my-2 address-book-button" class="body-font my-2 address-book-button"
>ADD NEW ADDRESS</v-btn> >ADD NEW ADDRESS</v-btn
>
</v-hover> </v-hover>
</v-col> </v-col>
</v-row> </v-row>
</div> </div>
</div> </div>
<div v-show="addressId"> <div v-show="addressId">
<p class="h2 mb-5 body-font text-uppercase text-primary">Add New Address</p> <p class="h2 mb-5 body-font text-uppercase text-primary">
Add New Address
</p>
<v-form ref="addressBookForm" v-model="valid"> <v-form ref="addressBookForm" v-model="valid">
<v-row> <v-row>
<v-col cols="12" sm="6"> <v-col cols="12" sm="6">
<p class="h3 body-font text-uppercase text-primary">Contact Information</p> <p class="h3 body-font text-uppercase text-primary">
Contact Information
</p>
<div class="address-book-line mb-5"></div> <div class="address-book-line mb-5"></div>
<!-- <ContactInfoComponent v-bind:contactDetails="basicInfo" ref="contactInfoForm" /> --> <!-- <ContactInfoComponent v-bind:contactDetails="basicInfo" ref="contactInfoForm" /> -->
<v-form ref="contactForm" v-model="valid" :lazy-validation="lazy"> <v-form
ref="contactForm"
v-model="valid"
:lazy-validation="lazy"
>
<v-row no-gutters> <v-row no-gutters>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
label="First Name" label="First Name"
ref="firstName" ref="firstName"
v-model="firstname" v-model="firstname"
outlined color="primary"
required density="compact"
dense variant="outlined"
:rules="textRules" :rules="textRules"
></v-text-field> ></v-text-field>
<v-text-field <v-text-field
label="Last Name" label="Last Name"
ref="lastName" ref="lastName"
v-model="lastname" v-model="lastname"
outlined color="primary"
dense density="compact"
variant="outlined"
required required
:rules="textRules" :rules="textRules"
></v-text-field> ></v-text-field>
<v-text-field label="Company" ref="company" v-model="company" outlined dense></v-text-field> <v-text-field
label="Company"
ref="company"
v-model="company"
color="primary"
density="compact"
variant="outlined"
></v-text-field>
<vue-tel-input <vue-tel-input
type="number" type="number"
v-model="telephone" v-model="telephone"
:defaultCountry="setCountryCode" :defaultCountry="setCountryCode"
:class="phoneNumberError ? 'phonenumber-input-error-border':'phonenumber-custom-input'" :class="
phoneNumberError
? 'phonenumber-input-error-border'
: 'phonenumber-custom-input'
"
@input="validateNumber" @input="validateNumber"
></vue-tel-input> ></vue-tel-input>
<span <span
class="red--text caption ml-3" class="red--text caption ml-3"
v-show="phoneNumberError" v-show="phoneNumberError"
>This field is required</span> >This field is required</span
>
</v-col> </v-col>
</v-row> </v-row>
</v-form> </v-form>
</v-col> </v-col>
<v-col cols="12" sm="6"> <v-col cols="12" sm="6">
<p class="h3 body-font text-uppercase primary--text">Address</p> <p class="h3 body-font text-uppercase text-primary">
Contact Information
</p>
<div class="address-book-line mb-5"></div> <div class="address-book-line mb-5"></div>
<ShippingAddressFormComponent <ShippingAddressFormComponent
@ -212,52 +286,59 @@
ref="addressForm" ref="addressForm"
/> />
<v-checkbox <v-checkbox
v-if="addressId!=basicInfo.defaultBilling" v-if="addressId != basicInfo.defaultBilling"
v-model="defaultBilling" v-model="defaultBilling"
class="pt-2" class="pt-2"
label="Use as my default billing address" label="Use as my default billing address"
color="primary"
></v-checkbox> ></v-checkbox>
<v-alert <v-alert
class="alert-box-outline" class="alert-box-outline"
type="warning" type="warning"
text text
dense dense
v-if="addressId==basicInfo.defaultBilling" v-if="addressId == basicInfo.defaultBilling"
>This is default billing address</v-alert>
>This is default billing address</v-alert
>
<v-checkbox <v-checkbox
v-if="addressId!=basicInfo.defaultShipping" v-if="addressId != basicInfo.defaultShipping"
v-model="defaultShipping" v-model="defaultShipping"
class="mt-0" class="mt-0"
label="Use as my default shipping address" label="Use as my default shipping address"
color="primary"
></v-checkbox> ></v-checkbox>
<v-alert <v-alert
class="alert-box-outline" class="alert-box-outline"
type="warning" type="warning"
text text
dense dense
v-if="addressId==basicInfo.defaultShipping" v-if="addressId == basicInfo.defaultShipping"
>This is default shipping address</v-alert> >This is default shipping address</v-alert
>
</v-col> </v-col>
</v-row> </v-row>
<v-hover v-slot:default="{ hover }"> <v-hover v-slot:default="{ isHovering, props }">
<v-btn <v-btn
v-bind="props"
class="text-uppercase address-book-button" class="text-uppercase address-book-button"
:outlined="hover" :variant="isHovering ? 'outlined' : 'outlined'"
:color="hover?'white':'primary'" :class="isHovering ? ' bg-white text-primary' : 'bg-primary'"
:class="hover?'primary--text':'white--text'" rounded="0"
size="large"
@click.stop="dialog = dialog" @click.stop="dialog = dialog"
tile
large
depressed
@click="submit()" @click="submit()"
>SAVE ADDRESS</v-btn> >SAVE ADDRESS</v-btn
>
</v-hover> </v-hover>
<v-dialog v-model="dialog" persistent max-width="1100px"> <v-dialog v-model="dialog" persistent max-width="1100px">
<v-card class="pb-2"> <v-card class="pb-2">
<v-card-title class="pb-2"> <v-card-title class="pb-2">
<v-row no-gutters> <v-row no-gutters>
<v-col cols="11"> <v-col cols="11">
<p class="h2 mb-1 body-font text-uppercase primary--text">Verify Your Address</p> <p class="h2 mb-1 body-font text-uppercase primary--text">
Verify Your Address
</p>
</v-col> </v-col>
<v-col cols="1" class="text-right"> <v-col cols="1" class="text-right">
@ -265,15 +346,24 @@
to to
class="text-decoration-none black--text fontcolor-black-light" class="text-decoration-none black--text fontcolor-black-light"
> >
<div @click="dialog=false">X</div> <div @click="dialog = false">X</div>
</router-link> </router-link>
</v-col> </v-col>
</v-row> </v-row>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<div class="address-book-line my-1"></div> <div class="address-book-line my-1"></div>
<v-row class="mt-12" justify="center" align="center" v-if="addressInProgress"> <v-row
<v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular> class="mt-12"
justify="center"
align="center"
v-if="addressInProgress"
>
<v-progress-circular
:size="60"
color="primary"
indeterminate
></v-progress-circular>
</v-row> </v-row>
<MeVerifyAddressComponent <MeVerifyAddressComponent
@ -287,27 +377,30 @@
<v-card-actions class="px-2 py-3"> <v-card-actions class="px-2 py-3">
<v-row no-gutters> <v-row no-gutters>
<v-col cols="12" class="text-right"> <v-col cols="12" class="text-right">
<v-hover v-slot:default="{ hover }"> <v-hover v-slot:default="{ isHovering, props }">
<v-btn <v-btn
class="text-uppercase px-3 mr-2 my-2 address-book-button" class="text-uppercase px-3 mr-2 my-2 address-book-button"
:outlined="hover" v-bind="props"
:color="hover?'white':'primary'" :variant="isHovering ? 'outlined' : 'outlined'"
:class="hover?'primary--text':'white--text'" :class="
tile isHovering ? ' bg-white text-primary' : 'bg-primary'
large "
depressed rounded="0"
@click="dialog=false" size="large"
>EDIT ADDRESS</v-btn> @click="dialog = false"
>EDIT ADDRESS</v-btn
>
</v-hover> </v-hover>
<v-hover v-slot:default="{ hover }"> <v-hover v-slot:default="{ isHovering, props }">
<v-btn <v-btn
class="text-uppercase px-3 mr-2 my-2 address-book-save-button" class="text-uppercase px-3 mr-2 my-2 address-book-save-button"
:outlined="hover" v-bind="props"
:color="hover?'white':'success'" :variant="isHovering ? 'outlined' : 'outlined'"
:class="hover?'success--text':'white--text'" :class="
tile isHovering ? ' bg-white text-primary' : 'bg-primary'
large "
depressed rounded="0"
size="large"
@click="saveAddress" @click="saveAddress"
:disabled="inProgress" :disabled="inProgress"
> >
@ -316,7 +409,8 @@
color="success" color="success"
indeterminate indeterminate
v-if="inProgress" v-if="inProgress"
></v-progress-circular>SAVE ADDRESS ></v-progress-circular
>SAVE ADDRESS
</v-btn> </v-btn>
</v-hover> </v-hover>
</v-col> </v-col>
@ -329,21 +423,6 @@
</v-col> </v-col>
</v-row> </v-row>
<!-- <v-row no-gutters>
<v-col cols="12">
<p class="h2 mb-6">Address Book</p>
<p class="h3">Default Addresses</p>
<hr/>
<v-row no-gutters class="mt-8">
<v-col cols="12" sm="6">
<p class="body"><b>Default Billing Address</b></p>
<BillingAddressComponent v-bind:contactDetails="addressFields"/>
</v-col>
</v-row>
</v-col>
</v-row>-->
<ConfirmationDialog <ConfirmationDialog
:confirmationDialog="confirmationDialog" :confirmationDialog="confirmationDialog"
:confirmationDetails="confirmation" :confirmationDetails="confirmation"
@ -363,14 +442,14 @@ import MeVerifyAddressComponent from "@/components/retailer/address/MeVerifyAddr
import { loginInterrupt } from "@/services/nav"; import { loginInterrupt } from "@/services/nav";
import SnackbarComponent from "@/components/common/SnackbarComponent.vue"; import SnackbarComponent from "@/components/common/SnackbarComponent.vue";
import ConfirmationDialog from "@/components/common/ConfirmationDialog.vue"; import ConfirmationDialog from "@/components/common/ConfirmationDialog.vue";
import { VueTelInput } from 'vue3-tel-input' import { VueTelInput } from "vue3-tel-input";
//import BillingAddressComponent from "@/components/retailer/address/BillingAddressComponent.vue"; //import BillingAddressComponent from "@/components/retailer/address/BillingAddressComponent.vue";
import { createHelpers } from "vuex-map-fields"; import { createHelpers } from "vuex-map-fields";
const { mapFields } = createHelpers({ const { mapFields } = createHelpers({
getterType: "accountOne/getField", getterType: "accountOne/getField",
mutationType: "accountOne/updateField" mutationType: "accountOne/updateField",
}); });
export default { export default {
name: "AddressBook", name: "AddressBook",
@ -380,7 +459,7 @@ export default {
phoneNumberError: false, phoneNumberError: false,
confirmationDialog: false, confirmationDialog: false,
confirmation: { confirmation: {
confirmationMessage: "" confirmationMessage: "",
}, },
dialog: false, dialog: false,
deleteAddressDialog: false, deleteAddressDialog: false,
@ -394,17 +473,18 @@ export default {
show: false, show: false,
message: null, message: null,
color: null, color: null,
timeout: 0 timeout: 0,
}, },
textRules: [ textRules: [
v => !!v || "This field is required", (v) => !!v || "This field is required",
v => (v && v.length >= 3) || "This field must be at least 3 characters" (v) =>
(v && v.length >= 3) || "This field must be at least 3 characters",
], ],
phoneNumberRules: [ phoneNumberRules: [
v => !!v || "This field is required", (v) => !!v || "This field is required",
v => (v) =>
(v && v.length >= 8) || "Phone Number must be at least 8 characters" (v && v.length >= 8) || "Phone Number must be at least 8 characters",
] ],
}; };
}, },
components: { components: {
@ -415,24 +495,24 @@ export default {
BillingAddressComponent, BillingAddressComponent,
ShippingAddressComponent, ShippingAddressComponent,
ConfirmationDialog, ConfirmationDialog,
VueTelInput VueTelInput,
//BillingAddressComponent //BillingAddressComponent
}, },
computed: { computed: {
hideAndShowFields: function() { hideAndShowFields: function () {
let currentName = this.$route.name let currentName = this.$route.name;
if (currentName === "AddressBook") { if (currentName === "AddressBook") {
return false; return false;
} }
return null; return null;
}, },
basicInfo: function() { basicInfo: function () {
return this.$store.state.accountOne.one; return this.$store.state.accountOne.one;
}, },
addressFields: function() { addressFields: function () {
return this.$store.state.accountOne.address; return this.$store.state.accountOne.address;
}, },
errorMessage: function() { errorMessage: function () {
return this.$store.state.accountOne.errorMessage; return this.$store.state.accountOne.errorMessage;
}, },
...mapFields([ ...mapFields([
@ -447,29 +527,29 @@ export default {
"allCountries", "allCountries",
"countryAllStates", "countryAllStates",
"inProgress", "inProgress",
"addressIndex" "addressIndex",
]), ]),
userAuth: function() { userAuth: function () {
return this.$store.state.auth.userAuth; return this.$store.state.auth.userAuth;
}, },
addressId: function() { addressId: function () {
return this.$route.params.addressId; return this.$route.params.addressId;
}, },
shippingAddressDetails: function() { shippingAddressDetails: function () {
return this.$store.state.accountOne.shippingAddressDetails; return this.$store.state.accountOne.shippingAddressDetails;
}, },
billingAddressDetails: function() { billingAddressDetails: function () {
return this.$store.state.accountOne.billingAddressDetails; return this.$store.state.accountOne.billingAddressDetails;
}, },
addresses: function() { addresses: function () {
return this.$store.state.accountOne.addresses; return this.$store.state.accountOne.addresses;
}, },
address: function() { address: function () {
return this.$store.state.accountOne.address; return this.$store.state.accountOne.address;
}, },
fetchInProgress: function() { fetchInProgress: function () {
return this.$store.state.accountOne.fetchInProgress; return this.$store.state.accountOne.fetchInProgress;
} },
}, },
methods: { methods: {
resetForm() { resetForm() {
@ -482,35 +562,37 @@ export default {
} }
}, },
phoneNumberValidation() {}, phoneNumberValidation() {},
submit: async function() { submit: async function () {
try{ try {
if ( if (
this.$refs.contactForm.validate() && this.$refs.contactForm.validate() &&
this.$refs.addressForm.$refs.shippingAddressform.validate() this.$refs.addressForm.$refs.shippingAddressform.validate()
) { ) {
this.addressInProgress = true; this.addressInProgress = true;
this.dialog = true; this.dialog = true;
let response = await this.$store let response = await this.$store.dispatch(
.dispatch("accountOne/validateAddress", this.addressFields) "accountOne/validateAddress",
if(typeof(response) == "string"){ this.addressFields
this.geoCodedAddress = response; );
this.geoCodedAddressFlag = false; if (typeof response == "string") {
}else if(typeof(response) == "object"){ this.geoCodedAddress = response;
this.geoCodedAddress = "Address is geocoded."; this.geoCodedAddressFlag = false;
this.geoCodedAddressFlag = true; } 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 = { this.snackbar = {
message: error, message: error,
color: "error", color: "error",
show: true, show: true,
timeout: 3000 timeout: 3000,
}; };
} }
}, },
saveAddress: function() { saveAddress: function () {
this.$store this.$store
.dispatch("accountOne/updateAddress") .dispatch("accountOne/updateAddress")
.then(() => { .then(() => {
@ -518,30 +600,30 @@ export default {
message: "Address Updated Successfully", message: "Address Updated Successfully",
color: "success", color: "success",
show: true, show: true,
timeout: 3000 timeout: 3000,
}; };
let page = localStorage.getItem("cr_meCurrentPage"); let page = localStorage.getItem("cr_meCurrentPage");
setTimeout(() => { setTimeout(() => {
if (page == "addressBook") if (page == "addressBook")
this.$router.push({ this.$router.push({
name: "AddressBook" name: "AddressBook",
}); });
else else
this.$router.push({ this.$router.push({
name: "AccountDashboard" name: "AccountDashboard",
}); });
}, 1000); }, 1000);
}) })
.catch(error => { .catch((error) => {
this.snackbar = { this.snackbar = {
message: error, message: error,
color: "error", color: "error",
show: true, show: true,
timeout: 3000 timeout: 3000,
}; };
setTimeout(() => { setTimeout(() => {
this.$router.push({ this.$router.push({
name: "AccountDashboard" name: "AccountDashboard",
}); });
}, 1000); }, 1000);
}); });
@ -562,14 +644,14 @@ export default {
localStorage.setItem("cr_meCurrentPage", "addressBook"); localStorage.setItem("cr_meCurrentPage", "addressBook");
this.$router.push({ this.$router.push({
name: "EditAddressBook", name: "EditAddressBook",
params: { addressId: addressId } params: { addressId: addressId },
}); });
}, },
deleteAddress(address) { deleteAddress(address) {
this.addressObj = address; this.addressObj = address;
(this.confirmationDialog = true), (this.confirmationDialog = true),
(this.confirmation = { (this.confirmation = {
confirmationMessage: "Are you sure you want to delete this address?" confirmationMessage: "Are you sure you want to delete this address?",
}); });
}, },
removeAddress(action) { removeAddress(action) {
@ -578,14 +660,14 @@ export default {
} }
(this.confirmationDialog = false), (this.confirmationDialog = false),
(this.confirmation = { (this.confirmation = {
confirmationMessage: "" confirmationMessage: "",
}); });
this.addressObj = ""; this.addressObj = "";
}, },
validateNumber(number, data) { validateNumber(number, data) {
if (data.possible && data.valid) this.phoneNumberError = false; if (data.possible && data.valid) this.phoneNumberError = false;
else this.phoneNumberError = true; else this.phoneNumberError = true;
} },
}, },
async created() { async created() {
if (this.$route.params.addressId == "new") { if (this.$route.params.addressId == "new") {
@ -604,7 +686,7 @@ export default {
this.$store.dispatch("accountOne/setAddress", null); this.$store.dispatch("accountOne/setAddress", null);
} }
} }
} },
}; };
</script> </script>
<style src="./address_book.scss" lang="scss" scoped/> <style src="./address_book.scss" lang="scss" scoped/>