Add Support Tockler by visiting my Store

client/src/components/MainLayout/HeaderMenu.tsx

@@ -11,6 +11,7 @@ import { ColorModeSwitcher } from '../ColorModeSwitcher';
 import { Header } from '../Header/Header';
 import { MenuItem } from '../Header/MenuItem';
 import { Link as RouterLink } from 'react-router-dom';
+import { SupportStoreButton } from '../../routes/SupportStoreButton';
 
 export const HeaderMenu = () => (
     <Header brandLinkProps={{ to: '/timeline', as: RouterLink }}>
@@ -21,6 +22,7 @@ export const HeaderMenu = () => (
         <MenuItem to="/support" icon={<AiOutlineQuestionCircle />} title="Support" />
         {/*<MenuItem to="/trayPage" icon={<AiFillTrademarkCircle />} title="Tray" />*/}
         <Box flex="1" />
+        <SupportStoreButton />
         <Box>
             <ColorModeSwitcher />
         </Box>

client/src/components/TrayLayout/TrayMenu.tsx

@@ -6,6 +6,7 @@ import { Tooltip } from '@chakra-ui/tooltip';
 import { IconButton } from '@chakra-ui/button';
 import { HStack } from '@chakra-ui/react';
 import { Header } from '../Header/Header';
+import { SupportStoreButton } from '../../routes/SupportStoreButton';
 
 export const TrayMenuPlain = () => {
     const exitApp = () => {
@@ -19,6 +20,7 @@ export const TrayMenuPlain = () => {
     return (
         <Header brandLinkProps={{ onClick: toggleMainWindow }}>
             <Box flex="1"></Box>
+            <SupportStoreButton trayButton />
             <HStack spacing={3} pr={1}>
                 <Tooltip placement="bottom" label="Open main window">
                     <IconButton

client/src/routes/SupportStoreButton.tsx

@@ -0,0 +1,18 @@
+import { Button } from '@chakra-ui/button';
+import { FaStore } from 'react-icons/fa';
+import { sendSupportLinkClickedEvent } from '../useGoogleAnalytics.utils';
+import { useCallback } from 'react';
+
+const storeUrl = 'https://trimatechdesigns.etsy.com/';
+
+export function SupportStoreButton({ trayButton = false }) {
+    const onClick = useCallback(() => {
+        sendSupportLinkClickedEvent();
+        window.open(storeUrl, '_blank');
+    }, []);
+    return (
+        <Button variant="outline" leftIcon={<FaStore />} onClick={onClick} textDecoration="none !important" color="red">
+            {trayButton ? 'Visit Store' : 'Support Tockler by visiting my Store'}
+        </Button>
+    );
+}

client/src/useGoogleAnalytics.utils.ts

@@ -12,3 +12,7 @@ export function sendPageEvent(path, search) {
 export function sendOpenTrayEvent() {
     sendEvent({ name: 'open_tray', params: {} });
 }
+
+export function sendSupportLinkClickedEvent() {
+    sendEvent({ name: 'support_store', params: {} });
+}

electron/src/window-manager.ts

@@ -23,6 +23,18 @@ export const sendToTrayWindow = (key, message = '') => {
     }
 };
 
+function openUrlInExternalWindow(event, url) {
+    logger.info('URL', url);
+
+    if (url.startsWith('file://') || url.startsWith('http://127.0.0.1:3000')) {
+        return;
+    }
+
+    event.preventDefault();
+    // open url in a browser and prevent default
+    shell.openExternal(url);
+}
+
 export const sendToNotificationWindow = async (key, message = '') => {
     if (WindowManager.notificationWindow) {
         if (key === 'notifyUser') {
@@ -129,17 +141,7 @@ export default class WindowManager {
                 app.dock.hide();
             }
         });
-        this.mainWindow.webContents.on('new-window', (event, url) => {
-            logger.info('URL', url);
-
-            if (url.startsWith('file://') || url.startsWith('http://127.0.0.1:3000')) {
-                return;
-            }
-
-            event.preventDefault();
-            // open url in a browser and prevent default
-            shell.openExternal(url);
-        });
+        this.mainWindow.webContents.on('new-window', openUrlInExternalWindow);
 
         this.mainWindow.on('resize', throttle(WindowManager.storeWindowSize, 500));
         WindowManager.initMenus();
@@ -237,9 +239,12 @@ export default class WindowManager {
                 //   this.menubar.window.openDevTools({ mode: 'bottom' });
             }
         });
+
         this.menubar.on('ready', () => {
             console.log('app is ready');
             // your app code here
+
+            this.menubar.window.webContents.on('new-window', openUrlInExternalWindow);
         });
     }