Merge pull request #19 from GotPPay/fix-launch-review-comments

Fix launch review comments

README.md

@@ -72,7 +72,8 @@ Prerequests for step 3 (run on server):
 requires running mongodb service
 
 	Database (tellall) with collection (skill_list)
-		* Insert dummy skill with : db.skill_list.insert({"skillID" : "amzn1.ask.skill.efbf0564-a732-4ba9-958f-57939138adae", "intents" : [ 	{ 	"intentName" : "GetFirstQuestion", "questionExplanation" : "",	"questions" : [ 	"tell me something about projects", 	"tell me all about projects" ], 	"answer" : "blablabla bla bla" }, 	{ 	"intentName" : "GetThirdQuestion", "questionExplanation" : "",	"questions" : [ 	"Give me third question" ], 	"answer" : "This is answer to the third question" } ], "invocationName" : "Saburly", "invocationAnswer" : "We are Saburly team one" })
+		* Insert dummy skill with : db.skill_list.insert({"skillID" : "amzn1.ask.skill.2445552d-954d-4cd6-b77f-295368e02842", "intents" : [ { "intentName" : "GetFirstQuestion", "questionExplanation" : "","questions" : [ "tell me something about projects", "tell me all about projects" ], "answer" : "blablabla bla bla", "answerType":0, "externalAnswerSource":"" }, { "intentName" : "GetThirdQuestion", "questionExplanation" : "","questions" : [ "Give me third question" ], "answer" : "This is answer to the third question", "answerType":1, "externalAnswerSource":"http://sarajevotimes.com" } ], "invocationName" : "saburly", "invocationAnswer" : "We are Saburly team one", "contactEmail":"bilal@saburly.com" })
+
 		
         *obtain _id and change in web/src/App.js, and also skill_db_id in backend/config.js
 		*enter web/ dir and run "npm run build"

backend/config/config.js

@@ -1,5 +1,8 @@
+constants = require('./constants')
 var config = {};
 
+config.SKILL_STAGE = constants.skillStage.IN_DEVELOPMENT;
+
 config.DB_URL = 'mongodb://localhost:27017/tellall';
 config.PORT = 5000;
 
@@ -17,7 +20,7 @@ config.TOKEN_EXPIRES_IN = 1515100500;
 //config.SKILL_ID = 'amzn1.ask.skill.efbf0564-a732-4ba9-958f-57939138adae'; //bilal
 config.SKILL_ID = 'amzn1.ask.skill.2445552d-954d-4cd6-b77f-295368e02842'; //saburly
 //config.SKILL_DB_ID = '5a5016e775becaef2015da10'; //for server
-config.SKILL_DB_ID = '5a232fb86ce046c749739455'; //for local
+config.SKILL_DB_ID = '5abd461329f85e4ec728d945'; //for local
 
 //Bilal 
 //config.CLIENT_ID = 'amzn1.application-oa2-client.c748ca56ded04a95b236979898585ff7';

backend/config/constants.js

@@ -1,5 +1,10 @@
 const constants = {};
 
