mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-27 08:00:51 +01:00
Guide tool updates
This commit is contained in:
Bill
parent
be47f5670f
commit
4205bccb4f
@ -1 +1 @@
|
||||
export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white' | 'dark' | 'warning' | 'muted';
|
||||
export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white' | 'dark' | 'warning' | 'muted' | 'light';
|
||||
|
||||
@ -1,13 +1,6 @@
|
||||
.nitro-guide-tool {
|
||||
width: 250px;
|
||||
|
||||
.duty-status {
|
||||
border-radius: 0.25rem;
|
||||
border-color: #B6BEC5 !important;
|
||||
background-color: #CDD3D9;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
.duty-switch {
|
||||
width: 38px;
|
||||
height: 21px;
|
||||
@ -26,9 +19,6 @@
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
overflow-y: auto;
|
||||
|
||||
.message-avatar {
|
||||
position: relative;
|
||||
|
||||
@ -3,9 +3,10 @@ import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { AddEventLinkTracker, GetConfiguration, GetSessionDataManager, LocalizeText, RemoveLinkEventTracker } from '../../api';
|
||||
import { GuideToolEvent, NotificationAlertEvent } from '../../events';
|
||||
import { CreateMessageHook, dispatchUiEvent, SendMessageHook, useUiEvent } from '../../hooks';
|
||||
import { NitroCardHeaderView, NitroCardView } from '../../layout';
|
||||
import { GuideSessionState, GuideToolMessageGroup } from './common';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
|
||||
import { GuideSessionState } from './common/GuideSessionState';
|
||||
import { GuideToolMessage } from './common/GuideToolMessage';
|
||||
import { GuideToolMessageGroup } from './common/GuideToolMessageGroup';
|
||||
import { GuideToolAcceptView } from './views/GuideToolAcceptView';
|
||||
import { GuideToolMenuView } from './views/GuideToolMenuView';
|
||||
import { GuideToolOngoingView } from './views/GuideToolOngoingView';
|
||||
@ -319,46 +320,24 @@ export const GuideToolView: FC<{}> = props =>
|
||||
if(!isVisible) return null;
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-guide-tool" simple={ true }>
|
||||
<NitroCardHeaderView headerText={ headerText } onCloseClick={ () => processAction('close') } noCloseButton={ noCloseButton } />
|
||||
|
||||
{ sessionState === GuideSessionState.GUIDE_TOOL_MENU &&
|
||||
<GuideToolMenuView isOnDuty={ isOnDuty }
|
||||
isHandlingGuideRequests={ isHandlingGuideRequests }
|
||||
setIsHandlingGuideRequests={ setIsHandlingGuideRequests }
|
||||
isHandlingHelpRequests={ isHandlingHelpRequests }
|
||||
setIsHandlingHelpRequests={ setIsHandlingHelpRequests }
|
||||
isHandlingBullyReports={ isHandlingBullyReports }
|
||||
setIsHandlingBullyReports={ setIsHandlingBullyReports }
|
||||
guidesOnDuty={ guidesOnDuty }
|
||||
helpersOnDuty={ helpersOnDuty }
|
||||
guardiansOnDuty={ guardiansOnDuty }
|
||||
processAction={ processAction }
|
||||
/> }
|
||||
|
||||
{ sessionState === GuideSessionState.GUIDE_ACCEPT &&
|
||||
<NitroCardView className="nitro-guide-tool" simple>
|
||||
<NitroCardHeaderView headerText={ headerText } onCloseClick={ event => processAction('close') } noCloseButton={ noCloseButton } />
|
||||
<NitroCardContentView className="text-black">
|
||||
{ (sessionState === GuideSessionState.GUIDE_TOOL_MENU) &&
|
||||
<GuideToolMenuView isOnDuty={ isOnDuty } isHandlingGuideRequests={ isHandlingGuideRequests } setIsHandlingGuideRequests={ setIsHandlingGuideRequests } isHandlingHelpRequests={ isHandlingHelpRequests } setIsHandlingHelpRequests={ setIsHandlingHelpRequests } isHandlingBullyReports={ isHandlingBullyReports } setIsHandlingBullyReports={ setIsHandlingBullyReports } guidesOnDuty={ guidesOnDuty } helpersOnDuty={ helpersOnDuty } guardiansOnDuty={ guardiansOnDuty } processAction={ processAction } /> }
|
||||
{ (sessionState === GuideSessionState.GUIDE_ACCEPT) &&
|
||||
<GuideToolAcceptView helpRequestDescription={ helpRequestDescription } helpRequestAverageTime={ helpRequestAverageTime } /> }
|
||||
|
||||
{ [ GuideSessionState.GUIDE_ONGOING, GuideSessionState.USER_ONGOING ].includes(sessionState) &&
|
||||
<GuideToolOngoingView isGuide={ isOnDuty }
|
||||
userId={ ongoingUserId }
|
||||
userName={ ongoingUsername }
|
||||
userFigure={ ongoingFigure }
|
||||
isTyping={ ongoingIsTyping }
|
||||
messageGroups={ ongoingMessageGroups }
|
||||
/> }
|
||||
|
||||
{ sessionState === GuideSessionState.USER_CREATE &&
|
||||
<GuideToolOngoingView isGuide={ isOnDuty } userId={ ongoingUserId } userName={ ongoingUsername } userFigure={ ongoingFigure } isTyping={ ongoingIsTyping } messageGroups={ ongoingMessageGroups } /> }
|
||||
{ (sessionState === GuideSessionState.USER_CREATE) &&
|
||||
<GuideToolUserCreateRequestView userRequest={ userRequest } setUserRequest={ setUserRequest } /> }
|
||||
|
||||
{ sessionState === GuideSessionState.USER_PENDING &&
|
||||
{ (sessionState === GuideSessionState.USER_PENDING) &&
|
||||
<GuideToolUserPendingView helpRequestDescription={ helpRequestDescription } helpRequestAverageTime={ helpRequestAverageTime } /> }
|
||||
|
||||
{ sessionState === GuideSessionState.USER_FEEDBACK &&
|
||||
{ (sessionState === GuideSessionState.USER_FEEDBACK) &&
|
||||
<GuideToolUserFeedbackView userName={ ongoingUsername } /> }
|
||||
|
||||
{ sessionState === GuideSessionState.USER_THANKS &&
|
||||
{ (sessionState === GuideSessionState.USER_THANKS) &&
|
||||
<GuideToolUserThanksView /> }
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
export * from './GuideSessionState';
|
||||
export * from './GuideToolMessageGroup';
|
||||
@ -1,8 +1,8 @@
|
||||
import { GuideSessionGuideDecidesMessageComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback } from 'react';
|
||||
import { FC } from 'react';
|
||||
import { LocalizeText } from '../../../api';
|
||||
import { Button, Column, Text } from '../../../common';
|
||||
import { SendMessageHook } from '../../../hooks';
|
||||
import { NitroCardContentView } from '../../../layout';
|
||||
|
||||
interface GuideToolAcceptViewProps
|
||||
{
|
||||
@ -14,22 +14,23 @@ export const GuideToolAcceptView: FC<GuideToolAcceptViewProps> = props =>
|
||||
{
|
||||
const { helpRequestDescription = null, helpRequestAverageTime = 0 } = props;
|
||||
|
||||
const answerRequest = useCallback((response: boolean) =>
|
||||
{
|
||||
SendMessageHook(new GuideSessionGuideDecidesMessageComposer(response));
|
||||
}, []);
|
||||
const answerRequest = (response: boolean) => SendMessageHook(new GuideSessionGuideDecidesMessageComposer(response));
|
||||
|
||||
return (
|
||||
<NitroCardContentView className="text-black flex flex-column gap-2">
|
||||
<div className="duty-status py-2 px-3">
|
||||
<div className="fw-bold">{ LocalizeText('guide.help.request.guide.accept.request.title') }</div>
|
||||
<div className="text-muted">{ LocalizeText('guide.help.request.type.1') }</div>
|
||||
<div className="text-wrap text-break">{ helpRequestDescription }</div>
|
||||
</div>
|
||||
<div className="d-flex flex-column gap-2 w-100">
|
||||
<button className="btn btn-success btn-sm" onClick={ () => answerRequest(true) }>{ LocalizeText('guide.help.request.guide.accept.accept.button') }</button>
|
||||
<button className="btn btn-danger btn-sm" onClick={ () => answerRequest(false) }>{ LocalizeText('guide.help.request.guide.accept.skip.link') }</button>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
<Column>
|
||||
<Column gap={ 0 } className="bg-muted p-2 rounded">
|
||||
<Text bold>{ LocalizeText('guide.help.request.guide.accept.request.title') }</Text>
|
||||
<Text variant="muted">{ LocalizeText('guide.help.request.type.1') }</Text>
|
||||
<Text wrap textBreak>{ helpRequestDescription }</Text>
|
||||
</Column>
|
||||
<Column gap={ 1 }>
|
||||
<Button variant="success" onClick={ event => answerRequest(true) }>
|
||||
{ LocalizeText('guide.help.request.guide.accept.accept.button') }
|
||||
</Button>
|
||||
<Button variant="danger" onClick={ event => answerRequest(false) }>
|
||||
{ LocalizeText('guide.help.request.guide.accept.skip.link') }
|
||||
</Button>
|
||||
</Column>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { FC } from 'react';
|
||||
import { LocalizeText } from '../../../api';
|
||||
import { NitroCardContentView } from '../../../layout';
|
||||
import { Base, Button, Column, Flex, Text } from '../../../common';
|
||||
|
||||
interface GuideToolMenuViewProps
|
||||
{
|
||||
@ -34,47 +34,43 @@ export const GuideToolMenuView: FC<GuideToolMenuViewProps> = props =>
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<NitroCardContentView className="text-black flex flex-column gap-2">
|
||||
<div className="duty-status py-2 px-3 d-flex gap-2 align-items-center">
|
||||
<div>
|
||||
<div className={ 'duty-switch' + (isOnDuty ? '' : ' off') } onClick={ () => processAction('toggle_duty') } />
|
||||
</div>
|
||||
<div>
|
||||
<div className="fw-bold">{ LocalizeText('guide.help.guide.tool.yourstatus') }</div>
|
||||
<div>{ LocalizeText(`guide.help.guide.tool.duty.${(isOnDuty ? 'on' : 'off')}`) }</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="fw-bold">{ LocalizeText('guide.help.guide.tool.tickettypeselection.caption') }</div>
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" disabled={ isOnDuty } type="checkbox" checked={ isHandlingGuideRequests } onChange={ e => { setIsHandlingGuideRequests(e.target.checked) } } />
|
||||
<label className="form-check-label">{ LocalizeText('guide.help.guide.tool.tickettypeselection.guiderequests') }</label>
|
||||
</div>
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" disabled={ isOnDuty } type="checkbox" checked={ isHandlingHelpRequests } onChange={ e => { setIsHandlingHelpRequests(e.target.checked) } } />
|
||||
<label className="form-check-label">{ LocalizeText('guide.help.guide.tool.tickettypeselection.onlyhelprequests') }</label>
|
||||
</div>
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" disabled={ isOnDuty } type="checkbox" checked={ isHandlingBullyReports } onChange={ e => { setIsHandlingBullyReports(e.target.checked) } } />
|
||||
<label className="form-check-label">{ LocalizeText('guide.help.guide.tool.tickettypeselection.bullyreports') }</label>
|
||||
</div>
|
||||
</div>
|
||||
<Column>
|
||||
<Flex alignItems="center" gap={ 2 } className="bg-muted p-2 rounded">
|
||||
<Base className={ 'duty-switch' + (isOnDuty ? '' : ' off') } onClick={ event => processAction('toggle_duty') } />
|
||||
<Column gap={ 0 }>
|
||||
<Text bold>{ LocalizeText('guide.help.guide.tool.yourstatus') }</Text>
|
||||
<Text>{ LocalizeText(`guide.help.guide.tool.duty.${ (isOnDuty ? 'on' : 'off') }`) }</Text>
|
||||
</Column>
|
||||
</Flex>
|
||||
<Column gap={ 1 }>
|
||||
<Text bold>{ LocalizeText('guide.help.guide.tool.tickettypeselection.caption') }</Text>
|
||||
<Flex alignItems="center" gap={ 1 }>
|
||||
<input className="form-check-input" disabled={ isOnDuty } type="checkbox" checked={ isHandlingGuideRequests } onChange={ event => setIsHandlingGuideRequests(event.target.checked) } />
|
||||
<Text>{ LocalizeText('guide.help.guide.tool.tickettypeselection.guiderequests') }</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" gap={ 1 }>
|
||||
<input className="form-check-input" disabled={ isOnDuty } type="checkbox" checked={ isHandlingHelpRequests } onChange={ event => setIsHandlingHelpRequests(event.target.checked) } />
|
||||
<Text>{ LocalizeText('guide.help.guide.tool.tickettypeselection.onlyhelprequests') }</Text>
|
||||
</Flex>
|
||||
<Flex alignItems="center" gap={ 1 }>
|
||||
<input className="form-check-input" disabled={ isOnDuty } type="checkbox" checked={ isHandlingBullyReports } onChange={ event => setIsHandlingBullyReports(event.target.checked) } />
|
||||
<Text>{ LocalizeText('guide.help.guide.tool.tickettypeselection.bullyreports') }</Text>
|
||||
</Flex>
|
||||
</Column>
|
||||
<hr className="bg-dark m-0" />
|
||||
<div className="d-flex align-items-center justify-content-center gap-2">
|
||||
<div className="info-icon" />
|
||||
<div>
|
||||
<div dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.guidesonduty', ['amount'], [guidesOnDuty.toString()]) } } />
|
||||
<div dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.helpersonduty', ['amount'], [helpersOnDuty.toString()]) } } />
|
||||
<div dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.guardiansonduty', ['amount'], [guardiansOnDuty.toString()]) } } />
|
||||
</div>
|
||||
</div>
|
||||
<hr className="bg-dark m-0 mt-auto" />
|
||||
<div className="d-flex gap-2 w-100">
|
||||
<button className="btn btn-primary btn-sm w-100 text-nowrap" onClick={ () => processAction('forum_link') }>{ LocalizeText('guide.help.guide.tool.forum.link') }</button>
|
||||
<button className="btn btn-primary btn-sm w-100 text-nowrap" disabled>{ LocalizeText('guide.help.guide.tool.skill.link') }</button>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</>
|
||||
<Flex center gap={ 2 }>
|
||||
<Base className="info-icon" />
|
||||
<Column gap={ 1 }>
|
||||
<Base dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.guidesonduty', [ 'amount' ], [ guidesOnDuty.toString() ]) } } />
|
||||
<Base dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.helpersonduty', [ 'amount' ], [ helpersOnDuty.toString() ]) } } />
|
||||
<Base dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.guardiansonduty', [ 'amount' ], [ guardiansOnDuty.toString() ]) } } />
|
||||
</Column>
|
||||
</Flex>
|
||||
<hr className="bg-dark m-0" />
|
||||
<Flex justifyContent="between" gap={ 2 }>
|
||||
<Button onClick={ event => processAction('forum_link') }>{ LocalizeText('guide.help.guide.tool.forum.link') }</Button>
|
||||
<Button disabled>{ LocalizeText('guide.help.guide.tool.skill.link') }</Button>
|
||||
</Flex>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,11 +2,11 @@ import { GuideSessionGetRequesterRoomMessageComposer, GuideSessionInviteRequeste
|
||||
import { GuideSessionMessageMessageComposer } from '@nitrots/nitro-renderer/src';
|
||||
import { FC, KeyboardEvent, useCallback, useState } from 'react';
|
||||
import { GetSessionDataManager, LocalizeText, TryVisitRoom } from '../../../api';
|
||||
import { Base, Button, ButtonGroup, Column, Flex, Text } from '../../../common';
|
||||
import { CreateMessageHook, SendMessageHook } from '../../../hooks';
|
||||
import { NitroCardContentView, NitroLayoutButton, NitroLayoutFlex } from '../../../layout';
|
||||
import { NitroLayoutBase } from '../../../layout/base';
|
||||
import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
|
||||
import { GuideToolMessageGroup } from '../common';
|
||||
import { GuideToolMessageGroup } from '../common/GuideToolMessageGroup';
|
||||
|
||||
interface GuideToolOngoingViewProps
|
||||
{
|
||||
@ -69,56 +69,59 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<NitroCardContentView className="p-0">
|
||||
<div className="d-flex gap-2 align-items-center bg-secondary p-2 text-white">
|
||||
{ isGuide && <div className="btn-group">
|
||||
<button className="btn btn-light btn-sm" onClick={ visit }>{ LocalizeText('guide.help.request.guide.ongoing.visit.button') }</button>
|
||||
<button className="btn btn-light btn-sm" disabled onClick={ invite }>{ LocalizeText('guide.help.request.guide.ongoing.invite.button') }</button>
|
||||
</div> }
|
||||
{ !isGuide && <div>
|
||||
<div className="fw-bold">{ userName }</div>
|
||||
<div>{ LocalizeText('guide.help.request.user.ongoing.guide.desc') }</div>
|
||||
</div> }
|
||||
<div className="ms-auto text-decoration-underline cursor-pointer text-nowrap text-muted">{ LocalizeText('guide.help.common.report.link') }</div>
|
||||
</div>
|
||||
<div className="p-2 d-flex flex-column gap-1">
|
||||
<div className="text-black d-flex flex-column gap-2 p-2 chat-messages bg-muted rounded">
|
||||
<Column fullHeight>
|
||||
<Flex alignItems="center" justifyContent="between" gap={ 1 } className="bg-muted p-2 rounded">
|
||||
{ isGuide &&
|
||||
<ButtonGroup>
|
||||
<Button onClick={ visit }>{ LocalizeText('guide.help.request.guide.ongoing.visit.button') }</Button>
|
||||
<Button disabled onClick={ invite }>{ LocalizeText('guide.help.request.guide.ongoing.invite.button') }</Button>
|
||||
</ButtonGroup> }
|
||||
{ !isGuide &&
|
||||
<Column gap={ 0 }>
|
||||
<Text bold>{ userName }</Text>
|
||||
<Text>{ LocalizeText('guide.help.request.user.ongoing.guide.desc') }</Text>
|
||||
</Column> }
|
||||
<Button variant="danger" disabled>{ LocalizeText('guide.help.common.report.link') }</Button>
|
||||
</Flex>
|
||||
<Column fullHeight overflow="hidden" gap={ 1 } className="bg-muted rounded chat-messages p-2">
|
||||
<Column overflow="auto">
|
||||
{ messageGroups.map((group, index) =>
|
||||
{
|
||||
return (
|
||||
<NitroLayoutFlex className={ 'w-100 justify-content-' + (isOwnChat(group.userId) ? 'end' : 'start') } gap={ 2 }>
|
||||
<NitroLayoutBase className="message-avatar flex-shrink-0">
|
||||
<Flex fullWidth justifyContent={ isOwnChat(group.userId) ? 'end' : 'start' } gap={ 2 }>
|
||||
<Base shrink className="message-avatar">
|
||||
{ (!isOwnChat(group.userId)) &&
|
||||
<AvatarImageView figure={ userFigure } direction={ 2 } />
|
||||
}
|
||||
</NitroLayoutBase>
|
||||
<NitroLayoutBase className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat(group.userId) ? 'right' : 'left') }>
|
||||
<NitroLayoutBase className='fw-bold'>
|
||||
<AvatarImageView figure={ userFigure } direction={ 2 } /> }
|
||||
</Base>
|
||||
<Base className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat(group.userId) ? 'right' : 'left') }>
|
||||
<Text bold>
|
||||
{ (isOwnChat(group.userId)) && GetSessionDataManager().userName }
|
||||
{ (!isOwnChat(group.userId)) && userName }
|
||||
</NitroLayoutBase>
|
||||
{ group.messages.map((chat, index) =><NitroLayoutBase key={ index } className="text-break">{ chat.message }</NitroLayoutBase>) }
|
||||
</NitroLayoutBase>
|
||||
</Text>
|
||||
{ group.messages.map((chat, index) => <Base key={ index } className="text-break">{ chat.message }</Base>) }
|
||||
</Base>
|
||||
{ (isOwnChat(group.userId)) &&
|
||||
<NitroLayoutBase className="message-avatar flex-shrink-0">
|
||||
<AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
|
||||
</NitroLayoutBase> }
|
||||
</NitroLayoutFlex>
|
||||
</Flex>
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
{ isTyping && <div className="text-muted">{ LocalizeText('guide.help.common.typing') }</div> }
|
||||
<NitroLayoutFlex gap={ 2 }>
|
||||
</Column>
|
||||
</Column>
|
||||
<Column gap={ 1 }>
|
||||
<Flex gap={ 1 }>
|
||||
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('guide.help.request.guide.ongoing.input.empty', [ 'name' ], [ userName ]) } value={ messageText } onChange={ event => setMessageText(event.target.value) } onKeyDown={ onKeyDown } />
|
||||
<NitroLayoutButton variant="success" size="sm" onClick={ sendMessage }>
|
||||
<Button variant="success" onClick={ sendMessage }>
|
||||
{ LocalizeText('widgets.chatinput.say') }
|
||||
</NitroLayoutButton>
|
||||
</NitroLayoutFlex>
|
||||
</div>
|
||||
<div className="d-flex flex-column gap-2 p-2 pt-0">
|
||||
<hr className="bg-dark m-0" />
|
||||
<div className="btn btn-success" onClick={ resolve }>{ LocalizeText('guide.help.request.' + (isGuide ? 'guide' : 'user') + '.ongoing.close.link') }</div>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</Button>
|
||||
</Flex>
|
||||
{ isTyping &&
|
||||
<Text variant="muted">{ LocalizeText('guide.help.common.typing') }</Text> }
|
||||
</Column>
|
||||
<Button fullWidth variant="success" onClick={ resolve }>
|
||||
{ LocalizeText('guide.help.request.' + (isGuide ? 'guide' : 'user') + '.ongoing.close.link') }
|
||||
</Button>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { GuideSessionCreateMessageComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useState } from 'react';
|
||||
import { FC, useState } from 'react';
|
||||
import { LocalizeText } from '../../../api';
|
||||
import { Button, Column, Text } from '../../../common';
|
||||
import { SendMessageHook } from '../../../hooks';
|
||||
import { NitroCardContentView } from '../../../layout';
|
||||
|
||||
interface GuideToolUserCreateRequestViewProps
|
||||
{
|
||||
@ -15,20 +15,19 @@ const MIN_REQUEST_LENGTH: number = 15;
|
||||
export const GuideToolUserCreateRequestView: FC<GuideToolUserCreateRequestViewProps> = props =>
|
||||
{
|
||||
const { userRequest = '', setUserRequest = null } = props;
|
||||
|
||||
const [ isPending, setIsPending ] = useState<boolean>(false);
|
||||
|
||||
const sendRequest = useCallback(() =>
|
||||
const sendRequest = () =>
|
||||
{
|
||||
setIsPending(true);
|
||||
SendMessageHook(new GuideSessionCreateMessageComposer(1, userRequest));
|
||||
}, [ userRequest ]);
|
||||
}
|
||||
|
||||
return (
|
||||
<NitroCardContentView className="text-black flex flex-column gap-2">
|
||||
<div>{ LocalizeText('guide.help.request.user.create.help') }</div>
|
||||
<textarea className="request-message" maxLength={ 140 } value={ userRequest } onChange={ (e) => setUserRequest(e.target.value) } placeholder={ LocalizeText('guide.help.request.user.create.input.help') }></textarea>
|
||||
<button className="btn btn-success" disabled={ userRequest.length < MIN_REQUEST_LENGTH || isPending } onClick={ sendRequest }>{ LocalizeText('guide.help.request.user.create.input.button') }</button>
|
||||
</NitroCardContentView>
|
||||
<Column>
|
||||
<Text>{ LocalizeText('guide.help.request.user.create.help') }</Text>
|
||||
<textarea className="request-message" maxLength={ 140 } value={ userRequest } onChange={ event => setUserRequest(event.target.value) } placeholder={ LocalizeText('guide.help.request.user.create.input.help') }></textarea>
|
||||
<Button fullWidth variant="success" disabled={ (userRequest.length < MIN_REQUEST_LENGTH) || isPending } onClick={ sendRequest }>{ LocalizeText('guide.help.request.user.create.input.button') }</Button>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { GuideSessionFeedbackMessageComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback } from 'react';
|
||||
import { LocalizeText } from '../../../api';
|
||||
import { Button, Column, Flex, Text } from '../../../common';
|
||||
import { SendMessageHook } from '../../../hooks';
|
||||
import { NitroCardContentView } from '../../../layout';
|
||||
|
||||
interface GuideToolUserFeedbackViewProps
|
||||
{
|
||||
@ -19,26 +19,26 @@ export const GuideToolUserFeedbackView: FC<GuideToolUserFeedbackViewProps> = pro
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<NitroCardContentView className="p-0">
|
||||
<div className="d-flex gap-2 align-items-center bg-secondary p-2 text-white">
|
||||
<div>
|
||||
<div className="fw-bold">{ userName }</div>
|
||||
<div>{ LocalizeText('guide.help.request.user.feedback.guide.desc') }</div>
|
||||
</div>
|
||||
<div className="ms-auto text-decoration-underline cursor-pointer text-nowrap">{ LocalizeText('guide.help.common.report.link') }</div>
|
||||
</div>
|
||||
<div className="text-black d-flex flex-column gap-2 p-2 h-100">
|
||||
<div>
|
||||
<div className="fw-bold">{ LocalizeText('guide.help.request.user.feedback.closed.title') }</div>
|
||||
<div>{ LocalizeText('guide.help.request.user.feedback.closed.desc') }</div>
|
||||
</div>
|
||||
<Column>
|
||||
<Flex justifyContent="between" gap={ 1 } className="bg-muted p-2 rounded">
|
||||
<Column gap={ 0 }>
|
||||
<Text bold>{ userName }</Text>
|
||||
<Text>{ LocalizeText('guide.help.request.user.feedback.guide.desc') }</Text>
|
||||
</Column>
|
||||
<Button variant="danger" disabled>{ LocalizeText('guide.help.common.report.link') }</Button>
|
||||
</Flex>
|
||||
<Column gap={ 1 }>
|
||||
<Text bold>{ LocalizeText('guide.help.request.user.feedback.closed.title') }</Text>
|
||||
<Text>{ LocalizeText('guide.help.request.user.feedback.closed.desc') }</Text>
|
||||
</Column>
|
||||
<hr className="bg-dark m-0 mt-auto" />
|
||||
<div className="fw-bold text-center">{ LocalizeText('guide.help.request.user.feedback.question') }</div>
|
||||
<div className="d-flex gap-2">
|
||||
<div className="btn btn-success w-100" onClick={ () => giveFeedback(true) }>{ LocalizeText('guide.help.request.user.feedback.positive.button') }</div>
|
||||
<div className="btn btn-danger w-100" onClick={ () => giveFeedback(false) }>{ LocalizeText('guide.help.request.user.feedback.negative.button') }</div>
|
||||
</div>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
<Column>
|
||||
<Text center bold>{ LocalizeText('guide.help.request.user.feedback.question') }</Text>
|
||||
<Flex gap={ 1 }>
|
||||
<Button fullWidth variant="success" onClick={ event => giveFeedback(true) }>{ LocalizeText('guide.help.request.user.feedback.positive.button') }</Button>
|
||||
<Button fullWidth variant="danger" onClick={ event => giveFeedback(false) }>{ LocalizeText('guide.help.request.user.feedback.negative.button') }</Button>
|
||||
</Flex>
|
||||
</Column>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { GuideSessionRequesterCancelsMessageComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback } from 'react';
|
||||
import { FC } from 'react';
|
||||
import { LocalizeText } from '../../../api';
|
||||
import { Button, Column, Text } from '../../../common';
|
||||
import { SendMessageHook } from '../../../hooks';
|
||||
import { NitroCardContentView } from '../../../layout';
|
||||
|
||||
interface GuideToolUserPendingViewProps
|
||||
{
|
||||
@ -14,24 +14,21 @@ export const GuideToolUserPendingView: FC<GuideToolUserPendingViewProps> = props
|
||||
{
|
||||
const { helpRequestDescription = null, helpRequestAverageTime = 0 } = props;
|
||||
|
||||
const cancelRequest = useCallback(() =>
|
||||
{
|
||||
SendMessageHook(new GuideSessionRequesterCancelsMessageComposer());
|
||||
}, []);
|
||||
const cancelRequest = () => SendMessageHook(new GuideSessionRequesterCancelsMessageComposer());
|
||||
|
||||
return (
|
||||
<NitroCardContentView className="text-black flex flex-column gap-2">
|
||||
<div className="duty-status py-2 px-3">
|
||||
<div className="fw-bold">{ LocalizeText('guide.help.request.guide.accept.request.title') }</div>
|
||||
<div className="text-muted">{ LocalizeText('guide.help.request.type.1') }</div>
|
||||
<div className="text-wrap text-break">{ helpRequestDescription }</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="fw-bold">{ LocalizeText('guide.help.request.user.pending.info.title') }</div>
|
||||
<div>{ LocalizeText('guide.help.request.user.pending.info.message') }</div>
|
||||
<div>{ LocalizeText('guide.help.request.user.pending.info.waiting', ['waitingtime'], [helpRequestAverageTime.toString()]) }</div>
|
||||
</div>
|
||||
<button className="btn btn-danger mt-auto" onClick={ cancelRequest }>{ LocalizeText('guide.help.request.user.pending.cancel.button') }</button>
|
||||
</NitroCardContentView>
|
||||
<Column>
|
||||
<Column gap={ 0 } className="bg-muted rounded p-2">
|
||||
<Text bold>{ LocalizeText('guide.help.request.guide.accept.request.title') }</Text>
|
||||
<Text variant="muted">{ LocalizeText('guide.help.request.type.1') }</Text>
|
||||
<Text wrap textBreak>{ helpRequestDescription }</Text>
|
||||
</Column>
|
||||
<Column gap={ 1 }>
|
||||
<Text bold>{ LocalizeText('guide.help.request.user.pending.info.title') }</Text>
|
||||
<Text>{ LocalizeText('guide.help.request.user.pending.info.message') }</Text>
|
||||
<Text>{ LocalizeText('guide.help.request.user.pending.info.waiting', [ 'waitingtime' ], [ helpRequestAverageTime.toString() ]) }</Text>
|
||||
</Column>
|
||||
<Button variant="danger" onClick={ cancelRequest }>{ LocalizeText('guide.help.request.user.pending.cancel.button') }</Button>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import { FC } from 'react';
|
||||
import { LocalizeText } from '../../../api';
|
||||
import { NitroCardContentView } from '../../../layout';
|
||||
import { Column, Text } from '../../../common';
|
||||
|
||||
export const GuideToolUserThanksView: FC<{}> = props =>
|
||||
{
|
||||
return (
|
||||
<NitroCardContentView className="text-black flex flex-column gap-2">
|
||||
<div className="fw-bold">{ LocalizeText('guide.help.request.user.thanks.info.title') }</div>
|
||||
<div>{ LocalizeText('guide.help.request.user.thanks.info.desc') }</div>
|
||||
</NitroCardContentView>
|
||||
<Column gap={ 1 }>
|
||||
<Text bold>{ LocalizeText('guide.help.request.user.thanks.info.title') }</Text>
|
||||
<Text>{ LocalizeText('guide.help.request.user.thanks.info.desc') }</Text>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
@ -5,7 +5,7 @@ import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types';
|
||||
|
||||
export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
|
||||
{
|
||||
const { headerText = null, onCloseClick = null } = props;
|
||||
const { headerText = null, noCloseButton = false, onCloseClick = null } = props;
|
||||
const { theme = 'primary', simple = false } = useNitroCardContext();
|
||||
|
||||
const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) =>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user