feat: add Donation Modal as menu item (#833)

hasadna · Jul 27, 2024 · ef02293 · ef02293
1 parent 2bd169c
commit ef02293
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 16 deletions.
diff --git a/src/layout/sidebar/menu/Menu.tsx b/src/layout/sidebar/menu/Menu.tsx
@@ -7,6 +7,8 @@ import type { MenuProps } from 'antd'
 import { Menu } from 'antd'
 import { PAGES } from 'src/routes'
 import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext'
+import DonateModal from 'src/pages/DonateModal/DonateModal'
+
 type MenuItem = Required<MenuProps>['items'][number]
 function getItem(
   label: React.ReactNode,
@@ -25,14 +27,32 @@ function getItem(
 const MainMenu = () => {
   const { t } = useTranslation()
   const { setDrawerOpen } = useContext<LayoutContextInterface>(LayoutCtx)
+  const [isDonateModalVisible, setDonateModalVisible] = useState(false)
+
+  const handleDonateClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    setDonateModalVisible(true)
+    setDrawerOpen(false)
+  }
+
   const items: MenuItem[] = PAGES.map((itm) => {
-    return getItem(
-      <Link to={itm.path} onClick={() => setDrawerOpen(false)}>
-        {t(itm.label)}
-      </Link>,
-      itm.path,
-      itm.icon,
-    )
+    if (itm.label === 'donate_title') {
+      return getItem(
+        <a href="#" onClick={handleDonateClick}>
+          {t(itm.label)}
+        </a>,
+        itm.path,
+        itm.icon,
+      )
+    } else {
+      return getItem(
+        <Link to={itm.path} onClick={() => setDrawerOpen(false)}>
+          {t(itm.label)}
+        </Link>,
+        itm.path,
+        itm.icon,
+      )
+    }
   })
 
   const location = useLocation()
@@ -52,13 +72,16 @@ const MainMenu = () => {
     setCurrent(key)
   }
   return (
-    <Menu
-      onClick={handleClick}
-      theme="light"
-      selectedKeys={[current]}
-      mode="inline"
-      items={items}
-    />
+    <>
+      <Menu
+        onClick={handleClick}
+        theme="light"
+        selectedKeys={[current]}
+        mode="inline"
+        items={items}
+      />
+      <DonateModal isVisible={isDonateModalVisible} onClose={() => setDonateModalVisible(false)} />
+    </>
   )
 }
 

diff --git a/src/pages/DonateModal/DonateModal.tsx b/src/pages/DonateModal/DonateModal.tsx
@@ -0,0 +1,87 @@
+import React from 'react'
+import { Box, Grid, Modal, Typography } from '@mui/material'
+import i18n from 'src/locale/allTranslations'
+
+interface DonateModalProps {
+  isVisible: boolean
+  onClose: () => void
+}
+
+const style = {
+  position: 'fixed',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  maxWidth: 1000,
+  width: '90%',
+  bgcolor: 'background.paper',
+  boxShadow: 24,
+  p: 4,
+} as const
+
+const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose }) => {
+  return (
+    <Modal
+      open={isVisible}
+      onClose={onClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description">
+      <Box dir={i18n.dir()} sx={style}>
+        <button onClick={onClose} className="close-modal-icon">
+          X
+        </button>
+        <Typography id="modal-modal-title" variant="h6" component="h2">
+          כיצד לתרום?
+        </Typography>
+        <p>
+          מאחורי הקלעים של הפרוייקטים פועל צוות קטן ומסור, שדואג לארגון מפגשי הפיתוח וההאקתונים
+          ותחזוקת השרתים, שמכתת רגליו בין משרדי ממשלה כדי לשכנע, ללחוץ, ולנדנד לשחרר עוד ועוד
+          מאגרים; מוודא שהתקשורת תכיר את העבודה שלנו וגם תדע לפנות אלינו בשביל נתונים וניתוחים,
+          ועושה עוד המון עבודה שוטפת כדי שהפרוייקטים שלנו ייצרו שינוי בעולם. אנחנו זקוקים לתמיכה של
+          הקהילה כדי להמשיך ולפעול למען ממשל פתוח יותר. היו אבירי שקיפות והצטרפו בתמיכה חודשית.
+        </p>
+        <Grid container spacing={2}>
+          <Grid item xs={6}>
+            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+              <h2>תרומה דרך אתר jgive.com</h2>
+              <a
+                href="https://www.jgive.com/new/he/ils/donation-targets/3268"
+                target="_blank"
+                rel="noreferrer">
+                <img
+                  src="https://www.hasadna.org.il/wp-content/uploads/2017/12/%D7%AA%D7%A8%D7%95%D7%9E%D7%95%D7%AA.jpg"
+                  alt="קישור לתרומה"
+                />
+                <img
+                  src="https://www.hasadna.org.il/wp-content/uploads/2018/08/button-300x73.png"
+                  alt="תרום עכשיו"
+                />
+              </a>
+            </Typography>
+          </Grid>
+          <Grid item xs={6}>
+            <h2>תרומה דרך העברה בנקאית</h2>
+            <p>
+              מומלץ לתרום דרך העברה בנקאית לחשבון הבנק של הסדנא לידע ציבורי, מכיוון שבאפיק זה העמלה
+              נמוכה יותר
+            </p>
+            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+              בנק: יו-בנק (26) <br />
+              סניף: רחביה (262)
+              <br />
+              חשבון: 419931
+              <br />
+              שם החשבון: הסדנא לידע ציבורי
+            </Typography>
+            <sub>
+              נא לציין שם מלא וליצור קשר במייל info@hasadna.org.il לאחר התרומה על מנת שנוכל לשלוח
+              קבלה
+            </sub>
+          </Grid>
+        </Grid>
+      </Box>
+    </Modal>
+  )
+}
+
+export default DonateModal
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -89,9 +89,9 @@ export const PAGES = [
   },
   {
     label: 'donate_title',
-    path: 'https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal',
+    path: '/donate',
     icon: <DollarOutlined />,
-    element: null,
+    element: null, //DonateModal
   },
   {
     label: 'public_appeal_title',