From 54c896bdf305324474fc95e79be34fa7f981a9b0 Mon Sep 17 00:00:00 2001
From: Yogesh Singh <yogesh@100ms.live>
Date: Wed, 23 Oct 2024 17:51:48 +0530
Subject: [PATCH] fix: added a cross icon to dismiss the Thank You view

---
 .../EndCallFeedback/ThankyouView.tsx          | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx b/packages/roomkit-react/src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx
index 5a0593ff23..b7b14df5f6 100644
--- a/packages/roomkit-react/src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx
@@ -1,12 +1,18 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useMedia } from 'react-use';
-import { UserMusicIcon } from '@100mslive/react-icons';
+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'}
@@ -25,6 +31,20 @@ export const ThankyouView = () => {
         },
       }}
     >
+      {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>