From ce65c63c90005a4c9e9124beecfe3c6298440893 Mon Sep 17 00:00:00 2001
From: Rajendra Wagle <raajen73@gmail.com>
Date: Thu, 7 Oct 2021 08:34:57 +0545
Subject: [PATCH 1/3] Modified shared presets to match requirements of snapshot
 plugin

---
 .../shared-presets/dist/shared-presets.cjs.js | 143 +++++++++++++-----
 .../shared-presets/dist/shared-presets.esm.js | 143 +++++++++++++-----
 .../lib/components/apply-modal.js             |  63 +++++++-
 .../shared-presets/lib/requests-handler.js    |   8 +
 packages/shared-presets/lib/shared-presets.js |  25 +--
 5 files changed, 291 insertions(+), 91 deletions(-)

diff --git a/packages/shared-presets/dist/shared-presets.cjs.js b/packages/shared-presets/dist/shared-presets.cjs.js
index 436b91dd..1ae358ef 100644
--- a/packages/shared-presets/dist/shared-presets.cjs.js
+++ b/packages/shared-presets/dist/shared-presets.cjs.js
@@ -1490,23 +1490,66 @@ var ApplyModal = function ApplyModal(_ref) {
       config = _ref.config,
       save = _ref.save,
       _ref$strings = _ref.strings,
-      strings = _ref$strings === void 0 ? {} : _ref$strings;
+      strings = _ref$strings === void 0 ? {} : _ref$strings,
+      _ref$callback = _ref.callback,
+      callback = _ref$callback === void 0 ? null : _ref$callback;
   var _strings$closeIcon = strings.closeIcon,
       closeIcon = _strings$closeIcon === void 0 ? 'Close this dialog window' : _strings$closeIcon,
       _strings$title = strings.title,
       title = _strings$title === void 0 ? 'Apply Config' : _strings$title,
       _strings$description = strings.description,
       description = _strings$description === void 0 ? 'Are you sure you want to apply the {configName} config to this site? We recommend you have a backup available as your existing settings configuration will be overridden.' : _strings$description,
+      _strings$notice = strings.notice,
+      notice = _strings$notice === void 0 ? 'The storage region in the selected config doesn\'t match the storage region in your current settings. All existing backups will be deleted after applying this config.' : _strings$notice,
       _strings$cancelButton = strings.cancelButton,
       cancelButton = _strings$cancelButton === void 0 ? 'Cancel' : _strings$cancelButton,
       _strings$actionButton = strings.actionButton,
       actionButton = _strings$actionButton === void 0 ? 'Apply' : _strings$actionButton;
+  var extraClass = "sui-box";
+  var applyLoader = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "sui-icon-loader sui-loading",
+    "aria-hidden": "true"
+  }));
 
-  var _React$useState = React__default['default'].useState(false),
+  var _React$useState = React__default['default'].useState(true),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       isSaving = _React$useState2[0],
       setIsSaving = _React$useState2[1];
 
+  var _React$useState3 = React__default['default'].useState(extraClass),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      wrapper = _React$useState4[0],
+      setWrapper = _React$useState4[1];
+
+  var _React$useState5 = React__default['default'].useState(description),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      desc = _React$useState6[0],
+      setDesc = _React$useState6[1];
+
+  React__default['default'].useEffect(function () {
+    if (null !== callback) {
+      var className = extraClass;
+      var result = window[callback](config);
+      result.then(function (data) {
+        className += ' region-loaded ' + data.status;
+        setWrapper(className);
+        setIsSaving(false);
+
+        if ('description' in data) {
+          setDesc(data.description);
+        }
+      }).catch(function (err) {
+        className += ' region-loaded ' + err.status;
+        setWrapper(className);
+        setIsSaving(false);
+
+        if ('description' in err) {
+          setDesc(err.description);
+        }
+      });
+    }
+  }, []);
+
   var doAction = function doAction() {
     setIsSaving(true);
     save();
@@ -1514,7 +1557,7 @@ var ApplyModal = function ApplyModal(_ref) {
 
   var modalContent = function modalContent() {
     return /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "sui-box"
+      className: wrapper
     }, /*#__PURE__*/React__default['default'].createElement("div", {
       className: "sui-box-header sui-flatten sui-content-center sui-spacing-top--60"
     }, /*#__PURE__*/React__default['default'].createElement(ButtonIcon$1, {
@@ -1527,9 +1570,23 @@ var ApplyModal = function ApplyModal(_ref) {
       }
     }), /*#__PURE__*/React__default['default'].createElement("h2", {
       id: "sui-config-edit-title"
-    }, title), /*#__PURE__*/React__default['default'].createElement("p", {
-      className: "sui-description"
-    }, description.replace('{configName}', config.name))), /*#__PURE__*/React__default['default'].createElement("div", {
+    }, title), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "apply-loader"
+    }, applyLoader), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "region-match"
+    }, desc.replace('{configName}', config.name))), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "sui-box-body region-mismatch"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      id: "sui-apply-modal-warning",
+      className: "sui-notice sui-active sui-notice-warning"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "sui-notice-content"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "sui-notice-message"
+    }, /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "sui-notice-icon sui-icon-info sui-md",
+      "aria-hidden": "true"
+    }), /*#__PURE__*/React__default['default'].createElement("p", null, notice))))), /*#__PURE__*/React__default['default'].createElement("div", {
       className: "sui-box-footer sui-content-center sui-flatten sui-spacing-top--0 sui-spacing-bottom--60"
     }, /*#__PURE__*/React__default['default'].createElement(Button, {
       design: "ghost",
@@ -1542,7 +1599,8 @@ var ApplyModal = function ApplyModal(_ref) {
       icon: "check",
       label: actionButton,
       onClick: doAction,
-      loading: isSaving
+      loading: isSaving,
+      className: "sui-config-apply"
     })));
   };
 
@@ -2787,7 +2845,7 @@ var PresetsAccordionItem = /*#__PURE__*/function (_Component) {
         fill: "#286EFA",
         fillRule: "nonzero"
       }));
