feat(surveys): implement account setup survey functionality

- Added new database migration to create survey-related tables for storing questions and responses. - Developed SurveyController to handle fetching and submitting survey data. - Created survey API routes for account setup, including endpoints for retrieving the survey and submitting responses. - Implemented frontend components for displaying the survey and capturing user responses, integrating with Redux for state management. - Enhanced localization files to include survey-related text for multiple languages. - Added validation middleware for survey submissions to ensure data integrity.
2025-07-24 17:12:47 +05:30
parent 15ff69a031
commit fe7c15ced1
22 changed files with 1344 additions and 204 deletions
--- a/worklenz-frontend/src/pages/account-setup/account-setup.tsx
+++ b/worklenz-frontend/src/pages/account-setup/account-setup.tsx
@@ -2,13 +2,14 @@ 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 } from 'antd/es';
+import { Space, Steps, Button, Typography, theme } from '@/shared/antd-imports';

 import logger from '@/utils/errorLogger';
 import { setCurrentStep } 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';
+import { SurveyStep } from '@/components/account-setup/survey-step';
 import MembersStep from '@/components/account-setup/members-step';
 import {
  evt_account_setup_complete,
@@ -31,23 +32,104 @@ import { useAppDispatch } from '@/hooks/useAppDispatch';
 import './account-setup.css';
 import { IAccountSetupRequest } from '@/types/project-templates/project-templates.types';
 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';

 const { Title } = Typography;

+// Simplified styles for form components using Ant Design theme tokens
+const getAccountSetupStyles = (token: any) => ({
+  form: {
+    width: '100%',
+    maxWidth: '600px',
+  },
+  label: {
+    color: token.colorText,
+    fontWeight: 500,
+  },
+  buttonContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: '1rem',
+  },
+  drawerFooter: {
+    display: 'flex',
+    justifyContent: 'right',
+    padding: '10px 16px',
+  },
+});
+
 const AccountSetup: React.FC = () => {
  const dispatch = useAppDispatch();
  const { t } = 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 } =
+  const { currentStep, organizationName, projectName, templateId, tasks, teamMembers, surveyData } =
    useSelector((state: RootState) => state.accountSetupReducer);
  const userDetails = getUserSession();
  const themeMode = useSelector((state: RootState) => state.themeReducer.mode);
+  
+  const [surveyId, setSurveyId] = React.useState<string | null>(null);

  const isDarkMode = themeMode === 'dark';
-  const organizationNamePlaceholder = userDetails?.name ? `e.g. ${userDetails?.name}'s Team` : '';
+  // Helper to extract organization name from email or fallback to user name
+  function getOrganizationNamePlaceholder(userDetails: { email?: string; name?: string } | null): string {
+    if (!userDetails) return '';
+    const email = userDetails.email || '';
+    const name = userDetails.name || '';
+    if (email) {
+      const match = email.match(/^([^@]+)@([^@]+)$/);
+      if (match) {
+        const domain = match[2].toLowerCase();
+        // List of common public email providers
+        const publicProviders = [
+          'gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com', 'icloud.com', 'aol.com', 'protonmail.com', 'zoho.com', 'gmx.com', 'mail.com', 'yandex.com', 'msn.com', 'live.com', 'me.com', 'comcast.net', 'rediffmail.com', 'ymail.com', 'rocketmail.com', 'inbox.com', 'mail.ru', 'qq.com', 'naver.com', '163.com', '126.com', 'sina.com', 'yeah.net', 'googlemail.com', 'fastmail.com', 'hushmail.com', 'tutanota.com', 'pm.me', 'mailbox.org', 'proton.me'
+        ];
+        if (!publicProviders.includes(domain)) {
+          // Use the first part of the domain (before the first dot)
+          const org = domain.split('.')[0];
+          if (org && org.length > 1) {
+            return `e.g. ${org.charAt(0).toUpperCase() + org.slice(1)} Team`;
+          }
+        }
+      }
+    }
+    // Fallback to user name
+    return name ? `e.g. ${name}'s Team` : '';
+  }
+
+  const organizationNamePlaceholder = getOrganizationNamePlaceholder(userDetails);
+
+  // Helper to extract organization name from email or fallback to user name
+  function getOrganizationNameInitialValue(userDetails: { email?: string; name?: string } | null): string {
+    if (!userDetails) return '';
+    const email = userDetails.email || '';
+    const name = userDetails.name || '';
+    if (email) {
+      const match = email.match(/^([^@]+)@([^@]+)$/);
+      if (match) {
+        const domain = match[2].toLowerCase();
+        const publicProviders = [
+          'gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com', 'icloud.com', 'aol.com', 'protonmail.com', 'zoho.com', 'gmx.com', 'mail.com', 'yandex.com', 'msn.com', 'live.com', 'me.com', 'comcast.net', 'rediffmail.com', 'ymail.com', 'rocketmail.com', 'inbox.com', 'mail.ru', 'qq.com', 'naver.com', '163.com', '126.com', 'sina.com', 'yeah.net', 'googlemail.com', 'fastmail.com', 'hushmail.com', 'tutanota.com', 'pm.me', 'mailbox.org', 'proton.me'
+        ];
+        if (!publicProviders.includes(domain)) {
+          const org = domain.split('.')[0];
+          if (org && org.length > 1) {
+            return org.charAt(0).toUpperCase() + org.slice(1);
+          }
+        }
+      }
+    }
+    return name || '';
+  }
+
+  const organizationNameInitialValue = getOrganizationNameInitialValue(userDetails);
+
+  const styles = getAccountSetupStyles(token);

  useEffect(() => {
    trackMixpanelEvent(evt_account_setup_visit);
@@ -65,88 +147,25 @@ const AccountSetup: React.FC = () => {
        logger.error('Failed to verify authentication status', error);
      }
    };
+    
+    const loadSurvey = async () => {
+      try {
+        const response = await surveyApiService.getAccountSetupSurvey();
+        if (response.done && response.body) {
+          setSurveyId(response.body.id);
+        } else {
+          logger.error('Survey not found or inactive (warn replaced with error)');
+        }
+      } catch (error) {
+        logger.error('Failed to load survey', error);
+        // Continue without survey - don't block account setup
+      }
+    };
+    
    void verifyAuthStatus();
+    void loadSurvey();
  }, [dispatch, navigate, trackMixpanelEvent]);

