add extension button

Author: AmarTrebinjac

packages/shared/src/components/modals/IntroQuestModal.spec.tsx

@@ -3,6 +3,7 @@ import { act, render, screen } from '@testing-library/react';
 import ReactModal from 'react-modal';
 import { IntroQuestModal } from './IntroQuestModal';
 import { QUEST_CLAIMED_STAMP_REVEAL_DELAY_MS } from '../quest/QuestCard';
+import { useLogContext } from '../../contexts/LogContext';
 import { ActionType } from '../../graphql/actions';
 import { useActions, useViewSize } from '../../hooks';
 import { useQuestDashboard } from '../../hooks/useQuestDashboard';
@@ -13,12 +14,17 @@ import {
   QuestType,
   type UserQuest,
 } from '../../graphql/quests';
+import { downloadBrowserExtension } from '../../lib/constants';
+import { BrowserName, getCurrentBrowserName } from '../../lib/func';
+import { LogEvent, TargetType } from '../../lib/log';
 
 ReactModal.setAppElement('body');
 
+const mockPush = jest.fn();
+
 jest.mock('next/router', () => ({
   useRouter: () => ({
-    push: jest.fn(),
+    push: mockPush,
   }),
 }));
 
@@ -30,6 +36,15 @@ jest.mock('../../hooks/useClaimQuestReward', () => ({
   useClaimQuestReward: jest.fn(),
 }));
 
+jest.mock('../../contexts/LogContext', () => ({
+  useLogContext: jest.fn(),
+}));
+
+jest.mock('../../lib/func', () => ({
+  ...jest.requireActual('../../lib/func'),
+  getCurrentBrowserName: jest.fn(),
+}));
+
 jest.mock('../tooltip/Tooltip', () => ({
   Tooltip: ({ children }: { children: React.ReactNode }) => children,
 }));
@@ -46,7 +61,10 @@ 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 mockUseLogContext = useLogContext as jest.Mock;
+const mockGetCurrentBrowserName = getCurrentBrowserName as jest.Mock;
 const completeAction = jest.fn();
