Skip to main content

Onboarding Constants

Employee and admin onboarding workflow constants, navigation configurations, validation rules, and subscription plan definitions used in the WorkPayCore frontend application.

Overview​

The onboarding constants define the structured workflow for both employee and admin onboarding processes, including step-by-step navigation, validation requirements, password security rules, and available subscription plans with their feature sets.

Onboarding Navigation Constants​

employeeOnboardingPagination​

Step-by-step navigation configuration for employee self-onboarding workflow.

export const employeeOnboardingPagination = [
  { id: 0, url: '/employee-onboarding/personal-details' },
  { id: 1, url: '/employee-onboarding/statutory-details' },
  { id: 2, url: '/employee-onboarding/payment-details' },
  { id: 3, url: '/employee-onboarding/documents' },
  { id: 4, url: '/employee-onboarding/next-of-kin' },
  { id: 5, url: '/employee-onboarding/emergency-contact' },
  { id: 6, url: '/employee-onboarding/assets' },
  { id: 7, url: '/employee-onboarding/legal' },
];

Onboarding Steps:

  1. Personal Details: Basic employee information
  2. Statutory Details: Tax and compliance information
  3. Payment Details: Salary and payment method setup
  4. Documents: Required document uploads
  5. Next of Kin: Emergency contact designation
  6. Emergency Contact: Additional emergency contacts
  7. Assets: Company asset assignment
  8. Legal: Terms and legal agreements

adminOnboardingPagination​

Step-by-step navigation configuration for admin-managed employee onboarding.

export const adminOnboardingPagination = [
  { id: 0, url: '/admin-onboarding/personal-details' },
  { id: 1, url: '/admin-onboarding/employment-details' },
  { id: 2, url: '/admin-onboarding/salary-details' },
  { id: 3, url: '/admin-onboarding/payment-details' },
  { id: 4, url: '/admin-onboarding/documents' },
  { id: 5, url: '/admin-onboarding/next-of-kin' },
  { id: 6, url: '/admin-onboarding/emergency-contact' },
  { id: 7, url: '/admin-onboarding/issue-assets' },
  { id: 8, url: '/admin-onboarding/legal' },
];

Admin Onboarding Steps:

  1. Personal Details: Employee basic information
  2. Employment Details: Job title, department, reporting structure
  3. Salary Details: Compensation and benefits setup
  4. Payment Details: Payment method and bank details
  5. Documents: Document collection and verification
  6. Next of Kin: Emergency contact setup
  7. Emergency Contact: Additional emergency contacts
  8. Issue Assets: Asset assignment and tracking
  9. Legal: Legal compliance and agreements

Workflow Configuration Constants​

onboardingWorkflowDefaults​

Default checkbox states for onboarding section enablement in workflow creation.

export const onboardingWorkflowDefaults = {
  0: false, // Personal Details
  1: false, // Employment/Statutory Details
  2: false, // Salary/Payment Details
  3: false, // Payment Details (admin only)
  4: false, // Documents
  5: false, // Next of Kin
  6: false, // Emergency Contact
  7: false, // Assets
  8: false, // Legal
};

Usage:

  • Workflow configuration interface
  • Custom onboarding process creation
  • Section enablement control

Password Validation Constants​

passwordValidationMessages​

Password strength validation criteria and user-friendly messages.

export const passwordValidationMessages = [
  { id: 1, type: 'nine', msg: 'At least 9 characters' },
  { id: 2, type: 'uppercase', msg: '1 uppercase letter' },
  { id: 3, type: 'lowercase', msg: '1 lowercase letter' },
  { id: 4, type: 'number', msg: '1 number' },
  { id: 5, type: 'symbol', msg: '1 symbol' },
];

Password Requirements:

  • Length: Minimum 9 characters for security
  • Uppercase: At least one capital letter
  • Lowercase: At least one lowercase letter
  • Numeric: At least one number
  • Symbol: At least one special character

Subscription Plans Constants​

plans​

Available subscription plans with their included features.

export const plans = {
  launch: [...defaultPlan],
  grow: [...defaultPlan, ...additionalGrowFeatures],
  enterprise: [...defaultPlan, ...additionalGrowFeatures],
};

Default Plan Features (Launch):

