Merge branch 'dev' into main

edenia · Jan 7, 2022 · e8b9a1d · e8b9a1d
2 parents d89400d + 1ed6eba
commit e8b9a1d
Show file tree

Hide file tree

Showing 13 changed files with 309 additions and 237 deletions.
diff --git a/.github/workflows/push-dev-environment.yaml b/.github/workflows/push-dev-environment.yaml
@@ -34,7 +34,7 @@ jobs:
           REACT_APP_VERSION: ${{ github.ref }}
           REACT_APP_NAME: 'proton_affiliate'
           REACT_APP_TITLE: 'Affiliate Account Referrals Program on Proton Blockchain'
-          REACT_APP_CHAIN_LOGO: 'https://test.earnproton.com/proton.png'
+          REACT_APP_CHAIN_LOGO: 'https://test.earnproton.com/proton-logo.png'
           REACT_APP_FOOTER_LINKS: '[]'
           REACT_APP_UAL_APP_NAME: 'Proton Affiliate Program'
           REACT_APP_UAL_API_PROTOCOL: 'https'

diff --git a/.github/workflows/push-prod-environment.yaml b/.github/workflows/push-prod-environment.yaml
@@ -34,7 +34,7 @@ jobs:
           REACT_APP_VERSION: ${{ github.ref }}
           REACT_APP_NAME: 'proton_affiliate'
           REACT_APP_TITLE: 'Affiliate Account Referrals Program on Proton Blockchain'
-          REACT_APP_CHAIN_LOGO: 'https://earnproton.com/proton.png'
+          REACT_APP_CHAIN_LOGO: 'https://earnproton.com/proton-logo.png'
           REACT_APP_FOOTER_LINKS: '[]'
           REACT_APP_UAL_APP_NAME: 'Proton Affiliate Program'
           REACT_APP_UAL_API_PROTOCOL: 'https'

diff --git a/webapp/package.json b/webapp/package.json
@@ -34,7 +34,7 @@
     "@material-ui/pickers": "^3.2.10",
     "@material-ui/styles": "^4.11.3",
     "@material-ui/system": "^4.11.3",
-    "@proton/web-sdk": "^2.7.23",
+    "@proton/web-sdk": "^3.3.3",
     "clsx": "^1.1.1",
     "core-js": "^3.9.1",
     "date-fns": "^2.19.0",

diff --git a/webapp/public/proton-logo.png b/webapp/public/proton-logo.png
diff --git a/webapp/src/components/Accordion/index.js b/webapp/src/components/Accordion/index.js
@@ -6,20 +6,42 @@ import AccordionSummary from '@material-ui/core/AccordionSummary'
 import AccordionDetails from '@material-ui/core/AccordionDetails'
 import Typography from '@material-ui/core/Typography'
 import Box from '@material-ui/core/Box'
+import IconButton from '@material-ui/core/IconButton'
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
+import FilterListIcon from '@material-ui/icons/FilterList'
+import Menu from '@material-ui/core/Menu'
+import MenuItem from '@material-ui/core/MenuItem'
+import CheckIcon from '@material-ui/icons/Check'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
 
 import styles from './styles'
 
 const useStyles = makeStyles(styles)
 
