Merge pull request #3192 from woocommerce/PCP-4289-fix-payment-method-highlighting-via-todos

Fix payment method highlighting via todos (4289)
This commit is contained in:
Emili Castells 2025-03-10 10:52:46 +01:00 committed by GitHub
commit 6078ec3f59
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 17 additions and 12 deletions

View file

@ -43,19 +43,23 @@ const TodoSettingsBlock = ( {
};
const handleClick = async ( todo ) => {
if ( todo.action.type === 'tab' ) {
const tabId = TAB_IDS[ todo.action.tab.toUpperCase() ];
await selectTab( tabId, todo.action.section );
} else if ( todo.action.type === 'external' ) {
window.open( todo.action.url, '_blank' );
const { action } = todo;
const highlight = Boolean( action.highlight );
// Handle different action types.
if ( action.type === 'tab' ) {
const tabId = TAB_IDS[ action.tab.toUpperCase() ];
await selectTab( tabId, action.section, highlight );
} else if ( action.type === 'external' ) {
window.open( action.url, '_blank' );
}
if ( todo.action.completeOnClick === true ) {
if ( action.completeOnClick ) {
await completeOnClick( todo.id );
}
if ( todo.action.modal ) {
setActiveModal( todo.action.modal );
if ( action.modal ) {
setActiveModal( action.modal );
}
};

View file

@ -15,18 +15,19 @@ import { scrollAndHighlight } from './scrollAndHighlight';
*
* TODO: Once the TabPanel gets migrated to Tabs (TabPanel v2) we need to remove this in favor of programmatic tab switching: https://github.com/WordPress/gutenberg/issues/52997
*
* @param {string} tabId - The ID of the tab to select
* @param {string} [scrollToId] - Optional ID of the element to scroll to
* @param {string} tabId - The ID of the tab to select
* @param {string} [scrollToId] - Optional ID of the element to scroll to
* @param {boolean} highlight - Whether to highlight the element after scrolling to it
* @return {Promise} - Resolves when tab switch and scroll are complete
*/
export const selectTab = ( tabId, scrollToId ) => {
export const selectTab = ( tabId, scrollToId, highlight = false ) => {
return new Promise( ( resolve ) => {
const tab = document.getElementById( tabId );
if ( tab ) {
tab.click();
setTimeout( () => {
const targetId = scrollToId || 'ppcp-settings-container';
scrollAndHighlight( targetId, false ).then( resolve );
scrollAndHighlight( targetId, highlight ).then( resolve );
}, 100 );
} else {
console.error(