const defaultPlan = [
  'Payroll 360',
  'Employee Management',
  'Salary Disbursement',
  'Employee Benefits Management',
  'Statutory Payments',
  'Self-Service Portal (Web and App)',
  'Custom User Permissions',
  'Reporting and Analytics',
  'Expense Management',
  'Savings and Loans management',
  'Group View',
  'Integrations with Accounting Software',
];

Additional Grow/Enterprise Features:

const additionalGrowFeatures = [
  'Document Management',
  'Employee Asset Management',
  'Leave management',
];

EOR Features Constants​

eorFeatures​

Employer of Record (EOR) service features for international employment.

export const eorFeatures = [
  { id: 1, name: 'Hire Contractors' },
  { id: 2, name: 'Automate onboarding' },
  { id: 3, name: 'Manage payroll across Africa' },
  { id: 4, name: 'Access dashboards and detailed reports' },
];

EOR Capabilities:

  • Contractor Management: Independent contractor hiring and management
  • Automated Onboarding: Streamlined onboarding processes
  • Regional Payroll: Multi-country payroll across African markets
  • Analytics: Comprehensive reporting and insights

Add-on Services Constants​

addonTexts​

Additional service offerings with descriptions for upselling and expansion.

export const addonTexts = [
  {
    id: 1,
    title: 'Time and Attendance',
    desc: 'Effortlessly track and manage employee work hours, ensure accurate timekeeping, monitor attendance trends, and streamline payroll processes.',
  },
  {
    id: 2,
    title: 'Recruitment',
    desc: 'Source, screen, manage candidates and experience a more efficient and effective recruitment process with our recruitment feature.',
  },
  {
    id: 3,
    title: 'Performance Management',
    desc: "Elevate your team's productivity and growth with data-driven insights and streamlined performance management by setting goals, tracking progress, and more—all in one place.",
  },
];

Available Add-ons:

  • Time and Attendance: Comprehensive time tracking and attendance management
  • Recruitment: Full recruitment lifecycle management
  • Performance Management: Goal setting, tracking, and performance evaluation

Usage Examples​

Onboarding Navigation Helper​

import {
  employeeOnboardingPagination,
  adminOnboardingPagination,
} from '@/utils/constants/onboarding';

const OnboardingNavigator = {
  getStepInfo: (stepId, isAdmin = false) => {
    const pagination = isAdmin
      ? adminOnboardingPagination
      : employeeOnboardingPagination;
    return pagination.find(step => step.id === stepId);
  },

  getNextStep: (currentStepId, isAdmin = false) => {
    const pagination = isAdmin
      ? adminOnboardingPagination
      : employeeOnboardingPagination;
    const nextStepId = currentStepId + 1;
    return pagination.find(step => step.id === nextStepId);
  },

  getPreviousStep: (currentStepId, isAdmin = false) => {
    const pagination = isAdmin
      ? adminOnboardingPagination
      : employeeOnboardingPagination;
    const prevStepId = currentStepId - 1;
    return pagination.find(step => step.id === prevStepId);
  },

  getTotalSteps: (isAdmin = false) => {
    const pagination = isAdmin
      ? adminOnboardingPagination
      : employeeOnboardingPagination;
    return pagination.length;
  },

  getProgressPercentage: (currentStepId, isAdmin = false) => {
    const totalSteps = OnboardingNavigator.getTotalSteps(isAdmin);
    return ((currentStepId + 1) / totalSteps) * 100;
  },
};

// Usage
const currentStep = OnboardingNavigator.getStepInfo(2, false);
const progress = OnboardingNavigator.getProgressPercentage(2, false);
// Returns: { id: 2, url: '/employee-onboarding/payment-details' }, 37.5%

Password Validation Component​

import { passwordValidationMessages } from '@/utils/constants/onboarding';

const PasswordValidator = {
  validatePassword: password => {
    const validations = passwordValidationMessages.map(validation => {
      let isValid = false;

      switch (validation.type) {
        case 'nine':
          isValid = password.length >= 9;
          break;
        case 'uppercase':
          isValid = /[A-Z]/.test(password);
          break;
        case 'lowercase':
          isValid = /[a-z]/.test(password);
          break;
        case 'number':
          isValid = /\d/.test(password);
          break;
        case 'symbol':
          isValid = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);
          break;
      }

      return {
        ...validation,
        isValid,
      };
    });

    const allValid = validations.every(v => v.isValid);

    return {
      isValid: allValid,
      validations,
      strength: validations.filter(v => v.isValid).length,
    };
  },
};

