From eec9ff9f26686bbf7b02f3b057f92dede0bbf01e Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 5 Aug 2025 10:52:53 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20fix=20copy=20to=20incl?=
 =?UTF-8?q?ude=20all=20meeting=20info=20from=20side=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rework clipboard functionality to copy complete meeting information when
users click the copy button in the information side panel.

Previously only partial data was copied, causing user confusion. Now
includes all relevant meeting details as expected.

Improves user experience by meeting user expectations for copy behavior.
---
 .../rooms/livekit/components/Info.tsx         | 29 +++++++++++++++++--
 src/frontend/src/locales/de/rooms.json        |  4 +++
 src/frontend/src/locales/en/rooms.json        |  4 +++
 src/frontend/src/locales/fr/rooms.json        |  4 +++
 src/frontend/src/locales/nl/rooms.json        |  4 +++
 5 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/Info.tsx b/src/frontend/src/features/rooms/livekit/components/Info.tsx
index c4c13690..4501593a 100644
--- a/src/frontend/src/features/rooms/livekit/components/Info.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/Info.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { VStack } from '@/styled-system/jsx'
 import { css } from '@/styled-system/css'
 import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
@@ -26,6 +26,29 @@ export const Info = () => {
 
   const telephony = useTelephony()
 
+  const isTelephonyReadyForUse = useMemo(() => {
+    return telephony?.enabled && data?.pin_code
+  }, [telephony?.enabled, data?.pin_code])
+
+  const clipboardContent = useMemo(() => {
+    if (isTelephonyReadyForUse) {
+      return [
+        t('roomInformation.clipboard.url', { roomUrl }),
+        t('roomInformation.clipboard.numberAndPin', {
+          phoneNumber: telephony?.internationalPhoneNumber,
+          pinCode: formatPinCode(data?.pin_code),
+        }),
+      ].join('\n')
+    }
+    return roomUrl
+  }, [
+    isTelephonyReadyForUse,
+    roomUrl,
+    telephony?.internationalPhoneNumber,
+    data?.pin_code,
+    t,
+  ])
+
   return (
     <Div
       display="flex"
@@ -55,7 +78,7 @@ export const Info = () => {
           <Text as="p" variant="xsNote" wrap="pretty">
             {roomUrl}
           </Text>
-          {telephony?.enabled && data?.pin_code && (
+          {isTelephonyReadyForUse && (
             <>
               <Text as="p" variant="xsNote" wrap="pretty">
                 <Bold>{t('roomInformation.phone.call')}</Bold> (
@@ -73,7 +96,7 @@ export const Info = () => {
           variant={isCopied ? 'success' : 'tertiaryText'}
           aria-label={t('roomInformation.button.ariaLabel')}
           onPress={() => {
-            navigator.clipboard.writeText(roomUrl)
+            navigator.clipboard.writeText(clipboardContent)
             setIsCopied(true)
           }}
           data-attr="copy-info-sidepannel"
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 4db7930d..bebb687c 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -233,6 +233,10 @@
       "phone": {
         "call": "Rufen Sie an:",
         "pinCode": "Code:"
+      },
+      "clipboard": {
+        "url": "Um an der Videokonferenz teilzunehmen, klicken Sie auf diesen Link: {{roomUrl}}",
+        "numberAndPin": "Um telefonisch teilzunehmen, wählen Sie {{phoneNumber}} und geben Sie diesen Code ein: {{pinCode}}"
       }
     }
   },
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 1b5c4c3e..9cc87c4e 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -233,6 +233,10 @@
       "phone": {
         "call": "Call:",
         "pinCode": "Code:"
+      },
+      "clipboard": {
+        "url": "To join the video conference, click on this link: {{roomUrl}}",
+        "numberAndPin": "To join by phone, dial {{phoneNumber}} and enter this code: {{pinCode}}"
       }
     }
   },
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index a3d5a077..8eb5bfea 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -233,6 +233,10 @@
       "phone": {
         "call": "Appelez le :",
         "pinCode": "Code :"
+      },
+      "clipboard": {
+        "url": "Pour participer à la visioconférence, cliquez sur ce lien : {{roomUrl}}",
+        "numberAndPin": "Pour participer par téléphone, composez le {{phoneNumber}} et saisissez ce code : {{pinCode}}"
       }
     }
   },
diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json
index 56d9bc0a..3ed64b8a 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/src/frontend/src/locales/nl/rooms.json
@@ -233,6 +233,10 @@
       "phone": {
         "call": "Bel:",
         "pinCode": "Code:"
+      },
+      "clipboard": {
+        "url": "Klik op deze link om deel te nemen aan de videoconferentie: {{roomUrl}}",
+        "numberAndPin": "Bel {{phoneNumber}} en voer deze code in om telefonisch deel te nemen: {{pinCode}}"
       }
     }
   },