+
{},
+ role: 'button',
+ tabIndex: 0,
+ } ) }
+ >
{ item.is_unread && (
{
- const _actions = [
- markAsReadAction,
- markAsUnreadAction,
- markAsSpamAction,
- markAsNotSpamAction,
- moveToTrashAction,
- editFormAction,
- restoreAction,
- deleteAction,
- ];
- if ( isMobile ) {
- _actions.unshift( {
- ...viewAction,
- RenderModal: ( { items, closeModal } ) => {
- jetpackAnalytics.tracks.recordEvent( 'jetpack_forms_inbox_action_click', {
- action: 'view-response',
- multiple: items.length > 1,
- } );
- const [ item ] = items;
- return ;
- },
- hideModalHeader: true,
- } );
- } else {
- _actions.unshift( {
- ...viewAction,
- callback( items ) {
- jetpackAnalytics.tracks.recordEvent( 'jetpack_forms_inbox_action_click', {
- action: 'view-response',
- multiple: items.length > 1,
- } );
- const [ item ] = items;
- const selectedId = item.id.toString();
- const selectionWithoutSelectedId = selection.filter( id => id !== selectedId );
- onChangeSelection( [ ...selectionWithoutSelectedId, selectedId ] );
- },
- } );
+ const mobileViewAction = {
+ ...viewAction,
+ RenderModal: ( { items, closeModal } ) => {
+ jetpackAnalytics.tracks.recordEvent( 'jetpack_forms_inbox_action_click', {
+ action: 'view-response',
+ multiple: items.length > 1,
+ } );
+
+ const [ item ] = items;
+
+ return ;
+ },
+ hideModalHeader: true,
+ };
+
+ const desktopViewAction = {
+ ...viewAction,
+ callback( items ) {
+ jetpackAnalytics.tracks.recordEvent( 'jetpack_forms_inbox_action_click', {
+ action: 'view-response',
+ multiple: items.length > 1,
+ } );
+
+ const [ item ] = items;
+ const selectedId = item.id.toString();
+ const selectionWithoutSelectedId = selection.filter( id => id !== selectedId );
+
+ onChangeSelection( [ ...selectionWithoutSelectedId, selectedId ] );
+ },
+ };
+
+ const viewResponseAction = isMobile ? mobileViewAction : desktopViewAction;
+
+ const primaryActions = [ viewResponseAction ];
+ const secondaryActions = [ markAsUnreadAction, editFormAction ];
+
+ switch ( statusFilter ) {
+ case 'trash':
+ return [ ...primaryActions, restoreAction, deleteAction, ...secondaryActions ];
+ case 'spam':
+ return [ ...primaryActions, markAsNotSpamAction, moveToTrashAction, ...secondaryActions ];
+ default:
+ return [
+ ...primaryActions,
+ markAsReadAction,
+ markAsSpamAction,
+ moveToTrashAction,
+ ...secondaryActions,
+ ];
}
- return _actions;
- }, [ isMobile, onChangeSelection, selection ] );
+ }, [ isMobile, onChangeSelection, selection, statusFilter ] );
const resetPage = useCallback( () => {
view.page = 1;
@@ -410,6 +467,15 @@ export default function InboxView() {
/>
}
/>
+ { isResponseModalOpen && (
+
+ { responseModal }
+
+ ) }
{
+ // Notices store actions
+ createSuccessNotice: (
+ message: string,
+ options: { type?: string; id?: string; actions?: { label: string; onClick: () => void }[] }
+ ) => void;
+ createErrorNotice: (
+ message: string,
+ options: { type?: string; id?: string; actions?: { label: string; onClick: () => void }[] }
+ ) => void;
+
+ // Core store actions
+ saveEntityRecord: (
+ kind: string,
+ name: string,
+ record: Record< string, unknown >
+ ) => Promise< void >;
+ deleteEntityRecord: (
+ kind: string,
+ name: string,
+ recordId: number,
+ query: Record< string, unknown >,
+ options?: { throwOnError?: boolean }
+ ) => Promise< void >;
+ editEntityRecord: (
+ kind: string,
+ name: string,
+ recordId: number,
+ edits: Record< string, unknown >
+ ) => Promise< void >;
+
+ // Dashboard store actions
+ updateCountsOptimistically: (
+ status: string,
+ newStatus: string,
+ count: number,
+ queryParams: QueryParams
+ ) => void;
+ doBulkAction: ( ids: string[], action: string ) => void;
+ invalidateFilters: () => void;
+ invalidateCounts: () => void;
+ markRecordsAsInvalid: ( ids: number[] ) => void;
+ setCurrentQuery: ( queryParams: QueryParams ) => void;
+ };
+ select: ( store: StoreDescriptor ) => {
+ // Dashboard store select actions
+ getCurrentQuery: () => QueryParams;
+ getTrashCount: ( queryParams: QueryParams ) => number;
+ getSpamCount: ( queryParams: QueryParams ) => number;
+ getInboxCount: ( queryParams: QueryParams ) => number;
+
+ // Core store select actions
+ getEntityRecord: (
+ kind: string,
+ name: string,
+ recordId: number
+ ) => Record< string, unknown > | undefined;
+ };
+};
+
+export type Action = {
+ id: string;
+ isPrimary: boolean;
+ icon: React.ReactNode;
+ label: string;
+ modalHeader?: string;
+ isEligible?: ( item: FormResponse ) => boolean;
+ supportsBulk?: boolean;
+ callback?: ( items: FormResponse[], { registry }: { registry: Registry } ) => Promise< void >;
+};
diff --git a/projects/packages/forms/src/dashboard/inbox/style.scss b/projects/packages/forms/src/dashboard/inbox/style.scss
index 90142c4ec0fb5..154536f0e2acf 100644
--- a/projects/packages/forms/src/dashboard/inbox/style.scss
+++ b/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 {
diff --git a/projects/packages/forms/src/types/index.ts b/projects/packages/forms/src/types/index.ts
index 4438476a52421..83b019fb6484d 100644
--- a/projects/packages/forms/src/types/index.ts
+++ b/projects/packages/forms/src/types/index.ts
@@ -114,6 +114,8 @@ export interface FormResponse {
is_unread: boolean;
/** The fields of the response. */
fields: Record< string, unknown >;
+ /** The URL to edit the form that the response was submitted to. */
+ edit_form_url: string;
}
/**