feat(account-setup): enhance account setup process with new survey and task management features
- Expanded localization files to include additional text for account setup steps in multiple languages. - Introduced new components for the survey step, allowing users to provide feedback on their needs and preferences. - Implemented task management features, enabling users to add and manage tasks during the account setup process. - Enhanced the organization step with suggestions for organization names based on industry categories. - Improved UI/UX with new design elements and transitions for a smoother user experience. - Updated Redux state management to handle new survey and task data effectively. - Added language switcher functionality to support multilingual users during the setup process.
This commit is contained in:
chamikaJ
@@ -2,7 +2,7 @@ import { IServerResponse } from '@/types/common.types';
|
||||
import { ISurvey, ISurveySubmissionRequest, ISurveyResponse } from '@/types/account-setup/survey.types';
|
||||
import apiClient from '../api-client';
|
||||
|
||||
const API_BASE_URL = '/api';
|
||||
const API_BASE_URL = '/api/v1';
|
||||
|
||||
export const surveyApiService = {
|
||||
async getAccountSetupSurvey(): Promise<IServerResponse<ISurvey>> {
|
||||
|
||||
@@ -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,25 +19,57 @@ interface Email {
|
||||
interface MembersStepProps {
|
||||
isDarkMode: boolean;
|
||||
styles: any;
|
||||
token?: any;
|
||||
}
|
||||
|
||||
const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles }) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
// 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;
|
||||
};
|
||||
|
||||
// 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 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);
|
||||
const newIndex = teamMembers.length;
|
||||
inputRefs.current[newIndex]?.focus();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const removeEmail = (id: number) => {
|
||||
@@ -58,125 +89,223 @@ const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles }) => {
|
||||
);
|
||||
};
|
||||
|
||||
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);
|
||||
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';
|
||||
if (validateEmail(email)) return 'valid';
|
||||
return 'invalid';
|
||||
};
|
||||
|
||||
const handleBlur = (memberId: number, email: string) => {
|
||||
setFocusedIndex(null);
|
||||
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: '🇨🇳' }
|
||||
];
|
||||
|
||||
const handleLanguageChange = (languageKey: string) => {
|
||||
dispatch(setLanguage(languageKey));
|
||||
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];
|
||||
|
||||
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>
|
||||
|
||||
{/* 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>
|
||||
);
|
||||
};
|
||||
|
||||
export default MembersStep;
|
||||
export default MembersStep;
|
||||
@@ -1,5 +1,5 @@
|
||||
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, Row, Col, Tag, Tooltip, Button } from '@/shared/antd-imports';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { setOrganizationName } from '@/features/account-setup/account-setup.slice';
|
||||
@@ -7,25 +7,40 @@ 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;
|
||||
}
|
||||
|
||||
// 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,
|
||||
organizationNamePlaceholder,
|
||||
organizationNameInitialValue,
|
||||
isDarkMode,
|
||||
token,
|
||||
}) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
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(() => {
|
||||
@@ -45,26 +60,180 @@ 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 (
|
||||
<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
|
||||
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">
|
||||
{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>
|
||||
|
||||
|
||||
{/* 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"
|
||||
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 } from '@/shared/antd-imports';
|
||||
import TemplateDrawer from '../common/template-drawer/template-drawer';
|
||||
|
||||
import { RootState } from '@/app/store';
|
||||
@@ -24,15 +24,62 @@ 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 }) => {
|
||||
// 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']
|
||||
}
|
||||
];
|
||||
|
||||
// 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'],
|
||||
'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();
|
||||
@@ -44,11 +91,15 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
setTimeout(() => inputRef.current?.focus(), 200);
|
||||
}, []);
|
||||
|
||||
const { projectName, templateId, organizationName } = useSelector(
|
||||
|
||||
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 projectSuggestions = getProjectSuggestions(surveyData.organization_type);
|
||||
|
||||
const handleTemplateSelected = (templateId: string) => {
|
||||
if (!templateId) return;
|
||||
@@ -103,43 +154,215 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
dispatch(setProjectName(sanitizedValue));
|
||||
};
|
||||
|
||||
const handleProjectNameFocus = () => {
|
||||
// Clear template selection when user focuses on project name input
|
||||
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 }}>
|
||||
Let's create your first project
|
||||
</Title>
|
||||
<div className={isDarkMode ? 'vert-line-dark' : 'vert-line'} />
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
Start from scratch or use a template to get going faster
|
||||
</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 }}>
|
||||
Start from scratch
|
||||
</Text>
|
||||
{templateId && (
|
||||
<Text type="secondary" className="text-sm">
|
||||
Template selected below
|
||||
</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>
|
||||
|
||||
{/* Quick suggestions */}
|
||||
<div>
|
||||
<Text type="secondary" className="text-sm">
|
||||
Quick suggestions:
|
||||
</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>
|
||||
|
||||
{/* OR Divider */}
|
||||
<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
|
||||
}}
|
||||
>
|
||||
OR
|
||||
</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>
|
||||
<Text type="secondary">
|
||||
{projectName?.trim()
|
||||
? "Clear project name above to select a template"
|
||||
: "Get a head start with pre-built project structures"
|
||||
}
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
{/* 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>
|
||||
<div className="mt-2">
|
||||
<Text type="secondary" className="text-sm">
|
||||
15+ industry-specific templates available
|
||||
</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">
|
||||
Choose a template that matches your project type
|
||||
</Text>
|
||||
</div>
|
||||
}
|
||||
width={1000}
|
||||
onClose={() => toggleTemplateSelector(false)}
|
||||
open={open}
|
||||
@@ -152,11 +375,13 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
type="primary"
|
||||
onClick={() => createFromTemplate()}
|
||||
loading={creatingFromTemplate}
|
||||
disabled={!templateId}
|
||||
>
|
||||
{t('create')}
|
||||
{t('create')} Project
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
style={{ backgroundColor: token?.colorBgLayout }}
|
||||
>
|
||||
<TemplateDrawer
|
||||
showBothTabs={false}
|
||||
@@ -169,4 +394,4 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Form, Input, Typography, Button } from '@/shared/antd-imports';
|
||||
import { Form, Input, Typography, Button, Progress, Space } from '@/shared/antd-imports';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { setSurveyData } from '@/features/account-setup/account-setup.slice';
|
||||
import { setSurveyData, setSurveySubStep } from '@/features/account-setup/account-setup.slice';
|
||||
import { RootState } from '@/app/store';
|
||||
import {
|
||||
OrganizationType,
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
IAccountSetupSurveyData
|
||||
} from '@/types/account-setup/survey.types';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Title, Paragraph } = Typography;
|
||||
const { TextArea } = Input;
|
||||
|
||||
interface Props {
|
||||
@@ -22,162 +22,244 @@ interface Props {
|
||||
token?: any;
|
||||
}
|
||||
|
||||
export const SurveyStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token }) => {
|
||||
interface SurveyPageProps {
|
||||
styles: any;
|
||||
isDarkMode: boolean;
|
||||
token?: any;
|
||||
surveyData: IAccountSetupSurveyData;
|
||||
handleSurveyDataChange: (field: keyof IAccountSetupSurveyData, value: any) => void;
|
||||
handleUseCaseToggle?: (value: UseCase) => void;
|
||||
}
|
||||
|
||||
// Page 1: About You
|
||||
const AboutYouPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, handleSurveyDataChange }) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
const dispatch = useDispatch();
|
||||
const { surveyData } = useSelector((state: RootState) => state.accountSetupReducer);
|
||||
|
||||
const handleSurveyDataChange = (field: keyof IAccountSetupSurveyData, value: any) => {
|
||||
dispatch(setSurveyData({ [field]: value }));
|
||||
};
|
||||
|
||||
// Get Ant Design button type based on selection state
|
||||
const getButtonType = (isSelected: boolean) => {
|
||||
return isSelected ? 'primary' : 'default';
|
||||
};
|
||||
|
||||
// Handle multi-select for use cases (button-based)
|
||||
const handleUseCaseToggle = (value: UseCase) => {
|
||||
const currentUseCases = surveyData.main_use_cases || [];
|
||||
const isSelected = currentUseCases.includes(value);
|
||||
|
||||
let newUseCases;
|
||||
if (isSelected) {
|
||||
// Remove if already selected
|
||||
newUseCases = currentUseCases.filter(useCase => useCase !== value);
|
||||
} else {
|
||||
// Add if not selected
|
||||
newUseCases = [...currentUseCases, value];
|
||||
}
|
||||
|
||||
handleSurveyDataChange('main_use_cases', newUseCases);
|
||||
};
|
||||
|
||||
const onPressEnter = () => {
|
||||
onEnter();
|
||||
};
|
||||
|
||||
const organizationTypeOptions: { value: OrganizationType; label: string }[] = [
|
||||
{ value: 'freelancer', label: t('organizationTypeFreelancer') },
|
||||
{ value: 'startup', label: t('organizationTypeStartup') },
|
||||
{ value: 'small_medium_business', label: t('organizationTypeSmallMediumBusiness') },
|
||||
{ value: 'agency', label: t('organizationTypeAgency') },
|
||||
{ value: 'enterprise', label: t('organizationTypeEnterprise') },
|
||||
{ value: 'other', label: t('organizationTypeOther') },
|
||||
|
||||
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 }[] = [
|
||||
{ value: 'founder_ceo', label: t('userRoleFounderCeo') },
|
||||
{ value: 'project_manager', label: t('userRoleProjectManager') },
|
||||
{ value: 'software_developer', label: t('userRoleSoftwareDeveloper') },
|
||||
{ value: 'designer', label: t('userRoleDesigner') },
|
||||
{ value: 'operations', label: t('userRoleOperations') },
|
||||
{ value: 'other', label: t('userRoleOther') },
|
||||
];
|
||||
|
||||
const useCaseOptions: { value: UseCase; label: string }[] = [
|
||||
{ value: 'task_management', label: t('mainUseCasesTaskManagement') },
|
||||
{ value: 'team_collaboration', label: t('mainUseCasesTeamCollaboration') },
|
||||
{ value: 'resource_planning', label: t('mainUseCasesResourcePlanning') },
|
||||
{ value: 'client_communication', label: t('mainUseCasesClientCommunication') },
|
||||
{ value: 'time_tracking', label: t('mainUseCasesTimeTracking') },
|
||||
{ value: 'other', label: t('mainUseCasesOther') },
|
||||
];
|
||||
|
||||
const howHeardAboutOptions: { value: HowHeardAbout; label: string }[] = [
|
||||
{ value: 'google_search', label: t('howHeardAboutGoogleSearch') },
|
||||
{ value: 'twitter', label: t('howHeardAboutTwitter') },
|
||||
{ value: 'linkedin', label: t('howHeardAboutLinkedin') },
|
||||
{ value: 'friend_colleague', label: t('howHeardAboutFriendColleague') },
|
||||
{ value: 'blog_article', label: t('howHeardAboutBlogArticle') },
|
||||
{ value: 'other', label: t('howHeardAboutOther') },
|
||||
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 (
|
||||
<Form className="step-form" style={styles.form}>
|
||||
<Form.Item className="mb-6">
|
||||
<Title level={2} className="mb-2 text-2xl" style={{ color: token?.colorText }}>
|
||||
{t('surveyStepTitle')}
|
||||
<div className="w-full">
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
Tell us about yourself
|
||||
</Title>
|
||||
<p className="mb-4 text-sm" style={{ color: token?.colorTextSecondary }}>
|
||||
{t('surveyStepLabel')}
|
||||
</p>
|
||||
</Form.Item>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
Help us personalize your experience
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
{/* Organization Type */}
|
||||
<Form.Item
|
||||
label={<span className="font-medium text-sm" style={{ color: token?.colorText }}>{t('organizationType')}</span>}
|
||||
className="mb-6"
|
||||
>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{organizationTypeOptions.map((option) => (
|
||||
<Button
|
||||
key={option.value}
|
||||
onClick={() => handleSurveyDataChange('organization_type', option.value)}
|
||||
type={getButtonType(surveyData.organization_type === option.value)}
|
||||
size="small"
|
||||
className="h-8"
|
||||
>
|
||||
{option.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
{/* User Role */}
|
||||
<Form.Item
|
||||
label={<span className="font-medium text-sm" style={{ color: token?.colorText }}>{t('userRole')}</span>}
|
||||
className="mb-6"
|
||||
>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{userRoleOptions.map((option) => (
|
||||
<Button
|
||||
key={option.value}
|
||||
onClick={() => handleSurveyDataChange('user_role', option.value)}
|
||||
type={getButtonType(surveyData.user_role === option.value)}
|
||||
size="small"
|
||||
className="h-8"
|
||||
>
|
||||
{option.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
{/* Main Use Cases */}
|
||||
<Form.Item
|
||||
label={<span className="font-medium text-sm" style={{ color: token?.colorText }}>{t('mainUseCases')}</span>}
|
||||
className="mb-6"
|
||||
>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{useCaseOptions.map((option) => {
|
||||
const isSelected = (surveyData.main_use_cases || []).includes(option.value);
|
||||
<Form.Item className="mb-8">
|
||||
<label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
|
||||
What best describes your organization?
|
||||
</label>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{organizationTypeOptions.map((option) => {
|
||||
const isSelected = surveyData.organization_type === option.value;
|
||||
return (
|
||||
<Button
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => handleUseCaseToggle(option.value)}
|
||||
type={getButtonType(isSelected)}
|
||||
size="small"
|
||||
className="h-8"
|
||||
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'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: isSelected ? undefined : token?.colorBgContainer,
|
||||
borderColor: isSelected ? undefined : token?.colorBorder,
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</Button>
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-2xl">{option.icon}</span>
|
||||
<span
|
||||
className={`font-medium ${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 }}>
|
||||
What's your role?
|
||||
</label>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{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'
|
||||
}
|
||||
`}
|
||||
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>
|
||||
<span
|
||||
className={`font-medium ${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' },
|
||||
];
|
||||
|
||||
// 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];
|
||||
}
|
||||
|
||||
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 }}>
|
||||
What are your main needs?
|
||||
</Title>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
Select all that apply to help us set up your workspace
|
||||
</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?
|
||||
</label>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{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'
|
||||
}
|
||||
`}
|
||||
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">
|
||||
<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>
|
||||
</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} selected
|
||||
</p>
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
{/* Previous Tools */}
|
||||
<Form.Item
|
||||
label={<span className="font-medium text-sm" style={{ color: token?.colorText }}>{t('previousTools')}</span>}
|
||||
className="mb-6"
|
||||
>
|
||||
<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)
|
||||
</label>
|
||||
<TextArea
|
||||
placeholder={t('previousToolsPlaceholder')}
|
||||
placeholder="e.g., Asana, Trello, Jira, Monday.com, etc."
|
||||
value={surveyData.previous_tools || ''}
|
||||
onChange={(e) => handleSurveyDataChange('previous_tools', e.target.value)}
|
||||
autoSize={{ minRows: 2, maxRows: 3 }}
|
||||
className="mt-2 text-sm"
|
||||
autoSize={{ minRows: 3, maxRows: 5 }}
|
||||
className="text-base"
|
||||
style={{
|
||||
backgroundColor: token?.colorBgContainer,
|
||||
borderColor: token?.colorBorder,
|
||||
@@ -185,26 +267,212 @@ export const SurveyStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Page 3: Discovery
|
||||
const DiscoveryPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, handleSurveyDataChange }) => {
|
||||
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 }}>
|
||||
One last thing...
|
||||
</Title>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
Help us understand how you discovered Worklenz
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
{/* How Heard About */}
|
||||
<Form.Item
|
||||
label={<span className="font-medium text-sm" style={{ color: token?.colorText }}>{t('howHeardAbout')}</span>}
|
||||
className="mb-2"
|
||||
>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{howHeardAboutOptions.map((option) => (
|
||||
<Button
|
||||
key={option.value}
|
||||
onClick={() => handleSurveyDataChange('how_heard_about', option.value)}
|
||||
type={getButtonType(surveyData.how_heard_about === option.value)}
|
||||
size="small"
|
||||
className="h-8"
|
||||
>
|
||||
{option.label}
|
||||
</Button>
|
||||
))}
|
||||
<Form.Item className="mb-8">
|
||||
<label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
|
||||
How did you hear about us?
|
||||
</label>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{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'
|
||||
}
|
||||
`}
|
||||
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>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
{/* Success Message */}
|
||||
<div
|
||||
className="mt-12 p-6 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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const SurveyStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token }) => {
|
||||
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 }));
|
||||
};
|
||||
|
||||
// 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);
|
||||
|
||||
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]);
|
||||
|
||||
// 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];
|
||||
}
|
||||
|
||||
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 '';
|
||||
}
|
||||
};
|
||||
|
||||
// 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}
|
||||
/>
|
||||
];
|
||||
|
||||
// Check if current step is valid for main Continue button
|
||||
React.useEffect(() => {
|
||||
// Reset sub-step when entering survey step
|
||||
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,34 +1,39 @@
|
||||
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);
|
||||
const newIndex = tasks.length;
|
||||
inputRefs.current[newIndex]?.focus();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const removeTask = (id: number) => {
|
||||
@@ -44,91 +49,124 @@ export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode }) => {
|
||||
);
|
||||
};
|
||||
|
||||
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' }}>
|
||||
{t('tasksStepTitle')}
|
||||
<div className="w-full tasks-step">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
Add your first tasks
|
||||
</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 }}>
|
||||
Break down "{projectName}" into actionable tasks to get started
|
||||
</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={`Task ${index + 1} - e.g., What needs to be done?`}
|
||||
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>
|
||||
|
||||
{/* 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>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
@@ -19,6 +19,7 @@ interface AccountSetupState {
|
||||
teamMembers: Email[];
|
||||
currentStep: number;
|
||||
surveyData: IAccountSetupSurveyData;
|
||||
surveySubStep: number;
|
||||
}
|
||||
|
||||
const initialState: AccountSetupState = {
|
||||
@@ -29,6 +30,7 @@ const initialState: AccountSetupState = {
|
||||
teamMembers: [{ id: 0, value: '' }],
|
||||
currentStep: 0,
|
||||
surveyData: {},
|
||||
surveySubStep: 0,
|
||||
};
|
||||
|
||||
const accountSetupSlice = createSlice({
|
||||
@@ -56,6 +58,9 @@ const accountSetupSlice = createSlice({
|
||||
setSurveyData: (state, action: PayloadAction<Partial<IAccountSetupSurveyData>>) => {
|
||||
state.surveyData = { ...state.surveyData, ...action.payload };
|
||||
},
|
||||
setSurveySubStep: (state, action: PayloadAction<number>) => {
|
||||
state.surveySubStep = action.payload;
|
||||
},
|
||||
resetAccountSetup: () => initialState,
|
||||
},
|
||||
});
|
||||
@@ -68,6 +73,7 @@ export const {
|
||||
setTeamMembers,
|
||||
setCurrentStep,
|
||||
setSurveyData,
|
||||
setSurveySubStep,
|
||||
resetAccountSetup,
|
||||
} = accountSetupSlice.actions;
|
||||
|
||||
|
||||
@@ -219,4 +219,205 @@
|
||||
/* Smooth transitions for theme switching */
|
||||
* {
|
||||
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Survey step transitions */
|
||||
.survey-page-transition {
|
||||
animation: fadeInUp 0.4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Survey option hover effects */
|
||||
.survey-option-card {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.survey-option-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Progress bar animation */
|
||||
.ant-progress-line {
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
/* Survey button animations */
|
||||
.survey-nav-button {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.survey-nav-button:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Project step enhancements */
|
||||
.project-suggestion-button {
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.project-suggestion-button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.project-suggestion-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.template-preview-card {
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.template-preview-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.template-preview-card.selected {
|
||||
box-shadow: 0 4px 20px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Enhanced form styling for project step */
|
||||
.project-step .ant-input-affix-wrapper {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.project-step .ant-input-affix-wrapper:focus-within {
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
|
||||
}
|
||||
|
||||
.project-step .ant-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.project-step .ant-card:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* Organization step enhancements */
|
||||
.organization-step .ant-input-affix-wrapper {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.organization-step .ant-input-affix-wrapper:focus-within {
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.organization-step .ant-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.organization-step .ant-card:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.organization-suggestion-button {
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.organization-suggestion-button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.organization-suggestion-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Character counter styling */
|
||||
.organization-step .character-counter {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.organization-step .character-counter.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Naming tips hover effect */
|
||||
.organization-step .naming-tip {
|
||||
transition: all 0.2s ease;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.organization-step .naming-tip:hover {
|
||||
background-color: rgba(24, 144, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Tasks step enhancements */
|
||||
.tasks-step .task-item-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tasks-step .task-item-card:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.tasks-step .task-input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tasks-step .task-input:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.task-suggestion-button {
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.task-suggestion-button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.task-suggestion-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Members step enhancements */
|
||||
.members-step .member-item-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.members-step .member-item-card:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.members-step .member-input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.members-step .member-input:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.email-suggestion-button {
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.email-suggestion-button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.email-suggestion-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
@@ -2,10 +2,11 @@ import React, { useEffect } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Space, Steps, Button, Typography, theme } from '@/shared/antd-imports';
|
||||
import { Space, Steps, Button, Typography, theme, Dropdown, MenuProps } from '@/shared/antd-imports';
|
||||
import { GlobalOutlined } from '@/shared/antd-imports';
|
||||
|
||||
import logger from '@/utils/errorLogger';
|
||||
import { setCurrentStep } from '@/features/account-setup/account-setup.slice';
|
||||
import { setCurrentStep, setSurveySubStep } from '@/features/account-setup/account-setup.slice';
|
||||
import { OrganizationStep } from '@/components/account-setup/organization-step';
|
||||
import { ProjectStep } from '@/components/account-setup/project-step';
|
||||
import { TasksStep } from '@/components/account-setup/tasks-step';
|
||||
@@ -34,6 +35,7 @@ import { IAccountSetupRequest } from '@/types/project-templates/project-template
|
||||
import { profileSettingsApiService } from '@/api/settings/profile/profile-settings.api.service';
|
||||
import { surveyApiService } from '@/api/survey/survey.api.service';
|
||||
import { ISurveySubmissionRequest, ISurveyAnswer } from '@/types/account-setup/survey.types';
|
||||
import { setLanguage } from '@/features/i18n/localesSlice';
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
@@ -62,14 +64,15 @@ const getAccountSetupStyles = (token: any) => ({
|
||||
|
||||
const AccountSetup: React.FC = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const { t } = useTranslation('account-setup');
|
||||
const { t, i18n } = useTranslation('account-setup');
|
||||
useDocumentTitle(t('setupYourAccount', 'Account Setup'));
|
||||
const navigate = useNavigate();
|
||||
const { trackMixpanelEvent } = useMixpanelTracking();
|
||||
const { token } = theme.useToken();
|
||||
|
||||
const { currentStep, organizationName, projectName, templateId, tasks, teamMembers, surveyData } =
|
||||
const { currentStep, organizationName, projectName, templateId, tasks, teamMembers, surveyData, surveySubStep } =
|
||||
useSelector((state: RootState) => state.accountSetupReducer);
|
||||
const { language } = useSelector((state: RootState) => state.localesReducer);
|
||||
const userDetails = getUserSession();
|
||||
const themeMode = useSelector((state: RootState) => state.themeReducer.mode);
|
||||
|
||||
@@ -266,9 +269,17 @@ const AccountSetup: React.FC = () => {
|
||||
case 0:
|
||||
return !organizationName?.trim();
|
||||
case 1:
|
||||
// Survey step - no required fields, can always continue
|
||||
// Survey step - check current sub-step requirements
|
||||
if (surveySubStep === 0) {
|
||||
return !(surveyData.organization_type && surveyData.user_role);
|
||||
} else if (surveySubStep === 1) {
|
||||
return !(surveyData.main_use_cases && surveyData.main_use_cases.length > 0);
|
||||
} else if (surveySubStep === 2) {
|
||||
return !surveyData.how_heard_about;
|
||||
}
|
||||
return false;
|
||||
case 2:
|
||||
// Project step - either project name OR template must be provided
|
||||
return !projectName?.trim() && !templateId;
|
||||
case 3:
|
||||
return tasks.length === 0 || tasks.every(task => !task.value?.trim());
|
||||
@@ -368,11 +379,17 @@ const AccountSetup: React.FC = () => {
|
||||
|
||||
const nextStep = async () => {
|
||||
if (currentStep === 1) {
|
||||
// Save survey data when moving from survey step
|
||||
await saveSurveyData();
|
||||
}
|
||||
|
||||
if (currentStep === 4) {
|
||||
// Handle survey sub-step navigation
|
||||
if (surveySubStep < 2) {
|
||||
// Move to next survey sub-step
|
||||
dispatch(setSurveySubStep(surveySubStep + 1));
|
||||
} else {
|
||||
// Survey completed, save data and move to next main step
|
||||
await saveSurveyData();
|
||||
dispatch(setCurrentStep(currentStep + 1));
|
||||
dispatch(setSurveySubStep(0)); // Reset for next time
|
||||
}
|
||||
} else if (currentStep === 4) {
|
||||
// Complete setup after members step
|
||||
completeAccountSetup();
|
||||
} else {
|
||||
@@ -380,11 +397,59 @@ const AccountSetup: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// Language switcher functionality
|
||||
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: '🇨🇳' }
|
||||
];
|
||||
|
||||
const handleLanguageChange = (languageKey: string) => {
|
||||
dispatch(setLanguage(languageKey));
|
||||
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];
|
||||
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen w-full flex flex-col items-center py-8 px-4"
|
||||
className="min-h-screen w-full flex flex-col items-center py-8 px-4 relative"
|
||||
style={{ backgroundColor: token.colorBgLayout }}
|
||||
>
|
||||
{/* Language Switcher - Top Right */}
|
||||
<div className="absolute top-6 right-6">
|
||||
<Dropdown
|
||||
menu={{ items: languageMenuItems }}
|
||||
placement="bottomRight"
|
||||
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>
|
||||
|
||||
{/* Logo */}
|
||||
<div className="mb-4">
|
||||
<img src={isDarkMode ? logoDark : logo} alt="Logo" width={235} height={50} />
|
||||
@@ -437,7 +502,19 @@ const AccountSetup: React.FC = () => {
|
||||
type="link"
|
||||
className="p-0 font-medium"
|
||||
style={{ color: token.colorTextSecondary }}
|
||||
onClick={() => dispatch(setCurrentStep(currentStep - 1))}
|
||||
onClick={() => {
|
||||
if (currentStep === 1 && surveySubStep > 0) {
|
||||
// Go back within survey sub-steps
|
||||
dispatch(setSurveySubStep(surveySubStep - 1));
|
||||
} else {
|
||||
// Go back to previous main step
|
||||
dispatch(setCurrentStep(currentStep - 1));
|
||||
if (currentStep === 2) {
|
||||
// When going back to survey from next step, go to last sub-step
|
||||
dispatch(setSurveySubStep(2));
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t('goBack')}
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user