update and implement FeedbackWidget component

wackerow · wackerow · commit d7ef2e998d9c · 2023-11-30T18:34:18.000-08:00
refactors using Chakra-UI alert-dialog
diff --git a/src/components/FeedbackWidget.tsx b/src/components/FeedbackWidget.tsx
@@ -1,41 +1,40 @@
 import { useEffect, useMemo, useRef, useState } from "react"
-import FocusTrap from "focus-trap-react"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
-import { MdClose } from "react-icons/md"
 import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogCloseButton,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
   Box,
   Button,
   ButtonProps,
-  Flex,
-  Icon,
   ScaleFade,
+  useDisclosure,
 } from "@chakra-ui/react"
 
-import { useKeyPress } from "../hooks/useKeyPress"
-// Hook imports
-import { useOnClickOutside } from "../hooks/useOnClickOutside"
-import { useSurvey } from "../hooks/useSurvey"
-import { DEFAULT_LOCALE } from "../lib/constants"
-// Utility imports
-import { trackCustomEvent } from "../utils/matomo"
+import { FeedbackGlyphIcon } from "@/components/icons"
+import Text from "@/components/OldText"
 
-// SVG imports
-import { FeedbackGlyphIcon } from "./icons"
-import Text from "./OldText"
-// Component imports
-import Translation from "./Translation"
+import { trackCustomEvent } from "@/lib/utils/matomo"
 
