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

package/CHANGELOG.md

@@ -1,25 +1,16 @@
-# newspack-components [4.7.0-alpha.1](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.6.2...newspack-components@4.7.0-alpha.1) (2026-08-20)
+# newspack-components [4.7.0-alpha.2](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.7.0-alpha.1...newspack-components@4.7.0-alpha.2) (2026-08-20)
 
 
 ### Bug Fixes
 
-* **audience:** clearer schedule, impact preview and deal id controls ([#798](https://github.com/Automattic/newspack-workspace/issues/798)) ([4fbc1c8](https://github.com/Automattic/newspack-workspace/commit/4fbc1c8edfad6a78892ef1b8979b9113c70a45a7))
-* **audience:** consistent headers, goal-first rules, accessible controls ([#757](https://github.com/Automattic/newspack-workspace/issues/757)) ([345764c](https://github.com/Automattic/newspack-workspace/commit/345764ca6ead1c5e306515b456106c65ebbaaf5d))
-* **audience:** pricing tables in cards, price editing in a drawer ([#826](https://github.com/Automattic/newspack-workspace/issues/826)) ([8424556](https://github.com/Automattic/newspack-workspace/commit/8424556322f3fbbdc4880417c77437119353d3aa))
-* three WordPress 7.1 regressions in Newsletters ([#876](https://github.com/Automattic/newspack-workspace/issues/876)) ([2cbc687](https://github.com/Automattic/newspack-workspace/commit/2cbc6877394b03eb1fff4694753414ef37d03406))
+* **wizard:** refetch data after the installer adds required plugins ([#893](https://github.com/Automattic/newspack-workspace/issues/893)) ([6b23902](https://github.com/Automattic/newspack-workspace/commit/6b239026e4a3dad5118443d9bc384d53248f38fa))
 
-
-### Features
-
-* **access-control:** make Audience Management an explicit prerequisite (NPPD-1846) ([#765](https://github.com/Automattic/newspack-workspace/issues/765)) ([b5efde2](https://github.com/Automattic/newspack-workspace/commit/b5efde2aa3d050bda9fc629f1ed91e4864a91d33))
-* **campaigns:** Contextual Prompts, AI-assisted story donation asks ([#686](https://github.com/Automattic/newspack-workspace/issues/686)) ([f896387](https://github.com/Automattic/newspack-workspace/commit/f896387b5c3c096b6ed0cacbf2fe89b3e7f6b703)), closes [#719](https://github.com/Automattic/newspack-workspace/issues/719)
-* **campaigns:** pick donor landing page via autocomplete search ([#761](https://github.com/Automattic/newspack-workspace/issues/761)) ([01fa615](https://github.com/Automattic/newspack-workspace/commit/01fa61514954742094dff2fd0e5a4ff3bb4c04b6))
-* **components:** add a drawer component with a compound slot api ([#810](https://github.com/Automattic/newspack-workspace/issues/810)) ([5134ae9](https://github.com/Automattic/newspack-workspace/commit/5134ae9cab353bc8e10e239f7d54f8e3abb24fae))
+## newspack-components [4.6.3](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.6.2...newspack-components@4.6.3) (2026-08-20)
 
 
-### Dependencies
+### Bug Fixes
 
-* **newspack-icons:** upgraded to 1.1.2-alpha.1
+* **wizard:** refetch data after the installer adds required plugins ([#893](https://github.com/Automattic/newspack-workspace/issues/893)) ([6b23902](https://github.com/Automattic/newspack-workspace/commit/6b239026e4a3dad5118443d9bc384d53248f38fa))
 
 ## newspack-components [4.6.2](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.6.1...newspack-components@4.6.2) (2026-08-17)
 

package/dist/cjs/wizard/index.js

@@ -197,6 +197,8 @@ var Wizard = function Wizard(_ref2, ref) {
   var notices = (0, _data.useSelect)(function (select) {
     return select(_store.WIZARD_STORE_NAMESPACE).getNotices();
   });
+  var _useDispatch2 = (0, _data.useDispatch)(_store.WIZARD_STORE_NAMESPACE),
+    invalidateResolution = _useDispatch2.invalidateResolution;
   var actions = headerData.actions,
     backNav = headerData.backNav,
     badges = headerData.badges,
@@ -225,6 +227,30 @@ var Wizard = function Wizard(_ref2, ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     pluginRequirementsSatisfied = _useState2[0],
     setPluginRequirementsSatisfied = _useState2[1];
+
+  // The data fetch above runs once per mount, while the required plugins are
+  // still missing — endpoints that need them answer empty or error outright,
+  // and either way the resolver records that as the answer. So the installer
+  // has to trigger a refetch, or the section mounts against it and renders
+  // nothing until the user saves. Requirements already met on mount are left
+  // alone: that fetch saw the real site, and refetching would cost every such
+  // wizard a second request on every load.
+  var requirementsWereUnmet = (0, _element.useRef)(false);
+  var onPluginStatus = function onPluginStatus(_ref3) {
+    var complete = _ref3.complete;
+    // Leave the installer first: whatever happens to the refetch, the user
+    // should not be stranded on a required-plugins screen for a plugin they
+    // just installed.
+    setPluginRequirementsSatisfied(complete);
+    if (!complete) {
+      requirementsWereUnmet.current = true;
+    } else if (requirementsWereUnmet.current) {
+      requirementsWereUnmet.current = false;
+      if (apiSlug && isInitialFetchTriggered) {
+        invalidateResolution('getWizardAPIData', [apiSlug]);
+      }
+    }
+  };
   if (!pluginRequirementsSatisfied) {
     headerText = requiredPlugins.length > 1 ? (0, _i18n.__)('Required plugins', 'newspack-plugin') : (0, _i18n.__)('Required plugin', 'newspack-plugin');
     displayedSections = [{
@@ -232,10 +258,7 @@ var Wizard = function Wizard(_ref2, ref) {
       render: function render() {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PluginInstaller, {
           plugins: requiredPlugins,
-          onStatus: function onStatus(_ref3) {
-            var complete = _ref3.complete;
-            return setPluginRequirementsSatisfied(complete);
-          }
+          onStatus: onPluginStatus
         });
       }
     }];

package/dist/cjs/wizard/index.test.js

@@ -0,0 +1,252 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("@testing-library/react");
+var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
+var _ = _interopRequireDefault(require("./"));
+var _utils = require("./store/utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); } /**
+ * External dependencies.
+ */ /**
+ * WordPress dependencies.
+ */ /**
+ * Internal dependencies.
+ */
+jest.mock('@wordpress/api-fetch', function () {
+  return jest.fn();
+});
+
+// Both globals are localized onto every real wizard screen. The footer's
+// ExternalLink needs a string href, and the debug Notice reads aux data.
+window.newspack_aux_data = {
+  is_debug_mode: false
+};
+window.newspack_urls = {
+  support: 'https://help.newspack.com/'
+};
+var SETTINGS = {
+  minimumDonation: '5'
+};
+
+// Stands in for a wizard section that can only render once its API data has
+// arrived — the shape a wizard section has when the wizard owns an apiSlug.
+var Section = function Section(_ref) {
+  var slug = _ref.slug;
+  var wizardData = (0, _utils.useWizardData)(slug);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: wizardData.settings ? 'Settings form' : null
+  });
+};
+
+// The other shape: a section on a wizard with no apiSlug, which reads page-load
+// globals rather than wizard API data and so never touches the store.
+var StaticSection = function StaticSection() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: "Static section"
+  });
+};
+
+// Mocks the endpoints a wizard hits, gated on whether the required plugin is
+// active: the wizard's own endpoint 400s while the plugin is missing, exactly as
+// Audience_Donations::api_get_donation_settings() does without WooCommerce.
+// Counts every wizard-endpoint GET, whatever the slug, so a test can assert that
+// a wizard given no apiSlug fetches nothing at all.
+var mockEndpoints = function mockEndpoints(slug) {
+  var initialStatus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inactive';
+  var counts = {
+    wizard: 0
+  };
+  var pluginStatus = initialStatus;
+  var plugin = function plugin() {
+    return {
+      Name: 'WooCommerce',
+      Description: 'Store',
+      Status: pluginStatus,
+      Download: 'wporg'
+    };
+  };
+  _apiFetch["default"].mockImplementation(function (_ref2) {
+    var path = _ref2.path,
+      method = _ref2.method;
+    if (path.startsWith('/newspack/v1/wizard/') && 'POST' !== method) {
+      counts.wizard++;
+      return 'active' === pluginStatus ? Promise.resolve({
+        settings: SETTINGS
+      }) : Promise.reject({
+        code: 'newspack_missing_required_plugin',
+        message: 'The WooCommerce plugin is not installed and activated.'
+      });
+    }
+    if (path === '/newspack/v1/plugins/') {
+      return Promise.resolve({
+        woocommerce: plugin()
+      });
+    }
+    if (path === '/newspack/v1/plugins/woocommerce/configure/') {
+      pluginStatus = 'active';
+      return Promise.resolve(plugin());
+    }
+    return Promise.resolve({});
+  });
+  return counts;
+};
+var renderWizard = function renderWizard(slug) {
+  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref3$withApiSlug = _ref3.withApiSlug,
+    withApiSlug = _ref3$withApiSlug === void 0 ? true : _ref3$withApiSlug;
+  return (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+    headerText: "Test wizard",
+    apiSlug: withApiSlug ? slug : undefined,
+    requiredPlugins: ['woocommerce'],
+    sections: [{
+      label: 'Configuration',
+      path: '/configuration',
+      render: function render() {
+        return withApiSlug ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Section, {
+          slug: slug
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(StaticSection, {});
+      }
+    }]
+  }));
+};
+
+// The plugin's own row button, not the footer's activate-all — both read
+// "Activate", and the row button comes first in the DOM.
+var clickActivate = /*#__PURE__*/function () {
+  var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee() {
+    var _yield$screen$findAll, _yield$screen$findAll2, activate;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          _context.n = 1;
+          return _react.screen.findAllByRole('button', {
+            name: 'Activate'
+          });
+        case 1:
+          _yield$screen$findAll = _context.v;
+          _yield$screen$findAll2 = (0, _slicedToArray2["default"])(_yield$screen$findAll, 1);
+          activate = _yield$screen$findAll2[0];
+          _react.fireEvent.click(activate);
+        case 2:
+          return _context.a(2);
+      }
+    }, _callee);
+  }));
+  return function clickActivate() {
+    return _ref4.apply(this, arguments);
+  };
+}();
+
+// Lets every already-queued promise settle, so an assertion that something did
+// NOT happen has actually given it the chance to.
+var flushPending = function flushPending() {
+  return (0, _react.act)(function () {
+    return new Promise(function (resolve) {
+      return setTimeout(resolve, 0);
+    });
+  });
+};
+describe('Wizard', function () {
+  beforeEach(function () {
+    _apiFetch["default"].mockReset();
+  });
+  it('refetches its API data after the installer satisfies the plugin requirements', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee2() {
+    var slug, counts, _t, _t2;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
+          // A distinct slug per test: the store's resolution cache lives in the
+          // module registry, so it is shared by every test in this file.
+          slug = 'test-wizard-refetch';
+          counts = mockEndpoints(slug);
+          renderWizard(slug);
+
+          // The first fetch runs before the plugin exists, so it fails. Until the
+          // installer is satisfied it owns the whole route, so the installer screen
+          // showing is what proves we are in the pre-activation state.
+          _context2.n = 1;
+          return (0, _react.waitFor)(function () {
+            return expect(counts.wizard).toBe(1);
+          });
+        case 1:
+          _t = expect;
+          _context2.n = 2;
+          return _react.screen.findByText('WooCommerce');
+        case 2:
+          _t(_context2.v).toBeInTheDocument();
+          _context2.n = 3;
+          return clickActivate();
+        case 3:
+          _t2 = expect;
+          _context2.n = 4;
+          return _react.screen.findByText('Settings form');
+        case 4:
+          _t2(_context2.v).toBeInTheDocument();
+          _context2.n = 5;
+          return flushPending();
+        case 5:
+          expect(counts.wizard).toBe(2);
+        case 6:
+          return _context2.a(2);
+      }
+    }, _callee2);
+  })));
+  it('does not refetch when the required plugins were already active', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee3() {
+    var slug, counts, _t3;
+    return _regenerator().w(function (_context3) {
+      while (1) switch (_context3.n) {
+        case 0:
+          slug = 'test-wizard-no-refetch';
+          counts = mockEndpoints(slug, 'active');
+          renderWizard(slug);
+          _t3 = expect;
+          _context3.n = 1;
+          return _react.screen.findByText('Settings form');
+        case 1:
+          _t3(_context3.v).toBeInTheDocument();
+          _context3.n = 2;
+          return flushPending();
+        case 2:
+          expect(counts.wizard).toBe(1);
+        case 3:
+          return _context3.a(2);
+      }
+    }, _callee3);
+  })));
+  it('fetches nothing for a wizard that has required plugins but no API slug', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee4() {
+    var slug, counts, _t4;
+    return _regenerator().w(function (_context4) {
+      while (1) switch (_context4.n) {
+        case 0:
+          // The shape of every other Newspack wizard that gates on plugins: it
+          // reads page-load globals rather than wizard API data. This change has to
+          // stay inert for them. Note this pins the inertness, not the `apiSlug`
+          // guard itself — the resolver already no-ops on an undefined slug, so
+          // that guard is a second line of defence rather than the load-bearing one.
+          slug = 'test-wizard-no-api-slug';
+          counts = mockEndpoints(slug);
+          renderWizard(slug, {
+            withApiSlug: false
+          });
+          _context4.n = 1;
+          return clickActivate();
+        case 1:
+          _t4 = expect;
+          _context4.n = 2;
+          return _react.screen.findByText('Static section');
+        case 2:
+          _t4(_context4.v).toBeInTheDocument();
+          _context4.n = 3;
+          return flushPending();
+        case 3:
+          expect(counts.wizard).toBe(0);
+        case 4:
+          return _context4.a(2);
+      }
+    }, _callee4);
+  })));
+});

package/dist/esm/wizard/index.js

@@ -13,7 +13,7 @@ import classnames from 'classnames';
 // Notice is aliased: `Notice` below is Newspack's own, which this file also uses.
 import { DropdownMenu, MenuGroup, MenuItem, Notice as CoreNotice, SlotFillProvider, createSlotFill } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { cloneElement, createInterpolateElement, isValidElement, useEffect, useState, forwardRef } from '@wordpress/element';
+import { cloneElement, createInterpolateElement, isValidElement, useRef, useEffect, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
@@ -196,6 +196,8 @@ var Wizard = function Wizard(_ref2, ref) {
   var notices = useSelect(function (select) {
     return select(WIZARD_STORE_NAMESPACE).getNotices();
   });
+  var _useDispatch2 = useDispatch(WIZARD_STORE_NAMESPACE),
+    invalidateResolution = _useDispatch2.invalidateResolution;
   var actions = headerData.actions,
     backNav = headerData.backNav,
     badges = headerData.badges,
@@ -224,6 +226,30 @@ var Wizard = function Wizard(_ref2, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     pluginRequirementsSatisfied = _useState2[0],
     setPluginRequirementsSatisfied = _useState2[1];
+
+  // The data fetch above runs once per mount, while the required plugins are
+  // still missing — endpoints that need them answer empty or error outright,
+  // and either way the resolver records that as the answer. So the installer
+  // has to trigger a refetch, or the section mounts against it and renders
+  // nothing until the user saves. Requirements already met on mount are left
+  // alone: that fetch saw the real site, and refetching would cost every such
+  // wizard a second request on every load.
+  var requirementsWereUnmet = useRef(false);
+  var onPluginStatus = function onPluginStatus(_ref3) {
+    var complete = _ref3.complete;
+    // Leave the installer first: whatever happens to the refetch, the user
+    // should not be stranded on a required-plugins screen for a plugin they
+    // just installed.
+    setPluginRequirementsSatisfied(complete);
+    if (!complete) {
+      requirementsWereUnmet.current = true;
+    } else if (requirementsWereUnmet.current) {
+      requirementsWereUnmet.current = false;
+      if (apiSlug && isInitialFetchTriggered) {
+        invalidateResolution('getWizardAPIData', [apiSlug]);
+      }
+    }
+  };
   if (!pluginRequirementsSatisfied) {
     headerText = requiredPlugins.length > 1 ? __('Required plugins', 'newspack-plugin') : __('Required plugin', 'newspack-plugin');
     displayedSections = [{
@@ -231,10 +257,7 @@ var Wizard = function Wizard(_ref2, ref) {
       render: function render() {
         return /*#__PURE__*/_jsx(PluginInstaller, {
           plugins: requiredPlugins,
-          onStatus: function onStatus(_ref3) {
-            var complete = _ref3.complete;
-            return setPluginRequirementsSatisfied(complete);
-          }
+          onStatus: onPluginStatus
         });
       }
     }];

package/dist/esm/wizard/index.test.js

@@ -0,0 +1,254 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+/**
+ * External dependencies.
+ */
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+/**
+ * WordPress dependencies.
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies.
+ */
+import Wizard from './';
+import { useWizardData } from './store/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+jest.mock('@wordpress/api-fetch', function () {
+  return jest.fn();
+});
+
+// Both globals are localized onto every real wizard screen. The footer's
+// ExternalLink needs a string href, and the debug Notice reads aux data.
+window.newspack_aux_data = {
+  is_debug_mode: false
+};
+window.newspack_urls = {
+  support: 'https://help.newspack.com/'
+};
+var SETTINGS = {
+  minimumDonation: '5'
+};
+
+// Stands in for a wizard section that can only render once its API data has
+// arrived — the shape a wizard section has when the wizard owns an apiSlug.
+var Section = function Section(_ref) {
+  var slug = _ref.slug;
+  var wizardData = useWizardData(slug);
+  return /*#__PURE__*/_jsx("div", {
+    children: wizardData.settings ? 'Settings form' : null
+  });
+};
+
+// The other shape: a section on a wizard with no apiSlug, which reads page-load
+// globals rather than wizard API data and so never touches the store.
+var StaticSection = function StaticSection() {
+  return /*#__PURE__*/_jsx("div", {
+    children: "Static section"
+  });
+};
+
+// Mocks the endpoints a wizard hits, gated on whether the required plugin is
+// active: the wizard's own endpoint 400s while the plugin is missing, exactly as
+// Audience_Donations::api_get_donation_settings() does without WooCommerce.
+// Counts every wizard-endpoint GET, whatever the slug, so a test can assert that
+// a wizard given no apiSlug fetches nothing at all.
+var mockEndpoints = function mockEndpoints(slug) {
+  var initialStatus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inactive';
+  var counts = {
+    wizard: 0
+  };
+  var pluginStatus = initialStatus;
+  var plugin = function plugin() {
+    return {
+      Name: 'WooCommerce',
+      Description: 'Store',
+      Status: pluginStatus,
+      Download: 'wporg'
+    };
+  };
+  apiFetch.mockImplementation(function (_ref2) {
+    var path = _ref2.path,
+      method = _ref2.method;
+    if (path.startsWith('/newspack/v1/wizard/') && 'POST' !== method) {
+      counts.wizard++;
+      return 'active' === pluginStatus ? Promise.resolve({
+        settings: SETTINGS
+      }) : Promise.reject({
+        code: 'newspack_missing_required_plugin',
+        message: 'The WooCommerce plugin is not installed and activated.'
+      });
+    }
+    if (path === '/newspack/v1/plugins/') {
+      return Promise.resolve({
+        woocommerce: plugin()
+      });
+    }
+    if (path === '/newspack/v1/plugins/woocommerce/configure/') {
+      pluginStatus = 'active';
+      return Promise.resolve(plugin());
+    }
+    return Promise.resolve({});
+  });
+  return counts;
+};
+var renderWizard = function renderWizard(slug) {
+  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref3$withApiSlug = _ref3.withApiSlug,
+    withApiSlug = _ref3$withApiSlug === void 0 ? true : _ref3$withApiSlug;
+  return render(/*#__PURE__*/_jsx(Wizard, {
+    headerText: "Test wizard",
+    apiSlug: withApiSlug ? slug : undefined,
+    requiredPlugins: ['woocommerce'],
+    sections: [{
+      label: 'Configuration',
+      path: '/configuration',
+      render: function render() {
+        return withApiSlug ? /*#__PURE__*/_jsx(Section, {
+          slug: slug
+        }) : /*#__PURE__*/_jsx(StaticSection, {});
+      }
+    }]
+  }));
+};
+
+// The plugin's own row button, not the footer's activate-all — both read
+// "Activate", and the row button comes first in the DOM.
+var clickActivate = /*#__PURE__*/function () {
+  var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var _yield$screen$findAll, _yield$screen$findAll2, activate;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          _context.n = 1;
+          return screen.findAllByRole('button', {
+            name: 'Activate'
+          });
+        case 1:
+          _yield$screen$findAll = _context.v;
+          _yield$screen$findAll2 = _slicedToArray(_yield$screen$findAll, 1);
+          activate = _yield$screen$findAll2[0];
+          fireEvent.click(activate);
+        case 2:
+          return _context.a(2);
+      }
+    }, _callee);
+  }));
+  return function clickActivate() {
+    return _ref4.apply(this, arguments);
+  };
+}();
+
+// Lets every already-queued promise settle, so an assertion that something did
+// NOT happen has actually given it the chance to.
+var flushPending = function flushPending() {
+  return act(function () {
+    return new Promise(function (resolve) {
+      return setTimeout(resolve, 0);
+    });
+  });
+};
+describe('Wizard', function () {
+  beforeEach(function () {
+    apiFetch.mockReset();
+  });
+  it('refetches its API data after the installer satisfies the plugin requirements', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+    var slug, counts, _t, _t2;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
+          // A distinct slug per test: the store's resolution cache lives in the
+          // module registry, so it is shared by every test in this file.
+          slug = 'test-wizard-refetch';
+          counts = mockEndpoints(slug);
+          renderWizard(slug);
+
+          // The first fetch runs before the plugin exists, so it fails. Until the
+          // installer is satisfied it owns the whole route, so the installer screen
+          // showing is what proves we are in the pre-activation state.
+          _context2.n = 1;
+          return waitFor(function () {
+            return expect(counts.wizard).toBe(1);
+          });
+        case 1:
+          _t = expect;
+          _context2.n = 2;
+          return screen.findByText('WooCommerce');
+        case 2:
+          _t(_context2.v).toBeInTheDocument();
+          _context2.n = 3;
+          return clickActivate();
+        case 3:
+          _t2 = expect;
+          _context2.n = 4;
+          return screen.findByText('Settings form');
+        case 4:
+          _t2(_context2.v).toBeInTheDocument();
+          _context2.n = 5;
+          return flushPending();
+        case 5:
+          expect(counts.wizard).toBe(2);
+        case 6:
+          return _context2.a(2);
+      }
+    }, _callee2);
+  })));
+  it('does not refetch when the required plugins were already active', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+    var slug, counts, _t3;
+    return _regenerator().w(function (_context3) {
+      while (1) switch (_context3.n) {
+        case 0:
+          slug = 'test-wizard-no-refetch';
+          counts = mockEndpoints(slug, 'active');
+          renderWizard(slug);
+          _t3 = expect;
+          _context3.n = 1;
+          return screen.findByText('Settings form');
+        case 1:
+          _t3(_context3.v).toBeInTheDocument();
+          _context3.n = 2;
+          return flushPending();
+        case 2:
+          expect(counts.wizard).toBe(1);
+        case 3:
+          return _context3.a(2);
+      }
+    }, _callee3);
+  })));
+  it('fetches nothing for a wizard that has required plugins but no API slug', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+    var slug, counts, _t4;
+    return _regenerator().w(function (_context4) {
+      while (1) switch (_context4.n) {
+        case 0:
+          // The shape of every other Newspack wizard that gates on plugins: it
+          // reads page-load globals rather than wizard API data. This change has to
+          // stay inert for them. Note this pins the inertness, not the `apiSlug`
+          // guard itself — the resolver already no-ops on an undefined slug, so
+          // that guard is a second line of defence rather than the load-bearing one.
+          slug = 'test-wizard-no-api-slug';
+          counts = mockEndpoints(slug);
+          renderWizard(slug, {
+            withApiSlug: false
+          });
+          _context4.n = 1;
+          return clickActivate();
+        case 1:
+          _t4 = expect;
+          _context4.n = 2;
+          return screen.findByText('Static section');
+        case 2:
+          _t4(_context4.v).toBeInTheDocument();
+          _context4.n = 3;
+          return flushPending();
+        case 3:
+          expect(counts.wizard).toBe(0);
+        case 4:
+          return _context4.a(2);
+      }
+    }, _callee4);
+  })));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "4.7.0-alpha.1",
+	"version": "4.7.0-alpha.2",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

