<commit_before><template>
<div class="component-SecondaryCtaMailingList" id="component-SecondaryCtaMailingList">
  <div class="wrapper">
    <SvgIconMail fill="white" :width="30" :height="30" />
    <h2 class="title-2">Stay in the loop</h2>
    <p class="description">Subscribe to receive updates on the ÐApp ecosystem.</p>
    <div class="input-wrapper">
      <input id="component-SecondaryCtaMailingList-input" v-model="email" @input="validateEmail" class="input" type="text" placeholder="Enter your email here" />
    </div>
    <button class="cta" @click="subscribe()" 
      :class="[emailIsValid ? '-is-valid' : '', 
               isSubmitting ? '-is-submitting' : '',
               justSubmitted ? '-just-submitted' : '']">{{ ctaText }}
    </button>
  </div>
</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { isValidEmail } from '~/helpers/validators'
import { setUser, trackNewsletterSubscribe } from '~/helpers/mixpanel'
import axios from '~/helpers/axios'
import SvgIconMail from './SvgIconMail'

export default {
  components: {
    SvgIconMail
  },
  computed: {
    ...mapGetters([
      'userEntryRoute'
    ])
  },
  data () {
    return {
      ctaText: 'Sign up',
      email: '',
      emailIsValid: false,
      isSubmitting: false,
      justSubmitted: false
    }
  },
  methods: {
    subscribe () {
      if (this.emailIsValid && !this.isSubmitting) {
        this.ctaText = 'Submitting...'
        this.isSubmitting = true
        const data = {
          fields: {
            email: this.email
          }
        }
        axios.post('newsletter/subscribe', data)
          .then((response) => {
            this.trackNewsletterSubscribe()
            this.email = ''
            this.justSubmitted = true
            this.ctaText = 'Thanks! We\'ll be in touch!'
            return new Promise((resolve) => {
              setTimeout(() => {
                this.emailIsValid = false
                this.isSubmitting = false
                this.justSubmitted = false
                this.ctaText = 'Sign up'
                resolve()
              }, 5000)
            })
          })
          .catch(() => {
            this.isSubmitting = false
            this.ctaText = 'Sign up'
            alert('There was an error subscribing. Make sure you have entered a valid email address and try again. If this error persists, please let us know: <EMAIL>')
          })
      }
    },
    trackNewsletterSubscribe () {
      const sourceComponent = 'SecondaryCtaMailingList'
      const sourcePath = this.$route.path
      const action = trackNewsletterSubscribe(this.email, sourceComponent, sourcePath)
      this.$mixpanel.track(action.name, action.data)

      const hasWeb3 = typeof web3 !== 'undefined'
      const lastUpdated = new Date().toISOString()
      const user = setUser(this.email, hasWeb3, lastUpdated, this.userEntryRoute)
      this.$mixpanel.setUser(user)
    },
    validateEmail () {
      let isValid = false
      if (this.email.length > 0) {
        isValid = isValidEmail(this.email)
      } else {
        isValid = false
      }
      this.emailIsValid = isValid
    }
  }
}
</script>


<style lang="scss" scoped>
@import '~assets/css/settings';

.cta {
  padding: 4px 75px;
  border: 1px solid lighten($color--white, 100%);
  position: relative;
  opacity: 0;
  &:active {
    top: 1px;
  }
  &.-is-valid {
    opacity: 1;
  }
  &.-is-submitting {
    border-color: transparent;
    cursor: default;
    &:active {
      top: 0;
    }
  }
  &.-just-submitted {
    border-color: transparent;
    cursor: default;
    &:active {
      top: 0;
    }
  }
}

.component-SecondaryCtaMailingList {
  color: lighten($color--white, 100%);
  padding: 20px 0;
  overflow: hidden;
  text-align: center;
}

