diff --git a/css/settings.css b/css/settings.css index 58b9fe33..36fa5aa8 100644 --- a/css/settings.css +++ b/css/settings.css @@ -111,6 +111,10 @@ vertical-align: super; } +.fz-pro-disabled-item { + opacity: 0.6; +} + .post-type-feedzy_imports:not(.edit-post) .wrap div#side-sortables{ display: none; } @@ -1866,10 +1870,12 @@ span.error-message .components-external-link .components-visually-hidden{ border-radius: 8px; } .popover-action-list ul{ + display: flex; + flex-direction: column; + gap: 14px; margin: 0; } .popover-action-list ul li{ - padding-bottom: 13px; margin-bottom: 0; font-size: 16px; font-weight: 400; @@ -2612,3 +2618,15 @@ li.draggable-item .components-panel__body-toggle.components-button{ color: #ffffff; background: linear-gradient(135deg, #4268CF 0%, #3458BC 100%); } + + +button.feedzy-action-button { + padding: 0; + font-size: 16px; + font-weight: 400; + background: none; + border: none; + width: 100%; + cursor: pointer; + height: unset; +} \ No newline at end of file diff --git a/js/ActionPopup/index.js b/js/ActionPopup/index.js index 8a09988d..d419bd1f 100644 --- a/js/ActionPopup/index.js +++ b/js/ActionPopup/index.js @@ -5,93 +5,94 @@ import Actions from './Actions.js'; import { __ } from '@wordpress/i18n'; -import { - Button, - Modal, - ExternalLink, - Popover -} from '@wordpress/components'; +import { Button, Modal, ExternalLink, Popover } from '@wordpress/components'; import { Fragment, useEffect, useRef, useState, - useCallback + useCallback, } from '@wordpress/element'; -import { - Icon, - dragHandle, - close, - plus, - trash -} from '@wordpress/icons'; +import { Icon, dragHandle, close, plus, trash } from '@wordpress/icons'; const ActionModal = () => { // useRef const userRef = useRef(null); // State - const [ isOpen, setOpen ] = useState(false); - const [ isHideMsg, setHideMeg ] = useState(false); - const [ isVisible, setIsVisible ] = useState( false ); - const [ action, setAction ] = useState([]); - const [ shortCode, setShortCode ] = useState(''); - const [ fieldName, setFieldName ] = useState(''); - const [ editModeTag, setEditModeTag ] = useState(null); - const [ isDisabledAddNew, setDisabledAddNew ] = useState(false); - const [ isLoading, setLoading ] = useState(false); - const [ currentCustomRow, setcurrentCustomRow ] = useState(null); + const [isOpen, setOpen] = useState(false); + const [isHideMsg, setHideMeg] = useState(false); + const [isVisible, setIsVisible] = useState(false); + const [action, setAction] = useState([]); + const [shortCode, setShortCode] = useState(''); + const [fieldName, setFieldName] = useState(''); + const [editModeTag, setEditModeTag] = useState(null); + const [isDisabledAddNew, setDisabledAddNew] = useState(false); + const [isLoading, setLoading] = useState(false); + const [currentCustomRow, setcurrentCustomRow] = useState(null); // Close the popup when click on outside the modal. - const exitModalOnOutsideClick = useCallback(( e ) => { - if ( ! isVisible || ! e.target.closest( '.fz-action-popup' ) ) { - return; - } - toggleVisible( false ); - }, [isVisible]); + const exitModalOnOutsideClick = useCallback( + (e) => { + if (!isVisible || !e.target.closest('.fz-action-popup')) { + return; + } + toggleVisible(false); + }, + [isVisible] + ); - useEffect( () => { - window.wp.api.loadPromise.then( () => { + useEffect(() => { + window.wp.api.loadPromise.then(() => { // Fetch user. - userRef.current = new window.wp.api.models.User( { id: 'me' } ); + userRef.current = new window.wp.api.models.User({ id: 'me' }); userRef.current.fetch(); }); }, []); useEffect(() => { - document.addEventListener( 'click', exitModalOnOutsideClick ); + document.addEventListener('click', exitModalOnOutsideClick); return () => { - document.removeEventListener( 'click', exitModalOnOutsideClick ); + document.removeEventListener('click', exitModalOnOutsideClick); }; - }, [isVisible, exitModalOnOutsideClick] ); + }, [isVisible, exitModalOnOutsideClick]); const handleChange = (args) => { - let id = args.index; + const id = args.index; delete args.index; - let prevState = action[id].data || {}; - let updatedState = {...prevState, ...args}; - action[id]['data'] = updatedState; - setAction( () => ([...action.filter((e)=>{return e})])); - + const prevState = action[id].data || {}; + const updatedState = { ...prevState, ...args }; + action[id].data = updatedState; + setAction(() => [ + ...action.filter((e) => { + return e; + }), + ]); }; const demoPromptText = (args) => { - let id = args.index; - let type = args.type; + const id = args.index; + const type = args.type; delete args.index; delete args.type; - let prevState = action[id].data || {}; - let updatedState = {...prevState, ...args}; - if ( 'summarize' === type ) { - updatedState['ChatGPT'] = 'Summarize this article {content} for better SEO.'; - } else if ( 'paraphase' === type ) { - updatedState['ChatGPT'] = 'Rephrase my {content} for better SEO.'; - } else if ( 'change_tone' === type ) { - updatedState['ChatGPT'] = 'Change tone of my {content} for a more friendly approach.'; + const prevState = action[id].data || {}; + const updatedState = { ...prevState, ...args }; + if ('summarize' === type) { + updatedState.ChatGPT = + 'Summarize this article {content} for better SEO.'; + } else if ('paraphase' === type) { + updatedState.ChatGPT = 'Rephrase my {content} for better SEO.'; + } else if ('change_tone' === type) { + updatedState.ChatGPT = + 'Change tone of my {content} for a more friendly approach.'; } - action[id]['data'] = updatedState; - setAction( () => ([...action.filter((e)=>{return e})])); + action[id].data = updatedState; + setAction(() => [ + ...action.filter((e) => { + return e; + }), + ]); }; const openModal = () => { @@ -99,8 +100,8 @@ const ActionModal = () => { setOpen(true); }; const toggleVisible = (status) => { - if ( status ) { - setIsVisible( (state) => !state ); + if (status) { + setIsVisible((state) => !state); } else { setIsVisible(status); } @@ -114,68 +115,82 @@ const ActionModal = () => { setLoading(false); setcurrentCustomRow(null); }; - const hideIntroMessage = ( status ) => setHideMeg( status ); - const removeAction = ( index ) => { + const hideIntroMessage = (status) => setHideMeg(status); + const removeAction = (index) => { delete action[index]; - setAction( () => ([...action.filter((e)=>{return e})])); + setAction(() => [ + ...action.filter((e) => { + return e; + }), + ]); setDisabledAddNew(false); }; - const addAction = ( actionId ) => { - let actionData = { + const addAction = (actionId) => { + const actionData = { id: actionId, tag: shortCode, - data: { - - } + data: {}, }; - if ( ['fz_translate', 'fz_paraphrase', 'fz_summarize', 'wordAI', 'spinnerchief'].indexOf( actionId ) > -1 ) { + if ( + [ + 'fz_translate', + 'fz_paraphrase', + 'fz_summarize', + 'wordAI', + 'spinnerchief', + ].indexOf(actionId) > -1 + ) { actionData.data[actionId] = true; } - if ( ['fz_translate'].indexOf( actionId ) > -1 ) { - const langInput = document.getElementById('feedzy_auto_translate_lang'); - actionData.data['lang'] = langInput ? langInput.value : 'eng_Latn'; + if (['fz_translate'].indexOf(actionId) > -1) { + const langInput = document.getElementById( + 'feedzy_auto_translate_lang' + ); + actionData.data.lang = langInput ? langInput.value : 'eng_Latn'; } - if ( ['fz_image'].indexOf( actionId ) > -1 ) { - actionData.data['generateOnlyMissingImages'] = true; + if (['fz_image'].indexOf(actionId) > -1) { + actionData.data.generateOnlyMissingImages = true; } - let newAction = [actionData]; - setDisabledAddNew(() => 'item_image' === shortCode ); - setAction(prevState => ([...prevState, ...newAction])); + const newAction = [actionData]; + setDisabledAddNew(() => 'item_image' === shortCode); + setAction((prevState) => [...prevState, ...newAction]); toggleVisible(false); }; const onSortEnd = ({ oldIndex, newIndex }) => { - setAction(prevItem => (arrayMoveImmutable(prevItem, oldIndex, newIndex))); + setAction((prevItem) => + arrayMoveImmutable(prevItem, oldIndex, newIndex) + ); }; /** * Hide action popup. */ const hideActionIntroMessage = () => { - if ( isOpen ) { + if (isOpen) { hideIntroMessage(false); } const model = new window.wp.api.models.User({ // eslint-disable-next-line camelcase id: 'me', meta: { - feedzy_hide_action_message: true - } + feedzy_hide_action_message: true, + }, }); const save = model.save(); - save.success( () => { + save.success(() => { userRef.current.fetch(); }); - save.error( ( response ) => { - console.warn( response.responseJSON.message ); + save.error((response) => { + console.warn(response.responseJSON.message); }); }; @@ -183,84 +198,101 @@ const ActionModal = () => { * Save actions. */ const saveAction = () => { - if ( 'function' !== typeof jQuery ) { + if ('function' !== typeof jQuery) { return; } - action?.forEach( ( item, index ) => { - window?.tiTrk?.with('feedzy').add( { feature: 'import_action', featureValue: item?.id, groupId: item?.tag ?? '' } ); + action?.forEach((item, index) => { + window?.tiTrk?.with('feedzy').add({ + feature: 'import_action', + featureValue: item?.id, + groupId: item?.tag ?? '', + }); }); // Serialize the action. - let _action = encodeURIComponent( JSON.stringify( action ) ); - if ( action.length === 0 ) { + let _action = encodeURIComponent(JSON.stringify(action)); + if (action.length === 0) { setAction([]); - _action = encodeURIComponent( JSON.stringify( [ { id: '', tag: shortCode, data: {} } ] ) ); + _action = encodeURIComponent( + JSON.stringify([{ id: '', tag: shortCode, data: {} }]) + ); } - if ( 'import_custom_field' === fieldName ) { - if ( currentCustomRow ) { + if ('import_custom_field' === fieldName) { + if (currentCustomRow) { currentCustomRow.value = _action; } closeModal(); return; } - const inputField = jQuery( `[name="feedzy_meta_data[${fieldName}]"]:is(textarea, input)` ).data('tagify'); + const inputField = jQuery( + `[name="feedzy_meta_data[${fieldName}]"]:is(textarea, input)` + ).data('tagify'); - if ( 'import_post_featured_img' === fieldName ) { + if ('import_post_featured_img' === fieldName) { inputField.removeAllTags(); inputField.addEmptyTag(); inputField.clearPersistedData(); } - if ( null === editModeTag || 'import_post_featured_img' === fieldName ) { - let tagElm = inputField.createTagElem({value: _action}) - inputField.injectAtCaret(tagElm) - let elm = inputField.insertAfterTag(tagElm) - inputField.placeCaretAfterNode(elm) + if (null === editModeTag || 'import_post_featured_img' === fieldName) { + const tagElm = inputField.createTagElem({ value: _action }); + inputField.injectAtCaret(tagElm); + const elm = inputField.insertAfterTag(tagElm); + inputField.placeCaretAfterNode(elm); } else { - inputField.replaceTag(editModeTag.closest( '.fz-content-action' ), {value: _action}); + inputField.replaceTag(editModeTag.closest('.fz-content-action'), { + value: _action, + }); } closeModal(); }; const helperContainer = () => { - return document.querySelector( '.fz-action-popup .fz-action-panel ul' ); + return document.querySelector('.fz-action-popup .fz-action-panel ul'); }; // Click to open action popup. - document.querySelectorAll( '[data-action_popup]' ).forEach( actionItem => { - actionItem.addEventListener( 'click', ( event ) => { + document.querySelectorAll('[data-action_popup]').forEach((actionItem) => { + actionItem.addEventListener('click', (event) => { event.preventDefault(); - if ( userRef.current ) { - if ( ! userRef.current.attributes.meta.feedzy_hide_action_message ) { + if (userRef.current) { + if ( + !userRef.current.attributes.meta.feedzy_hide_action_message + ) { hideActionIntroMessage(); } else { hideIntroMessage(true); } } - let tag = event.target.getAttribute( 'data-action_popup' ) || ''; - let dataFieldName = event.target.getAttribute( 'data-field-name' ) || ''; - if ( '' === tag ) { + const tag = event.target.getAttribute('data-action_popup') || ''; + const dataFieldName = + event.target.getAttribute('data-field-name') || ''; + if ('' === tag) { event.target.closest('.dropdown-item').click(); return; } - setShortCode( tag ); - setFieldName( dataFieldName ); + setShortCode(tag); + setFieldName(dataFieldName); openModal(); - } ); - } ); + }); + }); // Init custom field actions. const initCustomFieldActions = () => { - const customFieldElement = document.querySelectorAll( '.custom_fields .fz-action-icon' ) || []; - if ( customFieldElement.length === 0 ) { + const customFieldElement = + document.querySelectorAll('.custom_fields .fz-action-icon') || []; + if (customFieldElement.length === 0) { return; } - customFieldElement.forEach( actionButton => { - actionButton.addEventListener( 'click', ( event ) => { + customFieldElement.forEach((actionButton) => { + actionButton.addEventListener('click', (event) => { event.preventDefault(); - if ( userRef.current ) { - if ( ! userRef.current.attributes.meta.feedzy_hide_action_message ) { + if (userRef.current) { + if ( + !userRef.current.attributes.meta + .feedzy_hide_action_message + ) { hideActionIntroMessage(); } else { hideIntroMessage(true); @@ -268,183 +300,506 @@ const ActionModal = () => { } let editAction = event?.target?.nextElementSibling?.value || ''; - if ( editAction ) { - editAction = JSON.parse( decodeURIComponent( editAction ) ); - setAction( () => ([...editAction.filter((e)=>{return e.id !== ''})])); + if (editAction) { + editAction = JSON.parse(decodeURIComponent(editAction)); + setAction(() => [ + ...editAction.filter((e) => { + return e.id !== ''; + }), + ]); } - setShortCode( 'custom_field' ); - setFieldName( 'import_custom_field' ); - setcurrentCustomRow( event?.target?.nextElementSibling ); + setShortCode('custom_field'); + setFieldName('import_custom_field'); + setcurrentCustomRow(event?.target?.nextElementSibling); openModal(); - } ); - } ); + }); + }); }; // Attach click event to the newly added custom field row. - document.addEventListener( 'feedzy_new_row_added', initCustomFieldActions ); + document.addEventListener('feedzy_new_row_added', initCustomFieldActions); const initEditHooks = () => { - if ( isLoading ) { + if (isLoading) { return; } // Click to open edit action popup. - setTimeout( function() { - const editActionElement = document.querySelectorAll( '.fz-content-action .tagify__filter-icon' ) || []; - if ( editActionElement.length === 0 ) { + setTimeout(function () { + const editActionElement = + document.querySelectorAll( + '.fz-content-action .tagify__filter-icon' + ) || []; + if (editActionElement.length === 0) { initCustomFieldActions(); initEditHooks(); return; } - if ( editActionElement.length > 0 ) { - editActionElement.forEach( editItem => { - editItem.addEventListener( 'click', ( event ) => { - if ( event.target.parentNode ) { - let editAction = event.target.getAttribute( 'data-actions' ) || ''; - let fieldId = event.target.getAttribute( 'data-field_id' ) || ''; - editAction = JSON.parse( decodeURIComponent( editAction ) ); - setAction(() => ( + if (editActionElement.length > 0) { + editActionElement.forEach((editItem) => { + editItem.addEventListener('click', (event) => { + if (event.target.parentNode) { + let editAction = + event.target.getAttribute('data-actions') || ''; + const fieldId = + event.target.getAttribute('data-field_id') || + ''; + editAction = JSON.parse( + decodeURIComponent(editAction) + ); + setAction(() => editAction - .filter((e) => e.id !== '') - .map((e) => { - // Replace 'fz_summarize' with 'chat_gpt_rewrite' for backward compatible. - if (e.id === 'fz_summarize') { - return { - ...e, - id: 'chat_gpt_rewrite', - data: { ChatGPT: "Summarize this article {content} for better SEO." } - }; - } - return e; - }) - )); - let magicTag = editAction[0] || {}; - let tag = magicTag.tag; + .filter((e) => e.id !== '') + .map((e) => { + // Replace 'fz_summarize' with 'chat_gpt_rewrite' for backward compatible. + if (e.id === 'fz_summarize') { + return { + ...e, + id: 'chat_gpt_rewrite', + data: { + ChatGPT: + 'Summarize this article {content} for better SEO.', + }, + }; + } + return e; + }) + ); + const magicTag = editAction[0] || {}; + const tag = magicTag.tag; setEditModeTag(event.target.parentNode); - setDisabledAddNew(() => Object.keys(magicTag.data).length && 'item_image' === tag ); - let actionGroup = document.querySelector( '.' + fieldId ); - actionGroup.querySelector( '[data-action_popup="' + tag + '"]' ).click(); + setDisabledAddNew( + () => + Object.keys(magicTag.data).length && + 'item_image' === tag + ); + const actionGroup = document.querySelector( + '.' + fieldId + ); + actionGroup + .querySelector( + '[data-action_popup="' + tag + '"]' + ) + .click(); } - } ); - } ); + }); + }); } initCustomFieldActions(); - }, 500 ); + }, 500); }; initEditHooks(); return ( - { isOpen && ( - -
-
-
-

