feat(#245): sponsorship message

Shown once every 2 weeks on the initial application page. Last shown date is stored in settings.

Author: marisademeglio

src/renderer/components/NewJobPane/index.tsx

@@ -1,7 +1,7 @@
 /*
 Select a script and submit a new job
 */
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
 import { ScriptForm } from '../ScriptForm'
 import { useWindowStore } from 'renderer/store'
 import { ID } from 'renderer/utils/utils'
@@ -11,11 +11,55 @@ import {
     removeJob,
     updateJob,
 } from 'shared/data/slices/pipeline'
+import {
+    save,
+    setSponsorshipMessageLastShown,
+} from 'shared/data/slices/settings'
+import { externalLinkClick } from 'renderer/utils'
 
 const { App } = window
+import {
+    defaultSponsorshipMessage,
+    updateSponsorshipMessage,
+} from '../../utils'
+
+// is datestring more than 2 weeks old
+let isExpired = (datestring) => {
+    if (datestring == '') return true
 
+    const TWOWEEKS_MS = 1209600000
+    let date = new Date(datestring)
+    let now = Date.now()
+    if (now - date.getMilliseconds() > TWOWEEKS_MS) {
+        return true
+    }
+    return false
+}
 export function NewJobPane({ job }: { job: Job }) {
-    const { pipeline } = useWindowStore()
+    const { settings, pipeline } = useWindowStore()
+    const [sponsorshipMessage, setSponsorshipMessage] = useState(
+        defaultSponsorshipMessage
+    )
+    const [showSponsorshipMessage, setShowSponsorshipMessage] = useState(
+        isExpired(settings.sponsorshipMessageLastShown)
+    )
+
+    // useMemo should only run once per render
+    useMemo(() => {
+        const fetchData = async () => {
+            let updatedSponsorshipMessage = await updateSponsorshipMessage()
+            setSponsorshipMessage({ ...updatedSponsorshipMessage })
+        }
+        fetchData().catch()
+        if (isExpired(settings.sponsorshipMessageLastShown)) {
+            setShowSponsorshipMessage(true)
+            // update settings with a new date
+            App.store.dispatch(
+                setSponsorshipMessageLastShown(Date.now().toString())
+            )
+            App.store.dispatch(save())
+        }
+    }, [])
 
     let onSelectChange = (e) => {
         let selection = pipeline.scripts.find(
@@ -108,6 +152,19 @@ export function NewJobPane({ job }: { job: Job }) {
                     Cancel
                 </button>
             )}
+            {job.script == null && showSponsorshipMessage ? (
+                <div className="sponsorship">
+                    <a
+                        href={sponsorshipMessage.url}
+                        onClick={(e) => externalLinkClick(e, App)}
+                    >
+                        {sponsorshipMessage.buttonText}
+                    </a>
+                    <p>{sponsorshipMessage.messageText}</p>
+                </div>
+            ) : (
+                ''
+            )}
         </>
     )
 }

src/renderer/style/style.scss

@@ -569,4 +569,13 @@ button.grayedout {
 
 button.grayedout:hover {
     background: none !important;
+}
+
+.sponsorship {
+    align-self: center;
+    border: 2px var(--fg) solid;
+    bottom: 5%;
+    position: absolute;
+    border-radius: 5px;
+    padding: 10px;
 }

src/renderer/utils/index.ts

@@ -1 +1,2 @@
 export * from './utils'
+export * from './sponsorship'

src/renderer/utils/sponsorship.ts

@@ -0,0 +1,25 @@
+// default message
+let defaultSponsorshipMessage = {
+    active: true,
+    buttonText: 'Support our work',
+    messageText:
+        'If you find this tool useful, please help us by donating to support its ongoing maintenance.',
+    url: 'https://daisy.org/pipelineappSponsor',
+}
+
+async function updateSponsorshipMessage() {
+    // fetch the latest sponsorship message
+    try {
+        let sponsorshipData = await fetch(
+            'https://dl.daisy.org/tools/sponsorship.json'
+        )
+        if (sponsorshipData) {
+            return sponsorshipData['PipelineApp']['en']
+        } else {
+            return defaultSponsorshipMessage
+        }
+    } catch (err) {
+        return defaultSponsorshipMessage
+    }
+}
+export { defaultSponsorshipMessage, updateSponsorshipMessage }

src/shared/data/slices/settings.ts

@@ -99,6 +99,12 @@ export const settings = createSlice({
         ) => {
             state.ttsConfig = action.payload
         },
+        setSponsorshipMessageLastShown: (
+            state: ApplicationSettings,
+            action: PayloadAction<string>
+        ) => {
+            state.sponsorshipMessageLastShown = action.payload
+        },
     },
 })
 
