Appearance
Details Tab
Organisation and billing entity details view within Company Settings. The default landing page (tab index 1) when navigating to Company Settings.
Route
/organisations/:organisationId/company-settings
When only one billing entity exists and no other organisations are present, automatically redirects to the expanded view at /organisations/:organisationId/company-settings/details/.
Roles
CompanyAdmin, CompanyOwner, TeamAdmin, TenantAdmin
Layout
The Details tab is managed by CompanyDetailsController. It has two views:
- Card View -- Shows organisation cards and billing entity cards in a carousel layout. This is the default when multiple entities exist.
- Expanded View -- Shows a detailed editable form for a selected organisation or billing entity. Rendered by
CompanyDetailsExpanded.
Organisation Cards
- Fetches all organisations the user belongs to via
getIdentityBaseOrganisations. - Organisations are sorted with the home organisation first.
- Each card (
OrgCard) shows: name, country flag, worker count, candidate count. - Home organisation cards display a house icon with the first letter of the name; non-home organisations display a profile picture.
- Clicking the home organisation navigates to the expanded view at
/organisations/:organisationId/company-settings/details/. - Clicking another organisation opens a
SwitchOrganisationModalconfirmation dialog. - A "click here" link navigates to
/create-organisation?redirectUrl=/organisations/:organisationId/company-settingsfor creating additional organisations. - Description and label text is shown in secondary (greyed-out) style for TeamAdmin users.
Billing Entity Cards
- Listed below the organisation cards in a horizontal
Carouselcomponent. - Each card shows: name, country flag, worker count, candidate count.
- Cards are filtered to only show entities associated with the current user (via
associatedEntitieson the user identity). - Clicking a billing entity navigates to
/organisations/:organisationId/company-settings/billing-entities/:billingEntityId. - Billing entities with no workers, candidates, or EOR instances can be deleted (with a confirmation modal). Entities with associations show a
Popoverexplaining they cannot be deleted. - TeamAdmin users cannot delete billing entities (delete button is disabled).
- A "click here" link navigates to the create billing entity wizard. This link is disabled for TeamAdmin users.
Payment Banner
- Conditionally displayed (feature flag:
showPaymentDetailBanner). - Shows either "Bank Transfer" or "Payment Card" indicators, alternating based on the card's ordinal index.
Details Expanded View
Rendered by CompanyDetailsExpanded when a specific organisation or billing entity is selected.
Organisation/Entity Card
- Displays name, country flag, worker count, candidate count.
- Home organisations show a house icon with the first letter; billing entities show a
ProfilePicturecomponent. - An Add New Billing Entity button navigates to
/organisations/:organisationId/create-billing-entity-wizard. Disabled for TeamAdmin users. - A close button (X) navigates back to
/organisations/:organisationId/company-settings. Only shown when multiple billing entities exist (viaclosableprop). - A guidance text paragraph with an inline "here" link that scrolls to and clicks the "Add Contact" button.
Organisation Details Form
Rendered by the Details component inside a SmallCard. Fields are read-only by default; toggled to edit mode via a pencil icon button. The pencil button is disabled for TeamAdmin users.
Fields:
- Organization Name (required; empty validation;
Inputcomponent) - Country (
ComboboxCountries; changing country resets address fields -- Line, City, PostalCode) - Registration Number (optional; with tooltip triggered on click)
- Tax ID (optional; with tooltip triggered on click)
- Dun & Bradstreet Number (optional; max 9 characters; DUNS validation via
validDuns; error message shown when invalid) - Default Invoicing Currency (
InvoicingCurrencyDropdown; defaults toUSDwhen not set) - Address Search (Google Places autocomplete via
AddressDetailsForm; shown only in edit mode) - Address Line (required; validated with regex
[A-Za-z0-9\-\_]+) - City / Region (required; same regex validation)
- Postal Code (required; same regex validation)
- Area Code + Phone Number (required; validated for region; dial code derived from country)
When the InvoicingCurrency query parameter is present and set to true, the invoicing currency dropdown opens automatically on page load.
Save button is enabled only when:
- All fields differ from stored values (checked via
detailsMatchAndValid) - All validations pass (company name not empty, valid address, valid DUNS if provided)
- The form issues an
EditOrganisationCommandfor home organisations or anEditBillingEntityCommandfor billing entities
Cancel reverts to original values and returns to read-only mode.
After saving, the page polls via pollingGetCondition until the applies timestamp is newer than the previous value, then updates the store and dispatches an org-change event.
Point of Contact Section
Rendered by PointOfContactSection.
- Add Contact button (id:
add-contact-button). Disabled for TeamAdmin users and when a contact form is already open. - Client contact details (the organisation creator) are displayed as a read-only card via
ClientContactItem. - Additional contacts listed as active (with an associated user account) or inactive (without an account).
- Each contact card shows: name, contact type, job title, email, phone number with country flag.
- Contacts without a user account show an "Invite" link or "Sent" status if an invitation has already been sent.
- Clicking "Invite" opens an inline
InviteFormwithin the expanded view (polls for the invitation, then associates the contact with the invitation). - Contacts can be edited or deleted. Delete requires a confirmation modal.
Contact Form Fields
- Contact Type (required; dropdown; default: "Organization Contact")
- Full Name (required; 3-50 characters; name validation)
- Job Title (required; max 255 characters)
- Email (required; valid email format; read-only if the contact has an associated invitation)
- Phone (optional; dial code + number)
Add Payment Method
- Conditionally shown (feature flag:
showAddPaymentButton). - Styled as a button but not yet functional (click handler is empty).
- Disabled for TeamAdmin users.
Data Loading
- Home organisation data fetched via
getOrganisation(organisationId). - Billing entity data fetched via
getBillingEntityById(billingEntityId). - The
CompanyDetailsControllerfetches details viagetDetailsPage(organisationId)which returns billing entities, and organisation list viagetIdentityBaseOrganisations. - If the invitations or users stores are empty,
getManageUsersPageis also called to populate them (needed for duplicate email checks in the contact section). - On initialisation failure, the user is redirected to
/pages-404.
Behavior notes
- The
Detailscomponent width is constrained to45emand becomes full-width below 1050px. - The expanded view re-renders when the
organisationobject changes (via{#key organisation}). - After an invitation is sent from the expanded view, the contact is updated with the invitation ID via
editContactAndAddToStore.