How to use @shopgate/pwa-common - 10 common examples

location,
              state: routeState,
            },
          },
        }));

        return;
      }
    }

    // Check for a redirect and change location if one is found.
    let redirect = redirects.getRedirect(location);

    if (redirect) {
      if (typeof redirect === 'function' || redirect instanceof Promise) {
        const { pathname } = getCurrentRoute(state);
        LoadingProvider.setLoading(pathname);

        const pattern = router.findPattern(location.split('?')[0]);
        const { transform } = router.patterns[pattern] || {};
        const route = new Route({
          pathname: location,
          pattern,
          routeState,
          transform,
        });

        try {
          redirect = await redirect({
            ...params,
            action: {
              ...params.action,

const primary = (disabled, flat) => {
  if (!flat) {
    if (disabled) {
      // Regular disabled button style.
      return createButtonStyles(themeConfig.colors.shade4, themeConfig.colors.shade7);
    }

    // Regular enabled button style.
    return createButtonStyles(themeConfig.colors.accentContrast, themeConfig.colors.accent);
  }

  if (disabled) {
    // Flat disabled button style.
    return createButtonStyles(themeConfig.colors.shade4, null);
  }

  // Flat enabled button style.
  return createButtonStyles(themeConfig.colors.accent, null);
};

import { css } from 'glamor';
// TODO: Remove the usage of themeConfig here
import { themeConfig } from '@shopgate/pwa-common/helpers/config';

const container = css({
  background: themeConfig.colors.background,
  display: 'flex',
  flexDirection: 'column',
  flexShrink: 0,
});

const messageBase = {
  padding: `${themeConfig.variables.gap.small}px ${themeConfig.variables.gap.big}px`,
  fontSize: '0.875rem',
  fontWeight: 500,
  ':not(:last-child)': {
    marginBottom: themeConfig.variables.gap.small * 0.5,
  },
};

const info = css(messageBase, {
  background: themeConfig.colors.accent,

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

  return (
    
      
      
    
  );
};

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

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

        {/* DISCOUNT */}

const container = css({
  display: 'flex',
  marginLeft: -1, // Removes margin of svg.
}).toString();

const icon = css({
  width: 24,
  height: 24,
}).toString();

const label = css({
  flex: 1,
  fontSize: '1rem',
  lineHeight: 1.5,
  marginLeft: themeConfig.variables.gap.small,
  marginBottom: themeConfig.variables.gap.small,
}).toString();

const active = css({
  color: themeConfig.colors.primary,
}).toString();

export default {
  input,
  icon,
  container,
  label,
  active,
};

const fetchCategory = categoryId => (dispatch, getState) => {
  const state = getState();
  const category = state.category.categoriesById[categoryId];

  if (!shouldFetchData(category)) {
    /**
     * Child categories are maybe missing.
     * So we need to check it (check happens inside fetchCategoryChildren).
     * This is the case if we got categories from getRootCategory
    */
    dispatch(fetchCategoryChildren(categoryId));
    return;
  }

  // No data at all. So we have the fetch the category with children included
  dispatch(requestCategory(categoryId));

  new PipelineRequest('shopgate.catalog.getCategory')
    .setInput({
      categoryId,
      includeChildren: true,

const fetchCategory = categoryId => (dispatch, getState) => {
  const state = getState();
  const category = state.category.categoriesById[categoryId];

  if (!shouldFetchData(category)) {
    /**
     * Child categories are maybe missing.
     * So we need to check it (check happens inside fetchCategoryChildren).
     * This is the case if we got categories from getRootCategory
    */
    if (category.childrenCount) {
      dispatch(fetchCategoryChildren(categoryId));
    }

    return Promise.resolve(category);
  }

  // No data at all. So we have the fetch the category with children included
  dispatch(requestCategory(categoryId));

  return new PipelineRequest(pipelines.SHOPGATE_CATALOG_GET_CATEGORY)

if (promise instanceof Promise) {
    promise.then((response) => {
      // Inspect the response object to determine, if it represents a search result, or an error.
      if (response && response.products && Array.isArray(response.products)) {
        // Dispatch the receive action when the response contains valid data.s
        dispatch(receiveSearchResults(searchPhrase, offset, response));
      } else {
        // If no valid data is delivered within the response the error action is dispatched.
        dispatch(errorSearchResults(searchPhrase, offset));
      }
    });
  }
};

/** @mixes {MutableFunction} */
export default mutable(fetchSearchResults);

import React from 'react';
import { mount } from 'enzyme';
import { Provider } from 'react-redux';
import { createMockStore } from '@shopgate/pwa-common/store';
import { getMenuById } from '@shopgate/pwa-common/selectors/menu';
import Quicklinks from './index';

const store = createMockStore();

jest.mock('@shopgate/pwa-common/components/Link', () => {
  /* eslint-disable react/prop-types, require-jsdoc */
  const Link = ({ children }) => (
    <div>
      {children}
    </div>
  );

  /* eslint-enable react/prop-types, require-jsdoc */
  return Link;
});

let mockedQuicklinks;
jest.mock('@shopgate/pwa-common/selectors/menu', () =&gt; ({
  getMenuById: () =&gt; mockedQuicklinks,