feat: add painted door button for no recommendations (#198)

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

@@ -5,7 +5,7 @@ exports[`WidgetSidebar snapshots default 1`] = `
   className="widget-sidebar"
 >
   <div
-    className="d-flex"
+    className="d-flex flex-column"
   >
     <RecommendationsPanel />
   </div>

src/containers/WidgetContainers/LoadedSidebar/index.jsx

@@ -12,7 +12,7 @@ export const WidgetSidebar = ({ setSidebarShowing }) => {
 
     return (
       <div className="widget-sidebar">
-        <div className="d-flex">
+        <div className="d-flex flex-column">
           <RecommendationsPanel />
         </div>
       </div>

src/widgets/RecommendationsPanel/index.jsx

@@ -4,6 +4,9 @@ import LookingForChallengeWidget from 'widgets/LookingForChallengeWidget';
 import LoadingView from './LoadingView';
 import LoadedView from './LoadedView';
 import hooks from './hooks';
+import RecommendationsPaintedDoorBtn from '../RecommendationsPaintedDoorBtn';
+import { RECOMMENDATIONS_PANEL } from '../RecommendationsPaintedDoorBtn/constants';
+import { usePaintedDoorExperimentContext } from '../RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
 
 export const RecommendationsPanel = () => {
   const {
@@ -13,6 +16,29 @@ export const RecommendationsPanel = () => {
     isLoaded,
     isLoading,
   } = hooks.useRecommendationPanelData();
+  const {
+    experimentVariation,
+    isPaintedDoorWidgetBtnVariation,
+    experimentLoading,
+  } = usePaintedDoorExperimentContext();
+
+  const getDefaultOrFailedStateWidget = () => {
+    if (!experimentLoading && isPaintedDoorWidgetBtnVariation) {
+      return (
+        <>
+          <LookingForChallengeWidget />
+          <div className="pt-3" />
+          <RecommendationsPaintedDoorBtn
+            experimentVariation={experimentVariation}
+            placement={RECOMMENDATIONS_PANEL}
+          />
+        </>
+      );
+    }
+    return (
+      <LookingForChallengeWidget />
+    );
+  };
 
   if (isLoading) {
     return (<LoadingView />);
@@ -23,10 +49,10 @@ export const RecommendationsPanel = () => {
     );
   }
   if (isFailed) {
-    return (<LookingForChallengeWidget />);
+    return getDefaultOrFailedStateWidget();
   }
   // default fallback
-  return (<LookingForChallengeWidget />);
+  return getDefaultOrFailedStateWidget();
 };
 
 export default RecommendationsPanel;

src/widgets/RecommendationsPanel/index.test.jsx

@@ -7,6 +7,8 @@ import mockData from './mockData';
 import LoadedView from './LoadedView';
 import LoadingView from './LoadingView';
 import RecommendationsPanel from '.';
+import { usePaintedDoorExperimentContext } from '../RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
+import RecommendationsPaintedDoorBtn from '../RecommendationsPaintedDoorBtn';
 
 jest.mock('./hooks', () => ({
   useRecommendationPanelData: jest.fn(),
@@ -14,6 +16,9 @@ jest.mock('./hooks', () => ({
 jest.mock('widgets/LookingForChallengeWidget', () => 'LookingForChallengeWidget');
 jest.mock('./LoadingView', () => 'LoadingView');
 jest.mock('./LoadedView', () => 'LoadedView');
+jest.mock('widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext', () => ({
+  usePaintedDoorExperimentContext: jest.fn(),
+}));
 
 const { courses } = mockData;
 
@@ -28,38 +33,108 @@ describe('RecommendationsPanel snapshot', () => {
     isLoading: false,
     ...defaultLoadedViewProps,
   };
-  it('displays LoadingView if request is loading', () => {
-    hooks.useRecommendationPanelData.mockReturnValueOnce({
-      ...defaultValues,
-      isLoading: true,
+  describe('RecommendationsPanel recommendations tests', () => {
+    beforeEach(() => {
+      usePaintedDoorExperimentContext.mockReturnValueOnce({
+        experimentVariation: '',
+        isPaintedDoorWidgetBtnVariation: false,
+        experimentLoading: false,
+      });
+    });
+    it('displays LoadingView if request is loading', () => {
+      hooks.useRecommendationPanelData.mockReturnValueOnce({
+        ...defaultValues,
+        isLoading: true,
+      });
+      expect(shallow(<RecommendationsPanel />)).toMatchObject(shallow(<LoadingView />));
+    });
+    it('displays LoadedView with courses if request is loaded', () => {
+      hooks.useRecommendationPanelData.mockReturnValueOnce({
+        ...defaultValues,
+        courses,
+        isLoaded: true,
+      });
+      expect(shallow(<RecommendationsPanel />)).toMatchObject(
+        shallow(<LoadedView {...defaultLoadedViewProps} courses={courses} />),
+      );
+    });
+    it('displays LookingForChallengeWidget if request is failed', () => {
+      hooks.useRecommendationPanelData.mockReturnValueOnce({
+        ...defaultValues,
+        isFailed: true,
+      });
+      expect(shallow(<RecommendationsPanel />)).toMatchObject(
+        shallow(<LookingForChallengeWidget />),
+      );
+    });
+    it('defaults to LookingForChallengeWidget if no flags are true', () => {
+      hooks.useRecommendationPanelData.mockReturnValueOnce({
+        ...defaultValues,
+      });
+      expect(shallow(<RecommendationsPanel />)).toMatchObject(
+        shallow(<LookingForChallengeWidget />),
+      );
     });
-    expect(shallow(<RecommendationsPanel />)).toMatchObject(shallow(<LoadingView />));
   });
-  it('displays LoadedView with courses if request is loaded', () => {
-    hooks.useRecommendationPanelData.mockReturnValueOnce({
-      ...defaultValues,
-      courses,
-      isLoaded: true,
+
+  describe('RecommendationsPanel painted door exp tests', () => {
+    it('displays painted door btn if user is in variation and request is failed', () => {
+      hooks.useRecommendationPanelData.mockReturnValueOnce({
+        ...defaultValues,
+        isFailed: true,
+      });
+      usePaintedDoorExperimentContext.mockReturnValueOnce({
+        experimentVariation: '',
+        isPaintedDoorWidgetBtnVariation: true,
+        experimentLoading: false,
+      });
+
+      const wrapper = shallow(<RecommendationsPanel />);
+      expect(wrapper.find(RecommendationsPaintedDoorBtn).exists()).toBe(true);
     });
-    expect(shallow(<RecommendationsPanel />)).toMatchObject(
-      shallow(<LoadedView {...defaultLoadedViewProps} courses={courses} />),
-    );
-  });
-  it('displays LookingForChallengeWidget if request is failed', () => {
-    hooks.useRecommendationPanelData.mockReturnValueOnce({
-      ...defaultValues,
-      isFailed: true,
+    it('displays painted door btn if user is in variation and no flags are set (defaults)', () => {
+      hooks.useRecommendationPanelData.mockReturnValueOnce({
+        ...defaultValues,
+        isFailed: true,
+      });
+      usePaintedDoorExperimentContext.mockReturnValueOnce({
+        experimentVariation: '',
+        isPaintedDoorWidgetBtnVariation: true,
+        experimentLoading: false,
+      });
+
+      const wrapper = shallow(<RecommendationsPanel />);
+      expect(wrapper.find(RecommendationsPaintedDoorBtn).exists()).toBe(true);
     });
-    expect(shallow(<RecommendationsPanel />)).toMatchObject(
-      shallow(<LookingForChallengeWidget />),
-    );
-  });
-  it('defaults to LookingForChallengeWidget if no flags are true', () => {
-    hooks.useRecommendationPanelData.mockReturnValueOnce({
-      ...defaultValues,
+    it('renders only LookingForChallengeWidget if user is not in variation', () => {
+      hooks.useRecommendationPanelData.mockReturnValueOnce({
+        ...defaultValues,
+        isFailed: true,
+      });
+      usePaintedDoorExperimentContext.mockReturnValueOnce({
+        experimentVariation: '',
+        isPaintedDoorWidgetBtnVariation: false,
+        experimentLoading: false,
+      });
+
+      expect(shallow(<RecommendationsPanel />)).toMatchObject(
+        shallow(<LookingForChallengeWidget />),
+      );
+    });
+    it('renders only LookingForChallengeWidget if experiment is loading', () => {
+      hooks.useRecommendationPanelData.mockReturnValueOnce({
+        ...defaultValues,
+        isFailed: true,
+      });
+      usePaintedDoorExperimentContext.mockReturnValueOnce({
+        experimentVariation: '',
+        isPaintedDoorWidgetBtnVariation: false,
+        experimentLoading: true,
+      });
+
+      expect(shallow(<RecommendationsPanel />)).toMatchObject(
+        shallow(<LookingForChallengeWidget />),
+      );
     });
-    expect(shallow(<RecommendationsPanel />)).toMatchObject(
-      shallow(<LookingForChallengeWidget />),
-    );
   });
 });