221 lines
7.7 KiB
Vue
221 lines
7.7 KiB
Vue
<template>
|
|
<v-container class="py-0 my-0">
|
|
<v-dialog
|
|
v-model="subscriptionDialog"
|
|
:max-width="$vuetify.breakpoint.xlOnly?1100:800"
|
|
:scrollable="false"
|
|
:overlay-opacity="0.5"
|
|
>
|
|
<v-card
|
|
flat
|
|
tile
|
|
:img="isDesktop? `http://media.crane.com/9441/popup_v3.jpg` : ''"
|
|
:class="isDesktop?'':'dialog-background'"
|
|
>
|
|
<v-card-title class="px-2 px-sm-4 pb-0 pt-0 pt-sm-4">
|
|
<v-row no-gutters>
|
|
<v-col cols="12" class="d-flex justify-end">
|
|
<v-btn @click="subscriptionDialog=false" class="dailog-close-button" icon>
|
|
<v-icon :large="isDesktop" :small="!isDesktop">mdi-window-close</v-icon>
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-title>
|
|
<v-card-text class="pb-1 pb-sm-3 px-2 px-sm-4">
|
|
<v-row no-gutters class="mx-0">
|
|
<v-col cols="12" sm="6">
|
|
<v-row align="center" class="px-sm-6 px-2 pa-0 ma-0">
|
|
<v-form ref="subscribeForm" v-model="footerFormValid">
|
|
<div class="pa-md-1">
|
|
<v-col cols="12" class="pt-0 mb-sm-4">
|
|
<span
|
|
class="primary--text h3 font-weight-regular text-uppercase"
|
|
>{{stayInTouch}}</span>
|
|
<p
|
|
class="subscribe-fontcolor-black-darken body-font ls-n10 mb-0 pt-2 pt-sm-4"
|
|
>Be the first to know about special promotions, new collections and more when you sign up for our emails!</p>
|
|
</v-col>
|
|
<v-col cols="12" class="pb-0 pt-2 pt-sm-3 d-md-block">
|
|
<v-row no-gutters>
|
|
<v-col cols="12">
|
|
<v-text-field
|
|
@blur="resetEmailValidation"
|
|
label="Your Email"
|
|
id="emailTextBox"
|
|
class="footerpage_email_textbox fontsize-14 regular-font"
|
|
solo
|
|
flat
|
|
dense
|
|
:rules="emailRules"
|
|
tile
|
|
v-model="email"
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-btn
|
|
depressed
|
|
:block="!isDesktop"
|
|
color="primary"
|
|
class="white--text mr-n3 text-uppercase footerpage_submit_email_btn body-font"
|
|
@click="submit()"
|
|
>SUBMIT</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
</div>
|
|
</v-form>
|
|
</v-row>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-if="!isDesktop" class="regular-font subscribe-fontcolor-black-darken mx-0 px-sm-6 px-2">
|
|
<v-col cols="12" sm="3">
|
|
<router-link to class="subscribe-fontcolor-black-darken">
|
|
<span @click="subscriptionDialog=false">No, thank you</span>
|
|
</router-link>
|
|
</v-col>
|
|
<v-col cols="12" sm="9" class="pt-0 pt-sm-3">
|
|
By signing up, you agree to our and
|
|
<router-link
|
|
to
|
|
@click.native="goToLink('https://www.crane.com/privacy-policy')"
|
|
title="Privacy Policy"
|
|
class="subscribe-fontcolor-black-darken"
|
|
>
|
|
<span>Privacy Policy</span>
|
|
</router-link>and
|
|
<router-link
|
|
to
|
|
@click.native="goToLink('https://www.crane.com/terms-of-use')"
|
|
title="Terms of Service"
|
|
class="subscribe-fontcolor-black-darken"
|
|
>
|
|
<span>Terms of Service</span>
|
|
</router-link>.
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
<v-row v-if="isDesktop" class="regular-font subscribe-fontcolor-black-darken bottom-div-background mx-0">
|
|
<v-col cols="12" sm="3">
|
|
<router-link to class="subscribe-fontcolor-black-darken">
|
|
<span @click="subscriptionDialog=false">No, thank you</span>
|
|
</router-link>
|
|
</v-col>
|
|
<v-col cols="12" sm="9" class="pt-0 pt-sm-3">
|
|
By signing up, you agree to our and
|
|
<router-link to
|
|
@click.native="goToLink('https://www.crane.com/privacy-policy')" title="Privacy Policy" class="subscribe-fontcolor-black-darken">
|
|
<span>Privacy Policy</span>
|
|
</router-link>
|
|
and
|
|
<router-link to
|
|
@click.native="goToLink('https://www.crane.com/terms-of-use')" title="Terms of Service" class="subscribe-fontcolor-black-darken">
|
|
<span>Terms of Service</span>
|
|
</router-link>.
|
|
</v-col>
|
|
</v-row>
|
|
</v-dialog>
|
|
<SnackbarComponent :snackbar="snackbar"></SnackbarComponent>
|
|
</v-container>
|
|
</template>
|
|
<script>
|
|
/*eslint-disable*/
|
|
import SnackbarComponent from "@/components/common/SnackbarComponent";
|
|
export default {
|
|
name: "SubscriptionDialog",
|
|
data: () => ({
|
|
subscriptionDialog: false,
|
|
footerFormValid: false,
|
|
emailRules: [
|
|
(v) => !!v || "Email is required",
|
|
(v) => /.+@.+\..+/.test(v) || "Email must be valid",
|
|
],
|
|
stayInTouch: "LET'S STAY IN TOUCH",
|
|
email: null,
|
|
snackbar: {
|
|
show: false,
|
|
message: null,
|
|
color: null,
|
|
timeout: 0,
|
|
},
|
|
}),
|
|
components: { SnackbarComponent },
|
|
computed: {
|
|
isDesktop: function () {
|
|
return this.$vuetify.breakpoint.xsOnly ? false : true;
|
|
},
|
|
},
|
|
methods: {
|
|
goToLink(pageLink) {
|
|
window.location.replace(pageLink);
|
|
//} else {
|
|
//window.open(routeSecond, "_self");
|
|
//}
|
|
},
|
|
submit: function () {
|
|
if (this.$refs.subscribeForm.validate()) {
|
|
this.$store
|
|
.dispatch("emailSubscriber/fetchEmailSubscriber", {
|
|
email: this.email,
|
|
})
|
|
.then((status) => {
|
|
if (status === "you have successfully subscribed.") {
|
|
this.snackbar = {
|
|
message: status,
|
|
color: "success",
|
|
show: true,
|
|
timeout: 5000,
|
|
};
|
|
} else {
|
|
this.snackbar = {
|
|
message: status,
|
|
color: "error",
|
|
show: true,
|
|
timeout: 5000,
|
|
};
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
this.snackbar = {
|
|
message: error.message,
|
|
color: "error",
|
|
show: true,
|
|
timeout: 5000,
|
|
};
|
|
});
|
|
this.email = null;
|
|
this.$refs.subscribeForm.resetValidation();
|
|
this.subscriptionDialog = false;
|
|
}
|
|
},
|
|
|
|
resetEmailValidation() {
|
|
this.$refs.subscribeForm.resetValidation();
|
|
},
|
|
},
|
|
mounted() {
|
|
// setTimeout(() => {
|
|
// let userVisitCount= localStorage.getItem("cr_userVisitCount");
|
|
// if (!userVisitCount||userVisitCount == 1) this.subscriptionDialog = true;
|
|
// else this.subscriptionDialog = false;
|
|
// }, 4000);
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
.bottom-div-background {
|
|
background: rgba(217 218 221 / 20%);
|
|
}
|
|
.dialog-background {
|
|
background-color: #97cfe3 !important;
|
|
}
|
|
.dailog-close-button.v-btn:not(.v-btn--text):not(.v-btn--outlined):focus:before {
|
|
opacity: 0 !important;
|
|
}
|
|
.dailog-close-button.v-btn:not(.v-btn--text):not(.v-btn--outlined):hover:before {
|
|
opacity: 0 !important;
|
|
}
|
|
.subscribe-fontcolor-black-darken {
|
|
color: #1d1d1d !important;
|
|
}
|
|
</style> |