@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/components/Chat/ChatHeader.jsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { ChevronDownIcon, ChevronUpIcon, CrossIcon } from '@100mslive/react-icons';
+import { Box, Dropdown, Flex, IconButton, Text, textEllipsis } from '../../../';
+import { ChatSelector } from './ChatSelector';
+import { useSidepaneToggle } from '../AppData/useSidepane';
+import { SIDE_PANE_OPTIONS } from '../../common/constants';
+
+export const ChatHeader = React.memo(({ selection, selectorOpen, onToggle, onSelect, role, peerId }) => {
+  const [open, setOpen] = useState(false);
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  return (
+    <Flex
+      onClick={onToggle}
+      align="center"
+      css={{
+        color: '$textPrimary',
+        h: '$16',
+        mb: '$2',
+      }}
+    >
+      <Text variant="h6">Chat </Text>
+      <Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>
+        <Dropdown.Trigger
+          asChild
+          data-testid="participant_list_filter"
+          css={{
+            border: '1px solid $textDisabled',
+            r: '$0',
+            p: '$2 $4',
+            ml: '$8',
+          }}
+          tabIndex={0}
+        >
+          <Flex align="center">
+            <Text variant="sm" css={{ ...textEllipsis(80) }}>
+              {selection}
+            </Text>
+            <Box css={{ ml: '$2', color: '$textDisabled' }}>
+              {open ? <ChevronUpIcon width={14} height={14} /> : <ChevronDownIcon width={14} height={14} />}
+            </Box>
+          </Flex>
+        </Dropdown.Trigger>
+        <Dropdown.Content
+          css={{
+            w: '$64',
+            overflow: 'hidden',
+            maxHeight: 'unset',
+          }}
+          align="start"
+          sideOffset={8}
+        >
+          <ChatSelector onSelect={onSelect} role={role} peerId={peerId} />
+        </Dropdown.Content>
+      </Dropdown.Root>
+      <IconButton
+        css={{ ml: 'auto' }}
+        onClick={e => {
+          e.stopPropagation();
+          selectorOpen ? onToggle() : toggleChat();
+        }}
+        data-testid="close_chat"
+      >
+        <CrossIcon />
+      </IconButton>
+    </Flex>
+  );
+});

package/src/Prebuilt/components/Chat/ChatSelector.jsx

