Fix course session behaviour test (#1289)

.github/workflows/cypress-release-test.yml

@@ -2,7 +2,7 @@ name: Cypress release tests
 
 on:
   push:
-    branches: [develop, dependabot/**, '*test*', 'app-migration-layouts']
+    branches: [develop, dependabot/**, '*test*']
 
 jobs:
   # vercel will redeploy the develop/staging app on creating a PR to main

app/[locale]/action-handler/page.tsx

@@ -1,19 +1,25 @@
 'use client';
 
-import { useRouter } from '@/i18n/routing';
-import { notFound, redirect, useSearchParams } from 'next/navigation';
+import { redirect } from '@/i18n/routing';
+import { useLocale } from 'next-intl';
+import { notFound, useSearchParams } from 'next/navigation';
 
 export const dynamic = 'force-dynamic';
 
 // Page to handle redirects from external tools. E.g. firebase auth emails redirect to /action-handler?mode=resetPassword&oobCode....
 export default function Page() {
-  const router = useRouter();
   const searchParams = useSearchParams();
+  const locale = useLocale();
 
   let modeParam = searchParams.get('mode');
 
   if (modeParam && modeParam === 'resetPassword') {
-    redirect(`/auth/reset-password?oobCode=${searchParams.get('oobCode')}`);
+    redirect({
+      href: '/auth/reset-password',
+      // @ts-ignore
+      query: { oobCode: searchParams.get('oobCode') },
+      locale,
+    });
   } else {
     notFound();
   }

components/crisp/utils/createCrispProfileData.test.ts

@@ -1,9 +1,10 @@
-import { STORYBLOK_STORY_STATUS } from '@/lib/constants/enums';
 import { Course, Session } from '@/lib/store/coursesSlice';
 import { PartnerAccess } from '@/lib/store/partnerAccessSlice';
 import { expect } from '@jest/globals';
 import { createCrispProfileData } from './createCrispProfileData';
 
+const storyblokPublished = 'published';
+
 const partnerAccess = {
   featureLiveChat: true,
   featureTherapy: true,
@@ -17,7 +18,7 @@ const partnerAccess = {
 const course = {
   id: 'c1',
   name: 'Course 1',
-  status: STORYBLOK_STORY_STATUS.PUBLISHED,
+  status: storyblokPublished,
   completed: false,
   sessions: [
     {
@@ -26,23 +27,23 @@ const course = {
       id: 's1',
       slug: 'slug',
       storyblokId: 1,
-      status: STORYBLOK_STORY_STATUS.PUBLISHED,
+      status: storyblokPublished,
     } as Session,
     {
       completed: true,
       name: 'Session 2',
       id: 's2',
       slug: 'slug',
       storyblokId: 2,
-      status: STORYBLOK_STORY_STATUS.PUBLISHED,
+      status: storyblokPublished,
     },
     {
       completed: false,
       name: 'Session 3',
       id: 's3',
       slug: 'slug',
       storyblokId: 3,
-      status: STORYBLOK_STORY_STATUS.PUBLISHED,
+      status: storyblokPublished,
     },
   ],
 } as Course;

components/forms/AboutYouDemographicForm.tsx

@@ -31,15 +31,8 @@ import {
 import { useRollbar } from '@rollbar/react';
 import axios from 'axios';
 import { useLocale, useTranslations } from 'next-intl';
-import { useParams, useSearchParams } from 'next/navigation';
-import {
-  JSXElementConstructor,
-  ReactElement,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import { useSearchParams } from 'next/navigation';
+import { JSXElementConstructor, ReactElement, ReactNode, useEffect, useState } from 'react';
 
 const rowStyles = {
   ...rowStyle,
@@ -58,7 +51,6 @@ const actionsStyle = {
 
 const AboutYouDemographicForm = () => {
   const t = useTranslations('Account.aboutYou.demographicForm');
-  const params = useParams<{ locale: string }>();
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -91,18 +83,6 @@ const AboutYouDemographicForm = () => {
   const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
   const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
 
-  // Get a new searchParams string by merging the current
-  // searchParams with a provided key/value pair
-  const createQueryString = useCallback(
-    (name: string, value: string) => {
-      const params = new URLSearchParams(searchParams?.toString());
-      params.set(name, value);
-
-      return params.toString();
-    },
-    [searchParams],
-  );
-
   useEffect(() => {
     if (locale) {
       setCountryList(
@@ -172,7 +152,7 @@ const AboutYouDemographicForm = () => {
           logEvent(ABOUT_YOU_DEMO_SUCCESS, eventUserData);
 
           // append `?q=a` to the url to reload the page and show the setA form instead
-          router.push(pathname + '?' + createQueryString('q', 'a'));
+          router.push({ pathname, query: { q: 'a' } });
           setLoading(false);
         })
         .catch(function (error) {

components/forms/RegisterForm.tsx

@@ -44,7 +44,6 @@ import {
 } from '@mui/material';
 import { useRollbar } from '@rollbar/react';
 import { useLocale, useTranslations } from 'next-intl';
-import { useParams } from 'next/navigation';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 
@@ -67,9 +66,7 @@ interface RegisterFormProps {
 
 const RegisterForm = (props: RegisterFormProps) => {
   const { codeParam, partnerName, partnerId, accessCodeRequired } = props;
-  const params = useParams<{ locale: string }>();
   const locale = useLocale();
-
   const userId = useTypedSelector((state) => state.user.id);
   const userLoading = useTypedSelector((state) => state.user.loading);
   const rollbar = useRollbar();

components/forms/ResetPasswordForm.tsx

@@ -14,12 +14,10 @@ import LoadingButton from '@mui/lab/LoadingButton';
 import { Box, Button, Link, TextField, Typography } from '@mui/material';
 import { useRollbar } from '@rollbar/react';
 import { useLocale, useTranslations } from 'next-intl';
-import { useParams } from 'next/navigation';
 import * as React from 'react';
 import { useState } from 'react';
 
 export const EmailForm = () => {
-  const params = useParams<{ locale: string }>();
   const locale = useLocale();
   const [emailInput, setEmailInput] = useState<string>('');
   const [resetEmailSent, setResetEmailSent] = useState<boolean>(false);

components/guards/AuthGuard.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import LoadingContainer from '@/components/common/LoadingContainer';
-import { usePathname, useRouter } from '@/i18n/routing';
+import { redirect, usePathname } from '@/i18n/routing';
 import { useTypedSelector } from '@/lib/hooks/store';
 import useLoadUser from '@/lib/hooks/useLoadUser';
-import { default as generateReturnUrlQuery } from '@/lib/utils/generateReturnQuery';
 import { getIsMaintenanceMode } from '@/lib/utils/maintenanceMode';
+import { useLocale } from 'next-intl';
 import { ReactNode } from 'react';
 import { PartnerAdminGuard } from './PartnerAdminGuard';
 import { SuperAdminGuard } from './SuperAdminGuard';
@@ -16,9 +16,9 @@ const authenticatedPathHeads = ['admin', 'partner-admin', 'therapy', 'account'];
 // Adds required permissions guard to pages, redirecting where required permissions are missing
 // New pages will default to requiring authenticated and public pages must be added to the array above
 export function AuthGuard({ children }: { children: ReactNode }) {
-  const router = useRouter();
   const pathname = usePathname();
-  console.log(pathname);
+  const locale = useLocale();
+
   const userId = useTypedSelector((state) => state.user.id);
   const userLoading = useTypedSelector((state) => state.user.loading);
   const userAuthLoading = useTypedSelector((state) => state.user.authStateLoading);
@@ -33,15 +33,18 @@ export function AuthGuard({ children }: { children: ReactNode }) {
   // If app is in maintenance mode, redirect all pages to /maintenance
   if (isMaintenanceMode && pathname !== '/maintenance') {
     if (typeof window !== 'undefined') {
-      router.replace(`/maintenance`);
+      redirect({
+        href: '/maintenance',
+        locale,
+      });
     }
     return <LoadingContainer />;
   }
 
   // If app is not in maintenance mode, redirect /maintenance to home page
   if (!isMaintenanceMode && pathname === '/maintenance') {
     if (typeof window !== 'undefined') {
-      router.replace(`/`);
+      redirect({ href: '/', locale });
     }
     return <LoadingContainer />;
   }
@@ -56,7 +59,12 @@ export function AuthGuard({ children }: { children: ReactNode }) {
 
   // Page requires authenticated user
   if (unauthenticated && typeof window !== 'undefined') {
-    router.replace(`/auth/login${generateReturnUrlQuery(pathname)}`);
+    redirect({
+      href: '/auth/login',
+      // @ts-ignore
+      query: { return_url: encodeURIComponent(pathname) },
+      locale,
+    });
   }
 
   if (userId) {

components/layout/LanguageMenu.tsx

@@ -42,9 +42,9 @@ const buttonStyle = {
 } as const;
 
 export default function LanguageMenu() {
-  const router = useRouter();
   const pathname = usePathname();
-  const params = useParams<{ locale: string }>();
+  const router = useRouter();
+  const params = useParams();
   const locale = useLocale();
   const t = useTranslations('Navigation');
 
@@ -56,11 +56,12 @@ export default function LanguageMenu() {
       logEvent(generateLanguageMenuEvent(locale));
       handleClose();
       router.replace(
-        // @ts-expect-error -- TypeScript will validate that only known `params`
-        // are used in combination with a given `pathname`. Since the two will
-        // always match for the current route, we can skip runtime checks.
-        { pathname, params },
-        { locale: locale },
+        {
+          pathname,
+          // @ts-ignore
+          params,
+        },
+        locale,
       );
     });
   }

components/pages/RegisterPage.tsx

@@ -23,7 +23,7 @@ import {
   useMediaQuery,
   useTheme,
 } from '@mui/material';
-import { useTranslations } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 import Image from 'next/image';
 import { useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -74,6 +74,7 @@ export default function RegisterPage() {
   const t = useTranslations('Auth');
   const tS = useTranslations('Shared');
   const router = useRouter();
+  const locale = useLocale();
   const searchParams = useSearchParams();
   const theme = useTheme();
   const dispatch = useAppDispatch();
@@ -104,17 +105,17 @@ export default function RegisterPage() {
           entryPartnerAccessCode
         ) {
           // Entry code in state, add to url query in case of refresh
-          router.replace({
+          router.push({
             pathname: '/auth/register',
-            query: { partner: partner, code: entryPartnerAccessCode },
+            query: { code: entryPartnerAccessCode, partner: partner },
           });
           setCodeParam(entryPartnerAccessCode);
         }
       }
     } else {
       setAllPartnersContent(getAllPartnersContent());
     }
-  }, [router, dispatch, entryPartnerAccessCode, entryPartnerReferral, searchParams]);
+  }, [router, locale, dispatch, entryPartnerAccessCode, entryPartnerReferral, searchParams]);
 
   const headerProps = {
     partnerLogoSrc: partnerContent?.partnershipLogo || welcomeToBloom,

components/storyblok/StoryblokRelatedContent.tsx

@@ -6,7 +6,6 @@ import { EXERCISE_CATEGORIES, RELATED_CONTENT_CATEGORIES } from '@/lib/constants
 import { Box } from '@mui/material';
 import { ISbStoryData } from '@storyblok/react/rsc';
 import { useLocale, useTranslations } from 'next-intl';
-import { useParams } from 'next/navigation';
 import { useMemo } from 'react';
 import { StoryblokCoursePageProps } from './StoryblokCoursePage';
 import { StoryblokResourceConversationPageProps } from './StoryblokResourceConversationPage';
@@ -30,7 +29,6 @@ export interface StoryblokRelatedContentProps {
 export const StoryblokRelatedContent = (props: StoryblokRelatedContentProps) => {
   const { relatedContent, relatedExercises, userContentPartners = [] } = props;
   const tExerciseNames = useTranslations('Shared.exerciseNames');
-  const params = useParams<{ locale: string }>();
   const locale = useLocale();
 
   const relatedExercisesItems = relatedExercises.map((relatedExerciseId) => {

components/storyblok/StoryblokWelcomePage.tsx

@@ -18,9 +18,9 @@ import illustrationBloomHeadYellow from '@/public/illustration_bloom_head_yellow
 import welcomeToBloom from '@/public/welcome_to_bloom.svg';
 import { Box, Button, Container } from '@mui/material';
 import { ISbRichtext, storyblokEditable } from '@storyblok/react/rsc';
-import { useTranslations } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 import { useSearchParams } from 'next/navigation';
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { render } from 'storyblok-rich-text-react-renderer';
 
 const introContainerStyle = {
@@ -65,6 +65,7 @@ const StoryblokWelcomePage = (props: StoryblokWelcomePageProps) => {
 
   const [codeParam, setCodeParam] = useState<string>('');
   const router = useRouter();
+  const locale = useLocale();
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const dispatch: any = useAppDispatch();
@@ -75,19 +76,10 @@ const StoryblokWelcomePage = (props: StoryblokWelcomePageProps) => {
   const entryPartnerReferral = useTypedSelector((state) => state.user.entryPartnerReferral);
   const entryPartnerAccessCode = useTypedSelector((state) => state.user.entryPartnerAccessCode);
 
-  const createQueryString = useCallback(
-    (name: string, value: string) => {
-      const params = new URLSearchParams(searchParams?.toString());
-      params.set(name, value);
-
-      return params.toString();
-    },
-    [searchParams],
-  );
-
   // Ensure partner access codes are stored in state and url query, to handle app refreshes and redirects
   useEffect(() => {
     const code = searchParams.get('code');
+    const partner = searchParams.get('partner');
 
     if (code) {
       // code in url query
@@ -97,17 +89,19 @@ const StoryblokWelcomePage = (props: StoryblokWelcomePageProps) => {
       entryPartnerAccessCode
     ) {
       // Entry code in state, add to url query in case of refresh
-      router.replace(pathname + '?' + createQueryString('code', entryPartnerAccessCode));
-
+      router.push({
+        pathname,
+        query: { code: entryPartnerAccessCode, partner },
+      });
       setCodeParam(entryPartnerAccessCode);
     }
   }, [
     dispatch,
     router,
+    locale,
     entryPartnerAccessCode,
     entryPartnerReferral,
     partnerContent.name,
-    createQueryString,
     pathname,
     searchParams,
   ]);