From 14852cd0e94f112d0b4fa447d9e0127f1ab9b7ab Mon Sep 17 00:00:00 2001
From: Spicer Matthews <github@cloudmanic.com>
Date: Fri, 15 Mar 2024 10:23:38 -0700
Subject: [PATCH] Fixed up donation form for give directly

---
 src/components/Momentum.js | 297 +++++++++++++++++++++++++++++++++++++
 src/pages/index.js         |   8 +-
 2 files changed, 302 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Momentum.js

diff --git a/src/components/Momentum.js b/src/components/Momentum.js
new file mode 100644
index 00000000..db4af987
--- /dev/null
+++ b/src/components/Momentum.js
@@ -0,0 +1,297 @@
+import React, { 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 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: 10,
+  marginBottom: 20,
+  zIndex: 100000,
+}
+
+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
+  }
+
+  if (user.cause.nameForShop !== 'Ending Poverty') {
+    return null
+  }
+
+  // useEffect(() => {
+  //   const dissNotif =
+  //     localStorageMgr.getItem(getNotifDismissKey('momentum')) || false
+
+  //   if (!dissNotif) {
+  //     setShow(true)
+  //   } else {
+  //     setShow(false)
+  //   }
+  // }, [user])
+
+  return (
+    <>
+      {show && (
+        <div style={contStyles} id="momentum-container">
+          <script src="https://donation-form-static.givemomentum.com/widget.js" />
+          <Card>
+            <CardContent
+              onClick={onOpen}
+              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>
+
+              {user.cause.nameForShop === 'Ending Poverty' && (
+                <>
+                  <Typography
+                    variant="h4"
+                    gutterBottom
+                    align="center"
+                    style={{ marginTop: 20 }}
+                  >
+                    Send life-changing cash directly <br /> to someone in
+                    poverty
+                  </Typography>
+                  <Typography variant="body1" gutterBottom align="center">
+                    Cash transfers empower people in extreme poverty to choose
+                    how best to <br /> improve their lives (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). Giving cash is effective, evidence-backed, and
+                    empowering. Will you join our group of Tabbers amplifying
+                    their impact with a monthly cash donation?
+                  </Typography>
+                  <Button
+                    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
+          open={openWidget}
+          style={{
+            top: 100,
+            left: 100,
+            right: 100,
+            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">
+                  100% of your donation will support GiveDirectly’s work to
+                  deliver cash directly to families in need, no strings
+                  attached. <br /> 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, or more.
+                </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
diff --git a/src/pages/index.js b/src/pages/index.js
index 0154255a..3c71843b 100644
--- a/src/pages/index.js
+++ b/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,10 @@ const useStyles = makeStyles((theme) => ({
     background: grey['300'],
   },
   centerContainer: {
-    height: '100%',
-    width: '100%',
     display: 'flex',
+    flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingBottom: 220, // for visually-appealing vertical centering
   },
   searchBarContainer: {
     display: 'flex',
@@ -1014,6 +1013,9 @@ const Index = ({ data: fallbackData, userAgent }) => {
             </div>
 
             <div className={classes.centerContainer}>
+              {/* Momentum Direct Donate */}
+              {user.userId && <Momentum user={user} />}
+
               <div className={classes.searchBarContainer}>
                 {/* Prime day 2023 Promo */}
                 {/* {user.userId && notif && <PrimeDay2023 user={user} />} */}