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

219 lines
5.6 KiB
JavaScript

/** @format */
/**
* External dependencies
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import PropTypes from 'prop-types';
import { noop } from 'lodash';
import interpolateComponents from 'interpolate-components';
/**
* WooCommerce dependencies
*/
import {
EllipsisMenu,
EmptyContent,
Flag,
Link,
MenuTitle,
MenuItem,
OrderStatus,
Section,
} from '@woocommerce/components';
import { formatCurrency, getCurrencyFormatDecimal } 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 { QUERY_DEFAULTS } from 'wc-api/constants';
import withSelect from 'wc-api/with-select';
function OrdersPanel( { orders, isRequesting, isError } ) {
if ( isError ) {
const title = __( 'There was an error getting your orders. Please try again.', 'wc-admin' );
const actionLabel = __( 'Reload', 'wc-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 menu = (
<EllipsisMenu label="Demo Menu">
<MenuTitle>Test</MenuTitle>
<MenuItem onInvoke={ noop }>Test</MenuItem>
</EllipsisMenu>
);
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}}',
'wc-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',
customer_id: customer.customer_id,
} )
: null;
return (
<Fragment>
{ interpolateComponents( {
mixedString: sprintf(
__(
'Order {{orderLink}}#%(orderNumber)s{{/orderLink}} %(customerString)s {{destinationFlag/}}',
'wc-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;
const refundValue = order.refund_total;
const remainingTotal = getCurrencyFormatDecimal( total ) + refundValue;
cards.push(
<ActivityCard
key={ order.order_id }
className="woocommerce-order-activity-card"
title={ orderCardTitle( order ) }
date={ order.date_created }
subtitle={
<div>
<span>
{ sprintf(
_n( '%d product', '%d products', productsCount, 'wc-admin' ),
productsCount
) }
</span>
{ refundValue ? (
<span>
<s>{ formatCurrency( total ) }</s> { formatCurrency( remainingTotal ) }
</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>
<ActivityHeader title={ __( 'Orders', 'wc-admin' ) } menu={ menu } />
<Section>
{ isRequesting ? (
<ActivityCardPlaceholder
className="woocommerce-order-activity-card"
hasAction
hasDate
lines={ 2 }
/>
) : (
<Fragment>
{ cards }
<ActivityOutboundLink href={ 'edit.php?post_type=shop_order' }>
{ __( 'Manage all orders' ) }
</ActivityOutboundLink>
</Fragment>
) }
</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 => {
const { getReportItems, getReportItemsError, isReportItemsRequesting } = select( 'wc-api' );
const ordersQuery = {
page: 1,
per_page: QUERY_DEFAULTS.pageSize,
status_is: [ 'processing', 'on-hold' ],
extended_info: true,
};
const orders = getReportItems( 'orders', ordersQuery ).data;
const isError = Boolean( getReportItemsError( 'orders', ordersQuery ) );
const isRequesting = isReportItemsRequesting( 'orders', ordersQuery );
return { orders, isError, isRequesting };
} )
)( OrdersPanel );