custom alert replace window.alert (#1549)

- Use sweetAlert library to provide framework for browser dialogs and notifications.
- Add custom css (to match with current window popup UI) to answers.scss
- create alert function to wrap around sweetAlert functions with default configuration setup
- update all window.alert calls to use alert from alert.js

J=SLAP-1524
TEST=manual

- serve page using voicesearch functionality with mic access block, see that an alert is display on page with proper UI
- check with screen reader and see that the popup message and button can be read

.size-limit.js

@@ -1,11 +1,11 @@
 module.exports = [
   {
     path: 'dist/answers.min.js',
-    limit: '160 KB'
+    limit: '168 KB'
   },
   {
     path: 'dist/answers-modern.min.js',
-    limit: '130kb'
+    limit: '142kb'
   },
   {
     path: 'dist/answerstemplates.compiled.min.js',

THIRD-PARTY-NOTICES

@@ -2405,6 +2405,37 @@ THE SOFTWARE.
 
 -----------
 
+The following NPM package may be included in this product:
+
+ - es6-object-assign@1.1.0
+
+This package contains the following license and notice below:
+
+Copyright (c) 2015-2017 Rubén Norte <rubennorte@gmail.com>
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+-----------
+
 The following NPM packages may be included in this product:
 
  - es6-weak-map@2.0.3
@@ -6168,6 +6199,35 @@ SOFTWARE.**
 
 -----------
 
+The following NPM package may be included in this product:
+
+ - promise-polyfill@6.1.0
+
+This package contains the following license and notice below:
+
+Copyright (c) 2014 Taylor Hakes
+Copyright (c) 2014 Forbes Lindesay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+-----------
+
 The following NPM packages may be included in this product:
 
  - readable-stream@2.3.7
@@ -7831,6 +7891,36 @@ SOFTWARE.
 
 -----------
 
+The following NPM package may be included in this product:
+
+ - sweetalert@2.1.2
+
+This package contains the following license and notice below:
+
+The MIT License (MIT)
+
+Copyright (c) 2014-present Tristan Edwards
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----------
+
 The following NPM package may be included in this product:
 
  - table@6.0.4

conf/i18n/translations/messages.pot

@@ -43,7 +43,7 @@ msgstr ""
 msgid "Can’t find what you're looking for? Ask a question below."
 msgstr ""
 
-#: src/ui/components/filters/geolocationcomponent.js:94
+#: src/ui/components/filters/geolocationcomponent.js:95
 msgid "Could Not Find Your Location"
 msgstr ""
 
@@ -65,7 +65,7 @@ msgstr ""
 msgid "Filters applied to this search:"
 msgstr ""
 
-#: src/ui/components/filters/geolocationcomponent.js:86
+#: src/ui/components/filters/geolocationcomponent.js:87
 msgid "Finding Your Location..."
 msgstr ""
 
@@ -101,21 +101,21 @@ msgstr ""
 msgid "Invalid email address. Please refresh the page and try submitting your question again."
 msgstr ""
 
-#: src/ui/components/filters/geolocationcomponent.js:285
-#: src/ui/components/filters/geolocationcomponent.js:39
-#: src/ui/components/filters/geolocationcomponent.js:47
+#: src/ui/components/filters/geolocationcomponent.js:286
+#: src/ui/components/filters/geolocationcomponent.js:40
+#: src/ui/components/filters/geolocationcomponent.js:48
 msgid "Location"
 msgstr ""
 
 #: src/ui/templates/results/noresults.hbs:31
 msgid "Make sure all words are spelled correctly."
 msgstr ""
 
-#: src/ui/speechrecognition/speechrecognizer.js:97
+#: src/ui/speechrecognition/speechrecognizer.js:98
 msgid "Note: For Safari users, Siri must be enabled"
 msgstr ""
 
-#: src/ui/speechrecognition/voicesearchcontroller.js:65
+#: src/ui/speechrecognition/voicesearchcontroller.js:66
 msgid "Permission to use microphone is blocked"
 msgstr ""
 
@@ -127,7 +127,7 @@ msgstr ""
 msgid "Showing <em class=\"yxt-AlternativeVerticals-noResultsInfo--emphasized\">all [[currentVerticalLabel]]</em> instead."
 msgstr ""
 
-#: src/ui/speechrecognition/speechrecognizer.js:95
+#: src/ui/speechrecognition/speechrecognizer.js:96
 msgid "Speech Recognition is not available."
 msgstr ""
 
@@ -173,18 +173,18 @@ msgstr ""
 msgid "Try to ask your question a different way."
 msgstr ""
 
-#: src/ui/components/search/locationbiascomponent.js:150
+#: src/ui/components/search/locationbiascomponent.js:151
 msgid "Unknown Location"
 msgstr ""
 
-#: src/ui/components/filters/geolocationcomponent.js:61
-#: src/ui/components/filters/geolocationcomponent.js:69
+#: src/ui/components/filters/geolocationcomponent.js:62
+#: src/ui/components/filters/geolocationcomponent.js:70
 msgid "Use My Location"
 msgstr ""
 
-#: src/ui/components/filters/geolocationcomponent.js:152
-#: src/ui/components/search/locationbiascomponent.js:87
-#: src/ui/components/search/searchcomponent.js:233
+#: src/ui/components/filters/geolocationcomponent.js:153
+#: src/ui/components/search/locationbiascomponent.js:88
+#: src/ui/components/search/searchcomponent.js:234
 msgid "We are unable to determine your location"
 msgstr ""
 
@@ -233,12 +233,12 @@ msgid "Remove this filter"
 msgstr ""
 
 #: src/ui/components/questions/questionsubmissioncomponent.js:69
-#: src/ui/components/search/searchcomponent.js:72
+#: src/ui/components/search/searchcomponent.js:73
 msgctxt "Button label"
 msgid "Submit"
 msgstr ""
 
-#: src/ui/components/search/locationbiascomponent.js:17
+#: src/ui/components/search/locationbiascomponent.js:18
 msgctxt "Button label"
 msgid "Update your location"
 msgstr ""
@@ -294,12 +294,12 @@ msgctxt "Change is a verb. Example: change filtering logic"
 msgid "change"
 msgstr ""
 
-#: src/ui/components/search/locationbiascomponent.js:13
+#: src/ui/components/search/locationbiascomponent.js:14
 msgctxt "Describes the accuracy of estimated location. Example: Salt Lake City, Utah based on your device"
 msgid "based on your device"
 msgstr ""
 
-#: src/ui/components/search/locationbiascomponent.js:9
+#: src/ui/components/search/locationbiascomponent.js:10
 msgctxt "Describes the accuracy of estimated location. Example: Salt Lake City, Utah based on your internet address"
 msgid "based on your internet address"
 msgstr ""
@@ -373,7 +373,7 @@ msgctxt "Labels a link"
 msgid "Learn more here."
 msgstr ""
 
-#: src/ui/components/search/searchcomponent.js:63
+#: src/ui/components/search/searchcomponent.js:64
 msgctxt "Labels an input field"
 msgid "Conduct a search"
 msgstr ""
@@ -404,7 +404,7 @@ msgctxt "Labels the question value provided as an argument"
 msgid "Question"
 msgstr ""
 
-#: src/ui/components/filters/geolocationcomponent.js:77
+#: src/ui/components/filters/geolocationcomponent.js:78
 msgctxt "Labels the user's current location"
 msgid "Current Location"
 msgstr ""
@@ -472,7 +472,7 @@ msgctxt "True or False"
 msgid "True"
 msgstr ""
 
-#: src/ui/components/search/searchcomponent.js:81
+#: src/ui/components/search/searchcomponent.js:82
 msgctxt "Verb, clears search"
 msgid "Clear"
 msgstr ""

package.json

@@ -39,6 +39,7 @@
     "markdown-it-for-inline": "^0.1.1",
     "plural-forms": "^0.5.1",
     "stylelint-scss": "^3.18.0",
+    "sweetalert": "^2.1.2",
     "template-helpers": "^1.0.1",
     "uuid": "^8.3.2"
   },
@@ -194,6 +195,46 @@
     "./ja": "./dist/ja-answers-umd.js",
     "./ja/modern": "./dist/ja-answers-modern.js",
     "./ja/modern.min": "./dist/ja-answers-modern.min.js",
-    "./ja/template": "./dist/ja-answerstemplates.compiled.min.js"
+    "./ja/template": "./dist/ja-answerstemplates.compiled.min.js",
+    "./ar": "./dist/ar-answers-umd.js",
+    "./ar/modern": "./dist/ar-answers-modern.js",
+    "./ar/modern.min": "./dist/ar-answers-modern.min.js",
+    "./ar/template": "./dist/ar-answerstemplates.compiled.min.js",
+    "./hi": "./dist/hi-answers-umd.js",
+    "./hi/modern": "./dist/hi-answers-modern.js",
+    "./hi/modern.min": "./dist/hi-answers-modern.min.js",
+    "./hi/template": "./dist/hi-answerstemplates.compiled.min.js",
+    "./ko": "./dist/ko-answers-umd.js",
+    "./ko/modern": "./dist/ko-answers-modern.js",
+    "./ko/modern.min": "./dist/ko-answers-modern.min.js",
+    "./ko/template": "./dist/ko-answerstemplates.compiled.min.js",
+    "./nl": "./dist/nl-answers-umd.js",
+    "./nl/modern": "./dist/nl-answers-modern.js",
+    "./nl/modern.min": "./dist/nl-answers-modern.min.js",
+    "./nl/template": "./dist/nl-answerstemplates.compiled.min.js",
+    "./pl": "./dist/pl-answers-umd.js",
+    "./pl/modern": "./dist/pl-answers-modern.js",
+    "./pl/modern.min": "./dist/pl-answers-modern.min.js",
+    "./pl/template": "./dist/pl-answerstemplates.compiled.min.js",
+    "./pt": "./dist/pt-answers-umd.js",
+    "./pt/modern": "./dist/pt-answers-modern.js",
+    "./pt/modern.min": "./dist/pt-answers-modern.min.js",
+    "./pt/template": "./dist/pt-answerstemplates.compiled.min.js",
+    "./ru": "./dist/ru-answers-umd.js",
+    "./ru/modern": "./dist/ru-answers-modern.js",
+    "./ru/modern.min": "./dist/ru-answers-modern.min.js",
+    "./ru/template": "./dist/ru-answerstemplates.compiled.min.js",
+    "./sv": "./dist/sv-answers-umd.js",
+    "./sv/modern": "./dist/sv-answers-modern.js",
+    "./sv/modern.min": "./dist/sv-answers-modern.min.js",
+    "./sv/template": "./dist/sv-answerstemplates.compiled.min.js",
+    "./zh-Hans": "./dist/zh-Hans-answers-umd.js",
+    "./zh-Hans/modern": "./dist/zh-Hans-answers-modern.js",
+    "./zh-Hans/modern.min": "./dist/zh-Hans-answers-modern.min.js",
+    "./zh-Hans/template": "./dist/zh-Hans-answerstemplates.compiled.min.js",
+    "./zh-Hant": "./dist/zh-Hant-answers-umd.js",
+    "./zh-Hant/modern": "./dist/zh-Hant-answers-modern.js",
+    "./zh-Hant/modern.min": "./dist/zh-Hant-answers-modern.min.js",
+    "./zh-Hant/template": "./dist/zh-Hant-answerstemplates.compiled.min.js"
   }
-}
+}

src/ui/alert.js

@@ -0,0 +1,14 @@
+import swal from 'sweetalert';
+import DOM from './dom/dom';
+
+const defaultAlertOptions = {
+  closeOnClickOutside: false,
+  closeOnEsc: false
+};
+
+export default function alert (message, options = null) {
+  const opts = options || defaultAlertOptions;
+  swal(message, opts).then(() => {
+    DOM.query('.swal-overlay').remove();
+  });
+}

src/ui/components/filters/geolocationcomponent.js

@@ -9,6 +9,7 @@ import FilterNodeFactory from '../../../core/filters/filternodefactory';
 import ComponentTypes from '../../components/componenttypes';
 import TranslationFlagger from '../../i18n/translationflagger';
 import QueryTriggers from '../../../core/models/querytriggers';
+import alert from '../../alert';
 
 const METERS_PER_MILE = 1609.344;
 
@@ -264,7 +265,7 @@ export default class GeoLocationComponent extends Component {
     this.setState({ geoError: true });
     const { enabled, message } = this._geolocationTimeoutAlert;
     if (enabled) {
-      window.alert(message);
+      alert(message);
     }
   }