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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/retailer/address/BillingAddressComponent.vue
View File

@ -3,8 +3,14 @@
<v-row no-gutters> <v-row no-gutters>
<v-col cols="12"> <v-col cols="12">
<p class="mb-2 body">{{ address.firstname }} {{ address.lastname }}</p> <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-if="address.streetNoOne">
<p class="mb-2 body" v-else>{{address.street[0]}}<span v-if="address.street[1]">, {{address.street[1]}}</span> </p> {{ 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"> <p class="mb-2 body">
{{ address.city }}, {{ address.city }},
<span v-if="stateName.length">{{ stateName[0].label }} - </span> <span v-if="stateName.length">{{ stateName[0].label }} - </span>
@ -25,7 +31,7 @@ import { createHelpers } from "vuex-map-fields";
import { fetchStates } from "@/services/util.service"; import { fetchStates } from "@/services/util.service";
const { mapFields } = createHelpers({ const { mapFields } = createHelpers({
getterType: "accountOne/getField", getterType: "accountOne/getField",
mutationType: "accountOne/updateField" mutationType: "accountOne/updateField",
}); });
/*eslint-disable*/ /*eslint-disable*/
export default { export default {
@ -48,26 +54,27 @@ export default {
return this.$store.state.accountOne.allCountries; return this.$store.state.accountOne.allCountries;
}, },
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,
}; };
}); });
}, },
...mapFields(["one"]), ...mapFields(["one"]),
}, },
watch: { watch: {},
},
methods: {}, methods: {},
created() { created() {
if (this.address) { if (this.address) {
this.stateNameList = fetchStates(this.address.countryId,this.countryAndStatesList); this.stateNameList = fetchStates(
this.stateName = this.stateNameList.filter(obj => { this.address.countryId,
this.countryAndStatesList
);
this.stateName = this.stateNameList.filter((obj) => {
if (obj.value == this.address.regionId) return obj; if (obj.value == this.address.regionId) return obj;
}); });
} }
} },
}; };
</script> </script>

131
src/components/retailer/address/GuestShippingAddressForm.vue
View File

