@@ -78,6 +128,8 @@ const AddShortcut = ({ onCancel, onSave }) => {
label="Name"
value={name}
onChange={changeName}
+ error={!!nameError}
+ helperText={nameError}
className={classes.textField}
/>
{
label="URL"
value={url}
onChange={changeUrl}
+ error={!!urlError}
+ helperText={urlError}
className={classes.textField}
/>
@@ -105,6 +159,7 @@ const AddShortcut = ({ onCancel, onSave }) => {
className={classes.yesButton}
variant="contained"
disableElevation
+ disabled={!!(nameError || urlError)}
>
Save
@@ -117,11 +172,17 @@ const AddShortcut = ({ onCancel, onSave }) => {
AddShortcut.propTypes = {
onCancel: PropTypes.func,
onSave: PropTypes.func,
+ existingName: PropTypes.string,
+ existingUrl: PropTypes.string,
+ existingId: PropTypes.string,
}
AddShortcut.defaultProps = {
onCancel: () => {},
onSave: () => {},
+ existingName: '',
+ existingUrl: '',
+ existingId: null,
}
export default AddShortcut
diff --git a/src/components/AddShortcut.stories.jsx b/src/components/AddShortcut.stories.jsx
index 50fb7e82..21181396 100644
--- a/src/components/AddShortcut.stories.jsx
+++ b/src/components/AddShortcut.stories.jsx
@@ -33,3 +33,9 @@ const Template = (args) => {
export const basic = Template.bind({})
basic.args = {}
+
+export const existingValues = Template.bind({})
+existingValues.args = {
+ existingName: 'Google',
+ existingUrl: 'http://www.google.com',
+}
diff --git a/src/components/AddShortcutPage.js b/src/components/AddShortcutPage.js
new file mode 100644
index 00000000..a329c999
--- /dev/null
+++ b/src/components/AddShortcutPage.js
@@ -0,0 +1,323 @@
+import React, { useState } from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import Button from '@material-ui/core/Button'
+import PropTypes from 'prop-types'
+import { Backdrop, Typography } from '@material-ui/core'
+import shortcutImage from 'src/assets/images/shortcut.png'
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
+import SearchInput from 'src/components/SearchInput'
+import Alert from '@material-ui/lab/Alert'
+import InfoIcon from '@material-ui/icons/InfoOutlined'
+import Logo from 'src/components/Logo'
+import IconButton from '@material-ui/core/IconButton'
+import CloseIcon from '@material-ui/icons/Close'
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import { goTo } from 'src/utils/navigation'
+import { accountURL } from 'src/utils/urls'
+import UpdateWidgetDataMutation from 'src/utils/mutations/UpdateWidgetDataMutation'
+import { WIDGET_TYPE_BOOKMARKS } from 'src/utils/constants'
+import { v4 as uuid } from 'uuid'
+import AddShortcut from './AddShortcut'
+import ShortcutIcon from './ShortcutIcon'
+
+const useStyles = makeStyles((theme) => ({
+ content: {
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ color: 'white',
+ height: '100%',
+ width: '100%',
+ },
+ shortcut: {
+ width: '300px',
+ },
+ addIcon: {
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ margin: 'auto',
+ height: '150px',
+ width: '120px',
+ borderRadius: '10px',
+ color: 'white',
+ },
+ circle: {
+ height: '48px',
+ width: '48px',
+ },
+ white: {
+ color: 'white',
+ borderColor: 'white',
+ },
+ topBar: {
+ padding: theme.spacing(2),
+ marginTop: theme.spacing(3),
+ display: 'flex',
+ flexDirection: 'row',
+ width: '100%',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ },
+ closeButton: {
+ color: 'white',
+ },
+ center: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ shortcutText: {
+ marginTop: theme.spacing(2),
+ marginBottom: theme.spacing(2),
+ },
+ topContent: {
+ width: '100%',
+ },
+ backdrop: {
+ width: '100vw',
+ backgroundColor: 'rgba(0, 0, 0, 0.8)',
+ position: 'absolute',
+ },
+ buttonRoot: {
+ padding: '0px',
+ paddingLeft: theme.spacing(1),
+ paddingRight: theme.spacing(1),
+ marginLeft: theme.spacing(1),
+ },
+ shortcutWrapper: {
+ maxWidth: '600px',
+ maxHeight: '300px',
+ overflowY: 'auto',
+ marginBottom: theme.spacing(6),
+ },
+ shortcutIcons: {
+ margin: 'auto',
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ },
+ addShortcutModal: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ zIndex: 1,
+ },
+ addShortcutWrapper: {
+ width: '400px',
+ },
+ label: {
+ flexDirection: 'column',
+ },
+}))
+const AddShortcutPage = ({ app, user, userId, closeHandler }) => {
+ const { widgets: { edges: widgetNodes = [] } = {} } = user
+ const bookmarkWidget = widgetNodes.find(
+ (widgetNode) => widgetNode.node.type === WIDGET_TYPE_BOOKMARKS
+ )
+ const bookmarksData =
+ bookmarkWidget && bookmarkWidget.node.data
+ ? JSON.parse(bookmarkWidget.node.data).bookmarks || []
+ : []
+ const [addShortcutWidgetOpen, setAddShortcutWidgetOpen] = useState(false)
+ const [bookmarks, setBookmarks] = useState(bookmarksData)
+ const [currentId, setCurrentId] = useState('')
+ const [currentName, setCurrentName] = useState('')
+ const [currentUrl, setCurrentUrl] = useState('')
+ const shortcutWidgetCancel = () => {
+ setAddShortcutWidgetOpen(false)
+ }
+ const saveBookmark = async (id, name, link) => {
+ const existingIndex = bookmarks.findIndex((bookmark) => bookmark.id === id)
+ let newBookmarks
+ if (existingIndex === -1) {
+ newBookmarks = [
+ ...bookmarks,
+ {
+ id,
+ name,
+ link,
+ },
+ ]
+ } else {
+ newBookmarks = [...bookmarks]
+ newBookmarks[existingIndex] = {
+ id,
+ name,
+ link,
+ }
+ }
+ setBookmarks(newBookmarks)
+ setAddShortcutWidgetOpen(false)
+ setCurrentId(id)
+ setCurrentName(name)
+ setCurrentUrl(link)
+ await UpdateWidgetDataMutation(
+ user,
+ bookmarkWidget.node,
+ JSON.stringify({ bookmarks: newBookmarks })
+ )
+ }
+
+ const deleteBookmark = async (id) => {
+ const newBookmarks = bookmarks.filter((b) => b.id !== id)
+ setBookmarks(newBookmarks)
+ await UpdateWidgetDataMutation(
+ user,
+ bookmarkWidget.node,
+ JSON.stringify({ bookmarks: newBookmarks })
+ )
+ }
+
+ const classes = useStyles()
+ const onSettingsClick = () => {
+ goTo(accountURL)
+ }
+
+ const onShortcutEdit = (id, text, url) => {
+ setCurrentId(id)
+ setCurrentName(text)
+ setCurrentUrl(url)
+ setAddShortcutWidgetOpen(true)
+ }
+
+ const onNewShortcut = () => {
+ setCurrentId(uuid())
+ setCurrentName('')
+ setCurrentUrl('')
+ setAddShortcutWidgetOpen(true)
+ }
+
+ const shortcutIcons = bookmarks.map((bookmark) => (
+
+
+
+
+
+
+ Add Shortcut
+
+
+
+
+
+
+
+ {bookmarks.length > 0 ? (
+
+
+
+ ) : (
+ {shortcutIcons}
+
+ 
+
+ Add more shortcuts and they’ll appear here!
+
+
+ )}
+
+
+
+
+
+ )
+}
+
+export const standard = Template.bind({})
+standard.args = {
+ tooltip: 'Great! You can always switch your search engine here later on.',
+ app: {
+ searchEngines: {
+ edges: [
+ {
+ node: {
+ name: 'DuckDuckGo',
+ engineId: 'DuckDuckGo',
+ rank: 3,
+ isCharitable: false,
+ inputPrompt: 'Search DuckDuckGo',
+ },
+ },
+ {
+ node: {
+ name: 'Google',
+ engineId: 'Google',
+ rank: 1,
+ isCharitable: false,
+ inputPrompt: 'Search Google',
+ },
+ },
+ {
+ node: {
+ name: 'Ecosia',
+ engineId: 'Ecosia',
+ rank: 2,
+ isCharitable: false,
+ inputPrompt: 'Search Ecosia',
+ },
+ },
+ ],
+ },
+ },
+ userId: 'abcd',
+ user: {
+ searchEngine: {
+ name: 'Google',
+ engineId: 'Google',
+ inputPrompt: 'Search Google',
+ },
+ widgets: {
+ edges: [
+ {
+ node: {
+ id: 'abcde',
+ data: JSON.stringify({
+ bookmarks: [
+ {
+ id: 'abcd',
+ name: 'google',
+ link: 'https://www.google.com',
+ },
+ {
+ id: 'bcde',
+ name: 'espn',
+ link: 'https://www.espn.com',
+ },
+ {
+ id: 'cdef',
+ name: 'google2',
+ link: 'https://www.google2.com',
+ },
+ {
+ id: 'defg',
+ name: 'espn2',
+ link: 'https://www.espn2.com',
+ },
+ {
+ id: 'efgh',
+ name: 'google3',
+ link: 'https://www.google.com',
+ },
+ {
+ id: 'fghi',
+ name: 'espn3',
+ link: 'https://www.espn.com',
+ },
+ {
+ id: 'ghij',
+ name: 'google4',
+ link: 'https://www.google2.com',
+ },
+ {
+ id: 'hijk',
+ name: 'espn4',
+ link: 'https://www.espn2.com',
+ },
+ {
+ id: 'lmno',
+ name: 'espn5',
+ link: 'https://www.espn2.com',
+ },
+ {
+ id: 'pqrs',
+ name: 'espn5',
+ link: 'https://www.espn2.com',
+ },
+ {
+ id: 'qrst',
+ name: 'espn6',
+ link: 'https://www.espn2.com',
+ },
+ ],
+ }),
+ type: WIDGET_TYPE_BOOKMARKS,
+ },
+ },
+ ],
+ },
+ yahooPaidSearchRewardOptIn: false,
+ },
+ closeHandler: () => {},
+}
+
+export const noIcons = Template.bind({})
+noIcons.args = {
+ tooltip: 'Great! You can always switch your search engine here later on.',
+ app: {
+ searchEngines: {
+ edges: [
+ {
+ node: {
+ name: 'DuckDuckGo',
+ engineId: 'DuckDuckGo',
+ rank: 3,
+ isCharitable: false,
+ inputPrompt: 'Search DuckDuckGo',
+ },
+ },
+ {
+ node: {
+ name: 'Google',
+ engineId: 'Google',
+ rank: 1,
+ isCharitable: false,
+ inputPrompt: 'Search Google',
+ },
+ },
+ {
+ node: {
+ name: 'Ecosia',
+ engineId: 'Ecosia',
+ rank: 2,
+ isCharitable: false,
+ inputPrompt: 'Search Ecosia',
+ },
+ },
+ ],
+ },
+ },
+ userId: 'abcd',
+ user: {
+ searchEngine: {
+ name: 'Google',
+ engineId: 'Google',
+ inputPrompt: 'Search Google',
+ },
+ widgets: {
+ edges: [],
+ },
+ yahooPaidSearchRewardOptIn: false,
+ },
+ closeHandler: () => {},
+}
diff --git a/src/components/AddShortcutPageContainer.js b/src/components/AddShortcutPageContainer.js
new file mode 100644
index 00000000..677fed30
--- /dev/null
+++ b/src/components/AddShortcutPageContainer.js
@@ -0,0 +1,42 @@
+import { createFragmentContainer, graphql } from 'react-relay'
+import AddShortcutPage from 'src/components/AddShortcutPage'
+
+export default createFragmentContainer(AddShortcutPage, {
+ app: graphql`
+ fragment AddShortcutPageContainer_app on App {
+ searchEngines {
+ edges {
+ node {
+ engineId
+ name
+ rank
+ isCharitable
+ inputPrompt
+ }
+ }
+ }
+ }
+ `,
+ user: graphql`
+ fragment AddShortcutPageContainer_user on User {
+ id
+ searchEngine {
+ engineId
+ inputPrompt
+ searchUrlPersonalized
+ }
+ widgets {
+ edges {
+ node {
+ id
+ data
+ name
+ type
+ enabled
+ }
+ }
+ }
+ yahooPaidSearchRewardOptIn
+ }
+ `,
+})
diff --git a/src/components/BackgroundColorPicker.js b/src/components/BackgroundColorPicker.js
new file mode 100644
index 00000000..884da4f9
--- /dev/null
+++ b/src/components/BackgroundColorPicker.js
@@ -0,0 +1,71 @@
+import React, { useCallback, useState } from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import { SketchPicker } from 'react-color'
+import { Typography } from '@material-ui/core'
+import PropTypes from 'prop-types'
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ },
+ gridList: {
+ display: 'flex',
+ flexDirection: 'row',
+ width: '100%',
+ },
+ previewContainer: {
+ marginTop: 0,
+ margin: theme.spacing(2),
+ width: '100%',
+ height: '60%',
+ },
+ header: {
+ paddingLeft: 0,
+ },
+ divider: {
+ marginBottom: 10,
+ },
+}))
+const BackgroundColorPicker = ({ user, onBackgroundColorSelection }) => {
+ const classes = useStyles()
+ const [selectedColor, setSelectedColor] = useState(
+ user.backgroundColor || '#000'
+ )
+
+ const onColorChanged = useCallback(
+ (color) => {
+ setSelectedColor(color.hex)
+ onBackgroundColorSelection(color.hex)
+ },
+ [onBackgroundColorSelection]
+ )
+
+ return (
+
+ Select your color
+
+ )
+}
+
+BackgroundColorPicker.propTypes = {
+ user: PropTypes.shape({
+ backgroundColor: PropTypes.string.isRequired,
+ }).isRequired,
+ onBackgroundColorSelection: PropTypes.func.isRequired,
+}
+
+export default BackgroundColorPicker
diff --git a/src/components/BackgroundColorPicker.stories.jsx b/src/components/BackgroundColorPicker.stories.jsx
new file mode 100644
index 00000000..ea98bcef
--- /dev/null
+++ b/src/components/BackgroundColorPicker.stories.jsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import blue from '@material-ui/core/colors/blue'
+import BackgroundColorPicker from './BackgroundColorPicker'
+
+export default {
+ title: 'Components/BackgroundColorPicker',
+ component: BackgroundColorPicker,
+}
+
+const useStyles = makeStyles(() => ({
+ templateContainer: {
+ background: blue['200'],
+ height: 700,
+ },
+}))
+
+// eslint-disable-next-line react/jsx-props-no-spreading
+const Template = (args) => {
+ const classes = useStyles()
+ return (
+
+
+
+
+ )
+}
+
+export const normal = Template.bind({})
+normal.args = {
+ user: {
+ backgroundColor: '#138',
+ },
+ onBackgroundColorSelection: () => {
+ // eslint-disable-next-line no-console
+ console.log('onBackgroundColorSelection')
+ },
+}
diff --git a/src/components/SfacActivityButton.js b/src/components/BadgeButton.js
similarity index 85%
rename from src/components/SfacActivityButton.js
rename to src/components/BadgeButton.js
index 9be0c77b..4309af29 100644
--- a/src/components/SfacActivityButton.js
+++ b/src/components/BadgeButton.js
@@ -1,9 +1,8 @@
-import React, { forwardRef } from 'react'
+import React, { cloneElement, forwardRef } from 'react'
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core/styles'
import clsx from 'clsx'
import Badge from '@material-ui/core/Badge'
-import SearchIcon from '@material-ui/icons/Search'
import CheckCircleIcon from '@material-ui/icons/CheckCircle'
import IconButton from '@material-ui/core/IconButton'
import DoNotDisturbOnIcon from '@mui/icons-material/DoNotDisturbOn'
@@ -47,7 +46,7 @@ const useStyles = makeStyles((theme) => ({
},
}))
-const SfacActivityButton = forwardRef(({ active, onClick }, ref) => {
+const BadgeButton = forwardRef(({ active, onClick, icon }, ref) => {
const classes = useStyles()
return (
@@ -70,17 +69,20 @@ const SfacActivityButton = forwardRef(({ active, onClick }, ref) => {
}
>
+
+ )
+}
+
+export const sfacActive = Template.bind({})
+sfacActive.args = {
+ active: true,
+ icon:
+
+
+
+
+
+ )
+}
+FrontpageShortcutList.propTypes = {
+ user: PropTypes.shape({
+ widgets: PropTypes.shape({
+ edges: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.string,
+ data: PropTypes.string,
+ type: PropTypes.string,
+ })
+ ),
+ }).isRequired,
+ yahooPaidSearchRewardOptIn: PropTypes.bool,
+ }).isRequired,
+ openHandler: PropTypes.func.isRequired,
+}
+
+export default FrontpageShortcutList
diff --git a/src/components/FrontpageShortcutList.stories.jsx b/src/components/FrontpageShortcutList.stories.jsx
new file mode 100644
index 00000000..66919e2e
--- /dev/null
+++ b/src/components/FrontpageShortcutList.stories.jsx
@@ -0,0 +1,109 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import blue from '@material-ui/core/colors/blue'
+import { WIDGET_TYPE_BOOKMARKS } from 'src/utils/constants'
+import FrontpageShortcutList from './FrontpageShortcutList'
+
+export default {
+ title: 'Components/FrontpageShortcutList',
+ component: FrontpageShortcutList,
+}
+
+const useStyles = makeStyles(() => ({
+ templateContainer: {
+ background: blue['200'],
+ height: 700,
+ width: 700,
+ },
+}))
+
+// eslint-disable-next-line react/jsx-props-no-spreading
+const Template = (args) => {
+ const classes = useStyles()
+ return (
+
+ {shortcutIcons}
+
+
+
+
+
+
+ )
+}
+export const standard = Template.bind({})
+standard.args = {
+ userId: 'userId',
+ user: {
+ widgets: {
+ edges: [
+ {
+ node: {
+ id: 'abcde',
+ data: JSON.stringify({
+ bookmarks: [
+ {
+ id: 'abcd',
+ name: 'google',
+ link: 'https://www.google.com',
+ },
+ {
+ id: 'bcde',
+ name: 'espn',
+ link: 'https://www.espn.com',
+ },
+ {
+ id: 'cdef',
+ name: 'google2',
+ link: 'https://www.google2.com',
+ },
+ {
+ id: 'defg',
+ name: 'espn2',
+ link: 'https://www.espn2.com',
+ },
+ {
+ id: 'efgh',
+ name: 'google3',
+ link: 'https://www.google.com',
+ },
+ {
+ id: 'fghi',
+ name: 'espn3',
+ link: 'https://www.espn.com',
+ },
+ {
+ id: 'ghij',
+ name: 'google4',
+ link: 'https://www.google2.com',
+ },
+ {
+ id: 'hijk',
+ name: 'google2',
+ link: 'https://www.google2.com',
+ },
+ {
+ id: 'ijkl',
+ name: 'espn2',
+ link: 'https://www.espn2.com',
+ },
+ {
+ id: 'jklm',
+ name: 'google3',
+ link: 'https://www.google.com',
+ },
+ {
+ id: 'klmn',
+ name: 'espn3',
+ link: 'https://www.espn.com',
+ },
+ {
+ id: 'lmno',
+ name: 'google4',
+ link: 'https://www.google2.com',
+ },
+ ],
+ }),
+ type: WIDGET_TYPE_BOOKMARKS,
+ },
+ },
+ ],
+ },
+ },
+ openHandler: () => {},
+}
diff --git a/src/components/FrontpageShortcutListContainer.js b/src/components/FrontpageShortcutListContainer.js
new file mode 100644
index 00000000..b6c16f60
--- /dev/null
+++ b/src/components/FrontpageShortcutListContainer.js
@@ -0,0 +1,21 @@
+import { createFragmentContainer, graphql } from 'react-relay'
+import FrontpageShortcutList from 'src/components/FrontpageShortcutList'
+
+export default createFragmentContainer(FrontpageShortcutList, {
+ user: graphql`
+ fragment FrontpageShortcutListContainer_user on User {
+ id
+ widgets {
+ edges {
+ node {
+ id
+ data
+ name
+ type
+ enabled
+ }
+ }
+ }
+ }
+ `,
+})
diff --git a/src/components/Link.js b/src/components/Link.js
index 5ee90548..bbbf0ef3 100644
--- a/src/components/Link.js
+++ b/src/components/Link.js
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
@@ -13,7 +14,7 @@ const useStyles = makeStyles(() => ({
}))
const Link = (props) => {
- const { children, className, target, to = '', style } = props
+ const { children, className, target, to = '', style, stopPropagation } = props
const classes = useStyles()
const [destInternal, setDestInternal] = useState(true)
@@ -41,9 +42,14 @@ const Link = (props) => {
anchorTarget = destInternal ? undefined : '_top'
}
+ const stopPropagationHandler = (e) => {
+ e.stopPropagation()
+ }
+
return (
- {
setIsPopoverOpen(true)
}}
ref={buttonRef}
+ icon={ ({
- templateContainer: {
- background: blue['200'],
- padding: 24,
- },
-}))
-
-const Template = (args) => {
- const classes = useStyles()
- return (
-
-
- )
-}
-
-export const active = Template.bind({})
-active.args = {
- active: true,
-}
-
-export const inactive = Template.bind({})
-inactive.args = {
- active: false,
-}
diff --git a/src/components/ShacActivity.js b/src/components/ShacActivity.js
new file mode 100644
index 00000000..bf7f8299
--- /dev/null
+++ b/src/components/ShacActivity.js
@@ -0,0 +1,76 @@
+import React, { useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import { makeStyles } from '@material-ui/core/styles'
+import DashboardPopover from 'src/components/DashboardPopover'
+import BadgeButton from 'src/components/BadgeButton'
+import ShacActivityNotification from 'src/components/ShacActivityNotification'
+import { SHAC_ACTIVITY_STATES } from 'src/utils/constants'
+import { ShoppingCart } from '@mui/icons-material'
+
+const useStyles = makeStyles(() => ({
+ popover: {
+ // Match other popovers in the user menu
+ marginTop: 9,
+ },
+ popoverPaper: {
+ borderRadius: 15,
+ },
+ popoverContent: {
+ width: 400,
+ },
+}))
+
+const ShacActivity = ({
+ user: { cause = {}, shacTotalEarned, shacActivityState },
+}) => {
+ const classes = useStyles()
+ const { name: causeName } = cause
+ const buttonRef = useRef(undefined)
+ const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+ return (
+
+ {
+ setIsPopoverOpen(true)
+ }}
+ ref={buttonRef}
+ icon={ {
+ setIsPopoverOpen(false)
+ }}
+ className={classes.popover}
+ PaperProps={{
+ classes: {
+ root: classes.popoverPaper,
+ },
+ }}
+ >
+
+
+ )
+}
+
+ShacActivity.propTypes = {
+ user: PropTypes.shape({
+ cause: PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ }).isRequired,
+ shacTotalEarned: PropTypes.number.isRequired,
+ shacActivityState: PropTypes.string.isRequired,
+ }).isRequired,
+}
+
+ShacActivity.defaultProps = {}
+
+export default ShacActivity
diff --git a/src/components/ShacActivity.stories.jsx b/src/components/ShacActivity.stories.jsx
new file mode 100644
index 00000000..da990e14
--- /dev/null
+++ b/src/components/ShacActivity.stories.jsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import blue from '@material-ui/core/colors/blue'
+import ShacActivity from './ShacActivity'
+
+export default {
+ title: 'Components/ShacActivity',
+ component: ShacActivity,
+}
+
+const useStyles = makeStyles(() => ({
+ templateContainer: {
+ background: blue['200'],
+ padding: 24,
+ paddingLeft: 96,
+ width: '100%',
+ minHeight: 400,
+ },
+}))
+
+const Template = (args) => {
+ const classes = useStyles()
+ return (
+
+
+ )
+}
+
+export const active = Template.bind({})
+active.args = {
+ user: {
+ cause: {
+ name: 'Trees',
+ },
+ shacTotalEarned: 200.3,
+ shacActivityState: 'active',
+ },
+}
+
+export const inactive = Template.bind({})
+inactive.args = {
+ user: {
+ cause: {
+ name: 'Reproductive Health',
+ },
+ shacTotalEarned: 150.25,
+ shacActivityState: 'inactive',
+ },
+}
+
+export const newStatus = Template.bind({})
+newStatus.args = {
+ user: {
+ cause: {
+ name: 'Cats',
+ },
+ totalEarned: 0,
+ shacActivityState: 'new',
+ },
+}
diff --git a/src/components/ShacActivityNotification.js b/src/components/ShacActivityNotification.js
new file mode 100644
index 00000000..fab6346c
--- /dev/null
+++ b/src/components/ShacActivityNotification.js
@@ -0,0 +1,194 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import Button from '@material-ui/core/Button'
+import PropTypes from 'prop-types'
+import { Typography } from '@material-ui/core'
+import CheckCircleIcon from '@material-ui/icons/CheckCircle'
+import DoNotDisturbOnIcon from '@mui/icons-material/DoNotDisturbOn'
+import { shopLandingURL } from 'src/utils/urls'
+import Link from 'src/components/Link'
+import { currencyFormatUSD } from 'src/utils/formatting'
+import Notification from './Notification'
+
+const statusIconSize = 18
+
+const useStyles = makeStyles((theme) => ({
+ notification: {
+ paddingLeft: theme.spacing(3),
+ paddingRight: theme.spacing(3),
+ paddingTop: theme.spacing(2),
+ paddingBottom: theme.spacing(2),
+ borderRadius: 15,
+ },
+ noButton: {
+ fontWeight: '500',
+ },
+ yesButton: {
+ fontWeight: '900',
+ marginLeft: theme.spacing(1),
+ },
+ title: {
+ fontWeight: '700',
+ fontSize: '24px',
+ },
+ text: {
+ paddingBottom: theme.spacing(3.5),
+ },
+ buttonsWrapper: {
+ display: 'flex',
+ justifyContent: 'flex-end',
+ },
+ active: {
+ color: '#219653',
+ },
+ inactive: {
+ color: '#E3720E',
+ },
+ status: {
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ paddingBottom: theme.spacing(2.5),
+ },
+ statusWrapper: {
+ paddingBottom: theme.spacing(2.5),
+ },
+ shopContainer: {
+ display: 'flex',
+ flexDirection: 'row',
+ },
+ shopSubContainer: {
+ flexGrow: 1,
+ paddingRight: theme.spacing(2),
+ },
+ statusText: {
+ paddingRight: theme.spacing(0.5),
+ fontWeight: 700,
+ },
+ shop: {
+ fontWeight: 900,
+ },
+ statusIcon: {
+ height: statusIconSize,
+ width: statusIconSize,
+ },
+}))
+const ShacActivityNotification = ({
+ className,
+ activityState,
+ totalEarned,
+ impactName,
+}) => {
+ const classes = useStyles()
+ let buttons = null
+ if (activityState === 'inactive') {
+ buttons = (
+
+
+
+
+
+ )
+ } else if (activityState === 'new') {
+ buttons = (
+
+
+
+
+
+ )
+ }
+ return (
+
+
+
+ Shop for a Cause
+
+ {activityState === 'active' ? (
+
+ )
+}
+
+ShacActivityNotification.propTypes = {
+ className: PropTypes.string,
+ activityState: PropTypes.string.isRequired,
+ totalEarned: PropTypes.number.isRequired,
+ impactName: PropTypes.string.isRequired,
+}
+
+ShacActivityNotification.defaultProps = {
+ className: '',
+}
+
+export default ShacActivityNotification
diff --git a/src/components/ShacActivityNotification.stories.jsx b/src/components/ShacActivityNotification.stories.jsx
new file mode 100644
index 00000000..2b533c1e
--- /dev/null
+++ b/src/components/ShacActivityNotification.stories.jsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import ShacActivityNotification from './ShacActivityNotification'
+
+export default {
+ title: 'Components/ShacActivityNotification',
+ component: ShacActivityNotification,
+}
+
+const useStyles = makeStyles((theme) => ({
+ widthDiv: {
+ width: theme.spacing(50),
+ },
+}))
+
+const Template = (args) => {
+ const classes = useStyles()
+ return
+
+ You've been increasing your impact for causes by using Shop
+ for a Cause. Great job!
+
+
+ ) : (
+
+
+ Active
+
+
+
+
+ You haven’t used Shop for a Cause in a while! Shopping
+ raises up to 4x more for {impactName} than just opening
+ tabs.
+
+ ) : (
+
+ You can do even more good with our Shop for a Cause
+ extension. Shopping raises up to 4x more for {impactName}{' '}
+ than just opening tabs.
+
+ )}
+
+ )}
+
+
+
+ Inactive
+
+
+ {activityState === 'inactive' ? (
+
+
+ {currencyFormatUSD(totalEarned)}
+
+
+ Raised for Charities via Shopping
+
+
+
+ }
+ includeButton={activityState !== 'active'}
+ buttons={buttons}
+ className={classes.notification}
+ />
+ setHover(true)}
- onMouseOut={() => setHover(false)}
- >
-
+
setHover(true)}
+ onMouseOut={() => setHover(false)}
+ >
+ {confirmDelete ? (
+
{text}
-
-
+ ) : (
+
+
+
+ {text}
+
+ )}
+
)
}
@@ -102,6 +168,7 @@ ShortcutIcon.propTypes = {
onDelete: PropTypes.func,
text: PropTypes.string.isRequired,
url: PropTypes.string.isRequired,
+ id: PropTypes.string.isRequired,
}
ShortcutIcon.defaultProps = {
diff --git a/src/components/ShortcutIcon.stories.jsx b/src/components/ShortcutIcon.stories.jsx
index 761a694c..b3e50728 100644
--- a/src/components/ShortcutIcon.stories.jsx
+++ b/src/components/ShortcutIcon.stories.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
import React from 'react'
import ShortcutIcon from './ShortcutIcon'
@@ -19,6 +20,18 @@ const Template = (args) =>
-
-
+
-
-
+
-
-
- {firstLettersText}
+ Confirm Delete
-
+
+
+
+
+
+
+ {firstLettersText}
+
+