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

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

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Theme } from '@shopgate/pwa-common/context';
+
+/**
+ * WithProductContext component.
+ */
+// eslint-disable-next-line react/prefer-stateless-function, require-jsdoc
+class WithProductContext extends Component {
+  static propTypes = {
+    WrappedComponent: PropTypes.func.isRequired,
+  };
+
+  /**
+   * @inheritDoc
+   */
+  render() {
+    const { WrappedComponent, ...otherProps } = this.props;
+    return (
+      <Theme>
+        {(props) => {
+          const { contexts: { ProductContext } } = props;
+
+          return (
+            <ProductContext.Consumer>
+              {productParams =>
+                <WrappedComponent productContext={productParams} {...otherProps} />
+              }
+            </ProductContext.Consumer>
+          );
+        }}
+      </Theme>
+    );
+  }
+}
+
+export default WrappedComponent => props =>
+  <WithProductContext WrappedComponent={WrappedComponent} {...props} />;

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import WithProductContext from './withProductContext';
+
+// eslint-disable-next-line react/prop-types, require-jsdoc
+const TestingComponent = props => <div>Other prop: {props.foo}</div>;
+
+jest.mock('@shopgate/pwa-common/context', () => ({
+  // eslint-disable-next-line react/prop-types
+  Theme: ({ children, ...otherProps }) => {
+    const Child = children;
+
+    const props = {
+      AppBar: () => null,
+      Drawer: () => null,
+      View: () => null,
+      contexts: {
+        ProductContext: {
+          // eslint-disable-next-line react/prop-types
+          Consumer: ({ children: ContextChildren, ...contextProps }) => (
+            <ContextChildren
+              options={{}}
+              productId="123"
+              variantId="123-45"
+              conditioner={{}}
+              {...contextProps}
+            />
+          ),
+        },
+      },
+      ...otherProps,
+    };
+
+    return (
+      <Child {...props} />
+    );
+  },
+}));
+
+describe('connectors/withProductContext', () => {
+  it('should render with specified props', () => {
+    const ConnectedComponent = WithProductContext(TestingComponent);
+    const component = mount(<ConnectedComponent foo="bar" />);
+
+    expect(component.find('TestingComponent').props()).toEqual({
+      foo: 'bar',
+      productContext: {
+        options: {},
+        conditioner: {},
+        productId: '123',
+        variantId: '123-45',
+      },
+    });
+  });
+});

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

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Theme } from '@shopgate/pwa-common/context';
+
+/**
+ * WithThemeComponents component.
+ */
+// eslint-disable-next-line react/prefer-stateless-function, require-jsdoc
+class WithThemeComponents extends Component {
+  static propTypes = {
+    WrappedComponent: PropTypes.func.isRequired,
+  };
+
+  /**
+   * @inheritDoc
+   */
+  render() {
+    const { WrappedComponent, ...otherProps } = this.props;
+    return (
+      <Theme>
+        {(props) => {
+          const { contexts, ...components } = props;
+
+          return (
+            <WrappedComponent
+              {...components}
+              {...otherProps}
+            />
+          );
+        }}
+      </Theme>
+    );
+  }
+}
+
+export default WrappedComponent => props =>
+  <WithThemeComponents WrappedComponent={WrappedComponent} {...props} />;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import withThemeComponents from './withThemeComponents';
+
+// eslint-disable-next-line react/prop-types, require-jsdoc
+const TestingComponent = props => <div>Other prop: {props.foo}</div>;
+
+jest.mock('@shopgate/pwa-common/context', () => ({
+  // eslint-disable-next-line react/prop-types
+  Theme: ({ children, ...otherProps }) => {
+    const Child = children;
+
+    const props = {
+      AppBar: () => null,
+      Drawer: () => null,
+      View: () => null,
+      contexts: {
+        ProductContext: {},
+      },
+      ...otherProps,
+    };
+
+    return (
+      <Child {...props} />
+    );
+  },
+}));
+
+describe('connectors/withThemeComponents', () => {
+  it('should render with specified props', () => {
+    const ConnectedComponent = withThemeComponents(TestingComponent);
+    const component = mount(<ConnectedComponent foo="bar" />);
+
+    expect(component.find('TestingComponent').prop('contexts')).toBeUndefined();
+
+    expect(Object.keys(component.find('TestingComponent').props())).toMatchObject([
+      'AppBar',
+      'Drawer',
+      'View',
+      'foo',
+    ]);
+  });
+});

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import {
+  isUserLoggedIn,
+  getUserFirstName,
+  getUserEmail,
+  getUserDisplayName,
+} from '@shopgate/pwa-common/selectors/user';
+import {
+  getUserLastName,
+  getUserId,
+} from './selectors/user';
+import { User } from '../proptypes';
+
+/**
+ * WithUser wrapper.
+ * @param {function} WrappedComponent Wrapped component.
+ * @param {Object} user Mapped user data.
+ * @returns {JSX}
+ */
+const WithUser = ({ WrappedComponent, user, ...otherProps }) => (
+  <WrappedComponent
+    user={user}
+    {...otherProps}
+  />
+);
+
+WithUser.propTypes = {
+  user: User.isRequired,
+  WrappedComponent: PropTypes.func.isRequired,
+};
+
+/**
+ * Maps state to props.
+ * @param {Object} state State.
+ * @returns {Object}
+ */
+const mapStateToProps = state => ({
+  user: {
+    isLoggedIn: isUserLoggedIn(state) || false,
+    id: getUserId(state) || null,
+    email: getUserEmail(state) || null,
+    firstName: getUserFirstName(state) || null,
+    lastName: getUserLastName(state) || null,
+    displayName: getUserDisplayName(state) || null,
+  },
+
+});
+
+const ConnectedWithUser = connect(mapStateToProps)(WithUser);
+
+/**
+* Returns a Wrapped Component with current user data.
+* @param {function} WrappedComponent Component which will be wrapped with data connector.
+* @returns {function} React component.
+*/
+const withUser = WrappedComponent => props =>
+  <ConnectedWithUser WrappedComponent={WrappedComponent} {...props} />;
+
+export default withUser;

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import withUser from './withUser';
+
+let mockedMapStateToPropsSpy = jest.fn();
+const mockedMapStateToPropsResult = {
+  user: {
+    isLoggedIn: true,
+    id: 'test-id',
+    email: 'foo@example.com',
+    firstName: 'First name',
+    lastName: 'Last name',
+    displayName: 'First name Last name',
+  }
+}
+jest.mock('react-redux', () => ({
+  connect: (mapStateToProps) => Component => props => {
+    mockedMapStateToPropsSpy(mapStateToProps);
+    return (
+      <Component
+        user={mockedMapStateToPropsResult.user}
+        {...props}
+      />
+    )
+  }
+}));
+describe('/connectors/withUser', () => {
+  const TestedComponent = props => <div>Test</div>;
+  it('should create component and pass external props', () => {
+    const ConnectedComponent = withUser(TestedComponent);
+    const component = mount(<ConnectedComponent foo="bar" />);
+
+    expect(component.find('TestedComponent').props()).toEqual({
+      user: {
+        ...mockedMapStateToPropsResult.user,
+      },
+      foo: 'bar',
+    });
+  });
+
+  it('should map state to props correctly when data is available', () => {
+    const state = {
+      user: {
+        login: {
+          isLoggedIn: true,
+        },
+        data: {
+          id: 'foo',
+          mail: 'bar',
+          firstName: 'first name',
+          lastName: 'last name',
+        },
+      },
+    };
+
+    const mapStateToProps = mockedMapStateToPropsSpy.mock.calls[0][0];
+    expect(mapStateToProps(state).user).toEqual({
+      isLoggedIn: true,
+      id: 'foo',
+      email: 'bar',
+      firstName: 'first name',
+      lastName: 'last name',
+      displayName: 'first name last name',
+    });
+  });
+
+  it('should map state to props correctly when data is NOT available', () => {
+    const state = {
+      user: {
+        login: {},
+        data: {},
+      },
+    };
+
+    const mapStateToProps = mockedMapStateToPropsSpy.mock.calls[0][0];
+    expect(mapStateToProps(state).user).toEqual({
+      isLoggedIn: false,
+      id: null,
+      email: null,
+      firstName: null,
+      lastName: null,
+      displayName: null,
+    });
+  });
+
+  it('should map state to props correctly when data is NOT prepared', () => {
+    const state = {
+      user: {},
+    };
+
+    const mapStateToProps = mockedMapStateToPropsSpy.mock.calls[0][0];
+    expect(mapStateToProps(state).user).toEqual({
+      isLoggedIn: false,
+      id: null,
+      email: null,
+      firstName: null,
+      lastName: null,
+      displayName: null,
+    });
+  });
+});

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

