@shopgate/webpack 7.30.3-beta.2 → 7.30.3-beta.3

package/local-packages/pwa-extension-kit/src/connectors/README.md

@@ -0,0 +1,222 @@
+# Shopgate Connect - PWA Extension Kit - /connectors - Data connectors
+## Purpose
+
+Connectors are [Higher Order Components](https://reactjs.org/docs/higher-order-components.html) which are made to simplify reading data or actions from PWA app by frontend components.
+
+Connectors are meant to replace some PWA redux selectors/actions or Contexts by using them in a simpler way and hiding the logic behind gathering basic data which is proven to be commonly used by many extensions.  
+
+## Available connectors
+### withHistoryActions
+Connects provided component with a wrapper behind internal PWA routing actions.
+
+#### Possible usage
+Everywhere as a React component rendered within the PWA app.
+
+#### Props provided
+- `historyPush(pathname: string, options: object[optional])` - Opens new page in a safe way. Detects link types. Internal links (deep links) which are handled by the PWA app. External links are handled by opening the in-app-browser.
+    - `state (object[optional])` - Route state is a property of options and passed from history action. Is NOT the redux state. It is metadata only for the routing transition.
+    - Values passed to state are defined in route action.
+- `historyReplace(pathname: string, options: object[optional])` - Replaces current page with provided pathname if pathname is an internal link. If pathname is external link it works exactly as `historyPush`. If you intend to replace your current page with in-app-browser, use combination of `historyPush` and `historyPop` instead.
+    - `state (object[optional])` - Route state is a property of options and  passed from history action. Is NOT the redux state. It is metadata only for the routing transition.
+    - Values passed to state are defined in route action.
+- `historyPop()` - Pops current page from a history stack. Works like a "back" button.
+
+#### Example usage
+```jsx
+import React, { Component } from 'react'
+import { withHistoryActions } from '@shopgate-ps/pwa-extension-kit/connectors';
+
+class MyComponent extends Component 
+  handleClick = () => {
+    this.props.historyPush('/example', { state: { title: 'foo' });
+  }
+  handleDismiss = () => {
+    this.props.historyPop();
+  }
+  
+  render() {
+    return (
+      <Fragment>
+        <button onClick={this.handleOpen}>Open page</button>
+        <button onClick={this.handleDismiss}>Dismiss</button>
+      </Fragment>
+    );
+  }
+}
+
+export default withHistoryActions(MyComponent);
+```
+### withPageProductId
+Connector which provides `hex2Bin` decoded `productId` which is also available in the page pathname params. It's intended to be used with or without additional product selectors like `getProduct`, `getBaseProduct` depending on the extension needs.
+
+#### Possible usage
+This connector will only work while being rendered on a page which has :productId pathname param. Current pages which offer this param are:
+- Product Page ('/item/:productId')
+- Write review page ('/item/:productId/write-review')
+
+#### Example usage
+##### Getting productId as is
+```jsx
+// Page pathname where component is rendered: '/item/31323334'
+import { withPageProductId } from '@shopgate-ps/pwa-extension-kit/data/connectors';
+
+// Will produce <div>This product id is: 1234</div>
+const MyComponent = ({ productId}) => (<div>This product id is: ${productId}</div);
+
+export default withPageProductId(MyComponent);
+```
+
+##### Getting always a base product id
+Some products has variants. If variant is selected by user or product page is rendered directly with selected variant (by for example deep linking), product id available in the pathname is an id of currently selected variant.
+In this case, in order to read the `baseProductId` (product id of a variant's parent product), there's need to use additional PWA redux selectors.
+```jsx
+// Page pathname where component is rendered: '/item/313233342d76617269616e742d31'
+import { connect } from 'react-redux'; // Provides connection to redux.
+import { withPageProductId } from '@shopgate-ps/pwa-extension-kit/data/connectors'; // Fetches and decodes productId from a pathname
+import { getBaseProductId } from '@shopgate/pwa-common-commerce/product/selectors'; // Makes sure productId always comes from base product.
+
+// Will produce <div>This product id is: 1234</div>
+const MyComponent = ({ baseProductId }) => (<div>This product id is: ${baseProductId}</div);
+
+// Function that maps state and given props to component props.
+// State is a current redux state
+// Props in this example are made by `withPageProductId` connector and pass decoded `1234-variant-1` (encoded version: `313233342d76617269616e742d31`)
+const mapStateToProps = (state, props) => ({
+  baseProductId: getBaseProductId(state, props)
+});
+
+// Component connected with redux only
+const ConnectedComponent = connect(mapStateToProps)(MyComponent);
+
+// ConnectedComponent wrapped with data connector.
+export default withPageProductId(ConnectedComponent);
+```
+
+### withPageState
+Connects provided component with a page state: `isLoading`, `isVisible`.
+
+#### Props provided
+- `isLoading (bool)` - Tells if page on which component is rendered is currently loading (usually with a visible progress bar).
+- `isVisilble (bool)` - Tells if page on which component is rendered is currently visible. Returns false when page is somewhere in the background. For example if another page is pushed to the history stack, but the one where component is rendered is still mounted via the DOM caching.
+- `pathname (string)` - The pathname of page on which component is rendered (as in `window.location.pathname`).
+- `pattern (string)` - The pattern of a route of a page on which component is rendered. Handy for some comparison (see example usage).
+- `location (string)` - The location of page on which component is rendered (as pathname but also contains query strings).
+- `state (object[optional])` - Route state passed from history action. Is NOT the redux state. It is metadata only for the routing transition.
+  - Values passed to state are defined in route action.
+
+#### Example usage
+```jsx
+import React from 'react';
+import { CART_PATH } from '@shopgate/pwa-common-commerce/cart/constants';
+import { withPageState } from '@shopgate-ps/pwa-extension-kit/connectors';
+import LoadingIndicator from '...';
+
+const MyComponent = ({ isVisible, isLoading, pattern, state }) => {
+  // Returns null when component is rendered in the cart page.
+  // Usually this approach is only needed in general-use portals like `app-bar.*`.
+  if (pattern === CART_PATH) {
+    return null;
+  }
+  if (!isVisible) {
+    return null;
+  }
+  if (isLoading) {
+    return <LoadingIndicator />
+  }
+  return <div>{state.title || 'Default title'}</div>;
+}
+
+export default withPageState(MyComponent);
+```
+
+### withUser
+Connects provided component with a user data state.
+
+#### Props provided
+- `user (Object)` - User data object with following properties:
+  - `isLoggedIn (bool)` - Whether the user is logged in.
+  - `id (string|number|null)` - User id, null when user is logged out.
+  - `email (string|null)` - User email, null when user is logged out.
+  - `firstName (string|null)` - User first name, null when user is logged out.
+  - `lastName (string|null)` - User last name (can contain middle name in rare edge cases), null when user is logged out.
+  - `displayName (string|null)` - User name, ready to be displayed in the UI, null when user is logged out.
+
+#### Example usage
+```jsx
+import { withUser } from '@shopgate-ps/pwa-extension-kit/connectors';
+import User from '@shopgate-ps/pwa-extension-kit/proptypes';
+
+const MyComponent = ({ user }) => {
+  if (!user.isLoggedIn) {
+    return null;
+  }
+  
+  return <div>Hello {user.displayName}</div>
+}
+
+MyComponent.propTypes = {
+  user: User.isRequired,
+}
+
+export default withUser(MyComponent);
+```
+
+### withProductContext
+Connects provided component with a product context
+
+#### Props provided
+- `options (object)` - Current selected product options
+- `productId (string)` - Id of the current shown product
+- `variantId (string)` -  Id of the current selected variant
+- `conditioner (Function)` - Helper class for ProductCharacteristic component
+
+
+#### Example usage
+```jsx
+import React from 'react';
+import { withProductContext } from '@shopgate/pwa-extension-kit/connectors';
+
+const MyComponent = ({ options, productId, variantId, conditioner }) => {
+  
+  return (
+    <ProductCharacteristics
+        productId={productId}
+        variantId={variantId}
+        render={this.renderer}
+        conditioner={conditioner}
+        finishTimeout={200}
+      />
+  );
+}
+
+export default withProductContext(MyComponent);
+```
+
+### withThemeComponents
+Connects provided component with some components provided by the Theme. 
+Theme components are theme specific - maintain functionality with theme specific UI.
+
+
+#### Props provided
+- `AppBar (ReactComponent)` - <AppBar> Component from the Theme. It can be used to add our default header to your custom page.   
+- `Drawer (ReactComponent)` - <Drawer> Component from the Theme. It is intended to be used to provide an additional UI layer to a page.
+- `View (ReactComponent)` -  <View> Component from the Theme. Wrapper if you want to create a custom page.
+
+
+#### Example usage
+```jsx
+import React from 'react';
+import { withThemeComponents } from '@shopgate/pwa-extension-kit/connectors';
+
+const MyComponent = ({ AppBar, View }) => {
+  
+  return (
+    <View>
+        <AppBar>
+        <h1>My custom page</h1>
+    </View>
+  );
+}
+
+export default withThemeComponents(MyComponent);
+```

package/local-packages/pwa-extension-kit/src/connectors/index.js

@@ -0,0 +1,23 @@
+import withPageProductId from './withPageProductId';
+import withPageState from './withPageState';
+import withHistoryActions from './withHistoryActions';
+import withUser from './withUser';
+import withThemeComponents from './withThemeComponents';
+import withProductContext from './withProductContext';
+
+export { withHistoryActions };
+export { withPageProductId };
+export { withPageState };
+export { withUser };
+export { withThemeComponents };
+export { withProductContext };
+
+export default {
+  withHistoryActions,
+  withPageProductId,
+  withPageState,
+  withUser,
+  withThemeComponents,
+  withProductContext,
+};
+

package/local-packages/pwa-extension-kit/src/connectors/index.spec.js

@@ -0,0 +1,29 @@
+import connectors, {
+  withPageProductId,
+  withHistoryActions,
+  withPageState,
+  withThemeComponents,
+  withProductContext,
+  withUser,
+} from './index';
+
+describe('data/connectors', () => {
+  it('should export all functions as default', () => {
+    expect(typeof connectors).toBe('object');
+    expect(typeof connectors.withHistoryActions).toBe('function');
+    expect(typeof connectors.withPageProductId).toBe('function');
+    expect(typeof connectors.withPageState).toBe('function');
+    expect(typeof connectors.withThemeComponents).toBe('function');
+    expect(typeof connectors.withProductContext).toBe('function');
+    expect(typeof connectors.withUser).toBe('function');
+  });
+
+  it('should export withPageProductId as named export', () => {
+    expect(typeof withHistoryActions).toBe('function');
+    expect(typeof withPageProductId).toBe('function');
+    expect(typeof withPageState).toBe('function');
+    expect(typeof withUser).toBe('function');
+    expect(typeof withThemeComponents).toBe('function');
+    expect(typeof withProductContext).toBe('function');
+  });
+});

package/local-packages/pwa-extension-kit/src/connectors/selectors/user.js

@@ -0,0 +1,24 @@
+import { createSelector } from 'reselect';
+import { getUserData } from '@shopgate/pwa-common/selectors/user';
+
+export const getUserLastName = createSelector(
+  getUserData,
+  (data) => {
+    if (!data) {
+      return null;
+    }
+
+    return data.lastName;
+  }
+);
+
+export const getUserId = createSelector(
+  getUserData,
+  (data) =>{
+    if (!data) {
+      return null;
+    }
+
+    return data.id;
+  }
+)

package/local-packages/pwa-extension-kit/src/connectors/withHistoryActions.jsx

@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { historyPush, historyReplace, historyPop } from '@shopgate/pwa-common/actions/router';
+
+/**
+ * Exports Wrapped component
+ */
+class WithHistoryActions extends Component {
+  static propTypes = {
+    historyPop: PropTypes.func.isRequired,
+    historyPush: PropTypes.func.isRequired,
+    historyReplace: PropTypes.func.isRequired,
+    WrappedComponent: PropTypes.func.isRequired,
+    otherProps: PropTypes.shape({}),
+  };
+
+  static defaultProps = {
+    otherProps: {},
+  };
+
+  /**
+   * Handles historyPush
+   * @param {string} pathname pathname
+   * @param {Object} options passed options
+   */
+  handlePush = (pathname, options) => {
+    this.props.historyPush({
+      pathname,
+      ...options,
+    });
+  };
+
+  /**
+   * Handles historyReplace
+   * @param {string} pathname pathname
+   * @param {Object} options passed options
+   */
+  handleReplace = (pathname, options) => {
+    this.props.historyReplace({
+      pathname,
+      ...options,
+    });
+  };
+
+  handlePop = () => {
+    this.props.historyPop();
+  };
+
+  /**
+   * @inheritDoc
+   */
+  render() {
+    const { WrappedComponent, otherProps } = this.props;
+    return (
+      <WrappedComponent
+        historyPop={this.handlePop}
+        historyPush={this.handlePush}
+        historyReplace={this.handleReplace}
+        {...otherProps}
+      />
+    );
+  }
+}
+
+const mapDispatchToProps = {
+  historyPush,
+  historyPop,
+  historyReplace,
+};
+
+const Connected = connect(null, mapDispatchToProps)(WithHistoryActions);
+
+export default WrappedComponent => props =>
+  <Connected WrappedComponent={WrappedComponent} otherProps={props} />;

package/local-packages/pwa-extension-kit/src/connectors/withHistoryActions.spec.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import withHistoryActions from './withHistoryActions';
+
+const mockedAction = jest.fn();
+jest.mock('react-redux', () => ({
+  connect: () => Component => props => (
+    <Component
+      historyPush={(...args) => mockedAction('historyPush', ...args)}
+      historyPop={(...args) => mockedAction('historyPop', ...args)}
+      historyReplace={(...args) => mockedAction('historyReplace', ...args)}
+      {...props}
+    />
+  ),
+}));
+
+describe('connectors/withHistoryActions', () => {
+  // eslint-disable-next-line react/prop-types, require-jsdoc
+  const TestedComponent = props => <div>Other prop: {props.foo}</div>;
+  const ConnectedComponent = withHistoryActions(TestedComponent);
+  let component;
+  let props;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render component with specified props', () => {
+    component = mount(<ConnectedComponent foo="bar" />);
+    props = component.find('TestedComponent').props();
+
+    expect(typeof props.historyPop).toBe('function');
+    expect(typeof props.historyPush).toBe('function');
+    expect(typeof props.historyReplace).toBe('function');
+    expect(props.foo).toBe('bar');
+
+    expect(mockedAction).not.toHaveBeenCalled();
+  });
+  describe('Actions', () => {
+    const actions = ['historyPush', 'historyPop', 'historyReplace'];
+    actions.forEach((action) => {
+      it(`should call ${action}`, () => {
+        const pathname = 'PATHNAME';
+        if (action === 'historyPop') {
+          props[action]();
+          expect(mockedAction).toHaveBeenCalledWith(action);
+          return;
+        }
+        props[action](pathname);
+        expect(mockedAction).toHaveBeenCalledWith(action, {
+          pathname,
+        });
+      });
+      it(`should call ${action} with options`, () => {
+        const pathname = 'PATHNAME';
+        const options = {
+          state: {},
+        };
+        if (action === 'historyPop') {
+          props[action]();
+          expect(mockedAction).toHaveBeenCalledWith(action);
+          return;
+        }
+        props[action](pathname, options);
+        expect(mockedAction).toHaveBeenCalledWith(action, {
+          pathname,
+          ...options,
+        });
+      });
+    });
+  });
+});

