/** * External dependencies */ import classnames from 'classnames'; import { HTMLAttributes } from 'react'; import { useInnerBlockLayoutContext, useProductDataContext, } from '@woocommerce/shared-context'; import { isFeaturePluginBuild } from '@woocommerce/block-settings'; import { withProductDataContext } from '@woocommerce/shared-hocs'; import ProductName from '@woocommerce/base-components/product-name'; import { useStoreEvents } from '@woocommerce/base-context/hooks'; /** * Internal dependencies */ import './style.scss'; import { Attributes } from './types'; import { useSpacingProps, useTypographyProps, useColorProps, } from '../../../../hooks/style-attributes'; type Props = Attributes & HTMLAttributes< HTMLDivElement >; interface TagNameProps extends HTMLAttributes< HTMLOrSVGElement > { headingLevel: number; elementType?: keyof JSX.IntrinsicElements; } const TagName = ( { children, headingLevel, elementType: ElementType = `h${ headingLevel }` as keyof JSX.IntrinsicElements, ...props }: TagNameProps ): JSX.Element => { return { children }; }; /** * Product Title Block Component. * * @param {Object} props Incoming props. * @param {string} [props.className] CSS Class name for the component. * @param {number} [props.headingLevel] Heading level (h1, h2, etc.) * @param {boolean} [props.showProductLink] Whether or not to display a link to the product page. * @param {string} [props.linkTarget] Specifies where to open the linked URL. * @param {string} [props.align] Title alignment. * will be used if this is not provided. * @return {*} The component. */ export const Block = ( props: Props ): JSX.Element => { const { className, headingLevel = 2, showProductLink = true, linkTarget, align, } = props; const { parentClassName } = useInnerBlockLayoutContext(); const { product } = useProductDataContext(); const { dispatchStoreEvent } = useStoreEvents(); const colorProps = useColorProps( props ); const spacingProps = useSpacingProps( props ); const typographyProps = useTypographyProps( props ); if ( ! product.id ) { return ( ); } return ( { dispatchStoreEvent( 'product-view-link', { product, } ); } } /> ); }; export default withProductDataContext( Block );