feat(BackdropMessage): rate the extension

src/consts.ts

@@ -2,13 +2,17 @@ import { AddOns, AppData, Config, Message, TabData } from './types';
 
 export const EXTENSION_MANIFEST = chrome.runtime.getManifest();
 
+export const CHROME_WEBSTORE_LINK = 'https://chromewebstore.google.com/detail/kdakicmdgfidhnnfjgomlkoikigebpdf';
+
 export const defaultAppData: AppData = {
     addMessageText: '',
     messageSequenceOpen: false,
     settingsOpen: false,
     addOnsOpen: false,
     helpOpen: false,
     theme: 'light',
+    backdropMessageDismissedUnixMs: Date.now(),
+    backdropConfirmation: null,
 };
 
 export const defaultConfig: Config = {

src/popup/Accordions/AccordionItem.tsx

@@ -21,7 +21,7 @@ export const AccordionItem = ({
     maxHeight,
     children,
 }: {
-    dataKey: Exclude<keyof AppData, 'theme' | 'addMessageText'>;
+    dataKey: Exclude<keyof AppData, 'theme' | 'addMessageText' | 'backdropMessageDismissedUnixMs' | 'backdropConfirmation'>;
     title: string;
     chip?: string;
     chipColor?: ChipProps['color'];

src/popup/Accordions/MessageSequencer/MessageList.tsx

@@ -57,7 +57,7 @@ export const MessageList = () => {
 
             {!messages.length && (
                 <ListItem>
-                    <ListItemText sx={{ textAlign: 'center' }}>Your message sequence is empty.</ListItemText>
+                    <ListItemText sx={{ textAlign: 'center' }} primary='Your message sequence is empty.' />
                 </ListItem>
             )}
         </List>

src/popup/BackdropMessage.tsx

@@ -0,0 +1,111 @@
+import {
+    Backdrop,
+    Button,
+    Card,
+    CardActions,
+    CardContent,
+    CardHeader,
+    Link,
+    List,
+    ListItem,
+    ListItemText,
+    Rating,
+    Typography,
+} from '@mui/material';
+import { useContext, useEffect, useState } from 'react';
+import { AppDataContext } from './context/AppDataProvider';
+import { appDataStore } from '../storage';
+import { CHROME_WEBSTORE_LINK } from '../consts';
+
+const openTab = (url: string) => () => window.open(url, '_blank');
+
+const openWebStoreLink = openTab(CHROME_WEBSTORE_LINK);
+
+// todo: genericize with JSON template
+export const BackdropMessage = ({
+    displayAfter,
+    confirmationId,
+}: {
+    /**
+     * Number of milliseconds to display the message again after dismissal.
+     */
+    displayAfter: number;
+    /**
+     * Specific ID for the current backdrop message
+     */
+    confirmationId: string;
+}) => {
+    const appData = useContext(AppDataContext);
+    const [open, setOpen] = useState(false);
+
+    useEffect(() => {
+        const confirmed = appData.backdropConfirmation === confirmationId;
+        if (confirmed) return;
+
+        // Time since message was last displayed
+        const delta = Date.now() - appData.backdropMessageDismissedUnixMs;
+
+        // Display the message now if it's been displayAfter ms since last dismissal
+        if (delta >= displayAfter) {
+            setOpen(true);
+            return;
+        }
+
+        // Otherwise, open once the rest of the time passes
+        const remainingTime = displayAfter - delta;
+        const timeout = setTimeout(() => setOpen(true), remainingTime);
+
+        return () => clearTimeout(timeout);
+
+        // Re-run any time any change
+    }, [appData.backdropConfirmation, confirmationId, appData.backdropMessageDismissedUnixMs, displayAfter]);
+
+    const handleDismiss = async () => {
+        setOpen(false);
+        await appDataStore.write({ ...appData, backdropMessageDismissedUnixMs: Date.now() });
+    };
+
+    const handleConfirm = async () => {
+        setOpen(false);
+        openWebStoreLink();
+        await appDataStore.write({ ...appData, backdropConfirmation: confirmationId });
+    };
+
+    return (
+        <Backdrop sx={{ zIndex: 999999, padding: '10px' }} open={open}>
+            <Card>
+                <CardHeader
+                    title='Rate Ome.tv Automator?'
+                    subheader='Your feedback is important.'
+                    titleTypographyProps={{ fontSize: '20px' }}
+                />
+
+                <CardContent>
+                    <Rating size='large' name='no-value' value={null} onClick={handleConfirm} />
+
+                    <Typography>When you rate this extension on the Chrome Web Store, you:</Typography>
+
+                    <List sx={{ listStyle: 'decimal', pl: 4 }}>
+                        <ListItem sx={{ display: 'list-item' }}>
+                            <ListItemText primary='Help improve your overall experience by providing the developer with direct feedback.' />
+                        </ListItem>
+
+                        <ListItem sx={{ display: 'list-item' }}>
+                            <ListItemText primary='Share your experience with others, helping them discover Ome.tv Automator.' />
+                        </ListItem>
+                    </List>
+                </CardContent>
+
+                <CardActions sx={{ display: 'flex', justifyContent: 'space-around' }}>
+                    <Button variant='contained' onClick={handleConfirm}>
+                        Yes
+                    </Button>
+
+                    <Button variant='outlined' onClick={handleDismiss}>
+                        Not now
+                    </Button>
+                </CardActions>
+            </Card>
+        </Backdrop>
+    );
+};

src/popup/Popup.tsx

@@ -6,6 +6,7 @@ import { AppDataProvider } from './context/AppDataProvider';
 import { TabProvider } from './context/TabProvider';
 import { ThemeProvider } from './context/ThemeProvider';
 import { TopBar } from './TopBar';
+import { BackdropMessage } from './BackdropMessage';
 
 const AppWrapper = styled(Box)({
     height: '500px',
@@ -27,6 +28,12 @@ const Popup = () => {
         <AppDataProvider>
             <ThemeProvider>
                 <AppWrapper>
+                    <BackdropMessage
+                        // 10 mins
+                        displayAfter={60_000 * 10}
+                        confirmationId='rateTheExtension'
+                    />
+
                     <TopBar />
 
                     <AppContainer>

src/types.ts

@@ -33,6 +33,17 @@ export type AppData = {
     addOnsOpen: boolean;
     helpOpen: boolean;
     theme: 'light' | 'dark';
+    /**
+     * The last time at which the alert popup was dismissed (e.g. "Rate Ome.tv Automator?").
+     */
+    backdropMessageDismissedUnixMs: number;
+    /**
+     * To be se with a string value relating to the current backdrop messages.
+     *
+     * Once confirmed, the backdrop message will not be displayed again.
+     * If the backdrop message changes, the confirmation ID set here should change.
+     */
+    backdropConfirmation: string | null;
 };
 
 export type AddOns = {