Add theme, router and current product, React Hooks and HOC to easily access the appropriate data

extensions/@shopgate-product-reviews/frontend/package.json

@@ -19,6 +19,7 @@
     }
   },
   "devDependencies": {
+    "@shopgate/engage": "6.3.2",
     "@shopgate/eslint-config": "6.3.2",
     "@shopgate/pwa-common": "6.3.2",
     "@shopgate/pwa-common-commerce": "6.3.2",

libraries/engage/core/hocs/withCurrentProduct.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ThemeContext } from '@shopgate/pwa-common/context';
+
+/**
+ * Injects the current Product Context information into the desired component.
+ * @param {Function} WrappedComponent The react component to wrap.
+ * @returns {JSX}
+ */
+export function withCurrentProduct(WrappedComponent) {
+  return props => (
+    <ThemeContext.Consumer>
+      {({ contexts: { ProductContext } }) => (
+        <ProductContext.Consumer>
+          {productProps => <WrappedComponent {...productProps} {...props} />}
+        </ProductContext.Consumer>
+      )}
+    </ThemeContext.Consumer>
+  );
+}

libraries/engage/core/hocs/withRoute.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { RouteContext } from '@shopgate/pwa-common/context';
+
+/**
+ * Injects the route properties into the desired component.
+ * @param {Function} WrappedComponent The react component to wrap.
+ * @returns {JSX}
+ */
+export function withRoute(WrappedComponent) {
+  return props => (
+    <RouteContext.Consumer>
+      {routeContext => (
+        <WrappedComponent {...routeContext} {...props} />
+      )}
+    </RouteContext.Consumer>
+  );
+}

libraries/engage/core/hocs/withTheme.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ThemeContext } from '@shopgate/pwa-common/context';
+
+/**
+ * Injects the theme API into the desired component. This does not include the contexts.
+ * @param {Function} WrappedComponent The react component to wrap.
+ * @returns {JSX}
+ */
+export function withTheme(WrappedComponent) {
+  return props => (
+    <ThemeContext.Consumer>
+      {({ contexts, ...themeContext }) => ( // The contexts are left out in favor of other HOCs.
+        <WrappedComponent {...themeContext} {...props} />
+      )}
+    </ThemeContext.Consumer>
+  );
+}

libraries/engage/core/hooks/useCurrentProduct.js

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { ThemeContext } from '@shopgate/pwa-common/context';
+
+/**
+ * Provides the current product context props.
+ * @returns {Object}
+ */
+export function useCurrentProduct() {
+  // The contexts are left out in favor of other hooks.
+  const { contexts: { ProductContext } } = useContext(ThemeContext);
+  const productProps = useContext(ProductContext);
+  return productProps;
+}

libraries/engage/core/hooks/useRoute.js

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { RouteContext } from '@shopgate/pwa-common/context';
+
+/**
+ * Provides the route parameters.
+ * @returns {Object}
+ */
+export function useRoute() {
+  const routeContext = useContext(RouteContext);
+  return routeContext;
+}

libraries/engage/core/hooks/useTheme.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { ThemeContext } from '@shopgate/pwa-common/context';
+
+/**
+ * Provides the theme API. This does not include the contexts.
+ * @returns {Object}
+ */
+export function useTheme() {
+  // The contexts are left out in favor of other hooks.
+  const { contexts, ...themeContext } = useContext(ThemeContext);
+  return themeContext;
+}

libraries/engage/core/index.js

@@ -11,7 +11,8 @@ import { INDEX_PATH, INDEX_PATH_DEEPLINK } from '@shopgate/pwa-common/constants/
 // --------------- CORE --------------- //
 
 // Classes
-export { default as AppCommand } from '@shopgate/pwa-core/classes/AppCommand';
+// TODO: Contains circular dependency!
+// export { default as AppCommand } from '@shopgate/pwa-core/classes/AppCommand';
 export { default as GetAppPermissionsRequest } from '@shopgate/pwa-core/classes/AppPermissionsRequest/GetAppPermissionsRequest';
 export { default as RequestAppPermissionsRequest } from '@shopgate/pwa-core/classes/AppPermissionsRequest/RequestAppPermissionsRequest';
 export { default as BrightnessRequest } from '@shopgate/pwa-core/classes/BrightnessRequest';
@@ -54,7 +55,8 @@ export { default as setScrollingEnabled } from '@shopgate/pwa-core/commands/setS
 export { default as showNavigationBar } from '@shopgate/pwa-core/commands/showNavigationBar';
 export { default as showTab } from '@shopgate/pwa-core/commands/showTab';
 export * from '@shopgate/pwa-core/commands/unifiedTracking';