const PasswordStrengthIndicator = ({ password }) => {
  const validation = PasswordValidator.validatePassword(password);

  return (
    <div className='password-strength'>
      <div className='strength-bar'>
        <div
          className={`strength-fill strength-${validation.strength}`}
          style={{ width: `${(validation.strength / 5) * 100}%` }}
        />
      </div>

      <ul className='validation-list'>
        {validation.validations.map(item => (
          <li key={item.id} className={item.isValid ? 'valid' : 'invalid'}>
            <span className='icon'>{item.isValid ? '✓' : '×'}</span>
            {item.msg}
          </li>
        ))}
      </ul>
    </div>
  );
};

Subscription Plan Selector​

import { plans } from '@/utils/constants/onboarding';

const SubscriptionPlanSelector = ({ selectedPlan, onPlanSelect }) => {
  const planDetails = {
    launch: {
      name: 'Launch',
      price: '$29/month',
      description: 'Perfect for small teams getting started',
      popular: false,
    },
    grow: {
      name: 'Grow',
      price: '$79/month',
      description: 'Ideal for growing businesses',
      popular: true,
    },
    enterprise: {
      name: 'Enterprise',
      price: 'Custom',
      description: 'Complete solution for large organizations',
      popular: false,
    },
  };

  return (
    <div className='subscription-plans'>
      {Object.entries(plans).map(([planKey, features]) => {
        const plan = planDetails[planKey];

        return (
          <div
            key={planKey}
            className={`plan-card ${
              selectedPlan === planKey ? 'selected' : ''
            } ${plan.popular ? 'popular' : ''}`}
            onClick={() => onPlanSelect(planKey)}
          >
            {plan.popular && <div className='popular-badge'>Most Popular</div>}

            <h3>{plan.name}</h3>
            <div className='price'>{plan.price}</div>
            <p className='description'>{plan.description}</p>

            <ul className='features-list'>
              {features.map((feature, index) => (
                <li key={index}>
                  <span className='checkmark'>✓</span>
                  {feature}
                </li>
              ))}
            </ul>

            <button
              className={`select-plan ${
                selectedPlan === planKey ? 'selected' : ''
              }`}
            >
              {selectedPlan === planKey ? 'Selected' : 'Select Plan'}
            </button>
          </div>
        );
      })}
    </div>
  );
};

Onboarding Workflow Builder​

import {
  onboardingWorkflowDefaults,
  employeeOnboardingPagination,
  adminOnboardingPagination,
} from '@/utils/constants/onboarding';

const OnboardingWorkflowBuilder = () => {
  const [workflowConfig, setWorkflowConfig] = useState(
    onboardingWorkflowDefaults,
  );
  const [workflowType, setWorkflowType] = useState('employee');

  const getStepLabel = stepId => {
    const pagination =
      workflowType === 'admin'
        ? adminOnboardingPagination
        : employeeOnboardingPagination;

    const step = pagination.find(s => s.id === stepId);
    if (!step) return `Step ${stepId + 1}`;

    const urlParts = step.url.split('/');
    const stepName = urlParts[urlParts.length - 1];

    return stepName.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
  };

  const toggleStep = stepId => {
    setWorkflowConfig(prev => ({
      ...prev,
      [stepId]: !prev[stepId],
    }));
  };

  const getEnabledSteps = () => {
    return Object.entries(workflowConfig)
      .filter(([stepId, enabled]) => enabled)
      .map(([stepId]) => parseInt(stepId));
  };

  return (
    <div className='workflow-builder'>
      <div className='workflow-type-selector'>
        <label>
          <input
            type='radio'
            value='employee'
            checked={workflowType === 'employee'}
            onChange={e => setWorkflowType(e.target.value)}
          />
          Employee Self-Onboarding
        </label>
        <label>
          <input
            type='radio'
            value='admin'
            checked={workflowType === 'admin'}
            onChange={e => setWorkflowType(e.target.value)}
          />
          Admin-Managed Onboarding
        </label>
      </div>

      <div className='workflow-steps'>
        {Object.entries(workflowConfig).map(([stepId, enabled]) => (
          <div key={stepId} className='step-config'>
            <label className='step-toggle'>
              <input
                type='checkbox'
                checked={enabled}
                onChange={() => toggleStep(parseInt(stepId))}
              />
              <span className='step-label'>
                {getStepLabel(parseInt(stepId))}
              </span>
            </label>
          </div>
        ))}
      </div>

      <div className='workflow-summary'>
        <h4>Enabled Steps: {getEnabledSteps().length}</h4>
        <p>Selected steps will be included in the onboarding workflow.</p>
      </div>
    </div>
  );
};

