woocommerce/plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js

/** @format */
/**
 * External dependencies
 */
import { __, _n, sprintf } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { Component, Fragment } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import Gridicon from 'gridicons';
import PropTypes from 'prop-types';
import interpolateComponents from 'interpolate-components';
import { keyBy, map, merge } from 'lodash';

/**
 * WooCommerce dependencies
 */
import { EmptyContent, Flag, Link, OrderStatus, Section } from '@woocommerce/components';
import { formatCurrency } from '@woocommerce/currency';
import { getAdminLink, getNewPath } from '@woocommerce/navigation';

/**
 * Internal dependencies
 */
import { ActivityCard, ActivityCardPlaceholder } from '../activity-card';
import ActivityHeader from '../activity-header';
import ActivityOutboundLink from '../activity-outbound-link';
import { DEFAULT_ACTIONABLE_STATUSES, QUERY_DEFAULTS } from 'wc-api/constants';
import withSelect from 'wc-api/with-select';

class OrdersPanel extends Component {
	renderEmptyCard() {
		const { hasNonActionableOrders } = this.props;
		if ( hasNonActionableOrders ) {
			return (
				<ActivityCard
					className="woocommerce-empty-activity-card"
					title={ __( 'You have no orders to fulfill', 'woocommerce-admin' ) }
					icon={ <Gridicon icon="checkmark" size={ 48 } /> }
				>
					{ __( "Good job, you've fulfilled all of your new orders!", 'woocommerce-admin' ) }
				</ActivityCard>
			);
		}

		return (
			<ActivityCard
				className="woocommerce-empty-activity-card"
				title={ __( 'You have no orders to fulfill', 'woocommerce-admin' ) }
				icon={ <Gridicon icon="time" size={ 48 } /> }
				actions={
					<Button
						href="https://docs.woocommerce.com/document/managing-orders/"
						isDefault
						target="_blank"
					>
						{ __( 'Learn more', 'woocommerce-admin' ) }
					</Button>
				}
			>
				{ __(
					"You're still waiting for your customers to make their first orders. " +
						'While you wait why not learn how to manage orders?',
					'woocommerce-admin'
				) }
			</ActivityCard>
		);
	}

	renderOrders() {
		const { orders } = this.props;

		if ( orders.length === 0 ) {
			return this.renderEmptyCard();
		}

		const getCustomerString = order => {
			const extended_info = order.extended_info || {};
			const { first_name, last_name } = extended_info.customer || {};

			if ( ! first_name && ! last_name ) {
				return '';
			}

			const name = [ first_name, last_name ].join( ' ' );
			return sprintf(
				__(
					/* translators: describes who placed an order, e.g. Order #123 placed by John Doe */
					'placed by {{customerLink}}%(customerName)s{{/customerLink}}',
					'woocommerce-admin'
				),
				{
					customerName: name,
				}
			);
		};

		const orderCardTitle = order => {
			const { extended_info, order_id } = order;
			const { customer } = extended_info || {};
			const customerUrl = customer.customer_id
				? getNewPath( {}, '/analytics/customers', {
						filter: 'single_customer',
						customers: customer.customer_id,
					} )
				: null;

			return (
				<Fragment>
					{ interpolateComponents( {
						mixedString: sprintf(
							__(
								'Order {{orderLink}}#%(orderNumber)s{{/orderLink}} %(customerString)s {{destinationFlag/}}',
								'woocommerce-admin'
							),
							{
								orderNumber: order_id,
								customerString: getCustomerString( order ),
							}
						),
						components: {
							orderLink: <Link href={ 'post.php?action=edit&post=' + order_id } type="wp-admin" />,
							destinationFlag: customer.country ? (
								<Flag code={ customer.country } round={ false } />
							) : null,
							customerLink: customerUrl ? <Link href={ customerUrl } type="wc-admin" /> : <span />,
						},
					} ) }
				</Fragment>
			);
		};

		const cards = [];
		orders.forEach( order => {
			const extended_info = order.extended_info || {};
			const productsCount =
				extended_info && extended_info.products ? extended_info.products.length : 0;

			const total = order.gross_total;

			cards.push(
				<ActivityCard
					key={ order.order_id }
					className="woocommerce-order-activity-card"
					title={ orderCardTitle( order ) }
					date={ order.date_created_gmt }
					subtitle={
						<div>
							<span>
								{ sprintf(
									_n( '%d product', '%d products', productsCount, 'woocommerce-admin' ),
									productsCount
								) }
							</span>
							<span>{ formatCurrency( total ) }</span>
						</div>
					}
					actions={
						<Button
							isDefault
							href={ getAdminLink( 'post.php?action=edit&post=' + order.order_id ) }
						>
							{ __( 'Begin fulfillment' ) }
						</Button>
					}
				>
					<OrderStatus order={ order } />
				</ActivityCard>
			);
		} );
		return (
			<Fragment>
				{ cards }
				<ActivityOutboundLink href={ 'edit.php?post_type=shop_order' }>
					{ __( 'Manage all orders', 'woocommerce-admin' ) }
				</ActivityOutboundLink>
			</Fragment>
		);
	}

