feat: Added cross product recommendations experiment initial render + query logic (#158)

src/containers/WidgetContainers/LoadedSidebar/index.jsx

@@ -1,13 +1,22 @@
 import React from 'react';
 
 import RecommendationsPanel from 'widgets/RecommendationsPanel';
+import hooks from 'widgets/ProductRecommendations/hooks';
 
-export const WidgetSidebar = () => (
-  <div className="widget-sidebar">
-    <div className="d-flex">
-      <RecommendationsPanel />
-    </div>
-  </div>
-);
+export const WidgetSidebar = () => {
+  const showRecommendationsFooter = hooks.useShowRecommendationsFooter();
+
+  if (!showRecommendationsFooter) {
+    return (
+      <div className="widget-sidebar">
+        <div className="d-flex">
+          <RecommendationsPanel />
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+};
 
 export default WidgetSidebar;

src/containers/WidgetContainers/LoadedSidebar/index.test.jsx

@@ -1,14 +1,25 @@
 import { shallow } from 'enzyme';
 
+import hooks from 'widgets/ProductRecommendations/hooks';
 import WidgetSidebar from '.';
 
 jest.mock('widgets/LookingForChallengeWidget', () => 'LookingForChallengeWidget');
+jest.mock('widgets/ProductRecommendations/hooks', () => ({
+  useShowRecommendationsFooter: jest.fn(),
+}));
 
 describe('WidgetSidebar', () => {
   describe('snapshots', () => {
     test('default', () => {
+      hooks.useShowRecommendationsFooter.mockReturnValueOnce(false);
       const wrapper = shallow(<WidgetSidebar />);
       expect(wrapper).toMatchSnapshot();
     });
   });
+
+  test('is hidden if footer is shown', () => {
+    hooks.useShowRecommendationsFooter.mockReturnValueOnce(true);
+    const wrapper = shallow(<WidgetSidebar />);
+    expect(wrapper.type()).toBeNull();
+  });
 });

src/containers/WidgetContainers/NoCoursesSidebar/index.jsx

@@ -1,13 +1,22 @@
 import React from 'react';
 
 import RecommendationsPanel from 'widgets/RecommendationsPanel';
+import hooks from 'widgets/ProductRecommendations/hooks';
 
-export const WidgetSidebar = () => (
-  <div className="widget-sidebar px-2">
-    <div className="d-flex">
-      <RecommendationsPanel />
-    </div>
-  </div>
-);
+export const WidgetSidebar = () => {
+  const showRecommendationsFooter = hooks.useShowRecommendationsFooter();
+
+  if (!showRecommendationsFooter) {
+    return (
+      <div className="widget-sidebar px-2">
+        <div className="d-flex">
+          <RecommendationsPanel />
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+};
 
 export default WidgetSidebar;

src/containers/WidgetContainers/NoCoursesSidebar/index.test.jsx

@@ -1,14 +1,25 @@
 import { shallow } from 'enzyme';
 
+import hooks from 'widgets/ProductRecommendations/hooks';
 import WidgetSidebar from '.';
 
 jest.mock('widgets/LookingForChallengeWidget', () => 'LookingForChallengeWidget');
+jest.mock('widgets/ProductRecommendations/hooks', () => ({
+  useShowRecommendationsFooter: jest.fn(),
+}));
 
 describe('WidgetSidebar', () => {
   describe('snapshots', () => {
     test('default', () => {
+      hooks.useShowRecommendationsFooter.mockReturnValueOnce(false);
       const wrapper = shallow(<WidgetSidebar />);
       expect(wrapper).toMatchSnapshot();
     });
   });
+
+  test('is hidden if footer is shown', () => {
+    hooks.useShowRecommendationsFooter.mockReturnValueOnce(true);
+    const wrapper = shallow(<WidgetSidebar />);
+    expect(wrapper.type()).toBeNull();
+  });
 });

src/containers/WidgetContainers/WidgetFooter/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WidgetFooter snapshots default 1`] = `
+<div
+  className="widget-footer"
+>
+  <ProductRecommendations />
+</div>
+`;

src/containers/WidgetContainers/WidgetFooter/index.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import ProductRecommendations from 'widgets/ProductRecommendations';
+import hooks from 'widgets/ProductRecommendations/hooks';
+
+export const WidgetFooter = () => {
+  const showRecommendationsFooter = hooks.useShowRecommendationsFooter();
+
+  if (showRecommendationsFooter) {
+    return (
+      <div className="widget-footer">
+        <ProductRecommendations />
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export default WidgetFooter;

src/containers/WidgetContainers/WidgetFooter/index.test.jsx

@@ -0,0 +1,25 @@
+import { shallow } from 'enzyme';
+
+import hooks from 'widgets/ProductRecommendations/hooks';
+import WidgetFooter from '.';
+
+jest.mock('widgets/LookingForChallengeWidget', () => 'LookingForChallengeWidget');
+jest.mock('widgets/ProductRecommendations/hooks', () => ({
+  useShowRecommendationsFooter: jest.fn(),
+}));
+
+describe('WidgetFooter', () => {
+  describe('snapshots', () => {
+    test('default', () => {
+      hooks.useShowRecommendationsFooter.mockReturnValueOnce(true);
+      const wrapper = shallow(<WidgetFooter />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  test('is hidden when hook returns false', () => {
+    hooks.useShowRecommendationsFooter.mockReturnValueOnce(false);
+    const wrapper = shallow(<WidgetFooter />);
+    expect(wrapper.type()).toBeNull();
+  });
+});