woocommerce/plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/subscriptions-expired-expiring-notice.tsx

/**
 * External dependencies
 */
import { Button } from '@wordpress/components';
import apiFetch from '@wordpress/api-fetch';
import { recordEvent } from '@woocommerce/tracks';

/**
 * Internal dependencies
 */
import Notice from '~/marketplace/components/notice/notice';
import { getAdminSetting } from '~/utils/admin-settings';

export interface SubscriptionsExpiredExpiringNoticeProps {
	type: string;
}

export interface TrackEvents {
	shown: string;
	clicked: string;
	dismissed: string;
}

export default function SubscriptionsExpiredExpiringNotice(
	props: SubscriptionsExpiredExpiringNoticeProps
): JSX.Element | null {
	const { type } = props;
	const wccomSettings = getAdminSetting( 'wccomHelper', {} );
	const eventKeys: Record< string, TrackEvents > = {
		'woo-subscription-expired-notice': {
			shown: 'woo_subscription_expired_notice_in_marketplace_shown',
			clicked: 'woo_subscription_expired_notice_in_marketplace_clicked',
			dismissed:
				'woo_subscription_expired_notice_in_marketplace_dismissed',
		},
		'woo-subscription-expiring-notice': {
			shown: 'woo_subscription_expiring_notice_in_marketplace_shown',
			clicked: 'woo_subscription_expiring_notice_in_marketplace_clicked',
			dismissed:
				'woo_subscription_expiring_notice_in_marketplace_dismissed',
		},
	};

	let notice = null;
	let notice_id = '';
	const dismiss_notice_nonce = wccomSettings?.dismissNoticeNonce || '';

	if ( type === 'expired' ) {
		notice = wccomSettings?.subscription_expired_notice || {};
		notice_id = 'woo-subscription-expired-notice';
	} else if ( type === 'expiring' ) {
		notice = wccomSettings?.subscription_expiring_notice || {};
		notice_id = 'woo-subscription-expiring-notice';
	} else {
		return null;
	}

	if ( ! wccomSettings.isConnected || ! notice?.description ) {
		return null;
	}

	const handleClose = () => {
		recordEvent( eventKeys[ notice_id ].dismissed );
		const data = { notice_id, dismiss_notice_nonce };
		apiFetch( {
			path: `/wc-admin/notice/dismiss`,
			method: 'POST',
			data,
		} );
	};

	function handleClick() {
		recordEvent( eventKeys[ notice_id ].clicked );
	}

	function handleLoad() {
		recordEvent( eventKeys[ notice_id ].shown );
	}

	return (
		<Notice
			id={ notice_id }
			description={ notice.description }
			isDismissible={ true }
			variant="error"
			onClose={ handleClose }
			onLoad={ handleLoad }
		>
			<Button
				href={ notice.button_link }
				variant="secondary"
				onClick={ handleClick }
			>
				{ notice.button_text }
			</Button>
		</Notice>
	);
}