package/src/wizard/index.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 // Notice is aliased: `Notice` below is Newspack's own, which this file also uses.
 import { DropdownMenu, MenuGroup, MenuItem, Notice as CoreNotice, SlotFillProvider, createSlotFill } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { cloneElement, createInterpolateElement, isValidElement, useEffect, useState, forwardRef } from '@wordpress/element';
+import { cloneElement, createInterpolateElement, isValidElement, useRef, useEffect, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
@@ -163,6 +163,7 @@ const Wizard = (
 	const isQuietLoading = useSelect( select => select( WIZARD_STORE_NAMESPACE ).isQuietLoading() );
 	const headerData = useSelect( select => select( WIZARD_STORE_NAMESPACE ).getHeaderData() );
 	const notices = useSelect( select => select( WIZARD_STORE_NAMESPACE ).getNotices() );
+	const { invalidateResolution } = useDispatch( WIZARD_STORE_NAMESPACE );
 	const { actions, backNav, badges, sectionDescription, sectionMenu, sectionName, sectionTitle, sectionPrimaryAction, sectionSecondaryAction } =
 		headerData;
 
@@ -176,14 +177,36 @@ const Wizard = (
 	let displayedSections = sections.filter( section => ! section.isHidden );
 
 	const [ pluginRequirementsSatisfied, setPluginRequirementsSatisfied ] = useState( requiredPlugins.length === 0 );
+
+	// The data fetch above runs once per mount, while the required plugins are
+	// still missing — endpoints that need them answer empty or error outright,
+	// and either way the resolver records that as the answer. So the installer
+	// has to trigger a refetch, or the section mounts against it and renders
+	// nothing until the user saves. Requirements already met on mount are left
+	// alone: that fetch saw the real site, and refetching would cost every such
+	// wizard a second request on every load.
+	const requirementsWereUnmet = useRef( false );
+	const onPluginStatus = ( { complete } ) => {
+		// Leave the installer first: whatever happens to the refetch, the user
+		// should not be stranded on a required-plugins screen for a plugin they
+		// just installed.
+		setPluginRequirementsSatisfied( complete );
+		if ( ! complete ) {
+			requirementsWereUnmet.current = true;
+		} else if ( requirementsWereUnmet.current ) {
+			requirementsWereUnmet.current = false;
+			if ( apiSlug && isInitialFetchTriggered ) {
+				invalidateResolution( 'getWizardAPIData', [ apiSlug ] );
+			}
+		}
+	};
+
 	if ( ! pluginRequirementsSatisfied ) {
 		headerText = requiredPlugins.length > 1 ? __( 'Required plugins', 'newspack-plugin' ) : __( 'Required plugin', 'newspack-plugin' );
 		displayedSections = [
 			{
 				path: '/',
-				render: () => (
-					<PluginInstaller plugins={ requiredPlugins } onStatus={ ( { complete } ) => setPluginRequirementsSatisfied( complete ) } />
-				),
+				render: () => <PluginInstaller plugins={ requiredPlugins } onStatus={ onPluginStatus } />,
 			},
 		];
 	}

package/src/wizard/index.test.js

@@ -0,0 +1,156 @@
+/**
+ * External dependencies.
+ */
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+/**
+ * WordPress dependencies.
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies.
+ */
+import Wizard from './';
+import { useWizardData } from './store/utils';
+
+jest.mock( '@wordpress/api-fetch', () => jest.fn() );
+
+// Both globals are localized onto every real wizard screen. The footer's
+// ExternalLink needs a string href, and the debug Notice reads aux data.
+window.newspack_aux_data = { is_debug_mode: false };
+window.newspack_urls = { support: 'https://help.newspack.com/' };
+
+const SETTINGS = { minimumDonation: '5' };
+
+// Stands in for a wizard section that can only render once its API data has
+// arrived — the shape a wizard section has when the wizard owns an apiSlug.
+const Section = ( { slug } ) => {
+	const wizardData = useWizardData( slug );
+	return <div>{ wizardData.settings ? 'Settings form' : null }</div>;
+};
+
+// The other shape: a section on a wizard with no apiSlug, which reads page-load
+// globals rather than wizard API data and so never touches the store.
+const StaticSection = () => <div>Static section</div>;
+
+// Mocks the endpoints a wizard hits, gated on whether the required plugin is
+// active: the wizard's own endpoint 400s while the plugin is missing, exactly as
+// Audience_Donations::api_get_donation_settings() does without WooCommerce.
+// Counts every wizard-endpoint GET, whatever the slug, so a test can assert that
+// a wizard given no apiSlug fetches nothing at all.
+const mockEndpoints = ( slug, initialStatus = 'inactive' ) => {
+	const counts = { wizard: 0 };
+	let pluginStatus = initialStatus;
+	const plugin = () => ( { Name: 'WooCommerce', Description: 'Store', Status: pluginStatus, Download: 'wporg' } );
+	apiFetch.mockImplementation( ( { path, method } ) => {
+		if ( path.startsWith( '/newspack/v1/wizard/' ) && 'POST' !== method ) {
+			counts.wizard++;
+			return 'active' === pluginStatus
+				? Promise.resolve( { settings: SETTINGS } )
+				: Promise.reject( {
+						code: 'newspack_missing_required_plugin',
+						message: 'The WooCommerce plugin is not installed and activated.',
+				  } );
+		}
+		if ( path === '/newspack/v1/plugins/' ) {
+			return Promise.resolve( { woocommerce: plugin() } );
+		}
+		if ( path === '/newspack/v1/plugins/woocommerce/configure/' ) {
+			pluginStatus = 'active';
+			return Promise.resolve( plugin() );
+		}
+		return Promise.resolve( {} );
+	} );
+	return counts;
+};
+
+const renderWizard = ( slug, { withApiSlug = true } = {} ) =>
+	render(
+		<Wizard
+			headerText="Test wizard"
+			apiSlug={ withApiSlug ? slug : undefined }
+			requiredPlugins={ [ 'woocommerce' ] }
+			sections={ [
+				{
+					label: 'Configuration',
+					path: '/configuration',
+					render: () => ( withApiSlug ? <Section slug={ slug } /> : <StaticSection /> ),
+				},
+			] }
+		/>
+	);
+
+// The plugin's own row button, not the footer's activate-all — both read
+// "Activate", and the row button comes first in the DOM.
+const clickActivate = async () => {
+	const [ activate ] = await screen.findAllByRole( 'button', { name: 'Activate' } );
+	fireEvent.click( activate );
+};
+
+// Lets every already-queued promise settle, so an assertion that something did
+// NOT happen has actually given it the chance to.
+const flushPending = () => act( () => new Promise( resolve => setTimeout( resolve, 0 ) ) );
+
+describe( 'Wizard', () => {
+	beforeEach( () => {
+		apiFetch.mockReset();
+	} );
+
+	it( 'refetches its API data after the installer satisfies the plugin requirements', async () => {
+		// A distinct slug per test: the store's resolution cache lives in the
+		// module registry, so it is shared by every test in this file.
+		const slug = 'test-wizard-refetch';
+		const counts = mockEndpoints( slug );
+
+		renderWizard( slug );
+
+		// The first fetch runs before the plugin exists, so it fails. Until the
+		// installer is satisfied it owns the whole route, so the installer screen
+		// showing is what proves we are in the pre-activation state.
+		await waitFor( () => expect( counts.wizard ).toBe( 1 ) );
+		expect( await screen.findByText( 'WooCommerce' ) ).toBeInTheDocument();
+
+		await clickActivate();
+
+		// Activation makes the endpoint answerable, so the section must render
+		// against fresh data rather than the empty pre-activation response.
+		expect( await screen.findByText( 'Settings form' ) ).toBeInTheDocument();
+
+		// Exactly one refetch. The installer re-reports its status on every
+		// re-render while it is mounted, so this is the assertion that would
+		// catch a latch that re-fired.
+		await flushPending();
+		expect( counts.wizard ).toBe( 2 );
+	} );
+
+	it( 'does not refetch when the required plugins were already active', async () => {
+		const slug = 'test-wizard-no-refetch';
+		const counts = mockEndpoints( slug, 'active' );
+
+		renderWizard( slug );
+
+		expect( await screen.findByText( 'Settings form' ) ).toBeInTheDocument();
+		await flushPending();
+		expect( counts.wizard ).toBe( 1 );
+	} );
+
+	it( 'fetches nothing for a wizard that has required plugins but no API slug', async () => {
+		// The shape of every other Newspack wizard that gates on plugins: it
+		// reads page-load globals rather than wizard API data. This change has to
+		// stay inert for them. Note this pins the inertness, not the `apiSlug`
+		// guard itself — the resolver already no-ops on an undefined slug, so
+		// that guard is a second line of defence rather than the load-bearing one.
+		const slug = 'test-wizard-no-api-slug';
+		const counts = mockEndpoints( slug );
+
+		renderWizard( slug, { withApiSlug: false } );
+
+		await clickActivate();
+
+		// The installer still completes and hands the route back to the section.
+		expect( await screen.findByText( 'Static section' ) ).toBeInTheDocument();
+		await flushPending();
+		expect( counts.wizard ).toBe( 0 );
+	} );
+} );