diff --git a/src/browser_action/components/BrowserActionApp.jsx b/src/browser_action/components/BrowserActionApp.jsx
index e9c7940..20c3281 100644
--- a/src/browser_action/components/BrowserActionApp.jsx
+++ b/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 (
+
+ );
+ }
return (
@@ -115,7 +149,10 @@ export default class BrowserActionApp extends React.Component {
)
: (
-
+
+
+
+
)}
);
diff --git a/src/browser_action/components/StudyFooter.css b/src/browser_action/components/StudyFooter.css
new file mode 100644
index 0000000..6f68fef
--- /dev/null
+++ b/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);
+}
diff --git a/src/browser_action/components/StudyFooter.jsx b/src/browser_action/components/StudyFooter.jsx
new file mode 100644
index 0000000..d12596e
--- /dev/null
+++ b/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 (
+
+ );
+ }
+}
diff --git a/src/browser_action/components/StudyInvitation.css b/src/browser_action/components/StudyInvitation.css
new file mode 100644
index 0000000..7641e6f
--- /dev/null
+++ b/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);
+}
diff --git a/src/browser_action/components/StudyInvitation.jsx b/src/browser_action/components/StudyInvitation.jsx
new file mode 100644
index 0000000..d1f785f
--- /dev/null
+++ b/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 (
+
+
+
+
Feedback
+
+
+
+
+ {"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."}
+