How to use the @shopgate/engage/core.i18n.price function in @shopgate/engage

if (target.value) {
      onChange([parseInt(minValue, 10) * 100, parseInt(target.value, 10) * 100]);
    }
  }

  const currencySymbol = Intl.NumberFormat('en-US', {
    style: 'currency',
    currency,
  }).format('0').replace('0.00', '');

  return (
    <div>
      <span>
        {i18n.text('price.range', {
          fromPrice: i18n.price(priceMin, currency, false),
          toPrice: i18n.price(priceMax, currency, false),
        })}
      </span>
      
        
          <span style="{{">
            
          </span>
        
        
          <span style="{{">
            
          </span>
        
      
      <span id="price-slider-currency-label" hidden="" aria-hidden="">
        {currencySymbol}</span></div>

FormatPrice.format = ({ price, currency, fractions }) => {
  if (!i18n.ready) {
    return price;
  }

  return i18n.price(price, currency, fractions);
};

setMaxValue(target.value);
    if (target.value) {
      onChange([parseInt(minValue, 10) * 100, parseInt(target.value, 10) * 100]);
    }
  }

  const currencySymbol = Intl.NumberFormat('en-US', {
    style: 'currency',
    currency,
  }).format('0').replace('0.00', '');

  return (
    <div>
      <span>
        {i18n.text('price.range', {
          fromPrice: i18n.price(priceMin, currency, false),
          toPrice: i18n.price(priceMax, currency, false),
        })}
      </span>
      
        
          <span style="{{">
            
          </span>
        
        
          <span style="{{">
            
          </span>
        
      
      <span id="price-slider-currency-label" hidden="" aria-hidden=""></span></div>

Object.keys(filters).forEach((key) => {
      const filter = filters[key];

      switch (filter.type) {
        case FILTER_TYPE_RANGE: {
          /**
           * The min and max price need to be rounded before they are passed to the I18n component,
           * since it rounds to the full nearest number when fractions are deactivated.
           */
          const [minimum, maximum] = filter.value;
          const priceMin = Math.floor(minimum / 100);
          const priceMax = Math.ceil(maximum / 100);
          const fromPrice = i18n.price(priceMin, appConfig.currency, false);
          const toPrice = i18n.price(priceMax, appConfig.currency, false);
          const pricesFormatted = `${fromPrice} - ${toPrice}`;
          const labelValue = i18n.text('price.range', {
            fromPrice,
            toPrice,
          });
          const removeLabel = i18n.text('filter.remove', { filter: labelValue });
          const editLabel = i18n.text('filter.edit', { filter: labelValue });

          chips.push((

Object.keys(filters).forEach((key) => {
      const filter = filters[key];

      switch (filter.type) {
        case FILTER_TYPE_RANGE: {
          /**
           * The min and max price need to be rounded before they are passed to the I18n component,
           * since it rounds to the full nearest number when fractions are deactivated.
           */
          const [minimum, maximum] = filter.value;
          const priceMin = Math.floor(minimum / 100);
          const priceMax = Math.ceil(maximum / 100);
          const fromPrice = i18n.price(priceMin, appConfig.currency, false);
          const toPrice = i18n.price(priceMax, appConfig.currency, false);
          const pricesFormatted = `${fromPrice} - ${toPrice}`;
          const labelValue = i18n.text('price.range', {
            fromPrice,
            toPrice,
          });
          const removeLabel = i18n.text('filter.remove', { filter: labelValue });
          const editLabel = i18n.text('filter.edit', { filter: labelValue });

          chips.push((