CustomizeSite.js
144 lines
| 1 | /* global tiobDash */ |
| 2 | import SiteSettings from '../SiteSettings'; |
| 3 | import { __ } from '@wordpress/i18n'; |
| 4 | import { useEffect, useState } from '@wordpress/element'; |
| 5 | import { withDispatch, withSelect } from '@wordpress/data'; |
| 6 | import { compose } from '@wordpress/compose'; |
| 7 | import { trailingSlashIt } from '../../utils/common'; |
| 8 | import { get } from '../../utils/rest'; |
| 9 | import SitePreview from '../SitePreview'; |
| 10 | import ImportError from '../ImportError'; |
| 11 | |
| 12 | const CustomizeSite = ( { |
| 13 | siteData, |
| 14 | setFetching, |
| 15 | setImportData, |
| 16 | setError, |
| 17 | setPluginOptions, |
| 18 | general, |
| 19 | setGeneral, |
| 20 | error, |
| 21 | } ) => { |
| 22 | const [ siteStyle, setSiteStyle ] = useState( { |
| 23 | palette: 'base', |
| 24 | font: 'default', |
| 25 | } ); |
| 26 | const [ importDataDefault, setImportDataDefault ] = useState( null ); |
| 27 | |
| 28 | const { license } = tiobDash; |
| 29 | |
| 30 | useEffect( () => { |
| 31 | const fetchAddress = siteData.remote_url || siteData.url; |
| 32 | // Use the line below if testing in a staging env: |
| 33 | // const fetchAddress = siteData.url || siteData.remote_url; |
| 34 | const url = new URL( |
| 35 | `${ trailingSlashIt( fetchAddress ) }wp-json/ti-demo-data/data` |
| 36 | ); |
| 37 | url.searchParams.append( 'license', license ? license.key : 'free' ); |
| 38 | url.searchParams.append( 'ti_downloads', 'yes' ); |
| 39 | |
| 40 | get( url, true, false ) |
| 41 | .then( ( response ) => { |
| 42 | if ( ! response.ok ) { |
| 43 | setError( { |
| 44 | message: __( |
| 45 | 'Something went wrong while loading the site data. Please refresh the page and try again.', |
| 46 | 'templates-patterns-collection' |
| 47 | ), |
| 48 | code: 'ti__ob_failed_fetch_response', |
| 49 | } ); |
| 50 | setFetching( false ); |
| 51 | } |
| 52 | response.json().then( ( result ) => { |
| 53 | setImportData( { ...result, ...siteData } ); |
| 54 | setImportDataDefault( { ...result, ...siteData } ); |
| 55 | const mandatory = { |
| 56 | ...( result.mandatory_plugins || {} ), |
| 57 | }; |
| 58 | const optional = { |
| 59 | ...( result.recommended_plugins || {} ), |
| 60 | }; |
| 61 | const defaultOff = |
| 62 | result.default_off_recommended_plugins || []; |
| 63 | |
| 64 | const tiDownloads = { |
| 65 | ...( result.ti_downloads || {} ), |
| 66 | }; |
| 67 | |
| 68 | Object.keys( mandatory ).forEach( ( key ) => { |
| 69 | mandatory[ key ] = true; |
| 70 | } ); |
| 71 | Object.keys( optional ).forEach( ( key ) => { |
| 72 | optional[ key ] = ! defaultOff.includes( key ); |
| 73 | } ); |
| 74 | |
| 75 | setPluginOptions( { |
| 76 | ...optional, |
| 77 | ...mandatory, |
| 78 | ...tiDownloads, |
| 79 | } ); |
| 80 | |
| 81 | setFetching( false ); |
| 82 | } ); |
| 83 | } ) |
| 84 | .catch( () => { |
| 85 | setError( { |
| 86 | message: __( |
| 87 | 'Something went wrong while loading the site data. Please refresh the page and try again.', |
| 88 | 'templates-patterns-collection' |
| 89 | ), |
| 90 | code: 'ti__ob_failed_fetch_catch', |
| 91 | } ); |
| 92 | setFetching( false ); |
| 93 | } ); |
| 94 | }, [] ); |
| 95 | |
| 96 | if ( error ) { |
| 97 | return ( |
| 98 | <div className="ob-container narrow center"> |
| 99 | <ImportError |
| 100 | message={ error.message || null } |
| 101 | code={ error.code || null } |
| 102 | /> |
| 103 | <hr /> |
| 104 | </div> |
| 105 | ); |
| 106 | } |
| 107 | |
| 108 | return ( |
| 109 | <div className="ob-container row ovf-initial"> |
| 110 | <SiteSettings |
| 111 | importDataDefault={ importDataDefault } |
| 112 | siteStyle={ siteStyle } |
| 113 | setSiteStyle={ setSiteStyle } |
| 114 | general={ general } |
| 115 | setGeneral={ setGeneral } |
| 116 | /> |
| 117 | <SitePreview siteStyle={ siteStyle } /> |
| 118 | </div> |
| 119 | ); |
| 120 | }; |
| 121 | |
| 122 | export default compose( |
| 123 | withSelect( ( select ) => { |
| 124 | const { getCurrentEditor, getCurrentSite, getThemeAction, getError } = |
| 125 | select( 'ti-onboarding' ); |
| 126 | return { |
| 127 | error: getError(), |
| 128 | editor: getCurrentEditor(), |
| 129 | siteData: getCurrentSite(), |
| 130 | themeData: getThemeAction() || false, |
| 131 | }; |
| 132 | } ), |
| 133 | withDispatch( ( dispatch ) => { |
| 134 | const { setFetching, setImportData, setPluginOptions, setError } = |
| 135 | dispatch( 'ti-onboarding' ); |
| 136 | return { |
| 137 | setFetching, |
| 138 | setImportData, |
| 139 | setPluginOptions, |
| 140 | setError, |
| 141 | }; |
| 142 | } ) |
| 143 | )( CustomizeSite ); |
| 144 |