Convert Settings page to interactive tasks

assets/css/page-widgets/suggested-tasks.css

@@ -495,3 +495,119 @@
 		}
 	}
 }
+
+/*------------------------------------*\
+	Page select setting.
+\*------------------------------------*/
+.prpl-pages-item {
+
+	&:has(input[type="radio"][value="yes"]:checked),
+	&:has(input[type="radio"][value="no"]:checked) {
+
+		h3 {
+
+			.icon-exclamation-circle {
+				display: block;
+			}
+
+			.icon-check-circle {
+				display: none;
+			}
+		}
+	}
+
+	&:has(option[value=""]:not(:checked)):has(input[type="radio"][value="yes"]:checked),
+	&:has(input[type="radio"][value="not-applicable"]:checked) {
+
+		h3 {
+
+			.icon-check-circle {
+				display: block;
+			}
+
+			.icon-exclamation-circle {
+				display: none;
+			}
+		}
+	}
+
+	.item-actions,
+	.prpl-select-page {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.remind-button,
+	.assign-button {
+
+		svg {
+			width: 1rem;
+			height: 1rem;
+		}
+	}
+
+	h3 {
+		font-size: 1.15rem;
+		margin: 0;
+
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+
+		.icon {
+			width: 1em;
+			height: 1em;
+			display: none;
+		}
+	}
+
+	p {
+		margin-block-start: 0.5rem;
+		margin-block-end: 1rem;
+	}
+
+	.radios {
+		margin-bottom: 1rem;
+	}
+
+	.prpl-radio-wrapper {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		[data-action="select"],
+		[data-action="create"] {
+			visibility: hidden;
+		}
+
+		&:has(input[type="radio"]:checked) {
+
+			[data-action="select"],
+			[data-action="create"] {
+				visibility: visible;
+			}
+		}
+
+		&:has(input[type="radio"][value="not-applicable"]) {
+			padding-top: 0.25rem;
+
+			/* Add bit height, because we dont have button or select */
+		}
+	}
+}
+
+/*------------------------------------*\
+	Post types selection.
+\*------------------------------------*/
+.prpl-post-types-selection {
+
+	label {
+		display: block;
+		margin-top: 0.75rem;
+
+		&:first-child {
+			margin-top: 0;
+		}
+	}
+}

assets/css/settings-page.css

@@ -211,7 +211,7 @@
 		}
 	}
 
