Added copy buttons for room access codes (#5635)

* added copy buttons for access codes

* fixed eslint errors

* repositioned new copy code buttons under existing buttons

* combined copy buttons with dropdown

* code cleanup

* code cleanup

* minor changes

app/assets/locales/en.json

@@ -17,6 +17,8 @@
   "close": "Close",
   "delete": "Delete",
   "copy": "Copy Join Link",
+  "copy_viewer_code": "Copy Viewer Code",
+  "copy_moderator_code": "Copy Moderator Code",
   "or": "Or",
   "online": "Online",
   "help_center": "Help Center",
@@ -392,7 +394,9 @@
         "access_code_copied": "The access code has been copied.",
         "access_code_generated": "A new access code has been generated.",
         "access_code_deleted": "The access code has been deleted.",
-        "copied_meeting_url": "The meeting URL has been copied. The link can be used to join the meeting."
+        "copied_meeting_url": "The meeting URL has been copied. The link can be used to join the meeting.",
+        "copied_viewer_code": "The viewer access code has been copied.",
+        "copied_moderator_code": "The moderator access code has been copied."
       },
       "site_settings": {
         "site_setting_updated": "The site setting has been updated.",

app/assets/stylesheets/rooms.scss

@@ -130,3 +130,7 @@
     padding-top: 2rem;
   }
 }
+
+#dropdown-toggle {
+  min-width: 2px;
+}

app/javascript/components/rooms/room/Room.jsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import {
-  Stack, Button, Col, Row,
+  Stack, Button, Col, Row, Dropdown,
 } from 'react-bootstrap';
 import { Link, useParams } from 'react-router-dom';
 import { HomeIcon, Square2StackIcon } from '@heroicons/react/24/outline';
@@ -32,6 +32,7 @@ import MeetingBadges from '../MeetingBadges';
 import SharedBadge from './SharedBadge';
 import RoomNamePlaceHolder from './RoomNamePlaceHolder';
 import Title from '../../shared_components/utilities/Title';
+import useRoomSettings from '../../../hooks/queries/rooms/useRoomSettings';
 
 export default function Room() {
   const { t } = useTranslation();
@@ -42,11 +43,20 @@ export default function Room() {
   const startMeeting = useStartMeeting(friendlyId);
   const currentUser = useAuth();
   const localizedTime = localizeDayDateTimeString(room?.last_session, currentUser?.language);
+  const roomSettings = useRoomSettings(friendlyId);
 
-  function copyInvite() {
+  function copyInvite(role) {
+    if (role === 'viewer') {
+      navigator.clipboard.writeText(roomSettings?.data?.glViewerAccessCode);
+      toast.success(t('toast.success.room.copied_viewer_code'));
+    } else if (role === 'moderator') {
+      navigator.clipboard.writeText(roomSettings?.data?.glModeratorAccessCode);
+      toast.success(t('toast.success.room.copied_moderator_code'));
+    } else {
       navigator.clipboard.writeText(`${window.location}/join`);
       toast.success(t('toast.success.room.copied_meeting_url'));
     }
+  }
 
   return (
     <>
@@ -60,7 +70,7 @@ export default function Room() {
           </Col>
         </Row>
         <Row className="py-5">
-          <Col className="col-xxl-8">
+          <Col className="col-4">
             {
                 isRoomLoading
                   ? (
@@ -85,7 +95,14 @@ export default function Room() {
               }
           </Col>
           <Col>
-            <Button variant="brand" className="start-meeting-btn mt-1 mx-2 float-end" onClick={startMeeting.mutate} disabled={startMeeting.isLoading}>
+            <Row>
+              <Col className="col-12">
+                <Button
+                  variant="brand"
+                  className="start-meeting-btn mt-1 mx-2 float-end"
+                  onClick={startMeeting.mutate}
+                  disabled={startMeeting.isLoading}
+                >
                   {startMeeting.isLoading && <Spinner className="me-2" />}
                   { room?.online ? (
                     t('room.meeting.join_meeting')
@@ -93,10 +110,35 @@ export default function Room() {
                     t('room.meeting.start_meeting')
                   )}
                 </Button>
-            <Button variant="brand-outline" className="mt-1 mx-2 float-end" onClick={() => copyInvite()}>
+
+                <Dropdown className="btn-group mt-1 mx-2 float-end pb-5">
+                  <Button variant="brand-outline" type="button" className="btn dropdown-main" onClick={() => copyInvite()}>
                     <Square2StackIcon className="hi-s me-1" />
                     { t('copy') }
                   </Button>
+                  { (roomSettings?.data?.glModeratorAccessCode || roomSettings?.data?.glViewerAccessCode) && (
+                    <Dropdown.Toggle
+                      variant="brand-outline"
+                      className="btn dropdown-toggle dropdown-toggle-split"
+                      id="dropdown-toggle"
+                    />
+                  )}
+
+                  <Dropdown.Menu className="dropdown-menu">
+                    { roomSettings?.data?.glModeratorAccessCode && (
+                      <Dropdown.Item onClick={() => copyInvite('moderator')}>
+                        { t('copy_moderator_code') }
+                      </Dropdown.Item>
+                    )}
+                    { roomSettings?.data?.glViewerAccessCode && (
+                      <Dropdown.Item onClick={() => copyInvite('viewer')}>
+                        { t('copy_viewer_code') }
+                      </Dropdown.Item>
+                    )}
+                  </Dropdown.Menu>
+                </Dropdown>
+              </Col>
+            </Row>
           </Col>
         </Row>
       </div>