From a331d3114111afe8452a8ecc65ecd3d50d7718c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cbc-yevhenii-buliuk=E2=80=9D?= <“yevhenii.buliuk@bigcommerce.com”> Date: Tue, 29 Mar 2022 14:07:40 +0300 Subject: [PATCH] fix(storefront): BCTHEME-1043 Remove sweetAlert --- CHANGELOG.md | 1 + assets/js/theme/account.js | 20 ++-- assets/js/theme/cart.js | 88 +++++--------- assets/js/theme/cart/shipping-estimator.js | 8 +- assets/js/theme/global/currency-selector.js | 18 ++- assets/js/theme/global/modal.js | 23 +++- assets/js/theme/global/sweet-alert.js | 16 --- assets/scss/components/_components.scss | 3 - .../components/foundation/modal/_modal.scss | 99 ++++++++++++++++ .../vendor/sweetalert2/_component.scss | 9 -- .../vendor/sweetalert2/_sweetalert2.scss | 108 ------------------ jest.config.js | 1 - package-lock.json | 5 - package.json | 1 - .../components/common/alert/alert-modal.html | 16 ++- .../components/common/currency-selector.html | 4 +- webpack.common.js | 1 - 17 files changed, 182 insertions(+), 239 deletions(-) delete mode 100644 assets/js/theme/global/sweet-alert.js delete mode 100644 assets/scss/components/vendor/sweetalert2/_component.scss delete mode 100644 assets/scss/components/vendor/sweetalert2/_sweetalert2.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index afb9566403..2123fafc1a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## Draft +- Remove sweetAlert [#2189](https://github.com/bigcommerce/cornerstone/issues/2189) ## 6.3.0 (03-11-2022) - Update blog component to use H1 tags on posts [#2179](https://github.com/bigcommerce/cornerstone/issues/2179) diff --git a/assets/js/theme/account.js b/assets/js/theme/account.js index aac824037e..717b65a97c 100644 --- a/assets/js/theme/account.js +++ b/assets/js/theme/account.js @@ -13,7 +13,7 @@ import { } from './common/utils/form-utils'; import { createTranslationDictionary } from './common/utils/translations-utils'; import { creditCardType, storeInstrument, Validators as CCValidators, Formatters as CCFormatters } from './common/payment-method'; -import swal from './global/sweet-alert'; +import { showAlertModal } from './global/modal'; import compareProducts from './global/compare-products'; export default class Account extends PageManager { @@ -131,10 +131,9 @@ export default class Account extends PageManager { if (!submitForm) { event.preventDefault(); - swal.fire({ - text: this.context.selectItem, - icon: 'error', - }); + + const text = this.context.selectItem; + showAlertModal(text); } }); } @@ -209,10 +208,7 @@ export default class Account extends PageManager { return true; } - swal.fire({ - text: errorMessage, - icon: 'error', - }); + showAlertModal(errorMessage); return event.preventDefault(); }); @@ -313,10 +309,8 @@ export default class Account extends PageManager { storeInstrument(this.context, data, () => { window.location.href = this.context.paymentMethodsUrl; }, () => { - swal.fire({ - text: this.context.generic_error, - icon: 'error', - }); + const text = this.context.generic_error; + showAlertModal(text); }); } }); diff --git a/assets/js/theme/cart.js b/assets/js/theme/cart.js index d3e161c734..9da5f4091c 100644 --- a/assets/js/theme/cart.js +++ b/assets/js/theme/cart.js @@ -4,8 +4,7 @@ import checkIsGiftCertValid from './common/gift-certificate-validator'; import { createTranslationDictionary } from './common/utils/translations-utils'; import utils from '@bigcommerce/stencil-utils'; import ShippingEstimator from './cart/shipping-estimator'; -import { defaultModal, ModalEvents } from './global/modal'; -import swal from './global/sweet-alert'; +import { defaultModal, showAlertModal, ModalEvents } from './global/modal'; import CartItemDetails from './common/cart-item-details'; export default class Cart extends PageManager { @@ -45,15 +44,9 @@ export default class Cart extends PageManager { const newQty = $target.data('action') === 'inc' ? oldQty + 1 : oldQty - 1; // Does not quality for min/max quantity if (newQty < minQty) { - return swal.fire({ - text: minError, - icon: 'error', - }); + return showAlertModal(minError); } else if (maxQty > 0 && newQty > maxQty) { - return swal.fire({ - text: maxError, - icon: 'error', - }); + return showAlertModal(maxError); } this.$overlay.show(); @@ -68,10 +61,9 @@ export default class Cart extends PageManager { this.refreshContent(remove); } else { $el.val(oldQty); - swal.fire({ - text: response.data.errors.join('\n'), - icon: 'error', - }); + + const text = response.data.errors.join('\n'); + showAlertModal(text); } }); } @@ -91,22 +83,15 @@ export default class Cart extends PageManager { if (!newQty) { invalidEntry = $el.val(); $el.val(oldQty); - return swal.fire({ - text: this.context.invalidEntryMessage.replace('[ENTRY]', invalidEntry), - icon: 'error', - }); + + const text = this.context.invalidEntryMessage.replace('[ENTRY]', invalidEntry); + return showAlertModal(text); } else if (newQty < minQty) { $el.val(oldQty); - return swal.fire({ - text: minError, - icon: 'error', - }); + return showAlertModal(minError); } else if (maxQty > 0 && newQty > maxQty) { $el.val(oldQty); - return swal.fire({ - text: maxError, - icon: 'error', - }); + return showAlertModal(maxError); } this.$overlay.show(); @@ -120,10 +105,9 @@ export default class Cart extends PageManager { this.refreshContent(remove); } else { $el.val(oldQty); - swal.fire({ - text: response.data.errors.join('\n'), - icon: 'error', - }); + + const text = response.data.errors.join('\n'); + return showAlertModal(text); } }); } @@ -134,10 +118,8 @@ export default class Cart extends PageManager { if (response.data.status === 'succeed') { this.refreshContent(true); } else { - swal.fire({ - text: response.data.errors.join('\n'), - icon: 'error', - }); + const text = response.data.errors.join('\n'); + showAlertModal(text); } }); } @@ -188,10 +170,7 @@ export default class Cart extends PageManager { const data = result.data || {}; if (err) { - swal.fire({ - text: err, - icon: 'error', - }); + showAlertModal(err); return false; } @@ -284,16 +263,13 @@ export default class Cart extends PageManager { $('.cart-remove', this.$cartContent).on('click', event => { const itemId = $(event.currentTarget).data('cartItemid'); const string = $(event.currentTarget).data('confirmDelete'); - swal.fire({ - text: string, + showAlertModal(string, { icon: 'warning', showCancelButton: true, - cancelButtonText: this.context.cancelButtonText, - }).then((result) => { - if (result.value) { + onConfirm: () => { // remove item from cart cartRemoveItem(itemId); - } + }, }); event.preventDefault(); }); @@ -336,20 +312,16 @@ export default class Cart extends PageManager { // Empty code if (!code) { - return swal.fire({ - text: $codeInput.data('error'), - icon: 'error', - }); + const text = $codeInput.data('error'); + return showAlertModal(text); } utils.api.cart.applyCode(code, (err, response) => { if (response.data.status === 'success') { this.refreshContent(); } else { - swal.fire({ - html: response.data.errors.join('\n'), - icon: 'error', - }); + const text = response.data.errors.join('\n'); + showAlertModal(text); } }); }); @@ -381,20 +353,16 @@ export default class Cart extends PageManager { if (!checkIsGiftCertValid(code)) { const validationDictionary = createTranslationDictionary(this.context); - return swal.fire({ - text: validationDictionary.invalid_gift_certificate, - icon: 'error', - }); + const text = validationDictionary.invalid_gift_certificate; + return showAlertModal(text); } utils.api.cart.applyGiftCertificate(code, (err, resp) => { if (resp.data.status === 'success') { this.refreshContent(); } else { - swal.fire({ - html: resp.data.errors.join('\n'), - icon: 'error', - }); + const text = resp.data.errors.join('\n'); + showAlertModal(text); } }); }); diff --git a/assets/js/theme/cart/shipping-estimator.js b/assets/js/theme/cart/shipping-estimator.js index b5ff4d4d5d..47fe2d35e8 100644 --- a/assets/js/theme/cart/shipping-estimator.js +++ b/assets/js/theme/cart/shipping-estimator.js @@ -3,7 +3,7 @@ import nod from '../common/nod'; import utils from '@bigcommerce/stencil-utils'; import { Validators, announceInputErrorMessage } from '../common/utils/form-utils'; import collapsibleFactory from '../common/collapsible'; -import swal from '../global/sweet-alert'; +import { showAlertModal } from '../global/modal'; export default class ShippingEstimator { constructor($element, shippingErrorMessages) { @@ -114,11 +114,7 @@ export default class ShippingEstimator { // Requests the states for a country with AJAX stateCountry(this.$state, this.context, { useIdForStates: true }, (err, field) => { if (err) { - swal.fire({ - text: err, - icon: 'error', - }); - + showAlertModal(err); throw new Error(err); } diff --git a/assets/js/theme/global/currency-selector.js b/assets/js/theme/global/currency-selector.js index 9393ce49c4..44c93e651a 100644 --- a/assets/js/theme/global/currency-selector.js +++ b/assets/js/theme/global/currency-selector.js @@ -1,4 +1,4 @@ -import swal from './sweet-alert'; +import { showAlertModal } from './modal'; import utils from '@bigcommerce/stencil-utils'; export default function (cartId) { @@ -11,11 +11,8 @@ export default function (cartId) { }).done(() => { window.location.reload(); }).fail((e) => { - swal.fire({ - text: JSON.parse(e.responseText).error, - icon: 'warning', - showCancelButton: true, - }); + const text = JSON.parse(e.responseText).error; + showAlertModal(text); }); } @@ -36,14 +33,13 @@ export default function (cartId) { response.lineItems.giftCertificates.length > 0; if (showWarning) { - swal.fire({ - text: $(event.target).data('warning'), + const text = $(event.target).data('warning'); + showAlertModal(text, { icon: 'warning', showCancelButton: true, - }).then(result => { - if (result.value && result.value === true) { + onConfirm: () => { changeCurrency($(event.target).data('cart-currency-switch-url'), $(event.target).data('currency-code')); - } + }, }); } else { changeCurrency($(event.target).data('cart-currency-switch-url'), $(event.target).data('currency-code')); diff --git a/assets/js/theme/global/modal.js b/assets/js/theme/global/modal.js index b3ae7adf55..784da2b349 100644 --- a/assets/js/theme/global/modal.js +++ b/assets/js/theme/global/modal.js @@ -296,8 +296,29 @@ export function alertModal() { /* * Display the given message in the default alert modal */ -export function showAlertModal(message) { +export function showAlertModal(message, options = {}) { const modal = alertModal(); + const cancelBtn = modal.$modal.find('.cancel'); + const { icon, showCancelButton, onConfirm } = options; + modal.open(); + modal.$modal.find('.alert-icon').hide(); + + if (icon === 'warning') { + modal.$modal.find('.warning-icon').show(); + } else { + modal.$modal.find('.error-icon').show(); + } + modal.updateContent(`${message}`); + + if (onConfirm) { + modal.$modal.find('.confirm').on('click', onConfirm); + } + + if (showCancelButton) { + cancelBtn.show(); + } else { + cancelBtn.hide(); + } } diff --git a/assets/js/theme/global/sweet-alert.js b/assets/js/theme/global/sweet-alert.js deleted file mode 100644 index 2c199e0d79..0000000000 --- a/assets/js/theme/global/sweet-alert.js +++ /dev/null @@ -1,16 +0,0 @@ -import sweetAlert from 'sweetalert2'; - -// WeakMap will defined in the global scope if native WeakMap is not supported. -const weakMap = new WeakMap(); // eslint-disable-line no-unused-vars - -// Set defaults for sweetalert2 popup boxes -const Swal = sweetAlert.mixin({ - buttonsStyling: false, - customClass: { - confirmButton: 'button', - cancelButton: 'button', - }, -}); - -// Re-export -export default Swal; diff --git a/assets/scss/components/_components.scss b/assets/scss/components/_components.scss index 96d4258c57..11f009d721 100644 --- a/assets/scss/components/_components.scss +++ b/assets/scss/components/_components.scss @@ -12,9 +12,6 @@ // Nanobar Ajax loading progress bar @import "vendor/nanobar/component"; -// SweetAlert2 replacement for JavaScript alert/confirmations -@import "vendor/sweetalert2/component"; - // Foundation components // ----------------------------------------------------------------------------- diff --git a/assets/scss/components/foundation/modal/_modal.scss b/assets/scss/components/foundation/modal/_modal.scss index 1cc31a46f7..68ce5327a7 100644 --- a/assets/scss/components/foundation/modal/_modal.scss +++ b/assets/scss/components/foundation/modal/_modal.scss @@ -86,6 +86,67 @@ padding: 40px 20px 20px; text-align: center; + .alert-icon { + border: 0.25em solid transparent; + border-radius: 50%; + box-sizing: content-box; + cursor: default; + display: flex; + font-family: inherit; + height: 5em; + justify-content: center; + line-height: 5em; + margin: 1.25em auto 1.875em; + position: relative; + user-select: none; + width: 5em; + } + + .error-icon { + animation: animate-icon 0.5s; + border-color: #f27474; + color: #f27474; + + .icon-content { + animation: animate-icon-content 0.5s; + flex-grow: 1; + position: relative; + + .line { + background-color: #f27474; + border-radius: 0.125em; + display: block; + height: 0.3125em; + position: absolute; + top: 2.3125em; + width: 2.9375em; + + &-left { + left: 1.0625em; + transform: rotate(45deg); + } + + &-right { + right: 1em; + transform: rotate(-45deg); + } + } + } + } + + .warning-icon { + animation: animate-icon 0.5s; + border-color: #facea8; + color: #f8bb86; + + .icon-content { + align-items: center; + animation: animate-icon-content 0.5s; + display: flex; + font-size: 3.75em; + } + } + .modal-content { color: $alert-font-bodyColor; font-size: $alert-font-bodySize; @@ -118,3 +179,41 @@ .hide-content { opacity: 0; } + +//Icon animations +@keyframes animate-icon { + 0% { + opacity: 0; + transform: rotateX(100deg); + } + + 100% { + opacity: 1; + transform: rotateX(0deg); + } +} + +@keyframes animate-icon-content { + 0% { + margin-top: 1.625em; + opacity: 0; + transform: scale(0.4); + } + + 50% { + margin-top: 1.625em; + opacity: 0; + transform: scale(0.4); + } + + 80% { + margin-top: -0.375em; + transform: scale(1.15); + } + + 100% { + margin-top: 0; + opacity: 1; + transform: scale(1); + } +} diff --git a/assets/scss/components/vendor/sweetalert2/_component.scss b/assets/scss/components/vendor/sweetalert2/_component.scss deleted file mode 100644 index 4d7d1e0636..0000000000 --- a/assets/scss/components/vendor/sweetalert2/_component.scss +++ /dev/null @@ -1,9 +0,0 @@ -// ============================================================================= -// SWEETALERT2 -// ============================================================================= - -// Vendor SCSS -@import "../../../../../node_modules/sweetalert2/src/sweetalert2"; - -// Compnent -@import "sweetalert2"; diff --git a/assets/scss/components/vendor/sweetalert2/_sweetalert2.scss b/assets/scss/components/vendor/sweetalert2/_sweetalert2.scss deleted file mode 100644 index 726de9ad11..0000000000 --- a/assets/scss/components/vendor/sweetalert2/_sweetalert2.scss +++ /dev/null @@ -1,108 +0,0 @@ -// SWEETALERT2 -// ----------------------------------------------------------------------------- -// -// Purpose: Styles for the vendor popup box replacement, SweetAlert2 -// -// ----------------------------------------------------------------------------- -// -// Purpose: Override the plugin to give some Stencil styling -// -// ----------------------------------------------------------------------------- - -.swal2-modal { - background-color: $alert-modal-bgColor; - border-radius: $alert-modal-borderRadius; - font-family: $alert-font-body; - - .swal2-title { - color: $alert-font-headingsColor; - font-size: $alert-font-headingsSize; - } - - .swal2-content { - color: $alert-font-bodyColor; - font-size: $alert-font-bodySize; - } - - .swal2-file, - .swal2-input, - .swal2-textarea { - border: 1px solid $alert-input-borderColor; - color: $alert-input-color; - } - - .swal2-checkbox, - .swal2-select { - color: $alert-input-color; - } - - .swal2-buttonswrapper { - margin: $alert-button-wrapperMargin; - } - - .swal2-styled { - @include button-base; - @include buttonVariant("default"); - @include buttonSize("default"); - border-radius: $button-radius; - line-height: 1rem; - outline: none; - transition: all 0.15s ease; - vertical-align: $button-vAlign; - } - - .swal2-styled:focus { - box-shadow: $button-focus-boxShadow; - outline: none; - } - - .swal2-confirm { - background-color: $alert-button-bgColor; - border-color: $alert-button-borderColor; - color: $alert-button-color; - } - - .swal2-confirm:focus, - .swal2-confirm:hover { - background-color: $alert-button-bgColorHover; - border-color: $alert-button-borderColorHover; - color: $alert-button-colorHover; - } - - .swal2-confirm:active { - background-color: $alert-button-bgColorActive; - border-color: $alert-button-borderColorActive; - color: $alert-button-colorActive; - } - - .swal2-cancel { - background-color: $alert-button-cancel-bgColor; - border-color: $alert-button-cancel-borderColor; - color: $alert-button-cancel-color; - } - - .swal2-cancel:focus, - .swal2-cancel:hover { - background-color: $alert-button-cancel-bgColorHover; - border-color: $alert-button-cancel-borderColorHover; - color: $alert-button-cancel-colorHover; - } - - .swal2-cancel:active { - background-color: $alert-button-cancel-bgColorActive; - border-color: $alert-button-cancel-borderColorActive; - color: $alert-button-cancel-colorActive; - } - - .button + .button { - margin-left: $button-adjacentButton-marginLeft; - } -} - -.swal2-icon { - display: flex; -} - -.swal2-container { - z-index: 1000; // should be less then foundation modal -} diff --git a/jest.config.js b/jest.config.js index f62d73ce64..b04ca51ee1 100644 --- a/jest.config.js +++ b/jest.config.js @@ -87,7 +87,6 @@ module.exports = { nanobar: path.resolve(__dirname, 'node_modules/nanobar/nanobar.min.js'), 'slick-carousel': path.resolve(__dirname, 'node_modules/slick-carousel/slick/slick.min.js'), 'svg-injector': path.resolve(__dirname, 'node_modules/svg-injector/dist/svg-injector.min.js'), - sweetalert2: path.resolve(__dirname, 'node_modules/sweetalert2/dist/sweetalert2.min.js'), }, // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader diff --git a/package-lock.json b/package-lock.json index cc007ba9c5..06e970de08 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20031,11 +20031,6 @@ "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=", "dev": true }, - "sweetalert2": { - "version": "9.17.2", - "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-9.17.2.tgz", - "integrity": "sha512-HkpPZVMYsnhFUBLdy/LvkU9snggKP3VAuSVnPhVXjxdg02lWbFx0W8H3m7A+WMWw2diXZS1wIa4m67XkNxdvew==" - }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", diff --git a/package.json b/package.json index cb01467325..402577ede9 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,6 @@ "regenerator-runtime": "^0.13.7", "slick-carousel": "^1.8.1", "svg-injector": "^1.1.3", - "sweetalert2": "^9.17.2", "webfontloader": "^1.6.28", "whatwg-fetch": "^3.6.1" }, diff --git a/templates/components/common/alert/alert-modal.html b/templates/components/common/alert/alert-modal.html index 5431c0139d..85e160cfd2 100644 --- a/templates/components/common/alert/alert-modal.html +++ b/templates/components/common/alert/alert-modal.html @@ -1,7 +1,19 @@
-
+
+ + + + +
+ +
+
!
+
-
+
+ + +
diff --git a/templates/components/common/currency-selector.html b/templates/components/common/currency-selector.html index 71a7874613..c18211562f 100644 --- a/templates/components/common/currency-selector.html +++ b/templates/components/common/currency-selector.html @@ -16,8 +16,8 @@