feat: improve onboarding import process

Author: girishpanchal30

includes/admin/feedzy-rss-feeds-admin.php

@@ -1949,6 +1949,10 @@ public function feedzy_load_setup_wizard_page() {
 	 * Enqueue setup wizard required scripts.
 	 */
 	public function feedzy_enqueue_setup_wizard_scripts() {
+		if ( ! did_action( 'wp_enqueue_media' ) ) {
+			wp_enqueue_media();
+		}
+
 		wp_enqueue_style( $this->plugin_name . '_chosen' );
 		wp_enqueue_style( $this->plugin_name . '_smart_wizard', FEEDZY_ABSURL . 'css/smart_wizard_all.min.css', array(), $this->version );
 		wp_enqueue_style( $this->plugin_name . '_setup_wizard', FEEDZY_ABSURL . 'includes/views/css/style-wizard.css', array( $this->plugin_name . '-settings' ), $this->version, 'all' );
@@ -1974,6 +1978,19 @@ public function feedzy_enqueue_setup_wizard_scripts() {
 					'firstButtonText'  => __( 'Create Page', 'feedzy-rss-feeds' ),
 					'secondButtonText' => __( 'Do not create', 'feedzy-rss-feeds' ),
 				),
+				'mediaUploadText'     => array(
+					'iframeTitle'           => __( 'Select image', 'feedzy-rss-feeds' ),
+					'iframeButton'          => __( 'Set default image', 'feedzy-rss-feeds' ),
+					'actionButtonTextOne'   => __( 'Choose image', 'feedzy-rss-feeds' ),
+					'actionButtonTextTwo'   => __( 'Replace image', 'feedzy-rss-feeds' ),
+					'actionButtonTextThree' => __( 'Remove image', 'feedzy-rss-feeds' ),
+				),
+				'dryRun'              => array(
+					'loading' => '<p class="hide-when-loaded">' . __( 'Processing the source and loading the items that will be imported when it runs', 'feedzy-rss-feeds' ) . '...</p>'
+							. '<p><b>' . __( 'Please note that if some of these items have already have been imported in previous runs with the same filters, they may be shown here but will not be imported again.', 'feedzy-rss-feeds' ) . '</b></p>'
+							. '<p class="loading-img hide-when-loaded"><img src="' . includes_url( 'images/wpspin-2x.gif' ) . '"></p><div></div>',
+					'title'   => __( 'Importable Items', 'feedzy-rss-feeds' ),
+				),
 			)
 		);
 	}

includes/admin/feedzy-rss-feeds-import.php

