newspack-components 3.0.0-alpha.1 → 3.0.0-alpha.2

package/dist/with-wizard/index.js

@@ -0,0 +1,328 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = withWizard;
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
+var _icons = require("@wordpress/icons");
+var _ = require("../");
+var _router = _interopRequireDefault(require("../proxied-imports/router"));
+var _footer = _interopRequireDefault(require("../footer"));
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+const {
+  Redirect,
+  Route
+} = _router.default;
+
+/**
+ * Higher-Order Component to provide plugin management and error handling to Newspack Wizards.
+ */
+function withWizard(WrappedComponent, requiredPlugins) {
+  return class WrappedWithWizard extends _element.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        complete: null,
+        error: null,
+        loading: requiredPlugins && requiredPlugins.length > 0 ? 1 : 0,
+        quietLoading: false
+      };
+      this.wrappedComponentRef = (0, _element.createRef)();
+    }
+    componentDidMount = () => {
+      // If there are no requiredPlugins, fire onWizardReady as soon as component mounts.
+      if (!requiredPlugins) {
+        const instance = this.wrappedComponentRef.current;
+        // eslint-disable-next-line no-unused-expressions
+        instance && instance.onWizardReady && instance.onWizardReady();
+      }
+    };
+
+    /**
+     * Set the error. Called by Wizards when an error occurs.
+     *
+     * @return {Promise} Resolved after state update
+     */
+    setError = error => {
+      return new Promise(resolve => {
+        this.setState({
+          error: error || null
+        }, () => resolve());
+      });
+    };
+
+    /**
+     * Render any errors that need rendering.
+     *
+     * @return {Component} Error UI
+     */
+    getError = () => {
+      const {
+        error
+      } = this.state;
+      if (!error) {
+        return null;
+      }
+      const parsedError = this.parseError(error);
+      const {
+        level
+      } = parsedError;
+      if ('fatal' === level) {
+        return this.getFatalError(parsedError);
+      }
+      return this.getErrorNotice(parsedError);
+    };
+
+    /**
+     * Get a notice-level error.
+     *
+     * @param {Error} error object already parsed by parseError
+     * @return {Component} Error notice
+     */
+    getErrorNotice = error => {
+      const {
+        message
+      } = error;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
+        isError: true,
+        className: "newspack-wizard__above-header",
+        noticeText: message,
+        rawHTML: true
+      });
+    };
+
+    /**
+     * Get a fatal-level error.
+     *
+     * @param {Error} error object already parsed by parseError
+     * @return {Component} React object
+     */
+    getFatalError = error => {
+      const fallbackURL = this.getFallbackURL();
+      if (!fallbackURL) {
+        return null;
+      }
+      const {
+        message
+      } = error;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Modal, {
+        title: (0, _i18n.__)('Unrecoverable error'),
+        onRequestClose: () => window.location = fallbackURL,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
+          noticeText: message,
+          isError: true,
+          rawHTML: true
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Card, {
+          buttonsCard: true,
+          noBorder: true,
+          className: "justify-end",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+            isPrimary: true,
+            href: fallbackURL,
+            children: (0, _i18n.__)('Return to Dashboard', 'newspack-plugin')
+          })
+        })]
+      });
+    };
+
+    /**
+     * Get all the relevant info out of a raw API error response.
+     *
+     * @param {Object} error error object
+     * @return {Object} Error object with relevant fields and defaults
+     */
+    parseError = error => {
+      const {
+        data,
+        message,
+        code
+      } = error;
+      let level = 'fatal';
+      if (!!data && 'level' in data) {
+        level = data.level;
+      } else if ('rest_invalid_param' === code) {
+        level = 'notice';
+      }
+      return {
+        message,
+        level
+      };
+    };
+
+    /**
+     * Called when plugin installation is complete. Updates state and calls onWizardReady on the wrapped component.
+     */
+    pluginInstallationStatus = ({
+      complete
+    }) => {
+      if (this.state.loading) {
+        this.doneLoading();
+      }
+      const instance = this.wrappedComponentRef.current;
+      this.setState({
+        complete
+      }, () => {
+        // eslint-disable-next-line no-unused-expressions
+        complete && instance && instance.onWizardReady && instance.onWizardReady();
+      });
+    };
+
+    /**
+     * Begin loading.
+     */
+    startLoading = quiet => {
+      if (quiet) {
+        this.setState(state => ({
+          quietLoading: state.quietLoading + 1
+        }));
+      } else {
+        this.setState(state => ({
+          loading: state.loading + 1
+        }));
+      }
+    };
+
+    /**
+     * End loading.
+     */
+    doneLoading = quiet => {
+      if (quiet) {
+        this.setState(state => ({
+          quietLoading: state.quietLoading - 1
+        }));
+      } else {
+        this.setState(state => ({
+          loading: state.loading - 1
+        }));
+      }
+    };
+
+    /**
+     * Replacement for core apiFetch that automatically manages wizard loading UI.
+     */
+    wizardApiFetch = args => {
+      const {
+        quiet
+      } = args;
+      this.startLoading(quiet);
+      return new Promise((resolve, reject) => {
+        (0, _apiFetch.default)(args).then(response => {
+          this.doneLoading(quiet);
+          resolve(response);
+        }).catch(error => {
+          this.doneLoading(quiet);
+          reject(error);
+        });
+      });
+    };
+
+    /**
+     * Render a Route that checks for plugin installation requirements, and redirects to '/' when all are done.
+     *
+     * @return {void}
+     */
+    pluginRequirements = () => {
+      const {
+        complete
+      } = this.state;
+      /* After all plugins are loaded, redirect to / (this could be configurable) */
+      if (complete) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Redirect, {
+          from: "/plugin-requirements",
+          to: "/"
+        });
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Route, {
+        path: "/",
+        render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+          children: [complete !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "newspack-wizard__header",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "newspack-wizard__header__inner",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "newspack-wizard__title",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+                  isLink: true,
+                  href: newspack_urls.dashboard,
+                  label: (0, _i18n.__)('Return to Dashboard', 'newspack-plugin'),
+                  showTooltip: true,
+                  icon: _icons.home,
+                  iconSize: 36,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewspackIcon, {
+                    size: 36
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+                    children: requiredPlugins.length > 1 ? (0, _i18n.__)('Required plugins', 'newspack-plugin') : (0, _i18n.__)('Required plugin', 'newspack-plugin')
+                  })
+                })]
+              })
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "newspack-wizard newspack-wizard__content",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PluginInstaller, {
+              plugins: requiredPlugins,
+              onStatus: status => this.pluginInstallationStatus(status)
+            })
+          })]
+        })
+      });
+    };
+    getFallbackURL = () => {
+      if (typeof newspack_urls !== 'undefined') {
+        return newspack_urls.dashboard;
+      }
+    };
+
+    /**
+     * Render.
+     */
+    render() {
+      const {
+        simpleFooter
+      } = this.props;
+      const {
+        loading,
+        quietLoading,
+        error
+      } = this.state;
+      const loadingClasses = [loading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded'];
+      if (quietLoading) {
+        loadingClasses.push('newspack-wizard__is-loading-quiet');
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+        children: [this.getError(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: loadingClasses.join(' '),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+            pluginRequirements: requiredPlugins && this.pluginRequirements(),
+            clearError: this.clearError,
+            getError: this.getError,
+            errorData: error,
+            setError: this.setError,
+            isLoading: loading,
+            startLoading: this.startLoading,
+            doneLoading: this.doneLoading,
+            wizardApiFetch: this.wizardApiFetch,
+            ref: this.wrappedComponentRef,
+            ...this.props
+          })
+        }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_footer.default, {
+          simple: simpleFooter
+        })]
+      });
+    }
+  };
+}

