/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import PropTypes from 'prop-types';
import { Icon, comment, external } from '@woocommerce/icons';
/**
* Internal dependencies
*/
import './style.scss';
/**
* Component to render a Feedback prompt in the sidebar.
*
* @param {Object} props Incoming props for the component.
* @param {string} props.text
* @param {string} props.url
*/
const FeedbackPrompt = ( {
text,
url = 'https://ideas.woocommerce.com/forums/133476-woocommerce?category_id=384565',
} ) => {
return (
<div className="wc-block-feedback-prompt">
<Icon srcElement={ comment } />
<h2 className="wc-block-feedback-prompt__title">
{ __( 'Feedback?', 'woocommerce' ) }
</h2>
<p className="wc-block-feedback-prompt__text">{ text }</p>
<a
href={ url }
className="wc-block-feedback-prompt__link"
rel="noreferrer noopener"
target="_blank"
>
{ __(
'Give us your feedback.',
'woocommerce'
) }
<Icon srcElement={ external } size={ 16 } />
</a>
</div>
);
};
FeedbackPrompt.propTypes = {
text: PropTypes.string,
url: PropTypes.string,
};
export default FeedbackPrompt;
export const CartCheckoutFeedbackPrompt = () => (
<FeedbackPrompt
text={ __(
'We are currently working on improving our cart and checkout blocks to provide merchants with the tools and customization options they need.',
'woocommerce'
) }
url="https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?template=--cart-checkout-feedback.md"
/>
);