fix(condo): DOMA-6740 move attach call record button to action bar (#…

…3713)
open-condo-software · Aug 11, 2023 · b3e4ea5 · b3e4ea5
1 parent 7bd49bd
commit b3e4ea5
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 53 deletions.
diff --git 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<ITicketCallRecordHistoryProps> = (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<ITicketCallRecordHistoryProps> =
         )
     ), [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<ITicketCallRecordHistoryProps> =
                 <Col span={24}>
                     <Typography.Title level={3}>{TicketCallRecordHistoryTitle}</Typography.Title>
                 </Col>
-                {
-                    showAttachCallToTicketAlert && (
-                        <Col span={24}>
-                            <Alert
-                                type='info'
-                                message={
-                                    <Typography.Title level={4}>{AttachCallToTicketMessage}</Typography.Title>
-                                }
-                                showIcon
-                                description={
-                                    <div style={ALERT_DESCRIPTION_WRAPPER_STYLE}>
-                                        <Button
-                                            id='TicketIndexAttachCallRecord'
-                                            icon={<Link size='medium'/>}
-                                            type='primary'
-                                            onClick={handleAttachCallRecordClick}
-                                        >
-                                            {AttachMessage}
-                                        </Button>
-                                    </div>
-                                }
-                            />
-                        </Col>
-                    )
-                }
                 {
                     ticketCalls.length > 0 && (
                         <Col span={24}>

diff --git 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
@@ -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
@@ -1,20 +1,21 @@
 /** @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'
 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,21 +346,28 @@ 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
 
     const auth = useAuth() as { user: { id: string } }
     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 (
         <ActionBar
             actions={[
+                showAttachCallToTicketButton && (
+                    <Button
+                        key='attachCallRecord'
+                        id='TicketIndexAttachCallRecord'
+                        icon={<LinkIcon size='medium'/>}
+                        type='primary'
+                        onClick={handleAttachCallRecordClick}
+                    >
+                        {AttachCallToTicketMessage}
+                    </Button>
+                ),
                 <Link key='update' href={`/ticket/${ticket.id}/update`}>
                     <Button
                         disabled={disabledEditTicketButton}