.description {
  margin-top: 0;<commit_msg>Improve mailing list UI (#223)<commit_after><template>
<div class="component-SecondaryCtaMailingList" id="component-SecondaryCtaMailingList">
  <div class="wrapper">
    <SvgIconMail fill="white" :width="30" :height="30" />
    <h2 class="title-2">Stay in the loop</h2>
    <p class="description">Subscribe to receive updates on the ÐApp ecosystem.</p>
    <div class="input-wrapper">
      <input id="component-SecondaryCtaMailingList-input" v-model="email" @input="validateEmail" class="input" type="text" placeholder="Enter your email here" />
    </div>
    <button class="cta" @click="subscribe()" 
      :class="[emailIsValid ? '-is-valid' : '', 
               isSubmitting ? '-is-submitting' : '',
               justSubmitted ? '-just-submitted' : '']">{{ ctaText }}
    </button>
  </div>
</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { isValidEmail } from '~/helpers/validators'
import { setUser, trackNewsletterSubscribe } from '~/helpers/mixpanel'
import axios from '~/helpers/axios'
import SvgIconMail from './SvgIconMail'

export default {
  components: {
    SvgIconMail
  },
  computed: {
    ...mapGetters([
      'userEntryRoute'
    ])
  },
  data () {
    return {
      ctaText: 'Sign up',
      email: '',
      emailIsValid: false,
      isSubmitting: false,
      justSubmitted: false
    }
  },
  methods: {
    subscribe () {
      if (this.emailIsValid && !this.isSubmitting) {
        this.ctaText = 'Submitting...'
        this.isSubmitting = true
        const data = {
          fields: {
            email: this.email
          }
        }
        axios.post('newsletter/subscribe', data)
          .then((response) => {
            this.trackNewsletterSubscribe()
            this.email = ''
            this.justSubmitted = true
            this.ctaText = 'Thanks! We\'ll be in touch!'
            return new Promise((resolve) => {
              setTimeout(() => {
                this.emailIsValid = false
                this.isSubmitting = false
                this.justSubmitted = false
                this.ctaText = 'Sign up'
                resolve()
              }, 5000)
            })
          })
          .catch(() => {
            this.isSubmitting = false
            this.ctaText = 'Sign up'
            alert('There was an error subscribing. Make sure you have entered a valid email address and try again. If this error persists, please let us know: <EMAIL>')
          })
      }
    },
    trackNewsletterSubscribe () {
      const sourceComponent = 'SecondaryCtaMailingList'
      const sourcePath = this.$route.path
      const action = trackNewsletterSubscribe(this.email, sourceComponent, sourcePath)
      this.$mixpanel.track(action.name, action.data)

      const hasWeb3 = typeof web3 !== 'undefined'
      const lastUpdated = new Date().toISOString()
      const user = setUser(this.email, hasWeb3, lastUpdated, this.userEntryRoute)
      this.$mixpanel.setUser(user)
    },
    validateEmail () {
      let isValid = false
      if (this.email.length > 0) {
        isValid = isValidEmail(this.email)
      } else {
        isValid = false
      }
      this.emailIsValid = isValid
    }
  }
}
</script>


<style lang="scss" scoped>
@import '~assets/css/settings';

.cta {
  padding: 4px 75px;
  border: 1px solid lighten($color--white, 100%);
  position: relative;
  opacity: .4;
  transition: all .2s ease;
  cursor: default;
  &.-is-valid {
    opacity: 1;
    cursor: pointer;
    &:active {
      top: 1px;
    }
  }
  &.-is-submitting {
    border-color: transparent;
    cursor: default;
    &:active {
      top: 0;
    }
  }
  &.-just-submitted {
    border-color: transparent;
    cursor: default;
    &:active {
      top: 0;
    }
  }
}

.component-SecondaryCtaMailingList {
  color: lighten($color--white, 100%);
  padding: 20px 0;
  overflow: hidden;
  text-align: center;
}

.description {
  margin-top: 0;
{'fraction_non_alphanumeric': 0.13415265200517465, 'fraction_numerical': 0.009314359637774904, 'mean_word_length': 2.263402279442803, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 53, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '960091', 'n_tokens_mistral': 2491, 'n_tokens_neox': 2356, 'n_words': 541}