first commit

wp-content/plugins/wpforms-lite/assets/js/components/admin/builder/help.js

@@ -0,0 +1,544 @@
+/* global wpforms_builder_help, wpf */
+
+/**
+ * WPForms Builder Help screen module.
+ *
+ * @since 1.6.3
+ */
+
+'use strict';
+
+var WPForms = window.WPForms || {};
+
+WPForms.Admin = WPForms.Admin || {};
+WPForms.Admin.Builder = WPForms.Admin.Builder || {};
+
+WPForms.Admin.Builder.Help = WPForms.Admin.Builder.Help || ( function( document, window, $ ) {
+
+	/**
+	 * Elements holder.
+	 *
+	 * @since 1.6.3
+	 *
+	 * @type {object}
+	 */
+	var el;
+
+	/**
+	 * UI functions.
+	 *
+	 * @since 1.6.3
+	 *
+	 * @type {object}
+	 */
+	var ui;
+
+	/**
+	 * Event handlers.
+	 *
+	 * @since 1.6.3
+	 *
+	 * @type {object}
+	 */
+	var event;
+
+	/**
+	 * Public functions and properties.
+	 *
+	 * @since 1.6.3
+	 *
+	 * @type {object}
+	 */
+	var app = {
+
+		/**
+		 * Start the engine. DOM is not ready yet, use only to init something.
+		 *
+		 * @since 1.6.3
+		 */
+		init: function() {
+
+			$( app.ready );
+		},
+
+		/**
+		 * DOM is fully loaded.
+		 *
+		 * @since 1.6.3
+		 */
+		ready: function() {
+
+			app.setup();
+			app.initCategories();
+			app.events();
+		},
+
+		/**
+		 * Setup. Prepare some variables.
+		 *
+		 * @since 1.6.3
+		 */
+		setup: function() {
+
+			// Cache DOM elements.
+			el = {
+				$builder:     $( '#wpforms-builder' ),
+				$builderForm: $( '#wpforms-builder-form' ),
+				$helpBtn:     $( '#wpforms-help' ),
+				$help:        $( '#wpforms-builder-help' ),
+				$closeBtn:    $( '#wpforms-builder-help-close' ),
+				$search:      $( '#wpforms-builder-help-search' ),
+				$result:      $( '#wpforms-builder-help-result' ),
+				$noResult:    $( '#wpforms-builder-help-no-result' ),
+				$categories:  $( '#wpforms-builder-help-categories' ),
+				$footer:      $( '#wpforms-builder-help-footer' ),
+			};
+		},
+
+		/**
+		 * Bind events.
+		 *
+		 * @since 1.6.3
+		 */
+		events: function() {
+
+			// Open/close help modal.
+			el.$helpBtn.on( 'click', event.openHelp );
+			el.$closeBtn.on( 'click', event.closeHelp );
+
+			// Expand/collapce category.
+			el.$categories.on( 'click', '.wpforms-builder-help-category header', event.toggleCategory );
+
+			// View all Category Docs button click.
+			el.$categories.on( 'click', '.wpforms-builder-help-category button.viewall', event.viewAllCategoryDocs );
+
+			// Input into search field.
+			el.$search.on( 'keyup', 'input', _.debounce( event.inputSearch, 250 ) );
+
+			// Clear search field.
+			el.$search.on( 'click', '#wpforms-builder-help-search-clear', event.clearSearch );
+		},
+
+		/**
+		 * Init (generate) categories list.
+		 *
+		 * @since 1.6.3
+		 */
+		initCategories: function() {
+
+			// Display error if docs data is not available.
+			if ( wpf.empty( wpforms_builder_help.docs ) ) {
+				el.$categories.html( wp.template( 'wpforms-builder-help-categories-error' ) );
+
+				return;
+			}
+
+			var tmpl = wp.template( 'wpforms-builder-help-categories' ),
+				data = {
+					categories: wpforms_builder_help.categories,
+					docs: app.getDocsByCategories(),
+				};
+
+			el.$categories.html( tmpl( data ) );
+		},
+
+		/**
+		 * Init categories list.
+		 *
+		 * @since 1.6.3
+		 *
+		 * @returns {object} Docs arranged by category.
+		 */
+		getDocsByCategories: function() {
+
+			var categories = wpforms_builder_help.categories,
+				docs = wpforms_builder_help.docs || [],
+				docsByCategories = {};
+
+			_.each( categories, function( categoryTitle, categorySlug ) {
+				var docsByCategory = [];
+				_.each( docs, function( doc ) {
+					if ( doc.categories && doc.categories.indexOf( categorySlug ) > -1 ) {
+						docsByCategory.push( doc );
+					}
+				} );
+				docsByCategories[ categorySlug ] = docsByCategory;
+			} );
+
+			return docsByCategories;
+		},
+
+		/**
+		 * Get docs recommended by search term.
+		 *
+		 * @since 1.6.3
+		 *
+		 * @param {string} term Search term.
+		 *
+		 * @returns {Array} Recommended docs.
+		 */
+		getRecommendedDocs: function( term ) {
+
+			if ( wpf.empty( term ) ) {
+				return [];
+			}
+
+			term = term.toLowerCase();
+
+			var docs = wpforms_builder_help.docs,
+				recommendedDocs = [];
+
+			if ( wpf.empty( wpforms_builder_help.context.docs[ term ] ) ) {
+				return [];
+			}
+
+			_.each( wpforms_builder_help.context.docs[ term ], function( docId ) {
+				if ( ! wpf.empty( docs[ docId ] ) ) {
+					recommendedDocs.push( docs[ docId ] );
+				}
+			} );
+
+			return recommendedDocs;
+		},
+
+		/**
+		 * Get docs filtered by search term.
+		 *
+		 * @since 1.6.3
+		 *
+		 * @param {string} term Search term.
+		 *
+		 * @returns {Array} Filtered docs.
+		 */
+		getFilteredDocs: function( term ) {
+
+			if ( wpf.empty( term ) ) {
+				return [];
+			}
+
+			var docs = wpforms_builder_help.docs,
+				filteredDocs = [];
+
+			term = term.toLowerCase();
+
+			_.each( docs, function( doc ) {
+				if ( doc.title && doc.title.toLowerCase().indexOf( term ) > -1 ) {
+					filteredDocs.push( doc );
+				}
+			} );
+
+			return filteredDocs;
+		},
+
+		/**
+		 * Get the current context (state) of the form builder.
+		 *
+		 * @since 1.6.3
+		 *
+		 * @returns {string} Builder context string. For example 'fields/add_field' or 'settings/notifications'.
+		 */
+		getBuilderContext: function() {
+
+			// New (not saved) form.
+			if ( wpf.empty( el.$builderForm.data( 'id' ) ) ) {
+				return 'new_form';
+			}
+
+			// Determine builder panel and section.
+			var panel = el.$builder.find( '#wpforms-panels-toggle button.active' ).data( 'panel' ),
+				$panel = el.$builder.find( '#wpforms-panel-' + panel ),
+				section = '',
+				subsection = '',
+				context;
+
+			switch ( panel ) {
+				case 'fields':
+					section = $panel.find( '.wpforms-panel-sidebar .wpforms-tab a.active' ).parent().attr( 'id' );
+					break;
+				case 'setup':
+					section = '';
+					break;
+				default:
+					section = $panel.find( '.wpforms-panel-sidebar a.active' ).data( 'section' );
+			}
+
+			section = ! wpf.empty( section ) ? section.replace( /-/g, '_' ) : '';
+
+			// Detect field type.
+			if ( section === 'field_options' ) {
+				subsection = $panel.find( '#wpforms-field-options .wpforms-field-option:visible .wpforms-field-option-hidden-type' ).val();
+			}
+
+			// Combine to context array.
+			context = [ panel, section, subsection ].filter( function( el ) {
+				return ! wpf.empty( el ) && el !== 'default';
+			} );
+
+			// Return imploded string.
+			return context.join( '/' );
+		},
+
+		/**
+		 * Get the search term for the current builder context.
+		 *
+		 * @since 1.6.3
+		 *
+		 * @returns {string} Builder context term string.
+		 */
+		getBuilderContextTerm: function() {
+
+			return wpforms_builder_help.context.terms[ app.getBuilderContext() ] || '';
+		},
+	};
+
+	/**
+	 * UI functions.
+	 */
+	ui = {
+
+		/**
+		 * Configuration.
+		 *
+		 * @since 1.6.3
+		 *
+		 * @type {object}
+		 */
+		config: {
+			speed: 300, // Fading/sliding duration in milliseconds.
+		},
+
+		/**
+		 * Display the element by fading them to opaque using CSS.
+		 *
+		 * @since 1.6.3
+		 *
+		 * @param {jQuery} $el Element object.
+		 */
+		fadeIn: function( $el ) {
+
+			if ( ! $el.length ) {
+				return;
+			}
+
+			$el.css( 'display', '' );
+			$el.css( 'transition', 'opacity ' + ui.config.speed + 'ms ease-in 0s' );
+			setTimeout( function() {
+				$el.css( 'opacity', '1' );
+			}, 0 );
+		},
+
+		/**
+		 * Hide the element by fading them to transparent using CSS.
+		 *
+		 * @since 1.6.3
+		 *
+		 * @param {jQuery} $el Element object.
+		 */
+		fadeOut: function( $el ) {
+
+			if ( ! $el.length ) {
+				return;
+			}
+
+			$el.css( 'opacity', '0' );
+			$el.css( 'transition', 'opacity ' + ui.config.speed + 'ms ease-in 0s' );
+			setTimeout( function() {
+				$el.css( 'display', 'none' );
+			}, ui.config.speed );
+		},
+
+		/**
+		 * Collapse all categories.
+		 *
+		 * @since 1.6.3
+		 */
+		collapseAllCategories: function() {
+
+			el.$categories.find( '.wpforms-builder-help-category' ).removeClass( 'opened' );
+			el.$categories.find( '.wpforms-builder-help-docs' ).slideUp();
+		},
+	};
+
+	/**
+	 * Event handlers.
+	 */
+	event = {
+
+		/**
+		 * Open help modal.
+		 *
+		 * @since 1.6.3
+		 *
+		 * @param {object} e Event object.
+		 */
+		openHelp: function( e ) {
+
+			e.preventDefault();
+
+			var $firstCategory = el.$categories.find( '.wpforms-builder-help-category' ).first(),
+				builderContextTerm = app.getBuilderContextTerm();
+
+			if ( builderContextTerm === '' && ! $firstCategory.hasClass( 'opened' ) ) {
+				$firstCategory.find( 'header' ).first().click();
+			} else {
+				ui.collapseAllCategories();
+			}
+
+			el.$search.find( 'input' ).val( builderContextTerm ).trigger( 'keyup' );
+
+			ui.fadeIn( el.$help );
+
+			setTimeout( function() {
+
+				ui.fadeIn( el.$result );
+				ui.fadeIn( el.$categories );
+				ui.fadeIn( el.$footer );
+
+			}, ui.config.speed );
+		},
+
+		/**
+		 * Close help modal.
+		 *
+		 * @since 1.6.3
+		 *
+		 * @param {object} e Event object.
+		 */
+		closeHelp: function( e ) {
+
+			e.preventDefault();
+
+			ui.fadeOut( el.$result );
+			ui.fadeOut( el.$categories );
+			ui.fadeOut( el.$footer );
+
+			ui.fadeOut( el.$help );
+
+		},
+
+		/**
+		 * Toggle category.
+		 *
+		 * @since 1.6.3
+		 *
+		 * @param {object} e Event object.
+		 */
+		toggleCategory: function( e ) {
+
+			var $category = $( this ).parent(),
+				$categoryDocs = $category.find( '.wpforms-builder-help-docs' );
+
+			if ( ! $categoryDocs.is( ':visible' ) ) {
+				$category.addClass( 'opened' );
+			} else {
+				$category.removeClass( 'opened' );
+			}
+
+			$categoryDocs.stop().slideToggle( ui.config.speed );
+		},
+
+		/**
+		 * View All Category Docs button click.
+		 *
+		 * @since 1.6.3
+		 *
+		 * @param {object} e Event object.
+		 */
+		viewAllCategoryDocs: function( e ) {
+
+			var $btn = $( this );
+
+			$btn.prev( 'div' ).stop().slideToggle( ui.config.speed, function() {
+				$btn.closest( '.wpforms-builder-help-category' ).addClass( 'viewall' );
+			} );
+			ui.fadeOut( $btn );
+			$btn.slideUp();
+		},
+
+		/**
+		 * Input into search field.
+		 *
+		 * @since 1.6.3
+		 *
+		 * @param {object} e Event object.
+		 */
+		inputSearch: function( e ) {
+
+			var $input = $( this ),
+				term = $input.val();
+
+			var tmpl = wp.template( 'wpforms-builder-help-docs' ),
+				recommendedDocs = app.getRecommendedDocs( term ),
+				filteredDocs = event.removeDuplicates( recommendedDocs, app.getFilteredDocs( term ) ),
+				resultHTML = '';
+
+			el.$search.toggleClass( 'wpforms-empty', ! term );
+
+			if ( ! wpf.empty( recommendedDocs ) ) {
+				resultHTML += tmpl( {
+					docs: recommendedDocs,
+				} );
+			}
+
+			if ( ! wpf.empty( filteredDocs ) ) {
+				resultHTML += tmpl( {
+					docs: filteredDocs,
+				} );
+			}
+
+			el.$noResult.toggle( resultHTML === '' && term !== '' );
+
+			el.$result.html( resultHTML );
+
+			el.$help[0].scrollTop = 0;
+		},
+
+		/**
+		 * Remove duplicated items in the filtered docs.
+		 *
+		 * @since 1.6.3
+		 *
+		 * @param {Array} recommendedDocs Recommended docs.
+		 * @param {Array} filteredDocs    Filtered docs.
+		 *
+		 * @returns {Array} Filtered docs without duplicated items in the recommended docs.
+		 */
+		removeDuplicates: function( recommendedDocs, filteredDocs ) {
+
+			if ( wpf.empty( recommendedDocs ) || wpf.empty( filteredDocs ) ) {
+				return filteredDocs;
+			}
+
+			var docs = [];
+
+			for ( var i = 0; i < recommendedDocs.length, i++; ) {
+				for ( var k = 0; k < filteredDocs.length, k++; ) {
+					if ( filteredDocs[ k ].url !== recommendedDocs[ i ].url ) {
+						docs.push( filteredDocs[ k ] );
+					}
+				}
+			}
+
+			return docs;
+		},
+
+		/**
+		 * Clear search field.
+		 *
+		 * @since 1.6.3
+		 *
+		 * @param {object} e Event object.
+		 */
+		clearSearch: function( e ) {
+
+			el.$search.find( 'input' ).val( '' ).trigger( 'keyup' );
+		},
+	};
+
+	// Provide access to public functions/properties.
+	return app;
+
+}( document, window, jQuery ) );
+
+// Initialize.
+WPForms.Admin.Builder.Help.init();

