Transactions

Purpose

Transactions is the Profile-tab reusable that renders a transactions table.

It provides:

Date range selection (Flatpickr range picker)

A table (transaction date, code, debit, credit, progressive balance)

Pagination

Client navigation is implemented by redirecting to the same path with query parameters: page, dateFrom, dateTo.

Where it's rendered

In Components/Profile/Default.liquid (tab transactions):

{% render 'Reusables\\Transactions\\Default', transactionData: transactionData %}

Inputs (Liquid render parameters)

Model shape (storefront example)

Below is a sanitized excerpt from a Profile component model containing the transactionData object passed to this reusable.

{
  "transactionData": {
    "pagination": {
      "pageNumber": 1,
      "numberOfPages": 28
    },
    "dateFrom": "2025-01-01",
    "dateTo": "2025-01-31",
    "lines": [
      {
        "id": "Transaction Id",
        "code": "CRN-2025-000007",
        "credit": 80.0,
        "creditText": "80.00 €",
        "debit": 0.0,
        "debitText": "0.00 €",
        "turnover": -80.0,
        "turnoverText": "-80.00 €",
        "progressiveBalance": 980.5,
        "progressiveBalanceText": "980.50 €",
        "description": "Sample description",
        "notes": "Sample notes",
        "transactionDate": "2025-01-25T16:05:00Z",
        "invoiceUrl": "https://example.com/sample"
      }
    ],
    "forward": {
      "credit": 1500.0,
      "debit": 2200.0,
      "turnover": 700.0,
      "balance": 700.0
    },
    "total": {
      "credit": 2080.0,
      "debit": 3760.5,
      "turnover": 1680.5,
      "balance": 1680.5
    }
  }
}

`transactionData`

dateFrom (string, optional)

Expected format: YYYY-MM-DD

dateTo (string, optional)

Expected format: YYYY-MM-DD

pagination (object, required)

pageNumber (number)

numberOfPages (number)

lines (array, optional)

The current Liquid template uses:

line.transactionDate

line.code

line.debitText

line.creditText

line.progressiveBalanceText

Template behavior (Liquid + Alpine)

If transactionData is null or transactionData.lines is empty, shows Reusables.Transactions.Translations.NoTransactions.

The date range input is disabled when there is no data.

Pagination pages are generated in Liquid using a sliding window:

If total pages

\leq 7

, show all pages.

Else, show 1, a window around the current page, and totalPages with ... placeholders.

JavaScript

Global object: transactionsreusabledefault in Reusables/Transactions/Default.js.

`initComponent(currentPage, totalPages, dateFrom, dateTo)`

Initializes Flatpickr on the x-ref="dateRangePicker" input.

Reads optional overrides from data-datepicker-options.

On date change:

Updates dateFrom/dateTo to YYYY-MM-DD

Redirects to page 1.

`redirectToState(newPage)`

Builds the query string and navigates with window.location.href.

Params:

page (when provided)

dateFrom (if set)

dateTo (if set)

`resetDateRange()`

Clears the picker and resets dateFrom/dateTo.

Note: current implementation includes a TODO comment for backend reset filtering.

Notes

Runtime dependency: Flatpickr assets are loaded by Structure/LayoutA.liquid.

This reusable reads translations from Reusables/Transactions/Default.json (e.g. Reusables.Transactions.Translations.*).

Transactions

Purpose#

Where it's rendered#

Inputs (Liquid render parameters)#

Model shape (storefront example)#

transactionData#

Template behavior (Liquid + Alpine)#

JavaScript#

initComponent(currentPage, totalPages, dateFrom, dateTo)#

redirectToState(newPage)#

resetDateRange()#

Notes#