diff --git a/desktop-app/src/renderer/AppContent.tsx b/desktop-app/src/renderer/AppContent.tsx index 88a63adbb..f26668750 100644 --- a/desktop-app/src/renderer/AppContent.tsx +++ b/desktop-app/src/renderer/AppContent.tsx @@ -12,6 +12,7 @@ import DeviceManager from './components/DeviceManager'; import KeyboardShortcutsManager from './components/KeyboardShortcutsManager'; import { ReleaseNotes } from './components/ReleaseNotes'; import { Sponsorship } from './components/Sponsorship'; +import { ChromePopup } from './components/ChromePopup'; import { AboutDialog } from './components/AboutDialog'; if ((navigator as any).userAgentData.platform === 'Windows') { @@ -52,6 +53,7 @@ const AppContent = () => { + diff --git a/desktop-app/src/renderer/components/ChromePopup/index.tsx b/desktop-app/src/renderer/components/ChromePopup/index.tsx new file mode 100644 index 000000000..4a5da119f --- /dev/null +++ b/desktop-app/src/renderer/components/ChromePopup/index.tsx @@ -0,0 +1,77 @@ +import { useEffect, useMemo, useState } from 'react'; + +import { IPC_MAIN_CHANNELS } from 'common/constants'; + +import Modal from '../Modal'; +import Icon from '../../assets/img/logo.png'; +import Button from '../Button'; + +export const ChromePopup = () => { + const [isOpen, setIsOpen] = useState(false); + + useEffect(() => { + const usesChromeMs = window.electron.store.get('chromePopup.usesChrome'); + if (usesChromeMs === undefined || usesChromeMs === true) { + setIsOpen(true); + } + }, []); + + const onClose = () => { + setIsOpen(false); + }; + + return ( + + + + + Do you have our Chrome Extension? + + } + isOpen={isOpen} + onClose={onClose} + > + + + Responsively Helper on the Chrome Web Store + + + Open your current Chrome browser page in the Responsively App + seamlessly! + + + + { + window.electron.ipcRenderer.sendMessage( + IPC_MAIN_CHANNELS.OPEN_EXTERNAL, + { + url: `https://chromewebstore.google.com/detail/responsively-helper/jhphiidjkooiaollfiknkokgodbaddcj`, + } + ); + window.electron.store.set('chromePopup.usesChrome', true); + onClose(); + }} + isTextButton + isPrimary + > + Download Extension + + { + window.electron.store.set('chromePopup.usesChrome', false); + onClose(); + }} + isTextButton + isPrimary + > + I do not use Chrome + + + + + + ); +}; diff --git a/desktop-app/src/renderer/components/InfoPopups/index.tsx b/desktop-app/src/renderer/components/InfoPopups/index.tsx index 6f7a5bad0..87d4cffa1 100644 --- a/desktop-app/src/renderer/components/InfoPopups/index.tsx +++ b/desktop-app/src/renderer/components/InfoPopups/index.tsx @@ -1,10 +1,12 @@ import { useEffect, useState } from 'react'; import { isReleaseNotesUnseen, ReleaseNotes } from '../ReleaseNotes'; import { Sponsorship } from '../Sponsorship'; +import { ChromePopup } from '../ChromePopup'; export const InfoPopups = () => { const [showReleaseNotes, setShowReleaseNotes] = useState(false); const [showSponsorship, setShowSponsorship] = useState(false); + const [showChromePopup, setShowChromePopup] = useState(false); useEffect(() => { (async () => { @@ -13,6 +15,7 @@ export const InfoPopups = () => { return; } setShowSponsorship(true); + setShowChromePopup(true); })(); }, []); @@ -23,6 +26,9 @@ export const InfoPopups = () => { if (showSponsorship) { return ; } + if (showChromePopup) { + return ; + } return null; };
+ Responsively Helper on the Chrome Web Store + + + Open your current Chrome browser page in the Responsively App + seamlessly! +