Changed promo for non-shop users

gladly-team · Nov 22, 2023 · 59a25af · 59a25af
1 parent dae7b7b
commit 59a25af
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 24 deletions.
diff --git a/src/components/promos/November2023ShopUser.js b/src/components/promos/November2023ShopUser.js
@@ -47,8 +47,16 @@ const imageGroupStyles = {
 const November2023ShopUser = ({ user }) => {
   const [show, setShow] = useState(false)
   const [batch, setBatch] = useState(1)
+  const [userType, setUserType] = useState('')
 
   useEffect(() => {
+    // Detect user type
+    if (user.shopSignupTimestamp) {
+      setUserType('shop-user')
+    } else {
+      setUserType('non-shop-user')
+    }
+
     // Function to update the state
     function updateState() {
       const now = new Date().getTime()
@@ -85,7 +93,7 @@ const November2023ShopUser = ({ user }) => {
 
     // Call the function on component mount
     updateState()
-  }, [])
+  }, [user])
 
   const getNotifDismissKey = (code) => `${NOTIF_DISMISS_PREFIX}.${code}`
 
@@ -143,20 +151,40 @@ const November2023ShopUser = ({ user }) => {
                 Give back during your Holiday Shopping
               </Typography>
 
-              <Typography variant="body2" gutterBottom align="center">
-                Raise money for {user.cause.nameForShop || 'Charity'} when you
-                shop these Black Friday deals–you can earn up to 10% back! As a
-                bonus for activating an offer, you’ll be entered into a drawing
-                for one of 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>
+              {userType === 'non-shop-user' && (
+                <Typography variant="body2" gutterBottom align="center">
+                  Raise money for {user.cause.nameForShop || 'Charity'} when you
+                  shop these Black Friday deals! Just click the links below
+                  before to shop through our partner stores and they’ll give up
+                  to 5% back for your cause. Or, you can download{' '}
+                  <a
+                    href="http://shop.gladly.io/"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    Shop for a Cause
+                  </a>{' '}
+                  which will automatically help you raise money from over 10,000
+                  stores.
+                </Typography>
+              )}
+
+              {userType === 'shop-user' && (
+                <Typography variant="body2" gutterBottom align="center">
+                  Raise money for {user.cause.nameForShop || 'Charity'} when you
+                  shop these Black Friday deals–you can earn up to 10% back! As
+                  a bonus for activating an offer, you’ll be entered into a
+                  drawing for one of 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>
+              )}
 
               {batch === 1 && (
                 <Box sx={imageGroupStyles}>
@@ -314,6 +342,7 @@ November2023ShopUser.displayName = 'November2023ShopUserComponent'
 November2023ShopUser.propTypes = {
   user: PropTypes.shape({
     userId: PropTypes.string,
+    shopSignupTimestamp: PropTypes.string,
     cause: PropTypes.shape({
       nameForShop: PropTypes.string,
     }),

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -109,7 +109,6 @@ import Modal from '@material-ui/core/Modal'
 import { Box } from '@material-ui/core'
 
 import November2023ShopUser from 'src/components/promos/November2023ShopUser'
-import November2023NoShopUser from 'src/components/promos/November2023NoShopUser'
 
 const getNotifDismissKey = (code) => `${NOTIF_DISMISS_PREFIX}.${code}`
 
@@ -1121,15 +1120,8 @@ const Index = ({ data: fallbackData, userAgent }) => {
               {/* Prime day 2023 Promo */}
               {/* {user.userId && notif && <PrimeDay2023 user={user} />} */}
 
-              {/* November No Shop User 2023 Promo */}
-              {user.userId && !user.shopSignupTimestamp && (
-                <November2023NoShopUser user={user} />
-              )}
-
               {/* November Shop User 2023 Promo */}
-              {user.userId && user.shopSignupTimestamp && (
-                <November2023ShopUser user={user} />
-              )}
+              {user.userId && <November2023ShopUser user={user} />}
 
               <Logo
                 includeText