Remove the "We're here to help" spotlight (#47812)
* Remove tooltip * Fix lint issues * lint * Remove tests * Add changelog * Lint fix
This commit is contained in:
parent
d5c901e3b7
commit
ace3169c0a
|
@ -12,7 +12,6 @@ import {
|
||||||
ONBOARDING_STORE_NAME,
|
ONBOARDING_STORE_NAME,
|
||||||
OPTIONS_STORE_NAME,
|
OPTIONS_STORE_NAME,
|
||||||
useUser,
|
useUser,
|
||||||
useUserPreferences,
|
|
||||||
getVisibleTasks,
|
getVisibleTasks,
|
||||||
} from '@woocommerce/data';
|
} from '@woocommerce/data';
|
||||||
import { addHistoryListener } from '@woocommerce/navigation';
|
import { addHistoryListener } from '@woocommerce/navigation';
|
||||||
|
@ -32,7 +31,6 @@ import { hasUnreadNotes as checkIfHasUnreadNotes } from './unread-indicators';
|
||||||
import { Tabs } from './tabs';
|
import { Tabs } from './tabs';
|
||||||
import { SetupProgress } from './setup-progress';
|
import { SetupProgress } from './setup-progress';
|
||||||
import { DisplayOptions } from './display-options';
|
import { DisplayOptions } from './display-options';
|
||||||
import { HighlightTooltip } from './highlight-tooltip';
|
|
||||||
import { Panel } from './panel';
|
import { Panel } from './panel';
|
||||||
import {
|
import {
|
||||||
getLowStockCount as getLowStockProducts,
|
getLowStockCount as getLowStockProducts,
|
||||||
|
@ -73,7 +71,6 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
|
||||||
const [ isPanelSwitching, setIsPanelSwitching ] = useState( false );
|
const [ isPanelSwitching, setIsPanelSwitching ] = useState( false );
|
||||||
const { fills } = useSlot( ABBREVIATED_NOTIFICATION_SLOT_NAME );
|
const { fills } = useSlot( ABBREVIATED_NOTIFICATION_SLOT_NAME );
|
||||||
const hasExtendedNotifications = Boolean( fills?.length );
|
const hasExtendedNotifications = Boolean( fills?.length );
|
||||||
const { updateUserPreferences, ...userData } = useUserPreferences();
|
|
||||||
const activeSetupList = useActiveSetupTasklist();
|
const activeSetupList = useActiveSetupTasklist();
|
||||||
const { comingSoon } = useLaunchYourStore( {
|
const { comingSoon } = useLaunchYourStore( {
|
||||||
enabled: isHomescreen,
|
enabled: isHomescreen,
|
||||||
|
@ -168,7 +165,6 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
|
||||||
const {
|
const {
|
||||||
hasUnreadNotes,
|
hasUnreadNotes,
|
||||||
hasAbbreviatedNotifications,
|
hasAbbreviatedNotifications,
|
||||||
isCompletedTask,
|
|
||||||
thingsToDoNextCount,
|
thingsToDoNextCount,
|
||||||
requestingTaskListOptions,
|
requestingTaskListOptions,
|
||||||
setupTaskListComplete,
|
setupTaskListComplete,
|
||||||
|
@ -419,34 +415,8 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const closedHelpPanelHighlight = () => {
|
|
||||||
recordEvent( 'help_tooltip_click' );
|
|
||||||
if ( userData && updateUserPreferences ) {
|
|
||||||
updateUserPreferences( {
|
|
||||||
help_panel_highlight_shown: 'yes',
|
|
||||||
} );
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const shouldShowHelpTooltip = () => {
|
|
||||||
const { task } = query;
|
|
||||||
const startedTasks =
|
|
||||||
userData && userData.task_list_tracked_started_tasks;
|
|
||||||
const highlightShown = userData && userData.help_panel_highlight_shown;
|
|
||||||
if (
|
|
||||||
task &&
|
|
||||||
highlightShown !== 'yes' &&
|
|
||||||
( startedTasks || {} )[ task ] > 1 &&
|
|
||||||
! isCompletedTask
|
|
||||||
) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const tabs = getTabs();
|
const tabs = getTabs();
|
||||||
const headerId = uniqueId( 'activity-panel-header_' );
|
const headerId = uniqueId( 'activity-panel-header_' );
|
||||||
const showHelpHighlightTooltip = shouldShowHelpTooltip();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<LayoutContextProvider value={ updatedLayoutContext }>
|
<LayoutContextProvider value={ updatedLayoutContext }>
|
||||||
|
@ -483,21 +453,6 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
|
||||||
clearPanel={ () => clearPanel() }
|
clearPanel={ () => clearPanel() }
|
||||||
/>
|
/>
|
||||||
</Section>
|
</Section>
|
||||||
{ showHelpHighlightTooltip ? (
|
|
||||||
<HighlightTooltip
|
|
||||||
delay={ 1000 }
|
|
||||||
useAnchor={ true }
|
|
||||||
title={ __( "We're here for help", 'woocommerce' ) }
|
|
||||||
content={ __(
|
|
||||||
'If you have any questions, feel free to explore the WooCommerce docs listed here.',
|
|
||||||
'woocommerce'
|
|
||||||
) }
|
|
||||||
closeButtonText={ __( 'Got it', 'woocommerce' ) }
|
|
||||||
id="activity-panel-tab-help"
|
|
||||||
onClose={ () => closedHelpPanelHighlight() }
|
|
||||||
onShow={ () => recordEvent( 'help_tooltip_view' ) }
|
|
||||||
/>
|
|
||||||
) : null }
|
|
||||||
</div>
|
</div>
|
||||||
</LayoutContextProvider>
|
</LayoutContextProvider>
|
||||||
);
|
);
|
||||||
|
|
|
@ -9,7 +9,7 @@ import {
|
||||||
createEvent,
|
createEvent,
|
||||||
} from '@testing-library/react';
|
} from '@testing-library/react';
|
||||||
import { useSelect } from '@wordpress/data';
|
import { useSelect } from '@wordpress/data';
|
||||||
import { useUser, useUserPreferences } from '@woocommerce/data';
|
import { useUser } from '@woocommerce/data';
|
||||||
import { useState } from '@wordpress/element';
|
import { useState } from '@wordpress/element';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -247,82 +247,6 @@ describe( 'Activity Panel', () => {
|
||||||
expect( queryByText( 'Finish setup' ) ).toBeDefined();
|
expect( queryByText( 'Finish setup' ) ).toBeDefined();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
describe( 'help panel tooltip', () => {
|
|
||||||
it( 'should render highlight tooltip when task count is at-least 2, task is not completed, and tooltip not shown yet', () => {
|
|
||||||
useUserPreferences.mockReturnValue( {
|
|
||||||
updateUserPreferences: () => {},
|
|
||||||
task_list_tracked_started_tasks: { payment: 2 },
|
|
||||||
} );
|
|
||||||
const { getByText } = render(
|
|
||||||
<ActivityPanel isEmbedded query={ { task: 'payment' } } />
|
|
||||||
);
|
|
||||||
|
|
||||||
expect( getByText( '[HighlightTooltip]' ) ).toBeInTheDocument();
|
|
||||||
} );
|
|
||||||
|
|
||||||
it( 'should not render highlight tooltip when task is not visited more then once', () => {
|
|
||||||
useSelect.mockImplementation( () => ( {
|
|
||||||
requestingTaskListOptions: false,
|
|
||||||
setupTaskListComplete: false,
|
|
||||||
setupTaskListHidden: false,
|
|
||||||
trackedCompletedTasks: [],
|
|
||||||
} ) );
|
|
||||||
useUserPreferences.mockReturnValue( {
|
|
||||||
updateUserPreferences: () => {},
|
|
||||||
task_list_tracked_started_tasks: { payment: 1 },
|
|
||||||
} );
|
|
||||||
render(
|
|
||||||
<ActivityPanel isEmbedded query={ { task: 'payment' } } />
|
|
||||||
);
|
|
||||||
|
|
||||||
expect( screen.queryByText( '[HighlightTooltip]' ) ).toBeNull();
|
|
||||||
|
|
||||||
useUserPreferences.mockReturnValue( {
|
|
||||||
updateUserPreferences: () => {},
|
|
||||||
task_list_tracked_started_tasks: {},
|
|
||||||
} );
|
|
||||||
|
|
||||||
render(
|
|
||||||
<ActivityPanel isEmbedded query={ { task: 'payment' } } />
|
|
||||||
);
|
|
||||||
|
|
||||||
expect( screen.queryByText( '[HighlightTooltip]' ) ).toBeNull();
|
|
||||||
} );
|
|
||||||
|
|
||||||
it( 'should not render highlight tooltip when task is visited twice, but completed already', () => {
|
|
||||||
useSelect.mockImplementation( () => ( {
|
|
||||||
requestingTaskListOptions: false,
|
|
||||||
setupTaskListComplete: false,
|
|
||||||
setupTaskListHidden: false,
|
|
||||||
isCompletedTask: true,
|
|
||||||
} ) );
|
|
||||||
|
|
||||||
useUserPreferences.mockReturnValue( {
|
|
||||||
updateUserPreferences: () => {},
|
|
||||||
task_list_tracked_started_tasks: { payment: 2 },
|
|
||||||
} );
|
|
||||||
|
|
||||||
const { queryByText } = render(
|
|
||||||
<ActivityPanel isEmbedded query={ { task: 'payment' } } />
|
|
||||||
);
|
|
||||||
|
|
||||||
expect( queryByText( '[HighlightTooltip]' ) ).toBeNull();
|
|
||||||
} );
|
|
||||||
|
|
||||||
it( 'should not render highlight tooltip when task is visited twice, not completed, but already shown', () => {
|
|
||||||
useUserPreferences.mockReturnValue( {
|
|
||||||
task_list_tracked_started_tasks: { payment: 2 },
|
|
||||||
help_panel_highlight_shown: 'yes',
|
|
||||||
} );
|
|
||||||
|
|
||||||
const { queryByText } = render(
|
|
||||||
<ActivityPanel isEmbedded query={ { task: 'payment' } } />
|
|
||||||
);
|
|
||||||
|
|
||||||
expect( queryByText( '[HighlightTooltip]' ) ).toBeNull();
|
|
||||||
} );
|
|
||||||
} );
|
|
||||||
|
|
||||||
describe( 'panel', () => {
|
describe( 'panel', () => {
|
||||||
it( 'should set focus when panel opened/closed without removing element when onTransitionEnd is triggered', () => {
|
it( 'should set focus when panel opened/closed without removing element when onTransitionEnd is triggered', () => {
|
||||||
const content = 'test';
|
const content = 'test';
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: minor
|
||||||
|
Type: update
|
||||||
|
|
||||||
|
Remove "Need help?" modal from onboarding
|
Loading…
Reference in New Issue