woocommerce/plugins/woocommerce-admin/client/homescreen/activity-panel/index.js

151 lines
3.6 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { useSelect } from '@wordpress/data';
import { Badge } from '@woocommerce/components';
import {
Button,
Panel,
PanelBody,
PanelRow,
__experimentalText as Text,
} from '@wordpress/components';
import { getSetting } from '@woocommerce/wc-admin-settings';
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
import { useEffect } from '@wordpress/element';
/**
* Internal dependencies
*/
import './style.scss';
Migrate Stock Panel to Homescreen (https://github.com/woocommerce/woocommerce-admin/pull/5729) * Refactor low stock variable to be the count instead of a boolean. * Add initial render of the Stock panel on the homescreen. * Move existing Stock panel to homescreen accordion. * Ensure int value for low stock product count. * Update ProductImage styling. * Update stock activity car styles. * Only show 5 low stock products. * Add "undo" action to the stock updated snackbar. * Fix check for explicit notice dismissal when taking actions. * Hide now-in-stock products after updating. By cllearing "edited" flag on successful update. * Fetch more products after updating stock. * Fix the number of product placeholders shown. * Only show products placeholders on the initial fetch. * Fix placeholder style. * Fetch low stock count dynamically. * Let initialOpen prop toggle Accordion panels if they haven't been toggled by the user. * Refactor item total count state. Allows for auto-updating item totals whenever identical queries (from a totals perspective) are issued. * Add last order date to low stock products API response. * Allow non-date strings in ActivityCard date prop. * Add last order date to stock panel cards. * Remove empty stock panel view. * Add test file for StockPanel. * Only request necessary fields from products endpoint. * Add test for products fetch after stock update. * Fix field name. * Add test for last order date in low stock products API response. * Stock panel should be initially closed. * Skip updating a product if the quantity is unchanged.
2020-11-25 18:51:15 +00:00
import {
getLowStockCount,
getOrderStatuses,
getUnreadOrders,
} from './orders/utils';
import { getAllPanels } from './panels';
import { getUnapprovedReviews } from './reviews/utils';
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
import { getUrlParams } from '../../utils';
export const ActivityPanel = () => {
const panelsData = useSelect( ( select ) => {
const totalOrderCount = getSetting( 'orderCount', 0 );
const orderStatuses = getOrderStatuses( select );
const reviewsEnabled = getSetting( 'reviewsEnabled', 'no' );
const countUnreadOrders = getUnreadOrders( select, orderStatuses );
Migrate Stock Panel to Homescreen (https://github.com/woocommerce/woocommerce-admin/pull/5729) * Refactor low stock variable to be the count instead of a boolean. * Add initial render of the Stock panel on the homescreen. * Move existing Stock panel to homescreen accordion. * Ensure int value for low stock product count. * Update ProductImage styling. * Update stock activity car styles. * Only show 5 low stock products. * Add "undo" action to the stock updated snackbar. * Fix check for explicit notice dismissal when taking actions. * Hide now-in-stock products after updating. By cllearing "edited" flag on successful update. * Fetch more products after updating stock. * Fix the number of product placeholders shown. * Only show products placeholders on the initial fetch. * Fix placeholder style. * Fetch low stock count dynamically. * Let initialOpen prop toggle Accordion panels if they haven't been toggled by the user. * Refactor item total count state. Allows for auto-updating item totals whenever identical queries (from a totals perspective) are issued. * Add last order date to low stock products API response. * Allow non-date strings in ActivityCard date prop. * Add last order date to stock panel cards. * Remove empty stock panel view. * Add test file for StockPanel. * Only request necessary fields from products endpoint. * Add test for products fetch after stock update. * Fix field name. * Add test for last order date in low stock products API response. * Stock panel should be initially closed. * Skip updating a product if the quantity is unchanged.
2020-11-25 18:51:15 +00:00
const manageStock = getSetting( 'manageStock', 'no' );
const countLowStockProducts = getLowStockCount( select );
const countUnapprovedReviews = getUnapprovedReviews( select );
const publishedProductCount = getSetting( 'publishedProductCount', 0 );
const { getOption } = select( OPTIONS_STORE_NAME );
const isTaskListHidden = getOption( 'woocommerce_task_list_hidden' );
return {
Migrate Stock Panel to Homescreen (https://github.com/woocommerce/woocommerce-admin/pull/5729) * Refactor low stock variable to be the count instead of a boolean. * Add initial render of the Stock panel on the homescreen. * Move existing Stock panel to homescreen accordion. * Ensure int value for low stock product count. * Update ProductImage styling. * Update stock activity car styles. * Only show 5 low stock products. * Add "undo" action to the stock updated snackbar. * Fix check for explicit notice dismissal when taking actions. * Hide now-in-stock products after updating. By cllearing "edited" flag on successful update. * Fetch more products after updating stock. * Fix the number of product placeholders shown. * Only show products placeholders on the initial fetch. * Fix placeholder style. * Fetch low stock count dynamically. * Let initialOpen prop toggle Accordion panels if they haven't been toggled by the user. * Refactor item total count state. Allows for auto-updating item totals whenever identical queries (from a totals perspective) are issued. * Add last order date to low stock products API response. * Allow non-date strings in ActivityCard date prop. * Add last order date to stock panel cards. * Remove empty stock panel view. * Add test file for StockPanel. * Only request necessary fields from products endpoint. * Add test for products fetch after stock update. * Fix field name. * Add test for last order date in low stock products API response. * Stock panel should be initially closed. * Skip updating a product if the quantity is unchanged.
2020-11-25 18:51:15 +00:00
countLowStockProducts,
countUnapprovedReviews,
countUnreadOrders,
isTaskListHidden,
Migrate Stock Panel to Homescreen (https://github.com/woocommerce/woocommerce-admin/pull/5729) * Refactor low stock variable to be the count instead of a boolean. * Add initial render of the Stock panel on the homescreen. * Move existing Stock panel to homescreen accordion. * Ensure int value for low stock product count. * Update ProductImage styling. * Update stock activity car styles. * Only show 5 low stock products. * Add "undo" action to the stock updated snackbar. * Fix check for explicit notice dismissal when taking actions. * Hide now-in-stock products after updating. By cllearing "edited" flag on successful update. * Fetch more products after updating stock. * Fix the number of product placeholders shown. * Only show products placeholders on the initial fetch. * Fix placeholder style. * Fetch low stock count dynamically. * Let initialOpen prop toggle Accordion panels if they haven't been toggled by the user. * Refactor item total count state. Allows for auto-updating item totals whenever identical queries (from a totals perspective) are issued. * Add last order date to low stock products API response. * Allow non-date strings in ActivityCard date prop. * Add last order date to stock panel cards. * Remove empty stock panel view. * Add test file for StockPanel. * Only request necessary fields from products endpoint. * Add test for products fetch after stock update. * Fix field name. * Add test for last order date in low stock products API response. * Stock panel should be initially closed. * Skip updating a product if the quantity is unchanged.
2020-11-25 18:51:15 +00:00
manageStock,
publishedProductCount,
reviewsEnabled,
totalOrderCount,
orderStatuses,
};
} );
const panels = getAllPanels( panelsData );
useEffect( () => {
const visiblePanels = panels.reduce(
( acc, panel ) => {
acc[ panel.id ] = true;
return acc;
},
{ taskList: panelsData.isTaskListHidden !== 'yes' }
);
recordEvent( 'activity_panel_visible_panels', visiblePanels );
}, [ panelsData.isTaskListHidden ] );
if ( panels.length === 0 ) {
return null;
}
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 getInitialOpenState = ( panelId ) => {
const { opened_panel: openedPanel } = getUrlParams(
window.location.search
);
return panelId === openedPanel;
};
return (
<Panel className="woocommerce-activity-panel">
{ panels.map( ( panelData ) => {
const {
className,
count,
id,
initialOpen,
panel,
title,
collapsible,
} = panelData;
return collapsible ? (
<PanelBody
title={ [
<Text
key={ title }
variant="title.small"
size="20"
lineHeight="28px"
>
{ title }
</Text>,
count !== null && (
<Badge
key={ `${ title }-badge` }
count={ count }
/>
),
] }
key={ id }
className={ className }
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
initialOpen={ getInitialOpenState( id ) || initialOpen }
collapsible={ collapsible }
disabled={ ! collapsible }
onToggle={ ( isOpen ) => {
if ( ! isOpen ) {
return;
}
recordEvent( 'activity_panel_open', {
tab: id,
} );
} }
>
<PanelRow>{ panel }</PanelRow>
</PanelBody>
) : (
<div className="components-panel__body" key={ id }>
<h2 className="components-panel__body-title">
<Button
className="components-panel__body-toggle"
aria-expanded={ false }
disabled={ true }
>
<Text
variant="title.small"
size="20"
lineHeight="28px"
>
{ title }
</Text>
{ count !== null && <Badge count={ count } /> }
</Button>
</h2>
</div>
);
} ) }
</Panel>
);
};