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

171 lines
5.0 KiB
JavaScript

/**
* 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 { ONBOARDING_STORE_NAME } from '@woocommerce/data';
import { box, comment, page } from '@wordpress/icons';
import { createSlotFill } from '@wordpress/components';
/**
* 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';
export const AbbreviatedNotificationsPanel = ( { thingsToDoNextCount } ) => {
const {
ordersToProcessCount,
reviewsToModerateCount,
stockNoticesCount,
isSetupTaskListHidden,
isExtendedTaskListHidden,
} = useSelect( ( select ) => {
const { getTaskList } = select( ONBOARDING_STORE_NAME );
const orderStatuses = getOrderStatuses( select );
return {
ordersToProcessCount: getUnreadOrders( select, orderStatuses ),
reviewsToModerateCount: getUnapprovedReviews( select ),
stockNoticesCount: getLowStockCount( select ),
isSetupTaskListHidden: getTaskList( 'setup' )?.isHidden,
isExtendedTaskListHidden: getTaskList( 'extended' )?.isHidden,
};
} );
const trackAbbreviatedCardClick = ( name ) => {
recordEvent( 'activity_panel_click', {
task: name,
} );
};
const { Slot } = createSlotFill( ABBREVIATED_NOTIFICATION_SLOT_NAME );
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">
{ 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 /> }
</div>
);
};
export default AbbreviatedNotificationsPanel;