/** * External dependencies */ import { __, _n, _x } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; import { decodeEntities } from '@wordpress/html-entities'; /** * WooCommerce dependencies */ import { Link } from '@woocommerce/components'; import { getNewPath, getPersistedQuery } from '@woocommerce/navigation'; import { formatValue } from 'lib/number-format'; import { getAdminLink, getSetting } from '@woocommerce/wc-admin-settings'; /** * Internal dependencies */ import ReportTable from 'analytics/components/report-table'; import { isLowStock } from './utils'; const stockStatuses = getSetting( 'stockStatuses', {} ); export default class StockReportTable extends Component { constructor() { super(); this.getHeadersContent = this.getHeadersContent.bind( this ); this.getRowsContent = this.getRowsContent.bind( this ); this.getSummary = this.getSummary.bind( this ); } getHeadersContent() { return [ { label: __( 'Product / Variation', 'woocommerce-admin' ), key: 'title', required: true, isLeftAligned: true, isSortable: true, }, { label: __( 'SKU', 'woocommerce-admin' ), key: 'sku', isSortable: true, }, { label: __( 'Status', 'woocommerce-admin' ), key: 'stock_status', isSortable: true, defaultSort: true, }, { label: __( 'Stock', 'woocommerce-admin' ), key: 'stock_quantity', isSortable: true, }, ]; } getRowsContent( products ) { const { query } = this.props; const persistedQuery = getPersistedQuery( query ); return products.map( ( product ) => { const { id, manage_stock: manageStock, parent_id: parentId, sku, stock_quantity: stockQuantity, stock_status: stockStatus, low_stock_amount: lowStockAmount, } = product; const name = decodeEntities( product.name ); const productDetailLink = getNewPath( persistedQuery, '/analytics/products', { filter: 'single_product', products: parentId || id, } ); const nameLink = ( { name } ); const editProductLink = getAdminLink( 'post.php?action=edit&post=' + ( parentId || id ) ); const stockStatusLink = isLowStock( stockStatus, stockQuantity, lowStockAmount ) ? ( { _x( 'Low', 'Indication of a low quantity', 'woocommerce-admin' ) } ) : ( { stockStatuses[ stockStatus ] } ); return [ { display: nameLink, value: name, }, { display: sku, value: sku, }, { display: stockStatusLink, value: stockStatus, }, { display: manageStock ? formatValue( 'number', stockQuantity ) : __( 'N/A', 'woocommerce-admin' ), value: stockQuantity, }, ]; } ); } getSummary( totals ) { const { products = 0, outofstock = 0, lowstock = 0, instock = 0, onbackorder = 0, } = totals; return [ { label: _n( 'product', 'products', products, 'woocommerce-admin' ), value: formatValue( 'number', products ), }, { label: __( 'out of stock', outofstock, 'woocommerce-admin' ), value: formatValue( 'number', outofstock ), }, { label: __( 'low stock', lowstock, 'woocommerce-admin' ), value: formatValue( 'number', lowstock ), }, { label: __( 'on backorder', onbackorder, 'woocommerce-admin' ), value: formatValue( 'number', onbackorder ), }, { label: __( 'in stock', instock, 'woocommerce-admin' ), value: formatValue( 'number', instock ), }, ]; } render() { const { advancedFilters, filters, query } = this.props; return ( ); } }