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>
2025-03-08 15:41:09 -06:00
parent 5493c63f18
commit f036d409e6
6 changed files with 267 additions and 13 deletions
--- a/src/views/hooks/useWhatsNew.tsx
+++ b/src/views/hooks/useWhatsNew.tsx
@@ -0,0 +1,46 @@
+import { Button } from '@views/components/common/Button';
+import Text from '@views/components/common/Text/Text';
+import WhatsNewPopupContent from '@views/components/common/WhatsNewPopup';
+import { useDialog } from '@views/contexts/DialogContext';
+import React from 'react';
+
+import { LogoIcon } from '../components/common/LogoIcon';
+import useChangelog from './useChangelog';
+
+/**
+ * Custom hook that provides a function to display a what's new dialog.
+ *
+ * @returns A function that, when called, shows a dialog with the changelog.
+ */
+export default function useWhatsNewPopUp(): () => void {
+    const showDialog = useDialog();
+    const showChangeLog = useChangelog();
+    const { version } = chrome.runtime.getManifest();
+
+    const showPopUp = () => {
+        showDialog(close => ({
+            className: 'w-[830px] flex flex-col items-center gap-spacing-7 p-spacing-8',
+            title: (
+                <div className='flex items-center justify-between gap-4'>
+                    <LogoIcon width='48' height='48' />
+                    <Text variant='h1' className='text-theme-black'>
+                        What&apos;s New in UT Registration Plus
+                    </Text>
+                </div>
+            ),
+            description: <WhatsNewPopupContent />,
+            buttons: (
+                <div className='flex flex-row items-end gap-spacing-4'>
+                    <Button onClick={showChangeLog} variant='minimal' color='ut-black'>
+                        Read Changelog v{version}
+                    </Button>
+                    <Button onClick={close} color='ut-burntorange'>
+                        Get started
+                    </Button>
+                </div>
+            ),
+        }));
+    };
+
+    return showPopUp;
+}