@@ -0,0 +1,28 @@
+# Shopgate Connect - PWA Extension Kit
+## .env - environment helpers
+### isIOSTheme
+This function checks the extension runs in an [ios theme](https://github.com/shopgate/theme-ios11).
+Check if performed during the app lifetime. Every time the function is called.
+
+#### Purpose
+Most Shopgate apps are deployed with gmd and ios templates. Even though both templates are quite similar, there are some rare cases when it's needed to adjust your component in order to achieve better user experience, or avoid some pitfalls.
+
+#### Not intended usage. When NOT to use it
+It DOES NOT tests against the navigator / User Agent. Some Shopgate apps are configured in a way that in both iOS and Android same template is used.
+
+It should not be used to obtain if current platform is either iOS or Android. To check what is the current platform please use `@shopgate/pwa-common/selectors/client` package.
+
+#### Example usage:
+```jsx
+import isIOSTheme from '@shopgate-ps/pwa-extension-kit/env/helpers/isIOSTheme';
+import ButtonOptimisedForIOS from '../components/iosButton';
+import ButtonOptimisedForGMD from '../components/gmdButton';
+
+function renderButton() {
+  if (isIOSTheme()) {
+    return <ButtonOptimisedForIOS />;
+  }
+  
+  return <ButtonOptimisedForGMD />;
+}
+```

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

@@ -0,0 +1,7 @@
+import isIOSTheme from './isIOSTheme';
+
+export { isIOSTheme };
+
+export default {
+  isIOSTheme,
+};

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

@@ -0,0 +1,12 @@
+import helpers, { isIOSTheme } from './index';
+
+describe('env/helpers', () => {
+  it('should export all functions as default', () => {
+    expect(typeof helpers).toBe('object');
+    expect(typeof helpers.isIOSTheme).toBe('function');
+  });
+
+  it('should export isIOSTheme as named export', () => {
+    expect(typeof isIOSTheme).toBe('function');
+  });
+});

package/local-packages/pwa-extension-kit/src/env/helpers/isIOSTheme.js

@@ -0,0 +1,10 @@
+/**
+ * Checks if current theme is an iOS theme.
+ * @link https://github.com/shopgate-professional-services/pwa-extension-kit/src/env/README.md
+ * @returns {boolean}
+ */
+function isIOSTheme() {
+  return process.env.THEME.includes('ios');
+}
+
+export default isIOSTheme;

package/local-packages/pwa-extension-kit/src/env/helpers/isIOSTheme.spec.js

@@ -0,0 +1,16 @@
+import isiOSTheme from './isIOSTheme';
+
+describe('isiOSTheme', () => {
+  const orgTHEME = process.env.THEME;
+  afterAll(() => {
+    process.env.THEME = orgTHEME;
+  });
+  it('should return false for gmd', () => {
+    process.env.THEME = 'gmd';
+    expect(isiOSTheme()).toBe(false);
+  });
+  it('should return true for ios', () => {
+    process.env.THEME = 'ios';
+    expect(isiOSTheme()).toBe(true);
+  });
+});

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

@@ -0,0 +1,7 @@
+import helpers from './helpers';
+
+export { helpers };
+
+export default {
+  helpers,
+};

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

@@ -0,0 +1,13 @@
+import env, { helpers } from './index';
+
+describe('env/helpers', () => {
+  it('should export all functions as default', () => {
+    expect(typeof env).toBe('object');
+    expect(typeof env.helpers).toBe('object');
+  });
+
+  it('should export isIOSTheme as named export', () => {
+    expect(typeof helpers).toBe('object');
+    expect(typeof helpers.isIOSTheme).toBe('function');
+  });
+});

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

@@ -0,0 +1,30 @@
+# Shopgate Connect - PWA Extension Kit
+## .helpers
+### TaggedLogger
+This class is handy for printing tagged logs in an extension or module. We encourage to use tagged logs since it helps everyone in case of debugging (also on production) by showing explicitly which extension/module prints the log. 
+
+#### Usage
+To instantiate the `TaggedLogger` simply create new by adding a tag name: `new TaggedLogger('MyTagName')`.
+
+`TaggedLogger` is a wrapper around `console` which works both in the node.js and browser environment in a similar way.
+
+Currently supported methods are:
+- `.log` - prints decorated `console.log`
+- `.warn` - prints decorated `console.warn`
+- `.error` - prints decorated `console.error`
+
+#### Example usage:
+```jsx
+import { TaggedLogger} from '@shopgate-ps/pwa-extension-kit/helpers'
+
+function veryComplexFunctionOrClass() {
+  const logger = new TaggedLogger('MyVeryComplexFunctionOrClass');
+  
+  // Will result in console.log("[MyVeryComplexFunctionOrClass] Starting my complex procedure")
+  logger.log('Starting my complex procedure'); 
+  
+  const response = {foo: 'bar'};
+  // Will result in console.error("[MyVeryComplexFunctionOrClass] Unexpected response", response)
+  logger.error('Unexpected response', response); 
+}
+```

package/local-packages/pwa-extension-kit/src/helpers/TaggedLogger.js

@@ -0,0 +1,50 @@
+import getConsole from './_getConsole';
+
+const console = getConsole();
+/**
+ * Tagged Logger.
+ * @link https://github.com/shopgate-professional-services/pwa-extension-kit/blob/master/helpers/README.md
+ */
+class TaggedLogger {
+  /**
+   * Instantiate TaggedLogger with given tag.
+   * @param {string} tag Tag which will be appended to all logs.
+   */
+  constructor(tag) {
+    this.tag = tag;
+  }
+
+  /**
+   * Prints actual log.
+   * @param {string} method Name of method (log, warn, error)
+   */
+  print(method, message, ...rest) {
+    console[method](`[${this.tag}] ${message}`, ...rest);
+  }
+
+  /**
+   * Prints tagged log.
+   * @param {string} message Log message.
+   */
+  log(message, ...args) {
+    this.print('log', message, ...args);
+  }
+
+  /**
+   * Prints tagged warning.
+   * @param {string} message Log message.
+   */
+  warn(message, ...args) {
+    this.print('warn', message, ...args);
+  }
+
+  /**
+   * Prints tagged error.
+   * @param {string} message Log message.
+   */
+  error(message, ...args) {
+    this.print('error', message, ...args);
+  }
+}
+
+export default TaggedLogger;

package/local-packages/pwa-extension-kit/src/helpers/TaggedLogger.spec.js

@@ -0,0 +1,41 @@
+import TaggedLogger from './TaggedLogger';
+
+const mockedLogMethod = jest.fn();
+
+jest.mock('./_getConsole', () => () => ({
+  log: (...args) => mockedLogMethod('log', ...args),
+  warn: (...args) => mockedLogMethod('warn', ...args),
+  error: (...args) => mockedLogMethod('error', ...args),
+}));
+
+describe('helpers/TaggedLogger', () => {
+  const testTag = 'TEST_TAG';
+  const expectedTagPrefix = '[TEST_TAG]';
+  let instance;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should create object', () => {
+    instance = new TaggedLogger(testTag);
+    expect(typeof instance).toBe('object');
+    expect(instance.tag).toBe(testTag);
+  });
+
+  const supportedMethods = ['log', 'warn', 'error'];
+
+  supportedMethods.forEach((method) => {
+    it(`should send tagged .${method} with message only`, () => {
+      const text = `Log message only for ${method}`;
+      instance[method](text);
+      expect(mockedLogMethod).toHaveBeenCalledWith(method, `${expectedTagPrefix} ${text}`);
+    });
+
+    it(`should send tagged .${method} with arguments`, () => {
+      const text = `Log message with arguments for ${method}`;
+      instance[method](text, 1, 2);
+      expect(mockedLogMethod).toHaveBeenCalledWith(method, `${expectedTagPrefix} ${text}`, 1, 2);
+    });
+  });
+});

