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

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((
            
              {pricesFormatted}

function handleChangeMax({ target }) {
    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>
        
      </div>

const FavoritesButton = ({ navigate, count }) => {
  const ariaLabel = `${i18n.text(LABEL)}. ${i18n.text('common.products')}: ${count}.`;
  return (
    
      
      
        
      
      
    
  );

removeThrottle={this.props.removeThrottle}
          onRippleComplete={this.props.onRippleComplete}
          once={this.props.favoritesOnce}
          readOnlyOnFetch
        />
        
        
          
        
        
      
    );
  }
}

const CartButton = ({ navigate, count }) => {
  const ariaLabel = `${i18n.text(LABEL)}. ${i18n.text('common.products')}: ${count}.`;
  return (
    
      
      
        
      
      
    
  );

render() {
    const { label, favoritesCount } = this.props;
    const ariaLabel = `${i18n.text(label)}. ${i18n.text('common.products')}: ${favoritesCount}.`;
    return (

const Delete = ({ handleDelete }) => (
  <button aria-label="{i18n.text('cart.delete_coupon')}" type="button" data-test-id="deleteCoupon">
    
  </button>
);

       i18n.text(`product.displayGroups.${group}`)} testId={`product-properties-group-${group}`}>

function CloseBar({ goBack, ...props }) {
  const left = ;

  return (
    
      
      
        
      
      
    
  );
}

render() {
    const { navigate } = this.props;

    return (
      
        
        
          <div aria-hidden="" data-test-id="CartButton">
            
          </div>
        
        
      
    );
  }
}