newspack-components 4.6.0 → 4.6.1-hotfix-wizard-stale-data-after-plugin-install.1

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## newspack-components [4.6.1-hotfix-wizard-stale-data-after-plugin-install.1](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.6.0...newspack-components@4.6.1-hotfix-wizard-stale-data-after-plugin-install.1) (2026-08-17)
+
+
+### Bug Fixes
+
+* **content-gate:** surface the Institutions entry point when institutions exist (NPPD-1492, [#708](https://github.com/Automattic/newspack-workspace/issues/708)) ([6ebb8c4](https://github.com/Automattic/newspack-workspace/commit/6ebb8c40f43b3f6d890900b683514eb9e6d65f2f))
+* **wizard:** refetch data after the installer adds required plugins ([fd41402](https://github.com/Automattic/newspack-workspace/commit/fd414025a01e45faef49636a61c0bef247d72b2d))
+
+
+### Dependencies
+
+* **newspack-icons:** upgraded to 1.1.1-hotfix-wizard-stale-data-after-plugin-install.1
+* **newspack-scripts:** upgraded to 5.11.0-hotfix-wizard-stale-data-after-plugin-install.1
+
+## newspack-components [4.6.1](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.6.0...newspack-components@4.6.1) (2026-08-17)
+
+
+### Bug Fixes
+
+* **content-gate:** surface the Institutions entry point when institutions exist (NPPD-1492, [#708](https://github.com/Automattic/newspack-workspace/issues/708)) ([6ebb8c4](https://github.com/Automattic/newspack-workspace/commit/6ebb8c40f43b3f6d890900b683514eb9e6d65f2f))
+
+
+### Dependencies
+
+* **newspack-icons:** upgraded to 1.1.1
+* **newspack-scripts:** upgraded to 5.11.0
+
 # newspack-components [4.6.0](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.5.0...newspack-components@4.6.0) (2026-08-03)
 
 

package/dist/cjs/section-header/index.js

@@ -120,6 +120,14 @@ var _jsxRuntime = require("react/jsx-runtime");
             level: badge.level || 'default'
           }, i);
         }) : null]
+      }), secondaryAction && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-section-header__secondary-action",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+          variant: "link",
+          href: secondaryAction.href,
+          onClick: secondaryAction.action,
+          children: secondaryAction.label
+        })
       }), (menu === null || menu === void 0 ? void 0 : menu.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
         className: "newspack-section-header__menu",
         icon: _icons.moreVertical,
@@ -136,14 +144,6 @@ var _jsxRuntime = require("react/jsx-runtime");
             }, index);
           });
         }
-      }), secondaryAction && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "newspack-section-header__secondary-action",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-          variant: "link",
-          href: secondaryAction.href,
-          onClick: secondaryAction.action,
-          children: secondaryAction.label
-        })
       })]
     });
   } else if (typeof title === 'function') {

package/dist/cjs/wizard/index.js

@@ -160,6 +160,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,
@@ -188,6 +190,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 = [{
@@ -195,10 +221,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,182 @@
+"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();
+});
+global.newspack_aux_data = {
+  is_debug_mode: false
+};
+// The wizard footer links out to the docs; both globals are localized onto every
+// real wizard screen, and the footer's ExternalLink needs a string href.
+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 every Newspack wizard section has.
+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
+  });
+};
+
+// 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.
+// Returns a counter so a test can assert how many times the wizard refetched.
+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 === "/newspack/v1/wizard/".concat(slug) && '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) {
+  return (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+    headerText: "Test wizard",
+    apiSlug: slug,
+    requiredPlugins: ['woocommerce'],
+    sections: [{
+      label: 'Configuration',
+      path: '/configuration',
+      render: function render() {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Section, {
+          slug: slug
+        });
+      }
+    }]
+  }));
+};
+
+// 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 _callee() {
+    var slug, counts, _yield$screen$findAll, _yield$screen$findAll2, activate, _t;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          // A distinct slug per test: the store's resolver cache is process-wide.
+          slug = 'test-wizard-refetch';
+          counts = mockEndpoints(slug);
+          renderWizard(slug);
+
+          // The first fetch runs before the plugin exists, so it fails.
+          _context.n = 1;
+          return (0, _react.waitFor)(function () {
+            return expect(counts.wizard).toBe(1);
+          });
+        case 1:
+          expect(_react.screen.queryByText('Settings form')).not.toBeInTheDocument();
+
+          // Two buttons read "Activate": the plugin's own row and the footer's
+          // activate-all. The row button comes first in the DOM.
+          _context.n = 2;
+          return _react.screen.findAllByRole('button', {
+            name: 'Activate'
+          });
+        case 2:
+          _yield$screen$findAll = _context.v;
+          _yield$screen$findAll2 = (0, _slicedToArray2["default"])(_yield$screen$findAll, 1);
+          activate = _yield$screen$findAll2[0];
+          _react.fireEvent.click(activate);
+
+          // Activation makes the endpoint answerable, so the section must render
+          // against fresh data rather than the empty pre-activation response.
+          _t = expect;
+          _context.n = 3;
+          return _react.screen.findByText('Settings form');
+        case 3:
+          _t(_context.v).toBeInTheDocument();
+          expect(counts.wizard).toBe(2);
+        case 4:
+          return _context.a(2);
+      }
+    }, _callee);
+  })));
+  it('does not refetch when the required plugins were already active', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee2() {
+    var slug, counts, _t2;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
+          slug = 'test-wizard-no-refetch';
+          counts = mockEndpoints(slug, 'active');
+          renderWizard(slug);
+          _t2 = expect;
+          _context2.n = 1;
+          return _react.screen.findByText('Settings form');
+        case 1:
+          _t2(_context2.v).toBeInTheDocument();
+          _context2.n = 2;
+          return flushPending();
+        case 2:
+          expect(counts.wizard).toBe(1);
+        case 3:
+          return _context2.a(2);
+      }
+    }, _callee2);
+  })));
+});