package/dist/{cjs/with-wizard → with-wizard}/style.scss

@@ -2,14 +2,14 @@
  * With Wizard
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
-@use '../../../shared/scss/colors';
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../shared/scss/colors";
 
 // Reset Padding of the Admin Page
 
-.toplevel_page_newspack:not( .menu-top ),
-body[class*='newspack_page_newspack-'],
-body[class*='admin_page_newspack-'] {
+.toplevel_page_newspack:not(.menu-top),
+body[class*="newspack_page_newspack-"],
+body[class*="admin_page_newspack-"] {
 	background: white;
 
 	#wpcontent {
@@ -33,7 +33,7 @@ body[class*='admin_page_newspack-'] {
 svg {
 	&.newspack--error {
 		fill: wp-colors.$alert-red;
-		transform: rotate( 180deg );
+		transform: rotate(180deg);
 	}
 	&.newspack--success {
 		fill: wp-colors.$alert-green;
@@ -87,38 +87,51 @@ svg {
 	&::before,
 	&::after {
 		animation: loading 2s ease-in-out infinite;
-		content: '';
+		content: "";
 		display: block;
 	}
 
 	&::before {
 		background: colors.$primary-500;
-		box-shadow: 24px 0 0 white, 69px 0 0 -15px wp-colors.$gray-900,
-			99px 0 0 -15px wp-colors.$gray-900, 129px 0 0 -15px wp-colors.$gray-900,
-			159px 0 0 -15px wp-colors.$gray-900, 189px 0 0 -15px wp-colors.$gray-900;
+		box-shadow:
+			24px 0 0 white,
+			69px 0 0 -15px wp-colors.$gray-900,
+			99px 0 0 -15px wp-colors.$gray-900,
+			129px 0 0 -15px wp-colors.$gray-900,
+			159px 0 0 -15px wp-colors.$gray-900,
+			189px 0 0 -15px wp-colors.$gray-900;
 		height: 60px;
 		width: 60px;
 	}
 
 	&::after {
 		background: wp-colors.$gray-900;
-		box-shadow: inset -40vw 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 40vw 96px 0 0 white,
+		box-shadow:
+			inset -40vw 0 0 0 white,
+			0 64px 0 0 wp-colors.$gray-700,
+			40vw 96px 0 0 white,
 			0 96px 0 0 wp-colors.$gray-700;
 		height: 24px;
 		margin: 68px auto 0;
 		max-width: 1040px;
-		width: calc( 100% - ( 32px * 2 ) );
+		width: calc(100% - ( 32px * 2 ));
 
 		@media screen and ( min-width: 744px ) {
-			box-shadow: inset -400px 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 200px 96px 0 0 white,
+			box-shadow:
+				inset -400px 0 0 0 white,
+				0 64px 0 0 wp-colors.$gray-700,
+				200px 96px 0 0 white,
 				0 96px 0 0 wp-colors.$gray-700;
-			width: calc( 100% - ( 64px * 2 ) );
+			width: calc(100% - ( 64px * 2 ));
 		}
 
 		@media screen and ( min-width: 1224px ) {
-			box-shadow: inset -600px 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 512px 96px 0 0 white,
+			box-shadow:
+				inset -600px 0 0 0 white,
+				0 64px 0 0 wp-colors.$gray-700,
+				512px 96px 0 0 white,
 				0 96px 0 0 wp-colors.$gray-700;
-			width: calc( 100% - ( 64px * 2 ) );
+			width: calc(100% - ( 64px * 2 ));
 		}
 	}
 
@@ -151,7 +164,7 @@ svg {
 
 		&::before,
 		&::after {
-			content: '';
+			content: "";
 			cursor: wait;
 			display: block;
 			left: 0;
@@ -187,7 +200,7 @@ svg {
 		}
 
 		&::after {
-			background: rgba( white, 0.7 );
+			background: rgba(white, 0.7);
 			bottom: 0;
 			right: 0;
 			z-index: 9998;
@@ -206,10 +219,13 @@ svg {
 
 	&::after {
 		animation: loading 2s ease-in-out infinite;
-		content: '';
+		content: "";
 		display: block;
 		background: wp-colors.$gray-900;
-		box-shadow: inset -40vw 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 40vw 96px 0 0 white,
+		box-shadow:
+			inset -40vw 0 0 0 white,
+			0 64px 0 0 wp-colors.$gray-700,
+			40vw 96px 0 0 white,
 			0 96px 0 0 wp-colors.$gray-700;
 		height: 24px;
 		margin: 0 auto;
@@ -217,12 +233,18 @@ svg {
 		width: 100%;
 
 		@media screen and ( min-width: 744px ) {
-			box-shadow: inset -400px 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 200px 96px 0 0 white,
+			box-shadow:
+				inset -400px 0 0 0 white,
+				0 64px 0 0 wp-colors.$gray-700,
+				200px 96px 0 0 white,
 				0 96px 0 0 wp-colors.$gray-700;
 		}
 
 		@media screen and ( min-width: 1224px ) {
-			box-shadow: inset -600px 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 520px 96px 0 0 white,
+			box-shadow:
+				inset -600px 0 0 0 white,
+				0 64px 0 0 wp-colors.$gray-700,
+				520px 96px 0 0 white,
 				0 96px 0 0 wp-colors.$gray-700;
 		}
 	}

package/dist/{cjs/with-wizard-screen → with-wizard-screen}/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,21 +11,22 @@ var _ = require("../");
 var _js = require("../../../shared/js/");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies.
  */
-const __ = _i18n.__;
+
 /**
  * Internal dependencies
  */
+
 /**
  * External dependencies
  */
+
 /**
  * Higher-Order Component to provide plugin management and error handling to Newspack Wizards.
- */
-function withWizardScreen(WrappedComponent, {
+ */function withWizardScreen(WrappedComponent, {
   hidePrimaryButton
 } = {}) {
   const WrappedWithWizardScreen = props => {
@@ -47,12 +48,12 @@ function withWizardScreen(WrappedComponent, {
     const SecondaryCTAComponent = retrievedSecondaryButtonProps.plugin ? _.Handoff : _.Button;
     const shouldRenderPrimaryButton = buttonText && buttonAction;
     const shouldRenderSecondaryButton = secondaryButtonText && secondaryButtonAction;
-    const renderPrimaryButton = (overridingProps = {}) => retrievedButtonProps.plugin ? (0, _jsxRuntime.jsx)(_.Handoff, {
+    const renderPrimaryButton = (overridingProps = {}) => retrievedButtonProps.plugin ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Handoff, {
       isPrimary: true,
       ...retrievedButtonProps,
       ...overridingProps,
       children: buttonText
-    }) : (0, _jsxRuntime.jsx)(_.Button, {
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
       isPrimary: !buttonDisabled,
       isSecondary: !!buttonDisabled,
       disabled: buttonDisabled
@@ -63,45 +64,45 @@ function withWizardScreen(WrappedComponent, {
       ...retrievedButtonProps,
       ...overridingProps
     });
-    return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [newspack_aux_data.is_debug_mode && (0, _jsxRuntime.jsx)(_.Notice, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
         debugMode: true
-      }), (0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "newspack-wizard__header",
-        children: (0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "newspack-wizard__header__inner",
-          children: (0, _jsxRuntime.jsxs)("div", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "newspack-wizard__title",
-            children: [(0, _jsxRuntime.jsx)(_.Button, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
               isLink: true,
               href: newspack_urls.dashboard,
-              label: __('Return to Dashboard', 'newspack-plugin'),
+              label: (0, _i18n.__)('Return to Dashboard', 'newspack-plugin'),
               showTooltip: true,
               icon: _icons.category,
               iconSize: 36,
-              children: (0, _jsxRuntime.jsx)(_.NewspackIcon, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewspackIcon, {
                 size: 36
               })
-            }), (0, _jsxRuntime.jsxs)("div", {
-              children: [headerText && (0, _jsxRuntime.jsx)("h2", {
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              children: [headerText && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
                 children: headerText
-              }), subHeaderText && (0, _jsxRuntime.jsx)("span", {
+              }), subHeaderText && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 children: subHeaderText
               })]
             })]
           })
         })
-      }), tabbedNavigation && (0, _jsxRuntime.jsx)(_.TabbedNavigation, {
+      }), tabbedNavigation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TabbedNavigation, {
         disableUpcoming: disableUpcomingInTabbedNavigation,
         items: tabbedNavigation.filter(item => !item.isHiddenInNav)
-      }), (0, _jsxRuntime.jsx)(_.HandoffMessage, {}), (0, _jsxRuntime.jsxs)("div", {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HandoffMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _classnames.default)('newspack-wizard newspack-wizard__content', className),
-        children: [typeof renderAboveContent === 'function' ? renderAboveContent() : null, (0, _jsxRuntime.jsx)(WrappedComponent, {
+        children: [typeof renderAboveContent === 'function' ? renderAboveContent() : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
           ...props,
           renderPrimaryButton: renderPrimaryButton
-        }), (shouldRenderPrimaryButton || shouldRenderSecondaryButton) && (0, _jsxRuntime.jsxs)("div", {
+        }), (shouldRenderPrimaryButton || shouldRenderSecondaryButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "newspack-buttons-card",
-          children: [shouldRenderPrimaryButton && !hidePrimaryButton && renderPrimaryButton(), shouldRenderSecondaryButton && (0, _jsxRuntime.jsx)(SecondaryCTAComponent, {
+          children: [shouldRenderPrimaryButton && !hidePrimaryButton && renderPrimaryButton(), shouldRenderSecondaryButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(SecondaryCTAComponent, {
             isSecondary: true,
             ...retrievedSecondaryButtonProps,
             children: secondaryButtonText

package/dist/{esm/with-wizard-screen → with-wizard-screen}/style.scss

@@ -2,8 +2,8 @@
  * With Wizard Screen
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
-@use '../../../shared/scss/colors';
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../shared/scss/colors";
 
 .newspack-wizard {
 	// Color
@@ -29,16 +29,16 @@
 
 	// Links
 	a {
-		color: var( --wp-admin-theme-color );
+		color: var(--wp-admin-theme-color);
 
 		&:active,
 		&:focus,
 		&:hover {
-			color: var( --wp-admin-theme-color-darker-10 );
+			color: var(--wp-admin-theme-color-darker-10);
 		}
 
 		&:focus {
-			box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			outline: 3px solid transparent;
 		}
 	}
@@ -82,7 +82,7 @@
 				margin-bottom: -1px !important;
 			}
 
-			&:not( .newspack-icon ) {
+			&:not(.newspack-icon) {
 				background: colors.$primary-500;
 				left: 50%;
 				margin: -28px 0 0 -28px !important;
@@ -110,7 +110,7 @@
 				&::before {
 					border: 2px solid white;
 					border-radius: 2px;
-					content: '';
+					content: "";
 					display: block;
 					inset: 6px 6px 5px;
 					position: absolute;

package/dist/{cjs/wizard → wizard}/components/WizardError.js

@@ -8,14 +8,15 @@ var _i18n = require("@wordpress/i18n");
 var _data = require("@wordpress/data");
 var _ = require("../..");
 var _store = require("../store");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies.
  */
-const __ = _i18n.__;
+
 /**
  * Internal dependencies.
  */
+
 const parseError = ({
   data,
   message,
@@ -43,26 +44,26 @@ const WizardError = () => {
   } = parseError(error);
   if ('fatal' === level) {
     const fallbackURL = typeof newspack_urls !== 'undefined' && newspack_urls.dashboard;
-    return (0, _jsxRuntime.jsxs)(_.Modal, {
-      title: __('Unrecoverable error'),
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Modal, {
+      title: (0, _i18n.__)('Unrecoverable error'),
       onRequestClose: fallbackURL ? () => window.location = fallbackURL : undefined,
-      children: [(0, _jsxRuntime.jsx)(_.Notice, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
         noticeText: message,
         isError: true,
         rawHTML: true
-      }), fallbackURL && (0, _jsxRuntime.jsx)(_.Card, {
+      }), fallbackURL && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Card, {
         buttonsCard: true,
         noBorder: true,
         className: "justify-end",
-        children: (0, _jsxRuntime.jsx)(_.Button, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
           isPrimary: true,
           href: fallbackURL,
-          children: __('Return to Dashboard', 'newspack-plugin')
+          children: (0, _i18n.__)('Return to Dashboard', 'newspack-plugin')
         })
       })]
     });
   }
-  return (0, _jsxRuntime.jsx)(_.Notice, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
     isError: true,
     className: "newspack-wizard__above-header",
     noticeText: message,