feat(con): add stepper to the profile page

[katamatata]

What Github issue does this PR relate to? Insert link.

768

What should the reviewer know?

This PR adds a new component to the mentee/mentor profile page - a stepper. It describes the steps users need to complete leading to their profile completion and approval. When the user completes all required fields, the submit profile for review button gets active, and they can send their profile for approval. Once the button is clicked, the profile status changes from Drafting to Submitted for review, and the button disappears from the profile page. Once the profile is approved, all the steps are considered complete, and we display the close button in the top right corner of the stepper so that the user can choose to close/hide the stepper by clicking on it.

The changes in this PR:

• Stepper component added to the mentee/mentor profile page along with the submit profile for review button
• In the stepper, we display different messages to different types of users (mentee, mentor, partnership mentor)
• Some changes in the UI of the profile page according to the design (location tag, marked optional fields, etc.)
• Applications page is now hidden from the users who are not approved (once their profile is approved, they get access to Applications & Find A Mentor pages)
• Updated wording in the transactional emails to different types of users
• Updated wording on the SignUpComplete page for mentees & regular mentors

I also updated screenshots for the sign-up flows & emails in our Miro board accordingly.

Screenshots

Mentee profile:

Mentor profile:

CON profile on Salesforce:

Summary by CodeRabbit

• New Features
  • Introduced a feature for users to submit their profiles for review.
  • Updated email templates with new content and dynamic URLs for a better onboarding experience.
  • Added an onboarding steps component to guide users through profile completion and submission.
• Enhancements
  • Improved UI elements across the platform, including updates to personal detail inputs, education details, and social media links to clarify optional fields.
  • Enhanced the visibility of applications in the side menu based on a broader activation state.
• Bug Fixes
  • Fixed a missing closing tag in an email template.
• Style Updates
  • Added new styles for location tags, icon alignment, and onboarding stepper components.
• Documentation
  • Updated instructions and steps for users post-signup to emphasize profile completion and the onboarding process.

[coderabbitai[bot]]

[!IMPORTANT]

Auto Review Skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository.

To trigger a single review, invoke the @coderabbitai review command.

Walkthrough

The overall change enhances the user experience for the ReDI Connect platform, focusing on email template updates, user profile submission for review, and UI adjustments. These changes streamline the onboarding process, clarify user actions after sign-up, and improve profile management for both mentors and mentees. The modifications aim to make the platform more intuitive and supportive for users navigating their mentorship journey.

Changes

File Path	Change Summary
.../pending-review-declined-email--MENTOR.mjml .../signup-complete-mentee.mjml .../signup-complete-mentor-partnership.mjml .../signup-complete-mentor.mjml .../welcome-to-redi-mentee.cyberspace.mjml .../welcome-to-redi-mentee.mjml .../welcome-to-redi-mentor.mjml	Updated email templates for various user actions, including sign-up completions and welcomes.
.../con-profiles-salesforce-event-handler.service.ts .../con-profiles.resolver.ts .../con-profiles.service.ts	Enhanced profile submission and review process, including a new state and mutation for profile review submissions.
.../email/lib/email/email.js	Updated email logic, including URL adjustments and additional page links.
.../ReadMentoringTopics.tsx .../ReadPersonalDetail.tsx .../EditableEducation.tsx .../EditableMenteeCount.tsx .../EditableOccupation.tsx .../EditablePersonalDetail.tsx .../EditableSocialMedia.tsx	UI text and placeholder updates for various components, emphasizing clarity and inclusiveness.
.../SideMenu.tsx .../LoggedIn.tsx	Adjusted conditional rendering and UI elements based on user status and type.
.../Me.scss .../Me.tsx .../OnboardingSteps.scss .../OnboardingSteps.tsx .../OnboardingStepsConstant.tsx .../Profile.tsx .../SignUpComplete.tsx	UI enhancements and logic updates for profile management, including onboarding steps and profile review submission.
.../my-con-profile.generated.ts .../my-con-profile.graphql .../types.ts schema.graphql	GraphQL and type updates to support new profile submission for review functionality.
.../styles/_variables.scss	Added styling variables for UI components.

Related issues

• talent-connect/connect#768: The updates align with the objective of adding a "submitted for review" state and improving the profile completion flow, directly addressing the issue's goals.

🐇✨
In the land of code and sun,
Changes big and changes small,
Together weave as one.

Through the fields of data, we hop,
With every line, we craft and shape,
Our journey never stops.
🌟🐾

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

---

Tips

### Chat There are 3 ways to chat with CodeRabbit: - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit-tests for this file.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit tests for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository from git and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit tests.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - The JSON schema for the configuration file is available [here](https://coderabbit.ai/integrations/coderabbit-overrides.v2.json). - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json` ### CodeRabbit Discord Community Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback.

[ericbolikowski]

@coderabbitai review