Fix mozilla#274: Add UR study participation UI

Notes:
- I had to put the copy in brackets in StudyInvitation.jsx to be able to use the apostrophe it contains. This avoids the eslint rule error react/no-unescaped-entities.
- The panels are wider than bryanbell's mocks, but the PR for mozilla#256 will fix that.

src/browser_action/components/BrowserActionApp.jsx

@@ -13,6 +13,8 @@ import TrackedProductList from 'commerce/browser_action/components/TrackedProduc
 import {extractedProductShape, getAllProducts, productShape} from 'commerce/state/products';
 import * as syncActions from 'commerce/state/sync';
 import {recordEvent, getBadgeType} from 'commerce/telemetry/extension';
+import StudyInvitation from 'commerce/browser_action/components/StudyInvitation';
+import StudyFooter from 'commerce/browser_action/components/StudyFooter';
 
 import 'commerce/browser_action/components/BrowserActionApp.css';
 
@@ -49,6 +51,7 @@ export default class BrowserActionApp extends React.Component {
     super(props);
     this.state = {
       extractedProduct: props.extractedProduct,
+      showStudyInvitation: false,
     };
   }
 
@@ -82,9 +85,40 @@ export default class BrowserActionApp extends React.Component {
     window.close();
   }
 
+  /**
+   * Show the Study popup when the StudyFooter is clicked
+   */
+  handleClickStudy() {
+    this.setState({showStudyInvitation: true});
+  }
+
+  /**
+   * Return to the TrackedProductList when the back button on the Study popup is clicked
+   */
+  handleClickBack() {
+    this.setState({showStudyInvitation: false});
+  }
+
+  /**
+   * Open the Study recruitment survey page and close the panel when the participate button
+   * in the Study popup is clicked
+   */
+  handleClickParticipate() {
+    browser.tabs.create({url: 'https://www.surveygizmo.com/s3/4693160/Price-Wise-Research-Study-Participant-Screener'});
+    window.close();
+  }
+
   render() {
     const {products} = this.props;
-    const {extractedProduct} = this.state;
+    const {extractedProduct, showStudyInvitation} = this.state;
+    if (showStudyInvitation) {
+      return (
+        <StudyInvitation
+          onClickBack={this.handleClickBack}
+          onClickParticipate={this.handleClickParticipate}
+        />
+      );
+    }
     return (
       <React.Fragment>
         <div className="title-bar">
@@ -115,7 +149,10 @@ export default class BrowserActionApp extends React.Component {
             <EmptyOnboarding extractedProduct={extractedProduct} />
           )
           : (
-            <TrackedProductList products={products} extractedProduct={extractedProduct} />
+            <React.Fragment>
+              <TrackedProductList products={products} extractedProduct={extractedProduct} />
+              <StudyFooter onClick={this.handleClickStudy} />
+            </React.Fragment>
           )}
       </React.Fragment>
     );

src/browser_action/components/StudyFooter.css

@@ -0,0 +1,10 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/** Study footer styles */
+
+.menu-item.study {
+  justify-content: center;
+  border-top: 1px solid var(--grey-30);
+}

src/browser_action/components/StudyFooter.jsx

@@ -0,0 +1,32 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import autobind from 'autobind-decorator';
+import pt from 'prop-types';
+import React from 'react';
+
+import 'commerce/browser_action/components/StudyFooter.css';
+
+/**
+ * Feedback footer for User Research study recruitment.
+ */
+@autobind
+export default class StudyFooter extends React.Component {
+  static propTypes = {
+    // Direct props
+    onClick: pt.func.isRequired,
+  }
+
+  render() {
+    return (
+      <button
+        type="button"
+        className="menu-item study"
+        onClick={this.props.onClick}
+      >
+      Help us improve Price Wise...
+      </button>
+    );
+  }
+}

src/browser_action/components/StudyInvitation.css

@@ -0,0 +1,52 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/** Components for the StudyInvitation screen */
+
+.title-bar.study {
+  justify-content: flex-start;
+  position: relative;
+}
+
+.title-bar.study .title {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.study-invitation {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin: 16px;
+  text-align: center;
+}
+
+.study-invitation .hero {
+  height: 123px;
+  width: 142px;
+}
+
+.study-invitation .description {
+  margin: 0;
+}
+
+.study-invitation .participate.button {
+  width: 100%;
+}
+
+.participate.button:enabled {
+  color: var(--white-100);
+  background-color: var(--blue-60);
+}
+
+.participate.button:hover:enabled {
+  background: var(--blue-70);
+}
+
+.participate.button:active:enabled {
+  background: var(--blue-80);
+}

src/browser_action/components/StudyInvitation.jsx

@@ -0,0 +1,56 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import autobind from 'autobind-decorator';
+import pt from 'prop-types';
+import React from 'react';
+
+import 'commerce/browser_action/components/StudyInvitation.css';
+
+/**
+ * Study Invitation page for when users click the StudyFooter
+ */
+@autobind
+export default class StudyInvitation extends React.Component {
+  static propTypes = {
+    // Direct props
+    onClickBack: pt.func.isRequired,
+    onClickParticipate: pt.func.isRequired,
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <div className="title-bar study">
+          <button
+            className="ghost back button"
+            type="button"
+            onClick={this.props.onClickBack}
+            title="Back to Products"
+          >
+            <img
+              className="icon"
+              src={browser.extension.getURL('img/back.svg')}
+              alt="Back to Products"
+            />
+          </button>
+          <h1 className="title">Feedback</h1>
+        </div>
+        <div className="study-invitation">
+          <img className="hero" src={browser.extension.getURL('img/shopping-welcome.svg')} alt="" />
+          <p className="description">
+            {"Help us improve Price Wise by participating in a research study. Take this 5-minute survey to learn more about the study and see if you're a fit."}
+          </p>
+          <button
+            className="button participate"
+            type="button"
+            onClick={this.props.onClickParticipate}
+          >
+            Take a 5-minute survey
+          </button>
+        </div>
+      </React.Fragment>
+    );
+  }
+}

src/browser_action/components/TrackedProductList.css

@@ -13,10 +13,10 @@
   margin: 0;
 
   /*
-    max popup height - (titlebar height + track button height) = max list height
-    600px - (42px + 36px) = 522px
+    max popup height - (titlebar height + track button height + survey footer height) = max list height
+    600px - (42px + 36px + 36px) = 486px
    */
-  max-height: 522px;
+  max-height: 486px;
   overflow-y: auto;
   padding: 0;
 }