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

address fixes

This commit is contained in:
rakesh 2023-05-13 17:08:49 +05:30
parent 653dbf3b8a
commit a39efcdfd8
2 changed files with 119 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,9 +7,19 @@
already registered? already registered?
<span class="text-uppercase ml-2">click here to login</span> <span class="text-uppercase ml-2">click here to login</span>
</p> </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> <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-col>
</v-row> </v-row>
<v-row no-gutters> <v-row no-gutters>
@ -18,9 +28,10 @@
label="First Name" label="First Name"
ref="firstName" ref="firstName"
v-model="firstname" v-model="firstname"
outlined color="primary"
dense density="compact"
:rules="hideAndShowFields? textRules:[]" variant="outlined"
:rules="hideAndShowFields ? textRules : []"
v-show="hideAndShowFields" v-show="hideAndShowFields"
@input="verifyAddress" @input="verifyAddress"
></v-text-field> ></v-text-field>
@ -28,9 +39,10 @@
label="Last Name" label="Last Name"
ref="lastName" ref="lastName"
v-model="lastname" v-model="lastname"
outlined color="primary"
dense density="compact"
:rules="hideAndShowFields? textRules:[]" variant="outlined"
:rules="hideAndShowFields ? textRules : []"
v-show="hideAndShowFields" v-show="hideAndShowFields"
@input="verifyAddress" @input="verifyAddress"
></v-text-field> ></v-text-field>
@ -38,8 +50,9 @@
label="Street Address" label="Street Address"
ref="streetAddressOne" ref="streetAddressOne"
v-model="streetNoOne" v-model="streetNoOne"
outlined color="primary"
dense density="compact"
variant="outlined"
required required
:rules="textRules" :rules="textRules"
@input="verifyAddress" @input="verifyAddress"
@ -49,16 +62,18 @@
label="Apt, Suite, Co., C/O etc." label="Apt, Suite, Co., C/O etc."
ref="streetAddressTwo" ref="streetAddressTwo"
v-model="streetNoTwo" v-model="streetNoTwo"
outlined color="primary"
dense density="compact"
variant="outlined"
required required
@change="checkPOBoxAddress()" @change="checkPOBoxAddress()"
@input="verifyAddress" @input="verifyAddress"
></v-text-field> ></v-text-field>
<v-text-field <v-text-field
label="City" label="City"
outlined color="primary"
dense density="compact"
variant="outlined"
ref="city" ref="city"
:rules="textRules" :rules="textRules"
v-model="city" v-model="city"
@ -66,48 +81,59 @@
></v-text-field> ></v-text-field>
<v-select <v-select
:items="allCountries" :items="allCountries"
dense color="primary"
outlined density="compact"
variant="outlined"
label="Country" label="Country"
ref="country" ref="country"
item-text="label" item-title="label"
v-model="countryId" v-model="countryId"
:model-value="countryId"
item-value="value" item-value="value"
:selected="countryId" :selected="countryId"
@change="fetchStates(countryId)" @update:modelValue="fetchStates(countryId)"
:rules="[val => !!val || 'Please select the Country']" :rules="[(val) => !!val || 'Please select the Country']"
></v-select> ></v-select>
<v-text-field <v-text-field
label="Zip/Postal Code" label="Zip/Postal Code"
ref="zipCode" ref="zipCode"
:rules="zipCodeRules" :rules="zipCodeRules"
v-model="postcode" v-model="postcode"
outlined color="primary"
dense density="compact"
variant="outlined"
@input="verifyAddress" @input="verifyAddress"
></v-text-field> ></v-text-field>
<!-- <v-alert type="error" v-if="zipCodeRules">{{zipCodeValidation}}</v-alert> --> <!-- <v-alert type="error" v-if="zipCodeRules">{{zipCodeValidation}}</v-alert> -->
<v-select <v-select
:items="regionList" :items="regionList"
dense
label="State/Province" label="State/Province"
v-model="regionId" v-model="regionId"
item-text="label" :model-value="regionId"
item-title="label"
item-value="value" item-value="value"
outlined color="primary"
@change="checkRegionName()" density="compact"
:rules="[v => !!v || 'Please select the State']" variant="outlined"
@update:modelValue="checkRegionName()"
:rules="[(v) => !!v || 'Please select the State']"
></v-select> ></v-select>
<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"
ref="phoneNumber" ref="phoneNumber"
v-show="hideAndShowFields" v-show="hideAndShowFields"
></vue-tel-input> ></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-col>
</v-row> </v-row>
</v-form> </v-form>
@ -117,11 +143,11 @@
//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' import { VueTelInput } from "vue3-tel-input";
const { mapFields } = createHelpers({ const { mapFields } = createHelpers({
getterType: "accountOne/getField", getterType: "accountOne/getField",
mutationType: "accountOne/updateField" mutationType: "accountOne/updateField",
}); });
export default { export default {
name: "ShippingAddressFormComponent", name: "ShippingAddressFormComponent",
@ -137,24 +163,25 @@ export default {
valid: true, valid: true,
lazy: false, lazy: false,
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",
], ],
zipCodeRules: [ zipCodeRules: [
v => !!v || "Zip code is required", (v) => !!v || "Zip code is required",
v => (v && v.length >= 5) || "This field must be at least 5 characters" (v) => (v && v.length >= 5) || "This field must be at least 5 characters",
], ],
emailRules: [ emailRules: [
v => !!v || "E-mail is required", (v) => !!v || "E-mail is required",
v => /.+@.+\..+/.test(v) || "E-mail must be valid" (v) => /.+@.+\..+/.test(v) || "E-mail must be valid",
], ],
phoneNumberRules: [ phoneNumberRules: [
v => !!v || "This field is required", (v) => !!v || "This field is required",
v => (v && v.length >= 8) || "Phone Number must be at least 8 characters" (v) =>
] (v && v.length >= 8) || "Phone Number must be at least 8 characters",
],
}), }),
components: { components: {
VueTelInput VueTelInput,
}, },
computed: { computed: {
...mapFields([ ...mapFields([
@ -171,36 +198,36 @@ export default {
"address.streetNoOne", "address.streetNoOne",
"address.streetNoTwo", "address.streetNoTwo",
"address.firstname", "address.firstname",
"address.lastname" "address.lastname",
]), ]),
allCountries: function() { allCountries: function () {
return this.$store.state.accountOne.allCountries.map(countries => { return this.$store.state.accountOne.allCountries.map((countries) => {
return { return {
value: countries.id, value: countries.id,
label: countries.fullNameEnglish label: countries.fullNameEnglish,
}; };
}); });
}, },
add: function() { add: function () {
return this.$store.state.accountOne.address; return this.$store.state.accountOne.address;
}, },
countryAndStatesList() { countryAndStatesList() {
return this.$store.state.accountOne.allCountries; return this.$store.state.accountOne.allCountries;
}, },
userAuth: function() { userAuth: function () {
return this.$store.state.auth.userAuth; return this.$store.state.auth.userAuth;
} },
}, },
watch: { watch: {
/*countryId: function() { /*countryId: function() {
this.updateRegionList(); this.updateRegionList();
},*/ },*/
regionId: function() { regionId: function () {
this.fetchStates(this.countryId); this.fetchStates(this.countryId);
}, },
valid() { valid() {
this.$emit("actionValid", this.valid); this.$emit("actionValid", this.valid);
} },
}, },
methods: { methods: {
verifyAddress() { verifyAddress() {
@ -210,7 +237,7 @@ export default {
if (this.regionId) { if (this.regionId) {
this.regionId = this.regionId.toString(); this.regionId = this.regionId.toString();
let regionName = this.regionList.filter(obj => { let regionName = this.regionList.filter((obj) => {
if (obj.value == this.regionId) return obj; if (obj.value == this.regionId) return obj;
}); });
this.$emit("regionDetails", regionName); this.$emit("regionDetails", regionName);
@ -221,9 +248,9 @@ export default {
/*eslint-disable*/ /*eslint-disable*/
// this.$refs.shippingAddressform.resetValidation(); // this.$refs.shippingAddressform.resetValidation();
this.regionList = fetchStates(countryId, this.countryAndStatesList); this.regionList = fetchStates(countryId, this.countryAndStatesList);
this.regionId = this.regionId ? this.regionId.toString(): ''; this.regionId = this.regionId ? this.regionId.toString() : "";
if (this.regionId) { if (this.regionId) {
let regionName = this.regionList.filter(obj => { let regionName = this.regionList.filter((obj) => {
if (obj.value == this.regionId) return obj; if (obj.value == this.regionId) return obj;
}); });
this.$emit("regionDetails", regionName); this.$emit("regionDetails", regionName);
@ -248,19 +275,19 @@ export default {
this.regionList = fetchStates(this.countryId, this.countryAndStatesList); this.regionList = fetchStates(this.countryId, this.countryAndStatesList);
}, },
validateNumber(number, data) { validateNumber(number, data) {
if (data&&data.possible && data.valid) this.phoneNumberError = false; if (data && data.possible && data.valid) this.phoneNumberError = false;
else this.phoneNumberError = true; else this.phoneNumberError = true;
}, },
async checkPOBoxAddress(){ async checkPOBoxAddress() {
let street = []; let street = [];
street[0] = this.streetNoOne ? this.streetNoOne : ""; street[0] = this.streetNoOne ? this.streetNoOne : "";
if(this.streetNoTwo) if (this.streetNoTwo)
street[1] = this.streetNoTwo ? this.streetNoTwo : ""; street[1] = this.streetNoTwo ? this.streetNoTwo : "";
let address = { let address = {
street: street street: street,
} };
await this.$store.dispatch("accountOne/checkPOBoxAddress", address); await this.$store.dispatch("accountOne/checkPOBoxAddress", address);
} },
}, },
async created() { async created() {
await this.$store.dispatch("accountOne/fetchCountries"); await this.$store.dispatch("accountOne/fetchCountries");
@ -273,6 +300,6 @@ export default {
this.$emit("actionValid", this.valid); this.$emit("actionValid", this.valid);
this.$emit("verifyAddress"); this.$emit("verifyAddress");
} }
} },
}; };
</script> </script>

124
src/routes/retailer/edit_account_info.vue
View File

@ -9,12 +9,12 @@
dense dense
v-if="wrongPasswordMessage" v-if="wrongPasswordMessage"
>{{wrongPasswordMessage}}</v-alert> >{{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-form ref="form" v-model="valid">
<v-row> <v-row>
<v-col cols="12" sm="6" md="6" lg="6"> <v-col cols="12" sm="6" md="6" lg="6">
<div> <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> <div class="edit-account-info-line mt-5 mb-7"></div>
<v-text-field <v-text-field
@ -22,17 +22,20 @@
ref="firstname" ref="firstname"
v-model="firstname" v-model="firstname"
:rules="textRules" :rules="textRules"
outlined variant="outlined"
required required
dense color="primary"
density="compact"
></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"
:rules="textRules" :rules="textRules"
outlined
dense color="primary"
density="compact"
variant="outlined"
required required
></v-text-field> ></v-text-field>
<!--<v-checkbox v-model="email" label="Change Email" color="indigo" value="indigo"></v-checkbox>--> <!--<v-checkbox v-model="email" label="Change Email" color="indigo" value="indigo"></v-checkbox>-->
@ -40,43 +43,21 @@
</v-col> </v-col>
<v-col cols="12" sm="6" md="6" lg="6"> <v-col cols="12" sm="6" md="6" lg="6">
<div> <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-col class="mx-0 px-0" v-if="password">
<v-row class="ml-1 mt-1"> <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> </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 <v-text-field
type="password" type="password"
label="Current Password" label="Current Password"
ref="currentPassword" ref="currentPassword"
v-model="currentPassword" v-model="currentPassword"
:rules="passwordRules" :rules="passwordRules"
outlined color="primary"
dense density="compact"
variant="outlined"
></v-text-field> ></v-text-field>
<v-text-field <v-text-field
type="password" type="password"
@ -84,8 +65,9 @@
ref="newPassword" ref="newPassword"
:rules="commonValidationRules.passwordRule" :rules="commonValidationRules.passwordRule"
v-model="newPassword" v-model="newPassword"
outlined color="primary"
dense density="compact"
variant="outlined"
></v-text-field> ></v-text-field>
<v-text-field <v-text-field
type="password" type="password"
@ -93,69 +75,27 @@
ref="confirmPassword" ref="confirmPassword"
v-model="confirmPassword" v-model="confirmPassword"
:rules="[passwordConfirmationRule]" :rules="[passwordConfirmationRule]"
outlined color="primary"
dense density="compact"
variant="outlined"
></v-text-field> ></v-text-field>
</v-col> </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> </div>
</v-col> </v-col>
</v-row> </v-row>
<v-checkbox v-model="password" class="mt-0" label="Change Password" color="indigo"></v-checkbox> <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 <v-btn
:disabled="inProgress" :disabled="inProgress"
large large
:outlined="hover" :variant="isHovering ? 'outlined' : 'outlined'"
:color="hover?'white':'primary'" :class="isHovering ? ' bg-white text-primary' : 'bg-primary'"
:class="hover?'primary--text':'white--text'" v-bind="props"
@click="submit" @click="submit"
depressed size="large"
class="mt-6 px-12 body-font edit-account-info-button" class="mt-6 px-12 body-font edit-account-info-button"
tile rounded="0"
dark
> >
<v-progress-circular :size="20" color="primary" indeterminate v-if="inProgress"></v-progress-circular>SAVE <v-progress-circular :size="20" color="primary" indeterminate v-if="inProgress"></v-progress-circular>SAVE
</v-btn> </v-btn>
@ -224,8 +164,9 @@ export default {
},*/ },*/
}, },
methods: { methods: {
submit() { async submit() {
if (this.$refs.form.validate() && !this.password) { let validate = await this.$refs.form.validate();
if (validate && validate.valid && !this.password) {
this.$store this.$store
.dispatch("accountOne/changeBasicInfo") .dispatch("accountOne/changeBasicInfo")
.then(() => { .then(() => {
@ -254,7 +195,8 @@ export default {
}); });
}, 3000); }, 3000);
}); });
} else if (this.$refs.form.validate() && this.password) { }
else if (validate && validate.valid && this.password) {
localStorage.setItem("cr_changePassowrd", true); localStorage.setItem("cr_changePassowrd", true);
this.$store this.$store
.dispatch("accountOne/changeBasicInfo", { .dispatch("accountOne/changeBasicInfo", {