-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor help-center components and add chat history feature (#94974)
* Start conversation * Fix WPADMIN issues * Refactor help-center components and add chat history feature * Tmp changes - wire smooch * Fix overflow making images smaller * Fix minor spacing issue * get user conversations * Use last message from conversation * more changes for conversations * add placeholder navigateTo prop for recent conversation * Calculate unread conversations and messages * use user last read * simplify unread count * fix loading issues * Type fixes * Use the feature flags * Navigate to chat on click * Chat history minor fixes * Add unread conversation badge * Address build issues * Revert * Minor fixes * Minor fixes * Minor fixes * Setup selected conversation * Setup selected conversation * Ensure correct conversationId is used * Ensure more than one conversation message is loaded * Decrease smooch api usage when sending messages * Decrease smooch api usage when sending messages * Fix loading status on send * HC - use last unread conversation message * Mark conversation as read after fetching * Remove unneeded check * Minor fixes * blind fix blank chat * Fix new wapuu when no zendesk * fix broken contact support * fix broken contact support * fix setChat type * fix no smooch load chat --------- Co-authored-by: Tony Arcangelini <tony@arcangelini.com> Co-authored-by: heavyweight <kpapazov@gmail.com> Co-authored-by: escapemanuele <escapemanuele@gmail.com>
- Loading branch information
4 people
authored
Oct 23, 2024
1 parent
445033f
commit 73c143a
Showing
18 changed files
with
664 additions
and
37 deletions.
There are no files selected for viewing
46 changes: 46 additions & 0 deletions
46
packages/help-center/src/components/help-center-chat-history.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| .help-center-chat-history { | ||
|
|
||
| [role="tablist"] { | ||
| border-bottom: 1px solid; | ||
| border-color: rgba(0, 0, 0, 0.1); | ||
| } | ||
|
|
||
| .help-center-chat-history__no-results { | ||
| padding: 16px; | ||
| font-size: 0.75rem; | ||
| } | ||
|
|
||
| .help-center-chat-history__conversation-card { | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 16px; | ||
|
|
||
| & > * { | ||
| display: flex; | ||
| gap: 8px; | ||
| } | ||
|
|
||
| .help-center-chat-history__conversation-avatar { | ||
| width: 32px; | ||
| height: 32px; | ||
| align-self: center; | ||
| flex-shrink: 0; | ||
|
|
||
| img { | ||
| border-radius: 50%; | ||
| } | ||
| } | ||
|
|
||
| .help-center-chat-history__conversation-information { | ||
| .help-center-chat-history__conversation-sub-information { | ||
| font-size: 0.75rem; | ||
| } | ||
| } | ||
|
|
||
| .help-center-chat-history__open-conversation { | ||
| display: flex; | ||
| align-items: center; | ||
| margin-left: auto; | ||
| } | ||
| } | ||
| } |
98 changes: 98 additions & 0 deletions
98
packages/help-center/src/components/help-center-chat-history.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import { HelpCenterSelect } from '@automattic/data-stores'; | ||
| import { useSmooch } from '@automattic/zendesk-client'; | ||
| import { TabPanel } from '@wordpress/components'; | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { useEffect, useState } from '@wordpress/element'; | ||
| import { useI18n } from '@wordpress/react-i18n'; | ||
| import { HELP_CENTER_STORE } from '../stores'; | ||
| import { HelpCenterSupportChatMessage } from './help-center-support-chat-message'; | ||
| import type { ZendeskConversation } from '@automattic/odie-client'; | ||
|
|
||
| import './help-center-chat-history.scss'; | ||
|
|
||
| export const HelpCenterChatHistory = () => { | ||
| const { __ } = useI18n(); | ||
| const TAB_STATES = { | ||
| recent: 'recent', | ||
| archived: 'archived', | ||
| }; | ||
|
|
||
| const [ activeTab, setActiveTab ] = useState( TAB_STATES.recent ); | ||
| const [ conversations, setConversations ] = useState< ZendeskConversation[] >( [] ); | ||
| const { getConversations } = useSmooch(); | ||
| const { isChatLoaded } = useSelect( ( select ) => { | ||
| const store = select( HELP_CENTER_STORE ) as HelpCenterSelect; | ||
| return { isChatLoaded: store.getIsChatLoaded() }; | ||
| }, [] ); | ||
|
|
||
| useEffect( () => { | ||
| if ( isChatLoaded && getConversations ) { | ||
| setConversations( getConversations() as ZendeskConversation[] ); | ||
| } | ||
| }, [ getConversations, isChatLoaded ] ); | ||
|
|
||
| const RecentConversations = ( { conversations }: { conversations: ZendeskConversation[] } ) => { | ||
| if ( ! conversations ) { | ||
| return []; | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| { conversations.map( ( conversation ) => { | ||
| const lastMessage = | ||
| Array.isArray( conversation.messages ) && conversation.messages.length > 0 | ||
| ? conversation.messages[ conversation.messages.length - 1 ] | ||
| : null; | ||
|
|
||
| if ( lastMessage ) { | ||
| return ( | ||
| <HelpCenterSupportChatMessage | ||
| navigateTo={ `/odie/${ conversation.id }` } | ||
| key={ conversation.id } | ||
| message={ lastMessage } | ||
| isUnread={ conversation.participants[ 0 ]?.unreadCount > 0 } | ||
| /> | ||
| ); | ||
| } | ||
| } ) } | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="help-center-chat-history"> | ||
| <TabPanel | ||
| tabs={ [ | ||
| { | ||
| name: TAB_STATES.recent, | ||
| title: __( 'Recent' ), | ||
| className: 'help-center-chat-history__recent', | ||
| }, | ||
| { | ||
| name: TAB_STATES.archived, | ||
| title: __( 'Archived' ), | ||
| className: 'help-center-chat-history__archived', | ||
| }, | ||
| ] } | ||
| onSelect={ () => { | ||
| setActiveTab( activeTab ); | ||
| } } | ||
| > | ||
| { ( tab ) => { | ||
| switch ( tab.name ) { | ||
| case TAB_STATES.recent: | ||
| return <RecentConversations conversations={ conversations } />; | ||
| case TAB_STATES.archived: | ||
| return ( | ||
| <div className="help-center-chat-history__no-results"> | ||
| { __( 'Nothing found…' ) } | ||
| </div> | ||
| ); | ||
| default: | ||
| return; | ||
| } | ||
| } } | ||
| </TabPanel> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
79 changes: 79 additions & 0 deletions
79
packages/help-center/src/components/help-center-recent-conversations.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| .help-center-recent-conversation { | ||
| .button.help-center-recent-conversation__button { | ||
| background-color: transparent; | ||
| border: 1px solid var(--studio-gray-10); | ||
| padding: 16px; | ||
| gap: 6px; | ||
| width: 100%; | ||
| height: 72px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin-bottom: 0; | ||
| border-radius: 4px; | ||
|
|
||
| &:hover { | ||
| border-color: var(--color-neutral-20); | ||
| box-shadow: none; | ||
| outline: none; | ||
| } | ||
|
|
||
| &:focus { | ||
| border-color: transparent; | ||
| box-shadow: none; | ||
| outline: var(--color-primary-light) solid 2px; | ||
| } | ||
|
|
||
| svg { | ||
| vertical-align: middle; | ||
| fill: #C3C4C7; | ||
| } | ||
|
|
||
| .message-avatar { | ||
| width: 38px; | ||
| height: 38px; | ||
|
|
||
| img { | ||
| border-radius: 50%; | ||
| } | ||
| } | ||
|
|
||
| .message-information { | ||
| font-family: "SF Pro Text", sans-serif; | ||
| font-style: normal; | ||
|
|
||
| .message-information__content { | ||
| color: #101517; | ||
| font-weight: 500; | ||
| font-size: 0.875rem; | ||
| line-height: 20px; | ||
| letter-spacing: -0.15px; | ||
| text-overflow: ellipsis; | ||
| overflow: hidden; | ||
| display: -webkit-box; | ||
| line-clamp: 1; | ||
| -webkit-line-clamp: 1; | ||
| -webkit-box-orient: vertical; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .message-information__metadata { | ||
| color: #787C82; | ||
| font-weight: 400; | ||
| font-size: 0.75rem; | ||
| line-height: 20px; | ||
| display: flex; | ||
| align-items: center; | ||
|
|
||
| .message-information__name { | ||
| &::after { | ||
| margin: 0 4px; | ||
| content: "\B7"; | ||
| // width: 2px; | ||
| // height: 2px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.