File "site-logo.js"
Full Path: /home/warrior1/public_html/languages/wp-content-20241001222009/plugins/elementor/app/modules/onboarding/assets/js/pages/site-logo.js
File size: 9.3 KB
MIME-type: text/x-java
Charset: utf-8
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import { useContext, useEffect, useState, useCallback } from 'react';
import { OnboardingContext } from '../context/context';
import { useNavigate } from '@reach/router';
import useAjax from 'elementor-app/hooks/use-ajax';
import DropZone from 'elementor-app/organisms/drop-zone';
import UnfilteredFilesDialog from 'elementor-app/organisms/unfiltered-files-dialog';
import Layout from '../components/layout/layout';
import PageContentLayout from '../components/layout/page-content-layout';
export default function SiteLogo() {
const { state, updateState, getStateObjectToUpdate } = useContext( OnboardingContext ),
[ file, setFile ] = useState( state.siteLogo.id ? state.siteLogo : null ),
[ isUploading, setIsUploading ] = useState( false ),
[ showUnfilteredFilesDialog, setShowUnfilteredFilesDialog ] = useState( false ),
[ fileSource, setFileSource ] = useState(),
[ noticeState, setNoticeState ] = useState( null ),
{ ajaxState: updateLogoAjaxState, setAjax: setUpdateLogoAjax } = useAjax(),
{ ajaxState: uploadImageAjaxState, setAjax: setUploadImageAjax } = useAjax(),
pageId = 'siteLogo',
nextStep = 'goodToGo',
navigate = useNavigate(),
actionButton = {
role: 'button',
onClick: () => {
elementorCommon.events.dispatchEvent( {
event: 'next',
version: '',
details: {
placement: elementorAppConfig.onboarding.eventPlacement,
step: state.currentStep,
},
} );
if ( file.id ) {
if ( file.id !== state.siteLogo.id ) {
updateSiteLogo();
} else {
// If the currently displayed logo is already set as the site logo, just go to the next screen.
const stateToUpdate = getStateObjectToUpdate( state, 'steps', pageId, 'completed' );
updateState( stateToUpdate );
navigate( 'onboarding/' + nextStep );
}
}
},
};
let skipButton;
if ( 'completed' !== state.steps[ pageId ] ) {
skipButton = {
text: __( 'Skip', 'elementor' ),
};
}
if ( isUploading ) {
actionButton.text = (
<>
<i className="eicon-loading eicon-animation-spin" aria-hidden="true" />
</>
);
} else {
actionButton.text = __( 'Next', 'elementor' );
}
if ( ! file ) {
actionButton.className = 'e-onboarding__button--disabled';
}
const updateSiteLogo = useCallback( () => {
setIsUploading( true );
setUpdateLogoAjax( {
data: {
action: 'elementor_update_site_logo',
data: JSON.stringify( {
attachmentId: file.id,
} ),
},
} );
}, [ file ] );
const uploadSiteLogo = ( fileToUpload ) => {
setIsUploading( true );
setUploadImageAjax( {
data: {
action: 'elementor_upload_site_logo',
fileToUpload,
},
} );
};
const dismissUnfilteredFilesCallback = () => {
setIsUploading( false );
setFile( null );
setShowUnfilteredFilesDialog( false );
};
const onFileSelect = ( selectedFile ) => {
setFileSource( 'drop' );
if ( 'image/svg+xml' === selectedFile.type && ! elementorAppConfig.onboarding.isUnfilteredFilesEnabled ) {
setFile( selectedFile );
setIsUploading( true );
setShowUnfilteredFilesDialog( true );
} else {
setFile( selectedFile );
setNoticeState( null );
uploadSiteLogo( selectedFile );
}
};
const onImageRemoveClick = () => {
elementorCommon.events.dispatchEvent( {
event: 'remove selected logo',
version: '',
details: {
placement: elementorAppConfig.onboarding.eventPlacement,
},
} );
setFile( null );
};
/**
* Ajax Callbacks
*/
// Run the callback for the new image upload AJAX request.
useEffect( () => {
if ( 'initial' !== uploadImageAjaxState.status ) {
if ( 'success' === uploadImageAjaxState.status && uploadImageAjaxState.response?.imageAttachment?.id ) {
elementorCommon.events.dispatchEvent( {
event: 'logo image uploaded',
version: '',
details: {
placement: elementorAppConfig.onboarding.eventPlacement,
source: fileSource,
},
} );
setIsUploading( false );
setFile( uploadImageAjaxState.response.imageAttachment );
if ( noticeState ) {
setNoticeState( null );
}
} else if ( 'error' === uploadImageAjaxState.status ) {
setIsUploading( false );
setFile( null );
elementorCommon.events.dispatchEvent( {
event: 'indication prompt',
version: '',
details: {
placement: elementorAppConfig.onboarding.eventPlacement,
action_state: 'failure',
action: 'logo image upload',
},
} );
setNoticeState( {
type: 'error',
icon: 'eicon-warning',
message: 'That didn\'t work. Try uploading your file again.',
} );
}
}
}, [ uploadImageAjaxState.status ] );
// Run the callback for the site logo update AJAX request.
useEffect( () => {
if ( 'initial' !== updateLogoAjaxState.status ) {
if ( 'success' === updateLogoAjaxState.status && updateLogoAjaxState.response?.siteLogoUpdated ) {
elementorCommon.events.dispatchEvent( {
event: 'logo image updated',
version: '',
details: {
placement: elementorAppConfig.onboarding.eventPlacement,
source: fileSource,
},
} );
setIsUploading( false );
if ( noticeState ) {
setNoticeState( null );
}
const stateToUpdate = getStateObjectToUpdate( state, 'steps', pageId, 'completed' );
stateToUpdate.siteLogo = {
id: file.id,
url: file.url,
};
updateState( stateToUpdate );
navigate( 'onboarding/' + nextStep );
} else if ( 'error' === updateLogoAjaxState.status ) {
setIsUploading( false );
elementorCommon.events.dispatchEvent( {
event: 'indication prompt',
version: '',
details: {
placement: elementorAppConfig.onboarding.eventPlacement,
step: state.currentStep,
action_state: 'failure',
action: 'update site logo',
},
} );
setNoticeState( {
type: 'error',
icon: 'eicon-warning',
message: 'That didn\'t work. Try uploading your file again.',
} );
}
}
}, [ updateLogoAjaxState.status ] );
return (
<Layout pageId={ pageId } nextStep={ nextStep }>
<PageContentLayout
image={ elementorCommon.config.urls.assets + 'images/app/onboarding/Illustration_Setup.svg' }
title={ __( 'Have a logo? Add it here.', 'elementor' ) }
actionButton={ actionButton }
skipButton={ skipButton }
noticeState={ noticeState }
>
<span>
{ __( 'Otherwise, you can skip this and add one later.', 'elementor' ) }
</span>
{ ( file && ! showUnfilteredFilesDialog )
? (
<div className={ 'e-onboarding__logo-container' + ( isUploading ? ' e-onboarding__is-uploading' : '' ) }>
<div className="e-onboarding__logo-remove" onClick={ () => onImageRemoveClick() }>
<i className="eicon-trash-o" />
</div>
<img src={ file.url } alt={ __( 'Potential Site Logo', 'elementor' ) } />
</div>
)
: <>
<DropZone
className="e-onboarding__drop-zone"
heading={ __( 'Drop image here', 'elementor' ) }
secondaryText={ __( 'or', 'elementor' ) }
buttonText={ __( 'Open Media Library', 'elementor' ) }
buttonVariant="outlined"
buttonColor="cta"
icon={ '' }
type="wp-media"
filetypes={ [ 'jpg', 'jpeg', 'png', 'svg' ] }
onFileSelect={ ( selectedFile ) => onFileSelect( selectedFile ) }
onWpMediaSelect={ ( frame ) => {
// Get media attachment details from the frame state
var attachment = frame.state().get( 'selection' ).first().toJSON();
setFileSource( 'browse' );
setFile( attachment );
setNoticeState( null );
} }
onButtonClick={ () => {
elementorCommon.events.dispatchEvent( {
event: 'browse file click',
version: '',
details: {
placement: elementorAppConfig.onboarding.eventPlacement,
step: state.currentStep,
},
} );
} }
// TODO: DEAL WITH ERROR
onError={ ( error ) => {
if ( 'file_not_allowed' === error.id ) {
elementorCommon.events.dispatchEvent( {
event: 'indication prompt',
version: '',
details: {
placement: elementorAppConfig.onboarding.eventPlacement,
step: state.currentStep,
action_state: 'failure',
action: 'logo upload format',
},
} );
setNoticeState( {
type: 'error',
icon: 'eicon-warning',
message: __( 'This file type is not supported. Try a different type of file', 'elementor' ),
} );
}
} }
/>
</>
}
{
<UnfilteredFilesDialog
show={ showUnfilteredFilesDialog }
setShow={ setShowUnfilteredFilesDialog }
confirmModalText={ __( 'This allows Elementor to scan your SVGs for malicious content. If you do not wish to allow this, use a different image format.', 'elementor' ) }
errorModalText={ __( 'There was a problem with enabling SVG uploads. Try again, or use another image format.', 'elementor' ) }
onReady={ () => {
setShowUnfilteredFilesDialog( false );
elementorAppConfig.onboarding.isUnfilteredFilesEnabled = true;
uploadSiteLogo( file );
} }
onDismiss={ () => dismissUnfilteredFilesCallback() }
onCancel={ () => dismissUnfilteredFilesCallback() }
/>
}
</PageContentLayout>
</Layout>
);
}