Profile

Purpose

The Profile component renders the “My account” page.

It:

builds a vertical tab UI (Orders / Info / Addresses / Company / Users / Shopping lists depending on settings)

renders each tab content by delegating to reusables (Orders, Addresses, Company, Users, etc.)

keeps the current tab in sync with the URL (/profile/<tab>) and preserves sticky menu offset against the header height

allows logout via navbardefault.handleLogout(...)

Inputs (model contract)

Model shape (storefront example)

{
  "companyLogoUrl": null,
  "currentTab": "orders",
  "countriesList": [
    {
      "code": "GR",
      "name": "Sample text"
    },
    "..."
  ],
  "addresses": [
    {
      "address": {
        "id": "Address Id",
        "firstName": "Sample text",
        "lastName": "Sample text",
        "phoneNumber": "Sample text",
        "email": "sample@example.com",
        "address1": "Sample text",
        "additionalInfo": "",
        "label": "",
        "city": "Sample text",
        "postalCode": "Sample text",
        "state": "Sample text",
        "country": "Sample text",
        "countryCode": "GR"
      },
      "isValid": true
    },
    "..."
  ],
  "headQuarterAddress": null,
  "branches": null,
  "orderData": {
    "totalPages": 1,
    "page": 1,
    "list": [
      {
        "id": "Order Id",
        "status": "Placed",
        "code": "Sample text",
        "placedAt": "2026-01-01T00:00:00.0000000+00:00",
        "billingAddress": {
          "firstName": "Sample text",
          "lastName": "Sample text",
          "phoneNumber": "Sample text",
          "email": "sample@example.com",
          "address1": "Sample text",
          "city": "Sample text",
          "postalCode": "Sample text",
          "state": "Sample text",
          "country": "Sample text"
        },
        "shippingAddress": {
          "firstName": "Sample text",
          "lastName": "Sample text",
          "phoneNumber": "Sample text",
          "email": "sample@example.com",
          "address1": "Sample text",
          "city": "Sample text",
          "postalCode": "Sample text",
          "state": "Sample text",
          "country": "Sample text"
        },
        "shippingLine": {
          "totalAmount": 5,
          "title": "Sample text",
          "totalAmountText": "Sample price text",
          "carrierId": "Carrier Id",
          "carrierCode": "sample",
          "netPrice": 5,
          "vatLines": []
        },
        "payment": {
          "serviceAmount": 2,
          "serviceAmountText": "Sample price text",
          "name": "Sample text",
          "provider": "COD",
          "amount": 0
        },
        "documentType": "Receipt",
        "invoiceData": {
          "tin": "",
          "taxOffice": "",
          "companyName": "",
          "profession": ""
        },
        "totalQuantity": 2,
        "totalAmountText": "Sample price text",
        "subTotalPriceText": "Sample price text",
        "discountPriceText": "Sample price text",
        "netValuePriceText": "Sample price text",
        "finalPriceText": "Sample price text",
        "vatAmountText": "Sample price text",
        "companyId": "Company Id",
        "cartToken": "Cart Token",
        "customerId": "Customer Id",
        "customerName": "Sample text",
        "discountRate": 0,
        "discountValue": 0,
        "totalAmount": 87,
        "expenseAmount": 0,
        "netAmount": 64.52,
        "vatAmount": 15.48,
        "financialStatus": "Pending",
        "fulfillmentStatus": "Fulfilled",
        "requiresCalculation": true,
        "lines": [
          {
            "id": "Order Line Id",
            "productId": "Product Id",
            "productVariantId": "Variant Id",
            "productTitle": "Sample text",
            "sku": "Sample text",
            "quantity": 2,
            "mediaItem": {
              "id": "Media Item Id",
              "link": "https://example.com/media/sample.jpg",
              "position": 0,
              "alt": "sample.jpg",
              "mediaType": "Image"
            },
            "link": "sample-product",
            "priceText": "Sample price text",
            "totalPriceText": "Sample price text",
            "netValue": 64.52,
            "price": 40,
            "lineValue": 64.52,
            "discountValue": 0,
            "discountRate": 0,
            "vatValue": 15.48,
            "vatRate": 24,
            "vatCode": ""
          },
          "..."
        ],
        "vatAnalysis": [
          {
            "vatRate": 24,
            "vatAmount": 15.48,
            "vatCode": "",
            "netAmount": 64.52
          },
          "..."
        ],
        "tags": [],
        "sourceTags": [],
        "updateDate": "2026-01-01T00:00:00.0000000+00:00",
        "insertDate": "2026-01-01T00:00:00.0000000+00:00",
        "favorite": false,
        "userId": "User Id",
        "loyaltyPricing": {
          "usePoints": false,
          "useCoupon": false,
          "couponCodes": []
        },
        "pricingBeforeDiscount": {
          "totalAmount": 0,
          "totalAmountText": "Sample price text",
          "netAmount": 0,
          "netAmountText": "Sample price text",
          "vatAmount": 0,
          "vatAmountText": "Sample price text",
          "expenseAmountText": "Sample price text"
        }
      },
      "..."
    ],
    "availableStatuses": [
      "Placed",
      "..."
    ],
    "availableYears": [
      "2026",
      "..."
    ]
  },
  "shoppingLists": [],
  "userManagement": null,
  "name": "Profile",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "id": "Component Id",
    "section": "SectionA",
    "type": "NoirProfile",
    "name": "Profile",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "",
    "cssClass": ""
  },
  "translations": {
    "myAccount": "Sample text",
    "hello": "Sample text",
    "orders": "Sample text",
    "...": "..."
  }
}