-const AccordionComponent = ({ children, title }) => {
+const AccordionComponent = ({
+  children,
+  title,
+  handleOnFilter,
+  filterValues,
+  filterRowsBy
+}) => {
   const classes = useStyles()
   const [expanded, setExpanded] = useState(false)
+  const [anchorEl, setAnchorEl] = useState(null)
 
   const handleAccordionExpand = () => {
     setExpanded(!expanded)
   }
 
+  const handleOpenMenu = event => {
+    event.stopPropagation()
+    setAnchorEl(event.currentTarget)
+  }
+  const handleClose = newFilterBy => {
+    setAnchorEl(null)
+    handleOnFilter(newFilterBy)
+  }
+
   return (
     <Box className={classes.root}>
       <Accordion className={classes.accordion}>
@@ -34,19 +56,67 @@ const AccordionComponent = ({ children, title }) => {
             <Typography variant="h1" className={classes.heading}>
               {title}
             </Typography>
+
+            {!!filterValues.length && (
+              <IconButton onClick={handleOpenMenu}>
+                <FilterListIcon />
+              </IconButton>
+            )}
           </Box>
         </AccordionSummary>
         <AccordionDetails className={classes.accordionDetails}>
           {children}
         </AccordionDetails>
       </Accordion>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        getContentAnchorEl={null}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right'
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right'
+        }}
+        onClose={() => handleClose(0)}
+      >
+        {(filterValues || []).map((item, index) => {
+          return (
+            <MenuItem
+              key={index}
+              className={classes.menu}
+              onClick={() => handleClose(index)}
+            >
+              <Typography className={classes.menuLabel}>{item}</Typography>
+
+              {index === filterRowsBy && (
+                <ListItemIcon>
+                  <CheckIcon className={classes.checkIcon} fontSize="small" />
+                </ListItemIcon>
+              )}
+            </MenuItem>
+          )
+        })}
+      </Menu>
     </Box>
   )
 }
 
 AccordionComponent.propTypes = {
   title: PropTypes.string,
-  children: PropTypes.node
+  children: PropTypes.node,
+  handleOnFilter: PropTypes.func,
+  filterValues: PropTypes.array.isRequired,
+  filterRowsBy: PropTypes.number.isRequired
+}
+
+AccordionComponent.defaultProps = {
+  handleOnFilter: () => {},
+  filterValues: [],
+  filterRowsBy: 0
 }
 
 export default AccordionComponent
diff --git a/webapp/src/components/Accordion/styles.js b/webapp/src/components/Accordion/styles.js
@@ -29,5 +29,21 @@ export default theme => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center'
+  },
+  checkIcon: {
+    color: theme.palette.primary.main,
+    margin: theme.spacing(0, 2)
+  },
+  menuLabel: {
+    alignSelf: 'flex-start',
+    flexGrow: 0,
+    fontFamily: 'Roboto',
+    fontSize: 14,
+    fontWeight: 'normal',
+    fontStretch: 'normal',
+    fontStyle: 'normal',
+    lineHeight: 2.29,
+    letterSpacing: 0.04,
+    textAlign: 'left'
   }
 })
diff --git a/webapp/src/components/TableSearch/index.js b/webapp/src/components/TableSearch/index.js
@@ -22,6 +22,8 @@ import { mainConfig } from '../../config'
 
 import styles from './styles'
 