package/local-packages/pwa-extension-kit/src/connectors/withPageProductId.jsx

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { RouteContext } from '@shopgate/pwa-common/context';
+import { hex2bin } from '@shopgate/pwa-common/helpers/data';
+import { TaggedLogger } from '../helpers';
+
+const logger = new TaggedLogger('withPageProductId');
+
+/**
+ * Reads productId from params and tries to hex2bin decode it.
+ * @param {Object} params Params.
+ * @returns {string|null|false}
+ */
+function decodeProductIdFromParams(params) {
+  let decodedProductId = null;
+  if (typeof params.productId === 'undefined') {
+    const message = 'Connector is probably rendered outside of page containing "productId" pattern param. Please check documentation for more information: https://github.com/shopgate-professional-services/pwa-extension-kit/blob/master/src/data/connectors/README.md#withPageProductId';
+    logger.error(message);
+
+    return decodedProductId;
+  }
+
+  decodedProductId = hex2bin(params.productId);
+
+  if (params.productId && !decodedProductId) {
+    logger.warn('Wrapping with empty productId. Possibly productId used in a pathname is not bin2hex encoded.');
+  }
+
+  return decodedProductId;
+}
+// eslint-disable-next-line react/prefer-stateless-function, require-jsdoc
+class WithPageProductId extends Component {
+  static propTypes = {
+    WrappedComponent: PropTypes.func.isRequired,
+  };
+
+  /**
+   * @inheritDoc
+   */
+  render() {
+    const { WrappedComponent, ...otherProps } = this.props;
+
+    return (
+      <RouteContext.Consumer>
+        { ({ params }) =>
+          <WrappedComponent productId={decodeProductIdFromParams(params)} {...otherProps} />
+        }
+      </RouteContext.Consumer>
+    );
+  }
+}
+
+/**
+ * Returns a Wrapped Component with automatic props.productId read from RouteContext.
+ * @param {Function} WrappedComponent Component which will be wrapped with data connector.
+ * @returns {Function} React component.
+ */
+const withPageProductId = WrappedComponent => props =>
+  <WithPageProductId WrappedComponent={WrappedComponent} {...props} />;
+
+export default withPageProductId;