@@ -3945,6 +3945,8 @@ private function wizard_import_feed() {
 
 		$post_type                = ! empty( $_POST['post_type'] ) ? sanitize_text_field( wp_unslash( $_POST['post_type'] ) ) : '';
 		$post_status              = ! empty( $_POST['post_status'] ) ? sanitize_text_field( wp_unslash( $_POST['post_status'] ) ) : '';
+		$fallback_image           = ! empty( $_POST['fallback_image'] ) ? sanitize_text_field( wp_unslash( $_POST['fallback_image'] ) ) : '';
+		$excluded_post_title      = ! empty( $_POST['excluded_post_title'] ) ? sanitize_text_field( wp_unslash( $_POST['excluded_post_title'] ) ) : ''; 
 		$wizard_data              = get_option( 'feedzy_wizard_data', array() );
 		$wizard_data              = ! empty( $wizard_data ) ? $wizard_data : array();
 		$wizard_data['post_type'] = $post_type;
@@ -3988,7 +3990,25 @@ private function wizard_import_feed() {
 			// Update wizard data.
 			$wizard_data['job_id'] = $job_id;
 			update_option( 'feedzy_wizard_data', $wizard_data );
-		
+
+			$filter_conditions = array(
+				'match'      => 'all',
+				'conditions' => array(),
+			);
+
+			if ( ! empty( $excluded_post_title ) ) {
+				$filter_conditions['conditions'] = array(
+					array(
+						'field'    => 'title',
+						'operator' => 'not_contains',
+						'value'    => $excluded_post_title,
+					),
+				);
+			}
+
+			update_post_meta( $job_id, 'filter_conditions', wp_json_encode( $filter_conditions ) );
+			update_post_meta( $job_id, 'default_thumbnail_id', $fallback_image );
+
 			$response = array(
 				'status' => true,
 			);

includes/layouts/setup-wizard.php

@@ -24,6 +24,7 @@
 }
 $published_status = array( 'publish', 'draft' );
 
+add_thickbox();
 ?>
 <div class="feedzy-wizard-wrap feedzy-wrap">
 	<div class="feedzy-header--small">
@@ -177,25 +178,61 @@
 													</select>
 												</div>
 											</div>
+											<div class="form-block">
+												<div class="fz-form-row">
+													<div class="fz-form-col-6">
+														<label class="form-label">
+															<?php esc_html_e( 'Post status', 'feedzy-rss-feeds' ); ?>
+														</label>
+														<div class="mx-320">
+															<select id="feedzy_post_status" class="form-control feedzy-chosen" name="feedzy_meta_data[import_post_status]">
+																<?php
+																foreach ( $published_status as $_status ) {
+																	?>
+																	<option value="<?php echo esc_attr( $_status ); ?>">
+																		<?php echo esc_html( ucfirst( $_status ) ); ?>
+																	</option>
+																	<?php
+																}
+																?>
+															</select>
+														</div>
+													</div>
+													<div class="fz-form-col-6">
+														<label class="form-label">
+															<?php esc_html_e( 'Fallback Image', 'feedzy-rss-feeds' ); ?>
+														</label>
+														<div class="fz-cta-group pb-8">
+															<a 
+																href="javascript:;"
+																class="feedzy-open-media btn btn-outline-primary"
+															>
+															<?php esc_html_e( 'Choose image', 'feedzy-rss-feeds' ); ?>
+															</a>
+															<a href="javascript:;" class="feedzy-remove-media btn btn-outline-primary"><?php esc_html_e( 'Remove', 'feedzy-rss-feeds' ); ?></a>
+															<input type="hidden" name="feedzy_meta_data[default_thumbnail_id]" id="feed-post-default-thumbnail" value="">
+															<div class="help-text pt-8">
+																<?php esc_html_e( 'Optional. Used as fallback for imported posts without images.', 'feedzy-rss-feeds' ); ?>
+															</div>
+														</div>
+													</div>
+												</div>
+											</div>
 											<div class="form-block">
 												<label class="form-label">
-													<?php esc_html_e( 'Post status', 'feedzy-rss-feeds' ); ?>
+													<?php esc_html_e( 'Exclude posts with title not containing', 'feedzy-rss-feeds' ); ?>
 												</label>
-												<div class="mx-320">
-													<select id="feedzy_post_status" class="form-control feedzy-chosen" name="feedzy_meta_data[import_post_status]">
-														<?php
-														foreach ( $published_status as $_status ) {
-															?>
-															<option value="<?php echo esc_attr( $_status ); ?>">
-																<?php echo esc_html( ucfirst( $_status ) ); ?>
-															</option>
-															<?php
-														}
-														?>
-													</select>
+												<div class="fz-form-group">
+													<input type="text" id="feedzy_exclude_title" name="feedzy_meta_data[exclude_post_title]" class="form-control" value="" />
+													<div class="help-text pt-8">
+														<?php esc_html_e( 'Posts will not be imported if their title includes these keywords.', 'feedzy-rss-feeds' ); ?>
+													</div>
 												</div>
 											</div>
 											<div class="form-block">
+												<button class="btn btn-ghost" id="preflight">
+													<?php esc_html_e( 'Preview Import', 'feedzy-rss-feeds' ); ?>
+												</button>
 												<button class="btn btn-primary fz-wizard-feed-import">
 													<?php esc_html_e( 'Create a draft import', 'feedzy-rss-feeds' ); ?> <span class="dashicons dashicons-arrow-right-alt"></span>
 												</button>

includes/views/css/style-wizard.css

@@ -471,3 +471,32 @@
 .feedzy-accordion-item__title h2 {
 	margin-bottom: 0;
 }
+
+#TB_ajaxContent ul {
+	list-style: decimal;
+	margin-left: 20px;
+}
+
+#TB_ajaxContent ul li {
+    padding: 5px !important;
+}
+
+#TB_ajaxContent p.loading-img {
+	text-align: center;
+}
+
+#TB_ajaxContent.loaded p.hide-when-loaded {
+	display: none;
+}
+
+#TB_ajaxContent div.dry_run span {
+	display: block;
+}
+
+#TB_ajaxContent div.dry_run span i.pass {
+	color: #149714;
+}
+
+#TB_ajaxContent div.dry_run span i.fail {
+	color: #ca4a1f;
+}

js/feedzy-setup-wizard.js

