Forms: Add feedback notes support

projects/packages/forms/changelog/add-feedback-comment-support

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Forms: add feedback comments

projects/packages/forms/package.json

@@ -57,6 +57,7 @@
 		"@wordpress/core-data": "7.37.0",
 		"@wordpress/data": "10.37.0",
 		"@wordpress/dataviews": "11.0.0",
+		"@wordpress/dom": "4.37.0",
 		"@wordpress/dom-ready": "4.37.0",
 		"@wordpress/editor": "14.37.0",
 		"@wordpress/element": "6.37.0",

projects/packages/forms/src/contact-form/class-contact-form-endpoint.php

@@ -1503,6 +1503,7 @@ public function get_forms_config( WP_REST_Request $request ) { // phpcs:ignore V
 			'pluginAssetsURL'           => Jetpack_Forms::assets_url(),
 			'siteURL'                   => ( new Status() )->get_site_suffix(),
 			'hasFeedback'               => ( new Forms_Dashboard() )->has_feedback(),
+			'isNotesEnabled'            => Forms_Dashboard::is_notes_enabled(),
 			'isIntegrationsEnabled'     => Jetpack_Forms::is_integrations_enabled(),
 			'isWebhooksEnabled'         => Jetpack_Forms::is_webhooks_enabled(),
 			'showDashboardIntegrations' => Jetpack_Forms::show_dashboard_integrations(),

projects/packages/forms/src/contact-form/class-contact-form-plugin.php

@@ -237,29 +237,34 @@ protected function __construct() {
 
 		add_filter( 'use_block_editor_for_post_type', array( $this, 'use_block_editor_for_post_type' ), 10, 2 );
 
+		// Restrict feedback comments to logged-in users only
+		add_filter( 'comments_open', array( $this, 'restrict_feedback_comments_to_logged_in' ), 10, 2 );
+
 		// custom post type we'll use to keep copies of the feedback items
 		register_post_type(
 			'feedback',
 			array(
-				'labels'                => array(
+				'labels'                 => array(
 					'name'               => __( 'Form Responses', 'jetpack-forms' ),
 					'singular_name'      => __( 'Form Responses', 'jetpack-forms' ),
 					'search_items'       => __( 'Search Responses', 'jetpack-forms' ),
 					'not_found'          => __( 'No responses found', 'jetpack-forms' ),
 					'not_found_in_trash' => __( 'No responses found', 'jetpack-forms' ),
 				),
-				'menu_icon'             => 'dashicons-feedback',
+				'menu_icon'              => 'dashicons-feedback',
 				// when the legacy menu item is retired, we don't want to show the default post type listing
-				'show_ui'               => false,
-				'show_in_menu'          => false,
-				'show_in_admin_bar'     => false,
-				'public'                => false,
-				'rewrite'               => false,
-				'query_var'             => false,
-				'capability_type'       => 'page',
-				'show_in_rest'          => true,
-				'rest_controller_class' => '\Automattic\Jetpack\Forms\ContactForm\Contact_Form_Endpoint',
-				'capabilities'          => array(
+				'show_ui'                => false,
+				'show_in_menu'           => false,
+				'show_in_admin_bar'      => false,
+				'public'                 => false,
+				'rewrite'                => false,
+				'query_var'              => false,
+				'capability_type'        => 'page',
+				'show_in_rest'           => true,
+				'rest_controller_class'  => '\Automattic\Jetpack\Forms\ContactForm\Contact_Form_Endpoint',
+				'supports'               => array( 'comments' ),
+				'default_comment_status' => 'open',
+				'capabilities'           => array(
 					'create_posts'        => 'do_not_allow',
 					'publish_posts'       => 'publish_pages',
 					'edit_posts'          => 'edit_pages',
@@ -271,7 +276,7 @@ protected function __construct() {
 					'delete_post'         => 'delete_page',
 					'read_post'           => 'read_page',
 				),
-				'map_meta_cap'          => true,
+				'map_meta_cap'           => true,
 			)
 		);
 		add_filter( 'wp_untrash_post_status', array( $this, 'untrash_feedback_status_handler' ), 10, 3 );
@@ -3501,6 +3506,29 @@ public function use_block_editor_for_post_type( $can_edit, $post_type ) {
 		return 'feedback' === $post_type ? false : $can_edit;
 	}
 
+	/**
+	 * Restrict comments on feedback posts to logged-in users only.
+	 * Hooks into comment permissions to enforce authentication requirement.
+	 *
+	 * For feedback posts, we override the comment_status field (which we use
+	 * for read/unread tracking) and always allow comments for logged-in users.
+	 *
+	 * @param bool $open    Whether comments are open.
+	 * @param int  $post_id Post ID.
+	 * @return bool Whether comments are open for this post.
+	 */
+	public function restrict_feedback_comments_to_logged_in( $open, $post_id ) {
+		$post = get_post( $post_id );
+
+		if ( ! $post || 'feedback' !== $post->post_type ) {
+			return $open;
+		}
+
+		// For feedback posts, comments are always open for user that can read pages.
+		// regardless of comment_status (which we use for read/unread tracking)
+		return current_user_can( 'edit_pages' );
+	}
+
 	/**
 	 * Kludge method: reverses the output of a standard print_r( $array ).
 	 * Sort of what unserialize does to a serialized object.

projects/packages/forms/src/dashboard/class-dashboard.php

@@ -90,7 +90,7 @@
 				'in_footer'    => true,
 				'textdomain'   => 'jetpack-forms',
 				'enqueue'      => true,
-				'dependencies' => array( 'wp-api-fetch', 'wp-data', 'wp-core-data', 'wp-dom-ready' ),
+				'dependencies' => array( 'wp-api-fetch', 'wp-data', 'wp-core-data', 'wp-dom-ready', 'wp-dom' ),
 			)
 		);
 
@@ -255,4 +255,21 @@
 		$screen = get_current_screen();
 		return $screen && $screen->id === 'jetpack_page_jetpack-forms-admin';
 	}
+
+	/**
+	 * Returns true if form notes feature is enabled.
+	 *
+	 * @return boolean
+	 */
+	public static function is_notes_enabled() {
+		/**
+		* Enable form notes feature in Jetpack Forms .
+		*
+		* @module contact - form
+		* @since $$next_version$$
+		*
+		* @param bool false Should the form notes feature be enabled ? default to false .
+		*/
+		return apply_filters( 'jetpack_forms_notes_enable', false );
+	}
 }

projects/packages/forms/src/dashboard/components/feedback-comments/comment-item.tsx

@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import { DropdownMenu } from '@wordpress/components';
+import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
+import { safeHTML } from '@wordpress/dom';
+import { __, sprintf } from '@wordpress/i18n';
+import { moreVertical, trash } from '@wordpress/icons';
+import type { FeedbackComment } from '../../../types';
+
+export type CommentItemProps = {
+	comment: FeedbackComment;
+	onDelete: ( id: number ) => void;
+	isDeleting: boolean;
+};
+
+/**
+ * Format comment date using WP settings.
+ *
+ * @param dateString - ISO date string from the comment
+ * @return Formatted date/time string
+ */
+function formatCommentDate( dateString: string ) {
+	return sprintf(
+		/* Translators: %1$s is the date, %2$s is the time. */
+		__( '%1$s at %2$s', 'jetpack-forms' ),
+		dateI18n( getDateSettings().formats.date, dateString ),
+		dateI18n( getDateSettings().formats.time, dateString )
+	);
+}
+
+/**
+ * Renders a single feedback comment item, including author, date, content,
+ * and an options menu to delete the comment.
+ *
+ * @param {CommentItemProps}     props            - Component props.
+ * @param {FeedbackComment}      props.comment    - The feedback comment to display.
+ * @param {(id: number) => void} props.onDelete   - Callback invoked when the delete action is selected.
+ * @param {boolean}              props.isDeleting - Whether a delete operation is currently in progress.
+ * @return {JSX.Element} The rendered feedback comment item element.
+ */
+const CommentItem = ( { comment, onDelete, isDeleting }: CommentItemProps ) => {
+	return (
+		<div key={ comment.id } className="jp-forms__feedback-comments-comment">
+			<div className="jp-forms__feedback-comments-comment-meta">
+				<strong className="jp-forms__feedback-comments-comment-author">
+					{ comment.author_name }
+				</strong>
+				<span className="jp-forms__feedback-comments-comment-date">
+					{ formatCommentDate( comment.date ) }
+				</span>
+				<DropdownMenu
+					icon={ moreVertical }
+					label={ __( 'Note options', 'jetpack-forms' ) }
+					controls={ [
+						{
+							title: __( 'Delete', 'jetpack-forms' ),
+							icon: trash,
+							onClick: () => onDelete( comment.id ),
+							isDisabled: isDeleting,
+						},
+					] }
+				/>
+			</div>
+			<div
+				className="jp-forms__feedback-comments-comment-content"
+				// eslint-disable-next-line react/no-danger
+				dangerouslySetInnerHTML={ { __html: safeHTML( comment.content.rendered ) } }
+			/>
+		</div>
+	);
+};
+
+export default CommentItem;