From b38ff52727ab293a513ed9d7108d253478027aa9 Mon Sep 17 00:00:00 2001 From: Hugo Gresse Date: Tue, 12 Nov 2024 21:32:25 +0100 Subject: [PATCH 1/5] Add sponsor to feedback footer --- src/baseComponents/useOSSSponsors.ts | 19 +++++++++ src/env.ts | 5 +-- src/feedback/layout/Footer.jsx | 63 +++++++++++++++++++++------- 3 files changed, 69 insertions(+), 18 deletions(-) create mode 100644 src/baseComponents/useOSSSponsors.ts diff --git a/src/baseComponents/useOSSSponsors.ts b/src/baseComponents/useOSSSponsors.ts new file mode 100644 index 00000000..bf14d28a --- /dev/null +++ b/src/baseComponents/useOSSSponsors.ts @@ -0,0 +1,19 @@ +import { useEffect, useState } from 'react' +import { OpenSponsorsUrl } from '../env.ts' + +export const useOSSSponsors = () => { + const [sponsors, setSponsors] = useState< + { name: string; website: string; logo: string; logoDark: string }[] + >([]) + + useEffect(() => { + const fetchData = async () => { + const response = await fetch(OpenSponsorsUrl) + const data = await response.json() + setSponsors(data.sponsors || []) + } + fetchData() + }, []) + + return sponsors +} diff --git a/src/env.ts b/src/env.ts index 2ecdd813..ad954342 100644 --- a/src/env.ts +++ b/src/env.ts @@ -1,3 +1,2 @@ -import 'vite/client' - -export const ViteAuthDomain = import.meta.env.VITE_AUTH_DOMAIN +// @ts-ignore +export const OpenSponsorsUrl = import.meta.env.VITE_OPEN_SPONSORS diff --git a/src/feedback/layout/Footer.jsx b/src/feedback/layout/Footer.jsx index c1aa3366..34d49bcf 100644 --- a/src/feedback/layout/Footer.jsx +++ b/src/feedback/layout/Footer.jsx @@ -2,11 +2,15 @@ import React from 'react' import { useTranslation } from 'react-i18next' import { Box, useTheme } from '@mui/material' import Link from '@mui/material/Link' +import { useOSSSponsors } from '../../baseComponents/useOSSSponsors.ts' export const Footer = () => { const { t } = useTranslation() const theme = useTheme() - const logoColor = theme.palette.mode === 'dark' ? 'white' : 'black' + const isDarkMode = theme.palette.mode === 'dark' + const logoColor = isDarkMode ? 'white' : 'black' + + const sponsors = useOSSSponsors() return ( { padding={1} marginTop={2} color={theme.palette.textDimmed} - component="footer" - > + component="footer"> {t('footer.madeBy')} + rel="noopener noreferrer"> { /> - - - {t('common.donate')} - - + + + + + Devenir sponsor + + + + {sponsors.map((sponsor) => ( + + {sponsor.name} + + ))} + ) } From 2bbf99f05b82d876a36400436b3b546dbb90c599 Mon Sep 17 00:00:00 2001 From: Hugo Gresse Date: Thu, 14 Nov 2024 19:48:54 +0100 Subject: [PATCH 2/5] Add sponsors to root app and remove hoverboard mention --- .env | 3 + src/root/HowItWorks.jsx | 19 ------ src/root/Root.jsx | 15 +++-- src/root/Sponsor.jsx | 63 ++++++++++++++++++++ src/root/translations/languages/en.root.json | 5 ++ src/root/translations/languages/fr.root.json | 5 ++ 6 files changed, 87 insertions(+), 23 deletions(-) create mode 100644 src/root/Sponsor.jsx diff --git a/.env b/.env index d61c38f5..59108295 100644 --- a/.env +++ b/.env @@ -16,5 +16,8 @@ VITE_MEASUREMENT_ID= # Small Chat (optional) VITE_SMALL_CHAT=https://embed.small.chat/Txxxxxxxxx.js +# OpenSponsors +VITE_OPEN_SPONSORS= + # Emulators (run everything in local) VITE_EMULATORS=true diff --git a/src/root/HowItWorks.jsx b/src/root/HowItWorks.jsx index af553d34..82f07a68 100644 --- a/src/root/HowItWorks.jsx +++ b/src/root/HowItWorks.jsx @@ -7,7 +7,6 @@ import adminImage from './images/admin-new.webp' import newImage from './images/new.png' import qrcodeImage from './images/qrcode.png' import bulleImage from './images/bulle.png' -import hoverboard from './images/hoverboard.png' import { useTranslation } from 'react-i18next' import Box from '@mui/material/Box' import Typography from '@mui/material/Typography' @@ -64,15 +63,6 @@ const List = styled.ul` } ` -const CompatibilityText = styled(Box)` - margin-top: 20px; - color: ${COLORS.GRAY}; - - img { - margin: 0 5px; - } -` - const Header = () => { const { t } = useTranslation() @@ -103,15 +93,6 @@ const Header = () => { {t('home.vote')} - - - {t('home.compatibleHoverboard')} - hoverboard - diff --git a/src/root/Root.jsx b/src/root/Root.jsx index 4ca0a39d..7352f762 100644 --- a/src/root/Root.jsx +++ b/src/root/Root.jsx @@ -5,11 +5,16 @@ import HowItWorks from './HowItWorks.jsx' import FAQ from './FAQ.jsx' import { I18nextProvider } from 'react-i18next' import i18n from './translations/i18n' -import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles'; +import { + createTheme, + ThemeProvider, + StyledEngineProvider, +} from '@mui/material/styles' import { showSmallChat, useSmallchat } from '../admin/project/utils/smallchat' import { Footer } from './Footer.jsx' import { Contact } from './Contact.jsx' import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3' +import { Sponsor } from './Sponsor.jsx' const theme = createTheme({ typography: { @@ -52,11 +57,13 @@ const Root = () => { + reCaptchaKey={ + import.meta.env.VITE_RECAPTCHAV3_SITE_KEY + }>
+
@@ -65,7 +72,7 @@ const Root = () => { - ); + ) } export default Root diff --git a/src/root/Sponsor.jsx b/src/root/Sponsor.jsx new file mode 100644 index 00000000..cb4f9a48 --- /dev/null +++ b/src/root/Sponsor.jsx @@ -0,0 +1,63 @@ +import React from 'react' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' +import { useTranslation } from 'react-i18next' +import { useOSSSponsors } from '../baseComponents/useOSSSponsors' +import OFButton from '../admin/baseComponents/button/OFButton.jsx' + +export const Sponsor = () => { + const { t } = useTranslation() + + const sponsors = useOSSSponsors() + + return ( + + + {t('sponsor.title')} + + + + {t('sponsor.description')} + + + + {sponsors.map((sponsor) => ( + + {sponsor.name} + + ))} + + + {t('sponsor.becomeSponsor')} + + + ) +} diff --git a/src/root/translations/languages/en.root.json b/src/root/translations/languages/en.root.json index 54ca4d3c..981d60e6 100644 --- a/src/root/translations/languages/en.root.json +++ b/src/root/translations/languages/en.root.json @@ -44,6 +44,11 @@ "success": "Message sent 🚀", "submit": "Send" }, + "sponsor": { + "title": "Sponsor", + "description": "Sponsors helps to keep the project alive, improve it and participate to the hosting costs.", + "becomeSponsor": "Become a sponsor" + }, "footer": { "about": "About", "contact": "Contact" diff --git a/src/root/translations/languages/fr.root.json b/src/root/translations/languages/fr.root.json index b2c06680..423ef066 100644 --- a/src/root/translations/languages/fr.root.json +++ b/src/root/translations/languages/fr.root.json @@ -44,6 +44,11 @@ "success": "Message envoyé 🚀", "submit": "Envoyer" }, + "sponsor": { + "title": "Sponsor", + "description": "Les sponsors aident à garder le projet en vie et à l'améliorer.", + "becomeSponsor": "Devenir sponsor" + }, "footer": { "about": "À propos", "contact": "Contact" From 0dd36442506a51c50968af40f46a96266fcb993d Mon Sep 17 00:00:00 2001 From: Hugo Gresse Date: Sat, 23 Nov 2024 15:40:17 +0100 Subject: [PATCH 3/5] review --- src/baseComponents/useOSSSponsors.ts | 2 +- src/env.ts | 2 +- src/root/Sponsor.jsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/baseComponents/useOSSSponsors.ts b/src/baseComponents/useOSSSponsors.ts index bf14d28a..ad82fe59 100644 --- a/src/baseComponents/useOSSSponsors.ts +++ b/src/baseComponents/useOSSSponsors.ts @@ -12,7 +12,7 @@ export const useOSSSponsors = () => { const data = await response.json() setSponsors(data.sponsors || []) } - fetchData() + fetchData().catch(console.error) }, []) return sponsors diff --git a/src/env.ts b/src/env.ts index ad954342..af6c5f69 100644 --- a/src/env.ts +++ b/src/env.ts @@ -1,2 +1,2 @@ // @ts-ignore -export const OpenSponsorsUrl = import.meta.env.VITE_OPEN_SPONSORS +export const OpenSponsorsUrl: string = import.meta.env.VITE_OPEN_SPONSORS diff --git a/src/root/Sponsor.jsx b/src/root/Sponsor.jsx index cb4f9a48..f7f2792e 100644 --- a/src/root/Sponsor.jsx +++ b/src/root/Sponsor.jsx @@ -21,7 +21,7 @@ export const Sponsor = () => { textAlign="center" paddingY={4} borderTop="1px solid #ccc"> - + From 8576a053a4c69cd7a6ee3a5355dd46baa930c1f8 Mon Sep 17 00:00:00 2001 From: Hugo Gresse Date: Sat, 23 Nov 2024 16:14:25 +0100 Subject: [PATCH 4/5] Display sponsors in Admin --- src/admin/project/layout/SideBar.jsx | 109 ++++++++++++------ .../translations/languages/en.admin.json | 3 +- .../translations/languages/fr.admin.json | 3 +- src/feedback/layout/Footer.jsx | 2 +- .../translations/languages/en.feedback.json | 3 +- .../translations/languages/fr.feedback.json | 3 +- 6 files changed, 83 insertions(+), 40 deletions(-) diff --git a/src/admin/project/layout/SideBar.jsx b/src/admin/project/layout/SideBar.jsx index a8aa9850..b6942157 100644 --- a/src/admin/project/layout/SideBar.jsx +++ b/src/admin/project/layout/SideBar.jsx @@ -4,8 +4,8 @@ import logo from '../../../assets/logo-openfeedback-color&white.png' import { useDispatch, useSelector } from 'react-redux' import { getUserSelector } from '../../auth/authSelectors' import { signOut } from '../../auth/authActions' -import { createTheme } from '@mui/material'; -import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles'; +import { createTheme } from '@mui/material' +import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles' import { makeStyles } from '@mui/styles' import List from '@mui/material/List' import ListItem from '@mui/material/ListItem' @@ -25,14 +25,15 @@ import SettingsIcon from '@mui/icons-material/Settings' import SlideshowIcon from '@mui/icons-material/Slideshow' import CommentIcon from '@mui/icons-material/Comment' import IconButton from '@mui/material/IconButton' -import DonateIcon from '@mui/icons-material/CardGiftcard' import OFMenuItem from './OFMenuItem.jsx' import { getSelectedProjectIdSelector } from '../core/projectSelectors' import RoutingMap from '../../RoutingMap' import Drawer from '@mui/material/Drawer' import { Link, useNavigate } from 'react-router-dom' import { useTranslation } from 'react-i18next' -import ListItemIcon from '@mui/material/ListItemIcon' +import { useOSSSponsors } from '../../../baseComponents/useOSSSponsors' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' const innerTheme = createTheme({ palette: { @@ -84,10 +85,13 @@ const SideBar = ({ baseUrl, drawerOpen, toggleDrawer, isMobile }) => { const classes = useStyles() const { t } = useTranslation() + const sponsors = useOSSSponsors() + const user = useSelector(getUserSelector) const selectedProjectId = useSelector(getSelectedProjectIdSelector) - const displayedUserName = user.displayName || (user.email.split('@') || [""])[0] + const displayedUserName = + user.displayName || (user.email.split('@') || [''])[0] return ( @@ -99,8 +103,7 @@ const SideBar = ({ baseUrl, drawerOpen, toggleDrawer, isMobile }) => { anchor="left" classes={{ paper: classes.drawer, - }} - > + }}>
@@ -121,11 +124,12 @@ const SideBar = ({ baseUrl, drawerOpen, toggleDrawer, isMobile }) => { className={classes.list} onClick={(event) => toggleDrawer(event)} subheader={ - + {t('layout.sidebar.data')} - } - > + }> } @@ -159,11 +163,12 @@ const SideBar = ({ baseUrl, drawerOpen, toggleDrawer, isMobile }) => { className={classes.list} onClick={(event) => toggleDrawer(event)} subheader={ - + {t('layout.sidebar.settings')} - } - > + }> { - +
- - - {} - - - + href="https://github.com/sponsors/HugoGresse"> + + {t('common.becomeSponsor')} + + + + {sponsors.map((sponsor) => ( + + {sponsor.name} + + ))} +
- + { dispatch(signOut(navigate))} + onClick={() => + dispatch(signOut(navigate)) + } size="large"> @@ -239,7 +278,7 @@ const SideBar = ({ baseUrl, drawerOpen, toggleDrawer, isMobile }) => { - ); + ) } export default SideBar diff --git a/src/admin/translations/languages/en.admin.json b/src/admin/translations/languages/en.admin.json index 23e8bf15..dce807c9 100644 --- a/src/admin/translations/languages/en.admin.json +++ b/src/admin/translations/languages/en.admin.json @@ -38,7 +38,8 @@ "loading": "Loading", "donate": "Donate", "donationHint": "This feature is expensive, and we need your support to keep it free. If you like this app, please consider a donation.", - "donationContinue": "Open donation page" + "donationContinue": "Open donation page", + "becomeSponsor": "Become a sponsor" }, "project": { "errorProjectsLoad": "Unable to load all projects.", diff --git a/src/admin/translations/languages/fr.admin.json b/src/admin/translations/languages/fr.admin.json index e3eb025b..3455b491 100644 --- a/src/admin/translations/languages/fr.admin.json +++ b/src/admin/translations/languages/fr.admin.json @@ -38,7 +38,8 @@ "loading": "Chargement", "donate": "Faire un don", "donationHint": "Cette fonctionnalité est onéreuse, nous avons besoin de votre soutien pour qu'elle reste gratuite. Si vous aimez cette application, pensez à faire un don.", - "donationContinue": "Ouvrir la page des dons" + "donationContinue": "Ouvrir la page des dons", + "becomeSponsor": "Devenir sponsor" }, "project": { "errorProjectsLoad": "Erreur lors du chargement des projets.", diff --git a/src/feedback/layout/Footer.jsx b/src/feedback/layout/Footer.jsx index 34d49bcf..ec3e5068 100644 --- a/src/feedback/layout/Footer.jsx +++ b/src/feedback/layout/Footer.jsx @@ -55,7 +55,7 @@ export const Footer = () => { style={{ color: theme.palette.textDimmed }}> - Devenir sponsor + {t('common.becomeSponsor')} diff --git a/src/feedback/translations/languages/en.feedback.json b/src/feedback/translations/languages/en.feedback.json index a1b8a274..252d39f1 100644 --- a/src/feedback/translations/languages/en.feedback.json +++ b/src/feedback/translations/languages/en.feedback.json @@ -1,7 +1,8 @@ { "common": { "loading": "Loading", - "donate": "Donate" + "donate": "Donate", + "becomeSponsor": "Become a sponsor" }, "comment": { "placeholder": "Your answer", diff --git a/src/feedback/translations/languages/fr.feedback.json b/src/feedback/translations/languages/fr.feedback.json index d62ab482..683b936b 100644 --- a/src/feedback/translations/languages/fr.feedback.json +++ b/src/feedback/translations/languages/fr.feedback.json @@ -1,7 +1,8 @@ { "common": { "loading": "Chargement", - "donate": "Faire un don" + "donate": "Faire un don", + "becomeSponsor": "Devenir sponsor" }, "comment": { "placeholder": "Votre réponse", From 5756f48da39a21a7c545ef67f4057759683d4ac5 Mon Sep 17 00:00:00 2001 From: Hugo Gresse Date: Sat, 23 Nov 2024 16:40:20 +0100 Subject: [PATCH 5/5] Add link from admin root to openfeedback root, closing #1565 --- src/admin/root/RootHeader.jsx | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/admin/root/RootHeader.jsx b/src/admin/root/RootHeader.jsx index 83137916..5fadf927 100644 --- a/src/admin/root/RootHeader.jsx +++ b/src/admin/root/RootHeader.jsx @@ -11,6 +11,7 @@ import { getUserSelector } from '../auth/authSelectors' import { makeStyles } from '@mui/styles' import Typography from '@mui/material/Typography' import Grid from '@mui/material/Grid' +import Box from '@mui/material/Box' const useStyles = makeStyles((theme) => ({ container: { @@ -49,23 +50,26 @@ const useStyles = makeStyles((theme) => ({ })) export const RootHeader = () => { - const navigate =useNavigate() + const navigate = useNavigate() const dispatch = useDispatch() const classes = useStyles() const user = useSelector(getUserSelector) - const displayedUserName = user.displayName || (user.email.split('@') || [""])[0] + const displayedUserName = + user.displayName || (user.email.split('@') || [''])[0] return (
- open feedback logo + + open feedback logo + @@ -83,5 +87,5 @@ export const RootHeader = () => {
- ); + ) }