Skip to content

Commit 6617d36

Browse files
AlexVOiceoverAlexVOiceover
committed
feat: added email preview
1 parent 777f87c commit 6617d36

File tree

5 files changed

+130
-16
lines changed

5 files changed

+130
-16
lines changed

‎data/setQuestions.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"allowedVerbs": ["Share"]
1919
},
2020
"object": {
21-
"question": "List the factors affecting your wellbeing.",
21+
"question": "what?",
2222
"preset": false,
2323
"presetAnswer": null
2424
},

‎src/components/MainPage.tsx‎

Lines changed: 34 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,54 @@ import React from 'react';
44
import StatementList from './statements/StatementList';
55
import { useEntries } from '../hooks/useEntries';
66
import { Button } from './ui/button';
7-
import { Plus } from 'lucide-react';
7+
import { Plus, Mail } from 'lucide-react';
88
import StatementWizard from './statementWizard/StatementWizard';
9+
import ShareEmailModal from './ShareEmailModal'; // Import the new modal
910

1011
const MainPage: React.FC = () => {
1112
const { data } = useEntries();
1213
const { username } = data;
1314
const [isWizardOpen, setIsWizardOpen] = React.useState(false);
15+
const [isShareModalOpen, setIsShareModalOpen] = React.useState(false);
1416

1517
// Handler to open the wizard for creating a new statement from scratch
1618
const handleNewStatement = () => {
1719
setIsWizardOpen(true);
1820
};
1921

22+
// Handler to open the share email modal
23+
const handleShareEmail = () => {
24+
setIsShareModalOpen(true);
25+
};
26+
2027
return (
21-
<main className='min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 py-12 '>
28+
<main className='min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 py-12'>
2229
<h1 className='text-3xl font-bold mb-8 text-center'>
2330
Statement builder for {username}
2431
</h1>
2532
<div className='container mx-auto px-4'>
2633
<StatementList username={username} />
2734
</div>
28-
{/* Floating Action Button (FAB) for creating a new custom statement */}
29-
30-
<Button
31-
onClick={handleNewStatement}
32-
variant='default'
33-
className='fixed bottom-8 right-8 rounded-full flex items-center space-x-2 px-6 py-3 shadow-lg bg-brand-pink text-white text-lg hover:bg-brand-darkPurple'
34-
>
35-
<Plus className='w-6 h-6' />
36-
<span className='text-lg'>Create your own statement</span>
37-
</Button>
35+
{/* Floating Buttons Container */}
36+
<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+
{/* Create Your Own Statement Button */}
46+
<Button
47+
onClick={handleNewStatement}
48+
variant='pink'
49+
className='rounded-full flex items-center space-x-2 px-6 py-3 shadow-lg'
50+
>
51+
<Plus className='w-6 h-6' />
52+
<span className='text-lg'>Create your own statement</span>
53+
</Button>
54+
</div>
3855

3956
{/* Conditionally render the wizard modal */}
4057
{isWizardOpen && (
@@ -44,6 +61,11 @@ const MainPage: React.FC = () => {
4461
onClose={() => setIsWizardOpen(false)}
4562
/>
4663
)}
64+
65+
{/* Conditionally render the share email modal */}
66+
{isShareModalOpen && (
67+
<ShareEmailModal onClose={() => setIsShareModalOpen(false)} />
68+
)}
4769
</main>
4870
);
4971
};

‎src/components/ShareEmailModal.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import {
5+
Dialog,
6+
DialogContent,
7+
DialogTitle,
8+
DialogDescription,
9+
DialogFooter,
10+
} from '../components/ui/dialog';
11+
import { Button } from '../components/ui/button';
12+
import { useEntries } from '../hooks/useEntries';
13+
14+
const ShareEmailModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
15+
const { data } = useEntries();
16+
const managerEmail = data.managerEmail;
17+
// Only include public statements that are not resolved.
18+
const publicStatements = data.entries.filter(
19+
(entry) => entry.isPublic && !entry.isResolved
20+
);
21+
22+
return (
23+
<Dialog open onOpenChange={onClose}>
24+
<DialogContent className='sm:max-w-[600px] w-full p-4'>
25+
<DialogTitle className='text-lg font-bold'>
26+
Sharing with: {managerEmail || 'No manager email set'}
27+
</DialogTitle>
28+
<DialogDescription className='mt-2'>
29+
Below are your public, unresolved statements and their pending
30+
actions:
31+
</DialogDescription>
32+
<div className='mt-4 space-y-4'>
33+
{publicStatements.length > 0 ? (
34+
publicStatements.map((entry) => (
35+
<div
36+
key={entry.id}
37+
className='p-4 border rounded bg-white shadow-sm'
38+
>
39+
<p className='text-base font-semibold'>{entry.input}</p>
40+
{entry.actions && entry.actions.length > 0 && (
41+
<div className='mt-2 space-y-2'>
42+
{entry.actions
43+
.filter((action) => !action.completed)
44+
.map((action) => (
45+
<div
46+
key={action.id}
47+
className='pl-4 border-l-2 border-gray-300'
48+
>
49+
<p className='text-sm'>{action.action}</p>
50+
{action.byDate && action.byDate.trim() !== '' && (
51+
<p className='text-xs text-gray-500'>
52+
Due: {action.byDate}
53+
</p>
54+
)}
55+
</div>
56+
))}
57+
</div>
58+
)}
59+
</div>
60+
))
61+
) : (
62+
<p className='text-gray-600'>
63+
No public unresolved statements available.
64+
</p>
65+
)}
66+
</div>
67+
<DialogFooter className='mt-4 flex justify-end space-x-4'>
68+
<Button
69+
variant='pink'
70+
onClick={() => {
71+
/* placeholder for Send */
72+
}}
73+
>
74+
Send
75+
</Button>
76+
<Button variant='pink' onClick={onClose}>
77+
Close
78+
</Button>
79+
</DialogFooter>
80+
</DialogContent>
81+
</Dialog>
82+
);
83+
};
84+
85+
export default ShareEmailModal;

