Display spotlight promotions on WooPayments and WC payment settings pages #11147
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This implements WOOPMNT-5463 to display spotlight promotions on three pages: 1. WooPayments overview page 2. WooPayments settings page 3. WooCommerce payment settings page (WC 9.9.2+ only) **Frontend Changes:** - Create SpotlightPromotion container component at client/promotions/spotlight/ - Integrates with promotions API using usePromotions() and usePromotionActions() hooks - Only displays if account is onboarded (status 'complete' or 'enabled') - Finds first available promotion with 'spotlight' variation type - Supports footnotes and terms & conditions URLs - Integrated into overview and settings pages with ErrorBoundary **Spotlight Component Improvements:** - Fix animation timing issue on overview page using double requestAnimationFrame - Ensures browser paints initial state before applying animation class - Load SVG using ?asset suffix pattern to avoid bundling in JS **WC Payment Settings Integration:** - Create standalone entry point at client/wc-payment-settings-spotlight.js - Add webpack entry for wc-payment-settings-spotlight bundle - Register and enqueue script/styles in WC_Payments_Admin class - Add WooCommerce 9.9.2+ version check (when new payment settings enabled) - Use admin_footer hook to inject container div safely - Localize wcpaySettings to provide account data to component **PHP Implementation:** - Add enqueue_wc_payment_settings_spotlight() method with version check - Add inject_payment_settings_spotlight_container() method - Add is_wc_payment_settings_page() helper to detect correct page - Register WCPAY_WC_PAYMENT_SETTINGS_SPOTLIGHT script and style **Tests:** - Add 5 unit tests for new WC_Payments_Admin methods - Test page detection logic (correct page, wrong page, with section param) - Test container injection behavior 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add 11 comprehensive unit tests for SpotlightPromotion container - Test rendering with different account onboarding statuses - Test promotion data filtering (spotlight vs other types) - Test loading states and empty data scenarios - Test user interactions (activate, dismiss, learn more) - Test disclaimer rendering with and without terms link - Mock usePromotions, usePromotionActions hooks and wcpaySettings global - All tests passing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
dmallory42
changed the base branch from
develop
to
add/payment-method-promotions
Contributor
Test the buildOption 1. Jetpack Beta
Option 2. Jurassic Ninja - available for logged-in A12s🚀 Launch a JN site with this branch 🚀 ℹ️ Install this Tampermonkey script to get more options. Build info:
Note: the build is updated when a new commit is pushed to this PR. |
Contributor
|
Size Change: +24.8 kB (+3%) Total Size: 903 kB
ℹ️ View Unchanged
|
- Create spotlightImages mapping to link promo_id to local image assets - Update mock promotion to use 'klarna-2026-promo' as promo_id - Promotions without mapped images will render without an image - Allows easy addition of new promotion images by updating the mapping
Add specific CSS rule to override WC settings page styles that remove box-shadow from cards. Uses higher specificity selector instead of !important.
mordeth
approved these changes
Nov 21, 2025
Contributor
mordeth
left a comment
mordeth
left a comment
There was a problem hiding this comment.
✅ Code changes are looking good!
✅ Unit tests are passing successfully!
❌ All CI jobs are failing.
✅ Testing instructions are checking out correctly!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes WOOPMNT-5463
Changes proposed in this Pull Request
This PR integrates the spotlight promotion component on three pages in the admin:
The spotlight component displays promotional content by fetching promotion data from the promotions API and rendering the first available spotlight variation. It only displays when the account is fully onboarded (status: 'complete' or 'enabled').
Testing instructions
Prerequisites:
npm installandnpm startUnit Tests:
Manual Testing:
Note: this is just a test promotion so the text doesn't match the designs yet.
WooPayments Overview page - Navigate to WooPayments > Overview
WooPayments Settings page - Navigate to WooPayments > Settings
WooCommerce Payment Settings page - Navigate to WooCommerce > Settings > Payments
Verify correct page detection - Navigate to other admin pages and verify spotlight does not appear
Account status check - The spotlight should only appear when account is onboarded (status 'complete' or 'enabled')
Screenshots
npm run changelogto add a changelog file, choosepatchto leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.Post merge