Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
optometrists
/
cache
/
cache
/
cache
/
cache
/
.wp-cli
/
wp-content
/
plugins
/
woocommerce
/
packages
/
woocommerce-blocks
/
assets
/
js
/
atomic
/
blocks
/
product-elements
/
sale-badge
:
block.js
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
/** * External dependencies */ import PropTypes from 'prop-types'; import { __ } from '@wordpress/i18n'; import classnames from 'classnames'; import Label from '@woocommerce/base-components/label'; import { useInnerBlockLayoutContext, useProductDataContext, } from '@woocommerce/shared-context'; import { withProductDataContext } from '@woocommerce/shared-hocs'; /** * Internal dependencies */ import './style.scss'; /** * Product Sale Badge Block Component. * * @param {Object} props Incoming props. * @param {string} [props.className] CSS Class name for the component. * @param {string} [props.align] Alignment of the badge. * @return {*} The component. */ const Block = ( { className, align } ) => { const { parentClassName } = useInnerBlockLayoutContext(); const { product } = useProductDataContext(); if ( ! product.id || ! product.on_sale ) { return null; } const alignClass = typeof align === 'string' ? `wc-block-components-product-sale-badge--align-${ align }` : ''; return ( <div className={ classnames( 'wc-block-components-product-sale-badge', className, alignClass, { [ `${ parentClassName }__product-onsale` ]: parentClassName, } ) } > <Label label={ __( 'Sale', 'woocommerce' ) } screenReaderLabel={ __( 'Product on sale', 'woocommerce' ) } /> </div> ); }; Block.propTypes = { className: PropTypes.string, align: PropTypes.string, }; export default withProductDataContext( Block );