EOR Features Display​

import { eorFeatures, addonTexts } from '@/utils/constants/onboarding';

const EORServicesShowcase = () => {
  return (
    <div className='eor-services'>
      <section className='eor-features'>
        <h2>EOR Services</h2>
        <div className='features-grid'>
          {eorFeatures.map(feature => (
            <div key={feature.id} className='feature-card'>
              <h3>{feature.name}</h3>
              <div className='feature-icon'>
                {/* Icon based on feature ID */}
                {feature.id === 1 && '👥'}
                {feature.id === 2 && '⚡'}
                {feature.id === 3 && '🌍'}
                {feature.id === 4 && '📊'}
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className='addon-services'>
        <h2>Additional Services</h2>
        <div className='addons-list'>
          {addonTexts.map(addon => (
            <div key={addon.id} className='addon-card'>
              <h3>{addon.title}</h3>
              <p>{addon.desc}</p>
              <button className='learn-more'>Learn More</button>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};

Best Practices​

1. Dynamic Step Management​

// Always use constants for step navigation
const navigateToStep = (stepId, isAdmin) => {
  const pagination = isAdmin
    ? adminOnboardingPagination
    : employeeOnboardingPagination;
  const step = pagination.find(s => s.id === stepId);

  if (step) {
    window.location.href = step.url;
  }
};

2. Workflow Validation​

// Validate workflow configuration before saving
const validateWorkflow = config => {
  const enabledSteps = Object.entries(config)
    .filter(([_, enabled]) => enabled)
    .map(([stepId]) => parseInt(stepId));

  if (enabledSteps.length === 0) {
    throw new Error('At least one step must be enabled');
  }

  // Ensure critical steps are included
  const criticalSteps = [0, 1]; // Personal and employment details
  const hasCriticalSteps = criticalSteps.some(step =>
    enabledSteps.includes(step),
  );

  if (!hasCriticalSteps) {
    throw new Error('Personal details step is required');
  }

  return true;
};

3. Progressive Enhancement​

// Build onboarding flow progressively based on plan
const getAvailableSteps = subscriptionPlan => {
  const baseSteps = [0, 1, 2, 4, 7]; // Essential steps

  if (plans[subscriptionPlan]?.includes('Employee Asset Management')) {
    baseSteps.push(6); // Assets step
  }

  if (plans[subscriptionPlan]?.includes('Document Management')) {
    baseSteps.push(3); // Documents step
  }

  return baseSteps;
};

TypeScript Definitions​

interface OnboardingStep {
  id: number;
  url: string;
}

interface PasswordValidation {
  id: number;
  type: 'nine' | 'uppercase' | 'lowercase' | 'number' | 'symbol';
  msg: string;
}

interface EORFeature {
  id: number;
  name: string;
}

interface AddonService {
  id: number;
  title: string;
  desc: string;
}

export const employeeOnboardingPagination: OnboardingStep[];
export const adminOnboardingPagination: OnboardingStep[];
export const onboardingWorkflowDefaults: Record<number, boolean>;
export const passwordValidationMessages: PasswordValidation[];
export const plans: Record<string, string[]>;
export const eorFeatures: EORFeature[];
export const addonTexts: AddonService[];

Future Enhancements​

Planned Features​

  • Conditional Steps: Dynamic step inclusion based on user inputs
  • Multi-language Support: Localized onboarding flows
  • Custom Fields: Configurable fields per onboarding step
  • Integration Steps: Third-party service setup during onboarding

Migration Considerations​

When updating onboarding flows:

  1. Maintain step IDs for existing workflows
  2. Add new steps at the end to preserve order
  3. Update workflow defaults for new installations
  4. Test navigation with existing saved states
  5. Provide migration path for custom workflows

These onboarding constants provide a comprehensive framework for managing employee and admin onboarding processes, ensuring consistent workflow management and user experience across the WorkPayCore frontend application.