package/dist/esm/section-header/index.js

@@ -112,6 +112,14 @@ var SectionHeader = function SectionHeader(_ref) {
             level: badge.level || 'default'
           }, i);
         }) : null]
+      }), secondaryAction && /*#__PURE__*/_jsx("div", {
+        className: "newspack-section-header__secondary-action",
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: "link",
+          href: secondaryAction.href,
+          onClick: secondaryAction.action,
+          children: secondaryAction.label
+        })
       }), (menu === null || menu === void 0 ? void 0 : menu.length) > 0 && /*#__PURE__*/_jsx(DropdownMenu, {
         className: "newspack-section-header__menu",
         icon: moreVertical,
@@ -128,14 +136,6 @@ var SectionHeader = function SectionHeader(_ref) {
             }, index);
           });
         }
-      }), secondaryAction && /*#__PURE__*/_jsx("div", {
-        className: "newspack-section-header__secondary-action",
-        children: /*#__PURE__*/_jsx(Button, {
-          variant: "link",
-          href: secondaryAction.href,
-          onClick: secondaryAction.action,
-          children: secondaryAction.label
-        })
       })]
     });
   } else if (typeof title === 'function') {

package/dist/esm/wizard/index.js

@@ -12,7 +12,7 @@ import classnames from 'classnames';
  */
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { cloneElement, isValidElement, useEffect, useState, forwardRef } from '@wordpress/element';
+import { cloneElement, isValidElement, useEffect, useRef, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
@@ -157,6 +157,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,
@@ -185,6 +187,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 = [{
@@ -192,10 +218,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,184 @@
+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();
+});
+global.newspack_aux_data = {
+  is_debug_mode: false
+};
+// The wizard footer links out to the docs; both globals are localized onto every
+// real wizard screen, and the footer's ExternalLink needs a string href.
+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 every Newspack wizard section has.
+var Section = function Section(_ref) {
+  var slug = _ref.slug;
+  var wizardData = useWizardData(slug);
+  return /*#__PURE__*/_jsx("div", {
+    children: wizardData.settings ? 'Settings form' : null
+  });
+};
+
+// 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.
+// Returns a counter so a test can assert how many times the wizard refetched.
+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 === "/newspack/v1/wizard/".concat(slug) && '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) {
+  return render(/*#__PURE__*/_jsx(Wizard, {
+    headerText: "Test wizard",
+    apiSlug: slug,
+    requiredPlugins: ['woocommerce'],
+    sections: [{
+      label: 'Configuration',
+      path: '/configuration',
+      render: function render() {
+        return /*#__PURE__*/_jsx(Section, {
+          slug: slug
+        });
+      }
+    }]
+  }));
+};
+
+// 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 _callee() {
+    var slug, counts, _yield$screen$findAll, _yield$screen$findAll2, activate, _t;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          // A distinct slug per test: the store's resolver cache is process-wide.
+          slug = 'test-wizard-refetch';
+          counts = mockEndpoints(slug);
+          renderWizard(slug);
+
+          // The first fetch runs before the plugin exists, so it fails.
+          _context.n = 1;
+          return waitFor(function () {
+            return expect(counts.wizard).toBe(1);
+          });
+        case 1:
+          expect(screen.queryByText('Settings form')).not.toBeInTheDocument();
+
+          // Two buttons read "Activate": the plugin's own row and the footer's
+          // activate-all. The row button comes first in the DOM.
+          _context.n = 2;
+          return screen.findAllByRole('button', {
+            name: 'Activate'
+          });
+        case 2:
+          _yield$screen$findAll = _context.v;
+          _yield$screen$findAll2 = _slicedToArray(_yield$screen$findAll, 1);
+          activate = _yield$screen$findAll2[0];
+          fireEvent.click(activate);
+
+          // Activation makes the endpoint answerable, so the section must render
+          // against fresh data rather than the empty pre-activation response.
+          _t = expect;
+          _context.n = 3;
+          return screen.findByText('Settings form');
+        case 3:
+          _t(_context.v).toBeInTheDocument();
+          expect(counts.wizard).toBe(2);
+        case 4:
+          return _context.a(2);
+      }
+    }, _callee);
+  })));
+  it('does not refetch when the required plugins were already active', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+    var slug, counts, _t2;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
+          slug = 'test-wizard-no-refetch';
+          counts = mockEndpoints(slug, 'active');
+          renderWizard(slug);
+          _t2 = expect;
+          _context2.n = 1;
+          return screen.findByText('Settings form');
+        case 1:
+          _t2(_context2.v).toBeInTheDocument();
+          _context2.n = 2;
+          return flushPending();
+        case 2:
+          expect(counts.wizard).toBe(1);
+        case 3:
+          return _context2.a(2);
+      }
+    }, _callee2);
+  })));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "4.6.0",
+	"version": "4.6.1-hotfix-wizard-stale-data-after-plugin-install.1",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -30,7 +30,7 @@
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"moment-range": "^3.1.1",
-		"newspack-icons": "1.1.0",
+		"newspack-icons": "1.1.1-hotfix-wizard-stale-data-after-plugin-install.1",
 		"qs": "^6.15.2",
 		"react-router-dom": "^5.3.4",
 		"@babel/runtime": "^7.29.7",
