Ww datap 412 mobile tour

src/components/Filters/FilterPanel.js

@@ -29,17 +29,6 @@ export class FilterPanel extends React.Component {
 
     return (
       <div>
-        {!!this.props.hasFilterToggle && (
-          <div className="filter-button">
-            <button
-              className="a-btn"
-              title="Filter results"
-              onClick={this.props.onFilterToggle}
-            >
-              Filter results
-            </button>
-          </div>
-        )}
         {!!this.props.hasFilters && (
           <section className="filter-panel">
             {!!this.props.hasButton && (
@@ -111,7 +100,6 @@ export class FilterPanel extends React.Component {
 
 export const mapStateToProps = (state) => ({
   hasButton: state.view.width < 750,
-  hasFilterToggle: state.view.width < 600 && !state.view.hasFilters,
   hasFilters: state.view.hasFilters,
 });
 
@@ -129,7 +117,6 @@ FilterPanel.defaultProps = {
 };
 
 FilterPanel.propTypes = {
-  hasFilterToggle: PropTypes.bool.isRequired,
   onFilterToggle: PropTypes.func.isRequired,
   hasFilters: PropTypes.bool,
   hasButton: PropTypes.bool.isRequired,

src/components/Filters/FilterPanelToggle.less

@@ -1,5 +1,14 @@
 .filter-panel-toggle {
-  @media @desktop, @tablet-lg, @phone {
+  @media @superwide, @desktop, @tablet-lg {
     display: none;
   }
+  @media @tablet-sm, @phone {
+    display: block;
+    width: 90vw;
+    margin-left: auto;
+    margin-right: auto;
+    & .a-btn {
+      width: 100%;
+    }
+  }
 }

src/components/List/ListPanel/ListPanel.js

@@ -94,8 +94,8 @@ export const ListPanel = () => {
       <ActionBar />
       <TabbedNavigation />
       {!!hasMobileFilters && <FilterPanel />}
+      <FilterPanelToggle />
       <div className="layout-row refine-bar">
-        <FilterPanelToggle />
         <Separator />
         <Select
           label="Select the number of results to display at a time"

src/components/Map/MapPanel.js

@@ -84,8 +84,8 @@ export const MapPanel = () => {
         <Warning text={WARNING_MESSAGE} closeFn={onDismissWarning} />
       )}
       {!!hasMobileFilters && <FilterPanel />}
+      <FilterPanelToggle />
       <div className="layout-row refine-bar">
-        <FilterPanelToggle />
         <Separator />
         <PerCapita />
       </div>

src/components/Tour/Tour.js

@@ -6,6 +6,7 @@ import { selectQueryTab } from '../../reducers/query/selectors';
 import {
   selectViewIsPrintMode,
   selectViewShowTour,
+  selectViewWidth,
 } from '../../reducers/view/selectors';
 import { Steps } from 'intro.js-react';
 import { TOUR_STEPS } from './constants/tourStepsConstants';
@@ -17,7 +18,32 @@ export const Tour = () => {
   const showTour = useSelector(selectViewShowTour);
   const tab = useSelector(selectQueryTab);
   const isPrintMode = useSelector(selectViewIsPrintMode);
-  const steps = TOUR_STEPS[tab];
+  const viewWidth = useSelector(selectViewWidth);
+
+  const mobileStepOpen = {
+    disableInteraction: false,
+    element: '.filter-panel-toggle .m-btn-group .a-btn',
+    intro:
+      'On mobile devices, click the Filter Panel toggle button to open the Filter Panel. Please click the button to proceed.',
+  };
+  const mobileStepClose = {
+    disableInteraction: false,
+    element: '.filter-panel-toggle .m-btn-group .a-btn',
+    intro:
+      'Click the Filter Panel toggle button again to close the Filter Panel. Please close the Filter Panel to proceed.',
+  };
+
+  const steps =
+    viewWidth < 750
+      ? TOUR_STEPS[tab]
+          .slice(0, 3)
+          .concat(
+            mobileStepOpen,
+            TOUR_STEPS[tab].slice(4, 7),
+            mobileStepClose,
+            TOUR_STEPS[tab].slice(7),
+          )
+      : TOUR_STEPS[tab];
   const stepRef = useRef();
 
   // INTRODUCTION / TUTORIAL OPTIONS:
@@ -63,7 +89,43 @@ export const Tour = () => {
       });
     };
     const waitOn = new MutationObserver(callBack);
-    waitOn.observe(document, { subtree: true, childList: true });
+    waitOn.observe(document.querySelector('#ccdb-ui-root'), {
+      subtree: true,
+      childList: true,
+    });
+
+    // Add listener to filter toggle if it's mobile and at step 4 or 7
+    const filterListener = () => {
+      // Make sure next button isn't being hidden from steps 3 or 7
+      document
+        .querySelector('.introjs-nextbutton')
+        ?.setAttribute('style', 'display: inline');
+      // Wait for date inputs to render, then proceed
+      const promise = new Promise((resolve) => {
+        if (currentStep === 7) return resolve();
+        const interval = setInterval(() => {
+          if (document.querySelector('.date-filter') !== null) {
+            clearInterval(interval);
+            return resolve();
+          }
+        }, 10);
+      });
+      promise.then(() => {
+        ref.current.introJs.nextStep().then(() => {
+          document
+            .querySelector(mobileStepOpen.element)
+            .removeEventListener('click', filterListener);
+        });
+      });
+    };
+    if (viewWidth < 750 && (currentStep === 3 || currentStep === 7)) {
+      document
+        .querySelector('.introjs-nextbutton')
+        .setAttribute('style', 'display: none');
+      document
+        .querySelector(mobileStepOpen.element)
+        .addEventListener('click', filterListener);
+    }
   }
 
   /**

src/components/Tour/Tour.less

@@ -15,3 +15,21 @@
     margin-left: @gutter-normal;
   }
 }
+
+.introjs-tooltipReferenceLayer > .first-step {
+  @media @superwide {
+    margin-top: -40vh !important;
+  }
+  @media @desktop and (max-width: 1799px){
+    margin-top: -90vh !important;
+  }
+  @media @tablet-lg {
+    margin-top: -110vh !important;
+  }
+  @media @tablet-sm {
+    margin-top: -130vh !important;
+  }
+  @media @phone {
+    margin-top: -110vh !important;
+  }
+}

src/components/Tour/constants/tourStepSelectors.js

@@ -1,20 +1,20 @@
 /* eslint-disable max-len, no-inline-comments */
 export const DOCUMENT_STEP_SELECTORS = {
-  STEP_1: '#step1',
+  STEP_1: '.content_hero',
   STEP_2: '.m-pagination_btn-next',
   STEP_3: '.saved_search-panel div:nth-child(2)',
   STEP_4: '.back-to-results',
 };
 
 export const GEO_STEP_SELECTORS = {
-  STEP_1: { selector: '#step1', label: 'Index' },
+  STEP_1: { selector: '.content', label: 'Index' },
   STEP_2: {
     selector: 'header.content_hero .m-list__horizontal',
     label: 'Help Links',
   },
   STEP_3: { selector: '.tabbed-navigation', label: 'Views' },
   STEP_4: { selector: '.filter-panel', label: 'Filters' },
-  STEP_5: { selector: '.date-inputs', label: 'Date Received' },
+  STEP_5: { selector: '.date-filter', label: 'Date Received' },
   STEP_6: {
     selector: '.filter-panel .aggregation.product',
     label: 'Product/Issue',
@@ -40,14 +40,14 @@ export const GEO_STEP_SELECTORS = {
 };
 
 export const LIST_COMPLAINTS_SELECTORS = {
-  STEP_1: { selector: '#step1', label: 'Index' },
+  STEP_1: { selector: '.content', label: 'Index' },
   STEP_2: {
     selector: 'header.content_hero .m-list__horizontal',
     label: 'Help Links',
   },
   STEP_3: { selector: '.tabbed-navigation', label: 'Views' },
   STEP_4: { selector: '.filter-panel', label: 'Filters' },
-  STEP_5: { selector: '.date-inputs', label: 'Date Received' },
+  STEP_5: { selector: '.date-filter', label: 'Date Received' },
   STEP_6: {
     selector: '.filter-panel .aggregation.product',
     label: 'Product/Issue',
@@ -78,14 +78,14 @@ export const LIST_COMPLAINTS_SELECTORS = {
 };
 
 export const TRENDS_SELECTORS = {
-  STEP_1: { selector: '#step1', label: 'Index' },
+  STEP_1: { selector: '.content', label: 'Index' },
   STEP_2: {
     selector: 'header.content_hero .m-list__horizontal',
     label: 'Help Links',
   },
   STEP_3: { selector: '.tabbed-navigation', label: 'Views' },
   STEP_4: { selector: '.filter-panel', label: 'Filters' },
-  STEP_5: { selector: '.date-inputs', label: 'Date Received' },
+  STEP_5: { selector: '.date-filter', label: 'Date Received' },
   STEP_6: {
     selector: '.filter-panel .aggregation.product',
     label: 'Product/Issue',

src/components/Tour/constants/tourStepsConstants.js

@@ -270,7 +270,7 @@ export const TOUR_STEPS = {
         trendsIndex +
         '</ul></div>' +
         '</div>',
-      tooltipClass: 'wide',
+      tooltipClass: 'wide first-step',
     },
     {
       element: TRENDS.STEP_2.selector,

src/components/Trends/TrendsPanel.js

@@ -176,8 +176,8 @@ export class TrendsPanel extends React.Component {
           />
         )}
         {!!hasMobileFilters && <FilterPanel />}
+        <FilterPanelToggle />
         <div className="layout-row refine-bar">
-          <FilterPanelToggle />
           <Select
             label="Aggregate complaints by"
             title="Aggregate by"

src/components/__tests__/FilterPanel.spec.js

@@ -11,14 +11,13 @@
 import { shallow } from 'enzyme';
 
 /**
- * @returns {void}
+ * @returns {object}
  */
 function setupEnzyme() {
   const props = {
     onFilterToggle: jest.fn(),
     hasButton: true,
-    hasFilterToggle: true,
-    hasFilters: false,
+    hasFilters: true,
   };
 
   const target = shallow(<FilterPanel {...props} />);
@@ -88,7 +87,7 @@
     expect(dispatch.mock.calls.length).toEqual(1);
   });
 
-  it('allows the user to trigger Filter Panel', () => {
+  it('allows the user to toggle Filter Panel', () => {
     const { target, props } = setupEnzyme();
     const button = target.find('.filter-button button');
 
@@ -108,7 +107,6 @@
     const actual = mapStateToProps(state);
     expect(actual).toEqual({
       hasButton: false,
-      hasFilterToggle: false,
       hasFilters: true,
     });
   });