package/local-packages/pwa-extension-kit/src/connectors/withPageProductId.spec.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import withPageProductId from './withPageProductId';
+
+let mockedProductId;
+
+const mockedLogger = jest.fn();
+jest.mock('../helpers/TaggedLogger', () => class MockedTaggedLogger {
+  // eslint-disable-next-line max-len
+  // eslint-disable-next-line class-methods-use-this, require-jsdoc, extra-rules/potential-point-free
+  warn(...args) {
+    mockedLogger(...args);
+  }
+  // eslint-disable-next-line max-len
+  // eslint-disable-next-line class-methods-use-this, require-jsdoc, extra-rules/potential-point-free
+  error(...args) {
+    mockedLogger(...args);
+  }
+});
+
+jest.mock('@shopgate/pwa-common/context', () => ({
+  RouteContext: {
+    Consumer: (props) => {
+      // eslint-disable-next-line react/prop-types
+      const Child = props.children;
+      return <Child params={{ productId: mockedProductId }} />;
+    },
+  },
+}));
+
+describe('connectors/withPageProductId', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  // eslint-disable-next-line react/prop-types, require-jsdoc
+  const MockedComponent = props => <div>{props.productId}</div>;
+
+  it('should render with productId', () => {
+    mockedProductId = '31323334';
+    const Component = withPageProductId(MockedComponent);
+
+    const component = mount(<Component otherProp={1} />);
+    expect(component.find('MockedComponent').props()).toEqual({
+      productId: '1234',
+      otherProp: 1,
+    });
+  });
+
+  it('should render with missing productId', () => {
+    mockedProductId = undefined;
+    const Component = withPageProductId(MockedComponent);
+
+    const component = mount(<Component otherProp={1} />);
+    expect(component.find('MockedComponent').props()).toEqual({
+      productId: null,
+      otherProp: 1,
+    });
+    expect(mockedLogger).toHaveBeenCalled();
+  });
+
+  it('should render with invalid productId', () => {
+    mockedProductId = '123';
+    const Component = withPageProductId(MockedComponent);
+
+    const component = mount(<Component otherProp={1} />);
+    expect(component.find('MockedComponent').props()).toEqual({
+      productId: false,
+      otherProp: 1,
+    });
+    expect(mockedLogger).toHaveBeenCalled();
+  });
+});