-export * from '@shopgate/pwa-core/commands/webStorage';
+// TODO: Contains circular dependency!
+// export * from '@shopgate/pwa-core/commands/webStorage';
 
 // Constants
 export * from '@shopgate/pwa-core/constants/AppEvents';
@@ -91,8 +93,11 @@ export { default as getDateFormatter } from '@shopgate/pwa-common/helpers/i18n/g
 export { default as getTimeFormatter } from '@shopgate/pwa-common/helpers/i18n/getTimeFormatter';
 export { default as getNumberFormatter } from '@shopgate/pwa-common/helpers/i18n/getNumberFormatter';
 export * from '@shopgate/pwa-common/helpers/legacy';
+// TODO: Can only be exported once the theme uses it. causes issues with the custom routes feature.
+/*
 export { default as portalCollection } from '@shopgate/pwa-common/helpers/portals/portalCollection';
 export { default as routePortals } from '@shopgate/pwa-common/helpers/portals/routePortals';
+*/
 export * from '@shopgate/pwa-common/helpers/redux';
 export * from '@shopgate/pwa-common/helpers/style';
 export * from '@shopgate/pwa-common/helpers/tracking';
@@ -152,11 +157,11 @@ export { default as ToastContext } from '@shopgate/pwa-common/providers/toast/co
 // --------------- ROUTER --------------- //
 
 // ACTIONS
-export * from '@shopgate/pwa-common/actions/router/historyPop';
-export * from '@shopgate/pwa-common/actions/router/historyPush';
-export * from '@shopgate/pwa-common/actions/router/historyRedirect';
-export * from '@shopgate/pwa-common/actions/router/historyReplace';
-export * from '@shopgate/pwa-common/actions/router/historyReset';
+export { historyPop } from '@shopgate/pwa-common/actions/router/historyPop';
+export { historyPush } from '@shopgate/pwa-common/actions/router/historyPush';
+export { historyRedirect } from '@shopgate/pwa-common/actions/router/historyRedirect';
+export { historyReplace } from '@shopgate/pwa-common/actions/router/historyReplace';
+export { historyReset } from '@shopgate/pwa-common/actions/router/historyReset';
 
 // HELPERS
 export {
@@ -208,3 +213,15 @@ export { default as withShowModal } from '@shopgate/pwa-common/helpers/modal/wit
 
 // SELECTORS
 export * from '@shopgate/pwa-common/selectors/modal';
+
+// --------------- HOOKS --------------- //
+
+export { useRoute } from './hooks/useRoute';
+export { useTheme } from './hooks/useTheme';
+export { useCurrentProduct } from './hooks/useCurrentProduct';
+
+// --------------- HOCs --------------- //
+
+export { withTheme } from './hocs/withTheme';
+export { withRoute } from './hocs/withRoute';
+export { withCurrentProduct } from './hocs/withCurrentProduct';

libraries/engage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "6.3.1",
+  "version": "6.3.2",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -15,11 +15,14 @@
     "connect"
   ],
   "dependencies": {
-    "@shopgate/pwa-common": "^6.3.1",
-    "@shopgate/pwa-common-commerce": "^6.3.1",
-    "@shopgate/pwa-core": "^6.3.1",
-    "@shopgate/pwa-ui-ios": "^6.3.1",
-    "@shopgate/pwa-ui-material": "^6.3.1",
-    "@shopgate/pwa-ui-shared": "^6.3.1"
+    "@shopgate/pwa-common": "6.3.2",
+    "@shopgate/pwa-common-commerce": "6.3.2",
+    "@shopgate/pwa-core": "6.3.2",
+    "@shopgate/pwa-ui-ios": "6.3.2",
+    "@shopgate/pwa-ui-material": "6.3.2",
+    "@shopgate/pwa-ui-shared": "6.3.2"
+  },
+  "devDependencies": {
+    "react": "~16.8.4"
   }
 }

themes/theme-gmd/package.json

@@ -16,6 +16,7 @@
     "e2e:user": "cypress open -P ./e2e/extensions/user"
   },
   "dependencies": {
+    "@shopgate/engage": "6.3.2",
     "@shopgate/pwa-common": "6.3.2",
     "@shopgate/pwa-common-commerce": "6.3.2",
     "@shopgate/pwa-core": "6.3.2",

themes/theme-ios11/package.json

@@ -15,6 +15,7 @@
     "e2e:checkout": "cypress open -P ./e2e/extensions/checkout"
   },
   "dependencies": {
+    "@shopgate/engage": "6.3.2",
     "@shopgate/pwa-common": "6.3.2",
     "@shopgate/pwa-common-commerce": "6.3.2",
     "@shopgate/pwa-core": "6.3.2",