Launched November shop promo

src/components/promos/November2023NoShopUser.js

@@ -0,0 +1,145 @@
+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 iframeBaseUrl =
+  'https://tab.gladly.io/promos/mothers-day-2023/?nolayout=true'
+
+const contStyles = {
+  position: 'relative',
+  marginLeft: 'auto',
+  marginRight: 'auto',
+  width: 700,
+  // top: 175,
+  // left: '50%',
+  // transform: 'translate(-50%, -50%)',
+  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 && (
+        <div style={contStyles}>
+          <Card>
+            <CardContent
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                flexDirection: 'column',
+              }}
+            >
+              <IconButton
+                onClick={onDismiss}
+                style={{
+                  position: 'absolute',
+                  right: 10,
+                  top: 0,
+                }}
+              >
+                <CloseIcon sx={{ color: '#fff', width: 28, height: 28 }} />
+              </IconButton>
+
+              <Typography
+                variant="h4"
+                gutterBottom
+                align="center"
+                style={{ marginTop: 20 }}
+              >
+                Win $100 by Giving Back during Black Friday and Cyber Monday
+              </Typography>
+
+              <Typography variant="body1" gutterBottom align="center">
+                Expand your giving this holiday season by using{' '}
+                <a
+                  href="http://shop.gladly.io"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Shop for a Cause
+                </a>
+                , 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 (
+                <a
+                  href="https://gladly.zendesk.com/hc/en-us/articles/21341815958541-Black-Friday-2023-100-Gift-Card-Giveaway-Details"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  promo details
+                </a>
+                ).
+              </Typography>
+
+              <Button
+                variant="contained"
+                color="primary"
+                style={{
+                  marginTop: 10,
+                  marginBottom: 10,
+                  width: 250,
+                  marginLeft: 'auto',
+                  marginRight: 'auto',
+                }}
+              >
+                Install Shop for a Cause
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </>
+  )
+}
+
+November2023NoShopUser.displayName = 'November2023NoShopUserComponent'
+
+November2023NoShopUser.propTypes = {
+  user: PropTypes.shape({
+    userId: PropTypes.string,
+    cause: PropTypes.shape({
+      nameForShop: PropTypes.string,
+    }),
+  }).isRequired,
+}
+
+November2023NoShopUser.defaultProps = {}
+
+export default November2023NoShopUser

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,19 @@ const Index = ({ data: fallbackData, userAgent }) => {
     }
   }, [showYahooPrompt, interactedWithSFACNotification, features, searches])
 
+  // Figure out margin of search
+  const [searchMargin, setSearchMargin] = useState(0)
+
+  useEffect(() => {
+    if (!user.shopSignupTimestamp) {
+      if (
+        !localStorageMgr.getItem(getNotifDismissKey('november-2023-no-shop'))
+      ) {
+        setSearchMargin(-250)
+      }
+    }
+  })
+
   // set the causeId in local storage for tab ads
   useEffect(() => {
     localStorageMgr.setItem(STORAGE_NEW_USER_CAUSE_ID, causeId)
@@ -1109,7 +1126,15 @@ const Index = ({ data: fallbackData, userAgent }) => {
             ) : null}
           </div>
 
-          <div className={classes.centerContainer}>
+          {/* November No Shop User 2023 Promo */}
+          {user.userId && !user.shopSignupTimestamp && (
+            <November2023NoShopUser user={user} />
+          )}
+
+          <div
+            className={classes.centerContainer}
+            style={{ marginTop: searchMargin }}
+          >
             <div className={classes.searchBarContainer}>
               {/* Prime day 2023 Promo */}
               {/* {user.userId && notif && <PrimeDay2023 user={user} />} */}

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
 }