operatorDrawer. Added copy to clipboard

nethesis · Oct 16, 2024 · 6c7e38d · 6c7e38d
1 parent a239201
commit 6c7e38d
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 18 deletions.
diff --git a/components/devices/DownloadDesktopLinkContent.tsx b/components/devices/DownloadDesktopLinkContent.tsx
@@ -77,8 +77,9 @@ export const DownloadDesktopLinkContent = forwardRef<
           </span>
         </div>
         <div className='grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 hover:cursor-pointer'>
+          {/* Hidden at the moment, but it will be back when it will be the support for Linux */}
           {/* Linux */}
-          <div
+          {/* <div
             className={`${
               selectedOS === 'linux'
                 ? 'border-primary dark:border-primaryDark border-2'
@@ -100,7 +101,7 @@ export const DownloadDesktopLinkContent = forwardRef<
                 </div>
               )}
             </div>
-          </div>
+          </div> */}
           {/* Apple */}
           <div
             className={`${

diff --git a/components/phonebook/ContactSummary.tsx b/components/phonebook/ContactSummary.tsx
@@ -17,7 +17,6 @@ import { RootState, store } from '../../store'
 import { callPhoneNumber, closeSideDrawer, transferCallToExtension } from '../../lib/utils'
 import { startOfDay, subDays } from 'date-fns'
 import {
-  faArrowUpRightFromSquare,
   faEllipsisVertical,
   faPen,
   faPhone,
@@ -28,6 +27,7 @@ import {
   faFileLines,
   faTrash,
   faUser,
+  faClone,
 } from '@fortawesome/free-solid-svg-icons'
 import {} from '@fortawesome/free-regular-svg-icons'
 import {
@@ -37,12 +37,14 @@ import {
   openEditContactDrawer,
   openShowContactDrawer,
   reloadPhonebook,
-  retrieveContact,
 } from '../../lib/phonebook'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/router'
 import { isEmpty } from 'lodash'
 import { LastCallsDrawerTable } from '../history/LastCallsDrawerTable'
+import CopyToClipboard from 'react-copy-to-clipboard'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Tooltip } from 'react-tooltip'
 
 export interface ContactSummaryProps extends ComponentPropsWithRef<'div'> {
   contact: any
@@ -59,6 +61,19 @@ export const ContactSummary = forwardRef<HTMLButtonElement, ContactSummaryProps>
     const cancelDeleteButtonRef = useRef() as MutableRefObject<HTMLButtonElement>
     const { profile } = useSelector((state: RootState) => state.user)
 
+    const [copied, setCopied] = useState<boolean>(false)
+
+    const [showMessage, setShowMessage] = useState(false)
+
+    const handleCopy = () => {
+      setCopied(true)
+      setShowMessage(true)
+
+      setTimeout(() => {
+        setShowMessage(false)
+      }, 1500)
+    }
+
     const operatorsStore = useSelector((state: RootState) => state.operators)
 
     //Get sideDrawer status from store
@@ -206,6 +221,43 @@ export const ContactSummary = forwardRef<HTMLButtonElement, ContactSummaryProps>
       )
     }
 
+    const copyComponent = (number: string) => {
+      return (
+        <>
+          <div className='relative'>
+            <CopyToClipboard text={number} onCopy={handleCopy}>
+              <Button
+                variant='ghost'
+                className='ml-2 h-9 w-9'
+                data-tooltip-id={'tooltip-copy-to-clipboard'}
+                data-tooltip-content={t('Common.Copy to clipboard') || ''}
+              >
+                <FontAwesomeIcon
+                  className='w-4 h-4 text-green-600'
+                  icon={faClone}
+                  aria-hidden='true'
+                />
+              </Button>
+            </CopyToClipboard>
+          </div>
+          <AnimatePresence>
+            {showMessage && (
+              <motion.div
+                initial={{ opacity: 0, y: 0 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5 }}
+                className='ml-2 dark:bg-gray-100 bg-gray-800 dark:text-gray-900 text-gray-50 text-xs px-2 py-2 rounded shadow-lg w-40 text-center'
+              >
+                {t('Common.Copied in clipboard')}
+              </motion.div>
+            )}
+          </AnimatePresence>
+          <Tooltip id='tooltip-copy-to-clipboard' place='top' />
+        </>
+      )
+    }
+
     return (
       <>
         {/* delete contact modal */}
@@ -343,6 +395,8 @@ export const ContactSummary = forwardRef<HTMLButtonElement, ContactSummaryProps>
                     >
                       {contact?.extension}
                     </span>
+                    {/* copy component */}
+                    {copyComponent(contact?.extension)}
                   </div>
                 </dd>
               </div>
@@ -368,8 +422,10 @@ export const ContactSummary = forwardRef<HTMLButtonElement, ContactSummaryProps>
                           : callPhoneNumber(contact?.workphone)
                       }
                     >
-                      {contact.workphone}
+                      {contact?.workphone}
                     </span>
+                    {/* copy component */}
+                    {copyComponent(contact?.workphone)}
                   </div>
                 </dd>
               </div>
@@ -397,6 +453,8 @@ export const ContactSummary = forwardRef<HTMLButtonElement, ContactSummaryProps>
                     >
                       {contact?.cellphone}
                     </span>
+                    {/* copy component */}
+                    {copyComponent(contact?.cellphone)}
                   </div>
                 </dd>
               </div>
@@ -424,6 +482,8 @@ export const ContactSummary = forwardRef<HTMLButtonElement, ContactSummaryProps>
                     >
                       {contact?.homephone}
                     </span>
+                    {/* copy component */}
+                    {copyComponent(contact?.homephone)}
                   </div>
                 </dd>
               </div>

diff --git a/components/settings/Integrations.tsx b/components/settings/Integrations.tsx
@@ -4,9 +4,9 @@
 import { RefObject, createRef, useState, useEffect } from 'react'
 import {
   faCheck,
-  faClipboard,
   faTriangleExclamation,
   faCircleNotch,
+  faCopy,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button, InlineNotification, Modal } from '../common'
@@ -124,15 +124,15 @@ export const Integrations = () => {
             <div className='mt-5 bg-gray-50 dark:bg-gray-900 dark:border dark:border-gray-800 p-5 rounded-lg text-gray-900 dark:text-gray-100 flex gap-5 items-center'>
               <div className='text-sm break-all'>{config}</div>
               <CopyToClipboard text={config} onCopy={() => setCopied(true)}>
-                <Button variant='white' className='h-9 w-9'>
+                <Button variant='ghost' className='h-9 w-9'>
                   {copied ? (
                     <FontAwesomeIcon
                       className='w-4 h-4 text-green-600'
                       icon={faCheck}
                       aria-hidden='true'
                     />
                   ) : (
-                    <FontAwesomeIcon className='w-4 h-4' icon={faClipboard} aria-hidden='true' />
+                    <FontAwesomeIcon className='w-4 h-4' icon={faCopy} aria-hidden='true' />
                   )}
                 </Button>
               </CopyToClipboard>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "date-fns": "^2.30.0",
     "date-fns-tz": "^1.3.8",
     "font-awesome": "^4.7.0",
+    "framer-motion": "^11.11.9",
     "gravatar": "^1.8.2",
     "i18next": "^22.4.9",
     "i18next-browser-languagedetector": "^7.0.1",

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -61,7 +61,9 @@
     "Answer phone to start recording": "Answer phone to start recording",
     "Close the call to stop recording": "Close the call to stop recording",
     "Search or type a contact": "Search or type a contact",
-    "Enter a phone number": "Enter a phone number"
+    "Enter a phone number": "Enter a phone number",
+    "Copied in clipboard": "Copied in clipboard",
+    "Copy to clipboard": "Copy to clipboard"
   },
   "Login": {
     "User": "Username",

diff --git a/public/locales/it/translation.json b/public/locales/it/translation.json
@@ -46,7 +46,9 @@
     "Answer phone to start recording": "Rispondi al telefono per iniziare la registrazione",
     "Close the call to stop recording": "Chiudi la chiamata per fermare la registrazione",
     "Search or type a contact": "Cerca o digita un contatto",
-    "Enter a phone number": "Digita un numero"
+    "Enter a phone number": "Digita un numero",
+    "Copied in clipboard": "Copiato negli appunti",
+    "Copy to clipboard": "Copia negli appunti"
   },
   "Login": {
     "User": "Utente",