Users

Purpose

The Users reusable renders the Manage users area in the Profile page.

It shows a paginated list of users (name/email/role/registration status) and—when the current user has permission—provides actions to:

Invite a new user (opens a modal)

Edit a user’s role and access (opens a modal)

Delete/remove a user (opens a confirmation modal)

All interactive behavior is implemented in Reusables/Users/Default.js via Alpine (x-data="usersreusabledefault.initComponent(...)").

Where it's rendered

This reusable is rendered by the Profile component:

Components/Profile/Default.liquid

It is only relevant when the page/tab is the user management tab (the Profile UI decides which tab content to render).

Inputs (Liquid render parameters)

This reusable receives its data through Liquid variables (not explicit render parameters). The main input is:

userManagement

It is serialized into the Alpine component here:

x-data='usersreusabledefault.initComponent({{ userManagement | serialize | escape }}, {{ currentPage }}, {{ totalPages }}, "{{ Reusables.Users.Translations.FetchUsersErrorMessage }}")'

Model shape (storefront example)

Below is a real storefront model sample provided by you (sanitized by collapsing large arrays and removing unrelated Profile fields).

Notes about sanitization:

The full payload you shared is the Profile component model.

This doc focuses only on the subset used by Reusables/Users:

userManagement (+ userManagement.metadata.roles and userManagement.metadata.branches)

translations are not included here (they come from Reusables.Users.Translations.*)

Sanitized storefront sample (subset):

{
  "userManagement": {
    "canManageUsers": true,
    "users": [
      {
        "id": "516d2d09-71c1-4c80-a47e-167b0e138dba",
        "email": "user1@example.com",
        "firstName": "Afroditi",
        "lastName": "Asimakopoulou",
        "isEmailConfirmed": true,
        "customerId": "75a4bd09-4369-43ee-a7f4-04203ff68fb2",
        "roleId": "admin",
        "roleName": "Διαχειριστής",
        "hasCompanyAccess": true,
        "hasAllBranchesAccess": true,
        "branchIds": []
      },
      {
        "id": "896cb52c-9b43-46a4-8085-757701da145a",
        "email": "user2@example.com",
        "firstName": "GEORGE",
        "lastName": "GOUVITSAS",
        "isEmailConfirmed": true,
        "customerId": "75a4bd09-4369-43ee-a7f4-04203ff68fb2",
        "roleId": "admin",
        "roleName": "Διαχειριστής",
        "hasCompanyAccess": true,
        "hasAllBranchesAccess": true,
        "branchIds": []
      },
      {
        "id": "2efebe85-32b1-4aa5-9773-71e5ee8c9484",
        "email": "user3@example.com",
        "firstName": "",
        "lastName": "",
        "isEmailConfirmed": false,
        "customerId": "75a4bd09-4369-43ee-a7f4-04203ff68fb2",
        "roleId": "03d0afdd-4e92-43b8-afd1-98421abd6a41",
        "roleName": "Αγοραστής",
        "hasCompanyAccess": false,
        "hasAllBranchesAccess": false,
        "branchIds": []
      }
    ],
    "pagination": {
      "totalCount": 0,
      "pageSize": 12,
      "pageNumber": 1,
      "numberOfPages": 2
    },
    "metadata": {
      "roles": [
        {
          "id": "admin",
          "name": "Διαχειριστής"
        },
        {
          "id": "03d0afdd-4e92-43b8-afd1-98421abd6a41",
          "name": "Αγοραστής"
        }
      ],
      "branches": [
        {
          "id": "fb3cce2e-675c-4f45-9fb1-1b1be89a72f8",
          "name": "Afroditi Branch"
        }
      ]
    }
  }
}

Template behavior (Liquid + Alpine)

Summary

If userManagement.canManageUsers is true:

Shows an Invite user button which opens an invite modal.

Shows the users table and action buttons.

If there are users (userManagement.users.size > 0):

Renders a desktop table with Liquid for user in userManagement.users.

Also provides an Alpine-driven x-for template for an updated users array after refresh (updateFlag).

Uses GlobalData.User.UserId to disable deleting your own user row.

Pagination

Pagination values are computed in Liquid:

currentPage from userManagement.pagination.pageNumber

totalPages from userManagement.pagination.numberOfPages

Then a sliding-window list of pages is generated in Liquid and passed into the Alpine component.

JavaScript

Reusable JS file

Reusables/Users/Default.js exposes:

usersreusabledefault.initComponent(userManagement, currentPage, totalPages, fetchUsersErrorMessage)

The returned Alpine component keeps:

users: current users list

data: userManagement.metadata (roles + branches)

pagination: pagination info

loading, updateFlag

Modals & validation

This reusable uses the global modal store ($store.modal) to render 3 modal flows:

Remove user

Opens a modal with title/message and two buttons (Delete/Cancel).

The Delete button calls removeUser(user, errorMessage).

Manage user

Opens a modal with groups/inputs:

roleId (select from userManagement.metadata.roles)

hasCompanyAccess (switch)

hasAllBranchesAccess (switch)

branchIds (checkbox list from userManagement.metadata.branches, conditionally hidden)

Save validates via:

Invite user

Opens a modal similar to manage, with email + role + access.

Toasts

Before opening modals and before/after service calls, this reusable clears toasts:

On errors it shows toast messages:

Global Alpine stores

This reusable uses:

$store.modal

open(...)

close()

shouldReinitialize

current.data (used to find and toggle visibility of branchIds field)

$store.toast

removeAll()

add(message, iconClass, type, keepAlive, extraHtml, extraHtmlIndex)

It also depends on an external validator:

promptmodalreusabledefault.isDataValid(modalData) (from Reusables/PromptModal)

Services / API calls

This reusable calls services through servicesreusabledefault:

servicesreusabledefault.deleteUser(user)

servicesreusabledefault.updateUser(userToSend)

servicesreusabledefault.inviteUser(...) (invite flow)

servicesreusabledefault.fetchUsers(...) (refresh/pagination)

The exact request/response shapes are owned by servicesreusabledefault.

Dependencies

Liquid: Reusables/Users/Default.liquid

JS: Reusables/Users/Default.js

Translations: Reusables/Users/Default.json (consumed as Reusables.Users.Translations.*)

Notes

The delete button is disabled for the current user row using GlobalData.User.UserId.

Branch access UI is dynamically shown/hidden when toggling hasAllBranchesAccess.

Liquid generates part of the user list (desktop table) and Alpine renders another version (x-for) after refresh; this is why updateFlag exists.

Users

Purpose#

Where it's rendered#

Inputs (Liquid render parameters)#

Model shape (storefront example)#

Template behavior (Liquid + Alpine)#

Summary#

Pagination#

JavaScript#

Reusable JS file#

Modals & validation#

Toasts#

Global Alpine stores#

Services / API calls#

Dependencies#

Notes#