remove Feedback popup

app/components/Article/FeedbackForm/feedbackForm.css

@@ -39,14 +39,6 @@
   display: block;
 }
 
-.action-feedback-text {
-  display: none;
-  position: absolute;
-  transform: translate(-1vw, var(--spacing-56));
-}
-.action-feedback-text.show {
-  display: block;
-}
 .composite-button > .feedback-form {
   position: absolute;
   display: none;

app/components/Article/article.css

@@ -164,3 +164,11 @@ article a.see-more.visible:after {
     margin: 0;
   }
 }
+.action-feedback-text {
+  display: none;
+  position: absolute;
+  transform: translate(-1vw, var(--spacing-56));
+}
+.action-feedback-text.show {
+  display: block;
+}

app/components/Article/index.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import {useState} from 'react'
 import {Link} from '@remix-run/react'
 import KeepGoing from '~/components/Article/KeepGoing'
 import CopyIcon from '~/components/icons-generated/Copy'
@@ -9,38 +9,18 @@ import type {Glossary, Question} from '~/server-utils/stampy'
 import {tagUrl} from '~/routesMapper'
 import Contents from './Contents'
 import './article.css'
-import FeedbackForm from '~/components/Article/FeedbackForm'
 
 const isLoading = ({text}: Question) => !text || text === 'Loading...'
 
 const ArticleFooter = (question: Question) => {
   const [showFeedback, setShowFeedback] = useState(false)
-  const [showFeedbackForm, setShowFeedbackForm] = useState(false)
-  const [isFormFocused, setIsFormFocused] = useState(false)
   const date =
     question.updatedAt &&
     new Date(question.updatedAt).toLocaleDateString('en-GB', {
       year: 'numeric',
       month: 'short',
     })
 
-  React.useEffect(() => {
-    // Hide the form after 10 seconds if the user hasn't interacted with it
-    const timeoutId = setInterval(() => {
-      if (!isFormFocused) {
-        setShowFeedbackForm(false)
-      }
-    }, 10000)
-
-    // Clear the timeout to prevent it from running if the component unmounts
-    return () => clearInterval(timeoutId)
-  }, [showFeedbackForm, isFormFocused])
-
-  React.useEffect(() => {
-    const timeout = setInterval(() => setShowFeedback(false), 6000)
-    return () => clearInterval(timeout)
-  }, [showFeedback])
-
   return (
     !isLoading(question) && (
       <div className="footer-comtainer padding-bottom-40">
@@ -62,28 +42,17 @@ const ArticleFooter = (question: Question) => {
             pageid={question.pageid}
             showText={true}
             actionType={ActionType.HELPFUL}
-            onSuccess={() => setShowFeedback(true)}
+            onClick={() => setShowFeedback(true)}
           />
           <Action
             pageid={question.pageid}
             showText={true}
             actionType={ActionType.UNHELPFUL}
-            onClick={() => setShowFeedbackForm(true)}
+            onClick={() => setShowFeedback(true)}
           />
           <div className={['action-feedback-text', showFeedback ? 'show' : ''].join(' ')}>
             Thanks for your feedback!
           </div>
-          <FeedbackForm
-            pageid={question.pageid}
-            className={['feedback-form', showFeedbackForm ? 'show' : ''].join(' ')}
-            onClose={() => {
-              setShowFeedback(true)
-              setShowFeedbackForm(false)
-            }}
-            onBlur={() => setIsFormFocused(false)}
-            onFocus={() => setIsFormFocused(true)}
-            hasOptions={true}
-          />
         </CompositeButton>
       </div>
     )