/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import {
useInnerBlockLayoutContext,
useProductDataContext,
} from '@woocommerce/shared-context';
import { isEmpty } from 'lodash';
import { withProductDataContext } from '@woocommerce/shared-hocs';
/**
* Internal dependencies
*/
import './style.scss';
/**
* Product Category Block Component.
*
* @param {Object} props Incoming props.
* @param {string} [props.className] CSS Class name for the component.
* @return {*} The component.
*/
const Block = ( { className } ) => {
const { parentClassName } = useInnerBlockLayoutContext();
const { product } = useProductDataContext();
if ( isEmpty( product.categories ) ) {
return null;
}
return (
<div
className={ classnames(
className,
'wc-block-components-product-category-list',
{
[ `${ parentClassName }__product-category-list` ]: parentClassName,
}
) }
>
{ __( 'Categories:', 'woocommerce' ) }{ ' ' }
<ul>
{ Object.values( product.categories ).map(
( { name, link, slug } ) => {
return (
<li key={ `category-list-item-${ slug }` }>
<a href={ link }>{ name }</a>
</li>
);
}
) }
</ul>
</div>
);
};
Block.propTypes = {
className: PropTypes.string,
};
export default withProductDataContext( Block );