This commit is contained in:
Hritik Chaudhary 2023-06-21 21:32:19 +05:30 committed by GitHub
parent ad0509f767
commit 73c7312969
1 changed files with 29 additions and 27 deletions

View File

@ -2,7 +2,6 @@
* External dependencies * External dependencies
*/ */
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import PropTypes from 'prop-types';
import { Icon, commentContent, external } from '@wordpress/icons'; import { Icon, commentContent, external } from '@wordpress/icons';
import { useEffect, useState } from '@wordpress/element'; import { useEffect, useState } from '@wordpress/element';
@ -10,7 +9,11 @@ import { useEffect, useState } from '@wordpress/element';
* Internal dependencies * Internal dependencies
*/ */
import './style.scss'; import './style.scss';
interface FeedbackPromptProps {
text: string;
title?: string;
url?: string;
}
/** /**
* Component to render a Feedback prompt in the sidebar. * Component to render a Feedback prompt in the sidebar.
* *
@ -23,7 +26,7 @@ const FeedbackPrompt = ( {
text, text,
title = __( 'Feedback?', 'woo-gutenberg-products-block' ), title = __( 'Feedback?', 'woo-gutenberg-products-block' ),
url = 'https://ideas.woocommerce.com/forums/133476-woocommerce?category_id=384565', url = 'https://ideas.woocommerce.com/forums/133476-woocommerce?category_id=384565',
} ) => { }: FeedbackPromptProps ) => {
// By returning false we ensure that this component is not entered into the InspectorControls // 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 // (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 // gets updated this component does get put into the InspectorControls children array but as the
@ -34,33 +37,32 @@ const FeedbackPrompt = ( {
}, [] ); }, [] );
return ( return (
isVisible && ( <>
<div className="wc-block-feedback-prompt"> { isVisible && (
<Icon icon={ commentContent } /> <div className="wc-block-feedback-prompt">
<h2 className="wc-block-feedback-prompt__title">{ title }</h2> <Icon icon={ commentContent } />
<p className="wc-block-feedback-prompt__text">{ text }</p> <h2 className="wc-block-feedback-prompt__title">
<a { title }
href={ url } </h2>
className="wc-block-feedback-prompt__link" <p className="wc-block-feedback-prompt__text">{ text }</p>
rel="noreferrer noopener" <a
target="_blank" href={ url }
> className="wc-block-feedback-prompt__link"
{ __( rel="noreferrer noopener"
'Give us your feedback.', target="_blank"
'woo-gutenberg-products-block' >
) } { __(
<Icon icon={ external } size={ 16 } /> 'Give us your feedback.',
</a> 'woo-gutenberg-products-block'
</div> ) }
) <Icon icon={ external } size={ 16 } />
</a>
</div>
) }
</>
); );
}; };
FeedbackPrompt.propTypes = {
text: PropTypes.string,
url: PropTypes.string,
};
export default FeedbackPrompt; export default FeedbackPrompt;
export const CartCheckoutFeedbackPrompt = () => ( export const CartCheckoutFeedbackPrompt = () => (