-  const calculateHeight = () => {
-    if (currentStep === 2) {
-      return tasks.length * 105;
-    }
-
-    if (currentStep === 3) {
-      return teamMembers.length * 105;
-    }
-    return 'min-content';
-  };
-
-  const styles = {
-    form: {
-      width: '600px',
-      paddingBottom: '1rem',
-      marginTop: '3rem',
-      height: '100%',
-      overflow: 'hidden',
-    },
-    label: {
-      color: isDarkMode ? '' : '#00000073',
-      fontWeight: 500,
-    },
-    buttonContainer: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      marginTop: '1rem',
-    },
-    drawerFooter: {
-      display: 'flex',
-      justifyContent: 'right',
-      padding: '10px 16px',
-    },
-    container: {
-      height: '100vh',
-      width: '100vw',
-      display: 'flex',
-      flexDirection: 'column' as const,
-      alignItems: 'center',
-      padding: '3rem 0',
-      backgroundColor: isDarkMode ? 'black' : '#FAFAFA',
-    },
-    contentContainer: {
-      backgroundColor: isDarkMode ? '#141414' : 'white',
-      marginTop: '1.5rem',
-      paddingTop: '3rem',
-      margin: '1.5rem auto 0',
-      width: '100%',
-      maxWidth: '66.66667%',
-      minHeight: 'fit-content',
-      display: 'flex',
-      flexDirection: 'column' as const,
-    },
-    space: {
-      display: 'flex',
-      flexDirection: 'column' as const,
-      alignItems: 'center',
-      gap: '0',
-      flexGrow: 1,
-      width: '100%',
-      minHeight: 'fit-content',
-    },
-    steps: {
-      margin: '1rem 0',
-      width: '600px',
-    },
-    stepContent: {
-      flexGrow: 1,
-      width: '600px',
-      minHeight: calculateHeight(),
-      overflow: 'visible',
-    },
-    actionButtons: {
-      flexGrow: 1,
-      width: '600px',
-      marginBottom: '1rem',
-    },
-  };

  const completeAccountSetup = async (skip = false) => {
    try {
@@ -159,6 +178,13 @@ const AccountSetup: React.FC = () => {
          : teamMembers
              .map(teamMember => sanitizeInput(teamMember.value.trim()))
              .filter(email => validateEmail(email)),
+        survey_data: {
+          organization_type: surveyData.organization_type,
+          user_role: surveyData.user_role,
+          main_use_cases: surveyData.main_use_cases,
+          previous_tools: surveyData.previous_tools,
+          how_heard_about: surveyData.how_heard_about,
+        },
      };
      const res = await profileSettingsApiService.setupAccount(model);
      if (res.done && res.body.id) {
@@ -190,6 +216,20 @@ const AccountSetup: React.FC = () => {
          onEnter={() => dispatch(setCurrentStep(currentStep + 1))}
          styles={styles}
          organizationNamePlaceholder={organizationNamePlaceholder}
+          organizationNameInitialValue={organizationNameInitialValue}
+          isDarkMode={isDarkMode}
+          token={token}
+        />
+      ),
+    },
+    {
+      title: '',
+      content: (
+        <SurveyStep
+          onEnter={() => dispatch(setCurrentStep(currentStep + 1))}
+          styles={styles}
+          isDarkMode={isDarkMode}
+          token={token}
        />
      ),
    },
@@ -200,6 +240,7 @@ const AccountSetup: React.FC = () => {
          onEnter={() => dispatch(setCurrentStep(currentStep + 1))}
          styles={styles}
          isDarkMode={isDarkMode}
+          token={token}
        />
      ),
    },
@@ -210,12 +251,13 @@ const AccountSetup: React.FC = () => {
          onEnter={() => dispatch(setCurrentStep(currentStep + 1))}
          styles={styles}
          isDarkMode={isDarkMode}
+          token={token}
        />
      ),
    },
    {
      title: '',
-      content: <MembersStep isDarkMode={isDarkMode} styles={styles} />,
+      content: <MembersStep isDarkMode={isDarkMode} styles={styles} token={token} />,
    },
  ];

