ueberdosis / vue-mailchimp-subscribe Goto Github PK

		<template v-slot="{ subscribe, setEmail, error, success, loading }">
		<form @submit.prevent="subscribe">
			<v-text-field
			label="Your email address"
			:rules="rules"
			hide-details="auto"
			@input="setEmail($event.target.value)"
			></v-text-field> -->
			<button type="submit"><v-icon>mdi-email</v-icon></button>
			<div v-if="error">{{ error }}</div>
			<div v-if="success">Sucessfully subscribed!</div>
			<div v-if="loading">Loading…</div>
		</form>
		</template>

import r from 'jsonp'
import s from 'query-string'

export default {
  props: {
    url: {
      required: !0,
      type: String
    },
    userId: {
      required: !0,
      type: String
    },
    listId: {
      required: !0,
      type: String
    },
    language: {
      required: !0,
      type: String
    }
  },
  data: function () {
    return {
      email: null,
      success: !1,
      error: null,
      loading: !1
    }
  },
  computed: {
    data: function () {
      return s.stringify({
        u: this.userId,
        id: this.listId,
        EMAIL: this.email,
        LANGUAGE: this.language
      })
    }
  },
  methods: {
    setEmail: function (r) {
      void 0 === r && (r = ''), this.email = r.trim()
    },
    subscribe: function () {
      null === this.email || this.loading || (this.success = !1, this.error = null, this.loading = !0, r(this.url + '?' + this.data, { param: 'c' }, this.onResponse))
    },
    onResponse: function (r, s) {
      this.loading = !1, r && (this.error = r), s && 'error' === s.result && (this.error = this.formatErrorMessage(s.msg)), this.error ? this.$emit('error', this.error) : (this.success = !0, this.email = null, this.$emit('success'))
    },
    formatErrorMessage: function (r) {
      return r.replace('0 - ', '')
    }
  },
  render: function () {
    return this.$scopedSlots.default({
      subscribe: this.subscribe,
      setEmail: this.setEmail,
      error: this.error,
      success: this.success,
      loading: this.loading
    })
  }
}
//# sourceMappingURL=vue-mailchimp-subscribe.mjs.map

<mailchimp-subscribe
    url="https://xxxxxxxxxxxxx.us1.list-manage.com/subscribe/post-json"
    user-id="xxxxxxxxx"
    list-id="xxxxxxxxxx"
    language="fr_CA"
  >