- { isLoading && (
-
- );
-};
-
-const FileField = ( { file, onClick } ) => {
- const fileExtension = file.name.split( '.' ).pop().toLowerCase();
- const fileType = file.type.split( '/' )[ 0 ];
-
- const iconMap = {
- image: 'png',
- video: 'mp4',
- audio: 'mp3',
- document: 'pdf',
- application: 'txt',
- };
-
- const extensionMap = {
- pdf: 'pdf',
- png: 'png',
- jpg: 'png',
- jpeg: 'png',
- gif: 'png',
- mp4: 'mp4',
- mp3: 'mp3',
- webm: 'webm',
- doc: 'doc',
- docx: 'doc',
- txt: 'txt',
- ppt: 'ppt',
- pptx: 'ppt',
- xls: 'xls',
- xlsx: 'xls',
- csv: 'xls',
- zip: 'zip',
- sql: 'sql',
- cal: 'cal',
- };
- const iconType = extensionMap[ fileExtension ] || iconMap[ fileType ] || 'txt';
- const iconClass = clsx( 'file-field__icon', 'icon-' + iconType );
- return (
-
-
- ) }
-
-
- { __( 'Loading preview…', 'jetpack-forms' ) }
-
-
- 
-
-
-
-
-
-
-
- );
-};
-
-export type ResponseViewProps = {
- response: FormResponse;
- isLoading: boolean;
- onModalStateChange?: ( toggleOpen: boolean ) => void;
- isMobile?: boolean;
-};
-
-/**
- * Renders the dashboard response view.
- *
- * @param {object} props - The props object.
- * @param {object} props.response - The response item.
- * @param {boolean} props.isLoading - Whether the response is loading.
- * @param {Function} props.onModalStateChange - Function to update the modal state.
- * @return {import('react').JSX.Element} The dashboard response view.
- */
-const ResponseView = ( {
- response,
- isLoading,
- onModalStateChange,
-}: ResponseViewProps ): import('react').JSX.Element => {
- const [ isPreviewModalOpen, setIsPreviewModalOpen ] = useState( false );
- const [ previewFile, setPreviewFile ] = useState< null | object >( null );
- const [ isImageLoading, setIsImageLoading ] = useState( true );
- const [ hasMarkedSelfAsRead, setHasMarkedSelfAsRead ] = useState( 0 );
-
- const { editEntityRecord } = useDispatch( 'core' );
-
- const formsConfig = useFormsConfig();
- const emptyTrashDays = formsConfig?.emptyTrashDays ?? 0;
-
- // When opening a "Mark as spam" link from the email, the ResponseView component is rendered, so we use a hook here to handle it.
- const { isConfirmDialogOpen, onConfirmMarkAsSpam, onCancelMarkAsSpam } = useMarkAsSpam(
- response as FormResponse
- );
-
- const ref = useRef( undefined );
-
- const openFilePreview = useCallback(
- file => {
- setIsImageLoading( true );
- setPreviewFile( file );
- setIsPreviewModalOpen( true );
- if ( onModalStateChange ) {
- onModalStateChange( true );
- }
- },
- [ onModalStateChange, setPreviewFile, setIsPreviewModalOpen ]
- );
-
- const handleFilePreview = useCallback(
- file => openFilePreview.bind( null, file ),
- [ openFilePreview ]
- );
-
- const closePreviewModal = useCallback( () => {
- setIsPreviewModalOpen( false );
- setIsImageLoading( true );
- // Notify parent component that this modal is closed
- if ( onModalStateChange ) {
- onModalStateChange( false );
- }
- }, [ onModalStateChange, setIsPreviewModalOpen, setIsImageLoading ] );
-
- const renderFieldValue = value => {
- if ( isImageSelectField( value ) ) {
- return (
-
-
-
-
-
- { file.is_previewable && (
-
- ) }
- { ! file.is_previewable && (
-
- { decodeEntities( file.name ) }
-
- ) }
-
-
- { sprintf(
- /* translators: %1$s size of the file and %2$s is the file extension */
- __( '%1$s, %2$s', 'jetpack-forms' ),
- file.size,
- fileExtension.toUpperCase()
- ) }
-
-
- { ( value.choices?.length ?? 0 ) === 0 && '-' }
- { ( value.choices?.length ?? 0 ) > 0 && (
- <>
- { __( 'Spam responses are moved to trash after 15 days.', 'jetpack-forms' ) }
- ) }
- { response.status === 'trash' && (
-
- { sprintf(
- /* translators: %d number of days. */
- _n(
- 'Items in trash are permanently deleted after %d day.',
- 'Items in trash are permanently deleted after %d days.',
- emptyTrashDays,
- 'jetpack-forms'
- ),
- emptyTrashDays
- ) }
-
- ) }
-
- );
-};
-
-export default ResponseView;
+export { ResponseViewBody };
export { ResponseMobileView };
+export { SingleResponseView };
diff --git a/projects/packages/forms/src/dashboard/components/response-view/mobile.tsx b/projects/packages/forms/src/dashboard/components/response-view/mobile.tsx
index 2c7cd448a8aa8..20f36c03503a1 100644
--- a/projects/packages/forms/src/dashboard/components/response-view/mobile.tsx
+++ b/projects/packages/forms/src/dashboard/components/response-view/mobile.tsx
@@ -2,53 +2,44 @@ import {
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalHStack as HStack,
} from '@wordpress/components';
-import { useState, useMemo, useCallback } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useState, useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
-import { getItemId } from '../../inbox/utils';
+import { FormResponse } from '../../../types';
+import useResponseNavigation from '../../hooks/use-response-navigation';
import ResponseActions from '../response-actions';
import ResponseNavigation from '../response-navigation';
-import ResponseView from './index';
+import { ResponseViewBody } from './index';
/**
* Component wrapper for InboxResponse in DataViews modal
* Renders response with navigation in modal header for mobile view
- * @param {object} props - The props object.
- * @param {Array} props.data - The responses list array.
- * @param {object} props.response - The response item.
- * @param {Function} props.closeModal - Function to close the DataViews modal.
+ * @param {object} props - The props object.
+ * @param {FormResponse} props.response - The response item.
+ * @param {Function} props.closeModal - Function to close the DataViews modal.
* @return {import('react').JSX.Element} The DataViews component.
*/
-const ResponseMobileView = ( { response, data, closeModal } ) => {
- const [ currentResponse, setCurrentResponse ] = useState( response );
+const ResponseMobileView = ( { response, closeModal } ) => {
+ const [ currentResponseId, setCurrentResponseId ] = useState( response.id );
- const currentIndex = useMemo(
- () =>
- currentResponse && data
- ? data.findIndex( item => getItemId( item ) === getItemId( currentResponse ) )
- : -1,
- [ currentResponse, data ]
+ const responseRecord = useSelect(
+ select =>
+ select( coreStore ).getEditedEntityRecord(
+ 'postType',
+ 'feedback',
+ currentResponseId
+ ) as unknown as FormResponse,
+ [ currentResponseId ]
);
+ // Use the navigation hook
+ const navigation = useResponseNavigation( {
+ onChangeSelection: null,
+ record: responseRecord,
+ setRecord: record => setCurrentResponseId( record.id ),
+ } );
- const hasNext = currentIndex >= 0 && currentIndex < ( data?.length ?? 0 ) - 1;
- const hasPrevious = currentIndex > 0;
-
- const handleNext = useCallback( () => {
- if ( hasNext && data && currentIndex >= 0 ) {
- const nextItem = data[ currentIndex + 1 ];
- if ( nextItem ) {
- setCurrentResponse( nextItem );
- }
- }
- }, [ hasNext, data, currentIndex ] );
-
- const handlePrevious = useCallback( () => {
- if ( hasPrevious && data && currentIndex >= 0 ) {
- const prevItem = data[ currentIndex - 1 ];
- if ( prevItem ) {
- setCurrentResponse( prevItem );
- }
- }
- }, [ hasPrevious, data, currentIndex ] );
+ const { hasNext, hasPrevious, handleNext, handlePrevious } = navigation;
// Action complete handler is a bit different on mobile view.
// We don't close the modal if the response hasn't changed status (read/unread toggle)
@@ -56,7 +47,6 @@ const ResponseMobileView = ( { response, data, closeModal } ) => {
const handleActionComplete = useCallback(
actionedResponse => {
if ( actionedResponse && actionedResponse.status === response.status ) {
- setCurrentResponse( actionedResponse );
return;
}
closeModal?.();
@@ -79,7 +69,7 @@ const ResponseMobileView = ( { response, data, closeModal } ) => {
justify="space-between"
className="jp-forms__inbox__response-mobile__header-actions"
>
- {
/>
-
);
};
diff --git a/projects/packages/forms/src/dashboard/components/response-view/single.tsx b/projects/packages/forms/src/dashboard/components/response-view/single.tsx
new file mode 100644
index 0000000000000..41515efe68ef9
--- /dev/null
+++ b/projects/packages/forms/src/dashboard/components/response-view/single.tsx
@@ -0,0 +1,123 @@
+import {
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalHStack as HStack,
+ Modal,
+} from '@wordpress/components';
+import { useCallback, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import useResponseNavigation from '../../hooks/use-response-navigation';
+import ResponseActions from '../response-actions';
+import ResponseNavigation from '../response-navigation';
+import { ResponseViewBody } from './index';
+
+/**
+ * Single response component for dataviews.
+ * It might return a modal when viewport is resized to mobile.
+ * @param {object} props - The props object.
+ * @param {FormResponse} props.sidePanelItem - The side panel item.
+ * @param {Function} props.setSidePanelItem - The function to set the side panel item.
+ * @param {boolean} props.isLoadingData - Whether the data is loading.
+ * @param {boolean} props.isMobile - Whether the view is mobile.
+ * @param {Function} props.onChangeSelection - The function to change the selection.
+ * @param {string[]} props.selection - The selection.
+ * @return {import('react').JSX.Element} The single response component.
+ */
+const SingleResponseView = ( {
+ sidePanelItem,
+ setSidePanelItem,
+ isLoadingData,
+ isMobile,
+ onChangeSelection,
+ selection,
+} ) => {
+ const [ isChildModalOpen, setIsChildModalOpen ] = useState( false );
+
+ const onRequestClose = useCallback( () => {
+ if ( ! isChildModalOpen ) {
+ onChangeSelection?.( [] );
+ }
+ }, [ onChangeSelection, isChildModalOpen ] );
+
+ const handleModalStateChange = useCallback(
+ isOpen => {
+ setIsChildModalOpen( isOpen );
+ },
+ [ setIsChildModalOpen ]
+ );
+
+ const handleActionComplete = useCallback(
+ actionedItem => {
+ // Remove only the actioned item from selection, keep the rest
+ if ( actionedItem?.id && selection ) {
+ const newSelection = selection.filter( id => id !== actionedItem.id );
+ onChangeSelection?.( newSelection );
+ }
+ // if the action is on current response and hasn't changed status,
+ // don't close the modal but update the side panel item
+ if ( actionedItem?.id === sidePanelItem.id && actionedItem.status === sidePanelItem.status ) {
+ setSidePanelItem( actionedItem );
+ }
+ },
+ [ onChangeSelection, selection, sidePanelItem, setSidePanelItem ]
+ );
+
+ // Use the navigation hook
+ const navigation = useResponseNavigation( {
+ onChangeSelection,
+ record: sidePanelItem,
+ setRecord: setSidePanelItem,
+ } );
+
+ if ( ! sidePanelItem ) {
+ return null;
+ }
+
+ // Navigation props to pass to InboxResponse and ResponseNavigation
+ const navigationProps = {
+ hasNext: navigation.hasNext,
+ hasPrevious: navigation.hasPrevious,
+ onNext: navigation.handleNext,
+ onPrevious: navigation.handlePrevious,
+ };
+
+ const contents = (
+
- { value.choices
- .map( choice => {
- let transformedValue = choice.selected;
-
- if ( choice.label != null && choice.label !== '' ) {
- transformedValue += ' - ' + choice.label;
- }
-
- return transformedValue;
- } )
- .join( ', ' ) }
-
-
- { value.choices.map( choice => {
- return (
-
- );
- } )
- : '-' }
-
- );
- }
-
- // Emails
- const emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
- if ( emailRegEx.test( value ) ) {
- return (
-
- { value }
-
- );
- }
-
- // Phone numbers
- if ( isLikelyPhoneNumber( value ) ) {
- return (
-
- { value }
-
- );
- }
-
- return value;
- };
-
- useEffect( () => {
- if ( ! ref.current ) {
- return;
- }
-
- ref.current.scrollTop = 0;
- }, [ response ] );
-
- // Mark feedback as read when viewing
- useEffect( () => {
- if ( ! response || ! response.id || ! response.is_unread ) {
- setHasMarkedSelfAsRead( response.id );
- return;
- }
- if ( hasMarkedSelfAsRead === response.id ) {
- return;
- }
-
- setHasMarkedSelfAsRead( response.id );
-
- // Immediately update entity in store
- editEntityRecord( 'postType', 'feedback', response.id, {
- is_unread: false,
- } );
-
- // Immediately update menu counters optimistically to avoid delays
- if ( response.status === 'publish' ) {
- updateMenuCounterOptimistically( -1 );
- }
-
- // Then update on server
- apiFetch( {
- path: `/wp/v2/feedback/${ response.id }/read`,
- method: 'POST',
- data: { is_unread: false },
- } )
- .then( ( { count } ) => {
- // Update menu counter with accurate count from server
- updateMenuCounter( count );
- } )
- .catch( () => {
- // Revert the change in the store
- editEntityRecord( 'postType', 'feedback', response.id, {
- is_unread: true,
- } );
-
- // Revert the change in the sidebar
- if ( response.status === 'publish' ) {
- updateMenuCounterOptimistically( 1 );
- }
- } );
- }, [ response, editEntityRecord, hasMarkedSelfAsRead ] );
-
- const handelImageLoaded = useCallback( () => {
- return setIsImageLoading( false );
- }, [ setIsImageLoading ] );
-
- if ( ! isLoading && ! response ) {
- return null;
- }
-
- if ( isPreviewModalOpen && ! onModalStateChange ) {
- return (
-
-
-
- ) }
-
-
- { __( 'Are you sure you want to mark this response as spam?', 'jetpack-forms' ) }
-
-
- { response.status === 'spam' && (
-
-
- { response.author_email && (
-
-
-
-
-
- { displayName }
- { response.author_email && displayName !== response.author_email && ( - - ) } -
-
-
-
-
- { __( 'Date:', 'jetpack-forms' ) }
-
-
- { sprintf(
- /* Translators: %1$s is the date, %2$s is the time. */
- __( '%1$s at %2$s', 'jetpack-forms' ),
- dateI18n( getDateSettings().formats.date, response.date ),
- dateI18n( getDateSettings().formats.time, response.date )
- ) }
-
-
-
-
- { __( 'Source:', 'jetpack-forms' ) }
-
-
-
- { decodeEntities( response.entry_title ) || getPath( response ) }
-
-
-
-
-
- { __( 'IP address:', 'jetpack-forms' ) }
-
- { response.ip }
-
-
- { Object.entries( response.fields ).map( ( [ key, value ] ) => (
-
-
- { isPreviewModalOpen && previewFile && onModalStateChange && (
-
-
- ) ) }
-
- { key.endsWith( '?' ) ? key : `${ key }:` }
-
-
- { renderFieldValue( value ) }
-
-
+
+
+
+
+
+
+ { contents }
+
+ );
+ }
+
+ return (
+
-
-
-
-
-
-
- { contents }
-
- );
- }
-
- return (
-