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

package/dist/plugin-installer/index.js

@@ -0,0 +1,297 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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("react/jsx-runtime");
+/**
+ * Plugin Installer
+ */
+
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+const PLUGIN_STATE_NONE = 0;
+const PLUGIN_STATE_ACTIVE = 1;
+const PLUGIN_STATE_INSTALLING = 2;
+const PLUGIN_STATE_ERROR = 3;
+
+/**
+ * External dependencies.
+ */
+
+/**
+ * Plugin installer.
+ */
+class PluginInstaller extends _element.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      pluginInfo: {},
+      installationInitialized: false
+    };
+  }
+  componentDidMount = () => {
+    const {
+      plugins
+    } = this.props;
+    this.retrievePluginInfo(plugins).then(() => {
+      if (this.props.autoInstall) {
+        this.installAllPlugins();
+      }
+    });
+  };
+  componentDidUpdate = prevProps => {
+    const {
+      autoInstall,
+      plugins
+    } = this.props;
+    const {
+      installationInitialized
+    } = this.state;
+    if (plugins !== prevProps.plugins) {
+      this.retrievePluginInfo(plugins);
+    }
+    if (autoInstall && !installationInitialized) {
+      this.installAllPlugins();
+    }
+  };
+  retrievePluginInfo = plugins => {
+    return new Promise(resolve => {
+      (0, _apiFetch.default)({
+        path: '/newspack/v1/plugins/'
+      }).then(response => {
+        const pluginInfo = Object.keys(response).reduce((result, slug) => {
+          if (plugins.indexOf(slug) === -1) {
+            return result;
+          }
+          result[slug] = {
+            ...response[slug],
+            installationStatus: response[slug].Status === 'active' ? PLUGIN_STATE_ACTIVE : PLUGIN_STATE_NONE
+          };
+          return result;
+        }, {});
+        this.updatePluginInfo(pluginInfo).then(() => resolve());
+      });
+    });
+  };
+  installAllPlugins = () => {
+    const {
+      pluginInfo
+    } = this.state;
+    this.setState({
+      installationInitialized: true
+    });
+    const promises = Object.keys(pluginInfo).filter(slug => 'active' !== pluginInfo[slug].Status).map(slug => () => this.installPlugin(slug));
+    promises.reduce((promise, action) => promise.then(result => action().then(Array.prototype.concat.bind(result))), Promise.resolve([]));
+  };
+  installPlugin = slug => {
+    this.setInstallationStatus(slug, PLUGIN_STATE_INSTALLING);
+    const params = {
+      path: `/newspack/v1/plugins/${slug}/configure/`,
+      method: 'post'
+    };
+    return (0, _apiFetch.default)(params).then(response => {
+      const {
+        pluginInfo
+      } = this.state;
+      this.props.onInstalled(slug);
+      this.updatePluginInfo({
+        ...pluginInfo,
+        [slug]: {
+          ...response,
+          installationStatus: PLUGIN_STATE_ACTIVE
+        }
+      });
+    }).catch(error => {
+      this.setInstallationStatus(slug, PLUGIN_STATE_ERROR, error.message);
+    });
+  };
+  setChecked = (slug, checked) => {
+    const {
+      pluginInfo
+    } = this.state;
+    this.updatePluginInfo({
+      ...pluginInfo,
+      [slug]: {
+        ...pluginInfo[slug],
+        checked
+      }
+    });
+  };
+  setInstallationStatus = (slug, installationStatus, notification = null) => {
+    const {
+      pluginInfo
+    } = this.state;
+    this.updatePluginInfo({
+      ...pluginInfo,
+      [slug]: {
+        ...pluginInfo[slug],
+        installationStatus,
+        notification
+      }
+    });
+  };
+  updatePluginInfo = pluginInfo => {
+    return new Promise(resolve => {
+      const {
+        onStatus
+      } = this.props;
+      this.setState({
+        pluginInfo
+      }, () => {
+        const complete = Object.values(pluginInfo).every(plugin => {
+          return 'active' === plugin.Status;
+        });
+        onStatus({
+          complete,
+          pluginInfo
+        });
+        resolve();
+      });
+    });
+  };
+  classForInstallationStatus = status => {
+    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';
+    }
+  };
+
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      autoInstall,
+      isSmall,
+      withoutFooterButton
+    } = this.props;
+    const {
+      pluginInfo
+    } = this.state;
+    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.
+    const pluginInstalled = currentStatus => currentStatus === 'active' || currentStatus === 'inactive';
+    const buttonText = currentPluginStatuses.every(pluginInstalled) ? (0, _i18n.__)('Activate', 'newspack-plugin') : (0, _i18n.__)('Install', 'newspack-plugin');
+    const needsInstall = slugs.some(slug => {
+      const plugin = pluginInfo[slug];
+      return plugin.Status !== 'active' && plugin.installationStatus === PLUGIN_STATE_NONE;
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [(!pluginInfo || !Object.keys(pluginInfo).length) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "newspack-plugin-installer_is-waiting",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
+          isLeft: true
+        }), (0, _i18n.__)('Retrieving plugin information…', 'newspack-plugin')]
+      }), pluginInfo && slugs.length > 0 && slugs.map(slug => {
+        const plugin = pluginInfo[slug];
+        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 = 'inactive' === Status ? (0, _i18n.__)('Activating…') : (0, _i18n.__)('Installing…');
+        } else if (!installable) {
+          actionText = /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "newspack-plugin-installer__status",
+            children: [isAtomic ? (0, _i18n.__)('Contact Newspack support to install', 'newspack-plugin') : (0, _i18n.__)('Plugin must be installed manually', 'newspack-plugin'), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "newspack-checkbox-icon"
+            })]
+          });
+        } else if (Status === 'uninstalled') {
+          actionText = /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "newspack-plugin-installer__status",
+            children: [(0, _i18n.__)('Install', 'newspack'), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "newspack-checkbox-icon"
+            })]
+          });
+        } else if (Status === 'inactive') {
+          actionText = /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "newspack-plugin-installer__status",
+            children: [(0, _i18n.__)('Activate', 'newspack-plugin'), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "newspack-checkbox-icon"
+            })]
+          });
+        } else if (Status === 'active') {
+          actionText = /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "newspack-plugin-installer__status",
+            children: [(0, _i18n.__)('Installed', 'newspack-plugin'), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "newspack-checkbox-icon newspack-checkbox-icon--checked",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+                icon: _icons.check
+              })
+            })]
+          });
+        }
+        const classes = (0, _classnames.default)('newspack-action-card__plugin-installer', this.classForInstallationStatus(installationStatus));
+        const onClick = isButton ? () => this.installPlugin(slug) : null;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ActionCard, {
+          title: Name,
+          description: Description,
+          disabled: !installable,
+          actionText: actionText,
+          isSmall: isSmall,
+          isWaiting: isWaiting,
+          onClick: onClick,
+          notification: notification,
+          notificationLevel: "error",
+          notificationHTML: true,
+          className: classes
+        }, slug);
+      }), !withoutFooterButton && !autoInstall && pluginInfo && slugs.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-buttons-card",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+          disabled: !needsInstall,
+          isPrimary: true,
+          onClick: this.installAllPlugins,
+          children: buttonText
+        })
+      })]
+    });
+  }
+}
+PluginInstaller.defaultProps = {
+  onStatus: () => {},
+  onInstalled: () => {}
+};
+var _default = exports.default = PluginInstaller;