Required fields

settings.id

Optional fields

currentTab (defaults to orders)

orderData (consumed by Reusables\\Orders\\Default)

addresses, countriesList (consumed by Reusables\\Addresses\\Default)

headQuarterAddress, branches, companyLogoUrl (consumed by Reusables\\Company\\Default)

shoppingLists (consumed by Reusables\\ShoppingLists\\Default)

userManagement (consumed by Reusables\\Users\\Default)

translations.*

JavaScript

Global object

Components/Profile/Default.js exposes:

Liquid binds it via Alpine:

<section x-data="profiledefault.initComponent('{{ currentTab }}')">

`initComponent(currentTab)`

What it does

Creates and returns the Alpine state object for the Profile tabs UI.

`init()`

What it does

Watches tab and updates the URL path to /profile/<tab>.

Tracks header height to compute the sticky menu offset.

Key behaviors / edge cases

Uses history.replaceState(...) (no navigation), so it’s safe to call frequently.

Attaches resize and scroll listeners; header height can change during scroll.

`updateHeaderHeight()`

What it does

Reads <header> height and stores it in headerHeight.

`scrollToTopOfSection()`

What it does

When a tab changes, it can scroll the page so the active tab panel is not hidden behind the fixed header.

Key behaviors / edge cases

Scrolls only when the panel is already above the viewport (rect.top < headerHeight + 20).

Global Alpine stores (used by Profile)

`$store.toast` (clear tab errors)

The tab click handler clears the toast stack whenever the user switches tabs:

Alpine.store('toast').removeAll()

`$store.profile` (tabChanged)

The tab click handler toggles a shared store property:

Alpine.store('profile').tabChanged = !Alpine.store('profile').tabChanged

This is used as a cross-component “something changed” signal (typically for reusables rendered inside the tabs).

`$store.sharedAddresses` (addresses tab behavior)

When the user navigates to the addresses tab, the click handler sets:

Alpine.store('sharedAddresses').runToast = (tab === 'addresses')

This is used by the Addresses reusable to decide whether it should show validation feedback.

Dependencies

Alpine.js

Liquid globals:

GlobalData.User.* (initials + greeting)

GlobalData.Settings.* (feature flags for tabs)

External JS objects:

navbardefault.handleLogout(...)

Alpine stores:

toast

profile

sharedAddresses

Reusables:

Reusables\\Orders\\Default

Reusables\\ShoppingLists\\Default

Reusables\\Users\\Default

Reusables\\ProfileInfo\\Default

Reusables\\Addresses\\Default

Reusables\\Company\\Default

Notes

The set of tabs rendered depends on GlobalData.Settings.IsB2bCustomer and GlobalData.Settings.EnableShoppingLists.

Tabs like points and coupons are conditionally hidden based on feature flags (isRewardPointsActive, isCouponsActive).

The template shows user initials based on GlobalData.User.FirstName/LastName (fallback to Email).

Extras

Template behavior (Liquid + Alpine)

Builds a tabs list differently for B2B vs B2C.

Computes initials in Liquid and shows them only on desktop.

Renders vertical tab buttons and panels.

Each panel renders a reusable based on the tab name.

The tab menu is sticky and uses headerHeight (computed in JS) as top offset.

Profile

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

initComponent(currentTab)#

init()#

updateHeaderHeight()#

scrollToTopOfSection()#

Global Alpine stores (used by Profile)#

$store.toast (clear tab errors)#

$store.profile (tabChanged)#

$store.sharedAddresses (addresses tab behavior)#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#

Purpose

Inputs (model contract)

Model shape (storefront example)

Required fields

Optional fields

JavaScript

Global object

`initComponent(currentTab)`

`init()`

`updateHeaderHeight()`

`scrollToTopOfSection()`

Global Alpine stores (used by Profile)

`$store.toast` (clear tab errors)

`$store.profile` (tabChanged)

`$store.sharedAddresses` (addresses tab behavior)

Dependencies

Notes

Extras

Template behavior (Liquid + Alpine)