dont show this again

AmarTrebinjac · AmarTrebinjac · commit ab414b4fb48c · 2026-05-05T02:24:31.000+02:00
diff --git a/packages/shared/src/components/filters/IntroQuestButton.tsx b/packages/shared/src/components/filters/IntroQuestButton.tsx
@@ -35,6 +35,9 @@ export function IntroQuestButton(): ReactElement | null {
     introQuests.length > 0 &&
     introQuests.every(({ status }) => status === QuestStatus.Claimed);
   const hasViewedIntroQuests = checkHasCompleted(ActionType.ViewedIntroQuests);
+  const hasCompletedIntroQuests = checkHasCompleted(
+    ActionType.IntroQuestsCompleted,
+  );
   const [isIntroCtaVisible, setIsIntroCtaVisible] = useState(false);
   const hasShownIntroCta = useRef(false);
   const shouldRenderButton =
@@ -43,7 +46,8 @@ export function IntroQuestButton(): ReactElement | null {
     isLoggedIn &&
     isNewD1Experience &&
     introQuests.length > 0 &&
-    !allIntroQuestsClaimed;
+    !allIntroQuestsClaimed &&
+    !hasCompletedIntroQuests;
   const showIntroCta =
     shouldRenderButton && (!hasShownIntroCta.current || isIntroCtaVisible);
 
diff --git a/packages/shared/src/components/modals/IntroQuestModal.spec.tsx b/packages/shared/src/components/modals/IntroQuestModal.spec.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import ReactModal from 'react-modal';
 import { IntroQuestModal } from './IntroQuestModal';
 import { QUEST_CLAIMED_STAMP_REVEAL_DELAY_MS } from '../quest/QuestCard';
@@ -8,6 +9,7 @@ import { ActionType } from '../../graphql/actions';
 import { useActions, useViewSize } from '../../hooks';
 import { useQuestDashboard } from '../../hooks/useQuestDashboard';
 import { useClaimQuestReward } from '../../hooks/useClaimQuestReward';
+import { usePrompt } from '../../hooks/usePrompt';
 import {
   QuestRewardType,
   QuestStatus,
@@ -36,6 +38,10 @@ jest.mock('../../hooks/useClaimQuestReward', () => ({
   useClaimQuestReward: jest.fn(),
 }));
 
+jest.mock('../../hooks/usePrompt', () => ({
+  usePrompt: jest.fn(),
+}));
+
 jest.mock('../../contexts/LogContext', () => ({
   useLogContext: jest.fn(),
 }));
@@ -61,10 +67,12 @@ const mockUseActions = useActions as jest.Mock;
 const mockUseViewSize = useViewSize as jest.Mock;
 const mockUseQuestDashboard = useQuestDashboard as jest.Mock;
 const mockUseClaimQuestReward = useClaimQuestReward as jest.Mock;
+const mockUsePrompt = usePrompt as jest.Mock;
 const mockUseLogContext = useLogContext as jest.Mock;
 const mockGetCurrentBrowserName = getCurrentBrowserName as jest.Mock;
 const completeAction = jest.fn();
 const logEvent = jest.fn();
+const showPrompt = jest.fn();
 
 const buildIntroQuest = (overrides: Partial<UserQuest> = {}): UserQuest => ({
   userQuestId: 'uq-1',
@@ -95,9 +103,13 @@ describe('IntroQuestModal', () => {
     completeAction.mockReset();
     logEvent.mockReset();
     mockPush.mockReset();
+    showPrompt.mockReset();
     mockUseActions.mockReturnValue({
       completeAction,
     });
+    mockUsePrompt.mockReturnValue({
+      showPrompt,
+    });
     mockUseLogContext.mockReturnValue({
       logEvent,
     });
@@ -170,6 +182,71 @@ describe('IntroQuestModal', () => {
         hidden: true,
       }),
     ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {
+        name: "Don't show me this again",
+        hidden: true,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('confirms before hiding intro quests from the modal', async () => {
+    const onRequestClose = jest.fn();
+    showPrompt.mockResolvedValue(true);
+    mockUseQuestDashboard.mockReturnValue({
+      data: {
+        intro: [buildIntroQuest()],
+      },
+      isPending: false,
+      isError: false,
+    });
+
+    render(<IntroQuestModal isOpen onRequestClose={onRequestClose} />);
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: "Don't show me this again",
+        hidden: true,
+      }),
+    );
+
+    expect(showPrompt).toHaveBeenCalledWith({
+      title: 'Hide intro quests?',
+      description:
+        'Are you sure you want to permanently hide the intro quests button?',
+      okButton: {
+        title: 'Yes, hide it',
+      },
+    });
+    expect(completeAction).toHaveBeenCalledWith(
+      ActionType.IntroQuestsCompleted,
+    );
+    await waitFor(() => expect(onRequestClose).toHaveBeenCalled());
+  });
+
+  it('keeps the modal open when hiding intro quests is cancelled', async () => {
+    const onRequestClose = jest.fn();
+    showPrompt.mockResolvedValue(false);
+    mockUseQuestDashboard.mockReturnValue({
+      data: {
+        intro: [buildIntroQuest()],
+      },
+      isPending: false,
+      isError: false,
+    });
+
+    render(<IntroQuestModal isOpen onRequestClose={onRequestClose} />);
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: "Don't show me this again",
+        hidden: true,
+      }),
+    );
+
+    expect(completeAction).toHaveBeenCalledTimes(1);
+    expect(completeAction).toHaveBeenCalledWith(ActionType.ViewedIntroQuests);
+    expect(onRequestClose).not.toHaveBeenCalled();
   });
 
   it('does not render destination button for completed quests', () => {
diff --git a/packages/shared/src/components/modals/IntroQuestModal.tsx b/packages/shared/src/components/modals/IntroQuestModal.tsx
@@ -10,6 +10,7 @@ import { useRouter } from 'next/router';
 import type { ModalProps } from './common/Modal';
 import { Modal } from './common/Modal';
 import { ModalClose } from './common/ModalClose';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
 import { TourIcon } from '../icons';
 import {
   QuestCard,
@@ -28,6 +29,7 @@ import type { QuestType } from '../../graphql/quests';
 import { useLogContext } from '../../contexts/LogContext';
 import { useActions } from '../../hooks';
 import { useClaimQuestReward } from '../../hooks/useClaimQuestReward';
+import { usePrompt } from '../../hooks/usePrompt';
 import { useQuestDashboard } from '../../hooks/useQuestDashboard';
 import { downloadBrowserExtension, webappUrl } from '../../lib/constants';
 import { BrowserName, getCurrentBrowserName } from '../../lib/func';
@@ -86,6 +88,7 @@ export const IntroQuestModal = ({
   const browserName = getCurrentBrowserName();
   const { logEvent } = useLogContext();
   const { completeAction } = useActions();
+  const { showPrompt } = usePrompt();
   const { data, isPending, isError } = useQuestDashboard();
   const {
     mutate: claimQuestReward,
@@ -305,6 +308,24 @@ export const IntroQuestModal = ({
     [onRequestClose, router],
   );
 
+  const handleHideIntroQuests = useCallback(async (): Promise<void> => {
+    const shouldHide = await showPrompt({
+      title: 'Hide intro quests?',
+      description:
+        'Are you sure you want to permanently hide the intro quests button?',
+      okButton: {
+        title: 'Yes, hide it',
+      },
+    });
+
+    if (!shouldHide) {
+      return;
+    }
+
+    await completeAction(ActionType.IntroQuestsCompleted);
+    onRequestClose?.(undefined as never);
+  }, [completeAction, onRequestClose, showPrompt]);
+
   useEffect(() => {
     return () => {
       clearClaimedStampTimers();
@@ -350,32 +371,44 @@ export const IntroQuestModal = ({
         )}
 
         {introQuests.length > 0 && (
-          <div className="flex flex-col gap-2">
-            {introQuests.map((userQuest, index) => (
-              <QuestCard
-                key={userQuest.rotationId}
-                quest={userQuest}
-                onClaim={handleClaim}
-                destination={introDestinations[userQuest.quest.eventType]}
-                onDestinationClick={handleDestinationClick}
-                showLevelSystem
-                isClaiming={claimingQuestId === userQuest.userQuestId}
-                isClaimAnimating={animatingClaimRotationIdSet.has(
-                  userQuest.rotationId,
-                )}
-                showClaimedStamp={claimedStampRotationIdSet.has(
-                  userQuest.rotationId,
-                )}
-                animateClaimedStamp={animatingClaimedStampRotationIdSet.has(
-                  userQuest.rotationId,
-                )}
-                suppressPersistedClaimedStamp={deferredClaimedStampRotationIdSet.has(
-                  userQuest.rotationId,
-                )}
-                eyebrow={padStep(index)}
-                showLockIcon={false}
-              />
-            ))}
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-2">
+              {introQuests.map((userQuest, index) => (
+                <QuestCard
+                  key={userQuest.rotationId}
+                  quest={userQuest}
+                  onClaim={handleClaim}
+                  destination={introDestinations[userQuest.quest.eventType]}
+                  onDestinationClick={handleDestinationClick}
+                  showLevelSystem
+                  isClaiming={claimingQuestId === userQuest.userQuestId}
+                  isClaimAnimating={animatingClaimRotationIdSet.has(
+                    userQuest.rotationId,
+                  )}
+                  showClaimedStamp={claimedStampRotationIdSet.has(
+                    userQuest.rotationId,
+                  )}
+                  animateClaimedStamp={animatingClaimedStampRotationIdSet.has(
+                    userQuest.rotationId,
+                  )}
+                  suppressPersistedClaimedStamp={deferredClaimedStampRotationIdSet.has(
+                    userQuest.rotationId,
+                  )}
+                  eyebrow={padStep(index)}
+                  showLockIcon={false}
+                />
+              ))}
+            </div>
+            <div className="flex justify-center border-t border-border-subtlest-tertiary pt-2">
+              <Button
+                type="button"
+                variant={ButtonVariant.Tertiary}
+                size={ButtonSize.Small}
+                onClick={handleHideIntroQuests}
+              >
+                Don&apos;t show me this again
+              </Button>
+            </div>
           </div>
         )}
       </Modal.Body>
diff --git a/packages/shared/src/graphql/actions.ts b/packages/shared/src/graphql/actions.ts
@@ -45,6 +45,7 @@ export enum ActionType {
   CompletedOnboarding = 'completed_onboarding',
   GeneratedBrief = 'generated_brief',
   ViewedIntroQuests = 'viewed_intro_quests',
+  IntroQuestsCompleted = 'intro_quests_completed',
   ClosedProfileBanner = 'closed_profile_banner',
   UploadedCV = 'uploaded_cv',
   DisableBriefCardCta = 'disable_brief_card_cta',
