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

const Translate = ({
  string,
  children,
  params,
  className,
  role,
  ...rest
}) => {
  if (typeof string !== 'string' || string.length === 0) {
    return string;
  }

  if (!i18n.ready) {
    return <span role="{role}">{string}</span>;
  }

  // When the input string is malformed, rather return the original string then raising an error.
  let formatted = string;

  try {
    // First replace every occurrence of a translation key with a separator.
    const separator = '__%S%__';
    const childrenArray = React.Children.toArray(children);

    const values = childrenArray.reduce((obj, child) =&gt; (child.props &amp;&amp; child.props.forKey ? {
      ...obj,
      [child.props.forKey]: separator,
    } : obj), { ...params });

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

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

FormatDate.format = ({ timestamp, format }) => {
  if (!i18n.ready) {
    return timestamp;
  }

  return i18n.date(timestamp, format);
};

FormatNumber.format = (props) => {
  if (!i18n.ready) {
    return props.number;
  }

  return i18n.number(props.number, props.fractions);
};

FormatTime.format = ({ timestamp, format }) => {
  if (!i18n.ready) {
    return timestamp;
  }

  return i18n.time(timestamp, format);
};