/** @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 } from '@woocommerce/navigation';
/**
* Internal dependencies
*/
import { ActivityCard, ActivityCardPlaceholder } from '../activity-card';
import ActivityHeader from '../activity-header';
import ActivityOutboundLink from '../activity-outbound-link';
import { getOrderRefundTotal } from 'lib/order-values';
import { QUERY_DEFAULTS } from 'store/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 (
);
}
const menu = (
Test
);
const orderCardTitle = ( order, address ) => {
const name = `${ address.first_name } ${ address.last_name }`;
return (
{ interpolateComponents( {
mixedString: sprintf(
__(
/* eslint-disable-next-line max-len */
'Order {{orderLink}}#%(orderNumber)s{{/orderLink}} placed by {{customerLink}}%(customerName)s{{/customerLink}} {{destinationFlag/}}',
'wc-admin'
),
{
orderNumber: order.number,
customerName: name,
}
),
components: {
orderLink: ,
// @TODO: Hook up customer name link
customerLink: ,
destinationFlag: ,
},
} ) }
);
};
return (
{ isRequesting ? (
) : (
{ orders.map( ( order, i ) => {
// We want the billing address, but shipping can be used as a fallback.
const address = { ...order.shipping, ...order.billing };
const productsCount = order.line_items.reduce(
( total, line ) => total + line.quantity,
0
);
const total = order.total;
const refundValue = getOrderRefundTotal( order );
const remainingTotal = getCurrencyFormatDecimal( order.total ) + refundValue;
return (
{ sprintf(
_n( '%d product', '%d products', productsCount, 'wc-admin' ),
productsCount
) }
{ refundValue ? (
{ formatCurrency( total, order.currency ) }{' '}
{ formatCurrency( remainingTotal, order.currency ) }
) : (
{ formatCurrency( total, order.currency ) }
) }
}
actions={
}
>
);
} ) }
{ __( 'Manage all orders' ) }
) }
);
}
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 { getOrders, isGetOrdersError, isGetOrdersRequesting } = select( 'wc-api' );
const ordersQuery = {
page: 1,
per_page: QUERY_DEFAULTS.pageSize,
status: 'processing',
};
const orders = getOrders( ordersQuery );
const isError = isGetOrdersError( ordersQuery );
const isRequesting = isGetOrdersRequesting( ordersQuery );
return { orders, isError, isRequesting };
} )
)( OrdersPanel );