Engagements

.circleci/config.yml

@@ -227,6 +227,7 @@ workflows:
                           only:
                               - dev
                               - mm-final-2025-reveal
+                              - engagements
 
             - deployQa:
                   context: org-global

craco.config.js

@@ -45,6 +45,7 @@ module.exports = {
             '@profiles': resolve('src/apps/profiles/src'),
             '@wallet': resolve('src/apps/wallet/src'),
             '@walletAdmin': resolve('src/apps/wallet-admin/src'),
+            '@engagements': resolve('src/apps/engagements/src'),
 
             '@platform': resolve('src/apps/platform/src'),
             // aliases used in SCSS files

package.json

@@ -215,7 +215,7 @@
     "webpack-merge": "^5.10.0"
   },
   "resolutions": {
-    "@types/react": "18.0.35",
+    "@types/react": "18.3.27",
     "string-width": "4.2.0",
     "node-fetch": "2.6.7",
     "nth-check": "2.0.1",

src/apps/accounts/src/settings/tabs/preferences/preferences.config.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 export const newsletters: Array<{ id: string, name: string, desc: string }> = [
     {
-        desc: 'A weekly summary of available ways to earn, including gig work, challenges, and Thrive articles.',
+        desc: 'A weekly summary of available ways to earn, including engagements, challenges, and Thrive articles.',
         id: 'd0c48e9da3',
         name: 'Work Opportunities',
     },

src/apps/calendar/src/CalendarApp.tsx

@@ -1,7 +1,7 @@
 import { FC, useContext, useEffect, useMemo } from 'react'
 import { Outlet, Routes } from 'react-router-dom'
 
-import { routerContext, RouterContextData } from '~/libs/core'
+import { ProfileProvider, routerContext, RouterContextData } from '~/libs/core'
 
 import { CalendarContextProvider, Layout, SWRConfigProvider } from './lib'
 import { toolTitle } from './calendar-app.routes'
@@ -19,14 +19,16 @@ const CalendarApp: FC = () => {
     }, [])
 
     return (
-        <CalendarContextProvider>
-            <SWRConfigProvider>
-                <Layout>
-                    <Outlet />
-                    <Routes>{childRoutes}</Routes>
-                </Layout>
-            </SWRConfigProvider>
-        </CalendarContextProvider>
+        <ProfileProvider>
+            <CalendarContextProvider>
+                <SWRConfigProvider>
+                    <Layout>
+                        <Outlet />
+                        <Routes>{childRoutes}</Routes>
+                    </Layout>
+                </SWRConfigProvider>
+            </CalendarContextProvider>
+        </ProfileProvider>
     )
 }
 

src/apps/calendar/src/pages/personal-calendar/PersonalCalendarPage.tsx

