CloudLibrary
1 year ago
Settings
1 year ago
StarterSites
3 years ago
App.js
2 years ago
Card.js
3 years ago
CategoriesTabs.js
3 years ago
CategorySelector.js
2 years ago
CustomTooltip.js
3 years ago
DocNotice.js
2 years ago
EditorSelector.js
2 years ago
EditorTabs.js
4 years ago
Header.js
2 years ago
Icon.js
2 years ago
ImportModal.js
1 year ago
ImportModalError.js
2 years ago
ImportModalMock.js
4 years ago
ImportModalNote.js
4 years ago
ImportStepper.js
1 year ago
InstallModal.js
1 year ago
License.js
2 years ago
LicensePanelContext.js
3 years ago
Loading.js
4 years ago
Main.js
1 year ago
Migration.js
4 years ago
NewTCNotice.js
1 year ago
Notification.js
4 years ago
OnboardingContent.js
4 years ago
PreviewFrame.js
3 years ago
Search.js
2 years ago
StarterSiteCard.js
3 years ago
ImportModal.js
1024 lines
| 1 | /*global tiobDash*/ |
| 2 | /* eslint-disable no-console */ |
| 3 | import { |
| 4 | activateTheme, |
| 5 | cleanupImport, |
| 6 | importContent, |
| 7 | importMods, |
| 8 | importWidgets, |
| 9 | installPlugins, |
| 10 | installTheme, |
| 11 | } from '../utils/site-import'; |
| 12 | import { get, ajaxAction } from '../utils/rest'; |
| 13 | import { trailingSlashIt } from '../utils/common'; |
| 14 | import ImportStepper from './ImportStepper'; |
| 15 | import ImportModalNote from './ImportModalNote'; |
| 16 | import classnames from 'classnames'; |
| 17 | import ImportModalError from './ImportModalError'; |
| 18 | import ImportModalMock from './ImportModalMock'; |
| 19 | import CustomTooltip from './CustomTooltip'; |
| 20 | import DocNotice from './DocNotice'; |
| 21 | |
| 22 | import { |
| 23 | createInterpolateElement, |
| 24 | useEffect, |
| 25 | useState, |
| 26 | } from '@wordpress/element'; |
| 27 | import { withDispatch, withSelect } from '@wordpress/data'; |
| 28 | import { __, sprintf } from '@wordpress/i18n'; |
| 29 | import { compose } from '@wordpress/compose'; |
| 30 | |
| 31 | import { |
| 32 | Button, |
| 33 | Icon, |
| 34 | Modal, |
| 35 | Panel, |
| 36 | PanelBody, |
| 37 | PanelRow, |
| 38 | ToggleControl, |
| 39 | TextControl, |
| 40 | } from '@wordpress/components'; |
| 41 | |
| 42 | const ImportModal = ( { |
| 43 | setModal, |
| 44 | setThemeAction, |
| 45 | editor, |
| 46 | siteData, |
| 47 | themeData, |
| 48 | runTemplateImport, |
| 49 | } ) => { |
| 50 | const [ general, setGeneral ] = useState( { |
| 51 | content: true, |
| 52 | customizer: true, |
| 53 | widgets: true, |
| 54 | cleanup: false, |
| 55 | performanceAddon: true, |
| 56 | theme_install: themeData !== false, |
| 57 | } ); |
| 58 | const site = tiobDash.onboarding.homeUrl || ''; |
| 59 | |
| 60 | const [ themeInstallProgress, setThemeInstallProgress ] = useState( false ); |
| 61 | const [ performanceAddonProgress, setPerformanceAddonProgress ] = useState( |
| 62 | false |
| 63 | ); |
| 64 | const [ cleanupProgress, setCleanupProgress ] = useState( false ); |
| 65 | const [ pluginsProgress, setPluginsProgress ] = useState( false ); |
| 66 | const [ contentProgress, setContentProgress ] = useState( false ); |
| 67 | const [ customizerProgress, setCustomizerProgress ] = useState( false ); |
| 68 | const [ widgetsProgress, setWidgetsProgress ] = useState( false ); |
| 69 | const [ frontPageID, setFrontPageID ] = useState( null ); |
| 70 | const [ currentStep, setCurrentStep ] = useState( null ); |
| 71 | const [ importing, setImporting ] = useState( false ); |
| 72 | const [ pluginOptions, setPluginOptions ] = useState( {} ); |
| 73 | const [ error, setError ] = useState( null ); |
| 74 | const [ importData, setImportData ] = useState( null ); |
| 75 | const [ fetching, setFetching ] = useState( true ); |
| 76 | const [ optionsOpened, setOptionsOpened ] = useState( true ); |
| 77 | const [ themeOpened, setThemeOpened ] = useState( true ); |
| 78 | |
| 79 | const { license, cleanupAllowed } = tiobDash; |
| 80 | const [ isCleanupAllowed, setIsCleanupAllowed ] = useState( |
| 81 | cleanupAllowed |
| 82 | ); |
| 83 | const [ email, setEmail ] = useState( tiobDash.emailSubscribe.email || '' ); |
| 84 | const [ skipSubscribe, setSkipSubscribe ] = useState( |
| 85 | 'yes' === tiobDash?.emailSubscribe?.skipStatus |
| 86 | ); |
| 87 | const [ processingSub, setProcessingSub ] = useState( false ); |
| 88 | |
| 89 | useEffect( () => { |
| 90 | const fetchAddress = siteData.remote_url || siteData.url; |
| 91 | // Use the line below if testing in a staging env: |
| 92 | // const fetchAddress = siteData.url || siteData.remote_url; |
| 93 | const url = new URL( |
| 94 | `${ trailingSlashIt( fetchAddress ) }wp-json/ti-demo-data/data` |
| 95 | ); |
| 96 | url.searchParams.append( 'license', license ? license.key : 'free' ); |
| 97 | url.searchParams.append( 'ti_downloads', 'yes' ); |
| 98 | get( url, true, false ) |
| 99 | .then( ( response ) => { |
| 100 | if ( ! response.ok ) { |
| 101 | setError( { |
| 102 | message: __( |
| 103 | 'Something went wrong while loading the site data. Please refresh the page and try again.', |
| 104 | 'templates-patterns-collection' |
| 105 | ), |
| 106 | code: 'ti__ob_failed_fetch_response', |
| 107 | } ); |
| 108 | setFetching( false ); |
| 109 | } |
| 110 | response.json().then( ( result ) => { |
| 111 | setImportData( { ...result, ...siteData } ); |
| 112 | const mandatory = { |
| 113 | ...( result.mandatory_plugins || {} ), |
| 114 | }; |
| 115 | const optional = { |
| 116 | ...( result.recommended_plugins || {} ), |
| 117 | }; |
| 118 | const defaultOff = |
| 119 | result.default_off_recommended_plugins || []; |
| 120 | |
| 121 | const tiDownloads = { |
| 122 | ...( result.ti_downloads || {} ), |
| 123 | }; |
| 124 | |
| 125 | Object.keys( mandatory ).forEach( ( key ) => { |
| 126 | mandatory[ key ] = true; |
| 127 | } ); |
| 128 | Object.keys( optional ).forEach( ( key ) => { |
| 129 | optional[ key ] = ! defaultOff.includes( key ); |
| 130 | } ); |
| 131 | |
| 132 | setPluginOptions( { |
| 133 | ...optional, |
| 134 | ...mandatory, |
| 135 | ...tiDownloads, |
| 136 | } ); |
| 137 | |
| 138 | setFetching( false ); |
| 139 | } ); |
| 140 | } ) |
| 141 | .catch( () => { |
| 142 | setError( { |
| 143 | message: __( |
| 144 | 'Something went wrong while loading the site data. Please refresh the page and try again.', |
| 145 | 'templates-patterns-collection' |
| 146 | ), |
| 147 | code: 'ti__ob_failed_fetch_catch', |
| 148 | } ); |
| 149 | setFetching( false ); |
| 150 | } ); |
| 151 | }, [] ); |
| 152 | |
| 153 | const Note = () => { |
| 154 | return ( |
| 155 | <ImportModalNote |
| 156 | data={ importData } |
| 157 | externalInstalled={ externalPluginsInstalled } |
| 158 | /> |
| 159 | ); |
| 160 | }; |
| 161 | |
| 162 | const ModalHead = () => ( |
| 163 | <div className="header"> |
| 164 | <p className="description"> |
| 165 | { __( |
| 166 | 'Import the entire site including customizer options, pages, content and plugins.', |
| 167 | 'templates-patterns-collection' |
| 168 | ) } |
| 169 | </p> |
| 170 | </div> |
| 171 | ); |
| 172 | const Theme = () => { |
| 173 | const toggleOpen = () => { |
| 174 | setThemeOpened( ! themeOpened ); |
| 175 | }; |
| 176 | const rowClass = classnames( 'option-row', 'active' ); |
| 177 | const { icon, title, tooltip } = { |
| 178 | icon: 'admin-appearance', |
| 179 | title: __( 'Neve', 'templates-patterns-collection' ), |
| 180 | tooltip: __( |
| 181 | 'In order to import the starter site, Neve theme has to be installed and activated.', |
| 182 | 'templates-patterns-collection' |
| 183 | ), |
| 184 | }; |
| 185 | |
| 186 | return ( |
| 187 | <PanelBody |
| 188 | onToggle={ toggleOpen } |
| 189 | opened={ themeOpened } |
| 190 | className="options general" |
| 191 | title={ __( |
| 192 | 'Install required theme', |
| 193 | 'templates-patterns-collection' |
| 194 | ) } |
| 195 | > |
| 196 | <PanelRow className={ rowClass }> |
| 197 | <Icon icon={ icon } /> |
| 198 | <span>{ title }</span> |
| 199 | { tooltip && <CustomTooltip>{ tooltip }</CustomTooltip> } |
| 200 | </PanelRow> |
| 201 | </PanelBody> |
| 202 | ); |
| 203 | }; |
| 204 | |
| 205 | const Options = () => { |
| 206 | let map = { |
| 207 | content: { |
| 208 | title: __( 'Content', 'templates-patterns-collection' ), |
| 209 | icon: 'admin-post', |
| 210 | tooltip: __( |
| 211 | 'We recommend you backup your website content before attempting a full site import.', |
| 212 | 'templates-patterns-collection' |
| 213 | ), |
| 214 | }, |
| 215 | customizer: { |
| 216 | title: __( 'Customizer', 'templates-patterns-collection' ), |
| 217 | icon: 'admin-customizer', |
| 218 | }, |
| 219 | widgets: { |
| 220 | title: __( 'Widgets', 'templates-patterns-collection' ), |
| 221 | icon: 'admin-generic', |
| 222 | tooltip: __( |
| 223 | 'Widgets will be moved to the Inactive Widgets sidebar and can be retrieved from there.', |
| 224 | 'templates-patterns-collection' |
| 225 | ), |
| 226 | }, |
| 227 | performanceAddon: { |
| 228 | title: __( |
| 229 | 'Enable performance features for my site', |
| 230 | 'templates-patterns-collection' |
| 231 | ), |
| 232 | icon: 'dashboard', |
| 233 | tooltip: createInterpolateElement( |
| 234 | sprintf( |
| 235 | // translators: %s is Optimole plugin name. |
| 236 | __('Optimize and speed up your site with our trusted addon, <a><span>%s</span><icon/></a>. It’s free.', 'templates-patterns-collection' ), |
| 237 | __( 'Optimole', 'templates-patterns-collection' ) |
| 238 | ), |
| 239 | { |
| 240 | a: ( |
| 241 | <a |
| 242 | href="https://wordpress.org/plugins/optimole-wp/" |
| 243 | target={ '_blank' } |
| 244 | style={ { |
| 245 | textDecoration: 'none', |
| 246 | display: 'inline-flex', |
| 247 | alignItems: 'center', |
| 248 | } } rel="noreferrer" |
| 249 | /> |
| 250 | ), |
| 251 | icon: ( |
| 252 | <Icon |
| 253 | size={ 10 } |
| 254 | icon="external" |
| 255 | style={ { marginLeft: 0 } } |
| 256 | /> |
| 257 | ), |
| 258 | span: <div />, |
| 259 | } |
| 260 | ), |
| 261 | }, |
| 262 | }; |
| 263 | |
| 264 | if ( isCleanupAllowed === 'yes' ) { |
| 265 | map = { |
| 266 | cleanup: { |
| 267 | icon: 'trash', |
| 268 | title: __( |
| 269 | 'Cleanup previous import', |
| 270 | 'templates-patterns-collection' |
| 271 | ), |
| 272 | tooltip: __( |
| 273 | 'This will remove any plugins, images, customizer options, widgets posts and pages added by the previous demo import', |
| 274 | 'templates-patterns-collection' |
| 275 | ), |
| 276 | }, |
| 277 | ...map, |
| 278 | }; |
| 279 | } |
| 280 | |
| 281 | const toggleOpen = () => { |
| 282 | setOptionsOpened( ! optionsOpened ); |
| 283 | }; |
| 284 | |
| 285 | return ( |
| 286 | <PanelBody |
| 287 | onToggle={ toggleOpen } |
| 288 | opened={ optionsOpened } |
| 289 | className="options general" |
| 290 | title={ __( |
| 291 | 'Import settings', |
| 292 | 'templates-patterns-collection' |
| 293 | ) } |
| 294 | > |
| 295 | { Object.keys( map ).map( ( id, index ) => { |
| 296 | const rowClass = classnames( 'option-row', { |
| 297 | active: general[ id ], |
| 298 | } ); |
| 299 | const { icon, title, tooltip } = map[ id ]; |
| 300 | |
| 301 | return ( |
| 302 | <PanelRow className={ rowClass } key={ index }> |
| 303 | <Icon icon={ icon } /> |
| 304 | <span>{ title }</span> |
| 305 | { tooltip && ( |
| 306 | <CustomTooltip |
| 307 | toLeft={ [ |
| 308 | 'performanceAddon', |
| 309 | 'cleanup', |
| 310 | ].includes( id ) } |
| 311 | rightOffset={ id === 'cleanup' ? -90 : 0 } |
| 312 | > |
| 313 | { tooltip } |
| 314 | </CustomTooltip> |
| 315 | ) } |
| 316 | { id !== 'theme_install' && ( |
| 317 | <div className="toggle-wrapper"> |
| 318 | <ToggleControl |
| 319 | checked={ general[ id ] } |
| 320 | onChange={ () => { |
| 321 | setGeneral( { |
| 322 | ...general, |
| 323 | [ id ]: ! general[ id ], |
| 324 | } ); |
| 325 | } } |
| 326 | /> |
| 327 | </div> |
| 328 | ) } |
| 329 | </PanelRow> |
| 330 | ); |
| 331 | } ) } |
| 332 | </PanelBody> |
| 333 | ); |
| 334 | }; |
| 335 | const Plugins = () => { |
| 336 | if ( fetching ) { |
| 337 | return null; |
| 338 | } |
| 339 | const allPlugins = { |
| 340 | ...( importData.recommended_plugins || {} ), |
| 341 | ...( importData.mandatory_plugins || {} ), |
| 342 | }; |
| 343 | |
| 344 | if ( Object.keys( allPlugins ).length < 1 ) { |
| 345 | return null; |
| 346 | } |
| 347 | |
| 348 | const [ pluginsOpened, setPluginsOpened ] = useState( |
| 349 | Object.keys( allPlugins ).length < 3 |
| 350 | ); |
| 351 | |
| 352 | const toggleOpen = () => { |
| 353 | setPluginsOpened( ! pluginsOpened ); |
| 354 | }; |
| 355 | |
| 356 | const pluginsList = Object.keys( allPlugins ) |
| 357 | .map( ( slug, index ) => { |
| 358 | return allPlugins[ slug ]; |
| 359 | } ) |
| 360 | .join( ', ' ); |
| 361 | |
| 362 | return ( |
| 363 | <> |
| 364 | <PanelBody |
| 365 | onToggle={ toggleOpen } |
| 366 | opened={ pluginsOpened } |
| 367 | className="options plugins" |
| 368 | title={ __( 'Plugins', 'templates-patterns-collection' ) } |
| 369 | > |
| 370 | { Object.keys( allPlugins ).map( ( slug, index ) => { |
| 371 | const rowClass = classnames( 'option-row', { |
| 372 | active: pluginOptions[ slug ], |
| 373 | } ); |
| 374 | return ( |
| 375 | <PanelRow className={ rowClass } key={ index }> |
| 376 | <Icon icon="admin-plugins" /> |
| 377 | <span |
| 378 | dangerouslySetInnerHTML={ { |
| 379 | __html: allPlugins[ slug ], |
| 380 | } } |
| 381 | /> |
| 382 | { slug in importData.recommended_plugins && ( |
| 383 | <div className="toggle-wrapper"> |
| 384 | <ToggleControl |
| 385 | checked={ pluginOptions[ slug ] } |
| 386 | onChange={ () => { |
| 387 | setPluginOptions( { |
| 388 | ...pluginOptions, |
| 389 | [ slug ]: ! pluginOptions[ |
| 390 | slug |
| 391 | ], |
| 392 | } ); |
| 393 | } } |
| 394 | /> |
| 395 | </div> |
| 396 | ) } |
| 397 | </PanelRow> |
| 398 | ); |
| 399 | } ) } |
| 400 | </PanelBody> |
| 401 | { ! pluginsOpened && ( |
| 402 | <i className="plugin-summary"> |
| 403 | <CustomTooltip toLeft={ false }> |
| 404 | <span |
| 405 | dangerouslySetInnerHTML={ { |
| 406 | __html: pluginsList, |
| 407 | } } |
| 408 | /> |
| 409 | </CustomTooltip> |
| 410 | { __( |
| 411 | 'Additional plugins are required for this Starter Site in order to work properly.', |
| 412 | 'templates-patterns-collection' |
| 413 | ) } |
| 414 | </i> |
| 415 | ) } |
| 416 | </> |
| 417 | ); |
| 418 | }; |
| 419 | |
| 420 | function runImportCleanup() { |
| 421 | console.clear(); |
| 422 | if ( ! general.cleanup ) { |
| 423 | console.log( '[S] Cleanup.' ); |
| 424 | runImport(); |
| 425 | return false; |
| 426 | } |
| 427 | setCurrentStep( 'cleanup' ); |
| 428 | console.log( '[P] Cleanup.' ); |
| 429 | cleanupImport( {} ) |
| 430 | .then( ( response ) => { |
| 431 | if ( ! response.success ) { |
| 432 | handleError( response, 'cleanup' ); |
| 433 | return false; |
| 434 | } |
| 435 | console.log( '[D] Cleanup.' ); |
| 436 | setCleanupProgress( 'done' ); |
| 437 | runImport(); |
| 438 | } ) |
| 439 | .catch( ( incomingError ) => |
| 440 | handleError( incomingError, 'cleanup' ) |
| 441 | ); |
| 442 | } |
| 443 | |
| 444 | function handleThemeInstall() { |
| 445 | const callbackSuccess = () => { |
| 446 | setThemeAction( { ...themeData, action: 'activate' } ); |
| 447 | console.log( '[D] Theme Install.' ); |
| 448 | handleActivate(); |
| 449 | }; |
| 450 | |
| 451 | const callbackError = ( err ) => { |
| 452 | setThemeAction( { ...themeData, action: 'activate' } ); |
| 453 | handleError( |
| 454 | err.errorMessage || |
| 455 | __( |
| 456 | 'Could not install theme.', |
| 457 | 'templates-patterns-collection' |
| 458 | ), |
| 459 | 'theme_install' |
| 460 | ); |
| 461 | }; |
| 462 | |
| 463 | installTheme( 'neve', callbackSuccess, callbackError ); |
| 464 | } |
| 465 | |
| 466 | function handleActivate() { |
| 467 | const callbackSuccess = () => { |
| 468 | console.log( '[D] Theme Activate.' ); |
| 469 | setThemeInstallProgress( 'done' ); |
| 470 | setThemeAction( false ); |
| 471 | runImportPlugins(); |
| 472 | }; |
| 473 | |
| 474 | const callbackError = () => { |
| 475 | handleError( |
| 476 | __( |
| 477 | 'Could not activate theme.', |
| 478 | 'templates-patterns-collection' |
| 479 | ), |
| 480 | 'theme_install' |
| 481 | ); |
| 482 | }; |
| 483 | |
| 484 | activateTheme( themeData, callbackSuccess, callbackError ); |
| 485 | } |
| 486 | |
| 487 | function runImport() { |
| 488 | // console.clear(); |
| 489 | if ( ! themeData ) { |
| 490 | console.log( '[S] Theme.' ); |
| 491 | runImportPlugins(); |
| 492 | return false; |
| 493 | } |
| 494 | if ( themeData.action === 'install' ) { |
| 495 | setCurrentStep( 'theme_install' ); |
| 496 | console.log( '[P] Theme Install.' ); |
| 497 | handleThemeInstall(); |
| 498 | return false; |
| 499 | } |
| 500 | setCurrentStep( 'theme_install' ); |
| 501 | console.log( '[P] Theme Activate.' ); |
| 502 | handleActivate(); |
| 503 | } |
| 504 | |
| 505 | function runImportPlugins() { |
| 506 | // console.clear(); |
| 507 | if ( |
| 508 | ! pluginOptions && |
| 509 | ! general.performanceAddon |
| 510 | ) { |
| 511 | console.log( '[S] Plugins.' ); |
| 512 | runImportContent(); |
| 513 | return false; |
| 514 | } |
| 515 | setCurrentStep( 'plugins' ); |
| 516 | console.log( '[P] Plugins.' ); |
| 517 | installPlugins( pluginOptions ) |
| 518 | .then( ( response ) => { |
| 519 | if ( ! response.success ) { |
| 520 | handleError( response, 'plugins' ); |
| 521 | return false; |
| 522 | } |
| 523 | console.log( '[D] Plugins.' ); |
| 524 | setPluginsProgress( 'done' ); |
| 525 | runImportContent(); |
| 526 | } ) |
| 527 | .catch( ( incomingError ) => |
| 528 | handleError( incomingError, 'plugins' ) |
| 529 | ); |
| 530 | } |
| 531 | |
| 532 | function runImportContent() { |
| 533 | if ( ! general.content ) { |
| 534 | console.log( '[S] Content.' ); |
| 535 | runImportCustomizer(); |
| 536 | return false; |
| 537 | } |
| 538 | setCurrentStep( 'content' ); |
| 539 | console.log( '[P] Content.' ); |
| 540 | importContent( { |
| 541 | contentFile: importData.content_file, |
| 542 | source: 'remote', |
| 543 | frontPage: importData.front_page, |
| 544 | shopPages: importData.shop_pages, |
| 545 | paymentForms: importData.payment_forms, |
| 546 | masteriyoData: importData.masteriyo_data, |
| 547 | demoSlug: importData.slug, |
| 548 | editor, |
| 549 | } ) |
| 550 | .then( ( response ) => { |
| 551 | if ( ! response.success ) { |
| 552 | handleError( response, 'content' ); |
| 553 | return false; |
| 554 | } |
| 555 | console.log( '[D] Content.' ); |
| 556 | if ( response.frontpage_id ) { |
| 557 | setFrontPageID( response.frontpage_id ); |
| 558 | } |
| 559 | setContentProgress( 'done' ); |
| 560 | runImportCustomizer(); |
| 561 | } ) |
| 562 | .catch( ( incomingError ) => |
| 563 | handleError( incomingError, 'content' ) |
| 564 | ); |
| 565 | } |
| 566 | |
| 567 | function runImportCustomizer() { |
| 568 | if ( ! general.customizer ) { |
| 569 | console.log( '[S] Customizer.' ); |
| 570 | runImportWidgets(); |
| 571 | return false; |
| 572 | } |
| 573 | setCurrentStep( 'customizer' ); |
| 574 | console.log( '[P] Customizer.' ); |
| 575 | importMods( { |
| 576 | source_url: importData.url, |
| 577 | theme_mods: importData.theme_mods, |
| 578 | wp_options: importData.wp_options, |
| 579 | } ) |
| 580 | .then( ( response ) => { |
| 581 | if ( ! response.success ) { |
| 582 | handleError( response, 'customizer' ); |
| 583 | return false; |
| 584 | } |
| 585 | console.log( '[D] Customizer.' ); |
| 586 | setCustomizerProgress( 'done' ); |
| 587 | runImportWidgets(); |
| 588 | } ) |
| 589 | .catch( ( incomingError ) => |
| 590 | handleError( incomingError, 'customizer' ) |
| 591 | ); |
| 592 | } |
| 593 | |
| 594 | function runImportWidgets() { |
| 595 | if ( ! general.widgets ) { |
| 596 | console.log( '[S] Widgets.' ); |
| 597 | runPerformanceAddonInstall(); |
| 598 | return false; |
| 599 | } |
| 600 | setCurrentStep( 'widgets' ); |
| 601 | console.log( '[P] Widgets.' ); |
| 602 | importWidgets( importData.widgets ) |
| 603 | .then( ( response ) => { |
| 604 | if ( ! response.success ) { |
| 605 | handleError( response, 'widgets' ); |
| 606 | return false; |
| 607 | } |
| 608 | console.log( '[D] Widgets.' ); |
| 609 | setWidgetsProgress( 'done' ); |
| 610 | runPerformanceAddonInstall(); |
| 611 | } ) |
| 612 | .catch( ( incomingError ) => |
| 613 | handleError( incomingError, 'widgets' ) |
| 614 | ); |
| 615 | } |
| 616 | function runPerformanceAddonInstall() { |
| 617 | if ( ! general.performanceAddon ) { |
| 618 | console.log( '[S] Performance Addon.' ); |
| 619 | importDone(); |
| 620 | return false; |
| 621 | } |
| 622 | setCurrentStep( 'performanceAddon' ); |
| 623 | console.log( '[P] Performance Addon.' ); |
| 624 | |
| 625 | installPlugins( { 'optimole-wp': true } ) |
| 626 | .then( ( response ) => { |
| 627 | if ( ! response.success ) { |
| 628 | handleError( response, 'performanceAddon' ); |
| 629 | return false; |
| 630 | } |
| 631 | console.log( '[D] Performance Addon.' ); |
| 632 | setPerformanceAddonProgress( 'done' ); |
| 633 | importDone(); |
| 634 | } ) |
| 635 | .catch( ( incomingError ) => |
| 636 | handleError( incomingError, 'performanceAddon' ) |
| 637 | ); |
| 638 | } |
| 639 | |
| 640 | function importDone() { |
| 641 | setCurrentStep( 'done' ); |
| 642 | setIsCleanupAllowed( 'yes' ); |
| 643 | tiobDash.cleanupAllowed = 'yes'; |
| 644 | setImporting( false ); |
| 645 | } |
| 646 | |
| 647 | function handleError( incomingError, step ) { |
| 648 | setImporting( false ); |
| 649 | setCurrentStep( null ); |
| 650 | if ( 'cleanup' === step ) { |
| 651 | setPluginsProgress( 'skip' ); |
| 652 | } |
| 653 | if ( 'plugins' === step ) { |
| 654 | setContentProgress( 'skip' ); |
| 655 | } |
| 656 | if ( [ 'content', 'plugins' ].includes( step ) ) { |
| 657 | setCustomizerProgress( 'skip' ); |
| 658 | } |
| 659 | if ( [ 'content', 'plugins', 'customizer' ].includes( step ) ) { |
| 660 | setWidgetsProgress( 'skip' ); |
| 661 | } |
| 662 | |
| 663 | const map = { |
| 664 | cleanup: __( |
| 665 | 'Something went wrong while cleaning the previous import.', |
| 666 | 'templates-patterns-collection' |
| 667 | ), |
| 668 | plugins: __( |
| 669 | 'Something went wrong while installing the necessary plugins.', |
| 670 | 'templates-patterns-collection' |
| 671 | ), |
| 672 | content: __( |
| 673 | 'Something went wrong while importing the website content.', |
| 674 | 'templates-patterns-collection' |
| 675 | ), |
| 676 | customizer: __( |
| 677 | 'Something went wrong while updating the customizer settings.', |
| 678 | 'templates-patterns-collection' |
| 679 | ), |
| 680 | widgets: __( |
| 681 | 'Something went wrong while importing the widgets.', |
| 682 | 'templates-patterns-collection' |
| 683 | ), |
| 684 | performanceAddon: __( |
| 685 | 'Something went wrong while installing the performance addon.', |
| 686 | 'templates-patterns-collection' |
| 687 | ), |
| 688 | }; |
| 689 | |
| 690 | switch ( step ) { |
| 691 | case 'cleanup': |
| 692 | setCleanupProgress( 'error' ); |
| 693 | break; |
| 694 | case 'plugins': |
| 695 | setPluginsProgress( 'error' ); |
| 696 | break; |
| 697 | case 'content': |
| 698 | setContentProgress( 'error' ); |
| 699 | break; |
| 700 | case 'customizer': |
| 701 | setCustomizerProgress( 'error' ); |
| 702 | break; |
| 703 | case 'widgets': |
| 704 | setWidgetsProgress( 'error' ); |
| 705 | break; |
| 706 | case 'performanceAddon': |
| 707 | setPerformanceAddonProgress( 'error' ); |
| 708 | break; |
| 709 | } |
| 710 | setError( |
| 711 | incomingError.data |
| 712 | ? { |
| 713 | message: map[ step ], |
| 714 | code: incomingError.data, |
| 715 | } |
| 716 | : { message: map[ step ] } |
| 717 | ); |
| 718 | } |
| 719 | |
| 720 | const closeModal = () => { |
| 721 | if ( importing ) { |
| 722 | return false; |
| 723 | } |
| 724 | setModal( false ); |
| 725 | }; |
| 726 | |
| 727 | const externalPluginsInstalled = siteData.external_plugins |
| 728 | ? siteData.external_plugins.every( ( value ) => true === value.active ) |
| 729 | : true; |
| 730 | const allOptionsOff = Object.keys( general ).every( |
| 731 | ( k ) => false === general[ k ] |
| 732 | ); |
| 733 | const editLinkMap = { |
| 734 | elementor: `${ tiobDash.onboarding.homeUrl }/wp-admin/post.php?post=${ frontPageID }&action=elementor`, |
| 735 | brizy: `${ tiobDash.onboarding.homeUrl }/?brizy-edit`, |
| 736 | 'beaver builder': `${ tiobDash.onboarding.homeUrl }/?fl_builder`, |
| 737 | 'thrive architect': `${ tiobDash.onboarding.homeUrl }/wp-admin/post.php?post=${ frontPageID }&action=architect&tve=true`, |
| 738 | 'divi builder': `${ tiobDash.onboarding.homeUrl }/?et_fb=1&PageSpeed=off`, |
| 739 | gutenberg: `${ tiobDash.onboarding.homeUrl }/wp-admin/post.php?post=${ frontPageID }&action=edit`, |
| 740 | }; |
| 741 | const editLink = editLinkMap[ editor ]; |
| 742 | |
| 743 | let viewWebsiteText = __( |
| 744 | 'View Website & Subscribe', |
| 745 | 'templates-patterns-collection' |
| 746 | ); |
| 747 | let skipText = __( |
| 748 | 'Skip and add your own content', |
| 749 | 'templates-patterns-collection' |
| 750 | ); |
| 751 | if ( skipSubscribe ) { |
| 752 | viewWebsiteText = __( 'View Website', 'templates-patterns-collection' ); |
| 753 | skipText = __( |
| 754 | 'Add your own content', |
| 755 | 'templates-patterns-collection' |
| 756 | ); |
| 757 | } |
| 758 | |
| 759 | const markSubscribeSkip = ( redirect, data = {} ) => { |
| 760 | ajaxAction( |
| 761 | tiobDash.emailSubscribe.ajaxURL, |
| 762 | 'skip_subscribe', |
| 763 | tiobDash.emailSubscribe.nonce, |
| 764 | data |
| 765 | ).then( () => { |
| 766 | setSkipSubscribe( true ); |
| 767 | setProcessingSub( false ); |
| 768 | window.location.href = redirect; |
| 769 | } ); |
| 770 | }; |
| 771 | |
| 772 | const goToEditContent = () => { |
| 773 | if ( skipSubscribe ) { |
| 774 | window.location.href = editLink; |
| 775 | return; |
| 776 | } |
| 777 | setProcessingSub( true ); |
| 778 | markSubscribeSkip( editLink, { isTempSkip: true } ); |
| 779 | }; |
| 780 | |
| 781 | const viewWebsiteAndSubscribe = () => { |
| 782 | if ( skipSubscribe ) { |
| 783 | window.location.href = site; |
| 784 | return; |
| 785 | } |
| 786 | |
| 787 | setProcessingSub( true ); |
| 788 | |
| 789 | if ( '' === email.trim() ) { |
| 790 | markSubscribeSkip( site, { isTempSkip: true } ); |
| 791 | return; |
| 792 | } |
| 793 | |
| 794 | fetch( 'https://api.themeisle.com/tracking/subscribe', { |
| 795 | method: 'POST', |
| 796 | headers: { |
| 797 | 'Content-Type': 'application/json', |
| 798 | }, |
| 799 | body: JSON.stringify( { |
| 800 | slug: 'templates-patterns-collection', |
| 801 | site, |
| 802 | email, |
| 803 | } ), |
| 804 | } ) |
| 805 | .then( ( r ) => r.json() ) |
| 806 | .then( ( response ) => { |
| 807 | if ( 'success' === response.code ) { |
| 808 | markSubscribeSkip( site ); |
| 809 | } |
| 810 | } ) |
| 811 | ?.catch( ( error ) => { |
| 812 | console.error( error ); |
| 813 | markSubscribeSkip( site, { isTempSkip: true } ); |
| 814 | } ); |
| 815 | }; |
| 816 | |
| 817 | let modalTitle = importData |
| 818 | ? sprintf( |
| 819 | /* translators: name of starter site */ |
| 820 | __( |
| 821 | 'Import %s as a complete site', |
| 822 | 'templates-patterns-collection' |
| 823 | ), |
| 824 | importData.title |
| 825 | ) |
| 826 | : ''; |
| 827 | if ( 'done' === currentStep && ! error ) { |
| 828 | modalTitle = __( |
| 829 | 'Content was successfully imported', |
| 830 | 'templates-patterns-collection' |
| 831 | ); |
| 832 | } |
| 833 | |
| 834 | return ( |
| 835 | <Modal |
| 836 | className={ classnames( [ 'ob-import-modal', { fetching } ] ) } |
| 837 | onRequestClose={ closeModal } |
| 838 | shouldCloseOnClickOutside={ ! importing && ! fetching } |
| 839 | isDismissible={ ! importing && ! fetching } |
| 840 | title={ modalTitle } |
| 841 | > |
| 842 | { fetching ? ( |
| 843 | <ImportModalMock /> |
| 844 | ) : ( |
| 845 | <> |
| 846 | <div className="modal-body"> |
| 847 | { 'done' === currentStep && |
| 848 | ! error && |
| 849 | siteData.doc_url && ( |
| 850 | <DocNotice |
| 851 | data={ { |
| 852 | text: __( |
| 853 | 'Learn more about this starter site', |
| 854 | 'templates-patterns-collection' |
| 855 | ), |
| 856 | url: siteData.doc_url, |
| 857 | } } |
| 858 | /> |
| 859 | ) } |
| 860 | { ! importing && 'done' !== currentStep && ! error ? ( |
| 861 | <> |
| 862 | <ModalHead /> |
| 863 | <Note /> |
| 864 | <Panel className="modal-toggles"> |
| 865 | { themeData !== false && <Theme /> } |
| 866 | <Options /> |
| 867 | <Plugins /> |
| 868 | </Panel> |
| 869 | </> |
| 870 | ) : ( |
| 871 | <> |
| 872 | { error && ( |
| 873 | <> |
| 874 | <ImportModalError |
| 875 | message={ error.message || null } |
| 876 | code={ error.code || null } |
| 877 | /> |
| 878 | <hr /> |
| 879 | </> |
| 880 | ) } |
| 881 | { null !== currentStep && ( |
| 882 | <ImportStepper |
| 883 | progress={ { |
| 884 | theme_install: themeInstallProgress, |
| 885 | cleanup: cleanupProgress, |
| 886 | plugins: pluginsProgress, |
| 887 | content: contentProgress, |
| 888 | customizer: customizerProgress, |
| 889 | widgets: widgetsProgress, |
| 890 | performanceAddon: performanceAddonProgress, |
| 891 | } } |
| 892 | currentStep={ currentStep } |
| 893 | willDo={ general } |
| 894 | /> |
| 895 | ) } |
| 896 | { 'done' === currentStep && ! skipSubscribe && ( |
| 897 | <> |
| 898 | <p className="tpc-subscribe-email-text"> |
| 899 | { __( |
| 900 | 'Stay up-to-date on news, tips and product updates', |
| 901 | 'templates-patterns-collection' |
| 902 | ) } |
| 903 | </p> |
| 904 | |
| 905 | <TextControl |
| 906 | aria-label={ __( |
| 907 | 'Enter your email', |
| 908 | 'templates-patterns-collection' |
| 909 | ) } |
| 910 | type="email" |
| 911 | value={ email } |
| 912 | onChange={ setEmail } |
| 913 | className="tpc-email-input" |
| 914 | /> |
| 915 | </> |
| 916 | ) } |
| 917 | { 'done' === currentStep && skipSubscribe && ( |
| 918 | <span |
| 919 | style={ { |
| 920 | display: 'block', |
| 921 | marginBottom: '60px', |
| 922 | } } |
| 923 | /> |
| 924 | ) } |
| 925 | </> |
| 926 | ) } |
| 927 | </div> |
| 928 | { ! importing && ( |
| 929 | <div className="modal-footer"> |
| 930 | { 'done' !== currentStep ? ( |
| 931 | <> |
| 932 | <Button |
| 933 | className="import-templates" |
| 934 | isLink |
| 935 | onClick={ runTemplateImport } |
| 936 | > |
| 937 | { __( |
| 938 | 'I want to import just the templates', |
| 939 | 'templates-patterns-collection' |
| 940 | ) } |
| 941 | </Button> |
| 942 | { ! error && ( |
| 943 | <Button |
| 944 | className="import" |
| 945 | isPrimary |
| 946 | disabled={ |
| 947 | allOptionsOff || |
| 948 | ! externalPluginsInstalled |
| 949 | } |
| 950 | onClick={ () => { |
| 951 | setImporting( true ); |
| 952 | runImportCleanup(); |
| 953 | } } |
| 954 | > |
| 955 | { __( |
| 956 | 'Import entire site', |
| 957 | 'templates-patterns-collection' |
| 958 | ) } |
| 959 | </Button> |
| 960 | ) } |
| 961 | </> |
| 962 | ) : ( |
| 963 | <div className="import-done-actions"> |
| 964 | <Button |
| 965 | isLink |
| 966 | className={ classnames( 'close', { |
| 967 | 'is-grayed': ! skipSubscribe, |
| 968 | } ) } |
| 969 | disabled={ processingSub } |
| 970 | onClick={ goToEditContent } |
| 971 | > |
| 972 | { skipText } |
| 973 | </Button> |
| 974 | <Button |
| 975 | isPrimary |
| 976 | className="import import-full-w" |
| 977 | disabled={ processingSub } |
| 978 | onClick={ viewWebsiteAndSubscribe } |
| 979 | > |
| 980 | { viewWebsiteText } |
| 981 | </Button> |
| 982 | </div> |
| 983 | ) } |
| 984 | </div> |
| 985 | ) } |
| 986 | </> |
| 987 | ) } |
| 988 | </Modal> |
| 989 | ); |
| 990 | }; |
| 991 | |
| 992 | export default compose( |
| 993 | withSelect( ( select ) => { |
| 994 | const { getCurrentEditor, getCurrentSite, getThemeAction } = select( |
| 995 | 'neve-onboarding' |
| 996 | ); |
| 997 | return { |
| 998 | editor: getCurrentEditor(), |
| 999 | siteData: getCurrentSite(), |
| 1000 | themeData: getThemeAction() || false, |
| 1001 | }; |
| 1002 | } ), |
| 1003 | withDispatch( ( dispatch, { siteData } ) => { |
| 1004 | const { |
| 1005 | setTemplateModal, |
| 1006 | setSingleTemplateImport, |
| 1007 | setImportModalStatus, |
| 1008 | setThemeAction, |
| 1009 | } = dispatch( 'neve-onboarding' ); |
| 1010 | |
| 1011 | const runTemplateImport = () => { |
| 1012 | setSingleTemplateImport( siteData.slug ); |
| 1013 | setTemplateModal( true ); |
| 1014 | setImportModalStatus( false ); |
| 1015 | }; |
| 1016 | |
| 1017 | return { |
| 1018 | setModal: ( status ) => setImportModalStatus( status ), |
| 1019 | setThemeAction: ( status ) => setThemeAction( status ), |
| 1020 | runTemplateImport, |
| 1021 | }; |
| 1022 | } ) |
| 1023 | )( ImportModal ); |
| 1024 |