package/local-packages/pwa-extension-kit/src/helpers/_getConsole.js

@@ -0,0 +1,4 @@
+/**
+ * Warning: not intended for public usage!
+ */
+export default () => console;

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

@@ -0,0 +1,7 @@
+import TaggedLogger from './TaggedLogger';
+
+export { TaggedLogger };
+
+export default {
+  TaggedLogger,
+};

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

@@ -0,0 +1,12 @@
+import helpers, { TaggedLogger } from './index';
+
+describe('/helpers', () => {
+  it('should export all functions as default', () => {
+    expect(typeof helpers).toBe('object');
+    expect(typeof helpers.TaggedLogger).toBe('function');
+  });
+
+  it('should export as named export', () => {
+    expect(typeof TaggedLogger).toBe('function');
+  });
+});

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

@@ -0,0 +1,16 @@
+import env from './env';
+import connectors from './connectors';
+import helpers from './helpers';
+
+export { env };
+
+export { connectors };
+
+export { helpers };
+
+export default {
+  env,
+  connectors,
+  helpers,
+};
+

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

@@ -0,0 +1,16 @@
+import kit, { env, connectors, helpers } from './index';
+
+describe('index', () => {
+  it('should export all functions as default', () => {
+   expect(typeof kit).toBe('object');
+   expect(typeof kit.env).toBe('object');
+   expect(typeof kit.connectors).toBe('object');
+   expect(typeof kit.helpers).toBe('object');
+  });
+
+  it('should export as named export', () => {
+    expect(typeof env).toBe('object');
+    expect(typeof connectors).toBe('object');
+    expect(typeof helpers).toBe('object');
+  });
+});

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

@@ -0,0 +1,9 @@
+# Shopgate Connect - PWA Extension Kit
+## .propTypes
+Common prop types definitions used within the extension kit.
+All objects here are valid PropTypes objects (ready to be used in React component's prop types definition);
+
+### User
+User data object. Properties and example usage is described in [withUser] connector.
+
+[withUser]: https://github.com/shopgate-professional-services/pwa-extension-kit/blob/master/src/connectors/README.md#withUser

package/local-packages/pwa-extension-kit/src/proptypes/User.js

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+
+const User = PropTypes.shape({
+  isLoggedIn: PropTypes.bool.isRequired,
+  id: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  email: PropTypes.string,
+  firstName: PropTypes.string,
+  lastName: PropTypes.string,
+  displayName: PropTypes.string,
+});
+
+export default User;

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

@@ -0,0 +1,7 @@
+import User from './User';
+
+export { User };
+
+export default {
+  User,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/webpack",
-  "version": "7.30.3-beta.1",
+  "version": "7.30.3-beta.3",
   "description": "The webpack configuration for Shopgate's Engage.",
   "main": "webpack.config.js",
   "license": "Apache-2.0",