Skip to content

Commit 946434c

Browse files
snigdha-kansalsnigdha-kansal
authored
newsletter pop-up (#714)
* change text from facebook event to link * feat: add mailchimp popup
1 parent 0ac3a30 commit 946434c

File tree

2 files changed

+63
-2
lines changed

2 files changed

+63
-2
lines changed

‎pages/_app.js‎

Lines changed: 62 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { config } from '@fortawesome/fontawesome-svg-core';
22
import Head from 'next/head';
3-
import React, { useEffect } from 'react';
3+
import { useRouter } from 'next/router';
4+
import Script from 'next/script';
5+
import React, { useEffect, useState } from 'react';
46
import ReactDOM from 'react-dom';
57

68
import '@fortawesome/fontawesome-svg-core/styles.css';
@@ -9,12 +11,63 @@ import '../styles/App.scss';
911
config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
1012

1113
export default function App({ Component, pageProps }) {
14+
const [showPopup, setShowPopup] = useState(false);
15+
const router = useRouter();
16+
1217
useEffect(() => {
1318
if (process.env.NODE_ENV !== 'production') {
1419
const axe = require('@axe-core/react');
1520
axe(React, ReactDOM, 1000);
1621
}
1722
}, []);
23+
24+
useEffect(() => {
25+
if (typeof window !== 'undefined') {
26+
try {
27+
const hasSeenPopup = localStorage.getItem('mailchimpPopupShown');
28+
29+
if (!hasSeenPopup) {
30+
setShowPopup(true);
31+
localStorage.setItem('mailchimpPopupShown', 'true');
32+
}
33+
} catch (error) {
34+
// eslint-disable-next-line no-console
35+
console.error('LocalStorage access error:', error);
36+
}
37+
}
38+
}, []);
39+
40+
useEffect(() => {
41+
const handleRouteChange = () => {
42+
setShowPopup(false);
43+
44+
const existingScript = document.getElementById('mailchimp-popup');
45+
if (existingScript) {
46+
existingScript.remove();
47+
}
48+
49+
document.querySelectorAll(
50+
'.mc-modal, #mc_embed_signup, .modalContent, .bannerContent, #dijit__TemplatedMixin_0, [data-dojo-attach-point="bannerContainer"], [data-dojo-attach-point="modalOpen"], [data-dojo-attach-point="bannerDescriptionContainer"]',
51+
).forEach(el => {
52+
el.remove();
53+
});
54+
55+
setTimeout(() => {
56+
document.querySelectorAll('.bannerContent, #dijit__TemplatedMixin_0').forEach(el => {
57+
el.style.display = 'none';
58+
el.style.visibility = 'hidden';
59+
el.style.opacity = '0';
60+
});
61+
}, 1000);
62+
63+
};
64+
65+
router.events.on('routeChangeStart', handleRouteChange);
66+
return () => {
67+
router.events.off('routeChangeStart', handleRouteChange);
68+
};
69+
}, [router]);
70+
1871
return (
1972
<>
2073
<Head>
@@ -23,6 +76,14 @@ export default function App({ Component, pageProps }) {
2376
<meta name="viewport" content="width=device-width, initial-scale=1" />
2477
<title>ACM at UCLA | Association for Computing Machinery</title>
2578
</Head>
79+
80+
{showPopup && (
81+
<Script
82+
id="mailchimp-popup"
83+
strategy="afterInteractive"
84+
src="https://chimpstatic.com/mcjs-connected/js/users/5666284d62e955e1bc84f7ba0/4a4c455ee0b05fb0493dc86b2.js"
85+
/>
86+
)}
2687
<Component {...pageProps} />
2788
</>
2889
);

‎scripts/lib.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ const generateSingleEvent = ({
9191
}
9292
if (fblink) {
9393
links.push({
94-
text: 'Facebook Event',
94+
text: 'Link',
9595
href: fblink,
9696
ext: true,
9797
});

0 commit comments

Comments
 (0)