How to use the @shopgate/pwa-common/helpers/data.bin2hex function in @shopgate/pwa-common

const AverageRating = ({ average, count, productId }) => {
  if (!productId) {
    return null;
  }

  return (
    
      
      
    
  );
};

const Item = ({ display, product }) => (
  
    
      

        {/* IMAGE */}
        
        
          <img alt="{product.name}" src="{product.featuredImageUrl}">
        
        

        {/* DISCOUNT */}

it('should render as expected', () => {
    const wrapper = renderComponent({ productId: mockProductId });
    expect(wrapper).toMatchSnapshot();

    const renderWrapper = wrapper.find('ProductCardRender');
    expect(renderWrapper.prop('url')).toBe(`${ITEM_PATH}/${bin2hex(mockProductId)}`);
    expect(renderWrapper.prop('product')).toBe(mockProduct);
  });

function ProductCard({
  product,
  render,
  shadow,
  style,
}) {
  if (!product) {
    return null;
  }

  const cardStyle = {
    ...style,
    ...shadow && shadowStyle,
  };
  const url = `${ITEM_PATH}/${bin2hex(product.id)}`;

  return (
    <section data-test-id="{`Product:" style="{cardStyle}">
      {render({
        product,
        url,
      })}
    </section>
  );
}

const Image = ({ product }) => (
  <div aria-hidden="">
    
      
    
  </div>
);

const ProductCard = ({
  product, hidePrice, hideRating, hideName, titleRows,
}) => (
  
    
    {!!(!hidePrice && product.price.discount) && (
      <div>
        
        
          
        
        
      </div>
    )}
    {!(hidePrice &amp;&amp; hideRating) &amp;&amp; (
      <div></div>

const wrappedRouteDidUpdate = (pattern, historyAction, productId = '', variantId = '') => routeDidUpdate({
  pattern,
  params: {
    productId: mockBin2Hex(productId),
  },
  state: {
    productId: variantId,
  },
}, historyAction);

navigate: currentSlide =>
    dispatch(historyPush({
      pathname: `${ITEM_PATH}/${bin2hex(props.productId)}/gallery/${currentSlide}`,
    })),
});

const checkWrapper = (wrapper, expectedProps, buttonCategoryId = null) => {
  const pickers = wrapper.find('Connect(CategoryPicker)');
  pickers.forEach((picker, index) => {
    expect(picker.props()).toEqual({
      ...expectedProps[index],
      label: settings[`label_${index + 1}`],
      onSelect: expect.any(Function),
    });
  });

  const button = wrapper.find('Connect(ButtonLink)');
  expect(button.prop('href')).toBe(`${CATEGORY_PATH}/${bin2hex(buttonCategoryId)}`);
  expect(button.prop('disabled')).toBe(!buttonCategoryId);
  expect(button.text()).toBe('common.show_products');
};