@@ -0,0 +1,162 @@
+import React, { Fragment, useMemo, useState } from 'react';
+import { useMeasure } from 'react-use';
+import { FixedSizeList } from 'react-window';
+import {
+  selectMessagesUnreadCountByPeerID,
+  selectMessagesUnreadCountByRole,
+  selectRemotePeers,
+  selectUnreadHMSMessagesCount,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { CheckIcon } from '@100mslive/react-icons';
+import { Box, Dropdown, Flex, HorizontalDivider, Text, Tooltip } from '../../../';
+import { ParticipantSearch } from '../Header/ParticipantList';
+import { useFilteredRoles } from '../../common/hooks';
+
+const ChatDotIcon = () => {
+  return <Box css={{ size: '$6', bg: '$brandDefault', mx: '$2', r: '$round' }} />;
+};
+
+const SelectorItem = ({ value, active, onClick, unreadCount }) => {
+  return (
+    <Dropdown.Item data-testid="chat_members" css={{ align: 'center', px: '$10' }} onClick={onClick}>
+      <Text variant="sm">{value}</Text>
+      <Flex align="center" css={{ ml: 'auto', color: '$textPrimary' }}>
+        {unreadCount > 0 && (
+          <Tooltip title={`${unreadCount} unread`}>
+            <Box css={{ mr: active ? '$3' : 0 }}>
+              <ChatDotIcon />
+            </Box>
+          </Tooltip>
+        )}
+        {active && <CheckIcon width={16} height={16} />}
+      </Flex>
+    </Dropdown.Item>
+  );
+};
+
+const SelectorHeader = React.memo(({ children }) => {
+  return (
+    <Box css={{ flexShrink: 0 }}>
+      <HorizontalDivider space={4} />
+      <Text variant="md" css={{ p: '$4 $10', fontWeight: '$semiBold' }}>
+        {children}
+      </Text>
+    </Box>
+  );
+});
+
+const Everyone = React.memo(({ onSelect, active }) => {
+  const unreadCount = useHMSStore(selectUnreadHMSMessagesCount);
+  return (
+    <SelectorItem
+      value="Everyone"
+      active={active}
+      unreadCount={unreadCount}
+      onClick={() => {
+        onSelect({ role: '', peerId: '', selection: 'Everyone' });
+      }}
+    />
+  );
+});
+
+const RoleItem = React.memo(({ onSelect, role, active }) => {
+  const unreadCount = useHMSStore(selectMessagesUnreadCountByRole(role));
+  return (
+    <SelectorItem
+      value={role}
+      active={active}
+      unreadCount={unreadCount}
+      onClick={() => {
+        onSelect({ role: role, selection: role });
+      }}
+    />
+  );
+});
+
+const PeerItem = ({ onSelect, peerId, name, active }) => {
+  const unreadCount = useHMSStore(selectMessagesUnreadCountByPeerID(peerId));
+  return (
+    <SelectorItem
+      value={name}
+      active={active}
+      unreadCount={unreadCount}
+      onClick={() => {
+        onSelect({ role: '', peerId, selection: name });
+      }}
+    />
+  );
+};
+
+const VirtualizedSelectItemList = ({ peers, selectedRole, selectedPeerId, searchValue, onSelect }) => {
+  const [ref, { width, height }] = useMeasure();
+  const roles = useFilteredRoles();
+  const filteredPeers = useMemo(
+    () =>
+      peers.filter(
+        // search should be empty or search phrase should be included in name
+        peer => !searchValue || peer.name.toLowerCase().includes(searchValue.toLowerCase()),
+      ),
+    [peers, searchValue],
+  );
+
+  const listItems = useMemo(() => {
+    const selectItems = [<Everyone onSelect={onSelect} active={!selectedRole && !selectedPeerId} />];
+
+    roles.length > 0 && selectItems.push(<SelectorHeader>Roles</SelectorHeader>);
+    roles.forEach(userRole =>
+      selectItems.push(
+        <RoleItem key={userRole} active={selectedRole === userRole} role={userRole} onSelect={onSelect} />,
+      ),
+    );
+
+    filteredPeers.length > 0 && selectItems.push(<SelectorHeader>Participants</SelectorHeader>);
+    filteredPeers.forEach(peer =>
+      selectItems.push(
+        <PeerItem
+          key={peer.id}
+          name={peer.name}
+          peerId={peer.id}
+          active={peer.id === selectedPeerId}
+          onSelect={onSelect}
+        />,
+      ),
+    );
+
+    return selectItems;
+  }, [onSelect, selectedRole, selectedPeerId, roles, filteredPeers]);
+
+  return (
+    <Dropdown.Group ref={ref} css={{ height: '$64', overflowY: 'auto' }}>
+      <FixedSizeList itemSize={52} itemCount={listItems.length} width={width} height={height}>
+        {({ index, style }) => (
+          <div style={style} key={index}>
+            {listItems[index]}
+          </div>
+        )}
+      </FixedSizeList>
+    </Dropdown.Group>
+  );
+};
+
+export const ChatSelector = ({ role, peerId, onSelect }) => {
+  const peers = useHMSStore(selectRemotePeers);
+  const [search, setSearch] = useState('');
+
+  return (
+    <Fragment>
+      {peers.length > 0 && (
+        <Box css={{ px: '$8' }}>
+          <ParticipantSearch onSearch={setSearch} placeholder="Search participants" />
+        </Box>
+      )}
+      <VirtualizedSelectItemList
+        selectedRole={role}
+        selectedPeerId={peerId}
+        onSelect={onSelect}
+        peers={peers}
+        searchValue={search}
+      />
+    </Fragment>
+  );
+};

package/src/Prebuilt/components/Chat/useEmojiPickerStyles.js

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react';
+
+export const useEmojiPickerStyles = showing => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (showing) {
+      setTimeout(() => {
+        const root = ref.current?.querySelector('em-emoji-picker')?.shadowRoot;
+        const style = document.createElement('style');
+        style.textContent = `
+          #root {
+            --em-rgb-color: var(--hms-ui-colors-textPrimary);
+            --em-rgb-input: var(--hms-ui-colors-textPrimary);
+            --em-color-border: var(--hms-ui-colors-surfaceDefault);
+            --color-b: var(--hms-ui-colors-textPrimary);
+            --rgb-background: transparent;
+            color: var(--hms-ui-colors-textPrimary);
+            font-family: var(--hms-ui-fonts-sans);
+          }
+          .sticky {
+            background-color: var(--hms-ui-colors-surfaceLight);
+          }
+        `;
+        root?.appendChild(style);
+      }, 0);
+    }
+  }, [showing]);
+
+  return ref;
+};

