Add first draft for Activity log behind feature flag

Author: benjaminaaron

src/App.js

@@ -14,6 +14,7 @@ import InfoScreenPrivacy from "./screens/info-screen/InfoScreenPrivacy";
 import OnboardingWelcomeTopics from "./screens/onboarding-welcome/OnboardingWelcomeTopics";
 import InfoScreenNewOrExistingUser from "./screens/info-screen/InfoScreenNewOrExistingUser";
 import ProfileScreen from "./screens/profile-screen/ProfileScreen";
+import ActivityLogScreen from "./screens/activity-log/ActivityLogScreen";
 import {LanguageProvider} from "./language/LanguageContext";
 
 const theme = createTheme({});
@@ -39,6 +40,7 @@ const App = () => {
                             <Route path="/profile-section/:benefitId" element={<ProfileSectionScreen/>}/>
                             <Route path="/benefit-page/:id" element={<BenefitPageScreen/>}/>
                             <Route path="/profile-overview" element={<ProfileScreen/>}/>
+                            <Route path="/activity-log" element={<ActivityLogScreen/>}/>
                         </Routes>
                     </div>
                 </Router>

src/featureFlags.js

@@ -2,6 +2,7 @@ const defaultFlags = {
     newFeedbackSection: true,
     newCollaborationSection: true,
     newLanguageToggle: false,
+    newActivityLog: false,
 };
 
 const getFeatureFlag = (flag) => {
@@ -13,6 +14,7 @@ const featureFlags = {
     newFeedbackSection: getFeatureFlag('newFeedbackSection'),
     newCollaborationSection: getFeatureFlag('newCollaborationSection'),
     newLanguageToggle: getFeatureFlag('newLanguageToggle'),
+    newActivityLog: getFeatureFlag('newActivityLog'),
 };
 
 export const setFeatureFlag = (flag, value) => {

src/language/translations.js

@@ -8,7 +8,8 @@ const translations = {
             principles: "Principles",
             aboutUs: "About us",
             improve: "Help us improve",
-            collaborate: "Collaborate"
+            collaborate: "Collaborate",
+            activityLog: "Activity log"
         },
         hero: {
             header: "Check benefits and financial support you can get",
@@ -28,7 +29,8 @@ const translations = {
             principles: "Prinzipien",
             aboutUs: "Über uns",
             improve: "Hilf uns, besser zu werden",
-            collaborate: "Zusammenarbeit"
+            collaborate: "Zusammenarbeit",
+            activityLog: "Aktivitätsprotokoll"
         },
         hero: {
             header: "Finde heraus, welche Leistungen und finanzielle Unterstützung du bekommen könntest",

src/screens/activity-log/ActivityLogScreen.js

@@ -0,0 +1,48 @@
+import React from "react";
+import {Typography} from "@mui/material";
+import VStack from "../../components/VStack";
+import InfoScreen from "../info-screen/components/InfoScreen";
+
+const ActivityLogScreen = () => {
+    return (
+        <InfoScreen title={'Activity log'}>
+            <VStack sx={styles.infoBox}>
+                <Typography sx={styles.infoText}>
+                    <strong>What's happening at the moment:</strong>
+                    <ul>
+                        <li>
+                            A collaboration with ZenDiS is shaping up
+                        </li>
+                        <li>
+                            We applied for some grants &#129310;
+                        </li>
+                    </ul>
+                </Typography>
+                <Typography sx={styles.infoText}>
+                    <strong>Milestones in the past:</strong>
+                    <ul>
+                        <li>
+                            <em>2024-09-17</em> Add feedback and collaboration section
+                        </li>
+                        <li>
+                            <em>2024-09-03</em> Live with a first version of 10 social benefits for the <a href="https://prototypefund.de/demo-day/">Prototype Fund
+                            Demo Day</a>
+                        </li>
+                    </ul>
+                </Typography>
+            </VStack>
+        </InfoScreen>
+    );
+}
+
+const styles = {
+    infoText: {
+        fontSize: '20px',
+        textAlign: 'left',
+    },
+    infoBox: {
+        width: '100%',
+    }
+}
+
+export default ActivityLogScreen;

src/screens/landing-page/sections/header/views/HeaderBarDesktop.js

@@ -18,6 +18,11 @@ const HeaderBarDesktop = ({isApp}) => {
                 {isApp ? null : <LandingPageWAppButton backgroundColor={'primary'}/>}
                 {isApp ? null : <LandingPageHollowButton text={t('menu.improve')} to={'/#feedback'}/>}
                 {isApp ? null : <LandingPageHollowButton text={t('menu.collaborate')} to={'/#collaboration'}/>}
+                {isApp ? null :
+                    featureFlags.newActivityLog ?
+                        <LandingPageHollowButton text={t('menu.activityLog')} to={'/activity-log'}/>
+                        : null
+                }
             </HStack>
             <HStack>
                 <NarBarLink to={"/#about-us"} title={t('menu.aboutUs')}/>