Skip to content

Commit 7f30841

Browse files
AlexVOiceoverAlexVOiceover
authored
Merge pull request #9 from foundersandcoders/add_employer_name
Add employer name. Styling
2 parents 987feac + 635faa7 commit 7f30841

File tree

8 files changed

+162
-94
lines changed

8 files changed

+162
-94
lines changed

‎src/App.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,14 @@ import { QuestionsProvider } from './context/QuestionsProvider';
1313
const AppContent: React.FC = () => {
1414
const { data, setData } = useEntries();
1515

16-
const handleLoginSubmit = (username: string, managerEmail: string) => {
16+
const handleLoginSubmit = (
17+
username: string,
18+
managerName: string,
19+
managerEmail: string
20+
) => {
1721
// Dispatch an action to update the username in context.
1822
setData({ type: 'SET_USERNAME', payload: username });
23+
setData({ type: 'SET_MANAGER_NAME', payload: managerName });
1924
setData({ type: 'SET_MANAGER_EMAIL', payload: managerEmail });
2025
};
2126

‎src/components/Header.tsx‎

Lines changed: 73 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React, { useState } from 'react';
1+
// src/components/Header.tsx
2+
import React, { useState, useEffect } from 'react';
23
import { useEntries } from '../hooks/useEntries';
34

45
import {
@@ -18,22 +19,34 @@ import SmallCircularQuestionCounter from './ui/questionCounter/smallCircularQues
1819
import LargeCircularQuestionCounter from './ui/questionCounter/LargeCircularQuestionCounter';
1920

2021
const Header: React.FC = () => {
21-
// const { questions, setQuestions } = useQuestions();
2222
const { data, setData } = useEntries();
2323
const [isDashboardOpen, setIsDashboardOpen] = useState(false);
24-
const [isEditingEmail, setIsEditingEmail] = useState(false);
24+
// Combined editing state for manager details
25+
const [isEditingContact, setIsEditingContact] = useState(false);
2526
const [managerEmailInput, setManagerEmailInput] = useState(
2627
data.managerEmail || ''
2728
);
29+
const [managerNameInput, setManagerNameInput] = useState(
30+
data.managerName || ''
31+
);
2832
const [emailError, setEmailError] = useState('');
2933

30-
const handleEmailSave = () => {
31-
if (!validateEmail(managerEmailInput.trim())) {
34+
// Sync local inputs with context when edit mode is activated.
35+
useEffect(() => {
36+
if (isEditingContact) {
37+
setManagerEmailInput(data.managerEmail || '');
38+
setManagerNameInput(data.managerName || '');
39+
}
40+
}, [isEditingContact, data.managerEmail, data.managerName]);
41+
42+
const handleSaveContact = () => {
43+
if (managerEmailInput.trim() && !validateEmail(managerEmailInput.trim())) {
3244
setEmailError('Please enter a valid email address.');
3345
return;
3446
}
3547
setData({ type: 'SET_MANAGER_EMAIL', payload: managerEmailInput });
36-
setIsEditingEmail(false);
48+
setData({ type: 'SET_MANAGER_NAME', payload: managerNameInput });
49+
setIsEditingContact(false);
3750
setEmailError('');
3851
};
3952

@@ -45,7 +58,7 @@ const Header: React.FC = () => {
4558
<img src='/lift_logo.png' alt='Logo' className='h-10 mr-2' />
4659
<h1 className='text-2xl font-bold'>Beacons</h1>
4760
</div>
48-
{/* Right side: Clickable container with border that opens the dialog */}
61+
{/* Right side: User info & dashboard */}
4962
{data.username ? (
5063
<Dialog open={isDashboardOpen} onOpenChange={setIsDashboardOpen}>
5164
<DialogTrigger asChild>
@@ -75,26 +88,38 @@ const Header: React.FC = () => {
7588
{data.username || 'Not set'}
7689
</div>
7790
</div>
78-
{/* Manager email section */}
91+
{/* Manager contact section */}
7992
<div className='mt-4'>
8093
<div className='text-sm font-semibold text-gray-700 mb-1'>
81-
Your line's manager email:
94+
Your line manager's details:
8295
</div>
83-
<div className='flex items-center space-x-2'>
84-
{isEditingEmail ? (
85-
<>
86-
<Input
87-
value={managerEmailInput}
88-
onChange={(e) => setManagerEmailInput(e.target.value)}
89-
placeholder='Enter new manager email'
90-
aria-label='Manager Email'
91-
className='w-full'
92-
/>
96+
{isEditingContact ? (
97+
<div className='space-y-2'>
98+
<Input
99+
value={managerNameInput}
100+
onChange={(e) => setManagerNameInput(e.target.value)}
101+
placeholder="Enter manager's name (optional)"
102+
aria-label='Manager Name'
103+
className='w-full'
104+
/>
105+
<Input
106+
value={managerEmailInput}
107+
onChange={(e) => setManagerEmailInput(e.target.value)}
108+
placeholder="Enter manager's email (optional)"
109+
aria-label='Manager Email'
110+
className='w-full'
111+
/>
112+
{emailError && (
113+
<div className='text-red-500 text-xs mt-1'>
114+
{emailError}
115+
</div>
116+
)}
117+
<div className='flex space-x-2'>
93118
<Button
94-
onClick={handleEmailSave}
119+
onClick={handleSaveContact}
95120
variant='outline'
96121
size='sm'
97-
aria-label='Save Email'
122+
aria-label='Save Contact'
98123
disabled={
99124
managerEmailInput.trim() !== '' &&
100125
!validateEmail(managerEmailInput.trim())
@@ -104,8 +129,9 @@ const Header: React.FC = () => {
104129
</Button>
105130
<Button
106131
onClick={() => {
107-
setIsEditingEmail(false);
132+
setIsEditingContact(false);
108133
setManagerEmailInput(data.managerEmail || '');
134+
setManagerNameInput(data.managerName || '');
109135
setEmailError('');
110136
}}
111137
variant='outline'
@@ -114,36 +140,34 @@ const Header: React.FC = () => {
114140
>
115141
<X size={16} />
116142
</Button>
117-
</>
118-
) : (
119-
<>
120-
<span className='text-sm text-gray-800'>
121-
{data.managerEmail || 'Not set'}
122-
</span>
123-
<Tooltip>
124-
<TooltipTrigger asChild>
125-
<button
126-
className='flex items-center justify-center rounded-full bg-white p-2 text-brand-pink'
127-
aria-label="Edit your line's manager email"
128-
onClick={() => setIsEditingEmail(true)}
129-
>
130-
<Edit2 size={16} />
131-
</button>
132-
</TooltipTrigger>
133-
<TooltipContent>
134-
Edit your line's manager email
135-
</TooltipContent>
136-
</Tooltip>
137-
</>
138-
)}
139-
</div>
140-
{emailError && (
141-
<div className='text-red-500 text-xs mt-1'>
142-
{emailError}
143+
</div>
144+
</div>
145+
) : (
146+
<div className='flex items-center space-x-2'>
147+
<div className='text-sm text-gray-800'>
148+
{data.managerName ? data.managerName : 'Name not set'} |{' '}
149+
{data.managerEmail
150+
? data.managerEmail
151+
: 'Email not set'}
152+
</div>
153+
<Tooltip>
154+
<TooltipTrigger asChild>
155+
<button
156+
className='flex items-center justify-center rounded-full bg-white p-2 text-brand-pink'
157+
aria-label="Edit your line manager's details"
158+
onClick={() => setIsEditingContact(true)}
159+
>
160+
<Edit2 size={16} />
161+
</button>
162+
</TooltipTrigger>
163+
<TooltipContent>
164+
Edit your line manager's details
165+
</TooltipContent>
166+
</Tooltip>
143167
</div>
144168
)}
145169
</div>
146-
{/* Question counter */}
170+
{/* Progress section */}
147171
<div>
148172
<div className='text-sm font-semibold text-gray-700 mb-1'>
149173
Your progress:
@@ -165,7 +189,6 @@ const Header: React.FC = () => {
165189
</DialogContent>
166190
</Dialog>
167191
) : (
168-
// Change: Render non-clickable container if there is no username.
169192
<div className='flex items-center border-2 border-white rounded-full px-4 py-2 cursor-default'>
170193
<span className='mr-2'>Not logged</span>
171194
<SmallCircularQuestionCounter />

‎src/components/LoginPage.tsx‎

Lines changed: 37 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,17 @@ import { AlertCircle } from 'lucide-react';
88
import { validateEmail } from '../../utils/validateEmail';
99

1010
interface LoginPageProps {
11-
onSubmit: (username: string, managerEmail: string) => void;
11+
onSubmit: (
12+
username: string,
13+
managerName: string,
14+
managerEmail: string
15+
) => void;
1216
}
1317

1418
const LoginPage: React.FC<LoginPageProps> = ({ onSubmit }) => {
1519
const [name, setName] = useState('');
1620
const [managerEmail, setManagerEmail] = useState('');
21+
const [managerName, setManagerName] = useState('');
1722
const [emailError, setEmailError] = useState('');
1823

1924
const handleEmailBlur = () => {
@@ -28,7 +33,7 @@ const LoginPage: React.FC<LoginPageProps> = ({ onSubmit }) => {
2833
const handleSubmit = (e: React.FormEvent) => {
2934
e.preventDefault();
3035
if (name.trim() && !emailError) {
31-
onSubmit(name.trim(), managerEmail.trim());
36+
onSubmit(name.trim(), managerName.trim(), managerEmail.trim());
3237
}
3338
};
3439

@@ -40,8 +45,8 @@ const LoginPage: React.FC<LoginPageProps> = ({ onSubmit }) => {
4045
<div className='bg-white shadow-lg rounded-lg p-8 max-w-md w-full'>
4146
<h1 className='text-3xl font-bold mb-6 text-center'>Welcome!</h1>
4247
<p className='mb-6 text-center text-gray-700'>
43-
Please enter your name and, optionally, your line manager's email to
44-
continue.
48+
Please enter your name and, optionally, your line manager's name and
49+
email to continue.
4550
</p>
4651
<form onSubmit={handleSubmit} className='space-y-4'>
4752
<Input
@@ -50,31 +55,36 @@ const LoginPage: React.FC<LoginPageProps> = ({ onSubmit }) => {
5055
onChange={(e) => setName(e.target.value)}
5156
className='w-full'
5257
/>
53-
<div className='relative flex items-center'>
54-
<Input
55-
placeholder="Enter your manager's email (optional)"
56-
value={managerEmail}
57-
onChange={(e) => setManagerEmail(e.target.value)}
58-
onBlur={handleEmailBlur}
59-
className='w-full pr-10'
60-
/>
61-
{emailError && (
62-
<Tooltip>
63-
<TooltipTrigger asChild>
64-
<div className='absolute right-2'>
65-
<AlertCircle className='w-5 h-5 text-red-500' />
66-
</div>
67-
</TooltipTrigger>
68-
<TooltipContent className='bg-red-500 text-white p-2 rounded'>
69-
{emailError}
70-
</TooltipContent>
71-
</Tooltip>
72-
)}
73-
</div>
58+
<Input
59+
placeholder="Enter your manager's name (optional)"
60+
value={managerName}
61+
onChange={(e) => setManagerName(e.target.value)}
62+
className='w-full pr-10'
63+
/>
64+
<Input
65+
placeholder="Enter your manager's email (optional)"
66+
value={managerEmail}
67+
onChange={(e) => setManagerEmail(e.target.value)}
68+
onBlur={handleEmailBlur}
69+
className='w-full pr-10'
70+
/>
71+
{emailError && (
72+
<Tooltip>
73+
<TooltipTrigger asChild>
74+
<div className='absolute right-2'>
75+
<AlertCircle className='w-5 h-5 text-red-500' />
76+
</div>
77+
</TooltipTrigger>
78+
<TooltipContent className='bg-red-500 text-white p-2 rounded'>
79+
{emailError}
80+
</TooltipContent>
81+
</Tooltip>
82+
)}
83+
7484
<Button
7585
type='submit'
76-
variant='ghost'
77-
className='w-full mt-4'
86+
variant='pink'
87+
className='mx-auto'
7888
disabled={isSubmitDisabled}
7989
>
8090
Continue

‎src/components/MainPage.tsx‎

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client';
22

33
import React from 'react';
4+
import { Tooltip, TooltipTrigger, TooltipContent } from './ui/tooltip';
45
import StatementList from './statements/StatementList';
56
import { useEntries } from '../hooks/useEntries';
67
import { Button } from './ui/button';
@@ -10,10 +11,17 @@ import ShareEmailModal from './ShareEmailModal'; // Import the new modal
1011

1112
const MainPage: React.FC = () => {
1213
const { data } = useEntries();
13-
const { username } = data;
14+
const { username, managerEmail, entries } = data;
1415
const [isWizardOpen, setIsWizardOpen] = React.useState(false);
1516
const [isShareModalOpen, setIsShareModalOpen] = React.useState(false);
1617

18+
// Determine if email button should be disabled:
19+
const hasManagerEmail = managerEmail && managerEmail.trim().length > 0;
20+
const publicStatementsCount = entries.filter(
21+
(entry) => entry.isPublic && !entry.isResolved
22+
).length;
23+
const isEmailDisabled = !hasManagerEmail || publicStatementsCount === 0;
24+
1725
// Handler to open the wizard for creating a new statement from scratch
1826
const handleNewStatement = () => {
1927
setIsWizardOpen(true);
@@ -34,14 +42,26 @@ const MainPage: React.FC = () => {
3442
</div>
3543
{/* Floating Buttons Container */}
3644
<div className='fixed bottom-8 right-8 flex items-center space-x-4'>
37-
{/* Email Button on the left */}
38-
<Button
39-
onClick={handleShareEmail}
40-
variant='outline'
41-
className='rounded-full p-3 shadow-lg bg-white hover:bg-gray-100'
42-
>
43-
<Mail className='w-6 h-6 text-brand-pink' />
44-
</Button>
45+
{/* Email Button: Disabled if there's no manager email or no public statements */}
46+
<Tooltip>
47+
<TooltipTrigger asChild>
48+
<span>
49+
<Button
50+
onClick={handleShareEmail}
51+
variant='outline'
52+
className='rounded-full p-3 shadow-lg bg-white hover:bg-gray-100'
53+
disabled={isEmailDisabled}
54+
>
55+
<Mail className='w-6 h-6 text-brand-pink' />
56+
</Button>
57+
</span>
58+
</TooltipTrigger>
59+
<TooltipContent className='bg-gray-800 text-white p-2 rounded'>
60+
{isEmailDisabled
61+
? "Please add your line manager's email and ensure you have public statements to share."
62+
: 'Send email to your line manager with your public statements.'}
63+
</TooltipContent>
64+
</Tooltip>
4565
{/* Create Your Own Statement Button */}
4666
<Button
4767
onClick={handleNewStatement}

‎src/components/statementWizard/PrivacySelector.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { Button } from '../ui/button';
3-
import { Eye, EyeOff } from 'lucide-react';
3+
import { Mail } from 'lucide-react';
44

55
interface PrivacySelectorProps {
66
isPublic: boolean;
@@ -24,7 +24,8 @@ export const PrivacySelector: React.FC<PrivacySelectorProps> = ({
2424
onClick={() => onChange(false)}
2525
>
2626
<div className='flex items-center space-x-3'>
27-
<EyeOff className='w-5 h-5' />
27+
{/* <EyeOff className='w-5 h-5' /> */}
28+
<Mail className='w-5 h-5 text-gray-500' />
2829
<div className='text-left'>
2930
<div className='font-medium'>Private</div>
3031
<div className='text-sm text-muted-foreground'>
@@ -41,7 +42,8 @@ export const PrivacySelector: React.FC<PrivacySelectorProps> = ({
4142
onClick={() => onChange(true)}
4243
>
4344
<div className='flex items-center space-x-3'>
44-
<Eye className='w-5 h-5' />
45+
{/* <Eye className='w-5 h-5' /> */}
46+
<Mail className='w-5 h-5 text-green-500' />
4547
<div className='text-left'>
4648
<div className='font-medium'>Public</div>
4749
<div className='text-sm text-muted-foreground'>

0 commit comments

Comments
 (0)