Company

Purpose

Company is a Profile-tab reusable for B2B customers that:

Shows the company logo (or a fallback image).

Allows uploading/saving a new company logo.

Allows deleting the company logo via a confirmation modal.

Displays the company headquarter address and branch addresses.

Where it's rendered

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

{% render 'Reusables\\Company\\Default',
  headQuarterAddress: headQuarterAddress,
  branches: branches,
  companyLogoUrl: companyLogoUrl
%}

Inputs (Liquid render parameters)

Company is rendered with named parameters.

Model shape (storefront example)

Below is a sanitized excerpt from a real Profile component model dump containing the fields passed to this reusable.

{
  "companyLogoUrl": "",
  "headQuarterAddress": {
    "addressName": "Sample name",
    "address1": "Sample address",
    "city": "Sample city",
    "postalCode": "11147",
    "state": "Sample state",
    "country": "Sample country",
    "phoneNumber": "Sample phone",
    "email": "sample@example.com",
    "tin": "Sample TIN",
    "taxOffice": "Sample tax office"
  },
  "branches": [
    {
      "addressName": "Sample branch name",
      "address1": "Sample address",
      "city": "Sample city",
      "postalCode": "54321",
      "state": "Sample state",
      "country": "Sample country",
      "phoneNumber": "Sample phone"
    },
    ...
  ],
  "translations": {
    "company": "Sample text",
    "orders": "Sample text",
    "addresses": "Sample text",
    "...": "..."
  }
}

Required fields

companyLogoUrl (string)

Can be empty; in that case the Liquid template shows a fallback image.

Optional fields

headQuarterAddress (object | null)

If present, it’s rendered as the “Headquarter” card.

Fields referenced in Liquid:

addressName, address1, city, postalCode, state, country

tin, taxOffice, phoneNumber, email (optional)

branches (array | null)

If present and non-empty, each entry is rendered as a “Branch” card.

Fields referenced in Liquid:

addressName, address1, city, postalCode, state, country, phoneNumber (optional)

Template behavior (Liquid + Alpine)

Source: Reusables/Company/Default.liquid.

Alpine initialization

The root element initializes the JS component with the current logo url:

x-data="companyreusabledefault.initComponent('{{ companyLogoUrl }}')"

Logo preview + fallback

Liquid picks an initial src:

companyLogoUrl when present

otherwise Assets/images/no-company-logo.jpg

The <img> is also bound to Alpine so the preview updates immediately after selecting a file:

:src="companyLogoUrl || '{{GlobalData.RootPath}}/Assets/images/no-company-logo.jpg'"

Upload / Save / Delete controls

Upload is a hidden <input type="file"> with @change="handleLogoUpload".

Save button calls:

@click="handleSaveLogo('{{ GlobalData.User.CustomerId }}', '{{ Reusables.Company.Translations.SaveCompanyLogoErrorMessage }}')"

Delete button opens a confirmation modal:

@click='handleDeleteModal({{ modalTranslations }})'

where modalTranslations is a JSON string assembled in Liquid from translation keys.

Address cards

Headquarter card renders only if headQuarterAddress is present.

Branch cards render only if branches exists and branches.size > 0.

Data contract (JS runtime)

`companyreusabledefault.initComponent(companyLogoUrl)`

Source: Reusables/Company/Default.js.

Returns an Alpine component state containing:

companyLogoUrl (string)

loading (boolean)

tempImageChanged / imageChanged (booleans)

logoFile (File | null)

JavaScript

Source: Reusables/Company/Default.js.

`handleLogoUpload(event)`

Reads the selected file (event.target.files[0]).

Creates a local preview URL:

this.companyLogoUrl = window.URL.createObjectURL(this.logoFile);

Marks the state as changed (tempImageChanged = true) so the Save button becomes enabled.

`handleSaveLogo(customerId, errorMessage)`

Clears existing toasts and sets loading = true.

If the current preview is a blob URL, it revokes it to avoid leaks.

Calls the backend uploader:

servicesreusabledefault.uploadCompanyLogo(this.logoFile, customerId)

On failure:

Shows a toast (errorMessage).

Restores the previous URL.

On success:

Clears the image briefly to force a re-render.

Uses the returned URL and appends a cache-buster query (?t=<timestamp>).

Clears the file input and resets flags.

`handleDeleteModal(modalTranslations)`

Opens $store.modal with two buttons:

Delete → calls handleDeleteLogo(modalTranslations.errorMessage)

Cancel → closes modal

`handleDeleteLogo(errorMessage)`

Calls:

servicesreusabledefault.deleteCompanyLogo()

On failure: shows a toast and closes the modal.

On success: clears companyLogoUrl and closes the modal.

Global Alpine stores

Used by Company JS:

$store.toast

removeAll() and add(...) for error reporting.

$store.modal

open(...) and close() for the delete-confirmation modal.

Services / API calls

From Reusables/Company/Default.js:

servicesreusabledefault.uploadCompanyLogo(file, customerId)

servicesreusabledefault.deleteCompanyLogo()

Dependencies

Reusables/Company/Default.liquid

Reusables/Company/Default.js

Reusables/Company/Default.json (translations)

Components/Profile/Default.liquid (render site)

$store.toast and $store.modal (defined in Assets/js/theme.js)

servicesreusabledefault.uploadCompanyLogo / servicesreusabledefault.deleteCompanyLogo

Notes

This reusable relies on GlobalData.User.CustomerId (in Liquid) when saving the logo; this is not part of the reusable inputs.

The Save button is disabled unless a new image has been selected (tempImageChanged = true).

The JS adds a timestamp query string to the returned logo URL to work around browser caching.

Examples

Render from Profile tab:

{% render 'Reusables\\Company\\Default',
  headQuarterAddress: headQuarterAddress,
  branches: branches,
  companyLogoUrl: companyLogoUrl
%}

Company

Purpose#

Where it's rendered#

Inputs (Liquid render parameters)#

Model shape (storefront example)#

Required fields#

Optional fields#

Template behavior (Liquid + Alpine)#

Alpine initialization#

Logo preview + fallback#

Upload / Save / Delete controls#

Address cards#

Data contract (JS runtime)#

companyreusabledefault.initComponent(companyLogoUrl)#

JavaScript#

handleLogoUpload(event)#

handleSaveLogo(customerId, errorMessage)#

handleDeleteModal(modalTranslations)#

handleDeleteLogo(errorMessage)#

Global Alpine stores#

Services / API calls#

Dependencies#

Notes#

Examples#