|
| 1 | +import { NumberCaller } from "./NumberCaller" |
| 2 | +import { ContactType, OperatorData } from "@shared/types" |
| 3 | +import { isDev } from "@shared/utils/utils" |
| 4 | +import { FavouriteStar } from "./FavouritesStar" |
| 5 | +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" |
| 6 | +import { useAccount } from "@renderer/hooks/useAccount" |
| 7 | +import { useStoreState } from "@renderer/store" |
| 8 | +import { usePhoneIslandEventHandler } from "@renderer/hooks/usePhoneIslandEventHandler" |
| 9 | +import { Avatar } from "./Nethesis" |
| 10 | +import { |
| 11 | + faPhone as CallIcon, |
| 12 | +} from '@fortawesome/free-solid-svg-icons' |
| 13 | +import { t } from "i18next" |
| 14 | +import { ReactNode } from "react" |
| 15 | +import classNames from "classnames" |
| 16 | +export const ContactNameAndActions = ({ contact, number, isHighlight, displayedNumber, avatarDim, username, isFavourite, isSearchData }: { |
| 17 | + contact: ContactType, |
| 18 | + number: string, |
| 19 | + isHighlight: boolean, |
| 20 | + displayedNumber: string | ReactNode[], |
| 21 | + avatarDim: "small" | "base" | "extra_small" | "large" | "extra_large", |
| 22 | + username: string | undefined, |
| 23 | + isFavourite: boolean |
| 24 | + isSearchData: boolean |
| 25 | +}) => { |
| 26 | + const { isCallsEnabled } = useAccount() |
| 27 | + const [operators] = useStoreState<OperatorData>('operators') |
| 28 | + const { callNumber } = usePhoneIslandEventHandler() |
| 29 | + const avatarSrc = username && operators?.avatars?.[username] |
| 30 | + |
| 31 | + const isOperator = username && !!(operators?.operators?.[username]) |
| 32 | + |
| 33 | + return ( |
| 34 | + <div className={classNames(avatarDim === 'small' ? 'gap-3' : 'gap-6', "flex flex-row items-center w-full max-w-full")}> |
| 35 | + <Avatar |
| 36 | + size={avatarDim} |
| 37 | + src={avatarSrc} |
| 38 | + status={isOperator ? operators?.operators?.[username]?.mainPresence : undefined} |
| 39 | + bordered={true} |
| 40 | + placeholderType={operators?.extensions[contact.speeddial_num || ''] ? 'operator' : 'person'} |
| 41 | + /> |
| 42 | + <div className='relative w-full h-[44px] '> |
| 43 | + <div className="absolute top-0 left-0 flex flex-col gap-1 w-full "> |
| 44 | + <div className="flex flex-row gap-2 w-full overflow-hidden"> |
| 45 | + <div className='dark:text-titleDark text-titleLight font-medium text-[14px] leading-5 truncate break-all whitespace-nowrap '> |
| 46 | + {isFavourite ? (contact.company || `${t('Common.Unknown')}`) : (contact.name || contact.company || `${t('Common.Unknown')}`)} |
| 47 | + {false && isDev() && <span className='absolute top-[-4px] left-[-26px] text-[8px]'>[{contact.id}]</span>} |
| 48 | + </div> |
| 49 | + {isOperator && <FavouriteStar contact={contact} isSearchData={isSearchData} />} |
| 50 | + </div> |
| 51 | + <div className="flex flex-row gap-2 items-center"> |
| 52 | + {!isHighlight && |
| 53 | + <FontAwesomeIcon |
| 54 | + className="dark:text-gray-400 text-gray-600 text-base" |
| 55 | + icon={CallIcon} |
| 56 | + onClick={() => callNumber(contact.speeddial_num!)} |
| 57 | + /> |
| 58 | + } |
| 59 | + <NumberCaller |
| 60 | + number={number} |
| 61 | + disabled={!isCallsEnabled} |
| 62 | + className="dark:text-textBlueDark text-textBlueLight font-normal hover:underline" |
| 63 | + isNumberHiglighted={isHighlight} |
| 64 | + > |
| 65 | + {displayedNumber} |
| 66 | + </NumberCaller> |
| 67 | + </div> |
| 68 | + </div> |
| 69 | + </div> |
| 70 | + </div> |
| 71 | + ) |
| 72 | +} |
0 commit comments