/* global wpforms_gutenberg_form_selector, JSX */

[0] Fix | Delete

/* jshint es3: false, esversion: 6 */

[1] Fix | Delete

[2] Fix | Delete

/**

[3] Fix | Delete

* @param strings.update_wp_notice_head

[4] Fix | Delete

* @param strings.update_wp_notice_text

[5] Fix | Delete

* @param strings.update_wp_notice_link

[6] Fix | Delete

* @param strings.wpforms_empty_help

[7] Fix | Delete

* @param strings.wpforms_empty_info

[8] Fix | Delete

*/

[9] Fix | Delete

[10] Fix | Delete

const { serverSideRender: ServerSideRender = wp.components.ServerSideRender } = wp;

[11] Fix | Delete

const { createElement, Fragment } = wp.element;

[12] Fix | Delete

const { registerBlockType } = wp.blocks;

[13] Fix | Delete

const { InspectorControls } = wp.blockEditor || wp.editor;

[14] Fix | Delete

const { SelectControl, ToggleControl, PanelBody, Placeholder } = wp.components;

[15] Fix | Delete

const { __ } = wp.i18n;

[16] Fix | Delete

[17] Fix | Delete

const wpformsIcon = createElement( 'svg', { width: 20, height: 20, viewBox: '0 0 612 612', className: 'dashicon' },

[18] Fix | Delete

createElement( 'path', {

[19] Fix | Delete

fill: 'currentColor',

[20] Fix | Delete

d: 'M544,0H68C30.445,0,0,30.445,0,68v476c0,37.556,30.445,68,68,68h476c37.556,0,68-30.444,68-68V68 C612,30.445,581.556,0,544,0z M464.44,68L387.6,120.02L323.34,68H464.44z M288.66,68l-64.26,52.02L147.56,68H288.66z M544,544H68 V68h22.1l136,92.14l79.9-64.6l79.56,64.6l136-92.14H544V544z M114.24,263.16h95.88v-48.28h-95.88V263.16z M114.24,360.4h95.88 v-48.62h-95.88V360.4z M242.76,360.4h255v-48.62h-255V360.4L242.76,360.4z M242.76,263.16h255v-48.28h-255V263.16L242.76,263.16z M368.22,457.3h129.54V408H368.22V457.3z',

[21] Fix | Delete

} )

[22] Fix | Delete

);

[23] Fix | Delete

[24] Fix | Delete

/**

[25] Fix | Delete

* Popup container.

[26] Fix | Delete

*

[27] Fix | Delete

* @since 1.8.3

[28] Fix | Delete

*

[29] Fix | Delete

* @type {Object}

[30] Fix | Delete

*/

[31] Fix | Delete

let $popup = {};

[32] Fix | Delete

[33] Fix | Delete

/**

[34] Fix | Delete

* Close button (inside the form builder) click event.

[35] Fix | Delete

*

[36] Fix | Delete

* @since 1.8.3

[37] Fix | Delete

*

[38] Fix | Delete

* @param {string} clientID Block Client ID.

[39] Fix | Delete

*/

[40] Fix | Delete

const builderCloseButtonEvent = function( clientID ) {

[41] Fix | Delete

$popup

[42] Fix | Delete

.off( 'wpformsBuilderInPopupClose' )

[43] Fix | Delete

.on( 'wpformsBuilderInPopupClose', function( e, action, formId, formTitle ) {

[44] Fix | Delete

if ( action !== 'saved' || ! formId ) {

[45] Fix | Delete

return;

[46] Fix | Delete

}

[47] Fix | Delete

[48] Fix | Delete

// Insert a new block when a new form is created from the popup to update the form list and attributes.

[49] Fix | Delete

const newBlock = wp.blocks.createBlock( 'wpforms/form-selector', {

[50] Fix | Delete

formId: formId.toString(), // Expects string value, make sure we insert string.

[51] Fix | Delete

} );

[52] Fix | Delete

[53] Fix | Delete

// eslint-disable-next-line camelcase

[54] Fix | Delete

wpforms_gutenberg_form_selector.forms = [ { ID: formId, post_title: formTitle } ];

[55] Fix | Delete

[56] Fix | Delete

// Insert a new block.

[57] Fix | Delete

wp.data.dispatch( 'core/block-editor' ).removeBlock( clientID );

[58] Fix | Delete

wp.data.dispatch( 'core/block-editor' ).insertBlocks( newBlock );

[59] Fix | Delete

} );

[60] Fix | Delete

};

