From 1df243977979587cc45874f3b3e8f27fc75babde Mon Sep 17 00:00:00 2001 From: Akbar Abdrakhmanov Date: Fri, 19 Oct 2018 21:25:29 +0200 Subject: [PATCH] refactor mailer module, add module docs --- core/modules/mailer/components/EmailForm.ts | 19 ++---- core/modules/mailer/store/index.ts | 58 ++++++++----------- core/modules/mailer/types/MailItem.ts | 2 +- doc/api-modules/mailer.md | 43 ++++++++++++++ .../core/blocks/Checkout/ThankYouPage.vue | 25 +++++++- 5 files changed, 94 insertions(+), 53 deletions(-) create mode 100644 doc/api-modules/mailer.md diff --git a/core/modules/mailer/components/EmailForm.ts b/core/modules/mailer/components/EmailForm.ts index 4f1be44ec1..6d14ee8462 100644 --- a/core/modules/mailer/components/EmailForm.ts +++ b/core/modules/mailer/components/EmailForm.ts @@ -9,21 +9,10 @@ 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() } @@ -31,11 +20,11 @@ export const EmailForm = { .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.')) }) } } diff --git a/core/modules/mailer/store/index.ts b/core/modules/mailer/store/index.ts index 84a25039e3..aaa33be8bf 100644 --- a/core/modules/mailer/store/index.ts +++ b/core/modules/mailer/store/index.ts @@ -6,42 +6,32 @@ import { Module } from 'vuex' export const module: Module = { 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()) + }) } } } diff --git a/core/modules/mailer/types/MailItem.ts b/core/modules/mailer/types/MailItem.ts index 71fdc3e0b3..e956a1bd9f 100644 --- a/core/modules/mailer/types/MailItem.ts +++ b/core/modules/mailer/types/MailItem.ts @@ -3,5 +3,5 @@ export default interface MailItem { targetAddress: string, subject: string, emailText: string, - token?: string + confirmation?: boolean } diff --git a/doc/api-modules/mailer.md b/doc/api-modules/mailer.md new file mode 100644 index 0000000000..45cac88ca5 --- /dev/null +++ b/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: '', + targetAddress: '', + subject: '', + emailText: '' + }) + } + } +} +```` diff --git a/src/themes/default/components/core/blocks/Checkout/ThankYouPage.vue b/src/themes/default/components/core/blocks/Checkout/ThankYouPage.vue index f727d85396..232b75b89c 100644 --- a/src/themes/default/components/core/blocks/Checkout/ThankYouPage.vue +++ b/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' } })