package/local-packages/pwa-extension-kit/src/connectors/withPageState.jsx

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { LoadingContext } from '@shopgate/pwa-common/providers/';
+import { RouteContext } from '@shopgate/pwa-common/context';
+
+/**
+ * WithPageState component.
+ */
+// eslint-disable-next-line react/prefer-stateless-function, require-jsdoc
+class WithPageState extends Component {
+  static propTypes = {
+    WrappedComponent: PropTypes.func.isRequired,
+  };
+
+  /**
+   * @inheritDoc
+   */
+  render() {
+    const { WrappedComponent, ...otherProps } = this.props;
+    return (
+      <RouteContext.Consumer>
+        {({
+            visible,
+            pathname,
+            pattern,
+            location,
+            state,
+        }) => (
+          <LoadingContext.Consumer>
+            {({ isLoading }) => (
+              <WrappedComponent
+                isLoading={isLoading(pathname)}
+                isVisible={visible}
+                pathname={pathname}
+                pattern={pattern}
+                location={location}
+                state={state}
+                {...otherProps}
+              />
+            )}
+          </LoadingContext.Consumer>
+        )}
+      </RouteContext.Consumer>
+    );
+  }
+}
+
+export default WrappedComponent => props =>
+  <WithPageState WrappedComponent={WrappedComponent} {...props} />;