-	.prpl-button {
+	.prpl-button-link {
 		color: var(--prpl-color-gray-7);
 		text-decoration: none;
 		border: 1px solid var(--prpl-color-border);

assets/js/recommendations/set-page.js

@@ -0,0 +1,140 @@
+/* global prplInteractiveTaskFormListener, progressPlanner, prplDocumentReady */
+
+/*
+ * Set page settings (About, Contact, FAQ, etc.)
+ *
+ * Dependencies: progress-planner/recommendations/interactive-task
+ */
+
+// Initialize custom submit handlers for all set-page tasks.
+prplDocumentReady( function () {
+	// Find all set-page popovers.
+	const popovers = document.querySelectorAll(
+		'[id^="prpl-popover-set-page-"]'
+	);
+
+	popovers.forEach( function ( popover ) {
+		// Extract page name from popover ID (e.g., "prpl-popover-set-page-about" -> "about")
+		const popoverId = popover.id;
+		const match = popoverId.match( /prpl-popover-set-page-(.+)/ );
+		if ( ! match ) {
+			return;
+		}
+
+		const pageName = match[ 1 ];
+		const taskId = 'set-page-' + pageName;
+
+		// Skip if already initialized.
+		if ( popover.dataset.setPageInitialized ) {
+			return;
+		}
+		popover.dataset.setPageInitialized = 'true';
+
+		prplInteractiveTaskFormListener.customSubmit( {
+			taskId,
+			popoverId,
+			callback: () => {
+				return new Promise( ( resolve, reject ) => {
+					const pageValue = document.querySelector(
+						'#' +
+							popoverId +
+							' input[name="pages[' +
+							pageName +
+							'][have_page]"]:checked'
+					);
+
+					if ( ! pageValue ) {
+						reject( {
+							success: false,
+							error: new Error( 'Page value not found' ),
+						} );
+						return;
+					}
+
+					const pageId = document.querySelector(
+						'#' +
+							popoverId +
+							' select[name="pages[' +
+							pageName +
+							'][id]"]'
+					);
+
+					fetch( progressPlanner.ajaxUrl, {
+						method: 'POST',
+						headers: {
+							'Content-Type': 'application/x-www-form-urlencoded',
+						},
+						body: new URLSearchParams( {
+							action: 'prpl_interactive_task_submit_set-page',
+							nonce: progressPlanner.nonce,
+							have_page: pageValue.value,
+							id: pageId ? pageId.value : '',
+							task_id: taskId,
+						} ),
+					} )
+						.then( ( response ) => response.json() )
+						.then( ( data ) => {
+							if ( data.success ) {
+								resolve( { response: data, success: true } );
+							} else {
+								reject( { success: false, error: data } );
+							}
+						} )
+						.catch( ( error ) => {
+							reject( { success: false, error } );
+						} );
+				} );
+			},
+		} );
+	} );
+} );
+
+const prplTogglePageSelectorSettingVisibility = function ( page, value ) {
+	const itemRadiosWrapperEl = document.querySelector(
+		`.prpl-pages-item-${ page } .radios`
+	);
+
+	if ( ! itemRadiosWrapperEl ) {
+		return;
+	}
+
+	const selectPageWrapper =
+		itemRadiosWrapperEl.querySelector( '.prpl-select-page' );
+
+	if ( ! selectPageWrapper ) {
+		return;
+	}
+
+	// Show only create button.
+	if ( 'no' === value || 'not-applicable' === value ) {
+		// Hide <select> wrapper.
+		selectPageWrapper.style.visibility = 'hidden';
+	}
+
+	// Show only select and edit button.
+	if ( 'yes' === value ) {
+		// Show <select> wrapper.
+		selectPageWrapper.style.visibility = 'visible';
+	}
+};
+
+prplDocumentReady( function () {
+	document
+		.querySelectorAll( 'input[type="radio"][data-page]' )
+		.forEach( function ( radio ) {
+			const page = radio.getAttribute( 'data-page' ),
+				value = radio.value;
+
+			if ( radio ) {
+				// Show/hide the page selector setting if radio is checked.
+				if ( radio.checked ) {
+					prplTogglePageSelectorSettingVisibility( page, value );
+				}
+
+				// Add listeners for all radio buttons.
+				radio.addEventListener( 'change', function () {
+					prplTogglePageSelectorSettingVisibility( page, value );
+				} );
+			}
+		} );
+} );

assets/js/recommendations/set-valuable-post-types.js

@@ -0,0 +1,49 @@
+/* global prplInteractiveTaskFormListener, progressPlanner */
+
+/*
+ * Set valuable post types.
+ *
+ * Dependencies: progress-planner/recommendations/interactive-task
+ */
+
+prplInteractiveTaskFormListener.customSubmit( {
+	taskId: 'set-valuable-post-types',
+	popoverId: 'prpl-popover-set-valuable-post-types',
+	callback: () => {
+		return new Promise( ( resolve, reject ) => {
+			const postTypes = document.querySelectorAll(
+				'#prpl-popover-set-valuable-post-types input[name="prpl-post-types-include[]"]:checked'
+			);
+
+			if ( ! postTypes.length ) {
+				reject( {
+					success: false,
+					error: new Error( 'No post types selected' ),
+				} );
+				return;
+			}
+
+			const postTypesValues = Array.from( postTypes ).map(
+				( type ) => type.value
+			);
+
+			fetch( progressPlanner.ajaxUrl, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/x-www-form-urlencoded',
+				},
+				body: new URLSearchParams( {
+					action: 'prpl_interactive_task_submit_set-valuable-post-types',
+					nonce: progressPlanner.nonce,
+					'prpl-post-types-include': postTypesValues,
+				} ),
+			} )
+				.then( ( response ) => {
+					resolve( { response, success: true } );
+				} )
+				.catch( ( error ) => {
+					reject( { success: false, error } );
+				} );
+		} );
+	},
+} );