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

* A wrapper component for the AppBarIcon which injects the icon color from the widget settings.
 * @param {Object} props The component props.
 * @returns {JSX}
 */
const AppBarIcon = ({ widgetSettings, ...rest }) => {
  const { buttonColor } = widgetSettings;
  return (
    
  );
};

AppBarIcon.propTypes = {
  widgetSettings: PropTypes.shape().isRequired,
};

export default withWidgetSettings(AppBarIcon, '@shopgate/engage/components/AppBar');

);
  }
}

export default withWidgetSettings(connect(CartButton), '@shopgate/engage/components/AppBar');

onClick={navigate}
                  testId="CartButton"
                  aria-label={ariaLabel}
                  aria-hidden={!count}
                />
              
            
            
          
        )}
      
    );
  }
}

export default withWidgetSettings(connect(CartButton), '@shopgate/engage/components/AppBar');

}

/**
 * The AppBarDefaultWithContext component.
 * @param {Object} props The component props.
 * @returns {JSX}
 */
const AppBarDefaultWithContext = props => (
  
    {({ ariaHidden }) => (
      
    )}
  
);

const WrappedComponent = withApp(withWidgetSettings(
  withRoute(connect(AppBarDefaultWithContext), { prop: 'route' }),
  '@shopgate/engage/components/AppBar'
));

WrappedComponent.Icon = AppBarIcon;

export default WrappedComponent;

}

/**
 * The AppBarDefaultWithContext component.
 * @param {Object} props The component props.
 * @returns {JSX}
 */
const AppBarDefaultWithContext = props => (
  
    {({ ariaHidden }) => (
      
    )}
  
);

const WrappedComponent = withApp(withWidgetSettings(
  withRoute(connect(AppBarDefaultWithContext), { prop: 'route' }),
  '@shopgate/engage/components/AppBar'
));

WrappedComponent.Icon = AppBarIcon;

export default WrappedComponent;