feat(account-setup): enhance localization and UI for account setup process
- Added new language support and improved translations for account setup steps across multiple languages. - Updated the organization step to streamline user input and enhance suggestions for organization names. - Refactored task management components to improve user experience when adding and managing tasks. - Removed outdated CSS for admin center components to simplify styling and improve maintainability. - Introduced new UI elements and transitions for a more engaging account setup experience. - Enhanced Redux state management to accommodate new features and localization updates.
This commit is contained in:
chamikaJ
@@ -1,19 +0,0 @@
|
||||
@media (max-width: 1000px) {
|
||||
.step-content,
|
||||
.step-form,
|
||||
.create-first-task-form,
|
||||
.setup-action-buttons,
|
||||
.invite-members-form {
|
||||
width: 400px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.step-content,
|
||||
.step-form,
|
||||
.create-first-task-form,
|
||||
.setup-action-buttons,
|
||||
.invite-members-form {
|
||||
width: 200px !important;
|
||||
}
|
||||
}
|
||||
@@ -22,29 +22,19 @@ interface MembersStepProps {
|
||||
token?: any;
|
||||
}
|
||||
|
||||
// Common email suggestions based on organization
|
||||
const getEmailSuggestions = (orgName?: string) => {
|
||||
if (!orgName) return [];
|
||||
|
||||
const cleanOrgName = orgName.toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||
const suggestions = [
|
||||
`info@${cleanOrgName}.com`,
|
||||
`team@${cleanOrgName}.com`,
|
||||
`hello@${cleanOrgName}.com`,
|
||||
`contact@${cleanOrgName}.com`
|
||||
];
|
||||
|
||||
return suggestions;
|
||||
return [`info@${cleanOrgName}.com`, `team@${cleanOrgName}.com`, `hello@${cleanOrgName}.com`, `contact@${cleanOrgName}.com`];
|
||||
};
|
||||
|
||||
// Role suggestions for team members
|
||||
const roleSuggestions = [
|
||||
{ role: 'Designer', icon: '🎨', description: 'UI/UX, Graphics, Creative' },
|
||||
{ role: 'Developer', icon: '💻', description: 'Frontend, Backend, Full-stack' },
|
||||
{ role: 'Project Manager', icon: '📊', description: 'Planning, Coordination' },
|
||||
{ role: 'Marketing', icon: '📢', description: 'Content, Social Media, Growth' },
|
||||
{ role: 'Sales', icon: '💼', description: 'Business Development, Client Relations' },
|
||||
{ role: 'Operations', icon: '⚙️', description: 'Admin, HR, Finance' }
|
||||
const getRoleSuggestions = (t: any) => [
|
||||
{ role: 'Designer', icon: '🎨', description: t('roleSuggestions.designer') },
|
||||
{ role: 'Developer', icon: '💻', description: t('roleSuggestions.developer') },
|
||||
{ role: 'Project Manager', icon: '📊', description: t('roleSuggestions.projectManager') },
|
||||
{ role: 'Marketing', icon: '📢', description: t('roleSuggestions.marketing') },
|
||||
{ role: 'Sales', icon: '💼', description: t('roleSuggestions.sales') },
|
||||
{ role: 'Operations', icon: '⚙️', description: t('roleSuggestions.operations') }
|
||||
];
|
||||
|
||||
const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles, token }) => {
|
||||
@@ -63,30 +53,18 @@ const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles, token })
|
||||
|
||||
const addEmail = () => {
|
||||
if (teamMembers.length >= 5) return;
|
||||
|
||||
const newId = teamMembers.length > 0 ? Math.max(...teamMembers.map(t => t.id)) + 1 : 0;
|
||||
dispatch(setTeamMembers([...teamMembers, { id: newId, value: '' }]));
|
||||
setTimeout(() => {
|
||||
const newIndex = teamMembers.length;
|
||||
inputRefs.current[newIndex]?.focus();
|
||||
}, 100);
|
||||
setTimeout(() => inputRefs.current[teamMembers.length]?.focus(), 100);
|
||||
};
|
||||
|
||||
const removeEmail = (id: number) => {
|
||||
if (teamMembers.length > 1) {
|
||||
dispatch(setTeamMembers(teamMembers.filter(teamMember => teamMember.id !== id)));
|
||||
}
|
||||
if (teamMembers.length > 1) dispatch(setTeamMembers(teamMembers.filter(teamMember => teamMember.id !== id)));
|
||||
};
|
||||
|
||||
const updateEmail = (id: number, value: string) => {
|
||||
const sanitizedValue = sanitizeInput(value);
|
||||
dispatch(
|
||||
setTeamMembers(
|
||||
teamMembers.map(teamMember =>
|
||||
teamMember.id === id ? { ...teamMember, value: sanitizedValue } : teamMember
|
||||
)
|
||||
)
|
||||
);
|
||||
dispatch(setTeamMembers(teamMembers.map(teamMember => teamMember.id === id ? { ...teamMember, value: sanitizedValue } : teamMember)));
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
|
||||
@@ -94,11 +72,8 @@ const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles, token })
|
||||
const input = e.currentTarget as HTMLInputElement;
|
||||
if (input.value.trim() && validateEmail(input.value.trim())) {
|
||||
e.preventDefault();
|
||||
if (index === teamMembers.length - 1 && teamMembers.length < 5) {
|
||||
addEmail();
|
||||
} else if (index < teamMembers.length - 1) {
|
||||
inputRefs.current[index + 1]?.focus();
|
||||
}
|
||||
if (index === teamMembers.length - 1 && teamMembers.length < 5) addEmail();
|
||||
else if (index < teamMembers.length - 1) inputRefs.current[index + 1]?.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -115,32 +90,27 @@ const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles, token })
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
inputRefs.current[0]?.focus();
|
||||
}, 200);
|
||||
setTimeout(() => inputRefs.current[0]?.focus(), 200);
|
||||
}, []);
|
||||
|
||||
const getEmailStatus = (email: string, memberId: number) => {
|
||||
if (!email.trim()) return 'empty';
|
||||
if (!validatedEmails.has(memberId)) return 'empty';
|
||||
if (validateEmail(email)) return 'valid';
|
||||
return 'invalid';
|
||||
return validateEmail(email) ? 'valid' : 'invalid';
|
||||
};
|
||||
|
||||
const handleBlur = (memberId: number, email: string) => {
|
||||
setFocusedIndex(null);
|
||||
if (email.trim()) {
|
||||
setValidatedEmails(prev => new Set(prev).add(memberId));
|
||||
}
|
||||
if (email.trim()) setValidatedEmails(prev => new Set(prev).add(memberId));
|
||||
};
|
||||
|
||||
const languages = [
|
||||
{ key: 'en', label: 'English', flag: '🇺🇸' },
|
||||
{ key: 'es', label: 'Español', flag: '🇪🇸' },
|
||||
{ key: 'pt', label: 'Português', flag: '🇵🇹' },
|
||||
{ key: 'de', label: 'Deutsch', flag: '🇩🇪' },
|
||||
{ key: 'alb', label: 'Shqip', flag: '🇦🇱' },
|
||||
{ key: 'zh', label: '简体中文', flag: '🇨🇳' }
|
||||
{ key: 'en', label: t('languages.en'), flag: '🇺🇸' },
|
||||
{ key: 'es', label: t('languages.es'), flag: '🇪🇸' },
|
||||
{ key: 'pt', label: t('languages.pt'), flag: '🇵🇹' },
|
||||
{ key: 'de', label: t('languages.de'), flag: '🇩🇪' },
|
||||
{ key: 'alb', label: t('languages.alb'), flag: '🇦🇱' },
|
||||
{ key: 'zh', label: t('languages.zh'), flag: '🇨🇳' }
|
||||
];
|
||||
|
||||
const handleLanguageChange = (languageKey: string) => {
|
||||
@@ -148,18 +118,8 @@ const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles, token })
|
||||
i18n.changeLanguage(languageKey);
|
||||
};
|
||||
|
||||
const languageMenuItems: MenuProps['items'] = languages.map(lang => ({
|
||||
key: lang.key,
|
||||
label: (
|
||||
<div className="flex items-center space-x-2">
|
||||
<span>{lang.flag}</span>
|
||||
<span>{lang.label}</span>
|
||||
</div>
|
||||
),
|
||||
onClick: () => handleLanguageChange(lang.key)
|
||||
}));
|
||||
|
||||
const currentLanguage = languages.find(lang => lang.key === language) || languages[0];
|
||||
const languageMenuItems: MenuProps['items'] = languages.map(lang => ({ key: lang.key, label: <div className="flex items-center space-x-2"><span>{lang.flag}</span><span>{lang.label}</span></div>, onClick: () => handleLanguageChange(lang.key) }));
|
||||
|
||||
return (
|
||||
<div className="w-full members-step">
|
||||
@@ -284,26 +244,6 @@ const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles, token })
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Language Switcher */}
|
||||
<div className="flex justify-center mt-8">
|
||||
<Dropdown
|
||||
menu={{ items: languageMenuItems }}
|
||||
placement="topCenter"
|
||||
trigger={['click']}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<GlobalOutlined />}
|
||||
className="flex items-center space-x-2"
|
||||
style={{ color: token?.colorTextTertiary }}
|
||||
>
|
||||
<span>{currentLanguage.flag}</span>
|
||||
<span>{currentLanguage.label}</span>
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Form, Input, InputRef, Typography, Card, Row, Col, Tag, Tooltip, Button } from '@/shared/antd-imports';
|
||||
import { Form, Input, InputRef, Typography, Card, Tooltip } from '@/shared/antd-imports';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { setOrganizationName } from '@/features/account-setup/account-setup.slice';
|
||||
import { RootState } from '@/app/store';
|
||||
import { sanitizeInput } from '@/utils/sanitizeInput';
|
||||
import './admin-center-common.css';
|
||||
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
@@ -18,15 +17,6 @@ interface Props {
|
||||
token?: any;
|
||||
}
|
||||
|
||||
// Organization name suggestions by type
|
||||
const organizationSuggestions = [
|
||||
{ category: 'Tech Companies', examples: ['TechCorp', 'DevStudio', 'CodeCraft', 'PixelForge'] },
|
||||
{ category: 'Creative Agencies', examples: ['Creative Hub', 'Design Studio', 'Brand Works', 'Visual Arts'] },
|
||||
{ category: 'Consulting', examples: ['Strategy Group', 'Business Solutions', 'Expert Advisors', 'Growth Partners'] },
|
||||
{ category: 'Startups', examples: ['Innovation Labs', 'Future Works', 'Venture Co', 'Next Gen'] },
|
||||
];
|
||||
|
||||
|
||||
export const OrganizationStep: React.FC<Props> = ({
|
||||
onEnter,
|
||||
styles,
|
||||
@@ -39,8 +29,6 @@ export const OrganizationStep: React.FC<Props> = ({
|
||||
const dispatch = useDispatch();
|
||||
const { organizationName } = useSelector((state: RootState) => state.accountSetupReducer);
|
||||
const inputRef = useRef<InputRef>(null);
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||
|
||||
// Autofill organization name if not already set
|
||||
useEffect(() => {
|
||||
@@ -60,16 +48,6 @@ export const OrganizationStep: React.FC<Props> = ({
|
||||
dispatch(setOrganizationName(sanitizedValue));
|
||||
};
|
||||
|
||||
const handleSuggestionClick = (suggestion: string) => {
|
||||
dispatch(setOrganizationName(suggestion));
|
||||
inputRef.current?.focus();
|
||||
setShowSuggestions(false);
|
||||
};
|
||||
|
||||
const toggleSuggestions = () => {
|
||||
setShowSuggestions(!showSuggestions);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full organization-step">
|
||||
{/* Header */}
|
||||
@@ -110,43 +88,15 @@ export const OrganizationStep: React.FC<Props> = ({
|
||||
}
|
||||
>
|
||||
<Input
|
||||
size="large"
|
||||
placeholder={organizationNamePlaceholder || t('organizationStepPlaceholder')}
|
||||
value={organizationName}
|
||||
onChange={handleOrgNameChange}
|
||||
onPressEnter={onPressEnter}
|
||||
ref={inputRef}
|
||||
className="text-base"
|
||||
style={{
|
||||
backgroundColor: token?.colorBgContainer,
|
||||
borderColor: token?.colorBorder,
|
||||
color: token?.colorText
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={toggleSuggestions}
|
||||
style={{ color: token?.colorPrimary }}
|
||||
>
|
||||
💡 {t('organizationStepNeedIdeas')}
|
||||
</Button>
|
||||
{organizationNameInitialValue && organizationNameInitialValue !== organizationName && (
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={() => dispatch(setOrganizationName(organizationNameInitialValue))}
|
||||
style={{ color: token?.colorTextSecondary }}
|
||||
>
|
||||
🔄 {t('organizationStepUseDetected')} "{organizationNameInitialValue}"
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Character Count and Validation */}
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<Text type="secondary">
|
||||
@@ -165,62 +115,6 @@ export const OrganizationStep: React.FC<Props> = ({
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Suggestions Panel */}
|
||||
{showSuggestions && (
|
||||
<div className="mb-6">
|
||||
<Card
|
||||
title={
|
||||
<div className="flex items-center space-x-2">
|
||||
<span>🎯</span>
|
||||
<span>{t('organizationStepSuggestionsTitle')}</span>
|
||||
</div>
|
||||
}
|
||||
style={{ backgroundColor: token?.colorBgContainer }}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{organizationSuggestions.map((category, categoryIndex) => (
|
||||
<div key={categoryIndex}>
|
||||
<div className="mb-2">
|
||||
<Tag
|
||||
color="blue"
|
||||
className={`cursor-pointer ${selectedCategory === category.category ? 'opacity-100' : 'opacity-70'}`}
|
||||
onClick={() => setSelectedCategory(
|
||||
selectedCategory === category.category ? null : category.category
|
||||
)}
|
||||
>
|
||||
{t(`organizationStepCategory${categoryIndex + 1}`, category.category)}
|
||||
</Tag>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{category.examples.map((example, exampleIndex) => (
|
||||
<button
|
||||
key={exampleIndex}
|
||||
onClick={() => handleSuggestionClick(example)}
|
||||
className="px-3 py-1 rounded-full text-sm border transition-all duration-200 hover:scale-105 hover:shadow-sm organization-suggestion-button"
|
||||
style={{
|
||||
backgroundColor: token?.colorBgContainer,
|
||||
borderColor: token?.colorBorder,
|
||||
color: token?.colorTextSecondary
|
||||
}}
|
||||
>
|
||||
{example}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 pt-4 border-t" style={{ borderColor: token?.colorBorder }}>
|
||||
<Text type="secondary" className="text-sm">
|
||||
💡 {t('organizationStepSuggestionsNote')}
|
||||
</Text>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer Note */}
|
||||
<div
|
||||
className="text-center p-4 rounded-lg"
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { Button, Drawer, Form, Input, InputRef, Typography, Card, Row, Col, Tag, Tooltip } from '@/shared/antd-imports';
|
||||
import { Button, Drawer, Form, Input, InputRef, Typography, Card, Row, Col, Tag, Tooltip, Spin, Alert } from '@/shared/antd-imports';
|
||||
import TemplateDrawer from '../common/template-drawer/template-drawer';
|
||||
|
||||
import { RootState } from '@/app/store';
|
||||
@@ -13,7 +13,7 @@ import { sanitizeInput } from '@/utils/sanitizeInput';
|
||||
import { projectTemplatesApiService } from '@/api/project-templates/project-templates.api.service';
|
||||
import logger from '@/utils/errorLogger';
|
||||
|
||||
import { IAccountSetupRequest } from '@/types/project-templates/project-templates.types';
|
||||
import { IAccountSetupRequest, IWorklenzTemplate, IProjectTemplate } from '@/types/project-templates/project-templates.types';
|
||||
|
||||
import { evt_account_setup_template_complete } from '@/shared/worklenz-analytics-events';
|
||||
import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
|
||||
@@ -33,39 +33,21 @@ interface Props {
|
||||
token?: any;
|
||||
}
|
||||
|
||||
// Popular template suggestions
|
||||
const templateSuggestions = [
|
||||
{
|
||||
id: 'software',
|
||||
title: 'Software Development',
|
||||
icon: '💻',
|
||||
description: 'Agile sprints, bug tracking, releases',
|
||||
tags: ['Agile', 'Scrum', 'Development']
|
||||
},
|
||||
{
|
||||
id: 'marketing',
|
||||
title: 'Marketing Campaign',
|
||||
icon: '📢',
|
||||
description: 'Campaign planning, content calendar',
|
||||
tags: ['Content', 'Social Media', 'Analytics']
|
||||
},
|
||||
{
|
||||
id: 'construction',
|
||||
title: 'Construction Project',
|
||||
icon: '🏗️',
|
||||
description: 'Phases, permits, contractors',
|
||||
tags: ['Planning', 'Execution', 'Inspection']
|
||||
},
|
||||
{
|
||||
id: 'startup',
|
||||
title: 'Startup Launch',
|
||||
icon: '🚀',
|
||||
description: 'MVP development, funding, growth',
|
||||
tags: ['MVP', 'Funding', 'Launch']
|
||||
}
|
||||
];
|
||||
// Default icon mapping for templates (fallback if no image_url)
|
||||
const getTemplateIcon = (name?: string) => {
|
||||
if (!name) return '📁';
|
||||
const lowercaseName = name.toLowerCase();
|
||||
if (lowercaseName.includes('software') || lowercaseName.includes('development')) return '💻';
|
||||
if (lowercaseName.includes('marketing') || lowercaseName.includes('campaign')) return '📢';
|
||||
if (lowercaseName.includes('construction') || lowercaseName.includes('building')) return '🏗️';
|
||||
if (lowercaseName.includes('startup') || lowercaseName.includes('launch')) return '🚀';
|
||||
if (lowercaseName.includes('design') || lowercaseName.includes('creative')) return '🎨';
|
||||
if (lowercaseName.includes('education') || lowercaseName.includes('learning')) return '📚';
|
||||
if (lowercaseName.includes('event') || lowercaseName.includes('planning')) return '📅';
|
||||
if (lowercaseName.includes('retail') || lowercaseName.includes('sales')) return '🛍️';
|
||||
return '📁';
|
||||
};
|
||||
|
||||
// Project name suggestions based on organization type
|
||||
const getProjectSuggestions = (orgType?: string) => {
|
||||
const suggestions: Record<string, string[]> = {
|
||||
'freelancer': ['Client Website', 'Logo Design', 'Content Writing', 'App Development'],
|
||||
@@ -75,7 +57,6 @@ const getProjectSuggestions = (orgType?: string) => {
|
||||
'enterprise': ['Digital Transformation', 'System Migration', 'Annual Planning', 'Department Initiative'],
|
||||
'other': ['New Project', 'Team Initiative', 'Q1 Goals', 'Special Project']
|
||||
};
|
||||
|
||||
return suggestions[orgType || 'other'] || suggestions['other'];
|
||||
};
|
||||
|
||||
@@ -89,8 +70,46 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => inputRef.current?.focus(), 200);
|
||||
fetchTemplates();
|
||||
}, []);
|
||||
|
||||
const fetchTemplates = async () => {
|
||||
try {
|
||||
setLoadingTemplates(true);
|
||||
setTemplateError(null);
|
||||
|
||||
// Fetch list of available templates
|
||||
const templatesResponse = await projectTemplatesApiService.getWorklenzTemplates();
|
||||
|
||||
if (templatesResponse.done && templatesResponse.body) {
|
||||
// Fetch detailed information for first 4 templates for preview
|
||||
const templateDetails = await Promise.all(
|
||||
templatesResponse.body.slice(0, 4).map(async (template) => {
|
||||
if (template.id) {
|
||||
try {
|
||||
const detailResponse = await projectTemplatesApiService.getByTemplateId(template.id);
|
||||
return detailResponse.done ? detailResponse.body : null;
|
||||
} catch (error) {
|
||||
logger.error(`Failed to fetch template details for ${template.id}`, error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
})
|
||||
);
|
||||
|
||||
// Filter out null results and set templates
|
||||
const validTemplates = templateDetails.filter((template): template is IProjectTemplate => template !== null);
|
||||
setTemplates(validTemplates);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Failed to fetch templates', error);
|
||||
setTemplateError('Failed to load templates');
|
||||
} finally {
|
||||
setLoadingTemplates(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const { projectName, templateId, organizationName, surveyData } = useSelector(
|
||||
(state: RootState) => state.accountSetupReducer
|
||||
@@ -98,6 +117,9 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
const [open, setOpen] = useState(false);
|
||||
const [creatingFromTemplate, setCreatingFromTemplate] = useState(false);
|
||||
const [selectedTemplate, setSelectedTemplate] = useState<string | null>(templateId || null);
|
||||
const [templates, setTemplates] = useState<IProjectTemplate[]>([]);
|
||||
const [loadingTemplates, setLoadingTemplates] = useState(true);
|
||||
const [templateError, setTemplateError] = useState<string | null>(null);
|
||||
|
||||
const projectSuggestions = getProjectSuggestions(surveyData.organization_type);
|
||||
|
||||
@@ -125,8 +147,6 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
if (res.done && res.body.id) {
|
||||
toggleTemplateSelector(false);
|
||||
trackMixpanelEvent(evt_account_setup_template_complete);
|
||||
|
||||
// Refresh user session to update setup_completed status
|
||||
try {
|
||||
const authResponse = await dispatch(verifyAuthentication()).unwrap() as IAuthorizeResponse;
|
||||
if (authResponse?.authenticated && authResponse?.user) {
|
||||
@@ -136,7 +156,6 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
} catch (error) {
|
||||
logger.error('Failed to refresh user session after template setup completion', error);
|
||||
}
|
||||
|
||||
navigate(`/worklenz/projects/${res.body.id}?tab=tasks-list&pinned_tab=tasks-list`);
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -145,8 +164,7 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
};
|
||||
|
||||
const onPressEnter = () => {
|
||||
if (!projectName.trim()) return;
|
||||
onEnter();
|
||||
if (projectName.trim()) onEnter();
|
||||
};
|
||||
|
||||
const handleProjectNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
@@ -155,7 +173,6 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
};
|
||||
|
||||
const handleProjectNameFocus = () => {
|
||||
// Clear template selection when user focuses on project name input
|
||||
if (templateId) {
|
||||
dispatch(setTemplateId(null));
|
||||
setSelectedTemplate(null);
|
||||
@@ -172,10 +189,10 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
Let's create your first project
|
||||
{t('projectStepHeader')}
|
||||
</Title>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
Start from scratch or use a template to get going faster
|
||||
{t('projectStepSubheader')}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
@@ -193,11 +210,11 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Text strong className="text-lg" style={{ color: token?.colorText }}>
|
||||
Start from scratch
|
||||
{t('startFromScratch')}
|
||||
</Text>
|
||||
{templateId && (
|
||||
<Text type="secondary" className="text-sm">
|
||||
Template selected below
|
||||
{t('templateSelected')}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
@@ -216,31 +233,15 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
onFocus={handleProjectNameFocus}
|
||||
ref={inputRef}
|
||||
className="text-base"
|
||||
style={{
|
||||
backgroundColor: token?.colorBgContainer,
|
||||
borderColor: token?.colorBorder,
|
||||
color: token?.colorText
|
||||
}}
|
||||
style={{ backgroundColor: token?.colorBgContainer, borderColor: token?.colorBorder, color: token?.colorText }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* Quick suggestions */}
|
||||
<div>
|
||||
<Text type="secondary" className="text-sm">
|
||||
Quick suggestions:
|
||||
</Text>
|
||||
<Text type="secondary" className="text-sm">{t('quickSuggestions')}</Text>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{projectSuggestions.map((suggestion, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => handleSuggestionClick(suggestion)}
|
||||
className="px-3 py-1 rounded-full text-sm border project-suggestion-button"
|
||||
style={{
|
||||
backgroundColor: token?.colorBgContainer,
|
||||
borderColor: token?.colorBorder,
|
||||
color: token?.colorTextSecondary
|
||||
}}
|
||||
>
|
||||
<button key={index} onClick={() => handleSuggestionClick(suggestion)} className="px-3 py-1 rounded-full text-sm border project-suggestion-button" style={{ backgroundColor: token?.colorBgContainer, borderColor: token?.colorBorder, color: token?.colorTextSecondary }}>
|
||||
{suggestion}
|
||||
</button>
|
||||
))}
|
||||
@@ -249,103 +250,110 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* OR Divider */}
|
||||
<div className="relative my-8">
|
||||
<div
|
||||
className="absolute inset-0 flex items-center"
|
||||
style={{ color: token?.colorTextQuaternary }}
|
||||
>
|
||||
<div className="absolute inset-0 flex items-center" style={{ color: token?.colorTextQuaternary }}>
|
||||
<div className="w-full border-t" style={{ borderColor: token?.colorBorder }}></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<span
|
||||
className="px-4 text-sm font-medium"
|
||||
style={{
|
||||
backgroundColor: token?.colorBgLayout,
|
||||
color: token?.colorTextSecondary
|
||||
}}
|
||||
>
|
||||
OR
|
||||
</span>
|
||||
<span className="px-4 text-sm font-medium" style={{ backgroundColor: token?.colorBgLayout, color: token?.colorTextSecondary }}>{t('orText')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Template Section */}
|
||||
<div>
|
||||
<div className="text-center mb-6">
|
||||
<Title level={4} className="mb-2" style={{ color: token?.colorText }}>
|
||||
Start with a template
|
||||
</Title>
|
||||
<Title level={4} className="mb-2" style={{ color: token?.colorText }}>{t('startWithTemplate')}</Title>
|
||||
<Text type="secondary">
|
||||
{projectName?.trim()
|
||||
? "Clear project name above to select a template"
|
||||
: "Get a head start with pre-built project structures"
|
||||
}
|
||||
{t('templateHeadStart')}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* Template Preview Cards */}
|
||||
<Row gutter={[16, 16]} className="mb-6">
|
||||
{templateSuggestions.map((template) => (
|
||||
<Col xs={24} sm={12} key={template.id}>
|
||||
<Card
|
||||
hoverable={!projectName?.trim()}
|
||||
className={`h-full template-preview-card ${
|
||||
selectedTemplate === template.id ? 'selected border-2' : ''
|
||||
} ${projectName?.trim() ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
style={{
|
||||
borderColor: selectedTemplate === template.id ? token?.colorPrimary : token?.colorBorder,
|
||||
backgroundColor: token?.colorBgContainer
|
||||
}}
|
||||
onClick={() => {
|
||||
if (projectName?.trim()) return; // Don't allow selection if project name is entered
|
||||
setSelectedTemplate(template.id);
|
||||
dispatch(setTemplateId(template.id));
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start space-x-3">
|
||||
<span className="text-3xl">{template.icon}</span>
|
||||
<div className="flex-1">
|
||||
<Text strong className="block mb-1" style={{ color: token?.colorText }}>
|
||||
{template.title}
|
||||
</Text>
|
||||
<Text type="secondary" className="text-sm block mb-2">
|
||||
{template.description}
|
||||
</Text>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{template.tags.map((tag, index) => (
|
||||
<Tag
|
||||
key={index}
|
||||
color="blue"
|
||||
className="text-xs"
|
||||
>
|
||||
{tag}
|
||||
</Tag>
|
||||
))}
|
||||
<div className="mb-6">
|
||||
{loadingTemplates ? (
|
||||
<div className="text-center py-12">
|
||||
<Spin size="large" />
|
||||
<div className="mt-4">
|
||||
<Text type="secondary">Loading templates...</Text>
|
||||
</div>
|
||||
</div>
|
||||
) : templateError ? (
|
||||
<Alert
|
||||
message="Failed to load templates"
|
||||
description={templateError}
|
||||
type="error"
|
||||
showIcon
|
||||
action={
|
||||
<Button size="small" onClick={fetchTemplates}>
|
||||
Retry
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<Row gutter={[16, 16]}>
|
||||
{templates.map((template) => (
|
||||
<Col xs={24} sm={12} key={template.id}>
|
||||
<Card
|
||||
hoverable
|
||||
className={`h-full template-preview-card ${
|
||||
selectedTemplate === template.id ? 'selected border-2' : ''
|
||||
}`}
|
||||
style={{
|
||||
borderColor: selectedTemplate === template.id ? token?.colorPrimary : token?.colorBorder,
|
||||
backgroundColor: token?.colorBgContainer
|
||||
}}
|
||||
onClick={() => {
|
||||
setSelectedTemplate(template.id || null);
|
||||
dispatch(setTemplateId(template.id || ''));
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start space-x-3">
|
||||
{template.image_url ? (
|
||||
<img
|
||||
src={template.image_url}
|
||||
alt={template.name}
|
||||
className="w-12 h-12 object-cover rounded"
|
||||
onError={(e) => {
|
||||
// Fallback to icon if image fails to load
|
||||
e.currentTarget.style.display = 'none';
|
||||
if (e.currentTarget.nextSibling) {
|
||||
(e.currentTarget.nextSibling as HTMLElement).style.display = 'block';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
<span
|
||||
className="text-3xl"
|
||||
style={{ display: template.image_url ? 'none' : 'block' }}
|
||||
>
|
||||
{getTemplateIcon(template.name)}
|
||||
</span>
|
||||
<div className="flex-1">
|
||||
<Text strong className="block mb-2" style={{ color: token?.colorText }}>
|
||||
{template.name || 'Untitled Template'}
|
||||
</Text>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{template.phases?.slice(0, 3).map((phase, index) => (
|
||||
<Tag key={index} color={phase.color_code || 'blue'} className="text-xs">
|
||||
{phase.name}
|
||||
</Tag>
|
||||
))}
|
||||
{(template.phases?.length || 0) > 3 && (
|
||||
<Tag className="text-xs">+{(template.phases?.length || 0) - 3} more</Tag>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Browse All Templates Button */}
|
||||
<div className="text-center">
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
icon={<span className="mr-2">🎨</span>}
|
||||
onClick={() => toggleTemplateSelector(true)}
|
||||
className="min-w-[200px]"
|
||||
disabled={!!projectName?.trim()}
|
||||
>
|
||||
Browse All Templates
|
||||
</Button>
|
||||
<Button type="primary" size="large" icon={<span className="mr-2">🎨</span>} onClick={() => toggleTemplateSelector(true)} className="min-w-[200px]">{t('browseAllTemplates')}</Button>
|
||||
<div className="mt-2">
|
||||
<Text type="secondary" className="text-sm">
|
||||
15+ industry-specific templates available
|
||||
</Text>
|
||||
<Text type="secondary" className="text-sm">{t('templatesAvailable')}</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -359,7 +367,7 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
{t('templateDrawerTitle')}
|
||||
</Title>
|
||||
<Text type="secondary">
|
||||
Choose a template that matches your project type
|
||||
{t('chooseTemplate')}
|
||||
</Text>
|
||||
</div>
|
||||
}
|
||||
@@ -377,7 +385,7 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
loading={creatingFromTemplate}
|
||||
disabled={!templateId}
|
||||
>
|
||||
{t('create')} Project
|
||||
{t('createProject')}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -57,42 +57,38 @@ const AboutYouPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, ha
|
||||
<div className="w-full">
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
Tell us about yourself
|
||||
{t('aboutYouStepTitle')}
|
||||
</Title>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
Help us personalize your experience
|
||||
{t('aboutYouStepDescription')}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
{/* Organization Type */}
|
||||
<Form.Item className="mb-8">
|
||||
<label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
|
||||
What best describes your organization?
|
||||
{t('orgTypeQuestion')}
|
||||
</label>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-1">
|
||||
{organizationTypeOptions.map((option) => {
|
||||
const isSelected = surveyData.organization_type === option.value;
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => handleSurveyDataChange('organization_type', option.value)}
|
||||
className={`
|
||||
p-4 rounded-lg border-2 transition-all duration-200 text-left
|
||||
hover:shadow-md hover:scale-[1.02] active:scale-[0.98]
|
||||
${isSelected
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}
|
||||
`}
|
||||
className={`p-2 rounded border transition-all duration-200 text-left hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
|
||||
style={{
|
||||
backgroundColor: isSelected ? undefined : token?.colorBgContainer,
|
||||
borderColor: isSelected ? undefined : token?.colorBorder,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-2xl">{option.icon}</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className={`w-3 h-3 rounded-full border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
|
||||
{isSelected && <div className="w-1.5 h-1.5 bg-white rounded-full"></div>}
|
||||
</div>
|
||||
<span className="text-base">{option.icon}</span>
|
||||
<span
|
||||
className={`font-medium ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
|
||||
className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
|
||||
style={{ color: isSelected ? undefined : token?.colorText }}
|
||||
>
|
||||
{option.label}
|
||||
@@ -107,32 +103,28 @@ const AboutYouPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, ha
|
||||
{/* User Role */}
|
||||
<Form.Item className="mb-4">
|
||||
<label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
|
||||
What's your role?
|
||||
{t('userRoleQuestion')}
|
||||
</label>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-1">
|
||||
{userRoleOptions.map((option) => {
|
||||
const isSelected = surveyData.user_role === option.value;
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => handleSurveyDataChange('user_role', option.value)}
|
||||
className={`
|
||||
p-4 rounded-lg border-2 transition-all duration-200 text-left
|
||||
hover:shadow-md hover:scale-[1.02] active:scale-[0.98]
|
||||
${isSelected
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}
|
||||
`}
|
||||
className={`p-2 rounded border transition-all duration-200 text-left hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
|
||||
style={{
|
||||
backgroundColor: isSelected ? undefined : token?.colorBgContainer,
|
||||
borderColor: isSelected ? undefined : token?.colorBorder,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-2xl">{option.icon}</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className={`w-3 h-3 rounded-full border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
|
||||
{isSelected && <div className="w-1.5 h-1.5 bg-white rounded-full"></div>}
|
||||
</div>
|
||||
<span className="text-base">{option.icon}</span>
|
||||
<span
|
||||
className={`font-medium ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
|
||||
className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
|
||||
style={{ color: isSelected ? undefined : token?.colorText }}
|
||||
>
|
||||
{option.label}
|
||||
@@ -160,21 +152,13 @@ const YourNeedsPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, h
|
||||
{ value: 'other', label: t('mainUseCasesOther'), description: 'Something else' },
|
||||
];
|
||||
|
||||
// Use the passed handler or fall back to regular handler
|
||||
const onUseCaseClick = (value: UseCase) => {
|
||||
if (handleUseCaseToggle) {
|
||||
handleUseCaseToggle(value);
|
||||
} else {
|
||||
const currentUseCases = surveyData.main_use_cases || [];
|
||||
const isSelected = currentUseCases.includes(value);
|
||||
|
||||
let newUseCases;
|
||||
if (isSelected) {
|
||||
newUseCases = currentUseCases.filter(useCase => useCase !== value);
|
||||
} else {
|
||||
newUseCases = [...currentUseCases, value];
|
||||
}
|
||||
|
||||
const newUseCases = isSelected ? currentUseCases.filter(useCase => useCase !== value) : [...currentUseCases, value];
|
||||
handleSurveyDataChange('main_use_cases', newUseCases);
|
||||
}
|
||||
};
|
||||
@@ -183,60 +167,43 @@ const YourNeedsPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, h
|
||||
<div className="w-full">
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
What are your main needs?
|
||||
{t('yourNeedsStepTitle')}
|
||||
</Title>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
Select all that apply to help us set up your workspace
|
||||
{t('yourNeedsStepDescription')}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
{/* Main Use Cases */}
|
||||
<Form.Item className="mb-8">
|
||||
<label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
|
||||
How will you primarily use Worklenz?
|
||||
{t('yourNeedsQuestion')}
|
||||
</label>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 gap-1">
|
||||
{useCaseOptions.map((option) => {
|
||||
const isSelected = (surveyData.main_use_cases || []).includes(option.value);
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => onUseCaseClick(option.value)}
|
||||
className={`
|
||||
p-5 rounded-lg border-2 transition-all duration-200 text-left
|
||||
hover:shadow-md hover:scale-[1.02] active:scale-[0.98]
|
||||
${isSelected
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}
|
||||
`}
|
||||
className={`p-2 rounded border transition-all duration-200 text-left hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
|
||||
style={{
|
||||
backgroundColor: isSelected ? undefined : token?.colorBgContainer,
|
||||
borderColor: isSelected ? undefined : token?.colorBorder,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<h4
|
||||
className={`font-semibold text-base mb-1 ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
|
||||
style={{ color: isSelected ? undefined : token?.colorText }}
|
||||
>
|
||||
{option.label}
|
||||
</h4>
|
||||
<p
|
||||
className="text-sm"
|
||||
style={{ color: token?.colorTextSecondary }}
|
||||
>
|
||||
{option.description}
|
||||
</p>
|
||||
</div>
|
||||
{isSelected && (
|
||||
<div className="ml-3 text-blue-500">
|
||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className={`w-3 h-3 rounded border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
|
||||
{isSelected && (
|
||||
<svg width="10" height="10" fill="white" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<span className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`} style={{ color: isSelected ? undefined : token?.colorText }}>{option.label}</span>
|
||||
<span className="text-xs ml-2" style={{ color: token?.colorTextSecondary }}>- {option.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
@@ -244,7 +211,7 @@ const YourNeedsPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, h
|
||||
</div>
|
||||
{surveyData.main_use_cases && surveyData.main_use_cases.length > 0 && (
|
||||
<p className="mt-3 text-sm" style={{ color: token?.colorTextSecondary }}>
|
||||
{surveyData.main_use_cases.length} selected
|
||||
{surveyData.main_use_cases.length} {t('selected')}
|
||||
</p>
|
||||
)}
|
||||
</Form.Item>
|
||||
@@ -252,7 +219,7 @@ const YourNeedsPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, h
|
||||
{/* Previous Tools */}
|
||||
<Form.Item className="mb-4">
|
||||
<label className="block font-medium text-base mb-2" style={{ color: token?.colorText }}>
|
||||
What tools have you used before? (Optional)
|
||||
{t('previousToolsLabel')}
|
||||
</label>
|
||||
<TextArea
|
||||
placeholder="e.g., Asana, Trello, Jira, Monday.com, etc."
|
||||
@@ -260,11 +227,7 @@ const YourNeedsPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, h
|
||||
onChange={(e) => handleSurveyDataChange('previous_tools', e.target.value)}
|
||||
autoSize={{ minRows: 3, maxRows: 5 }}
|
||||
className="text-base"
|
||||
style={{
|
||||
backgroundColor: token?.colorBgContainer,
|
||||
borderColor: token?.colorBorder,
|
||||
color: token?.colorText
|
||||
}}
|
||||
style={{ backgroundColor: token?.colorBgContainer, borderColor: token?.colorBorder, color: token?.colorText }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
@@ -288,46 +251,37 @@ const DiscoveryPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, h
|
||||
<div className="w-full">
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
One last thing...
|
||||
{t('discoveryTitle')}
|
||||
</Title>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
Help us understand how you discovered Worklenz
|
||||
{t('discoveryDescription')}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
{/* How Heard About */}
|
||||
<Form.Item className="mb-8">
|
||||
<label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
|
||||
How did you hear about us?
|
||||
{t('discoveryQuestion')}
|
||||
</label>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-1">
|
||||
{howHeardAboutOptions.map((option) => {
|
||||
const isSelected = surveyData.how_heard_about === option.value;
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => handleSurveyDataChange('how_heard_about', option.value)}
|
||||
className={`
|
||||
p-4 rounded-lg border-2 transition-all duration-200
|
||||
hover:shadow-md hover:scale-[1.02] active:scale-[0.98]
|
||||
${isSelected
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}
|
||||
`}
|
||||
className={`p-2 rounded border transition-all duration-200 hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
|
||||
style={{
|
||||
backgroundColor: isSelected ? undefined : token?.colorBgContainer,
|
||||
borderColor: isSelected ? undefined : token?.colorBorder,
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col items-center space-y-2">
|
||||
<span className="text-3xl">{option.icon}</span>
|
||||
<span
|
||||
className={`font-medium text-sm ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
|
||||
style={{ color: isSelected ? undefined : token?.colorText }}
|
||||
>
|
||||
{option.label}
|
||||
</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className={`w-3 h-3 rounded-full border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
|
||||
{isSelected && <div className="w-1.5 h-1.5 bg-white rounded-full"></div>}
|
||||
</div>
|
||||
<span className="text-base">{option.icon}</span>
|
||||
<span className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`} style={{ color: isSelected ? undefined : token?.colorText }}>{option.label}</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
@@ -335,22 +289,10 @@ const DiscoveryPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, h
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
{/* Success Message */}
|
||||
<div
|
||||
className="mt-12 p-6 rounded-lg text-center"
|
||||
style={{
|
||||
backgroundColor: token?.colorSuccessBg,
|
||||
borderColor: token?.colorSuccessBorder,
|
||||
border: '1px solid'
|
||||
}}
|
||||
>
|
||||
<div className="mt-12 p-1.5 rounded-lg text-center" style={{ backgroundColor: token?.colorSuccessBg, borderColor: token?.colorSuccessBorder, border: '1px solid' }}>
|
||||
<div className="text-4xl mb-3">🎉</div>
|
||||
<Title level={4} style={{ color: token?.colorText, marginBottom: 8 }}>
|
||||
You're all set!
|
||||
</Title>
|
||||
<Paragraph style={{ color: token?.colorTextSecondary, marginBottom: 0 }}>
|
||||
Let's create your first project and get started with Worklenz
|
||||
</Paragraph>
|
||||
<Title level={4} style={{ color: token?.colorText, marginBottom: 8 }}>{t('allSetTitle')}</Title>
|
||||
<Paragraph style={{ color: token?.colorTextSecondary, marginBottom: 0 }}>{t('allSetDescription')}</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -365,15 +307,10 @@ export const SurveyStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token
|
||||
dispatch(setSurveyData({ [field]: value }));
|
||||
};
|
||||
|
||||
// Handle keyboard navigation
|
||||
React.useEffect(() => {
|
||||
const handleKeyPress = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
const isValid =
|
||||
(surveySubStep === 0 && surveyData.organization_type && surveyData.user_role) ||
|
||||
(surveySubStep === 1 && surveyData.main_use_cases && surveyData.main_use_cases.length > 0) ||
|
||||
(surveySubStep === 2 && surveyData.how_heard_about);
|
||||
|
||||
const isValid = (surveySubStep === 0 && surveyData.organization_type && surveyData.user_role) || (surveySubStep === 1 && surveyData.main_use_cases && surveyData.main_use_cases.length > 0) || (surveySubStep === 2 && surveyData.how_heard_about);
|
||||
if (isValid && surveySubStep < 2) {
|
||||
dispatch(setSurveySubStep(surveySubStep + 1));
|
||||
} else if (isValid && surveySubStep === 2) {
|
||||
@@ -381,71 +318,33 @@ export const SurveyStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keypress', handleKeyPress);
|
||||
return () => window.removeEventListener('keypress', handleKeyPress);
|
||||
}, [surveySubStep, surveyData, dispatch, onEnter]);
|
||||
|
||||
// Handle multi-select for use cases
|
||||
const handleUseCaseToggle = (value: UseCase) => {
|
||||
const currentUseCases = surveyData.main_use_cases || [];
|
||||
const isSelected = currentUseCases.includes(value);
|
||||
|
||||
let newUseCases;
|
||||
if (isSelected) {
|
||||
newUseCases = currentUseCases.filter(useCase => useCase !== value);
|
||||
} else {
|
||||
newUseCases = [...currentUseCases, value];
|
||||
}
|
||||
|
||||
const newUseCases = isSelected ? currentUseCases.filter(useCase => useCase !== value) : [...currentUseCases, value];
|
||||
handleSurveyDataChange('main_use_cases', newUseCases);
|
||||
};
|
||||
|
||||
const getSubStepTitle = () => {
|
||||
switch (surveySubStep) {
|
||||
case 0:
|
||||
return 'About You';
|
||||
case 1:
|
||||
return 'Your Needs';
|
||||
case 2:
|
||||
return 'Discovery';
|
||||
default:
|
||||
return '';
|
||||
case 0: return t('aboutYouStepName');
|
||||
case 1: return t('yourNeedsStepName');
|
||||
case 2: return t('discoveryStepName');
|
||||
default: return '';
|
||||
}
|
||||
};
|
||||
|
||||
// Create modified page props with custom handler for use cases
|
||||
const surveyPages = [
|
||||
<AboutYouPage
|
||||
key="about-you"
|
||||
styles={styles}
|
||||
isDarkMode={isDarkMode}
|
||||
token={token}
|
||||
surveyData={surveyData}
|
||||
handleSurveyDataChange={handleSurveyDataChange}
|
||||
/>,
|
||||
<YourNeedsPage
|
||||
key="your-needs"
|
||||
styles={styles}
|
||||
isDarkMode={isDarkMode}
|
||||
token={token}
|
||||
surveyData={surveyData}
|
||||
handleSurveyDataChange={handleSurveyDataChange}
|
||||
handleUseCaseToggle={handleUseCaseToggle}
|
||||
/>,
|
||||
<DiscoveryPage
|
||||
key="discovery"
|
||||
styles={styles}
|
||||
isDarkMode={isDarkMode}
|
||||
token={token}
|
||||
surveyData={surveyData}
|
||||
handleSurveyDataChange={handleSurveyDataChange}
|
||||
/>
|
||||
<AboutYouPage key="about-you" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} />,
|
||||
<YourNeedsPage key="your-needs" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} handleUseCaseToggle={handleUseCaseToggle} />,
|
||||
<DiscoveryPage key="discovery" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} />
|
||||
];
|
||||
|
||||
// Check if current step is valid for main Continue button
|
||||
React.useEffect(() => {
|
||||
// Reset sub-step when entering survey step
|
||||
dispatch(setSurveySubStep(0));
|
||||
}, []);
|
||||
|
||||
@@ -454,19 +353,10 @@ export const SurveyStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token
|
||||
{/* Progress Indicator */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium" style={{ color: token?.colorTextSecondary }}>
|
||||
Step {surveySubStep + 1} of 3: {getSubStepTitle()}
|
||||
</span>
|
||||
<span className="text-sm" style={{ color: token?.colorTextSecondary }}>
|
||||
{Math.round(((surveySubStep + 1) / 3) * 100)}%
|
||||
</span>
|
||||
<span className="text-sm font-medium" style={{ color: token?.colorTextSecondary }}>Step {surveySubStep + 1} of 3: {getSubStepTitle()}</span>
|
||||
<span className="text-sm" style={{ color: token?.colorTextSecondary }}>{Math.round(((surveySubStep + 1) / 3) * 100)}%</span>
|
||||
</div>
|
||||
<Progress
|
||||
percent={Math.round(((surveySubStep + 1) / 3) * 100)}
|
||||
showInfo={false}
|
||||
strokeColor={token?.colorPrimary}
|
||||
className="mb-0"
|
||||
/>
|
||||
<Progress percent={Math.round(((surveySubStep + 1) / 3) * 100)} showInfo={false} strokeColor={token?.colorPrimary} className="mb-0" />
|
||||
</div>
|
||||
|
||||
{/* Current Page Content */}
|
||||
|
||||
@@ -27,26 +27,18 @@ export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token
|
||||
|
||||
const addTask = () => {
|
||||
if (tasks.length >= 5) return;
|
||||
|
||||
const newId = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 0;
|
||||
dispatch(setTasks([...tasks, { id: newId, value: '' }]));
|
||||
setTimeout(() => {
|
||||
const newIndex = tasks.length;
|
||||
inputRefs.current[newIndex]?.focus();
|
||||
}, 100);
|
||||
setTimeout(() => inputRefs.current[tasks.length]?.focus(), 100);
|
||||
};
|
||||
|
||||
const removeTask = (id: number) => {
|
||||
if (tasks.length > 1) {
|
||||
dispatch(setTasks(tasks.filter(task => task.id !== id)));
|
||||
}
|
||||
if (tasks.length > 1) dispatch(setTasks(tasks.filter(task => task.id !== id)));
|
||||
};
|
||||
|
||||
const updateTask = (id: number, value: string) => {
|
||||
const sanitizedValue = sanitizeInput(value);
|
||||
dispatch(
|
||||
setTasks(tasks.map(task => (task.id === id ? { ...task, value: sanitizedValue } : task)))
|
||||
);
|
||||
dispatch(setTasks(tasks.map(task => (task.id === id ? { ...task, value: sanitizedValue } : task))));
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
|
||||
@@ -54,11 +46,8 @@ export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token
|
||||
const input = e.currentTarget as HTMLInputElement;
|
||||
if (input.value.trim()) {
|
||||
e.preventDefault();
|
||||
if (index === tasks.length - 1 && tasks.length < 5) {
|
||||
addTask();
|
||||
} else if (index < tasks.length - 1) {
|
||||
inputRefs.current[index + 1]?.focus();
|
||||
}
|
||||
if (index === tasks.length - 1 && tasks.length < 5) addTask();
|
||||
else if (index < tasks.length - 1) inputRefs.current[index + 1]?.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -84,10 +73,10 @@ export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
Add your first tasks
|
||||
{t('tasksStepTitle')}
|
||||
</Title>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
Break down "{projectName}" into actionable tasks to get started
|
||||
{t('tasksStepDescription', { projectName })}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
@@ -107,21 +96,13 @@ export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium"
|
||||
style={{
|
||||
backgroundColor: task.value.trim() ? token?.colorSuccess : token?.colorBorderSecondary,
|
||||
color: task.value.trim() ? '#fff' : token?.colorTextSecondary
|
||||
}}>
|
||||
{task.value.trim() ? (
|
||||
<CheckCircleOutlined />
|
||||
) : (
|
||||
index + 1
|
||||
)}
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium" style={{ backgroundColor: task.value.trim() ? token?.colorSuccess : token?.colorBorderSecondary, color: task.value.trim() ? '#fff' : token?.colorTextSecondary }}>
|
||||
{task.value.trim() ? <CheckCircleOutlined /> : index + 1}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
placeholder={`Task ${index + 1} - e.g., What needs to be done?`}
|
||||
placeholder={t('taskPlaceholder', { index: index + 1 })}
|
||||
value={task.value}
|
||||
onChange={e => updateTask(task.id, e.target.value)}
|
||||
onKeyPress={e => handleKeyPress(e, index)}
|
||||
@@ -129,41 +110,18 @@ export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token
|
||||
onBlur={() => setFocusedIndex(null)}
|
||||
ref={(el) => { inputRefs.current[index] = el as any; }}
|
||||
className="text-base border-0 shadow-none task-input"
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: token?.colorText
|
||||
}}
|
||||
style={{ backgroundColor: 'transparent', color: token?.colorText }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{tasks.length > 1 && (
|
||||
<Button
|
||||
type="text"
|
||||
icon={<CloseCircleOutlined />}
|
||||
onClick={() => removeTask(task.id)}
|
||||
className="text-gray-400 hover:text-red-500"
|
||||
style={{ color: token?.colorTextTertiary }}
|
||||
/>
|
||||
)}
|
||||
{tasks.length > 1 && <Button type="text" icon={<CloseCircleOutlined />} onClick={() => removeTask(task.id)} className="text-gray-400 hover:text-red-500" style={{ color: token?.colorTextTertiary }} />}
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Add Task Button */}
|
||||
{tasks.length < 5 && (
|
||||
<Button
|
||||
type="dashed"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={addTask}
|
||||
className="w-full mt-4 h-12 text-base"
|
||||
style={{
|
||||
borderColor: token?.colorBorder,
|
||||
color: token?.colorTextSecondary
|
||||
}}
|
||||
>
|
||||
Add another task ({tasks.length}/5)
|
||||
</Button>
|
||||
<Button type="dashed" icon={<PlusOutlined />} onClick={addTask} className="w-full mt-4 h-12 text-base" style={{ borderColor: token?.colorBorder, color: token?.colorTextSecondary }}>{t('addAnotherTask', { current: tasks.length, max: 5 })}</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user