From b3e4ea5f44fe53e11bb01f1d6bc7d2a27b581aba Mon Sep 17 00:00:00 2001 From: Pavel <52532264+nomerdvadcatpyat@users.noreply.github.com> Date: Fri, 11 Aug 2023 15:45:50 +0500 Subject: [PATCH] fix(condo): DOMA-6740 move attach call record button to action bar (#3713) --- .../TicketId/TicketCallRecordHistory.tsx | 53 ++----------------- apps/condo/lang/en/en.json | 2 +- apps/condo/lang/ru/ru.json | 2 +- apps/condo/pages/ticket/[id]/index.tsx | 35 +++++++++++- 4 files changed, 39 insertions(+), 53 deletions(-) diff --git a/apps/condo/domains/ticket/components/TicketId/TicketCallRecordHistory.tsx b/apps/condo/domains/ticket/components/TicketId/TicketCallRecordHistory.tsx index 6727890babc..d157d30c1d6 100644 --- a/apps/condo/domains/ticket/components/TicketId/TicketCallRecordHistory.tsx +++ b/apps/condo/domains/ticket/components/TicketId/TicketCallRecordHistory.tsx @@ -1,13 +1,10 @@ -import { B2BAppGlobalFeature, SortCallRecordFragmentsBy } from '@app/condo/schema' +import { SortCallRecordFragmentsBy } from '@app/condo/schema' import { Col, Row, RowProps } from 'antd' -import { notification } from 'antd' -import React, { CSSProperties, useCallback, useMemo } from 'react' +import React, { useMemo } from 'react' -import { Link } from '@open-condo/icons' import { useIntl } from '@open-condo/next/intl' -import { Alert, Button, Typography } from '@open-condo/ui' +import { Typography } from '@open-condo/ui' -import { useGlobalAppsFeaturesContext } from '@condo/domains/miniapp/components/GlobalApps/GlobalAppsFeaturesContext' import { CallRecordCard } from '@condo/domains/ticket/components/CallRecordCard' import { useActiveCall } from '@condo/domains/ticket/contexts/ActiveCallContext' import { CallRecordFragment } from '@condo/domains/ticket/utils/clientSchema' @@ -21,19 +18,12 @@ interface ITicketCallRecordHistoryProps { const MAIN_ROW_GUTTER: RowProps['gutter'] = [0, 24] const CALL_RECORDS_ROW_GUTTER: RowProps['gutter'] = [0, 16] -const ALERT_DESCRIPTION_WRAPPER_STYLE: CSSProperties = { paddingTop: '24px' } - export const TicketCallRecordHistory: React.FC = (props) => { const intl = useIntl() const TicketCallRecordHistoryTitle = intl.formatMessage({ id: 'pages.condo.ticket.title.CallRecordsHistory' }) - const AttachCallToTicketMessage = intl.formatMessage({ id: 'ticket.callRecord.attachCallRecordToTicket' }) - const AttachMessage = intl.formatMessage({ id: 'global.Attach' }) - const NotificationMessage = intl.formatMessage({ id: 'ticket.callRecord.attachCallRecordToTicket.notification.message' }) - const NotificationDescription = intl.formatMessage({ id: 'ticket.callRecord.attachCallRecordToTicket.notification.description' }) - const { ticketId, ticketOrganizationId } = props + const { ticketId } = props - const { requestFeature } = useGlobalAppsFeaturesContext() const { isCallActive, connectedTickets } = useActiveCall() const { objs: ticketCalls } = CallRecordFragment.useObjects({ @@ -49,16 +39,6 @@ export const TicketCallRecordHistory: React.FC = ) ), [ticketCalls]) - const handleAttachCallRecordClick = useCallback(() => { - requestFeature({ - feature: B2BAppGlobalFeature.AttachCallRecordToTicket, - ticketId, - ticketOrganizationId, - }) - - notification.info({ message: NotificationMessage, description: NotificationDescription }) - }, [NotificationDescription, NotificationMessage, requestFeature, ticketId, ticketOrganizationId]) - const showAttachCallToTicketAlert = isCallActive && !connectedTickets.find(id => ticketId === id) if (ticketCalls.length === 0 && !showAttachCallToTicketAlert) { @@ -71,31 +51,6 @@ export const TicketCallRecordHistory: React.FC = {TicketCallRecordHistoryTitle} - { - showAttachCallToTicketAlert && ( - - {AttachCallToTicketMessage} - } - showIcon - description={ -
- -
- } - /> - - ) - } { ticketCalls.length > 0 && ( diff --git a/apps/condo/lang/en/en.json b/apps/condo/lang/en/en.json index 11a0a7eee7b..e516e1739d8 100644 --- a/apps/condo/lang/en/en.json +++ b/apps/condo/lang/en/en.json @@ -1444,7 +1444,7 @@ "TicketAssignment": "Application assignment", "ticketsTable.Number": "№", "ticketsTable.ResidentName": "Resident Name", - "ticket.callRecord.attachCallRecordToTicket": "You can attach this call to the ticket", + "ticket.callRecord.attachCallRecordToTicket": "Attach call", "ticket.callRecord.attachCallRecordToTicket.notification.message": "The call is attached to the ticket", "ticket.callRecord.attachCallRecordToTicket.notification.description": "Conversation record saved in ticket card", "ticket.callRecord.incomingCall": "Incoming call from {phone}", diff --git a/apps/condo/lang/ru/ru.json b/apps/condo/lang/ru/ru.json index 7e93d1cac90..cc751897662 100644 --- a/apps/condo/lang/ru/ru.json +++ b/apps/condo/lang/ru/ru.json @@ -1444,7 +1444,7 @@ "TicketAssignment": "Назначение заявки", "ticketsTable.Number": "№", "ticketsTable.ResidentName": "Фио Жителя", - "ticket.callRecord.attachCallRecordToTicket": "Вы можете прикрепить этот звонок к заявке", + "ticket.callRecord.attachCallRecordToTicket": "Прикрепить звонок", "ticket.callRecord.attachCallRecordToTicket.notification.message": "Звонок прикреплен к заявке", "ticket.callRecord.attachCallRecordToTicket.notification.description": "Запись разговора сохранена в карточке заявки", "ticket.callRecord.incomingCall": "Входящий звонок с номера {phone}", diff --git a/apps/condo/pages/ticket/[id]/index.tsx b/apps/condo/pages/ticket/[id]/index.tsx index 8ef4cb26e72..b3f053a5256 100644 --- a/apps/condo/pages/ticket/[id]/index.tsx +++ b/apps/condo/pages/ticket/[id]/index.tsx @@ -1,12 +1,13 @@ /** @jsx jsx */ import { + B2BAppGlobalFeature, SortTicketChangesBy, SortTicketCommentFilesBy, SortTicketCommentsBy, } from '@app/condo/schema' import { jsx } from '@emotion/react' import styled from '@emotion/styled' -import { Affix, Col, ColProps, Row, RowProps, Space, Typography } from 'antd' +import { Affix, Col, ColProps, notification, Row, RowProps, Space, Typography } from 'antd' import dayjs from 'dayjs' import { compact, get, isEmpty, map } from 'lodash' import Head from 'next/head' @@ -14,7 +15,7 @@ import Link from 'next/link' import { useRouter } from 'next/router' import React, { CSSProperties, useCallback, useEffect, useMemo } from 'react' -import { Edit } from '@open-condo/icons' +import { Edit, Link as LinkIcon } from '@open-condo/icons' import { useAuth } from '@open-condo/next/auth' import { FormattedMessage } from '@open-condo/next/intl' import { useIntl } from '@open-condo/next/intl' @@ -27,6 +28,7 @@ import { AccessDeniedPage } from '@condo/domains/common/components/containers/Ac import { PageContent, PageWrapper } from '@condo/domains/common/components/containers/BaseLayout' import LoadingOrErrorPage from '@condo/domains/common/components/containers/LoadingOrErrorPage' import { useLayoutContext } from '@condo/domains/common/components/LayoutContext' +import { useGlobalAppsFeaturesContext } from '@condo/domains/miniapp/components/GlobalApps/GlobalAppsFeaturesContext' import { OrganizationRequired } from '@condo/domains/organization/components/OrganizationRequired' import { ASSIGNED_TICKET_VISIBILITY } from '@condo/domains/organization/constants/common' import { OrganizationEmployee } from '@condo/domains/organization/utils/clientSchema' @@ -50,6 +52,7 @@ import { TicketTag } from '@condo/domains/ticket/components/TicketTag' import { CLOSED_STATUS_TYPE } from '@condo/domains/ticket/constants' import { STATUS_IDS } from '@condo/domains/ticket/constants/statusTransitions' import { TICKET_TYPE_TAG_COLORS } from '@condo/domains/ticket/constants/style' +import { useActiveCall } from '@condo/domains/ticket/contexts/ActiveCallContext' import { FavoriteTicketsContextProvider } from '@condo/domains/ticket/contexts/FavoriteTicketsContext' import { TicketQualityControlProvider, useTicketQualityControl } from '@condo/domains/ticket/contexts/TicketQualityControlContext' import { useTicketVisibility } from '@condo/domains/ticket/contexts/TicketVisibilityContext' @@ -343,6 +346,9 @@ const TicketActionBar = ({ }) => { const intl = useIntl() const UpdateMessage = intl.formatMessage({ id: 'Edit' }) + const AttachCallToTicketMessage = intl.formatMessage({ id: 'ticket.callRecord.attachCallRecordToTicket' }) + const NotificationMessage = intl.formatMessage({ id: 'ticket.callRecord.attachCallRecordToTicket.notification.message' }) + const NotificationDescription = intl.formatMessage({ id: 'ticket.callRecord.attachCallRecordToTicket.notification.description' }) const timeZone = intl.formatters.getDateTimeFormat().resolvedOptions().timeZone @@ -350,14 +356,18 @@ const TicketActionBar = ({ const user = get(auth, 'user') const { breakpoints } = useLayoutContext() + const { requestFeature } = useGlobalAppsFeaturesContext() + const { isCallActive, connectedTickets } = useActiveCall() const id = get(ticket, 'id') + const ticketOrganizationId = get(ticket, 'organization.id') const canShareTickets = get(employee, 'role.canShareTickets') const ticketStatusType = useMemo(() => get(ticket, ['status', 'type']), [ticket]) const isDeletedProperty = !ticket.property && ticket.propertyAddress const disabledEditTicketButton = ticketStatusType === CLOSED_STATUS_TYPE || isDeletedProperty const disabledEditQualityControlButton = ticket.status.id !== STATUS_IDS.COMPLETED && ticket.status.id !== STATUS_IDS.CLOSED + const showAttachCallToTicketButton = isCallActive && !connectedTickets.find(ticketId => ticketId === id) const { TicketBlanksExportToPdfButton, TicketBlanksExportToPdfModal } = useTicketExportToPdfTask({ ticketId: id, @@ -375,9 +385,30 @@ const TicketActionBar = ({ const { EditButton: EditQualityControlButton } = useTicketQualityControl() + const handleAttachCallRecordClick = useCallback(() => { + requestFeature({ + feature: B2BAppGlobalFeature.AttachCallRecordToTicket, + ticketId: id, + ticketOrganizationId, + }) + + notification.info({ message: NotificationMessage, description: NotificationDescription }) + }, [NotificationDescription, NotificationMessage, id, requestFeature, ticketOrganizationId]) + return ( } + type='primary' + onClick={handleAttachCallRecordClick} + > + {AttachCallToTicketMessage} + + ),