GuideStart.js (9832B)
1 // import { useEffect } from '@wordpress/element' 2 import { __ } from '@wordpress/i18n' 3 import { useGlobalStore } from '../../state/GlobalState' 4 import { useUserStore } from '../../state/User' 5 import { General as GeneralApi } from '../../api/General' 6 import { useEffect, useRef } from '@wordpress/element' 7 import { useTemplatesStore } from '../../state/Templates' 8 9 export default function GuideStart() { 10 const preferred = useUserStore(state => state.preferredOptions) 11 const templates = useTemplatesStore(state => state.templates) 12 const closeGuide = () => { 13 GeneralApi.ping('guide-cancelled') 14 templates.length && useTemplatesStore.setState({ skipNextFetch: true }) 15 useGlobalStore.setState({ currentPage: 'main' }) 16 } 17 const goToWelcome = () => { 18 useGlobalStore.setState({ currentPage: 'welcome' }) 19 } 20 const setTypeAndProgress = (type) => { 21 // Update their preferred type and start the guide, or if they x 22 // then send them to the main screen 23 type && useUserStore.getState().updatePreferredOption('type', type) 24 useGlobalStore.setState({ 25 currentPage: type 26 ? 'guide-steps' 27 : 'main', 28 }) 29 } 30 31 const templatesRef = useRef() 32 const patternsRef = useRef() 33 34 useEffect(() => { 35 GeneralApi.ping('guide-started') 36 37 preferred?.type === 'pattern' 38 ? patternsRef.current.focus() 39 : templatesRef.current.focus() 40 }, [preferred?.type]) 41 42 const emptyToolbar = <div className="w-full h-16 relative z-10 border-solid border-0 flex-shrink-0"> 43 <div className="flex justify-between items-center px-6 sm:px-12 h-full"> 44 <div className="flex space-x-12 h-full"> 45 </div> 46 <div className="space-x-2 transform sm:translate-x-8"> 47 <button 48 type="button" 49 className="components-button has-icon" 50 onClick={closeGuide}> 51 <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" size="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg> 52 <span className="sr-only">{__('Close library', 'extendify-sdk')}</span> 53 </button> 54 </div> 55 </div> 56 </div> 57 58 return <div className="w-full h-full flex flex-col items-center relative shadow-xl max-w-screen-4xl mx-auto bg-white"> 59 {emptyToolbar} 60 <section className="flex-grow w-full justify-between flex flex-col overflow-y-scroll"> 61 <div className="flex flex-col w-full lg:h-full max-w-screen-2xl mx-auto p-8" style={{ paddingTop: '13vh' }}> 62 <h1 className="text-left m-0 mb-8 2xl:mb-16 text-7xl"> 63 {__('Hello', 'extendify-sdk')} 64 </h1> 65 <div className="flex-grow flex flex-col lg:flex-row space-x-0 space-y-16 lg:space-y-0 lg:space-x-16 xl:space-x-32"> 66 <button 67 style={{ maxHeight: '26rem' }} 68 ref={patternsRef} 69 onClick={() => setTypeAndProgress('pattern')} 70 className="button-focus-big-green cursor-pointer bg-white border border-black flex xl:w-1/2 flex-col h-full hover:bg-gray-50 min-h-60 p-8 lg:px-20 space-y-4"> 71 <h3 className="text-2xl m-0 text-extendify-main">{__('Add a section', 'extendify-sdk')}</h3> 72 <p className="text-left mb-8 text-lg">{__('Add to an existing page or build your own using patterns.', 'extendify-sdk')}</p> 73 <span className="pt-4"> 74 <svg xmlns="http://www.w3.org/2000/svg" width="206" height="122" viewBox="0 0 206 122" fill="none"> 75 <path d="M69 0H0V59H69V0Z" fill="#DFDFDF"/> 76 <path d="M204 0H79V60H204V0Z" fill="#DFDFDF"/> 77 <path d="M62.166 25H9.16602V28H62.166V25Z" fill="#F9F9F9"/> 78 <path d="M63.166 18H10.166V21H63.166V18Z" fill="#F9F9F9"/> 79 <path d="M62.166 34H9.16602V39H62.166V34Z" fill="#F9F9F9"/> 80 <path d="M62.166 43H9.16602V48H62.166V43Z" fill="#F9F9F9"/> 81 <path d="M140.166 25H87.166V28H140.166V25Z" fill="#F9F9F9"/> 82 <path d="M140.166 34H87.166V39H140.166V34Z" fill="#F9F9F9"/> 83 <path d="M140.166 43H87.166V48H140.166V43Z" fill="#F9F9F9"/> 84 <path d="M197.166 25H151.166V28H197.166V25Z" fill="#F9F9F9"/> 85 <path d="M141.166 17H88.166V20H141.166V17Z" fill="#F9F9F9"/> 86 <path d="M198.166 17H152.166V20H198.166V17Z" fill="#F9F9F9"/> 87 <path d="M62.166 10H9.16602V13H62.166V10Z" fill="#F9F9F9"/> 88 <path d="M140.166 9H87.166V12H140.166V9Z" fill="#F9F9F9"/> 89 <path d="M197.166 9H151.166V12H197.166V9Z" fill="#F9F9F9"/> 90 <path d="M197.166 34H151.166V39H197.166V34Z" fill="#F9F9F9"/> 91 <path d="M197.166 43H151.166V48H197.166V43Z" fill="#F9F9F9"/> 92 <path d="M154.172 77.8088H0V121.216H154.172V77.8088Z" fill="#DFDFDF"/> 93 <path d="M133.637 110.446C141.077 110.446 147.109 104.75 147.109 97.7229C147.109 90.6963 141.077 85 133.637 85C126.197 85 120.166 90.6963 120.166 97.7229C120.166 104.75 126.197 110.446 133.637 110.446Z" fill="#F9F9F9"/> 94 <path d="M205.166 78H162.166V121H205.166V78Z" fill="#DFDFDF"/> 95 <path d="M183.803 111.637C191.243 111.637 197.275 105.941 197.275 98.9141C197.275 91.8874 191.243 86.1912 183.803 86.1912C176.363 86.1912 170.332 91.8874 170.332 98.9141C170.332 105.941 176.363 111.637 183.803 111.637Z" fill="#F9F9F9"/> 96 <path d="M113.695 88.7898H13.4082V100.764H113.695V88.7898Z" fill="#F9F9F9"/> 97 <path d="M113.695 105.255H13.4082V109.745H113.695V105.255Z" fill="#F9F9F9"/> 98 </svg> 99 </span> 100 </button> 101 <button 102 style={{ 103 maxHeight: '26rem', 104 }} 105 ref={templatesRef} 106 onClick={() => setTypeAndProgress('template')} 107 className="button-focus-big-green cursor-pointer bg-white border border-black flex xl:w-1/2 flex-col h-full hover:bg-gray-50 min-h-60 p-8 lg:px-20 space-y-4"> 108 <h3 className="text-2xl m-0 text-extendify-main">{__('Add a page', 'extendify-sdk')}</h3> 109 <p className="text-left mb-8 text-lg">{__('Use a full page template that you can customize to make your own.', 'extendify-sdk')}</p> 110 <span className="pt-4"> 111 <svg xmlns="http://www.w3.org/2000/svg" width="156" height="128" viewBox="0 0 156 128" fill="none"> 112 <path d="M155.006 38.4395H0.833984V81.8471H155.006V38.4395Z" fill="#DFDFDF"/> 113 <path d="M155 0H1V36H155V0Z" fill="#DFDFDF"/> 114 <path d="M148 7H10V28H148V7Z" fill="#F9F9F9"/> 115 <path d="M147.521 47.4204H9.81445V50.414H147.521V47.4204Z" fill="#F9F9F9"/> 116 <path d="M147.521 56.4012H9.81445V60.8917H147.521V56.4012Z" fill="#F9F9F9"/> 117 <path d="M147.521 65.3821H9.81445V69.8726H147.521V65.3821Z" fill="#F9F9F9"/> 118 <path d="M155.006 83.8089H0.833984V127.217H155.006V83.8089Z" fill="#DFDFDF"/> 119 <path d="M21.7897 118.236C29.2297 118.236 35.261 112.539 35.261 105.513C35.261 98.486 29.2297 92.7898 21.7897 92.7898C14.3497 92.7898 8.31836 98.486 8.31836 105.513C8.31836 112.539 14.3497 118.236 21.7897 118.236Z" fill="#F9F9F9"/> 120 <path d="M144.529 92.7898H44.2422V104.764H144.529V92.7898Z" fill="#F9F9F9"/> 121 <path d="M144.529 109.255H44.2422V113.745H144.529V109.255Z" fill="#F9F9F9"/> 122 </svg> 123 </span> 124 </button> 125 </div> 126 </div> 127 <footer className="flex justify-between p-14 w-full"> 128 <button 129 type="button" 130 className="cursor-pointer bg-transparent space-x-8 flex items-center hover:bg-gray-100 p-4 -m-4" 131 onClick={goToWelcome}> 132 <svg className="block" width="64" height="64" viewBox="0 0 103 103" fill="none" xmlns="http://www.w3.org/2000/svg"> 133 <rect y="25.75" width="70.8125" height="77.25" fill="#000000"/> 134 <rect x="45.0625" width="57.9375" height="57.9375" fill="#37C2A2"/> 135 </svg> 136 <span className="text-2xl font-bold text-extendify-main"> 137 {__('What is Extendify?', 'extendify-sdk')} 138 </span> 139 </button> 140 {/* <button 141 type="button" 142 onClick={closeGuide} 143 className="bg-transparent cursor-pointer text-lg text-extendify-link underline"> 144 {__('Skip', 'extendify-sdk')} 145 </button> */} 146 </footer> 147 </section> 148 </div> 149 }