Merge branch 'develop' into sitemap-e2e-test

chaynHQ · Sep 16, 2024 · 5aa306d · 5aa306d
2 parents 88b0d2b + 6df6559
commit 5aa306d
Show file tree

Hide file tree

Showing 48 changed files with 662 additions and 533 deletions.
diff --git a/.github/workflows/lighthouse-performance.yml b/.github/workflows/lighthouse-performance.yml
@@ -41,7 +41,6 @@ jobs:
             https://bloom-frontend-git-develop-chaynhq.vercel.app/meet-the-team
             https://bloom-frontend-git-develop-chaynhq.vercel.app/auth/register
             https://bloom-frontend-git-develop-chaynhq.vercel.app/welcome/bumble
-            https://bloom-frontend-git-develop-chaynhq.vercel.app/partnership/bumble
           budgetPath: ./lighthouse_desktop_budget.json # test performance budgets
           configPath: '.github/configs/lighthouse-desktop-rc.yml' # set lighthouse config
       - name: Upload artifact
@@ -70,7 +69,6 @@ jobs:
             https://bloom-frontend-git-develop-chaynhq.vercel.app/meet-the-team
             https://bloom-frontend-git-develop-chaynhq.vercel.app/auth/register
             https://bloom-frontend-git-develop-chaynhq.vercel.app/welcome/bumble
-            https://bloom-frontend-git-develop-chaynhq.vercel.app/partnership/bumble
           budgetPath: ./lighthouse_budget.json # test performance budgets
           configPath: '.github/configs/lighthouse-rc.yml' # set lighthouse config
       - name: Upload artifact

diff --git a/components/banner/SignUpBanner.tsx b/components/banner/SignUpBanner.tsx
@@ -29,7 +29,7 @@ export const SignUpBanner = () => {
   }, []);
 
   return (
-    <Container sx={containerStyle}>
+    <Container id="signup-banner" sx={containerStyle}>
       <Typography variant="h2" component="h2" mb={2}>
         {t('signUpTodayPromo.title')}
       </Typography>

diff --git a/components/cards/SessionCard.tsx b/components/cards/SessionCard.tsx
@@ -11,6 +11,7 @@ import {
 } from '@mui/material';
 import { ISbStoryData } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { rowStyle } from '../../styles/common';
 import Link from '../common/Link';
@@ -55,14 +56,29 @@ interface SessionCardProps {
   session: ISbStoryData;
   sessionSubtitle: string;
   storyblokCourseId: number;
-  clickable: boolean;
+  isLoggedIn: boolean;
 }
 
 const SessionCard = (props: SessionCardProps) => {
-  const { session, sessionSubtitle, storyblokCourseId, clickable } = props;
+  const { session, sessionSubtitle, storyblokCourseId, isLoggedIn } = props;
   const [expanded, setExpanded] = useState<boolean>(false);
 
   const t = useTranslations('Courses');
+  const router = useRouter();
+
+  const scrollToSignupBanner = () => {
+    if (isLoggedIn) {
+      router.push(`/${session.full_slug}`);
+    } else {
+      const signupBanner = document.getElementById('signup-banner');
+
+      if (signupBanner) {
+        const scrollToY = signupBanner.getBoundingClientRect().top + window.scrollY - 136;
+
+        window.scrollTo({ top: scrollToY, behavior: 'smooth' });
+      }
+    }
+  };
 
   const handleExpandClick = () => {
     setExpanded(!expanded);
@@ -74,27 +90,13 @@ const SessionCard = (props: SessionCardProps) => {
 
   return (
     <Card sx={cardStyle}>
-      {clickable ? (
-        <CardActionArea
-          sx={cardActionStyle}
-          component={Link}
-          href={`/${session.full_slug}`}
-          aria-label={`${t('navigateToSession')} ${session.name}`}
-        >
-          <CardContent sx={cardContentStyle}>
-            <Box sx={cardContentRowStyles}>
-              <SessionProgressDisplay
-                sessionId={session.id}
-                storyblokCourseId={storyblokCourseId}
-              />
-              <Typography flex={1} component="h3" variant="h3">
-                {session.content.name}
-              </Typography>
-            </Box>
-            <Typography color="grey.700">{sessionSubtitle}</Typography>
-          </CardContent>
-        </CardActionArea>
-      ) : (
+      <CardActionArea
+        sx={cardActionStyle}
+        {...(isLoggedIn
+          ? { onClick: scrollToSignupBanner }
+          : { href: `/${session.full_slug}`, component: Link })}
+        aria-label={`${t('navigateToSession')} ${session.name}`}
+      >
         <CardContent sx={cardContentStyle}>
           <Box sx={cardContentRowStyles}>
             <SessionProgressDisplay sessionId={session.id} storyblokCourseId={storyblokCourseId} />
@@ -104,7 +106,7 @@ const SessionCard = (props: SessionCardProps) => {
           </Box>
           <Typography color="grey.700">{sessionSubtitle}</Typography>
         </CardContent>
-      )}
+      </CardActionArea>
       <CardActions sx={cardActionsStyle}>
         <IconButton
           sx={{ marginLeft: 'auto' }}

diff --git a/components/common/Quote.tsx b/components/common/Quote.tsx
@@ -19,28 +19,18 @@ const Quote = (props: QuoteProps) => {
       : textSize === 'small'
         ? { xs: 1, md: 1.125 }
         : textSize === 'large'
-          ? { xs: 1.25, md: 1.5 }
+          ? { xs: 1.25, md: 1.375 }
           : textSize === 'extra-large'
-            ? { xs: 1.5, md: 1.75 }
+            ? { xs: 1.375, md: 1.5 }
             : { xs: 1.125, md: 1.25 }; // default / medium
-  const quotePosition =
-    textSize === 'extra-small'
-      ? { top: '-50px', left: '0' }
-      : textSize === 'small'
-        ? { top: '-40px', left: '0' }
-        : { top: '-50px', left: '0' }; // medium/ large/ extra large
-  const quoteSize =
-    textSize === 'extra-small' || textSize === 'small'
-      ? { height: '20px', width: '20px' }
-      : { height: '20px', width: '30px' }; // medium/ large/ extra large
 
   const containerStyle = {
     fontFamily: 'Montserrat, sans-serif',
     fontStyle: 'italic',
     maxWidth: 700,
     blockquote: {
       fontSize: { xs: `${fontSize.xs}rem`, md: `${fontSize.md}rem` },
-      lineHeight: `calc(${fontSize.md} * 1.75rem)`,
+      lineHeight: { xs: `calc(${fontSize.xs} * 1.625rem)`, md: `calc(${fontSize.md} * 1.625rem)` },
       marginX: 0,
       position: 'relative',
       '&:before': {
@@ -50,11 +40,13 @@ const Quote = (props: QuoteProps) => {
         color: iconColor,
         fontSize: `calc(${fontSize.md} * 4rem)`,
         position: 'absolute',
-        ...quoteSize,
-        ...quotePosition,
+        height: '28px',
+        width: '28px',
+        top: { xs: '-60px', md: '-40px' },
+        left: { xs: 0, md: '-44px' },
       },
       '&:after': {
-        content: 'no-close-quote',
+        content: 'none',
       },
     },
     cite: {

diff --git a/components/forms/AboutYouSetAForm.tsx b/components/forms/AboutYouSetAForm.tsx
@@ -61,7 +61,6 @@ const AboutYouSetAForm = () => {
   const user = useTypedSelector((state) => state.user);
   const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
   const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
-  const isPublicUser = partnerAccesses.length === 0 && !partnerAdmin.id;
 
   const scaleQuestions: ScaleFieldItem[] = [
     { name: 'Q1', inputState: scale1Input, inputStateSetter: setScale1Input },
@@ -187,19 +186,15 @@ const AboutYouSetAForm = () => {
         ))}
 
         {/* Additional user setting for email reminders frequency */}
-        {isPublicUser && (
-          <>
-            <Typography mt={3} mb={1.5}>
-              {tAccount('introduction')}
-            </Typography>
-            <Typography>{tAccount('description')}</Typography>
-            <EmailRemindersSettingsFormControl
-              selectedInput={emailRemindersSettingInput}
-              setSelectedInput={setEmailRemindersSettingInput}
-            />
-            <Typography variant="body2">{tAccount('update')}</Typography>
-          </>
-        )}
+        <Typography mt={3} mb={1.5}>
+          {tAccount('introduction')}
+        </Typography>
+        <Typography>{tAccount('description')}</Typography>
+        <EmailRemindersSettingsFormControl
+          selectedInput={emailRemindersSettingInput}
+          setSelectedInput={setEmailRemindersSettingInput}
+        />
+        <Typography variant="body2">{tAccount('update')}</Typography>
 
         {formError && (
           <Typography color="error.main" mb={2}>

diff --git a/components/forms/PhoneInput.tsx b/components/forms/PhoneInput.tsx
@@ -71,6 +71,8 @@ const PhoneInput = (props: PhoneInputProps) => {
 
   return (
     <TextField
+      id="phoneNumber"
+      name="phoneNumber"
       variant="standard"
       label={t('phoneNumber')}
       color="primary"

diff --git a/components/forms/RegisterForm.tsx b/components/forms/RegisterForm.tsx
@@ -58,7 +58,7 @@ const RegisterForm = (props: RegisterFormProps) => {
   const userLoading = useTypedSelector((state) => state.user.loading);
 
   const [loading, setLoading] = useState<boolean>(false);
-  const [codeInput, setCodeInput] = useState<string>('');
+  const [codeInput, setCodeInput] = useState<string>(codeParam ?? '');
   const [nameInput, setNameInput] = useState<string>('');
   const [emailInput, setEmailInput] = useState<string>('');
   const [passwordInput, setPasswordInput] = useState<string>('');
@@ -76,11 +76,9 @@ const RegisterForm = (props: RegisterFormProps) => {
   const tS = useTranslations('Shared');
   const router = useRouter();
 
-  useEffect(() => {
-    if (codeParam) {
-      setCodeInput(codeParam);
-    }
-  }, [codeParam]);
+  // Include access code field if the partner requires access codes, or the user
+  // has provided an access code for additional features on signup (i.e. not required, but additional access)
+  const includeCodeField = partnerName && (accessCodeRequired || codeParam);
 
   useEffect(() => {
     // Redirects in 2 scenarios:
@@ -194,15 +192,15 @@ const RegisterForm = (props: RegisterFormProps) => {
     setLoading(true);
     setFormError('');
 
-    partnerName && accessCodeRequired && (await validateAccessCode());
+    includeCodeField && (await validateAccessCode());
     await createUserRecord();
     setLoading(false);
   };
 
   return (
     <Box sx={containerStyle}>
       <form autoComplete="off" onSubmit={submitHandler}>
-        {partnerName && accessCodeRequired && (
+        {includeCodeField && (
           <TextField
             id="partnerAccessCode"
             onChange={(e) => setCodeInput(e.target.value)}
@@ -279,15 +277,15 @@ interface PartnerRegisterFormProps {
 
 export const PartnerRegisterForm = ({ partnerName, codeParam }: PartnerRegisterFormProps) => {
   const partners = useTypedSelector((state) => state.partners);
-  const [accessCodeRequired, setAccessCodeRequired] = useState<boolean>(true);
+  const [accessCodeRequired, setAccessCodeRequired] = useState<boolean>(false);
   const [partnerId, setPartnerId] = useState<string | undefined>(undefined);
 
   useGetAutomaticAccessCodeFeatureForPartnerQuery(partnerName);
 
   useEffect(() => {
     const partnerData = partners.find((p) => p.name.toLowerCase() === partnerName.toLowerCase());
-    if (partnerData) {
-      setAccessCodeRequired(!hasAutomaticAccessFeature(partnerData));
+    if (partnerData && hasAutomaticAccessFeature(partnerData) === false) {
+      setAccessCodeRequired(true);
       setPartnerId(partnerData.id);
     }
   }, [partners, partnerName]);

diff --git a/components/forms/WelcomeCodeForm.tsx b/components/forms/WelcomeCodeForm.tsx
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
@@ -122,7 +122,7 @@ const Footer = () => {
       addUniquePartner(partnersList, partner + '');
     }
 
-    if (router.pathname.includes('/welcome') || router.pathname.includes('/partnership')) {
+    if (router.pathname.includes('/welcome')) {
       const partnerName = router.asPath.split('/')[2].split('?')[0];
       addUniquePartner(partnersList, partnerName);
     }

diff --git a/components/storyblok/StoryblokCoursePage.tsx b/components/storyblok/StoryblokCoursePage.tsx
@@ -19,6 +19,7 @@ import { determineCourseProgress } from '../../utils/courseProgress';
 import hasAccessToPage from '../../utils/hasAccessToPage';
 import { getEventUserData, logEvent } from '../../utils/logEvent';
 import { RichTextOptions } from '../../utils/richText';
+import { SignUpBanner } from '../banner/SignUpBanner';
 
 const containerStyle = {
   backgroundColor: 'secondary.light',
@@ -217,7 +218,7 @@ const StoryblokCoursePage = (props: StoryblokCoursePageProps) => {
                             session={session}
                             sessionSubtitle={position}
                             storyblokCourseId={storyId}
-                            clickable={isLoggedIn}
+                            isLoggedIn={isLoggedIn}
                           />
                         );
                       })}
@@ -229,6 +230,7 @@ const StoryblokCoursePage = (props: StoryblokCoursePageProps) => {
           </>
         )}
       </Container>
+      {!isLoggedIn && <SignUpBanner />}
     </Box>
   );
 };