newspack-components 2.1.0 → 2.2.1

package/dist/cjs/plugin-installer/index.js

@@ -1,42 +1,34 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
-
 var _element = require("@wordpress/element");
-
 var _i18n = require("@wordpress/i18n");
-
 var _icons = require("@wordpress/icons");
-
 var _ = require("../");
-
 require("./style.scss");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Plugin Installer
  */
-
 /**
  * WordPress dependencies.
  */
 const __ = _i18n.__;
+/**
+ * Internal dependencies.
+ */
 const PLUGIN_STATE_NONE = 0;
 const PLUGIN_STATE_ACTIVE = 1;
 const PLUGIN_STATE_INSTALLING = 2;
 const PLUGIN_STATE_ERROR = 3;
+
 /**
  * External dependencies.
  */
@@ -47,7 +39,6 @@ const PLUGIN_STATE_ERROR = 3;
 class PluginInstaller extends _element.Component {
   constructor() {
     var _this;
-
     super(...arguments);
     _this = this;
     (0, _defineProperty2.default)(this, "componentDidMount", () => {
@@ -68,11 +59,9 @@ class PluginInstaller extends _element.Component {
       const {
         installationInitialized
       } = this.state;
-
       if (plugins !== prevProps.plugins) {
         this.retrievePluginInfo(plugins);
       }
-
       if (autoInstall && !installationInitialized) {
         this.installAllPlugins();
       }
@@ -86,8 +75,8 @@ class PluginInstaller extends _element.Component {
             if (plugins.indexOf(slug) === -1) {
               return result;
             }
-
-            result[slug] = { ...response[slug],
+            result[slug] = {
+              ...response[slug],
               installationStatus: response[slug].Status === 'active' ? PLUGIN_STATE_ACTIVE : PLUGIN_STATE_NONE
             };
             return result;
@@ -117,8 +106,10 @@ class PluginInstaller extends _element.Component {
           pluginInfo
         } = this.state;
         this.props.onInstalled(slug);
-        this.updatePluginInfo({ ...pluginInfo,
-          [slug]: { ...response,
+        this.updatePluginInfo({
+          ...pluginInfo,
+          [slug]: {
+            ...response,
             installationStatus: PLUGIN_STATE_ACTIVE
           }
         });
@@ -130,8 +121,10 @@ class PluginInstaller extends _element.Component {
       const {
         pluginInfo
       } = this.state;
-      this.updatePluginInfo({ ...pluginInfo,
-        [slug]: { ...pluginInfo[slug],
+      this.updatePluginInfo({
+        ...pluginInfo,
+        [slug]: {
+          ...pluginInfo[slug],
           checked
         }
       });
@@ -141,9 +134,10 @@ class PluginInstaller extends _element.Component {
       const {
         pluginInfo
       } = _this.state;
-
-      _this.updatePluginInfo({ ...pluginInfo,
-        [slug]: { ...pluginInfo[slug],
+      _this.updatePluginInfo({
+        ...pluginInfo,
+        [slug]: {
+          ...pluginInfo[slug],
           installationStatus,
           notification
         }
@@ -172,13 +166,10 @@ class PluginInstaller extends _element.Component {
       switch (status) {
         case PLUGIN_STATE_ACTIVE:
           return 'newspack-plugin-installer__status-active';
-
         case PLUGIN_STATE_INSTALLING:
           return 'newspack-plugin-installer__status-installing';
-
         case PLUGIN_STATE_ERROR:
           return 'newspack-plugin-installer__status-error';
-
         default:
           return 'newspack-plugin-installer__status-none';
       }
@@ -188,7 +179,6 @@ class PluginInstaller extends _element.Component {
       installationInitialized: false
     };
   }
-
   /**
    * Render.
    */
@@ -201,16 +191,20 @@ class PluginInstaller extends _element.Component {
     const {
       pluginInfo
     } = this.state;
-    const slugs = Object.keys(pluginInfo); // Store all plugin status info for installer button text value based on current status.
+    const {
+      is_atomic: isAtomic
+    } = window;
+    const slugs = Object.keys(pluginInfo);
 
+    // Store all plugin status info for installer button text value based on current status.
     const currentPluginStatuses = [];
     slugs.forEach(slug => {
       const plugin = pluginInfo[slug];
       currentPluginStatuses.push(plugin.Status);
-    }); // Make sure plugin status falls in either one of these, to handle button text.
+    });
 
+    // Make sure plugin status falls in either one of these, to handle button text.
     const pluginInstalled = currentStatus => currentStatus === 'active' || currentStatus === 'inactive';
-
     const buttonText = currentPluginStatuses.every(pluginInstalled) ? __('Activate', 'newspack') : __('Install', 'newspack');
     const needsInstall = slugs.some(slug => {
       const plugin = pluginInfo[slug];
@@ -227,16 +221,24 @@ class PluginInstaller extends _element.Component {
         const {
           Name,
           Description,
+          Download,
           Status,
           installationStatus,
           notification
         } = plugin;
         const isWaiting = installationStatus === PLUGIN_STATE_INSTALLING;
         const isButton = !isWaiting && Status !== 'active';
+        const installable = Download || pluginInstalled(Status);
         let actionText;
-
         if (installationStatus === PLUGIN_STATE_INSTALLING) {
-          actionText = __('Installing…');
+          actionText = 'inactive' === Status ? __('Activating…') : __('Installing…');
+        } else if (!installable) {
+          actionText = (0, _jsxRuntime.jsxs)("span", {
+            className: "newspack-plugin-installer__status",
+            children: [isAtomic ? __('Contact Newspack support to install', 'newspack') : __('Plugin must be installed manually', 'newspack'), (0, _jsxRuntime.jsx)("span", {
+              className: "newspack-checkbox-icon"
+            })]
+          });
         } else if (Status === 'uninstalled') {
           actionText = (0, _jsxRuntime.jsxs)("span", {
             className: "newspack-plugin-installer__status",
@@ -262,12 +264,12 @@ class PluginInstaller extends _element.Component {
             })]
           });
         }
-
         const classes = (0, _classnames.default)('newspack-action-card__plugin-installer', this.classForInstallationStatus(installationStatus));
         const onClick = isButton ? () => this.installPlugin(slug) : null;
         return (0, _jsxRuntime.jsx)(_.ActionCard, {
           title: Name,
           description: Description,
+          disabled: !installable,
           actionText: actionText,
           isSmall: isSmall,
           isWaiting: isWaiting,
@@ -288,9 +290,7 @@ class PluginInstaller extends _element.Component {
       })]
     });
   }
-
 }
-
 PluginInstaller.defaultProps = {
   onStatus: () => {},
   onInstalled: () => {}

package/dist/cjs/plugin-installer/style.scss

@@ -2,7 +2,7 @@
  * Plugin Installer
  */
 
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-card {
 	.newspack-plugin-installer__status {
@@ -35,10 +35,10 @@
 	}
 
 	&.newspack-plugin-installer__status-active {
-		box-shadow: inset 4px 0 0 $alert-green;
+		box-shadow: inset 4px 0 0 wp-colors.$alert-green;
 
 		.newspack-plugin-installer__checkbox {
-			background: $alert-green;
+			background: wp-colors.$alert-green;
 			box-shadow: none;
 		}
 
@@ -48,12 +48,12 @@
 	}
 
 	&.newspack-plugin-installer__status-error {
-		box-shadow: inset 4px 0 0 $alert-red;
+		box-shadow: inset 4px 0 0 wp-colors.$alert-red;
 	}
 
 	&.newspack-plugin-installer__status-installing,
 	&.newspack-plugin-installer__status-none {
-		box-shadow: inset 4px 0 0 $gray-100;
+		box-shadow: inset 4px 0 0 wp-colors.$gray-100;
 	}
 
 	// Is Small

package/dist/cjs/plugin-settings/SettingsSection.js

@@ -4,49 +4,38 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _element = require("@wordpress/element");
-
 var _hooks = require("@wordpress/hooks");
-
 var _i18n = require("@wordpress/i18n");
-
 var _components = require("@wordpress/components");
-
 var _ = require("../");
-
 require("./style.scss");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Ads Settings Section.
  */
-
 /**
  * WordPress dependencies
  */
 const __ = _i18n.__;
-
+/**
+ * Internal dependencies
+ */
 const isSelectControl = setting => {
   return Array.isArray(setting.options) && setting.options.length;
 };
-
 const getControlComponent = setting => {
   if (isSelectControl(setting)) {
     return _.SelectControl;
   }
-
   switch (setting.type) {
     case 'checkbox':
     case 'boolean':
       return _components.CheckboxControl;
-
     default:
       return _.TextControl;
   }
 };
-
 const getControlType = setting => {
   switch (setting.type) {
     case 'int':
@@ -54,24 +43,20 @@ const getControlType = setting => {
     case 'float':
     case 'number':
       return 'number';
-
     case 'string':
     case 'text':
       return 'text';
-
     case 'password':
       return 'password';
-
     case 'boolean':
     case 'checkbox':
       return 'checkbox';
-
     default:
       return null;
   }
 };
-
 const SettingsSection = props => {
+  const [saveDisabled, setSaveDisabled] = (0, _element.useState)(true);
   const {
     error,
     sectionKey,
@@ -83,7 +68,6 @@ const SettingsSection = props => {
     onChange,
     onUpdate
   } = props;
-
   const getControlProps = setting => ({
     disabled,
     name: `${setting.section}_${setting.key}`,
@@ -99,22 +83,19 @@ const SettingsSection = props => {
     checked: setting.type === 'boolean' ? !!setting.value : null,
     onChange: value => {
       onChange(setting.key, value);
+      setSaveDisabled(false);
     }
   });
-
   const createFilter = function (name) {
     let defaultComponent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     return (0, _hooks.applyFilters)(`newspack.settingSection.${sectionKey}.${name}`, defaultComponent, props);
   };
-
   let columns = 2;
-
   if (fields.length % 3 === 0) {
     columns = 3;
   } else if (fields.length === 1) {
     columns = 1;
   }
-
   return (0, _jsxRuntime.jsx)(_.ActionCard, {
     isMedium: true,
     disabled: disabled,
@@ -127,9 +108,10 @@ const SettingsSection = props => {
     }) : null,
     actionContent: (active || null === active) && createFilter('buttons', (0, _jsxRuntime.jsx)(_.Button, {
       variant: "primary",
-      disabled: disabled,
+      disabled: disabled || saveDisabled,
       onClick: () => {
         onUpdate();
+        setSaveDisabled(true);
       },
       children: __('Save Settings', 'newspack')
     })),
@@ -142,8 +124,8 @@ const SettingsSection = props => {
         gutter: 32,
         children: fields.map(setting => {
           const Control = getControlComponent(setting); // eslint-disable-line @wordpress/no-unused-vars-before-return, no-unused-vars
-
-          return (0, _hooks.applyFilters)(`newspack.settingsSection.${sectionKey}.control`, (0, _jsxRuntime.jsx)(Control, { ...getControlProps(setting)
+          return (0, _hooks.applyFilters)(`newspack.settingsSection.${sectionKey}.control`, (0, _jsxRuntime.jsx)(Control, {
+            ...getControlProps(setting)
           }, setting.key), {
             sectionKey,
             setting,
@@ -154,6 +136,5 @@ const SettingsSection = props => {
     })
   });
 };
-
 var _default = SettingsSection;
 exports.default = _default;

package/dist/cjs/plugin-settings/index.js

@@ -1,37 +1,28 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
-
 var _element = require("@wordpress/element");
-
 var _i18n = require("@wordpress/i18n");
-
 var _ = require("../");
-
 var _SettingsSection = _interopRequireDefault(require("./SettingsSection"));
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * External dependencies
  */
-
 /**
  * WordPress dependencies.
  */
+/**
+ * Internal dependencies.
+ */
 const __ = _i18n.__;
-
 class PluginSettings extends _element.Component {
   constructor() {
     super(...arguments);
@@ -51,7 +42,6 @@ class PluginSettings extends _element.Component {
           settings,
           error: null
         });
-
         if ('function' === typeof afterFetch) {
           afterFetch(settings);
         }
@@ -79,7 +69,8 @@ class PluginSettings extends _element.Component {
         }
       });
       this.setState({
-        settings: { ...this.state.settings,
+        settings: {
+          ...this.state.settings,
           [sectionKey]: sectionSettings
         }
       });
@@ -102,10 +93,12 @@ class PluginSettings extends _element.Component {
         }
       }).then(settings => {
         this.setState({
-          settings,
+          settings: {
+            ...this.state.settings,
+            [sectionKey]: settings[sectionKey]
+          },
           error: null
         });
-
         if ('function' === typeof afterUpdate) {
           afterUpdate(settings);
         }
@@ -119,27 +112,55 @@ class PluginSettings extends _element.Component {
         });
       });
     });
+    /**
+     * Get the section setting containing section information.
+     *
+     * @param {string} sectionKey The section name.
+     * @return {Object} The section setting.
+     */
     (0, _defineProperty2.default)(this, "getSectionInfo", sectionKey => {
       return this.state.settings[sectionKey]?.find(setting => !setting.key || setting.key === 'active');
     });
+    /**
+     * Get the section title.
+     *
+     * @param {string} sectionKey The section name.
+     * @return {string} The section title.
+     */
     (0, _defineProperty2.default)(this, "getSectionTitle", sectionKey => {
       return this.getSectionInfo(sectionKey)?.description;
     });
+    /**
+     * Get the section description.
+     *
+     * @param {string} sectionKey The section name.
+     * @return {string} The section description.
+     */
     (0, _defineProperty2.default)(this, "getSectionDescription", sectionKey => {
       return this.getSectionInfo(sectionKey)?.help;
     });
+    /**
+     * Get whether a section is active.
+     *
+     * @param {string} sectionKey The section name.
+     * @return {?boolean} Whether the section is active or not. Null if the section is not found or does not support activation.
+     */
     (0, _defineProperty2.default)(this, "isSectionActive", sectionKey => {
       const {
         settings
       } = this.state;
       const activation = settings[sectionKey]?.find(setting => setting.key === 'active');
-
       if (!activation) {
         return null;
       }
-
       return activation.value;
     });
+    /**
+     * Get list of section field settings.
+     *
+     * @param {string} sectionKey The section name.
+     * @return {?Array} List of section fields.
+     */
     (0, _defineProperty2.default)(this, "getSectionFields", sectionKey => {
       return this.state.settings[sectionKey]?.filter(setting => setting.key && setting.key !== 'active');
     });
@@ -149,11 +170,9 @@ class PluginSettings extends _element.Component {
       error: null
     };
   }
-
   componentDidMount() {
     this.fetchSettings();
   }
-
   /**
    * Render.
    */
@@ -194,9 +213,7 @@ class PluginSettings extends _element.Component {
       })]
     });
   }
-
 }
-
 PluginSettings.defaultProps = {
   title: __('General Settings', 'newspack')
 };