‎src/components/statementWizard/StatementWizard.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import SentimentVerbPicker from './SentimentVerbPicker';
1818
import { PrivacySelector } from './PrivacySelector';
1919
import statementsCategories from '../../../data/statementsCategories.json';
2020
import StepContainer from './StepContainer';
21+
import nlp from 'compromise';
2122

2223
interface StatementWizardProps {
2324
username: string;
@@ -185,9 +186,15 @@ const StatementWizard: React.FC<StatementWizardProps> = ({
185186
<SentimentVerbPicker
186187
selectedVerb={selection.atoms.verb}
187188
onVerbSelect={(verb) => {
189+
// Convert verb.name to present tense and lowercase it.
190+
const processedVerb = nlp(verb.name)
191+
.verbs()
192+
.toPresentTense()
193+
.out('text')
194+
.toLowerCase();
188195
setSelection((prev) => ({
189196
...prev,
190-
atoms: { ...prev.atoms, verb: verb.name },
197+
atoms: { ...prev.atoms, verb: processedVerb },
191198
}));
192199
handleNext('object');
193200
}}
@@ -316,7 +323,7 @@ const StatementWizard: React.FC<StatementWizardProps> = ({
316323
};
317324

318325
const renderComplementStep = () => {
319-
const subQuestion = 'Add Extra Detail?';
326+
const subQuestion = 'Info';
320327
return (
321328
<StepContainer subQuestion={subQuestion} showBack onBack={handleBack}>
322329
<div className='text-center p-4'>

‎src/components/statements/ActionForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const ActionForm: React.FC<ActionFormProps> = ({
3030

3131
return (
3232
<div className='flex flex-col space-y-1'>
33-
<div className='flex items-center cursor-pointer hover:bg-gray-100 border border-dashed border-gray-300 p-1 rounded'>
33+
<div className='flex items-center cursor-pointer hover:bg-gray-100 gap-1 border border-dashed border-gray-300 p-1 rounded'>
3434
<Input
3535
placeholder='Action text'
3636
value={text}

0 commit comments

Comments
 (0)