package/local-packages/pwa-extension-kit/src/connectors/withPageState.spec.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import withPageState from './withPageState';
+
+const isLoadingSpy = jest.fn();
+// eslint-disable-next-line require-jsdoc
+const mockedIsLoading = (...args) => {
+  isLoadingSpy(...args);
+  return true;
+};
+
+// eslint-disable-next-line react/prop-types, require-jsdoc
+const TestingComponent = props => <div>Other prop: {props.foo}</div>;
+
+jest.mock('@shopgate/pwa-common/providers/', () => ({
+  LoadingContext: {
+    // eslint-disable-next-line react/prop-types
+    Consumer: ({ children, ...otherProps }) => {
+      const Child = children;
+      return <Child isLoading={mockedIsLoading} {...otherProps} />;
+    },
+  },
+}));
+
+jest.mock('@shopgate/pwa-common/context', () => ({
+  RouteContext: {
+    // eslint-disable-next-line react/prop-types
+    Consumer: ({ children, ...otherProps }) => {
+      const Child = children;
+      return (
+        <Child
+          pathname="/foo/bar"
+          pattern="/foo/:id"
+          location="/foo/bar?foo=bar"
+          visible
+          state={{ title: 'foo' }}
+          {...otherProps}
+        />
+      );
+    },
+  },
+}));
+
+describe('connectors/withPageState', () => {
+  it('should render with specified props', () => {
+    const ConnectedComponent = withPageState(TestingComponent);
+    const component = mount(<ConnectedComponent foo="bar" />);
+    expect(isLoadingSpy).toHaveBeenCalledWith('/foo/bar');
+    expect(component.find('TestingComponent').props()).toEqual({
+      isVisible: true,
+      isLoading: true,
+      foo: 'bar',
+      location: '/foo/bar?foo=bar',
+      pattern: '/foo/:id',
+      pathname: '/foo/bar',
+      state: { title: 'foo' },
+    });
+  });
+});