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

const CartButtonBadge = ({ count, style }) => {
  const settings = useWidgetSettings('@shopgate/engage/components/AppBar');

  const badgeStyle = {
    ...style,
    boxShadow: settings.buttonCartBadgeShadow,
  };

  const productCount = count > CART_MAX_ITEMS ? `${CART_MAX_ITEMS}+` : count;

  return (
    <div style="{badgeStyle}">{productCount}</div>
  );
};

const OrderQuantityHint = ({ stock }) => {
  if (!isBeta()) {
    return null;
  }

  const settings = useWidgetSettings('@shopgate/engage/product/OrderQuantityHint');

  return (
    
      {settings.show && stock && !!stock.minOrderQuantity &&
        <div>
          
        </div>
        }
      {settings.show &amp;&amp; stock &amp;&amp; !!stock.maxOrderQuantity &amp;&amp;
        <div>
          </div>

const ProductGalleryImages = ({ initialSlide, images }) => {
  if (!Array.isArray(images) || images.length === 0) {
    return <div>;
  }

  const imagesByIndex = getImagesByIndex(images);

  const { zoom = {} } = useWidgetSettings('@shopgate/engage/product/Gallery') || {};

  return (
    <div>
       1}
        disabled={imagesByIndex.length === 1}
        zoom={{
          ...GALLERY_SLIDER_ZOOM,
          ...zoom,
        }}
      &gt;
        {imagesByIndex.map(imagesInIndex =&gt; (</div></div>

const EffectivityDates = ({ dates, children, productNotAvailable }) => {
  if (!isBeta() || !dates) {
    return children;
  }

  const settings = useWidgetSettings('@shopgate/engage/product/EffectivityDates');

  const startDate = new Date(dates.startDate);
  const endDate = new Date(dates.endDate);

  return (
    
      {({ before, between, after }) => {
        if (before) {
          return showStartDateHint(settings, startDate)
            ? 
            : children;
        }

        if (between) {
          return (

const ProductGalleryMedia = ({ initialSlide, media }) => {
  if (!Array.isArray(media) || media.length === 0) {
    return <div>;
  }

  const settings = useWidgetSettings('@shopgate/engage/product/Gallery');

  return (
    <div>
       1}
        disabled={media.length === 1}
        zoom={{
          ...GALLERY_SLIDER_ZOOM,
          ...settings.zoom,
        }}
      &gt;
        {media.map(singleMedia =&gt; (</div></div>

const CartButtonBadge = ({ count, style }) => {
  const settings = useWidgetSettings('@shopgate/engage/components/AppBar');

  if (!count) {
    return null;
  }

  const badgeStyle = {
    ...style,
    boxShadow: settings.buttonCartBadgeShadow,
  };

  const productCount = count > CART_MAX_ITEMS ? `${CART_MAX_ITEMS}+` : count;

  return (
    <div data-test-id="badge" style="{badgeStyle}">{productCount}</div>
  );
};

const MapPriceHint = ({ price, mapPrice }) => {
  if (!isBeta()) {
    return null;
  }

  const settings = useWidgetSettings('@shopgate/engage/product/MapPrice');
  if (!settings.showHint || !settings.hint) {
    return null;
  }

  const styles = useWidgetStyles('@shopgate/engage/product/MapPrice');

  return (
    
      {showHint(price, mapPrice) &&
        
          {({ between }) => (
            between &&