Step 4 Onboarding: Select Professional Role

by ADMIN 44 views

Introduction

In the previous steps of the freelancer profile creation flow, you have successfully completed the setup of your profile, including adding your profile picture, cover photo, and basic information. Now, it's time to move on to the next step: selecting your professional role. This is a crucial step as it will be one of the first things visible to clients on your profile. In this article, we will guide you through the process of creating the UserAddWorkExperience component and registering it in the step flow array.

Description

The UserAddWorkExperience component is responsible for collecting the user's professional role information. This component will be created inside the components/freelancer-profile/steps/user-add-work-experience.tsx file and registered in the step flow array located at components/freelancer-profile/steps/index.tsx. The Figma reference for this component can be found at https://www.figma.com/design/9Uj7VQ0vsSOYjF2Yr9Wlwm/OFFER-HUB-PRODUCT-DESIGN--Copy-?node-id=1-106&p=f&t=iC4HC6dLA8o6aWzR-0.

Acceptance Criteria

To complete this step, you must meet the following acceptance criteria:

Create the File

Create a new file called components/freelancer-profile/steps/user-add-work-experience.tsx.

Include Shared Header and Step Indicator

Include the shared header component Header from @/components/freelancer-profile/header and the step indicator "4/10".

Add Title and Subtitle

Add the title "Now, Let tell the world what you have been about." and the subtitle "It’s the very first thing clients see, so make it count. Stand out by describing your expertise in your own words."

Input Field for Entering Professional Role

Add an input field for entering a professional role with a search icon. The placeholder for this input field should be "Exp: Creative Writer".

Navigation Buttons

Add navigation buttons:

  • "Back" (calls prevStep)
  • "Add Experience" (calls nextStep)

Handle Role State

Handle the role state using useState.

Import Component

Import the UserAddWorkExperience component into components/freelancer-profile/steps/index.tsx.

Replace Step Object

Replace the step object in the array with the new UserAddWorkExperience component.

{ key: 'user-add-work-experience', component: null }

with:

{ key: 'user-add-work-experience', component: <UserAddWorkExperience /> }

Implementation

To implement the UserAddWorkExperience component, you will need to create a new file called components/freelancer-profile/steps/user-add-work-experience.tsx. In this file, you will need to include the shared header component, step indicator, title, subtitle, input field for entering a professional role, and navigation buttons.

Here is an example implementation of the UserAddWorkExperience component:

import React, { useState } from 'react';
import Header from '@/components/freelancer-profile/header';

const UserAddWorkExperience = () => {
  const [role, setRole] = useState('');

  const handleRoleChange = (event) => {
    setRole(event.target.value);
  };

  return (
    <div>
      <Header />
      <div className="step-indicator">
        4/10
      </div>
      <h2>Now, Let tell the world what you have been about.</h2>
      <p>It’s the very first thing clients see, so make it count. Stand out by describing your expertise in your own words.</p>
      <input
        type="text"
        placeholder="Exp: Creative Writer"
        value={role}
        onChange={handleRoleChange}
      />
      <div className="navigation-buttons">
        <button onClick={prevStep}>Back</button>
        <button onClick={nextStep}>Add Experience</button>
      </div>
    </div>
  );
};

export default UserAddWorkExperience;

Conclusion

In this article, we have guided you through the process of creating the UserAddWorkExperience component and registering it in the step flow array. This component is responsible for collecting the user's professional role information and will be one of the first things visible to clients on their profile. By following the acceptance criteria and implementation guidelines outlined in this article, you should be able to successfully complete this step and move on to the next one in the freelancer profile creation flow.

Additional Information

Q: What is the purpose of the UserAddWorkExperience component?

A: The UserAddWorkExperience component is responsible for collecting the user's professional role information. This information will be one of the first things visible to clients on their profile.

Q: Where is the UserAddWorkExperience component created?

A: The UserAddWorkExperience component is created inside the components/freelancer-profile/steps/user-add-work-experience.tsx file.

Q: Where is the UserAddWorkExperience component registered?

A: The UserAddWorkExperience component is registered in the step flow array located at components/freelancer-profile/steps/index.tsx.

Q: What is the Figma reference for the UserAddWorkExperience component?

A: The Figma reference for the UserAddWorkExperience component can be found at https://www.figma.com/design/9Uj7VQ0vsSOYjF2Yr9Wlwm/OFFER-HUB-PRODUCT-DESIGN--Copy-?node-id=1-106&p=f&t=iC4HC6dLA8o6aWzR-0.

Q: What are the acceptance criteria for completing this step?

A: To complete this step, you must meet the following acceptance criteria:

  • Create the file components/freelancer-profile/steps/user-add-work-experience.tsx
  • Include the shared header component Header from @/components/freelancer-profile/header
  • Include the step indicator "4/10"
  • Add the title "Now, Let tell the world what you have been about."
  • Add the subtitle "It’s the very first thing clients see, so make it count. Stand out by describing your expertise in your own words."
  • Add an input field for entering a professional role with a search icon
  • Add navigation buttons: "Back" (calls prevStep) and "Add Experience" (calls nextStep)
  • Handle the role state using useState
  • Import the UserAddWorkExperience component into components/freelancer-profile/steps/index.tsx
  • Replace the step object in the array with the new UserAddWorkExperience component

Q: What is the implementation of the UserAddWorkExperience component?

A: The implementation of the UserAddWorkExperience component is as follows:

import React, { useState } from 'react';
import Header from '@/components/freelancer-profile/header';

const UserAddWorkExperience = () => {
  const [role, setRole] = useState('');

  const handleRoleChange = (event) => {
    setRole(event.target.value);
  };

  return (
    <div>
      <Header />
      <div className="step-indicator">
        4/10
      </div>
      <h2>Now, Let tell the world what you have been about.</h2>
      <p>It’s the very first thing clients see, so make it count. Stand out by describing your expertise in your own words.</p>
      <input
        type="text"
       ="Exp: Creative Writer"
        value={role}
        onChange={handleRoleChange}
      />
      <div className="navigation-buttons">
        <button onClick={prevStep}>Back</button>
        <button onClick={nextStep}>Add Experience</button>
      </div>
    </div>
  );
};

export default UserAddWorkExperience;

Q: What are the additional information and guidelines for this step?

A: Before applying, please make sure to read our main readme and guidelines. Also, note that this step should not be applied until the ODHack begins. If you apply before then, your applications will not be reviewed.