{ __('Add actions to this tag', 'feedzy-rss-feeds') }

{ ! isHideMsg && ( { __( 'New!', 'feedzy-rss-feeds' ) } ) } -
- -
-
- { ! isHideMsg && ( -
-

{ __( 'Feedzy now supports adding and chaining actions into a single tag. Add an action by clicking the Add new button below. You can add multiple actions in each tag.', 'feedzy-rss-feeds' ) }
- { __( 'Learn more about this feature.', 'feedzy-rss-feeds' ) }

-
- ) } - - { action.length === 0 && ( -
-

{ __( 'If no action is needed, continue with using the original tag by clicking on the Save Actions button.', 'feedzy-rss-feeds' ) }

+ {isOpen && ( + +
+
+
+

+ {__( + 'Add actions to this tag', + 'feedzy-rss-feeds' + )} +

{' '} + {!isHideMsg && ( + + {__('New!', 'feedzy-rss-feeds')} + + )}
- ) } - - {action.length > 0 && ( )} - -
-
- - { isVisible && ( -
-
    - { - 'item_image' === shortCode ? ([ - feedzyData.isPro && ( feedzyData.isBusinessPlan || feedzyData.isAgencyPlan ) ? ( -
  • addAction('fz_image') }>{__( 'Generate with OpenAI', 'feedzy-rss-feeds' )}
    • - ) : ( -
  • addAction('fz_image') }>{__( 'Generate with OpenAI', 'feedzy-rss-feeds' )} PRO
    • - )] - ) : ([ -
  • addAction('trim') }>{__( 'Trim Content', 'feedzy-rss-feeds' )}
    • , - ( - feedzyData.isPro && feedzyData.isAgencyPlan ? ( -
  • addAction('fz_translate') }>{__( 'Translate with Feedzy', 'feedzy-rss-feeds' )}
    • - ) : ( -
  • addAction('fz_translate') }>{__( 'Translate with Feedzy', 'feedzy-rss-feeds' )} PRO
    • - ) - ), -
  • addAction('search_replace') }>{__( 'Search / Replace', 'feedzy-rss-feeds' )}
    • , - ( - 'item_categories' !== shortCode && ( - feedzyData.isPro ? ( -
  • addAction('modify_links') }>{__( 'Modify Links', 'feedzy-rss-feeds' )}
    • - ) : ( -
  • addAction('modify_links') }>{__( 'Modify Links', 'feedzy-rss-feeds' )} PRO
    • - ) - ) - ), - ( - 'item_categories' !== shortCode && ( - feedzyData.isPro && ( feedzyData.isBusinessPlan || feedzyData.isAgencyPlan ) ? ( -
  • addAction('fz_paraphrase') }>{__( 'Paraphrase with Feedzy', 'feedzy-rss-feeds' )}
    • - ) : ( -
  • addAction('fz_paraphrase') }>{__( 'Paraphrase with Feedzy', 'feedzy-rss-feeds' )} PRO
    • - ) - ) - ), - ( - 'item_categories' !== shortCode && ( - feedzyData.isPro && feedzyData.isAgencyPlan ? ( -
  • addAction('spinnerchief') }>{__( 'Spin using SpinnerChief', 'feedzy-rss-feeds' )}
    • - ) : ( -
  • addAction('spinnerchief') }>{__( 'Spin using SpinnerChief', 'feedzy-rss-feeds' )} PRO
    • - ) - ) - ), - ( - 'item_categories' !== shortCode && ( - feedzyData.isPro && feedzyData.isAgencyPlan ? ( -
  • addAction('wordAI') }>{__( 'Spin using WordAI', 'feedzy-rss-feeds' )}
    • + +
+
+ {!isHideMsg && ( +
+

+ {__( + 'Feedzy now supports adding and chaining actions into a single tag. Add an action by clicking the Add new button below. You can add multiple actions in each tag.', + 'feedzy-rss-feeds' + )} +
+ + {__( + 'Learn more about this feature.', + 'feedzy-rss-feeds' + )} + +

+
+ )} + + {action.length === 0 && ( +
+

+ {__( + 'If no action is needed, continue with using the original tag by clicking on the Save Actions button.', + 'feedzy-rss-feeds' + )} +

+
+ )} + + {action.length > 0 && ( + + )} + +
+
+ + {isVisible && ( +
+
    + {'item_image' === shortCode + ? [ + window.feedzyData + .isPro && + (window.feedzyData + .isBusinessPlan || + window + .feedzyData + .isAgencyPlan) ? ( +
  • + +
    • ) : ( -
  • addAction('wordAI') }>{__( 'Spin using WordAI', 'feedzy-rss-feeds' )} PRO
    • - ) - ) - ), - ( - 'item_categories' !== shortCode && ( - feedzyData.isPro && ( feedzyData.isBusinessPlan || feedzyData.isAgencyPlan ) ? ( -
  • addAction('chat_gpt_rewrite') }>{__( 'Rewrite with AI', 'feedzy-rss-feeds' )}
    • +
  • + {__( + 'Generate with OpenAI', + 'feedzy-rss-feeds' + )} + + PRO + +
    • + ), + ] + : [ +
  • + +
    • , + window.feedzyData + .isPro && + window.feedzyData + .isAgencyPlan ? ( +
  • + +
    • ) : ( -
  • addAction('chat_gpt_rewrite') }>{__( 'Rewrite with AI', 'feedzy-rss-feeds' )} PRO
    • - ) - ) - ) - ]) - } -
  • { __( 'Learn more about this feature.', 'feedzy-rss-feeds' ) }
    • -
