congrats.js (2826B)
1 /** 2 * WordPress dependencies 3 */ 4 import {__} from '@wordpress/i18n' 5 import CONFIG from '../config'; 6 import helper from '../helper'; 7 8 const { compose } = wp.compose; 9 const { withDispatch, withSelect } = wp.data; 10 11 12 const ratingStars = ( 13 <span className="rating-stars"> 14 <i className="fa fa-star"></i> 15 <i className="fa fa-star"></i> 16 <i className="fa fa-star"></i> 17 <i className="fa fa-star"></i> 18 <i className="fa fa-star"></i> 19 </span> 20 ); 21 22 function ChallengeCongrats(props) { 23 const {setChallengeStep, setChallengeFinalStatus, setChallengeOpen} = props; 24 const closeModal = () => { 25 setChallengeStep(CONFIG.beginningStep); 26 setChallengeFinalStatus(''); 27 setChallengeOpen(false); 28 } 29 return ( 30 <div className="redux-templates-modal-overlay"> 31 <div className="redux-templates-modal-wrapper challenge-popup-wrapper"> 32 <div className="challenge-popup-header challenge-popup-header-congrats" 33 style={{backgroundImage: `url(${redux_templates.plugin + 'assets/img/popup-congrats.png'})`}}> 34 <a className="challenge-popup-close" onClick={closeModal}> 35 <i className='fas fa-times' /> 36 </a> 37 </div> 38 <div className="challenge-popup-content"> 39 <h3>{__( 'Congrats, you did it!', redux_templates.i18n )}</h3> 40 <p> 41 {__( 'You completed the Redux Challenge in ', redux_templates.i18n )}<b>{helper.getLocalizedDuration()}</b>. 42 {__('Share your success story with other Redux users and help us spread the word', redux_templates.i18n)} 43 <b>{__('by giving Redux a 5-star rating (', redux_templates.i18n)} {ratingStars}{__(') on WordPress.org', redux_templates.i18n)}</b>. 44 {__('Thanks for your support and we look forward to bringing more awesome features.', redux_templates.i18n)} 45 </p> 46 <a href="https://wordpress.org/support/plugin/redux-framework/reviews/?filter=5#new-post" className="challenge-popup-btn challenge-popup-rate-btn" target="_blank" rel="noopener"> 47 {__( 'Rate Redux on Wordpress.org', redux_templates.i18n ) } 48 <span className="dashicons dashicons-external"></span> 49 </a> 50 </div> 51 </div> 52 </div> 53 ); 54 } 55 56 export default compose([ 57 withDispatch((dispatch) => { 58 const { setChallengeStep, setChallengeFinalStatus, setChallengeOpen } = dispatch('redux-templates/sectionslist'); 59 return { 60 setChallengeStep, 61 setChallengeFinalStatus, 62 setChallengeOpen 63 }; 64 }) 65 ])(ChallengeCongrats);