@@ -112,6 +118,7 @@ export const {
     setTtsConfig,
     setAutoCheckUpdate,
     setEditJobOnNewTab,
+    setSponsorshipMessageLastShown,
 } = settings.actions
 
 export const selectors = {
@@ -134,5 +141,5 @@ export const {
     selectClosingAction,
     selectTtsConfig,
     selectAutoCheckUpdate,
-    selectEditOnNewTab
+    selectEditOnNewTab,
 } = selectors

src/shared/types/settings.ts

@@ -24,7 +24,7 @@ export enum ClosingMainWindowAction {
  * - Merged app and job actions on closing main window
  */
 export type ApplicationSettings = {
-    settingsVersion: '1.4.0'
+    settingsVersion: '1.5.0'
     // Default folder to download the results on the user disk
     downloadFolder?: string
     // Pipeline instance properties for IPCs
@@ -37,6 +37,7 @@ export type ApplicationSettings = {
     // tts preferred voices
     ttsConfig?: TtsConfig
     autoCheckUpdate?: boolean
+    sponsorshipMessageLastShown?: string
 }
 
 export function migrateSettings(
@@ -75,9 +76,19 @@ const migrators: Map<string, (prev: any) => any> = new Map<
 >([
     // Insert new migrators here as [ 'version', (prev) => ApplicationSettings ]
     // Don't forget to update the settings class of previous migrators
+    [
+        '1.5.0',
+        (prev: _ApplicationSettings_v140): ApplicationSettings => {
+            const { settingsVersion, ...toKeep } = prev
+            return {
+                sponsorshipMessageLastShown: '',
+                ...toKeep,
+            } as ApplicationSettings
+        },
+    ],
     [
         '1.4.0',
-        (prev: _ApplicationSettings_v130): ApplicationSettings => {
+        (prev: _ApplicationSettings_v130): _ApplicationSettings_v140 => {
             const {
                 // Removed, changed or renamed :
                 settingsVersion,
@@ -94,7 +105,7 @@ const migrators: Map<string, (prev: any) => any> = new Map<
                     defaultVoices: [], // new default voices setting
                 },
                 ...toKeep,
-            } as ApplicationSettings
+            } as _ApplicationSettings_v140
         },
     ],
     [
@@ -145,6 +156,26 @@ const migrators: Map<string, (prev: any) => any> = new Map<
     ],
 ])
 
+export type _ApplicationSettings_v140 = {
+    settingsVersion: '1.4.0'
+    // Default folder to download the results on the user disk
+    downloadFolder?: string
+    // Pipeline instance properties for IPCs
+    pipelineInstanceProps?: PipelineInstanceProperties
+    // Dark mode selector
+    colorScheme: keyof typeof ColorScheme
+    // Actions to perform when closing the main window
+    onClosingMainWindow?: keyof typeof ClosingMainWindowAction
+    editJobOnNewTab?: boolean
+    // tts preferred voices
+    ttsConfig?: {
+        preferredVoices: Array<TtsVoice>
+        ttsEngineProperties: Array<TtsEngineProperty>
+        xmlFilepath?: string
+        defaultVoices: Array<TtsVoice>
+    }
+    autoCheckUpdate?: boolean
+}
 export type _ApplicationSettings_v130 = {
     settingsVersion: '1.3.0'
     // Default folder to download the results on the user disk