woocommerce/plugins/woocommerce-admin/client/header/activity-panel/panels/inbox/abbreviated-notifications-p...

172 lines
5.1 KiB
JavaScript
Raw Normal View History

Show task and activity notifications in the Inbox panel (https://github.com/woocommerce/woocommerce-admin/pull/7017) * Added abbreviated panels This commit adds abbreviated panels * Added notifications getter * Variables renamed * Added unread-indicators refactor * Open panel by default * Refactor unread-indicators * Renamed a few files and added event recording * Modified "critical alert" presentation * Removed useless control * Renamed const * Added control to InboxPanel component * Multiple critical alerts handling * Fixed styles * Moved Inbox panel styles # Conflicts: # packages/experimental/src/inbox-note/style.scss * Added tests * Inbox panel width reduced * Small refactor for unread notifications * Renamed abbreviated card component * Added changelog # Conflicts: # readme.txt # Conflicts: # readme.txt * Renamed inbox-panel and the cards config file * Renamed unread notifications variable * Fixed abbreviated card box-shadow * Small refactor to unread-indicators file * Refactored method getInitialState * Added scroll to task list # Conflicts: # client/task-list/task-list.js * Small CSS changes to titles * Fixed changelog # Conflicts: # readme.txt # Conflicts: # readme.txt * Added param to filter `woocommerce_admin_onboarding_task_list` * Removed extensibility from `getAbbreviatedNotifications` * Fixed chunk name * Removed `critical` prop from `AbbreviatedCard` comopnent * Moved AbbreviatedCard component to `packages` This commit moves the component `AbbreviatedCard` to `packages` # Conflicts: # docs/components/_sidebar.md # packages/components/CHANGELOG.md # packages/components/src/index.js # Conflicts: # packages/components/CHANGELOG.md * Removed `critical alerts` tag from abbreviated card This commit removes the tag `critical alerts` from the `Things to do next` abbreviated card * Removed filter `woocommerce_admin_abbreviated_card_list` * Fixed icon * Added defaut value to `hasUnreadNotifications` * Fix mapSelect error when the dismissed tasks option isn't populated. * Added AbbreviatedNotificationsPanel * Added tests * Renamed `getUnreadNotes` to `isNotesPanelVisible` * Removed abbreviated-card.js * Added singular/plural copy handling * Renamed method `getInitialState` to `getInitialOpenState` * Fixed Link prop * Revert "Fixed Link prop" This reverts commit 74e6a7fae030766eb5d6be098caa15478f2cb2c6. * Fixed Link prop * Added task list visibility check * Fixed scroll after redirect # Conflicts: # client/task-list/index.js * Added propType to `AbbreviatedCard` * Fixed `Add-task doc example * Removed default values from ActivityPanel * Fixed multiple calls to a filter Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com> Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com>
2021-06-09 13:56:45 +00:00
/**
* 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 { OPTIONS_STORE_NAME } from '@woocommerce/data';
import { box, comment, page } from '@wordpress/icons';
import { createSlotFill } from '@wordpress/components';
Show task and activity notifications in the Inbox panel (https://github.com/woocommerce/woocommerce-admin/pull/7017) * Added abbreviated panels This commit adds abbreviated panels * Added notifications getter * Variables renamed * Added unread-indicators refactor * Open panel by default * Refactor unread-indicators * Renamed a few files and added event recording * Modified "critical alert" presentation * Removed useless control * Renamed const * Added control to InboxPanel component * Multiple critical alerts handling * Fixed styles * Moved Inbox panel styles # Conflicts: # packages/experimental/src/inbox-note/style.scss * Added tests * Inbox panel width reduced * Small refactor for unread notifications * Renamed abbreviated card component * Added changelog # Conflicts: # readme.txt # Conflicts: # readme.txt * Renamed inbox-panel and the cards config file * Renamed unread notifications variable * Fixed abbreviated card box-shadow * Small refactor to unread-indicators file * Refactored method getInitialState * Added scroll to task list # Conflicts: # client/task-list/task-list.js * Small CSS changes to titles * Fixed changelog # Conflicts: # readme.txt # Conflicts: # readme.txt * Added param to filter `woocommerce_admin_onboarding_task_list` * Removed extensibility from `getAbbreviatedNotifications` * Fixed chunk name * Removed `critical` prop from `AbbreviatedCard` comopnent * Moved AbbreviatedCard component to `packages` This commit moves the component `AbbreviatedCard` to `packages` # Conflicts: # docs/components/_sidebar.md # packages/components/CHANGELOG.md # packages/components/src/index.js # Conflicts: # packages/components/CHANGELOG.md * Removed `critical alerts` tag from abbreviated card This commit removes the tag `critical alerts` from the `Things to do next` abbreviated card * Removed filter `woocommerce_admin_abbreviated_card_list` * Fixed icon * Added defaut value to `hasUnreadNotifications` * Fix mapSelect error when the dismissed tasks option isn't populated. * Added AbbreviatedNotificationsPanel * Added tests * Renamed `getUnreadNotes` to `isNotesPanelVisible` * Removed abbreviated-card.js * Added singular/plural copy handling * Renamed method `getInitialState` to `getInitialOpenState` * Fixed Link prop * Revert "Fixed Link prop" This reverts commit 74e6a7fae030766eb5d6be098caa15478f2cb2c6. * Fixed Link prop * Added task list visibility check * Fixed scroll after redirect # Conflicts: # client/task-list/index.js * Added propType to `AbbreviatedCard` * Fixed `Add-task doc example * Removed default values from ActivityPanel * Fixed multiple calls to a filter Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com> Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com>
2021-06-09 13:56:45 +00:00
/**
* Internal dependencies
*/
import {
getLowStockCount,
getOrderStatuses,
getUnreadOrders,
} from '../../../../homescreen/activity-panel/orders/utils';
import { getUnapprovedReviews } from '../../../../homescreen/activity-panel/reviews/utils';
import { isWCAdmin } from '../../../../dashboard/utils';
import { Bell } from './icons/bell';
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';
Show task and activity notifications in the Inbox panel (https://github.com/woocommerce/woocommerce-admin/pull/7017) * Added abbreviated panels This commit adds abbreviated panels * Added notifications getter * Variables renamed * Added unread-indicators refactor * Open panel by default * Refactor unread-indicators * Renamed a few files and added event recording * Modified "critical alert" presentation * Removed useless control * Renamed const * Added control to InboxPanel component * Multiple critical alerts handling * Fixed styles * Moved Inbox panel styles # Conflicts: # packages/experimental/src/inbox-note/style.scss * Added tests * Inbox panel width reduced * Small refactor for unread notifications * Renamed abbreviated card component * Added changelog # Conflicts: # readme.txt # Conflicts: # readme.txt * Renamed inbox-panel and the cards config file * Renamed unread notifications variable * Fixed abbreviated card box-shadow * Small refactor to unread-indicators file * Refactored method getInitialState * Added scroll to task list # Conflicts: # client/task-list/task-list.js * Small CSS changes to titles * Fixed changelog # Conflicts: # readme.txt # Conflicts: # readme.txt * Added param to filter `woocommerce_admin_onboarding_task_list` * Removed extensibility from `getAbbreviatedNotifications` * Fixed chunk name * Removed `critical` prop from `AbbreviatedCard` comopnent * Moved AbbreviatedCard component to `packages` This commit moves the component `AbbreviatedCard` to `packages` # Conflicts: # docs/components/_sidebar.md # packages/components/CHANGELOG.md # packages/components/src/index.js # Conflicts: # packages/components/CHANGELOG.md * Removed `critical alerts` tag from abbreviated card This commit removes the tag `critical alerts` from the `Things to do next` abbreviated card * Removed filter `woocommerce_admin_abbreviated_card_list` * Fixed icon * Added defaut value to `hasUnreadNotifications` * Fix mapSelect error when the dismissed tasks option isn't populated. * Added AbbreviatedNotificationsPanel * Added tests * Renamed `getUnreadNotes` to `isNotesPanelVisible` * Removed abbreviated-card.js * Added singular/plural copy handling * Renamed method `getInitialState` to `getInitialOpenState` * Fixed Link prop * Revert "Fixed Link prop" This reverts commit 74e6a7fae030766eb5d6be098caa15478f2cb2c6. * Fixed Link prop * Added task list visibility check * Fixed scroll after redirect # Conflicts: # client/task-list/index.js * Added propType to `AbbreviatedCard` * Fixed `Add-task doc example * Removed default values from ActivityPanel * Fixed multiple calls to a filter Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com> Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com>
2021-06-09 13:56:45 +00:00
export const AbbreviatedNotificationsPanel = ( { thingsToDoNextCount } ) => {
const {
ordersToProcessCount,
reviewsToModerateCount,
stockNoticesCount,
isSetupTaskListHidden,
isExtendedTaskListHidden,
} = useSelect( ( select ) => {
const { getOption } = select( OPTIONS_STORE_NAME );
const orderStatuses = getOrderStatuses( select );
return {
ordersToProcessCount: getUnreadOrders( select, orderStatuses ),
reviewsToModerateCount: getUnapprovedReviews( select ),
stockNoticesCount: getLowStockCount( select ),
isSetupTaskListHidden:
getOption( 'woocommerce_task_list_hidden' ) === 'yes',
isExtendedTaskListHidden:
getOption( 'woocommerce_extended_task_list_hidden' ) === 'yes',
};
} );
const trackAbbreviatedCardClick = ( name ) => {
recordEvent( 'activity_panel_click', {
task: name,
} );
};
const { Slot } = createSlotFill( ABBREVIATED_NOTIFICATION_SLOT_NAME );
Show task and activity notifications in the Inbox panel (https://github.com/woocommerce/woocommerce-admin/pull/7017) * Added abbreviated panels This commit adds abbreviated panels * Added notifications getter * Variables renamed * Added unread-indicators refactor * Open panel by default * Refactor unread-indicators * Renamed a few files and added event recording * Modified "critical alert" presentation * Removed useless control * Renamed const * Added control to InboxPanel component * Multiple critical alerts handling * Fixed styles * Moved Inbox panel styles # Conflicts: # packages/experimental/src/inbox-note/style.scss * Added tests * Inbox panel width reduced * Small refactor for unread notifications * Renamed abbreviated card component * Added changelog # Conflicts: # readme.txt # Conflicts: # readme.txt * Renamed inbox-panel and the cards config file * Renamed unread notifications variable * Fixed abbreviated card box-shadow * Small refactor to unread-indicators file * Refactored method getInitialState * Added scroll to task list # Conflicts: # client/task-list/task-list.js * Small CSS changes to titles * Fixed changelog # Conflicts: # readme.txt # Conflicts: # readme.txt * Added param to filter `woocommerce_admin_onboarding_task_list` * Removed extensibility from `getAbbreviatedNotifications` * Fixed chunk name * Removed `critical` prop from `AbbreviatedCard` comopnent * Moved AbbreviatedCard component to `packages` This commit moves the component `AbbreviatedCard` to `packages` # Conflicts: # docs/components/_sidebar.md # packages/components/CHANGELOG.md # packages/components/src/index.js # Conflicts: # packages/components/CHANGELOG.md * Removed `critical alerts` tag from abbreviated card This commit removes the tag `critical alerts` from the `Things to do next` abbreviated card * Removed filter `woocommerce_admin_abbreviated_card_list` * Fixed icon * Added defaut value to `hasUnreadNotifications` * Fix mapSelect error when the dismissed tasks option isn't populated. * Added AbbreviatedNotificationsPanel * Added tests * Renamed `getUnreadNotes` to `isNotesPanelVisible` * Removed abbreviated-card.js * Added singular/plural copy handling * Renamed method `getInitialState` to `getInitialOpenState` * Fixed Link prop * Revert "Fixed Link prop" This reverts commit 74e6a7fae030766eb5d6be098caa15478f2cb2c6. * Fixed Link prop * Added task list visibility check * Fixed scroll after redirect # Conflicts: # client/task-list/index.js * Added propType to `AbbreviatedCard` * Fixed `Add-task doc example * Removed default values from ActivityPanel * Fixed multiple calls to a filter Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com> Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com>
2021-06-09 13:56:45 +00:00
const isWCAdminPage = isWCAdmin( window.location.href );
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-admin' ) }
</Text>
<Text as="p">
Show task and activity notifications in the Inbox panel (https://github.com/woocommerce/woocommerce-admin/pull/7017) * Added abbreviated panels This commit adds abbreviated panels * Added notifications getter * Variables renamed * Added unread-indicators refactor * Open panel by default * Refactor unread-indicators * Renamed a few files and added event recording * Modified "critical alert" presentation * Removed useless control * Renamed const * Added control to InboxPanel component * Multiple critical alerts handling * Fixed styles * Moved Inbox panel styles # Conflicts: # packages/experimental/src/inbox-note/style.scss * Added tests * Inbox panel width reduced * Small refactor for unread notifications * Renamed abbreviated card component * Added changelog # Conflicts: # readme.txt # Conflicts: # readme.txt * Renamed inbox-panel and the cards config file * Renamed unread notifications variable * Fixed abbreviated card box-shadow * Small refactor to unread-indicators file * Refactored method getInitialState * Added scroll to task list # Conflicts: # client/task-list/task-list.js * Small CSS changes to titles * Fixed changelog # Conflicts: # readme.txt # Conflicts: # readme.txt * Added param to filter `woocommerce_admin_onboarding_task_list` * Removed extensibility from `getAbbreviatedNotifications` * Fixed chunk name * Removed `critical` prop from `AbbreviatedCard` comopnent * Moved AbbreviatedCard component to `packages` This commit moves the component `AbbreviatedCard` to `packages` # Conflicts: # docs/components/_sidebar.md # packages/components/CHANGELOG.md # packages/components/src/index.js # Conflicts: # packages/components/CHANGELOG.md * Removed `critical alerts` tag from abbreviated card This commit removes the tag `critical alerts` from the `Things to do next` abbreviated card * Removed filter `woocommerce_admin_abbreviated_card_list` * Fixed icon * Added defaut value to `hasUnreadNotifications` * Fix mapSelect error when the dismissed tasks option isn't populated. * Added AbbreviatedNotificationsPanel * Added tests * Renamed `getUnreadNotes` to `isNotesPanelVisible` * Removed abbreviated-card.js * Added singular/plural copy handling * Renamed method `getInitialState` to `getInitialOpenState` * Fixed Link prop * Revert "Fixed Link prop" This reverts commit 74e6a7fae030766eb5d6be098caa15478f2cb2c6. * Fixed Link prop * Added task list visibility check * Fixed scroll after redirect # Conflicts: # client/task-list/index.js * Added propType to `AbbreviatedCard` * Fixed `Add-task doc example * Removed default values from ActivityPanel * Fixed multiple calls to a filter Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com> Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com>
2021-06-09 13:56:45 +00:00
{ 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-admin'
),
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-admin' ) }
</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-admin'
),
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-admin' ) }
</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-admin'
),
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-admin' ) }
</Text>
<Text>
{ __(
'You have inventory to review and update',
'woocommerce-admin'
) }
</Text>
</AbbreviatedCard>
) }
{ ! isExtendedTaskListHidden && <Slot /> }
Show task and activity notifications in the Inbox panel (https://github.com/woocommerce/woocommerce-admin/pull/7017) * Added abbreviated panels This commit adds abbreviated panels * Added notifications getter * Variables renamed * Added unread-indicators refactor * Open panel by default * Refactor unread-indicators * Renamed a few files and added event recording * Modified "critical alert" presentation * Removed useless control * Renamed const * Added control to InboxPanel component * Multiple critical alerts handling * Fixed styles * Moved Inbox panel styles # Conflicts: # packages/experimental/src/inbox-note/style.scss * Added tests * Inbox panel width reduced * Small refactor for unread notifications * Renamed abbreviated card component * Added changelog # Conflicts: # readme.txt # Conflicts: # readme.txt * Renamed inbox-panel and the cards config file * Renamed unread notifications variable * Fixed abbreviated card box-shadow * Small refactor to unread-indicators file * Refactored method getInitialState * Added scroll to task list # Conflicts: # client/task-list/task-list.js * Small CSS changes to titles * Fixed changelog # Conflicts: # readme.txt # Conflicts: # readme.txt * Added param to filter `woocommerce_admin_onboarding_task_list` * Removed extensibility from `getAbbreviatedNotifications` * Fixed chunk name * Removed `critical` prop from `AbbreviatedCard` comopnent * Moved AbbreviatedCard component to `packages` This commit moves the component `AbbreviatedCard` to `packages` # Conflicts: # docs/components/_sidebar.md # packages/components/CHANGELOG.md # packages/components/src/index.js # Conflicts: # packages/components/CHANGELOG.md * Removed `critical alerts` tag from abbreviated card This commit removes the tag `critical alerts` from the `Things to do next` abbreviated card * Removed filter `woocommerce_admin_abbreviated_card_list` * Fixed icon * Added defaut value to `hasUnreadNotifications` * Fix mapSelect error when the dismissed tasks option isn't populated. * Added AbbreviatedNotificationsPanel * Added tests * Renamed `getUnreadNotes` to `isNotesPanelVisible` * Removed abbreviated-card.js * Added singular/plural copy handling * Renamed method `getInitialState` to `getInitialOpenState` * Fixed Link prop * Revert "Fixed Link prop" This reverts commit 74e6a7fae030766eb5d6be098caa15478f2cb2c6. * Fixed Link prop * Added task list visibility check * Fixed scroll after redirect # Conflicts: # client/task-list/index.js * Added propType to `AbbreviatedCard` * Fixed `Add-task doc example * Removed default values from ActivityPanel * Fixed multiple calls to a filter Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com> Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com>
2021-06-09 13:56:45 +00:00
</div>
);
};
export default AbbreviatedNotificationsPanel;