From b537cdfd934cdf150512692f4c82341194a1e257 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 9 Sep 2024 18:26:33 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20align=20later=20meetin?=
 =?UTF-8?q?g=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Duplicated sources, bad practice, should be a unique and reusable
component. Debt, needs to be refactored.
---
 .../home/components/LaterMeetingDialog.tsx    | 104 +++++++++++-------
 src/frontend/src/locales/de/home.json         |   4 +-
 src/frontend/src/locales/en/home.json         |   6 +-
 src/frontend/src/locales/fr/home.json         |   6 +-
 4 files changed, 75 insertions(+), 45 deletions(-)

diff --git a/src/frontend/src/features/home/components/LaterMeetingDialog.tsx b/src/frontend/src/features/home/components/LaterMeetingDialog.tsx
index e980468b..f50b27a4 100644
--- a/src/frontend/src/features/home/components/LaterMeetingDialog.tsx
+++ b/src/frontend/src/features/home/components/LaterMeetingDialog.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Div, Button, Dialog, Input, type DialogProps, P } from '@/primitives'
+import { Button, Dialog, type DialogProps, P, Text } from '@/primitives'
 import { HStack } from '@/styled-system/jsx'
+import { RiCheckLine, RiFileCopyLine, RiSpam2Fill } from '@remixicon/react'
 
 // fixme - duplication with the InviteDialog
 export const LaterMeetingDialog = ({
@@ -11,19 +12,17 @@ export const LaterMeetingDialog = ({
 }: { roomId: string } & Omit<DialogProps, 'title'>) => {
   const { t } = useTranslation('home')
   const roomUrl = getRouteUrl('room', roomId)
-  const copyLabel = t('laterMeetingDialog.copy')
-  const copiedLabel = t('laterMeetingDialog.copied')
-  const [copyLinkLabel, setCopyLinkLabel] = useState(copyLabel)
+
+  const [isCopied, setIsCopied] = useState(false)
+
   useEffect(() => {
-    if (copyLinkLabel == copiedLabel) {
-      const timeout = setTimeout(() => {
-        setCopyLinkLabel(copyLabel)
-      }, 5000)
-      return () => {
-        clearTimeout(timeout)
-      }
+    if (isCopied) {
+      const timeout = setTimeout(() => setIsCopied(false), 3000)
+      return () => clearTimeout(timeout)
     }
-  }, [copyLinkLabel, copyLabel, copiedLabel])
+  }, [isCopied])
+
+  const [isHovered, setIsHovered] = useState(false)
 
   return (
     <Dialog
@@ -32,31 +31,62 @@ export const LaterMeetingDialog = ({
       title={t('laterMeetingDialog.heading')}
     >
       <P>{t('laterMeetingDialog.description')}</P>
-      <HStack alignItems="stretch" gap="gutter">
-        <Div flex="1">
-          <Input
-            type="text"
-            aria-label={t('laterMeetingDialog.inputLabel')}
-            value={roomUrl}
-            readOnly
-            onClick={(e) => {
-              e.currentTarget.select()
-            }}
-          />
-        </Div>
-        <Div minWidth="8rem">
-          <Button
-            variant="primary"
-            size="sm"
-            fullWidth
-            onPress={() => {
-              navigator.clipboard.writeText(roomUrl)
-              setCopyLinkLabel(copiedLabel)
-            }}
-          >
-            {copyLinkLabel}
-          </Button>
-        </Div>
+      <Button
+        variant={isCopied ? 'success' : 'primary'}
+        size="sm"
+        fullWidth
+        aria-label={t('laterMeetingDialog.copy')}
+        style={{
+          justifyContent: 'start',
+        }}
+        onPress={() => {
+          navigator.clipboard.writeText(roomUrl)
+          setIsCopied(true)
+        }}
+        onHoverChange={setIsHovered}
+      >
+        {isCopied ? (
+          <>
+            <RiCheckLine size={18} style={{ marginRight: '8px' }} />
+            {t('laterMeetingDialog.copied')}
+          </>
+        ) : (
+          <>
+            <RiFileCopyLine
+              size={18}
+              style={{ marginRight: '8px', minWidth: '18px' }}
+            />
+            {isHovered ? (
+              t('laterMeetingDialog.copy')
+            ) : (
+              <div
+                style={{
+                  textOverflow: 'ellipsis',
+                  overflow: 'hidden',
+                  userSelect: 'none',
+                  textWrap: 'nowrap',
+                }}
+              >
+                {roomUrl.replace(/^https?:\/\//, '')}
+              </div>
+            )}
+          </>
+        )}
+      </Button>
+      <HStack>
+        <div
+          style={{
+            backgroundColor: '#d9e5ff',
+            borderRadius: '50%',
+            padding: '4px',
+            marginTop: '1rem',
+          }}
+        >
+          <RiSpam2Fill size={22} style={{ fill: '#4c84fc' }} />
+        </div>
+        <Text variant="sm" style={{ marginTop: '1rem' }}>
+          {t('laterMeetingDialog.permissions')}
+        </Text>
       </HStack>
     </Dialog>
   )
diff --git a/src/frontend/src/locales/de/home.json b/src/frontend/src/locales/de/home.json
index cb738fd9..94366155 100644
--- a/src/frontend/src/locales/de/home.json
+++ b/src/frontend/src/locales/de/home.json
@@ -17,8 +17,8 @@
   "laterMeetingDialog": {
     "heading": "",
     "description": "",
-    "copied": "",
     "copy": "",
-    "inputLabel": ""
+    "copied": "",
+    "permissions": ""
   }
 }
diff --git a/src/frontend/src/locales/en/home.json b/src/frontend/src/locales/en/home.json
index 82b94536..e387c19f 100644
--- a/src/frontend/src/locales/en/home.json
+++ b/src/frontend/src/locales/en/home.json
@@ -17,8 +17,8 @@
   "laterMeetingDialog": {
     "heading": "Your connection details",
     "description": "Send this link to the people you want to invite to the meeting. They will be able to join without Agent Connect.",
-    "copied": "Copied",
-    "copy": "Copy",
-    "inputLabel": "Meeting link"
+    "copy": "Copy the meeting link",
+    "copied": "Link copied to clipboard",
+    "permissions": "People with this link do not need your permission to join this meeting."
   }
 }
diff --git a/src/frontend/src/locales/fr/home.json b/src/frontend/src/locales/fr/home.json
index 70de5daf..53c1925f 100644
--- a/src/frontend/src/locales/fr/home.json
+++ b/src/frontend/src/locales/fr/home.json
@@ -17,8 +17,8 @@
   "laterMeetingDialog": {
     "heading": "Vos informations de connexion",
     "description": "Envoyez ce lien aux personnes que vous souhaitez inviter à la réunion. Ils pourront la rejoindre sans Agent Connect.",
-    "copied": "Lien copié",
-    "copy": "Copier le lien",
-    "inputLabel": "Lien vers la réunion"
+    "copy": "Copier le lien de la réunion",
+    "copied": "Lien copié dans le presse-papiers",
+    "permissions": "Les personnes disposant de ce lien n'ont pas besoin de votre autorisation pour rejoindre cette réunion."
   }
 }