feat: implement a What's New prompt (#539)

* feat: create whats new initial component

* feat: create initial whats-new hook

* feat: create whats-new story

* feat: add button to open dialog in storybook

* feat: complete popup ui

* feat: add check for new updates or installs

* fix: fix linter issues

* fix: use proper features and add video

* fix: properly fetch version from manifest

* feat: add a link to open the popup

* fix: update spacing and features' content

* fix: update UTRP Map name

* fix: increase icon size and display version correctly

* feat: update the features video

* fix: update offwhite color

* fix: color typo

* fix: fixing colors again

* feat: use numbers instead of boolean

* fix: typo in import

* feat: add type safety to features array

* feat: cdn video url

* fix: delete mp4 video

* feat: handle video failure to load

* fix: make border outline tight to video

* feat: make design responsive

* fix: make features array readonly

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
Co-authored-by: Derek Chen <derex1987@gmail.com>
This commit is contained in:
Abdulrahman Alshahrani
2025-03-08 15:41:09 -06:00
committed by GitHub
parent 5493c63f18
commit f036d409e6
6 changed files with 267 additions and 13 deletions

View File

@@ -13,6 +13,7 @@ import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalog
import { CalendarContext } from '@views/contexts/CalendarContext';
import useCourseFromUrl from '@views/hooks/useCourseFromUrl';
import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSchedule';
import useWhatsNewPopUp from '@views/hooks/useWhatsNew';
import { MessageListener } from 'chrome-extension-toolkit';
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
@@ -34,6 +35,7 @@ export default function Calendar(): JSX.Element {
const [showPopup, setShowPopup] = useState<boolean>(course !== null);
const [showSidebar, setShowSidebar] = useState<boolean>(true);
const showWhatsNewDialog = useWhatsNewPopUp();
useEffect(() => {
const listener = new MessageListener<CalendarTabMessages>({
@@ -99,19 +101,34 @@ export default function Calendar(): JSX.Element {
<ResourceLinks />
<Divider orientation='horizontal' size='100%' />
{/* <TeamLinks /> */}
<a
href={CRX_PAGES.REPORT}
className='flex items-center gap-spacing-2 text-ut-burntorange underline-offset-2 hover:underline'
target='_blank'
rel='noreferrer'
onClick={event => {
event.preventDefault();
openReportWindow();
}}
>
<Text variant='p'>Send us Feedback!</Text>
<OutwardArrowIcon className='h-4 w-4' />
</a>
<div className='flex flex-col gap-spacing-3'>
<a
href={CRX_PAGES.REPORT}
className='flex items-center gap-spacing-2 text-ut-burntorange underline-offset-2 hover:underline'
target='_blank'
rel='noreferrer'
onClick={event => {
event.preventDefault();
openReportWindow();
}}
>
<Text variant='p'>Send us Feedback!</Text>
<OutwardArrowIcon className='h-4 w-4' />
</a>
<a
href=''
className='flex items-center gap-spacing-2 text-ut-burntorange underline-offset-2 hover:underline'
target='_blank'
rel='noreferrer'
onClick={event => {
event.preventDefault();
showWhatsNewDialog();
}}
>
<Text variant='p'>What&apos;s New!</Text>
<OutwardArrowIcon className='h-4 w-4' />
</a>
</div>
</div>
<CalendarFooter />