Skip to main content

Interface: PricingObservers

Observers for tracking pricing-related information.

Properties​

dealers​

dealers: Observable<Dealer[]>

List of available dealers for the current user.

This observable emits the list of dealers that the current user can select from. Dealers may have different pricing structures, so changing the selected dealer can affect pricing.

Note: This is only available for tier1 users. Tier2 users are assigned to specific company and cannot switch it, while guests use public pricing instead.

Example​

window.mimeeqApp.observers.pricing.dealers.subscribe(({ newValue }) => {
  if (newValue) {
    const select = document.getElementById('dealer-select');
    select.innerHTML = '';

    newValue.forEach(dealer => {
      const option = document.createElement('option');
      option.value = dealer.id;
      option.textContent = dealer.name;
      select.appendChild(option);
    });
  }
});

isPriceLoading​

isPriceLoading: Observable<boolean>

Indicates whether price data is currently being loaded.

This observable emits a boolean value indicating whether price calculations are in progress. This can be used to show loading indicators while prices are being updated.

Example​

window.mimeeqApp.observers.pricing.isPriceLoading.subscribe(({ newValue }) => {
  document.getElementById('price-loader').style.display =
    newValue ? 'block' : 'none';
  document.getElementById('price-display').style.opacity =
    newValue ? '0.5' : '1';
});

maximumFractionDigits​

maximumFractionDigits: Observable<number>

Maximum number of decimal places to show in prices.

This observable emits the current setting for the maximum number of decimal places to display in price values.

Example​

window.mimeeqApp.observers.pricing.maximumFractionDigits.subscribe(({ newValue }) => {
  if (newValue !== undefined) {
    console.log(`Prices will show at most ${newValue} decimal places`);
  }
});

minimumFractionDigits​

minimumFractionDigits: Observable<number>

Minimum number of decimal places to show in prices.

This observable emits the current setting for the minimum number of decimal places to display in price values.

Example​

window.mimeeqApp.observers.pricing.minimumFractionDigits.subscribe(({ newValue }) => {
  if (newValue !== undefined) {
    console.log(`Prices will show at least ${newValue} decimal places`);
  }
});

modularPrices​

modularPrices: Observable<ModularPrices>

Price data for all unique configurations in a modular product.

This observable emits a map of configuration codes to price data for all components in a modular product. This is useful for showing price breakdowns for complex modular assemblies.

Example​

window.mimeeqApp.observers.pricing.modularPrices.subscribe(({ newValue }) => {
  if (newValue) {
    let totalPrice = 0;
    const priceBreakdown = document.getElementById('price-breakdown');
    priceBreakdown.innerHTML = '';

    for (const [code, priceData] of Object.entries(newValue)) {
      totalPrice += priceData.price;

      const row = document.createElement('tr');
      row.innerHTML = `
        <td>${code}</td>
        <td>${priceData.price.toFixed(2)} ${priceData.currency}</td>
      `;
      priceBreakdown.appendChild(row);
    }

    document.getElementById('total-price').textContent =
      `${totalPrice.toFixed(2)} ${Object.values(newValue)[0]?.currency || ''}`;
  }
});

priceOptions​

priceOptions: Observable<PriceOptions>

Available price type options for the current user.

This observable emits the list of price types that the current user can select from, based on their permissions and the customer configuration.

Example​

window.mimeeqApp.observers.pricing.priceOptions.subscribe(({ newValue }) => {
  if (newValue) {
    const select = document.getElementById('price-type-select');
    select.innerHTML = '';

    newValue.forEach(option => {
      const optElement = document.createElement('option');
      optElement.value = option.type;
      optElement.textContent = option.label;
      select.appendChild(optElement);
    });
  }
});

prices​

prices: Observable<PriceData>

Current price data for the product configuration.

This observable emits the complete price data for the current product configuration, including total price, currency, quantity breaks, and delivery information.

Example​

window.mimeeqApp.observers.pricing.prices.subscribe(({ newValue }) => {
  if (newValue) {
    // Update the base price display
    document.getElementById('price').textContent =
      `${newValue.price.toFixed(2)} ${newValue.currency}`;

    // Update unit price if available
    if (newValue.unitPrice) {
      document.getElementById('unit-price').textContent =
        `${newValue.unitPrice.toFixed(2)} ${newValue.currency} per unit`;
    }

    // Update delivery time
    if (newValue.deliveryTime) {
      document.getElementById('delivery').textContent =
        `Estimated delivery: ${newValue.deliveryTime}`;
    }

    // Render quantity breaks if available
    if (newValue.levels && newValue.levels.length > 1) {
      renderQuantityBreaks(newValue.levels, newValue.currency);
    }
  }
});

priceType​

priceType: Observable<PriceType>

The currently selected price type.

This observable emits the current price type being used (e.g., retail, wholesale). Different price types may have different pricing rules and values.

Example​

window.mimeeqApp.observers.pricing.priceType.subscribe(({ newValue }) => {
  if (newValue) {
    document.getElementById('price-type-display').textContent = newValue.label;
  }
});

quantity​

quantity: Observable<number>

The currently selected product quantity.

This observable emits the current quantity value used for price calculations. When the quantity changes, price calculations are updated accordingly.

Example​

window.mimeeqApp.observers.pricing.quantity.subscribe(({ newValue }) => {
  if (newValue !== undefined) {
    document.getElementById('quantity-input').value = newValue.toString();
  }
});

selectedDealer​

selectedDealer: Observable<Nullable<Dealer>>

The currently selected dealer entry.

This observable emits the dealer that is currently selected for pricing calculations. When the dealer changes, prices are recalculated accordingly.

Example​

window.mimeeqApp.observers.pricing.selectedDealer.subscribe(({ newValue }) => {
  if (newValue) {
    document.getElementById('dealer-name').textContent = newValue.label;
    document.getElementById('dealer-select').value = newValue.id;
  } else {
    document.getElementById('dealer-name').textContent = 'No dealer selected';
  }
});

totalPriceModular​

totalPriceModular: Observable<number>

Total price for all components in a modular product.

This observable emits the sum of prices for all components in a modular product. This provides a simple way to get the total price without having to calculate it from the modularPrices map.

Example​

window.mimeeqApp.observers.pricing.totalPriceModular.subscribe(({ newValue }) => {
  if (newValue !== undefined) {
    document.getElementById('total-price').textContent =
      `${newValue.toFixed(2)} ${getCurrency()}`;
  }
});