@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

package/src/Prebuilt/components/EndCallFeedback/FeedbackForm.tsx

@@ -1,381 +0,0 @@
-import React, { useState } from 'react';
-import { useMedia } from 'react-use';
-import { Rating } from '@100mslive/types-prebuilt/elements/feedback';
-import { useHMSActions } from '@100mslive/react-sdk';
-import { CheckIcon, CrossIcon } from '@100mslive/react-icons';
-import { Button } from '../../../Button';
-import { Checkbox } from '../../../Checkbox';
-import { Label } from '../../../Label';
-import { Flex } from '../../../Layout';
-import { Dialog } from '../../../Modal';
-import { Sheet } from '../../../Sheet';
-import { Text } from '../../../Text';
-import { TextArea } from '../../../TextArea';
-import { config as cssConfig } from '../../../Theme';
-import { useHMSPrebuiltContext } from '../../AppContext';
-import { useRoomLayoutLeaveScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-
-export const FEEBACK_INDEX = {
-  THANK_YOU: -10,
-  INIT: -1,
-};
-export const FeedbackModal = ({
-  ratings,
-  index,
-  setIndex,
-}: {
-  ratings: Rating[];
-  index: number;
-  setIndex: (index: number) => void;
-}) => {
-  const isMobile = useMedia(cssConfig.media.md);
-  const onOpenChange = () => {
-    setIndex(FEEBACK_INDEX.INIT);
-  };
-  const avoidDefaultDomBehavior = (e: Event) => {
-    e.preventDefault();
-  };
-  if (isMobile) {
-    return (
-      <Sheet.Root open={index !== FEEBACK_INDEX.INIT} onOpenChange={onOpenChange}>
-        <Sheet.Content
-          css={{ bg: '$surface_dim', p: '$10', overflowY: 'auto' }}
-          onPointerDownOutside={avoidDefaultDomBehavior}
-          onInteractOutside={avoidDefaultDomBehavior}
-        >
-          <FeedbackContent ratings={ratings} indexSelected={index} setIndex={setIndex} />
-        </Sheet.Content>
-      </Sheet.Root>
-    );
-  }
-  return (
-    <Dialog.Root open={index !== FEEBACK_INDEX.INIT} onOpenChange={onOpenChange}>
-      <Dialog.Portal>
-        <Dialog.Overlay />
-        <Dialog.Content
-          css={{ bg: '$surface_dim', width: '528px', p: '$12' }}
-          onPointerDownOutside={avoidDefaultDomBehavior}
-          onInteractOutside={avoidDefaultDomBehavior}
-        >
-          <FeedbackContent ratings={ratings} indexSelected={index} setIndex={setIndex} />
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};
-
-export const FeedbackContent = ({
-  ratings,
-  indexSelected,
-  setIndex,
-}: {
-  ratings: Rating[];
-  indexSelected: number;
-  setIndex: (index: number) => void;
-}) => {
-  const { feedback } = useRoomLayoutLeaveScreen();
-  const { endpoints } = useHMSPrebuiltContext();
-  const isMobile = useMedia(cssConfig.media.md);
-  const hmsActions = useHMSActions();
-  const [comment, setComment] = useState('');
-  const [selectedReasons, setSelectedReasons] = useState(new Set<number>());
-  const handleCheckedChange = (checked: boolean | string, index: number) => {
-    const newSelected = new Set(selectedReasons);
-    if (checked) {
-      newSelected.add(index);
-    } else {
-      newSelected.delete(index);
-    }
-    setSelectedReasons(newSelected);
-  };
-  const submitFeedback = async () => {
-    if (indexSelected < 0 || ratings.length <= indexSelected) {
-      return;
-    }
-    try {
-      const reasons = [...selectedReasons].map((value: number) => ratings[indexSelected]?.reasons?.[value] || '');
-      await hmsActions.submitSessionFeedback(
-        {
-          question: `${feedback?.title} | ${ratings[indexSelected].question || ''}`,
-          rating: ratings[indexSelected].value || 1,
-          min_rating: 1,
-          max_rating: ratings.length,
-          reasons: selectedReasons.size === 0 ? [] : reasons,
-          comment: comment,
-        },
-        endpoints?.event,
-      );
-    } catch (e) {
-      console.error(e);
-    }
-    // always submit and take it to thankyou page
-    setIndex(FEEBACK_INDEX.THANK_YOU);
-  };
-  return (
-    <Flex
-      css={{
-        p: indexSelected === FEEBACK_INDEX.INIT ? '$12 !important' : '0',
-        bg: '$surface_dim',
-        r: '$3',
-        gap: '$10',
-      }}
-      direction="column"
-    >
-      <FeedbackHeader
-        ratings={ratings}
-        indexSelected={indexSelected}
-        onEmojiClicked={(value: number) => {
-          setSelectedReasons(new Set<number>());
-          setIndex(value);
-        }}
-      />
-      <FeedbackForm
-        rating={ratings[indexSelected]}
-        comment={comment}
-        setComment={setComment}
-        selectedReasons={selectedReasons}
-        handleCheckedChange={handleCheckedChange}
-      />
-      <Button
-        type="submit"
-        icon
-        css={{
-          alignSelf: isMobile ? '' : 'end',
-        }}
-        onClick={submitFeedback}
-      >
-        {feedback?.submit_btn_label || 'Submit Feedback'}
-      </Button>
-    </Flex>
-  );
-};
-export const FeedbackHeader = ({
-  onEmojiClicked,
-  ratings,
-  indexSelected = FEEBACK_INDEX.INIT,
-}: {
-  onEmojiClicked: (index: number) => void;
-  ratings: Rating[];
-  indexSelected?: number;
-}) => {
-  const isMobile = useMedia(cssConfig.media.md);
-  const { feedback } = useRoomLayoutLeaveScreen();
-  return (
-    <>
-      <Flex align="center">
-        <Flex
-          direction="column"
-          css={{
-            flex: '1 1 0',
-          }}
-        >
-          <Text
-            variant={isMobile ? 'h6' : 'h5'}
-            css={{
-              c: '$on_surface_high',
-              fontStyle: 'normal',
-            }}
-          >
-            {feedback?.title || 'How was your experience?'}
-          </Text>
-          <Text
-            variant={isMobile ? 'body2' : 'body1'}
-            css={{
-              c: '$on_surface_medium',
-              opacity: 0.9,
-              fontWeight: '$regular',
-            }}
-          >
-            {feedback?.sub_title || 'Your answers help us improve the quality.'}
-          </Text>
-        </Flex>
-        {indexSelected !== FEEBACK_INDEX.INIT ? (
-          <CrossIcon width="24px" height="24px" color="white" onClick={() => onEmojiClicked(FEEBACK_INDEX.INIT)} />
-        ) : null}
-      </Flex>
-      <Flex
-        justify="between"
-        css={{
-          gap: '$17',
-          c: '$on_surface_high',
-          '@md': {
-            gap: '0',
-          },
-        }}
-      >
-        {ratings.map((element, index) => {
-          return (
-            <Flex
-              align="center"
-              direction="column"
-              css={{
-                c:
-                  indexSelected === index || indexSelected === FEEBACK_INDEX.INIT
-                    ? '$on_surface_high'
-                    : '$on_surface_default',
-                gap: '$4',
-              }}
-              onClick={() => onEmojiClicked(index)}
-              key={`${index}`}
-            >
-              <Text
-                css={{
-                  fontWeight: '$semiBold',
-                  fontSize: '$h4',
-                  pb: '$1',
-                  cursor: 'pointer',
-                  opacity: indexSelected === index || indexSelected === FEEBACK_INDEX.INIT ? 1 : 0.2,
-                  '@md': {
-                    fontSize: '$h5',
-                  },
-                }}
-              >
-                {element.emoji}
-              </Text>
-              <Text
-                variant={isMobile ? 'body2' : 'body1'}
-                css={{
-                  c:
-                    indexSelected === index || indexSelected === FEEBACK_INDEX.INIT
-                      ? '$on_surface_medium'
-                      : '$on_surface_low',
-                  fontWeight: '$regular',
-                }}
-              >
-                {element.label}
-              </Text>
-            </Flex>
-          );
-        })}
-      </Flex>
-    </>
-  );
-};
-export const FeedbackForm = ({
-  rating,
-  comment,
-  setComment,
-  selectedReasons,
-  handleCheckedChange,
-}: {
-  rating: Rating;
-  comment: string;
-  setComment: (value: string) => void;
-  selectedReasons: Set<number>;
-  handleCheckedChange: (checked: string | boolean, index: number) => void;
-}) => {
-  const { feedback } = useRoomLayoutLeaveScreen();
-  return (
-    <>
-      {rating.reasons && rating.reasons.length > 0 && (
-        <Flex
-          direction="column"
-          css={{
-            gap: '$4',
-          }}
-        >
-          <Text
-            variant="sub2"
-            css={{
-              c: '$on_surface_high',
-              fontWeight: '$semiBold',
-              fontSize: '$sm',
-              px: '$2',
-            }}
-          >
-            {rating.question || 'What do you like/dislike here?'}
-          </Text>
-          <Flex
-            css={{
-              alignItems: 'flex-start',
-              alignSelf: 'stretch',
-              flexWrap: 'wrap',
-              gap: '$6',
-              flex: '1 1 calc(25% - 12px)',
-              '@md': {
-                flex: '1 1 calc(50% - 12px)',
-              },
-              '@sm': {
-                flex: '1 1 100%',
-              },
-            }}
-          >
-            {rating.reasons.map((option: string, index: number) => {
-              return (
-                <Flex
-                  align="center"
-                  gap="2"
-                  key={index}
-                  css={{
-                    border: '1px solid $border_bright',
-                    r: '$1',
-                    p: '$6',
-                  }}
-                >
-                  <Checkbox.Root
-                    id={`${option}-${index}`}
-                    checked={selectedReasons.has(index)}
-                    onCheckedChange={checked => handleCheckedChange(checked, index)}
-                    css={{
-                      cursor: 'pointer',
-                      flexShrink: 0,
-                      bg: '$on_secondary_low',
-                      border: '1px solid $border_bright',
-                    }}
-                  >
-                    <Checkbox.Indicator>
-                      <CheckIcon width={12} height={12} />
-                    </Checkbox.Indicator>
-                  </Checkbox.Root>
-                  <Label
-                    htmlFor={`${option}-${index}`}
-                    css={{
-                      color: '$on_surface_high',
-                      fontSize: '$sm',
-                      fontWeight: '$regular',
-                      lineHeight: '20px' /* 142.857% */,
-                    }}
-                  >
-                    {option}
-                  </Label>
-                </Flex>
-              );
-            })}
-          </Flex>
-        </Flex>
-      )}
-      {feedback?.comment && (
-        <Flex
-          direction="column"
-          css={{
-            gap: '$4',
-          }}
-        >
-          <Text
-            variant="body2"
-            css={{
-              c: '$on_surface_high',
-              fontWeight: '$regular',
-              fontSize: '$sm',
-            }}
-          >
-            {feedback?.comment.label || 'Additional comments (optional)'}
-          </Text>
-          <TextArea
-            maxLength={1024}
-            placeholder={feedback?.comment.placeholder || 'Tell us more...'}
-            css={{
-              backgroundColor: '$surface_bright',
-              border: '1px solid $border_bright',
-              resize: 'none',
-              height: '$36',
-              display: 'flex',
-            }}
-            value={comment}
-            onChange={event => setComment(event.target.value.trimStart())}
-          />
-        </Flex>
-      )}
-    </>
-  );
-};

package/src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx

@@ -1,64 +0,0 @@
-import React, { useState } from 'react';
-import { useMedia } from 'react-use';
-import { CrossIcon, UserMusicIcon } from '@100mslive/react-icons';
-import { Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-import { config as cssConfig } from '../../../Theme';
-
-export const ThankyouView = () => {
-  const [isVisible, setIsVisible] = useState(true);
-  const isMobile = useMedia(cssConfig.media.md);
-
-  if (!isVisible) {
-    return null;
-  }
-
-  return (
-    <Flex
-      direction={isMobile ? 'column' : 'row'}
-      align="center"
-      css={{
-        gap: '$10',
-        border: '1px solid $border_default',
-        borderRadius: !isMobile ? '$3' : '$3 $3 0 0',
-        bg: '$surface_dim',
-        w: !isMobile ? '528px' : '410px',
-        p: '$12',
-        pb: isMobile ? '$16' : '$12',
-        '@md': {
-          position: 'absolute',
-          bottom: '0',
-        },
-      }}
-    >
-      {isMobile && (
-        <CrossIcon
-          width="24px"
-          height="24px"
-          color="white"
-          onClick={() => setIsVisible(false)}
-          style={{
-            position: 'absolute',
-            top: '8px',
-            right: '16px',
-            cursor: 'pointer',
-          }}
-        />
-      )}
-      <UserMusicIcon width="64px" height="64px" />
-      <Flex direction="column" align={isMobile ? 'center' : 'start'}>
-        <Text variant="h5">Thank you for your feedback</Text>
-        <Text
-          variant="body1"
-          css={{
-            fontWeight: '$regular',
-            fontSize: '$md',
-            opacity: '0.9',
-          }}
-        >
-          Your answers help us improve.
-        </Text>
-      </Flex>
-    </Flex>
-  );
-};

package/src/Prebuilt/components/ErrorBoundary.jsx

@@ -1,102 +0,0 @@
-import React, { Component } from 'react';
-import { CopyIcon } from '@100mslive/react-icons';
-import { Button } from '../../Button';
-import { Box, Flex } from '../../Layout';
-import { Text } from '../../Text';
-import { Tooltip } from '../../Tooltip';
-
-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,
-    });
-  }
-
-  render() {
-    if (this.state.errorInfo) {
-      return (
-        <Flex
-          align="center"
-          justify="center"
-          css={{
-            size: '100%',
-            height: '100vh',
-            width: '100%',
-            color: '$on_primary_high',
-            backgroundColor: '$background_default',
-          }}
-        >
-          <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 />
-                Please reload to see if it works. If you think this is a mistake on our side, please reach out to us
-                on&nbsp;
-                <a href="https://dashboard.100ms.live/dashboard" target="_blank" rel="noreferrer">
-                  Dashboard
-                </a>
-              </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;
-  }
-}

package/src/Prebuilt/components/Footer/ChatToggle.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { selectUnreadHMSMessagesCount, useHMSStore } from '@100mslive/react-sdk';
-import { ChatIcon } from '@100mslive/react-icons';
-import { Box, Flex, Text, Tooltip } from '../../..';
-// @ts-ignore: No implicit Any
-import IconButton from '../../IconButton';
-// @ts-ignore: No implicit Any
-import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
-// @ts-ignore: No implicit Any
-import { SIDE_PANE_OPTIONS } from '../../common/constants';
-
-export const ChatToggle = ({ onClick }: { onClick?: () => void }) => {
-  const countUnreadMessages = useHMSStore(selectUnreadHMSMessagesCount);
-  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
-  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-
-  return (
-    <Box
-      css={{
-        position: 'relative',
-      }}
-    >
-      <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
-        <IconButton
-          onClick={() => (onClick ? onClick() : toggleChat())}
-          css={{ bg: isChatOpen ? '$surface_brighter' : '' }}
-          data-testid="chat_btn"
-        >
-          <ChatIcon />
-        </IconButton>
-      </Tooltip>
-      {countUnreadMessages > 0 && (
-        <Flex
-          css={{
-            height: '$8',
-            p: '$4 4.5px',
-            justifyContent: 'center',
-            alignItems: 'center',
-            position: 'absolute',
-            top: '-$4',
-            right: '-$4',
-            borderRadius: '$space$14',
-            background: '$primary_default',
-          }}
-        >
-          <Text variant="overline" css={{ color: '$on_primary_high' }}>
-            {countUnreadMessages > 99 ? '99+' : countUnreadMessages}
-          </Text>
-        </Flex>
-      )}
-    </Box>
-  );
-};

package/src/Prebuilt/components/Footer/EmojiCard.jsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { Flex } from '../../../Layout';
-import { styled } from '../../../Theme';
-
-// 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 EmojiCard = ({ sendReaction }) => {
-  return 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>
-  ));
-};
-
-const EmojiContainer = styled('span', {
-  position: 'relative',
-  cursor: 'pointer',
-  width: '$16',
-  height: '$16',
-  p: '$4',
-  '&:hover': {
-    p: '7px',
-    bg: '$surface_brighter',
-    borderRadius: '$1',
-  },
-});