@100mslive/roomkit-react 0.3.23 → 0.3.24-alpha.0

package/dist/LeaveScreen-BYTE73MT.js

@@ -0,0 +1,556 @@
+import {
+  Header
+} from "./chunk-LJVP6AWF.js";
+import "./chunk-3C7IESSI.js";
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  Label,
+  Sheet,
+  TextArea,
+  useHMSAppStateContext,
+  useHMSPrebuiltContext
+} from "./chunk-MG3UGW66.js";
+import {
+  Text
+} from "./chunk-MUKUP7JU.js";
+import {
+  ToastManager
+} from "./chunk-DANANDDE.js";
+import {
+  Box,
+  Flex
+} from "./chunk-GOXRTCTY.js";
+import {
+  UserPreferencesKeys,
+  defaultPreviewPreference,
+  textEllipsis,
+  useRoomLayoutLeaveScreen,
+  useUserPreferences
+} from "./chunk-BGSYLCVD.js";
+import {
+  __async,
+  __spreadValues,
+  config,
+  init_define_process_env
+} from "./chunk-GLAJUP3O.js";
+
+// src/Prebuilt/components/LeaveScreen.tsx
+init_define_process_env();
+import React4 from "react";
+import { ExitIcon } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/EndCallFeedback/Feedback.tsx
+init_define_process_env();
+import React3, { useState as useState2 } from "react";
+import { useMedia as useMedia3 } from "react-use";
+
+// src/Prebuilt/components/EndCallFeedback/FeedbackForm.tsx
+init_define_process_env();
+import React, { useState } from "react";
+import { useMedia } from "react-use";
+import { useHMSActions } from "@100mslive/react-sdk";
+import { CheckIcon, CrossIcon } from "@100mslive/react-icons";
+var FEEBACK_INDEX = {
+  THANK_YOU: -10,
+  INIT: -1
+};
+var FeedbackModal = ({
+  ratings,
+  index,
+  setIndex
+}) => {
+  const isMobile = useMedia(config.media.md);
+  const onOpenChange = () => {
+    setIndex(FEEBACK_INDEX.INIT);
+  };
+  const avoidDefaultDomBehavior = (e) => {
+    e.preventDefault();
+  };
+  if (isMobile) {
+    return /* @__PURE__ */ React.createElement(Sheet.Root, { open: index !== FEEBACK_INDEX.INIT, onOpenChange }, /* @__PURE__ */ React.createElement(
+      Sheet.Content,
+      {
+        css: { bg: "$surface_dim", p: "$10", overflowY: "auto" },
+        onPointerDownOutside: avoidDefaultDomBehavior,
+        onInteractOutside: avoidDefaultDomBehavior
+      },
+      /* @__PURE__ */ React.createElement(FeedbackContent, { ratings, indexSelected: index, setIndex })
+    ));
+  }
+  return /* @__PURE__ */ React.createElement(Dialog.Root, { open: index !== FEEBACK_INDEX.INIT, onOpenChange }, /* @__PURE__ */ React.createElement(Dialog.Portal, null, /* @__PURE__ */ React.createElement(Dialog.Overlay, null), /* @__PURE__ */ React.createElement(
+    Dialog.Content,
+    {
+      css: { bg: "$surface_dim", width: "528px", p: "$12" },
+      onPointerDownOutside: avoidDefaultDomBehavior,
+      onInteractOutside: avoidDefaultDomBehavior
+    },
+    /* @__PURE__ */ React.createElement(FeedbackContent, { ratings, indexSelected: index, setIndex })
+  )));
+};
+var FeedbackContent = ({
+  ratings,
+  indexSelected,
+  setIndex
+}) => {
+  const { feedback } = useRoomLayoutLeaveScreen();
+  const { endpoints } = useHMSPrebuiltContext();
+  const isMobile = useMedia(config.media.md);
+  const hmsActions = useHMSActions();
+  const [comment, setComment] = useState("");
+  const [selectedReasons, setSelectedReasons] = useState(/* @__PURE__ */ new Set());
+  const handleCheckedChange = (checked, index) => {
+    const newSelected = new Set(selectedReasons);
+    if (checked) {
+      newSelected.add(index);
+    } else {
+      newSelected.delete(index);
+    }
+    setSelectedReasons(newSelected);
+  };
+  const submitFeedback = () => __async(void 0, null, function* () {
+    if (indexSelected < 0 || ratings.length <= indexSelected) {
+      return;
+    }
+    try {
+      const reasons = [...selectedReasons].map((value) => {
+        var _a, _b;
+        return ((_b = (_a = ratings[indexSelected]) == null ? void 0 : _a.reasons) == null ? void 0 : _b[value]) || "";
+      });
+      yield hmsActions.submitSessionFeedback(
+        {
+          question: `${feedback == null ? void 0 : feedback.title} | ${ratings[indexSelected].question || ""}`,
+          rating: ratings[indexSelected].value || 1,
+          min_rating: 1,
+          max_rating: ratings.length,
+          reasons: selectedReasons.size === 0 ? [] : reasons,
+          comment
+        },
+        endpoints == null ? void 0 : endpoints.event
+      );
+    } catch (e) {
+      console.error(e);
+    }
+    setIndex(FEEBACK_INDEX.THANK_YOU);
+  });
+  return /* @__PURE__ */ React.createElement(
+    Flex,
+    {
+      css: {
+        p: indexSelected === FEEBACK_INDEX.INIT ? "$12 !important" : "0",
+        bg: "$surface_dim",
+        r: "$3",
+        gap: "$10"
+      },
+      direction: "column"
+    },
+    /* @__PURE__ */ React.createElement(
+      FeedbackHeader,
+      {
+        ratings,
+        indexSelected,
+        onEmojiClicked: (value) => {
+          setSelectedReasons(/* @__PURE__ */ new Set());
+          setIndex(value);
+        }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      FeedbackForm,
+      {
+        rating: ratings[indexSelected],
+        comment,
+        setComment,
+        selectedReasons,
+        handleCheckedChange
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "submit",
+        icon: true,
+        css: {
+          alignSelf: isMobile ? "" : "end"
+        },
+        onClick: submitFeedback
+      },
+      (feedback == null ? void 0 : feedback.submit_btn_label) || "Submit Feedback"
+    )
+  );
+};
+var FeedbackHeader = ({
+  onEmojiClicked,
+  ratings,
+  indexSelected = FEEBACK_INDEX.INIT
+}) => {
+  const isMobile = useMedia(config.media.md);
+  const { feedback } = useRoomLayoutLeaveScreen();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Flex, { align: "center" }, /* @__PURE__ */ React.createElement(
+    Flex,
+    {
+      direction: "column",
+      css: {
+        flex: "1 1 0"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        variant: isMobile ? "h6" : "h5",
+        css: {
+          c: "$on_surface_high",
+          fontStyle: "normal"
+        }
+      },
+      (feedback == null ? void 0 : feedback.title) || "How was your experience?"
+    ),
+    /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        variant: isMobile ? "body2" : "body1",
+        css: {
+          c: "$on_surface_medium",
+          opacity: 0.9,
+          fontWeight: "$regular"
+        }
+      },
+      (feedback == null ? void 0 : feedback.sub_title) || "Your answers help us improve the quality."
+    )
+  ), indexSelected !== FEEBACK_INDEX.INIT ? /* @__PURE__ */ React.createElement(CrossIcon, { width: "24px", height: "24px", color: "white", onClick: () => onEmojiClicked(FEEBACK_INDEX.INIT) }) : null), /* @__PURE__ */ React.createElement(
+    Flex,
+    {
+      justify: "between",
+      css: {
+        gap: "$17",
+        c: "$on_surface_high",
+        "@md": {
+          gap: "0"
+        }
+      }
+    },
+    ratings.map((element, index) => {
+      return /* @__PURE__ */ React.createElement(
+        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}`
+        },
+        /* @__PURE__ */ React.createElement(
+          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
+        ),
+        /* @__PURE__ */ React.createElement(
+          Text,
+          {
+            variant: isMobile ? "body2" : "body1",
+            css: {
+              c: indexSelected === index || indexSelected === FEEBACK_INDEX.INIT ? "$on_surface_medium" : "$on_surface_low",
+              fontWeight: "$regular"
+            }
+          },
+          element.label
+        )
+      );
+    })
+  ));
+};
+var FeedbackForm = ({
+  rating,
+  comment,
+  setComment,
+  selectedReasons,
+  handleCheckedChange
+}) => {
+  const { feedback } = useRoomLayoutLeaveScreen();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, rating.reasons && rating.reasons.length > 0 && /* @__PURE__ */ React.createElement(
+    Flex,
+    {
+      direction: "column",
+      css: {
+        gap: "$4"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        variant: "sub2",
+        css: {
+          c: "$on_surface_high",
+          fontWeight: "$semiBold",
+          fontSize: "$sm",
+          px: "$2"
+        }
+      },
+      rating.question || "What do you like/dislike here?"
+    ),
+    /* @__PURE__ */ React.createElement(
+      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, index) => {
+        return /* @__PURE__ */ React.createElement(
+          Flex,
+          {
+            align: "center",
+            gap: "2",
+            key: index,
+            css: {
+              border: "1px solid $border_bright",
+              r: "$1",
+              p: "$6"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            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"
+              }
+            },
+            /* @__PURE__ */ React.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React.createElement(CheckIcon, { width: 12, height: 12 }))
+          ),
+          /* @__PURE__ */ React.createElement(
+            Label,
+            {
+              htmlFor: `${option}-${index}`,
+              css: {
+                color: "$on_surface_high",
+                fontSize: "$sm",
+                fontWeight: "$regular",
+                lineHeight: "20px"
+              }
+            },
+            option
+          )
+        );
+      })
+    )
+  ), (feedback == null ? void 0 : feedback.comment) && /* @__PURE__ */ React.createElement(
+    Flex,
+    {
+      direction: "column",
+      css: {
+        gap: "$4"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        variant: "body2",
+        css: {
+          c: "$on_surface_high",
+          fontWeight: "$regular",
+          fontSize: "$sm"
+        }
+      },
+      (feedback == null ? void 0 : feedback.comment.label) || "Additional comments (optional)"
+    ),
+    /* @__PURE__ */ React.createElement(
+      TextArea,
+      {
+        maxLength: 1024,
+        placeholder: (feedback == null ? void 0 : 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())
+      }
+    )
+  ));
+};
+
+// src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx
+init_define_process_env();
+import React2 from "react";
+import { useMedia as useMedia2 } from "react-use";
+import { UserMusicIcon } from "@100mslive/react-icons";
+var ThankyouView = () => {
+  const isMobile = useMedia2(config.media.md);
+  return /* @__PURE__ */ React2.createElement(
+    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"
+        }
+      }
+    },
+    /* @__PURE__ */ React2.createElement(UserMusicIcon, { width: "64px", height: "64px" }),
+    /* @__PURE__ */ React2.createElement(Flex, { direction: "column", align: isMobile ? "center" : "start" }, /* @__PURE__ */ React2.createElement(Text, { variant: "h5" }, "Thank you for your feedback"), /* @__PURE__ */ React2.createElement(
+      Text,
+      {
+        variant: "body1",
+        css: {
+          fontWeight: "$regular",
+          fontSize: "$md",
+          opacity: "0.9"
+        }
+      },
+      "Your answers help us improve."
+    ))
+  );
+};
+
+// src/Prebuilt/components/EndCallFeedback/Feedback.tsx
+var Feedback = () => {
+  const { feedback } = useRoomLayoutLeaveScreen();
+  const [index, setIndex] = useState2(FEEBACK_INDEX.INIT);
+  const isMobile = useMedia3(config.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;
+  });
+  if (index === FEEBACK_INDEX.THANK_YOU) {
+    return /* @__PURE__ */ React3.createElement(
+      Flex,
+      {
+        justify: "center",
+        css: {
+          pt: "$16"
+        }
+      },
+      /* @__PURE__ */ React3.createElement(ThankyouView, null)
+    );
+  }
+  return /* @__PURE__ */ React3.createElement(
+    Flex,
+    {
+      justify: "center",
+      css: {
+        pt: "$16",
+        w: isMobile ? "100%" : "528px"
+      }
+    },
+    index === FEEBACK_INDEX.INIT ? /* @__PURE__ */ React3.createElement(
+      Flex,
+      {
+        css: {
+          p: isMobile ? "$10" : "$12",
+          border: "1px solid $border_default",
+          bg: "$surface_dim",
+          borderRadius: !isMobile ? "$3" : "$3 $3 0 0",
+          gap: "$10",
+          "@md": {
+            position: "absolute",
+            bottom: "0",
+            w: "100%"
+          }
+        },
+        direction: "column"
+      },
+      /* @__PURE__ */ React3.createElement(FeedbackHeader, { ratings, onEmojiClicked: setIndex })
+    ) : /* @__PURE__ */ React3.createElement(FeedbackModal, { ratings, index, setIndex })
+  );
+};
+
+// src/Prebuilt/components/LeaveScreen.tsx
+var LeaveScreen = () => {
+  const { rejoin } = useHMSAppStateContext();
+  const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);
+  return /* @__PURE__ */ React4.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React4.createElement(Box, { css: { h: "$18", "@md": { h: "$17" } }, "data-testid": "header" }, /* @__PURE__ */ React4.createElement(Header, null)), /* @__PURE__ */ React4.createElement(
+    Flex,
+    {
+      justify: "center",
+      direction: "column",
+      align: "center",
+      css: { bg: "$background_dim", flex: "1 1 0", position: "relative" }
+    },
+    /* @__PURE__ */ React4.createElement(Text, { variant: "h2", css: { fontWeight: "$semiBold" } }, "\u{1F44B}"),
+    /* @__PURE__ */ React4.createElement(Text, { variant: "h4", css: { color: "$on_surface_high", fontWeight: "$semiBold", mt: "$12" } }, "You left the room"),
+    /* @__PURE__ */ React4.createElement(
+      Text,
+      {
+        variant: "body1",
+        css: {
+          color: "$on_surface_medium",
+          mt: "$8",
+          fontWeight: "$regular",
+          textAlign: "center"
+        }
+      },
+      "Have a nice day",
+      previewPreference.name && /* @__PURE__ */ React4.createElement(Box, { as: "span", css: __spreadValues({}, textEllipsis(100)) }, ", ", previewPreference.name),
+      "!"
+    ),
+    /* @__PURE__ */ React4.createElement(Flex, { css: { mt: "$14", gap: "$10", alignItems: "center" } }, /* @__PURE__ */ React4.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium", fontWeight: "$regular" } }, "Left by mistake?"), /* @__PURE__ */ React4.createElement(
+      Button,
+      {
+        onClick: () => {
+          rejoin();
+          ToastManager.clearAllToast();
+        },
+        "data-testid": "join_again_btn"
+      },
+      /* @__PURE__ */ React4.createElement(ExitIcon, null),
+      /* @__PURE__ */ React4.createElement(Text, { css: { ml: "$3", fontWeight: "$semiBold", color: "inherit" } }, "Rejoin")
+    )),
+    /* @__PURE__ */ React4.createElement(Feedback, null)
+  ));
+};
+export {
+  LeaveScreen
+};
+//# sourceMappingURL=LeaveScreen-BYTE73MT.js.map

package/dist/LeaveScreen-BYTE73MT.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Prebuilt/components/LeaveScreen.tsx", "../src/Prebuilt/components/EndCallFeedback/Feedback.tsx", "../src/Prebuilt/components/EndCallFeedback/FeedbackForm.tsx", "../src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport { ExitIcon } from '@100mslive/react-icons';\nimport { Feedback } from './EndCallFeedback/Feedback';\n// @ts-ignore: No implicit Any\nimport { ToastManager } from './Toast/ToastManager';\nimport { Button } from '../../Button';\nimport { Box, Flex } from '../../Layout';\nimport { Text } from '../../Text';\nimport { useHMSAppStateContext } from '../AppStateContext';\nimport { Header } from './Header';\n// @ts-ignore: No implicit Any\nimport { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from './hooks/useUserPreferences';\nimport { textEllipsis } from '../../utils';\n\nexport const LeaveScreen = () => {\n  const { rejoin } = useHMSAppStateContext();\n  const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);\n  return (\n    <Flex direction=\"column\" css={{ size: '100%' }}>\n      <Box css={{ h: '$18', '@md': { h: '$17' } }} data-testid=\"header\">\n        <Header />\n      </Box>\n      <Flex\n        justify=\"center\"\n        direction=\"column\"\n        align=\"center\"\n        css={{ bg: '$background_dim', flex: '1 1 0', position: 'relative' }}\n      >\n        <Text variant=\"h2\" css={{ fontWeight: '$semiBold' }}>\n          \uD83D\uDC4B\n        </Text>\n        <Text variant=\"h4\" css={{ color: '$on_surface_high', fontWeight: '$semiBold', mt: '$12' }}>\n          You left the room\n        </Text>\n        <Text\n          variant=\"body1\"\n          css={{\n            color: '$on_surface_medium',\n            mt: '$8',\n            fontWeight: '$regular',\n            textAlign: 'center',\n          }}\n        >\n          Have a nice day\n          {previewPreference.name && (\n            <Box as=\"span\" css={{ ...textEllipsis(100) }}>\n              , {previewPreference.name}\n            </Box>\n          )}\n          !\n        </Text>\n        <Flex css={{ mt: '$14', gap: '$10', alignItems: 'center' }}>\n          <Text variant=\"body1\" css={{ color: '$on_surface_medium', fontWeight: '$regular' }}>\n            Left by mistake?\n          </Text>\n          <Button\n            onClick={() => {\n              rejoin();\n              ToastManager.clearAllToast();\n            }}\n            data-testid=\"join_again_btn\"\n          >\n            <ExitIcon />\n            <Text css={{ ml: '$3', fontWeight: '$semiBold', color: 'inherit' }}>Rejoin</Text>\n          </Button>\n        </Flex>\n        <Feedback />\n      </Flex>\n    </Flex>\n  );\n};\n", "import React, { useState } from 'react';\nimport { useMedia } from 'react-use';\nimport { Flex } from '../../../Layout';\nimport { config as cssConfig } from '../../../Theme';\nimport { FEEBACK_INDEX, FeedbackHeader, FeedbackModal } from './FeedbackForm';\nimport { ThankyouView } from './ThankyouView';\nimport { useRoomLayoutLeaveScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';\n\nexport const Feedback = () => {\n  const { feedback } = useRoomLayoutLeaveScreen();\n  const [index, setIndex] = useState(FEEBACK_INDEX.INIT);\n  const isMobile = useMedia(cssConfig.media.md);\n\n  if (!feedback) {\n    return null;\n  }\n  const { ratings } = feedback;\n  if (!ratings) {\n    return null;\n  }\n  ratings.sort((a, b) => {\n    if (!a.value || !b.value) {\n      return 0;\n    }\n    return a.value - b.value;\n  });\n  // TO show thank ypu page\n  if (index === FEEBACK_INDEX.THANK_YOU) {\n    return (\n      <Flex\n        justify=\"center\"\n        css={{\n          pt: '$16',\n        }}\n      >\n        <ThankyouView />\n      </Flex>\n    );\n  }\n  return (\n    <Flex\n      justify=\"center\"\n      css={{\n        pt: '$16',\n        w: isMobile ? '100%' : '528px',\n      }}\n    >\n      {index === FEEBACK_INDEX.INIT ? (\n        <Flex\n          css={{\n            p: isMobile ? '$10' : '$12',\n            border: '1px solid $border_default',\n            bg: '$surface_dim',\n            borderRadius: !isMobile ? '$3' : '$3 $3 0 0',\n            gap: '$10',\n            '@md': {\n              position: 'absolute',\n              bottom: '0',\n              w: '100%',\n            },\n          }}\n          direction=\"column\"\n        >\n          <FeedbackHeader ratings={ratings} onEmojiClicked={setIndex} />\n        </Flex>\n      ) : (\n        <FeedbackModal ratings={ratings} index={index} setIndex={setIndex} />\n      )}\n    </Flex>\n  );\n};\n", "import React, { useState } from 'react';\nimport { useMedia } from 'react-use';\nimport { Rating } from '@100mslive/types-prebuilt/elements/feedback';\nimport { useHMSActions } from '@100mslive/react-sdk';\nimport { CheckIcon, CrossIcon } from '@100mslive/react-icons';\nimport { Button } from '../../../Button';\nimport { Checkbox } from '../../../Checkbox';\nimport { Label } from '../../../Label';\nimport { Flex } from '../../../Layout';\nimport { Dialog } from '../../../Modal';\nimport { Sheet } from '../../../Sheet';\nimport { Text } from '../../../Text';\nimport { TextArea } from '../../../TextArea';\nimport { config as cssConfig } from '../../../Theme';\nimport { useHMSPrebuiltContext } from '../../AppContext';\nimport { useRoomLayoutLeaveScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';\n\nexport const FEEBACK_INDEX = {\n  THANK_YOU: -10,\n  INIT: -1,\n};\nexport const FeedbackModal = ({\n  ratings,\n  index,\n  setIndex,\n}: {\n  ratings: Rating[];\n  index: number;\n  setIndex: (index: number) => void;\n}) => {\n  const isMobile = useMedia(cssConfig.media.md);\n  const onOpenChange = () => {\n    setIndex(FEEBACK_INDEX.INIT);\n  };\n  const avoidDefaultDomBehavior = (e: Event) => {\n    e.preventDefault();\n  };\n  if (isMobile) {\n    return (\n      <Sheet.Root open={index !== FEEBACK_INDEX.INIT} onOpenChange={onOpenChange}>\n        <Sheet.Content\n          css={{ bg: '$surface_dim', p: '$10', overflowY: 'auto' }}\n          onPointerDownOutside={avoidDefaultDomBehavior}\n          onInteractOutside={avoidDefaultDomBehavior}\n        >\n          <FeedbackContent ratings={ratings} indexSelected={index} setIndex={setIndex} />\n        </Sheet.Content>\n      </Sheet.Root>\n    );\n  }\n  return (\n    <Dialog.Root open={index !== FEEBACK_INDEX.INIT} onOpenChange={onOpenChange}>\n      <Dialog.Portal>\n        <Dialog.Overlay />\n        <Dialog.Content\n          css={{ bg: '$surface_dim', width: '528px', p: '$12' }}\n          onPointerDownOutside={avoidDefaultDomBehavior}\n          onInteractOutside={avoidDefaultDomBehavior}\n        >\n          <FeedbackContent ratings={ratings} indexSelected={index} setIndex={setIndex} />\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n};\n\nexport const FeedbackContent = ({\n  ratings,\n  indexSelected,\n  setIndex,\n}: {\n  ratings: Rating[];\n  indexSelected: number;\n  setIndex: (index: number) => void;\n}) => {\n  const { feedback } = useRoomLayoutLeaveScreen();\n  const { endpoints } = useHMSPrebuiltContext();\n  const isMobile = useMedia(cssConfig.media.md);\n  const hmsActions = useHMSActions();\n  const [comment, setComment] = useState('');\n  const [selectedReasons, setSelectedReasons] = useState(new Set<number>());\n  const handleCheckedChange = (checked: boolean | string, index: number) => {\n    const newSelected = new Set(selectedReasons);\n    if (checked) {\n      newSelected.add(index);\n    } else {\n      newSelected.delete(index);\n    }\n    setSelectedReasons(newSelected);\n  };\n  const submitFeedback = async () => {\n    if (indexSelected < 0 || ratings.length <= indexSelected) {\n      return;\n    }\n    try {\n      const reasons = [...selectedReasons].map((value: number) => ratings[indexSelected]?.reasons?.[value] || '');\n      await hmsActions.submitSessionFeedback(\n        {\n          question: `${feedback?.title} | ${ratings[indexSelected].question || ''}`,\n          rating: ratings[indexSelected].value || 1,\n          min_rating: 1,\n          max_rating: ratings.length,\n          reasons: selectedReasons.size === 0 ? [] : reasons,\n          comment: comment,\n        },\n        endpoints?.event,\n      );\n    } catch (e) {\n      console.error(e);\n    }\n    // always submit and take it to thankyou page\n    setIndex(FEEBACK_INDEX.THANK_YOU);\n  };\n  return (\n    <Flex\n      css={{\n        p: indexSelected === FEEBACK_INDEX.INIT ? '$12 !important' : '0',\n        bg: '$surface_dim',\n        r: '$3',\n        gap: '$10',\n      }}\n      direction=\"column\"\n    >\n      <FeedbackHeader\n        ratings={ratings}\n        indexSelected={indexSelected}\n        onEmojiClicked={(value: number) => {\n          setSelectedReasons(new Set<number>());\n          setIndex(value);\n        }}\n      />\n      <FeedbackForm\n        rating={ratings[indexSelected]}\n        comment={comment}\n        setComment={setComment}\n        selectedReasons={selectedReasons}\n        handleCheckedChange={handleCheckedChange}\n      />\n      <Button\n        type=\"submit\"\n        icon\n        css={{\n          alignSelf: isMobile ? '' : 'end',\n        }}\n        onClick={submitFeedback}\n      >\n        {feedback?.submit_btn_label || 'Submit Feedback'}\n      </Button>\n    </Flex>\n  );\n};\nexport const FeedbackHeader = ({\n  onEmojiClicked,\n  ratings,\n  indexSelected = FEEBACK_INDEX.INIT,\n}: {\n  onEmojiClicked: (index: number) => void;\n  ratings: Rating[];\n  indexSelected?: number;\n}) => {\n  const isMobile = useMedia(cssConfig.media.md);\n  const { feedback } = useRoomLayoutLeaveScreen();\n  return (\n    <>\n      <Flex align=\"center\">\n        <Flex\n          direction=\"column\"\n          css={{\n            flex: '1 1 0',\n          }}\n        >\n          <Text\n            variant={isMobile ? 'h6' : 'h5'}\n            css={{\n              c: '$on_surface_high',\n              fontStyle: 'normal',\n            }}\n          >\n            {feedback?.title || 'How was your experience?'}\n          </Text>\n          <Text\n            variant={isMobile ? 'body2' : 'body1'}\n            css={{\n              c: '$on_surface_medium',\n              opacity: 0.9,\n              fontWeight: '$regular',\n            }}\n          >\n            {feedback?.sub_title || 'Your answers help us improve the quality.'}\n          </Text>\n        </Flex>\n        {indexSelected !== FEEBACK_INDEX.INIT ? (\n          <CrossIcon width=\"24px\" height=\"24px\" color=\"white\" onClick={() => onEmojiClicked(FEEBACK_INDEX.INIT)} />\n        ) : null}\n      </Flex>\n      <Flex\n        justify=\"between\"\n        css={{\n          gap: '$17',\n          c: '$on_surface_high',\n          '@md': {\n            gap: '0',\n          },\n        }}\n      >\n        {ratings.map((element, index) => {\n          return (\n            <Flex\n              align=\"center\"\n              direction=\"column\"\n              css={{\n                c:\n                  indexSelected === index || indexSelected === FEEBACK_INDEX.INIT\n                    ? '$on_surface_high'\n                    : '$on_surface_default',\n                gap: '$4',\n              }}\n              onClick={() => onEmojiClicked(index)}\n              key={`${index}`}\n            >\n              <Text\n                css={{\n                  fontWeight: '$semiBold',\n                  fontSize: '$h4',\n                  pb: '$1',\n                  cursor: 'pointer',\n                  opacity: indexSelected === index || indexSelected === FEEBACK_INDEX.INIT ? 1 : 0.2,\n                  '@md': {\n                    fontSize: '$h5',\n                  },\n                }}\n              >\n                {element.emoji}\n              </Text>\n              <Text\n                variant={isMobile ? 'body2' : 'body1'}\n                css={{\n                  c:\n                    indexSelected === index || indexSelected === FEEBACK_INDEX.INIT\n                      ? '$on_surface_medium'\n                      : '$on_surface_low',\n                  fontWeight: '$regular',\n                }}\n              >\n                {element.label}\n              </Text>\n            </Flex>\n          );\n        })}\n      </Flex>\n    </>\n  );\n};\nexport const FeedbackForm = ({\n  rating,\n  comment,\n  setComment,\n  selectedReasons,\n  handleCheckedChange,\n}: {\n  rating: Rating;\n  comment: string;\n  setComment: (value: string) => void;\n  selectedReasons: Set<number>;\n  handleCheckedChange: (checked: string | boolean, index: number) => void;\n}) => {\n  const { feedback } = useRoomLayoutLeaveScreen();\n  return (\n    <>\n      {rating.reasons && rating.reasons.length > 0 && (\n        <Flex\n          direction=\"column\"\n          css={{\n            gap: '$4',\n          }}\n        >\n          <Text\n            variant=\"sub2\"\n            css={{\n              c: '$on_surface_high',\n              fontWeight: '$semiBold',\n              fontSize: '$sm',\n              px: '$2',\n            }}\n          >\n            {rating.question || 'What do you like/dislike here?'}\n          </Text>\n          <Flex\n            css={{\n              alignItems: 'flex-start',\n              alignSelf: 'stretch',\n              flexWrap: 'wrap',\n              gap: '$6',\n              flex: '1 1 calc(25% - 12px)',\n              '@md': {\n                flex: '1 1 calc(50% - 12px)',\n              },\n              '@sm': {\n                flex: '1 1 100%',\n              },\n            }}\n          >\n            {rating.reasons.map((option: string, index: number) => {\n              return (\n                <Flex\n                  align=\"center\"\n                  gap=\"2\"\n                  key={index}\n                  css={{\n                    border: '1px solid $border_bright',\n                    r: '$1',\n                    p: '$6',\n                  }}\n                >\n                  <Checkbox.Root\n                    id={`${option}-${index}`}\n                    checked={selectedReasons.has(index)}\n                    onCheckedChange={checked => handleCheckedChange(checked, index)}\n                    css={{\n                      cursor: 'pointer',\n                      flexShrink: 0,\n                      bg: '$on_secondary_low',\n                      border: '1px solid $border_bright',\n                    }}\n                  >\n                    <Checkbox.Indicator>\n                      <CheckIcon width={12} height={12} />\n                    </Checkbox.Indicator>\n                  </Checkbox.Root>\n                  <Label\n                    htmlFor={`${option}-${index}`}\n                    css={{\n                      color: '$on_surface_high',\n                      fontSize: '$sm',\n                      fontWeight: '$regular',\n                      lineHeight: '20px' /* 142.857% */,\n                    }}\n                  >\n                    {option}\n                  </Label>\n                </Flex>\n              );\n            })}\n          </Flex>\n        </Flex>\n      )}\n      {feedback?.comment && (\n        <Flex\n          direction=\"column\"\n          css={{\n            gap: '$4',\n          }}\n        >\n          <Text\n            variant=\"body2\"\n            css={{\n              c: '$on_surface_high',\n              fontWeight: '$regular',\n              fontSize: '$sm',\n            }}\n          >\n            {feedback?.comment.label || 'Additional comments (optional)'}\n          </Text>\n          <TextArea\n            maxLength={1024}\n            placeholder={feedback?.comment.placeholder || 'Tell us more...'}\n            css={{\n              backgroundColor: '$surface_bright',\n              border: '1px solid $border_bright',\n              resize: 'none',\n              height: '$36',\n              display: 'flex',\n            }}\n            value={comment}\n            onChange={event => setComment(event.target.value.trimStart())}\n          />\n        </Flex>\n      )}\n    </>\n  );\n};\n", "import React from 'react';\nimport { useMedia } from 'react-use';\nimport { UserMusicIcon } from '@100mslive/react-icons';\nimport { Flex } from '../../../Layout';\nimport { Text } from '../../../Text';\nimport { config as cssConfig } from '../../../Theme';\n\nexport const ThankyouView = () => {\n  const isMobile = useMedia(cssConfig.media.md);\n  return (\n    <Flex\n      direction={isMobile ? 'column' : 'row'}\n      align=\"center\"\n      css={{\n        gap: '$10',\n        border: '1px solid $border_default',\n        borderRadius: !isMobile ? '$3' : '$3 $3 0 0',\n        bg: '$surface_dim',\n        w: !isMobile ? '528px' : '410px',\n        p: '$12',\n        pb: isMobile ? '$16' : '$12',\n        '@md': {\n          position: 'absolute',\n          bottom: '0',\n        },\n      }}\n    >\n      <UserMusicIcon width=\"64px\" height=\"64px\" />\n      <Flex direction=\"column\" align={isMobile ? 'center' : 'start'}>\n        <Text variant=\"h5\">Thank you for your feedback</Text>\n        <Text\n          variant=\"body1\"\n          css={{\n            fontWeight: '$regular',\n            fontSize: '$md',\n            opacity: '0.9',\n          }}\n        >\n          Your answers help us improve.\n        </Text>\n      </Flex>\n    </Flex>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React", "React", "useState", "useMedia", "React", "useMedia", "useMedia", "React", "useState", "useMedia", "React", "React"]
+}