@ -1,18 +1,39 @@
<template> <template>
<div v-if="userDetails"> <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-row no-gutters v-show="!hideEmail">
<v-col cols="12"> <v-col cols="12">
<p class="text-uppercase d-none d-sm-block"> <p class="text-uppercase d-none d-sm-block">
already registered? already registered?
<v-btn class="pl-0 black--text" depressed dark @click="signInForm=true" text> <v-btn
<span class="text-uppercase ml-2 guest-shipping-address-login">click here to login</span> 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> </v-btn>
</p> </p>
<p class="text-uppercase fontsize-14 d-block d-sm-none"> <p class="text-uppercase fontsize-14 d-block d-sm-none">
already registered? already registered?
<v-btn color="black" class="pl-0" dark @click="signInForm=true" text> <v-btn
<span class="text-uppercase fontsize-14 mb-1 ml-2 guest-shipping-address-login">click here to login</span> 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> </v-btn>
</p> </p>
<v-form ref="loginForm" v-model="validLogin"> <v-form ref="loginForm" v-model="validLogin">
@ -54,8 +75,14 @@
<v-btn class="primary" depressed block large @click="signIn()">SIGN IN</v-btn> <v-btn class="primary" depressed block large @click="signIn()">SIGN IN</v-btn>
</v-col> </v-col>
</v-row> --> </v-row> -->
<span v-show="!passwordFields" >You can create an account after checkout.</span> <span v-show="!passwordFields"
<v-checkbox v-model="newsletter" label="Subscribe to our newsletter" color="indigo"></v-checkbox> >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-form>
</v-col> </v-col>
</v-row> </v-row>
@ -122,7 +149,7 @@
item-value="value" item-value="value"
:selected="countryId" :selected="countryId"
@change="fetchStates(countryId)" @change="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
@ -144,7 +171,7 @@
item-value="value" item-value="value"
outlined outlined
@change="checkRegionName()" @change="checkRegionName()"
:rules="[v => !!v || 'Please select the State']" :rules="[(v) => !!v || 'Please select the State']"
></v-select> ></v-select>
<vue-tel-input <vue-tel-input
@ -152,11 +179,17 @@
v-model="telephone" v-model="telephone"
mode="international" mode="international"
: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"
></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>
@ -170,8 +203,12 @@
</v-card-title> </v-card-title>
<v-divider></v-divider> <v-divider></v-divider>
<v-card-text class="pt-3 pb-0"> <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="error" v-if="!!errorMessage">{{
<v-alert class="word-break" type="success" v-if="!!signInMessage">{{signInMessage}}</v-alert> errorMessage
}}</v-alert>
<v-alert class="word-break" type="success" v-if="!!signInMessage">{{
signInMessage
}}</v-alert>
<v-form ref="loginForm" v-model="validLogin"> <v-form ref="loginForm" v-model="validLogin">
<v-col class="py-0"> <v-col class="py-0">
<v-text-field <v-text-field
@ -202,13 +239,22 @@
<v-card-actions> <v-card-actions>
<v-row no-gutters> <v-row no-gutters>
<v-col cols="12" class="px-7"> <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>
<v-col cols="12" class="py-5" align="center"> <v-col cols="12" class="py-5" align="center">
<span <span
class="text-decoration-none cursor-pointer primary--text" class="text-decoration-none cursor-pointer primary--text"
@click="goToForgetPassword()" @click="goToForgetPassword()"
>Forgot Your Password?</span> >Forgot Your Password?</span
>
</v-col> </v-col>
</v-row> </v-row>
</v-card-actions> </v-card-actions>
@ -220,16 +266,16 @@
//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: mapFieldsGuest } = createHelpers({ const { mapFields: mapFieldsGuest } = createHelpers({
getterType: "guestInfo/getField", getterType: "guestInfo/getField",
mutationType: "guestInfo/updateField" mutationType: "guestInfo/updateField",
}); });
const { mapFields: mapFieldsAuth } = createHelpers({ const { mapFields: mapFieldsAuth } = createHelpers({
getterType: "auth/getField", getterType: "auth/getField",
mutationType: "auth/updateField" mutationType: "auth/updateField",
}); });
export default { export default {
@ -249,25 +295,26 @@ export default {
validLogin: false, validLogin: false,
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",
], ],
passwordRules: [ passwordRules: [
v => !!v || "Password is required", (v) => !!v || "Password is required",
v => (v && v.length >= 8) || "Password must be at least 8 characters" (v) => (v && v.length >= 8) || "Password must be at least 8 characters",
] ],
}), }),
components: { VueTelInput }, components: { VueTelInput },
computed: { computed: {
@ -292,13 +339,13 @@ export default {
"one.password", "one.password",
"errorMessage", "errorMessage",
"inProgress", "inProgress",
"signInMessage" "signInMessage",
]), ]),
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,
}; };
}); });
}, },
@ -307,7 +354,7 @@ export default {
}, },
emailCheckInProgress() { emailCheckInProgress() {
return this.$store.state.guestInfo.emailCheckInProgress; return this.$store.state.guestInfo.emailCheckInProgress;
} },
}, },
watch: { watch: {
countryId: function () { countryId: function () {
@ -315,13 +362,13 @@ export default {
}, },
valid() { valid() {
this.$emit("actionValid", { valid: this.valid, email: this.one.email }); this.$emit("actionValid", { valid: this.valid, email: this.one.email });
} },
}, },
methods: { methods: {
signIn() { signIn() {
if (this.$refs.loginForm.validate()) { if (this.$refs.loginForm.validate()) {
this.$store.dispatch("auth/changeRedirectFlag", false); this.$store.dispatch("auth/changeRedirectFlag", false);
this.$store.dispatch("auth/login").then(status => { this.$store.dispatch("auth/login").then((status) => {
if (status) { if (status) {
this.$store.dispatch("auth/changeRedirectFlag", true); this.$store.dispatch("auth/changeRedirectFlag", true);
this.$store.dispatch("accountOne/basicInfo"); this.$store.dispatch("accountOne/basicInfo");
@ -341,7 +388,7 @@ export default {
checkEmail() { checkEmail() {
this.$store this.$store
.dispatch("guestInfo/checkEmailAvailable", this.one.email) .dispatch("guestInfo/checkEmailAvailable", this.one.email)
.then(data => { .then((data) => {
if (data.exist == false) { if (data.exist == false) {
this.passwordFields = true; this.passwordFields = true;
} else { } else {
@ -357,7 +404,7 @@ export default {
this.$emit("verifyAddress"); this.$emit("verifyAddress");
}, },
checkRegionName() { checkRegionName() {
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);
@ -367,7 +414,7 @@ export default {
this.$refs.guestShippingAddressForm.resetValidation(); this.$refs.guestShippingAddressForm.resetValidation();
this.regionList = fetchStates(countryId, this.countryAndStatesList); this.regionList = fetchStates(countryId, this.countryAndStatesList);
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);
@ -388,10 +435,10 @@ export default {
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("guestInfo/checkPOBoxAddress", address); await this.$store.dispatch("guestInfo/checkPOBoxAddress", address);
} },
}, },
async created() { async created() {
await this.$store.dispatch("accountOne/fetchCountries"); await this.$store.dispatch("accountOne/fetchCountries");
@ -402,7 +449,7 @@ export default {
this.$emit("actionValid", this.valid); this.$emit("actionValid", this.valid);
this.$emit("verifyAddress"); this.$emit("verifyAddress");
} }
} },
}; };
</script> </script>
<style src="./GuestShippingAddressForm.scss" lang="scss" /> <style src="./GuestShippingAddressForm.scss" lang="scss" />

17
src/components/retailer/address/ShippingAddressComponent.vue
View File

@ -3,13 +3,15 @@
<v-row no-gutters> <v-row no-gutters>
<v-col cols="12"> <v-col cols="12">
<p class="mb-2 body">{{ address.firstname }} {{ address.lastname }}</p> <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-if="address.streetNoOne">
<p class="mb-2 body" v-else>{{address.street[0]}} ,{{address.street[1]}} </p> {{ address.streetNoOne }} ,{{ address.streetNoTwo }}
</p>
<p class="mb-2 body" v-else>
{{ address.street[0] }} ,{{ address.street[1] }}
</p>
<p class="mb-2 body"> <p class="mb-2 body">
{{ address.city }}, {{ address.city }},
<span <span v-if="address.region">{{ address.region.region }}</span>
v-if="address.region"
>{{address.region.region}}</span>
{{ address.postcode }} {{ address.postcode }}
</p> </p>
<p class="mb-2 body"> <p class="mb-2 body">
@ -27,9 +29,8 @@ export default {
name: "ShippingAddressComponent", name: "ShippingAddressComponent",
props: ["address"], props: ["address"],
components: {}, components: {},
computed: { computed: {},
},
methods: {}, methods: {},
created() {} created() {},
}; };
</script> </script>

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

@ -131,7 +131,7 @@
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" <span class="red--text caption ml-3" v-show="hideAndShowFields && phoneNumberError"
>This field is required</span >This field is required</span
> >
</v-col> </v-col>

12
src/routes/retailer/checkout_page.vue
View File

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