allow modal for hint but not step type guide (#1179)

infinity-keys · Mar 29, 2024 · dc4bb57 · dc4bb57
1 parent c89af1e
commit dc4bb57
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 15 deletions.
diff --git a/web/src/components/RewardablePuzzle/RewardablePuzzle/RewardablePuzzle.tsx b/web/src/components/RewardablePuzzle/RewardablePuzzle/RewardablePuzzle.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react'
 
-// import { Transition } from '@headlessui/react'
-// import XCircleIcon from '@heroicons/react/24/outline/XCircleIcon'
+import { Transition } from '@headlessui/react'
+import XCircleIcon from '@heroicons/react/24/outline/XCircleIcon'
 import { IK_LOGO_FULL_URL } from '@infinity-keys/constants'
 import { buildUrlString } from '@infinity-keys/core'
 import type {
   FindRewardablePuzzleBySlug,
-  // PuzzleRequirements,
+  PuzzleRequirements,
 } from 'types/graphql'
 
 import { routes, useLocation } from '@redwoodjs/router'
@@ -21,7 +21,7 @@ import ImagesContainer from 'src/components/PuzzleLayout/ImageContainer/ImagesCo
 import SectionContainer from 'src/components/PuzzleLayout/SectionContainer/SectionContainer'
 import TextContainer from 'src/components/PuzzleLayout/TextContainer/TextContainer'
 import Seo from 'src/components/Seo/Seo'
-// import { requirementsLookup } from 'src/lib/puzzleRequirements'
+import { requirementsLookup } from 'src/lib/puzzleRequirements'
 import { rewardableLandingRoute } from 'src/lib/urlBuilders'
 import { useGlobalInfo } from 'src/providers/globalInfo/globalInfo'
 
@@ -67,9 +67,9 @@ const Rewardable = ({ rewardable }: Props) => {
   })
 
   const { isAuthenticated } = useAuth()
-  // const [showOverlay, setShowOverlay] = useState(false)
-  // const [currentOverlayContent, setCurrentOverlayContent] =
-  // useState<PuzzleRequirements | null>(null)
+  const [showOverlay, setShowOverlay] = useState(false)
+  const [currentOverlayContent, setCurrentOverlayContent] =
+    useState<PuzzleRequirements | null>(null)
   const { pageHeading, setPageHeading } = useGlobalInfo()
 
   useEffect(() => {
@@ -158,12 +158,12 @@ const Rewardable = ({ rewardable }: Props) => {
                   <p className="mb-1 text-lg font-medium md:text-xl">
                     Get Ready!
                   </p>
-                  {/* <p className="text-sm md:text-base">
+                  <p className="text-sm md:text-base">
                     Check the items below before you jump in.
-                  </p> */}
+                  </p>
                 </div>
 
-                {/* <div className="relative flex flex-wrap justify-center gap-10">
+                <div className="relative flex flex-wrap justify-center gap-10">
                   {rewardable.puzzle?.requirements?.map((req) =>
                     req ? (
                       <button
@@ -184,9 +184,9 @@ const Rewardable = ({ rewardable }: Props) => {
                       </button>
                     ) : null
                   )}
-                </div> */}
+                </div>
 
-                {/* <Transition
+                <Transition
                   show={showOverlay}
                   enter="transition-opacity duration-75"
                   enterFrom="opacity-0"
@@ -225,7 +225,7 @@ const Rewardable = ({ rewardable }: Props) => {
                       <XCircleIcon className="h-7 w-7 fill-transparent" />
                     </button>
                   </div>
-                </Transition> */}
+                </Transition>
               </div>
             )
           ) : (

diff --git a/web/src/components/StepPageLayout/StepPageLayout.tsx b/web/src/components/StepPageLayout/StepPageLayout.tsx
@@ -13,6 +13,7 @@ interface OverlayContent {
 }
 interface StepPageProps extends PropsWithChildren {
   showOverlay?: boolean
+  disableModal?: boolean
   overlayContent?: OverlayContent
   setShowOverlay?: (b: boolean) => void
 }
@@ -21,6 +22,7 @@ const StepPageLayout = ({
   showOverlay,
   overlayContent,
   setShowOverlay,
+  disableModal,
   children,
 }: StepPageProps) => {
   const hasOverlay =
@@ -37,8 +39,12 @@ const StepPageLayout = ({
         {hasOverlay && (
           <div className="relative z-40 flex justify-center">
             <button
-              className="pointer-events-none"
-              // onClick={() => setShowOverlay(!showOverlay)}
+              className={disableModal ? 'pointer-events-none' : ''}
+              onClick={() => {
+                if (!disableModal) {
+                  setShowOverlay(!showOverlay)
+                }
+              }}
             >
               <span className="overlay-icon hidden max-w-[226px] text-transparent md:block">
                 {overlayContent.icon}

diff --git a/web/src/components/StepsLayout/StepsLayout.tsx b/web/src/components/StepsLayout/StepsLayout.tsx
@@ -181,6 +181,7 @@ const StepsLayout = ({ step, refetch }: StepsLayoutProps) => {
                     <StepPageLayout
                       key={page.id}
                       showOverlay={showOverlay}
+                      disableModal={true}
                       setShowOverlay={setShowOverlay}
                       overlayContent={
                         page.showStepGuideHint && step.stepGuideType