wp-content/plugins/wpforms-lite/assets/js/components/admin/builder/help.min.js

@@ -0,0 +1 @@
+"use strict";var WPForms=window.WPForms||{};WPForms.Admin=WPForms.Admin||{},WPForms.Admin.Builder=WPForms.Admin.Builder||{},WPForms.Admin.Builder.Help=WPForms.Admin.Builder.Help||function(l){var n,p={init:function(){l(p.ready)},ready:function(){p.setup(),p.initCategories(),p.events()},setup:function(){n={$builder:l("#wpforms-builder"),$builderForm:l("#wpforms-builder-form"),$helpBtn:l("#wpforms-help"),$help:l("#wpforms-builder-help"),$closeBtn:l("#wpforms-builder-help-close"),$search:l("#wpforms-builder-help-search"),$result:l("#wpforms-builder-help-result"),$noResult:l("#wpforms-builder-help-no-result"),$categories:l("#wpforms-builder-help-categories"),$footer:l("#wpforms-builder-help-footer")}},events:function(){n.$helpBtn.on("click",c.openHelp),n.$closeBtn.on("click",c.closeHelp),n.$categories.on("click",".wpforms-builder-help-category header",c.toggleCategory),n.$categories.on("click",".wpforms-builder-help-category button.viewall",c.viewAllCategoryDocs),n.$search.on("keyup","input",_.debounce(c.inputSearch,250)),n.$search.on("click","#wpforms-builder-help-search-clear",c.clearSearch)},initCategories:function(){var e,r;wpf.empty(wpforms_builder_help.docs)?n.$categories.html(wp.template("wpforms-builder-help-categories-error")):(e=wp.template("wpforms-builder-help-categories"),r={categories:wpforms_builder_help.categories,docs:p.getDocsByCategories()},n.$categories.html(e(r)))},getDocsByCategories:function(){var e=wpforms_builder_help.categories,o=wpforms_builder_help.docs||[],i={};return _.each(e,function(e,r){var t=[];_.each(o,function(e){e.categories&&-1<e.categories.indexOf(r)&&t.push(e)}),i[r]=t}),i},getRecommendedDocs:function(e){if(wpf.empty(e))return[];e=e.toLowerCase();var r=wpforms_builder_help.docs,t=[];return wpf.empty(wpforms_builder_help.context.docs[e])?[]:(_.each(wpforms_builder_help.context.docs[e],function(e){wpf.empty(r[e])||t.push(r[e])}),t)},getFilteredDocs:function(r){if(wpf.empty(r))return[];var e=wpforms_builder_help.docs,t=[];return r=r.toLowerCase(),_.each(e,function(e){e.title&&-1<e.title.toLowerCase().indexOf(r)&&t.push(e)}),t},getBuilderContext:function(){if(wpf.empty(n.$builderForm.data("id")))return"new_form";var e=n.$builder.find("#wpforms-panels-toggle button.active").data("panel"),r=n.$builder.find("#wpforms-panel-"+e),t="",o="";switch(e){case"fields":t=r.find(".wpforms-panel-sidebar .wpforms-tab a.active").parent().attr("id");break;case"setup":t="";break;default:t=r.find(".wpforms-panel-sidebar a.active").data("section")}return[e,t=wpf.empty(t)?"":t.replace(/-/g,"_"),o="field_options"===t?r.find("#wpforms-field-options .wpforms-field-option:visible .wpforms-field-option-hidden-type").val():o].filter(function(e){return!wpf.empty(e)&&"default"!==e}).join("/")},getBuilderContextTerm:function(){return wpforms_builder_help.context.terms[p.getBuilderContext()]||""}},o={config:{speed:300},fadeIn:function(e){e.length&&(e.css("display",""),e.css("transition","opacity "+o.config.speed+"ms ease-in 0s"),setTimeout(function(){e.css("opacity","1")},0))},fadeOut:function(e){e.length&&(e.css("opacity","0"),e.css("transition","opacity "+o.config.speed+"ms ease-in 0s"),setTimeout(function(){e.css("display","none")},o.config.speed))},collapseAllCategories:function(){n.$categories.find(".wpforms-builder-help-category").removeClass("opened"),n.$categories.find(".wpforms-builder-help-docs").slideUp()}},c={openHelp:function(e){e.preventDefault();var r=n.$categories.find(".wpforms-builder-help-category").first(),e=p.getBuilderContextTerm();""!==e||r.hasClass("opened")?o.collapseAllCategories():r.find("header").first().click(),n.$search.find("input").val(e).trigger("keyup"),o.fadeIn(n.$help),setTimeout(function(){o.fadeIn(n.$result),o.fadeIn(n.$categories),o.fadeIn(n.$footer)},o.config.speed)},closeHelp:function(e){e.preventDefault(),o.fadeOut(n.$result),o.fadeOut(n.$categories),o.fadeOut(n.$footer),o.fadeOut(n.$help)},toggleCategory:function(e){var r=l(this).parent(),t=r.find(".wpforms-builder-help-docs");t.is(":visible")?r.removeClass("opened"):r.addClass("opened"),t.stop().slideToggle(o.config.speed)},viewAllCategoryDocs:function(e){var r=l(this);r.prev("div").stop().slideToggle(o.config.speed,function(){r.closest(".wpforms-builder-help-category").addClass("viewall")}),o.fadeOut(r),r.slideUp()},inputSearch:function(e){var r=l(this).val(),t=wp.template("wpforms-builder-help-docs"),o=p.getRecommendedDocs(r),i=c.removeDuplicates(o,p.getFilteredDocs(r)),s="";n.$search.toggleClass("wpforms-empty",!r),wpf.empty(o)||(s+=t({docs:o})),wpf.empty(i)||(s+=t({docs:i})),n.$noResult.toggle(""===s&&""!==r),n.$result.html(s),n.$help[0].scrollTop=0},removeDuplicates:function(e,r){if(wpf.empty(e)||wpf.empty(r))return r;for(var t=[],o=0;e.length,o++;)for(var i=0;r.length,i++;)r[i].url!==e[o].url&&t.push(r[i]);return t},clearSearch:function(e){n.$search.find("input").val("").trigger("keyup")}};return p}((document,window,jQuery)),WPForms.Admin.Builder.Help.init();

