refactor mailer module, add module docs

core/modules/mailer/components/EmailForm.ts

@@ -9,33 +9,22 @@ export const EmailForm = {
   },
   methods: {
     sendEmail (letter: MailItem, success, failure) {
-      this.$store.dispatch('mailer/getToken')
+      this.$store.dispatch('mailer/sendEmail', letter)
       .then(res => {
         if (res.ok) {
-          return res.json()
-        }
-        throw new Error()
-      })
-      .then(tokenResponse => {
-        this.token = tokenResponse.result
-        return this.$store.dispatch('mailer/sendEmail', { ...letter, token: this.token })
-      })
-      .then(res => {
-        if (res.ok) {
-          success(i18n.t('Email has successfully been sent'))
-          this.$store.dispatch('mailer/sendConfirmation', { ...letter, token: this.token })
+          if (success) success(i18n.t('Email has successfully been sent'))
         } else {
           return res.json()
         }
       })
       .then(errorResponse => {
         if (errorResponse) {
           const errorMessage = errorResponse.result
-          failure(i18n.t(errorMessage))
+          if (failure) failure(i18n.t(errorMessage))
         }
       })
       .catch(() => {
-        failure(i18n.t('Could not send an email. Please try again later.'))
+        if (failure) failure(i18n.t('Could not send an email. Please try again later.'))
       })
     }
   }

core/modules/mailer/store/index.ts

@@ -6,42 +6,32 @@ import { Module } from 'vuex'
 export const module: Module<any, any> = {
   namespaced: true,
   actions: {
-    getToken ({}) {
-      return fetch(config.mailer.endpoint.token)
-    },
     sendEmail ({}, letter: MailItem) {
-      return fetch(config.mailer.endpoint.send, {
-        method: 'POST',
-        mode: 'cors',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(letter)
-      })
-    },
-    sendConfirmation ({}, letter: MailItem) {
-      if (config.mailer.sendConfirmation) {
-        const confirmationLetter = {
-          sourceAddress: letter.targetAddress,
-          targetAddress: letter.sourceAddress,
-          subject: i18n.t('Confirmation of receival'),
-          emailText: i18n.t(`Dear customer,\n\nWe have received your letter.\nThank you for your feedback!`),
-          token: letter.token,
-          confirmation: true
-        }
-
-        fetch(config.mailer.endpoint.send, {
-          method: 'POST',
-          mode: 'cors',
-          headers: {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(confirmationLetter)
+      return new Promise((resolve, reject) => {
+        fetch(config.mailer.endpoint.token)
+        .then(res => res.json())
+        .then(res => {
+          if (res.code === 200) {
+            fetch(config.mailer.endpoint.send, {
+              method: 'POST',
+              mode: 'cors',
+              headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify({
+                ...letter,
+                token: res.result
+              })
+            })
+            .then(res => resolve(res))
+            .catch(() => reject())
+          } else {
+            reject()
+          }
         })
-        .catch(error => console.error(error))
-      }
+        .catch(() => reject())
+      })
     }
   }
 }

core/modules/mailer/types/MailItem.ts

@@ -3,5 +3,5 @@ export default interface MailItem {
     targetAddress: string,
     subject: string,
     emailText: string,
-    token?: string
+    confirmation?: boolean
 }

doc/api-modules/mailer.md

@@ -0,0 +1,43 @@
+# Mailer module
+
+The Mailer module is responsible for sending emails. Currently this module consists of EmailForm component that has sendEmail method for sending emails. This method can also be used for sending confirmation emails. **PLEASE NOTE** You have to set an SMTP transport in vs-api configuration file (local.json) before you start using this module. Transport properties can be found in `extensions.mailService.transport`.
+
+## Content
+
+### sendEmail
+- [method] **sendEmail**(letter, success, failure)
+* **letter** - an object, that defines the details of the email, namely:
+  1. sourceAddress - mandatory field, string, defines the source email address from which email will be sent (if smtp transport supports it, otherwise transport's address will be used).
+  2. targetAddress - mandatory field, string, defines the address to which email will be sent. This address has to be from the white list, defined in vs-api configuration file.
+  3. subject - mandatory field, string, email's subject.
+  4. emailText - mandatory field, string, email's body text.
+  5. confirmation - optional field, boolean, defines whether this is a confirmation email. The only difference of a confirmation email from a normal email is that the source address needs to be from the white list, defined in vs-api configuration file.
+* **success** - a callback function that is called if email has successfully been sent. This callback has a single `message` parameter that contains a default text about successfull sending.
+* **failure** - a callback function that is called if email could not be sent. This callback also has a single `message` parameter that contains a text with details about unsuccessfull sending.
+
+## Example
+
+````javascript
+// Inside Vue component
+import {
+  EmailForm
+} from '@vue-storefront/core/modules/mailer/components/EmailForm'
+
+export default {
+  //...other properties
+  mixins: [
+    EmailForm
+  ],
+  // if we use it inside of a method
+  methods: {
+    someMethod () {
+      this.sendEmail({
+        sourceAddress: '<some-address>',
+        targetAddress: '<another-address>',
+        subject: '<some-text>',
+        emailText: '<more-text-here>'
+      })
+    }
+  }
+}
+````

src/themes/default/components/core/blocks/Checkout/ThankYouPage.vue

@@ -113,12 +113,31 @@ export default {
           subject: this.$t('What we can improve?'),
           emailText: this.feedback
         },
-        this.notifyResult
+        this.notifySuccess,
+        this.notifyFailure
       )
     },
-    notifyResult (type, message) {
+    notifySuccess (message) {
       this.$bus.$emit('notification', {
-        type,
+        type: 'success',
+        message,
+        action1: { label: this.$t('OK'), action: 'close' }
+      })
+      if (this.$store.state.config.mailer.sendConfirmation) {
+        this.sendEmail(
+          {
+            sourceAddress: this.$store.state.config.mailer.contactAddress,
+            targetAddress: this.$store.state.checkout.personalDetails.emailAddress,
+            subject: this.$t('Confirmation of receival'),
+            emailText: this.$t(`Dear customer,\n\nWe have received your letter.\nThank you for your feedback!`),
+            confirmation: true
+          }
+        )
+      }
+    },
+    notifyFailure (message) {
+      this.$bus.$emit('notification', {
+        type: 'error',
         message,
         action1: { label: this.$t('OK'), action: 'close' }
       })