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 && ( +
+