	render() {
		const { orders, isRequesting, isError, orderStatuses } = this.props;

		if ( isError ) {
			if ( ! orderStatuses.length ) {
				return (
					<EmptyContent
						title={ __(
							"You currently don't have any actionable statuses. " +
								'To display orders here, select orders that require further review in settings.',
							'woocommerce-admin'
						) }
						actionLabel={ __( 'Settings', 'woocommerce-admin' ) }
						actionURL={ getAdminLink( 'admin.php?page=wc-admin&path=/analytics/settings' ) }
					/>
				);
			}

			const title = __(
				'There was an error getting your orders. Please try again.',
				'woocommerce-admin'
			);
			const actionLabel = __( 'Reload', 'woocommerce-admin' );
			const actionCallback = () => {
				// @todo Add tracking for how often an error is displayed, and the reload action is clicked.
				window.location.reload();
			};

			return (
				<Fragment>
					<EmptyContent
						title={ title }
						actionLabel={ actionLabel }
						actionURL={ null }
						actionCallback={ actionCallback }
					/>
				</Fragment>
			);
		}

		const title =
			isRequesting || orders.length
				? __( 'Orders', 'woocommerce-admin' )
				: __( 'No orders to ship', 'woocommerce-admin' );

		return (
			<Fragment>
				<ActivityHeader title={ title } />
				<Section>
					{ isRequesting ? (
						<ActivityCardPlaceholder
							className="woocommerce-order-activity-card"
							hasAction
							hasDate
							lines={ 2 }
						/>
					) : (
						this.renderOrders()
					) }
				</Section>
			</Fragment>
		);
	}
}

OrdersPanel.propTypes = {
	orders: PropTypes.array.isRequired,
	isError: PropTypes.bool,
	isRequesting: PropTypes.bool,
};

OrdersPanel.defaultProps = {
	orders: [],
	isError: false,
	isRequesting: false,
};

export default compose(
	withSelect( ( select, props ) => {
		const { hasActionableOrders } = props;
		const {
			getItems,
			getItemsTotalCount,
			getItemsError,
			isGetItemsRequesting,
			getReportItems,
			getReportItemsError,
			isReportItemsRequesting,
		} = select( 'wc-api' );
		const orderStatuses =
			wcSettings.wcAdminSettings.woocommerce_actionable_order_statuses ||
			DEFAULT_ACTIONABLE_STATUSES;

		if ( ! orderStatuses.length ) {
			return { orders: [], isError: true, isRequesting: false, orderStatuses };
		}

		if ( hasActionableOrders ) {
			// Query the core Orders endpoint for the most up-to-date statuses.
			const actionableOrdersQuery = {
				page: 1,
				per_page: QUERY_DEFAULTS.pageSize,
				status: orderStatuses,
				_fields: [ 'id', 'date_created_gmt', 'status' ],
			};
			const actionableOrders = Array.from( getItems( 'orders', actionableOrdersQuery ).values() );
			const isRequestingActionable = isGetItemsRequesting( 'orders', actionableOrdersQuery );

			if ( isRequestingActionable ) {
				return {
					isError: Boolean( getItemsError( 'orders', actionableOrdersQuery ) ),
					isRequesting: isRequestingActionable,
					orderStatuses,
				};
			}

			// Retrieve the Order stats data from our reporting table.
			const ordersQuery = {
				page: 1,
				per_page: QUERY_DEFAULTS.pageSize,
				extended_info: true,
				order_includes: map( actionableOrders, 'id' ),
			};

			const reportOrders = getReportItems( 'orders', ordersQuery ).data;
			const isError = Boolean( getReportItemsError( 'orders', ordersQuery ) );
			const isRequesting = isReportItemsRequesting( 'orders', ordersQuery );
			let orders = [];

			if ( reportOrders && reportOrders.length ) {
				// Merge the core endpoint data with our reporting table.
				const actionableOrdersById = keyBy( actionableOrders, 'id' );
				orders = reportOrders.map( order =>
					merge( {}, order, actionableOrdersById[ order.order_id ] || {} )
				);
			}

			return { orders, isError, isRequesting, orderStatuses };
		}

		// Get a count of all orders for messaging purposes.
		// @todo Add a property to wcSettings for this?
		const allOrdersQuery = {
			page: 1,
			per_page: 1,
			_fields: [ 'id' ],
		};

		getItems( 'orders', allOrdersQuery );
		const totalNonActionableOrders = getItemsTotalCount( 'orders', allOrdersQuery );
		const isError = Boolean( getItemsError( 'orders', allOrdersQuery ) );
		const isRequesting = isGetItemsRequesting( 'orders', allOrdersQuery );

		return {
			hasNonActionableOrders: totalNonActionableOrders > 0,
			isError,
			isRequesting,
			orderStatuses,
		};
	} )
)( OrdersPanel );