[61] Fix | Delete

[62] Fix | Delete

/**

[63] Fix | Delete

* Open builder popup.

[64] Fix | Delete

*

[65] Fix | Delete

* @since 1.6.2

[66] Fix | Delete

*

[67] Fix | Delete

* @param {string} clientID Block Client ID.

[68] Fix | Delete

*/

[69] Fix | Delete

const openBuilderPopup = function( clientID ) {

[70] Fix | Delete

if ( jQuery.isEmptyObject( $popup ) ) {

[71] Fix | Delete

const tmpl = jQuery( '#wpforms-gutenberg-popup' );

[72] Fix | Delete

const parent = jQuery( '#wpwrap' );

[73] Fix | Delete

[74] Fix | Delete

parent.after( tmpl );

[75] Fix | Delete

[76] Fix | Delete

$popup = parent.siblings( '#wpforms-gutenberg-popup' );

[77] Fix | Delete

}

[78] Fix | Delete

[79] Fix | Delete

const url = wpforms_gutenberg_form_selector.get_started_url,

[80] Fix | Delete

$iframe = $popup.find( 'iframe' );

[81] Fix | Delete

[82] Fix | Delete

builderCloseButtonEvent( clientID );

[83] Fix | Delete

$iframe.attr( 'src', url );

[84] Fix | Delete

$popup.fadeIn();

[85] Fix | Delete

};

[86] Fix | Delete

[87] Fix | Delete

const hasForms = function() {

[88] Fix | Delete

return wpforms_gutenberg_form_selector.forms.length > 0;

[89] Fix | Delete

};

[90] Fix | Delete

[91] Fix | Delete

