Fixed up donation form for give directly

src/components/Momentum.js

@@ -0,0 +1,316 @@
+import React, { useState, useEffect } 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 Modal from '@material-ui/core/Modal'
+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 '../utils/constants'
+
+const iframeUrl =
+  'https://tab-for-a-cause-360.givemomentum.com?show-container=false'
+
+const contStyles = {
+  position: 'relative',
+  marginLeft: 'auto',
+  marginRight: 'auto',
+  width: 650,
+  marginTop: 70,
+  marginBottom: 20,
+  zIndex: 1000000,
+}
+
+const Momentum = ({ user }) => {
+  const [show, setShow] = useState(true)
+  const [openWidget, setOpenWidget] = useState(false)
+
+  const getNotifDismissKey = (code) => `${NOTIF_DISMISS_PREFIX}.${code}`
+
+  const onOpen = () => {
+    setOpenWidget(true)
+    gtag('event', 'momentum_open')
+  }
+
+  const onClose = () => {
+    setOpenWidget(false)
+    gtag('event', 'momentum_close')
+  }
+
+  const onDismiss = (e) => {
+    e.stopPropagation()
+    e.nativeEvent.stopImmediatePropagation()
+    gtag('event', 'momentum_dismiss')
+    localStorageMgr.setItem(getNotifDismissKey('momentum'), true)
+    setShow(false)
+    return false
+  }
+
+  useEffect(() => {
+    const dissNotif =
+      localStorageMgr.getItem(getNotifDismissKey('momentum')) || false
+
+    if (!dissNotif) {
+      setShow(true)
+    } else {
+      setShow(false)
+    }
+  }, [setShow])
+
+  if (user.cause.nameForShop !== 'Ending Poverty') {
+    return null
+  }
+
+  return (
+    <>
+      {show && (
+        <div style={contStyles} id="momentum-container">
+          <Card>
+            <CardContent
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                flexDirection: 'column',
+              }}
+            >
+              <IconButton
+                onClick={onDismiss}
+                style={{
+                  position: 'absolute',
+                  right: 10,
+                  top: 0,
+                  zIndex: 100000,
+                  cursor: 'pointer',
+                }}
+              >
+                <CloseIcon sx={{ color: '#fff', width: 28, height: 28 }} />
+              </IconButton>
+
+              {user.cause.nameForShop === 'Ending Poverty' && (
+                <>
+                  <Typography
+                    variant="h4"
+                    gutterBottom
+                    align="center"
+                    style={{ marginTop: 20 }}
+                  >
+                    Send cash directly <br /> to someone in poverty{' '}
+                  </Typography>
+                  <Typography variant="body1" gutterBottom align="center">
+                    100% of your donation will support{' '}
+                    <a
+                      href="https://live.givedirectly.org/"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      GiveDirectly's
+                    </a>{' '}
+                    work to deliver <br /> cash transfers to families in need
+                    (check out their{' '}
+                    <a
+                      href="https://www.npr.org/2024/01/10/1197956397/give-directly-universal-basic-income-poverty-kenya"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Planet Money
+                    </a>{' '}
+                    feature). <br /> <br /> Giving cash is effective,
+                    evidence-backed, and empowering.
+                    <br /> Will you join other Tabbers making a monthly cash
+                    donation?
+                  </Typography>
+                  <Button
+                    onClick={onOpen}
+                    variant="contained"
+                    color="primary"
+                    style={{
+                      marginTop: 10,
+                      marginBottom: 10,
+                      width: 250,
+                      marginLeft: 'auto',
+                      marginRight: 'auto',
+                    }}
+                  >
+                    I want to help!
+                  </Button>
+                </>
+              )}
+
+              {user.cause.nameForShop === 'Shelter Cats' && (
+                <>
+                  <Typography
+                    variant="h4"
+                    gutterBottom
+                    align="center"
+                    style={{ marginTop: 20 }}
+                  >
+                    Automatically Help <br /> Even More Shelter Cats
+                  </Typography>
+                  <Typography variant="body1" gutterBottom align="center">
+                    We’re putting together a team of shelter cat heroes that are
+                    willing to chip in $1 each time a shelter cat is put up for
+                    adoption on Petfinder. The money raised will go directly to{' '}
+                    <a
+                      href="https://greatergood.org/jackson-galaxy#catpawsitive"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Greater Good
+                    </a>{' '}
+                    and will work to ensure 1000s of shelter cats have better
+                    lives!
+                  </Typography>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    style={{
+                      marginTop: 10,
+                      marginBottom: 10,
+                      width: 250,
+                      marginLeft: 'auto',
+                      marginRight: 'auto',
+                    }}
+                  >
+                    Join the Team
+                  </Button>
+                </>
+              )}
+
+              {user.cause.nameForShop === 'Reproductive Health' && (
+                <>
+                  <Typography
+                    variant="h4"
+                    gutterBottom
+                    align="center"
+                    style={{ marginTop: 20 }}
+                  >
+                    Help Fight For <br /> Reproductive Health Rights
+                  </Typography>
+                  <Typography variant="body1" gutterBottom align="center">
+                    We’re putting together a team to fight for reproductive
+                    rights by chipping in a few dollars directly to the{' '}
+                    <a
+                      href="https://reproductiverights.org"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Center for Reproductive Rights
+                    </a>{' '}
+                    each time new anti-abortion legislation is proposed. Let’s
+                    make it clear where the public stands on access to
+                    reproductive healthcare and help disincentivize proposing
+                    these harmful bills.
+                  </Typography>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    style={{
+                      marginTop: 10,
+                      marginBottom: 10,
+                      width: 250,
+                      marginLeft: 'auto',
+                      marginRight: 'auto',
+                    }}
+                  >
+                    Join the Team
+                  </Button>
+                </>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {iframeUrl && (
+        <Modal
+          id="momentum-modal"
+          open={openWidget}
+          style={{
+            top: 100,
+            left: 0,
+            right: 0,
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            maxWidth: 1200,
+            bottom: 100,
+            position: 'absolute',
+            backgroundColor: 'white',
+            zIndex: 100000000,
+          }}
+        >
+          <div style={{ height: '100%' }}>
+            <IconButton
+              onClick={onClose}
+              style={{ position: 'absolute', right: 25, top: 5 }}
+            >
+              <CloseIcon sx={{ color: '#fff', width: 28, height: 28 }} />
+            </IconButton>
+
+            <div
+              style={{
+                height: '100%',
+                width: '100%',
+                padding: 40,
+                backgroundColor: 'white',
+                display: 'flex',
+                flexFlow: 'column',
+              }}
+            >
+              <Typography
+                variant="h4"
+                gutterBottom
+                align="center"
+                style={{ marginTop: 20, flex: '0 1 auto' }}
+              >
+                {user.cause.nameForShop === 'Ending Poverty' && (
+                  <>Pledge a monthly donation to people in poverty.</>
+                )}
+              </Typography>
+
+              {user.cause.nameForShop === 'Ending Poverty' && (
+                <Typography variant="body1" gutterBottom align="center">
+                  A donation of just $20/month for a year could help a family
+                  buy a plot of land, install a pump for clean water, build a
+                  home, and{' '}
+                  <a
+                    href="https://live.givedirectly.org/"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    more
+                  </a>
+                  .
+                </Typography>
+              )}
+              <iframe
+                style={{ border: 'none', flex: '1 1 auto' }}
+                id="momentum-donation-form"
+                title="Widget Content"
+                src={iframeUrl}
+                width="100%"
+              />
+            </div>
+          </div>
+        </Modal>
+      )}
+    </>
+  )
+}
+
+Momentum.displayName = 'MomentumComponent'
+
+Momentum.propTypes = {
+  user: PropTypes.shape({
+    userId: PropTypes.string,
+    cause: PropTypes.shape({
+      nameForShop: PropTypes.string,
+    }),
+  }).isRequired,
+}
+
+Momentum.defaultProps = {}
+
+export default Momentum

src/pages/index.js

@@ -32,6 +32,7 @@ import SquadCounter from 'src/components/SquadCounter'
 import CustomThemeHOC from 'src/utils/pageWrappers/CustomThemeHOC'
 import withGoogleAnalyticsProperties from 'src/utils/pageWrappers/withGoogleAnalyticsProperties'
 import SfacActivityContainer from 'src/components/SfacActivityContainer'
+import Momentum from 'src/components/Momentum'
 
 // material components
 import { makeStyles } from '@material-ui/core/styles'
@@ -233,12 +234,13 @@ const useStyles = makeStyles((theme) => ({
     background: grey['300'],
   },
   centerContainer: {
-    height: '100%',
-    width: '100%',
     display: 'flex',
+    position: 'relative',
+    flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingBottom: 220, // for visually-appealing vertical centering
+    overflow: 'scroll',
+    height: '100vh',
   },
   searchBarContainer: {
     display: 'flex',
@@ -1038,7 +1040,10 @@ const Index = ({ data: fallbackData, userAgent }) => {
               ) : null}
             </div>
 
-            <div className={classes.centerContainer}>
+            <div className={classes.centerContainer} id="center-container">
+              {/* Momentum Direct Donate */}
+              {user.userId && <Momentum user={user} />}
+
               <div className={classes.searchBarContainer}>
                 {/* Prime day 2023 Promo */}
                 {/* {user.userId && notif && <PrimeDay2023 user={user} />} */}