/** * External dependencies */ import { __ } from '@wordpress/i18n'; import { Icon, commentContent, external } from '@wordpress/icons'; import { useEffect, useState } from '@wordpress/element'; /** * Internal dependencies */ import './style.scss'; interface FeedbackPromptProps { text: string; title?: string; url: string; } /** * Component to render a Feedback prompt in the sidebar. * * @param {Object} props Incoming props for the component. * @param {string} props.text * @param {string} props.title * @param {string} props.url */ const FeedbackPrompt = ( { text, title = __( 'Feedback?', 'woocommerce' ), url, }: FeedbackPromptProps ) => { // By returning false we ensure that this component is not entered into the InspectorControls // (which is a slot fill), children array on first render, on the second render when the state // gets updated this component does get put into the InspectorControls children array but as the // last item, ensuring it shows last in the sidebar. const [ isVisible, setIsVisible ] = useState( false ); useEffect( () => { setIsVisible( true ); }, [] ); return ( <> { isVisible && (

{ title }

{ text }

{ __( 'Give us your feedback.', 'woocommerce' ) }
) } ); }; export default FeedbackPrompt; export const CartCheckoutFeedbackPrompt = () => ( ); export const ProductQueryFeedbackPrompt = () => ( ); export const ProductCollectionFeedbackPrompt = () => ( );