wp-content/plugins/wpforms-lite/assets/js/components/admin/builder/providers.js

@@ -0,0 +1,972 @@
+/* global wpforms_builder, wpforms_builder_providers, wpf */
+
+var WPForms = window.WPForms || {};
+WPForms.Admin = WPForms.Admin || {};
+WPForms.Admin.Builder = WPForms.Admin.Builder || {};
+
+/**
+ * WPForms Providers module.
+ *
+ * @since 1.4.7
+ */
+WPForms.Admin.Builder.Providers = WPForms.Admin.Builder.Providers || ( function( document, window, $ ) {
+
+	'use strict';
+
+	/**
+	 * Private functions and properties.
+	 *
+	 * @since 1.4.7
+	 *
+	 * @type {Object}
+	 */
+	var __private = {
+
+		/**
+		 * Internal cache storage, do not use it directly, but app.cache.{(get|set|delete|clear)()} instead.
+		 * Key is the provider slug, value is a Map, that will have it's own key as a connection id (or not).
+		 *
+		 * @since 1.4.7
+		 *
+		 * @type {Object.<string, Map>}
+		 */
+		cache: {},
+
+		/**
+		 * Config contains all configuration properties.
+		 *
+		 * @since 1.4.7
+		 *
+		 * @type {Object.<string, *>}
+		 */
+		config: {
+			/**
+			 * List of default templates that should be compiled.
+			 *
+			 * @since 1.4.7
+			 *
+			 * @type {string[]}
+			 */
+			templates: [
+				'wpforms-providers-builder-content-connection-fields',
+				'wpforms-providers-builder-content-connection-conditionals'
+			]
+		},
+
+		/**
+		 * Form fields for the current state.
+		 *
+		 * @since 1.6.1.2
+		 *
+		 * @type {object}
+		 */
+		fields: {},
+	};
+
+	/**
+	 * Public functions and properties.
+	 *
+	 * @since 1.4.7
+	 *
+	 * @type {Object}
+	 */
+	var app = {
+
+		/**
+		 * Panel holder.
+		 *
+		 * @since 1.5.9
+		 *
+		 * @type {object}
+		 */
+		panelHolder: {},
+
+		/**
+		 * Form holder.
+		 *
+		 * @since 1.4.7
+		 *
+		 * @type {object}
+		 */
+		form: $( '#wpforms-builder-form' ),
+
+		/**
+		 * Spinner HTML.
+		 *
+		 * @since 1.4.7
+		 *
+		 * @type {object}
+		 */
+		spinner: '<i class="wpforms-loading-spinner wpforms-loading-inline"></i>',
+
+		/**
+		 * All ajax requests are grouped together with own properties.
+		 *
+		 * @since 1.4.7
+		 */
+		ajax: {
+			/**
+			 * Merge custom AJAX data object with defaults.
+			 *
+			 * @since 1.4.7
+			 * @since 1.5.9 Added a new parameter - provider
+			 *
+			 * @param {string} provider Current provider slug.
+			 * @param {object} custom AJAX data object with custom settings.
+			 *
+			 * @returns {Object}
+			 */
+			_mergeData: function( provider, custom ) {
+
+				var data = {
+					id: $( '#wpforms-builder-form' ).data( 'id' ),
+					nonce: wpforms_builder.nonce,
+					action: 'wpforms_builder_provider_ajax_' + provider,
+				};
+
+				$.extend( data, custom );
+
+				return data;
+			},
+
+			/**
+			 * Make an AJAX request. It's basically a wrapper around jQuery.ajax, but with some defaults.
+			 *
+			 * @since 1.4.7
+			 *
+			 * @param {string} provider Current provider slug.
+			 * @param {*} custom Object of user-defined $.ajax()-compatible parameters.
+			 *
+			 * @return {Promise}
+			 */
+			request: function( provider, custom ) {
+
+				var $holder = app.getProviderHolder( provider ),
+					$lock   = $holder.find( '.wpforms-builder-provider-connections-save-lock' ),
+					$error  = $holder.find( '.wpforms-builder-provider-connections-error' );
+
+				var params = {
+					url: wpforms_builder.ajax_url,
+					type: 'post',
+					dataType: 'json',
+					beforeSend: function() {
+
+						$holder.addClass( 'loading' );
+						$lock.val( 1 );
+						$error.hide();
+					},
+				};
+
+				custom.data = app.ajax._mergeData( provider, custom.data || {} );
+				$.extend( params, custom );
+
+				return $.ajax( params )
+					.fail( function( jqXHR, textStatus, errorThrown ) {
+
+						/*
+							* Right now we are logging into browser console.
+							* In future that might be something better.
+							*/
+						console.error( 'provider:', provider );
+						console.error( jqXHR );
+						console.error( textStatus );
+
+						$lock.val( 1 );
+						$error.show();
+					} )
+					.always( function( dataOrjqXHR, textStatus, jqXHROrerrorThrown ) {
+
+						$holder.removeClass( 'loading' );
+
+						if ( 'success' === textStatus ) {
+							$lock.val( 0 );
+						}
+					} );
+			}
+		},
+
+		/**
+		 * Temporary in-memory cache handling for all providers.
+		 *
+		 * @since 1.4.7
+		 */
+		cache: {
+
+			/**
+			 * Get the value from cache by key.
+			 *
+			 * @since 1.4.7
+			 * @since 1.5.9 Added a new parameter - provider.
+			 *
+			 * @param {string} provider Current provider slug.
+			 * @param {string} key Cache key.
+			 *
+			 * @returns {*} Null if some error occurs.
+			 */
+			get: function( provider, key ) {
+
+				if (
+					typeof __private.cache[ provider ] === 'undefined' ||
+					! ( __private.cache[ provider ] instanceof Map )
+				) {
+					return null;
+				}
+
+				return __private.cache[ provider ].get( key );
+			},
+
+			/**
+			 * Get the value from cache by key and an ID.
+			 * Useful when Object is stored under key and we need specific value.
+			 *
+			 * @since 1.4.7
+			 * @since 1.5.9 Added a new parameter - provider.
+			 *
+			 * @param {string} provider Current provider slug.
+			 * @param {string} key Cache key.
+			 * @param {string} id Cached object ID.
+			 *
+			 * @returns {*} Null if some error occurs.
+			 */
+			getById: function( provider, key, id ) {
+
+				if ( typeof this.get( provider, key )[ id ] === 'undefined' ) {
+					return null;
+				}
+
+				return this.get( provider, key )[ id ];
+			},
+
+			/**
+			 * Save the data to cache.
+			 *
+			 * @since 1.4.7
+			 * @since 1.5.9 Added a new parameter - provider.
+			 *
+			 * @param {string} provider Current provider slug.
+			 * @param {string} key Intended to be a string, but can be everything that Map supports as a key.
+			 * @param {*} value Data you want to save in cache.
+			 *
+			 * @returns {Map} All the cache for the provider. IE11 returns 'undefined' for an undefined reason.
+			 */
+			set: function( provider, key, value ) {
+
+				if (
+					typeof __private.cache[ provider ] === 'undefined' ||
+					! ( __private.cache[ provider ] instanceof Map )
+				) {
+					__private.cache[ provider ] = new Map();
+				}
+
+				return __private.cache[ provider ].set( key, value );
+			},
+
+			/**
+			 * Add the data to cache to a particular key.
+			 *
+			 * @since 1.4.7
+			 * @since 1.5.9 Added a new parameter - provider.
+			 *
+			 * @example app.cache.as('provider').addTo('connections', connection_id, connection);
+			 *
+			 * @param {string} provider Current provider slug.
+			 * @param {string} key Intended to be a string, but can be everything that Map supports as a key.
+			 * @param {string} id ID for a value that should be added to a certain key.
+			 * @param {*} value Data you want to save in cache.
+			 *
+			 * @returns {Map} All the cache for the provider. IE11 returns 'undefined' for an undefined reason.
+			 */
+			addTo: function( provider, key, id, value ) {
+
+				if (
+					typeof __private.cache[ provider ] === 'undefined' ||
+					! ( __private.cache[ provider ] instanceof Map )
+				) {
+					__private.cache[ provider ] = new Map();
+					this.set( provider, key, {} );
+				}
+
+				var data = this.get( provider, key );
+				data[ id ] = value;
+
+				return this.set(
+					provider,
+					key,
+					data
+				);
+			},
+
+			/**
+			 * Delete the cache by key.
+			 *
+			 * @since 1.4.7
+			 * @since 1.5.9 Added a new parameter - provider.
+			 *
+			 * @param {string} provider Current provider slug.
+			 * @param {string} key Cache key.
+			 *
+			 * @returns boolean|null True on success, null on data holder failure, false on error.
+			 */
+			delete: function( provider, key ) {
+
+				if (
+					typeof __private.cache[ provider ] === 'undefined' ||
+					! ( __private.cache[ provider ] instanceof Map )
+				) {
+					return null;
+				}
+
+				return __private.cache[ provider ].delete( key );
+			},
+
+			/**
+			 * Delete particular data from a certain key.
+			 *
+			 * @since 1.4.7
+			 * @since 1.5.9 Added a new parameter - provider.
+			 *
+			 * @example app.cache.as('provider').deleteFrom('connections', connection_id);
+			 *
+			 * @param {string} provider Current provider slug.
+			 * @param {string} key Intended to be a string, but can be everything that Map supports as a key.
+			 * @param {string} id ID for a value that should be delete from a certain key.
+			 *
+			 * @returns {Map} All the cache for the provider. IE11 returns 'undefined' for an undefined reason.
+			 */
+			deleteFrom: function( provider, key, id ) {
+
+				if (
+					typeof __private.cache[ provider ] === 'undefined' ||
+					! ( __private.cache[ provider ] instanceof Map )
+				) {
+					return null;
+				}
+
+				var data = this.get( provider, key );
+
+				delete data[ id ];
+
+				return this.set(
+					provider,
+					key,
+					data
+				);
+			},
+
+			/**
+			 * Clear all the cache data.
+			 *
+			 * @since 1.4.7
+			 * @since 1.5.9 Added a new parameter - provider.
+			 *
+			 * @param {string} provider Current provider slug.
+			 */
+			clear: function( provider ) {
+
+				if (
+					typeof __private.cache[ provider ] === 'undefined' ||
+					! ( __private.cache[ provider ] instanceof Map )
+				) {
+					return;
+				}
+
+				__private.cache[ provider ].clear();
+			}
+		},
+
+		/**
+		 * Start the engine. DOM is not ready yet, use only to init something.
+		 *
+		 * @since 1.4.7
+		 */
+		init: function() {
+
+			// Do that when DOM is ready.
+			$( app.ready );
+		},
+
+		/**
+		 * DOM is fully loaded.
+		 * Should be hooked into in addons, that need to work with DOM, templates etc.
+		 *
+		 * @since 1.4.7
+		 * @since 1.6.1.2 Added initialization for `__private.fields` property.
+		 */
+		ready: function() {
+
+			// Save a current form fields state.
+			__private.fields = $.extend( {}, wpf.getFields( false, true ) );
+
+			app.panelHolder = $( '#wpforms-panel-providers' );
+
+			app.Templates = WPForms.Admin.Builder.Templates;
+			app.Templates.add( __private.config.templates );
+
+			app.bindActions();
+			app.ui.bindActions();
+
+			app.panelHolder.trigger( 'WPForms.Admin.Builder.Providers.ready' );
+		},
+
+		/**
+		 * Process all generic actions/events, mostly custom that were fired by our API.
+		 *
+		 * @since 1.4.7
+		 * @since 1.6.1.2 Added a calling `app.updateMapSelects()` method.
+		 */
+		bindActions: function() {
+
+			// On Form save - notify user about required fields.
+			$( document ).on( 'wpformsSaved', function() {
+
+				var $connectionBlocks = $( '#wpforms-panel-providers' ).find( '.wpforms-builder-provider-connection' );
+
+				if ( ! $connectionBlocks.length ) {
+					return;
+				}
+
+				// We need to show him "Required fields empty" popup only once.
+				var isShownOnce = false;
+
+				$connectionBlocks.each( function() {
+
+					var isRequiredEmpty = false;
+
+					// Do the actual required fields check.
+					$( this ).find( 'input.wpforms-required, select.wpforms-required, textarea.wpforms-required' ).each( function() {
+
+						var value = $( this ).val();
+
+						if ( _.isEmpty( value ) ) {
+							$( this ).addClass( 'wpforms-error' );
+							isRequiredEmpty = true;
+
+						} else {
+							$( this ).removeClass( 'wpforms-error' );
+						}
+					} );
+
+					// Notify user.
+					if ( isRequiredEmpty && ! isShownOnce ) {
+						var $titleArea = $( this ).closest( '.wpforms-builder-provider' ).find( '.wpforms-builder-provider-title' ).clone();
+						$titleArea.find( 'button' ).remove();
+						var msg = wpforms_builder.provider_required_flds;
+
+						$.alert( {
+							title: wpforms_builder.heads_up,
+							content: msg.replace( '{provider}', '<strong>' + $titleArea.text().trim() + '</strong>' ),
+							icon: 'fa fa-exclamation-circle',
+							type: 'orange',
+							buttons: {
+								confirm: {
+									text: wpforms_builder.ok,
+									btnClass: 'btn-confirm',
+									keys: [ 'enter' ],
+								},
+							},
+						} );
+
+						// Save that we have already showed the user, so we won't bug it anymore.
+						isShownOnce = true;
+					}
+				} );
+
+				// On "Fields" page additional update provider's field mapped items.
+				if ( 'fields' === wpf.getQueryString( 'view' ) ) {
+					app.updateMapSelects( $connectionBlocks );
+				}
+			} );
+
+			/*
+			 * Update form state when each connection is loaded into the DOM.
+			 * This will prevent a please-save-prompt to appear, when navigating
+			 * out and back to Marketing tab without doing any changes anywhere.
+			 */
+			$( '#wpforms-panel-providers' ).on( 'connectionRendered', function() {
+
+				if ( wpf.initialSave === true ) {
+					wpf.savedState = wpf.getFormState( '#wpforms-builder-form');
+				}
+			} );
+		},
+
+		/**
+		 * Update selects for mapping if any form fields was added, deleted or changed.
+		 *
+		 * @since 1.6.1.2
+		 *
+		 * @param {object} $connections jQuery selector for active conenctions.
+		 */
+		updateMapSelects: function( $connections ) {
+
+			var fields = $.extend( {}, wpf.getFields() ),
+				currentSaveFields,
+				prevSaveFields;
+
+			// We should to detect changes for labels only.
+			currentSaveFields = _.mapObject( fields, function( field, key ) {
+
+				return field.label;
+			} );
+			prevSaveFields    = _.mapObject( __private.fields, function( field, key ) {
+
+				return field.label;
+			} );
+
+			// Check if form has any fields and if they have changed labels after previous saving process.
+			if (
+				( _.isEmpty( currentSaveFields ) && _.isEmpty( prevSaveFields ) ) ||
+				( JSON.stringify( currentSaveFields ) === JSON.stringify( prevSaveFields ) )
+			) {
+				return;
+			}
+
+			// Prepare a current form field IDs.
+			var fieldIds = Object.keys( currentSaveFields )
+				.map( function( id ) {
+
+					return parseInt( id, 10 );
+				} );
+
+			// Determine deleted field IDs - it's a diff between previous and current form state.
+			var deleted = Object.keys( prevSaveFields )
+				.map( function( id ) {
+
+					return parseInt( id, 10 );
+				} )
+				.filter( function( id ) {
+
+					return ! fieldIds.includes( id );
+				} );
+
+			// Remove from mapping selects "deleted" fields.
+			for ( var index = 0; index < deleted.length; index++ ) {
+				$( '.wpforms-builder-provider-connection-fields-table .wpforms-builder-provider-connection-field-value option[value="' + deleted[ index ] + '"]', $connections ).remove();
+			}
+
+			var label, $exists;
+			for ( var id in fields ) {
+
+				// Prepare the label.
+				if ( typeof fields[ id ].label !== 'undefined' && fields[ id ].label.toString().trim() !== '' ) {
+					label = wpf.sanitizeHTML( fields[ id ].label.toString().trim() );
+				} else {
+					label = wpforms_builder.field + ' #' + id;
+				}
+
+				// Try to find all select options by value.
+				$exists = $( '.wpforms-builder-provider-connection-fields-table .wpforms-builder-provider-connection-field-value option[value="' + id + '"]', $connections );
+
+				// If no option was found - add a new one for all selects.
+				if ( ! $exists.length ) {
+					$( '.wpforms-builder-provider-connection-fields-table .wpforms-builder-provider-connection-field-value', $connections ).append( $( '<option>', { value: id, text: label } ) );
+					continue;
+				}
+
+				// Update a field label if a previous and current labels not equal.
+				if ( wpf.sanitizeHTML( fields[ id ].label ) !== wpf.sanitizeHTML( prevSaveFields[ id ] ) ) {
+					$exists.text( label );
+				}
+			}
+
+			// If selects for mapping was changed, that whole form state was changed as well.
+			// That's why we need to re-save it.
+			if ( wpf.savedState !== wpf.getFormState( '#wpforms-builder-form' ) ) {
+				wpf.savedState = wpf.getFormState( '#wpforms-builder-form' );
+			}
+
+			// Save form fields state for next saving process.
+			__private.fields = fields;
+
+			app.panelHolder.trigger( 'WPForms.Admin.Builder.Providers.updatedMapSelects', [ $connections, fields ] );
+		},
+
+		/**
+		 * All methods that modify UI of a page.
+		 *
+		 * @since 1.4.7
+		 */
+		ui: {
+
+			/**
+			 * Process UI related actions/events: click, change etc - that are triggered from UI.
+			 *
+			 * @since 1.4.7
+			 */
+			bindActions: function() {
+
+				// CONNECTION: ADD/DELETE.
+				app.panelHolder
+					.on( 'click', '.js-wpforms-builder-provider-account-add', function( e ) {
+
+						e.preventDefault();
+						app.ui.account.setProvider( $( this ).data( 'provider' ) );
+						app.ui.account.add();
+					} )
+					.on( 'click', '.js-wpforms-builder-provider-connection-add', function( e ) {
+
+						e.preventDefault();
+						app.ui.connectionAdd( $( this ).data( 'provider' ) );
+					} )
+					.on( 'click', '.js-wpforms-builder-provider-connection-delete', function( e ) {
+
+						var $btn = $( this );
+
+						e.preventDefault();
+						app.ui.connectionDelete(
+							$btn.closest( '.wpforms-builder-provider' ).data( 'provider' ),
+							$btn.closest( '.wpforms-builder-provider-connection' )
+						);
+					} );
+
+				// CONNECTION: FIELDS - ADD/DELETE.
+				app.panelHolder
+					.on( 'click', '.js-wpforms-builder-provider-connection-fields-add', function( e ) {
+
+						e.preventDefault();
+
+						var $table = $( this ).parents( '.wpforms-builder-provider-connection-fields-table' ),
+							$clone = $table.find( 'tr' ).last().clone( true ),
+							nextID = parseInt( /\[.+]\[.+]\[.+]\[(\d+)]/.exec( $clone.find( '.wpforms-builder-provider-connection-field-name' ).attr( 'name' ) )[ 1 ], 10 ) + 1;
+
+						// Clear the row and increment the counter.
+						$clone.find( '.wpforms-builder-provider-connection-field-name' )
+							.attr( 'name', $clone.find( '.wpforms-builder-provider-connection-field-name' ).attr( 'name' ).replace( /\[fields_meta\]\[(\d+)\]/g, '[fields_meta][' + nextID + ']' ) )
+							.val( '' );
+						$clone.find( '.wpforms-builder-provider-connection-field-value' )
+							.attr( 'name', $clone.find( '.wpforms-builder-provider-connection-field-value' ).attr( 'name' ).replace( /\[fields_meta\]\[(\d+)\]/g, '[fields_meta][' + nextID + ']' ) )
+							.val( '' );
+
+						// Re-enable "delete" button.
+						$clone.find( '.js-wpforms-builder-provider-connection-fields-delete' ).removeClass( 'hidden' );
+
+						// Put it back to the table.
+						$table.find( 'tbody' ).append( $clone.get( 0 ) );
+					} )
+					.on( 'click', '.js-wpforms-builder-provider-connection-fields-delete', function( e ) {
+
+						e.preventDefault();
+
+						var $row = $( this ).parents( '.wpforms-builder-provider-connection-fields-table tr' );
+
+						$row.remove();
+					} );
+
+				// CONNECTION: Generated.
+				$( '#wpforms-panel-providers' ).on( 'connectionGenerated', function( e, data ) {
+
+					wpf.initTooltips();
+
+					// Hide provider default settings screen.
+					$( this )
+						.find( '.wpforms-builder-provider-connection[data-connection_id="' + data.connection.id + '"]' )
+						.closest( '.wpforms-panel-content-section' )
+						.find( '.wpforms-builder-provider-connections-default' )
+						.addClass( 'wpforms-hidden' );
+				} );
+
+				// CONNECTION: Rendered.
+				$( '#wpforms-panel-providers' ).on( 'connectionRendered', function( e, provider, connectionId ) {
+
+					wpf.initTooltips();
+
+					// Some our addons have another arguments for this trigger.
+					// We will fix it asap.
+					if ( typeof connectionId === 'undefined' ) {
+						if ( ! _.isObject( provider ) || ! _.has( provider, 'connection_id' ) ) {
+							return;
+						}
+						connectionId = provider.connection_id;
+					}
+
+					// If connection has mapped select fields - call `wpformsFieldUpdate` trigger.
+					if ( $( this ).find( '.wpforms-builder-provider-connection[data-connection_id="' + connectionId + '"] .wpforms-field-map-select' ).length ) {
+						wpf.fieldUpdate();
+					}
+				} );
+			},
+
+			/**
+			 * Add a connection to a page.
+			 * This is a multi-step process, where the 1st step is always the same for all providers.
+			 *
+			 * @since 1.4.7
+			 * @since 1.5.9 Added a new parameter - provider.
+			 *
+			 * @param {string} provider Current provider slug.
+			 */
+			connectionAdd: function( provider ) {
+
+				$.confirm( {
+					title: false,
+					content: wpforms_builder_providers.prompt_connection.replace( /%type%/g, 'connection' ) +
+						'<input autofocus="" type="text" id="wpforms-builder-provider-connection-name" placeholder="' + wpforms_builder_providers.prompt_placeholder + '">' +
+						'<p class="error">' + wpforms_builder_providers.error_name + '</p>',
+					icon: 'fa fa-info-circle',
+					type: 'blue',
+					buttons: {
+						confirm: {
+							text: wpforms_builder.ok,
+							btnClass: 'btn-confirm',
+							keys: [ 'enter' ],
+							action: function() {
+
+								var name  = this.$content.find( '#wpforms-builder-provider-connection-name' ).val().trim(),
+									error = this.$content.find( '.error' );
+
+								if ( name === '' ) {
+									error.show();
+									return false;
+
+								} else {
+									app.getProviderHolder( provider ).trigger( 'connectionCreate', [ name ] );
+								}
+							},
+						},
+						cancel: {
+							text: wpforms_builder.cancel,
+						},
+					},
+				} );
+
+			},
+
+			/**
+			 * What to do with UI when connection is deleted.
+			 *
+			 * @since 1.4.7
+			 * @since 1.5.9 Added a new parameter - provider.
+			 *
+			 * @param {string} provider    Current provider slug.
+			 * @param {object} $connection jQuery DOM element for a connection.
+			 */
+			connectionDelete: function( provider, $connection ) {
+
+				$.confirm( {
+					title: false,
+					content: wpforms_builder_providers.confirm_connection,
+					icon: 'fa fa-exclamation-circle',
+					type: 'orange',
+					buttons: {
+						confirm: {
+							text: wpforms_builder.ok,
+							btnClass: 'btn-confirm',
+							keys: [ 'enter' ],
+							action: function() {
+
+								// We need this BEFORE removing, as some handlers might need DOM element.
+								app.getProviderHolder( provider ).trigger( 'connectionDelete', [ $connection ] );
+
+								var $section = $connection.closest( '.wpforms-panel-content-section' );
+
+								$connection.fadeOut( 'fast', function() {
+
+									$( this ).remove();
+
+									app.getProviderHolder( provider ).trigger( 'connectionDeleted', [ $connection ] );
+
+									if ( ! $section.find( '.wpforms-builder-provider-connection' ).length ) {
+										$section.find( '.wpforms-builder-provider-connections-default' ).removeClass( 'wpforms-hidden' );
+									}
+								} );
+							},
+						},
+						cancel: {
+							text: wpforms_builder.cancel,
+						},
+					},
+				} );
+			},
+
+			/**
+			 * Account specific methods.
+			 *
+			 * @since 1.4.8
+			 * @since 1.5.8 Added binding `onClose` event.
+			 */
+			account: {
+
+				/**
+				 * Current provider in the context of account creation.
+				 *
+				 * @since 1.4.8
+				 *
+				 * @param {string}
+				 */
+				provider: '',
+
+				/**
+				 * Preserve a list of action to perform when new account creation form is submitted.
+				 * Provider specific.
+				 *
+				 * @since 1.4.8
+				 *
+				 * @param {Array<string, callable>}
+				 */
+				submitHandlers: [],
+
+				/**
+				 * Set the account specific provider.
+				 *
+				 * @since 1.4.8
+				 *
+				 * @param {string} provider Provider slug.
+				 */
+				setProvider: function( provider ) {
+					this.provider = provider;
+				},
+
+				/**
+				 * Add an account for provider.
+				 *
+				 * @since 1.4.8
+				 */
+				add: function() {
+
+					var account = this;
+
+					$.confirm( {
+						title: false,
+						smoothContent: true,
+						content: function() {
+
+							var modal = this;
+
+							return app.ajax
+								.request( account.provider, {
+									data: {
+										task: 'account_template_get',
+									},
+								} )
+								.done( function( response ) {
+
+									if ( ! response.success ) {
+										return;
+									}
+
+									if ( response.data.title.length ) {
+										modal.setTitle( response.data.title );
+									}
+
+									if ( response.data.content.length ) {
+										modal.setContent( response.data.content );
+									}
+
+									if ( response.data.type.length ) {
+										modal.setType( response.data.type );
+									}
+
+									app.getProviderHolder( account.provider ).trigger( 'accountAddModal.content.done', [ modal, account.provider, response ] );
+								} )
+								.fail( function() {
+									app.getProviderHolder( account.provider ).trigger( 'accountAddModal.content.fail', [ modal, account.provider ] );
+								} )
+								.always( function() {
+									app.getProviderHolder( account.provider ).trigger( 'accountAddModal.content.always', [ modal, account.provider ] );
+								} );
+						},
+						contentLoaded: function( data, status, xhr ) {
+
+							var modal = this;
+
+							// Data is already set in content.
+							this.buttons.add.enable();
+							this.buttons.cancel.enable();
+
+							app.getProviderHolder( account.provider ).trigger( 'accountAddModal.contentLoaded', [ modal ] );
+						},
+						// Before the modal is displayed.
+						onOpenBefore: function() {
+
+							var modal = this;
+
+							modal.buttons.add.disable();
+							modal.buttons.cancel.disable();
+							modal.$body.addClass( 'wpforms-providers-account-add-modal' );
+
+							app.getProviderHolder( account.provider ).trigger( 'accountAddModal.onOpenBefore', [ modal ] );
+						},
+						// Before the modal is hidden.
+						onClose: function() {
+
+							// If an account was configured successfully - show a modal with adding a new connection.
+							if ( true === app.ui.account.isConfigured( account.provider ) ) {
+								app.ui.connectionAdd( account.provider );
+							}
+						},
+						icon: 'fa fa-info-circle',
+						type: 'blue',
+						buttons: {
+							add: {
+								text: wpforms_builder.provider_add_new_acc_btn,
+								btnClass: 'btn-confirm',
+								keys: [ 'enter' ],
+								action: function() {
+									var modal = this;
+
+									app.getProviderHolder( account.provider ).trigger( 'accountAddModal.buttons.add.action.before', [ modal ] );
+
+									if (
+										! _.isEmpty( account.provider ) &&
+										typeof account.submitHandlers[ account.provider ] !== 'undefined'
+									) {
+										return account.submitHandlers[ account.provider ]( modal );
+									}
+								},
+							},
+							cancel: {
+								text: wpforms_builder.cancel,
+							},
+						},
+					} );
+				},
+
+				/**
+				 * Register a template for Add New Account modal window.
+				 *
+				 * @since 1.4.8
+				 */
+				registerAddHandler: function( provider, handler ) {
+
+					if ( typeof provider === 'string' && typeof handler === 'function' ) {
+						this.submitHandlers[ provider ] = handler;
+					}
+				},
+
+				/**
+				 * Check whether the defined provider is configured or not.
+				 *
+				 * @since 1.5.8
+				 * @since 1.5.9 Added a new parameter - provider.
+				 *
+				 * @param {string} provider Current provider slug.
+				 *
+				 * @returns {boolean} Account status.
+				 */
+				isConfigured: function( provider ) {
+
+					// Check if `Add New Account` button is hidden.
+					return app.getProviderHolder( provider ).find( '.js-wpforms-builder-provider-account-add' ).hasClass( 'hidden' );
+				},
+			},
+		},
+
+		/**
+		 * Get a jQuery DOM object, that has all the provider-related DOM inside.
+		 *
+		 * @since 1.4.7
+		 *
+		 * @returns {object} jQuery DOM element.
+		 */
+		getProviderHolder: function( provider ) {
+			return $( '#' + provider + '-provider' );
+		},
+	};
+
+	// Provide access to public functions/properties.
+	return app;
+
+}( document, window, jQuery ) );
+
+// Initialize.
+WPForms.Admin.Builder.Providers.init();