+const useStyles = makeStyles(styles)
+
 const EnhancedTableHead = ({
   onSelectAllClick,
   numSelected,
@@ -74,8 +76,6 @@ EnhancedTableHead.propTypes = {
   classes: PropTypes.object
 }
 
-const useStyles = makeStyles(styles)
-
 const TablePages = ({
   usePagination,
   showColumnCheck,
@@ -298,7 +298,6 @@ const TablePages = ({
             </TableBody>
           </Table>
         </TableContainer>
-
         <Box
           style={{
             marginTop: 16,
@@ -328,7 +327,6 @@ const TablePages = ({
             </Button>
           )}
         </Box>
-
         {usePagination && (
           <TablePagination
             classes={{ root: classes.tablePagination }}

diff --git a/webapp/src/context/state.context.js b/webapp/src/context/state.context.js
@@ -5,7 +5,7 @@ import React, {
   useContext,
   useEffect
 } from 'react'
-import { ConnectWallet } from '@proton/web-sdk'
+import ProtonWebSDK from '@proton/web-sdk'
 import PropTypes from 'prop-types'
 
 import { sdkConfig, mainConfig } from '../config'
@@ -20,7 +20,7 @@ const initialValue = {
 
 const loginWallet = async (restoreSession = false) => {
   try {
-    const { link, session } = await ConnectWallet({
+    const { link, session } = await ProtonWebSDK({
       linkOptions: {
         endpoints: sdkConfig.endpoint,
         restoreSession
@@ -137,6 +137,9 @@ export const useSharedState = () => {
   const login = async () => {
     try {
       const { link, session } = await loginWallet(false)
+
+      if (!link || !session) return
+
       const role = await affiliateUtil.getUserRole(session?.auth?.actor)
 
       dispatch({

diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json
@@ -163,7 +163,10 @@
     "deleteSuccessfully": "Deleted Successfully",
     "successNewUser": "Account has been added to the User Management table.",
     "rejectPaymentModal": "You are about to REJECT this referral payment. Leave a memo providing a reason.",
-    "rejectMemo": "Rejection memo"
+    "rejectMemo": "Rejection memo",
+    "menuAllRoles": "All roles",
+    "menuAdminRole": "Admin only",
+    "menuReferrerRole": "Referrers only"
   },
   "footer": {
     "poweredBy": "Powered by",

diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json
@@ -42,5 +42,10 @@
     "protonGitHub": "GitHub EOS Costa Rica",
     "telegramChannel": "Grupo de Telegram",
     "protonWebsite": "Página web EOS Costa Rica"
+  },
+  "adminRoute": {
+    "menuAllRoles": "Todos los roles",
+    "menuAdminRole": "Solo admin",
+    "menuReferrerRole": "Solo referidos"
   }
 }
diff --git a/webapp/src/routes/Admin/index.js b/webapp/src/routes/Admin/index.js
@@ -288,6 +288,7 @@ const Admin = () => {
   const [newUsersPagination, setNewUsersPagination] = useState(
     initNewUsersPagination
   )
+  const [filterRowsBy, setFilterRowsBy] = useState()
   const [userRows, setUserRows] = useState([])
   const [userPagination, setUserPagination] = useState({})
   const [referralRows, setReferralRows] = useState([])
@@ -301,9 +302,12 @@ const Admin = () => {
   const handleOnLoadMoreUsers = async usePagination => {
     const pagination = usePagination ? userPagination : {}
     const users = await affiliateUtil.getUsers(pagination.cursor)
-    const referrers = (users.rows || []).map(item => item.user)
+    const usersByRole = users.rows.filter(
+      ({ role }) => !filterRowsBy || role === affiliateUtil.ROLES[filterRowsBy]
+    )
+    const referrers = (usersByRole || []).map(item => item.user)
     const { data } = await loadHistoryByReferrers({ referrers })
-    const newRows = (users.rows || []).map(row => {
+    const newRows = (usersByRole || []).map(row => {
       const history = data.history.filter(
         item => item.referral.referrer === row.user
       )
@@ -721,6 +725,10 @@ const Admin = () => {
     })
   }, [])
 
+  useEffect(() => {
+    reloadUsers()
+  }, [filterRowsBy])
+
   return (
     <Box className={classes.adminPage}>
       <Box className={classes.adminHead}>
@@ -762,7 +770,16 @@ const Admin = () => {
           usePagination
         />
       </Accordion>
-      <Accordion title="User Management">
+      <Accordion
+        title="User Management"
+        filterValues={[
+          t('menuAllRoles'),
+          t('menuAdminRole'),
+          t('menuReferrerRole')
+        ]}
+        filterRowsBy={filterRowsBy}
+        handleOnFilter={filterValue => setFilterRowsBy(filterValue)}
+      >
         <TableSearch
           tableName="management"
           onSelectItem={handleOnSelectItem}

diff --git a/webapp/src/routes/Join/index.js b/webapp/src/routes/Join/index.js
@@ -322,7 +322,7 @@ const Join = () => {
               className={classes.appleBtn}
               onClick={() =>
                 window.open(
-                  'https://apps.apple.com/us/app/proton-wallet/id1516536231',
+                  'https://apps.apple.com/us/app/webauth-com/id1594500069',
                   '_blank'
                 )
               }
@@ -334,7 +334,7 @@ const Join = () => {
               className={classes.googleBtn}
               onClick={() =>
                 window.open(
-                  'https://play.google.com/store/apps/details?id=com.metallicus.protonwallet&hl=en&gl=US',
+                  'https://play.google.com/store/apps/details?id=com.metallicus.webauth',
                   '_blank'
                 )
               }