registerBlockType( 'wpforms/form-selector', {

[92] Fix | Delete

title: wpforms_gutenberg_form_selector.strings.title,

[93] Fix | Delete

description: wpforms_gutenberg_form_selector.strings.description,

[94] Fix | Delete

icon: wpformsIcon,

[95] Fix | Delete

keywords: wpforms_gutenberg_form_selector.strings.form_keywords,

[96] Fix | Delete

category: 'widgets',

[97] Fix | Delete

attributes: {

[98] Fix | Delete

formId: {

[99] Fix | Delete

type: 'string',

[100] Fix | Delete

},

[101] Fix | Delete

displayTitle: {

[102] Fix | Delete

type: 'boolean',

[103] Fix | Delete

},

[104] Fix | Delete

displayDesc: {

[105] Fix | Delete

type: 'boolean',

[106] Fix | Delete

},

[107] Fix | Delete

preview: {

[108] Fix | Delete

type: 'boolean',

[109] Fix | Delete

},

[110] Fix | Delete

},

[111] Fix | Delete

example: {

[112] Fix | Delete

attributes: {

[113] Fix | Delete

preview: true,

[114] Fix | Delete

},

[115] Fix | Delete

},

[116] Fix | Delete

supports: {

[117] Fix | Delete

customClassName: hasForms(),

[118] Fix | Delete

},

[119] Fix | Delete

edit( props ) { // eslint-disable-line max-lines-per-function

[120] Fix | Delete

const { attributes: { formId = '', displayTitle = false, displayDesc = false, preview = false }, setAttributes } = props;

[121] Fix | Delete

const formOptions = wpforms_gutenberg_form_selector.forms.map( ( value ) => (

[122] Fix | Delete

{ value: value.ID, label: value.post_title }

[123] Fix | Delete

) );

[124] Fix | Delete

[125] Fix | Delete

const strings = wpforms_gutenberg_form_selector.strings;

[126] Fix | Delete

let jsx;

[127] Fix | Delete

[128] Fix | Delete

formOptions.unshift( { value: '', label: wpforms_gutenberg_form_selector.strings.form_select } );

[129] Fix | Delete

[130] Fix | Delete

function selectForm( value ) { // eslint-disable-line jsdoc/require-jsdoc

[131] Fix | Delete

setAttributes( { formId: value } );

[132] Fix | Delete

}

[133] Fix | Delete

[134] Fix | Delete

function toggleDisplayTitle( value ) { // eslint-disable-line jsdoc/require-jsdoc

[135] Fix | Delete

setAttributes( { displayTitle: value } );

[136] Fix | Delete

}

[137] Fix | Delete

[138] Fix | Delete

function toggleDisplayDesc( value ) { // eslint-disable-line jsdoc/require-jsdoc

[139] Fix | Delete

setAttributes( { displayDesc: value } );

[140] Fix | Delete

}

[141] Fix | Delete

[142] Fix | Delete

/**

[143] Fix | Delete

* Get block empty JSX code.

[144] Fix | Delete

*

[145] Fix | Delete

* @since 1.8.3

[146] Fix | Delete

*

[147] Fix | Delete

* @param {Object} blockProps Block properties.

[148] Fix | Delete

*

[149] Fix | Delete

* @return {JSX.Element} Block empty JSX code.

[150] Fix | Delete

*/

[151] Fix | Delete

function getEmptyFormsPreview( blockProps ) {

[152] Fix | Delete

const clientId = blockProps.clientId;

[153] Fix | Delete

[154] Fix | Delete

return (

[155] Fix | Delete

<Fragment

[156] Fix | Delete

key="wpforms-gutenberg-form-selector-fragment-block-empty">

[157] Fix | Delete

<div className="wpforms-no-form-preview">

[158] Fix | Delete

<img src={ wpforms_gutenberg_form_selector.block_empty_url } alt="" />

[159] Fix | Delete

<p dangerouslySetInnerHTML={ { __html: strings.wpforms_empty_info } }></p>

[160] Fix | Delete

<button type="button" className="get-started-button components-button is-button is-primary"

[161] Fix | Delete

onClick={

[162] Fix | Delete

() => {

[163] Fix | Delete

openBuilderPopup( clientId );

[164] Fix | Delete

}

[165] Fix | Delete

}

[166] Fix | Delete

>

[167] Fix | Delete

{ __( 'Get Started', 'wpforms-lite' ) }

[168] Fix | Delete

</button>

[169] Fix | Delete

<p className="empty-desc" dangerouslySetInnerHTML={ { __html: strings.wpforms_empty_help } }></p>

[170] Fix | Delete

[171] Fix | Delete

{ /* Template for popup with builder iframe */ }

[172] Fix | Delete

<div id="wpforms-gutenberg-popup" className="wpforms-builder-popup">

[173] Fix | Delete

<iframe src="about:blank" width="100%" height="100%" id="wpforms-builder-iframe" title="wpforms-gutenberg-popup"></iframe>

[174] Fix | Delete

</div>

[175] Fix | Delete

</div>

[176] Fix | Delete

</Fragment>

[177] Fix | Delete

);

[178] Fix | Delete

}

[179] Fix | Delete

[180] Fix | Delete

/**

[181] Fix | Delete

* Print empty forms notice.

[182] Fix | Delete

*

[183] Fix | Delete

* @since 1.8.3

[184] Fix | Delete

*

[185] Fix | Delete

* @param {string} clientId Block client ID.

[186] Fix | Delete

*

[187] Fix | Delete

* @return {JSX.Element} Field styles JSX code.

[188] Fix | Delete

*/

[189] Fix | Delete

function printEmptyFormsNotice( clientId ) {

[190] Fix | Delete

return (

[191] Fix | Delete

<InspectorControls key="wpforms-gutenberg-form-selector-inspector-main-settings">

[192] Fix | Delete

<PanelBody className="wpforms-gutenberg-panel" title={ strings.form_settings }>

[193] Fix | Delete

<p className="wpforms-gutenberg-panel-notice wpforms-warning wpforms-empty-form-notice" style={ { display: 'block' } }>

[194] Fix | Delete

<strong>{ __( 'You haven’t created a form, yet!', 'wpforms-lite' ) }</strong>

[195] Fix | Delete

{ __( 'What are you waiting for?', 'wpforms-lite' ) }

[196] Fix | Delete

</p>

[197] Fix | Delete

<button type="button" className="get-started-button components-button is-button is-secondary"

[198] Fix | Delete

onClick={

[199] Fix | Delete

() => {

[200] Fix | Delete

openBuilderPopup( clientId );

[201] Fix | Delete

}

[202] Fix | Delete

}

[203] Fix | Delete

>

[204] Fix | Delete

{ __( 'Get Started', 'wpforms-lite' ) }

[205] Fix | Delete

</button>

[206] Fix | Delete

</PanelBody>

[207] Fix | Delete

</InspectorControls>

[208] Fix | Delete

);

[209] Fix | Delete

}

[210] Fix | Delete

[211] Fix | Delete

/**

[212] Fix | Delete

* Get styling panels preview.

[213] Fix | Delete

*

[214] Fix | Delete

* @since 1.8.8

[215] Fix | Delete

*

[216] Fix | Delete

* @return {JSX.Element} JSX code.

[217] Fix | Delete

*/

[218] Fix | Delete

function getStylingPanelsPreview() {

[219] Fix | Delete

return (

[220] Fix | Delete

<Fragment>

[221] Fix | Delete

<PanelBody className="wpforms-gutenberg-panel disabled_panel" title={ strings.themes }>

[222] Fix | Delete

<div className="wpforms-panel-preview wpforms-panel-preview-themes"></div>

[223] Fix | Delete

</PanelBody>

[224] Fix | Delete

<PanelBody className="wpforms-gutenberg-panel disabled_panel" title={ strings.field_styles }>

[225] Fix | Delete

<div className="wpforms-panel-preview wpforms-panel-preview-field"></div>

[226] Fix | Delete

</PanelBody>

[227] Fix | Delete

<PanelBody className="wpforms-gutenberg-panel disabled_panel" title={ strings.label_styles }>

[228] Fix | Delete

<div className="wpforms-panel-preview wpforms-panel-preview-label"></div>

[229] Fix | Delete

</PanelBody>

[230] Fix | Delete

<PanelBody className="wpforms-gutenberg-panel disabled_panel" title={ strings.button_styles }>

[231] Fix | Delete

<div className="wpforms-panel-preview wpforms-panel-preview-button"></div>

[232] Fix | Delete

</PanelBody>

[233] Fix | Delete

<PanelBody className="wpforms-gutenberg-panel disabled_panel" title={ strings.container_styles }>

[234] Fix | Delete

<div className="wpforms-panel-preview wpforms-panel-preview-container"></div>

[235] Fix | Delete

</PanelBody>

[236] Fix | Delete

<PanelBody className="wpforms-gutenberg-panel disabled_panel" title={ strings.background_styles }>

[237] Fix | Delete

<div className="wpforms-panel-preview wpforms-panel-preview-background"></div>

[238] Fix | Delete

</PanelBody>

[239] Fix | Delete

</Fragment>

[240] Fix | Delete

);

[241] Fix | Delete

}

[242] Fix | Delete

[243] Fix | Delete

if ( ! hasForms() ) {

[244] Fix | Delete

jsx = [ printEmptyFormsNotice( props.clientId ) ];

[245] Fix | Delete

[246] Fix | Delete

jsx.push( getEmptyFormsPreview( props ) );

[247] Fix | Delete

return jsx;

[248] Fix | Delete

}

[249] Fix | Delete

[250] Fix | Delete

jsx = [

[251] Fix | Delete

<InspectorControls key="wpforms-gutenberg-form-selector-inspector-controls">

[252] Fix | Delete

<PanelBody title={ wpforms_gutenberg_form_selector.strings.form_settings }>

[253] Fix | Delete

<SelectControl

[254] Fix | Delete

label={ wpforms_gutenberg_form_selector.strings.form_selected }

[255] Fix | Delete

value={ formId }

[256] Fix | Delete

options={ formOptions }

[257] Fix | Delete

onChange={ selectForm }

[258] Fix | Delete

/>

[259] Fix | Delete

<ToggleControl

[260] Fix | Delete

label={ wpforms_gutenberg_form_selector.strings.show_title }

[261] Fix | Delete

checked={ displayTitle }

[262] Fix | Delete

onChange={ toggleDisplayTitle }

[263] Fix | Delete

/>

[264] Fix | Delete

<ToggleControl

[265] Fix | Delete

label={ wpforms_gutenberg_form_selector.strings.show_description }

[266] Fix | Delete

checked={ displayDesc }

[267] Fix | Delete

onChange={ toggleDisplayDesc }

[268] Fix | Delete

/>

[269] Fix | Delete

<p className="wpforms-gutenberg-panel-notice wpforms-warning">

[270] Fix | Delete

<strong>{ strings.update_wp_notice_head }</strong>

[271] Fix | Delete

{ strings.update_wp_notice_text } <a href={ strings.update_wp_notice_link } rel="noreferrer" target="_blank">{ strings.learn_more }</a>

[272] Fix | Delete

</p>

[273] Fix | Delete

</PanelBody>

[274] Fix | Delete

{ getStylingPanelsPreview() }

[275] Fix | Delete

</InspectorControls>,

[276] Fix | Delete

];

[277] Fix | Delete

[278] Fix | Delete

if ( formId ) {

[279] Fix | Delete

jsx.push(

[280] Fix | Delete

<ServerSideRender

[281] Fix | Delete

key="wpforms-gutenberg-form-selector-server-side-renderer"

[282] Fix | Delete

block="wpforms/form-selector"

[283] Fix | Delete

attributes={ props.attributes }

[284] Fix | Delete

/>

[285] Fix | Delete

);

[286] Fix | Delete

} else if ( preview ) {

[287] Fix | Delete

jsx.push(

[288] Fix | Delete

<Fragment

[289] Fix | Delete

key="wpforms-gutenberg-form-selector-fragment-block-preview">

[290] Fix | Delete

<img src={ wpforms_gutenberg_form_selector.block_preview_url } style={ { width: '100%' } } alt="" />

[291] Fix | Delete

</Fragment>

[292] Fix | Delete

);

[293] Fix | Delete

} else {

[294] Fix | Delete

jsx.push(

[295] Fix | Delete

<Placeholder

[296] Fix | Delete

key="wpforms-gutenberg-form-selector-wrap"

[297] Fix | Delete

className="wpforms-gutenberg-form-selector-wrap">

[298] Fix | Delete

<img src={ wpforms_gutenberg_form_selector.logo_url } alt="" />

[299] Fix | Delete

<SelectControl

[300] Fix | Delete

key="wpforms-gutenberg-form-selector-select-control"

[301] Fix | Delete

value={ formId }

[302] Fix | Delete

options={ formOptions }

[303] Fix | Delete

onChange={ selectForm }

[304] Fix | Delete

/>

[305] Fix | Delete

</Placeholder>

[306] Fix | Delete

);

[307] Fix | Delete

}

[308] Fix | Delete

[309] Fix | Delete

return jsx;

[310] Fix | Delete

},

[311] Fix | Delete

save() {

[312] Fix | Delete

return null;

[313] Fix | Delete

},

[314] Fix | Delete

} );

[315] Fix | Delete

[316] Fix | Delete