Add notice to connect to woocommerce.com in wc settings and marketplace (#45536)
* add a woo.com connect notice in the plugin list for unconnected store * add an extra notice string for store that runs outdated woo plugins * add connect page hyoerlink to the plugin notice * add changelog * add comment for maybe_show_connect_notice_in_plugin_list() * fix linter error * use installed local woo plugin as the counter of extra notices * only show woo connect notice in the woocommerce settings page * add woocom connect notice component * add woocom connect notice component to the content component * add extra notice in the woocom connect notice component based on the local woo plugins count * persist dismissal of woo connect notice in the wc admin settings page * update changelog * use update-check-public for unconnected stores * use information from update-check-public API to determine notice show logic * re-show dismissed connect woocom notice after 1 month * add re-show notice logic for react admin page of woo connect notice * fix identation * differentiate local storage key for notice dismissal * move woo connect notice script to different file * rename to connectnotice * fix linter issue * fix linter issue * update woo.com to woocommerce.com * update woo.com to woocommerce.com in comment * capitalize the WooCommerce.com Co-authored-by: Leif Singer <leif@automattic.com> * capitalize WooCommerce.com --------- Co-authored-by: Leif Singer <leif@automattic.com>
This commit is contained in:
parent
c0424210ab
commit
1fddbb1001
|
@ -0,0 +1,76 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Button } from '@wordpress/components';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { connectUrl } from '~/marketplace/utils/functions';
|
||||
import Notice from '~/marketplace/components/notice/notice';
|
||||
import { getAdminSetting } from '~/utils/admin-settings';
|
||||
|
||||
export default function ConnectNotice(): JSX.Element | null {
|
||||
const localStorageKey = 'woo-connect-notice-marketplace-dismissed';
|
||||
const wccomSettings = getAdminSetting( 'wccomHelper', {} );
|
||||
const noticeType = wccomSettings?.woocomConnectNoticeType || 'none';
|
||||
|
||||
if ( noticeType === 'none' ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const lastDismissed = localStorage.getItem( localStorageKey );
|
||||
const parsedDismissedDate = new Date( lastDismissed || '' );
|
||||
const aMonthAgo = new Date();
|
||||
aMonthAgo.setMonth( aMonthAgo.getMonth() - 1 );
|
||||
|
||||
// try to re-show the notice if it was dismissed more than a month ago.
|
||||
// removing these 2 local storage items will make the notice reappear.
|
||||
if (
|
||||
lastDismissed === null ||
|
||||
isNaN( parsedDismissedDate.valueOf() ) ||
|
||||
aMonthAgo.valueOf() > parsedDismissedDate.valueOf()
|
||||
) {
|
||||
localStorage.removeItem(
|
||||
'wc-marketplaceNoticeClosed-woo-connect-notice'
|
||||
);
|
||||
localStorage.removeItem( localStorageKey );
|
||||
}
|
||||
|
||||
let description = '';
|
||||
|
||||
if ( noticeType === 'long' ) {
|
||||
description = description.concat(
|
||||
__(
|
||||
'Your store might be at risk as you are running old versions of WooCommerce plugins.',
|
||||
'woocommerce'
|
||||
)
|
||||
);
|
||||
|
||||
description = description.concat( ' ' );
|
||||
}
|
||||
|
||||
description = description.concat(
|
||||
__(
|
||||
'<strong>Connect your store to WooCommerce.com</strong> to get updates and streamlined support for your subscriptions.',
|
||||
'woocommerce'
|
||||
)
|
||||
);
|
||||
|
||||
return (
|
||||
<Notice
|
||||
id="woo-connect-notice"
|
||||
description={ description }
|
||||
isDismissible={ true }
|
||||
variant="error"
|
||||
onClose={ () => {
|
||||
localStorage.setItem( localStorageKey, new Date().toString() );
|
||||
} }
|
||||
>
|
||||
<Button href={ connectUrl() } variant="secondary">
|
||||
{ __( 'Connect', 'woocommerce' ) }
|
||||
</Button>
|
||||
</Notice>
|
||||
);
|
||||
}
|
|
@ -23,6 +23,7 @@ import {
|
|||
} from '../../utils/tracking';
|
||||
import InstallNewProductModal from '../install-flow/install-new-product-modal';
|
||||
import Promotions from '../promotions/promotions';
|
||||
import ConnectNotice from '~/marketplace/components/connect-notice/connect-notice';
|
||||
|
||||
export default function Content(): JSX.Element {
|
||||
const marketplaceContextValue = useContext( MarketplaceContext );
|
||||
|
@ -137,6 +138,7 @@ export default function Content(): JSX.Element {
|
|||
<div className="woocommerce-marketplace__content">
|
||||
<Promotions />
|
||||
<InstallNewProductModal products={ products } />
|
||||
<ConnectNotice />
|
||||
{ renderContent() }
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -18,6 +18,7 @@ export interface NoticeProps {
|
|||
icon?: string;
|
||||
isDismissible: boolean;
|
||||
variant: string;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
type IconKey = keyof typeof iconMap;
|
||||
|
@ -37,6 +38,7 @@ export default function Notice( props: NoticeProps ): JSX.Element | null {
|
|||
icon,
|
||||
isDismissible = true,
|
||||
variant = 'info',
|
||||
onClose,
|
||||
} = props;
|
||||
const [ isVisible, setIsVisible ] = useState(
|
||||
localStorage.getItem( `wc-marketplaceNoticeClosed-${ id }` ) !== 'true'
|
||||
|
@ -45,6 +47,9 @@ export default function Notice( props: NoticeProps ): JSX.Element | null {
|
|||
const handleClose = () => {
|
||||
setIsVisible( false );
|
||||
localStorage.setItem( `wc-marketplaceNoticeClosed-${ id }`, 'true' );
|
||||
if ( typeof onClose === 'function' ) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
if ( ! isVisible ) return null;
|
||||
|
|
|
@ -0,0 +1,32 @@
|
|||
window.jQuery( document ).ready( function () {
|
||||
// hide the notice when the customer clicks the dismiss button up until 1 month, then it will be shown again.
|
||||
const wooConnectNoticeSelector = '.woo-connect-notice';
|
||||
const localStorageKey = 'woo-connect-notice-settings-dismissed';
|
||||
|
||||
window
|
||||
.jQuery( wooConnectNoticeSelector )
|
||||
.on( 'click', 'button.notice-dismiss', function () {
|
||||
window.localStorage.setItem(
|
||||
localStorageKey,
|
||||
new Date().toString()
|
||||
);
|
||||
} );
|
||||
|
||||
let shouldHideNotice = false;
|
||||
|
||||
const savedDismissedDate = window.localStorage.getItem( localStorageKey );
|
||||
const parsedDismissedDate = new Date( savedDismissedDate || '' );
|
||||
const aMonthAgo = new Date();
|
||||
aMonthAgo.setMonth( aMonthAgo.getMonth() - 1 );
|
||||
|
||||
if (
|
||||
savedDismissedDate &&
|
||||
aMonthAgo.valueOf() < parsedDismissedDate.valueOf()
|
||||
) {
|
||||
shouldHideNotice = true;
|
||||
}
|
||||
|
||||
if ( shouldHideNotice ) {
|
||||
window.jQuery( wooConnectNoticeSelector ).remove();
|
||||
}
|
||||
} );
|
|
@ -73,6 +73,7 @@ const wpAdminScripts = [
|
|||
'shipping-settings-region-picker',
|
||||
'command-palette',
|
||||
'command-palette-analytics',
|
||||
'woo-connect-notice',
|
||||
];
|
||||
const getEntryPoints = () => {
|
||||
const entryPoints = {
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Add a connect to woocommerce.com notices for unconnected stores in the wc settings and wc marketplace page.
|
|
@ -50,6 +50,8 @@ class WC_Helper_Admin {
|
|||
$installed_products
|
||||
);
|
||||
|
||||
$woo_connect_notice_type = WC_Helper_Updater::get_woo_connect_notice_type();
|
||||
|
||||
$settings['wccomHelper'] = array(
|
||||
'isConnected' => WC_Helper::is_site_connected(),
|
||||
'connectURL' => self::get_connection_url(),
|
||||
|
@ -63,6 +65,7 @@ class WC_Helper_Admin {
|
|||
'wooUpdateManagerInstallUrl' => WC_Woo_Update_Manager_Plugin::generate_install_url(),
|
||||
'wooUpdateManagerPluginSlug' => WC_Woo_Update_Manager_Plugin::WOO_UPDATE_MANAGER_SLUG,
|
||||
'wooUpdateCount' => WC_Helper_Updater::get_updates_count_based_on_site_status(),
|
||||
'woocomConnectNoticeType' => $woo_connect_notice_type,
|
||||
);
|
||||
|
||||
return $settings;
|
||||
|
|
|
@ -557,6 +557,45 @@ class WC_Helper_Updater {
|
|||
return $count;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the type of woo connect notice to be shown in the WC Settings and Marketplace pages.
|
||||
* - If a store is connected to woocommerce.com or has no installed woo plugins, return 'none'.
|
||||
* - If a store has installed woo plugins but no updates, return 'short'.
|
||||
* - If a store has an installed woo plugin with update, return 'long'.
|
||||
*
|
||||
* @return string The notice type, 'none', 'short', or 'long'.
|
||||
*/
|
||||
public static function get_woo_connect_notice_type() {
|
||||
if ( WC_Helper::is_site_connected() ) {
|
||||
return 'none';
|
||||
}
|
||||
|
||||
$woo_plugins = WC_Helper::get_local_woo_plugins();
|
||||
|
||||
if ( empty( $woo_plugins ) ) {
|
||||
return 'none';
|
||||
}
|
||||
|
||||
$update_data = self::get_update_data();
|
||||
|
||||
if ( empty( $update_data ) ) {
|
||||
return 'short';
|
||||
}
|
||||
|
||||
// Scan local plugins.
|
||||
foreach ( $woo_plugins as $plugin ) {
|
||||
if ( empty( $update_data[ $plugin['_product_id'] ] ) ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if ( version_compare( $plugin['Version'], $update_data[ $plugin['_product_id'] ]['version'], '<' ) ) {
|
||||
return 'long';
|
||||
}
|
||||
}
|
||||
|
||||
return 'short';
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the updates count markup.
|
||||
*
|
||||
|
|
|
@ -13,7 +13,10 @@ use ActionScheduler_QueueRunner;
|
|||
use Automatic_Upgrader_Skin;
|
||||
use Automattic\WooCommerce\Admin\PluginsInstallLoggers\AsyncPluginsInstallLogger;
|
||||
use Automattic\WooCommerce\Admin\PluginsInstallLoggers\PluginsInstallLogger;
|
||||
use Automattic\WooCommerce\Internal\Admin\WCAdminAssets;
|
||||
use Plugin_Upgrader;
|
||||
use WC_Helper;
|
||||
use WC_Helper_Updater;
|
||||
use WP_Error;
|
||||
use WP_Upgrader;
|
||||
|
||||
|
@ -35,6 +38,8 @@ class PluginsHelper {
|
|||
add_action( 'woocommerce_plugins_install_callback', array( __CLASS__, 'install_plugins' ), 10, 2 );
|
||||
add_action( 'woocommerce_plugins_install_and_activate_async_callback', array( __CLASS__, 'install_and_activate_plugins_async_callback' ), 10, 2 );
|
||||
add_action( 'woocommerce_plugins_activate_callback', array( __CLASS__, 'activate_plugins' ), 10, 2 );
|
||||
add_action( 'admin_notices', array( __CLASS__, 'maybe_show_connect_notice_in_plugin_list' ) );
|
||||
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'maybe_enqueue_scripts_for_connect_notice' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -532,4 +537,67 @@ class PluginsHelper {
|
|||
return self::get_action_data( $actions );
|
||||
}
|
||||
|
||||
/**
|
||||
* Show notices to connect to woocommerce.com for unconnected store in the plugin list.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public static function maybe_show_connect_notice_in_plugin_list() {
|
||||
if ( 'woocommerce_page_wc-settings' !== get_current_screen()->id ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$notice_type = WC_Helper_Updater::get_woo_connect_notice_type();
|
||||
|
||||
if ( 'none' === $notice_type ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$notice_string = '';
|
||||
|
||||
if ( 'long' === $notice_type ) {
|
||||
$notice_string .= __( 'Your store might be at risk as you are running old versions of WooCommerce plugins.', 'woocommerce' );
|
||||
$notice_string .= ' ';
|
||||
}
|
||||
|
||||
$connect_page_url = add_query_arg(
|
||||
array(
|
||||
'page' => 'wc-admin',
|
||||
'tab' => 'my-subscriptions',
|
||||
'path' => rawurlencode( '/extensions' ),
|
||||
),
|
||||
admin_url( 'admin.php' )
|
||||
);
|
||||
|
||||
$notice_string .= sprintf(
|
||||
/* translators: %s: Connect page URL */
|
||||
__( '<a href="%s">Connect your store</a> to WooCommerce.com to get updates and streamlined support for your subscriptions.', 'woocommerce' ),
|
||||
esc_url( $connect_page_url )
|
||||
);
|
||||
|
||||
echo '<div class="woo-connect-notice notice notice-error is-dismissible">
|
||||
<p class="widefat">' . wp_kses_post( $notice_string ) . '</p>
|
||||
</div>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue scripts for connect notice.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public static function maybe_enqueue_scripts_for_connect_notice() {
|
||||
if ( 'woocommerce_page_wc-settings' !== get_current_screen()->id ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$notice_type = WC_Helper_Updater::get_woo_connect_notice_type();
|
||||
|
||||
if ( 'none' === $notice_type ) {
|
||||
return;
|
||||
}
|
||||
|
||||
WCAdminAssets::register_script( 'wp-admin-scripts', 'woo-connect-notice' );
|
||||
wp_enqueue_script( 'woo-connect-notice' );
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue