Skip to content

Commit

Permalink
feat: update shorts and conversations page related content
Browse files Browse the repository at this point in the history
  • Loading branch information
@eleanorreem
eleanorreem committed Dec 27, 2024
1 parent 81841a1 commit 511b77b
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 60 deletions.
98 changes: 46 additions & 52 deletions components/storyblok/StoryblokResourceConversationPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,26 @@ import { Box, Container, Typography } from '@mui/material';
import { ISbRichtext, storyblokEditable } from '@storyblok/react';
import { useTranslations } from 'next-intl';
import Head from 'next/head';
import Image from 'next/image';
import { useEffect, useMemo, useState } from 'react';
import { render } from 'storyblok-rich-text-react-renderer';
import { PROGRESS_STATUS, RESOURCE_CATEGORIES } from '../../constants/enums';
import { PROGRESS_STATUS, RESOURCE_CATEGORIES, STORYBLOK_COLORS } from '../../constants/enums';
import {
RESOURCE_CONVERSATION_TRANSCRIPT_CLOSED,
RESOURCE_CONVERSATION_TRANSCRIPT_OPENED,
RESOURCE_CONVERSATION_VIEWED,
} from '../../constants/events';
import { useTypedSelector } from '../../hooks/store';
import illustrationCourses from '../../public/illustration_courses.svg';
import { Resource } from '../../store/resourcesSlice';
import { rowStyle } from '../../styles/common';
import theme from '../../styles/theme';
import { userHasAccessToPartnerContent } from '../../utils/hasAccessToPartnerContent';
import { getEventUserData, logEvent } from '../../utils/logEvent';
import { RichTextOptions } from '../../utils/richText';
import { SignUpBanner } from '../banner/SignUpBanner';
import PageSection from '../common/PageSection';
import ProgressStatus from '../common/ProgressStatus';
import ResourceFeedbackForm from '../forms/ResourceFeedbackForm';
import Header from '../layout/Header';
import { ResourceCompleteButton } from '../resources/ResourceCompleteButton';
import { ResourceConversationAudio } from '../resources/ResourceConversationAudio';
import { StoryblokPageSectionProps } from './StoryblokPageSection';
Expand Down Expand Up @@ -68,6 +70,7 @@ export interface StoryblokResourceConversationPageProps {
seo_description: string;
description: ISbRichtext;
header_image: { filename: string; alt: string };
duration: string;
audio: { filename: string };
audio_transcript: ISbRichtext;
page_sections: StoryblokPageSectionProps[];
Expand Down Expand Up @@ -96,6 +99,8 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
const t = useTranslations('Resources');
const tS = useTranslations('Shared');
const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
const userId = useTypedSelector((state) => state.user.id);

const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
const resources = useTypedSelector((state) => state.resources);
Expand All @@ -105,6 +110,7 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
);
const [resourceId, setResourceId] = useState<string>();
const [openTranscriptModal, setOpenTranscriptModal] = useState<boolean | null>(null);

const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);

const eventData = useMemo(() => {
Expand Down Expand Up @@ -172,13 +178,10 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
</>
)}
</Head>

<Container sx={{ background: theme.palette.bloomGradient }}>
<Box sx={headerStyle}>
<Box sx={headerLeftStyles}>
<Typography variant="h1" maxWidth={600}>
{name}
</Typography>
<Header
title={name}
introduction={
<Box display="flex" flexDirection="column" gap={3}>
{render(description, RichTextOptions)}
<Box sx={audioContainerStyle}>
<ResourceConversationAudio
Expand All @@ -190,39 +193,40 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
audio_transcript={audio_transcript}
/>
</Box>

{resourceId && (
<Box sx={progressStyle}>
{resourceProgress && <ProgressStatus status={resourceProgress} />}
{resourceProgress !== PROGRESS_STATUS.COMPLETED && (
<ResourceCompleteButton
resourceName={name}
category={RESOURCE_CATEGORIES.SHORT_VIDEO}
storyId={storyId}
eventData={eventData}
/>
)}
</Box>
)}
</Box>
<Box sx={headerRightStyle}>
{header_image && (
<Box sx={imageContainerStyle}>
<Image
alt={header_image.alt}
src={header_image.filename}
fill
sizes="500px"
style={{
objectFit: 'contain',
}}
/>
</Box>
)}
<Box>
{resourceId && (
<Box sx={progressStyle}>
{resourceProgress && <ProgressStatus status={resourceProgress} />}
{resourceProgress !== PROGRESS_STATUS.COMPLETED && (
<ResourceCompleteButton
resourceName={name}
category={RESOURCE_CATEGORIES.SHORT_VIDEO}
storyId={storyId}
eventData={eventData}
/>
)}
</Box>
)}
</Box>
</Box>
</Box>
</Container>

}
imageSrc={header_image ? header_image.filename : illustrationCourses}
/>
<PageSection color={STORYBLOK_COLORS.SECONDARY_MAIN} alignment="left">
<Typography variant="h2" fontWeight={600}>
Related content
</Typography>
<StoryblokRelatedContent
relatedContent={related_content}
relatedExercises={related_exercises}
userContentPartners={userHasAccessToPartnerContent(
partnerAdmin?.partner,
partnerAccesses,
null,
userId,
)}
/>
</PageSection>
{resourceId && (
<Container sx={{ bgcolor: 'background.paper' }}>
<ResourceFeedbackForm
Expand All @@ -231,16 +235,6 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
/>
</Container>
)}
<Container sx={{ bgcolor: 'secondary.main' }}>
<Typography variant="h2" mb={4}>
{tS('relatedContent.title')}
</Typography>
<StoryblokRelatedContent
relatedContent={related_content}
relatedExercises={related_exercises}
/>
</Container>

{!isLoggedIn && <SignUpBanner />}
</Box>
);
Expand Down
56 changes: 48 additions & 8 deletions components/storyblok/StoryblokResourceShortPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import { Box, Button, Container, Typography } from '@mui/material';
import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
import { Box, Button, Container, IconButton, Typography } from '@mui/material';
import { ISbRichtext, ISbStoryData, storyblokEditable } from '@storyblok/react';
import Cookies from 'js-cookie';
import { useTranslations } from 'next-intl';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useEffect, useMemo, useState } from 'react';
import { PROGRESS_STATUS, RESOURCE_CATEGORIES } from '../../constants/enums';
import { PROGRESS_STATUS, RESOURCE_CATEGORIES, STORYBLOK_COLORS } from '../../constants/enums';
import {
RESOURCE_SHORT_VIDEO_VIEWED,
RESOURCE_SHORT_VIDEO_VISIT_SESSION,
Expand All @@ -12,9 +15,11 @@ import { useTypedSelector } from '../../hooks/store';
import { Resource } from '../../store/resourcesSlice';
import { columnStyle, rowStyle } from '../../styles/common';
import theme from '../../styles/theme';
import { userHasAccessToPartnerContent } from '../../utils/hasAccessToPartnerContent';
import { getEventUserData, logEvent } from '../../utils/logEvent';
import { SignUpBanner } from '../banner/SignUpBanner';
import Link from '../common/Link';
import PageSection from '../common/PageSection';
import ProgressStatus from '../common/ProgressStatus';
import ResourceFeedbackForm from '../forms/ResourceFeedbackForm';
import { ResourceCompleteButton } from '../resources/ResourceCompleteButton';
Expand Down Expand Up @@ -46,22 +51,39 @@ const progressStyle = {
},
} as const;

const backButtonStyle = {
display: { md: 'none' },
width: '2.5rem',
marginLeft: '-0.675rem',
mb: 2,
mt: 0,
padding: 0,
} as const;

const backIconStyle = {
height: '1.75rem',
width: '1.75rem',
color: 'primary.dark',
} as const;

export interface StoryblokResourceShortPageProps {
storyId: number;
_uid: string;
_editable: string;
name: string;
seo_description: string;
description: ISbRichtext;
duration: string;
video: { url: string };
video_transcript: ISbRichtext;
page_sections: StoryblokPageSectionProps[];
related_session: ISbStoryData[];
related_course: ISbStoryData | null;
related_course?: ISbStoryData | null;
related_content: StoryblokRelatedContentStory[];
related_exercises: string[];
languages: string[];
component: 'resource_short_video';
included_for_partners: string[];
}

const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
Expand All @@ -80,13 +102,17 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
related_content,
related_exercises,
} = props;
const router = useRouter();
const t = useTranslations('Resources');
const tS = useTranslations('Shared');
const entryPartnerReferral = useTypedSelector((state) => state.user.entryPartnerReferral);
const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
const resources = useTypedSelector((state) => state.resources);
const userId = useTypedSelector((state) => state.user.id);
const isLoggedIn = useTypedSelector((state) => Boolean(state.user.id));

const [resourceProgress, setResourceProgress] = useState<PROGRESS_STATUS>(
PROGRESS_STATUS.NOT_STARTED,
);
Expand Down Expand Up @@ -155,7 +181,14 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
)}
</Head>

<Container sx={{ background: theme.palette.bloomGradient }}>
<Container sx={{ background: theme.palette.bloomGradient, paddingTop: ['20px', '60px'] }}>
<IconButton
sx={backButtonStyle}
onClick={() => router.back()}
aria-label={tS('navigateBack')}
>
<KeyboardArrowLeftIcon sx={backIconStyle} />
</IconButton>
<Typography variant="h1" maxWidth={600}>
{name}
</Typography>
Expand Down Expand Up @@ -217,15 +250,22 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
/>
</Container>
)}
<Container sx={{ bgcolor: 'secondary.main' }}>
<Typography variant="h2" mb={4}>
{tS('relatedContent.title')}

<PageSection alignment="flex-start" color={STORYBLOK_COLORS.SECONDARY_MAIN}>
<Typography variant="h2" fontWeight={600}>
Related content
</Typography>
<StoryblokRelatedContent
relatedContent={related_content}
relatedExercises={related_exercises}
userContentPartners={userHasAccessToPartnerContent(
partnerAdmin?.partner,
partnerAccesses,
Cookies.get('referralPartner') || entryPartnerReferral,
userId,
)}
/>
</Container>
</PageSection>

{!isLoggedIn && <SignUpBanner />}
</Box>
Expand Down

0 comments on commit 511b77b

Please sign in to comment.