Skip to content

My Engagements ​

View and manage employment and contractor engagements.

Route ​

/my-engagements

Sub-routes ​

  • /my-engagements/:id/details -- engagement details
  • /my-engagements/:id/agreement/employee -- employee employment agreement PDF
  • /my-engagements/:id/agreement/contractor -- contractor assignment sheet PDF
  • /services-agreements/:scheduleType/:contractorType/:version -- contractor services agreement PDF (linked from timeline)

Layout ​

The page displays a title heading and two main sections: the engagement carousel (EngagementHeader) and the engagement timeline (EngagementTimeline). The currently selected offer ID is passed from the header to the timeline.

Engagement list ​

Engagements are fetched via getCandidateOffers on mount and displayed as a horizontal carousel of cards. The first engagement is auto-selected on load and its ID is dispatched via the offer-selected event.

The carousel is responsive:

  • Desktop: cards are 20rem wide with 4rem gaps
  • Mobile (at or below 600px): cards are 15rem wide with 1rem gaps, all text scaled to 0.8rem
  • The number of visible cards is calculated from the container width using Math.floor((containerWidth + gapWidthPx) / (cardWidthPx + gapWidthPx))
  • Left/right chevron buttons allow scrolling through cards when the list exceeds the visible area

Engagement card ​

Each card shows:

  • Company name with profile picture (single initial via ProfilePicture with maxNumberOfInitials={1})
  • Job title
  • Country flag (lowercase ISO code)
  • Worker contract type badge via WorkerTypeTag (Employee, Contractor, or Individual Contractor)
  • Status corner (color-coded by EorStatus via getStatusCornerCandidate)
  • Status text (only shown when status is not JoiningDocumentsVerified; translated with agreement type interpolation -- "contractor" or "employee")

The currently selected card has a primary-color border. Ended contracts appear greyed out (grey background, grey text, 60% grayscale filter, pointer events disabled). Clicking an active card selects it and loads its timeline below.

Engagement timeline ​

Below the carousel, the selected engagement shows a status timeline via the Timeline component. Each timeline item includes a timestamp, status text, status color, the signed-by user, and contextual hyperlinks.

The links shown depend on the current EorStatus:

  • Pending, Required, ClearancePending, EorcSigned, CandidateSignPending:
    • Offer Terms only
  • CandidateSigned, JoiningDocumentsFailed, JoiningDocumentsApprovalPending:
    • Offer Terms
    • Employment Agreement (for employees) or Service Agreement (for contractors)
    • Assignment Sheet (for contractors only)
  • JoiningDocumentsVerified:
    • Offer Terms
    • Employment Agreement or Service Agreement
    • Engagement Details
    • Assignment Sheet (for contractors only)
  • HR-only engagements: Engagement Details link only

Navigates to either /contractor-candidate-offer/:id/main-terms or /candidate-offer/:id/main-terms depending on the worker contract type.

For employees: /my-engagements/:id/agreement/employee For contractors: /services-agreements/:scheduleType/:contractorType/:version where:

  • scheduleType is "ad-hoc" for "On Demand" schedule types, otherwise "standard"
  • contractorType is "individual" for individual contractors, otherwise "company"
  • version is the agreement version from the engagement

Engagement statuses ​

Pending, Required, ClearancePending, EorcSigned, CandidateSignPending, CandidateSigned, JoiningDocumentsApprovalPending, JoiningDocumentsFailed, JoiningDocumentsVerified, Ended, Archived, and others.