feat: added multi-step signup (#138)

* feat: added new registration step - Account-Type

* feat: added new step

* fix: small fixes in styles

* fix: removed inline styles

* fix: added new step

* fix: added new step

* feat: added icons and updated the input-link

* fix: some fixes with icons

* feat: added new step Specialty

* feat: add step 4 of onboarding

* fix: minor lang selection update

* fix: minor issues & reusability

* fix: disable select if no empty cells

* feat: add recommended languages

* feat: add search to languages

* wip: implement form

* feat: bind speciality step to the form

* fix: update effect dependencies list

* feat: update next step logics

* feat: update select-fields layout

* refactor: apply Prettier

* fix: speciality to occupation conversion

* typo: update language label

* feat: add selected field component

* fix: remove step 1 recommendations on step 2

* feat: new approach wip

* feat: wip (need to fix errors)

* fix: handle key prop error

* fix: final client cleanup

* feat: add responsiveness to ActionSection

* feat: add responsiveness to AccountType

* feat: restyle Options

* feat: add responsiveness to steps

* fix: change recommended_icons height

* feat: refactor + illustrations

* fix: server stuff to support registration

* fix: minor issues

* feat: everything working now

* fix: mocks

* fix: lint issues

* fix: backend lint

* feat: add illustration resizing

* feat: add illustration resizing

* fix: update icons size

* fix: rename Javascript to JavaScript

* fix: styles

* feat: last touches

* fix: lint

* fix: lint part 2

* fix: seeds

* fix: small updates

* fix: remove console log

* fix: removed broken tests

---------

Co-authored-by: Romas Bitinas <[email protected]>
Co-authored-by: Nikita Mashchenko <[email protected]>

client/next.config.js

@@ -9,6 +9,7 @@ module.exports = {
       'picsum.photos',
       'source.unsplash.com',
       'upload.wikimedia.org',
+      'teameights.s3.amazonaws.com',
     ],
     remotePatterns: [
       {

client/package.json

@@ -26,9 +26,10 @@
     "@storybook/addon-styling": "^1.3.6",
     "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-query-devtools": "^5.0.1",
-    "@teameights/types": "^1.1.27",
+    "@teameights/types": "^1.1.28",
     "@types/js-cookie": "^3.0.5",
     "@types/lodash.debounce": "^4.0.7",
+    "@types/lodash.isempty": "^4.4.9",
     "@types/node": "20.4.8",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
@@ -41,6 +42,7 @@
     "eslint-config-next": "13.4.12",
     "js-cookie": "^3.0.5",
     "lodash.debounce": "^4.0.8",
+    "lodash.isempty": "^4.4.0",
     "next": "13.4.12",
     "qs": "^6.11.2",
     "react": "18.2.0",
@@ -54,6 +56,7 @@
     "react-select": "^5.7.4",
     "react-tooltip": "^5.21.3",
     "sass": "^1.64.2",
+    "sharp": "^0.33.1",
     "socket.io-client": "^4.7.2",
     "sonner": "^1.0.3",
     "tsparticles": "^2.12.0",

client/src/app/(auth)/password/confirmation/page.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { IllustrationStatus } from '../../ui';
+import { IllustrationStatus } from '../../../ui';
 import { useRouter } from 'next/navigation';
 
 export default function Confirmation() {

client/src/app/(auth)/password/expired/page.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { IllustrationStatus } from '../../ui';
+import { IllustrationStatus } from '../../../ui';
 import { useRouter } from 'next/navigation';
 
 export default function Expired() {

client/src/app/(auth)/password/success/page.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { IllustrationStatus } from '../../ui';
+import { IllustrationStatus } from '../../../ui';
 import { useRouter } from 'next/navigation';
 
 export default function Success() {

client/src/app/(auth)/signup/confirmation/page.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { IllustrationStatus } from '../../ui';
+import { IllustrationStatus } from '@/app/ui';
 import { useRouter } from 'next/navigation';
 
 export default function Confirmation() {

client/src/app/(main)/page.tsx

@@ -1,13 +1,15 @@
 'use client';
 import { Flex, SearchBar } from '@/shared/ui';
-import { countries, specialities } from '@/shared/constant';
+import { countries } from '@/shared/constant';
 import { LogoBig } from '@/shared/assets';
 import { useGetUsers } from '@/entities/session';
 import { useState } from 'react';
 import { Cards } from '@/app/(main)/ui/cards/cards';
 import styles from './layout.module.scss';
 import { UserInfoModal } from '@/widgets';
 import { IUserResponse } from '@teameights/types';
+import { specialities } from '@/shared/constant/specialities';
+import { focusesValues } from '@/shared/constant/focuses';
 
 export default function Home() {
   const [filters, setFilters] = useState<string | null>();
@@ -57,6 +59,14 @@ export default function Home() {
               optionsArr: specialities,
               filterValue: [],
             },
+            {
+              label: 'Focuses',
+              value: 'focuses',
+              type: 'checkbox',
+              placeholder: 'Search by focus',
+              optionsArr: focusesValues,
+              filterValue: [],
+            },
           ]}
           onChange={filterValues => {
             setFilters(filterValues);

client/src/app/onboarding/company/page.tsx

@@ -0,0 +1,21 @@
+'use client';
+import { IllustrationStatus } from '@/app/ui';
+import { useRouter } from 'next/navigation';
+import { Flex } from '@/shared/ui';
+
+export default function Company() {
+  const router = useRouter();
+  const handleBack = () => {
+    router.back();
+  };
+  return (
+    <Flex height='100dvh' width='100%' justify='center' align='center'>
+      <IllustrationStatus
+        mainText='Company Registrations'
+        subText='We will send you an email as soon as this feature appears'
+        buttonText='Back'
+        buttonHandler={handleBack}
+      />
+    </Flex>
+  );
+}

client/src/app/onboarding/layout.tsx

@@ -0,0 +1,102 @@
+'use client';
+import { ReactNode } from 'react';
+import styles from './onboarding.module.scss';
+import { FormProvider, useForm } from 'react-hook-form';
+import { accountTypeStep } from '@/app/onboarding/lib/const/steps';
+import { StepProps } from '@/app/onboarding/lib/const/steps';
+import { useUpdateMe } from '@/entities/session';
+import { IOption } from '@/shared/interfaces';
+import { ExperienceType, IUserRequest } from '@teameights/types';
+
+interface OnboardingProps {
+  steps: StepProps[];
+  accountType: string;
+  username: string;
+  fullName: string;
+  dateOfBirth: Date;
+  country: string;
+  focus: string;
+  coreTools: IOption[];
+  additionalTools: IOption[];
+  experience: string;
+  speciality: string;
+  isLeader: boolean;
+  github: string;
+  behance: string;
+  linkedIn: string;
+  telegram: string;
+}
+
+export default function OnboardingLayout({ children }: { children: ReactNode }) {
+  const { mutate: updateUser } = useUpdateMe();
+
+  const methods = useForm<OnboardingProps>({
+    defaultValues: {
+      steps: [accountTypeStep],
+      accountType: '',
+      username: '',
+      fullName: '',
+      country: '',
+      focus: '',
+      coreTools: [],
+      additionalTools: [],
+      experience: '',
+      speciality: '',
+      isLeader: false,
+      github: '',
+      behance: '',
+      linkedIn: '',
+      telegram: '',
+    },
+  });
+
+  const onSubmit = methods.handleSubmit(data => {
+    let type = '';
+
+    switch (data.speciality) {
+      case 'Developer':
+        type = 'dev';
+        break;
+      case 'Designer':
+        type = 'designer';
+        break;
+      case 'Project Manager':
+        type = 'pm';
+        break;
+    }
+
+    const updateRequest: IUserRequest = {
+      fullName: data.fullName,
+      username: data.username,
+      isLeader: data.isLeader,
+      country: data.country,
+      experience: data.experience as ExperienceType,
+      dateOfBirth: new Date(data.dateOfBirth),
+      skills: {
+        __type: type as 'dev' | 'designer' | 'pm',
+        speciality: data.speciality,
+        focus: data.focus,
+        coreTools: data.coreTools.map(tool => tool.label),
+        additionalTools: data?.additionalTools?.length
+          ? data.additionalTools.map(tool => tool.label)
+          : undefined,
+      },
+      links: {
+        behance: data.behance && data.behance,
+        linkedIn: data.linkedIn && data.linkedIn,
+        telegram: data.telegram && data.telegram,
+        github: data.github && data.github,
+      },
+    };
+
+    updateUser(updateRequest);
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={onSubmit} className={styles.container}>
+        {children}
+      </form>
+    </FormProvider>
+  );
+}

client/src/app/onboarding/lib/const/steps.tsx

@@ -0,0 +1,168 @@
+import { AccountType } from '@/app/onboarding/ui/steps/accout-type/accout-type';
+import {
+  DuelsIllustration,
+  HackathonsIllustration,
+  MentorshipIllustration,
+  ProjectsIllustration,
+  SearchIllustration,
+  TeamIllustration,
+} from '@/shared/assets';
+import { PersonalInfo } from '@/app/onboarding/ui/steps/personal-info/personal-info';
+import { Specialty } from '@/app/onboarding/ui/steps/specialty/specialty';
+import { IconsSelector } from '@/app/onboarding/ui/steps/icons-selector/icons-selector';
+import {
+  designerTools,
+  frameworks,
+  managerTools,
+  methodologies,
+  programmingLanguages,
+  // recommendedLanguages,
+} from '@/shared/constant';
+import { SocialLinks } from '@/app/onboarding/ui/steps/social-links/social-links';
+
+export interface StepProps {
+  step: JSX.Element;
+  title: string;
+  centered: boolean;
+  submissionStep: boolean;
+  meta: {
+    details: string;
+    description: string;
+    illustration: JSX.Element;
+  };
+}
+
+const duelsMeta = {
+  details: 'Coding Duels',
+  description:
+    'Engage in fast-paced coding 1v1 battles against fellow coders, solve problems under timed conditions and strive to climb the leaderboard.',
+  illustration: <DuelsIllustration />,
+};
+
+const hackathonsMeta = {
+  details: 'Hackathons',
+  description:
+    'Participate in dynamic hackathons tp expand your coding abilities. Compete with peers, learn new skills, and win money prizes.',
+  illustration: <HackathonsIllustration />,
+};
+
+export const accountTypeStep: StepProps = {
+  step: <AccountType />,
+  title: 'Account type',
+  centered: true,
+  submissionStep: false,
+  meta: {
+    details: 'Teammates Search',
+    description:
+      'Use our intuitive search filters to find the right teammates based on a set of criteria and Instantly connect with them through the chat function.',
+    illustration: <SearchIllustration />,
+  },
+};
+
+export const personalInfoStep: StepProps = {
+  step: <PersonalInfo />,
+  title: 'Personal info',
+  centered: true,
+  submissionStep: false,
+  meta: {
+    details: 'Team Creation',
+    description:
+      'Connect with like-minded individuals for collaborative work, form teams, engage in group projects, and learn from one another.',
+    illustration: <TeamIllustration />,
+  },
+};
+
+export const specialityStep: StepProps = {
+  step: <Specialty />,
+  title: 'Speciality',
+  centered: true,
+  submissionStep: false,
+  meta: {
+    details: 'Mentorship Program',
+    description:
+      'Newcomers can connect with experienced mentors in the field to receive personalized guidance, support, and detailed feedback.',
+    illustration: <MentorshipIllustration />,
+  },
+};
+
+export const linksStep: StepProps = {
+  step: <SocialLinks />,
+  title: 'Links',
+  centered: true,
+  submissionStep: true,
+  meta: {
+    details: 'AI generated Projects',
+    description:
+      'Gain access to our AI generated projects catering to all levels of experience, work on real-world applications, improve skills, and build a portfolio.',
+    illustration: <ProjectsIllustration />,
+  },
+};
+
+export const developerSteps: StepProps[] = [
+  {
+    step: (
+      <IconsSelector
+        icons={programmingLanguages}
+        // recommendedIcons={recommendedLanguages}
+        formFieldToUpdate='coreTools'
+        description='All Languages'
+      />
+    ),
+    title: 'Languages',
+    centered: false,
+    submissionStep: false,
+    meta: duelsMeta,
+  },
+  {
+    step: (
+      <IconsSelector
+        icons={frameworks}
+        formFieldToUpdate='additionalTools'
+        description='All Frameworks'
+        type='text'
+      />
+    ),
+    title: 'Frameworks',
+    centered: false,
+    submissionStep: false,
+    meta: hackathonsMeta,
+  },
+];
+
+export const projectManagerSteps: StepProps[] = [
+  {
+    step: (
+      <IconsSelector icons={managerTools} formFieldToUpdate='coreTools' description='All Tools' />
+    ),
+    title: 'Tools',
+    centered: false,
+    submissionStep: false,
+    meta: duelsMeta,
+  },
+  {
+    step: (
+      <IconsSelector
+        icons={methodologies}
+        formFieldToUpdate='additionalTools'
+        description='All methodologies'
+        type='text'
+      />
+    ),
+    title: 'Methodologies',
+    centered: false,
+    submissionStep: false,
+    meta: hackathonsMeta,
+  },
+];
+
+export const designerSteps: StepProps[] = [
+  {
+    step: (
+      <IconsSelector icons={designerTools} formFieldToUpdate='coreTools' description='All Tools' />
+    ),
+    title: 'Tools',
+    centered: false,
+    submissionStep: false,
+    meta: duelsMeta,
+  },
+];