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

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

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { useMedia } from 'react-use';
+import { Flex } from '../../../Layout';
+import { config as cssConfig } from '../../../Theme';
+import { FEEBACK_INDEX, FeedbackHeader, FeedbackModal } from './FeedbackForm';
+import { ThankyouView } from './ThankyouView';
+import { useRoomLayoutLeaveScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+
+export const Feedback = () => {
+  const { feedback } = useRoomLayoutLeaveScreen();
+  const [index, setIndex] = useState(FEEBACK_INDEX.INIT);
+  const isMobile = useMedia(cssConfig.media.md);
+
+  if (!feedback) {
+    return null;
+  }
+  const { ratings } = feedback;
+  if (!ratings) {
+    return null;
+  }
+  ratings.sort((a, b) => {
+    if (!a.value || !b.value) {
+      return 0;
+    }
+    return a.value - b.value;
+  });
+  // TO show thank ypu page
+  if (index === FEEBACK_INDEX.THANK_YOU) {
+    return (
+      <Flex
+        justify="center"
+        css={{
+          pt: '$16',
+        }}
+      >
+        <ThankyouView />
+      </Flex>
+    );
+  }
+  return (
+    <Flex
+      justify="center"
+      css={{
+        pt: '$16',
+        w: '528px',
+      }}
+    >
+      {index === FEEBACK_INDEX.INIT ? (
+        <Flex
+          css={{
+            p: '$12',
+            border: '1px solid $border_default',
+            bg: '$surface_dim',
+            borderRadius: !isMobile ? '$3' : '$3 $3 0 0',
+            gap: '$10',
+            '@md': {
+              position: 'absolute',
+              bottom: '0',
+            },
+          }}
+          direction="column"
+        >
+          <FeedbackHeader ratings={ratings} onEmojiClicked={setIndex} />
+        </Flex>
+      ) : (
+        <FeedbackModal ratings={ratings} index={index} setIndex={setIndex} />
+      )}
+    </Flex>
+  );
+};

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

@@ -0,0 +1,371 @@
+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: '$12' }}
+          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 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: 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: '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 { feedback } = useRoomLayoutLeaveScreen();
+  return (
+    <>
+      <Flex align="center">
+        <Flex
+          direction="column"
+          css={{
+            flex: '1 1 0',
+          }}
+        >
+          <Text
+            variant="h5"
+            css={{
+              c: '$on_surface_high',
+              fontStyle: 'normal',
+            }}
+          >
+            {feedback?.title || 'How was your experience?'}
+          </Text>
+          <Text
+            variant="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
+        css={{
+          gap: '$17',
+          c: '$on_surface_high',
+        }}
+      >
+        {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,
+                }}
+              >
+                {element.emoji}
+              </Text>
+              <Text
+                variant="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
+                    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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { UserMusicIcon } from '@100mslive/react-icons';
+import { Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { config as cssConfig } from '../../../Theme';
+
+export const ThankyouView = () => {
+  const isMobile = useMedia(cssConfig.media.md);
+  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',
+        },
+      }}
+    >
+      <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/LeaveScreen.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ExitIcon } from '@100mslive/react-icons';
+import { Feedback } from './EndCallFeedback/Feedback';
 // @ts-ignore: No implicit Any
 import { ToastManager } from './Toast/ToastManager';
 import { Button } from '../../Button';
@@ -63,6 +64,7 @@ export const LeaveScreen = () => {
             <Text css={{ ml: '$3', fontWeight: '$semiBold', color: 'inherit' }}>Rejoin</Text>
           </Button>
         </Flex>
+        <Feedback />
       </Flex>
     </Flex>
   );

package/src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts

@@ -77,6 +77,7 @@ export function useRoomLayoutLeaveScreen() {
   const isLeaveScreenEnabled = !!screenProps;
   return {
     isLeaveScreenEnabled,
+    feedback: screenProps?.default?.elements?.feedback,
   };
 }