package/src/Prebuilt/components/Chat/useUnreadCount.js

@@ -0,0 +1,17 @@
+import {
+  selectMessagesUnreadCountByPeerID,
+  selectMessagesUnreadCountByRole,
+  selectUnreadHMSMessagesCount,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+
+export const useUnreadCount = ({ role, peerId }) => {
+  const unreadCountSelector = role
+    ? selectMessagesUnreadCountByRole(role)
+    : peerId
+    ? selectMessagesUnreadCountByPeerID(peerId)
+    : selectUnreadHMSMessagesCount;
+
+  const unreadCount = useHMSStore(unreadCountSelector);
+  return unreadCount;
+};

package/src/Prebuilt/components/Connection/ConnectionIndicator.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { selectConnectionQualityByPeerID, useHMSStore } from '@100mslive/react-sdk';
+import { PoorConnectivityIcon } from '@100mslive/react-icons';
+import { styled, Tooltip, useTheme } from '../../../';
+import { getColor, getTooltipText } from './connectionQualityUtils';
+
+const Wrapper = styled('span', {
+  width: '28px',
+  height: '28px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: '$transparentBg',
+  borderRadius: '$round',
+  variants: {
+    isTile: {
+      true: {
+        width: 'unset',
+        height: 'unset',
+      },
+    },
+  },
+});
+
+export const ConnectionIndicator = ({ peerId, isTile = false }) => {
+  const downlinkQuality = useHMSStore(selectConnectionQualityByPeerID(peerId))?.downlinkQuality;
+  const { theme } = useTheme();
+  const defaultColor = theme.colors.bgTertiary;
+  if (downlinkQuality === -1 || downlinkQuality === undefined) {
+    return null;
+  }
+  if (downlinkQuality === 0) {
+    return (
+      <Tooltip title={getTooltipText(downlinkQuality)}>
+        <Wrapper isTile={isTile} css={{ color: '#ED4C5A' }} data-testid="tile_network">
+          <PoorConnectivityIcon />
+        </Wrapper>
+      </Tooltip>
+    );
+  }
+  const size = isTile ? 12 : 16;
+  return (
+    <Tooltip title={getTooltipText(downlinkQuality)}>
+      <Wrapper isTile={isTile} data-testid="tile_network">
+        <svg
+          width={size}
+          height={size}
+          viewBox="0 0 14 12"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlSpace="preserve"
+          style={{
+            fillRule: 'evenodd',
+            clipRule: 'evenodd',
+            strokeLinejoin: 'round',
+            strokeMiterlimit: 2,
+          }}
+        >
+          <path
+            d="M6.875 0c2.549.035 4.679.902 6.445 2.648.366.362.45.796.216 1.096-.239.306-.714.34-1.142.072a2.28 2.28 0 0 1-.341-.271C9.24.862 4.924.775 1.992 3.346c-.284.249-.594.419-.983.393-.272-.019-.49-.135-.613-.388-.125-.261-.05-.498.114-.713.073-.092.156-.177.245-.254C2.516.804 4.591.039 6.875 0Z"
+            fill={getColor(4, downlinkQuality, defaultColor)}
+            transform="translate(-.333)"
+          />
+          <path
+            d="M7.056 2.964c1.756.035 3.208.7 4.499 1.763.162.134.277.315.354.512.098.251.114.503-.075.72-.193.222-.452.259-.725.198-.293-.066-.518-.247-.738-.443a4.859 4.859 0 0 0-6.198-.26c-.166.127-.318.271-.475.409-.242.211-.513.343-.843.317-.43-.034-.679-.397-.561-.81.062-.211.181-.4.345-.546 1.265-1.162 2.733-1.836 4.417-1.86Z"
+            fill={getColor(3, downlinkQuality, defaultColor)}
+            transform="translate(-.333)"
+          />
+          <path
+            d="M7.384,6.052C8.293,6.068 9.157,6.449 9.783,7.108C10.005,7.339 10.157,7.6 10.07,7.942C9.959,8.377 9.435,8.581 9.071,8.243C7.935,7.191 6.356,7.183 5.152,8.183C4.816,8.462 4.6,8.485 4.332,8.27C4.063,8.055 3.998,7.691 4.177,7.358C4.273,7.179 4.414,7.038 4.57,6.911C5.26,6.349 6.149,6.05 7.384,6.052L7.384,6.052Z"
+            fill={getColor(2, downlinkQuality, defaultColor)}
+          />
+          <path
+            d="M8.214,9.941C8.214,10.234 8.097,10.515 7.888,10.721C7.68,10.928 7.398,11.042 7.104,11.039C6.471,11.036 5.982,10.541 5.993,9.912C6.004,9.259 6.499,8.766 7.133,8.779C7.744,8.791 8.22,9.301 8.214,9.941Z"
+            fill={getColor(1, downlinkQuality, defaultColor)}
+          />
+        </svg>
+      </Wrapper>
+    </Tooltip>
+  );
+};

package/src/Prebuilt/components/Connection/TileConnection.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { styled, Text, textEllipsis } from '../../../';
+import { ConnectionIndicator } from './ConnectionIndicator';
+
+const TileConnection = ({ name, peerId, hideLabel, width }) => {
+  return (
+    <Wrapper>
+      {!hideLabel ? (
+        <Text
+          css={{
+            c: '$textHighEmp',
+            ...textEllipsis(width - 60),
+          }}
+          variant="xs"
+        >
+          {name}
+        </Text>
+      ) : null}
+      <ConnectionIndicator isTile peerId={peerId} />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  position: 'absolute',
+  bottom: '$2',
+  left: '$2',
+  backgroundColor: '$backgroundDark',
+  borderRadius: '$1',
+  maxWidth: '85%',
+  zIndex: 1,
+  '& p,span': {
+    p: '$2 $3',
+  },
+});
+
+export default TileConnection;

package/src/Prebuilt/components/Connection/connectionQualityUtils.js

@@ -0,0 +1,39 @@
+const connectionTooltip = {
+  0: 'Reconnecting',
+  1: 'Very Bad Connection',
+  2: 'Bad Connection',
+  3: 'Moderate Connection',
+  4: 'Good Connection',
+  5: 'Excellent Connection',
+};
+connectionTooltip[-1] = 'Network Unknown';
+
+/**
+ * @param connectionScore -> 1-5 connection score for network quality
+ */
+export const getTooltipText = connectionScore => {
+  return connectionTooltip[connectionScore];
+};
+
+/**
+ * position is needed here as we don't want all the dots/arcs to be colored,
+ * the non colored ones will be passed in the default color. If user is
+ * disconnected(score=0), no dot/arc will be colored.
+ * @param position -> 1 to 5
+ * @param connectionScore -> 0 to 5, 0 means disconnected
+ * @param defaultColor -> color for components not taking the connection color
+ */
+export const getColor = (position, connectionScore, defaultColor) => {
+  const shouldBeColored = position <= connectionScore;
+  if (!shouldBeColored) {
+    return defaultColor;
+  }
+  if (connectionScore >= 4) {
+    return '#37F28D';
+  } else if (connectionScore >= 3) {
+    return '#FAC919';
+  } else if (connectionScore >= 1) {
+    return '#ED4C5A';
+  }
+  return defaultColor;
+};

package/src/Prebuilt/components/EmojiReaction.jsx

@@ -0,0 +1,138 @@
+import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import data from '@emoji-mart/data/sets/14/apple.json';
+import { init } from 'emoji-mart';
+import {
+  selectAvailableRoleNames,
+  selectIsConnectedToRoom,
+  selectLocalPeerID,
+  selectLocalPeerRoleName,
+  useCustomEvent,
+  useHMSActions,
+  useHMSStore,
+  useRecordingStreaming,
+} from '@100mslive/react-sdk';
+import { EmojiIcon } from '@100mslive/react-icons';
+import { Dropdown } from '../../Dropdown';
+import { Box, Flex } from '../../Layout';
+import { Text } from '../../Text';
+import { styled } from '../../Theme';
+import { Tooltip } from '../../Tooltip';
+import IconButton from '../IconButton';
+import { useHLSViewerRole } from './AppData/useUISettings';
+import { useDropdownList } from './hooks/useDropdownList';
+import { useIsFeatureEnabled } from './hooks/useFeatures';
+import { EMOJI_REACTION_TYPE, FEATURE_LIST, HLS_TIMED_METADATA_DOC_URL } from '../common/constants';
+
+init({ data });
+
+// When changing emojis in the grid, keep in mind that the payload used in sendHLSTimedMetadata has a limit of 100 characters. Using bigger emoji Ids can cause the limit to be exceeded.
+const emojiReactionList = [
+  [{ emojiId: '+1' }, { emojiId: '-1' }, { emojiId: 'wave' }, { emojiId: 'clap' }, { emojiId: 'fire' }],
+  [{ emojiId: 'tada' }, { emojiId: 'heart_eyes' }, { emojiId: 'joy' }, { emojiId: 'open_mouth' }, { emojiId: 'sob' }],
+];
+
+export const EmojiReaction = () => {
+  const [open, setOpen] = useState(false);
+  const hmsActions = useHMSActions();
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const roles = useHMSStore(selectAvailableRoleNames);
+  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  const hlsViewerRole = useHLSViewerRole();
+  const { isStreamingOn } = useRecordingStreaming();
+  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.EMOJI_REACTION);
+  const filteredRoles = useMemo(() => roles.filter(role => role !== hlsViewerRole), [roles, hlsViewerRole]);
+  useDropdownList({ open: open, name: 'EmojiReaction' });
+
+  const onEmojiEvent = useCallback(data => {
+    window.showFlyingEmoji(data?.emojiId, data?.senderId);
+  }, []);
+
+  const { sendEvent } = useCustomEvent({
+    type: EMOJI_REACTION_TYPE,
+    onEvent: onEmojiEvent,
+  });
+
+  const sendReaction = async emojiId => {
+    const data = {
+      type: EMOJI_REACTION_TYPE,
+      emojiId: emojiId,
+      senderId: localPeerId,
+    };
+    sendEvent(data, { roleNames: filteredRoles });
+    if (isStreamingOn) {
+      await hmsActions.sendHLSTimedMetadata([
+        {
+          payload: JSON.stringify(data),
+          duration: 2,
+        },
+      ]);
+    }
+  };
+
+  if (!isConnected || localPeerRole === hlsViewerRole || !isFeatureEnabled) {
+    return null;
+  }
+  return (
+    <Fragment>
+      <Dropdown.Root open={open} onOpenChange={setOpen}>
+        <Dropdown.Trigger asChild data-testid="emoji_reaction_btn">
+          <IconButton>
+            <Tooltip title="Emoji reaction">
+              <Box>
+                <EmojiIcon />
+              </Box>
+            </Tooltip>
+          </IconButton>
+        </Dropdown.Trigger>
+        <Dropdown.Content sideOffset={5} align="center" css={{ p: '$8', bg: '$surfaceDefault' }}>
+          {emojiReactionList.map((emojiLine, index) => (
+            <Flex key={index} justify="between" css={{ mb: '$8' }}>
+              {emojiLine.map(emoji => (
+                <EmojiContainer key={emoji.emojiId} onClick={() => sendReaction(emoji.emojiId)}>
+                  <em-emoji id={emoji.emojiId} size="100%" set="apple"></em-emoji>
+                </EmojiContainer>
+              ))}
+            </Flex>
+          ))}
+          <div style={{ textAlign: 'center' }}>
+            <Text
+              variant="sm"
+              inline={true}
+              css={{
+                color: '$textSecondary',
+              }}
+            >
+              Reactions will be timed for Live Streaming viewers.{' '}
+            </Text>
+            <Text
+              variant="sm"
+              inline={true}
+              css={{
+                color: '$primaryLight',
+                fontWeight: '$semiBold',
+              }}
+            >
+              <a href={HLS_TIMED_METADATA_DOC_URL} target="_blank" rel="noopener noreferrer">
+                {'Learn more ->'}
+              </a>
+            </Text>
+          </div>
+        </Dropdown.Content>
+      </Dropdown.Root>
+    </Fragment>
+  );
+};
+
+const EmojiContainer = styled('span', {
+  position: 'relative',
+  cursor: 'pointer',
+  width: '$16',
+  height: '$16',
+  p: '$4',
+  '&:hover': {
+    p: '7px',
+    bg: '$surfaceLighter',
+    borderRadius: '$1',
+  },
+});

