Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Only show five inbox messages and add "Show more" button (#35003) 

* Basic paging functionality

* Adding changelog

* Inserting placeholder at end of list, working dismissal

* Fixing issues with dismissed notes not updating UI

* Fixing odd display when removing last note

* Renaming page variable

* Adding tracks event

* Addressing issues caused by .map within useSelect, and getting rid of hash

* Fixing nested ternary linting issue

* Removing console logs

* Updating test
This commit is contained in:
Joel Thiessen 2022-10-13 04:36:02 -07:00 committed by GitHub
parent 1c0925a905
commit 315e163b29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 147 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
plugins/woocommerce-admin/client/inbox-panel/index.js
View File

@ -2,14 +2,14 @@
* External dependencies
*/
import { __, _n } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { useEffect, useState, useMemo } from '@wordpress/element';
import {
EmptyContent,
Section,
Badge,
EllipsisMenu,
} from '@woocommerce/components';
import { Card, CardHeader, Button } from '@wordpress/components';
import { Card, CardHeader, Button, CardFooter } from '@wordpress/components';
import { NOTES_STORE_NAME, QUERY_DEFAULTS } from '@woocommerce/data';
import { useSelect, useDispatch } from '@wordpress/data';
import { recordEvent } from '@woocommerce/tracks';
@ -30,6 +30,39 @@ import { getScreenName } from '../utils';
import DismissAllModal from './dismiss-all-modal';
import './index.scss';
const ADD_NOTES_AMOUNT = 10;
const DEFAULT_INBOX_QUERY = {
page: 1,
per_page: 5,
status: 'unactioned',
type: QUERY_DEFAULTS.noteTypes,
orderby: 'date',
order: 'desc',
_fields: [
'id',
'name',
'title',
'content',
'type',
'status',
'actions',
'date_created',
'date_created_gmt',
'layout',
'image',
'is_deleted',
'is_read',
'locale',
],
};
const supportedLocales = [ 'en_US', 'en_AU', 'en_CA', 'en_GB', 'en_ZA' ];
const WC_VERSION_61_RELEASE_DATE = moment(
'2022-01-11',
'YYYY-MM-DD'
).valueOf();
const renderEmptyCard = () => (
<ActivityCard
className="woocommerce-empty-activity-card"
@ -62,6 +95,9 @@ const renderNotes = ( {
onNoteActionClick,
setShowDismissAllModal: onDismissAll,
showHeader = true,
loadMoreNotes,
allNotesFetched,
notesHaveResolved,
} ) => {
if ( isBatchUpdating ) {
return;
@ -142,59 +178,87 @@ const renderNotes = ( {
);
} ) }
</TransitionGroup>
{ allNotesFetched
? null
: ( () => {
if ( ! notesHaveResolved ) {
return (
<InboxNotePlaceholder className="banner message-is-unread" />
);
}
return (
<CardFooter
className="wooocommerce-inbox-card__footer"
size="medium"
>
<Button
isPrimary={ true }
onClick={ () => {
loadMoreNotes();
} }
>
{ notesArray.length >
DEFAULT_INBOX_QUERY.per_page
? __( 'Show more', 'woocommerce' )
: __( 'Show older', 'woocommerce' ) }
</Button>
</CardFooter>
);
} )() }
</Card>
);
};
const INBOX_QUERY = {
page: 1,
per_page: QUERY_DEFAULTS.pageSize,
status: 'unactioned',
type: QUERY_DEFAULTS.noteTypes,
orderby: 'date',
order: 'desc',
_fields: [
'id',
'name',
'title',
'content',
'type',
'status',
'actions',
'date_created',
'date_created_gmt',
'layout',
'image',
'is_deleted',
'is_read',
'locale',
],
};
const InboxPanel = ( { showHeader = true } ) => {
const [ noteDisplayQty, setNoteDisplayQty ] = useState(
DEFAULT_INBOX_QUERY.per_page
);
const [ allNotesFetched, setAllNotesFetched ] = useState( false );
const [ allNotes, setAllNotes ] = useState( [] );
const { createNotice } = useDispatch( 'core/notices' );
const { removeNote, updateNote, triggerNoteAction } =
useDispatch( NOTES_STORE_NAME );
const {
removeNote,
updateNote,
triggerNoteAction,
invalidateResolutionForStoreSelector,
} = useDispatch( NOTES_STORE_NAME );
const { isError, isResolvingNotes, isBatchUpdating, notes } = useSelect(
const inboxQuery = useMemo( () => {
return {
...DEFAULT_INBOX_QUERY,
per_page: noteDisplayQty,
};
}, [ noteDisplayQty ] );
const { isError, notes, notesHaveResolved, isBatchUpdating } = useSelect(
( select ) => {
const { getNotes, getNotesError, isResolving, isNotesRequesting } =
select( NOTES_STORE_NAME );
const WC_VERSION_61_RELEASE_DATE = moment(
'2022-01-11',
'YYYY-MM-DD'
).valueOf();
const supportedLocales = [
'en_US',
'en_AU',
'en_CA',
'en_GB',
'en_ZA',
];
const {
getNotes,
getNotesError,
isNotesRequesting,
hasFinishedResolution,
} = select( NOTES_STORE_NAME );
return {
notes: getNotes( INBOX_QUERY ).map( ( note ) => {
notes: getNotes( inboxQuery ),
isError: Boolean( getNotesError( 'getNotes', [ inboxQuery ] ) ),
isBatchUpdating: isNotesRequesting( 'batchUpdateNotes' ),
notesHaveResolved:
! isNotesRequesting( 'batchUpdateNotes' ) &&
hasFinishedResolution( 'getNotes', [ inboxQuery ] ),
};
}
);
useEffect( () => {
if ( notesHaveResolved && notes.length < noteDisplayQty ) {
setAllNotesFetched( true );
}
if ( notesHaveResolved && notes.length ) {
setAllNotes(
notes.map( ( note ) => {
const noteDate = moment(
note.date_created_gmt,
'YYYY-MM-DD'
@ -213,19 +277,14 @@ const InboxPanel = ( { showHeader = true } ) => {
};
}
return note;
} ),
isError: Boolean(
getNotesError( 'getNotes', [ INBOX_QUERY ] )
),
isResolvingNotes: isResolving( 'getNotes', [ INBOX_QUERY ] ),
isBatchUpdating: isNotesRequesting( 'batchUpdateNotes' ),
};
} )
);
}
);
}, [ notes, notesHaveResolved ] );
const [ showDismissAllModal, setShowDismissAllModal ] = useState( false );
const onDismiss = ( note ) => {
const onDismiss = async ( note ) => {
const screen = getScreenName();
recordEvent( 'inbox_action_dismiss', {
@ -238,15 +297,17 @@ const InboxPanel = ( { showHeader = true } ) => {
const noteId = note.id;
try {
removeNote( noteId );
await removeNote( noteId );
invalidateResolutionForStoreSelector( 'getNotes' );
createNotice( 'success', __( 'Message dismissed', 'woocommerce' ), {
actions: [
{
label: __( 'Undo', 'woocommerce' ),
onClick: () => {
updateNote( noteId, {
onClick: async () => {
await updateNote( noteId, {
is_deleted: 0,
} );
invalidateResolutionForStoreSelector( 'getNotes' );
},
},
],
@ -285,10 +346,10 @@ const InboxPanel = ( { showHeader = true } ) => {
);
}
const hasNotes = hasValidNotes( notes );
if ( notesHaveResolved && ! allNotes.length ) {
return null;
}
// @todo After having a pagination implemented we should call the method "getNotes" with a different query since
// the current one is only getting 25 notes and the count of unread notes only will refer to this 25 and not all the existing ones.
return (
<>
{ showDismissAllModal && (
@ -299,24 +360,33 @@ const InboxPanel = ( { showHeader = true } ) => {
/>
) }
<div className="woocommerce-homepage-notes-wrapper">
{ ( isResolvingNotes || isBatchUpdating ) && (
{ ! notesHaveResolved && ! allNotes.length && (
<Section>
<InboxNotePlaceholder className="banner message-is-unread" />
</Section>
) }
<Section>
{ ! isResolvingNotes &&
! isBatchUpdating &&
{ Boolean( allNotes.length ) &&
renderNotes( {
hasNotes,
loadMoreNotes: () => {
recordEvent( 'inbox_action_load_more', {
quantity_shown: allNotes.length,
} );
setNoteDisplayQty(
noteDisplayQty + ADD_NOTES_AMOUNT
);
},
hasNotes: hasValidNotes( allNotes ),
isBatchUpdating,
notes,
notes: allNotes,
onDismiss,
onNoteActionClick: ( note, action ) => {
triggerNoteAction( note.id, action.id );
},
setShowDismissAllModal,
showHeader,
allNotesFetched,
notesHaveResolved,
} ) }
</Section>
</div>

7
plugins/woocommerce-admin/client/inbox-panel/index.scss
View File

@ -76,3 +76,10 @@
}
}
}
.wooocommerce-inbox-card__footer {
background-color: #f6f7f7;
display: flex;
justify-content: center;
align-items: center;
}

2
plugins/woocommerce-admin/client/inbox-panel/test/index.js
View File

@ -111,7 +111,7 @@ describe( 'inbox_panel_view_event', () => {
useSelect.mockImplementation( () => ( {
notes,
isError: false,
isResolvingNotes: false,
notesHaveResolved: true,
isBatchUpdating: false,
} ) );
render( <InboxPanel /> );

4
plugins/woocommerce/changelog/update-34927-inbox-expansion Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Changing inbox display to only 5 notes with the ability to load more.