diff --git a/plugins/woocommerce-admin/client/marketplace/components/content/content.tsx b/plugins/woocommerce-admin/client/marketplace/components/content/content.tsx index 720327cf2e9..23f8e61c1fb 100644 --- a/plugins/woocommerce-admin/client/marketplace/components/content/content.tsx +++ b/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 (
+ { renderContent() }
diff --git a/plugins/woocommerce-admin/client/marketplace/components/promotions/promotions.tsx b/plugins/woocommerce-admin/client/marketplace/components/promotions/promotions.tsx new file mode 100644 index 00000000000..b7f60e2fe59 --- /dev/null +++ b/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 ( + + ); + } + return null; + } ) } + + ); +}; + +export default Promotions; diff --git a/plugins/woocommerce/changelog/add-marketplace-promotions-display b/plugins/woocommerce/changelog/add-marketplace-promotions-display new file mode 100644 index 00000000000..2b6994f18b0 --- /dev/null +++ b/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 diff --git a/plugins/woocommerce/includes/admin/class-wc-admin-assets.php b/plugins/woocommerce/includes/admin/class-wc-admin-assets.php index 0be6901be0a..97fbb9c7df1 100644 --- a/plugins/woocommerce/includes/admin/class-wc-admin-assets.php +++ b/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' + ); + } } /**