diff --git a/src/assets/promos/kiwico.png b/src/assets/promos/kiwico.png new file mode 100644 index 00000000..a7fb0a21 Binary files /dev/null and b/src/assets/promos/kiwico.png differ diff --git a/src/assets/promos/lego.png b/src/assets/promos/lego.png new file mode 100644 index 00000000..5c651920 Binary files /dev/null and b/src/assets/promos/lego.png differ diff --git a/src/assets/promos/macys.png b/src/assets/promos/macys.png new file mode 100644 index 00000000..8c831cba Binary files /dev/null and b/src/assets/promos/macys.png differ diff --git a/src/assets/promos/microsoft.png b/src/assets/promos/microsoft.png new file mode 100644 index 00000000..6128ac4d Binary files /dev/null and b/src/assets/promos/microsoft.png differ diff --git a/src/assets/promos/oldnavy.png b/src/assets/promos/oldnavy.png new file mode 100644 index 00000000..dc951c40 Binary files /dev/null and b/src/assets/promos/oldnavy.png differ diff --git a/src/assets/promos/samsung.png b/src/assets/promos/samsung.png new file mode 100644 index 00000000..ead8b338 Binary files /dev/null and b/src/assets/promos/samsung.png differ diff --git a/src/assets/promos/sephora.png b/src/assets/promos/sephora.png new file mode 100644 index 00000000..db5f881b Binary files /dev/null and b/src/assets/promos/sephora.png differ diff --git a/src/assets/promos/sonos.png b/src/assets/promos/sonos.png new file mode 100644 index 00000000..b6bc4c7c Binary files /dev/null and b/src/assets/promos/sonos.png differ diff --git a/src/assets/promos/thriftbooks.png b/src/assets/promos/thriftbooks.png new file mode 100644 index 00000000..b920cfa6 Binary files /dev/null and b/src/assets/promos/thriftbooks.png differ diff --git a/src/assets/promos/ultra-beauty.png b/src/assets/promos/ultra-beauty.png new file mode 100644 index 00000000..f63e0aac Binary files /dev/null and b/src/assets/promos/ultra-beauty.png differ diff --git a/src/assets/promos/walmart.png b/src/assets/promos/walmart.png new file mode 100644 index 00000000..08ac6231 Binary files /dev/null and b/src/assets/promos/walmart.png differ diff --git a/src/assets/promos/zulily.png b/src/assets/promos/zulily.png new file mode 100644 index 00000000..07607f0b Binary files /dev/null and b/src/assets/promos/zulily.png differ diff --git a/src/components/promos/November2023NoShopUser.js b/src/components/promos/November2023NoShopUser.js index 50f1f888..599d2104 100644 --- a/src/components/promos/November2023NoShopUser.js +++ b/src/components/promos/November2023NoShopUser.js @@ -87,7 +87,7 @@ const November2023NoShopUser = ({ user }) => { - Expand your giving this holiday season by using{' '} + Double your impact when you shop this holiday season with{' '} { > 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 ( + . Simply add the extension, activate the offers, and shop. As a + bonus for activating an offer, you’ll be entered into a drawing + for one of two $100 Visa gift cards ( { + const [show, setShow] = useState(false) + const [batch, setBatch] = useState(1) + + useEffect(() => { + // Function to update the state + function updateState() { + const now = new Date().getTime() + const storedData = localStorageMgr.getItem(batchKey) + + if (storedData) { + const { timestamp, currentState } = JSON.parse(storedData) + + // Calculate the number of 3-min intervals passed since the timestamp + const intervalsPassed = Math.floor((now - timestamp) / (3 * 60 * 1000)) + + if (intervalsPassed > 0) { + // Calculate the new state based on intervals passed + const newState = ((currentState + intervalsPassed - 1) % 4) + 1 + const newTimestamp = timestamp + intervalsPassed * 3 * 60 * 1000 + + // Update local storage and state + localStorageMgr.setItem( + batchKey, + JSON.stringify({ timestamp: newTimestamp, currentState: newState }) + ) + setBatch(newState) + } else { + // If less than 3 min have passed, keep the current state + setBatch(currentState) + } + } else { + // If no data in local storage, set default state and store it + const defaultData = { timestamp: now, currentState: 1 } + localStorageMgr.setItem(batchKey, JSON.stringify(defaultData)) + setBatch(1) + } + } + + // Call the function on component mount + updateState() + }, []) + + const getNotifDismissKey = (code) => `${NOTIF_DISMISS_PREFIX}.${code}` + + const onDismiss = (e) => { + e.stopPropagation() + e.nativeEvent.stopImmediatePropagation() + gtag('event', 'november_2023_shop_user_dismiss') + localStorageMgr.setItem(getNotifDismissKey('november-2023-shop'), true) + setShow(false) + return false + } + + useEffect(() => { + const dissNotif = + localStorageMgr.getItem(getNotifDismissKey('november-2023-shop')) || false + + if (!dissNotif) { + setShow(true) + } else { + setShow(false) + } + }, [user]) + + return ( + <> + {show && ( +
+ + + + + + + + Give back during your
Holiday Shopping + + + + 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 ( + + promo details + + ). + + + {batch === 1 && ( + + + + + + + + + + + + )} + + {batch === 2 && ( + + + + + + + + + + + + )} + + {batch === 3 && ( + + + + + + + {' '} + + + {' '} + + )} + + {batch === 4 && ( + + + + {' '} + + + + + + + + )} + + +
+ )} + + ) +} + +November2023ShopUser.displayName = 'November2023ShopUserComponent' + +November2023ShopUser.propTypes = { + user: PropTypes.shape({ + userId: PropTypes.string, + cause: PropTypes.shape({ + nameForShop: PropTypes.string, + }), + }).isRequired, +} + +November2023ShopUser.defaultProps = {} + +export default November2023ShopUser diff --git a/src/components/promos/November2023ShopUser.module.css b/src/components/promos/November2023ShopUser.module.css new file mode 100644 index 00000000..78024419 --- /dev/null +++ b/src/components/promos/November2023ShopUser.module.css @@ -0,0 +1,13 @@ +.hoverable { + border: 1px solid transparent; + transition: 0.3s; + width: 100px; + height: 100px; +} + +.hoverable:hover { + width: 106px; + height: 106px; + border: 3px solid #ccc; + margin-bottom: -5px; +} \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 1f197818..ec1661e5 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -107,6 +107,8 @@ 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 November2023ShopUser from 'src/components/promos/November2023ShopUser' import November2023NoShopUser from 'src/components/promos/November2023NoShopUser' const getNotifDismissKey = (code) => `${NOTIF_DISMISS_PREFIX}.${code}` @@ -1143,6 +1145,11 @@ const Index = ({ data: fallbackData, userAgent }) => { {/* Prime day 2023 Promo */} {/* {user.userId && notif && } */} + {/* November Shop User 2023 Promo */} + {user.userId && user.shopSignupTimestamp && ( + + )} +