balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

index.js (3056B)

      1 /**
      2  * WordPress dependencies
      3  */
      4 const { useState } = wp.element;
      5 import { useSelect } from '@wordpress/data';
      6 import { ExternalLink, Guide } from '@wordpress/components';
      7 const {apiFetch} = wp;
      8 import { __ } from '@wordpress/i18n';
      9 
     10 /**
     11  * Internal dependencies
     12  */
     13 import {
     14 	GuideImage1,
     15 	GuideImage2,
     16 	GuideImage3,
     17 } from './images';
     18 import './style.scss';
     19 
     20 export default function WelcomeGuide() {
     21 
     22 	const [ isOpen, setIsOpen ] = useState( true );
     23 
     24 	const isActive = useSelect(
     25 		( select ) =>
     26 			select( 'core/edit-post' ).isFeatureActive( 'welcomeGuide' ),
     27 		[]
     28 	);
     29 
     30 	if ( isActive ) { // Don't want to show during the WP guide.
     31 		delete redux_templates.welcome; // In fact, we don't want to show it until the next page load!
     32 		return null;
     33 	}
     34 
     35 	if ( ! isOpen || 'undefined' === typeof( redux_templates.welcome ) ) {
     36 		return null;
     37 	}
     38 
     39 	return (
     40 		<Guide
     41 			className="redux-edit-post-welcome-guide"
     42 			contentLabel={ __( 'Say hello to the Redux template library', redux_templates.i18n ) }
     43 			onFinish={ () => {
     44 				setIsOpen( false );
     45 				const options = {
     46 					method: 'POST',
     47 					path: 'redux/v1/templates/welcome/?uid=' + window.userSettings.uid,
     48 				}
     49 				apiFetch(options).then(response => {
     50 				}).catch(error => {
     51 				});
     52 			} }
     53 			pages={ [
     54 				{
     55 					image: <GuideImage1 />,
     56 					content: (
     57 						<>
     58 							<h1 className="redux-edit-post-welcome-guide__heading">
     59 								{ __( 'Try the Redux Template Library', redux_templates.i18n ) }
     60 							</h1>
     61 							<h3 className="redux-edit-post-welcome-guide__text">
     62 								{ __(
     63 									'Redux brings you over 1,000 importable templates and blocks that allow you to build Gutenberg powered pages and websites in minutes not days.',
     64 									redux_templates.i18n
     65 								) }
     66 							</h3>
     67 						</>
     68 					),
     69 				},
     70 				{
     71 					image: <GuideImage2 />,
     72 					content: (
     73 						<>
     74 							<h1 className="redux-edit-post-welcome-guide__heading">
     75 								{ __( 'Using the Template Library', redux_templates.i18n ) }
     76 							</h1>
     77 							<h3 className="redux-edit-post-welcome-guide__text">
     78 								{ __(
     79 									'To use the template library click on the library button then pick your favourite template and import! Redux allows you to import beautiful Gutenberg pages in seconds.',
     80 									redux_templates.i18n
     81 								) }
     82 							</h3>
     83 						</>
     84 					),
     85 				},
     86 				{
     87 					image: <GuideImage3 />,
     88 					content: (
     89 						<>
     90 							<h1 className="redux-edit-post-welcome-guide__heading">
     91 								{ __( 'Import 5 templates for free or go Pro!', redux_templates.i18n ) }
     92 							</h1>
     93 							<h3 className="redux-edit-post-welcome-guide__text">
     94 								{ __(
     95 									'Redux allows you 5 free imports or you can go Pro now and import unlimited templates for just $49/year (limited time only).',
     96 									redux_templates.i18n
     97 								) }
     98 								<br /><br />
     99 								<center>
    100 									<ExternalLink href={ `${ redux_templates.u }welcome-guide` }>
    101 										{ __( 'Learn more at Redux.io', redux_templates.i18n ) }
    102 									</ExternalLink>
    103 								</center>
    104 							</h3>
    105 						</>
    106 					),
    107 				}
    108 			] }
    109 		/>
    110 	);
    111 }