Commit 8f42dec1dfc for woocommerce
commit 8f42dec1dfcadc637244eaa89e01ac2e73534125
Author: Luigi Teschio <gigitux@gmail.com>
Date: Tue Aug 18 13:56:51 2026 +0200
Remove activity panel from WooCommerce pages (#67719)
* Remove activity panel from WooCommerce pages
* Add changelog entry for activity panel removal
* Remove activity panel from WooCommerce pages
* Add changelog entry for activity panel removal
* address comment
* Remove activity panel from WooCommerce pages
* Add changelog entry for activity panel removal
* address comment
* remove unread
diff --git a/plugins/woocommerce/changelog/wooprd-3662-remove-activity-panel b/plugins/woocommerce/changelog/wooprd-3662-remove-activity-panel
new file mode 100644
index 00000000000..01d2e5cdbb3
--- /dev/null
+++ b/plugins/woocommerce/changelog/wooprd-3662-remove-activity-panel
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Remove the Activity panel from WooCommerce pages while keeping the Inbox on Woo Home.
diff --git a/plugins/woocommerce/client/admin/client/activity-panel/activity-panel.js b/plugins/woocommerce/client/admin/client/activity-panel/activity-panel.js
index b4f3e2eac8d..c905b18afb7 100644
--- a/plugins/woocommerce/client/admin/client/activity-panel/activity-panel.js
+++ b/plugins/woocommerce/client/admin/client/activity-panel/activity-panel.js
@@ -9,23 +9,15 @@ import {
Icon,
help as helpIcon,
external,
- bell,
- bellUnread,
listView,
comment,
store,
} from '@wordpress/icons';
import { STORE_KEY as CES_STORE_KEY } from '@woocommerce/customer-effort-score';
import { H, Section } from '@woocommerce/components';
-import {
- activityPanelStore,
- onboardingStore,
- optionsStore,
- useUser,
-} from '@woocommerce/data';
+import { onboardingStore, optionsStore, useUser } from '@woocommerce/data';
import { addHistoryListener } from '@woocommerce/navigation';
import { recordEvent } from '@woocommerce/tracks';
-import { useSlot } from '@woocommerce/experimental';
import {
LayoutContextProvider,
useExtendLayout,
@@ -35,11 +27,9 @@ import {
* Internal dependencies
*/
import './style.scss';
-import { hasUnreadNotes as checkIfHasUnreadNotes } from './unread-indicators';
import { Tabs } from './tabs';
import { DisplayOptions } from './display-options';
import { Panel } from './panel';
-import { ABBREVIATED_NOTIFICATION_SLOT_NAME } from './panels/inbox/abbreviated-notifications-panel';
import { getAdminSetting } from '~/utils/admin-settings';
import { getUrlParams } from '~/utils';
import { getSegmentsFromPath } from '~/utils/url-helpers';
@@ -51,12 +41,6 @@ const HelpPanel = lazy( () =>
import( /* webpackChunkName: "activity-panels-help" */ './panels/help' )
);
-const InboxPanel = lazy( () =>
- import(
- /* webpackChunkName: "activity-panels-inbox" */ './panels/inbox/inbox-panel'
- )
-);
-
const SetupTasksPanel = lazy( () =>
import(
/* webpackChunkName: "activity-panels-setup" */ './panels/setup-tasks/setup-tasks-panel.tsx'
@@ -70,8 +54,6 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
const [ isPanelClosing, setIsPanelClosing ] = useState( false );
const [ isPanelOpen, setIsPanelOpen ] = useState( false );
const [ isPanelSwitching, setIsPanelSwitching ] = useState( false );
- const { fills } = useSlot( ABBREVIATED_NOTIFICATION_SLOT_NAME );
- const hasExtendedNotifications = Boolean( fills?.length );
const { comingSoon } = useLaunchYourStore( {
enabled: isHomescreen,
} );
@@ -126,66 +108,27 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
[ query.page, query.task ]
);
- const checkIfHasAbbreviatedNotifications = useCallback(
- ( select, setupTaskListHidden, thingsToDoNextCount ) => {
- const counts =
- select( activityPanelStore ).getActivityPanelCounts();
-
- const isOrdersCardVisible = setupTaskListHidden
- ? ( counts?.orders_to_fulfill_count ?? 0 ) > 0
- : false;
- const isReviewsCardVisible = setupTaskListHidden
- ? ( counts?.reviews_to_moderate_count ?? 0 ) > 0
- : false;
- const isLowStockCardVisible = setupTaskListHidden
- ? ( counts?.products_low_in_stock_count ?? 0 ) > 0
- : false;
-
- return (
- thingsToDoNextCount > 0 ||
- isOrdersCardVisible ||
- isReviewsCardVisible ||
- isLowStockCardVisible ||
- hasExtendedNotifications
- );
- },
- [ hasExtendedNotifications ]
- );
-
const {
requestingTaskListOptions,
setupTaskListComplete,
setupTaskListHidden,
- thingsToDoNextCount,
- } = useTaskListsState();
+ } = useTaskListsState( {
+ setupTasklist: true,
+ extendedTaskList: false,
+ } );
- const {
- hasUnreadNotes,
- hasAbbreviatedNotifications,
- previewSiteBtnTrackData,
- } = useSelect(
+ const { previewSiteBtnTrackData } = useSelect(
( select ) => {
const { getOption } = select( optionsStore );
return {
- hasUnreadNotes: checkIfHasUnreadNotes( select ),
- hasAbbreviatedNotifications: checkIfHasAbbreviatedNotifications(
- select,
- setupTaskListHidden,
- thingsToDoNextCount
- ),
previewSiteBtnTrackData: getPreviewSiteBtnTrackData(
select,
getOption
),
};
},
- [
- checkIfHasAbbreviatedNotifications,
- thingsToDoNextCount,
- setupTaskListHidden,
- getPreviewSiteBtnTrackData,
- ]
+ [ getPreviewSiteBtnTrackData ]
);
const { showCesModal } = useDispatch( CES_STORE_KEY );
@@ -255,33 +198,7 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
);
};
- // @todo Pull in dynamic unread status/count
const getTabs = () => {
- const activity = {
- name: 'activity',
- title: __( 'Activity', 'woocommerce' ),
- // Use bellUnread (bell + dot baked into the SVG) when there is
- // unread activity so the unread state lives in one source of truth
- // inside @wordpress/icons rather than a separately-positioned CSS
- // pseudo-element on top of the plain bell.
- icon: (
- <Icon
- icon={
- hasUnreadNotes || hasAbbreviatedNotifications
- ? bellUnread
- : bell
- }
- size={ 18 }
- />
- ),
- unread: hasUnreadNotes || hasAbbreviatedNotifications,
- visible:
- ( isEmbedded || ! isHomescreen ) &&
- ! isPerformingSetupTask() &&
- ! isProductScreen() &&
- currentUserCan( 'manage_woocommerce' ),
- };
-
const feedback = {
name: 'feedback',
title: __( 'Feedback', 'woocommerce' ),
@@ -401,7 +318,6 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
};
return [
- activity,
feedback,
setup,
previewSite,
@@ -416,15 +332,6 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
const { task } = query;
switch ( tab ) {
- case 'activity':
- return (
- <InboxPanel
- hasAbbreviatedNotifications={
- hasAbbreviatedNotifications
- }
- thingsToDoNextCount={ thingsToDoNextCount }
- />
- );
case 'help':
return <HelpPanel taskName={ task } />;
case 'setup':
diff --git a/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/abbreviated-notifications-panel.js b/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/abbreviated-notifications-panel.js
deleted file mode 100644
index 0f1ee4e12fe..00000000000
--- a/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/abbreviated-notifications-panel.js
+++ /dev/null
@@ -1,166 +0,0 @@
-/**
- * External dependencies
- */
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { Text } from '@woocommerce/experimental';
-import { recordEvent } from '@woocommerce/tracks';
-import { AbbreviatedCard } from '@woocommerce/components';
-import { useSelect } from '@wordpress/data';
-import { box, comment, page } from '@wordpress/icons';
-import { createSlotFill } from '@wordpress/components';
-import { isWCAdmin } from '@woocommerce/navigation';
-import { activityPanelStore } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { Bell } from './icons/bell';
-import { isTaskListVisible } from '~/hooks/use-tasklists-state';
-
-const EXTENDED_TASK_LIST_ID = 'extended_task_list';
-const ORDER_PANEL_ID = 'orders-panel';
-const REVIEWS_PANEL_ID = 'reviews-panel';
-const STOCK_PANEL_ID = 'stock-panel';
-
-export const ABBREVIATED_NOTIFICATION_SLOT_NAME = 'AbbreviatedNotification';
-const { Slot: AbbreviatedNotificationSlot } = createSlotFill(
- ABBREVIATED_NOTIFICATION_SLOT_NAME
-);
-
-export const AbbreviatedNotificationsPanel = ( { thingsToDoNextCount } ) => {
- const {
- ordersToProcessCount,
- reviewsToModerateCount,
- stockNoticesCount,
- isSetupTaskListHidden,
- isExtendedTaskListHidden,
- } = useSelect( ( select ) => {
- const counts = select( activityPanelStore ).getActivityPanelCounts();
-
- return {
- ordersToProcessCount: counts?.orders_to_fulfill_count ?? 0,
- reviewsToModerateCount: counts?.reviews_to_moderate_count ?? 0,
- stockNoticesCount: counts?.products_low_in_stock_count ?? 0,
- isSetupTaskListHidden: ! isTaskListVisible( 'setup' ),
- isExtendedTaskListHidden: ! isTaskListVisible( 'extended' ),
- };
- }, [] );
-
- const trackAbbreviatedCardClick = ( name ) => {
- recordEvent( 'activity_panel_click', {
- task: name,
- } );
- };
-
- const isWCAdminPage = isWCAdmin();
-
- return (
- <div className="woocommerce-abbreviated-notifications">
- { thingsToDoNextCount > 0 && ! isExtendedTaskListHidden && (
- <AbbreviatedCard
- className="woocommerce-abbreviated-notification"
- icon={ <Bell /> }
- href={ `admin.php?page=wc-admin#${ EXTENDED_TASK_LIST_ID }` }
- onClick={ () =>
- trackAbbreviatedCardClick( 'thingsToDoNext' )
- }
- type={ isWCAdminPage ? 'wc-admin' : 'wp-admin' }
- >
- <Text as="h3">
- { __( 'Things to do next', 'woocommerce' ) }
- </Text>
- <Text as="p">
- { sprintf(
- /* translators: Things the user has to do */
- _n(
- 'You have %d new thing to do',
- 'You have %d new things to do',
- thingsToDoNextCount,
- 'woocommerce'
- ),
- thingsToDoNextCount
- ) }
- </Text>
- </AbbreviatedCard>
- ) }
- { ordersToProcessCount > 0 && isSetupTaskListHidden && (
- <AbbreviatedCard
- className="woocommerce-abbreviated-notification"
- icon={ page }
- href={ `admin.php?page=wc-admin&opened_panel=${ ORDER_PANEL_ID }` }
- onClick={ () =>
- trackAbbreviatedCardClick( 'ordersToProcess' )
- }
- type={ isWCAdminPage ? 'wc-admin' : 'wp-admin' }
- >
- <Text as="h3">
- { __( 'Orders to fulfill', 'woocommerce' ) }
- </Text>
- <Text>
- { sprintf(
- /* translators: Number of orders the user has to fulfill */
- _n(
- 'You have %d order to fulfill',
- 'You have %d orders to fulfill',
- ordersToProcessCount,
- 'woocommerce'
- ),
- ordersToProcessCount
- ) }
- </Text>
- </AbbreviatedCard>
- ) }
- { reviewsToModerateCount > 0 && isSetupTaskListHidden && (
- <AbbreviatedCard
- className="woocommerce-abbreviated-notification"
- icon={ comment }
- href={ `admin.php?page=wc-admin&opened_panel=${ REVIEWS_PANEL_ID }` }
- onClick={ () =>
- trackAbbreviatedCardClick( 'reviewsToModerate' )
- }
- type={ isWCAdminPage ? 'wc-admin' : 'wp-admin' }
- >
- <Text as="h3">
- { __( 'Reviews to moderate', 'woocommerce' ) }
- </Text>
- <Text>
- { sprintf(
- /* translators: Number of reviews the user has to moderate */
- _n(
- 'You have %d review to moderate',
- 'You have %d reviews to moderate',
- reviewsToModerateCount,
- 'woocommerce'
- ),
- reviewsToModerateCount
- ) }
- </Text>
- </AbbreviatedCard>
- ) }
- { stockNoticesCount > 0 && isSetupTaskListHidden && (
- <AbbreviatedCard
- className="woocommerce-abbreviated-notification"
- icon={ box }
- href={ `admin.php?page=wc-admin&opened_panel=${ STOCK_PANEL_ID }` }
- onClick={ () =>
- trackAbbreviatedCardClick( 'stockNotices' )
- }
- type={ isWCAdminPage ? 'wc-admin' : 'wp-admin' }
- >
- <Text as="h3">
- { __( 'Inventory to review', 'woocommerce' ) }
- </Text>
- <Text>
- { __(
- 'You have inventory to review and update',
- 'woocommerce'
- ) }
- </Text>
- </AbbreviatedCard>
- ) }
- { ! isExtendedTaskListHidden && <AbbreviatedNotificationSlot /> }
- </div>
- );
-};
-
-export default AbbreviatedNotificationsPanel;
diff --git a/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/icons/bell.js b/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/icons/bell.js
deleted file mode 100644
index 0d576da7473..00000000000
--- a/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/icons/bell.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export const Bell = () => (
- <svg
- width="24"
- height="24"
- viewBox="0 0 24 24"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path d="M0 0h24v24H0z" fill="none" />
- <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z" />
- </svg>
-);
diff --git a/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/inbox-panel.js b/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/inbox-panel.js
deleted file mode 100644
index 632d6dd908d..00000000000
--- a/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/inbox-panel.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Internal dependencies
- */
-import './inbox.scss';
-import NotesPanel from '~/inbox-panel';
-import { AbbreviatedNotificationsPanel } from './abbreviated-notifications-panel';
-
-export const InboxPanel = ( {
- hasAbbreviatedNotifications,
- thingsToDoNextCount,
-} ) => {
- return (
- <div className="woocommerce-notification-panels">
- { hasAbbreviatedNotifications && (
- <AbbreviatedNotificationsPanel
- thingsToDoNextCount={ thingsToDoNextCount }
- />
- ) }
- <NotesPanel showHeader={ false } />
- </div>
- );
-};
-
-export default InboxPanel;
diff --git a/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/inbox.scss b/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/inbox.scss
deleted file mode 100644
index 0e7490704a4..00000000000
--- a/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/inbox.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.woocommerce-layout__activity-panel-content {
-
- .woocommerce-abbreviated-card,
- .woocommerce-homepage-notes-wrapper .components-card,
- .woocommerce-inbox-message {
- border-radius: 0;
- }
-
- .woocommerce-abbreviated-notifications {
- border-top: 1px solid $gray-200;
- & > div {
- border: none;
- margin-bottom: 0;
- }
-
- .woocommerce-abbreviated-notification {
- h3 {
- color: var(--wp-admin-theme-color);
- font-weight: bold;
- font-size: 14px;
- }
- p,
- div {
- color: $gray-700;
- }
- .woocommerce-abbreviated-card__content {
- padding: $gap-small $gap-large $gap-small 0;
- & > :not(:first-child) {
- margin-top: $gap-smallest;
- }
- }
- }
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/activity-panel/style.scss b/plugins/woocommerce/client/admin/client/activity-panel/style.scss
index e102e203355..6a15ed52015 100644
--- a/plugins/woocommerce/client/admin/client/activity-panel/style.scss
+++ b/plugins/woocommerce/client/admin/client/activity-panel/style.scss
@@ -101,14 +101,6 @@
}
}
- // The unread state ships as `bellUnread` from @wordpress/icons — a
- // single SVG with the dot baked in. We just colour the dot red so the
- // urgency signal reads, instead of inheriting currentColor like the
- // rest of the icon.
- &.has-unread svg circle {
- fill: $alert-red;
- }
-
&:hover,
&.components-button:not(:disabled):not([aria-disabled="true"]):hover {
box-shadow: none;
diff --git a/plugins/woocommerce/client/admin/client/activity-panel/tab/index.js b/plugins/woocommerce/client/admin/client/activity-panel/tab/index.js
index d00eb2175da..fea6d971e8d 100644
--- a/plugins/woocommerce/client/admin/client/activity-panel/tab/index.js
+++ b/plugins/woocommerce/client/admin/client/activity-panel/tab/index.js
@@ -1,7 +1,6 @@
/**
* External dependencies
*/
-import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import clsx from 'clsx';
@@ -9,14 +8,12 @@ export const Tab = ( {
icon,
title,
name,
- unread,
selected,
isPanelOpen,
onTabClick,
} ) => {
const className = clsx( 'woocommerce-layout__activity-panel-tab', {
'is-active': isPanelOpen && selected,
- 'has-unread': unread,
} );
const tabKey = `activity-panel-tab-${ name }`;
@@ -43,11 +40,6 @@ export const Tab = ( {
} }
>
{ icon }
- { unread && (
- <span className="screen-reader-text">
- { __( 'unread activity', 'woocommerce' ) }
- </span>
- ) }
</Button>
);
};
diff --git a/plugins/woocommerce/client/admin/client/activity-panel/tab/test/index.js b/plugins/woocommerce/client/admin/client/activity-panel/tab/test/index.js
index 1d2a1fc332b..2ce2c48c2f8 100644
--- a/plugins/woocommerce/client/admin/client/activity-panel/tab/test/index.js
+++ b/plugins/woocommerce/client/admin/client/activity-panel/tab/test/index.js
@@ -15,7 +15,6 @@ const renderTab = () =>
icon={ null }
title={ 'Hello World' }
name={ 'overview' }
- unread={ false }
selected
isPanelOpen
index={ 0 }
@@ -24,13 +23,12 @@ const renderTab = () =>
);
describe( 'ActivityPanel Tab', () => {
- it( 'displays a title and unread status based on props', () => {
- const { getByRole, getByText } = render(
+ it( 'displays a title based on props', () => {
+ const { getByRole } = render(
<Tab
icon={ null }
title={ 'Hello World' }
name={ 'overview' }
- unread
selected
isPanelOpen
index={ 0 }
@@ -44,7 +42,6 @@ describe( 'ActivityPanel Tab', () => {
expect(
getByRole( 'tab', { name: 'Hello World' } )
).toBeInTheDocument();
- expect( getByText( 'unread activity' ) ).not.toBeNull();
} );
it( 'renders the node passed to icon', () => {
@@ -53,7 +50,6 @@ describe( 'ActivityPanel Tab', () => {
icon={ <div>Fake icon</div> }
title={ 'Hello World' }
name={ 'overview' }
- unread
selected
isPanelOpen
index={ 0 }
@@ -64,30 +60,12 @@ describe( 'ActivityPanel Tab', () => {
expect( getByText( 'Fake icon' ) ).not.toBeNull();
} );
- it( 'does not display unread status if unread is false', () => {
- const { queryByText } = render(
- <Tab
- icon={ <PagesIcon /> }
- title={ 'Hello World' }
- name={ 'overview' }
- unread={ false }
- selected
- isPanelOpen
- index={ 0 }
- onTabClick={ () => {} }
- />
- );
-
- expect( queryByText( 'unread activity' ) ).toBeNull();
- } );
-
it( 'is always tabbable even if active', () => {
const { getByRole, rerender } = render(
<Tab
icon={ <PagesIcon /> }
title={ 'Hello World' }
name={ 'overview' }
- unread={ false }
selected
isPanelOpen={ false }
index={ 1 }
@@ -105,7 +83,6 @@ describe( 'ActivityPanel Tab', () => {
icon={ <PagesIcon /> }
title={ 'Hello World' }
name={ 'overview' }
- unread={ false }
selected={ false }
isPanelOpen={ false }
index={ 0 }
@@ -122,7 +99,6 @@ describe( 'ActivityPanel Tab', () => {
icon={ <PagesIcon /> }
title={ 'Hello World' }
name={ 'overview' }
- unread={ false }
selected={ true }
isPanelOpen={ true }
index={ 1 }
@@ -143,7 +119,6 @@ describe( 'ActivityPanel Tab', () => {
icon={ <PagesIcon /> }
title={ 'Hello World' }
name={ 'overview' }
- unread={ false }
selected={ false }
isPanelOpen={ true }
index={ 1 }
@@ -163,7 +138,6 @@ describe( 'ActivityPanel Tab', () => {
icon={ <PagesIcon /> }
title={ 'Hello World' }
name={ nameProp }
- unread={ false }
selected={ false }
isPanelOpen={ true }
index={ 1 }
@@ -192,7 +166,6 @@ describe( 'ActivityPanel Tab', () => {
icon={ <PagesIcon /> }
title={ 'Hello World' }
name={ 'overview' }
- unread={ false }
selected={ false }
isPanelOpen={ false }
index={ 1 }
@@ -202,36 +175,4 @@ describe( 'ActivityPanel Tab', () => {
expect( getByRole( 'tab' ) ).not.toHaveClass( 'is-active' );
} );
-
- it( 'has an has-unread class if unread is true', () => {
- const { getByRole, rerender } = render(
- <Tab
- icon={ <PagesIcon /> }
- title={ 'Hello World' }
- name={ 'overview' }
- unread={ true }
- selected={ false }
- isPanelOpen={ false }
- index={ 1 }
- onTabClick={ () => {} }
- />
- );
-
- expect( getByRole( 'tab' ) ).toHaveClass( 'has-unread' );
-
- rerender(
- <Tab
- icon={ <PagesIcon /> }
- title={ 'Hello World' }
- name={ 'overview' }
- unread={ false }
- selected={ false }
- isPanelOpen={ false }
- index={ 1 }
- onTabClick={ () => {} }
- />
- );
-
- expect( getByRole( 'tab' ) ).not.toHaveClass( 'has-unread' );
- } );
} );
diff --git a/plugins/woocommerce/client/admin/client/activity-panel/test/abbreviated-notifications-panel.js b/plugins/woocommerce/client/admin/client/activity-panel/test/abbreviated-notifications-panel.js
deleted file mode 100644
index 67960a0b2dc..00000000000
--- a/plugins/woocommerce/client/admin/client/activity-panel/test/abbreviated-notifications-panel.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { AbbreviatedNotificationsPanel } from '../panels/inbox/abbreviated-notifications-panel';
-
-jest.mock( '@wordpress/data', () => {
- // Require the original module to not be mocked...
- const originalModule = jest.requireActual( '@wordpress/data' );
-
- return {
- __esModule: true, // Use it when dealing with esModules
- ...originalModule,
- useSelect: jest.fn().mockReturnValue( {} ),
- };
-} );
-
-describe( 'Inbox', () => {
- it( 'does not show any abbreviated notifications', () => {
- const { queryByText } = render(
- <AbbreviatedNotificationsPanel thingsToDoNextCount={ 0 } />
- );
- expect( queryByText( 'Things to do next' ) ).toBeNull();
- expect( queryByText( 'Orders to fulfill' ) ).toBeNull();
- expect( queryByText( 'Reviews to moderate' ) ).toBeNull();
- expect( queryByText( 'Inventory to review' ) ).toBeNull();
- } );
- it( 'does not show any abbreviated panel when the extended task list is hidden and the setup list is visible', () => {
- useSelect.mockImplementation( () => ( {
- stockNoticesCount: 4,
- reviewsToModerateCount: 3,
- ordersToProcessCount: 2,
- isExtendedTaskListHidden: true,
- } ) );
- const { queryByText } = render(
- <AbbreviatedNotificationsPanel thingsToDoNextCount={ 1 } />
- );
- expect( queryByText( 'Things to do next' ) ).toBeNull();
- expect( queryByText( 'Orders to fulfill' ) ).toBeNull();
- expect( queryByText( 'Reviews to moderate' ) ).toBeNull();
- expect( queryByText( 'Inventory to review' ) ).toBeNull();
- } );
- it( 'shows the `Things to do next` notification panel, with 1 thing to do', () => {
- useSelect.mockImplementation( () => ( {
- isExtendedTaskListHidden: false,
- } ) );
- const { getByText } = render(
- <AbbreviatedNotificationsPanel thingsToDoNextCount={ 1 } />
- );
- expect( getByText( 'Things to do next' ) ).toBeDefined();
- expect( getByText( 'You have 1 new thing to do' ) ).toBeDefined();
- } );
- it( 'shows plural copy for the `Things to do next` notification panel', () => {
- const { getByText } = render(
- <AbbreviatedNotificationsPanel thingsToDoNextCount={ 5 } />
- );
- expect( getByText( 'Things to do next' ) ).toBeDefined();
- expect( getByText( 'You have 5 new things to do' ) ).toBeDefined();
- } );
- it( 'shows the `Orders to fulfill` notification panel, with 2 thing to do', () => {
- useSelect.mockImplementation( () => ( {
- ordersToProcessCount: 2,
- isSetupTaskListHidden: true,
- } ) );
- const { getByText } = render(
- <AbbreviatedNotificationsPanel thingsToDoNextCount={ 0 } />
- );
- expect( getByText( 'Orders to fulfill' ) ).toBeDefined();
- expect( getByText( 'You have 2 orders to fulfill' ) ).toBeDefined();
- } );
- it( 'shows the `Reviews to moderate` notification panel, with 3 thing to do', () => {
- useSelect.mockImplementation( () => ( {
- reviewsToModerateCount: 3,
- isSetupTaskListHidden: true,
- } ) );
- const { getByText } = render(
- <AbbreviatedNotificationsPanel thingsToDoNextCount={ 0 } />
- );
- expect( getByText( 'Reviews to moderate' ) ).toBeDefined();
- expect( getByText( 'You have 3 reviews to moderate' ) ).toBeDefined();
- } );
- it( 'shows the `Inventory to review` notification panel', () => {
- useSelect.mockImplementation( () => ( {
- stockNoticesCount: 4,
- isSetupTaskListHidden: true,
- } ) );
- const { getByText } = render(
- <AbbreviatedNotificationsPanel thingsToDoNextCount={ 0 } />
- );
- expect( getByText( 'Inventory to review' ) ).toBeDefined();
- expect(
- getByText( 'You have inventory to review and update' )
- ).toBeDefined();
- } );
- it( 'shows all the abbreviated notification panels', () => {
- useSelect.mockImplementation( () => ( {
- stockNoticesCount: 4,
- reviewsToModerateCount: 3,
- ordersToProcessCount: 2,
- isSetupTaskListHidden: true,
- } ) );
- const { getByText } = render(
- <AbbreviatedNotificationsPanel thingsToDoNextCount={ 1 } />
- );
- expect( getByText( 'Things to do next' ) ).toBeDefined();
- expect( getByText( 'Orders to fulfill' ) ).toBeDefined();
- expect( getByText( 'Reviews to moderate' ) ).toBeDefined();
- expect( getByText( 'Inventory to review' ) ).toBeDefined();
- } );
-} );
diff --git a/plugins/woocommerce/client/admin/client/activity-panel/test/index.js b/plugins/woocommerce/client/admin/client/activity-panel/test/index.js
index 60ff1e7a5f9..705079e2666 100644
--- a/plugins/woocommerce/client/admin/client/activity-panel/test/index.js
+++ b/plugins/woocommerce/client/admin/client/activity-panel/test/index.js
@@ -80,7 +80,6 @@ jest.mock( '../panel', () => {
describe( 'Activity Panel', () => {
beforeEach( () => {
useSelect.mockImplementation( () => ( {
- hasUnreadNotifications: false,
requestingTaskListOptions: false,
setupTaskListComplete: false,
setupTaskListHidden: false,
@@ -92,25 +91,22 @@ describe( 'Activity Panel', () => {
} ) );
} );
- it( 'should render inbox tab on embedded pages', () => {
- render( <ActivityPanel isEmbedded query={ {} } /> );
-
- expect( screen.getByRole( 'tab', { name: 'Activity' } ) ).toBeDefined();
- } );
-
- it( 'should render inbox tab if not on home screen', () => {
- render(
- <ActivityPanel query={ { page: 'wc-admin', path: '/customers' } } />
- );
-
- expect( screen.getByRole( 'tab', { name: 'Activity' } ) ).toBeDefined();
- } );
-
- it( 'should not render inbox tab on home screen', () => {
- render( <ActivityPanel query={ { page: 'wc-admin' } } /> );
+ it.each( [
+ [ 'embedded pages', true, {} ],
+ [ 'WooCommerce Admin pages', false, { path: '/customers' } ],
+ [ 'the home screen', false, { page: 'wc-admin' } ],
+ ] )(
+ 'should not render the activity tab on %s',
+ ( _, isEmbedded, query ) => {
+ render(
+ <ActivityPanel isEmbedded={ isEmbedded } query={ query } />
+ );
- expect( screen.queryByRole( 'tab', { name: 'Inbox' } ) ).toBeNull();
- } );
+ expect(
+ screen.queryByRole( 'tab', { name: 'Activity' } )
+ ).not.toBeInTheDocument();
+ }
+ );
it( 'should render preview store tab on home screen', () => {
render( <ActivityPanel query={ { page: 'wc-admin' } } /> );
diff --git a/plugins/woocommerce/client/admin/client/activity-panel/unread-indicators.js b/plugins/woocommerce/client/admin/client/activity-panel/unread-indicators.js
deleted file mode 100644
index 237d732db82..00000000000
--- a/plugins/woocommerce/client/admin/client/activity-panel/unread-indicators.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import { notesStore, userStore, QUERY_DEFAULTS } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { getUnreadNotesCount } from '~/inbox-panel/utils';
-import { getAdminSetting } from '~/utils/admin-settings';
-
-const UNREAD_NOTES_QUERY = {
- page: 1,
- per_page: QUERY_DEFAULTS.pageSize,
- status: 'unactioned',
- type: QUERY_DEFAULTS.noteTypes,
- orderby: 'date',
- order: 'desc',
-};
-
-export function hasUnreadNotes( select ) {
- const { getNotes, getNotesError, isResolving } = select( notesStore );
-
- const { getCurrentUser } = select( userStore );
- const userData = getCurrentUser();
- const lastRead = parseInt(
- userData &&
- userData.woocommerce_meta &&
- userData.woocommerce_meta.activity_panel_inbox_last_read,
- 10
- );
-
- if ( ! lastRead ) {
- return null;
- }
-
- getNotes( UNREAD_NOTES_QUERY );
- const isError = Boolean(
- getNotesError( 'getNotes', [ UNREAD_NOTES_QUERY ] )
- );
- const isRequesting = isResolving( 'getNotes', [ UNREAD_NOTES_QUERY ] );
-
- if ( isError || isRequesting ) {
- return null;
- }
-
- const latestNotes = getNotes( UNREAD_NOTES_QUERY );
- const unreadNotesCount = getUnreadNotesCount( latestNotes, lastRead );
-
- return unreadNotesCount > 0;
-}
-
-export function getLowStockCount() {
- return getAdminSetting( 'lowStockCount', 0 );
-}