view on click for mobile viewport

Author: dhasilva

projects/packages/forms/src/dashboard/inbox/dataviews/index.js

@@ -6,14 +6,16 @@ import {
 	ExternalLink,
 	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 	__experimentalHStack as HStack,
+	Modal,
 } from '@wordpress/components';
-import { useResizeObserver } from '@wordpress/compose';
+import { useResizeObserver, useViewportMatch } from '@wordpress/compose';
 import { DataViews } from '@wordpress/dataviews/wp';
 import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
 import { useCallback, useMemo, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import { Icon, globe } from '@wordpress/icons';
+import clsx from 'clsx';
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router';
 /**
@@ -89,6 +91,30 @@ export default function InboxView() {
 	);
 	const isMobile = containerWidth <= MOBILE_BREAKPOINT;
 	const selectedResponses = searchParams.get( 'r' );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const [ isResponseModalOpen, setIsResponseModalOpen ] = useState( false );
+	const [ responseModal, setResponseModal ] = useState( null );
+
+	const closeResponseModal = useCallback( () => {
+		setIsResponseModalOpen( false );
+		setResponseModal( null );
+	}, [ setIsResponseModalOpen, setResponseModal ] );
+
+	const openResponseModal = useCallback(
+		item => {
+			const content = <ResponseMobileView response={ item } closeModal={ closeResponseModal } />;
+
+			setResponseModal( content );
+			setIsResponseModalOpen( true );
+		},
+		[ setIsResponseModalOpen, closeResponseModal, setResponseModal ]
+	);
+
+	useEffect( () => {
+		if ( ! isMobileViewport ) {
+			closeResponseModal();
+		}
+	}, [ isMobileViewport, closeResponseModal ] );
 
 	useEffect( () => {
 		return setupSidebarWidthObserver();
@@ -228,8 +254,22 @@ export default function InboxView() {
 						item.author_name || item.author_email || item.author_url || item.ip
 					);
 					const defaultImage = item.author_name || item.author_email ? 'initials' : 'mp';
+
+					const handleClick = isMobileViewport ? () => openResponseModal( item ) : undefined;
+
 					return (
-						<div className="jp-forms__inbox__author-field">
+						<div
+							className={ clsx(
+								'jp-forms__inbox__author-field',
+								isMobileViewport && 'jp-forms__inbox__author-field--mobile'
+							) }
+							{ ...( isMobileViewport && {
+								onClick: handleClick,
+								onKeyDown: () => {},
+								role: 'button',
+								tabIndex: 0,
+							} ) }
+						>
 							{ item.is_unread && (
 								<span
 									className="jp-forms__inbox__unread-indicator"
@@ -328,7 +368,13 @@ export default function InboxView() {
 				},
 			},
 		],
-		[ filterOptions, dateSettings.formats.date ]
+		[
+			filterOptions?.date,
+			filterOptions?.source,
+			isMobileViewport,
+			openResponseModal,
+			dateSettings.formats.date,
+		]
 	);
 
 	const actions = useMemo( () => {
@@ -421,6 +467,15 @@ export default function InboxView() {
 						/>
 					}
 				/>
+				{ isResponseModalOpen && (
+					<Modal
+						title={ __( 'Response', 'jetpack-forms' ) }
+						__experimentalHideHeader={ true }
+						onRequestClose={ closeResponseModal }
+					>
+						{ responseModal }
+					</Modal>
+				) }
 			</div>
 			<SingleResponseView
 				sidePanelItem={ selection.length && sidePanelItem }

projects/packages/forms/src/dashboard/inbox/style.scss

@@ -350,6 +350,10 @@
 		display: flex;
 		align-items: center;
 		gap: 12px;
+
+		&--mobile {
+			text-decoration: underline;
+		}
 	}
 
 	.jp-forms__inbox__unread-indicator {