nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Guide tool updates

Browse Source
This commit is contained in:
Bill 2022-02-23 01:40:36 -05:00
parent be47f5670f
commit 4205bccb4f
12 changed files with 185 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/common/types/ColorVariantType.ts
View File

@ -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';

10
src/components/guide-tool/GuideToolView.scss
View File

@ -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;

63
src/components/guide-tool/GuideToolView.tsx
View File

@ -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 &&
<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 &&
<GuideToolUserCreateRequestView userRequest={ userRequest } setUserRequest={ setUserRequest } /> }
{ sessionState === GuideSessionState.USER_PENDING &&
<GuideToolUserPendingView helpRequestDescription={ helpRequestDescription } helpRequestAverageTime={ helpRequestAverageTime } /> }
{ sessionState === GuideSessionState.USER_FEEDBACK &&
<GuideToolUserFeedbackView userName={ ongoingUsername } /> }
{ sessionState === GuideSessionState.USER_THANKS &&
<GuideToolUserThanksView /> }
<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) &&
<GuideToolUserCreateRequestView userRequest={ userRequest } setUserRequest={ setUserRequest } /> }
{ (sessionState === GuideSessionState.USER_PENDING) &&
<GuideToolUserPendingView helpRequestDescription={ helpRequestDescription } helpRequestAverageTime={ helpRequestAverageTime } /> }
{ (sessionState === GuideSessionState.USER_FEEDBACK) &&
<GuideToolUserFeedbackView userName={ ongoingUsername } /> }
{ (sessionState === GuideSessionState.USER_THANKS) &&
<GuideToolUserThanksView /> }
</NitroCardContentView>
</NitroCardView>
);
};

2
src/components/guide-tool/common/index.ts
View File

@ -1,2 +0,0 @@
export * from './GuideSessionState';
export * from './GuideToolMessageGroup';

35
src/components/guide-tool/views/GuideToolAcceptView.tsx
View File

@ -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>
);
};

82
src/components/guide-tool/views/GuideToolMenuView.tsx
View File

@ -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>
<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>
</>
<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" />
<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>
);
}

103
src/components/guide-tool/views/GuideToolOngoingView.tsx
View File

@ -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">
{ (!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'>
{ (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>
{ (isOwnChat(group.userId)) &&
<NitroLayoutBase className="message-avatar flex-shrink-0">
<AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
</NitroLayoutBase> }
</NitroLayoutFlex>
);
}) }
</div>
{ isTyping && <div className="text-muted">{ LocalizeText('guide.help.common.typing') }</div> }
<NitroLayoutFlex gap={ 2 }>
{
return (
<Flex fullWidth justifyContent={ isOwnChat(group.userId) ? 'end' : 'start' } gap={ 2 }>
<Base shrink className="message-avatar">
{ (!isOwnChat(group.userId)) &&
<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 }
</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> }
</Flex>
);
}) }
</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>
);
};

19
src/components/guide-tool/views/GuideToolUserCreateRequestView.tsx
View File

@ -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>
);
};

44
src/components/guide-tool/views/GuideToolUserFeedbackView.tsx
View File

@ -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>
<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>
<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" />
<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>
);
};

35
src/components/guide-tool/views/GuideToolUserPendingView.tsx
View File

@ -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>
);
};

10
src/components/guide-tool/views/GuideToolUserThanksView.tsx
View File

@ -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>
);
};

2
src/layout/card/header/NitroCardHeaderView.tsx
View File

@ -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>) =>