popup
2 years ago
Container.tsx
2 years ago
FeedbackButton.tsx
2 years ago
FeedbackIcon.tsx
2 years ago
index.tsx
2 years ago
index.tsx
63 lines
| 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 |