-
+
  • + {__( + 'Translate with Feedzy', + 'feedzy-rss-feeds' + )} + + PRO + +
    • + ), +
  • + +
    • , + 'item_categories' !== + shortCode && + (window + .feedzyData + .isPro ? ( +
  • + +
    • + ) : ( +
  • + {__( + 'Modify Links', + 'feedzy-rss-feeds' + )} + + PRO + +
    • + )), + 'item_categories' !== + shortCode && + (window + .feedzyData + .isPro && + (window + .feedzyData + .isBusinessPlan || + window + .feedzyData + .isAgencyPlan) ? ( +
  • + +
    • + ) : ( +
  • + {__( + 'Paraphrase with Feedzy', + 'feedzy-rss-feeds' + )} + + PRO + +
    • + )), + 'item_categories' !== + shortCode && + (window + .feedzyData + .isPro && + window + .feedzyData + .isAgencyPlan ? ( +
  • + +
    • + ) : ( +
  • + {__( + 'Spin using SpinnerChief', + 'feedzy-rss-feeds' + )} + + PRO + +
    • + )), + 'item_categories' !== + shortCode && + (window + .feedzyData + .isPro && + window + .feedzyData + .isAgencyPlan ? ( +
  • + +
    • + ) : ( +
  • + {__( + 'Spin using WordAI', + 'feedzy-rss-feeds' + )} + + PRO + +
    • + )), + 'item_categories' !== + shortCode && + (window + .feedzyData + .isPro && + (window + .feedzyData + .isBusinessPlan || + window + .feedzyData + .isAgencyPlan) ? ( +
  • + +
    • + ) : ( +
  • + {__( + 'Rewrite with AI', + 'feedzy-rss-feeds' + )} + + PRO + +
    • + )), + ]} +
  • + + {__( + 'Learn more about this feature.', + 'feedzy-rss-feeds' + )} + +
    • + +
    + )} +
    + {action && ( + )}
    - { action && ( ) }
    -
    - - ) } + + )} - ); - }; + ); +}; -ReactDOM.render( - , - document.querySelector('#fz-action-popup') -); +ReactDOM.render(, document.querySelector('#fz-action-popup'));