+constants.skillStage = {
+  IN_DEVELOPMENT: 'development',
+  LIVE: 'live',
+};
+
 constants.amazonResultCodes = {
   OK: 200,
   ACCEPTED: 202,
@@ -31,12 +36,17 @@ constants.voiceResponseStrings = {
   QUESTION_NOT_FOUND: 'Sorry, I didnt understand',
   GENERIC_CONTINUE: 'Say something to continue',
   DIDNT_ASK_ANYTHING: 'There was no question to answer to',
+  ERROR_SUMMARIZING_CONTENT: 'Sorry, there was problem with summarizing news',
+  ERROR_FETCHING_CONTENT: 'Failed to get content',
 };
 
 //Timing is given in [ms]
 constants.voiceResponseTimings = {
   PAUSE_BETWEEN_QUESTIONS: 650,
   PAUSE_AFTER_WELCOME_MESSAGE: 650,
+  PAUSE_BETWEEN_TITLES: 500,
+  PAUSE_BETWEEN_TITLE_AND_CONTENT: 500,
+  PAUSE_BETWEEN_NEWS: 800,
 };
 
 constants.stringConstraints = {
@@ -58,4 +68,17 @@ constants.stringConstraints = {
   EMAIL_MAX_LENGTH: 100,
 };
 
+constants.answerType = {
+  PREDEFINED: 0,
+  EXTERNAL_SOURCE_WP_TITLES: 1,
+  EXTERNAL_SOURCE_WP_NEWS: 2,
+};
+
+constants.contentType = {
+  TITLES: 0,
+  NEWS: 1,
+};
+
+constants.FIXED_SUMMARY_LENGTH = 3;
+
 module.exports = constants;

backend/controllers/saburlyEntryPoint.js

@@ -1,6 +1,9 @@
 var express = require ('express'), router = express.Router ();
 var bodyParser = require ('body-parser');
 var alexa = require ('../models/alexa');
+var verifier = require('alexa-verifier-middleware')
+
+router.use(verifier);
 
 router.post ('/', bodyParser.json (), async (req, res) => {
   alexa.run (req, res);

backend/controllers/skill.js

@@ -1,10 +1,10 @@
-var express = require ('express'), router = express.Router ();
+let express = require ('express'), router = express.Router ();
 const constants = require ('../config/constants');
-var databaseHelper = require ('../helpers/database');
+let databaseHelper = require ('../helpers/database');
-var amazonHelper = require ('../helpers/amazon');
+let amazonHelper = require ('../helpers/amazon');
-var skillValidator = require('../helpers/skillValidator');
+let skillValidator = require('../helpers/skillValidator');
-var bodyParser = require ('body-parser');
+let bodyParser = require ('body-parser');
-var alexa = require ('../models/alexa');
+let alexa = require ('../models/alexa');
 
 router.get ('/:id', async (req, res, next) => {
   const id = req.params.id;

backend/helpers/amazon.js

@@ -271,10 +271,11 @@ var generateInteractionModel = function (skill) {
 
 var uploadSkill = function (skill) {
   let generatedInteractionModel = generateInteractionModel (skill);
+  console.log(skill.skillID);
   return fetch (
-    `https://api.amazonalexa.com/v0/skills/${skill.skillID}/interactionModel/locales/en-US`,
+    `https://api.amazonalexa.com/v1/skills/${skill.skillID}/stages/development/interactionModel/locales/en-US`,
     {
-      method: 'POST',
+      method: 'PUT',
       headers: {
         Authorization: config.TOKEN,
       },

backend/helpers/externalSource.js

@@ -0,0 +1,112 @@
+let request = require ('request');
+let Parser = require ('rss-parser');
+let summarizer = require ('nodejs-text-summarizer');
+var htmlToText = require ('html-to-text');
+const constants = require ('../config/constants');
+
+let parser = new Parser ();
+
+getDataFromWPJSON = function (sourceUrl, page = 1, maxPosts = 10) {
+  return new Promise ((resolve, reject) => {
+    var options = {
+      method: 'GET',
+      url: `${sourceUrl}/wp-json/wp/v2/posts`,
+      qs: {
+        page: page,
+        per_page: maxPosts,
+      },
+    };
+
+    request (options, (error, response, body) => {
+      if (error) {
+        reject (error);
+      } else {
+        resolve (JSON.parse (body));
+      }
+    });
+  });
+};
+
+summarizeText = function (text, length, clearText = true) {
+  let preparedText = text;
+  if (clearText) {
+    preparedText = htmlToText.fromString (text, {
+      wordwrap: false,
+      ignoreHref: true,
+      ignoreImage: true,
+    });
+  }
+
+  return summarizer (preparedText, {n: length});
+};
+
+getTitlesFromWP = function (sourceUrl) {
+  return new Promise ((resolve, reject) => {
+    getDataFromWPJSON (sourceUrl)
+      .then (rawData => {
+        let result = '';
+        rawData.forEach (post => {
+          result +=
+            post.title.rendered +
+            `<break time="${constants.voiceResponseTimings.PAUSE_BETWEEN_TITLES}ms"/> `;
+        });
+        resolve (result);
+      })
+      .catch (err => {
+        reject (constants.voiceResponseStrings.ERROR_FETCHING_CONTENT);
+      });
+  });
+};
+
+getLatestNewsFromWP = function (
+  sourceUrl,
+  postCount = 10,
+  includeTitle = false
+) {
+  return new Promise ((resolve, reject) => {
+    getDataFromWPJSON (sourceUrl, 1, postCount)
+      .then (rawData => {
+        let result = '';
+        let htmlToTextOptions = {
+          wordwrap: false,
+          ignoreHref: true,
+          ignoreImage: true,
+        };
+
+        try {
+          rawData.forEach (post => {
+            result += includeTitle ? post.title.rendered : '';
+            result += includeTitle
+              ? `<break time="${constants.voiceResponseTimings.PAUSE_BETWEEN_TITLE_AND_CONTENT}ms"/>`
+              : '';
+            result += summarizeText (
+              post.content.rendered,
+              constants.FIXED_SUMMARY_LENGTH
+            );
+            result += `<break time="${constants.voiceResponseTimings.PAUSE_BETWEEN_NEWS}ms"/>`;
+          });
+
+          resolve (result);
+        } catch (err) {
+          reject (constants.voiceResponseStrings.ERROR_SUMMARIZING_CONTENT);
+        }
+      })
+      .catch (err => {
+        reject (constants.voiceResponseStrings.ERROR_FETCHING_CONTENT);
+      });
+  });
+};
+
+module.exports = {
+  getAnswerFromWP: function (sourceUrl, contentType) {
+    //This function will extract needed data from JSON, which we got from getDataFromWPJSON
+    switch (contentType) {
+      case constants.contentType.TITLES:
+        return getTitlesFromWP (sourceUrl);
+        break;
+      case constants.contentType.NEWS:
+        return getLatestNewsFromWP (sourceUrl);
+        break;
+    }
+  },
+};

backend/helpers/skillValidator.js

@@ -26,7 +26,9 @@ validateQuestion = function (question) {
   return validQuestionNameRegex.test (question);
 };
 
-validateAnswer = function (answer) {
+validateAnswer = function (answer, answerType) {
+  if (answerType !== constants.answerType.PREDEFINED) return true;
+  
   if (
     answer.length < constants.stringConstraints.ANSWER_MIN_LENGTH ||
     answer.length > constants.stringConstraints.ANSWER_MAX_LENGTH
@@ -36,13 +38,18 @@ validateAnswer = function (answer) {
   return validAnswerRegex.test (answer);
 };
 
+validateExternalAnswerSource = function (externalAnswerSource, answerType){
+  // TODO: implement validation logic
+  return true;
+}
+
 validateInvocationName = function (invocationName) {
   if (
     invocationName.length < constants.stringConstraints.INVOCATION_NAME_MIN_LENGTH ||
     invocationName.length > constants.stringConstraints.INVOCATION_NAME_MAX_LENGTH
   )
     return false;
-  let validInvocationNameRegex = /^[a-z,.' ]*$/i;
+  let validInvocationNameRegex = /^[a-z,.' ]*$/;
   return validInvocationNameRegex.test (invocationName);
 };
 
@@ -69,10 +76,10 @@ module.exports = {
         !validateInvocationAnswer (skill.invocationAnswer)
       )
         return false;
-
       for (let i = 0; i < skill.intents.length; i++) {
         if (!validateIntentName (skill.intents[i].intentName)) return false;
-        if (!validateAnswer (skill.intents[i].answer)) return false;
+        if (!validateAnswer (skill.intents[i].answer, skill.intents[i].answerType)) return false;
+        if (!validateExternalAnswerSource(skill.intents[i].externalAnswerSource, skill.intents[i].answerType)) return false;
 
         for (let j = 0; j < skill.intents.length; j++) {
           if (i === j) continue;

backend/models/alexa.js

@@ -3,9 +3,11 @@ const config = require ('../config/config');
 var databaseHelper = require ('../helpers/database');
 var emailHelper = require ('../helpers/email');
 const constants = require ('../config/constants');
+let predefinedSourceHelper = require ('../helpers/externalSource');
 
 var handlers = {};
 var destinationEmail;
+let skillName; 
 
 module.exports = {
   run: function (req, res) {
@@ -32,6 +34,7 @@ module.exports = {
       .then (activeSkill => {
         handlers = {};
         destinationEmail = activeSkill.contactEmail;
+        skillName = activeSkill.invocationName;
 
         let listOfPossibleQuestions = '';
         activeSkill.intents.forEach (intent => {
@@ -44,7 +47,8 @@ module.exports = {
               'ms"/>';
           }
         });
-        listOfPossibleQuestions += 'If you dont know what to do, just say help or stop';
+        listOfPossibleQuestions +=
+          'If you dont know what to do, just say help or stop';
 
         //Handler for launch requestconsole.log()
         handlers = {
@@ -57,8 +61,8 @@ module.exports = {
                   'ms"/>' +
                   'Would you like to hear list of questions that you can ask me'
               )
-              .listen (constants.voiceResponseStrings.GENERIC_CONTINUE); //Phrase from listen doesn't work !!!
+              .listen (constants.voiceResponseStrings.GENERIC_CONTINUE);
-              this.attributes['LaunchRequestYesNo'] = true;
+            this.attributes['LaunchRequestYesNo'] = true;
             this.emit (':responseReady');
           },
         };
@@ -66,19 +70,71 @@ module.exports = {
         //Handlers for user defined questions
         activeSkill.intents.map (intent => {
           handlers[intent.intentName] = function () {
-            if (this.attributes['LaunchRequestYesNo']){
+            if (this.attributes['LaunchRequestYesNo']) {
               this.attributes['LaunchRequestYesNo'] = false;
             }
-            this.response
+
-              .speak (intent.answer)
+            let answerPromiseProps = {
-              .listen (constants.voiceResponseStrings.GENERIC_CONTINUE); //Phrase from listen doesn't work !!!
+              resolve: null,
-            this.emit (':responseReady');
+              reject: null,
+            };
+
+            let answerPromise = new Promise ((resolve, reject) => {
+              answerPromiseProps = {
+                resolve: resolve,
+                reject: reject,
+              };
+            });
+
+            switch (intent.answerType) {
+              case constants.answerType.PREDEFINED:
+                answerPromiseProps.resolve (intent.answer);
+                break;
+              case constants.answerType.EXTERNAL_SOURCE_WP_TITLES:
+                predefinedSourceHelper
+                  .getAnswerFromWP (
+                    intent.externalAnswerSource,
+                    constants.contentType.TITLES
+                  )
+                  .then (answer => {
+                    answerPromiseProps.resolve (answer);
+                  })
+                  .catch (error => {
+                    answerPromiseProps.reject (error);
+                  });
+                break;
+              case constants.answerType.EXTERNAL_SOURCE_WP_NEWS:
+                predefinedSourceHelper
+                  .getAnswerFromWP (
+                    intent.externalAnswerSource,
+                    constants.contentType.NEWS
+                  )
+                  .then (answer => {
+                    answerPromiseProps.resolve (answer);
+                  })
+                  .catch (error => {
+                    answerPromiseProps.reject (error);
+                  });
+                break;
+            }
+
+            answerPromise
+              .then (answer => {
+                this.response
+                  .speak (answer);
+                this.emit (':responseReady');
+              })
+              .catch (error => {
+                this.response
+                  .speak (error);
+                this.emit (':responseReady');
+              });
           };
         });
 
         //Handler for sending message
         handlers.SendMessageIntent = function () {
-          if (this.attributes['LaunchRequestYesNo']){
+          if (this.attributes['LaunchRequestYesNo']) {
             this.attributes['LaunchRequestYesNo'] = false;
           }
 
@@ -171,56 +227,60 @@ module.exports = {
         //Built-In intents
 
         handlers.CancelIntent = function () {
-          if (this.attributes['LaunchRequestYesNo']){
+          if (this.attributes['LaunchRequestYesNo']) {
             this.attributes['LaunchRequestYesNo'] = false;
           }
-          this.response.speak ('Thank you for using Saburly');
+          this.response.speak (`Thank you for using ${skillName}`);
           this.emit (':responseReady');
         };
 
         handlers.HelpIntent = function () {
-          if (this.attributes['LaunchRequestYesNo']){
+          if (this.attributes['LaunchRequestYesNo']) {
             this.attributes['LaunchRequestYesNo'] = false;
           }
           this.response
             .speak (listOfPossibleQuestions)
-            .listen (constants.voiceResponseStrings.GENERIC_CONTINUE); //Phrase from listen doesn't work !!!
+            .listen (constants.voiceResponseStrings.GENERIC_CONTINUE);
           this.emit (':responseReady');
         };
 
-        handlers.YesIntent = function(){
+        handlers.YesIntent = function () {
-          if (this.attributes['LaunchRequestYesNo']){
+          if (this.attributes['LaunchRequestYesNo']) {
             this.attributes['LaunchRequestYesNo'] = false;
-            this.emit('HelpIntent');
+            this.emit ('HelpIntent');
-          }else{
+          } else {
-            this.response.speak(constants.voiceResponseStrings.DIDNT_ASK_ANYTHING).listen(constants.voiceResponseStrings.GENERIC_CONTINUE);
+            this.response
-            this.emit(':responseReady');
+              .speak (constants.voiceResponseStrings.DIDNT_ASK_ANYTHING);
+            this.emit (':responseReady');
           }
-        }
+        };
 
-        handlers.NoIntent = function (){
+        handlers.NoIntent = function () {
-          if (this.attributes['LaunchRequestYesNo']){
+          if (this.attributes['LaunchRequestYesNo']) {
             this.attributes['LaunchRequestYesNo'] = false;
-            this.response.speak('').listen(constants.voiceResponseStrings.GENERIC_CONTINUE);
+            this.response
-            this.emit(':responseReady');
+              .speak ('');
-          }else{
+            this.emit (':responseReady');
-            this.response.speak(constants.voiceResponseStrings.DIDNT_ASK_ANYTHING).listen(constants.voiceResponseStrings.GENERIC_CONTINUE);
+          } else {
-            this.emit(':responseReady');
+            this.response
+              .speak (constants.voiceResponseStrings.DIDNT_ASK_ANYTHING);
+            this.emit (':responseReady');
           }
-        }
+        };
 
         //Default handler for unknown question
 
         handlers.Unhandled = function () {
           this.response
-            .speak (constants.voiceResponseStrings.QUESTION_NOT_FOUND)
+            .speak (constants.voiceResponseStrings.QUESTION_NOT_FOUND);
-            .listen (constants.voiceResponseStrings.GENERIC_CONTINUE);
+          this.emit (':responseReady');
         };
 
         //Session handlers
 
         handlers.SessionEndedRequest = function () {
-          //We don't care for now
+          this.response.speak (`Thank you for using ${skillName}`);
+          this.emit (':responseReady');
         };
       })
       .catch (e => {

backend/package.json

@@ -1,18 +1,20 @@
 {
-  "name": "example",
+  "name": "tellall",
   "version": "1.0.0",
   "description": "",
   "main": "test.js",
   "dependencies": {
     "alexa-sdk": "^1.0.25",
+    "alexa-verifier-middleware": "^1.0.1",
     "body-parser": "^1.13.1",
     "ejs": "^2.5.7",
     "express": "^4.13.0",
+    "html-to-text": "^4.0.0",
     "isomorphic-fetch": "^2.2.1",
     "mongodb": "^2.2.33",
+    "nodejs-text-summarizer": "GotPPay/nodejs-text-summarizer",
     "nodemailer": "^4.4.1",
-    "request": "^2.83.0"
+    "request": "^2.83.0",
-  },
+    "rss-parser": "^3.1.1"
-  "author": "Matt Kruse <github@mattkruse.com> (http://mattkruse.com/)",
+  }
-  "license": "MIT"
 }

backend/views/test.ejs

@@ -1,10 +0,0 @@
-<div style="white-space:pre;border:1px solid black;margin:5px;padding:5px;font-family:monospace;">
-Schema:
-
-<%=schema%>
-
-Utterances:
-
-<%=utterances%>
-
-</div>

web/package.json

@@ -4,12 +4,15 @@
   "private": true,
   "dependencies": {
     "keymaster": "^1.6.2",
+    "node-sass-chokidar": "0.0.3",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-md": "^1.2.8",
     "react-popup": "^0.9.1",
     "react-scripts": "1.0.17",
-    "webfontloader": "^1.6.28"
+    "webfontloader": "^1.6.28",
+    "node-sass": "^4.7.2",
+    "npm-run-all": "^4.1.2"
   },
   "scripts": {
     "build-css": "node-sass-chokidar --include-path ./node_modules src/ -o src/",
@@ -17,14 +20,19 @@
     "watch-css": "nodemon -e scss -x \"npm run watch-css-mine\"",
     "start-js": "react-scripts start",
     "start": "npm-run-all -p watch-css start-js",
-    "react-build" : "react-scripts build",
+    "react-build": "react-scripts build",
     "build": "npm-run-all -p build-css react-build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
   "devDependencies": {
-    "node-sass": "^4.7.2",
+    "babel-jest": "^22.4.3",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.3",
+    "jest": "^20.0.3",
+    "jest-enzyme": "^6.0.0",
     "nodemon": "^1.12.1",
-    "npm-run-all": "^4.1.2"
+    "react-test-renderer": "^16.3.0"
   }
 }

web/src/App.js

@@ -17,6 +17,7 @@ import {
   INTENT_NAME_MIN_LENGTH,
   QUESTION_MIN_LENGTH,
   ANSWER_MIN_LENGTH,
+  ANSWER_TYPE,
 } from './config/constants';
 
 class App extends Component {
@@ -24,7 +25,7 @@ class App extends Component {
     super (props);
 
     this.state = {
-      _id: '5a232fb86ce046c749739455',
+      _id: '5abd461329f85e4ec728d945',
       skillID: '',
       skillName: '',
       invocationName: 'Saburly',
@@ -35,6 +36,8 @@ class App extends Component {
         intentExplanation: '',
         questions: [''],
         answer: '',
+        answerType: ANSWER_TYPE.PREDEFINED,
+        externalAnswerSource: '',
       },
       selectedIndex: NEW_INTENT_SELECTED_INDEX,
       contactEmail: '',
@@ -149,8 +152,7 @@ class App extends Component {
   }
 
   handleSaveLaunchRequestClick (name, answer) {
-
+    if (name.length < INVOCATION_NAME_MIN_LENGTH) {
-    if (name.length < INVOCATION_NAME_MIN_LENGTH){
       Popup.alert ('Invocation name should be at least 2 characters long');
       return;
     }
@@ -173,7 +175,7 @@ class App extends Component {
   }
 
   handleSaveEmailClick (email) {
-    if (isEmailValid(email)){
+    if (isEmailValid (email)) {
       this.setState ({waiting: true});
       this.sendSkill (
         this.state.allIntents,
@@ -185,7 +187,7 @@ class App extends Component {
         email,
         false
       );
-    }else{
+    } else {
       Popup.alert ('Please enter valid email');
     }
   }
@@ -230,51 +232,52 @@ class App extends Component {
   }
 
   handleSaveIntentClick (selectedIntent) {
-
+    if (selectedIntent.intentName.length < INTENT_NAME_MIN_LENGTH) {
-    if (selectedIntent.intentName.length < INTENT_NAME_MIN_LENGTH){
       Popup.alert ('Question name should have at least 2 characters');
       return;
     }
 
-    if (selectedIntent.answer.length < ANSWER_MIN_LENGTH){
+    if (
-      Popup.alert('Answer should have at least 2 characters');
+      selectedIntent.answerType === ANSWER_TYPE.PREDEFINED &&
+      selectedIntent.answer.length < ANSWER_MIN_LENGTH
+    ) {
+      Popup.alert ('Answer should have at least 2 characters');
       return;
     }
 
-    for(let i=0;i<selectedIntent.questions.length;i++){
+    for (let i = 0; i < selectedIntent.questions.length; i++) {
-      if (selectedIntent.questions[i].length < QUESTION_MIN_LENGTH){
+      if (selectedIntent.questions[i].length < QUESTION_MIN_LENGTH) {
-        Popup.alert('Question variant should have at least 2 characters');
+        Popup.alert ('Question variant should have at least 2 characters');
         return;
       }
     }
 
     //Check for same question variants and same question name in other intents
+    //all intents with the same intentName, or some of the questions are the same
+    //will be kept in filteredIntents. After filterring, there should be only one 
+    //intent left, the selected one
     
-    for (let i=0;i<this.state.allIntents.length;i++){
+    let selectedIntentQuestionsForSearch = selectedIntent.questions.map(question=>
-      if (i!==this.state.selectedIndex){
+      question.toLowerCase().trim());
-        if (selectedIntent.intentName === this.state.allIntents[i].intentName){
-          Popup.alert('Question name already exists');
-          return;
-        }
 
-        for(let j=0;j<selectedIntent.questions.length;j++){
+    let filteredIntents = this.state.allIntents.filter(intent=>{
-          for (let k=0;k<this.state.allIntents[i].questions.length;k++){
+      let result = (selectedIntent.intentName.toLowerCase().trim() === intent.intentName.toLowerCase().trim());
-            if (selectedIntent.questions[j] === this.state.allIntents[i].questions[k]){
+      let filteredQuestions = intent.questions.filter(question=>{
-              Popup.alert('Question variant already exists (in question :' + this.state.allIntents[i].intentName + ')');
+        return (selectedIntentQuestionsForSearch.indexOf(question.toLowerCase().trim())!==-1);
-              return;
+      });
-            }
+      return (result || filteredQuestions.length > 0);
-          }
+    });
-        }
+
-      }
+    if (filteredIntents.length > 1){
+      Popup.alert('Question name or question variant already exists');
+      return;
     }
 
-
-
     let newAllIntentsJSON = JSON.stringify (this.state.allIntents);
     let newAllIntents = JSON.parse (newAllIntentsJSON);
 
     let resolveState = null;
-    let rejectState = {waiting:false}
+    let rejectState = {waiting: false};
 
     if (this.state.selectedIndex === NEW_INTENT_SELECTED_INDEX) {
       //new intent
@@ -290,7 +293,7 @@ class App extends Component {
       resolveState = {
         allIntents: newAllIntents,
         selectedIntent: selectedIntent,
-        waiting:false,
+        waiting: false,
       };
     }
     this.setState ({waiting: true});
@@ -311,7 +314,14 @@ class App extends Component {
       allIntents: this.state.allIntents,
       selectedIndex: NEW_INTENT_SELECTED_INDEX,
       launchRequest: false,
-      selectedIntent: {intentName: '', questions: [''], answer: '', intentExplanation:''},
+      selectedIntent: {
+        intentName: '',
+        questions: [''],
+        answer: '',
+        intentExplanation: '',
+        answerType: ANSWER_TYPE.PREDEFINED,
+        externalAnswerSource: '',
+      },
     });
   }
 

web/src/App.test.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-});

web/src/components/AnswerSource.js

@@ -0,0 +1,60 @@
+import React, {Component} from 'react';
+import {Button} from 'react-md';
+import AnswerSourceForm from './helper/AnswerSourceForm';
+import '../css/components/IntentDetails.css';
+
+class AnswerSource extends Component {
+  constructor (props) {
+    super (props);
+
+    this.state = {
+      isModalOpen: false,
+      answerType: this.props.answerType
+    };
+  }
+
+  onOpen () {
+    this.setState ({
+      isModalOpen: true,
+      answerType: this.props.answerType
+    });
+  }
+
+  onClose () {
+    this.setState ({
+      isModalOpen: false,
+    });
+  }
+
+  onSave(){
+    this.onClose();
+    this.props.onSaveAnswerType(this.state.answerType);
+  }
+
+  onSourceChange(value, event){
+    this.setState({answerType:parseInt(value,10)});
+  }
+
+  render () {
+    let modal;
+    if (this.state.isModalOpen) {
+      modal = <AnswerSourceForm 
+                isModalOpen={this.state.isModalOpen}
+                answerType={this.state.answerType}
+                onSave={this.onSave.bind(this)}
+                onClose={this.onClose.bind(this)}
+                onSourceChange={this.onSourceChange.bind(this)}
+              />
+    }
+    return (
+      <div>
+        <Button flat primary onClick={this.onOpen.bind (this)}>
+          Answer type
+        </Button>
+        {modal}
+      </div>
+    );
+  }
+}
+
+export default AnswerSource;

web/src/components/Contact.js

@@ -40,8 +40,10 @@ class Contact extends Component {
   }
 
   handleEmailEdit(e){
-    if (e.length === EMAIL_MAX_LENGTH) return;
+    const isEmailValid = e.length < EMAIL_MAX_LENGTH;
-    this.setState({contactEmail: e});
+    if (isEmailValid){
+      this.setState({contactEmail: e});
+    }
   }
 }
 

web/src/components/IntentDetails.js

@@ -1,41 +1,54 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import {Button, SVGIcon, TextField} from 'react-md';
+import AnswerSource from './AnswerSource.js';
 import '../css/components/IntentDetails.css';
 import '../css/Common.css';
-import {QUESTION_MAX_LENGTH, ANSWER_MAX_LENGTH, INTENT_NAME_MAX_LENGTH, INTENT_EXPLANATION_MAX_LENGTH} from '../config/constants';
+import {
+  QUESTION_MAX_LENGTH,
+  ANSWER_MAX_LENGTH,
+  INTENT_NAME_MAX_LENGTH,
+  INTENT_EXPLANATION_MAX_LENGTH,
+  ANSWER_TYPE,
+} from '../config/constants';
+import AnswerTextBox from './helper/AnswerTextBox.js';
 
 class IntentDetails extends Component {
-  constructor(props){
+  constructor (props) {
-    super(props);
+    super (props);
 
-    this.state= {intent: props.selectedIntent};
+    this.state = {intent: props.selectedIntent};
 
-    this.addQuestion = this.addQuestion.bind(this);
+    this.addQuestion = this.addQuestion.bind (this);
-    this.deleteQuestion = this.deleteQuestion.bind(this);
+    this.deleteQuestion = this.deleteQuestion.bind (this);
-    this.handleQuestionEdit = this.handleQuestionEdit.bind(this);
+    this.handleQuestionEdit = this.handleQuestionEdit.bind (this);
-    this.handleAnswerEdit = this.handleAnswerEdit.bind(this);
+    this.handleIntentNameEdit = this.handleIntentNameEdit.bind (this);
-    this.handleIntentNameEdit = this.handleIntentNameEdit.bind(this);
+    this.handleIntentExplanationEdit = this.handleIntentExplanationEdit.bind (
-    this.handleIntentExplanationEdit = this.handleIntentExplanationEdit.bind(this);
+      this
+    );
   }
 
-  componentWillReceiveProps(props){
+  componentWillReceiveProps (props) {
-    this.setState({intent: props.selectedIntent});
+    this.setState ({intent: props.selectedIntent});
   }
 
-  render() {
+  render () {
     return (
       <div className="RightPanelBox">
         <div className="QuestionBox">
-        <h5 className="PanelSubTitle"> In introduction, Alexa will help users to ask her the right questions about your business. For Example, she will say : "To ask us about our services, say : What do you do ? ". What do you do ? is defined in question field. Alexa will use first variation of question in intro.</h5>
+          <h5 className="PanelSubTitle">
-        <TextField
+            {' '}
+            In introduction, Alexa will help users to ask her the right questions about your business. For Example, she will say : "To ask us about our services, say : What do you do ? ". What do you do ? is defined in question field. Alexa will use first variation of question in intro.
+          </h5>
+          <TextField
             id="intent explanation"
             lineDirection="center"
             placeholder="To ask us about our services, say "
             className="md-cell md-cell--bottom IntentDetailsInputBoxes"
             onChange={this.handleIntentExplanationEdit}
             maxLength={INTENT_EXPLANATION_MAX_LENGTH}
-            value={this.state.intent.intentExplanation} />
+            value={this.state.intent.intentExplanation}
-          <br/>
+          />
+          <br />
           <TextField
             id="intent name"
             lineDirection="center"
@@ -43,91 +56,153 @@ class IntentDetails extends Component {
             className="md-cell md-cell--bottom IntentDetailsInputBoxes"
             onChange={this.handleIntentNameEdit}
             maxLength={INTENT_NAME_MAX_LENGTH}
-            value={this.state.intent.intentName} />
+            value={this.state.intent.intentName}
+          />
         </div>
         <h5 className="QuestionTitle">Question variants</h5>
-        {
+        {this.state.intent.questions.map ((question, index) => {
-          this.state.intent.questions.map((question, index)=>{
+          return (
-            return (
+            <div key={index} className="QuestionBox">
-              <div key={index} className="QuestionBox">
+              <TextField
-                <TextField
+                id="intent question"
-                  id="intent question"
+                lineDirection="center"
-                  lineDirection="center"
+                placeholder="Question"
-                  placeholder="Question"
+                className="md-cell md-cell--bottom IntentDetailsInputBoxes"
-                  className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+                maxLength={QUESTION_MAX_LENGTH}
-                  maxLength={QUESTION_MAX_LENGTH}
+                rightIcon={
-                  rightIcon={<SVGIcon onClick={()=>{this.deleteQuestion(question)}}> <path fill="#000000" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/> </SVGIcon>}
+                  <SVGIcon
-                  onChange={(e)=>{this.handleQuestionEdit(e,index)}}
+                    onClick={() => {
-                  value={question}/>
+                      this.deleteQuestion (index);
-              </div>
+                    }}
-            );
+                  >
-          })
+                    {' '}
-        }
+                    <path
-        <br></br>
+                      fill="#000000"
-        {
+                      d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
-          <div className="QuestionBox">
+                    />
-            <TextField
+                    {' '}
-              id="intent answer"
+                  </SVGIcon>
-              lineDirection="center"
+                }
-              label="Answer"
+                onChange={e => {
-              placeholder="Answer"
+                  this.handleQuestionEdit (e, index);
-              maxLength={ANSWER_MAX_LENGTH}
+                }}
-              className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+                value={question}
-              onChange={this.handleAnswerEdit}
+              />
-              value={this.state.intent.answer}/>
+            </div>
-          </div>
+          );
-        }
+        })}
-        <br></br>
+        <Button
-        <br></br>
+          className="AddQuestionVariantButton"
-        <Button className="IntentDetailsButton" flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}} disabled={this.props.waiting}>Delete question</Button>
+          icon
-        <Button className="IntentDetailsButton" flat primary swapTheming onClick={this.addQuestion} disabled={this.props.waiting}>Add variant</Button>        
+          primary
-        <Button className="IntentDetailsButton" flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}} disabled={this.props.waiting}>Save</Button>
+          onClick={this.addQuestion}
+          disabled={this.props.waiting}
+        >
+          add
+        </Button>
+        <AnswerSource
+          className="AnswerTypeButton"
+          onSaveAnswerType={this.handleExternalSourceSave.bind(this)}
+          answerType={this.state.intent.answerType}
+        />
+        <AnswerTextBox
+          answerType={this.state.intent.answerType}
+          externalAnswerSource={this.state.intent.externalAnswerSource}
+          handleAnswerSourceEdit={this.handleAnswerSourceEdit.bind(this)}
+          handleAnswerEdit={this.handleAnswerEdit.bind(this)}
+          answer={this.state.intent.answer}
+        />
+        <Button
+          className="IntentDetailsButton-firstInRow"
+          flat
+          primary
+          swapTheming
+          onClick={() => {
+            this.props.onSaveIntentClick (this.state.intent);
+          }}
+          disabled={this.props.waiting}
+        >
+          Save
+        </Button>
+        <Button
+          className="IntentDetailsButton"
+          flat
+          primary
+          onClick={() => {
+            this.props.onDeleteIntentClick (this.state.intent);
+          }}
+          disabled={this.props.waiting}
+        >
+          Delete
+        </Button>
 
       </div>
     );
   }
 
-  addQuestion(){
+  addQuestion () {
     let newIntent = this.state.intent;
-    newIntent.questions.push('');
+    newIntent.questions.push ('');
-    this.setState({intent: newIntent});
+    this.setState ({intent: newIntent});
   }
 
-  deleteQuestion(question){
+  deleteQuestion (index) {
-    let newIntent = this.state.intent;
+    if (this.state.intent.questions.length > 1) {
-    let removeId = newIntent.questions.indexOf(question);
+      let newIntent = this.state.intent;
-    if (removeId !== -1)
+      if (index >= 0 && index < newIntent.questions.length) newIntent.questions.splice (index, 1);
-      newIntent.questions.splice(removeId,1);
+      this.setState ({intent: newIntent});
-    
+    }
-    this.setState({intent: newIntent});
   }
 
-  handleQuestionEdit(e,index){
+  handleQuestionEdit (e, index) {
-    if (e.length === QUESTION_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
+    const isQuestionValid = e.length < QUESTION_MAX_LENGTH && /^[a-z,.' ]*$/i.test (e);
-    let newIntent = this.state.intent;
+    if (isQuestionValid){
-    newIntent.questions[index] = e;
+      let newIntent = this.state.intent;
-    this.setState({intent: newIntent});
+      newIntent.questions[index] = e;
+      this.setState ({intent: newIntent});
+    }
   }
 
-  handleIntentExplanationEdit(e,index){
+  handleIntentExplanationEdit (e, index) {
-    if (e.length === INTENT_EXPLANATION_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
+    const isExplanationValid = e.length < INTENT_EXPLANATION_MAX_LENGTH && /^[a-z,.' ]*$/i.test (e);
-    let newIntent = this.state.intent;
+    if (isExplanationValid){
-    newIntent.intentExplanation = e;
+      let newIntent = this.state.intent;
-    this.setState({intent: newIntent});
+      newIntent.intentExplanation = e;
+      this.setState ({intent: newIntent});
+    }
   }
 
-  handleAnswerEdit(e){
+  handleAnswerEdit (e) {
-    if (e.length === ANSWER_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
+    const isAnswerValid = e.length < ANSWER_MAX_LENGTH && /^[a-z,.' ]*$/i.test (e);
-    let newIntent = this.state.intent;
+    if (isAnswerValid){
-    newIntent.answer = e;
+      let newIntent = this.state.intent;
-    this.setState({intent: newIntent});
+      newIntent.answer = e;
+      this.setState ({intent: newIntent});
+    }
   }
 
-  handleIntentNameEdit(e){
+  handleAnswerSourceEdit (e) {
-    if (e.length === INTENT_NAME_MAX_LENGTH || !(/^[a-z]*$/i.test(e))) return;
+    const isAnswerSourceValid = e.length < ANSWER_MAX_LENGTH; 
+    if (isAnswerSourceValid){
+      let newIntent = this.state.intent;
+      newIntent.externalAnswerSource = e;
+      this.setState ({intent: newIntent});
+    }
+  }
+
+  handleIntentNameEdit (e) {
+    const isIntentNameValid = e.length < INTENT_NAME_MAX_LENGTH && /^[a-z]*$/i.test (e);
+    if (isIntentNameValid){
+      let newIntent = this.state.intent;
+      newIntent.intentName = e;
+      this.setState ({intent: newIntent});
+    }
+  }
+
+  handleExternalSourceSave (answerType) {
     let newIntent = this.state.intent;
-    newIntent.intentName = e;
+    newIntent.answerType = answerType;
-    this.setState({intent: newIntent});
+    this.setState ({intent: newIntent});
   }
 }
 

web/src/components/LaunchRequest.js

@@ -25,7 +25,7 @@ class LaunchRequest extends Component {
         <TextField
           id="invocation name"
           lineDirection="center"
-          placeholder="Saburly"
+          placeholder="saburly"
           label="Invocation name"
           className="md-cell md-cell--bottom InvocationInputBoxes"
           maxLength={INVOCATION_NAME_MAX_LENGTH}
@@ -52,13 +52,17 @@ class LaunchRequest extends Component {
   }
 
   handleNameEdit(e){
-    if (e.length === INVOCATION_NAME_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return; 
+    const isInvocationNameValid = e.length < INVOCATION_NAME_MAX_LENGTH && (/^[a-z,.' ]*$/.test(e));
-    this.setState({invocationName: e});
+    if (isInvocationNameValid) { 
+      this.setState({invocationName: e});
+    }
   }
 
   handleAnswerEdit(e){
-    if (e.length === INVOCATION_ANSWER_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return; 
+    const isInvocationAnswerValid = e.length < INVOCATION_ANSWER_MAX_LENGTH && (/^[a-z,.' ]*$/i.test(e));
-    this.setState({invocationAnswer: e});
+    if (isInvocationAnswerValid){
+      this.setState({invocationAnswer: e});
+    }
   }
 }
 

web/src/components/__tests__/AnswerSource.test.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import {Button} from 'react-md';
+import {shallow, mount} from 'enzyme';
+import AnswerSource from '../AnswerSource';
+import {ANSWER_TYPE} from '../../config/constants';
+
+it ('renders without crashing', () => {
+  shallow (<AnswerSource />);
+});
+
+describe ('functional tests', () => {
+  let wrapper;
+  beforeEach (() => {
+    const onSaveAnswerTypeFunction = jest.fn ();
+    wrapper = mount (
+      <AnswerSource onSaveAnswerType={onSaveAnswerTypeFunction} />
+    );
+    wrapper.setState ({
+      isModalOpen: false,
+      answerType: 0,
+    });
+  });
+
+  it ('snapshot', ()=>{
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it ('renders only a button', () => {
+    expect (wrapper.first ().text ()).toEqual ('Answer type');
+    expect (wrapper.find ('AnswerSourceForm').exists ()).toEqual (false);
+  });
+
+  it ('answer type button click opens modal form', () => {
+    expect (wrapper.find ('AnswerSourceFormA').exists ()).toEqual (false);
+    expect (wrapper.state ().isModalOpen).toEqual (false);
+    const AnswerTypeButton = wrapper.find ('button').first ();
+    AnswerTypeButton.simulate ('click');
+    expect (wrapper.state ().isModalOpen).toEqual (true);
+    expect (wrapper.find ('AnswerSourceForm').exists ()).toEqual (true);
+    expect (wrapper.find ('button').length).toBe (3);
+    expect (wrapper.find ('button').first ().text ()).toEqual ('Answer type');
+  });
+
+  it ('save button changes answerType value in state and closes the form ', () => {
+    const AnswerTypeButton = wrapper.find ('button').first ();
+    AnswerTypeButton.simulate ('click');
+    const saveButton = wrapper.find ('button').at (2);
+    const optionControl = wrapper.find ('SelectionControlGroup');
+    expect (saveButton.text ()).toEqual ('Save');
+    expect (optionControl.exists ()).toEqual (true);
+    optionControl.simulate ('change', {
+      target: {value: String (ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS)},
+    });
+    saveButton.simulate ('click');
+    expect (wrapper.state ().answerType).toBe (
+      ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS
+    );
+    expect (wrapper.state ().isModalOpen).toEqual (false);
+    expect (wrapper.find ('button').length).toBe (1);
+  });
+});

web/src/components/__tests__/IntentDetails.test.js

@@ -0,0 +1,318 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+import IntentDetails from '../IntentDetails';
+import {
+  QUESTION_MAX_LENGTH,
+  ANSWER_MAX_LENGTH,
+  INTENT_NAME_MAX_LENGTH,
+  INTENT_EXPLANATION_MAX_LENGTH,
+  ANSWER_TYPE,
+} from '../../config/constants';
+
+it ('renders without crashing', () => {
+  const dummyIntent = {
+    questions: ['q1', 'q2'],
+  };
+  shallow (<IntentDetails selectedIntent={dummyIntent} />);
+});
+
+describe('complete testing', () => {
+
+  let wrapper;
+  let newIntent;
+  beforeEach(()=>{
+    newIntent = {
+      intentName: '',
+      intentExplanation: '',
+      questions: [''],
+      answer: '',
+      answerType: ANSWER_TYPE.PREDEFINED,
+      externalAnswerSource: '',
+    };
+  
+    wrapper = mount(<IntentDetails selectedIntent={newIntent} />);
+    expect(wrapper.state('intent')).toEqual(newIntent);
+  });
+
+  it ('snapshot', () =>{
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it ('renders correctly for new intent input when empty intent is sent', () => {
+    expect(wrapper.find('TextField').length).toBe(4);
+    expect(wrapper.find('Button').length).toBe(4);
+  
+    expect(wrapper.find('TextField').at(0).props().id).toEqual('intent explanation');
+    expect(wrapper.find('TextField').at(1).props().id).toEqual('intent name');
+    expect(wrapper.find('TextField').at(2).props().id).toEqual('intent question');
+    expect(wrapper.find('TextField').at(3).props().id).toEqual('intent answer');
+  
+    expect(wrapper.find('Button').at(0).props().children).toEqual('add');
+    expect(wrapper.find('Button').at(1).props().children).toEqual('Answer type');
+    expect(wrapper.find('Button').at(2).props().children).toEqual('Save');
+    expect(wrapper.find('Button').at(3).props().children).toEqual('Delete');
+  });
+
+  it ('receives correct props for non empty intent with predefined answer', () => {
+    newIntent = {
+      intentName: 'Dummy intent',
+      intentExplanation: 'Dummy explanation',
+      questions: ['Dummy question'],
+      answer: 'dummy answer',
+      answerType: ANSWER_TYPE.PREDEFINED,
+      externalAnswerSource: '',
+    };
+  
+    wrapper = mount(<IntentDetails selectedIntent={newIntent} />);
+    expect(wrapper.state('intent')).toEqual(newIntent);
+  });
+
+  it ('receives correct props for non empty intent with external source for answer', () => {
+    newIntent = {
+      intentName: 'Dummy intent',
+      intentExplanation: 'Dummy explanation',
+      questions: ['Dummy question'],
+      answer: '',
+      answerType: ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS,
+      externalAnswerSource: 'http://sarajevotimes.com',
+    };
+  
+    wrapper = mount(<IntentDetails selectedIntent={newIntent} />);
+    expect(wrapper.state('intent')).toEqual(newIntent);
+  });
+
+  it ('adds text field when add button is clicked', () => {
+    const addButton = wrapper.find('button').at(0);
+    addButton.simulate('click');
+    expect(wrapper.find('TextField').length).toBe(5);
+    addButton.simulate('click');
+    expect(wrapper.find('TextField').length).toBe(6);
+    
+    expect(wrapper.find('TextField').at(0).props().id).toEqual('intent explanation');
+    expect(wrapper.find('TextField').at(1).props().id).toEqual('intent name');
+    expect(wrapper.find('TextField').at(2).props().id).toEqual('intent question');
+    expect(wrapper.find('TextField').at(3).props().id).toEqual('intent question');
+    expect(wrapper.find('TextField').at(4).props().id).toEqual('intent question');
+    expect(wrapper.find('TextField').at(5).props().id).toEqual('intent answer');
+
+    expect(wrapper.state('intent').questions.length).toBe(3);
+    
+  });
+
+  it ('removes correct text field when delete button on text field is clicked', () => {
+    const addButton = wrapper.find('button').at(0);
+    addButton.simulate('click');
+    addButton.simulate('click');
+    
+    let firstQuestionTextField = wrapper.find('TextField').at(2);
+    let secondQuestionTextField = wrapper.find('TextField').at(3);
+    let thirdQuestionTextField = wrapper.find('TextField').at(4);
+
+    firstQuestionTextField.instance().props.onChange('first question');
+    secondQuestionTextField.instance().props.onChange('second question');
+    thirdQuestionTextField.instance().props.onChange('third question');
+    
+    expect(firstQuestionTextField.instance().value).toEqual('first question');
+    expect(secondQuestionTextField.instance().value).toEqual('second question');
+    expect(thirdQuestionTextField.instance().value).toEqual('third question');
+    expect(wrapper.state('intent').questions.length).toBe(3);
+
+    const rightIcon = secondQuestionTextField.props().rightIcon;
+    rightIcon.props.onClick(secondQuestionTextField.props().key);
+    
+    expect(wrapper.state('intent').questions.length).toBe(2);
+    expect(secondQuestionTextField.instance().value).toEqual('third question');
+    expect(thirdQuestionTextField.instance()._field._field).toBeNull();
+  });
+
+  it ('does not remove text field when it is only one left', () => {
+    let firstQuestionTextField = wrapper.find('TextField').at(2);
+
+    firstQuestionTextField.instance().props.onChange('first question');
+    
+    expect(firstQuestionTextField.props().id).toEqual('intent question');
+    expect(wrapper.state('intent').questions.length).toBe(1);
+    
+    const rightIcon = firstQuestionTextField.props().rightIcon;
+    rightIcon.props.onClick(firstQuestionTextField.props().key);
+
+    expect(wrapper.state('intent').questions.length).toBe(1);
+    expect(firstQuestionTextField.instance().value).toEqual('first question');
+  });
+
+  it ('accepts text without special characters for intent explanation', () => {
+    let explanationTextField = wrapper.find('TextField').at(0);
+    let validExplanationText = 'to get latest news, say ';
+    explanationTextField.instance().props.onChange(validExplanationText);
+    expect(wrapper.state('intent').intentExplanation).toEqual(validExplanationText);
+    expect(explanationTextField.instance().value).toEqual(validExplanationText);
+  });
+
+  it ('does not accept text with special characters for intent explanation', () => {
+    let explanationTextField = wrapper.find('TextField').at(0);
+    let invalidExplanationText = '554to get latest news, say #$ ';
+    explanationTextField.instance().props.onChange(invalidExplanationText);
+    expect(wrapper.state('intent').intentExplanation).toEqual('');
+    expect(explanationTextField.instance().value).toEqual('');
+  });
+
+  it ('does not accept too long text for intent explanation', () => {
+    let explanationTextField = wrapper.find('TextField').at(0);
+    let invalidExplanationText = new Array(INTENT_EXPLANATION_MAX_LENGTH + 10).join('A');
+    explanationTextField.instance().props.onChange(invalidExplanationText);
+    expect(wrapper.state('intent').intentExplanation).toEqual('');
+    expect(explanationTextField.instance().value).toEqual('');
+  });
+
+  it ('accepts text without special characters for intent name', () => {
+    let intentNameTextField = wrapper.find('TextField').at(1);
+    let validIntentNameText = 'intentName';
+    intentNameTextField.instance().props.onChange(validIntentNameText);
+    expect(wrapper.state('intent').intentName).toEqual(validIntentNameText);
+    expect(intentNameTextField.instance().value).toEqual(validIntentNameText);
+  });
+
+  it ('does not accept text with speces characters for intent name', () => {
+    let intentNameTextField = wrapper.find('TextField').at(1);
+    let invalidIntentNameText = 'intentName with space';
+    intentNameTextField.instance().props.onChange(invalidIntentNameText);
+    expect(wrapper.state('intent').intentName).toEqual('');
+    expect(intentNameTextField.instance().value).toEqual('');
+  });
+
+  it ('does not accept text with special characters for intent name', () => {
+    let intentNameTextField = wrapper.find('TextField').at(1);
+    let invalidIntentNameText = 'intentName23!';
+    intentNameTextField.instance().props.onChange(invalidIntentNameText);
+    expect(wrapper.state('intent').intentName).toEqual('');
+    expect(intentNameTextField.instance().value).toEqual('');
+  });
+
+  it ('does not accept too long text for intent name', () => {
+    let intentNameTextField = wrapper.find('TextField').at(1);
+    let invalidIntentNameText = new Array(INTENT_NAME_MAX_LENGTH + 10).join('A');
+    intentNameTextField.instance().props.onChange(invalidIntentNameText);
+    expect(wrapper.state('intent').intentName).toEqual('');
+    expect(intentNameTextField.instance().value).toEqual('');
+  });
+
+  it ('accepts text without special characters for question text', () => {
+    let questionTextField = wrapper.find('TextField').at(2);
+    let validQuestionText = 'read me latest news'
+    questionTextField.instance().props.onChange(validQuestionText);
+    expect(wrapper.state('intent').questions).toEqual([validQuestionText]);
+    expect(questionTextField.instance().value).toEqual(validQuestionText);
+  });
+
+  it ('does not accept text with special characters for question text', () => {
+    let questionTextField = wrapper.find('TextField').at(2);
+    let invalidQuestionText = 'read m3 1at35t news #'
+    questionTextField.instance().props.onChange(invalidQuestionText);
+    expect(wrapper.state('intent').questions).toEqual(['']);
+    expect(questionTextField.instance().value).toEqual('');
+  });
+
+  it ('does not accept too long text for question text', () => {
+    let questionTextField = wrapper.find('TextField').at(2);
+    let invalidQuestionText = new Array(QUESTION_MAX_LENGTH + 10).join('A');
+    questionTextField.instance().props.onChange(invalidQuestionText);
+    expect(wrapper.state('intent').questions).toEqual(['']);
+    expect(questionTextField.instance().value).toEqual('');
+  });
+
+  it ('accepts text without special characters for answer text', () => {
+    let answerTextField = wrapper.find('TextField').at(3);
+    let validAnswerText = 'this is valid answer.'
+    answerTextField.instance().props.onChange(validAnswerText);
+    expect(wrapper.state('intent').answer).toEqual(validAnswerText);
+    expect(answerTextField.instance().value).toEqual(validAnswerText);
+  });
+
+  it ('does not accept text with special characters for answer text', () => {
+    let answerTextField = wrapper.find('TextField').at(3);
+    let invalidAnswerText = 'this is invalid answer.0123'
+    answerTextField.instance().props.onChange(invalidAnswerText);
+    expect(wrapper.state('intent').answer).toEqual('');
+    expect(answerTextField.instance().value).toEqual('');
+  });
+
+  it ('does not accept too long text for answer text', () => {
+    let answerTextField = wrapper.find('TextField').at(3);
+    let invalidAnswerText = new Array(ANSWER_MAX_LENGTH + 10).join('A');
+    answerTextField.instance().props.onChange(invalidAnswerText);
+    expect(wrapper.state('intent').answer).toEqual('');
+    expect(answerTextField.instance().value).toEqual('');
+  });
+
+  it ('accepts text for external source as answer', () => {
+    newIntent = {
+      intentName: '',
+      intentExplanation: '',
+      questions: [''],
+      answer: '',
+      answerType: ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS,
+      externalAnswerSource: '',
+    };
+  
+    wrapper = mount(<IntentDetails selectedIntent={newIntent} />);
+
+    let answerTextField = wrapper.find('TextField').at(3);
+    let validAnswerText = 'http://sarajevotimes.com'
+    answerTextField.instance().props.onChange(validAnswerText);
+    expect(wrapper.state('intent').externalAnswerSource).toEqual(validAnswerText);
+    expect(answerTextField.instance().value).toEqual(validAnswerText);
+  });
+
+  it ('does not accept too long text for external source as answer', () => {
+    newIntent = {
+      intentName: '',
+      intentExplanation: '',
+      questions: [''],
+      answer: '',
+      answerType: ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS,
+      externalAnswerSource: '',
+    };
+  
+    wrapper = mount(<IntentDetails selectedIntent={newIntent} />);
+    
+    let answerTextField = wrapper.find('TextField').at(3);
+    let invalidAnswerText = new Array(ANSWER_MAX_LENGTH + 10).join('A');
+    answerTextField.instance().props.onChange(invalidAnswerText);
+    expect(wrapper.state('intent').answer).toEqual('');
+    expect(answerTextField.instance().value).toEqual('');
+  });
+
+  it ('calls function with correct data on save button click', () => {
+    newIntent = {
+      intentName: 'Dummy intent',
+      intentExplanation: 'Dummy explanation',
+      questions: ['Dummy question'],
+      answer: 'Dummy answer',
+      answerType: ANSWER_TYPE.PREDEFINED,
+      externalAnswerSource: '',
+    };
+    const onSaveFunction = jest.fn();
+  
+    wrapper = mount(<IntentDetails selectedIntent={newIntent} onSaveIntentClick={onSaveFunction} />);
+    wrapper.find('Button').at(2).simulate('click');
+    expect(onSaveFunction).toBeCalledWith(newIntent);
+  });
+
+  it ('calls function with correct data on delete button click', () => {
+    newIntent = {
+      intentName: 'Dummy intent',
+      intentExplanation: 'Dummy explanation',
+      questions: ['Dummy question'],
+      answer: 'Dummy answer',
+      answerType: ANSWER_TYPE.PREDEFINED,
+      externalAnswerSource: '',
+    };
+    const onSaveFunction = jest.fn();
+  
+    wrapper = mount(<IntentDetails selectedIntent={newIntent} onDeleteIntentClick={onSaveFunction} />);
+    wrapper.find('Button').at(3).simulate('click');
+    expect(onSaveFunction).toBeCalledWith(newIntent);
+  });
+
+  
+});

web/src/components/__tests__/__snapshots__/AnswerSource.test.js.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`functional tests snapshot 1`] = `
+<AnswerSource
+  onSaveAnswerType={[Function]}
+>
+  <div>
+    <withInk(withTooltip(Button))
+      flat={true}
+      inkTransitionEnterTimeout={450}
+      inkTransitionLeaveTimeout={300}
+      inkTransitionOverlap={150}
+      onClick={[Function]}
+      primary={true}
+    >
+      <withTooltip(Button)
+        flat={true}
+        ink={
+          <InkContainer
+            className={undefined}
+            disabledInteractions={undefined}
+            inkClassName={undefined}
+            inkStyle={undefined}
+            pulse={undefined}
+            style={undefined}
+            transitionEnterTimeout={450}
+            transitionLeaveTimeout={300}
+            transitionOverlap={150}
+            waitForInkTransition={undefined}
+          />
+        }
+        onClick={[Function]}
+        primary={true}
+      >
+        <Button
+          fixedPosition="br"
+          flat={true}
+          iconBefore={true}
+          ink={
+            <InkContainer
+              className={undefined}
+              disabledInteractions={undefined}
+              inkClassName={undefined}
+              inkStyle={undefined}
+              pulse={undefined}
+              style={undefined}
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+              waitForInkTransition={undefined}
+            />
+          }
+          onClick={[Function]}
+          primary={true}
+          type="button"
+        >
+          <button
+            className="md-btn md-btn--flat md-btn--text md-pointer--hover md-text--theme-primary md-ink--primary md-inline-block"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
+            type="button"
+          >
+            <InkContainer
+              key="ink-container"
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+            >
+              <TransitionGroup
+                childFactory={[Function]}
+                className="md-ink-container"
+                component="div"
+              >
+                <div
+                  className="md-ink-container"
+                />
+              </TransitionGroup>
+            </InkContainer>
+            Answer type
+          </button>
+        </Button>
+      </withTooltip(Button)>
+    </withInk(withTooltip(Button))>
+  </div>
+</AnswerSource>
+`;

web/src/components/__tests__/__snapshots__/IntentDetails.test.js.snap

@@ -0,0 +1,898 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`complete testing snapshot 1`] = `
+<IntentDetails
+  selectedIntent={
+    Object {
+      "answer": "",
+      "answerType": 0,
+      "externalAnswerSource": "",
+      "intentExplanation": "",
+      "intentName": "",
+      "questions": Array [
+        "",
+      ],
+    }
+  }
+>
+  <div
+    className="RightPanelBox"
+  >
+    <div
+      className="QuestionBox"
+    >
+      <h5
+        className="PanelSubTitle"
+      >
+         
+        In introduction, Alexa will help users to ask her the right questions about your business. For Example, she will say : "To ask us about our services, say : What do you do ? ". What do you do ? is defined in question field. Alexa will use first variation of question in intro.
+      </h5>
+      <TextField
+        className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+        fullWidth={true}
+        id="intent explanation"
+        leftIconStateful={true}
+        lineDirection="center"
+        maxLength={70}
+        onChange={[Function]}
+        passwordIcon={
+          <FontIcon
+            iconClassName="material-icons"
+          >
+            remove_red_eye
+          </FontIcon>
+        }
+        placeholder="To ask us about our services, say "
+        rightIconStateful={true}
+        type="text"
+        value=""
+      >
+        <div
+          className="md-text-field-container md-full-width md-text-field-container--input md-cell md-cell--bottom IntentDetailsInputBoxes"
+          onClick={[Function]}
+        >
+          <FloatingLabel
+            active={false}
+            error={false}
+            floating={false}
+            htmlFor="intent explanation"
+            iconOffset={false}
+            key="label"
+          />
+          <InputField
+            className=""
+            fullWidth={true}
+            id="intent explanation"
+            inlineIndicator={false}
+            key="field"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="To ask us about our services, say "
+            type="text"
+            value=""
+          >
+            <input
+              className="md-text-field md-text-field--margin md-full-width md-text"
+              id="intent explanation"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder="To ask us about our services, say "
+              type="text"
+              value=""
+            />
+          </InputField>
+          <TextFieldDivider
+            active={false}
+            error={false}
+            key="text-divider"
+            lineDirection="center"
+          >
+            <Divider
+              className="md-divider--text-field md-divider--expand-from-center"
+            >
+              <hr
+                className="md-divider md-divider--text-field md-divider--expand-from-center"
+              />
+            </Divider>
+          </TextFieldDivider>
+          <TextFieldMessage
+            active={false}
+            currentLength={0}
+            error={false}
+            key="message"
+            leftIcon={false}
+            maxLength={70}
+            rightIcon={false}
+          >
+            <div
+              className="md-text-field-message-container md-text-field-message-container--count-only md-full-width md-text--disabled"
+            >
+              <Message
+                active={false}
+                key="message"
+              />
+              <Message
+                active={false}
+                className="md-text-field-message--counter"
+                key="counter"
+              >
+                <div
+                  aria-hidden={true}
+                  className="md-text-field-message md-text-field-message--inactive md-text-field-message--counter"
+                >
+                  0 / 70
+                </div>
+              </Message>
+            </div>
+          </TextFieldMessage>
+        </div>
+      </TextField>
+      <br />
+      <TextField
+        className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+        fullWidth={true}
+        id="intent name"
+        label="Question name"
+        leftIconStateful={true}
+        lineDirection="center"
+        maxLength={30}
+        onChange={[Function]}
+        passwordIcon={
+          <FontIcon
+            iconClassName="material-icons"
+          >
+            remove_red_eye
+          </FontIcon>
+        }
+        rightIconStateful={true}
+        type="text"
+        value=""
+      >
+        <div
+          className="md-text-field-container md-full-width md-text-field-container--input md-cell md-cell--bottom IntentDetailsInputBoxes"
+          onClick={[Function]}
+        >
+          <FloatingLabel
+            active={false}
+            error={false}
+            floating={false}
+            htmlFor="intent name"
+            iconOffset={false}
+            key="label"
+            label="Question name"
+          >
+            <label
+              className="md-floating-label md-floating-label--inactive md-floating-label--inactive-sized md-text--secondary"
+              htmlFor="intent name"
+            >
+              Question name
+            </label>
+          </FloatingLabel>
+          <InputField
+            className=""
+            fullWidth={true}
+            id="intent name"
+            inlineIndicator={false}
+            key="field"
+            label="Question name"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder={null}
+            type="text"
+            value=""
+          >
+            <input
+              className="md-text-field md-text-field--floating-margin md-full-width md-text"
+              id="intent name"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder={null}
+              type="text"
+              value=""
+            />
+          </InputField>
+          <TextFieldDivider
+            active={false}
+            error={false}
+            key="text-divider"
+            lineDirection="center"
+          >
+            <Divider
+              className="md-divider--text-field md-divider--expand-from-center"
+            >
+              <hr
+                className="md-divider md-divider--text-field md-divider--expand-from-center"
+              />
+            </Divider>
+          </TextFieldDivider>
+          <TextFieldMessage
+            active={false}
+            currentLength={0}
+            error={false}
+            key="message"
+            leftIcon={false}
+            maxLength={30}
+            rightIcon={false}
+          >
+            <div
+              className="md-text-field-message-container md-text-field-message-container--count-only md-full-width md-text--disabled"
+            >
+              <Message
+                active={false}
+                key="message"
+              />
+              <Message
+                active={false}
+                className="md-text-field-message--counter"
+                key="counter"
+              >
+                <div
+                  aria-hidden={true}
+                  className="md-text-field-message md-text-field-message--inactive md-text-field-message--counter"
+                >
+                  0 / 30
+                </div>
+              </Message>
+            </div>
+          </TextFieldMessage>
+        </div>
+      </TextField>
+    </div>
+    <h5
+      className="QuestionTitle"
+    >
+      Question variants
+    </h5>
+    <div
+      className="QuestionBox"
+      key="0"
+    >
+      <TextField
+        className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+        fullWidth={true}
+        id="intent question"
+        leftIconStateful={true}
+        lineDirection="center"
+        maxLength={150}
+        onChange={[Function]}
+        passwordIcon={
+          <FontIcon
+            iconClassName="material-icons"
+          >
+            remove_red_eye
+          </FontIcon>
+        }
+        placeholder="Question"
+        rightIcon={
+          <SVGIcon
+            focusable="false"
+            onClick={[Function]}
+            role="img"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+             
+            <path
+              d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
+              fill="#000000"
+            />
+             
+          </SVGIcon>
+        }
+        rightIconStateful={true}
+        type="text"
+        value=""
+      >
+        <div
+          className="md-text-field-container md-full-width md-text-field-container--input md-cell md-cell--bottom IntentDetailsInputBoxes"
+          onClick={[Function]}
+        >
+          <FloatingLabel
+            active={false}
+            error={false}
+            floating={false}
+            htmlFor="intent question"
+            iconOffset={false}
+            key="label"
+          />
+          <div
+            className="md-text-field-icon-container"
+            key="icon-divider"
+          >
+            <div
+              className="md-text-field-divider-container md-text-field-divider-container--grow"
+              key="divider-container"
+            >
+              <InputField
+                className=""
+                fullWidth={true}
+                id="intent question"
+                inlineIndicator={false}
+                key="field"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="Question"
+                type="text"
+                value=""
+              >
+                <input
+                  className="md-text-field md-text-field--margin md-full-width md-text"
+                  id="intent question"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  placeholder="Question"
+                  type="text"
+                  value=""
+                />
+              </InputField>
+              <TextFieldDivider
+                active={false}
+                error={false}
+                key="text-divider"
+                lineDirection="center"
+              >
+                <Divider
+                  className="md-divider--text-field md-divider--expand-from-center"
+                >
+                  <hr
+                    className="md-divider md-divider--text-field md-divider--expand-from-center"
+                  />
+                </Divider>
+              </TextFieldDivider>
+            </div>
+            <SVGIcon
+              className="md-text-field-icon md-text-field-icon--positioned"
+              error={false}
+              focusable="false"
+              key="icon-right"
+              onClick={[Function]}
+              primary={false}
+              role="img"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <svg
+                aria-labelledby={null}
+                className="md-icon md-text-field-icon md-text-field-icon--positioned"
+                focusable="false"
+                onClick={[Function]}
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                 
+                <path
+                  d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
+                  fill="#000000"
+                />
+                 
+              </svg>
+            </SVGIcon>
+          </div>
+          <TextFieldMessage
+            active={false}
+            currentLength={0}
+            error={false}
+            key="message"
+            leftIcon={false}
+            maxLength={150}
+            rightIcon={true}
+          >
+            <div
+              className="md-text-field-message-container md-text-field-message-container--count-only md-text-field-message-container--right-icon-offset md-full-width md-text--disabled"
+            >
+              <Message
+                active={false}
+                key="message"
+              />
+              <Message
+                active={false}
+                className="md-text-field-message--counter"
+                key="counter"
+              >
+                <div
+                  aria-hidden={true}
+                  className="md-text-field-message md-text-field-message--inactive md-text-field-message--counter"
+                >
+                  0 / 150
+                </div>
+              </Message>
+            </div>
+          </TextFieldMessage>
+        </div>
+      </TextField>
+    </div>
+    <withInk(withTooltip(Button))
+      className="AddQuestionVariantButton"
+      icon={true}
+      inkTransitionEnterTimeout={450}
+      inkTransitionLeaveTimeout={300}
+      inkTransitionOverlap={150}
+      onClick={[Function]}
+      primary={true}
+    >
+      <withTooltip(Button)
+        className="AddQuestionVariantButton"
+        icon={true}
+        ink={
+          <InkContainer
+            className={undefined}
+            disabledInteractions={undefined}
+            inkClassName={undefined}
+            inkStyle={undefined}
+            pulse={undefined}
+            style={undefined}
+            transitionEnterTimeout={450}
+            transitionLeaveTimeout={300}
+            transitionOverlap={150}
+            waitForInkTransition={undefined}
+          />
+        }
+        onClick={[Function]}
+        primary={true}
+      >
+        <Button
+          className="AddQuestionVariantButton"
+          fixedPosition="br"
+          icon={true}
+          iconBefore={true}
+          ink={
+            <InkContainer
+              className={undefined}
+              disabledInteractions={undefined}
+              inkClassName={undefined}
+              inkStyle={undefined}
+              pulse={undefined}
+              style={undefined}
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+              waitForInkTransition={undefined}
+            />
+          }
+          onClick={[Function]}
+          primary={true}
+          type="button"
+        >
+          <button
+            className="md-btn md-btn--icon md-pointer--hover md-text--theme-primary md-ink--primary md-inline-block AddQuestionVariantButton"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
+            type="button"
+          >
+            <InkContainer
+              key="ink-container"
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+            >
+              <TransitionGroup
+                childFactory={[Function]}
+                className="md-ink-container"
+                component="div"
+              >
+                <div
+                  className="md-ink-container"
+                />
+              </TransitionGroup>
+            </InkContainer>
+            <FontIcon
+              iconClassName="material-icons"
+              inherit={true}
+            >
+              <i
+                className="md-icon material-icons md-text--inherit"
+              >
+                add
+              </i>
+            </FontIcon>
+          </button>
+        </Button>
+      </withTooltip(Button)>
+    </withInk(withTooltip(Button))>
+    <AnswerSource
+      answerType={0}
+      className="AnswerTypeButton"
+      onSaveAnswerType={[Function]}
+    >
+      <div>
+        <withInk(withTooltip(Button))
+          flat={true}
+          inkTransitionEnterTimeout={450}
+          inkTransitionLeaveTimeout={300}
+          inkTransitionOverlap={150}
+          onClick={[Function]}
+          primary={true}
+        >
+          <withTooltip(Button)
+            flat={true}
+            ink={
+              <InkContainer
+                className={undefined}
+                disabledInteractions={undefined}
+                inkClassName={undefined}
+                inkStyle={undefined}
+                pulse={undefined}
+                style={undefined}
+                transitionEnterTimeout={450}
+                transitionLeaveTimeout={300}
+                transitionOverlap={150}
+                waitForInkTransition={undefined}
+              />
+            }
+            onClick={[Function]}
+            primary={true}
+          >
+            <Button
+              fixedPosition="br"
+              flat={true}
+              iconBefore={true}
+              ink={
+                <InkContainer
+                  className={undefined}
+                  disabledInteractions={undefined}
+                  inkClassName={undefined}
+                  inkStyle={undefined}
+                  pulse={undefined}
+                  style={undefined}
+                  transitionEnterTimeout={450}
+                  transitionLeaveTimeout={300}
+                  transitionOverlap={150}
+                  waitForInkTransition={undefined}
+                />
+              }
+              onClick={[Function]}
+              primary={true}
+              type="button"
+            >
+              <button
+                className="md-btn md-btn--flat md-btn--text md-pointer--hover md-text--theme-primary md-ink--primary md-inline-block"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                onMouseUp={[Function]}
+                onTouchEnd={[Function]}
+                onTouchStart={[Function]}
+                type="button"
+              >
+                <InkContainer
+                  key="ink-container"
+                  transitionEnterTimeout={450}
+                  transitionLeaveTimeout={300}
+                  transitionOverlap={150}
+                >
+                  <TransitionGroup
+                    childFactory={[Function]}
+                    className="md-ink-container"
+                    component="div"
+                  >
+                    <div
+                      className="md-ink-container"
+                    />
+                  </TransitionGroup>
+                </InkContainer>
+                Answer type
+              </button>
+            </Button>
+          </withTooltip(Button)>
+        </withInk(withTooltip(Button))>
+      </div>
+    </AnswerSource>
+    <AnswerTextBox
+      answer=""
+      answerType={0}
+      externalAnswerSource=""
+      handleAnswerEdit={[Function]}
+      handleAnswerSourceEdit={[Function]}
+    >
+      <div
+        className="QuestionBox"
+      >
+        <TextField
+          className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+          fullWidth={true}
+          id="intent answer"
+          label="Answer"
+          leftIconStateful={true}
+          lineDirection="center"
+          maxLength={150}
+          onChange={[Function]}
+          passwordIcon={
+            <FontIcon
+              iconClassName="material-icons"
+            >
+              remove_red_eye
+            </FontIcon>
+          }
+          placeholder="Answer"
+          rightIconStateful={true}
+          type="text"
+          value=""
+        >
+          <div
+            className="md-text-field-container md-full-width md-text-field-container--input md-cell md-cell--bottom IntentDetailsInputBoxes"
+            onClick={[Function]}
+          >
+            <FloatingLabel
+              active={false}
+              error={false}
+              floating={false}
+              htmlFor="intent answer"
+              iconOffset={false}
+              key="label"
+              label="Answer"
+            >
+              <label
+                className="md-floating-label md-floating-label--inactive md-floating-label--inactive-sized md-text--secondary"
+                htmlFor="intent answer"
+              >
+                Answer
+              </label>
+            </FloatingLabel>
+            <InputField
+              className=""
+              fullWidth={true}
+              id="intent answer"
+              inlineIndicator={false}
+              key="field"
+              label="Answer"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder={null}
+              type="text"
+              value=""
+            >
+              <input
+                className="md-text-field md-text-field--floating-margin md-full-width md-text"
+                id="intent answer"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder={null}
+                type="text"
+                value=""
+              />
+            </InputField>
+            <TextFieldDivider
+              active={false}
+              error={false}
+              key="text-divider"
+              lineDirection="center"
+            >
+              <Divider
+                className="md-divider--text-field md-divider--expand-from-center"
+              >
+                <hr
+                  className="md-divider md-divider--text-field md-divider--expand-from-center"
+                />
+              </Divider>
+            </TextFieldDivider>
+            <TextFieldMessage
+              active={false}
+              currentLength={0}
+              error={false}
+              key="message"
+              leftIcon={false}
+              maxLength={150}
+              rightIcon={false}
+            >
+              <div
+                className="md-text-field-message-container md-text-field-message-container--count-only md-full-width md-text--disabled"
+              >
+                <Message
+                  active={false}
+                  key="message"
+                />
+                <Message
+                  active={false}
+                  className="md-text-field-message--counter"
+                  key="counter"
+                >
+                  <div
+                    aria-hidden={true}
+                    className="md-text-field-message md-text-field-message--inactive md-text-field-message--counter"
+                  >
+                    0 / 150
+                  </div>
+                </Message>
+              </div>
+            </TextFieldMessage>
+          </div>
+        </TextField>
+      </div>
+    </AnswerTextBox>
+    <withInk(withTooltip(Button))
+      className="IntentDetailsButton-firstInRow"
+      flat={true}
+      inkTransitionEnterTimeout={450}
+      inkTransitionLeaveTimeout={300}
+      inkTransitionOverlap={150}
+      onClick={[Function]}
+      primary={true}
+      swapTheming={true}
+    >
+      <withTooltip(Button)
+        className="IntentDetailsButton-firstInRow"
+        flat={true}
+        ink={
+          <InkContainer
+            className={undefined}
+            disabledInteractions={undefined}
+            inkClassName={undefined}
+            inkStyle={undefined}
+            pulse={undefined}
+            style={undefined}
+            transitionEnterTimeout={450}
+            transitionLeaveTimeout={300}
+            transitionOverlap={150}
+            waitForInkTransition={undefined}
+          />
+        }
+        onClick={[Function]}
+        primary={true}
+        swapTheming={true}
+      >
+        <Button
+          className="IntentDetailsButton-firstInRow"
+          fixedPosition="br"
+          flat={true}
+          iconBefore={true}
+          ink={
+            <InkContainer
+              className={undefined}
+              disabledInteractions={undefined}
+              inkClassName={undefined}
+              inkStyle={undefined}
+              pulse={undefined}
+              style={undefined}
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+              waitForInkTransition={undefined}
+            />
+          }
+          onClick={[Function]}
+          primary={true}
+          swapTheming={true}
+          type="button"
+        >
+          <button
+            className="md-btn md-btn--flat md-btn--text md-pointer--hover md-background--primary md-background--primary-hover md-inline-block IntentDetailsButton-firstInRow"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
+            type="button"
+          >
+            <InkContainer
+              key="ink-container"
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+            >
+              <TransitionGroup
+                childFactory={[Function]}
+                className="md-ink-container"
+                component="div"
+              >
+                <div
+                  className="md-ink-container"
+                />
+              </TransitionGroup>
+            </InkContainer>
+            Save
+          </button>
+        </Button>
+      </withTooltip(Button)>
+    </withInk(withTooltip(Button))>
+    <withInk(withTooltip(Button))
+      className="IntentDetailsButton"
+      flat={true}
+      inkTransitionEnterTimeout={450}
+      inkTransitionLeaveTimeout={300}
+      inkTransitionOverlap={150}
+      onClick={[Function]}
+      primary={true}
+    >
+      <withTooltip(Button)
+        className="IntentDetailsButton"
+        flat={true}
+        ink={
+          <InkContainer
+            className={undefined}
+            disabledInteractions={undefined}
+            inkClassName={undefined}
+            inkStyle={undefined}
+            pulse={undefined}
+            style={undefined}
+            transitionEnterTimeout={450}
+            transitionLeaveTimeout={300}
+            transitionOverlap={150}
+            waitForInkTransition={undefined}
+          />
+        }
+        onClick={[Function]}
+        primary={true}
+      >
+        <Button
+          className="IntentDetailsButton"
+          fixedPosition="br"
+          flat={true}
+          iconBefore={true}
+          ink={
+            <InkContainer
+              className={undefined}
+              disabledInteractions={undefined}
+              inkClassName={undefined}
+              inkStyle={undefined}
+              pulse={undefined}
+              style={undefined}
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+              waitForInkTransition={undefined}
+            />
+          }
+          onClick={[Function]}
+          primary={true}
+          type="button"
+        >
+          <button
+            className="md-btn md-btn--flat md-btn--text md-pointer--hover md-text--theme-primary md-ink--primary md-inline-block IntentDetailsButton"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
+            type="button"
+          >
+            <InkContainer
+              key="ink-container"
+              transitionEnterTimeout={450}
+              transitionLeaveTimeout={300}
+              transitionOverlap={150}
+            >
+              <TransitionGroup
+                childFactory={[Function]}
+                className="md-ink-container"
+                component="div"
+              >
+                <div
+                  className="md-ink-container"
+                />
+              </TransitionGroup>
+            </InkContainer>
+            Delete
+          </button>
+        </Button>
+      </withTooltip(Button)>
+    </withInk(withTooltip(Button))>
+  </div>
+</IntentDetails>
+`;

web/src/components/helper/AnswerSourceForm.js

@@ -0,0 +1,57 @@
+import React, {Component} from 'react';
+import {Button, SelectionControlGroup} from 'react-md';
+import Modal from './Modal';
+
+class AnswerSourceForm extends Component{
+
+    render(){
+        return(
+        <Modal
+            title="Answer type"
+            actions={[
+            <Button
+                flat
+                swapTheming
+                onClick={this.props.onClose.bind (this)}
+                key="cancel"
+            >
+                Cancel
+            </Button>,
+            <Button 
+                flat 
+                primary 
+                swapTheming 
+                key="save"
+                onClick={this.props.onSave.bind(this)}
+            >
+                Save
+            </Button>,
+            ]}
+        >
+            <SelectionControlGroup
+            id="answer-source"
+            name="answer-source"
+            type="radio"
+            label="Import answer from:"
+            onChange={this.props.onSourceChange.bind(this)}
+            controls={[
+                {
+                label: 'Predefined answer',
+                value: '0'
+                },
+                {
+                label: 'WordPress titles',
+                value: '1',
+                },
+                {
+                label: 'WordPress latest news',
+                value: '2',
+                },
+            ]}
+            defaultValue={String(this.props.answerType)}
+            />
+        </Modal>);
+    }
+}
+
+export default AnswerSourceForm;

web/src/components/helper/AnswerTextBox.js

@@ -0,0 +1,44 @@
+import React, {Component} from 'react';
+import {TextField} from 'react-md';
+import '../../css/components/IntentDetails.css';
+import '../../css/Common.css';
+import {
+  ANSWER_MAX_LENGTH,
+  ANSWER_TYPE,
+} from '../../config/constants';
+
+class AnswerTextBox extends Component {
+
+  render () {
+      //theese are defaults for ANSWER_TYPE.PREDEFINED
+      let labelText="Answer";
+      let valueText=this.props.answer;
+      let onChangeValue=this.props.handleAnswerEdit;
+      switch(this.props.answerType){
+          case ANSWER_TYPE.EXTERNAL_SOURCE_WP_TITLES:
+          case ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS:
+            labelText="Answer source";
+            valueText=this.props.externalAnswerSource;
+            onChangeValue=this.props.handleAnswerSourceEdit
+            break;
+      }
+      
+
+    return(
+    <div className="QuestionBox">
+        <TextField
+          id="intent answer"
+          lineDirection="center"
+          label={labelText}
+          placeholder={labelText}
+          maxLength={ANSWER_MAX_LENGTH}
+          className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+          onChange={onChangeValue}
+          value={valueText}
+        />
+      </div>
+    );
+  }
+}
+
+export default AnswerTextBox;

web/src/components/helper/Modal.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import '../../css/components/Modal.css';
+
+class Modal extends Component {
+    render() {
+        const { title, children, actions } = this.props;
+        return (
+            <div className="modal">
+                <div className="modal-content">
+                    <h2 className="header">
+                        {title}
+                    </h2>
+                    {children}
+                    <div className="actions">
+                        {actions}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Modal;

web/src/components/helper/__tests__/AnswerSourceForm.test.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import AnswerSourceForm from '../AnswerSourceForm';
+import {ANSWER_TYPE} from '../../../config/constants'
+
+it('renders without crashing', () => {
+  shallow(<AnswerSourceForm onClose={()=>{}} onSave={()=>{}} onSourceChange={()=>{}} />);
+});
+
+it ('snapshot',()=>{
+  const wrapper = mount(<AnswerSourceForm onClose={()=>{}} onSave={()=>{}} onSourceChange={()=>{}} />);
+  expect(wrapper).toMatchSnapshot();
+})
+
+it('calls onClose when cancel is pressed', () => {
+  const onClose = jest.fn();
+  const wrapper = mount(<AnswerSourceForm onClose={onClose} onSave={()=>{}} onSourceChange={()=>{}} />);
+  const cancelButton = wrapper.find('button').at(0);
+  expect(cancelButton.text()).toEqual('Cancel');
+  cancelButton.simulate('click');
+  expect(onClose).toBeCalled();
+});
+
+it('calls onSave when save is pressed', () => {
+  const onSave = jest.fn();
+  const wrapper = mount(<AnswerSourceForm onClose={()=>{}} onSave={onSave} onSourceChange={()=>{}} />);
+  const saveButton = wrapper.find('button').at(1);
+  expect(saveButton.text()).toEqual('Save');
+  saveButton.simulate('click');
+  expect(onSave).toBeCalled();
+});
+
+it('sets PREDEFINED value when Predefined answer is selected', () => {
+  let selectedValue = null;
+
+  const wrapper = mount(<AnswerSourceForm 
+    onClose={()=>{}} 
+    onSave={()=>{}} 
+    onSourceChange={(value)=>{selectedValue=value}} />);
+
+  const optionControl = wrapper.find('SelectionControlGroup');
+  expect(optionControl.exists()).toEqual(true);
+  optionControl.simulate('change',{target:{value:String(ANSWER_TYPE.PREDEFINED)}});
+  expect(selectedValue).toBe(String(ANSWER_TYPE.PREDEFINED));
+  
+});
+
+it('sets EXTERNAL_SOURCE_WP_TITLES value when WordPress titles is selected', () => {
+  let selectedValue = null;
+
+  const wrapper = mount(<AnswerSourceForm 
+    onClose={()=>{}} 
+    onSave={()=>{}} 
+    onSourceChange={(value)=>{selectedValue=value}} />);
+
+  const optionControl = wrapper.find('SelectionControlGroup');
+  expect(optionControl.exists()).toEqual(true);
+  optionControl.simulate('change',{target:{value:String(ANSWER_TYPE.EXTERNAL_SOURCE_WP_TITLES)}});
+  expect(selectedValue).toBe(String(ANSWER_TYPE.EXTERNAL_SOURCE_WP_TITLES));
+  
+});
+
+it('sets EXTERNAL_SOURCE_WP_NEWS value when WordPress latest news is selected', () => {
+  let selectedValue = null;
+
+  const wrapper = mount(<AnswerSourceForm 
+    onClose={()=>{}} 
+    onSave={()=>{}} 
+    onSourceChange={(value)=>{selectedValue=value}} />);
+
+  const optionControl = wrapper.find('SelectionControlGroup');
+  expect(optionControl.exists()).toEqual(true);
+  optionControl.simulate('change',{target:{value:String(ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS)}});
+  expect(selectedValue).toBe(String(ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS));
+  
+});

web/src/components/helper/__tests__/AnswerTextBox.test.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+import AnswerTextBox from '../AnswerTextBox';
+import {ANSWER_TYPE} from '../../../config/constants';
+
+it ('renders without crashing', () => {
+  shallow (<AnswerTextBox />);
+});
+
+describe ('predefined answer selected', () => {
+  let wrapper;
+  let textField;
+
+  beforeEach (() => {
+    const onChange = jest.fn();
+    wrapper = mount (
+      <AnswerTextBox
+        answerType={ANSWER_TYPE.PREDEFINED}
+        answer={'Dummy answer'}
+        handleAnswerEdit={onChange}
+      />
+    );
+    textField = wrapper.find ('TextField').first ();
+  });
+
+  it ('snapshot', () =>{
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it ('renders text box for normal answer', () => {
+    expect (textField.props ().label).toEqual ('Answer');
+  });
+
+  it ('receives valid answer text', () => {
+    expect (textField.props ().value).toEqual ('Dummy answer');
+  });
+});
+
+describe ('WordPress titles selected', () => {
+  let wrapper;
+  let textField;
+  beforeEach (() => {
+    const onChange = jest.fn();
+    wrapper = mount (
+      <AnswerTextBox
+        answerType={ANSWER_TYPE.EXTERNAL_SOURCE_WP_TITLES}
+        externalAnswerSource={'Dummy answer'}
+        handleAnswerSourceEdit={onChange}
+      />
+    );
+    textField = wrapper.find ('TextField').first ();
+  });
+
+  it ('snapshot', () =>{
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it ('renders text box for external source input', () => {
+    expect (textField.props ().label).toEqual ('Answer source');
+  });
+
+  it ('receives valid answer text', () => {
+    expect (textField.props ().value).toEqual ('Dummy answer');
+  });
+});
+
+describe ('WordPress latest news selected', () => {
+  let wrapper;
+  let textField;
+  beforeEach (() => {
+    const onChange = jest.fn();
+    wrapper = mount (
+      <AnswerTextBox
+        answerType={ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS}
+        externalAnswerSource={'Dummy answer'}
+        handleAnswerSourceEdit={onChange}
+      />
+    );
+    textField = wrapper.find ('TextField').first ();
+  });
+
+  it ('snapshot', () =>{
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it ('renders text box for external source input', () => {
+    expect (textField.props ().label).toEqual ('Answer source');
+  });
+
+  it ('receives valid answer text', () => {
+    expect (textField.props ().value).toEqual ('Dummy answer');
+  });
+});

web/src/components/helper/__tests__/Modal.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import Modal from '../Modal';
+
+it('renders without crashing', () => {
+  shallow(<Modal />);
+});
+
+let actionButton;
+let childButton;
+let wrapper;
+
+beforeEach(()=>{
+  actionButton = <button key={0}>Dummy action button</button>;
+  childButton = <button key={1}>Child button</button>;
+  wrapper = mount(<Modal title={'Dummy title'} actions={[actionButton]}>{childButton}</Modal>);
+});
+
+it ('snapshot', () => {
+  expect(wrapper).toMatchSnapshot();
+});
+
+it('receives props as expected', () =>{
+  expect(wrapper.props().title).toEqual('Dummy title');
+  expect(wrapper.props().actions).toEqual([actionButton]);
+  expect(wrapper.props().children).toEqual(childButton);
+});

web/src/components/helper/__tests__/__snapshots__/AnswerSourceForm.test.js.snap

@@ -0,0 +1,675 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snapshot 1`] = `
+<AnswerSourceForm
+  onClose={[Function]}
+  onSave={[Function]}
+  onSourceChange={[Function]}
+>
+  <Modal
+    actions={
+      Array [
+        <withInk(withTooltip(Button))
+          flat={true}
+          inkTransitionEnterTimeout={450}
+          inkTransitionLeaveTimeout={300}
+          inkTransitionOverlap={150}
+          onClick={[Function]}
+          swapTheming={true}
+      >
+          Cancel
+      </withInk(withTooltip(Button))>,
+        <withInk(withTooltip(Button))
+          flat={true}
+          inkTransitionEnterTimeout={450}
+          inkTransitionLeaveTimeout={300}
+          inkTransitionOverlap={150}
+          onClick={[Function]}
+          primary={true}
+          swapTheming={true}
+      >
+          Save
+      </withInk(withTooltip(Button))>,
+      ]
+    }
+    title="Answer type"
+  >
+    <div
+      className="modal"
+    >
+      <div
+        className="modal-content"
+      >
+        <h2
+          className="header"
+        >
+          Answer type
+        </h2>
+        <SelectionControlGroup
+          component="fieldset"
+          controls={
+            Array [
+              Object {
+                "label": "Predefined answer",
+                "value": "0",
+              },
+              Object {
+                "label": "WordPress titles",
+                "value": "1",
+              },
+              Object {
+                "label": "WordPress latest news",
+                "value": "2",
+              },
+            ]
+          }
+          defaultValue="undefined"
+          id="answer-source"
+          label="Import answer from:"
+          labelClassName="md-subheading-1"
+          labelComponent="legend"
+          name="answer-source"
+          onChange={[Function]}
+          type="radio"
+        >
+          <fieldset
+            className="md-selection-control-group"
+            onChange={[Function]}
+            onKeyDown={[Function]}
+          >
+            <legend
+              className="md-subheading-1"
+            >
+              Import answer from:
+            </legend>
+            <SelectionControl
+              checked={false}
+              checkedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box
+                </FontIcon>
+              }
+              checkedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_checked
+                </FontIcon>
+              }
+              className=""
+              id="answer-source0"
+              key="control0"
+              label="Predefined answer"
+              name="answer-source"
+              type="radio"
+              uncheckedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box_outline_blank
+                </FontIcon>
+              }
+              uncheckedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_unchecked
+                </FontIcon>
+              }
+              value="0"
+            >
+              <div
+                className="md-selection-control-container"
+                onKeyDown={[Function]}
+              >
+                <input
+                  aria-hidden={true}
+                  checked={false}
+                  className="md-selection-control-input"
+                  id="answer-source0"
+                  name="answer-source"
+                  onChange={[Function]}
+                  type="radio"
+                  value="0"
+                />
+                <label
+                  className="md-selection-control-label md-pointer--hover md-text"
+                  htmlFor="answer-source0"
+                >
+                  <withInk(AccessibleFakeButton)
+                    aria-checked={false}
+                    className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                    inkTransitionEnterTimeout={450}
+                    inkTransitionLeaveTimeout={300}
+                    inkTransitionOverlap={150}
+                    role="radio"
+                  >
+                    <AccessibleFakeButton
+                      aria-checked={false}
+                      className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                      component="div"
+                      ink={
+                        <InkContainer
+                          className={undefined}
+                          disabledInteractions={undefined}
+                          inkClassName={undefined}
+                          inkStyle={undefined}
+                          pulse={undefined}
+                          style={undefined}
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                          waitForInkTransition={undefined}
+                        />
+                      }
+                      listenToEnter={true}
+                      listenToSpace={true}
+                      noFocusOutline={true}
+                      role="radio"
+                      tabIndex={0}
+                    >
+                      <div
+                        aria-checked={false}
+                        aria-pressed={false}
+                        className="md-fake-btn md-pointer--hover md-fake-btn--no-outline md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        onKeyUp={[Function]}
+                        role="radio"
+                        tabIndex={0}
+                      >
+                        <InkContainer
+                          key="ink-container"
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            className="md-ink-container"
+                            component="div"
+                          >
+                            <div
+                              className="md-ink-container"
+                            />
+                          </TransitionGroup>
+                        </InkContainer>
+                        <FontIcon
+                          iconClassName="material-icons"
+                          inherit={true}
+                          key=".1"
+                        >
+                          <i
+                            className="md-icon material-icons md-text--inherit"
+                          >
+                            radio_button_unchecked
+                          </i>
+                        </FontIcon>
+                      </div>
+                    </AccessibleFakeButton>
+                  </withInk(AccessibleFakeButton)>
+                  <span>
+                    Predefined answer
+                  </span>
+                </label>
+              </div>
+            </SelectionControl>
+            <SelectionControl
+              checked={false}
+              checkedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box
+                </FontIcon>
+              }
+              checkedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_checked
+                </FontIcon>
+              }
+              className=""
+              id="answer-source1"
+              key="control1"
+              label="WordPress titles"
+              name="answer-source"
+              tabIndex={-1}
+              type="radio"
+              uncheckedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box_outline_blank
+                </FontIcon>
+              }
+              uncheckedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_unchecked
+                </FontIcon>
+              }
+              value="1"
+            >
+              <div
+                className="md-selection-control-container"
+                onKeyDown={[Function]}
+              >
+                <input
+                  aria-hidden={true}
+                  checked={false}
+                  className="md-selection-control-input"
+                  id="answer-source1"
+                  name="answer-source"
+                  onChange={[Function]}
+                  type="radio"
+                  value="1"
+                />
+                <label
+                  className="md-selection-control-label md-pointer--hover md-text"
+                  htmlFor="answer-source1"
+                >
+                  <withInk(AccessibleFakeButton)
+                    aria-checked={false}
+                    className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                    inkTransitionEnterTimeout={450}
+                    inkTransitionLeaveTimeout={300}
+                    inkTransitionOverlap={150}
+                    role="radio"
+                    tabIndex={-1}
+                  >
+                    <AccessibleFakeButton
+                      aria-checked={false}
+                      className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                      component="div"
+                      ink={
+                        <InkContainer
+                          className={undefined}
+                          disabledInteractions={undefined}
+                          inkClassName={undefined}
+                          inkStyle={undefined}
+                          pulse={undefined}
+                          style={undefined}
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                          waitForInkTransition={undefined}
+                        />
+                      }
+                      listenToEnter={true}
+                      listenToSpace={true}
+                      noFocusOutline={true}
+                      role="radio"
+                      tabIndex={-1}
+                    >
+                      <div
+                        aria-checked={false}
+                        aria-pressed={false}
+                        className="md-fake-btn md-pointer--hover md-fake-btn--no-outline md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        onKeyUp={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                      >
+                        <InkContainer
+                          key="ink-container"
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            className="md-ink-container"
+                            component="div"
+                          >
+                            <div
+                              className="md-ink-container"
+                            />
+                          </TransitionGroup>
+                        </InkContainer>
+                        <FontIcon
+                          iconClassName="material-icons"
+                          inherit={true}
+                          key=".1"
+                        >
+                          <i
+                            className="md-icon material-icons md-text--inherit"
+                          >
+                            radio_button_unchecked
+                          </i>
+                        </FontIcon>
+                      </div>
+                    </AccessibleFakeButton>
+                  </withInk(AccessibleFakeButton)>
+                  <span>
+                    WordPress titles
+                  </span>
+                </label>
+              </div>
+            </SelectionControl>
+            <SelectionControl
+              checked={false}
+              checkedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box
+                </FontIcon>
+              }
+              checkedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_checked
+                </FontIcon>
+              }
+              className=""
+              id="answer-source2"
+              key="control2"
+              label="WordPress latest news"
+              name="answer-source"
+              tabIndex={-1}
+              type="radio"
+              uncheckedCheckboxIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  check_box_outline_blank
+                </FontIcon>
+              }
+              uncheckedRadioIcon={
+                <FontIcon
+                  iconClassName="material-icons"
+                >
+                  radio_button_unchecked
+                </FontIcon>
+              }
+              value="2"
+            >
+              <div
+                className="md-selection-control-container"
+                onKeyDown={[Function]}
+              >
+                <input
+                  aria-hidden={true}
+                  checked={false}
+                  className="md-selection-control-input"
+                  id="answer-source2"
+                  name="answer-source"
+                  onChange={[Function]}
+                  type="radio"
+                  value="2"
+                />
+                <label
+                  className="md-selection-control-label md-pointer--hover md-text"
+                  htmlFor="answer-source2"
+                >
+                  <withInk(AccessibleFakeButton)
+                    aria-checked={false}
+                    className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                    inkTransitionEnterTimeout={450}
+                    inkTransitionLeaveTimeout={300}
+                    inkTransitionOverlap={150}
+                    role="radio"
+                    tabIndex={-1}
+                  >
+                    <AccessibleFakeButton
+                      aria-checked={false}
+                      className="md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                      component="div"
+                      ink={
+                        <InkContainer
+                          className={undefined}
+                          disabledInteractions={undefined}
+                          inkClassName={undefined}
+                          inkStyle={undefined}
+                          pulse={undefined}
+                          style={undefined}
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                          waitForInkTransition={undefined}
+                        />
+                      }
+                      listenToEnter={true}
+                      listenToSpace={true}
+                      noFocusOutline={true}
+                      role="radio"
+                      tabIndex={-1}
+                    >
+                      <div
+                        aria-checked={false}
+                        aria-pressed={false}
+                        className="md-fake-btn md-pointer--hover md-fake-btn--no-outline md-selection-control-toggle md-btn md-btn--icon md-text--secondary"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        onKeyUp={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                      >
+                        <InkContainer
+                          key="ink-container"
+                          transitionEnterTimeout={450}
+                          transitionLeaveTimeout={300}
+                          transitionOverlap={150}
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            className="md-ink-container"
+                            component="div"
+                          >
+                            <div
+                              className="md-ink-container"
+                            />
+                          </TransitionGroup>
+                        </InkContainer>
+                        <FontIcon
+                          iconClassName="material-icons"
+                          inherit={true}
+                          key=".1"
+                        >
+                          <i
+                            className="md-icon material-icons md-text--inherit"
+                          >
+                            radio_button_unchecked
+                          </i>
+                        </FontIcon>
+                      </div>
+                    </AccessibleFakeButton>
+                  </withInk(AccessibleFakeButton)>
+                  <span>
+                    WordPress latest news
+                  </span>
+                </label>
+              </div>
+            </SelectionControl>
+          </fieldset>
+        </SelectionControlGroup>
+        <div
+          className="actions"
+        >
+          <withInk(withTooltip(Button))
+            flat={true}
+            inkTransitionEnterTimeout={450}
+            inkTransitionLeaveTimeout={300}
+            inkTransitionOverlap={150}
+            key="cancel"
+            onClick={[Function]}
+            swapTheming={true}
+          >
+            <withTooltip(Button)
+              flat={true}
+              ink={
+                <InkContainer
+                  className={undefined}
+                  disabledInteractions={undefined}
+                  inkClassName={undefined}
+                  inkStyle={undefined}
+                  pulse={undefined}
+                  style={undefined}
+                  transitionEnterTimeout={450}
+                  transitionLeaveTimeout={300}
+                  transitionOverlap={150}
+                  waitForInkTransition={undefined}
+                />
+              }
+              onClick={[Function]}
+              swapTheming={true}
+            >
+              <Button
+                fixedPosition="br"
+                flat={true}
+                iconBefore={true}
+                ink={
+                  <InkContainer
+                    className={undefined}
+                    disabledInteractions={undefined}
+                    inkClassName={undefined}
+                    inkStyle={undefined}
+                    pulse={undefined}
+                    style={undefined}
+                    transitionEnterTimeout={450}
+                    transitionLeaveTimeout={300}
+                    transitionOverlap={150}
+                    waitForInkTransition={undefined}
+                  />
+                }
+                onClick={[Function]}
+                swapTheming={true}
+                type="button"
+              >
+                <button
+                  className="md-btn md-btn--flat md-btn--text md-pointer--hover md-text md-inline-block"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyUp={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseUp={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
+                  type="button"
+                >
+                  <InkContainer
+                    key="ink-container"
+                    transitionEnterTimeout={450}
+                    transitionLeaveTimeout={300}
+                    transitionOverlap={150}
+                  >
+                    <TransitionGroup
+                      childFactory={[Function]}
+                      className="md-ink-container"
+                      component="div"
+                    >
+                      <div
+                        className="md-ink-container"
+                      />
+                    </TransitionGroup>
+                  </InkContainer>
+                  Cancel
+                </button>
+              </Button>
+            </withTooltip(Button)>
+          </withInk(withTooltip(Button))>
+          <withInk(withTooltip(Button))
+            flat={true}
+            inkTransitionEnterTimeout={450}
+            inkTransitionLeaveTimeout={300}
+            inkTransitionOverlap={150}
+            key="save"
+            onClick={[Function]}
+            primary={true}
+            swapTheming={true}
+          >
+            <withTooltip(Button)
+              flat={true}
+              ink={
+                <InkContainer
+                  className={undefined}
+                  disabledInteractions={undefined}
+                  inkClassName={undefined}
+                  inkStyle={undefined}
+                  pulse={undefined}
+                  style={undefined}
+                  transitionEnterTimeout={450}
+                  transitionLeaveTimeout={300}
+                  transitionOverlap={150}
+                  waitForInkTransition={undefined}
+                />
+              }
+              onClick={[Function]}
+              primary={true}
+              swapTheming={true}
+            >
+              <Button
+                fixedPosition="br"
+                flat={true}
+                iconBefore={true}
+                ink={
+                  <InkContainer
+                    className={undefined}
+                    disabledInteractions={undefined}
+                    inkClassName={undefined}
+                    inkStyle={undefined}
+                    pulse={undefined}
+                    style={undefined}
+                    transitionEnterTimeout={450}
+                    transitionLeaveTimeout={300}
+                    transitionOverlap={150}
+                    waitForInkTransition={undefined}
+                  />
+                }
+                onClick={[Function]}
+                primary={true}
+                swapTheming={true}
+                type="button"
+              >
+                <button
+                  className="md-btn md-btn--flat md-btn--text md-pointer--hover md-background--primary md-background--primary-hover md-inline-block"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyUp={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseUp={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
+                  type="button"
+                >
+                  <InkContainer
+                    key="ink-container"
+                    transitionEnterTimeout={450}
+                    transitionLeaveTimeout={300}
+                    transitionOverlap={150}
+                  >
+                    <TransitionGroup
+                      childFactory={[Function]}
+                      className="md-ink-container"
+                      component="div"
+                    >
+                      <div
+                        className="md-ink-container"
+                      />
+                    </TransitionGroup>
+                  </InkContainer>
+                  Save
+                </button>
+              </Button>
+            </withTooltip(Button)>
+          </withInk(withTooltip(Button))>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</AnswerSourceForm>
+`;

web/src/components/helper/__tests__/__snapshots__/AnswerTextBox.test.js.snap

@@ -0,0 +1,376 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WordPress latest news selected snapshot 1`] = `
+<AnswerTextBox
+  answerType={2}
+  externalAnswerSource="Dummy answer"
+  handleAnswerSourceEdit={[Function]}
+>
+  <div
+    className="QuestionBox"
+  >
+    <TextField
+      className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+      fullWidth={true}
+      id="intent answer"
+      label="Answer source"
+      leftIconStateful={true}
+      lineDirection="center"
+      maxLength={150}
+      onChange={[Function]}
+      passwordIcon={
+        <FontIcon
+          iconClassName="material-icons"
+        >
+          remove_red_eye
+        </FontIcon>
+      }
+      placeholder="Answer source"
+      rightIconStateful={true}
+      type="text"
+      value="Dummy answer"
+    >
+      <div
+        className="md-text-field-container md-full-width md-text-field-container--input md-cell md-cell--bottom IntentDetailsInputBoxes"
+        onClick={[Function]}
+      >
+        <FloatingLabel
+          active={false}
+          error={false}
+          floating={true}
+          htmlFor="intent answer"
+          iconOffset={false}
+          key="label"
+          label="Answer source"
+        >
+          <label
+            className="md-floating-label md-floating-label--floating md-text--secondary"
+            htmlFor="intent answer"
+          >
+            Answer source
+          </label>
+        </FloatingLabel>
+        <InputField
+          className=""
+          fullWidth={true}
+          id="intent answer"
+          inlineIndicator={false}
+          key="field"
+          label="Answer source"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="Answer source"
+          type="text"
+          value="Dummy answer"
+        >
+          <input
+            className="md-text-field md-text-field--floating-margin md-full-width md-text"
+            id="intent answer"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Answer source"
+            type="text"
+            value="Dummy answer"
+          />
+        </InputField>
+        <TextFieldDivider
+          active={false}
+          error={false}
+          key="text-divider"
+          lineDirection="center"
+        >
+          <Divider
+            className="md-divider--text-field md-divider--expand-from-center"
+          >
+            <hr
+              className="md-divider md-divider--text-field md-divider--expand-from-center"
+            />
+          </Divider>
+        </TextFieldDivider>
+        <TextFieldMessage
+          active={false}
+          currentLength={12}
+          error={false}
+          key="message"
+          leftIcon={false}
+          maxLength={150}
+          rightIcon={false}
+        >
+          <div
+            className="md-text-field-message-container md-text-field-message-container--count-only md-full-width md-text--disabled"
+          >
+            <Message
+              active={false}
+              key="message"
+            />
+            <Message
+              active={false}
+              className="md-text-field-message--counter"
+              key="counter"
+            >
+              <div
+                aria-hidden={true}
+                className="md-text-field-message md-text-field-message--inactive md-text-field-message--counter"
+              >
+                12 / 150
+              </div>
+            </Message>
+          </div>
+        </TextFieldMessage>
+      </div>
+    </TextField>
+  </div>
+</AnswerTextBox>
+`;
+
+exports[`WordPress titles selected snapshot 1`] = `
+<AnswerTextBox
+  answerType={1}
+  externalAnswerSource="Dummy answer"
+  handleAnswerSourceEdit={[Function]}
+>
+  <div
+    className="QuestionBox"
+  >
+    <TextField
+      className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+      fullWidth={true}
+      id="intent answer"
+      label="Answer source"
+      leftIconStateful={true}
+      lineDirection="center"
+      maxLength={150}
+      onChange={[Function]}
+      passwordIcon={
+        <FontIcon
+          iconClassName="material-icons"
+        >
+          remove_red_eye
+        </FontIcon>
+      }
+      placeholder="Answer source"
+      rightIconStateful={true}
+      type="text"
+      value="Dummy answer"
+    >
+      <div
+        className="md-text-field-container md-full-width md-text-field-container--input md-cell md-cell--bottom IntentDetailsInputBoxes"
+        onClick={[Function]}
+      >
+        <FloatingLabel
+          active={false}
+          error={false}
+          floating={true}
+          htmlFor="intent answer"
+          iconOffset={false}
+          key="label"
+          label="Answer source"
+        >
+          <label
+            className="md-floating-label md-floating-label--floating md-text--secondary"
+            htmlFor="intent answer"
+          >
+            Answer source
+          </label>
+        </FloatingLabel>
+        <InputField
+          className=""
+          fullWidth={true}
+          id="intent answer"
+          inlineIndicator={false}
+          key="field"
+          label="Answer source"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="Answer source"
+          type="text"
+          value="Dummy answer"
+        >
+          <input
+            className="md-text-field md-text-field--floating-margin md-full-width md-text"
+            id="intent answer"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Answer source"
+            type="text"
+            value="Dummy answer"
+          />
+        </InputField>
+        <TextFieldDivider
+          active={false}
+          error={false}
+          key="text-divider"
+          lineDirection="center"
+        >
+          <Divider
+            className="md-divider--text-field md-divider--expand-from-center"
+          >
+            <hr
+              className="md-divider md-divider--text-field md-divider--expand-from-center"
+            />
+          </Divider>
+        </TextFieldDivider>
+        <TextFieldMessage
+          active={false}
+          currentLength={12}
+          error={false}
+          key="message"
+          leftIcon={false}
+          maxLength={150}
+          rightIcon={false}
+        >
+          <div
+            className="md-text-field-message-container md-text-field-message-container--count-only md-full-width md-text--disabled"
+          >
+            <Message
+              active={false}
+              key="message"
+            />
+            <Message
+              active={false}
+              className="md-text-field-message--counter"
+              key="counter"
+            >
+              <div
+                aria-hidden={true}
+                className="md-text-field-message md-text-field-message--inactive md-text-field-message--counter"
+              >
+                12 / 150
+              </div>
+            </Message>
+          </div>
+        </TextFieldMessage>
+      </div>
+    </TextField>
+  </div>
+</AnswerTextBox>
+`;
+
+exports[`predefined answer selected snapshot 1`] = `
+<AnswerTextBox
+  answer="Dummy answer"
+  answerType={0}
+  handleAnswerEdit={[Function]}
+>
+  <div
+    className="QuestionBox"
+  >
+    <TextField
+      className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+      fullWidth={true}
+      id="intent answer"
+      label="Answer"
+      leftIconStateful={true}
+      lineDirection="center"
+      maxLength={150}
+      onChange={[Function]}
+      passwordIcon={
+        <FontIcon
+          iconClassName="material-icons"
+        >
+          remove_red_eye
+        </FontIcon>
+      }
+      placeholder="Answer"
+      rightIconStateful={true}
+      type="text"
+      value="Dummy answer"
+    >
+      <div
+        className="md-text-field-container md-full-width md-text-field-container--input md-cell md-cell--bottom IntentDetailsInputBoxes"
+        onClick={[Function]}
+      >
+        <FloatingLabel
+          active={false}
+          error={false}
+          floating={true}
+          htmlFor="intent answer"
+          iconOffset={false}
+          key="label"
+          label="Answer"
+        >
+          <label
+            className="md-floating-label md-floating-label--floating md-text--secondary"
+            htmlFor="intent answer"
+          >
+            Answer
+          </label>
+        </FloatingLabel>
+        <InputField
+          className=""
+          fullWidth={true}
+          id="intent answer"
+          inlineIndicator={false}
+          key="field"
+          label="Answer"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="Answer"
+          type="text"
+          value="Dummy answer"
+        >
+          <input
+            className="md-text-field md-text-field--floating-margin md-full-width md-text"
+            id="intent answer"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Answer"
+            type="text"
+            value="Dummy answer"
+          />
+        </InputField>
+        <TextFieldDivider
+          active={false}
+          error={false}
+          key="text-divider"
+          lineDirection="center"
+        >
+          <Divider
+            className="md-divider--text-field md-divider--expand-from-center"
+          >
+            <hr
+              className="md-divider md-divider--text-field md-divider--expand-from-center"
+            />
+          </Divider>
+        </TextFieldDivider>
+        <TextFieldMessage
+          active={false}
+          currentLength={12}
+          error={false}
+          key="message"
+          leftIcon={false}
+          maxLength={150}
+          rightIcon={false}
+        >
+          <div
+            className="md-text-field-message-container md-text-field-message-container--count-only md-full-width md-text--disabled"
+          >
+            <Message
+              active={false}
+              key="message"
+            />
+            <Message
+              active={false}
+              className="md-text-field-message--counter"
+              key="counter"
+            >
+              <div
+                aria-hidden={true}
+                className="md-text-field-message md-text-field-message--inactive md-text-field-message--counter"
+              >
+                12 / 150
+              </div>
+            </Message>
+          </div>
+        </TextFieldMessage>
+      </div>
+    </TextField>
+  </div>
+</AnswerTextBox>
+`;

web/src/components/helper/__tests__/__snapshots__/Modal.test.js.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snapshot 1`] = `
+<Modal
+  actions={
+    Array [
+      <button>
+        Dummy action button
+    </button>,
+    ]
+  }
+  title="Dummy title"
+>
+  <div
+    className="modal"
+  >
+    <div
+      className="modal-content"
+    >
+      <h2
+        className="header"
+      >
+        Dummy title
+      </h2>
+      <button
+        key="1"
+      >
+        Child button
+      </button>
+      <div
+        className="actions"
+      >
+        <button
+          key="0"
+        >
+          Dummy action button
+        </button>
+      </div>
+    </div>
+  </div>
+</Modal>
+`;

web/src/config/constants.js

@@ -22,6 +22,12 @@ export const NEW_INTENT_SELECTED_INDEX = -1;
 export const LAUNCH_REQUEST_SELECTED_INDEX = -2;
 export const CONTACT_SELECTED_INDEX = -3;
 
+export const ANSWER_TYPE = {
+  PREDEFINED: 0,
+  EXTERNAL_SOURCE_WP_TITLES : 1,
+  EXTERNAL_SOURCE_WP_NEWS : 2
+}
+
 export const RESULT_CODES = {
   OK: 0,
   ERROR: -1,

web/src/css/components/IntentDetails.scss

@@ -9,10 +9,25 @@
 }
 
 .IntentDetailsInputBoxes{
-    width: 60%;
+    width: 90%;
 }
 
 .IntentDetailsButton{
-    float: left;
+    float: right;
-    margin-left: 25px;
+    margin-right: 25px;
+}
+
+.IntentDetailsButton-firstInRow{
+    float: right;
+    margin-right: 10%;
+}
+
+.AddQuestionVariantButton{
+    float: right;
+    margin-right: 10%;
+}
+
+.AnswerTypeButton{
+    float: right;
+    margin-right: 30px;
 }

web/src/css/components/Modal.scss

@@ -0,0 +1,32 @@
+.modal {
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(37, 37, 37, .7);
+	z-index: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	.modal-content {
+		color: black;
+		padding: 20px;
+		padding-bottom: 0px;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		height: auto;
+		background-color: #FFF;
+		min-width: 500px;
+		.actions {
+			border-top: 1px solid #bebebe;
+			width: 100%;
+			display: flex;
+			justify-content: flex-end;
+			min-width: 500px;
+			margin: 0 -20px;
+			padding: 10px;
+		}
+	}
+}

web/src/css/index.css

@@ -115,10 +115,10 @@ h5, .md-subheading-1 {
   line-height: 24px; }
 
 p, .md-body-1 {
-  line-height: 1.42857; }
+  line-height: 20px; }
 
 h6, .md-body-2 {
-  line-height: 1.42857; }
+  line-height: 24px; }
 
 caption, .md-caption {
   font-size: 12px; }
@@ -1378,7 +1378,7 @@ tbody .md-table-row {
     line-height: inherit; }
 
 .md-table-checkbox .md-selection-control-label {
-  display: block; }
+  display: flex; }
 
 .md-table-checkbox .md-selection-control-container {
   margin-left: 12px;

web/src/setupTests.js

@@ -0,0 +1,5 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import 'jest-enzyme';
+
+configure({ adapter: new Adapter() });