-      var name = this.props["default"] ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, this.props.name, icon) : this.props.name;
+      var name = this.props.default ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, this.props.name, icon) : this.props.name;
       var descstyles = {
         overflow: 'hidden',
         display: 'block',
@@ -2931,13 +2989,13 @@ var RequestHandler = /*#__PURE__*/function () {
             newConfig.hub_id = res.id;
             configs.push(newConfig);
             return _this.updateLocalConfigsList(configs);
-          })["catch"](function () {
+          }).catch(function () {
             // Update the local list even if the Hub request fails.
             configs.push(newConfig);
             return _this.updateLocalConfigsList(configs);
           }).then(function (updatedConfigs) {
             return resolve(updatedConfigs);
-          })["catch"](function (res) {
+          }).catch(function (res) {
             // There was an error saving the configs locally. Probably a schema mismatch.
             if (400 === res.status) {
               // Remove the recently submitted config from the hub.
@@ -2968,10 +3026,10 @@ var RequestHandler = /*#__PURE__*/function () {
       // Edit in the Hub when the config has a Hub ID and we have an API key.
       if (this.apiKey && currentConfig.hub_id) {
         var hubData = Object.assign({
-          "package": this.pluginData
+          package: this.pluginData
         }, configData); // This returns a 404 when the config doesn't exist in the Hub anymore.
 
-        this.makeHubRequest("/".concat(currentConfig.hub_id), 'PATCH', JSON.stringify(hubData))["catch"](function (res) {
+        this.makeHubRequest("/".concat(currentConfig.hub_id), 'PATCH', JSON.stringify(hubData)).catch(function (res) {
           return console.log(res);
         });
       }
@@ -3013,7 +3071,7 @@ var RequestHandler = /*#__PURE__*/function () {
     value: function deleteFromHub(configId) {
       // Try to delete it in the Hub only if we have an API key.
       if (this.apiKey) {
-        this.makeHubRequest("/".concat(configId), 'DELETE')["catch"](function (res) {
+        this.makeHubRequest("/".concat(configId), 'DELETE').catch(function (res) {
           return console.log(res);
         });
       }
@@ -3041,7 +3099,7 @@ var RequestHandler = /*#__PURE__*/function () {
           return _this2.updateLocalConfigsList(localConfigs);
         }).then(function (syncRes) {
           return resolve(syncRes);
-        })["catch"](function (res) {
+        }).catch(function (res) {
           return reject(res);
         });
       });
@@ -3080,7 +3138,7 @@ var RequestHandler = /*#__PURE__*/function () {
               localOne = _step$value[1];
 
           // Skip checks for the basic config.
-          if (localOne["default"]) {
+          if (localOne.default) {
             return "continue";
           } // Send to the Hub the configs that haven't been sent.
 
@@ -3166,7 +3224,7 @@ var RequestHandler = /*#__PURE__*/function () {
       var configData = {
         name: config.name,
         description: config.description,
-        "package": this.pluginData,
+        package: this.pluginData,
         config: JSON.stringify(config.config)
       };
       return this.makeHubRequest('', 'POST', JSON.stringify(configData));
@@ -3280,12 +3338,20 @@ var RequestHandler = /*#__PURE__*/function () {
   }, {
     key: "makeRequest",
     value: function makeRequest(url) {
+      var _this4 = this;
+
       var verb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'GET';
       var data = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
       var headers = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
       return new Promise(function (resolve, reject) {
         var xhr = new XMLHttpRequest();
         xhr.open(verb, url, true);
+        xhr.addEventListener('load', function () {
+          if ('ajax_callback' in _this4.pluginRequests) {
+            var fn = _this4.pluginRequests.ajax_callback;
+            window[fn](url, data, xhr);
+          }
+        });
 
         for (var header in headers) {
           xhr.setRequestHeader(header, headers[header]);
@@ -3381,7 +3447,7 @@ var Presets = function Presets(_ref) {
     apply: 'Apply',
     download: 'Download',
     edit: 'Name and Description',
-    "delete": 'Delete',
+    delete: 'Delete',
     freeNoticeMessage: 'Tired of saving, downloading and uploading your configs across your sites? WPMU DEV members use The Hub to easily apply configs to multiple sites at once… Try it free today!',
     freeButtonLabel: 'Try The Hub',
     notificationDismiss: 'Dismiss notice',
@@ -3406,7 +3472,7 @@ var Presets = function Presets(_ref) {
     setIsLoading(true);
     RequestsHandler.makeLocalRequest().then(function (newConfigs) {
       return setConfigs(newConfigs || []);
-    })["catch"](function (res) {
+    }).catch(function (res) {
       return requestFailureNotice(res);
     }).then(function () {
       return setIsLoading(false);
@@ -3443,15 +3509,15 @@ var Presets = function Presets(_ref) {
     }).then(function (updatedConfigs) {
       setConfigs(updatedConfigs);
       successNotice(lang.uploadActionSuccessMessage.replace('{configName}', newConfigName));
-    })["catch"](function (res) {
+    }).catch(function (res) {
       return requestFailureNotice(res);
     });
   };
 
   var handleDelete = function handleDelete() {
-    RequestsHandler["delete"](_toConsumableArray(configs), currentConfig).then(function (newConfigs) {
+    RequestsHandler.delete(_toConsumableArray(configs), currentConfig).then(function (newConfigs) {
       return setConfigs(newConfigs);
-    })["catch"](function (res) {
+    }).catch(function (res) {
       return requestFailureNotice(res);
     }).then(function () {
       return setIsDeleteOpen(false);
@@ -3467,7 +3533,7 @@ var Presets = function Presets(_ref) {
     if (currentConfig) {
       RequestsHandler.edit(_toConsumableArray(configs), currentConfig, configData).then(function (newConfigs) {
         return setConfigs(newConfigs);
-      })["catch"](function (res) {
+      }).catch(function (res) {
         return requestFailureNotice(res);
       }).then(function () {
         return setIsEditOpen(false);
@@ -3489,7 +3555,7 @@ var Presets = function Presets(_ref) {
       setConfigs(updatedConfigs);
       setIsEditOpen(false);
       successNotice(lang.editAction.successMessage.replace('{configName}', configData.name));
-    })["catch"](function (res) {
+    }).catch(function (res) {
       return requestFailureNotice(res);
     });
   };
@@ -3504,7 +3570,7 @@ var Presets = function Presets(_ref) {
       }
 
       successNotice(lang.applyAction.successMessage.replace('{configName}', currentConfig.name));
-    })["catch"](function (res) {
+    }).catch(function (res) {
       return requestFailureNotice(res);
     });
   };
@@ -3513,7 +3579,7 @@ var Presets = function Presets(_ref) {
     setIsLoading(true);
     RequestsHandler.syncWithHub(_toConsumableArray(configs)).then(function (newConfigs) {
       return setConfigs(newConfigs);
-    })["catch"](function (res) {
+    }).catch(function (res) {
       return requestFailureNotice(res);
     }).then(function () {
       return setIsLoading(false);
@@ -3534,7 +3600,7 @@ var Presets = function Presets(_ref) {
 
     delete config.hub_id; // Avoid having multiple defaults on upload.
 
-    delete config["default"];
+    delete config.default;
     var blob = new Blob([JSON.stringify(config, null, 2)], {
       type: 'application/json'
     });
@@ -3589,14 +3655,16 @@ var Presets = function Presets(_ref) {
       message = 'Error. Please check the browser console';
     }
 
-    window.SUI.openNotice('sui-configs-floating-notice', "<p>".concat(message, "</p>"), {
-      type: 'error',
-      icon: 'info',
-      dismiss: {
-        show: true,
-        label: lang.notificationDismiss
-      }
-    });
+    if (undefined !== message) {
+      window.SUI.openNotice('sui-configs-floating-notice', "<p>".concat(message, "</p>"), {
+        type: 'error',
+        icon: 'info',
+        dismiss: {
+          show: true,
+          label: lang.notificationDismiss
+        }
+      });
+    }
   }; // End of notifications.
 
 
@@ -3610,7 +3678,7 @@ var Presets = function Presets(_ref) {
     return /*#__PURE__*/React__default['default'].createElement(PresetsAccordionItem, {
       key: item.id,
       id: item.id,
-      "default": item["default"],
+      default: item.default,
       name: item.name,
       description: item.description,
       image: tableImage,
@@ -3627,7 +3695,7 @@ var Presets = function Presets(_ref) {
       editAction: function editAction() {
         return openModal('edit', item);
       },
-      deleteLabel: lang["delete"],
+      deleteLabel: lang.delete,
       deleteAction: function deleteAction() {
         return openModal('delete', item);
       }
@@ -3750,7 +3818,8 @@ var Presets = function Presets(_ref) {
     setOpen: setIsApplyOpen,
     config: currentConfig,
     save: handleApply,
-    strings: lang.applyAction
+    strings: lang.applyAction,
+    callback: requestsData.pluginRequests.callback
   }), isDeleteOpen && /*#__PURE__*/React__default['default'].createElement(DeleteModal, {
     setOpen: setIsDeleteOpen,
     config: currentConfig,
diff --git a/packages/shared-presets/dist/shared-presets.esm.js b/packages/shared-presets/dist/shared-presets.esm.js
index 056e3557..f4800070 100644
--- a/packages/shared-presets/dist/shared-presets.esm.js
+++ b/packages/shared-presets/dist/shared-presets.esm.js
@@ -1480,23 +1480,66 @@ var ApplyModal = function ApplyModal(_ref) {
       config = _ref.config,
       save = _ref.save,
       _ref$strings = _ref.strings,
-      strings = _ref$strings === void 0 ? {} : _ref$strings;
+      strings = _ref$strings === void 0 ? {} : _ref$strings,
+      _ref$callback = _ref.callback,
+      callback = _ref$callback === void 0 ? null : _ref$callback;
   var _strings$closeIcon = strings.closeIcon,
       closeIcon = _strings$closeIcon === void 0 ? 'Close this dialog window' : _strings$closeIcon,
       _strings$title = strings.title,
       title = _strings$title === void 0 ? 'Apply Config' : _strings$title,
       _strings$description = strings.description,
       description = _strings$description === void 0 ? 'Are you sure you want to apply the {configName} config to this site? We recommend you have a backup available as your existing settings configuration will be overridden.' : _strings$description,
+      _strings$notice = strings.notice,
+      notice = _strings$notice === void 0 ? 'The storage region in the selected config doesn\'t match the storage region in your current settings. All existing backups will be deleted after applying this config.' : _strings$notice,
       _strings$cancelButton = strings.cancelButton,
       cancelButton = _strings$cancelButton === void 0 ? 'Cancel' : _strings$cancelButton,
       _strings$actionButton = strings.actionButton,
       actionButton = _strings$actionButton === void 0 ? 'Apply' : _strings$actionButton;
+  var extraClass = "sui-box";
+  var applyLoader = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: "sui-icon-loader sui-loading",
+    "aria-hidden": "true"
+  }));
 
-  var _React$useState = React.useState(false),
+  var _React$useState = React.useState(true),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       isSaving = _React$useState2[0],
       setIsSaving = _React$useState2[1];
 
+  var _React$useState3 = React.useState(extraClass),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      wrapper = _React$useState4[0],
+      setWrapper = _React$useState4[1];
+
+  var _React$useState5 = React.useState(description),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      desc = _React$useState6[0],
+      setDesc = _React$useState6[1];
+
+  React.useEffect(function () {
+    if (null !== callback) {
+      var className = extraClass;
+      var result = window[callback](config);
+      result.then(function (data) {
+        className += ' region-loaded ' + data.status;
+        setWrapper(className);
+        setIsSaving(false);
+
+        if ('description' in data) {
+          setDesc(data.description);
+        }
+      }).catch(function (err) {
+        className += ' region-loaded ' + err.status;
+        setWrapper(className);
+        setIsSaving(false);
+
+        if ('description' in err) {
+          setDesc(err.description);
+        }
+      });
+    }
+  }, []);
+
   var doAction = function doAction() {
     setIsSaving(true);
     save();
@@ -1504,7 +1547,7 @@ var ApplyModal = function ApplyModal(_ref) {
 
   var modalContent = function modalContent() {
     return /*#__PURE__*/React.createElement("div", {
-      className: "sui-box"
+      className: wrapper
     }, /*#__PURE__*/React.createElement("div", {
       className: "sui-box-header sui-flatten sui-content-center sui-spacing-top--60"
     }, /*#__PURE__*/React.createElement(ButtonIcon$1, {
@@ -1517,9 +1560,23 @@ var ApplyModal = function ApplyModal(_ref) {
       }
     }), /*#__PURE__*/React.createElement("h2", {
       id: "sui-config-edit-title"
-    }, title), /*#__PURE__*/React.createElement("p", {
-      className: "sui-description"
-    }, description.replace('{configName}', config.name))), /*#__PURE__*/React.createElement("div", {
+    }, title), /*#__PURE__*/React.createElement("div", {
+      className: "apply-loader"
+    }, applyLoader), /*#__PURE__*/React.createElement("div", {
+      className: "region-match"
+    }, desc.replace('{configName}', config.name))), /*#__PURE__*/React.createElement("div", {
+      className: "sui-box-body region-mismatch"
+    }, /*#__PURE__*/React.createElement("div", {
+      id: "sui-apply-modal-warning",
+      className: "sui-notice sui-active sui-notice-warning"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "sui-notice-content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "sui-notice-message"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "sui-notice-icon sui-icon-info sui-md",
+      "aria-hidden": "true"
+    }), /*#__PURE__*/React.createElement("p", null, notice))))), /*#__PURE__*/React.createElement("div", {
       className: "sui-box-footer sui-content-center sui-flatten sui-spacing-top--0 sui-spacing-bottom--60"
     }, /*#__PURE__*/React.createElement(Button, {
       design: "ghost",
@@ -1532,7 +1589,8 @@ var ApplyModal = function ApplyModal(_ref) {
       icon: "check",
       label: actionButton,
       onClick: doAction,
-      loading: isSaving
+      loading: isSaving,
+      className: "sui-config-apply"
     })));
   };
 
@@ -2777,7 +2835,7 @@ var PresetsAccordionItem = /*#__PURE__*/function (_Component) {
         fill: "#286EFA",
         fillRule: "nonzero"
       }));
-      var name = this.props["default"] ? /*#__PURE__*/React.createElement(React.Fragment, null, this.props.name, icon) : this.props.name;
+      var name = this.props.default ? /*#__PURE__*/React.createElement(React.Fragment, null, this.props.name, icon) : this.props.name;
       var descstyles = {
         overflow: 'hidden',
         display: 'block',
@@ -2921,13 +2979,13 @@ var RequestHandler = /*#__PURE__*/function () {
             newConfig.hub_id = res.id;
             configs.push(newConfig);
             return _this.updateLocalConfigsList(configs);
-          })["catch"](function () {
+          }).catch(function () {
             // Update the local list even if the Hub request fails.
             configs.push(newConfig);
             return _this.updateLocalConfigsList(configs);
           }).then(function (updatedConfigs) {
             return resolve(updatedConfigs);
-          })["catch"](function (res) {
+          }).catch(function (res) {
             // There was an error saving the configs locally. Probably a schema mismatch.
             if (400 === res.status) {
               // Remove the recently submitted config from the hub.
@@ -2958,10 +3016,10 @@ var RequestHandler = /*#__PURE__*/function () {
       // Edit in the Hub when the config has a Hub ID and we have an API key.
       if (this.apiKey && currentConfig.hub_id) {
         var hubData = Object.assign({
-          "package": this.pluginData
+          package: this.pluginData
         }, configData); // This returns a 404 when the config doesn't exist in the Hub anymore.
 
-        this.makeHubRequest("/".concat(currentConfig.hub_id), 'PATCH', JSON.stringify(hubData))["catch"](function (res) {
+        this.makeHubRequest("/".concat(currentConfig.hub_id), 'PATCH', JSON.stringify(hubData)).catch(function (res) {
           return console.log(res);
         });
       }
@@ -3003,7 +3061,7 @@ var RequestHandler = /*#__PURE__*/function () {
     value: function deleteFromHub(configId) {
       // Try to delete it in the Hub only if we have an API key.
       if (this.apiKey) {
-        this.makeHubRequest("/".concat(configId), 'DELETE')["catch"](function (res) {
+        this.makeHubRequest("/".concat(configId), 'DELETE').catch(function (res) {
           return console.log(res);
         });
       }
@@ -3031,7 +3089,7 @@ var RequestHandler = /*#__PURE__*/function () {
           return _this2.updateLocalConfigsList(localConfigs);
         }).then(function (syncRes) {
           return resolve(syncRes);
-        })["catch"](function (res) {
+        }).catch(function (res) {
           return reject(res);
         });
       });
@@ -3070,7 +3128,7 @@ var RequestHandler = /*#__PURE__*/function () {
               localOne = _step$value[1];
 
           // Skip checks for the basic config.
-          if (localOne["default"]) {
+          if (localOne.default) {
             return "continue";
           } // Send to the Hub the configs that haven't been sent.
 
@@ -3156,7 +3214,7 @@ var RequestHandler = /*#__PURE__*/function () {
       var configData = {
         name: config.name,
         description: config.description,
-        "package": this.pluginData,
+        package: this.pluginData,
         config: JSON.stringify(config.config)
       };
       return this.makeHubRequest('', 'POST', JSON.stringify(configData));
@@ -3270,12 +3328,20 @@ var RequestHandler = /*#__PURE__*/function () {
   }, {
     key: "makeRequest",
     value: function makeRequest(url) {
+      var _this4 = this;
+
       var verb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'GET';
       var data = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
       var headers = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
       return new Promise(function (resolve, reject) {
         var xhr = new XMLHttpRequest();
         xhr.open(verb, url, true);
+        xhr.addEventListener('load', function () {
+          if ('ajax_callback' in _this4.pluginRequests) {
+            var fn = _this4.pluginRequests.ajax_callback;
+            window[fn](url, data, xhr);
+          }
+        });
 
         for (var header in headers) {
           xhr.setRequestHeader(header, headers[header]);
@@ -3371,7 +3437,7 @@ var Presets = function Presets(_ref) {
     apply: 'Apply',
     download: 'Download',
     edit: 'Name and Description',
-    "delete": 'Delete',
+    delete: 'Delete',
     freeNoticeMessage: 'Tired of saving, downloading and uploading your configs across your sites? WPMU DEV members use The Hub to easily apply configs to multiple sites at once… Try it free today!',
     freeButtonLabel: 'Try The Hub',
     notificationDismiss: 'Dismiss notice',
@@ -3396,7 +3462,7 @@ var Presets = function Presets(_ref) {
     setIsLoading(true);
     RequestsHandler.makeLocalRequest().then(function (newConfigs) {
       return setConfigs(newConfigs || []);
-    })["catch"](function (res) {
+    }).catch(function (res) {
       return requestFailureNotice(res);
     }).then(function () {
       return setIsLoading(false);
@@ -3433,15 +3499,15 @@ var Presets = function Presets(_ref) {
     }).then(function (updatedConfigs) {
       setConfigs(updatedConfigs);
       successNotice(lang.uploadActionSuccessMessage.replace('{configName}', newConfigName));
-    })["catch"](function (res) {
+    }).catch(function (res) {
       return requestFailureNotice(res);
     });
   };
 
   var handleDelete = function handleDelete() {
-    RequestsHandler["delete"](_toConsumableArray(configs), currentConfig).then(function (newConfigs) {
+    RequestsHandler.delete(_toConsumableArray(configs), currentConfig).then(function (newConfigs) {
       return setConfigs(newConfigs);
-    })["catch"](function (res) {
+    }).catch(function (res) {
       return requestFailureNotice(res);
     }).then(function () {
       return setIsDeleteOpen(false);
@@ -3457,7 +3523,7 @@ var Presets = function Presets(_ref) {
     if (currentConfig) {
       RequestsHandler.edit(_toConsumableArray(configs), currentConfig, configData).then(function (newConfigs) {
         return setConfigs(newConfigs);
-      })["catch"](function (res) {
+      }).catch(function (res) {
         return requestFailureNotice(res);
       }).then(function () {
         return setIsEditOpen(false);
@@ -3479,7 +3545,7 @@ var Presets = function Presets(_ref) {
       setConfigs(updatedConfigs);
       setIsEditOpen(false);
       successNotice(lang.editAction.successMessage.replace('{configName}', configData.name));
-    })["catch"](function (res) {
+    }).catch(function (res) {
       return requestFailureNotice(res);
     });
   };
@@ -3494,7 +3560,7 @@ var Presets = function Presets(_ref) {
       }
 
       successNotice(lang.applyAction.successMessage.replace('{configName}', currentConfig.name));
-    })["catch"](function (res) {
+    }).catch(function (res) {
       return requestFailureNotice(res);
     });
   };
@@ -3503,7 +3569,7 @@ var Presets = function Presets(_ref) {
     setIsLoading(true);
     RequestsHandler.syncWithHub(_toConsumableArray(configs)).then(function (newConfigs) {
       return setConfigs(newConfigs);
-    })["catch"](function (res) {
+    }).catch(function (res) {
       return requestFailureNotice(res);
     }).then(function () {
       return setIsLoading(false);
@@ -3524,7 +3590,7 @@ var Presets = function Presets(_ref) {
 
     delete config.hub_id; // Avoid having multiple defaults on upload.
 
-    delete config["default"];
+    delete config.default;
     var blob = new Blob([JSON.stringify(config, null, 2)], {
       type: 'application/json'
     });
@@ -3579,14 +3645,16 @@ var Presets = function Presets(_ref) {
       message = 'Error. Please check the browser console';
     }
 
-    window.SUI.openNotice('sui-configs-floating-notice', "<p>".concat(message, "</p>"), {
-      type: 'error',
-      icon: 'info',
-      dismiss: {
-        show: true,
-        label: lang.notificationDismiss
-      }
-    });
+    if (undefined !== message) {
+      window.SUI.openNotice('sui-configs-floating-notice', "<p>".concat(message, "</p>"), {
+        type: 'error',
+        icon: 'info',
+        dismiss: {
+          show: true,
+          label: lang.notificationDismiss
+        }
+      });
+    }
   }; // End of notifications.
 
 
@@ -3600,7 +3668,7 @@ var Presets = function Presets(_ref) {
     return /*#__PURE__*/React.createElement(PresetsAccordionItem, {
       key: item.id,
       id: item.id,
-      "default": item["default"],
+      default: item.default,
       name: item.name,
       description: item.description,
       image: tableImage,
@@ -3617,7 +3685,7 @@ var Presets = function Presets(_ref) {
       editAction: function editAction() {
         return openModal('edit', item);
       },
-      deleteLabel: lang["delete"],
+      deleteLabel: lang.delete,
       deleteAction: function deleteAction() {
         return openModal('delete', item);
       }
@@ -3740,7 +3808,8 @@ var Presets = function Presets(_ref) {
     setOpen: setIsApplyOpen,
     config: currentConfig,
     save: handleApply,
-    strings: lang.applyAction
+    strings: lang.applyAction,
+    callback: requestsData.pluginRequests.callback
   }), isDeleteOpen && /*#__PURE__*/React.createElement(DeleteModal, {
     setOpen: setIsDeleteOpen,
     config: currentConfig,
diff --git a/packages/shared-presets/lib/components/apply-modal.js b/packages/shared-presets/lib/components/apply-modal.js
index a91d8e55..f02c8bc1 100644
--- a/packages/shared-presets/lib/components/apply-modal.js
+++ b/packages/shared-presets/lib/components/apply-modal.js
@@ -10,16 +10,51 @@ import { Modal } from '@wpmudev/react-modal';
 import { ButtonIcon } from '@wpmudev/react-button-icon';
 import { Button } from '@wpmudev/react-button';
 
-const ApplyModal = ({ setOpen, config, save, strings = {} }) => {
+const ApplyModal = ({ setOpen, config, save, strings = {}, callback = null }) => {
 	const {
 		closeIcon = 'Close this dialog window',
 		title = 'Apply Config',
 		description = 'Are you sure you want to apply the {configName} config to this site? We recommend you have a backup available as your existing settings configuration will be overridden.',
+		notice = 'The storage region in the selected config doesn\'t match the storage region in your current settings. All existing backups will be deleted after applying this config.',
 		cancelButton = 'Cancel',
 		actionButton = 'Apply',
 	} = strings;
 
-	const [ isSaving, setIsSaving ] = React.useState( false );
+	let extraClass = "sui-box";
+
+	const applyLoader = (
+		<React.Fragment>
+			<span className="sui-icon-loader sui-loading" aria-hidden="true"></span>
+		</React.Fragment>
+	);
+
+	const [ isSaving, setIsSaving ] = React.useState( true );
+	const [ wrapper, setWrapper] = React.useState(extraClass);
+	const [ desc, setDesc ] = React.useState(description);
+
+	React.useEffect( () => {
+		if ( null !== callback ) {
+			let className = extraClass;
+			const result = window[callback](config);
+			result
+				.then(data => {
+					className += ' region-loaded ' + data.status;
+					setWrapper(className);
+					setIsSaving(false);
+					if ( 'description' in data ) {
+						setDesc(data.description);
+					}
+				})
+				.catch(err => {
+					className += ' region-loaded ' + err.status;
+					setWrapper(className);
+					setIsSaving(false);
+					if ( 'description' in err ) {
+						setDesc(err.description);
+					}
+				});
+		}
+	}, []);
 
 	const doAction = () => {
 		setIsSaving( true );
@@ -27,7 +62,7 @@ const ApplyModal = ({ setOpen, config, save, strings = {} }) => {
 	};
 
 	const modalContent = () => (
-		<div className="sui-box">
+		<div className={wrapper}>
 			<div className="sui-box-header sui-flatten sui-content-center sui-spacing-top--60">
 				<ButtonIcon
 					label={ closeIcon }
@@ -39,10 +74,25 @@ const ApplyModal = ({ setOpen, config, save, strings = {} }) => {
 				<h2 id="sui-config-edit-title">
 					{ title }
 				</h2>
-				<p className="sui-description">
-					{ description.replace( '{configName}', config.name) }
-				</p>
+
+				<div className="apply-loader">
+					{ applyLoader }
+				</div>
+				<div className="region-match">
+					{ desc.replace('{configName}', config.name) }
+				</div>
+			</div>
+			<div className="sui-box-body region-mismatch">
+				<div id="sui-apply-modal-warning" className="sui-notice sui-active sui-notice-warning">
+					<div className="sui-notice-content">
+						<div className="sui-notice-message">
+							<span className="sui-notice-icon sui-icon-info sui-md" aria-hidden="true"></span>
+							<p>{ notice }</p>
+						</div>
+					</div>
+				</div>
 			</div>
+
 			<div className="sui-box-footer sui-content-center sui-flatten sui-spacing-top--0 sui-spacing-bottom--60">
 				<Button
 					design="ghost"
@@ -55,6 +105,7 @@ const ApplyModal = ({ setOpen, config, save, strings = {} }) => {
 					label={ actionButton }
 					onClick={ doAction }
 					loading={ isSaving }
+					className="sui-config-apply"
 				/>
 			</div>
 		</div>
diff --git a/packages/shared-presets/lib/requests-handler.js b/packages/shared-presets/lib/requests-handler.js
index 4a55fb9f..951526b8 100644
--- a/packages/shared-presets/lib/requests-handler.js
+++ b/packages/shared-presets/lib/requests-handler.js
@@ -336,9 +336,17 @@ export default class RequestHandler {
 			const xhr = new XMLHttpRequest();
 			xhr.open( verb, url, true );
 
+			xhr.addEventListener( 'load', () => {
+				if ( 'ajax_callback' in this.pluginRequests ) {
+					const fn = this.pluginRequests.ajax_callback;
+					window[fn](url, data, xhr);
+				}
+			});
+
 			for ( const header in headers ) {
 				xhr.setRequestHeader( header, headers[ header ] );
 			}
+
 			xhr.onload = () => {
 				if ( xhr.status >= 200 && xhr.status < 300 ) {
 					resolve( JSON.parse( xhr.response ) );
diff --git a/packages/shared-presets/lib/shared-presets.js b/packages/shared-presets/lib/shared-presets.js
index 3f2e43c4..f70b4172 100644
--- a/packages/shared-presets/lib/shared-presets.js
+++ b/packages/shared-presets/lib/shared-presets.js
@@ -319,17 +319,19 @@ export const Presets = ( {
 			message = 'Error. Please check the browser console';
 		}
 
-		window.SUI.openNotice(
-			'sui-configs-floating-notice', `<p>${ message }</p>`,
-			{
-				type: 'error',
-				icon: 'info',
-				dismiss: {
-					show: true,
-					label: lang.notificationDismiss,
-				},
-			}
-		);
+		if ( undefined !== message ) {
+			window.SUI.openNotice(
+				'sui-configs-floating-notice', `<p>${ message }</p>`,
+				{
+					type: 'error',
+					icon: 'info',
+					dismiss: {
+						show: true,
+						label: lang.notificationDismiss
+					},
+				}
+			)
+		}
 	};
 	// End of notifications.
 
@@ -534,6 +536,7 @@ export const Presets = ( {
 					config={ currentConfig }
 					save={ handleApply }
 					strings={ lang.applyAction }
+					callback={ requestsData.pluginRequests.callback }
 				/>
 			) }
 			{ isDeleteOpen && (

From 050b135561a46eaa40bf991eb4a536587c26d1ac Mon Sep 17 00:00:00 2001
From: Rajendra Wagle <raajen73@gmail.com>
Date: Thu, 7 Oct 2021 08:55:55 +0545
Subject: [PATCH 2/3] Updated shared-presets to match the requirement of
 snapshot

---
 .../dist/shared-notifications.cjs.js          | 358 ++++++++---------
 .../dist/shared-notifications.esm.js          | 360 ++++++++----------
 2 files changed, 299 insertions(+), 419 deletions(-)

diff --git a/packages/shared-notifications/dist/shared-notifications.cjs.js b/packages/shared-notifications/dist/shared-notifications.cjs.js
index 0f6ecaa8..61abbd6c 100644
--- a/packages/shared-notifications/dist/shared-notifications.cjs.js
+++ b/packages/shared-notifications/dist/shared-notifications.cjs.js
@@ -10,59 +10,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
-}
-
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 function _extends() {
   _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -81,98 +28,113 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _inherits(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function");
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
   }
 
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) _setPrototypeOf(subClass, superClass);
+  return target;
 }
 
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
+  var target = _objectWithoutPropertiesLoose(source, excluded);
 
-  return _setPrototypeOf(o, p);
-}
+  var key, i;
 
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
 
-  try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
   }
+
+  return target;
 }
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+function _taggedTemplateLiteral(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
   }
 
-  return self;
+  return Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
+    }
+  }));
 }
 
-function _possibleConstructorReturn(self, call) {
-  if (call && (_typeof(call) === "object" || typeof call === "function")) {
-    return call;
-  }
-
-  return _assertThisInitialized(self);
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
 
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived),
-        result;
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
 
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
 
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
     }
+  }
 
-    return _possibleConstructorReturn(this, result);
-  };
+  return _arr;
 }
 
-function _taggedTemplateLiteral(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
   }
 
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
-    }
-  }));
+  return arr2;
 }
 
-function _defineProperty$1(obj, key, value) {
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -207,7 +169,7 @@ function _objectSpread2(target) {
 
     if (i % 2) {
       ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty$1(target, key, source[key]);
+        _defineProperty(target, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
@@ -221,7 +183,7 @@ function _objectSpread2(target) {
   return target;
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
+function _objectWithoutPropertiesLoose$1(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -236,10 +198,10 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-function _objectWithoutProperties(source, excluded) {
+function _objectWithoutProperties$1(source, excluded) {
   if (source == null) return {};
 
-  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var target = _objectWithoutPropertiesLoose$1(source, excluded);
 
   var key, i;
 
@@ -265,7 +227,7 @@ var Button = function Button(_ref) {
       color = _ref.color,
       className = _ref.className,
       loading = _ref.loading,
-      props = _objectWithoutProperties(_ref, ["label", "icon", "design", "color", "className", "loading"]);
+      props = _objectWithoutProperties$1(_ref, ["label", "icon", "design", "color", "className", "loading"]);
 
   var loader = /*#__PURE__*/React__default['default'].createElement("span", {
     className: "sui-icon-loader sui-loading",
@@ -356,93 +318,71 @@ var PriceWrapper = styled__default['default'].div(_templateObject9 || (_template
 var PriceLabel = styled__default['default'].h3(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\tcolor: #666 !important;\n\tfont-size: 12px !important;\n\tline-height: 16px !important;\n\tfont-weight: 400 !important;\n\tletter-spacing: -0.23px !important;\n\n\t@media ", " {\n\t\ttext-transform: uppercase;\n\t}\n"])), device.tablet);
 var Price = styled__default['default'].p(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\tmargin: 0 !important;\n\tcolor: #333 !important;\n\tfont-size: 15px !important;\n\tline-height: 40px !important;\n\tletter-spacing: -0.27px !important;\n\n\tspan {\n\t\tmargin-right: 6px;\n\t\tcolor: #FF6D6D;\n\t\tfont-size: 18px;\n\t\tfont-weight: bold;\n\t\ttext-decoration: line-through;\n\t\tletter-spacing: -0.32px;\n\t}\n\n\tstrong {\n\t\tfont-size: 28px;\n\t\tfont-weight: bold;\n\t\tletter-spacing: -0.5px;\n\t}\n"])));
 
-var NoticeDiscount = /*#__PURE__*/function (_Component) {
-  _inherits(NoticeDiscount, _Component);
-
-  var _super = _createSuper(NoticeDiscount);
-
-  function NoticeDiscount(props) {
-    var _this;
-
-    _classCallCheck(this, NoticeDiscount);
-
-    _this = _super.call(this, props); // Call functions.
-
-    _defineProperty(_assertThisInitialized(_this), "closeButtonClicked", function (e) {
-      _this.hideComponent(e);
-
-      _this.props.onCloseClick(e);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "hideComponent", function (e) {
-      var noticeBox = e.currentTarget.closest(".sui-notice-offer"),
-          event = new Event("noticeOfferClosed");
-      noticeBox.dispatchEvent(event);
-      noticeBox.remove();
-    });
-
-    _this.closeButtonClicked = _this.closeButtonClicked.bind(_assertThisInitialized(_this));
-    _this.hideComponent = _this.hideComponent.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(NoticeDiscount, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var title = this.props.title;
-      var price = this.props.price;
-      var discount = this.props.discount;
-      var image1x = this.props.image;
-      var image2x = this.props.imageRetina;
-      var disclaimer = this.props.disclaimer;
-      var buttonLabel = this.props.buttonLabel;
-      var buttonLink = this.props.buttonLink;
-      var calcPrice = price - discount / 100 * price;
-      var newPrice = calcPrice.toFixed(0);
-      var hasDiscount = null !== discount && "" !== discount && 0 !== discount || discount > 0;
-      var hasImage1x = null !== image1x && "" !== image1x;
-      var hasImage2x = null !== image2x && "" !== image2x;
-      var hasDisclaimer = null !== disclaimer && "" !== disclaimer;
-      var hasButtonLabel = null !== buttonLabel && '' !== buttonLabel;
-      var hasButtonLink = null !== buttonLink && '' !== buttonLink;
-      var hasButton = hasButtonLabel && hasButtonLink;
-      return /*#__PURE__*/React__default['default'].createElement(Wrapper, _extends({
-        className: "sui-notice-offer"
-      }, this.props), /*#__PURE__*/React__default['default'].createElement(Header, null, hasDiscount && /*#__PURE__*/React__default['default'].createElement(Ribbon, null, discount, "% Off"), null !== title && '' !== title && /*#__PURE__*/React__default['default'].createElement(Title, null, title), /*#__PURE__*/React__default['default'].createElement("button", {
-        className: "sui-button-icon sui-button-white",
-        onClick: function onClick(e) {
-          return _this2.closeButtonClicked(e);
-        }
-      }, /*#__PURE__*/React__default['default'].createElement("span", {
-        className: "sui-icon-close sui-sm",
-        "aria-hidden": "true"
-      }), /*#__PURE__*/React__default['default'].createElement("span", {
-        className: "sui-screen-reader-text"
-      }, "Close this offer"))), /*#__PURE__*/React__default['default'].createElement(Body, null, hasImage1x && !hasImage2x && /*#__PURE__*/React__default['default'].createElement(Image, {
-        src: image1x,
-        alt: "",
-        "aria-hidden": "true"
-      }), hasImage1x && hasImage2x && /*#__PURE__*/React__default['default'].createElement(Image, {
-        src: image1x,
-        srcSet: image1x + ' 1x,' + image2x + ' 2x',
-        alt: "",
-        "aria-hidden": "true"
-      }), /*#__PURE__*/React__default['default'].createElement(Content, null, this.props.children, hasDisclaimer && /*#__PURE__*/React__default['default'].createElement("p", {
-        className: "sui-disclaimer"
-      }, "* ", disclaimer)), /*#__PURE__*/React__default['default'].createElement(Border, null, /*#__PURE__*/React__default['default'].createElement("span", null)), /*#__PURE__*/React__default['default'].createElement(PriceWrapper, null, 'undefined' !== typeof this.props.priceLabel && '' !== this.props.priceLabel && /*#__PURE__*/React__default['default'].createElement(PriceLabel, null, this.props.priceLabel), hasDiscount ? /*#__PURE__*/React__default['default'].createElement(Price, null, /*#__PURE__*/React__default['default'].createElement("span", null, "$", price), /*#__PURE__*/React__default['default'].createElement("strong", null, "$", newPrice), "/", this.props.priceTime || 'month') : /*#__PURE__*/React__default['default'].createElement(Price, null, /*#__PURE__*/React__default['default'].createElement("strong", null, "$", price), "/", this.props.priceTime || 'month'), hasButton && /*#__PURE__*/React__default['default'].createElement(Button, {
-        label: buttonLabel,
-        color: "purple",
-        href: buttonLink,
-        target: "_blank"
-      }), hasDisclaimer && /*#__PURE__*/React__default['default'].createElement("p", {
-        className: "sui-disclaimer"
-      }, "* ", disclaimer, " *"))));
-    }
-  }]);
+var NoticeDiscount = function NoticeDiscount(_ref) {
+  var title = _ref.title,
+      price = _ref.price,
+      priceTime = _ref.priceTime,
+      discount = _ref.discount,
+      image = _ref.image,
+      imageRetina = _ref.imageRetina,
+      imageAlt = _ref.imageAlt,
+      disclaimer = _ref.disclaimer,
+      priceLabel = _ref.priceLabel,
+      buttonLabel = _ref.buttonLabel,
+      buttonLink = _ref.buttonLink,
+      closeLabel = _ref.closeLabel,
+      onCloseClick = _ref.onCloseClick,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, ["title", "price", "priceTime", "discount", "image", "imageRetina", "imageAlt", "disclaimer", "priceLabel", "buttonLabel", "buttonLink", "closeLabel", "onCloseClick", "children"]);
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isClose = _useState2[0],
+      setIsClose = _useState2[1];
+
+  var closeOnClick = function closeOnClick(e) {
+    setIsClose(true);
+    onCloseClick(e);
+  };
 
-  return NoticeDiscount;
-}(React.Component);
+  var calcPrice = price - discount / 100 * price;
+  var newPrice = calcPrice.toFixed(0);
+  var hasDiscount = null !== discount && '' !== discount && 0 !== discount || discount > 0;
+  var hasImage1x = null !== image && '' !== image;
+  var hasImage2x = null !== imageRetina && '' !== imageRetina;
+  var hasDisclaimer = null !== disclaimer && '' !== disclaimer;
+  var hasButtonLabel = null !== buttonLabel && '' !== buttonLabel;
+  var hasButtonLink = null !== buttonLink && '' !== buttonLink;
+  var hasButton = hasButtonLabel && hasButtonLink;
+  return !isClose && /*#__PURE__*/React__default['default'].createElement(Wrapper, _extends({
+    className: "sui-notice-offer"
+  }, props), /*#__PURE__*/React__default['default'].createElement(Header, null, hasDiscount && /*#__PURE__*/React__default['default'].createElement(Ribbon, null, discount, "% Off"), null !== title && '' !== title && /*#__PURE__*/React__default['default'].createElement(Title, null, title), /*#__PURE__*/React__default['default'].createElement("button", {
+    className: "sui-button-icon sui-button-white",
+    onClick: closeOnClick
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "sui-icon-close sui-sm",
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "sui-screen-reader-text"
+  }, closeLabel || 'Close this offer'))), /*#__PURE__*/React__default['default'].createElement(Body, null, hasImage1x && !hasImage2x && /*#__PURE__*/React__default['default'].createElement(Image, {
+    src: image,
+    alt: imageAlt || 'Plugin image',
+    "aria-hidden": "true"
+  }), hasImage1x && hasImage2x && /*#__PURE__*/React__default['default'].createElement(Image, {
+    src: image,
+    srcSet: image + ' 1x,' + imageRetina + ' 2x',
+    alt: imageAlt || 'Plugin image',
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React__default['default'].createElement(Content, null, children, hasDisclaimer && /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "sui-disclaimer"
+  }, "* ", disclaimer)), /*#__PURE__*/React__default['default'].createElement(Border, null, /*#__PURE__*/React__default['default'].createElement("span", null)), /*#__PURE__*/React__default['default'].createElement(PriceWrapper, null, /*#__PURE__*/React__default['default'].createElement(PriceLabel, null, priceLabel || 'Pay Only'), hasDiscount ? /*#__PURE__*/React__default['default'].createElement(Price, null, /*#__PURE__*/React__default['default'].createElement("span", null, "$", price), /*#__PURE__*/React__default['default'].createElement("strong", null, "$", newPrice), "/", priceTime || 'month') : /*#__PURE__*/React__default['default'].createElement(Price, null, /*#__PURE__*/React__default['default'].createElement("strong", null, "$", price), "/", priceTime || 'month'), hasButton && /*#__PURE__*/React__default['default'].createElement(Button, {
+    label: buttonLabel,
+    color: "purple",
+    href: buttonLink,
+    target: "_blank"
+  }), hasDisclaimer && /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "sui-disclaimer"
+  }, "* ", disclaimer, " *"))));
+};
 
 exports.NoticeDiscount = NoticeDiscount;
diff --git a/packages/shared-notifications/dist/shared-notifications.esm.js b/packages/shared-notifications/dist/shared-notifications.esm.js
index 83151c33..5bbfc4ca 100644
--- a/packages/shared-notifications/dist/shared-notifications.esm.js
+++ b/packages/shared-notifications/dist/shared-notifications.esm.js
@@ -1,59 +1,6 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
-}
-
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 function _extends() {
   _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -72,98 +19,113 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _inherits(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function");
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
   }
 
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) _setPrototypeOf(subClass, superClass);
+  return target;
 }
 
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
+  var target = _objectWithoutPropertiesLoose(source, excluded);
 
-  return _setPrototypeOf(o, p);
-}
+  var key, i;
 
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
 
-  try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
   }
+
+  return target;
 }
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+function _taggedTemplateLiteral(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
   }
 
-  return self;
+  return Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
+    }
+  }));
 }
 
-function _possibleConstructorReturn(self, call) {
-  if (call && (_typeof(call) === "object" || typeof call === "function")) {
-    return call;
-  }
-
-  return _assertThisInitialized(self);
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
 
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived),
-        result;
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
 
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
 
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
     }
+  }
 
-    return _possibleConstructorReturn(this, result);
-  };
+  return _arr;
 }
 
-function _taggedTemplateLiteral(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
   }
 
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
-    }
-  }));
+  return arr2;
 }
 
-function _defineProperty$1(obj, key, value) {
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -198,7 +160,7 @@ function _objectSpread2(target) {
 
     if (i % 2) {
       ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty$1(target, key, source[key]);
+        _defineProperty(target, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
@@ -212,7 +174,7 @@ function _objectSpread2(target) {
   return target;
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
+function _objectWithoutPropertiesLoose$1(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -227,10 +189,10 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-function _objectWithoutProperties(source, excluded) {
+function _objectWithoutProperties$1(source, excluded) {
   if (source == null) return {};
 
-  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var target = _objectWithoutPropertiesLoose$1(source, excluded);
 
   var key, i;
 
@@ -256,7 +218,7 @@ var Button = function Button(_ref) {
       color = _ref.color,
       className = _ref.className,
       loading = _ref.loading,
-      props = _objectWithoutProperties(_ref, ["label", "icon", "design", "color", "className", "loading"]);
+      props = _objectWithoutProperties$1(_ref, ["label", "icon", "design", "color", "className", "loading"]);
 
   var loader = /*#__PURE__*/React.createElement("span", {
     className: "sui-icon-loader sui-loading",
@@ -347,93 +309,71 @@ var PriceWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTem
 var PriceLabel = styled.h3(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\tcolor: #666 !important;\n\tfont-size: 12px !important;\n\tline-height: 16px !important;\n\tfont-weight: 400 !important;\n\tletter-spacing: -0.23px !important;\n\n\t@media ", " {\n\t\ttext-transform: uppercase;\n\t}\n"])), device.tablet);
 var Price = styled.p(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\tmargin: 0 !important;\n\tcolor: #333 !important;\n\tfont-size: 15px !important;\n\tline-height: 40px !important;\n\tletter-spacing: -0.27px !important;\n\n\tspan {\n\t\tmargin-right: 6px;\n\t\tcolor: #FF6D6D;\n\t\tfont-size: 18px;\n\t\tfont-weight: bold;\n\t\ttext-decoration: line-through;\n\t\tletter-spacing: -0.32px;\n\t}\n\n\tstrong {\n\t\tfont-size: 28px;\n\t\tfont-weight: bold;\n\t\tletter-spacing: -0.5px;\n\t}\n"])));
 
-var NoticeDiscount = /*#__PURE__*/function (_Component) {
-  _inherits(NoticeDiscount, _Component);
-
-  var _super = _createSuper(NoticeDiscount);
-
-  function NoticeDiscount(props) {
-    var _this;
-
-    _classCallCheck(this, NoticeDiscount);
-
-    _this = _super.call(this, props); // Call functions.
-
-    _defineProperty(_assertThisInitialized(_this), "closeButtonClicked", function (e) {
-      _this.hideComponent(e);
-
-      _this.props.onCloseClick(e);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "hideComponent", function (e) {
-      var noticeBox = e.currentTarget.closest(".sui-notice-offer"),
-          event = new Event("noticeOfferClosed");
-      noticeBox.dispatchEvent(event);
-      noticeBox.remove();
-    });
-
-    _this.closeButtonClicked = _this.closeButtonClicked.bind(_assertThisInitialized(_this));
-    _this.hideComponent = _this.hideComponent.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(NoticeDiscount, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var title = this.props.title;
-      var price = this.props.price;
-      var discount = this.props.discount;
-      var image1x = this.props.image;
-      var image2x = this.props.imageRetina;
-      var disclaimer = this.props.disclaimer;
-      var buttonLabel = this.props.buttonLabel;
-      var buttonLink = this.props.buttonLink;
-      var calcPrice = price - discount / 100 * price;
-      var newPrice = calcPrice.toFixed(0);
-      var hasDiscount = null !== discount && "" !== discount && 0 !== discount || discount > 0;
-      var hasImage1x = null !== image1x && "" !== image1x;
-      var hasImage2x = null !== image2x && "" !== image2x;
-      var hasDisclaimer = null !== disclaimer && "" !== disclaimer;
-      var hasButtonLabel = null !== buttonLabel && '' !== buttonLabel;
-      var hasButtonLink = null !== buttonLink && '' !== buttonLink;
-      var hasButton = hasButtonLabel && hasButtonLink;
-      return /*#__PURE__*/React.createElement(Wrapper, _extends({
-        className: "sui-notice-offer"
-      }, this.props), /*#__PURE__*/React.createElement(Header, null, hasDiscount && /*#__PURE__*/React.createElement(Ribbon, null, discount, "% Off"), null !== title && '' !== title && /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement("button", {
-        className: "sui-button-icon sui-button-white",
-        onClick: function onClick(e) {
-          return _this2.closeButtonClicked(e);
-        }
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "sui-icon-close sui-sm",
-        "aria-hidden": "true"
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "sui-screen-reader-text"
-      }, "Close this offer"))), /*#__PURE__*/React.createElement(Body, null, hasImage1x && !hasImage2x && /*#__PURE__*/React.createElement(Image, {
-        src: image1x,
-        alt: "",
-        "aria-hidden": "true"
-      }), hasImage1x && hasImage2x && /*#__PURE__*/React.createElement(Image, {
-        src: image1x,
-        srcSet: image1x + ' 1x,' + image2x + ' 2x',
-        alt: "",
-        "aria-hidden": "true"
-      }), /*#__PURE__*/React.createElement(Content, null, this.props.children, hasDisclaimer && /*#__PURE__*/React.createElement("p", {
-        className: "sui-disclaimer"
-      }, "* ", disclaimer)), /*#__PURE__*/React.createElement(Border, null, /*#__PURE__*/React.createElement("span", null)), /*#__PURE__*/React.createElement(PriceWrapper, null, 'undefined' !== typeof this.props.priceLabel && '' !== this.props.priceLabel && /*#__PURE__*/React.createElement(PriceLabel, null, this.props.priceLabel), hasDiscount ? /*#__PURE__*/React.createElement(Price, null, /*#__PURE__*/React.createElement("span", null, "$", price), /*#__PURE__*/React.createElement("strong", null, "$", newPrice), "/", this.props.priceTime || 'month') : /*#__PURE__*/React.createElement(Price, null, /*#__PURE__*/React.createElement("strong", null, "$", price), "/", this.props.priceTime || 'month'), hasButton && /*#__PURE__*/React.createElement(Button, {
-        label: buttonLabel,
-        color: "purple",
-        href: buttonLink,
-        target: "_blank"
-      }), hasDisclaimer && /*#__PURE__*/React.createElement("p", {
-        className: "sui-disclaimer"
-      }, "* ", disclaimer, " *"))));
-    }
-  }]);
+var NoticeDiscount = function NoticeDiscount(_ref) {
+  var title = _ref.title,
+      price = _ref.price,
+      priceTime = _ref.priceTime,
+      discount = _ref.discount,
+      image = _ref.image,
+      imageRetina = _ref.imageRetina,
+      imageAlt = _ref.imageAlt,
+      disclaimer = _ref.disclaimer,
+      priceLabel = _ref.priceLabel,
+      buttonLabel = _ref.buttonLabel,
+      buttonLink = _ref.buttonLink,
+      closeLabel = _ref.closeLabel,
+      onCloseClick = _ref.onCloseClick,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, ["title", "price", "priceTime", "discount", "image", "imageRetina", "imageAlt", "disclaimer", "priceLabel", "buttonLabel", "buttonLink", "closeLabel", "onCloseClick", "children"]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isClose = _useState2[0],
+      setIsClose = _useState2[1];
+
+  var closeOnClick = function closeOnClick(e) {
+    setIsClose(true);
+    onCloseClick(e);
+  };
 
-  return NoticeDiscount;
-}(Component);
+  var calcPrice = price - discount / 100 * price;
+  var newPrice = calcPrice.toFixed(0);
+  var hasDiscount = null !== discount && '' !== discount && 0 !== discount || discount > 0;
+  var hasImage1x = null !== image && '' !== image;
+  var hasImage2x = null !== imageRetina && '' !== imageRetina;
+  var hasDisclaimer = null !== disclaimer && '' !== disclaimer;
+  var hasButtonLabel = null !== buttonLabel && '' !== buttonLabel;
+  var hasButtonLink = null !== buttonLink && '' !== buttonLink;
+  var hasButton = hasButtonLabel && hasButtonLink;
+  return !isClose && /*#__PURE__*/React.createElement(Wrapper, _extends({
+    className: "sui-notice-offer"
+  }, props), /*#__PURE__*/React.createElement(Header, null, hasDiscount && /*#__PURE__*/React.createElement(Ribbon, null, discount, "% Off"), null !== title && '' !== title && /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement("button", {
+    className: "sui-button-icon sui-button-white",
+    onClick: closeOnClick
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sui-icon-close sui-sm",
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "sui-screen-reader-text"
+  }, closeLabel || 'Close this offer'))), /*#__PURE__*/React.createElement(Body, null, hasImage1x && !hasImage2x && /*#__PURE__*/React.createElement(Image, {
+    src: image,
+    alt: imageAlt || 'Plugin image',
+    "aria-hidden": "true"
+  }), hasImage1x && hasImage2x && /*#__PURE__*/React.createElement(Image, {
+    src: image,
+    srcSet: image + ' 1x,' + imageRetina + ' 2x',
+    alt: imageAlt || 'Plugin image',
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React.createElement(Content, null, children, hasDisclaimer && /*#__PURE__*/React.createElement("p", {
+    className: "sui-disclaimer"
+  }, "* ", disclaimer)), /*#__PURE__*/React.createElement(Border, null, /*#__PURE__*/React.createElement("span", null)), /*#__PURE__*/React.createElement(PriceWrapper, null, /*#__PURE__*/React.createElement(PriceLabel, null, priceLabel || 'Pay Only'), hasDiscount ? /*#__PURE__*/React.createElement(Price, null, /*#__PURE__*/React.createElement("span", null, "$", price), /*#__PURE__*/React.createElement("strong", null, "$", newPrice), "/", priceTime || 'month') : /*#__PURE__*/React.createElement(Price, null, /*#__PURE__*/React.createElement("strong", null, "$", price), "/", priceTime || 'month'), hasButton && /*#__PURE__*/React.createElement(Button, {
+    label: buttonLabel,
+    color: "purple",
+    href: buttonLink,
+    target: "_blank"
+  }), hasDisclaimer && /*#__PURE__*/React.createElement("p", {
+    className: "sui-disclaimer"
+  }, "* ", disclaimer, " *"))));
+};
 
 export { NoticeDiscount };

From b80ac34133fb65c1aba6fed87cda27a9d017d169 Mon Sep 17 00:00:00 2001
From: Rajendra Wagle <raajen73@gmail.com>
Date: Thu, 7 Oct 2021 12:11:31 +0545
Subject: [PATCH 3/3] Static pagination element

---
 .../shared-presets/dist/shared-presets.cjs.js | 51 +++++++++++++++++-
 .../shared-presets/dist/shared-presets.esm.js | 51 +++++++++++++++++-
 .../lib/components/pagination.js              |  0
 packages/shared-presets/lib/shared-presets.js | 54 +++++++++++++++++++
 4 files changed, 154 insertions(+), 2 deletions(-)
 create mode 100644 packages/shared-presets/lib/components/pagination.js

diff --git a/packages/shared-presets/dist/shared-presets.cjs.js b/packages/shared-presets/dist/shared-presets.cjs.js
index 1ae358ef..064513b4 100644
--- a/packages/shared-presets/dist/shared-presets.cjs.js
+++ b/packages/shared-presets/dist/shared-presets.cjs.js
@@ -3669,6 +3669,55 @@ var Presets = function Presets(_ref) {
 
 
   var tableImage = !isWhitelabel ? urls.accordionImg : null;
+  var Pagination = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "sui-pagination-wrap"
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "sui-pagination-results"
+  }, "25 results"), /*#__PURE__*/React__default['default'].createElement("ul", {
+    className: "sui-pagination"
+  }, /*#__PURE__*/React__default['default'].createElement("li", null, /*#__PURE__*/React__default['default'].createElement("a", {
+    href: "",
+    disabled: ""
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "sui-icon-arrow-skip-back",
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "sui-screen-reader-text"
+  }, "Go to first page"))), /*#__PURE__*/React__default['default'].createElement("li", null, /*#__PURE__*/React__default['default'].createElement("a", {
+    href: "",
+    disabled: ""
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "sui-icon-chevron-left",
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "sui-screen-reader-text"
+  }, "Previous page"))), /*#__PURE__*/React__default['default'].createElement("li", {
+    className: "sui-active"
+  }, /*#__PURE__*/React__default['default'].createElement("a", {
+    href: ""
+  }, "1")), /*#__PURE__*/React__default['default'].createElement("li", null, /*#__PURE__*/React__default['default'].createElement("a", {
+    href: ""
+  }, "2")), /*#__PURE__*/React__default['default'].createElement("li", null, /*#__PURE__*/React__default['default'].createElement("a", {
+    href: ""
+  }, "3")), /*#__PURE__*/React__default['default'].createElement("li", null, /*#__PURE__*/React__default['default'].createElement("a", {
+    href: ""
+  }, "4")), /*#__PURE__*/React__default['default'].createElement("li", null, /*#__PURE__*/React__default['default'].createElement("a", {
+    href: ""
+  }, "5")), /*#__PURE__*/React__default['default'].createElement("li", null, /*#__PURE__*/React__default['default'].createElement("a", {
+    href: ""
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "sui-icon-chevron-right",
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "sui-screen-reader-text"
+  }, "Next page"))), /*#__PURE__*/React__default['default'].createElement("li", null, /*#__PURE__*/React__default['default'].createElement("a", {
+    href: ""
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "sui-icon-arrow-skip-forward",
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "sui-screen-reader-text"
+  }, "Go to last page"))))));
   var Table = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, !isEmpty && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "sui-accordion sui-accordion-flushed",
     style: {
@@ -3706,7 +3755,7 @@ var Presets = function Presets(_ref) {
         status: item.config.strings[name]
       });
     }));
-  })));
+  })), Pagination);
 
   var getFooter = function getFooter() {
     if (isWidget) {
diff --git a/packages/shared-presets/dist/shared-presets.esm.js b/packages/shared-presets/dist/shared-presets.esm.js
index f4800070..bd377b7f 100644
--- a/packages/shared-presets/dist/shared-presets.esm.js
+++ b/packages/shared-presets/dist/shared-presets.esm.js
@@ -3659,6 +3659,55 @@ var Presets = function Presets(_ref) {
 
 
   var tableImage = !isWhitelabel ? urls.accordionImg : null;
+  var Pagination = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "sui-pagination-wrap"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sui-pagination-results"
+  }, "25 results"), /*#__PURE__*/React.createElement("ul", {
+    className: "sui-pagination"
+  }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
+    href: "",
+    disabled: ""
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sui-icon-arrow-skip-back",
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "sui-screen-reader-text"
+  }, "Go to first page"))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
+    href: "",
+    disabled: ""
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sui-icon-chevron-left",
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "sui-screen-reader-text"
+  }, "Previous page"))), /*#__PURE__*/React.createElement("li", {
+    className: "sui-active"
+  }, /*#__PURE__*/React.createElement("a", {
+    href: ""
+  }, "1")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
+    href: ""
+  }, "2")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
+    href: ""
+  }, "3")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
+    href: ""
+  }, "4")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
+    href: ""
+  }, "5")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
+    href: ""
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sui-icon-chevron-right",
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "sui-screen-reader-text"
+  }, "Next page"))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
+    href: ""
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sui-icon-arrow-skip-forward",
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "sui-screen-reader-text"
+  }, "Go to last page"))))));
   var Table = /*#__PURE__*/React.createElement(React.Fragment, null, !isEmpty && /*#__PURE__*/React.createElement("div", {
     className: "sui-accordion sui-accordion-flushed",
     style: {
@@ -3696,7 +3745,7 @@ var Presets = function Presets(_ref) {
         status: item.config.strings[name]
       });
     }));
-  })));
+  })), Pagination);
 
   var getFooter = function getFooter() {
     if (isWidget) {
diff --git a/packages/shared-presets/lib/components/pagination.js b/packages/shared-presets/lib/components/pagination.js
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/shared-presets/lib/shared-presets.js b/packages/shared-presets/lib/shared-presets.js
index f70b4172..740b2371 100644
--- a/packages/shared-presets/lib/shared-presets.js
+++ b/packages/shared-presets/lib/shared-presets.js
@@ -336,6 +336,55 @@ export const Presets = ( {
 	// End of notifications.
 
 	const tableImage = !isWhitelabel ? urls.accordionImg : null;
+	const Pagination = (
+		<React.Fragment>
+			<div className="sui-pagination-wrap">
+
+				<span className="sui-pagination-results">25 results</span>
+
+				<ul className="sui-pagination">
+
+					<li>
+						<a href="" disabled="">
+							<span className="sui-icon-arrow-skip-back" aria-hidden="true"></span>
+							<span className="sui-screen-reader-text">Go to first page</span>
+						</a>
+					</li>
+
+					<li>
+						<a href="" disabled="">
+						<span className="sui-icon-chevron-left" aria-hidden="true"></span>
+						<span className="sui-screen-reader-text">Previous page</span>
+						</a>
+					</li>
+
+					<li className="sui-active">
+						<a href="">1</a>
+					</li>
+					<li><a href="">2</a></li>
+					<li><a href="">3</a></li>
+					<li><a href="">4</a></li>
+					<li><a href="">5</a></li>
+
+					<li>
+						<a href="">
+							<span className="sui-icon-chevron-right" aria-hidden="true"></span>
+							<span className="sui-screen-reader-text">Next page</span>
+						</a>
+					</li>
+
+					<li>
+						<a href="">
+							<span className="sui-icon-arrow-skip-forward" aria-hidden="true"></span>
+							<span className="sui-screen-reader-text">Go to last page</span>
+						</a>
+					</li>
+
+				</ul>
+
+			</div>
+		</React.Fragment>
+	);
 	const Table = (
 		<React.Fragment>
 			{ !isEmpty && (
@@ -369,7 +418,11 @@ export const Presets = ( {
 						</PresetsAccordionItem>
 					) ) }
 				</div>
+
+
 			)}
+
+			{ Pagination }
 		</React.Fragment>
 	);
 
@@ -506,6 +559,7 @@ export const Presets = ( {
 					<LoadingContent>
 						<LoadingWrap aria-hidden="true">
 							{ Table }
+
 							{ getFooter() }
 						</LoadingWrap>
 						<LoadingMask>