@@ -224,10 +266,13 @@ const AccountSetup: React.FC = () => {
      case 0:
        return !organizationName?.trim();
      case 1:
-        return !projectName?.trim() && !templateId;
+        // Survey step - no required fields, can always continue
+        return false;
      case 2:
-        return tasks.length === 0 || tasks.every(task => !task.value?.trim());
+        return !projectName?.trim() && !templateId;
      case 3:
+        return tasks.length === 0 || tasks.every(task => !task.value?.trim());
+      case 4:
        return (
          teamMembers.length > 0 && !teamMembers.some(member => validateEmail(member.value?.trim()))
        );
@@ -236,8 +281,99 @@ const AccountSetup: React.FC = () => {
    }
  };

-  const nextStep = () => {
-    if (currentStep === 3) {
+  const saveSurveyData = async () => {
+    if (!surveyId || !surveyData) {
+      logger.error('Skipping survey save - no survey ID or data (info replaced with error)');
+      return;
+    }
+
+    try {
+      const answers: ISurveyAnswer[] = [];
+      
+      // Get the survey questions to map data properly
+      const surveyResponse = await surveyApiService.getAccountSetupSurvey();
+      if (!surveyResponse.done || !surveyResponse.body?.questions) {
+        logger.error('Could not retrieve survey questions for data mapping (warn replaced with error)');
+        return;
+      }
+
+      const questions = surveyResponse.body.questions;
+
+      // Map survey data to answers based on question keys
+      questions.forEach(question => {
+        switch (question.question_key) {
+          case 'organization_type':
+            if (surveyData.organization_type) {
+              answers.push({
+                question_id: question.id,
+                answer_text: surveyData.organization_type
+              });
+            }
+            break;
+          case 'user_role':
+            if (surveyData.user_role) {
+              answers.push({
+                question_id: question.id,
+                answer_text: surveyData.user_role
+              });
+            }
+            break;
+          case 'main_use_cases':
+            if (surveyData.main_use_cases && surveyData.main_use_cases.length > 0) {
+              answers.push({
+                question_id: question.id,
+                answer_json: surveyData.main_use_cases
+              });
+            }
+            break;
+          case 'previous_tools':
+            if (surveyData.previous_tools) {
+              answers.push({
+                question_id: question.id,
+                answer_text: surveyData.previous_tools
+              });
+            }
+            break;
+          case 'how_heard_about':
+            if (surveyData.how_heard_about) {
+              answers.push({
+                question_id: question.id,
+                answer_text: surveyData.how_heard_about
+              });
+            }
+            break;
+        }
+      });
+
+      if (answers.length > 0) {
+        const submissionData: ISurveySubmissionRequest = {
+          survey_id: surveyId,
+          answers
+        };
+        
+        const result = await surveyApiService.submitSurveyResponse(submissionData);
+        if (result.done) {
+          logger.error('Survey data saved successfully (info replaced with error)');
+        } else {
+          logger.error('Survey submission returned unsuccessful response (warn replaced with error)');
+        }
+      } else {
+        logger.error('No survey answers to save (info replaced with error)');
+      }
+    } catch (error) {
+      logger.error('Failed to save survey data', error);
+      // Don't block account setup flow if survey fails
+    }
+  };
+
+  const nextStep = async () => {
+    if (currentStep === 1) {
+      // Save survey data when moving from survey step
+      await saveSurveyData();
+    }
+    
+    if (currentStep === 4) {
+      // Complete setup after members step
      completeAccountSetup();
    } else {
      dispatch(setCurrentStep(currentStep + 1));
@@ -245,46 +381,71 @@ const AccountSetup: React.FC = () => {
  };

  return (
-    <div style={styles.container}>
-      <div>
+    <div 
+      className="min-h-screen w-full flex flex-col items-center py-8 px-4"
+      style={{ backgroundColor: token.colorBgLayout }}
+    >
+      {/* Logo */}
+      <div className="mb-4">
        <img src={isDarkMode ? logoDark : logo} alt="Logo" width={235} height={50} />
      </div>
-      <Title level={5} style={{ textAlign: 'center', margin: '4px 0 24px' }}>
+      
+      {/* Title */}
+      <Title 
+        level={3} 
+        className="text-center mb-6 font-semibold"
+        style={{ color: token.colorText }}
+      >
        {t('setupYourAccount')}
      </Title>
-      <div style={styles.contentContainer}>
-        <Space className={isDarkMode ? 'dark-mode' : ''} style={styles.space} direction="vertical">
-          <Steps
-            className={isContinueDisabled() ? 'step' : 'progress-steps'}
-            current={currentStep}
-            items={steps}
-            style={styles.steps}
-          />
-          <div className="step-content" style={styles.stepContent}>
-            {steps[currentStep].content}
+      
+      {/* Content Container */}
+      <div 
+        className="w-full max-w-4xl rounded-lg shadow-lg mt-6 p-8"
+        style={{
+          backgroundColor: token.colorBgContainer,
+          borderColor: token.colorBorder,
+          border: `1px solid ${token.colorBorder}`,
+          boxShadow: token.boxShadowTertiary
+        }}
+      >
+        <div className="flex flex-col items-center space-y-6 w-full">
+          {/* Steps */}
+          <div className="w-full max-w-2xl">
+            <Steps
+              className={`${isContinueDisabled() ? 'step' : 'progress-steps'} ${isDarkMode ? 'dark-mode' : 'light-mode'}`}
+              current={currentStep}
+              items={steps}
+            />
          </div>
-          <div style={styles.actionButtons} className="setup-action-buttons">
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: currentStep !== 0 ? 'space-between' : 'flex-end',
-              }}
-            >
+          
+          {/* Step Content */}
+          <div className="w-full max-w-2xl flex flex-col items-center min-h-fit">
+            <div className="step-content w-full">
+              {steps[currentStep].content}
+            </div>
+          </div>
+          
+          {/* Action Buttons */}
+          <div className="w-full max-w-2xl mt-8">
+            <div className={`flex ${
+              currentStep !== 0 ? 'justify-between' : 'justify-end'
+            } items-center`}>
              {currentStep !== 0 && (
-                <div>
+                <div className="flex flex-col space-y-2">
                  <Button
-                    style={{ padding: 0 }}
                    type="link"
-                    className="my-7"
+                    className="p-0 font-medium"
+                    style={{ color: token.colorTextSecondary }}
                    onClick={() => dispatch(setCurrentStep(currentStep - 1))}
                  >
                    {t('goBack')}
                  </Button>
-                  {currentStep === 3 && (
+                  {currentStep === 4 && (
                    <Button
-                      style={{ color: isDarkMode ? '' : '#00000073', fontWeight: 500 }}
                      type="link"
-                      className="my-7"
+                      className="p-0 font-medium"
+                      style={{ color: token.colorTextTertiary }}
                      onClick={() => completeAccountSetup(true)}
                    >
                      {t('skipForNow')}
@@ -296,14 +457,14 @@ const AccountSetup: React.FC = () => {
                type="primary"
                htmlType="submit"
                disabled={isContinueDisabled()}
-                className="mt-7 mb-7"
+                className="min-h-10 font-medium px-8"
                onClick={nextStep}
              >
                {t('continue')}
              </Button>
            </div>
          </div>
-        </Space>
+        </div>
      </div>
    </div>
  );