wp-content/plugins/wpforms-lite/assets/js/components/admin/builder/setup.js

@@ -0,0 +1,681 @@
+/* global List, wpforms_builder, wpforms_addons, wpf, WPFormsBuilder, wpforms_education */
+
+/**
+ * Form Builder Setup Panel module.
+ *
+ * @since 1.6.8
+ */
+
+'use strict';
+
+var WPForms = window.WPForms || {};
+
+WPForms.Admin = WPForms.Admin || {};
+WPForms.Admin.Builder = WPForms.Admin.Builder || {};
+
+WPForms.Admin.Builder.Setup = WPForms.Admin.Builder.Setup || ( function( document, window, $ ) {
+
+	/**
+	 * Elements holder.
+	 *
+	 * @since 1.6.8
+	 *
+	 * @type {object}
+	 */
+	var el = {};
+
+	/**
+	 * Runtime variables.
+	 *
+	 * @since 1.6.8
+	 *
+	 * @type {object}
+	 */
+	var vars = {};
+
+	/**
+	 * Public functions and properties.
+	 *
+	 * @since 1.6.8
+	 *
+	 * @type {object}
+	 */
+	var app = {
+
+		/**
+		 * Start the engine.
+		 *
+		 * @since 1.6.8
+		 */
+		init: function() {
+
+			$( app.ready );
+
+			// Page load.
+			$( window ).on( 'load', function() {
+
+				// In the case of jQuery 3.+, we need to wait for a ready event first.
+				if ( typeof $.ready.then === 'function' ) {
+					$.ready.then( app.load );
+				} else {
+					app.load();
+				}
+			} );
+		},
+
+		/**
+		 * DOM is fully loaded.
+		 *
+		 * @since 1.6.8
+		 */
+		ready: function() {
+
+			app.setup();
+			app.setPanelsToggleState();
+			app.setupTitleFocus();
+			app.setTriggerBlankLink();
+			app.events();
+
+			el.$builder.trigger( 'wpformsBuilderSetupReady' );
+		},
+
+		/**
+		 * Page load.
+		 *
+		 * @since 1.6.8
+		 */
+		load: function() {
+
+			app.applyTemplateOnRequest();
+		},
+
+		/**
+		 * Setup. Prepare some variables.
+		 *
+		 * @since 1.6.8
+		 */
+		setup: function() {
+
+			// Cache DOM elements.
+			el = {
+				$builder: $( '#wpforms-builder' ),
+				$form: $( '#wpforms-builder-form' ),
+				$formName: $( '#wpforms-setup-name' ),
+				$panel: $( '#wpforms-panel-setup' ),
+				$categories: $( '#wpforms-panel-setup .wpforms-setup-templates-categories' ),
+			};
+
+			// Template list object.
+			vars.templateList = new List( 'wpforms-setup-templates-list', {
+				valueNames: [
+					'wpforms-template-name',
+					'wpforms-template-desc',
+					{
+						name: 'categories',
+						attr: 'data-categories',
+					},
+				],
+			} );
+
+			// Other values.
+			vars.spinner = '<i class="wpforms-loading-spinner wpforms-loading-white wpforms-loading-inline"></i>';
+			vars.formID = el.$form.data( 'id' );
+		},
+
+		/**
+		 * Bind events.
+		 *
+		 * @since 1.6.8
+		 */
+		events: function() {
+
+			el.$panel
+				.on( 'keyup', '#wpforms-setup-template-search', app.searchTemplate )
+				.on( 'click', '.wpforms-setup-templates-categories li', app.selectCategory )
+				.on( 'click', '.wpforms-template-select', app.selectTemplate )
+				.on( 'click', '.wpforms-trigger-blank', app.selectBlankTemplate );
+
+			// Focus on the form title field when displaying setup panel.
+			el.$builder
+				.on( 'wpformsPanelSwitched', app.setupTitleFocus );
+
+			// Sync Setup title and settings title.
+			el.$builder
+				.on( 'input', '#wpforms-panel-field-settings-form_title', app.syncTitle )
+				.on( 'input', '#wpforms-setup-name', app.syncTitle );
+
+		},
+
+		/**
+		 * Set panels toggle buttons state.
+		 *
+		 * @since 1.6.8
+		 */
+		setPanelsToggleState: function() {
+
+			el.$builder
+				.find( '#wpforms-panels-toggle button:not(.active)' )
+				.toggleClass( 'wpforms-disabled', vars.formID === '' );
+		},
+
+		/**
+		 * Set attributes of "blank template" link.
+		 *
+		 * @since 1.6.8
+		 */
+		setTriggerBlankLink: function() {
+
+			el.$builder
+				.find( '.wpforms-trigger-blank' )
+				.attr( {
+					'data-template-name-raw': 'Blank Form',
+					'data-template': 'blank',
+				} );
+		},
+
+		/**
+		 * Force focus on the form title field when switched to the the Setup panel.
+		 *
+		 * @since 1.6.8
+		 *
+		 * @param {object} e    Event object.
+		 * @param {string} view Current view.
+		 */
+		setupTitleFocus: function( e, view ) {
+
+			if ( typeof view === 'undefined' ) {
+				view = wpf.getQueryString( 'view' );
+			}
+
+			if ( view === 'setup' ) {
+				el.$formName.focus();
+			}
+		},
+
+		/**
+		 * Keep Setup title and settings title instances the same.
+		 *
+		 * @since 1.6.8
+		 *
+		 * @param {object} e Event object.
+		 */
+		syncTitle: function( e ) {
+
+			if ( e.target.id === 'wpforms-setup-name' ) {
+				$( '#wpforms-panel-field-settings-form_title' ).val( e.target.value );
+			} else {
+				$( '#wpforms-setup-name' ).val( e.target.value );
+			}
+		},
+
+		/**
+		 * Search template.
+		 *
+		 * @since 1.6.8
+		 *
+		 * @param {object} e Event object.
+		 */
+		searchTemplate: function( e ) {
+
+			vars.templateList.search( $( this ).val() );
+		},
+
+		/**
+		 * Select category.
+		 *
+		 * @since 1.6.8
+		 *
+		 * @param {object} e Event object.
+		 */
+		selectCategory: function( e ) {
+
+			e.preventDefault();
+
+			var $item = $( this ),
+				$active = $item.closest( 'ul' ).find( '.active' ),
+				category = $item.data( 'category' );
+
+			$active.removeClass( 'active' );
+			$item.addClass( 'active' );
+
+			vars.templateList.filter( function( item ) {
+				return category === 'all' || item.values().categories.split( ',' ).indexOf( category ) > -1;
+			} );
+		},
+
+		/**
+		 * Select template.
+		 *
+		 * @since 1.6.8
+		 *
+		 * @param {object} e Event object.
+		 */
+		selectTemplate: function( e ) {
+
+			e.preventDefault();
+
+			var $button      = $( e.target ),
+				template     = $button.data( 'template' ),
+				templateName = $button.data( 'template-name-raw' ),
+				formName     = el.$formName.val() || templateName;
+
+			// Don't do anything for templates that trigger education modal OR addons-modal.
+			if ( $button.hasClass( 'education-modal' ) ) {
+				return;
+			}
+
+			el.$panel.find( '.wpforms-template' ).removeClass( 'active' );
+			$button.closest( '.wpforms-template' ).addClass( 'active' );
+
+			// Save original label.
+			$button.data( 'labelOriginal', $button.html() );
+
+			// Display loading indicator.
+			$button.html( vars.spinner + wpforms_builder.loading );
+
+			app.applyTemplate( formName, template, $button );
+		},
+
+		/**
+		 * Apply template.
+		 *
+		 * The final part of the select template routine.
+		 *
+		 * @since 1.6.9
+		 *
+		 * @param {string} formName Name of the form.
+		 * @param {string} template Template slug.
+		 * @param {jQuery} $button  Use template button object.
+		 */
+		applyTemplate: function( formName, template, $button ) {
+
+			el.$builder.trigger( 'wpformsTemplateSelect', template );
+
+			if ( vars.formID ) {
+
+				// Existing form.
+				app.selectTemplateExistingForm( formName, template, $button );
+
+			} else {
+
+				// Create a new form.
+				app.selectTemplateProcess( formName, template, $button );
+
+			}
+		},
+
+		/**
+		 * Select Blank template.
+		 *
+		 * @since 1.6.8
+		 *
+		 * @param {object} e Event object.
+		 */
+		selectBlankTemplate: function( e ) {
+
+			e.preventDefault();
+
+			var $button  = $( e.target ),
+				formName = el.$formName.val() || wpforms_builder.blank_form,
+				template = 'blank';
+
+			app.applyTemplate( formName, template, $button );
+		},
+
+		/**
+		 * Select template. Existing form.
+		 *
+		 * @since 1.6.8
+		 *
+		 * @param {string} formName Name of the form.
+		 * @param {string} template Template slug.
+		 * @param {jQuery} $button  Use template button object.
+		 */
+		selectTemplateExistingForm: function( formName, template, $button ) {
+
+			$.confirm( {
+				title: wpforms_builder.heads_up,
+				content: wpforms_builder.template_confirm,
+				icon: 'fa fa-exclamation-circle',
+				type: 'orange',
+				buttons: {
+					confirm: {
+						text: wpforms_builder.ok,
+						btnClass: 'btn-confirm',
+						keys: [ 'enter' ],
+						action: function() {
+
+							app.selectTemplateProcess( formName, template, $button );
+						},
+					},
+					cancel: {
+						text: wpforms_builder.cancel,
+						action: function() {
+
+							app.selectTemplateCancel();
+						},
+					},
+				},
+			} );
+		},
+
+		/**
+		 * Select template.
+		 *
+		 * @since 1.6.8
+		 *
+		 * @param {string}  formName  Name of the form.
+		 * @param {string}  template  Template slug.
+		 * @param {jQuery}  $button   Use template button object.
+		 */
+		selectTemplateProcess: function( formName, template, $button ) {
+
+			if ( $button.data( 'addons' ) ) {
+				app.addonsModal( formName, template, $button );
+			} else {
+				app.selectTemplateProcessAjax( formName, template );
+			}
+		},
+
+		/**
+		 * Cancel button click routine.
+		 *
+		 * @since 1.6.8
+		 */
+		selectTemplateCancel: function( ) {
+
+			var $template = el.$panel.find( '.wpforms-template.active' ),
+				$button = $template.find( '.wpforms-template-select' );
+
+			$template.removeClass( 'active' );
+			$button.html( $button.data( 'labelOriginal' ) );
+		},
+
+		/**
+		 * Select template. Create or update form AJAX call.
+		 *
+		 * @since 1.6.8
+		 *
+		 * @param {string}  formName  Name of the form.
+		 * @param {string}  template  Template slug.
+		 */
+		selectTemplateProcessAjax: function( formName, template ) {
+
+			WPFormsBuilder.showLoadingOverlay();
+
+			var data = {
+				title: formName,
+				action: vars.formID ? 'wpforms_update_form_template' : 'wpforms_new_form',
+				template: template,
+				form_id: vars.formID, // eslint-disable-line camelcase
+				nonce: wpforms_builder.nonce,
+			};
+
+			$.post( wpforms_builder.ajax_url, data )
+				.done( function( res ) {
+
+					if ( res.success ) {
+						window.location.href = res.data.redirect;
+					} else {
+						wpf.debug( res );
+						app.selectTemplateProcessError( res.data );
+					}
+				} )
+				.fail( function( xhr, textStatus, e ) {
+
+					wpf.debug( xhr.responseText || textStatus || '' );
+					app.selectTemplateProcessError( '' );
+				} );
+		},
+
+		/**
+		 * Select template AJAX call error modal.
+		 *
+		 * @since 1.6.8
+		 *
+		 * @param {string} error Error message.
+		 */
+		selectTemplateProcessError: function( error ) {
+
+			var content = error && error.length ? '<p>' + error + '</p>' : '';
+
+			$.alert( {
+				title: wpforms_builder.heads_up,
+				content: wpforms_builder.error_select_template + content,
+				icon: 'fa fa-exclamation-circle',
+				type: 'orange',
+				buttons: {
+					confirm: {
+						text: wpforms_builder.ok,
+						btnClass: 'btn-confirm',
+						keys: [ 'enter' ],
+						action: function() {
+
+							app.selectTemplateCancel();
+							WPFormsBuilder.hideLoadingOverlay();
+						},
+					},
+				},
+			} );
+		},
+
+		/**
+		 * Open required addons alert.
+		 *
+		 * @since 1.6.8
+		 *
+		 * @param {string} formName Name of the form.
+		 * @param {string} template Template slug.
+		 * @param {jQuery} $button  Use template button object.
+		 */
+		addonsModal: function( formName, template, $button ) {
+
+			var templateName = $button.data( 'template-name-raw' ),
+				addonsNames = $button.data( 'addons-names' ),
+				addonsSlugs = $button.data( 'addons' ),
+				addons = addonsSlugs.split( ',' ),
+				prompt = addons.length > 1 ? wpforms_builder.template_addons_prompt : wpforms_builder.template_addon_prompt;
+
+			if ( ! addons.length ) {
+				return;
+			}
+
+			$.confirm( {
+				title: wpforms_builder.heads_up,
+				content: prompt
+					.replace( /%template%/g, templateName )
+					.replace( /%addons%/g, addonsNames ),
+				icon: 'fa fa-exclamation-circle',
+				type: 'orange',
+				buttons: {
+					confirm: {
+						text: wpforms_education.install_confirm,
+						btnClass: 'btn-confirm',
+						keys: [ 'enter' ],
+						action: function() {
+
+							this.$$confirm
+								.prop( 'disabled', true )
+								.html( vars.spinner + wpforms_education.activating );
+
+							this.$$cancel
+								.prop( 'disabled', true );
+
+							app.installActivateAddons( addons, this, formName, template );
+
+							return false;
+						},
+					},
+					cancel: {
+						text: wpforms_education.cancel,
+						action: function() {
+
+							app.selectTemplateCancel();
+						},
+					},
+				},
+			} );
+		},
+
+		/**
+		 * Install & Activate addons via AJAX.
+		 *
+		 * @since 1.6.8
+		 *
+		 * @param {Array}  addons        Addons slugs.
+		 * @param {object} previousModal Previous modal instance.
+		 * @param {string} formName      Name of the form.
+		 * @param {string} template      Template slug.
+		 */
+		installActivateAddons: function( addons, previousModal, formName, template ) {
+
+			var ajaxResults = [],
+				ajaxErrors = [],
+				promiseChain = false;
+
+			// Put each of the ajax call promise to the chain.
+			addons.forEach( function( addon ) {
+
+				if ( typeof promiseChain.done !== 'function' ) {
+					promiseChain = app.installActivateAddonAjax( addon );
+
+					return;
+				}
+
+				promiseChain = promiseChain
+					.done( function( value ) {
+
+						ajaxResults.push( value );
+
+						return app.installActivateAddonAjax( addon );
+					} )
+					.fail( function( error ) {
+						ajaxErrors.push( error );
+					} );
+			} );
+
+			promiseChain
+
+				// Latest promise result and error.
+				.done( function( value ) {
+					ajaxResults.push( value );
+				} )
+				.fail( function( error ) {
+					ajaxErrors.push( error );
+				} )
+
+				// Finally, resolve all the promises.
+				.always( function() {
+
+					previousModal.close();
+
+					if (
+						ajaxResults.length > 0 &&
+						wpf.listPluck( ajaxResults, 'success' ).every( Boolean ) && // Check if every `success` is true.
+						ajaxErrors.length === 0
+					) {
+						app.selectTemplateProcessAjax( formName, template );
+					} else {
+						app.installActivateAddonsError( formName, template );
+					}
+				} );
+		},
+
+		/**
+		 * Install & Activate addons error modal.
+		 *
+		 * @since 1.6.8
+		 *
+		 * @param {string} formName Name of the form.
+		 * @param {string} template Template slug.
+		 */
+		installActivateAddonsError: function( formName, template ) {
+
+			$.confirm( {
+				title: wpforms_builder.heads_up,
+				content: wpforms_builder.template_addons_error,
+				icon: 'fa fa-exclamation-circle',
+				type: 'orange',
+				buttons: {
+					confirm: {
+						text: wpforms_builder.use_template,
+						btnClass: 'btn-confirm',
+						keys: [ 'enter' ],
+						action: function() {
+
+							app.selectTemplateProcessAjax( formName, template );
+						},
+					},
+					cancel: {
+						text: wpforms_builder.cancel,
+						action: function() {
+
+							app.selectTemplateCancel();
+						},
+					},
+				},
+			} );
+		},
+
+		/**
+		 * Install & Activate single addon via AJAX.
+		 *
+		 * @since 1.6.8
+		 *
+		 * @param {string} addon Addon slug.
+		 *
+		 * @returns {Promise} jQuery ajax call promise.
+		 */
+		installActivateAddonAjax: function( addon ) {
+
+			var addonData = wpforms_addons[ addon ],
+				deferred = new $.Deferred();
+
+			if (
+				! addonData ||
+				[ 'activate', 'install' ].indexOf( addonData.action ) < 0
+			) {
+				deferred.resolve( false );
+
+				return deferred.promise();
+			}
+
+			return $.post(
+				wpforms_education.ajax_url,
+				{
+					action: 'wpforms_' + addonData.action + '_addon',
+					nonce: wpforms_builder.admin_nonce,
+					plugin: addonData.action === 'activate' ? addon + '/' + addon + '.php' : addonData.url,
+				}
+			);
+		},
+
+		/**
+		 * Initiate template processing for a new form.
+		 *
+		 * @since 1.6.8
+		 */
+		applyTemplateOnRequest: function() {
+
+			var urlParams = new URLSearchParams( window.location.search ),
+				templateId = urlParams.get( 'template_id' );
+
+			if (
+				urlParams.get( 'view' ) !== 'setup' ||
+				urlParams.get( 'form_id' ) ||
+				! templateId
+			) {
+				return;
+			}
+
+			el.$panel.find( '.wpforms-template .wpforms-btn[data-template="' + templateId + '"]' ).click();
+		},
+	};
+
+	// Provide access to public functions/properties.
+	return app;
+
+}( document, window, jQuery ) );
+
+// Initialize.
+WPForms.Admin.Builder.Setup.init();

