Merge pull request #16 from Chimoney/dev

fix/ui cleanup and refactor file

open-giving/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "no-unused-vars": "off",
+    "functional/immutable-data": "off",
+    "functional/no-class": "off"
+  }
+}

donation-ui/package.json → open-giving/package.json

@@ -1,13 +1,13 @@
 {
-  "name": "chimoney-upa-page",
+  "name": "chimoney-open-giving",
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "lint:fix": "next lint --fix"
+    "lint:fix": "eslint . --ext .js --fix"
   },
   "dependencies": {
     "@emotion/cache": "^11.11.0",

donation-ui/public/manifest.json → open-giving/public/manifest.json

@@ -1,7 +1,7 @@
 {
-    "name": "Chimoney UPA",
+    "name": "Chimoney Open Giving",
     "short_name": "Chimoney App",
-    "description": "Chimoney Universal Payment Application",
+    "description": "Donate to Verified Non-Profits",
     "start_url": "/",
     "display": "standalone",
     "background_color": "#ffffff",

donation-ui/src/components/ContactForm.js → open-giving/src/components/ContactForm.js

@@ -35,7 +35,7 @@ const ContactForm = () => {
         body: JSON.stringify({
           email,
           message,
-          notificationContext: "UPA Contact Form"
+          notificationContext: "Contact Form"
         })
       }
     );

donation-ui/src/components/DonationForm.js → open-giving/src/components/DonationForm.js

@@ -1,24 +1,24 @@
-import React, { useState } from 'react';
+import CardGiftcardIcon from '@mui/icons-material/CardGiftcard';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import LinkIcon from '@mui/icons-material/Link';
+import PaymentIcon from '@mui/icons-material/Payment';
 import {
-  ListItem,
-  ListItemText,
-  IconButton,
-  Typography,
-  Link,
   Accordion,
-  AccordionSummary,
   AccordionDetails,
+  AccordionSummary,
   Box,
-  TextField,
   Button,
   CircularProgress,
+  Link,
+  ListItem,
+  ListItemText,
+  TextField,
+  Typography,
 } from '@mui/material';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import CardGiftcardIcon from '@mui/icons-material/CardGiftcard';
-import PaymentIcon from '@mui/icons-material/Payment';
-import LinkIcon from '@mui/icons-material/Link';
-import { formatPaymentMethodName } from '../utils/paymentMethods';
+import React from 'react';
+
 import useDonation from '../hooks/useDonation';
+import { formatPaymentMethodName } from '../utils/paymentMethods';
 
 const DonationForm = ({
   method,

donation-ui/src/components/FilterAccordion.js → open-giving/src/components/FilterAccordion.js

@@ -1,14 +1,14 @@
-import React from 'react';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import FilterListIcon from '@mui/icons-material/FilterList';
 import {
   Accordion,
-  AccordionSummary,
   AccordionDetails,
-  Typography,
+  AccordionSummary,
   Box,
   Button,
+  Typography,
 } from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import FilterListIcon from '@mui/icons-material/FilterList';
+import React from 'react';
 
 const FilterAccordion = ({
   isExpanded,

donation-ui/src/components/Footer.js → open-giving/src/components/Footer.js

@@ -6,7 +6,7 @@ import React, { useEffect, useState } from 'react';
 
 const dev = process.env.NODE_ENV == 'development';
 
-const UPA = () => {
+const Footer = () => {
   const theme = useTheme();
   return (
     <div style={{ textAlign: 'center', paddingBottom: '60px' }}>
@@ -50,4 +50,4 @@ const UPA = () => {
   );
 };
 
-export default UPA;
+export default Footer;

donation-ui/src/components/Header.js → open-giving/src/components/Header.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Typography } from '@mui/material';
+import React from 'react';
 
 const Header = () => (
   <>

open-giving/src/components/Layout.js

@@ -0,0 +1,66 @@
+import GitHubIcon from '@mui/icons-material/GitHub';
+import LockIcon from '@mui/icons-material/Lock';
+import { Box, Button, Container, IconButton } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import React from 'react';
+
+const Layout = ({ children, plain = false }) => {
+  const theme = useTheme();
+
+  return (
+    <Box sx={{ minHeight: '100vh', backgroundColor: 'background.default' }}>
+      {!plain && (
+        <Box
+          sx={{
+            position: 'fixed',
+            top: 16,
+            right: 16,
+            zIndex: 1000,
+          }}
+        >
+          <IconButton
+            color="primary"
+            aria-label="github repository"
+            component="a"
+            href="https://github.com/Chimoney/non-profit-donations"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <GitHubIcon />
+          </IconButton>
+        </Box>
+      )}
+      {children}
+      {!plain && (
+        <Container
+          style={{
+            textAlign: 'center',
+            marginTop: '50px',
+          }}
+          maxWidth="xl"
+        >
+          <Button
+            variant="text"
+            disabled
+            startIcon={<LockIcon sx={{ width: '0.5em' }} color="success" />}
+            style={{
+              color: theme.palette.common.black,
+              margin: 'auto',
+              position: 'fixed',
+              left: 0,
+              bottom: 0,
+              width: '100%',
+              background: theme.palette.background.paper,
+              zIndex: '1000000',
+            }}
+            fullWidth
+          >
+            Built with ❤️ by Chimoney
+          </Button>
+        </Container>
+      )}
+    </Box>
+  );
+};
+
+export default Layout;

donation-ui/src/components/NonProfitCard.js → open-giving/src/components/NonProfitCard.js

@@ -7,6 +7,7 @@ import {
   Typography,
 } from '@mui/material';
 import React from 'react';
+
 import QRCodeComponent from './QRCodeComponent';
 
 export default function NonProfitCard({ nonProfit, onLearnMore, showQRCode }) {
@@ -85,7 +86,14 @@ export default function NonProfitCard({ nonProfit, onLearnMore, showQRCode }) {
           />
         </Box>
       ) : (
-        <Box sx={{ display: 'flex', justifyContent: 'center', mb: '20px' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'right',
+            mb: '20px',
+            mr: '30px',
+          }}
+        >
           {hasValidPaymentMethods && (
             <Button
               size="small"

donation-ui/src/components/NonProfitDialog.js → open-giving/src/components/NonProfitDialog.js

@@ -1,22 +1,23 @@
-import React, { useState } from 'react';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import EmailIcon from '@mui/icons-material/Email';
+import LanguageIcon from '@mui/icons-material/Language';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
 import {
+  Box,
+  Button,
+  Chip,
   Dialog,
-  DialogTitle,
-  DialogContent,
   DialogActions,
-  Button,
-  Typography,
+  DialogContent,
+  DialogTitle,
+  Divider,
   Grid,
-  Box,
-  Chip,
   Link,
-  Divider,
   List,
+  Typography,
 } from '@mui/material';
-import LocationOnIcon from '@mui/icons-material/LocationOn';
-import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
-import LanguageIcon from '@mui/icons-material/Language';
-import EmailIcon from '@mui/icons-material/Email';
+import React, { useState } from 'react';
+
 import DonationForm from './DonationForm';
 
 const NonProfitDialog = ({