ProfileInfo

Purpose

The ProfileInfo reusable renders the “Personal Data” and “Change Password” forms inside the user profile page. It handles client-side validation and calls the SDK to update the user profile and password.

Where it's rendered

This reusable is rendered from Components/Profile/Default.liquid:

{% render 'Reusables\\ProfileInfo\\Default' %}

Inputs (Liquid render parameters)

This reusable is rendered without parameters.

It reads all required data from Root.GlobalData.user.

Template behavior (Liquid + Alpine)

The template renders two forms:

Personal data form

Alpine wiring:

x-data='profileinforeusabledefault.profileDataFormInit(user, successUserMessage, errorUserMessage)'

Fields:

First name (required)

Last name (required)

Email (readonly/disabled)

Role (conditionally, when user.UserRole exists)

Save button is disabled when:

the form is saving

no fields changed (!isFormChanged())

the form is invalid (!updateFormValidity())

Change password form

Alpine wiring:

x-data="profileinforeusabledefault.passwordFormInit(successPasswordMessage, errorPasswordMessage, errorMessageLocked)"

Implements password visibility toggles.

Implements weak-password validation rules (length, upper/lowercase, symbol/number) and also blocks setting the new password equal to the old one.

Data contract (JS runtime)

Model shape (storefront example)

Required: provide a real storefront model sample.

This reusable reads the user data from the global view model (typically Root.GlobalData.user) and serializes it into Alpine via {{ user | serialize }}.

To document this contract correctly, we need a real sanitized example of the user object as it appears on the Profile page.

Until a real storefront model is provided, do not treat any inferred shape below as authoritative.

Sanitized real storefront example (provided by the user) of GlobalData.User:

{
  "customerId": "Customer Id",
  "userId": "User Id",
  "firstName": "Sample text",
  "lastName": "Sample text",
  "email": "sample@example.com",
  "permissions": [],
  "isAuthenticated": true,
  "isPartiallyLoggedIn": "0"
}

Fields consumed by Liquid

The template reads user data via Root.GlobalData.user:

user.FirstName

user.LastName

user.Email

user.UserRole (optional)

JavaScript

Global object

Global object: profileinforeusabledefault

The JS file exports two form initializers:

profileDataFormInit(user, successMessage, errorMessage)

passwordFormInit(successMessage, errorMessage, errorMessageLocked)

profileDataFormInit(user, successMessage, errorMessage)

What it does

Returns an Alpine form controller for personal data editing.

Tracks initial user data and detects whether the form changed.

Validates required fields and drives inline error messages.

Calls the SDK to persist changes.

Nested methods (returned by the initializer)

init()

Collects form fields ([name]) excluding disabled and submit.

Adds blur listeners to validate fields.

validateField(field)

Currently validates only the required/empty rule.

Updates errors[field.name].

Toggles valid / invalid CSS classes.

Updates the .icon-state element to show either warning or check.

updateFormValidity()

Returns true only when there are no errors and required fields are not empty.

isFormChanged()

Compares current user.* values against originalUser.*.

clearForm()

Clears validity classes, icons, and resets errors.

checkForm()

Runs validation.

Guards when invalid or unchanged.

Calls servicesreusabledefault.updateUserProfile(data).

On error: shows toast with errorMessage.

On success: shows toast with successMessage then reloads the page after 1.5s.

passwordFormInit(successMessage, errorMessage, errorMessageLocked)

What it does

Returns an Alpine form controller for changing the user password.

Validates password rules and confirmation.

Calls the SDK to persist the password change.

Nested methods (returned by the initializer)

init()

Collects form fields ([name]) excluding disabled and submit.

Adds blur listeners to validate fields.

validateField(field)

Applies:

required rule

weak-password rules (upper+lower case, length >= 8, symbol/number)

new password must differ from old password

confirm password must match

Updates errors[field.name].

Updates the .icon-state element.

toggleVisibility(event)

Toggles the input type between password and text based on the checkbox.

(Additional methods exist further in the file for submission and reset; keep this doc aligned with Reusables/ProfileInfo/Default.js if the implementation changes.)

Global Alpine stores

This reusable uses:

$store.toast

Used for success/error messages.

Services / API calls

servicesreusabledefault.updateUserProfile(data)

The password form also calls an SDK method for password change (see Reusables/ProfileInfo/Default.js).

Dependencies

Liquid: Reusables/ProfileInfo/Default.liquid

JS: Reusables/ProfileInfo/Default.js

Translations: Reusables/ProfileInfo/Default.json

Alpine store: $store.toast

SDK wrapper: servicesreusabledefault.updateUserProfile(...)

Notes

Email is rendered as disabled/readonly, so the user cannot change it from this form.

The personal data form uses field.name keys to map errors; if input name attributes change, the inline validation mapping must be updated.

The password rules are enforced client-side; ensure the backend enforces the same (or stricter) rules.

ProfileInfo

Purpose#

Where it's rendered#

Inputs (Liquid render parameters)#

Template behavior (Liquid + Alpine)#

Data contract (JS runtime)#

Model shape (storefront example)#

Fields consumed by Liquid#

JavaScript#

Global object#

profileDataFormInit(user, successMessage, errorMessage)#

passwordFormInit(successMessage, errorMessage, errorMessageLocked)#

Global Alpine stores#

Services / API calls#

Dependencies#

Notes#