wp-content/plugins/wpforms-lite/assets/js/components/admin/builder/templates.js

@@ -0,0 +1,107 @@
+/* global WPForms, jQuery, Map, wpforms_builder, wpforms_builder_providers, _ */
+
+var WPForms = window.WPForms || {};
+WPForms.Admin = WPForms.Admin || {};
+WPForms.Admin.Builder = WPForms.Admin.Builder || {};
+
+WPForms.Admin.Builder.Templates = WPForms.Admin.Builder.Templates || (function ( document, window, $ ) {
+	'use strict';
+
+	/**
+	 * Private functions and properties.
+	 *
+	 * @since 1.4.8
+	 *
+	 * @type {Object}
+	 */
+	var __private = {
+
+		/**
+		 * All templating functions for providers are stored here in a Map.
+		 * Key is a template name, value - Underscore.js templating function.
+		 *
+		 * @since 1.4.8
+		 *
+		 * @type {Map}
+		 */
+		previews: new Map()
+	};
+
+	/**
+	 * Public functions and properties.
+	 *
+	 * @since 1.4.8
+	 *
+	 * @type {Object}
+	 */
+	var app = {
+
+		/**
+		 * Start the engine. DOM is not ready yet, use only to init something.
+		 *
+		 * @since 1.4.8
+		 */
+		init: function () {
+
+			// Do that when DOM is ready.
+			$( app.ready );
+		},
+
+		/**
+		 * DOM is fully loaded.
+		 *
+		 * @since 1.4.8
+		 */
+		ready: function () {
+
+			$( '#wpforms-panel-providers' ).trigger( 'WPForms.Admin.Builder.Templates.ready' );
+		},
+
+		/**
+		 * Register and compile all templates.
+		 * All data is saved in a Map.
+		 *
+		 * @since 1.4.8
+		 *
+		 * @param {string[]} templates Array of template names.
+		 */
+		add: function ( templates ) {
+
+			templates.forEach( function ( template ) {
+				if ( typeof template === 'string' ) {
+					__private.previews.set( template, wp.template( template ) );
+				}
+			} );
+		},
+
+		/**
+		 * Get a templating function (to compile later with data).
+		 *
+		 * @since 1.4.8
+		 *
+		 * @param {string} template ID of a template to retrieve from a cache.
+		 *
+		 * @returns {*} A callable that after compiling will always return a string.
+		 */
+		get: function ( template ) {
+
+			var preview = __private.previews.get( template );
+
+			if ( typeof preview !== 'undefined' ) {
+				return preview;
+			}
+
+			return function () {
+				return '';
+			};
+		}
+
+	};
+
+	// Provide access to public functions/properties.
+	return app;
+
+})( document, window, jQuery );
+
+// Initialize.
+WPForms.Admin.Builder.Templates.init();

wp-content/plugins/wpforms-lite/assets/js/components/admin/builder/templates.min.js

@@ -0,0 +1 @@
+var WPForms=window.WPForms||{};WPForms.Admin=WPForms.Admin||{},WPForms.Admin.Builder=WPForms.Admin.Builder||{},WPForms.Admin.Builder.Templates=WPForms.Admin.Builder.Templates||function(e){"use strict";var r={previews:new Map},i={init:function(){e(i.ready)},ready:function(){e("#wpforms-panel-providers").trigger("WPForms.Admin.Builder.Templates.ready")},add:function(e){e.forEach(function(e){"string"==typeof e&&r.previews.set(e,wp.template(e))})},get:function(e){e=r.previews.get(e);return void 0!==e?e:function(){return""}}};return i}((document,window,jQuery)),WPForms.Admin.Builder.Templates.init();