@@ -211,6 +211,8 @@ jQuery(function ($) {
 				post_status: $(
 					'select[name="feedzy_meta_data[import_post_status]"]'
 				).val(),
+				fallback_image: $('input[name="feedzy_meta_data[default_thumbnail_id]"]').val(),
+				excluded_post_title: $('input[name="feedzy_meta_data[exclude_post_title]"]').val(),
 				action: 'feedzy',
 				_action: 'wizard_import_feed',
 			},
@@ -359,4 +361,116 @@ jQuery(function ($) {
 
 	// Init chosen selectbox.
 	$('.feedzy-chosen').chosen({ width: '100%' });
+
+	// on upload button click
+	$( 'body' ).on( 'click', '.feedzy-open-media', function( e ) {
+		e.preventDefault();
+		const button = $( this ),
+		wp_media_uploader = wp.media( {
+			title: feedzySetupWizardData.mediaUploadText.iframeTitle,
+			library : {
+				type : 'image'
+			},
+			button: {
+				text: feedzySetupWizardData.mediaUploadText.iframeButton
+			},
+			multiple: true
+		} ).on( 'select', function() { // it also has "open" and "close" events
+			const selectedAttachments = wp_media_uploader.state().get( 'selection' );
+			const countSelected = selectedAttachments?.toJSON()?.length;
+			button.parents( '.fz-form-group' ).find( '.feedzy-media-preview' ).remove();
+			// Display image preview when a single image is selected.
+			if ( 1 === countSelected ) {
+				const attachment = selectedAttachments.first().toJSON();
+				let attachmentUrl = attachment.url;
+				if ( attachment.sizes.thumbnail ) {
+					attachmentUrl = attachment.sizes.thumbnail.url;
+				}
+				if ( $( '.feedzy-media-preview' ).length ) {
+					$( '.feedzy-media-preview' ).find( 'img' ).attr( 'src', attachmentUrl );
+				} else {
+					$( '<div class="fz-form-group mb-20 feedzy-media-preview"><img src="' + attachmentUrl + '"></div>' ).insertBefore( button.parent() );
+				}
+			} else {
+				$(
+				'<div class="fz-form-group mb-20 feedzy-media-preview fz-fallback-images pb-8">' +
+					selectedAttachments
+						?.toJSON()
+						?.map(({ url, sizes }) => {
+							if (sizes?.thumbnail) {
+								url = sizes.thumbnail.url;
+							}
+							return `<img width="150" height="150" src="${url}" class="attachment-thumbnail size-thumbnail" alt="" decoding="async" loading="lazy">`;
+						})
+						.join('') +
+				'</div>'
+				).insertBefore(button.parent());
+			}
+			// Get all selected attachment ids.
+			const ids = selectedAttachments.map( function( image ) {
+				return image.id;
+			} ).join( ',' );
+
+			button.parent().find( '.feedzy-remove-media' ).addClass( 'is-show' );
+			button.parent().find( 'input:hidden' ).val( ids ).trigger( 'change' );
+			$( '.feedzy-open-media' ).html( feedzySetupWizardData.mediaUploadText.actionButtonTextTwo );
+		} );
+
+		wp_media_uploader.on(' open', function() {
+			const selectedVal = button.parent().find( 'input:hidden' ).val();
+			if ( '' === selectedVal ) {
+				return;
+			}
+			const selection = wp_media_uploader.state().get('selection');
+
+			selectedVal.split(',').forEach(function( id ) {
+				const attachment = wp.media.attachment( id );
+				attachment.fetch();
+				selection.add(attachment ? [attachment] : []);
+			});
+		} );
+
+		wp_media_uploader.open();
+	});
+
+	$(document).on( 'click', '.feedzy-remove-media', function( e ) {
+		$(this)
+		e.preventDefault();
+		$('.feedzy-media-preview').remove();
+		$(this).removeClass('is-show');
+
+		// Reset the input.
+		$('input[name="feedzy_meta_data[default_thumbnail_id]"]').val(0);
+		$('.feedzy-open-media').html(feedzySetupWizardData.mediaUploadText.actionButtonTextOne);
+	} );
+
+	$('#preflight').on('click', function (e) {
+		e.preventDefault();
+		const $fields = {};
+		// collect all elements.
+		$('#smartwizard')
+			.find(':input')
+			.each(function (index, element) {
+				if ('undefined' === typeof $(element).attr('name')) {
+					return;
+				}
+				$fields[$(element).attr('name')] = $(element).val();
+			});
+		$fields['feedzy_meta_data[source]'] = $('#wizard_feed_source').val();
+		tb_show(feedzySetupWizardData.dryRun.title, 'TB_inline?');
+		$('#TB_ajaxContent').html(feedzySetupWizardData.dryRun.loading);
+		$.post(
+			ajaxurl,
+			{
+				security: window.feedzySetupWizardData.ajax.security,
+				fields: $.param($fields),
+				action: 'feedzy',
+				_action: 'dry_run',
+			},
+			function(data) {
+				$('#TB_ajaxContent').addClass('loaded');
+				$('#TB_ajaxContent div').html(data.data.output);
+			},
+		);
+	});
 });