Replace JavaScript alert/confirmations with sweetalert2

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Use different id for gift cert in cart page [#1044](https://github.com/bigcommerce/cornerstone/pull/1044)
 - Restore product image carousel [#1028](https://github.com/bigcommerce/cornerstone/pull/1028)
 - Reduce theme bundle size by using minified libraries where applicable [#1039](https://github.com/bigcommerce/cornerstone/pull/1039)
+- Replace JavaScript alert/confirmations with sweetalert2 library [#1035](https://github.com/bigcommerce/cornerstone/pull/1035)
 
 ## 1.9.0 (2017-07-18)
 - Product Images were obscuring product details on smaller viewports [#1019](https://github.com/bigcommerce/cornerstone/pull/1019)

assets/js/theme/account.js

@@ -5,6 +5,7 @@ import Wishlist from './wishlist';
 import validation from './common/form-validation';
 import stateCountry from './common/state-country';
 import { classifyForm, Validators, insertStateHiddenField } from './common/form-utils';
+import swal from 'sweetalert2';
 
 export default class Account extends PageManager {
     constructor() {
@@ -105,7 +106,10 @@ export default class Account extends PageManager {
 
             if (!submitForm) {
                 event.preventDefault();
-                alert(this.context.selectItem);
+                swal({
+                    text: this.context.selectItem,
+                    type: 'error',
+                });
             }
         });
     }
@@ -179,7 +183,10 @@ export default class Account extends PageManager {
                 return true;
             }
 
-            alert(errorMessage);
+            swal({
+                text: errorMessage,
+                type: 'error',
+            });
 
             return event.preventDefault();
         });

assets/js/theme/cart.js

@@ -5,6 +5,7 @@ import giftCertCheck from './common/gift-certificate-validator';
 import utils from '@bigcommerce/stencil-utils';
 import ShippingEstimator from './cart/shipping-estimator';
 import { defaultModal } from './global/modal';
+import swal from 'sweetalert2';
 
 export default class Cart extends PageManager {
     loaded(next) {
@@ -31,9 +32,15 @@ export default class Cart extends PageManager {
 
         // Does not quality for min/max quantity
         if (newQty < minQty) {
-            return alert(minError);
+            return swal({
+                text: minError,
+                type: 'error',
+            });
         } else if (maxQty > 0 && newQty > maxQty) {
-            return alert(maxError);
+            return swal({
+                text: maxError,
+                type: 'error',
+            });
         }
 
         this.$overlay.show();
@@ -48,7 +55,10 @@ export default class Cart extends PageManager {
                 this.refreshContent(remove);
             } else {
                 $el.val(oldQty);
-                alert(response.data.errors.join('\n'));
+                swal({
+                    text: response.data.errors.join('\n'),
+                    type: 'error',
+                });
             }
         });
     }
@@ -59,7 +69,10 @@ export default class Cart extends PageManager {
             if (response.data.status === 'succeed') {
                 this.refreshContent(true);
             } else {
-                alert(response.data.errors.join('\n'));
+                swal({
+                    text: response.data.errors.join('\n'),
+                    type: 'error',
+                });
             }
         });
     }
@@ -89,7 +102,10 @@ export default class Cart extends PageManager {
                 const data = result.data || {};
 
                 if (err) {
-                    alert(err);
+                    swal({
+                        text: err,
+                        type: 'error',
+                    });
                     return false;
                 }
 
@@ -162,18 +178,16 @@ export default class Cart extends PageManager {
 
         $('.cart-remove', this.$cartContent).on('click', (event) => {
             const itemId = $(event.currentTarget).data('cart-itemid');
-            const openTime = new Date();
-            const result = confirm($(event.currentTarget).data('confirm-delete'));
-            const delta = new Date() - openTime;
+            const string = $(event.currentTarget).data('confirm-delete');
+            swal({
+                text: string,
+                type: 'warning',
+                showCancelButton: true,
+            }).then(() => {
+                // remove item from cart
+                cartRemoveItem(itemId);
+            });
             event.preventDefault();
-
-            // Delta workaround for Chrome's "prevent popup"
-            if (!result && delta > 10) {
-                return;
-            }
-
-            // remove item from cart
-            cartRemoveItem(itemId);
         });
 
         $('[data-item-edit]', this.$cartContent).on('click', (event) => {
@@ -214,14 +228,20 @@ export default class Cart extends PageManager {
 
             // Empty code
             if (!code) {
-                return alert($codeInput.data('error'));
+                return swal({
+                    text: $codeInput.data('error'),
+                    type: 'error',
+                });
             }
 
             utils.api.cart.applyCode(code, (err, response) => {
                 if (response.data.status === 'success') {
                     this.refreshContent();
                 } else {
-                    alert(response.data.errors.join('\n'));
+                    swal({
+                        text: response.data.errors.join('\n'),
+                        type: 'error',
+                    });
                 }
             });
         });
@@ -252,14 +272,20 @@ export default class Cart extends PageManager {
             event.preventDefault();
 
             if (!giftCertCheck(code)) {
-                return alert($certInput.data('error'));
+                return swal({
+                    text: $certInput.data('error'),
+                    type: 'error',
+                });
             }
 
             utils.api.cart.applyGiftCertificate(code, (err, resp) => {
                 if (resp.data.status === 'success') {
                     this.refreshContent();
                 } else {
-                    alert(resp.data.errors.join('\n'));
+                    swal({
+                        text: resp.data.errors.join('\n'),
+                        type: 'error',
+                    });
                 }
             });
         });

assets/js/theme/cart/shipping-estimator.js

@@ -3,6 +3,7 @@ import stateCountry from '../common/state-country';
 import nod from '../common/nod';
 import utils from '@bigcommerce/stencil-utils';
 import { Validators } from '../common/form-utils';
+import swal from 'sweetalert2';
 
 export default class ShippingEstimator {
     constructor($element) {
@@ -100,7 +101,10 @@ export default class ShippingEstimator {
         // Requests the states for a country with AJAX
         stateCountry(this.$state, this.context, { useIdForStates: true }, (err, field) => {
             if (err) {
-                alert(err);
+                swal({
+                    text: err,
+                    type: 'error',
+                });
 
                 throw new Error(err);
             }

assets/js/theme/common/product-details.js

@@ -8,6 +8,7 @@ import 'foundation-sites/js/foundation/foundation.reveal';
 import ImageGallery from '../product/image-gallery';
 import modalFactory from '../global/modal';
 import _ from 'lodash';
+import swal from 'sweetalert2';
 
 // We want to ensure that the events are bound to a single instance of the product details component
 let productSingleton = null;
@@ -228,7 +229,10 @@ export default class Product {
                 const tmp = document.createElement('DIV');
                 tmp.innerHTML = errorMessage;
 
-                return alert(tmp.textContent || tmp.innerText);
+                return swal({
+                    text: tmp.textContent || tmp.innerText,
+                    type: 'error',
+                });
             }
 
             // Open preview modal and update content

assets/js/theme/common/state-country.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import utils from '@bigcommerce/stencil-utils';
 import _ from 'lodash';
 import { insertStateHiddenField } from './form-utils';
+import swal from 'sweetalert2';
 
 /**
  * If there are no options from bcapp, a text field will be sent. This will create a select element to hold options after the remote request.
@@ -129,7 +130,10 @@ export default function (stateElement, context = {}, options, callback) {
 
         utils.api.country.getByName(countryName, (err, response) => {
             if (err) {
-                alert(context.state_error);
+                swal({
+                    text: context.state_error,
+                    type: 'error',
+                });
 
                 return callback(err);
             }

assets/js/theme/compare.js

@@ -1,5 +1,6 @@
 import PageManager from './page-manager';
 import $ from 'jquery';
+import swal from 'sweetalert2';
 
 export default class Compare extends PageManager {
 
@@ -8,7 +9,10 @@ export default class Compare extends PageManager {
 
         $('body').on('click', '[data-comparison-remove]', (event) => {
             if (this.context.comparisons.length <= 2) {
-                alert(message);
+                swal({
+                    text: message,
+                    type: 'error',
+                });
                 event.preventDefault();
             }
         });

assets/js/theme/global.js

@@ -16,6 +16,7 @@ import carousel from './common/carousel';
 import 'lazysizes';
 import loadingProgressBar from './global/loading-progress-bar';
 import FastClick from 'fastclick';
+import sweetAlert from './global/sweet-alert';
 
 function fastClick(element) {
     return new FastClick(element);
@@ -41,6 +42,7 @@ export default class Global extends PageManager {
         privacyCookieNotification();
         maintenanceMode(this.context.maintenanceMode);
         loadingProgressBar();
+        sweetAlert();
         next();
     }
 }

assets/js/theme/global/compare-products.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import _ from 'lodash';
+import swal from 'sweetalert2';
 
 function decrementCounter(counter, item) {
     const index = counter.indexOf(item);
@@ -57,7 +58,10 @@ export default function (urlContext) {
         const productsToCompare = $this.find('input[name="products\[\]"]:checked');
 
         if (productsToCompare.length <= 1) {
-            alert('You must select at least two products to compare');
+            swal({
+                text: 'You must select at least two products to compare',
+                type: 'error',
+            });
             event.preventDefault();
         }
     });
@@ -66,7 +70,10 @@ export default function (urlContext) {
         const $clickedCheckedInput = $('body').find('input[name="products\[\]"]:checked');
 
         if ($clickedCheckedInput.length <= 1) {
-            alert('You must select at least two products to compare');
+            swal({
+                text: 'You must select at least two products to compare',
+                type: 'error',
+            });
 
             return false;
         }

assets/js/theme/global/sweet-alert.js

@@ -0,0 +1,10 @@
+import swal from 'sweetalert2';
+
+export default function () {
+    // Set defaults for sweetalert2 popup boxes
+    swal.setDefaults({
+        buttonsStyling: false,
+        confirmButtonClass: 'button',
+        cancelButtonClass: 'button',
+    });
+}

assets/scss/components/_components.scss

@@ -12,6 +12,9 @@
 // Pace Ajax loading progress bar
 @import "vendor/pace/component";
 
+// SweetAlert2 replacement for JavaScript alert/confirmations
+@import "vendor/sweetalert2/component";
+
 
 // Foundation components
 // -----------------------------------------------------------------------------

assets/scss/components/vendor/sweetalert2/_component.scss

@@ -0,0 +1,9 @@
+// =============================================================================
+// SWEETALERT2
+// =============================================================================
+
+// Vendor SCSS
+@import "../../../../../node_modules/sweetalert2/src/sweetalert2";
+
+// Compnent
+@import "sweetalert2";