diff --git a/src/components/common/FeedbackPopup/feedbackPopup.tsx b/src/components/common/FeedbackPopup/feedbackPopup.tsx index b9e465d2..2992a675 100644 --- a/src/components/common/FeedbackPopup/feedbackPopup.tsx +++ b/src/components/common/FeedbackPopup/feedbackPopup.tsx @@ -7,56 +7,41 @@ import { SnackbarContent, TextField, } from '@mui/material'; +import Link from 'next/link'; import React, { useEffect, useState } from 'react'; export default function FeedbackPopup() { - const [feedbackOpen, setFeedbackOpen] = useState(false); + const [open, setOpen] = useState(false); //Open after 60 seconds if not already asked/close (based on localStorage) useEffect(() => { - const previousFeedback = localStorage.getItem('feedback'); - let ask = previousFeedback === null; - if (previousFeedback !== null) { - const parsedFeedback = JSON.parse(previousFeedback); - if ( - parsedFeedback !== null && - parsedFeedback.value !== 'closed' && - parsedFeedback.value !== 'submitted' - ) { + const previous = localStorage.getItem('feedback'); + let ask = previous === null; + if (previous !== null) { + const parsed = JSON.parse(previous); + if (parsed !== null && parsed.value === 'error') { ask = true; } } if (ask) { const timer = setTimeout(() => { - setFeedbackOpen(true); + setOpen(true); }, 1000 * 60); //60 seconds return () => clearTimeout(timer); } }, []); - const cacheIndexFeedback = 0; //Increment this to request feedback from all users on next deployment - - //Successfully submitted control - const [feedbackSuccessOpen, setFeedbackSuccessOpen] = useState(false); - function handleFeedbackSuccessClose( - event?: React.SyntheticEvent | Event, - reason?: string, - ) { - if (reason === 'clickaway') { - return; - } - setFeedbackSuccessOpen(false); - } + const cacheIndex = 0; //Increment this to request feedback from all users on next deployment //Error submitting control - const [feedbackErrorOpen, setFeedbackErrorOpen] = useState(false); - function handlefeedbackErrorClose( + const [errorOpen, setErrorOpen] = useState(false); + function handleErrorClose( event?: React.SyntheticEvent | Event, reason?: string, ) { if (reason === 'clickaway') { return; } - setFeedbackErrorOpen(false); + setErrorOpen(false); } //Survey answer storage @@ -65,46 +50,43 @@ export default function FeedbackPopup() { //Send response to API, store result in localStorage function sendFeedback() { - return new Promise((resolve, reject) => { - fetch('/api/postFeedback', { - method: 'POST', - body: JSON.stringify({ - rating: feedbackRating, - extra: feedbackExtra, - env: process.env.NEXT_PUBLIC_VERCEL_ENV, - }), + fetch('/api/postFeedback', { + method: 'POST', + body: JSON.stringify({ + rating: feedbackRating, + extra: feedbackExtra, + env: process.env.NEXT_PUBLIC_VERCEL_ENV, + }), + }) + .then((response) => response.json()) + .then((data) => { + if (data.message !== 'success') { + throw new Error(data.message); + } + localStorage.setItem( + 'feedback', + JSON.stringify({ + value: 'submitted', + cacheIndex: cacheIndex, + }), + ); }) - .then((response) => response.json()) - .then((data) => { - if (data.message !== 'success') { - throw new Error(data.message); - } - localStorage.setItem( - 'feedback', - JSON.stringify({ - value: 'submitted', - cacheIndex: cacheIndexFeedback, - }), - ); - resolve(); - }) - .catch((error) => { - localStorage.setItem( - 'feedback', - JSON.stringify({ - value: 'error', - cacheIndex: cacheIndexFeedback, - }), - ); - console.error('Feedback', error); - reject(); - }); - }); + .catch((error) => { + setErrorOpen(true); + localStorage.setItem( + 'feedback', + JSON.stringify({ + value: 'error', + cacheIndex: cacheIndex, + }), + ); + console.error('Feedback', error); + }); } return ( <> - +

Visit our{' '} - GitHub - {' '} + {' '} for more detailed issue reporting.

@@ -156,12 +137,12 @@ export default function FeedbackPopup() { size="small" variant="outlined" onClick={() => { - setFeedbackOpen(false); + setOpen(false); localStorage.setItem( 'feedback', JSON.stringify({ value: 'closed', - cacheIndex: cacheIndexFeedback, + cacheIndex: cacheIndex, }), ); }} @@ -174,14 +155,8 @@ export default function FeedbackPopup() { variant="contained" disabled={feedbackRating === null} onClick={() => { - setFeedbackOpen(false); - sendFeedback() - .then(() => { - setFeedbackSuccessOpen(true); - }) - .catch(() => { - setFeedbackErrorOpen(true); - }); + setOpen(false); + sendFeedback(); }} > Submit @@ -192,25 +167,12 @@ export default function FeedbackPopup() { /> - - Feedback submitted. Thank you! - - - diff --git a/src/components/common/SkedgeAd/skedgeAd.tsx b/src/components/common/SkedgeAd/skedgeAd.tsx new file mode 100644 index 00000000..73abd605 --- /dev/null +++ b/src/components/common/SkedgeAd/skedgeAd.tsx @@ -0,0 +1,82 @@ +import { Backdrop, Card, Fade, Modal } from '@mui/material'; +import Link from 'next/link'; +import React, { useEffect, useState } from 'react'; + +export default function SkedgeAd() { + const [open, setOpen] = useState(false); + + //Open after 5 minutes if not already close (based on localStorage) + useEffect(() => { + const previous = localStorage.getItem('skedgeAd'); + let ask = previous === null; + if (previous !== null) { + const parsed = JSON.parse(previous); + if (parsed !== null && parsed.value === 'closed') { + ask = true; + } + } + if (ask) { + const timer = setTimeout(() => { + setOpen(true); + }, 1000 * 5); + ///}, 1000 * 60 * 5); //5 minutes + return () => clearTimeout(timer); + } + }, []); + const cacheIndex = 0; //Increment this to open the popup for all users on next deployment + + function linkOpened() { + setOpen(false); + localStorage.setItem( + 'skedgeAd', + JSON.stringify({ + value: 'opened', + cacheIndex: cacheIndex, + }), + ); + } + + return ( + { + setOpen(false); + localStorage.setItem( + 'skedgeAd', + JSON.stringify({ + value: 'closed', + cacheIndex: cacheIndex, + }), + ); + }} + closeAfterTransition + slots={{ backdrop: Backdrop }} + slotProps={{ + backdrop: { + timeout: 500, + }, + }} + > + + + + Open for Chrome + + + Open for Firefox + + + + + ); +} diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index 47ae3777..15b212fb 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -10,6 +10,7 @@ import { PanelResizeHandle, } from 'react-resizable-panels'; +import SkedgeAd from '@/components/common/SkedgeAd/skedgeAd'; import Compare from '@/components/compare/Compare/compare'; import DashboardEmpty from '@/components/dashboard/DashboardEmpty/dashboardEmpty'; import DashboardError from '@/components/dashboard/DashboardError/dashboardError'; @@ -916,6 +917,7 @@ export const Dashboard: NextPage<{ pageTitle: string }> = ({
{contentComponent}
+ ); };