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."} +

+ +
+
+ ); + } +} diff --git a/src/browser_action/components/TrackedProductList.css b/src/browser_action/components/TrackedProductList.css index 08872d9..ac81489 100644 --- a/src/browser_action/components/TrackedProductList.css +++ b/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; } diff --git a/src/img/back.svg b/src/img/back.svg new file mode 100644 index 0000000..1257d51 --- /dev/null +++ b/src/img/back.svg @@ -0,0 +1,4 @@ + +