+const logEvent = jest.fn();
 
 const buildIntroQuest = (overrides: Partial<UserQuest> = {}): UserQuest => ({
   userQuestId: 'uq-1',
@@ -75,9 +93,15 @@ const buildIntroQuest = (overrides: Partial<UserQuest> = {}): UserQuest => ({
 describe('IntroQuestModal', () => {
   beforeEach(() => {
     completeAction.mockReset();
+    logEvent.mockReset();
+    mockPush.mockReset();
     mockUseActions.mockReturnValue({
       completeAction,
     });
+    mockUseLogContext.mockReturnValue({
+      logEvent,
+    });
+    mockGetCurrentBrowserName.mockReturnValue(BrowserName.Chrome);
     mockUseViewSize.mockReturnValue(false);
     mockUseClaimQuestReward.mockReturnValue({
       mutate: jest.fn(),
@@ -118,6 +142,10 @@ describe('IntroQuestModal', () => {
 
     render(<IntroQuestModal isOpen onRequestClose={jest.fn()} />);
 
+    expect(logEvent).toHaveBeenCalledWith({
+      event_name: LogEvent.Impression,
+      target_type: TargetType.IntroQuestModal,
+    });
     expect(completeAction).toHaveBeenCalledWith(ActionType.ViewedIntroQuests);
     expect(
       screen.getByRole('heading', { name: 'Intro quests', hidden: true }),
@@ -136,6 +164,12 @@ describe('IntroQuestModal', () => {
         hidden: true,
       }),
     ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {
+        name: 'Go to Chrome Web Store',
+        hidden: true,
+      }),
+    ).toBeInTheDocument();
   });
 
   it('does not render destination button for completed quests', () => {
@@ -170,6 +204,69 @@ describe('IntroQuestModal', () => {
     ).not.toBeInTheDocument();
   });
 
+  it('opens the extension intro quest in the matching browser store', () => {
+    const onRequestClose = jest.fn();
+    const openSpy = jest.spyOn(window, 'open').mockImplementation(() => null);
+
+    mockGetCurrentBrowserName.mockReturnValue(BrowserName.Edge);
+    mockUseQuestDashboard.mockReturnValue({
+      data: {
+        intro: [
+          buildIntroQuest({
+            status: QuestStatus.Completed,
+            progress: 1,
+          }),
+        ],
+      },
+      isPending: false,
+      isError: false,
+    });
+
+    render(<IntroQuestModal isOpen onRequestClose={onRequestClose} />);
+
+    screen
+      .getByRole('button', {
+        name: 'Go to Edge Add-ons',
+        hidden: true,
+      })
+      .click();
+
+    expect(openSpy).toHaveBeenCalledWith(
+      downloadBrowserExtension,
+      '_blank',
+      'noopener,noreferrer',
+    );
+    expect(onRequestClose).toHaveBeenCalled();
+    expect(mockPush).not.toHaveBeenCalled();
+
+    openSpy.mockRestore();
+  });
+
+  it('does not render the extension destination button for unsupported browsers', () => {
+    mockGetCurrentBrowserName.mockReturnValue(BrowserName.Safari);
+    mockUseQuestDashboard.mockReturnValue({
+      data: {
+        intro: [
+          buildIntroQuest({
+            status: QuestStatus.Completed,
+            progress: 1,
+          }),
+        ],
+      },
+      isPending: false,
+      isError: false,
+    });
+
+    render(<IntroQuestModal isOpen onRequestClose={jest.fn()} />);
+
+    expect(
+      screen.queryByRole('button', {
+        name: /Go to /,
+        hidden: true,
+      }),
+    ).not.toBeInTheDocument();
+  });
+
   it('shows the claim button and claimed stamp for claimable intro quests', async () => {
     jest.useFakeTimers();
     const mutate = jest.fn((_variables, callbacks) => callbacks?.onSuccess?.());

packages/shared/src/components/modals/IntroQuestModal.tsx

@@ -25,10 +25,13 @@ import {
 } from '../quest/QuestRewardAnimations';
 import { ActionType } from '../../graphql/actions';
 import type { QuestType } from '../../graphql/quests';
+import { useLogContext } from '../../contexts/LogContext';
 import { useActions } from '../../hooks';
 import { useClaimQuestReward } from '../../hooks/useClaimQuestReward';
 import { useQuestDashboard } from '../../hooks/useQuestDashboard';
-import { webappUrl } from '../../lib/constants';
+import { downloadBrowserExtension, webappUrl } from '../../lib/constants';
+import { BrowserName, getCurrentBrowserName } from '../../lib/func';
+import { LogEvent, TargetType } from '../../lib/log';
 
 type IntroQuestFlightLayerState = {
   claimRotationId: string;
@@ -50,6 +53,28 @@ const introDestinationByEventType: Record<string, QuestDestination> = {
   },
 };
 
+const getExtensionIntroDestination = (
+  browserName: BrowserName,
+): QuestDestination | null => {
+  switch (browserName) {
+    case BrowserName.Edge:
+      return {
+        label: 'Edge Add-ons',
+        href: downloadBrowserExtension,
+        openInNewTab: true,
+      };
+    case BrowserName.Chrome:
+    case BrowserName.Brave:
+      return {
+        label: 'Chrome Web Store',
+        href: downloadBrowserExtension,
+        openInNewTab: true,
+      };
+    default:
+      return null;
+  }
+};
+
 const padStep = (index: number): string =>
   `Step ${(index + 1).toString().padStart(2, '0')}`;
 
@@ -58,6 +83,8 @@ export const IntroQuestModal = ({
   ...props
 }: ModalProps): ReactElement => {
   const router = useRouter();
+  const browserName = getCurrentBrowserName();
+  const { logEvent } = useLogContext();
   const { completeAction } = useActions();
   const { data, isPending, isError } = useQuestDashboard();
   const {
@@ -82,6 +109,7 @@ export const IntroQuestModal = ({
   ] = useState<string[]>([]);
   const [deferredClaimedStampRotationIds, setDeferredClaimedStampRotationIds] =
     useState<string[]>([]);
+  const loggedImpressionRef = useRef(false);
   const claimedStampTimersRef = useRef<number[]>([]);
   const claimedStampRotationIdSet = useMemo(
     () => new Set(claimedStampRotationIds),
@@ -99,14 +127,37 @@ export const IntroQuestModal = ({
     () => new Set(deferredClaimedStampRotationIds),
     [deferredClaimedStampRotationIds],
   );
+  const introDestinations = useMemo<Record<string, QuestDestination | null>>(
+    () => ({
+      ...introDestinationByEventType,
+      extension_install: getExtensionIntroDestination(browserName),
+    }),
+    [browserName],
+  );
 
   useEffect(() => {
     if (!props.isOpen) {
       return;
     }
 
+    if (!loggedImpressionRef.current) {
+      logEvent({
+        event_name: LogEvent.Impression,
+        target_type: TargetType.IntroQuestModal,
+      });
+      loggedImpressionRef.current = true;
+    }
+
     completeAction(ActionType.ViewedIntroQuests);
-  }, [completeAction, props.isOpen]);
+  }, [completeAction, logEvent, props.isOpen]);
+
+  useEffect(() => {
+    if (props.isOpen) {
+      return;
+    }
+
+    loggedImpressionRef.current = false;
+  }, [props.isOpen]);
 
   const clearClaimedStampTimers = useCallback(() => {
     claimedStampTimersRef.current.forEach((timerId) => {
@@ -237,7 +288,18 @@ export const IntroQuestModal = ({
 
   const handleDestinationClick = useCallback(
     async (destination: QuestDestination) => {
-      onRequestClose?.();
+      onRequestClose?.(undefined as never);
+
+      if ('href' in destination) {
+        if (destination.openInNewTab) {
+          window.open(destination.href, '_blank', 'noopener,noreferrer');
+          return;
+        }
+
+        window.location.assign(destination.href);
+        return;
+      }
+
       await router.push(`${webappUrl}${destination.path.replace(/^\//, '')}`);
     },
     [onRequestClose, router],
@@ -294,9 +356,7 @@ export const IntroQuestModal = ({
                 key={userQuest.rotationId}
                 quest={userQuest}
                 onClaim={handleClaim}
-                destination={
-                  introDestinationByEventType[userQuest.quest.eventType]
-                }
+                destination={introDestinations[userQuest.quest.eventType]}
                 onDestinationClick={handleDestinationClick}
                 showLevelSystem
                 isClaiming={claimingQuestId === userQuest.userQuestId}

packages/shared/src/components/quest/QuestButton.tsx

@@ -1184,6 +1184,17 @@ export const QuestButton = ({
   const handleDestinationClick = useCallback(
     async (destination: QuestDestination) => {
       setIsOpen(false);
+
+      if ('href' in destination) {
+        if (destination.openInNewTab) {
+          window.open(destination.href, '_blank', 'noopener,noreferrer');
+          return;
+        }
+
+        window.location.assign(destination.href);
+        return;
+      }
+
       await router.push(`${webappUrl}${destination.path.replace(/^\//, '')}`);
     },
     [router],

packages/shared/src/components/quest/QuestCard.tsx

@@ -16,11 +16,22 @@ type ClaimedStampMaskHole = {
   ry: number;
 };
 
-export type QuestDestination = {
+type QuestPathDestination = {
   label: string;
   path: string;
+  href?: never;
+  openInNewTab?: never;
 };
 
+type QuestHrefDestination = {
+  label: string;
+  href: string;
+  openInNewTab?: boolean;
+  path?: never;
+};
+
+export type QuestDestination = QuestPathDestination | QuestHrefDestination;
+
 export const QUEST_CLAIMED_STAMP_REVEAL_DELAY_MS = 220;
 export const QUEST_CLAIMED_STAMP_ANIMATION_MS = 340;
 

packages/shared/src/lib/featureManagement.ts

@@ -145,7 +145,10 @@ export const featureProfileCompletionIndicator = new Feature(
   0,
 );
 
-export const featureNewD1Experience = new Feature('new_d1_experience', true);
+export const featureNewD1Experience = new Feature(
+  'new_d1_experience',
+  isDevelopment,
+);
 
 export const questsFeature = new Feature('quests', true);
 

packages/shared/src/lib/log.ts

@@ -465,6 +465,7 @@ export enum TargetType {
   Source = 'source',
   Tag = 'tag',
   Quest = 'quest',
+  IntroQuestModal = 'intro quest modal',
   // Settings
   Layout = 'layout',
   Theme = 'theme',