address fixes ui

This commit is contained in:
rakesh 2023-05-16 13:15:35 +05:30
parent dfc05cd6b2
commit 88e29a453d
5 changed files with 172 additions and 115 deletions

View File

@ -1,20 +1,26 @@
<template>
<div>
<v-row no-gutters>
<v-col cols="12" >
<p class="mb-2 body">{{address.firstname}} {{address.lastname}}</p>
<p class="mb-2 body" v-if="address.streetNoOne">{{address.streetNoOne}}<span v-if="address.streetNoTwo">, {{address.streetNoTwo}}</span> </p>
<p class="mb-2 body" v-else>{{address.street[0]}}<span v-if="address.street[1]">, {{address.street[1]}}</span> </p>
<p class="mb-2 body">
{{address.city}},
<span v-if="stateName.length">{{stateName[0].label}} - </span>
{{address.postcode}}
<v-col cols="12">
<p class="mb-2 body">{{ address.firstname }} {{ address.lastname }}</p>
<p class="mb-2 body" v-if="address.streetNoOne">
{{ address.streetNoOne
}}<span v-if="address.streetNoTwo">, {{ address.streetNoTwo }}</span>
</p>
<p class="mb-2 body" v-else>
{{ address.street[0]
}}<span v-if="address.street[1]">, {{ address.street[1] }}</span>
</p>
<p class="mb-2 body">
<span v-if="address.countryId">{{address.countryId}}</span>
{{ address.city }},
<span v-if="stateName.length">{{ stateName[0].label }} - </span>
{{ address.postcode }}
</p>
<p class="mb-2 body">
T:<a href="tel:"> {{address.telephone}}</a>
<span v-if="address.countryId">{{ address.countryId }}</span>
</p>
<p class="mb-2 body">
T:<a href="tel:"> {{ address.telephone }}</a>
</p>
</v-col>
</v-row>
@ -25,7 +31,7 @@ import { createHelpers } from "vuex-map-fields";
import { fetchStates } from "@/services/util.service";
const { mapFields } = createHelpers({
getterType: "accountOne/getField",
mutationType: "accountOne/updateField"
mutationType: "accountOne/updateField",
});
/*eslint-disable*/
export default {
@ -36,38 +42,39 @@ export default {
stateName: [],
}),
computed: {
userAuth: function() {
userAuth: function () {
return this.$store.state.auth.userAuth;
},
verifyAddress: function() {
verifyAddress: function () {
if (this.userAuth) {
return this.$store.state.accountOne.address;
}
}
},
countryAndStatesList() {
return this.$store.state.accountOne.allCountries;
},
allCountries: function() {
return this.$store.state.accountOne.allCountries.map(countries => {
allCountries: function () {
return this.$store.state.accountOne.allCountries.map((countries) => {
return {
value: countries.id,
label: countries.fullNameEnglish
label: countries.fullNameEnglish,
};
});
},
...mapFields(["one"]),
},
watch: {
},
watch: {},
methods: {},
created() {
if(this.address){
this.stateNameList = fetchStates(this.address.countryId,this.countryAndStatesList);
this.stateName = this.stateNameList.filter(obj => {
if (obj.value == this.address.regionId) return obj;
});
}
}
if (this.address) {
this.stateNameList = fetchStates(
this.address.countryId,
this.countryAndStatesList
);
this.stateName = this.stateNameList.filter((obj) => {
if (obj.value == this.address.regionId) return obj;
});
}
},
};
</script>

View File

@ -1,22 +1,43 @@
<template>
<div v-if="userDetails">
<v-form ref="guestShippingAddressForm" v-model="valid" :lazy-validation="lazy">
<v-form
ref="guestShippingAddressForm"
v-model="valid"
:lazy-validation="lazy"
>
<v-row no-gutters v-show="!hideEmail">
<v-col cols="12">
<p class="text-uppercase d-none d-sm-block">
already registered?
<v-btn class="pl-0 black--text" depressed dark @click="signInForm=true" text>
<span class="text-uppercase ml-2 guest-shipping-address-login">click here to login</span>
<v-btn
class="pl-0 black--text"
depressed
dark
@click="signInForm = true"
text
>
<span class="text-uppercase ml-2 guest-shipping-address-login"
>click here to login</span
>
</v-btn>
</p>
<p class="text-uppercase fontsize-14 d-block d-sm-none">
already registered?
<v-btn color="black" class="pl-0" dark @click="signInForm=true" text>
<span class="text-uppercase fontsize-14 mb-1 ml-2 guest-shipping-address-login">click here to login</span>
<v-btn
color="black"
class="pl-0"
dark
@click="signInForm = true"
text
>
<span
class="text-uppercase fontsize-14 mb-1 ml-2 guest-shipping-address-login"
>click here to login</span
>
</v-btn>
</p>
<v-form ref="loginForm" v-model="validLogin">
<v-col class="px-0 py-0">
<v-col class="px-0 py-0">
<v-text-field
label="Email Address"
@input="checkEmail()"
@ -27,7 +48,7 @@
:rules="emailRules"
outlined
dense
></v-text-field>
></v-text-field>
<!-- <v-text-field
v-show="passwordFields"
v-model="password"
@ -39,8 +60,8 @@
dense
:rules="passwordFields? passwordRules:[]"
></v-text-field> -->
</v-col>
<!-- <span v-show="passwordFields">You already have an account with us. Sign in or continue as guest.</span>
</v-col>
<!-- <span v-show="passwordFields">You already have an account with us. Sign in or continue as guest.</span>
<v-row justify="center" v-if="emailCheckInProgress">
<v-progress-circular
:size="60"
@ -54,8 +75,14 @@
<v-btn class="primary" depressed block large @click="signIn()">SIGN IN</v-btn>
</v-col>
</v-row> -->
<span v-show="!passwordFields" >You can create an account after checkout.</span>
<v-checkbox v-model="newsletter" label="Subscribe to our newsletter" color="indigo"></v-checkbox>
<span v-show="!passwordFields"
>You can create an account after checkout.</span
>
<v-checkbox
v-model="newsletter"
label="Subscribe to our newsletter"
color="indigo"
></v-checkbox>
</v-form>
</v-col>
</v-row>
@ -122,7 +149,7 @@
item-value="value"
:selected="countryId"
@change="fetchStates(countryId)"
:rules="[val => !!val || 'Please select the Country']"
:rules="[(val) => !!val || 'Please select the Country']"
></v-select>
<v-text-field
@ -144,19 +171,25 @@
item-value="value"
outlined
@change="checkRegionName()"
:rules="[v => !!v || 'Please select the State']"
:rules="[(v) => !!v || 'Please select the State']"
></v-select>
<vue-tel-input
<vue-tel-input
type="number"
v-model="telephone"
mode="international"
:defaultCountry="setCountryCode"
:class="phoneNumberError ? 'phonenumber-input-error-border':'phonenumber-custom-input'"
:class="
phoneNumberError
? 'phonenumber-input-error-border'
: 'phonenumber-custom-input'
"
@input="validateNumber"
ref="phoneNumber"
></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>
@ -170,8 +203,12 @@
</v-card-title>
<v-divider></v-divider>
<v-card-text class="pt-3 pb-0">
<v-alert class="word-break" type="error" v-if="!!errorMessage">{{errorMessage}}</v-alert>
<v-alert class="word-break" type="success" v-if="!!signInMessage">{{signInMessage}}</v-alert>
<v-alert class="word-break" type="error" v-if="!!errorMessage">{{
errorMessage
}}</v-alert>
<v-alert class="word-break" type="success" v-if="!!signInMessage">{{
signInMessage
}}</v-alert>
<v-form ref="loginForm" v-model="validLogin">
<v-col class="py-0">
<v-text-field
@ -194,7 +231,7 @@
name="password"
outlined
dense
:rules="passwordFields? passwordRules:[]"
:rules="passwordFields ? passwordRules : []"
></v-text-field>
</v-col>
</v-form>
@ -202,13 +239,22 @@
<v-card-actions>
<v-row no-gutters>
<v-col cols="12" class="px-7">
<v-btn class="primary" block depressed large @click="signIn()"> <v-progress-circular :size="20" color="white" indeterminate v-if="inProgress"></v-progress-circular> &nbsp;SIGN IN </v-btn>
<v-btn class="primary" block depressed large @click="signIn()">
<v-progress-circular
:size="20"
color="white"
indeterminate
v-if="inProgress"
></v-progress-circular>
&nbsp;SIGN IN
</v-btn>
</v-col>
<v-col cols="12" class="py-5" align="center">
<span
class="text-decoration-none cursor-pointer primary--text"
@click="goToForgetPassword()"
>Forgot Your Password?</span>
@click="goToForgetPassword()"
>Forgot Your Password?</span
>
</v-col>
</v-row>
</v-card-actions>
@ -220,23 +266,23 @@
//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: mapFieldsGuest } = createHelpers({
getterType: "guestInfo/getField",
mutationType: "guestInfo/updateField"
mutationType: "guestInfo/updateField",
});
const { mapFields: mapFieldsAuth } = createHelpers({
getterType: "auth/getField",
mutationType: "auth/updateField"
mutationType: "auth/updateField",
});
export default {
name: "GuestShippingAddressForm",
props: ["hideEmail","hideHeader"],
props: ["hideEmail", "hideHeader"],
data: () => ({
setCountryCode: "US",
setCountryCode: "US",
phoneNumberError: false,
confirmationDialog: false,
passwordFields: false,
@ -249,27 +295,28 @@ export default {
validLogin: false,
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",
],
passwordRules: [
v => !!v || "Password is required",
v => (v && v.length >= 8) || "Password must be at least 8 characters"
]
(v) => !!v || "Password is required",
(v) => (v && v.length >= 8) || "Password must be at least 8 characters",
],
}),
components: {VueTelInput},
components: { VueTelInput },
computed: {
...mapFieldsGuest([
"one",
@ -292,13 +339,13 @@ export default {
"one.password",
"errorMessage",
"inProgress",
"signInMessage"
"signInMessage",
]),
allCountries: function() {
return this.$store.state.accountOne.allCountries.map(countries => {
allCountries: function () {
return this.$store.state.accountOne.allCountries.map((countries) => {
return {
value: countries.id,
label: countries.fullNameEnglish
label: countries.fullNameEnglish,
};
});
},
@ -307,41 +354,41 @@ export default {
},
emailCheckInProgress() {
return this.$store.state.guestInfo.emailCheckInProgress;
}
},
},
watch: {
countryId: function() {
countryId: function () {
this.updateRegionList();
},
valid() {
this.$emit("actionValid", {valid:this.valid, email:this.one.email});
}
this.$emit("actionValid", { valid: this.valid, email: this.one.email });
},
},
methods: {
signIn() {
if (this.$refs.loginForm.validate()) {
this.$store.dispatch("auth/changeRedirectFlag", false);
this.$store.dispatch("auth/login").then(status => {
this.$store.dispatch("auth/login").then((status) => {
if (status) {
this.$store.dispatch("auth/changeRedirectFlag", true);
this.$store.dispatch("accountOne/basicInfo");
this.$store.dispatch("userCartProduct/cartProductList");
window.open(`/checkout`, "_self");
this.$store.dispatch("auth/changeRedirectFlag", true);
this.$store.dispatch("accountOne/basicInfo");
this.$store.dispatch("userCartProduct/cartProductList");
window.open(`/checkout`, "_self");
}
// this.$store.dispatch("userCartProduct/productTotalAmt");
// this.$store.dispatch("userCartProduct/productTotalAmt");
});
}
},
goToForgetPassword(){
goToForgetPassword() {
window.open(`/gate/forgot-password`, "_self");
},
sendEmailId() {
this.$emit("actionValid", {valid:this.valid, email:this.one.email});
sendEmailId() {
this.$emit("actionValid", { valid: this.valid, email: this.one.email });
},
checkEmail() {
this.$store
.dispatch("guestInfo/checkEmailAvailable", this.one.email)
.then(data => {
.then((data) => {
if (data.exist == false) {
this.passwordFields = true;
} else {
@ -357,7 +404,7 @@ export default {
this.$emit("verifyAddress");
},
checkRegionName() {
let regionName = this.regionList.filter(obj => {
let regionName = this.regionList.filter((obj) => {
if (obj.value == this.regionId) return obj;
});
this.$emit("regionDetails", regionName);
@ -367,7 +414,7 @@ export default {
this.$refs.guestShippingAddressForm.resetValidation();
this.regionList = fetchStates(countryId, this.countryAndStatesList);
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);
@ -378,20 +425,20 @@ export default {
if (this.regionId) this.regionId = this.regionId.toString();
this.regionList = fetchStates(this.countryId, this.countryAndStatesList);
},
validateNumber(number, data) {
if (data&&data.possible && data.valid) this.phoneNumberError = false;
validateNumber(number, data) {
if (data && data.possible && data.valid) this.phoneNumberError = false;
else this.phoneNumberError = true;
},
async checkPOBoxAddress(){
async checkPOBoxAddress() {
let street = [];
street[0] = this.streetNoOne ? this.streetNoOne : "";
if(this.streetNoTwo)
if (this.streetNoTwo)
street[1] = this.streetNoTwo ? this.streetNoTwo : "";
let address = {
street: street
}
street: street,
};
await this.$store.dispatch("guestInfo/checkPOBoxAddress", address);
}
},
},
async created() {
await this.$store.dispatch("accountOne/fetchCountries");
@ -402,7 +449,7 @@ export default {
this.$emit("actionValid", this.valid);
this.$emit("verifyAddress");
}
}
},
};
</script>
<style src="./GuestShippingAddressForm.scss" lang="scss" />

View File

@ -1,22 +1,24 @@
<template>
<div>
<v-row no-gutters>
<v-col cols="12" >
<p class="mb-2 body">{{address.firstname}} {{address.lastname}}</p>
<p class="mb-2 body" v-if="address.streetNoOne">{{address.streetNoOne}} ,{{address.streetNoTwo}} </p>
<p class="mb-2 body" v-else>{{address.street[0]}} ,{{address.street[1]}} </p>
<p class="mb-2 body">
{{address.city}},
<span
v-if="address.region"
>{{address.region.region}}</span>
{{address.postcode}}
<v-col cols="12">
<p class="mb-2 body">{{ address.firstname }} {{ address.lastname }}</p>
<p class="mb-2 body" v-if="address.streetNoOne">
{{ address.streetNoOne }} ,{{ address.streetNoTwo }}
</p>
<p class="mb-2 body" v-else>
{{ address.street[0] }} ,{{ address.street[1] }}
</p>
<p class="mb-2 body">
<span v-if="address.countryId">{{address.countryId}}</span>
{{ address.city }},
<span v-if="address.region">{{ address.region.region }}</span>
{{ address.postcode }}
</p>
<p class="mb-2 body">
T:<a :href="'tel:'+ address.telephone"> {{address.telephone}}</a>
<span v-if="address.countryId">{{ address.countryId }}</span>
</p>
<p class="mb-2 body">
T:<a :href="'tel:' + address.telephone"> {{ address.telephone }}</a>
</p>
</v-col>
</v-row>
@ -27,9 +29,8 @@ export default {
name: "ShippingAddressComponent",
props: ["address"],
components: {},
computed: {
},
computed: {},
methods: {},
created() {}
created() {},
};
</script>

View File

@ -131,7 +131,7 @@
ref="phoneNumber"
v-show="hideAndShowFields"
></vue-tel-input>
<span class="red--text caption ml-3" v-show="phoneNumberError"
<span class="red--text caption ml-3" v-show="hideAndShowFields && phoneNumberError"
>This field is required</span
>
</v-col>

View File

@ -104,7 +104,7 @@
v-if="!this.userAuth"
>
<p class="h3 mt-4">
<span class="primary--text">Checkout Method</span>
<span class="text-primary">Checkout Method</span>
</p>
<GuestShippingAddressForm
@actionValid="checkGuestFormValid"
@ -116,7 +116,7 @@
<v-col cols="12" class="pt-sm-6" v-else>
<p class="h3 mb-2">
<span class="primary--text">Checkout Method</span>
<span class="text-primary">Checkout Method</span>
</p>
<v-divider class="primary"></v-divider>
<div v-if="basicInfo.addresses">
@ -293,7 +293,7 @@
<v-col cols="12" class="mt-3" v-if="!addressContainPOBox">
<div>
<!--<p class="h3 mb-1">
<span class="primary--text">Verify Your Address</span>
<span class="text-primary">Verify Your Address</span>
</p>
<v-col class="pa-0" v-if="geoCodedAddress">
<VerifyAddressComponent
@ -318,7 +318,7 @@
>
</v-col>-->
<p class="h3 mb-0">
<span class="primary--text">Shipping Methods</span>
<span class="text-primary">Shipping Methods</span>
</p>
<v-row no-gutters>
<v-col
@ -339,6 +339,7 @@
<v-radio-group
mandatory
v-model="estimatedShipping"
color="primary"
>
<div
v-for="(
@ -352,6 +353,7 @@
:label="method.carrierTitle"
:value="method"
class="black--text"
color="primary"
></v-radio>
</v-col>
<v-col cols="4" sm="6">{{
@ -412,7 +414,7 @@
class="d-none d-sm-block pl-3 pt-6"
>
<p class="h3 mb-2">
<span class="primary--text">Order Summary</span>
<span class="text-primary">Order Summary</span>
</p>
<v-divider class="primary"></v-divider>
<v-col