| 1 |
import React, {useEffect, useState} from 'react'; |
| 2 |
import {__} from '@wordpress/i18n'; |
| 3 |
import Container from './Container'; |
| 4 |
import FeedbackButton from './FeedbackButton'; |
| 5 |
|
| 6 |
import {Container as PopupContainer, Content as PopupContent, Header as PopupHeader} from './popup'; |
| 7 |
|
| 8 |
const feedbackUrl = 'https://feedback.givewp.com/events-beta-feedback'; |
| 9 |
|
| 10 |
const HIDE_FEEDBACK = 'givewpEventTicketsBetaFeedback'; |
| 11 |
|
| 12 |
const Feedback = () => { |
| 13 |
|
| 14 |
const [hidden, setHidden] = useState(false); |
| 15 |
const closeCallback = () => { |
| 16 |
setHidden(true); |
| 17 |
localStorage.setItem(HIDE_FEEDBACK, 'true'); |
| 18 |
}; |
| 19 |
|
| 20 |
useEffect(() => { |
| 21 |
setHidden(!!localStorage.getItem(HIDE_FEEDBACK)); |
| 22 |
}, []); |
| 23 |
|
| 24 |
// @ts-ignore |
| 25 |
return ( |
| 26 |
<Container> |
| 27 |
{!hidden && ( |
| 28 |
<PopupContainer> |
| 29 |
<PopupHeader title={__('Event Beta Feedback', 'give')} closeCallback={closeCallback} /> |
| 30 |
<PopupContent> |
| 31 |
<div> |
| 32 |
<span style={{ |
| 33 |
fontSize: '14px', |
| 34 |
lineHeight: '21px', |
| 35 |
color: 'var(--givewp-grey-700)', |
| 36 |
}}> |
| 37 |
{__( |
| 38 |
'This is an early access to our event feature. Let us know how we can improve this feature to make your experience better. You can also choose to opt-out of accessing beta features in Settings.', |
| 39 |
'give' |
| 40 |
)} |
| 41 |
</span> |
| 42 |
</div> |
| 43 |
<div> |
| 44 |
<a |
| 45 |
target="_blank" |
| 46 |
href={feedbackUrl} |
| 47 |
rel="noopener noreferrer" |
| 48 |
onClick={closeCallback} |
| 49 |
style={{color: 'var(--givewp-green-500)'}} |
| 50 |
> |
| 51 |
{__('Provide Feedback', 'give')} |
| 52 |
</a> |
| 53 |
</div> |
| 54 |
</PopupContent> |
| 55 |
</PopupContainer> |
| 56 |
)} |
| 57 |
<FeedbackButton onClick={() => setHidden(!hidden)}>{__('Feedback', 'give')}</FeedbackButton> |
| 58 |
</Container> |
| 59 |
); |
| 60 |
}; |
| 61 |
|
| 62 |
export default Feedback; |
| 63 |
|
