feat: adds actions support in custom fields (#1041)

Co-authored-by: Hardeep Asrani <[email protected]>

Author: girishpanchal30

css/settings.css

@@ -2027,7 +2027,8 @@ li.draggable-item .components-panel__body-toggle.components-button{
 .fz-action-control .fz-hide-icon .components-panel__arrow {
 	display: none;
 }
-.tagify__filter-icon{
+.tagify__filter-icon,
+.fz-action-icon {
 	width: 19px;
 	height: 19px;
 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14.5 13.8002C13.4 13.8002 12.4 14.5002 12.1 15.6002H4V17.0002H12.1C12.4 18.0002 13.4 18.8002 14.5 18.8002C15.6 18.8002 16.6 18.1002 16.9 17.0002H20V15.5002H16.9C16.6 14.5002 15.6 13.8002 14.5 13.8002ZM11.9 7.0002C11.6 6.0002 10.6 5.2002 9.5 5.2002C8.4 5.2002 7.4 6.0002 7.1 7.0002H4V8.5002H7.1C7.4 9.5002 8.4 10.3002 9.5 10.3002C10.6 10.3002 11.6 9.6002 11.9 8.5002H20V7.0002H11.9Z' fill='%23050505'/%3E%3C/svg%3E");
@@ -2488,6 +2489,25 @@ li.draggable-item .components-panel__body-toggle.components-button{
 .fz-panel-tab .fz-panel-tab__content .components-base-control .components-datetime__timezone {
 	display: inline-block;
 }
+
+.fz-form-group .custom_fields .fz-form-group {
+	position: relative;
+}
+.fz-form-group .custom_fields .fz-form-group .fz-action-icon {
+	position: absolute;
+	top: 50%;
+	right: 2px;
+	cursor: pointer;
+	transform: translateY(-50%);
+	width: 40px;
+	height: 40px;
+	display: grid;
+	place-items: center;
+}
+.fz-form-group .custom_fields .fz-form-group .fz-action-icon.disabled {
+	pointer-events: none;
+	opacity: 0.5;
+}
 .fz-prompt-button {
 	gap: 7px;
 	display: flex;

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

@@ -597,5 +597,15 @@ function() {
 			}
 			return $dom->saveHTML();
 		}
+
+		/**
+		 * Get custom field value.
+		 */
+		private function custom_field() {
+			if ( ! empty( $this->result ) ) {
+				return $this->result;
+			}
+			return $this->default_value;
+		}
 	}
 }

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

@@ -428,8 +428,9 @@ public function feedzy_import_feed_options() {
 		// maybe more options are required from pro?
 		$pro_options = apply_filters( 'feedzy_metabox_options', array(), $post->ID );
 
-		$import_custom_fields = get_post_meta( $post->ID, 'imports_custom_fields', true );
-		$import_feed_limit    = get_post_meta( $post->ID, 'import_feed_limit', true );
+		$import_custom_fields  = get_post_meta( $post->ID, 'imports_custom_fields', true );
+		$custom_fields_actions = get_post_meta( $post->ID, 'imports_custom_field_actions', true );
+		$import_feed_limit     = get_post_meta( $post->ID, 'import_feed_limit', true );
 		if ( empty( $import_feed_limit ) ) {
 			$import_feed_limit = 10;
 		}
@@ -1991,7 +1992,11 @@ function( $term ) {
 				}
 			}
 
-			do_action( 'feedzy_import_extra', $job, $item_obj, $new_post_id, $import_errors, $import_info );
+			do_action( 'feedzy_import_extra', $job, $item_obj, $new_post_id, $import_errors, $import_info, array(
+				'translation_lang' => $import_translation_lang,
+				'language_code'    => $language_code,
+				'item'             => $item,
+			) );
 
 			if ( ! empty( $import_featured_img ) && 'attachment' !== $import_post_type ) {
 				$image_source_url = '';

includes/views/import-metabox-edit.php

@@ -572,6 +572,8 @@ class="fz-switch-toggle" type="checkbox" value="yes"
 															</div>
 															<div class="fz-form-group">
 																<input type="text" name="custom_vars_value[]" placeholder="<?php esc_html_e( 'Value', 'feedzy-rss-feeds' ); ?>" class="form-control" value="<?php echo esc_attr( $custom_field_value ); ?>" />
+																<span class="fz-action-icon<?php echo empty( $custom_field_value ) ? ' disabled' : ''; ?>"></span>
+																<input type="hidden" name="custom_vars_action[]" value="<?php echo isset( $custom_fields_actions[ $custom_field_key ] ) ? esc_attr( $custom_fields_actions[ $custom_field_key ] ) : ''; ?>">
 															</div>
 															<div class="remove-group">
 																<button type="button" class="btn-remove-fields">

includes/views/js/import-metabox-edit.js

@@ -96,6 +96,7 @@
 		$(".custom_fields").append(html_row);
 		$(".btn.btn-remove-fields").on("click", remove_row);
 		initCustomFieldAutoComplete();
+		document.dispatchEvent(new Event('feedzy_new_row_added'));
 		return false;
 	}
 
@@ -659,7 +660,19 @@
 				tagList.find( 'input:text' ).val( '' );
 			}
 		} );