@@ -58,7 +58,7 @@
 		"@babel/preset-env": "^7.29.7",
 		"@babel/preset-react": "^7.29.7",
 		"@babel/preset-typescript": "^7.29.7",
-		"newspack-scripts": "5.10.0",
+		"newspack-scripts": "5.11.0-hotfix-wizard-stale-data-after-plugin-install.1",
 		"recursive-copy": "^2.0.0"
 	},
 	"babel": {

package/src/section-header/index.js

@@ -102,6 +102,14 @@ const SectionHeader = ( {
 						? badges.map( ( badge, i ) => <Badge key={ i } text={ badge.label } level={ badge.level || 'default' } /> )
 						: null }
 				</HeadingTag>
+				{ /* Secondary action before the overflow menu, so a promoted link reads as an action rather than sitting to the right of the kebab. */ }
+				{ secondaryAction && (
+					<div className="newspack-section-header__secondary-action">
+						<Button variant="link" href={ secondaryAction.href } onClick={ secondaryAction.action }>
+							{ secondaryAction.label }
+						</Button>
+					</div>
+				) }
 				{ menu?.length > 0 && (
 					<DropdownMenu className="newspack-section-header__menu" icon={ moreVertical } label={ __( 'More options', 'newspack-plugin' ) }>
 						{ () =>
@@ -120,13 +128,6 @@ const SectionHeader = ( {
 						}
 					</DropdownMenu>
 				) }
-				{ secondaryAction && (
-					<div className="newspack-section-header__secondary-action">
-						<Button variant="link" href={ secondaryAction.href } onClick={ secondaryAction.action }>
-							{ secondaryAction.label }
-						</Button>
-					</div>
-				) }
 			</div>
 		);
 	} else if ( typeof title === 'function' ) {

package/src/wizard/index.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { cloneElement, isValidElement, useEffect, useState, forwardRef } from '@wordpress/element';
+import { cloneElement, isValidElement, useEffect, useRef, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
@@ -126,6 +126,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;
 
@@ -139,14 +140,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,114 @@
+/**
+ * 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() );
+
+global.newspack_aux_data = { is_debug_mode: false };
+// The wizard footer links out to the docs; both globals are localized onto every
+// real wizard screen, and the footer's ExternalLink needs a string href.
+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 every Newspack wizard section has.
+const Section = ( { slug } ) => {
+	const wizardData = useWizardData( slug );
+	return <div>{ wizardData.settings ? 'Settings form' : null }</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.
+// Returns a counter so a test can assert how many times the wizard refetched.
+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 === `/newspack/v1/wizard/${ slug }` && '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 =>
+	render(
+		<Wizard
+			headerText="Test wizard"
+			apiSlug={ slug }
+			requiredPlugins={ [ 'woocommerce' ] }
+			sections={ [ { label: 'Configuration', path: '/configuration', render: () => <Section slug={ slug } /> } ] }
+		/>
+	);
+
+// 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 resolver cache is process-wide.
+		const slug = 'test-wizard-refetch';
+		const counts = mockEndpoints( slug );
+
+		renderWizard( slug );
+
+		// The first fetch runs before the plugin exists, so it fails.
+		await waitFor( () => expect( counts.wizard ).toBe( 1 ) );
+		expect( screen.queryByText( 'Settings form' ) ).not.toBeInTheDocument();
+
+		// Two buttons read "Activate": the plugin's own row and the footer's
+		// activate-all. The row button comes first in the DOM.
+		const [ activate ] = await screen.findAllByRole( 'button', { name: 'Activate' } );
+		fireEvent.click( activate );
+
+		// 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();
+		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 );
+	} );
+} );