package/dist/{esm/plugin-installer → plugin-installer}/style.scss

@@ -2,7 +2,7 @@
  * Plugin Installer
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-card {
 	.newspack-plugin-installer__status {

package/dist/{cjs/plugin-settings → plugin-settings}/SettingsSection.js

@@ -10,17 +10,19 @@ var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 var _ = require("../");
 require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Ads Settings Section.
  */
+
 /**
  * WordPress dependencies
  */
-const __ = _i18n.__;
+
 /**
  * Internal dependencies
  */
+
 const isSelectControl = setting => {
   return Array.isArray(setting.options) && setting.options.length;
 };
@@ -95,7 +97,7 @@ const SettingsSection = props => {
   } else if (fields.length === 1) {
     columns = 1;
   }
-  return (0, _jsxRuntime.jsx)(_.ActionCard, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ActionCard, {
     isMedium: true,
     disabled: disabled,
     title: title,
@@ -105,25 +107,25 @@ const SettingsSection = props => {
     toggleOnChange: active !== null ? value => onUpdate({
       active: value
     }) : null,
-    actionContent: (active || null === active) && createFilter('buttons', (0, _jsxRuntime.jsx)(_.Button, {
+    actionContent: (active || null === active) && createFilter('buttons', /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
       variant: "primary",
       disabled: disabled || saveDisabled,
       onClick: () => {
         onUpdate();
         setSaveDisabled(true);
       },
-      children: __('Save Settings', 'newspack')
+      children: (0, _i18n.__)('Save Settings', 'newspack')
     })),
-    children: (active || active === null) && (0, _jsxRuntime.jsxs)(_element.Fragment, {
-      children: [error?.message && (0, _jsxRuntime.jsx)(_.Notice, {
+    children: (active || active === null) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+      children: [error?.message && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
         noticeText: error.message,
         isError: true
-      }), createFilter('beforeControls'), (0, _jsxRuntime.jsx)(_.Grid, {
+      }), createFilter('beforeControls'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Grid, {
         columns: columns,
         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, {
+          return (0, _hooks.applyFilters)(`newspack.settingsSection.${sectionKey}.control`, /*#__PURE__*/(0, _jsxRuntime.jsx)(Control, {
             ...getControlProps(setting)
           }, setting.key), {
             sectionKey,

package/dist/plugin-settings/index.js

@@ -0,0 +1,228 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+class PluginSettings extends _element.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      inFlight: false,
+      settings: {},
+      error: null
+    };
+  }
+  fetchSettings = () => {
+    const {
+      afterFetch,
+      pluginSlug,
+      isWizard
+    } = this.props;
+    this.setState({
+      inFlight: true
+    });
+    (0, _apiFetch.default)({
+      path: isWizard ? `/newspack/v1/wizard/${pluginSlug}/settings` : `/${pluginSlug}/v1/settings`
+    }).then(settings => {
+      this.setState({
+        settings,
+        error: null
+      });
+      if ('function' === typeof afterFetch) {
+        afterFetch(settings);
+      }
+    }).catch(error => {
+      this.setState({
+        error
+      });
+    }).finally(() => {
+      this.setState({
+        inFlight: false
+      });
+    });
+  };
+  componentDidMount() {
+    this.fetchSettings();
+  }
+  getSettingsValues = sectionKey => {
+    return this.state.settings[sectionKey]?.reduce((map, setting) => {
+      map[setting.key] = setting.value;
+      return map;
+    }, {}) || {};
+  };
+  handleSettingChange = sectionKey => (key, value) => {
+    const sectionSettings = [...this.state.settings[sectionKey]];
+    sectionSettings.forEach(setting => {
+      if (setting.key === key) {
+        setting.value = value;
+      }
+    });
+    this.setState({
+      settings: {
+        ...this.state.settings,
+        [sectionKey]: sectionSettings
+      }
+    });
+  };
+  handleSectionUpdate = sectionKey => data => {
+    const {
+      afterUpdate,
+      pluginSlug,
+      isWizard
+    } = this.props;
+    this.setState({
+      inFlight: true
+    });
+    (0, _apiFetch.default)({
+      path: isWizard ? `/newspack/v1/wizard/${pluginSlug}/settings` : `/${pluginSlug}/v1/settings`,
+      method: 'POST',
+      data: {
+        section: sectionKey,
+        settings: data ? data : this.getSettingsValues(sectionKey)
+      }
+    }).then(settings => {
+      this.setState({
+        settings: {
+          ...this.state.settings,
+          [sectionKey]: settings[sectionKey]
+        },
+        error: null
+      });
+      if ('function' === typeof afterUpdate) {
+        afterUpdate(settings);
+      }
+    }).catch(error => {
+      this.setState({
+        error
+      });
+    }).finally(() => {
+      this.setState({
+        inFlight: false
+      });
+    });
+  };
+
+  /**
+   * Get the section setting containing section information.
+   *
+   * @param {string} sectionKey The section name.
+   * @return {Object} The section setting.
+   */
+  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.
+   */
+  getSectionTitle = sectionKey => {
+    return this.getSectionInfo(sectionKey)?.description;
+  };
+
+  /**
+   * Get the section description.
+   *
+   * @param {string} sectionKey The section name.
+   * @return {string} The section description.
+   */
+  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.
+   */
+  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.
+   */
+  getSectionFields = sectionKey => {
+    return this.state.settings[sectionKey]?.filter(setting => setting.key && setting.key !== 'active');
+  };
+
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      title,
+      description,
+      hasGreyHeader,
+      children
+    } = this.props;
+    const {
+      settings,
+      inFlight,
+      error
+    } = this.state;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SectionHeader, {
+        title: title,
+        description: description
+      }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
+        isError: true,
+        noticeText: error.message
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)('newspack-plugin-settings', {
+          'newspack-wizard-section__is-loading': inFlight && !Object.keys(settings).length
+        }),
+        children: [Object.keys(settings).map(sectionKey => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsSection.default, {
+          disabled: inFlight,
+          sectionKey: sectionKey,
+          title: this.getSectionTitle(sectionKey),
+          description: this.getSectionDescription(sectionKey),
+          active: this.isSectionActive(sectionKey),
+          fields: this.getSectionFields(sectionKey),
+          onChange: this.handleSettingChange(sectionKey),
+          onUpdate: this.handleSectionUpdate(sectionKey),
+          hasGreyHeader: hasGreyHeader
+        }, sectionKey)), children]
+      })]
+    });
+  }
+}
+PluginSettings.defaultProps = {
+  title: (0, _i18n.__)('General Settings', 'newspack-plugin')
+};
+PluginSettings.Section = _SettingsSection.default;
+var _default = exports.default = PluginSettings;

package/dist/{cjs/plugin-settings → plugin-settings}/style.scss

@@ -1,4 +1,4 @@
-.newspack-card:not( .newspack-settings__no-border ) {
+.newspack-card:not(.newspack-settings__no-border) {
 	.newspack-action-card__region-children {
 		> .newspack-grid {
 			margin: 32px 0 0 !important;

package/dist/plugin-toggle/README.md

@@ -0,0 +1,53 @@
+# PluginToggle
+
+PluginToggle presents ActionCards for one or more plugins.
+
+Each ActionCard displays the name and description of the plugin. Clicking the ToggleControl installs/activates or uninstalls the plugin. If a plugin is installed, there will be a Handoff link on the right. Optionally the href and label of this link can be overridden.
+
+Each plugin accepts a shouldRefreshAfterUpdate param. If true, the page will be reloaded after the plugin is installed or uninstalled. Updating ensures that the WordPress dashboard accurately represents current state, e.g. that newly installed plugins appear in menus.
+
+### Usage
+
+ActionCards for WooCommerce and Instant Articles for WP. Both will have Handoff links.
+
+```
+<PluginToggle
+	plugins={ {
+		woocommerce: true,
+		'fb-instant-articles': true,
+	} }
+/>
+```
+
+ActionCards for WooCommerce and Instant Articles for WP with custom text and URL for links.
+
+```
+<PluginToggle
+	plugins={ {
+		woocommerce: {
+			actionText: __( 'Use WooCommerce' ),
+			href: '/wp-admin/admin.php?page=newspack',
+		},
+		'fb-instant-articles': {
+			actionText: __( 'Configure Instant Articles' ),
+			href: '/wp-admin/admin.php?page=newspack',
+		},
+	} }
+/>
+```
+
+ActionCards for WooCommerce and Instant Articles for WP. Page will refresh after WooCommerce installation or deinstallation.
+
+```
+<PluginToggle
+	plugins={ {
+		woocommerce: {
+			shouldRefreshAfterUpdate: true,
+		},
+		'fb-instant-articles': {
+			actionText: __( 'Configure Instant Articles' ),
+			href: '/wp-admin/admin.php?page=newspack',
+		},
+	} }
+/>
+```