60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { getAdminLink } from '@woocommerce/settings';
|
|
import {
|
|
Product,
|
|
PRODUCTS_STORE_NAME,
|
|
WCDataSelector,
|
|
} from '@woocommerce/data';
|
|
import { useFormContext } from '@woocommerce/components';
|
|
import { useParams } from 'react-router-dom';
|
|
import { useSelect } from '@wordpress/data';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { getProductTitle } from './utils/get-product-title';
|
|
import { ProductBreadcrumbs } from './product-breadcrumbs';
|
|
import { ProductStatusBadge } from './product-status-badge';
|
|
import { WooHeaderPageTitle } from '~/header/utils';
|
|
import './product-title.scss';
|
|
|
|
export const ProductTitle: React.FC = () => {
|
|
const { values } = useFormContext< Product >();
|
|
const { productId } = useParams();
|
|
const { persistedName } = useSelect( ( select: WCDataSelector ) => {
|
|
const product = productId
|
|
? select( PRODUCTS_STORE_NAME ).getProduct(
|
|
parseInt( productId, 10 ),
|
|
undefined
|
|
)
|
|
: null;
|
|
|
|
return {
|
|
persistedName: product?.name,
|
|
};
|
|
} );
|
|
|
|
const breadcrumbs = [
|
|
{
|
|
href: getAdminLink( 'edit.php?post_type=product' ),
|
|
title: __( 'Products', 'woocommerce' ),
|
|
},
|
|
];
|
|
const title = getProductTitle( values.name, values.type, persistedName );
|
|
|
|
return (
|
|
<WooHeaderPageTitle>
|
|
<span className="woocommerce-product-title">
|
|
<ProductBreadcrumbs breadcrumbs={ breadcrumbs } />
|
|
<span className="woocommerce-product-title__wrapper">
|
|
{ title }
|
|
<ProductStatusBadge />
|
|
</span>
|
|
</span>
|
|
</WooHeaderPageTitle>
|
|
);
|
|
};
|