-		// Append import button.
+
+		$(document).on( 'input', 'input[name="custom_vars_value[]"]', function () {
+			$(this)
+			.next('.fz-action-icon')
+			.toggleClass( 'disabled', $(this).val() === '' );
+
+			$(this)
+			.parent( '.fz-form-group' )
+			.find( 'input:hidden' )
+			.attr( 'disabled', $(this).val() === '' );
+		} );
+
+    // Append import button.
 		$( feedzy.i10n.importButton ).insertAfter( $( '.page-title-action', document ) );
 		$( $( '.page-title-action', document ) ).wrapAll( '<div class="fz-header-action"></div>' );
 

js/ActionPopup/index.js

@@ -41,6 +41,7 @@ const ActionModal = () => {
 	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 ) => {
@@ -111,6 +112,7 @@ const ActionModal = () => {
 		setDisabledAddNew(false);
 		setAction([]);
 		setLoading(false);
+		setcurrentCustomRow(null);
 	};
 	const hideIntroMessage = ( status ) => setHideMeg( status );
 	const removeAction = ( index ) => {
@@ -195,6 +197,13 @@ const ActionModal = () => {
 			setAction([]);
 			_action = encodeURIComponent( JSON.stringify( [ { id: '', tag: shortCode, data: {} } ] ) );
 		}
+		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');
 
@@ -241,6 +250,38 @@ const ActionModal = () => {
 		} );
 	} );
 
+	// Init custom field actions.
+	const initCustomFieldActions = () => {
+		const customFieldElement = document.querySelectorAll( '.custom_fields .fz-action-icon' ) || [];
+		if ( customFieldElement.length === 0 ) {
+			return;
+		}
+		customFieldElement.forEach( actionButton => {
+			actionButton.addEventListener( 'click', ( event ) => {
+				event.preventDefault();
+				if ( userRef.current ) {
+					if ( ! userRef.current.attributes.meta.feedzy_hide_action_message ) {
+						hideActionIntroMessage();
+					} else {
+						hideIntroMessage(true);
+					}
+				}
+
+				let editAction = event?.target?.nextElementSibling?.value || '';
+				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 );
+				openModal();
+			} );
+		} );
+	};
+	// Attach click event to the newly added custom field row.
+	document.addEventListener( 'feedzy_new_row_added', initCustomFieldActions );
+
 	const initEditHooks = () => {
 		if ( isLoading ) {
 			return;
@@ -249,6 +290,7 @@ const ActionModal = () => {
 		setTimeout( function() {
 			const editActionElement = document.querySelectorAll( '.fz-content-action .tagify__filter-icon' ) || [];
 			if ( editActionElement.length === 0 ) {
+				initCustomFieldActions();
 				initEditHooks();
 				return;
 			}
@@ -284,6 +326,7 @@ const ActionModal = () => {
 					} );
 				} );
 			}
+			initCustomFieldActions();
 		}, 500 );
 	};
 	initEditHooks();