Merge pull request #195 from ahmed-deriv/ahmed/DAPI-817/chore-add-vis…

…ual-effect-on-copy

Ahmed/dapi 817/chore add visual effect on copy

i18n/en/code.json

@@ -1118,5 +1118,8 @@
   },
   "The server is currently unable to handle the request due to a temporary overload or maintenance of the server. Please try again later.": {
     "message": "The server is currently unable to handle the request due to a temporary overload or maintenance of the server. Please try again later."
+  },
+  "Copied": {
+    "message": "Copied"
   }
 }

i18n/fr/code.json

@@ -1118,5 +1118,8 @@
   },
   "The server is currently unable to handle the request due to a temporary overload or maintenance of the server. Please try again later.": {
     "message": "Le serveur est actuellement incapable de traiter la requête en raison d'une surcharge temporaire ou d'une maintenance du serveur. Veuillez réessayer plus tard."
+  },
+  "Copied": {
+    "message": "Copié"
   }
 }

src/features/dashboard/components/common-table/cell-copy-text.module.scss

@@ -14,4 +14,38 @@
 .copyTextIcon {
   margin-left: 8px;
   margin-top: 4px;
+  position: relative;
+}
+
+.tooltip {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.75);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  white-space: nowrap;
+  font-size: 12px;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  opacity: 0;
+  visibility: hidden;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0 6px 6px;
+    border-style: solid;
+    border-color: transparent transparent rgba(0, 0, 0, 0.75);
+  }
+}
+
+.tooltip.visible {
+  opacity: 1;
+  visibility: visible;
 }

src/features/dashboard/components/common-table/cell-copy-text.tsx

@@ -1,29 +1,36 @@
 import React from 'react';
 import { LabelPairedCopyLgRegularIcon } from '@deriv/quill-icons';
 import { Text } from '@deriv-com/quill-ui';
+import Translate from '@docusaurus/Translate';
 import styles from './cell-copy-text.module.scss';
 
 const CopyTextCell: React.FC<{
   cell: {
     value: React.ReactNode;
   };
-}> = ({ cell }) => {
+}> = ({ cell: { value } }) => {
+  const [tooltipVisible, setTooltipVisible] = React.useState(false);
+
+  const handleCopy = React.useCallback(() => {
+    navigator.clipboard.writeText(value.toString());
+    setTooltipVisible(true);
+    setTimeout(() => setTooltipVisible(false), 1000);
+  }, [value]);
+
   return (
     <React.Fragment>
-      {cell.value ? (
-        <div
-          className={styles.copyText}
-          onClick={() => {
-            navigator.clipboard.writeText(cell.value.toString());
-          }}
-        >
-          <Text>{cell.value}</Text>
+      {value && (
+        <div className={styles.copyText} onClick={handleCopy}>
+          <Text>{value}</Text>
           <span className={styles.copyTextIcon}>
             <LabelPairedCopyLgRegularIcon />
+            {tooltipVisible && (
+              <div className={`${styles.tooltip} ${tooltipVisible ? styles.visible : ''}`}>
+                <Translate>Copied</Translate>
+              </div>
+            )}
           </span>
         </div>
-      ) : (
-        ''
       )}
     </React.Fragment>
   );