/** * External dependencies */ import { __, _n } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; import { EmptyContent, Section, Badge, EllipsisMenu, } from '@woocommerce/components'; import { Card, CardHeader, Button } from '@wordpress/components'; import { NOTES_STORE_NAME, QUERY_DEFAULTS } from '@woocommerce/data'; import { useSelect, useDispatch } from '@wordpress/data'; import { recordEvent } from '@woocommerce/tracks'; import { CSSTransition, TransitionGroup } from 'react-transition-group'; import { InboxNoteCard, InboxNotePlaceholder, Text, } from '@woocommerce/experimental'; import moment from 'moment'; /** * Internal dependencies */ import { ActivityCard } from '~/activity-panel/activity-card'; import { hasValidNotes, truncateRenderableHTML } from './utils'; import { getScreenName } from '../utils'; import DismissAllModal from './dismiss-all-modal'; import './index.scss'; const renderEmptyCard = () => ( { __( 'As things begin to happen in your store your inbox will start to fill up. ' + "You'll see things like achievements, new feature announcements, extension recommendations and more!", 'woocommerce' ) } ); const onBodyLinkClick = ( note, innerLink ) => { recordEvent( 'inbox_action_click', { note_name: note.name, note_title: note.title, note_content_inner_link: innerLink, } ); }; let hasFiredPanelViewTrack = false; const renderNotes = ( { hasNotes, isBatchUpdating, notes, onDismiss, onNoteActionClick, setShowDismissAllModal: onDismissAll, showHeader = true, } ) => { if ( isBatchUpdating ) { return; } if ( ! hasNotes ) { return renderEmptyCard(); } if ( ! hasFiredPanelViewTrack ) { recordEvent( 'inbox_panel_view', { total: notes.length, } ); hasFiredPanelViewTrack = true; } const screen = getScreenName(); const onNoteVisible = ( note ) => { recordEvent( 'inbox_note_view', { note_content: note.content, note_name: note.name, note_title: note.title, note_type: note.type, screen, } ); }; const notesArray = Object.keys( notes ).map( ( key ) => notes[ key ] ); return ( { showHeader && (
{ __( 'Inbox', 'woocommerce' ) }
(
) } />
) } { notesArray.map( ( note ) => { const { id: noteId, is_deleted: isDeleted } = note; if ( isDeleted ) { return null; } return ( ); } ) }
); }; 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 { createNotice } = useDispatch( 'core/notices' ); const { removeNote, updateNote, triggerNoteAction } = useDispatch( NOTES_STORE_NAME ); const { isError, isResolvingNotes, isBatchUpdating, notes } = 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', ]; return { notes: getNotes( INBOX_QUERY ).map( ( note ) => { const noteDate = moment( note.date_created_gmt, 'YYYY-MM-DD' ).valueOf(); if ( supportedLocales.includes( note.locale ) && noteDate >= WC_VERSION_61_RELEASE_DATE ) { return { ...note, content: truncateRenderableHTML( note.content, 320 ), }; } return note; } ), isError: Boolean( getNotesError( 'getNotes', [ INBOX_QUERY ] ) ), isResolvingNotes: isResolving( 'getNotes', [ INBOX_QUERY ] ), isBatchUpdating: isNotesRequesting( 'batchUpdateNotes' ), }; } ); const [ showDismissAllModal, setShowDismissAllModal ] = useState( false ); const onDismiss = ( note ) => { const screen = getScreenName(); recordEvent( 'inbox_action_dismiss', { note_name: note.name, note_title: note.title, note_name_dismiss_all: false, note_name_dismiss_confirmation: true, screen, } ); const noteId = note.id; try { removeNote( noteId ); createNotice( 'success', __( 'Message dismissed', 'woocommerce' ), { actions: [ { label: __( 'Undo', 'woocommerce' ), onClick: () => { updateNote( noteId, { is_deleted: 0, } ); }, }, ], } ); } catch ( e ) { createNotice( 'error', _n( 'Message could not be dismissed', 'Messages could not be dismissed', 1, 'woocommerce' ) ); } }; if ( isError ) { const title = __( 'There was an error getting your inbox. Please try again.', 'woocommerce' ); const actionLabel = __( 'Reload', 'woocommerce' ); const actionCallback = () => { // @todo Add tracking for how often an error is displayed, and the reload action is clicked. window.location.reload(); }; return ( ); } const hasNotes = hasValidNotes( notes ); // @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 && ( { setShowDismissAllModal( false ); } } /> ) }
{ ( isResolvingNotes || isBatchUpdating ) && (
) }
{ ! isResolvingNotes && ! isBatchUpdating && renderNotes( { hasNotes, isBatchUpdating, notes, onDismiss, onNoteActionClick: ( note, action ) => { triggerNoteAction( note.id, action.id ); }, setShowDismissAllModal, showHeader, } ) }
); }; export default InboxPanel;