woocommerce/plugins/woocommerce-admin/client/marketplace/components/connect-notice/connect-notice.tsx

/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { recordEvent } from '@woocommerce/tracks';

/**
 * Internal dependencies
 */
import { appendURLParams, 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'
		)
	);

	const handleClick = () => {
		recordEvent( 'woo_connect_notice_in_marketplace_clicked' );
		return true;
	};

	const handleClose = () => {
		localStorage.setItem( localStorageKey, new Date().toString() );
		recordEvent( 'woo_connect_notice_in_marketplace_dismissed' );
	};

	const handleLoad = () => {
		recordEvent( 'woo_connect_notice_in_marketplace_shown' );
	};

	const connectUrlWithUTM = appendURLParams( connectUrl(), [
		[ 'utm_source', 'pu' ],
		[ 'utm_campaign', 'pu_in_apps_screen_connect' ],
	] );

	return (
		<Notice
			id="woo-connect-notice"
			description={ description }
			isDismissible={ true }
			variant="error"
			onClose={ handleClose }
			onLoad={ handleLoad }
		>
			<Button
				href={ connectUrlWithUTM }
				variant="secondary"
				onClick={ handleClick }
			>
				{ __( 'Connect', 'woocommerce' ) }
			</Button>
		</Notice>
	);
}