455 lines
14 KiB
Vue
455 lines
14 KiB
Vue
<template>
|
|
<div v-if="userDetails">
|
|
<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>
|
|
</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>
|
|
</p>
|
|
<v-form ref="loginForm" v-model="validLogin">
|
|
<v-col class="px-0 py-0">
|
|
<v-text-field
|
|
label="Email Address"
|
|
@input="checkEmail()"
|
|
@change="sendEmailId()"
|
|
ref="email"
|
|
name="email"
|
|
v-model="email"
|
|
:rules="emailRules"
|
|
outlined
|
|
dense
|
|
></v-text-field>
|
|
<!-- <v-text-field
|
|
v-show="passwordFields"
|
|
v-model="password"
|
|
label="Password"
|
|
ref="password"
|
|
name="password"
|
|
type="password"
|
|
outlined
|
|
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-row justify="center" v-if="emailCheckInProgress">
|
|
<v-progress-circular
|
|
:size="60"
|
|
color="primary"
|
|
indeterminate
|
|
v-if="emailCheckInProgress"
|
|
></v-progress-circular>
|
|
</v-row>
|
|
<v-row class="mt-3" v-show="passwordFields" no-gutters>
|
|
<v-col cols="4">
|
|
<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>
|
|
</v-form>
|
|
</v-col>
|
|
</v-row>
|
|
<p class="h3 mt-4" v-if="hideHeader">Billing Address</p>
|
|
<p class="h3 mt-4" v-else>Shipping Address</p>
|
|
<v-row no-gutters>
|
|
<v-col cols="12">
|
|
<v-text-field
|
|
label="First Name"
|
|
ref="firstName"
|
|
v-model="firstname"
|
|
outlined
|
|
dense
|
|
:rules="textRules"
|
|
@input="verifyAddress"
|
|
></v-text-field>
|
|
<v-text-field
|
|
label="Last Name"
|
|
ref="lastName"
|
|
v-model="lastname"
|
|
outlined
|
|
dense
|
|
:rules="textRules"
|
|
@input="verifyAddress"
|
|
></v-text-field>
|
|
<v-text-field
|
|
label="Street Address"
|
|
ref="streetAddressOne"
|
|
v-model="streetNoOne"
|
|
outlined
|
|
dense
|
|
required
|
|
:rules="textRules"
|
|
@input="verifyAddress"
|
|
@change="checkPOBoxAddress()"
|
|
></v-text-field>
|
|
<v-text-field
|
|
label="Apt, Suite, Co., C/O etc."
|
|
ref="streetAddressTwo"
|
|
v-model="streetNoTwo"
|
|
outlined
|
|
dense
|
|
required
|
|
@input="verifyAddress"
|
|
@change="checkPOBoxAddress()"
|
|
></v-text-field>
|
|
<v-text-field
|
|
label="City"
|
|
outlined
|
|
dense
|
|
ref="city"
|
|
:rules="textRules"
|
|
v-model="city"
|
|
@input="verifyAddress"
|
|
></v-text-field>
|
|
<v-select
|
|
:items="allCountries"
|
|
dense
|
|
outlined
|
|
label="Country"
|
|
ref="country"
|
|
item-text="label"
|
|
v-model="countryId"
|
|
item-value="value"
|
|
:selected="countryId"
|
|
@change="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
|
|
@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"
|
|
item-value="value"
|
|
outlined
|
|
@change="checkRegionName()"
|
|
:rules="[(v) => !!v || 'Please select the State']"
|
|
></v-select>
|
|
|
|
<vue-tel-input
|
|
type="number"
|
|
v-model="telephone"
|
|
mode="international"
|
|
:defaultCountry="setCountryCode"
|
|
: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
|
|
>
|
|
</v-col>
|
|
</v-row>
|
|
</v-form>
|
|
<v-dialog v-model="signInForm" persistent flat max-width="500">
|
|
<v-card flat>
|
|
<v-card-title class="d-flex justify-space-between">
|
|
<p class="h3 mb-0">Sign In</p>
|
|
<v-btn @click="closeSignInForm()" icon>
|
|
<v-icon>mdi-window-close</v-icon>
|
|
</v-btn>
|
|
</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-form ref="loginForm" v-model="validLogin">
|
|
<v-col class="py-0">
|
|
<v-text-field
|
|
v-model="email"
|
|
type="email"
|
|
label="Email Address"
|
|
ref="email"
|
|
name="email"
|
|
outlined
|
|
dense
|
|
:rules="emailRules"
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col class="py-0">
|
|
<v-text-field
|
|
v-model="password"
|
|
label="Password"
|
|
ref="password"
|
|
type="password"
|
|
name="password"
|
|
outlined
|
|
dense
|
|
:rules="passwordFields ? passwordRules : []"
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-form>
|
|
</v-card-text>
|
|
<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>
|
|
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
|
|
>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
//import { mapState } from "vuex";
|
|
import { createHelpers } from "vuex-map-fields";
|
|
import { fetchStates } from "@/services/util.service";
|
|
import { VueTelInput } from "vue3-tel-input";
|
|
|
|
const { mapFields: mapFieldsGuest } = createHelpers({
|
|
getterType: "guestInfo/getField",
|
|
mutationType: "guestInfo/updateField",
|
|
});
|
|
|
|
const { mapFields: mapFieldsAuth } = createHelpers({
|
|
getterType: "auth/getField",
|
|
mutationType: "auth/updateField",
|
|
});
|
|
|
|
export default {
|
|
name: "GuestShippingAddressForm",
|
|
props: ["hideEmail", "hideHeader"],
|
|
data: () => ({
|
|
setCountryCode: "US",
|
|
phoneNumberError: false,
|
|
confirmationDialog: false,
|
|
passwordFields: false,
|
|
signInForm: false,
|
|
newsletter: true,
|
|
regionList: [],
|
|
userDetails: true,
|
|
valid: true,
|
|
//email:'',
|
|
validLogin: false,
|
|
lazy: false,
|
|
textRules: [
|
|
(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",
|
|
],
|
|
emailRules: [
|
|
(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",
|
|
],
|
|
passwordRules: [
|
|
(v) => !!v || "Password is required",
|
|
(v) => (v && v.length >= 8) || "Password must be at least 8 characters",
|
|
],
|
|
}),
|
|
components: { VueTelInput },
|
|
computed: {
|
|
...mapFieldsGuest([
|
|
"one",
|
|
// "one.email",
|
|
"address",
|
|
"address.postcode",
|
|
"address.telephone",
|
|
"address.city",
|
|
"address.countryId",
|
|
"address.regionId",
|
|
"address.region",
|
|
"address.streetNoOne",
|
|
"address.streetNoTwo",
|
|
"address.firstname",
|
|
"address.lastname",
|
|
]),
|
|
...mapFieldsAuth([
|
|
"one",
|
|
"one.email",
|
|
"one.password",
|
|
"errorMessage",
|
|
"inProgress",
|
|
"signInMessage",
|
|
]),
|
|
allCountries: function () {
|
|
return this.$store.state.accountOne.allCountries.map((countries) => {
|
|
return {
|
|
value: countries.id,
|
|
label: countries.fullNameEnglish,
|
|
};
|
|
});
|
|
},
|
|
countryAndStatesList() {
|
|
return this.$store.state.accountOne.allCountries;
|
|
},
|
|
emailCheckInProgress() {
|
|
return this.$store.state.guestInfo.emailCheckInProgress;
|
|
},
|
|
},
|
|
watch: {
|
|
countryId: function () {
|
|
this.updateRegionList();
|
|
},
|
|
valid() {
|
|
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) => {
|
|
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("userCartProduct/productTotalAmt");
|
|
});
|
|
}
|
|
},
|
|
goToForgetPassword() {
|
|
window.open(`/gate/forgot-password`, "_self");
|
|
},
|
|
sendEmailId() {
|
|
this.$emit("actionValid", { valid: this.valid, email: this.one.email });
|
|
},
|
|
checkEmail() {
|
|
this.$store
|
|
.dispatch("guestInfo/checkEmailAvailable", this.one.email)
|
|
.then((data) => {
|
|
if (data.exist == false) {
|
|
this.passwordFields = true;
|
|
} else {
|
|
this.passwordFields = false;
|
|
}
|
|
});
|
|
},
|
|
closeSignInForm() {
|
|
this.signInForm = false;
|
|
this.$store.dispatch("auth/changeRedirectFlag", true);
|
|
},
|
|
verifyAddress() {
|
|
this.$emit("verifyAddress");
|
|
},
|
|
checkRegionName() {
|
|
let regionName = this.regionList.filter((obj) => {
|
|
if (obj.value == this.regionId) return obj;
|
|
});
|
|
this.$emit("regionDetails", regionName);
|
|
this.$emit("verifyAddress");
|
|
},
|
|
fetchStates(countryId) {
|
|
this.$refs.guestShippingAddressForm.resetValidation();
|
|
this.regionList = fetchStates(countryId, this.countryAndStatesList);
|
|
if (this.regionId) {
|
|
let regionName = this.regionList.filter((obj) => {
|
|
if (obj.value == this.regionId) return obj;
|
|
});
|
|
this.$emit("regionDetails", regionName);
|
|
this.$emit("verifyAddress");
|
|
}
|
|
},
|
|
updateRegionList() {
|
|
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;
|
|
else this.phoneNumberError = true;
|
|
},
|
|
async checkPOBoxAddress() {
|
|
let street = [];
|
|
street[0] = this.streetNoOne ? this.streetNoOne : "";
|
|
if (this.streetNoTwo)
|
|
street[1] = this.streetNoTwo ? this.streetNoTwo : "";
|
|
let address = {
|
|
street: street,
|
|
};
|
|
await this.$store.dispatch("guestInfo/checkPOBoxAddress", address);
|
|
},
|
|
},
|
|
async created() {
|
|
await this.$store.dispatch("accountOne/fetchCountries");
|
|
await this.fetchStates(this.countryId);
|
|
this.updateRegionList();
|
|
this.$refs.guestShippingAddressForm.resetValidation();
|
|
if (this.valid) {
|
|
this.$emit("actionValid", this.valid);
|
|
this.$emit("verifyAddress");
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style src="./GuestShippingAddressForm.scss" lang="scss" /> |