address fixes
This commit is contained in:
rakesh
parent
653dbf3b8a
commit
a39efcdfd8
|
|
@ -7,9 +7,19 @@
|
|||
already registered?
|
||||
<span class="text-uppercase ml-2">click here to login</span>
|
||||
</p>
|
||||
<v-text-field label="Email Address" ref="emailAddress" outlined dense :rules="emailRules"></v-text-field>
|
||||
<v-text-field
|
||||
label="Email Address"
|
||||
ref="emailAddress"
|
||||
outlined
|
||||
dense
|
||||
:rules="emailRules"
|
||||
></v-text-field>
|
||||
<span>You can create an account after checkout.</span>
|
||||
<v-checkbox v-model="newsletter" label="Subscribe to our newsletter" color="indigo"></v-checkbox>
|
||||
<v-checkbox
|
||||
v-model="newsletter"
|
||||
label="Subscribe to our newsletter"
|
||||
color="indigo"
|
||||
></v-checkbox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters>
|
||||
|
|
@ -18,8 +28,9 @@
|
|||
label="First Name"
|
||||
ref="firstName"
|
||||
v-model="firstname"
|
||||
outlined
|
||||
dense
|
||||
color="primary"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
:rules="hideAndShowFields ? textRules : []"
|
||||
v-show="hideAndShowFields"
|
||||
@input="verifyAddress"
|
||||
|
|
@ -28,8 +39,9 @@
|
|||
label="Last Name"
|
||||
ref="lastName"
|
||||
v-model="lastname"
|
||||
outlined
|
||||
dense
|
||||
color="primary"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
:rules="hideAndShowFields ? textRules : []"
|
||||
v-show="hideAndShowFields"
|
||||
@input="verifyAddress"
|
||||
|
|
@ -38,8 +50,9 @@
|
|||
label="Street Address"
|
||||
ref="streetAddressOne"
|
||||
v-model="streetNoOne"
|
||||
outlined
|
||||
dense
|
||||
color="primary"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
required
|
||||
:rules="textRules"
|
||||
@input="verifyAddress"
|
||||
|
|
@ -49,16 +62,18 @@
|
|||
label="Apt, Suite, Co., C/O etc."
|
||||
ref="streetAddressTwo"
|
||||
v-model="streetNoTwo"
|
||||
outlined
|
||||
dense
|
||||
color="primary"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
required
|
||||
@change="checkPOBoxAddress()"
|
||||
@input="verifyAddress"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="City"
|
||||
outlined
|
||||
dense
|
||||
color="primary"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
ref="city"
|
||||
:rules="textRules"
|
||||
v-model="city"
|
||||
|
|
@ -66,48 +81,59 @@
|
|||
></v-text-field>
|
||||
<v-select
|
||||
:items="allCountries"
|
||||
dense
|
||||
outlined
|
||||
color="primary"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
label="Country"
|
||||
ref="country"
|
||||
item-text="label"
|
||||
item-title="label"
|
||||
v-model="countryId"
|
||||
:model-value="countryId"
|
||||
item-value="value"
|
||||
:selected="countryId"
|
||||
@change="fetchStates(countryId)"
|
||||
:rules="[val => !!val || 'Please select the Country']"
|
||||
@update:modelValue="fetchStates(countryId)"
|
||||
:rules="[(val) => !!val || 'Please select the Country']"
|
||||
></v-select>
|
||||
<v-text-field
|
||||
label="Zip/Postal Code"
|
||||
ref="zipCode"
|
||||
:rules="zipCodeRules"
|
||||
v-model="postcode"
|
||||
outlined
|
||||
dense
|
||||
color="primary"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
@input="verifyAddress"
|
||||
></v-text-field>
|
||||
<!-- <v-alert type="error" v-if="zipCodeRules">{{zipCodeValidation}}</v-alert> -->
|
||||
<v-select
|
||||
:items="regionList"
|
||||
dense
|
||||
label="State/Province"
|
||||
v-model="regionId"
|
||||
item-text="label"
|
||||
:model-value="regionId"
|
||||
item-title="label"
|
||||
item-value="value"
|
||||
outlined
|
||||
@change="checkRegionName()"
|
||||
:rules="[v => !!v || 'Please select the State']"
|
||||
color="primary"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
@update:modelValue="checkRegionName()"
|
||||
:rules="[(v) => !!v || 'Please select the State']"
|
||||
></v-select>
|
||||
<vue-tel-input
|
||||
type="number"
|
||||
v-model="telephone"
|
||||
:defaultCountry="setCountryCode"
|
||||
:class="phoneNumberError ? 'phonenumber-input-error-border':'phonenumber-custom-input'"
|
||||
:class="
|
||||
phoneNumberError
|
||||
? 'phonenumber-input-error-border'
|
||||
: 'phonenumber-custom-input'
|
||||
"
|
||||
@input="validateNumber"
|
||||
ref="phoneNumber"
|
||||
v-show="hideAndShowFields"
|
||||
></vue-tel-input>
|
||||
<span class="red--text caption ml-3" v-show="phoneNumberError">This field is required</span>
|
||||
<span class="red--text caption ml-3" v-show="phoneNumberError"
|
||||
>This field is required</span
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
|
@ -117,11 +143,11 @@
|
|||
//import { mapState } from "vuex";
|
||||
import { createHelpers } from "vuex-map-fields";
|
||||
import { fetchStates } from "@/services/util.service";
|
||||
import { VueTelInput } from 'vue3-tel-input'
|
||||
import { VueTelInput } from "vue3-tel-input";
|
||||
|
||||
const { mapFields } = createHelpers({
|
||||
getterType: "accountOne/getField",
|
||||
mutationType: "accountOne/updateField"
|
||||
mutationType: "accountOne/updateField",
|
||||
});
|
||||
export default {
|
||||
name: "ShippingAddressFormComponent",
|
||||
|
|
@ -137,24 +163,25 @@ export default {
|
|||
valid: true,
|
||||
lazy: false,
|
||||
textRules: [
|
||||
v => !!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",
|
||||
],
|
||||
zipCodeRules: [
|
||||
v => !!v || "Zip code is required",
|
||||
v => (v && v.length >= 5) || "This field must be at least 5 characters"
|
||||
(v) => !!v || "Zip code is required",
|
||||
(v) => (v && v.length >= 5) || "This field must be at least 5 characters",
|
||||
],
|
||||
emailRules: [
|
||||
v => !!v || "E-mail is required",
|
||||
v => /.+@.+\..+/.test(v) || "E-mail must be valid"
|
||||
(v) => !!v || "E-mail is required",
|
||||
(v) => /.+@.+\..+/.test(v) || "E-mail must be valid",
|
||||
],
|
||||
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: {
|
||||
VueTelInput
|
||||
VueTelInput,
|
||||
},
|
||||
computed: {
|
||||
...mapFields([
|
||||
|
|
@ -171,13 +198,13 @@ export default {
|
|||
"address.streetNoOne",
|
||||
"address.streetNoTwo",
|
||||
"address.firstname",
|
||||
"address.lastname"
|
||||
"address.lastname",
|
||||
]),
|
||||
allCountries: function () {
|
||||
return this.$store.state.accountOne.allCountries.map(countries => {
|
||||
return this.$store.state.accountOne.allCountries.map((countries) => {
|
||||
return {
|
||||
value: countries.id,
|
||||
label: countries.fullNameEnglish
|
||||
label: countries.fullNameEnglish,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
|
@ -189,7 +216,7 @@ export default {
|
|||
},
|
||||
userAuth: function () {
|
||||
return this.$store.state.auth.userAuth;
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/*countryId: function() {
|
||||
|
|
@ -200,7 +227,7 @@ export default {
|
|||
},
|
||||
valid() {
|
||||
this.$emit("actionValid", this.valid);
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
verifyAddress() {
|
||||
|
|
@ -210,7 +237,7 @@ export default {
|
|||
if (this.regionId) {
|
||||
this.regionId = this.regionId.toString();
|
||||
|
||||
let regionName = this.regionList.filter(obj => {
|
||||
let regionName = this.regionList.filter((obj) => {
|
||||
if (obj.value == this.regionId) return obj;
|
||||
});
|
||||
this.$emit("regionDetails", regionName);
|
||||
|
|
@ -221,9 +248,9 @@ export default {
|
|||
/*eslint-disable*/
|
||||
// this.$refs.shippingAddressform.resetValidation();
|
||||
this.regionList = fetchStates(countryId, this.countryAndStatesList);
|
||||
this.regionId = this.regionId ? this.regionId.toString(): '';
|
||||
this.regionId = this.regionId ? this.regionId.toString() : "";
|
||||
if (this.regionId) {
|
||||
let regionName = this.regionList.filter(obj => {
|
||||
let regionName = this.regionList.filter((obj) => {
|
||||
if (obj.value == this.regionId) return obj;
|
||||
});
|
||||
this.$emit("regionDetails", regionName);
|
||||
|
|
@ -257,10 +284,10 @@ export default {
|
|||
if (this.streetNoTwo)
|
||||
street[1] = this.streetNoTwo ? this.streetNoTwo : "";
|
||||
let address = {
|
||||
street: street
|
||||
}
|
||||
street: street,
|
||||
};
|
||||
await this.$store.dispatch("accountOne/checkPOBoxAddress", address);
|
||||
}
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
await this.$store.dispatch("accountOne/fetchCountries");
|
||||
|
|
@ -273,6 +300,6 @@ export default {
|
|||
this.$emit("actionValid", this.valid);
|
||||
this.$emit("verifyAddress");
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@
|
|||
dense
|
||||
v-if="wrongPasswordMessage"
|
||||
>{{wrongPasswordMessage}}</v-alert>
|
||||
<p class="mb-1 h2 body-font text-uppercase primary--text">Edit Account Information</p>
|
||||
<p class="mb-1 h2 body-font text-uppercase text-primary">Edit Account Information</p>
|
||||
<v-form ref="form" v-model="valid">
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6" md="6" lg="6">
|
||||
<div>
|
||||
<p class="mt-4 h3 body-font text-uppercase primary--text">Account Information</p>
|
||||
<p class="mt-4 h3 body-font text-uppercase text-primary">Account Information</p>
|
||||
<div class="edit-account-info-line mt-5 mb-7"></div>
|
||||
|
||||
<v-text-field
|
||||
|
|
@ -22,17 +22,20 @@
|
|||
ref="firstname"
|
||||
v-model="firstname"
|
||||
:rules="textRules"
|
||||
outlined
|
||||
variant="outlined"
|
||||
required
|
||||
dense
|
||||
color="primary"
|
||||
density="compact"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="Last Name"
|
||||
ref="lastname"
|
||||
v-model="lastname"
|
||||
:rules="textRules"
|
||||
outlined
|
||||
dense
|
||||
|
||||
color="primary"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
required
|
||||
></v-text-field>
|
||||
<!--<v-checkbox v-model="email" label="Change Email" color="indigo" value="indigo"></v-checkbox>-->
|
||||
|
|
@ -40,43 +43,21 @@
|
|||
</v-col>
|
||||
<v-col cols="12" sm="6" md="6" lg="6">
|
||||
<div>
|
||||
<!--<v-col class="mx-0 px-0" v-if="email && !password">
|
||||
<v-row class="ml-1 mt-1">
|
||||
<p class="h3 body-font mr-3">Change Email</p>
|
||||
</v-row>
|
||||
<div class="edit-account-info-line mt-1 mb-7"></div>
|
||||
<v-text-field
|
||||
label="Email"
|
||||
ref="emailId"
|
||||
v-model="emailId"
|
||||
:rules="textRules"
|
||||
outlined
|
||||
required
|
||||
dense
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="Current Password"
|
||||
ref="currentPassword"
|
||||
v-model="currentPassword"
|
||||
:rules="textRules"
|
||||
outlined
|
||||
dense
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>-->
|
||||
|
||||
<v-col class="mx-0 px-0" v-if="password">
|
||||
<v-row class="ml-1 mt-1">
|
||||
<p class="h3 body-font">Change Password</p>
|
||||
<p class="mt-4 h3 body-font text-uppercase text-primary">Change Password</p>
|
||||
</v-row>
|
||||
<div class="edit-account-info-line mt-1 mb-7"></div>
|
||||
<div class="edit-account-info-line mt-5 mb-7"></div>
|
||||
<v-text-field
|
||||
type="password"
|
||||
label="Current Password"
|
||||
ref="currentPassword"
|
||||
v-model="currentPassword"
|
||||
:rules="passwordRules"
|
||||
outlined
|
||||
dense
|
||||
color="primary"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
type="password"
|
||||
|
|
@ -84,8 +65,9 @@
|
|||
ref="newPassword"
|
||||
:rules="commonValidationRules.passwordRule"
|
||||
v-model="newPassword"
|
||||
outlined
|
||||
dense
|
||||
color="primary"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
type="password"
|
||||
|
|
@ -93,69 +75,27 @@
|
|||
ref="confirmPassword"
|
||||
v-model="confirmPassword"
|
||||
:rules="[passwordConfirmationRule]"
|
||||
outlined
|
||||
dense
|
||||
color="primary"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<!--<v-col class="mx-0 px-0" v-if="email && password">
|
||||
<v-row class="ml-1 mt-1">
|
||||
<p class="h3 body-font mr-3">Change Email &</p>
|
||||
<p class="h3 body-font">Change Password</p>
|
||||
</v-row>
|
||||
<div class="edit-account-info-line mt-1 mb-7"></div>
|
||||
<v-text-field
|
||||
label="Email"
|
||||
ref="emailId"
|
||||
v-model="emailId"
|
||||
:rules="textRules"
|
||||
outlined
|
||||
required
|
||||
dense
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="Current Password"
|
||||
ref="currentPassword"
|
||||
v-model="currentPassword"
|
||||
:rules="textRules"
|
||||
outlined
|
||||
dense
|
||||
required
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="New Password"
|
||||
ref="newPassword"
|
||||
v-model="newPassword"
|
||||
:rules="textRules"
|
||||
outlined
|
||||
dense
|
||||
required
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="Confirm New Password"
|
||||
ref="confirmPassword"
|
||||
v-model="confirmPassword"
|
||||
:rules="textRules"
|
||||
outlined
|
||||
dense
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>-->
|
||||
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-checkbox v-model="password" class="mt-0" label="Change Password" color="indigo"></v-checkbox>
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-btn
|
||||
:disabled="inProgress"
|
||||
large
|
||||
:outlined="hover"
|
||||
:color="hover?'white':'primary'"
|
||||
:class="hover?'primary--text':'white--text'"
|
||||
:variant="isHovering ? 'outlined' : 'outlined'"
|
||||
:class="isHovering ? ' bg-white text-primary' : 'bg-primary'"
|
||||
v-bind="props"
|
||||
@click="submit"
|
||||
depressed
|
||||
size="large"
|
||||
class="mt-6 px-12 body-font edit-account-info-button"
|
||||
tile
|
||||
dark
|
||||
rounded="0"
|
||||
>
|
||||
<v-progress-circular :size="20" color="primary" indeterminate v-if="inProgress"></v-progress-circular>SAVE
|
||||
</v-btn>
|
||||
|
|
@ -224,8 +164,9 @@ export default {
|
|||
},*/
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
if (this.$refs.form.validate() && !this.password) {
|
||||
async submit() {
|
||||
let validate = await this.$refs.form.validate();
|
||||
if (validate && validate.valid && !this.password) {
|
||||
this.$store
|
||||
.dispatch("accountOne/changeBasicInfo")
|
||||
.then(() => {
|
||||
|
|
@ -254,7 +195,8 @@ export default {
|
|||
});
|
||||
}, 3000);
|
||||
});
|
||||
} else if (this.$refs.form.validate() && this.password) {
|
||||
}
|
||||
else if (validate && validate.valid && this.password) {
|
||||
localStorage.setItem("cr_changePassowrd", true);
|
||||
this.$store
|
||||
.dispatch("accountOne/changeBasicInfo", {
|
||||
|
|
|
|||
Loading…
Reference in New Issue