diff --git a/src/components/promos/November2023NoShopUser.js b/src/components/promos/November2023NoShopUser.js new file mode 100644 index 00000000..c6e70339 --- /dev/null +++ b/src/components/promos/November2023NoShopUser.js @@ -0,0 +1,139 @@ +import React, { useEffect, useState } from 'react' +import gtag from 'ga-gtag' +import PropTypes from 'prop-types' +import Button from '@material-ui/core/Button' +import Card from '@material-ui/core/Card' +import CardContent from '@material-ui/core/CardContent' +import Typography from '@material-ui/core/Typography' +import IconButton from '@material-ui/core/IconButton' +import CloseIcon from '@material-ui/icons/Close' +import localStorageMgr from 'src/utils/localstorage-mgr' +import { NOTIF_DISMISS_PREFIX } from 'src/utils/constants' + +const contStyles = { + position: 'relative', + marginLeft: 'auto', + marginRight: 'auto', + width: 700, + marginTop: 20, + marginBottom: 0, + zIndex: 100000, +} + +const November2023NoShopUser = ({ user }) => { + const [show, setShow] = useState(false) + + const getNotifDismissKey = (code) => `${NOTIF_DISMISS_PREFIX}.${code}` + + const onDismiss = (e) => { + e.stopPropagation() + e.nativeEvent.stopImmediatePropagation() + gtag('event', 'november_2023_no_shop_user_dismiss') + localStorageMgr.setItem(getNotifDismissKey('november-2023-no-shop'), true) + setShow(false) + return false + } + + useEffect(() => { + const dissNotif = + localStorageMgr.getItem(getNotifDismissKey('november-2023-no-shop')) || + false + + if (!dissNotif) { + setShow(true) + } else { + setShow(false) + } + }, [user]) + + return ( + <> + {show && ( +
+ + + + + + + + Win $100 by Giving Back during Black Friday and Cyber Monday + + + + Expand your giving this holiday season by using{' '} + + Shop for a Cause + + , allowing you to make a positive impact with every purchase, + and double the joy of giving back while you shop. As a bonus, + everyone who activates Shop for a Cause on one of our over + 10,000 partner shops in November will be entered into a drawing + for two $100 Visa gift cards ( + + promo details + + ). + + + + + +
+ )} + + ) +} + +November2023NoShopUser.displayName = 'November2023NoShopUserComponent' + +November2023NoShopUser.propTypes = { + user: PropTypes.shape({ + userId: PropTypes.string, + cause: PropTypes.shape({ + nameForShop: PropTypes.string, + }), + }).isRequired, +} + +November2023NoShopUser.defaultProps = {} + +export default November2023NoShopUser diff --git a/src/pages/index.js b/src/pages/index.js index e76cd907..82969604 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -107,6 +107,9 @@ import AddShortcutPageContainer from 'src/components/AddShortcutPageContainer' import FrontpageShortcutListContainer from 'src/components/FrontpageShortcutListContainer' import Modal from '@material-ui/core/Modal' import { Box } from '@material-ui/core' +import November2023NoShopUser from 'src/components/promos/November2023NoShopUser' + +const getNotifDismissKey = (code) => `${NOTIF_DISMISS_PREFIX}.${code}` const useStyles = makeStyles((theme) => ({ pageContainer: { @@ -384,6 +387,7 @@ const getRelayQuery = async ({ AuthUser }) => { joined showYahooPrompt showSfacExtensionPrompt + shopSignupTimestamp cause { causeId impactType @@ -637,6 +641,23 @@ const Index = ({ data: fallbackData, userAgent }) => { } }, [showYahooPrompt, interactedWithSFACNotification, features, searches]) + // Figure out margin of search + const [searchMargin, setSearchMargin] = useState(0) + + useEffect(() => { + if (!user) { + return + } + + if (!user.shopSignupTimestamp) { + if ( + !localStorageMgr.getItem(getNotifDismissKey('november-2023-no-shop')) + ) { + setSearchMargin(-250) + } + } + }, [user]) + // set the causeId in local storage for tab ads useEffect(() => { localStorageMgr.setItem(STORAGE_NEW_USER_CAUSE_ID, causeId) @@ -692,7 +713,7 @@ const Index = ({ data: fallbackData, userAgent }) => { const bookmarkWidgetEnabled = bookmarkWidget && bookmarkWidget.node.enabled useEffect(() => { - const getNotifDismissKey = (code) => `${NOTIF_DISMISS_PREFIX}.${code}` + // const getNotifDismissKey = (code) => `${NOTIF_DISMISS_PREFIX}.${code}` const onNotificationClose = (code) => { localStorageMgr.setItem(getNotifDismissKey(code), 'true') setNotifsToShow((notifsToShow) => @@ -1109,7 +1130,15 @@ const Index = ({ data: fallbackData, userAgent }) => { ) : null} -
+ {/* November No Shop User 2023 Promo */} + {user.userId && !user.shopSignupTimestamp && ( + + )} + +
{/* Prime day 2023 Promo */} {/* {user.userId && notif && } */} diff --git a/src/schema/schema.graphql b/src/schema/schema.graphql index 3281a143..89ed2733 100644 --- a/src/schema/schema.graphql +++ b/src/schema/schema.graphql @@ -981,11 +981,17 @@ type User implements Node { """whether or not the user has opted into searching for extra impact""" yahooPaidSearchRewardOptIn: Boolean! + """ISO datetime string of when this Shop Signup Timestamp was started""" + shopSignupTimestamp: String + """Current UserGroupImpactMetric""" userGroupImpactMetric: UserGroupImpactMetric """Current UserGroupImpactMetrics leaderboard""" leaderboard: [leaderboardEntry] + + """User historical data related to group impacts""" + groupImpactHistory: [UserGroupImpactMetricLog] } """a user's charity specific impact""" @@ -1331,6 +1337,45 @@ type leaderboardEntry { user: User } +""" +A historical view of a specific users contribution to a GroupImpactMetric +""" +type UserGroupImpactMetricLog implements Node { + """The ID of an object""" + id: ID! + + """The ID of the user which the UserGroupImpactMetric belongs to""" + userId: String! + + """ + The micro USD amount raised for this instance of GroupImpactMetric so far by this user + """ + dollarContribution: Int! + + """ + The micro USD amount raised for this instance of GroupImpactMetric so far by this user from tabs + """ + tabDollarContribution: Int! + + """ + The micro USD amount raised for this instance of GroupImpactMetric so far by this user from search + """ + searchDollarContribution: Int! + + """ + The micro USD amount raised for this instance of GroupImpactMetric so far by this user from shopping + """ + shopDollarContribution: Int! + + """ + The micro USD amount raised for this instance of GroupImpactMetric so far by this user from referrals + """ + referralDollarContribution: Int! + + """Date the group impact metric started""" + dateStarted: String! +} + """The Wildfire object""" type Wildfire { causeName: String @@ -1698,6 +1743,7 @@ input CreateNewUserInput { v4BetaEnabled: Boolean missionId: String causeId: String + campaignId: String clientMutationId: String } diff --git a/yarn.lock b/yarn.lock index 400fc5a0..068fb214 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15315,10 +15315,10 @@ synchronous-promise@^2.0.15: resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.16.tgz#669b75e86b4295fdcc1bb0498de9ac1af6fd51a9" integrity sha512-qImOD23aDfnIDNqlG1NOehdB9IYsn1V9oByPjKY1nakv2MQYCEMyX033/q+aEtYCpmYK1cv2+NTmlH+ra6GA5A== -tab-ads@^1.1.20: - version "1.1.20" - resolved "https://registry.yarnpkg.com/tab-ads/-/tab-ads-1.1.20.tgz#b3ef70a03127f746171daf81fa7d6461c9767977" - integrity sha512-dagHnOnf4827hQRmDZ+thvldFac5CuY7pEVSsVO/iJ+02xYc7/g2wn3d4wyQUifXjwf8AJBVCpEerckZAKANgA== +tab-ads@^1.1.23: + version "1.1.23" + resolved "https://registry.yarnpkg.com/tab-ads/-/tab-ads-1.1.23.tgz#aa02b7ce727d42ef0310cbb56b56e1b982090cc1" + integrity sha512-hhWhLGoUiuZDokqMG37yDzgfUMZUuDh9K/AlU2yLSBWL/1ZIif5jqCISHp3P9NG6u8TGS1L/Lt/pBCF6oav3EA== dependencies: lodash "^4.17.21"