-interface FixedDotProps extends ButtonProps {
+import { DEFAULT_LOCALE } from "@/lib/constants"
+
+import { useSurvey } from "@/hooks/useSurvey"
+
+type FixedDotProps = ButtonProps & {
   bottomOffset: number
   isExpanded: boolean
 }
-const FixedDot: React.FC<FixedDotProps> = ({
+const FixedDot = ({
   children,
   bottomOffset,
   isExpanded,
   ...props
-}) => {
+}: FixedDotProps) => {
   const size = "3rem"
   return (
     <Button
@@ -55,11 +54,10 @@ const FixedDot: React.FC<FixedDotProps> = ({
       alignItems="center"
       whiteSpace="normal"
       _hover={{
-        cursor: "pointer",
         transform: "scale(1.1)",
         transition: "transform 0.2s ease-in-out",
       }}
-      transition="transform 0.2s ease-in-out, width 0.25s linear,
+      transition="transform 0.2s ease-in-out, width 0.25s ease-in-out,
       border-radius 0.25s linear"
       {...props}
     >
@@ -68,29 +66,24 @@ const FixedDot: React.FC<FixedDotProps> = ({
   )
 }
 
-interface FeedbackWidgetProps {
-  location: string
-}
-const FeedbackWidget: React.FC<FeedbackWidgetProps> = ({ location = "" }) => {
+const FeedbackWidget = () => {
   const { t } = useTranslation("common")
-  const { locale } = useRouter()
-
-  const containerRef = useRef<HTMLInputElement>(null)
-  useOnClickOutside(containerRef, () => handleClose(), [`mousedown`])
-  const [isOpen, setIsOpen] = useState<boolean>(false)
-  const [isExpanded, setIsExpanded] = useState<boolean>(false)
-  const [feedbackSubmitted, setFeedbackSubmitted] = useState<boolean>(false)
+  const { asPath, locale } = useRouter()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const cancelRef = useRef<HTMLButtonElement>(null)
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [feedbackSubmitted, setFeedbackSubmitted] = useState(false)
 
   useEffect(() => {
-    // Reset component state when path (location) changes
-    setIsOpen(false)
+    // Reset component state when path (asPath) changes
+    onClose()
     setFeedbackSubmitted(false)
     setIsExpanded(false)
 
-    let expandTimeout = setTimeout(() => setIsExpanded(true), 30000)
+    let expandTimeout = setTimeout(() => setIsExpanded(true), 30_000)
 
     return () => clearTimeout(expandTimeout)
-  }, [location])
+  }, [asPath, onClose])
 
   const surveyUrl = useSurvey(feedbackSubmitted)
 
@@ -99,30 +92,33 @@ const FeedbackWidget: React.FC<FeedbackWidgetProps> = ({ location = "" }) => {
     const CONDITIONAL_OFFSET = 6.75
     let offset = 0
     pathsWithBottomNav.forEach((path) => {
-      if (location.includes(path)) {
+      if (asPath.includes(path)) {
         offset = CONDITIONAL_OFFSET
       }
     })
     return offset
-  }, [location])
+  }, [asPath])
 
   const handleClose = (): void => {
-    setIsOpen(false)
+    console.log("HANDLE CLOSE TRIGGERED")
+    onClose()
     trackCustomEvent({
       eventCategory: `FeedbackWidget toggled`,
       eventAction: `Clicked`,
       eventName: `Closed feedback widget`,
     })
   }
+
   const handleOpen = (): void => {
-    setIsOpen(true)
+    onOpen()
     setIsExpanded(false)
     trackCustomEvent({
       eventCategory: `FeedbackWidget toggled`,
       eventAction: `Clicked`,
       eventName: `Opened feedback widget`,
     })
   }
+
   const handleSubmit = (choice: boolean): void => {
     trackCustomEvent({
       eventCategory: `Page is helpful feedback`,
@@ -138,14 +134,13 @@ const FeedbackWidget: React.FC<FeedbackWidgetProps> = ({ location = "" }) => {
       eventName: "Feedback survey opened",
     })
     window && surveyUrl && window.open(surveyUrl, "_blank")
-    setIsOpen(false) // Close widget without triggering redundant tracker event
+    onClose() // Close widget without triggering redundant tracker event
     setIsExpanded(false)
   }
 
-  useKeyPress(`Escape`, handleClose)
+  // Dispay on English pages only
+  if (locale !== DEFAULT_LOCALE) return null
 
-  if (locale! !== DEFAULT_LOCALE) return null
-  const closeButtonSize = "24px"
   return (
     <>
       <FixedDot
@@ -175,128 +170,97 @@ const FeedbackWidget: React.FC<FeedbackWidgetProps> = ({ location = "" }) => {
                 alignItems="center"
                 display={{ base: "none", lg: isExpanded ? "flex" : "none" }}
               >
-                <Translation id="feedback-widget-prompt" />
+                {t("feedback-widget-prompt")}
               </Text>
             </ScaleFade>
           )}
         </Box>
       </FixedDot>
-      {isOpen && (
-        <Box
-          display="block"
-          position="fixed"
-          inset={0}
-          bgColor="blackAlpha.400"
-          zIndex={1001} /* Above the nav bar */
-        >
-          <FocusTrap
-            focusTrapOptions={{
-              fallbackFocus: `#dot`,
-            }}
+
+      <AlertDialog
+        isOpen={isOpen}
+        leastDestructiveRef={cancelRef}
+        onClose={handleClose}
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent
+            position="fixed"
+            insetEnd={{ base: 4, sm: 8 }}
+            insetStart={{ base: 4, sm: "auto" }}
+            bottom={{ base: `${bottomOffset + 5}rem`, lg: 20 }}
+            w={{ base: "auto", sm: "300px" }}
+            bgColor="ednBackground"
+            border="1px"
+            borderColor="buttonColor"
+            boxShadow="tableItemBox"
+            borderRadius="base"
+            py="4"
+            px="2"
           >
-            <Flex
-              id="modal"
-              ref={containerRef}
-              boxSizing="border-box"
-              w={{ base: "auto", sm: "300px" }}
-              bgColor="ednBackground"
-              border="1px"
-              borderColor="buttonColor"
-              boxShadow="tableItemBox"
-              borderRadius="base" /* 0.25rem */
-              position="fixed"
-              insetEnd={{ base: 4, sm: 8 }}
-              insetStart={{ base: 4, sm: "auto" }}
-              bottom={{ base: `${bottomOffset + 5}rem`, lg: 20 }}
-              zIndex={1002} /* Above the modal background */
-              _hover={{
-                transform: "scale(1.02)",
-                transition: "transform 0.2s ease-in-out",
-              }}
-              transition="transform 0.2s ease-in-out"
-              direction="column"
-              alignItems="center"
+            <AlertDialogCloseButton />
+
+            <AlertDialogHeader
+              fontSize="xl"
+              fontWeight="bold"
+              lineHeight="6"
               textAlign="center"
-              p={8}
             >
-              <Button
-                variant="ghost"
-                onClick={handleClose}
-                aria-label={t("close")}
-                position="absolute"
-                insetEnd={2}
-                top={2}
-                cursor="pointer"
-                h={closeButtonSize}
-                w={closeButtonSize}
-                minW={closeButtonSize}
-                minH={closeButtonSize}
-                _hover={{
-                  transform: "scale(1.1)",
-                  transition: "transform 0.2s ease-in-out",
-                }}
-                transition="transform 0.2s ease-in-out"
-              >
-                <Icon as={MdClose} h={closeButtonSize} w={closeButtonSize} />
-              </Button>
+              {feedbackSubmitted
+                ? t("feedback-widget-thank-you-title")
+                : t("feedback-widget-prompt")}
+            </AlertDialogHeader>
 
-              <Text fontWeight="bold" fontSize="xl" lineHeight={6}>
-                {feedbackSubmitted ? (
-                  <Translation id="feedback-widget-thank-you-title" />
-                ) : (
-                  <Translation id="feedback-widget-prompt" />
-                )}
-              </Text>
-              {feedbackSubmitted && (
-                <Text fontWeight="normal" fontSize="md" lineHeight={5}>
-                  <Translation id="feedback-widget-thank-you-subtitle" />
-                </Text>
-              )}
-              {feedbackSubmitted && (
-                <Text
+            {/* Body: */}
+            {feedbackSubmitted && (
+              <>
+                <AlertDialogBody
+                  fontWeight="normal"
+                  fontSize="md"
+                  lineHeight="5"
+                  textAlign="center"
+                >
+                  {t("feedback-widget-thank-you-subtitle")}
+                </AlertDialogBody>
+                <AlertDialogBody
                   fontWeight="bold"
                   fontSize="xs"
-                  lineHeight={4}
+                  lineHeight="4"
                   letterSpacing="wide"
                   color="searchBorder"
+                  textAlign="center"
                 >
-                  <Translation id="feedback-widget-thank-you-timing" />
-                </Text>
-              )}
-              <Flex flexWrap="nowrap" gap={6} width="full">
-                {feedbackSubmitted ? (
+                  {t("feedback-widget-thank-you-timing")}
+                </AlertDialogBody>
+              </>
+            )}
+
+            <AlertDialogFooter display="flex" gap="6">
+              {feedbackSubmitted ? (
+                <Button onClick={handleSurveyOpen} flex={1}>
+                  {t("feedback-widget-thank-you-cta")}
+                </Button>
+              ) : (
+                <>
                   <Button
-                    onClick={handleSurveyOpen}
-                    aria-label={t("feedback-widget-thank-you-cta")}
+                    variant="solid"
+                    onClick={() => handleSubmit(true)}
                     flex={1}
                   >
-                    <Translation id="feedback-widget-thank-you-cta" />
+                    {t("yes")}
                   </Button>
-                ) : (
-                  <>
-                    <Button
-                      variant="solid"
-                      onClick={() => handleSubmit(true)}
-                      aria-label={t("yes")}
-                      flex={1}
-                    >
-                      <Translation id="yes" />
-                    </Button>
-                    <Button
-                      variant="solid"
-                      onClick={() => handleSubmit(false)}
-                      aria-label={t("no")}
-                      flex={1}
-                    >
-                      <Translation id="no" />
-                    </Button>
-                  </>
-                )}
-              </Flex>
-            </Flex>
-          </FocusTrap>
-        </Box>
-      )}
+                  <Button
+                    variant="solid"
+                    onClick={() => handleSubmit(false)}
+                    flex={1}
+                  >
+                    {t("no")}
+                  </Button>
+                </>
+              )}
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
     </>
   )
 }
diff --git a/src/layouts/RootLayout.tsx b/src/layouts/RootLayout.tsx
@@ -6,6 +6,7 @@ import { Container } from "@chakra-ui/react"
 import { Lang } from "@/lib/types"
 import { Root } from "@/lib/interfaces"
 
+import FeedbackWidget from "@/components/FeedbackWidget"
 import Footer from "@/components/Footer"
 import Nav from "@/components/Nav"
 import TranslationBanner from "@/components/TranslationBanner"
@@ -62,6 +63,7 @@ export const RootLayout = ({
       {children}
 
       <Footer lastDeployDate={lastDeployDate} />
+      <FeedbackWidget />
     </Container>
   )
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -61,7 +61,6 @@
     "./src/components/EthVideo.tsx",
     "./src/components/EventCard.tsx",
     "./src/components/ExpandableInfo.tsx",
-    "./src/components/FeedbackWidget.tsx",
     "./src/components/FileContributorsCrowdin.tsx",
     "./src/components/FindWallet/WalletFilterSidebar/WalletFilterFeature/index.tsx",
     "./src/components/FindWallet/WalletFilterSidebar/WalletFilterFeature/useWalletFilterFeature.tsx",

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@ import { Container } from "@chakra-ui/react"`
`6`	`6`	`import { Lang } from "@/lib/types"`
`7`	`7`	`import { Root } from "@/lib/interfaces"`
`8`	`8`
	`9`	`+import FeedbackWidget from "@/components/FeedbackWidget"`
`9`	`10`	`import Footer from "@/components/Footer"`
`10`	`11`	`import Nav from "@/components/Nav"`
`11`	`12`	`import TranslationBanner from "@/components/TranslationBanner"`
`@@ -62,6 +63,7 @@ export const RootLayout = ({`
`62`	`63`	`{children}`
`63`	`64`
`64`	`65`	`<Footer lastDeployDate={lastDeployDate} />`
	`66`	`+ <FeedbackWidget />`
`65`	`67`	`</Container>`
`66`	`68`	`)`
`67`	`69`	`}`