Fetch & display marketplace promotions

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,145 @@
+/* global userLocale, WC_marketplace_promotions */
+/**
+ * External dependencies
+ */
+import { useState, useEffect } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { LOCALE } from '../../../utils/admin-settings';
+import Notice from '../notice/notice';
+
+declare const WC_marketplace_promotions: {
+	data: Promotion[];
+};
+
+type Promotion = {
+	date_from_gmt: string;
+	date_to_gmt: string;
+	format: string;
+	pages: Page[];
+	position: string;
+	content: { [ locale: string ]: string };
+	icon?: string;
+	is_dismissible?: boolean;
+	menu_item_id?: string;
+	style?: string;
+};
+
+type Page = {
+	page: string;
+	path: string;
+	tab?: string;
+};
+
+const Promotions: React.FC = () => {
+	const promotionsEndpoint =
+		'https://woo.com/wp-json/wccom-extensions/3.0/promotions';
+	const initialPromotions =
+		typeof WC_marketplace_promotions !== 'undefined' &&
+		WC_marketplace_promotions.data.length > 0
+			? WC_marketplace_promotions.data
+			: null;
+
+	const [ fetchedPromotions, setFetchedPromotions ] = useState<
+		Promotion[] | null
+	>( initialPromotions );
+
+	// Fallback to fetching promotions if initialPromotions is null, which should not happen.
+	useEffect( () => {
+		// Only fetch promotions if initialPromotions is null (indicating WC_marketplace_promotions was not set or empty)
+		if ( initialPromotions === null ) {
+			const fetchPromotions = async () => {
+				try {
+					const response = await fetch( promotionsEndpoint );
+					if ( ! response.ok ) {
+						throw new Error( 'Network response was not ok' );
+					}
+					const data = await response.json();
+					setFetchedPromotions( data ); // Assuming the data is an array of promotions
+				} catch ( error ) {
+					console.error( 'Failed to fetch promotions:', error );
+				}
+			};
+
+			fetchPromotions();
+		}
+	}, [ initialPromotions ] );
+
+	// Determine the source of promotions to use, preferring locally available data
+	const promotionsToUse = fetchedPromotions || initialPromotions;
+
+	if ( ! promotionsToUse || promotionsToUse.length === 0 ) {
+		return null;
+	}
+
+	const currentDate = new Date().toISOString();
+	const urlParams = new URLSearchParams( window.location.search );
+	const currentPage = urlParams.get( 'page' );
+	const currentPath = decodeURIComponent( urlParams.get( 'path' ) || '' );
+	const currentTab = urlParams.get( 'tab' );
+
+	return (
+		<>
+			{ promotionsToUse.map( ( promotion, index ) => {
+				// 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 ) => {
+					const normalizedPagePath = page.path.startsWith( '/' )
+						? page.path
+						: `/${ page.path }`;
+					const normalizedCurrentPath = currentPath.startsWith( '/' )
+						? currentPath
+						: `/${ currentPath }`;
+					return (
+						page.page === currentPage &&
+						normalizedPagePath === normalizedCurrentPath &&
+						( page.tab ? page.tab === currentTab : true )
+					);
+				} );
+
+				if ( ! matchesPagePath ) {
+					return null;
+				}
+
+				const startDate = new Date( promotion.date_from_gmt );
+				const endDate = new Date( promotion.date_to_gmt );
+				const now = new Date( currentDate );
+
+				// Promotion is not active
+				if ( now < startDate || now > endDate ) {
+					return null;
+				}
+
+				// Promotion is a notice
+				if ( promotion.format === 'notice' ) {
+					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/client/legacy/js/admin/wc-marketplace-promotions.js

@@ -0,0 +1 @@
+/* Will be used for promotions positionning */

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

@@ -149,6 +149,7 @@ public function admin_scripts() {
 			wp_register_script( 'wc-shipping-zone-methods', WC()->plugin_url() . '/assets/js/admin/wc-shipping-zone-methods' . $suffix . '.js', array( 'jquery', 'wp-util', 'underscore', 'backbone', 'jquery-ui-sortable', 'wc-backbone-modal' ), $version );
 			wp_register_script( 'wc-shipping-classes', WC()->plugin_url() . '/assets/js/admin/wc-shipping-classes' . $suffix . '.js', array( 'jquery', 'wp-util', 'underscore', 'backbone', 'wc-backbone-modal' ), $version, array( 'in_footer' => false ) );
 			wp_register_script( 'wc-clipboard', WC()->plugin_url() . '/assets/js/admin/wc-clipboard' . $suffix . '.js', array( 'jquery' ), $version );
+			wp_register_script( 'wc-marketplace-promotions', WC()->plugin_url() . '/assets/js/admin/wc-marketplace-promotions' . $suffix . '.js', array(), $version );
 			wp_register_script( 'select2', WC()->plugin_url() . '/assets/js/select2/select2.full' . $suffix . '.js', array( 'jquery' ), '4.0.3' );
 			wp_register_script( 'selectWoo', WC()->plugin_url() . '/assets/js/selectWoo/selectWoo.full' . $suffix . '.js', array( 'jquery' ), '1.0.6' );
 			wp_register_script( 'wc-enhanced-select', WC()->plugin_url() . '/assets/js/admin/wc-enhanced-select' . $suffix . '.js', array( 'jquery', 'selectWoo' ), $version );
@@ -554,6 +555,25 @@ public function admin_scripts() {
 				);
 				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_enqueue_script( 'wc-marketplace-promotions' );
+				wp_localize_script(
+					'wc-marketplace-promotions',
+					'WC_marketplace_promotions',
+					array(
+						'data' => $promotions
+					)
+				);
+			}
 		}
 
 		/**