From c1783664b6ea4bbd0a549166a3907dcadb49cb44 Mon Sep 17 00:00:00 2001 From: Hardeep Asrani Date: Tue, 24 Sep 2024 17:50:46 +0530 Subject: [PATCH] feat: add Hyve Promo (#385) feat: add Hyve Promo --- assets/src/Components/ImportModal.js | 216 +++++++++++++----- assets/src/Components/ImportStepper.js | 8 + .../CustomizeControls/ImportOptionsControl.js | 39 ++++ onboarding/src/Components/ImportProgress.js | 1 + onboarding/src/Components/Onboarding.js | 1 + onboarding/src/Components/Steps/Import.js | 38 ++- 6 files changed, 246 insertions(+), 57 deletions(-) diff --git a/assets/src/Components/ImportModal.js b/assets/src/Components/ImportModal.js index 0914b8b0..aec2929d 100644 --- a/assets/src/Components/ImportModal.js +++ b/assets/src/Components/ImportModal.js @@ -53,6 +53,7 @@ const ImportModal = ( { widgets: true, cleanup: false, performanceAddon: true, + hyveLite: true, theme_install: themeData !== false, } ); const site = tiobDash.onboarding.homeUrl || ''; @@ -61,6 +62,7 @@ const ImportModal = ( { const [ performanceAddonProgress, setPerformanceAddonProgress ] = useState( false ); + const [ hyveLiteProgress, setHyveLiteProgress ] = useState( false ); const [ cleanupProgress, setCleanupProgress ] = useState( false ); const [ pluginsProgress, setPluginsProgress ] = useState( false ); const [ contentProgress, setContentProgress ] = useState( false ); @@ -81,7 +83,9 @@ const ImportModal = ( { cleanupAllowed ); const [ email, setEmail ] = useState( tiobDash.emailSubscribe.email || '' ); - const [ skipSubscribe, setSkipSubscribe ] = useState( 'yes' === tiobDash?.emailSubscribe?.skipStatus ); + const [ skipSubscribe, setSkipSubscribe ] = useState( + 'yes' === tiobDash?.emailSubscribe?.skipStatus + ); const [ processingSub, setProcessingSub ] = useState( false ); useEffect( () => { @@ -260,6 +264,44 @@ const ImportModal = ( { } ), }, + hyveLite: { + title: __( 'AI Chatbot', 'templates-patterns-collection' ), + icon: 'admin-comments', + tooltip: createInterpolateElement( + sprintf( + // translators: %s is Hyve plugin name. + __( + 'Hyve is an AI-powered chatbot that transforms your WordPress content into engaging conversations. %sHyve%s', + 'templates-patterns-collection' + ), + '', + '' + ), + { + a: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ), + icon: ( + + ), + span:
, + } + ), + }, }; if ( isCleanupAllowed === 'yes' ) { @@ -305,7 +347,11 @@ const ImportModal = ( { { title } { tooltip && ( { tooltip } @@ -343,15 +389,19 @@ const ImportModal = ( { return null; } - const [ pluginsOpened, setPluginsOpened ] = useState( Object.keys( allPlugins ).length < 3 ); + const [ pluginsOpened, setPluginsOpened ] = useState( + Object.keys( allPlugins ).length < 3 + ); const toggleOpen = () => { setPluginsOpened( ! pluginsOpened ); }; - const pluginsList = Object.keys( allPlugins ).map( ( slug, index ) => { - return allPlugins[ slug ]; - } ).join( ', ' ); + const pluginsList = Object.keys( allPlugins ) + .map( ( slug, index ) => { + return allPlugins[ slug ]; + } ) + .join( ', ' ); return ( <> @@ -392,18 +442,21 @@ const ImportModal = ( { ); } ) } - { ! pluginsOpened && ( - - - - { __( 'Additional plugins are required for this Starter Site in order to work properly. ', 'templates-patterns-collection' ) } - ) } + { ! pluginsOpened && ( + + + + + { __( + 'Additional plugins are required for this Starter Site in order to work properly. ', + 'templates-patterns-collection' + ) } + + ) } ); }; @@ -495,7 +548,11 @@ const ImportModal = ( { function runImportPlugins() { // console.clear(); - if ( ! pluginOptions && ! general.performanceAddon ) { + if ( + ! pluginOptions && + ! general.performanceAddon && + ! general.hyveLite + ) { console.log( '[S] Plugins.' ); runImportContent(); return false; @@ -602,7 +659,7 @@ const ImportModal = ( { function runPerformanceAddonInstall() { if ( ! general.performanceAddon ) { console.log( '[S] Performance Addon.' ); - importDone(); + runHyveLiteInstall(); return false; } setCurrentStep( 'performanceAddon' ); @@ -616,13 +673,37 @@ const ImportModal = ( { } console.log( '[D] Performance Addon.' ); setPerformanceAddonProgress( 'done' ); - importDone(); + runHyveLiteInstall(); } ) .catch( ( incomingError ) => handleError( incomingError, 'performanceAddon' ) ); } + function runHyveLiteInstall() { + if ( ! general.hyveLite ) { + console.log( '[S] Hyve Lite.' ); + importDone(); + return false; + } + setCurrentStep( 'hyveLite' ); + console.log( '[P] Hyve Lite.' ); + + installPlugins( { 'hyve-lite': true } ) + .then( ( response ) => { + if ( ! response.success ) { + handleError( response, 'hyveLite' ); + return false; + } + console.log( '[D] Hyve Lite.' ); + setHyveLiteProgress( 'done' ); + importDone(); + } ) + .catch( ( incomingError ) => + handleError( incomingError, 'hyveLite' ) + ); + } + function importDone() { setCurrentStep( 'done' ); setIsCleanupAllowed( 'yes' ); @@ -671,6 +752,10 @@ const ImportModal = ( { 'Something went wrong while installing the performance addon.', 'templates-patterns-collection' ), + hyveLite: __( + 'Something went wrong while installing the Hyve Lite plugin.', + 'templates-patterns-collection' + ), }; switch ( step ) { @@ -692,6 +777,9 @@ const ImportModal = ( { case 'performanceAddon': setPerformanceAddonProgress( 'error' ); break; + case 'hyveLite': + setHyveLiteProgress( 'error' ); + break; } setError( incomingError.data @@ -735,10 +823,7 @@ const ImportModal = ( { 'templates-patterns-collection' ); if ( skipSubscribe ) { - viewWebsiteText = __( - 'View Website', - 'templates-patterns-collection' - ); + viewWebsiteText = __( 'View Website', 'templates-patterns-collection' ); skipText = __( 'Add your own content', 'templates-patterns-collection' @@ -746,13 +831,17 @@ const ImportModal = ( { } const markSubscribeSkip = ( redirect, data = {} ) => { - ajaxAction( tiobDash.emailSubscribe.ajaxURL, 'skip_subscribe', tiobDash.emailSubscribe.nonce, data ) - .then(() => { - setSkipSubscribe(true); - setProcessingSub( false ); - window.location.href = redirect; - }); - } + ajaxAction( + tiobDash.emailSubscribe.ajaxURL, + 'skip_subscribe', + tiobDash.emailSubscribe.nonce, + data + ).then( () => { + setSkipSubscribe( true ); + setProcessingSub( false ); + window.location.href = redirect; + } ); + }; const goToEditContent = () => { if ( skipSubscribe ) { @@ -779,34 +868,36 @@ const ImportModal = ( { fetch( 'https://api.themeisle.com/tracking/subscribe', { method: 'POST', headers: { - 'Content-Type': 'application/json' + 'Content-Type': 'application/json', }, - body: JSON.stringify({ + body: JSON.stringify( { slug: 'templates-patterns-collection', site, - email - }) - }) - .then( r => r.json() ) + email, + } ), + } ) + .then( ( r ) => r.json() ) .then( ( response ) => { if ( 'success' === response.code ) { - markSubscribeSkip( site ) + markSubscribeSkip( site ); } - })?.catch( ( error ) => { + } ) + ?.catch( ( error ) => { console.error( error ); - markSubscribeSkip( site, { isTempSkip: true } ) - }); - } + markSubscribeSkip( site, { isTempSkip: true } ); + } ); + }; - let modalTitle = importData ? - sprintf( + let modalTitle = importData + ? sprintf( /* translators: name of starter site */ __( 'Import %s as a complete site', 'templates-patterns-collection' ), importData.title - ) : ''; + ) + : ''; if ( 'done' === currentStep && ! error ) { modalTitle = __( 'Content was successfully imported', @@ -832,12 +923,14 @@ const ImportModal = ( { siteData.doc_url && ( - ) - } + ) } { ! importing && 'done' !== currentStep && ! error ? ( <> @@ -869,6 +962,7 @@ const ImportModal = ( { customizer: customizerProgress, widgets: widgetsProgress, performanceAddon: performanceAddonProgress, + hyveLite: hyveLiteProgress, } } currentStep={ currentStep } willDo={ general } @@ -876,11 +970,18 @@ const ImportModal = ( { ) } { 'done' === currentStep && ! skipSubscribe && ( <> -

{ __( 'Stay up-to-date on news, tips and product updates', 'templates-patterns-collection' ) }

+

+ { __( + 'Stay up-to-date on news, tips and product updates', + 'templates-patterns-collection' + ) } +

) } { 'done' === currentStep && skipSubscribe && ( - + ) } ) } @@ -932,7 +1038,9 @@ const ImportModal = ( {