Fetch & display marketplace promotions (#44840)

* Fetch & display marketplace promotions

* add changelog entry

* Pass promos via inline JS, demove unused JS file, rely on transient only

* Return early if not on expected page

* Compare dates in UTC

* remove unused global userLocale

* Small tweaks.

* TypeScript linter errors.

* fix TS lint

---------

Co-authored-by: Remi Corson <1649788+corsonr@users.noreply.github.com>
Co-authored-by: And Finally <andfinally@users.noreply.github.com>

plugins/woocommerce-admin/client/marketplace/components/content/content.tsx

@@ -22,6 +22,7 @@ import {
 	recordLegacyTabView,
 } from '../../utils/tracking';
 import InstallNewProductModal from '../install-flow/install-new-product-modal';
+import Promotions from '../promotions/promotions';
 
 export default function Content(): JSX.Element {
 	const marketplaceContextValue = useContext( MarketplaceContext );
@@ -134,6 +135,7 @@ export default function Content(): JSX.Element {
 
 	return (
 		<div className="woocommerce-marketplace__content">
+			<Promotions />
 			<InstallNewProductModal products={ products } />
 			{ renderContent() }
 		</div>

plugins/woocommerce-admin/client/marketplace/components/promotions/promotions.tsx

@@ -0,0 +1,118 @@
+/**
+ * Internal dependencies
+ */
+import { LOCALE } from '../../../utils/admin-settings';
+import Notice from '../notice/notice';
+
+declare global {
+	interface Window {
+		wc: {
+			marketplace?: {
+				promotions: Promotion[];
+			};
+		};
+	}
+}
+
+type Promotion = {
+	date_from_gmt: string;
+	date_to_gmt: string;
+	format: string;
+	pages: Page[];
+	position: string;
+	content: { [ locale: string ]: string };
+	icon?: string | undefined;
+	is_dismissible?: boolean;
+	menu_item_id?: string;
+	style?: string;
+};
+
+type Page = {
+	page: string;
+	path: string;
+	tab?: string;
+};
+
+const Promotions: () => null | JSX.Element = () => {
+	const urlParams = new URLSearchParams( window.location.search );
+	const currentPage = urlParams.get( 'page' );
+
+	// Check if the current page is not 'wc-admin'
+	if ( currentPage !== 'wc-admin' ) {
+		return null;
+	}
+	const promotions = window.wc?.marketplace?.promotions ?? [];
+	const currentDateUTC = Date.now();
+	const currentPath = decodeURIComponent( urlParams.get( 'path' ) || '' );
+	const currentTab = urlParams.get( 'tab' );
+
+	return (
+		<>
+			{ promotions.map( ( promotion: Promotion, index: number ) => {
+				// Skip this promotion if pages are not defined
+				if ( ! promotion.pages ) {
+					return null;
+				}
+
+				// Check if the current page, path & tab match the promotion's pages
+				const matchesPagePath = promotion.pages.some(
+					( page: Page ) => {
+						const normalizedPath = page.path.startsWith( '/' )
+							? page.path
+							: `/${ page.path }`;
+						const normalizedCurrentPath = currentPath.startsWith(
+							'/'
+						)
+							? currentPath
+							: `/${ currentPath }`;
+						return (
+							page.page === currentPage &&
+							normalizedPath === normalizedCurrentPath &&
+							( page.tab ? page.tab === currentTab : true )
+						);
+					}
+				);
+
+				if ( ! matchesPagePath ) {
+					return null;
+				}
+
+				const startDate = new Date( promotion.date_from_gmt ).getTime();
+				const endDate = new Date( promotion.date_to_gmt ).getTime();
+
+				// Promotion is not active
+				if ( currentDateUTC < startDate || currentDateUTC > endDate ) {
+					return null;
+				}
+
+				// Promotion is a notice
+				if ( promotion.format === 'notice' ) {
+					if ( ! promotion?.content ) {
+						return null;
+					}
+
+					return (
+						<Notice
+							key={ index }
+							id={
+								promotion.menu_item_id ?? `promotion-${ index }`
+							}
+							description={
+								promotion.content[ LOCALE.userLocale ] ||
+								promotion.content.en_US
+							}
+							variant={
+								promotion.style ? promotion.style : 'info'
+							}
+							icon={ promotion?.icon }
+							isDismissible={ promotion.is_dismissible || false }
+						/>
+					);
+				}
+				return null;
+			} ) }
+		</>
+	);
+};
+
+export default Promotions;

plugins/woocommerce/changelog/add-marketplace-promotions-display

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Adds logic to display notices of promotions from Woo.com on in-app marketplace pages

plugins/woocommerce/includes/admin/class-wc-admin-assets.php

@@ -554,6 +554,22 @@ if ( ! class_exists( 'WC_Admin_Assets', false ) ) :
 				);
 				wp_enqueue_script( 'marketplace-suggestions' );
 			}
+
+			// Marketplace promotions.
+			if ( in_array( $screen_id, array( 'woocommerce_page_wc-admin' ), true ) ) {
+
+				$promotions = get_transient( 'wc_addons_marketplace_promotions' );
+			
+				if ( false === $promotions ) {
+					return;
+				}
+			
+				wp_add_inline_script(
+					'wc-admin-app',
+					'window.wc = window.wc || {}; wc.marketplace = ' . wp_json_encode( array( 'promotions' => $promotions ) ),
+					'before'
+				);
+			}
 		}
 
 		/**