Skip to content

Commit

Permalink
feat(click2call): handle NethLink case (#262)
Browse files Browse the repository at this point in the history
* devices. Fixed wrong keys from second page
* callto. If nethlink is open call trough call2 protocol
* email. Added copy to clipboard on email
* tooltip. Enhance react tooltip call method
* phone-island. Fixed physical device problem on first page load
* fix: fixed wrong webrtc status on nethlink disconnection
* feat: fallback function to use tel:// protocol
* update phone-island

---------

Co-authored-by: Edoardo Spadoni <edoardo.spadoni@gmail.com>
  • Loading branch information
tonyco97 and edospadoni authored Nov 15, 2024
1 parent 7f8d338 commit 90ef8fa
Show file tree
Hide file tree
Showing 22 changed files with 466 additions and 387 deletions.
2 changes: 1 addition & 1 deletion components/common/CopyComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const CopyToClipboard: React.FC<CopyToClipboardProps> = ({ number, id }) => {
event.preventDefault()
event.stopPropagation()

navigator.clipboard.writeText(number).then(() => {
navigator.clipboard.writeText(number?.trim()).then(() => {
setShowMessage(true)
setTimeout(() => setShowMessage(false), 2000)
})
Expand Down
55 changes: 41 additions & 14 deletions components/common/UserRightSideMenu/UserLastCallsContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,10 @@ import { formatDateLoc } from '../../../lib/dateTime'
import type { SortTypes } from '../../../lib/history'
import { UserCallStatusIcon } from '../../history/UserCallStatusIcon'
import { CallsDate } from '../../history/CallsDate'
import { CallsDestination } from '../../history/CallsDestination'
import { CallsSource } from '../../history/CallsSource'
import { getJSONItem, setJSONItem } from '../../../lib/storage'
import { Tooltip } from 'react-tooltip'
import { openCreateLastCallContact, openShowContactDrawer } from '../../../lib/phonebook'
import { CallDetails } from '../../history/CallDetails'

interface LastCallTypes extends CallTypes {
username: string
Expand Down Expand Up @@ -253,11 +252,35 @@ export const UserLastCallsContent = () => {
/>
<div className='ml-4 truncate flex flex-col gap-1.5'>
<div className='flex items-center'>
<div className='w-24 lg:w-16 xl:w-24 truncate text-sm font-medium text-gray-700 dark:text-gray-200'>
<div
className={` text-sm font-medium text-gray-700 dark:text-gray-200 ${
call.channel.includes('from-queue')
? 'w-24 lg:w-16 xl:w-24 truncate'
: 'w-64'
}`}
>
{call?.direction === 'in' ? (
<CallsSource call={call} operators={operators} hideName={true} />
<CallDetails
call={call}
operators={operators}
hideName={true}
fromHistory={false}
isQueueBadgeAvailable={
call.channel.includes('from-queue') ? true : false
}
direction='in'
/>
) : (
<CallsDestination call={call} operators={operators} hideName={true} />
<CallDetails
call={call}
operators={operators}
hideName={true}
fromHistory={false}
isQueueBadgeAvailable={
call.channel.includes('from-queue') ? true : false
}
direction='out'
/>
)}
</div>
</div>
Expand All @@ -266,20 +289,22 @@ export const UserLastCallsContent = () => {
<UserCallStatusIcon call={call} />
<span className='cursor-pointer hover:underline'>
{call.direction === 'in' ? (
<CallsSource
<CallDetails
call={call}
operators={operators}
hideNumber={true}
highlightNumber={true}
isExtensionNumberLastCalls={true}
direction='in'
/>
) : (
<CallsDestination
<CallDetails
call={call}
operators={operators}
hideNumber={true}
highlightNumber={true}
isExtensionNumberLastCalls={true}
direction='out'
/>
)}
</span>
Expand All @@ -296,8 +321,13 @@ export const UserLastCallsContent = () => {
variant='offline'
rounded='full'
className={`overflow-hidden ml-1 tooltip-queue-${call?.queue}`}
data-tooltip-id={`tooltip-queue-${call?.queue}`}
data-tooltip-content={
queuesStore?.queues[call?.queue]?.name
? `${queuesStore.queues[call.queue].name} ${call.queue}`
: t('QueueManager.Queue')
}
>
{' '}
<FontAwesomeIcon
icon={faUsers}
className='h-4 w-4 mr-2 ml-1'
Expand All @@ -307,15 +337,12 @@ export const UserLastCallsContent = () => {
className={`truncate ${call?.queue ? 'w-20 lg:w-16 xl:w-20' : ''}`}
>
{queuesStore?.queues[call?.queue]?.name
? queuesStore?.queues[call?.queue]?.name + ' ' + call?.queue
? `${queuesStore.queues[call.queue].name} ${call.queue}`
: t('QueueManager.Queue')}
</div>
</Badge>
<Tooltip anchorSelect={`.tooltip-queue-${call?.queue}`}>
{queuesStore?.queues[call?.queue]?.name
? queuesStore?.queues[call?.queue]?.name + ' ' + call?.queue
: t('QueueManager.Queue')}{' '}
</Tooltip>

<Tooltip id={`tooltip-queue-${call?.queue}`} className='pi-z-20' place='left'/>
</>
)}
</div>
Expand Down
24 changes: 16 additions & 8 deletions components/customerCards/CustomerCards.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -527,12 +527,15 @@ export const CustomerCardsCustomerData: FC<CustomerCardsCustomerDataViewProps> =
className='h-4 w-4 mr-2 flex-shrink-0 text-gray-600 dark:text-gray-300'
aria-hidden='true'
/>
<span className='truncate dark:text-gray-300 text-gray-600 w-56 tooltip-notes ml-2 text-left leading-4'>
<span
className='truncate dark:text-gray-300 text-gray-600 w-56 tooltip-notes ml-2 text-left leading-4'
data-tooltip-id='tooltip-notes'
data-tooltip-content={companyCardInformation?.notes || '-'}
>
{companyCardInformation?.notes || '-'}
</span>
<Tooltip anchorSelect='.tooltip-notes'>
{companyCardInformation?.notes || '-'}
</Tooltip>

<Tooltip id='tooltip-notes' className='pi-z-20' />
</td>
</tr>
<tr>
Expand All @@ -545,12 +548,17 @@ export const CustomerCardsCustomerData: FC<CustomerCardsCustomerDataViewProps> =
className='h-4 w-4 mr-2 flex-shrink-0 text-gray-600 dark:text-gray-300'
aria-hidden='true'
/>
<span className='truncate dark:text-gray-300 text-gray-600 w-56 tooltip-address ml-2 text-left leading-4'>
<span
className='truncate dark:text-gray-300 text-gray-600 w-56 tooltip-address ml-2 text-left leading-4'
data-tooltip-id='tooltip-address'
data-tooltip-content={
companyCardInformation?.workstreet || '-'
}
>
{companyCardInformation?.workstreet || '-'}
</span>
<Tooltip anchorSelect='.tooltip-address'>
{companyCardInformation?.workstreet || '-'}
</Tooltip>

<Tooltip id='tooltip-address' className='pi-z-20' />
</td>
</tr>
</tbody>
Expand Down
28 changes: 19 additions & 9 deletions components/devices/DraggableRows.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,13 @@ import { KeyTypeSelect } from './KeyTypeSelect'
import { Tooltip } from 'react-tooltip'
import { isEmpty, isEqual } from 'lodash'
import { Button, EmptyState, TextInput } from '../common'
import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
import {
Combobox,
ComboboxButton,
ComboboxInput,
ComboboxOption,
ComboboxOptions,
} from '@headlessui/react'
import { useSelector } from 'react-redux'
import { RootState } from '../../store'
import { motion } from 'framer-motion'
Expand Down Expand Up @@ -380,9 +386,12 @@ export default function DraggableRows({
const [rowSelectedStatus, setRowSelectedStatus] = useState(false)

const handleClickIcon = (clickedIndex: number, typeSelected: string) => {
setSelectedRowIndex((prevIndex) => (prevIndex === clickedIndex ? null : clickedIndex))
const correctPage = currentPage - 1
const globalIndex = clickedIndex + correctPage * itemsPerPage

setSelectedRowIndex((prevIndex) => (prevIndex === globalIndex ? null : globalIndex))
setIsEditing(false)
setKeysTypeSelected((prevIndex: any) => (prevIndex === clickedIndex ? undefined : typeSelected))
setKeysTypeSelected((prevIndex: any) => (prevIndex === globalIndex ? undefined : typeSelected))
setRowSelectedStatus(!rowSelectedStatus)
onChangeExtraRowVisibility(!rowSelectedStatus)
}
Expand Down Expand Up @@ -571,22 +580,23 @@ export default function DraggableRows({
</div>
</div>

{selectedRowIndex === index && !isEditing && (
{selectedRowIndex === index + (currentPage - 1) * itemsPerPage && !isEditing && (
<div className='px-2'>
<div className='flex items-center mt-4'>
<span>{t('Devices.Key position')}</span>
<FontAwesomeIcon
icon={faCircleInfo}
className='h-4 w-4 pl-2 text-primary dark:text-primaryDark flex items-center tooltip-configure-key-position-information'
aria-hidden='true'
data-tooltip-id='tooltip-configure-key-position-information'
data-tooltip-content={t('Devices.Key position information tooltip') || ''}
/>
{/* key position information tooltip */}

<Tooltip
anchorSelect='.tooltip-configure-key-position-information'
id='tooltip-configure-key-position-information'
place='right'
>
{t('Devices.Key position information tooltip') || ''}
</Tooltip>
className='pi-z-20'
/>
</div>

{/* Choose new index for selected key */}
Expand Down
16 changes: 8 additions & 8 deletions components/devices/EditPhysicalPhoneDrawerContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -146,11 +146,11 @@ export const EditPhysicalPhoneDrawerContent = forwardRef<
icon={faCircleInfo}
className='h-4 w-4 pl-2 py-2 text-primary dark:text-primaryDark flex items-center tooltip-pin-information'
aria-hidden='true'
data-tooltip-id='tooltip-pin-information'
data-tooltip-content={t('Devices.Pin information tooltip') || ''}
/>
{/* Pin information tooltip */}
<Tooltip anchorSelect='.tooltip-pin-information' place='right'>
{t('Devices.Pin information tooltip') || ''}
</Tooltip>

<Tooltip id='tooltip-pin-information' place='right' className='pi-z-20' />
</div>
<div className='flex'>
<span className='text-sm text-gray-700 dark:text-gray-200 leading-5'>
Expand Down Expand Up @@ -195,11 +195,11 @@ export const EditPhysicalPhoneDrawerContent = forwardRef<
icon={faCircleInfo}
className='h-4 w-4 pl-2 text-primary dark:text-primaryDark flex items-center tooltip-configure-keys-information'
aria-hidden='true'
data-tooltip-id='tooltip-configure-keys-information'
data-tooltip-content={t('Devices.Keys configuration information tooltip') || ''}
/>
{/* keys configuration information tooltip */}
<Tooltip anchorSelect='.tooltip-configure-keys-information' place='right'>
{t('Devices.Keys configuration information tooltip') || ''}
</Tooltip>

<Tooltip id='tooltip-configure-keys-information' place='right' className='pi-z-20' />
</div>
<Dropdown items={configureKeysDropdownMenu()} position='left'>
<FontAwesomeIcon
Expand Down
Loading

0 comments on commit 90ef8fa

Please sign in to comment.