Merge branch 'release-v2.1.4' of https://github.com/Worklenz/worklenz into feature/team-utilization
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;
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,15 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Form, Input, Button, List, Alert, message, InputRef } from '@/shared/antd-imports';
|
||||
import { CloseCircleOutlined, MailOutlined, PlusOutlined } from '@/shared/antd-imports';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Form, Input, Button, Typography, Card, Avatar, Tag, Alert, Space, Dropdown, MenuProps } from '@/shared/antd-imports';
|
||||
import { CloseCircleOutlined, MailOutlined, PlusOutlined, UserOutlined, CheckCircleOutlined, ExclamationCircleOutlined, GlobalOutlined } from '@/shared/antd-imports';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Typography } from '@/shared/antd-imports';
|
||||
import { setTeamMembers, setTasks } from '@/features/account-setup/account-setup.slice';
|
||||
import { setTeamMembers } from '@/features/account-setup/account-setup.slice';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { RootState } from '@/app/store';
|
||||
import { validateEmail } from '@/utils/validateEmail';
|
||||
import { sanitizeInput } from '@/utils/sanitizeInput';
|
||||
import { Rule } from 'antd/es/form';
|
||||
import { setLanguage } from '@/features/i18n/localesSlice';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
interface Email {
|
||||
id: number;
|
||||
@@ -20,163 +19,233 @@ interface Email {
|
||||
interface MembersStepProps {
|
||||
isDarkMode: boolean;
|
||||
styles: any;
|
||||
token?: any;
|
||||
}
|
||||
|
||||
const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles }) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
const getEmailSuggestions = (orgName?: string) => {
|
||||
if (!orgName) return [];
|
||||
const cleanOrgName = orgName.toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||
return [`info@${cleanOrgName}.com`, `team@${cleanOrgName}.com`, `hello@${cleanOrgName}.com`, `contact@${cleanOrgName}.com`];
|
||||
};
|
||||
|
||||
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 }) => {
|
||||
const { t, i18n } = useTranslation('account-setup');
|
||||
const { teamMembers, organizationName } = useSelector(
|
||||
(state: RootState) => state.accountSetupReducer
|
||||
);
|
||||
const inputRefs = useRef<(InputRef | null)[]>([]);
|
||||
const { language } = useSelector((state: RootState) => state.localesReducer);
|
||||
const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
|
||||
const dispatch = useDispatch();
|
||||
const [form] = Form.useForm();
|
||||
const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
const [validatedEmails, setValidatedEmails] = useState<Set<number>>(new Set());
|
||||
|
||||
const emailSuggestions = getEmailSuggestions(organizationName);
|
||||
|
||||
const addEmail = () => {
|
||||
if (teamMembers.length == 5) return;
|
||||
|
||||
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(() => {
|
||||
inputRefs.current[newId]?.focus();
|
||||
}, 0);
|
||||
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>) => {
|
||||
const input = e.currentTarget as HTMLInputElement;
|
||||
if (!input.value.trim()) return;
|
||||
e.preventDefault();
|
||||
addEmail();
|
||||
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
|
||||
if (e.key === 'Enter') {
|
||||
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();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Function to set ref that doesn't return anything (void)
|
||||
const setInputRef = (index: number) => (el: InputRef | null) => {
|
||||
inputRefs.current[index] = el;
|
||||
const handleSuggestionClick = (suggestion: string) => {
|
||||
const emptyEmailIndex = teamMembers.findIndex(member => !member.value.trim());
|
||||
if (emptyEmailIndex !== -1) {
|
||||
updateEmail(teamMembers[emptyEmailIndex].id, suggestion);
|
||||
} else if (teamMembers.length < 5) {
|
||||
const newId = teamMembers.length > 0 ? Math.max(...teamMembers.map(t => t.id)) + 1 : 0;
|
||||
dispatch(setTeamMembers([...teamMembers, { id: newId, value: suggestion }]));
|
||||
}
|
||||
setShowSuggestions(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
inputRefs.current[teamMembers.length - 1]?.focus();
|
||||
// Set initial form values
|
||||
const initialValues: Record<string, string> = {};
|
||||
teamMembers.forEach(teamMember => {
|
||||
initialValues[`email-${teamMember.id}`] = teamMember.value;
|
||||
});
|
||||
form.setFieldsValue(initialValues);
|
||||
}, 200);
|
||||
setTimeout(() => inputRefs.current[0]?.focus(), 200);
|
||||
}, []);
|
||||
|
||||
const formRules = {
|
||||
email: [
|
||||
{
|
||||
validator: async (_: any, value: string) => {
|
||||
if (!value) return;
|
||||
if (!validateEmail(value)) {
|
||||
throw new Error(t('invalidEmail'));
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
const getEmailStatus = (email: string, memberId: number) => {
|
||||
if (!email.trim()) return 'empty';
|
||||
if (!validatedEmails.has(memberId)) return 'empty';
|
||||
return validateEmail(email) ? 'valid' : 'invalid';
|
||||
};
|
||||
|
||||
const handleBlur = (memberId: number, email: string) => {
|
||||
setFocusedIndex(null);
|
||||
if (email.trim()) setValidatedEmails(prev => new Set(prev).add(memberId));
|
||||
};
|
||||
|
||||
const languages = [
|
||||
{ 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) => {
|
||||
dispatch(setLanguage(languageKey));
|
||||
i18n.changeLanguage(languageKey);
|
||||
};
|
||||
|
||||
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 (
|
||||
<Form
|
||||
form={form}
|
||||
className="invite-members-form"
|
||||
style={{
|
||||
minHeight: '300px',
|
||||
width: '600px',
|
||||
paddingBottom: '1rem',
|
||||
marginBottom: '3rem',
|
||||
marginTop: '3rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<Form.Item>
|
||||
<Title level={2} style={{ marginBottom: '1rem' }}>
|
||||
{t('step3Title')} "<mark>{organizationName}</mark>".
|
||||
<div className="w-full members-step">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
{t('membersStepTitle')}
|
||||
</Title>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
layout="vertical"
|
||||
rules={[{ required: true }]}
|
||||
label={
|
||||
<span className="font-medium">
|
||||
{t('step3InputLabel')} <MailOutlined /> {t('maxMembers')}
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<List
|
||||
dataSource={teamMembers}
|
||||
bordered={false}
|
||||
itemLayout="vertical"
|
||||
renderItem={(teamMember, index) => (
|
||||
<List.Item key={teamMember.id}>
|
||||
<div className="invite-members-form" style={{ display: 'flex', width: '600px' }}>
|
||||
<Form.Item
|
||||
rules={formRules.email as Rule[]}
|
||||
className="w-full"
|
||||
validateTrigger={['onChange', 'onBlur']}
|
||||
name={`email-${teamMember.id}`}
|
||||
>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
{t('membersStepDescription', { organizationName })}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
{/* Team Members List */}
|
||||
<div className="mb-6">
|
||||
<div className="space-y-3">
|
||||
{teamMembers.map((teamMember, index) => {
|
||||
const emailStatus = getEmailStatus(teamMember.value, teamMember.id);
|
||||
return (
|
||||
<div
|
||||
key={teamMember.id}
|
||||
className={`flex items-center space-x-3 p-3 rounded-lg border transition-all duration-200 ${
|
||||
focusedIndex === index ? 'border-2' : ''
|
||||
}`}
|
||||
style={{
|
||||
borderColor: focusedIndex === index ? token?.colorPrimary :
|
||||
emailStatus === 'invalid' ? token?.colorError : token?.colorBorder,
|
||||
backgroundColor: token?.colorBgContainer
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
size={32}
|
||||
style={{
|
||||
backgroundColor: emailStatus === 'valid' ? token?.colorSuccess :
|
||||
emailStatus === 'invalid' ? token?.colorError : token?.colorBorderSecondary,
|
||||
color: '#fff'
|
||||
}}
|
||||
icon={
|
||||
emailStatus === 'valid' ? <CheckCircleOutlined /> :
|
||||
emailStatus === 'invalid' ? <ExclamationCircleOutlined /> :
|
||||
<UserOutlined />
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
placeholder={t('emailPlaceholder')}
|
||||
placeholder={t('memberPlaceholder', { index: index + 1 })}
|
||||
value={teamMember.value}
|
||||
onChange={e => updateEmail(teamMember.id, e.target.value)}
|
||||
onPressEnter={handleKeyPress}
|
||||
ref={setInputRef(index)}
|
||||
status={teamMember.value && !validateEmail(teamMember.value) ? 'error' : ''}
|
||||
id={`member-${index}`}
|
||||
onKeyPress={e => handleKeyPress(e, index)}
|
||||
onFocus={() => setFocusedIndex(index)}
|
||||
onBlur={() => handleBlur(teamMember.id, teamMember.value)}
|
||||
ref={el => inputRefs.current[index] = el}
|
||||
className="border-0 shadow-none"
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: token?.colorText
|
||||
}}
|
||||
prefix={<MailOutlined style={{ color: token?.colorTextTertiary }} />}
|
||||
status={emailStatus === 'invalid' ? 'error' : undefined}
|
||||
suffix={
|
||||
emailStatus === 'valid' ? (
|
||||
<CheckCircleOutlined style={{ color: token?.colorSuccess }} />
|
||||
) : emailStatus === 'invalid' ? (
|
||||
<ExclamationCircleOutlined style={{ color: token?.colorError }} />
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Button
|
||||
className="custom-close-button"
|
||||
style={{ marginLeft: '48px' }}
|
||||
type="text"
|
||||
icon={<CloseCircleOutlined />}
|
||||
disabled={teamMembers.length === 1}
|
||||
onClick={() => removeEmail(teamMember.id)}
|
||||
/>
|
||||
{emailStatus === 'invalid' && (
|
||||
<Text type="danger" className="text-xs mt-1 block">
|
||||
{t('invalidEmail')}
|
||||
</Text>
|
||||
)}
|
||||
{emailStatus === 'valid' && (
|
||||
<Text type="success" className="text-xs mt-1 block">
|
||||
{t('validEmailAddress')}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{teamMembers.length > 1 && (
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<CloseCircleOutlined />}
|
||||
onClick={() => removeEmail(teamMember.id)}
|
||||
style={{ color: token?.colorTextTertiary }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
type="dashed"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={addEmail}
|
||||
style={{ marginTop: '16px' }}
|
||||
disabled={teamMembers.length == 5}
|
||||
>
|
||||
{t('tasksStepAddAnother')}
|
||||
</Button>
|
||||
<div
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Add Member Button */}
|
||||
{teamMembers.length < 5 && (
|
||||
<Button
|
||||
type="dashed"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={addEmail}
|
||||
className="w-full mt-4 h-12 text-base"
|
||||
style={{
|
||||
borderColor: token?.colorBorder,
|
||||
color: token?.colorTextSecondary
|
||||
}}
|
||||
>
|
||||
{t('addAnotherTeamMember', { current: teamMembers.length, max: 5 })}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Skip Option */}
|
||||
<div className="mb-6">
|
||||
<Alert
|
||||
message={t('canInviteLater')}
|
||||
description={t('skipStepDescription')}
|
||||
type="info"
|
||||
showIcon
|
||||
style={{
|
||||
marginTop: '24px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: token?.colorInfoBg,
|
||||
borderColor: token?.colorInfoBorder
|
||||
}}
|
||||
></div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MembersStep;
|
||||
export default MembersStep;
|
||||
@@ -1,31 +1,40 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Form, Input, InputRef, Typography } from '@/shared/antd-imports';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
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 } = Typography;
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
interface Props {
|
||||
onEnter: () => void;
|
||||
styles: any;
|
||||
organizationNamePlaceholder: string;
|
||||
organizationNameInitialValue?: string;
|
||||
isDarkMode: boolean;
|
||||
token?: any;
|
||||
}
|
||||
|
||||
export const OrganizationStep: React.FC<Props> = ({
|
||||
onEnter,
|
||||
styles,
|
||||
organizationNamePlaceholder,
|
||||
organizationNameInitialValue,
|
||||
isDarkMode,
|
||||
token,
|
||||
}) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
const dispatch = useDispatch();
|
||||
const { organizationName } = useSelector((state: RootState) => state.accountSetupReducer);
|
||||
const inputRef = useRef<InputRef>(null);
|
||||
|
||||
// Autofill organization name if not already set
|
||||
useEffect(() => {
|
||||
if (!organizationName && organizationNameInitialValue) {
|
||||
dispatch(setOrganizationName(organizationNameInitialValue));
|
||||
}
|
||||
setTimeout(() => inputRef.current?.focus(), 300);
|
||||
}, []);
|
||||
|
||||
@@ -40,25 +49,85 @@ export const OrganizationStep: React.FC<Props> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Form className="step-form" style={styles.form}>
|
||||
<Form.Item>
|
||||
<Title level={2} style={{ marginBottom: '1rem' }}>
|
||||
{t('organizationStepTitle')}
|
||||
<div className="w-full organization-step">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
{t('organizationStepWelcome')}
|
||||
</Title>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
layout="vertical"
|
||||
rules={[{ required: true }]}
|
||||
label={<span style={styles.label}>{t('organizationStepLabel')}</span>}
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
{t('organizationStepDescription')}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
{/* Main Form Card */}
|
||||
<div className="mb-6">
|
||||
<Card
|
||||
className="border-2 hover:shadow-md transition-all duration-200"
|
||||
style={{
|
||||
borderColor: token?.colorPrimary,
|
||||
backgroundColor: token?.colorBgContainer
|
||||
}}
|
||||
>
|
||||
<Form.Item
|
||||
className="mb-4"
|
||||
label={
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="font-medium text-base" style={{ color: token?.colorText }}>
|
||||
{t('organizationStepLabel')}
|
||||
</span>
|
||||
<Tooltip title={t('organizationStepTooltip')}>
|
||||
<span
|
||||
className="text-sm cursor-help"
|
||||
style={{ color: token?.colorTextTertiary }}
|
||||
>
|
||||
ⓘ
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Input
|
||||
placeholder={organizationNamePlaceholder || t('organizationStepPlaceholder')}
|
||||
value={organizationName}
|
||||
onChange={handleOrgNameChange}
|
||||
onPressEnter={onPressEnter}
|
||||
ref={inputRef}
|
||||
className="text-base"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* Character Count and Validation */}
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<Text type="secondary">
|
||||
{organizationName.length}/50 {t('organizationStepCharacters')}
|
||||
</Text>
|
||||
{organizationName.length > 0 && (
|
||||
<div className="flex items-center space-x-1">
|
||||
{organizationName.length >= 2 ? (
|
||||
<span style={{ color: token?.colorSuccess }}>✓ {t('organizationStepGoodLength')}</span>
|
||||
) : (
|
||||
<span style={{ color: token?.colorWarning }}>⚠ {t('organizationStepTooShort')}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Footer Note */}
|
||||
<div
|
||||
className="text-center p-4 rounded-lg"
|
||||
style={{
|
||||
backgroundColor: token?.colorInfoBg,
|
||||
borderColor: token?.colorInfoBorder,
|
||||
border: '1px solid'
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
placeholder={organizationNamePlaceholder}
|
||||
value={organizationName}
|
||||
onChange={handleOrgNameChange}
|
||||
onPressEnter={onPressEnter}
|
||||
ref={inputRef}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<Text type="secondary" className="text-sm">
|
||||
🔒 {t('organizationStepPrivacyNote')}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
@@ -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, Select, Typography } 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';
|
||||
@@ -24,15 +24,43 @@ import { setUser } from '@/features/user/userSlice';
|
||||
import { setSession } from '@/utils/session-helper';
|
||||
import { IAuthorizeResponse } from '@/types/auth/login.types';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
interface Props {
|
||||
onEnter: () => void;
|
||||
styles: any;
|
||||
isDarkMode: boolean;
|
||||
token?: any;
|
||||
}
|
||||
|
||||
export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = false }) => {
|
||||
// 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 '📁';
|
||||
};
|
||||
|
||||
const getProjectSuggestions = (orgType?: string) => {
|
||||
const suggestions: Record<string, string[]> = {
|
||||
'freelancer': ['Client Website', 'Logo Design', 'Content Writing', 'App Development'],
|
||||
'startup': ['MVP Development', 'Product Launch', 'Marketing Campaign', 'Investor Pitch'],
|
||||
'small_medium_business': ['Q1 Sales Initiative', 'Website Redesign', 'Process Improvement', 'Team Training'],
|
||||
'agency': ['Client Campaign', 'Brand Strategy', 'Website Project', 'Creative Brief'],
|
||||
'enterprise': ['Digital Transformation', 'System Migration', 'Annual Planning', 'Department Initiative'],
|
||||
'other': ['New Project', 'Team Initiative', 'Q1 Goals', 'Special Project']
|
||||
};
|
||||
return suggestions[orgType || 'other'] || suggestions['other'];
|
||||
};
|
||||
|
||||
export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = false, token }) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
const dispatch = useAppDispatch();
|
||||
const navigate = useNavigate();
|
||||
@@ -42,13 +70,58 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => inputRef.current?.focus(), 200);
|
||||
fetchTemplates();
|
||||
}, []);
|
||||
|
||||
const { projectName, templateId, organizationName } = useSelector(
|
||||
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
|
||||
);
|
||||
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);
|
||||
|
||||
const handleTemplateSelected = (templateId: string) => {
|
||||
if (!templateId) return;
|
||||
@@ -74,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()
|
||||
@@ -87,7 +158,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) {
|
||||
@@ -96,8 +166,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>) => {
|
||||
@@ -105,43 +174,205 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
dispatch(setProjectName(sanitizedValue));
|
||||
};
|
||||
|
||||
const handleProjectNameFocus = () => {
|
||||
if (templateId) {
|
||||
dispatch(setTemplateId(null));
|
||||
setSelectedTemplate(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSuggestionClick = (suggestion: string) => {
|
||||
dispatch(setProjectName(suggestion));
|
||||
inputRef.current?.focus();
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form className="step-form" style={styles.form}>
|
||||
<Form.Item>
|
||||
<Title level={2} style={{ marginBottom: '1rem' }}>
|
||||
{t('projectStepTitle')}
|
||||
</Title>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
layout="vertical"
|
||||
rules={[{ required: true }]}
|
||||
label={<span style={styles.label}>{t('projectStepLabel')}</span>}
|
||||
>
|
||||
<Input
|
||||
placeholder={t('projectStepPlaceholder')}
|
||||
value={projectName}
|
||||
onChange={handleProjectNameChange}
|
||||
onPressEnter={onPressEnter}
|
||||
ref={inputRef}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<Title level={4} className={isDarkMode ? 'vert-text-dark' : 'vert-text'}>
|
||||
{t('or')}
|
||||
<div className="w-full project-step">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
{t('projectStepHeader')}
|
||||
</Title>
|
||||
<div className={isDarkMode ? 'vert-line-dark' : 'vert-line'} />
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
{t('projectStepSubheader')}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<Button onClick={() => toggleTemplateSelector(true)} type="primary">
|
||||
{t('templateButton')}
|
||||
</Button>
|
||||
{/* Project Name Section */}
|
||||
<div className="mb-8">
|
||||
<Card
|
||||
className={`border-2 hover:shadow-md transition-all duration-200 ${
|
||||
templateId ? 'opacity-50' : ''
|
||||
}`}
|
||||
style={{
|
||||
borderColor: templateId ? token?.colorBorder : token?.colorPrimary,
|
||||
backgroundColor: token?.colorBgContainer
|
||||
}}
|
||||
>
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Text strong className="text-lg" style={{ color: token?.colorText }}>
|
||||
{t('startFromScratch')}
|
||||
</Text>
|
||||
{templateId && (
|
||||
<Text type="secondary" className="text-sm">
|
||||
{t('templateSelected')}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Form.Item
|
||||
className="mb-4"
|
||||
label={<span className="font-medium" style={{ color: token?.colorText }}>{t('projectStepLabel')}</span>}
|
||||
>
|
||||
<Input
|
||||
size="large"
|
||||
placeholder={projectSuggestions[0] || t('projectStepPlaceholder')}
|
||||
value={projectName}
|
||||
onChange={handleProjectNameChange}
|
||||
onPressEnter={onPressEnter}
|
||||
onFocus={handleProjectNameFocus}
|
||||
ref={inputRef}
|
||||
className="text-base"
|
||||
style={{ backgroundColor: token?.colorBgContainer, borderColor: token?.colorBorder, color: token?.colorText }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<div>
|
||||
<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 }}>
|
||||
{suggestion}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="relative my-8">
|
||||
<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 }}>{t('orText')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-center mb-6">
|
||||
<Title level={4} className="mb-2" style={{ color: token?.colorText }}>{t('startWithTemplate')}</Title>
|
||||
<Text type="secondary">
|
||||
{t('templateHeadStart')}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* Template Preview Cards */}
|
||||
<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>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<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">{t('templatesAvailable')}</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Template Drawer */}
|
||||
{createPortal(
|
||||
<Drawer
|
||||
title={t('templateDrawerTitle')}
|
||||
title={
|
||||
<div>
|
||||
<Title level={4} style={{ marginBottom: 0 }}>
|
||||
{t('templateDrawerTitle')}
|
||||
</Title>
|
||||
<Text type="secondary">
|
||||
{t('chooseTemplate')}
|
||||
</Text>
|
||||
</div>
|
||||
}
|
||||
width={1000}
|
||||
onClose={() => toggleTemplateSelector(false)}
|
||||
open={open}
|
||||
@@ -154,11 +385,13 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
type="primary"
|
||||
onClick={() => createFromTemplate()}
|
||||
loading={creatingFromTemplate}
|
||||
disabled={!templateId}
|
||||
>
|
||||
{t('create')}
|
||||
{t('createProject')}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
style={{ backgroundColor: token?.colorBgLayout }}
|
||||
>
|
||||
<TemplateDrawer
|
||||
showBothTabs={false}
|
||||
@@ -171,4 +404,4 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
374
worklenz-frontend/src/components/account-setup/survey-step.tsx
Normal file
374
worklenz-frontend/src/components/account-setup/survey-step.tsx
Normal file
@@ -0,0 +1,374 @@
|
||||
import React from 'react';
|
||||
import { Form, Input, Typography, Button, Progress, Space } from '@/shared/antd-imports';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { setSurveyData, setSurveySubStep } from '@/features/account-setup/account-setup.slice';
|
||||
import { RootState } from '@/app/store';
|
||||
import {
|
||||
OrganizationType,
|
||||
UserRole,
|
||||
UseCase,
|
||||
HowHeardAbout,
|
||||
IAccountSetupSurveyData
|
||||
} from '@/types/account-setup/survey.types';
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
const { TextArea } = Input;
|
||||
|
||||
interface Props {
|
||||
onEnter: () => void;
|
||||
styles: any;
|
||||
isDarkMode: boolean;
|
||||
token?: any;
|
||||
isModal?: boolean; // New prop to indicate if used in modal context
|
||||
}
|
||||
|
||||
interface SurveyPageProps {
|
||||
styles: any;
|
||||
isDarkMode: boolean;
|
||||
token?: any;
|
||||
surveyData: IAccountSetupSurveyData;
|
||||
handleSurveyDataChange: (field: keyof IAccountSetupSurveyData, value: any) => void;
|
||||
handleUseCaseToggle?: (value: UseCase) => void;
|
||||
isModal?: boolean;
|
||||
}
|
||||
|
||||
// Page 1: About You
|
||||
const AboutYouPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, handleSurveyDataChange }) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
|
||||
const organizationTypeOptions: { value: OrganizationType; label: string; icon?: string }[] = [
|
||||
{ value: 'freelancer', label: t('organizationTypeFreelancer'), icon: '👤' },
|
||||
{ value: 'startup', label: t('organizationTypeStartup'), icon: '🚀' },
|
||||
{ value: 'small_medium_business', label: t('organizationTypeSmallMediumBusiness'), icon: '🏢' },
|
||||
{ value: 'agency', label: t('organizationTypeAgency'), icon: '🎯' },
|
||||
{ value: 'enterprise', label: t('organizationTypeEnterprise'), icon: '🏛️' },
|
||||
{ value: 'other', label: t('organizationTypeOther'), icon: '📋' },
|
||||
];
|
||||
|
||||
const userRoleOptions: { value: UserRole; label: string; icon?: string }[] = [
|
||||
{ value: 'founder_ceo', label: t('userRoleFounderCeo'), icon: '👔' },
|
||||
{ value: 'project_manager', label: t('userRoleProjectManager'), icon: '📊' },
|
||||
{ value: 'software_developer', label: t('userRoleSoftwareDeveloper'), icon: '💻' },
|
||||
{ value: 'designer', label: t('userRoleDesigner'), icon: '🎨' },
|
||||
{ value: 'operations', label: t('userRoleOperations'), icon: '⚙️' },
|
||||
{ value: 'other', label: t('userRoleOther'), icon: '✋' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
{t('aboutYouStepTitle')}
|
||||
</Title>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
{t('aboutYouStepDescription')}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
{/* Organization Type */}
|
||||
<Form.Item className="mb-8">
|
||||
<label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
|
||||
{t('orgTypeQuestion')}
|
||||
</label>
|
||||
<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-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-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>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
{/* User Role */}
|
||||
<Form.Item className="mb-4">
|
||||
<label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
|
||||
{t('userRoleQuestion')}
|
||||
</label>
|
||||
<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-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-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>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Page 2: Your Needs
|
||||
const YourNeedsPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, handleSurveyDataChange, handleUseCaseToggle }) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
|
||||
const useCaseOptions: { value: UseCase; label: string; description: string }[] = [
|
||||
{ value: 'task_management', label: t('mainUseCasesTaskManagement'), description: 'Organize and track tasks' },
|
||||
{ value: 'team_collaboration', label: t('mainUseCasesTeamCollaboration'), description: 'Work together seamlessly' },
|
||||
{ value: 'resource_planning', label: t('mainUseCasesResourcePlanning'), description: 'Manage time and resources' },
|
||||
{ value: 'client_communication', label: t('mainUseCasesClientCommunication'), description: 'Stay connected with clients' },
|
||||
{ value: 'time_tracking', label: t('mainUseCasesTimeTracking'), description: 'Monitor project hours' },
|
||||
{ value: 'other', label: t('mainUseCasesOther'), description: 'Something else' },
|
||||
];
|
||||
|
||||
const onUseCaseClick = (value: UseCase) => {
|
||||
if (handleUseCaseToggle) {
|
||||
handleUseCaseToggle(value);
|
||||
} else {
|
||||
const currentUseCases = surveyData.main_use_cases || [];
|
||||
const isSelected = currentUseCases.includes(value);
|
||||
const newUseCases = isSelected ? currentUseCases.filter(useCase => useCase !== value) : [...currentUseCases, value];
|
||||
handleSurveyDataChange('main_use_cases', newUseCases);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
{t('yourNeedsStepTitle')}
|
||||
</Title>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
{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 }}>
|
||||
{t('yourNeedsQuestion')}
|
||||
</label>
|
||||
<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-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-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 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>
|
||||
);
|
||||
})}
|
||||
</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} {t('selected')}
|
||||
</p>
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
{/* Previous Tools */}
|
||||
<Form.Item className="mb-4">
|
||||
<label className="block font-medium text-base mb-2" style={{ color: token?.colorText }}>
|
||||
{t('previousToolsLabel')}
|
||||
</label>
|
||||
<TextArea
|
||||
placeholder="e.g., Asana, Trello, Jira, Monday.com, etc."
|
||||
value={surveyData.previous_tools || ''}
|
||||
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 }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Page 3: Discovery
|
||||
const DiscoveryPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, handleSurveyDataChange, isModal }) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
|
||||
const howHeardAboutOptions: { value: HowHeardAbout; label: string; icon: string }[] = [
|
||||
{ value: 'google_search', label: t('howHeardAboutGoogleSearch'), icon: '🔍' },
|
||||
{ value: 'twitter', label: t('howHeardAboutTwitter'), icon: '🐦' },
|
||||
{ value: 'linkedin', label: t('howHeardAboutLinkedin'), icon: '💼' },
|
||||
{ value: 'friend_colleague', label: t('howHeardAboutFriendColleague'), icon: '👥' },
|
||||
{ value: 'blog_article', label: t('howHeardAboutBlogArticle'), icon: '📰' },
|
||||
{ value: 'other', label: t('howHeardAboutOther'), icon: '💡' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
{t('discoveryTitle')}
|
||||
</Title>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
{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 }}>
|
||||
{t('discoveryQuestion')}
|
||||
</label>
|
||||
<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-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 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>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
<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 }}>
|
||||
{isModal ? t('surveyCompleteTitle') : t('allSetTitle')}
|
||||
</Title>
|
||||
<Paragraph style={{ color: token?.colorTextSecondary, marginBottom: 0 }}>
|
||||
{isModal ? t('surveyCompleteDescription') : t('allSetDescription')}
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const SurveyStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token, isModal = false }) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
const dispatch = useDispatch();
|
||||
const { surveyData, surveySubStep } = useSelector((state: RootState) => state.accountSetupReducer);
|
||||
|
||||
const handleSurveyDataChange = (field: keyof IAccountSetupSurveyData, value: any) => {
|
||||
dispatch(setSurveyData({ [field]: value }));
|
||||
};
|
||||
|
||||
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);
|
||||
if (isValid && surveySubStep < 2) {
|
||||
dispatch(setSurveySubStep(surveySubStep + 1));
|
||||
} else if (isValid && surveySubStep === 2) {
|
||||
onEnter();
|
||||
}
|
||||
}
|
||||
};
|
||||
window.addEventListener('keypress', handleKeyPress);
|
||||
return () => window.removeEventListener('keypress', handleKeyPress);
|
||||
}, [surveySubStep, surveyData, dispatch, onEnter]);
|
||||
|
||||
const handleUseCaseToggle = (value: UseCase) => {
|
||||
const currentUseCases = surveyData.main_use_cases || [];
|
||||
const isSelected = currentUseCases.includes(value);
|
||||
const newUseCases = isSelected ? currentUseCases.filter(useCase => useCase !== value) : [...currentUseCases, value];
|
||||
handleSurveyDataChange('main_use_cases', newUseCases);
|
||||
};
|
||||
|
||||
const getSubStepTitle = () => {
|
||||
switch (surveySubStep) {
|
||||
case 0: return t('aboutYouStepName');
|
||||
case 1: return t('yourNeedsStepName');
|
||||
case 2: return t('discoveryStepName');
|
||||
default: return '';
|
||||
}
|
||||
};
|
||||
|
||||
const surveyPages = [
|
||||
<AboutYouPage key="about-you" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} isModal={isModal} />,
|
||||
<YourNeedsPage key="your-needs" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} handleUseCaseToggle={handleUseCaseToggle} isModal={isModal} />,
|
||||
<DiscoveryPage key="discovery" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} isModal={isModal} />
|
||||
];
|
||||
|
||||
React.useEffect(() => {
|
||||
dispatch(setSurveySubStep(0));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
{/* 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>
|
||||
</div>
|
||||
<Progress percent={Math.round(((surveySubStep + 1) / 3) * 100)} showInfo={false} strokeColor={token?.colorPrimary} className="mb-0" />
|
||||
</div>
|
||||
|
||||
{/* Current Page Content */}
|
||||
<div className="min-h-[400px] flex flex-col survey-page-transition" key={surveySubStep}>
|
||||
{surveyPages[surveySubStep]}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,134 +1,130 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Form, Input, Button, Typography, List, InputRef } from '@/shared/antd-imports';
|
||||
import { PlusOutlined, DeleteOutlined, CloseCircleOutlined } from '@/shared/antd-imports';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Input, Button, Typography, Card } from '@/shared/antd-imports';
|
||||
import { PlusOutlined, DeleteOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@/shared/antd-imports';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RootState } from '@/app/store';
|
||||
import { setTasks } from '@/features/account-setup/account-setup.slice';
|
||||
import { sanitizeInput } from '@/utils/sanitizeInput';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
interface Props {
|
||||
onEnter: () => void;
|
||||
styles: any;
|
||||
isDarkMode: boolean;
|
||||
token?: any;
|
||||
}
|
||||
|
||||
export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode }) => {
|
||||
|
||||
export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token }) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
const dispatch = useDispatch();
|
||||
const { tasks, projectName } = useSelector((state: RootState) => state.accountSetupReducer);
|
||||
const inputRefs = useRef<(InputRef | null)[]>([]);
|
||||
const { tasks, projectName, surveyData } = useSelector((state: RootState) => state.accountSetupReducer);
|
||||
const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
|
||||
|
||||
const addTask = () => {
|
||||
if (tasks.length == 5) return;
|
||||
|
||||
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(() => {
|
||||
inputRefs.current[newId]?.focus();
|
||||
}, 0);
|
||||
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>) => {
|
||||
const input = e.currentTarget as HTMLInputElement;
|
||||
if (!input.value.trim()) return;
|
||||
e.preventDefault();
|
||||
addTask();
|
||||
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
|
||||
if (e.key === 'Enter') {
|
||||
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();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSuggestionClick = (suggestion: string) => {
|
||||
const emptyTaskIndex = tasks.findIndex(task => !task.value.trim());
|
||||
if (emptyTaskIndex !== -1) {
|
||||
updateTask(tasks[emptyTaskIndex].id, suggestion);
|
||||
} else if (tasks.length < 5) {
|
||||
const newId = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 0;
|
||||
dispatch(setTasks([...tasks, { id: newId, value: suggestion }]));
|
||||
}
|
||||
setShowSuggestions(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => inputRefs.current[0]?.focus(), 200);
|
||||
}, []);
|
||||
|
||||
// Function to set ref that doesn't return anything (void)
|
||||
const setInputRef = (index: number) => (el: InputRef | null) => {
|
||||
inputRefs.current[index] = el;
|
||||
};
|
||||
|
||||
return (
|
||||
<Form
|
||||
className="create-first-task-form"
|
||||
style={{
|
||||
minHeight: '300px',
|
||||
width: '600px',
|
||||
paddingBottom: '1rem',
|
||||
marginBottom: '3rem',
|
||||
marginTop: '3rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<Form.Item>
|
||||
<Title level={2} style={{ marginBottom: '1rem' }}>
|
||||
<div className="w-full tasks-step">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
{t('tasksStepTitle')}
|
||||
</Title>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
layout="vertical"
|
||||
rules={[{ required: true }]}
|
||||
label={
|
||||
<span className="font-medium">
|
||||
{t('tasksStepLabel')} "<mark>{projectName}</mark>". {t('maxTasks')}
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<List
|
||||
dataSource={tasks}
|
||||
bordered={false}
|
||||
renderItem={(task, index) => (
|
||||
<List.Item key={task.id}>
|
||||
<div style={{ display: 'flex', width: '600px' }}>
|
||||
<Input
|
||||
placeholder="Your Task"
|
||||
value={task.value}
|
||||
onChange={e => updateTask(task.id, e.target.value)}
|
||||
onPressEnter={handleKeyPress}
|
||||
ref={setInputRef(index)}
|
||||
/>
|
||||
<Button
|
||||
className="custom-close-button"
|
||||
style={{ marginLeft: '48px' }}
|
||||
type="text"
|
||||
icon={<CloseCircleOutlined />}
|
||||
disabled={tasks.length === 1}
|
||||
onClick={() => removeTask(task.id)}
|
||||
/>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
{t('tasksStepDescription', { projectName })}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Tasks List */}
|
||||
<div className="mb-6">
|
||||
<div className="space-y-4">
|
||||
{tasks.map((task, index) => (
|
||||
<Card
|
||||
key={task.id}
|
||||
className={`task-item-card transition-all duration-200 ${
|
||||
focusedIndex === index ? 'border-2' : ''
|
||||
}`}
|
||||
style={{
|
||||
borderColor: focusedIndex === index ? token?.colorPrimary : token?.colorBorder,
|
||||
backgroundColor: token?.colorBgContainer
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
placeholder={t('taskPlaceholder', { index: index + 1 })}
|
||||
value={task.value}
|
||||
onChange={e => updateTask(task.id, e.target.value)}
|
||||
onKeyPress={e => handleKeyPress(e, index)}
|
||||
onFocus={() => setFocusedIndex(index)}
|
||||
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 }}
|
||||
/>
|
||||
</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 }} />}
|
||||
</div>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
type="dashed"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={addTask}
|
||||
disabled={tasks.length == 5}
|
||||
style={{ marginTop: '16px' }}
|
||||
>
|
||||
{t('tasksStepAddAnother')}
|
||||
</Button>
|
||||
<div
|
||||
style={{
|
||||
marginTop: '24px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
></div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{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 }}>{t('addAnotherTask', { current: tasks.length, max: 5 })}</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user