Merge branch 'main' into fix-facebook-redirect-fail

Author: ilasw

packages/eslint-config/index.js

@@ -128,6 +128,7 @@ module.exports = {
           },
         ],
       },
-    ]
+    ],
+    '@typescript-eslint/explicit-module-boundary-types': "off",
   },
 };

packages/extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extension",
-  "version": "3.36.23",
+  "version": "3.36.24",
   "scripts": {
     "dev:chrome": "cross-env NODE_ENV=development cross-env TARGET_BROWSER=chrome webpack --watch",
     "dev:opera": "cross-env NODE_ENV=development cross-env TARGET_BROWSER=opera webpack --watch",

packages/shared/src/components/ProfileMenu/sections/AccountSection.tsx

@@ -4,14 +4,19 @@ import type { ReactElement } from 'react';
 import { ProfileSection } from '../ProfileSection';
 import { CreditCardIcon, InviteIcon, SettingsIcon } from '../../icons';
 import { webappUrl } from '../../../lib/constants';
+import { useLazyModal } from '../../../hooks/useLazyModal';
+import { LazyModal } from '../../modals/common/types';
 
 export const AccountSection = (): ReactElement => {
+  const { openModal } = useLazyModal();
+
   return (
     <ProfileSection
       items={[
         {
           title: 'Settings',
-          href: `${webappUrl}account/profile`,
+          // href: `${webappUrl}account/profile`,
+          onClick: () => openModal({ type: LazyModal.UserSettings }),
           icon: <SettingsIcon />,
         },
         {

packages/shared/src/components/comments/CommentContainer.tsx

@@ -21,8 +21,8 @@ import { VerifiedCompanyUserBadge } from '../VerifiedCompanyUserBadge';
 import { Separator } from '../cards/common/common';
 import { PlusUserBadge } from '../PlusUserBadge';
 import { ProfileImageSize } from '../ProfilePicture';
-import { Image } from '../image/Image';
 import { useHasAccessToCores } from '../../hooks/useCoresFeature';
+import { Image } from '../image/Image';
 
 interface ClassName extends CommentClassName {
   content?: string;
@@ -124,7 +124,7 @@ export default function CommentContainer({
             {!!comment.author?.isPlus && (
               <PlusUserBadge user={comment.author} />
             )}
-            <div className="flex items-center">
+            <div className="flex min-w-0 shrink items-center">
               <ProfileLink href={comment.author.permalink}>
                 <TruncateText
                   className="text-text-tertiary typo-footnote"
@@ -133,6 +133,8 @@ export default function CommentContainer({
                   @{comment.author.username}
                 </TruncateText>
               </ProfileLink>
+            </div>
+            <div>
               <Separator className="!mx-0.5" />
               <CommentPublishDate comment={comment} />
             </div>
@@ -149,6 +151,15 @@ export default function CommentContainer({
             {comment.author.id === postScoutId && <UserBadge>Scout</UserBadge>}
           </FlexRow>
         </div>
+        {hasAccessToCores && !!comment.award && (
+          <div className="ml-2 flex size-7 items-center justify-center rounded-10 bg-surface-float">
+            <Image
+              src={comment.award.image}
+              alt={comment.award.name}
+              className="size-5 object-contain"
+            />
+          </div>
+        )}
       </header>
       <div
         className={classNames(
@@ -163,15 +174,6 @@ export default function CommentContainer({
         />
         {actions}
       </div>
-      {hasAccessToCores && !!comment.award && (
-        <div className="absolute right-3 top-3 flex size-7 items-center justify-center rounded-10 bg-surface-float">
-          <Image
-            src={comment.award.image}
-            alt={comment.award.name}
-            className="size-8"
-          />
-        </div>
-      )}
     </article>
   );
 }

packages/shared/src/components/fields/form/FormWrapper.tsx

@@ -41,6 +41,7 @@ export function FormWrapper({
   const titleElement = (
     <PageHeaderTitle
       className={classNames(
+        'mx-4',
         !isHeaderTitle && 'mt-5',
         className?.title ?? 'typo-body',
       )}

packages/shared/src/components/modals/common/ModalSidebar.tsx

@@ -61,7 +61,12 @@ export function ModalSidebar({
   className,
 }: ModalSidebarProps): ReactElement {
   return (
-    <div className={classNames('flex w-full flex-1 flex-row', className)}>
+    <div
+      className={classNames(
+        'flex w-full flex-1 flex-row overflow-y-auto',
+        className,
+      )}
+    >
       {children}
     </div>
   );

packages/shared/src/components/profile/ProfileButton.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { QueryClient } from '@tanstack/react-query';
 import type { RenderResult } from '@testing-library/react';
-import { waitFor, render, screen } from '@testing-library/react';
+import { waitFor, render, screen, act } from '@testing-library/react';
 import ProfileButton from './ProfileButton';
 import defaultUser from '../../../__tests__/fixture/loggedUser';
 import { TestBootProvider } from '../../../__tests__/helpers/boot';
@@ -32,21 +32,27 @@ const renderComponent = (): RenderResult => {
   );
 };
 
-it('account details should link to account profile page', async () => {
+it('should show settings option that opens modal', async () => {
   renderComponent();
 
   const profileBtn = await screen.findByLabelText('Profile settings');
-  profileBtn.click();
-
-  const accountLink = await screen.findByRole('link', { name: 'Settings' });
-  expect(accountLink).toHaveAttribute('href', '/account/profile');
+  await act(async () => {
+    profileBtn.click();
+  });
+
+  const settingsButton = await screen.findByRole('button', {
+    name: 'Settings',
+  });
+  expect(settingsButton).toBeInTheDocument();
 });
 
 it('should click the logout button and logout', async () => {
   renderComponent();
 
   const profileBtn = await screen.findByLabelText('Profile settings');
-  profileBtn.click();
+  await act(async () => {
+    profileBtn.click();
+  });
 
   const logoutBtn = await screen.findByText('Logout');
   logoutBtn.click();

packages/shared/src/features/onboarding/hooks/useFunnelNavigation.ts

@@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect, useCallback } from 'react';
+import { useMemo, useState, useEffect, useCallback, useRef } from 'react';
 import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import { useAtom } from 'jotai/react';
 import { UNDO } from 'jotai-history';
@@ -10,12 +10,12 @@ import {
   getFunnelStepByPosition,
   funnelPositionHistoryAtom,
 } from '../store/funnelStore';
-import type { FunnelSession } from '../types/funnelBoot';
+import { useToggle } from '../../../hooks/useToggle';
 
 interface UseFunnelNavigationProps {
   funnel: FunnelJSON;
+  initialStepId?: string | null;
   onNavigation: TrackOnNavigate;
-  session: FunnelSession;
 }
 
 type Chapters = Array<{ steps: number }>;
@@ -32,6 +32,7 @@ interface HeaderNavigation {
 
 export interface UseFunnelNavigationReturn {
   chapters: Chapters;
+  isReady: boolean;
   navigate: NavigateFunction;
   position: FunnelPosition;
   step: FunnelStep;
@@ -74,8 +75,8 @@ function updateURLWithStepId({
 
 export const useFunnelNavigation = ({
   funnel,
+  initialStepId,
   onNavigation,
-  session,
 }: UseFunnelNavigationProps): UseFunnelNavigationReturn => {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -84,6 +85,9 @@ export const useFunnelNavigation = ({
   const [position, setPosition] = useAtom(funnelPositionAtom);
   const [history, dispatchHistory] = useAtom(funnelPositionHistoryAtom);
   const isFirstStep = !position.step && !position.chapter;
+  const isInitialized = useRef<boolean>(false);
+  const [isReady, setIsReady] = useToggle(false);
+  const urlStepId = searchParams.get('stepId');
 
   const chapters: Chapters = useMemo(
     () => funnel.chapters.map((chapter) => ({ steps: chapter.steps.length })),
@@ -92,6 +96,16 @@ export const useFunnelNavigation = ({
 
   const stepMap: StepMap = useMemo(() => getStepMap(funnel), [funnel]);
 
+  const setPositionById = useCallback(
+    (stepId: FunnelStep['id']) => {
+      const newPosition = stepMap[stepId]?.position;
+      if (newPosition) {
+        setPosition(newPosition);
+      }
+    },
+    [setPosition, stepMap],
+  );
+
   const step: FunnelStep = useMemo(
     () => getFunnelStepByPosition(funnel, position),
     [funnel, position],
@@ -111,8 +125,7 @@ export const useFunnelNavigation = ({
       }
 
       // update the position in the store
-      const newPosition = stepMap[to]?.position;
-      setPosition(newPosition);
+      setPositionById(to);
 
       // track the navigation event
       onNavigation({ from, to, timeDuration, type });
@@ -128,7 +141,7 @@ export const useFunnelNavigation = ({
       pathname,
       router,
       searchParams,
-      setPosition,
+      setPositionById,
       step,
       stepMap,
       stepTimerStart,
@@ -160,22 +173,43 @@ export const useFunnelNavigation = ({
     [isFirstStep, step?.transitions],
   );
 
-  useEffect(
-    () => {
-      // Check if the URL has a stepId parameter or if there is a session
-      const stepId = searchParams.get('stepId') ?? session.currentStep;
+  // On load: Update the initial position in state and URL
+  useEffect(() => {
+    if (isInitialized.current) {
+      return;
+    }
 
-      if (!stepId) {
-        return;
-      }
+    if (initialStepId) {
+      setPositionById(initialStepId);
+    }
 
-      const newPosition = stepMap[stepId]?.position;
-      setPosition(newPosition);
-    },
-    // only run on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [funnel.id],
-  );
+    updateURLWithStepId({
+      router,
+      pathname,
+      searchParams,
+      stepId: initialStepId || step.id,
+    });
+
+    isInitialized.current = true;
+    setIsReady(true);
+  }, [
+    initialStepId,
+    pathname,
+    router,
+    searchParams,
+    setPositionById,
+    step.id,
+    setIsReady,
+  ]);
+
+  // After load: update the position when the URL's stepId changes
+  useEffect(() => {
+    if (!urlStepId || !isInitialized.current) {
+      return;
+    }
+
+    setPositionById(urlStepId);
+  }, [setPositionById, urlStepId]);
 
   return {
     back,
@@ -184,5 +218,6 @@ export const useFunnelNavigation = ({
     position,
     skip,
     step,
+    isReady,
   };
 };

packages/shared/src/features/onboarding/shared/FunnelStepper.spec.tsx

@@ -86,6 +86,7 @@ describe('FunnelStepper component', () => {
       position: { chapter: 0, step: 0 },
       chapters: [{ steps: 1 }],
       step: mockStep,
+      isReady: true,
     });
 
     (useFunnelTracking as jest.Mock).mockReturnValue({
@@ -273,6 +274,7 @@ describe('FunnelStepper component', () => {
       position: { chapter: 0, step: 0 },
       chapters: [{ steps: 2 }],
       step: quizStep,
+      isReady: true,
     });
 
     renderComponent(mockFunnelWithMultipleSteps);

packages/shared/src/features/onboarding/shared/FunnelStepper.tsx

@@ -38,9 +38,10 @@ import classed from '../../../lib/classed';
 
 export interface FunnelStepperProps {
   funnel: FunnelJSON;
+  initialStepId?: string | null;
+  onComplete?: () => void;
   session: FunnelSession;
   showCookieBanner?: boolean;
-  onComplete?: () => void;
 }
 
 const stepComponentMap = {
@@ -78,6 +79,7 @@ const HiddenStep = classed('div', 'hidden');
 
 export const FunnelStepper = ({
   funnel,
+  initialStepId,
   session,
   showCookieBanner,
   onComplete,
@@ -90,8 +92,12 @@ export const FunnelStepper = ({
     trackOnComplete,
     trackFunnelEvent,
   } = useFunnelTracking({ funnel, session });
-  const { back, chapters, navigate, position, skip, step } =
-    useFunnelNavigation({ funnel, onNavigation: trackOnNavigate, session });
+  const { back, chapters, navigate, position, skip, step, isReady } =
+    useFunnelNavigation({
+      funnel,
+      initialStepId,
+      onNavigation: trackOnNavigate,
+    });
   const { transition: sendTransition } = useStepTransition(session.id);
   const { showBanner, ...cookieConsentProps } = useFunnelCookies({
     defaultOpen: showCookieBanner,
@@ -128,6 +134,10 @@ export const FunnelStepper = ({
     }
   };
 
+  if (!isReady) {
+    return null;
+  }
+
   return (
     <section
       data-testid="funnel-stepper"