Skip to content

usePriceListPreview

The usePriceListPreview composable manages price list preview functionality, handling product fetching, transformation, and state management for price list preview operations. It provides a clean interface for updating and displaying price list products with proper error handling and user feedback.

NOTE

This composable is specifically designed to work alongside other price list management composables, like usePriceListRules and usePriceListVolumePricing.

Features

  • Price list preview generation with product fetching and transformation
  • Product state management with reactive updates
  • Custom pricing preservation during product updates
  • Loading states and error handling with user-friendly feedback
  • Flexible feedback options for different update scenarios

Usage

Basic Usage

ts
const {
  selectedProducts,
  hasProductSelection,
  previewPriceList,
  updateInProgress,
} = usePriceListPreview({
  entityId,
  entityDataUpdate,
  transformProductsForList,
  setupColumns,
  onUpdateProducts,
  convertPriceModeToRuleField,
  getPriceListProduct,
});

// Generate a preview
await previewPriceList('Products updated successfully');

Options

UsePriceListPreviewOptions

ts
interface UsePriceListPreviewOptions {
  entityId: Ref<string | null>;
  entityDataUpdate: Ref<ProductPriceListUpdate>;
  transformProductsForList: (
    priceListProducts: PriceListProduct[],
    entityData: ProductPriceList,
  ) => PriceListProductList[];
  setupColumns?: () => void; // Optional callback for setting up columns
  onUpdateProducts?: (filteredProducts: PriceListProduct[]) => Promise<void>; // Handle product updates
  convertPriceModeToRuleField?: (
    priceMode: PriceListPriceMode | undefined,
  ) => PriceListRuleField | undefined; // Price mode conversion
  getPriceListProduct?: (
    productId: string,
    value: number | null,
    priceMode: PriceListRuleField | undefined,
    staggeredCount: number,
  ) => PriceListProduct;
}
  • entityId: Reactive reference to the current price list entity ID
  • entityDataUpdate: Reactive reference to the price list entity being updated
  • transformProductsForList: Function to transform raw products into display format
  • setupColumns: Callback function for setting up table columns
  • onUpdateProducts: Handler for updating products during preview
  • convertPriceModeToRuleField: Function to convert price mode to rule field
  • getPriceListProduct: Function to create price list product objects

Properties and Methods

priceListProducts

ts
const priceListProducts: Ref<PriceListProduct[]>;

Raw price list products fetched from the API.

selectedProducts

ts
const selectedProducts: Ref<PriceListProductList[]>;

Transformed products ready for display in tables or lists.

updateInProgress

ts
const updateInProgress: Ref<boolean>;

Loading state indicating whether a preview update is in progress.

hasProductSelection

ts
const hasProductSelection: ComputedRef<boolean>;

Indicates whether any products are currently selected/available in the preview.

previewPriceList

ts
previewPriceList(
  feedbackMessage?: string,
  updateProducts?: boolean,
  showFeedback?: boolean,
): Promise<void>

Generates a price list preview by fetching products based on the current selection query and rules.

  • Parameters:
    • feedbackMessage: Custom message to show on successful update (default: "Price list preview updated.")
    • updateProducts: Whether to update the entity's product list (default: false)
    • showFeedback: Whether to show toast notifications (default: true)