@@ -1,6 +1,7 @@
 import { addMonths, endOfMonth, startOfMonth, subMonths } from 'date-fns'
 import { FC, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 
+import { useProfileContext } from '~/libs/core'
 import { Button } from '~/libs/ui'
 
 import { Calendar, CalendarLegend, MonthNavigation } from '../../lib/components'
@@ -12,6 +13,7 @@ import styles from './PersonalCalendarPage.module.scss'
 
 const PersonalCalendarPage: FC = () => {
     const calendarContext = useContext(CalendarContext)
+    const profileContext = useProfileContext()
     const [currentDate, setCurrentDate] = useState<Date>(new Date())
     const [selectedDates, setSelectedDates] = useState<Set<string>>(new Set())
     const leaveDatesState = useFetchLeaveDates()
@@ -107,14 +109,35 @@ const PersonalCalendarPage: FC = () => {
         return `${count} date${count > 1 ? 's' : ''} selected`
     }, [selectedDates])
 
+    const profile = profileContext.profile
+    const displayName = useMemo(() => {
+        const firstName = profile?.firstName?.trim()
+        const lastName = profile?.lastName?.trim()
+        const fullName = [firstName, lastName]
+            .filter(Boolean)
+            .join(' ')
+
+        return (
+            fullName
+            || profile?.handle
+            || calendarContext.loginUserInfo?.handle
+            || 'Your calendar'
+        )
+    }, [
+        calendarContext.loginUserInfo?.handle,
+        profile?.firstName,
+        profile?.handle,
+        profile?.lastName,
+    ])
+
     const errorMessage = actionError || (error ? 'Something went wrong. Please try again.' : '')
 
     return (
         <div className={styles.page}>
             <header className={styles.header}>
                 <p className={styles.subtitle}>Welcome back</p>
                 <h2 className={styles.title}>
-                    {calendarContext.loginUserInfo?.handle ?? 'Your calendar'}
+                    {displayName}
                 </h2>
             </header>
 

src/apps/engagements/index.tsx

@@ -0,0 +1 @@
+export * from './src'

src/apps/engagements/src/EngagementsApp.tsx

@@ -0,0 +1,24 @@
+import type { FC } from 'react'
+import { useContext } from 'react'
+import { Outlet, Routes } from 'react-router-dom'
+
+import type { RouterContextData } from '~/libs/core'
+import { routerContext } from '~/libs/core'
+
+import { toolTitle } from './engagements.routes'
+import { EngagementsSwr } from './lib'
+
+const EngagementsApp: FC<{}> = () => {
+    const { getChildRoutes }: RouterContextData = useContext(routerContext)
+
+    return (
+        <EngagementsSwr>
+            <Outlet />
+            <Routes>
+                {getChildRoutes(toolTitle)}
+            </Routes>
+        </EngagementsSwr>
+    )
+}
+
+export default EngagementsApp

src/apps/engagements/src/components/application-card/ApplicationCard.module.scss

@@ -0,0 +1,93 @@
+@import '@libs/ui/styles/includes';
+
+.card {
+    display: grid;
+    gap: 12px;
+    padding: 18px;
+    border-radius: 16px;
+    border: 1px solid $black-10;
+    background: $tc-white;
+    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+.clickable:hover {
+    border-color: $turq-160;
+    box-shadow: 0 12px 30px rgba($black-100, 0.08);
+    transform: translateY(-2px);
+}
+
+.header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.titleRow {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.titleIcon {
+    width: 18px;
+    height: 18px;
+    color: $teal-100;
+}
+
+.title {
+    margin: 0;
+    font-size: 1rem;
+    color: $black-100;
+}
+
+.titleLink {
+    color: $turq-160;
+    text-decoration: none;
+    font-weight: 600;
+}
+
+.titleLink:hover,
+.titleLink:focus {
+    color: $turq-140;
+    text-decoration: underline;
+}
+
+.metaRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+
+.metaItem {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.85rem;
+    color: $black-80;
+}
+
+.metaIcon {
+    width: 16px;
+    height: 16px;
+    color: $teal-100;
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.viewDetailsButton {
+    margin-left: auto;
+    padding: 0;
+    font-weight: 600;
+}

src/apps/engagements/src/components/application-card/ApplicationCard.tsx

@@ -0,0 +1,100 @@
+import { FC, MouseEvent, useCallback } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import classNames from 'classnames'
+
+import { Button, IconSolid } from '~/libs/ui'
+
+import type { Application } from '../../lib/models'
+import { formatDate } from '../../lib/utils'
+import { rootRoute } from '../../engagements.routes'
+import { ApplicationStatusBadge } from '../application-status-badge'
+import { StatusBadge } from '../status-badge'
+
+import styles from './ApplicationCard.module.scss'
+
+interface ApplicationCardProps {
+    application: Application
+    onClick?: () => void
+}
+
+const ApplicationCard: FC<ApplicationCardProps> = (props: ApplicationCardProps) => {
+    const navigate = useNavigate()
+    const application = props.application
+    const onClick = props.onClick
+
+    const canNavigate = Boolean(application.engagement?.nanoId)
+
+    const engagementTitle = application.engagement?.title ?? 'Engagement details unavailable'
+    const engagementStatus = application.engagement?.status
+    const engagementLink = application.engagement?.nanoId
+        ? `${rootRoute}/${application.engagement.nanoId}`
+        : undefined
+
+    const handleOpenDetails = useCallback((event: MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation()
+        onClick?.()
+    }, [onClick])
+
+    const handleTitleClick = useCallback((event: MouseEvent<HTMLAnchorElement>) => {
+        event.stopPropagation()
+    }, [])
+
+    const handleCardClick = useCallback(() => {
+        if (!application.engagement?.nanoId) {
+            return
+        }
+
+        navigate(`${rootRoute}/${application.engagement.nanoId}`)
+    }, [navigate, application.engagement?.nanoId])
+
+    return (
+        <div
+            className={classNames(
+                styles.card,
+                canNavigate && styles.clickable,
+            )}
+            onClick={handleCardClick}
+        >
+            <div className={styles.header}>
+                <div className={styles.titleRow}>
+                    <IconSolid.BriefcaseIcon className={styles.titleIcon} />
+                    <h3 className={styles.title}>
+                        {engagementLink ? (
+                            <Link
+                                to={engagementLink}
+                                className={styles.titleLink}
+                                onClick={handleTitleClick}
+                            >
+                                {engagementTitle}
+                            </Link>
+                        ) : (
+                            engagementTitle
+                        )}
+                    </h3>
+                </div>
+                <ApplicationStatusBadge status={application.status} size='sm' />
+            </div>
+            <div className={styles.metaRow}>
+                <div className={styles.metaItem}>
+                    <IconSolid.CalendarIcon className={styles.metaIcon} />
+                    <span>{`Applied ${formatDate(application.createdAt)}`}</span>
+                </div>
+                {engagementStatus && (
+                    <StatusBadge status={engagementStatus} size='sm' />
+                )}
+            </div>
+            <div className={styles.actions}>
+                {onClick && (
+                    <Button
+                        label='View Application'
+                        onClick={handleOpenDetails}
+                        link
+                        className={styles.viewDetailsButton}
+                    />
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default ApplicationCard

src/apps/engagements/src/components/application-card/index.ts

@@ -0,0 +1 @@
+export { default as ApplicationCard } from './ApplicationCard'