package/src/Prebuilt/components/ErrorBoundary.jsx

@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import { logMessage } from 'zipyai';
+import { CopyIcon } from '@100mslive/react-icons';
+import { Button } from '../../Button';
+import { Box, Flex } from '../../Layout';
+import { Text } from '../../Text';
+import { Tooltip } from '../../Tooltip';
+import { ErrorWithSupportLink } from './AuthToken';
+
+export class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null, errorInfo: null, isErrorCopied: false };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error(`react error boundary - ${error.message}`, error, errorInfo);
+    // Catch errors in any components below and re-render with error message
+    this.setState(
+      {
+        error: error?.message,
+        errorInfo: errorInfo,
+      },
+      () => {
+        logMessage(`uiError - ${this.state.error} - ${JSON.stringify(this.state.errorInfo)}`);
+      },
+    );
+  }
+
+  render() {
+    if (this.state.errorInfo) {
+      return (
+        <Flex
+          align="center"
+          justify="center"
+          css={{
+            size: '100%',
+            height: '100vh',
+            width: '100%',
+            color: '$textPrimary',
+            backgroundColor: 'black',
+          }}
+        >
+          <Box css={{ position: 'relative', overflow: 'hidden', r: '$3', height: '100%', width: '100%' }}>
+            <Flex
+              direction="column"
+              css={{
+                position: 'absolute',
+                size: '100%',
+                top: '33.33%',
+                left: 0,
+              }}
+            >
+              <div style={{ margin: '1.5rem', width: '100%' }}>
+                <Text>Something went wrong</Text>
+                <Text>Message: ${this.state.error}</Text>
+                <br />
+                {ErrorWithSupportLink(`Please reload to see if it works.`)}
+              </div>
+              <Flex>
+                <Tooltip title="Reload page">
+                  <Button
+                    onClick={() => {
+                      window.location.reload();
+                    }}
+                    css={{ mx: '$8' }}
+                    data-testid="join_again_btn"
+                  >
+                    Reload
+                  </Button>
+                </Tooltip>
+                <Tooltip title="Copy error details to clipboard">
+                  <Button
+                    onClick={() => {
+                      const { error, errorInfo } = this.state;
+                      navigator.clipboard.writeText(
+                        JSON.stringify({
+                          error,
+                          errorInfo,
+                        }),
+                      );
+                      this.setState({ isErrorCopied: true });
+                    }}
+                    css={{ mx: '$8' }}
+                    data-testid="join_again_btn"
+                  >
+                    <CopyIcon /> {this.state.isErrorCopied ? 'Copied' : 'Copy Details'}
+                  </Button>
+                </Tooltip>
+              </Flex>
+
+              <details style={{ whiteSpace: 'pre-wrap', margin: '1.5rem' }}>
+                <Text>{this.state.error && this.state.error.toString()}</Text>
+                <br />
+                <Text>{JSON.stringify(this.state.errorInfo)}</Text>
+              </details>
+            </Flex>
+          </Box>
+        </Flex>
+      );
+    }
+
+    return this.props.children;
+  }
+}