newsletter module

.gitignore

@@ -29,6 +29,7 @@ core/resource/i18n/nl-NL.json
 core/resource/i18n/pl-PL.json
 core/resource/i18n/pt-BR.json
 core/resource/i18n/ru-RU.json
+*.iml
 
 #unit testing
 /test/unit/coverage

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Global config api path under `api.url` - @BartoszLiburski (#2622)
 - Google Tag Manager integration - @talalus (#841)
 - Portuguese (pt-PT) translation - @xlcnd (#2695)
+- Module Mailchimp is removed in favor of more generic Newsletter - @mdesmet (#2558)
 - Added `syncTasks` cleanup, `elasticCacheQuota` lowered to 3096KB - @pkarw (#2729)
 - Added back-button on orde detail page [#2819]
 - Added Elastic Search Suggestions in the Search Response - @jpetar (#2853)

config/default.json

@@ -393,7 +393,7 @@
       "fullLanguageName": "English",
       "bundleAllStoreviewLanguages": true
     },
-    "mailchimp": {
+    "newsletter": {
       "endpoint": "http://localhost:8080/api/ext/mailchimp-subscribe/subscribe"
     },
     "mailer": {

core/modules/newsletter/components/Newsletter.ts

@@ -0,0 +1,8 @@
+import SubscriptionStatus from '@vue-storefront/core/modules/newsletter/mixins/SubscriptionStatus'
+import Subscribe from '@vue-storefront/core/modules/newsletter/mixins/Subscribe'
+import Unsubscribe from '@vue-storefront/core/modules/newsletter/mixins/Unsubscribe'
+
+export const Newsletter = {
+  name: 'Newsletter',
+  mixins: [SubscriptionStatus, Subscribe, Unsubscribe]
+}

src/modules/mailchimp/index.ts → core/modules/newsletter/index.ts

@@ -2,12 +2,10 @@ import { module } from './store'
 import { VueStorefrontModule, VueStorefrontModuleConfig } from '@vue-storefront/core/lib/module'
 import { initCacheStorage } from '@vue-storefront/core/helpers/initCacheStorage'
 
-export const KEY = 'mailchimp'
+export const KEY = 'newsletter'
 export const cacheStorage = initCacheStorage(KEY)
-
 const moduleConfig: VueStorefrontModuleConfig = {
   key: KEY,
   store: { modules: [{ key: KEY, module }] },
 }
-
-export const Mailchimp = new VueStorefrontModule(moduleConfig)
+export const Newsletter = new VueStorefrontModule(moduleConfig)

core/modules/newsletter/mixins/Subscribe.ts

@@ -0,0 +1,39 @@
+import { required, email } from 'vuelidate/lib/validators'
+
+/**
+ * Newsletter subscription form component.
+ *
+ * #### Data
+ * - `email: String` - email that will be used for subscription, validated with vuelidate (email, required)
+ *
+ * #### Methods
+ * - `subscribe(success?: Function, failure?: Function)` dispatches `newsletter/subscribe` with `email` data property. `success(res)` and `failure(err)` are callback functions called depending on subscription result and contain response info or error.
+ *
+ */
+export default {
+  name: 'NewsletterSubscribe',
+  data () {
+    return {
+      email: ''
+    }
+  },
+  validations: {
+    email: {
+      required,
+      email
+    }
+  },
+  methods: {
+    subscribe (success?: Function, failure?: Function) {
+      // argument omitted for validation purposes
+      if (!this.$v.$invalid) {
+        return this.$store.dispatch('newsletter/subscribe', this.email).then(res => {
+          if (success) success(res)
+        }).catch(err => {
+          if (failure) failure(err)
+        }
+        )
+      }
+    }
+  }
+}

core/modules/newsletter/mixins/SubscriptionStatus.ts

@@ -0,0 +1,64 @@
+import { required, email } from 'vuelidate/lib/validators'
+
+/**
+ * Newsletter subscription form component.
+ *
+ * #### Data
+ * - `email: String` - email that will be used for subscription, validated with vuelidate (email, required)
+ *
+ * ### Computed
+ * - `isSubscribed: boolean` - returns true if user subscribed to the newsletter in this session
+ *
+ * #### Methods
+ * - `checkStatus(success?: Function, failure?: Function)` dispatches `newsletter/status` with `email` data property. `success(res)` and `failure(err)` are callback functions called depending on subscription result and contain response info or error.
+ *
+ */
+export default {
+  name: 'SubscriptionStatus',
+  data () {
+    return {
+      email: '',
+      user: {
+        isSubscribed: false
+      }
+    }
+  },
+  validations: {
+    email: {
+      required,
+      email
+    }
+  },
+  methods: {
+    onLoggedIn () {
+      this.email = this.$store.state.user.current.email
+      this.checkStatus(response => {
+        this.user.isSubscribed = response.result === 'subscribed'
+      })
+    },
+    checkStatus (success?: Function, failure?: Function) {
+      // argument omitted for validation purposes
+      if (!this.$v.$invalid) {
+        return this.$store.dispatch('newsletter/status', this.email).then(res => {
+          if (success) success(res)
+        }).catch(err => {
+          if (failure) failure(err)
+        }
+        )
+      }
+    }
+  },
+  beforeMount () {
+    // the user might already be logged in, so check the subscription status
+    if (this.$store.state.user.current) this.onLoggedIn()
+    this.$bus.$on('user-after-loggedin', this.onLoggedIn)
+  },
+  beforeDestroy () {
+    this.$bus.$off('user-after-loggedin', this.onLoggedIn)
+  },
+  computed: {
+    isSubscribed () : Boolean {
+      return this.$store.getters['newsletter/isSubscribed']
+    }
+  }
+}

core/modules/newsletter/mixins/Unsubscribe.ts

@@ -0,0 +1,38 @@
+import { required, email } from 'vuelidate/lib/validators'
+
+/**
+ * Newsletter subscription form component.
+ *
+ * #### Data
+ * - `email: String` - email that will be used for subscription, validated with vuelidate (email, required)
+ *
+ * #### Methods
+ * - `unsubscribe(success?: Function, failure?: Function)` dispatches `newsletter/unsubscribe` with `email` data property. `success(res)` and `failure(err)` are callback functions called depending on subscription result and contain response info or error.
+ *
+ */
+export default {
+  name: 'NewsletterUnsubscribe',
+  data () {
+    return {
+      email: ''
+    }
+  },
+  validations: {
+    email: {
+      required,
+      email
+    }
+  },
+  methods: {
+    unsubscribe () {
+      // argument omitted for validation purposes
+      if (!this.$v.$invalid) {
+        return this.$store.dispatch('newsletter/unsubscribe', this.email).then(res => {
+          this.$emit('unsubscribed', res)
+        }).catch(err =>
+          this.$emit('unsubscription-error', err)
+        )
+      }
+    }
+  }
+}

src/modules/mailchimp/store/index.ts → core/modules/newsletter/store/index.ts

@@ -1,15 +1,19 @@
 import * as types from './mutation-types'
 import { Module } from 'vuex'
-import { mailchimpState } from '../types/mailchimpState'
+import { newsletterState } from '../types/newsletterState'
 import { cacheStorage } from '../'
 import config from 'config'
 
-export const module: Module<mailchimpState, any> ={
+export const module: Module<newsletterState, any> ={
   namespaced: true,
   state: {
     isSubscribed: null,
     email: null,
   },
+  getters: {
+    isSubscribed: state => state.isSubscribed,
+    email: state => state.email
+  },
   mutations: {
     [types.NEWSLETTER_SUBSCRIBE] (state) {
       state.isSubscribed = true
@@ -22,11 +26,32 @@ export const module: Module<mailchimpState, any> ={
     }
   },
   actions: {
+    status ({ commit, state }, email): Promise<Response> {
+
+      return new Promise((resolve, reject) => {
+        fetch(config.newsletter.endpoint + '?email=' + encodeURIComponent(email), {
+          method: 'GET',
+          headers: { 'Content-Type': 'application/json' },
+          mode: 'cors'
+        }).then(res => res.json())
+          .then(res => {
+          if(res.result === 'subscribed') {
+            commit(types.SET_EMAIL, email)
+            commit(types.NEWSLETTER_SUBSCRIBE)
+          } else {
+            commit(types.NEWSLETTER_UNSUBSCRIBE)
+          }
+          resolve(res)
+        }).catch(err => {
+          reject(err)
+        })
+      })
+    },
     subscribe ({ commit, state }, email): Promise<Response> {
-     
+
       if (!state.isSubscribed) {
         return new Promise((resolve, reject) => {
-          fetch(config.mailchimp.endpoint, {
+          fetch(config.newsletter.endpoint, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             mode: 'cors',
@@ -43,10 +68,10 @@ export const module: Module<mailchimpState, any> ={
       }
     },
     unsubscribe ({ commit, state }, email): Promise<Response> {
-    
-      if (!state.isSubscribed) {
+
+      if (state.isSubscribed) {
         return new Promise((resolve, reject) => {
-          fetch(config.mailchimp.endpoint, {
+          fetch(config.newsletter.endpoint, {
             method: 'DELETE',
             headers: { 'Content-Type': 'application/json' },
             mode: 'cors',

core/modules/newsletter/test/unit/components/Newsletter.spec.ts

@@ -0,0 +1,19 @@
+import { mountMixinWithStore } from '@vue-storefront/unit-tests/utils'
+
+import { Newsletter } from '../../../components/Newsletter'
+
+jest.mock('@vue-storefront/core/modules/newsletter/mixins/SubscriptionStatus', () => ({}))
+jest.mock('@vue-storefront/core/modules/newsletter/mixins/Subscribe', () => ({}))
+jest.mock('@vue-storefront/core/modules/newsletter/mixins/Unsubscribe', () => ({}))
+
+describe('Newsletter', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('can be initialized', () => {
+    const wrapper = mountMixinWithStore(Newsletter)
+
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+})